@charset "utf-8";

/* ==================================================================
   mymj 公開面 site.css
   承認パス番号 mymj50045121。指示書 4.3 の計測値から自前で書いたもの。
   現行テーマの style.css / drawer.css は転記していない。
   分岐点 900px。PC を基本とし、max-width:899px で SP を上書きする。
   ================================================================== */

/* ---- リセット ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol { list-style: none; }
img { vertical-align: bottom; max-width: 100%; }
a { text-decoration: none; }

/* ---- 基本 ---- */
html { font-size: 62.5%; }

body {
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000;
  background: #fff;
  min-width: 1000px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

a { color: rgb(23,89,176); }
a:visited { color: rgb(19,74,146); }
a:hover { color: rgb(27,104,206); }

#contents { width: 1000px; margin: 0 auto; }

/* ==================================================================
   ヘッダ
   ================================================================== */
/* mymj50167959 の 8-j: 現行の header は背景色が白（画像が読めないときの下地）。値まで合わせる。 */
header {
  background: #fff url(/_content/mymj.SharedPages/img/header_bg.jpg) center center / cover no-repeat;
}

#headerWrap {
  width: 1000px;
  margin: 0 auto;
  padding: 12px 0 30px;
}

body#top #headerWrap { padding: 30px 0 40px; }

#headerWrap a { color: #000; }

header h1 {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 3.8rem;
  line-height: 5.8rem;
}

body#top header h1 { font-size: 5rem; line-height: 5.4rem; }

header h1 div { margin-bottom: 0; }
body#top header h1 div { margin-bottom: 20px; }

/* mymj50176785 の 4.2: display を inline-block にしていたため、この span の
   padding-bottom 4px と border-bottom 1px が親 div の行の高さに加わり、
   div の高さが 54px（行送り）ではなく 57px になっていた。以降が 3px 下がる原因。
   現行サイトの span は inline（3-3 の実測）。inline に戻すと 4.2 の7点が全て一致する。 */
header h1 span {
  display: inline;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2.4rem;
  letter-spacing: 4px;
  border-bottom: 1px solid rgb(23,89,176);
  /* mymj50176785 の 4.2・4.3: 現行の内側の余白はページと画面幅で 3 通りある（実測）。
     トップ以外の PC は 0 6px 4px 10px、トップの PC は 0 24px 4px、
     幅 899px 以下のトップ以外は 0（字間も 2px）。左が 24px だったため、
     トップ以外の PC で下線が 14px 長かった。 */
  padding: 0 6px 4px 10px;
}

body#top header h1 span { font-size: 2.6rem; line-height: 3.2rem; padding: 0 24px 4px; }

#lede {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2.4rem;
  text-align: center;
  margin-top: 26px;
}

#hamburgerMenu { display: none; }

/* ==================================================================
   ナビ
   ================================================================== */
nav.drawer-nav {
  background: #fff;
  border-top: 1px solid rgb(165,165,165);
  border-bottom: 1px solid rgb(165,165,165);
  padding: 5px 0;
}

nav.drawer-nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* mymj50185620 の 4.4: 現行の実測は #inner が 幅 1175（左右 5px）、
   .navMargin が 幅 960（左右 20px）。#gNav は justify-content: center なので
   中心（592.5）は変わらず、カテゴリ5件・about の丸・執筆者紹介・アイコン・検索の
   位置は動かない（内側の余白だけの違い）。 */
#inner { margin: 0 5px; }
.navMargin { margin: 0 20px; }

#navWrap { width: 1000px; margin: 0 auto; position: relative; }

/* --- about の丸ボタン --- */
#about {
  position: absolute;
  top: -32px;
  left: 0;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: rgb(23,89,176);
  text-align: center;
}

#about a { color: #fff; display: block; }

#about .navNone {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 2.6rem;
  padding-top: 16px;
}

#about .line { border-top: 1px solid #fff; margin: 6px 24px 0; }

#about .line span {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.8rem;
}

#about .line span::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-left: 6px;
  background: url(/_content/mymj.SharedPages/img/nav_about_arrow.png) no-repeat center / contain;
}

/* --- カテゴリ5件 --- */
#gNav {
  display: flex;
  justify-content: center;
}

#gNav li { margin-right: 50px; font-weight: bold; font-size: 1.7rem; }
#gNav li:last-child { margin-right: 0; }

#gNav a {
  display: block;
  width: 90px;
  height: 80px;
  padding-top: 52px;
  text-align: center;
  color: #000;
  background-repeat: no-repeat;
  background-size: 46px 44px;
  background-position: 21px 5px;
}

#gNav li:nth-child(1) a { background-image: url(/_content/mymj.SharedPages/img/category_icon01.png); }
#gNav li:nth-child(2) a { background-image: url(/_content/mymj.SharedPages/img/category_icon02.png); }
#gNav li:nth-child(3) a { background-image: url(/_content/mymj.SharedPages/img/category_icon03.png); }
#gNav li:nth-child(4) a { background-image: url(/_content/mymj.SharedPages/img/category_icon04.png); }
#gNav li:nth-child(5) a { background-image: url(/_content/mymj.SharedPages/img/category_icon05.png); background-position: 26px 7px; }

