*{
	position:relative;
	font-size:17px;
	text-align: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
}

/*↓EGOテーマのcss初期化*/

.l-main {
    background: unset;
}
.l-main-lp-page .l-main__inner {
	padding: unset;
}
.p-breadcrumb {
	padding-top: unset;
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	margin: auto;
	width: 100%;
	background: #F39800;
}
.l-main .p-breadcrumb__inner.l-inner{
	   text-align: left;
	   width: 100%;
	   max-width: 1900px;
	   margin: auto;
	   line-height: 3em;
	   padding: 0 2em;
}

.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
    color: white;
    font-weight: bold;
    font-size: 1.3vw;
}
.p-breadcrumb__item + .p-breadcrumb__item::before{
	font-size:0.9em;
}
a {
    color: unset;
}

.p-body h2 {
    font-size: 3.4em;
    font-weight: 700;
		background:none;
}


.p-lp-cb__item .p-lp-cb__item-body {
    line-height: 1.7;
    overflow: hidden;
}
.p-body ol {
    margin-left: 0;
}

/*↑EGOテーマのcss初期化*/


body{
	margin: 0;
	padding: 0;
}
body, input, textarea, select, button {
   font-family: 'Noto Sans JP', sans-serif;
}
i, em{font-style:normal;
	font-size: 1em;
	font-weight:inherit;
}
.entry-content a {
	color: unset;
}
.line_y{
    background: linear-gradient(transparent 70%, #ff0 0%);
}
.line_w{
    background: linear-gradient(transparent 70%, rgba(255,255,255,0.5) 0%);
}
.wline {
	background: url(/images/wline.gif) repeat-x bottom;
	padding: 0 0.5em;
	display: inline-block;
	background-size: 25%;
}
.cc, .ccp::before, .ccp::after{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.b_nml{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

li{
	list-style: none;
}
ol, ul{
	padding: 0;
}
.back_l1 {
	background: url(/images/back_l1.jpg);
	background-size: 120px;
}
.red{
    color: red;
}
.blu{
    color:blue;
}
.big {
    display: block;
    font-size: 2.4em;
    font-weight: 700;
}
.big2{
    display: block;
    font-size: 2.8em;
}
.tc{
	text-align:center;
}
.tl{
	text-align:left;
}
.tr{
	text-align:right;
}
.dbl{
	display:block;
}
.dib{
	display:inline-block;
}

.rou{border-radius:100%;}
.rou_c > *{border-radius:100%;}
.rou7{border-radius:7px;}

.san{    font-family: 'Noto Sans JP', sans-serif}
.ser{    font-family: 'Noto Serif JP', serif;}
.mpl{    font-family: 'M PLUS Rounded 1c', sans-serif;}
.ksg{   font-family: 'Kosugi Maru', sans-serif;}

.nml{  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
	color:unset;
}


.w_mos2{text-shadow: 0 0 0.1vw #fff, 0 0 0.2vw #fff, 0 0 0.3vw #fff, 0 0 0.4vw #fff, 0 0 0.5vw #fff, 0 0 0.6vw #fff, 0 0 0.7vw #fff, 0 0 0.8vw #fff, 0 0 0.9vw #fff, 0 0 1vw #fff, 0 0 1.1vw #fff, 0 0 1.2vw #fff, 0 0 1.3vw #fff, 0 0 1.4vw #fff, 0 0 1.5vw #fff, 0 0 1.6vw #fff, 0 0 3vw #fff;}

.w_pic{
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 5px #fff);
}
.tri_d::after {
	content: "▼";
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: -1em;
	z-index: 3;
}

/*↓ヘッダメニュー固定*/
.landing.p-header__lower, .l-header__fix .is-header-fixed .p-header__lower, .l-header__fix--mobile .is-header-fixed .p-header__lower {
    background: url(/images/dot2_gray.png) rgb(255 255 255 / 80%);
}

body.l-header__fix--mobile .is-header-fixed .p-header__lower::before, .landing.p-header__lower {
	border: none;
}

.l-inner {
	max-width: none;
}
#lp_cb_1 {
	margin: 0vw 0 0;
	position: absolute;
	top: -22vw;
}
.p-header__logo {
	margin: 0 1em 0 0;
}
.l-header__fix--mobile .is-header-fixed .p-header__lower-inner .p-header__logo a {
    width: 9.3em;
    margin: 0.6em 0;
    background: url(/images/online_logo_l3.png) no-repeat center;
    background-size: contain;
    height: 3em;
    line-height: 3em;
    font-size: 1.6em;
    letter-spacing: unset;
    /* filter: drop-shadow(1px 1px 0px rgb(24 41 135 / 80%)); */
    text-indent: -40em;
    overflow: hidden;
}
.l-header__fix--mobile .is-header-fixed .p-header__lower-inner .p-header__logo a span {
    font-size: 0.5em;
    display: block;
    line-height: 1.5em;
    text-indent: -200em;
}
.l-header__fix--mobile .is-header-fixed .p-header__lower-inner .p-header__logo a:hover{
	text-decoration:none;
	color:#fff;
}

.p-body .p-global-nav__container ul {
	margin:0;
}
.p-body .p-header__lower-inner li {
	display: inline-block;
	padding: 0 0.5em;
}
.p-header__lower-inner a, .l-header__fix .is-header-fixed .p-header__lower-inner, .l-header__fix--mobile .is-header-fixed .p-header__lower-inner a {
    color: #685232;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: -0.03em;
    font-family: 'Noto Serif JP', serif;
    text-shadow: 0px 0px 3px rgb(255 255 255);
    font-family: "丸フォーク M";
    font-weight: 900;
    -webkit-text-stroke: 0.3px;
}
.l-header__fix .is-header-fixed .p-header__lower-inner a:hover {
	color: #f38700;
	text-decoration: underline;
}
/*↑ヘッダメニュー固定*/

/*↓フッターリンク固定*/

#anybot{
    bottom: 4em !important;
	display:none;
}

.js-landlink {
width: 100%;
position: fixed;
bottom: 0;
z-index: 90;
}
.js-landlink .link {
margin: 0;
display: table;
}
.js-landlink .link li {
list-style-type: none;
display: table-cell;
border: 4px solid transparent;
}
.js-landlink .link li.l_l{
	border-right:none;
}
.js-landlink .link #js-l-pagetop {
	border-left: none;
	display: table-cell;
}
.js-landlink .link li a {
    display: table-cell;
    width: 50vw;
    text-align: center;
    height: 2.5em;
    line-height: 2.5em;
    font-size: 1.2em;
    background: rgb(243 152 0);
    outline: 1px solid #7a6b56;
    outline-offset: -1px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
}
.js-landlink .link li a , .js-landlink .p-pagetop a::after{
	color: #ffffff;
}

.js-landlink .link li a.to_top {
	padding: 0 0.8em;
}	
.js-landlink .link li a:hover {
    color: #fff;
    background: #7a6b56;
}
.js-landlink .p-pagetop a::after {
    font-size: unset;
}
.js-landlink .p-pagetop a:hover::after{
	color:#fff;
}

.js-landlink  .link li a br{
display:none;
}
#js-l-pagetop {
    position: unset;
    width: 2em;
}
.js-l-pagetop a{
}
#js-pagetop a {
display:none;
}


.js-landlink .link .l_l a::before, .js-landlink .link .r_l a::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1.4em;
    width: 2em;
    vertical-align: middle;
    filter: hue-rotate(296deg) brightness(0.9) contrast(1.2);
}
.js-landlink .link .l_l a::before{
		background-image: url(/images/foot_line.svg);
}
.js-landlink .link .r_l a::before{
		background-image: url(/images/foot_contact.svg);
}
.js-landlink .link .l_l a:hover::before, .js-landlink .link .r_l a:hover::before {
    filter: hue-rotate(130deg) brightness(3);
}
/*↑フッターリンク固定*/


.top_text {
	height: 0;
}
.t_cover {
	background: linear-gradient(to bottom, #DCDDDD 0, #DCDDDD calc(100% - 54px), #7a6b56 calc(100% - 54px), #7a6b56);
}
#top_image {
    background: url(/images/lp_pic.jpg) no-repeat center top;
    padding: 69.2vw 3em 0;
    color: #182987;
    text-align: left;
    background-size: 100%;
    margin: auto;
}
#top_image .logo{
    position: absolute;
    z-index: 1;
    top: 3.5em;
    left: 1em;
    display: inline-block;
    width: 8em;
    font-size: 1.6vw;
}
#for_you{
    background: #7a6b56;
    padding: 0 3em 4em;
    top: -1px;
}

