@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

li {
  list-style: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

section {
  margin-bottom:0px!important;
  }


/* トップ */
.kotatsu-top {
  background: #f9f0e6; /* ベース色だけにする */
  padding: 30px 0 70px;
  overflow: hidden;
  position: relative;
    min-height: 83vh;

  display: flex;
  justify-content: center;
  align-items: center;
}


/* 親コンテナは full width。中央配置を flex で実現 */
.kotatsu-inner{
  width: 100%;
  display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8.5rem;
  position: relative;
  box-sizing: border-box;
      padding: 0 70px
}

/* 中央タイトルブロック（基準要素） */
.kotatsu-center{
  position: relative; /* kotatsu-left はここを基準に absolute に */
  z-index: 3;         /* タイトルは手前に出す */
  display: flex;
  align-items: center;
  justify-content: center;
    padding: 0 70px 0 70px;
}

/* タイトルSVG */
.kotatsu-title{
position: absolute;
    right: calc(-1 * var(--kotatsu-bleed, 0vw));
    top: 140px;
        margin: 0 50px 0 0;

    transform: translateY(-37%);
    width: min(320px, 25vw);
    display: block;
    max-width: 640px;
    height: auto;
}

/* ソロこたつ（中央を基準にして左へはみ出す） */
.kotatsu-left{
    position: absolute;
    top: -5px;
    transform: translateX(-84%);
    width: clamp(400px, 37vw, 1070px);
    z-index: 1;
    pointer-events: none;
}
.kotatsu-left .kotatsu-img{
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：ファミリー */
.kotatsu-right{
position: relative;
    z-index: 2;
    width: clamp(400px, 52vw, 1200px);
    display: block;
    right: 0;
    padding: 5% 70px 0 4%;
}
.kotatsu-right .kotatsu-img{
  width: 100%;
  height: auto;
  display: block;
}

/* 右側の文言を右外へ少し出す（absolute） */
.kotatsu-text{
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500; /* 中くらい。700でより太く強調もOK */
    font-size: 2.3rem;
  line-height: 1.6;
  color: #3b322b;
  text-align: left;
  z-index: 4;
  background: transparent;
margin-bottom: 105px !important;
          white-space: nowrap;
          position: relative; /* 疑似要素配置用 */
}

.kotatsu-text::after {
    content: "";
    position: absolute;
    top:-2.6em;
    left: -2.5em;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 106 35 / 80%) 0%, /* 中心は濃いめオレンジ */ rgb(255 135 32 / 40%) 40%, /* 徐々に薄く */ rgba(255, 165, 0, 0) 80% /* 外側は透明 */);
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
}





.donyuu {
  background: #f9f0e6; /* 同じ色でシームレス */
  padding: 60px 20px;
  text-align: center;
  font-family: 'Zen Maru Gothic', sans-serif;
  line-height: 1.8;
  color: #3b322b;
}

.donyuu p{
  text-align: center;
  font-size: 1.5rem;
line-height: 3.5rem;
}

.wave-hr {
  width: 100%;
  height: 20px;
  overflow: hidden;
    background: #f9f0e6;
  
}

.wave-hr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.red {
color: #dd2626;
    font-weight: 500;
    line-height: 2.9rem;
    font-size: 1.4em;
    font-family: 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.table-size {
  background-color: #fff; /* ベースは白 */
  padding: 60px 20px;
  position: relative;
  overflow: hidden;

  /* 方眼背景 */
  background-image: 
    repeating-linear-gradient(
      to right,
      transparent 0 19px,
      #cfe8ff 19px 20px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 19px,
      #cfe8ff 19px 20px
    );
  background-size: 20px 20px; /* マス目のサイズ */
}


.table-inner{
  max-width: 900px;
  margin: 0 auto;
}

.ttl2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #3b322b;
  text-align: center;
  margin-bottom: 40px;
      letter-spacing: 0.2rem;
          line-height: 3.9rem;
}



.ttl3 {
	padding: 15px;
	position: relative;
      display: inline-block;
margin: 15px 0;
    
}

.ttl3::before, .ttl3::after {
	content: '';
	width: 15px;
	height: 100%;
	position: absolute;
}

.ttl3::before {
	border-left: dotted 1px #000000;
	border-top: dotted 1px #000000;
	border-bottom: dotted 1px #000000;
	top: 0;
	left: 0;
}

.ttl3::after {
	border-right: dotted 1px #000000;
	border-top: dotted 1px #000000;
	border-bottom: dotted 1px #000000;
	top: 0;
	right: 0;
}



.search{
    background: #f9f0e6; 
        padding: 50px 20px;
}

.search-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

}


.search-inner .ttl2 {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 40px;           /* アイコンと文字の余白 */
    justify-content: center;
}

.ttl2-icon {
  width: 66px;
  height: auto;
  display: inline-block;
}


/* フィルター */
.lineup-container {
  display: none;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}



.product-item {
  border: 1px solid #ddd;
  padding: 8px;
  background: #fff;
}

.product-item img {
  width: 100%;
  display: block;
}


.tab-container {
display: flex;
}

.filter-container {
display: flex;
}

.filter-block {
  display: flex;
  align-items: center; /* 縦位置を中央揃え */
  gap: 20px;           /* 見出しとボタン群の間隔 */
     margin: 20px;
}

