@charset "UTF-8";


/*============================================================
  reset
============================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, nav, section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: transparent;
}

ins {
  background-color: transparent;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: transparent;
  color: #000;
  font-style: normal;
  font-weight: normal;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  margin: 0;
  padding: 0;
  outline: none;
  vertical-align: middle;
  font-family: inherit;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

select {
  font-family: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  font-family: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  display: block;
  font-family: inherit;
  border: none;
  border-radius: 0;
  background: none;
  outline: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

strong, em, b, i, small, address {
  font-weight: normal;
  font-style: normal;
}

summary {
  display: block;
  cursor: pointer;
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

main {
  display: block;
}


/*============================================================
  global
============================================================*/
* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html {
  width: 100%;
  color: var(--black);
  font-size: 10px;
  text-align: left;
  scroll-behavior: smooth;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  html { font-size: calc(100vw / 144); /* 0.694vw（横幅1440pxで割った数値） */ }
}

@media (max-width: 768px) and (orientation: portrait) {
  html { font-size: calc(100vw / 37.5); /* 2.5vw（横幅375pxで割った数値） */ }
}

:root {
  --white: #fff;
  --black: #333;
  --blue: #183E9A;
  --lightblue: #E8F0FC;
  --gold: #A58B48;
  --lightgold: #F3F1EF;
  --gray: #969696;
  --lightgray: #D8D8D8;
  --grid: 1.6rem;
  --grid-1h: calc(var(--grid) / 2); /* .8rem / .4rem */
  --grid-2: calc(var(--grid) * 2); /* 3.2rem / 1.6rem */
  --grid-3: calc(var(--grid) * 3);
  --grid-4: calc(var(--grid) * 4); /* 6.4rem / 3.2rem */
  --grid-6: calc(var(--grid) * 6); /* 9.6rem / 4.8rem */
  --grid-8: calc(var(--grid) * 8); /* 12.8rem / 6.4rem; */
  --grid-10: calc(var(--grid) * 10); /* 16rem / 8rem */
  --grid-12: calc(var(--grid) * 12); /* 19.2rem / 9.6rem */
  --grid-14: calc(var(--grid) * 14); /* 22.4rem / 11.2rem */
  --grid-16: calc(var(--grid) * 16); /* 25.6rem / 12.8rem */
  --grid-18: calc(var(--grid) * 18); /* 28.8rem / 14.4rem */
  --grid-20: calc(var(--grid) * 20); /* 32rem / 16rem */
  --grid-22: calc(var(--grid) * 22); /* 35.2rem / 17.6rem */
  --grid-24: calc(var(--grid) * 24); /* 38.4rem / 19.2rem */
  --grid-26: calc(var(--grid) * 26); /* 41.6rem / 20.8rem */
  --grid-28: calc(var(--grid) * 28); /* 44.8rem / 22.4rem */
  --grid-30: calc(var(--grid) * 30); /* 48rem / 24rem */
  --grid-32: calc(var(--grid) * 32); /* 51.2rem / 25.6rem */
  --grid-34: calc(var(--grid) * 34); /* 54.4rem / 27.2rem */
  --grid-36: calc(var(--grid) * 36); /* 57.6rem / 28.8rem */
  --grid-38: calc(var(--grid) * 38); /* 60.8rem / 30.4rem */
  --grid-40: calc(var(--grid) * 40); /* 64rem / 32rem */
  --grid-42: calc(var(--grid) * 42); /* 67.2rem / 33.6rem */
  --grid-44: calc(var(--grid) * 44); /* 70.4rem / 35.2rem */
  --grid-46: calc(var(--grid) * 46); /* 73.6rem / 36.8rem */
  --grid-52: calc(var(--grid) * 52); /* 83.2rem; */
  --grid-54: calc(var(--grid) * 54); /* 83.2rem; */
  --grid-58: calc(var(--grid) * 58); /* 92.8rem; */
  --grid-64: calc(var(--grid) * 64); /* 102.4rem; */
  --grid-70: calc(var(--grid) * 70); /* 112rem; */
  --grid-76: calc(var(--grid) * 76); /* 121.6rem; */
  --grid-82: calc(var(--grid) * 82); /* 131.2rem; */
  --grid-88: calc(var(--grid) * 88); /* 140.8rem; */
  --fontsize: calc(100vw / 144); /* 0.694vw（横幅1440pxで割った数値） */
}
/*
@media (min-width: 1121px) and (orientation: landscape) {
  :root {
    --fontsize: 10px;
  }
}

@media (min-width: 1681px) and (orientation: landscape) {
  :root {
    --fontsize: 12px;
  }
}

@media (min-width: 2241px) and (orientation: landscape) {
  :root {
    --fontsize: 14px;
  }
}
*/

@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --grid: 0.8rem;
    --fontsize: calc(100vw / 40); /* 2.5vw（横幅400pxで割った数値） */
  }
}

body {
  width: 100%;
	font-family: YakuHanJP, "lato", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,"メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  letter-spacing: 0.12em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
  font-variant-ligatures: no-common-ligatures;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  background-color: var(--white);
  /*overflow: auto;*/
  position: relative;
}

main {
  width: 100%;
  overflow: hidden;
}

a {
  color: var(--black);
  outline: 0;
  text-decoration: none;
  cursor: pointer;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:active { text-decoration: none; }
a[href^="tel"]{ color: inherit; }

strong,
em,
span,
b,
sup {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

sup {
  font-size: 1rem;
  font-weight: normal;
}


/*  font family
--------------------*/
.ff-serif {
  font-family: YakuHanMP,
               "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
               "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
}

.ff-sans-serif {
  font-family: YakuHanJP, "lato",
               "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",
               "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
               "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}

.ff-tsukushi {
  font-family: YakuHanMP, "FOT-筑紫Aオールド明朝 Pr6 M", serif;
}

.ff-lato {
  font-family: "Lato", sans-serif;
}

.ff-cormorant-infant {
  font-family: "Cormorant Infant", serif;
}


/*  font weight
--------------------*/
.fw-normal { font-weight: normal; }
.fw-bold { font-weight: bold; }
.fw-light { font-weight: 300; }


/*  font style
--------------------*/
.fs-normal { font-style: normal; }
.fs-italic { font-style: italic; }


/*  br
--------------------*/
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  br.sw {
    display: none;
    font-size: 0;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  br.lw {
    display: none;
    font-size: 0;
  }
}

/*  none
--------------------*/
.none {
  display: none;
  font-size: 0;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  .none-lw {
    display: none;
    font-size: 0;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .none-sw {
    display: none;
    font-size: 0;
  }
}

/*  hidden
--------------------*/
.hidden {
  display: block;
  width: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  .hidden-lw {
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .hidden-sw {
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
}