@charset "UTF-8";

.taya-lp {
  /* 1. 地紋のスタート位置をブラウザの最上部(0)に固定 */
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-origin: border-box !important;
  background-position: top center !important;
}

/* 2. メインビジュアル（写真）をヘッダーの高さ分下げる */
.taya-lp .main-visual {
  margin-top: 97px !important;
}

@media screen and (max-width: 768px) {
  .taya-lp .main-visual {
    margin-top: 0 !important; /* スマホはヘッダーに合わせて調整 */
  }
}



/* =========================================
   夏特集用 スタイル (summer2.css)
   ========================================= */

/* 背景を涼しげなアリスブルー（薄いじゅ水色）に */
body {
    background-color: #fff;; 
}

/* -----------------------------------------
   見出し・テキスト周りの夏カラー
----------------------------------------- */
/* h1タイトル：マリンブルーで爽やかに */
.taya-lp .block h1 {
    color: #0277bd;
    border-bottom: 2px solid #81d4fa;
    padding-bottom: 10px;
}

.taya-lp .block h1 span {
    color: #4fc3f7;
}

/* h2タイトル */
.taya-lp .block h2 {
    color: #0277bd;
}

.taya-lp .block h2 span {
    color: #4fc3f7;
}

/* h3小見出し：ネイビー系の青で引き締める */
.nabe-h3 {
    color: #01579b;
    border-left: 4px solid #03a9f4;
    padding-left: 10px;
    margin-bottom: 15px;
}


/* -----------------------------------------
   メインビジュアルのキャプション
----------------------------------------- */

.taya-lp .caption {
    /* 🌟 ここを追加：画像(2)や木の影(10)より数字を大きくして最前面に出す */
    position: relative; /* （※もし元々画像の上に絶対配置で浮いていた場合は absolute にしてください） */
    z-index: 20;        

    /* 以下は元からある設定そのまま */
    
}

/* -----------------------------------------
   装飾要素
----------------------------------------- */
/* 区切り線を爽やかなブルーの点線に */
hr.taya-line {
    border: none;
    border-top: 2px dashed #4fc3f7;
    margin: 40px 0;
}

/* -----------------------------------------
   ボタンの夏仕様
----------------------------------------- */
.taya-btn {
    background-color: #0288d1;
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.taya-btn:hover {
    background-color: #ffffff;
    color: #0288d1;
    text-decoration: none;
}

/* -----------------------------------------
   商品ラベルの夏カラー化
----------------------------------------- */
.label-new {
    background-color: #ff9800; /* 夏の太陽のようなオレンジ */
    color: #fff;
}

/* -----------------------------------------
   不要な春要素（桜エフェクト）の無効化
----------------------------------------- */
.sakura-container,
.sakura-theme .petal {
    display: none !important;
}


/* =========================================
   夏の大きな木の陰（左側から表示・完璧版）
   ========================================= */
.taya-lp .main-visual::after {
    content: "";
    position: absolute;
    top: -5%;
    
    /* ★魔法の配置★
       一度、画面の「左外側」にボックスを配置します。
       そこから鏡のように反転させることで、画面全体を覆います！ */
    left: -115%; 
    width: 110%;
    height: 110%;
    
    pointer-events: none;
    z-index: 10;
    
    /* 透過PNG画像のパス */
    background-image: url("/img/usr/feature/summer06/shadow.png");
    
    background-size: 40%; /* 影の大きさ（お好みで調整） */
    
    /* 枝の太い根元を、ボックスの「右端」に置いておく */
    background-position: right top; 
    background-repeat: no-repeat;
    
    mix-blend-mode: multiply;
    /* 影の濃さ */
    opacity: 0.10;

    /* アニメーションの画鋲（回転軸）を、枝の根元に固定 */
    transform-origin: right top; 

    animation: bigTreeSwayLeft 13s ease-in-out infinite alternate;
}

/* -----------------------------------------
   木陰がしっかり揺れる動き（左側用）
   ----------------------------------------- */
@keyframes bigTreeSwayLeft {
    0% {
        /* 左外のボックスを「scaleX(-1.15)」で右へパタンと折り返して画面を覆う */
        transform: scaleX(-1.15) scaleY(1.15) rotate(0deg);
    }
    35% {
        /* 根元を軸に風でしなる */
        transform: scaleX(-1.18) scaleY(1.18) rotate(-3deg);
        
    }
    70% {
        transform: scaleX(-1.16) scaleY(1.16) rotate(-1deg);
        
    }
    100% {
        transform: scaleX(-1.2) scaleY(1.2) rotate(-5deg);
        
    }
}

/* -----------------------------------------
   スマホ用の調整（画面幅767px以下）
   ----------------------------------------- */
@media screen and (max-width: 767px) {
    .taya-lp .main-visual::after {
        /* 影の大きさをスマホ用に拡大（40% → 70%〜90%など、見え方で調整してください） */
        background-size: 85%; 
        
        /* ボックスの基準（右端）に対して、少し左上に逃がすなど微調整が必要な場合 */
        /* background-position: 110% -5%; */
        
        /* 透過度もスマホの画面に合わせて少しだけ濃く（必要に応じて） */
        /* opacity: 0.12; */
    }
}


/* =========================================
   メインビジュアル（スライダー）の表示・切り替え設定
   ========================================= */
.mv-slider {
    position: relative;
    width: 100%;
}

/* 全てのスライドを同じ位置に重ねて、基本は「透明（非表示）」にする */
.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* 1秒かけてふわっと切り替わるアニメーション */
    z-index: 1;
}

