@charset "UTF-8";

/* Scss Document */
/*=============================================
 * body
 *=============================================*/
body {
   color: #000;
   font-family: 'Noto Serif JP', serif;
   font-weight: 500;
   font-style: normal;
   font-size: 14px;
   line-height: 28px;
   letter-spacing: 0;
   background: url("../img/shared/body-bg.jpg") repeat center top;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
}

@media only screen and (min-width: 768px) {
   body {
      font-size: 16px;
      line-height: 35px;
   }
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
   font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
   font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.fnt-noto-serif {
   font-family: 'Noto Serif JP', serif;
}

/*=============================================
   main
*=============================================*/
main {
   clear: both;
   width: 100%;
   overflow: hidden;
   position: relative;
}

@media only screen and (max-width: 767px) {
   .wrap {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30px;
      position: relative;
   }

   img {
      width: 100%;
      height: auto;
   }
}

@media only screen and (min-width: 768px) {
   .wrap {
      margin: 0 auto;
      width: 1000px;
      position: relative;
      padding: 0;
   }
}

/*=============================================
   header
*=============================================*/
header {
   position: relative;
}

@media only screen and (max-width: 767px) {
   header h1 {
      color: #fff;
      font-size: 9px;
      line-height: 15px;
      letter-spacing: 0;
      position: absolute;
      right: 34%;
      top: 20px;
      left: 15px;
      z-index: 1;
   }

   header h1 br {
      display: none;
   }

   header .logo {
      width: 100%;
      position: absolute;
      top: -30px;
      left: 0;
      z-index: 1;
   }

   header .tel {
      width: 100%;
      position: absolute;
      top: 20%;
      left: 0;
      z-index: 2;
   }

   .hamburger {
      width: 61px;
      height: 63px;
      background: url("../img/shared/hamburger.jpg") no-repeat center/cover;
      position: fixed;
      top: 15px;
      right: 10px;
      transition: all 0.3s ease;
      z-index: 101;
   }

   .hamburger.is-active {
      background-image: url(../img/shared/hamburger_close.jpg);
   }

   #menu-toggle {
      width: 100%;
      height: 100vh;
      background-color: #150f09;
      box-sizing: border-box;
      padding: 0 0 125px;
      position: fixed;
      top: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s ease;
      z-index: 100;
   }

   #menu-toggle .sp_tel {
      margin: -23% 0 -11%;
   }

   #menu-toggle .nav1 li {
      position: relative;
   }

   #menu-toggle .nav2 {
      display: flex;
      flex-wrap: wrap;
      padding-top: 25px;
   }

   #menu-toggle .nav2 li {
      width: 50%;
   }

   .navOpen #menu-toggle {
      opacity: 1;
      visibility: visible;
   }

   .news-feed {
      width: 78%;
      background-color: rgba(255, 255, 255, 0.67);
      box-sizing: border-box;
      padding: 15px;
      box-shadow: 16px 15px 29.12px 2.88px rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: -60px;
      left: 0;
      z-index: 1;
   }

   .news-feed h3 {
      padding-bottom: 5px;
   }

   .news-feed dl {
      display: table;
      width: 100%;
      box-sizing: border-box;
	   text-align: center;
   }

   .news-feed dl>* {
      display: table-cell;
      vertical-align: middle;
   }

   .news-feed dl dt {
      width: 50px;
   }

   .news-feed dl dt a {
      display: block;
      width: 100%;
      padding-top: 100%;
      position: relative;
   }

   .news-feed dl dt a span {
      display: block;
      width: 100% !important;
      height: 100% !important;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
   }

   .news-feed dl dt a:hover span {
      opacity: 0.7;
   }

   .news-feed dl dd {
      font-weight: 500;
      font-size: 7px;
      line-height: 15px;
     /* text-align: center;*/
      text-align: left!important;
      padding-left: 10px;
   }

   .news-feed dl dd .date {
      padding-bottom: 5px;
      text-align: left!important;
   }

   .news-feed dl dd .ttl a {
      text-decoration: underline;
      text-align: left!important;
   }

   .btn_covid {
      width: 44%;
      box-shadow: 10px 9px 16.8px 4.2px rgba(0, 0, 0, 0.33);
      position: absolute;
      bottom: 30%;
      left: 0;
      z-index: 2;
   }
}

