@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; clear: both; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: #0088c8; text-decoration: underline; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

th { font-weight: normal; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select, textarea, img { vertical-align: middle; }

ul, dl, ol { list-style: none; }

figcaption { font-size: small; }

*:focus { outline: none; }

.fs70 { font-size: 70%; }

.fs80 { font-size: 80%; }

.fs90 { font-size: 90%; }

.fs100 { font-size: 100%; }

.fs110 { font-size: 110%; }

.fs120 { font-size: 120%; }

.fs130 { font-size: 130%; }

.fs140 { font-size: 140%; }

.fs150 { font-size: 150%; }

.fs160 { font-size: 160%; }

.fs170 { font-size: 170%; }

.fs180 { font-size: 180%; }

.fs190 { font-size: 190%; }

.fs200 { font-size: 200%; }

.fs300 { font-size: 300%; }

.fs400 { font-size: 400%; }

.b { font-weight: 700; }

.u { text-decoration: underline; }

.del { text-decoration: line-through; }

.red { color: #d7535e !important; }

.blue { color: #2c3b5b !important; }

.green { color: #6ab39a !important; }

.orange { color: #e17514 !important; }

.gray { color: #f2f2f2 !important; }

.bold { font-weight: bold !important; }

.center { text-align: center !important; }

.right { text-align: right !important; }

.left { text-align: left !important; }

.floatR { float: right; margin: 0 0 1em 1em; }

.floatL { float: left; margin: 0 1em 1em 0; }

.clear { clear: both; }

a img.fade { background: none !important; outline: none; -webkit-transition: all .3s; transition: all .3s; }

a:hover img.fade { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; background: none !important; }

.att { padding-left: 1em; text-indent: -1em; }

.att_box { margin: 2em 0 2.5em; padding: 1em 1.2em; line-height: 2.0; border: 1px dotted #cccccc; background: #fcfcfc; box-shadow: 0px 4px 0px 0px #f7f7f7; }

/* テキストボックス */
.mb0em { margin-bottom: 0em !important; }

.mb05em { margin-bottom: .5em !important; }

.mb1em { margin-bottom: 1em !important; }

.mb2em { margin-bottom: 2em !important; }

.mb3em { margin-bottom: 3em !important; }

.mb4em { margin-bottom: 4em !important; }

.mb5em { margin-bottom: 5em !important; }

.pt0em { padding-top: 0em !important; }

.pt1em { padding-top: 1em !important; }

.pt2em { padding-top: 2em !important; }

.pt3em { padding-top: 3em !important; }

.pt4em { padding-top: 4em !important; }

.pt5em { padding-top: 5em !important; }

.p3vw { padding: 3vw 0 !important; }

.m0 { margin: 0 !important; }

.mt0 { margin-top: 0 !important; }

.mr0 { margin-right: 0 !important; }

.mb0 { margin-bottom: 0 !important; }

.ml0 { margin-left: 0 !important; }

.m5 { margin: 5px !important; }

.mt5 { margin-top: 5px !important; }

.mr5 { margin-right: 5px !important; }

.mb5 { margin-bottom: 5px !important; }

.ml5 { margin-left: 5px !important; }

.m10 { margin: 10px !important; }

.mt10 { margin-top: 10px !important; }

.mr10 { margin-right: 10px !important; }

.mb10 { margin-bottom: 10px !important; }

.ml10 { margin-left: 10px !important; }

.m15 { margin: 15px !important; }

.mt15 { margin-top: 15px !important; }

.mr15 { margin-right: 15px !important; }

.mb15 { margin-bottom: 15px !important; }

.ml15 { margin-left: 15px !important; }

.m20 { margin: 20px !important; }

.mt20 { margin-top: 20px !important; }

.mr20 { margin-right: 20px !important; }

.mb20 { margin-bottom: 20px !important; }

.ml20 { margin-left: 20px !important; }

.m25 { margin: 25px !important; }

.mt25 { margin-top: 25px !important; }

.mr25 { margin-right: 25px !important; }

.mb25 { margin-bottom: 25px !important; }

.ml25 { margin-left: 25px !important; }

.m30 { margin: 30px !important; }

.mt30 { margin-top: 30px !important; }

.mr30 { margin-right: 30px !important; }

.mb30 { margin-bottom: 30px !important; }

.ml30 { margin-left: 30px !important; }

.m35 { margin: 35px !important; }

.mt35 { margin-top: 35px !important; }

.mr35 { margin-right: 35px !important; }

.mb35 { margin-bottom: 35px !important; }

.ml35 { margin-left: 35px !important; }

.m40 { margin: 40px !important; }

.mt40 { margin-top: 40px !important; }

.mr40 { margin-right: 40px !important; }

.mb40 { margin-bottom: 40px !important; }

.ml40 { margin-left: 40px !important; }

.m45 { margin: 45px !important; }

.mt45 { margin-top: 45px !important; }

.mr45 { margin-right: 45px !important; }

.mb45 { margin-bottom: 45px !important; }

.ml45 { margin-left: 45px !important; }

.m50 { margin: 50px !important; }

.mt50 { margin-top: 50px !important; }

.mr50 { margin-right: 50px !important; }

.mb50 { margin-bottom: 50px !important; }

.ml50 { margin-left: 50px !important; }

.m55 { margin: 55px !important; }

.mt55 { margin-top: 55px !important; }

.mr55 { margin-right: 55px !important; }

.mb55 { margin-bottom: 55px !important; }

.m60 { margin: 60px !important; }

.mt60 { margin-top: 60px !important; }

.mr60 { margin-right: 60px !important; }

.mb60 { margin-bottom: 60px !important; }

.ml60 { margin-left: 60px !important; }

.m65 { margin: 65px !important; }

.mt65 { margin-top: 65px !important; }

.mr65 { margin-right: 65px !important; }

.mb65 { margin-bottom: 65px !important; }

.ml65 { margin-left: 65px !important; }

.m70 { margin: 70px !important; }

.mr70 { margin-right: 70px !important; }

.mb70 { margin-bottom: 70px !important; }

.ml70 { margin-left: 70px !important; }

.m75 { margin: 75px !important; }

.mt75 { margin-top: 75px !important; }

.mr75 { margin-right: 75px !important; }

.mb75 { margin-bottom: 75px !important; }

.ml75 { margin-left: 75px !important; }

.m80 { margin: 80px !important; }

.mt80 { margin-top: 80px !important; }

.mr80 { margin-right: 80px !important; }

.mb80 { margin-bottom: 80px !important; }

.ml80 { margin-left: 80px !important; }

.p0 { padding: 0 !important; }

.pt0 { padding-top: 0 !important; }

.pr0 { padding-right: 0 !important; }

.pb0 { padding-bottom: 0 !important; }

.pl0 { padding-left: 0 !important; }

.p5 { padding: 5px !important; }

.pt5 { padding-top: 5px !important; }

.pr5 { padding-right: 5px !important; }

.pb5 { padding-bottom: 5px !important; }

.pl5 { padding-left: 5px !important; }

.p10 { padding: 10px !important; }

.pt10 { padding-top: 10px !important; }

.pr10 { padding-right: 10px !important; }

.pb10 { padding-bottom: 10px !important; }

.pl10 { padding-left: 10px !important; }

.w70 { width: 70px !important; }

.w290 { width: 290px !important; }

.w440 { width: 100%; max-width: 440px !important; }

.w682 { width: 100%; max-width: 682px !important; }

.w710 { width: 720px !important; }

.w50p { width: 50% !important; }

.w60p { width: 60% !important; }

.w70p { width: 70% !important; }

.w80p { width: 80% !important; }

.w90p { width: 90% !important; }

.w100p { width: 100% !important; }

.fsS { font-size: small; }

.fsL { font-size: large; }

/* =====================
 ブレイクポイント用

===================== */
body, html { color: #333 !important; letter-spacing: 0.03em; }
@media screen and (max-width: 575px) { body, html { overflow-x: hidden; } }

@media screen and (max-width: 767px) { .hide-sm { display: none !important; } }

.show-sm { display: none !important; }
@media screen and (max-width: 767px) { .show-sm { display: block !important; } }

@media screen and (max-width: 575px) { .hide-xs { display: none !important; } }

.show-xs { display: none !important; }
@media screen and (max-width: 575px) { .show-xs { display: block !important; } }

section { padding-top: 60px; padding-bottom: 80px; padding-right: 20px; padding-left: 20px; }
@media screen and (max-width: 767px) { section { padding-top: 48px; padding-bottom: 60px; } }

.section-inner { max-width: 1080px; width: 100%; margin: 0 auto; }

.section-full { padding-right: 0; padding-left: 0; }

.mb56 { margin-bottom: 56px; }
@media screen and (max-width: 767px) { .mb56 { margin-bottom: 32px; } }

.mb80 { margin-bottom: 80px; }

.mb0 { margin-bottom: 0 !important; }

p { font-size: 1.6rem; }

.text-center { text-align: center; }

.text-color-primary { color: #EE9F8D !important; }

.text-color-black { color: #333 !important; }

.text-color-white { color: #fff !important; }

figure { margin: 0; }

img { width: 100%; vertical-align: bottom; }

.section-full { padding-right: 0; padding-left: 0; }

.underline::after { content: ''; display: block; width: 56px; height: 3px; background-color: #EE9F8D; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

.relative { position: relative; }

/* =====================  コンバージョンボタン

===================== */
.btn__wrapper { text-align: right; }

.btn { position: relative; display: inline-block; padding: 14px 46px 12px 34px; font-size: 1.6rem; line-height: 1.3; font-weight: 700; border-radius: 30px; vertical-align: middle; text-align: center; transition: all 0.5s linear; color: #EE9F8D; border: solid 2px #EE9F8D; background-color: #fff; }
@media screen and (max-width: 767px) { .btn { font-size: 1.4rem; padding: 12px 32px 9px 26px; } }
.btn:hover { background-color: #EE9F8D; color: #fff; transition: all 0.5s linear; }
.btn:hover:after { right: 8.5%; }
.btn.primary-btn { background-color: #EE9F8D; color: #fff; }
.btn.primary-btn:hover { background-color: #fff; color: #EE9F8D; }

/* 大きいボタンのとき */
.cta__wrapper { position: relative; transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .cta__wrapper { width: fit-content !important; margin: 0 auto; } }
.cta__wrapper:before { content: ""; display: block; width: 100%; height: 100%; background-color: #F29985; border-radius: 6px; position: absolute; top: 8px; left: 8px; z-index: -1; transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .cta__wrapper:before { top: 6px; left: 6px; } }
.cta__wrapper:hover:before { content: ""; top: 0; left: 0; background: linear-gradient(246.45deg, #FDCAA6 24.4%, #FAAF9F 74.52%); transition: all 0.5s linear; border-radius: 6px; }

.large-btn { font-weight: 700; font-size: 2rem; width: 100%; border-radius: 6px; border: solid 1px #333; padding: 24px 72px; padding: 24px 50px; background-color: transparent; color: #fff; position: relative; transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .large-btn { padding: 24px 78px; } }
.large-btn:hover { transition: all 0.5s linear; background-color: transparent; }
.large-btn:hover:after { right: 0; transform: translate(0%, -50%); transition: all 0.5s linear; }
.large-btn::after { content: ''; display: block; position: absolute; top: 50%; right: 0px; transform: translate(30%, -50%); max-width: 130px; width: 20%; height: 7px; background-image: url("../img/pict-arrow.svg"); background-position: right; background-size: cover; background-repeat: no-repeat; z-index: 5; transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .large-btn::after { background-image: url("../img/pict-arrow-sp.svg"); transform: translate(35%, -50%); } }
@media screen and (min-width: 1600px) { .large-btn { font-size: 28px; } }

.btn.arrow-btn:after { content: ''; display: inline-block; position: absolute; top: 0; right: 14%; bottom: 0; width: 10px; height: 10px; margin: auto; border-top: 3px solid; border-right: 3px solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.5s linear; border-color: #EE9F8D; }
@media screen and (max-width: 767px) { .btn.arrow-btn:after { border-top: 2px solid; border-right: 2px solid; width: 8px; height: 8px; } }
.btn.arrow-btn:hover:after { right: 12%; border-color: #fff; transition: all 0.5s linear; }

.btn.arrow-btn-left:after { content: ''; display: inline-block; position: absolute; top: 0; left: 14%; bottom: 0; width: 10px; height: 10px; margin: auto; border-top: 3px solid; border-right: 3px solid; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); transition: all 0.5s linear; border-color: #EE9F8D; }
.btn.arrow-btn-left:hover:after { left: 12%; right: auto; border-color: #fff; }

.primary-btn.arrow-btn:after { content: ''; display: inline-block; position: absolute; top: 0; right: 14%; bottom: 0; width: 10px; height: 10px; margin: auto; border-top: 3px solid; border-right: 3px solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .primary-btn.arrow-btn:after { border-top: 2px solid; border-right: 2px solid; width: 8px; height: 8px; } }
.primary-btn.arrow-btn:hover { transition: all 0.5s linear; }
.primary-btn.arrow-btn:hover:after { right: 12%; border-color: #EE9F8D; }

/* 矢印付きボタン */
.large-btn.arrow-btn:after { right: 6%; width: 12px; height: 12px; border-top-width: 3px; border-right-width: 3px; transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .large-btn.arrow-btn:after { right: 8.5%; } }
.large-btn.arrow-btn:hover:after { right: 5.5%; }
@media screen and (max-width: 767px) { .large-btn.arrow-btn:hover:after { right: 8%; } }

/* 小さいボタン */
.btn small { display: block; margin-bottom: .1rem; letter-spacing: .05rem; font-size: 12px; text-align: center; font-weight: 500; }
@media screen and (max-width: 575px) { .btn small { margin-bottom: 0; } }

/* =====================  背景画像

===================== */
.bg-image { background-position: center; background-size: cover; background-repeat: no-repeat; }

/* =====================  文字の装飾

===================== */
.primary-color { color: #EE9F8D; }

.zabuton { display: inline-block; padding: .3em .8em .1em; background-color: #EE9F8D; color: #fff; }
@media screen and (max-width: 767px) { .zabuton { padding: .3em .6em .1em; } }

br + span.zabuton { margin-top: .4em; }

.bg__dot { display: inline-block; position: relative; z-index: 0; }
.bg__dot::before { content: ""; position: absolute; display: block; border-radius: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 40px; background: rgba(233, 137, 115, 0.4); opacity: 0.6; z-index: -1; }
@media screen and (max-width: 767px) { .bg__dot::before { width: 32px; height: 32px; } }
.bg__dot.bg__dot__white::before { content: ""; background: white; opacity: 1; top: 0; bottom: auto; left: auto; transform: translate(-50%, -20%); }

.flex { display: flex; justify-content: space-between; gap: 20px; }
@media screen and (max-width: 767px) { .flex { flex-wrap: wrap; gap: 16px; } }

.w1-4 { width: calc(100% / 4); background-color: #fff; }
@media screen and (max-width: 767px) { .w1-4 { width: calc((100% - 16px) / 2); } }
.w1-4 a { display: block; width: 100%; height: 100%; transition: all 0.5s linear; }
.w1-4 a:hover { opacity: 0.8; transition: all 0.5s linear; }
.w1-4 .text { padding: 10px; }
@media screen and (max-width: 767px) { .w1-4 .text { font-size: 1.4rem; } }
@media screen and (max-width: 575px) { .w1-4 .text { font-size: 1.2rem; } }

.breadcrumbs { margin-top: 80px; background-color: #FAFAFA; padding-top: 16px; padding-bottom: 16px; overflow-x: scroll; -webkit-overflow-scrolling: touch; word-break: keep-all; white-space: nowrap; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; }
.breadcrumbs::-webkit-scrollbar { /* Chrome, Safari 対応 */ display: none; }
@media screen and (max-width: 1024px) { .breadcrumbs { margin-top: 67px; padding: 12px 16px; } }
.breadcrumbs ol { display: flex; padding-right: 4%; padding-left: 4%; margin: 0 auto; }
@media screen and (min-width: 1300px) { .breadcrumbs ol { padding-right: 0; padding-left: 0; max-width: 1080px; } }
@media screen and (max-width: 767px) { .breadcrumbs ol { padding-right: 0; padding-left: 0; } }
@media screen and (max-width: 575px) { .breadcrumbs ol { width: 100%; } }
.breadcrumbs li { margin-right: 1.5em; }
.breadcrumbs li > span { color: #121212; font-weight: 700; line-height: 1.5; }
@media screen and (max-width: 767px) { .breadcrumbs li > span { font-size: 1.2rem; } }
.breadcrumbs a { padding: 0.125em 0.25em; display: block; text-decoration: underline; position: relative; }
@media screen and (max-width: 767px) { .breadcrumbs a { font-size: 1.2rem; } }
.breadcrumbs a::after { content: ''; display: inline-block; position: absolute; top: 50%; right: -10px; bottom: 0; width: 10px; height: 10px; margin: auto; border-top: 1px solid #333; border-right: 1px solid #333; transform: translate(0, -75%) rotate(45deg); transition: all 0.5s linear; }
@media screen and (max-width: 767px) { .breadcrumbs a::after { width: 8px; height: 8px; transform: translate(150%, -60%) rotate(45deg); right: 0; } }

.pager .pagination { text-align: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; }
.pager .pagination > div { display: inline-block; margin: 0 2px; padding: 0; display: inline-block; background: #fff; width: 55px; height: 55px; text-align: center; position: relative; }
@media screen and (max-width: 767px) { .pager .pagination > div { width: 45px; height: 45px; font-size: 1.4rem; } }
.pager .pagination > div.pre, .pager .pagination > div.next { width: 100px; }
@media screen and (max-width: 767px) { .pager .pagination > div.pre, .pager .pagination > div.next { width: 65px; } }
.pager a { vertical-align: middle; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: table; text-decoration: none; border: solid 2px #999999; }
.pager a:hover, .pager a.active { color: #fff; background-color: #F29985; border-color: #F29985; }
.pager a span { display: table-cell; vertical-align: middle; }
.pager .dots { color: #333333; margin-right: 0.5em; margin-left: 0.5rem; }

@media screen and (max-width: 767px) { .bottom__page__header { padding-bottom: 0; padding-top: 24px; } }
.bottom__page__header.p40 { padding-top: 40px; padding-bottom: 40px; }
@media screen and (max-width: 767px) { .bottom__page__header.p40 { padding-bottom: 0; padding-top: 24px; } }
.bottom__page__header.p80 { padding-top: 80px; }
@media screen and (max-width: 767px) { .bottom__page__header.p80 { padding-top: 32px; } }
.bottom__page__header .section-inner { position: relative; }
.bottom__page__header .section__header { text-align: center; }
.bottom__page__header .section__header .zabuton { background-color: #FFF3EA; padding: 10px 24px 8px; margin-bottom: 24px; }
@media screen and (max-width: 767px) { .bottom__page__header .section__header .zabuton { margin-bottom: 8px; } }
.bottom__page__header .section__header .zabuton .small__text { font-size: 84%; padding-left: 8px; display: inline-block; }
.bottom__page__header .section__header .result { font-weight: 700; font-size: 2rem; }
@media screen and (max-width: 767px) { .bottom__page__header .section__header .result { font-size: 1.8rem; } }
.bottom__page__header .section__header .result .result__num { margin-left: 8px; }

canvas { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 1; }

li.new a { position: relative; }
li.new a::after { content: ''; display: block; position: absolute; top: 8px; left: 0px; width: 40px; height: 20px; background-image: url("/img/icon__new.svg"); background-position: center left; background-size: contain; background-repeat: no-repeat; }

#sns h2 { max-width: 1080px; width: 100%; text-align: center; display: inline-block; margin: 0 auto; padding-bottom: 24px; margin-bottom: 56px; }
#sns h2 .bg__dot { display: inline-block; position: relative; z-index: 5; }
#sns .section-inner { display: flex; justify-content: center; padding-top: 0; padding-bottom: 0; }
#sns .section-inner iframe { max-width: 100% !important; border: solid #B9B9B9 1px !important; border-radius: 10px; }
@media screen and (max-width: 767px) { #sns .section-inner iframe { max-width: 100% !important; } }
#sns .section-inner img { max-width: 95% !important; margin: 1%; }
@media screen and (max-width: 767px) { #sns .section-inner img { max-width: 95% !important; margin: 5%; } }
#sns .section-inner-instagram { margin-bottom: 20px; }
@media screen and (max-width: 767px) { #sns .section-inner-instagram { flex-wrap: wrap; } }
#sns .section-inner-twitter-2 { width: 50%; }
@media screen and (max-width: 767px) { #sns .section-inner-twitter-2 { width: 100%; } }
#sns .section-inner-instagram-2 { margin-bottom: 20px; display: flex; flex-wrap: wrap; }
#sns .section-inner-instagram-2 a { width: 33%; }
@media screen and (max-width: 767px) { #sns .section-inner-instagram-2 { flex-wrap: wrap; } }

input[type="text"] { outline: none; border: solid 2px #E3E3E3; }
input[type="text"]:focus { border-color: #EE9F8D; outline: 0; }

@font-face { font-family: "noto-sans-jp"; font-style: normal; font-weight: 400; src: url("../fonts/NotoSansRegular.ttf") format("opentype"), url("../fonts/NotoSansRegular.woff") format("woff"), url("../fonts/NotoSansRegular.woff2") format("woff2"); }
@font-face { font-family: "noto-sans-jp"; font-style: bold; font-weight: 700; src: url("../fonts/NotoSansBold.ttf") format("opentype"), url("../fonts/NotoSansBold.woff") format("woff"), url("../fonts/NotoSansBold.woff2") format("woff2"); }
@font-face { font-family: "outfit"; font-style: normal; font-weight: 400; src: url("../fonts/Outfit-Regular.ttf") format("opentype"); }
.outfit { font-family: 'outfit', "noto-sans-jp"; }

/* 共通設定
----------------------------- */
body, html { font-size: 62.5%; }

body { width: 100%; height: 100%; margin: 0; line-height: 1.25; letter-spacing: 0.025em; font-family: 'noto-sans-jp', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", Meryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; font-weight: 500; font-size: 62.5%; }

img { width: auto; max-width: 100%; height: auto; }

sup { font-size: 60%; display: inline-block; vertical-align: top; }

.spi, .spb, .spt { display: none; }

.pci { display: inline; }

.pcb { display: block; }

.pct { display: table; }

@media screen and (max-width: 991px) { .pci, .pcb, .pct { display: none; }
  .spi { display: inline; }
  .spb { display: block; }
  .spt { display: table; } }
a { color: #0088c8; text-decoration: none; }
a.btn, a.btn::after { color: #fff; }

a.line { text-decoration: underline; }

a:hover { opacity: .7; }

a[href^="tel:"] { text-decoration: none; color: #333; }

strong { color: #34a174; }

blockquote { margin-left: 1.3em; }

section { line-height: 1.78; }

.btn a { background: #b3d299; font-size: 16px; padding: 10px 30px; display: table; margin: 16px auto 0; transition: 1s; color: #fff; }
.btn a::after { content: "\f105"; font-family: "FontAwesome"; color: #fff; margin-right: 0; font-weight: 900; margin-left: 1em; }
.btn a:hover { background: #069a46; opacity: 1; transform: scale(1.2); }

#header { width: 100%; background: white; padding: 12px 40px; z-index: 101; position: fixed; top: 0; left: 0; transition: .3s; transform: translateY(0); color: #EE9F8D; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.12); font-family: "Amiko", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", Meryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif !important; }
@media screen and (max-width: 1024px) { #header { padding: 6px 16px; background: white; } }
#header.is-hide { transform: translateY(-100%); }
#header .header__inner { display: flex; align-items: center; }
#header .header__inner .header__logo { display: flex; justify-content: space-between; }
#header .header__inner .header__logo img { max-width: 140px; margin-right: 16px; }
@media screen and (max-width: 575px) { #header .header__inner .header__logo img { max-width: 120px; } }
#header .header__inner .header__logo .logo__text { color: #333333; font-size: 1.6rem; padding: 18px 24px 15px; background-color: #FFE1D2; border-radius: 30px; display: inline-block; position: relative; }
#header .header__inner .header__logo .logo__text::after { content: ""; position: absolute; top: 50%; left: 0; border: 10px solid transparent; border-right: 18px solid #FFE1D2; transform: translate(-85%, -50%); }
#header .header__inner nav.header__nav { display: flex; margin-left: auto; }
#header .header__inner nav.header__nav ul.header__nav-list { display: flex; }
@media screen and (max-width: 1024px) { #header .header__inner nav.header__nav ul.header__nav-list { display: none; } }
#header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item { display: flex; justify-content: center; align-items: center; }
#header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item + .header__nav-item { margin-left: 20px; }
@media screen and (max-width: 1150px) { #header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item + .header__nav-item { margin-left: 24px; } }
#header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item a { color: #333333; font-weight: 700; transition: .2s; font-size: 1.6rem; }
@media screen and (max-width: 1150px) { #header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item a { font-size: 14px; } }
#header .header__inner nav.header__nav ul.header__nav-list li.header__nav-item a:hover { color: #EE9F8D; }
#header .header__inner .cta__wrapper { max-width: 200px; margin-left: 20px; width: fit-content; }
@media screen and (max-width: 767px) { #header .header__inner .cta__wrapper { margin-left: 0; margin-right: 0; } }
#header .header__inner .cta__wrapper:hover:before { top: 0; left: 0; }
#header .header__inner .cta__wrapper::before { top: 5px; left: 5px; }
@media screen and (max-width: 767px) { #header .header__inner .cta__wrapper::before { top: 3px; left: 3px; } }
#header .header__inner .cta__wrapper a { font-size: 1.6rem; padding: 1rem 34px 1rem 30px; }
@media screen and (max-width: 767px) { #header .header__inner .cta__wrapper a { font-size: 1.2rem; padding: 1rem 2rem; } }
#header .header__inner .cta__wrapper a:hover::after { transform: translate(15%, -50%); }
#header .header__inner .cta__wrapper a::after { transform: translate(40%, -50%); width: 37px; height: 7px; }
@media screen and (max-width: 1024px) { #header .header__inner .cta__wrapper a::after { display: none; } }
#header .drawer-list { display: none; }
@media screen and (max-width: 1024px) { #header .drawer-list { display: block; position: absolute; right: 0; top: -24px; height: calc(100vh + 32px); width: 100vw; margin: calc(50% - 50vw); transform: translate(100vw, 0); box-sizing: border-box; pointer-events: none; padding-top: 125px; transition: width 475ms ease-out, transform 450ms ease, border-radius .8s .1s ease; border-bottom-left-radius: 100vw; background: #fff; } }
#header .drawer-list > ul { display: none; }
@media screen and (max-width: 1024px) { #header .drawer-list > ul { display: block; height: 100%; width: 70%; padding: 0; pointer-events: auto; margin: 0 auto; } }
#header .drawer-list > ul > li { max-width: 80%; margin: 0 auto; pointer-events: auto; white-space: nowrap; transform: translateX(100vw); text-align: center; }
@media screen and (max-width: 1024px) { #header .drawer-list > ul > li { max-width: 100%; } }
#header .drawer-list > ul > li + li { margin: 12px auto 0; }
#header .drawer-list > ul > li > a { text-decoration: none; color: #333333; display: block; padding: .7em 1em; font-size: calc(24px - .5vw); font-weight: 700; }
@media screen and (max-width: 1024px) { #header .drawer-list > ul > li > a { padding: .5rem; font-weight: 500; text-align: center; } }
@media screen and (max-width: 575px) { #header .drawer-list > ul > li > a { text-align: left; } }
#header .drawer-list > ul > li > a:hover { cursor: pointer; opacity: 0.8; }
#header .drawer-list > ul > li .header__btn { background-color: #EE9F8D; color: white; padding: 20px 40px; border-radius: 6px; font-weight: 700; }
#header .drawer-list > ul > li .header__btn:after { content: ''; display: inline-block; position: absolute; top: 0; right: 14%; bottom: 0; width: 10px; height: 10px; margin: auto; border-top: 3px solid; border-right: 3px solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.5s linear; border-color: #fff; }
@media screen and (max-width: 767px) { #header .drawer-list > ul > li .header__btn:after { border-top: 3px solid; border-right: 3px solid; width: 10px; height: 10px; } }
#header input.hamburger { display: none; }
#header input.hamburger:checked ~ .drawer-list { transform: translateX(0); border-bottom-left-radius: 0; }
#header input.hamburger:checked ~ .drawer-list li { transform: translateX(0); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(1) { transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(2) { transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(3) { transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(4) { transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(5) { transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(6) { transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(7) { transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(8) { transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(9) { transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(10) { transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(11) { transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(12) { transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(13) { transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(14) { transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(15) { transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(16) { transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(17) { transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(18) { transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(19) { transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(20) { transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(21) { transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(22) { transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(23) { transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(24) { transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(25) { transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(26) { transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(27) { transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(28) { transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(29) { transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(30) { transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(31) { transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(32) { transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(33) { transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(34) { transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(35) { transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(36) { transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(37) { transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(38) { transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(39) { transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(40) { transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(41) { transition: transform 1s 3.28s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(42) { transition: transform 1s 3.36s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(43) { transition: transform 1s 3.44s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(44) { transition: transform 1s 3.52s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(45) { transition: transform 1s 3.6s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(46) { transition: transform 1s 3.68s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(47) { transition: transform 1s 3.76s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(48) { transition: transform 1s 3.84s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(49) { transition: transform 1s 3.92s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li:nth-child(50) { transition: transform 1s 4s cubic-bezier(0.29, 1.4, 0.44, 0.96); }
#header input.hamburger:checked ~ .drawer-list li a { margin-bottom: 0; }
#header input.hamburger:checked ~ label > i { background-color: transparent; }
#header input.hamburger:checked ~ label > i:before { transform: translate(-50%, -50%) rotate(315deg); background-color: #333333; }
#header input.hamburger:checked ~ label > i:after { transform: translate(-50%, -50%) rotate(-315deg); background-color: #333333; }
#header label.hamburger { display: none; }
@media screen and (max-width: 1024px) { #header label.hamburger { z-index: 9999; position: relative; display: block; height: 23px; width: 23px; margin-left: 16px; } }
#header label.hamburger:hover { cursor: pointer; }
#header label.hamburger > i { position: absolute; width: 100%; height: 2px; border-radius: 4px; top: 50%; left: 50%; background-color: #333; pointer-events: auto; transform: translateX(-50%) translateY(-50%); }
#header label.hamburger > i:before, #header label.hamburger > i:after { position: absolute; display: block; width: 100%; height: 2px; border-radius: 4px; left: 50%; background-color: #333; content: ""; transition: transform 0.35s; transform-origin: 50% 50%; }
#header label.hamburger > i:before { transform: translate(-50%, -10px); }
#header label.hamburger > i:after { transform: translate(-50%, 10px); }
#header .pc-only { display: block; }
@media screen and (max-width: 767px) { #header .pc-only { display: none; } }

#wrap { color: #333; }

#lp-main { margin-top: 75px; padding-top: 25px; padding-bottom: 120px; background: #eef4e3 url(../img/main_back_lp.webp) no-repeat; background-size: cover; position: relative; }
#lp-main nav ul { display: flex; justify-content: flex-start; }
#lp-main nav ul li { padding: 0 15px; }
#lp-main nav ul li a { color: #333; font-size: 15px; font-family: 'outfit'; }
#lp-main nav ul li:first-child { color: #34a174; font-size: 13px; }
#lp-main nav ul li:first-child figure { vertical-align: top; display: inline-block; }
#lp-main nav ul li:first-child figure img { width: 100px; display: inline-block; }
#lp-main nav ul li:not(:first-child):not(:last-child) { padding-top: 8px; }
#lp-main nav ul li .btnBlock { color: #fff; }
#lp-main nav ul li:nth-of-type(2) { margin-left: auto; }
#lp-main .flexbox { width: 100%; max-width: 1080px; margin: 0 auto; align-items: center; }
#lp-main .flexbox > div:first-child { width: 65%; text-align: center; position: relative; }
#lp-main .flexbox > div:first-child .main_circle img { animation: 60s linear infinite rotation; width: 80%; }
#lp-main .flexbox > div:first-child .cheql_product { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 650px; }
#lp-main .flexbox > div:last-child { flex-grow: 1; text-align: center; }
#lp-main .flexbox > div:last-child h1 { font-size: 24px; color: #34a174; font-family: outfit; margin-bottom: 15px; }
#lp-main .flexbox > div:last-child h2 { font-size: 24px; color: #34a174; font-family: outfit; margin-bottom: 15px; }
#lp-main .flexbox > div:last-child .bgback + h2 { margin-top: 35px; }
#lp-main .flexbox > div:last-child .mainltlogo img { width: 218px; }
#lp-main .flexbox > div:last-child .number { font-size: 12px; font-family: outfit; color: #34a174; margin-top: 20px; margin-bottom: 30px; }
#lp-main .flexbox > div:last-child .btnBlockOrBig::before { content: url(../img/shop_icon.svg); width: 28px; margin-right: 10px; display: inline-block; vertical-align: middle; }
#lp-main svg { width: 100%; position: absolute; left: 0; bottom: -1px; }
#lp-main #wave { width: 100%; position: absolute; z-index: 5; }

@keyframes rotation { 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } }
.main-area { padding-top: 80px; padding-bottom: 50px; background: #eef4e3; }
.main-area .cheQL_logo { display: block; text-align: center; padding: 35px auto 25px; }
.main-area .cheQL_logo img { width: min(50%, 200px); }
.main-area h1 { font-size: 36px; color: #34a174; }
.main-area h1 span { display: block; font-size: 18px; margin-left: 40px; position: relative; color: #90c490; }
.main-area h1 span::before { content: ""; width: 25px; height: 1px; background: #90c490; position: absolute; top: 1em; left: -40px; }

#wrap section { font-size: 16px; }
#wrap section .inner { width: min(100%, 1080px); margin: 0 auto; }

.flexbox { display: flex; justify-content: space-between; }
.flexbox.mainPanel { flex-wrap: wrap; }
.flexbox.mainPanel > div { background: #fff; border-radius: 20px; border: 1px solid #fff; width: 23%; margin-bottom: 10px; }
.flexbox.mainPanel > div a { text-align: center; padding: 40px 10px; display: block; color: #333; line-height: 1.3; }
.flexbox.mainPanel > div:hover { border: 1px solid #34a174; }
.flexbox.footerBanner { flex-wrap: wrap; }
.flexbox.footerBanner > div { width: 32%; }
.flexbox.footerBanner > div a { text-decoration: underline; color: #0088c8; }
.flexbox.footerBanner > div img { margin-bottom: 10px; }
.flexbox.lgrow { justify-content: flex-start; }
.flexbox.lgrow > div:nth-of-type(1) { flex-grow: 1; }
.flexbox.aitemCenter { align-items: center; }
.flexbox.referral { flex-wrap: wrap; }
.flexbox.referral > div { width: 49%; border-radius: 20px 20px 0 0; margin-bottom: 60px; }
.flexbox.referral > div img { width: 100%; border-radius: 20px 20px 0 0; }
.flexbox.referral > div .infoBox { background: #fff; padding: 30px; font-size: 16px; display: flex; flex-direction: column; }
.flexbox.referral > div .infoBox h3 { color: #34a174; font-size: 20px; flex-grow: 1; margin-bottom: 10px; }
.flexbox.referral > div .infoBox dl { display: flex; }
.flexbox.referral > div .infoBox dl dt { width: 25%; }
.flexbox.referral > div .infoBox dl + .center { margin-top: 30px; }
.flexbox.product > div { width: 45%; border-radius: 12px; background: #fff; padding-bottom: 30px; display: flex; flex-direction: column; }
.flexbox.product figure { position: relative; }
.flexbox.product figure img { border-radius: 12px 12px 0 0; }
.flexbox.product figure span { position: absolute; bottom: 10px; left: 10px; color: #333; font-size: 12px; }
.flexbox.product h3 { padding: 30px 30px 0 30px; color: #34a174; flex-grow: 1; }
.flexbox.product .price { color: #fdae46; text-align: right; padding-right: 30px; margin-top: 10px; margin-bottom: 20px; }
.flexbox.flow > div { width: 49.5%; }

.titleWrap { position: relative; }
.titleWrap .btnBlock { position: absolute; right: 0; top: 0; }

.btnBlock { background: #6fb285; color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 15px; box-shadow: 0px 8px 8px 5px rgba(111, 178, 133, 0.2); display: inline-block; }

.btnBlockOr { background: #fdae46; color: #fff; padding: 8px 20px; border-radius: 30px; font-size: 15px; box-shadow: 0px 8px 8px 5px rgba(111, 178, 133, 0.2); display: block; width: calc(100% - 60px); margin: 0 auto; box-sizing: border-box; }
.btnBlockOr::before { content: url(../img/shop_icon.svg); width: 20px; margin-right: 10px; display: inline-block; vertical-align: text-top; }

.btnBlockBig { background: #fff; color: #34a174; padding: 20px 90px; border-radius: 40px; font-size: 18px; box-shadow: 0px 3px 3px 2px rgba(0, 0, 0, 0.2); display: inline-block; line-height: 1; }

.btnBlockOrBig { background: #fdae46; color: #fff; padding: 20px 90px; border-radius: 40px; font-size: 18px; box-shadow: 0px 3px 3px 2px rgba(253, 174, 70, 0.2); display: inline-block; line-height: 1; }

.backBtn { position: absolute; top: 120px; right: 40px; }

.bgback { background: #34a174; color: #fff; padding: 3px 5px; border-radius: 3px; display: inline-block; margin-bottom: 3px; line-height: 1; }

.lead { text-align: center; margin-bottom: 70px; font-weight: bold; }
.lead .greenBig { color: #34a174; font-size: 24px; }
.lead .greenBig strong { font-size: 36px; }

.bgGreen { background: #f8fcf2; }

.bgUGreen { background: #eef4e3; }

.bgMGreen { background: #34a174; color: #fff; }

.greenCol { color: #34a174; font-size: 24px; margin-bottom: 40px; text-indent: -1em; margin-left: 1em; }
.greenCol::before { content: "・"; color: #34a174; }

.greenColBig { color: #34a174; font-size: 36px; margin-bottom: 40px; }
.greenColBig .subtitle { color: #b3d299; font-weight: normal; }
.greenColBig .subtitle::before { background-color: #b3d299; }

.subtitle { font-size: 18px; font-family: "outfit"; padding-left: 35px; position: relative; display: block; }
.subtitle::before { content: ""; width: 30px; height: 1px; background: #34a174; position: absolute; left: 0; top: .8em; }

.whiteCol { color: #fff; font-size: 24px; margin-bottom: 40px; text-indent: -1em; margin-left: 1em; }
.whiteCol::before { content: "・"; color: #fff; }
.whiteCol.nodot::before { content: unset; }

.whiteColBig { color: #fff; font-size: 36px; margin-bottom: 40px; }
.whiteColBig .subtitle { color: #b3d299; }
.whiteColBig .subtitle::before { background-color: #b3d299; }

.greenTitle { color: #34a174; font-size: 36px; margin-bottom: 40px; font-weight: normal; letter-spacing: 2px; font-family: "outfit"; }

.greenNTitle { font-weight: bold; font-size: 16px; color: #34a174; margin-bottom: 15px; }
.greenNTitle::before { content: "・"; font-weight: bold; }

.circle { clip-path: circle(50% at 50% 50%); }
.circle.personal { width: 300px; height: 300px; background: url(../img/pixta_90281573_L.webp); background-size: cover; background-position: 30% 0; }

p + .greenNTitle { margin-top: 30px; }

/* LPページ */
.reason { text-align: center; }
.reason .cmaskWrap { position: relative; width: 310px; }
.reason .cmask { position: relative; display: inline-block; padding: 0; width: 100%; aspect-ratio: 1 / 1; clip-path: circle(50% at 50% 50%); }
.reason .cmask::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 300px; border: 5px solid transparent; background: linear-gradient(135deg, #b0d198 0%, #34a174 100%) border-box border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: exclude; }
.reason .cmask.pic01 { background: url(../img/select01.webp) no-repeat; background-size: cover; background-position: 45% center; }
.reason .cmask.pic02 { background: url(../img/select02.webp) no-repeat; background-size: cover; }
.reason .cmask.pic03 { background: url(../img/select03.webp) no-repeat; background-size: cover; background-position: 35% center; }
.reason span { position: absolute; right: 5%; bottom: 5%; background: #34a174; color: #fff; padding: 21px 20px; font-family: "outfit"; font-size: 24px; line-height: 1; border-radius: 50px; }
.reason > div:nth-of-type(1) span { padding: 20px; }
.reason > div:nth-of-type(2) { padding-top: 40px; }
.reason p { margin-top: 20px; }

.message { background-color: #f8fcf2; background-image: linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 98%, #e7efd9 100%); background-size: 100% 2em; line-height: 2em; padding: 5.9em 1em 7em 3em; color: #696969; padding-left: 345px; padding-right: 40px; position: relative; }
.message p + p { margin-top: 2em; }
.message h2 { position: absolute; color: #b3d299; top: 80px; left: 70px; font-size: 48px; font-family: "outfit"; }
.message .tate { position: absolute; top: 160px; left: 110px; font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif; writing-mode: vertical-rl; text-orientation: upright; display: inline-block; }
.message .tate h3 { color: #34a174; font-size: 24px; margin-right: 20px; }

.recommend { background: url(../img/recommend_back.webp) no-repeat; background-size: contain; background-position: center bottom; width: 100%; }
.recommend ul { max-width: 800px; margin: 0 auto; }
.recommend li { display: flex; align-items: center; position: relative; background: #fff; padding: 5px 5px 5px 75px; height: 54px; line-height: 1; border-radius: 25px; box-shadow: 3px 3px 15px 0px rgba(52, 161, 116, 0.3); }
.recommend li span { display: none; }
.recommend li::before { content: ""; position: absolute; width: 50px; height: 50px; background: #eef4e3; border-radius: 25px; top: 2px; left: 2px; z-index: 2; }
.recommend li::after { position: absolute; content: url("../img/ch_h.svg"); width: 30px; height: 30px; z-index: 3; left: 10px; }
.recommend li + li { margin-top: 15px; }
.recommend li strong { color: #333; background: linear-gradient(transparent 70%, #f1fe04 70%); }

ol.step { width: 100%; }
ol.step li { background: #fff; border-radius: 10px; padding: 30px 20px 30px 80px; width: calc(100% - 40px); margin-left: auto; display: flex; position: relative; }
ol.step li + li { margin-top: 50px; }
ol.step li p { color: #34a174; font-size: 20px; flex-grow: 1; }
ol.step li::before { content: ""; line-height: 1; display: block; width: 100px; height: 100px; background: #34a174; border-radius: 50px; position: absolute; left: -40px; top: -10px; }
ol.step li::after { content: "Step"; position: absolute; left: -5px; top: 15px; color: #fff; font-family: "outfit"; font-size: 14px; }
ol.step li p::before { position: absolute; left: -5px; top: 25px; color: #fff; font-family: "outfit"; font-size: 24px; }
ol.step li:nth-of-type(1) p::before { content: "01"; }
ol.step li:nth-of-type(2) p::before { content: "02"; }
ol.step li:nth-of-type(3) p::before { content: "03"; }
ol.step li:nth-of-type(4) p::before { content: "04"; }

.flow .movieWrap { position: relative; background: #eef4e3; text-align: center; border-radius: 20px; padding: 30px 50px 50px 50px; width: calc(100% - 55px); margin-left: auto; }
.flow .movieWrap::before { content: ""; line-height: 1; display: block; width: 100px; height: 100px; background: #34a174; border-radius: 50px; position: absolute; left: -55px; top: -10px; }
.flow .movieWrap::after { content: "Movie"; position: absolute; left: -37px; top: 17px; color: #fff; font-family: "outfit"; font-size: 24px; }
.flow .movieWrap p { margin-bottom: 35px; font-family: "outfit"; }
.flow .movieWrap iframe { width: 100%; height: auto; aspect-ratio: 9 / 16; }

.userVoice li { background: #fff; border-radius: 20px; margin-bottom: 25px; }
.userVoice li dl { border-radius: 20px; background-color: #fff; background-image: linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 96%, #eef4e3 100%); background-size: 100% 2em; line-height: 2em; padding: 1.9em 3em 1.9em 3em; color: #696969; }
.userVoice li dl dt { color: #34a174; }

.doyouknow { padding-left: 0; padding-right: 0; padding-bottom: 0; background: url(../img/what_bokashi.webp) no-repeat; background-position: left bottom; }
.doyouknow .wrapinner { width: min(100%, 1440px); margin: 0 auto; text-align: right; height: 480px; position: relative; }
.doyouknow .wrapinner figure img { border-radius: 35px; width: 720px; position: absolute; top: 0; right: 0; }
.doyouknow .inner { position: relative; }
.doyouknow .inner .flexbox { align-items: center; height: 480px; }
.doyouknow .inner ul { width: 100%; max-width: 600px; }
.doyouknow .inner ul li { background: #fff; border-radius: 20px; padding: 30px; text-align: center; line-height: 1.1; box-shadow: 3px 3px 15px 0px rgba(52, 161, 116, 0.3); }
.doyouknow .inner ul li + li { margin-top: 20px; }
.doyouknow .inner ul li strong { color: #333; background: linear-gradient(transparent 70%, #f1fe04 70%); }

dl.faq { background: #fff; }
dl.faq dt { padding: 15px 25px 15px 75px; background: #fff; position: relative; }
dl.faq dt::before { content: "Q"; line-height: 1; font-family: "outfit"; font-size: 18px; padding: 8px 10px; color: #fff; border-radius: 18px; background: #34a174; position: absolute; top: 13px; left: 25px; }
dl.faq dt::after { content: "＋"; line-height: 1; font-family: "outfit"; font-size: 18px; color: #34a174; right: 10px; top: 20px; position: absolute; font-weight: bold; }
dl.faq dd { padding: 15px 25px 15px 75px; background: #fff; position: relative; display: none; }
dl.faq dd::before { content: "A"; line-height: 1; font-family: "outfit"; font-size: 18px; padding: 8px 10px; color: #34a174; position: absolute; top: 13px; left: 25px; }
dl.faq + dl.faq { margin-top: 15px; }
dl.faq.active dt::after { content: "ー"; }
dl.faq + h3 { margin-top: 60px; }

/* LPページここまで */
.noticeBlock { background: #fff; padding: 30px; border-radius: 10px; font-size: 18px; text-align: center; margin-bottom: 30px; box-shadow: 0px 0px 15px 0px rgba(111, 178, 133, 0.2); }
.noticeBlock strong { color: #333; background: linear-gradient(transparent 70%, #f1fe04 70%); }

ul.kome li { text-indent: -1em; margin-left: 1em; }
ul.kome li::before { content: "※"; margin-right: 0; }

.chara, .chara img { width: 180px; }

dl.accBlock dt { background: #eef4e3; text-align: center; color: #34a174; font-size: 18px; font-weight: bold; padding: 20px; position: relative; grid-template-rows: 0fr; }
dl.accBlock dt::after { position: absolute; content: "ー"; color: #34a174; right: 20px; font-weight: bold; }
dl.accBlock dd { background: #eef4e3; padding: 40px; border-top: 1px solid #fff; transition: grid-template-rows 0.5s; }
dl.accBlock.active dt::after { content: '＋'; }
dl.accBlock.active dd { display: none; grid-template-rows: 1fr; }

footer#footer { text-align: center; position: relative; padding: 1em; }
footer#footer .cheQL_logo { width: min(50%, 200px); margin: 0 auto; }

.totop a { width: 216px; height: 176px; position: fixed; bottom: 40px; right: 20px; background: url(../img/pc_shop.webp) no-repeat; background-size: 216px 176px; transition: 1s; }
.totop a:hover { background: url(../img/pc_shop_on.webp) no-repeat; background-size: 216px 176px; }

.cvr { display: none; }
.cvr.active { bottom: -100px; }

@media screen and (max-width: 1150px) { #lp-main { margin-top: 60px; }
  #lp-main nav ul li { width: 100%; text-align: center; }
  #lp-main nav ul li:first-child figure { vertical-align: middle; }
  #lp-main nav ul li:not(:first-child) { display: none; }
  #lp-main .flexbox > div:last-child h1 { font-size: 18px; }
  #lp-main .flexbox > div:last-child h2 { font-size: 18px; }
  #lp-main .flexbox > div:last-child .bgback + h2 { margin-top: 12px; } }
@media screen and (max-width: 991px) { .main-area { padding: 50px .5em 35px; }
  .main-area h1 { font-size: 28px; margin-bottom: 20px; }
  .main-area h1 span { font-size: 12px; }
  .main-area .backBtn { position: static; text-align: center; }
  .lead .greenBig { color: #34a174; font-size: 20px; }
  .lead .greenBig strong { font-size: 30px; }
  .greenCol { margin-bottom: 20px; font-size: 20px; font-weight: normal; }
  .flexbox.mainPanel > div { width: 49%; }
  .flexbox.mainPanel > div a { padding: 10px; }
  .flexbox.footerBanner > div { width: 100%; margin-bottom: 20px; }
  .flexbox.sp1row { display: block; }
  .flexbox.sp1row > div { width: 100%; }
  .flexbox.spimgcenter img { display: block; margin: 20px auto; }
  .flexbox.aitemCenter .circle { margin: 30px auto 0; }
  .flexbox.referral > div { margin-bottom: 20px; }
  .flexbox.referral > div .infoBox { padding: 20px 15px; display: block; }
  .flexbox.referral > div .infoBox h3 { font-size: 18px; }
  .flexbox.referral > div .infoBox dl { display: block; }
  .flexbox.referral > div .infoBox dl dt, .flexbox.referral > div .infoBox dl dd { width: 100%; }
  .flexbox.referral > div .infoBox .dummy { display: none; }
  .flexbox.reason { display: block; }
  .flexbox.reason div.cmaskWrap { margin: 0 auto; }
  .flexbox.reason > div + div { margin-top: 35px; }
  .titleWrap { overflow: hidden; margin-bottom: 30px; }
  .titleWrap h2 { margin-bottom: 10px; }
  .titleWrap .btnBlock { position: relative; float: right; margin-bottom: 15px; font-size: 15px; }
  dl.accBlock dt { text-align: left; padding: 15px; padding-right: 2em; }
  dl.accBlock dt::after { top: 50%; transform: translateY(-50%); }
  dl.accBlock dd { padding: 15px; }
  .noticeBlock { padding: 15px 20px; text-align: left; font-size: 16px; }
  .kome { margin-top: 1em !important; }
  .chara, .chara img { width: 100px; }
  footer#footer { padding-bottom: 45px; }
  footer#footer .totop { display: none; }
  /*
  .cvr { display: flex; align-items: center; background: #fdae47; color: #fff; position: fixed; width: 100%; left: 0; bottom: -100px; z-index: 10; font-size: 16px; transition: 1s; }
  */
  .cvr { display: flex; align-items: center; background: #00B900; color: #fff; position: fixed; width: 100%; left: 0; bottom: -100px; z-index: 10; font-size: 16px; transition: 1s; }
  .cvr.active { bottom: 0; }
  .cvr > div { padding: 15px; text-align: center; }
  .cvr > div:nth-of-type(1) { flex-grow: 1; }
  .cvr > div:nth-of-type(1) a { display: block; color: #fff; }
  /*
  .cvr > div:nth-of-type(1) a::before { content: url(../img/shop_icon.svg); width: 28px; display: inline-block; vertical-align: middle; margin-right: .5em; }
  */
  .cvr > div:nth-of-type(2) { width: 73px; border-left: 1px solid #fff; }
  .cvr > div:nth-of-type(2) a { display: block; }
  .cvr > div:nth-of-type(2) a::before { content: url(../img/mail_icon.svg); display: block; width: 22px; margin: 0 auto; }
  .totop { display: none; }
  .btnBlock { box-shadow: 0px 5px 5px 3px rgba(111, 178, 133, 0.2); }
  .btnBlock.row2 { text-align: center; display: inline-block; margin: 0 auto; line-height: 1.3; border-radius: 30px; }
  .greenCol, .whiteCol { font-size: 20px; }
  .spcenter { text-align: center; } }
@media screen and (max-width: 767px) { #header .header__inner .cta__wrapper { margin-left: unset; margin-right: unset; width: 80px !important; }
  .search_input { width: calc(100% - 80px) !important; }
  .lead { margin-bottom: 20px; }
  .graph { padding-bottom: 0; }
  #lp-main .flexbox { display: block; }
  #lp-main .flexbox > div:first-child .main_circle img { width: 80%; }
  #lp-main .flexbox > div, #lp-main .flexbox > div:first-child { width: 100%; padding: 10px; }
  .message { padding: 18px; padding-top: 2.6em; }
  .message h2 { position: static; text-align: center; margin-bottom: 20px; }
  .message .tate { position: static; writing-mode: unset; margin-bottom: 2em; }
  .message .tate h3 { font-size: 18px; }
  .recommend li { height: unset; padding: 5px; line-height: 1.5; border-radius: 7px; }
  .recommend li span { display: block; width: 30px; }
  .recommend li p { padding: 15px 20px; flex: 1; }
  .recommend li::before { width: 2em; height: 2em; top: 15px; left: 15px; }
  .recommend li::after { left: 15px; top: 15px; }
  .btnBlockOrBig { font-size: 16px; padding: 10px 90px; }
  dl.faq dt { padding: 15px 25px 15px 55px; }
  dl.faq dt::before { left: 10px; }
  dl.faq dd { padding: 15px 25px 15px 55px; }
  dl.faq dd::before { left: 10px; }
  .greenTitle { font-size: 28px; }
  .greenColBig { font-size: 28px; margin-bottom: 30px; }
  .greenColBig .subtitle { font-size: 12px; }
  .bgback { font-size: 14px; }
  h2 .bgback { font-size: 28px; }
  section#about { padding-bottom: 30px; }
  .flexbox.flow { display: block; }
  .flexbox.flow > div { width: 100%; }
  ol.step li { display: block; padding: 20px 20px 14px 90px; width: 100%; }
  ol.step li figure { text-align: center; }
  ol.step li figure img { height: 80px; }
  ol.step li::before { width: 78px; height: 78px; left: -10px; }
  ol.step li::after { left: 15px; top: 5px; }
  ol.step li p { font-size: 18px; font-weight: normal; }
  ol.step li p::before { left: 15px; top: 15px; }
  ol.step li + li { margin-top: 25px; }
  .flow .movieWrap { margin-top: 25px; width: 100%; padding: 30px 25px 25px 25px; }
  .flow .movieWrap::before { width: 78px; height: 78px; left: -10px; }
  .flow .movieWrap::after { font-size: 24px; left: -3px; top: 6px; }
  .flow .movieWrap p { margin-bottom: 20px; }
  .userVoice li dl { padding: 1.9em 1em; }
  .doyouknow { background-position: center bottom; }
  .doyouknow h2 { border-bottom: 70px; }
  .doyouknow .wrapinner { height: auto; }
  .doyouknow .wrapinner figure img { border-radius: 0; width: 100%; position: static; }
  .doyouknow .inner .flexbox { margin-top: 30px; display: block; height: auto; }
  .doyouknow .inner .flexbox > div:nth-of-type(1) { width: 100%; }
  .doyouknow .inner .flexbox > div:nth-of-type(1) img { border-radius: 0; }
  .doyouknow .inner .flexbox > div:nth-of-type(2) { display: none; }
  .doyouknow .inner .flexbox ul { width: 90%; display: grid; position: static; margin: -50px auto 0; transform: unset; }
  .doyouknow .inner .flexbox ul li { text-align: left; padding: 20px; line-height: 1.5; } }
@media screen and (max-width: 575px) { .flexbox.product { display: block; }
  .flexbox.product > div { width: 100%; margin-bottom: 15px; }
  .flexbox.product > div img { width: 100%; } }

  
  @media (min-width: 768px) {
    .pc-only {
      display: block;
    }
  .sp-only {
    display: none; /* デフォルトでは非表示 */
  }
  }

  @media only screen and (max-width: 600px) {
    .pc-only {
      display: none;
    }
    .sp-only {
      display: block; /* スマホサイズで表示 */
    }
  }

  /* PC用スタイル */
  @media (min-width: 768px) {
    .footer__list {
      display: flex;
      justify-content: center;
    }
    .footer__list li {
      border-right: solid 1px #333;
    }
  }

  /* SP用スタイル */
  @media (max-width: 767px) {
    .footer__list {
      display: block;
      text-align: center;
    }
    .footer__list li {
      border-right: none;
      margin-bottom: 10px;
    }
  }
/*# sourceMappingURL=style_common.css.map */