@charset "UTF-8";

@font-face {
	font-family: 'RobotoItalic';
	src: url(../font/Roboto-LightItalic.ttf);
}
@font-face {
	font-family: 'Roboto';
	src: url(../font/Roboto-Light.ttf);
}
@font-face {
  font-family: 'NotoLighter';
  src: url(../font/NotoSansCJKjp-Thin.otf);
  font-weight: lighter;
}

h2::before {
	font-family: RobotoItalic;
  font-weight: 500;
}

html{
	font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}
body {
  font-family: "Noto Sans JP", "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "MS PGothic", sans-serif;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}
.body__inner{
  overflow-x: hidden;
  position: relative;
}
.only-pc{display: block!important;}
.only-sp{display: none!important;}
.only-sp--550{display: none!important;}
.only-sp--400{display: none!important;}

.js-accordion-close{
  display: none;
}

#index{
  letter-spacing: .05em;
  overflow-x: hidden!important;
}
#index a{transition: .3s;}
#index a:hover{opacity: .9;}

@media screen and (max-width:1350px) {
    html {font-size: .8vw;}
}
@media only screen and (min-width:750px){
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}
@media only screen and (max-width:750px){
    html {font-size:1.65vw;}

    .only-pc{display: none!important;}
    .only-sp{display: block!important;}
    #index a:hover{opacity: 1;}
}
@media only screen and (max-width:550px){
  .only-sp--550{display: block!important;}
}
@media only screen and (max-width:400px){
  .only-sp--400{display: block!important;}
}

/*----------------------------------------

  .js-fadein

------------------------------------------*/

.js-fadein {opacity: 0;}
.js-fadein.is-show{
  animation-name: scrollFadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.js-fadein.up.is-show{transform: translateY(2rem);}
.js-fadein.down.is-show{transform: translateY(-2rem);}
.js-fadein.left.is-show{transform: translateX(-2rem);}
.js-fadein.right.is-show{transform: translateX(2rem);}
.js-fadein.blur.is-show{
  animation-name: blurTxt;
  animation-duration: 2s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

@keyframes scrollFadeIn{
  0%{opacity: 0;}
  100%{opacity: 1;transform: translate(0);}
}
@keyframes blurTxt{
  0%{
    color: transparent;
    text-shadow: 0px 0px 10rem #fff;
  }
  100%{
    opacity: 1;
    transform: translate(0);
    text-shadow: 0px 0px 0 #fff;
  }
  100%{
    transform: translate(0);
    text-shadow: 0px 0px 0 #fff;
    color: #fff;
  }
}

@media screen and (max-width: 750px) {
  .js-fadein.down.is-show,
  .js-fadein.left.is-show,
  .js-fadein.right.is-show{
    transform: translateY(2rem);
  }
}


/*----------------------------------------

  .totop

------------------------------------------*/

.fade_out {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}
.fade_in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100%{opacity: 0;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100%{opacity: 1;}
}

@media screen and (max-width: 750px) {
  #totop img{
    width: 11rem;
  }
  }

/*----------------------------------------

  #header

------------------------------------------*/

#header{
  position: absolute;
  display: flex;
  flex-shrink: 0;
  width: 100%;
  justify-content: space-between;
  z-index: 2;
}
.header__logo{
  display: block;
  margin: 2.5rem;
  width: 100%;
  max-width: 170px;
}
.header__logo img{
  width: 100%;
  display: block;
}
.header__btn a{
  display: block;
  width: 100%;
  padding: 3rem 8rem 3rem 5rem;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  position: relative;
  text-align: center;
  font-weight: 500; 
  letter-spacing: .1em;
  overflow: hidden;
  background-color: #4dc9ca;
  color: #fff;
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.header__btn a:hover{
  background-color: #e8833b;
  opacity: 1!important;
}
.header__btn a:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 5rem;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 3.1rem;
  background-image: url("../img/header_btn.png");
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 750px) {
  .header__btn a:hover{
    background-color: #4dc9ca;
  }
  .header__btn a {
    padding: 2.5rem 5rem 2.5rem 3rem;
    font-size: 2.2rem;
  }
  .header__btn a::after{
    right: 2.5rem;
  }
  .header__logo {
    width: 23%;
  }
}


/*----------------------------------------

  #simpleParallax

------------------------------------------*/
.simpleParallax img{
  width: 100%;
}
img.js-parallax{
  width: 100%;
}