.filter-block h3 {
  flex: 0 0 120px;  /* 左見出しの幅を固定（例: 120px） */
  margin: 0;        /* デフォルト余白リセット */
  font-size: 16px;
  font-weight: 700;
}

.filter-block .btn-wrap {
  display: flex;
  flex-wrap: wrap;  /* スマホで折り返し */
  gap: 10px;
}


/* 共通ボタンスタイル */
.tab-btn,
.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;               /* アイコンと文字の間 */
  padding: 8px 16px;
  border: none;
  border-radius: 9999px;  /* 完全な角丸（pill型） */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* デフォルト（未選択時） */
.tab-btn,
.filter-btn {
  background: #ccc;   /* 薄いグレー */
  color: #fff;        /* 白文字 */
}

/* 選択時（active） */
.tab-btn.active,
.filter-btn.active {
  background: #000;   /* 黒ベタ */
  color: #fff;        /* 白文字 */
}

/* ホバー時の軽い演出 */
.tab-btn:hover,
.filter-btn:hover {
  opacity: 0.85;
}

.icon {
  width: 16px;
  height: 16px;
  fill: currentColor;  /* 文字色に合わせる */
}

.icon-family{
  width: 20px;
}





/* 基本スタイル */
.kotatsu-top {
  position: relative;
  overflow: hidden;
}

/* こたつ画像アニメーション */
.kotatsu-img {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 1.5s ease forwards, float 4s ease-in-out infinite;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* 雪 */
.snowflake {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff; /* 薄オレンジ */
  z-index: 0;
  pointer-events: none;
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(0) translateX(0); opacity: 1; }
  100% { transform: translateY(100vh) translateX(30px); opacity: 0; }
}







.head-name {
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}


@media (max-width: 1600px) {

.kotatsu-inner {
    justify-content: flex-start;
      padding: 0 0 0 30px;}

.kotatsu-right {
    padding: 6% 20px 0 4%;
}
}


@media (max-width: 1500px) {

.kotatsu-center {
    padding: 0 0px 0 70px;
}

.kotatsu-text {
    margin-bottom: 8px !important;
}

.kotatsu-left {
    top: -49px;
        transform: translateX(-91%);
    width: clamp(400px, 46vw, 1070px);
}

.kotatsu-title {
    top: 108px;
    margin: 0 40px 0 0;
    width: min(280px, 25vw);
}

}


@media (max-width: 1350px) {
    .kotatsu-inner {
        justify-content: center;
        padding: 140px 20px 70px 0;
        gap: 0;
                flex-wrap: nowrap;
    }

    .kotatsu-left {
        top: -123px;
        transform: translateX(-77%);
        width: clamp(400px, 50vw, 1070px);
    }

    .kotatsu-right {
    width: clamp(400px, 60vw, 1200px);
    }

.kotatsu-top {
min-height: auto;
    padding: 0;
}

.kotatsu-top {
    padding: 30px 0 10px;
}




}


@media (max-width: 1050px) {
.kotatsu-text {
    font-size: 2rem;
}
}


@media (max-width: 930px) {
.kotatsu-text {
    font-size: 1.5rem;
}

.kotatsu-text::after {
    width: 100px;
    height: 100px;
}

    .kotatsu-center {
        padding: 0px;
    }
        .kotatsu-title {
        top: 88px;
        margin: 0 20px 0 0;
}
    .kotatsu-right {
        padding: 4% 20px 0 3%;
    }
}




@media (max-width: 768px) {

.ttl2-icon {
    width: 36px;
}


.lineup-container {
    gap: 10px;
}
  /* フィルター */
  .lineup-container {
    grid-template-columns: repeat(2, 1fr);
  }

/* トップ */

 .kotatsu-top{ padding: 40px 0; }
  .kotatsu-inner{
flex-direction: column-reverse;
    gap: 18px;
    align-items: center;
            padding: 40px 20px 40px 0;
            align-items: flex-end;
            
  }

  /* 中央基準内の左画像は通常の流れに戻す */
  .kotatsu-left{
            transform: translateX(-52%);
    position: static;
    width: 80%;
        margin: 0px auto 22px;
    top: auto;
    left: auto;
  }

  .kotatsu-title{
    width: 35%;
            top: 96px;
    max-width: none;
  }

  .kotatsu-right{
        width: 96%;
        right: -60px;
  }

  .kotatsu-text{
    position: static;
    transform: none;
    right: auto;
    width: 100%;
text-align: left;
    margin-top: 8px;
            padding: 0 0 0 60px;
  }
  .kotatsu-center {
    justify-content: flex-start;
        width: 100%;
            margin: 60px 0 0 140px;
  }
  .kotatsu-text::after {
    top: -1.6em;
    left: 1.5em;
  }
  .kotatsu-text {
        font-size: 1.9rem;
    }

.ttl2 {
    font-size: 1.8rem;  
        line-height: 2.5rem;
}

.table-size {
    padding: 40px 15px;
}

.red {
    line-height: 2rem;
    font-size: 1.4rem;
}

.search {
    padding: 40px 15px;
}
.search-inner {
    padding: 20px 0;
}
}

@media (max-width: 500px) {
.kotatsu-center{
display: none;
}
}


@media (max-width: 490px) {
    .kotatsu-inner {
        padding: 58px 20px 20px 0;
    }

        .kotatsu-title {
        width: 41%;
        top: 82px;
        }

            .kotatsu-right {
        width: 105%;
            }

            .kotatsu-left {
        margin: 0px auto 5px;
            }
}