/*
Template: arkhe
Theme Name: Arkhe_child
Version: 1.0.0
*/

/* font-family:"Noto Sans JP", sans-serif; */
/* font-family:"Oswald", sans-serif; */

:root {
	--ark-font_family:"Noto Sans JP","Helvetica Neue","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

/*******************************
/* Arkhe［ユーティリティクラス］
 * 詳しくは、src/scss/object/utility/**
*******************************/

/*

・「u-only-pc」というクラスをつけるとPCサイズでのみ表示されるようになったり
・「u-fz-l」を付けるとフォントサイズが大きくなったり
・「u-mt-0」を付けると上部マージンが 0 になったり

u-mt-0	(0,5,10,15,20,25,30,40,50,60,80)
u-mb-0	(0,5,10,15,20,25,30,40,50,60,80)


*/

/*******************************
/* 
*******************************/
h1, h2, h3, h4, h5, h6{
	line-height:inherit;
}
b, strong{
	font-weight:600;
}

/*******************************
/* utility
*******************************/

.utility_sp_left{}
.utility_sp_none{}
.utility_sp_br_none{}

@media screen and (max-width: 767px){
/* mobile -------------------------------------------------------------------------------------------- */
	.utility_sp_left{
		text-align:left;
	}
	.utility_sp_none{
		display:none;
	}
	.utility_sp_br_none br{
		display:none;
	}
}

/*******************************
/* module
 * module-title-001
 * module-title-002
*******************************/

.module-title-001{
    font-family: "Oswald", sans-serif;
    font-size: 3.0rem;
    font-weight: 400;
    line-height: 1.5;
}
.module-title-002{
    font-size: 1.2rem;
    font-weight: 500;
}

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

.l-header{
	transition:background-color 0.6s;
}
[data-scrolled=true] .l-header{
	background:rgba(0,0,0,0.8);
}
[data-scrolled=false] .l-header h1{
	opacity:0;
	transition:0.6s;
}
[data-scrolled=true] .l-header h1{
	opacity:1;
}
.l-header__body.l-container{
	max-width:none;
}
.c-pageTitle__main{
	font-family:"Oswald", "Noto Sans JP","Helvetica Neue","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
	font-weight:400;
}

/*******************************
/* #gnav
*******************************/

#gnav li.instagram{}
#gnav li.instagram > a{
	font-size:0;
}
#gnav li.instagram > a::before{
	//content:"\ef16";
	content:"\ef17";
	font-family:'MingCute';
	font-size:1.5rem;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	speak:never;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

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

.l-footer__nav a{
	padding:0.4em 0.5em;
}
.l-footer__foot{
	padding:0 0 1.5rem 0;
}
.l-footer__foot p.c-copyright{
	margin-top:4em;
}
.l-footer__widgets{
	padding:0;
}
.l-footer__widgets .widget_nav_menu ul.menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.5em 1.0em;
	font-size:0.8rem;
	border:none;
}
.l-footer__widgets .widget_nav_menu ul.menu > li{
	border:none;
}
.l-footer__widgets .widget_nav_menu ul.menu > li.instagram{
	display:none;
}
.l-footer__widgets .ark-block-icon.is-style-outline .ark-block-icon__frame{
	border:1px solid rgba(255,255,255,0.8);
}


/*******************************
/* pagetop
*******************************/

.c-fixBtn{
	background:#333;
	border-radius:999px;
	opacity:1;
	transition:all 0.6s;
}
.c-fixBtn:hover{
	opacity:0.6;
}
.c-fixBtn svg:not([fill]){
	fill:#fff;
}

/*******************************
/* Arkhe［ブロック］：セクション見出し
 * ark-block-heading
*******************************/

.ark-block-heading{
	padding:1.5em 0 2.5em 0;
}
.ark-block-heading[data-sub=bottom] .ark-block-heading__line{
	margin:1.2em 0 1.2em 0;
}
.ark-block-heading .ark-block-heading__main{
	color:#fff;
    font-family:"Oswald", sans-serif;
    font-size:3.0rem;
    font-weight:400;
    line-height:1.5;
}
.ark-block-heading .ark-block-heading__sub{
	color:#fff;
	font-size:inherit;
	font-weight:600;
	line-height:1.5;
	opacity:1;
}
.ark-block-heading + p{
	line-height:2.2;
	text-align:center;
}
@media screen and (max-width: 767px){
/* mobile -------------------------------------------------------------------------------------------- */
	.ark-block-heading + p{
		text-align:left;
	}
	.ark-block-heading + p br{
		display:none;
	}
}

/*******************************
/* Arkhe［ブロック］：アコーディオン
 * ark-block-accordion
*******************************/

.ark-block-accordion.is-style-box .ark-block-accordion__body{
	border-top-style:solid;
}

/*******************************
/* #hero
*******************************/