/*----------------------------------------

  #mv

------------------------------------------*/
#mv {
  width: 100%;
  color: #fff;
  position: relative;
  z-index: 1;
}
.mv__wrapper{
  background-image: url("../img/mv_bg_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  padding: 175px 4% 80px;
  background-position: center bottom;
  position: relative;
}
.mv__ttl{
  margin: 0 auto 30px;
  max-width: 1000px;
}
.mv__ttl p span{
  font-size: 1.8rem;
  font-size: max(16px,1.8rem);
  display: inline-block;
  padding: 0 0 1.5rem;
  margin: 0 0 1.5rem;
  letter-spacing: .1em;
  border-bottom: 1px solid rgba(255,255,255,.8);
}
.mv__ttl p{
  font-size: 1.6rem;
  font-size: max(16px,2.2rem);
  padding: 0 0 4.5rem;
  font-weight: 500; 
  text-shadow: 3px 3px 3px rgba(49,83,155,.8);
}
.mv__ttl h1{
  font-size: 6rem;
  text-shadow: 3px 3px 3px rgba(49,83,155,.8);
  letter-spacing: .1em;
  font-weight: 500;
  margin: 0 0 150px;
}
.mv__ttl h1 img{
  max-width: 542px;
  width: 54%;
}
.mv__list{
  max-width: 600px;
  width: 60%;
  display: block;
  margin: 0 0 35px;
}
.mv__content .mv__content-img {
  max-width: 542px;
  width: 54%;
}
.mv__emph--01 {
    position: absolute;
    bottom: 2%;
    right: 4%;
}
.mv__emph--01 a{
  color: #fff;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: .5rem 3rem .5rem 1rem;
  position: relative;
}
.mv__emph--01 a img{
    width: 12px;
    margin-left: 3px;
    margin-bottom: 3px;
    filter: invert(100%) brightness(200%);
}
.mv__content{
  max-width: 1000px;
  margin: auto;
}
.mv__flex{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
}
.mv__flex ul li{
  font-size: 2.4rem;
  letter-spacing: .1em;
  color: #fff;
  font-weight: 500; 
  padding: 0 0 1.5rem 3.5rem;
  position: relative;
  text-shadow: 3px 3px 3px rgba(49,83,155,.8);
}
.mv__flex ul li::before{
  content: "";
  width: 2.3rem;
  height: 2.1rem;
  position: absolute;
  top: 38%;
  left: 0;
  transform: translateY(-50%);
  background-image: url("../img/mv_check.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.mv__flex ul li b{
  font-size: 3.2rem;
  padding: 0 .5rem;
  color: #fff;
}
.mv__flex > b{
  font-size: 2.4rem;
  font-size: max(18px,2.4rem);
  padding: 0 2rem 0 0;
  margin: 2rem 0 0;
  font-weight: 500; 
  line-height: 1.5em;
  color: #31539b;
  letter-spacing: 0.1em;
  position: relative;
}
.mv__flex > b span{
  background:linear-gradient(transparent 60%, #ffff78 0%);
}
.mv__flex > b::before{
  content: "";
  width: 14.6rem;
  height: 4.3rem;
  position: absolute;
  top: -4rem;
  background-image: url(../img/mv_carbon_01.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.mv__flex > b::after{
  content: "";
  width: 9.9rem;
  height: 4.3rem;
  position: absolute;
  top: -4rem;
  left: 16rem;
  background-image: url(../img/mv_carbon_02.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.mv__graph{
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
}
.mv__graph .graph--01{
  max-width: 350px;
}
.mv__graph .graph--02{
  max-width: 240px;
}
.mv__graph .graph--01,
.mv__graph .graph--02{
  padding: 1rem .5rem;
}
.mv__graph .graph--01 div,
.mv__graph .graph--02 div{
  background-color: rgba(255,255,255,.8);
  padding: 2.5rem 1rem;
}
.mv__graph h3{
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  background-color: #000;
  padding: .7rem 1.5rem;
  text-align: center;
}
.mv__graph .graph__per{
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  font-weight: 500; 
  color: #000;
  position: relative;
}
.mv__graph .graph--02 .graph__per{
  color: #ff8e2f;
}
.mv__graph .graph--01 .graph__per::before{
  content: "※1";
  position: absolute;
  top: -1.5rem;
  right: 0;
  font-weight: lighter;
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
}
.mv__graph .graph__per span{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  font-weight: lighter;
}
.mv__graph .graph__per b{
  font-size: 3.6rem;
  color: #ff8e2f;
}
.mv__graph .graph__emph{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  color: #000;
  padding: 1rem 0 0;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mv__graph .graph--02 .graph__emph{
  text-align: center;
  display: block;
}
.mv__emph--02{
  font-size: 14px;
  text-decoration: underline #ff0;
  -webkit-text-decoration: underline #ff0;
  color: #fff;
  padding: 0 0 30px 30px;
  margin: 1.8rem 0 0;
  position: relative;
  text-shadow: 3px 3px 3px rgba(49,83,155,.8);
  font-weight: 500;
}
.mv__emph--02::before{
  content: "※1";
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: underline #ff0;
  -webkit-text-decoration: underline #ff0;
  font-size: 14px;
  vertical-align: middle;
}
.mv__link{
  color: #fff;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: .5rem 3rem .5rem 1rem;
  position: relative;
}
.mv__link::after{
  content: ">";
  position: absolute;
  top: 20%;
  right: 1rem;
  margin: 0 0 0 1rem;
  font-size: 2rem;
}
.mv__link{
  margin: 0 2rem 0 0;
  font-weight: 500;
}
.mv__link::after{
  transform: rotate(90deg) scale(.45,1);
}
.mv__emph--01 .mv__link::after {
    transform: rotate(0) scale(.5, 1);
}

@media screen and (max-width: 1000px) {
  .mv__emph--02{
    padding: 0 0 3rem 4rem;
    line-height: 1.5em;
  }
  .mv__emph--01 a img{
        width: 8px;
    }
  .mv__link::after{
    top: 25%;
  }
}
@media screen and (max-width: 750px) {
  .mv__content .mv__content-img {
    max-width: 750px;
    width: 100%;
  }
  .mv__ttl h1 img{
    max-width: 750px;
    width: 100%;
  }
  .mv__list{
    max-width: 750px;
    width: 100%;
    display: block;
    margin: 0;
  }
  .mv__wrapper {
    padding: 11rem 0 12rem;
    background-image: url("../img/mv_bg_sp.png");
    background-position:50% 100%;
  }
  .mv__emph--02{
    font-size: 1.6rem;
    line-height: 1.8em;
  }
  .mv__ttl p {
    padding: 0 0 3rem;
  }
  .mv__ttl p span {
    padding: 0 0 1rem;
    margin: 0 0 1rem;
    border-bottom: 2px solid rgba(255,255,255,.8);
  }
  .mv__ttl h1 {
    font-size: 4.5rem;
    margin: 0 0 3rem;
  }
  .mv__ttl h1 span{
    font-size: 3rem;
  }
  .mv__flex {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .mv__emph--01 a {
    font-size: 2rem;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: .8rem 3rem 1rem 1rem;
    font-weight: 500;
    margin: 0;
  }
  .mv__emph--01 a img{
    width: 10px;
    margin-bottom: 2px;
  }
  .mv__link {
    font-size: 2rem;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: .8rem 3rem 1rem 1rem;
    font-weight: 500;
    margin: 0 4%;
    margin: 0 2rem 0 4%;
  }
  .mv__link:first-child::after {
    font-size: 2.8rem;
  }
  .mv__link:last-child::after {
    top: 16%;
    font-size: 2.8rem;
  }
  .mv__ttl {
    margin: 0 auto;
    max-width: 1000px;
  }
  .mv__emph--01 {
    font-size: 1.4rem;
    position: absolute;
    bottom: 2%;
    left: 50%;
  }
  .mv__graph {
    width: 100%;
    margin: 2rem 0 0;
  }
  .mv__graph .graph--01 {
    max-width: 500px;
    width: 60%;
    padding: 0;
    background-color: rgba(255,255,255,.7);
    border-radius: 10px;
  }
  .mv__graph .graph--02 {
    max-width: 300px;
    width: 39%;
    padding: 0;
    background-color: rgba(255,255,255,.7);
    border-radius: 10px;
  }
  .mv__graph h3 {
    font-size: 2rem;
    font-size: max(16px,2rem);
    border-radius: 10px 10px 0 0;
  }
  .mv__flex ul li {
    font-size: 2.4rem;
    font-size: max(18px,2.4rem);
    color: #fff;
    padding: 0 0 .5rem 3.5rem;
  }
  .mv__graph .graph--01 div, .mv__graph .graph--02 div {
    border-radius: 0 0 10px 10px;
    padding: 2rem .5rem;
    background-color: transparent;
  }
  .mv__graph .graph--02 .graph__per {
    text-align: center;
  }
  .mv__graph .graph__per {
    font-size: 1.8rem;
    font-size: max(16px,1.8rem);
    text-align: center;
    letter-spacing: 0;
  }
  .mv__graph .graph__per span {
    font-size: 1.6rem;
    font-size: max(14px,1.6rem);
    display: block;
    text-align: left;
  }
  .mv__graph .graph__emph {
    font-size: 1.6rem;
    font-size: max(14px,1.6rem);
  }
  .mv__flex ul li::before {
    width: 3rem;
    height: 3rem;
  }
  .mv__emph--02 {
    padding: 0 0 2rem 3rem;
    color: #fff;
    margin: 21rem 4% 0;
    font-weight: 500;
  }
  .mv__emph--02::before {
    text-decoration: none;
    font-size: 1.6rem;
  }
  .mv__flex > b {
    padding: 0;
    margin: 7rem 0 0;
  }
}


@media screen and (max-width: 550px) {
  .mv__emph--01 {
    left: auto;
    right: 4%;
  }
  .mv__emph--02 {
    padding: 0 0 3rem 3rem;
  }
  .mv__graph .graph--01 .graph__per::before {
    right: 12%;
  }
}
/*----------------------------------------

  #condition

------------------------------------------*/
#condition{
  padding: 4rem 4% 4rem;
  margin: 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: #fff;
}

.condition__content--01{
  max-width: 1000px;
  margin: auto;
}
.condition__content--01 h2{
  font-size: 3.2rem;
  text-align: center;
  font-weight: 500; 
  letter-spacing: .1em;
  padding: 0 0 3rem;
}
.condition__content--01 h2 sup{
  font-size: 1.6rem;
  margin: 0 0 10rem;
  letter-spacing: 0;
  top: -1.5em;
  right: -.5em;
  text-decoration: underline #ff0;
  -webkit-text-decoration: underline #ff0;
}
.condition__btn--main{
  display: block;
  max-width: 690px;
  width: 100%;
  padding: 4.5rem 0;
  margin: auto;
  font-size: 3rem;
  position: relative;
  text-align: center;
  font-weight: 500;
  letter-spacing: .1em;
  position: relative;
  overflow: hidden;
  background-color: #4dc9ca;
  color: #fff;
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.condition__btn--main:hover{
  background-color: #e8833b;
  opacity: 1!important;
}
.condition__btn--main::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: scale(.45,1) translateY(-50%);
  font-size: 5.5rem;
  font-weight: lighter;
}
.condition__emph {
    position: relative;
    padding-left: 2em; /* 本文のインデント位置 */
    line-height: 2;
    font-size: max(14px, 1.4rem);
    color: #000;
    margin-top: 3rem;
    text-align: left;
    text-decoration: underline #ff0;
    -webkit-text-decoration: underline #ff0;
}

.condition__emph::before {
    content: "注1";
    position: absolute;
    left: 0;
    top: 0;
    width: 2em; /* 注1の幅 */
    text-decoration: underline #ff0;
}
#condition .tab {
  max-width: 1000px;
  margin: auto;
  padding: 9rem 0 8rem;
}
#condition .tab h2{
  font-size: 3.2rem;
  font-weight: 500; 
  letter-spacing: .1em;
  padding: 0 0 3rem;
  z-index: 1;
  position: relative;
}

.open-btn{
  width: 100%;
  background-color: rgba(255,255,255,.6);
  padding: 1rem;
  position: relative;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  text-align: center;
  color: #000;
  font-weight: 500; 
  cursor: pointer;
}
.open-btn::before{
  content: "開く";
}
.open-btn::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 2rem;
  font-weight: lighter;
  font-size: 4.2rem;
  transition: .1s;
  transform: translateY(-50%) scale(1,.45) rotate(90deg);
}
.open-btn.active::before{
  content: "閉じる";
}
.open-btn.active::after{
  transform: translateY(-50%) scale(1,.45) rotate(-90deg);
}

.condition__content--02{
  max-width: 1000px;
  margin: auto;
}
.condition__content--02 ul{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.condition__content--02 p{
  font-size: 1.8rem;
  font-size: max(16px,1.8rem);
  text-align: center;
  position: relative;
  max-width: 300px;
  width: 100%;
  margin: 0 auto 2rem;
  font-weight: 500;
}
.condition__content--02 ul li{
  max-width: 380px;
  margin: 0 1rem;
  width: 50%;
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.condtion__btn--sub{
  display: block;
  max-width: 380px;
  width: 100%;
  font-size: 2rem;
  font-size: max(16px,2rem);
  text-align: center;
  padding: 3rem 0;
  background-color: #52b4d8;
  color: #fff;
  font-weight: 500; 
  position: relative;
  box-shadow: 5px 5px 5px rgba(0,0,0,.1);
}
.condtion__btn--sub:hover{
  background-color: #31539b;
  opacity: 1!important;
}
.condtion__btn--sub::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: .7rem;
  transform: scale(.45,1) translateY(-50%);
  font-size: 3.6rem;
  font-weight: lighter;
}
.condition__content--02 b{
  font-size: 2.6rem;
  color: #31539b;
  padding: 9rem 0 6rem;
  text-align: center;
  display: block;
}

@media screen and (max-width:1000px) {
  .tab__list{
    padding: 1rem 0 0 6rem;
  }
  .tab__list li {
    padding: 0 0 0 3rem;
  }
  .tab__emph {
    padding: 0 0 0 2.5rem;
  }
  .condition__content--01{
    padding: 0 4%;
  }
  .condition__content--02 ul li:first-child {
    margin: 0 0 2rem;
  }
  .condition__content--02 ul li:last-child {
    justify-content: center;
    flex-direction: column;
  }
  .condition__content--02 ul li:last-child a{
    margin: 0 0 2rem;
  }
  .condition__content--02 ul li:first-child {
    width: 50%;
  }
  .condition__content--02 ul li:last-child p::before {
    left: 23rem;
  }
  .condition__content--02 ul li:first-child p::before {
    left: 1.5rem;
  }
  .condition__content--02 p{
    font-size: 2.4rem;
    font-size: max(14px,2.4rem);
    max-width: 400px;
  }
}
@media screen and (max-width:900px) {
  .condition__content--02 ul li:first-child p::before {
    left: 0;
  }
}
@media screen and (max-width: 750px) {
  .condition__btn--main:hover{
    background-color: #4dc9ca;
  }
  .condtion__btn--sub:hover{
    background-color: #52b4d8;
  }
  .condtion__btn--sub span{
    font-size: 1.5em;
  }
  #condition {
    padding: 4rem 4% 6rem;
    margin: 0 0 0;
    position: relative;
    z-index: 0;
  }
  .condition__content--01 h2 sup {
    top: 0;
    text-decoration: underline #ff0;
    -webkit-text-decoration: underline #ff0;
  }
  .condition__emph {
    font-size: 1.8rem;
    line-height: 1.5em;
    padding: 0 0 0 3.5rem;
    margin: 3rem 0 0;
    text-align: left;
  }
  .condition__emph::before {
    position: absolute;
    top: 0;
    left: 0;
  }
  .open-btn {
    padding: 1.5rem;
    font-size: 2rem;
    font-size: max(14px,2rem);
  }
  .condition__content--02 ul {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .condition__content--02 ul li p {
    font-size: 2rem;
    font-size: max(16px,2rem);
  }
  .condition__content--02 ul li:first-child,
  .condition__content--02 ul li:last-child {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .condition__content--02 ul li:last-child {
    margin: 2rem 0 0;
  }
  .condition__content--02 ul li:first-child p {
    max-width: 100%;
    margin: 0 0 2rem;
  }
  .condtion__btn--sub {
    max-width: 630px;
    width: 92%;
    margin: auto;
    font-size: 2.6rem;
    font-size: max(14px,2.6rem);
    padding: 4rem 0;
    letter-spacing: 0.1em;
  }
  .condtion__btn--sub::after {
    right: 1rem;
    font-size: 5rem;
  }
  .condition__content--02 ul li:first-child p::before {
    left: 11rem;
  }
  .condition__content--02 ul li:last-child p::before {
    left: 16rem;
  }
  .condition__content--02 b {
    font-size: 3rem;
    line-height: 1.5em;
  }
  .condition__content--02 p::before{left: 2rem;}
}

@media screen and (max-width: 650px) {.condition__content--02 p::before{left: 6rem;}}
@media screen and (max-width: 550px) {.condition__content--02 p::before{left: 9rem;}}
@media screen and (max-width: 470px) {.condition__content--02 p::before{left: 14rem;}}
@media screen and (max-width: 400px) {.condition__content--02 p::before{left: 12rem;}}
@media screen and (max-width: 350px) {.condition__content--02 p::before{left: 10rem;}}
@media screen and (max-width: 400px) {
  .condition__emph {
    padding: 0 0 0 5rem;
  }
}
/*----------------------------------------

  #tab

------------------------------------------*/

input[name="tab_item"] {
	display: none;
}

.js-content{
	display: none;
}
.js-content.show{
	display: block;
}
.tab__input-list{
  display: flex;
  justify-content: space-between;
}
.tab__input-list li{
  width: 100%;
}
input[name="tab_item"] + label{
  font-size: 1.8rem;
  font-size: max(14px,1.8rem);
  padding: 4rem 2rem 0;
  text-align: center;
  cursor: auto;
  width: 100%;
  display: block;
  font-weight: 500;
}
input[name="tab_item"]:checked + label{
  background-color: #e7f2f8;
  color: #31539b;
}

.tab__show{
  background-color: #e7f2f8;
  padding: 4rem 5rem;
}
.tab__inner{
  position: relative;
  z-index: 0;
}
.tab__show h3{
  font-size: 2.2rem;
  font-size: max(16px,2.2rem);
  padding: 0 0 1rem;
}
.tab__content--01 table,
.tab__content--02 table{
  text-align: center;
  font-size: 1.6rem;
  font-size: max(14px,1.6rem);
  background-color: #fff;
  width: 100%;
}
.tab__content--01 table thead th,
.tab__content--02 table thead th{
  padding: .5rem;
  background-color: #a6a6a6;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: lighter;
  border-right: 1px solid;
  font-weight: 500;
}
.tab__content--01 table thead th span,
.tab__content--02 table thead th span{
  display: inline-block;
}
.tab__content--02 table thead th{
  background-color: #575757;
}
.tab__content--01 table tbody td,
.tab__content--02 table tbody th,
.tab__content--02 table tbody td{
  padding: 1.5rem;
  font-weight: 500; 
  color: #000;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #d9d9d9;
}
.tab__content--01 table tbody th{
  padding: 1.5rem 1.5rem 1.5rem 6.5rem;
  font-weight: 500; 
  color: #000;
  vertical-align: middle;
  border-right: 1px solid #d9d9d9;
}
.tab__content--01 table tbody tr:nth-child(2n) th,
.tab__content--01 table tbody tr:nth-child(2n) td,
.tab__content--01 table tbody tr:nth-child(5) td,
.tab__content--02 table tbody tr:nth-child(2n) th,
.tab__content--02 table tbody tr:nth-child(2n) td{
  background-color: #f0f0f0;
}
.tab__content--01 table tbody tr:nth-child(5) td{
  border-top: 1px solid #d9d9d9;
}

.tab__content--01 table tbody tr:nth-child(6) td,
.tab__content--01 table tbody tr:nth-child(6) th{
  background-color: #fff;
}
.tab__content--01.type02 table tbody tr:nth-child(4) td{
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
}
.tab__content--01.type02 table tbody tr:nth-child(6) td{
  border-top: none;
  background-color: #fff;
}
.tab__content--01 table thead th:last-child,
.tab__content--01 table tbody td:last-child,
.tab__content--02 table thead th:last-child,
.tab__content--02 table tbody td:last-child{
  border: 0;
}
.tab__content--01 table tbody th:first-child {
  width: 27%;
}
.tab__list{
  padding: 0 0 0 4rem;
  position: relative;
  margin: 2rem 0 0;
}
.tab__list::before{
  content: "（注）";
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: absolute;
  top: .2rem;
  left: 0;
}
.tab__list li{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: relative;
  padding: 0 0 0 2rem;
  line-height: 1.5em;
}
.tab__list li::before{
  position: absolute;
  top: 0;
  left: 0;
}
.tab__list li:nth-child(1)::before{
  content: "1:";
}
.tab__list li:nth-child(2)::before{
  content: "2:";
}
.tab__list li:nth-child(3)::before{
  content: "3:";
}
.tab__list li:nth-child(4)::before{
  content: "4:";
}
.tab__emph{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: relative;
  padding: 0 0 0 1.5rem;
  margin: 1rem 0 0;
}
.tab__emph::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.tab__content--02{
  padding: 4rem 0 0;
}
@media screen and (max-width:1000px) {
  .tab__list{
    padding: 1rem 0 0 6rem;
  }
  .tab__list li {
    padding: 0 0 0 3rem;
  }
  .tab__emph {
    padding: 0 0 0 2.5rem;
  }
}
@media screen and (max-width:750px) {
  .condition__content--02 b {
    padding: 6rem 0 6rem;
  }
  input[name="tab_item"] + label{
    font-size: max(14px,2.4rem);
  }
  #condition .tab {
    padding: 10rem 0 8rem;
  }
  .tab__inner::before {
    width: 70%;
    height: 106%;
    background: linear-gradient(#78c87f, 50%, #47b751);
    top: -3rem;
  }
  #condition .tab h2 {
    font-size: 3.6rem;
    padding: 0 0 4rem;
    text-align: center;
  }
  input[name="tab_item"] + label {
    line-height: 1.5em;
  }
  .tab__show {
    padding: 4rem 4% 8rem;
  }
  .tab__show h3 {
    font-size: 2rem;
    font-size: max(14px,2rem);
    padding: 0 0 2rem;
  }
  .tab__content--01 table, .tab__content--02 table {
    font-size: 2rem;
    font-size: max(12px,2rem);
    line-height: 1.5em;
  }
  .tab__content--01 table tbody th, .tab__content--01 table tbody td, .tab__content--02 table tbody th, .tab__content--02 table tbody td {
    padding: 2.5rem 1.5rem;
    text-align: left;
  }
  .tab__content--01 table tbody th:nth-child(1), .tab__content--01 table tbody td:nth-child(1), .tab__content--02 table tbody th:nth-child(1), .tab__content--02 table tbody td:nth-child(1) {
    width: 30%;
  }
  .tab__content--01 table tbody th:nth-child(2), .tab__content--01 table tbody td:nth-child(2), .tab__content--02 table tbody th:nth-child(2), .tab__content--02 table tbody td:nth-child(2) {
    width: 45%;
  }
  .tab__content--01 table tbody th, .tab__content--01 table tbody td:nth-child(3), .tab__content--02 table tbody th:nth-child(3), .tab__content--02 table tbody td:nth-child(3) {
    width: 30%;
  }
  .tab__content--02 table tbody td:nth-child(1),
  .tab__content--02 table tbody td:last-child{
    padding: 4rem 1.5rem;
    text-align: center;
  }
  .tab__list{
    padding: 0 0 0 5rem;
  }
  .tab__list li {
    font-size: 1.6rem;
    font-size: max(12px,1.6rem);
    padding: 0 0 1rem 2.5rem;
  }
  .tab__list::before {
    font-size: 1.6rem;
    font-size: max(13px,1.6rem);
  }
  .tab__content--02 {
    padding: 6rem 0 0;
  }
  .tab__emph {
    padding: 0 0 0 3rem;
    font-size: max(12px,1.8rem);
    line-height: 1.5em;
  }
  .js-content.show {
    position: relative;
    z-index: 1;
  }
  .js-content.show::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 100%;
    background-color: #e7f2f8;
    z-index: -1;
  }
  input[name="tab_item"] + label {
    padding: 3rem 2rem 2rem;
  }
}
@media screen and (max-width:400px) {
  .tab__list li {
    padding: 0 0 1rem 5rem;
  }
  .tab__list li::before {
    left: 2rem;
  }
  .tab__content--01 table tbody th:nth-child(1), .tab__content--01 table tbody td:nth-child(1), .tab__content--02 table tbody th:nth-child(1), .tab__content--02 table tbody td:nth-child(1) {
    width: 45%;
  }
  .tab__content--01 table tbody th:nth-child(2), .tab__content--01 table tbody td:nth-child(2), .tab__content--02 table tbody th:nth-child(2), .tab__content--02 table tbody td:nth-child(2) {
    width: 45%;
  }
  .tab__content--01 table tbody th, .tab__content--01 table tbody td:nth-child(3), .tab__content--02 table tbody th:nth-child(3), .tab__content--02 table tbody td:nth-child(3) {
    width: 10%;
  }
}
/*----------------------------------------

  #just

------------------------------------------*/
#just{
  background-color: #e7f2f8;
  overflow: hidden;
}
.just__top {
  background-image: url("../img/just_top_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  width: 100%;
  height: 52rem;
}
.just__content--01 {
  padding: 18rem 4% 10rem;
  background-color: #fff;
}
.just__content--01 h2{
  font-size: 3rem;
  max-width: 1000px;
  margin: auto;
  padding: 0 0 7rem 5rem;
  letter-spacing: .1em;
  line-height: 2em;
  position: relative;
  font-weight: 500;
}
.just__content--01 .just__ex{
  font-size: 1.8rem;
  font-size: max(14px,1.8rem);
  max-width: 1000px;
  margin: auto;
  padding: 0 0 0 6rem;
  font-weight: 500;
}
.just__content--01 h2 span{
  background: linear-gradient(transparent 80%, #ffff01 20%);
}
.just__content--01 h2 span b{
  color: #ff8d30;
}
.just__content--01 h2::before{
  content: "ー FREE LOAN";
  font-size: 3rem;
  font-size: max(18px,3rem);
  position: absolute;
  top: -5rem;
  left: 5rem;
  color: #4fbee5;
  font-weight: lighter;
}
.just__content--01 h2 b{
  font-size: 4.2rem;
}
.just__content--01 ol{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 1000px;
  margin: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.just__content--01 ol li{
  max-width: 280px;
  width: 100%;
  margin: 1rem;
}
.just__content--01 ol li img{
  width: 100%;
}

.just__content--02{
  background-image: url("../img/just_bg_01_pc.png");
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 8rem 4%;
}
.just__content--02 h3{
  font-size: 3.2rem;
  font-size: max(18px,3.2rem);
  letter-spacing: .1em;
  line-height: 1.5em;
  text-shadow: 3px 3px 3px rgba(132, 87, 48, 0.8);
  font-weight: 500;
}
.just__content--02 h3 span{
  font-size: 2.4rem;
  font-size: max(14px,2.4rem);
}
.just__content--02 ul{
  display: flex;
  flex-shrink: 0;
  max-width: 900px;
  margin: auto;
  align-items: center;
  justify-content: center;
}
.just__content--02 ul li:first-child{
  width: 50%;
  margin: 0 2rem 0 0;
}
.just__content--02 ul li:last-child{
  width: 47%;
}
.just__content--02 a{
  max-width: 374px;
  width: 100%;
  display: block;
}
.just__content--02 a img{
  width: 100%;
}
.just__content--02 p{
  line-height: 1.5em;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  margin: 2rem 0 0;
  text-shadow: 3px 3px 3px rgba(132, 87, 48, 0.8);
}
.just__content--02 p b{
  font-size: 2rem;
  font-size: max(18px,2rem);
  background: linear-gradient(transparent 60%, #ff8e2f 0%);
}
.just__content--02 p span{
  display: block;
  margin: 2rem 0 0;
}
.just__emph{
  max-width: 880px;
  margin: 1rem auto;
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  padding: 0 0 0 1.5rem;
  position: relative;
}
.just__emph a{
  text-decoration: underline;
  -webkit-text-decoration: underline;
}
.just__emph::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}


.just__content--03{
  background-color: #e7f2f8;
}
.just__content--03 div:first-child{
  padding: 12rem 0;
}
.just__content--03 div:first-child ul{
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  justify-content: center;
}
.just__content--03 div:first-child ul li{
  margin: 0 .5rem;
}
.just__content--03 div:first-child ul li p,
.just__content--03 div:last-child ul li p{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  text-align: center;
  line-height: 1.5em;
  margin: 0 0 1.5rem;
  position: relative;
  font-weight: 500;
}
.just__content--03 div ul li p::before{
  content: "/";
  margin: 0 0 0 1.5rem;
  position: absolute;
  top: 50%;
  left: 3.5rem;
  font-weight: lighter;
  font-size: 3.5rem;
  transform: rotate(-37deg) translateY(-50%);
}
.just__content--03 div:last-child ul li p::before,
.just__content--03 div:last-child ul li p::after{
  font-size: 3.5rem;
}
.just__content--03 div:last-child ul li:first-child p::before{
  left: 4rem;
}
.just__content--03 div:last-child ul li:first-child p::after{
  right: 3rem;
}
.just__content--03 div:last-child ul li:last-child p::before{
  left: 5.5rem;
}
.just__content--03 div:last-child ul li:last-child p::after{
  right: 5rem;
}
.just__content--03 div ul li p::after{
  content: "/";
  margin: 0 1.5rem 0 0;
  position: absolute;
  font-weight: lighter;
  top: 55%;
  right: 4rem;
  font-size: 3.5rem;
  transform: translateY(-50%);
}

.just__content--03 div:first-child ul li p span{
  font-size: 2rem;
  font-size: max(18px,2rem);
  color: #ff8e2f;
  font-weight: 500;
}
.just__btn{
  display: block;
  width: 37rem;
  padding: 3rem 0;
  font-size: 2rem;
  font-size: max(18px,2rem);
  position: relative;
  text-align: center;
  font-weight: 500;
  letter-spacing: .1em;
  background-color: #4fbee5;
  color: #fff;
  box-shadow: 5px 5px 5px rgba(0,0,0,.1);
}
.just__btn:hover{
  background-color: #31539b;
  opacity: 1!important;
}
.just__btn span{
  display: inline-block;
}
.just__btn::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 0;
  transform: scale(.45,1) translateY(-50%);
  font-size: 5rem;
  font-weight: lighter;
}
.just__link{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: relative;
  margin: 2rem 0 0;
  display: block;
  padding: 0 0 0 1.5rem;
  font-weight: 500;
}
.just__link::after{
  content: ">";
  position: absolute;
  top: 50%;
  left: 0;
  transform: scale(.45,1) translateY(-50%);
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
}
.just__link span{
  text-decoration: underline;
  -webkit-text-decoration: underline;
}

.just__content--03 div:last-child ul{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.just__content--03 div:last-child ul li{
  margin: 0 1rem;
}

.just__content--04{
  padding: 8rem 0 18rem;
  max-width: 1000px;
  margin: auto;
  position: relative;
}
.just__content--04::before{
  content: "";
  width: 90%;
  height: 95%;
  background-color: #d7edf6;
  position: absolute;
  top: -5rem;
  left: -5rem;
  transform: translate(-50%);
  z-index: 0;
}
.just__content--04 h3{
  font-size: 3.2rem;
  letter-spacing: .05em;
  margin: 0 0 6rem;
  position: relative;
  padding: 0;
  font-weight: 500;
}
.just__content--04 h3::before{
  content: "";
  width: 12rem;
  height: 4.3rem;
  position: absolute;
  top: -6rem;
  left: -2rem;
  background-image: url("../img/just_column.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.just__content--04 figure{
  position: relative;
  z-index: 1;
  max-width: 1000px;
  width: 100%;
}
.just__content--04 figure::after{
  content: "※文部科学省 日本政策金融機構 河合塾調べ";
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  color: #fff;
  font-size: 14px;
}
.just__content--04 figure img{
  width: 100%;
}
.just__content--04 figure figcaption{
  position: absolute;
  top: 4rem;
  left: 4rem;
  max-width: 500px;
  width: 50%;
}
.just__content--04 > ul{
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 1;
  position: relative;
}
.just__content--04 > ul > li{
  max-width: 495px;
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.just__content--04 ul li h4{
  font-size: 2.4rem;
  margin: 0 0 2rem;
}
.just__content--04 > ul > li:last-child{
  max-width: 1000px;
  width: 100%;
  margin: 1rem 0 0;
}
.just__content--04 > ul > li:nth-child(1){
  background-image: url("../img/just_img_01_pc.png");
  margin: 0 .5rem 0 0;
  padding: 5rem 4rem;
}
.just__content--04 > ul > li:nth-child(2){
  background-image: url("../img/just_img_02_pc.png");
  margin: 0 0 0 .5rem;
  padding: 7rem 4rem 5rem 30rem;
  color: #fff;
}
.just__content--04 > ul > li:nth-child(3){
  background-image: url("../img/just_img_03_pc.png");
  padding: 5rem 4rem;
  color: #fff;
}
.just__content--04 ul li ul li{
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  margin: 0 0 .5rem;
  position: relative;
  padding: 0 0 0 1.5rem;
  line-height: 1.5em;
}
.just__content--04 ul li ul li::before{
  content: "・";
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  position: absolute;
  top: 0;
  left: 0;
}
.just__content--04 ul li ul li:last-child::before{
  content: "";
}
.just__content--04 ul li ul li:last-child{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  margin: 0;
}
.just__content--04 b{
  display: block;
  font-size: 3.2rem;
  font-weight: lighter;
  width: 92rem;
  margin: 10rem -8rem 0 auto;
  z-index: 1;
  position: relative;
  font-weight: 500;
}
.just__content--04 b span{
  font-size: 4rem;
  font-weight: 550;
  color: #31539b;
  line-height: 1.5em;
}

@media screen and (max-width:1100px) {
  .just__content--03 div:first-child ul li p::before{
    left: 1.5rem;
  }
  .just__content--03 div:first-child ul li p::after{
    right: 2rem;
  }
  .just__content--04 > ul > li:nth-child(2){
    padding: 7rem 4rem 5rem 34rem;
  }
  .just__content--04 ul li ul li{
    padding: 0 0 0 2rem;
  }
  .just__content--04 b{
    margin: 10rem 0 0 auto;
  }
}
@media screen and (max-width:1030px) {
  .just__content--04 h3::before {
    left: 2rem;
  }
}
@media screen and (max-width:1100px) {
  .just__content--02 ul{
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .just__content--02 a {
    margin: auto;
  }
  .just__content--02 ul li:last-child {
    width: 50%;
  }
  .just__content--02 ul li:first-child {
    margin: 0 0 2rem;
  }
  .just__content--04 h3 {
    padding: 0 4%;
  }
}
@media screen and (max-width:1000px) {
  .just__content--02 ul li:first-child::after {
    left: 50%;
    bottom: -3.5rem;
    top: auto;
    transform: translateX(-50%);
  }
  .just__emph {
    padding: 0 0 0 2.5rem;
  }

  .just__content--03 div:first-child ul {
    flex-direction: column;
    width: 60%;
    margin: auto;
  }
  .just__content--03 div:first-child ul li{
    margin: 1rem 0;
  }
  .just__btn {
    margin: auto;
    width: 45rem;
    font-size: 2rem;
    font-size: max(18px,2rem);
  }
  .just__content--04 > ul > li:nth-child(1){
    margin: 0;
  }
  .just__content--04 > ul > li:nth-child(2){
    margin: 0;
  }
  .just__content--04 > ul > li{
    width: 49.5%;
  }
  .just__content--03 div:first-child ul li:first-child p::before{
    left: 6rem;
  }
  .just__content--03 div:first-child ul li:first-child p::after{
    right: 5rem;
  }
  .just__content--03 div:first-child ul li:last-child p::before {
    left: 8rem;
  }
  .just__content--03 div:first-child ul li:last-child p::after {
    right: 7rem;
  }
  .just__link {
    padding: 0 0 0 2rem;
  }
}

@media screen and (max-width:900px) {
  .just__content--03 div:last-child ul li:first-child p::before{
    left: 3rem;
  }
  .just__content--03 div:last-child ul li:first-child p::after{
    right: 2rem;
  }
  .just__content--03 div:last-child ul li:last-child p::before{
    left: 5rem;
  }
  .just__content--03 div:last-child ul li:last-child p::after{
    right: 4rem;
  }
}
@media screen and (max-width:750px) {
  .just__content--03 div:first-child {
    padding: 0;
  }
  .just__content--01 .just__ex{
    font-size: max(12px,2rem);
    padding: 0 0 0 4%;
    margin: 0 0 1rem;
  }
  #just{
    background-color: #fff;
  }
  .just__top {
    background-image: url("../img/just_top_sp.png");
    background-attachment: scroll;
    background-size: contain;
    height: 70rem;
  }
  .just__content--02 a{
    max-width: 630px;
  }
  .just__btn:hover {
    background-color: #4fbee5;
  }
  .just__content--01 {
    padding: 8rem 4% 10rem;
    background-position: 64% 0;
}
  .just__content--01 ol {
    justify-content: center;
    flex-wrap: wrap;
  }
  .just__content--01 ol li{
    max-width: 305px;
    width: 47%;
    margin: .75rem;
  }
  .just__content--01 h2 {
    padding: 0 0 4rem 4%;
  }
  .just__content--01 h2::before {
    font-size: 3.2rem;
    font-size: max(18px,3.2rem);
    top: -7rem;
    left: 4%;
}
  .just__content--01 h2 span {
    font-size: .8em;
    margin: -1rem 0 0;
  }
  .just__content--02 ul li {
    max-width: 630px;
    font-size: 3rem;
    letter-spacing: .1em;
    line-height: 1.25em;
  }
  .just__content--02 ul li:last-child {
    width: 100%;
  }
  .just__content--02 p {
    font-size: 2rem;
    font-size: max(12px,2rem);
    text-align: center;
  }
  .just__content--02 p b{
    font-size: 2.4rem;
    font-size: max(16px,2.4rem);
  }
  .just__content--02 h3{
    text-align: center;
  }
  .just__emph {
    padding: 0 0 0 2rem;
    max-width: 630px;
    font-size: 1.8rem;
    font-size: max(12px,1.8rem);
    line-height: 1.5em;
  }
  .just__content--03 div:first-child ul {
    width: 92%;
  }
  .just__content--03 div:first-child ul li {
    padding: 0 4%;
    margin: 0 .5rem;
    position: relative;
  }
  .just__content--03 div:first-child ul li:last-child {
    padding: 6rem 4% 0;
  }
  .just__content--03 div:first-child ul li:first-child::after {
    content: "";
    width: 80%;
    height: 1px;
    background-color: #aaa;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .just__content--03 div:first-child ul li p, .just__content--03 div:last-child ul li p {
    font-size: 2.4rem;
    font-size: max(14px,2.4rem);
  }
  .just__content--03 div:last-child ul li:first-child p::before{
    left: 7rem;
  }
  .just__content--03 div:last-child ul li:first-child p::after{
    right: 5rem;
  }
  .just__content--03 div:last-child ul li:last-child p::before{
    left: 15rem;
  }
  .just__content--03 div:last-child ul li:last-child p::after{
    right: 13rem;
  }
  .just__content--03 div:last-child ul {
    padding: 12rem 4%;
  }
  .just__content--03 div:first-child ul li {
    margin: 0;
  }
  .just__content--03 div:last-child ul li {
    margin: 0;
  }
  .just__content--03 div:last-child ul {
    flex-direction: column;
  }
  .just__btn {
    width: 100%;
    max-width: 630px;
    font-size: 2.6rem;
    font-size: max(14px,2.6rem);
    padding: 3.5rem 0;
  }
  .just__btn::after {
    right: 1rem;
    font-size: 6rem;
  }
  .just__content--03 div:first-child ul li p span {
    font-size: 2.4rem;
    font-size: max(18px,2.4rem);
    margin: 0 .5rem;
  }
  .just__link {
    font-size: 1.8rem;
    font-size: max(14px,1.8rem);
    margin: 2.5rem 0 0;
    padding: 0 0 0 2rem;
  }
  .just__link::after {
    font-size: 2.4rem;
    font-size: max(18px, 2.4rem);
  }
  .just__content--03 div:first-child ul li p::before {
    left: 6rem;
  }
  .just__content--03 div:first-child ul li p::after {
    right: 4rem;
  }
  .just__content--03 div:first-child ul li:last-child p::before {
    left: 8rem;
  }
  .just__content--03 div:first-child ul li:last-child p::after {
    right: 7rem;
  }
  .just__content--02 ul li:first-child{
    width: 100%;
    margin: 0 0 2rem;
  }
  .just__content--04 h3{
    line-height: 1.5em;
  }
  .just__content--04 b {
    display: block;
    font-size: 3rem;
    font-size: max(16px,3rem);
    width: auto;
    margin: 4rem 4% 10rem;
    font-weight: 500;
    padding: 0 0 0 10rem;
    line-height: 1.5em;
    letter-spacing: 0.1em;
  }
  .just__content--04 b span{
    font-size: 3.6rem;
    font-size: max(18px,3.6rem);
  }
  .just__content--04{
    padding: 8rem 0;
    background-color: #e7f2f8;
  }
  .just__content--03 div:last-child ul li {
    width: 100%;
  }
  .just__content--03 div:last-child ul li:first-child {
    margin: 0;
  }
  .just__content--04 figure figcaption{
    position: absolute;
    top: 3rem;
    left: 0;
    max-width: 750px;
    width: 100%;
  }
  .just__content--02{
    background-image: none;
    position: relative;
    background-position: 50% 100%;
    background-image: url("../img/just_bg_01_sp.png");
  }
  .just__content--04 h3::before{
    width: 13rem;
    height: 6rem;
    top: -6.5rem;
  }
  .just__content--04 figure::after {
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: max(12px,1.6rem);
  }
  .just__content--04::before{
    left: 7rem;
  }
  /* .just__content--02::before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-image: url("../img/mv_bg_sp.png");
    background-size: cover;
  } */
}
  @media screen and (max-width:400px) {
    .just__content--03 div:first-child ul li p::before {
      left: 3rem;
    }
    .just__content--03 div:first-child ul li p::after {
      right: 2rem;
    }
    .just__content--03 div:first-child ul li:last-child p::before {
      left: 8rem;
    }
    .just__content--03 div:first-child ul li:last-child p::after {
      right: 6rem;
    }
    .just__content--03 div:last-child ul li:first-child p::before{
      left: 6rem;
    }
    .just__content--03 div:last-child ul li:first-child p::after{
      right: 5rem;
    }
    .just__content--02 ul li:first-child{
      width: 100%;
    }
  }
  @media screen and (max-width:350px) {
    .just__content--03 div:first-child ul li p::before {
      left: 3rem;
    }
    .just__content--03 div:first-child ul li p::after {
      right: 2rem;
    }
    .just__content--03 div:first-child ul li:last-child p::before {
      left: 6rem;
    }
    .just__content--03 div:first-child ul li:last-child p::after {
      right: 5rem;
    }
    .just__content--03 div:last-child ul li:first-child p::before{
      left: 3rem;
    }
    .just__content--03 div:last-child ul li:first-child p::after{
      right: 2rem;
    }
  }

@media screen and (max-width:450px) {.just__content--04 > ul > li:nth-child(2) {padding: 6rem 4% 6rem 34rem;}}
@media screen and (max-width:370px) {.just__content--04 > ul > li:nth-child(2) {padding: 6rem 4% 6rem 32rem;}}
@media screen and (max-width:332px) {.just__content--04 > ul > li:nth-child(2) {padding: 6rem 4% 6rem 30rem;}}

/*----------------------------------------

  #reason

------------------------------------------*/
#reason{
  overflow: hidden;
}
.reason__content--01{
  padding: 14rem 0 0;
  max-width: 1000px;
  margin: auto;
  position: relative;
}
.reason__content--01 h2{
  font-size: 3rem;
  max-width: 1000px;
  margin: auto;
  padding: 0 0 7rem 5rem;
  letter-spacing: .1em;
  line-height: 2em;
}
.reason__content--01 h2{
  font-size: 3rem;
  max-width: 1000px;
  margin: auto;
  padding: 0 0 14rem 5rem;
  letter-spacing: .1em;
  line-height: 2em;
  position: relative;
  font-weight: 500;
}
.reason__content--01 h2::before{
  content: "ー REASON";
  font-size: 3rem;
  font-size: max(18px,3rem);
  position: absolute;
  top: -7rem;
  left: 5rem;
  color: #4fbee5;
  font-weight: lighter;
}
.reason__content--01 h2 b {
  font-size: 4.8rem;
}
.reason__content--01 > b{
  text-align: center;
  display: block;
  font-size: 3.2rem;
  margin: 0 0 16rem;
  letter-spacing: .1em;
  font-weight: lighter;
  line-height: 1.5em;
  color: #31539b;
  font-weight: 500; 
  position: relative;
}
.reason__content--01 > b::after{
  content: "";
  background-image: url("../img/reason_arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.2rem;
  height: 3.8rem;
}
.reason__box{
  position: relative;
}
.reason__content--01 ol li:nth-child(2n+1) .reason__img{
  margin: 0 0 0 auto;
}
.reason__content--01 ol li:nth-child(2n) .reason__img{
  margin: 0 auto 0 0;
}
.reason__content--01 ol li .reason__img::before{
  font-size: 12rem;
  position: absolute;
  font-family: Roboto;
}
.reason__content--01 ol li:nth-child(2n+1) .reason__img::before{
  top: -7rem;
  left: -7rem;
}
.reason__content--01 ol li:nth-child(2n) .reason__img::before{
  bottom: -4rem;
  right: -7rem;
}
.reason__content--01 ol li:nth-child(1) .reason__img::before{
  content: "01";
}
.reason__content--01 ol li:nth-child(2) .reason__img::before{
  content: "02";
}
.reason__content--01 ol li:nth-child(3) .reason__img::before{
  content: "03";
}
.reason__content--01 ol li:nth-child(4) .reason__img::before{
  content: "04";
}
.reason__content--01 ol li:nth-child(5) .reason__img::before{
  content: "05";
}
.reason__content--01 ol li .reason__img::after{
  content: "Reason";
  font-size: 2.8rem;
  position: absolute;
  transform: rotate(90deg);
  letter-spacing: .1em;
}
.reason__content--01 ol li:nth-child(2n+1) .reason__img::after{
  top: 13rem;
  left: -8rem;
}
.reason__content--01 ol li:nth-child(2n) .reason__img::after{
  bottom: 14rem;
  right: -8.5rem;
}
.reason__content--01 ol li .reason__img{
  max-width: 832px;
  width: 91%;
  position: relative;
}
.reason__content--01 ol li .reason__img img{
  width: 100%;
}
.reason__content--01 ol li .reason__blue{
  width: 50rem;
  height: 35rem;
  background-color: #ecf5f7;
  position: absolute;
}
.reason__content--01 ol li:nth-child(2n+1) .reason__blue{
  top: -10rem;
  left: -7rem;
}
.reason__content--01 ol li:nth-child(2n) .reason__blue{
  bottom: -9rem;
  right: -7rem;
}
.reason__content--01 ol li {
  padding: 0 0 14rem;
}
.reason__content--01 ol li:nth-child(2n) {
  padding: 0 0 28rem;
}
.reason__content--01 ol li p{
  font-size: 3.2rem;
  letter-spacing: .1em;
  max-width: 750px;
  margin: 4rem auto 0;
  position: relative;
  z-index: 1;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0;
}
.reason__content--01 ol li:nth-child(3) p,
.reason__content--01 ol li:nth-child(3) .js-fadein.up span{
  max-width: 1000px;
  padding: 0 0 0 12rem;
}
@media screen and (max-width:1089px) {
  .reason__content--01 ol li:nth-child(2) p,
  .reason__content--01 ol li:nth-child(2) .js-fadein.up span,
  .reason__content--01 ol li:nth-child(3) p,
  .reason__content--01 ol li:nth-child(3) .js-fadein.up span{
    max-width: 750px;
    padding: 0;
  }
}
.reason__content--01 ol li:nth-child(3) .js-fadein.up p span,
.reason__content--01 ol li:nth-child(4) .js-fadein.up p span{
  padding: 0;
  font-size: 2.4rem;
}
.reason__content--01 ol li:nth-child(4) p:nth-child(2) {
  margin: 0 auto;
}

.reason__content--01 ol li p b{
  font-size: 3.6rem;
  color: #ff8e2f;
}
.reason__content--01 ol li p b span{
  font-size: 5rem!important;
  color: #ff8e2f!important;
  margin: 0 0 0 1rem!important;
  display: inline!important;
}
.reason__content--01 ol li p span{
  font-size: 2.4rem;
}
.reason__content--01 ol li .js-fadein.up span{
  font-size: 2rem;
  font-size: max(11px,2rem);
  letter-spacing: .1em;
  max-width: 750px;
  display: block;
  font-weight: 500;
}
.reason__content--01 ol li .js-fadein.up p span{
  font-size: 2.6rem;
}
.reason__content--01 ol li:nth-child(2) .js-fadein.up span,
.reason__content--01 ol li:nth-child(5) .js-fadein.up span {
  display: inline;
}
.reason__content--01 ol li:nth-child(2) .js-fadein.up span.reason__emph,
.reason__content--01 ol li:nth-child(5) .js-fadein.up span.reason__emph {
  display: block;
}

.reason__content--02{
  padding: 8rem 4%;
  background-color: #71b0e4;
  color: #fff;
}
.reason__content--02 h3{
  font-size: 3.2rem;
  font-size: max(18px,3.2rem);
  line-height: 1.5em;
  margin: 0 2rem 0 0;
  position: relative;
  width: 36%;
  font-weight: 500; 
  letter-spacing: .1em;
}
.reason__content--02 h3 span{
  font-size: 2.4rem;
  font-size: max(14px,2.4rem);
  display: block;
}
.reason__content--02 div{
  max-width: 1000px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.reason__content--02 div ul{
  width: 54%;
}
.reason__content--02 div ul li{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  letter-spacing: .1em;
  color: #fff;
  padding: 0 0 1.5rem 3.5rem;
  position: relative;
  line-height: 1.5em;
  font-weight: 500; 
}
.reason__content--02 div ul li::before {
  content: "";
  width: 2.3rem;
  height: 2.1rem;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../img/mv_check.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.reason__emph{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: relative;
  max-width: 1000px;
  margin: 1rem auto 0;
  line-height: 1.5em;
}

@media screen and (max-width:1100px) {
  .reason__content--01{
    padding: 14rem 4% 0;
  }
  .reason__content--02 div ul li::before {
    top: 5%;
  }
}
@media screen and (max-width:750px) {
  .reason__content--01 h2 {
    padding: 0 0 14rem 4%;
  }
  .reason__content--01 h2::before {
    font-size: 3.2rem;
    font-size: max(18px,3.2rem);
    top: -6rem;
    left: 4%;
  }
  .reason__content--02 ul li {
      max-width: 630px;
      padding: 0 0 7rem;
  }
  .reason__content--01 ol li .js-fadein.up span{
    margin: 1rem auto 0;
    width: 48rem;
  }
  .reason__emph {
    font-size: 1.8rem;
    font-size: max(14px,1.8rem);
    max-width: 630px;
  }
  .reason__content--01 ol li .reason__blue {
    width: 28rem;
    height: 20rem;
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__blue {
    top: -8rem;
    left: 0;
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__img {
    margin: 0 -5% 0 auto;
  }
  .reason__content--01 ol li .reason__img {
    width: 88%;
  }
  li:nth-child(2n+1) .reason__img::before {
    top: -4rem;
    left: -7rem;
  }
  .reason__content--01 ol li .reason__img::before {
    font-size: 7rem;
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__img::before {
    top: -4rem;
    left: -5rem;
  }
  .reason__content--01 ol li:nth-child(2n) .reason__img::before {
    bottom: -2rem;
    right: -5rem;
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__img::after {
    top: 10rem;
    left: -9rem;
  }
  .reason__content--01 ol li .reason__img::after {
    font-size: 2rem;
    font-size: max(18px,2rem);
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__img::after {
    top: 8rem;
    left: -6.5rem;
  }
  .reason__content--01 ol li p {
    font-size: 2.6rem;
    font-size: max(14px,2.6rem);
    margin: 4rem auto 0;
    width: 48rem;
  }
  .reason__content--01 ol li > span {
    font-size: 2rem;
    max-width: 630px;
    margin: 2rem auto 0;
  }
  .reason__content--01 ol li {
    padding: 0 0 10rem;
  }
  .reason__content--01 ol li p b {
    font-size:3rem;
    font-size: max(16px,3rem);
  }
  .reason__content--01 ol li > span {
    margin: 1rem auto 0;
  }
  .reason__content--01 ol li:nth-child(2n) .reason__blue {
    bottom: -7rem;
    right: 0;
  }
  .reason__content--01 ol li:nth-child(2n) .reason__img::after {
    bottom: 9rem;
    right: -6.5rem;
  }
  .reason__content--01 ol li:nth-child(2n) .reason__img {
    margin: 0 auto 0 -5%;
  }
  .reason__content--01 ol li:nth-child(2n) {
    padding: 0px 0 18rem;
  }
  .reason__content--02 div{
    flex-direction: column;
  }
  .reason__content--02 h3{
    width: 100%;
  }
  .reason__content--02 div ul {
    width: 100%;
  }
  .reason__content--02 h3 {
    font-size: 3.2rem;
    font-size: max(18px,3.2rem);
    line-height: 1.5em;
    margin: 0 2rem 0 0;
    position: relative;
    width: 36%;
    font-weight: 500; 
    letter-spacing: .1em;
  }
  .reason__content--01 > b::after{
    bottom: -8rem;
  }
  .reason__content--01 > b {
    margin: 0px 0 18rem;
  }
}

@media screen and (max-width:400px) {
  .reason__content--01 ol li:nth-child(2n) .reason__img::after {
    right: -8rem;
    bottom: 11rem;
  }
  .reason__content--01 ol li:nth-child(2n+1) .reason__img::after {
    top: 10rem;
    left: -9rem;
  }
}
@media screen and (max-width:350px) {
  .reason__content--01 ol li:nth-child(2n) .reason__img::after {
    right: -9rem;
  }
}

/*----------------------------------------

  #flow

------------------------------------------*/
.flow__top {
  background-image: url("../img/flow_top_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-position: 80% 0;
  width: 100%;
  height: 52rem;
}
.flow__content--01{
  padding: 10rem 0 0;
  max-width: 1000px;
  margin: auto;
}
.flow__content--01 b{
  display: block;
  text-align: center;
}
.flow__content--01 b.flow__ttl img{
  max-width: 394px;
  width: 40%;
}
.flow__content--01 h2 span{
  font-size: 3.2rem;
}
.flow__content--01 h2{
  font-size: 4.8rem;
  letter-spacing: .1em;
  font-weight: 500;
  padding: 6rem 4% 3.5rem;
  position: relative;
  line-height: 1.2em;
}
.flow__content--01 h2::before{
  content: "ー FLOW";
  font-size: 3rem;
  font-size: max(18px,3rem);
  position: absolute;
  top: 1rem;
  left: 5rem;
  color: #4fbee5;
  font-weight: lighter;
}
.flow__content--01 p{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  line-height: 1.5em;
  padding: 0 4% 1rem;
  font-weight: 500;
}
.flow__content--01 .flow__emph{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  position: relative;
  padding: 0 0 0 1.5rem;
  margin: 1rem 4% 0;
  font-weight: lighter;
}
.flow__content--01 .flow__emph::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.flow__content--01 b.flow__txt{
  margin: 6rem 0 3rem;
}
.flow__content--01 b.flow__txt img{
  max-width: 501px;
  width: 100%;
}
#flow ol{
  max-width: 840px;
  margin: auto;
  width: 92%;
}
#flow ol > li{
  background-color: #fff;
  padding: 3rem 0;
  margin: 0 0 6rem;
  position: relative;
}
#flow ol > li:nth-child(1)::after,
#flow ol > li:nth-child(2)::after{
  content: ">";
  position: absolute;
  bottom: -5.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg) scale(.75,2);
  font-size: 6rem;
  color: #31539b;
  font-weight: lighter;
  font-family: "NotoLighter";
}
#flow ol li p,
.flow__content--02 p{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  line-height: 1.5em;
}
.flow__content--02 p.js-accordion-close{
  background-color: #f1f2f7;
  padding: 3rem 4%;
}
#flow ol li p span,
#flow ol li div span,
.flow__content--02 p span{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  line-height: 1.5em;
  display: block;
  position: relative;
  padding: 0 0 0 1.5rem;
  margin: 1rem 0 0;
}
#flow ol li p span::before,
#flow ol li div span::before,
.flow__content--02 p span::before{
content: "※";
position: absolute;
top: 0;
left: 0;
}
#flow ol li img{
  display: block;
  max-width: 754px;
  width: 100%;
  margin: 0 0 2rem;
}
#flow ol li:nth-child(2n+1) .open-btn{
  background-color: #71b0e4; 
  color: #fff;
}
#flow ol li:nth-child(2n) .open-btn{
  background-color: #31539b; 
  color: #fff;
}
#flow ol li:nth-child(2n+1) div,
#flow ol li:nth-child(2n+1) p.js-accordion-close{
  background-color: #f0f7f9;
  padding: 3rem 4%;
  font-weight: 500;
}
#flow ol li:nth-child(2n) p.js-accordion-close{
  background-color: #f1f2f7;
  padding: 3rem 4%;
  font-weight: 500;
}
.flow__link{
  max-width: 650px;
  width: 92%;
  margin: 0 auto 3rem;
  font-size: 1.8rem;
  font-size: max(12px,1.8rem);
  padding: 2rem;
  text-align: center;
  display: block;
  position: relative;
  border: 1px solid;
  font-weight: 500;
}
.flow__link::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 1rem;
  font-weight: lighter;
  font-size: 3.2rem; 
  transform: translateY(-50%) scale(1,.45) rotate(90deg);
}
#flow ol li ul li,
.flow__content--02 ul li{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  line-height: 1.5em;
  padding: 0 0 1rem 1.5rem;
  position: relative;
  font-weight: 500;
}
#flow ol li ul li::before,
.flow__content--02 ul li::before{
content: "・";
position: absolute;
top: 0;
left: 0;
}
.flow__content--02{
  width: 100%;
  padding: 0 4%;
  background-color: #f0f7f9;
}
.flow__content--02 div{
  max-width: 840px;
  width: 100%;
  margin: auto;
  padding: 6rem 0;
}
.flow__content--02 b{
  font-size: 2.2rem;
  font-size: max(18px,2.2rem);
  text-align: center;
  display: block;
  padding: 0 0 3rem;
  font-weight: 500;
}
.flow__content--02 .open-btn{
  background-color: #fff;
}
.flow__content--02 ul{
  padding: 3rem 4% 2rem;
}
.flow__content--02 ul li span{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  line-height: 1.5em;
  display: block;
  position: relative;
  padding: 0;
  margin: 1.5rem 0 0;
}
.flow__content--02 ul li span::before{
  content: "※";
  position: absolute;
  top: 0;
  left: -1.5rem;
}

@media screen and (max-width:1100px) {
  .flow__content--01 h2::before {
    left: 2rem;
  }
}
@media screen and (max-width:750px) {
  .flow__content--02 ul li span::before{
    left: -2.5rem;
  }
  .flow__top {
    background-image: url("../img/flow_top_sp.png");
    background-attachment: scroll;
    background-size: contain;
    height: 70rem;
  }
  .flow__content--01 {
    padding: 2rem 0 0;
  }
  #flow ol li p,
  .flow__content--02 p{
    font-size: 1.8rem;
    font-size: max(14px,1.8rem);
  }
  .flow__content--01 b.flow__ttl img{
    width: 54%;
  }
  .flow__content--01 h2 {
    padding: 14rem 0 6rem;
    max-width: 630px;
    width: 92%;
    margin: auto;
  }
  .flow__content--01 h2::before {
    font-size: 3.2rem;
    font-size: max(18px,3.2rem);
    top: 7rem;
    left: 0;
  }
  .flow__content--01 p {
    font-size: 2rem;
    font-size: max(14px,2rem);
    max-width: 630px;
    width: 92%;
    margin: auto;
    padding: 0 0 2rem;
  }
  .flow__content--01 .flow__emph {
    font-size: 2rem;
    font-size: max(12px,2rem);
    max-width: 630px;
    width: 92%;
    margin: auto;
    padding: 0 0 0 2.5rem;
  }
  .flow__content--01 b.flow__txt {
    margin: 8rem 0 3rem;
  }
  .flow__content--01 b.flow__txt img {
    max-width: 630px;
    width: 92%;
  }
  #flow ol > li {
    padding: 3.5rem 0;
    margin: 0 0 10rem;
  }
  #flow ol li img {
    width: 92%;
  }
  #flow ol > li:nth-child(1)::after, #flow ol > li:nth-child(2)::after {
    bottom: -7rem;
  }
  .flow__content--02 {
    padding: 5rem 4%;
    width: 92%;
  }
  .flow__content--02 b {
    font-size: 2.6rem;
    font-size: max(16px,2.6rem);
    padding: 0 0 3rem;
  }
  #flow ol li ul li, .flow__content--02 ul li {
    font-size: 2rem;
    font-size: max(14px,2rem);
    padding: 0 0 2rem 2.5rem;
  }
  #flow ol li p span,
  #flow ol li div span,
  .flow__content--02 p span {
    font-size: 1.8rem;
    font-size: max(12px,1.8rem);
    padding: 0 0 0 2.5rem;
    margin: 2.5rem 0 0;
  }
  .flow__content--02 ul li span {
    font-size: 1.8rem;
    font-size: max(12px,1.8rem);
    padding: 0;
    margin: 2.5rem 0 0;
  }
  .flow__content--02 {
    padding: 5rem 4% 3rem;
    width: 100%;
  }
  .reason__content--02 h3 {
    width: 100%;
    text-align: center;
    margin: 0 0 4rem;
    font-size: 3.6rem;
    font-size: max(18px,3.6rem);
  }
  .reason__content--02 h3 span {
    font-size: 2.4rem;
    font-size: max(16px,2.4rem);
    display: inline-block;
  }
  .reason__content--02 div ul li {
    font-size: 2.4rem;
    font-size: max(14px,2.4rem);
  }
}

/*----------------------------------------

  #service

------------------------------------------*/
#service{
  background-color: #f5f5f5;
}
.service__top{ 
  background-image: url("../img/service_top_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  width: 100%;
  height: 52rem;
  position: relative;
}
#service .service__top::after{
  content: "※和傘イルミネーション 村雲御所瑞龍寺門跡（滋賀県近江八幡市）";
  position: absolute;
  bottom: 2rem;
  right: 4%;
  color: #fff;
  font-size: 1.6rem;
}
#service h2{
  margin: 20rem auto 8rem;
  font-size: 4.8rem;
  letter-spacing: .1em;
  font-weight: 500; 
  max-width: 1000px;
  position: relative;
}
#service h2::before{
  content: "ー SERVICE";
  font-size: 3rem;
  font-size: max(18px,3rem);
  position: absolute;
  top: -5rem;
  left: 0;
  color: #4fbee5;
  font-weight: lighter;
}
.service__inner{
  padding: 0 6% 15rem;
}
#service table{
  max-width: 1000px;
  width: 100%;
  margin: auto;
}
#service table tr th{
  font-weight: 500; 
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  line-height: 1.5em;
  padding: 3rem 0;
  border-top: 1px solid #7c7d7d;
  width: 20%;
}
#service table tr th span{
  display: block;
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
}
#service table tr td{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  line-height: 1.5em;
  padding: 3rem 0 3rem 4rem;
  border-top: 1px solid #c7c6c6;
  width: 80%;
}
#service table tr:first-child th,
#service table tr:first-child td{
  border-top: 0;
}
#service table tr td > ul{
  margin: 1rem 0 0;
}
#service table tr td ul li{
  line-height: 1.5em;
  padding: 0 0 .5rem 1.5rem;
  position: relative;
}
#service table tr td ul li::before{
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
#service table tr td a{
  border-bottom: 1px solid;
  display: inline-block;  
  position: relative;
  padding: 0 2rem 0 0;
}
#service table tr td a::before{
  content: ">";
  transform: rotate(90deg) scale(.75,1.5);
  position: absolute;
  right: 0;
  top: 0;
}
#service table tr td ul.service__emph{
  margin: 1rem 0 0;
  font-size: 1.2rem;
  font-size: max(12px,1.2rem);
}
#service table tr td ul.service__emph li::before{
  content: "※";
}
.service__btn{
  background-color: #4fbee5;
  max-width: 700px;
  width: 100%;
  padding: 5rem 0;
  font-size: 2.6rem;
  font-size: max(14px,2.6rem);
  display: block;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  margin: 8rem auto 0;
  position: relative;
  font-weight: 500; 
}
.service__btn:hover{
  background-color: #31539b;
  opacity: 1!important;
}
.service__btn::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: scale(.45,1) translateY(-50%);
  font-size: 5.5rem;
  font-weight: lighter;
}


