@charset "utf-8";
/* CSS Document */
/* 2026春の香り
------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .kayuragi_dtl_wrap p {
    margin-bottom: -15%;
    margin-left: 1%;
  }
  .card-container {
    gap: 5%;
  }
  ul.kayuragi_type_lefttop li {
    width: 46%;
    padding: 4% 2%;
  }
}
@media only screen and (max-width: 980px) {
  img {
    max-width: 100%;
    height: auto;
  }
  /* 2026かゆらぎ
------------------------------------------------------------------------------------------------- */
  .kayuragi_mainbgcolor {
    background-color: #fff6ef;
  }
  .kayuragi_main {
    padding-bottom: 5%;
  }
  .kayuragi_main picture img {
    width: 100%;
    height: 630px;
    object-fit: cover;
    object-position: 30% 100%;
  }
  ul.kayuragi_grobal_navi {
    display: none;
  }
  .kayuragi_main h1 {
    top: 10%;
    left: 10%;
    width: 20%;
  }
  .kayuragi_main h1 img {
    max-width: 100px;
  }
  ul.deco img {
    width: 100%;
  }
  .kayuragi_shop {
    bottom: 30%;
    right: 4%;
    font-size: 0.9375rem;
  }
  .kayuragi_shop a {
    padding: 10px 5px;
  }
  .kayuragi_shop a:hover {
    background-position: 0% 100%;
  }
  ul.deco li:nth-child(2) {
    top: inherit;
    bottom: 0;
    right: inherit;
    left: -100px;
    opacity: 0.8;
  }
  ul.deco li:nth-child(3) {
    right: -55%;
  }
  /* concept */
  .kayuragi_concept {
    font-size: 0.9375rem;
    margin: -50px auto 0;
    flex-direction: column;
    padding-bottom: 100px;
  }
  .kayuragi_concept h1 {
    flex-direction: row;
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    justify-content: center;
    margin-bottom: 10px;
  }
  .kayuragi_concept h1 span {
    margin-left: 0;
    position: absolute;
    left: 4%;
    top: 0;
  }
  .kayuragi_concept h1 img {
    width: 90px;
  }
  .kayuragi_concept h1 span img {
    width: 20px;
  }
  .kayuragi_dtl_wrap {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .kayuragi_dtl_wrap picture {
    max-width: 100%;
  }
  .kayuragi_dtl_wrap p {
    writing-mode: horizontal-tb;
    letter-spacing: normal;
    line-height: 2.2;
    margin: 20px 0 0 9%;
    font-weight: 400;
  }
  /* 商品一覧 */
  .kayuragi_product_list {
    position: relative;
    background-color: #fff6ef;
    background: linear-gradient(180deg, rgba(254, 247, 239, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 26%, rgba(255, 255, 255, 1) 100%);
  }
  .kayuragi_product_list:before {
    background-image: url("../../images/kayuragi/product_list_bg_sp.svg");
    aspect-ratio: 800 / 400;
  }
  .kayuragi_product_in {
    padding-bottom: 50px;
  }
  .kayuragi_product_in h1 {
    margin: 0 auto;
    text-align: center;
    width: 60px;
    margin-bottom: 30px;
  }
  /* 矢印のカスタマイズ */
  .arrow {
    background-color: transparent; /* ボタンの背景を透明にする */
    position: relative;
    display: inline-block;
    padding-left: 30px;
  }
  .splide__arrow--prev {
    left: 45px;
    transform: scaleX(-1);
  }
  .splide__arrow--next {
    left: 60px;
  }
  .splide__arrows {
    margin-bottom: 20px;
  }
  /* 矢印のカスタマイズここまで */
  .kayuragi_product_in ul li h2 {
    font-size: 0.9375rem;
    margin: 10px 0 15px;
    font-weight: 500;
  }
  .kayuragi_product_in ul li h2 span {
    font-size: 0.75rem;
  }
  .kayuragi_price {
    font-size: 0.75rem;
    margin-bottom: 15px;
  }
  .kayuragi_price span {
    font-size: 0.9375rem;
  }
  .kayuragi_dtl {
    font-size: 0.8125rem;
  }
  .kayuragi_btn a {
    font-size: 0.9375rem;
    font-weight: 500;
    display: block;
    padding: 8px 10px;
  }
  /* 15種類の香り */
  .kayuragi_type_list {
    padding-top: 25%;
  }
  .kayuragi_type_list:before {
    background-image: url("../../images/kayuragi/type15_bg_sp.svg");
    aspect-ratio: 800 / 400;
  }
  .kayuragi_type_list h1 {
    width: 100px;
    margin: 0 auto 30px;
  }
  h2.kayuragi_circle {
    margin-left: 0;
    display: block;
  }
  h2.kayuragi_circle img {
    max-width: 560px;
    width: 80%;
  }
  h2.kayuragi_circle:before {
    content: none;
  }
  h2.kayuragi_circle2 {
    margin-left: 0;
    display: block;
  }
  h2.kayuragi_circle2 img {
    max-width: 560px;
    width: 80%;
  }
  h2.kayuragi_circle2:before {
    content: none;
  }
  ul.kayuragi_type_righttop {
    flex-direction: column;
    margin: auto;
    margin-bottom: 50px;
  }
  ul.kayuragi_type_righttop li {
    width: 88%;
    padding: 20px 6%;
  }
  ul.kayuragi_type_righttop li:nth-child(odd) {
    margin-top: 0;
  }
  ul.kayuragi_type_righttop li:nth-child(even) .card-container {
    flex-direction: row-reverse;
  }
  ul.kayuragi_type_righttop li:nth-child(even) .kinked-line {
    position: absolute;
    bottom: 0;
    /* 右側に突き出させるために right をマイナスにします */
    left: inherit;
    right: -90px;
    width: calc(100% + 90px);
    height: 100px;
    background-color: #b0bcbc;
    /* clip-path(多角形)の数値を左右反転 */
    clip-path: polygon(100% 0%, /* [1] 斜め線の始点（右上） */ 150px 100%, /* [2] 折れ曲がり点（下：右から24%＝左から76%の位置） */ 0% 100%, /* [3] 水平線の終点（左下） */ 0% calc(100% - 1px), /* [4] 水平線の終点から1px上 */ 149.8px calc(100% - 1px), /* [5] 折れ曲がり点の内側（1px上のやや左） */ 99.7% 0% /* [6] 始点の内側に戻る */
      );
  }
  ul.kayuragi_type_lefttop {
    flex-direction: column;
    margin-bottom: 50px;
  }
  ul.kayuragi_type_lefttop li {
    width: 88%;
    padding: 20px 6%;
  }
  ul.kayuragi_type_lefttop li:nth-child(odd) {
    margin-top: 0;
  }
  ul.kayuragi_type_lefttop li:nth-child(even) .card-container {
    flex-direction: row-reverse;
  }
  ul.kayuragi_type_lefttop li:nth-child(even) .kinked-line {
    position: absolute;
    bottom: 0;
    /* 右側に突き出させるために right をマイナスにします */
    left: inherit;
    right: -90px;
    width: calc(100% + 90px);
    height: 100px;
    background-color: #b0bcbc;
    /* clip-path(多角形)の数値を左右反転 */
    clip-path: polygon(100% 0%, /* [1] 斜め線の始点（右上） */ 76% 100%, /* [2] 折れ曲がり点（下：右から24%＝左から76%の位置） */ 0% 100%, /* [3] 水平線の終点（左下） */ 0% calc(100% - 1px), /* [4] 水平線の終点から1px上 */ 75.8% calc(100% - 1px), /* [5] 折れ曲がり点の内側（1px上のやや左） */ 99.7% 0% /* [6] 始点の内側に戻る */
      );
  }
  /* ==========================================================================
   2. レイアウト（コンテナ）
   ========================================================================== */
  .card-container {
    gap: 5%;
  }
  /* ==========================================================================
   3. 左側：画像エリア（丸型切り抜き ＆ ぼかし背景）
   ========================================================================== */
  .image-area {
    position: relative;
    flex: 0 0 45%;
    width: 45%;
    height: auto;
  }
  /* ぼかし円効果 */
  .blur-circle {
    width: 100px;
    height: 100px;
    filter: blur(10px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
  .blur-circle2 {
    width: 100px;
    height: 100px;
    filter: blur(10px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
  .blur-circle3 {
    width: 100px;
    height: 100px;
    filter: blur(10px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
   .blur-circle4 {
    width: 100px;
    height: 100px;
    filter: blur(10px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
  .kayuragi_type_righttop li:nth-child(1) .blur-circle {
    bottom: -5px;
    left: -25px;
  }
  .kayuragi_type_righttop li:nth-child(2) .blur-circle {
    top: 0;
    right: -15px;
  }
  .kayuragi_type_righttop li:nth-child(3) .blur-circle {
    bottom: inherit;
    right: -5px;
    top: -10px;
  }
  .kayuragi_type_righttop li:nth-child(4) .blur-circle {
    bottom: -5px;
    left: inherit;
    right: -10px
  }
  .kayuragi_type_lefttop li:nth-child(1) .blur-circle2 {
    top: -25px;
    right: inherit;
    left: -5px;
  }
  .kayuragi_type_lefttop li:nth-child(2) .blur-circle2 {
    bottom: -25px;
    right: -15px;
  }
  .kayuragi_type_lefttop li:nth-child(3) .blur-circle2 {
    bottom: -5px;
    left: -15px;
  }
  .kayuragi_type_lefttop li:nth-child(4) .blur-circle2 {
    top: -5px;
    bottom: inherit;
    left: -5px;
  }
  .kayuragi_type_lefttop li:nth-child(5) .blur-circle2 {
    top: -25px;
    right: -5px;
  }
  .kayuragi_type_lefttop li:nth-child(6) .blur-circle2 {
    bottom: -25px;
    left: inherit;
    right: 5px;
  }
  .kayuragi_type_lefttop li:nth-child(7) .blur-circle2 {
    bottom: -25px;
    left: -15px;
  }
  .kayuragi_type_righttop li:nth-child(1) .blur-circle3 {
    bottom: -5px;
    left: -25px;
  }
  .kayuragi_type_righttop li:nth-child(2) .blur-circle3 {
    top: 0;
    right: -15px;
  }
  .kayuragi_type_righttop li:nth-child(3) .blur-circle3 {
    bottom: inherit;
    right: inherit;
    top: -5px;
    left: -5px;
  }
  .kayuragi_type_righttop li:nth-child(4) .blur-circle3 {
    bottom: -15px;
    left: inherit;
    right: -15px;
  }
  /* ==========================================================================
   4. 右側：テキストエリア ＆ 折れ曲がる引き出し線
   ========================================================================== */
  .text-area {
    flex: 1;
    color: #2b4c4f; /* 画像の文字に合わせた深みのある墨緑色 */
    position: relative;
    padding-bottom: 20px; /* テキストと下線（引き出し線）の間の余白 */
  }
  /* タイトル部分 */
  .title-wrap {
    margin-bottom: 10px;
  }
  .english-title {
    font-size: 10px;
    margin-bottom: 0;
  }
  h3.japanese-title {
    font-size: 30px;
  }
  /* 説明文 */
  .description {
    font-size: 0.8125rem;
    letter-spacing: normal;
  }
  /* 【重要】CSSだけで再現した「折れ曲がる引き出し線」 */
  .kinked-line {
    position: absolute;
    bottom: 0;
    left: -90px; /* 線を左側の画像方向へ突き出させる */
    width: calc(100% + 90px); /* 突き出た分だけ全体の横幅を広げる */
    height: 100px; /* 斜めに折れ曲がる「高さ（傾斜）」を確保 */
    background-color: #b0bcbc; /* 線の色（上品なグレーグリーン） */
    /* clip-path(多角形)で1pxの折れ線に型抜き */
    clip-path: polygon(0% 0%, /* [1] 斜め線の始点（左上） */ 90px 100%, /* [2] 折れ曲がり点（下：左から24%の位置で水平に変化） */ 100% 100%, /* [3] 水平線の終点（右下） */ 100% calc(100% - 1px), /* [4] 水平線の終点から1px上（線の太さ分） */ 90.2px calc(100% - 1px), /* [5] 折れ曲がり点の内側（1px上） */ 0.3% 0% /* [6] 始点の内側に戻る */
      );
  }
  /* 動画 */
  .kayuragi_video {
    position: relative;
    background-color: #fff;
    xbackground: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(237, 247, 248, 1) 30%, rgba(255, 255, 255, 1) 100%);
    padding-top: 15%;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
  }
  .kayuragi_video:before {
    background-image: url("../../images/kayuragi/video_bg_sp.svg");
    aspect-ratio: 800 / 400;
  }
  .kayuragi_video_in {
    padding: 0 6%;
  }
  .kayuragi_video h1 {
    width: 60px;
    margin: auto;
    margin-bottom: 40px;
  }
  dl.kayuragi_youtube {
    margin-bottom: 20px;
  }
  dl.kayuragi_youtube dt {
    margin-bottom: 10px;
    font-size: 0.9375rem;
  }
  dl.kayuragi_youtube dd iframe {
    border-radius: 15px;
  }
  .kayuragi_video h2 {
    font-size: 1rem;
    margin-bottom: 40px;
  }
  .kayuragi_video h2:before {
    width: 1px;
    height: 25px;
    bottom: -30px;
  }
  .kayuragi_video p {
    font-size: 0.9375rem;
    margin-bottom: 25px;
    line-height: 1.6;
  }
  /* ラインナップ */
  .kayuragi_lineup {
    padding-top: 25%;
  }
  .kayuragi_lineup:before {
    background-image: url("../../images/kayuragi/lineup_bg_sp.svg");
    aspect-ratio: 800 / 2000;
  }
  .kayuragi_lineup_in {
    padding: 0 6%;
  }
  .kayuragi_lineup h1 {
    text-align: center;
    width: 60px;
    margin: auto;
    margin-bottom: 60px;
  }
  .kayuragi_lineup ul {
    flex-direction: column;
    letter-spacing: 0.1em;
    padding-bottom: 70px;
    text-align: left;
  }
  .kayuragi_lineup ul li {
    width: 100%;
    padding: 0;
    border-right: none;
    margin-bottom: 45px;
  }
  .kayuragi_lineup ul li .kayuragi_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .kayuragi_lineup ul li .kayuragi_lineup_image {
    width: 55%;
  }
  .kayuragi_lineup ul li .kayuragi_flex div {
    width: 40%;
  }
  .kayuragi_lineup ul li:first-child {
    width: 100%;
    padding: 0;
  }
  .kayuragi_lineup ul li:last-child {
    width: 100%;
    padding: 0;
    border-right: none;
  }
  .kayuragi_lineup ul li img {
    width: 100%;
    height: auto;
  }
  .kayuragi_lineup ul li h2 {
    font-weight: 500;
    font-size: 0.9375rem;
    margin: 0 0 10px;
    line-height: 1.4;
  }
  .kayuragi_lineup ul li h2 span {
    font-size: 0.75rem;
    margin-top: 5px;
  }
  /* FAQ */
  .kayuragi_faq {
    font-weight: 400;
    font-size: 0.875rem;
  }
  .kayuragi_faq:before {
    background-image: url("../../images/kayuragi/faq_bg_sp.svg");
    aspect-ratio: 800 / 1000;
  }
  .kayuragi_faq h1 {
    text-align: center;
    width: 60px;
    margin: auto;
    margin-bottom: 40px;
  }
  dl.kayuragi_qa {
    padding: 0 6%;
  }
  dl.kayuragi_qa dt {
    font-size: 1.0625rem;
    margin-bottom: 30px;
    font-weight: 500;
  }
  dl.kayuragi_qa dt span {
    font-size: 30px;
    display: block;
    font-family: 'Butler', sans-serif;
    font-weight: 500;
  }
  dl.kayuragi_qa dd {
    margin-bottom: 20px;
  }
  dl.kayuragi_qa dd:last-child {
    margin-bottom: 20px;
  }
  dl.kayuragi_qa dd span {
    font-size: 20px;
  }
  dl.kayuragi_qa dd p {
    margin-bottom: 20px;
  }
  .kayuragi_safe {
    padding-top: 50px;
    padding: 0 6%;
    margin: auto;
    font-size: 0.875rem;
  }
  ul.kayuragi_att {
    padding: 0 6%;
    margin: auto;
    font-size: 0.875rem;
    padding-bottom: 50px;
  }
  .faq-blur-circle1 {
    position: absolute;
    right: -50px;
    top: 35%;
    width: 150px;
    height: 150px;
    background-color: rgba(252, 226, 196, 1);
    border-radius: 50%;
    filter: blur(40px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
  .faq-blur-circle2 {
    position: absolute;
    left: -50px;
    top: 75%;
    width: 150px;
    height: 150px;
    background-color: rgba(252, 226, 196, 1);
    border-radius: 50%;
    filter: blur(40px); /* 強くぼかしてグラデーションを表現 */
    z-index: 1;
  }
}