@charset "utf-8";
/*
Theme Name: ABC_LESSON
Description: 
Author: COSMICGEAR
Version: 1.0
*/

/*共通*/
/*Common 
===============================================================*/

body{
  font-family: 'Noto Sans JP',"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Osaka, Sans-Serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern'; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 16px; font-weight: 400;width: 100vw; max-width: 100vw; overflow: hidden auto;
}
img{
  width: 100%;
  max-width: 100%;
  display: block;
}
.inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.fl{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl_c{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
a.cvr{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
}

/*Container 
===============================================================*/

/*floating*/
#float{
  display: none;
}
#container{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}
#container > *{
  width: 100%;
}
footer{
  margin-top: auto;
}
/*header/nav  
===============================================================*/

/*header
====================*/
header{
  width: 100%;
  height: 90px;
  padding: 0 90px 0 25px;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  background: #fff;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  border-bottom: 3px solid #ff6000;
  box-sizing: border-box;
}
header::after{
  content: "";
  width: 100%;
  height: 8px;
  background: #535353;
  position: absolute;
  left: 0;
  bottom: -10px;
  display: block;
}
header.fixed{
  position: fixed;
  top: 0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  z-index: 9;
}
.head-logo{
  -ms-align-items: center;
  align-items: center;
}
.head-logo .logo{
  width: 210px;
  margin-top: -8px;
}
.head-logo .text{
  font-size: .75em;
  
}
.header-nav{
  height: 100%;
  -ms-align-items: center;
  align-items: center;
}
.header-nav > * + *{
  margin-left: 20px;
}
.header-dial{
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.header-dial .num{
  -ms-align-items: center;
  align-items: center; 
}
.header-dial .num > * + *{
  margin-left: 5px;
}
.header-dial .num .icn{
  width: 1.5em;
}
.header-dial .num a{
  font-size: 1.8925em;
  font-weight: 900;
  font-family: "Roboto";
}
.header-dial p.time{
  margin-left: auto;
  font-size: .75em;
  margin-top: .5em;
}
.header-btn{
  width: 10.18em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 100%;
}
.header-btn a{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 1.125em;
  color: #fff;
  font-weight: 700;
}
.header-btn a::before{
  content: "";
  width: 100%;
  height: calc(100%  + 10px);
  background: #ff4800;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
}
.header-btn a span{
  z-index: 1;
  transform: translateY(5px);
}

/*Navi
====================*/
/*Navi
====================*/
#hum-menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 102;
  width: 90px;
  height: 87px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.5);
}

#hum-menu button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
display: block;
  background: #000;
  width: 32px;
  height: 2px;
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}
#hum-menu button::before
,#hum-menu button::after{
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 32px;
  height: 2px;
  background: #000;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#hum-menu button::before{
  top: -10px;
}
#hum-menu button::after{
  top: 10px;
}
#hum-menu.open{
  background: rgba(255,255,255,0);
}
#hum-menu.open button{
  height: 0;
}
#hum-menu.open button::before{
  top: 0;
  transform: rotate(45deg);
  background: #8c8c8c;
}
#hum-menu.open button::after{
  top: 0;
  transform: rotate(-45deg);
  background: #8c8c8c;
}
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  position: absolute!important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
#hum-menu-block{
  width: 75vw;
  height: 100vh;
  position: fixed;
  right: -100%;
  top: 0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  z-index: 15;
  background: rgba(255,255,255,1);
}
#hum-menu-block.slide{
  right: 0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#hum-menu-block #g-nav{
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.sp_nav_bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  -webkit-transition: all .3s;
  -o-transition:  all .3s;
  transition:  all .3s;
  z-index: 100;
  transform: scale(0);
  transform-origin: center;
}
.sp_nav_bg.openbk{
  transform: scale(1);
  
}
#sp-menu-block{
 display: none;
  z-index: 101;
  position: fixed;
  top: 0;
  right: 0;
  width: 700px;
  max-width: 100vw;
  max-height: 100vh;
  transform: translateX(100%) translateY(-100%);
  transition: transform .3s;
  background: #fff;
  background: url( "images/online/wp_movie.png")repeat center/18px;
  overflow-y: scroll;
}
#sp-menu-block.slide{
  top: 0;
  transform: translateX(0) translateY(0);
}
#sp-menu-block-inner{
  padding: 60px 25px 50px;
}
#sp-menu-block-inner .logo{
  width: 300px;
  max-width: 60%;
  margin: 0 auto;
}
.l_nav-link{
  color: #fff;
  margin-top: 30px;
}
.l_nav-link li:first-child{
  border-top: 1px solid #8c8c8c;
}
.l_nav-link li{
  border-bottom: 1px solid #8c8c8c;
}
.l_nav-link li a{
  padding: 30px 40px 30px 30px;
  display: block;
  font-size: 1.5em;
  line-height: 1.2;
}
.l_nav-link li a::after{
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid;
  border-color: #8c8c8c #8c8c8c transparent transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#sp-menu-block-inner .btn-wrap{
  justify-content: center;
  margin-top: 40px;
  
}
#sp-menu-block-inner .btn-wrap a{
  width: 360px;
  max-width: 100%;
  color: #fff;
  background: #ff6000;
  box-shadow: 0 5px 0 #a33d00;
  border-radius: 35px;
  font-weight: 700;
  font-size: 1.125em;
  padding: 20px 0 20px;
  text-align: center;
  display: block;
}
#sp-menu-block-inner .btn-wrap a::after {
    content: "";
    width: 34px;
    max-width: 9%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 14px;
  background: url(../imgs/icn_arw.svg) no-repeat right center/100%;
}

