@charset "UTF-8";

html{
	font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

a{
    transition: .3s;
}
body{
    font-feature-settings: "palt";
    line-height: 1.8em;
    color: #333;
    font-family: 'noto sans', sans-serif;
}
.body__inner{
    overflow-x: hidden!important;
}
.only-pc{
    display: block!important;
}
.only-sp{
    display: none!important;
}
.only-pc-flex{
    display: flex!important;
}
.only-sp-flex{
    display: none!important;
}
p{
    font-size: max(14px,1.6rem);
    color: #333;
    line-height: 1.8em;
    font-weight: normal;
    letter-spacing: -.5px;
}
a,img{
    width: 100%;
    display: block;
    color: #333;
}

@media screen and (max-width:1260px) {
    html {font-size: .8vw;}
}
@media only screen and (max-width:960px){
    .only-sp-960{
        display: block!important;
    }
    .only-pc-960{
        display: none!important;
    }
}

@media only screen and (min-width:751px){
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
    a:hover{
        color: #346fd3;
    }
}
@media only screen and (max-width:750px){
    a:hover{
        opacity: 1!important;
    }
    html {font-size:1.65vw;}

    .only-pc{
        display: none!important;
    }
    .only-sp{
        display: block!important;
    }
    .only-pc-flex{
        display: none!important;
    }
    .only-sp-flex{
        display: flex!important;
    }
    p{
        font-size: max(14px,2rem);
        line-height: 1.5em;
        letter-spacing: 0;
    }
}

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

	js-accordion

-----------------------------------------------*/
.js-accordion-close{
    display: none;
}
@media all and (-ms-high-contrast: none) {
    .js-accordion-close{
        display: block;
    }
}


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

	section

-----------------------------------------------*/
.inner{
    max-width: 1140px;
    width: 92%;
    margin: auto;
}
.gray{
    background-color: #f2f2f2;
}
b.ttl{
    font-size: max(14px,1.8rem);
    position: relative;
    padding: 0 0 0 1.5em;
    display: block;
    line-height: 1.5em;
    min-width: 170px;
}
b.ttl::before{
    content: "";
    width: 1.5rem;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #346fd3;
}
@media screen and (max-width:750px) {
    .inner{
        width: 100%;
    }
}


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

	header

-----------------------------------------------*/
#header{
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 10;
    backdrop-filter: blur(3px);
}
#header .header__content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2%;
    transition: .3s;
}
#header .header__content .header__list{
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#header .header__content .header__list li{
    font-size: max(12px,1.8rem);
    position: relative;
    display: inline-block;
}
@media screen and (min-width:751px) {
    #header .header__content .header__list li{
        font-size: max(11px,1.8rem);
        white-space: nowrap;
    }
}
#header .header__content .header__list li a{
    position: relative;
}
#header .header__content .header__list li a::before{
    content: "/";
    color: #ddd;
    font-size: 2.4em;
    vertical-align: middle;
    display: inline-block;
    font-weight: normal;
    margin: -.5rem 2rem 0;
}
#header .header__content .header__list li a{
    font-weight: bold;
    line-height: 1.2em;
    position: relative;
}
#header .header__content .header__list li::after:last-child{
    display: none;
}
#header .header__content .header__icon-list {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#header .header__content .header__icon-list li{
    max-width: 36px;
    width: 22%;
    margin: 0 0 0 1rem;
}
#header .header__content .header__icon-list li:last-child{
    max-width: 222px;
    width: 100%;
    margin: 0 0 0 3rem;
}
#header .header__page-list{
    padding: 1.5rem 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3;
    transition: .3s;
}
#header .header__page-list li{
    font-weight: bold;
    font-size: max(14px,1.6rem);
    margin: 0 2rem;
    line-height: 1.2em;
}
#header .header__ex a::after{
    content: "";
    background-image: url("../img/ex_link_black.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    margin: 0 0 -.2rem .5rem;
}

@media screen and (min-width:751px) {
    #header.fixed .header__content{
        padding: 1rem 2%;
    }
    #header.fixed{
        background-color: rgba(255,255,255,.9);
        box-shadow: 0 0 20px rgba(0,0,0,.1);
    }
    #header.fixed .header__page-list{
        padding: 1rem 2%;
    }
    #header.fixed .header__page-list{
        background-color: rgba(243,243,243,.5);
    }
    #header .header__content .header__list li:last-child a::after{
        content: "/";
        color: #ddd;
        font-size: 2.4em;
        vertical-align: middle;
        display: inline-block;
        font-weight: normal;
        margin: -.5rem 2rem 0;
    }
    #header .header__ex a:hover::after{
        background-image: url("../img/ex_link_blue.png");
    }

}
@media screen and (max-width:750px) {
    nav{
        background-color: rgba(255,255,255,.8);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }
    nav ul{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    nav ul li:first-child{
        max-width: 306px;
        width: 50%;
    }
    nav ul li:last-child,
    #header #ham-close{
        max-width: 100px;
        width: 10rem;
        cursor: pointer;
        margin: 0 0 0 2rem;
        background-color: #eaeaea;
        padding: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header #ham-close{
        position: fixed;
        top: 0;
        right: 0;
        background-color: #346fd3;
    }
    #header,
    #header.fixed{
        z-index: 12;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        background-color: #fff;
        padding: 10rem 0 0;
        right: 0;
        left: auto;
        width: 50%;
        min-width: 240px;
    }
    #header.active{
        opacity: 1;
        visibility: visible;
    }
    #header .header__content .header__list {
        width: 100%;
    }
    #header .header__content {
        padding: 2rem 6% 4rem 4em;
    }
    #header .header__page-list {
        padding: 4rem 6%;
      }
      #header ul{
        justify-content: flex-start!important;
        align-items: flex-start!important;
      }
      #header ul li a{
        position: relative;
        padding: 0 0 0 1em;
      }
      #header ul.header__list li a::after{
        content: "";
        background-image: url("../img/arrow_blue.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 1.8rem;
        height: 1.8rem;
        min-width: 15px;
        min-height: 15px;
        display: inline-block;
        margin: 0 0 0 1rem;
        position: absolute;
        top: 50%;
        left: -1em;
        transform: translateY(-50%);
      }
      #ham-bg{
        width: 100%;
        height: 120%;
        background-color: #000;
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        transition: .3s;
        z-index: 11;
        cursor: pointer;
      }
      #ham-bg.active{
        opacity: .7;
        visibility: visible !important;;
      }
      #header .header__page-list li:last-child{
        margin: 0;
        }
        #header .header__content .header__list li:last-child {
            margin: 0;
          }
    #header .header__content{
        flex-direction: column-reverse;
    }
    #header .header__list{
        flex-direction: column;
    }
    #header .header__content .header__list li a::before{
        display: none;
      }
      #header .header__content .header__list li {
        margin: 0 0 3rem;
        }
        #header .header__page-list{
            flex-direction: column;
        }
        #header .header__page-list li{
            margin: 0 0 3rem;
        }
}

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

	mv

