@charset "UTF-8";

/* ===============================
	変数定義
=============================== */
:root {
	--color-white-gray: #f5f5f5;
	--color-light-gray: #d9d9d9;
	--color-gray: #959595;
	--color-red: #BA2638;
	--margin-large: 6rem;
	--margin-medium: 4rem;
	--margin-small: 2rem;

	/* フォント */

	--noto: "Noto Sans JP", sans-serif;
	--zen: "Zen Kaku Gothic New", sans-serif;
	--maru: "Kiwi Maru", serif;
	--round: "M PLUS Rounded 1c", sans-serif;
	--arimo: "Arimo", sans-serif;
	--inter: "Inter", sans-serif;

}

/* ===============================
	共通スタイル
=============================== */

/* アニメーション初期化 */

.common-fadeUp,
.link-anime,
.interview-img,
.text-anime,
.title-anime,
.number-anime {
	opacity: 0;
}


/* マージン */
.mts {
	margin-top: var(--margin-small);
}

.mtm {
	margin-top: var(--margin-medium)
}

.mtl {
	margin-top: var(--margin-large);
}

.mt1em {
	margin-top: 1em;
}

/* ユーティリティ */

.order1 {
	order: 1;
}

.order2 {
	order: 2;
}

.overflow-h {
	overflow: hidden;
}

.sp-1em {
	padding-right: 1em;
}

/* 共通 */
article {
	font-family: var(--zen);
	font-weight: 400;
}

em {
	color: var(--color-red);
}

sup {
	color: #000;
}

.kome li::before {
	color: #000;
}

/* MV */


.mv {
	position: relative;
	overflow: hidden;
	block-size: 51vw;
	max-block-size: 60rem;
}

.mv-img {
	block-size: 100%;
}

.mv-img img {
	block-size: 100%;
	object-fit: cover;
}

.mv-base-width {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-inline-size: 1400px;
	margin-inline: 100px;
	inline-size: 100%;
	block-size: 100%;
}

.logo {
	position: absolute;
	top: min(5vw, 10%);
	left: 0;
	inline-size: 370px;
}

.mv-title {
	position: absolute;
	top: min(29vw, 57%);
	left: 0;
	transform: rotate(-2.5deg);
}

.mv-sub-text {
	inline-size: 50rem;
	position: absolute;
	top: min(18vw, 40%);
	left: 0;
	font-size: 3.2rem;
	font-weight: 500;
	font-family: var(--maru);
	transform: rotate(-2.5deg);
	opacity: 0;
	animation: mv-title-anime 1s 0.5s forwards;
}

.mv-title-text:first-of-type {
	margin-left: -30px;
}

.mv-title-text:nth-of-type(2) {
	padding-inline: 0px 5px;
}

.mv-title-text {
	margin-top: 2rem;
	padding-inline: 40px 5px;
	inline-size: fit-content;
	display: block;
	line-height: 1.6;
	font-size: clamp(4.5rem, 3.4vw, 5rem);
	font-weight: bold;
	font-family: var(--noto);
	color: #fff;
	letter-spacing: 2.5px;
	background-color: rgba(186, 38, 56, 0.80);
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	animation: mv-title-anime 1.2s 0.8s forwards;
}

.mv-title-text:nth-child(2) {
	animation: mv-title-anime 1.2s 1s forwards;
}


.mv-title-text span {
	font-size: clamp(3.5rem, 2.7vw, 4rem);
}

@keyframes mv-title-anime {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

.sp-mv-title {
	display: none;
}

/* イントロ */
.intro-text-container {
	margin-top: 11rem;
}

.intro-text {
	font-size: 1.7rem;
	text-align: center;
	line-height: 1.8;
	font-weight: 700;
	color: var(--color-red);
}

.intro-profile-container {
	position: relative;
	margin-top: 11rem;
	margin-inline: auto;
	padding: 40px 50px;
	inline-size: 77%;

	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"A B"
		"A C";
	column-gap: 25px;
}

.profile-top-border::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	inline-size: 49%;
	block-size: 1px;
	background-color: var(--color-red);
}