#hero{}
#hero div.hero_visual{
	position:relative;
}
#hero div.hero_visual > div.wrap{
	position:absolute;
	top:0;
	z-index:-1;
	width:100%;
}
#hero div.hero_visual > div.wrap::before{
	content:"";
	background:rgba(0,0,0,0.35);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:5;
}
#hero div.hero_visual > div.wrap > div{
	width:85%;
	height:85vh;
	min-height:600px;
	margin-left:auto;
}
#hero div.hero_visual > div.wrap > div img{
	object-fit:cover;
	width:100%;
	height:100%;
}
#hero div.hero_catch{
	position:relative;
	display:flex;
	justify-content:center;
}
#hero div.hero_catch > div.main_lead{
	flex:0 0 calc((100% - 40%) / 2);
}
#hero div.hero_catch > div.main_mark{
	flex:0 0 40%;
}
#hero div.hero_catch > div.main_word{
	flex:0 0 calc((100% - 40%) / 2);
}
#hero div.hero_catch > div.main_mark::before,
#hero div.hero_catch > div.main_word::before{
	content:"";
	display:block;
}
#hero div.hero_catch > div.main_mark::before{
	height:50vh;
	min-height:370px;
}
#hero div.hero_catch > div.main_word::before{
	height:85vh;
	min-height:600px;
}
#hero div.hero_catch > div.main_lead{
	display:flex;
}
#hero div.hero_catch > div.main_lead div.primary{}
#hero div.hero_catch > div.main_lead div.primary p{
	color:#333;
	font-family:"Oswald", sans-serif;
	font-size:12vw;
	font-weight:700;
	line-height:1;
	white-space:nowrap;
	writing-mode:vertical-rl;
	mix-blend-mode: screen;
	margin-top:-0.1em;
	margin-left:-0.25em;
}
#hero div.hero_catch > div.main_lead div.primary p > span{
	display:block;
}
#hero div.hero_catch > div.main_lead div.secondary{
	margin:0 auto;
}
#hero div.hero_catch > div.main_lead div.secondary p{
	color:#fff;
	font-size:4.0vw;
	font-weight:700;
	line-height:1;
	white-space:nowrap;
	writing-mode:vertical-rl;
	padding-top:1.5em;
}
#hero div.hero_catch > div.main_lead div.secondary p > span{}
#hero div.hero_catch > div.main_mark{}
#hero div.hero_catch > div.main_mark > div.mark{}
#hero div.hero_catch > div.main_mark > div.emphasis{}
#hero div.hero_catch > div.main_mark > div.emphasis > p{
	font-family:"Oswald", sans-serif;
	font-size:clamp(2.5rem, 2.5vw, 3.5rem);
	text-align:center;
}
#hero div.hero_catch > div.main_mark > div.emphasis > p > span{}
#hero div.hero_catch > div.main_mark > div.name{}
#hero div.hero_catch > div.main_mark > div.name > p{
	font-size:1.1rem;
	text-align:center;
}
#hero div.hero_catch > div.main_mark > div.name > p > span{}
#hero div.hero_catch > div.main_word{}
#hero div.hero_catch > div.main_word > div{
	padding:4.5em 1.0em;
}
#hero div.hero_catch > div.main_word > div > p{
	font-size:clamp(1.0rem, 1vw, 1.4rem);
	line-height:2.5;
}
#hero div.hero_catch > div.main_word > div > p + p{
	margin-top:1.5em;
}
#hero div.hero_catch > div.main_word > div > p > span{
	display:block;
}
#hero > div.hero_visual .swiper{
	height:85vh;
	min-height:600px;
}
#hero > div.hero_visual .swiper-wrapper{}
#hero > div.hero_visual .swiper-slide{}
#hero > div.hero_visual .swiper-slide::before,
#hero > div.hero_visual .swiper-slide::after{
	display:block;
	content:"";
	background:rgba(0,0,0,0.5);
	position:absolute;
	left:0;
	border-top:none;
	border-right:none;
	z-index:1;
	backdrop-filter:blur(2px);
	mix-blend-mode:overlay;
}
#hero > div.hero_visual .swiper-slide::before{
	top:0;
	width:50px;
	height:calc(100% - 50px);
}
#hero > div.hero_visual .swiper-slide::after{
	bottom:0;
	width:100%;
	height:50px;
}
#hero > div.hero_visual .swiper-slide img{
	object-fit:cover;
	transform:translateX(0%) scale(1);
}
#hero > div.hero_visual .swiper-slide[class*=-active] img,
#hero > div.hero_visual .swiper-slide[class*=-prev] img,
#hero > div.hero_visual .swiper-slide[class*=-next] img{
	animation:HeroAnimation 15s linear 0s normal both;
}
@keyframes HeroAnimation{
	0%{
		transform:translateX(0%) scale(1);
	}
	100%{
		transform:translateX(-2.5%) scale(1.25);
	}
}

@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	#hero div.hero_visual > div.wrap > div,
	#hero > div.hero_visual .swiper{
		height:40vh;
		min-height:320px;
	}
	#hero div.hero_catch{
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	#hero div.hero_catch > div.main_lead{
		flex:0 0 calc((100% - 40%) / 2);
		margin-right:auto;
	}
	#hero div.hero_catch > div.main_lead div.secondary p{
		font-size:5vw;
	}
	#hero div.hero_catch > div.main_mark{
		flex:0 0 100%;
		margin-top:-5vw;
	}
	#hero div.hero_catch > div.main_word{
		display:none;
	}
	#hero div.hero_catch > div.main_mark > div.mark{
		width:60%;
		margin:0 auto;
	}
	#hero div.hero_catch > div.main_mark::before,
	#hero div.hero_catch > div.main_word::before{
		content:none;
	}
	#hero div.hero_catch > div.main_mark > div.emphasis > p{
		font-size:1.2rem;
	}
	#hero > div.hero_visual .swiper-slide::before{
		top:0;
		width:10px;
		height:calc(100% - 10px);
	}
	#hero > div.hero_visual .swiper-slide::after{
		bottom:0;
		width:100%;
		height:10px;
	}
}