#gNav li:nth-child(1) a:hover, #gNav li.gNavCurrent:nth-child(1) a { background-image: url(/_content/mymj.SharedPages/img/category_icon01_on.png); }
#gNav li:nth-child(2) a:hover, #gNav li.gNavCurrent:nth-child(2) a { background-image: url(/_content/mymj.SharedPages/img/category_icon02_on.png); }
#gNav li:nth-child(3) a:hover, #gNav li.gNavCurrent:nth-child(3) a { background-image: url(/_content/mymj.SharedPages/img/category_icon03_on.png); }
#gNav li:nth-child(4) a:hover, #gNav li.gNavCurrent:nth-child(4) a { background-image: url(/_content/mymj.SharedPages/img/category_icon04_on.png); }
#gNav li:nth-child(5) a:hover, #gNav li.gNavCurrent:nth-child(5) a { background-image: url(/_content/mymj.SharedPages/img/category_icon05_on.png); }

#gNav a:hover, #gNav li.gNavCurrent a { color: rgb(23,89,176); }

/* --- 執筆者紹介 --- */
#navWriter {
  position: absolute;
  right: 0;
  top: -5px;
  width: 114px;
  height: 84px;
  background: url(/_content/mymj.SharedPages/img/nav_writer_bg.png) no-repeat center / contain;
  text-align: center;
}

#navWriter a {
  display: block;
  color: #fff;
  font-size: 1.6rem;
  padding-top: 46px;
}

#navWriter a::before {
  content: "";
  display: block;
  width: 48px;
  height: 30px;
  margin: 8px auto 4px;
  background: url(/_content/mymj.SharedPages/img/nav_writer_icon.png) no-repeat center / contain;
  position: absolute;
  top: 8px;
  left: 33px;
}

/* --- SNS アイコン --- */
#headerSNSicons {
  position: absolute;
  right: 0;
  top: -144px;
  display: flex;
}

body#top #headerSNSicons { top: -234px; }

#headerSNSicons li { margin-left: 15px; }
#headerSNSicons img { width: 38px; height: 38px; }

/* --- 検索 --- */
#searchWrap {
  position: absolute;
  top: -140px;
  right: 107px;
}

body#top #searchWrap { top: -230px; }

#searchFormWrap form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 38px;
  height: 32px;
  background: url(/_content/mymj.SharedPages/img/serch_icon.png) no-repeat right center;
  background-size: 22px 21px;
}

#search {
  width: 0;
  height: 32px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.8);
  transition: width 0.4s;
  font-size: 1.4rem;
}

#search:focus { width: 216px; padding: 0 6px; outline: none; }

#search_submit { display: none; }

/* ==================================================================
   テーマタグ帯
   ================================================================== */
/* mymj50194411: 利用者の指示により、テーマタグの一覧を左へ30px・右へ72px広げる。
   現行サイトは 267.5〜917.5（幅650）だが、本サイトは 237.5〜989.5（幅752）とする。
   現行と異なる形であり、利用者の明示の指示による変更である。
   親（#contents）は 左端 92.5・幅 1000（実測）。
   左 237.5−92.5＝145px、右 (92.5+1000)−989.5＝103px。
   幅は width の固定をやめて余白から決める（1000−145−103＝752）。
   width: 650px を残すと余白を変えても幅が 650 のままで目標に届かないため外した。 */
#themeTags {
  margin: 30px 103px 0 145px;
  position: relative;
}

#themeTags h2 {
  width: 116px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 3.2rem;
  background: rgb(23,89,176) url(/_content/mymj.SharedPages/img/tag_bg.jpg) no-repeat right center;
  background-size: 184px auto;
}

/* mymj50115453 の 4.1。現行は ul の文字寸法・行送りを 0 にして li 間の空白を消し、
   li を inline-block で並べている。flex は使っていないので display:flex／flex-wrap を外した
   （flex のままだと li の inline-block が無効になる）。 */
/* mymj50203270: 利用者の指示により、テーマタグの項目が並ぶ内側の箱を 524px → 527px にする。
   前番号 mymj50194411 で外側を 752px に広げたが、折り返しを決めているのは
   この内側の箱であり、524px のままでは折り返しが変わらなかった。
   3px 足すと「エネルギー」が1行目に入る（前番号の実測による算出）。
   現行サイトと異なる形であり、利用者の明示の指示による変更である。 */
#themeTags ul {
  width: 527px;
  margin-left: 126px;
  margin-top: -3rem;
  font-size: 0;
  line-height: 0;
}

#themeTags li { font-size: 1.7rem; line-height: 2.8rem; display: inline-block; }

#themeTags li::after {
  content: "｜";
  color: #999;
}

#themeTags li:last-child::after { content: ""; }

#themeTags li a { color: #000; }
#themeTags li a:hover { color: rgb(23,89,176); }
#themeTags li.current a { color: rgb(23,89,176); font-weight: bold; }

/* ==================================================================
   記事カード
   ================================================================== */
.articleList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 55px;
  margin-bottom: -45px;
}

.articleList li.post {
  width: 300px;
  margin-right: 50px;
  margin-bottom: 45px;
  padding: 40px 21px 20px;
  border-right: 1px solid rgb(165,165,165);
  border-bottom: 1px solid rgb(165,165,165);
  background: url(/_content/mymj.SharedPages/img/article_line_bg.png) no-repeat left top;
  display: flex;
  flex-direction: column;
  position: relative;
}

.articleList li.post:nth-child(3n) { margin-right: 0; }

/* mymj50176785 の 4.1: 枠の幅を 258px に固定していたのをやめたので、
   img の幅も 258px の指定を外す（下の .post_card_thum img の width:100% が効く）。 */

h3.post_card_title {
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 3.3rem;
  margin-top: 14px;
}

