@charset "utf-8";
/* CSS Document */
/* =========================================
	FV
========================================= */

#fv{
	position:relative;
	width:100%;
	height:calc(100vh - 58px);
	min-height:560px;
	overflow:hidden;
	background:#fff;
	margin-top: 58px;
	padding: 0;
}


/* ====	背景画像 ====================== */

.fv-bg{
	position:absolute;
	inset:0;
	z-index:1;
}

.fv-bg__item{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	opacity:0;
	transition:opacity 2s ease;
}

.fv-bg__item:first-child{
	opacity:1;
}

/* ==== フィルター =============== */
.fv-filter{
	position:absolute;
	inset:0;
	z-index:2;
	background-image:url("../img/index/fv-filter.png");
	background-position:left top;
	background-size:cover;
	background-repeat:no-repeat;
	pointer-events:none;
}

/* ====	FVコピー ================ */
.fv-copy{
	position:absolute;
	top:40%;
	left:6.5%;
	z-index:5;
	transform:translateY(-58%);
}


.fv-copy h2{
	margin:0;
	font-family:"Noto Serif", serif;
	font-size:clamp(30px, 7vw, 62px);
	font-weight:500;
	line-height:1.45;
	letter-spacing:.08em;
	color:#000;
}

.fv-copy h2 span{
	color:var(--main);
}

.fv-copy p{
	margin:28px 0 0;
	font-size:clamp(13px, 1.1vw, 16px);
	font-weight:600;
	line-height:1.9;
	letter-spacing:.04em;
	color:#000;
}

/* ====	ピンクライン ============================ */
.fv-line{
	position:absolute;
	z-index:4;
	top:0;
	right:32%;
	width:450px;
	height:100%;
	pointer-events:none;
	transform: rotate(-7deg);
}

.fv-line::before{
	content:"";
	position:absolute;
	top:-10%;
	left:50%;
	width:100%;
	height:120%;
	background:url("../img/index/fv-line.png")
		center top
		/contain
		no-repeat;
	transform:translateX(-50%);
}


/* ==== ネイビー下部 ============== */

.fv-bottom{
	position:absolute;

	left:0;
	bottom:0;

	z-index:6;

	width:100%;
	height:300px;

	background:var(--navy);

	/* 上端だけを斜めにする */
	clip-path:polygon(
		0 0,
		100% 100%,
		100% 100%,
		0 100%
	);
}


/* === 下部コンテンツ ==================== */

.fv-bottom__inner{
	position:absolute;
	left:6.5%;
	bottom:0;
	width:75%;
	height:185px;
	display:flex;
	align-items:flex-start;
}


/* ===	テキスト ================= */

.fv-bottom__text{
	position:relative;

	width:430px;

	padding-left:20px;

	box-sizing:border-box;

	color:#fff;
}


/* ピンクの縦ライン */

.fv-bottom__text::before{
	content:"";

	position:absolute;

	left:0;
	top:50%;

	width:2px;
	height:48px;

	background:var(--main);

	transform:translateY(-50%);
}


/* 見出し */

.fv-bottom__text h2{
	margin:0;

	font-size:clamp(17px, 2.4vw, 20px);
	font-weight:600;

	line-height:1.7;

	letter-spacing:.04em;
}


/* 説明文 */

.fv-bottom__text p{
	margin:12px 0 0;

	font-size:clamp(12px, 1.6vw, 13px);
	font-weight:400;

	line-height:1.8;

	letter-spacing:.03em;
}


/* ====	地図 ================== */

.fv-map{
	width:160px;

	margin-left:40px;

	flex-shrink:0;
}


.fv-map img{
	display:block;

	width:100%;
	height:auto;
}

/* ==== レスポンシブ ============== */

@media screen and (max-width:900px){

	.fv-copy{
		left:7%;
	}

	.fv-line{
		width:320px;
		right:15%;
	}

	.fv-bottom{
		clip-path:none;
	}

	.fv-bottom__inner{
		left:7%;
		width:86%;
	}

	.fv-bottom__text{
		width:auto;
		max-width:360px;
	}
}

@media screen and (max-width:640px){

	#fv{
		min-height:620px;
	}

	.fv-copy{
		top:36%;
		left:6%;
		width:88%;
	}

	.fv-line{
		display:none;
	}

	.fv-bottom{
		height:auto;
		clip-path:none;
	}

	.fv-bottom__inner{
		position:static;
		width:auto;
		height:auto;
		flex-direction:column;
		align-items:flex-start;
		padding:26px 6% 26px;
		box-sizing:border-box;
	}

	.fv-bottom__text{
		width:100%;
		max-width:none;
	}

	.fv-map{
		width:110px;
		margin:18px 0 0 20px;
		align-self:flex-end;
	}
	.fv-filter {
		background-position: 23% top;
	}
}

