@charset "utf-8";

/*-----------------------------------
全体
-----------------------------------*/
:root{
  --gap-ss: clamp(5px, 0.199rem + 0.57vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-ms: clamp(15px, 0.597rem + 1.7vw, 30px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(40px, 1.591rem + 4.55vw, 80px);

  --font-ss: clamp(10px, 0.534rem + 0.45vw, 14px);
  --font-s: clamp(12px, 0.659rem + 0.45vw, 16px);
  --font-m: clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-ml: clamp(14px, 0.739rem + 0.68vw, 20px);
  --font-l: clamp(16px, 0.818rem + 0.91vw, 24px);

  --color-black:#222;
  --color-lgray:#f6f6f6;
  --color-lblue:#e2f5fb;
  --color-blue:#004da1;
  --color-dblue:#001e60;
}

.seo-page{
  width:100%;
  text-align:center;
  line-height:1.2;
  padding-top:var(--gap-m);
  padding-bottom:var(--gap-l);
}

.seo-page img{
  width:100%;
  object-fit: contain;
}

.seo-page strong{
  font-weight:700;
  color:var(--color-dblue);
}

.seo-page .c-button{
  width:100%;
}

.seo-page .u-pc-width{
  margin:auto;
  width:92vw;
  max-width:1140px;
  text-align:left;
  padding:0;
}

/*-----------------------------------
ページTOPへ
-----------------------------------*/
#pagetop {
  opacity: 1;
  position: fixed;
  bottom: 30px;
  right: 55px;
  transition: opacity .5s;
  z-index: 2;
}

#pagetop a {
  background-color: rgba(51, 51, 51, .8);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #pagetop {
    bottom: 10px;
    right: 10px;
  }
}

/*-----------------------------------
レイアウト
wrap-seo-page
-----------------------------------*/
.wrap-seo-page{
  display:flex;
  gap:var(--gap-m);
  width:100%;
}

.seo-page-main{
  flex:1;
}

.seo_page_menu{
  max-width: 310px;
  width:30%;
}

@media screen and (max-width: 767px) {
  .wrap-seo-page{
    display:block;
  }
  .seo-page-main{
    width:100%;
  }
  .seo_page_menu{
    display:none;
  }
} 

/*-----------------------------------
サイドメニュー
seo_page_menu
-----------------------------------*/

/*-----------
サイドメニューバナー
-----------*/
.block-side-banner{
  width:100%;
  margin-bottom:var(--gap-m);
}

/*-----------
サイドメニューもくじ
-----------*/
.block-side-menu {
  position: sticky;
  top: 0;
  height: 98vh;
}

.block-side-menu .menu-list{
  overflow-y: auto;
  height: 95%;
}

/*-----------------------------------
メインエリア
seo-page-main
-----------------------------------*/

/*-----------------------------------
KV・H1
-----------------------------------*/
.sec-kv{
  width:100%;
  margin-bottom:var(--gap-m);
}

.seo-page h1{
  font-size:clamp(18px, 0.989rem + 0.68vw, 24px);
  font-weight:700;
}

.sec-kv img{
  margin-top:var(--gap-s);
}

/*-----------------------------------
更新日、SNSボタン、もくじ
-----------------------------------*/
.sec-page-data{
  width:100%;
  margin-bottom:var(--gap-m);
}

