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

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

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

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

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


/* reCAPTCHAロゴマークを非表示にする */
.grecaptcha-badge {
    visibility: hidden; /* ロゴマークを非表示 */
}


/* ホーム上の電話番号 - 右上に固定 */
.header-info {
    position: fixed !important; /* スクロールしても常に固定 */
   
    right: 20px; /* 画面右端からの距離 */
    top: 10px; /* タイトルに被らないよう調整 */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右揃え */
    text-align: right;
    font-weight: bold;
	
    z-index: 99999 !important; /* 最前面にする */
}






/* 電話番号 */
.header-phone {
    font-size: 1.1em; /* フォントサイズ調整 */
    margin-bottom: 10px;
}

/* 営業時間 */
.header-hours {
    font-size: 0.8em;
    color: #666666;
    margin-bottom: 10px;
}

/* お問い合わせボタン */
.header-contact a {
    padding: 10px 20px;
    background-color: #e65a00;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px !important; /* 丸みを優先 */
    font-size: 1.1em;
}

.header-contact a:hover {
    background-color: #d94a00;
}





/* 画像の最適化 */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* PC・iPad用の表示設定（スマホより大きい端末で表示） */
@media screen and (max-width: 1680px) {
    .header-info {
        display: flex; /* iPadでも表示 */
    }
}

/* スマートフォン用のメディアクエリ */
@media screen and (max-width: 768px) {
    .header-info {
        display: none; /* スマホでは非表示 */
    }
}


/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
  line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li a::before{
 font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f07b"; /*FontAwesomeのユニコード*/
  color: #92ccc0; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a{
  line-height: 0.9; /*行間を狭くする*/
  font-size: 18px;
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /*FontAwesomeのユニコード*/
  color: #92ccc0; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}


/*'==================================区切=================================*/
/*●エントリーカードインデックス 記事一覧のカスタム 難しすぎる */
/************************************
****　https://ryono-blog.com/%E3%80%90cocoon%E3%80%91%E3%82%B3%E3%83%94%E3%83%9Aok%EF%BC%81%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BAエントリーカードインデックス
************************************/


a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 .5em;
border-radius:6px;
width:49%;
margin-bottom:1em;
}

a.entry-card-wrap.a-wrap{
transition: all .1s;
}

a.entry-card-wrap.a-wrap:hover {/*カーソルをホバーした際の設定*/
transform: translateY(-1px);/*少し浮かす*/
transition: all .1s;/*浮かす速さ*/
background-color: #fff;/*カーソルをホバーした際の背景の色*/
}

figure.entry-card-thumb.card-thumb.e-card-thumb{/*エントリーカードの形設定*/
max-height:300px;
}



/*トップページ画像の最大高さ*/
border-radius:6px 6px 0 0/ 6px 6px 0 0;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
}

.e-card-thumb .cat-label{/*ラベル位置*/
margin-top:.3em;
margin-left:.3em;
}

@media screen and (max-width: 1100px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:300px;
}}

@media screen and (max-width: 1023px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}

a.entry-card-wrap.a-wrap:hover {
transform: none;
background-color: #f7f7f7;
}}

@media screen and (max-width: 900px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}

@media screen and (max-width: 750px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}

@media screen and (max-width: 600px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}

a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
}

.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}

@media screen and (max-width: 480px){
.e-card-thumb .cat-label{
margin-left:1em;
}}

@media screen and (max-width: 1023px){
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}

@media screen and (min-width: 601px) and (max-width: 834px){
div#content.content.cf{
margin:1em;
}}



/* タイトル部分の調整 */
h2.entry-card-title.card-title.e-card-title {
  font-size: 18px;  /* 文字サイズ */
  color: #7b7b7b;  /* 文字の色 */
  font-weight: bold;
  text-align: left;  /* 左揃えに変更（中央揃えは崩れやすい） */
  line-height: 1.6em;  /* 行間を広めに設定 */
  margin-top: 0.5em;
  margin-bottom: 0em;
  padding: 0 0.3em 0;
  white-space: normal; /* 折り返しを許可 */
  word-wrap: break-word;  /* 長い単語の折り返しを許可 */
  overflow-wrap: break-word; /* 自動で折り返し */
  min-height: 3.2em;  /* 最小高さを確保（2行分） */
}


img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 200px;
  width: 100%;  /* 横幅を親要素いっぱいに */
  object-fit: cover; /* 画像の比率を維持しつつトリミング */
}