-----------------------------------------------*/
#mv{
    background: linear-gradient(#346fd3 70%, transparent 30%);
    margin: 14rem 0 0;
    padding: 3rem 4% 0;
}
#mv h1{
    /* max-width: 1140px; */
    width: 100%;
    margin: auto;
}
@media screen and (max-width:750px) {
    #mv{
        margin: 10rem 0 0;
    }
}

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

	anchor

-----------------------------------------------*/
.anchor{
    padding-top: 10rem;
    margin-top: -10rem;
    z-index: -1;
    position: relative;
}

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

	goods

-----------------------------------------------*/
#goods{
    padding: 13rem 4% 0;
    border-top: 1px solid #bbb;
}
#goods .goods__content{
    margin: 0 0 12rem;
}
#goods .goods__ttl{
    margin: 0 0 0 -8%;
    mix-blend-mode: multiply;
}
#goods .goods__ttl--01{
    max-width: 1021px;
    width: 100%;
}
#goods h2{
    font-weight: bold;
    font-size: max(18px,3.2rem);
    color: #333;
    line-height: 1.5em;
    min-width: 180px;
    word-break: keep-all;
    min-width: 310px;
}
#goods h2 small{
    color: #346fd3;
    font-size: max(12px,1.4rem);
    display: block;
    line-height: 1em;
}
#goods h2 span{
    background-color: #346fd3;
    color: #fff;
    font-size: max(14px,1.8rem);
    display: inline-block;
    line-height: 1.5em;
    padding: .5rem 1rem;
    font-weight: bold;
    margin: 0 0 2rem;
}
#goods .goods__content--03 h2{
    min-width: 300px;
    margin: -6rem 0 0;
}
#goods .goods__content--03 .goods__flex--01{
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
}
#goods .goods__content--03 .goods__slick{
    margin: 0 0 0 6rem;
}
#goods .goods__flex{
    display: flex;
}
#goods .goods__flex--01{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: -5rem 0 3rem;
    padding: 3rem 0 0;
    position: relative;
}
#goods .goods__flex--01::after{
    content: "";
    width: 100%;
    height: 46rem;
    background-color: #f2f2f2;
    position: absolute;
    top: 0%;
    right: -6%;
    z-index: -1;
}
#goods .goods__slick{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
    max-width: 100%;
    width: 100%;
}
#goods .goods__slick li{
    position: relative;
    padding: 0 3rem;
    
}
#goods .goods__slick li::after{
    content: "";
    background-color: #ddd;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(10deg);
}
#goods .goods__slick li:last-child::after{
    display: none;
}
#goods .goods__slick img{
    max-width: 300px;
    width: 100%;
    margin: auto;
}
#goods .goods__content--02 .goods__slick li{
    width: 55%;
}
#goods .goods__flex h3{
    max-width: 279px;
    width: 100%;
    margin: 1rem 6rem 0 0;
}
#goods .goods__flex--02{
    margin: 0 0 4rem;
}
#goods .goods__flex--02 p{
    font-size: max(18px,3rem);
    line-height: 1.5em;
}
#goods .goods__movie{
    max-width: 860px;
    width: 77%;
    margin: 0 auto 6rem;
    cursor: pointer;
}
#goods .goods__flex ol {
    width: 80%;
}
#goods .goods__flex ol li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 0;
    border-bottom: 1px solid #ddd;
}
#goods .goods__flex ol li:first-child {
    padding: 0 0 3rem;
}
#goods .goods__flex ol li h4{
    font-size: max(18px,3.2rem);
    font-weight: normal;
    min-width: 27rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.2em;
    color: #333;
    margin: 0 4rem 0 0;
}
#goods .goods__flex ol li h4 small{
    font-size: max(14px,1.6rem);
    color: #346fd3;
    font-weight: bold;
    margin: 0 2rem 0 0;
    min-width: 50px;
}
#goods .goods__content .ttl,
#ex .goods__content .ttl{
    margin: 0 0 -2rem;
}
#goods .goods__plus-list,
#ex .ex__plus-list{
    display: flex;
    justify-content: center;
    margin: 4rem 0 0;
    width: 100%;
    max-width: 100%;
}
#goods .goods__plus-list li,
#ex .ex__plus-list li{
    padding: 5rem 1rem;
    text-align: center;
    font-size: max(14px,1.8rem);
    color: #346fd3;
    background-color: #daeaff;
    max-width: 380px;
    width: 31%;
    margin: 0 2rem 0 0;
    position: relative;
    line-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
}
#goods .goods__plus-list li:last-child,
#ex .ex__plus-list li:last-child{
    margin: 0;
}
#goods .goods__plus-list li::after,
#ex .ex__plus-list li::after{
    content: "";
    background-image: url("../img/plus.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 5.4rem;
    height: 5.4rem;
    position: absolute;
    top: 50%;
    right: -3.5rem;
    transform: translateY(-50%);
    z-index: 1;
}
#goods .goods__plus-list li:last-child::after,
#ex .ex__plus-list li:last-child::after{
    display: none;
}
#goods .goods__plus-list li small,
#ex .ex__plus-list li small{
    display: block;
    color: #333;
}
#goods .goods__plus-list li b,
#ex .ex__plus-list li b{
    font-size: max(18px,2.4rem);
}

