@charset "utf-8";

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 	transition: 0.1s linear;
}

header:after,
section:after,
.contents:after,
ul:after,
ol:after,
dl:after,
.btn_top:after,
.box_prof:after{
	visibility: hidden;
	display: block;
	font-size: 0px;
	content: " ";
	clear: both;
	height: 0;
}

.pc{display:block!important;}
.sp{display:none!important;}


/*common
----------------------------------------------------*/
html{
	font-size: 62.5%;
	color:#3B4043;
	line-height:2.0;
	/*font-family: 'Noto Serif JP', sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
}

body {
	font-size:1.6rem;
}

section{
	position:relative;
	width:100%;
	display:block;
	clear:both;
}

.contents{
	width:800px;
	margin:0 auto;
	padding:8rem 0;
}

img{
	width:100%;
	height:auto;
	display:block;
}

@media screen and (max-width:800px){
.contents{
	width:94%;
	margin:0 auto;
	padding:4vw 0;
}
}


/*header
----------------------------------------------------*/
header{
	position:relative;
	height:20vw;
	background: #FDEEC5;
	display: grid;
	grid-template-columns: 1fr 20vw 1fr;
}

header .sns,
header .sns ul{
	display: flex;
	align-items: center;
	justify-content: center;
}

header .sns ul li{
	padding: 0 2vw;
}

header .sns ul li img{
	width: 6vw;
	height: auto;
}

@media screen and (min-width:800px){
header{
	position:relative;
	height:260px;
	background: #FDEEC5;
	display: grid;
	grid-template-columns: 1fr 260px 1fr;
}

header .sns ul li{
	padding: 0 3vw;
}
header .sns ul li img{
	width: 4vw;
	height: auto;
}
}




/*sp button
-------------------------------------------------*/
header .navi{
	display: flex;
	align-items: center;
	justify-content: right;
}

#triggerBox{
    position: relative;
	width: 10vw;
	height: 10vw;
	margin-right: 5%;
	background: #000;
    z-index: 99999;
}
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}
.menu-trigger span {
    position: absolute;
    left: 2.5vw;
    width: 5vw;
    height: 2px;
    background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
    top: 2.8vw;
}
.menu-trigger span:nth-of-type(2) {
	top: 4.8vw;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 2.8vw;
}
.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(1.5vw) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-2.5vw) rotate(45deg);
}

@media screen and (min-width:800px){
#triggerBox{
	width: 7vw;
	height: 7vw;
}
.menu-trigger span {
    left: 1.5vw;
    width: 4vw;
}
.menu-trigger span:nth-of-type(1) {
    top: 2.3vw;
}
.menu-trigger span:nth-of-type(2) {
	top: 3.4vw;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 2.3vw;
}
.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(1.0vw) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-1.3vw) rotate(45deg);
}
}


/*navigation
-------------------------------------------------*/
#headIn{
	overflow: auto;
	position: fixed;
	height:100%;
	left: 0px;
	top: 0px;
	right: 0px;
    background: rgba(0,0,0,.9);
	background-size:100% 100%;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
}

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

#headIn{
    display: none;
}

#headIn.active{
    display: block;
    animation: show 0.3s linear 0s;
}

#headIn h2{
	width: 25%;
	margin: 5% auto 0 auto;
}

header #headIn nav ul{
	/*position:absolute;
	top:0;
	bottom:0;
	height:32vw;*/
	margin:0 auto;
}

header #headIn nav ul li{
	display:block;
}

header #headIn nav ul li a{
    padding: 0.5em 0;
    color: #FFF!important;
    font-size: 1.8vw;
    text-decoration: none;
	text-align:center;
    display: block;
}

header #headIn .sns{
	padding-top: 10%;
}

header #headIn .sns ul li{
	margin: 0 2vw;
}

header #headIn .sns img{
	width: 10vw;
}

@media screen and (min-width:800px){
#headIn h2{
	width: 200px;
	margin: 3% auto 0 auto;
}

header #headIn .sns{
	padding-top: 3%;
}

header #headIn .sns img{
	width: 3vw;
}
}


