@charset "UTF-8";
/* CSS Document */

::before,
::after{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

ul,
ol{
	list-style: none;
}

a{
	color: var(--txt-purple);
	text-decoration: none;
	margin: 0 ;
}

:root{
	--logo-G: #002D14;
	--light-G: #AAC828;
	--txt-purple: #C355B4;
	--light-beige: #F1F0E5;
	--medium-beige: #E1E0C8;
	--dark-beige: #BEBA86;
}

html {
    scroll-behavior: smooth;
	}

body{
	font-family: "Noto Sans JP", "Reddit Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--logo-G);
	background-color: var(--light-G);
	cursor: auto;
	margin: 0px;
	font-feature-settings: "palt" 1;
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	}

h1,h2,h3,h4,h5{
	margin: 0px;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

h3{
	line-height: 2.1;
}

p{
	margin: 0px;
	font-feature-settings: "palt" 1;
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	font-weight: 500;
}

@media (max-width:650px){
	p{
		font-size:14px;
	}
	
}


button{
	border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

.h1-pc-jp{
	font-size: 35px;
	font-weight: 700;
	position: relative;
	z-index: 2;
}

.h2-pc-jp{
	font-size: 20px;
	font-weight: 700;
	position: relative;
	z-index: 2;
}


@media (max-width:1000px){
	.h1-pc-jp{
		font-size:28px;}		
}


@media (max-width:650px){
	.h1-pc-jp{
		font-size: 25px;
	}		
}


.h1-eng{
	position: relative;
	margin: 0;
	height: 8.214285714285714vw;
	margin-left: 3.571428571428571vw;
	margin-bottom: -1.9285714285714284vw;
	z-index:10;
	
}

@media (min-width:2001px){
	
	.h1-eng{
		margin-bottom:-1.8vw;
	}
}


@media (min-width:1550px) and (max-width:2000px){
	
	.h1-eng{
		margin-bottom:-1.85vw;
	}
}


@media (min-width:1030px) and (max-width:1200px){
	
	.h1-eng{
		margin-bottom:-2vw;
	}
}

@media (min-width:900px) and (max-width:1029px){
	
	.h1-eng{
		margin-bottom:-2.05vw;
	}
}


@media (min-width:800px) and (max-width:899px){
	
	.h1-eng{
		margin-bottom:-2.15vw;
	}
}

@media (min-width:700px) and (max-width:799px){
	
	.h1-eng{
		margin-bottom:-2.2vw;
	}	
}

@media (min-width:651px) and (max-width:699px){
	
	.h1-eng{
		margin-bottom:-2.4vw;
	}	
}



.h2-eng{
	margin: 0;
	height: 4.914285714285714vw;
	min-height: 47px;
}

.case-eng-head{
	width: 100%;
	margin: 0;
	height: 15vw;
	min-height: 47px;
	margin-bottom: 0vw;
	overflow: visible;
}

.case-eng-head-pc{
	display: block;
}

.case-eng-head-sp{
	display: none;
}

.h3-eng{
	height: 4.214285714285714vw;
	margin-bottom: -1vw;
	min-height: 45px;
}

.h1-eng-right{
	position: relative;
	margin: 0;
	height: 8.214285714285714vw;
	margin-right: 3.571428571428571vw;
	margin-bottom: -1.45vw;
	z-index:10;
	float: right;
	
}

@media (min-width:651px) and (max-width:920px){
	
	.h1-eng-right{
		margin-bottom:-1.43vw;
	}
}



@media (max-width:650px){
	
	.h1-eng{
		height: 18vw;
		max-height: 103px;
		min-height: 44px;
		margin-left: 3.2vw;
	}
	
	.h2-eng{
	height: 13vw;
	min-height: inherit;	
	}
	
	.case-eng-head{
	margin: 0;
	height: 25vw;
	min-height: 47px;
	}
	
	.h1-eng-right{
		height: 18vw;
		max-height: 103px;
		min-height: 44px;
		margin-bottom:-3vw;
	}
	
	.case-eng-head-pc{
	display: none}
	
	.case-eng-head-sp{
	display: block;
	margin: 0;
	height: 55vw;
	}
}


@media (min-width:615px) and (max-width:650px){
	.h1-eng{
		margin-bottom:-3.9vw;
	}
}

@media (min-width:500px) and (max-width:614px){
	.h1-eng{
		margin-bottom:-4.2vw;
	}
}

@media (min-width:410px) and (max-width:499px){
	.h1-eng{
		margin-bottom:-4.5vw;
	}
}

@media (min-width:386px) and (max-width:409px){
	.h1-eng{
		margin-bottom:-4.7vw;
	}
}

@media (max-width:385px){
	.h1-eng{
		margin-bottom:-4.8vw;
	}
}

.reddit-sans{
	font-family: "Reddit Sans", sans-serif !important;
	font-weight: 700;
}


.header{
	z-index: 10000;
	position:relative;
}


.header .header-site-menu a {
  color: var(--logo-G);
  transition: color 0.4s ease;
}

/* section2 に差し掛かった時 */
.header .header-site-menu.is-white a {
  color: var(--light-beige) !important;
}

@media (max-width:1023px){
	.header .header-site-menu.is-white a {
  color: var(--logo-G) !important;
	}
}


.header-logo {
  display: block;
  position: fixed;
  top: 27px;
  left: 25px;
  z-index: 10;
  
}

.header-logo svg {
  display: block;
  width: 9.285714285714286vw;
  min-width: 95px;
}



@media (max-width:500px){
	.header-logo {
		left:10px;
		top: 10px;
	}
	
	.header-logo svg {
	  width: 95px;
	  min-width: inherit;
		}
}

.header-inner{
	width: 100%;
	height: 80px;
	display:flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top:0px;
	
}

.site-menu ul{
	display: flex;
	gap: 40px;
	font-size: 16px;
	padding: 0px;
	align-items: center;
}

.site-menu img{
	width: 25px;
	margin: 0 auto;
	margin-top:5px;
}

.ig_g {
    fill: var(--logo-G);
	transition: fill 0.4s ease;
      }
.header-site-menu.is-white .ig_g {
  fill: var(--light-beige);
	}

@media (max-width:1023px){
	.header-site-menu.is-white .ig_g {
  fill: var(--logo-G);
	}
}

.site-menu svg{
	width: 25px;
	margin: 0 auto;
	margin-top:5px;
}

.menu-button{
	display: none;
	padding: 0px;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}


@media (max-width:1023px){
	.header{
		position: fixed;
		top:0;
		left: 0;
		right: 0;	
	}
	
	.header-inner{
		width:inherit;
		height: 80px;
		padding:0px ;
		position:relative;
		display: block;
		
	}	
	
	.header-site-menu{
		position: fixed;         /* ← absolute から fixed に変更 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;           /* 画面の高さ全体 */
		background-color: var(--medium-beige);

		/* 最初は非表示状態 */
		opacity: 0;
		pointer-events: none;/* ← 非表示時にクリック不可にする */
		transition: opacity 0.4s ease; /* フェードイン/アウトのアニメーション */
	}
	
	.header-site-menu.is-show {
  		opacity: 1;
  		pointer-events: auto;       /* ← 表示時はクリック可能に戻す */
	}
	
	
	.site-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.site-menu ul{
		display: flex;
		flex-direction: column;   
		align-items: center;     
		gap: 20px;                
		list-style: none;         
		padding: 0;
		margin: 0;
	}
	
}/*end-media1023*/

@media (max-width:920px){
	.header-inner{
		height: 60px;
	}
}

@media (max-width:500px){
	.header-inner{
		height: 50px;
	}
}


@media (max-width:1023px){
	.menu-button{
	width:34px;
	height:100%;	
	display: block;
	margin-left: calc(100% - 60px);
	border:none;
	position: relative;
	z-index: 1000;
	}
	
	.hamburger span {
	  width: 100%;
	  height: 2px;
	  background-color: var(--logo-G);
	  position: relative;
	  transition: ease .4s,background-color 0.4s ease;
	  display: block;	
}
	
	.hamburger span:nth-child(1) {
  	top: 0;
	}

	.hamburger span:nth-child(2) {
	  margin: 8px 0;
	}

	.hamburger span:nth-child(3) {
	  top: 0;
	}

		/* ハンバーガーメニュークリック後のスタイル */
	.header__nav.active {
	  transform: translateX(0);
	}

	.hamburger.active span:nth-child(1) {
	  top: 6.5px;
	  transform: rotate(45deg);
	}

	.hamburger.active span:nth-child(2) {
	  opacity: 0;

	}

	.hamburger.active span:nth-child(3) {
	  top: -13px;
	  transform: rotate(-45deg);
	} 
	
}/* end-sp-hamburger */


@media (max-width:500px){
	.menu-button{
	margin-left: calc(100% - 60px);
	width:44px;
	}
	
	.hamburger span:nth-child(2) {
	  margin: 10px 0;
	}

	.hamburger.active span:nth-child(1) {
	  width:40px;
      top: 20px;
	  transform: rotate(45deg);
	}

	.hamburger.active span:nth-child(2) {
	  opacity: 0;

	}

	.hamburger.active span:nth-child(3) {
      width:40px;
	  top: -4px;
	  transform: rotate(-45deg);
	}
	
}

.head-amazon{
	position: fixed;
	display:flex;
	gap:10px;
	padding: 5px 2.2vw;
	color: var(--light-beige);
	background-color: var(--logo-G);
	border-radius: 5px 0px 0px 5px;
	width:auto;
	height: auto;
	align-items: center;
	justify-content: center;
	right: 0px;
	top: 12.205px;
	z-index: 1000;
	
	transition: background-color 0.4s ease, color 0.4s ease;
}


.head-amazon p {
  transition: color 0.4s ease;
}

.basket{
	margin-bottom:2px;
}

.bas, .ket {
  transition: fill 0.4s ease;
}

 .bas {
		fill: #f1f0e5;
}

.ket {
	fill: var(--logo-G);
}

/* ======= section-2 / footer上にある時の状態 ======= */
.head-amazon.in-section {
  background-color: var(--light-beige);
}

.head-amazon.in-section p {
  color: var(--logo-G);
}

.head-amazon.in-section .bas {
  fill: var(--logo-G);
}

.head-amazon.in-section .ket {
  fill: var(--light-beige);
}

@media (max-width:1023px){
	.head-amazon{
		bottom: 0px;
		right:auto;
		left:0px;
		top:auto;
		height:30px;
		width:100vw;
		padding:8px 0px;
		border-radius: 0px;
	}
}


.head-amazon-inner{
	display:flex;
	align-items:center;
	font-weight: 700;
	gap: 2px;
	margin-top:2px;
}


#h-amazon{
	font-size: clamp(24px,1.5714285714285716vw,24px);
	letter-spacing: 0.04em
}


#dekau{
	margin-top:-3.65px;
	margin-left: 2px;
	}

#dekau p{
	font-size: 22.5px;
	font-weight: 700;
	}

