@charset "utf-8";

html {
   font-size: min(10px, 0.520833333vw);
}

body {
   color: #12636F;
   font-family: "Noto Sans JP", sans-serif;
}

body.noscroll {
   overflow: hidden;
}

a {
   display: block;
   transition: 0.2s;
}

a:hover {
   opacity: 0.6;
   transition: 0.2s;
}

dt {
   font-weight: normal;
}

img {
   display: block;
   max-width: 100%;
   width: 100%;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
   padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
   margin: 0;
}

/* Set core root defaults */

/* Set core body defaults */

body {
   text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
   list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
   -webkit-text-decoration-skip: ink;
   text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
   display: block;
   max-width: 100%;
   width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
   font: inherit;
}

/* フォームリセット */

input,
button,
select,
textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: transparent;
   border: none;
   border-radius: 0;
   font: inherit;
   outline: none;
}

textarea {
   resize: vertical;
}

input[type=checkbox],
input[type=radio] {
   display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
   cursor: pointer;
}

select::-ms-expand {
   display: none;
}

/*
 * l-inner
 * -------------------------------------------------------------
 */

.l-inner {
   margin: auto;
   max-width: 118rem;
   padding: 0 4rem;
}

/*
 * l-main
 * -------------------------------------------------------------
 */

.l-main {
   overflow: hidden;
}

/*
 * c-link
 * -------------------------------------------------------------
 */

.c-link__text {
   font-size: 2.3rem;
   letter-spacing: 0.1em;
   text-align: center;
}

.c-link__flex {
   display: flex;
   gap: 0 3.4rem;
   justify-content: center;
   margin-top: 3.2rem;
}

.c-link__btn {
   border-radius: 1rem;
   color: #fff;
   font-size: 1.8rem;
   letter-spacing: 0.15em;
   padding: 1.4rem;
   text-align: center;
   text-transform: uppercase;
   width: 30rem;
}

.c-link__btn--line {
   background: #06c755;
}

.c-link__btn--web {
   background: #12636f;
}

/*
 * c-nav-btn
 * -------------------------------------------------------------
 */

.c-nav-btn {
   cursor: pointer;
   display: none;
   height: 2rem;
   position: relative;
   width: 2.5rem;
   z-index: 20;
}

.c-nav-btn span {
   background: #12636f;
   border-radius: 1rem;
   display: block;
   height: 1px;
   position: absolute;
   transition: all 0.2s;
   width: 100%;
}

.c-nav-btn span:nth-child(1) {
   top: 0;
}

.c-nav-btn span:nth-child(2) {
   top: 50%;
}

.c-nav-btn span:nth-child(3) {
   top: 100%;
}

.c-nav-btn span.is-active:nth-child(1) {
   height: 3px;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
}

.c-nav-btn span.is-active:nth-child(2) {
   opacity: 0;
}

.c-nav-btn span.is-active:nth-child(3) {
   height: 3px;
   top: 50%;
   transform: translateY(-50%) rotate(-45deg);
}

/*
 * c-pageTop
 * -------------------------------------------------------------
 */

.c-pageTop {
   cursor: pointer;
   font-size: 2rem;
   letter-spacing: 0.1em;
   position: fixed;
   right: 16.5rem;
   text-align: center;
   text-transform: uppercase;
   /* top: 100rem; */
   bottom: 12rem;
   width: 4.5rem;
}

.c-pageTop:hover {
   opacity: 1;
}

.c-pageTop::before {
   -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   background: #12636f;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   content: "";
   display: block;
   height: 1.4rem;
   margin: 0 auto 1.1rem;
   width: 2.3rem;
}

.c-pageTop__btn:hover {
   opacity: 1;
}

/*
 * c-sec-header
 * -------------------------------------------------------------
 */

.c-sec-header__title {
   align-items: center;
   display: flex;
   flex-direction: column;
   font-size: 3.7rem;
   gap: 5.5rem 0;
   letter-spacing: 0.2em;
   text-transform: capitalize;
}

.c-sec-header__title::before {
   background: url(./../images/title_img.webp) no-repeat center/100%;
   content: "";
   display: block;
   height: 13.1rem;
   width: 31.2rem;
}

/*
 * c-text
 * -------------------------------------------------------------
 */

.c-text {
   font-size: 2rem;
   letter-spacing: 0.15em;
   line-height: 2.27;
}

/*
 * fadeup
 * -------------------------------------------------------------
 */

.fadeup {
   visibility: visible !important;
}

.fadeup {
   animation-duration: 1.2s;
   animation-fill-mode: both;
   animation-name: fadeup;
}

/* ------------- スクロールフェードインDown用 END ------------- */

