@charset "UTF-8";
/* CSS Document */

/* ---- 共通 -----*/
.Header__inner{
  max-width: 100rem;
  margin: 0 auto;
}
.Header__content{
  grid-template-columns:154px 1fr;
}
.Header__layout{
  background-color: #fff;
  padding: 0 25px;
}
.Header__logo{
  width: 142px;
  padding: 6px 0;
}
.Header__content p{
  font-size: 1.2rem;
}
.inner{
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.contents_wrap.yellow{
  background-color: #FCF7DB;
}
.contents_wrap.orange{
  background-color: #F99427;
}
.hide-pc{
  display: none;
}
.hide-tab{
  display: none;
}
.hide-sp{
  display: block;
}

/* ---- 見出し -----*/
.headding_a{
  color:#07A32B;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 4rem;
  padding-top: 6rem;
  padding-bottom: 2rem;
  position: relative;
}
.headding_a::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7rem;
  height: .4rem;
  background-color: #07A32B;
}
.headding_a span{
  width: 12rem;
  margin: 0 auto 2rem;
  display: block;
  background-color: #fff;
  color: #07A32B;
  font-size: 2.4rem;
  text-align: center;
  border: solid 2px #07A32B;
  border-radius: 6px;
}
.read_txt{
  text-align: center;
}
.headding_b{
  width: 100%;
  max-width: 55rem;
  margin: 2rem auto 0;
  display: flex;
  justify-content: center;
}
.headding_b .img{
  width: 100%;
  max-width: 16rem;
}
.headding_b .txt{
  align-self:flex-end;
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.headding_b .txt::before{
  content: "";
  position: absolute;
  top: -1.5rem;
  right: -3.5rem;
  width: 3.4rem;
  height: 3rem;
  background-image: url("/oos/adv/image/tmp_257-2/tmp_icon1.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.headding_c{
  color: #07A32B;
  text-align: center;
  font-weight: bold;
  font-size: 2.5rem;
  padding-top: 5rem;
  padding-bottom: 4rem;
}
.headding_c span > span{
  font-size: 3.7rem;
}
.headding_c span.fs4{
  font-size: 3.5rem;
}
.headding_c span.line{
  position: relative;
}
.headding_c span.line::before, .headding_c span.line::after{
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  border-bottom: solid 2px #07A32B;
}
.headding_c span.line::after{
  bottom: -20px;
}
.headding_d {
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 4rem;
  color: #07A32B;
}
.headding_d span {
  position: relative;
  display: inline-block;
}
.headding_d span::before, .headding_d span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4rem;
  width: 2px;
  height: 100%;
  transform: translateY(-50%) rotate(-23deg);
  background-color: #07A32B;
}
.headding_d span::after {
  left: initial;
  right: -4rem;
  transform: translateY(-50%) rotate(23deg);
}
/* ---- MV -----*/
.mainVisual{
  background-image: url("/oos/adv/image/tmp_257-2/tmp_mv_bg.jpg");
  background-size: cover;
}
.mainVisual h1{
  width: 100%;
  max-width: 111rem;
  margin: 0 auto;
}

/* ---- nav -----*/
.dvt_nav{
  display: flex;
  justify-content: center;
  list-style: none;
  margin-bottom: 5rem;
}
.dvt_nav li{
  width: calc((100% - 4rem) / 3);
  margin-right: 2rem;
}
.dvt_nav li:last-child{
  margin-right: 0;
}
.dvt_nav a{
  display: block;
  background-color: #F99427;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  padding: 1.5rem 0;
  border-radius: 6px;
}
.dvt_nav a.arrow{
  position: relative;
}
.dvt_nav a.arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 8px solid #fff;
  border-bottom: 0;
}

