@charset "utf-8";
/* CSS関数設定 */
:root {
	/* カラーパレット */
	--WHITE: #FFFFFF;
	--WHITE_OP50: rgba(255, 255, 255, 0.5);
	--BLACK: #000000;

	--GRAY01: #D1D1D1;
	--GRAY02: #F0F0F0;

	--DARK01: #101010;
	--DARK02: #727272;
	--DARK03: #281815;

	--BEIGE01: #F4F3EF;

	--BLUE01: #077DD5;

	--YELLOW01: #FFF983;
	--YELLOW02: #FFC52F;

	--BROWN01: #231815;

	/* テキストカラー */
	--TXT_COLOR_BASE: var(--DARK01);
	--TXT_COLOR_WHITE: var(--WHITE);

	/* ベース文字間隔 */
	--LETTER_SPACING: 0.1em;

	/* フォント */
	--FF_BASE: "Noto Sans JP", serif;
	--FF_NOTO: "Noto Sans JP", serif;

	/* roboto */
	--FF_ROBOTO: "Roboto", serif;

	/* Montserrat */
	--FF_MONTSERRAT: "Montserrat", serif;

	/* 英数字フォント */
	--FF_EN: var(--FF_BASE);
	--FF_NUM: var(--FF_BASE);

	/* フォントウェイト */
	--FF_WEIGHT_BASE: 400;
	
	/* アニメーション */
	--ANIME_FADEIN: fadeIn .5s ease-in-out 0s forwards;
	--ANIME_FADEOUT: fadeOut .5s ease-in-out 0s forwards;

	/* フォトサイズ */
	--FZ_9: clamp(8px, 0.8vw, 9px);
	--FZ_10: clamp(8px, 0.8vw, 10px);
	--FZ_11: clamp(10px, 1.1vw, 11px);
	--FZ_12: clamp(10px, 1.1vw, 12px);
	--FZ_13: clamp(11px, 1vw, 13px);
	--FZ_14: clamp(12px, 1.2vw, 14px);
	--FZ_15: clamp(13px, 1.4vw, 15px);
	--FZ_16: clamp(14px, 1.5vw, 16px);
	--FZ_18: clamp(15px, 1.6vw, 18px);
	--FZ_20: clamp(16px, 1.8vw, 20px);
	--FZ_22: clamp(18px, 2vw, 22px);
	--FZ_24: clamp(18px, 1.8vw, 24px);
	--FZ_25: clamp(20px, 2vw, 25px);
	--FZ_26: clamp(20px, 2vw, 26px);
	--FZ_28: clamp(22px, 2.5vw, 28px);
	--FZ_30: clamp(25px, 3vw, 30px);
	--FZ_35: clamp(25px, 3vw, 35px);
	--FZ_38: clamp(30px, 3.5vw, 38px);
	--FZ_40: clamp(30px, 3.5vw, 40px);
	--FZ_43: clamp(30px, 4vw, 43px);
	--FZ_50: clamp(30px, 4vw, 50px);
	--FZ_60: clamp(40px, 5vw, 60px);
	--FZ_70: clamp(50px, 6vw, 70px);
	--FZ_10_CONST: 10px;
	--FZ_12_CONST: 12px;
	--FZ_14_CONST: 14px;
	--FZ_15_CONST: 15px;
	--FZ_16_CONST: 16px;
	--FZ_18_CONST: 18px;
	--FZ_20_CONST: 20px;

	/* ブロック間 */
	--GAP_10: clamp( 5px, 1.1vw, 10px);
	--GAP_15: clamp( 10px, 1.2vw, 15px);
	--GAP_20: clamp( 15px, 1.7vw, 20px);
	--GAP_25: clamp( 15px, 1.7vw, 25px);
	--GAP_35: clamp( 20px, 2.5vw, 35px);
	--GAP_30: clamp( 20px, 2.5vw, 30px);
	--GAP_40: clamp( 30px, 3.5vw, 40px);
	--GAP_50: clamp( 30px, 3.5vw, 50px);
	--GAP_60: clamp( 40px, 4.5vw, 60px);
	--GAP_65: clamp( 50px, 5.5vw, 65px);
	--GAP_75: clamp( 60px, 6.5vw, 75px);
	--GAP_80: clamp( 50px, 5.5vw, 80px);
	--GAP_90: clamp( 60px, 6.5vw, 90px);
	--GAP_100: clamp( 70px, 7.5vw, 100px);
	--GAP_5_CONST: 5px;
	--GAP_10_CONST: 10px;
	--GAP_15_CONST: 15px;
	--GAP_20_CONST: 20px;
	--GAP_30_CONST: 30px;
	--GAP_40_CONST: 40px;

	/* PCマックス幅 */
	--PC_MAX_WIDTH: var(--PC_MAX_WIDTH_M);
	--PC_MAX_WIDTH_SS: 800px;
	--PC_MAX_WIDTH_S: 1000px;
	--PC_MAX_WIDTH_M: 1200px;
	--PC_MAX_WIDTH_L: 1440px;

	/* 親要素を超えて幅100% */
	--FULL_WIDTH: calc(50% - 50vw);

	/* セクション間隔半分 */
	--GENERALSEC_HALF: calc(var(--GENERALSEC) / 2);
}

@media screen and (min-width: 768px){
	:root{
		--INNER_WIDTH: 95%;
		--GENERALSEC: clamp(80px, 10vw, 120px);
	}
}
@media screen and (max-width: 767px){
	:root{
	--INNER_WIDTH: 87.201%;
	--GENERALSEC: 50px;
	}
}
/* フェードインアニメーション */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* リセットCSS */
*{margin:0;padding:0;min-height: 0;min-width: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height:100%;scroll-behavior: smooth;}
ul li ,ol li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight: var(--FF_WEIGHT_BASE);font-size: 100%;margin: 0;}
p{margin: 0;}
strong{font-weight: inherit;}
a:focus, *:focus{ outline:none; }
article, header, footer, aside, figure, figcaption, nav, section,main{ 
  display:block;
}
body{
	font-family: var(--FF_BASE);
	font-weight: var(--FF_WEIGHT_BASE);
	font-feature-settings: "palt" 1;
	letter-spacing: var(--LETTER_SPACING);
	width:100%;
	color: var(--TXT_COLOR_BASE);
	position:relative;
	z-index: 0;
	overflow-x: clip;
}
.mainarea{
	overflow: hidden;
}
a{
	text-decoration: none;
	outline: none;
	word-wrap: break-word;
	color: var(--TXT_COLOR_BASE);
}
a:visited{
	color: var(--TXT_COLOR_BASE);
}
a img,a{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s;
}
img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
iframe{
	vertical-align: bottom;
}

/* imgリセット */
.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}
/* セクション間隔*/
.g-mgt{
	margin-top: var(--GENERALSEC);
}
.g-mgb{
	margin-bottom: var(--GENERALSEC);
}
.g-pd{
	padding-block: var(--GENERALSEC);
}
.g-pdt{
	padding-top: var(--GENERALSEC);
}
.g-pdb{
	padding-bottom: var(--GENERALSEC);
}
.g-mgt--half{
	margin-top: var(--GENERALSEC_HALF);
}
.g-mgb--half{
	margin-bottom: var(--GENERALSEC_HALF);
}
.g-pd--half{
	padding-block: var(--GENERALSEC_HALF);
}
.g-pdt--half{
	padding-top: var(--GENERALSEC_HALF);
}
.g-pdb--half{
	padding-bottom: var(--GENERALSEC_HALF);
}

/* スライダー読み込みまで非表示 */
.slick{
	opacity: 0;
	transition: opacity .3s linear;
}
.slick.slick-initialized{
	opacity: 1;
}

/* スクロールバー消す */
.noscrollbar,
.noscrollbar{
	-ms-overflow-style: none;/* IE, Edge 対応 */
	scrollbar-width: none;/* Firefox 対応 */
}
.noscrollbar::-webkit-scrollbar,
.noscrollbar::-webkit-scrollbar{/* Chrome, Safari 対応 */
	display: none;
}
/* youtube */
.youtubeContainer iframe {
  display: block;
  width: 100%;
	height: auto;
	aspect-ratio: 10000/5625;
}

/* 縦書き */
.tategaki{
	writing-mode: vertical-rl;
}

