@charset "utf-8";
/* ===============================================
# setting
=============================================== */
:root {
  --main-color: #065b99;
}
button {
  font-size: 1.4rem;
}
@media (min-width :835px){
  button {
    font-size: 1.68rem;
  }
}

/* ===============================================
# common_parts
=============================================== */
.mt_1em {
  margin-top: 1em;
}
.mt_1p5em {
  margin-top: 1.5em;
}
.mt_2em {
  margin-top: 2em;
}
.mt_3em {
  margin-top: 3em;
}
.ind_1em {
  margin-left: 1em;
  text-indent: -1em;
}
.bg_body {
  background: url("../img/bg_body.png");
  background-size: 50px;
}
.parts_dl01 dt {
  padding-top: 1em;
  line-height: 1.4;
  font-weight: bold;
  font-size: 1.07em;
  color: var(--main-color);
}
.parts_dl01 dd {
  padding-top: .1em;
  line-height: 1.4;
  font-size: .93em;
}
.parts_ttl01 {
  padding-top: 1.5em;
  padding-bottom: .1em;
  border-bottom: var(--main-color) 1px solid;
  font-weight: bold;
  font-size: 1.36em;
  color: var(--main-color);
}

/* ===============================================
# sec_main
=============================================== */
.sec_main{
  padding-top: 22px;
  background: url("../img/bg_ttl_main.png");
  background-size: 10px;
}
.sec_main h1{
  width: 59%;
}
.area_body {
  padding-top: 2.5em;
}
@media (min-width :835px){

}
/* ===============================================
# 続きを読むボタン
=============================================== */
.js_readmore {
  margin-top: 1em;
  margin-bottom: 1em;
  background: url("../img/hr_dot.svg") repeat-x center center;
  background-size: auto 1.5px;
}
.js_readmore .btn {
  display: block;
  width: 82%;
  height: 4.4em;
  margin: auto;
  border: var(--main-color) 1px solid;
  background: #fff;
  font-weight: bold;
  color: var(--main-color);
}
.js_readmore .open {
  display: block;
}
.js_readmore.js_click .open {
  display: none;
}
.js_readmore .close {
  display: none;
}
.js_readmore.js_click .close {
  display: block;
}
/* ===============================================
# sec_result
=============================================== */
.sec_result {
  padding-bottom: 50px;
}
.sec_result a,
.sec_result a:link,
.sec_result a:visited{
  color: var(--main-color);
  text-decoration: none;
  border-bottom:transparent 1px dotted;
  transition: .3s;
}
.sec_result a:hover{
/*  color: #000;*/
  border-bottom:var(--main-color) 1px dotted;

}
.sec_result .ttl_result{
  display: flex;
  align-items: center;
/*  margin-top: 2.3em;*/
  margin-top: 1.5em;
}
.sec_result .ttl_result:first-of-type{
/*  margin-top: 1.4em;*/
  margin-top: 1.2em;
}
.sec_result .ttl_result .num{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-right: .4em;
  padding-top: 0.2em;
  border-radius: 100px;
  background: var(--main-color);
  line-height: 1;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.21em;
  color: #fff;
}
.sec_result .ttl_result .txt{
  font-weight: bold;
  font-size: 1.21em;
  color: var(--main-color);
}
.sec_result .ttl_result + p{
  margin-top: .5em;
}
.sec_result .area_btn {
  position: relative;
  margin-top: 1em;
  margin-bottom: 5px;
}
.sec_result .area_btn + .area_btn {
  margin-top: calc(1em - 3px);
}
.sec_result .area_btn::before {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border: var(--main-color) 1px solid;
  border-radius: 100px;
}
.sec_result .area_btn::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: calc(100% + 5px);
  border-radius: 100px;
  background: url("../img/bg_btn01.png") center center;
  background-size: 10px;
}
.sec_result .area_btn .btn {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content:space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: .7em 1em .7em 2em;
  text-align: left;
}
.sec_result .area_btn .btn span {
  width: 100%;
  height: 100%;
  line-height: 1;
  font-weight: bold;
  font-size: .93em;
  color: var(--main-color);
}
.sec_result .area_btn .btn .ico {
  flex-shrink: 0;
  display: block;
  content: '';
  width: 38px;
  height: 38px;
  background: url("../img/ico_btn_open.svg") no-repeat center center;
  background-size: 38px;
}
@media (hover: hover) and (min-width: 835px) {
  .sec_result .area_btn::before {
  transition: .3s;
  }
  .sec_result .area_btn:hover::before {
    background: #fff;
  }
}