@media (max-width:650px){
	#dekau{
	margin-top:-3.5px;
	}
}


.head-amazon svg{
	width:28px;
}


@media (max-width:1023px){
	.head-amazon{
		height:50px;}
	
	.head-amazon svg{
	width:30px;
}
}


@media (max-width:650px){
	
	.head-amazon{
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.6s ease;
	}

	/* ▼ フェードイン時 */
	.head-amazon.visible {
	  opacity: 1;
	  pointer-events: auto;
	}
	
}


.head-amazon.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ▼ フェードイン時 */
.head-amazon.visible {
  opacity: 1;
  pointer-events: auto;
}



.body-wrap-KV{
	width: calc(100% - 50.5px);
	margin: 0 auto;
}

@media (max-width:650px){
	
	.body-wrap-KV{
		width: calc(100% - 20.5px);
	}
}


.KV{
	position:fixed;
	top:0;
	left: 50%;                     /* ビューポート中央を基準 */
    transform: translateX(-50%);　　/* 幅の半分だけ左にずらして中央揃え */
    margin:0 auto;            /* 中央寄せ */
    z-index: 0;                /* 背景扱い */
	}

	#KV-PC{
		display: block;
	}
	
	#KV-SP{
		display: none;
	}


.KV-inner{
	margin: 0px;
	margin-top: 80px;
	height:54.85714285714286vw;
	width: 100%;
	overflow: clip;
	border-radius: 80px 80px 0px 0px;
	position: relative;
	transition: opacity 0.8s ease, transform 0.8s ease;
	opacity: 1;
	transform: translateY(0);
	will-change: opacity, transform;
}

@media (max-width:920px){
	.KV-inner{
	height:65vw;
	margin-top: 60px;
	}
}


@media (min-width:651px) and (max-width:1000px){
	.KV-inner{
	border-radius:55px 55px 0px 0px;
	}
}


@media (max-width:650px){
	.KV-inner{
	border-radius:40px 40px 0px 0px;
	}
}

@media (max-width:500px){
	.KV-inner{
	height:165.33333333333334vw;
	margin-top: 50px;
	}
	
	#KV-PC{
		display: none;
	}
	
	#KV-SP{
		display: block;
	}
}


.KV-inner.kv-hidden {
  opacity: 0;
  pointer-events: none;         /* 非表示中クリック無効 */
}


.KV-inner img{
	position: absolute;
	top: 28%;
	left: 50%;
	width: 105%;
	height: auto;
	transform: translate(-49.5%, -40%); /* 中央基準 */
	will-change: transform;
}

@media (max-width:920px){
	.KV-inner img{
	transform: translate(-50%, -48%); /* 中央基準 */
	top: 32%;	
	}
}

@media (max-width:500px){
	.KV-inner img{
	transform: translate(-50%, -50%); /* 中央基準 */
	width: 117%;
	top: 40%;	
	}
}

.section-1 {
  position: relative;
  z-index: 2;               /* KVの上に重なる */
  margin-top: 45vw; /* KVの高さ分下からスタート */
  padding: 100px 0 0 0;
}


@media (max-width:900px){
	.section-1 {
		margin-top: 42%;
	}
}



@media (max-width:500px){
	.section-1 {
		margin-top: 125vw;
	}
}


.body-wrap{
	width: calc(100% - 50px);
	margin: 0 auto;
}


.body-wrap-1{
	background-color: var(--medium-beige);
	border-radius:80px;
	position: relative;
	z-index: 1;
}

@media (min-width:651px) and (max-width:1000px){
	.body-wrap-1{
	border-radius:55px;
	}
}

@media (max-width:650px){
	
	.body-wrap-1{
		border-radius:40px;
		}
	
	.body-wrap{
		width: calc(100% - 20px);
	}
}


.scroll-moss{
	position: absolute;
	width:130px;
	margin:0 auto;
	top:-65px;
	left: calc(50% - 65px);
}


@media (max-width:650px){
	.scroll-moss{
	width:115px;
	top:-55px;
	left: calc(50% - 57.5px);	
	}
}


#moss_ico1{
	width: 12px;
	margin: 0 auto;
}

.message{
	padding: 15% 0% 0% 0%;
	display: flex;
	text-align: center;
	justify-content: center;
	flex-flow: column;
	gap: 6.428571428571428vw;
}

#about{
	height:150px;
}

@media (max-width:500px){
	.message{
		padding: 26vw 0 0 0;
		gap:20vw;
	}
	#about{
	height:22vw;
	margin-top:-2vw;
	}
}


h1{
	font-size: 65px;
}

@media (min-width:1401px){
	
	h1{
	font-size: 4.642857142857143vw;
}
}

@media (max-width:1023px){
	h1{
		font-size: 6vw;}
}

@media (max-width:650px){
	h1{
		font-size: 12vw;}
}


.h1 p{
	font-size: 16px;
	color: var(--dark-beige);
	
}

.me-h1-pc{
	display: block;
}

.me-h1-sp{
	display: none;
}

@media (max-width:650px){
	.me-h1-pc{
		display: none;
	}
	
	.me-h1-sp{
		display: block;
		line-height: 1.4em;
		margin-bottom: 10px;
	}
}


.concept{
	position: relative;
	z-index: 0;
    top: 0;
    left: 0;
}


.concept-h1{
	margin-top: 7.142857142857142vw;
}


@keyframes showTextFromBottom{
      0%{
         transform: translateY( 100% );
      
      }
      100%{
          transform: translateY( 0px );
      }
    }
    .txtanimation-from-bottom span{
     animation: showText 3s backwards;
     display: inline-block;
    }
    .txtanimation-from-bottom > span{
      overflow: hidden;
    }
    .txtanimation-from-bottom > span > span{
      animation: showTextFromBottom 0.5s backwards;
    }



.concept-img1{
	z-index: 1;
	position: relative;
	margin: 0;
   	width: 63vw;
    height: 35vw;	
	overflow: clip;
}

.concept-img1 img {
	position: absolute;
    width: 145%;
    height: auto;
    display: block;
	top: 33%;
  	left: 56%;
  	transform: translate(-50%, -50%);
 	 will-change: transform;
}

.concept-img2{
	z-index: 0;
	position: absolute;
    top: 0;
	right: 0;
	margin: 0;
   	width: 40.42857142857143vw;
    height: 29.214285714285715vw;	
	overflow: hidden;
}

.concept-img2 img {
   	height: 120%;
    display: block;
	position: absolute;
  	top: 55%;
  	left: 60%;
	will-change: transform;
}


@media (max-width:650px){
	
	.concept{
		padding-bottom: 26.666666666666668vw;
	}
	
	.concept-img1{
	width: 76vw;
    height: 76vw;	
}
	
	.concept-img1 img{
		width:auto;
		height:145%;
		left: 50%;
	}
	
	
	.concept-img2{
	z-index: 11;
	top: 70%;
   	width: 60vw;
    height: 43.2vw;	
	}
	
	.concept-img2 img {
   	height: 120%;
   	top: 45%;
  	left: 60%;
	}
}


.concept-under{
	padding-top: 10.714285714285714vw;
	padding-bottom: 14.285714285714285vw;
	position: relative;
}

@media (max-width:650px){
	.concept-under{
	padding-bottom: 100px;
	}		
}


.contents-1{
	margin: 0 auto;
	width: calc(100% - 17.857142857142858vw);
}

@media (max-width:850px){
	.contents-1{
		width: calc(100% - 8vw);
	}
}

@media (max-width:650px){
	.contents-1{
		width: calc(100% - 10.666666666666668vw);
	}
}

