@charset "UTF-8";

/**----共通　--------------------**/
body {
  font-family: "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #222;
}

.inner {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(8px, 7vw, 42px);
}

.foot- {
  text-align: center !important;
  font-size: 12px !important;
}

ul {
  list-style: none;
}
span{
  color: #c8161e;
}
::selection {
  background: #ebe3dd;
  color: #F08437;
}

/* for Firefox */
::-moz-selection {
  background: #ebe3dd;
  color: #F08437;
}
.orange {
  color: #F08437;
}
.title{
  padding: 64px 0 32px;
}
h3{
  color: #c8161e;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 20px;
}
a {
  text-decoration: none;
  color: #222;
}
img {
  width: 100%;
  height: auto;
}
.title img{
  display: block;
}
/**----表示・非表示　--------------------**/
.shop-image img {
  display: block;
  width: 100%;
}

/* PC表示 */
.sp-only {
  display: none;
}



/**----画像アスペクト指定　--------------------**/
.gallery-top img{
  aspect-ratio: 713 / 931;
}
.service img{
  aspect-ratio: 607 / 604;
}
.img-box img {
  aspect-ratio: 675 / 440;
}
.web-special {
  aspect-ratio: 1920 / 299;
}
.gallery-bottom .gallery-item {
  aspect-ratio: 471 / 656;
  overflow: hidden;
}


/**----画像アスペクト指定終了　--------------------**/
footer a {
  text-decoration: none;
  color: #fff;
}

footer a:visited {
  color: #ffff;
}


/**----メインビジュアル　----------**/
#mv img {
  display: block;
}

/*-------　CTA2種ボタン　--------------------*/
.btn-flex{
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  padding-top: 10px;
}
.flex-btn img{
  display: block;
}
.left-padding{
  padding-left: 24px;
}
.flex-btn img:hover{
  opacity:0.7;
	transition:0.3s;
}


/*----------　下固定ボタン　--------------------*/
.fixed-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px;                 /* ← 白線の外に9px */
  background-color: #94252a;    /* ← 見せたい赤 */
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 14px;
}

.fixed-btn {
  width: 100%;
  height: 40px;                 /* 高さ固定 */
  background-color: #94252a;
  border: 2px solid #fff;       /* 白線 */
  border-radius: 10px;
  box-sizing: border-box;
}
.fixed-btn img {
  margin: 0 auto;
  padding: 5px 0;
  width: 480px;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* shine アニメーション */
.s_shine_01 figure {
  position: relative;
}

.s_shine_01 figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  bottom: 0;
  width: 50%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.3));
  transform: skewX(-25deg);
}

.s_shine_01 figure:hover::before {
  animation: shine .75s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}


/**----日程　--------------------**/
.nittei{
  padding: 24px 0;
}
.sale-header {
  display: flex;
  align-items: center;
  gap: 72px;
  justify-content:center;
  width: 100%;
}
.line-box {
  border-top: 4px solid #c9151e;
  border-bottom: 4px solid #c9151e;
}
.sale-label {
  background: #c9151e;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: bold;
  padding: 8px 64px 8px 16px;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
}

.sale-date {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
}

.month {
  font-size: clamp(24px, 4vw, 48px);
  color: #222;
}

.slash {
  font-size: clamp(20px, 3.5vw, 40px);
  margin: 0 10px;
  color: #222;
}

.event-day {
  font-size: 72px;
}

.start {
  color: #0b57a4;
}

.end {
  color: #c9151e;
}

.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  margin-left: 16px;
}

.circle.red {
  background: #c9151e;
}

.circle.blue {
  background: #0b57a4;
}

.arrow {
  font-size: 28px;
  margin: 0 24px;
  color: #222;
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* 店舗 */
.store-list {
  display: flex;
  gap: 60px;
  justify-content:center;
  padding-bottom: 10px;
}

.store-detail {
  display: flex;
  align-items: center;
  gap: 20px;
}

.store-name {
  color: #222;
  font-size: 24px;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.map-btn {
  background: #0b57a4;
  color: #fff;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.map-btn:hover{
  background: #0f76dd;
}

/**----日程終了　--------------------**/

/**----日程　--------------------**/
/* .sale-wrap {
  border-top: 3px solid #c8161e;
  border-bottom: 3px solid #c8161e;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 25px;
  margin: 24px auto;
}

.sale-tag {
  background: #c8161e;
  color: #fff;
  padding: 6px 50px 6px 10px;
  font-weight: bold;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
}

.shop {
  font-size: 25px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  justify-content: space-around;
}

.date {
  color: #c8161e;
}
.date2 {
  color: #004ea2;
}

.map {
  background: #004ea2;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
}
.map:hover {
  background: #006adb;
  color: #fff;
  transition: 0.3s;
} */


/**----五大特典　--------------------**/

.special{
  background-color: #c8161e;
  padding-bottom: 48px;
}

.web-special img {
  width: 100%;
  height: 100%;
}

/* .special-detail{
  padding: 40px 0;
} */
.chicket-detail{
  border: solid 2px #fff;
  padding: 40px 32px;
}
/*特典1ボタン*/
.koizumi-catalog-btn:hover{
  opacity:0.9;
	transition:0.3s;
}
/* ギャラリー全体 */
.grid-gallery {
    display: grid;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 0;
  }
.grid-gallery img{
  display: block;
}
  /* 上段 2列 */
  .gallery-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 下段 3列 */
  .gallery-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .grid-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }

.gallery-bottom .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/**----おすすめイチオシ商品　----------**/
.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
  gap: 20px; /* 画像と画像の間の余白 */
  margin: 0 auto;
}

