:root {
	--black: #231815;
	--white: #ffffff;
}


/* =============================================
Base Set
============================================= */
html {
	font-size: 62.5%;
}
body {
	max-width:600px;
	margin: 0 auto;
	font-family:  'Yu Gothic Medium', 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体','Noto Sans JP', sans-serif;
	font-feature-settings: "palt" 1;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.5;
}
main {
	overflow: hidden;
}

@media screen and (min-width:500px) {
	body {
		font-size: 1.8rem;
	}
}


/* -------------------------------------
Img
------------------------------------- */
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}


/* -------------------------------------
Link
------------------------------------- */
a {
	transition:
		color .3s ease,
		opacity .3s ease,
		background-color .3s ease;
}


/* -------------------------------------
header
------------------------------------- */
.pg-header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	background-color: var(--white);
}


/* -------------------------------------
Common
------------------------------------- */
.inner {
	padding: 0 5% 0;
}
.va-super {
	vertical-align: super;
	font-size: 1.0rem;
}
.note {
	font-size: 1.0rem;
	letter-spacing: 0;
}
@media screen and (min-width:500px) {
	.note{
		font-size: 1.5rem;
	}
}

/* slick スクロール時にautoplayとめない */
.mv-img,
.feature-visual {
	pointer-events: none;
}


/* -------------------------------------
btn
------------------------------------- */
.btn {
	display: block;
	width: 255px;
	margin: 0 auto 20px;
	position: relative;
	z-index: 1;
}
.btn::before {
	content: "";
	display: block;
	width: 27px;
	height: 27px;
	position: absolute;
	top: 14px;
	left: 24px;
	background-image:url(../img/button_icon_search.webp);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}
.btn-buy.btn::before {
	width: 30px;
	height: 30px;
	background-image:url(../img/button_icon_buy.webp);
}
.btn__round {
	color: #645C59;
	display: block;
	border-radius: 45px;
	background-color: var(--white);
	border: 1px solid var(--black);
	padding: 7px 0 6px 8%;
	font-size: 1.6rem;
	line-height: 1.25;
	font-weight: bold;
	position: relative;
	text-align: center;
}
.btn-buy .btn__round {
	color: var(--white);
	background-color: #645C59;
	border: 1px solid #645C59;
}
@media screen and (min-width:500px) {
	.btn {
		width: 320px;
		margin: 0 auto 20px;
	}
	.btn::before {
		width: 45px;
	}
	.btn__round {
		padding: 8px 0 8px 8%;
	}
}


/* -------------------------------------
slider
------------------------------------- */
.slide-arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}
.slide-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.prev-arrow {
  left: 12px;
  margin-top: -22px;
}
.next-arrow {
  right: 12px;
  margin-top: -22px;
}
.prev-arrow::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.next-arrow::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width:500px) {
	.slide-arrow {
		width: 28px;
		height: 28px;
	}
	.prev-arrow {
		left: 42px;
	}
	.next-arrow {
		right: 42px;
	}
}


/* -------------------------------------
animation
------------------------------------- */
/* ズームアウト */
.anime-zoom-out {
	opacity: 0;
	transform: scale(1.2);
}
.anime-zoom-out.is-show {
	animation: zoom-out 3s both;
	opacity: 1;
	transform: scale(1);
}

