@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/****************reset*******************/
*{
	box-sizing: border-box;
}

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{
	padding:0;
	margin:0;
	width:auto;
	font-size:100%;
	line-height:170%;
	font-family: 'Noto Sans JP', serif;
	font-weight:normal;
	word-break: break-all;
}
ul,li{
	list-style:none;
	padding:0;
	margin:0;
	font-size:100%;
	line-height:100%;
	font-weight:normal;
}
a img {
	border:none;
}
img{
	width:100%;
	font-size:0px;
	-webkit-backface-visibility:hidden;
	vertical-align: top;
}
a,button{
	text-decoration:none;
	cursor: pointer;
	color: inherit;
	transition:.4s;
    -webkit-transition:.4s;
}
p,li,h2,h3,h4,a,strong,dd,dt,dl,td,th {
    color:#333;
    letter-spacing: .05em; /*.01em;*/
}

img{
	max-width: 100%;
}

body{
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 180%;
}
a:hover {opacity: .6;}

/****************clearfix*******************/
.clearfix {
	min-height:1px;
	overflow-x:hidden;
}
* html .clearfix{height:1px;}
p{line-height: 1.8;}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

/****************common****************/

.yuumin{
	font-family:YuMincho, 'Yu Mincho', 'Noto Serif JP', serif;
}
h2{
	width:312px;
	padding:12px 0 0;
	font-size:72px;
	line-height:1;
}
h2 span{
	color:#6B1685;
}
h3 {
	font-size:40px;
	line-height:1.4;
	font-weight:bold;
	color:#BFA670;
}
h4 {
	margin-bottom:10px;
	font-size:21px;
	font-weight:bold;
	color:#260C57;
}
h5 {
	width:100%;
	padding:20px 14px;
	background:#6B1685;
	border-radius:2px;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	color:#fff;
	line-height:1.2;
}
h5 span{
	font-size:14px;
	font-weight:normal;
	color:#fff;
}
h6 {
	width:320px;
	margin:0 auto 48px;
	font-size:28px;
	font-weight:700;
	color:#6B1685;
	line-height:1.2;
	letter-spacing:.1em
}
h6 span{
	margin-bottom:16px;
	display:block;
}
h6 span.txt_s{
	font-size:15px;
	font-weight:500;
}
h6 span.txt_m{
	font-size:20px;
	font-weight:500;
}
h6 img.insta_icon{
	width:32px;
	margin-bottom:24px;
}


.inner1080{
	width:90%; 
	max-width:1080px; 
	margin:0 auto; 
	position: relative;
}
.inner768{
	width:90%; 
	max-width:768px; 
	margin:0 auto; 
	position: relative;
}
.inner744{
	width:95%; 
	max-width:744px; 
	margin:0 auto; 
	position: relative;
}
.inner720{
	width:90%; 
	max-width:720px; 
	margin:0 auto; 
	position: relative;
}

.flex_contents {
	display:flex; 
	flex-wrap:wrap; 
	justify-content:space-between;
    align-items:flex-start;
}
.item_center{
	align-items:center;
}
.sp{display:none;}
.sp_only{display: none;}
.tablet{display: none;}
.center{
	text-align: center;
}



/*背景色が伸びて出現*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
	from {
	  opacity:0;
	}
	to {
		opacity:1;  
	}
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
	  opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #6B1685;/*伸びる背景色の設定*/
    left: 0;
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}


/* ふわっjs スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
	opacity: 0;
}

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeUp2{
	animation-name:fadeUpAnime;
	animation-duration:1.25s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,.fadeUpTrigger2{
	opacity: 0;
}




/**************** header ****************/

header{
	width: 100%;
	padding-top:85vh;
	background:url("../img/main_bg.jpg") center;
	background-size:cover;
}

header .logo{
	position:absolute;
	left:5%;
	bottom:12vh;
	width:25%;
	font-size:0;
}

header .logo a{
	display: block;
}

header .menu {
	display:flex;
	position:fixed;
	left:24px;
	top:34px;
	justify-content: space-between;
	align-items:center;
	z-index:9999;
}
header .menu a{
	margin:0 0 0 20px;
	padding:10px 0;
	font-size:17px;
	color:#bfa670;
	display:inline-block;
	font-weight:500;
}
header .menu a img{
	width:24px;
}
header .menu li:first-child a{
	margin:0;
}


/* ハンバーガーメニュー */
.gnav_sp{display: none;}
.hamburger{ position:fixed; right:0; top:0; z-index:999; padding:6.4vw 4.8vw;}
.menu-trigger,.menu-trigger span{ display:inline-block; transition:all .5s; box-sizing:border-box; margin:0 auto;}
.menu-trigger{ position:relative; width:35px; height:32px; cursor:pointer;}
.menu-trigger span { position:absolute; left:0; width:100%; height:3px; border-radius:3px;  background-color:#bfa670;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:15px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}

.menu-trigger.active span:nth-of-type(1) { -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); width:100%;}
.menu-trigger.active span:nth-of-type(2) { opacity:0; width:100%;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform:translateY(-18px) rotate(45deg); transform:translateY(-18px) rotate(45deg); width:100%;}

.menu-trigger p{ position:absolute; left:25px; font-weight:bold;}

/* ハンバーガーメニュー内容 折り畳まれ部分 */
#navigation{position:relative; display:none; width:100%; height:100vh; padding:20vw 0 0;background-color: #fff; position:absolute; top:0; left:0; z-index:3; overflow-y:scroll;}
#navigation::-webkit-scrollbar {display:none;}
#navigation .navigation_inner{display: table;width:100%;height: 100%;overflow: scroll;}
#navigation .navigation_inner .navigation_menu{display:flex;flex-wrap:wrap;justify-content:space-between;}

#navigation .navigation_inner .navigation_menu li{width:100%; border-top:1px solid #ddd;}
#navigation .navigation_inner .navigation_menu li:last-child{border-bottom:1px solid #ddd;}
#navigation .navigation_inner .navigation_menu li a{padding: 4% 5%;font-size: 4.24vw;line-height:1.25;display:block;}

/**************** footer ****************/

footer{
	padding:0 0 64px;
}
footer .copyright{
	color: #222;
    font-size: 13px;
    text-align: center;
}



@media screen and (max-width: 1024px){
	
	.pc_only{
		display: none;
	}
	
	.sp_only{
		display: block;
	}
	
	
}

@media screen and (max-width: 768px){
	
	body{
		font-size: 15px!important;
	}

	header .logo{
		left:4%;
		width:33%;
	}
	header .menu a{
		margin: 0 0 0 16px;
		font-size: 16px;
	}
}


@media screen and (max-width: 640px){
	
	.pc {display: none;}
	.sp {display: block;}
	
	header{
		padding-top:72.5vh;
		position:relative;
	}
	header .menu{
		display:none;
	}
	.gnav_sp{display: block;}
	
	footer .copyright {
		font-size: 3.2vw;
		padding: 4vw 0;
	}
	

	h2{
		width:auto;
		display:inline-block;
		padding:12px 12px 0 0;
		font-size:15vw;
	}
	h3{
		font-size:6vw;
	}
	h4{
		margin-bottom:2vw;
		font-size:5.12vw;
	}
	h5{
		padding:4vw 3vw;
		font-size:4.64vw;
	}
	h6 {
		width:90%;
		margin:0 auto 6vw;
		font-size:6.4vw;
		text-align:center;
	}
	h6 span.txt_s{
		font-size:3.6vw;
	}
	h6 span.txt_s{
		font-size:4.8vw;
	}
	

}