/*
Theme Name: My Original Theme
Theme URI: https://example.com
Author: さんれいコンサルティング
Author URI: https://example.com
Description: さんれいコンサルティング公式HP
Version: 1.0
Text Domain: my-original-theme
*/

/* ==============================
基本設定
============================== */
body {
  margin: 0;
  padding:0;
  font-family: sans-serif;
}
section {
  display:block;
  max-width:1000px;
  margin:auto;
  padding:1rem;
}
p {
margin: 0 0 1em;
padding: 0;
}
p span{
  font-weight:bold;
}
p span.mark{
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%);
}
ul {
margin: 0 0 1em;
padding-left: 40px;
}
@media (max-width: 768px) {
/* == SP == */
  .pc{
  display:none;
  }
}/* == sp end == */
@media (min-width: 769px) {
/* == PC == */
  .sp{
  display:none;
  }
}/* == pc end == */

/* ==============================
ロゴ
============================== */

@media (max-width: 768px) {
/* == SP == */
  .logo{
  z-index: 10;
  position: absolute;
  top: 0px;
  left: 0px;
  }
  .logo img{
  width:200px;
  }
}/* == sp end == */
@media (min-width: 769px) {
  /* == PC == */
  .logo{
  z-index: 10;
  position: absolute;
  top: 10px;
  left: 18px;
  background:#fff;
  padding:0px 5px;
  }
  .logo img{
  width:200px;
  }
}/* == pc end == */

/* ==============================
ボックス
============================== */
.twobox,
.threebox{
display: block;
width: 100%;
margin: 0;
}
.twobox .inner,
.threebox .inner{
display: block;
position:relative;
}
.twobox .inner iframe,
.twobox .inner img,
.threebox .inner img{
width:100%;
}
.threebox .inner p.ttl{
background:rgba(000,0,0,0.5);
color:#fff;
font-weight:bold;
text-align:center;
padding:0.5rem;
margin:0;
position:absolute;
top:0;
right:0;
left:0;
}
.noimg .inner p.ttl{
position:relative;
}
.noimg .inner{
padding:0;
}
.noimg .inner ul{
padding:0.5rem 0 0 1.5rem;
}
.inner .eyecatch img{
width: 100%;
}

@media (max-width: 768px) {
/* == SP == */
  .twobox,
  .threebox{
  display: block;
  width: 100%;
  margin: 0;
  }
  .twobox .inner,
  .threebox .inner{
  display: block;
  position:relative;
  }
  .twobox .inner iframe{
  width:100%;
  }
  .threebox .inner p.ttl{
  background:rgba(000,0,0,0.5);
  color:#fff;
  font-weight:bold;
  text-align:center;
  padding:0.5rem;
  margin:0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  }
  .noimg .inner p.ttl{
  position:relative;
  }
  .noimg .inner{
  padding:0;
  }
  .noimg .inner ul{
  padding:0.5rem 0 0 1.5rem;
  }
}/* == sp end == */

@media (min-width: 769px) {
/* == PC == */
  .twobox,
  .threebox{
  display: flex;
  flex-wrap: wrap;
  }
  .twobox .inner{
  width: 45%;
  margin: 2%;
  }
  .twobox .inner iframe{
  height:300px;
  }
  .threebox .inner{
  width: 31%;
  margin: 1%;
  }
}/* == pc end == */

/* ==============================
左右に画像を入れるボックス
============================== */
.behind-bg img{
width:100%;
}
@media (max-width: 768px) {
  /* == SP == */

}/* == sp end == */
@media (min-width: 769px) {
    /* == PC == */
  .behind-l,
  .behind-r{
    clear: both;
    padding: 1rem 0 ;
  }
  .behind-bg{
  display: block;
  width:45%;
  }
  .behind-text{
  display: block;
  width: 45%;
  }
  .behind-l .behind-bg{
  float:left;
  }
  .behind-l .behind-text{
  float:right;
  }
  .behind-r .behind-bg{
  float:right;
  }
  .behind-r .behind-text{
  float:left;
  }
}/* == PC end == */


