/* -- 全体 ---------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
html {
  font-size: 62.5%; /* 全体のベースを10pxに指定 */
  border-bottom: none;
  background-color: #fff;
}
body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
  /*font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;*/
  font-size: 14px; font-size: 1.4em; /* body基準を14pxに指定 */
  color: #fff;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  word-break: break-all;
  word-wrap: break-word;
}
* {
  box-sizing: border-box;
}
a {
  color: #fff;
  text-decoration:none;
  transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
}
a:hover {
  color: #ffff00;
  text-decoration:none;
  transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
}

@media screen and (max-width: 576px) {
  body {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------------------------
PCとタブレットは同表示(JSでviewport 1080指定)
スマホ(576px迄)はスマホ表示、とする
------------------------------------------------------------------------------------ */

/* -- メニュー ------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 20px;
  left: 20px;
}
  .nav .evolia {
    display: block;
    padding: 0;
    margin: 0;
    width: 200px;
    height: 200px;
    background: #fff url(../img/menu.png) no-repeat center;
    background-size: 150px 139px;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    word-break: keep-all;
    word-wrap: normal;
  }
  .nav-link {
    list-style: none;
    margin-top: 20px;
    margin-left: 0;
    padding-left: 40px;
  }
    .nav-link li {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 1.3em;
    }
    .nav-link li::before {
      content: "▲";
      color: #fff;
      font-size: 0.6em;
      line-height: 1.1;
      margin-right: .6em;
      rotate: 90deg;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    }
    .nav-link li:hover::before {
      color: #ffff00;
    }
    .nav-link li:has(.active)::before {
      color: #ffff00;
    }
    .nav-link li a {
      color: #fff;
      font-weight: bold;
      letter-spacing: 0.05em;
    }
    .nav-link li a:hover {
      color: #ffff00;
    }
    .nav-link li a:active {
      color: #ffff00;
    }
    .nav-link li:has(.active) a {
      color: #ffff00;
    }

.wrap-pagetop {
  position: fixed;
  z-index: 256;
  bottom: 52px;
  right: 46px;
}
  .pagetop {
    display: block;
    padding: 0;
    margin: 0;
    width: 84px;
    height: 84px;
    background: url(../img/pagetop.png) no-repeat center;
    background-size: cover;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    word-break: keep-all;
    word-wrap: normal;
    opacity: 0.7;
  }

@media screen and (max-width: 576px) {
  .nav {
    display: none;
  }
  .wrap-pagetop {
    display: none;
  }
}
@media screen and (max-height: 400px) {
  .nav {
    display: none;
  }
  .wrap-pagetop {
    display: none;
  }
}

/* -- コンテンツ ------------------------------------------------------------------- */
.wrap-main {
}
  .wrap-main .section {
    width: 100%;
    padding-top: 10px;
    height: 100vh;
  }
    .wrap-main .section-border {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin: 10px 20px 20px 20px;
      padding: 10px;
      min-width: 728px;
      min-height: 620px;
    }
    .wrap-main .section.top .section-border {
      background: #f2971b;
    }
    .wrap-main .section.about .section-border {
      background: #54c2f0;
    }
    .wrap-main .section.shop .section-border {
      background: #8dc21f;
    }

.wrap-main .section-bg {
  width: 100%;
  height: 100%;
  min-width: 708px;
  min-height: 600px;
  /* background-color: #fffffff7;
  backdrop-filter: blur(40px); */
}
.section .section-bg {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.section .wrap-ppcp {
  text-align: center;
  color: #fff;
  font-weight: normal;
}
.section .pp {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

@media screen and (max-width: 576px) {
  .wrap-main .section {
    padding-top: 0;
  }
    .wrap-main .section-border {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 4px;
      min-width: inherit;
      min-height: inherit;
    }
      .wrap-main .section-bg {
        width: 100%;
        height: 100%;
        min-width: inherit;
        min-height: inherit;
        padding: 40px 20px;
      }
      .section .wrap-ppcp {
        /* display: none; */
        font-size: 0.8em;
      }
}


/* -- TOP --------------------------------- */

.section.top .section-bg {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  align-items: stretch;
}
  .section.top .wrap-logo {
    align-self: flex-end;
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .section.top .logo {
      display: block;
      padding: 0;
      margin: 0;
      width: 389px;
      height: 105px;
      background: url(../img/logo.png) no-repeat;
      background-size: contain;
      text-indent: 200%;
      white-space: nowrap;
      overflow: hidden;
      word-break: keep-all;
      word-wrap: normal;
    }

  .section.top .wrap-ppcp {
    text-align: center;
    margin-bottom: 20px;
  }


@media screen and (max-width: 576px) {
  .section.top .wrap-logo {
    padding-top: 20px;
    width: 100%;
  }
    .section.top .logo {
      max-width: 80%;
      margin: 0 auto;
    }
    .section.top .wrap-scroll {
      margin: 30px auto;
    }
}

/* -- about --------------------------------- */
.section.about .wrap-title {
  padding-top: 40px;
}
  .section.about .title {
    display: block;
    padding: 0;
    margin: 0;
    width: 110px;
    height: 26px;
    background: url(../img/title2.svg) no-repeat;
    background-size: contain;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    word-break: keep-all;
    word-wrap: normal;
  }
  .section.about .company-info {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
  }
    .section.about .company-info > div {
      display: flex;
      width: 100%;
      margin-bottom: 10px;
    }
      .section.about .company-info dt {
        width: 30%;
        text-align: right;
      }
      .section.about .company-info dd {
        width: 70%;
      }

  .section.about .subsidiary-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
    .section.about .subsidiary-list li {
    }
    .section.about .subsidiary-list li a {
    }
    .section.about .subsidiary-list li a:hover {
    }



@media screen and (max-width: 576px) {
  .section.about .wrap-title {
    padding-top: 20px;
    width: 100%;
  }
    .section.about .title {
      margin: 0 auto 20px auto;
    }
  .section.about .wrap-content {

  }
    .section.about .company-info {
      width: auto;
    }
      .section.about .company-info > div {
        flex-direction: column;
      }
        .section.about .company-info dt {
          width: 100%;
          text-align: left;
        }
        .section.about .company-info dd {
          width: calc(100% - 40px);
        }

    .section.about .subsidiary-list li a {
      font-weight: normal;
      font-size: inherit;
    }
}

.wrap-sppcp {
  display: none;
}
@media screen and (max-width: 576px) {
  .wrap-sppcp {
    display: none;
    margin: 20px auto;
  }
    .wrap-sppcp {
      text-align: center;
    }
    .wrap-sppcp .pp {
      margin: 0;
      padding: 0;
      cursor: pointer;
      border: none;
      background: none;
    }
}

/* -- SHOP --------------------------------- */
.section.shop .wrap-content {
  width: 400px;
}
.section.shop .wrap-title {
  padding-top: 40px;
}
  .section.shop .title {
    display: block;
    padding: 0;
    margin: 0;
    width: 186px;
    height: 26px;
    background: url(../img/title3.svg) no-repeat;
    background-size: contain;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    word-break: keep-all;
    word-wrap: normal;
  }

  .section.shop .shop-list-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
  }
    .section.shop .shop-list-title a {
      color: #ffff00;
    }
    .section.shop .shop-list-title a:hover {
    }

  .section.shop .shop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }
    .section.shop .shop-list li {
      margin-bottom: 4px;
    }
      .section.shop .shop-list li a {
        font-size: 1.1em;
      }
      .section.shop .shop-list li a:hover {
      }

  .section.shop .linkbtn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    background: #fff;
    color: #8dc21f;
    font-size: 1.1em;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
  }


@media screen and (max-width: 576px) {
  .section.shop .wrap-title {
    padding-top: 20px;
  }
  .section.shop .wrap-content {
    margin-top: 40px;
  }
}


/* -- その他 ------------------------------------------------------------------- */
/* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
  overflow-y: scroll;
  overscroll-behavior: contain;
  transition: display .5s allow-discrete, overlay .5s allow-discrete, opacity .5s;
  opacity: 0;
}
/* ON STAGE */
:popover-open,:popover-open::backdrop,[open],[open]::backdrop {
  opacity: 1;
}
/* OFF STAGE */
/* starting-style for pre-positioning (enter stage from here) */
@starting-style {
  :popover-open,  :popover-open::backdrop,  [open],  [open]::backdrop {
    opacity: 0;
  }
}
body:has([popover]:popover-open) {
  overflow: hidden;
}

#popup_pp {
  text-align: left;
  color: #fff;
  border: none;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  margin: 20px;
  background: #000000cf;
  font-weight: normal;
}
  #popup_pp .wrap-content {
    width: 960px;
    margin: 30px auto;
    padding: 20px;
  }
    #popup_pp .page-title {
      color: #fff;
      text-align: center;
      letter-spacing: 0.1em;
    }
    #popup_pp ul {
      list-style-type: none;
    }
      #popup li {
        padding-top:4px;
      }
    #popup p {
      padding-top:4px;
    }

