:root{
	--base-font: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	--sub-font: source-han-serif-japanese, serif;
	--en-font: Cormorant, serif;
	--base-color: #142952;
	--sub-color01: #00BCAE;
	--sub-color02: #E7EAEE;
	--gra-color01: #042545,#042C4A 25%, #034159 50%,#025869 65%,#009B97;
}

*{ box-sizing: border-box; }

@font-face {
	font-family: 'Cormorant';
	src: url('../font/Cormorant-Italic-VariableFont_wght.woff') format('woff');
}

html { font-size: 62.5%; }
body{
	font-family: var(--base-font);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--base-color);	
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.08em;
	text-align: justify;
}

h1,h2,h3,h4,h5,h6{ font-family: var(--sub-font); font-weight: 600; }
.sub-font{ font-family: var(--sub-font); }
.en-font{ font-family: var(--en-font); font-weight: 600; }

/*** adobe使用フォント
font-family: "source-han-serif-japanese", serif;
font-weight: 400;
font-style: normal;

font-family: "source-han-serif-japanese", serif;
font-weight: 600;
font-style: normal;
***/

a{ transition: .5s; }
a:hover{ opacity: .6; }
br{ line-height: inherit; }
p{ line-height: 2.28; }
span, a, strong, small{ color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.wrap{ width: 800px; margin: 0 auto; position: relative; z-index: 0; }
.wrap.midium{ width: 900px; }
.row{ display: flex; justify-content: space-between; }

.body-wrap{ overflow: hidden; position: relative; padding-top: 10rem; }

.c-btn{ display: flex; justify-content: space-between; align-items: center; width: 20rem; height: 6rem; font-family: var(--en-font); font-weight: 600; font-size: 1.8rem; line-height: 1; letter-spacing: 0.1em; border: 1px solid var(--base-color); padding: 0 2rem; background-image: url("../images/common/arrow-bl.png"); background-repeat: no-repeat; background-position: center right 2rem; background-size: 0.65rem; }
.c-btn:hover{ opacity: 1; background-color: var(--base-color); color: #fff; background-image: url("../images/common/arrow-wt.png"); }
.c-btn.c-btn--right{ margin-left: auto; }

@media(min-width: 769px){
	.sp{ display: none !important; }
}

.l-header{ width: 100%; height: 10rem; padding-left: 3vw; display: flex; justify-content: space-between; align-items: center; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 99; }

.l-header input{ display: none; }
.l-header__menu{ display: none; }

.l-header__nav{ margin-left: auto; margin-right: 4vw; }
.l-header__nav-list{ font-size: 1.2rem; }
.l-header__nav-list-item{ display: inline-block; }

@media(min-width: 769px){
.l-header__nav-list-item:not(:last-child){ margin-right: 2vw; }
}

.l-header__entry{ display: flex; width: 11rem; height: 100%; justify-content: center; align-items: center; font-family: var(--en-font); font-weight: 600; font-size: 1.6rem; color: #fff; background-image: linear-gradient(45deg,var(--gra-color01)); position: relative; z-index: 0; }
.l-header__entry:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: #999; mix-blend-mode: multiply; transition: .5s; opacity: 0; }
.l-header__entry:after{ content: ""; width: 0.65rem; height: 1.1rem; margin-left: 0.8rem;
	background-image: url("../images/common/arrow-wt.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.l-header__entry:hover{ opacity: 1; }
.l-header__entry:hover:before{ opacity: 1; }

.l-footer{ padding: 46rem 0 1rem; background-image: url("../images/common/webp/footer-bg.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; }
.l-footer__wrap{ display: flex; justify-content: space-between; margin-bottom: 5rem; }
.l-footer__sitemap{ display: flex; font-size: 1.2rem; line-height: 2.5; }
.l-footer__sitemap-list:not(:last-child){ margin-right: 3rem; }

.l-footer__copy{ display: block; text-align: center; font-size: 1.2rem; }

@media(max-width: 768px){
	html{ font-size: 2.66vw; }
	body{ font-size: 1.4rem; }
	p{ line-height: 2; letter-spacing: .1em; }

	.pc{ display: none !important; }

	.body-wrap{ padding-top: 7rem; }
	.wrap{ width: 100%; padding-left: 3rem; padding-right: 3rem; }
	.wrap.midium{ width: 100%; }

	.c-btn{ margin-left: auto; margin-right: auto; }

	.l-header{ height: 7rem; padding-left: 1.3rem; position: absolute; }
	.l-header__logo--img{ width: 20rem; height: auto; }

	.l-header__menu{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 9rem; height: 7rem; position: fixed; top: 0; right: 0; z-index: 999; }
	.l-header__menu::before,
	.l-header__menu::after{ content: ""; width: 5rem; height: 1px; background-color: var(--base-color); transition: .5s; }
	.l-header__menu::before{ margin-bottom: 1rem; }
	.l-header input:checked ~ .l-header__menu::before{ transform: rotate(45deg) translate(0.4rem,0.1rem); }
	.l-header input:checked ~ .l-header__menu::after{ transform: rotate(-45deg) translate(0.6rem,-0.4rem); }

	.l-header__entry{ width: 100%; height: 6rem; position: fixed; left: 0; bottom: 0; z-index: 999; }

	.l-header__nav{ width: 100%; height: 100%; margin: 0; background-color: #fff; background-image: url("../images/common/logo.png"); background-repeat: no-repeat; background-position: top 1.3rem left 1.3rem; background-size: 20rem; padding: 18vh 5rem 0; position: fixed; top: 0; right: 0; z-index: 99; transition: .5s; opacity: 0; visibility: hidden; }
	
	.l-header input:checked ~ .l-header__nav{ opacity: 1; visibility: visible; }

	.l-header__nav-list{ font-size: 1.6rem; text-align: center; }
	.l-header__nav-list-item,
	.l-header__nav-list-item a{ display: block; }
	.l-header__nav-list-item:not(:last-child){ border-bottom: 1px solid #f2f2f2; }
	.l-header__nav-list-item a{ padding: 1.5rem 0; }

	.l-footer{ padding: 21rem 0 1rem; margin-bottom: 6rem; background-image: url("../images/common/webp/footer-bg-sp.webp"); }
	.l-footer__wrap{ display: block; padding: 0 2.5rem; }
	.l-footer__logo{ margin-bottom: 2rem; }
	.l-footer__logo img{ width: 20rem; }
	.l-footer__sitemap{ font-size: 1.1rem; letter-spacing: 0; justify-content: space-between; }
	.l-footer__sitemap-list:not(:last-child) { margin-right: 1rem; }

}