/* ==============================
右に画像固定のボックス
============================== */
dl.flow {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
dl.flow dt {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 20px;
  color: #333;
clear: both;
}
dl.flow dd {
  font-size: 1em;
  color: #555;
  margin-bottom: 15px;
}
dl.flow dd:nth-of-type(even) {
  text-align: left;
}
dl.flow dd:nth-of-type(odd) {
  text-align: right;
}
dl.flow dd:nth-of-type(even) img {
  float: left;
  width: 30%;
  margin: 0 15px 15px 0;
}
dl.flow dd:nth-of-type(odd) img {
  float: right;
  margin: 0 0 15px 15px;
}
@media (max-width: 768px) {
/* == SP == */
  dl.flow dd:nth-of-type(odd) img {
    width:50%;
  }
}/* == sp end == */
@media (min-width: 769px) {
/* == PC == */
  dl.flow dd:nth-of-type(odd) img {
    width:30%;
  }
}/* == pc end == */


/* ==============================
FAQ
============================== */
.faq dt, .faq dd {
display: flex;
font-size: 1rem;
padding:0.2rem;
align-items: center;
}
.faq dt {
background: #64A5D2;
color: #003366;
}
.faq dd {
background: #fde5e5;
color: #EA3132;
margin:0;
}
.faq dt::before, .faq dd::before {
display: block;
font-size: 1rem;
padding: 0.5rem;
margin-right: 0.5rem;
}
.faq dt::before {
content: "Q";
background: #003366;
color: #64A5D2;
}
.faq dd::before {
display: block;
font-weight:bold;
font-size: calc(1rem + 0.12rem);
content: "A";
background: #EA3132;
color: #fde5e5;
}

/* ==============================
ボタン
============================== */
p.btn-a,
p.btn-c,
p.btn-d,
p.btn-tel{
text-align:center;
}
p.btn-a a,
p.btn-c a,
p.btn-d a,
p.btn-tel a{
display:flex;
padding:0.5rem 1rem 0.5rem 0.5rem;
font-size:1.3rem;
font-weight:bold;
border-radius:100px;
width:300px;
margin:auto;
text-decoration:none;
}
a:hover {
opacity:0.5;
}
p.btn-a a::before,
p.btn-c a::after,
p.btn-d a::before,
p.btn-tel a::before {
content: "";
display: block;
background-size: contain;
width: 1.4rem;
height: 1.4rem;
}

p.btn-a a{
background:#ffff33;
color:#B63F42;
line-height:1.5rem;
}
p.btn-a a::before {
background-image: url("/wp/wp-content/uploads/inbox_line48.png");
margin:0.8rem 0.5rem 0.5rem 0.5rem;
}
p.btn-tel a{
background:#B63F42;
color:#ffff33;
}
p.btn-tel a::before {
background-image: url("/wp/wp-content/uploads/tel.png");
margin:0.3rem 0.5rem 0.5rem 0.5rem;
}
p.btn-b{
text-align:right;
}
p.btn-b a{
font-size:1rem;
color:#000000;
text-decoration:underline #000000 1px;
}
p.btn-b a::after{
font-size:1rem;
display:inline-block;
content:"＞＞";
text-decoration:underline #000000 1px;
}
p.btn-c a{
color:#EA3132;
background:#E4F5F8;
padding:0.5rem 0rem 0.5rem 1rem;
font-size:1.2rem;
border-radius:40px;
border:solid 3px #4c9ac0;
align-items: center;
}
p.btn-c a::after {
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}
p.btn-d a{
color:#77B255;
background:#d7ebfe;
padding:0.5rem;
font-size:1rem;
border-radius:40px;
justify-content: center;
align-items: center;
}
p.btn-d a::before {
content: "";
display: block;
background-size: contain;
width: 1rem;
height: 1rem;
border-right: 4px solid currentColor;
border-bottom: 4px solid currentColor;
transform: rotate(45deg);
margin-right:1rem;
}

ul.rm-links {
padding:0;
display: flex;
justify-content: center;
}
ul.rm-links li {
  list-style:none;
  margin:0.5rem;
}
ul.rm-links li a{
  padding:0.3rem;
  display:inline-block;
  border:solid 3px #4c9ac0;
  text-decoration: none;
}
@media (max-width: 768px) {
/* == SP == */
  p.btn-a,
  p.btn-c,
  p.btn-tel {
  font-size:0.8rem;
  }
}/* == sp end == */

@media (min-width: 769px) {
/* == PC == */
  p.btn-tel{
  display: none;
  }
}/* == pc end == */

/* ==============================
引用・参照元
============================== */
p.cap{
font-size:0.8rem;
background: #f5f5f5;
margin:1rem auto;
white-space: nowrap;
overflow-x: scroll;
}
p.cap::-webkit-scrollbar {
height: 3px;
}
p.cap::-webkit-scrollbar-thumb {
background: #000000;
}
p.cap::-webkit-scrollbar-track {
background: #f5f5f5;
}
blockquote{
position: relative;
background: #f5f5f5;
padding:3rem 0.5rem 0.5rem 0.5rem ;
width:95%;
margin:1.5rem auto;
border-radius:10px 50px 10px 10px;
border:solid 3px #000;
}
blockquote::before{
  position: absolute;
  content:"\0022 引用";
  top: 10px;
  left: 10px;/*左からの距離*/
  color: #000;
  font-size: 1.3em;
}
blockquote ul{
padding-left:40px;
}
/* ==============================
FV 基本設定
============================== */
.fv {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 800px;
  overflow: hidden;
}
.fv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.fv-text {
  display:inline-block;
  position: relative;
  z-index: 3;
  color: #fff;
  word-break:break-all;
}
.fv-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
}
.fv-subcopy {
  font-size: 1.2rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
/* == SP == */
  .fv {
    height: 50vh;
  }
  .fv-text {
    top: 50%;
  }
  .fv-text h1 {
    display:inline-block;
    padding:0.3rem 0.5rem 0.3rem 0.2rem;
    background: rgba(0, 0, 0, 0.5);
    font-size: 1.5rem;
  }
  .fv-subcopy {
    display:inline-block;
    padding:0.3rem 0.5rem 0.3rem 0.2rem;
    background: rgba(0, 0, 0, 0.5);
    font-size: 1rem;
  }
}/* == sp end == */

