@charset "UTF-8";

/* ====================================
	common style
 ==================================== */

/* --------- utility --------- */

.outer-base-width.base90 .base-width-pc {
	max-inline-size: 1080px;
}

a:hover {
	text-decoration: none;
}

article {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500 !important;
	font-size: 1.6rem;
	line-height: 1.8;
	color: #2F2525;
}

.exlink a {
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: #77434D;
	transition: .3s;
}

.exlink a:hover {
	color: #fff;
	background-color: #9D6C75;
}

article sup {
	color: #77434D;
}

br.step {
	display: block;
	content: "";
	margin: 1em 0;
}

em {
	font-size: 1.1em;
	color: #77434D;
}

.underline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.underline:hover {
	text-decoration: none;
}

.exlink a {
	display: block;
	inline-size: 100%;
	padding: 0.5rem 0;
	border-radius: 50px;
	box-shadow: 0px 6px 0px #00000029;
	margin-top: 2rem;
}

.photo-of img {
	inline-size: 100%;
	object-fit: cover;
}

/* flex base */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-container.sb {
	justify-content: space-between;
}

/* ----- 注釈 ----- */

/* base */
ul.cap {
	font-size: 1.2rem;
	line-height: 1.6;
	padding-left: 1.5em;
}

ul.cap li {
	text-indent: -1.5em;
}

ul.cap li:not(:last-of-type) {
	margin-bottom: 0.3em;
}

ul.cap li:before {
	margin-right: 0.5em;
	color: #77434D;
}

/* ※連番 */
ul.cap.komenum {
	padding-left: 2em;
	counter-reset: number 0;
}

ul.cap.komenum li {
	text-indent: -2em;
}

ul.cap.komenum li:before {
	counter-increment: number 1;
	content: "\203b"counter(number)"";
}

/* ※ */
ul.cap.kome li:before {
	content: "\203b";
}

/* ● */
ul.cap.kuromaru li:before {
	content: "●";
}

/* --------- base style --------- */

.question-unit {
	margin-block: 12rem;
}

/* #profile,
.question-unit,
.parallax {
	margin-bottom: 120px;
} */
.column-block {
	padding-bottom: 6rem;
}

h2 {
	inline-size: 100%;
	block-size: 200px;
	text-align: center;
	margin-bottom: 5rem;
}

h2 img {
	inline-size: auto;
	block-size: 100%;
}

/* --------- メインビジュアル --------- */

#main-visual {
	inline-size: 100%;
	background-color: #E8E1E1;
}

#main-visual .txt ul.inner li {
	margin-inline: auto;
}

#main-visual .photo {
	background-image: url(images/img-mv.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --------- イントロ --------- */

#intro {
	inline-size: 100%;
	background-color: #F2F1F0;
	padding-top: 10rem;
	padding-bottom: 10rem;
}

#intro .flex-container {
	align-items: center;
}

#intro .text {
	inline-size: 70%;
}

#intro .text p:nth-child(1) {
	font-size: 2.6rem;
	color: #77434D;
	margin-bottom: 2rem;
}

#intro .text p:nth-child(2) {
	font-size: 1.6rem;
	line-height: 2.4;
}

#intro .flex-container {
	position: relative;
}

#intro .photo {
	inline-size: 30%;
}

#intro .photo-text {
	font-size: 1.4rem;
	text-align: center;
}

/* --------- ページ内ナビ --------- */

.page-navi-outer {
	position: sticky;
	top: 0;
	z-index: 5;
	background-color: #fff;
}

.page-navi-outer::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	inline-size: 100%;
	block-size: 3px;
	background-color: #e8e1e1;
}

.list-page-navi {
	display: flex;
	max-inline-size: 1080px;
	margin: 0 auto;
}

.list-page-navi>li {
	inline-size: calc(100% / 3);
}

.list-page-navi a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	color: #b2a6a6;
	background: #fff;
	text-align: center;
	min-block-size: 60px;
	border-bottom: 3px solid #e8e1e1;
	position: relative;
	z-index: 1;
	transition: border-bottom-color .3s ease, color .3s ease;
}

.list-page-navi a.active {
	color: #77434d;
	border-bottom-color: #77434d;
}