.entry-card-thumb {
  height: 280px;
  overflow: hidden;
}


.eye-catch .cat-label, .cat-label{/*ラベルの設定*/
font-size:.7em;/*カテゴリーラベルの文字サイズ変更*/
padding:0 0.5em 0;/*カテゴリーラベルの位置変更*/
opacity: 0.85;/*カテゴリーラベルの透明度変更*/
background-color:#f5f5f5;/*カテゴリーラベルの色変更*/
color:#696969;/*カテゴリーラベルの文字色変更*/
}

div.admin-pv{/*閲覧数を非表示*/
display:none;
}
/*'==================================エントリーカード終わり=================================*/




/*'==================================コンタクトフォーム区切=================================*/
/*●コンタクトフォーム7カメラ2 */
/*カメラ追加 https://cotodama.co/input-type-file-custom/*/
label.sample{
  display: block;
  cursor: pointer;
  /* background: #333; */
  background: #68666c;
	
  color: #fff;
  font-size: 3em;
  line-height: 1;
	/* 縦長 */
  width: 300px;
  text-align: center;
	
  text-decoration:none;
  text-underline-offset: 5px;
		/* 凄い天才 9/6 */
	
}
label.sample::before{
  /* font-weight: 900; */
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: "\f030";
}
label.sample input {
  display: none;
}
/*https://cotodama.co/input-type-file-custom/*/





.menu-item i {
  margin-right: 5px;
}

/* .entry-title {
  display: none;
}
 タイトルが消えてしまう｡2023/09/14*/




/*====================================
  ● Contact Form 7 装飾
====================================*/

/* スマホ用 Contact Form 7 カスタマイズ */
@media (max-width: 500px) {
  .inquiry th, .inquiry td {
    display: block !important;
    width: 100% !important;
    border-top: none !important;
    box-sizing: border-box !important;
  }


/* フォームのテキスト入力欄（input） */
.inquiry input,
.wpcf7-form input {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* テキストエリア（textarea）のフォント指定 */
.inquiry textarea,
.wpcf7-form textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
}




  /* 最初の行の上枠線 */
  .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7 !important;
  }

  /* 必須・任意のサイズ調整 */
  .inquiry .haveto, .inquiry .any {
    font-size: 12px;
  }
}

/* 左列（見出し欄） */
.inquiry th {
  text-align: left;
  font-size: 16px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
}

/* 右列（通常欄・ラジオボタンの文字） */
.inquiry td {
  font-size: 16px;
  border: solid 1px #ffffff; /* 修正：カラーコードの前に '#' を追加 */
  /* border: solid 1px #d7d7d7; */
}

/* テーブル全体と横の行の枠線 */
.entry-content .inquiry tr, .entry-content table {
  border: solid 1px #d7d7d7;
}

/* 必須ラベルのデザイン */
.haveto {
  font-size: 10px;
  padding: 5px;
  background: #ff0000;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 15px;
}

/* 任意ラベルのデザイン */
.any {
  font-size: 10px;
  padding: 5px;
  background: #93c9ff;
  color: #fff;
  border-radius: 12px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}

/* ラジオボタンを縦並びにする */
.verticallist .wpcf7-list-item {
  display: block;
}

/*====================================
  ● 送信ボタンのデザイン
====================================*/

#formbtn {
  display: block;
  padding: 1em 0;
  margin-top: 30px;
  width: 100%;
  background: #ffaa56;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 2px;
  border: none;
  transition: background 0.3s, color 0.3s; /* なめらかな変化 */
}

/* 送信ボタンのホバー時 */
#formbtn:hover {
  background: #e0a44f; /* ホバー時に少し暗く */
  color: #fff;
}

/* 文字に余白をつける */
.mgr-10 {
  margin-left: 12px;
}

/*====================================
  ● Contact Form 7 周りの装飾
====================================*/

/* ラベルデザイン */
label {
  border: 1px solid #999; /* 枠線 */
  border-radius: 5px; /* 角を丸める */
  line-height: 40px; /* 行間 */
  padding: 3px; /* 内側の余白 */
  cursor: pointer; /* カーソルをポインターに変更 */
}

/* ラベルのホバー時 */
label:hover {
  background: #999;
}

/*====================================
  コンタクトフォーム 区切り
====================================*/



