/*
Theme Name:CF-THEME
*/
@import url("/wp-content/themes/CF-THEME/assets/css/variable.css");

/* CSS管理
--------------------------
グリッドレイアウト
共通コンポーネント：style.css
ユーティリティ：assets/util.css
変数；assets/variable.css
その他：Tailwind.css
--------------------------
*/

html, body {
  overflow-x: hidden;
  font-family:Arial, "Noto Sans JP", sans-serif;
}

html{
    font-size: var(--pc-font-size);
    color:#282828;
    line-height: 1.6;
    scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
  html{
    font-size: var(--sp-font-size);
  }
}

a{
  transition: filter 0.3s ease;
}

a:hover{
  filter: brightness(1.1);
}

#main h1{
  font-size: 1.6rem;
  font-weight: 700;
}

#main h2{
  font-size: 2.4rem;
  font-weight: 700;
}

#main h3{
  font-size: 1.1rem;
  font-weight: 700;
}


.fade .animation-bg {
  background: #F7AF07;
  content: "";
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation-name: PageAnime-fade;
  animation-duration: 0.5s;
  animation-delay: 1.0s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}
 
@keyframes PageAnime-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}


/****************
レイアウト
サイドナビ有（対応：投稿/CSR/会社概要）
****************/

.col-2-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 80px;
  padding: 0 24px;
  grid-template-areas: "sidebar-area article-area";
}

.col-2-layout .sidebar-area{
  grid-area: sidebar-area;
}
.col-2-layout .article-area{
  grid-area: article-area;
}

@media screen and (max-width: 1200px) {
  .col-2-layout {
    grid-template-columns: 210px 1fr;
    column-gap: 24px;
  }
}

@media screen and (max-width: 768px) {
  .col-2-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0;
    grid-template-areas: "article-area" "sidebar-area";
  }
}

@media screen and (max-width: 768px) {
  .sidebar-area{
    margin-top:6rem;
  }
}


/****************
固定・投稿共通
****************/

.page,.single{
  padding-top:100px;
}

@media screen and (max-width: 639px) {
  .page,.single{
    padding-top:64px;
  }
}

#main{
  margin-bottom:64px;
}

#main h1{
  position: relative;
  margin:48px 0 16px 0;
  padding-left: 40px;
}

#main h1:before{
  content: "";
  background: url('https://laughing-hermann.153-122-6-135.plesk.page/wp-content/uploads/2025/09/h1_title_deco.png') no-repeat center center;
  background-size: contain;
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0px, -50%);
}

@media screen and (max-width: 768px) {
  #main h1{
    padding-left:0;
  }

  #main h1:before{
    display:none;
  }
}


/***************
共通 ヘッダー
***************/

header{
    position: fixed;
    width: 100%;
    z-index: 999;
}

.header{
  transition: background-color 0.3s ease;
}

.header--scrolled {
  background-color: #ffffffdc;
}

.header__nav ul,.footer__nav ul{
    display: flex;
    align-items: center;
    gap:32px;
}

/***************
共通 フッター
***************/

footer{
  background-color: #3D3D3D;
}

.footer__inner{
  width: 88%;
  max-width: var(--content-width);
  margin: auto;
}

@media screen and (max-width: 1023px) {
.footer__nav .menu{
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
}

.footer__nav .sub-menu{
    display: block;
    font-size: 13px;
    padding-left: 12px;
    border-left: 1px solid;
    margin-top: 16px;
}

.footer__sns .icon-img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.footer__sns li p span{
  font-size:10px;
}

.footer__copyright p{
  font-size: 12px;
}

/****************
ハンバーガーメニュー
****************/

/* 初期非表示 */
.hamburger {
  display: none;
}

/* ハンバーガーアイコン（三本線） */
.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #000;
  margin: 5px 0;
  transition: all 0.3s ease;
  position: relative;
}

/* OPEN状態（バツ印） */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* モバイル用メニュー（右からスライド） */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 640px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 999;
  padding: 60px 20px;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu li {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
.mobile-menu a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
}

/* メニュー表示時 */
.mobile-menu.open {
  right: 0;
}

/* ハンバーガーを768px以下で表示 */
@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
    /* position: fixed; */
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: none;
    border: none;
  }
}

/* PCサイズではメニューを非表示 */
@media screen and (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }
}


/****************
トップ
****************/

.fv{
  position: relative;
}

.fv h2{
  position:absolute;
  line-height: 1.1;
  font-family: var(--font-mincho);
  font-feature-settings: 'palt' on;
  top: 20%;
  right: 8%;
  z-index: 1;
}

.concept .concept__inner{
grid-template-columns: 420px 580px;
overflow-x: visible;
}

@media screen and (max-width: 768px) {
  .concept .concept__inner{
      grid-template-columns: 1fr;
  }
}

.company{
  background-color: #E7B134;
}

.company__btn--link{
  color: #E7B134;   
}

@media screen and (max-width: 768px) {
.company .slick-list{
  bottom:-54px;
}
}


.dot-line {
  display: flex;
  justify-content: center;
  margin-right: 186px;
}

@media screen and (max-width: 768px) {
  .dot-line {
    justify-content: flex-end;
    margin-right: 0;
  } 
}


.dot-line li {
  width: 22%;
  height: 4px;
  margin: 24px 5px;
  background: #D0D0D0;
  cursor: pointer;
}

.dot-line li:hover,
.dot-line li.slick-active {
  background: var(--main-color);
}
.dot-line li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

