@charset "UTF-8";
/* --- 1. ベース設定 --- */
body {
  background: #87bcdc;
  margin: 0;
  overflow: hidden;
}
.whitespace {
  width: 0.5em;
}
h3 {
  font-family: cofo-raffine, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 1.8em;
}
.container {
  scroll-snap-type: y mandatory;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 10;
  background: transparent;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}
#tsparticles {
  background: url(../image/h2h/bubble_bg.png) no-repeat center bottom;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
/* 縦スナップの基本セクション */
.container > section {
  scroll-snap-align: start;
  height: 100dvh;
  /*display: flex;
  flex-direction: column;*/
  position: relative;
  width: 100%;
  padding: 0;
}
/* --- 2. 商品紹介エリアの構成 --- */
.feat_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.feat_box .item {
  flex: 0 0 auto;
  z-index: 20;
}
.feat_box .item > div {
  background: rgba(255, 255, 255, 0.6);
  padding: 1em 5%;
  position: relative;
}
.feat_box .item img {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 30%;
  /*max-width: 150px;*/
}
/* --- 3. 横スクロールエリア（最重要修正） --- */
.profile {
  flex: 1;
  display: flex !important; /* blockに変更 */
  white-space: nowrap !important; /* 子要素の改行・縮小を物理的に防ぐ */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  scrollbar-width: none;
  scroll-behavior: smooth; /* ホイール移動をなめらかにする */
}
.profile::-webkit-scrollbar {
  display: none;
}
/* 各スライドパネル：1枚ずつのカード */
.slide-panel {
  /*display: inline-flex !important;  横に並べる */
  vertical-align: top;
  white-space: normal; /* パネル内の文字改行は元に戻す */
  flex: 0 0 100vw !important; /* 縮ませない */
  width: 100vw !important;
  height: 100% !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  /* 縦スナップの干渉を防止 */
  scroll-snap-align: none inline !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
/* --- 4. パネル内要素 --- */
/*.message {
  flex: 0 0 auto;
  width: 100%;


}*/
.portlait {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.portlait img {
  /* max-height: 50dvh;
  width: auto;*/
  object-fit: contain;
}
/* PC用 */
@media screen and (min-width: 769px) {
  .slide-panel {
    flex-direction: row !important; /* 横並びに */
  }
  .slide-panel.left {
    flex-direction: row-reverse !important;
  }
}
/*KV
------------------------------*/
#kv {
  background-image: radial-gradient(circle, #d6edf3, transparent 75%);
  position: relative;
  z-index: 2;
  justify-content: flex-start;
  padding: 2em 5%;
}
#kv:before {
  background: url(../image/h2h/kv_h2h.png) no-repeat right bottom;
  background-size: contain;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#kv > div {
  display: flex;
  flex-direction: column;
}
#kv img {
  display: block;
  margin: 0 auto;
}
#kv h1 {
  /*text-align: center;
  color: #fff;
  font-size: 2em;*/
  margin: 1.5em 0;
}
@media screen and (min-width:769px) {
  #kv {
    display: flex;
    align-items: center;
  }
  #kv > div {
    /*flex: none;*/
    width: 45%;
    /*position: absolute;
    left: 7%;
    bottom: 2em;*/
  }
  #kv img.logo {
    /*max-height: 20dvh;*/ width: 13em;
  }
  /* #kv img.bottle {
    order: 1;
    max-height: 40dvh;
  }*/
}
@media screen and (max-width:768px) {
	#kv{padding:0 5%;}
  #kv:before {
    background-position: center bottom;
    background-size: 120% auto;
	  z-index:2;
  }
  #kv > div {
    /* align-items: flex-end;
    flex-wrap: wrap;*/
  }
  #kv img.logo {
    width: 25%;
    position: absolute;
    top: 19vw;
    right: 5%;
	  z-index:0;
  }
  #kv img.bottle {
    width: 30%;
  }
  #kv h1 {
    width: 100%;
    font-size: 1.3em;
  }
}
/*section {
  scroll-snap-align: start;
  height: 100vh;
}*/
@media screen and (max-width:768px) {
  section.area {
    flex-direction: column;
    margin-top: auto;
  }
}
@media screen and (min-aspect-ratio: 2/3) and (max-width: 540px) {
  /*縦横比が1:1.5以下の場合のみ適用*/
  #kv:before {
    background-position: center 28dvh;
  }
}
/*feat_box
------------------------------*/
#breeze, #aqua {
  background: none;
}
.message {
  text-align: center;
  flex-grow: 1;
  color: #fff;
  display: flex;
  /*align-items: center;*/
}
.comment h3 {
  position: relative;
}
.comment p {
  letter-spacing: 0.05em;
}
.sign {
  display: block;
  width: 40%;
  position: absolute;
  right: 0;
  top: 0;
}
.portlait {
  position: relative;
  /*z-index: 50;*/
  margin-top: auto;
}
.feat_box {
  position: relative;
}
.feat_box .item {
  /* position: sticky;
  top: 0;height: 100dvh;*/
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
.feat_box .item > div {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 80px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
}
.feat_box .item img {
  width: 30%;
  position: absolute;
  left: 5%;
  bottom: 0;
}
.feat_box .item p {
  margin-bottom: 0;
  font-weight: bold;
}
.feat_box .item .btn_box a {
  color: #fff;
  border: none;
}
@media screen and (min-width:769px) {
  .feat_box {}
  .message {
    font-size: 1.7vw;
    height: 100%;
    padding-top: 25dvh;
  }
  .message > div {
    flex: 1;
  }
  .feat_box .item img {
    right: 5%;
    margin: auto;
  }
  .feat_box .item p {
    width: 30%;
    text-align: right;
  }
  .feat_box .item .btn_box {
    position: absolute;
    right: 5%;
    bottom: 0.5em;
  }
  .portlait img {
    position: absolute;
    bottom: 0;
    height: 90dvh;
  }
  .comment {
    padding: 0 5%;
  }
  .slide-panel.left .message {
    flex-direction: row-reverse;
  }
  .slide-panel.left .portlait img {
    left: 0;
  }
  .slide-panel.right .portlait img {
    right: 0;
  }
  .slide-panel.right .sign {
    right: inherit;
    left: 0;
  }
}
@media screen and (max-width:768px) {
  .slide-panel {
    overflow: hidden;
  }
  .feat_box .item > div {
    padding: 0.6em 5%;
    height: 17dvh;
  }
  .feat_box .item img {
    width: 35%;
    bottom: 0.7em;
  }
  .feat_box .item > div {
    padding-left: 45%;
  }
  .portlait img {
    display: block;
  }
  .message {
    flex-direction: column;
    height: 100%;
  }
  .message p {
    font-size: 5vw;
    margin: 1em 5%;
  }
}
/*footer
------------------------------*/
.totop {
  margin: 5dvh 0;
}
#link {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}
}
#link .pict {
  margin-bottom: 3em;
}
#link .pict img {
  width: 220px;
  max-width: 40%;
}
#link p {
  line-height: 2;
}
#link .totop a {
  background: none;
  border: 1px solid #999;
  box-shadow: none;
}
.footer {
  padding: 3em 0;
}
/* スクロール案内 */
.scroll-wrapper {
  position: relative;
}
/* ヒント要素 */
.scroll-hint {
  position: absolute;
  width: 100%;
  right: 0;
  /*top: 50%;*/
  bottom: 22dvh;
  z-index: 10;
  transition: opacity 0.5s ease, visibility 0.5s;
  pointer-events: none; /* クリックを邪魔しない */
}
.scroll-hint .arrow:before {
  content: "SCROLL ＞";
	font-weight:bold;
	font-size:1.2em;
  position: absolute;
  right: 5%;
  top: 0;
  margin: auto;
  color: #fff;
  animation: nudge 2s infinite;
  pointer-events: none; /* ヒントが邪魔でクリックできないのを防ぐ */
}
/* クラスがついたら非表示にする */
/*.is-scrolled .scroll-hint {
  opacity: 0;
  visibility: hidden;
  display: none;
}*/
@keyframes nudge {
  0%, 100% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-0.5em);
    opacity: 1;
  }
}
@media screen and (min-width: 769px) {
	.scroll-hint{  opacity: 0;
  visibility: hidden;
  display: none;}
}