@keyframes zoom-out {
	from {
		opacity: 0;
		transform: scale(1.2);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* シャイン */
.anime-shine {
	position: relative;
	overflow: hidden;
}
.anime-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.anime-shine.is-show::after {
  animation: shine-repeat 8s ease 0s infinite;
}
@keyframes shine-repeat {
  0%, 15% {
    transform: translateX(-120%);
  }
  35% {
    transform: translateX(120%);
  }
  35.01%, 100% {
    transform: translateX(-120%);
  }
}

/* 右から左の帯アニメの下のテキストのフェードイン */
.features__spec-text {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease .6s,
    transform 0.7s ease .6s;
}
.features__spec-text.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* フェードイン */
.anime-fade-in {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
	transition:
		opacity 0.6s ease 0.35s,
		transform 0.6s ease 0.35s;
}
.anime-fade-in.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 左からスライドイン */
.anime-slide-in-left {
	opacity: 0;
	transform: translateX(-28px);
	transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.anime-slide-in-left.is-show {
	opacity: 1;
	transform: translateX(0);
}

/* 上線・下線のみ（左右から伸びる） */
.anime-line-h {
	position: relative;
	border-top: none;
	border-bottom: none;
}
.anime-line-h::before,
.anime-line-h::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.5s ease;
}
/* 上線：左から */
.anime-line-h::before {
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
/* 下線：右から */
.anime-line-h::after {
  bottom: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: right center;
}
.anime-line-h.is-show::before {
  opacity: 1;
  transform: scaleX(1);
}
.anime-line-h.is-show::after {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.15s;
}

/* ラインが下りてテキストが表示 */
.intro .heading__image.js-trigger::before {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro .heading__image.js-trigger.is-show::before {
	transform: scaleY(1);
}
.intro .heading__image.js-trigger .heading__title {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 1.2s ease 1.2s;
}
.intro .heading__image.js-trigger.is-show .heading__title {
  opacity: 1;
}

/* ラインが下りてテキストが表示 */
#safety .features__title.js-trigger::before,
#one-hand .features__title.js-trigger::before,
#reclining .features__title.js-trigger::before,
#separate .features__title.js-trigger::before,
#long-use .features__title.js-trigger::before {
	transform: translateY(-50%) scaleY(0);
	transform-origin: top center;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#safety .features__title.js-trigger.is-show::before,
#one-hand .features__title.js-trigger.is-show::before,
#reclining .features__title.js-trigger.is-show::before,
#separate .features__title.js-trigger.is-show::before,
#long-use .features__title.js-trigger.is-show::before {
	transform: translateY(-50%) scaleY(1);
}
#safety .features__title.js-trigger > img,
#one-hand .features__title.js-trigger > img,
#reclining .features__title.js-trigger > img,
#separate  .features__title.js-trigger > img,
#long-use .features__title.js-trigger > img {
	opacity: 0;
	transition: opacity 1.3s ease 0.7s;
}
#safety .features__title.js-trigger.is-show > img,
#one-hand .features__title.js-trigger.is-show > img,
#reclining .features__title.js-trigger.is-show > img,
#separate  .features__title.js-trigger.is-show > img,
#long-use  .features__title.js-trigger.is-show > img {
	opacity: 1;
}

/* 上下に浮かぶ */
@keyframes anime-float-y {
  0%, 100% {
    transform: translateY(8%);
  }
  50% {
    transform: translateY(50%);
  }
}
.anime-float-y {
  animation: anime-float-y 6s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .anime-float-y {
    animation: none;
  }
}


/* -------------------------------------
mv
------------------------------------- */
.mv {
  position: relative;
}
.mv .anime-zoom-out {
  animation: zoom-out 5s both;
}
.heading__title {
  position: absolute;
	width: 100%;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
}
.mv .heading__title {
  width: 32%;
  top: 17%;
	z-index: 1;
}
.heading__letter--product {
  position: absolute;
  width: 100%;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
}
.heading__letter--product.anime-shine {
	overflow: hidden;
}
.heading__letter--product.anime-shine::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 255, 255, 0.45) 50%,
		transparent 60%
	);
	transform: translateX(-120%);
	pointer-events: none;
}
.heading__letter--product.anime-shine::after {
  animation: shine-repeat 6.2s ease 0.6s infinite;
}


