/* ↓全体の文字カラー↓ */body {
color: #535353;
}
a:link { color: #535353; }
a:visited { color: #535353; }
a {text-decoration: none;}


/* ↓プロポーショナルメトリクス↓ */
.jikanpm {
  font-feature-settings: "palt";
}

/* ↓字間、かなツメ↓ */
.jikankana {
  font-feature-settings: "pkna";
}

/*レスポンシブ改行*/
span {
   display: inline-block;
}



/* ↓パソコンのみ改行↓ */
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
/* ↓スマホのみ改行↓ */
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* ↓左右幅350px以下のみ改行↓ */
@media screen and (max-width: 350px){	
  .br-sps { display:block; }
}
@media screen and (min-width: 350px){	
  .br-sps { display:none; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc-s { display: block !important; }
.sp-s { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 576px) {
.pc-s { display: none !important; }
.sp-s { display: block !important; }
}


/*本文リンク*/
/* 下線が左から流れるアニメーション */
.link-t {
  font-weight: 600;
  padding-bottom: 3px; /* テキストと下線の間隔 */
  background-image: linear-gradient(#0061c1, #0061c1);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 2px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.2s;
}

.link-t:hover {
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 2px; /* 下線の横幅を100%にする */
}




/* ヘッダのボタン_スクロールで非表示 */
header{
  z-index: 99;
  transition: transform 0.2s 0.2s;
}
header.hidden {
    transform: translateY(-80px);
}
main{
  padding-top: 80px;
}

/* ヘッダのボタン */
.btn-menu {
  background-color:#ffffff;
  padding:12px 8px 10px 10px;
}
.btn-menu:hover {
  background-color:#192b65;
  color: #ffffff;
  transition: .3s;
}
/* モバイル版の調整 */
@media (max-width: 767px) {
.btn-menu {
  font-size:13px;
  padding:8px 12px 6px 8px;
  }
}

.jhpcnrogo {
   width:35px;
   padding-bottom: 0px;
  }
/* モバイル版の調整 */
@media (max-width: 767px) {
.jhpcnrogo {
  padding-top:2px;
  width:30px;
  }
}

/* タイトルまわり */

.main_title { 
    font-size:48px;
    line-height:110%;
    padding-top:15px
    }
.sub_title { 
    font-size:36px;
    line-height:120%;
    padding-bottom:25px
    }
.lead_text { 
    font-size:20px;
    color:#535353;
    padding-left:2em;
    margin-top:75px;
    margin-bottom:60px;
    border-left: solid 3px #A3A394;
    }
.lead_text_a { 
    font-size:20px;
    line-height:170%;
    color:#192B65;
    padding-left:2em;
    margin-top:75px;
    margin-bottom:60px;
    border-left: solid 3px #192B65;
    }
.lead_text_b { 
    font-size:20px;
    color:#0061c1;
    padding-left:2em;
    margin-top:60px;
    margin-bottom:60px;
    border-left: solid 3px #0061c1;
    }
/* モバイル版の調整 */
@media (max-width: 767px) {
.main_title { 
    font-size:24px;
    line-height:130%;
    padding-top:10px;
    }
.sub_title { 
    font-size:20px;
    line-height:120%;
    padding-bottom:15px
    }
.lead_text { 
    padding-left:0.5em;
    margin-top:30px;
    margin-bottom: 30px;
    }
.lead_text_b { 
    font-size:16px;
    padding-left:1em;
    margin-top:20px;
    margin-bottom: 40px;
    }
}

/* 見出し */
.midashi { 
    font-size:32px;
    font-weight:200;
    line-height:140%;
    text-align:center;
    color:#0061c1;
    margin-top:45px;
    margin-bottom:45px;
    }
/* モバイル版の調整 */
@media (max-width: 767px) {
.midashi { 
    font-size:18px;
    font-weight:600;
    margin-top:35px;
    margin-bottom:35px;
    }
}

.midashi-line {
    border:solid 1px #0061c1;
    width:90px;
}
.midashi-line2 {
    border:solid 3px #b2d0ec;
    width:90px;
}
@media (max-width: 767px) {
.midashi-line2 {
    border:solid 2px #b2d0ec;
    }
}

.midashi-line3 {padding:10px; position:relative;}
.midashi-line3::before {content: ''; width: 118px; height:118px;position:absolute;}
.midashi-line3::before {
	border-left:solid 3px #b2d0ec;
	border-top: solid 3px #b2d0ec;
	top: solid 3px #b2d0ec;
	left: solid 3px #b2d0ec;
}


/* 本文 */
.honmon {
    font-size:17px;
    line-height:200%;
    }
@media (max-width: 767px) {
.honmon {
    font-size:17px;
    line-height:180%;
    }
}


.honmon_zu {
    color:#ffffff;
    font-weight:600;
    background-color:#0061c1;
    line-height:140%;
    margin:0px 3px;
    border-radius:5px;
    padding:0px 10px 0px 10px;
}

.zu_title {
    color:#ffffff;
    font-weight:600;
    background-color:#0061c1;
    line-height:140%;
    text-indent: -2.5em;
    margin:0px 3px 10px 3px;
    border-radius:5px;
    padding:0.25em 1em 0.25em 3.25em;
}

/* 図 */
.zu_kakomi {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #FFF;
    border: solid 2px #8cb8e3;/*線*/
    border-radius: 12px;/*角の丸み*/
}
.zu_kakomi p {
    margin: 0; 
    padding: 0;
}

.zu_caption {
    font-weight:200;
    color:#192B65;
    padding-left:3px;
    margin-bottom:5px
}


/* インタビューの言葉 */
.interview {
    background-color:#ffffff;
    font-weight:200;
    max-height:15em; 
}
.inte_com {
    font-size:20px;
    transform: skewX(-15deg);
}
.inte_name {
    font-size:20px;
    transform: skewX(-15deg);
}
.inte_shi {
    transform: skewX(-15deg);
    font-size:15px;
}
@media (max-width: 1010px) {
.inte_com {
    font-size:17px;
}
.inte_name {
    font-size:14px;
}
.inte_shi {
    font-size:10px;
}
}


/* ポップアップ */
.popup {
  margin-top:-8px; /* 要素の下に表示 */
  font-size:15px;
  display: none;
  position: absolute;
  line-height: 140%;
  background-color: #ffffff;
  border: 2px solid #A3A394;
  padding: 13px 15px;
  box-shadow: 2px 2px 5px #aaa;
  z-index: 1;
  /* 以下を追加 */
  color: #535353;
  border-radius: 5px;
}
/* モバイル版の調整 */
@media (max-width: 767px) {
.popup { left:35px;  }
}



/* Bootstrapのガター幅を調整するための汎用CSS */
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >div{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >div{ padding-right:25px;  padding-left:25px}



/* ↓スクロールに応じて要素を固定↓ */
.sticky {
    position: -webkit-sticky; /* Safari用 */
    position:sticky; /* 要素をスクロールに応じて固定 */
    top:+10px; /* 縦スクロールに追従 */
    z-index: 100; /* z-indexで最前面に持ってくる */
}