.concept-txt{
	display: flex;
	justify-content:flex-start;
	gap: 11.428571428571429vw;
	position: relative;/* z-indexを効かせるために必要 */
	z-index: 2; 
}

@media (min-width:651px) and (max-width:1024px){
	.concept-txt{
		gap:7.5vw;
		
	}	
}


@media (max-width:650px){
	.concept-txt{
		flex-direction: column;
		gap:40px;
	}
}

.moss-lg-icon {
	position: absolute;
	width: 4.285714285714286vw;
	max-width: 4.285714285714286vw;
	min-width: 30px;
	height: auto;
	left: 7%;
	top: 10.714285714285714vw;
	z-index: 1; 	
}

@media (max-width:850px){
	.moss-lg-icon {
		left: 2%;
	}
}

.concept-txt h2{
	font-size: 4.285714285714286vw;
	white-space: nowrap;
}

.concept-txt h3{
	font-size: clamp(17px,1.4285714285714286vw,30px);
	font-weight: 500;
}


@media (min-width:651px) and (max-width:775px){
	.concept-txt h3{
		font-size:16px;}
}


@media (max-width:650px){
	.concept-txt h2{
		font-size: clamp(10px,9.333333333333334vw,45px);}
	
	.concept-txt h3{
		font-size:clamp(17px,4.533333333333333vw,23px);}
}




@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity-wrap {
  display: flex;
  overflow: hidden;
  gap: 30.120481927710845vw;
}
.scroll-infinity-list {
  display: flex;
  list-style: none;
  gap: 30.120481927710845vw;
  padding: 0
}
.scroll-infinity-list-left {
  animation: infinity-scroll-left 70s infinite linear 0.5s both;
}
.scroll-infinity-item {
  width: calc(100vw / 6);
}
.scroll-infinity-item>img {
  width: 40.714285714285715vw;
}

@media (max-width:650px){

	.scroll-infinity-wrap {
		gap: 60vw;
	}
	
	.scroll-infinity-list {
		gap: 60vw;
	}
	
	
	.scroll-infinity-item>img {
  	width: 66.666666vw;
	}

	.scroll-infinity-list-left {
	  animation: infinity-scroll-left 40s infinite linear 0.5s both;
	}
}






.feature{
	padding-top: 10.714285714285714vw;	
}


@media (max-width:650px){
	.feature{
	padding-top: 100px;	
	}	
}

.feature-inner{
	display: flex;
	gap: 7vw;
	align-items: center;
}

.feature-img-inner{
	margin: 0;
   	width: 48.214285714285715vw;
    height: 22.857142857142858vw;	
	overflow: clip;
	position: relative; /* 子のabsoluteに対応 視差用*/
}

@media (max-width:1190px){
	.feature-img-inner{
		height:30vw;
	}
	
	.feature-inner{
	align-items: flex-start;
}
	
}


.feature-img-inner img{
	position: absolute;
	width: 108%;
	height: auto;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%); /* 中央基準で配置 */
  	will-change: transform; /* スクロールパフォーマンス改善 */
}


.feature-txt{
	position:relative;
	display: flex;
	flex-direction: column;
	width: 32vw;
	max-width: 600px;
	gap: 1.3vw;
}


.feature-txt h2{
	z-index: 3;
	position: relative;
}

#feature-p{
	font-size: 17px;
}

@media (max-width:920px){
	.feature-inner{
		gap:4.8vw;
	}
	
	.feature-txt{
		width: 42vw;
	}
	
	.feature-img-inner{
		width:43vw;
	}
}

@media (max-width:650px){
	.feature-img-inner{
		width:89.33333333333333vw;
		height:43.2vw;
	}
	
	.feature-inner{
	flex-direction: column;
	align-items: flex-start;
	gap:25px;
}
	
	.feature-txt{
		width: 84vw;
		max-width: 1000px;
		margin-right: 20px;
		margin-left: 20px;
		gap:10px;
	}	
	
	#feature-p{
	font-size: 15px;
	}
}

.feature-h1-nonbr{
	display: block;
}

.feature-h1-br{
	display: none;
}

@media (min-width:651px) and (max-width:1399px){
	.feature-h1-nonbr{
	display: none;
}

.feature-h1-br{
	display: block;
}
}



.moss-lg-icon-small {
	position: absolute;
	width: 30px;
	height: auto;
	left: -15px;
	top: 0px;
	z-index: 0; 
	
}

.feature-icon {
	margin:  0 auto;
	text-align: center;
	}

#feature-icon-pc{
	display: block;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 78.71428571428571vw;
	height: 9.142857142857142vw;
	max-width:1300px;
	max-height: auto;
	margin:0 auto;
	padding: 7.142857142857142vw 0px 10.714285714285714vw 0px;
}

.feature-icon-inner{
	width: 20%;
	display: flex;
	text-align: left;
	justify-content: center;
	align-items: center;
	gap: 9%;
	white-space: nowrap;
}

@media (max-width:1100px){
	#feature-icon-pc{
	width: 85vw;
	}
	
	.feature-icon-inner p{
		font-size: 12px;
	}
	
	#suisei-icon{
		width:25%;
	}
	#kokusan-icon{
		width:40%;
	}
	#tokkyo-icon{
		width:30%;
	}
}



#feature-icon-pc hr{
	width: 2px;
	height: 9.142857142857142vw;
	border:none;
	background-color: var(--logo-G);
	margin: 0px;	
}

@media (max-width:1100px){
	#feature-icon-pc hr{
	width: 0.18181818181818182vw;	
	}
}


#tokkyo{
	margin-top:-10px;
}

#feature-icon-sp{
	display: none;
}

@media (max-width:650px){
	#feature-icon-pc{
	display:none;
}

#feature-icon-sp{
	display: block;
	width:84vw;
	max-width:400px;
	height:auto;
	margin:0 auto;
}
}


.body-wrap-2{
	position: relative;
	padding: 100px 0px;
	background-color: var(--light-beige);
	top:-100px;
}

.info{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 0px;
}

.info-inner-txt{
	display: flex;
	gap:0.3571428571428571vw;
	margin-left:3.571428571428571vw;
}

.info-inner-txt img{
	width:12px;
}


.info-inner-ig{
	display: flex;
	align-items: center;
	gap:1.7857142857142856vw;
	margin-left:3vw;
}

.info-inner-ig img{
	width:3.571428571428571vw;
}

.info-inner-ico{
	margin: 0 auto;
	text-align: center;
}

#info-inner-txt-pc{
		display: block;
	}
	
	#info-inner-txt-sp{
		display: none;
	}


@media (max-width:1000px){
	.info{
		flex-direction: column;
		align-items: flex-start;
		margin: 0 auto;
		width:fit-content;
		gap:10px;
		}
	
	.info-inner-txt{
		margin-left: 0px;
		margin-top: 10px;
		align-items: flex-start;
		gap:10px;
		}
	
	.info-inner-txt img{
		margin-top: 6.5px;
		}
	
	.info-inner-ig{
		margin:0;
		justify-content: space-between;
		gap:10px;
		}
	
	.info-inner-ig img{
	width:8vw;
	max-width:45px;
	margin-top: 5px;	
		}
}

@media (max-width:650px){
	.info{
		padding:16vw 0px;
		}
}

@media (max-width:500px){
	#info-inner-txt-pc{
		display: none;
	}
	
	#info-inner-txt-sp{
		display: block;
	}
	
}



.info-inner-arrow {
  position: relative;
  display: inline-block;
  width: 20.285714285714285vw;
  height: 2px;
  margin: 11.3px 0;
  background-color: var(--logo-G);
}

@media (max-width:1000px){
	.info-inner-arrow {
		width: 350px;
	}
}

@media (max-width:500px){
	.info-inner-arrow {
		width: 70vw;
	}
}


.info-inner-arrow::before,
.info-inner-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 16px;
  height: 2px;
  background-color: var(--logo-G);
  transform-origin: calc(100% - 1px) 50%;
}

.info-inner-arrow::before {
  transform: rotate(47.5deg);
}

.info-inner-arrow::after {
  transform: rotate(-47.5deg);
}




.product{
	margin-top:-200px;
}

.product-h1{
	padding-top:10.714285714285714vw;
	margin-bottom: -1.78vw;
	
}

@media (min-width:900px) and (max-width:1100px){
	
	.product-h1{
		margin-bottom:-1.85vw;
	}
}

@media (min-width:750px) and (max-width:899px){
	
	.product-h1{
		margin-bottom:-1.9vw;
	}
}

@media (min-width:651px) and (max-width:749px){
	
	.product-h1{
		margin-bottom:-1.95vw;
	}
}

@media (min-width:625px) and (max-width:650px){
	
	.product-h1{
		margin-bottom:-3.85vw;
	}
}

@media (min-width:600px) and (max-width:624px){
	
	.product-h1{
		margin-bottom:-4vw;
	}
}

@media (min-width:550px) and (max-width:599px){
	
	.product-h1{
		margin-bottom:-4.2vw;
	}
}

@media (min-width:470px) and (max-width:549px){
	
	.product-h1{
		margin-bottom:-4.3vw;
	}
}

@media (min-width:375px) and (max-width:469px){
	.product-h1{
		margin-bottom:-4.65vw;
	}
}

@media (max-width:374px){
	.product-h1{
		margin-bottom:-4.75vw;
	}
}


@media (max-width:650px){
	.product-h1{
		padding-top:16vw;
	}
}


