@charset "utf-8";
/*css初期設定 start*/
html {
	/*文字標準*/
	font-size: 62.5%;
	scroll-behavior: smooth;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
* {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}
body {
	min-height: 100vh;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.4;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

a {
	text-decoration: none;
	/*リンクデコレーションリセット*/
}

/*大きさの計算*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*hrリセット*/
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	width: 100%;
	margin: 0 auto;
	line-height: 1.9;
	/*文字詰め*/
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	/*スマホ横向き時のフォントサイズリセット*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
	letter-spacing: 2px;
	/* background-color: var(--bgColor); */
}

/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}
textarea:not([rows]) {
	min-height: 10em;
}

:target {
	scroll-margin-block: 5ex;
}

/*画像の調整*/
img,
picture {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
/*hrリセット*/
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:root {
	--mrg-s1: 2.5%;
	--mrg-s2: 3.02%;
	--mrg-m1: 6.04%;
	--mrg-m2: 7.56%;
	--mrg-l1: 12.5%;
	--mrg-l2: 15.11%;
	--mrg-l3: 18.75%;
	--mrg-xl1: 23.43%;
	--mrg-xl2: 30.22%;
	--mainColor: #595757;
	--bgColor: #fbf9f4;
	/* --accentColor: #707070; */
}

@media only screen and (max-width: 1024px) {
	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}

	.br-sp {
		display: block;
	}

	.br-pc {
		display: none;
	}
}

@media only screen and (min-width: 1025px) {
	.sp {
		display: none !important;
	}

	.pc {
		display: block !important;
	}

	.br-sp {
		display: none;
	}

	.br-pc {
		display: block;
	}
}
span.inline-block {
	display: inline-block;
	vertical-align: baseline;
}

span.ir_br {
	display: inline-block;
}
p {
	margin-top: 2.6rem;
	font: normal 1.4rem / 1.9 'Noto Sans JP', sans-serif;
	letter-spacing: 0.75px;
}

/*ここまでは基本変更しない（ヘッダーフッターが崩れる可能性があります*/
/*メインcss*/
.main_contents {
	display: block;
	width: 100%;
	max-width: 1920px;
	/* width: 98%; */
	margin: 0 auto;
	font-weight: 400;
	color: var(--mainColor);
}

.wrapper {
	max-width: 1300px;
	width: 92%;
	margin: 0 auto;
}
.top_sec {
	margin: 0 auto;
	text-align: left;
}
.title_sec {
	width: fit-content;
	margin: 5% auto 15% 1%;
}

.title_sec h1 .eng {
	line-height: 1.1;
	/* font-size: clamp(4rem, 5.33vw, 5.5rem); */
	font-size: clamp(3.5rem, 6.33vw, 6.5rem);
	text-transform: capitalize;
}
.title_sec h1 .eng.sub_txt {
	width: 100%;
	margin-left: 0.2em;
	display: block;
	line-height: 1;
	font-size: clamp(1.25rem, 2.21vw, 2.32rem);
}
.title_sec .ja {
	line-height: 1.5;
	font-size: clamp(1.6rem, 3vw, 2.8rem);
	font-weight: 400;
}

.eng {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0.5px;
	vertical-align: baseline;
}

.style_box {
	display: flex;
	gap: 10px;
}
.look {
	padding-bottom: 15%;
}
.look.look04 {
	padding-bottom: 0;
}
/* ========== flex共通 ========== */
.flex {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flex.flex_reverse {
	flex-direction: column-reverse;
}
/* ===== */

.flex_item,
.txt_box {
	max-width: 600px;
	width: auto;
}
.style_num_base {
	position: relative;
}
.flex_item h2.style_num {
	position: absolute;
	top: -0.9em;
	z-index: 10;
	color: var(--mainColor);
	font-size: clamp(3.5rem, 6.33vw, 6.5rem);
}
.txt_box {
	/* width: 50%; */
	padding: 10% 0;
	display: grid;
	place-items: center;
	writing-mode: vertical-rl;
	/* flex-grow: 1; */
}
.txt_box .txt_flex {
	line-height: 1.5;
	font-weight: normal;
}
.txt_box p {
	padding-top: 6em;
	line-height: 3;
}
.txt_box .ja {
	font-family: inherit;
	font-size: clamp(1.5rem, 2.8vw, 2.4rem);
	font-weight: 300;
}
.txt_box .eng {
	line-height: 1.1;
	font-size: clamp(2.6rem, 5.33vw, 5.6rem);
}

.style_desc {
	max-width: 380px;
	padding: var(--mrg-m1) var(--mrg-s1);
	text-align: justify;
}
.style_desc span.eng {
	font-size: 1.1em;
	font-weight: 500;
}
.style_desc_title {
	line-height: 1.7;
	color: var(--mainColor);
	font-size: clamp(1.6rem, 4.26vw, 2rem);
	font-weight: 500;
}
.m_bottom {
	margin-bottom: 1em;
}

.cvSec {
	display: block;
	width: 100%;
	text-align: center;
	margin: 10% auto;
}
.cvSec a.cvBtn {
	width: 70%;
	max-width: 450px;
	text-align: center;
	margin: 0 auto 13%;
	border-radius: 2px;
	background-color: var(--mainColor);
	font-size: clamp(1.4rem, 3.73vw, 1.8rem);
	padding: 1% 0;
	color: #fff;
}
@media (any-hover: hover) {
	.cvSec a.cvBtn:hover {
		opacity: 0.8;
		transition: 0.3s;
	}
}
/* ========== fade-in設定 ========== */
.fadein {
	opacity: 0;
	transform: translate(0, 5 0px);
	/* transition: all 1.5s; */
	transition: opacity 2s, visibility 1s, transform 1.5s;
}
.flex_reverse .flex_item.fadein {
	transition-delay: 0.5s;
}
.fadein.active {
	opacity: 1;
	transform: translate(0, 0);
}
@media screen and (max-width: 768px) {
	span.inline-block {
		display: inline;
	}
}

@media screen and (min-width: 769px) {
	.flex_item h2.style_num {
		top: -0.95em;
	}
}

@media screen and (min-width: 1025px) {
	/*  fade-in  */
	.flex_reverse .flex_item.fadein {
		transition-delay: 0;
	}

	.wrapper {
		max-width: 1400px;
	}
	.style_box {
		gap: 60px;
	}
	.flex {
		gap: 60px;
	}
	@media screen and (min-width: 1281px) {
		/* .style_desc {
			max-width: 500px;
			padding: var(--mrg-m1);
			padding-bottom: 0;
		} */
	}
}