#for_you > div{
    padding: 0 5em;
}
#for_you > div::before{
	content:"";
	position: absolute;
	display: block;
	background: url(/images/staff_point.gif) top left no-repeat;
	width: 18.4em;
	height: 21em;
	z-index: 2;
	bottom: -2em;
	left: -2em;
	height: 100%;
	max-height: 440px;
	min-height: 300px;
	background-size: contain;
}
#for_you h2{
    color: white;
    font-size: 2.7em;
    font-weight: 300;
    margin: 0 auto 0.8em;
    font-family: "丸フォーク M";
    transform: scale(1.05, 1);
}
#for_you p{
    color: #7a6b56;
    font-weight: 600;
    background: white;
    padding: 2em 13em;
    margin: 0;
    word-break: keep-all;
}
#for_you p::before{
	content:"";
	border: 1px solid #fff;
	width: calc(100% + 1em);
	height: calc(100% + 1em);
	display: block;
	position: absolute;
	top: -0.5em;
	left: -0.5em;
}
#for_you::after{
	content: "▼";
	position: absolute;
	font-size: 4em;
	margin: auto;
	left: 0;
	right: 0;
	z-index: 1;
	bottom: -0.9em;
	color: #7a6b56;
	transform: scale(1.6, 1);
}
#top_image .logo img{
    /* filter: hue-rotate(
239deg) saturate(2.9) brightness(1.3); */
}

span.fl_but, span.fl_plus, span.fl_down{
display: table;
width: 6em;
height: 6em;
margin: auto;
background-position: center;
background-repeat: no-repeat;
color: white;
background-size: contain;
}
span.fl_but b, span.fl_how b, span.fl_plus b, span.fl_down b, span.fl_down.gr.s b, span.fl_down.or.s b{
	display: table-cell;
	vertical-align: middle;
	font-family: 'Noto Sans JP', sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	font-weight: 800;
	color: white;
}
span.fl_down.gr b {
	text-shadow: 0 0 0.2vw #326a56, 0 0 0.2vw #326a56, 0 0 0.2vw #326a56, 0 0 0.2vw #326a56, 0 0 0.2vw #326a56, 0 0 0.2vw #326a56, 0 0 0.2vw #326a56;
}
span.fl_down.gr.s b {
	top: -0.7em;
}
span.fl_down.or b {
	text-shadow: 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519, 0 0 0.2vw #ff4519;
}

span.fl_but{
	background-image: url(/images/but.svg);
	padding-top: 1em;
}
span.fl_down.gr{
	background-image: url(/images/down_gr.svg);
}
span.fl_down.or{
	background-image: url(/images/down_or.svg);
}
span.fl_how {
	background: url(/images/how.svg) no-repeat;
	display: table;
	background-size: contain;
	text-align: center;
	transform: rotate(13deg);
	width: 5.7em;
	height: 7em;
	font-size: 1.2em;
}
span.fl_how b {
	top: -0.7em;
	left: -0.1em;
}
span.fl_plus{
	background-image: url(/images/plus.svg);
}


#problem::before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: url(/images/toppic_3.jpg) no-repeat center;
    background-size: cover;
    margin: auto;
    left: 0;
    top: 0;
    background-color: #ffc14f;
    background-blend-mode: overlay;
    opacity: 0.6;
    filter: contrast(0.9);
}
#problem p:nth-child(1) {
    color: red;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    margin: -1em 0 -0.5em;
    word-break: keep-all;
    padding: 0 2em;
}
ul.thoughts {
    background: url(/images/lp_thoughts.gif) center bottom no-repeat;
    padding: 2em 0 16em;
    z-index: 2;
    margin: 0 2em;
}
ul.thoughts li {
	display: inline-block;
	font-weight: bold;
	width: 9em;
	height: 9em;
	border: 1px solid #003b83;
	color: #003b83;
	margin: 0 -0.7em 0;
	line-height: 9em;
	background: linear-gradient(135deg, #fff 0, #dae3ff);
	font-size: 1.2em;
	z-index: 2;
	box-shadow: -1px 2px 3px rgba(0, 59, 131, 0.3);
}
#problem ul.thoughts li.d1 {
	top: 9.8em;
	margin: 0 -2.6em 0;
}
#problem ul.thoughts li.d2 {
	top: 4em;
	margin: 0 -1em 0;
}
#problem ul.thoughts li.d3 {
	top: 1em;
	margin: 0 -0.7em 0;
}
#problem ul.thoughts li.d4 {}

h2 {
	font-size: 3em;
}
#problem .h2_c {
    background: linear-gradient(to bottom, transparent 0, #003b83);
    color: #fff;
    padding: 6em 1em 0.7em;
    margin: -6em 0 0;
    text-shadow: 2px 2px 2px #003b83;
    word-break: keep-all;
}
#problem .h2_c::after {
    color: #003b83;
    text-shadow: none;
    transform: scale(2, 1);
    font-size: 4em;
}
#problem .h2_c span {
    display: block;
    font-size: 1.5em;
}
#problem .h2_c h2{}

.checks ul {
	padding: 5em 0em;
	margin: 0;
	max-width: 1500px;
	margin: auto;
}
.checks ul > br{
	display:none;
}
.checks ul li {
	font-size: 1.2em;
	color: #650e00;
	font-weight: bold;
	line-height: 1.6em;
	list-style: none;
	padding: 1.5em 0;
	border-top: 1px dashed;
}
.checks ul li:last-of-type{
    border-bottom: 1px dashed;
}

.checks ul li::before{
	content:"";
	background: url(/images/check.gif) left center no-repeat;
	padding: 1.5em 0 1.5em 1.9em;
	background-size: 1.5em;
}
#problem .checks {padding: 0em 3em;}
#problem .checks p {
    width: 55em;
    /* height: 30em; */
    margin: auto;
    display: table;
    padding: 0 0 3em;
}
#problem .checks p strong{
	display: table-cell;
	vertical-align: middle;
	font-size: 1.3em;
}
#problem .checks p strong .big {
    font-size: 1.8em;
    line-height: 1.4em;
    margin: 0.3em 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #bc0000;
}
#problem .checks p strong .big.b1 {
    background: url(/images/tv.svg) no-repeat center;
    background-size: contain;
    padding: 1.7em 0;
}
#problem .checks p strong .big.b2 {
    background: url(/images/hatena.svg) no-repeat center;
    background-size: contain;
    padding: 0.8em 0;
}

#problem .checks p::before{
	content: "";
}

#problem .shop_pic {
    background: url(/images/complain.gif) no-repeat center;
    height: 15em;
    background-size: contain;
    margin: 0 0 2em;
}
#problem .shop_pic::after {

}

.cont h2 {
    display: table;
    width: 100%;
    padding: 0 0.8em;
    font-family: 'Marcellus SC', serif;
    font-weight: 400;
    margin: 2.5em 0 1em;
    /* filter: hue-rotate(120deg); */
}
.cont h2 > * {
    height: 1.8em;
    display: table-cell;
}
.cont h2 i {
    width: 2.4em;
    background-size: contain;
}
.cont h2 i:nth-child(1) {
	background: url(/images/or_lens_l.gif) no-repeat left center;
	background-size: contain;
}

.cont h2 b {
    /* background: url(/images/h2_m.gif) repeat-x right; */
    font-size: 0.7em;
    padding: 0.1em 0 0;
    color: #7a6b56;
}
.cont h2 b::before{
	content:"";
	position: absolute;
	display: block;
	width: 100%;
	border-top: 4px dotted #F39800;
	top: 1.7em;
	margin: auto;
}
.cont h2 b em {
    display: block;
    /* transform: scale(1.05, 1); */
    font-family: "丸フォーク M";
}
.cont h2 b::after {
	display: block;
	font-size: 0.6em;
	top: 0.6em;
	position: relative;
	letter-spacing: 0.02em;
}
.cont h2 i:nth-child(3) {
	background: url(/images/or_lens_r.gif) no-repeat right center;
	background-size: contain;
}
#about::before{
	content:"";
	position: absolute;
	display: block;
	height: 36em;
	width: 101%;
	background: linear-gradient(-180deg, #fff, transparent 10em, transparent calc(100% - 10em),  #fff), url(/images/newshop_in.jpg) no-repeat left top;
	background-size: cover;
	top: 2.5em;
	background-color: #cca365 !important;
	background-blend-mode: screen !important;
}
#about .w_mos{
    font-weight: 500;
    font-size: 1.1em;
}
#about .intro.w_mos{}
#about .w_mos .line_y{
    color: #e6081a;
    font-weight: 700;
    padding-left: 0.3em;
}