.list-page-navi a:hover {
	color: #77434d;
	border-bottom-color: #77434d;

}

.list-page-navi a.active::after,
.list-page-navi a.active::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	inline-size: 0;
	block-size: 0;
	border: solid transparent;
	pointer-events: none;
}

.list-page-navi a.active::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

.list-page-navi a.active::before {
	border-color: rgba(119, 67, 77, 0);
	border-top-color: #77434d;
	border-width: 16px;
	margin-left: -16px;
}

.sub-section {
	padding-top: 6rem;
}

/* --------- パララックス --------- */

.parallax {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax.photo01 {
	background-image: url(images/img-parallax01.jpg);
}

.parallax.photo02 {
	background-image: url(images/img-parallax02.jpg);
}

.parallax.photo03 {
	background-image: url(images/img-parallax03.jpg);
}

.parallax.photo03 {
	/* margin-bottom: 80px; */
}

/* --------- プロフィール --------- */

#profile {
	inline-size: 90%;
	padding: 2.5rem 5rem;
	background-color: #E8E1E1;
	border-radius: 20px;
	align-items: center;
	margin-inline: auto;
}

#profile .photo {
	inline-size: 16%;
}

#profile ul {
	inline-size: 78%;
	font-size: 1.4rem;
	line-height: 1.6;
}

#profile ul li.name,
#profile ul li.title {
	color: #77434D;
}

#profile ul li.name {
	font-size: 2.2rem;
}

#profile ul li.title {
	margin-bottom: 1rem;
}

/* --------- インタビュー --------- */

.question-unit .text .l-unit {
	color: #a88585;
	font-size: 2.2rem;
}

.swiper-custom-parent {
	display: none;
}

/* --------- コラム --------- */

/* baase */
#column .inner {
	padding: 12rem 0 0;
	position: relative;
}

#column .inner::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	inline-size: calc((100vw - -1260px) / 2);
	block-size: 100%;
	background-color: #F2F1F0;
	border-radius: 0 80px 0 0
}

#column .inner h4 {
	position: absolute;
	top: -4rem;
	left: 0;
	inline-size: calc((100vw - 190px) / 2);
	background-color: #E8E1E1;
	font-size: 1.6rem;
	text-align: right;
	padding: 4rem 4rem 2rem 0;
}

#column .inner h4 span {
	font-size: 2.2rem;
	padding-left: 0.2em;
}

/* detail */
#column .explan p {
	inline-size: 47%;
}

#column .explan .image {
	inline-size: 47%;
}

.principle {
	background-color: #fff;
	border-radius: 10px;
	padding: 2rem 3rem;
	margin: 3rem 0 5rem;
}

.principle .ttl {
	color: #77434D;
	margin-bottom: 1rem;
}

.principle .flex-container {
	align-items: center;
}

.principle .flex-container p {
	inline-size: 66%;
	font-size: 1.4rem;
}

.principle .flex-container .image {
	inline-size: 34%;
}

#column .exlink {
	inline-size: 560px;
	text-align: center;
	margin: 0 auto 5rem;
}

#column .exlink span {
	color: #77434D;
	font-size: 1.6rem;
	display: inline-block;
	margin-bottom: .5em;
}

#column .exlink a {
	text-align: left;
	padding: 1.2rem 5rem 1.2rem 3.5rem;
	margin-top: 0;
}

#column .exlink a::after {
	right: 5%;
}

.bdr-box {
	font-size: 1.2rem;
	padding: 0.6em 1em;
	border: solid #000 1px;
	max-inline-size: 860px;
	margin: 0 auto 3em;
}

#column .effect p.ttl {
	font-size: 2rem;
	color: #77434D;
	display: flex;
	align-items: center;
	margin-bottom: 3rem;
}

#column .effect p.ttl::before,
#column .effect p.ttl::after {
	content: "";
	background-color: #77434D;
	flex-grow: 1;
	block-size: 1px;
}

#column .effect p.ttl::before {
	margin-right: 1rem;
}

#column .effect p.ttl::after {
	margin-left: 1rem;
}

#column .effect picture {
	inline-size: 20%;
}

#column ul.cap {
	inline-size: calc((100vw - -1260px) / 2);
	text-align: right;
	margin-top: 1rem;
}

