/* ==========================================================
   front.css（トップページ専用）
   ・デザインカンプ（幅1280px）の実測値に合わせています
   ・色は :root の変数にまとめています
   ・あしらい（.deco）は枠だけ。背景画像は自分で入れてください
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");
:root {
  --color-orange: #feb2b8;
  --color-pink: #fec9e2;
  --color-purple: #e6cdfc;
  --color-blue: #dbf1ff;
  --color-green: #c4efd9;
  --color-text: #242424;
  --color-bg: #faf9f8;
  --color-deco: #e4a0f5;
  --color-gray: #d9d9d9;
  --font-title: "Dela Gothic One", sans-serif;
}
.catColor-orange { --cat-color: var(--color-orange); }
          .catColor-pink   { --cat-color: var(--color-pink); }
          .catColor-purple { --cat-color: var(--color-purple); }
          .catColor-blue   { --cat-color: var(--color-blue); }
          .catColor-deco   { --cat-color: var(--color-deco); }
          .catColor-green  { --cat-color: var(--color-green); }
          .catColor-gray   { --cat-color: var(--color-gray); }
.l-container {
  padding: 0;
  width: 100%;
  max-width: unset;
}
.top #content {
  padding-top: 0;
}
section {
  padding: 60px 0;

  @media (max-width: 796px) {
    padding: 50px 0;
  }
}
p {
  font-size: calc(14px, 2vw, 16px);
}
.js-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fade.is-show {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の人には、アニメーションなしで表示 */
@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---- */
/* 共通 Styles */
/* ---- */
.frontMain {
  color: var(--color-text);
  overflow: hidden;

  .inner {
    max-width: 1200px;
    padding: 0 20px;
    margin-inline: auto;
    @media (max-width: 796px) {
      padding: 0 16px;
    }
    @media (max-width: 500px) {
      padding: 0 10px;
    }
  }

  .titleBox {
    --deco-size: clamp(48px, 8vw, 90px);
    position: relative;
    margin-bottom: clamp(24px, 3.5vw, 44px);

    .titleDeco {
      display: block;
      font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
      font-family: var(--font-title);
  
      font-size: var(--deco-size);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
      white-space: nowrap;
      color: var(--color-pink);
      opacity: 0.3;
    }

    .title {
      position: relative;
      margin: calc(var(--deco-size) * -0.52) 0 0 12px;
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      line-height: 1.4..;
      text-shadow: 2px 2px 0 var(--color-deco);
    }

  }

  .noImage {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray);
  }

  .deco {
    position: absolute;
    z-index: 2;
    display: block;
    pointer-events: none;
  }

  .pcBr {
    display: inline;
  }
}

/* ---- */
/* slider Styles */
/* ---- */