.modal-open {
    /* overflow: hidden; */
    box-sizing: border-box;
    max-width: 400px;
    margin: auto;
  }
  .modal-open img {
    margin: auto;
    display: block;
    cursor: pointer;
    transition: .3s;
  }
  /* .modal-open img:hover {
    transform: scale(1.05, 1.05);
  } */
  
  .sars-cov-2__modal{
  position: relative;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  }
  .sars-cov-2__modal.clicked{
    visibility: visible;
    opacity: 1;
  }
  
  .modal-win{
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .modal-win.clicked{
    opacity: 1;
    visibility: visible;
  }
  .modal-bg{
  content: "";
  display: block;
  background-color: #000;
  opacity: .8;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  z-index: 100;
  cursor: pointer;
  }
  .modal-window{
    display: block;
  }
  .modal-window iframe{
    width: 100rem;
    height: 60rem;
    position: fixed;
    top: 18%;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
  }
  .modal__tel {
    margin: 1rem auto 0;
  }
  .modal__tel img{
    width: 92%!important;
    max-width: 180px!important;
  }
  

  #goods .goods__slick-sub {
    width: 100%;
    justify-content: flex-end;
    margin: 0 0 10rem;
}
#goods .goods__slick-sub li{
    padding: .5rem;
    width: 80px;
}
#goods .goods__slick-sub li img{
    background-color: #fff;
    border-top: 4px solid #ddd;
    cursor: pointer;
    min-width: 80px;
}
#goods .goods__slick-sub .slick-slide.slick-current.slick-center li img{
    border-top: 4px solid #346fd3;
}
#goods .goods__slick-sub div{
    width: 100%!important;
    max-width: 280px;
}
#goods .slick-track{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 100px;
  }
::-webkit-scrollbar-thumb {
    background-color: #fff;
  } */

  @media only screen and (max-width : 1500px) {
    .modal-window iframe{
        width: 80rem;
        height: 48rem;
        top: 12%;
      }
  }
  @media only screen and (max-width : 1100px) {
    #goods .goods__flex ol li h4{
        min-width: 30rem;
    }
  }
  @media only screen and (max-width : 750px) {
    .modal-window iframe{
      width: 92%;
    }
    #goods {
        padding: 5rem 0 0;
    }
    #goods .goods__content {
        margin: 0 0 4rem;
        padding: 0 4%;
      }
      #goods .goods__content:last-child,
      #ex .ex__content:last-child {
        padding: 4rem 4% 0;
        border-top: 1px solid #bbb;
      }
      #goods .goods__ttl {
        margin: 0 0 0 -4%;
      }
      #goods .goods__flex--01::after {
        width: 80%;
        top: 3rem;
        right: -6%;
      }
      #goods .goods__flex--01::after {
        height: 120%;
      }
      #goods .goods__flex--01 {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin: -5rem 0 3rem;
        padding: 3rem 0 0;
        flex-direction: column-reverse;
      }
      #goods .goods__flex--02 {
        margin: 0;
        flex-direction: column;
      }
      #goods .goods__flex--03 {
        margin: 0;
        flex-direction: column;
      }
      #goods .goods__flex ol {
        width: 100%;
      }
      #goods .goods__flex ol li {
        align-items: flex-start;
        padding: 3rem 0;
        flex-direction: column;
      }
      #goods .goods__flex ol li h4 {
        font-size: max(18px,3.2rem);
        min-width: 27rem;
        margin: 0 0 2rem;
      }
      #goods .goods__flex ol li:first-child {
        padding: 2rem 0 3rem;
      }
      #goods .goods__content--02 .goods__slick li {
        width: 77%;
      }
      #goods .goods__slick {
        justify-content: center;
      }

      #goods .goods__flex h3 {
        max-width: 105%;
        width: 105%;
        margin: 1rem 0 2rem;
        margin-left: calc(((100vw - 100%) / 2) * -1);
        margin-right: calc(((100vw - 100%) / 2) * -1);
      }
      #goods .goods__flex--02 p {
        font-size: max(16px,2.4rem);
      }
      #goods .goods__movie {
        width: 100%;
        margin: 4rem auto;
      }

      #goods .goods__plus-list,
      #ex .ex__plus-list {
        flex-direction: column;
        margin: 4rem 0 0;
      }
      #goods .goods__plus-list li,
      #ex .ex__plus-list li {
        max-width: 100%;
        width: 100%;
        margin: 0 0 2rem;
      }
      #goods .goods__plus-list li::after,
      #ex .ex__plus-list li::after {
        top: auto;
        bottom: -4rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
      }
      #goods .goods__plus-list li,
      #ex .ex__plus-list li {
        padding: 4rem 1rem;
        font-size: max(18px,2rem);
    }
    #goods .goods__content .ttl,
    #ex .ex__content .ttl {
        margin: 0 0 2rem;
      }
      .modal-window iframe{
        width: 92%;
        height: 40rem;
        top: 25%;
      }
      .modal-open {
          max-width: 100%;
        }
  }

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

	worry

-----------------------------------------------*/
#worry{
    padding: 5.5rem 4% 0;
}
#worry h2{
    font-size: max(24px,3.6rem);
    color: #346fd3;
    line-height: 1.3em;
    text-align: center;
    font-weight: bold;
    margin: 0 0 4rem
}
#worry h2 small{
    display: block;
    font-size: max(18px,2.4rem);
}
#worry .worry__list{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#worry .worry__list li{
    margin: 0 5rem 0 0;
    max-width: 674px;
    width: 31%;
}
#worry .worry__list li:last-child{
    margin: 0;
}
#worry .worry__list li img{
    width: 100%;
    margin: 0 0 2.5rem;
}
#worry .gray--01{
    background: linear-gradient(transparent 50%, #f2f2f2 50%);
    padding: 0 2%;
}

/* #worry .worry__content h2{
    font-size: max(24px,4.8rem);
}
#worry .worry__content h2 em > span{
    background: linear-gradient(transparent 70%, #fdd000 30%);
} */
#worry .gray--02{
    padding: 10rem 2% 6rem;
}
#worry .worry__content h2{
    max-width: 712px;
    width: 60%;
    margin: 0 auto 4.5rem;
}
#worry .worry__recom-list{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
#worry .worry__recom-list > li{
    max-width: 347px;
    width: 31%;
    margin: 0 4.5rem 0 0;
}
#worry .worry__recom-list li ul.worry__txt-list{
    margin: 0 0 2rem;
}
#worry .worry__recom-list li ul.worry__txt-list li{
    max-width: 100%;
    width: 100%;
    margin: 0 0 .5rem;
    font-size: max(14px,1.6rem);
    font-weight: bold;
    line-height: 1.5em;
    padding: 0 0 0 1em!important;
    position: relative;
}
#worry .worry__recom-list li ul.worry__txt-list li::before{
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
    color: #346fd3;
}
#worry .worry__recom-list > li:last-child{
    margin: 0;
}
#worry .worry__recom-list li div{
    margin: 0 0 3rem;
    position: relative;
}
#worry .worry__recom-list li div::after{
    content: "";
    width: 30%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: -2rem;
    transform: translateY(-50%);
    border-right: 4px dotted #bbb;
}
#worry .worry__recom-list li:last-child div::after{
    display: none;
}
#worry .worry__recom-list li h3{
    font-size: max(18px,2.3rem);
    color: #346fd3;
    line-height: 1.2em;
    font-weight: bold;
    margin: 0 0 1rem;
}
#worry .worry__recom-list li h3 span,
#worry .worry__recom-list li h3 em{
    display: inline-block;
    padding: .5rem 1rem;
    margin: 0 .5rem 1rem 0;
    background-color: #346fd3;
    color: #fff;
    font-size: max(12px,1.4rem);
    font-weight: bold;
    line-height: 1.2em;
}
#worry .worry__recom-list li h3 em{
    background-color: #e26d00;
    border-radius: 100px;
    font-style: normal;
}
#worry .worry__recom-list li small{
    font-size: max(12px,1.4rem);
    display: block;
    margin: 0 0 1rem;
    line-height: 1.5em;
    min-height: 40px;
}
#worry .worry__recom-list li p{
    font-weight: bold;
    margin: 0 0 1.5rem;
    line-height: 1.5em;
}