/* --------- 動画 --------- */

#movie {
	overflow: hidden;
}

#movie .youtube-container {
	max-inline-size: 900px;
	margin-inline: auto;
	position: relative;
}

#movie .youtube-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	inline-size: 100vw;
	block-size: 350px;
	background-color: #F2F1F0;
}

#movie .youtube iframe {
	border-radius: 20px;
}

/* --------- ヒストリー --------- */
#history .section-title {
	margin-bottom: 0;
}

.history-ttl-wrap {
	/* padding-top: 12rem; */
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #F2F1F0 50%, #F2F1F0 100%);
}

.history-outer {
	background-color: #F2F1F0;
	padding-bottom: 12rem;
}

#history h3 {
	inline-size: 520px;
	margin-inline: auto;
}

.history-swiper {
	max-inline-size: 1200px;
	margin: 6rem auto 0;
	position: relative;
	padding-inline: 5%;
}

.history-swiper figure {
	border-radius: 30px;
	padding: 2rem 1rem;
}

.history-swiper figcaption {
	font-size: 1.6rem;
	font-weight: 500;
	color: #77434D;
	text-align: center;
}

.history-swiper .figtext {
	font-size: 1.4rem;
	font-weight: 500;
	margin-top: 1em;
	text-align: center;
}

.history-year-container {
	text-align: center;
	padding-top: 4rem;
	position: relative;
}

.history-year-container::before {
	content: '';
	display: block;
	inline-size: 3px;
	block-size: 25px;
	background-color: #a88585;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	top: 10px;
	transform: translateX(-50%);
}

.history-circle {
	display: inline-block;
	inline-size: 15px;
	block-size: 15px;
	background-color: #77434D;
	border-radius: 50%;
	position: relative;
}

.history-circle::before {
	content: '';
	display: block;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: #F2F1F0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.history-prod-img {
	aspect-ratio: 1 / 1;
	inline-size: 60%;
	display: flex;
	align-items: center;
	margin-inline: auto;
}

.history-year {
	max-inline-size: 100px;
	margin: 10px auto 0;
}

.history-timeline {
	display: block;
	position: absolute;
	left: 0;
	bottom: 58px;
	inline-size: 100%;
	block-size: 4px;
	background-image: linear-gradient(to right, transparent, #B7A5A5 20%, #B7A5A5 80%, transparent);
}

.history-text-container {
	max-inline-size: 960px;
	margin: 3rem auto 0;
}

.history-text-wrapper {
	padding: 2rem 10rem 2rem 5%;
	border-radius: 25px;
	position: relative;
}

.history-text-wrapper.is-active {
	display: block;
	animation: fadeIn 1.2s forwards;
}

.history-text-wrapper:not(.is-active) {
	display: none;
	opacity: 0;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.history-index {
	font-size: 1.3rem;
	font-weight: 500;
	color: #77434D;
	margin-bottom: .8em;
}

.history-illust {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translate(50%, -50%);
	inline-size: 65px;
}

/* スライド前後切替ボタン */
.history-swiper .slider-next,
.history-swiper .slider-prev {
	position: absolute;
	top: 30%;
	aspect-ratio: 1 / 1;
	inline-size: 45px;
	block-size: auto;
	background: url('images/history-arrow.svg') no-repeat center center/contain;
	cursor: pointer;
	z-index: 2;
}

.history-swiper .slider-prev {
	left: 3%;
	right: auto;
	transform: rotate(180deg);
}

.history-swiper .slider-next {
	right: 3%;
	left: auto;
}

.swiper-button-disabled {
	display: none;
}

.swiper-slide[data-era="2000"] figure,
.history-text-wrapper[data-target="2000"] {
	background-color: #e3d9d9;
}

.swiper-slide[data-era="2010"] figure,
.history-text-wrapper[data-target="2010"] {
	background-color: #e8e3d6;
}

.swiper-slide[data-era="2020"] figure,
.history-text-wrapper[data-target="2020"] {
	background-color: #d7dde2;
}

/* --------- 製品情報 --------- */

#product {
	margin: 8rem 0 10rem;
}

.healsio-list {
	margin-bottom: 5rem;
}

.healsio-list li {
	inline-size: 23.5%;
	background-color: #F2F1F0;
	border-radius: 30px;
	padding: 5rem 3rem;
}

.healsio-list li .photo {
	inline-size: 100%;
	text-align: center;
	margin-bottom: 2rem;
}

.healsio-list li .photo img {
	inline-size: 70%;
}

.healsio-list li .text {
	inline-size: 100%;
}

.healsio-list li .text p:nth-child(1) {
	font-size: 3.5rem;
	font-weight: 600;
	color: #77434D;
	text-align: center;
	margin-bottom: 0.5rem;
}

.healsio-list li .text p:nth-child(2) {
	padding: 0 1rem;
}

#product ul.kome a {
	color: #2F2525;
	text-align: left;
	background-color: unset;
	transition: .3s;
}