h3.post_card_title a { color: #000; }

.articleList li.post > ul { margin-top: 8px; display: flex; flex-wrap: wrap; }
.articleList li.post > ul li { font-size: 1.6rem; line-height: 2rem; margin-right: 16px; }

.articleList li.post .writer {
  margin-top: auto;
  padding-top: 12px;
  text-align: right;
  font-size: 1.8rem;
  line-height: 2.2rem;
}

/* mymj50185620 の 4.2: 現行の実測は margin-left 12px・width 245px、
   ::before は vertical-align middle・margin-right 3px。
   baseline のままだと 16px の絵がベースラインに乗り、time の箱が 1px 高くなっていた。 */
.articleList li.post .writer time {
  display: block;
  margin-top: 3px;
  margin-left: 12px;
  width: 245px;
  font-size: 1.4rem;
  color: #666;
}

.articleList li.post .writer time::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 16px;
  margin-right: 3px;
  vertical-align: middle;
  background: url(/_content/mymj.SharedPages/img/time_icon.png) no-repeat center / contain;
}

/* --- カテゴリ札 --- */
.categoryLabel {
  position: absolute;
  top: -10px;
  left: 20px;
  z-index: 10;
  width: 135px;
  height: 36px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  line-height: 34px;
  background: url(/_content/mymj.SharedPages/img/category_label_bg.png) no-repeat center / 135px 36px;
}

.categoryLabel::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 36px;
  vertical-align: middle;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.categoryLabel.remark::before    { background-image: url(/_content/mymj.SharedPages/img/category_label_icon01.png); margin-right: 12px; }
.categoryLabel.backstage::before { background-image: url(/_content/mymj.SharedPages/img/category_label_icon02.png); margin-right: 6px; }
.categoryLabel.column::before    { background-image: url(/_content/mymj.SharedPages/img/category_label_icon03.png); margin-right: 4px; }
.categoryLabel.interview::before { background-image: url(/_content/mymj.SharedPages/img/category_label_icon04.png); margin-right: 8px; }
.categoryLabel.special::before   { background-image: url(/_content/mymj.SharedPages/img/category_label_icon05.png); margin-left: -8px; }

/* --- NEW --- */
.newMark {
  position: absolute;
  top: -14px;
  right: 20px;
  z-index: 10;
}

.newMark img { width: 56px; height: 48px; }

/* --- 次ページ・さらに読む ---
   mymj50167959 の 3-4 で現行サイトの「さらに読む」を実測した値に合わせた。
   幅300px・上余白30px・左右中央・内側 8px 20px・黒地・白文字・18px・行の高さ22px・角丸30px。 */
.buttonType01,
span.next_posts_link a,
span.prev_posts_link a,
div.readmore a {
  display: block;
  width: 300px;
  margin: 30px auto 0;
  padding: 8px 20px;
  background: #000;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-align: center;
  border-radius: 30px;
}

/* 「さらに読む」は押せるものなので指の形にする（現行の実測どおり）。 */
.buttonType01 { cursor: pointer; }

span.next_posts_link a:hover,
span.prev_posts_link a:hover,
div.readmore a:hover { background: rgb(23,89,176); color: #fff; }

/* mymj50167959 の 8-j: 現行の .readmore は text-align が start（ボタン側の margin auto で中央に来る）。
   値まで現行に合わせる。 */
div.readmore { font-size: 1.6rem; }

/* ==================================================================
   記事ページ
   ================================================================== */
/* mymj50185620 の 4.3: 現行の実測は justify-content: normal・align-items: center で、
   右側の 50px は .rightWrap の左余白が作っている。space-between だと、幅 0 の
   #articleHeaderWrapSP を含む3つの間に余りの 50px が 25px ずつ配られ、
   .leftWrap の左端が 92.5 ではなく 117.5 になっていた。
   SNS のアイコンは現行では .leftWrap の右下に付く（.leftWrap が位置の基準）。 */
.articleHeader {
  display: flex;
  justify-content: normal;
  align-items: center;
  border-top: 1px solid rgb(165,165,165);
  border-bottom: 1px solid rgb(165,165,165);
  margin-bottom: 80px;
  position: relative;
}

.articleHeader .leftWrap { width: 650px; position: relative; }
.articleHeader .rightWrap { width: 300px; margin-left: 50px; }

.articleHeader h3.categoryLabel { left: 0; }

.articleHeaderImgSP { display: none; }
.articleHeaderImgPC figure { width: 300px; height: 300px; overflow: hidden; }
.articleHeaderImgPC img { width: 300px; }

.articleHeader h2 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 4.8rem;
  padding-top: 30px;
  margin-bottom: 34px;
}

.articleHeader .leftWrap > ul { display: flex; flex-wrap: wrap; }
.articleHeader .leftWrap > ul li { font-size: 1.6rem; margin-right: 15px; }

.articleHeader .writer {
  border-top: 1px solid rgb(165,165,165);
  margin-top: 12px;
  padding-top: 6px;
  text-align: left;
  font-size: 2.2rem;
  line-height: 2.6rem;
}

.articleHeader .writer time { font-size: 1.4rem; color: #666; margin-left: 8px; }

ul.articleSnsIcons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
}

ul.articleSnsIcons li { margin-left: 15px; font-size: 1.4rem; }
ul.articleSnsIcons img { width: 36px; height: 36px; }

#articleUnderSnsIcons { display: none; }

/* --- 本文 --- */
#textWrap { width: 700px; margin: 0 auto; }
#textWrap p { margin-bottom: 43px; }
#textWrap figure { margin-bottom: 45px; }
/* height: auto は mymj50106255 の 4.1。
   width だけだと img の height 属性（原本の高さ）がそのまま効いて縦横比が崩れる。 */