/* -------------------------------------
intro
------------------------------------- */
.intro {
	background-color: #D0CBC3;
}
.intro .heading__image {
	position: relative;
	margin-bottom: 40px;
}
.intro .heading__image::before {
	content: '';
	width: 1px;
	height: 17.5%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left:50%;
}
.intro .heading__title {
  position: absolute;
  width: 32.8%;
  top: 21%;
}
.intro__container {
  padding: 0 12% 0;
}
.intro__catch--logo {
	width: 42%;
	margin: 0 auto 25px;
}
.intro__text {
	color: #645C59;
	margin-bottom: 20px;
	line-height: 2;
}
.intro__box {
	display: flex;
	gap: 7px;
	padding-bottom: 25px;
}
.intro__unit {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.unit-text {
	color: #645C59;
	font-size: 1rem;
	line-height: 1.5;
}

@media screen and (min-width:500px) {
	.intro .heading__image {
		margin-bottom: 80px;
	}
	.intro__text {
		font-size: 1.8rem;
	}
	.intro__box {
		gap: 10px;
		padding-bottom: 50px;
	}
	.intro__unit {
		gap: 10px;
	}
	.unit-text {
		font-size: 1.5rem;
	}
}


/* -------------------------------------
abiut-iharbour
------------------------------------- */
.about-iharbour__image {
  position: relative;
}
.about-iharbour__title {
  position: absolute;
  width: 80%;
	bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.about-iharbour__sub-title {
	font-size: 1.6rem;
	color: #fff;
  position: absolute;
	width: 81%;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
	text-align: center;
	border-top: solid 1px var(--white);
	border-bottom: solid 1px var(--white);
	padding: 6px 0;
	letter-spacing: 0.1em;
}
.about-iharbour__sub-title.anime-line-h {
	border-top: none;
	border-bottom: none;
  }
.about-iharbour__sub-title .text-fadein {
	opacity: 0;
	transition:	opacity .7s ease .5s;
}
.about-iharbour__sub-title.is-show .text-fadein {
	opacity: 1;
}
.about-iharbour__title {
	opacity: 0;
	transition:	opacity 1s ease .8s;
}
.about-iharbour__title.is-show {
	opacity: 1;
}

@media screen and (min-width:500px) {
	.about-iharbour__sub-title {
		font-size: 2.4rem;
	}
}


/* -------------------------------------
features
------------------------------------- */
.features__container {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}
.features__title {
	position: relative;
	background-color: #645C59;
	background: linear-gradient( #554d4a 20%, #645C59 50%);
}
.features__title::before {
	content: '';
	width: 1px;
	height: 40px;
	background-color: #fff;
	position: absolute;
	top: 20px;
	left:50%;
	z-index: 1;
}
.features__spec-title {
	font-size: 2.2rem;
	font-weight: normal;
	color:  var(--white);
	margin-bottom: 16px;
	background: linear-gradient(to right, #000 30%, transparent 100%);
	margin-left: -5.5%;
	padding: 3px 0 3px 10%;
}
.features__spec-text {
	margin-bottom: 25px;
	padding: 0 5% 0;
}
.features__spec-image:nth-of-type(1) {
  position: relative;
  z-index: 1;
}
.features__spec-image:nth-of-type(2) {
  position: relative;
  z-index: 0;
}
.spec-image__descripton {
	font-size: 1.7rem;
}
@media screen and (min-width:500px) {
	.features__spec-title {
		font-size: 2.7rem;
		margin-bottom: 28px;
	}
	.features__spec-text {
		margin-bottom: 40px;
	}
}


/* -------------------------------------
safety
------------------------------------- */
#safety {
  position: relative;
}
#safety .features__title {
	background: transparent;
}
#safety .features__title::before {
	transform: translateY(-50%);
}
#safety .features__container {
	padding-top: 0;
	padding-bottom: 25px;
	background-color: #dad7d3;
	position: relative;
	z-index: 0;
}
#safety .features__container .inner {
	position: relative;
	z-index: 1;
}
#safety .features__container::before {
	content: '';
	position: absolute;
	top: 0%;
	right: 0;
	width: 100%;
	max-width: 800px;
	background-image: url(../img/safety_img_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	aspect-ratio: 750 / 1232;
	z-index: -1;
}
#safety .features__title {
	padding-top: 40px;
	margin: 0 -5% 123%;
}
#safety .features__title::before {
	top: 0;
}

