@charset "utf-8";

/* ------------------------------
   Universal Reset
   Contents
   Animation
------------------------------ */

/*==================================================================
   Universal Reset
==================================================================*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
main{display:block;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,div,object,ul,ol,li,dl,dt,dd,tr,td,fieldset,form,legend,small,figure{margin:0;padding:0;font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none;}
table,th,td{border:0;border-spacing:0;}
caption,th{text-align:left;}
em,strong,cite,abbr,caption,th,address{font-style:normal;font-weight:normal;}
img{max-width:100%;border:0 none;vertical-align:bottom;_vertical-align:text-bottom;}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{margin:0;padding:0;border:none;border-radius:0;vertical-align:middle;
-moz-appearance:none;-webkit-appearance:none;appearance:none;}
select::-ms-expand{display:none;}
input[type="submit"]:hover{cursor:pointer;}
input[type="image"]{max-width:100%;outline: none;}
option{padding-right:5px;}
button{background:none;padding:0;border:0;text-align:left;}
article,aside,dialog,details,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block;}
mark{font-weight:normal;font-style:normal;}
blockquote,q{quotes:none;}
a{vertical-align:baseline;text-decoration:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}


/*==================================================================
   Contents
==================================================================*/
html{font-size: calc(1000vw / 750);}
body{color:#000;background-color: #ffedf9;background-image: url(./bg_pattern02.png);background-repeat: repeat;background-attachment: fixed;background-size: 45rem;font-size:2.8rem;font-family: 'Noto Sans JP',"Noto Serif JP", serif,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;line-height:1.7;-webkit-text-size-adjust:100%;-webkit-touch-callout:none;display: flex;flex-direction: column;min-height: 100%;}
#container{max-width:750px;text-align:left;margin:0 auto;background: #ffedf9;box-shadow: 0 0 3rem #765856;}
main{z-index: 0;flex-grow: 1;}
section{position:relative;}

/*========== contents ==========*/
/*----- ttl -----*/
.ttl01{font-size: 3.5rem;position: relative;padding: 3.5rem 0 3rem;margin: 0 3rem;color: #765856;text-align: center;font-weight: bold;line-height: 1.4;}
.ttl01::before,
.ttl01::after{position: absolute;content: "";left: 0;right: 0;background: url(./bg_decoration01.png) no-repeat center / 100%;width: 100%;height: 100%;}
.ttl01::before {top: 0;background-position: top;}
.ttl01::after {bottom: 0;background-position: bottom;}
.ttl01 .eng{display: block;font-size: 4rem;font-family: "Noto Serif JP", serif;font-weight: 600;}
.ttl01 span{display: block;}
.ttl02{font-size: 3.2rem;color: #765856;text-align: center;font-weight: bold;line-height: 1.4;margin-bottom: 3rem;}

/*----- decoration -----*/
.decoration,
.decoration_top,
.decoration_bottom,
.decoration_none{padding: 5rem 0;position: relative;}
.decoration::before,
.decoration::after,
.decoration_top::before,
.decoration_bottom::after{position: absolute;content: "";left: 0;right: 0;background: url(./bg_decoration02.png) no-repeat center / 100%;width: 100%;height: 5rem;}
.decoration::before,
.decoration_top::before{top: -5rem;background-position: top;transform: scaleY(-1);}
.decoration::after,
.decoration_bottom::after{bottom: -5rem;background-position: bottom;}

/*--- list ---*/
ul.list_disc > li,
ul.list_note > li{font-feature-settings: "palt";position: relative;font-weight: 500;}
ul.list_disc > li{padding-left: 1.8rem;}
ul.list_note > li{padding-left: 2rem;font-size: 2rem;color: #755758;}
ul.list_disc > li::before,
ul.list_note > li::before {position: absolute;left: 0;top: 0;}
ul.list_disc > li::before{content: "・";}
ul.list_note > li::before{content: "※";}

/*----- bg -----*/
.bg_ptrn01{background: url(./bg_pattern01.png) repeat;background-size: 4.5rem 7rem;}

/*--- area_text ---*/
.area_txt > p,
.area_txt > figure{margin-bottom: 4rem;font-weight: 500;letter-spacing: -0.05em;}

/*--- area_fixbtn ---*/
.area_fixbtn{position: fixed;max-width: 75rem;z-index: 99;margin: auto;left: 0;right: 0;bottom: 0;}
.area_fixbtn a{position: relative;display: block;width: 29rem;margin-right: 1.5rem;margin-left: auto;}

/*----- footer -----*/
footer {background:#9d79d4;max-width: 750px; margin: 15rem auto 0; width: 100%;padding:7rem 3rem;text-align: center;}
footer ul {display: flex;justify-content: center;}
footer ul.list_icon{margin-bottom: 6rem;}
footer ul.list_icon > li:not(:last-child){margin-right: 5rem;}
footer ul.list_icon > li > a .mail{width: 6.2rem;vertical-align: middle;}
footer ul.list_icon > li > a .instagram{width: 4.8rem;vertical-align: middle;}
footer nav ul > li {position: relative;display: inline-block;color: #fff;}
footer nav ul > li:not(:last-child) {padding-right: 3rem;}
footer nav ul > li:not(:last-child)::after {position: absolute;content: "｜";top: calc(50% - 1.9rem);left: 29.2rem;font-size: 2.4rem;}
footer nav ul > li > a {display: block;color: #fff;font-size: 2.4rem;}
footer nav ul > li > a:hover{color: #6139b0;}
footer .copyright{color:#FFF;font-size:2.2rem;padding:5rem 0 0;}



/*========== section block ==========*/
*[class^="blc_"] > .inner{padding: 13rem 5rem;}


/*----- blc_mv -----*/
.blc_mv{min-height:99.9rem;padding:60rem 0 0 0;position: relative;
 background: url(./mv_bg.png) center top / cover no-repeat;}
.blc_mv h1 > .logo{margin-top: -3.5rem;}
.blc_mv .badge{position: absolute;top: 2rem;width: 19rem;right: 3rem;}


/*----- blc_about -----*/
.blc_about{overflow: hidden;}
/*- area_collaboration -*/
.blc_about .area_collaboration{margin: 0 0 10rem;}
.blc_about .area_collaboration .catch{margin: 0 -5rem;}
.blc_about .area_collaboration .catch .sub{margin-top: -3rem;}
.blc_about .area_collaboration > .collaboration {display: flex;align-items: center;justify-content: space-around;margin: 10rem 0;}
.blc_about .area_collaboration > .collaboration p {display: flex;flex-direction: column;justify-content: center;text-align: center;font-size: 3.5rem;font-weight: bold;line-height: 1.3;position: relative;max-width: 28rem;z-index: 1;}
.blc_about .area_collaboration > .collaboration p::before {content: "";position: absolute;width: 24rem;height: 23.5rem;left: 50%;transform: translateX(-50%);z-index: -1;}
.blc_about .area_collaboration > .collaboration p.bis::before {background: url(./about_collaboration_bg01.png) center center / 100% no-repeat;}
.blc_about .area_collaboration > .collaboration p.rebrast::before {background: url(./about_collaboration_bg02.png) center center / 100% no-repeat;}
.blc_about .area_collaboration > .collaboration .symbol {font-size: 4.9rem;line-height: 1;font-weight: bold; margin: 0 1rem;}
.blc_about .area_collaboration > .collaboration p.bis .fs26{font-size: 2.6rem;}
.blc_about .area_collaboration .txt{letter-spacing: -0.01em;font-weight: 500;}
/*- area_magazine -*/
.blc_about .area_magazine .magazine{line-height: 1.4;margin: 4rem 0 5rem;}
.blc_about .area_magazine .magazine p{font-weight: bold;}
.blc_about .area_magazine .magazine p.release_info{font-feature-settings: "pasl";}
.blc_about .area_magazine .magazine p.magazine_ttl{font-size: 5rem;}
.blc_about .area_magazine .magazine p.magazine_ttl span{font-size: 2.3rem;font-weight: 500;margin-left: 1.8rem;}
.blc_about .area_magazine .magazine p.tagline{font-size: 2rem;}
/*- area_profile -*/
.blc_about .area_profile .ttl{font-size: 3.5rem;font-weight: bold;margin-bottom: 4rem;}
.blc_about .area_profile .profile_box .profile{background: url(./about_profile_hayakawa.png) no-repeat 0 0 / 15rem;padding-left: 17rem;min-height: 15rem;margin-bottom: 4rem;}
.blc_about .area_profile .profile_box:nth-of-type(2) .profile{background-image: url(./about_profile_kato.png);}
.blc_about .area_profile .profile_box .profile p{font-weight: bold;}
.blc_about .area_profile .profile_box .profile .name{font-size: 5rem;line-height: 1;margin-bottom: 1.5rem;}
.blc_about .area_profile .profile_box .profile .name span{font-size: 2.6rem;display: inline-block;}
.blc_about .area_profile .profile_box .profile .position{font-size: 2.3rem;}


/*----- blc_detail -----*/
.blc_detail .inner{padding-bottom: 5rem;}
.blc_detail p.txt01{font-weight: 500;margin-bottom: 4rem;}
.blc_detail p.txt02{font-size: 3.2rem;font-weight: bold;color: #765856;}
.blc_detail p.ttl span{background: #9d79d4;display: inline-block;font-size: 3.2rem;font-weight: 500;color: #fff;border-radius: 3rem;padding: 0 3rem;}
/*- area_period -*/
.blc_detail .area_period{background: url(./detail_bg.png) center top / cover no-repeat;min-height: 70rem;padding: 53.5rem 3rem 3rem;margin: 0 -5rem 9rem;}
.blc_detail .area_period > .period{position: relative;}
.blc_detail .area_period > .period .ttl{position: absolute;top: -2.5rem;left: 0;right: 0;}
.blc_detail .area_period > .period .date {display: block;background: #fff; padding: 2.5rem 0.5rem 1rem;font-weight: 700;border: solid .4rem #9d79d4;border-radius: 1rem;font-size: 4.7rem;}
.blc_detail .area_period > .period .date span{font-size: 3.2rem;}
/*- list_detail -*/
.blc_detail ul.list_detail{display: flex;flex-wrap: wrap;justify-content: space-between;}
.blc_detail ul.list_detail > li{width: calc((100% - 3rem) / 2);margin-bottom: 4rem;}
.blc_detail p{text-align: center;font-feature-settings: "palt";}
/*- area_eligibility -*/
.blc_detail .area_eligibility{margin: 9rem 0 0;}


/*----- blc_benefit -----*/
.blc_benefit .inner{padding-top: 1rem;}
.blc_benefit ul.list_benefit > li{padding-bottom: 8rem;}
.blc_benefit ul.list_benefit > li:last-child{padding-bottom: 5rem;}
.blc_benefit ul.list_benefit > li .img{margin-bottom: 4rem;}


/*----- blc_flow -----*/
.blc_flow ol.list_flow{margin-bottom: 9rem;}
.blc_flow ol.list_flow > li{position: relative;margin-top: 6rem;}
.blc_flow ol.list_flow > li:not(:first-child)::before {position: absolute;content: "▼";top: -5.5rem;left: 0;right: 0;margin: auto;width: 100%;height: 0;text-align: center;color: #765856;}
.blc_flow ol.list_flow > li .ttl{font-size: 3.2rem;text-align: center;background: #9d79d4;color: #fff;padding: 1.2rem 1rem;font-weight: 500;border-radius: 2rem 2rem 0 0;}
.blc_flow ol.list_flow > li .txt{padding: 1.5rem 0.5rem 2rem 2rem;font-feature-settings: "palt";font-weight: 500;border-radius: 0 0 2rem 2rem;background-color: #fff;display: flex;justify-content: space-between;align-items: center;}
.blc_flow ol.list_flow > li .txt .sub{font-size: 2.6rem;color: #9d79d4;border: solid .3rem #9d79d4;border-radius: 1rem;display: inline-block;width: 20rem;text-align: center;}
.blc_flow ol.list_flow > li .txt .main{width: calc(100% - 20rem - 1.5rem);}
.blc_flow ul.list_disc > li{font-size: 2.5rem;}


/*----- blc_qa -----*/
.blc_qa ul.list_qa > li{margin-bottom: 4rem;font-feature-settings: "palt";}
.blc_qa ul.list_qa > li > dl > dt{font-size: 3.2rem;color: #765856;font-weight: bold;line-height: 1.4;}
.blc_qa ul.list_qa > li > dl > dd{color: #9d79d4;margin-top: 0.5rem;}


/*----- blc_plan -----*/
.blc_plan .area_txt .logo{text-align: center;width: 25.8rem;}



/*========== Responsive ==========*/
@media screen and (min-width: 750px) {
html{font-size:calc(62.5% / 2);}
#container{max-width: calc(750px / 2);}

/**/}/*end min-width:750px*/

@media screen and (min-width: 1000px) {
html{font-size:calc(62.5% / 1.5);}
#container{max-width: calc(750px / 1.5);}

/**/}/*end min-width:1000px*/

/*========== common ==========*/
em{color:#ff0000;}
strong{color:#ff0000;font-weight:bold;}

.mt_0{margin-top:0 !important;}
.mt_S{margin-top:0.5em !important;}
.mt_M{margin-top:1em !important;}
.mt_L{margin-top:1.5em !important;}
.mt_LL{margin-top:2em !important;}
.mb_0{margin-bottom:0 !important;}
.mb_S{margin-bottom:0.5em !important;}
.mb_M{margin-bottom:1em !important;}
.mb_L{margin-bottom:1.5em !important;}
.mb_LL{margin-bottom:2em !important;}

.pt_0{padding-top:0 !important;}
.pt_S{padding-top:0.5em !important;}
.pt_M{padding-top:1em !important;}
.pt_L{padding-top:1.5em !important;}
.pt_LL{padding-top:2em !important;}
.pb_0{padding-bottom:0 !important;}
.pb_S{padding-bottom:0.5em !important;}
.pb_M{padding-bottom:1em !important;}
.pb_L{padding-bottom:1.5em !important;}
.pb_LL{padding-bottom:2em !important;}

.f_SS{font-size:0.6em;}
.f_S{font-size:0.8em;}
.f_L{font-size:1.2em;}
.f_bold{font-weight: bold !important;}
.f_b500{font-weight: 500;}

.f_red{color: #ff0000;}
.f_blue{color:#0299c1;}
.f_yel{color:#ffe400 !important;}
.f_grn{color:#06c755;}
.f_org{color:#fb9a00;}
.f_green{color:#00c152;}
.f_gold{color: #f4de8b;}

.tx_left{text-align: left !important;}
.tx_right{text-align: right !important;}
.tx_center{text-align: center !important;}
.tx_mark{padding:0.2rem 1rem;background:#ffe400;}
.tx_line{border-bottom:0.2rem solid #000;}

/*==================================================================
   Animation
==================================================================*/
.js_inview{opacity: 0;}

/*-- fadeIn inview --*/
.animated_fadeIn.active{opacity: 1;
-webkit-animation:fadeIn 1.8s ease 1;
animation: fadeIn 1.8s ease 1;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to { opacity: 1;}
}

/*-- fadeInUp inview --*/
.animated_fadeInUp.active{opacity: 1;
 -webkit-animation: .6s .3s ease-out both fadeInUp;
 animation: .6s .3s ease-out both fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(12px);
}
100% {
opacity: 1;
}
}

/*-- fadeInDown inview --*/
.animated_fadeInDown.active {opacity: 1;
-webkit-animation: 1s ease both fadeInDown;
animation: 1s ease both fadeInDown;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

/*-- fadeInTopRight inview --*/
.animated_fadeInTopRight.active{
-webkit-animation: fadeInTopRight 1s ease forwards;
animation: fadeInTopRight 1s ease forwards;
}
@-webkit-keyframes fadeInTopRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%,-100%,0);
transform: translate3d(100%,-100%,0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}

@keyframes fadeInTopRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%,-100%,0);
transform: translate3d(100%,-100%,0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}

/*-- imageView inview --*/
.animated_imageView.active {opacity: 1;
-webkit-animation:imageView 1.8s ease 1;
animation: imageView 1.8s ease 1;
}
@-webkit-keyframes imageView {
0% {
clip-path: circle(0 at 50% 50%);
-webkit-clip-path: circle(0 at 50% 50%);
}
100% {
clip-path: circle(100% at 50% 50%);
-webkit-clip-path: circle(100% at 50% 50%);
}
}
@keyframes imageView {
0% {
clip-path: circle(0 at 50% 50%);
-webkit-clip-path: circle(0 at 50% 50%);
}
100% {
clip-path: circle(100% at 50% 50%);
-webkit-clip-path: circle(100% at 50% 50%);
}
}

/*-- girlyBounce inview --*/
.animated_girlyBounce.active {opacity: 1;
-webkit-animation:girlyBounce 0.6s ease-out forwards;
animation: girlyBounce 0.6s ease-out forwards;
}
@keyframes girlyBounce {
0%   { transform: scale(0.9); opacity: 0; }
60%  { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); }
}

/*-- swing inview --*/
.animated_swing.js_inview{opacity: 1;}
.animated_swing.active{opacity: 1;
-webkit-animation:swing 1s ease 1;
animation: swing 1s ease 1;
}
@keyframes swing {
20% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
60% { transform: rotate(2deg); }
80% { transform: rotate(-1.5deg); }
100% { transform: rotate(0); }
}
