@charset "utf-8";

*{ box-sizing: border-box;font-feature-settings: "palt";word-break: break-all;}

/* :root{
    --font-en: 'Oswald', sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;
    --btn-color:#E65087;
    --btn-shadow:#E6508780;
    --bnr-pink:#FFE5EE;
    --bnr-shadow:#E65087;
    --white:#fff;
    --txt-color:#000;
} */

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family:'Roboto Slab','Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.7em;
	color: #1e1e1e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	overflow-x: hidden;
/*	min-height:100%;*/
}

body:before{content: "";z-index: -1; position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: url(../images/bg.jpg)center;background-size: cover;}

.font-mplus{font-family: 'M PLUS Rounded 1c', sans-serif;}
.font-mont{font-family: 'Montserrat', sans-serif;}
.font-noto{font-family: 'Noto Sans JP', sans-serif;}
.font-roboto{font-family: 'Roboto Slab', serif;}
.font-sawa{font-family: 'Sawarabi Mincho', serif;}


.sp_only{display: none;}
.pc_only{display: inherit;}

@media only screen and (max-width: 768px){
body{ overflow: hidden; background-image:none;}

.sp_only{display: inherit;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll;overflow-x: hidden;height:100%;}
a {cursor: pointer;color: var(--key-color);outline:none;transition:0.3s;}
/* a:link {  text-decoration: none; } */
a:hover {/* text-decoration: none; */opacity: 0.8;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .9;  -webkit-opacity: .9;  -moz-opacity: .9;  filter: alpha(opacity=90);  -ms-filter: "alpha(opacity=90)";}

.arrow{ position:relative;}
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 4px;
    height: 4px;
    border: 1px solid;
    border-color: transparent #061f58 #061f58 transparent;
    transform: rotate(-45deg);
}
/* margin */
.mb-05vw { margin-bottom: .5vw !important; }
.mb-1vw { margin-bottom: 1vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.mb-6vw { margin-bottom: 6vw !important; }
.mb-7vw { margin-bottom: 7vw !important; }
.mb-8vw { margin-bottom: 8vw !important; }
.mb-9vw { margin-bottom: 9vw !important; }
.mb-10vw { margin-bottom: 10vw !important; }
.mb-01em { margin-bottom: .1em !important; }
.mb-02em { margin-bottom: .2em !important; }
.mb-03em { margin-bottom: .3em !important; }
.mb-04em { margin-bottom: .4em !important; }
.mb-05em { margin-bottom: .5em !important; }
.mb-06em { margin-bottom: .6em !important; }
.mb-07em { margin-bottom: .7em !important; }
.mb-08em { margin-bottom: .8em !important; }
.mb-09em { margin-bottom: .9em !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }
.mb-3em { margin-bottom: 3  em !important; }
.mb-4em { margin-bottom: 4em !important; }

/* textList(div等で囲む) */
p.text-list,
.text-list ul li { padding: 0 0 3px 1.1em; position: relative;font-size: 14px;}
p:not(:last-of-child).text-list { margin-bottom: 1em; }
.text-list ul li:not(:last-of-child) { margin-bottom: 5px; }
p.text-list::before,
.text-list ul li::before { content: "※"; position: absolute; left: 0; }
p.text-list-dotted::before,
.text-list-dotted ul li::before { content: "・"; }
p.text-list-circle::before,
.text-list-circle ul li::before { content: "●"; }
p.text-list-square::before,
.text-list-square ul li::before { content: "■"; }
p.text-list-counter,
.text-list-counter ul li { padding-left: 5.1em; }
p.text-list-counter::before,
.text-list-counter ul li::before { counter-increment: number 1; content: "" counter(number) ""; }



/* =fade
/********************** fade *******************************/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%;background-color: #000;background-image : url( ../images/loading_b.gif );background-repeat : no-repeat; background-position : 50% 50%; z-index:99;}

/********************** header *******************************/
header{}
header .head_logo{ width: 200px; margin-top: calc(1vw + 12px); margin-left: calc(1vw + 12px); float: left;}
header .head_logo img{ width:100%;}
header nav{background: var(--key-color);color: #fff;padding: 15px 20px;border-radius: 30px;box-shadow: 0px 0px 8px #ffffff4d;}
header nav ul{ display: flex; justify-content: flex-end;align-items: center;}
header nav li{ padding: 0 14px;}
header nav li a{color: #fff;font-size: clamp(12px,1vw,14px);display: block; font-weight: 600;letter-spacing: 2px;line-height: 1.3em; text-decoration: none;}
header nav li a span{display: block;font-size: 0.4em;font-weight: 600;line-height: 1em;font-family: 'Noto Sans JP', sans-serif;}

header.top_in{position: fixed;top: -30%;right: calc(1vw + 12px);margin-top: calc(1vw + 12px);z-index: 100;}

header.in{ width: 100%; position: fixed; top: 0; z-index: 100;}
/* header.in .toggle_nav{ float: right; margin-top: calc(1vw + 12px); margin-right: calc(1vw + 12px);} */

@media only screen and (min-width: 768px){
.nav li a.grad01,
.nav li a.grad02,
.nav li a.grad03,
.nav li a.grad04{color: #fff;background: #fff;-webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;background-position: left ; transition: .3s all;}
/* .nav li a.grad02:hover{transition: .3s all; background-position: right; background: rgb(249,186,5);background: linear-gradient(90deg, rgba(249,186,5,1) 0%, rgba(30,175,230,1) 100%);-webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;}
.nav li a.grad03:hover{transition: .3s all; background-position: right; background: rgb(240,130,75);background: linear-gradient(90deg, rgba(240,130,75,1) 0%, rgba(230,80,135,1) 100%);-webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;}
.nav li a.grad01:hover{transition: .3s all; background-position: right; background: rgb(249,186,5);background: linear-gradient(90deg, rgba(249,186,5,1) 0%, rgba(230,80,135,1) 100%);-webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;}
.nav li a.grad04:hover{transition: .3s all; background-position: right; background: rgb(240,130,75);background: linear-gradient(90deg, rgba(240,130,75,1) 0%, rgba(30,175,230,1) 100%);-webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;} */
}


@media only screen and (max-width: 768px){
header.top_in nav li a{ font-size: 1.6vw;}
}

@media only screen and (max-width: 768px){
header.in,
header.top{position: fixed !important;right: inherit !important;left: 0;z-index: 9999;}
header.in .head_logo,
header.top .head_logo{ width: 100px; margin: 16px 0 0 18px;}
header.in .head_logo img,
header.top .head_logo img{ width: 100%;}

header nav li.sns{ display: flex;}
header nav li.sns a{ width: auto; margin-right: 2vw;}
header nav li.sns img{ height: 40px;}
header nav li a span{ text-align: left;}

.global{width:100%;position:fixed;z-index: 10;top:0;left:0;overflow-y: hidden;padding-top:0;height: 100vh;background: url(../images/bg_menu_sm.jpg)center ;background-size: cover; box-sizing: border-box;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;overflow-y: scroll;display: block;opacity: 0;visibility: hidden;}
.global li{width: 100%;display:inherit;padding: 0;text-align: left;margin-bottom: 5.4vw;}
.global li.nav_logo{width:24%;margin: 0 auto 40px;padding: 0;}
.nav-active .global{padding-top: 150px;opacity: 1;visibility: visible;}
.nav-active .global li.nav_logo{opacity: 0;}
.nav li.sp_top{ display: inherit;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;padding: 26px;}
.nav li{text-align: center;}
.nav li:first-child{}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{  max-width:inherit; text-align:center;  color:#000; font-weight:bold;font-size: 22px;display: inline-block;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}
.nav li.sns_box{margin-top: 9vw;}
.nav li.sns_box ul{display: inherit;}
.nav li.sns_box ul li{padding-left: inherit;display: inline-block;width: 30%;max-width: 50px;margin: 0 10px;}
.nav li.sns_box ul li a{
    margin: 0;
    display: block;
}
.nav li.sns_box ul li:before{display: none;}
.nav li.fix_copy{position: fixed;color: var(--white);font-size: 10px;bottom: 10px;left: 5px;padding: 0;line-height: 1.4em;margin-bottom: 0;width: 56vw;}
.nav li.fix_title{position: fixed;color: var(--white); font-size: 10px;bottom: 10px;right: 5px;padding: 0;text-align: right;line-height: 1.4em;margin-bottom: 0;}

.nav li a:hover,
.nav li a.active{color:#fff;background-color: #900;}





.nav .twittr{ width:100%; margin-top:0;}
.nav .twittr img{ width:10%;}
.nav li.twittr a{padding: 15px 12px !important;}

/* Default navigation icon */
.nav_trigger {position: fixed;width: 30px;height: 25px;right: 22px;top: 25px;z-index: 200;line-height:1;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon {display: inline-block;position: relative;width: 30px;height: 2px;background-color: transparent;-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_icon:before,
.nav_icon:after {content: '';display: block;width: 30px;height: 3px;border-radius: 10px; position: absolute;background: #fff;-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_icon:before {margin-top: -8px;}
.nav_icon:after {margin-top: 2px;width: 20px;right: 0;}
.nav-active .nav_icon {background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(135deg);transform: rotate(135deg);background: var(--key-color);}
.nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background: var(--key-color);width: 30px;}
}



/********************* ↓↓↓ 固定 ↓↓↓************************/
.fix_wrap {width: 100vw;z-index: 100;position: fixed;height: 100%;pointer-events: none;}
.fix_wrap .fix_logo {position: absolute;top: 0.4vw;left: 0.7vw;width: min(4.4vw, 113px);z-index: 100;pointer-events: all;}
.fix_wrap .fix_left_box {position: fixed;bottom: 1vw;left: 1vw;z-index: 10;}
.fix_wrap .fix_left_box .fix_date {width: 19vw;margin-bottom: 3.3vw;}
.fix_wrap .fix_left_box .fix_sns ul {text-align: left;}
.fix_wrap .fix_left_box .fix_sns ul li {display: inline-block;font-size: 18px;font-weight: bold; text-decoration: underline;z-index: 100;padding-left: 1em;}
.fix_wrap .fix_left_box .fix_sns ul li:hover {text-decoration: none;}
.fix_wrap .fix_left_box .fix_sns ul li:not(:last-of-type) {margin-right: 1vw;}
.fix_wrap .fix_btn {position: fixed;bottom: 5vw;right: 2vw;width: 26vw;max-width: 324px;z-index: 10;}
.fix_wrap .fix_btn ul li .btn_02 {background: #F8749C;color: var(--white);box-shadow: none;}
.fix_wrap .fix_btn ul li .btn_02::before {border: 1px solid var(--white);}
.fix_wrap .fix_btn ul li:not(:last-of-type) {margin-bottom: 1.4vw;}
.fix_wrap .fix_copy {position: absolute;left: 50%;bottom: -7px;width: max(400px,25vw);transform: translateX(-50%);}
.fix_wrap .fix_title {position: fixed;right: 1vw;bottom: 0.5vw;text-align: right; font-size: 10px;line-height: 1.5em;z-index: 100;}


.fix_wrap .toggle_nav{top:20px;position: absolute;right: 30px;pointer-events: all;}

@media only screen and (max-width: 768px) {
    .fix_wrap .fix_logo {width: 19vw;position: absolute;left: 50%;transform: translate(-50%, 0);top: 10px;transition: .6s;}
    .fix_wrap .fix_logo.active{width: 15vw;left: 12vw;top: 5px;}
    .fix_wrap .fix_left_box {position: absolute;bottom: 1vw;left: 1vw;width: 94%;}
    .fix_wrap .fix_left_box .fix_date {width: 100%;}
    .fix_wrap .fix_left_box .fix_sns {position: fixed;bottom: 0.5vw;z-index: 5;}
    .fix_wrap .fix_left_box .fix_sns ul li {font-size: 12px;padding-left: 1em;}
    .fix_wrap .fix_left_box .fix_sns ul li:not(:last-of-type) {margin-right: 3vw;}
    .fix_wrap .fix_copy {width: 80%;}
    .fix_wrap .fix_title {right: 4vw;bottom: 0.5vw;}
    .fix_wrap .toggle_nav{top: 10px;right: 10px;}
}
/********************* 固定 ************************/


/* =foot
-----------------------------------------------------------------------------------------*/
footer{padding: 4vw 0 8vw;font-size:12px;background-color: #fcebf2;}
footer small{line-height: 1.5em;font-size: 12px;}

footer.in{ background-color: inherit;}

@media only screen and (max-width: 768px){
footer{ padding: 30px 0 29vw; font-size:12px; line-height:1.5em;}
}



/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#c3a368; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#d1b582; text-decoration:none;}



@media only screen and (max-width: 768px){
.page_top{ display:none;}
}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* = parallax
------------------------------------------------------------------------------------------*/



.anime{opacity: 0;}

.js-play .fadeInUp,
.js-play.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;

 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.anime.js-play{opacity: 1;}

.d1{animation-delay: .1s;transition-delay: .1s;}
.d2{animation-delay: .2s;transition-delay: .2s;}
.d3{animation-delay: .3s;transition-delay: .3s;}
.d4{animation-delay: .4s;transition-delay: .4s;}
.d5{animation-delay: .5s;transition-delay: .5s;}
.d6{animation-delay: .6s;transition-delay: .6s;}

.js-play .fadeInRight,
.js-play.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.js-play .fadeInDown,
.js-play.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.js-play .fadeInLeft,
.js-play.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}