#about h2 b::after{
	content: "About Eyes21";
}
#about .image{
	padding: 2em 0;
}
#about .image img, #about .icon i {
	display: inline-block;
	width: 30%;
	padding: 0.7em;
	background: #f4f1e1;
	box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
	margin: 0.3em -0.6em;
	border-radius: 7px;
	max-width: 400px;
}
#about .image img.prof1 {
	transform: rotate(6deg);
}
#about .image img.prof2 {
	transform: rotate(-7deg);
}
#about .image img.prof3 {
	transform: rotate(3deg);
}
#about .map {
    background: url(/images/okayama_map.svg) no-repeat center;
    padding: 10em 2em;
    background-size: contain;
    margin: 2em 0 -6em;
    /* filter: hue-rotate(70deg); */
    word-break: keep-all;
}
#about .map span.fl_but{
	margin: -6em auto 0;
	top: -2em;
}
#about .icon {
	margin: -5em 0 0;
}

#about .icon i {
	height: 10em;
	box-shadow: none;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 5px #fff);
}
#about .icon .i1{
	background: url(/images/research.gif) no-repeat center;
	background-size: contain;
}
#about .icon .i1::after, #about .icon .i2::after {
	content: "";
	background: url(/images/to_r.svg) no-repeat center;
	background-size: contain;
	width: 3em;
	height: 3em;
	display: block;
	position: absolute;
	right: -1.5em;
	bottom: 1.7em;
}
#about .icon .i2{
	background: url(/images/develop.gif) no-repeat center;
	background-size: contain;
}
#about .icon .i3{
	background: url(/images/idea.gif) no-repeat center;
	background-size: contain;
}
#about .tech{
    width: 100%;
}

#about .tech .fl_down{
    width: 9em;
    font-size: 1.2em;
}
#about .tech p:nth-of-type(1){
    background: url(/images/repair4-1.jpg) no-repeat center bottom;
    padding: 12em;
    background-size: cover;
    color: #fff;
    margin: -2em 0 2em;
    z-index: -1;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black, 0 0 4px black, 0 0 5px black;
    background-color: rgba(0,0,0,0.3);
    background-blend-mode: hard-light;
    word-break: keep-all;
}

#about .tech p:nth-of-type(2){
	color: #001572;
	font-size: 1.2em;
	font-weight: 600;
	background: #fff;
	padding: 2em;
	margin: -5em auto 0.4em;
}
#about .tech p:nth-of-type(2), #about .tech > div{
	width: 750px;
}
#about .tech > div{
    display: flex;
    align-items: center;
    margin: auto auto 2.5em;
}
#about .tech > div b{
    display: block;
    background: #ddd;
    width: 50%;
    font-size: 1.7em;
    /* font-weight: 900; */
    height: 8em;
    line-height: 3em;
    color: #fff;
    background-size: cover;
    text-shadow: 0 0 0.1vw #3858aa, 0 0 0.2vw #3858aa, 0 0 0.3vw #3858aa, 0 0 0.4vw #3858aa, 0 0 0.5vw #3858aa;
}
#about .tech > div b:nth-of-type(1){
    background-image: url(/images/lens_built3.jpg);
}
#about .tech > div span.fl_plus{
    margin: 0 1em;
    filter: hue-rotate(62deg) brightness(0.7) saturate(1.4);
}
#about .tech > div b:nth-of-type(2){
    background-image: url(/images/repair3.jpg);
}

#about .tech a.link{
	background:#001572;
	z-index: 2;
}
#about .tech a.link span{
    left: 0;
}

#about ol.example {
	padding: 1em 0;
}
#about ol.example li {
    height: 16em;
    background-size: cover;
    background-position: center;
}
#about ol.example li span {
    background: rgb(255 118 0 / 90%);
    display: inline-block;
    height: 6em;
    font-size: 1.5em;
    border-radius: 15px;
    padding: 2em 0.5em;
    margin: 2.2em 0;
    font-weight: bold;
    width: 34em;
    color: white;
    /* filter: hue-rotate(193deg); */
}
#about ol.example li span i {
    font-size: 0.95em;
}

#about ol.example .e1{
	background-image: url(/images/shop_6.jpg);
}
#about ol.example .e2{
	background-image: url(/images/ex2_b.jpg);
}
#about ol.example .e3{
	background-image: url(/images/crash1.jpg);
}

#about ol.example li::before {
	content: "";
	background-repeat: no-repeat;
	display: inline-block;
	width: 9em;
	height: 7em;
	background-size: contain;
	vertical-align: middle;
	padding-right: 1em;
	top: 1.7em;
	position: relative;
}
#about ol.example .e1::before{
	background-image: url(/images/ex1.gif);
}
#about ol.example .e2::before{
	background-image: url(/images/ex2.gif);
}
#about ol.example .e3::before{
	background-image: url(/images/ex3.gif);
}


#about ol.example li span::before {
	content: "";
	background: url(/images/wish.svg) no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	height: 2em;
	width: 2em;
	bottom: 0.5em;
	left: -2em;
}

#about .logo {
    margin: 1.6em auto;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 5em, rgba(255,255,255,0.5)), url(/images/logo_back.jpg) no-repeat center;
    padding: 3em 1em;
    background-size: cover;
    font-weight: bold;
    word-break: keep-all;
    filter: hue-rotate(53deg);
}
#about .logo::before {
	content: "";
	background: url(/images/up_gr.svg);
	display: inline-block;
	width: 4em;
	height: 4em;
	background-size: contain;
	transform: rotate(180deg);
	position: absolute;
	margin: -4.8em auto 0;
	right: 0;
	left: 0;
}
#about .logo img {
    display: block;
    margin: 1em auto;
    filter: hue-rotate(316deg);
}
#about .logo .big {
	color: #006934;
	font-size: 2.1em;
}

#service h2 b::after {
	content: "Online Service";
}
#service .image {
	background-image: url(/images/online_me.gif), url(/images/online_you.gif);
	padding: 8em 0 5em;
	background-size: contain;
	background-position: -6em, right;
	background-repeat: no-repeat;
	margin: auto;
	max-width: 1600px;
}
#service .image .logo {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0em;
	width: 31em;
}
#service .image .logo img {
	width: 48%;
	padding: 2%;
}
.joint {
	width: calc(100% - 25em);
	margin: auto;
	font-weight: 500;
	line-height: 2em;
}
.joint::before {
	content: "";
	display: block;
	background: url(/images/joint.svg) no-repeat;
	background-size: contain;
	width: 10em;
	height: 8em;
	z-index: -1;
}
#service .image .joint::after {
	content: "";
	width: 100%;
	display: block;
	border-top: 5px dotted #fff000;
	height: 0;
	z-index: -1;
}
#service .image .flame {
    background: linear-gradient(135deg, rgb(129 101 46 / 60%) 0, rgb(109 48 32 / 60%));
    width: 27em;
    margin: auto;
    padding: 1.6em 1em;
    top: 3.5em;
    border-radius: 7px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
}
#service .image .flame .line_y{
	background: linear-gradient(transparent 70%, #fc9f16 0%);
}
#service .image .big {
    line-height: 1.2em;
    color: #ffffff;
    font-size: 1.7em;
    padding-bottom: 0.5em;
}

/*　↓削除対応後部分　*/

#service .image {
	background-image: none;
	padding-top: 0;
	width: auto !important;
	margin-left: auto !important;
}
#service .image .flame{
    top: 0;
    margin-bottom: -3.5em;
    max-width: 50em;
    width: auto;
    border-radius: unset;
}
#service .image .big{
	padding: 0.5em 1em;
	word-break: keep-all;
}

#service .image .logo, .joint {
	display:none;
}
#service>p:nth-child(2){
    margin-bottom: 2em;
}

/*　↑削除対応後部分　*/


#service .fl_how {
	margin: -2.3em auto 0;
	/* filter: hue-rotate(203deg); */
}

