@charset "utf-8";/* -------（リセットCSS）-----------------------------------------------*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{margin:0;padding:0;}
fieldset,img{border:0;height: auto;width: auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav{display: block;}
figure{ line-height:0;}
*{ box-sizing: border-box;}


/* =custom style
------------------------------------------------------------------------------------------*/
:root{
	--keyc:#ccc;
	--keyc2:#0075c1;
	--keyc3:#c00;
	--font1:"Noto Sans JP", sans-serif;
	--font2:"Oswald","Noto Sans JP", sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body{overflow-x: hidden;text-align: center;
	font-family: var(--font1);
	font-weight: 400;font-size: 16px;line-height: 1.7em;}

body:before{ content: "";display: block;position: fixed;height: 100vh;width: 100%;background-image: url("../images/bg1.webp");background-repeat: no-repeat;background-position:top center;background-size: cover;z-index: -2;top: 0;left: 0; opacity: 0.8;}

/*
body:after{ content: "";display: block;position: fixed;height:50vh;width: 100%;background-image: url("../images/bg_txt.svg");background-repeat: no-repeat;background-position: bottom;background-size: 100%;z-index: -1;bottom: -0.5vw;right: 0; opacity: 0.05;} 
*/

html {overflow-y:scroll;height:100%;}

a {color: var(--keyc3);text-decoration:none;outline:none;transition: 0.1s;}
a:hover{opacity: 0.8;}

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

#container{ position:relative;}


@media only screen and (max-width: 768px){
    body{font-feature-settings : "palt";}
    body:before{ }
    
    .pc_only{ display:none;}
    .sp_only{ display:block !important;}
}

body img{ max-width: 100%;}


/* =header
-----------------------------------------------------------------------------------------*/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;display: flex;align-items: center;justify-content: flex-end; font-family: var(--font2);}

.headlogo{ position: absolute;left: 2%;top: 10px;width: 6%;z-index: 10;}
.headlogo img{ width: 100%;}

.toggle_nav,.nav,.global,.nav li,.nav li a{ height: 100%;}
.global{ width: 100%;margin-right:1.5vw;display: flex;}