.profile-top-border::after {
	content: "";
	position: absolute;
	top: 0;
	left: 15px;
	inline-size: 1px;
	block-size: 190px;
	background-color: var(--color-red);
}

.profile-bottom-border::before {
	content: "";
	position: absolute;
	bottom: 15px;
	right: 0;
	inline-size: 49%;
	block-size: 1px;
	background-color: var(--color-red);
}

.profile-bottom-border::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 15px;
	inline-size: 1px;
	block-size: 190px;
	background-color: var(--color-red);
}

.profile-name {
	font-size: 1.7rem;
	grid-area: B;
	font-weight: bold;
}

.profile-text {
	font-size: 1.4rem;
	grid-area: C;
}

.profile-name span {
	display: block;
	font-size: 1.4rem;
	color: var(--color-red);
	font-weight: 600;
}

.profile-img {
	inline-size: 160px;
	border-radius: 50%;
	grid-area: A;
}

.profile-img img {
	border-radius: 50%;
}

/* ページリンクエリア */

.page-link-area {
	margin-top: 7rem;
	padding-top: 10rem;
}

.point-block-area {
	text-align: center;
}

.point-block {
	position: relative;
	padding-inline: 2em;
	display: inline-block;
}

.point {
	font-size: 3rem;
	font-weight: bold;
}

.point-block::before {
	content: "";
	width: 30px;
	height: 2px;
	background-color: #222;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(70deg);
}

.point-block::after {
	content: "";
	width: 30px;
	height: 2px;
	background-color: #222;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%) rotate(-70deg);
}

.page-link-list {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(21.5rem, 1fr));
	gap: 20px;
}

.page-link {
	display: block;
	padding: 40px 5px 20px;
	border: 1px solid rgba(186, 38, 56, 0.4);
	box-shadow: 4px 4px 0 0 rgba(186, 38, 56, 0.4);
	transition: .2s;
}

.link-number {
	position: relative;
	z-index: 2;
	margin-inline: auto;
	inline-size: 42px;
}

.link-number::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-51%, -51%);
	inline-size: 60px;
	block-size: 60px;
	background-color: var(--color-red);
	border-radius: 50%;
}

.link-number img {
	filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.25));
}

.link-text {
	margin-top: 4rem;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}

.page-link span {
	display: block;
	text-align: center;
}

.link-arrow {
	display: block;
	margin-inline: auto;
	margin-top: 2rem;
	inline-size: 25px;
	block-size: 25px;
}

/* インタビューセクション */

.interview {
	padding-top: 10rem;
	margin-top: 10rem;
}



.interview-title {
	margin-top: 5rem;
	inline-size: fit-content;
}

.interview-title-wrapper {
	display: inline-block;
	padding-bottom: 10px;
}


.interview-title-wrapper>span {
	position: relative;
	display: inline;
	padding-bottom: 5px;
	font-size: 4rem;
	font-weight: 700;
	line-height: 2;
	border-bottom: 5px dotted #222;
}

.interview-contents-container {
	margin-top: 10rem;
	display: grid;
	grid-template-columns: 47% 47%;
	grid-template-rows: auto;
	justify-content: space-between;
}

.interview-text {
	margin-block: 3rem;
	font-size: 1.5rem;
	line-height: 1.8;
	font-weight: 500;
}

.interview-text em {
	font-weight: 500;
}

.interview-text:first-child {
	margin-top: 0;
}

.interview-text.last {
	margin-bottom: 0;
}

.interview-caption {
	color: #535353;
}

/* インタビューの数字 */


.interview-number-box {
	margin-left: -175px;
	white-space: nowrap;
	inline-size: fit-content;
}

.inteview-number-text {
	position: relative;
	padding: 10px 120px 10px 175px;
	inline-size: fit-content;
	text-align: right;
	color: #fff;
	background-color: var(--color-red);
	font-size: 1.3rem;
}