@media only screen and (min-width: 768px) {
   header {
      position: relative;
   }

   header h1 {
      width: 40px;
      height: 280px;
      color: #fff;
      font-weight: bold;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0.02em;
      position: absolute;
      top: 95px;
      right: 460px;
      z-index: 1;
   }

   header .logo {
      position: absolute;
      top: -70px;
      left: 0;
      z-index: 2;
   }

   header .tel {
      position: absolute;
      top: 200px;
      left: 0;
      z-index: 1;
   }

   .menu-pc {
      position: absolute;
      top: 97px;
      right: 86px;
      z-index: 1;
   }

   .menu-pc .inr {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
   }

   .menu-pc ul:nth-child(1) {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      flex-direction: row-reverse;
   }

   .menu-pc ul:nth-child(1) li {
      margin-left: 18px;
      box-shadow: 0px 0px 60.8px 91.2px rgba(0, 0, 0, 0.21);
   }

   .menu-pc ul:nth-child(2) {
      margin-right: 6px;
   }

   .news-feed {
      width: 587px;
      background-color: rgba(255, 255, 255, 0.67);
      box-sizing: border-box;
      padding: 37px 37px 37px;
      box-shadow: 16px 15px 29.12px 2.88px rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: -117px;
      left: 0;
      z-index: 1;
   }

   .news-feed h3 {
      padding-bottom: 21px;
   }

   .news-feed dl {
      display: table;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
   }

   .news-feed dl>* {
      display: table-cell;
      vertical-align: top;
   }

   .news-feed dl dt {
      width: 102px;
   }

   .news-feed dl dt a {
      display: block;
      width: 100%;
      padding-top: 100%;
      position: relative;
   }

   .news-feed dl dt a span {
      display: block;
      width: 100% !important;
      height: 100% !important;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
   }

   .news-feed dl dt a:hover span {
      opacity: 0.7;
   }

   .news-feed dl dd {
      font-weight: 500;
      font-size: 14px;
      line-height: 29px;
      /*text-align: center;*/
      text-align: left!important;
      padding-left: 12px;
   }

   .news-feed dl dd .date {
      text-decoration: underline;
      padding-bottom: 13px;
      text-align: left!important;
   }

   .news-feed dl dd .ttl a {
      text-decoration: underline;
      text-align: left!important;
   }

   .news-feed dl dd .ttl a:hover {
      text-decoration: none;
   }

   .btn_covid {
      box-shadow: 10px 9px 16.8px 4.2px rgba(0, 0, 0, 0.33);
      position: absolute;
      bottom: 97px;
      left: 0;
      z-index: 2;
   }
}

.nav-fixed {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.71);
   box-sizing: border-box;
   position: fixed;
   top: 0;
   left: 0;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   z-index: 99;
   box-shadow: 0px 0px 51.33px 35.67px rgba(0, 0, 0, 0.14);
}

.nav-fixed .wrap {
   display: flex;
}

.nav-fixed ul {
   display: flex;
   flex-wrap: wrap;
}

.nav-fixed.fixed {
   opacity: 1;
   visibility: visible;
}

/*=============================================
   section
*=============================================*/
/* -- -- */
section {
   background: url("../img/shared/bg01.png") repeat center top;
}

/* -- -- */
/*=============================================
   footer
*=============================================*/
footer {
   background: url("../img/shared/shop_info-bg.jpg") repeat center top;
   color: #fff;
   font-weight: 300;
}

#shopinfo {
   font-weight: 300;
}