/*====================================
Strength
====================================*/

.strength{
    padding: 110px 0;
    background: #fff;
}

.strength-lists{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 60px;
    border-left: 1px solid #ddd;
}

.strength-list{
    padding:10px clamp(1.125rem, -0.488rem + 2.52vw, 1.875rem);
    text-align: center;
    border-right: 1px solid #ddd;
}

.strength-list .icon{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.strength-list .icon img{
    width: 68px;
    height: auto;
}

.strength-list h3{
    font-size: clamp(1.125rem, -0.33rem + 2.27vw, 1.375rem);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 18px;
}

.strength-list p{
    font-size:clamp(0.75rem, -0.178rem + 1.45vw, 1rem);
    line-height: 2;
    color: #555;
}
@media (max-width:1024px){

    .strength-lists{
        grid-template-columns: repeat(2,1fr);
        border-top:1px solid #ddd;
    }

    .strength-list{
        padding:50px 30px;
        border-bottom:1px solid #ddd;
    }

}
@media (max-width:768px){

    .strength{
        padding:80px 0;
    }

    .strength-lists{
        grid-template-columns:1fr;
        margin-top:40px;
        border-left:none;
    }

    .strength-list{
        border-left:none;
        border-right:none;
        border-bottom:1px solid #ddd;
        padding:40px 20px;
    }

    .strength-list:first-child{
        border-top:1px solid #ddd;
    }

    .strength-list .icon{
        height:60px;
        margin-bottom:20px;
    }

    .strength-list .icon img{
        width:58px;
    }

    .strength-list p{
        line-height:1.9;
    }

}

/*===============================
workslink
====================================*/
.container{
   position: relative;
}
.line_img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.workbg{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image: url("../img/index/workbg.jpg");
   background-size: cover;
   background-position: bottom;
   z-index: -1;
}
.worklink{
	color: #fff;
	text-shadow: 2px 2px 5px #333;
	text-align: center;
}
.worklink h3{
	font-size: clamp(1.125rem, 0.75rem + 1.67vw, 2rem);
	margin-bottom:min(35px,4vh);
}
.workbtn{
	padding: clamp(12px, 2vw, 15px) clamp(20px, 4vw, 30px);
	border: 1px solid #fff;
	color: #fff;
	background: rgba(13,3,47,.6);
	margin: 0 auto;
	display: flex;
	gap:clamp(14px, 3vw, 30px);
	align-items: center;
	width: max-content;
	max-width: 100%;
	font-size: clamp(1rem, 2.6vw, 1.5rem);
	transition: .4s all;
}
.workbtn:hover{
	background: rgba(13,3,47,1);
	letter-spacing: .1rem;
	transition: .4s all;
}

@media screen and (max-width:600px){
	.worklink h3{
		max-width:100%;
		margin-left:auto;
		margin-right:auto;
	}
}

/* =========================
   WORKS
========================= */

.worklist {
	position: relative;
	overflow: hidden;
	background: #fff;
}

.workgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px 30px;
	margin: 0 auto;
}

.works {
	min-width: 0;
	text-align: center;
}

.works figure {
	position: relative;
	overflow: hidden;
	margin: 0 0 15px;
	aspect-ratio: 3 / 2;
	background: #eee;
}

.works figure img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition:
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.7s ease;
}

.works:hover figure img {
	transform: scale(1.04);
	filter: brightness(1.04);
}

.works p {
	margin: 0;
	color: #111;
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
}


/* =========================
   背景のピンクライン
========================= */

.work-effect {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	will-change: transform, clip-path, opacity;
}

.work-effect img {
	width: 100%;
	height: auto;
	display: block;
}

/* 右上 */

.work-effect--right {
    top: 20px;
    right: -8%;
    width: clamp(170px, 20vw, 350px);
    transform: translate(140px, -100px);
    clip-path: inset(0 0 100% 100%);
}

/* 左下 */

.work-effect--left {
	left: -8%;
	bottom: 50px;
	width: clamp(150px, 20vw, 350px);
	transform: translate(-140px, 100px) rotate(180deg);
	clip-path: inset(100% 100% 0 0);
}


/* 表示時 */

.worklist.is-show .work-effect--right {
	animation: drawLineRight 1.25s
		cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.worklist.is-show .work-effect--left {
	animation: drawLineLeft 1.25s
		cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
	animation-delay: 1s;
}


/* =========================
   レスポンシブ
========================= */

@media screen and (max-width: 900px) {
	.workgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 680px;
	}

	.work-effect--right {
		right: -60px;
	}

	.work-effect--left {
		left: -65px;
	}
}