#product ul.kome a:hover {
	color: #77434D;
	text-decoration: none;
	background-color: unset;
}

/* ====================================
	PC style
===================================== */
@media screen and (min-width: 1024px) {

	/* --------- base style --------- */

	#interview .base-width,
	#intro .base-width {
		max-inline-size: 1080px;
	}

	#column .base-width {
		max-inline-size: 850px;
	}

	/* --------- パララックス --------- */

	.parallax {
		inline-size: 100%;
		block-size: 630px;
		background-attachment: fixed;
		position: relative;
	}

	.caption-r {
		display: none;
	}

	/* --------- インタビュー --------- */
	.question-unit .l-unit {
		inline-size: 13%;
		border-right: 3px solid #a88585;
		position: relative;
	}

	.question-unit .l-unit::after {
		content: "";
		inline-size: 14%;
		block-size: 3px;
		background-color: #a88585;
		border-radius: 10px;
		position: absolute;
		right: 9%;
	}

	.question-unit .ttl .l-unit::after {
		top: 50%;
		transform: translateY(-50%);
	}

	.question-unit .text .l-unit::after {
		/* top: 10%; */
		top: 20px;
	}

	.question-unit .r-unit {
		inline-size: 87%;
		padding: 1% 0 1% 3%;
	}

	.question-unit .ttl {
		font-size: 2rem;
		line-height: 1.8;
		margin-bottom: 3rem;
	}

	.question-unit .ttl .l-unit,
	.question-unit .ttl .r-unit {
		display: flex;
		align-items: center;
	}

	.question-unit .ttl .l-unit img {
		inline-size: 60%;
	}

	.question-unit .r-unit .photo-of {
		border-radius: 20px;
	}

	.question-unit .r-unit .mt {
		margin-top: 3rem;
	}

	.question-unit .r-unit .photo-of img {
		border-radius: 20px;
	}

	/* -- Q1 -- */
	.question-unit.q01 .r-unit .photo-of {
		inline-size: 36%;
	}

	.question-unit.q01 .r-unit .photo-of,
	.question-unit.q01 .r-unit .photo-of img {
		block-size: 200px;
	}

	.question-unit.q01 .r-unit p {
		inline-size: 59%;
	}

	/* -- Q2 -- */
	.question-unit.q02 .r-unit .photo-of {
		inline-size: 36%;
	}

	.question-unit.q02 .r-unit .photo-of,
	.question-unit.q02 .r-unit .photo-of img {
		block-size: 190px;
	}

	.question-unit.q02 .r-unit .flex-container p {
		inline-size: 59%;
	}

	/* -- Q3 -- */
	.question-unit.q03 {
		margin-block: 12rem;
	}

	.question-unit.q03 .r-unit .photo-of {
		inline-size: 40%;
	}

	.question-unit.q03 .r-unit .photo-of,
	.question-unit.q03 .r-unit .photo-of img {
		block-size: 310px;
	}

	.question-unit.q03 .r-unit .flex-container p {
		inline-size: 55%;
	}

	/* -- Q4 -- */
	.question-unit.q04 .ttl .r-unit {
		inline-size: 60%;
	}

	.question-unit.q04 .r-unit .photo-of {
		inline-size: 40%;
	}

	.question-unit.q04 .r-unit .photo-of,
	.question-unit.q04 .r-unit .photo-of img {
		block-size: 210px;
	}

	.question-unit.q04 .r-unit p {
		inline-size: 65%;
	}

	.question-unit.q04 .r-unit .flex-container p {
		inline-size: 55%;
	}

	.question-unit.q04 .base-width {
		position: relative;
	}

	.question-unit.q04 .deco {
		position: absolute;
		top: -30px;
		right: 40px;
		inline-size: 22%;
	}

	/* -- Q5 -- */
	.question-unit.q05 .r-unit div:nth-child(1) .photo-of {
		inline-size: 30%;
	}

	.question-unit.q05 .r-unit div:nth-child(1) .photo-of,
	.question-unit.q05 .r-unit div:nth-child(1) .photo-of img {
		block-size: 160px;
	}

	.question-unit.q05 .r-unit div:nth-child(2) .photo-of {
		inline-size: 46%;
	}

	.question-unit.q05 .r-unit div:nth-child(2) .photo-of,
	.question-unit.q05 .r-unit div:nth-child(2) .photo-of img {
		block-size: 230px;
	}

	.question-unit.q05 .r-unit div:nth-child(2) p {
		inline-size: 49%;
	}

	/* -- Q6 -- */
	.question-unit.q06 {
		margin-top: 12rem;
	}

	.question-unit.q06 .r-unit .photo-of {
		inline-size: 47.5%;
	}

	.question-unit.q06 .r-unit .photo-of,
	.question-unit.q06 .r-unit .photo-of img {
		block-size: 270px;
	}

	.question-unit.q06 .r-unit p:nth-of-type(1) {
		inline-size: 68%;
	}

	.question-unit.q06 .base-width {
		position: relative;
	}

	.question-unit.q06 .deco {
		position: absolute;
		top: 0;
		right: 0;
		inline-size: 23%;
	}

	/* -- Q7 -- */
	.question-unit.q07 .r-unit .photo-of {
		inline-size: 40%;
	}

	.question-unit.q07 .r-unit .photo-of,
	.question-unit.q07 .r-unit .photo-of img {
		block-size: 260px;
	}

	.question-unit.q07 .r-unit .flex-container p {
		inline-size: 55%;
	}

}

