@charset "utf-8";

/*  構造
----------------------------------------------------------------*/

/*base*/
@media only screen and (min-width: 641px) {
  #content_wrap .pc_none {
    display: none;
  }
}
#content_wrap {
  font-family: "Noto Serif JP", serif;
}
#content_wrap .mt16 {
  margin-top: 16px !important;
}
#content_wrap .mt_m16 {
  margin-top: -16px !important;
}

#content_wrap .hstype01 {
  margin: 50px 0 40px;
  padding: 0;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
  color: #000;
  font-weight: 600;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.08em;
}
#content_wrap .hstype01 {
  display: flex;
  align-items: center;
  justify-content: center;
}
#content_wrap .hstype01:before,
#content_wrap .hstype01:after {
  content: "";
  background-image: url(../image/ttl_deco.png);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  width: 34px;
  height: 33px;
}
#content_wrap .hstype01:before {
  margin-right: 1rem;
}
#content_wrap .hstype01:after {
  margin-left: 1rem;
}
#content_wrap .hstype02 {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  padding: 0.5rem 1rem;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0 5px;
  /* background: #01A299; */
  background-image: linear-gradient(to right, #003c4b, #150201);
}
#content_wrap .hstype03 {
  padding: 4px 1px;
  border: 1px solid #270b00;
  text-align: center;
  /* font-size: 1.5rem; */
  font-weight: normal;
  color: #000;
  margin-top: 0;
}
#content_wrap .hstype04 {
  font-size: 22px;
  /* border-left: 6px solid #007aaa; */
  /* border-bottom: 1px solid #007aaa; */
  margin: 60px 0 20px 0;
  padding: 0 0 8px 15px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.8rem;
}
#content_wrap .hstype04 span {
  color: #000;
  margin: 0 20px 0 0;
}
#content_wrap .hstype05 {
  font-size: 16px;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    90deg,
    rgb(219, 223, 224) 0%,
    rgb(255, 255, 255) 50%,
    rgb(219, 223, 224) 100%
  );
  margin-top: 1.5rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}
#content_wrap .strc_box1 {
  padding: 25px;
  border: solid 1px;
  border-color: #000;
  font-family: "Noto Serif JP", serif;
}
#content_wrap .strc_box1 h4 {
  text-align: center;
  font-size: 21px;
  border-bottom: 1px solid #666;
  padding: 0 0 15px 0;
  font-family: "Noto Serif JP", serif;
  line-height: 1.8em;
  font-weight: 500;
}
#content_wrap .strc_box1 h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.6em;
  font-weight: 600;
}
#content_wrap .strc_box2 p {
  font-size: 15px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
}
#content_wrap .strc_box2 h3 {
  font-size: 18px;
  font-weight: 500;
  padding: 0.8rem 1rem;
  letter-spacing: 0.05em;
  /*background: linear-gradient(90deg, rgb(157, 144, 123) 0%, rgb(208, 194, 170) 50%, rgb(157, 144, 123) 100%);*/
  /* background-color:#01A299; */
  background-image: linear-gradient(to right, #003c4b, #150201);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  margin-bottom: 1rem;
  line-height: 1.5rem;
}
#content_wrap .strc_box3 {
  background: #e8dfca;
  padding: 0.5em;
}
#content_wrap #security-list {
  color: #000;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 20px;
}
#content_wrap #security-list ul {
  list-style: none;
  padding: 0;
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
  #content_wrap .sp_none {
    display: none;
  }

  #content_wrap .hstype01 {
    margin: 50px 0 30px;
    font-size: 20px;
  }
  #content_wrap .hstype02 {
    padding: 5px 10px;
    font-size: 15px;
  }
  #content_wrap .hstype04 {
    font-size: 18px;
    padding: 0 0 7px 12px;
    margin: 30px 0 20px 0;
    line-height: 1.5;
  }
  #content_wrap .hstype05 {
    font-size: 15px;
    padding: 5px 10px;
  }
  #content_wrap .strc_box1 {
    padding: 15px 3%;
  }
  #content_wrap .strc_box1 h3 {
    font-size: 16px;
    margin-top: 20px;
  }
  #content_wrap .strc_box1 h4 {
    font-size: 18px;
    padding: 0 0 10px 0;
    line-height: 1.8;
  }
  #content_wrap .strc_box2 h3 {
    font-size: 16px;
    padding: 10px 10px;
  }
  #content_wrap .hstype03 {
    padding: 0px 10px;
  }
}

.cp_box *,
.cp_box *:before,
.cp_box *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cp_box {
  position: relative;
}
.cp_box label {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.9) 50%,
    #fff 100%
  );
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cp_box input:checked + label {
  background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
  line-height: 2.5rem;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  /* left: 50%; */
  /* width: 16rem; */
  /* font-family: FontAwesome; */
  content: ">>続きを読む";
  /* transform: translate(-50%, 0); */
  letter-spacing: 0.05em;
  color: #000;
  border-radius: 20px;
  /*font-size: 1.4rem;*/
}
.cp_box input {
  display: none;
}
.cp_box .cp_container {
  overflow: hidden;
  height: 150px; /* 開く前に見えている部分の高さ */
  transition: all 0.3s;
}
.cp_box input:checked + label {
  /* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
  /* font-family: FontAwesome; */
  content: ">>閉じる";
}
.cp_box input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 30px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.3s;
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
  .cp_box label:after {
    font-size: 13px;
  }
}