@media screen and (max-width: 600px) {
	.sec-head-ja {
		margin-bottom: 30px;
	}

	.workgrid {
		grid-template-columns: 1fr;
		gap: 30px;
		width: min(88%, 420px);
	}

	.work-effect--right {
		top: 10px;
		right: -65px;
		width: 150px;
		opacity: 0;
	}

	.work-effect--left {
		left: -70px;
		bottom: 20px;
		width: 145px;
	}
}


/* 動きを減らす設定のユーザー向け */

@media (prefers-reduced-motion: reduce) {
	.work-effect,
	.worklist.is-show .work-effect {
		opacity: 1;
		animation: none;
		clip-path: inset(0);
	}

	.work-effect--right {
		transform: none;
	}

	.work-effect--left {
		transform: rotate(180deg);
	}

	.works figure img {
		transition: none;
	}
}

/* =========================
   AREA
========================= */

.area {
	position: relative;
	overflow: hidden;
	background: #eee;
	z-index: 1;
	padding: 0;
}

.area-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
	align-items: center;
	gap: clamp(40px, 7vw, 100px);
	min-height: 360px;
	position: relative;
	z-index: 2;
}


/* =========================
   左側テキスト
========================= */

.area-text {
}
.area-description {
	margin: 0;
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.04em;
}


/* =========================
   地図
========================= */

.area-map {
	position: relative;
	width: 100%;
	max-width: 470px;
	margin-left: auto;
}

.area-map img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}


/* =========================
   表示アニメーション
========================= */

.area-text,
.area-map {
	opacity: 0;
	will-change: opacity, transform;
}

.area-text {
	transform: translateX(-50px);
}

.area-map {
	transform: translateX(70px);
}

.area.is-show .area-text {
	animation: areaTextIn 0.9s
		cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.area.is-show .area-map {
	animation: areaMapIn 1.1s
		cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}


/* =========================
   タブレット
========================= */

@media screen and (max-width: 900px) {
	.area-content {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
		gap: 30px;
	}
}


/* =========================
   スマートフォン
========================= */

@media screen and (max-width: 700px) {
	.area {
		padding: 65px 0 30px;
	}

	.area-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		min-height: 0;
	}

	.area-description {
		line-height: 1.8;
	}

	.area-map {
		width: min(90%, 400px);
		margin: -10px -30px 0 auto;
	}

}


/* 動きを減らす設定 */