/*'==================================コンタクトフォーム区切=================================*/
/*Contact Form 7エラー項目*/
input.wpcf7-not-valid, textarea.wpcf7-not-valid, select.wpcf7-not-valid {
  background: #FCC;
}


/*★変える事が無い主要*/		

	
	
	
	
	
	/* テーブル */
#wpcf7cpcnf table {
    border: none;
}
#wpcf7cpcnf table th {
    background-color: #00008B;
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
}
#wpcf7cpcnf table td {
    border: 1px solid #ccc;
}

/* ボタン */
#wpcf7cpcnf button {
    background-color: #555;
    border: 4px outset #000;
    color: #fff;
}
	
	
	
/*==================================光るボタン区切▲=================================*/

 
/** End Block Kit CSS: 71-3-d415519effd9e11f35d2438c58ea7ebf **/


 



/*'==================================光るボタン区切▲=================================*/


/* 目次
-------------------------------------------------- */

/* https://uto-room.com/manual/wordpress/cocoon-toc/ */


#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #ff9f67;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #ff9f67;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .toc-title:before {
  /* 目次のアイコン設定 */
  top: 0;
  left: -45px;
  width: 50px;
  height: 50px;
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  /* アイコンを変える場合はここを変更 */
  font-size: 20px;
  margin-right: 5px;
  color: #FFF;
  /* アイコンの色を変える場合はここを変更 */
  background-color: #ff9f67;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

#main .entry-content .toc .toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}

#main .entry-content .toc .toc-content ol li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}

#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
  /* h2のみ太文字に */
}

#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
  /* h3以降の文字サイズを普通に */
}
/* ‐‐‐‐ 目次  ▼‐‐‐‐ */

ChatGPT:
画像の max-height: 200px; にした際にレイアウトが崩れたということですね。
修正するには、画像の高さを制限しつつ、縦横比を維持するように調整する必要があります。

修正コード
以下の CSS を適用してください。

css
コピーする
編集する
/* 画像の最大高さを200pxに制限し、アスペクト比を維持 */
img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 200px; /* 最大高さを200pxに設定 */
  width: auto;       /* 横幅は自動調整して比率を維持 */
  height: auto;      /* 縦横比を維持 */
  object-fit: contain; /* 画像の比率を崩さずに調整 */
  display: block;    /* 画像をブロック要素にして配置 */
  margin: 0 auto;    /* 中央揃え */
}
変更点の説明
max-height: 200px;

画像の最大高さを 200px に制限します。
width: auto; height: auto;

画像の 縦横比を維持 しながらサイズ調整されるようにします。
object-fit: contain;

object-fit: contain; を使用することで、画像全体を維持しながら、指定の高さ内に収めることができます。
object-fit: cover; にすると、高さを埋めるために一部トリミングされるため、注意が必要です。
display: block; margin: 0 auto;

画像をブロック要素として扱い、中央に配置 します。
期待される効果
画像の 最大高さが200px に制限される。
画像の縦横比が保持されるので、変形せずに表示される。
必要に応じて、画像の幅が自動調整 される。
これでレイアウトが適切に調整されるはずです。試してみてください！







あなた:
高さはオッケー 幅が狭いです
/* 画像の最大高さを200pxに制限し、アスペクト比を維持 */
img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 200px; /* 最大高さを200pxに設定 */
  width: auto;       /* 横幅は自動調整して比率を維持 */
  height: auto;      /* 縦横比を維持 */
  object-fit: contain; /* 画像の比率を崩さずに調整 */
  display: block;    /* 画像をブロック要素にして配置 */
  margin: 0 auto;    /* 中央揃え */
}
ChatGPT:
高さはOKだけど、幅が狭くなってしまうということですね。

解決策として、画像の 最大高さ200px を維持しつつ、幅を親要素いっぱいに広げるように調整します。

修正コード
css
コピーする
編集する
/* 画像の最大高さを200pxに制限し、幅を調整 */
img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 200px;  /* 最大高さを200pxに設定 */
  width: 100%;        /* 親要素の幅いっぱいに広げる */
  height: auto;       /* 縦横比を維持 */
  object-fit: cover;  /* 画像のアスペクト比を保持しつつ、領域を埋める */
  display: block;     /* 画像をブロック要素として配置 */
  margin: 0 auto;     /* 中央揃え */
}
変更点の説明
width: 100%;

画像を 親要素の幅いっぱいに広げる ように設定します。
これにより、幅が狭くなる問題を解決 できます。
max-height: 200px; & height: auto;