/* スライダー全体の「高さ」を確保するため、1枚目だけ相対配置にする */
/* （これがないとスライダーの高さが0になってしまい、下の文字が上に被ってきます） */
.mv-slide:first-child {
    position: relative;
}

/* JSによって「active」が付与されたスライドだけを「不透明（表示）」にする */
.mv-slide.active {
    opacity: 1;
    z-index: 2;
}

/* 画像がはみ出さないように幅を100%にする */
.mv-slide img {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================================
   ペンギンブロック：スマホだけ
   大きい画像 → 文章 → 小さい画像
   ========================================= */
@media screen and (max-width: 767px) {

  .block-2col.reverse-sp {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* 大きい画像（ペンギン） */
  .block-2col.reverse-sp .block-visual {
    order: 1;
    width: 100%;
    margin-bottom: 16px;
  }

  /* 文章 */
  .block-2col.reverse-sp .block-text {
    order: 2;
    width: 100%;
    margin-bottom: 16px;
  }

  /* 小さい画像 */
  .block-2col.reverse-sp .item-list {
    order: 3;
    width: 100%;
  }

  .block-2col.reverse-sp img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* ▼ フッター案内リンク部分だけ白背景 */
footer,
#footer,
.footer {
  background: #fff !important;
}

/* GUIDE / SHOPPING / CONTENTS / ABOUT の内側 */
footer .inner,
footer .footer-inner,
footer .footer-nav,
#footer .inner,
#footer .footer-inner,
#footer .footer-nav {
  background: #fff !important;
}
/* このLPだけ：PCでは改行しない */
.taya-lp .sp-only {
  display: none;
}

/* このLPだけ：スマホだけ改行 */
@media screen and (max-width: 767px) {
  .taya-lp .sp-only {
    display: block;
  }
}
/* =========================
   OTHER SEASON
========================= */

.father_outro{
  padding: 80px 20px;
  background: #ffffff;
}

.father_outro .header{
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 60px;
  letter-spacing: 0.08em;
}

.father_outro .header span{
  display: block;
  margin-top: 12px;
  font-size: 16px;
  color: #b79b62;
  letter-spacing: 0.12em;
}

/* 横並び */
.contents-block{
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 各カード */
.recocon{
  width: 30%;
  max-width: 340px;
}

.recocon a{
  display: block;
  overflow: hidden;
}

/* 画像 */
.recocon img{
  width: 100%;
  display: block;
  transition: transform .4s ease;
}

.recocon a:hover img{
  transform: scale(1.03);
}

/* タイトル */
.con-header{
  font-size: 18px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 18px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

/* テキスト */
.con-txt{
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* =========================
   SP
========================= */
@media screen and (max-width: 768px){

  .contents-block{
    flex-direction: column;
    gap: 50px;
  }

  .recocon{
    width: 100%;
    max-width: none;
  }

  .father_outro .header{
    font-size: 26px;
    margin-bottom: 40px;
  }
}
/* SUMMER COLLECTION */
.summer-collection{
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 20px;
  background: #fff;
}

.block-occasion-recommend h3{
  text-align: center;
  font-size: 34px;
  letter-spacing: 0.08em;
  margin-bottom: 60px;
  position: relative;
  font-family: serif;
}

.block-occasion-recommend h3:before,
.block-occasion-recommend h3:after{
  content: "";
  position: absolute;
  top: 60%;
  width: 38%;
  height: 1px;
  background: #ccc;
}

.block-occasion-recommend h3:before{
  left: 0;
}

.block-occasion-recommend h3:after{
  right: 0;
}

.ulitem2{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 60px 40px;
  list-style: none;
  padding: 0;
  margin: 0 0 50px;
}

.liitem{
  text-align: center;
}

.liitem img{
  width: 100%;
  max-width: 180px;
  transition: .3s;
}

.liitem img:hover{
  opacity: .8;
  transform: translateY(-5px);
}

.more-btn{
  text-align: center;
  margin-top: 40px;
}

.more-btn a{
  display: inline-flex;   /* ←変更 */
  align-items: center;
  justify-content: center;
  background: #b59b5a;
  color: #fff;
  padding: 18px 80px;
  text-decoration: none;
  letter-spacing: .1em;
  transition: .3s;
}

.more-btn a:hover{
  opacity: .85;
}

/* SP */
@media screen and (max-width: 768px){

  .ulitem2{
    grid-template-columns: repeat(2,1fr);
    gap: 40px 20px;
  }

  .block-occasion-recommend h3{
    font-size: 24px;
  }

  .block-occasion-recommend h3:before,
  .block-occasion-recommend h3:after{
    width: 25%;
  }

  .more-btn a{
    width: 100%;
    padding: 16px 20px;
  }
}
/* SUMMER COLLECTION の「もっと見る」を非表示 */
#summerCollection + .more-button {
  display: none;
}

.more-btn a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b59b5a;
  color: #fff;
  padding: 18px 80px;
  text-decoration: none;
  letter-spacing: .1em;
  transition: .3s;
  text-align: center;
}
.more-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.more-btn a {
  display: inline-block;
}

/* =========================
   SUMMER COLLECTION
========================= */

#summerCollection {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* PC 4列 */
#summerCollection .item {
  width: calc((100% - 72px) / 4) !important;
  display: block !important;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0 !important;
}

/* 画像 */
#summerCollection .img-wrap img {
  width: 100% !important;
  display: block;
  height: auto;
}

/* テキスト */
#summerCollection .item-info {
  text-align: center;
}