.product-sticky {
  position: relative;
  height: 600vh; /* 固定の長さをここで調整 */
}

.product-wrapper {
  position: sticky;
  top: -50px;/* 固定開始位置をここで調整 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width:650px){
	
	.product-sticky {
 	height: 350vh;
	}
	
	.product-wrapper {
		top: 80px;
		}	
}


.product-container {
  position: relative;
  top:3px;
  width: 67.28571428571428vw;
  max-width:1300px;
  margin: 0 auto;
  /* 高さ維持を aspect-ratio で管理 */
  aspect-ratio: 3 / 2; /* 画像の比率 3:2 */
	overflow: hidden; /* ここで枠の外を隠す */
}

@media (max-width:650px){
	.product-container{
		width:84vw;
		top:5px;
	}
}


.product-img {
  position: absolute;
  top: 0;
  left: 0;	
  width: 100%;
  height: 100%; /* aspect-ratio にフィットさせる */
  object-fit: contain;
}

.product-img.img1 {
  transform: translateY(0);
  z-index: 1;
}

.product-img.img2 {
  transform: translateY(100%); /* 下に隠れている */
  z-index: 2; /* img1 の上に重なる */
}

.product-img.img3 {
  transform: translateY(100%); 
  z-index: 3; 
}

.product-img.img4 {
  transform: translateY(100%); 
  z-index: 4;
}


.product-spec,.product-spec-txt,.product-spec-btn,.product-spec-btn-2{
	display: flex;
}

.product-spec{
	padding-top:50px;
	width: 67.28571428571428vw;
	max-width: 1300px;
	align-items: center;
	margin: 0 auto;	
	justify-content: space-between;
	padding-bottom: 100px
}

@media (max-width:950px){
	.product-spec{
		flex-direction: column;
		gap:60px;
	}
}

@media (max-width:650px){
	.product-spec{
		width:84vw;
	}
}


.product-spec-txt{
	gap:3.571428571428571vw;
	flex-direction: column;
}

@media (max-width:650px){
	.product-spec-txt{
		gap:8vw;
		align-self:flex-start;
	}
}


.amazon-product{
	position: relative;
	display: flex;
	width: 195px;
}

#moss-amazon{
	width: 195px;
}


.product-spec-btn{
	position:absolute;
	flex-direction: column;
	align-items: center;
	color: var(--light-beige);
	justify-content: center;
	margin: 0 auto;
	top:25%;
	left:40.195px;
	
}

.product-spec-btn-2{
	position:absolute;
	flex-direction: column;
	align-items: center;
	color: var(--light-beige);
	justify-content: center;
	margin: 0 auto;
	top:29%;
	left:47.195px;
	
}

.product-flex{
	display: flex;
	flex-direction: column;
	gap:8px;
}

.product-flex-inner{
	display: flex;
	gap:3.571428571428571vw;
}

@media (max-width:1200px){
	.product-flex-inner{
		flex-direction: column;
	}
	
}

.product-index{
	background-color: var(--light-beige);
	padding:2px 10px;	
	width:fit-content;
	border-radius: 5px;
	font-size: 18px;
	text-align: center;
}

@media (max-width:650px){
	.product-index{
		padding:0px 10px;
		width:90px;
		height:32px;
		align-content: center;
	}
}

.color-flex{
	display: flex;
	gap:50px;
	margin-top: 10px;
}

.color-flex-inner{
	display: flex;
	align-items: center;
	gap:10px;
}

@media (max-width:650px){
	.color-flex{
	display: flex;
	gap:35px;
	margin-top: 0px;
	}

	.color-flex-inner{
		flex-direction: column;
		align-items: center;
		gap:5px;
	}		
}


.color-flex-inner img{
	max-width:80px;
	width:5.714285714285714vw;
	min-width: 68px;
	margin-top: 5px;
}


.p-index-jp{
	font-size:16px;
	font-weight: 700;
}

.product-p{
	font-size: 18px;
	font-weight: 700;
}

@media (max-width:650px){
	.product-p{
		font-size:15px;
	}
}


#product-basket{
	width:42px;
	margin-bottom: 5px;
}

#product-amazon{
	font-size:28px;
	line-height: 28px;
	letter-spacing: 0.035em;
}

.product-amazon{
	font-size:24px;
	line-height: 28px;
	letter-spacing: 0.035em;
}







.case-study{
	margin-top: -100px;
	position: relative;
}

.case-study-inner{
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	width:86.5vw;
	margin: 0 auto;
	margin-top:-23vw;
	z-index: 10;
}

.case-study-inner-flex-pc{
	display: flex;
	flex-direction: column;
	margin-bottom: 30vw;
}

.case-flex-margin-bottom{
	margin-bottom: 1%;
}

.case-study-inner-flex-sp{
	display:none;
}

.case-study-inner-gap{
	margin-bottom: 1%;
}


@media (max-width:650px){
	.case-study-inner-flex-pc{
		display: none;
	}
	
	.case-study-inner-flex-sp{
	display: flex;
	flex-direction: column;
	grid-row-gap: 22vw;
	margin-bottom: 38vw;
	}
}


.case-trim{
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
	
}

.case-trim img {
  width: 100%;
  height: auto;
  position: absolute;
  object-fit: cover;   /* トリミングしたい場合は cover */
  display: block;
}

#case-1,#case-1-sp{
	width: 160%;
	position: absolute;
	top: 60%;
	left:52%;
	transform: translate(-50%,-50%)
}

#case-2,#case-2-sp{
	width: 120%;
	position: absolute;
	top: 48%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-3,#case-3-sp{
	width: 118%;
	position: absolute;
	top: 45%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-4,#case-4-sp{
	width: 120%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-5,#case-5-sp{
	width: 120%;
	position: absolute;
	top: 45%;
	left:53%;
	transform: translate(-50%,-50%)
}

#case-6,#case-6-sp{
	width: 110%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-7,#case-7-sp{
	width: 102%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-8,#case-8-sp{
	width: 108%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-9,#case-9-sp{
	width: 125%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-10,#case-10-sp{
	width: 120%;
	position: absolute;
	top: 52%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-11,#case-11-sp{
	width: 120%;
	position: absolute;
	top: 46%;
	left:46%;
	transform: translate(-50%,-50%)
}

#case-12,#case-12-sp{
	width: 120%;
	position: absolute;
	top: 50%;
	left:48%;
	transform: translate(-50%,-50%)
}

#case-13,#case-13-sp{
	width: 120%;
	position: absolute;
	top: 50%;
	left:48%;
	transform: translate(-50%,-50%)
}

#case-14,#case-14-sp{
	width: 108%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-15,#case-15-sp{
	width: 100%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-16,#case-16-sp{
	width: 110%;
	position: absolute;
	top: 44%;
	right:0%;
	transform: translateY(-50%)
}

#case-17,#case-17-sp{
	width: 105%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-18,#case-18-sp{
	width: 127%;
	position: absolute;
	top: 45%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-19,#case-19-sp{
	width: 128%;
	position: absolute;
	top: 48%;
	left:48%;
	transform: translate(-50%,-50%)
}

#case-20,#case-20-sp{
	width: 130%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}
#case-21,#case-21-sp{
	width: 113%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-22,#case-22-sp{
	width: 124%;
	position: absolute;
	top: 42%;
	left:47%;
	transform: translate(-50%,-50%)
}

#case-23,#case-23-sp{
	width: 113%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-24,#case-24-sp{
	width: 120%;
	position: absolute;
	top: 47%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-25,#case-25-sp{
	width: 150%;
	position: absolute;
	top: 45%;
	left:53%;
	transform: translate(-50%,-50%)
}

#case-26,#case-26-sp{
	width: 125%;
	position: absolute;
	top: 43%;
	left:45%;
	transform: translate(-50%,-50%)
}

#case-27,#case-27-sp{
	width: 100%;
	position: absolute;
	top: 32%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-28,#case-28-sp{
	width: 155%;
	position: absolute;
	top: 46%;
	left:42%;
	transform: translate(-50%,-50%)
}

#case-29,#case-29-sp{
	width: 132%;
	position: absolute;
	top: 46%;
	left:51%;
	transform: translate(-50%,-50%)
}

#case-30,#case-30-sp{
	width: 115%;
	position: absolute;
	top: 56%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-31,#case-31-sp{
	width: 145%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}

#case-32,#case-32-sp{
	width: 120%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%)
}








.case-study-inner-flex-big1{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1%;
	height: calc(100% - 5px);
	margin-bottom: 1%;
}

.case-study-inner-flex-small3{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:1%;
}

.case-study-inner-flex3-bottom{
	display: grid;
	grid-template-columns: 1.02fr 0.5fr 0.5fr;
	gap:1%;
	align-items: end;
}

.case-study-inner-flex3-top{
	display: grid;
	grid-template-columns: 1.02fr 0.5fr 0.5fr;
	gap:1%;
	align-items: flex-start;
}

.case-study-inner-flex2-top{
	display: grid;
	grid-template-columns: 0.5fr 1.02fr 0.5fr;
	gap:1%;
	align-items: flex-start;
}

.case-study-inner-flex2-bottom{
	display: grid;
	grid-template-columns:  0.5fr 0.5fr 1.02fr;
	gap:1%;
	align-items: end;
}