.number-anime {
	padding-top: 30px;
	max-width: 43rem;
	overflow: hidden;
}

.number {
	position: absolute;
	bottom: 6px;
	right: 10px;
	inline-size: 100px;
}

.interview:nth-of-type(6) .interview-number-box {
	margin-left: max(calc(50% - 50vw), -150px);
}

.interview:nth-of-type(6) .inteview-number-text {
	padding: 20px 125px 20px 155px;
	font-size: 1.5rem;
}



/* インタビューの写真 */

.interview-img {
	transform: translateY(70px);
}

.interview-img img {
	box-shadow: 10px 10px 0 0 rgba(186, 38, 56, 0.50);
}

.interview-img.left {
	margin-top: 10rem;
	max-inline-size: 580px;
	margin-left: -140px;
	margin-left: calc(50% - min(20vw, 400px));
}

.interview-img.right {
	margin-top: 10rem;
	transform: translateX(100px) translateY(70px);
	max-inline-size: 580px;
	inline-size: 35vw;
}

/* インタビューのコメント */
.interview-comment-block {
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-template-rows: auto;
}

.comment-img img {
	border-radius: 50%;
}

.interview-comment {
	position: relative;
}

.interview-comment.left {
	padding-left: 20px;
}

.interview-comment.left::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 2px;
	z-index: -1;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 18px solid #ba2638;
	border-left: 0;
	opacity: 0.2;
}

.interview-comment-wrapper {
	padding: 20px 30px;
	border-radius: 20px;
	border: 1px solid var(--color-red);
	background-color: #fff;
}

.interview-comment-wrapper p {
	font-size: 1.5rem;
	line-height: 1.8;
	font-weight: bold;
}

/* コラム */
.interview-column {
	position: relative;
	margin-top: 15rem;
	background-color: #FAEEEF;
}

.interview-column::after {
	content: "シャープ商品開発担当が解説！";
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	inline-size: 35rem;
	padding-block: 5px;
	font-size: 1.7rem;
	color: #fff;
	text-align: center;
	background-color: var(--color-red);
	border-top-right-radius: 20px;
	font-family: var(--zens);
	font-weight: 500;
	line-height: 2;
}

.column-wrapper {
	padding: 40px 10%;
}

.column-title {
	text-align: center;
}

.column-title span {
	display: inline;
	padding-bottom: 8px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 2.2;
	text-align: center;
	border-bottom: 4px dotted #222;
}

.column-contents {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: 45% 51%;
	grid-template-rows: auto;
	justify-content: space-between;
}

.column-contents.single {
	grid-template-columns: 1fr;
}

.column-text-container p {
	font-size: 1.5rem;
	line-height: 1.8;
	font-weight: 500;
}

.column-text-container p em {
	font-weight: 500;
}

.column-caption {
	color: #535353;
}

/* しおりちゃんアイコン */

.shiori-box {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: fit-content;
	gap: 2rem;
	margin-top: 4rem;
}

.shiori-text span {
	display: block;
	font-size: 1.3rem;
	font-weight: bold;
}

.shiori-img {
	inline-size: 150px;

}

.shiori-img img {
	border-radius: 50%;
	box-shadow: 4px 4px 0 0 rgba(186, 38, 56, 0.50);
}


/* メッセージセクション */

.message {
	margin-top: 15rem;
	position: relative;
	background: rgba(186, 38, 56, 0.05);
	padding-block: 8rem;
}

