/* =========================================================
   MW 共通デザイン
   Yellowベース / 文字強調：黄橙色
   ========================================================= */

:root{
  --mw-accent:#c97a00;
  --mw-accent-dark:#a95f00;
  --mw-accent-light:#fff4cf;

  --mw-blue:#2f7dd1;
  --mw-green:#2ea44f;
  --mw-red:#d9534f;
  --mw-yellow:#ffc107;

  --mw-text:#333;
  --mw-border:#e3e8ef;
  --mw-soft:#f7f9fc;
}


/* =========================================================
   画像
   ========================================================= */

.article img,
.entry-content img,
.entry-body img{
  display:block;
  margin:20px auto;
  max-width:100%;
  height:auto;
}

.entry-content img.wp-post-image{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   本文の強調
   KKと同じ考え方で、太字をMWのイメージカラーへ
   ========================================================= */

.entry-content p strong,
.entry-content li strong,
.entry-content td strong{
  color:var(--mw-accent);
  font-weight:700;
}

/* リンク内のstrongまで黄橙色にしない */
.entry-content a strong{
  color:inherit;
}

/* MW用マーカー */
.mw-marker{
  font-weight:700;
  background:linear-gradient(
    transparent 62%,
    #ffe39a 62%
  );
}

/* 強調したい一文 */
.mw-emphasis{
  color:var(--mw-accent);
  font-weight:700;
}


/* =========================================================
   ショートコード互換BOX
   ========================================================= */

.sc-point{
  background:#fff9dc;
  border-left:6px solid #e6a500;
  padding:12px 15px;
  margin:20px 0;
  border-radius:6px;
}

.sc-attention{
  background:#fff1f1;
  border-left:6px solid #e53935;
  padding:12px 15px;
  margin:20px 0;
  border-radius:6px;
}

.sc-note,
.note-box{
  background:#e9f5ff;
  border-left:6px solid #039be5;
  padding:12px 15px;
  margin:20px 0;
  border-radius:6px;
}

.sc-linkbox{
  background:#f0f4ff;
  border:1px solid #3f51b5;
  padding:14px 16px;
  margin:22px 0;
  border-radius:6px;
  font-size:16px;
}

.sc-linkbox a{
  font-weight:600;
  text-decoration:none;
}


/* =========================================================
   MW 観光・アクセス・マナー記事
   ========================================================= */

.mwd-title{
  font-weight:700;
  margin-bottom:8px;
}

.mwd-point{
  border-left:5px solid var(--mw-accent);
  background:var(--mw-accent-light);
  padding:14px 16px;
  margin:22px 0;
  border-radius:5px;
}

.mwd-caution{
  border-left:5px solid #e5533d;
  background:#fff6f4;
  padding:14px 16px;
  margin:22px 0;
  border-radius:5px;
}

.mwd-ng{
  border-left:5px solid var(--mw-red);
  background:#fff4f4;
  padding:14px 16px;
  margin:22px 0;
  border-radius:5px;
}

.mwd-ok{
  border-left:5px solid var(--mw-green);
  background:#f4fbf6;
  padding:14px 16px;
  margin:22px 0;
  border-radius:5px;
}

.mwd-memo{
  border-left:5px solid #d9a000;
  background:#fffbe8;
  padding:14px 16px;
  margin:22px 0;
  border-radius:5px;
}


/* =========================================================
   書き方・マナー記事
   ========================================================= */

.mw-write-answer{
  border:2px solid var(--mw-blue);
  background:#f5f9ff;
  padding:16px 18px;
  margin:24px 0;
  border-radius:6px;
  font-size:1.05em;
  font-weight:500;
}

.mw-write-ok{
  border-left:5px solid var(--mw-green);
  background:#f4fbf6;
  padding:14px 16px;
  margin:20px 0;
  border-radius:4px;
}

.mw-write-ng{
  border-left:5px solid #e5533d;
  background:#fff5f5;
  padding:14px 16px;
  margin:20px 0;
  border-radius:4px;
}

.mw-write-point{
  border-left:5px solid var(--mw-accent);
  background:var(--mw-accent-light);
  padding:14px 16px;
  margin:20px 0;
  border-radius:4px;
}

.mw-write-caution{
  border-left:5px solid var(--mw-red);
  background:#fff4f4;
  padding:14px 16px;
  margin:20px 0;
  border-radius:4px;
}

.mw-write-example{
  background:#f8f8f8;
  border:1px solid #e5e5e5;
  padding:16px;
  margin:22px 0;
  border-radius:6px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
}


/* =========================================================
   共通リンクBOX
   ========================================================= */

.link-box,
.mw-write-related{
  background:#fffaf0;
  border:1px solid #ecd7a4;
  border-left:5px solid var(--mw-accent);
  padding:16px 18px;
  margin:25px 0;
  border-radius:6px;
}

.link-box ul,
.mw-write-related ul{
  list-style:none;
  padding-left:0;
  margin:0;
}

.link-box li,
.mw-write-related li{
  margin-bottom:8px;
  line-height:1.7;
}

.link-box li:last-child,
.mw-write-related li:last-child{
  margin-bottom:0;
}

.link-box a,
.mw-write-related a{
  text-decoration:none;
  font-weight:600;
}

.link-box a::before,
.mw-write-related a::before{
  content:"\25B6";
  margin-right:7px;
  font-size:0.82em;
  color:var(--mw-accent);
}


/* =========================================================
   BOX内の余計な空行を防止
   ========================================================= */

.mw-write-answer > :last-child,
.mw-write-point > :last-child,
.mw-write-ok > :last-child,
.mw-write-ng > :last-child,
.mw-write-caution > :last-child,
.mw-write-example > :last-child,
.mwd-point > :last-child,
.mwd-caution > :last-child,
.mwd-ng > :last-child,
.mwd-ok > :last-child,
.mwd-memo > :last-child,
.sc-point > :last-child,
.sc-attention > :last-child,
.sc-note > :last-child,
.note-box > :last-child{
  margin-bottom:0;
}


/* =========================================================
   テーブル
   ========================================================= */

.entry-content table{
  width:100%;
  margin:22px 0;
  border-collapse:collapse;
  border:1px solid #ccc;
}

.entry-content th,
.entry-content td{
  border:1px solid #ddd;
  padding:10px;
  vertical-align:top;
}

.entry-content thead th{
  background:#fff7df;
  font-weight:700;
}

.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


/* =========================================================
   縦書き・書き方例
   ========================================================= */

.vertical-box{
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-align:start;
  font-weight:500;
  line-height:2;
  margin:20px auto;
  padding:12px 16px;
  display:block;
  font-size:1.2em;
  letter-spacing:0.1em;
}

.writing-example{
  text-align:left;
  padding:12px;
  margin:20px 0;
  border:1px solid #ddd;
  background:#fafafa;
}

.vertical-example{
  text-align:center;
  font-weight:500;
  line-height:1.7;
  margin:20px 0;
}

.vertical-compare{
  display:flex;
  justify-content:center;
  gap:60px;
  margin:20px 0;
}

.vertical-compare div{
  text-align:center;
  font-weight:500;
  line-height:1.7;
}


/* =========================================================
   中央寄せ
   ========================================================= */

.mw-center{
  text-align:center;
}


/* =========================================================
   YouTube レスポンシブ
   ========================================================= */

.youtube-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin:20px 0;
}