@media (min-width: 769px) {
  /* == PC == */
  .fv-text {
    max-width:80%;
    margin: 0 auto;
    padding: 0 20px;
    top: 25%;
    left:6vw;
  }
  .fv-overlay {
    position: absolute;
    left:-2.2vw;
    width: 50vw;
    height: calc(100% + 50px);
    transform: skewX(-30deg);
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
  }
}/* == pc end == */
/* ==============================
訴求部分
============================== */
.pr-1 {
color:#fff;
text-align:center;
background:rgba(1,77,163,1);
margin-bottom:1rem;
}
.pr-1 h2.prttl{
color:#fff;
padding:0;
margin:0;
}
.pr-1 h2.prttl span{
color: #EBE547;
}
.pr-1 ul.pr-point {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 1rem;               /* カード間の余白 */
  margin: 0 auto;
  padding: 0;
  flex-wrap: nowrap;       /* 折り返さない */
}
.pr-1 ul.pr-point li {
  font-weight:bold;
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 1rem;
  background-image: url(/wp/wp-content/uploads/reef_star.png);
  background-repeat: no-repeat;
  background-position: center;
}
.pr-1 ul.pr-point li span.point-catch{
color: #EBE547;
font-weight:lighter;
}
.pr-1 p.cap{
margin-top: 1rem;
background:rgba(1,77,163,1);
}
.pr-1 p.cap::-webkit-scrollbar {
height: 3px;
}
.pr-1 p.cap::-webkit-scrollbar-thumb {
background: #000000;
}
.pr-1 p.cap::-webkit-scrollbar-track {
background:rgba(1,77,163,1);
}
@media (max-width: 768px) {
  /* == SP == */
  .pr-1 section{
    padding:0;
  }
  .pr-1 h2.prttl{
  font-size:1rem;
  }
  .pr-1 h2.prttl span{
  font-size:2rem;
  }
  .pr-1 ul.pr-point li{
    font-size:1rem;
    padding:0.5rem;
    line-height:1;
    background-size: 200%;
  }
  .pr-1 ul.pr-point span.point-catch{
    font-size:1.5rem;
    padding:0.5rem 0;
  }
}/* == sp end == */
@media (min-width: 769px) {
  /* == PC == */
  .pr-1 h2.prttl span{
  font-size:3rem;
  }
  .pr-1 ul.pr-point li{
    font-size:1.5rem;
    padding:1rem;
    margin:1rem;
    width: 200px;   /* 固定幅 */
    background-size: 180%;
  }
  .pr-1 ul.pr-point span.point-catch{
    font-size:3rem;
  }

}/* == PC end == */


