/*-----------------------------------------------------*/
/* PC */
/*-----------------------------------------------------*/


body {
    overflow: inherit;
	background: #ffffff;
}

.main {
    width: 100svw;
    margin-inline: calc(50% - 50svw);
    padding-inline: 0;
}
.main h2{
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 38px;
	font-weight: 700;
	margin: 20px 0;
}
.main h2 small{
	display: inline-block;
	color:#333;
	font-size: 0.5em;
	font-weight: bold;
	margin-top: 20px;
}
.main .howto-ttl h2{
	text-align: center;
}
.midashi{
	font-size: 1.7em;
	font-weight: bold;

}
.howto-ttl{
	text-align: center;
	margin: 40px auto;
}
.howto-txt ol,
.howto-txt ol ul {
 list-style-type: circle;    /* 1,2,3… */
  list-style-position: outside !important;/* マーカーは行外（デフォルト） */
}
.howto-txt ol ul {
  display: list-item !important;          /* これがないとマーカーは消えたまま */
  margin-bottom: .8em;                    /* お好みで */
}
.howto-txt ol {
  margin-left: 1.5em !important;          /* インデント確保 */
  padding: 0;
}

.ttl-sm{
	display: block;
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: normal;
}
.main p {
    padding: 0;
    text-align: center;
}

.mt-10{
	margin-top: 10px;
}
.mt-30{
	margin-top: 30px;
}
.mt-50{
	margin-top: 50px;
}

.mt-80{
	margin-top: 80px;
}

.mt-100{
	margin-top:100px;
}

.flex{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}	

a:hover{
	opacity: 0.5 ;
}
.back-color{
	background: #f7f8f8; 
	padding: 30px 0;
}

.wrapper {
    max-width: 1200px; /* 1. コンテンツの最大幅を設定 */
    margin: 50px auto;                /* 2. 要素を水平方向に中央揃えにする */
    padding-inline: 20px;    /* 3. 左右内側の余白 */
}

.wrapper--narrow {
    max-width: 670px;
    margin: 0 auto;
    padding-inline: 40px;    /* 3. 左右内側の余白 */
}

.ttl{
	font-weight: 650;
	font-size: 1.9em;
}
.read,.read2{
	line-height: 180%;
	font-size: 15px;
	text-align: center;
}
.read2{
	text-align: left;
}

/*CSSのみのスライダー（TOP）*/
.slide {
  position: relative;
  width: 100%;
  padding-top: 50%;
  overflow: hidden;
  background-color: #fff;
}

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

  10% {
    opacity: 1;
  }

  28% {
    opacity: 1
  }

  38% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation: slideshow 10s linear infinite;
}

.slide img:nth-child(1) {
 animation-delay: 5s;	
}

.slide img:nth-child(3) {
 animation-delay: 5s;	
}

.collection-block,.about-block,.doubleimage-block{
	display: flex;
    align-items: center;
	height: 30%;
	background: #f5f2ec;
}
.about-block,.doubleimage-block{
	background: none;
}

.reverse{
	flex-direction: row-reverse;
}
.collection-block_content,.about-block_content{
	width: 50%;
	padding: 60px 60px 60px 80px ;
}
.collection-block_image,.about-block_image,.doubleimage-block_image{
    width: 50%;
    height: 32vw; /* 親要素の高さ制限 */
    position: relative; /* ★絶対位置指定の子要素を包含するため必須 */
}
.doubleimage-block_image{
    height: 25vw; /* 親要素の高さ制限 */
}

.collection-block_image img,.about-block_image img,.doubleimage-block_image img{
    position: absolute;
    top: 50%; /* 親要素の上端から50% */
    left: 50%; /* 親要素の左端から50% */
    transform: translate(-50%, -50%); /* 画像自身の幅・高さの半分だけ戻すことで中央揃え */
    width: 100%;   /* 親要素の幅いっぱいに拡大 */
    height: 100%;  /* 親要素の高さいっぱいに拡大 */
    image-rendering: auto;
	object-fit: cover;
}

.flex-2box{
	display: grid; /* FlexboxからGridに変更 */
    grid-template-columns: 2fr 1fr; 
    gap: 20px; /* 列と行の間に20pxの隙間を設ける */
	justify-content: center;
	align-items: start;
}
.grid-3box{
	display: grid; /* FlexboxからGridに変更 */
    grid-template-columns: repeat(3, 1fr);
    gap: 5%; /* 列と行の間にXの隙間を設ける */
	justify-content: center;
	align-items: start;
}