@media (prefers-reduced-motion: reduce) {
	.area-text,
	.area-map {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	.area-point {
		animation: none !important;
	}
}

/* =========================
   NEWS
========================= */

.news {
	position: relative;
	overflow: hidden;
	padding: clamp(70px, 8vw, 110px) 0;
	background: #fff;
}

.news-container {
	position: relative;
	z-index: 2;
	width: min(100%, 890px);
	margin: 0 auto;
}


/* お知らせ見出しのみ横並び */

.news-head {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 38px;
}

.news-head .sec-head-en {
	flex-shrink: 0;
	margin: 0;
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

.news-head .sec-head-ja {
	margin: 0;
	font-size: clamp(25px, 2.5vw, 32px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.03em;
}


/* =========================
   お知らせ一覧
========================= */

.news-list {
	width: calc(100% - 55px);
	margin-left: 55px;
	border-top: 1px solid #c7c7c7;
}

.news-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 30px;
	align-items: center;
	gap: 18px;
	min-height: 64px;
	padding: 12px 22px;
	border-bottom: 1px solid #c7c7c7;
	color: #555;
	text-decoration: none;
	transition:
		color 0.3s ease,
		background-color 0.3s ease;
}

.news-item time {
	color: #777;
	font-size: clamp(12px, 1.4vw, 14px);
	line-height: 1.5;
	white-space: nowrap;
}

.news-item p {
	margin: 0;
	font-size: clamp(14px, 1.6vw, 15px);
	font-weight: 500;
	line-height: 1.7;
}

.news-arrow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--main);
	font-size: 21px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.news-item:hover {
	color: var(--main);
	background: rgba(225, 0, 105, 0.025);
}

.news-item:hover .news-arrow {
	transform: translateX(6px);
}


/* =========================
   背景ライン位置調整
========================= */

.news .work-effect--left {
	bottom: 0;
	bottom: auto;
	left: -7%;
	width: clamp(150px, 20vw, 320px);
	transform: translate(-200px, -100px) rotate(0deg);
	clip-path: inset(0 100% 100% 0);
}

.news .work-effect--right {
	top: 0;
	right: -7%;
	width: clamp(170px, 20vw, 320px);
	transform: translate(140px, -80px);
	clip-path: inset(0 0 100% 100%);
}


/* NEWS表示時 */

.news.is-show .work-effect--left {
	animation: newsLineLeft 1.2s
		cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.news.is-show .work-effect--right {
	animation: drawLineRight 1.25s
		cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* =========================
   一覧の表示アニメーション
========================= */

.news-head,
.news-item {
	opacity: 0;
	transform: translateY(25px);
}

.news.is-show .news-head {
	animation: newsContentIn 0.7s
		cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.news.is-show .news-item {
	animation: newsContentIn 0.7s
		cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.news.is-show .news-item:nth-child(1) {
	animation-delay: 0.3s;
}

.news.is-show .news-item:nth-child(2) {
	animation-delay: 0.4s;
}

.news.is-show .news-item:nth-child(3) {
	animation-delay: 0.5s;
}
.news-more{

    margin-top:55px;

    display:flex;

    justify-content:flex-end;

}

.news-more a{

    display:flex;

    align-items:center;

    gap:18px;

    color:#222;

    text-decoration:none;

    position:relative;

    padding-bottom:12px;

}

.news-more a::before{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:1px;

    background:#ddd;

}

.news-more a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;

    height:2px;

    background:#d6007f;

    transition:.4s;

}

.news-more a:hover::after{

    width:100%;

}

.news-more i{

    font-style:normal;

    color:#d6007f;

    font-size:18px;

    transition:.3s;

}

.news-more a:hover i{

    transform:translateX(6px);

}
/* =========================
   タブレット
========================= */

@media screen and (max-width: 900px) {
	.news-container {
		width: min(90%, 760px);
	}

	.news-list {
		width: calc(100% - 30px);
		margin-left: 30px;
	}

	.news-item {
		grid-template-columns: 105px minmax(0, 1fr) 25px;
		padding-right: 15px;
		padding-left: 15px;
	}
}


/* =========================
   スマートフォン
========================= */

@media screen and (max-width: 600px) {
	.news {
		padding: 65px 0;
	}

	.news-container {
		width: 88%;
	}

	.news-head {
		gap: 12px;
		margin-bottom: 28px;
	}

	.news-list {
		width: 100%;
		margin-left: 0;
	}

	.news-item {
		position: relative;
		display: block;
		min-height: auto;
		padding: 17px 34px 17px 5px;
	}

	.news-item time {
		display: block;
		margin-bottom: 5px;
	}

	.news-arrow {
		position: absolute;
		top: 50%;
		right: 7px;
		transform: translateY(-50%);
	}

	.news-item:hover .news-arrow {
		transform: translate(5px, -50%);
	}

	.news .work-effect--left {
		top: 5px;
		left: -65px;
		width: 140px;
	}

	.news .work-effect--right {
		top: 10px;
		right: -70px;
		width: 155px;
	}
}


/* 動きを減らす設定 */

@media (prefers-reduced-motion: reduce) {
	.news-head,
	.news-item,
	.news .work-effect {
		opacity: 1;
		transform: none;
		animation: none !important;
		clip-path: inset(0);
	}
}

/* =========================
   CONTACT
========================= */

.contact-section {
	position: relative;
	overflow: hidden;
	min-height: clamp(500px, 42vw, 650px);
	padding: clamp(65px, 7vw, 95px) 0;
	background:
		url("../img/common/ctabg.jpg")
		center center / cover no-repeat;
	color: #fff;
}


/* 左側を暗くするグラデーション */

.contact-section__overlay{
	position:absolute;
	inset:0;
	z-index:1;

	background:linear-gradient(
		90deg,
		rgba(5,8,20,.92) 0%,
		rgba(13,3,47,.45) 100%
	);

	/* 重點 */
	clip-path: polygon(
		0 0,
		68% 0,
		55% 100%,
		0 100%
	);
}

/* 必要に応じて全体を少し落ち着かせる */

.contact-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.08),
			rgba(0, 0, 0, 0.2)
		);
	pointer-events: none;
}


/* =========================
   斜めのピンクライン
========================= */

.contact-section__line {
	position: absolute;
	z-index: 2;
	top: -80px;
	left: 61%;
	width: 2px;
	height: 430px;
	background: var(--main);
	transform: rotate(17deg);
	transform-origin: top center;
	box-shadow: 0 0 0 0.5px var(--main);
	pointer-events: none;
}


/* =========================
   コンテンツ
========================= */

.contact-section .inner {
	position: relative;
	z-index: 3;
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

.contact-section__content {
	width: min(100%, 590px);
	padding-left: clamp(0px, 1vw, 15px);
}


/* CONTACT部分だけ見出し調整 */

.contact-section__head {
	align-items: flex-start;
	margin-bottom: 34px;
}

.contact-section__head .sec-head-en {
	margin: 0 0 25px;
	color: var(--main);
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

.contact-section__head .sec-head-ja {
	margin: 0;
	color: #fff;
	font-family:
		"Yu Mincho",
		"YuMincho",
		"Hiragino Mincho ProN",
		"Noto Serif JP",
		serif;
	font-size: clamp(32px, 3.3vw, 48px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.03em;
}


/* 本文 */

.contact-section__text {
	margin: 0 0 48px;
	font-size: clamp(14px, 1.25vw, 17px);
	font-weight: 600;
	line-height: 1.9;
	letter-spacing: 0.03em;
}


/* =========================
   ボタン
========================= */

.contact-section__button {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 24px;
	align-items: center;
	gap: 16px;
	width: min(100%, 375px);
	min-height: 58px;
	padding: 12px 28px 12px 34px;
	background: var(--main);
	color: #fff;
	text-decoration: none;
	transition:
		background-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.contact-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	color: #fff;
}

.contact-section__icon svg {
	display: block;
	width: 100%;
	height: auto;
}

.contact-section__button-text {
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.contact-section__arrow {
	font-size: 21px;
	line-height: 1;
	text-align: right;
	transition: transform 0.3s ease;
}

.contact-section__button:hover {
	background: #c90061;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.contact-section__button:hover .contact-section__arrow {
	transform: translateX(6px);
}


/* =========================
   表示アニメーション
========================= */

.contact-section__head,
.contact-section__text,
.contact-section__button {
	opacity: 0;
	transform: translateY(25px);
}

.contact-section__line {
	opacity: 0;
	transform:
		translateY(-120px)
		rotate(17deg)
		scaleY(0);
	transform-origin: top center;
}

.contact-section.is-show .contact-section__head {
	animation: contactFadeUp 0.8s
		cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.contact-section.is-show .contact-section__text {
	animation: contactFadeUp 0.8s
		cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.contact-section.is-show .contact-section__button {
	animation: contactFadeUp 0.8s
		cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.contact-section.is-show .contact-section__line {
	animation: contactLineDraw 1.1s
		cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}


/* =========================
   タブレット
========================= */

@media screen and (max-width: 900px) {
	.contact-section {
		background-position: 58% center;
	}

	.contact-section__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(4, 8, 19, 0.95) 0%,
				rgba(7, 11, 26, 0.9) 42%,
				rgba(12, 16, 36, 0.55) 70%,
				rgba(12, 16, 36, 0.1) 100%
			);
	}

	.contact-section__line {
		left: 70%;
	}
}


/* =========================
   スマートフォン
========================= */

@media screen and (max-width: 600px) {
	.contact-section {
		min-height: auto;
		padding: 65px 0;
		background-position: 62% center;
	}

	.contact-section__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(4, 8, 19, 0.94) 0%,
				rgba(7, 11, 26, 0.88) 65%,
				rgba(12, 16, 36, 0.65) 100%
			);
		clip-path: polygon(0 0, 90% 0, 35% 100%, 0 100%);
	}

	.contact-section__content {
		width: 100%;
		padding-left: 0;
	}

	.contact-section__head {
		margin-bottom: 25px;
	}

	.contact-section__head .sec-head-en {
		margin-bottom: 17px;
	}

	.contact-section__head .sec-head-ja {
		font-size: clamp(27px, 8vw, 36px);
		line-height: 1.45;
	}

	.contact-section__text {
		margin-bottom: 35px;
		font-size: 14px;
		line-height: 1.85;
	}

	.contact-section__button {
		grid-template-columns: 32px minmax(0, 1fr) 20px;
		gap: 12px;
		width: 100%;
		min-height: 56px;
		padding: 11px 20px;
	}

	.contact-section__icon {
		width: 31px;
	}

	.contact-section__button-text {
		white-space: normal;
	}

	.contact-section__line {
		top: -30px;
		left: 83%;
		height: 260px;
		opacity: 0.8;
	}
}


/* 動きを減らす設定 */

@media (prefers-reduced-motion: reduce) {
	.contact-section__head,
	.contact-section__text,
	.contact-section__button,
	.contact-section__line {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	.contact-section__line {
		transform: rotate(17deg);
	}
}