/* 左から出る帯とその下のテキストのアニメ */
#safety .features__spec-image {
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
}
#safety .features__spec-catch {
	font-size: 1.4rem;
	color: var(--white);
	position: absolute;
	bottom: 10px;
	left: 15px;
	background: linear-gradient(to right, #000 0%, transparent 100%);
    padding: 4px 35px 4px 15px;
  margin-left: -15px;
}
#safety .spec-catch--strong {
	font-size: 1.8rem;
	font-weight: bold;
}
#safety .features__spec-text {
	padding: 0 5% 0;
}
#safety .features__spec-image {
	margin-bottom: 20px;
	position: relative;
}
#safety .features__spec-list {
	margin-bottom: 15px;
	padding: 0 5%;
}
#safety .features__list-item {
	margin-bottom: 6px;
}
#safety .list-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	background-color: var(--black);
	min-width: 1.2em;
	height: 1.2em;
	margin-right: 10px;
	line-height: 1;
}
#safety .list-item--strong {
	font-size: 1.4rem;
	font-weight: bold;
	margin-left: 29px;
}
#safety .list-item--bold {
	font-weight: bold;
}
#safety .note {
	padding-left: 5%;
}
@media screen and (min-width:500px) {
	#safety .features__container {
		padding-bottom: 50px;
	}
	#safety .features__title {
		margin: 0 -5% 128%;
	}
	#safety .features__spec-image {
		margin-bottom: 40px;
	}
	#safety .features__spec-catch {
		font-size: 2rem;
	}
	#safety .list-item--strong {
		font-size: 2.1rem;
			margin-left: 33px;
	}
	#safety .spec-catch--strong {
		font-size: 2.3rem;
	}
}


/* -------------------------------------
one-hand
------------------------------------- */
#one-hand .features__container {
	background-color: #D0CFCC;
	padding-bottom: 40px;
}
#one-hand .spec-image__descripton {
	margin: 10px 0 20px;
}
#one-hand .features__spec-image:nth-of-type(1) {
	margin-bottom: 25px;
}
@media screen and (min-width:500px) {
	#one-hand .features__spec-image:nth-of-type(1) {
		max-width: 480px;
		margin: 0 auto 25px;
	}
	#one-hand .features__spec-image {
		max-width: 480px;
		margin: 0 auto;
	}
	#one-hand .features__container {
		padding-bottom: 80px;
	}
}


/* -------------------------------------
reclining
------------------------------------- */
#reclining .features__container {
	background-color: #D0CBC3;
	padding-top: 25px;
}
#reclining .heading__title {
  background-color: #645C59;
	padding: 40px 0;
}
#reclining .features__spec-image {
	margin: 0 -5%;
}

@media screen and (min-width:500px) {
	#reclining .features__container {
		padding-top: 40px;
	}
}


/* -------------------------------------
separate
------------------------------------- */
#separate {
	background-color: #D0CBC3;
}
#separate .heading__image {
	margin-bottom: 25px;
}
#separate .features__spec-image:nth-of-type(1) {
	margin-left: -5px;
}
#separate .features__spec-image:nth-of-type(2) {
	margin-right: -5px;
}
@media screen and (min-width:500px) {
	#separate .heading__image {
		margin-bottom: 40px;
	}
}


/* -------------------------------------
long use
------------------------------------- */
#long-use {
	background-color: #D0CBC3;
}
#long-use .features__container {
	padding-bottom: 30px;
}
#long-use .heading__image {
	margin-bottom: 25px;
}
#long-use .heading__title {
	background-color: var(--dark-brown);
	padding: 40px 0;
}
#long-use .features__spec-image {
	position: relative;
	padding-bottom: 25px;
	margin-bottom: 10px;
}
#long-use .features__spec-image::after {
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 0;
	height: 1px;
	background: var(--black);
}
#long-use .note {
	padding: 0 5%;
}
@media screen and (min-width:500px) {
	#long-use .features__container {
		padding-bottom: 60px;
	}
	#long-use .heading__image {
		margin-bottom: 40px;
	}
}


