@charset "UTF-8";
:root{
  --mainColor:#2E6D9E;
  --bgGRY:#EBEBEB;
  --GRN:#3c8700;
  --GRY:#757575;
  --RED:#d50000;
  --boxShadow:0 2px 10px rgba(0,0,0,.2);
  --mainAnime:all .3s ease;
  --hoverAnime:translateY(-5px);
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.noto-sans{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* Header */
header {
  color: white;
  padding:0;
  position: relative;
}
.logo {
  margin:0 auto;
  padding:calc(12px + 1.2em + 3vw) 5vw 3vw;
  text-align:center;
}
.logo img{
  -webkit-filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
  max-width:220px;
}
header .navToggle{
  display:none;
}
#hosuLink{
  position:absolute;
  top:0;right:min(5vw,40px);
}
#hosuLink a{
  position:relative;
  display:block;
  padding:6px 16px;
  border-radius:0 0 10px 10px;
  background-color:#CF3A00;
  color:#FFF;
  text-decoration:none;
  font-weight:bold;
  overflow: hidden;
  font-size:1.2em;
}
#hosuLink a::after{
  display:inline-block;
  transition:var(--mainAnime)
}
#hosuLink a:hover::after {
  transform:translateX(4px)
}
.headMV{
  padding:0 2vw;
}
body.open{
  overflow:hidden;
}
#gNav{
  visibility:hidden;
  position: fixed;
  top:0;right:0;left:0;
  z-index: -1;
  opacity: 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:100%;
  height: 100%;
  text-align:center;
  background-color:var(--bgGRY);
  padding-bottom:52px;
}
body.open #gNav{
  visibility: visible;
  opacity: 1;
  z-index:110;
  animation:fadeUP .6s ease;
}
#gNav ul{
  width:90%;
  margin:auto;
  overflow-y:auto;
}
#gNav ul li a{
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: 1.4rem;
  column-gap: 1.6rem;
  align-self: stretch;
  border-bottom: 1px solid #ccc;
  color:var(--mainColor);
  font-weight:900;
}
#gNav ul li a::after{
  display:inline-block;
  content:"\e907";
  margin-left:.3em;
  transition:var(--mainAnime);
  font-size:.75em;
}
.btn a:hover{
  opacity:1;
  background-color:var(--bgGRY);
  box-shadow:inset var(--boxShadow);
}
#gNav ul li a:hover::after {
  transform:translateX(4px)
}
main{
  background-color:var(--bgGRY);
}
.inner{
  width:90%;
  margin:0 auto;
}
footer{
  padding-bottom:calc(100%*190/750);
  margin-bottom:52px;
  background:url(../parts/bg_footer.svg) no-repeat bottom center/100% auto;
}

.goTopBtn{
  position:fixed;
  bottom:62px;right:10px;
  z-index: 101;
  max-width:4.5em;
}