高さは 最大200px を維持しつつ、縦横比を保ちます。
object-fit: cover;

画像を 高さ200pxに合わせつつ、幅を親要素いっぱいにする。
余白ができないようにするため cover を使っています（contain だと空白ができる可能性がある）。
margin: 0 auto;

画像が中央揃え になるように設定。
期待される動作
画像の 高さは最大200px に制限される。
画像の 幅は親要素いっぱい になるので、狭くならない。
画像の縦横比は維持され、変形しない。
これで 高さ200px、幅が狭くならない画像 になるはずです。試してみてください！ 😊







あなた:
最強にずれてます｡ エントリーカード
@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
*/

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

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

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

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


/* reCAPTCHAロゴマークを非表示にする */
.grecaptcha-badge {
    visibility: hidden; /* ロゴマークを非表示 */
}


/* ホーム上の電話番号 */
.header-info {
    position: absolute; /* 画面の右端に配置 */
    right: 20px; /* 画面右端からの距離 */
    top: 10px; /* タイトルに被らないよう調整 */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右揃え */
    text-align: right;
    font-weight: bold;
}

/* 電話番号 */
.header-phone {
    font-size: 1.1em; /* フォントサイズ調整 */
    margin-bottom: 10px;
}

/* 営業時間 */
.header-hours {
    font-size: 0.8em;
    color: #666666;
    margin-bottom: 10px;
}

/* お問い合わせボタン */
.header-contact a {
    padding: 10px 20px;
    background-color: #e65a00;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
}

.header-contact a:hover {
    background-color: #d94a00;
}

/* 画像の最適化 */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* PC・iPad用の表示設定（スマホより大きい端末で表示） */
@media screen and (max-width: 1680px) {
    .header-info {
        display: flex; /* iPadでも表示 */
    }
}

/* スマートフォン用のメディアクエリ */
@media screen and (max-width: 768px) {
    .header-info {
        display: none; /* スマホでは非表示 */
    }
}


/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
  line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li a::before{
 font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f07b"; /*FontAwesomeのユニコード*/
  color: #92ccc0; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a{
  line-height: 0.9; /*行間を狭くする*/
  font-size: 18px;
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /*FontAwesomeのユニコード*/
  color: #92ccc0; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}


/*'==================================区切=================================*/
/*●エントリーカードインデックス 記事一覧のカスタム 難しすぎる */
/************************************
****　https://ryono-blog.com/%E3%80%90cocoon%E3%80%91%E3%82%B3%E3%83%94%E3%83%9Aok%EF%BC%81%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BAエントリーカードインデックス
************************************/


a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 .5em;
border-radius:6px;
width:49%;
margin-bottom:1em;
}

a.entry-card-wrap.a-wrap{
transition: all .1s;
}

a.entry-card-wrap.a-wrap:hover {/*カーソルをホバーした際の設定*/
transform: translateY(-1px);/*少し浮かす*/
transition: all .1s;/*浮かす速さ*/
background-color: #fff;/*カーソルをホバーした際の背景の色*/
}

figure.entry-card-thumb.card-thumb.e-card-thumb{/*エントリーカードの形設定*/
max-height:300px;
}



/*トップページ画像の最大高さ*/
border-radius:6px 6px 0 0/ 6px 6px 0 0;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
}

.e-card-thumb .cat-label{/*ラベル位置*/
margin-top:.3em;
margin-left:.3em;
}

@media screen and (max-width: 1100px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:300px;
}}

@media screen and (max-width: 1023px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}

a.entry-card-wrap.a-wrap:hover {
transform: none;
background-color: #f7f7f7;
}}

@media screen and (max-width: 900px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}

@media screen and (max-width: 750px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}

@media screen and (max-width: 600px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}

a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
}

.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}

@media screen and (max-width: 480px){
.e-card-thumb .cat-label{
margin-left:1em;
}}

@media screen and (max-width: 1023px){
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}

@media screen and (min-width: 601px) and (max-width: 834px){
div#content.content.cf{
margin:1em;
}}
/* エントリーカードの画像とタイトルのレイアウト調整 */
/* エントリーカードの画像とタイトルのレイアウト調整 */
figure.entry-card-thumb.card-thumb.e-card-thumb {
  max-height: 300px; /* 画像エリアの最大高さを300pxに設定 */
  width: 100%; /* 親要素の幅いっぱいにする */
  overflow: hidden; /* はみ出し防止 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* タイトルとの干渉を防ぐ */
}

