@charset "utf-8";
/* CSS Document */
/* MPLUSRounded1c */
@font-face {
  font-family: "MPLUSRounded1c"; font-style: normal; font-weight: normal;
  src: url("../font/MPLUSRounded1c-Medium.ttf") format("opentype");
}
@font-face {
  font-family: "MPLUSRounded1c"; font-style: normal; font-weight: bold;
  src: url("../font/MPLUSRounded1c-ExtraBold.ttf") format("opentype");
}
@font-face {
  font-family: "MPLUSRounded1c"; font-style: normal; font-weight: 900;
  src: url("../font/MPLUSRounded1c-Black.ttf") format("opentype");
}

/*-----------------------------
 common
-------------------------------*/
html {
    scroll-behavior: smooth;
}
body{
    font: normal 16px 'M PLUS Rounded 1c',Noto Sans,arial,verdana,sans-serif;
    min-height: 100%;
    font-weight: 500;
    color: #502314;
    background: #f5ebdc;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    word-break: break-all;
}
.wrap-main-sp{
	max-width: 750px;
	margin: 0 auto;
}
.wrap-main-pc{
	/* max-width: 1500px; */
	margin: 0 auto;
}
.wrap-main-pc img, .wrap-main-sp img{
    display: block;
    margin: 0 auto;
    width: -webkit-fill-available;
}
.wrap-main-pc a img, .wrap-main-sp a img{
    cursor: pointer;
}
.overlaid{
	position: relative;
	z-index: 1;
}
.abs{
	position: absolute;
}
.header{
    display: flex;
    margin: 0 auto;
    padding: 2% 5%;
}
.header>div:last-of-type{
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}
.header-p{
    margin-right: 20px;
}
.wrap-notes{
    background-color: #2b0200;
    color: #f5ebdc;
    margin: 0 auto;
    padding: calc(65 / 750 * 100vw) calc(50 / 750 * 100vw);
    font-weight: 300;
    font-size: 2.2vw;
}
.wrap-notes a{
    text-decoration: none;
}


/***** footer *****/
/** Root Setting **/
:root {
  --font: "MPLUSRounded1c", "Pretendard", sans-serif;
  --bg-base: #F5EBDC;
  --bg-light: #FFFCF8;
  --normal: #502314;
  --normal-rgb: 80, 35, 20;
  --primary: #D62300;
  --sub: #6F6F6F;
  --light: #89665B;
  --border: rgba(80, 35, 20, 0.1);
}

/** Tag Default */
footer {font-family: var(--font); color: var(--normal); background-color: var(--bg-base);}
footer {font-weight: bold; color: var(--normal); word-break: break-all;}
footer a {display: inline-flex; align-items: center; justify-content: center; margin: 0; color: var(--normal); text-decoration: none; outline: none; cursor: pointer;}
button {margin: 0; padding: 0; font: normal 1em var(--font); font-weight: bold; color: var(--normal); vertical-align: middle; background: 0; border: none; overflow: visible; cursor: pointer;}
button:disabled {color: var(--disabled); background-color: rgba(var(--normal-rgb), 0.15); border: none; opacity: 1;}
button:active {outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}

.footer {padding: 0; font-weight: bold; font-size: 12px; color: rgba(137, 102, 91, 0.7); background: var(--bg-light);}
.footer a {font-weight: bold; color: rgba(137, 102, 91, 0.7);}
.footer a:hover {color: var(--normal);}
.footer a.txt_line {color: rgba(var(--normal-rgb), 0.7); text-decoration: underline;}

.footer_menu_list {padding: 20px 0; font-weight: bold; opacity: 0.7;}
.footer_menu_list > ul > li {position: relative; border-bottom: 1px solid var(--bg-base);}
.footer_menu_list button { text-align: left;}
.footer_menu_list a {font-weight: bold;}
.list_title {position: relative; display: flex; align-items: center; height: 53px; padding-left: 20px; color: #502314;}
.list_title span {flex: 1; font-size: .75rem !important;}
.list_title button {width: 50px; height: 100%; text-indent: -999rem;}
.list_title button::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.btn_acc::after {content: ""; position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; margin-top: -6px; background: url("../images/ico_darrow01.svg") no-repeat center center; transition: all .3s linear;}
.accordion_open .btn_acc::after {transform: rotate(180deg);}
.btn_move01 {background: none;}

.list_contents {height: 0; padding: 0; border-top: 1px solid var(--bg-base); opacity: 0; overflow: hidden; transition: all .3s linear;}
.list_contents button {width: 100%; padding: 10px 40px; color: var(--light);}
.accordion_open .list_contents {height: auto; padding: 10px 0; opacity: 1;}

.footer .container {position: relative; max-width: 1620px; margin: 0 auto; padding: 20px;}
.footer .terms_menu {margin-bottom: 40px; white-space: nowrap;}
.footer .terms_menu a {position: relative; display: block; margin-bottom: 16px;}
.footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}
.footer .terms_menu .btn_recruit {display: none;}


.footer .cont {position: relative;}
.logo {display: inline-block;  width: 100%; height: 12px; margin-bottom: 16px; text-indent: -999em; background: url("../images/bg_logo_b.svg") no-repeat left center; background-size: contain !important;}
.logo a {display: block;}
.footer .info {flex: 1; line-height: 1.1;}
.footer .info p:not(:last-child) {margin-bottom: 4px;}
.footer .info a {margin-left: 10px;}

