@charset "UTF-8";
@use "variables" as *;

html {
  font-size: 62.5%;
  /* ブラウザ既定16px × 62.5% = 10px → 1rem = 10px */
  /* 
	html,body 以外の個所ではfont-sizeは下記の用にremで指定
	14px = 1.4rem
	15px = 1.5rem
	16px = 1.6rem
	17px = 1.7rem 
	*/
}

body.notfound404 {
  #content {
    color: #000;
  }
}

@media print,
all and (min-width: 751px) {
  body {
    /* font-size: 100%; */
    font-size: 1.6rem;
    color: #000000;
    background: #ffffff;
    line-height: 1.86666667;
    word-wrap: break-word;
    letter-spacing: 0.02em;
  }

  a,
  span,
  img {
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
  }

  a {
    color: var(--color-secondary);
    text-decoration: none;

    &:link,
    &:visited {
      color: var(--color-secondary);
      text-decoration: none;
    }

    &:hover {
      color: var(--color-secondary);
      text-decoration: underline;
    }
  }

  .container {
    width: 100%;
    min-width: 1120px;
  }

  .container-inner {
    width: 960px;
    margin: 0 auto;
  }

  .pc-anchor {
    margin-top: -80px !Important;
    padding-top: 80px !Important;
  }

  .fade-in {
    opacity: 0.0;
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    -ms-transition: all 500ms;
    transition: all 500ms;
  }

  .scroll-in {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  /* HEADER */

  body:has(.slick-current .logo-white) #header .h-logo {
    a {
      color: #fff;
    }
  }

  #header {
    /* height: 100px; */
    margin: 0;
    position: absolute;
    left: 0;
    top: 23px;
    right: 0;
    z-index: 3;

    .container-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .primary {
      flex: 1;

      .h-logo {
        margin-bottom: 0;

        a {
          color: var(--color-body);
        }

        .ja {
          display: block;
          font-family: var(--font-mincho);
          font-size: 1.9rem;

          span {
            font-size: 3.0rem;
            margin-left: 7px;
          }
        }

        .en {
          font-family: var(--font-bona);
          line-height: 1.4;
          display: inline-block;
        }
      }
    }

    .secondary {
      width: 275px;
      text-align: right;
      color: #fff;

      .caption {
        background-color: var(--color-secondary);
        font-weight: bold;
        padding: 0px 14px;
        margin-bottom: 8px;
        display: inline-block;
      }

      .place,
      .tel {
        vertical-align: middle;
        color: #fff;
      }

      .place {
        font-size: 1.5rem;
      }

      .tel {
        font-size: 2.5rem;
        font-family: var(--font-cinzel);
      }
    }

    .h-logo a:hover {
      text-decoration: none;
      filter: alpha(opacity=60);

      /* IE 6,7*/
      -ms-filter: "alpha(opacity=60)";

      /* IE 8,9 */
      -moz-opacity: 0.6;

      /* FF , Netscape */
      -khtml-opacity: 0.6;

      /* Safari 1.x */
      opacity: 0.6;
      zoom: 1;

      /*IE*/
    }

    .secondary {
      float: right;
      width: 400px;
    }

    .h-contact {
      text-align: right;

      >a {
        display: inline-block;
        padding: 2px 10px;
        color: #ffffff;
        font-size: 93.33333%;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        background-color: #000000;

        &:hover {
          background-color: #666666;
        }
      }
    }
  }

  /* NAV */

  #nav {
    margin: 0;
    position: sticky;
    top: 0;
    width: 1060px;
    margin: 0 auto 20px;
    background-color: #fff;
    z-index: 1;

    #pc-nav {
      text-align: center;
      position: relative;
      display: flex;
      justify-content: center;
      gap: 58px;

      >li {
        vertical-align: middle;
        letter-spacing: normal;
        position: relative;

        >a {
          display: block;
          padding: 20px 0;
          font-size: 112.5%;
          text-align: center;
          text-decoration: none;
          color: var(--color-body);
          position: relative;

          &::before {
            content: "";
            display: inline-block;
            width: 40px;
            height: 3px;

            background-color: var(--color-accent);
            vertical-align: middle;
            margin-right: 5px;
            /* ← ここが色 */

            mask-image: url("../images/common/nav-icon.svg");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;

            -webkit-mask-image: url("../images/common/nav-icon.svg");
            /* Safari */
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
          }

          &:hover {
            color: #1698d8;

            &::before {
              background-color: var(--color-secondary);
            }
          }
        }

        &.on>a {
          color: var(--color-primary);
          font-weight: bold;

          &::before {
            background-color: var(--color-secondary);
          }
        }

        &.parent ul {
          display: none;
          width: 100%;
          position: absolute;
          top: 50px;
          margin-bottom: 0;
          padding: 10px 0;
          background-color: rgba(0, 0, 0, 0.8);

          li {
            display: block;
            padding: 0 10px;

            a {
              display: block;
              color: #ffffff;
              font-size: 93.33333%;
              font-family: "UD Shin Go Regular", "UD?V?S R", "?q???M?m?p?S Pro W3", "Hiragino Kaku Gothic Pro", "???C???I", Meiryo, Osaka, "?l?r ?o?S?V?b?N", "MS PGothic", sans-serif;
              font-weight: bold;
              text-decoration: none;
              padding: 2px 0;
            }

            &.on a,
            a:hover {
              color: #1698d8;
            }
          }
        }
      }
    }
  }

  /* GMAP */
}