#post_slider .swiper {
  padding-bottom: 0;
}
.p-postSlider {
  margin-top: 20px;
  padding-bottom: 0;
  max-height: 80vh;

  .p-postList__body {
    border-bottom: 3px solid var(--color-orange);
   
  }
  .p-postList .p-postList__title{
    min-height: unset;
    padding-bottom: 20px;
  }
  .swiper-slide {
    transform: scale(0.9); /* 左右：0.8倍 */
    transition: transform 1s;
    .p-postList__body {
      border-bottom: 3px solid var(--color-orange);
    }

    &:nth-child(4n + 2) .p-postList__body {
      border-bottom-color: var(--color-pink);
    }

    &:nth-child(4n + 3) .p-postList__body {
      border-bottom-color: var(--color-purple);
    }

    &:nth-child(4n + 4) .p-postList__body {
      border-bottom-color: var(--color-blue);
    }
  }
  
  &.-ps-style-img .p-postList__thumb {
    max-height: 60vh;
  }

  .swiper-slide-active {
    transform: scale(1); /* 真ん中：今のまま */
  }

  .swiper-slide-prev {
    transform-origin: right center;
  }
  .swiper-slide-next {
    transform-origin: left center;
  }

  /* ドット */
  .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background-color: var(--color-gray);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    background-color: var(--color-orange);
  }
}
@media (min-width: 960px) {
  #post_slider {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .p-postSlider {
    .c-postThumb__figure {
      aspect-ratio: 1 / 1; /* 正方形 */
    }

    .c-postThumb__img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 縦横比を保ったまま切り抜く */
    }
  }
}
.p-postSlider.-ps-style-img .p-postList__body:before{
  background: linear-gradient(transparent, #333333c9);

}
/* ---- */
/* card（おすすめ・新着 共通） Styles */
/* ---- */
.cardList {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px;
  @media (max-width: 550px) {
    gap: 10px;
  }
  .cardItem {
    width: calc(100% / 3 - 20px);
    min-width: 250px;
    @media (max-width: 550px) {
      width: calc(100% / 2 - 5px);
      min-width: unset;
    }

    .cardLink {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 4px 4px #00000040;
      color: #333;
      text-decoration: none;
      width: 100%;

      .cardImg {
        /* aspect-ratio: 3 / 2;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s ease-in-out;
        } */
        position: relative;
        aspect-ratio: 2 / 1;
        overflow: hidden;
        background: no-repeat center / cover;
        background-color: #dcdcdc;
        @media (max-width: 650px) {
          aspect-ratio: 1.5 / 1;
        }

        /* 黒いフィルター */
        &::before {
          position: absolute;
          inset: 0;
          z-index: 0;
          content: "";
          background-color: #fcfcfc73;
          backdrop-filter: blur(5px);
        }

        img {
          position: relative;
          z-index: 1; /* フィルターより手前に出す */
          display: block;
          width: 100%;
          height: 100%;
          transition: all 0.3s ease-in-out;
          object-fit: contain; /* 切り抜かずに、全体を見せる */
        }
      }
      &:hover {
        .cardImg {
          img {
            transform: scale(1.05);
          }
        }
      }

      .cardBody {
        padding: clamp(5px, 1.6vw, 10px);
        .cardMeta {
          display: flex;
          align-items: center;
          gap: 8px;
          margin: 0 0 clamp(6px, 1vw, 12px);
          font-size: 12px;
          @media (max-width: 550px) {
            gap: 4px;
          }
          
          .cardCat {
            padding: 3px 10px 1px;
            border-radius: 20px;
            background-color: var(--cat-color, var(--color-gray));
            font-size: 12px;
            line-height: 1.2;
            @media (max-width: 550px) {
              font-size: 9px;
              line-height: 1.3;
              font-weight: 700;
            }
          }
        }
        .cardText {
          display: -webkit-box;
          margin: 0;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-size: clamp(12px, 1.1vw, 14px);
          line-height: 1.6;
        }
      }
    }
  }
}

/* ---- */
/* pickup Styles */
/* ---- */
.pickupSec {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 2%;
    right: 0;
    width: 20%;
    min-width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-color: var(--color-deco) var(--color-pink) var(--color-pink)
      var(--color-deco);
    border-style: dotted;
    z-index: -1;
    @media (max-width:796px){
      opacity: 0.5;
    }
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    min-width: 100px;
    right: 0%;
    width: 10%;
    aspect-ratio: 1;
    background-image: linear-gradient(
      45deg,
      var(--color-blue),
      var(--color-bg)
    );
    border-width: 5px;
    border-radius: 50%;
    z-index: -1;

  }
}
/* ---- */
/* new Styles */
/* ---- */
.newSec {
  position: relative;
  z-index: 1;
  border: 4px solid var(--color-orange);
  border-bottom-width: 5px;
  border-radius: clamp(48px, 7.8vw, 100px) clamp(48px, 7.8vw, 100px) 0 0;
  background-color: var(--color-bg);
  border-bottom: 0;

  .titleDeco {
    color: #ffd5ea;
  }

  /* pc：3記事 / sp：4記事 */
  .cardItem:nth-child(n + 4) {
    display: none;
  }

  .decoNewTop {
    top: 6px;
    left: 0;
    width: clamp(70px, 11vw, 140px);
    height: clamp(90px, 14.8vw, 190px);
  }

  .decoNewBottom {
    right: 0;
    bottom: -20px;
    width: clamp(70px, 11vw, 140px);
    height: clamp(80px, 12.5vw, 160px);
  }
}