/* ===============================================
# area_modal
=============================================== */
.area_modal{
  display: none;
}

/* ===============================================
# モーダル内スクロールバー
=============================================== */
.modaal-container ::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.modaal-container ::-webkit-scrollbar-track {
  background: #bbbbbb;
  border-radius: 10px;
}
.modaal-container ::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 10px;
}
@media (min-width :835px){
  .modaal-container ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}
/* ===============================================
# modaalウインドウ
=============================================== */
.modaal-inner-wrapper {
  padding-left: min(4vw, 1em);
  padding-right: min(4vw, 1em);
}
.modaal-container {
  width: fit-content;
  border: var(--main-color) 1px solid;
  border-radius: 2em;
  background: url("../img/bg_btn01.png") center center;
  background-size: 10px;
}
.modaal-content-container{
  position: relative;
  padding: min(4vw, 1em);
}
.modaal-container .hd {
  display: flex;
  justify-content: space-between;
}
.modaal-container .modal_ttl {
  margin-top: .5em;
  margin-left: 1em;
  margin-right: .5em;
  line-height: 1.2;
  font-weight: bold;
  color: var(--main-color);
}
.modaal-container .js_modal_close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-top: -.5em;
  background: url("../img/ico_btn_close.svg") no-repeat center center;
  background-size: 38px;
}
.modaal-container .modal_body {
  max-width: 84vw;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.modaal-container .img {
  margin: auto;
}
.modaal-container .memo {
  margin-top: 1em;
  line-height: 1.4;
  font-size: 70%;
}
@media (min-width :835px){
  .modaal-container {
    max-width: fit-content;
    max-width: 1200px;
  }
  .modaal-container .modal_ttl {
    font-size: 1.21em;
  }
  .modaal-container .modal_body {
    max-width: 90vw;
  }
  .modaal-container .img {
    max-width: none !important;
  }
}

/* ===============================================
# モーダル内グラフ画像サイズ
=============================================== */
.modaal-container .hyo_1 {
  width: calc(1485px / 2);
}
.modaal-container .hyo_2 {
  width: calc(862px / 2);
}
.modaal-container .hyo_3 {
  width: calc(840px / 1.8);
}
.modaal-container .hyo_4 {
  width: calc(714px / 2);
}
.modaal-container .hyo_5 {
  width: calc(860px / 2);
}
.modaal-container .hyo_6 {
  width: calc(1156px / 1.8);
}
.modaal-container .hyo_7 {
  width: calc(658px / 2);
}
/*----- モーダル内備考テキスト ----------*/
.modaal-container .memo.hyo_1 {
  width: fit-content !important;
  max-width: calc(1485px / 2);
}
.modaal-container .memo.hyo_4 {
  width: fit-content !important;
  max-width: calc(714px / 2);
}

@media (min-width :835px){
  .modaal-container .hyo_1 {
    width: calc(1485px / 2 * 1.3);
  }
  .modaal-container .hyo_2 {
    width: calc(862px / 2 * 1.4);
  }
  .modaal-container .hyo_3 {
    width: calc(840px / 2 * 1.6);
  }
  .modaal-container .hyo_4 {
    width: calc(714px / 2 * 1.4);
  }
  .modaal-container .hyo_5 {
    width: calc(860px / 2 * 1.4);
  }
  .modaal-container .hyo_6 {
    width: calc(1156px / 2 * 1.6);
  }
  .modaal-container .hyo_7 {
    width: calc(658px / 2 * 1.6);
  }
  /*----- モーダル内備考テキスト ----------*/
  .modaal-container .memo.hyo_1 {
    max-width: calc(1485px / 2 * 1.3);
  }
  .modaal-container .memo.hyo_4 {
    max-width:  calc(714px / 2 * 1.4);
  }
}