.flex-video{
	display: flex; /* FlexboxからGridに変更 */
    flex-wrap: wrap;
	justify-content: space-between;
}
.box2to1{
    width: 48%;
	margin-bottom: 30px;
}

.flexbox-product{
	display: grid; /* FlexboxからGridに変更 */
    grid-template-columns: repeat(4, 1fr); /* 例: 3列表示で、それぞれの列が均等な幅を占める */
    gap: 20px; /* 列と行の間に20pxの隙間を設ける */
	justify-content: center;
	align-items: start;
    margin: 30px auto;
	padding-inline:20px;
	max-width:  1200px;
}

/* --- スクロール出現アニメーションの初期状態 --- */
/* .scroll-fade-up クラスにアニメーションの初期状態を定義 */
.scroll-fade-up {
    opacity: 0; /* 最初は透明 */
    transform: translateY(30px); /* 少し下にずらしておく */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 透明度と位置の変化にアニメーションを適用 */
}

/* --- JavaScriptで追加するクラスに対するスタイル --- */
/* .scroll-fade-up がビューポートに入った時に適用されるスタイル */
.scroll-fade-up.is-visible {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
}

.itembox p{
	padding: 10px 20px;
	text-align: left;
	margin-bottom: 0;
}
.itembox p .coad{
	background-color: #636262;
}

.item-image {
    position: relative; /* 子要素のabsolute基準点 */
    overflow: hidden; /* 画像がはみ出さないように */
	width: 100%;
	padding-bottom: 100%; 
	height: 0;
}

.item-image img {
    position: absolute; /* 親要素内で位置指定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の表示方法 */
    transition: opacity 0.3s ease-in-out; /* 透明度変化のアニメーション */
}

/* 通常表示の画像 */
.item-image .main-image {
    opacity: 1; /* 通常は見える */
}

/* ホバー時に表示する画像 */
.item-image .hover-image {
    opacity: 0; /* 通常は隠れている */
}

/* .item-image にホバーした時 */
.item-image:hover .main-image {
    opacity: 0; /* メイン画像を隠す */
}

.item-image:hover .hover-image {
    opacity: 1; /* ホバー画像を出現させる */
}

.image-wide{
	position: relative;
	width: 100%;
	height: 300px;
}

.image-wide img{
	position: absolute;
    top: 50%; /* 親要素の上端から50% */
    left: 50%; /* 親要素の左端から50% */
    transform: translate(-50%, -50%); /* 画像自身の幅・高さの半分だけ戻すことで中央揃え */
	width: 100%;   /* 親要素の幅いっぱいに拡大 */
    height: 100%;  /* 親要素の高さいっぱいに拡大 */
    image-rendering: auto;
	object-fit: cover;
}
.icon{
	width: 100%;
}
/*-----------------------------------------------------*/
/* SP */
/*-----------------------------------------------------*/
@media (max-width: 750px) {
	
.main h2{
	margin: 10px -15px;
	font-size: 22px;
}
.back-color{
	padding: 20px 0;
}	
.wrapper {
    margin: 20px auto;                /* 2. 要素を水平方向に中央揃えにする */
    padding-inline: 30px;    /* 3. 左右内側の余白 */
}	
	
.slide {
    padding-top: 75%; /* ★ここがスマホでの高さになります (例: 幅の75%) */
}
	
.collection-block{
	height: auto;
	flex-direction: column;
}	
.about-block{
	height: auto;
	flex-direction: column-reverse;
}
	
.collection-block_content,.about-block_content{
	width: 100%;
	padding: 30px 40px;
}
.collection-block_image{
    width: 100%;
    height: 50vw; /* 親要素の高さ制限 */
}
.about-block_image,.doubleimage-block_image{
    width: 100%;
    height: 70vw; /* 親要素の高さ制限 */
}	
.collection-block_image img,.about-block_image img{
}
.flex-2box{
    grid-template-columns: 1fr;
}
.grid-3box{
    grid-template-columns: 1fr;
    gap: 50px; 
}	
.box2to1{
    width: 100%;
}	
.flexbox-product{
    grid-template-columns: repeat(2, 1fr); /* 例: 3列表示で、それぞれの列が均等な幅を占める */
    gap: 15px; /* 列と行の間に20pxの隙間を設ける */
    margin: 30px auto;
	padding-inline:30px;
}
.itembox p{
	padding: 10px 10px;
	font-size: 12px;
}	
}