#textWrap figure img { width: 100%; height: auto; }
#textWrap figcaption { margin-top: 10px; font-size: 1.4rem; line-height: 2rem; }

#textWrap h3 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 3.3rem;
  margin-bottom: 15px;
}

#textWrap a { font-weight: bold; }
#textWrap ul, #textWrap ol { margin-bottom: 43px; padding-left: 1.6em; }
#textWrap ul li { list-style: disc; }
#textWrap ol li { list-style: decimal; }
#textWrap blockquote {
  margin-bottom: 43px;
  padding: 12px 20px;
  border-left: 3px solid rgb(165,165,165);
}

/* --- あわせて読みたい --- */
#recommend { margin-top: 80px; }

#recommend h3 {
  text-align: center;
  font-weight: bold;
  font-size: 2.1rem;
  line-height: 2.6rem;
  border-top: 2px solid rgb(23,89,176);
  border-bottom: 2px solid rgb(23,89,176);
  padding: 8px 0;
}

/* ==================================================================
   執筆者紹介（mymj50106255 の 4.2）
   class・id は現行サイトの /writer/ に合わせた。数値は指示書 4.2 の表。
   ================================================================== */
/* 二重線は mymj50115453 の 4.4。現行は要素自身の下罫線と、
   背景の title_underline.gif を left bottom 4px で横に繰り返して作っている
   （前番号の ::after による代用は撤去した）。 */
#writerHeadline {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 3rem;
  line-height: 3.4rem;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(165,165,165);
  background: url(/_content/mymj.SharedPages/img/title_underline.gif) left bottom 4px repeat-x;
}

.writerWrap {
  border-bottom: 1px solid rgb(165,165,165);
  margin-bottom: 10px;
  padding-bottom: 10px;
  overflow: hidden;
}

.writerList img {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
  /* 正方形に切り抜く。mymj50097123 の 4.9 で入れた規則を class 名だけ移したもの */
  object-fit: cover;
  object-position: center;
}

.writerList ul li { display: inline-block; }

.writerName {
  font-size: 3rem;
  line-height: 3.4rem;
  margin: 15px 0 10px;
}

.writerName::after {
  content: "｜";
  color: rgb(23,89,176);
  font-size: 1.6rem;
  margin-left: 5px;
}

.writerName span {
  color: #999;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: 8px;
}

/* mymj50115453 の 4.3。現行はアイコンを li（.articleLink）の擬似要素で出している。
   前番号は a の擬似要素にしていたので移した。間隔は 6px → 8px。 */
.articleLink { font-weight: bold; }

.articleLink::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 16px;
  margin-bottom: 4px;
  margin-right: 8px;
  background: url(/_content/mymj.SharedPages/img/writer_article_link_icon.png) no-repeat center / contain;
}

.writerList02 { margin-left: 220px; }

.writerList02 p { line-height: 2.4rem; }

/* 肩書の札。mymj50115453 の 4.2 の計測値（前番号の推定値を置き換えた）。 */
.profession {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2rem;
  padding: 3px 10px;
  border-radius: 20px;
}

/* 外部リンク行。mymj50115453 の 4.3 の計測値（前番号の推定値を置き換えた）。 */
.officialWeb {
  text-align: right;
  font-size: 1.4rem;
  line-height: 1.8rem;
  margin-top: 18px;
}

.officialWeb::before {
  content: "【オフィシャルサイト・SNS・ブログ】";
  color: rgb(23,89,176);
}

.officialWeb a { text-decoration: underline; }

.writerWrap a,
.writerWrap a:visited { color: rgb(23,89,176); }
.writerWrap a:hover { color: rgb(27,104,206); }

/* ==================================================================
   フッタ
   ================================================================== */
footer { text-align: center; margin-top: 60px; }

#spPageTop { display: none; }

#footerNavi {
  background: rgb(23,89,176);
  padding: 6px 0;
  display: flex;
  justify-content: center;
}

#footerNavi li { margin: 0 10px; font-size: 1.4rem; }
#footerNavi li a { color: #fff; }

footer small {
  display: block;
  font-size: 1.2rem;
  line-height: 1.4rem;
  background: #fff;
  padding: 30px 0;
}

.pagetop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  z-index: 120;
}

.pagetop.is-visible { display: block; }
.pagetop img { width: 40px; height: 40px; }

/* ==================================================================
   ハンバーガー用の覆い（SP のみ使う）
   ================================================================== */
.drawer-overlay { display: none; }

/* ==================================================================
   SP（899px 以下）
   ================================================================== */
