@charset "UTF-8";
/** common **/
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@import url("//use.fontawesome.com/releases/v5.6.1/css/all.css");
:root { --first-color:#00B3E3; --second-color:#FFF67F; --third-color:#FF4317; --fourth-color:#278EA9; --fifth-color:#274c56; --bg-color:#FCFCE9; --highlight-color:#38d2fc; --icon: "Font Awesome 5 Free"; --h-font-fam: "Zen Maru Gothic", sans-serif; --font-S:clamp(0.875rem, 0.83rem + 0.23vw, 1rem); --font-M:clamp(1rem, calc(0.7370689655172413rem + 0.6896551724137931vw), 1.25rem); --font-L:clamp(1.25rem, calc(1.1120689655172413rem + 0.6896551724137931vw), 1.5rem); --font-LL:clamp(1.5rem, calc(1.0862068965517242rem + 2.0689655172413794vw), 2.25rem); --font-XL:clamp(2rem, calc(1.0862068965517242rem + 2.0689655172413794vw), 2.5rem); }

html { /*scroll-behavior: smooth;*/ scroll-padding-top: 60px; transition: 0.5s all; font-family: "Yu Gothic", "Noto Sans JP", sans-serif; font-weight: 500; color: #333; }

html p { letter-spacing: 0.05em; line-height: 1.7em; }

html a { text-decoration: none; transition: 0.3s all; }

/*--------------
Reset
--------------------*/
.layout-wrapper { max-width: unset; font-size: var(--font-M); line-height: 1.8; }

.layout-wrapper h1, .layout-wrapper h2, .layout-wrapper h3, .layout-wrapper h4, .layout-wrapper h5, .layout-wrapper h6 { font-weight: normal; margin: 0; font-size: 1em; }

.layout-wrapper a { color: var(--first-color); }

.layout-wrapper a:hover { color: var(--third-color); }

/*------------
main
-------------------*/
main { background: var(--bg-color); }

/*--------------
Header
------------------------*/
header { padding: 0; position: fixed; width: 100%; background: unset; z-index: 999; font-family: var(--h-font-fam); /*responsive*/ }

header * { transition: 0.3s all; }

header .part-columns { background: rgba(7, 181, 228, 0.7); padding: 8px 2vw; /*menu*/ /*スクロール*/ }

header .part-columns .logo a:hover { opacity: 0.8; }

header .part-columns .logo svg { fill: #FFF; height: 56px; display: block; }

header .part-columns .columns.columns-3 { align-items: center; }

header .part-columns .columns.columns-3 .columns-column { width: auto; }

header .part-columns ul.menu-list { display: flex; justify-content: space-between; align-items: center; }

header .part-columns ul.menu-list li a { color: #FFF; font-size: var(--font-L); font-weight: 500; border-bottom: 2px solid transparent; }

header .part-columns ul.menu-list li a:hover { border-bottom-color: #FFF; }

header .part-columns ul.menu-list li.start a { background: var(--third-color); display: block; padding: 4px  24px; border-radius: 36px; border-bottom: unset; }

header .part-columns ul.menu-list li.start a:hover { background: var(--first-color); color: white; }

header .part-columns.scrollhead { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); padding: 8px 2vw; }

header .part-columns.scrollhead .logo a { display: block; height: 42px; }

header .part-columns.scrollhead .logo svg { fill: var(--first-color); height: 42px; }

header .part-columns.scrollhead ul.menu-list li a { font-size: var(--font-M); }

header .part-columns.scrollhead ul.menu-list li:not(.start) a { color: var(--text-color); border-bottom: none; }

header .part-columns.scrollhead ul.menu-list li:not(.start) a:hover { color: var(--first-color); border-bottom: none; }

header #menu-sp-button-toggle { display: none; }

@media screen and (max-width: 1400px) { header .part-columns .logo svg { max-height: 40px; min-height: 16px; } header .part-columns ul.menu-list { gap: 1em; } header .part-columns ul.menu-list li a { font-size: var(--font-M); } }

/*end_header*/
.menu-sp-active header #menu-sp-button-toggle svg.open { display: none; }

.menu-sp-active header #menu-sp-button-toggle svg.close { display: block; }

/*------------
Top Banner
-------------------*/
.block-top-wrap.block-wrap { background: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/トップ_修正3.png), linear-gradient(to bottom, var(--first-color), var(--bg-color) 80%); animation: fadeIn 1s cubic-bezier(0.7, 1, 0.68, 1) forwards; background-repeat: no-repeat; width: 100%; padding-top: 126vw; padding-bottom: 80px; background-size: 100%; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

/*---------------------
ボタン
----------------------*/
.btn a { background: var(--first-color); border-radius: 999px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; width: 352px; padding: 12px 24px; color: white; transition: 0.3s ease-in-out; font-weight: 500; text-decoration: none; margin-top: 48px; letter-spacing: 0.08em; font-family: var(--h-font-fam); }

.btn a::after { content: ""; position: absolute; top: 50%; bottom: 0; right: 3em; font-size: 90%; display: flex; justify-content: center; align-items: center; transition: right 0.3s; width: 8px; height: 8px; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: translateY(-50%) rotate(45deg); }

.btn a:hover::after { right: 1.5em; }

.btn a:hover { background: var(--highlight-color); color: #FFF; }

/*------------------
見出し
------------------------*/
.layout-wrapper h1, .layout-wrapper h2, .layout-wrapper h3, .layout-wrapper h4, .layout-wrapper h5, .layout-wrapper h6 { font-family: var(--h-font-fam); }

.layout-wrapper h3 { text-align: center; font-size: var(--font-XL); font-weight: 500; letter-spacing: 0.05em; margin-bottom: 56px; }

.layout-wrapper h3 .headline-sub { display: block; font-weight: 400; font-size: var(--font-L); letter-spacing: 0.15em; }

.midashi_sakana h3 span.headline-main::before { /* h3さかなアイコン */ content: ""; display: block; background-image: url(/resource/59/さかな.svg); height: 1.4em; background-position: top center; background-repeat: no-repeat; background-size: 2em; }

.midashi_osake h3 span.headline-main::before { /* h3おさけアイコン */ content: ""; display: block; background-image: url(/resource/59/おさけ.svg); height: 2.3em; background-position: top center; background-repeat: no-repeat; background-size: 1em; }

.midashi_utuwa h3 span.headline-main::before { /* h3うつわアイコン */ content: ""; display: block; background-image: url(/resource/59/うつわ.svg); height: 1.4em; background-position: top center; background-repeat: no-repeat; background-size: 2em; }

/*------------------
記事
------------------------*/
.part-columns .part-body .part-body { max-width: 1270px; margin: 0 auto; }

.ps::before { content: "※"; }

/*------------
最新情報
-------------------*/
#topics .content-fields { background: white; max-width: 1270px; width: 90%; margin: 0 auto 40px; padding: 24px 36px; border-radius: 24px; font-size: var(--font-S); }

#topics .content-fields .content-field--title.content-field--text { width: 100%; min-width: 0; border-bottom: 1px solid #eee; margin-bottom: 8px; }

#topics .content-fields .content-field--title.content-field--text h2 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; font-size: var(--font-M); color: var(--first-color); text-decoration: none; }

#topics .content-fields .content-field--title.content-field--text h2 a:hover { color: var(--third-color); }

#topics .content-fields .content-field--updated_at.content-field--datetime { margin-bottom: -8px; }

/*------------------
ABOUT
------------------------*/
#about { text-align: center; }

#about .columns-column { /* background: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/about_back.svg) top 32px center no-repeat; */ margin-top: 64px; }

#about h4.headline { font-size: var(--font-LL); font-weight: 600; color: var(--highlight-color); letter-spacing: 0.14em; font-family: "Yu Gothic", "Noto Sans JP", sans-serif; line-height: 1.5; margin-bottom: 40px; }

#about ul.about_col3 { display: flex; justify-content: space-around; padding-bottom: 120px; margin-top: 72px; }

#about ul.about_col3 li img { height: auto; display: none; }

#about ul.about_col3 li p { margin: 0 auto; font-size: var(--font-M); background: var(--first-color); width: 350px; height: 350px; text-align: center; align-content: center; border-radius: 999px; aspect-ratio: 1 / 1; color: white; padding: 24px; }

#about ul.about_col3 li p strong { font-weight: bold; font-size: var(--font-L); color: var(--second-color); }

/*------------------
HOW TO USE
------------------------*/
#howto::before { content: ""; display: block; width: 100%; height: 173px; background-size: 100% auto; background-position: bottom; background-repeat: no-repeat; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/波cream2.svg); background-color: var(--second-color); }

#howto .columns-column { background: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/howto_back.svg) top 36px center no-repeat; padding-bottom: 80px; margin-top: 40px; }

.contents_howto li { /* background: linear-gradient(90deg, var(--first-color) 0%, var(--first-color) 30%, #fff 30%, #fff 100%); */ border-radius: 16px; display: flex; justify-content: space-between; align-items: stretch; margin: 0 auto 24px; padding: 0 24px 0 0; width: 80%; font-size: var(--font-M); background: #FFF; }

.contents_howto li .counter { display: flex; width: 30%; align-items: center; justify-content: start; background: var(--first-color); padding: 16px 24px; border-radius: 16px 0 0 16px; }

.contents_howto li .counter p.counter_number { background-color: var(--highlight-color); width: 56px; height: 56px; border-radius: 13px; display: flex; transform: rotate(45deg); align-items: center; justify-content: center; font-size: var(--font-S); color: white; }

.contents_howto li .counter p.counter_number span { display: block; transform: rotate(-45deg); font-size: var(--font-L); font-weight: 500; }

.contents_howto li .counter h5 { padding-left: 24px; color: white; font-weight: 500; font-size: var(--font-L); }

.contents_howto li > p { width: 55%; padding: 16px 24px; align-items: flex-start; display: flex; flex-direction: column; justify-content: center; }

.contents_howto li > p span.ps { font-size: var(--font-S); }

.contents_howto li > p span.ps::before { margin-right: 4px; }

.contents_howto li .howtoImage { width: 20%; }

/*------------------
PRICE LIST
------------------------*/
#price { /*background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/波黄.svg);*/ background-color: unset; background-position: top center; background-repeat: no-repeat; /*padding-top: 184px;*/ background-color: var(--bg-color); }

#price:before { content: ""; display: block; width: 100%; height: 182px; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/波黄.svg); background-size: 100% auto; background-position: bottom; background-repeat: no-repeat; }

#price > .part-body { background: var(--second-color); margin-top: -2px; }

#price .priceTable { position: relative; width: 80%; margin: 0 auto 80px; }

#price .priceTable::before { content: ""; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/stamp2.png); background-size: contain; display: block; width: 200px; height: 200px; background-size: contain; background-repeat: no-repeat; position: absolute; top: -80px; right: -100px; z-index: 99; }

#price .priceTable-row { display: flex; position: relative; }

#price .priceTable-row > div { flex: 1; text-align: center; font-size: var(--font-LL); }

#price .priceTable-header { color: #fff; background: var(--first-color); border-radius: 8px 8px 0 0; font-size: var(--font-LL); font-weight: 500; position: relative; }

#price .priceTable-header .priceTable-row > div:nth-child(2) { background: var(--fourth-color); }

#price .priceTable-body { overflow: hidden; border-radius: 0 0 8px 8px; }

#price .priceTable-body .priceTable-row { background: #FFF; font-size: var(--font-LL); font-weight: 500; }

#price .priceTable-body .priceTable-row:nth-child(even) { background: #EEE; }

#price .priceTable-body .priceTable-row > div { padding: 16px 0; }

#price .priceTable-body .priceTable-row > div.arrow::before, #price .priceTable-body .priceTable-row > div.arrow::after { position: absolute; top: 50%; left: 50%; display: block; height: 2px; content: ""; background: var(--first-color); border-radius: 10px; transform: translateX(-50%); -webkit-appearance: none; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }

#price .priceTable-body .priceTable-row > div.arrow::before { width: 160px; }

#price .priceTable-body .priceTable-row > div.arrow::after { width: 20px; transform: rotate(35deg) translate(48px, calc(-50% - 40px)); position: absolute; }

#price table { width: 80%; border-collapse: collapse; margin: 0 auto 80px; }

#price table thead th { color: #FFF; width: 50%; font-size: var(--font-LL); background: var(--first-color); border-radius: 8px 0 0 0; font-weight: 500; position: relative; }

#price table thead th:nth-child(2) { background: var(--fourth-color); border-radius: 0 8px 0 0; }

#price table thead th.stamp_base::after { content: ""; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/stamp2.png); background-size: contain; display: block; width: 200px; height: 200px; background-size: contain; background-repeat: no-repeat; position: absolute; top: -80px; right: -100px; z-index: 99; }

#price table tbody { border-radius: 8px; }

#price table tbody tr { position: relative; }

#price table tbody tr:nth-child(even) td { background: #EEE; }

#price table tbody tr:last-child { border-radius: 0 0 8px 0px; }

#price table tbody tr:last-child td { border-radius: 0px 0px 0px 8px; }

#price table tbody tr td { background: #FFF; text-align: center; padding: 16px 0; font-size: var(--font-LL); }

#price table tbody tr td.allow::before, #price table tbody tr td.allow::after { position: absolute; top: 50%; left: 50%; display: block; height: 2px; content: ""; background: var(--first-color); border-radius: 10px; transform: translateX(-50%); -webkit-appearance: none; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }

#price table tbody tr td.allow::before { width: 160px; }

#price table tbody tr td.allow::after { width: 20px; transform: rotate(35deg) translate(48px, calc(-50% - 40px)); position: absolute; }

#price table tbody tr td:last-child { border-radius: 0 0 8px; }

/*end_price*/
/*------------------
加盟店を探す
------------------------*/
#store { /*background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/blue波.svg);*/ background-position: top center; background-repeat: no-repeat; /*padding-top: 184px;*/ background-color: var(--bg-color); text-align: center; }

#store::before { content: ""; display: block; width: 100%; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/blue波02.svg); height: 180px; background-position: bottom center; background-size: 100% auto; background-repeat: no-repeat; margin-bottom: -8px; }

#store .part-body { background: var(--fourth-color); }

#store .columns-column { margin-top: 40px; }

#store .storeLinkBanner .grid-items { margin-bottom: 40px; position: static !important; display: flex; gap: 1.5em; height: auto !important; }

#store .storeLinkBanner .grid-items .grid-item { position: relative !important; left: unset !important; top: unset !important; }

#store .storeLinkBanner .grid-items .grid-image { background-color: white; position: relative; }

#store .storeLinkBanner .grid-items .grid-image a:hover { opacity: 0.7; }

#store .storeLinkBanner .grid-items .grid-comment { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; right: unset; pointer-events: none; }

#store .storeLinkBanner .grid-items .grid-comment p { font-size: var(--font-LL); color: white; font-weight: 500; text-shadow: 1px 0 20px #3f3932; font-family: var(--h-font-fam); }

#store .store_banner { margin-bottom: 80px; }

#store .store_banner p.btn2 { background-color: var(--third-color); display: flex; text-align: center; padding: 8px 0; box-sizing: border-box; position: relative; color: white; width: fit-content; margin: 0 auto; transition: 0.3s all; }

#store .store_banner p.btn2:before, #store .store_banner p.btn2:after { position: absolute; content: ''; width: 0px; height: 0px; z-index: 1; }

#store .store_banner p.btn2:before { /*左端の山形*/ top: 50%; left: 0; border-width: 48px 0px 48px 32px; border-color: transparent transparent transparent var(--fourth-color); border-style: solid; transform: translateY(-50%); }

#store .store_banner p.btn2:after { /*右端の山形*/ top: 50%; right: 0; border-width: 48px 32px 48px 0px; border-color: transparent var(--fourth-color) transparent transparent; border-style: solid; transform: translateY(-50%); }

#store .store_banner p.btn2:hover { background: var(--first-color); opacity: 1; }

#store .store_banner p.btn2 a { margin: 0; padding: 24px 90px 24px 80px; border-top: solid 1px #FFF; /*上の破線*/ border-bottom: solid 1px #FFF; /*下の破線*/ line-height: 32px; font-size: var(--font-L); letter-spacing: 0.05em; color: #FFF; display: flex; align-content: center; justify-content: center; align-items: center; }

#store .store_banner p.btn2 a span { margin-left: 1em; vertical-align: top; font-weight: 400; font-size: var(--font-M); margin-right: 1em; }

#store .store_banner p.btn2 a::after { content: ""; position: absolute; top: 50%; bottom: 0; right: 5rem; font-size: 90%; display: flex; justify-content: center; align-items: center; transition: right 0.3s; width: 16px; height: 16px; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: translateY(-50%) rotate(45deg); }

/*end_加盟店を探す*/
.layout-wrapper #store h3 { color: #FFF; }

/*------------------
FAQ
------------------------*/
#qa { background-color: var(--fourth-color); }

#qa::before { content: ""; display: block; width: 100%; height: 173px; background-size: 100% auto; background-position: bottom; background-repeat: no-repeat; background-image: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/波cream2.svg); }

#qa .columns-column { margin-top: 40px; }

#qa .part-body { background-color: var(--bg-color); margin-top: -4px; }

#qa .part-body .btn a { margin-bottom: 80px; }

#qa .part-body ul.faq li { display: flex; background-color: white; padding: 32px 24px; }

#qa .part-body ul.faq li[grayBack] { background-color: #eee; }

#qa .part-body ul.faq li:nth-child(odd) { padding-bottom: 0; }

#qa .part-body ul.faq li:first-child { border-radius: 16px 16px 0 0; }

#qa .part-body ul.faq li:last-child { border-radius: 0 0 16px 16px; }

#qa .part-body ul.faq li:before { margin-left: 0; margin-right: 1rem; }

#qa .part-body ul.faq li.qus:before { content: "Q"; background-color: var(--third-color); }

#qa .part-body ul.faq li.ans:before { content: "A"; background-color: var(--first-color); }

#qa .part-body ul.faq li.qus:before, #qa .part-body ul.faq li.ans:before { width: 2em; height: 2em; display: inline-block; text-align: center; vertical-align: middle; border-radius: 4px; color: white; aspect-ratio: 1 / 1; font-size: 20px; }

/*end_FAQ*/
/*--------------------------
Form
---------------------------------*/
.part-form { margin: 40px 0 80px; }

.part-form form.form { background: #FFF; padding: 32px 40px; border-radius: 16px; }

.part-form .form-row { display: flex; padding: 24px; border-bottom: 1px solid #CCC; }

.part-form .form-row .form-label { width: 33%; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }

.part-form .form-row .form-label label { width: 80%; }

.part-form .form-row .form-inputs { width: 67%; }

.part-form .form-row .form-inputs .input-text, .part-form .form-row .form-inputs .input-email, .part-form .form-row .form-inputs .input-textarea { width: 100%; padding: 4px; font-family: inherit; font-size: var(--font-M); }

.part-form .form-row .form-inputs button { width: 30%; padding: 16px; margin: 0 auto; display: block; font-weight: bold; background: var(--first-color); color: #FFF; border: none; border: 2px solid var(--first-color); font-size: var(--font-M); transition: all 0.3s; }

.part-form .form-row .form-inputs button:hover { cursor: pointer; background: #FFF; color: var(--first-color); }

.part-form .form-row.form-row-action { width: 100%; border-bottom: unset; }

.part-form .form-row.form-row-action .form-inputs { width: 100%; }

.part-form .form-must span.must { width: fit-content; background: var(--third-color); color: #FFF; display: inline-block; padding: 4px; text-align: center; line-height: 16px; font-size: var(--font-S); }

.form_h4 h4.headline { margin: 56px auto 16px; font-size: var(--font-XL); color: #333; }

/*-------------------------------------------
List
-------------------------------------------*/
/****** noticelist ******/
ol.pp { margin-top: 1.5em; padding-left: 2em; }

ol.pp li { list-style-type: decimal; font-size: var(--font-S); line-height: 1.6; margin-bottom: 12px; }

/****** notes ******/
ul.notes { list-style-type: none; margin-left: 1em; font-size: var(--font-S); }

ul.notes li { font-size: var(--font-S); line-height: 1.6; margin-bottom: 12px; }

ul.notes li::before { content: "◆"; margin-left: -1em; }

/****** ps ******/
ul.ps { list-style-type: none; margin-left: 1em; margin-bottom: 20px; font-size: var(--font-S); }

ul.ps li::before { content: "※"; margin-left: -1em; }

/****** maru ******/
ul.maru { list-style-type: none; margin-left: 1em; font-size: var(--font-S); }

ul.maru li::before { content: "●"; margin-left: -1em; }

/*------------------
footer
------------------------*/
footer { background: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/footer_mini.png); background-repeat: no-repeat; background-position: top center; padding: 360px 80px 0; }

footer .text p { color: white; text-align: center; font-size: var(--font-S); padding-bottom: 16px; padding-top: 80px; }

footer .part-columns .columns.columns-3 { display: flex; justify-content: space-between; /*height: 800px;*/ padding: 0; align-items: center; }

footer .part-columns .columns.columns-3 .columns-column { width: auto; }

footer .part-columns .columns.columns-3 nav ul.menu-list li.menu-item { line-height: 3rem; }

footer .part-columns .columns.columns-3 nav ul.menu-list li.menu-item a { color: white; }

footer .part-columns .columns.columns-3 nav ul.menu-list li.menu-item a:hover { color: var(--first-color); }

footer .part-columns .columns.columns-3 .QRcode .image { text-align: right; }

footer .part-columns .columns.columns-3 .logo .part .image { text-align: center; }

footer .part-columns .columns.columns-3 .logo .part img { min-width: 33vw; }

/*---------------
Other
------------------*/
body.notfound main { padding-top: 24vh; padding-bottom: 120px; }

/*---------------
フローティングメニュー下（モバイルのみ）
------------------*/
a.SPbanner { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.5s all; background-color: rgba(255, 67, 23, 0.95); width: 100%; height: 64px; padding: 8px 0; z-index: 99; font-size: var(--font-L); font-family: var(--h-font-fam); color: white; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; }

a.SPbanner:hover { background-color: rgba(0, 179, 227, 0.9); color: white; letter-spacing: 0.25em; }

/*-------------
バッジ非表示
---------------*/
.recaptcha_policy { padding: 0; margin: 0; text-align: center; font-size: 11px !important; color: #444 !important; }

.recaptcha_policy a { font-size: 11px !important; color: #111 !important; }

.grecaptcha-badge { visibility: hidden; }

/** レスポンシブ **/
@media screen and (max-width: 1330px) { .block-top-wrap.block-wrap { background-size: contain; } #about .columns-column ul.about_col3 { flex-wrap: wrap-reverse; } #about .columns-column ul.about_col3 li p { width: 320px; height: 320px; } }

/*------------------------
@media screen and (max-width:1040px)
------------------------*/
/*header*/
@media screen and (max-width: 1040px) { header { /*end_columns*/ /*end_toggle*/ } header .part-columns { /*end_menu*/ } header .part-columns .columns.columns-3 { align-items: flex-start; flex-wrap: wrap; } header .part-columns .columns.columns-3 .columns-column.logo { order: 1; } header .part-columns .columns.columns-3 .columns-column.button { order: 2; } header .part-columns .columns.columns-3 .columns-column.menu { order: 3; } header .part-columns .columns.columns-3 .columns-column.menu { display: none; order: 3; /*end_ul*/ } header .part-columns .columns.columns-3 .columns-column.menu ul.menu-list { flex-wrap: wrap; gap: 0.5em; padding-bottom: 8px; padding-top: 8px; } header .part-columns .columns.columns-3 .columns-column.menu ul.menu-list li { width: 49%; text-align: center; } header .part-columns .columns.columns-3 .columns-column.menu ul.menu-list li.start { width: 100%; padding: 0 4vw; } header .part-columns .columns.columns-3 .columns-column.menu ul.menu-list li a { display: block; } header .part-columns.scrollhead #menu-sp-button-toggle svg { fill: var(--text-color); } header #menu-sp-button-toggle { display: block; cursor: pointer; width: fit-content; flex-grow: unset; } header #menu-sp-button-toggle svg { display: block; margin-left: auto; fill: #FFF; } header #menu-sp-button-toggle svg.close { display: none; } /*end_header*/ .menu-sp-active header .columns-column.menu { display: block !important; } main .part-columns .part-body .part-body { padding-left: 4vw; padding-right: 4vw; } main #about.part-columns .col3 .part-body { padding-left: 0; padding-right: 0; } #joinus .part-body { padding: 0 4vw; } #topics .content-fields { width: 90%; } #topics .content-fields .content-field-columns { flex-direction: column; } #topics .content-fields .content-field-columns .topics_date { width: 100%; } #topics .content-fields .content-field-columns .topics_text { width: 100%; } #qa ul.faq { width: 90%; margin: 0 auto; } #about .columns-column { background-size: 80%; background-position: top; } #howto .columns-column { background-size: 80%; } .contents_howto li .counter { flex-direction: column; justify-content: center; } .contents_howto li .counter h5 { padding-left: 0; margin-top: 8px; } #price .priceTable::before { width: 140px; height: 140px; top: -51px; right: -76px; } #price .priceTable-body .priceTable-row > div.arrow::before { width: 120px; } #price .priceTable-body .priceTable-row > div.arrow::after { transform: rotate(35deg) translate(30px, calc(-50% - 27px)); } #price .priceTable-header .priceTable-row > div { font-size: var(--font-L); } #price table tbody tr td.allow::before { width: 120px; } #price table tbody tr td.allow::after { transform: rotate(35deg) translate(30px, calc(-50% - 27px)); } #price table thead th { font-size: var(--font-L); } #price table thead th.stamp_base::after { width: 140px; height: 140px; top: -51px; right: -76px; } footer { padding-top: 240px; background-size: auto 100%; } footer .block-wrap { /*backdrop-filter: blur(2px);*/ } footer .part-columns .columns.columns-3 { flex-direction: column; height: auto; padding: 80px 0 20px; } footer .part-columns .columns.columns-3 .columns-column { width: auto; } footer .part-columns .columns.columns-3 nav ul.menu-list { display: flex; flex-wrap: wrap; gap: 2%; justify-content: space-between; } footer .part-columns .columns.columns-3 nav ul.menu-list li.menu-item { width: 48%; text-align: center; } footer .part-columns .columns.columns-3 nav ul.menu-list li.menu-item a { color: var(--text-color); } /*end_footer*/ /* 子ページ */ .part.howto_block .columns.columns-4 { flex-wrap: wrap; } .part.howto_block .columns.columns-4 .columns-column { width: 50%; } .part-body .qa-1 { width: 100%; } #joinus .joinus_step .part-body .midashi h5 { width: 100%; } /* 子ページend */ }

/*end_1024px;*/
/*------------------------
@media screen and (max-width:768px)
------------------------*/
@media screen and (max-width: 768px) { #howto .part-columns .columns, #price .part-columns .columns, #store .part-columns .columns, #qa .part-columns .columns { padding-top: 40px; } /* About */ #about .columns-column ul.about_col3 { padding-bottom: 40px; margin-top: 24px; } #about .columns-column ul.about_col3 li p { font-size: var(--font-S); width: 200px; height: 200px; } #about .columns-column ul.about_col3 li p strong { font-size: var(--font-M); } /* how to */ #howto .columns-column { background-size: 780px; background-position: center; padding-bottom: 40px; } #howto .columns-column .content_howto li { width: 90%; } /* price */ #price .priceTable::after { right: -12vw; width: 120px; } #price .priceTable-body .priceTable-row > div.arrow::before { width: 40px; } #price .priceTable-body .priceTable-row > div.arrow::after { width: 12px; transform: rotate(35deg) translate(4px, calc(-50% - 6px)); } #price table thead th.stamp_base::after { right: -12vw; width: 120px; } #price table tbody tr td.allow::before { width: 40px; } #price table tbody tr td.allow::after { width: 12px; transform: rotate(35deg) translate(4px, calc(-50% - 6px)); } footer { padding: 120px 4vw 0; background-position: bottom left; /*background-size:960px auto;*/ } footer .part-columns .columns.columns-3 { flex-direction: column-reverse; background: rgba(255, 255, 255, 0.3); padding: 20px 0 20px; width: 90vw; backdrop-filter: blur(3px); align-items: center; margin: 64px auto 24px; } footer .logo img { max-width: 240px; } footer .qr { display: none; } footer .text p { padding-top: 40px; } /* 子ページ */ .columns-column .qa-1 { max-width: 100%; } .part.howto_block.howto_captcha { padding: 0 32px; } .part.howto_block.howto_captcha .columns-column { width: 50%; } .part.howto_block.howto_captcha .columns-column .column-parts { width: 100%; margin: 24px auto 0; } .part.howto_block.howto_captcha .columns-column .column-parts .part-image::after { right: -10px; } .block-main-body .howto_block.howto_block_br_top p { font-size: var(--font-XL); } #joinus .joinus_step .part-body .col2 { flex-direction: column; } #joinus .joinus_step .part-body a.btn4 { width: 100%; } /* 子ページend */ /*form*/ .part-form form.form { padding: 4vw; } .part-form .form-row { flex-direction: column; padding: 16px; } .part-form .form-row .form-label { flex-direction: row; justify-content: flex-start; padding-bottom: 8px; gap: 0.5em; } .part-form .form-row .form-label, .part-form .form-row .form-inputs { width: 100%; padding-top: 8px; padding-bottom: 16px; } .part-form .form-row .form-inputs button { width: 50%; } }

/*max768px end*/
/*----------------
@media screen and (max-width:600px)
----------------*/
@media screen and (max-width: 600px) { header .part-columns .columns.columns-3 .columns-column.menu ul.menu-list li { width: 48%; padding: 8px; } .layout-wrapper h3 { margin-bottom: 32px; font-size: var(--font-LL); } /* topics */ #topics .content-fields { width: 90%; margin: 0 auto 16px; padding: 16px 32px; } /* About */ #about h4.headline, #about .text { margin-bottom: 24px; font-size: var(--font-L); } #about h4.headline span, #about .text span { display: inline-block; } #about { background-size: 100%; background-position: top; } #about .columns-column { background-position: top 0 center; background-size: contain; } #about .columns-column ul.about_col3 li:last-child { margin-bottom: 0; } #about .columns-column ul.about_col3 li p { margin-top: 8px; width: 180px; height: 180px; padding: 8px; } #about .columns-column ul.about_col3 li img { width: 64%; margin-bottom: 24px; } /* how to */ #howto::before { height: 56px; } #howto .columns-column { background: none; } .contents_howto ol.flow li { flex-direction: column; width: 100%; padding-right: 0; align-items: center; } .contents_howto ol.flow li .counter { align-items: center; flex-direction: row; width: 100%; gap: 1em; padding: 16px 24px; border-radius: 16px 16px 0 0; } .contents_howto ol.flow li .counter h4 { padding-top: 0px; padding-left: 0; } .contents_howto ol.flow li > p { flex-direction: column; align-items: center; width: 100%; } .contents_howto ol.flow li > .howtoImage { width: 200px; } /* Price */ #price { padding-top: 32px; background-size: 100%; margin-top: -1px; } #price::before { height: 60px; } #price .priceTable { width: 100%; } #price .priceTable::before { top: -4vh; right: -4vw; width: 72px; height: 72px; } #price .priceTable-header .priceTable-row > div { font-size: var(--font-M); } #price .priceTable-body .priceTable-row > div.arrow::before { width: 40px; } #price .priceTable-body .priceTable-row > div.arrow::after { width: 12px; transform: rotate(35deg) translate(4px, calc(-50% - 6px)); } #price table { width: 90%; } #price table thead th { font-size: var(--font-M); } #price table thead th.stamp_base::after { top: -4vh; right: -8vw; width: 72px; height: 72px; } #price table tbody tr td.allow::after { width: 12px; transform: rotate(35deg) translate(4px, calc(-50% - 6px)); } #price table tbody tr td.allow::before { width: 40px; } /* Stores */ #store { padding-top: 40px; background-size: 100%; } #store::before { height: 40px; } #store .grid-image { background-color: white; } #store .grid-image img { position: relative; } #store .grid-image a:hover { opacity: 0.7; } #store .storeLinkBanner .grid-items { flex-direction: column; justify-content: center; align-items: center; gap: 1; } #store .storeLinkBanner .grid-items.grid-items-2 .grid-item { width: 92%; } #store .store_banner p.btn2 { margin-top: 40px; width: 90%; } #store .store_banner p.btn2:before { border-width: 56px 0px 56px 24px; } #store .store_banner p.btn2:after { border-width: 56px 24px 56px 0px; } #store .store_banner p.btn2 a { display: block; padding: 24px 56px; line-height: 24px; width: 100%; } #store .store_banner p.btn2 a:after { right: 3rem; } #store .store_banner p.btn2 a span { margin-left: 0; display: block; width: 100%; } /* Q&A */ #qa { background-size: 100%; margin-top: -1px; } #qa::before { height: 60px; } #qa ul.faq { width: 100%; margin: 0 auto; } /* footer */ footer { background-size: auto 100%; padding: 96px 0 0 0; background-position: bottom; } footer .block-wrap { backdrop-filter: unset; } footer .part-columns .columns.columns-3 { /*flex-direction: column;*/ height: auto; padding-top: 24px; } footer .part-columns .columns.columns-3 nav.menu { margin-bottom: 32px; } footer .part-columns .columns.columns-3 nav.menu ul.menu-list li.menu-item { line-height: 2rem; text-align: center; font-weight: 500; } footer .part-columns .columns.columns-3 nav.menu ul.menu-list li.menu-item a { color: #333; } footer .part-columns .columns.columns-3 nav.menu ul.menu-list li.menu-item a:hover { color: var(--third-color); } footer .part-columns .columns.columns-3 .QRcode .image { text-align: center; width: 70%; margin: 0 auto; } /* 子ページ */ .columns-column .qa-1 { max-width: 100%; } .part.howto_block.howto_captcha { padding: 0 32px; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column { width: 100%; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column .column-parts { width: 90%; margin: 24px auto 48px; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column .column-parts .part-image::after { content: none; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column .column-parts .part-text { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column .column-parts .part-text::after { content: ''; width: 32px; height: 32px; border: 0; border-top: solid 2px var(--first-color); border-right: solid 2px var(--first-color); transform: rotate(135deg); position: absolute; margin: 0 auto; bottom: -32px; } .part.howto_block.howto_captcha .columns.columns-4 .columns-column .column-parts .part-text.noArrow_sp::after { content: none; } #joinus .joinus_step a.btn4 { padding: 8px 16px; } /* 子ページend */ }

/*max600px end*/
@media screen and (max-width: 400px) { #price .priceTable::before { top: -6vh; right: -4vw; width: 60px; height: 60px; } #price table thead th.stamp_base::after { top: -5vh; right: -8vw; width: 60px; height: 60px; } #about .columns-column ul.about_col3 li p { width: 176px; height: 176px; } }

/** common_child **/
.layout-wrapper h4 { text-align: center; font-size: var(--font-LL); margin-bottom: 24px; font-weight: 500; letter-spacing: 0.1em; color: var(--first-color); }

/* topBanner */
.topImg .image::after { width: 100%; height: 100%; content: ""; background: url(https://d3inqn3ek85etk.cloudfront.net/resource/59/波cream2.svg); display: block; position: absolute; bottom: -1px; background-position: bottom; background-repeat: no-repeat; z-index: 999; background-size: 100% auto; }

.topImg .image { position: relative; }

.columns.columns-1 .comingSoon { text-align: center; }

/*------------------
ご利用方法
------------------*/
.contents_howto_child { margin-bottom: 120px; }

.howto_block { width: 92%; max-width: 1270px; margin: 0 auto; background-color: white; padding: 16px 24px; border: solid var(--first-color); border-bottom: none; border-top: none; }

.howto_block .part-body { display: flex; align-items: baseline; }

.howto_block.howto_block_br_top { border-radius: 40px 40px 0 0; background-color: var(--first-color); color: white; margin-top: 48px; }

.howto_block.howto_block_br_top p { font-size: 56px; }

.howto_block.howto_block_br_top p::after { content: "."; margin-right: 0.4em; font-size: var(--font-LL); }

.howto_block.howto_block_br_top h5 { font-size: var(--font-LL); }

.howto_block.howto_block_br_top h5 span { font-size: var(--font-M); display: inline-block; }

.howto_block.howto_block_br_bottom { border-radius: 0 0 40px 40px; padding-bottom: 64px; border-bottom: solid var(--first-color); }

.howto_block.howto_captcha .column-parts { width: 70%; margin: 56px auto 0; }

.howto_block.howto_captcha .text { font-size: var(--font-S); margin-top: 1em; }

.howto_block.howto_captcha .part-image { position: relative; border: 4px solid #ccc; border-radius: 4px; }

.howto_block.howto_captcha .part-image::after { content: ''; width: 32px; height: 32px; border: 0; border-top: solid 2px var(--first-color); border-right: solid 2px var(--first-color); transform: rotate(45deg); position: absolute; top: 0; right: -59px; bottom: 0; margin: auto; }

.howto_block.howto_captcha .part-image.noArrow::after { content: none; }

/* ご利用方法 end */
/*------------------
よくある質問
------------------*/
.qa-1 { max-width: 1270px; width: 90%; margin: 0 auto 8px; border-radius: 8px; background-color: white; }

.qa-1 summary { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em 1em 3em; color: #333333; font-weight: 600; cursor: pointer; margin-left: 1em; }

.qa-1 summary::before { background-color: var(--third-color); content: "Q"; }

.qa-1 summary::after { transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #333333b3; border-right: 3px solid #333333b3; content: ''; transition: transform .5s; }

.qa-1 summary::before, .qa-1 p::before { position: absolute; left: 0.5em; font-size: var(--font-M); color: white; width: 2em; height: 2em; border-radius: 4px; display: inline-block; text-align: center; vertical-align: middle; aspect-ratio: 1 / 1; font-weight: 500; }

.qa-1[open] summary::after { transform: rotate(225deg); }

.qa-1 p { position: relative; transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 3em 1.5em; color: #333; transition: transform .5s, opacity .5s; margin-left: 1em; }

.qa-1 p::before { background-color: var(--first-color); content: "A"; }

.qa-1[open] p { transform: none; opacity: 1; }

/* よくある質問 end */
/*------------------
加盟店一覧
------------------*/
.part.part-contents.vue-part-contents { margin-bottom: 80px; }

.contents.contents--shop-info { width: 92%; max-width: 1270px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: 32px; grid-row-gap: 32px; margin: 0px auto; color: #333; /*カテゴリタグ*/ /*map & URL*/ }

@media screen and (max-width: 1040px) { .contents.contents--shop-info { grid-template-columns: repeat(2, 1fr); } }

@media screen and (max-width: 600px) { .contents.contents--shop-info { grid-template-columns: repeat(1, 1fr); } }

.contents.contents--shop-info .content-field--taxonomies-list.content-field--taxonomies { display: none; /* カテゴリタグ非表示に カテゴリ決定後再表示予定 */ }

.contents.contents--shop-info .content-field--taxonomies-list.content-field--taxonomies ul.taxonomies-parents { display: flex; gap: 0.5em; padding: 12px 16px 0; flex-wrap: wrap; font-size: var(--font-S); }

.contents.contents--shop-info .content-field--taxonomies-list.content-field--taxonomies ul.taxonomies-parents li { background: #eee; padding: 0.25em 0.6em; line-height: 1em; border-radius: 16px; }

.contents.contents--shop-info .content { background-color: white; border-radius: 16px; border: 1px solid #eee; display: grid; grid-template-rows: subgrid; grid-row: span 9; grid-column-gap: 0px; grid-row-gap: 0px; font-size: var(--font-S); position: relative; }

.contents.contents--shop-info .content .content-fields { display: contents; }

.contents.contents--shop-info .content .content-fields .none { display: none !important; }

.contents.contents--shop-info .content .content-field--shop-img.content-field--resource_file img { aspect-ratio: 4/3; object-fit: cover; overflow: hidden; border-radius: 16px 16px 0 0; object-position: center; width: 100%; }

.contents.contents--shop-info .content .content-field--shop-name.content-field--text { border-bottom: 1px solid #333; line-height: 1.5; margin-top: 8px; font-weight: bold; font-size: var(--font-M); }

.contents.contents--shop-info .content .content-field--tel.content-field--text { display: flex; }

.contents.contents--shop-info .content .content-field--tel.content-field--text::before { content: "\f095"; font-family: "Font Awesome 5 Free"; font-weight: bold; display: inline-block; margin-right: 0.5em; transform: scaleX(-1); /* なぜか反転したので修正中 */ }

.contents.contents--shop-info .content .content-field--tel.content-field--text .content-field--text::before { color: var(--first-color); }

.contents.contents--shop-info .content .content-field--business-hours.content-field--textarea { display: flex; }

.contents.contents--shop-info .content .content-field--business-hours.content-field--textarea::before { content: "\f017"; font-family: "Font Awesome 5 Free"; font-weight: bold; display: inline-block; margin-right: 0.5em; }

.contents.contents--shop-info .content .content-field--regular-holiday.content-field--text { display: flex; }

.contents.contents--shop-info .content .content-field--regular-holiday.content-field--text::before { content: "定休日"; font-family: "Font Awesome 5 Free"; font-weight: bold; display: inline-block; margin-right: 0.5em; }

.contents.contents--shop-info .content .content-field--text, .contents.contents--shop-info .content .content-field--textarea { margin: 0 16px 8px; }

.contents.contents--shop-info .content-field-columns { gap: 0.75em; padding: 16px 2%; position: absolute; left: 0; bottom: 0; width: 100%; }

.contents.contents--shop-info .content-field-columns .content-field-columns-column.website, .contents.contents--shop-info .content-field-columns .content-field-columns-column.map { width: 50%; }

.contents.contents--shop-info .content-field-columns .content-field-columns-column.website a, .contents.contents--shop-info .content-field-columns .content-field-columns-column.map a { display: flex; justify-content: center; line-height: 1; padding: 8px; text-align: center; font-size: var(--font-S); border-radius: 20px; color: #FFF; }

.contents.contents--shop-info .content-field-columns .content-field-columns-column.website a:hover, .contents.contents--shop-info .content-field-columns .content-field-columns-column.map a:hover { background-color: var(--first-color); }

.contents.contents--shop-info .content-field-columns .content-field-columns-column.website a::before, .contents.contents--shop-info .content-field-columns .content-field-columns-column.map a::before { font-family: var(--icon); font-weight: bold; margin-right: 0.5em; }

.contents.contents--shop-info .content-field-columns .map a { background: var(--fifth-color); }

.contents.contents--shop-info .content-field-columns .map a::before { content: "\f3c5"; }

.contents.contents--shop-info .content-field-columns .website a { background: var(--fourth-color); }

.contents.contents--shop-info .content-field-columns .website a::before { content: "\f0ac"; }

/* h4見出し */
.stay_midasi h4.headline::before { content: "\f236"; font-family: "Font Awesome 5 Free"; font-weight: bold; }

.eat_midasi h4.headline::before { content: "\f2e7"; font-family: "Font Awesome 5 Free"; font-weight: bold; }

/* 加盟店一覧 end */
/*コンテンツ詳細*/
.topics_detail .content-field-datetime { text-align: right; color: #666; font-size: var(--font-S); padding: 16px 0; }

.topics_detail .part-sys-content-field--image { margin-bottom: 40px; }

.topics_detail .part-sys-content-field--editor { margin: 0px 0px 80px; }

/*コンテンツ一覧*/
.topics_archive { /*ページング*/ }

.topics_archive .part-sys .sys-contents--topics { /*background:#FFF; padding: 24px 40px;*/ }

.topics_archive .part-sys .content { padding: 24px; background: #FFF; border-radius: 24px; margin-bottom: 40px; }

.topics_archive .part-sys .content-field--updated_at.content-field--datetime { font-size: var(--font-S); font-weight: 800; color: #666; }

.topics_archive .part-sys .content-field-columns { /* gap:1em; */ }

.topics_archive .part-sys .content-field-columns .content-field-columns-column { /* flex-grow:unset; */ }

.topics_archive .part-sys .content-field-columns .content-field-columns-column .content-field--image { max-width: 240px; }

.topics_archive .part-sys .content-field-columns .content-field-columns-column .content-field--image img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }

.topics_archive .part-sys .content-field-columns .content-field-columns-column .content-field--textarea, .topics_archive .part-sys .content-field-columns .content-field-columns-column .content-field--text { padding: 0 16px; }

.topics_archive .part-sys .content-field-columns .content-field-columns-column .content-field--textarea { font-size: var(--font-S); line-height: 1.5; }

.topics_archive .part-sys .content-field-columns .content-field-columns-column:has(.imgnone) { display: none; }

.topics_archive ul.pages-list { display: flex; justify-content: center; gap: 1em; }

.topics_archive ul.pages-list li.pages-page.pages-current a { display: block; padding: 16px; border: 1px solid #DDD; border-radius: 8px; line-height: 1; background: #FFF; color: var(--first-color); }

.topics_archive ul.pages-list li.pages-page.pages-current a:hover { background: var(--first-color); color: #FFF; }

/*end_topics_archive*/
.layout-wrapper .topics_archive h4 { font-size: var(--font-L); text-align: left; margin-bottom: 0; }

.layout-wrapper .topics_archive h4 a { color: var(--first-color); }

.layout-wrapper .topics_archive h4 a:hover { color: var(--third-color); }

/*------------------
加盟店募集
------------------*/
#joinus { max-width: 1270px; margin: 0 auto; width: 100%; /* お問い合わせこちら */ /* 初期導入費用・換金手数料無料 */ /* STEP1～3 */ }

#joinus ul.ps { margin-bottom: 0; }

#joinus h6 { font-weight: 500; text-align: center; }

#joinus .part-columns .columns .columns-column { max-width: 1270px; width: 100%; }

#joinus .envelope { background-color: white; text-align: center; padding: 56px 32px; border-radius: 24px; border: 2px solid #eee; }

#joinus .envelope p { margin-bottom: 24px; font-size: var(--font-L); }

#joinus .envelope p.mail span { font-weight: 600; margin-right: 0.5em; }

#joinus .envelope a.tel { font-size: var(--font-XL); color: var(--third-color); font-weight: bold; }

#joinus .envelope a.tel:hover { color: var(--highlight-color); }

#joinus .envelope a.tel::before { content: "\f095"; font-family: "Font Awesome 5 Free"; font-weight: bold; display: inline-block; margin-right: 0.3em; transform: scaleX(-1); /* なぜか反転したので修正中 */ }

#joinus .envelope .btn a { max-width: 480px; padding: 8px 24px; }

#joinus .envelope p.time { margin-top: 24px; }

#joinus .envelope p.time span { font-weight: bold; display: inline-block; margin-right: 0.5em; }

#joinus .envelope h5 { font-size: var(--font-LL); font-weight: 500; }

#joinus a.btn3 p::after, #joinus a.btn4 p::after, #joinus a.btn5 p::after { content: "\f56d"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-left: 0.3em; }

#joinus a.btn3 p::after { content: "\f019"; }

#joinus .joinus_about { background: var(--fourth-color); margin: 0 auto 56px; color: white; border-radius: 16px; padding: 24px 2vw; text-align: center; }

#joinus .joinus_about h4 { color: var(--second-color); margin-bottom: 8px; }

#joinus .joinus_about a.btn5 { background: var(--second-color); border: 2px solid var(--second-color); max-width: 480px; display: block; padding: 8px 24px; margin: 24px auto 0; color: var(--fifth-color); text-align: center; border-radius: 999px; }

#joinus .joinus_about a.btn5:hover { background: transparent; color: var(--second-color); }

#joinus .joinus_step { background-color: white; margin: 0 auto; padding: 36px 2vw; border: 2px solid #eee; border-top: none; border-bottom: none; }

#joinus .joinus_step.part.part-gallery.part-gallery-grid { padding: 0 2vw; }

#joinus .joinus_step .midashi { text-align: center; }

#joinus .joinus_step .midashi h5 { font-size: var(--font-L); color: var(--first-color); border-bottom: 2px solid #eee; padding-bottom: 16px; width: 80%; margin: 16px auto 72px; }

#joinus .joinus_step .midashi .circle { line-height: 0.8; background-color: #c3e5f4; display: inline-block; width: 80px; height: 80px; border-radius: 999px; align-items: center; padding: 8px; color: var(--first-color); font-weight: 600; }

#joinus .joinus_step .midashi .circle span { font-size: var(--font-XL); display: block; }

#joinus .joinus_step .midashi .circle span.counter_step { font-size: var(--font-S); padding: 8px; }

#joinus .joinus_step ul.maru2 { font-weight: 500; font-size: var(--font-L); margin-bottom: 8px; display: flex; }

#joinus .joinus_step ul.maru2::before { content: "\f111"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: 0.3em; color: var(--fourth-color); }

#joinus .joinus_step ul.maru2.maru2-2 { margin-bottom: 0.8em; }

#joinus .joinus_step ul.maru2 ul.ps { margin-left: 0; }

#joinus .joinus_step ul.maru2 li p { font-size: var(--font-M); }

#joinus .joinus_step a.btn3 { background: white; max-width: 480px; display: block; padding: 8px 24px; margin: 24px auto 0; color: var(--first-color); text-align: center; border-radius: 999px; border: 2px solid var(--first-color); }

#joinus .joinus_step a.btn3:hover { color: white; background: var(--first-color); }

#joinus .joinus_step .envelope2 { background-color: #eee; padding: 24px 32px; margin: 72px auto; border-radius: 2px; }

#joinus .joinus_step a.btn4 { background-color: var(--fifth-color); padding: 8px 24px; max-width: 480px; border-radius: 999px; color: white; margin-top: 24px; text-align: center; border: 2px solid var(--fifth-color); width: 46%; }

#joinus .joinus_step a.btn4:hover { background-color: white; color: var(--fifth-color); }

#joinus .joinus_step .col2 { display: flex; justify-content: space-evenly; width: 100%; align-items: center; }

#joinus .joinus_step .step3 { text-align: center; }

#joinus .joinus_step .grid-comment { text-align: center; }

#joinus .joinus_step .seisan { background-color: #C3E5F4; padding: 16px 24px; border-radius: 2px; }

#joinus .joinus_step .seisan h6 { color: var(--fourth-color); font-size: var(--font-L); }

#joinus .joinus_step ol.count { counter-reset: number 0; }

#joinus .joinus_step ol.count li { text-indent: -1em; margin-left: 1em; }

#joinus .joinus_step ol.count li::before { counter-increment: number 1; /* number カウンタの増加数をセット */ content: counter(number) "."; /* 表示形式を指定 */ margin-right: 0.5em; }

#joinus .top_radius { border-radius: 16px 16px 0 0; border-top: 2px solid #eee; }

#joinus .bottom_radius { border-radius: 0 0 16px 16px; border-bottom: 2px solid #eee; margin-bottom: 56px; padding-bottom: 72px; }

#joinus .bottom_radius a.btn3 { margin-bottom: 72px; }