/* スマホ */
@media screen and (max-width: 767px) {
  #summerCollection {
    gap: 16px !important;
  }

  #summerCollection .item {
    width: calc((100% - 16px) / 2) !important;
  }
}
/* SUMMER COLLECTIONだけ4列 */
#summerCollection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* スマホは2列 */
@media screen and (max-width: 767px) {
  #summerCollection {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* SUMMER COLLECTION：4列×2段で固定 */
#summerCollection.item-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100%;
}

#summerCollection.item-list > .item {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  #summerCollection.item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
/* SUMMER COLLECTION 見出しの余白調整 */
.block-occasion-recommend h3 {
  margin-top: 40px !important;
  margin-bottom: 30px !important;
  position: relative;
  z-index: 2;
}

/* 横線との間をあける */
.block-occasion-recommend {
  padding-top: 30px !important;
}
/* =========================
   SUMMER COLLECTION 見出し
========================= */

.block-occasion-recommend h3{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:50px;
  margin:60px 0 40px !important;
  font-size:34px;
  letter-spacing:.08em;
  text-align:center;
  font-family: serif;
}

/* 左右の短い線 */
.block-occasion-recommend h3::before,
.block-occasion-recommend h3::after{
  content:"";
  display:block;
  width:70px;
  height:1px;
  background:#ccc;
  flex-shrink:0;
}