ol.needs {
	margin: -3em auto 0;
	z-index: -1;
}
ol.needs li {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    border-radius: 7px;
    overflow: hidden;
    background-size: auto 70%;
    background-repeat: no-repeat;
    max-width: 460px;
    margin: 0 0.5em;
    background-position: center top;
}
ol.needs li span {
    position: absolute;
    display: inline-block;
    background: #7a6b56;
    color: #fff;
    padding: 2em 0 0.5em;
    transform: rotate(-45deg);
    left: -2.9em;
    top: -0.8em;
    width: 8em;
    font-size: 1.2em;
    font-weight: 800;
}
ol.needs li img {
	display: block;
	margin: 9.7em auto 0.9em;
	width: 30%;
}
ol.needs li p {
    background: linear-gradient(0deg, #fca01a 0, #fc9f16);
    margin: 0;
    padding: 1.5em;
    color: #ffffff;
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
    font-size: 1.3em;
    word-break: keep-all;
}
ol.needs .ne1{
	background-image: url(/images/ne4.jpg);
}
ol.needs .ne2{
	background-image: url(/images/shop_1.jpg);
}
ol.needs .ne3{
	background-image: url(/images/ne2.jpg);
}
ol.needs li p::before {
    content: "";
    background: url(/images/wish2.png) no-repeat center;
    display: block;
    position: absolute;
    width: 40px;
    height: 30px;
    top: -30px;
    left: 0;
    right: 0;
    margin: auto;
    background-size: contain;
    filter: hue-rotate(315deg) saturate(12);
}
.good .staff {
    background: linear-gradient(180deg, #fff, rgba(255 255 255 / 0%), #fff) ,url(/images/shop_room.jpg) no-repeat center;
    background-size: cover;
    padding: 7em 0;
    margin: -3em 0 -6em;
    z-index: -2;
}
.good .staff > p {
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #ff6f00;
    font-size: 1.3em;
    word-break: keep-all;
}
.good .staff > p::after {
    content: "";
    background: url(/images/teach.gif) no-repeat center;
    display: block;
    height: 24em;
    background-size: contain;
    margin: 2em 0 -2em;
    filter: drop-shadow(0px 0px 0.3em white);
}

.good .staff ul.thoughts {
	padding: 2em 0;
	background: none;
}
.good .staff ul.thoughts::after {
    content: "";
    background: url(/images/man_explain.gif) no-repeat center;
    display: block;
    height: 24em;
    background-size: contain;
    margin: 4em 0 -2em;
}

.good .staff ul.thoughts li {
	font-size: 1em;
}
.good .staff .big {
    color: #ff7b4d;
}
.good span.fl_plus {
	top: 1.2em;
	filter: hue-rotate(45deg);
}
.good .joint {
	margin: 3em auto 1em;
}
.good .joint::before{}

.good .joint b {
    font-weight: 800;
    font-size: 3em;
    display: block;
    line-height: 1.5em;
    color: #008ed1;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
#service ul.thoughts li {
    width: 10em;
    height: 10em;
    margin: 0 -0.7em -1.7em;
    line-height: 10em;
    font-size: 1.2em;
    background: linear-gradient(135deg, #003c83, #003c839c);
    color: white;
    border-color: white;
    filter: blur(-5px);
}

.kira {
    background: url(/images/online_pic.jpg) no-repeat center rgba(255,255,255,0.55);
    background-size: cover;
    z-index: -2;
    padding: 3em 0;
    margin: -1.7em 0 2em;
    background-blend-mode: lighten;
}
.kira .merit {
	padding: 1em 3em;
}
.kira .merit li {
    border-bottom: 1px dashed #0072a9;
    color: #003c83;
    font-weight: bold;
    font-size: 1.3em;
    padding: 1.3em 0;
}
.kira .merit li:nth-child(1) {
    border-top: 1px dashed #0072a9;
}
.kira .merit li b{
    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white;
}
.kira .merit li p{
    font-size: 1rem;
    margin: 1em auto 0;
    max-width: 45em;
    padding: 1.4em 2em;
    /* background: rgb(53 115 177 / 100%); */
    /* border-radius: 0.4em; */
    text-shadow: unset;
    color: white;
    /* mix-blend-mode: multiply; */
}
.kira .merit li p::before, .kira .merit li p::after{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
.kira .merit li p::before{
	content: "";
	z-index: -1;
	top: 0em;
	background: rgb(53 115 177 / 100%);
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	border-radius: 0.4em;
}
.kira .merit li p::after{
	content: "▲";
	position: absolute;
	top: -1.2em;
	color: #3573b1;
	font-size: 1.2em;
	/* mix-blend-mode: multiply; */
}
.complain {
    background-image: url(https://megane21-ok.jp/wp-content/uploads/nano_reason6_1.jpg), url(https://megane21-ok.jp/wp-content/uploads/masks.jpg);
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: contain;
    margin: 0 auto 0.3em;
    color: #ea5629;
    font-size: 1.6em;
    font-weight: 800;
    width: auto;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 1.5em 0;
    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white;
    max-width: 52em;
}
.with {
	background-image: url(/images/with.gif), url(/images/joint.svg);
	background-size: 14em, 8em;
	padding: 3.7em 0 8.5em;
	font-weight: 700;
	color: #003b83;
	font-size: 1.6em;
	background-position: center bottom, center 1em;
	background-repeat: no-repeat;
	margin: -0.3em 0 0 auto;
}
.veteran {
    height: 17.4em;
    margin: 2em auto 0;
    z-index: -1;
    background: linear-gradient(164deg, rgb(209 255 151 / 80%), rgb(151 221 255 / 80%)), url(https://megane21-ok.jp/wp-content/uploads/architect.jpg) no-repeat center;
    border-radius: 100% 100% 0 0;
    width: 120%;
    margin-left: -10%;
}
.veteran p {
    position: absolute;
    bottom: 0;
    padding: 2em;
    border-radius: 20px 0;
    color: #79544e;
    font-weight: bold;
    text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white;
    width: 56em;
    margin: auto;
    left: 0;
    right: 0;
    padding-right: 25em;
}
.veteran p::after {
	content: "";
	position: absolute;
	display: inline-block;
	background: url(https://megane21-ok.jp/wp-content/uploads/veteran.gif) no-repeat right;
	height: 26em;
	background-size: contain;
	width: 26em;
	bottom: 0;
	z-index: 5;
	right: 0em;
}
.veteran p::before {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/images/grace.gif) no-repeat center;
    width: 22em;
    height: 20em;
    background-size: contain;
    left: 4.6em;
    top: -3.4em;
    filter: brightness(1.7) saturate(0.2) hue-rotate(-32deg);
}
.veteran p b {
	font-size: 2em;
	display: block;
	line-height: 1.6em;
	top: -0.4em;
}

.veteran p b strong {
	font-size: 1.7em;
	line-height: 1.2em;
}

.veteran p b span {
	font-size: 0.6em;
}
p.resource {
    margin: 2em;
    word-break: keep-all;
    color: #79544e;
    font-weight: bold;
    background: #d6edcd;
    padding: 1em;
}

h3.point {
    color: #5e5e5e;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.6em;
    margin: 2em auto 0.8em;
}
h3.point span{
	display:inline-block;
}
h3.point span i {
    font-size: 1em;
    background: linear-gradient(transparent 70%, #ffb175 0%);
    padding: 0 0.4em;
    font-weight: 700;
}
h3.point::before, h3.point::after {
    content: "";
    display: inline-block;
    width: 1.7em;
    height: 1.7em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 0.7em;
    bottom: 0;
    vertical-align: bottom;
    filter: hue-rotate(292deg);
}
h3.point::before {
	background-image: url(/images/point_l.svg);
	left: -3em;
}
h3.point::after {
	background-image: url(/images/point_r.svg);
	right: -3em;
}
#scope ol{}

#scope ul {
	text-align: left;
	margin: auto;
	width: 62em;
}
#scope ul li {
	display: inline-block;
	width: 19em;
	height: 19em;
	background-size: contain;
	margin: 0.7em 0.6em;
	border-radius: 7px;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: top;
}
#scope .all .sc1 {	background-image: url(/images/sc1.jpg); }
#scope .all .sc2 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc2.jpg); }
#scope .all .sc3 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc3.jpg); }
#scope .all .sc4 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc4.jpg); }
#scope .all .sc5 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc5.jpg); }
#scope .all .sc6 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc6.jpg); }
#scope .all .sc7 {	background-image: url(https://megane21-ok.jp/wp-content/uploads/sc7.jpg); }

#scope .all .last {}
#scope .all .last i {
	display: inline-block;
	width: 7em;
	height: 7em;
	border: 1px solid;
	padding: 2em 0;
	border-radius: 5px;
	font-weight: 500;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #fff;
}
#scope .all .last::before{
	content: none;
}

#scope ul li::before {
    content: "";
    display: block;
    position: absolute;
    width: 17.6em;
    height: 17.6em;
    border: 2px solid #ff801c;
    left: 0.6em;
    top: 0.6em;
    border-radius: 5px;
    box-shadow: 0 0 1px #fff, 0 0 8px #fff;
}

#scope ul li span {
    display: inline-block;
    color: white;
    line-height: 2.5em;
    padding: 0 1em;
    top: 0.6em;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    border-radius: 0 0 5px 5px;
    width: 8em;
    text-shadow: 2px 2px 1px #934141;
}
#scope ul li span, #scope .all .last i{
	background: linear-gradient(135deg, #ffb175 0, #ff5151);
} 

#scope span.fl_down.gr {
    filter: hue-rotate(206deg) saturate(1.8);
}
#scope .option li span {
	border-radius: 5px;
	width: 14em;
	padding: 0.5em 1em;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%, 0.7em 50%);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	top: -0.5em;
}
#scope .option .sc1{ background-image: url(https://megane21-ok.jp/wp-content/uploads/sc_o1.jpg); } 
#scope .option .sc2{ background-image: url(/images/sc_o2.jpg); } 
#scope .option .sc3{ background-image: url(/images/sc_o3.jpg); } 

