@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用スタイル
************************************/
.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  line-height: 1.6;
}
h2.oswald {
  font-size: 26px!important;
}
h4.oswald {
  font-size: 21px!important;
}

h2,h3,h4{
  margin-top: 2em;
  margin-bottom:1.6em;
}
small{
  font-weight: 400;
}
.footer{
  padding: 0;
  margin-top: 40px;
}
.footer-bottom {
    margin-top: 0;
    background-color: #57321c;
    color: #FFF;
}
.copyright {
    margin-top: 0;
}
p.home a{
  color: #57321c;
  text-decoration: none;
}

p.home a::after {
  content: "\f054";
  font-family: fontawesome;
  margin-left: 10px;
  color: #57321c;
}
.copyright a{
  color: #FFF;
  text-decoration: none;
}
.copyright a:hover{
  color: #E7615E;
}
.go-to-top-button{
  background-color: #E7615E;
  color: #FFF;
}
/*  フロントページ用　.home */
.home .content{
  margin-top: 0;
}
 
/* --------------------------------------
 * フロントページ　メニュー
 * -------------------------------------- */
.header-wrap{
    background-color:#57321c;
}
.header-wrap .left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 100px);
    position: relative;
    padding: 1em 0 1em 1em;
    gap: 12px;
}

.header-wrap .right{
    position: absolute;
    top: 8px;
    right: 1em;
    }
.header-wrap .right img:first-of-type{
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(7468%) hue-rotate(339deg) brightness(107%) contrast(101%);
    }
.header-wrap .right img:first-of-type:hover{
    filter: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(1391%) hue-rotate(321deg) brightness(95%) contrast(90%);

    }
.header-wrap .right a:first-of-type,.header-wrap .right a:first-of-type i{
    text-decoration: none;
    font-size: 30px;
    color: #fff;
    }
 .header-wrap .right i.fa{
    text-decoration: none;
    font-size: 30px;
    color: #fff;
    }
.header-wrap .right a:hover i.fa{
  color: #E7615E;
}

.header-wrap h1{
  display: inline-block;
  margin-right: 24px;
  font-size: 30px;
  color: #FFF;
}
.header-wrap h1 a{
  color: #FFF;
  text-decoration: none;
}
.header-wrap h1 a:hover{
  color: #E7615E;
}

/* --------------------------------------
 * フロントページ　mainvisual
 * -------------------------------------- */
 main.front-main{
  position: relative;
 }
.front-mv-area {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 40px 20px; */
}

.front-mv-inner {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

.front-mv-left {
  flex: 0 0 50%;
}

.front-mv-right {
  flex: 1;
}

.front-page-title {
  font-size: 1.8rem;
}

.front-page-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.front-page-categories li {
  /* margin-bottom: 0.5rem; */
  /* display: block; */
  float: left;
  margin-right: 16px;
  font-size: 15px;
}
.front-page-categories li:before {
  content: "\f0da";
  font-family: fontawesome;
  margin-right: 10px;
  color: #FFF;
}
.front-page-categories li:hover:before {
 color: #E7615E;
}

.front-page-categories a {
  color: #FFF;
  text-decoration: none;
}
.front-page-categories a:hover {
  color: #E7615E;
}


/* 背景ループアニメ */
.loop-bg {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  height: 450px;
  overflow: hidden;
  z-index: 0;
}

.loop-track {
  display: flex;
  width: calc(100% * 2); /* 画像2枚分の幅 */
  animation: scrollLoop 40s linear infinite;
  will-change: transform;
  transform: translateZ(0); 
  backface-visibility: hidden;
}

.loop-track img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

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

.front-content{
  /* padding:0 2rem; */
  padding: 2rem;
  max-width: 1600px;
  margin: auto;
}



/* 左コンテンツ */
.front-mv-area {
  position: relative;
   /* height: 45vh; */
  display: flex;
  align-items: center;
  z-index: 1;
}

.front-mv-inner {
  /* position: relative; */
  position: absolute;
  top: 0;
  z-index: 1;
  padding: 0 2rem;
  color: #fff;
}

.front-mv-left {
    position: relative;
    z-index: 2;
    /* background-color: #3e2c15; */
    background-color: #57321c;
    border-radius: 0 0 20px 20px;
    padding: 2em;
}

/* --------------------------------------
 * フロントページ　about
 * -------------------------------------- */

 .content-in div.about{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 32px;
  width: 80%;
  margin: 60px auto 0;
  max-width: 1000px; 
 }
 @supports (-webkit-touch-callout: none) {
  /* Safari向けのCSS */
   .content-in div.about{
    margin-top: 100px; /* Safari専用の調整 */
  }
}
 .content-in .pic{
  max-width: 80px;
  object-fit: cover;
 }
 @supports (-webkit-touch-callout: none) {
  /* Safari向けのCSS */
  .pic {
    margin-top: 20px; /* Safari専用の調整 */
  }
}
 .content-in .txt{
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 16px 20px;
  color: #333;
  font-size: 0.95rem;
 }
 /* 吹き出しの三角部分（左側） */
.about .txt::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 28px;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #ddd transparent transparent;
}