@media (max-width:650px){
	.case-study-inner-flex-big1{
	display:inherit;
	margin-bottom: 2%;
}

.case-study-inner-flex-small3{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 5%;
	grid-column-gap: 2%;
}

.case-study-inner-flex3-bottom{
	display: grid;
	grid-template-columns: 1fr 1fr;
	  grid-template-rows: auto auto;
	  grid-template-areas:
		"wide wide"
		"left right";
	  gap: 2%;
	align-items: start; /* 高さ計算を安定させる */
}

.case-study-inner-flex3-bottom > :nth-child(1) {
  grid-area: wide;
}

.case-study-inner-flex3-bottom > :nth-child(2) {
  grid-area: left;
}

.case-study-inner-flex3-bottom > :nth-child(3) {
  grid-area: right;
}

.case-study-inner-flex3-top{
	display: grid;
	grid-template-columns: 0.5fr 0.5fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left right"
    "wide wide";
  gap: 2%;
  align-items: flex-start;
}

.case-study-inner-flex3-top > :nth-child(1) {
  grid-area: left;
}

.case-study-inner-flex3-top > :nth-child(2) {
  grid-area: right;
}

.case-study-inner-flex3-top > :nth-child(3) {
  grid-area: wide;
}

.case-study-inner-flex2-top{
	display: grid;
	grid-template-columns: 0.5fr 1.02fr 0.5fr;
	gap:2%;
	align-items: flex-start;
}

.case-study-inner-flex2-bottom{
	display: grid;
	grid-template-columns:  0.5fr 0.5fr 1.02fr;
	gap:2%;
	align-items: end;
}
	
	.case-study-inner-flex3-column {
	  display: grid;
	  grid-template-columns: repeat(2, 0.5fr);
	  gap: 1.3%;
	}

	
	.case-study-inner-flex3-column > :nth-child(1) {
	  grid-column: 1 / span 2;
	}


	.case-study-inner-flex3-column > :nth-child(4) {
	  grid-column: 1 / span 2;
	}
	
}/* 事例max650-end */


.case-study-inner-flex-big1 img,.case-study-inner-flex-small3 img,.case-study-inner-flex3-bottom img,.case-study-inner-flex3-top img,.case-study-inner-flex2-top img,.case-study-inner-flex2-bottom img,.case-study-inner-flex3-column img{
	width: 100%;
	display: block;
}


.index-position{
	position: relative;
	width: auto;
	height: auto;
}


.inner-big-index-right{
	width:14.736428571428572vw;
	position: absolute;
	bottom:0px;
	right:-32%;
}

.inner-big-index-left{
	width:14.736428571428572vw;
	position: absolute;
	bottom:0px;
	left:-32%;
}

.inner-big-index-left-top{
	width:14.736428571428572vw;
	position: absolute;
	top:-40%;
	left:0;
}

.inner-small-index-left-bottom{
	width: 12vw;
	position: absolute;
	bottom:-65%;
	left:0;
}

.inner-small-index-left-top{
	width: 12vw;
	position: absolute;
	top: 0;
	left:-25%;
}

.inner-small-index-left-center{
	width: 12vw;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:-50%;
}

@media (max-width:650px){
	.case-margin-top{
		margin-top:35vw;
	}
	
	.case-margin{
		margin-top:13.333333333333334vw;
	}
	
	.inner-big-index-left-top,.inner-big-index-right-top{
		width:33vw;
		top:-48%;
	}
	
	.inner-big-index-right-top{
	position: absolute;
	right:0;
	}
	
	.inner-small-index-left-top1,.inner-small-index-left-top2,
	.inner-small-index-right-top1,.inner-small-index-right-top2{
		width: 33vw;
		position: absolute;
		top: -44%;
	}
	
	.inner-small-index-left-top2{
		margin-left:40%;
	}
	
	.inner-small-index-right-top1,.inner-small-index-right-top2{
		right: 0;
	}
	
	.inner-small-index-right-top2{
		margin-right:40%;
	}
	
}



.inner-index-line,.inner-index-2line{
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	right: 0.2%;
	left: 0%;
	font-size: 18px;
	font-weight: 700;
}

.inner-index-2line{
	line-height: 27px;
}

@media (min-width:651px) and (max-width:1000px){
	.inner-index-line,.inner-index-2line{
	font-size:16px;
	}
	
	.inner-index-2line{
	line-height: 24px;
	}
}


@media (max-width:650px){
	.inner-index-line,.inner-index-2line{
	position: absolute;
	text-align: center;
	right: 0;
	left: 0;
	font-size: 14px;
	font-weight: 700;
	}
	
	.inner-index-line{
	top: 50%;
	transform: translateY(-50%);
	}
	
	.inner-index-2line{
	line-height: 21px;
	top: 50%;
	transform: translateY(-50%);
	}
	
	
}

.z-index-5{
	position: relative;
}











	
.moss-pattern img{
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.moss-pattern-pc{
	display: block;
}

.moss-pattern-sp{
	display: none;
}


@media (max-width:650px){
	.moss-pattern-pc{
	display: none;
	}

	.moss-pattern-sp{
	display: block;
	}	
}


.moss-pattern-bottom{
	margin-top:-50vw;
}

@media (max-width:650px){
	
	.FYWTUK{
		margin-top:30vw;
	}
	
	.moss-pattern-bottom{
	margin-top:-100vw;
	}
}

.moss-pattern-left {
	position:absolute;
	top:23%;
	width:100%;
}

.moss-pattern-left-2 {
	position:absolute;
	top:13%;
	width:100%;
}

.moss-pattern-right{
	position:absolute;
	top:10%;
	width:100%;
}


.moss-pattern-sp-1{
	position:absolute;
	top:8%;
	width:100%;
}


.moss-pattern-right-2{
	position:absolute;
	top:30%;
	width:100%;
}


.moss-pattern-sp-2{
	position:absolute;
	top:22%;
	width:100%;
}

.moss-pattern-sp-3{
	position:absolute;
	top:28%;
	width:100%;
}

.moss-pattern-sp-4{
	position:absolute;
	top:40%;
	width:100%;
}

.moss-pattern-sp-5{
	position:absolute;
	top:60%;
	width:100%;
}









.story-section{
	position: relative;
	z-index: 1;
	background-color: var(--logo-G);
	height:200px;
	margin-top: -200px;
}

.section-2{
	background-color: var(--logo-G);
	position: relative;
	z-index: 1;
}

.story-tab{
	padding:130px 8.928571428571429vw 200px 8.928571428571429vw;
}

@media (max-width:650px){
	.story-tab{
	padding:80px 8.928571428571429vw 200px 8.928571428571429vw;
	}
}


.story-tab-pc{
	display: block;
	display: flex;
	align-items: center;
	gap:3%;
}

.story-tab-pc-h1{
	font-size: clamp(18px, 2.5vw, 35px);
}

.story-tab-sp{
	display: none;
}

.story-tab-sp-inner{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.moss_ico2{
	position: absolute;
	width:12px;
	bottom:-138px;
}


@media (min-width:651px) and (max-width:900px){
	.moss_ico2{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	}
}


@media (max-width:650px){
	.moss_ico2{
	position: absolute;
	width:11px;
	bottom:-145px;
	left: 50%;
	transform: translateX(-50%);
	}
}

@media (max-width:900px){
	.story-tab-pc{
	display: none;
	}
	
	.story-tab-sp{
	display: block;
	display: flex;
	flex-direction: column;
	gap:12px;	
	}
}


.story-tab p{
	color: var(--light-beige);
}

.story-tab hr{
	border:none;
	flex: 1;
	height:2px;
	background-color: var(--light-beige);
	margin: 0px;
}

.why-txt-flex{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin:0px 1%;
}

.why-txt-flex-sp{
	display: flex;
	flex-direction: column;
}

#story-p1{
	margin-top: -7px;
	font-size: 20px;
}

#story-p1-sp{
	margin-top: -4px;
}



@media (max-width:900px){
	.story-tab hr{
		margin-left: 5%;
	}
}


@media (max-width:650px){
	.story-tab hr{
		margin-top:-5px;
	}
}



.accordion-content {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  top:0px;
}



/* 展開時 */
.section-2.open .accordion-content {
  opacity: 1;
}

/* story-click ボタン（＋マーク） */
.story-click {
  width:4.5vw;
  height:4.5vw;
  max-width: 55px;
  max-height: 55px;
  min-width: 50px;
  min-height: 50px;
  background-image: url("../img/moss_lg_spin.svg");
  background-color: transparent;
  border: none;
  position: relative;
  cursor: pointer;
	
   /* アニメーション用 */
  transform-origin: 50% 50%;
  transition: transform 1000ms cubic-bezier(.2,.9,.2,1);	
}

/* ホバー・フォーカス時の拡大*/
.story-click:hover,
.story-click:focus-visible,
.story-click.hover { /* .hover は JS 用のクラス（タッチ時） */
  transform: scale(1.5); /* 拡大率をここで調整 */
}

/* --- スマホサイズ以下では無効化 --- */
@media (max-width: 650px) {
  .story-click {
    transition: none;
    transform: none !important;
  }
  .story-click:hover,
  .story-click:focus-visible {
    transform: none !important;
  }
}