/*main
===============================================================*/

/*Key
=====================================*/
#key{
  width: 100%;
  background: url("images/online/key.jpg") no-repeat center/cover;
  margin-top: 7px;
}
.key__inner{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  padding-top: 70px;
  padding-bottom: 150px;
}
.key__inner > *{
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6));
}
.key-text{
  width: 50%;
}
.key-title{
  width: 100%;

  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.sec-title-wrap{
  -ms-align-items: center;
  align-items: center;
  /*font-style: italic;*/
  padding-left: 20px;
  padding-right: 20px;
  
}
.sec-title-wrap p.en{
  font-weight: 900;
  color: #fff;
  display: block;
  padding: .35em 1em;
  background: #ff6000;
  transform: skew(-10deg);
}

.sec-title-wrap h2{
  font-size: 3em;
  font-weight: 900;
  margin-top: .15em;
  line-height: 1.25;
  text-align: center;
  transform: skew(-10deg);
}
.wp-gry{
  background: #efefef;
  padding-top: 75px;
  padding-bottom: 120px;
}
.sec-title-wrap + *{
  margin-top: 68px;
}

/*Content
=====================================*/
#content{
}
.sec-form-blc{
  background: #efefef;
}
.sec-form-blc.top-form .sec-form-box{
  transform: translateY(-90px);
}
.sec-form-blc.top-form .sec-form-box::before{
  content: "*DTMレッスンはPC環境が必要です";
  position: absolute;
  right: 0;
  top: -1.5em;
  color: #fff;
  font-size: .75em;
  font-weight: 700;
  filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.6));
}
.sec-form-box{
  background: #fff;
  padding: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  width: calc(100% - 40px);
}
.sec-form-blc.btn-form{
  padding-top: 75px;
  padding-bottom: 166px;
}
.form-title{
  background: url("images/online/wp_carbon_wide.png")no-repeat #000 center/auto 100%;
  padding: 12px 20px 16px;
}
.form-title h2{
  color: #ff6000;
  font-weight: 900;
  /*font-style: italic;*/
  font-size: 1.875em;
  text-align: center;
  transform: skew(-10deg);
  line-height: 1.2;
}
.form-body{
  width: 840px;
  max-width: 100%;
  padding: 54px 20px 60px;
  margin: 0 auto;
}