/* ==============================
見出しパーツ
============================== */
h1.post-title{
  max-width: 1000px;
  border-bottom: 2px solid #000;
}
h2.frame span{
display: block;
width:-moz-fit-content;
width:fit-content;
height:-moz-fit-content;
height:fit-content;
padding:0.5rem ;
color:#003366;
}
h2 span.frame1{
border: solid 3px #EA3132;
color:#EA3132;
margin-right:0.5rem;
}
h3 {
  font-weight: bold;
  padding: 0.3em 0.5em;
  border-left: 10px double #003366;
}
h4 {
padding: 0.5em 1em;
background-color: #e1eef5;
box-shadow: 5px -5px #4c9ac0;
position: relative;
}
h5 {
  position: relative;
  display: inline-block;
  color: #fff;
  background: #4c9ac0;
  padding:0.5rem 0.5rem 0.5rem 1.5rem;
}
h5:after {
  position: absolute;
  top: calc(50% - 7px);
  left: 0.25rem;
  width: 1rem;
  height: 1rem;
  content: '';
  border-radius: 50%;
  background: #fff;
}
@media (max-width: 768px) {
  /* == SP == */
  h1.post-title{
    font-size: 2.5rem;
    margin: 10px;
  }
  h2.frame{
  text-align:center;
  }
  h2.frame span{
  margin:auto;
  }
  h2.frame span{
  font-size:1.5rem;
  }
  h2 span.frame1{
  font-size:0.8rem;
  }
  h3 {
    font-size:1.3rem;
  }
  h4 {
  font-size:1.2rem;
  }

}/* == sp end == */
@media (min-width: 769px) {
  /* == PC == */
  h1.post-title{
    font-size: 2.5rem;
    margin: 50px auto 25px auto;
  }
  h2.frame{
  display: flex;
  align-items: center;
  clear:both;
  }
  h2.frame span{
  font-size:2rem;
  }
  h2 span.frame1{
  font-size:0.8rem;
  }
  h3 {
    font-size:1.5rem;
  }
  h4 {
  font-size:1.2rem;
  }
}/* == PC end == */


/* ==============================
吹き出し
============================== */
.lead-box .ttl{
background-color:#fdE5E5;
margin-top:1rem;
color:#EA3132;
padding:0.5rem;
font-weight:bold;
text-align:center;
font-size:1.5rem;
}
.lead-box .balloon5 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
.balloon5 .faceicon {
float: left;
margin-right: -90px;
width: 80px;
}
.balloon5 .faceicon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}
.balloon5 .chatting {
width: 100%;
}
.lead-box .balloon5 ul{
padding:0;
margin:0;
}
.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}
.says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}
.says li {
position: relative;
list-style-type: none!important;
padding: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 5px;
line-height: 1.5;
vertical-align: middle;
color: #505050;
border-radius: 15px 0px 0px 15px;
}
.says li:before{
display:inline-block;
vertical-align: middle;
content:'';
width:1em;
height: 1em;
background: #77B255;
border-radius: 50%;
margin-right: 8px;
}