@media screen and (max-width: 899px) {

  body { min-width: 0; }

  /* 左右の padding は mymj50115453 の 4.6 で撤去した
     （現行の #contents はスマホで左右余白を持たない。余白は各要素側だけが持つ）。 */
  #contents { width: 100%; }

  /* ---- ヘッダ ---- */
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 110;
    background: url(/_content/mymj.SharedPages/img/header_bg_sp_contents.jpg) center center / cover no-repeat;
  }

  body#top header {
    height: 220px;
    background-image: url(/_content/mymj.SharedPages/img/header_bg_sp.jpg);
  }

  body { padding-top: 80px; }
  body#top { padding-top: 220px; }

  #headerWrap {
    width: 100%;
    padding: 0 20px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* mymj50176785 の 4.3: PC の body#top #headerWrap { padding: 30px 0 40px } は
     詳細度が上の #headerWrap { padding: 0 20px } より高いため、899px 以下でも
     効いてしまい、トップの左右余白が 0 になり、h1 の上端も 5px ずれていた
     （現行 t=16／複製 t=11。実測）。ここで打ち消す。 */
  body#top #headerWrap { height: 220px; padding: 0 20px; }

  /* 高さ 80px のヘッダ（トップ以外の全ページ）。
     指示書 4.3 は 80px 時の h1 の寸法を「トップのスクロール後」の行だけに書いている。
     高さが同じ 80px である以上、同じ寸法を使わないと h1 が枠に収まらないため、
     トップ以外にも同じ指定を当てた。 */
  header h1 {
    text-align: left;
    font-size: 1.9rem;
    line-height: 2.4rem;
    padding-left: 50px;
  }

  /* mymj50176785 の 4.3: 高さ 80px のヘッダでは、現行の span に内側の余白は無く、
     字間は 2px（実測: 記事ページ 375px で 95.17px 幅）。 */
  header h1 span { font-size: 1.4rem; line-height: 2rem; padding: 0; letter-spacing: 2px; }
  header h1 div { margin-bottom: 0; }

  /* トップ（スクロール前）は 220px なので大きいまま */
  body#top header h1 {
    text-align: center;
    font-size: 3.6rem;
    line-height: 4rem;
    padding-left: 0;
  }

  /* トップ（220px のヘッダ）は内側の余白と字間を PC と同じに戻す（実測どおり）。 */
  body#top header h1 span { font-size: 2.2rem; line-height: 2.6rem; padding: 0 24px 4px; letter-spacing: 4px; }
  body#top header h1 div { margin-bottom: 16px; }

  #lede { font-size: 1.5rem; line-height: 2.2rem; margin-top: 8px; }

  /* トップのスクロール後は 80px 側に戻す */
  body#top header.is-animation {
    height: 80px;
    background-image: url(/_content/mymj.SharedPages/img/header_bg_sp_contents.jpg);
  }

  body#top header.is-animation #headerWrap { height: 80px; }
  body#top header.is-animation h1 { text-align: left; font-size: 1.9rem; line-height: 2.4rem; padding-left: 50px; }
  body#top header.is-animation h1 span { font-size: 1.4rem; line-height: 2rem; }
  body#top header.is-animation h1 div { margin-bottom: 0; }
  body#top header.is-animation #lede { display: none; }

  /* ---- ハンバーガー ---- */
  /* mymj50176785 の 4.3: 現行サイトの実測に合わせた。
     ボタン 39×39・左上 (20,20)・黒 1px の枠・角丸 6px、
     線は 25×3 の黒、真ん中の線の上端が 38px（ボタンの上から 18px）。 */
  #hamburgerMenu {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 120;
  }

  .drawer-hamburger {
    width: 39px;
    height: 39px;
    background: transparent;
    border: 1px solid #000;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    padding: 0;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .drawer-hamburger-icon,
  .drawer-hamburger-icon::before,
  .drawer-hamburger-icon::after {
    display: block;
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background: #000;
    content: "";
  }

  /* ボタンの内側（枠の内）の左上からの位置。左 6px・上 17px で、
     画面上は左 27px・上 38px になる（現行の実測と同じ）。 */
  .drawer-hamburger-icon { top: 17px; left: 6px; }
  .drawer-hamburger-icon::before { top: -10px; }
  .drawer-hamburger-icon::after { top: 10px; }

  body.drawer-open .drawer-hamburger-icon { background: transparent; }
  body.drawer-open .drawer-hamburger-icon::before { top: 0; transform: rotate(45deg); }
  body.drawer-open .drawer-hamburger-icon::after { top: 0; transform: rotate(-45deg); }

  .drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 100;
  }

  body.drawer-open .drawer-overlay { display: block; }

  /* ---- ナビ ---- */
  nav.drawer-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 101;
    border: 0;
    padding: 60px 0 20px;
    overflow-y: auto;
    transition: left 0.6s;
  }

  body.drawer-open nav.drawer-nav { left: 0; }

  nav.drawer-nav.is-fixed { position: fixed; }

  #navWrap { width: 100%; }

  /* mymj50185620 の 4.4: 幅 899px 以下（引き出しのナビ）は変えない。 */
  #inner { margin: 0; }
  .navMargin { margin: 0; }

  /* about */
  #about {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  #about .navNone { padding-top: 0; }
  #about .navNone br { display: none; }
  #about .line { display: none; }
  #about a { padding: 10px 20px; }

  /* カテゴリ */
  #gNav { flex-wrap: wrap; justify-content: flex-start; padding: 0 10px; }

  #gNav li {
    width: calc(33.333% - 20px);
    height: 110px;
    margin: 0 10px 14px;
    font-size: 1.8rem;
  }

  #gNav a {
    width: 100%;
    height: 110px;
    padding-top: 72px;
    background-size: 61px 58px;
    background-position: center 12px;
  }

  #gNav li:nth-child(5) a { background-position: center 13px; }

  /* 執筆者紹介 */
  #navWriter {
    position: static;
    width: 100%;
    height: auto;
    background: none;
    border: 1px solid rgb(23,89,176);
    text-align: center;
  }

  #navWriter a {
    color: rgb(23,89,176);
    font-weight: bold;
    font-size: 1.8rem;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #navWriter a::before {
    position: static;
    width: 48px;
    height: 30px;
    margin: 0 8px 0 0;
    background-image: url(/_content/mymj.SharedPages/img/nav_writer_icon_sp.png);
  }

  /* SNS */
  #headerSNSicons {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }

  body#top #headerSNSicons { top: auto; }

  #headerSNSicons li { margin: 0 15px; }
  #headerSNSicons img { width: 36px; height: 36px; }

  /* 検索 */
  #searchWrap { position: absolute; top: 20px; right: 20px; }
  body#top #searchWrap { top: 20px; }

  /* ---- テーマタグ帯 ---- */
  /* mymj50176785 の 4.3: 現行の帯の下余白は、トップは 0・記事などは 5px（実測）。
     トップで帯とカードの間を作っているのは #pickUpWrap の下余白 50px。 */
  #themeTags { width: 100%; margin: 0 0 5px; }
  body#top #themeTags { margin-bottom: 0; }

  #pickUpWrap { margin-bottom: 50px; }

  #themeTags h2 {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2.5rem;
    background-image: none;
  }

  #themeTags ul {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 10px 20px;
  }

  #themeTags li { font-size: 1.6rem; line-height: 2.6rem; }

  /* ---- 記事カード ---- */
  .articleList {
    display: block;
    margin: 30px 20px 0;
  }

  .articleList li.post {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    padding: 40px 20px 20px;
  }

  .post_card_thum img { width: 100%; }

  h3.post_card_title { font-size: 1.9rem; line-height: 2.8rem; margin-top: 10px; }

  .buttonType01,
  span.next_posts_link a,
  span.prev_posts_link a,
  div.readmore a { width: 90%; }

  /* ---- 記事ページ ---- */
  .articleHeader {
    display: block;
    border-top: 0;
    border-bottom: 2px solid rgb(23,89,176);
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  .articleHeader .leftWrap,
  .articleHeader .rightWrap { width: 100%; }

  /* mymj50185620 の 4.3: 幅 899px 以下は変えない（4.3 の変更は 1200px の記事ヘッダだけ）。
     PC で足した左余白と位置の基準をここで元に戻す。 */
  .articleHeader .rightWrap { margin-left: 0; }
  .articleHeader .leftWrap { position: static; }

  /* mymj50133244 の 4.1。記事ヘッダの文字側だけに左右 20px を持たせる
     （mymj50115453 の 4.6 で #contents の左右 padding を外したため、
     .leftWrap の中身が画面の端に接していた）。画像側（.rightWrap）は幅いっぱいのまま。 */
  .articleHeader .leftWrap { padding: 0 20px; }

  #articleHeaderWrapSP { position: relative; }
  .articleHeader h3.categoryLabel { left: 20px; top: auto; bottom: -26px; }

  .articleHeaderImgSP { display: block; }
  .articleHeaderImgSP img { width: 100%; }
  .articleHeaderImgPC { display: none; }

  .articleHeader h2 {
    font-size: 2.3rem;
    line-height: 3rem;
    padding-top: 38px;
    margin-bottom: 5px;
  }

  .articleHeader .writer { border-top: 0; text-align: right; }

  ul.articleSnsIcons { right: 20px; }

  #articleUnderSnsIcons { display: block; }
  #articleUnderSnsIcons ul.articleSnsIcons {
    position: static;
    justify-content: flex-end;
    margin-right: 20px;
  }

  #textWrap { width: 100%; padding: 0 20px; }
  #textWrap p { margin-bottom: 32px; }
  #textWrap figure { margin-bottom: 28px; }
  #textWrap h3 { font-size: 2rem; line-height: 2.8rem; }

  #recommend { margin-top: 25px; }
  #recommend h3 { font-size: 1.8rem; line-height: 2.4rem; padding: 5px 0; }

  /* ---- 執筆者紹介（mymj50106255 の 4.2） ---- */
  #writerHeadline { font-size: 2.5rem; line-height: 2.8rem; margin-top: 98px; }

  .writerWrap { padding: 0 20px 10px; }

  .writerList { position: relative; }

  .writerList img { width: 110px; height: 110px; margin-right: 15px; }

  .writerList ul { margin-left: 125px; }
  .writerList ul li { display: block; }
  .writerList ul li a { display: inline; }

  .writerName { font-size: 2.8rem; line-height: 3rem; margin: 4px 0 0; }
  .writerName::after { content: ""; }

  .writerName span {
    display: block;
    font-size: 1.3rem;
    line-height: 2.2rem;
    margin-left: 0;
  }

  .writerList02 { margin: 0; padding-top: 10px; }

  /* mymj50115453 の 4.2・4.3（スマホ） */
  .profession { font-size: 1.3rem; line-height: 0; padding: 12px 10px; }

  .articleLink { margin-top: -2px; }

  .officialWeb { margin-top: 10px; text-align: left; }
  .officialWeb::before { display: block; }
  .officialWeb a { display: inline; }

  /* 経歴の折りたたみ。初期は閉じる（経歴と外部リンクを隠す）。
     矢印は .writerList の右下。押すと site.js が .writerList に active を付ける。 */
  .writerList::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 20px;
    background: url(/_content/mymj.SharedPages/img/toggle_arrow_open.png) no-repeat center / contain;
  }

  .writerList.active::after { background-image: url(/_content/mymj.SharedPages/img/toggle_arrow_close.png); }

  .writerList02 { display: none; }
  .writerList.active + .writerList02 { display: block; }

  /* ---- フッタ ---- */
  footer { margin-top: 0; }

  /* mymj50176785 の 4.3: 現行は 34×34 の絵を上下 20px の余白で中央に置いている
     （実測。上の余白はフッタの外側に抜ける＝margin の相殺）。
     padding だと相殺が起きず、フッタが 26px 高くなっていた。 */
  #spPageTop { display: block; width: 34px; margin: 20px auto; padding: 0; }
  #spPageTop a { display: block; }
  #spPageTop img { width: 34px; height: 34px; }

  /* mymj50176785 の 4.3: 現行の #footerNavi は block ＋ 中央そろえで、
     li は inline（箱の高さ 21px）。flex のままだと li が block 化されて 28px になる。 */
  #footerNavi { display: block; text-align: center; }
  /* 行送りは現行の実測 18px。継承の 28px のままだと帯が 1px 高くなる。 */
  #footerNavi li { display: inline; margin: 0 20px 0 0; line-height: 1.8rem; }
  #footerNavi li:last-child { margin-right: 0; }

  footer small { padding: 10px 0; }

  .pagetop { display: none !important; }
}