.footer .link_area {display: flex; flex-direction: row; align-items: center; margin-top: 20px;}
.footer .link_area button {width: 24px; height: 24px;}
.footer .sns {display: flex; align-items: center;}
.footer .sns > * {margin-left: 16px;}
.footer .sns > *:first-child {margin-left: 0;}
.btn_sns_insta {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_instagram.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
.btn_sns_facebook {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_facebook.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
.btn_sns_x {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_x.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
.btn_sns_youtube {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_youtube.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
.btn_sns_tictok {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_tictok.svg") no-repeat center center; background-size: contain; border-radius: 30px;}

@media screen and (min-width: 640px) {
  .footer_menu_list .list_title {padding: 0 10px 0 30px;}
  .footer_menu_list .list_title .btn_acc::after {right: 30px;}
  .footer .container {padding: 20px 30px;}
  .footer .terms_menu {display: flex; margin-right: -20px; justify-content: flex-end;}
  .footer .terms_menu a {margin: 0; padding: 0 20px;}
  .footer .cont {position: relative; padding-right: 250px;}
  .footer h1 {margin-bottom: 10px;}
  .footer .logo {margin: 0;}
  .footer .link_area {position: absolute; right: 0; top: 50%; margin: -12px 0 0;}
  .footer .sns button {margin-left: 20px;}
}

@media screen and (min-width: 1024px) {
  .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap; align-items: center;}
  .footer .terms_menu a {position: relative; display: block; padding: 0 20px;}
  .footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}


  .footer_menu_list {display: none;}
  .footer .container {padding: 40px;}
  .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap;}
  .footer .terms_menu a {position: relative; display: flex; padding: 0 20px; align-items: center;}
  .footer .terms_menu a::before {display: none;}
  .footer .btn_recruit {display: flex; min-width: 95px; height: 34px; margin-left: auto; padding: 5px 38px 5px 12px; color: var(--normal); align-items: center; background: url("../images/ico_bt_link.svg") no-repeat right 12px center; background-color: rgba(var(--normal-rgb), 0.05); border-radius: 50px; opacity: 0.7;}


  .footer .cont {padding-right: 300px;}
  .footer h1 {margin-bottom: 20px;}
  .footer .logo {display: block; width: 200px; height: 24px;}
  .footer .info {line-height: 1.5;}
  .footer .info p:not(:last-child) {margin-bottom: 4px;}
  .footer .info a {margin-left: 10px;}

  .footer .link_area {top: auto; bottom: 0; margin: 0;}
  .footer .link_area button {width: 32px; height: 32px;}
  .footer .sns {display: flex; align-items: center;}
  .footer .sns button {margin-left: 30px;}
}

@media screen and (min-width: 750px) {
    .pc { display: block !important; }
    .sp { display: none !important; }
    .detail-btn-pc{
        padding: 15% 26%;
    }
    .wrap-notes{
        padding: calc(30 / 750 * 100vw) calc(86 / 750 * 100vw);
        font-size: 1.1vw;
    }
    .header-btn{
        width: 230px;
    }
    .wrap-top-pc{
        background-image: url(../images/img_pc_top_bg.svg);
        background-size:cover;
    }
    .pc-top-01{
        padding: calc(55 / 1280 * 100vw) calc(362.5 / 1280 * 100vw);
    }
    .pc-top-02{
        padding: 0 calc(160 / 1280 * 100vw) calc(75 / 1280 * 100vw) calc(160 / 1280 * 100vw);
    }
    .pc-top-comments{
        bottom: 8.5%;
        padding: 0 calc(475 / 1280 * 100vw) 0 calc(272 / 1280 * 100vw);
    }
    .wrap-reward-pc{
        background-image: url(../images/img_pc_reward_bg.svg);
        background-size: cover;
    }
    .pc-reward-01{
        padding: calc(117 / 1280 * 100vw) calc(238 / 1280 * 100vw) calc(218 / 1280 * 100vw) calc(238 / 1280 * 100vw);
    }
    .wrap-howto-pc{
        background-color: #d72300;
        background-size: cover;
    }
    .pc-howto-01{
        padding: calc(150 / 1280 * 100vw) calc(160 / 1280 * 100vw);
    }
    .wrap-thanks-pc{
        background-image: url(../images/img_pc_thanks_bg.svg);
        background-size: cover;
    }
    .pc-thanks-01{
        padding: calc(80 / 1280 * 100vw) calc(90 / 1280 * 100vw);
    }
    .pc-thanks-btn{
        padding: 0 calc(360 / 1280 * 100vw) calc(280 / 1280 * 100vw) calc(360 / 1280 * 100vw);
    }
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
    .header-logo img{
        width: calc(75 / 750 * 100vw);
    }
    .header-p{
        width: calc(140 / 750 * 100vw);
    }
    .header-btn{
        width: calc(230 / 750 * 100vw);
    }
    .header-p{
        margin-right: 0px;
    }
    .sp-top-comments{
        top: 80%;
        padding: 0 calc(200 / 750 * 100vw) 0 calc(100 / 750 * 100vw);
    }
    .sp-introduce-btn{
        top: 40%;
        padding: 0 calc(110 / 750 * 100vw);
    }
}