.youtube-wrap iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}


/* =========================================================
   Google Maps / My Maps レスポンシブ
   今後の瀬戸内観光Hubでも使用
   ========================================================= */

.map-wrap{
  position:relative;
  width:100%;
  padding-top:65%;
  margin:24px 0;
  overflow:hidden;
  border-radius:6px;
}

.map-wrap iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}


/* =========================================================
   Hub記事用：子記事への案内BOX
   ========================================================= */

.mw-hub-links{
  background:#fffaf0;
  border:1px solid #ecd7a4;
  border-top:4px solid var(--mw-accent);
  padding:16px 18px;
  margin:26px 0;
  border-radius:6px;
}

.mw-hub-links .mw-hub-title{
  color:var(--mw-accent-dark);
  font-weight:700;
  margin-bottom:10px;
}

.mw-hub-links ul{
  list-style:none;
  margin:0;
  padding:0;
}

.mw-hub-links li{
  margin:8px 0;
}

.mw-hub-links a{
  font-weight:600;
  text-decoration:none;
}

.mw-hub-links a::before{
  content:"\25B6";
  color:var(--mw-accent);
  margin-right:7px;
  font-size:0.82em;
}


/* =========================================================
   スマホ
   ========================================================= */

@media screen and (max-width:768px){

  .entry-content img{
    max-width:100%;
    height:auto;
  }

  .sc-point,
  .sc-attention,
  .sc-note,
  .note-box,
  .sc-linkbox{
    padding:10px 12px;
    font-size:14px;
    margin:14px 0;
  }

  .mw-write-answer,
  .mw-write-ok,
  .mw-write-ng,
  .mw-write-point,
  .mw-write-caution,
  .mw-write-example,
  .mw-write-related,
  .mwd-point,
  .mwd-caution,
  .mwd-ng,
  .mwd-ok,
  .mwd-memo,
  .link-box,
  .mw-hub-links{
    padding:12px 14px;
    font-size:15px;
  }

  .vertical-box{
    font-size:1.1em;
    line-height:1.9;
  }

  .vertical-compare{
    gap:25px;
  }

  .map-wrap{
    padding-top:85%;
  }
}
/* mwd系BOX内の見出し色を優先 */
.mwd-title,
.mwd-title strong{
  color:var(--mw-accent-dark) !important;
}

/* mwd系BOX内のstrongは本文強調色を使わない */
.mwd-point strong,
.mwd-caution strong,
.mwd-ng strong,
.mwd-ok strong,
.mwd-memo strong{
  color:inherit;
}