/*フォーム*/
::placeholder{ opacity: .5;}
.form-wrap input[type="text"]
,.form-wrap input[type="email"]
,.form-wrap input[type="tel"]
,.form-wrap input[type="date"]
,.form-wrap select
,.form-wrap textarea{
  padding: .5em; font-size: 16px; border: 1px solid #ccc;}
.form-wrap textarea
,.form-qe textarea{
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 0px;
  box-sizing: border-box;
}
.form-wrap .wpcf7-not-valid-tip{
  font-size: .75em;
  margin-top: 5px;
}
/*#sec-form input[type="text"]
,#sec-form input[type="email"]
,#sec-form input[type="tel"]{ max-width: 70%;}*/

.form-wrap input[name="f-age"]{
  width: 5em;
}
ul.form-list li {
  justify-content: space-between;
  padding: 20px 0;
}
ul.form-list li:first-child > div.fl {
  justify-content: space-between;
}
ul.form-list li:first-child > div > *{
  width: calc((100% - 20px)/2);
}
ul.form-list li + li{
  border-top: 1px solid #ededed;
}
ul.form-list li > p{
  width: 12em;
  font-weight: 600;
}
ul.form-list li > div{
  width: calc(100% - 14em);
}
ul.form-list li:nth-child(6) > div > * + *{
  margin-top: 15px;
}
ul.form-list li .must
,.form-qe p.must
,.form-qe p.any{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding-left: 2.5em;
  font-weight: 600;
  line-height: 1.2;
}
.form-qe .c-box{
  margin-top: 15px;
}
ul.form-list li .must::before
,.form-qe p.must::before{
  position: absolute;
  left: 0;
  top: 0;
  content: "必須";
  background: #c40000;
  padding: .25em;
  color: #fff;
  font-size: .72em;
  border-radius: 2px;
}
.form-qe p.any::before{
  content: "任意";
  color: rgb(51, 51, 51);
  font-size: 0.6em;
  margin-right: 0.5em;
  position: absolute;
  left: 0px;
  background: rgb(204, 204, 204);
  border-radius: 5px;
  padding: 0.25em;
}
.form-qe .c-box p.any + *{
  margin-top: 15px;
}
.form-qe .c-box .answer + .answer{
  margin-top: 10px;
}
ul.form-list span.at{
  font-size: .8em;
  display: block;
  color: #af0002;
  text-align: right;
}
.form-qe{
  margin-top: 30px;
}
/*確認ページ*/
input:-webkit-autofill.wpcf7c-conf {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  border: none !important;
  background: #fff !important; }
  input:-webkit-autofill.wpcf7c-conf:focus {
    border: none !important; }

.wpcf7c-conf {
  background: #fff !important;
  border-color: #fff !important; }
  .wpcf7c-conf:focus {
    border-color: transparent !important; }

/*error*/
.select-wrap.error
,input.error{
  background: #FFD9DA;
}
.form-btn-wrap .error
,.form-list p.error{
  text-align: center;
  font-size: .875em;
  color: #c40000;
  margin-top: 1em;
  font-weight: 700;
}
.form-list p.error{
  text-align: left;
  margin-top: .5em;
}
.wpcf7 form .wpcf7-response-output{
  text-align: center;
  line-height: 1.4em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  border: none!important;
}
/*check*/

.form-check-wrap{
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-check-wrap > *:not(:last-child){
  width: calc((100% - 20px)/2);
}
.form-check-wrap > *:not(:last-child) ul li{
  padding: 0;
}
.form-check-wrap > *:not(:last-child) ul li > *{
  padding: 1em 0;
}

.form-check-wrap > *:last-child{
  width: 100%;
}

.form-list.check li .input p{
  width: 100%;
  max-width: 100%;
  padding: 0;
  font-size: 1em;
}
.form-list.check  li.fl > *{
  width: calc((100% - 10px)/2);
}
.form-list.check li .f-title{
  width: 10em;
}
.form-list.check li .f-title
.form-list.check li .input{
  width: calc(100% - 10.5em);
}
.form-list.check li:not([class="fl"]) > * + *{
  border-top: 1px solid #ececec;
}
.form-qe p.c-box label {
  display: block;
  padding: 5px 0;
}

.form-btn-wrap{
  justify-content: center;
  margin-top: 35px;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.form-btn-wrap p.att{
  font-size: .8em;
  margin-bottom: 15px;
  color: #af0002;
  line-height: 1.4;
  font-weight: 600;
}
.submt-wrap{
  background: #ff6000;
  width: 360px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 5px 0 #a33d00;
  border-radius: 35px;
}
.submt-wrap::after{
  content: "";
  width: 34px;
  max-width: 9%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 14px;
  background: url("images/icn_arw.svg") no-repeat right center/100%;
}
.submt-wrap input{
  color: #fff;
  font-weight: 700;
  font-size: 1.125em;
  width: 100%;
  padding: 20px 0 20px;
}
.form-btn-wrap .form-back{
  display: block;
  margin-right: auto;
  font-size: 1.125em;
}
.form-btn-wrap .form-back::before{
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid;
  border-color: #000 transparent transparent #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.form-btn-wrap .form-back > *{
  display: block;
  width: 100%;
  padding: .5em .5em .5em 1em;
  font-size: .875em;
  cursor: pointer;
}
.wpcf7-spinner{
  display: none!important;
}
/*レビュー
===============================================*/
.sec-review-blc{
  width: 100%;
  overflow: hidden;
  padding: 100px 0;
}
.sec-review-box{
  -ms-align-items: center;
  align-items: center;
}
.review-total{
  -ms-align-items: flex-end;
  align-items: flex-end;
  justify-content: center;
  background: #fff;
  padding: 40px 50px;
  border-radius: 15px;
  border: 6px solid #dddddd;
  max-width: 100%;
}
.review-total p.text{
  font-size: 2.34375em;
  transform: skewX(-10deg);
  font-weight: 900;
  padding-right: .875em;
}
.review-total .star{
  width: calc(12.75em + 30px);
  padding-left: 10px;
  padding-right: 20px;
}
.review-total p.text::after{
  content: ":";
  position: absolute;
  right: 0;
  top: 50%;
  transform:translateY(-50%);
  padding: 0 5px;
}
.review-total p.num{
  font-size: 3em;
  transform: skewX(-10deg);
  font-weight: 900;
}

.review-list{
  margin-top: 50px;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.review-list > * + *:nth-child(n + 5){
  margin-top: 30px;
}

.reveiw_cat{
  width: calc((100% - 90px)/4);
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.review-head .ev-star{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #262626;
  color: #fff;
  text-align: center;
  padding: .75em;
}

.review-head .ev-star p{
  transform: skewX(-10deg);
}
.review-head .ev-star p span{
  color: #ff8a00;
}
.review-cmnt{
  padding: 25px 15px 35px;
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.review-cmnt p.in-title{
  border-bottom: 1px solid #ff6000;
  font-weight: 900;
  line-height: 1.75;
}
.review-cmnt p.in-text{
  line-height: 1.75;
  text-align: justify;
}
.review-cmnt p.in-text + p.in-title{
  margin-top: .5em;
}


/*料金
======================================*/

.sec-price-blc{
  width: 100%;
  overflow: hidden;
  padding: 75px 0 125px;
}
.sec-price-box{
  max-width: 1040px;
}
.sec-price-box > * + *{
  margin-top: 45px;
}
.price-cat{
  background: url("images/online/price_bk.png")#efefef no-repeat left bottom/100% 50%;
  padding: 30px 40px 15px;
  font-weight: 900;
}
.price-cat .text{
  font-size: 2.25em;
}
.price-cat p.cam{
  font-size: 1.25em;
  margin-top: 15px;
}
.price-cat .price{
  margin-top: 20px;
  
  justify-content: flex-end;
}
.price-cat .price p{
  font-size: 3.5em;
  font-family: "Roboto";
  color: #fff;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-indent: 1.5px;
}
.price-cat .price p::before{
  content: "税込";
  font-size: .5em;
  padding-right: 10px;
  font-family: "Noto Sans JP";
}
.credit-box{
  padding: 30px 30px 50px;
  background: #efefef;
}
.credit-box p.in-title{
  font-size: 1.25em;
  font-weight: 900;
}
.credit-cat{
  margin-top: 25px;
}
.credit-cat .logo{
  width: 195px;
}
.credit-cat .in-text{
  line-height: 1.6;
  width: calc(100% - 195px);
  padding-left: 25px;
}
.credit-cat .in-text span.min{
  display: block;
  font-size: .875em;
}

.title-lineup h3{
  background: #262626;
  color: #fff;
  border-top: 3px solid #ff6000;
  font-size: .875em;
  font-weight: 900;
  padding: .75em 1em;
}
.title-lineup .type{
  font-weight: 900;
  padding: 1em;
}
.results_slider{
  justify-content: center;
}
.results_slider > *{
  padding-bottom: 8px;
}
.result-data{
  background:url("../imgs/wp-price.png") #efefef no-repeat bottom center/100% 60%;
  padding: 15px 15px 5px;
}
.result-data .tag{
  position: absolute;
  width: 46%;
  right: 0;
  bottom: 60%;
  background: #262626;
  color: #fff;
  font-weight: 700;
  font-size: .75em;
  padding: .3em .15em;
  text-align: center;
}
.result-data .c-dot{
  font-size: .75em;
}
.result-data .c-dot p{
  padding-left: 1.25em;
  font-family: 'sans-serif';
}
.result-data .c-dot p + p{
  margin-top: 5px;
}
.result-data .c-dot p::before{
  content: "";
  width: .5em;
  height: .5em;
  border: 2px solid #ff6000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.result-data .in-price{
  justify-content: space-between;
  font-size: 1.25em;
  font-weight: 900;
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.result-data .in-price p.text{
  padding-bottom: 5px;
}
.result-data .in-price p.price{
  color: #fff;
}
.result-data .in-price p.price span{
  font-size: 2.6em;
  font-family: "Roboto";
}

/*学科紹介
================================================*/
.sec-streng-box{
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.sec-streng-box > * + *:nth-child(n + 4){
  margin-top: 30px;
}
article.list-streng{
  width: calc((100% - 60px)/3);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  overflow: hidden;
}
article.list-streng .title-lineup{
  width: 100%;
  background: #000;
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  border-top: 3px solid #ff6000;
  padding: 0.75em 1em;
}
article.list-streng .title-lineup h3{
  background: none;
  border-top: none;
  padding: 0;
}
article.list-streng .title-lineup p{
  color: #fff;
  font-size: .75em;
  padding-right: 1.875em;
  font-weight: 600;
  cursor: pointer;
}
article.list-streng .title-lineup p::before
,article.list-streng .title-lineup p::after{
  content: "";
  width: .875em;
  height: 2px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
article.list-streng .title-lineup p::after{
  transform: translateY(-50%) rotate(90deg);
}
article.list-streng .title-lineup h3 span{
  display: block;
  z-index: 1;
}
article.list-streng .title-lineup::before{
  content: "";
  width: 100%;
  height: 300%;
  background: #292929;
  position: absolute;
  right: -60%;
  bottom: 25%;
  transform: rotate(160deg);
  display: block;
  
}
article.list-streng .m-price{
  background: #fff;
  font-weight: 900;
  justify-content: space-between;
}
article.list-streng .m-price::before{
  display: block;
  content: "";
  width: calc(100% - 10em);
  height: 1px;
  background: #dddddd;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
article.list-streng .m-price > *{
  background: #fff;
  padding: 10px;
}
.equipment-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.65);
  z-index: 5;
  font-size: .875em;
  color: #fff;
  transform: translateY(-100%);
  -webkit-transition: transform .3s;
  -o-transition: transform .3s;
  transition: transform .3s;
}
.equ-open .equipment-box{
  transform: translateY(0);
}
.equipment-box .equ-close{
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  cursor: pointer;
  padding-left: 1.5em;
  padding-right: 1em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  font-size: .93em;
}
.equipment-box .equ-close::before
,.equipment-box .equ-close::after{
  content: "";
  width: 1.125em;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left:0;
  transform: translateY(-50%);
}
.equipment-box .equ-close::before{
  transform: translateY(-50%) rotate(45deg);
}
.equipment-box .equ-close::after{
  transform: translateY(-50%) rotate(-45deg);
}
.equipment-box p.in-title{
  background: #000;
  color: #fff;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  height: 40px;
  padding-left: 1em;
  border-bottom: 1px solid #ff6000;
}
.equipment-box .in-text{
  padding: 20px 15px 60px;
  line-height: 1.6;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  height: calc(100% - 40px);
}

.equipment-box .in-text > * + *{
  margin-top: 5px;
}
.equipment-box .in-text p:first-child{
  font-weight: 600;
  font-size: 1.1em;
}
.equipment-box .in-text p.att{
  margin-top: .5em;
}
.equipment-box .in-text p.att span{
  display: block;
  padding-left: 1em;
  font-size: .875em;
}
.equipment-box .in-text p.att span::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

/*CTA*
================================================*/

.sec-cta-blc{
  background: url("images/online/wp_carbon_wide.png") no-repeat center/cover;
}
.sec-cta-box {
  color: #fff;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  padding-top: 47px;
  padding-bottom: 47px;
  padding-left: 20px;
  padding-right: 20px;
}
.sec-cta-box .cta-text{
  line-height: 1.6;
  font-size: 1.875em;
  font-weight: 700;
}
.sec-cta-box .btn-wrap{
  width: 100%;
  justify-content: center;
  margin-top: 30px;
}
.sec-cta-box .btn-wrap a{
  display: block;
  width: 360px;
  max-width: 100%;
  background: #ff6000;
  box-shadow: 0 5px 0 #a33d00;
  border-radius: 35px;
  font-weight: 700;
  font-size: 1.125em;
  padding: 20px 0 20px;
}
.sec-cta-box .btn-wrap a::after{
  content: "";
  width: 34px;
  max-width: 9%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 14px;
  background: url("images/icn_arw.svg") no-repeat right center/100%;
  
}

/*高く買い取れる理由
================================================*/

.sec-reason-blc{
  padding-top: 80px;
  padding-bottom: 120px;
}
.sec-reason-box{
  max-width: 1070px;
  justify-content: space-between;
}
.sec-reason-box > *{
  width: calc((100% - 70px)/3);
  -ms-align-items: center;
  align-items: center;
}
.reason_cat .thumb{
  width: 73%;
}
.reason_cat .thumb .num{
  font-family: "Roboto";
  font-weight: 900;
  color: #fff;
  background: #ff6000;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 1.666em;
  height: 1.666em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 1.875em;
}
.reason_cat h3{
  font-size: 1.24em;
  font-weight: 900;
  /*font-style: italic;*/
  transform: skewX(-10deg);
  text-align: center;
  padding: 1em 0;
}
.reason_cat p.in-text{
  line-height: 1.75;
  text-align: justify;
}
.reason_cat p.in-text span.min{
  font-size: .75em;
}



/*買取の流れ
================================================*/

.sec-step-box{
  -ms-align-items: center;
  align-items: center;
}
.sec-step-box > * + *{
  margin-top: 10px;
}
.step_cat{
  background: #fff;
  width: 906px;
  max-width: 100%;
  padding: 25px 50px;
  -ms-align-items: center;
  align-items: center;
}
.step_cat .num{
  width: 4.5625em;
  height: 4.5625em;
  border-radius: 50%;
  background: #ff6000;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
}
.step_cat .num span{
  font-size: 3em;
  color: #fff;
  transform: skewX(-10deg);
  font-family: "Roboto";
  font-weight: 600;
}
.step_cat .in-cmnt{
  width: calc(100% - 4.5625em);
  padding-left: 30px;
}
.step_cat .in-cmnt h3{
  font-size: 1.875em;
  font-weight: 900;
  transform: skewX(-10deg);
}
.step_cat .in-cmnt p.in-text{
  line-height: 1.6;
  margin-top: .5em;
}


/*動画埋め込み
=================================================*/
.sec-movie-blc{
  padding-top: 80px;
  padding-bottom: 100px;
  background: url( "images/online/wp_movie.png") repeat center/18px;
  color: #fff;
}
.sec-movie-blc p.top-text{
  margin-top: 45px;
  line-height: 1.75;
}
.sec-movie-box{
  margin-top: 35px;
  max-width: 876px;
}
.sec-movie-box h3{
  font-size: 1.71em;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  transform: skew(-10deg);
  padding: 10px;
  background: #000;
}
.movie-wrap{
  margin-top: 30px;
}
.sec-movie-box .movie-wrap + h3{
  margin-top: 50px;
}
/*player*/
.modal {
  background: rgba(0,0,0,.85);
  position: fixed;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.vdo-body {
  width: 90%;
  max-width: 900px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.video-thumb{
  overflow: hidden;
  width: 100%;
}
.vdo-body::before
,.video-thumb::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}
.vdo-base{
  position: unset;
}
.vdo-body iframe
,.video-thumb p{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.video-thumb p img{
  object-fit: cover;
  height: 100%;
}
.video-thumb p::after{
  content: "";
  width: 80px;
  height: 80px;
  background: url("images/online/icn_play.png") no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.modal a.close-modal {
  background-color: #000;
  border-radius: 50%;
  display: block;
  width: 45px;
  height: 45px;
  padding: 30px 30px 0 0;
  overflow: hidden;
  position: absolute;
  top: 25px;
  right: 25px;
}
.modal a.close-modal::before,
.modal a.close-modal::after {
  background-color: #fff;
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.modal a.close-modal::before {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.modal a.close-modal::after {
  transform: translate(-50%,-50%) rotate(45deg);
}

/*last-form*/
.sec-form-blc.btm-form{
  padding-top: 100px;
  padding-bottom: 100px;
}


.page-under-blc{
  background: #fff;
  margin-top: 75px;
  padding: 0;
  width: calc(100% - 40px);
  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
  -ms-align-items: center;
  align-items: center;
}
.page-under-title{
 background: url( "images/online/wp_carbon.jpg")no-repeat #000 center/auto 100%;
  padding: 12px 0 16px;
  width: 100%;
}
.page-under-title h2{
  color: #ff6000;
  font-weight: 900;
  font-size: 1.875em;
  text-align: center;
  transform: skew(-10deg);
  line-height: 1.2;
}
.page-under-box{
  width: 100%;
  max-width: 968px;
  padding: 75px 20px 110px;
}

/*FOOTER
================================================*/

footer{
  background: #262626;
  color: #fff;
  font-size: .75em;
}
footer p.copy{
  background: #000;
  padding: 1.5em 1em;
  text-align: center;
  font-family: "sans-serif";
}
.foot_inner{
  padding-top: 100px;
  padding-bottom: 90px;
  
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}
.foot-logo{
  -ms-align-items: center;
  align-items: center;
}
.foot-logo .logo{
  width: 280px;
  max-width: 100%;
}
.foot-logo .text{
  margin-left: 3.5em;
  transform: translateY(10px);
}
.foot-nav a{
  display: block;
  padding: 1em 2em;
}
.foot-nav  a + a::before{
  content: "";
  width: 1px;
  height: 1em;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); 
}

/*UNDER
===========================================*/
body.page-child #hum-menu{
  display: none;
}
body.page-child #container.under{
  background: #efefef;
}
body.page-child  main{
  margin-top: 50px;
  padding-bottom: 92px;
}
h2.page-title{
  font-size: 2em;
  text-align: center;
}
.page-thanks-blc{
  -ms-align-items: center;
  align-items: center;
}
.page-thanks-blc p{
  line-height: 1.75;
}
.page-thanks-blc p.top-text{
  font-size: 1.5em;
  text-align: center;
  font-weight: 700;
}
.page-thanks-blc p span{
  color: #A00002;
  font-weight: 600;
}
.page-thanks-blc > * + *{
  margin-top: 40px;
}
.btn-wrap.bk_home{
  width: 100%;
  justify-content: center;
}
.btn-wrap.bk_home a{
  display: block;
  width: 360px;
  max-width: 100%;
  background: #ff6000;
  box-shadow: 0 5px 0 #a33d00;
  border-radius: 35px;
  font-weight: 700;
  font-size: 1.125em;
  padding: 20px 0 20px;
  color: #fff;
  text-align: center;
  
}
.btn-wrap.bk_home a::after{
  content: "";
    width: 34px;
    max-width: 9%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14px;
    background: url( "images/icn_arw.svg") no-repeat right center/100%;
  transform: scale(-1,1)
}