/************************************
** THE THOR CHILD / style-user.css
** 最終整理版
**
** 00 ■ CSS変数（サイト共通カラー・サイズ）
** 10 ■ 全体デザイン：背景・カラー
** 20 ■ レイアウト基盤：余白・幅のリセット
** 30 ■ カスタム記事HTML 共通基盤（Claude製カスタムHTMLが使う土台）
** 40 ■ ヘッダー・グローバルナビ
** 50 ■ コンポーネント：目次
** 51 ■ コンポーネント：SNSシェアボタン
** 52 ■ コンポーネント：ContactForm7
** 53 ■ コンポーネント：画像・キャプション
** 54 ■ コンポーネント：コメントフォーム
** 60 ■ カルーセルスライダー
** 70 ■ レスポンシブ調整
** 90 ■ その他・実験的
************************************/


/************************************
** 00 ■ CSS変数（サイト共通カラー・サイズ）
** ここを変えるだけでサイト全体の色が変わります
************************************/
:root {
  /* サイトカラー */
  --color-bg-main:    #aabb99bb; /* メインエリア背景 */
  --color-bg-side:    #aabb99bb; /* サイドウィジェット背景 */
  --color-bg-footer:  #4e5935bb; /* フッター背景 */
  --color-bg-breadcrumb: #dfe0d5; /* パンくず背景 */
  --color-bg-caption: #dfe0d5;   /* 画像キャプション背景 */
  --color-accent:     #fd7a9c;   /* アクセントカラー（目次など） */
  --color-btn-orange: #f79034;   /* ボタン・必須ラベル */

  /* レイアウト */
  --content-max-width: 860px;    /* ← サイト全体のコンテンツ最大幅。ここを変えれば全体に反映 */
  --radius-base: 10px;           /* 角丸の基本値 */
}


/************************************
** 10 ■ 全体デザイン：背景・カラー
  background: var(--color-bg-side);
************************************/
.l-main {
  background: var(--color-bg-main);
  border-radius: var(--radius-base);
}
.widget {
  border-radius: var(--radius-base);
}
.bottomFooter {
  background: var(--color-bg-footer);
}
.l-footer {
  background: transparent;
}
.swiper-container,
.swiper-slide {
  background: var(--color-bg-main);
}
.dividerBottom .postContents {
  background: transparent;
}
h2.wp-block-heading {
  background: #ffffff55;
}
.breadcrumb {
  background: var(--color-bg-breadcrumb);
}


/************************************
** 20 ■ レイアウト基盤：余白・幅のリセット
**
** 【重要】旧版では div { margin:0; padding:0; } と書いていたが
** これはサイト全体のレイアウトを壊す原因になるため廃止。
** 必要な要素だけを個別に指定する方針に変更。
************************************/

/* メインエリアの余白をゼロに（テーマデフォルトの余白を消す）*/
main.l-main {
  margin: 0 auto;
  padding: 0 0 0 0;
}