@media only screen and (max-width: 767px) {
   #shopinfo .bg-parallax {
      height: 320px;
   }

   #shopinfo h2 {
      width: 36px;
      position: absolute;
      top: -70px;
      left: 50%;
      transform: translateX(-50%);
   }

   #shopinfo .sub-ttl {
      font-size: 10px;
      padding: 75px 0 25px;
   }

   #shopinfo .tel {
      width: 70%;
      margin: 0 auto;
   }

   #shopinfo .box {
      padding-top: 30px;
      padding-bottom: 50px;
      margin: 0 -10px;
   }

   #shopinfo .box .col {
      width: 100%;
   }

   #shopinfo .box .col dl {
      display: table;
      width: 100%;
      box-sizing: border-box;
      font-size: 10px;
      line-height: 25px;
      letter-spacing: 0.04em;
   }

   #shopinfo .box .col dl>* {
      display: table-cell;
      vertical-align: top;
      text-align: left;
   }

   #shopinfo .box .col dl dt {
      width: 70px;
   }

   #shopinfo .box .photo {
      width: 55%;
      margin: 0 auto;
      padding-top: 40px;
   }

   #shopinfo iframe {
      display: block;
      width: 100%;
      height: 480px;
   }

   #shopinfo .box-btn {
      padding: 30px 0 70px;
   }

   #shopinfo .box-btn ul {
      padding: 0 20px;
   }

   #shopinfo .box-btn .btn01 {
      display: block;
      background: url("../img/shared/btn-arrow.png") no-repeat center right 25px/auto 11px;
      font-size: 15px;
      line-height: 48px;
      letter-spacing: 0.4em;
      border: 1px solid #fff;
      padding: 0 25px;
   }

   #shopinfo .box-btn .btn01:hover {
      text-decoration: none;
   }

   #shopinfo .box-btn dl {
      padding-top: 70px;
   }

   #shopinfo .box-btn dl dt {
      text-align: center;
      font-size: 21px;
      line-height: 35px;
      letter-spacing: 0.14em;
      color: #c4c2c2;
   }

   #shopinfo .box-btn dl dd {
      font-size: 12px;
      line-height: 24px;
      letter-spacing: 0.04em;
      color: #c4c2c2;
      padding-top: 30px;
   }

   footer .row {
      text-align: center;
      background: url("../img/shared/footer-line.jpg") repeat-x center bottom;
      padding-bottom: 100px;
   }

   footer .row nav {
      margin: 0 -30px;
   }

   footer .row nav a {
      display: block;
      background: url("../img/shared/sp_foot-nav-arrow.png") no-repeat center right 30px/16px 4px;
      color: #e9e3db;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0.04em;
      line-height: 48px;
      border-bottom: 1px solid #363333;
      padding: 0 30px;
   }

   footer .row nav a:first-child {
      border-top: 1px solid #363333;
   }

   footer .row ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 30px;
   }

   footer .row ul li {
      width: 30%;
   }

   footer .row #socialbuttons {
      padding-top: 40px;
   }

   footer .row address {
      font-size: 10px;
      line-height: 20px;
      letter-spacing: 0.2em;
      padding-top: 10px;
   }

   footer .row .cookies-link {
      font-size: 8px;
      line-height: 20px;
      letter-spacing: 0.2em;
      padding-bottom: 50px;
   }

   #pagetop {
      width: 44px;
      right: 20px;
      bottom: 60px;
   }
}

