@charset "utf-8";
/* =========================================
   生産管理 記事カラー定義
   （アイキャッチ画像配色ベース）
========================================= */
body{
font-family:"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
/* line-height:1.9; */
/* color:#333; */
margin:0;
background:#f5f5f5;
}
.container{
  max-width:860px;
  margin:40px auto;
  background:#fff;
  padding:20px 24px 40px;
}
.midashi1{
display:block;
margin:40px 0 16px;
padding:6px 12px;
color:#fff;
}
.lead{margin-bottom:1em;}
.bg_rg,.bg_g,.bg_black{
margin:24px 0;
padding:16px;
font-size: 1rem;
}
.bg_rg{background:#f0f0f0;}
.bg_g{background:#e0e0e0;}
.bg_black{background:#000;color:#fff;text-align:center;}
ol{padding-left:1.2em;}
ol li{margin-bottom:6px;}
a{color:#c00;text-decoration:none;}
a:hover{text-decoration:underline;}
dl.sys{
background:#fffbfa;
border:1px solid #eec8c8;
border-radius:8px;
padding:12px;
margin:16px 0;
}
dl.sys dt{font-weight:bold;color:#c00;margin-bottom:6px;}
.i-catch img {max-width:100%;height:auto;display:block;margin:16px auto;}

/* --- カラートークン定義 --- */
:root {
  /* メインカラー */
  --pc-blue-main: #2E3192;     /* 濃紺：タイトル・見出し */
  --pc-blue-accent: #2F80ED;  /* ブルー：リンク・強調 */
  --pc-cyan-main: #2E3690;    /* シアン：区切り・補助 */
  --pc-cyan-light: #A8DADC;   /* 薄シアン：背景 */

  /* 背景 */
  --pc-bg-white: #FFFFFF;
  --pc-bg-light: #F4F8FB;
  --pc-bg-section: #EAF4F8;

  /* テキスト */
  --pc-text-main: #333333;
  --pc-text-sub: #555555;
  --pc-text-invert: #FFFFFF;
}

/* =========================================
   見出し系
========================================= */

/* ページタイトル */
h3 {
  background-color: var(--pc-cyan-main);
  color: var(--pc-text-sub);
  background: none !important;
}

/* セクション見出し */
.midashi {
  background-color: var(--pc-blue-main);
  color: var(--pc-text-main);
}

/* =========================================
   本文・リード文
========================================= */

#advice_container p {
  color: var(--pc-text-main);
    font-size: 17px;
  font-size: 1rem;
}

.lead {
  font-size: 1.05em;
  line-height: 1.9;
  color: var(--pc-text-main);
}

/* =========================================
   目次・整理ブロック
========================================= */
#advice_container .midashi1 {
    display: inline-block;
    max-width: 800px;
    width: 96%;
    height: 25px;
    background-image: none;
    background-color: #ffffff;
    background-position: left;
    background-repeat: no-repeat;
    /* padding-left: 30px; */
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--pc-cyan-main);
    line-height: 2.3 !important;
    border-bottom: 1px solid #2E3192;
}
.bg_rg {
  background-color: var(--pc-bg-section);
  color: #4e4949;
  /* border-left: 6px solid var(--pc-cyan-main); */
}
.bg_rg ol li {
  border-bottom: 1px solid #e0e0e0;
  color: #525252;
}
.bg_rg ol li a {
  color: #2E3690;
}
/* 関連記事・補足説明 */
.bg_g {
  background-color: var(--pc-bg-light);
}

/* まとめ・結論ブロック */
.bg_black {
  background-color: var(--pc-text-sub);
  color: var(--pc-text-invert);
}
/* =========================================
   手順・現実解（dl.sys）
========================================= */

dl.sys {
  background-color: #FFFBFA;
  border: 1px solid var(--pc-blue-main);
  font-size: 1rem;
}

dl.sys dt {
  color: var(--pc-cyan-main);
  border-bottom: 1px solid var(--pc-cyan-main);
  font-size: 1rem;
}

dl.sys dd {
  color: var(--pc-text-main);
  font-size: 1rem;
}

/* =========================================
   リンク
========================================= */

a {
  color: var(--pc-blue-accent);
}

a:hover {
  color: var(--pc-blue-main);
}

.gradient12 {
    /*ボタンの形状*/
    display: inline-block;
    color: #fff !important;
    padding: 18px 60px;
    border-radius:30px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background: linear-gradient(to right, #26b579 0%, #3db28d 80%, #41cc8d 100%);
    /* box-shadow: 0 15px 15px rgba(82,160,253,0.4); */
    /*アニメーションの指定*/ 
    transition: all 0.3s ease-out;
}

/*hoverした際のスケールで全体を縮小*/
.gradient12:hover{
    transform: scale(0.95);
}

@media screen and (max-width:768px) {
  #advice_container .midashi1 {
    font-size: 0.9rem;
  }
  #advice_container p {
    font-size: 0.8rem;
  }
  .bg_rg, .bg_g, .bg_black {
    font-size: 0.8rem;
  }
  dl.sys {
    font-size: 0.8rem;
  }

  dl.sys dt {
    font-size: 0.8rem;
  }

  dl.sys dd {
    font-size: 0.8rem;
  }
}