/*
Theme Name: cocoon-child-master
Template: cocoon-master
Description: Cocoonの子テーマです。
Author: 林檎（任意でOK）
Version: 1.0
*/

/* サイトマップページの横はみ出し対策 */
.page .entry-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  overflow-x: hidden;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* 固定ページ スマホ時 左右ズレ修正 */
@media screen and (max-width: 1023px) {
  body.page #content-in {
    display: block !important;
    flex-direction: column !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }
}

/* トップページ PC時 全体左右余白統一 */
body.home #main {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* スマホ時 トップページ 全体左右余白 */
@media screen and (max-width: 1023px) {
  body.home #main {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
}

/* トップページ本文全体余白と中央寄せ */
body.home #main .entry-content {
  max-width: 850px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  body.home #main .entry-content {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
}

/* トップページ本文の個別要素余白統一 */
body.home #main .entry-content > p,
body.home #main .entry-content > h2,
body.home #main .entry-content > h3,
body.home #main .entry-content > h4,
body.home #main .entry-content > ul,
body.home #main .entry-content > ol {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  body.home #main .entry-content,
  body.home #main .entry-content > p,
  body.home #main .entry-content > h2,
  body.home #main .entry-content > h3,
  body.home #main .entry-content > h4,
  body.home #main .entry-content > ul,
  body.home #main .entry-content > ol {
    padding-left: 16px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* トップページのアイキャッチ画像のサイズと位置調整 */
body.home .featured-image {
  max-width: 850px;
  margin: 0 auto 24px auto;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  box-sizing: border-box;
}

body.home .featured-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media screen and (max-width: 1023px) {
  body.home #main .entry-content,
  body.home #main .entry-content > p,
  body.home #main .entry-content > h2,
  body.home #main .entry-content > h3,
  body.home #main .entry-content > h4,
  body.home #main .entry-content > ul,
  body.home #main .entry-content > ol {
    padding-left: 16px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Cocoonテーマ用：本文とサイドバーを横並びにする */
#body-in {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 20px;
}

#main {
  width: 70%;
  box-sizing: border-box;
  padding-right: 20px;
}

#sidebar {
  width: 30%;
  box-sizing: border-box;
}

/* トップページのアイキャッチ画像のサイズと中央寄せ */
body.front-page .featured-image {
  max-width: 850px;
  margin: 0 auto 24px auto;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  box-sizing: border-box;
}

body.front-page .featured-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* トップページのアイキャッチ画像の整列（本文幅と揃える） */
body.front-page .main .featured-image {
  max-width: 100%;
  margin: 0 0 24px 0;
  text-align: center;
  padding: 0;
}

body.front-page .main .featured-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-sizing: border-box;
}