/*
 * u-pc
 * -------------------------------------------------------------
 */

.u-pc {
   display: block;
}

/*
 * u-sp
 * -------------------------------------------------------------
 */

.u-sp {
   display: none;
}

/*
 * about
 * -------------------------------------------------------------
 */

.about {
   background: url(./../images/about_bg.webp) no-repeat top/100%;
   padding-top: 12rem;
}

.about__inner {
   align-items: center;
   display: flex;
   position: relative;
}

.about__body {
   flex: 1;
   padding-top: 2rem;
}

.about__title {
   font-size: 3rem;
   letter-spacing: 0.25em;
   line-height: 2;
}

.about__text {
   margin-top: 5rem;
}

.about__text--space {
   margin-top: 5rem;
}

.about__img {
   position: absolute;
   right: -9.4rem;
   width: 78.2rem;
}

/*
 * access
 * -------------------------------------------------------------
 */

.access {
   padding-top: 20rem;
}

.access__inner {
   display: flex;
}

.access__map {
   aspect-ratio: 1075/536;
   width: 56%;
}

.access__details {
   background: rgba(18, 99, 111, 0.15);
   flex: 1;
   padding: 9.4rem 3rem 12rem 6rem;
}

.access__sec-title {
   font-size: 3.5rem;
   letter-spacing: 0.3em;
}

.access__address {
   margin-top: 5.8rem;
}

.access__text {
   font-size: 2.3rem;
   letter-spacing: 0.15em;
   line-height: 2;
}

.access__tel {
   font-size: 2.3rem;
   letter-spacing: 0.15em;
   line-height: 2;
}

.access__data {
   margin-top: 4.05rem;
}

.access__data-text {
   font-size: 1.6rem;
   letter-spacing: 0.1em;
   margin-top: 1.3rem;
}

/*
 * awards
 * -------------------------------------------------------------
 */

.awards {
   padding-top: 9.3rem;
}

.awards__contents {
   text-align: center;
}

.awards__img {
   margin: -6rem auto 0;
   max-width: 103.1rem;
}

.awards__img img {
   -o-object-fit: cover;
   height: 100%;
   object-fit: cover;
}

.awards__body {
   margin-top: -6.2rem;
}

.awards__text:first-child::after {
   background: url(./../images/awards_deco.webp) no-repeat center/100%;
   content: "";
   display: block;
   height: 7rem;
   margin: 4rem auto 0;
   width: 9rem;
}

.awards__text:last-child {
   margin-top: 2rem;
}

/*
 * body
 * -------------------------------------------------------------
 */

.body {
   color: #12636F;
   font-family: "a-otf-ryumin-pr6n", serif;
   font-weight: bold;
   height: 100%;
   position: relative;
}

.body::before {
   background: url(./../images/bg.webp) repeat top/100%;
   content: "";
   display: block;
   height: 100%;
   left: 0;
   opacity: 0.35;
   position: absolute;
   right: 0;
   top: 0;
   width: 100%;
   z-index: -1;
}

/*
 * footer
 * -------------------------------------------------------------
 */

.footer {
   background: #12636f;
   padding: 4.3rem 4rem 4.4rem;
}

.footer__copyright {
   color: #fff;
   font-size: 1.5rem;
   letter-spacing: 0.05em;
   text-align: center;
}

/*
 * guide
 * -------------------------------------------------------------
 */

.guide {
   padding-top: 15rem;
}

.guide__contents {
   background: #fff;
   border: 1px solid #12636F;
   border-radius: 2rem;
   padding: 7rem 3rem 10.8rem;
}

.guide__sec-title {
   background: url(./../images/guide_title.webp) no-repeat center/100%;
   color: #fff;
   height: 8.26rem;
   margin: 0 auto;
   padding: 2.2rem 0;
   text-align: center;
   width: 39rem;
}

.guide__sec-title::before {
   display: none;
}

.guide__link {
   margin-top: 9rem;
}

.guide__tel {
   margin-top: 9rem;
   text-align: center;
}

.guide__tel-text {
   font-size: 3rem;
}

.guide__tel .tel {
   font-family: "garamond-atf-micro", serif;
   font-size: 5.5rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   margin-top: 1.85rem;
}

.guide__tel-info {
   font-size: 1.8rem;
   letter-spacing: 0.05em;
   margin-top: 1.25rem;
}

.guide__img {
   margin: 5.7rem auto 0;
   width: 52.4rem;
}

.guide__text {
   font-size: 2.3rem;
   letter-spacing: 0.15em;
   margin-top: 1.25rem;
   text-align: center;
}