/* ====================================
	微調整
===================================== */
@media screen and (min-width: 1024px) and (max-width: 1199px) {

	/* --------- base style --------- */

	.base-width {
		padding-left: 5%;
		padding-right: 5%;
	}

	#interview .base-width {
		max-inline-size: 100%;
	}

	/* --------- イントロ --------- */

	#intro .pcsmall {
		display: block;
	}

	#intro .pc {
		display: none;
	}

	#intro .text {
		inline-size: 60%;
	}

	#intro .photo {
		inline-size: 40%;
	}

	/* --------- インタビュー --------- */

	/* -- Q4 -- */
	.question-unit.q04 .deco {
		top: 0;
		right: 70px;
		inline-size: 20%;
	}

	/* -- Q6 -- */
	.question-unit.q06 .deco {
		top: 20px;
		right: 50px;
		inline-size: 20%;
	}

	/* --------- コラム --------- */

	#column .inner .base-width {
		padding-right: 10%;
	}

	#column .inner h4 {
		inline-size: 38vw;
	}

	/* --------- 製品情報 --------- */

	.healsio-list li {
		inline-size: 48%;
	}

	.healsio-list li:nth-child(n+3) {
		margin-top: 4%;
	}

}

/* ====================================
	PC & TAB style
===================================== */
@media screen and (min-width: 768px) {

	.sub-section {
		padding-top: 12rem;
	}

	/* --------- メインビジュアル --------- */

	#main-visual {
		block-size: 560px;
	}

	#main-visual .txt {
		inline-size: 47%;
	}

	#main-visual .txt ul.inner {
		inline-size: 630px;
		margin-right: 0;
		margin-left: auto;
		margin-top: 60px;
	}

	#main-visual .txt ul.inner li:nth-child(1) {
		inline-size: 90%;
	}

	#main-visual .txt ul.inner li:nth-child(2) {
		inline-size: 90%;
		margin-top: 30px;
	}

	#main-visual .txt ul.inner li:nth-child(3) {
		margin-top: 20px;
	}

	#main-visual .photo {
		inline-size: 53%;
		block-size: 560px;
		clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
	}

	#column .exlink span {
		font-size: 1.8rem;
	}

	/* ページ内リンク */
	.list-page-navi a {
		font-size: 2rem;
		min-block-size: 80px;
	}

	/* スライド前後切替ボタン */
	.history-year-container {
		padding-top: 6rem;
	}

	.history-year-container::before {
		block-size: 40px;
	}

	.history-circle {
		inline-size: 30px;
		block-size: 30px;
	}

	.history-circle::before {
		inline-size: 12px;
		block-size: 12px;
	}

	.history-swiper {
		padding-inline: 4%;
	}

	.history-swiper .slider-next,
	.history-swiper .slider-prev {
		top: 30%;
		inline-size: 75px;
	}

	.history-swiper .slider-prev {
		left: 0;
	}

	.history-swiper .slider-next {
		right: 0;
	}

	.history-timeline {
		bottom: 67px;
	}

	.history-text-wrapper {
		margin-top: 8rem;
		padding: 3rem 18rem 3rem 4rem;
	}

	.history-index {
		font-size: 1.8rem;
	}

	.history-illust {
		right: 90px;
		transform: translate(50%, -50%);
		inline-size: 100px;
	}

	[data-target="2010"] .history-illust {
		/* right: 45px; */
		inline-size: 130px;
	}
}