/* FOOTER */

#footer {
  color: #fff;
  background: linear-gradient(150deg, rgb(92 105 255) 12%, rgb(5 61 155) 60%, rgb(5 72 126) 95% 72%);
  padding: 35px 0;
  text-align: center;

  .f-logo {
    width: 405px;
    margin: 0 auto 20px;

    a {
      &:hover {
        text-decoration: none !important;
        filter: alpha(opacity=60);

        /* IE 6,7*/
        -ms-filter: "alpha(opacity=60)";

        /* IE 8,9 */
        -moz-opacity: 0.6;

        /* FF , Netscape */
        -khtml-opacity: 0.6;

        /* Safari 1.x */
        opacity: 0.6;
        zoom: 1;

        /*IE*/
      }
    }
  }

  .f-address {
    margin-bottom: 5px;

    .f-caption {
      background-color: var(--color-secondary);
      font-weight: bold;
      padding: 0px 14px;
      margin-bottom: 8px;
      display: inline-block;
    }

    .f-place,
    .f-tel,
    .f-fax {
      vertical-align: middle;
      margin-right: 14px;
    }

    .f-place {
      font-size: 1.4rem;
    }

    .f-tel {
      font-size: 2.3rem;
      font-family: var(--font-cinzel);
    }

    .f-map {
      display: inline-block;
      vertical-align: middle;

      a {
        display: inline-block;
        padding: 2px 10px;
        text-decoration: none;
        border: 1px solid #ffffff;

        &:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }


  .copyright {
    margin: 10px 0 0;
    padding: 10px 0;
    font-size: 1.4rem;
  }
}

/* NAVIGATION */

#toggle {
  display: none;
}

.fixed {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: -40px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

/* TITLE */

#title {
  margin: 0;
  width: auto;
  height: 340px;
  background-image: url(../images/common/title-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  margin-bottom: 10px;


  .container-inner {
    padding: 0;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    /* -webkit-justify-content: center;
    justify-content: center; */
    -webkit-align-items: flex-end;
    align-items: flex-end;
    text-align: center;
  }

  .title-box {
    display: inline-block;
    padding: 15px 0 30px;
  }

  .title {
    margin-bottom: 0;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.5pt;
    text-indent: 0.5pt;
    line-height: 1.5;

    .ja {
      font-size: 3.4rem;
      z-index: 1;
      position: relative;
      font-family: var(--font-mincho);
    }

  }
}

#md-site {
  &.blue #title .level01 {
    color: #0A56A0;
  }

  &.black #title .level01 {
    color: #000000;
  }
}



/* CONTENT */

#content {
  color: #fff;

  a {
    text-decoration: underline;
  }

  .container-inner {}
}

#breadcrumb {
  margin-bottom: 50px;

  li {
    display: inline-block;
    vertical-align: middle;
    font-size: 85.7142%;

    a {
      color: #000000;
    }

    &.on {
      color: #000000;
      font-weight: bold;
    }
  }
}

#main {
  float: left;
  width: 710px;
}

#side {
  float: right;
  width: 200px;
}

.section {
  margin-bottom: 70px;
}

.section-s {
  margin-bottom: 50px;
}

.section-ss {
  margin-bottom: 30px;
}

.section-sss {
  margin-bottom: 15px;
}

.section-ssss {
  margin-bottom: 10px;
}

.pagetop {
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
  margin: 0;
  z-index: 5000;

  a {
    display: block;
    width: 48px;
    height: 48px;
    line-height: 0;
    text-decoration: none;
    background: var(--color-primary);
    position: relative;

    &::before {
      position: absolute;
      content: '';
      left: 16px;
      top: 20px;
      width: 15px;
      height: 15px;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    &:hover {
      filter: alpha(opacity=60);

      /* IE 6,7*/
      -ms-filter: "alpha(opacity=60)";

      /* IE 8,9 */
      -moz-opacity: 0.6;

      /* FF , Netscape */
      -khtml-opacity: 0.6;

      /* Safari 1.x */
      opacity: 0.6;
      zoom: 1;

      /*IE*/
    }

    img {
      display: none;
      // position: absolute;
      // top: 0;
      // right: 0;
      // bottom: 0;
      // left: 0;
      // margin: auto;
    }
  }
}

#md-site {

  &.blue .pagetop a,
  &.black .pagetop a {
    background-color: transparent;
  }
}

.pagetop a {
  &:hover {
    filter: alpha(opacity=60);

    /* IE 6,7*/
    -ms-filter: "alpha(opacity=60)";

    /* IE 8,9 */
    -moz-opacity: 0.6;

    /* FF , Netscape */
    -khtml-opacity: 0.6;

    /* Safari 1.x */
    opacity: 0.6;
    zoom: 1;

    /*IE*/
  }

  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}

.inlink {
  margin-top: -70px;
  padding-top: 70px;
}

/* SNAV */

/* SUBNAV */

#bottoms {
  display: none;
}
}