@media only screen and (min-width: 768px) {
   #shopinfo .bg-parallax {
      background-image: url(../img/shared/shop_info-photo1.jpg);
      min-height: 640px;
   }

   #shopinfo h2 {
      position: absolute;
      top: -143px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
   }

   #shopinfo .sub-ttl {
      font-size: 16px;
      line-height: 35px;
      letter-spacing: 0.04em;
      padding: 149px 0 36px;
   }

   #shopinfo .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 61px 7px 105px 47px;
   }

   #shopinfo .box .col {
      width: 470px;
   }

   #shopinfo .box .col dl {
      display: table;
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 35px;
      letter-spacing: 0.04em;
   }

   #shopinfo .box .col dl>* {
      display: table-cell;
      vertical-align: top;
   }

   #shopinfo .box .col dl dt {
      width: 94px;
   }

   #shopinfo .box .photo {
      padding-top: 3px;
   }

   #shopinfo iframe {
      width: 100%;
      height: 475px;
   }

   #shopinfo .box-btn {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 18px 40px 94px 49px;
   }

   #shopinfo .box-btn .btn01 {
      display: inline-block;
      width: 290px;
      background: url("../img/shared/btn-arrow.png") no-repeat center right 26px/72px 11px;
      box-sizing: border-box;
      border: 1px solid #fff;
      color: #fff;
      font-size: 16px;
      letter-spacing: 0.4em;
      line-height: 50px;
      padding: 4px 0px 1px 29px;
      transition: all 0.3s;
   }

   #shopinfo .box-btn .btn01:hover {
      text-decoration: none;
      opacity: 0.7;
   }

   #shopinfo .box-btn ul {
      width: 445px;
      padding-top: 50px;
   }

   #shopinfo .box-btn ul li:nth-child(1) .print {
      padding-left: 21px;
      position: relative;
      top: -2px;
   }

   #shopinfo .box-btn ul li:nth-child(2) {
      padding: 44px 0 0 145px;
   }

   #shopinfo .box-btn dl {
      width: 300px;
      position: relative;
   }

   #shopinfo .box-btn dl:before {
      content: '';
      width: 100%;
      height: 106%;
      border-left: 1px solid #fff;
      position: absolute;
      top: 0;
      left: -63px;
   }

   #shopinfo .box-btn dl:after {
      content: '';
      width: 10px;
      height: 75px;
      background-color: #fff;
      position: absolute;
      top: 20px;
      left: -68px;
   }

   #shopinfo .box-btn dl dt {
      font-size: 20px;
      line-height: 35px;
      letter-spacing: 0.14em;
      padding: 34px 0 30px;
   }

   #shopinfo .box-btn dl dd {
      font-size: 14px;
   }

   footer .row {
      text-align: center;
      background: url("../img/shared/footer-line.jpg") repeat-x center bottom;
      color: #eceae8;
      padding: 33px 0 148px;
      position: relative;
   }

   footer .row:before {
      content: '';
      width: 1300px;
      height: 100%;
      border-top: 1px solid #626262;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   footer .row nav {
      font-size: 15px;
      line-height: 26px;
      letter-spacing: 0.18em;
   }

   footer .row nav a {
      border-bottom: 1px solid transparent;
      margin: 0 14px;
      position: relative;
   }

   footer .row nav a+a:before {
      content: '/';
      position: absolute;
      top: -3px;
      left: -19px;
   }

   footer .row nav a:hover {
      text-decoration: none;
      border-color: #fff;
   }

   footer .row ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 5px;
   }

   footer .row #socialbuttons {
      padding-top: 71px;
   }

   footer .row address {
      font-size: 15px;
      line-height: 26px;
      letter-spacing: 0.2em;
      padding-top: 26px;
   }

   footer .row .cookies-link {
      font-size: 11px;
      line-height: 26px;
      letter-spacing: 0.2em;
      position: relative;
      top: -2px;
   }
   footer .row .cookies-link a{
      border-bottom: 1px solid transparent;
   }
   footer .row .cookies-link a:hover{
      border-color: #fff;
      text-decoration: none;
   }
}

/*=============================================
   Custom
*=============================================*/
.pc {
   display: none;
}

.sp {
   display: block;
}

@media only screen and (min-width: 768px) {
   .pc {
      display: block;
   }

   .sp {
      display: none;
   }
}

/* -- -- */
@media only screen and (max-width: 767px) {
   #key {
      width: 100%;
      height: 590px;
      margin-bottom: -2px;
      position: relative;
   }
}

@media only screen and (min-width: 768px) {
   #key {
      width: 100%;
      height: 942px;
      position: relative;
   }
}

/* -- --*/
.bg-parallax {
   min-height: inherit;
   position: relative;
}

.img_parallax {
   display: none;
}

@media only screen and (max-width: 1200px) {
   .bg-parallax {
      background: transparent !important;
      position: relative;
   }

   .img_parallax {
      display: block;
      clip: rect(0, auto, auto, 0);
      margin-bottom: 0;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
   }

   .img_parallax img {
      width: 100%;
      height: 100vh !important;
      position: fixed;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0;
      object-fit: cover;
      z-index: 0;
      transform: translateZ(0) !important;
   }
}

/* -- -- */
.cl-red {
   color: #c90101;
}

.txt-c {
   text-align: center;
}