#scope .induct {
	padding: 1em 0;
}
#scope .induct b {
    font-size: 2em;
    color: #006934;
    padding: 0 0 0.5em;
}
#reason h2 b::after {
	content: "Reasons to be Chosen";
}
ul.reason {
    padding: 3em 0;
    margin-left: 0;
}
ul.reason::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/images/kirakira.jpg) no-repeat center;
    background-size: 100% 100%;
    filter: hue-rotate(231deg);
}
ul.reason li {
    list-style: none;
    background: url(/images/merit_b.gif);
    display: inline-block;
    width: 410px;
    height: 370px;
    margin: 1.5em 0.7em;
    background-size: contain;
    filter: hue-rotate(234deg) contrast(1.6);
}
ul.reason li span {
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-size: 4em;
	font-weight: bold;
	font-style: italic;
	line-height: 1em;
	margin: -0.5em 0 0.4em;
	color: #00a098;
}
ul.reason li b {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.55em;
	display: block;
	color: #666;
	letter-spacing: -0.02em;
	margin: 1.5em 0 0;
}
ul.reason li b i {
    background: linear-gradient(transparent 70%, #00dfff 0%);
    padding: 0 0.3em;
}
ul.reason li b::after {
	content: "";
	display: block;
	width: 110px;
	height: 75px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0.4em auto;
}
ul.reason .r1 b::after{	background-image: url(/images/r_6.gif);}
ul.reason .r2 b::after{	background-image: url(/images/r_2.gif);}
ul.reason .r3 b::after{	background-image: url(/images/r_5.gif);}
ul.reason .r4 b::after{	background-image: url(/images/r_7.gif);}
ul.reason li p{
    font-size: 0.95em;
}



#price h2 b::after {
	content: "Replace-Lens Fee";
}
#flow h2 b::after {
	content: "Order Flow";
}



#flow ol {
	padding: 0 4em;
	max-width: 1500px;
	margin: 2em auto;
}
#flow ol > li {
    list-style: none;
    margin: auto auto 2em;
}
#flow ol > li::before {
	color: #fff;
	content:"▼";
	position: absolute;
	z-index: 1;
	top: -0.6em;
	font-size: 1.4em;
	margin: auto;
	left: 0;
	right: 0;
	transform: scale(1.5, 1);
}
#flow ol > li:nth-of-type(1)::before{
	content:none;
}
#flow ol > li span {
    background: #847764;
    display: block;
    line-height: 4.2em;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    font-weight: 700;
    left: 0;
    right: 0;
    margin: auto auto 1em;
    font-size: 1.2em;
    font-family: "丸フォーク M";
    -webkit-text-stroke: 0.2px;
}

span {}

span {}
#flow ol > li span::before{
    background: #f39800;
    position: absolute;
    left: 0;
    padding: 0 0.8em;
    height: 100%;
    top: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 1.6em;
    font-weight: 400;
}
#flow ol > li:nth-of-type(1) span::before{
	content: "1";
}
#flow ol > li:nth-of-type(2) span::before{
	content:"2";
}
#flow ol > li:nth-of-type(3) span::before{
	content: "3";
}
#flow ol > li:nth-of-type(4) span::before{
	content:"4";
}
#flow ol > li:nth-of-type(5) span::before{
	content:"5";
}
#flow ol > li > div {
    padding: 0 0 0 24em;
    min-height: 14em;
    max-width: 66em;
    margin: auto;
}
#flow ol > li > div a{
    text-decoration: underline;
    font-weight: 600;
}
#flow ol > li > div::before{
	content:"";
	background-repeat: no-repeat;
	display: block;
	height: 12em;
	width: 22em;
	position: absolute;
	left: 0;
	background-size: contain;
}
#flow ol > li:nth-of-type(1) > div::before{
	background-image: url(/images/lens_il1.gif)
}
#flow ol > li:nth-of-type(2) > div::before{
	background-image: url(/images/lens_il2.gif)
}
#flow ol > li:nth-of-type(3) > div::before{
	background-image: url(/images/lens_il2_1.gif)
}
#flow ol > li:nth-of-type(4) > div::before{
	background-image: url(/images/lens_il3.gif)
}
#flow ol > li:nth-of-type(5) > div::before{
	background-image: url(/images/lens_il4_1.gif);
}
#flow ol > li > div > ul{
    /* padding: 0 0 3em; */
}
#flow ol > li > div > ul li{
    list-style: disc;
    list-style-position: inside;
    text-align: left;
    width: 50%;
    float: left;
    min-width: 18em;
    color: #922f00;
    font-weight: 600;
}
#flow ol > li > div p {
	padding: 0 0 1em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
	margin: auto;
}
#flow ol > li > div .l_c{
    clear: both;
    font-size: 0.9em;
    padding: 1.2em 0 0;
}
#flow ol > li > div a.link{
	background: #f39800;
	clear: both;
	margin: 0.4em;
	font-weight: bold;
	text-decoration: none;
}
#flow .reserve {
    background: url(/images/logo_back.jpg) #53ecd2 no-repeat center;
    background-size: cover;
    padding: 2em 6em;
    font-size: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    color: #fff;
    border-radius: 10em;
    margin: 1em;
    text-shadow: 0 0 0.1vw #00a589, 0 0 0.2vw #00a589, 0 0 0.3vw #00a589, 0 0 0.4vw #00a589, 0 0 0.5vw #00a589, 0 0 0.6vw #00a589, 0 0 0.7vw #00a589;
    display: inline-block;
    background-blend-mode: multiply;
    filter: hue-rotate(241deg) saturate(1.2);
}
#flow .reserve b {
	display: block;
	font-size: 1.6em;
}


#price.cont{
	display:none;
}


#price .mx_c{}
#price .mx_c::before{
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background:  url(/images/back_l4.jpg);
	left: 0;
	filter: hue-rotate(-5deg) brightness(0.7) saturate(0.8) contrast(0.9);
}
#price .mx_c > p{
    color: #fff;
    padding: 0em 0 0;
    top: 3em;
}
#price .mx_c > p::before{
	margin: auto auto;
	background: linear-gradient(180deg, white 0em, transparent);
	/* content:""; */
	height: 10em;
	width: 100%;
	/* display: block; */
	position: absolute;
	top: -2em;
}
#price ul{
	margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 5em;
 }


#price ul > li{
	flex: 1 0 50%;
	border-bottom: 1px solid #dfc1ac;
	border-right: 1px solid #dfc1ac;
	padding: 2em;
	color: #fff;
}
#price ul > li:nth-child(even){border-right: none;}
#price ul > li:nth-last-of-type(-n+2){
	border-bottom: none;
}
#price ul > li::before{
	content:"";
	display: block;
	position: relative;
	width: 100%;
	height: 29vw;
	max-height: 700px;
	margin: 0 0 1em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.6)) drop-shadow(-2px -2px 2.8px rgba(0,0,0,0.2)) contrast(1.2);
	max-width: 34rem;
	margin: auto;
}
#price ul > li:nth-of-type(1)::before{
	background-image:url(/images/UP2-155-S.gif);
}
#price ul > li:nth-of-type(2)::before{
	background-image:url(/images/UP2-160-AS.gif);
}
#price ul > li:nth-of-type(3)::before{
	background-image:url(/images/UP2-167-AS.gif);
}
#price ul > li:nth-of-type(4)::before{
	background-image:url(/images/SV160AS.gif);
}


