@charset "UTF-8";
/* ====================
reset, root
=================== */
:root {
    --a-duration: .3s;
    --c-black: #2a2c1c;
    --c-white: #fff;
    --c-orange: #ec6c00;
    --c-pink1: #e62e8b;
    --c-pink2: #f5abd1;
    --c-pink3: #fdeaf3;
    --c-green1: #c2d84e;
    --c-green2: #8ec43e;
    --c-lightblue: #7dccf3;
    --c-navy: #003f7e;
    --f-f: "Noto Sans JP", sans-serif;
    --f-w-bold: 700;
    --f-w-normal: 500;
    --f-lh-m: 1.8em;
    --f-lh-s: 1.5em;
    --f-ls: -0.03em;
    --f-s-h1: clamp(1.75rem, 1.179rem + 2.86vw, 2.25rem);
    --f-s-h2: clamp(1.5rem, 1.214rem + 1.43vw, 1.75rem);
    --f-s-h3: clamp(1.375rem, 1.232rem + 0.71vw, 1.5rem);
    --f-s-h4: clamp(1.25rem, 1.107rem + 0.71vw, 1.375rem);
    --f-s-h5: clamp(1.125rem, 0.982rem + 0.71vw, 1.25rem);
    --f-s-h6: clamp(1rem, 0.857rem + 0.71vw, 1.125rem);
    --f-s-p: clamp(0.875rem, 0.732rem + 0.71vw, 1rem);
    --f-s-small: clamp(0.75rem, 0.607rem + 0.71vw, 0.875rem);
    --g-5: 5px;
    --g-10: 10px;
    --g-20: clamp(0.938rem, 0.58rem + 1.79vw, 1.25rem);
    --g-30: clamp(1.25rem, 0.536rem + 3.57vw, 1.875rem);
    --g-40: clamp(1.875rem, 1.161rem + 3.57vw, 2.5rem);
    --g-60: clamp(2.5rem, 1.071rem + 7.14vw, 3.75rem);
    --w-s: 720px;
    --w-m: 900px;
    --w-l: 1200px;
}
body {
    color: var(--c-black);
	font-family: var(--f-f);
    font-size: var(--f-s-p);
	font-weight: var(--f-w-normal);
    letter-spacing: var(--f-ls);
	line-height: var(--f-lh-m);
}
hr {
    margin: 0;
    width: 100%;
}
/* ====================
アニメーション
==================== */
.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}
/* ====================
split, margin
==================== */
body{
    background-color: #fff6fa;
}
@media screen and (min-width: 600px) {
    body{
        display: grid;
        grid-template-columns: 1fr 480px 1fr;
    }
}

.column_canter {
    width: min(600px, 100%);
}
.column_left, .column_right{
    display: none;
}
@media screen and (min-width: 600px) {
    .column_left, .column_right{
        display: block;
    }
}

main {
    overflow: hidden;
}
main > *{
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
}

.has_padding {
    padding: var(--g-60) var(--g-30);
}
.has_head {
    padding-top: 0;
}