/* ==================================================================
   プレビューの注意文（mymj50079453 の 4.3）
   ================================================================== */
#previewNotice {
  background: #fff3cd;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
}

/* ==================================================================
   mymj50097123 の 4.9 サムネイルと記事ヘッダ画像の正方形化
   現行サイトは正方形の枠に切り抜いて収めている。
   img の width／height 属性（原本の寸法）は残し、表示寸法は CSS で決める。
   ================================================================== */
/* mymj50158037 の 4.13: アイキャッチが無い記事でも枠を同じ寸法で確保する。
   img を出さないので、枠が見えるように地の色を置く（仕様書 v1.7 の 4.1・注53）。
   mymj50176785 の 4.1: 現行サイトの枠は正方形ではなく 16:9 だった（3-3 の実測）。
   1200px で 257×144.56、375px で 279×156.94。どちらも 幅÷高さ = 16/9。
   幅は箱の中身の幅（題名・テーマタグ・執筆者と同じ 257px／279px）に合わせるため
   固定値をやめて auto にし、高さは aspect-ratio で幅から決める。 */
.post_card_thum {
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2f2f2;
}

.post_card_thum img,
.articleHeaderImgPC figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* mymj50185620 の 4.5: 一覧カードの画像枠は角丸 3px（現行の実測）。
   枠（a.post_card_thum_img）が切り抜きの箱になる。
   記事ヘッダの PC 画像も同じ class を持つが .articleList の外なので 0 のまま。 */