#price ul > li > *{
	max-width: 31rem;
	margin: auto;
}
#price ul > li > b{
    font-size: 1.3em;
    display: block;
    line-height: 1.3em;
    padding: 0.5em;
    text-shadow: 1.5px 1.5px 3px #000;
    background: url(/images/dot_bl.gif);
    margin: auto auto 0.3em;
}
#price ul > li > b span{
    font-size: 1rem;
    display: block;
}
#price ul > li > div{
    padding: 0.4em 1em 0.6em;
    border: 1px solid #393939;
    background: rgb(255 255 255 / 10%);
    margin: 0 auto 1em;
}
#price ul > li > div::before{
	content: "- 主な仕様 -";
	display: block;
	font-size: 0.8em;
}
#price ul > li > p{line-height: 1.5em;padding: 0 0 4em;word-break: keep-all;}
#price ul > li > em{
    color: #ffeb00;
    font-size: 1.4em;
    font-weight: 600;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 1em;
}
#price ul > li > em::before{
	content:"価格：";
}


#price ul > li > div i{
    display: inline-block;
    padding: 0 0.5em;
    color: black;
    margin: 0.3em;
    font-size: 0.8em;
    font-weight: 700;
}
#price ul > li > div i:nth-of-type(1){
	background: #f39800;
}
#price ul > li > div i::before{}
#price ul > li > div i.uv{
    background: #e39eff;
}
#price ul > li > div i.uv::before{
	content:"UVカット";
}
#price ul > li > div i.dirt{
    background: #67f8ae;
}
#price ul > li > div i.dirt::before{
	content:"汚れ防止";
}
#price ul > li > div i.bl{
    background: #73d8ff;
}
#price ul > li > div i.bl::before{
	content:"BLカット";
}
#price ul > li > div i.hev{
    background: #ff7b7b;
}
#price ul > li > div i.hev::before{
	content:"HEVカット";
}
#price ul > li > div i.scr{
    background: #ccff95;
}
#price ul > li > div i.scr::before{
	content:"キズ防止";
}

#question h2 b::after {
	content: "FAQ";
}
#question .qa {
    border: 2px solid #847764;
    margin: 2em auto;
    max-width: 1500px;
    width: calc(100% - 9em);
    /* filter: hue-rotate(25deg) saturate(1.6) brightness(1.2); */
}
#question .qa p {
    padding: 1em 1em 1em 5em;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}
#question .qa p::before {
	font-family: 'Roboto Slab', serif;
	font-size: 2em;
	position: absolute;
	top: 0;
	left: 0.7em;
}

#question .qa .q {
	background: #847764;
	color: #fff;
}
#question .qa .q::before {
	content: "Q.";
}

#question .qa .a {
	color: #000;
	font-weight: 500;
}
#question .qa .a::before {
	content: "A.";
}
#question a {
	background: #307580;
	display: block;
	text-align: center;
	width: 13em;
	margin: auto;
	color: #fff;
	font-weight: bold;
}
#question a.link{
    width: 20em;
    margin-top: 0.8em;
    background: #f39800;
}



.widget_nav_menu h2 {
	font-size: 1em;
	text-align: left;
	margin: 0 0 0.5em;
	padding: 0;
}

.p-body .widget_nav_menu ul {
	margin-left: 0;
}

.p-body .widget_nav_menu ul li{
	text-align: left;
}


/* 通常cssはここまで */

@media screen and (min-width: 1900px){
	#top_image {
		background-size: 1900px;
		text-align: center;
		padding: 1316px 0 0;
		background-image: url(/images/lp_pic_b.jpg);
	}
	.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
	font-size: 1em;
}
    #top_image .logo {
    	font-size: 33px;
    	top: 2.7em;
    	margin: auto;
    	left: -49em;
    	right: 0;
}
}

@media screen and (min-width: 1500px) {


.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
	font-size: 1em;
}


	.cont {
		background-image: url(https://megane21-ok.jp/wp-content/uploads/h2_water_b.jpg);
	}

	#for_you{}
	#for_you > div{
    padding: 0 1em;
}
	#for_you > div::before{
    bottom: 0;
    left: 4em;
    height: 96%;
}
	#for_you p{}

	.sum_up .good {
		background-image: url(https://megane21-ok.jp/wp-content/uploads/kirakira_lblue_v_b.jpg);
	}
	#win .sum_up .good {
		padding: 4em 0;
		margin: 2em -3em 0;
		
	}
}/*1500px以上はここまで*/



#service ul.thoughts li {
    width: 10em;
    height: 10em;
    margin: 0 -0.7em -1.7em;
    line-height: 10em;
    font-size: 1.2em;
}
/* ↓991pxここから */
@media screen and (max-width: 991px) {

/*↓ハンバーガーメニュー系*/
	
.p-header__lower-inner {
    width: 100%;
    margin: auto;
	 min-height: 55px;
}
.p-header__logo {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 15em;
}
.l-header__fix--mobile .is-header-fixed .p-header__lower-inner .p-header__logo a {
    margin: 0.4em 0;
    height: 2.6em;
    line-height: 2.3em;
    font-size: 1.5em;
    display: block;
    width: 100%;
}



.p-menu-button {
    line-height: 3.3em ;
}
.p-drawer__contents {
    background-color: rgb(90 183 255 / 70%);
}
	.is-header-fixed .p-header__lower-inner .p-header__logo a{
		color:#fff !important ;
		text-shadow: 1px 1px 1px rgb(0, 105, 52) !important;
}
.p-body .p-header__lower-inner .p-global-nav__container ul li a {
    color: #182987 !important;
    text-shadow: none !important;
}
	.p-body .p-global-nav__container ul {
    margin: 0.8em ;
    border-top: 1px dotted #74ac3f;
}
.p-body .p-header__lower-inner .p-global-nav__container ul li {
    /* border-bottom: 1px dotted #74ac3f; */
    display: block;
    background: linear-gradient(90deg, rgba(255, 255, 175, 0.6), transparent, rgba(255, 255, 175, 0.6)), linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
    background: #fff;
    margin: 1em 0.2em;
    border-radius: 0.3em;
}
.p-global-nav__container ul li a {
    padding: 0.8em 0;
    display: block;
}
/*↑ハンバーガーメニュー系*/
	
	
.p-breadcrumb {
    border: unset;
    padding: 0;
}
	
#for_you > div::before{background-position: center;/* top: 0; */bottom: 0;/* margin: auto; */}
	.cont h2 > * {
    height: auto;
}
.cont h2 i {
    width: 2em;
}
.cont h2 b {
    font-size: 0.75em;
    padding: 0.2em 0 0em;
    background-size: 0.4em auto;
}
.cont h2 b::after {
    top: 0.3em;
}
.cont h2 i:nth-child(3) {
}
	
#about .tech p:nth-of-type(1){
	padding: 10em 3em;
}
	#about ol.example li {
    padding: 0 2em;
}
	#about ol.example li span {
    word-break: keep-all;
    
    padding: 1em;
    width: calc(100% - 9em);
}
	#about ol.example li span i{
		display:table-cell;
		vertical-align: middle;	
	}
	#about ol.example li {
    display: table;
    width: 100%;
    padding: 4em;
    padding-left: 2em;
}
	#about ol.example li span {
    word-break: keep-all;
    padding: 1em;
    width: calc(100% - 9em);
    display: table-cell;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    vertical-align: middle;
}
	#about ol.example li span i {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 1%;
}
	#about ol.example li::before {
    top: 2.8em;
    margin: auto;
    left: 0.6em;
}
	ol.needs li p {
    word-break: keep-all;
		font-size: 1.3em;
}
	#scope ul {
    width: 88.88%;
		text-align: center;
}
#scope ul li {
    font-size: 1.45vw;
}
#scope ul li span {
    top: 0.4em;
    font-size: 16px;
}
#scope .option li {
    margin-bottom: 1.5em;
}
#scope .option li span {
    width: 13em;
    padding: 0.4em 1em;
    font-size: 1.2em;
    top: -0.6em;
}
#scope .all .last i {
    font-size: 16px;
}
}
/* ↑991pxここまで */

