@charset "UTF-8";

@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap);

/* ===================================================================
CSS information

 File Name  : common.css
 Style Info : 見出し、ボタン、表など繰り返し使うパーツのスタイルを定義
=================================================================== */

html {
  overflow-y: scroll;
  line-height: 1;
  font-size: 62.5%;
}
body {
  background: #F1AB01;
  color: #333;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  word-break: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  font-weight: 500;
}

/*----------------------------------------------------
  link要素
--------------------------------------------------- */
a {
  text-decoration: underline;
  transition: all 0.2s ease-in-out 0s;
}
a:link {
  color: #0470B6;
}
a:visited {
  color: #0470B6;
}
a:hover {
  text-decoration: none;
  color: #0470B6;
}
a:active {
  color: #0470B6;
}
:focus-ring {
  outline: dotted 1px #F6AB00;
}
:-moz-focusring {
  outline: dotted 1px #F6AB00;
}

/*----------------------------------------------------
  img要素
--------------------------------------------------- */
img {
  line-height: 1;
  /*font-size: 0;*/
  vertical-align: top;
  height: auto;
  max-width: 100%;
  transition: all 0.2s ease-in-out 0s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*----------------------------------------------------
  見出し要素
--------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  line-height: 1.5;
  font-weight: 600;
}

/*----------------------------------------------------
  スクロールバー
--------------------------------------------------- */

/*スクロールバー全体*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
  @media screen and (max-width: 750px) {
    ::-webkit-scrollbar {
        width: 5px;
    }
    ::-webkit-scrollbar-track {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.5);
      border-radius: 10px;
      box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
    }
  }

/*----------------------------------------------------
 共通カラム
--------------------------------------------------- */
#page {
  overflow: hidden;
}
#contents {
  position: relative;
  line-height: 1.8;
  max-width: 750px;
  background: url("../img/bg.webp") center top no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  padding: 15px 15px 146px 15px;
}
#contents a:hover img{
  opacity: 0.70;
}
  @media screen and (max-width: 750px) {
    html, body, #page {
      min-width:100%!important;
      max-width:100%!important;
      width:100%!important;
    }
    #contents {
      max-width: 100%;
      padding: 2vw 2vw 19.46vw 2vw;
    }
  }

#index {
  position: relative;
  border: solid 2px #fff;
}
#sec01 {
  margin-bottom: 30px;
}
  @media screen and (max-width: 750px) {
    .main-visual h1 img {
      width: 100%;
      height: auto;
    }
    #sec01 {
      margin-bottom: 4vw;
    }
    #sec01 img {
      width: 89.86vw;
      height: auto;
    }
  }

.sec02_ico {
  margin-bottom: 15px;
}
.sec02__wrap {
  max-width: 656px;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  padding-bottom: 52px;
}
#sec02 {
  padding-bottom: 30px;
}
  @media screen and (max-width: 750px) {
    .sec02_ico {
      margin-bottom: 2vw;
    }
    .sec02_ico img {
      width: 16.8vw;
      height: auto;
    }
    .sec02__wrap {
      max-width: 87.46vw;
      border-radius: 4vw;
      padding-bottom: 6.93vw;
    }
    #sec02 {
      padding-bottom: 4vw;
    }
    #sec02 h2 img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

#sec02_01 {
  padding-bottom: 15px;
  background: url("../img/sec02_border.webp") center bottom no-repeat;
  background-size: 598px auto;
}
#sec02_01 h3 {
  padding: 10px 0;
}
#sec02_01 ul {
  margin-bottom: 15px;
}
#sec02_01 li {
  margin: 0 8px;
}
  @media screen and (max-width: 750px) {
    #sec02_01 {
      padding-bottom: 2vw;
      background-size: 79.73vw 0.21vw;
    }
    #sec02_01 h3 {
      padding: 1.33vw 0;
    }
    #sec02_01 h3 img {
      width: 56.53vw;
      height: auto;
    }
    #sec02_01 ul {
      margin-bottom: 2vw;
    }
    #sec02_01 li {
      margin: 0 1.2vw;
    }
    .sec02_01_a img {
      width: 21vw;
    }
    .sec02_01_g img {
      width: 24.8vw;
    }
    #sec02_01 p img {
      width: 78.66vw;
      margin: 0 auto;
    }
    #sec02_01 p img {
      display: block;
    }
  }

#sec02_02 {
  padding: 18px 0 0 0;
}
  @media screen and (max-width: 750px) {
    #sec02_02 {
      padding: 2.4vw 0 0 0;
    }
    #sec02_02 img {
      width: 78.66vw;
      height: auto;
    }
  }

#sec02_03 {
  padding: 15px 0 20px;
}
#sec02_03 p {
  padding: 20px 0 15px;
}
  @media screen and (max-width: 750px) {
    #sec02_03 {
      padding: 2vw 0 2.66vw;
    }
    #sec02_03 img {
      width: 51.46vw;
      height: auto;
    }
    #sec02_03 p {
      padding: 2.66vw 0 2vw;
    }
    #sec02_03 p img {
      width: 81.33vw;
      height: auto;
    }
  }

.sec02_btn li {
  margin-bottom: 27px;
}
.sec02_btn li:last-child {
  margin-bottom: 0;
}
.sec02_btn li a img {
  opacity: 1!important;
}
.sec02_btn li a:hover img {
  filter: brightness(1.2);
}
  @media screen and (max-width: 750px) {
    .sec02_btn li {
      margin-bottom: 3.6vw;
    }
    .sec02_btn li a img {
      width: 74.13vw;
      height: auto;
    }
  }

#sec03 {
  padding-bottom: 30px;
}
  @media screen and (max-width: 750px) {
    #sec03 {
      padding-bottom: 4vw;
    }
    #sec03 img {
      width: 87.73vw;
      height: auto;
    }
  }

#sec04 {
  padding-bottom: 22px;
}
  @media screen and (max-width: 750px) {
    #sec04 {
      padding-bottom: 2.93vw;
    }
    #sec04 img {
      width: 87.73vw;
      height: auto;
    }
  }

.ft_note {
  padding: 15px 0;
}
.ft_note p img {
  display: block;
}
  @media screen and (max-width: 750px) {
    .ft_note {
      padding: 2vw 0;
    }
    .ft_note p img {
      width: 47.2vw;
      height: auto;
    }
  }

.ft_copy {
  position: absolute;
  left: 0;
  bottom: 0;
}
  @media screen and (max-width: 750px) {
    .ft_copy  {
      width: 100%;
    }
    .ft_copy img {
      width: 100%;
      height: auto;
    }
  }