#worry .worry__icon-list{
    display: flex;
}
#worry .worry__icon-list li{
    width: 15%;
    margin: 0.5rem;
}
#worry .worry__icon-list li img{
    margin: 0 0 1rem;
}
#worry .worry__icon-list li p{
    font-size: max(10px,1rem);
    text-align: center;
}
#worry .worry__icon-list .worry__off p{
    color: #c4c4c4;
}
#worry .gray--02 .inner{
    max-width: 1520px;
}
@media screen and (min-width:1351px) {
        #worry .worry__recom-list li ul.worry__txt-list{
            min-height: 185px;
        }
}
@media screen and (max-width:1865px) and (min-width:1351px) {
    #worry .worry__icon-list {
        flex-wrap: wrap;
        max-width: 250px;
      }
      #worry .worry__icon-list li{
        min-width: 50px;
        }
        #worry .worry__recom-list li ul.worry__txt-list{
            min-height: 185px;
        }
}
@media screen and (max-width:1350px) and (min-width:751px) {
    #worry .worry__recom-list {
        flex-wrap: wrap;
      }
      #worry .worry__recom-list > li {
        width: 45%;
      }
      #worry .worry__recom-list li:nth-child(2) div::after {
        display: none;
      }
      #worry .worry__recom-list li ul.worry__txt-list{
          min-height: 160px;
      }
}
@media screen and (max-width:750px) {
    #worry .worry__list {
        flex-direction: column;
      }
      #worry .worry__list > li{
        width: 100%;
        margin: 0 0 4rem!important;
        }
        #worry .gray--01{
            background: transparent;
            padding: 0;
        }
        #worry .gray--02 {
            padding: 5rem 4%;
            margin-left: calc(((100vw - 100%) / 2) * -1);
            margin-right: calc(((100vw - 100%) / 2) * -1);
        }
        #worry .worry__content h2 {
            width: 100%;
            margin: 0 auto 1rem;
        }
        #worry .worry__recom-list {
            flex-direction: column;
          }
          #worry .worry__recom-list > li {
            width: 100%;
            max-width: 100%;
            width: 100%;
            padding: 5rem 0;
            }
              #worry .worry__recom-list > li:last-child {
                  padding: 5rem 0 0;
                }
              #worry .worry__recom-list li div::after {
                top: -4rem;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                border-right: 0;
                border-top: 4px dotted #bbb;
              }
              #worry .worry__recom-list li:first-child div::after {
                display: none;
              }
              #worry .worry__recom-list li:last-child div::after {
                display: block;
              }
              #worry .worry__recom-list li h3{
                  font-size: max(18px,3rem);
                  text-align: center;
                  margin: 0 0 2rem;
              }
              #worry .worry__recom-list li h3 span {
                padding: 1rem 1rem .5rem;
                margin: 0 .5rem 1.5rem;
                font-size: max(14px,2rem);
                line-height: 1.2em;
              }
              #worry .worry__recom-list > li small {
                font-size: max(14px,1.8rem);
                margin: 0 auto 3rem;
                max-width: 550px;
              }
              #worry .worry__recom-list > li p{
                  margin: 0 0 2rem;
              }
}

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

  choice & about

-----------------------------------------------*/
#choice .gray,
#about .gray{
    padding: 4rem 2% 0;
  }
  #choice h3,
  #about h3{
    font-size: max(24px,3.6rem);
    color: #346fd3;
    line-height: 1.3em;
    text-align: center;
    font-weight: bold;
    margin: 0 0 4rem
  }
  #choice h3 small,
  #about h3 small{
    display: block;
    font-size: max(18px,2.4rem);
  }
  #choice .ttl,
  #about .ttl{
    margin: 0 0 2rem;
  }
  #choice .choice__flex{
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  #choice .choice__flex li:first-child{
    margin: 0 6rem 0 0;
  }

  #about .about__img{
    max-width: 800px;
    width: 100%;
    margin: auto;
  }
  
  @media screen and (max-width:750px) {
    #choice,
    #about{
      padding: 2rem 0 5rem;
    }
    #choice .gray,
    #about .gray{
      background-color: transparent;
    }
    #choice .choice__flex{
      flex-direction: column;
    }
    #choice .choice__flex li:first-child{
      margin: 0 0 4rem;
    }
  }

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

	banner