.nav li a{ line-height:1em;font-size:14px;text-align:center;padding:25px 1em ;position:relative;text-decoration: none;color: #fff;display: flex;align-items: center;}

.nav li.sns a{ padding: 12px 1em 0;}
.nav li.sns a img{ width: 35px;}

.nav li a:hover,
.nav li a.active{ color:#fff;}
.nav li a.disactive {color: #999;}
.nav_trigger{display: none;}


@media only screen and (max-width: 768px){
	header {padding: 0;}
	header .headlogo{width: 17%;left: 2%;top: 10px;}	
	header .headlogo img{max-width: 100%;max-height: 100%;}
    
	.global{width:100%;position:fixed;z-index:10;top:0;left:0;overflow-y: hidden;padding-top:0;height:0;background-color:rgba(0,0,0,0.9);box-sizing: border-box;display: inherit;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;}
	.global li{width: 100%;display:inherit;}
	.nav-active .global{ height:100vh;padding-top:47px;}
	.nav li.sp_top{ display: inherit;}

	.toggle_nav{ height: auto;-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;}
	.nav li{ padding-right: 0;height: auto;}
	.nav li a:hover,nav li a.at{  border-bottom: none;}
	.nav li a{ width:100%;max-width:inherit;text-align:center;padding: 1em 7%;height: auto;}
    .nav li.sns a{ padding: 1em 7%;}
    .nav li.sns a img{ width: 30px;}
	.nav li a:hover,
	.nav li a.active{ color:#000;background-color:rgba(255,255,255,0.7);}

	/* Default navigation icon */
	.nav_trigger{display: block;position: fixed;width: 30px;height: 25px;right:3vw;top: 7px;z-index: 200;}
	.nav-active .nav_trigger{opacity: 0.7;}
	.nav_icon{display: inline-block;position: relative;width: 30px;height: 2px;background-color:var(--keyc);-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: 2px;position: absolute;background:var(--keyc);-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: -9px;}
	.nav_icon:after{margin-top: 9px;}
	.nav-active .nav_icon{background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before{margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background:#fff;}
	.nav-active .nav_icon:after{margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background:#fff;}

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding: 5vw 0 5vw;}
footer .foot_staff{ font-size: 14px;font-weight: bold;line-height: 2em;margin-bottom: 30px;}
footer .foot_bnr{ display: flex;justify-content: center;margin-bottom: 30px;}
footer .foot_bnr li{ width: 30px;}
footer .foot_bnr img{ width:100%;}

footer .foot_credit{ font-size: 15px; line-height: 1.8em;}

footer small{ display: block;font-size: 14px;line-height: 1.5em; }

@media only screen and (max-width: 768px){
    footer{ padding: 20px 5% ;}
    footer .foot_staff{  margin-bottom: 20px;font-size: 12px;}
    footer .foot_bnr{ margin-bottom: 20px;}    
	footer small{ font-size: 11px;line-height: 1.5em;width: 94%;margin: 0 auto;display: block; }
	footer .foot_credit{ font-size: 14px; line-height: 1.6em;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;text-align:center;position:fixed;right:3vw;bottom:2vw;z-index:10;transition: 0.3s;}
.page_top a{background-color:#e85799;border-radius: 50%;height:12vw;width:12vw;line-height:1.3em;color:#fff;font-size:1.2vw;text-decoration: none;display: flex;align-items: center;justify-content: center;font-weight: bold;filter: drop-shadow(0px 0px 0.4vw rgba(0,0,0,0.4));border: 0.4vw solid #fff;}
.page_top a:hover{text-decoration:none;opacity: 1;transform: scale(1.1);}
.page_top.off{bottom: -16vw;}


@media only screen and (max-width: 768px){
	.page_top a{height:22vw;width:22vw;line-height:1.3em;font-size:2.7vw;}
	.page_top.off{bottom: -24vw;}
}


/******* youtube *******/
.youtube{position:relative;width:100%;margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}



/* =共通
------------------------------------------------------------------------------------------*/
main{ width: 100%;text-align: left;} 
main img{ max-width: 100%;}

.container{ width:90%;max-width: 1200px;margin: 0 auto;}


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

}


/******* 見出し *******/
.tit{color: #e85799;line-height: 1em;font-size: 9vw;margin-bottom: 0.25em;}
.stit{ font-size: 4vw;line-height: 1.7em;;margin-bottom: 1em;text-align: center;color: var(--keyc);font-weight: 400;font-family: var(--font2);}

@media only screen and (max-width: 768px){
    .tit{ text-align: center;}
    .stit{ font-size: 36px;line-height: 1.5em; margin-bottom: 0.5em;}
}


/* = page contents
------------------------------------------------------------------------------------------*/
.lp .main{ line-height: 0;}
.lp .lead{ background-color: #ffe66f; padding: 0 0 5vw;}
.lp .lead .container{ max-width: 1400px; width: 96%;}
.lp .lead .tit{  width: 70%; margin: -7vw auto 0;}
.lp .lead .lead_txt{}

.lp .about{ background-color: #7dccf3; padding: 5vw 0;}
.lp .about .about_txt { margin-bottom: 2em;}
.lp .about .about_txt h2{ font-weight: bold; font-size:24px; line-height: 1.7em; margin-bottom: 1em; }
.lp .about .img01{ width: 100%; max-width:800px; margin: 0 auto 2vw;}
.lp .campaign{ padding: 7vw 0; text-align: left;}
.lp .campaign h2{margin-bottom: 2em;}

.lp .txtblock{ display: flex; justify-content: space-between; margin-bottom: 2em;}
.lp .txtblock .txt{ width: 60%;}
.lp .txtblock .txt ul{ list-style: disc; padding-left: 1.5em; margin-bottom: 1em;}
.lp .txtblock .txt li{ margin-bottom: 0.25em;}
.lp .txtblock figure{ width: 35%;}
.lp .btn{ width: 100%; max-width: 300px; margin: 0 auto;}

.lp .fair{background-color: #7dccf3; padding: 5vw 0; text-align: left;}
.lp .fair h2{ margin-bottom: 2em;}


@media only screen and (max-width: 768px){
	.lp .lead{ padding: 0 0 30px;}
	
	.lp .about{ padding:30px 0;}
	.lp .about .about_txt h2{ font-size: 20px; text-align: center;}
	.lp .about .about_txt{ text-align: left; margin-bottom: 0;}
	.lp .about .img01{ margin-bottom: 20px;}
	.lp .btn{ max-width: 200px;}
	
	.lp .campaign{ padding:40px 0; }
	.lp .campaign h2{ margin-bottom: 1em;}
	
	.lp .txtblock{ display: inherit;  margin-bottom: 2em;}
	.lp .txtblock .txt{ width: 100%; margin-bottom: 1em;}
	.lp .txtblock figure{ width: 90%; margin: 0 auto;}
	
	.lp .fair{ padding: 30px 0;}
	.lp .fair h2{ margin-bottom: 1em;}
	.lp .fair .txtblock figure{ width: 50%;}
	
}


/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}
#cboxOverlay{position:fixed;width:100%;height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;}
.cboxIframe{width:100%;height:100%;display:block;border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:var(--keyc);}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px;overflow:visible;}*/
    #cboxContent{margin-right:60px;overflow:visible;margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px;border:1px solid #ccc;}
        #cboxLoadedContent{background-color: var(--keyc2);position:relative;z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:var(--keyc2);}
        #cboxTitle{position:absolute;top:-22px;left:0;color:#000;}
        #cboxCurrent{position:absolute;top:-22px;right:205px;text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px;width:40px;height:100%;position:absolute;top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0;right:-50px;border:0;outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px){#cboxContent{ margin-right:0;margin-bottom:50px;}
#cboxClose{ right:0;top:inherit;bottom:-35px;height: 22px;}
}


.goods_notice{ display: block;text-align: center;margin-bottom: 6vw;background-color: #c00;padding: 1em 0;text-decoration: none;color: #fff;font-size: 20px;line-height: 1.5em;margin-top: -4vw;}


@media screen and (max-width: 768px){.goods_notice{ 
    margin-bottom: 60px;font-size: 18px;margin-top: -4vw;}
}

/************* ANIMATIONS ***************/

.anime{ position:relative;opacity:0;}
@keyframes imageAnimation{0%{opacity: 0;animation-timing-function: ease-in;}
  10%{opacity: 1;animation-timing-function: ease-out;}
  25%{opacity: 1;}
  37%{opacity: 0;}
  100%{opacity: 0;}
}

/* SLIDE BOX ANIMATION */
@keyframes play{from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut{from {transform: translateX(0);}  
  to {transform: translateX(101%);}
}

.play.blkin{animation-name: play;animation-duration: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);position: relative;}
.play.blkin:before{animation-name: maskOut;animation-duration: .4s;animation-delay: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);content: '';position: absolute;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: #333;}

.play.fade_up {animation-fill-mode:both;animation-duration:1.5s;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);}
}

.play.fade_in{animation-fill-mode:both;animation-duration:3s;animation-name: fadeIn;visibility: visible !important;}
@-webkit-keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}
@keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}