@charset "utf-8";
/* CSS Document */
/* ギャラリーを右から左へ流す */
.main-wrap .section06 .gallery.gallery-marquee {
  --gallery-gap: 16px;
  --gallery-width: clamp(220px, 24vw, 420px);

  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.gallery-marquee .gallery-track {
  display: flex;
  width: max-content;
  animation: gallery-flow 40s linear infinite;
}

.gallery-marquee .gallery-group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--gallery-gap);
  padding-right: var(--gallery-gap);
}

.main-wrap .section06 .gallery-marquee .item {
  flex: 0 0 var(--gallery-width);
  width: var(--gallery-width);
  margin: 0;
}

.main-wrap .section06 .gallery-marquee .item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@keyframes gallery-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


@media screen and (max-width: 768px) {
  .main-wrap .section06 .gallery.gallery-marquee {
    --gallery-gap: 12px;
  }
}

/* 動きを減らす設定の場合は手動スクロール */
@media (prefers-reduced-motion: reduce) {
  .main-wrap .section06 .gallery.gallery-marquee {
    overflow-x: auto;
  }

  .gallery-marquee .gallery-track {
    animation: none;
  }

  .gallery-marquee .gallery-group[aria-hidden="true"] {
    display: none;
  }
}

.main-wrap {
  background-color: #fffbf2;
}
.section .inner {
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
  max-width: 1300px;
}
.badge {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: #c83c1e;
  flex-shrink: 0;
}
.badge .icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.badge p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17px;
  font-size: 15px;
  line-height: 33px;
  letter-spacing: 0.06em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.title_row {
  gap: 30px;
}
.title_row .title .default_title2 {
  padding-top: 10px;
}
.btns {
  gap: 16px;
}
/* ---------- fv ---------- */
.fv {
  position: relative;
  width: 100%;
  height: 810px;
  overflow: hidden;
  background-color: #fffbf2;
}
.fv .fv_img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fv .fv_img .swiper-container, .fv .fv_img .swiper-wrapper, .fv .fv_img .swiper-slide {
  width: 100%;
  height: 100%;
}
.fv .fv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fv .fv_deco {
  position: absolute;
  left: 77.5%;
  bottom: 15px;
  width: 179px;
  height: 290px;
  z-index: 2;
  pointer-events: none;
}
.fv .fv_deco img {
  width: 179px;
  height: 290px;
  display: block;
}
.fv .fv_copy {
  position: absolute;
  left: 160px;
  top: 274px;
  display: flex;
  align-items: flex-start;
  gap: 25px;
  z-index: 2;
}
.fv .fv_copy h1, .fv .fv_copy .sub {
  writing-mode: vertical-rl;
  font-weight: 900;
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: 0.101em;
  color: #fff;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.fv .fv_copy .en {
  writing-mode: vertical-rl;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: 0.213em;
  color: #fff;
  margin-top: 0;
}
.fv .scroll {
  position: absolute;
  right: 47px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.fv .scroll p {
  writing-mode: vertical-rl;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.8);
}
.fv .scroll .line {
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.5);
}
body.gjs-dashed .fv,body.gjs-dashed .fv .fv_img .swiper-container,body.gjs-dashed .fv .fv_img .swiper-wrapper,body.gjs-dashed .fv .fv_img .swiper-slide{
  height: auto!important;
}
body.gjs-dashed .fv .fv_img {
  position: relative;
}