/* スマホ */
@media screen and (max-width:767px){

  .block-occasion-recommend h3{
    font-size:24px;
    gap:10px;
  }

  .block-occasion-recommend h3::before,
  .block-occasion-recommend h3::after{
    width:22px;
  }
}
/* 商品名の改行防止 */
#summerCollection .item-info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   2カラム内メイン写真・カルーセルスライダー（比率キープ版）
   ========================================= */
.block-slider-wrap {
    position: relative;
    width: 100%;
    /* overflow: hidden; */ /* 影が切れるのを防ぐため、一旦コメントアウトか削除 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.block-slider-inner {
    position: relative;
    width: 100%;
    height: auto;      /* 🌟 ％指定を消して、auto（中身の画像に合わせる）にします */
    padding-top: 0;    /* 🌟 正方形化の指定を完全にリセット */
}

.b-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

/* 🌟 1枚目の画像だけ「つっかえ棒」として普通に配置し、外枠の高さを保ちます */
.b-slide:first-child {
    position: relative;
    opacity: 1; /* 初期状態で見えるように */
}

.b-slide.active {
    opacity: 1;
    z-index: 2;
}

.b-slide img {
    width: 100%;
    height: auto;      /* 🌟 height: 100% から auto に変え、元の縦横比を維持します */
    display: block;
}

/* 🌟 スマホ・PC共通：縦長で写真全体に広がる当たり判定ボタン */
.slider-btn {
    position: absolute;
    top: 0;
    width: 15%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.05); 
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover,
.slider-btn:active {
    background: rgba(0, 0, 0, 0.2);
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* ボタンの中の矢印 */
.slider-btn::after {
    content: "";
    width: 18px;
    height: 18px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.prev-btn::after { transform: rotate(-135deg); }
.next-btn::after { transform: rotate(45deg); }

/* ドットナビゲーション */
.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.3s;
}
.dot.active {
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* ---- スマートフォン用の個別調整 ---- */
@media screen and (max-width: 767px) {
    .slider-btn {
        width: 20%; 
        background: rgba(0, 0, 0, 0.1); 
    }
    .slider-btn::after {
        width: 14px; 
        height: 14px;
    }
}

/* ===================================================
   SUMMER COLLECTION（#item5）の商品だけを大きく見せる設定
   =================================================== */

/* PC・タブレット時の表示（横幅を190pxに拡大して4列に） */
#item5.item-list {
  --item-w: 190px !important; /* 横幅を144pxから190pxに大きく */
  --gap: 25px !important;    /* 4列で画面に収まりやすいよう、余白を25pxに微調整 */
  
  /* 4列並んだときの最大幅を再計算（190px × 4 + 25px × 3 = 835px） */
  max-width: calc((190px * 4) + (25px * 3)) !important; 
  
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* 商品カード自体の幅を新しい変数に強制追従させる */
#item5.item-list .item {
  flex: 0 0 var(--item-w) !important;
  width: var(--item-w) !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 📱 スマートフォン時（画面幅768px以下）の調整 */
@media screen and (max-width: 768px) {
  #item5.item-list {
    /* スマホは横並び2列にして、画面いっぱいに広げる */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: 100% !important;
    padding: 0 15px !important;
  }
  
  #item5.item-list .item {
    width: 100% !important;
    flex: none !important;
  }
}