/* -------------------------------------
lineup
------------------------------------ */
#lineup {
	padding-bottom: 10px;
	position: relative;
	background-color: #FBF9F7;
}
.thumbnail-list {
	display: flex;
	justify-content: center;
	padding: 0 8% 10px;
	gap: 18px;
}
.thumbnail-item {
	width: calc(100%/3);
	position: relative;
	cursor: pointer;
}
.thumbnail-item:after {
	content: "";
	background-color: rgba(255, 255, 255, 0.50);
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: 0.3s opacity linear;
}
.thumbnail-item.thumbnail-current:after {
	opacity: 0;
}
.product-info {
	font-size: 1.4rem;
	color: #645C59;
	padding: 10px 6% 40px;
	line-break: strict;
}
#lineup .product-strong {
	font-size: 1.8rem;
	font-weight: bold;
}
#lineup .text--small {
	font-size: 1.1rem;
}
.info__name {
	font-size: 1.2rem;
	font-weight: bold;
	border-bottom: 1px solid var(--black);
	padding-bottom: 4px;
	margin-bottom: 12px;
}
.product-info .info__price {
	margin-bottom: 15px;
}
.product-info .info__size.mb-15 {
	margin-bottom: 15px;
}
.pad-left {
	display: inline-block;
	padding-left: 70px;
}

@media screen and (min-width:500px) {
	#lineup {
		padding-bottom: 20px;
	}
	.product-info {
		font-size: 2.1rem;
		padding: 40px 6% 60px;
	}
	#lineup .product-strong {
		font-size: 2.4rem;
	}
	#lineup .text--small {
		font-size: 1.5rem;
	}
	#lineup .info__name {
		font-size: 1.5rem;
	}
	.pad-left {
		padding-left: 105px;
	}
}


/* -------------------------------------
banner
------------------------------------- */
.banner {
	padding-bottom: 30px;
	background-color: #FBF9F7;
}


/* -------------------------------------
share-area
------------------------------------- */
.share-area {
	font-size: 1.4rem;
	padding: 5% 20px;
	color: #645C59;
	background-color: #645C59;
}
.share-area .inner {
	background-color: var(--white);
	padding: 30px 5% 10px;
	border-radius: 5px;
	margin: 0 auto;
  max-width: 375px;
}
.share-area__title {
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 12px;
	font-weight: bold;
}
.share-area__image {
	margin-bottom: 15px;
}
.share-area__text {
	padding-bottom: 15px;
  margin-bottom: 26px;
	border-bottom: #645C59 solid 1px;
}
.btn-unit__text {
	margin-bottom: 24px;
	font-weight: bold;
}
.share-area__btn-unit {
	text-align: center;
}

@media screen and (min-width:500px) {
	.share-area .inner {
		padding: 30px 5% 20px;
	}
	.share-area {
		font-size: 1.8rem;
	}
	.share-area__title {
		font-size: 2.4rem;
	}
}


/* -------------------------------------
reparation
------------------------------------- */
.reparation {
	padding: 30px 13% 40px;
}
.reparation__catch {
	color: #9D8254;
	text-align: center;
	font-size: 18px;
	margin: 0 0 20px;
	position: relative;
}
.reparation__catch::before,
.reparation__catch::after {
	content: '';
	display: block;
	width: 1px;
	height: 70px;
	position: absolute;
	background-color: #9D8254;
}
.reparation__catch::before {
	top: 5px;
	left: 15px;
	transform: rotate(-20deg);
}
.reparation__catch::after {
	top: 5px;
	right: 15px;
	transform: rotate(20deg);
}
.reparation__catch .dashed {
	font-size: 30px;
	font-weight: bold;
}
@media screen and (min-width:500px) {
	.reparation {
		padding: 50px 13% 50px;
	}
	.reparation__catch::before {
		left: 80px;
	}
	.reparation__catch::after {
		right: 80px;
	}
}


/* -------------------------------------
Fixed-menu
------------------------------------- */
#sp-fixed-menu {
	display: none;
	position: fixed;
	max-width: 600px;
	width: 100%;
	bottom: 0;
	z-index: 99;
	background-color: #fff;
}
.footer-btn-area {
	display: flex;
	border-top: 4px solid #fff ;
}
.footer-btn-items:not(:last-of-type) {
	width: calc(84% / 2);
}
.footer-btn-items:last-of-type {
	width: 16%;
}


/* -------------------------------------
Footer
------------------------------------- */
.footer-wrap {
	padding-bottom: 50px;
}
.footer-wrap iframe {
		min-height: 330px;
	}
@media screen and (min-width:500px) {
	.footer-wrap {
		padding-bottom: 70px;
	}
	.footer-wrap iframe {
		min-height: 380px;
	}
}