/* ---- シーン -----*/
.scene_wrap{
  padding-top: 2rem;
  padding-bottom: 6rem;
}
.scene_layout{
  width: 100%;
  max-width: 89rem;
  background-color: #fff;
  border-radius: 1.8rem;
  margin: 0 auto;
  padding: 3.5rem 6rem 3.5rem 4rem;
  margin-top: 2rem;
}
.scene_layout a, .advice_layout a, #value a{
 display: block;
 width: 100%;
 max-width:39.5rem; 
 margin: 0 auto;
 color: #fff;
 background-color: #F99427;
 border-radius: 3rem;
 text-align: center;
 font-size: 2rem;
 font-weight: bold;
 text-decoration: none;
 padding: 1.5rem 0;
}
#value a{
 width: 100%;
 max-width:43rem; 
}
.scene_layout a img, .advice_layout a img, #value a img{
  display: inline-block;
  margin: 0 .8rem;
}
.scene_layout a.arrow, .scene_layout a.arrow2,  .advice_layout a.arrow, #value a.arrow{
  position: relative;
}
.scene_layout a.arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 12px solid #fff;
  border-bottom: 0;
}
.scene_layout a.arrow2::before, .advice_layout a.arrow::before, #value a.arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  border-right: 0;
}
.scene_item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.scene_txt{
  width: 62%;
}
.scene_txt p{
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 2rem;
}
.scene_img{
  width: 28%;
  align-self: center;
}
.scene_txt span{
  display: block;
  font-size: 1.3rem;
  margin-top: 1rem;
}

/* ---- アドバイス -----*/
.advice_layout{
  width: 100%;
  max-width: 89rem;
  margin: 0 auto 6rem;
  border: solid 3px #07A32B;
  border-radius: 2.8rem;
  padding: 5rem 6rem 4rem;
}
.advice_item{
  display: flex;
  justify-content: space-around;
  margin-bottom: 3rem;
}
.advice_txt{
  width: 53%;
}
.advice_txt img{
  width: 8rem;
  margin: 0 auto 1.5rem;
}
.advice_txt p{
  text-align: center;
  color: #07A32B;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.advice_img{
  width: 33%;
}

