@charset "utf-8";

*,
*:before,
*:after {
  box-sizing: border-box;
  font-feature-settings: "palt";
}

/* breakpoint */
/*
width < 600 == mobile

@media (600px <= width) {
【tablet】
}

@media (1024px < width) {
【pc】
}

@media (1920px < width) {
【wide monitor】2160px
}
*/

@font-face {
  font-family: 'Bank Gothic';
  src: url('../fonts/OPTIBankGothic-Medium.otf') format('otf');
  src: url('../fonts/bank-gothic-medium-bt.ttf') format('ttf');
  src: url('../fonts/bank-gothic-medium-bt.woff') format('woff');
}

:root{
    --font-size-h2-en: clamp(2.313rem, 1.069rem + 4.98vw, 4.25rem);
    --font-size-h2-ja: clamp(1.063rem, 0.42rem + 2.57vw, 2.063rem);
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 800;
    --font-en: "Bank Gothic";
    --color-base: #5F5E5E;
    --color-cream: #F4F3F0;
    --color-beige: #E2D8C6;
    --color-orange: #F38200;
    --color-paleorange: #FFC27C;
    --color-lightgray: #F5F5F5;
    --color-gold: #AA9F5E;
    --color-aqua: #7BB8BA;
    --space-side: 10px;
    --space-fv-side: 10px;
    --space-inner-side: 10px;
    --width-logo: min(29.296vw, 300px);
    --height-logo: min(24.804vw, 254px);
    --width-logo-img: min(17.871vw, 183px);
    --height-logo-img: min(15.625vw, 160px);
    --height-fvh2: 40px;
    --height-nav: 90px;
    --height-btn-common: 70px;
    --size-btn-top: 63px;
    --border: 1px solid var(--color-base);
    --animation-hover: .4s cubic-bezier(.25, .46, .45, .94);
    -webkit-text-size-adjust: 100%;
    letter-spacing: .5em;
    font-family: "Noto Sans JP", sans-serif;
}

@media (600px <= width) {
  :root{
    --space-side: 30px;
    --space-fv-side: 30px;
    --space-inner-side: 20px;
    --height-fvh2: 70px;
    --height-nav: 160px;
    --height-btn-common: 100px;
    --size-btn-top: 83px;
  }

}

@media (1024px < width) {
  :root{
    --font-size-h2-en: clamp(3.313rem, 2.949rem + 0.57vw, 3.375rem);
    --font-size-h2-ja: clamp(1.125rem, 0.761rem + 0.57vw, 1.188rem);
    --space-inner-side: 50px;
    --space-fv-side: min(6.875vw, 132px);
    --width-logo: min(21.354vw, 410px);
    --height-logo: min(19.947vw, 383px);
    --width-logo-img: min(12.395vw, 238px);
    --height-logo-img: min(10.833vw, 208px);
    --height-nav: min(5.468vw, 105px);
    --height-btn-common: 70px;
    --border: 2px solid var(--color-base);
  }
}

@media (1240px < width) {/*.sec_inner (width + 20*2) */
  :root{
    --space-side: 0;
  }
}

@media (1920px < width) {
  :root{
    --font-size-h2-en: clamp(3.375rem, 1.308rem + 1.72vw, 4.063rem);
    --font-size-h2-ja: clamp(1.188rem, -0.504rem + 1.41vw, 1.75rem);
  }
}

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    overflow-x: hidden;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-base);
    background-color: var(--color-cream);
    scroll-behavior: smooth;
}

ul,li,p{
    margin: 0;
    padding: 0;
}

li{
  list-style-type: none;
}

p{
  text-align: justify;
}

h1,h2,h3,h4,h5,h6{
  font-weight: 400;
}

address{
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

a{
    text-decoration: none;
    transition: .2s all;
}

@media (600px <= width) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

a,span,button{
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

button{
  background-color: inherit;
  border: none;
  margin: 0;
  padding: 0;
}

.font_en{
  font-family: var(--font-en);
}

.hidden {
  display: none;
}

.show {
  display: block;
}

.pc_only{
  display: none;
}

.tab_only{
  display: none;
}

.tab_pc_only{
  display: none;
}

@media (400px <= width) {
  .footer_gnavi .sm_only{
    display: none;
  }
}

@media (600px <= width) {
  .sm_only{
    display: none;
  }

  .tab_pc_only{
    display: block;
  }
}

@media (600px <= width <= 1024px){
  .tab_only{
    display: block;
  }
}

@media (1024px < width) {
  .pc_only{
    display: block;
  }

  .sm_tab_only{
    display: none;
  }
}