-----------------------------------------------*/
.banner{
    padding: 6rem 4% 2rem;
}
.banner .banner__flex{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
}
.banner .banner__flex ul{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    max-width: 840px;
    width: 100%;
    margin: 0 0 4rem;
}
.banner .banner__flex ul li{
    font-size: max(16px,2.4rem);
    line-height: 1.5em;
    width: 45%;
    margin: 0;
}
.banner .banner__flex ul li:first-child{
    margin: 0 6rem 0 0;
}
.banner .banner__flex ul li span{
    border-left: 6px solid #346fd3;
    padding: 0 6rem 0 2rem;
    position: relative;
    display: block;
    cursor: pointer;
}
.banner .banner__flex ul li span::after{
    content: "";
    background-image: url("../img/arrow_gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 4.9rem;
    height: 3.6rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: .3s;
}
.banner__img{
    max-width: 840px;
    width: 74%;
    margin: auto;
}
.banner .banner__flex ul li small{
    display: block;
    color: #346fd3;
    font-size: max(16px,2rem);
    font-weight: bold;
}


.banner .modal .modal__table-wrapper{
    position: fixed!important;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    max-width: 1140px;
    width: 92%;
}
.banner .modal table{
    background-color: #fff;
    position: relative;
    width: 100%;
}
.banner .modal table tr th,
.banner .modal table tr td{
    border: 1px solid #ddd;
    font-size: max(12px,1.6rem);
    text-align: center;
    line-height: 1.5em;
}
.banner .modal table tr th{
    padding: 1rem;
    text-align: center;
    background-color: #ddd;
    border: 1px solid #fff;
}
.banner .modal table tr td{
    padding: 2rem 1rem;
}
.banner .modal table tr td img{
    max-width: 70px;
    width: 100%;
    margin: 0 2rem 0 0;
}
.banner .modal table tr td a img{
    margin: auto;
}
.banner .modal table tr td .modal__txt{
    margin: 0 0 2rem;
}
.banner .modal table tr td .modal__flex{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:1500px) {
    .banner .modal table{
        top: 12%;
    }
}


@media screen and (min-width:751px) {
.banner .banner__flex ul li span:hover::after{
    right: -1rem;
    }
}

@media screen and (max-width:750px) {
    .banner .banner__flex {
        flex-direction: column;
      }
      .banner b.ttl{
        margin: 0 0 4rem;
      }
      .banner .banner__flex ul {
        flex-direction: column;
        margin: 0 0 4rem;
      }
      .banner .banner__flex ul li:first-child {
        margin: 0 0 3rem;
      }
      .banner .banner__flex ul li {
        font-size: max(16px,3.2rem);
        width: 100%;
        line-height: 1.4em;
      }
      .banner .banner__flex ul li span::after {
        right: 6rem;
        width: 7rem;
        height: 5rem;
      }
      .banner .banner__img {
        width: 100%;
      }
      .banner .modal table{
        min-width: 900px;
      }
}




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

	side

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

@media screen and (min-width:751px) {
#side{
    position: fixed;
    right: -100px;
    top: 30%;
    max-width: 100px;
    width: 8%;
    transition: .3s;
    z-index: 10;
}
#side.fixed{
    right: -2rem;
}
#side ul li:first-child{
    /* display: none; */
}
#side ul li{
    transition: .3s;
    position: relative;
}
#side ul li:hover{
    transform: translateX(-1rem);
}
#side ul li:first-child{
    margin: 0 0 1.5rem;
}
#side ul li a{
    background-color: #346fd3;
    color: #fff;
    padding: 5.5rem 3rem 3rem;
    border-radius: 8px 0 0 8px;
    text-orientation: upright;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    font-size: max(14px,1.8rem);
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 10px 0 10px rgba(0,0,0,.2);
    border: 1px solid #ddd;
}
#side ul li a::before{
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 2.5rem;
    left: 3rem;
}
#side ul li a:last-child::before{
    left: 3.3rem;
}
#side ul li:first-child a::before{
    background-image: url("../img/side_icon_01.png");
    width: 1.8rem;
    height: 2.2rem;
}
#side ul li:last-child a::before{
    background-image: url("../img/side_icon_02.png");
    width: 1.5rem;
    height: 2.1rem;
}
}

@media screen and (max-width:750px) {
    #side {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        background-color: #346fd3;
        padding: 2rem 4%;
      }
      #side ul{
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
      }
      #side ul li{
        width: 50%;
      }
      #side ul li:first-child{
        margin: 0 2rem 0 0;
      }
      #side ul li a{
        background-color: #fff;
        padding: 2.5rem 4% 2rem 4rem;
        border-radius: 5px;
        font-weight: bold;
        text-align: center;
        font-size: max(14px,2rem);
        position: relative;
      }
      #side ul li a::before{
        content: "";
        background-image: url("");
        background-size: contain;
        background-repeat: no-repeat;
        width: 4rem;
        height: 4rem;
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
      }
      #side ul li:first-child a::before{
        background-image: url("../img/side_icon_01_sp.png");
      }
      #side ul li:last-child a::before{
        background-image: url("../img/side_icon_02_sp.png");
      }
}



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

	totop

-----------------------------------------------*/
.totop{
    position: fixed;
    bottom: 2rem;
    right: 2%;
    width: 3.6rem;
    height: 4.9rem;
    transition: .3s;
}
.totop.fade_out{
    opacity: 0;
    visibility: hidden;
}
.totop.fade_in{
    opacity: 1;
    visibility: visible;
}
@media screen and (max-width:750px) {
    .totop{
        bottom: 12rem;
    }
}

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

	ex

-----------------------------------------------*/
#ex{
    padding: 8rem 4%;
    border-top: 1px solid #bbb;
}
#ex h2{
    font-size: max(24px,3.2rem);
    color: #333;
    margin: 0 0 8rem;
    line-height: 1.5em;
    text-align: center;
    font-weight: bold;
  }
  #ex ul{
    max-width: 960px;
    margin: auto;
  }
  #ex ul li{
    border-bottom: 6px solid #fff;
    background-color: #f2f2f2;
    padding: 3rem;
  }
  #ex ul li figure{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  #ex ul li figure span{
    max-width: 211px;
    width: 27%;
    margin: 0 3rem 0 0;
  }
  #ex ul li figure figcaption{
    width: 74%;
  }
  #ex ul li figure figcaption h3{
    color: #333;
    font-size: max(18px,2.4rem);
    padding: 2rem 0;
    line-height: 1.5em;
    font-weight: bold;
  }
  #ex .banner__img{
    margin: 4rem auto 0;
  }
@media screen and (max-width:750px) {
    #ex{
        padding: 4rem 0;
    }
    #ex h2 {
        margin: 0 4% 4rem;
        font-size: max(20px,2.4rem);
      }
      #ex ul li figure span {
        max-width: 211px;
        width: 100%;
        margin: 0 2rem 0 0;
      }
      #ex ul li figure figcaption h3 {
        margin: 0 0 1.5rem;
        padding: 0;
      }
      #ex .banner__img{
        margin: 4rem auto;
      }
}
@media screen and (max-width:400px) {
    #ex ul li figure{
        flex-direction: column;
    }
    #ex ul li figure figcaption{
      width: 100%;
    }
    #ex ul li figure span{
        margin: 0 auto 2rem;
        overflow: hidden;
        display: block;
        height: 250px;
        width: 100%;
        max-width: 100%;
    }
}

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

	service

