@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: 12px;
  font-weight: 300;
  max-width: 800px;
}

section section{
  padding: 20px 1em;
}

section.kv{
  padding: 0;
}

section.sizes,
section.table,
section.items,
section.guide{
  background-color: #EEF0F4;
  margin: 0 calc(50% - 50vw);
  padding: 2em calc(50vw - 50% + 2em);
  width: 100vw;
}

section.sizes{
  padding-top: 4em;
}

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

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

h2{
  font-size: 1.7em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

h2 span{
  position: relative;
  display: inline-block;
  background-color: #fff;
  padding: 0.5em;
  text-align: center;
  font-size: 0.6em;
  margin-bottom: 10px;
}

h2 span::before{
  content: "";
  position: absolute;
  border: solid 8px transparent;
  border-top: solid 8px #fff;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.list-size{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 15px;
}

.list-size li{
  width: 100%;
  padding: 0.5em;
  border: 2px solid #EEF0F4;
  border-right: none;
  background-color: #fff;
  color: #E77949;
  font-size: 1.4em;
  font-weight: 600;
  text-align: center;
}

.list-size li:last-of-type{
  border-right: 2px solid #EEF0F4;
}

.list-note{
  margin: 20px 0 20px 1em;
}

.list-note li{
  text-indent: -1em;
  margin-bottom: 0.5em;
}

.list-note li:before {
  content: "※";
}

/* テーブル */

.table_box{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 0.5em;
  border: 1px solid #EEF0F4;
  border-right: none;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.table_box td:last-of-type{
  border-right: 1px solid #EEF0F4;
}
th {
  background: transparent;
}
td {
  background: #fff;
  font-weight: 200;
}
.table_top td,
th{
  font-size: 1.2em;
  font-weight: 600;
  color: #fff;
}
.table_top td{
  background-color: #E77949;
}
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
}
.sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #6A707C;
  z-index: -1;
}

.table_top .sticky::before{
  background: #EEF0F4;
  border: #EEF0F4 1px solid;
}

.table-unit{
  float: right;
}

/* タブ */

.tab {
  max-width: 800px;
  margin: 0 auto;
}

/* タブメニュー */
.tab__menu {
  display: flex;
  align-items: flex-end; /* メニューを下揃え */
  justify-content: center;
  min-height: 50px; /* メニュー切替時にタブがズレないように */
  padding: 0;
  margin: 0;
}

.tab__menu-item {
  position: relative;
  display: inline-block;
  color: #6A707C;
  background-color: #EEF0F4;
  border-left: 2px solid #fff;
  list-style: none;
  margin-bottom: 15px;
  padding: 1em;
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  font-weight: 600;
  cursor: pointer;
}

/* is-activeがついている時のスタイル */
.tab__menu-item.is-active {
  background-color: #E77949;
  color: #fff;
}

.tab__menu-item.is-active::before {
  content: "";
  position: absolute;
  border: solid 8px transparent;
  border-top: solid 8px #E77949;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* タブパネル */
.tab__panel {
 width: 100%;
}

.tab__panel-box {
  display: none;
  min-width: 300px;
  width: 50%;
  margin: 0 auto;
}

/* is-showがついている時のスタイル */
.tab__panel-box.is-show {
  display: block;
}


h3{
  font-size: 1.6em;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

main a.link-text{
  text-decoration: underline;
  color: #3270AA;
}

.button-box{
  text-align: center;
}


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

.button-leftimg{
  position: absolute;
  height: 100%;
  width: auto;
  top: 0;
  left: 15px;
}

a.button-item::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;
}

.tab__panel-box p{
  margin-bottom: 20px;
  font-size: 1.2em;
}

.tab__panel-box .list-note{
  margin-top: 0;
}

h4{
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}

.pantssize{
  margin: 30px 0 40px 0;
}

.pantssize h2{
  margin-bottom: 0;
}

.pantssize p{
  margin-bottom: 20px;
}

.guide p{
  text-align: center;
}

.guide-img{
  max-width: 160px;
  width: 100%;
  margin: 25px auto;
  display: flex;
  justify-content: center;
}

.items .button-box,
.guide .button-box{
  margin: 0 auto;
  min-width: 300px;
  width: 50%;
}

.guide .bunner-box{
  width: 100%;
}

.guide-l4{
  margin-top: 30px;
}

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

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

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

  .main_inner{
    font-size: 14px;
  }
  .guide-img{
    max-width: 250px;
  }

  .sp-only{
    display: none;
  }

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