/* ==============================
フッター
============================== */
.site-footer{
border-top:5px solid rgba(0, 0, 0, 0.5);
}
.site-footer ul{
padding: 0;
margin: 0;
}
.footer-inner{
  max-width: 1000px;
  margin: auto;
}
.footer-menu li a{
  color: #000;
  text-decoration:none;
}
.copyright{
background:rgba(0, 0, 0, 0.5);
}
.copyright p{
margin: 0;
padding: 0.5rem;
}
.copyright p a{
color: #000;
}
@media (max-width: 768px) {
  /* == SP == */
  .footer-menu li a{
    display: block;
    padding: 0.5rem 0;
    border-bottom:2px solid rgba(0, 0, 0, 0.5);
    text-align:center;
  }
  .foot-logo{
    display: block;
    max-width: 90%;
    text-align:center;
    margin:1rem auto;
  }
  .foot-logo img{
    width: 100%;
  }

}/* == sp end == */
@media (min-width: 769px) {
  /* == PC == */
  .footer-inner{
    padding:2rem 0 0 0;
  }
  .footer-nav{
    display: block;
    max-width: 60%;
    float: right;
  }
  .footer-menu{
    display: flex;
    flex-wrap: wrap;
  }
  .footer-menu li{
    display: inline-block;
    padding:0.5rem 1rem;
  }
  .foot-logo{
    display: block;
    max-width: 40%;
    text-align:center;
    margin:-2rem 0 0 0;
  }
  .foot-logo img{
    width: 100%;
  }
  .foot-logo p{
    margin:0;
  }
  .copyright{
  display:flex;
  justify-content: center;
  align-items: center;
  }
}/* == PC end == */

/* ==============================
ハンバーガーメニュー
============================== */
/* --- ハンバーガーボタン（右上固定） --- */
.hamburger {
  position: fixed;
  right: 18px;
  width: 44px;
  height: 36px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  cursor: pointer;
  z-index: 2200; /* メニューより上 */
  background: rgba(0, 0, 0, 0.5);
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #FFF;
  border-radius: 3px;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transform-origin: center;
}

/* 開いているときのアニメーション */
.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- メニューオーバーレイ（スライドイン右） --- */
.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 360px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -6px 0 24px rgba(0,0,0,0.12);
  transform: translateX(110%);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  z-index: 2000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 78px 20px 28px; /* top はハンバーガー分を避ける */
}

/* 表示状態 */
.menu-overlay.active {
  transform: translateX(0);
}

/* --- 半透明バックドロップ（クリックで閉じる領域） --- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 1990;
}
.menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- 閉じるボタン（任意、ハンバーガーと別に表示させたい場合） --- */
#menu-close-btn {
  position: fixed;
  right: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #222;
  cursor: pointer;
  z-index: 2250;
}

/* --- メニュー内コンテンツ --- */
.global-category-menu {
  font-size: 16px;
  line-height: 1.5;
  color: #222;
}

/* リストの基本 */
.global-category-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 各行 */
.global-category-menu li {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  position: relative; /* toggle の絶対位置用 */
  word-break: break-word;
}

/* リンク（親・子とも） */
.global-category-menu a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding-right: 36px; /* toggle と被らない余白 */
}

/* 見開き時の強調（任意） */
.global-category-menu li.open > a {
  color: #0073aa;
}

/* --- 子リスト（初期は非表示） --- */
.global-category-menu .children,
.global-category-menu .posts {
  display: none;
  padding-left: 14px;
  margin-top: 8px;
}

