@charset "UTF-8";
/* Scss Document */
/*utf-8です*/
body {
  min-width: 1024px;
  padding-top: 60px; }

@media (max-width: 768px) {
  body {
    min-width: 375px; } }
/*max-width:768px*/
/*max-width:480px*/
/************************************************************************************************/
header {
  position: fixed;
  width: 100%;
  background-color: #000;
  top: 0;
  z-index: 999; }

.header_box {
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  max-width: 1980px;
  min-width: 1024px;
  margin: 0 auto; }
  .header_box a {
    color: #fff; }

h1 {
  font: 22px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: 700;
  color: #fff;
  margin: 0 0 0 20px; }
  h1 span {
    margin-right: 20px; }

.header_item {
  max-width: 580px;
  width: calc(100% - 360px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  font: 17px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: 700; }
  .header_item span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    margin: 0 5px; }
  .header_item .insta {
    display: block;
    background: url("../images/common/icon-insta.svg");
    width: 30px;
    height: 30px;
    margin-right: 15px; }
  .header_item .facebook {
    display: block;
    background: url("../images/common/icon-facebook.svg");
    width: 30px;
    height: 30px;
    margin-right: 15px; }
  .header_item .line {
    display: block;
    background: url("../images/common/icon_line.svg") center center no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px; }
  .header_item .tel {
    display: block;
    background: url("../images/common/icon-tel.svg") center left no-repeat;
    padding: 10px 0 10px 25px; }
  .header_item .shop {
    display: block;
    background: url("../images/common/icon-shop.svg") center left no-repeat;
    padding: 10px 0 10px 30px; }
  .header_item .yahoo {
    display: block;
    background: url("../images/common/icon-yahoo-shop.svg") center left no-repeat;
    background-size: contain;
    padding: 10px 0 10px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 200px;
    height: 42px; }

@media (max-width: 768px) {
  header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000;
    z-index: 999; }

  .header_box {
    min-width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    max-width: 1980px;
    margin: 0 auto; }
    .header_box a {
      color: #fff; }

  h1 {
    font: 20px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    color: #fff;
    margin: 0 0 0 20px;
    /*span{
       display: none;
    }*/ }

  .header_item {
    max-width: 120px;
    width: calc(100% - 250px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    font: 17px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700; }
    .header_item span {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      align-items: center;
      margin: 0; }
    .header_item .insta,
    .header_item .facebook,
    .header_item .shop,
    .header_item .yahoo,
    .header_item .line {
      display: none; }
    .header_item .tel {
      display: block;
      background: url("../images/common/icon-tel.svg") center center no-repeat;
      width: 60px;
      height: 60px;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap; } }
/*max-width:768px*/
/************************************************************************************************/
.navToggle {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 3;
  background-color: #004077;
  text-align: center; }
  .navToggle span {
    display: block;
    position: absolute;
    /* .navToggleに対して */
    width: 30px;
    margin: 0;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 15px; }

.navToggle span:nth-child(1) {
  top: 17px; }

.navToggle span:nth-child(2) {
  top: 27px; }

.navToggle span:nth-child(3) {
  top: 37px; }

.navToggle span:nth-child(4) {
  display: none; }

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 27px;
  left: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(3) {
  top: 27px;
  left: 15px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); }

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2) {
  opacity: 0; }

