@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
@font-face{
  font-family:'GenEiLateMinN';
  src:url('/wp-content/uploads/fonts/GenEiLateMinN.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap; /* まずは swap を推奨（後で optional に替えてもOK） */
}

@font-face{
  font-family:'GenEiLateMinP';
  src:url('/wp-content/uploads/fonts/GenEiLateMinP.woff2') format('woff2');
  font-weight:600; /* 不明なら 400 で可。後で調整 */
  font-style:normal;
  font-display:swap;
}

body{
  font-family: 'GenEiLateMinN', serif;
}

.body .wp-block-image {
margin-bottom:0 !important;
}

.nayami {
  position: relative;/*相対配置*/
	}

.nayami p {
font-size:26px;
  position: absolute;/*絶対配置*/
  color: #000;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
font-weight:bold;
line-height:2.0em;
  }

.midashi1 {
background-color:#c0853b;
text-align:center;
margin-bottom:0 !important;
font-weight:bold;
font-size:23px;
line-height:1.3em;
font-family: 'GenEiLateMinN', serif;
color:#fff;
padding:8px 0;
	}

.midashi2 {
background-color:#d85573;
text-align:center;
margin-bottom:0 !important;
font-weight:bold;
font-size:20px;
line-height:1.3em;
font-family: 'GenEiLateMinN', serif;
color:#fff;
padding:8px 0;
	}

line-height:1.3em;
font-family: 'GenEiLateMinN', serif;
color:#fff;
padding:8px 0;
	}

#main {
    padding: 0px !important;
}


/*———————————
PR表記
——————————–*/
.primg {
  position: relative;/*相対配置*/
margin-bottom:0 !important;
	}

.primg p {
background-color:#c0853b;
padding:1px 8px;
font-size:11px;
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 20px;
  right: 10px;
font-weight:bold;
  }

.primg img {
  width: 100%;
  }



/*———————————
固定ページのヘッダーを非表示にする
——————————–*/
.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
    margin-bottom: 15px;
}

@media screen and (max-width: 480px) {
    .body, .menu-content {
        font-size: 18px;
    }
}

.marker-blue {
    background-color:#ddd;
color:#000;
}

.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-bottom: 15px;
}

.article h2 {
    background-color: #da4c6e;
color:#fff;
}

#header{
display:none;
}

.content {
margin: 0 auto;
}

.column-narrow .content-in {
    width: 650px;
}

#main {
padding:15px;
}

@media screen and (max-width: 1255px) {
    .wrap {
        width: 650px;
    }
}
@media screen and (max-width: 1023px) {
    .content-in {
        width: 650px;
    }
}

@media screen and (max-width: 860px) {
    .column-narrow .content-in {
        width: 650px;
    }
}

@media screen and (max-width: 480px) {
    .column-narrow .content-in {
        width: 100%;
    }
}

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

img.btn_animate02 {
margin: 0 auto;
animation: skew 2.3s linear infinite;
transform-origin:center;
cursor: pointer;
}
/* skewの動きをここで設定 */
@keyframes skew {
0% {transform: skew(0deg, 0deg);}
5% {transform: skew(2deg, 2.2deg);}
10% {transform: skew(-1deg, -1deg);}
15% {transform: skew(0.5deg, 1.2deg);}
20% {transform: skew(-2deg, -1.5deg);}
25% {transform: skew(0.9deg, 0.9deg);}
30% {transform: skew(-0.6deg, -0.6deg);}
35% {transform: skew(0.3deg, 0.3deg);}
40% {transform: skew(-0.2deg, -0.2deg);}
45% {transform: skew(0.1deg, 0.1deg);}
50% {transform: skew(0deg, 0deg);}
}
/*———————————
固定ページのタイトルを非表示にする
——————————–*/
h1.entry-title{
display:none;
}

/*———————————
固定ページの日付を非表示にする
——————————–*/
.date-tags {
display: none;
}

/*———————————
メニューバーを非表示にする
——————————–*/
#navi{
display:none;
}

/*———————————
投稿者の表示を非表示にする
——————————–*/
.article-footer{
display: none;
}

/*———————————
３つのカテゴリーメニューを非表示にする
（設定ない場合は不要）
——————————–*/
.twice-notice{
display: none;
}

