@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

a:hover .product-summary {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

table th,
table td {
  border: 0px solid var(--cocoon-x-thin-color);
  padding: 6px;
  font-size: 80%;
}

.entry-title, .archive-title {
  font-size: 23px;
  margin: 0px 0px 16px;
  line-height: 1.2;
  padding: 0px 0px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 800;
}



.article h2 {
  padding: 18px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 18px;
  border-radius: 0 0 15px 0;
  background-color: #333;
  color: #fff;
  padding: 10px 15px 12px;

}

.related-entry-card .cat-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
}


.article h3 {
  border-left: 0px;
  border-bottom: 1px solid var(--cocoon-thin-color);
  padding-bottom: 2px;
  font-size: 18px;
  padding: 5px 2px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}


.article h4 {
  border-left: 0px;
  border-bottom: 1px solid var(--cocoon-thin-color);
  border-top: 0px solid var(--cocoon-thin-color);
  padding-bottom: 2px;
  font-size: 17px;
  padding: 7px 0px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}

.navi-in > ul li {
  display: block;
  width: 176px;
  height: 40px;
  line-height: 40px;
  position: relative;
}
.kaerebalink-box {
  padding: 22px 25px 0px;
  border-radius: 15px;
  width: 96%;
  border: 2px solid #dfdfdf;
  box-sizing: border-box;
  position: relative;
}
.kaerebalink-name {
font-size: 1em;}


.sns-buttons a {
  align-content: center;
  align-items: center;
  background-color: var(--cocoon-sns-color);
  border-radius: var(--cocoon-basic-border-radius);
  display: inline-flex;
  font-size: 16px;
  justify-content: center;
  height: 30px;
  margin-bottom: 8px;
  position: relative;
  text-align: center;
  width: 32%;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  color: var(--cocoon-white-color);
  text-decoration: none;
}
.sns-share-buttons a .share-count {
position: absolute;
right: 3px;
font-size: 10px;
line-height: 1;
}


.sns-follow-message, .sns-share-message {
  font-style: italic; /* フォントスタイルをイタリックに設定 */
  font-size: 60px;
  color: #444;
  margin: 0 0 10px 0;
  line-height: 1.25;
  font-family: "anton-regular", sans-serif;
  font-weight: 500;
  text-align: left;
  margin-bottom: -20px;
  position: relative; /* 親要素の位置を相対位置に設定 */
  overflow: hidden; /* はみ出た内容を非表示に設定 */
}

.sns-follow-message::after, .sns-share-message::after {
  content: ""; /* 内容は空 */
  position: absolute; /* 絶対位置指定 */
  bottom: 5px; /* 要素の下部に配置 */
  left: 0; /* 左端から */
  right: 0; /* 右端まで */
  height: 20px; /* 下部30pxを覆う */
  background-color: white; /* 覆う色（背景に合わせる） */
}



.store-introduction {
  border: 1px solid #ccc;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.store-header {
  display: flex;
  align-items: center;
}
.store-name {
  margin: 0;
  font-size: 1em;
  flex: 1;
}
.store-image {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}
.store-details {
  margin-top: 16px;
  margin-bottom: 0px;
}
.store-details p {
  margin: 3px 0;
}
.store-description {
  line-height: 1.4em;
}
.block-columns {
  margin: 0 0;
}