/************************************************************************************************/
nav {
  position: fixed;
  top: 60px;
  right: -300px;
  z-index: 888;
  transition: .3s; }
  nav ul {
    width: 300px;
    height: 100vh;
    background-color: #004077; }
  nav a {
    display: block;
    color: #fff;
    padding: 20px 20px 22px 43px;
    font: 18px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 500;
    position: relative; }
    nav a:before {
      position: absolute;
      content: "";
      left: 15px;
      top: 25px;
      width: 6px;
      height: 6px;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    nav a:hover {
      color: #B5E0EC; }
  nav li {
    border-bottom: 1px solid #fff; }
  nav.active {
    right: 0; }

@media (max-width: 480px) {
  nav {
    position: fixed;
    top: 60px;
    right: -100%;
    z-index: 888;
    transition: .3s;
    width: 100%; }
    nav ul {
      max-width: 480px;
      width: 100%;
      height: 100vh;
      background-color: #004077;
      margin: 0 0 0 auto; } }
/*max-width:768px*/
/************************************************************************************************/
.footer_box {
  padding: 90px 40px 200px;
  text-align: center;
  background: url("../images/common/bg_footer.jpg") center bottom no-repeat;
  background-size: cover; }
  .footer_box p {
    font: 25px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    margin-bottom: 50px; }
    .footer_box p br {
      display: none; }
  .footer_box .time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 5px 40px;
    font: 17px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 500; }
  .footer_box .insta {
    display: block;
    background: url("../images/common/icon-insta-footer.svg");
    width: 50px;
    height: 50px;
    margin-right: 30px; }
  .footer_box .facebook {
    display: block;
    background: url("../images/common/icon-facebook-footer.svg");
    width: 50px;
    height: 50px;
    margin-right: 30px; }
  .footer_box .line {
    display: block;
    background: url("../images/common/icon_line-footer.svg") center center no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px; }
  .footer_box .tel {
    font: 54px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    display: inline-block;
    background: url("../images/common/icon-tel-footer.svg") center left no-repeat;
    padding: 0 0 5px 45px;
    margin-bottom: 10px; }
  .footer_box .mail {
    display: block;
    background-image: url("../images/common/icon-mail-footer.svg");
    background-repeat: no-repeat;
    background-position: 25px center;
    padding: 18px 0 18px 30px;
    width: 400px;
    margin: 0 auto 40px;
    background-color: #fff;
    border: 1px solid #B5B5B6;
    font: 24px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700; }
  .footer_box dt {
    font: 45px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    color: #0068B7;
    margin-bottom: 15px; }
  .footer_box dd {
    font: 16px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 400;
    margin-bottom: 50px; }

@media (max-width: 768px) {
  .footer_box {
    padding: 50px 15px 150px;
    text-align: center;
    background: url("../images/common/bg_footer.jpg") center bottom no-repeat;
    background-size: cover; }
    .footer_box p {
      font: 22px/1.5em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      margin-bottom: 40px; }
      .footer_box p br {
        display: block; }
    .footer_box .time {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: center;
      justify-content: center;
      align-items: center;
      margin: 0 5px 40px;
      font: 17px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 500; }
    .footer_box .insta {
      display: block;
      background: url("../images/common/icon-insta-footer.svg") center center no-repeat;
      background-size: contain;
      width: 50px;
      height: 50px;
      margin-right: 30px; }
    .footer_box .facebook {
      display: block;
      background: url("../images/common/icon-facebook-footer.svg") center center no-repeat;
      background-size: contain;
      width: 50px;
      height: 50px;
      margin-right: 30px; }
    .footer_box .line {
      display: block;
      background: url("../images/common/icon_line-footer.svg") center center no-repeat;
      background-size: contain;
      width: 50px;
      height: 50px; }
    .footer_box .tel {
      font: 45px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      display: inline-block;
      background: url("../images/common/icon-tel-footer.svg") center left no-repeat;
      padding: 0 0 5px 45px;
      margin-bottom: 10px; }
    .footer_box .mail {
      display: block;
      background-image: url("../images/common/icon-mail-footer.svg");
      background-repeat: no-repeat;
      background-position: 20px center;
      padding: 18px 0 18px 45px;
      max-width: 350px;
      width: 100%;
      margin: 0 auto 40px;
      background-color: #fff;
      border: 1px solid #B5B5B6;
      font: 22px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700; }
    .footer_box dt {
      font: 40px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      color: #0068B7;
      margin-bottom: 15px; }
    .footer_box dd {
      font: 16px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 400;
      margin-bottom: 50px; } }
/************************************************************************************************/
.online_footer {
  display: none; }

@media (max-width: 768px) {
  .online_footer {
    display: block;
    position: fixed;
    background: #3E3A39;
    bottom: 0;
    z-index: 777;
    width: 100%; }
    .online_footer ul {
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: center;
      justify-content: center;
      align-items: center; }
    .online_footer li a {
      color: #fff;
      display: block;
      width: 100%;
      height: 50px;
      font: 15px/50px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 400;
      position: relative;
      text-align: center;
      position: relative; }
    .online_footer .shop {
      background: #830009; }
      .online_footer .shop span {
        position: relative;
        padding: 0 0 0 25px;
        display: block;
        width: fit-content;
        margin: 0 auto; }
        .online_footer .shop span:before {
          position: absolute;
          content: "";
          background: url("../images/common/icon-shop.svg") center center no-repeat;
          width: 23px;
          height: 25px;
          top: 50%;
          left: 0%;
          -webkit-transform: translate(0%, -50%);
          /* Safari用 */
          transform: translate(0%, -50%); }
    .online_footer .yahoo {
      width: 100%;
      background: #F39800;
      padding: 0;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap; }
      .online_footer .yahoo a:before {
        position: absolute;
        content: "";
        background: url("../images/common/icon-yahoo-shop.svg") top 13px center no-repeat;
        background-size: 95%;
        width: 175px;
        height: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        /* Safari用 */
        transform: translate(-50%, -50%); } }
/****************************************************************/
#box_404 {
  max-width: 768px;
  width: calc(100% - 80px);
  margin: 0 auto;
  padding: 100px 0 100px;
  text-align: center; }
  #box_404 p {
    font-size: 17px;
    line-height: 2.2em;
    margin-bottom: 30px; }
  #box_404 a {
    color: #0068B7; }

.ttl_404 {
  font-size: 40px;
  font-weight: bold;
  margin: 40px auto 50px;
  color: #0068B7; }

@media (max-width: 480px) {
  #box_404 {
    width: calc(100% - 30px);
    padding: 0px 0 100px; }

  .ttl_404 {
    font-size: 35px;
    line-height: 1.5em; }
    .ttl_404 span {
      display: block; } }
/*max-width:480px*/