/* ---- voice -----*/
.contents_wrap.yellow.voice{
  padding: 5rem 0 6rem;
}
.voice_layout{
  width: 100%;
  max-width: 89rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.voice_item{
  width: calc((100% - 4rem )/ 2);
  margin-right: 4rem;
}
.voice_item:last-child{
  margin-right: 0;
}
.voice_item div.ttl{
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  display: flex;
}
.voice_item div img{
  width: 4.7rem;
  display: inline-block;
  margin-right: 1rem;
  vertical-align: middle;
}
.voice_item div span{
  flex: 1;
  align-self: center;
  line-height: 1.2;
}
.voice_list{
  border: solid 3px #07A32B;
  background-color: #fff;
  list-style: none;
  border-radius: 1rem;
}
.voice_list li{
  border-bottom: solid 1px #ccc;
  padding: 1rem 1rem 1rem 1.2rem;
  display: flex;
}
.voice_list li:nth-child(-n+3) .txt{
  font-size: 1.8rem;
  font-weight: bold;
}
.voice_list li:nth-child(n+4) .txt{
  font-size: 1.4rem;
  font-weight: normal;
}
.voice_list li .txt span{
  font-size: 1.4rem;
}
.voice_list li.orange{
  color: #FF6600;
}
.voice_list .nmb{
  font-weight: bold;
  font-size: 1.4rem;
  margin-right: 1rem;
  text-align: center;
  align-self: center;
}
.voice_list li:nth-child(1) .nmb, .voice_list li:nth-child(2) .nmb, .voice_list li:nth-child(3) .nmb{
  width: 3.7rem;
  height: 3.6rem;
  background-image: url("/oos/adv/image/tmp_257-2/tmp_icon_star.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.2;
  margin-bottom: 0;
  z-index: 0;
}
.voice_list li:nth-child(n+4) .nmb{
  width: auto;
  height: auto;
  margin-left: 1.3rem;
  margin-right: 2.5rem;
  margin-bottom: 0;
}
.voice_list li:nth-child(2) .nmb{
  background-position: 100% 50%;
}
.voice_list li:nth-child(3) .nmb{
  background-position:  100% 100%;
}
.voice_list li .txt{
  align-self: center;
  margin-bottom: 0;
  line-height: 1.4;
  flex: 1;
}

@media screen and (max-width: 960px) {
  .step_txt.step2 br{
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .voice_item{
  width: calc((100% - 2rem )/ 2);
  margin-right: 2rem;
  }
  .voice_item div img{
  width: 4rem;
  }
}
/* ---- value -----*/
#value{
  margin-bottom: 6rem;
}
.value_layout{
  width: 100%;
  max-width: 84rem;
  margin: 6rem auto 0;
  display: flex;
  justify-content: center;
}

.value_item{
  padding: 0 7rem;
  margin-bottom: 2rem;
  position: relative;
}
.value_item::before{
  content: "";
  background-image: linear-gradient(to bottom, #07A32B, #07A32B 3px, transparent 3px, transparent 10px);
  background-size: 3px 10px;
  background-repeat: repeat-Y;
  background-position:left bottom;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  height: 96%;
}
.value_item:first-child::before{
  display: none;
}


/* ---- jcb -----*/
.advice_layout.jcb{
  margin: 6rem auto 0;
  padding: 3.5rem 0;
}
.advice_layout.jcb .advice_item{
  justify-content: center;
}
.advice_layout.jcb h2{
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3rem;
}
.advice_layout.jcb .advice_img{
  max-width: 12rem;
  margin-right: 3.6rem;
}
.advice_layout.jcb .advice_txt{
  color: #333;
  font-size: 1.6rem;
  text-align: left;
}
/* ---- 流れ -----*/
#how .ttl{
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 3rem;
}
.step_layout{
  padding-top: 5rem;
  display: flex;
  justify-content: center;
}
.step_item{
  width: calc((100% - 30px) / 3);
  margin-bottom: 0;
  background-color: #fff;
  border:solid 3px #07A32B;
  position: relative;
  margin-right: 3rem;
  padding: 0 1.5rem;
}
.step_item:last-child{
  margin-right: 0;
}
.step_item::before, .step_item::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #07A32B;
  border-radius: 50%;
  top: 50%;
  right: -1.4rem;
  transform: translateY(-50%);
}
.step_item::after{
  right: -2.6rem;
}
.step_item:last-child::before, .step_item:last-child::after{
  display: none;
}
.step_ttl{
  width: 17rem;
  background-color: #07A32B;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  border-radius: 2.6rem;
  padding: .6rem 0;
  margin: -2.5rem auto 0;
  text-align: center;
}
.step_item_inner{
padding-top: 2rem;
}
.step_txt{
  margin: 0 auto 4rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: left;
}
.step_img.step1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto;
}
.step_img.step2, .step_img.step3{
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}
.step_wrap{
  padding-bottom: 0;
  position: relative;
  padding-top: .1rem;
  margin-top: 3.5rem;
}
.step_wrap::before{
  content: "";
  background-image: linear-gradient(to right, #07A32B, #07A32B 3px, transparent 3px, transparent 10px);
  background-size: 10px 3px;
  background-repeat: repeat-X;
  background-position:left top;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  height: 96%;
}
.step_wrap:last-child{
  padding-bottom: 6rem;
}
#step_store.step_wrap{
  margin-top: 0;
}
#step_store.step_wrap::before{
  display: none;
}

.step_txt.step2-1{
  margin-bottom: 1rem;
}
.step_txt.step2-2{
  text-align: center;
}
#step_store .step_txt.step2{
  text-align: center;
}
.step_txt.step2-2 span{
  font-weight: normal;
  font-size: 1.3rem;
  display: block;
  text-align: left;
  margin-top: 1rem;
}
.step_img.step1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 3rem;
}
#step_store .step_img.step1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 0;
}
.step_img.step2{
  width: 100%;
  max-width: 16rem;
  margin: 0 auto 3rem;
}
#step_store .step_img.step2{
  width: 100%;
  max-width: 22rem;
  margin: 0 auto 3rem;
}
.step_img.step3{
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}
.step_img.step2-1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 3rem;
}
.step_img.step2-2{
  width: 100%;
  max-width: 22rem;
  margin: 4rem auto 3rem;
}
.step_img.step2-3{
  width: 100%;
  max-width: 22rem;
  margin: 7rem auto 3rem;
}