.item img {
  width: 100%;
  height: auto;
  display: block;
}
.item h3 {
  margin: 16px auto 0;
  text-align: center;
}
.item p {
  margin-top: 10px;
  font-size: 1rem;
  width: 95%;
  margin: 0 auto;
}
.koizumi-btn{
  padding-top: 32px;
}
.koizumi-btn img:hover{
  opacity:0.7;
	transition:0.3s;
}
.koizumi-font{
  font-size: 18px;
}


/**----湯川家具サービス　--------------------**/
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
  gap: 20px; /* 画像と画像の間の余白 */
  margin: 0 auto;
}

.service img {
  width: 100%;
  height: auto;
  display: block;
}

.service p {
  width: 85%;
  margin: 16px auto 0;
}


/**----湯川家具について　--------------------**/

.company-image img{
  padding-top: 64px;
  display: block;
}
  .img-box {
    display: flex;
    flex-wrap: wrap; /* 折り返しONで2×2に */
    justify-content: center;
    gap: 20px; /* 画像の間隔 */
    padding: 24px 0;
  }

  .img-box img {
    width: calc(50% - 10px); /* 横2列になるように調整（gap分を引く） */
    height: auto;
  }

/*表*/
.company-detail table {
  margin: 0 auto;
  border-collapse: collapse; /* 隣り合うセルの線を結合 */
  width: 100%;
}
.yukawa-detail th {
  background: #ecebe4;
  border: solid 1px #ccc;
  padding: 16px;
  text-align: left;
}
.yukawa-detail td {
  border: solid 1px #ccc;
  padding: 16px;
}


/**----店舗紹介　--------------------**/
.eventday-flex{
  display: flex;
  border: solid 2px #c8161e;
  font-size: 25px;
  font-weight: 600;
  margin: 56px 0 32px;
  width: 100%;
}
.eventday.is-first .eventday-flex {
  margin-top: 0;
}

.eventday-flex p{
  text-align: center;
  padding: 0.2em 0;
  display: block;
}
.event{
  width: 30%;
  background-color: #c8161e;
  color: #fff;
}
.day{
  margin: 0 auto;
}


/*mail*/
.mail-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c8161e;
  text-decoration: none;
  padding-left: 2%;
}
.mail-icon {
  width: 32px;
  height: auto;
}

.mail-address {
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 700;
  color: #c8161e;
  text-decoration: none;
}

.mail-address:hover {
  text-decoration: underline;
}

/*表*/
.shop-detail {
  margin-top: 8px;
  border-collapse: collapse; /* 隣り合うセルの線を結合 */
  width: 100%;
}
.shop-detail th {
  background: #ecebe4;
  border: solid 1px #ccc;
  padding: 16px;
  text-align: left;
}
.shop-detail td {
  border: solid 1px #ccc;
  padding: 16px;
}
footer .copy {
  text-align: center;
  font-size: 12px;
  margin: 40px 0 72px;
}



@media screen and (min-width:1024px) {
  .pc-none {
    display: none;
  }
}

@media screen and (max-width:1024px) {

  /* タブレット向けスタイル　*/
  .tb-none {
    display: none;
  }
/**----共通　--------------------**/
  .inner {
    /* width: 750px; */
    max-width: 100%;
    margin: 0 auto;
  }

  .title{
  padding: 48px 0 24px;
}

/**----日程　--------------------**/
.event-day {
  font-size: 56px;
}
.sale-header {
  display: flex;
  align-items: center;
  gap: 48px;
  justify-content:center;
  width: 100%;
}
/*----------　下固定ボタン　--------------------*/
.fixed-btn img {
  margin: 0 auto;
  padding: 7px 0;
  width: 400px;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* .sale-wrap {
  border-top: 3px solid #c8161e;
  border-bottom: 3px solid #c8161e;
  padding: 20px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 20px;
  margin: 24px auto;
}
.sale-tag {
  font-size: 16px;
  background: #c8161e;
  color: #fff;
  padding: 6px 25px 6px 5px;
  font-weight: bold;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
}

.shop {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  justify-content: space-around;
}

.date {
  color: #c8161e;
}
.date2 {
  color: #004ea2;
}

.map {
  background: #004ea2;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
}
.map:hover {
  background: #006adb;
  color: #fff;
  transition: 0.3s;
} */


/**----おすすめイチオシ商品　----------**/
.item p {
  margin-top: 10px;
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
}
.koizumi-font{
  font-size: 16px;
}


/**----湯川家具サービス　--------------------**/
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
  gap: 16px; /* 画像と画像の間の余白 */
  margin: 0 auto;
}
.service p {
  width: 90%;
  margin: 16px auto 0;
}


/**----湯川家具について　--------------------**/

.company-image img{
  padding-top: 48px;
  display: block;
}


/**----店舗紹介　--------------------**/
.eventday-flex{
  display: flex;
  border: solid 2px #c8161e;
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 24px;
  width: 100%;
}
}



