@charset "utf-8";
/* CSS Document */

#soeff_o {
	max-width: 800px;
	margin: auto auto 80px;
	text-align: center;
	font-size: 26px;
}

#soeff_o .inner {
	width: 90%;
	margin: auto;
}

#soeff_o .flex_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


/*#concept*/

#soeff_o #concept {
	position: relative;
}

#soeff_o #concept .box {
	position: absolute;
	text-align: left;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	width: 45%;
}

#soeff_o #concept .box h3 {
	font-size: 32px;
	margin-bottom: 30px;
	letter-spacing: normal;
	font-weight: normal;
	line-height: 1.8;
}

#soeff_o #concept .box h3 span {
	font-size: 44px;
	letter-spacing: normal;
}

#soeff_o #concept .box p {
	line-height: 1.8;
}

#soeff_o #concept .box_2 {
	background: #73626C;
	color: #FFFFFF;
	padding: 0.3em 5%;
	font-size: 30px;
	margin-bottom: 30px;
}



#soeff_o #w_repair {
	background: #E3E0E2;
	padding: 30px 0;
}

#soeff_o #w_repair h3 {
	color: #72616C;
	font-size: 36px;
	font-weight: normal;
	padding: 0.5em 0 0.8em;
}

#soeff_o #w_repair .box {
	text-align: left;
	background: #FFFFFF;
	width: 90%;
	margin: auto;
	padding-bottom: 1.0em;
	line-height: 1.8;
}



/*.item_box*/

#soeff_o .item_box {
	margin: 50px auto 120px;
}


/*.detail*/

#soeff_o .detail {
	margin: 50px auto;
}

#soeff_o .detail .box_l {
	width: 30%;
	font-size: 18px;
	color: #777777;
}

#soeff_o .detail .box_l p {
	margin-top: 1.0em;
}

#soeff_o .detail .box_r {
	width: 70%;
}

#soeff_o .type01 .detail .box_r {
	text-align: left;
}

#soeff_o .detail .box_r .obi {
	border-radius: 25px;
	padding: 0.1em 0;
	margin-bottom: 30px;
}

#soeff_o .detail .box_r dl {
	text-align: left;
}

#soeff_o .detail .box_r dt {
	font-size: 36px;
	margin-bottom: 20px;
}

#soeff_o .detail .box_r dt span {
	font-size: 30px;
}

#soeff_o .detail .box_r dd span {
	font-size: 18px;
	color: #777777;
}

#soeff_o .detail ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 40px auto;
}

#soeff_o .detail li {
	width: 31%;
	border: 1px solid;
	padding: 0.5em 0;
}

#soeff_o .detail .flex_box {
	margin-bottom: 30px;
}


/*.extract*/

#soeff_o .extract p {
	font-size: 22px;
	line-height: 2.0;
	margin-bottom: 0.5em;
}

#soeff_o .extract {
	margin-bottom: 1.5em;
}



#soeff_o .type01 .detail .box_r dt {
	color: #72606C;
}

#soeff_o .type01 .obi {
	background: #E3E0E2;
	color: #73626C;
	display: inline-block;
	padding: 0.1em 2.0em!important;
}

#soeff_o .type01 .extract p {
	background: #E3E0E2;
}

#soeff_o .type02 .obi {
	background: #EDD4C1;
	color: #CA7E46;
	display: inline-block;
	padding: 0.1em 2.0em!important;
}

#soeff_o .type02 .detail .box_r dt {
	color: #CA7E46;
}



#soeff_o .type02 .extract p {
	background: #EDD4C1;
}




#soeff_o #howto {
	background: #F9F9F9;
	padding: 50px 0;
	margin-bottom: 80px;
}

#soeff_o #howto h3 {
	color: #725F6C;
	font-weight: normal;
	font-size: 40px;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}


#soeff_o #howto .box p {
	text-align: left;
	line-height: 1.8;
	margin: 30px auto 50px;
	font-size: 25px;
}

#soeff_o #howto .point {
	border: 1px solid;
	color: #72616C;
	padding: 0.8em 5%;
	font-size: 24px;
}

#soeff_o #howto .point dd {
	text-align: left;
	margin-top: 0.5em;
}



#soeff_o #feature {
	background: #F9F9F9;
	padding: 80px 0 50px;
}

#soeff_o #feature h3 {
	color: #72606C;
	font-weight: normal;
	font-size: 38px;
	letter-spacing: 0.2em;
}

#soeff_o #feature h3 span {
	font-size: 26px;
	display: inline-block;
	border-bottom: 1px solid;
	border-top: 1px solid;
	line-height: 4.0;
	letter-spacing: normal;
	width: 100%;
	margin: 30px auto;
}

#soeff_o #feature ul {
	text-align: left;
	display: inline-block;
	line-height: 1.8;
	margin-bottom: 30px;
}

@media only screen and (max-width: 480px) {
	#soeff_o {
    font-size: 16px;
	margin: auto auto 2.0em;
}
	#soeff_o .pc_ {
	display: none;
}	
	#soeff_o #concept .box h3 {
    font-size: 14px;
    margin-bottom: 0.5em;
}
	#soeff_o #concept .box h3 span {
    font-size: 20px;
}
	#soeff_o #concept .box p {
		font-size: 16px;
}
	#soeff_o .item_box {
    margin: 1.5em auto auto;
}
	#soeff_o .detail .box_r .obi {
    margin-bottom: 1.0em;
	font-size: 13px;
}
	#soeff_o .detail .box_r dt {
    font-size: 20px;
    margin-bottom: 0.8em;
}
	#soeff_o .detail .box_r dt span {
    font-size: 16px;
}
	#soeff_o .detail ul {
    margin: 1.5em auto;
}
	#soeff_o .extract p {
    font-size: 14px;
}

	#soeff_o #howto {
    padding: 2.0em 0;
		margin-bottom: 2.0em;
}
	#soeff_o #howto h3 {
    font-size: 22px;
	margin-bottom: 1.0em;
}
	#soeff_o #howto h3 span {
    font-size: 24px;
}
	#soeff_o #howto .box {
    margin-bottom: 0.5em;
}
	#soeff_o #concept .box_2 {
    font-size: 16px;
    margin-bottom: 1.0em;
}
	#soeff_o #concept .box {
    left: 45%;
    width: 50%;
}
	#soeff_o #w_repair h3 {
    font-size: 20px;
}
	#soeff_o #w_repair {
    padding: 1.5em 0;
}
	#soeff_o .detail .box_l {
    width: 26%;
}
	#soeff_o #howto .box p {
    margin: 1.0em auto 1.5em;
    font-size: 16px;
}
	#soeff_o #howto .point {
    font-size: 14px;
}
	#soeff_o .type02 .obi {
		padding: 0.1em 0.8em!important;
		font-size: 13px;
	}
	#soeff_o .detail .box_l {
    font-size: 9px;
}
	#soeff_o .detail .box_l span {
    font-size: 8px;
}
	#soeff_o .detail .box_r dd span {
    font-size: 12px;
}
	#soeff_o #feature h3 {
    font-size: 22px;
}
	#soeff_o #feature h3 span {
    font-size: 18px;
    margin: 1.2em auto;
}
	#soeff_o #feature {
    padding: 2.5em 0 2.0em;
}
}