/* ---- QA -----*/
.faq_layout{
  border-bottom: solid 1px #ccc;
  padding-bottom: 2rem;
}
.faq_q_item{
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-top: 2rem;
}
.faq_q_item .arrow{
  position: absolute;
  top: 0;
  right: 0;
  width: 2.6rem;
  height: 2.6rem;
  border: solid 2px #F99427;
  border-radius: 50%;
}
.faq_q_item .txt{
  margin-right: 4rem;
  flex: 1;
}
.faq_q_item .arrow::before, .faq_q_item .arrow::after{
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #F99427;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq_q_item .arrow:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq_q_item .arrow.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq_q_item .q_icon{
  width: 2.6rem;
  height: 2.6rem;
  background-image: url("/oos/adv/image/tmp_257-2/tmp_icon_qa.svg");
  background-repeat: no-repeat;
  background-size: 5.3rem 2.6rem;
  background-position: center left;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;  
}
.faq_a_item{
  background-color: #FCF9DD;
  padding: 2rem;
  margin-top: 2rem;
  display: none;
}
.faq_inner{
  display: flex;
  justify-content: flex-start;
}
.faq_a_item .a_icon{
  width: 2.6rem;
  height: 2.6rem;
  background-image: url("/oos/adv/image/tmp_257-2/tmp_icon_qa.svg");
  background-repeat: no-repeat;
  background-size: 5.3rem 2.6rem;
  background-position: center right;
  display: block;
  vertical-align: middle;
  margin-right: 1rem;  
  margin-top: .5rem;
}
.faq_a_item div{
  flex: 1;
}
.faq_a_item div p{
  margin-top: .5rem;
}
.faq_a_item div ul, .faq_a_item div ul.numer{
  list-style: none;
  padding: 0;
}
.faq_a_item div ul li{
  margin-top: .5rem;
  padding-left: 0;
}
.faq_a_item div ul li:last-child, .faq_a_item div ul.numer li span:last-child{
  margin-bottom: 0;
}

.faq_a_item div ul.numer li::before{
  content: none;
}

.faq_a_item div ul.numer li{
  text-indent: -2rem;
  padding-left: 2rem;
}
.faq_a_item div ul.numer li span{
  margin-top: .5rem;
  padding-left: .5rem;
  margin-right: 1.2rem;
  position: relative;
  font-size: 1.4rem;
}
.faq_a_item div ul.numer li span::before{
  content: "";
  position: absolute;
  top: .2rem;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: inherit;
  border:solid 1px #333;
}
.faq_a_item div p.mt20{
  margin-top: 2rem;
}
.faq_a_item div p img, .faq_a_item div ul li img{
  display: inline-block;
  margin: 0 .5rem;
}

/* ---- コンバージョン -----*/
.conversion_wrap{
  background-color: #E5F5E9;
  padding: 4rem 0 6rem;
}
.conversion_wrap.fst{
  padding: 4rem 0 4rem;
}
.conversion_layout{
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
}
.conversion_item {
  width: 100%;
  padding: 0 1rem 2rem;
}
.conversion_btn a {
  width: 100%;
  max-width: 44rem;
  min-height: 7rem;
  margin: 0 auto;
  padding-top: 1.6rem;
  padding: 1.5rem 0;
  background-color: #FF6600;
  border-radius: 4.5rem;
  color: #fff;
  line-height: 1.2;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
}
.conversion_btn.white a {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  border: solid 1px #ccc;
}
.conversion_btn a img {
  margin: 0 .5rem;
}
.conversion_btn a img.blank {
  display: inline;
}
.conversion_wrap p{
  text-align: center;
}
.card_img{
  width: 100%;
  max-width: 37rem;
  margin: 0 auto;
}
.conversion_ttl {
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 4rem;
}
.conversion_ttl span {
  position: relative;
  display: inline-block;
}
.conversion_ttl span::before, .conversion_ttl span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4rem;
  width: 2px;
  height: 90%;
  transform: translateY(-50%) rotate(-23deg);
  background-color: #333;
}
.conversion_ttl span::after {
  left: initial;
  right: -4rem;
  transform: translateY(-50%) rotate(23deg);
}
.conversion_layout_card{
  width: 100%;
  max-width: 90rem;
  margin: 2rem auto 0;
  display: flex;
  justify-content: center;
}
.conversion_layout_card > div{
  width: 36%;
}
.conversion_layout_card > div img{
  width:28rem;
  margin: 0 auto;
}
.conversion_layout_card > p{
  width:61%;
  text-align: left;
  align-self: center;
  line-height: 1.6;
  margin-left: 3%;
}