.message::before,
.message::after {
	content: "";
	position: absolute;
	left: 0;
	inline-size: 100%;
	block-size: 5px;
	background-image: linear-gradient(to right, #fff 10px, transparent 10px);
	background-size: 20px 5px;
	background-repeat: repeat-x;
	background-position: left bottom;
}

.message::before {
	top: 20px;
}

.message::after {
	bottom: 20px;
}

.message-icon-box {
	text-align: center;
}

.message-icon {
	position: relative;
	display: inline-block;
	padding-inline: 1.5em;
	font-size: 2rem;
	color: var(--color-red);
	font-weight: bold;
}

.message-icon::before {
	content: "";
	width: 20px;
	height: 2px;
	background-color: var(--color-red);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(70deg);
}

.message-icon::after {
	content: "";
	width: 20px;
	height: 2px;
	background-color: var(--color-red);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%) rotate(-70deg);
}

.message-title {
	margin-top: 1rem;
	text-align: center;
	font-size: 4rem;
	font-weight: bold;
}

.message-container {
	margin-top: 5rem;
	margin-inline: auto;
	max-inline-size: 1000px;
	display: grid;
	grid-template-columns: 50% 42%;
	grid-template-rows: auto;
	justify-content: space-between;
}

.message-text-container p {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.8;
}

.message-img img {
	box-shadow: 10px 10px 0 0 rgba(186, 38, 56, 0.50);
}

/* ページキャプション */

.page-caption-area {
	margin-top: 10rem;
}

.page-caption {
	font-size: 1.3rem;
	text-align: right;
	line-height: 1.8;
}

/* 製品紹介 */

.product {
	margin-top: 10rem;
}

.product-title {
	padding-block: 5px;
	color: #fff;
	font-size: 4rem;
	text-align: center;
	font-weight: bold;
	line-height: 1.4;
	background-color: var(--color-red);
}

.product-subtitle {
	position: relative;
	font-size: 4rem;
	line-height: 1.4;
	font-weight: bold;
}

.product-subtitle span {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	padding-inline: 25px;
	color: var(--color-red);
	font-size: 2rem;
	font-weight: bold;
}

.product-subtitle span::before {
	content: "";
	width: 20px;
	height: 2px;
	background-color: var(--color-red);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(70deg);
}

.product-subtitle span::after {
	content: "";
	width: 20px;
	height: 2px;
	background-color: var(--color-red);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%) rotate(-70deg);
}


.product-container {
	max-inline-size: 1080px;
	margin-top: 10rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 49% 50%;
	grid-template-rows: auto;
	justify-content: space-between;
}

.product-img-container {
	display: flex;
	column-gap: 60px;
}

.product-img {
	inline-size: 270px;
	font-size: 1.3rem;
	text-align: center;
}

.product-img span {
	font-family: var(--noto);
}

.product-info {
	margin-top: 4rem;
}

.product-ja {
	font-size: 1.8rem;
	font-family: var(--noto);
}

.product-name {
	font-size: 3.6rem;
	font-weight: bold;
	font-family: var(--noto);
}

.product-btn {
	margin-top: 3rem;
}

.product-btn a {
	position: relative;
	display: inline-block;
	inline-size: fit-content;
	padding: 7px 60px;
	font-size: 1.8rem;
	line-height: 1.8;
	color: #fff;
	font-weight: bold;
	background-color: var(--color-red);
	border: 1px solid var(--color-red);
	border-radius: 10px;
	box-shadow: 5px 5px 0 0 rgba(186, 38, 56, 0.30);
	transition: .1s;
}

.product-btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%) rotate(-45deg);
	display: block;
	inline-size: 10px;
	block-size: 10px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
}

/* ====================================
	専用スタイル（～1500px）
===================================== */
@media screen and (width <1500px) {

	.mv-sub-text {
		inline-size: 42rem;
		font-size: 2.8rem;
	}

	.mv-title-text {
		font-size: 3.8rem;
	}

	.mv-title-text span {
		font-size: 2.8rem;
	}


	.interview-img.left {
		max-inline-size: 450px;
		margin-left: 0;
	}

}