/* -- -- */
@media only screen and (min-width: 768px) {
   .txt-vertical-pc {
      cursor: vertical-text;
      writing-mode: vertical-rl;
      -o-writing-mode: vertical-rl;
      -ms-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -moz-writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      text-orientation: upright;
      word-wrap: break-word;
   }

   .txt-vertical .int {
      writing-mode: lr-tb;
      -o-writing-mode: horizontal-tb;
      -ms-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      -moz-writing-mode: horizontal-tb;
      -webkit-writing-mode: horizontal-tb;
      display: inline-block;
      text-align: center;
      line-height: 1.5em;
   }

   .txt-vertical .txt-latin {
      cursor: vertical-text;
      direction: rtl;
      writing-mode: vertical-rl;
      -o-writing-mode: vertical-rl;
      -ms-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -moz-writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      text-orientation: sideways-right;
      -o-text-orientation: sideways-right;
      -ms-text-orientation: upright;
      -ms-text-orientation: sideways-right;
      -moz-text-orientation: sideways-right;
      -webkit-text-orientation: sideways-right;
      letter-spacing: .25em;
   }

   @-moz-document url-prefix() {
      .txt-vertical .txt-latin {
         position: relative;
         left: 4px;
      }
   }
}

#socialbuttons {
   text-align: center;
   display: flex;
   justify-content: center;
}

.social-facebook {
   width: 95px;
   overflow: hidden;
   display: flex !important;
   justify-content: center;
}

/* -- slick -- */
.slick-slider {
   z-index: 0;
}

.slick-arrow {
   width: 11px;
   height: 15px;
   line-height: 15px;
   border: none;
   background: transparent;
   font-size: 0;
   position: relative;
   position: absolute;
   top: 50%;
   z-index: 9;
}

/* slick dots custom */
.slick-dots {
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: -o-flex;
   display: flex;
   flex-wrap: wrap;
}

.slick-dots li {
   width: 45px;
   height: 5px;
   background-color: #000;
   line-height: 0;
   position: relative;
}

.slick-dots li+li {
   margin-left: 17px;
}

.slick-dots li button {
   display: block;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
}

.slick-dots li.slick-active {
   background: #c90101;
}

/* -- -- */
.btn-s a {
   display: inline-block;
   width: 90%;
   background-color: rgba(0, 0, 0, 0.2);
   box-sizing: border-box;
   color: #eeeee7;
   font-weight: 600;
   font-size: 18px;
   line-height: 38px;
   letter-spacing: 0.28em;
   text-align: center;
   border: 2px solid #edede6;
   box-shadow: inset 0px 0 7px rgba(255, 255, 255, 0.35), 0px 0 7px rgba(255, 255, 255, 0.35), 0px 0px 41.61px 15.39px rgba(0, 0, 0, 0.35);
   padding: 4px 0;
   position: relative;
   transition: all 0.3s;
}

.btn-s a:before {
   content: '';
   border: 1px solid #fff;
   position: absolute;
   top: 4px;
   right: 4px;
   bottom: 4px;
   left: 4px;
}

.btn-s a:hover {
   background-color: #000;
   text-decoration: none;
}

.btn-s.black a {
   background-color: transparent;
   box-shadow: none;
   border-color: #000;
   color: #000;
}

.btn-s.black a:before {
   border-color: #000;
}

.btn-s.black a:hover {
   background-color: #000;
   color: #eeeee7;
}

.btn-s.black a:hover:before {
   border-color: #edede6;
}

@media only screen and (max-width: 767px) {
   .btn-s {
      text-align: center;
   }
}

@media only screen and (min-width: 768px) {
   .btn-s a {
      width: 362px;
      font-size: 24px;
      line-height: 50px;
   }

   .btn-s a:before {
      top: 3px;
      right: 4px;
      bottom: 4px;
      left: 3px;
   }
}

/* -- -- */
.remodal-overlay {
   background-color: rgba(54, 46, 43, 0.91);
}

button.remodal-close {
   width: 51px;
   height: 51px;
   top: 0;
   right: 0;
}

.modal-content {
   font-size: 12px;
   line-height: 24px;
   letter-spacing: 0.075em;
   padding: 80px 0;
}