.split {
    --item: 2;
    display: grid;
    column-gap: calc((7 - var(--item))*1%);
    grid-template-columns: repeat(var(--item), 1fr);
}
.split > * {
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
}
/* ====================
font
==================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--f-w-bold);
	line-height: var(--f-lh-s);
    margin-bottom: 0;
    margin-top: 0;
    text-wrap: auto;
}
h1 {font-size: var(--f-s-h1);}
h2 {font-size: var(--f-s-h2);}
h3 {font-size: var(--f-s-h3);}
h4 {font-size: var(--f-s-h4);}
h5 {font-size: var(--f-s-h5);}
h6 {font-size: var(--f-s-h6);}
strong {font-weight: var(--f-w-bold);}
small {font-size: smaller;}
.navy{
    color: var(--c-navy);
}
.orange{
    color: var(--c-orange);
}
.text_center{
    text-align: center;
}
.fs-s{
    font-size: var(--f-s-small);
}
.lh-s {
    line-height: var(--f-lh-s);
}
.head_sec{
    margin-top: calc(var(--g-30) * -1);
    text-align: center;
    z-index: 1;
}
/* ====================
swiper
==================== */
.swiper{
    --swiper-navigation-sides-offset: calc(var(--g-30) * -1);
    --swiper-navigation-size: 36px;
    width: 100%;
}
.swiper-button-next, .swiper-button-prev {
    transition: var(--a-duration);
    &.swiper-button-disabled {
        opacity: 0;
    }
}
/* ====================
button
==================== */
.btn {
    display: flex;
    font-weight: var(--f-w-bold);
    flex-wrap: wrap;
    gap: var(--g-20);
    justify-content: center;
    margin-top: var(--g-10);
}
.btn a{
    align-items: center;
    border-radius: 1000px;
    color: var(--c-white);
    display: flex;
    gap: var(--g-5);
    justify-content: center;
    line-height: var(--f-lh-s);
    padding: 0.6lh 1.2lh;
    text-align: center;
    transition: var(--a-duration);
    width: min(100%, 17ic);
}
.btn.pink a {
    background-color: var(--c-pink1);
    font-size: var(--f-s-h6);
}
.btn.orange a {
    background-color: var(--c-orange);
    font-size: var(--f-s-h6);
}
.btn :is(a:hover, a:active, a:focus){
    scale: 1.1;
}
.btn a::after {
    background-color: var(--c-white);
    content: "";
    display: inline-block;
    height: 0.8em;
    -webkit-mask: url(../img/icon_arrow.svg) no-repeat center /contain;
    mask: url(../img/icon_arrow.svg) no-repeat center /contain;
    width: 0.8em;
}
.nav-global-inner .btn{
    margin-top: 0;
}
.nav-global-inner .btn a {
    background-color: var(--c-navy);
    min-width: auto;
    padding: 0.4lh 0;
}
.btn.pink a::after, .btn.orange a::after {
    rotate: -90deg;
    opacity: 0.8;
}
/* ====================
cta
==================== */
.cta {
    font-weight: var(--f-w-bold);

    font-weight: var(--f-w-bold);
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0px 0px 5px 0px #00000044;
}
.cta a{
    align-items: center;
    color: var(--c-white);
    display: flex;
    gap: var(--g-5);
    justify-content: center;
    line-height: var(--f-lh-s);
    padding: 0.6lh 1.2lh;
    text-align: center;
    transition: var(--a-duration);

    background-color: var(--c-pink1);
    font-size: var(--f-s-h6);
}
.cta a::after {
    background-color: var(--c-white);
    content: "";
    display: inline-block;
    height: 0.8em;
    -webkit-mask: url(../img/icon_arrow.svg) no-repeat center /contain;
    mask: url(../img/icon_arrow.svg) no-repeat center /contain;
    width: 0.8em;

    rotate: -90deg;
}
/* ====================
haader
==================== */
.header{
    background-color: var(--c-lightblue);
    padding-top: var(--g-30);
}
/* ====================
nav-global 
==================== */
.nav-global {
    background: var(--c-green1) url(../img/header_logo_back.png) no-repeat top /contain;
    font-size: var(--f-s-h6);
}
.nav-global-inner {
    column-gap: var(--g-10);
    row-gap: var(--g-10);
    padding: var(--g-40) var(--g-30);
}
/* ====================
intro
==================== */
.intro{
    background: var(--c-green1) url(../img/intro_back.png) no-repeat bottom /contain;
    color: var(--c-navy);
}
.intro h2{
    font-size: var(--f-s-h3);
}
.swiper_intro .swiper-wrapper {
    transition-timing-function: linear;
}
.swiper_intro .swiper-slide {
    height: 100%;
    width: 160px;  
}
/* ====================
gif
==================== */
.swiper_gif{
    margin: var(--g-30) calc(var(--g-30) * -1) 0;
    width: min(100vw, 540px);
}
.swiper_gif .swiper-wrapper {
    transition-timing-function: linear;
}
/* ====================
benefits
==================== */
.benefits{
    background-color: var(--c-pink3);
    gap: 0;
}
.benefits .inner {
    background-color: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: var(--g-20);
    padding: var(--g-40) var(--g-20);
}
.benefits .copy {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
    margin-bottom: var(--g-10);
}
.benefits .roulette_head {
    margin: 0 calc(var(--g-30) * -1);
}
.benefits .roulette_head + p {
    font-size: clamp(0.813rem, 0.25rem + 2.5vw, 1rem);
}
.benefits .frame {
    border-radius: 10px;
    padding: var(--g-20) var(--g-30);
    background-color: var(--c-pink3);
}
.benefits .frame h3 {
    color: var(--c-pink1);
    font-size: var(--f-s-h6);
    margin-bottom: var(--g-5);
}
.benefits hr {
    border-width: 0px;
    border-bottom: 4px dotted var(--c-pink2);
    margin: var(--g-20) 0;
}
.benefits .stamp {
    background-color: var(--c-orange);
    border-radius: var(--g-10);
    color: var(--c-white);
    font-size: var(--f-s-h6);
    margin-bottom: calc(var(--g-10) * -1);
    padding: var(--g-10);
    text-align: center;
}
/* ====================
joining
==================== */
.joining{
    background-color: var(--c-green1);
    gap: 0;
}
.swiper_joining{
    overflow: visible;
}
.swiper_joining .swiper-slide{
    background-color: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
    padding: var(--g-40) var(--g-30);
}
.swiper_joining h3{
    margin-bottom: var(--g-20);
}
.swiper_joining h4 {
    color: var(--c-pink1);
    font-size: var(--f-s-h4);
    margin-top: var(--g-10);
}
/* ====================
apply
==================== */
.apply{
    background-color: var(--c-green1);
    gap: 0;
}
/* ====================
spot
==================== */
.spot{
    background-color: var(--c-lightblue);
}
.spot h3{
    margin-top: var(--g-20);
}
.spot .shop {
    color: var(--c-white);
    font-size: var(--f-s-h6);
    font-weight: var(--f-w-bold);
    line-height: var(--f-lh-m);
    text-align: center;
}
.spot .btn.pink {
    margin-top: 0;
}
/* ====================
faq
==================== */
.faq{
    background-color: var(--c-pink3);
}