@media screen and (max-width: 576px) {
  #popup_pp {
    height: 100%;
    width: 100%;
    margin: 0;
    font-size: 12px;
  }
    #popup_pp .wrap-content {
      width: 100%;
      margin: 0;
      padding: 20px;
    }

}

      
/* -- テキスト揃え -- */
.txl { text-align:left; }
.txr { text-align:right; }
.txc { text-align:center; }
.txvm { vertical-align:middle!important; }

.bxc { margin-left:auto; margin-right:auto; }

.vmiddle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 幅省略 */
.ellipsis {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* -- float -- */
.fl { float:left;}
.fr { float:right; }

.clb {clear:both;}
.ofa {overflow:auto}

.boxs {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

.hidden { display:none; }
.cur { cursor:pointer;}

.scrollable {
  overflow-y:scroll;
  overflow-x:hidden;
}


/* -- 調整 -- */
.mt0  { margin-top:0!important; }
.mt5  { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }
.mt40 { margin-top:40px!important; }
.mt50 { margin-top:50px!important; }
.mt100 { margin-top:100px!important; }
.mt110 { margin-top:110px!important; }
.mt150 { margin-top:150px!important; }
.mt200 { margin-top:200px!important; }
.mb0  { margin-bottom:0!important; }
.mb5  { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }
.mb40 { margin-bottom:40px!important; }
.mb50 { margin-bottom:50px!important; }
.mb100 { margin-bottom:100px!important; }
.mb150 { margin-bottom:150px!important; }
.mb200 { margin-bottom:200px!important; }
.ml0  { margin-left:0!important; }
.ml5  { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px!important; }
.ml20 { margin-left:20px!important; }
.ml25 { margin-left:25px!important; }
.ml30 { margin-left:30px!important; }
.ml150 { margin-left:150px!important; }
.ml200 { margin-left:200px!important; }
.mr0  { margin-right:0!important; }
.mr5  { margin-right:5px!important; }
.mr10 { margin-right:10px!important; }
.mr15 { margin-right:15px!important; }
.mr20 { margin-right:20px!important; }
.mr25 { margin-right:25px!important; }
.mr30 { margin-right:30px!important; }
.mr150 { margin-right:150px!important; }
.mr200 { margin-right:200px!important; }

.ml1em { margin-left:1em!important; }

.p0  { padding:0px!important; }
.p5  { padding:5px!important; }
.p10 { padding:10px!important; }
.p20 { padding:20px!important; }
.pr50 { padding-right:50px!important; }
.pl10 { padding-left:10px!important; }
.pl50 { padding-left:50px!important; }
.pb10 { padding-bottom:10px!important; }
.pb20 { padding-bottom:20px!important; }
.pb30 { padding-bottom:30px!important; }
.pb40 { padding-bottom:40px!important; }
.pb50 { padding-bottom:50px!important; }
.pb60 { padding-bottom:60px!important; }
.pb70 { padding-bottom:70px!important; }
.pb80 { padding-bottom:80px!important; }
.pb90 { padding-bottom:90px!important; }
.pb100 { padding-bottom:100px!important; }

.w10 { width:10px!important; }
.w20 { width:20px!important; }
.w30 { width:30px!important; }
.w40 { width:40px!important; }
.w50 { width:50px!important; }
.w60 { width:60px!important; }
.w70 { width:70px!important; }
.w80 { width:80px!important; }
.w90 { width:90px!important; }
.w100 { width:100px!important; }
.w110 { width:110px!important; }
.w120 { width:120px!important; }
.w130 { width:130px!important; }
.w140 { width:140px!important; }
.w150 { width:150px!important; }
.w160 { width:160px!important; }
.w170 { width:170px!important; }
.w180 { width:180px!important; }
.w190 { width:190px!important; }
.w200 { width:200px!important; }
.w220 { width:220px!important; }
.w240 { width:240px!important; }
.w260 { width:260px!important; }
.w280 { width:280px!important; }
.w300 { width:300px!important; }
.w350 { width:350px!important; }
.w400 { width:400px!important; }
.w500 { width:500px!important; }
.w600 { width:600px!important; }
.w650 { width:650px!important; }
.w700 { width:700px!important; }
.w800 { width:800px!important; }
.w900 { width:900px!important; }
.w1000 { width:1000px!important; }
.wauto{ width:auto!important;}

.mw10 { min-width:10px!important; }
.mw20 { min-width:20px!important; }
.mw30 { min-width:30px!important; }
.mw40 { min-width:40px!important; }
.mw50 { min-width:50px!important; }
.mw60 { min-width:60px!important; }
.mw70 { min-width:70px!important; }
.mw80 { min-width:80px!important; }
.mw90 { min-width:90px!important; }
.mw100 { min-width:100px!important; }
.mw110 { min-width:110px!important; }
.mw120 { min-width:120px!important; }
.mw130 { min-width:130px!important; }
.mw140 { min-width:140px!important; }
.mw150 { min-width:150px!important; }
.mw160 { min-width:160px!important; }
.mw170 { min-width:170px!important; }
.mw180 { min-width:180px!important; }
.mw190 { min-width:190px!important; }
.mw200 { min-width:200px!important; }
.mw220 { min-width:220px!important; }
.mw240 { min-width:240px!important; }
.mw260 { min-width:260px!important; }
.mw280 { min-width:280px!important; }
.mw300 { min-width:300px!important; }
.mw400 { min-width:400px!important; }
.mw500 { min-width:500px!important; }
.mw600 { min-width:600px!important; }

.mxw10 { max-width:10px!important; }
.mxw20 { max-width:20px!important; }
.mxw30 { max-width:30px!important; }
.mxw40 { max-width:40px!important; }
.mxw50 { max-width:50px!important; }
.mxw60 { max-width:60px!important; }
.mxw70 { max-width:70px!important; }
.mxw80 { max-width:80px!important; }
.mxw90 { max-width:90px!important; }
.mxw100 { max-width:100px!important; }
.mxw110 { max-width:110px!important; }
.mxw120 { max-width:120px!important; }
.mxw130 { max-width:130px!important; }
.mxw140 { max-width:140px!important; }
.mxw150 { max-width:150px!important; }
.mxw160 { max-width:160px!important; }
.mxw170 { max-width:170px!important; }
.mxw180 { max-width:180px!important; }
.mxw190 { max-width:190px!important; }
.mxw200 { max-width:200px!important; }
.mxw220 { max-width:220px!important; }
.mxw240 { max-width:240px!important; }
.mxw260 { max-width:260px!important; }
.mxw280 { max-width:280px!important; }
.mxw300 { max-width:300px!important; }
.mxw400 { max-width:400px!important; }
.mxw500 { max-width:500px!important; }
.mxw600 { max-width:600px!important; }

.w10p { width:10%!important; }
.w20p { width:20%!important; }
.w30p { width:30%!important; }
.w40p { width:40%!important; }
.w50p { width:50%!important; }
.w60p { width:60%!important; }
.w70p { width:70%!important; }
.w80p { width:80%!important; }
.w90p { width:90%!important; }
.w100p { width:100%!important; }

.w22p { width:22%!important; }
.w23p { width:23%!important; }
.w33p { width:33%!important; }
.w34p { width:34%!important; }
.w43p { width:43%!important; }
.w48p { width:48%!important; }
.w53p { width:53%!important; }
.ml4p { margin-left:4%!important; }

.w1em { width:1em!important; }

.h20 { height:20px!important; }
.h40 { height:40px!important; }
.h60 { height:60px!important; }
.h80 { height:80px!important; }
.h100 { height:100px!important; }
.h110 { height:110px!important; }
.h120 { height:120px!important; }
.h130 { height:130px!important; }
.h140 { height:140px!important; }
.h150 { height:150px!important; }
.h160 { height:160px!important; }
.h170 { height:170px!important; }
.h180 { height:180px!important; }
.h190 { height:190px!important; }
.h200 { height:200px!important; }
.h300 { height:300px!important; }
.h400 { height:400px!important; }

.mh640 { min-height:640px!important; }

.clearfix:after {
  content:"";
  display:block;
  clear:both;
}