@media screen and (min-width:767px) {
  .tbpc-none {
    display: none !important;
  }
}

@media screen and (max-width:767px) {
  /**----表示・非表示　--------------------**/
  .pc-only { display: none; }
  .sp-only { display: block; }

  .sp-none {
    display: none !important;
  }
  .mail-wrap { display: none; }

/**----表示・非表示終了　--------------------**/

/**----共通　--------------------**/
  .inner {
  width: 550px;
  max-width: 100%;
  margin: 0 auto;
  /* padding: 0 clamp(8px, 7vw, 42px); */
}

/**----画像アスペクト指定　--------------------**/
.service img{
  aspect-ratio: 607 / 604;
}
.web-special {
  aspect-ratio: 767 / 244;
}
.gallery-top img{
  aspect-ratio: 633 / 828;
}
.gallery-bottom .gallery-item {
  aspect-ratio: 633 / 828;
  overflow: hidden;
}
.gallery-bottom .gallery-item.special5{
  aspect-ratio: 668 / 827;
  overflow: hidden;
}
/*----------　下固定ボタン　--------------------*/

.fixed-btn {
  width: 100%;
  height: 50px;                 /* 高さ固定 */
  background-color: #94252a;
  border: 2px solid #fff;       /* 白線 */
  border-radius: 10px;
  box-sizing: border-box;
}
.fixed-btn img {
  margin: 0 auto;
  padding: 13px 0;
  width: 350px;
  height: 100%;
  object-fit: contain;
  display: block;
}
/**----日程　--------------------**/
.nittei {
    padding: 16px 0;
  }
  .sale-header {
    flex-direction: column;
    gap: 0px;
  }
  .sale-label {
    padding: 4px 40px 16px 40px;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  }

  .sale-date {
    flex-wrap: wrap;
    justify-content: center;
  }
  .slash {
    margin: 0 6px;
  }

  .circle {
    width: 36px;
    height: 36px;
    margin-left: 8px;
  }
  .arrow {
    margin: 0 12px;
  }

/* 店舗全体を2段構成に */
  .store-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
    justify-items: center;
    max-width: 450px;
    margin: 0 auto;
  }

  .store-detail {
    flex-direction: column;
    gap: 6px;
  }

  /* 店名 */
  .store-name {
    text-align: center;
    font-size: clamp(20px, 4vw, 24px);
  }

  /* MAPボタンを下に */
  .map-btn {
    padding: 6px 10px;
  }


/**----日程　--------------------**/

  /* .sale-wrap {
    margin: 24px auto;
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
    justify-items:start;
    align-items: stretch;
    justify-content:center;
  }
  .sale-tag {
    margin-right: clamp(0px,4vw,60px);
    font-size: clamp(14px, 4vw, 16px);
    padding: 6px 15px 6px 0px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%);
  }
  .col1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
  }
  .col2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .col3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .shop {
    font-size: clamp(16px, 4vw, 18px);
    justify-content:flex-start;
  } */


/*----五大特典 --------------*/
.special{
  background-color: #c8161e;
  padding-bottom: 24px;
}
  .gallery-top,
  .gallery-bottom {
    grid-template-columns: 1fr;
  }
  .chicket-detail{
    border: none;
    padding: 0px;
  }
/* ギャラリー全体 */
.grid-gallery {
    padding: 24px 0;
  }

/*-------　CTA2種ボタン　--------------------*/
  .btn-flex{
    flex-direction: column; /* 縦並び */
    }

  .left-padding{
    padding-left: 0;   /* 横余白を解除 */
    margin-top: 16px;  /* ボタン間の縦余白 */
  }


/**----おすすめイチオシ商品　----------**/
  .item-grid {
    grid-template-columns: 1fr; /* 1列に */
  }


/**----湯川家具サービス　----------**/
  .service-grid {
    grid-template-columns: 1fr; /* 1列に */
  }


/**----湯川家具について　----------**/
/* 767px以下で縦1列に */
  .img-box {
    flex-direction: column;
    align-items: center;
  }

  .img-box img {
    width: 100%;
  }
/*表*/
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .yukawa-detail {
    width: 80%;
  }
  .yukawa-detail th,
  .yukawa-detail td {
    border-bottom: none;
    display: block;
    width: 100%;
  }


/**----店舗紹介　--------------------**/
/*表*/
.shop-detail {
  margin-top: 8px;
  border-collapse: collapse; /* 隣り合うセルの線を結合 */
  width: 100%;
}
.shop-detail th {
  background: #ecebe4;
  border: solid 1px #ccc;
  padding: 16px 6px;
  text-align: left;
}
.shop-detail td {
  border: solid 1px #ccc;
  padding: 16px 6px;
}
footer .copy {
  text-align: center;
  font-size: 12px;
  margin: 40px 0 72px;
}
.shop-image-sp img{
  width: 90%;
  margin: 16px auto;
}


}