/*
 * header
 * -------------------------------------------------------------
 */

.header {
   position: fixed;
   right: 0;
   top: 4.6rem;
   z-index: 10;
}

.header__inner {
   height: 100%;
   width: 100%;
}

.header__sns {
   height: 3.1rem;
   margin-top: 3.2rem;
   width: 3.1rem;
}

/*
 * images
 * -------------------------------------------------------------
 */

.images {
   display: flex;
   mix-blend-mode: multiply;
}

.images img {
   -o-object-fit: cover;
   aspect-ratio: 960/496;
   height: 100%;
   object-fit: cover;
   width: 50%;
}

/*
 * info
 * -------------------------------------------------------------
 */

.info {
   padding-top: 14rem;
}

.info__map {
   margin-top: 6rem;
   position: relative;
}

.info__map-text {
   bottom: 4rem;
   font-size: 1.8rem;
   letter-spacing: 0.05em;
   line-height: 2;
   position: absolute;
   right: 28.5rem;
}

.info__img {
   display: flex;
   justify-content: space-between;
   margin-top: 8rem;
}

.info__img img {
   -o-object-fit: cover;
   aspect-ratio: 526/394;
   border-radius: 2rem;
   height: 100%;
   object-fit: cover;
   width: 52.6rem;
}

/*
 * instagram
 * -------------------------------------------------------------
 */

.instagram {
   padding-top: 13.8rem;
}

.instagram__items {
   margin-top: 9.4rem;
}

.instagram__btn {
   align-items: center;
   display: flex;
   font-size: 2.6rem;
   gap: 0 0.7rem;
   justify-content: flex-end;
   letter-spacing: 0.25em;
   margin-top: 2.5rem;
   text-align: right;
   text-transform: capitalize;
}

.instagram__btn::after {
   border-bottom: 1px solid #12636F;
   border-right: 1px solid #12636F;
   content: "";
   display: inline-block;
   height: 1rem;
   transform: skew(45deg);
   width: 10rem;
}

/*
 * menu
 * -------------------------------------------------------------
 */

.menu {
   background: url(./../images/menu_bg.webp) no-repeat top/100%;
   background-position-y: 27rem;
   padding-top: 22.5rem;
}

.menu__inner {
   max-width: 130.4rem;
}

.menu__sec-title::before {
   background: url(./../images/about_title_img.webp) no-repeat center/100%;
   content: "";
   display: block;
   height: 12.8rem;
   width: 34.4rem;
}

.menu__items {
   display: flex;
   gap: 0 11.3rem;
   margin-top: 9rem;
}

.menu__item {
   align-items: center;
   display: flex;
   flex-direction: column;
   width: 56.8rem;
}

.menu__title {
   font-size: 2.8rem;
   letter-spacing: 0.2em;
   text-align: center;
}

.menu__img {
   margin-top: 3rem;
}

.menu__img01 {
   width: 56.8rem;
}

.menu__body {
   margin-top: 3.5rem;
   width: 44rem;
}

.menu__list {
   display: flex;
}

.menu__list::before {
   content: "●";
}

.menu sup {
   font-size: 100%;
   top: 0;
}

.menu__note {
   margin-top: 6rem;
}

.menu__img02 {
   width: 54.3rem;
}

.menu__lists--space {
   margin-top: 6.8rem;
}

.menu__link {
   margin-top: 10rem;
}

/*
 * mv
 * -------------------------------------------------------------
 */

.mv {
   aspect-ratio: 1920/1060;
   background: url(./../images/mv.webp) no-repeat top/100%;
}

.mv__inner {
   height: 100%;
   position: relative;
}

.mv__copy {
   left: 13.020833333vw;
   position: absolute;
   top: 18.229166666vw;
   width: 32.708333333vw;
}

.mv__text {
   display: block;
   font-size: 1.197916666vw;
   letter-spacing: 0.2em;
   position: relative;
   text-align: center;
   top: 1.302083333vw;
}

/*
 * nav
 * -------------------------------------------------------------
 */

.nav__guide-link {
   border-radius: 1rem 0 0 1rem;
   font-size: 2.2rem;
   letter-spacing: 0.25em;
   margin-bottom: 2.3rem;
   padding: 1.1rem 2rem 1.3rem;
   text-align: center;
   text-transform: uppercase;
   width: 21.1rem;
}

.nav__guide-link--web {
   background: #12636f;
   color: #fff;
}

.nav__guide-link--line {
   background: #fff;
   border: 1px solid #12636F;
   border-right: none;
}

.nav__items {
   display: flex;
   flex-direction: column;
   gap: 2.7rem 0;
   margin-top: 4.8rem;
}