/* ---- */
/* search Styles */
/* ---- */
.searchSec {
  padding: clamp(30px, 6vw, 55px) 0 clamp(28px, 3.1vw, 40px);
  background-color: var(--color-purple);
  background-image: url("https://www.transparenttextures.com/patterns/ag-square.png"),
    radial-gradient(#f6edff, var(--color-purple));

  .titleBox {
    text-align: center;

    .titleDeco {
      color: #debffa;
    }

    .title {
      margin-left: 0;
      font-size: clamp(18px, 1.4vw, 20px);
    }
  }

  .searchForm {
    display: flex;
    align-items: center;
    max-width: 790px;
    height: clamp(48px, 5.2vw, 66px);
    margin-inline: auto;
    padding: 3px;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    background-color: #fff;
  }

  .searchInput {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 24px;
    border: none;
    background: transparent;
    font-size: 16px;
    border-radius: 100px;

    &:focus {
      outline: none;
    }
  }

  .searchBtn {
    min-width: clamp(80px, 12.9vw, 165px);
    height: 100%;
    border: none;
    border-radius: 100px;
    background-color: #ebebeb;
    font-size: clamp(14px, 1.6vw, 20px);
    color: #333;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 0 1px #aaa, inset 0 -1px 0 #ccc;
    &:hover {
      box-shadow: inset 1px 1px 0 #ccc;
      opacity: 0.6;
    }
  }
}

/* ---- */
/* category Styles */
/* ---- */
.categorySec {
  padding-top: clamp(24px, 3.5vw, 45px);
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 2%;
    right: 0;
    width: 20%;
    min-width: 160px;
    aspect-ratio: 1;
    background-image: linear-gradient(45deg, #ffeff7, var(--color-bg));
    border-radius: 50%;
    z-index: -1;

  }
  &::after {
    content: "";
    position: absolute;
    top: 30%;
    right: 0%;
    width: 10%;
    min-width: 100px;
    aspect-ratio: 1;
    border-color: #feb2b8 var(--color-pink) var(--color-pink) #feb2b8;
    border-style: dotted;
    border-width: 5px;
    border-radius: 50%;
    z-index: -1;
  }
  .categoryList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 35px 10px;
    max-width: 790px;
    margin: 0 auto;
    padding: 10px 0 0;
    list-style: none;
    @media (max-width:490px){
gap: 20px 10px;
    }
  }

  .categoryItem {
    width: calc(100% / 3 - 20px);
    min-width: 150px;
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0 15px;
      border-radius: 6px;
      font-size: clamp(14px, 1.6vw, 20px);
      font-weight: 800;
      transition: all 0.2s;
      position: relative;
      outline: 1px dashed #fff;
      outline-offset: -3px;
      color: var(--color-text);
      text-shadow: 1px 1px 3px #ffffff7b;
      
      background-color: var(--cat-color, var(--color-gray));
      &::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        background: url(../images/deco/tape.png) no-repeat center / contain;
        max-width: 100px;
        width: 50%;
        aspect-ratio: 4 / 1;
        transform: translate(-50%, 0px) rotate(4deg);
        z-index: 1;
        opacity: 0.6;
        transition: all 0.2s;
      }

      &:hover {
        &::before {
          transform: translate(-50%, -10px) rotate(10deg);
        }
      }
    }
   
  }
}