/* 親要素超えて幅100% */
.widthOverParent{
	width: 100vw;
	--OYA: calc(50% - 50vw);;
	margin-left: var(--OYA);
	margin-right: var(--OYA);
}
@media (hover: hover){
	a:hover img{
		opacity:0.75 !important;
	}
}
html.no-smooth-scroll {
	scroll-behavior: auto;
}
.g-inner,
.g-inner--l,
.g-inner--m,
.g-inner--s,
.g-inner--ss{
	width: var(--INNER_WIDTH);
	margin-inline: auto;
}
@media screen and (min-width: 768px){
	html{
		scroll-padding-top: 120px;
	}
	body{
		font-size: var(--FZ_16);
		line-height: 1.7;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		padding-top: 100px;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.g-inner--pc{
		width: var(--INNER_WIDTH);
		margin-inline: auto;
	}
	.g-inner,
	.g-inner--m,
	.g-inner--pc{
		max-width: var(--PC_MAX_WIDTH_M);
	}
	.g-inner--l{
		max-width: var(--PC_MAX_WIDTH_L);
	}
	.g-inner--s{
		max-width: var(--PC_MAX_WIDTH_S);
	}
	.g-inner--ss{
		max-width: var(--PC_MAX_WIDTH_SS);
	}
	.g-inner--pcHasSlickGap{
		--INNER_ADJUST: calc(var(--SLICK_GAP) * 2);
    width: calc(var(--INNER_WIDTH) + var(--INNER_ADJUST));
    max-width: calc(var(--PC_MAX_WIDTH_M) + var(--INNER_ADJUST));
		margin-inline: auto;
	}
	.g-pd--halfPcOnly{
		padding-block: var(--GENERALSEC_HALF);
	}
	.sp{
		display: none !important;
	}
	.tategaki--pc{
		writing-mode: vertical-rl;
	}
}
@media screen and (max-width: 767px){
	html{
		scroll-padding-top: 50px;
	}
	body{
		font-size: var(--FZ_14_CONST);
		line-height: 1.6;
		padding-bottom: 88px;
	}
	.g-inner--sp{
		width: var(--INNER_WIDTH);
		margin-inline: auto;
	}
	.g-pd--halfPcOnly{
		padding-block: var(--GENERALSEC);
	}
	.pc{
		display: none !important;
	}
	.sp-scroll--y{
		overflow-y: scroll;
		overflow-x: auto;
	}
	.sp-scroll--x{
		overflow-x: scroll;
		overflow-y: auto;
		padding-inline: calc((100% - var(--INNER_WIDTH)) / 2);
	}
}


/* 下から浮き出るアニメーション */
.fadeupTrigger01{
	opacity: 0;
}
.fadeupTrigger02{
	opacity: 0;
}
.fadeupTrigger03{
	opacity: 0;
}
.fadeupTrigger04{
	opacity: 0;
}
.fadeupTrigger05{
	opacity: 0;
}
.fadeupTriggerabout01{
	opacity: 0;
}
.fadeupTriggerabout02{
	opacity: 0;
}
.fadeupTriggeruse01{
	opacity: 0;
}
.fadeup01{
	animation: fadeUp forwards 1s ease normal;
}
.fadeup02{
	animation: fadeUp forwards 1s ease 0.2s normal;
}
.fadeup03{
	animation: fadeUp forwards 1s ease 0.4s normal;
}
.fadeup04{
	animation: fadeUp forwards 1s ease 0.8s normal;
}
.fadeup05{
	animation: fadeUp forwards 1s ease 1s normal;
}
.fadeupabout01{
	animation: fadeUpAbout01 forwards 1s ease normal;
}
.fadeupabout02{
	animation: fadeUpAbout02 forwards 1s ease normal;
}
.fadeupuse01{
	animation: fadeUpUse01 forwards 1s ease normal;
}
@keyframes fadeUp{
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeUpAbout02{
	0% {
		opacity: 0;
		transform: translate(-50%,10px);
	}
	100% {
		opacity: 1;
		transform: translate(-50%,0px);
	}
}

@media screen and (min-width: 768px){
	@keyframes fadeUpAbout01{
		0% {
			opacity: 0;
			transform: translate(-50%, -130%);
		}
		100% {
			opacity: 1;
			transform: translate(-50%, -140%);
		}
	}
}
@media screen and (max-width: 767px){
	@keyframes fadeUpAbout01{
		0% {
			opacity: 0;
			transform: translate(-100%, 10px);
		}
		100% {
			opacity: 1;
			transform: translate(-100%,0px);
		}
	}
}
@media screen and (min-width: 768px){
	@keyframes fadeUpUse01{
		0% {
			opacity: 0;
			transform: translateY(10px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
}
@media screen and (max-width: 767px){
	@keyframes fadeUpUse01{
		0% {
			opacity: 0;
			top: -20px;
		}
		100% {
			opacity: 1;
			top: -30px;
		}
	}
}
@media screen and (min-width: 768px){
	.fadeupTrigger01-pc{
		opacity: 0;
	}
	.fadeupTrigger02-pc{
		opacity: 0;
	}
	.fadeupTrigger03-pc{
		opacity: 0;
	}
	.fadeupTrigger04-pc{
		opacity: 0;
	}
	.fadeupTrigger05-pc{
		opacity: 0;
	}
}

/* ■■■■■■■■■■■■■■■■■■■■■■header■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (min-width: 841px){
	.header__left{
		width: clamp( 190px, 22vw, 320px);
	}

	.headerBtn{
		width: clamp( 160px, 18vw, 250px);
	}
}
@media screen and (min-width: 768px) and (max-width: 840px){
	.header__inner{
		margin-left: calc((100vw - 90%)/2);
	}
	.header__left{
		width: 150px;
	}

	.headerBtn{
		width: clamp( 100px, 18vw, 250px);
	}
}
@media screen and (min-width: 768px){
	.header{
		height: 100px;
		background: var(--WHITE);
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	.header__inner{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		margin-left: calc((100vw - 90%)/2);
	}

	.header__navi{
		width: fit-content;
	}
	.header__navi ul{
		display: flex;
		align-items: center;
		gap: clamp( 10px, 1.3vw, 20px);
	}
	.header__navi ul li a{
		display: block;
		font-weight: bold;
		font-size: clamp( 10px, 1.2vw, 16px);
	}
	.header__navi ul li a::before{
		content: "";
		display: inline-block;
		background: url(../images/top/header-arrow.svg) no-repeat center center/100%;
		aspect-ratio: 1/1;
		width: clamp( 10px, 1vw, 14px);
		margin-right: 5px;
		transform: translateY(1px);
	}

	.headerBtn{
		height: 100%;
	}
	.headerBtn a{
		background: var(--BLUE01);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 100%;
		color: var(--WHITE);
		font-size: clamp(13px, 1.3vw, 18px);
		font-weight: bold;
	}
	.headerBtn a span{
		display: block;
		transition: 0.3s;
	}
}
@media (hover: hover){
	.header__navi li a:hover{
		opacity: 0.7;
	}
	.headerBtn:hover a span{
		transform: scale(1.1);
	}
}
@media screen and (max-width: 767px){
	.header{
		padding-block: 15px 5px;
	}
	.header__left{
		width: 220px;
		margin-inline: auto;
	}

	/* ボタン */
	.headerBtn{
		position: fixed;
		bottom: -20px;
		left: 0;
		width: 100%;
		background: var(--WHITE);
		border-top: 1px solid var(--WHITE);
		padding-block: 12px;
		z-index: 100;
		opacity: 0;
		transition: 0.3s;
	}
	.headerBtn a{
		display: block;
		background: var(--BLUE01);
		width: 300px;
		color: var(--WHITE);
		font-size: 16px;
		font-weight: bold;
		padding-block: 13px;
		border-radius: 50px;
		margin-inline: auto;
		text-align: center;
	}
	/* スクロールでクラス追加 */
	.headerBtn.scrolled{
		opacity: 1;
		bottom: 0;
	}
}


/* ■■■ fv ■■■ */
.fvCon__future__text{
	font-weight: bold;
}
.fvCon__heading{
	font-weight: bold;
	border-bottom: 1px solid;
	color: var(--BROWN01);
}
.fvCon__heading > span{
	display: block;
}
.fvCon__pic__top{
	font-weight: bold;
}
.fvCon__dtl__text{
	font-weight: bold;
}
.fvCon__dtl__text::before{
	content: "";
	display: inline-block;
	background: url(../images/top/fv-check.svg) no-repeat center center/100%;
	aspect-ratio: 26/25;
}
.fvCon__dtl__price{
	aspect-ratio: 1/1;
	background: var(--BLUE01);
	color: var(--WHITE);
	font-weight: 500;
	border-radius: 50%;
	line-height: 1;
}
@media screen and (min-width: 1601px){
	.fv{
		width: 1450px;
		margin-inline: auto;
	}
	/* アイテム */
	.fvPic__glass{
		width: clamp(50px, 7vw, 86px);
		top: 0;
		left: 0;
		transform: translate(-50%, 15%);
	}
	.fvPic__sofa{
		width: clamp(100px, 18vw, 255px);
		top: 0;
		left: 0;
		transform: translate(25%, -5%);
	}
	.fvPic__desk{
		width: clamp(50px, 11vw, 161px);
		top: 0;
		left: 0;
		transform: translate(240%, 30%);
	}
	.fvPic__leaf{
		width: clamp(50px, 13vw, 190px);
		top: 0;
		left: 0;
		transform: translate(300%, -10%);
	}
	.fvPic__dish{
		width: clamp(90px, 16vw, 228px);
		bottom: 0;
		left: 0;
		transform: translate(43%, 1%);
	}
	.fvPic__grayBottle{
		width: clamp(20px, 6vw, 90px);
		bottom: 0;
		left: 0;
		transform: translate(600%, 0%);
	}
	.fvPic__whiteBottle{
		width: clamp(20px, 9vw, 135px);
		bottom: 0;
		left: 0;
		transform: translate(420%, -5%);
	}
}
@media screen and (min-width: 768px) and (max-width: 1600px){
	.fv{
		margin-left: calc((100vw - 90%)/2);
	}
	/* アイテム */
	.fvPic__glass{
		width: clamp(50px, 7vw, 86px);
		top: 0;
		left: 0;
		transform: translate(-50%, 15%);
	}
	.fvPic__sofa{
		width: clamp(100px, 18vw, 255px);
		top: 0;
		left: 0;
		transform: translate(25%, -5%);
	}
	.fvPic__desk{
		width: clamp(50px, 11vw, 161px);
		top: 0;
		left: 0;
		transform: translate(230%, 30%);
	}
	.fvPic__leaf{
		width: clamp(50px, 13vw, 190px);
		top: 0;
		left: 0;
		transform: translate(260%, -10%);
	}
	.fvPic__dish{
		width: clamp(90px, 16vw, 228px);
		bottom: 0;
		left: 0;
		transform: translate(43%, 1%);
	}
	.fvPic__grayBottle{
		width: clamp(20px, 6vw, 90px);
		bottom: 0;
		left: 0;
		transform: translate(500%, 0%);
	}
	.fvPic__whiteBottle{
		width: clamp(20px, 9vw, 135px);
		bottom: 0;
		left: 0;
		transform: translate(360%, -5%);
	}
}
@media screen and (min-width: 1200px){
	.fvCon__heading{
		font-size: clamp(50px, 7.25vw, 108.75px);
	}
}
@media screen and (min-width: 768px) and (max-width: 1199px){
	.fvCon__heading{
		font-size: clamp(50px, 7vw, 108.75px);
	}
}
@media screen and (min-width: 900px){
	.fvCon__dtl__text{
		font-size: clamp(3px, 1.25vw, 20px);
	}
}
@media screen and (min-width: 768px) and (max-width: 900px){
	.fvCon__dtl__text{
		font-size: clamp(3px, 1.2vw, 20px);
	}
}
@media screen and (min-width: 768px){
	.fv{
		margin-block: 50px 50px;
		display: grid;
		grid-template-columns: 520fr 726fr;
		align-items: center;
	}

	.fvCon__future{
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.fvCon__future__pic{
		width: clamp( 120px, 12vw, 165px);
	}

	.fvCon__heading{
		line-height: 1.2;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid;
	}

	.fvCon__pic{
		margin-bottom: 25px;
	}
	.fvCon__pic__top{
		font-size: clamp(8px, 1.1vw, 16px);
		margin-bottom: 12px;
	}

	.fvCon__dtl{
		display: grid;
		grid-template-columns: 1fr clamp( 50px, 9.5vw, 142px);
		align-items: center;
	}
	.fvCon__dtl__feature{
		display: grid;
		gap: 15px;
	}
	.fvCon__dtl__text{
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.fvCon__dtl__text::before{
		width: clamp( 2px, 1.5vw, 22.5px);
	}

	.fvCon__dtl__price{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.fvCon__dtl__price__top{
		font-size: clamp(5px, 1.1vw, 17px);
	}
	.fvCon__dtl__price__mdl{
		font-size: clamp(5px, 1.6vw, 24px);
	}
	.fvCon__dtl__price__btm{
		font-size: clamp(5px, 1vw, 12px);
	}

	.fvPic{
		transform: translateX(16%) scale(1.1);
		position: relative;
	}

	.fvPic__item{
		position: absolute;
		z-index: 2;
	}
	.fvPic__item.fvPic__grayBottle{
		z-index: 3;
	}
}


@media screen and (max-width: 767px){
	.fv{
		display: flex;
		flex-direction: column-reverse;
		gap: 10px;
		margin-bottom: var(--GENERALSEC);
		overflow: hidden;
	}
	/* スマホとアイテム */
	.fvPic{
		position: relative;
	}
	.fvPic::before{
		content: "";
		display: inline-block;
		background: var(--GRAY02);
		width: 100%;
		height: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: var(--FZ_14);
	}
	.fvPic__iphone{
		display: block;
		width: 230px;
		margin-inline: auto;
    transform: translateX(20%);
	}

	/* アイテム */
	.fvPic__inner{
		position: relative;
		width: 327px;
	}
	.fvPic__item{
		position: absolute;
		z-index: 3;
	}
	.fvPic__item.fvPic__grayBottle{
		z-index: 4;
	}
	.fvPic__glass{
		width: 58px;
		bottom: 0;
		left: 0;
		transform: translate(130%, -20%) rotate(15deg);
	}
	.fvPic__sofa{
		width: 228px;
		bottom: 0;
		left: 0;
		transform: translate(-51%, -90%) rotate(10deg);
	}
	.fvPic__desk{
		width: 138px;
		bottom: 0;
		left: 0;
		transform: translate(-25%, 12%);
	}
	.fvPic__leaf{
		width: 200px;
		bottom: 0;
		right: 0;
		transform: translate(58%, 0%) rotate(10deg);
}
	.fvPic__dish{
		width: 147px;
		bottom: 0;
		right: 0;
		transform: translate(-15%, 37%);
	}
	.fvPic__grayBottle{
		width: 70px;
		bottom: 0;
		right: 0;
		transform: translate(10%, 120%) rotate(-30deg);
	}
	.fvPic__whiteBottle{
		width: 105px;
		bottom: 0;
		right: 0;
		transform: translate(58%, 80%) rotate(-30deg);
	}

	/* メインコンテンツ */
	.fvCon__inner{
		width: 330px;
	}
	.fvCon__future{
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 3px;
	}
	.fvCon__future__pic{
		width: 102px;
	}

	.fvCon__heading{
		font-size: 52px;
		line-height: 1.2;
		margin-bottom: 10px;
		padding-bottom: 10px;
		letter-spacing: 0.11em;
	}

	.fvCon__pic{
		margin-bottom: 13px;
	}
	.fvCon__pic__top{
		font-size: 10.09px;
		margin-bottom: 8px;
		letter-spacing: 0.09em;
	}
	.fvCon__pic__img{
		width: 327px;
	}

	.fvCon__dtl{
		display: flex;
		align-items: center;
	}
	.fvCon__dtl__feature{
		display: grid;
		gap: 8px;
	}
	.fvCon__dtl__text{
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 11px;
		letter-spacing: 0.09em;
	}
	.fvCon__dtl__text::before{
		width: 16px;
	}

	.fvCon__dtl__price{
		width: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		letter-spacing: 0.05em;
	}
	.fvCon__dtl__price__top{
		font-size: 11px;
		margin-bottom: 7px;
	}
	.fvCon__dtl__price__mdl{
		font-size: 13px;
		margin-bottom: 5px;
	}
	.fvCon__dtl__price__btm{
		font-size: 9px;
	}
}

/* アニメーション */
@media screen and (min-width: 768px){
	.fvPic__item:nth-of-type(-n+4){
		animation: move1 10s infinite;
	}
	@keyframes move1 {
		0% {
			top: 0px;
		}
		50% {
			top: -10px;
		}
		100% {
				top: 0px;
		}
	}

	.fvPic__item:nth-of-type(n+5){
		animation: move2 10s infinite;
	}
	@keyframes move2 {
		0% {
			bottom: 0px;
		}
		50% {
			bottom: -20px;
		}
		100% {
			bottom: 0px;
		}
	}
}
@media screen and (max-width: 767px){
	.fvPic__item{
		animation: move3 10s infinite;
	}
	@keyframes move3 {
		0% {
			bottom: 0px;
		}
		50% {
			bottom: 10px;
		}
		100% {
			bottom: 0px;
		}
	}
}

/* fvアニメーション */
.fvCon__heading span{
	opacity: 0;
}
.fvCon__heading__top{
	transition: 1s;
}
.fvCon__heading__btm{
	transition: 1s ease 0.3s;
}
.fvCon__heading.fvfade span{
	opacity: 1;
	transform: translateX(0px);
}
@media screen and (min-width: 768px){
	.fvCon__heading span{
		transform: translateX(-100px);
	}
}
@media screen and (max-width: 767px){
	.fvCon__heading span{
		transform: translateX(-50px);
	}
}

/* ■■■ bland ■■■ */
.bland{
	background-color: var(--BEIGE01);
}
.bland__top{
	font-weight: bold;
	text-align: center;
}
.bland__inner{
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (min-width: 768px){
	.bland{
		padding: 20px 0;
	}
	.bland__top{
		margin-bottom: 20px;
	}
	.bland__inner{
		gap: var(--GAP_100);
	}
	.bland__item1{
		width: 186px;
	}
	.bland__item2{
		width: 106px;
	}
	.bland__item3{
		width: 80px;
	}
	.bland__item4{
		width: 159px;
	}
}
@media screen and (max-width: 767px){
	.bland{
		padding: 20px 0;
	}
	.bland__top{
		margin-bottom: 20px;
	}
	.bland__inner{
		gap: 20px;
	}
	.bland__item1{
		width: 186px;
	}
	.bland__item2{
		width: 106px;
	}
	.bland__item3{
		width: 80px;
	}
	.bland__item4{
		width: 159px;
	}
}

/* ■■■ ECサイトのお悩みを解決 ■■■ */
.g-heading > span{
	display: block;
}
.g-heading__en{
	margin-inline: auto;
}
.g-heading__line{
	height: 2px;
	margin-inline: auto;
	background: var(--BLUE01);
}
.g-heading__hd{
	font-weight: bold;
	text-align: center;
	color: var(--DARK03);
}

.resolutionCon__hd{
	font-weight: bold;
	position: relative;
}
.resolutionCon__hd::after{
	content: "";
	display: inline-block;
	background: url(../images/top/arrow-under.svg) no-repeat center center/100%;
	aspect-ratio: 119/150;
	width: 13px;
	position: absolute;
}
.resolutionCon__lead{
	font-weight: bold;
	color: var(--BLUE01);
	position: relative;
}

.resolutionPurchase{
	color: var(--BLUE01);
	text-align: center;
	font-weight: 800;
}
@media screen and (min-width: 768px){
	.g-heading{
		margin-bottom: 50px;
	}
	.g-heading__en{
		margin-bottom: 20px;
	}
	.g-heading__en--resolution{
		width: 163px;
	}
	.g-heading__line{
		width: 30px;
		margin-bottom: 20px;
	}
	.g-heading__hd{
		font-size: var(--FZ_30);
	}

	.resolutionCon{
		display: grid;
		gap: 50px;
		margin-bottom: 40px;
	}
	.resolutionCon li{
		display: grid;
		grid-template-columns: 360fr 600fr;
		gap: var(--GAP_40);
	}
	.resolutionCon__hd{
		font-size: clamp(20px, 2vw, 26px);
		margin-bottom: 20px;
	}
	.resolutionCon__hd::after{
		left: 40px;
    bottom: -20px;
	}
	.resolutionCon__lead{
		display: inline-block;
		font-size: clamp(18px, 1.8vw, 24px);
		margin-bottom: 10px;
	}

	.resolutionPurchase{
		font-size: var(--FZ_20);
		margin-bottom: 18px;
	}
	.resolutionPurchaseNote{
		font-size: var(--FZ_12);
		text-align: right;
		margin-top: 10px;
	}
}
@media screen and (max-width: 767px){
	.g-heading{
		margin-bottom: 30px;
	}
	.g-heading__en{
		margin-bottom: 10px;
	}
	.g-heading__en--resolution{
		width: 140px;
	}
	.g-heading__line{
		width: 20px;
		margin-bottom: 10px;
	}
	.g-heading__hd{
		font-size: 20px;
	}

	.resolutionCon{
		display: grid;
		gap: 30px;
		margin-bottom: 25px;
	}
	.resolutionCon__pic{
		margin-bottom: 10px;
		max-width: 450px;
		margin-inline: auto;
	}
	.resolutionCon__hd{
		font-size: 18px;
		margin-bottom: 20px;
	}
	.resolutionCon__hd::after{
		left: 40px;
    bottom: -18px;
	}
	.resolutionCon__lead{
		font-size: 15px;
		margin-bottom: 10px;
		width: fit-content;
	}
	.resolutionCon__lead span{
		display: block;
		width: fit-content;
		position: relative;
	}

	.resolutionPurchase{
		font-size: 16px;
		margin-bottom: 10px;
	}
	.resolutionPurchaseSp{
		max-width: 450px;
		margin-inline: auto;
		font-weight: bold;
		color: var(--BLUE01);
		display: flex;
		justify-content: center;
		flex-wrap: wrap-reverse;
		gap: 0px 10px;
	}
	.resolutionPurchaseSp li{
		width: calc((100% - 10px) / 2);
		aspect-ratio: 1/1;
		border-radius: 50%;
		background: var(--BEIGE01);
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1;
	}
	.resolutionPurchaseSp li:nth-of-type(3){
		margin-bottom: -5px;
	}
	.resolutionPurchaseSp__hd{
		font-size: 18px;
		border-bottom: 1px solid;
		color: var(--BLUE01);
		font-weight: bold;
		padding-bottom: 3px;
		margin-bottom: 8px;
	}
	.resolutionPurchaseSp__text {
    line-height: 1.1;
}
	.resolutionPurchaseSp__text__average{
		font-size: 14px;
	}
	.resolutionPurchaseSp__text strong{
		font-size: 30px;
		font-family: var(--FF_MONTSERRAT);
	}
	.resolutionPurchaseSp__text__up{
		font-size: 18px;
	}
	.resolutionPurchaseNote{
		font-size: 10px;
		margin-top: 10px;
	}
}

/* マーカーアニメーション */
.markerUnder::before{
	width: 100% !important;
}
@media screen and (min-width: 768px){
	.resolutionCon__lead::before{
		content: "";
		display: inline-block;
		background: var(--YELLOW01);
		height: 40%;
		width: 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		transition: 0.5s;
	}
}
@media screen and (max-width: 767px){
	.resolutionCon li:nth-of-type(1) .resolutionCon__lead::before,.resolutionCon li:nth-of-type(3) .resolutionCon__lead::before{
		content: "";
		display: inline-block;
		background: var(--YELLOW01);
		height: 40%;
		width: 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		transition: 0.5s;
	}
	.resolutionCon__lead span::before{
		content: "";
		display: inline-block;
		background: var(--YELLOW01);
		height: 40%;
		width: 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
	.marker01::before{
		transition: 0.5s;
	}
	.marker02::before{
		transition: 0.5s ease 0.5s;
	}
}

/* 見出しアニメーション（ずらし） */
.g-heading__hd{
	overflow: hidden;
}
.g-heading__hd [class^="fd"]{
	display: inline-block;
	transform: translateY(100%);
}
.g-heading__price{
	overflow: hidden;
}
.g-heading__price span{
	display: inline-block;
	transform: translateY(100%);
}
.g-heading--inner{
	display: block;
	overflow: hidden;
}
@media screen and (min-width: 768px){
	.g-heading--inner{
		display: contents;
	}
}
.fd01{
	transition: 0.75s;
}
.fd02{
	transition: 0.75s ease-in-out 0.01s;
}
.fd03{
	transition: 0.75s ease-in-out 0.02s;
}
.fd04{
	transition: 0.75s ease-in-out 0.03s;
}
.fd05{
	transition: 0.75s ease-in-out 0.04s;
}
.fd06{
	transition: 0.75s ease-in-out 0.05s;
}
.fd07{
	transition: 0.75s ease-in-out 0.06s;
}
.fd08{
	transition: 0.75s ease-in-out 0.07s;
}
.fd09{
	transition: 0.75s ease-in-out 0.08s;
}
.fd10{
	transition: 0.75s ease-in-out 0.09s;
}
.fd11{
	transition: 0.75s ease-in-out 0.1s;
}
.fd12{
	transition: 0.75s ease-in-out 0.11s;
}
.fd13{
	transition: 0.75s ease-in-out 0.12s;
}
.fd14{
	transition: 0.75s ease-in-out 0.13s;
}
.fd15{
	transition: 0.75s ease-in-out 0.14s;
}
.fd16{
	transition: 0.75s ease-in-out 0.15s;
}
.fd17{
	transition: 0.75s ease-in-out 0.16s;
}
.fd18{
	transition: 0.75s ease-in-out 0.17s;
}
.fd19{
	transition: 0.75s ease-in-out 0.18s;
}
.fd20{
	transition: 0.75s ease-in-out 0.19s;
}

.fadeUp span{
	transform: translateY(0%) !important;
}

/* ■■■ HOW TO USE ■■■ */
.how{
	position: relative;
}
.how::before{
	content: "";
	display: inline-block;
	background: var(--BEIGE01);
	position: absolute;
}
.how__inner{
	position: relative;
}
.how__inner::before{
	content: "";
	display: inline-block;
	background: url(../images/top/how-desk.png) no-repeat center center/100%;
	aspect-ratio: 1/1;
	position: absolute;
}
.howHeading{
	font-weight: bold;
}
.howHeading span{
	display: block;
}
.howHeading__en{
	color: var(--DARK03);
}

.howCon__hd > span{
	display: block;
	text-align: center;
}
.howCon__hd__en{
	color: var(--BLUE01);
	font-family: var(--FF_MONTSERRAT);
}
.howCon__hd__jp{
	font-weight: bold;
	color: var(--DARK03);
}
.howCon__text{
	text-align: center;
	font-weight: 500;
}
@media screen and (min-width: 768px){
	.how::before{
		width: 100%;
		height: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.how__inner::before{
		width: clamp( 130px, 15vw, 200px);
		top: 100px;
		right: 10px;
	}
	.howHeading{
		width: fit-content;
		margin-left: auto;
		margin-right: 11%;
		margin-bottom: -100px;
	}
	.howHeading__en{
		width: clamp( 200px, 31vw, 425px);
		margin-bottom: 20px;
	}
	.howHeading__jp{
		font-size: var(--FZ_20);
	}

	.howCon{
		display: flex;
		gap: var(--GAP_50);
	}
	.howCon li{
		flex: 1;
	}
	.howCon__hd{
		margin-bottom: 5px;
	}
	.howCon__hd__en{
		font-size: var(--FZ_30);
	}
	.howCon__hd__jp{
		font-size: var(--FZ_14);
	}
	.howCon__text{
		font-size: var(--FZ_18);
	}
	.howCon li:nth-of-type(2){
		margin-top: 100px;
	}
	.howCon li:nth-of-type(3){
		margin-top: 200px;
	}
	.howCon li:nth-of-type(4){
		margin-top: 300px;
	}
}
@media screen and (max-width: 767px){
	.how::before{
		width: 100%;
		height: 60%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.how__inner::before{
		width: 110px;
		top: 5px;
		right: -15px;
	}
	.howHeading{
		margin-bottom: 35px;
	}
	.howHeading__en{
		width: 250px;
		margin-bottom: 10px;
	}
	.howHeading__jp{
		font-size: 16px;
	}

	.howCon{
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}
	.howCon li{
		width: calc((100% - 20px) / 2);
	}
	.howCon__pic{
		margin-bottom: 5px;
	}
	.howCon__hd{
		margin-bottom: 5px;
	}
	.howCon__hd__en{
		margin-bottom: 5px;
		font-size: 20px;
	}
	.howCon__hd__jp{
		font-size: 13px;
	}
	.howCon__text{
		font-size: 15px;
	}
}
/* アニメーション */
.how__inner::before{
	animation: move4 10s infinite;
}
@keyframes move4 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}


/* ■■■ 「コーディネートピック」とは ■■■ */
.g-heading__sbhd{
	text-align: center;
	font-weight: bold;
	color: var(--DARK03);
}
.about__lead{
	font-weight: 500;
	text-align: center;
	color: var(--DARK03);
}
.about__lead span{
	color: var(--BLUE01);
	font-weight: bold;
}

.aboutPossible{
	background-color: var(--BEIGE01);
}
.possible__hd{
	font-weight: bold;
	width: fit-content;
	margin-inline: auto;
	text-align: center;
	color: var(--DARK03);
}
.possible__hd > span{
	display: block;
}
.possible__hd__btm{
	border-bottom: 1px solid var(--BLUE01);
}

.aboutPossibleCon__hd{
	font-weight: bold;
}
.aboutPossibleCon__hd span{
	color: var(--BLUE01);
	margin-inline: 7px;
}
.aboutPossibleCon__pic img{
	border-radius: 10px;
}
/* 相互に回遊 */
.aboutPossibleCon__run{
	position: absolute;
	aspect-ratio: 1/1;
	background: var(--WHITE);
	color: var(--BLUE01);
	font-weight: 500;
	border-radius: 50%;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
	text-align: center;
}
.aboutPossibleCon__run__inner{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
}
.aboutPossibleCon__run__inner::before{
	content: "";
	display: inline-block;
	background: url(../images/top/aboutPossibleCon-underArrow.svg) no-repeat center center/100%;
	aspect-ratio: 7/6;
	position: absolute;
}
@media screen and (min-width: 768px){
	.about{
		position: relative;
		margin-bottom: clamp( 120px, 15vw, 200px);
	}
	.about::after{
		content: "";
		display: inline-block;
		background: url(../images/top/about-sofa.png) no-repeat center center/100%;
		aspect-ratio: 295/138;
		position: absolute;
		width: clamp( 200px, 20vw, 295px);
		left: -5%;
		bottom: -70px;
	}
	.g-heading__en--about{
		width: 210px;
	}
	.g-heading__sbhd{
		font-size: var(--FZ_20);
	}
	.about__lead{
		font-size: var(--FZ_18);
		margin-bottom: 50px;
		line-height: 2;
	}

	.aboutPossible{
		padding: var(--GAP_75) var(--GAP_90);
	}
	.possible__hd{
		margin-bottom: 50px;
	}
	.possible__hd__top{
		font-size: var(--FZ_20);
	}
	.possible__hd__btm{
		font-size: clamp(20px, 2vw, 26px);
		line-height: 2;
	}

	.aboutPossibleCon{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 30px;
		position: relative;
		margin-bottom: 50px;
	}
	/* 相互 */
	.aboutPossibleCon__run{
		width: 70px;
		font-size: var(--FZ_12);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -140%);
	}
	.aboutPossibleCon__run__inner::before{
		width: 10px;
		left: 50%;
		transform: translateX(-50%);
		top: 99%;
	}

	 /* 矢印 */
	.aboutPossibleCon::after{
		content: "";
		display: inline-block;
		background: url(../images/top/aboutPossibleCon-arrow.svg) no-repeat center center/100%;
		aspect-ratio: 97/50;
		width: 50px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.aboutPossibleCon__hd{
		font-size: clamp(14px, 1.8vw, 22px);
		margin-bottom: 15px;
	}
	.aboutPossibleCon__pic{
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 767px){
	.about{
		margin-bottom: 60px;
	}
	.g-heading__en--about{
		width: 130px;
	}
	.g-heading__sbhd{
		font-size: 16px;
	}
	.about__lead{
		font-size: 15px;
		margin-bottom: 30px;
		line-height: 1.8;
	}

	.aboutPossible{
		padding: 40px 0;
	}
	.possible__hd{
		margin-bottom: 30px;
	}
	.possible__hd__top{
		font-size: 16px;
	}
	.possible__hd__btm{
		font-size: 20px;
		line-height: 1.8;
	}
	.aboutPossible__inner{
		position: relative;
	}
	.aboutPossible__inner::after{
		content: "";
		display: inline-block;
		background: url(../images/top/about-sofa.png) no-repeat center center/100%;
		aspect-ratio: 295/138;
		position: absolute;
		width: 130px;
		left: 0;
		bottom: -80px;
	}

	.aboutPossibleCon{
		display: grid;
		gap: 70px;
		margin-bottom: 30px;
	}
	.aboutPossibleCon__hd{
		font-size: 17px;
		margin-bottom: 10px;
	}
	.aboutPossibleCon__pic{
		margin-bottom: 10px;
	}
	.aboutPossibleCon li:first-child{
		position: relative;
	}

	/* 相互 */
	.aboutPossibleCon__run{
		width: 55px;
		font-size: 10px;
		left: 50%;
		transform: translateX(-100%);
		bottom: -60px;
	}
	.aboutPossibleCon__run__inner::before{
		width: 10px;
		top: 50%;
		transform: translateY(-50%) rotate(-90deg);
		left: 97%;
	}
	/* 矢印 */
	.aboutPossibleCon li:first-child::after{
		content: "";
		display: inline-block;
		background: url(../images/top/aboutPossibleCon-arrow.svg) no-repeat center center/100%;
		aspect-ratio: 97/50;
		width: 40px;
		position: absolute;
		left: 50%;
		transform: translateX(0%) rotate(90deg);
		bottom: -45px;
	}
}

/* 複数のコーディネートと商品を回遊（aboutの中身ここから区切ってる） */
.aboutPossibleRun{
	background: var(--WHITE);
	border-radius: 50px;
}
.aboutPossibleRun__top{
	color: var(--BLUE01);
	font-weight: bold;
}

.aboutPossibleRun__pic{
	position: relative;
}
.aboutPossibleRun__con li:nth-of-type(1) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(3) .aboutPossibleRun__pic:before{
	content: "";
	display: inline-block;
	background: url(../images/top/aboutPossibleRun-top.svg) no-repeat center center/100%;
	aspect-ratio: 300/107;
	position: absolute;
	z-index: 2;
}
.aboutPossibleRun__con li:nth-of-type(2) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(4) .aboutPossibleRun__pic:before{
	content: "";
	display: inline-block;
	background: url(../images/top/aboutPossibleRun-btm.svg) no-repeat center center/100%;
	aspect-ratio: 300/107;
	position: absolute;
	z-index: 2;
}
.aboutPossibleRun__text{
	text-align: center;
	font-weight: bold;
}
@media screen and (min-width: 768px){
	.aboutPossibleRun{
		margin-bottom: 80px;
		padding: 30px var(--GAP_50);
	}
	.aboutPossibleRun__top{
		font-size: var(--FZ_20);
		margin-bottom: 30px;
		border-bottom: 1px solid;
		width: fit-content;
		margin-inline: auto;
	}

	.aboutPossibleRun__con{
		display: flex;
		gap: 30px;
	}
	.aboutPossibleRun__con li{
		flex: 1;
	}
	.aboutPossibleRun__pic{
		margin-bottom: 10px;
	}
	.aboutPossibleRun__con li:nth-of-type(1) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(3) .aboutPossibleRun__pic:before{
		top: 0;
		width: 40px;
		left: 100%;
	}
	.aboutPossibleRun__con li:nth-of-type(2) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(4) .aboutPossibleRun__pic:before{
		bottom: 0;
		width: 40px;
		left: 100%;
	}
	.aboutPossibleRun__text{
		font-size: clamp(9px, 0.9vw, 13px);
	}
}
@media screen and (max-width: 767px){
	.aboutPossibleRun{
		margin-bottom: 50px;
		padding: 20px;
	}
	.aboutPossibleRun__top{
		font-size: 14px;
		margin-bottom: 20px;
	}
	.aboutPossibleRun__top span{
		display: block;
		text-align: center;
		border-bottom: 1px solid;
		width: fit-content;
		margin-inline: auto;
	}

	.aboutPossibleRun__con{
		display: flex;
		gap: 30px;
		overflow-x: scroll;
	}
	.aboutPossibleRun__con li{
		min-width: 100px;
	}
	.aboutPossibleRun__pic{
		margin-bottom: 10px;
	}
	.aboutPossibleRun__con li:nth-of-type(1) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(3) .aboutPossibleRun__pic:before{
		top: 0;
		width: 40px;
		left: 100%;
	}
	.aboutPossibleRun__con li:nth-of-type(2) .aboutPossibleRun__pic:before,.aboutPossibleRun__con li:nth-of-type(4) .aboutPossibleRun__pic:before{
		bottom: 0;
		width: 40px;
		left: 100%;
	}
	.aboutPossibleRun__text{
		font-size: 11px;
	}
}


/* POINT */
.aboutPossiblePoint{
	border-radius: 50px;
	background: var(--WHITE);
	position: relative;
}
.aboutPossiblePoint__pointBox{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.aboutPossiblePoint__point{
	position: relative;
	aspect-ratio: 1/1;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--WHITE);
	font-family: var(--FF_MONTSERRAT);
	font-weight: 600;
	background-color: var(--BLUE01);
	border-radius: 50%;
}
.aboutPossiblePoint__point::before{
	content: "";
	display: inline-block;
	background: url(../images/top/aboutPossiblePoint-deco.svg) no-repeat center center/100%;
	aspect-ratio: 1/1;
	width: 14px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -8px;
}
.aboutPossiblePoint__lead{
	text-align: center;
	font-weight: bold;
}

/* コンテンツ */
.aboutPossiblePoint__pic{
	border: 1px solid var(--GRAY01);
	border-radius: 10px;
}
.aboutPossiblePoint__pic img{
	border-radius: 10px;
}
.aboutPossiblePoint__inner{
	position: relative;
}
.aboutPossiblePoint__hd{
	font-weight: bold;
}
@media screen and (min-width: 768px){
	.aboutPossiblePoint{
		margin-bottom: 50px;
		padding: 50px var(--GAP_65);
	}
	.aboutPossiblePoint__pointBox{
		top: -40px;
	}
	.aboutPossiblePoint__point{
		width: 70px;
		font-size: var(--FZ_12);
	}
	.aboutPossiblePoint__lead{
		font-size: var(--FZ_20);
		margin-bottom: 50px;
	}
	/* コンテンツ */
	.aboutPossiblePoint__con{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: var(--GAP_30);
		align-items: center;
	}
	.aboutPossiblePoint__body{
		display: grid;
		gap: var(--GAP_30);
	}
	.aboutPossiblePoint__inner{
		padding-left: 18px;
		color: var(--DARK02);
		transition: 0.5s;
		cursor: pointer;
	}
	.aboutPossiblePoint__inner::before{
		content: "";
		display: inline-block;
		background: url(../images/top/aboutPossiblePoint-arrow.svg) no-repeat center center/100%;
		aspect-ratio: 2/3;
		width: 8px;
		position: absolute;
		left: 0;
		top: 10px;
	}
	.aboutPossiblePoint__hd{
		font-size: var(--FZ_18);
		margin-bottom: 4px;
		transition: 0.5s;
	}
	.aboutPossiblePoint__text{
		font-size: var(--FZ_12);
		transition: 0.5s;
	}

	/* アクティブの時 */
	.point-active{
		transform: translateX(-20px);
	}
	.point-active::before{
		display: none;
	}
	.point-active .aboutPossiblePoint__hd{
		color: var(--BLUE01);
	}
	.point-active .aboutPossiblePoint__text{
		color: var(--DARK01);
	}
	
}
@media screen and (max-width: 767px){
	.aboutPossiblePoint{
		margin-bottom: 50px;
		padding: 35px 20px;
	}
	.aboutPossiblePoint__pointBox{
		top: -30px;
	}
	.aboutPossiblePoint__point{
		width: 50px;
		font-size: 10px;
	}
	.aboutPossiblePoint__lead{
		font-size: 18px;
		margin-bottom: 20px;
	}

	/* コンテンツ */
	.aboutPossiblePoint__body{
		display: grid;
		gap: 20px;
	}
	.aboutPossiblePoint__hd{
		color: var(--BLUE01);
		font-size: 16px;
		margin-bottom: 10px;
	}
	.aboutPossiblePoint__spBox{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		align-items: center;
		gap: 10px;
	}
	.aboutPossiblePoint__text{
		font-size: 11px;
	}
}

/* ボタン */
.g-btn{
	margin-inline: auto;
}
.g-btn a{
	display: block;
	color: var(--WHITE);
	background: var(--BLUE01);
	font-weight: bold;
	text-align: center;
	border-radius: 40px;
}
.g-btn a span{
	display: block;
	transition: 0.5s;
}
@media (hover: hover){
	.g-btn a:hover span{
		transform: scale(1.1);
	}
}
@media screen and (min-width: 768px){
	.g-btn{
		width: clamp( 300px, 27vw, 400px);
	}
	.g-btn a{
		font-size: var(--FZ_20);
		padding-block: 20px;
	}
}
@media screen and (max-width: 767px){
	.g-btn{
		width: 300px;
	}
	.g-btn a{
		font-size: 16px;
		padding-block: 15px;
	}
}

/* アニメーション */
.aboutPossible__inner::after,.about::after{
	animation: move5 10s infinite;
}
@keyframes move5 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

/* ■■■ 選ばれる理由 ■■■ */
.reasonCon li{
	position: relative;
}
.reasonCon__check{
	display: inline-block;
	background: url(../images/top/reason-check.svg) no-repeat center center/100%;
	aspect-ratio: 1/1;
	position: absolute;
}
.reasonCon__hd{
	font-weight: bold;
}
.reasonCon__text span{
	font-weight: bold;
	color: var(--BLUE01);
}
@media screen and (min-width: 768px){
	.g-heading__en--reason{
		width: 200px;
	}
	.reasonCon{
		display: grid;
		gap: 50px;
	}
	.reasonCon li{
		padding-left: 40px;
	}
	.reasonCon__check{
		width: 32px;
		left: 0;
		top: 2px;
	}
	.reasonCon__hd{
		font-size: var(--FZ_20);
		margin-bottom: 4px;
	}
	.reasonCon__text{
		line-height: 1.9;
	}
}
@media screen and (max-width: 767px){
	.g-heading__en--reason{
		width: 130px;
	}
	.reasonCon{
		display: grid;
		gap: 30px;
	}
	.reasonCon li{
		padding-left: 35px;
	}
	.reasonCon__check{
		width: 25px;
		left: 0;
		top: 3px;
	}
	.reasonCon__hd{
		font-size: 18px;
		margin-bottom: 4px;
	}
	.reasonCon__text{
		line-height: 1.8;
	}
}


/* ■■■ 導入事例 ■■■ */
.example{
	background: var(--BEIGE01);
}
.example__inner{
	position: relative;
}
.exampleCon__top__vari{
	display: block;
	color: var(--WHITE);
	background: var(--BLUE01);
	border-radius: 50%;
	aspect-ratio: 1/1;
	line-height: 1.6;
}
.exampleCon__top__vari span{
	display: block;
}
.exampleCon__top__vari__jp{
	font-weight: 500;
}
.exampleCon__top__name{
	display: block;
	font-weight: 500;
}
/* 画像と説明 */
/* キーワード */
.exampleCon__keyword{
	background: var(--WHITE);
	border-radius: 20px;
	font-weight: bold;
	color: var(--BLUE01);
	position: relative;
	width: fit-content;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}
.exampleCon__keyword::before{
	content: "";
	display: inline-block;
	background: url(../images/top/example-sikaku.svg) no-repeat center center/100%;
	aspect-ratio: 41/30;
	position: absolute;
	left: 40%;
  top: 95%;
}

.exampleCon__sbhd{
	font-weight: bold;
}
.exampleCon__list li:not(:last-child){
border-bottom: 1px solid var(--GRAY01);
}
.exampleCon__list li span{
	margin-inline: 3px;
}
.exampleCon__note{
	text-align: right;
}
/* 皿 */
.example__inner::before{
	content: "";
	display: inline-block;
	background: url(../images/top/example-dish.png) no-repeat center center /100%;
	aspect-ratio: 343/235;
	position: absolute;
}
@media screen and (min-width: 768px){
	.g-heading__en--example{
		width: 208px;
	}
	.exampleCon{
		margin-bottom: 50px;
		display: grid;
		gap: 50px;
	}
	.exampleCon__top{
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.exampleCon__top__vari{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100px;
	}
	.exampleCon__top__vari__en{
		font-size: var(--FZ_12);
	}
	.exampleCon__top__name{
		font-size: var(--FZ_24);
	}
	.exampleCon__top__name span{
		font-size: var(--FZ_16);
	}

	/* 画像と説明 */
	.exampleCon__main{
		display: grid;
		grid-template-columns: 474fr 561fr;
		gap: var(--GAP_50);
		margin-top: -30px;
	}
	/* キーワード */
	.exampleCon__keyword{
		margin-bottom: 20px;
    padding: 15px;
		font-size: clamp(12px, 1.5vw, 16px);
		line-height: 1;
	}
	.exampleCon__keyword__rank{
		font-size: var(--FZ_24);
	}
	.exampleCon__keyword__note{
		font-size: var(--FZ_12);
	}
	.exampleCon__keyword::before{
		width: 22px;
	}

	.exampleCon__sbhd{
		font-size: var(--FZ_20);
	}
	.exampleCon__list li{
		padding: 15px 0;
	}
	.exampleCon__note{
		font-size: var(--FZ_12);
	}

	/* 皿 */
	.example__inner::before{
		width: clamp( 200px, 20vw, 279px);
		right: 0;
		top: 0;
		transform: translateY(-85%);
	}
}
@media screen and (max-width: 767px){
	.g-heading__en--example{
		width: 130px;
	}
	.exampleCon{
		margin-bottom: 30px;
		display: grid;
		gap: 30px;
	}
	.exampleCon__top{
		display: flex;
		align-items: center;
		gap: 15px;
	}
	.exampleCon__top__vari{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80px;
	}
	.exampleCon__top__vari__en{
		font-size: 10px;
	}
	.exampleCon__top__vari__jp{
		font-size: 13px;
	}
	.exampleCon__top__name{
		font-size: 18px;
	}
	.exampleCon__top__name span{
		font-size: 14px;
	}

	/* 画像と説明 */
	.exampleCon__main{
		margin-top: -20px;
	}
	.exampleCon__pic{
		margin-bottom: 15px;
	}
	.exampleCon__sbhd{
		font-size: 18px;
	}
	.exampleCon__list li{
		padding: 10px 0;
	}
	/* キーワード */
	.exampleCon__keyword{
		font-size: 13px;
		margin-bottom: 15px;
    padding: 13px 10px;
		line-height: 1.4;
	}
	.exampleCon__keyword__rank{
		font-size: 18px;
	}
	.exampleCon__keyword__note{
		font-size: 10px;
	}
	.exampleCon__keyword::before{
		width: 22px;
	}

	.exampleCon__note{
		font-size: 11px;
	}

	/* 皿 */
	.example__inner::before{
		width: 130px;
		right: 0;
		top: 0px;
		transform: translateY(-70px);
	}
}

/* アニメーション */
.example__inner::before{
	animation: move6 10s infinite;
}
@keyframes move6 {
	0% {
		top: 0px;
	}
	50% {
		top: -10px;
	}
	100% {
		top: 0px;
	}
}

/* ■■■ 使い方は簡単！ ■■■ */
/* step */
.useStep__num{
	font-family: var(--FF_ROBOTO);
	text-align: center;
}
.useStep__num__rgt{
	font-weight: 300;
	color: var(--BLUE01);
}
.useStep__text{
	position: relative;
	background: var(--GRAY02);
	letter-spacing: 0.35em;
}
.useStep__step li:not(:last-of-type) .useStep__text::before{
	content: "";
	display: inline-block;
	background: url(../images/top/use-arrow.svg) no-repeat center center/100%;
	aspect-ratio: 32/19;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* スライダー */
.useStep__pic{
	position: relative;
  overflow: hidden;
  width: 100%;
	border: 1px solid var(--GRAY01);
}
.useStep__img {
  display: none;
}
.useStep__img.active {
  display: block;
}
/* ドット */
.slider-dots {
  text-align: center;
  margin-top: 10px;
}
.slider-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--GRAY01);
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider-dots .dot.active {
  background-color: var(--BLUE01); 
}

/* point */
.usePoint{
	position: relative;
	background: rgba(7, 125, 213, .07);
}
.usePoint__top{
	font-weight: 500;
}
.usePoint__btm{
	color: var(--DARK03);
}
@media screen and (min-width: 768px){
	.g-heading__en--use{
		width: 107px;
	}

	/* step */
	.useStep{
		display: grid;
		grid-template-columns: 455fr 403fr;
		gap: var(--GAP_50);
		margin-bottom: 80px;
	}
	.useStep__step{
		display: flex;
		justify-content: space-between;
	}
	.useStep__step li{
		width: clamp( 40px, 6vw, 76px);
	}
	.useStep__num{
		margin-bottom: 10px;
	}
	.useStep__num__rgt{
		font-size: var(--FZ_22);
	}
	.useStep__text{
		height: 283px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: var(--FZ_22);
	}
	.useStep__text::before{
		width: 32px;
		left: 120%;
	}

	/* スライダー */
	.useStep__pic{
		height: 350px;
	}
	.useStep__img{
		height: 350px;
	}
	/* ドット */
	.slider-dots .dot{
		width: 10px;
		height: 10px;
	}

	/* point */
	.usePoint{
		padding: 30px var(--GAP_80);
		display: grid;
		grid-template-columns: 450fr 340fr;
		align-items: center;
		gap: 20px;
		border-radius: 200px;
	}
	.usePoint__top{
		font-size: var(--FZ_20);
		margin-bottom: 10px;
	}
	.usePoint__btm{
		font-size: var(--FZ_18);
	}
	.usePoint__pic{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 15px;
	}
	.usePoint__box{
		position: absolute;
		top: -40px;
    left: 10%;
	}
}
@media screen and (max-width: 767px){
	.g-heading__en--use{
		width: 80px;
	}
	/* step */
	.useStep{
		display: grid;
		gap: 30px;
		margin-bottom: 70px;
	}
	.useStep__box{
		order: -1;
	}
	.useStep__step{
		display: flex;
		justify-content: space-between;
		width: 327px;
		margin-inline: auto;
	}
	.useStep__step li{
		width: 50px;
	}
	.useStep__num{
		margin-bottom: 10px;
		line-height: 1.3;
	}
	.useStep__num span{
		display: block;
	}
	.useStep__num__rgt{
		font-size: 20px;
	}
	.useStep__text{
		height: 200px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
	.useStep__text::before{
		width: 25px;
		left: 120%;
	}

	/* スライダー */
	.useStep__pic{
		height: 200px;
	}
	.useStep__img{
		height: 200px;
	}
	/* ドット */
	.slider-dots .dot{
		width: 10px;
		height: 10px;
	}

	/* point */
	.usePoint{
		padding: 35px 18px;
		border-radius: 50px;
	}
	.usePoint__body{
		margin-bottom: 20px;
	}
	.usePoint__top{
		font-size: 16px;
		margin-bottom: 10px;
	}
	.usePoint__btm{
		font-size: 15px;
	}
	.usePoint__pic{
		display: flex;
		justify-content: center;
		gap: 15px;
	}
	.usePoint__pic__img{
		width: 150px;
	}
	.usePoint__box{
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
}


/* ■■■ ご利用料金 ■■■ */
.price{
	background: var(--BEIGE01);
}
.price__inner{
	position: relative;
}
/* 見出し */
.g-heading__price{
	text-align: center;
	font-weight: 500;
}
/* 詳細 */
.priceCon li{
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: var(--WHITE);
	color: var(--BROWN01);
}
.priceCon li span{
	color: var(--BLUE01);
	font-weight: bold;
}
/* 価格 */
.priceDtl li{
	border-bottom: 1px solid var(--GRAY01);
	background: var(--WHITE);
}
.priceDtl li:first-child{
	border-top: 1px solid var(--GRAY01);
}
.priceDtl__price{
	font-weight: 500;
}
.priceNote{
	text-align: center;
}
/* グラス */
.price__inner::before{
	content: "";
	display: inline-block;
	background: url(../images/top/price-glass.png) no-repeat center center/100%;
	aspect-ratio: 104/217;
	position: absolute;
}
@media screen and (min-width: 768px){
	/* 見出し */
	.g-heading__en--price{
		width: 50px;
	}
	.g-heading__price{
		font-size: clamp(30px, 4vw, 50px);
		margin-bottom: 5px;
	}
	/* 詳細 */
	.priceCon{
		margin-bottom: 50px;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: var(--GAP_50);
	}
	.priceCon li{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: clamp(14px, 1.8vw, 20px);
	}
	/* 価格 */
	.priceDtl{
		max-width: 1000px;
		margin-inline: auto;
		margin-bottom: 15px;
	}
	.priceDtl li{
		padding: 30px 0px;
		display: flex;
		justify-content: center;
		gap: clamp( 100px, 15vw, 200px);
	}
	.priceDtl li:nth-of-type(2) .priceDtl__price{
		transform: translateX(-6px);
	}
	.priceDtl__price{
		font-size: var(--FZ_24);
	}
	.priceDtl__price span{
		font-size: var(--FZ_18);
	}
	.priceNote{
		font-size: var(--FZ_14);
		margin-bottom: 50px;
	}
	/* グラス */
	.price__inner::before{
		width: clamp( 60px, 6vw, 86px);
		top: -16%;
		left: 18%;
	}
}
@media screen and (max-width: 767px){
	/* 見出し */
	.g-heading__en--price{
		width: 35px;
	}
	.g-heading__price{
		font-size: 28px;
		margin-bottom: 5px;
	}
	/* 詳細 */
	.priceCon{
		margin-bottom: 30px;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 15px;
	}
	.priceCon li{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 13px;
	}
	/* 価格 */
	.priceDtl{
		margin-bottom: 15px;
	}
	.priceDtl li{
		display: flex;
		justify-content: center;
		gap: 50px;
		padding: 20px 0;
	}
	.priceDtl li:nth-of-type(2) .priceDtl__price{
		transform: translateX(-6px);
	}
	.priceDtl__price{
		font-size: 18px;
	}
	.priceDtl__price span{
		font-size: 15px;
	}
	.priceNote{
		font-size: 12px;
		margin-bottom: 30px;
	}
	/* グラス */
	.price__inner::before{
		width: 50px;
		top: -70px;
		left: 15px;
	}
}

/* アニメーション */
.price__inner::before{
	animation: move7 10s infinite;
}
@keyframes move7 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

/* ■■■ 導入までの流れ ■■■ */
.flow{
	margin-inline: auto;
	width: var(--INNER_WIDTH);
}
.flowCon li{
	position: relative;
}
.flowCon__hd{
	font-weight: bold;
}
.flowCon li:not(:last-child):before{
	content: "";
	display: inline-block;
	background: url(../images/top/flow-arrow.svg) no-repeat center center/100%;
	aspect-ratio: 19/32;
	position: absolute;
}
@media screen and (min-width: 768px){
	.flow{
		max-width: 900px;
	}
	.g-heading__en--flow{
		width: 208px;
	}

	.flowCon{
		display: grid;
		gap: 70px;
		margin-bottom: 50px;
	}
	.flowCon li{
		display: grid;
		grid-template-columns: 150px 1fr;
		align-items: center;
		gap: var(--GAP_50);
	}
	.flowCon__hd{
		font-size: var(--FZ_20);
		margin-bottom: 10px;
	}
	.flowCon__note{
		font-size: var(--FZ_12);
		margin-top: 10px;
	}
	.flowCon li::before{
		width: 19px;
		left: 62px;
		bottom: -50px;
	}
}
@media screen and (max-width: 767px){
	.g-heading__en--flow{
		width: 130px;
	}

	.flowCon{
		display: grid;
		gap: 50px;
		margin-bottom: 30px;
	}
	.flowCon li{
		display: grid;
		grid-template-columns: 90px 1fr;
		align-items: center;
		gap: 20px;
	}
	.flowCon__hd{
		font-size: 18px;
		margin-bottom: 7px;
	}
	.flowCon__note{
		font-size: 10px;
		margin-top: 5px;
	}
	.flowCon li::before{
		width: 16px;
		left: 50%;
		transform: translateX(-50%);
		bottom: -40px;
	}
}


/* ■■■ よくあるご質問 ■■■ */
.faq{
	background: var(--BEIGE01);
}
.faq__wrapper{
	position: relative;
}
/* コンテンツ */
.faq dd{
	display: none;
	color: var(--BROWN01);
}
.faq dt{
	font-weight: bold;
	position: relative;
	cursor: pointer;
	color: var(--BROWN01);
}
.faq__inner{
	border-bottom: 1px solid var(--GRAY01);
}
.faq dl .faq__inner:last-child{
	border: none;
}
.faqBtn{
	display: inline-block;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5px;
	border-radius: 50%;
	background: var(--WHITE);
}
.faqBtn::before,.faqBtn::after{
	content: "";
	display: inline-block;
	background: var(--BLUE01);
	width: 60%;
	height: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
.faqBtn::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq dt.active .faqBtn::after{
	transform: translate(-50%, -50%) rotate(180deg);
}
/* ツボ */
.faq__wrapper::before{
	content: "";
	display: inline-block;
	background: url(../images/top/faq-deco.png) no-repeat center center/100%;
	aspect-ratio: 159/196;
	position: absolute;
}
/* アクティブの時 */
.faq__inner dt.active{
	color: var(--BLUE01);
}
.faq__inner dt.active .faqBtn{
	background: var(--BLUE01);
}
.faq__inner dt.active .faqBtn::before{
	background: var(--WHITE);
}
.faq__inner dt.active .faqBtn::after{
	background: var(--WHITE);
}
@media (hover: hover){
	.faq__inner:hover dt{
		color: var(--BLUE01);
	}
	.faq__inner:hover .faqBtn{
		background: var(--BLUE01);
	}
	.faq__inner:hover .faqBtn::before{
		background: var(--WHITE);
	}
	.faq__inner:hover .faqBtn::after{
		background: var(--WHITE);
	}
}
@media screen and (min-width: 768px){
	/* 見出し */
	.g-heading__en--faq{
		width: 200px;
	}
	/* コンテンツ */
	.faq .g-heading{
		margin-bottom: 40px;
	}
	.faq dl dt{
		font-size: var(--FZ_20);
		padding: 20px 0 20px 10px;
	}
	.faq dl dd{
		padding: 0px 0 20px 10px;
	}
	.faqBtn{
		width: 30px;
	}
	/* ツボ */
	.faq__wrapper::before{
		width: clamp( 100px, 10vw, 140px);
		top: 0;
		right: 0px;
		transform: translate(35%, -25%);
	}
}
@media screen and (max-width: 767px){
	/* 見出し */
	.g-heading__en--faq{
		width: 130px;
	}
	/* コンテンツ */
	.faq .g-heading{
		margin-bottom: 20px;
	}
	.faq dl dt{
		font-size: 15px;
		padding: 20px 0 20px 8px;
	}
	.faq dl dd{
		padding: 0px 0 20px 8px;
	}
	.faqBtn{
		width: 25px;
	}
	/* ツボ */
	.faq__wrapper::before{
		width: 80px;
		top: 0;
		right: 15px;
		transform: translate(35%, -25%);
	}
}

/* アニメーション */
.faq__wrapper::before{
	animation: move8 10s infinite;
}
@keyframes move8 {
	0% {
		top: 0px;
	}
	50% {
		top: -10px;
	}
	100% {
		top: 0px;
	}
}

/* ■■■ 他にもあります ■■■ */
/* 見出し */
.otherHeading{
	text-align: center;
	font-weight: bold;
	color: var(--DARK03);
	overflow: hidden;
}
.otherHeading span{
	display: inline-block;
  transform: translateY(100%);
}
.otherCon__hd{
	font-weight: bold;
}
.otherCon__hd span{
	display: block;
}
.otherCon__hd__top{
	color: var(--BROWN01);
}
/* ボタン */
.g-btn.g-btn--other a{
	background: var(--YELLOW02);
	color: var(--BROWN01);
}
.g-btn--nocord a{
	position: relative;
}
.g-btn--nocord a::before{
	content: "";
	display: inline-block;
	background: url(../images/top/other-deco.png) no-repeat center center/100%;
	aspect-ratio: 99/80;
	position: absolute;
}
@media screen and (min-width: 768px){
	/* 見出し */
	.otherHeading{
		margin-bottom: 75px;
		font-size: var(--FZ_30);
	}

	.otherCon{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: var(--GAP_60);
	}
	.otherCon li{
		display: flex;
		flex-direction: column;
	}
	.otherCon__hd{
		margin-bottom: 10px;
	}
	.otherCon__hd__top{
		font-size: var(--FZ_18);
	}
	.otherCon__hd__btm{
		font-size: var(--FZ_24);
	}
	.otherCon__read{
		font-size: var(--FZ_14);
		margin-bottom: 20px;
	}
	.otherCon__pic{
		margin-top: auto;
		margin-bottom: 50px;
	}
	/* メルマガ写真 */
	.g-btn--nocord a::before{
		width: 98px;
		top: 0px;
		left: 0px;
		transform: translate(20%, -88%);
	}
}
@media screen and (max-width: 767px){
	/* 見出し */
	.otherHeading{
		margin-bottom: 30px;
		font-size: 20px;
	}

	.otherCon{
		display: grid;
		gap: 40px;
	}
	.otherCon li{
		display: grid;
	}
	.otherCon__hd{
		margin-bottom: 10px;
		order: 1;
	}
	.otherCon__hd__top{
		font-size: 15px;
	}
	.otherCon__hd__btm{
		font-size: 18px;
	}
	.otherCon__read{
		order: 3;
		font-size: 13px;
	}
	.otherCon li:nth-of-type(1) .otherCon__read{
		margin-bottom: 60px;
	}
	.otherCon li:nth-of-type(2) .otherCon__read{
		margin-bottom: 30px;
	}
	.otherCon__pic{
		order: 2;
		margin-bottom: 15px;
	}
	.g-btn--other{
		order: 4;
	}
	/* メルマガ写真 */
	.g-btn--nocord a::before{
		width: 70px;
		top: -50px;
		left: 30px;
	}
}


/* ■■■ お問い合わせ ■■■ */
.contact{
	background: var(--BROWN01);
}
.contactHeading{
	width: fit-content;
	margin-inline: auto;
	font-weight: bold;
	color: var(--WHITE);
	position: relative;
	border-bottom: 5px solid;
}
.contactLead{
	text-align: center;
	font-weight: 800;
	color: var(--WHITE);
}
.g-btn.g-btn--contact a{
	background: var(--WHITE);
	color: var(--BROWN01);
}
a.contactSolepro{
	display: block;
	width: fit-content;
	margin-inline: auto;
	color: var(--WHITE);
	font-weight: 500;
	position: relative;
}
.contactSolepro::after{
	content: "";
	display: inline-block;
	background: url(../images/top/contact-arrow.svg) no-repeat center center/100%;
	aspect-ratio: 1/1;
}
@media screen and (min-width: 768px){
	.contact{
		padding: 80px 0;
	}
	.contactHeading{
		font-size: var(--FZ_30);
		margin-bottom: 50px;
		line-height: 2;
	}
	.contactLead{
		font-size: var(--FZ_20);
		margin-bottom: 20px;
	}
	.g-btn--contact{
		margin-bottom: 50px;
	}
	.contactSolepro{
		font-size: var(--FZ_14);
		line-height: 2.2;
	}
	.contactSolepro::before{
		content: "";
		display: inline-block;
		background: var(--WHITE);
		width: 0px;
		height: 1px;
		position: absolute;
		bottom: 0px;
		left: 0;
		transition: 0.5s;
	}
	.contactSolepro::after{
		width: 12px;
		margin-left: 5px;
		transform: translateY(1px);
	}
}
@media (hover: hover){
	.contactSolepro:hover::before{
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	.contact{
		padding: 40px 0;
	}
	.contactHeading{
		font-size: 23px;
    margin-bottom: 30px;
		line-height: 2;
	}
	.contactLead{
		font-size: 16px;
    margin-bottom: 20px;
	}
	.g-btn--contact{
		margin-bottom: 30px;
	}
	.contactSolepro{
		line-height: 2;
		font-size: 12px;
		border-bottom: 1px solid;
	}
	.contactSolepro::after{
		width: 11px;
		margin-left: 5px;
		transform: translateY(1.5px);
	}
}

/* ■■■■■■■■■■■■■■■■■■■■■■footer■■■■■■■■■■■■■■■■■■■■■■ */
.footerareaCopy{
	text-align: center;
	color: var(--BROWN01);
}
@media screen and (min-width: 768px){
	.footerarea{
		padding: 35px 0;
	}
	.footerareaCopy{
		font-size: var(--FZ_14);
	}
}
@media screen and (max-width: 767px){
	.footerarea{
		padding: 20px 0;
	}
	.footerareaCopy{
		font-size: 10px;
	}
}

/* ページトップ */
.pagetop{
	position: fixed;
	z-index: 99;
	background-color: var(--WHITE);
	border-radius: 50%;
}
.pagetop a{
	display: block;
	aspect-ratio: 1/1;
	border-radius: 50%;
	--ICON: url(../images/top/pagetop.svg);
	--MASK: var(--ICON) no-repeat center center / 100%;
	mask: var(--MASK);
	-webkit-mask: var(--MASK);
	background-color: var(--BLUE01);
}
@media screen and (min-width: 768px){
	.pagetop{
		width: 50px;
		bottom: 20px;
		right: 3%;
	}
}
@media screen and (max-width: 767px){
	.pagetop{
		width: 35px;
		bottom: 80px;
		right: 10px;
	}
}