/*================================================
* Smartphone Style
================================================*/

@media screen and (max-width: 768px) {
/* ---- 共通 -----*/
.Header__layout{
  padding: 0;
}
.inner{
  padding: 0 2rem;
}
.hide-pc{
  display: block;
}
.hide-tab{
  display: block;
}
.hide-sp{
  display: none;
}
.pc-only{
  display: none;
}
.tab-only{
  display: block;
}
/* ---- 見出し -----*/
.headding_a{
  font-size: 2.4rem;
  margin-bottom: 3rem;
}
.headding_a span{
  margin-bottom: .8rem;
}
.read_txt{
  text-align: left;
  font-size: 1.6rem;
}
.headding_b .img{
  max-width: 13rem;
}
.headding_b .txt{
  font-size: 1.6rem;
  text-align: left;
}
.headding_b .txt::before{
  top: 0;
  right: 0;
}
.headding_c{
  font-size: 2rem;
  padding-top: 4rem;
}
.headding_c span > span{
  font-size: 3rem;
}
.headding_c span.fs4{
  font-size: 2rem;
}

/* ---- nav -----*/
.dvt_nav{
  margin-bottom: 3rem;
}
.dvt_nav li{
  width: calc((100% - 1.8rem) / 3);
  margin-right: .9rem;
}
.dvt_nav a{
  font-size: 1.4rem;
  padding: 1rem 0 2rem;
  line-height: 1.4;
}
.dvt_nav a.arrow::before{
  content: "";
  position: absolute;
  top: initial;
  right: initial;
  bottom: .7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 8px solid #fff;
  border-bottom: 0;
}
/* ---- シーン -----*/
.scene_wrap{
  padding-top: 0;
  padding-bottom: 4rem;
}
.scene_layout{
  padding:2.2rem;
}

.scene_layout a, .advice_layout a, #value a{
 width: 100%;
 font-size: 1.6rem;
 padding: 1rem 0;
}
.scene_layout a img, .advice_layout a img, #value a img{
  width: 15px;
  display: inline-block;
  margin: 0 .8rem 0 .4rem;
}
.advice_layout a{
 font-size: 1.5rem;
}
.scene_layout a.arrow::before{
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 10px solid #fff;
}
.scene_layout a.arrow2::before, .advice_layout a.arrow::before, #value a.arrow::before{
  right: 1.2rem;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
}
.scene_item{
  display: block;
}
.scene_txt{
  width: 100%;
  font-size: 1.6rem;
}
.scene_txt p{
  margin-bottom: 1.5rem;
}
.scene_img{
  width: 80%;
  margin: 2rem auto 1rem;
}
  
/* ---- アドバイス -----*/
.advice_layout{
  padding: 3rem 0;
}
.advice_item{
  display: block;
  padding: 0 3.5rem;
}
.advice_txt{
  width: 100%;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}
.advice_txt img{
  width: 8rem;
  margin: 0 auto 1.5rem;
}
.advice_txt p{
  font-size: 2rem;
}
.advice_img{
  width: 90%;
  margin: 0 auto;
}
  
/* ---- voice -----*/
.contents_wrap.yellow.voice{
  padding: 5rem 0 4rem;
}
.voice_layout{
  display: block;
}
.voice_item{
  width: 100%;
  max-width: 64rem;
  margin: 0 auto 4rem;
}
.voice_item:last-child{
  margin-right: auto;  
  margin-bottom: 2rem;
}

/* ---- value -----*/
.value_layout{
  margin: 1rem auto 0;
}
.value_item{
  padding: 2rem 3rem 3rem;
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: center;
}
.value_item img{
  margin: 0 auto;
}
.value_item::before{
  height: 90%;
}
#value a{
  width: 90%;
  margin: 0 auto;
}
  