/* ---- */
/* keyword Styles */
/* ---- */
.keywordSec {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 20%;
    min-width: 140px;
    aspect-ratio: 1;
    border: 5px dotted #fff;
    background-image: linear-gradient(45deg, #fff, #feb2b863);
    transform: rotate(10deg);
    opacity: 0.4;
    z-index: -1;
  }

  .keywordList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 5px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    transition: all 0.3s ease-in-out;

  }
  .keywordMore {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease;
  
    &.is-open {
      grid-template-rows: 1fr;
    }
  
    .keywordMoreInner {
      min-height: 0;
      overflow: hidden;
      visibility: hidden;
      transition: visibility 0s 0.5s;   /* 閉じ終わってから隠す */
  
      .keywordList {
        margin-top: 6px;
      }
    }
  
    &.is-open .keywordMoreInner {
      visibility: visible;
      transition-delay: 0s;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .keywordMore,
    .keywordMore .keywordMoreInner {
      transition: none;
    }
  }
  .moreBtnBox{
    
    .moreBtn {
      border: none;
      color: #fff;
      display: block;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      text-align: center;
      width: fit-content;
      margin: 20px auto;
      padding: 5px 20px ;
      background-color: var(--color-deco);
      transition: all .3s ease-in-out;

      &:hover{
        opacity: 0.5;
      }
    }
  }

  .keywordItem {
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: clamp(84px, 9.4vw, 120px);
      height: clamp(34px, 3vw, 38px);
      padding: 0 14px;
      border: 2px solid var(--color-orange);
      border-radius: 20px;
      background-color: #f5f5f5;
      font-size: clamp(12px, 1.3vw, 17px);
      color: #333;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      line-height: 1.1;

      &:hover {
        opacity: 0.4;
        border-color: var(--color-deco);
      }
    }

    /* 縁の色は6色を順番に繰り返し */
    &:nth-child(6n + 2) a {
      border-color: var(--color-pink);
    }
    &:nth-child(6n + 3) a {
      border-color: var(--color-purple);
    }
    &:nth-child(6n + 4) a {
      border-color: var(--color-blue);
    }
    &:nth-child(6n + 5) a {
      border-color: var(--color-orange);
    }
    &:nth-child(6n) a {
      border-color: var(--color-pink);
    }
  }

  .decoKeyword {
    right: clamp(0px, 2.7vw, 35px);
    bottom: 30px;
    width: clamp(70px, 11.7vw, 150px);
    height: clamp(80px, 13.3vw, 170px);
  }
}