/*-----------
更新日、SNSボタン
-----------*/
.block-date{
  width:100%;
  margin-bottom:var(--gap-m);
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.cts-article-block{
  white-space:nowrap;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
}
.cts-article-block time{
  padding-right:1em;
}

@media screen and (max-width: 767px) {
  .block-date{
    flex-direction: column;
    gap:var(--gap-ss);
  }
  .block-sns,
  .cts-article-block{
    width:100%;
    text-align:left;
  }
}
/*-----------
メインもくじ
-----------*/
.block-main-menu{
  width:100%;
}

.menu-list details{
  padding-bottom: calc(50px + 1rem);
  position: relative;
}

.menu-list details summary {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  cursor: pointer;
}

.menu-list details summary::after{
  transform: rotate(45deg);
}

.menu-list details[open] summary::after{
  transform: rotate(-135deg);
}

/*-----------
もくじ共通
-----------*/
.menu-list{
  width:100%;
  border:1px solid var(--color-black);
  padding:var(--gap-s);
}
.menu-list .ttl-index{
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
  font-weight:700;
  margin-bottom:var(--gap-ss);
}
.menu-list li{
  font-size:clamp(12px, 0.705rem + 0.23vw, 14px);
  margin-top:0.7em;
}
.menu-list li::before{
  content: "└";
}
.menu-list li a{
  padding-left:0.2em;
  color: #004da1;
}
.menu-list li a:hover{
  opacity:0.8;
}
.menu-list li.toc-level-h1 {
  margin-left: 0.1em;
  text-indent: -0.3em;
}
.menu-list li.toc-level-h2 {
  margin-left: 0.9em;
  text-indent: -1.2em;
}
.menu-list li.toc-level-h3 {
  margin-left: 1.6em;
  text-indent: -1.2em;
}
.menu-list li.toc-level-h4 {
  margin-left: 2.3em;
  text-indent: -1.2em;
}
.menu-list li.toc-level-h5 {
  margin-left: 4em;
  text-indent: -1em;
}
.menu-list li.toc-level-h6 {
  margin-left: 5em;
  text-indent: -1em;
}

/*-----------------------------------
本文
block-contents
-----------------------------------*/
.block-contents{
  position:relative;
  width:100%;
}

.sec-contents{
  width:100%;
  padding-top:var(--gap-m);
}
.sec-contents + .sec-contents{
  margin-top:var(--gap-m);
  padding-top:var(--gap-m);
  border-top:1px dashed #eee;
}

.sec-contents section{
  margin-top:var(--gap-m);
}

.seo-page .sec-contents p{
  line-height:1.6;
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
}
.sec-contents p + p{
  margin-top:var(--gap-ss);
}

.hd-ttl{
  position:relative;
  font-size:clamp(18px, 0.898rem + 1.14vw, 28px);
  margin-bottom:var(--gap-ss);
  font-weight:700;
}

.hd-ttl::before {
  position: absolute;
  content: '';
  border: 0.01em solid #115aa8;
  width: 0.9em;
  height: 0.9em;
  left: -1.35em;
  top: -0.20em;
}
.hd-ttl::after {
  position: absolute;
  content: '';
  width: 0.8em;
  height: 0.8em;
  top: 0.1em;
  left: -1.1em;
  background-color: #00a2e6;
}

@media screen and (max-width: 1028px) {
  .hd-ttl{
    padding-left:1.5em;
  }
  .hd-ttl::before {
    left: 0;
  }
  .hd-ttl::after {
    left: 0.25em;
  }
}


.seo-page .sec-contents p.lead-txt{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}
.hd-sub-ttl{
  font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
  margin-bottom:var(--gap-ss);
  color:var(--color-black);
  font-weight:700;
}

/*-----------
リスト
-----------*/
.point-list{
  margin:var(--gap-s) 1.5em;
}
.point-list li{
  list-style: disc;
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
  margin-top:0.5em;
  line-height:1.4;
}
.point-list li + li{
  margin-top:0.5em;
}
.point-list.--num li{
  list-style: decimal;
}
.point-list.--num li::marker{
  color:var(--color-dblue);
  font-weight:700;
}

/*-----------
色付きザブトンエリア
-----------*/
.point-block{
  background:var(--color-lblue);
  margin:var(--gap-s) auto;
  border-radius: 20px;
  padding:var(--gap-s);
}
.point-ttl{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  font-weight:700;
  margin-bottom:var(--gap-ss);
  text-align:center;
  color:var(--color-dblue);
}
.point-block-list{
  width:100%;
  display:flex;
  gap:var(--gap-ss);
}
.point-block-list > li{
  flex:1;
  background:#fff;
  border-radius: 10px;
  padding:var(--gap-s);
  text-align:center;
}
.point-sub-ttl{
  font-weight:700;
  margin-bottom:var(--gap-ss);
}
.point-block-wrap{
  display:flex;
  gap:var(--gap-ss);
  flex-direction: column;
}
.point-block__img{
  width:60%;
  margin:auto;
}
.point-block__txt{
  width:100%;
  text-align:left;
  line-height:1.6;
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
}
@media screen and (max-width: 767px) {
  .point-block-list{
    flex-direction: column;
  }
  .point-block-wrap{
    flex-direction:row;
  }
  .point-block__img{
    width:30%;
  }
  .point-block__txt{
    flex:1;
  }
}

/*-----------
TABLE
-----------*/
.point-table{
  width:100%;
  margin:var(--gap-s) auto;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
}
.point-table th,
.point-table td{
  padding:10px;
  border:1px solid #ccc;
  vertical-align:middle;
}

.point-table thead th{
  text-align:center;
  background:#eee;
  font-weight:700;
}
.point-table thead td{
  text-align:center;
  background:#eee;
  font-weight:700;
}

.point-table tbody th{
  text-align:center;
  background:#f6f6f6;
  color:var(--color-dblue);
  font-weight:700;
}
.point-table tbody td{
  text-align:left;
  background:#fff;
}

/*-----------
もっと見るリンク
more-link
-----------*/
.more-link{
  width:100%;
  max-width:600px;
  margin:var(--gap-s) auto 0;
}

/*-----------------------------------
ページ下部リンク
wrap-bottom-link
-----------------------------------*/
.wrap-bottom-link{
  width:100%;
  margin-top:var(--gap-l);
}
.bottom-link-list{
  display:flex;
  gap:var(--gap-m);
}
.bottom-link-list li{
  flex:1;
}

@media screen and (max-width: 767px) {
  .bottom-link-list{
    flex-direction: column;
    gap:var(--gap-s);
  }
}

/*-----------------------------------
キャンペーンバナーカルーセル
wrap-campaign-banner
-----------------------------------*/
.wrap-campaign-banner{
  width:100%;
  margin-top:var(--gap-l);
}

/*-----------------------------------
横長バナー
wrap-long-banner
-----------------------------------*/
.wrap-long-banner{
  width:100%;
  margin-top:var(--gap-m);
}
.long-banner-list{
  width:100%;
  flex-direction: column;
  display:flex;
  gap:var(--gap-s);
}
.long-banner-list li{
  width:100%;
}

/*-----------------------------------
監修
wrap-author
-----------------------------------*/
.wrap-author{
  width:100%;
  margin-top:var(--gap-l);
}

.cts-article-author-logo-container img {
  width: 100%;
}

.cts-article-author-description{
  line-height:1.6;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
}

@media screen and (max-width: 767px) {
  #cts-article-author {
    padding: 0 10px;
  }
}