@charset 'utf-8';


/* カラーコード（コピペ用） */
.color_code_samples {
  color: #103385;
  color: #FFDF3A;
  color: #8B76B2;
}


/*SP/PC表示切り替え
---------------------------------------*/
.is_sp { display: block !important; }
.is_pc { display: none  !important; }
@media screen and (min-width: 768px) {
.is_sp { display: none  !important; }
.is_pc { display: block !important; }
}



/* ###################################################################### */
/* コンテナ設定 */
/* ###################################################################### */




.article_wrap {
  text-align: left;
  font-size: 1.6rem;
  margin: 0 auto;
  padding: 30px 20px;
}
.article_container {
}
/* メインとサイド */
article.article_main {
  padding-bottom: 0px;
  margin-bottom: 50px;
  border-bottom: 1px solid #ddd;
}
/* ------------- PC ------------- */
@media screen and (min-width: 769px) {


.article_container {
  width: 1100px;
  margin: 60px auto;
  display: flex;
  justify-content: space-between;
}
/* メインとサイド */
article.article_main {
  width: 700px;
  padding-bottom: 50px;
}
aside.article_side {
  width: 300px;
}
}/*PC*/





/* ###################################################################### */
/* 一覧ページ用スタイル */
/* ###################################################################### */



/* 見出し */
.article_index {
  color: #fff;
  border-radius: 6px;
  padding: 20px 15px 20px 40px;
  background: url(../img/article/article_ico_search.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
  margin-bottom: 40px;
}
/* リスト */
.article_list li {
  margin-bottom: 40px;
}
.article_list li img{
  height: 240px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  object-fit: cover;
  margin-bottom: 20px;
}
.article_list li a{
  color: #000;
  text-decoration: none;
}
.article_list li a:hover{
  color: #103385;
  text-decoration: underline;
}
.article_list .cat{
  font-size: 14px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.article_list .ttl {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
/* PC
====================================== */
@media screen and (min-width: 768px) {
.article_list  li{
  display: flex;
  gap: 40px;
}
.article_list li .title{
  text-align: left;
  padding-right: 20px;
}
.article_list li img{
  height: 140px;
  width:240px; 
  min-width:240px; 
  overflow: hidden;
  margin-bottom: 0;
}
.article_list .ttl {
}
}/*PC*/


/*ページャー
----------------------------------*/
.pager {
  text-align: center;
  font-size: 16px;
  padding:  40px 0 ;
  border-top: 1px solid #ddd;
}
.pager .page-txt {
  display: none; /* Page 2 of 2 を非表示 */
}
.pager .btn-area a,
.pager .btn-area span {
  display: inline-block;
  min-width: 36px;
  padding: 8px 12px;
  margin: 0 4px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}
.pager .btn-area a:hover {
  background-color: #f0f0f0;
  color: #103385;
}
.pager .btn-area .current {
  background-color: #103385;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}





/* ###################################################################### */
/* 既存CCの転用箇所 */
/* ###################################################################### */





/* 既存パーツ転用（目次） */
.table_contents{background:#fff; border:1px solid #151519; margin-top: 40px; border-radius: 20px; padding: 20px}
.table_contents p{border-bottom:1px dotted #151519; padding: 0 0 10px 0}
.table_contents ul{margin-left: -20px;}
.table_contents li{margin-top: 10px; margin-left: -20px;}
.table_contents li:before{content: "▼ "; font-size: 70%; color: #FFDF3A;}
.table_contents li ul{margin-top: 3px; margin-left: 40px;  margin-bottom: 15px;}
.table_contents li ul li{margin-top: 3px;}
.table_contents li ul li:before{content: "● ";}
/* 既存パーツ転用（著者） */
.article_wrap .writer {
    border: 5px solid #8B76B2;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 30px;
}
.article_wrap .writer h2{
    margin: 0;
    font-size: 1.5rem;
    background: #8B76B2;
    color: #fff;
    text-align: center;
    padding: 5px 0 10px;
}
.article_wrap .writer h2:before{
    content: none;
}
.article_wrap .writer h3{
    border: none;
    font-size: 1.8rem;
    padding: 15px 0 0px;
    margin: 0 0 15px 0;
}
.article_wrap .writer p{
    padding: 5px 0 0px;
    margin: 0 0 0 0;
    line-height: 1.6;
}
.article_wrap .writer dl{
    display: flex;
    justify-content:flex-start;
    width: 100%;
    padding: 5px 20px 5px;
    margin: 0;
}
.article_wrap .writer dl dt{
    width: 18%;
    padding: 10px 20px 10px 10px;
    text-align: center;
}
.article_wrap .writer dl dt img{
    width: 100%;
}
.article_wrap .writer dl dd{
    width: 80%;
    padding-right: 20px;
}
/*関連サービスバナー*/
.campaignCon{width:90%; margin: 0 auto 30px;}

/* ------------- PC（!!!!ここはmax-width!!!!） ------------- */
@media screen and (max-width: 768px) {
  .article_wrap .writer h3{
      font-size: 1.8rem;
      padding: 10px 0 0px;
      border: none;
  }
  .article_wrap .writer p{
      line-height: 1.5;
      padding: 0 0 10px;
  }
  .article_wrap .writer dl{
      display: block;
      width: 100%;
      padding: 5px 20px;
  }
  .article_wrap .writer dl dt{
      width: 50%;
      margin: 0 auto;
      padding: 10px 0 10px;
      text-align: center;
  }
  .article_wrap .writer dl dt img{
      width: 100%;
  }
  .article_wrap .writer dl dd{
      width: 100%;
  }
}/*PC*/





/* ###################################################################### */
/* サイドメニュー */
/* ###################################################################### */






.side_title {
  color: #fff;
  border-radius: 6px;
  padding: 0 20px 0 45px;
  line-height: 70px;
  font-weight: bold;
  margin-bottom: 30px;
}
.is_cat {
  background: url(../img/article/article_ico_cat.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
}
.is_new {
  background: url(../img/article/article_ico_new.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
}
.is_rec {
  background: url(../img/article/article_ico_rec.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
}
.is_pop {
  background: url(../img/article/article_ico_pop.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
}

/*カテゴリー*/
.side_category_list {
  margin-bottom: 40px;
}
.side_category_list li{
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
}
.side_category_list li::before{
  content: "-";
  color: #666;
  position: absolute;
  top: 0;
  left: 0;
}
.side_category_list li a{
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
}
/*記事件数*/
.side_category_list li i{
  font-style: normal;
}
/*子要素*/
.side_category_list .children li::before{
  content: "└";
}

/*記事リスト*/
.side_ac_list  {
  margin-bottom: 50px;
}
.side_ac_list li {
  position: relative;
  display: flex;
  gap: 0 20px;
  align-items: center;
  line-height: 1.4;
  margin-bottom: 20px;
}
.side_ac_list li img{
  display: block;
  background: #ddd;
  min-width: 70px;
  max-width: 70px;
  height: 70px;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
}
.side_ac_list li a:hover img{
  opacity:0.5;
  transition: opacity 0.7s ease;
}
.side_ac_list li .ttl{
  display: block;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.side_ac_list li .cat{
  display: block;
  text-decoration: none;
  font-size: 1.1rem;
  font-style: normal;
}











/* ###################################################################### */
/* 詳細ページ */
/* ###################################################################### */




/* タイトルと更新日 */

h1.article_title {
  font-size: 2.5rem;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 20px;
}
.article_dates {
  color: #999;
  font-size: 1.4rem;
  margin-bottom: 40px;
}
/* ------------- PC ------------- */
@media screen and (min-width: 769px) {
  h1.article_title {
    font-size: 3.5rem;
  }
}/*PC*/


/*記事本文コンテナ*/
.article_content {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid #ddd;
}

/*一覧に戻るボタン*/
.article_back_index_btn {
  text-align: center;
}



/* ###################################################################### */
/* コラム本文用スタイルセット */
/* ###################################################################### */





.styles {
   font-size: 1.6rem;
}
.styles p ,
.styles ul,
.styles ol,
.styles dl{
  margin-bottom: 2em;
}
.styles h2 {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 20px;
  background: #103385;
  border-radius: 4px;
  margin: 2.5em 0 2.5em;
}
.styles h3 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  border-left: solid 5px #FFDF3A;
  border-bottom: solid 2px #FFDF3A;
  padding: 10px 0 10px 15px;
  margin: 2em 0 2em;
}
.styles h4{
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 15px;
  background: #eee;
  margin: 2em 0 2em;
}
.styles h5,
.styles h6 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1em;
}
.styles p {}
.styles em {}
.styles strong {}
.styles ul,
.styles ol {margin-left: 2em;}
.styles ul {list-style: disc outside;}
.styles ol {list-style: decimal outside;}
.styles li {margin-bottom: .5em;}
.styles dl {}
.styles dt {
  font-weight: bold;
  margin-bottom: 1.5em;
}
.styles dd {
  margin-left: 1em;
  margin-bottom: 1.5em;
}
.styles table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5em;
}
.styles th,
.styles td {
  padding: 20px;
  vertical-align: middle;
  border: .99px solid #ddd;
}
.styles th {
  background: #f5f5f5;
}
.styles td {
  background: #fff;
}
.styles caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 1em;
}

/*引用タグ*/
.styles blockquote {
  padding: 30px ;
  background: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 2.5em;
}
/*汎用ボックス*/
.styles .box {
  padding: 30px ;
  background: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 2.5em;
}

/*区切り線*/
.styles hr{
  clear:both;
  padding:0;
  display:block;
  height:1px;
  border:0;   
  border-top:.99px solid #ccc;
  margin: 2em 0;
}
/*画像位置調整（Wordpress経由でつけられる位置調整用クラス）*/
.alignleft   ,
.aligncenter ,
.alignright {
  display: block;
}
.alignleft   { margin-right: auto; }
.aligncenter { margin: 0 auto; }
.alignright  { margin-left: auto; }

/*記事がないとき*/
.noresult {
  color: #999;
  margin-bottom: 80px;
}

/*アンダーライン加工（エディタで文字の背景色を変えたとき）*/
.styles em {
  font-weight: normal;
}
.styles strong {
  font-weight: bold;
}

/*ボックス3種類*/
.styles .box_gray ,
.styles .box_border ,
.styles .box_lightblue {
  padding: 20px;
  border-radius: 6px;
}
.styles .box_gray {
  background: #f5f4f3;
}
.styles .box_border {
  background: #fff;
  border: 1px solid #ddd;
}
.styles .box_lightblue { 
  background: #eef7f8;
}
@media screen and (min-width: 900px) {
.styles .box_gray ,
.styles .box_border ,
.styles .box_lightblue {
  padding: 30px;
}
}


/* 既存マーカースタイル */
.markerPink,
.markerAqua {
  background-repeat: no-repeat;
  background-size: 100% 1em; /* 線の太さを調整：1emに拡大 */
  background-position: 0 85%; /* 線の位置をやや下に調整 */
  padding: 0 2px;
}

/* ピンクマーカー */
.markerPink {
  background-image: linear-gradient(transparent 40%, #ffc1dc 40%);
}

/* アクア（水色）マーカー */
.markerAqua {
  background-image: linear-gradient(transparent 40%, #a7ecf3 40%);
}





/* ###################################################################### */
/* 本文下の関連記事（同一カテゴリー取得） */
/* ###################################################################### */


/*SP用パーツ*/
.related_articles_sp {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #ddd;
}
/*PC用パーツ*/
.related_articles_pc {
  max-width: 1100px;
  margin: -80px auto 80px;
  text-align: left;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.related_articles_title {
  color: #fff;
  font-size: 1.8rem;
  border-radius: 6px;
  padding: 0 20px 0 45px;
  line-height: 70px;
  font-weight: bold;
  margin-bottom: 40px;
  background: url(../img/article/article_ico_cat.svg) 20px 50% no-repeat #103385;
  background-size: 16px;
}
.related_articles_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 60px;
}
.related_articles_list li{
  font-size: 1.6rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.related_articles_list li .img{
  display: block;
  min-width: 180px;
  max-width: 180px;
  height: 100px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.related_articles_list li img{
  display: block;
  object-fit: cover;
}
.related_articles_list li span{
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}