.slide-number {
  position: absolute;
  bottom: 0;
  left: 24px;
  transform: translateX(-50%);
  color: #000000;
  padding: 5px 10px;
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}
.slick-slide {
  position: relative;
}

.fv-slider .slide-number-fixed {
  position: absolute;
  bottom: 4px;
  left: 0;
  color: #000000;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
}

.slide-out-left {
  animation: slideOutLeft 1.5s forwards;
  z-index: 1;
}

/* アニメーション定義 */
@keyframes slideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}

.product-slider .slick-list{
  overflow-y: clip;
}

.product-slider li:nth-child(2n){
  position: relative;
  top:40px;
}

.receipe{
  position: relative;
}

.receipe h2{
  position:absolute;
  line-height: 1.1;
  font-family: var(--font-mincho);
  font-feature-settings: 'palt' on;
  top: 20%;
  right: 8%;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .receipe h2{
    top: 12%;
    right: inherit;
    left: 5%;
  }
}

.news .news__inner{
  grid-template-columns: 1fr 66%;
}

@media screen and (max-width: 1023px) {
.news .news__inner{
  grid-template-columns: 1fr;
}
}

.recruit-slider .slide-number-fixed {
  position: absolute;
  bottom: inherit;
  left: 0;
  color: #000000;
  padding: 6px 0;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
}

.slider-number {
  color: #000000;
}
.slider-number.active {
  color: #FF2E00;
  text-decoration: underline;
  text-underline-offset: 0.8em;
}

.recruit{
  padding:2% 2% 88px;
}

.recruit .bg-blend {
  background: url('https://laughing-hermann.153-122-6-135.plesk.page/wp-content/themes/CF-THEME/assets/images/top/rectuit_bg.png') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.recruit .slick-list{
  overflow: visible;
}

/* SVGにブレンド効果を付与 */
.logo-svg {
  mix-blend-mode: difference;
  opacity: 1;
  pointer-events: none;
}

/* スライダー項目調整 */
.logodeco-slider {
  position: relative;
  z-index: 10;
}

.logodeco-slider .slick-slide {
  transform: none !important;
  will-change: auto !important;
  background: transparent !important;
}


/****************
会社情報
****************/

.about-info__table{
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "dt" "dd";  
}

@media screen and (max-width: 768px) {
  .about-info__table{
    grid-template-columns: 1fr;
  }
}


/****************
ごまの歴史
****************/

@media screen and (max-width: 768px) {
  .history .col-2-layout {
     grid-template-columns: 20% 80%;
     column-gap: 0;
     padding: 0;
     grid-template-areas: "sidebar-area article-area";
   }
 }
 
 .bg-01{
 content:"";
 background: url('http://localhost:10018/wp-content/themes/CF-THEME/assets/images/page/history/history_bg_001.png');
 background-repeat: repeat;
 background-size: inherit;
 border-radius: 40px;
 background-position: center top;
 }
 
 .indicator {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 1rem;
   position: relative;
 }
 
 .indicator .dot {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 9999px;
   background-color: #d1d5db;
   z-index: 1;
   transition: background-color 0.3s;
 }
 
 .indicator .line {
     height: 40px;
     width: 2px;
     background-color: #d1d5db;
     margin-top: 0;
     flex-grow: 1;
 }
 
 /* 最後だけ線を非表示にする */
 .history__list:last-child .indicator .line {
   display: none;
 }
 
 /* アクティブ時の色変更 */
 .history__list.is-active .dot {
   background-color: #f59e0b;
 }
 
 @media (max-width: 767px) {
   .history__list a {
     display: none;
   }
   .history__list.open a {
     display: inline-block;
   }
 }
 
 @media (max-width: 767px) {
   .history-nav{
     position:relative;
     background-color: #f3f4f6;
     width: 48px;
     padding: 24px 16px;;
     border-radius: 16px;
   }
 
 .history-nav button{
   position: absolute;
   top: 40%;
   left: 28px;
   transform: translate(0, 50%);
   }
 }
 
 @media screen and (max-width: 768px) {
   .history-nav__list__link {
     display: inline-block;
     transform: translateX(-100%);
     opacity: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     white-space: nowrap;
   }
 
   /* 表示時の状態 */
   .history__list.open .history-nav__list__link {
     transform: translateX(0);
     opacity: 1;
   }
 }
 
 /* ↓ これを style タグまたは CSS ファイルに追加（Tailwind に合わせてください） */
 @media screen and (max-width: 768px) {
   .history-nav__inner .history-nav__list__link {
     opacity: 0;
     pointer-events: none;
     transform: translateX(-100%);
     transition: all 0.3s ease;
   }
 
   .history-nav__inner.open .history-nav__list__link {
     opacity: 1;
     pointer-events: auto;
     transform: translateX(0);
   }
  }

/****************
お問い合わせ
****************/

.contact__table{
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "contact__title" "contact__form";  
}

@media screen and (max-width: 768px) {
  .contact__table{
    grid-template-columns: 1fr;
  }
}

.contact__form{
  padding:8px 16px;
}

.contact__form input,.contact__form textarea{
border:1px solid #d0d0d0;
}

.contact__form input,.contact__form label{
  display: inline-block;
  min-height: 40px;
}

.contact__form .contact__form__address ,.contact__form .contact__form__address input{
  display: inline-block;
  min-width: 86px;
}

.contact__form__free-space label ,.contact__form__free-space span ,.contact__form__free-space textarea{
  width: 100%;
}