.goTopBtn a{
  display:block;
  /* padding:.2em 1em;
  border-radius:100px; */
  border-radius: 16px;
  padding:.3em;
  background-color:var(--GRY);
  color:#FFF;
  text-decoration:none;
  font-size:.78em;
  text-align:center;
  font-weight:bold;
}
.goTopBtn a::after{
  display:none;
}
.goTopBtn a::before{
  display:block;
  content: "\e904";
  margin-right:.5em;
  font-size:.75em;
  transition:var(--mainAnime);
}
.goTopBtn a:hover::before{
  transform:translateY(-4px)
}
#contact{
  width:90%;
  margin:0 auto;
  padding:min(5vw,40px) 0;
  font-style:normal;
}
#contact h2,#contact h3{
  font-size:1em;
}
#contact dl{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:0;
}
#contact dl dt{
  width:4.5em;
}
#contact dl dd{
  width:calc(100% - 4.5em);
}
.footLinks{
  border-top:1px solid var(--GRY);
  margin:0 auto;
  padding:min(2vw,16px) 0 min(5vw,24px);
  text-align:center;
}
.footLinks ul li{
  font-size:.75em;
  display:inline-block;
}
.footLinks ul li:not(:last-of-type)::after{
  content:"|";
  padding:0 .3em 0 .5em;
}
.footLogo{
  text-align:center;
}
.copyright {
  margin-top:.5em;
  font-size:.75em;
}
.bottomNav{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:110;
  background-color:#FFF;
  box-shadow:0 -2px 10px rgba(0,0,0,.2);
}
.bottomNav ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:100%;
}
.botNav01{
  width:60%;
}
.botNav02,.botNav03{
  width:20%;
}
.bottomNav ul li a{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  height:52px;
}
.botNav01 a{
  background-color:#0086bb;
}
.botNav01 a img{
  max-width:none;
  height:48px;
}
.botNav02 a,.botNav03 a{
  padding:.5em;
  background-color:#FFF;
  color:var(--mainColor);
  text-align:center;
}
.botNav02 a span,.botNav03 a span{
  display:block;
  width:100%;
  font-size:.875em;
  font-weight:bold;
}
body.open .botNav03 .icon-spNav-open::before{content: "\e903"}
.bgR,.bgL{
  display:none;
}
#subpage .logo{
  text-align:left;
}
#subpage .logo img{
  max-width:180px;
}
.headPagettl{
  padding:0 min(5vw,40px);
  margin:0 auto;
}
.headPagettl h2{
  color:#222;
}
#subpage main{
  background-color:#FFF;
  border-radius:16px 16px 0 0;
  padding:min(5vw,24px) min(5vw,40px) min(5vw,40px);
}
#topicpath{
  width:100%;
  margin-bottom:min(5vw,24px)
}
#topicpath ul{
  list-style:none;
  padding:0;
  margin:0;
  font-size:.75em;
  /* white-space:nowrap; */
}
#topicpath ul li{
  display:inline-block;
}
#topicpath ul li.home::before{
  margin-right:4px;
}
#topicpath ul li::after{
  display:inline-block;
  content:">";
  margin-left:.5em
}
#topicpath ul li:last-of-type::after{
  display:none;
}
.anchorlink{
  list-style:none;
  padding:0;
  margin:0 -.1em .5em;
}
.anchorlink li{
  display:inline-block;
  margin:.2em .1em
}
.anchorlink li a{
  display:inline-block;
  padding:2px .8em;
  background-color:var(--bgGRY);
  border-radius:100px;
  font-size:.875em;
  color:#222;
  text-decoration:none;
}
.anchorlink li a::after{
  display:inline-block;
  content:"\e905";
  margin-left:.5em;
  transition:var(--mainAnime);
  font-size:.75em;
}
.anchorlink li a:hover::after {
  transform:translateY(4px)
}
.goIndexBtn{
  text-align:right;
}
.goIndexBtn a{
  display:inline-block;
  padding: .2em 2em;
  margin-bottom:1em;
  border-radius: 100px;
  background-color: var(--GRY);
  color: #FFF;
  text-decoration: none;
  font-size: .875em;
  text-align: center;
}
.goIndexBtn a::before{
  display:inline-block;
  content: "\e904";
  margin-right:.5em;
  font-size:.75em;
  transition:var(--mainAnime);
}
.goIndexBtn a:hover::before{
  transform:translateY(-4px)
}