/* 画像の調整 */
img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 300px; /* 最大高さを300pxに設定 */
  width: 100%; /* 親要素いっぱいに広げる */
  height: auto; /* 縦横比を維持 */
  object-fit: contain; /* 画像を縮小して比率を維持しつつ表示 */
  display: block;
  margin: 0 auto;
}

/* タイトルの調整 */
h2.entry-card-title.card-title.e-card-title {
  font-size: 18px; /* 文字サイズ */
  color: #7b7b7b; /* 文字の色 */
  font-weight: bold;
  text-align: left;
  line-height: 1.6em;
  margin-top: 0.5em;
  padding: 0.5em;
  white-space: normal; /* 折り返しを許可 */
  word-wrap: break-word; /* 長い単語の折り返しを許可 */
  overflow-wrap: break-word; /* 自動で折り返し */
  min-height: 4.5em; /* 最小高さを確保（2行分） */
  position: relative; /* 画像の影響を受けないようにする */
  z-index: 2; /* 画像より前面に表示 */
  background: white; /* 画像の上でも読めるように背景を設定 */
  
}




/* 画像の最大高さを200pxに制限し、幅を調整 */
img.entry-card-thumb-image.card-thumb-image.wp-post-image {
  max-height: 400px;  /* 最大高さを200pxに設定 */
  width: 100%;        /* 親要素の幅いっぱいに広げる */
  height: auto;       /* 縦横比を維持 */
  object-fit: cover;  /* 画像のアスペクト比を保持しつつ、領域を埋める */
  display: block;     /* 画像をブロック要素として配置 */
  margin: 0 auto;     /* 中央揃え */
}




.eye-catch .cat-label, .cat-label{/*ラベルの設定*/
font-size:.7em;/*カテゴリーラベルの文字サイズ変更*/
padding:0 0.5em 0;/*カテゴリーラベルの位置変更*/
opacity: 0.85;/*カテゴリーラベルの透明度変更*/
background-color:#f5f5f5;/*カテゴリーラベルの色変更*/
color:#696969;/*カテゴリーラベルの文字色変更*/
}

div.admin-pv{/*閲覧数を非表示*/
display:none;
}
/*'==================================エントリーカード終わり=================================*/




/*'==================================コンタクトフォーム区切=================================*/
/*●コンタクトフォーム7カメラ2 */
/*カメラ追加 https://cotodama.co/input-type-file-custom/*/
label.sample{
  display: block;
  cursor: pointer;
  /* background: #333; */
  background: #68666c;
	
  color: #fff;
  font-size: 3em;
  line-height: 1;
	/* 縦長 */
  width: 300px;
  text-align: center;
	
  text-decoration:none;
  text-underline-offset: 5px;
		/* 凄い天才 9/6 */
	
}
label.sample::before{
  /* font-weight: 900; */
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: "\f030";
}
label.sample input {
  display: none;
}
/*https://cotodama.co/input-type-file-custom/*/





.menu-item i {
  margin-right: 5px;
}

/* .entry-title {
  display: none;
}
 タイトルが消えてしまう｡2023/09/14*/




/*====================================
  ● Contact Form 7 装飾
====================================*/

/* スマホ用 Contact Form 7 カスタマイズ */
@media (max-width: 500px) {
  .inquiry th, .inquiry td {
    display: block !important;
    width: 100% !important;
    border-top: none !important;
    box-sizing: border-box !important;
  }


/* フォームのテキスト入力欄（input） */
.inquiry input,
.wpcf7-form input {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* テキストエリア（textarea）のフォント指定 */
.inquiry textarea,
.wpcf7-form textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
}




  /* 最初の行の上枠線 */
  .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7 !important;
  }

  /* 必須・任意のサイズ調整 */
 f
  .inquiry .haveto, .inquiry .any {
    font-size: 12px;
  }
}

/* 左列（見出し欄） */
.inquiry th {
  text-align: left;
  font-size: 16px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
}

/* 右列（通常欄・ラジオボタンの文字） */
.inquiry td {
  font-size: 16px;
  border: solid 1px #ffffff; /* 修正：カラーコードの前に '#' を追加 */
  /* border: solid 1px #d7d7d7; */
}

/* テーブル全体と横の行の枠線 */
.entry-content .inquiry tr, .entry-content table {
  border: solid 1px #d7d7d7;
}

