@charset "UTF-8";

.main_inner{
  font-family: ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,Hiragino Sans,Noto Sans CJK JP,Osaka,Meiryo,メイリオ,MS PGothic,ＭＳ Ｐゴシック,YuGothic,Yu Gothic,Hiragino Sans GB,Helvetica Neue,HelveticaNeue,Helvetica,Noto Sans,Roboto,Arial,Arial Unicode MS,sans-serif;
  font-size: 13px;
  font-weight: 300;
  max-width: 800px;
}

section section{
  margin: 0 calc(50% - 50vw);
  padding: 10px calc(50vw - 50% + 10px);
  background-color: #EEF0F4;
  width: 100vw;
}

section.kv{
  padding: 0;
  background-color: #fff;
}

section.read{
  padding-top: 30px;
}

section.link{
  padding-top: 50px;
  background-color: #fff;
}

section.measurement,
section.choice{
  padding-bottom: 20px;
}

section.last{
  padding-top:  0px;
  padding-bottom: 30px;
}


h1,h2,h3{
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5em;
}

h1{
  font-size: 2.2em;
  color: #E77949;
}

h2{
  font-size: 1.7em;
  position: relative;
  margin-bottom: 1em;
}

h2:before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 60px;
  height: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #E77949;
  border-radius: 2px;
}

h3{
  font-size: 1.4em;
  position: relative;
  margin-bottom: 1em;
}

.tab h3:before {
  content: '';
  position: absolute;
  bottom: -5px;
  display: inline-block;
  width: 30px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #6A707C;
  border-radius: 2px;
}

p{
  margin-bottom: 0.8em;
}

dl{
  margin-bottom: 1em;
}

dt{
  font-weight: 600;
}

.kv-img{
  text-align: center;
}

.kv-img img{
  width: 100%;
  max-width: 800px;
}



.list-note{
  margin: 10px 0 20px 1em;
}
.list-note li{
  text-indent: -1em;
  margin-bottom: 0.5em;
}
.list-note li:before {
  content: "※";
}

.list-num{
  margin-left: 1em;
  list-style-type: decimal;
}

.list-circlenum{
  font-size: 1.2em;
  font-weight: 600;
  list-style-type: none;
  margin-bottom: 0.8em;
}

.tab__panel{
  background-color: #fff;
}

.tab__panel-box {
  min-width: none;
  padding: 15px;
  width: auto;
}

.tab__menu-item{
  background-color: #6A707C;
  color: #EEF0F4;
  padding: 0.5em;
  border: none;
}

.tab-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.video {
  margin: 20px 0;
  position: relative;
  width:100%;
  height:0;
  padding-top: 56.25%;
}
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-area .video-contents{
  width: 100%;/*背景色を横幅いっぱいに広げる*/
  text-align: center;
  margin: auto;
  padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
}

.section-item{
  margin-bottom: 25px;
}

.col2-box{
  display: flex;
  flex-direction: column;
}

.link-box{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin-bottom: 30px;
}

.link-box .link-txt{
  text-decoration: underline;
  color: #1a5feb;
}

.link-img,
.link-button{
  margin-bottom: 15px;
}

a.link-button{
  text-align: center;
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 1.2em;
  padding: 1em;
  text-align: center;
}

a.link-button::after{
  content: '';
  width: 15px;
  height: 15px;
  border: 0;
  border-top: 2px solid #000; /* 矢印の色 */
  border-right: 2px solid #000; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 7.5px);
  right: 20px;
}





@media screen and (min-width: 960px) {

  .main_inner{
    font-size: 14px;
  }

  .sp-only{
    display: none;
  }

  .tab-box{
    flex-direction: row;
  }

  .tabbox-img{
    width: 40%;
    margin-right: 5%;
  }


  .video-area{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

  .col2-box{
    flex-direction: row;
  }

  .col2-item img {
    width: 330px;
    margin-left: 15px;
  }

  .link-img{
    max-width: 500px;
  }
}