.headPagettl h2{
  font-size:1.5em/*24px*/;
}
.subCont{
  position:relative;
  margin-top:min(5vw,56px);
}
.subCont h3{
  position:relative;
  margin:min(5vw,40px) 0 0;
  border-top:3px dotted #CCC;
  font-size:1.25em/*20px*/;
  color:var(--mainColor);
}
.subCont h3 > span{
  display:inline-block;
  border-top:3px solid var(--mainColor);
  margin-top:-3px;
  padding:min(4vw,1em) 0;
}
.box{
  margin-bottom:min(4vw,40px);
}
#subpage footer{
  margin-top:-.3em;
}
/* TB over */
@media screen and (min-width:768px){
  body{
    background-image: url("../parts/bg_body1.jpg"), url("../parts/bg_body2.jpg");
    background-attachment:fixed,scroll;
    background-repeat:no-repeat, repeat-y;
    background-size:100% auto;
    background-position:center top;
    background-color:#94CE55;
  }
  .allWrap{
    width:86%;
    margin:0 auto;
    box-shadow:var(--boxShadow);
    background-color:var(--bgGRY);
  }
  header{
    padding:min(5vw,40px);
  }
  .logo{
    position:absolute;
    top:min(5vw,40px);left:min(5vw,40px);
    width:50%;
    max-width:270px;
    padding:0;

  }
  .logo img{
    max-width:100%;
  }
  .headMV{
    width:70%;
    margin-left:auto;
    padding:min(4vw,32px) 0 0 0;
  }
  #subpage header{
    padding:80px 40px 16px 40px;
  }
  #subpage .logo{
    top:16px;
  }
  .headPagettl{
    padding:40px 0 0;
  }
  .footLinks ul li{
    font-size:.875em;
  }
  .goTopBtn{
    bottom:16px;right:16px;
  }
  .goTopBtn a{
    font-size:.875em;
  }
}
/* TB over */
@media screen and (min-width:888px){
  body.open::before{
    content:"";
    display:block;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:2;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
    animation:fadeIN .1s ease;
  }
  .allWrap{
    width:744px;
  }  
  .bgR{
    display:block;
    position:fixed;
    right:0;top:0;bottom:0;
    /* z-index:100; */
  }
  header .navToggle{
    position:fixed;
    top:16px;right:16px;
    z-index:111;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    width:64px;
    height:64px;
    padding:2px;
    border-radius:16px;
    background-color:var(--mainColor);
    color:#FFF;
  }
  header .navToggle::before{
    font-size:2em;
  }
  body.open header .navToggle{
    content: "\e903"
  }
  header .navToggle span{
    display:block;
    width:100%;
    text-align:center;
    font-size:.75em;
    letter-spacing:-.2;
  }
  .bgL{
    display:block;
    position:fixed;
    left:0;top:0;bottom:0;
    width:calc((100% - 744px - 7% - 16px))
  }
  .pcPickup{
    display:none;
  }
  #gNav{
    padding:88px 4em;
    left:auto;
    width:30em;
  }
  body.open #gNav{
    left:auto;
    animation:slideIN .6s ease;
  }
  #gNav ul{
    width:744px;
  }
  
  .bottomNav{
    display:none;
  }
  footer{
    margin-bottom:0;
  }
  .footLogo{
    width:90%;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin:0 auto 24px;
  }
}
/* PC over */
@media screen and (min-width:1024px){
  .headMV{
    width:100%;
    max-width:495px;
  }
  .allWrap{
    margin-right:96px;
  }
	.bgR{
    width:min(calc((100% - 744px) / 2),96px);
    /* background:url(../parts/bg_body-r1.png) no-repeat bottom center/300px auto; */
  }
  body.open .bgR{
    background:none;
  }
  .bgL{
    width:calc(100% - 96px - 744px);
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;

  }
}
@media screen and (min-width:1088px){
  .pcPickup{
    display:block;
    width:90%;
    max-width:15em;
    margin:0 auto;
    padding:40px 0;
  }
  .pcPickLogo .btn a{
    margin-top:8px;
    min-width:100%
  }
  #home .pcPickLogo .btn a{
    display:none;
  }
  .pcPickup ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    list-style:none;
    padding:0;
    margin:0 -5px;
  }
  .pcPickup ul li{
    width:50%;
    max-width:10em;
    padding:0 5px 10px;
  }
  .pcPickup ul li.pcPick01{
    width:100%;
    max-width:20em;
  }  
  .pcPickup ul li a{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    height:100%;
    padding:8px 8px 10px;
    background-color:#FFF;
    box-shadow:var(--boxShadow);
    border-radius:10px;
    color:var(--mainColor);
    text-decoration:none;
    text-align:center;
  }
  .pcPickup ul li img{
    width:60%;
  }
  .pcPickup ul li span{
    display:block;
    width:100%;
    line-height:1.2;
    font-size:min(3.3vw,.75em);
    font-weight:900;
  }  
  .pcPickup ul li.pcPick01 span{
    margin-bottom:5px;
    font-size:1em;
  }
  .pcPickup ul li.pcPick01 img{
    width:40%;
  }
}
@media screen and (min-width:1312px){
  .bgR,.bgL{
    width:calc((100% - 744px)/2)
  }
  .allWrap{
    margin-right:auto;
  }
  .pcPickup ul li{
    width:50%;
  }

}
@media screen and (min-width:1024px) and (max-height:656px){
  .bgL{
    position:absolute;
    align-content:flex-start
  }

}