/* 必須ラベルのデザイン */
.haveto {
  font-size: 10px;
  padding: 5px;
  background: #ff0000;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 15px;
}

/* 任意ラベルのデザイン */
.any {
  font-size: 10px;
  padding: 5px;
  background: #93c9ff;
  color: #fff;
  border-radius: 12px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}

/* ラジオボタンを縦並びにする */
.verticallist .wpcf7-list-item {
  display: block;
}

/*====================================
  ● 送信ボタンのデザイン
====================================*/

#formbtn {
  display: block;
  padding: 1em 0;
  margin-top: 30px;
  width: 100%;
  background: #ffaa56;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 2px;
  border: none;
  transition: background 0.3s, color 0.3s; /* なめらかな変化 */
}

/* 送信ボタンのホバー時 */
#formbtn:hover {
  background: #e0a44f; /* ホバー時に少し暗く */
  color: #fff;
}

/* 文字に余白をつける */
.mgr-10 {
  margin-left: 12px;
}

/*====================================
  ● Contact Form 7 周りの装飾
====================================*/

/* ラベルデザイン */
label {
  border: 1px solid #999; /* 枠線 */
  border-radius: 5px; /* 角を丸める */
  line-height: 40px; /* 行間 */
  padding: 3px; /* 内側の余白 */
  cursor: pointer; /* カーソルをポインターに変更 */
}

/* ラベルのホバー時 */
label:hover {
  background: #999;
}

/*====================================
  コンタクトフォーム 区切り
====================================*/



/*'==================================コンタクトフォーム区切=================================*/
/*Contact Form 7エラー項目*/
input.wpcf7-not-valid, textarea.wpcf7-not-valid, select.wpcf7-not-valid {
  background: #FCC;
}


/*★変える事が無い主要*/		
/*'==================================光るボタン区切=================================*/
/*●光るボタン*/	
	/* 光るﾎﾞﾀﾝ https://into-the-program.com/css-shiny-button/*/
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 200px;
    max-width: 80%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    color: #000000; /* 黒字 */
    background-color: rgb(238, 238, 34); /* 背景色 */
    overflow: hidden;
    font-size: 16px;
    border-radius: 5px;
    font-weight: bold; /* 太字で見やすく */
}

/* スマホ向け調整 */
@media (max-width: 500px) {
    .shiny-btn {
        width: 80%; /* 画面幅の80%を使う */
        height: 45px;
        line-height: 45px;
        font-size: 14px;
    }
}


.shiny-btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
		/* 光るﾎﾞﾀﾝ https://into-the-program.com/css-shiny-button/*/
	
	
	
	
	
	
	/* テーブル */
#wpcf7cpcnf table {
    border: none;
}
#wpcf7cpcnf table th {
    background-color: #00008B;
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
}
#wpcf7cpcnf table td {
    border: 1px solid #ccc;
}

/* ボタン */
#wpcf7cpcnf button {
    background-color: #555;
    border: 4px outset #000;
    color: #fff;
}
	
	
	
/*==================================光るボタン区切▲=================================*/

/** Start Block Kit CSS: 71-3-d415519effd9e11f35d2438c58ea7ebf **/

.envato-block__preview{overflow: visible;}

/** End Block Kit CSS: 71-3-d415519effd9e11f35d2438c58ea7ebf **/



/** Start Block Kit CSS: 135-3-c665d4805631b9a8bf464e65129b2f58 **/

.envato-block__preview{overflow: visible;}

/** End Block Kit CSS: 135-3-c665d4805631b9a8bf464e65129b2f58 **/



/*'==================================光るボタン区切▲=================================*/


/* 目次
-------------------------------------------------- */

/* https://uto-room.com/manual/wordpress/cocoon-toc/ */


#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #ff9f67;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #ff9f67;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .toc-title:before {
  /* 目次のアイコン設定 */
  top: 0;
  left: -45px;
  width: 50px;
  height: 50px;
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  /* アイコンを変える場合はここを変更 */
  font-size: 20px;
  margin-right: 5px;
  color: #FFF;
  /* アイコンの色を変える場合はここを変更 */
  background-color: #ff9f67;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

#main .entry-content .toc .toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}

#main .entry-content .toc .toc-content ol li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}

#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
  /* h2のみ太文字に */
}

#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
  /* h3以降の文字サイズを普通に */
}
/* ‐‐‐‐ 目次  ▼‐‐‐‐ */