@media screen and (max-width:1100px) {
  #service h2::before {
    left: -4rem;
  }
}

@media screen and (max-width:750px) {
  .service__top{ 
    background-image: url("../img/service_top_sp.png");
    background-attachment: scroll;
    background-size: contain;
    height: 70rem;
  }
  .service__btn:hover {
    background-color: #4fbee5;
  }
  #service h2{
    margin: 6rem auto 4rem;
    font-size: max(20px,4.2rem);
  }
  #service h2::before {
    font-size: 3.2rem;
    top: -6rem;
    left: 0;
  }
  #service table tr th {
    font-size: 2.4rem;
    font-size: max(16px,2.4rem);
    padding: 3rem 0 0;
    border-top: 0;
    width: 100%;
    display: block;
  }
  #service table tr th span {
    display: inline-block;
    font-size: max(14px,1.8rem);
  }
  #service table tr td {
    font-size: 1.8rem;
    font-size: max(12px,1.8rem);
    padding: 0 0 4rem;
    width: 100%;
    display: block;
    border-top: 0;
    border-bottom: 1px solid #aaa;
  }
  #service table tr:last-child td {
    border-bottom: 0;
  }
  #service table tr td ul.service__emph {
    margin: 2rem 0 0;
    font-size: 1.8rem;
    font-size: max(14px,1.8rem);
  }
  #service table tr td ul li {
    padding: 0 0 .5rem 2.5rem;
  }
  #service .service__top::after{
    bottom: 8rem;
  }
}
@media screen and (max-width:400px) {
  #service table tr th {
    font-size: 14px;
  }
  #service table tr td ul.service__emph {
    font-size: 12px;
  }
}