/* プラス記号 */
.story-click::before,
.story-click::after {
  content: "";
  position: absolute;
  background-color: var(--logo-G);
  transition: transform 0.3s ease;
	/* 元の translate を保ちながら、必要なら個別アニメーションが効くように */
  transition: transform 300ms ease, opacity 200ms ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.story-click::before {
  width: 24px;
  height: 2px;
}

.story-click::after {
  width: 2px;
  height: 24px;
}

/* 開いたとき（−マークに変化） */
.section-2.open .story-click::after {
  transform: translate(-50%, -50%) scaleY(0);
}



@media (max-width:650px){
	.story-click::before {
  	width: 22px;
	}

	.story-click::after {
	height: 22px;
	}
}




.why{
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 50px;
}

.why-txt{
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--light-beige);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100px;
	width:36.42857142857142vw;
	width:510px;
}

.why-txt-pc{
	display: block;
}

.why-txt-sp{
	display: none;
}

@media(max-width:1000px){
	.why-txt{
	width:68vw;	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	}
}

@media(max-width:650px){
	.why-txt{
	width:84vw;	
	}
	
	.why-txt-pc{
	display: none;
	}

	.why-txt-sp{
		display: block;
	}
	
	.why-index{
		line-height: 1.5em;
		margin-bottom: 7.5px;
	}
}

.why-img-wrap{
	width:100%;
	height:100vh;
	max-height: 500px;
	overflow: clip;
}

.why-img-pc { 
	display: block;
}

.why-img-sp { 
	display: none;
}

@media (max-width:1000px) {
	.why-img-wrap{
		max-height: 400px;
	}
	
}

@media(max-width:650px){
	.why-img-wrap{
		max-height:none;
	}
}

/* 横幅1000px以下ならPC画像を5%拡大 */
@media (max-width:1000px) {
  .why-img-pc {
    transform: scale(1.5);
  }
}

@media (max-width:650px) {
  .why-img-pc {
    display: none;
  }
  .why-img-sp {
    display: block;
  }
}

.why-img-wrap img{
	width: 100%;
    height: 100%;
    object-fit: cover;   /* 中身画像を比率維持しつつwrapにフィット */
    object-position: center; /* 中央寄せ */
}

#why-filter1,#why-filter2,#why-filter3,#why-filter4,#why-filter5,#why-filter6{
	filter: blur(0px) brightness(0.75);
}




.why-txt-inner{
	display: flex;
	align-items: center;
	gap:4%;
	font-size: 18px;
}

.why-txt-inner hr{
	border:none;
	flex:1;
	height:2px;
	background-color: var(--light-beige);
	margin: 0px;
}

.basis{
	display: flex;
	flex-direction: column;
	gap:100px;
	margin: 0 auto;
	padding-top:200px;
	padding-bottom:400px;
	color:var(--light-beige);
	position:relative;
}

@media (max-width:650px){
	.basis{
		gap:60px;
		padding-top:10px;
		padding-bottom:60px;
	}
}


.basis-inner{
	position: relative;
	z-index: 1;	
	width:42vw;
	max-width:510px;
	margin: 0 auto;
}

@media (max-width:1000px){
	.basis-inner{
		width:50vw;
	}
}

@media (max-width:650px){
	.basis-inner{
		width:84vw;
	}
}

@media (max-width:374px){
	.basis-sp-h1{
		font-size: 23px;
	}
}

.basis-index{
	display: flex;
	color: var(--light-G);
	align-items: center;
	gap: 4%;
}

.basis-index hr{
	flex: 1;
	border:none;
	height:2px;
	background-color: var(--light-G);
	margin: 0px;
}

.basis-index p{
	width:fit-content;
	white-space: nowrap; 
}

.basis-pc{
	display: block;
}

.basis-sp,.basis-sp-p{
	display: none;
}


@media (max-width:1000px){
	.basis-pc{
	display: none;
	}

	.basis-sp{
		display: block;
		line-height: 1.5em;
		margin-bottom: 7.5px;
	
	}	
	
	.basis-sp-p{
		display: block;
	}
}


.basis-img{
	width:19.428571428571427vw;
	height:29.142857142857142vw;
	overflow: clip;
	position: absolute;
	z-index: 0;
}

.basis-img-pc{
	display: block;
}

.basis-img-sp{
	display: none;
}


.basis-img img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

#basis-1{
	position:absolute;
	width:110%;
	left:-10%;
}


@media (max-width:1000px){
	.basis-img{
		width:17vw;
		height:25.5vw;
	}	
}


@media (max-width:650px){
	
	.basis-img-pc{
	display: none;
	}	
	
	.basis-img-sp{
	display: block;
	display: flex;
	justify-content: space-between;
	}
	
	.basis-img{
	position: relative;
	height:56.00000000000001vw;
	width:100%;
	}
	
	.basis-img img{
		height: auto;
		width: 100%;
		position: absolute;
	}
	
	.basis-img1 img{
		width:180%;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.basis-img2 img{
		top:-52%;
	}
	.basis-img3 img{
		top:-48%;
	}
	.basis-img4 img{
		top:-48%;
	}
}


@media (min-width:651px){

	.basis-img1{
		margin-top:-80px;
	}

	.basis-img2{
		right:0;
		top:300px;
	}

	.basis-img3{
		top:830px;
	}

	.basis-img4{
		right:0;
		top:1050px;
	}
}






.story-section2{
	position: relative;
	z-index: 1;
	background-color: var(--logo-G);
	height:140px;
}

.section-3{
	margin-top: -140px;
	position: relative;
	z-index: 2;
}

.body-wrap-3{
	background-color: var(--medium-beige);
	border-radius:80px 80px 0 0;
	padding-bottom: 100px;
}

@media (min-width:651px) and (max-width:1000px){
	.body-wrap-3{
	border-radius:55px 55px 0 0;
	}
}

@media (max-width:650px){
	
	.body-wrap-3{
		border-radius: 40px 40px 0 0;
		}	
}


.howto{
	padding-top:150px;
}


@media (max-width:650px){
	
	.howto{
		padding-top:18vw;
		}	

	.howto-h1{
		height:13.8vw;
		min-height:11.2vw;
		margin-bottom:-4vw;
		}
}

.video{
	width:78.57142857142857vw;
	height:44.19714285714286vw;
	max-width: 1300px;
	max-height: 731.25px;
	position:relative;
	margin: 0 auto;
}

.video iframe {
	margin: 0 auto;
	width:78.57142857142857vw;
	height:44.19714285714286vw;
	max-width: 1300px;
	max-height: 731.25px;
}

@media (max-width:650px){
	.video{
		width:100%;
		height:53.25066666666667vw;
	}
	
	.video iframe {
		width:100%;
		height:53.25066666666667vw;
	}
}



.include,.howto-inner,.point{
	width:78.57142857142857vw;
	max-width: 1300px;
	margin: 0 auto;
}

.include{
	display: flex;
	justify-content:flex-start;
	gap:5vw;
	align-items:center;
	margin-top:150px;
	position:relative;
}

@media (min-width:1401px){
	.include{
		gap:7%;
	}
}

.include-inner-h1-pc{
	display: block;
}

.include-inner-h1-sp{
	display: none;
}

@media (max-width:650px){
	.include{
		width: 84vw;
		flex-direction: column-reverse;
		gap:30px;
		margin-top:16vw;
	}	
	
	.include-inner-h1-pc{
	display: none;
}

	.include-inner-h1-sp{
		display: block;
	}
}


.howto-img{
	aspect-ratio: 4 / 3;
	width:39vw;
	max-width: 700px;
	height:auto;
	margin: 0px;
	object-fit: contain;
	overflow: hidden;
	position: relative;
}

.howto-img img{
	position: absolute;
	width:133%;
	top:50%;
	left:53%;
	transform: translate(-50%,-50%);
	
}

@media (max-width:650px){
	.howto-img{
		width: 100%;
	}
}


.include-inner{
	display: flex;
	flex:1;
	flex-direction: column;
	gap:25px;
	position:relative;
}

@media (max-width:650px){
	.include-inner{
		width: 84vw;
	}
}



.include-txt{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:10px;
}

.include-txt p{
	font-size: 18px;
}

.include-top{
	display: flex;
	justify-content: flex-start;
	gap:50px;
}

@media (min-width:651px) and (max-width:1081px){
	.include-top{
		flex-direction: column;
		gap:25px;
	}
}

@media (max-width:650px){
	.include-top{
		justify-content:flex-start;
		gap:5.333333333333334vw;
	}
}




.include-txt img{
	width:80px;
	margin: 0px;
	min-width: 50px;
}

@media (max-width:650px){
	.include-txt img{
		width:75px;
	}
	
	.include-txt p{
	font-size: 14px;
	}	
}


.howto-inner{
	margin-top: 100px;
	margin-bottom: 100px;
	position: relative;
}

@media (max-width:650px){
	.howto-inner{
		width: 84vw;
		margin-top:16vw;
		margin-bottom: 60px;
	}	
}

.howto-flex{
	display: grid;
	grid-row-gap:4.5vw;
	grid-column-gap: 2.857142857142857vw;
	grid-template-columns: 1fr 1fr;
	margin-top:20px;
}

@media (max-width:650px){
	.howto-flex{
		flex-direction: column;
		grid-template-columns: auto;
		gap:60px;
	}	
}

.howto-flex-img-div{
	position: relative;
	width:100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	overflow: hidden;
}

.howto-flex img{
	width:100%;
}

#step1{
	position: absolute;
	width:108%;
	bottom:0%;
	left:50%;
	transform: translateX(-50%);
}


