@charset "utf-8";
/*--基本--*/
:root{
	--font-size:18px;
	--max-width:1200px;
	--color: #000;/*文字色*/
	--color-hover: #FF3F8A;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:linear-gradient(90deg, #3AE5C3 0%, #0A89FF 90%);/*ボタンの色*/
  --btn-hover:linear-gradient(90deg, #0A89FF 0%, #3AE5C3 90%);/*ボタンの色:hover*/
  --btn-color:#323232;/*ボタンの文字色*/
  --btn-color-hover:#323232;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
  --tokyo:#FF3F8A;
  --tokyo-base:#FF91BC;
  --osaka:#009CB2;
  --osaka-base:#5DC2D0;
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:16px;
    }
}

@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
        --btn-max-w:100%;/*ボタンの最大幅*/
    }
}



.swiper-slide{border-radius: 10px; line-height: 0;overflow: hidden;}
.swiper-slide a{line-height: 0;}
/*---------
　Font
---------*/
/*Noto Sans Japanese・Noto Serif Japanese以外はここに記載。**/
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/*-----------

-----------*/
a.btn{border: none; width: 350px; color: #fff;line-height: 1; padding: 1em 10% 1em 1em; margin: 1em 0 0;clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);}
a.btn::after{content: "";background: url(../images/arrow_right.png) no-repeat; background-size: 100% auto;background-position: right center; border: none;width: 1.5em; height: 1em;clip-path:none; top: 35%; right: 10%}
a.btn:hover{color: #fff;}
a.btn:hover::after{content: "";background: url(../images/arrow_right.png) no-repeat; background-size: 100% auto;background-position: right center; border: none;width: 1.5em; height: 1em;clip-path:none}
/* a.btn::before{content: ""; display: block; background: #0A89FF; transform: skew(30deg); position: absolute; right: -15px; top: 0; width: 30px; height: 100%;} */
a.btn:hover::before{background:#3AE5C3;}

p a{color: #008CFF; text-decoration: underline;}
p a:hover{text-decoration: none;}

#mv,article{max-width: 2650px; width: 100%; margin: 0 auto;position: relative;}
article{ padding: 150px 0 0 0;}
article::after{content: ""; display: block; width: 100%; height: 200px;background: linear-gradient(-180deg, #fff 0%, #ffffff00 100%); position: absolute; left: 0; top: 0;z-index: -1;}

h2.flex{background: url(../images/ttl.svg) no-repeat; background-position: left center; padding: 0 0 0 5%;background-size: 4% auto; font-size: 2em; align-items: center; width: 95%;margin: 0 auto;}
h2 span{line-height: 1; display: inline-block;}
h2 .detail{font-size: .5em; margin-left: .5em;}
#campaign h2 .ttl{width: 30%;}
#sales h2 .ttl{width: 18%;}
#sns h2 .ttl{width: 35%;}

article h3{font-size: 3em;}
article p{font-size: 1.5em;}
article .wrap {border: 2px solid #3AE5C3; border-color:#3AE5C3 #3AE5C3 #35FF6E #35FF6E ; width: 95%; margin: 0 auto; border-radius: 50px; background: #fff;box-shadow: 0 4px 4px #7e7e7e3d; padding: 50px;}

article .caution{font-size: 1em; color: #9B9B9B; margin-top: 2em;}
article .caution li{text-indent: -1em; padding-left: 1em;}
article .caution li::before{content: "※";}

article hr{border: 3px dotted #8C8C8C; border-width: 3px 0 0 0; margin: 2em 0;}

section{margin-top: 200px;}
section:first-of-type{margin-top: 0;}
section .wrap .inner .img_cm{width: 30%;}
section .wrap .inner .text_area{width: calc(70% - 20px); margin-right: 20px;}

/*-----------
body
-----------*/
body{background: url(../images/bg.png) #fff;background-size: 30px auto;}


/*-----------
header
-----------*/
header p{width: 30%; max-width: 200px;}

/*-----------
mv
-----------*/
#mv {background: linear-gradient(107deg, #daffbc 2.32%, #97ffb5 20.63%, #f7f69e 51.63%, #c2f9ff 80.28%, #9dd6ff 100%);background-size: 200% 200%;animation: Grad 2s ease infinite;position: relative; overflow: hidden;}

#mv .bg::after,
#mv .bg::before{content: ""; display: block; left: 0; width: 100%; height: 50%; position: absolute;}
#mv .bg::after{background: url(../images/dot_top.png) no-repeat; background-position: center top; top: 0;}
#mv .bg::before{background: url(../images/dot_bottom.png) no-repeat; background-position: center bottom; bottom: 0;}

#mv .inner{background: url(../images/mv_bg.png); width: 100%;position: relative;z-index: 1; padding: 50px 0 0;}
#mv .inner::after{content: ""; display: block; width: 100%; height: 30%;background: linear-gradient(-180deg, #ffffff00 0%, #fff 100%); position: absolute; left: 0; bottom: 0;z-index: -1;}
#mv .circle{position: absolute; width: 150%;left: -25%; top: -75%;animation: Circle 100s infinite linear;}


@keyframes Grad {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

@keyframes Circle {
    0%{transform:rotate(0)}
    100%{transform:rotate(360deg)}
}

@keyframes bg-img{
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

#mv h1{width: 45%; margin: 0 auto; position: relative; z-index: 10;}
#mv .mv_img{margin-top: -15%;}

/*-----------
event
-----------*/
.event{width: 96%; margin: -10% auto 0;align-items: center;align-self: center; padding: 20px 0;}
.event .event_logo{width: 15%;}
.event .text_area{width: 45%; margin-left: 20px}
.event .btn{/* padding: .5em 0;  */margin: 5px 0 0;}

/*-----------
campaign
-----------*/
#campaign .wrap{margin-top: 50px;}
#campaign .wrap:first-of-type{margin-top: 1em;}
#campaign #cm3 .text_area.mae{width: 100%;}
#campaign #cm3 .text_area .btn{margin: 1em 0 0; padding-right: 5%;}


/*-----------
sales
-----------*/
#sales .wrap:first-of-type{margin-top: 1em;}

#sales .wrap .img_sales{width: 40%;}
#sales .wrap .text_area{width:calc(60% - 20px); margin-right: 20px;}
#sales .wrap .text_area .option{margin-top: 1em; font-size: 1.2em;}
#sales .inner.kizon{gap: 50px 20px;}
#sales .box{width: calc((100% / 2) - 20px);}
#sales .box img{/* width: 50%;  */display: block; margin: 0 auto;}
#sales .box img{filter: drop-shadow(5px 5px 0 #CF362A);}
#sales .box:nth-of-type(2) img{filter: drop-shadow(5px 5px 0 #69CDFB);}
#sales .box:nth-of-type(3) img{filter: drop-shadow(5px 5px 0 #E378F6);}
#sales .box:nth-of-type(4) img{filter: drop-shadow(5px 5px 0 #FFC340);}
#sales .box a.btn{margin: 1em auto 0;}
#sales .box h3{font-size: 1.2em; text-align: center; margin-top: .5em;}
#sales .box h3 + p{font-size: 1em; text-align: center;}
#sales .other{text-align: center; margin-bottom: 1em;}

/*-----------
sns
-----------*/
#sns a.btn::before{display: none;}
#sns a.btn::after{top:45%;}
#sns .inner{gap: 20px; width: 95%; margin: 1em auto 0;}
#sns a.btn {max-width: 100%; width: calc(50% - 10px); border-radius: 20px; padding: 1em; margin: 0; clip-path: none;}
#sns a.btn img{width: 18%; margin-right: 20px;}
#sns a.btn .flex{align-items: center;}
#sns a.btn .text_area{width: calc((82% - 20px) - 2em); text-align: left;}
#sns a.btn .text_area h5{font-size: 1.9vw;}
#sns a.btn .text_area p{font-size: 1.2vw; margin-top: .5em;}
#sns a.btn::after{right: 5%;}
/*-----------
aside
-----------*/
aside h5{font-size: 2em; text-align: center; margin-top: 5em;}
aside ul{justify-content:center;gap: 20px; width: calc((95px * 4) - 20px); margin: 0 auto;}
aside li{width: 60px; line-height: 1;}
aside li.border{border: 1px solid #ededed;border-radius: 1000px;}
aside li a{display: block}
aside .social .text{width: 100%;text-align: center;}
aside p{text-align: center; margin-top: 1em;}

/*-----------
footer
-----------*/
footer{border: none; margin-top: 100px;}
footer .logo_wrap a{margin-right: 0; max-width: 265px; width: 30%; line-height: 1;}
footer .logo_wrap{margin: 0 auto; justify-content: center;}
footer .copyright{text-align: center; margin-top: 1em;}


/*-----------
.btn_sales
-----------*/
.btn_sales{position: fixed; bottom: 20px; right: 20px; z-index: 50;}
.btn_sales .btn_fixd{position: relative; display: block; width: 200px; height: 200px; background: linear-gradient(90deg, #3AE5C3 0%, #0A89FF 90%); border-radius: 1000px;}
.btn_sales .btn_fixd .img{position: absolute; left: 2.5%; top: -15%;}
.btn_sales .btn_fixd .arrow{position: absolute; width: 15%; bottom: 5%; left: 43%;}
.btn_sales .btn_fixd:hover{background: linear-gradient(90deg, #0A89FF 0%, #3AE5C3 90%);}
.btn_sales .btn_fixd:hover .arrow{transform: translateY(10%);}

@media screen and (min-width: 2560px){
  #sns a.btn {padding: 20px;}
  #sns a.btn .text_area h5{font-size: 3em;}
  #sns a.btn .text_area p{font-size: 1.2em}
}

@media screen and (max-width: 850px){
  /*-----------
  sales
  -----------*/
  #sales .box a.btn{width: 300px;}
}

@media screen and (max-width: 768px){
  a.btn{font-size: 1.2em;}

  h2.flex{flex-direction: column; align-items:flex-start;background-position: left 0 top 10%; background-size: 8%; padding-left: 10%;}
  h2 span{line-height: 1; display: inline-block;}
  h2 .detail{font-size: .6em; margin-left: 0; margin-top: .5em;}
  
  #campaign h2 .ttl{width: 75%;}
  #sales h2 .ttl{width: 50%;}
  #sns h2 .ttl{width: 80%;}

  article h3{font-size: 2.5em;}


  section{margin-top: 200px;}
  article .wrap{padding: 40px 25px;}
  section .wrap .inner{flex-direction: column-reverse;}
  section .wrap .inner .img_cm{width: 100%;}
  section .wrap .inner .text_area{width: 100%; margin-right: 0; margin-top: 1em;}


  article{padding-top: 40px;}
  article p{font-size: 1.2em;}
  /*-----------
  mv
  -----------*/
  header p{width: 150px;}
  #mv .inner{padding-top: 80px;}

  #mv .circle{position: absolute; width: 200%;left: -50%; top: -25%;animation: Circle 100s infinite linear;}
  #mv h1{width: 70%;}
  #mv .mv_img{margin-top: -10%;}

  /*-----------
  campaign
  -----------*/
  #campaign h4{font-size: 1.5em;}

  /*-----------
  event
  -----------*/
  .event{width: 96%; margin: -15% auto 0;align-items: center;align-self: center; padding: 20px 0;}
  .event .event_logo{width: 30%;}
  .event .text_area{width: calc(70% - 15px); margin-left: 15px}
  .event .btn{margin: 5px 0 0; padding-right: 20%;}

  /*-----------
  sales
  -----------*/
  #sales .wrap .kizon .img_sales{width: 100%;}
  #sales .wrap .text_area{width:100%; margin-right:0; margin-top: 1em;}
  #sales .wrap .text_area br{display: none;}
  #sales .wrap .text_area a.btn{margin: 1em auto 0; width: 80%;}
  #sales .kizon.flex{flex-direction: row;}
  #sales .wrap .img_sales{width: 80%; display: block; margin: 0 auto;}
  #sales .box a.btn{width: 80%;}

  /*-----------
  sns
  -----------*/
  #sns .inner{flex-direction: column;}
  #sns a.btn {width: 100%; padding: 20px;}
  #sns a.btn .text_area h5{font-size: 4vw;}
  #sns a.btn .text_area p{font-size: 2.5vw;}
  #sns a.btn::after{right: 4%;}

  /*-----------
  .btn_sales
  -----------*/
  .btn_sales{position: fixed; bottom: 10px; right: 10px; z-index: 50;}
  .btn_sales .btn_fixd{position: relative; display: block; width: 100px; height: 100px; background: linear-gradient(90deg, #3AE5C3 0%, #0A89FF 90%); border-radius: 1000px;}

}

@media screen and (max-width: 600px){

  #mv .inner{padding-top: 70px;}
  #mv .mv_img{margin-top: -12%;}
  /*-----------
  sales
  -----------*/
  #sales .box{width: 100%;}
  #sns a.btn .text_area h5{font-size: 3.5vw;}
}