/* ---- */
/* ranking Styles */
/* ---- */
.rankingSec {
  border-radius: clamp(48px, 7.8vw, 100px) clamp(48px, 7.8vw, 100px) 0 0;
  background-color: var(--color-purple);
  background-image: linear-gradient(var(--color-purple), var(--color-blue));
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30%;
    min-width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(var(--color-deco) 5px, transparent 5px),
      radial-gradient(var(--color-deco) 5px, transparent 5px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    z-index: 0;
    opacity: 0.2;
  }
  &::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0%;
    width: 20%;
    min-width: 130px;
    aspect-ratio: 1;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.7;
    @media (max-width:550px){
      top: 3%;
      opacity: 0.4;
    }
  }
  .titleBox {
    .titleDeco {
      color: #ffffffbc;
    }
  }

  .rankingList {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 1;
    .rankingItem {
      padding-block: clamp(16px, 2.2vw, 28px);
      border-bottom: 1px solid #ffffffb3;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
      .rankingLink {
        display: flex;
        align-items: center;
        gap: clamp(14px, 1.6vw, 18px);
        color: #333;
        text-decoration: none;
        transition: all 0.2s ease-in-out;

        @media (max-width: 550px) {
          flex-direction: column;
        }
        .rankingImg {
          position: relative;
          aspect-ratio: 5 / 3;
          width: 30%;
          min-width: 200px;
          @media (max-width: 550px) {
            width: 100%;
            max-width: 400px;
          }

          img {
            display: block;
            width: 100%;
            height: 100%;
            box-shadow: 2px 3px 10px #6d6d6d29;
            object-fit: cover;
          }

          /* &::after {
            position: absolute;
            inset: 5px -5px -5px 5px;
            content: "";
            border: 1px solid #fff;
            border-radius: 12px;
            pointer-events: none;
          } */
          &::after {
            content: "";
            position: absolute;
            inset: 5px -5px -5px 5px;
            background-color: #fff;
            transform: rotate(2.5deg);
            transition: all 0.3s ease-in-out;
            z-index: -1;
          }
          .rankingNum {
            position: absolute;
            top: -10px;
            left: 0;
            z-index: 1;
            width: clamp(50px, 6vw, 70px);
            height: clamp(50px, 6vw, 70px);
            border-radius: 12px 0 12px 0;
            img {
              object-fit: contain;
              box-shadow: unset;
            }
          }
        }

        .rankingBody {
          flex: 1;
          min-width: 0;
          .rankingMeta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 clamp(6px, 1vw, 12px);
            font-size: 12px;
            .cardCat {
              padding: 1px 10px;
              border-radius: 20px;
              background-color: #fff;
              font-size: 12px;
            }

            .rankingText {
              display: -webkit-box;
              max-width: 580px;
              margin: 0;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-size: clamp(12px, 1.1vw, 14px);
              line-height: 1.6;
            }
          }
        }
        &:hover {
          transform: scale(1.02);
          .rankingImg {
            &::after {
              transform: rotate(0);
              inset: 0;
            }
          }
        }
      }
    }
  }
  .deco {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 60%;
    min-width: 300px;
    aspect-ratio: 2 / 1;
    background-color: var(--color-bg);
    mask: url(../images/deco/deco01.png) no-repeat left / contain;
    z-index: 0;
    opacity: 0.4;
    &::before {
      content: "";
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      height: 4px;
      background: radial-gradient(
          circle,
          var(--color-deco) 3px,
          transparent 3px
        )
        left center / 14px 7px repeat-x;
      z-index: -1;
      opacity: 0.6;
    }
  }
}

/* ---- */
/* about Styles */
/* ---- */
.aboutSec {
  padding-top: clamp(40px, 5.5vw, 70px);

  .aboutBox {
    padding: clamp(28px, 4.3vw, 56px) 20px clamp(32px, 5vw, 64px);
    border: 4px solid var(--color-orange);
    border-radius: 12px;
    background-color: var(--color-bg);
    background-image: url("https://www.transparenttextures.com/patterns/ag-square.png");
    text-align: center;

    .titleBox {
      --deco-size: clamp(40px, 6.6vw, 85px);
      margin-bottom: clamp(12px, 1.6vw, 20px);

      .title {
        margin-left: 0;
        font-size: clamp(18px, 1.7vw, 22px);
      }
    }
  }

  .aboutText {
    margin: 0;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.8;
  }
}

/* ---- */
/* archive Styles */
/* ---- */
.archiveSec {
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 3.9vw, 50px);

  .archiveSelect {
    select {
      width: 100%;
      height: clamp(48px, 5.2vw, 66px);
      padding: 0 clamp(16px, 2.5vw, 32px);
      border: 1px solid #aaa;
      border-radius: 0;
      background-color: #f5f5f5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpolyline points='1,1 13,13 25,1' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right clamp(16px, 2.5vw, 32px) center;
      font-size: clamp(14px, 1.6vw, 20px);
      color: #333;
      appearance: none;
    }
    .option {
      margin-top: 30px;
    }
  }

  /* SNS（枠だけ。画像とリンクは自分で入れる） */
  /* .snsList {
    display: flex;
    justify-content: center;
    gap: 17px;
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    padding: 0;
    list-style: none;
  }

  .snsItem {
    width: 50px;
    height: 50px;
    background-color: var(--color-gray);
  } */
}

/* ---- */
/* sp Styles */
/* ---- */
@media (max-width: 768px) {
  .frontMain {
    .pcBr {
      display: none;
    }

    .newSec .cardItem:nth-child(n + 4) {
      display: block;
    }

    .rankingSec .rankingText {
      -webkit-line-clamp: 3;
    }
  }
}