/* ー商品概要表css ここまでーーーーーーーーーーーーーーーーー */
#service .service__inner table table{
  width: 100%;
  margin: 0;
}
#service .service__inner table table tr th{
  background-color: transparent;
  border: 1px solid #000;
  display: table-cell;
  width: 22%;
  height: 30px;
  text-align: left;
  vertical-align: middle;
  font-size: 1.7rem;
  line-height: 2rem;
  padding: 1rem;
  font-weight: normal;
}
#service .service__inner table table tr th .annotations{
  font-size: 12px;
}
#service .service__inner table table tr th span{
  display: inline-block;
  font-size: 1.7rem;
}
#service .service__inner table table tr td{
  background-color: transparent;
  border: 1px solid #000;
  text-align: center;
  display: table-cell;
  width: 22%;
  height: 30px;
  vertical-align: middle;
  padding: 1rem;
  font-size: 1.7rem;
  line-height: 2rem;
}
#service .service__inner table table tr td span{
  display: inline-block;
  font-size: 1.7rem;
}
#service .service__inner table #commission td p{
  text-align: right;
  font-size: 1.7rem;
  margin: 3px;
}
#service .service__inner table #commission .le{
  text-align: left;
  margin: 3px;
  font-size: 12px;
}
#service .service__inner table .linknone{
  padding: 0;
}
#service .service__inner table .linknone::before{
  display: none;
}
@media only screen and (min-width:750px){
  #service .service__inner table table tr th{
      font-size: 1.4rem;
      padding: 1rem;
  }
  #service .service__inner table table tr th span{
      font-size: 1.4rem;
  }
  #service .service__inner table table tr td{
      font-size: 1.4rem;
      padding: 1rem;
  }
  #service .service__inner table table tr td span{
      font-size: 1.4rem;
  }
  #service .service__inner table #commission td p{
    text-align: right;
    font-size: 14px;
    margin: 3px;
}
}
/* ー商品概要表css ここまでーーーーーーーーーーーーーーーーー */