.about .txt::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 28px;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
/* リンク装飾（任意） */
.about .txt a {
  color: #c27c6b;
  text-decoration: underline;
}
.about .txt a:hover {
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
.content-in div.about{ 
    flex-direction: column;
    align-items: center;
    width: 100%;
    row-gap: 20px;
    margin-top: 0;
    
  }

  .about .pic {
    text-align: center;
    margin: auto;
  }
  .about .txt {
    max-width: 100%;
  }

  .about .txt::before,
  .about .txt::after {
    display: none; /* 縦並び時は吹き出しのしっぽを非表示 */
  }
}

/* --------------------------------------
 * フロントページ　Works サムネイル
 * -------------------------------------- */
.custom-four-column-grid {
    display: flex; /* Flexboxを有効にして横並びにする */
    flex-wrap: wrap; /* 画面幅が狭くなったら折り返す */
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

/* 各アイテムの設定 */
.custom-four-column-grid .grid-item {
    width: 20%; /* 100% / 4 = 25% */
    padding-left: 10px; /* 左右の隙間（適宜調整） */
    padding-right: 10px; /* 左右の隙間（適宜調整） */
    margin-bottom: 20px; /* 上下の隙間 */
    box-sizing: border-box; /* paddingをwidthに含める */
}

/* タイトルなどの装飾（必要に応じて） */
.custom-four-column-grid .post-title {
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    color:#333;
}

.custom-four-column-grid a {
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease;
}
.custom-four-column-grid a:hover {
    transform: translateY(-4px);
    opacity: .9;
}


/* サムネイルのコンテナ（親要素） */
.thumbnail-square-container {
    width: 100%;
    padding-top: 100%; /* 高さも幅と同じ100%にして正方形にする */
    position: relative; /* 子要素（画像）を絶対配置するために必要 */
    overflow: hidden; /* 画像がはみ出さないように */
}

/* 実際の画像（子要素） */
.thumbnail-square-container .custom-thumb-image {
    position: absolute; /* 親要素内の指定位置に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナ全体に表示し、はみ出た部分は切り取る */
    border-radius: 12px;
}

/* 一覧を見るボックス */
.thumbnail-square-container.view-all-box {
    background: #E7615E; /* ベタ塗り背景色 */
    color: #fff;
   position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: background 0.3s ease;
}
/* ホバー時 */
.thumbnail-square-container.view-all-box:hover {
    background:#ec6a68;
}

/* 中のテキスト横並び */
.thumbnail-square-container.view-all-box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 1rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Font Awesome 矢印 */
.thumbnail-square-container.view-all-box .text::after {
    content: "\f054"; /* → (Font Awesome icon) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* solid スタイル */
    display: inline-block;
    color: #fff;
}
.thumbnail-square-container.view-all-box .text::after {
  content: "\f105";
 font-family: "FontAwesome"; 
  font-weight: normal;
  margin-left: 0.4em;
  display: inline-block;
  transition: transform 0.3s;
}

.thumbnail-square-container.view-all-box:hover .text::after {
  transform: translateX(4px);
}

/************************************
** ストックイラスト部分
************************************/
/* -------------------------
   ギャラリーグリッド全体
------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* -------------------------
   個別カード
------------------------- */
.gallery-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease;
  padding: 12px;
  padding-bottom: 20px; /* ボタン下余白 */
  position: relative;
}

.gallery-item:hover {
  transform: translateY(-4px);
}

/* -------------------------
   画像
------------------------- */
.thumb-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------
   タイトル
------------------------- */
.info {
  margin-top: 8px; /* 画像とタイトルの間隔 */
}

.info h3 {
  font-size: 14px;
  margin: 0;
}

/* -------------------------
   ボタン
------------------------- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;           /* ボタン間スペース */
  margin-top: 8px;    /* タイトルとの間隔 */
  position: static;    /* 絶対配置解除 */
}

#gallery-as .buttons {
  padding-bottom: 20px; /* 下部余白確保 */
  padding-left: 15px;
}

.btn {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  position: static;
  border: 0;
}

.btn:hover {
  opacity: 0.8;
}

/* -------------------------
   ボタンカラー
------------------------- */
.adobe-btn { background-color: #333; }
.pixta-btn { background-color: #2A9D8F; }
.ac-btn{background-color:#E7615E ;}


/* -------------------------
   info-box系
------------------------- */
.is-style-info-box,
.info-box,
.sp-info,
.info {
  color: #333;
  background-color: #FFF;
  padding: 15px;
  border-radius: 4px;
}

.is-style-info-box,
.info-box,
.sp-info,
.info h3 {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}
/************************************
** 下層ページ 共通
************************************/
/* ヘッダ */
.logo-text {
    padding: 10px 0 20px;
    font-size: 1em;
    }
.navi-in ul.menu-pc {
    display: flex;
    padding-bottom: 20px;
  }

/************************************
** カテゴリページ
************************************/
.header-container{
  width: 80%;
  border-radius:0 0 20px 20px;
  background-color: #57321c;
  margin: auto;
  }
.header-container a{
  color: #FFF;
  }

  .navi{
    background-color: #57321c;
    border-radius:0 0 20px 20px;
  }
.logo{
      font-family: Oswald, sans-serif;
}
.navi-in > ul li {
        height: 40px;
}
.navi-in > ul li a .item-label:before {
  content: "\f0da";
  font-family: fontawesome;
  margin-right: 10px;
  color: #FFF;
}
 .header-container a:hover,
 .navi-in > ul li a:hover .item-label:before {
 color: #E7615E;
 background-color: transparent;
}

h1#archive-title{
  font-size: 20px;
  line-height: 3em;
}

#list {
  max-width: 1200px;
  margin: auto;
}
#list .card-thumb img {
    width: 100%;
    border-radius: 20px;
}