#step2{
	position: absolute;
	width:120%;
	top:-12%;
	left:50%;
	transform: translateX(-57%);
}

#step3{
	position: absolute;
	width:110%;
	top:-5%;
	left:50%;
	transform: translateX(-50%);
}

#step4{
	position: absolute;
	width:118%;
	top:-8%;
	left:50%;
	transform: translateX(-50%);
}

.howto-flex-index{
	display: flex;
	padding:5px;
	background-color: var(--light-G);
	border-radius:10px 10px 0px 0px;
	align-items: center;
	justify-content: center;
	gap:10px;
}

.howto-flex-index p{
	font-size: clamp(25px,2.142857142857143vw,30px);
}

.howto-flex-index img{
	width:clamp(20px,1.7857142857142856vw,25px);
}

.howto-flex-p{
	display: flex;
	flex-direction: column;
	gap:1vw;
}

.howto-flex-p p{
	font-size: 18px;
}

@media (max-width:650px){
	.howto-flex-p{
	gap:2vw;
	}	
	
	.howto-flex-p p{
	font-size: 14px;
	}
}

.point{
	display: flex;
	align-items: center;
	gap:5.3vw;
}

@media (min-width:2400px){
	.point{
		gap:120px;
	}
}


@media (max-width:650px){
	.point{
		width: 84vw;
		flex-direction: column-reverse;
		gap:30px;
		}	
}


.point-img{
	display: flex;
}

.point-img img{
	width:23vw;
	max-width:350px;
}

.point1,.point2{
	position:relative;
	overflow: clip;
}

.point1-txt,.point2-txt{
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width:650px){
	.point-img{
	flex-direction: column;
	}
	
	
	.point1,.point2{
	position:relative;
	overflow: clip;	
	width: 84vw;
	aspect-ratio: 3 / 2;
	}	
	
	.point1 img,.point2 img{
	width:105%;
	position: absolute;
	left:50%;
	transform: translateX(-50%);
	bottom: 0%;	
	}
	
	.point1-txt,.point2-txt{
	bottom: 2.9%;
	}
}

.point-txt-eng{
	font-size: 30px;
}


.body-wrap-4{
	background-color: var(--light-beige);
	padding:50px 0px;
}

.caution{
	position: relative;
	width:60vw;
	margin-left:8.928571428571429vw;
}	

.caution-top,.caution-bottom{
	margin:0px;
	padding: 0px;
}

.caution-top{
	margin-top:10px;
}

.caution-bottom{
	margin-top:20px;
}

.caution-flex{
	display: flex;
	justify-content: flex-start;
	gap:0.1%;
}

.caution-flex p{
	font-size: 15px;
}

.caution li{
	margin-bottom:3px;
}

@media (max-width:650px){
	.caution{
	width:84vw;
	margin-left:0px;
	margin:0 auto;
	}
	
	.caution-flex p{
	font-size: 14px;
	}
	
	.caution li{
	margin-bottom:12px;
	}
	.caution-top{
	margin-top:15px;
}
	.caution-bottom{
	margin-top:30px;
	}
}



.body-wrap-5{
	background-color: var(--medium-beige);
	padding:50px 0px 0px;
}

.caution-2{
	display: flex;
	width:75vw;
	margin:0 auto;
	gap:10%;
	justify-content: space-between;
	align-items: center;
	margin-left:8.928571428571429vw
}

@media (min-width:1401px){
	.caution,.caution-2{
		margin:0 auto;
		width:78.57142857142857vw;
		max-width:1300px; 
	}
}

.caution-2-inner{
	position: relative;
}

.caution-2-txt{
	display: flex;
	flex-direction: column;
	gap:50px;
}

.caution-2-inner-p{
	margin-top:10px;
}

.caution-2-img{
	position: relative;
	width:120%;
	aspect-ratio: 3 / 2;
	background-color: white;
	object-fit: contain;
	overflow: hidden;
}

.caution-2-img img{
	width:105%;
	position: absolute;
}

@media (max-width:650px){
	.caution-2{
	width:84vw;
	flex-direction: column;	
	margin-left:0px;	
	gap:50px;
		margin: 0 auto;
	}	
	
	.caution-2-img{
	width: 100%;
	}
}



.body-wrap-6{
	background-color: var(--light-G);
	padding:100px 0px 100px 0px;
	display: flex;
	flex-direction: column;
	gap:17.857142857142858vw;
	margin-top:-32.142857142857146vw;
}


#faq{
	position: relative;
	z-index: 2;
	height: 100px;
	background-color:var(--light-G);
}

@media (max-width:650px){
	.body-wrap-6{
		gap:150px;
		padding-bottom: 50px;
	}
	
	#faq{
		height: 100px;
	}
}


.collabo-flex{
	width:78.57142857142857vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:13%;
}

.collabo-flex-r{
	width:78.57142857142857vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap:13%;
}

.align-start{
	align-items:flex-start
}

@media (min-width:651px) and (max-width:1000px){
	.collabo-flex{
		align-items: flex-start;
	}
}


@media (max-width:650px){
	.collabo-flex{
		flex-direction: column;
		width:84vw;
		align-items: flex-start;
	}
	
	.collabo-flex-r{
		flex-direction: column-reverse;
		width:84vw;
		align-items: flex-end;
	}
	
}


@media (min-width:500px) and (max-width:650px){
	.collabo-flex-r{
		gap:20px;
	}
}







.collabo{
	width: 76vw;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap:75px;
	align-items: center;
	box-sizing: border-box;
}

.collabo-main,
.collabo-profi{
    width: 100%;           
    box-sizing: border-box;
}

.collabo-main{
	display:flex;
	justify-content: space-between;               
    align-items: stretch;
}


.collabo-main-clip-w img,.collabo-main-clip-h img,.collabo-main-clip-s img{
	position: absolute;
    width: auto;
	height: 100%；
}


.collabo-main-clip-w{
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	height:33.42857142857143vw;
	
}

.collabo-main-clip-h{
	position: relative;
	height:33.42857142857143vw;
	aspect-ratio: 2 / 2.8;
	overflow: hidden;
}

.collabo-main-clip-s{
	position: relative;
	overflow: hidden;
	height:33.42857142857143vw;
	width:36.92857142857143vw;
	
}

.collabo-profi{
	display: flex;
	gap: 60px;
	align-items: flex-start;
	justify-content: flex-start;
}

@media (min-width:1401px){
	.collabo-profi{
	gap:4.3vw;
	}
}

.collabo-prof-clip{
	position: relative;
  	overflow: hidden;
	flex: 0 0 auto;
	aspect-ratio: 2 / 3;
	width:15.928571428571429vw;
	box-sizing: border-box;
	min-width:200px;
}

.collabo-prof-clip-sp{
	position: relative;
  	overflow: hidden;
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
	width:100%;
	box-sizing: border-box;
	min-width:200px;
}

.collabo-prof-clip img,.collabo-prof-clip-sp img{
	position: absolute;
    width: auto;
	height: 100%；
}

.collabo-prof-txt{
	flex: 1 1 auto; /*  */
	width:40vw;
	display: flex;
	flex-direction: column;
	gap:50px;
	min-width: 0; 
	box-sizing: border-box;
}

.collabo-prof-txt-1{
	display: flex;
	flex-direction: column;
	gap:7px;
		
}

.collabo-prof-txt-2{
	position: relative;
	width: auto;
}

.collabo-name{
	display: flex;
	align-items: baseline;
	gap:10px;
}

.collabo-prof-h1{
	font-size: 30px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2em;
}


.collabo-position{
	font-size: 18px;
	margin-bottom: 5px;
}


@media (max-width:1000px){
	
	.collabo-name{
		flex-direction: column;
		gap:0px;
	}
	
	.name-eng{
		margin-top: -5px;
	}
}

.collabo-name img{
	width:30px;
	height:30px;
}

.name-jp{
	font-size: 30px;
}

.name-eng{
	font-size: 18px;
}


@media (max-width:810px){
	.collabo-position{
	font-size: 18px;
	}
}


#prof-1{
	height:100%;
	left: 40%;
    transform: translateX(-50%);	
}

#prof-1-sp{
	width:122%;
	left: 55%;
	top:56%;
    transform: translate(-50%,-50%);	
}

#prof-2{
	height:100%;
    top: 50%;
    left: 40%;
    transform: translate(-50%,-50%);
}

#prof-2-sp{
	width:122%;
    top: 59%;
    right:0%;
    transform: translate(0%,-50%);
}

#prof-3{
	height:100%;
    top: 50%;
    left: 80%;
    transform: translate(-50%,-50%);
}

#prof-3-sp{
	width:120%;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}


#prof-4{
	height:107.5%;
    top: 50%;
    left: 52.5%;
    transform: translate(-50%,-50%);
}

#prof-4-sp{
	width:115%;
    top: 70%;
    left: 52%;
    transform: translate(-50%,-50%);
	}