/*----------------------------------------

  #faq

------------------------------------------*/
#faq{
  padding: 20rem 0 0;
}
.faq__content--01{
  max-width: 1000px;
  margin: auto;
  padding: 0 4% 15rem;
  position: relative;
}
#faq h2{
  margin: 0 auto 8rem;
  font-size: 4.8rem;
  font-size: max(20px,4.8rem);
  letter-spacing: .1em;
  font-weight: 500;
  max-width: 1000px;
  position: relative;
}
#faq h2::before{
  content: "ー FAQ";
  font-size: 3rem;
  font-size: max(18px,3rem);
  position: absolute;
  top: -5rem;
  left: 0;
  color: #4fbee5;
  font-weight: lighter;
}
.faq__content--01 ul li{
  font-size: 1.8rem;
  font-size: max(18px,1.8rem);
  margin: 0 0 2rem;
}
.faq__content--01 ul li > div:first-child{
  padding: 4.5rem 4.5rem 4.5rem 8rem;
  position: relative;
}
.faq__content--01 ul li > div:first-child{
  background-color: #fff;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 2px solid #005a9c;
  color: #005a9c;
}
.faq__content--01 ul li > div:last-child{
  background-color: #f0f7f9;
  position: relative;
  padding: 4rem 5rem 3rem 8rem;
  font-weight: 500;
}
.faq__content--01 ul li > div:first-child::before{
  content: "";
  width: 2.8rem;
  height: 3.4rem;
  background-image: url("../img/faq_q.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
}
.faq__content--01 ul li > div:last-child::before{
  content: "";
  width: 2.8rem;
  height: 3.2rem;
  background-image: url("../img/faq_a.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
}
.faq__cross{
  width: 8rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.faq__cross::before{
  content: ">";
  color: #005a9c;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%) rotate(90deg) scale(1,2);
  font-size: 2.4rem;
  font-size: max(18px,2.4rem);
  font-weight: lighter;
  transition: .2s;
}
.js-accordion.active .faq__cross::before{
  transform: translate(-50%) rotate(-90deg) scale(1,2);
}
.faq__content--01 ul li div p{
  line-height: 1.5em;
  padding: 0 0 1.5rem;
}
.faq__content--01 ul li div ul li{
  line-height: 1.5em;
  padding: 0 0 0 1.5rem;
  margin: 0 0 1rem;
  position: relative;
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
}
.faq__content--01 ul li div ul li::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width:1100px) {
  #faq h2::before {
    left: -4rem;
  }
}

@media screen and (max-width:750px) {
  #faq {
    padding: 8rem 0 0;
  }
  #faq h2 {
    margin: 10rem auto 4rem;
    font-size: 4rem;
  }
  #faq h2::before {
    font-size: 3.2rem;
    font-size: max(18px,3.2rem);
    top: -7rem;
    left: 0;
  }
  .faq__content--01 ul li > div:first-child {
    padding: 5rem 12rem 5rem 8rem;
  }
  .faq__content--01 ul li {
    font-size: max(14px,2rem);
    line-height: 1.5em;
  }
  .faq__content--01 ul li div p {
    padding: 0 0 2rem;
  }
  .faq__content--01 ul li div ul li {
    padding: 0 0 0 2.5rem;
    margin: 0 0 1rem;
    position: relative;
    font-size: 1.8rem;
    font-size: max(12px,1.8rem);
  }
}