-----------------------------------------------*/
#service {
    padding: 4rem 4% 0;
}
#service h3{
    display: block;
    font-size: max(18px,2.4rem);
    text-align: center;
    margin: 0 0 4rem;
    line-height: 1.2em;
}
#service h3 b{
    font-size: max(24px,3.6rem);
    color: #346fd3;
    text-align: center;
    font-weight: bold;
    margin: 0 0 4rem;
    background: linear-gradient(transparent 60%, #ffce00 40%);
    line-height: 1.8em;
    font-style: italic;
}
#service .service__flex{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4rem;
}
#service .service__flex iframe{
    width: 100%;
}
#service .service__video {
  padding: 55px 1rem 1rem;
  margin: 1rem;
  width: 100%;
  background-color: #346fd3;
  position: relative;
}
#service .service__video::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #346fd3;
    font-size: max(16px,1.8rem);
    font-weight: bold;
    padding: 2rem 4rem 2rem 2rem;
    background-color: #f2f2f2;
    line-height: 0.9em;
    clip-path: polygon(0% 100%, 0% 0%, 82.5% 0%, 100% 100%);
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#service .service__video:first-child::before {
    content: "アプリ仕様説明①";
}
#service .service__video:last-child::before {
    content: "アプリ仕様説明②";
}
#service p{
    text-align: center;
}
#service .service__btn{
    background-color: #f2f2f2;
    color: #346fd3;
    max-width: 430px;
    width: 40%;
    font-size: max(16px,2rem);
    padding: 2rem 2rem 1.5rem 10rem;
    position: relative;
    overflow: hidden;
    margin: 2rem auto 10rem;
    font-weight: bold;
    line-height: 1.5em;
}
#service .service__btn span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 1.5rem 1.5rem 1.5rem 0;
    background-color: #346fd3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
  }
  #service .service__btn span img {
    width: 3.1rem;
    height: 2.2rem;
    transition: .3s;
  }


  @media screen and (min-width:751px) {
    #service .service__btn:hover span img{
          transform: translateX(25%);
      }
  }
  @media screen and (max-width:750px) {
    #service .service__flex{
        flex-direction: column;
    }
    #service .service__btn{
      width: 80%;
    }
    #service .service__btn{
        margin: 2rem auto 6rem;
    }
  }
  @media screen and (max-width:400px) {
    #service .service__video::before {
        padding: 2rem 6rem 2rem 2rem;
    }
  }


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

	voice

-----------------------------------------------*/
#voice{
    background-color: #f2f2f2;
}
#voice .voice__flex{
    display: flex;
    justify-content: flex-start;
}
#voice .voice__flex h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: max(18px,3.2rem);
    line-height: 1.5em;
    max-width: 450px;
    min-width: 300px;
    width: 100%;
}
#voice .voice__flex h2 img{
    display: block;
    max-width: 150px;
    width: 100%;
    margin: 0 0 1rem;
}
#voice .voice__flex h2{
    background-color: #346fd3;
    color: #fff;
    font-weight: bold;
}
#voice .voice__content{
    padding: 3rem 3.5rem;
    overflow-x: scroll;
}
#voice ul{
    display: flex;
    justify-content: flex-start;
    width: calc(380px * 3 + 20rem);
    /* margin: 0 0 4rem; */
}
#voice ul li{
    display: inline-block;
    background-color: #fff;
    width: 380px;
    margin: 0 3.5rem 0 0;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    z-index: 1;
}

/* .scrollbar {
    width: 100%;
    overflow-x: scroll;
  }
  
  .scrollbar::-webkit-scrollbar {
    height: 10px;
    width: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .scrollbar::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 100px;
  }
  
  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #346fd3;
    border-radius: 100px;
  } */
  

#voice ul li figure figcaption{
    padding: 2rem;
}
#voice ul li figure figcaption h3{
    z-index: 1;
    position: relative;
    margin: -4rem 0 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: max(16px,1.8rem);
    line-height: 1.2em;
}
#voice ul li figure figcaption h3 img{
    max-width: 95px;
    width: 100%;
    margin: 0 1rem 0 0;
}
#voice ul li figure figcaption h3 span{
    margin: 0 0 1rem;
    display: block;
    font-weight: bold;
}
#voice ul li figure figcaption p{
    font-size: max(14px,1.4rem);
}

@media screen and (max-width:750px) {
    #voice .voice__flex {
        flex-direction: column;
        justify-content: stretch;
      }
      #voice .voice__flex h2 {
        max-width: 100%!important;
        min-width: auto;
        width: 100%;
        padding: 4rem;
        font-size: max(18px,2.4rem);
      }
      #voice .voice__flex h2 img {
        width: 33%;
        margin: 0 0 1.5rem;
      }
      #voice .voice__content {
        padding: 4rem 4%;
      }
      #voice ul{
          width: calc(330px * 3);
      }
      #goods .goods__content--03 .goods__slick {
        margin: 0;
      }
      #voice ul li {
        margin: 0 2.5rem 0 0;
        width: 330px;
      }
      #voice ul li figure figcaption h3 {
        margin: -6rem 0 1rem;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: max(16px,1.8rem);
        font-weight: bold;
        text-align: center;
      }
      #voice ul li figure figcaption h3 img{
          width: 100%;
          margin: 0 0 1rem;
      }
}
/*-----------------------------------------------

	point

-----------------------------------------------*/
#point{
    padding: 24rem 4% 14.5rem;
}
#point .gray{
    padding: 14rem 2% 3.5rem;
}
#point .inner{
    position: relative;
}
#point h2{
    font-size: max(24px,4.2rem);
    position: absolute;
    top: -28rem;
    right: 0;
    padding: 0 0 0 7em;
    line-height: 1.5em;
    font-weight: bold;
}
#point h2::before{
    content: "";
    background-image: url("../img/point_item.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 24.9rem;
    height: 24.9rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#point ul{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#point ul li{
    max-width: 348px;
    width: 31%;
    margin: 0 5rem 0 0;
}
#point ul li:last-child{
    margin: 0;
}
#point ul li h3{
    font-size: max(16px,2rem);
    color: #346fd3;
    line-height: 1.5em;
    padding: 2rem 0 1.5rem;
    font-weight: bold;
}
#point ul li p{
    margin: 0 0 1rem;
}
#point ul li p:last-child{
    margin: 0;
}