#work-1,#work-1-sp{
	height:100%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-2{
	height:110%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-2-sp{
	width:100%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-3{
	height:110%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-3-sp{
	height:114%;
    top: 46%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-4,#work-4-sp{
	height:100%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-5,#work-5-sp{
	height:100%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-6{
	height:112%;
    top: 48%;
    right:-3%;
	transform: translate(0%,-50%);
}

#work-6-sp{
	width:110%;
    top: 63%;
    left: 48%;
	transform: translate(-50%,-50%);
}

#work-7{
	height:103%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#work-7-sp{
	height:112%;
    bottom: -2%;
    left:48%;
	transform: translate(-50%,0%);
}

#work-8{
	height:100%;
    top: 50%;
    left: 50.5%;
	transform: translate(-50%,-50%);
}

#work-8-sp{
	width:110%;
    top: 51%;
    left: 50%;
	transform: translate(-50%,-50%);
	}





.collabo-pc{
	display: block;
}

.collabo-sp{
	display: none;
	}

@media (max-width:650px){
	.collabo-pc{
	display: none;
	}
	
	.collabo-sp{
	display: block;
	}
}

@media (max-width:650px){
	.collabo{
		width:100%;
		gap:40px;
	}
	
	.collabo-main-sp{
	display: flex;
	flex-direction: column;
	gap:20px;
	width: 90%;
	margin: 0 auto;
		align-content: center;
	}

	.collabo-main-clip-w{
		position: relative;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	.collabo-main-sp-2{
	display: flex;
	flex-direction: column;
	gap:20px;	
	width: 100%;
		margin: 0 auto;
		align-content: center;
	}
	
	.collabo-main-clip-h,.collabo-prof-clip{
		position: relative;
		aspect-ratio: 2 / 3;
		overflow: hidden;
		width: 47%;
		height: auto;
		min-width: inherit;
	}

	.collabo-main-clip-s{
		position: relative;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		width: 100%;
		height: auto;
	}
	
	.collabo-prof-txt{
		width: 100%;
		gap:40px;
	}
	
	.collabo-prof-h1{
	font-size: 25px;
	line-height: 1.4em;
	}
	
	.name-jp{
	font-size: 25px;
	}
	
	.collabo-profi{
	width: 90%;
	}
}



.collabo-1{
	position: relative;
}

.collabo-2{
	position: relative;
}

.collabo-3{
	margin-top: 100px;
}

@media (max-width:650px){
	.collabo-3{
	margin-top: 50px;
	}
}


.collabo-moss-2{
		position: absolute;
		bottom: -45%;
		}

.collabo-moss-3{
		position: absolute;
		bottom: -15%;
		}



@media (max-width:650px){
	.collabo-moss-2{
		position: absolute;
		bottom: -20%;
		}

	.collabo-moss-3{
		position: absolute;
		bottom: -7%;
		}
}















.section-4{
	position: relative;
	z-index: 2;
}


.body-wrap-7{
	background-color: var(--light-beige);
	padding:80px 0px;
}

@media (max-width:650px){
	.body-wrap-7{
	padding:50px 0px 80px 0px;
	}
}

.faq-title{
	display: flex;
	gap:50px;
}

@media (max-width:650px){
	.faq-title{
		gap:30px;
	}
}


.faq-title-eng{
	margin-left: 3.571428571428571vw;
	height: 5.814285714285714vw;
	min-height: 65px;
}

.faq-title-jp{
	position: relative;
}


@media (max-width:650px){
	.faq-title-jp{
	margin-top: 5px;
}
	
	.faq-title-jp p{
		font-size:18px;
	}	
}


.faq-section{
	padding:50px 0px 0px 0px;
	display: flex;
	flex-direction: column;
	width:calc(100% - 17.857142857142858vw);
	margin: 0 auto;
}

@media (max-width:650px){
	.faq-section{
		width:calc(100% - 10.666666666666668vw);
		padding:20px 0px 0px 0px;
	}
}


.faq-section hr{
	width: auto;
	height: 2px;
	border:none;
	background-color: var(--dark-beige);
	margin: 0px;
}

.question,.answer{
	display: flex;
	justify-content: space-between;
}

.question{
	padding: 7px 0px;
	gap:4%;
}


.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.2s ease;
}

.answer.open {
 padding: 0px 0px 7px 0px;
 margin-top:-7px;		
}

.answer.open .answer-txt {
  opacity: 1;
}

.answer-txt {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.question-txt,.answer-txt{
	display: flex;
	gap:10px;
}

.question-txt .reddit-sans,.answer-txt .reddit-sans{
	font-size: 25px;
}

.faq-txt-jp{
	margin-top:8.5px;
	max-width:67vw;
}


@media (max-width:650px){
	.question-txt .reddit-sans,.answer-txt .reddit-sans{
	font-size: 18px;
	}
	
	.faq-txt-jp{
	margin-top:3px;
	max-width:64vw;
	}
}


.faq-button{
	position: relative;
	width:26px;
	height:26px;
	border-radius: 50%;
	background-color: var(--medium-beige);
	margin:auto 0;
}

/* ボタン矢印のスタイル */
.faq-button::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--logo-G);
  border-bottom: 2px solid var(--logo-G);
  transform: translate(-50%, -50%) rotate(-45deg); /* 下向き */
  transition: transform 0.3s ease;
}

/* アクティブ状態：矢印を上向きに */
.faq-button.active::before {
  top: 55%;
  transform: translate(-50%, -50%) rotate(135deg); /* 上向き */
}



.body-wrap-8{
	background-color: var(--medium-beige);
}


.contact{
	display:flex;
	margin: 0 auto;
	justify-content: space-between;
	width:calc(100% - 10vw);
}


@media (max-width:650px){
	.contact{
		flex-direction: column;
		width:100%;
	}	
}


.contact hr{
	width: 2px;
	height: auto;
	border:none;
	background-color: var(--dark-beige);
	margin: 0px;
}


@media (max-width:650px){
	.contact hr{
	width: 94.66666666666667vw;
	height: 2px;
	}
}



.contact-inner{
	width:38.21428571428571vw;
	display: flex;
	flex-direction: column;
	padding:80px 0px 100px;
	gap:25px;
	align-items: flex-start;
}


@media (max-width:650px){
	.contact-inner{
	width:calc(100% - 10.666666666666668vw);
	margin:0 auto;
	padding:60px 0px;	
	}
	
	.contact-instagram{
	padding-bottom: 100px;
	}
}


#toiawase{
	font-family: "Noto Sans JP", "Reddit Sans", sans-serif;
	padding-bottom: 2.5px;
}

.contact-button{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:12px;
	color:var(--light-beige);
	background-color: var(--logo-G);
	font-size:20px;
	font-weight: 700;
	width:300px;
	height:52px;
	border-radius: 5px;
}

@media (min-width:651px) and (max-width:800px){
	.contact-button{
		width:38.21428571428571vw;
	}	
}



.contact-button p{
	font-size:20px;
	font-weight: 700;
}


@media (max-width:650px){
	.contact-button{
	width:315px;
	height:45px;	
	font-size:16px;
	}
	
	.contact-button p{
	font-size:16px;
	}
}

.contact-button img{
	width:25px;
}





footer{
	margin-top:-20px;
	position: relative;
	z-index: 2;
	background-color: var(--logo-G);
	color:var(--light-beige);
	border-radius: 60px 60px 0px 0px;
}

@media (min-width:651px) and (max-width:1000px){
	.footer{
	border-radius:55px 55px 0px 0px;
	}
}

@media (max-width:650px){
	footer{
		margin-top:-40px;
		border-radius: 40px 40px 0px 0px;
	}
}


.footer-inner{
	padding:50px 10.714285714285714vw;
	display: flex;
	justify-content: space-between;
}


@media (min-width:651px) and (max-width:1023px){
	.footer-inner{
		padding-bottom: 120px;
	}
}

@media (max-width:650px){
	.footer-inner{
		padding:16vw 8vw 25vw 8vw;
	}
}


.company-pc{
	display: block;
	display: flex;
	flex-direction: column;
	gap:30px;
}

.company-sp{
	display: none;
}

.footer-logo{
	width:8.928571428571429vw;
	height: auto;
}

@media (max-width:650px){
	.company-pc{
		display: none;
	}
	
	.company-sp{
		display: block;
		display: flex;
		flex-direction: column;
	}
	
	.footer-logo{
	width:26.666666666666668vw;
	margin-bottom:40px;
	}
}


.address{
	display:flex;
	gap:10px;
}

.address p{
	font-weight: 500;
	font-size: 13px;
}

@media (max-width:650px){
	.address{
	flex-direction: column;
	padding:20px 0px 80px 0px;
	}
	
	.address p{
		height:20px;
	}
}


.address a{
	color:var(--light-beige);
}

.copyright{
	font-weight: 300;
	font-size: 10px;
}


.footer-button-flex{
	display: flex;
	flex-direction: column;
	align-items: center;
}


.footer-button-flex p{
	font-size: 14px;
}

.footer-button{
	width:5.714285714285714vw;
	height:5.714285714285714vw;
	min-width: 60px;
	min-height: 60px;
	background-image: url("../img/moss_lb_spin.svg");
	background-color: transparent;
    border: none;
	position: relative;
    cursor: pointer;
}

.footer-button::before,
.footer-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 2px;
  height: 14px;
  background-color: var(--logo-G);
  transform-origin: 50% 1px;
}

.footer-button::before {
  transform: rotate(48.35deg);
}

.footer-button::after {
  transform: rotate(-48.35deg);
}