@charset "UTF-8";
@media screen and (min-width: 769px), print {
  a[href^=tel] {
    pointer-events: none;
    text-decoration: none;
    cursor: default !important;
  }

    .mt50 {
    margin-top: 50px;
  }
    .mb50 {
    margin-bottom: 50px;
  }
  .show_sp {
    display: none !important;
  }
  .container {
    min-width: 1200px;
    overflow: hidden;
  }
  .row {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
  }
  .inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
  }
  img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  .header__top {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
      width: 100%;
  }
  .header__top a {
    display: block;
    line-height: 0;
  }
  .header__top a img {
    /*width: 143px;*/
    height: auto;
  }
    .header__top a img.show_sp{
        display: none;
    }
  .header__main {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 0 0 41px;
    background: #F5F5F5;
      
      min-width: 1200px;
  }
  .header.fixed {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
  }
  .header__logo {
    width: 201px;
    line-height: 0;
    padding: 29px 0 27px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1300px) {
  .header__logo {
    width: 101px;
  }
}

@media screen and (min-width: 769px), print {
  .header__logo a {
    display: block;
    line-height: 0;
  }
  .header__logo a img {
    width: 100%;
    height: auto;
  }
  .header__nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: -webkit-calc(100% - 201px);
    width: -moz-calc(100% - 201px);
    width: calc(100% - 201px);
    
  }
  .header__menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
  .header__menu ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header__menu ul li {
    padding: 11px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header__menu ul li + li::before {
    content: "";
    width: 13px;
    height: 38px;
    background: url("../img/icSplash.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin: 0 33px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
  .header__menu ul li + li::before {
    margin: 0 20px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1350px) {
  .header__menu ul li + li::before {
    margin: 0 10px;
  }
}

@media screen and (min-width: 769px), print {
  .header__menu ul li a {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: normal;
    display: inline-block;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    white-space: nowrap;
  }
  .header__contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: 139px;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    padding: 0 53px 0 70px;
      padding-right: 20px;
  }
}


@media screen and (min-width: 769px) and (max-width: 1550px) {
  .header__contact {
    margin-left: 60px;
    background: linear-gradient(to right, transparent 0% 50%, #33a1db 50% 100%);
  }
}

@media screen and (min-width: 769px), print {
  .header__contact::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/bgCon01.svg") left top no-repeat;
    -moz-background-size: auto 100%;
         background-size: auto 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .header__contact::after {
    position: absolute;
    content: "";
    width: -webkit-calc(100% + 57px);
    width: -moz-calc(100% + 57px);
    width: calc(100% + 57px);
    height: 100%;
    background: url("../img/bgCon02.svg") left top no-repeat;
    -moz-background-size: auto 100%;
         background-size: auto 100%;
    top: 0;
    left: -57px;
    z-index: -2;
  }
  .header__contact a.tel {
    font-size: 3.6rem;
    line-height: 46px;
    font-family: 'DINPro';
    color: #fff;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header__contact a.tel::before {
    content: "";
    width: 24px;
    height: 35px;
    background: url("../img/icPhone.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 13px;
  }
  .header__contact a.mail {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 260px;
    height: 43px;
    -moz-border-radius: 8px;
         border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    margin-top: 15px;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .header__contact a.mail {
    margin-top: 5px;
    height: 33px;
  }
}

@media screen and (min-width: 769px), print {
  .footer__logo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 135px 0 123px;
  }
  .footer__logo a {
    display: inline-block;
    line-height: 0;
    width: 294px;
  }
  .footer__logo a img {
    width: 100%;
    height: auto;
  }
  .footer__contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #F5F5F5;
    padding: 129px 0 124px;
  }
  .footer__contact p {
    font-size: 2.1rem;
    line-height: 1;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .footer__contact a.tel {
    font-size: 5.1rem;
    line-height: 65px;
    font-family: 'DINPro';
    color: #33A1DB;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer__contact a.tel::before {
    content: "";
    width: 34px;
    height: 51px;
    background: url("../img/icPhone2.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 18px;
  }
  .footer__contact a.mail {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 260px;
    height: 43px;
    -moz-border-radius: 8px;
         border-radius: 8px;
    background: #33A1DB;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    margin-top: 20px;

    img{
      filter: invert(1);
      width: 14px;
      height: 14px;
      margin-left: 4px;
    }
  }
  .footer__copyright {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 45px 33px 40px 48px;
  }
  .footer__copyright .left {
    line-height: 0;
    width: 180px;
  }
  .footer__copyright .left img {
    width: 100%;
    height: auto;
  }
  .footer__copyright .right ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .footer__copyright .right ul li {
    font-size: 1.6rem;
    line-height: 26px;
    font-weight: 600;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  }
  .footer__copyright .right ul li + li {
    margin-left: 60px;
  }
  .footer__copyright .right ul li a {
    color: #000;
  }
  .mv picture, .mv figure {
    width: 100%;
  }
  .mv picture img, .mv figure img {
    width: 100%;
    height: auto;
  }
  #mv .mv__slide{
    width: 100%;
  }
  #mv .mv__slide div{
    width: 100%;
  }
  #mv .mv__slide div img{
    width: 100%;
    max-width: none;
  }

  /*#feature*/
  #feature__inner{
    width: 100%;
    padding-bottom: 13.07vw;
    background: url(../img/feature_bg.png) no-repeat;
    background-size: cover;
    background-position: center center;
    border-bottom: 82px solid #33A1DB;
    box-sizing: content-box;
    text-align: center;
  }
  #feature__inner .feature__top{
    margin: 3.56vw auto 0;
    width: 55.27vw;
  }
  #feature__inner #feature__oneWrap{
    margin: 2.14vw auto 0;
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 62.5vw;

  }
  #feature__inner #feature__oneWrap .feature__one{
    width: 19.22vw;
    height: 19.22vw;
    border-radius: 10vw;
    border: 0.4vw solid #33A1DB;
    background: #fff;
  }

  #feature__inner #feature__oneWrap .feature__one:nth-child(2){
    margin-top: 2.92vw;
  }
  #feature__inner #feature__oneWrap .feature__one img{
    margin-top: 3.59vw;
    max-width: 100%;
  }
  #feature__inner #feature__oneWrap .feature__one:first-child img{
    width: 15.7vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(2) img{
    width: 12.29vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(3) img{
    width: 14.84vw;
  }
  #feature__inner #feature__oneWrap .feature__one p{
    font-size: 1.15vw;
    line-height: 168%;
    font-weight: bold;
    margin-top: 0.6vw;
  }
  #feature #feature__movie{
    padding: 20px 22px 0;
    background: #fff;
    max-width: 934px;
    width: 70%;
    margin: -15vw auto 0;
  }
  #feature #feature__movie iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .known {
    background: url("../img/bgKnow.png") left center no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    padding: 80px 0 64px;
    padding: 0 0 64px;
  }
  .known__row h2 {
    text-align: center;
  }
  .known__row h2 span {
    font-size: 4.4rem;
    line-height: 72px;
    font-weight: bold;
    color: #000;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #f5f536));
    background: -webkit-linear-gradient(top, white 0%, white 50%, #f5f536 50%);
    background: -moz- oldlinear-gradient(top, white 0%, white 50%, #f5f536 50%);
    background: linear-gradient(180deg, white 0%, white 50%, #f5f536 50%);
    display: inline-block;
  }
  .known__row h3 {
    margin-top: 49px;
    font-size: 4.3rem;
    line-height: 53px;
    font-weight: bold;
    color: #33A1DB;
    text-align: center;
    background: #fff;
  }
  .known__row .txt {
    max-width: 765px;
    margin-left: auto;
    font-size: 1.8rem;
    line-height: 40px;
    font-weight: bold;
    margin-top: 57px;
  }
  .known__row .txt .note {
    text-align: right;
    margin-top: 43px;
  }
  .about {
    padding: 32px 0 0;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .about::before, .about::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 12.65625%;
    top: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1442px) {
  .about::before, .about::after {
    width: 80px;
  }
}

@media screen and (min-width: 769px), print {
  .about::before {
    z-index: -2;
    margin-top: 2.8125%;
    background: #99D5F5;
    left: 1.45833%;
  }
  .about::after {
    z-index: -1;
    left: 0;
    margin-top: 1.66667%;
    background: #33A1DB;
  }
  .about > figure {
    position: relative;
    width: 45.625%;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .about > figure::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #99D5F5;
    top: 22px;
    left: -34px;
    z-index: -1;
  }
  .about > figure img {
    width: 100%;
    height: auto;
    min-height: 500px;
    object-fit: cover;
  }
  .about__row {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .about__row .half {
    width: 50%;
    padding: 144px 0 0;
  }
  .about__row .half h3 {
    margin-top: 44px;
  }
  .about__row .half .txt {
    font-size: 1.8rem;
    line-height: 40px;
    font-weight: 400;
    margin-top: 35px;
  }
  .singleFav {
    font-size: 2.7rem;
    line-height: 37px;
    color: #33A1DB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
  }
  .singleFav::before {
    content: "";
    width: 51px;
    height: 47px;
    background: url("../img/fav.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 27px;
  }
  .doubleFav {
    font-size: 2.7rem;
    line-height: 37px;
    color: #33A1DB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
  }
  .doubleFav::before, .doubleFav::after {
    content: "";
    width: 51px;
    height: 47px;
    background: url("../img/fav.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
  }
  .doubleFav::before {
    margin-right: 32px;
  }
  .doubleFav::after {
    margin-left: 32px;
  }
  .subChild {
    font-size: 3.6rem;
    line-height: 49px;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .product {
    margin-top: 71px;
    background: #F5F5F5;
  }
  .product__detail {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 79px 0 85px;
  }
  .product__detail figure {
    width: 681px;
    margin-left: -158px;
    margin-right: 77px;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .product__detail figure::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 27px;
    top: 22px;
    background: #E4E4E4;
    z-index: -1;
  }
  .product__detail article {
    width: 50%;
  }
  .product__detail article h3 {
    margin-top: 52px;
  }
  .product__detail article .txt {
    font-size: 1.8rem;
    line-height: 40px;
    font-weight: 400;
    margin-top: 40px;
  }
  .product__spec {
    background: #161419;
    padding: 50px 0;
  }
  .product__specMain {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .product__specMain .info {
    width: 589px;
    margin-right: 54px;
  }
  .product__specMain .info h2 {
    color: #fff;
    font-size: 2rem;
    line-height: 50px;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .product__specMain .info ul {
    margin-top: 20px;
  }
  .product__specMain .info ul li {
    padding: 19px 0 5px;
    font-size: 1.6rem;
    line-height: 40px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .product__specMain .info ul li:not(:last-child) {
    border-bottom: 1px dashed #fff;
  }
  .product__specMain .info ul li span {
    display: inline-block;
    vertical-align: top;
  }
  .product__specMain figure {
    width: 641px;
    margin-right: -84px;
  }
  .how {
    /*padding: 129px 0 132px;*/
    padding: 129px 0 0;
  }
  .how__frame {
      width: 82%;
      margin: 69px auto 0;
  }
  .how__frame iframe {
        aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
  }
  .how .note {
    margin-top: 39px;
    font-size: 1.8rem;
    line-height: 20px;
    font-weight: bold;
  }
  /*example*/
  #example{
    margin: 120px auto ;
  }
  #example #example__wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
    column-gap: 14px;
    margin-top: 76px;
  }
  #example #example__wrap .example__one{
    background: #ccc;
    height: 428px;
  }
  #example #example__wrap .example__one img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .how__row .how__wrap{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
  }
  .how__row .how__wrap .how__gif{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    margin-right: 5%;
  }
    .how__row .how__wrap .how__gif div{
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .how__row .how__wrap .how__gif div::before{
        display: block;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 18px;
    }
    .how__row .how__wrap .how__gif div:first-child::before{
        content: '親子扉';
        
    }
    .how__row .how__wrap .how__gif div:last-child::before{
      content: 'シングル扉';
    }
    .how__row .how__wrap .how__gif div img{
      height: 14vw;
      min-height: 170px;
    }
    

  .faq {
    padding: 111px 0 112px;
    background: #F5F5F5 url("../img/bgFaq.png") right bottom no-repeat;
    -moz-background-size: 1190px 841px;
         background-size: 1190px 841px;
    margin-top: 56px;
  }
  .faq__row {
    margin-top: 96px;
  }
  .faq__row dl {
    background: #fff;
    -moz-border-radius: 20px;
         border-radius: 20px;
    overflow: hidden;
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
  }
  .faq__row dl + dl {
    margin-top: 25px;
  }
  .faq__row dl dt {
    font-size: 2rem;
    line-height: 26px;
    font-weight: bold;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    padding: 46px 85px 45px 55px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
  }
  .faq__row dl dt::before {
    content: "Q:";
    font-size: 2rem;
    line-height: 26px;
    display: inline-block;
  }
  .faq__row dl dt::after {
    position: absolute;
    content: "";
    width: 34px;
    height: 48px;
    background: url("../img/icPlus.png") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    right: 45px;
    top: 35px;
    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .faq__row dl dt.is_active::after {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .faq__row dl dd {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .faq__row dl dd .con {
    padding: 0 85px 45px 55px;
    font-size: 2rem;
    line-height: 26px;
    font-weight: bold;
  }
  .news {
    padding: 72px 0 83px;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .news::before, .news::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .news::before {
    background: url("../img/bgNew.jpg") 0 0 no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    z-index: -2;
  }
  .news::after {
    background: rgba(51, 161, 219, 0.82);
    z-index: -1;
  }
  .news__row {
    position: relative;
    z-index: 2;
    background: #fff;
    -moz-border-radius: 10px;
         border-radius: 10px;
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    padding: 58px 112px 70px 139px;
  }
  .news__row h2 {
    text-align: center;
    font-size: 2.7rem;
    line-height: 1;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .news__row ul {
    margin-top: 50px;
  }
  .news__row ul li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.6rem;
    line-height: 18px;
    font-weight: bold;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    padding: 25px 0;
    border-bottom: 1px dashed #000000;
  }
  .news__row ul li{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .news__row ul li + li {
    margin-top: 25px;
  }
  .news__row ul li time {
    width: 144px;
    color: #33A1DB;
    white-space: nowrap;
  }
  .news__row ul li a {
    display: inline-block;
    margin-left: 20px;
      text-decoration: underline;
  }
  .news__row details summary{
    position: relative;
    cursor: pointer;
  }
  .news__row details summary::before, .news__row details summary::after{
    content: '';
    display: block;
    background-color: #161419;
    position: absolute;
    transition: .4s;
  }
  .news__row details summary::before{
    height: 2px;
    width: 20px;
    right: -5px;
    top: calc(9px - 5px);
  }
  .news__row details summary::after{
    right: calc(9px - 5px);
    top: -5px;
    height: 20px;
    width: 2px;
  }
  .news__row details[open] summary::before, .news__row details[open] summary::after{
    transform: rotate(45deg);
  }
  .news__row details .text{
    margin-top: 16px;
    font-size: 15px;
    font-weight: normal;
    line-height: 160%;
  }
  .news__row details .text a{
    margin-left: 0;
    display: inline;
  }
  .news__row details .gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
  }

  .news__row details .gallery img{
    width: calc(calc(100% - 32px) / 3);
    height: auto;
    object-fit: cover;
  }
}

@media screen and (max-width: 768px) {
  img {
    width: 100%;
    height: auto;
  }
  .container {
    overflow: hidden;
  }
  .show_pc {
    display: none !important;
  }
  .inner, .row {
    padding-left: 4.10256vw;
    padding-right: 4.10256vw;
  }
  .header__top {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    /*padding: 1.53846vw 2.17949vw 1.02564vw 0;*/
  }
  .header__top a {
    display: block;
    /*width: 21.28205vw;*/
    line-height: 0;
  }
    .header__top a img.show_sp{
        display: block;
    }
  .header__top a img {
    width: 100%;
    height: auto;
  }
  .header__main {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 0 0 5.25641vw;
    background: #F5F5F5;
    position: relative;
    z-index: 99;
  }
  .header.fixed {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
  }
  .header__logo {
    margin: auto 0;
    width: 22vw;
    /*width: 25.76923vw;
      padding: 2.94872vw 0 2.82051vw;*/
    line-height: 0;
    position: relative;
    z-index: 99;
  }
  .header__logo a {
    display: block;
    line-height: 0;
  }
  .header__logo a img {
    width: 100%;
    height: auto;
  }
  .header__menu {
    position: absolute;
    width: 100%;
    left: 0;
    height: 0;
    overflow: hidden;
    background: #33A1DB;
    top: 100%;
  }
  .header__menu ul {
    width: 100%;
    padding: 4.10256vw;
  }
  .header__menu ul li {
    padding: 3.84615vw 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header__menu ul li + li {
    border-top: 1px dashed #fff;
  }
  .header__menu ul li a {
    font-size: 3.84615vw;
    line-height: 1;
    font-weight: normal;
    display: inline-block;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    display: block;
    color: #fff;

    img{
      filter: invert(1);
      height: 3vw;
      width: 3vw;
      margin-left: 4px;
    }
  }
  .header__contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    padding: 2.17949vw 13.71795vw 2.30769vw 8.84615vw;
  }
  .header__contact::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/bgCon01.svg") left top no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .header__contact::after {
    position: absolute;
    content: "";
    width: -webkit-calc(100% + 7.30769vw);
    width: -moz-calc(100% + 7.30769vw);
    width: calc(100% + 7.30769vw);
    height: 100%;
    background: url("../img/bgCon02.svg") left top no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    top: 0;
    left: -7.30769vw;
    z-index: -2;
  }
  .header__contact a.tel {
    font-size: 4.61538vw;
    line-height: 5.89744vw;
    font-family: 'DINPro';
    color: #fff;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header__contact a.tel::before {
    content: "";
    width: 3.07692vw;
    height: 4.48718vw;
    background: url("../img/icPhone.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 1.66667vw;
  }
  .header__contact a.mail {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 33.33333vw;
    height: 5.51282vw;
    -moz-border-radius: 1.02564vw;
         border-radius: 1.02564vw;
    border: 1px solid #fff;
    color: #fff;
    margin-top: 1.02564vw;
    font-size: 1.79487vw;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .header__contact .menu_icon {
    width: 4.23077vw;
    height: 2.69231vw;
    z-index: 99;
    cursor: pointer;
    position: absolute;
    right: 3.97436vw;
    /*top: 50%;*/
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .header__contact .menu_icon.active {
    border-color: transparent;
  }
  .header__contact .menu_icon.active .menu_icon_in .menu-trigger span {
    background: #fff;
  }
  .header__contact .menu_icon.active .menu-trigger span:nth-of-type(1) {
    -webkit-transform: translateY(2.30769vw) rotate(-45deg);
       -moz-transform: translateY(2.30769vw) rotate(-45deg);
        -ms-transform: translateY(2.30769vw) rotate(-45deg);
            transform: translateY(2.30769vw) rotate(-45deg);
  }
  .header__contact .menu_icon.active .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  .header__contact .menu_icon.active .menu-trigger span:nth-of-type(3) {
    -webkit-transform: translateY(-2.30769vw) rotate(45deg);
       -moz-transform: translateY(-2.30769vw) rotate(45deg);
        -ms-transform: translateY(-2.30769vw) rotate(45deg);
            transform: translateY(-2.30769vw) rotate(45deg);
  }
  .header__contact .menu_icon_in {
    width: 6.41026vw;
    height: 5.25641vw;
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .header__contact .menu_icon_in .menu-trigger,
  .header__contact .menu_icon_in .menu-trigger span {
    display: inline-block;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
  }
  .header__contact .menu_icon_in .menu-trigger {
    position: relative;
    width: 100%;
    height: 5.25641vw;
  }
  .header__contact .menu_icon_in .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.64103vw;
    background-color: #fff;
  }
  .header__contact .menu_icon_in .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .header__contact .menu_icon_in .menu-trigger span:nth-of-type(2) {
    top: 2.30769vw;
  }
  .header__contact .menu_icon_in .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .footer__logo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 19.35897vw 0 30.89744vw;
  }
  .footer__logo a {
    display: inline-block;
    line-height: 0;
    width: 44.35897vw;
  }
  .footer__logo a img {
    width: 100%;
    height: auto;
  }
  .footer__contact {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #F5F5F5;
    padding: 17.82051vw 0 19.10256vw;
  }
  .footer__contact p {
    font-size: 4.74359vw;
    line-height: 1;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .footer__contact a.tel {
    font-size: 9.61538vw;
    line-height: 12.30769vw;
    font-family: 'DINPro';
    color: #33A1DB;
    white-space: nowrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer__contact a.tel::before {
    content: "";
    width: 6.41026vw;
    height: 9.61538vw;
    background: url("../img/icPhone2.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 3.52564vw;
  }
  .footer__contact a.mail {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 74.10256vw;
    height: 12.17949vw;
    -moz-border-radius: 1.02564vw;
         border-radius: 1.02564vw;
    background: #33A1DB;
    color: #fff;
    font-size: 3.97436vw;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    margin-top: 10.25641vw;

    img{
      filter: invert(1);
      width: 3.3vw;
      height: 3.3vw;
      margin-left: 4px;
    }
  }
  .footer__copyright {
    padding: 15.51282vw 0 4.23077vw;
  }
  .footer__copyright .left {
    line-height: 0;
    text-align: center;
  }
  .footer__copyright .left img {
    /*width: 53.84615vw;
    height: auto;*/
      height: 14px;
  }
  .footer__copyright .right {
    margin-top: 8.46154vw;
  }
  .footer__copyright .right ul li {
    font-size: 3.33333vw;
    line-height: 5.38462vw;
    font-weight: 600;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    text-align: center;
  }
  .footer__copyright .right ul li + li {
    margin-top: 8.71795vw;
  }
  .footer__copyright .right ul li:last-child {
    margin-top: 17.17949vw;
  }
  .footer__copyright .right ul li a {
    color: #000;
  }
  .mv {
    padding: 6.15385vw 3.97436vw 0 0;
  }
  .mv picture, .mv figure {
    width: 100%;
  }
  .mv picture img, .mv figure img {
    width: 100%;
    height: auto;
  }
  /*feature*/
  #feature__inner{
    text-align: center;
  }
  #feature__inner .feature__top{
    width: 81.58vw;
    margin-top: 6.28vw;
  }
  #feature__inner #feature__oneWrap{
    padding: 0 6.41vw 31.67vw 30px;
    background: url(../img/feature_bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 3.41vw;
    border-bottom: 11.03vw solid #33A1DB;
  }
  #feature__inner #feature__oneWrap .feature__one{
    width: 47.31vw;
    height: 47.31vw;
    background: #fff;
    border: 0.9vw solid #33A1DB;
    border-radius: 30vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(2){
    margin-left: auto;
    margin-top: -32.95vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(3){
    margin-left: 11.03vw;
    margin-top: -19.74vw;
  }
  #feature__inner #feature__oneWrap .feature__one img{
    margin-top: 7vw;
  }
  #feature__inner #feature__oneWrap .feature__one:first-child img{
    width: 39.62vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(2) img{
    width: 30.26vw;
  }
  #feature__inner #feature__oneWrap .feature__one:nth-child(3) img{
    width: 36.54vw;
  }
  #feature__inner #feature__oneWrap .feature__one p{
    font-size: 2.82vw;
    line-height: 168%;
    font-weight: bold;
    margin-top: 1.8vw;
  }
  #feature #feature__movie{
    width: 87.43vw;
    margin: -39.23vw auto 8vw;
  }
  #feature #feature__movie iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 1.92vw 1.92vw 0;
    background: #fff;
  }

  .known {
    padding: 10.25641vw 0 17.05128vw;
  }
  .known__row h2 {
    text-align: center;
  }
  .known__row h2 span {
    font-size: 5.64103vw;
    line-height: 9.23077vw;
    font-weight: bold;
    color: #000;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #f5f536));
    background: -webkit-linear-gradient(top, white 0%, white 50%, #f5f536 50%);
    background: -moz- oldlinear-gradient(top, white 0%, white 50%, #f5f536 50%);
    background: linear-gradient(180deg, white 0%, white 50%, #f5f536 50%);
    display: inline-block;
  }
  .known__row h3 {
    margin-top: 6.15385vw;
    font-size: 6.53846vw;
    line-height: 9.10256vw;
    font-weight: bold;
    color: #33A1DB;
    text-align: center;
  }
  .known__row .txt {
    font-size: 3.58974vw;
    line-height: 7.05128vw;
    font-weight: 500;
    margin-top: 6.41026vw;
  }
  .known__row .txt .note {
    text-align: right;
    margin-top: 7.69231vw;
  }
  .about {
    padding: 4.87179vw 0 13.07692vw;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .about::before, .about::after {
    position: absolute;
    content: "";
    height: 36.15385vw;
    width: 4.35897vw;
    top: 0;
  }
  .about::before {
    z-index: -2;
    background: #99D5F5;
    left: 2.82051vw;
    top: 2.94872vw;
  }
  .about::after {
    z-index: -1;
    left: 0;
    background: #33A1DB;
  }
  .about > figure {
    position: relative;
    padding-left: 4.10256vw;
    padding-right: 4.10256vw;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    margin-top: 2.82051vw;
  }
  .about > figure img {
    width: 100%;
    height: auto;
  }
  .about__row .half {
    width: 100%;
    padding: 0 0 0 5.76923vw;
  }
  .about__row .half h3 {
    margin-top: 6.15385vw;
  }
  .about__row .half .txt {
    font-size: 3.58974vw;
    line-height: 7.05128vw;
    font-weight: 500;
    margin-top: 12.82051vw;
    margin-left: -5.76923vw;
  }
  .about__row .half .txt br {
    display: none;
  }
  .singleFav {
    font-size: 4.48718vw;
    line-height: 6.02564vw;
    color: #33A1DB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
  }
  .singleFav::before {
    content: "";
    width: 6.53846vw;
    height: 6.02564vw;
    background: url("../img/fav.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
    margin-right: 3.33333vw;
  }
  .doubleFav {
    font-size: 4.48718vw;
    line-height: 6.02564vw;
    color: #33A1DB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
  }
  .doubleFav::before, .doubleFav::after {
    content: "";
    width: 6.53846vw;
    height: 6.02564vw;
    background: url("../img/fav.svg") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    display: inline-block;
  }
  .doubleFav::before {
    margin-right: 4.10256vw;
  }
  .doubleFav::after {
    margin-left: 4.10256vw;
  }
  .subChild {
    font-size: 5.12821vw;
    line-height: 6.28205vw;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  }
  .product {
    background: #F5F5F5;
  }
  .product__detail {
    padding: 10.51282vw 4.10256vw 12.82051vw;
  }
  .product__detail article h3 {
    margin-top: 6.02564vw;
  }
  .product__detail article figure {
    margin-top: 7.69231vw;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    padding-right: 3.46154vw;
  }
  .product__detail article figure::after {
    position: absolute;
    content: "";
    width: -webkit-calc(100% - 3.46154vw);
    width: -moz-calc(100% - 3.46154vw);
    width: calc(100% - 3.46154vw);
    height: 100%;
    right: 0;
    top: 2.82051vw;
    background: #E4E4E4;
    z-index: -1;
  }
  .product__detail article .txt {
    font-size: 3.58974vw;
    line-height: 7.05128vw;
    font-weight: 500;
    margin-top: 11.53846vw;
  }
  .product__spec {
    background: #161419;
    padding: 10.89744vw 0 13.46154vw;
  }
  .product__specMain {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
       -moz-box-orient: vertical;
       -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .product__specMain figure {
    width: 100%;
  }
  .product__specMain .info {
    width: 100%;
    margin-top: 16.02564vw;
  }
  .product__specMain .info h2 {
    color: #fff;
    font-size: 4.48718vw;
    line-height: 6.41026vw;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    text-align: center;
  }
  .product__specMain .info ul {
    margin-top: 3.84615vw;
  }
  .product__specMain .info ul li {
    padding: 2.69231vw 0 2.4359vw;
    font-size: 3.58974vw;
    line-height: 6.41026vw;
    font-weight: 400;
    color: #FFFFFF;
  }
  .product__specMain .info ul li:not(:last-child) {
    border-bottom: 1px dashed #fff;
  }
  .product__specMain .info ul li span {
    display: inline-block;
    vertical-align: top;
  }
  .how {
    /*padding: 16.92308vw 0 18.97436vw;*/
    padding: 16.92308vw 0 8vw;
  }
  .how__frame {
    margin-top: 7.17949vw;
  }
  .how__frame iframe {
    width: 100%;
    height: 62.05128vw;
  }
  .how .note {
    margin-top: 3.07692vw;
    font-size: 3.58974vw;
    line-height: 5.12821vw;
    font-weight: bold;
  }
  /*example*/
  #example{
    margin: 10vw auto;
  }
  #example h2{
    margin-bottom: 7.17949vw;
  }
  #example__wrap{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2vw;
  }
  #example__wrap .example__one img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .how__row .how__wrap{
    margin-top: 10vw;
  }
  .how__row .how__wrap .how__gif{
    display: flex;
    width: 70%;
    margin: 7vw auto 0;
    justify-content: space-between;
  }
  .how__row .how__wrap .how__gif div{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .how__row .how__wrap .how__gif div::before{
    display: block;
    font-weight: bold;
    margin-bottom: 3vw;
    font-size: 3vw;
  }
  .how__row .how__wrap .how__gif div:first-child::before{
    content: '親子扉';
  }
  .how__row .how__wrap .how__gif div:last-child::before{
    content: 'シングル扉';
  }
  .how__row .how__wrap .how__gif div img{
    height: 100%;
    width: auto;
  }
  .faq {
    padding: 14.61538vw 0 13.07692vw;
    background: #F5F5F5;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .faq::before {
    position: absolute;
    content: "";
    width: 111.53846vw;
    height: 78.84615vw;
    background: url("../img/bgFaq.png") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    bottom: -28.33333vw;
    left: -58.97436vw;
    z-index: -1;
  }
  .faq__row {
    margin-top: 11.41026vw;
  }
  .faq__row dl {
    background: #fff;
    -moz-border-radius: 2.5641vw;
         border-radius: 2.5641vw;
    overflow: hidden;
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
  }
  .faq__row dl + dl {
    margin-top: 4.87179vw;
  }
  .faq__row dl dt {
    font-size: 3.58974vw;
    line-height: 4.87179vw;
    font-weight: bold;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    padding: 5.12821vw 10.89744vw 5.12821vw 6.02564vw;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
  }
  .faq__row dl dt::before {
    content: "Q:";
    font-size: 3.58974vw;
    line-height: 4.87179vw;
    display: inline-block;
  }
  .faq__row dl dt::after {
    position: absolute;
    content: "";
    width: 4.10256vw;
    height: 6.15385vw;
    background: url("../img/icPlus.png") 0 0 no-repeat;
    -moz-background-size: contain;
         background-size: contain;
    right: 5.76923vw;
    top: 4.48718vw;
    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .faq__row dl dt.is_active::after {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .faq__row dl dd {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .faq__row dl dd .con {
    padding: 0 10.89744vw 5.12821vw 6.02564vw;
    font-size: 3.58974vw;
    line-height: 4.87179vw;
    font-weight: bold;
  }
  .news {
    padding: 9.23077vw 4.10256vw 10.64103vw;
    position: relative;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
  }
  .news::before, .news::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .news::before {
    background: url("../img/bgNew.jpg") 0 0 no-repeat;
    -moz-background-size: cover;
         background-size: cover;
    z-index: -2;
  }
  .news::after {
    background: rgba(51, 161, 219, 0.82);
    z-index: -1;
  }
  .news__row {
    position: relative;
    z-index: 2;
    background: #fff;
    -moz-border-radius: 10px;
         border-radius: 10px;
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    padding: 4.10256vw;
  }
  .news__row h2 {
    font-size: 4.48718vw;
    line-height: 6.41026vw;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    text-align: center;
  }
  .news__row ul {
    margin-top: 6.41026vw;
  }
  .news__row ul li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 3.58974vw;
    line-height: 6.41026vw;
    font-weight: bold;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    padding: 3.20513vw 0;
    border-bottom: 1px dashed #000000;
  }
  .news__row ul li + li {
    margin-top: 3.20513vw;
  }
  .news__row ul li time {
    width: 31.28205vw;
    color: #33A1DB;
    white-space: nowrap;
  }
  .news__row ul li span {
    width: 100%;
  }
  .news__row ul li a {
    display: inline-block;
      text-decoration: underline;
  }
  .news__row details summary{
    padding-right: calc(3.58974vw * 1.5);
    position: relative;
  }
  .news__row details summary::before{
    content: '';
    display: block;
    width: 4.10256vw;
    height: 6.15385vw;
    transform-origin: 50% 50%;
    background: url(../img/icPlus.png) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    transition: .4s;
    right: 0;
    top: calc(50% - calc(6.15385vw / 2));
  }
  .news__row details[open] summary::before{
    transform: rotate(45deg);
  }
  .news__row details .text{
    font-size: 80%;
    line-height: 160%;
    font-weight: normal;
    margin-top: 0.5em;
  }
  .news__row details .text a{
    margin-left: 0;
    display: inline;
  }
  .news__row details .gallery{
    margin: 1em auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .news__row details .gallery img{
    width: calc(100% / 2 - 4px);
    object-fit: contain;
    background-color: #f4f4f4;
  }
}
/**/
.danger h2{
    font-size: 4.3rem;
    line-height: 53px;
    font-weight: bold;
    color: #33A1DB;
    text-align: center;
}
.danger_inner{
    margin-top: 37px;
    display: flex;
}
.danger_inner figure{
    display: flex;
    width: 100vw;
}
.danger_inner figure img{
    object-fit: contain;
}
.danger_inner .txt{
    font-size: 1.8rem;
    line-height: 40px;
    margin: 50px 0 auto;
}
.danger_inner h3{
    font-size: 3rem;
    margin-bottom: 35px;
}
@media screen and (max-width: 768px){
    .danger{
        margin-top: -50px;
    }
    .danger h2{
        margin-top: 6.15385vw;
        font-size: 6.53846vw;
        line-height: 9.10256vw;
        font-weight: bold;
        color: #33A1DB;
        text-align: center;
    }
    .danger_inner{
        display: block;
    }
    .danger_inner figure{
        width: 100%;
    }
    .danger_inner h3{
        font-size: 5.12821vw;
        text-align: center;
    }
    .danger_inner .txt{
        font-size: 3.58974vw;
        line-height: 7.05128vw;
        font-weight: 500;
        margin: 30px 0;
    }
}

.area {
    padding-top: 110px;
    background: url("../img/jpn_img.jpg")no-repeat;
    background-position: right 25% bottom;
    background-size: 12% auto;
}

.area.noimage {
  background: none;
}

.area h2{
    font-size: 3rem;
    font-weight: bold;
}
.area_txt{
    max-width: 800px;
    width: 66%;
}
.area_txt .txt{
    font-size: 1.8rem;
    line-height: 40px;
    margin-top: 35px;
}
.area_txt .txt:nth-child(3){
    margin-top: 0;
    text-align: right;
}
.area_txt .txt:nth-child(3) a{
    text-decoration: underline;
}

@media screen and (max-width: 768px){
    .mt50 {
    margin-top: 50px;
  }
    .mb50 {
    margin-bottom: 50px;
  }
    .area{
        background: none;
        padding-top: 0;
        padding-bottom:12.82051vw;
    }
    .area_txt{
        margin: 0 auto;
        width: 92%;
        max-width: none;
    }
    .area h2{
        font-size: 5.12821vw;
    line-height: 6.28205vw;
    }
    .area_txt .txt{
        font-size: 3.58974vw;
    line-height: 7.05128vw;
        margin-top: 14px;
    }

    .area_txt .txt:nth-child(3){
        margin-top: 10px;
    }
}
.otherproducts{
    width: 100%;
    background: #F5F5F5;
}
.otherproducts .row{
    padding: 80px 0;
}
.otherproducts .row h2{
    margin-bottom: 69px;
}
.otherproducts table{
    width: 90%;
    margin: 0 auto;
}
.otherproducts table tbody{
    display: table;
    border-collapse:collapse;
    table-layout:fixed;
    text-align: center;
    background: #fff;
    width: 100%;
}
.otherproducts table tbody tr{
    display: flex;
}
.otherproducts table tbody th{
    background: #33A1DB;
    color: #fff;
    font-weight: bold;
    width: 25%;
}
.otherproducts table tbody td{
    line-height: 1.8;
    width: 50%;
}
.otherproducts table tbody td:last-of-type{
    width: 25%;
}
.otherproducts table tbody tr th, .otherproducts table tbody tr td{
    border: 1px solid #fff;
    padding: 30px 0;
    vertical-align: middle;
}
.otherproducts table tr:last-child th{
    border: 4px solid #F5F536;
    border-right: 1px solid #EAEAEA;
}
.otherproducts table tr:last-child td:nth-child(2){
    border: 4px solid #F5F536;
    border-right: 1px solid #EAEAEA;
    border-right: 1px solid #fff;
    border-left: 1px solid #EAEAEA;
    border-left: 1px solid #fff;
}
.otherproducts table tr:last-child td:nth-child(3){
    border: 4px solid #F5F536;
    border-left: 1px solid #EAEAEA;
    border-left: 1px solid #fff;
}
.otherproducts .table_tomeppa{
    font-weight: bold;
    font-size: 18px;
}
@media screen and (max-width: 768px){
    .otherproducts .row{
        padding: 50px 0;
        padding-left: 4.10256vw;
        padding-right: 4.10256vw;

    }
    .otherproducts .row h2{
        margin-bottom: 26px;
    }
    .otherproducts table{
        width: 100%
    }
    .otherproducts table tbody th, .otherproducts table tbody td{
        font-size: 2.4vw;
        line-height: 1.7;
    }
    .otherproducts table tbody th{
        width: 20%;
    }
    .otherproducts table tbody td{
        width: 55%;
    }
    .otherproducts .table_tomeppa{
        font-size: 2.8vw;
        line-height: 1.7;
    }
}
.aboutjis .row{
    padding: 80px 0;
}
.aboutjis h3{
    margin-top: 40px;
    font-weight: bold;
    font-size: 2.4rem;
}
.aboutjis table{
    margin: 40px auto 0;
    width: 100%;
    max-width :1100px;
    box-shadow: 56px 26px 0 0 rgba(245,245,245,0.8);
    border: 0;
    display: table;
    border-collapse:collapse;
    border-spacing: 0;
    table-layout:fixed;
}
.aboutjis table tbody{
    width: 100%;
    text-align:center;
}
.aboutjis table caption, .aboutjis table #ws5 th, .aboutjis table #ws5 td{
    font-weight: bold;
}
.aboutjis table caption{
    font-size: 2rem;
    padding: 20px 0;
    color: #33A1DB;
}
.aboutjis table td, .aboutjis table th{
    padding: 20px 0 ;
    font-size: 2rem;
    border: 1px solid #fff;
}
.aboutjis table tr{
    display: flex;
}
.aboutjis table tr th, .aboutjis table tr:first-child td:first-child {
    width: 25%;
}
.aboutjis table td{
    width: 35%;
}
.aboutjis table td:last-of-type{
    width: 40%;
    padding: 20px 1%;
}
.aboutjis table td p{
    margin-bottom: 16px;
    font-size: 1.6rem;
}
.aboutjis table td p:after{
    content: ' /1時間';
}
.aboutjis table tr:first-child td{
    background: #99D5F5;
}
.aboutjis table #ws5{
    background: #33A1DB;
}
.aboutjis table #ws5 th, .aboutjis table #ws5 td{
    color: #fff;
}
@media screen and (max-width: 768px){
    .aboutjis .row{
        padding: 50px 0 0;
        padding-left: 4.10256vw;
        padding-right: 4.10256vw;
    }
    .aboutjis h3{
        font-size: 3.4vw;
        line-height: 1.7;
    }
    .aboutjis table{
        box-shadow: 2vw 1vw 0 0 rgba(245,245,245,1);
        margin-top: 20px;
    }
    .aboutjis table caption{
        font-size: 4.4vw;
    }
    .aboutjis table tr{
        display: flex;
    }
    .aboutjis table tr th, .aboutjis table tr td{
        font-size: 2.6vw;
        line-height: 1.7;
    }
    .aboutjis table td{
        padding: 14px 1%;
    }
    .aboutjis table td p{
        font-size: 2.2vw;
    }
    .aboutjis table td img{
        width: 50%;
    }
    .aboutjis table tr:nth-child(5) img{
        width: 100%;
    }
    .br_sp::before{
        white-space: pre;
        content: '\A';
    }
}
.faq .con a{
    text-decoration: underline;
}


.setup_txt{
    max-width: 1000px;
    margin: 10vw auto 0;
    font-size: 1.8rem;
    line-height: 1.7;
}
.setup_txt p:first-child{
    margin-bottom: 24px;
    font-weight: bold;
}
.measure-tool{
  text-align: center;
}
.measure-tool a{
    display: inline-block;
    margin: 120px auto 0;
    color: #4B4B4B;
    position: relative;
}
.measure-tool a img{
    max-width: 786px;
    position: relative;
    filter: drop-shadow(8px 10px 0 #33A1DB);
    right: 10px;
    transition: .2s ease-in-out;
}
.measure-tool a span{
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  bottom: 16px;
}
.measure-tool a:hover,
.measure-tool a:hover img{
  opacity: 1;
}
.measure-tool a:hover img{
  right: 0;
  filter: drop-shadow(0 0 0 #33A1DB);
}

@media screen and (max-width: 768px){
  .measure-tool{
    padding: 0 15px;
  }
    .measure-tool a img{
        width: 100%;
        margin: 0 auto;
        filter: drop-shadow(1.04vw 1.3vw 0 #33A1DB);
        right: 0;
    }
    .measure-tool a{
      margin-top: 12vw;
      margin-bottom: 5vw;
    }
    .measure-tool a span{
      bottom: 1.5vw;
    }
}
@media screen and (max-width: 768px){
    .setup_txt{
        font-size: 3.58974vw;
    }
}
@media screen and (max-width: 490px){
    .measure-tool a{
        font-size: 14px;
    }
    
}
@media screen and (max-width: 370px){
    .measure-tool a{
        width: 94%;
        font-size: 4vw;
        min-width: 0;
        padding: 10px 0;
    }
}
.patent{
    width: 200px;
    background: #33A1DC;
    color: #fff;
    font-size: 22px;
    border-radius: 6px;
    font-weight: bold;
    padding: 8px 0;
    display: block;
    margin: -90px auto 120px ;
    text-align: center;
    cursor: default;
}
@media screen and (max-width: 768px){
    .patent{
        font-size: 14px;
        width: 160px;
        margin: -27vw auto 90px;
        border-radius: 1.02564vw;
    }
}
a img.link{
    max-width: 17px;
    margin-left: 12px;
}

.header__contact .reception{
    font-weight: bold;
    color: #fff;
    text-align: right;
}

@media screen and (max-width: 768px){
    .header__contact .reception{
        font-size: 2vw;
    }
}
.footer__contact .reception{
    font-weight: bold;
    color: #33A1DB;
    font-size: 15px;
    margin-top: 8px;
}

.cookie-consent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.7);
  padding: 1.2em;
  box-sizing: border-box;
  z-index: 100;
  visibility: hidden;
}
.cookie-consent.is-show {
  visibility: visible;
}
.cookie-consent a {
  color: #fff !important;
}
.cookie-agree {
  color: #fff;
  background: dodgerblue;
  padding: .5em 1.5em;
}
.cookie-agree:hover {
  cursor: pointer;
}
/* パッと消える */
.cc-hide1 {
  display: none;
}
.cookie-consent a .link{
    max-width: 14px;
    margin-left: 4px;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* メディアクエリ */
@media screen and (max-width: 600px) {
  .cookie-consent {
    flex-direction: column;
  }
  .cookie-text {
    margin-bottom: 1em;
  }
}
.makuake{
        max-width: 1200px;
    width: 100%;
    margin: 60px auto 40px;
}
.makuake-box{
    width: 100%;
    padding: 33px 0 32px;
    text-align: center;
    background: #33A1DB;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
    box-shadow: #B9E3F9 -20px -15px 0 0;
}
.makuake-box p{
    font-size: 30px;
    color: #fff;
    font-weight: bold;
}
.makuake-box a{
    display: block;
    font-size: 26px;
    color: #fff;
    font-weight: bold;
    border: 3px solid #fff;
    padding: 10px 30px 11px;
    transition: .4s;
}
.makuake-box a:hover{
    background: #fff;
    color: #33A1DB;
    opacity: 1;
}
@media screen and (max-width: 768px){
    .makuake-box{
        display: block;

        width: 91%;
        padding: 24px 4.10256vw;;
        margin: 0 auto;
        box-shadow: #B9E3F9 -14px -9px 0 0;
    }
    .makuake-box p{
        margin-bottom: 14px;
        font-size: 3.64103vw;
    }
    .makuake-box a{
        display: inline;
        font-size: 2.64103vw;
        padding: 8px 24px 9px;
        border: 2px solid #fff;
    }
}
    


.shop{
  width: 100%;
  margin: 70px auto 0;
  padding: 74px 0 70px;
  text-align: center;
}
.product + .shop{
  margin-top: 0;
  background: #161419;
}
.how + .shop{
  margin-top: 0;
  margin-bottom: 70px;
}
.container + .shop{
  margin-top: 0;
}

.shop a{
  display: inline-block;
}
.shop a img{
  display: block;
  filter: drop-shadow(8px 10px 0 #0073B0);
  position: relative;
  right: 10px;
  transition: .2s ease-in-out;
  max-width: 786px;
}
.shop a:hover,
.shop a:hover img{
  opacity: 1;
}
.shop a:hover img{
  filter: drop-shadow(0 0 0 #0073B0);
  right: 0;
}
@media screen and (max-width: 768px){
  .shop{
    margin-top: 0;
    padding: 0 15px;
  }
  .product + .shop{
    padding-top: 0;
    padding-bottom: 8vw;
  }
  .how + .shop{
    padding-top: 0;
  }
  .shop a img{
    width: 100%;
    margin: 0 auto;
    filter: drop-shadow(1.04vw 1.3vw 0 #0073B0);
    right: 0;
  }
  
}

#banner{
  position: fixed;
  bottom: 10px;
  right: 14px;
  
  
}

@media screen and (max-width: 1440px){
  #banner{
    width: 18.54vw;
  }
}
@media screen and (max-width: 768px){
  #banner{
    width: 38vw;
  }
}

.about-box {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.about-box::after {
    content: '';
    width: 171.184rem;
    height: 121.051rem;
    background: url('../img/about-bg.png') no-repeat scroll top center;
    background-size: 100% 100%;
    transform: rotate(81deg);
    position: absolute;
    top: -30rem;
    left: -54.3rem;
    z-index: -1;
}
.about-box__main {
    display: grid;
    align-items: center;
    gap: 2.5rem;
    grid-template-columns: 1fr 51rem;
}
.about-box__main figure {
    margin-right: -36rem;
}
.about-box__main--text {
    position: relative;
    padding: 4rem 7rem 9rem 0;
    z-index: 9;
}
.about-box__main--text::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    left: -7rem;
    z-index: -1;
}
.about-box__main--text h2 {
    margin-bottom: 7.3rem;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-template-columns: auto 1fr;
    font-size: 3.5rem;
    line-height: 1;
    color: #33A1DB;
    font-weight: 600;
}
.about-box__main--text h2::before {
    content: '';
    width: 5.1rem;
    height: 4.7rem;
    background: url('../img/icon-title.png') no-repeat scroll top center;
    background-size: 100% 100%;
}
.about-box__main--text h3 {
    margin-bottom: 2rem;
    font-size: 3.6rem;
    line-height: 6rem;
    font-weight: 600;
}
.about-box__main--text p {
    margin-bottom: 5.5rem;
    font-size: 1.8rem;
    line-height: 4rem;
    font-weight: 700;
}
.about-box__main--text .btn {
    text-align: right;
}
.about-box__main--text .btn .more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 22.3rem;
    height: 6.2rem;
    border: 1px solid #33A1DB;
    border-radius: 3.1rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #33A1DB;
    line-height: 1;
}
.about-box__main--text .btn .more:hover {
    background: #33A1DB;
    color: #FFFFFF;
}
.information-box {
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: #F5F5F5;
}
.information-box__main {
    display: grid;
    align-items: center;
    gap: 8.5rem;
    grid-template-columns: 51rem 1fr;
}
.information-box__main figure {
    margin-left: -36rem;
}
.information-box__main--text h2 {
    margin-bottom: 7.3rem;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    font-size: 3.5rem;
    line-height: 1;
    color: #33A1DB;
    font-weight: 600;
}
.information-box__main--text h2::before {
    content: '';
    width: 5.1rem;
    height: 4.7rem;
    background: url('../img/icon-title.png') no-repeat scroll top center;
    background-size: 100% 100%;
}
.information-box__main--text h3 {
    margin-bottom: 2rem;
    font-size: 3.6rem;
    line-height: 6rem;
    font-weight: 600;
}
.information-box__main--text p {
    margin-bottom: 4rem;
    font-size: 1.8rem;
    line-height: 4rem;
    font-weight: 700;
}
.information-box__main--text .btn {
    text-align: right;
    margin-bottom: 6rem;
}
.information-box__main--text .btn .more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 22.3rem;
    height: 6.2rem;
    border: 1px solid #33A1DB;
    border-radius: 3.1rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #33A1DB;
    line-height: 1;
    background: #FFFFFF;
}
.information-box__main--text .btn .more:hover {
    background: #33A1DB;
    color: #FFFFFF;
}
.information-box__main--text .client {
    text-align: right;
}
.information-box__main--text .client img {
    width: 26.5rem;
}
.how-box {
    padding: 14rem 0 67rem;
    background: url('../img/how-bg.png') repeat scroll top center;
    position: relative;
}
.how-box::after {
    content: '';
    width: 100%;
    height: 42.1rem;
    background: url('../img/how.png') repeat-x scroll left top;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    bottom: 12.5rem;
}
.how-box h2 {
    margin-bottom: 4rem;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-template-columns: auto 1fr;
    gap: 2.4rem;
    font-size: 3.5rem;
    line-height: 1;
    color: #33A1DB;
    font-weight: 600;
}
.how-box h2::before {
    content: '';
    width: 5.1rem;
    height: 4.7rem;
    background: url('../img/icon-title.png') no-repeat scroll top center;
    background-size: 100% 100%;
}
.how-box__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.how-box__main--text {
    font-size: 1.8rem;
    line-height: 4rem;
    font-weight: 700;
}
.how-box__main--btn .more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 27rem;
    height: 6.2rem;
    border: 1px solid #33A1DB;
    border-radius: 3.1rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #33A1DB;
    line-height: 1;
    background: #FFFFFF;
}
.how-box__main--btn .more:hover {
    background: #33A1DB;
    color: #FFFFFF;
}
#banner {
    z-index: 99;
}
.sp {
    display: none;
}
@media screen and (max-width: 780px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .about-box {
        padding: 8.07692307692vw 0 10.641025641rem;
    }
    .about-box::after {
        display: none;
    }
    .about-box__main {
        gap: 8.97435897436vw;
        grid-template-columns: 1fr;
    }
    .about-box__main figure {
        margin-right: 0;
        margin-bottom: 10.2564102564vw;
    }
    .about-box__main--text {
        padding: 0;
    }
    .about-box__main--text::after {
        display: none;
    }
    .about-box__main--text h2 {
        margin-bottom: 6.41025641026vw;
        font-size: 6.66666666667vw;
    }
    .about-box__main--text h2::before {
        width: 10.3846153846vw;
        height: 9.61538461538vw;
    }
    .about-box__main--text h3 {
        font-size: 6.15384615385vw;
        line-height: 10.2564102564vw;
    }
    .about-box__main--text p {
        margin-bottom: 7.69230769231vw;
        font-size: 3.58974358974vw;
        line-height: 6.53846153846vw;
    }
    .about-box__main--text p br {
        display: none;
    }
    .about-box__main--text .btn {
        text-align: center;
    }
    .about-box__main--text .btn .more {
        width: 55.5128205128vw;
        height: 15.3846153846vw;
        border-radius: 7.69230769231rem;
        font-size: 4.48717948718vw;
    }
    .information-box {
        padding: 8.07692307692vw 0 10.2564102564rem;
    }
    .information-box__main {
        gap: 8.97435897436vw;
        grid-template-columns: 1fr;
    }
    .information-box__main figure {
        margin-left: 0;
        margin-bottom: 10.2564102564vw;
    }
    .information-box__main--text h2 {
        margin-bottom: 6.41025641026vw;
        font-size: 6.66666666667vw;
    }
    .information-box__main--text h2::before {
        width: 10.3846153846vw;
        height: 9.61538461538vw;
    }
    .information-box__main--text h3 {
        font-size: 6.15384615385vw;
        line-height: 10.2564102564vw;
    }
    .information-box__main--text p {
        margin-bottom: 7.69230769231vw;
        font-size: 3.58974358974vw;
        line-height: 6.53846153846vw;
    }
    .information-box__main--text p br {
        display: none;
    }
    .information-box__main--text .btn {
        text-align: center;
        margin-bottom: 0;
    }
    .information-box__main--text .btn .more {
        width: 55.5128205128vw;
        height: 15.3846153846vw;
        border-radius: 7.69230769231rem;
        font-size: 4.48717948718vw;
    }
    .information-box__main--text .client {
        display: none;
    }
    .how-box {
        padding: 8.97435897436vw 0 96.1538461538vw;
    }
    .how-box::after {
        width: 91.9230769231vw;
        height: 82.0512820513vw;
        background: url('../img/how_sp.png') no-repeat scroll left top;
        background-size: 100% auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10.2564102564vw;
    }
    .how-box h2 {
        margin-bottom: 6.41025641026vw;
        font-size: 6.66666666667vw;
    }
    .how-box h2::before {
        width: 10.3846153846vw;
        height: 9.61538461538vw;
    }
    .how-box__main {
        flex-wrap: wrap;
    }
    .how-box__main--text {
        font-size: 3.58974358974vw;
        line-height: 6.53846153846vw;
        margin-bottom: 6.41025641026vw;
    }
    .how-box__main--btn {
        width: 100%;
        text-align: center;
    }
    .how-box__main--btn .more {
        width: 55.5128205128vw;
        height: 15.3846153846vw;
        border-radius: 7.69230769231rem;
        font-size: 4.48717948718vw;
    }
}
.banner-box {
    background-color: #fff;
    background: url('../img/banner.png') no-repeat right top;
    background-size: auto 100%;
}
.banner-box__main {
    display: flex;
    align-items: center;
    min-height: 32rem;
}
.banner-box__main h1 {
    font-size: 3.5rem;
    font-weight: 600;
}
.breadcrumb-box {
    background: #F5F5F5;
    padding: 1.5rem 0;
}
.breadcrumb-box__main ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.breadcrumb-box__main ul li a {
    font-size: 1.6rem;
    font-weight: 500;
}
.breadcrumb-box__main ul li ~ li::before {
    content: ' > ';
    display: inline-flex;
    vertical-align: middle;
    margin-left: 1rem;
    margin-top: -.5rem;
}
.about-banner {
    background: url('../img/about-banner.png') no-repeat scroll center top;
    background-size: cover;
}
.about-banner__main {
    padding: 18rem 3.5rem 14rem;
}
.about-banner__main h2 {
    margin-bottom: 5rem;
    font-size: 4.1rem;
    line-height: 8.2rem;
    font-weight: 600;
    color: #FFFFFF;
}
.about-banner__main p {
    font-size: 1.6rem;
    line-height: 4rem;
    margin-bottom: 0;
    color: #FFFFFF;
}
.about-page {
    padding: 10rem 0 8rem;
}
.about-page__head {
    margin-bottom: 9rem;
}
.about-page__main {
    display: grid;
    align-items: start;
    gap: 2.4rem;
}
@media screen and (max-width: 780px) {
    .banner-box {
        background-position: 6rem 0;
    }
    .banner-box__main {
        min-height: 41.0256410256vw;
    }
    .banner-box__main h1 {
        width: 100%;
        text-align: center;
        background: #FFFFFF;
        font-size: 5.64102564103vw;
        line-height: 13.9743589744vw;
    }
    .breadcrumb-box {
        padding: 1.92307692308rem 0;
    }
    .breadcrumb-box__main ul li a {
        font-size: 3.58974358974vw;
    }
    .about-banner__main {
        padding: 19.2307692308vw 4.76923076923vw 22.4358974359vw;
    }
    .about-banner__main h2 {
        margin-bottom: 11.5384615385vw;
        font-size: 6.15384615385vw;
        line-height: 10.2564102564vw;
    }
    .about-banner__main p {
        font-size: 3.58974358974vw;
        line-height: 6.53846153846vw;
    }
    .about-page {
        padding: 12.8205128205vw 0 9.61538461538vw;
    }
    .about-page__head {
        margin-bottom: 11.5384615385vw;
    }
}
.setup-page {
    padding: 4rem 0 15rem;
}
.setup-page__main {
    display: grid;
    align-items: start;
    gap: 2rem;
    row-gap: 4rem;
    grid-template-columns: repeat(3, 1fr);
}
.setup-page__main--items figure {
    margin-bottom: 2rem;
}
.setup-page__main--items h3 {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 600;
}
.setup-page__main--items p {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-bottom: 0;
}
iframe {
    width: 100%;
    vertical-align: middle;
}
@media screen and (max-width: 780px) {
    .setup-banner iframe {
        height: 51.2820512821vw;
    }
    .setup-page {
        padding: 11.5384615385vw 0 29.4871794872vw;
    }
    .setup-page__main {
        gap: 2.5641025641vw;
        row-gap: 3.84615384615vw;
        grid-template-columns: repeat(2, 1fr);
    }
    .setup-page__main--items figure {
        margin-bottom: 2.5641025641vw;
    }
    .setup-page__main--items h3 {
        margin-bottom: 2.5641025641vw;
        font-size: 2.30769230769vw;
        line-height: 2.82051282051vw;
    }
    .setup-page__main--items p {
        font-size: 2.05128205128vw;
        line-height: 3.46153846154vw;
    }
}

@media screen and (min-width: 769px){
  .about-page__head{
    picture + p{
      margin-top: 20px;
    }
    p{
      margin-top: 10px;
    }
  }
}

@media screen and (max-width: 768px){
  .about-details{
    padding-top: 8vw;
  }
}

.about-details__table{
  tbody{
    display: flex;
    flex-direction: column;
  }
  tr{
    display: grid;
  }
  th, td{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
  }
  th{
    background-color: #F5F5F5;
    font-weight: bold;
  }
  td{
    border: 1px solid #EEEEEE;
  }
}

@media screen and (min-width: 769px){
  .about-details{
    margin-top: 90px;

    .row{
      display: grid;
      grid-template-columns: 48% auto;
      gap: 54px 50px;
    }
  }
  .about-details__table{
    tbody{
      gap: 5px;
    }
    tr{
      grid-template-columns: 174px auto;
      gap: 4px;
    }
    th, td{
      padding: 18px;
      font-size: 16px;

      &:has(span){
        padding: 34px 18px;
      }

      span{
        font-size: 14px;
      }
    }
    > span{
      display: block;
      font-size: 16px;
      margin-top: 14px;
    }
  }
}

@media screen and (max-width: 768px){
  .about-details__table{
    width: 100%;

    table, tbody{
      width: 100%;
    }
    tbody{
      gap: 5px;
    }
    tr{
      grid-template-columns: 33% auto;
      gap: 5px;
    }
    th, td{
      padding: 3vw;
      font-size: 3vw;
      line-height: 170%;

      span{
        font-size: 2.4vw;
      }

      &:has(span){
        padding: 5vw 3vw;
      }
    }
    > span{
      font-size: 2.4vw;
      margin-top: 2vw;
    }
  }
}

.about-details__feature{
  > span{
    display: block;
  }
}

.about-details__list{
  ul{
    display: grid;
  }
  li{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  h3{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1492D5;
    color: #fff;
    width: 100%;
  }
  h3,p{
    font-weight: bold;
  }
}

.about-details__copy{
  background-color: #FAFDFF;
  display: flex;

  p{
    font-weight: bold;
  }
}

@media screen and (min-width: 769px){
  .about-details{
    padding-bottom: 88px;

    
  }
  .about-details__feature{
    grid-column: 1/3;

    > span{
      font-size: 16px;
      margin-top: 16px;
    }
    
  }
  .about-details__list{
    ul{
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    h3{
      padding: 16px 0;
    }
    p{
      margin-top: 16px;
    }
  }
  .about-details__copy{
    padding-top: 52px;
    padding-right: 56px;
    padding-bottom: 52px;
    padding-left: 92px;
    justify-content: space-between;
    align-items: center;
    margin-top: 76px;


    p{
      margin-left: 80px;
      line-height: 200%;
    }
  }
}

@media screen and (max-width: 768px){
  .about-details__feature{
    padding-bottom: 10vw;
    > span{
      font-size: 2.4vw;
      margin-top: 3vw;
      line-height: 170%;
    }
  }
  .about-details__list{
    margin-top: 8vw;
    ul{
      grid-template-columns: repeat(2, 1fr);
      gap: 5vw 20px;
    }
    h3{
      font-size: 3vw;
      padding: 2.4vw 0;
    }
    p{
      font-size: 2.4vw;
      margin-top: 2vw;
    }
  }
  .about-details__copy{
    padding-top: 10vw;
    flex-direction: column;
    align-items: center;
    padding-right: 5vw;
    padding-left: 5vw;
    gap: 7vw;
    margin-top: 10vw;
    padding-bottom: 8vw;

    img{
      width: 65%;
    }
    p{
      font-size: 3.3vw;
      line-height: 180%;
    }
  }
}
@media screen and (min-width: 769px){
  .header__menu{
    a{
      img{
          margin-left: 6px;
        }
    }
  }
}

.info__link{
  color: #1492D5!important;
  font-weight: bold;
  border-bottom: 1px solid #1492D5;
  display: inline-flex;
  align-items: center;

  img{
    margin-left: 3px;
  }
}
@media screen and (max-width: 768px){
  .info__link{
    font-size: 3.5vw;
    margin-bottom: 5vw;
  }
  .info__link img{
      width: 3.5vw;
      height: 3.5vw;
    }
}

.about-details__link{
  background-color: #1492D5;
  color: #fff!important;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: min(580px, 100%);
  margin: 0 auto;
  position: relative;
}
.about-details__link::after{
  content: '';
  display: block;
  position: absolute;
  
  border-radius: inherit;
  border: 1px solid #fff;
}
@media screen and (min-width: 769px){
  .about-details__link{
    font-size: 20px;
    height: 72px;
    border-radius: 10px;
    margin-top: 48px;

    img{
      width: 16px;
      height: 16px;
    }
  }
  .about-details__link::after{
    width: calc(100% - 10px);
  height: calc(100% - 10px);
  }
}

@media screen and (max-width: 768px){
  .about-details__link{
    height: 12vw;
    font-size: 3.3vw;
    border-radius: 2vw;
    margin-top: 8vw;

    img{
      width:3.3vw;
      height: 3.3vw;
    }
  }
  .about-details__link::after{
    width: calc(100% - 2vw);
  height: calc(100% - 2vw);
  }
}

.about-details__high-tention{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 769px){
  .about-details__high-tention{
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px){
  .about-details__high-tention{
    margin-top: 24px;
  }
}

.floatingBanner{
  position: fixed;
  z-index: 99;
  right: 10px;
  bottom: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.floatingBanner a{
  display: flex;
  justify-content: center;
  align-items: center;
}
.floatingBanner .inactive{
  opacity: 0;
  user-select: none;
  pointer-events: none;
}
@media screen and (min-width: 769px){
  .floatingBanner{
    width: calc(120px * 2 + 16px);
    gap: 16px;
    right: 32px;
    bottom: 32px;
  }
}
@media screen and (max-width: 768px){
  .floatingBanner{
    width: calc(80px * 2 + 8px);
    gap: 8px;
  }
}

.movie{
  display: flex;
  justify-content: center;
  align-items: center;
}
.movie iframe{
  aspect-ratio: 16/9;
}
@media screen and (min-width: 769px){
  .movie{
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .movie iframe{
    width: 1000px;
  }
}
@media screen and (max-width: 768px){
  .movie{
    padding: 30px 15px;
  }
}

.about-details__list{
  p{
    text-align: center;

    span{
      display: inline-block;
      font-size: 70%;
                  line-height: 170%;
            margin-top: 8px;
    }
  }
}