/* ====================================
	微調整
===================================== */
@media screen and (min-width: 768px) and (max-width: 1449px) {

	/* --------- メインビジュアル --------- */

	#main-visual,
	#main-visual .photo {
		block-size: 43vw;
	}

	#main-visual .txt ul.inner {
		inline-size: 90%;
		margin-top: 6vw;
	}

	#main-visual .txt ul.inner li:nth-child(2) {
		margin-top: 2.5vw;
	}

	#main-visual .txt ul.inner li:nth-child(3) {
		margin-top: 2vw;
	}

	/* --------- コラム --------- */

	#column .inner::before,
	#column ul.cap {
		inline-size: 93vw;
	}

}

/* ====================================
	TAB & SP style
===================================== */
@media screen and (max-width: 1023px) {

	/* --------- utility --------- */

	.pc {
		display: none;
	}

	/* --------- base style --------- */

	/* #profile,
	.question-unit,
	.parallax {
		margin-bottom: 18vw;
	} */
	.column-block {
		padding-bottom: 4rem;
	}

	#interview .base-width,
	#intro .base-width,
	#product .base-width {
		padding-left: 5%;
		padding-right: 5%;
	}

	h2 {
		block-size: 29vw;
		margin-bottom: 5vw;
	}

	/* --------- イントロ --------- */

	#intro {
		padding-top: 7vw;
		padding-bottom: 23vw;
		position: relative;
	}

	#intro .text {
		inline-size: 100%;
	}

	#intro .text p:nth-child(1) {
		font-size: 2.2rem;
		margin-bottom: 2rem;
	}

	#intro .text p:nth-child(2) {
		font-size: 1.6rem;
		line-height: 2;
	}

	#intro .photo {
		inline-size: 100%;
		position: absolute;
		bottom: -36vw;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}

	#intro .photo img {
		inline-size: 60%;
	}

	/* --------- ページ内ナビ --------- */

	.page-navi-outer {
		margin-top: 22vw;
	}


	/* --------- パララックス --------- */

	.parallax {
		block-size: 60vw;
	}

	.caption-r {
		text-align: right;
		font-size: 1.2rem;
		margin-top: 0.6em;
	}

	/* --------- プロフィール --------- */

	#profile {
		inline-size: 100%;
		padding: 2.5rem 5vw;
	}

	#profile .photo {
		inline-size: 20%;
	}

	#profile ul {
		inline-size: 75%;
	}

	#profile ul li.name {
		font-size: 2rem;
	}

	/* --------- インタビュー --------- */

	.question-unit.q01,
	.question-unit.q02,
	.question-unit.q03,
	.question-unit.q05,
	.question-unit.q06,
	.question-unit.q07 {
		margin-top: 18vw;
	}

	.question-unit .flex-container.ttl,
	.question-unit .flex-container.text {
		inline-size: 100%;
		border-left: 3px solid #a88585;
		padding: 3vw 0 3vw 5vw;
	}

	.question-unit .l-unit {
		inline-size: 100%;
		padding-left: 7%;
		position: relative;
	}

	.question-unit .l-unit::before {
		content: "";
		inline-size: 5%;
		block-size: 2px;
		background-color: #a88585;
		border-radius: 10px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.question-unit .r-unit {
		inline-size: 100%;
	}

	.question-unit .ttl {
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}

	.question-unit .ttl .l-unit {
		margin-bottom: 3vw;
	}

	.question-unit .ttl .l-unit img {
		inline-size: 9%;
	}

	.question-unit .r-unit p {
		margin-top: 1em;
	}

	.question-unit .r-unit .flex-container {
		display: contents;
	}

	.question-unit .r-unit .photo-of,
	.question-unit .deco {
		display: none;
	}

	/* スライダーstyle */
	.swiper-custom-parent {
		display: block;
		position: relative;
		inline-size: 100%;
		margin-top: 2rem;
	}

	.swiper-custom-parent .swiper-container {
		inline-size: 90%;
	}

	.swiper-custom-parent img {
		inline-size: 100%;
		block-size: 45vw;
		border-radius: 10px;
	}

	.swiper-pagination {
		display: flex;
		justify-content: center;
		column-gap: 10px;
		inline-size: 100%;
		margin-top: 2rem;
	}

	.swiper-pagination-bullet {
		background-color: #77434D;
		inline-size: 12px;
		block-size: 12px;
	}

	.photo-of.sp {
		inline-size: 90%;
		overflow: hidden;
		border-radius: 10px;
		margin: 2rem auto 0;
	}

	/* --------- コラム --------- */

	/* base */
	#column .inner {
		padding: 10vw 0 0;
	}

	#column .inner::before {
		inline-size: 95%;
		border-radius: 0 30px 0 0
	}

	#column .inner .base-width {
		padding-right: 10%;
	}

	#column .inner h4 {
		top: -6vw;
		inline-size: 60vw;
		text-align: left;
		padding: 3vw 0 3vw 6.5%;
	}

	#column ul.cap {
		inline-size: 90%;
		text-align: left;
		margin-left: 5%;
	}

	/* detail */
	#column .explan p {
		inline-size: 100%;
		margin-bottom: 5vw;
	}

	#column .explan .image {
		inline-size: 80%;
		margin-inline: auto;
	}

	/* --------- 動画 --------- */

	#movie {
		/* margin-top: 15vw; */
	}

	#movie .youtube-container::before {
		block-size: 23vw;
	}

	/* --------- ヒストリー --------- */

	#history h3 {
		inline-size: 80%;
	}


	/* --------- 製品情報 --------- */

	.healsio-list li {
		inline-size: 48%;
	}

	.healsio-list li:nth-child(n+3) {
		margin-top: 4%;
	}

}