/* ↓850pxここから */
@media screen and (max-width: 850px) {
#for_you > div {
    padding: 0 1em;
}
#for_you > div::before{
	width: 12em;
	background-position: center bottom;
}
#for_you p{
	padding-right: 2em;
	padding-left: 11em;
	word-break: unset;
	text-align: left;
}
#problem .checks li{
    word-break: keep-all;
    padding: 1em;
    padding-left: 3em;
}
	
ul.thoughts {
    padding: 2em 0 17em;
    margin: 0 auto;
    width: 80%;
}
ul.thoughts li {
    top: unset !important;
    margin: 0 -1em -1.5em 0 !important;
}
	#problem .checks p {
    width: auto;
}
#problem .checks p strong > i {
    word-break: keep-all;
    display: block;
}
	#problem .checks p strong .big {
    line-height: 1.4em;
    word-break: keep-all;
    padding: 0.4em 0;
}
	ol.needs li p {
    font-size: 1.3em;
}
	.good .staff {
    background-size: cover;
}
#service ul.thoughts {
    padding: 2em 0 5em;
}
#service ul.thoughts li {
    margin: 0 -0.7em -1.7em 0;
    width: 6em;
    height: 6em;
    line-height: 1em;
    font-size: 1.6em;
    word-break: keep-all;
    padding: 1.8em 0em;
    vertical-align: top;
}
#about .tech p:nth-of-type(2), #about .tech > div{
	width: calc(100% - 5rem);
}
#about .tech p:nth-of-type(2), #about .tech p:nth-of-type(3){
	word-break: keep-all;
}
#about .tech p:nth-of-type(2) br{
	display:none;
}
#about .tech > div span.fl_plus{
    font-size: 1.6vw;
}
#about .tech p:nth-of-type(3){
	padding: 0 2em;
}
	
}
/* ↑850pxここまで */

/* ↓770pxここから */
@media screen and (max-width: 770px) {
.l-main::before{
	content:"";
	background: #F39800;
	position: absolute;
	width: 100%;
	height: 3vw;
	left: 0;
	z-index: 1;
	top: 0;
}
.p-breadcrumb {
    top: 6vw;
    width: 100%;
    background:transparent;
}
.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
    color:#F39800;;
}
.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
    font-size: 1em;
}
#top_image .logo{
	left: unset;
	right: 0.5em;
	top: 2em;
	font-size: 3.8vw;
}
.t_cover {
    background: none;
}
#top_image {
    padding: 227vw 0em 0;
    background-image: url(/images/lp_pic_s.jpg);
    background-size: 100%;
    margin-bottom: -8vw;
    min-height: 720px;
}
#problem::before {
    /* top: 5em; */
    box-shadow: unset;
    width: 100%;
}
#problem .h2_c h2 {
    font-size: 5.8vw;
    margin: 0 0 0.3em;
}
#problem p:nth-child(1) {
    margin: -1em 0 2em;
}


	
ul.thoughts {
    padding: 2em 0 27em;
    margin: 0 auto;
    width: 90%;
    font-size: 1.8vw;
    background-size: 24em;
}

ul.thoughts li {
    margin: 0 -0.7em -1.7em 0;
    width: 6em;
    height: 6em;
    line-height: 1em;
    font-size: 2.2em;
    word-break: keep-all;
    padding: 1.8em 0.6em;
    vertical-align: top;
}
	ul.thoughts li i{
		display:none;
	}
	
#problem .h2_c {
    padding: 6.5em 2em 1em;
}
	
#problem .h2_c span {
}
#problem .h2_c h2 {
    font-size: 5.8vw;
}
#problem .checks {
    padding: 0;
}
.checks ul {
    padding: 3.5em 1.7em 0;
    margin-left: 0;
}
	.checks ul li {
    background-position: left 1.1em;
    padding: 1em 0 1em 1.9em;
    text-align: left;
    border-bottom: 1px dotted #666;
		width: 100%;
}
.checks ul li::before{
	position: absolute;
	top: 0.3em;
	left: 1em;
}
#problem .shop_pic {
    margin: 2em 0;
}	
	#problem .checks p {
	display:block;
	height: auto;
	padding: 0em 2em 4em;
	word-break: keep-all;
}
	#problem .checks p strong {
    display: block;
    padding: 0 1.5em;
}
	.cont h2 {
    width: 88%;
    padding: 2em;
    margin: 2.5em auto 1em!important;
}
.cont h2::before, .cont h2::after {
    content: "";
    display: block;
    width: calc(50% - 1.4em);
    height: 100%;
    position: absolute;
    top: -0.1em;
    border: 4px dotted #F39800;
}
.cont h2 b::before {
    content: none;
}
.cont h2::before {
    border-right: none;
    left: 0;
}
.cont h2::after {
    right: 0;
    border-left: none;
}
	
.cont h2 i {
    height: 1.4em;
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    margin: auto;
    background-position: center !important;
}
.cont h2 i:nth-child(1) {
    top: -1em;
}
.cont h2 i:nth-child(3) {
    bottom: -0.57em;
}
.cont h2 b {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: -0.9em;
    display: inline-block;
    background: none;
    height: 2em;
    font-size: 0.7em;
    padding: 0 1em;
}
.cont h2 b::after {
    top: 0em;
}
	#about > p {
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    word-break: keep-all;
}
#about .intro.w_mos{
	 word-break: keep-all;
	 padding: 0 2em 2em;
}
#about .intro.w_mos br{
	display:none;
}
	
#about::before{
	top: 7em;
	background: linear-gradient(-180deg, #fff, transparent 15vw, transparent 30vw, #decdb1 calc(100% - 30vw),  #fff), url(/images/newshop_in.jpg) no-repeat left top;
	background-size: contain;
	height: 73vw;
}
#about .map {
    width: auto;
    background-size: cover;
}
	#about div {
    display: inline-block;
    vertical-align: middle;
}
  #about .image {
    width: 60%;
    padding: 0em 0 0 2em;
}
	#about .image img {
    width: 100%;
    display: block;
}
	#about .icon {
    width: 30%;
    padding: 8em 0 2em;
}
	#about .icon i {
    display: block;
    width: 100%;
    height: 17em;
    margin: 3em 0 5.5em;
    font-size: 1.6vw;
}
	#about .icon i:after {
    right: 0 !important;
    left: 0;
    margin: auto;
    bottom: -4.8em !important;
    transform: rotate(90deg);
}
#service p:nth-of-type(1){
    word-break: keep-all;
}
	
	#service .image {
    width: 120%;
    margin-left: -10%;
    padding-top: 0 !important;
}
#service .image .logo img {
    width: 45%;
}
.joint {
    word-break: keep-all;
    padding: 0 2em;
    width: 53%;
}
#service .image .joint::after {
    z-index: -1;

	}
	
ol.needs li {
    display: block;
    width: auto;
    background-size: 100%;
	max-width: none;
    margin: 0 2em 2em;
}
ol.needs li img {
    margin: 7.5em auto 0.9em;
}
.good .staff > p::after {
    height: 18em;
}
.good .staff .big {
    word-break: keep-all;
    padding: 0 1em;
    line-height: 1.4em;
}
	
.good .joint {
    width: auto;
}
.kira .merit li {
		word-break: keep-all;
}
.kira .merit li br{
	display:none;
}
.complain {
    background-size: 46%;
    width: 88.8%;
    background-position: left bottom, right bottom;
    padding: 0 0 57%;
    margin-bottom: 0.5em;
    word-break: keep-all;
}
	.complain br{
		display:none;
	}
.with {
    width: 88.8%;
    margin: 0em auto;
    word-break: keep-all;
}
	
.veteran {
    height: 19em;
    margin: 12em auto 7em -10%;
    background: linear-gradient(164deg, rgb(153 238 177 / 80%), rgb(153 238 177 / 80%)), url(https://megane21-ok.jp/wp-content/uploads/architect.jpg) no-repeat center;
}

.veteran p {
    margin: auto;
    left: 0;
    right: 0;
    padding-right: 0;
    width: auto;
}
.veteran p::before {
    left: 0;
    top: 0em;
    right: 0;
    margin: auto;
}
.veteran p b {
    font-size: 1.9em;
    top: 0.4em;
    left: -0.4em;
}
.veteran p b span {
    display: block;
    line-height: 1.7em;
}
.veteran p::after {
    background: linear-gradient(0deg, rgb(153 238 177), transparent 40%), url(https://megane21-ok.jp/wp-content/uploads/veteran.gif) no-repeat center;
    background-size: contain;
    z-index: -1;
    left: 0;
    margin: auto;
    top: -20em;
}
#scope ul li {
    font-size: 2.16vw;
    left: 0.3vw;
}
#scope .all .last i {
    font-size: 13px;
}
#scope .induct {
    width: 88.8%;
    word-break: keep-all;
    margin: auto;
}
#scope .induct b {
    word-break: keep-all;
}
	