/*________________________________home*/
#home header{
  background:url(../../img/bg_headVer2.jpg) #0066cc 50% 50%/cover no-repeat;
  border-radius:0 0 20px 20px;
  padding-bottom:2.2em;
}
.homeNews{
  position:absolute;
  right:0;left:0;bottom:0;
  display:flex;
  align-items:center;
  height:3em;
  padding:0;
  background-color:var(--mainColor);
  border-radius:20px;
  line-height:1;
  font-size:.75em;
}
.homeNews ul{
  width:calc(100% - 6em);
  list-style:none;
  padding:0;
  margin:0;
  line-height:1;
}
.homeNews ul li{
}
.homeNews ul li a,.homeNews ul li span{
  display:block;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
  padding:.5em min(5vw,40px);
  color:#FFF;
}
.homeNews-link{
  width:6em;
  text-align:center;
  border-left:1px solid #FFF;
  line-height:1.3;

}
.homeNews-link a{
  display:block;
  padding:4px 10px 4px 8px;
  color:#FFF;
  text-decoration:none;
}
.homeNews-link a::after{
  display:block;
  transition:var(--mainAnime)
}
.homeNews-link a:hover::after {
  transform:translateY(2px)
}
.homeCpn{
  width:90%;
  max-width:664px;
  border-radius:10px;
  overflow:hidden;
  margin:min(5vw,40px) auto 0;
  box-shadow:var(--boxShadow);
}
.homePickup{
  width:90%;
  margin:0 auto;
  padding:min(5vw,40px) 0;
}
.homePickup ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  list-style:none;
  padding:0;
  margin:0 -5px;
}
.homePickup ul li{
  width:50%;
  max-width:170px;
  padding:0 5px 10px;
}
.homePickup ul li a{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  height:100%;
  padding:8px 8px 10px;
  background-color:#FFF;
  box-shadow:var(--boxShadow);
  border-radius:10px;
  color:var(--mainColor);
  text-decoration:none;
  text-align:center;
}
.homePickup ul li img{
  width:60%;
}
.homePickup ul li span{
  display:block;
  width:100%;
  line-height:1.2;
  font-size:min(3.3vw,.875em);
  font-weight:900;
}
.ttlEN{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#868686;
  line-height:1;
  font-size:2.4em
}
.aboutTtl{
  position:relative;
  z-index:1;
  width:90%;
  margin:0 auto;
  padding:min(6vw,48px) 0 0
}
.aboutLead{
  position:relative;
  border-radius:16px 16px 0 0;
  background-color:#FFF;
  margin-top:-16px;
  padding:min(5vw,40px);
}
.aboutAttention{
  border:6px solid rgba(213,0,0,.2);
  padding:16px;
}
.aboutSteps{
  background:#FFF;
  padding-bottom:min(5vw,16px);
}
.aboutSteps h2{
  margin-bottom:1em;
  text-align:center;
}
.aboutStepWrap{
  margin-left:min(5vw,40px);
  padding-bottom:min(3vw,24px)
}
.aboutStep-box{
  width:80vw;
  max-width:290px;
  height: auto!important;
  border-radius:16px;
  padding:16px;
  margin:1.2rem min(4vw,32px) 0 0!important;
  background-color:var(--bgGRY);
}
.aboutStep-box h3{
  margin-bottom:.8em;
  text-align:center;
  font-size:min(4.5vw,1.0625em);
}
.abosBox-num{
  margin-top:-3rem;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:var(--mainColor);
  line-height: 1;
  font-size:min(10vw,3em);
}
.abosBox-img{
  text-align:center;
}
.abosBox-img img{
  display:inline-block !important;
}
.aboutStepWrap .slick-track {
  display: flex !important;
}
.aboutStepWrap .custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  background:var(--GRY);
  width:32px;
  height:32px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  outline: none;
  color:#FFF;
  font-size:.75em;
}
.aboutStepWrap .custom-arrow:hover {
  background: #222;
  color: #fff;
}
.aboutStepWrap .slick-prev {left: -40px;}
.aboutStepWrap .slick-next {right: -40px;}
.aboutStepWrap .slick-prev { left: 10px; }
.aboutStepWrap .slick-next { right: 10px; }
.aboutStepWrap .slick-disabled {
  opacity:0;
  cursor: not-allowed;
}
#news{
  background:linear-gradient(0deg,var(--bgGRY) 0,#FFF 100%);
  padding-bottom:min(5vw,40px);
}
.newsTtl{
  width:90%;
  margin:0 auto;
  padding:min(6vw,48px) 0 8px;
}
.newsList{
  width:90%;
  margin:0 auto 3vw;
  list-style:none;
  padding:0;
}
.newsList li{
  margin-bottom:.5em;
}
.newsList li a,.newsList li > span{
  display:block;
  padding:.5em 1em;
  background-color:#FFF;
  border-radius:16px;
  box-shadow:var(--boxShadow);
  text-decoration:none;
  color:#222;
}
.newsList li a:hover{
  opacity:1;
  background-color:var(--bgGRY);
  box-shadow:inset var(--boxShadow);
}
.newsList-date{
}