/* ---------- section01 Instagram ---------- */
.section01 {
  padding: 80px 0;
}
.section01 .head {
  width: 100%;
}
.section01 .titlebox {
  gap: 10px;
}
.section01 .titlebox .icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;

}
.section01 .titlebox .icon img {
  width: 40px;
  height: 40px;
  display: block;
}
.section01 .titlebox h2 {
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: 0.133em;
  color: #c83c1e;
}
.section01 .webgene-blog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}
.section01 .webgene-item {
  width: calc((100% - 32px) / 5);
}
.section01 .webgene-item a, .section01 .webgene-item .imgbox {
  display: block;
  width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.section01 .webgene-item .imgbox img {
  width: 100%;
  height: 100%;
  display: block;
	object-fit: cover;
}
/* ---------- section02 Message ---------- */
.section02 {
  padding: 130px 0 110px;
  overflow: hidden;
}
.section02 .inner {
  position: relative;
}
.section02 .deco {
  position: absolute;
  right: 0;
  top: 68px;
  width: 534px;
  height: 534px;
  pointer-events: none;
  z-index: 0;
}
.section02 .deco img {
  width: 534px;
  height: 534px;
  display: block;
}
.section02 .contents {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  padding-right: 80px;
}
.section02 .left {
  gap: 80px;
  align-items: flex-start;
}
.section02 .vlabel {
  width: 38px;
  padding: 12px;
  border: 1px solid #000;
  box-sizing: border-box;
  flex-shrink: 0;
}
.section02 .vlabel p {
  writing-mode: vertical-rl;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.171em;
  color: #000;
  text-align: center;
}
.section02 .txtbox {
  width: 580px;
  max-width: 100%;
}
.section02 .txtbox .en {
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.156em;
  color: #000;
}
.section02 .txtbox h2 {
  padding: 30px 0;
  font-size: 24px;
  line-height: 44px;
  letter-spacing: 0.092em;
  color: #000;
}
.section02 .txtbox .txt {
  padding-bottom: 30px;
  line-height: 36px;
}
.section02 .vttl {
  display: flex;
  gap: 16px;
  padding-top: 0;
  flex-shrink: 0;
}
.section02 .vttl p {
  writing-mode: vertical-rl;
  font-size: 42px;
  line-height: 52px;
  letter-spacing: 0.257em;
  color: #000;
  text-align: center;
}
.section02 .vttl p:first-of-type {
  padding-top: 30px;
}
/* ---------- section03 Ochaya ---------- */
.section03 {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
}
.section03 .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section03 .txtbox {
  position: relative;
  z-index: 1;
  width: 480px;
  max-width: 100%;
}
.section03 .badge .icon {
  top: 26px;
  width: 22px;
  height: 18px;
}
.section03 .badge .icon img {
  width: 22px;
  height: 18px;
  display: block;
}
.section03 .txt {
  padding: 40px 0;
  color: rgba(51, 51, 51, 0.85);
  line-height: 33px;
}
/* ---------- section04 Frozen ---------- */
.section04 {
  padding: 130px 0;
}
.section04 .inner {
  gap: 90px;
}
.section04 .imgbox {
  width: 520px;
  max-width: 100%;
  flex-shrink: 0;
}
.section04 .photo {
  width: 100%;
  border-radius: 330px;
  overflow: hidden;
}
.section04 .photo img {
  width: 100%;
  height: auto;
  display: block;
}
.section04 .txtbox {
  width: 530px;
  max-width: 100%;
}
.section04 .badge .icon {
  top: 24px;
  width: 16px;
  height: 21px;
}
.section04 .badge .icon img {
  width: 16px;
  height: 21px;
  display: block;
}
.section04 .txt {
  padding: 40px 0;
  line-height: 33px;
}
/* ---------- section05 Shop ---------- */
.section05 {
  padding: 0 0 130px;
}
.section05 .shop_img {
  width: calc(100% - 160px);
  max-width: 1320px;
  margin: 0 auto;
}
.section05 .shop_img img {
  width: 100%;
  height: auto;
  display: block;
}
.section05 .inner {
  padding-top: 60px;
}
.section05 .txtbox, .section05 .infobox {
  width: 50%;
}
.section05 .txtbox h2 {
  padding-top: 10px;
}
.section05 .lead {
  padding: 30px 0;
  font-size: 16px;
  line-height: 1.575;
  letter-spacing: 0.052em;
}
.section05 .sns {
  display: block;
  width: 26px;
  height: 26px;
}
.section05 .sns img {
  width: 26px;
  height: 26px;

  display: block;
}
.section05 .infobox .row {
  width: 100%;
  max-width: 570px;
  padding: 16px 0;
  border-bottom: 1px solid #d4c9b0;
  align-items: flex-start;
}
.section05 .infobox .th {
  width: 96px;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.056em;
  color: #333;
}
.section05 .infobox .colon {
  width: 16px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 21px;
  color: #8a7e6a;
}
.section05 .infobox .td {
  flex: 1;
  font-size: 15px;
  line-height: 1.68;
  letter-spacing: 0.056em;
  color: #333;
}
.section05 .btns {
  padding-top: 40px;
}
/* ---------- section06 Gallery ---------- */
.section06 {
  overflow: hidden;
}
.section06 .gallery {
  gap: 16px;
  padding-left: 80px;
}
.section06 .item {
  width: 320px;
  flex-shrink: 0;
}
.section06 .item img {
  width: 100%;
  height: auto;
  display: block;
}
/* ---------- section07 News ---------- */
.section07 {
  padding: 120px 0;
}
.section07 .head {
  width: 100%;
}
.section07 .titlebox h2 {
  padding-top: 10px;
}
.section07 .webgene-blog {
  margin-top: 60px;
}
.section07 .webgene-item a {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 28px 0;
  border-bottom: 1px solid #d4c9b0;
}
.section07 .webgene-item .date {
  width: 140px;
  flex-shrink: 0;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075em;
  color: #8a7e6a;
}
.section07 .webgene-item .cate {
  width: 120px;
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid #c83c1e;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.051em;
  color: #c83c1e;
  text-align: center;
  box-sizing: border-box;
}
.section07 .webgene-item .ttl {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 0.06em;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section07 .webgene-item a img {
  width: 16px;
  height: 10px;
  flex-shrink: 0;
  display: block;
}
.section07 .webgene-item.on, .section01 .webgene-item.on {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(6px);
}
.section07 .webgene-item.on.active, .section01 .webgene-item.on.active {
  animation-name: blurin2;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
/* ---------- section08 Furusato ---------- */
.section08 {
  position: relative;
  padding: 70px 80px;
  overflow: hidden;
}
.section08 .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section08 .bg .color {
  position: absolute;
  inset: 0;
  background-color: #fff0dd;
}
.section08 .bg .photo {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}
.section08 .item {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.section08 .item1 {
  left: 8.11%;
  top: 8px;
  width: 22.09%;
}
.section08 .item2 {
  right: 6.69%;
  top: 12px;
  width: 23.24%;
}
.section08 .inner {
  position: relative;
  z-index: 2;
  padding: 0;
  text-align: center;
}
.section08 .sec_label {
  justify-content: center;
}
.section08 .sec_label .line {
  width: 40px;
  background-color: #b28437;
}
.section08 .sec_label .en_title2 {
  font-weight: 400;
  font-size: 18px;
  color: #b28437;
}
.section08 h2 {
  padding: 30px 0;
  line-height: 38px;
  letter-spacing: 0.125em;
  color: #000;
}
.section08 .btns {
  gap: 20px;
}
.section08 .more a {
  min-width: 226px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px) {
  .section .inner {
    padding-left: 60px;
    padding-right: 60px;
  }
  .fv .fv_copy {
    left: 80px;
  }
  .fv .fv_deco {
    left: auto;
    right: 120px;
    width: 140px;
    height: 227px;
  }
  .fv .fv_deco img {
    width: 140px;
    height: 227px;
  }
  .section02 .contents {
    padding-right: 0;
  }
  .section02 .deco {
    width: 420px;
    height: 420px;
    right: 40px;
  }
  .section02 .deco img {
    width: 420px;
    height: 420px;
  }
  .section04 .inner {
    gap: 50px;
  }
  .section04 .imgbox {
    width: 44%;
  }
  .section05 .shop_img {
    width: calc(100% - 120px);
  }
  .section06 .gallery {
    padding-left: 60px;
  }
  .section08 {
    padding: 70px 60px;
  }
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px) {
  .fv {
    height: 680px;
  }
  .fv .fv_copy {
    left: 50px;
    top: 220px;
  }
  .fv .fv_copy h1, .fv .fv_copy .sub {
    font-size: 32px;
  }
  .section01 .webgene-item {
    width: calc((100% - 24px) / 4);
  }
  .section02 {
    padding: 100px 0 80px;
  }
  .section02 .left {
    gap: 40px;
  }
  .section02 .txtbox .en {
    font-size: 48px;
  }
  .section02 .vttl p {
    font-size: 32px;
    line-height: 42px;
  }
  .section03, .section04 {
    padding: 100px 0;
  }
  .section04 .inner {
    flex-direction: column;
  }
  .section04 .imgbox, .section04 .txtbox {
    width: 100%;
  }
  .section05 .inner {
    flex-direction: column;
    gap: 40px;
  }
  .section05 .txtbox, .section05 .infobox {
    width: 100%;
  }
  .section07 {
    padding: 100px 0;
  }
  .section08 .item {
    opacity: 0.35;
  }
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px) {
  .section .inner {
    padding-left: 50px;
    padding-right: 50px;
  }
  .fv {
    height: 560px;
  }
  .fv .fv_copy {
    left: 30px;
    top: 180px;
    gap: 16px;
  }
  .fv .fv_copy h1, .fv .fv_copy .sub {
    font-size: 26px;
  }
  .fv .fv_deco {
    right: 50px;
    bottom: 20px;
    width: 90px;
    height: 146px;
  }
  .fv .fv_deco img {
    width: 90px;
    height: 146px;
  }
  .fv .scroll {
    right: 20px;
    bottom: 30px;
  }
  .section01 .head, .section07 .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .section02 .contents {
    flex-direction: column;
    gap: 40px;
  }
  .section02 .deco {
    width: 280px;
    height: 280px;
    top: auto;
    bottom: 0;
    right: 20px;
  }
  .section02 .deco img {
    width: 280px;
    height: 280px;
  }
  .section02 .vttl {
    padding-left: 118px;
  }
  .section03 .txtbox {
    width: 100%;
  }
  .section05 .shop_img {
    width: calc(100% - 100px);
  }
  .section06 .gallery {
    padding-left: 50px;
  }
  .section06 .item {
    width: 240px;
  }
  .section07 .webgene-item a {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .section07 .webgene-item .date {
    width: auto;
  }
  .section07 .webgene-item .cate {
    width: auto;
  }
  .section07 .webgene-item .ttl {
    width: 100%;
    order: 3;
    white-space: normal;
  }
  .section07 .webgene-item a img {
    margin-left: auto;
    order: 2;
  }
  .section08 {
    padding: 60px 50px;
  }
  .section08 .item {
    display: none;
  }
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px) {
  .section .inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .fv {
    height: 520px;
  }
  .fv .fv_copy {
    left: 20px;
    top: 160px;
    gap: 12px;
  }
  .fv .fv_copy h1, .fv .fv_copy .sub {
    font-size: 22px;
  }
  .fv .fv_copy .en {
    font-size: 14px;
  }
  .fv .fv_deco {
    right: 30px;
    bottom: 16px;
    width: 70px;
    height: 113px;
  }
  .fv .fv_deco img {
    width: 70px;
    height: 113px;
  }
  .section01, .section07 {
    padding: 80px 0;
  }
  .section01 .titlebox h2 {
    font-size: 22px;
  }
  .section01 .webgene-item {
    width: calc((100% - 8px) / 2);
  }
  .section01 .webgene-item:nth-of-type(n+5) {
    display: none;
  }
  .section02 {
    padding: 80px 0 60px;
  }
  .section02 .left {
    flex-direction: column;
    gap: 20px;
  }
  .section02 .txtbox .en {
    font-size: 40px;
    letter-spacing: 0.08em;
  }
  .section02 .vttl {
    padding-left: 0;
  }
  .section02 .vttl p {
    font-size: 24px;
    line-height: 32px;
  }
  .section03, .section04 {
    padding: 80px 0;
  }
  .title_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .section04 .photo {
    border-radius: 200px;
  }
  .section05 {
    padding-bottom: 80px;
  }
  .section05 .shop_img {
    width: calc(100% - 40px);
  }
  .section05 .btns, .section04 .btns, .section08 .btns {
    flex-direction: column;
    align-items: flex-start;
  }
  .section06 .gallery {
    padding-left: 20px;
    gap: 10px;
  }
  .section06 .item {
    width: 200px;
  }
  .section08 {
    padding: 50px 20px;
  }
  .section08 h2 {
    padding: 20px 0;
    line-height: 1.5;
  }
  .section08 .btns {
    align-items: center;
  }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px) {
  .fv .fv_copy h1, .fv .fv_copy .sub {
    font-size: 18px;
  }
  .section01 .webgene-item {
    width: 100%;
  }
}
/* index.cssの一番下に追加。top-main.htmlのhome-pageクラスとセットで使用。 */
.home-page .inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.home-page .txtbox, .home-page .title, .home-page .infobox {
  min-width: 0;
}
.home-page h2 > span {
  display: inline-block;
}
.home-page .btns {
  flex-wrap: wrap;
}
.home-page .title_row {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.home-page .badge {
  border-radius: 0;
  padding: 0;
}
.home-page .section04 > .inner {
  flex-wrap: nowrap;
  gap: clamp(28px, 5vw, 70px);
}
.home-page .section04 .imgbox {
  width: 44%;
}
.home-page .section04 .txtbox {
  flex: 1;
  width: auto;
}
.home-page .section02 .contents {
  flex-wrap: nowrap;
  gap: 36px;
}
.home-page .section02 .left {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  gap: clamp(24px, 4vw, 60px);
}
.home-page .section02 .txtbox {
  width: auto;
  flex: 1;
  min-width: 0;
}
.home-page .section02 .vttl {
  flex-wrap: nowrap;
}
.home-page .section01 .webgene-blog {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.home-page .section01 .webgene-item {
  width: auto;
  min-width: 0;
}
.home-page .section01 .webgene-item .imgbox img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.home-page .section05 .infobox .row {
  margin: 0;
  flex-wrap: nowrap;
}
.home-page .section05 .infobox .td {
  min-width: 0;
  overflow-wrap: anywhere;
}
.home-page .section06 .gallery {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  padding-bottom: 12px;
  padding-right: 20px;
  scroll-snap-type: x proximity;
}
.home-page .section06 .item {
  flex: 0 0 280px;
  width: 280px;
  scroll-snap-align: start;
}
.home-page .section06 .item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.home-page .section08 > .inner {
  width: min(100%, 510px);
}
.home-page .section08 h2 {
  text-align: left;
}
.home-page .section08 .btns {
  justify-content: flex-start;
}
.home-page .section08 .sec_label > .line:last-child {
  display: none;
}
.home-page .section08 .item1 {
  left: 2%;
  width: 23%;
}
.home-page .section08 .item2 {
  right: 2%;
  width: 23%;
}
@media (max-width: 1080px) {
  .home-page .section > .inner {
    padding-left: 32px;
    padding-right: 32px;
  }
  .home-page .section02 .contents {
    flex-direction: column;
    gap: 32px;
    padding-right: 0;
  }
  .home-page .section02 .left {
    width: 100%;
  }
  .home-page .section02 .vttl {
    align-self: flex-end;
    padding-left: 0;
  }
  .home-page .section02 .deco {
    top: auto;
    bottom: 0;
    opacity: .55;
  }
  .home-page .section04 > .inner {
    flex-direction: column !important;
    align-items: stretch;
    gap: 32px;
  }
  .home-page .section04 .imgbox {
    order: -1;
    width: min(100%, 480px);
    margin: 0 auto;
  }
  .home-page .section04 .txtbox {
    flex: none;
    width: 100%;
  }
  .home-page .section05 > .inner {
    flex-direction: column;
    gap: 28px;
  }
  .home-page .section05 .txtbox, .home-page .section05 .infobox {
    width: 100%;
  }
  .home-page .section05 .infobox .row {
    max-width: none;
  }
  .home-page .section08 .item {
    display: none;
  }
}
@media (max-width: 768px) {
  .home-page .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .home-page .section > .inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .home-page .section01 .head, .home-page .section07 .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
    .home-page .section01 .webgene-blog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .home-page .section01 .webgene-item,
  .home-page .section01 .webgene-item:nth-of-type(n+5) {
    display: block;
    width: 100%;
    min-width: 0;
    scroll-snap-align: none;
  }

  .home-page .section01 .webgene-item .imgbox img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .home-page .section02 .left {
    flex-direction: column;
    gap: 20px;
  }
  .home-page .section02 .txtbox {
    width: 100%;
  }
  .home-page .section02 .vlabel {
    width: auto;
    padding: 6px 12px;
  }
  .home-page .section02 .vlabel p {
    writing-mode: horizontal-tb;
    line-height: 1.5;
  }
  .home-page .section02 .txtbox .en {
    font-size: clamp(32px, 7vw, 48px);
  }
  .home-page .section02 .txtbox h2 {
    padding: 20px 0;
  }
  .home-page .section02 .txtbox .txt {
    line-height: 2;
  }
  /* 商品写真を文章の上に分離し、文字との重なりを防ぐ */
  .home-page .section03 {
    padding-top: 0;
  }
  .home-page .section03 > .bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: right center;
  }
  .home-page .section03 > .bg > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }
  .home-page .section03 > .inner {
    padding-top: 32px;
  }
  .home-page .section03 .txtbox {
    width: 100%;
  }
  .home-page .title_row {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .home-page .badge {
    width: 76px;
    height: 76px;
  }
  .home-page .badge p {
    bottom: 8px;
    font-size: 12px;
  }
  .home-page .section03 .badge .icon, .home-page .section04 .badge .icon {
    top: 16px;
  }
  .home-page .section03 .txt, .home-page .section04 .txt {
    padding: 24px 0;
    line-height: 2;
  }
  .home-page .section05 {
    padding-top: 0;
  }
  .home-page .section05 .shop_img {
    width: calc(100% - 48px);
  }
  .home-page .section05 > .inner {
    padding-top: 32px;
  }
  .home-page .section05 .infobox .th {
    width: 64px;
    font-size: 13px;
  }
  .home-page .section05 .infobox .colon {
    width: 12px;
  }
  .home-page .section05 .infobox .td {
    font-size: 13px;
  }
  .home-page .section06 {
    padding: 0;
  }
  .home-page .section06 .gallery {
    padding-left: 24px;
    gap: 12px;
  }
  .home-page .section06 .item {
    flex-basis: 220px;
    width: 220px;
  }
  .home-page .section07 .webgene-blog {
    margin-top: 24px;
  }
  .home-page .section07 .webgene-item a {
    display: grid;
    grid-template-columns: auto 1fr 16px;
    gap: 12px;
    padding: 20px 0;
  }
  .home-page .section07 .webgene-item .date {
    width: auto;
    grid-column: 1;
    grid-row: 1;
  }
  .home-page .section07 .webgene-item .cate {
    width: auto;
    justify-self: start;
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
  }
  .home-page .section07 .webgene-item .ttl {
    order: 0;
    grid-column: 1 / 3;
    grid-row: 2;
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.8;
  }
  .home-page .section07 .webgene-item a > img {
    order: 0;
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
  }
  .home-page .section08 {
    padding: 48px 24px;
  }
  .home-page .section08 > .inner {
    padding: 0;
  }
  .home-page .section08 h2 {
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: .04em;
    padding: 20px 0;
  }
}
@media (max-width: 576px) {
  .home-page .section > .inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .home-page .section08 > .inner {
    padding: 0;
  }
  .home-page .section04 .btns, .home-page .section05 .btns, .home-page .section08 .btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .home-page .btns .more, .home-page .btns .more a {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .home-page .section05 .shop_img {
    width: calc(100% - 40px);
  }
  .home-page .section06 .gallery {
    padding-left: 20px;
  }
  .home-page .section06 .item {
    flex-basis: 72vw;
    width: 72vw;
  }
}
/* 縦書きコピーの横幅を確保 */
.home-page .section02 .vttl {
  width: max-content;
  max-width: 100%;
}
.home-page .section02 .vttl p {
  flex: none;
  width: 1.4em;
  min-height: 12em;
}