#point .point__btn{
    background-color: #f2f2f2;
    text-align: center;
    color: #346fd3;
    max-width: 430px;
    width: 40%;
    font-size: max(16px,2rem);
    padding: 2rem 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    margin: 5rem auto 10rem;
    font-weight: bold;
}
#point .point__btn span{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 1.5rem 1.5rem 1.5rem 0;
    background-color: #346fd3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#point .point__btn span img{
    width: 3.1rem;
    height: 2.2rem;
    transition: .3s;
}
@media screen and (min-width:751px) {
    #point .point__btn:hover span img{
        transform: translateX(25%);
    }
}

#point .point__icon-list{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#point .point__icon-list li{
    max-width: 100%;
    width: 31%;
    margin: 0 2rem 0 0;
    position: relative;
}
#point .point__icon-list li:last-child{
    margin: 0;
}
#point .point__icon-list li::after{
    content: "";
    background-image: url("../img/point_arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.6rem;
    height: 3.1rem;
    position: absolute;
    top: 45%;
    right: -3rem;
    transform: translateY(-50%);
    z-index: 1;
}
#point .point__icon-list li:last-child::after{
    display: none;
}
#point .point__icon-list li div{
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    margin: 0 0 2rem;
}
#point .point__icon-list li div img{
    max-width: 150px;
    width: 60%;
}
#point .point__icon-list li b{
    display: block;
    text-align: center;
    font-size: max(16px,2rem);
    color: #346fd3;
    line-height: 1.5em;
}
#point b.ttl{
    margin: 0 0 5rem;
}


@media screen and (max-width:750px) {
    #point {
        padding: 4rem 4% 8rem;
      }
    #point h2 {
        font-size: max(18px,3rem);
        position: relative;
        top: auto;
        right: auto;
        padding: 0;
        margin: 0 0 6rem;
      }
      #point h2::before {
        width: 14rem;
        height: 14rem;
        top: 1rem;
        left: auto;
        right: 0;
        letter-spacing: 0;
      }      
      #point .gray {
        padding: 8rem 0 3.5rem;
        background-color: transparent;
        position: relative;
      }   
      #point .gray::after {
        content: "";
        background-color: #f2f2f2;
        width: 100%;
        height: 72%;
        position: absolute;
        top: 10rem;
        right: -10%;
        z-index: -1;
      }
      #point ul {
        flex-direction: column;
      }
      #point ul li {
        max-width: 100%;
        width: 100%;
        margin: 0 0 4rem;
      }
    #point ul li h3{
        font-size: max(16px,3rem);
        padding: 0;
        text-align: center;
        margin: -1.5rem 0 1rem;
    }

    #point .point__icon-list li div img{
        width: 100%;
    }
    #point .point__icon-list li::after {
        top: 9rem;
        right: -2rem;
      }
      #point .point__icon-list li b {
        font-size: max(14px,1.8rem);
      }
      #point .point__btn{
          max-width: 100%;
          width: 92%;
          padding: 3rem 2rem 2.5rem;
          margin: 0 auto 6rem;
      }
      #point .point__btn span {
        padding: 2.5rem 1.5rem;
      }
      #point .point__icon-list {
        flex-direction: row;
      }
      #point .point__btn{
          width: 80%;
      }
}

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

	question

-----------------------------------------------*/
#question{
    padding: 8rem 4% 10rem;
    border-top: 1px solid #bbb;
}
#question h2{
    font-size: max(24px,3.2rem);
    color: #333;
    margin: 0 0 8rem;
    line-height: 1.5em;   
    text-align: center;
    font-weight: bold;
}

#question .js-tab-child > li{
    display: none;
}
#question .js-tab-child > li.active{
    display: block;
}

#question .question__tab-parent{
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #346fd3;
}
#question .question__tab-parent li{
    padding: 2rem 4rem;
    text-align: center;
    font-weight: bold;
    font-size: max(14px,1.6rem);
    cursor: pointer;
    background-color: #f2f2f2;
    color: #333;
    border: 2px solid #346fd3;
    border-width: 2px 2px 0 0;
    background-color: #346fd3;
    color: #fff;
    position: relative;
    line-height: 1.5em;
}
#question .question__tab-parent li.active{
    background-color: #fff!important;
    color: #346fd3;
}
#question .question__tab-parent li:first-child.active{
    border-width: 2px 2px 0 2px;
}
#question .question__tab-parent li:not(:last-child){
    margin: 0 1rem 0 0;
}
#question .question__tab-parent li.active{
    background-color: #346fd3;
}
#question .question__tab-parent li span{
    display: inline-block;
}

#question .question__tab-child {
    padding: 6rem 0 0;
}
#question .question__tab-child h3{
    font-size: max(18px,2.4rem);
    font-weight: bold;
    position: relative;
    margin: 0 0 6rem;
    line-height: 1.5em;
    text-align: center;
    color: #346fd3;
}

#question ul li {
    border-bottom: 2px solid #fff;
}
#question ul li p:first-child{
    cursor: pointer;
}
#question ul li p:last-child{
    display: none;
}
#question ul li:first-child p:last-child{
    display: block;
}
#question ul li p span{
    font-size: max(16px,2rem);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#question ul li p:last-child span{
    font-size: max(14px,1.8rem);
}
#question ul li p:first-child span{
    background-color: #f2f2f2;
    font-weight: bold;
}
#question ul li p span span{
    padding: 4rem;
    display: inline-block;
    margin: 0 2rem 0 0;
}
#question ul li p span span{
    display: flex;
    align-items: center;
    justify-content: center;
}
#question ul li p:first-child span span{
    background-color: #346fd3;
}
#question ul li p:first-child > span{
    position: relative;
    padding: 0 8rem 0 0;
}
#question ul li p:first-child > span::before,
#question ul li p:first-child > span::after{
    content: "";
    width: 18px;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
    background-color: #346fd3;
    z-index: 1;
    transition: .3s;
}
#question ul li p:first-child > span::after{
    transform: translateY(-50%) rotate(90deg);
}
#question ul li p.active > span::before{
    transform: translateY(-50%) rotate(45deg);
}
#question ul li p.active > span::after{
    transform: translateY(-50%) rotate(135deg);
}
#question ul li p:first-child span span img{
    width: 2.2rem;
    height: 2.9rem;
}
#question ul li p:last-child{
    padding: 1rem 0;
}
#question ul li p:last-child span span{
    padding: 4rem;
}
#question ul li p:last-child span span img{
    width: 2.3rem;
    height: 2.5rem;
}
#question ul li p:last-child span span {
    border-right: 1px solid #ddd;
}
@media screen and (max-width:750px) {
    #question{
        padding: 4rem 4% 8rem;
    }
    #question h2 {
        margin: 0 0 4rem;
        font-size: max(24px,2.4rem);
      }
    #question ul li p:last-child {
        padding: 2rem 0;
      }
      #question ul li p:first-child span{
          font-size: max(16px,2rem);
        }
        #question ul li p:last-child span{
            font-size: max(14px,1.8rem);
          }
          #question ul li p:last-child span{
              align-items: stretch;
          }
          #question ul li p:last-child span span{
              padding: 1rem 4rem 4rem;
          }
          #question ul li p span span{
              padding: 6rem 4rem;
              min-height: 80px;
          }
          #question .question__tab-parent li{
            font-size: max(12px,1.6rem);
          }
        #question .question__tab-child {
            padding: 4rem 0 0;
          }
          #question .question__tab-child h3 {
            margin: 0 0 4rem;
          }
          #question .question__tab-parent li {
            padding: 1.5rem 2rem 1rem;
        }
}
@media screen and (max-width:400px) {
    #question ul li p span span{
        padding: 6rem 4rem;
        min-height: 100px;
    }
}

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

	footer