/*----------------------------------------

  #tel

------------------------------------------*/
.tel__inner{
  padding: 15rem 4% 6rem;
  background-color: #f5f5f5;
}
.tel__inner .tel__num{
  max-width: 1000px;
  width: 100%;
  display: block;
  margin: 0 auto 10rem;
  cursor: auto;
}
.tel__inner .tel__num:hover{
  opacity: 1!important;
}
.tel__inner .tel__num img{
  width: 100%;
}
.tel__inner > p{
  max-width: 1000px;
  margin: 0 auto 6rem;
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  line-height: 1.5em;
  font-weight: 500;
}

.tel__inner table{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 2rem;
}
.tel__inner table tr th{
  font-weight: 500; 
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  line-height: 0.5em;
  padding: 3rem 0;
  border-top: 1px solid #cecece;
  width: 20%;
}
.tel__inner table tr td{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  line-height: 0.5em;
  padding: 3rem 0 3rem 4rem;
  border-top: 1px solid #cecece;
  width: 80%;
}
.tel__inner table p{
  padding: 0 0 3rem;
}
.tel__inner table p:last-child{
  padding: 0;
}
.tel__totop{
  max-width: 1000px;
  margin: auto;
}
.tel__totop a{
  font-size: 1.6rem;
  font-size: max(16px,1.6rem);
  text-align: right;
  display: block;
  margin: 0 0 0 auto;
  display: block;
  max-width: 175px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid;
  font-weight: 500;
}
@media screen and (min-width:1260px) and (max-width:1350px) {
  .tel__totop a{
    max-width: 188px;
  }
}
.tel__totop a::before{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  content: ">";
  position: absolute;
  top: 50%;
  left: .5rem;
  transform: translateY(-50%) scale(2,.75) rotate(-90deg);
}
#tel .tel__table--sp{
  display: none;
}  
#tel table tr td ul li{
  line-height: 1.5em;
  padding: 0 0 .5rem 1.5rem;
  position: relative;
}
#tel table tr td ul li::before{
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width:750px) {
  .tel__inner{
    padding: 15rem 4% 2rem;
  }
  #tel .tel__table {
    padding: 0 4%;
  }
  #tel table tr th {
    font-size: 16px;
    /*padding: 2rem 0 0;*/
    /*border-top: 0;*/
    width: 100%;
    /*display: block;*/
  }
  #tel table tr:first-child th {
    border-top: 1px solid #cecece;
  }
  #tel table tr td {
    font-size: 14px;
    /*padding: 0 0 2rem;*/
    width: 100%;
    /*display: block;*/
    border-top: 0;
    border-bottom: 1px solid #cecece;
  }
  #tel table tr:last-child td {
    border-bottom: none;
}
  #tel table tr td ul.service__emph {
    margin: 2rem 0 0;
    font-size: 1.8rem;
    font-size: max(14px,1.8rem);
  }
  #tel table tr td ul li {
    padding: 0 0 .5rem 2rem;
  }
  .tel__inner .tel__num {
    margin: 0 auto 6rem;
  }
  .tel__inner > p {
    margin: 0 4% 2rem;
    font-size: 14px; 
  }
  .tel__totop a {
    font-size: 2rem;
    font-size: max(16px,2rem);
    max-width: 300px;
    width: 46%;
  }
  .tel__totop a::before {
    font-size: 2rem;
    font-size: max(14px,2rem);
  }
  #tel .tel__table--pc{
    display: none;
  }
  #tel .tel__table--sp{
    display: block;
  }
  #tel .tel__table--sp td{
    border: none;
    padding: 0;
  }
  #tel .tel__table--sp td:last-child{
    border: none;
    padding: 0 0 2rem;
    border-bottom: 1px solid #aaa;
  }
}