/* ====================================
	SP style
===================================== */
@media screen and (min-width:768px) and (max-width: 1023px) {

	.history-swiper .slider-next,
	.history-swiper .slider-prev {
		inline-size: 60px;
	}
}

/* ====================================
	SP style
===================================== */
@media screen and (max-width: 767px) {

	/* --------- utility --------- */
	article {
		font-size: 1.4rem;
	}

	/* --------- ページ内ナビ --------- */


	/* --------- メインビジュアル --------- */

	#main-visual,
	#main-visual .flex-container {
		overflow: hidden;
		block-size: calc(100svh - 143px);
		max-block-size: 900px;
	}

	#main-visual .flex-container {
		display: grid;
		grid-template-rows: 55% 45%;
		grid-template-columns: 100%;
	}

	#main-visual .photo {
		inline-size: 100%;
		grid-row: 2;
		grid-column: 1;
	}

	#main-visual .txt {
		inline-size: 100%;
		grid-row: 1;
		grid-column: 1;
		position: relative;
		z-index: 1;
	}

	#main-visual .txt ul.inner {
		inline-size: 90%;
		margin: 4vh auto;
	}

	#main-visual .txt ul.inner li:nth-child(1) {
		inline-size: 90%;
	}

	#main-visual .txt ul.inner li:nth-child(2) {
		inline-size: 85%;
		margin-top: 3vh;
	}

	#main-visual .txt ul.inner li:nth-child(3) {
		inline-size: 100%;
		margin-top: 1.5vh;
	}

	/* --------- イントロ --------- */

	#intro {
		padding-top: 10vw;
		padding-bottom: 30vw;
	}

	#intro .text p:nth-child(1) {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	#intro .photo {
		bottom: -52vw;
	}

	#intro .photo img {
		inline-size: 80%;
	}


	/* --------- ページ内ナビ --------- */

	.page-navi-outer {
		margin-top: 35vw;
	}

	/* --------- プロフィール --------- */

	#profile {
		inline-size: 95%;
		padding: 19vw 6vw 8vw;
		position: relative;
	}

	#profile .photo {
		inline-size: 30vw;
		position: absolute;
		left: 50%;
		top: -14vw;
		transform: translateX(-50%);
	}

	#profile ul {
		inline-size: 100%;
		font-size: 1.3rem;
	}

	#profile ul li.name,
	#profile ul li.title {
		text-align: center;
	}

	#profile ul li.title {
		margin-bottom: 1rem;
	}

	/* --------- インタビュー --------- */

	#interview h2 {
		margin-bottom: 18vw;
	}

	.question-unit .text .l-unit {
		font-size: 1.6rem;
	}

	.question-unit .ttl {
		font-size: 1.5rem;
	}

	.question-unit .ttl .l-unit img {
		inline-size: 12%;
	}

	/* --------- コラム --------- */

	/* baase */
	#column .inner {
		padding: 24vw 0 10vw;
	}

	#column .inner::before {
		inline-size: 95%;
		border-radius: 0 30px 0 0
	}

	#column .inner h4 {
		inline-size: 70vw;
		font-size: 1.4rem;
		line-height: 1.6;
	}

	#column .inner h4 span {
		display: block;
		font-size: 2rem;
	}

	/* detail */
	#column .explan .image {
		inline-size: 100%;
	}

	#column .principle {
		border-radius: 5px;
		padding: 5vw;
		margin: 5vw 0 7vw;
	}

	#column .principle .ttl {
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 3vw;
	}

	#column .principle .flex-container p {
		inline-size: 100%;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	#column .principle .flex-container .image {
		inline-size: 95%;
		margin: 3vw auto 0;
	}

	#column .exlink {
		inline-size: 100%;
		margin: 0 auto 13vw;
	}

	#column .exlink a {
		text-align: center;
		line-height: 1.4;
		padding: 1rem 0;
	}

	#column .exlink a::after {
		right: 5%;
	}

	#column .effect p.ttl {
		font-size: 1.8rem;
		font-weight: 600;
		margin-bottom: 8vw;
	}

	#column .effect p.ttl::before {
		margin-right: 0.5rem;
	}

	#column .effect p.ttl::after {
		margin-left: 0.5rem;
	}

	#column .effect picture {
		inline-size: 105%;
		margin-left: -6%;
	}

	#column .effect picture:not(:first-of-type) {
		margin-top: 3rem;
	}

	/* --------- history --------- */

	.history-swiper {
		overflow: hidden;
	}

	.history-swiper .swiper-container {
		overflow: unset;
	}

	.history-text-wrapper .text {
		font-size: 1.2rem;
	}

	/* --------- 製品情報 --------- */

	#product {
		margin: 7vw 0 10vw;
	}

	.healsio-list {
		margin-bottom: 5rem;
	}

	.healsio-list li {
		inline-size: 100%;
		border-radius: 10px;
		padding: 7vw 8vw 10vw;
	}

	.healsio-list li:not(:first-child) {
		margin-top: 5vw;
	}

	.healsio-list li .flex-container {
		align-items: center;
	}

	.healsio-list li .photo {
		inline-size: 37%;
		margin-bottom: 0;
	}

	.healsio-list li .photo img {
		inline-size: 100%;
	}

	.healsio-list li .text {
		inline-size: 52%;
	}

	.healsio-list li .text p:nth-child(1) {
		font-size: 2.6rem;
		text-align: left;
		line-height: 1.2;
	}

	.healsio-list li .text p:nth-child(2) {
		font-size: 1.6rem;
		padding: 0;
	}

	.healsio-list .exlink a {
		font-size: calc(100vw /27);
		margin-top: 2.5rem;
	}

}