.articleList .post_card_thum_img {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
}

/* mymj50185620 の 4.6: あわせて読みたい（#recommend の次の一覧）の枠は角丸なし
   （現行は枠の inline style で border-radius:0）。 */
#recommend + ul.articleList .post_card_thum_img { border-radius: 0; }

/* mymj50185620 の 4.7: 一覧カードとあわせて読みたいの画像は、
   マウスを載せると 1 秒かけて 1.3 倍。枠の overflow: hidden で外へはみ出さない。
   記事ヘッダ・本文の画像には付けない。 */
.articleList .post_card_thum_img img { transition: 1s; }
.articleList .post_card_thum_img:hover img { transform: scale(1.3); }

/* mymj50176785 の 4.1: スマホの記事ヘッダ画像は、現行サイトでは枠を切らずに
   原本の縦横比のまま出している（3-3 の実測。4記事で確かめた。
   1304×870 → 360×240.17、2560×2545 → 360×357.89。いずれも 360÷原本の比）。 */
.articleHeaderImgSP img {
  width: 100%;
  height: auto;
}

/* mymj50158037 の 4.13: 記事ヘッダも同じ寸法の枠を必ず確保する。 */
.articleHeaderImgPC figure {
  width: 300px;
  height: 300px;
  overflow: hidden;
  background: #f2f2f2;
}

/* 執筆者写真の正方形化は mymj50106255 の 4.2 で .writerList img に移した */

/* ==================================================================
   mymj50097123 の 4.6 固定ページ（about・contact・privacy）
   about の数値は指示書 4.6 の計測値。
   contact・privacy は現行 CSS の該当規則が未確認のため、
   記事本文（#textWrap）と同じ見た目を当てている（結果に「見た目未再現」と記載）。
   ================================================================== */
#aboutWrap {
  margin-top: 50px;
  padding: 55px 0 30px;
  background: url("/_content/mymj.SharedPages/img/about_bg.jpg") left top no-repeat;
  position: relative;
}

.aboutTitleBg {
  background: linear-gradient(to right, rgb(23,89,176), rgba(23,89,176,0));
  padding: 20px 40px;
  color: #fff;
  margin-bottom: 50px;
}

.aboutTitleBg h2 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: 3.6rem;
  letter-spacing: 4px;
}

.aboutTitleBg h2 br { display: none; }

.aboutTitleBg h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: 1px;
  margin-top: 3px;
}

#aboutWrap p {
  margin-bottom: 30px;
  width: 570px;
  margin-left: 40px;
}

.mayamaSign {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 2.3rem;
  line-height: 2.6rem;
  margin-left: 40px;
}

#mayamaPhoto {
  position: absolute;
  top: 75px;
  right: 0;
}

#mayamaPhotoSP { display: none; }

/* ==================================================================
   contact（mymj50106255 の 4.3）・privacy（同 4.4）
   数値は指示書の表。現行サイトの CSS は取得も転記もしていない。
   ================================================================== */

/* --- 見出し（contact・privacy 共通。二重下線は #writerHeadline と同じ作り） --- */
#subContentsHeadline {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 3rem;
  line-height: 3.4rem;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(165,165,165);
  background: url(/_content/mymj.SharedPages/img/title_underline.gif) left bottom 4px repeat-x;
}

/* 段落の下余白は mymj50097123 で入れた既存の規則（4.3・4.4 の表には無い）。
   消すと固定3ページの段落が地続きになるため残した。 */