@media screen and (max-width:550px) {
  .tel__totop a {
    width: 25rem;
  }
  #tel .tel__table {
    padding: 0;
  }
  .tel__inner > p {
    margin: 0 0 2rem;
  }
}
@media screen and (max-width:450px) {.tel__totop a {width: 30rem;}}
@media screen and (max-width:370px) {.tel__totop a {width: 33rem;}}
@media screen and (max-width:340px) {.tel__totop a {width: 36rem;}}
@media screen and (max-width:312px) {.tel__totop a {width: 38rem;}}

@media screen and (max-width:400px) {
  #tel table tr th {
    font-size: 14px;
  }
  #tel table tr td {
    font-size: 12px;
  }
}


/*----------------------------------------

  #sticky-btn

------------------------------------------*/

.sticky-btn{
  max-width: 390px;
  width: 60%;
  display: block!important;
  margin: 0 0 -4rem;
  z-index: 1;
  opacity: 0;
}
.sticky-btn a{
  display: block;
  width: 100%;
  margin: auto;
  font-size: 2.2rem;
  font-size: max(14px,2.2rem);
  text-align: center;
  font-weight: 500;
  letter-spacing: .1em;
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
  background-color: #4dc9ca;
  color: #fff;
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.sticky-btn a:hover{
  background-color: #e8833b;
  opacity: 1!important;
}
@media only screen and (max-width:1200px){
  .sticky-btn{
    right: 0rem;
  }
}
.sticky-btn::after{
  content: ">";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: scale(.45,1) translateY(-50%);
  font-size: 5rem;
  font-weight: lighter;
  color: #fff;
}
@media only screen and (max-width:750px){
  .sticky-btn a:hover{
    background-color: #4dc9ca;
  }
}


/*----------------------------------------

  #footer

------------------------------------------*/

#footer{
  padding: 8rem 4% 3.5rem;
}
#footer ul{
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  margin: auto;
}
.footer__box{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.footer__box a{
  display: block;
  color: #68b3ca;
  text-decoration: underline;
  -webkit-text-decoration: underline;
  line-height: 2em;
}
.light {
  font-weight: lighter;
  font-size: smaller;
  color: #cecece;
}
.footer__logo {
  display: block;
  margin: 2.5rem;
  width: 100%;
  max-width: 190px;
}
.footer__logo img {
  width: 100%;
  display: block;
}
#footer ul li:last-child{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  text-align: right;
  line-height: 2em;
  font-weight: lighter; 
}
#footer ul li:last-child span{
  display: inline-block;
}
#footer p{
  font-size: 1.4rem;
  font-size: max(14px,1.4rem);
  text-align: center;
  color: #999;
  letter-spacing: 0;
  margin: 2rem 0 0;
}