.modal-content h2 {
   text-align: center;
   font-size: 14px;
}

.modal-content h2 span {
   display: block;
   font-family: 'Aleo', serif;
   font-size: 16px;
   letter-spacing: 0.4em;
}

.modal-content dl {
   padding-top: 30px;
}

.modal-content dl dt {
   padding-bottom: 40px;
}

.modal-content dl dd {
   border: 1px solid #fff;
   padding: 20px;
}

.modal-content dl dd ul {
   display: inline-block;
   text-align: left;
}

@media only screen and (min-width: 768px) {
   .remodal-overlay {
      background-color: transparent;
   }

   .remodal {
      background-color: rgba(54, 46, 43, 0.91);
   }

   button.remodal-close {
      top: 50px;
      right: 50px;
   }

   .modal-content {
      font-size: 14px;
      line-height: 36px;
   }

   .modal-content h2 {
      font-size: 17px;
   }

   .modal-content h2 span {
      font-size: 19px;
      line-height: 46px;
   }

   .modal-content dl {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 50px 50px 0;
   }

   .modal-content dl>* {
      width: 50%;
      box-sizing: border-box;
   }

   .modal-content dl dd {
      padding: 50px 15px;
   }
}

/* -- -- */
/*=============================================
   css for ie 11 
*=============================================*/
#fixed-sp {
   width: 100%;
   background-color: #626262;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 99;
   transition: all 0.3s ease;
   opacity: 0;
   visibility: hidden;
}

#fixed-sp.visible {
   opacity: 1;
   visibility: visible;
}

#fixed-sp ul {
   display: flex;
   flex-wrap: wrap;
   position: relative;
}

#fixed-sp ul li:nth-child(1){
   width: calc(100% - 86px);
}
#fixed-sp ul li a {
   display: block;
   background-color: #626262;
   text-align: center;
}

#fixed-sp ul li img {
   width: auto;
   height: 46px;
}

/* iPhone X */
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
   footer .row {
      padding-bottom: 150px;
   }

   .has_nav footer:after {
      background-color: transparent;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 30px;
   }

   #fixed-sp {
      padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

   #pagetop {
      bottom: calc(env(safe-area-inset-bottom) + 55px);
      right: 0;
   }
}

/* iPhone XR */
@media only screen and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
   footer .row {
      padding-bottom: 150px;
   }

   .has_nav footer:after {
      background-color: transparent;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 30px;
   }

   #fixed-sp {
      padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

   #pagetop {
      bottom: calc(env(safe-area-inset-bottom) + 55px);
      right: 0;
   }
}

/* iPhone 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
   footer .row {
      padding-bottom: 150px;
   }

   .has_nav footer:after {
      background-color: transparent;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 30px;
   }

   #fixed-sp {
      padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

   #pagetop {
      bottom: calc(env(safe-area-inset-bottom) + 55px);
      right: 0;
   }
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   footer .row {
      padding-bottom: 150px;
   }

   .has_nav footer:after {
      background-color: transparent;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 60px;
   }

   #fixed-sp {
      padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

   #pagetop {
      bottom: calc(env(safe-area-inset-bottom) + 55px);
      right: 0;
   }
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
   footer .row {
      padding-bottom: 150px;
   }

   .has_nav footer:after {
      background-color: transparent;
      content: '';
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 30px;
   }

   #fixed-sp {
      padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
   }

   #pagetop {
      bottom: calc(env(safe-area-inset-bottom) + 55px);
      right: 0;
   }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

   p.btn img:hover,
   .btn-over img,
   .over-img img,
   img.over,
   img:not(.btn):not(.non-over),
   button img {
      transform: none !important;
      -moz-transform: none !important;
      -webkit-transform: none !important;
      transition: none !important;
      -moz-transition: none !important;
      -webkit-transition: none !important;
   }

   p.bnr img:hover,
   .bnr-over img,
   .over-img img,
   img.over,
   img:not(.bnr):not(.non-over),
   button img,
   p.logo img:hover {
      transform: none !important;
      -moz-transform: none !important;
      -webkit-transform: none !important;
      transition: none !important;
      -moz-transition: none !important;
      -webkit-transition: none !important;
   }
}