.contactTextTop,
.contactTextUnder,
#privacyPolicyWrap p { margin-bottom: 25px; }

/* --- contact（4.3） --- */
.contactTextTop { text-align: center; }

/* mymj50133244 の 4.2。現行の #contactFormWrap は灰色の地であり、上下の罫線は無い。
   mymj50106255 の 4.3 で当てた上下罫線（#contactFormWrap02 の値）は誤りだったので外した。 */
#contactFormWrap {
  background: #e6e6e6;
  margin: 30px 0 15px;
  padding: 25px 30px;
}

.contactMail {
  text-align: center;
  padding: 10px 0 5px;
}

.contactMail h3 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 2.6rem;
  line-height: 3rem;
}

.contactMail p { margin-top: 5px; color: #666; }

.contactTextUnder a { text-decoration: underline; }
.contactTextUnder a:hover { color: rgb(27,104,206); }

/* --- privacy（4.4） --- */
#privacyPolicyWrap { width: 700px; margin: 0 auto; }

#privacyPolicyWrap a { text-decoration: underline; }
#privacyPolicyWrap a:hover { color: rgb(27,104,206); }

#privacyPolicyWrap h3 {
  color: rgb(23,89,176);
  font-size: 2.2rem;
  line-height: 2.8rem;
  text-align: center;
  margin: 40px 0 30px;
}

#privacyPolicyWrap h3 br { display: none; }

#privacyPolicyWrap ol { list-style: decimal outside; margin-left: 20px; }
#privacyPolicyWrap ol li { margin-bottom: 40px; }
#privacyPolicyWrap ol li h4 { font-weight: bold; margin-bottom: 5px; }
#privacyPolicyWrap ol li ol { list-style: none; margin-left: 0; }
#privacyPolicyWrap ol li ol li { margin-bottom: 15px; }
#privacyPolicyWrap ol li ol li ul { list-style: disc outside; margin-left: 48px; }
#privacyPolicyWrap ol li ol li ul li { margin-bottom: 0; }

/* h5 は 4.4 の表に無い。mymj50097123 で入れた既存の規則をそのまま残した。 */
#privacyPolicyWrap h5 {
  font-weight: bold;
  margin: 10px 0 5px;
}

.ppDate { text-align: right; margin-top: 40px; }
.ppSign { text-align: right; font-weight: bold; }

/* underLine は #contents に付く class。#contents（id）の padding に負けないよう
   #contents.underLine で書いている。 */
#contents.underLine {
  border-bottom: 1px solid rgb(165,165,165);
  padding-bottom: 30px;
}

@media screen and (max-width: 899px) {
  /* ---- 4.9 スマホ ---- */
  /* mymj50176785 の 4.1: 縦横比は 1/1 ではなく 16/9（3-3 の実測: 279×156.94）。
     上の .post_card_thum の aspect-ratio: 16/9 をそのまま使うので、ここでは幅だけ。 */
  .post_card_thum { width: 100%; }

  /* mymj50176785 の 4.1: 現行サイトのスマホの記事ヘッダ画像は原本の縦横比のまま
     （3-3 の実測）。枠で切らない。
     アイキャッチが無い記事だけは、mymj50158037 の 4.13 のとおり枠を確保する。 */
  .articleHeaderImgSP { width: 100%; }
  .articleHeaderImgSP:empty {
    aspect-ratio: 1 / 1;
    background: #f2f2f2;
  }

  /* ---- 4.6 スマホ ---- */
  #aboutWrap {
    margin-top: 0;
    padding: 0;
    background: none;
  }

  .aboutTitleBg {
    margin-bottom: 25px;
    padding: 25px 20px;
    background: #fff url("/_content/mymj.SharedPages/img/about_bg_sp.jpg") right center no-repeat;
    background-size: 100% auto;
    position: relative;
    z-index: -2;
  }

  .aboutTitleBg h2 { font-size: 2.7rem; line-height: 3.5rem; letter-spacing: -1px; }
  .aboutTitleBg h2 br { display: inline; }
  .aboutTitleBg h3 { font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0; margin-top: 8px; }

  #aboutWrap p {
    margin-bottom: 20px;
    width: 100%;
    margin-left: 0;
    padding: 0 20px;
    line-height: 2.5rem;
  }

  .mayamaSign { margin-left: 0; margin-right: 20px; text-align: right; }

  #mayamaPhoto { display: none; }

  #mayamaPhotoSP {
    display: block;
    position: absolute;
    bottom: 0;
    right: 25px;
    z-index: -1;
  }

  #mayamaPhotoSP img { width: 160px; height: 144px; }

  /* ---- 4.3 contact スマホ ---- */
  #subContentsHeadline {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-top: 98px;
    margin-bottom: 20px;
  }

  .contactTextTop { padding: 0 20px; line-height: 2.4rem; }

  #contactFormWrap { margin: 20px 0 15px; padding: 20px 20px 30px; }

  .contactMail h3 { font-size: 2.3rem; line-height: 2.7rem; }

  .contactTextUnder { padding: 0 20px; line-height: 2.4rem; }

  /* ---- 4.4 privacy スマホ ---- */
  #privacyPolicyWrap { width: 100%; padding: 0 20px; line-height: 2.4rem; }

  #privacyPolicyWrap h3 { margin: 20px 0; }
  #privacyPolicyWrap h3 br { display: inline; }

  #privacyPolicyWrap ol li { margin-bottom: 30px; }
  #privacyPolicyWrap ol li ol li ul { margin-left: 20px; }

  .ppDate { margin-top: 20px; }

  #contents.underLine { padding-bottom: 20px; }
}