/* ====================================
	専用スタイル（～1200px）
===================================== */
@media screen and (width <1200px) {

	.logo {
		inline-size: 270px;
	}

	.mv-sub-text {
		inline-size: 38rem;
		font-size: 2.4rem;
	}

	.mv-title {
		top: 50%;
	}

	.mv-title-text {
		font-size: 3.4rem;
	}

	.mv-title-text span {
		font-size: 2.4rem;
	}

	/* ページリンク */
	.page-link-list {
		grid-template-columns: repeat(3, 1fr);
	}


	/* インタビューセクション */
	.interview-title span {
		font-size: 4rem;
	}


	/* 製品紹介 */
	.product-subtitle {
		font-size: 3rem;
	}

}


/* ====================================
	専用スタイル（～1080px）
===================================== */
@media screen and (width <1080px) {


	/* MV */

	.mv-base-width {
		margin-inline: 2.5%;
	}

	.mv-sub-text {
		top: 17vw;
		font-size: 2rem;
		inline-size: 30rem;
	}

	.mv-title-text {
		margin-top: 1rem;
		font-size: 2.5rem;
	}

	.mv-title-text span {
		font-size: 1.5rem;
	}


	/* インタビューセクション */
	.interview-title span {
		font-size: 2.8rem;
	}

	.interview-contents-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		margin-top: 5rem;
	}

	.interview-text-container {
		grid-column: 1;
		grid-row: 1;
	}

	.interview-img-container {
		margin-top: 6rem;
		inline-size: 95%;
		margin-inline: auto;
	}

	.interview-img.right {
		inline-size: 60vw;
	}

	/* コラム */

	.column-contents {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.column-wrapper {
		padding: 40px 5%;
	}

	.column-text-container {
		grid-column: 1;
		grid-row: 1;
	}

	.column-text-container p {
		display: inline;
	}

	.column-img {
		margin-top: 4rem;
	}

	/* メッセージセクション */

	.message-title {
		font-size: 2.8rem;
	}

	.message-icon::before,
	.message-icon::after {
		width: 15px;
	}

	.message-container {
		margin-top: 5rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		padding-inline: 1.5%;
	}

	.message-img {
		margin-top: 4rem;
	}

	.interview-img.right {
		transform: translateX(0px) translateY(70px);
	}

	.interview-img.left {
		max-inline-size: 580px;
		margin-left: auto;
	}


}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.sp-1em {
		padding-right: 0;
	}


	/* MV */

	.mv {
		block-size: 100%;
		max-block-size: none;
	}

	.mv-base-width {
		max-block-size: 100%;
		margin-inline: 4%;
	}


	.mv-sub-text,
	.mv-title {
		display: none;
	}

	.logo {
		top: 5%;
		inline-size: clamp(160px, 35vw, 270px);
	}

	.sp-mv-title {
		display: block;
		position: absolute;
		top: 17%;
		left: -7%;
		transform: rotate(-2.5deg);
	}


	.sp-mv-title .mv-title-text-sp {
		display: block;
		font-weight: bold;
		inline-size: fit-content;
		padding-inline: 30px 10px;
		padding-bottom: 2px;
		font-family: var(--noto);
		color: #fff;
		background-color: rgba(186, 38, 56, 0.80);
		line-height: 1.5;
		clip-path: inset(0 100% 0 0);
	}

	.sp-mv-title .mv-title-text-sp:first-of-type {
		font-size: clamp(2rem, 5.2vw, 4rem);
		letter-spacing: 1px;
		animation: mv-title-anime 1s 0.5s forwards;
	}

	.sp-mv-title .mv-title-text-sp:nth-of-type(2) {
		font-size: clamp(2.5rem, 6.5vw, 5rem);
		letter-spacing: 0.75px;
		animation: mv-title-anime 1s 0.8s forwards;
	}

	.sp-mv-title .mv-title-text-sp:nth-of-type(3) {
		font-size: clamp(2.5rem, 6.5vw, 5rem);
		letter-spacing: 1.25px;
		animation: mv-title-anime 1s 1.2s forwards;
	}

	.sp-mv-title .mv-title-text-sp:nth-of-type(n+2) {
		margin-top: 1rem;
	}

	.sp-mv-title .mv-title-text-sp span {
		font-size: clamp(1.5rem, 3.9vw, 3rem);
	}


	/* イントロ */
	.intro-text {
		display: inline;
		font-size: 1.5rem;
		text-align: left;
		font-weight: 500;
		line-height: 1.5;
	}

	.intro-text-container {
		margin-top: 5rem;
	}

	.intro-profile-container {
		margin-top: 5rem;
		padding: 40px;
		inline-size: 100%;
		grid-template-areas:
			"A B"
			"C C";
	}

	.profile-img {
		inline-size: 120px;
	}

	.profile-name {
		align-self: center;
	}

	.profile-text {
		margin-top: 3rem;
		font-size: 1.3rem;
	}

	.profile-top-border::after,
	.profile-bottom-border::after {
		block-size: 148px;
	}


	.profile-top-border::before,
	.profile-bottom-border::before {
		inline-size: 80%;
	}


	/* ページリンクエリア */

	.page-link-area {
		margin-top: 2.5rem;
		padding-top: 2.5rem;
	}

	.page-link-list {
		grid-template-columns: 1fr 1fr;
		margin-top: 2rem;
	}

	.point {
		/* padding-inline: 1.5em; */
		font-size: 1.8rem;
	}

	.point::before,
	.point::after {
		width: 20px;
	}

	.link-text {
		margin-top: 1rem;
		font-size: 1.3rem;
		line-height: 1.4;
	}

	.page-link {
		padding: 15px 5px 0px;
	}

	.link-number {
		inline-size: 30px;
	}

	.link-number::before {
		inline-size: 40px;
		block-size: 40px;
		transform: translate(-51%, -50%);
	}

	.link-arrow {
		margin-top: 0rem;
	}

	/* インタビューセクション */

	.interview {
		padding-top: 3rem;
		margin-top: 3rem;
	}

	.interview-title {
		margin-top: 2rem;
	}


	.interview-title span {
		font-size: 1.9rem;
	}

	.interview-title-wrapper>span {
		padding-bottom: 6px;
		line-height: 2.2;
		border-bottom: 3px dotted #222;
	}

	.interview-contents-container {
		margin-top: 4rem;
	}


	.interview-img-container {
		margin-top: 3rem;

	}

	.interview-img.sp-left {
		margin-left: calc(50% - 50vw);
	}

	.interview-img img {
		box-shadow: 6px 6px 0 0 rgba(186, 38, 56, 0.50);
	}

	.interview-img.left {
		margin-top: 4rem;
		inline-size: 226px;
		margin-right: calc(50% - 50vw + 6px)
	}

	.interview-img.right {
		margin-top: 4rem;
		margin-right: calc(50% - 50vw + 6px);
		margin-left: auto;
		inline-size: 226px;
	}

	.interview-text {
		font-size: 1.4rem;
	}

	/* インタビューの数字 */


	.interview-number-box {
		margin-left: -85px;
	}

	.inteview-number-text {
		padding: 10px 100px 10px 85px;
		font-size: 1.2rem;
	}

	.inteview-number-text p {
		line-height: 1.3;
	}

	.number-anime {
		padding-top: 30px;
		max-width: 30rem;
	}

	.number {
		position: absolute;
		bottom: 0;
		right: 5px;
		inline-size: 85px;
	}

	.interview:nth-of-type(6) .interview-number-box {
		margin-left: -6%;
	}

	.interview:nth-of-type(6) .inteview-number-text {
		padding: 15px 50px 15px;
		font-size: 1.2rem;
	}

	.interview-comment-wrapper {
		padding: 25px 20px;
	}

	.interview-comment-wrapper p {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.interview-text {
		margin-block: 1.5rem;
		line-height: 1.5;
	}

	.interview-text.last {
		line-height: 1.5;
	}


	.shiori-box {
		inline-size: 100%;
		justify-content: flex-end;
		gap: 0.5rem;
		margin-top: 1rem;
	}

	.shiori-img {
		order: 2;
		inline-size: 120px;
		flex-shrink: 0;
	}

	.shiori-text {
		text-align: right;
	}

	.shiori-text span {
		font-weight: 500;
	}

	/* コラム */

	.interview-column {
		margin-top: 9rem;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.column-wrapper {
		padding: 40px 6% 20px;
	}

	.column-title {
		text-align: left;
	}

	.column-title span {
		padding-bottom: 5px;
		font-size: 1.8rem;
		border-bottom: 3px dotted #222;
	}

	.interview-column::after {
		inline-size: 220px;
		font-size: 1.2rem;
	}

	.column-contents {
		margin-top: 3rem;
	}

	.column-text-container {
		font-size: 1.4rem;
	}

	.column-text-container p {
		line-height: 1.5;

	}

	.column-img {
		margin-top: 3rem;
	}

	.column-caption {
		margin-top: 1.5em;
	}

	.interview-comment.left::after {
		left: 7px;
	}

	/* メッセージ */

	.message {
		margin-top: 10rem;
		padding-block: 4.5rem 3rem;
	}

	.message-title {
		font-size: 1.9rem;
	}

	.message-icon {
		font-size: 1.5rem;
	}

	.message-container {
		margin-top: 3rem;
		padding-inline: 0;
	}

	.message-text-container p {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.page-caption-area {
		margin-top: 3rem;
	}

	.page-caption {
		font-size: 1.2rem;
		line-height: 1.6;
	}

	.message-img {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.message-img img {
		box-shadow: none;
	}

	.message::before,
	.message::after {
		block-size: 3px;
	}

	.message::after {
		bottom: 15px;
	}


	/* 製品紹介 */

	.product {
		margin-top: 10rem;
	}

	.product-title {
		padding-block: 5px;
		color: #fff;
		font-size: 2rem;
	}

	.product-container {
		margin-top: 7rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"title"
			"img"
			"info";
		place-items: center;
	}

	.product-text-container {
		display: contents;
	}

	.product-subtitle {
		padding-top: 0.7rem;
		grid-area: title;
		font-size: 2rem;
	}

	.product-subtitle span {
		font-size: 1.6rem;
		white-space: nowrap;
		left: 50%;
		transform: translate(-50%, -100%);
	}

	.product-img-container {
		column-gap: 20px;
		margin-top: 4rem;
		grid-area: img;
		justify-content: center;
	}

	.product-img {
		inline-size: 45%;
	}

	.product-img span {
		font-size: 1.2rem;
	}

	.product-info {
		margin-top: 3rem;
		grid-area: info;
		text-align: center;
	}

	.product-ja {
		font-size: 1.4rem;
	}

	.product-name {
		font-size: 2.6rem;
		line-height: 1.1;
	}

	.product-btn {
		margin-top: 1.5rem;
	}

	.product-btn a {
		padding: 7px 35px;
		font-size: 1.4rem;
		box-shadow: 5px 5px 0 0 rgba(186, 38, 56, 0.30);
	}

	.product-btn a::after {
		right: 17px;
	}


}


/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {
	:root {
		--margin-large: 8rem;
		--margin-medium: 6rem;
		--margin-small: 4rem;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	PC専用スタイル（1980px～）
===================================== */
@media print,
screen and (1980px <=width) {

	.mv {
		block-size: 850px;
		position: relative;
		max-block-size: none;
	}

	.mv-img {
		width: 100%;
		height: 100%;
	}

	.mv-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 80%;
		display: block;
	}

}


/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {


	a:hover {
		text-decoration: none;
	}

	.page-link:hover {
		background-color: rgba(186, 38, 56, 0.1);
	}

	.product-btn a:hover {
		background-color: #fff;
		color: var(--color-red);
	}


	.product-btn a:hover::after {
		border-right: 3px solid var(--color-red);
		border-bottom: 3px solid var(--color-red);
	}


}