.logo-image {
  padding: 15px 0px 0px;
  font-size: inherit;
}
.tagline {
  text-align: center;
  font-size: 14px;
  margin: -1.2em .6em .5em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/*関連エントリーカード*/
.related-entry-heading,
.comment-title {
  font-family: 'Noto Serif JP', serif;
  margin: 22px 0;
  font-size: 24px;
}

.related-entry-card-title {
  font-size: 20px;
  font-family: 'Noto Serif JP', serif;
}

/* 全体リンクのスタイル */
.link-container {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* コンテナ全体 */
.container1 {
  width: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
  overflow: hidden; /* コンテナからのはみ出し防止 */
}

.container1:hover {
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 行設定 */
.row {
  display: flex; /* 横並び */
  align-items: stretch; /* 子要素の高さを揃える */
  flex-wrap: nowrap; /* 折り返し防止 */
  width: 100%; /* 行全体を100%幅に */
}

@media (max-width: 768px) {
  .row {
    flex-direction: column; /* 縦並び */
  }
}

/* 写真エリア */
.image-container {
  display: flex; /* 写真を横並びに */
  justify-content: space-between; /* 写真を均等に配置 */
  flex: 1; /* 親要素内で伸縮 */
  overflow: hidden; /* はみ出し防止 */
}

.img-fluid1 {
  width: 50%; /* 2枚が横並びになるよう調整 */
  height: auto; /* アスペクト比を維持 */
  object-fit: contain; /* 親要素内に収める */
  display: block;
  border-radius: 0; /* 角丸を削除 */
}

/* テキストエリア */
.text-container {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 0; /* 角丸を削除 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* テキストを中央揃え */
}
.mb-0 {
  margin-bottom: 0 !important;
}
/* カラム設定 */
.col-md-6 {
  flex: 0 0 50%; /* 左右で半分ずつ */
  max-width: 50%;
}

@media (max-width: 768px) {
  .col-md-6 {
    flex: 0 0 100%; /* スマホでは全幅 */
    max-width: 100%;
  }
}
/


/* 商品概要 */
.product-summary {
  margin: 20px;
}

.product-summary h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.product-summary p {
  font-size: 1em;
  color: #666;
  margin-bottom: 15px;
}

.summary-box {
  background-color: #f2f2f2; /* グレー背景 */
  border-radius: 8px; /* 角丸 */
  padding: 15px;
  color: #333;
}

.summary-box ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.summary-box p {
  margin-top: 10px;
  line-height: 1.8;
}

/* レビューセクション */
.reviews-section {
	background-color: #fff; /* 薄クリーム色 */
 	border-radius: 0px 0px 16px 16px; /* 都型の角丸 */
	border-color: #e6e6e6;
	border-width:4px;
 }

.reviews-header {
  border-radius: 8px 8px 0 0; /* 都型の角丸 */
  text-align: right;
  padding: 3px 10px;
  font-size: 0.8em;
  font-weight: bold;
  background-color: orange; /* オレンジ色の背景 */
  position: relative;
  border: 3px solid orange; /* オレンジ色の縁、太さ3px */
	  box-sizing: border-box; /* 縁を内側に含める */
}

.reviews-header span {
		align-items: center; /* 縦方向の中央揃え */
  position: absolute;
  top: 5px;
  left: 10px;
  color: #fff;
}
.reviews-box {
	  font-size: 0.8em;
  margin-bottom: 14px;
  background-color: transparent; /* ヌキ */
  border-radius: 0 0 8px 8px; /* 都型の角丸 */
  border: 3px solid orange; /* オレンジ色の縁、太さ3px */
  padding: 10px;
  color: #333;
  box-sizing: border-box; /* 縁を内側に含める */
}


.wp-block-heading {
  margin-bottom: 0px;
}

.article h3 {
  margin-bottom: 0.5em;
}

/*本文下カテゴリ*/
.cat-link {
  color: var(--cocoon-black-color);
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #fff;
  word-break: break-all;
}
.cat-link:hover {
  opacity: 0.5;
  color: var(--cocoon-black-color);
}

.entry-categories-tags {
  margin-bottom: 10px;
}

.entry-categories-tags > div {
  margin-bottom: 0em;
}

.date-tags {
  font-size: 1.1em;
  line-height: 0.8;
  text-align: right;
  margin-bottom: 0em;
}

.sns-buttons {
  display: flex
  align-items: center;
}

.tag-link  {
  color: var(--cocoon-black-color);
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 1px 5px;
  font-size: 12px;
  border: 0px solid var(--cocoon-x-pallid-text-color);
  background-color: #fff;

  word-break: break-all;
}
.tag-link:hover  {
  opacity: 0.5;
  color: var(--cocoon-black-color);
}

.entry-content {
  margin-top: 1em;
  margin-bottom: 0em;
}


.related-entry-card-content {
  padding-bottom: 0em;
}

.related-entry-card-title {
  font-size: 16px;
  line-height: 20px;
}

.widget-entry-card {
  font-size: 15px;
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}


  .e-card-title {
      font-size: 18px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 23px;
  }
@media screen and (max-width: 834px) {
  .entry-card-title, .related-entry-card-title {
      font-size: 17px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 21px;

  }
}
@media screen and (max-width: 480px) {
  .e-card-title {
      font-size: 16px;
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      line-height: 20px;
  }
}

.entry-card-content {
  padding-bottom: 0.2em;
}

.entry-categories-tags {
  margin-bottom: 10px;
}


sidebar h2, .sidebar h3 {
  background-color: var(--cocoon-xx-thin-color);
  padding: 8px;
  margin: 8px 0;
  border-radius: var(--cocoon-badge-border-radius);
}




 .cmp-body {
            font-family: sans-serif;
            line-height: 1.5;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0px;
        }
        .cmp-header {
            background: linear-gradient(135deg, #f8f8f8, #efefef);
            color: #333;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
            border: 3px solid #FF1493;
        }
        .cmp-title {
            color: #FF1493;
            margin: 0;
            font-size: 2.5em;
        }
        .cmp-subtitle {
            margin-top: 10px;
            font-size: 1.2em;
        }
        .cmp-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 10px;
        }
        .cmp-full-width {
            grid-column: 1 / -1;
        }
        .cmp-card {
            margin-bottom: 10px;
        }
        .cmp-heading {
            border-bottom: 3px solid #FF1493;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .cmp-chart-container {
            position: relative;
            height: 300px;
            margin: 20px 0;
        }
        
        .cmp-metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
       .cmp-metric-grid1 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .cmp-metric-card {
            background: #f8f8f8;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            border: 2px solid #FF1493;
        }
        .cmp-metric-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #FF1493;
        }
        
        .cmp-metric-value1 {
            font-size: 1.3em;
            font-weight: bold;
            color: #FF1493;
        }
        .cmp-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .cmp-table th, 
        .cmp-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .cmp-table th {
            background-color: #f0f0f0;
            color: #333;
            font-weight: bold;
        }
        
        .cmp-highlight-box {
            background: #f8f8f8;
            border: 2px solid #FF1493;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .cmp-footer {
            padding: 10px;
            margin-top: 10px;
            font-size: 0.8em;
        }
        .cmp-text-s {
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .cmp-container {
                grid-template-columns: 1fr;
            }
        }

        .cmp-metric-grid {
    display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2カラムに */
    gap: 10px;
}
        .cmp-metric-grid1 {
    display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2カラムに */
    gap: 10px;
}

@media (min-width: 600px) {
    .cmp-metric-grid {
        grid-template-columns: repeat(3, 1fr); /* 画面幅600px以上で3カラムに */
    }
}

.cmp-section-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .cmp-section-two-col {
    grid-template-columns: 1fr;
  }
}

        .cmp-warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 15px;
            margin: 15px 0;
            font-size: 0.9em;
        }