.list_faq {
    margin-top: var(--g-10);
}
.list_faq details:not(:first-of-type){
    padding-top: var(--g-20);
}
.list_faq summary::-webkit-details-marker {
    display: none;
}
.list_faq summary{
    align-items: center;
    background-color: var(--c-pink2);
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: var(--g-5);
    padding: var(--g-10) var(--g-20);
}
.list_faq .summary_inner{
    font-size: var(--f-s-default);
    font-weight: var(--f-w-bold);
}
.list_faq .icon {
    display: block;
    height: 1em;
    line-height: 1;
    rotate: 90deg;
    transition: var(--a-duration);
    transform-origin: center;
    width: 1em;
    &::before,
    &::after {
        content: "▲";
        position: absolute;
    }
}
.list_faq details.is-opened .icon {
    transform: rotate(90deg);
}
.list_faq .content {
    overflow: hidden;
}
.list_faq .content_inner {
    background-color: var(--c-white);
    padding: var(--g-20) var(--g-30);
    display: flex;
    flex-direction: column;
    gap: var(--g-10);
}
.list_faq .content_inner a{
    text-decoration: underline;
}
/* ====================
caution
==================== */
.caution{
    background-color: var(--c-white);
}
/* ====================
totop
==================== */
/* .totop{
    position: relative;
}
.totop a {
    left: 50%;
    max-width: 35%;
    position: absolute;
    top: 0;
    translate: -50% -75%;
    width: fit-content;
} */
/* ====================
footer
==================== */
.footer {
    background-color: var(--c-green2);
    color: var(--c-white);
    text-align: center;
    margin-bottom: var(--g-60);
}
.footer h1 {
    font-size: var(--f-s-h6);
}
.footer p {
    font-size: var(--f-s-h4);
    font-weight: var(--f-w-bold);
    margin: var(--g-10) 0;
}
.footer address{
    line-height: var(--f-lh-s);
}
.footer .copyright {
    display: block;
    font-size: var(--f-s-small);
    margin-top: var(--g-20);
}