/* open クラスが付いた li の直下 .children/.posts を表示 */
.global-category-menu li.open > .children,
.global-category-menu li.open > .posts {
  display: block;
}

/* 子リスト内の li のスタイル（小さめ） */
.global-category-menu .children li,
.global-category-menu .posts li {
  padding: 8px 0;
  border-bottom: none;
}

/* --- トグルボタン（＋／－） --- */
.toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  user-select: none;
  color: #666;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 表示記号 */
.toggle-btn::before {
  content: "＋";
  display: inline-block;
  transform-origin: center;
}
li.open > .toggle-btn::before {
  content: "－";
}

/* --- アクセシビリティのためのフォーカススタイル --- */
.hamburger:focus,
#menu-close-btn:focus,
.toggle-btn:focus,
.global-category-menu a:focus {
  outline: 2px solid rgba(0,115,170,0.2);
  outline-offset: 2px;
}

/* --- スマホ/PC微調整（任意） --- */
/* 画面幅が広ければ menu width を少し広く */
@media (min-width: 1200px) {
  .menu-overlay { max-width: 420px; width: 36%; }
}

/* スクロールロック時の body 固定（JSで body に class を付ける場合に使用） */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* --- トグルボタン（＋／－）を親リンク右側に固定 --- */
.global-category-menu .toggle-btn {
  position: absolute;
  right: 8px;
  top: 10px; /* ← 固定位置に変更 */
  transform: none; /* ← 中央寄せ解除 */
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  user-select: none;
}

/* ＋／－記号 */
.toggle-btn::before {
  content: "＋";
  color: #666;
}

li.open > .toggle-btn::before {
  content: "－";
}

/* 親リンクに余白をとって重ならないように */
.global-category-menu a {
  padding-right: 28px; /* ← ボタンと文字が重ならないよう調整 */
  display: block;
  position: relative;
}
@media (max-width: 768px) {
  /* == SP == */
  .hamburger {
    top: 8px;
  }
}/* == sp end == */
@media (min-width: 769px) {
  /* == PC == */
  .hamburger {
    top: 18px;
  }
  #menu-close-btn {
  top: 14px;
  }
}/* == PC end == */
/* ==============================
関連ページ
============================== */
.related-pages{
  display:block;
  max-width:1000px;
  margin:auto;
  padding:1rem;
}
ul.related-by-tag{
  display: flexbox;
  padding:0;
  margin:0;
}
ul.related-by-tag li{
  list-style: none;
  display: inline-block;
  margin: 0.6rem 0.3rem;
}
ul.related-by-tag li a{
  padding: 0.3rem;
  background:#64A5D2;
  border-radius:10px;
  color:#fff;
  text-decoration: none;
}

/* ==============================
開閉ボックス
============================== */
/* ===== 開閉ボックスの基本デザイン ===== */
#tocBox {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1.5em 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* タイトル部分（クリックボタン） */
#tocBox .sttl.tglMenu {
  background: #f7f7f7;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
}
#tocBox .sttl.tglMenu:hover {
  background: #efefef;
}
/* 開閉マーク */
#tocBox .sttl.tglMenu::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: transform 0.3s, content 0.3s;
}
#tocBox.open .sttl.tglMenu::after {
  content: "－";
}
/* 本文部分 */
#tocBox #toc {
  display: none;
  padding: 16px;
  border-top: 1px solid #ddd;
  line-height: 1.7;
}
/* 開いてるときに表示 */
#tocBox.open #toc {
  display: block;
}

/* ==============================
文書テンプレート
============================== */
.format{
  border: solid 3px #000;
  padding: 1rem;
}
.format .format-ttl{
text-align: center;
font-size: 2rem;
}
.format .format-subttl{
text-align: center;
font-size: 1.5rem;
}
.format .format-subname,
.format .format-name{
text-align :right;
}