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

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

	font-family:"Noto Serif JP", serif;
	200-900

	font-family:"Josefin Sans", sans-serif;
	100-700

	var(--wp--preset--color--arkb-color-01)

*/

: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)

*/

/*******************************
/* 
*******************************/
*{
	line-height:2.0;
}
.l-content__body{
	margin-bottom:0;
}
h1, h2, h3, h4, h5, h6{
	font-weight:600;
	line-height:inherit;
}
h1.wp-block-heading{
	font-size:1.65rem;
}
h2.wp-block-heading{
	font-size:1.65rem;
}
h3.wp-block-heading{
	font-size:1.4rem;
}
h4.wp-block-heading{
	font-size:1.25rem;
}
body.single-post h1.c-pageTitle__main{
	font-size:1.65rem;
	font-weight:600;
}
body.archive  h1.c-pageTitle__main{
	font-size:1.65rem;
	font-weight:600;
}
@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	h1.wp-block-heading{
		font-size:1.25rem;
	}
	h2.wp-block-heading{
		font-size:1.20rem;
	}
	h3.wp-block-heading{
		font-size:1.10rem;
	}
	h4.wp-block-heading{
		font-size:1.05rem;
	}
	h1.c-pageTitle__main{
		font-size:1.40rem;
		font-weight:600;
	}
}

/*******************************
/* c-gnav
*******************************/

.c-gnav{}
.c-gnav__li.-current,
.c-gnav__li.focus,
.c-gnav__li:hover{
	color:#fff;
}
.c-gnav__li a.c-gnav__a[aria-current="page"]{
	text-decoration:underline;
}
body.page-id-71 .c-gnav__li a.c-gnav__a[aria-current="page"]{
	text-decoration:none;
}
#header .c-gnav a:hover,
html[data-scrolled=true] #header .c-gnav a:hover{
	color:#fff;
}
.c-gnav > li{}
.c-gnav > li:not(.button){
	font-size:1.0rem;
}
.c-gnav > li + li{
	margin-left:1.0em;
}
.c-gnav li.button{
	height:auto;
	margin-left:1.5em;
}
.c-gnav li.button a{
	background:var(--wp--preset--color--arkb-color-01);
	color:#fff;
	padding:1.0em 2.5em;
}
.c-gnav li.button a .__mainText{
	display:flex;
}
.c-gnav li.button a .__mainText svg{
	margin:0 0.25em;
}
@media screen and (max-width: 767px){
/* mobile ----------------------------------------------------- */
	.c-drawerNav li.button a .__mainText svg{
		display:none;
	}
}

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

#header{}
#header .l-header__body.l-container{
	max-width:none;
}
#header .l-header__center{
	padding:20px 0 25px 0;
}
#header .has-text > .c-headLogo{
	font-size:1.40rem;
	font-weight:600;
	line-height:1;
}
@media screen and (max-width: 767px){
/* mobile ----------------------------------------------------- */
	#header .has-text > .c-headLogo{
		font-size:1.15rem;
	}
}

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

.l-footer__nav a{
	padding:0.4em 0.5em;
}
.l-footer__foot{
	padding:2.5rem 0 1.5rem 0;
}
.l-footer__foot p.c-copyright{
	margin-top:4em;
}

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

.ark-block-heading{}
.ark-block-heading ~ p{
	line-height:2.5;
}
.ark-block-heading .ark-block-heading__main{
	font-size:1.25rem;
	font-weight:600;
	margin:0.5em 0;
}
.ark-block-heading .ark-block-heading__sub{
	color:var(--wp--preset--color--arkb-color-01);
	font-family:"Josefin Sans", sans-serif;
	font-size:3.0rem;
	font-weight:400;
	line-height:1.5;
	margin:0.5em 0;
}
.ark-block-heading .ark-block-heading__line:before{
	background-color:#ddd;
	width:5em;
	margin:0.65em 0;
}
.ark-block-heading .ark-block-heading__line{
	margin-top:1.15em;
}
.ark-block-heading.has-text-align-left .ark-block-heading__main{
	font-family:"Noto Serif JP", serif;
}

/* data-sub=bottom */

.ark-block-heading[data-sub=bottom]{}
.ark-block-heading[data-sub=bottom] .ark-block-heading__main{
	font-size:1.65rem;
}
.ark-block-heading[data-sub=bottom] .ark-block-heading__sub{}
.ark-block-heading[data-sub=bottom] .ark-block-heading__line{
	margin-top:1.15em;
}
.ark-block-heading[data-sub=bottom] .ark-block-heading__line:before{
	background-color:var(--wp--preset--color--arkb-color-01);
}
@media screen and (max-width: 767px){
/* mobile ----------------------------------------------------- */
	.ark-block-heading ~ p{
		text-align:left;
	}
	.ark-block-heading ~ p br{
		display:none;
	}
	.ark-block-heading .ark-block-heading__main{
		font-size:1.15rem;
	}
	.ark-block-heading .ark-block-heading__sub{
		font-size:2.4rem;
	}
}

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

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

/*******************************
/* #pagetop
*******************************/

