/*
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 {
  font-family:"Montserrat", "Zen Kaku Gothic New", "Meiryo", sans-serif;
}

html{
    font-size: var(--pc-font-size);
    color:#5D5D5D;
    line-height: 1.6;
	letter-spacing:0.05rem;
    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: 500;
}

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

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


.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-1-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.col-1-layout .sidebar-area{
  display: none;
}

.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;
  }
}

.post-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
	justify-items: center;
}

@media screen and (max-width: 768px) {
  .post-list{
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
  }
}

@media screen and (max-width: 480px) {
  .post-list{
    grid-template-columns: 1fr;
    gap:16px;
  }
}

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

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

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

.single.content-width{
  width:clamp(320px,92%,1000px);
}


#main{
  margin-bottom:64px;
}

#main h1{
  position: relative;
  margin:48px 0 0 0;
}

.page-numbers{
    height: 48px;
    width: 48px;
    display: inline-block;
    text-align: center;
	color:#FF9979;
}
.page-numbers.current{
	background-color:#FF9979;
	color:#ffffff;
}


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

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

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

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

.header__nav ul{
    display: flex;
    align-items: center;
    gap:32px;
	font-size:14px;
}

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

footer{
  background-color: #FFFBF9;
}

.footer__inner{
  width: 88%;
  max-width: clamp(320px,100%,1000px);
  margin: auto;
    display: flex;
    justify-content: space-between;
}

@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('http://localhost:10018/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;
}

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

.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%;
}