.navi-in > ul li {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    position: relative;
}

footer {
    margin-top: 10px;
}


.wp-block-categories-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0em 5px 0 0; /* カラムと行間の余白 */
  list-style: none; /* デフォルトのリストスタイルを消したい場合 */
  padding: 0; /* パディングリセット（任意） */
}

.sidebar h2, .sidebar h3 {
    font-family: 'Noto Serif JP', serif;
    background-color: var(--cocoon-xx-thin-color);
    padding: 4px 0 4px 10px;
    margin: 6px 0;
    border-radius: var(--cocoon-badge-border-radius);
}

.wp-block-list {
  list-style: none;
  padding-left: 0px;
  margin-left: 10px;
}

.wp-block-heading {
  margin-bottom: 10px;
  padding: 10px;
}

.footer {
  padding: 0;
}


.entry-title {
  font-size: 34px;
  margin: 16px 0;
  line-height: 1.2;
}


@media (max-width: 767px) {
  .entry-title {
    font-size: 26px;
  }
}


.auto-gallery-slider {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}
.auto-gallery-slider h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
}
.auto-gallery-slider img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.2s ease;
}
.auto-gallery-slider a:hover img {
    transform: scale(1.03);
}

.auto-gallery-slider .swiper {
    height: 180px; /* 好きな高さに調整（例: 300px） */
}

.auto-gallery-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.auto-gallery-slider .swiper-slide img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* 元の比率を保ちつつ収まるように表示 */
}


.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #999; /* ← グレー（お好みで #aaa や #ccc に調整可） */
}


.londrina-shadow-regular {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 400;
  font-style: normal;
}




/************************************
** プロフィールボックス
************************************/
.author-box {
  border: 1px solid var(--cocoon-basic-border-color);
  border-radius: 8px;
  line-height: 1.4;
  position: relative;
  padding: 1.6% 2.2% 2%;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.3;
}
.author-box .sns-follow {
  margin: 0;
}
.author-box .sns-follow-message {
  display: none;
}
.author-box .sns-follow-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.author-box .sns-follow-buttons a.follow-button {
  font-size: 0.8rem;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  margin-right: 4px;
  background-color: transparent;
  color: var(--cocoon-x-pallid-text-color);
  border: 1px solid var(--cocoon-basic-border-color);
  border-radius: 2px;
}
.author-box .sns-follow-buttons a.follow-button:hover {
  background-color: var(--cocoon-xxx-thin-color);
}
.author-box .sns-follow-buttons a.follow-button .follow-count {
  display: none;
}
.author-box .author-name {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.4em;
}

.author-thumb {
  float: left;
  margin-top: 3px;
  width: 120px;
}

.author-content {
  margin-left: 130px;
}



.nwa .author-box {
  text-align: center;
  padding: 20px;
}
.nwa .author-box .author-thumb {
  float: none;
  width: 100px;
  margin: 9px auto 0;
}
.nwa .author-box .author-content {
  margin: 0;
  padding: 1em;
}
.nwa .author-box .author-description {
  text-align: left;
}
.nwa .author-box .sns-follow-buttons {
  justify-content: center;
}
.nwa .author-box .sns-follow-buttons a {
  display: inline-block;
  margin: -10px 0 -2px;

}