.page-id-68	.cont > p{
	 width: 88.8%;
	 margin:auto;
}
#price p{
		word-break:keep-all;
	}
#price .mx_c > p{
	padding: 0 2em 0;
}
#price ul{
    padding: 4em 2em;
}
#price ul > li:nth-child(odd){
    padding-left: 0;
}
#price ul > li:nth-child(even){
    padding-right: 0;
}
	
#price ul > li > p{
	word-break: break-all;
	text-align: left;
}	
	#flow ol li {
    /* word-break: keep-all; */
}
}
/* ↑770pxここまで */

/* ↑660pxここまで */
@media screen and (max-width: 660px) {
	#flow ol{
		padding: 0 2em;
}
	#flow ol > li > div{
    padding: 13em 0 0;
}
	#flow ol > li > div::before{
    width: 100%;
    top: 0;
    right: 0;
    background-position: center;
}
	
}
/* ↑660pxここまで */
	
	
/* ↓500pxここから */
@media screen and (max-width: 500px) {

.p-header__logo {
    width: 10em;
}
.l-header__fix--mobile .is-header-fixed .p-header__lower-inner .p-header__logo a {
    margin: 0.3em 0;
    height: 1.8em;
}
.p-menu-button {
    line-height: 2.2em;
}
.js-landlink .link li a {
    height: 2.7em;
    line-height: 2.7em;
    font-size: 0.9em;
    letter-spacing: -0.05em;
    font-family: "丸フォーク M";
}

	
.l-main .p-breadcrumb__inner.l-inner, .p-breadcrumb__item + .p-breadcrumb__item::before, .p-breadcrumb__item + .p-breadcrumb__item > * {
    font-size: 0.85em;
}

.p-breadcrumb {
    top: 0.5em;
}

#for_you {
    padding: 0 1em 4em;
}
#for_you > div::before{
    top: 0;
    background-position: top;
    width: 7.4em;
    height: 11em;
    min-width: unset;
    min-height: unset;
}
#for_you h2{
    font-size: 6vw;
    margin-left: 4rem;
}
#for_you p{
	padding: 2em 2em 2em 4em;
}
.checks ul li {
    font-size: 1.1em;
    line-height: 1.5em;
}
	
#problem .h2_c {
    padding: 6.5em 1em 1em;
}

#problem .h2_c span {
    font-size: 1.1em;
    margin: 0 0 0.8em;
}
#problem .checks li{
    word-break: unset;
}
	
#problem .checks p strong {
    padding: 0 0.8em;
}
#problem .checks p strong > i {
    word-break: keep-all;
    display: block;
}
#problem .checks p strong .big {
    font-size: 1.5em;
}
#problem .checks p strong .big i{
		display:none;
}

#problem .checks p::before {
    background-size: 115%;
    background-position: center bottom;
}
#problem .shop_pic {
    font-size: 2.3vw;
}
.cont h2 {
    width: 100%;
    border-left: none;
    border-right: none;
    background: url(/images/back_l1-1.jpg) #ffffff;
    background-blend-mode: luminosity;
    filter: brightness(1.05);
}

.cont h2 b {
    font-size: 0.6em;
    color: #795520;
}
.cont h2::before, .cont h2::after {
    border-left: none;
    border-right: none;
	height: 98.5%;
    top: -0.05em;
}
#about h2 b, #service h2 b{
    padding: 0;
}
#about h2 b em{font-size: 7.8vw;}
#about::before {
    top: 13em;
    background: linear-gradient(-180deg, transparent, transparent 15vw, transparent 30vw, #decdb1 calc(100% - 30vw),  #fff), url(/images/newshop_in.jpg) no-repeat left top;
    background-size: contain;
    background-blend-mode: screen;
    background-color: #cfa459;
}
#about .map {
    background-size: 110%;
}
#about .image {
    padding: 0em 0 2em 2em;
}
#about .icon {
    padding: 4em 0 0em;
}
#about .image img {
    padding: 0.4em;
}
	.big {
    font-size: 1.6em;
}
#about ol.example li {
    padding: 2em 1.2em 10em;
}
#about ol.example li::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8em;
}
#about ol.example li span {
    width: 100%;
}
#about ol.example li span::before {
    left: 0;
    right: 0;
    margin: auto;
    top: unset;
    bottom: -2em;
    transform: rotate(-90deg);
}
#about ol.example li span {
    padding: 0.3em;
}

#about ol.example li span i {
    /* font-size: 0.8em; */
    font-size: 4.8vw;
}
#about ol.example li span::before {
    left: 0;
    right: 0;
    margin: auto;
    top: unset;
    bottom: -2em;
    transform: rotate(-90deg);
}	
#about .logo .big {
    word-break: keep-all;
    line-height: 1.2em;
    padding: 0 0 0.5em;
}
#about .tech > div{
    flex-wrap: wrap;
}
#about .tech p:nth-of-type(2), #about .tech > div {
    width: calc(100% - 3rem);
}
#about .tech p:nth-of-type(1){
	font-size: 3.5vw;
	padding: 8em 2em;
}
#about .tech p:nth-of-type(2){
    padding: 1.5em 1em;
    font-size: 1.1em;
}
#about .tech > div b{
	width: 100%;
}
#about .tech > div span.fl_plus{
	margin: 1em auto;
}
	
#service > p:nth-of-type(1) {
    word-break: unset;
    text-align: left;
}
.kira .merit p br{
	display:none;
}
#service .image {
    background-size: 70%;
    background-position: -3em, right;
    padding: 10em 0 5.3em;
}
.joint {
    width: 70%;
    position: absolute;
    top: 2em;
    right: 0;
    left: 0;
}
#service .image .logo {
    width: 35%;
    position: relative;
}
#service .image .logo img {
    width: 100%;
}
#service .image .flame {
    width: 100%;
    bottom: 0em;
}


ol.needs li img {
    margin: 5.5em auto 0.9em;
}
#service ul.thoughts {
    padding: 1em 0 8em;
    left: -1em;
}
#service ul.thoughts li {
    font-size: 2.2em;
}
.good .staff > p::after {
    font-size: 3vw;
}
.good .joint {
    position: relative;
    margin: 0em 0 3em;
}
	.good .joint b {
    font-size: 9vw;
}
.kira .merit {
    padding: 1em 2em;
    margin-left: unset;
}
.kira .merit li {
    line-height: 1.5em;
}
.kira .merit li p{margin: 1.6em 0 0;}
	
#service .kira .merit p {
    font-size: 0.8em;
    word-break: break-word;
    text-align: left;
}
.kira .merit p br{
	display:inline;
}
.kira .merit li p::after{text-align: center;}
.complain {

    font-size: 1.4em;
}
.with {
    padding: 2.4em 0 52vw;
    background-size: 87vw, 8em;
}
.veteran p::after {
    height: 24em;
}
h3.point {
    width: 88.8%;
    display: flex;
	font-size: 5.7vw;
}
	h3.point::before, h3.point::after {
    min-width: 1.7em;
}
	h3.point span {
    word-break: keep-all;
}
	#scope ul li::before {
    width: 17.4em;
    height: 17.4em;
}
	#scope ul li span {
    font-size: 12px;
}
	#scope .option li {
    font-size: 4.35vw;
}
	ul.reason {
    padding: 2em 0 0;
}
	ul.reason li {
    width: 100%;
    height: 24em;
    background-size: 27em;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 2.3em 0em;
}
	#flow ol li p {
    margin-bottom: 0;
}
	#flow .reserve {
    padding: 2em 3em;
    line-height: 1.7em;
    font-size: 4.1vw;
}
#price ul {
    padding: 0 2em 4em;
}
#price ul > li{
    flex: 1 0 100%;
    border-right: none;
    padding: 2em 0;
    margin:  0 0;
}
#price ul > li::before{
    height: 100vw;
}
#price ul > li:nth-last-of-type(-n+2) {
    border-bottom: 1px solid #dfc1ac;
}
#price ul > li:last-of-type{
	border-bottom:none;
}
#price ul > li > p{
	padding: 0 0 3em;
}

#price ul > li > em{position: relative;
}
#question .qa {
    width: calc(100% - 4em);
}
#question a.link{
	width:auto;
}
	
}
/* ↑500pxここまで */