/*mv
----------------------------------------------------*/
.mv{
	background: #FDEEC5;
}

.box_mv{
	padding-bottom: 1%;
}

.bx-wrapper{
	margin-bottom: 0!important;
	box-shadow: none!important;
	border: 0!important;
}

.bx-pager ul{
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 0;
}

@media screen and (min-width:800px){
.box_mv{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0;
}

.box_mv.pc ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
}


/*info
----------------------------------------------------*/
.info h2{
	padding: 5% 0;
	background: #FDEEC5;
	font-size: 3.7vw;
	text-align: center;
}

.info h2 span{
	font-family: 'Oswald', sans-serif;	
	font-size: 9vw;
	display: block;
}

.box_info{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5%;
}

.box_info dl{
	margin-bottom: 1em;
}

.box_info dl dt{
	font-weight: bold;
}


/*menu
----------------------------------------------------*/
.menu h2{
	padding: 5% 0;
	background: #FDEEC5;
	font-size: 3.7vw;
	text-align: center;
}

.menu h2 span{
	font-family: 'Oswald', sans-serif;	
	font-size: 9vw;
	display: block;
}

.box_menu ul{
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 4vw 5%;
}

@media screen and (min-width:800px){
.menu .contents{
	width: 90%;
	margin: 0 auto;
}

.box_menu ul{
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 30px 5%;
}
}

@media screen and (min-width:800px){
.box_menu ul{
	margin-bottom: 100px;
}
}

.box_menu ul li span{
	aspect-ratio: 1 / 1;
	display: block;
}

.box_menu ul li span img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.menu p{
	width: 100%;
	margin: 3em auto 0 auto;
}

@media screen and (min-width:800px){
.menu p{
	width: 600px;
	margin: 3em auto 0 auto;
}
}

/*story
----------------------------------------------------*/
.story{
	padding: 5% 0;
	background: #FDEEC5;
	text-align: center;
}

.story h2{
	width: 240px;
	margin: 3% auto;
}

@media screen and (min-width:800px){
.story h2{
	margin: 0 auto;
}
}

.story iframe{
	width: 100%;
	height:450px;
}


/*insta
----------------------------------------------------*/
@media screen and (min-width:800px){
.insta .contents{
	width: 90%;
	margin: 0 auto;
}
}


/*bana
----------------------------------------------------*/
@media screen and (min-width:800px){
.bana .contents{
	width: 90%;
	margin: 0 auto;
}
.bana ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5%;
}
}


.bana img{
	margin-bottom: 8%;
}


/*下層
----------------------------------------------------*/
.ttl{
	margin-bottom: 30px;
	font-size: 1.6rem;
	text-align: center;
}

.ttl span{
	font-family: 'Oswald', sans-serif;	
	font-size: 80px;
	display: block;
}

.right{
	margin-bottom: 30px;
	font-size: 0.8em;
	color: #6E6E6E;
}


/*footer
----------------------------------------------------*/
footer{
	background: #FDEEC5;
}

footer .contents{
	display: grid;
	grid-template-columns: 35% 1fr;
}


footer .sns,
footer .sns ul{
	display: flex;
	align-items: center;
	justify-content: center;
}

footer .sns ul li{
	padding: 0 0 0 6vw;
}

footer .sns ul li img{
	width: 7vw;
	height: auto;
}

.copyright{
	padding: 0 5% 5% 5%;
	font-size: 3.0vw;
}

@media screen and (min-width:800px){
footer .contents{
	grid-template-columns: 30% 1fr;
}

footer .sns ul li img{
	width: 4vw;
	height: auto;
}

.copyright{
	padding: 0 5% 3% 5%;
	font-size: 1.0vw;
	text-align: center;
}
}


/*page top
----------------------------------------------------*/
#page-top{
	position: fixed;
	right: 2%;
	z-index:999;
}

#page-top a{ 
    position: relative;
	width:10vw;
	height:10vw;
    background-color:#000;
	display:block;
}

#page-top a img{
	display:block;
}

@media screen and (min-width:800px){
#page-top a{ 
	width:4vw;
	height:4vw;
}
}