-----------------------------------------------*/
#footer .footer__blue{
    background-color: #346fd3;
    padding: 4.5rem 4%;
}
#footer .footer__blue ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
#footer .footer__blue ul li{
    width: 46%;
    background-color: #fff;
    padding: 1rem;
    margin: 1rem;
    display: flex;
}
@media screen and (min-width:751px) {
    #footer .footer__blue ul li{
        min-height: 100px;
    }
}
#footer .footer__blue ul li a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: max(16px,2rem);
    position: relative;
    font-weight: bold;
    line-height: 1.2em;
}
#footer .footer__blue ul li a::after{
    content: "";
    background-image: url("../img/arrow_gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 4.9rem;
    height: 3.6rem;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    transition: .3s;
}
#footer .footer__blue ul li a small{
    display: block;
    color: #346fd3;
}
@media screen and (min-width:751px) {
    #footer .footer__blue ul li:hover a::after{
        right: 0;
    }
}
#footer .footer__blue ul li img{
    max-width: 90px;
    width: 18%;
    margin: 0 3rem 0 0;
}
#footer .footer__content--01{
    padding: 5rem 4%;
}
#footer .footer__content--01 .footer__flex{
    max-width: 960px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
}
#footer .footer__content--01 .footer__flex .footer__logo{
    max-width: 100px;
    width: 14%;
    margin: 0 5rem 0 0;
}
#footer .footer__content--01 .footer__flex a:last-child{
    font-size: max(16px,1.8rem);
    position: relative;
    line-height: 1.5em;
    font-weight: bold;
}
#footer .footer__content--01 .footer__flex a:last-child::after{
    content: "";
    background-image: url("../img/arrow_blue.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    margin: 0 0 0 2rem;
}
#footer .footer__content--02{
    border-top: 1px solid #bbb;
    padding: 2.5rem 4%;
}
#footer .footer__content--02 .footer__box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#footer .footer__content--02 .footer__box p{
    font-size: max(12px,1.2rem);
}
#footer .footer__content--02 .footer__box ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .footer__content--02 .footer__box ul li a{
    font-size: max(12px,1.2rem);
    color: #346fd3;
    padding: 0 2rem;
}
#footer .footer__content--02 .footer__box ul li:last-child{
    border-left: 1px solid #ddd;
}
#footer .footer__content--03{
    padding: 2rem 0 8rem;
}
#footer .footer__content--03 h2{
    font-size: max(18px,2.4rem);
    font-weight: bold;
    position: relative;
    line-height: 1.5em;
    color: #346fd3;
    max-width: 1140px;
    margin: 0 auto 2rem!important;
}
#footer .footer__content--03 table{
    margin: auto;
    max-width: 1140px;
    width: 92%;
}
#footer .footer__content--03 table tr th,
#footer .footer__content--03 table tr td{
    font-size: max(14px,1.6rem);
    padding: 2rem;
    line-height: 1.5em;
}
#footer .footer__content--03 table tr th{
    border-bottom: 1px solid #1571da;
    font-weight: bold;
    width: 15%;
    min-width: 80px;
}
#footer .footer__content--03 table tr td{
    border-bottom: 1px solid #1571da;
    width: 85%;
}
#footer .footer__content--03 table tr:first-child th{
    border-top: 1px solid #1571da;
}
#footer .footer__content--03 table tr:first-child td{
    border-top: 1px solid #1571da;
}
      #footer .footer__content--03 h2{
        font-size: max(18px,2.4rem);
        font-weight: bold;
        position: relative;
        margin: 0 0 6rem;
        line-height: 1.5em;
        text-align: center;
        color: #346fd3;
      }
@media screen and (min-width:751px) {
    #footer .footer__content--02 .footer__box ul li a:hover{
        text-decoration: underline;
    }
}
@media screen and (max-width:750px) {
    #footer{
        margin: 0 0 10rem;
    }
    #footer .footer__blue ul {
        flex-direction: column;
      }
      #footer .footer__blue ul li {
        width: 100%;
        padding: 1.5rem;
      }
      #footer .footer__blue ul li:not(:last-child){
          margin: 0 0 2rem;
      }
      #footer .footer__blue ul li:last-child{
          margin: 0;
      }
      #footer .footer__blue ul li a {
        font-size: max(16px,2.4rem);
      }
      #footer .footer__content--01 .footer__flex .footer__logo {
        max-width: 130px;
        width: 35%;
        margin: 0 5rem 0 0;
      }
      #footer .footer__content--01 .footer__flex a:last-child {
        font-size: max(16px,2rem);
      }
      #footer .footer__content--02 .footer__box {
        flex-direction: column-reverse;
      }
      #footer .footer__content--02 {
        padding: 3rem 4%;
      }
      #footer .footer__content--02 .footer__box ul {
        margin: 0 0 4rem;
        font-weight: bold;
      }
      #footer .footer__content--02 .footer__box ul li a {
        font-size: max(14px,1.8rem);
      }
      #footer .footer__content--02 .footer__box p {
        font-size: max(14px,1.4rem);
      }
      #footer .footer__content--03{
          padding: 0 0 6rem;
      }
      #footer .footer__content--03 table tr th,
      #footer .footer__content--03 table tr td{
          padding: 2rem 1rem;
      }
}