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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* font-family:"Noto Sans JP", sans-serif; */
/* font-family:"Noto Serif JP", serif; */
/* font-family:"Oswald", sans-serif; */
/* font-family:"Outfit", 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)

*/

/*
	Arkhe Blocks Color Palette

	var
	--wp--preset--color--arkb-xxx
	--wp--preset--color--arkb-color-01

*/

/*******************************
/* 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;
	}
}

/*******************************
/* 
*******************************/
*{
	line-height:1.9;
}
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;
	}
	body.single-post h1.c-pageTitle__main,
	body.archive  h1.c-pageTitle__main{
		font-size:1.15rem;
		font-weight:600;
	}
}

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

.l-header{
	transition:background-color 0.65s;
}
.l-header__body.l-container{
	max-width:none;
}
body.home .c-gnav__li,
body.home .c-gnav__li.-current,
body.home .c-gnav__li.focus,
body.home .c-gnav__li:hover{
	color:#fff;
}
[data-scrolled=true] body.home .c-gnav__li,
[data-scrolled=true] body.home .c-gnav__li.-current,
[data-scrolled=true] body.home .c-gnav__li.focus,
[data-scrolled=true] body.home .c-gnav__li:hover{
	color:var(--ark-color--text);
}
.c-gnav__li a.c-gnav__a[aria-current="page"]{
	text-decoration:underline;
}
.l-header__logo.has-text > .c-headLogo{
	display:flex;
	align-items:center;
	font-size:0.45em;
	font-weight:600;
	padding:0 0 0.2em 0;
}
.l-header__logo.has-text > .c-headLogo::before{
	content:'';
	width:2.0em;
	height:2.0em;
	background-image:url('images/logo_marks_01.png');
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	margin-right:0.5em;
}
@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	.l-header__logo.has-text > .c-headLogo{
		font-size:3.55vw;
	}
}

/*******************************
/* 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{
	padding:0.5em 0 0.5em 0;
}
.ark-block-heading[data-sub=top] .ark-block-heading__line,
.ark-block-heading[data-sub=bottom] .ark-block-heading__line{
	margin:1.0em 0;
}
.ark-block-heading .ark-block-heading__line:before{
	background-color:#999;
}
.ark-block-heading .ark-block-heading__main{
	font-size:1.65rem;
	font-weight:500;
	margin:0.5em 0;
}
.ark-block-heading .ark-block-heading__sub{
	color:var(--wp--preset--color--arkb-color-01);
	font-family:'Oswald', 'Noto Sans JP', 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
	font-size:1.3rem;
	font-weight:500;
	line-height:inherit;
	opacity:1;
	margin:0.5em 0;
}
.ark-block-heading .ark-block-heading__sub::before{
	display:block;
	content:'';
	width:80px;
	height:80px;
	background-image:url('images/logo_marks_01.png');
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	margin:0 auto 0.5em auto;
}
.ark-block-heading.no_mark .ark-block-heading__sub::before{
	content:none;
}
@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	.ark-block-heading{
		padding-bottom:0;
	}
	.ark-block-heading .ark-block-heading__main{
		font-size:1.35rem;
	}
	.ark-block-heading .ark-block-heading__sub{
		font-size:1.15rem;
	}
	.ark-block-heading .ark-block-heading__sub::before{
		width:65px;
		height:65px;
	}
	.ark-block-heading[data-sub=top] .ark-block-heading__line{
		margin-bottom:0;
	}
	.ark-block-heading[data-sub=bottom] .ark-block-heading__line{}
}

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

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

/*******************************
/* Arkhe［ブロック］：通知
 * ark-block-accordion
*******************************/

/* no_title */

.ark-block-notice.no_title{}
.ark-block-notice.no_title .ark-block-notice__head{
	display:none;
}
.ark-block-notice.no_title .ark-block-notice__body{
	margin-top:0;
}

/*******************************
/* 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:550px;
}
#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(23,45,105,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-wrap:wrap;
	padding:80px 0 0 5.5%;
}
#hero > div.hero_caption div.primary{
	flex:0 0 100%;
}
#hero > div.hero_caption div.primary p{}
#hero > div.hero_caption div.primary p > span{
	display:block;
	font-size:6.5vw;
	font-weight:800;
	line-height:1.45;
}
#hero > div.hero_caption div.secondary{
	flex:0 0 100%;
	padding:1.0% 1.0em 9.0% 1.0em;
}
#hero > div.hero_caption div.secondary p{}
#hero > div.hero_caption div.secondary p > span{
	display:block;
	font-size:clamp(0.9375rem, 0.3125rem + 2vw, 1.5625rem);
	font-weight:400;
	letter-spacing:0.05em;
	line-height:2.0;
}
#hero > div.hero_decoration_word{
	position:absolute;
	left:-0.1em;
	bottom:-0.6em;
	z-index:10;
	width:calc(100% - 0.2em);
	color:#fff;
	font-family:"Outfit", sans-serif;
	font-size:7.8vw;
	font-weight:700;
	line-height:1;
	text-align:center;
	white-space:nowrap;
	mix-blend-mode:overlay;
	opacity:0.65;
}
#hero > div.hero_decoration_word > p{}
#hero > div.hero_decoration_mark{
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	position:absolute;
	bottom:-50px;
	right:-100px;
	z-index:10;
	width:clamp(300px, 50%, 45vw);
	aspect-ratio:1/1;
	mix-blend-mode:overlay;
	opacity:0.65;
}
#hero > div.hero_decoration_mark > span{}
#hero > div.hero_decoration_mark > span img{
	max-height:90vh;
}
#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 > div.hero_caption div.primary p > span{
		font-size:12.0vw;
	}
	#hero > div.hero_caption div.secondary{
		padding:1.0% 1.0em 15.0% 0.25em;
	}
}

/*******************************
/* 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:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	background:#fff;
	opacity:1;
	visibility:visible;
}
div.opening.active{
	opacity:0;
	visibility:hidden;
	transition:all 1.0s ease;
}
div.opening div.opening-element{
	width:90%;
	height:100%;
	background-image:url('images/logo_v_01.png');
	background-repeat:no-repeat;
	background-position:center;
	background-size:200px;
	opacity:1;
	filter:blur(0);
	transition:filter 1.5s, opacity 2.0s;
	transition-delay:1.0s, 0.5s;
}
div.opening div.opening-element.active{
	opacity:0;
	filter:blur(20px);
}
@media screen and (max-width: 767px){
/* mobile ------------------------------------------- */
	div.opening div.opening-element{
		background-size:35%;
	}
}