/* ==== オーバーレイ（PC用） ==== */
.gallery-item {
  position: relative;
  overflow: hidden;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .overlay {
  opacity: 1;
}
.overlay-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==== カード下ボタン ==== */
.info {
  padding: 10px 12px 14px;
}
.info h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.stock-btn:nth-of-type(2){
  background-color: #2A9D8F;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #57321c;
  padding: 24px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.portfolio-card h3 {
  font-size: 15px;
  margin-bottom: 20px;
  color: #fff;
}

.portfolio-card a {
  display: block;
  padding: 4px;
  text-decoration: none;
  color: #57321c;
  background-color: #FFF;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  margin-bottom: 4px;
}

.portfolio-card a:hover {
  color: #E7615E;
}
.portfolio-card .info {
  background-color: transparent;
}
/* ==== カード下のボタン（.btn-container）を PC時のみ非表示/スマホではオーバーレイ非表示 ==== */
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover .btn-container {
    display: none; 
  }
}
@media (hover: none) and (pointer: coarse) {
  .overlay {
    display: none;
  }
}

/************************************
** お問い合わせページ #post-42
************************************/
#post-42 form{
    width: 80%;
    margin: 0 auto;
    max-width: 600px;
}
input[type=submit] {
  background-color: #57321c;
  color: #FFF;
}
input[type=submit]:hover {
 background-color: #E7615E;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #57321c;
    text-align: center;
    font-size: 14px;
}
.wpcf7-response-output {
    font-size: 14px;
    text-align: center;
}

/************************************
** 投稿ページ
************************************/

.single article{
  max-width: 600px;
  margin: 0 auto;
}
.single #sidebar{
    display: none;
}
.entry-title, .archive-title {
    font-size: 20px;
    text-align: center;
    color: #57321c;
    margin-top: 30px;
}
.eye-catch-wrap {
    justify-content: center;
}
figure.eye-catch img{
  border-radius: 20px;
  border: 20px solid #FFF;
}
.single .entry-content{
  font-size: 14px;
}

.pager-post-navi {
    margin: 38px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.pager-post-navi .cf::after {
    display: none;
    content:none;
}

  .cat-link {
  background-color: #57321c;
  }
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

}
/*974px以下*/
@media screen and (max-width: 1023px){
    .header-wrap {
      height: auto;
    }
}
/*950px以下*/
@media screen and (max-width: 950px){
  .front-page-title {
    margin-bottom: 0;
  }
}


/*834px以下*/
@media screen and (max-width: 834px){
   .content-in > h2{
    margin-top: 1em;
  }
    .front-mv-inner {
    /* top: 30%; */
        display: block;
        border-radius: 0 20px 20px 0 ;
  }
  .loop-track img {
    width: 100%
  }

@supports (-webkit-touch-callout: none) {
  /* iOS Safari にだけ適用するCSS */
  .loop-track {
    animation-duration: 60s; /* Safariだけゆっくり */
  }
}

}

/*767px以下*/
@media screen and (max-width: 767px) {
  .loop-track img {
    display: none;
  }

  .loop-bg {
    background-image: url("./images/bg_main-vis-long.jpg");
    background-size: cover;
    background-repeat: repeat-x;
    animation: scrollLoopBg 80s linear infinite;
  }

  @keyframes scrollLoopBg {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 0;
    }
  }


.header-wrap .right{
    display: flex;
    flex-direction: column;
    align-items: center;
    }
  /* .front-content {
      margin-top: 110px;
  } */

  .front-mv-inner {
    padding: 0 1rem;
  }

  .front-page-title {
    font-size: 2.0rem;
  }
  .front-mv-left {
    flex: 0 0 100%;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    }
    .custom-four-column-grid .grid-item {
        width: 50%; /* 2カラムに変更 */
    }

/* 一覧を見るボックス*/
.thumbnail-square-container.view-all-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }


  .thumbnail-square-container.view-all-box .arrow {
    font-size: 1.6rem;
    margin-bottom: 6px;
  }

  .thumbnail-square-container.view-all-box .text {
    font-size: 0.95rem;
  }
}
/*584px以下*/
@media screen and (max-width: 584px){
     .content-in:first-of-type > h2{
    margin-top: 2em;
  }
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}