/*=========
各ページ設定：プリント方法
=========*/
.howto__movieframe{
  margin: 2em auto;
  max-width: 40em;
}
.howto__caution{
  text-align: center;
  margin-bottom: 0.5em;
}
.howto__caution::before{
  content: "";
  display: inline-block;
  margin: -1em 0.5em -0.5em 0;
  width: 2.5em;
  height: 2.5em;
  background: url(../images/navi/icn_caution.jpg) no-repeat 0 0;
  background-size: contain;
}


@media screen and (min-width:768px){
  .howto__movieframe > .movieframe{
    width: 100%;
    height: 0;
    padding-top: calc(100% / 16 * 9);
  }
}

.howto__caution__list{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 40em;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
.howto__caution__list > li{
  flex-basis: 553px;
  margin: 0.5em;
  padding: 0;
}
.howto__caution__list > li.howto__caution__li--new{
  color: #dd3884;
  font-weight: bold;
  margin-bottom: 2.5em;
}
.howto__caution__list > li.howto__caution__li--old{
  color: #9bc043;
  font-weight: bold;
}
.howto__caution__list > li.howto__caution__li--ng{
  flex-basis: 516px;
}
@media(max-width:40em){
  .howto__caution__list{
    font-size: 0.8em;
  }
}
@media(min-width:40em){
  .howto__caution::before{
    vertical-align: middle;
    margin-top: 0;
  }
}
/* タブ */
.howto_cvs_list{
 display: flex;
 flex-wrap: wrap;
 margin: 1em -0.25em;
 padding: 0;
 list-style: none;
}
@media(min-width:40em){
  .howto_cvs_list--s{
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
  }
}
.howto_cvs_list__li{
 flex-basis: calc(50% - 0.5em);
 height: 17vw;
 margin: 0.25em;
}
.howto_cvs_list__li--seven{
 flex-basis: calc(50% - 0.5em);
}
.howto_cvs_list__li--lawson{
 flex-basis: calc(50% - 0.5em);
}
.howto_cvs_list__li--family{
 flex-basis: calc(50% - 0.5em);
}
.howto_cvs_list__li--ministop{
 flex-basis: calc(35% - 0.5em);
}
.howto_cvs_list__li--seicomart{
 flex-basis: calc(65% - 0.5em);
}
.tabbtn{
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 height: 100%;
 padding-right: 1em;
   border:solid 3px #ddd;
 border-radius: 0.8em;
 line-height: 1;
}
*::-ms-backdrop, .tabbtn{
 display: block;
}
.tabbtn[aria-checked="true"]{
   border-color:#90c31f;
}
.tabbtn::after{
 content: "";
 position: absolute;
 right: 0.25em;
 top: 50%;
 width: 0.5em;
 height: 0.5em;
 border-right: solid 3px #ddd;
 border-bottom: solid 3px #ddd;
 transform: translate(-50%, -50%) translateY( -50%) rotate(45deg);
}
.howto_cvs-lower > .howto_cvs_list > li > .tabbtn::after{
 transform: translate(-50%, -50%) rotate(-135deg);
}
.tabbtn[aria-checked="true"]::after{
 border-color: #90c31f;
}

.tabbtn__inner{
 display: block;
 margin: 0.15rem 0.35rem;
 font-size: 5vw;
}
*::-ms-backdrop, .tabbtn__inner{
 margin-left: auto;
 margin-right: auto;
}
.tabbtn__inner--seven{
 width: 1.7em;
}
.tabbtn__inner--lawson{
 width: 5em;
}
.tabbtn__inner--family{
 width: 6em;
}
.tabbtn__inner--poplar{
 width: 3.5em;
 margin-bottom: 2%;
}
.tabbtn__inner--ministop{
 width: 2.2em;
}
.tabbtn__inner--daily{
 width: 2.7em;
}
.tabbtn__inner--seicomart{
 width: 5em;
}
@media screen and (min-width: 30em) {
 .tabbtn__inner{
   margin-left: 0.5em;
   margin-right: 0.5em;
 }
}
@media screen and (min-width: 35em) {
 .tabbtn__inner{
   font-size: 1.5em;
 }
 .howto_cvs_list__li{
   height: 4em;
 }
}
@media screen and (min-width: 768px) {
 .howto_cvs_list__li{
   flex-grow: 1;
   flex-basis: calc(33.3% - 0.5em);
   height: 6em;
 }
 .tabbtn__inner{
   font-size: 2.5vw;
 }
}
@media screen and (min-width: 67em) {
 .howto_cvs_list{
   flex-wrap: nowrap;
   font-size: 0.9em;
 }
 .howto_cvs_list > li{
   flex-basis: calc(20% - 0.5em);
 }
 .tabbtn{
   padding-left: 0.75em;
 }
 .tabbtn--multiple{
   padding-top: 5%;
   padding-bottom: 5%;
 }
 .tabbtn__inner{
   margin: 0.3rem 0.5rem;
 }
 .tabbtn__inner--poplar{
   margin-bottom: 0.4em;
 }
}
@media screen and (min-width: 1060px) {
 .tabbtn__inner{
   font-size: 1.7em;
 }
}

.tabcts[aria-hidden="true"]{
 display: none;
}
.tabcts.init{
 animation: tab_fadein 0.2s ease-in-out forwards;
}
@keyframes tab_fadein {
 0% {
   display: block;
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

.howto_cvs_hdr{
   font-size:140%;
   color:#90c31f;
}
.howto_cvs_hdr img{
   vertical-align:middle;
   margin-right:5px;
}
.howto_cvs_txts{
   min-height:71px;
   _height:70px;
}
/* 見出し */
.ttl--howtocvs{
   position:relative;
   color:#90c31f;
   background: linear-gradient(
       #fff 0%,
       #ecf5d8 100%
   );
   border:solid 2px #90c31f;
   box-shadow:2px 2px 0 #fff inset,
   -2px -2px 0 #fff inset;
   text-shadow:1px 1px #fff,
   -1px -1px #fff;
   padding:0.5em 15px;
   font-size:1rem;
}
.ttl--howtocvs:after{
   content:"";
   display:block;
   position:absolute;
   left:2em;
   bottom:-6px;
   width:9px;
   height:9px;
   background:url(../images/common/fkds_green.svg) no-repeat 50% 50%;
   background-size:contain;
}
@media screen and (min-width: 768px) {
   .ttl--howtocvs{
       border-width:3px;
       box-shadow:0 0 0 3px #fff inset;
       padding:0.4em 15px;
       font-size:1.6rem;
   }
   .ttl--howtocvs:after{
       bottom:-11px;
       width:15px;
       height:15px;
   }
}

/* 手順リスト */
.cvssteplist--l > li{
 margin: 2em 0;
}
.cvssteplist--l > li:before{
   background:#90c31f;
   margin-left: 0;
}
.cvssteplist{
 list-style: none;
 padding: 0;
}
.cvssteplist .stepttl{
 font-size: 1.3em;
}
.cvssteplist__hdr{
 display: inline;
 color:#90c31f;
}
.cvssteplist__step{
 display:grid;
 grid-template-columns: 50% auto;
 margin: 2em 0;
}
.cvssteplist__step__img{
 margin-right:15px;
}

.cvssteplist__step__txt{
 grid-column: 1 / 3;
}
.cvssteplist__step__subtxt{
 grid-column: 1 / 3;
}
.cvssteplist__step__img--btn{
 width: 13em;
}
.cvssteplist__step__img--btn--s{
 width: 7em;
}
.cvssteplist__step__img > img{
 width: 100%;
}

@media screen and (min-width: 768px) {
   .cvssteplist__hdr,
   .cvssteplist--l > li:before,
   .cvssteplist--l > li:after{
     font-size:1.4em;
   }
   .cvssteplist--navi{
     margin-left: 40px;
   }
   .cvssteplist__step{
     display:-ms-grid;
     -ms-grid-columns: 50% auto;
     grid-template-rows: auto 1fr;
     grid-template-columns: 50% auto;
     max-width: 60em;
     margin-left: auto;
     margin-right: auto;
   }
   .cvssteplist__step__img{
     -ms-grid-row-span: 3;
     grid-row: 1 / 4;
   }
   .cvssteplist__step__subimg{
     -ms-grid-row: 2;
     -ms-grid-column: 2;
     grid-row: 2 / 3;
   }
   .cvssteplist__step__subtxt{
     -ms-grid-row: 2;
     -ms-grid-column: 2;
     grid-column: 2 / 3;
   }
   .cvssteplist__step__img--btn{
     width: 16em;
   }
   .cvssteplist__step__img--btn--s{
     width: 11em;
   }
   .cvssteplist__step__txt{
     -ms-grid-row: 1;
     -ms-grid-column: 2;
     grid-row: 1 / 2;
     grid-column: 2 / 3;
   }
}

/*手順リストミニ：簡単ナビで使用*/
.cvssteplist__step__img--s > img{
 width: 100%;
}
.cvssteplist--s {
 margin: 2em 0;
}
.cvssteplist--s > li{
 position: relative;
 margin: 0 auto 1em;
 padding-bottom: 2em;
}
.cvssteplist--s > li::before{
 content: "";
 width: 13px;
 height: 13px;
 transform: rotate(45deg);
 margin-left: -8px;
 padding: 0;
 background: none;
 border-right:solid 4px #90c31f;
 border-bottom:solid 4px #90c31f;
 border-radius: 0;
 position: absolute;
 bottom: 5px;
 left:50%;
}
.cvssteplist--s > li:after{
 content: "";
 width: 13px;
 height: 13px;
 transform: rotate(45deg);
 margin-left: -8px;
 background: none;
 border-right:solid 4px #90c31f;
 border-bottom:solid 4px #90c31f;
 border-radius: 0;
 position: absolute;
 bottom: 20px;
 left:50%;
}

.cvssteplist--s > li:last-child{
 padding-bottom: 0;
}
.cvssteplist--s > li:last-of-type:before,
.cvssteplist--s > li:last-of-type:after{
 display: none;
}

.howtomini_mark{
 background: #c7e18f;
}
@media screen and (min-width: 425px) {
 .cvssteplist--s{
   display:flex;
   flex-wrap: wrap;
   margin: 0 -30px;
 }
 .cvssteplist--s > li{
   flex: 0 0 50%;
   margin: 1em 0;
   padding:0 30px;
 }
 .ie11 .cvssteplist--s > li{
   flex-basis: calc(50% - 60px);
 }
 .cvssteplist--s > li:nth-of-type(2n)::before,
 .cvssteplist--s > li:nth-of-type(2n)::after{
   display: none;
 }
 .cvssteplist--s > li:before{
   left: auto;
   right: -5px;
   bottom: 50%;
   margin-bottom: 10px;
   transform: rotate(-45deg);
 }
 .cvssteplist > li:after{
   left: auto;
   right: -15px;
   bottom: 50%;
   margin-bottom: 10px;
   transform: rotate(-45deg);
 }
 .cvssteplist__step__img--s{
   margin-top: 0;
 }
}
@media screen and (min-width: 768px) {
 .cvssteplist--s{
   max-width: calc(60em + 60px);
   margin-left: auto;
   margin-right: auto;
   margin-bottom: -2em;
 }
 .cvssteplist--s > li:before{
   width: 20px;
   height: 20px;
   border-width: 5px;
   right: -2px;
 }
 .cvssteplist--s > li:after{
   width: 20px;
   height: 20px;
   border-width: 5px;
 }
}