:root {
  --font-zen-kaku-gothic-new: "Zen Kaku Gothic New", sans-serif;
  --font-gothic: 'Objektiv Mk3 Trial', 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Helvetica, Arial, sans-serif;
}
.mainframe_ *{
  box-sizing: border-box;
  line-height: 1.4;
}
.pc_only{
  display: none;
}
.section-inner{
  width: 100%;
}
.content-inner{
  width: 100%;
}
.section-title{
  font-size: clamp(1.25rem, 1.023rem + 0.97vw, 1.75rem);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
}
.pane-footer-wrap{
  margin-top: 5.33vw;
}
.block-breadcrumb-wrap{
  margin: 16vw auto 0;
}

/*mv*/
.mv{
  width: 100%;
}
.mv-wrap{
  position: relative;
}
.page-title{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-title-en{
  font-family: var(--font-gothic);
  font-size: clamp(1.625rem, 1.341rem + 1.21vw, 2.25rem);
  letter-spacing: 0.05em;
  text-align: center;
  display: block;
}
.page-title-jp{
  margin-top: 2.67vw;
  font-size: clamp(0.688rem, 0.545rem + 0.61vw, 1rem);
  letter-spacing: 0.05em;
  text-align: center;
  display: block;
}
.page-lead{
  padding: 10.67vw 0;
}
.page-lead-text{
  font-size: clamp(0.875rem, 0.818rem + 0.24vw, 1rem);
  text-align: center;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

/*howto*/
.howto{
  margin-top: 5.33vw;
}
.howto-image{
  width: 100%;
  margin-top: 5.33vw;
}
.howto-image img{
  width: 100%;
  height: auto;
}
.howto-image img.pc_only{
  display: none;
}

/*foundation map*/
.color-map{
  margin-top: 21.33vw;
}
.map-content{
  margin-top: 5.33vw;
  position: relative;
}
.map-content img{
  width: 100%;
  height: auto;
}
.map-detail{
  margin-top: 6.67vw
}
.map-list-item{
  display: flex;
  align-items: center;
}
.map-list-item:not(:first-child){
  margin-top: 2.67vw;
}
.map-list-item .color{
  width: 11.47vw;
  height: 11.47vw;
  font-size: clamp(0.875rem, 0.818rem + 0.24vw, 1rem);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.map-list-item .color.-c01{
  background-color: #F3D8C3;
}
.map-list-item .color.-c02{
  background-color: #F2CDB2;
}
.map-list-item .color.-cLB{
  background-color: #FFF3E3;
}
.map-list-item .color.-cOB{
  background-color: #FBEFE5;
}
.map-list-item .color.-cPB{
  background-color: #FCEDE9;
}
.map-link-wrap{
  margin-left: 3.2vw;
}
.map-link,
.map-link:visited{
  font-size: 3.73vw;
  text-decoration: underline !important;
}
/*make-finish-map*/
.make-finish-map{
 margin-top: 21.33vw;
 position: relative;
}
.product-item{
  position: absolute;
  z-index: 1;
}
.product-item.-n01{
  top: 10.94vw;
  left: 22.67vw;
}
.product-item.-n01 img{
  width:5.37vw;
  min-width: 18px;
  height: auto;
}
.product-item.-n02{
  top: 14.4vw;
  left: 28.67vw;
}
.product-item.-n02 img{
  width: 3.58vw;
  min-width: 12px;
  height: auto;
}
.product-item.-n03{
  top: 12.52vw;
  left: 41.66vw;
}
.product-item.-n03 img{
  width: 4.18vw;
  min-width: 14px;
  height: auto;
}
.product-item.-n04{
  top: 16.6vw;
  left: 48.36vw;
}
.product-item.-n04 img{
  width: 2.69vw;
  min-width: 9px;
  height: auto;
}
.product-item.-n05{
  top: 34.19vw;
  left: 48.91vw;
}
.product-item.-n05 img{
  width: 5.27vw;
  min-width: 21px;
  height: auto;
}
.product-item.-n06{
  top: 47.31vw;
  left: 38.27vw;
}
.product-item.-n06 img{
  width: 7.96vw;
  min-width: 30px;
  height: auto;
}
.product-item.-n07{
  top: 37.07vw;
  left: 61.84vw;
}
.product-item.-n07 img{
  width: 3.88vw;
  min-width: 13px;
  height: auto;
}
.product-number{
  width: 8.96vw;
  height: 8.96vw;
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  font-size: clamp(0.75rem, 0.58rem + 0.73vw, 1.125rem);
  display: flex;
  align-items:center;
  justify-content: center;
  background-color: #EDF4FC;
  position: absolute;
  z-index: -1;
}
.product-number[data-product-id="01"]{
  top: -15px;
  left: -25px;
}
.product-number[data-product-id="02"]{
  top: -26px;
  right: -18px;
}
.product-number[data-product-id="03"]{
  top: -23px;
  left: -16px;
}
.product-number[data-product-id="04"]{
  top: -23px;
  right: -22px;
}
.product-number[data-product-id="05"]{
  top: -16px;
  right: -19px;
}
.product-number[data-product-id="06"]{
  top: -18px;
  left: -24px;
}
.product-number[data-product-id="07"]{
  top: -25px;
  left: -4px;
}
.map-list-item{
  display: flex;
  align-items: center;
}
.map-list-item:not(:first-child){
  margin-top: 2.67vw;
}
.map-list-item .no{
  width: 11.47vw;
    height: 11.47vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: #EDF4FC;
}
.make-finish-map .map-link{
  margin-left: 3.2vw;
  display: inline-block;
}
/*STEP*/
.step{
  margin-top: 23.88vw;
}
.step .section-inner{
  padding: 0;
}
.step-content + .step-content{
  margin-top: 17.33vw;
}
.step-content.-step01 .product-lists:first-of-type .product-lists-item:nth-of-type(4){
  margin-top: 30px;
}
.step-content.-step01 .product-lists:first-of-type .product-lists-item:nth-of-type(4) .product-detail-wrap{
  margin-top: 30px;
}
.step-content.-step01 .product-lists + .product-lists .product-lists-item:first-child{
  margin-top: 30px;
}
.step-content.-step01 .product-lists + .product-lists .product-lists-item:first-child .product-detail-wrap{
  margin-top: 30px;
}
.step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-child(3){
  margin-top: 40px;
}
.step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-child(3) .product-detail-wrap{
  margin-top: 20px;
}
.content-title{
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 3.2vw 4vw 5.33vw;
  background-color: #EDF4FC;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-title.bg-gray{
  background-color: #F8F8F8;
}
.content-title-en{
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: clamp(1.375rem, 1.29rem + 0.36vw, 1.563rem);
  letter-spacing: 0.1em;
}
.content-title-en small{
  font-size: clamp(0.875rem, 0.761rem + 0.48vw, 1.125rem);
}
.content-title-jp{
  margin-top: 8px;
  display: inline-block;
  font-size: clamp(1.25rem, 1.08rem + 0.73vw, 1.625rem);
  font-weight: bold;
  letter-spacing: 0.05em;
}
.content-lead{
  padding: 8vw 0;
}
.content-lead-text{
  font-size: 4.27vw;
  text-align: center;
  line-height: 1.625;
}
.product-lists{
  margin: -30px 0 0 0;
  display: flex;
  flex-wrap: wrap;
}
.product-lists + .product-lists{
  margin-top: 0;
}
.product-lists-item{
  width: 100%;
  margin: 60px 0 0 0;
}
.product-card{
  display: flex;
}
.product-image{
  width: calc(125 / 335 * 100%);
  max-width: 125px;
}
.product-image img{
  width: 100%;
}
.product-detail{
  width: calc(210 / 335 * 100%);
  max-width: 210px;
  display: flex;
  flex-direction: column;
}
.product-copy{
  font-size: 3.47vw;
  white-space: nowrap;
}
.product-copy small{
  display: block;
  font-size: 2.67vw;
}
.product-copy small sup{
  vertical-align: top;
}
.product-name{
  margin-top: 2.67vw;
  font-size: 3.73vw;
  font-weight: bold;
  letter-spacing: 0;
  white-space: nowrap;
}
.product-chart{
  margin-top: 5.33vw;
}
.product-chart-wrap{
  display: flex;
  align-items: center;
}
.chart-title{
  width: 4.5em;
  font-size: clamp(0.688rem, 0.659rem + 0.12vw, 0.75rem);
}
.chart-image{
  margin-left: 0.5em;
  display: flex;
  align-items: center;
}
.chart-diamond{
  width: 10px;
  height: 10px;
  display: block;
  transform: rotate(45deg);
  background-color: #E1E1E1;
  color: transparent;
  font-size: 10px;
}
.chart-icon-wrap:not(:first-child){
  margin-left: 6px;
}
.chart-diamond.-full{
  background-color: #9EB9D8;
}
.chart-diamond.-harf{
  background: rgb(158,185,216);
background: linear-gradient(45deg, rgba(158,185,216,1) 0%, rgba(158,185,216,1) 50%, rgba(225,225,225,1) 50%, rgba(225,225,225,1) 100%);
}
.product-card .more-btn{
  width: auto;
  margin-top: 12px;
  margin-left: auto;
  padding: 9px 30px 7px 13px;
  color: #fff;
  font-size: clamp(0.75rem, 0.665rem + 0.36vw, 0.938rem);
  background-color: #A4A4A5;
  position: relative;
}
.product-card .more-btn:after{
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  top: 40%;
  right: 8px;
  transform: rotate(45deg);
}
.product-tag{
  padding: 3px 7px;
  font-size: clamp(0.625rem, 0.568rem + 0.24vw, 0.75rem);
  display: inline-block;
  background-color: #F8F8F8;
}
.product-tag:empty{
  background-color: unset;
}
.product-tag + .product-copy{
  margin-top: 7px;
}
.product-type{
  margin-top: 5px;
  padding: 3px 7px;
  font-size: clamp(0.625rem, 0.568rem + 0.24vw, 0.75rem);
  display: inline-block;
  border: 1px solid #E1E1E1;
}
.product-chart.-bar{
  margin-top: 12px;
}
.product-chart.-bar .product-chart-wrap{
  flex-direction: column-reverse;
  align-items: flex-start;

}
.product-chart.-bar .chart-title{
  width: calc(126 / 210 * 100%);
  display: flex;
  justify-content: space-between;
}
.product-chart.-bar .chart-image{
  width: calc(126 / 210 * 100%);
  margin-left: 0;
}
.chart-rectangle{
  width: calc((100% - 6px) / 4);
  height: 10px;
  background-color: #E1E1E1;
}
.chart-rectangle:not(:first-child){
  margin-left: 2px;
}
.chart-rectangle.active{
  background-color: #9EB9D8;
}
.step-content.-pluseone .product-lists-item:first-child{
  margin-top: 9.33vw;
}
.card-title{
  padding: 1.87vw 7.2vw 2.13vw 9.33vw;
  font-size: 3.47vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  background-color:#F6FAFD;
}
.card-title + .product-card{
  margin-top: 6.67vw;
}
@media screen and (max-width:640px){
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-of-type(1) .more-btn{
    margin-top: 11.94vw;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-of-type(1) .product-detail{
    margin-top: 2.99vw;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-of-type(2) .more-btn{
    margin-top: 20.9vw;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-of-type(3) .more-btn{
    margin-top: 14.93vw;
  }
}

@media screen and (min-width:641px){
  .sp_only{
    display: none;
  }
  .pc_only{
    display: block;
  }
  div.mainframe_{
    margin-top: 0;
    position: relative;
  }
  .pane-footer-wrap{
    margin-top: 100px;
  }
  .block-breadcrumb-wrap{
    margin: 0 auto;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .section-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  .content-inner{
    padding: 0;
  }
  .mv{
    width: 100%;
    max-width: unset;
  }
  .page-title-jp{
    margin-top: 10px;
  }
  .page-lead{
    padding: 60px 0;
  }
  .page-lead-text{
    line-height: 2.5;
  }
  .howto{
    margin-top: 40px;
  }
  .howto-image{
    margin: 20px 0 0 -7%;
  }
  .howto-image img.sp_only{
    display: none;
  }
  .howto-image img.pc_only{
    display: block;
  }
  .map-content{
    display: flex;
  }
  .map-image{
    width: calc(562 / 1200 * 100%);
    max-width: 562px;
  }
  /* .make-finish-map .map-image{
    min-width: 475px;
  } */
  .map-detail{
    width: calc(600 / 1200 * 100%);
    max-width: 600px;
    margin: 0 0 0 38px;
  }
  .map-list-item:not(:first-child){
    margin-top: 10px;
  }
  .map-list-item .color{
    max-width: 43px;
    max-height: 43px;
  }
  .map-link-wrap{
    margin-left: 12px;
  }
  .map-link,
  .map-link:visited{
    font-size: 16px;
  }
  .color-map{
    margin-top: 80px;
  }
  .make-finish-map{
    margin-top: 80px;
  }
  .product-item.-n01{
    top: 15.45%;
    left: 10.58%;
  }
  .product-item.-n01 img{
    width:2.75vw;
    max-width: 33px;
    height: auto;
  }
  .product-item.-n02{
    top: 20.25%;
    left: 13.58%;
  }
  .product-item.-n02 img{
    width: 1.67vw;
    max-width: 20px;
    height: auto;
  }
  .product-item.-n03{
    top: 15.63%;
    left: 22.42%;
  }
  .product-item.-n03 img{
    width: 1.92vw;
    max-width: 23px;
    height: auto;
  }
  .product-item.-n04{
    top: 18.12%;
    left: 25.5%;
  }
  .product-item.-n04 img{
    width: 1.33vw;
    max-width: 16px;
    height: auto;
  }
  .product-item.-n05{
    top: 50%;
    left: 26.67%;
  }
  .product-item.-n05 img{
    width: 2.83vw;
    max-width: 34px;
    height: auto;
  }
  .product-item.-n06{
    top: 72%;
    left: 21.33%;
  }
  .product-item.-n06 img{
    width: 4.17vw;
    max-width: 50px;
    height: auto;
  }
  .product-item.-n07{
    top: 55.1%;
    left: 33.67%;
  }
  .product-item.-n07 img{
    width: 1.83vw;
    max-width: 22px;
    height: auto;
  }
  .product-number{
    width: 3.5vw;
    max-width: 43px;
    height: 3.5vw;
    max-height: 43px;
  }
  .product-number.hover{
    color: #fff;
    background-color: #9EB9D8;
  }
  .map-list-item.hover .no{
    color: #fff;
    background-color: #9EB9D8;
  }
  .map-list-item .no{
    width: 43px;
    height: 43px;
  }
  .make-finish-map .map-link{
    margin-left: 12px;
  }
  .product-number[data-product-id="01"] {
    top: -29px;
  }
  .product-number[data-product-id="02"] {
    top: -30px;
  }
  .product-number[data-product-id="03"] {
    top: -31px;
    left: -23px;
  }
  .product-number[data-product-id="04"]{
    top: -34px;
  }
  .product-number[data-product-id="05"]{
    top: -25px;
  }
  .product-number[data-product-id="06"] {
    top: -33px;
  }
  .product-number[data-product-id="07"]{
    top: -35px;
  }
  .step{
    margin-top: 100px;
  }
  .content-title{
    padding:28px 0 38px;
  }
  .content-lead{
    padding: 40px 0;
  }
  .content-lead-text{
    font-size: 16px;
    line-height: 2.5;
  }
  .product-lists{
    margin: -50px 0 0 -24px;
    display: flex;
    flex-wrap: wrap;
  }
  .product-lists-item{
    width: calc(100% / 3 - 24px);
    margin: 50px 0 0 24px;
  }
  .product-card{
    flex-wrap: wrap;
  }
  .product-copy{
    font-size: 13px;
  }
  .product-copy small{
    font-size:0.71em;
  }
  .product-name{
    margin-top: 10px;
    font-size: 14px;
  }
  .card-title + .product-card{
    margin-top: 20px;
  }
  .product-card .more-btn{
    width: 100%;
    padding: 18px;
    text-align: center;
  }
  .step-content + .step-content{
    margin-top: 100px;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:first-child{
    margin-top: auto;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item .product-detail-wrap{
    margin-top: 30px;
  }
  .step-content.-step01 .product-lists + .product-lists .product-lists-item:nth-child(3){
    margin-top: auto;
  }
  .product-chart{
    margin-top: 50px;
  }
  .card-title{
    padding: 7px 0 8px;
    font-size: 13px;
  }
  .step-content.-pluseone .product-lists-item:first-child{
    margin: 50px 0 0 24px;
  }
}