@media only screen and (max-width:750px){
  #footer {
    padding: 4rem 4%;
  }
  #footer ul {
    flex-direction: column-reverse;
  }
  #footer ul li:last-child {
    font-size: 14px;
    text-align: left;
    line-height: 1.5em;
    margin: 0 0 2rem;
  }
  .footer__box {
    font-size: 16px;
  }
  .footer__logo{
    text-align: center;
    width: 100%;
    margin: 2rem auto 0;
  }
  #footer p{
    font-size: 14px;
  }
}
@media screen and (max-width:400px) {
  #footer ul li:last-child {
    font-size: 14px;
  }
  .footer__box {
    font-size: 14px;
  }
}

/*20230309追加分*/

                            .tel__inner table.bank_agent{
                                width: 100%;
  /*white-space: nowrap;*/
                            }
                            .tel__inner table.bank_agent tr{
                                border-top: 1px solid;
                            }
                            .tel__inner table.bank_agent tr.both {
	border-bottom: 2px solid;
	border-top: 2px solid;
    border-color:#cecece;
}
                            .tel__inner table.bank_agent tr.bottom {
	border-bottom: 2px solid;
    border-color:#cecece;
}
                            .tel__inner table.bank_agent tr:last-child{
                                border-top: 1px solid;
                                border-bottom: 2px solid;
                                border-color:#cecece;
                            }
                            .tel__inner table.bank_agent th {
	width: 20%;
	background-color: #efeeee;
	padding-left: 1em;
    padding-right: 1em;
}
                            .tel__inner table.bank_agent td{
                                width: 40%;
                                padding-left: 1em;
    padding-right: 1em;
                            }
                            .tel__inner table.bank_agent td.left{
                                border-left: 2px solid;
                                border-color:#cecece;
                            }
                            .tel__inner > .bank_agentt{
	font-size: 1.6em;
color: #959494;
text-align: right;
}

/*追加*/
@media screen and (max-width:750px) {
.tel__inner table.bank_agent {
	width: 100%;
	table-layout: fixed;
	word-break: break-word;
    }
#tel table tr th {
	font-size: 11px;
	width: 31%;
}
.tel__inner table.bank_agent th {
	width: 20%;
	background-color: #efeeee;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
#tel table tr td {
	font-size: 12px;
	line-height: 1.5em;
}
#tel table tr th {
	font-size: 13px;
	width: 31%;
	line-height: 1.5em;
}
}