#pagetop{}
#pagetop.c-fixBtn{
	background-color:var(--wp--preset--color--arkb-color-01);
	border-radius:50%;
	opacity:1;
}

/*******************************
/* contact-form-7
*******************************/

.contact-form-7-area{}
.contact-form-7-area input[type=text],
.contact-form-7-area input[type=email],
.contact-form-7-area textarea{
    width:100%;
	font-size:16px;
	padding:0.45em 0.8em;
}
.contact-form-7-area textarea{
	height:12em;
}
.contact-form-7-area input[type=submit]{
	background:#111;
	color:#fff;
	padding:0.5em 2.5em;
}
.contact-form-7-area .wpcf7-list-item{
	margin:0 1.5em 0 0;
}
.contact-form-7-area div.unit-title{
	display:block;
	font-weight:700;
	margin:1em 0 0 0;
}
.contact-form-7-area div.unit-item{
	display:block;
	margin:0.5em 0 1.5em 0;
}
.contact-form-7-area div.unit-submit{
	text-align:center;
}
.contact-form-7-area i.required{
	display:inline-block;
	color:#cc0000;
	font-style:normal;
	margin-left:0.4em;
}
.contact-form-7-area span.wpcf7-spinner{
	display:block;
	margin:-30px auto 0 auto;
}

/*******************************
/* hero
*******************************/

#hero,
#hero > div.hero_visual .swiper-slide img{
	width:100%;
	height:100vh;
	min-height:880px;
}
#hero{
	position:relative;
	width:100%;
	overflow:hidden;
}
#hero::before{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:2;
	width:100%;
	height:100%;
	content:"";
	background:rgba(66,66,66,0.35);
	mix-blend-mode:hard-light;
}
#hero > div.hero_caption{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:15;
	color:#fff;
	width:100%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
}
#hero > div.hero_caption > div{
	display:flex;
	flex-direction:column;
	padding:0 0 3.5% 5.5%;
}
#hero > div.hero_caption div.lead_en{}
#hero > div.hero_caption div.lead_en > p{}
#hero > div.hero_caption div.lead_en > p > span{
	display:block;
	font-family:"Josefin Sans", sans-serif;
	font-size:clamp(5rem, 4.318rem + 3.41vw, 6.875rem);
	font-weight:800;
	line-height:1.1;
}
#hero > div.hero_caption div.lead_jp{
	padding:2.0em 0 1.5em 0;
}
#hero > div.hero_caption div.lead_jp > p{}
#hero > div.hero_caption div.lead_jp > p > span{
	display:block;
	font-family:"Noto Serif JP", serif;
	font-size:clamp(2.5rem, 1.932rem + 2.84vw, 4.063rem);
	font-weight:800;
	line-height:1.45;
}
#hero > div.hero_caption div.text{}
#hero > div.hero_caption div.text > p{}
#hero > div.hero_caption div.text > p > span{
	display:block;
	font-size:1.5rem;
	font-weight:400;
	letter-spacing:0.05em;
	line-height:2.0;
}
#hero > div.hero_visual{
	position:relative;
}
#hero > div.hero_visual::before{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:5;
	width:100%;
	height:100%;
	content:'';
	background:rgba(0,0,0,0.1);
}
#hero > div.hero_visual .swiper{}
#hero > div.hero_visual .swiper-wrapper{}
#hero > div.hero_visual .swiper-slide{}
#hero > div.hero_visual .swiper-slide img{
	object-fit:cover;
	transform:scale(1.25);
}
#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:scale(1.25);
	}
	100%{
		transform:scale(1);
	}
}
@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	#hero,
	#hero > div.hero_visual .swiper-slide img{
		width:100%;
		height:100vh;
		min-height:auto;
	}
	#hero > div.hero_caption > div{
		padding:0 5.0% 4.5% 5.0%;
	}
	#hero > div.hero_caption div.lead_en > p > span{
		font-size:13vw;
	}
	#hero > div.hero_caption div.lead_jp > p > span{
		font-size:7vw;
	}
	#hero > div.hero_caption div.text > p > span{
		display:inline;
		font-size:0.95rem;
	}
}

/*******************************
/* opening
*******************************/

body.opening-no-scroll{
	overflow:hidden;
	height:100vh;
}
div.opening{
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	width:100vw;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	background:#000;
	opacity:1;
	visibility:visible;
	transition:all 1.0s ease;
}
div.opening.active{
	opacity:0;
	visibility:hidden;
}
div.opening div.opening-element{
	opacity:0;
	filter:blur(0);
}
div.opening div.opening-element p{
	font-size:1.65rem;
	font-weight:500;
}
div.opening div.opening-element.active{
	animation:opening_element 2.4s 0.0s ease forwards;
}
@media screen and (max-width: 767px){
/* mobile -------------------------------------------------------------------------------------------- */
	div.opening div.opening-element p{
		font-size:1.10rem;
		font-weight:500;
	}
}
@keyframes opening_element{
	0%{
		opacity:0;
		filter:blur(0);
	}
	15%{
		opacity:1;
		filter:blur(0);
	}
	65%{
		opacity:1;
		filter:blur(0);
	}
	100%{
		filter:blur(10px);
		opacity:0;
	}
}