.nav__item a {
   font-size: 2rem;
   font-weight: bold;
   letter-spacing: 0.2em;
}

/*
 * products
 * -------------------------------------------------------------
 */

.products {
   padding: 11rem 0 17.8rem;
}

.products__contents {
   background: #fff;
   border: 1px solid #12636F;
   border-radius: 2rem;
   padding: 7rem 2rem;
}

.products__sec-title::before {
   display: none;
}

.products__flex {
   align-items: center;
   background: #fff;
   display: flex;
   gap: 0 3.4rem;
   justify-content: center;
   margin-top: 5.75rem;
}

.products__body {
   width: 39.2rem;
}

.products__img {
   width: 44.6rem;
}

@media screen and (min-width: 1025px) {

   a[href^="tel:"] {
      pointer-events: none;
   }

}

@media screen and (max-width: 1600px) {

   html {
      font-size: 0.620833333vw;
   }

   .c-pageTop {
      font-size: 1.5rem;
      right: 5.8rem;
      /* top: 83rem; */
   }

}

@media screen and (max-width: 767px) {

   html {
      font-size: 1.9vw;
   }

   .c-link__text {
      font-size: 1.6rem;
      line-height: 1.875;
   }

   .c-link__flex {
      align-items: center;
      flex-direction: column;
      gap: 1rem 0;
      margin-top: 1.2rem;
   }

   .c-link__btn {
      font-size: 1.5rem;
      letter-spacing: 0.1em;
      max-width: 23rem;
      padding: 0.8rem 1rem 0.9rem;
      width: 100%;
   }

   .c-nav-btn {
      display: block;
   }

   .c-pageTop {
      right: 1.6rem;
      bottom: 6rem;
      top: auto;
   }

   .c-pageTop::before {
      height: 1.55rem;
      margin-bottom: 0.9rem;
      width: 2.1rem;
   }

   .c-sec-header__title {
      font-size: 1.8rem;
      gap: 2rem 0;
      letter-spacing: 0.25em;
   }

   .c-sec-header__title::before {
      height: 6.2rem;
      width: 14.7rem;
   }

   .c-text {
      font-size: 1.6rem;
      letter-spacing: normal;
      line-height: 1.875;
   }

   .u-pc {
      display: none;
   }

   .u-sp {
      display: block;
   }

   .about {
      background: none;
      padding-top: 0;
   }

   .about__inner {
      flex-direction: column;
      gap: 4.5rem 0;
      margin-top: -2rem;
   }

   .about__body {
      padding-top: 0;
   }

   .about__title {
      font-size: 2rem;
      line-height: 1.75;
   }

   .about__text {
      margin-top: 2.8rem;
   }

   .about__img {
      margin: 0 calc(50% - 50vw);
      position: relative;
      right: 1rem;
      width: 34.8rem;
   }

   .access {
      padding-top: 5rem;
   }

   .access__inner {
      flex-direction: column;
   }

   .access__map {
      aspect-ratio: 393/196;
      width: 100%;
   }

   .access__details {
      padding: 5rem 4rem;
   }

   .access__sec-title {
      font-size: 2rem;
      letter-spacing: 0.25em;
   }

   .access__address {
      margin-top: 1.8rem;
   }

   .access__text {
      font-size: 1.6rem;
      letter-spacing: normal;
      line-height: 1.875;
   }

   .access__data {
      margin-top: 1.1rem;
   }

   .access__data-text {
      font-size: 1.3rem;
      letter-spacing: normal;
      line-height: 1.92;
      margin-top: 1.6rem;
   }

   .awards {
      padding-top: 4rem;
   }

   .awards__img {
      margin-top: -0.4rem;
   }

   .awards__body {
      margin-top: 3.4rem;
   }

   .awards__text:first-child::after {
      height: 4.8rem;
      margin-top: 3rem;
      width: 5.7rem;
   }

   .body::before {
      display: none;
   }

   .footer {
      padding: 1.8rem 1rem;
   }

   .footer__copyright {
      font-size: 1.3rem;
   }

   .guide {
      padding-top: 8rem;
   }

   .guide__contents {
      border-radius: 1rem;
      padding: 3rem 2rem 4.3rem;
   }

   .guide__sec-title {
      height: 4.2rem;
      padding: 1.3rem 0 0.3rem;
      width: 19.7rem;
   }

   .guide__link {
      margin-top: 3.5rem;
   }

   .guide__link-text {
      font-size: 1.3rem;
      letter-spacing: normal;
      line-height: 1.92;
   }

   .guide__link-flex {
      margin-top: 1.5rem;
   }

   .guide__tel {
      margin: 5rem auto 0;
      width: 23.5rem;
   }

   .guide__tel-text {
      font-size: 1.8rem;
      letter-spacing: 0.25em;
   }

   .guide__tel .tel {
      font-size: 2.5rem;
      margin-top: 2rem;
   }

   .guide__tel-info {
      font-size: 1.3rem;
      line-height: 1.92;
      margin-top: 2.3rem;
      text-align: left;
   }

   .guide__img {
      margin-top: 2.4rem;
      width: 23.5rem;
   }

   .guide__text {
      font-size: 1.6rem;
      letter-spacing: normal;
      letter-spacing: normal;
      margin-top: 1rem;
   }

   .header {
      top: 2rem;
   }

   .header__inner {
      padding: 0 2rem;
   }

   .header__sns {
      height: 2.5rem;
      margin-top: 1.5rem;
      width: 2.5rem;
   }

   .images {
      flex-direction: column;
      gap: 3rem 0;
   }

   .images img {
      aspect-ratio: 393/200;
      width: 100%;
   }

   .info {
      padding-top: 5rem;
   }

   .info__map {
      margin-top: 5.6rem;
   }

   .info__map-text {
      font-size: 1.6rem;
      letter-spacing: normal;
      line-height: 1.875;
      margin-top: 1.3rem;
      position: static;
   }

   .info__img {
      margin-top: 2.5rem;
   }

   .info__img img {
      aspect-ratio: 147/110;
      border-radius: 1rem;
      width: 14.7rem;
   }

   .instagram {
      padding-top: 5rem;
   }

   .instagram__items {
      margin-top: 4.4rem;
   }

   .instagram__btn {
      font-size: 1.6rem;
      letter-spacing: 0.2em;
      margin-top: 1rem;
      gap: 0 0.3rem;
   }

   .instagram__btn::after {
      width: 4rem;
      height: .4rem;
   }

   .menu {
      background: none;
      padding-top: 2rem;
   }

   .menu__inner {
      max-width: 100%;
   }

   .menu__sec-title {
      font-size: 2rem;
   }

   .menu__sec-title::before {
      height: 4.4rem;
      width: 11.7rem;
   }

   .menu__items {
      flex-direction: column;
      gap: 5.8rem 0;
      margin-top: 3rem;
   }

   .menu__item {
      width: 100%;
   }

   .menu__title {
      font-size: 1.8rem;
      letter-spacing: 0.1em;
   }

   .menu__img {
      margin-top: 0;
   }

   .menu__img01 {
      width: 100%;
   }

   .menu__body {
      margin-top: 0;
      width: 100%;
   }

   .menu__note {
      margin-top: 3rem;
   }

   .menu__img02 {
      width: 100%;
   }

   .menu__lists--space {
      margin-top: 3rem;
   }

   .menu__link {
      margin-top: 2.4rem;
   }

   .mv {
      aspect-ratio: 1920/1200;
   }

   .nav {
      background: rgba(255, 255, 255, 0.95);
      height: 100%;
      padding: 8rem 0 0 5rem;
      position: fixed;
      right: -25rem;
      top: 0;
      transition: all 0.5s;
      visibility: hidden;
      width: 25rem;
   }

   .nav.is-active {
      overflow: auto;
      right: 0;
      visibility: visible;
      z-index: 10;
   }

   .nav__guide-link {
      font-size: min(22px, 2.2rem);
      width: 20rem;
   }

   .nav__item a {
      font-size: min(20px, 2rem);
   }

   .products {
      padding: 5rem 0 4rem;
   }

   .products__contents {
      border-radius: 1rem;
      padding: 3rem 2rem 4.8rem;
   }

   .products__sec-title {
      font-size: 1.8rem;
      letter-spacing: 0.1em;
   }

   .products__flex {
      align-items: center;
      flex-direction: column;
      gap: 3rem 0;
      margin-top: 2rem;
   }

   .products__body {
      width: 22rem;
   }

   .products__img {
      width: 23.5rem;
   }

}

@media screen and (max-width: 600px) {

   html {
      font-size: 2.544529262vw;
   }

   .mv {
      aspect-ratio: 393/913;
      background: url(./../images/mv_sp.webp) no-repeat top/100%;
   }

   .mv__copy {
      left: 50%;
      top: 15.8rem;
      transform: translateX(-50%);
      width: 28.1rem;
   }

   .mv__text {
      font-size: 1.6rem;
      line-height: 1.875;
      top: 1.2rem;
   }

}

@keyframes fadeup {

   0% {
      opacity: 0;
      transform: translateY(6rem);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }

}


/*# sourceMappingURL=style.css.map */