#breadcrumb{
display: none;
}

#footer{
display: none;
    margin-top: 0px;
}




/* ▼スマホでもPCと同じ3列を維持する強制オーバーライド */
/* ====== 都道府県テーブル：PCと同じ3列をスマホでも維持 ====== */
.pref-table-wrap { margin: 16px 0 24px; }

/* 基本レイアウト */
.pref-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid #d3dee8;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.pref-table tr + tr th.area,
.pref-table tr + tr td { border-top: 1px solid #cfd9e3; }

/* 左の青帯（エリア名） */
.pref-table th.area{
  width: 28%;
  background: #4366ac;
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid #cfd9e3;
  padding: 18px 12px;
  vertical-align: middle;
}
.pref-table td{ padding: 16px 16px 14px; background: #fff; }

/* 都道府県リンク：常に3列Gridで固定 */
.pref-col{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(86px, 1fr)) !important; /* 3列固定 */
  column-gap: 16px !important;
  row-gap: 6px !important;
}
.pref-col a{
  display: block !important;
  line-height: 1.9;
  text-decoration: underline;
  white-space: nowrap;           /* 折返し防止（窮屈なら normal に） */
  word-break: keep-all;
}

/* ====== WPやテーマの“スマホでテーブルを縦積み”を無効化 ====== */
@media (max-width: 1024px){
  .pref-table{ display: table !important; width: 100% !important; table-layout: fixed !important; }
  .pref-table tbody{ display: table-row-group !important; }
  .pref-table tr{ display: table-row !important; }
  .pref-table th, .pref-table td{ display: table-cell !important; vertical-align: top !important; }
}

/* 画面幅ごとの微調整（3列は維持） */
@media (max-width: 768px){
  .pref-table th.area{ width: 34% !important; padding: 14px 10px; }
}
@media (max-width: 480px){
  .pref-table th.area{ width: 38% !important; }
  .pref-col{ grid-template-columns: repeat(3, minmax(80px, 1fr)) !important; }
  /* 文字がはみ出す場合は下をON
     .pref-col a{ white-space: normal; }
  */
}

/* 一部テーマが .entry-content table や .wp-block-table を上書きする対策 */
.entry-content .pref-table,
.wp-block-table .pref-table{
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}

/* === 文字欠け対策パッチ === */

/* 1) 文字を隠さない（角丸は維持されるので overflow:visible でOK） */
.pref-table{
  overflow: visible !important;
}

/* 2) リンクを折り返し可能に（日本語は単語区切りが弱いので anywhere 推奨） */
.pref-col a{
  white-space: normal !important;
  overflow-wrap: anywhere !important;  /* = word-break: break-word の強化版 */
  word-break: break-word;              /* 古いブラウザ向け保険 */
}

/* 3) 極小画面でのカラム幅を少し柔らかく（3列は維持） */
@media (max-width: 480px){
  .pref-col{
    grid-template-columns: repeat(3, minmax(70px, 1fr)) !important; /* 80→70に */
    column-gap: 12px !important;  /* すき間を少し詰めて収まりやすく */
    row-gap: 6px !important;
  }
  .pref-table th.area{ width: 36% !important; } /* 左帯をわずかに狭めて右に余白を回す */
  .pref-table td{ padding-right: 10px !important; } /* 右端の余白を確保して切れ防止 */
}

/* テーマが table をブロック化して横幅計算を壊す場合の保険 */
@media (max-width: 768px){
  .pref-table,
  .pref-table tbody,
  .pref-table tr,
  .pref-table th,
  .pref-table td{
    display: revert !important; /* 元のテーブル表示に戻す */
  }
}

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

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

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


/************************************
** アコーディオンQA
************************************/
.qa-1 {
    max-width: 650px;
    margin-bottom: 7px;
    border: 1px solid #d6dde3;
    border-radius: 25px;
	font-size:16px;
    line-height: 1.6em;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.5em 2em 0.5em 4em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-1 summary::before {
    color: #ce4061;
    content: "Q";
	font-size:22px !important;
}

.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #007a3f;
    line-height: 1.2;
    content: "A";
	font-size:22px !important;
}