/* SP only */
@media screen and (max-width:767px){
  .hiddenSP,.forPC,.forTB{display:none}
}
/* TB only */
@media screen and (min-width:768px) and (max-width:1023px){
	.hiddenTB,.forPC,.forSP{display:none}
}
/* TB over */
@media screen and (min-width:768px){
  .homeNews{
    height:5em;
  }
  .homeNews ul li a{
  }
  #home header{
    border-radius:0 0 40px 40px;
    padding-bottom:3.6em;
  }
  .homeNews{
    border-radius:40px;
  }
  .homeNews-link{
    width:10em;
  }
  .homeNews ul {
    width: calc(100% - 10em);
  }
  .homePickup ul li{
    width:33.333333%;
  }
  #about{
    position:relative;
  }
  .aboutImg{
    position:absolute;
    right:0;top:-24px;
    z-index:1;
    width:calc(100%*340/744)
  }
  .aboutLead{
    margin-top:-3.4em;
    padding-top:min(18vw,112px);
  }
}
/* TB over */
@media screen and (min-width:888px){

}
/* PC over */
@media screen and (min-width:1088px){
  .homePickup{
    display:none;
  }
  #about{
    margin-top:56px;
  }

}
/*________________________________campaign*/
.cpnMv{
  border-radius:10px;
  overflow:hidden;
  margin-bottom:2vw;
}
.cpnFlow{
  padding-left:0;
  counter-reset: my-counter;
  list-style: none;
}
.cpnFlow > li{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.cpnFlow > li:before {
  width:1.5em;
  height:1.5em;
  background-color:var(--GRY);
  border-radius:1.5em;
  content:counter(my-counter);
  counter-increment: my-counter;
  text-align:center;
  color:#FFF;
}
.cpnFlowTxt{
  width:calc(100% - 1.5em);
  padding-left:.5em
}
.cpn2026-flowWrap{
  display:flex;
  flex-wrap:wrap;
}
.cpn2026-fWBox{
  width:calc((100% - 24px) / 2);
  margin-top:.5em;
  text-align:center;
}
.cpn2026-fWBox-img{
  margin-bottom:.5em;
}
.cpn2026-fWPlus{
  width:24px;
  margin-top:-2em;
  align-self:center;
  font-size:1.5em;
  font-weight:bold;
}
.cpn2026-flowImg dt{
  width:50%;
}
.cpn2026-flowImg dd{
  width:50%;
}

.circle_number {
  width: 50px;
  height: 50px;
  padding-top: 13px;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
}
/*________________________________about*/
.subAboutLogo{
  margin-bottom:1em;
  text-align:center;
}
.subAboutLogo img{
  width:min(40vw,184px)
}
.subAbout-tanoshi{
  margin-top:.5em;
}
.subAbout-tanoshi > div{
  margin-bottom:1em;
}
.sAboT-box{
  padding:1em 1em 1px;
  border-radius:10px;
}
.sAboT-box h4{
  text-align:center;
}
.sAboT-box h4::before{
  display:none;
}
.sAboT-box.box01{background-color:#E4EEF9;}
.sAboT-box.box02{background-color:#FBEFDD}
.sAboT-box.box03{background-color:#E8F2EB;}
.sAboT-box.box04{background-color:#FCE7E3;}
.sAboT-box.box01 h4{color:#0070B4}
.sAboT-box.box02 h4{color:#AA5800}
.sAboT-box.box03 h4{color:#007D4E;}
.sAboT-box.box04 h4{color:#CE2134;}

.aboutYobou dl{
}
.aboutYobou dt{
  position:relative;
  padding:5px;
  border-radius:8px 8px 0 0;
  border:2px solid #333;
  border-bottom:none;
  background-color:var(--bgGRY);
  font-size:1.2em;
  font-weight:bold;
  text-align:center;
  line-height:1.2;
}
.aboutYobou dt::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  margin-top:5px;
  background-color:#333;
}
.aboutYobou dd{
  padding:0 5px 5px;

  border-radius:0 0 8px 8px;
  border:2px solid #333;
  border-top:none;
  background-color:var(--bgGRY);
  font-weight:bold;
  text-align:center;
}


/* TB over */
@media screen and (min-width:768px){
  .sAboT-box{
    height:100%;
  }
  .subAboutLogo{
    position:absolute;
    top:-30px;right:0;
  }
  .subAbout-tanoshi{
    margin-top:calc(154px - 2.25em);
  }
}

/*________________________________install*/
.instAttention{
  border:6px solid rgba(213,0,0,.2);
  padding:16px;
}
.instAttention h3{
  color:var(--RED);
  margin:16px 0 0;
}
.instAttention h3 span{
  border-color:var(--RED);
}
.instAttention .instAttTxt{
  list-style:none;
  padding-left:0;
}
.instTab{
  list-style:none;
  margin:0 -8px min(4vw,32px);
  padding:0;
  display:flex;
  align-items:flex-end;
  border-bottom:2px solid var(--GRY);
}
.instTab li{
  cursor: pointer;
  width:50%;
  padding:0 8px;
}
.instTab li span{
  display:block;
  width:100%;
  border-radius:4px 4px 0 0;
  padding:.2em 0;
  background-color:var(--GRY);
  color:#FFF;
  font-weight:600;
  text-align:center;
  line-height:1.2;
}
.instTab li.select span{
  padding:.5em 0;
  background-color:var(--mainColor);
}
#android.instTabCont{
  display:none;
}
.instIndex{
  border-radius: 16px;
  padding:min(4vw,40px) min(4vw,40px) min(3vw,24px);
  margin-bottom:min(8vw,40px);
  background-color: var(--bgGRY);
}
.instIndeTtl{
  border-radius:2em;
  margin-bottom:16px;
  text-align:center;
  font-weight:bold;
  font-size:1.25em;
}
.instIndex > ol{
  list-style:none;
  padding:0;
  margin-bottom:0;
}
.instIndex ol li dt{
  margin-bottom:8px;
  background-color: var(--mainColor);
  border-radius: 2em;
  color: #FFF;
  text-align: center;
  font-weight: bold;
}
.instIndex ol li dd a p{
  margin-bottom:0;
}
.instFlow{
  padding-left:0;
  counter-reset: my-counter;
  list-style: none;
}
.instFlow > li{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.instFlow > li:before {
  width:1.5em;
  height:1.5em;
  background-color:var(--GRY);
  border-radius:1.5em;
  content:counter(my-counter);
  counter-increment: my-counter;
  text-align:center;
  color:#FFF;
}
.instFlowTxt{
  width:calc(100% - 1.5em);
  margin-left:auto;
}
.instFlowImg {
  width:calc(100% - 1.5em);
  padding:0 8px 8px;
}
.instFlowImg img{
  width:60%;
}
.instFlowQR img{
  width:40%;
  border:1px solid #CCC;
}
.instFlowTxt p{
  margin-bottom:8px;
}
.instFlowTxt p + ul.kome{
  margin-top:-8px;
  margin-bottom:8px;
}
.instFlowTxt p strong{
  color:var(--RED);
}

/* SP only */
@media screen and (max-width:767px){
  .instIndex ol li dd a{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .instIndex ol li dd a img{
    width:30%;
  }
  .instIndex ol li dd a p{
    width:70%;
    padding-left:.5em;
  }
  .instIndex ol li.a05 dd a p{
    width:100%;
  }
}
/* TB over */
@media screen and (min-width:768px){
  .instIndex ol{
    display:flex;
    flex-wrap:wrap;
    margin-left:-10px;
    margin-right:-10px;
  }
  .instIndex ol li{
    width:33.333333%;
    padding:0 10px;
  }
  .instIndex ol li.a04,.instIndex ol li.i02{
    width:66.666666%;
  }
  .instIndex ol li.a04 dd a,.instIndex ol li.i02 dd a{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .instIndex ol li.a04 dd a > div,.instIndex ol li.i02 dd a > div{
    width:48%;
  }
  .instFlow > li{
    margin-bottom:24px;
  }
  .instFlowImg{
    width:260px;
    text-align:center;
  }
  .instFlowImg img{
    width:100%
  }
  .instFlowQR img{
    width:160px;
  }
  .instFlowTxt{
    width:calc(100% - 260px - 1.5em);
    padding-left:16px;
  }

}
/*________________________________guide*/
.guideIndex{
  border-radius: 16px;
  padding:min(8vw,40px);
  background-color: var(--bgGRY);
}
.guideIndeTtl{
  border-radius:2em;
  margin-bottom:16px;
  text-align:center;
  font-weight:bold;
  font-size:1.25em;
}
.guideIndex > .guideIndexList {
  list-style:none;
  padding-left:0;
  margin-bottom:0;
}
.guideIndex > .guideIndexList > li:first-of-type{
  margin-bottom:1em;
}
/* .guideBoxImg img.border{
  border:1px solid #CCC;
} */
.guideTtl{
  background-color:var(--mainColor);
  border-radius:2em;
  color:#FFF;
  font-size:min(4.5vw,1.25em);
  text-align:center;
  font-weight:bold;
}
.guideFlow{
  margin-bottom:0;
}
.guideFlow li{
  position: relative;
  padding-right:20px;
  text-align:center;
}
.guideFlow li::after{
  position:absolute;
  top:50%;right:0;
  transform:translateY(-.5em);
  color:var(--mainColor);
  font-size:1.6em;
}
.guideFlow li:last-of-type::after{
  display:none;
}
.guideBgBox{
  border-radius:16px;
  padding:16px;
  background-color:#FBE5D6;
}
.guideBgBox.gry{
  background-color:var(--bgGRY);
}
/* TB over */
@media screen and (min-width:768px){
  .guideIndex > .guideIndexList{
    display:flex;
    flex-wrap:wrap;
    margin-left:-16px;
    margin-right:-16px;
  }
  .guideIndex > .guideIndexList > li{
    width:50%;
    padding-left:16px;
    padding-right:16px;
    margin-bottom:0;
  }
}
/*________________________________point*/
.subCont .pointList td{
  vertical-align:middle
}
.pointFlow{
  padding-left:0;
}
.pointFlow li{
  position: relative;
  padding-right:40px;
  text-align:center;
}
.pointFlow li::after{
  position:absolute;
  top:50%;right:0;
  transform:translateY(-.5em);
  color:var(--mainColor);
  font-size:1.6em;
}
.pointFlow li:last-of-type::after{
  display:none;
}
.pointFlow li img{
  margin-bottom:4px;
}
/*________________________________faq*/
.faqBox{
  border-bottom:1px solid #CCC;
}
.faqBox dt{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:.5em;
}
.faqBox dt .faqQ{
  display:block;
  width:4rem;
  height:4rem;
  border-radius:8px;
  background-color:var(--mainColor);
  text-align:center;
  color:#FFF;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height:1.5em;
  font-size:1.8em;
}
.faqBox dt .faqQtxt{
  width:calc(100% - 4rem);
  padding-left:.5em;
}
.faqBox dd{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:1em;
  margin-left:3em;
}
.faqBox dd .faqA{
  display:block;
  width:4rem;
  height:4rem;
  border-radius:8px;
  background-color:var(--GRY);
  text-align:center;
  color:#FFF;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height:1.5em;
  font-size:1.8em;
}
.faqBox dd .faqAtxt{
  width:calc(100% - 4rem);
  padding-left:.5em;
}


@keyframes fadeUP{
  0%{opacity:0;transform:translateY(10vh)}
  30%{opacity:0}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeDOWN{
  0%{opacity:0;transform:translateY(-10vh)}
  30%{opacity:0}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes slideIN{
  0%{opacity:0;transform:translateX(30em)}
  30%{opacity:0}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeIN{
  0%{opacity:0;}
  30%{opacity:0}
  100%{opacity:1;transform:translateY(0)}
}