/* 1カラム時にメインカラムを中央揃えにする（投稿ページ限定） */
.single .l-main__primary {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* 投稿記事コンテンツエリア */
.postContents {
  padding: 0;
}

h3 {
  margin-left: 30px;
  margin-right: 30px;
}
h4 {
  margin-left: 8px;
  padding-left: 17px;
  padding-right: 20px;
}

/* WordPress標準ブロックの余白 */
.wp-block-table,
.wp-block-embed,
.wp-block-image {
  margin-top: 10px;
  padding-top: 10px;
}

/* カテゴリー一覧 */
.heading-secondary {
  margin: 10px;
  padding: 10px;
}

/* フッター上のカテゴリー最新記事のズレを防ぐ */
.categoryBox__list {
  margin: 0 auto;
}

/* スマホ：横スクロール・はみ出し防止 */
@media screen and (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  div.l-wrapper {
    margin: 0;
    padding: 0;
    box-shadow: none;
    overflow-x: hidden;
    width: 100%;
  }
  /* フッター下の余分な空間・背景はみ出しを防ぐ */
  .l-footer,
  .bottomFooter {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  /* body直下の余白をゼロに */
  body > div,
  body > footer {
    margin-bottom: 0;
  }
}

/* パソコン：サイドバーウィジェットの余白調整 */
@media screen and (min-width: 768px) {
  .widget_recent_entries {
    margin: 0;
    padding: 0;
  }
  .heading-widgetwide {
    max-width: 100%;
    left: 20px;
  }
}


/************************************
** 30 ■ カスタム記事HTML 共通基盤
**
** Claudeが作るカスタムHTMLを記事に貼る際の土台。
** 「.estudio-article」クラスを付けた div を外側に置くことで
** テーマのリセットCSSの影響を受けず、意図通りに表示される。
**
** 【使い方】
** Claudeが作るHTMLの最外側を必ず以下で囲む：
** <div class="estudio-article"> ... </div>
**
** 記事ごとの固有クラス（例：.jikkoku-article）は
** .estudio-article の中に入れる。
************************************/

/* estudio-article ラッパー：テーマの影響を遮断する */
.estudio-article {
  /* テーマの div リセットを打ち消す */
  margin: 0 auto !important;
  padding: 0 !important;
  /* 幅はCSS変数で管理 */
  max-width: var(--content-max-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* estudio-article 内の div はテーマのリセットを受けない */
.estudio-article div {
  box-sizing: border-box;
}

/* estudio-article 内のテキスト系もリセット影響を受けない */
.estudio-article p,
.estudio-article ul,
.estudio-article ol,
.estudio-article h1,
.estudio-article h2,
.estudio-article h3,
.estudio-article h4,
.estudio-article h5,
.estudio-article h6 {
  margin: revert;
  padding: revert;
}

/* WordPressが自動挿入する空のpタグの余白をゼロにする */
.estudio-article p:empty {
  margin: 0;
  padding: 0;
  height: 0;
  line-height: 0;
}

/* スマホでの余白確保 */
@media screen and (max-width: 767px) {
  .estudio-article {
    padding: 0 12px !important;
  }
}


/************************************
** 40 ■ ヘッダー・グローバルナビ
************************************/

/* アイキャッチ画像のはみ出し防止 */
div.eyecatch-main {
  margin: 0 0 40px 0;
  width: auto;
}
@media screen and (max-width: 767px) {
  div.eyecatch-main {
    max-width: 100%;
    left: 15px;
  }
}

/* テキスト中央寄せ（Amazon用など） */
@media screen and (min-width: 782px) {
  div.has-text-align-center {
    margin-left: 38px;
  }
  .w_b_box {
    padding-left: 36px;
  }
  .is-layout-flow.is-content-justification-right {
    padding-left: 36px;
  }
  .is-vertically-aligned-bottom {
    padding-left: 36px;
  }
}
@media screen and (max-width: 781px) {
  .has-text-align-center {
    margin-left: 0;
  }
  .is-vertically-aligned-bottom.is-content-justification-right {
    margin: 0 auto;
    padding: 0 auto;
  }
}

/* 独自ボタン（戻る・次へ）を左右均等に */
.wp-block-columns-is-layout-flex {
  margin: 0 calc(5%);
  width: 100%;
}


/************************************
** 50 ■ コンポーネント：目次
************************************/
.content .outline {
  border: 3px solid #ffdee0;
  padding: 10px 0 10px;
  background: #fffef6;
}
.content .outline__number {
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  line-height: 1.8em;
  text-align: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
}
.content li ul li .outline__number {
  font-weight: bold;
  background: transparent;
  color: #cfcfcf;
  width: auto;
}
.content .outline__link {
  display: block;
  color: #777;
}
.content .outline__link:hover {
  color: #cfcfcf;
}
.outline__title {
  color: var(--color-accent);
  font-weight: 700;
  width: 100%;
  padding: 0 0 0 20px;
}
.content .outline__switch {
  right: 1.5rem;
  top: 10px;
}
.content .outline__toggle:checked + .outline__switch::before {
  content: "［ ▲ CLOSE］";
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
  margin-top: 1rem;
}
.content .outline__switch::before {
  content: "［ ▼ OPEN ］";
  border: 0;
  color: #999;
}
.content .outline__switch + .outline__list {
  background: transparent;
}
.content .outline__switch + ul.outline__list {
  margin-left: 0;
  margin-right: 0;
  border-top: 2px dotted #cfcfcf;
}
.content .outline__switch + .outline__list-2 li:first-child {
  margin-top: 1em;
}
.content .outline__switch + .outline__list-2 li ul li:first-child {
  margin-top: 0.5em;
}
.outline__list-2 > li > a {
  font-weight: 700;
}
.outline__title::before {
  font-family: "icomoon";
  content: "\e92f";
  margin-right: 5px;
}
@media only screen and (min-width: 992px) {
  .content .outline {
    width: 90%;
    margin: 3rem 5%;
  }
}
@media only screen and (max-width: 991px) {
  .content .outline {
    width: 100%;
    margin: 3rem 0;
  }
}
.profile__item {
  height: 41px;
}


/************************************
** 51 ■ コンポーネント：SNSシェアボタン
************************************/
@media screen and (min-width: 481px) {
  .socialList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .socialList ul li {
    display: flex;
  }
  .socialList__item {
    width: 40px;
  }
  .socialList-type11 .socialList__link::after {
    content: attr(title);
    display: none;
  }
  .socialList-type11 .socialList__item {
    line-height: 37px;
    margin: 0 3px 0 0;
  }
  .socialList-type11 .socialList__link {
    color: #fff;
    border-radius: 20px;
    transition: .15s;
  }
  .socialList__link.icon-facebook   { border: solid 1px #3b5998; color: #3b5998; background: #aabb99bb; }
  .socialList__link.icon-facebook:hover { background: #3b5998; color: #fff; }
  .socialList__link.icon-twitter    { border: solid 1px #00b0ed; color: #00b0ed; background: #aabb99bb; }
  .socialList__link.icon-twitter:hover  { background: #00b0ed; color: #fff; }
  .socialList__link.icon-google-plus { border: solid 1px #df4A32; color: #df4A32; background: #aabb99bb; }
  .socialList__link.icon-google-plus:hover { background: #df4A32; color: #fff; }
  .socialList__link.icon-hatenabookmark { border: solid 1px #008fde; color: #008fde; background: #aabb99bb; }
  .socialList__link.icon-hatenabookmark:hover { background: #008fde; color: #fff; }
  .socialList__link.icon-pocket     { border: solid 1px #eb4654; color: #eb4654; background: #aabb99bb; }
  .socialList__link.icon-pocket:hover   { background: #eb4654; color: #fff; }
  .socialList__link.icon-line       { border: solid 1px #00c300; color: #00c300; background: #aabb99bb; }
  .socialList__link.icon-line:hover     { background: #00c300; color: #fff; }
  .socialList__link.icon-linkedin   { border: solid 1px #0e76a8; color: #0e76a8; background: #aabb99bb; }
  .socialList__link.icon-linkedin:hover { background: #0e76a8; color: #fff; }
  .socialList__link.icon-pinterest  { border: solid 1px #cb2027; color: #cb2027; background: #aabb99bb; }
  .socialList__link.icon-pinterest:hover { background: #cb2027; color: #fff; }
}
@media screen and (max-width: 480px) {
  .socialList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .socialList-type11 .socialList__link::after {
    content: attr(title);
    display: none;
  }
  .socialList-type11 .socialList__item {
    line-height: 32px;
    margin: 0 3px 0 0;
  }
  .socialList-type11 .socialList__link {
    border-radius: 50%;
  }
  .socialList__link.icon-facebook   { border: solid 1px #3b5998; color: #3b5998; background: #aabb99bb; }
  .socialList__link.icon-facebook:hover { background: #3b5998; color: #fff; }
  .socialList__link.icon-twitter    { border: solid 1px #00b0ed; color: #00b0ed; background: #aabb99bb; }
  .socialList__link.icon-twitter:hover  { background: #00b0ed; color: #fff; }
  .socialList__link.icon-google-plus { border: solid 1px #df4A32; color: #df4A32; background: #aabb99bb; }
  .socialList__link.icon-google-plus:hover { background: #df4A32; color: #fff; }
  .socialList__link.icon-hatenabookmark { border: solid 1px #008fde; color: #008fde; background: #aabb99bb; }
  .socialList__link.icon-hatenabookmark:hover { background: #008fde; color: #fff; }
  .socialList__link.icon-pocket     { border: solid 1px #eb4654; color: #eb4654; background: #aabb99bb; }
  .socialList__link.icon-pocket:hover   { background: #eb4654; color: #fff; }
  .socialList__link.icon-line       { border: solid 1px #00c300; color: #00c300; background: #aabb99bb; }
  .socialList__link.icon-line:hover     { background: #00c300; color: #fff; }
  .socialList__link.icon-linkedin   { border: solid 1px #0e76a8; color: #0e76a8; background: #aabb99bb; }
  .socialList__link.icon-linkedin:hover { background: #0e76a8; color: #fff; }
  .socialList__link.icon-pinterest  { border: solid 1px #cb2027; color: #cb2027; background: #aabb99bb; }
  .socialList__link.icon-pinterest:hover { background: #cb2027; color: #fff; }
}


/************************************
** 52 ■ コンポーネント：ContactForm7
************************************/
table.CF7_table {
  width: 80%;
  margin: 0 auto;
  border: 3px solid #e5e5e5;
}
table.CF7_table tr {
  border-top: 1px solid #e5e5e5;
}
.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table {
  display: table;
}
.CF7_table input,
.CF7_table textarea {
  border: 1px solid #d8d8d8;
}
.CF7_table ::placeholder {
  color: #797979;
}
.CF7_req {
  font-size: .9em;
  padding: 5px;
  background: var(--color-btn-orange);
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}
.CF7_unreq {
  font-size: .9em;
  padding: 5px;
  background: #bdbdbd;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}
@media screen and (min-width: 768px) {
  .CF7_table th {
    width: 30%;
    background-color: #ebedf5;
  }
}
@media screen and (max-width: 767px) {
  table.CF7_table {
    width: 95%;
  }
  .CF7_table tr,
  .CF7_table td,
  .CF7_table th {
    display: block;
    width: 100%;
    line-height: 2.5em;
  }
  .CF7_table th {
    background-color: #ebedf5;
  }
}
.wpcf7 input.wpcf7-submit {
  background-color: var(--color-btn-orange);
  border: 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 auto;
}
.CF7_btn {
  text-align: center;
  margin-top: 20px;
}
.wpcf7-spinner {
  width: 0;
  margin: 0;
}


/************************************
** 53 ■ コンポーネント：画像・キャプション
************************************/
.wp-block-image {
  text-align: center;
}
.wp-element-caption {
  font-size: small;
  text-align: center;
  background: var(--color-bg-caption);
  border-radius: var(--radius-base);
  padding: 5px 10px;
}


/************************************
** 54 ■ コンポーネント：コメントフォーム
************************************/
.comment-form-url {
  display: none;
}


/************************************
** 60 ■ カルーセルスライダー
************************************/
div.divider {
  padding: 0;
  max-width: unset;
}
@media only screen and (max-width: 1138px) {
  div.divider {
    margin-left: auto;
    margin-right: auto;
  }
}
div.pickup3__container {
  max-width: 1170px;
  margin-left: 15px;
  margin-right: 15px;
}


/************************************
** 90-1 ■ 実験的・その他
************************************/
#inoino {
  width: 100%;
}


/************************************
** 90-2 ■ 1カラム/投稿ページ余白
************************************/
.dividerBottom {
}

.postContents {
	width:85%;
    margin: 0 auto;
	margin-top: 10px;
}

.content partQuote-6 {
}


/************************************
** 90-3 ■ 2カラム/カテゴリー一覧ページ余白
************************************/
.phrase-secondary {
	padding: 0 30px;
}


/************************************
** 90-4 ■ 1カラム/「関連する記事」余白
************************************/
.heading-sub {
	margin-left: 30px;
}


/************************************
** 90-5 ■ 1カラム/関連する記事の文字余白
「次へ」「戻る」文字余白
************************************/
.related__item .archive__contents {
	margin-left: 0;
}

.heading-secondary {
	margin: 5px;
	padding: 5px;	
}



.menuBtn__content {
	background-image: url('http://fushimi.blog/thinking-of-fushimi/wp-content/uploads/2023/11/a9f006ce19e7b44f10c27dee8a4911a8.png');
　　background-size: cover;   /* 画像をエリア全体に広げる */
}


.searchBtn__scroll {
	background-image: url('http://fushimi.blog/thinking-of-fushimi/wp-content/uploads/2023/11/a9f006ce19e7b44f10c27dee8a4911a8.png');
　　background-size: cover;   /* 画像をエリア全体に広げる */	
}