/* ---- jcb -----*/
.advice_layout.jcb{
  padding: 3rem 0 ;
  margin-bottom: 0;
}
.advice_layout.jcb .advice_item{
  padding: 0 3.6rem 0;
}
.advice_layout.jcb h2{
  font-size: 2rem;
  margin-bottom: 2rem;
}
.advice_layout.jcb .advice_img{
  max-width: 12rem;
  margin-right: 0;
  margin: 0 auto 2rem;
}
.advice_layout a{
  width: 90%;
  max-width: 37rem;
  margin: 0 auto;
}

/* ---- ポイント -----*/
.contents_wrap.orange .inner{
  padding: 0;
  padding-bottom: 5rem;
}
.point_layout{
  padding: 0 1rem 5rem;  
}
  
/* ---- 流れ -----*/
#how .ttl{
  text-align: center;
}
.step_layout{
  padding-top: 4rem;
  display: block;
}
.step_wrap{
  padding-bottom: 0;  
}
.step_wrap:last-child{
  padding-bottom: .1rem;  
}
.step_item{
  width: 100%;
  margin-bottom: 7rem;
}
#step_store .step_item:last-child{
    margin-bottom: 5rem;
}
.step_item::before, .step_item::after{
  top: inherit;
  bottom: -2rem;
  left: 50%;
  right: initial;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
}
.step_item::after{
  right: initial;
  bottom: -4rem;
}
.step_item_inner{
  margin: 2rem 0 0;
padding-top: 0;
}
.step_txt{
  margin: 0 auto 2rem;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
}

.step_txt.step2-2{
  text-align: center;
  margin: 0 auto 1rem;
}
.step_txt.step2-3{
  text-align: center;
}
.step_txt.step2-2 span{
  font-weight: normal;
  font-size: 1.3rem;
  display: block;
  text-align: left;
  margin-top: 1rem;
}
.step_img.step1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 3rem;
}
.step_img.step2{
  width: 100%;
  max-width: 16rem;
  margin: 0 auto 3rem;
}
.step_img.step3{
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}
.step_img.step2-1{
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 3rem;
}
.step_img.step2-2{
  margin: 0 auto 2rem;
}
.step_img.step2-3{
  margin: 0 auto ;
}
/* ---- faq -----*/
.faq_layout{
  padding-bottom: 1rem;
}
.faq_q_item{
  margin-top: 1rem;
}
.faq_q_item .arrow{
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
}
.faq_q_item .txt{
  margin-right: 3.5rem;
}
.faq_a_item{
  padding: 1rem;
  margin-top: 1.5rem;
}
/* ---- コンバージョン -----*/
.conversion_wrap{
  padding: 3rem 0 4rem;
}
.conversion_wrap.fst{
  padding: .1rem 0 3rem;
}
.conversion_layout{
  display: block;
  margin: 0 auto 1rem;

}
.conversion_item {
  width: 100%;
  padding: 1rem 0;
}
.conversion_btn a {
  width: 100%;
  margin: 0 auto;
  font-size: 1.8rem;
}
.conversion_wrap p{
  text-align: left;
}
.card_img{
  width: 85%;
}
.conversion_ttl {
  font-size: 1.8rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.conversion_layout_card{
  width: 100%;
  margin: 2rem auto 0;
  display: block;
  justify-content: center;
}
.conversion_layout_card > div{
  width: 100%;
  margin: 0 auto 2.5rem;
}
.conversion_layout_card > div img{
  width:65%;
  margin: 0 auto;
}
.conversion_layout_card > p{
  width:100%;
  margin-left: 0;
}

}

@media screen and (max-width: 640px) {
.hide-tab{
  display: none;
}
.pc-only{
  display: none;
}
.tab-only{
  display: none;
}
/* ---- value -----*/
.value_layout{
  margin: 1rem auto 0;
  display: block;
}
.value_item{
  padding: 4rem 3rem 0;
  margin-bottom: 0;
  text-align: center;
}
.value_item img{
  margin: 0 auto;
}
.value_item::before{
  background-image: linear-gradient(to right, #07A32B, #07A32B 3px, transparent 3px, transparent 10px);
  background-size: 10px 3px;
  background-repeat: repeat-X;
  background-position:left top;
}
#value a{
  width: 94%;
  margin: 0 auto;
  font-size: 1.5rem;
}
 }

@media screen and (max-width: 599px){
  html {
    font-size: calc(100vw/38);
  }
}