@charset "UTF-8";

/* Font
========================================== */

/* Noto Serif JP */
@font-face {
  font-family: "Noto Serif JP";
  src: url("../font/NotoSerifJP-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}

.serif {
  font-family: "Noto Serif JP";
  font-weight: 500;}

/* Zen Kaku Gothic Antique Regular */
@font-face {
  font-family: "Zen Kaku Gothic Antique";
  src: url("../font/ZenKakuGothicAntique-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;}

/* Zen Kaku Gothic Antique Medium */
@font-face {
  font-family: "Zen Kaku Gothic Antique";
  src: url("../font/ZenKakuGothicAntique-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}

/* Zen Kaku Gothic Antique Bold */
@font-face {
  font-family: "Zen Kaku Gothic Antique";
  src: url("../font/ZenKakuGothicAntique-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;}

/* Reset
========================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto;margin: auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 500;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}


/* Base
========================================== */
/* main */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  margin: 0; padding: 0;
  color: #27221E;
  background: #F8F7F5;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 100%;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;}
a {
  color: #27221E;
  display: block;
  text-decoration: none;}


/* Utility
========================================== */
/* Font Weight */
.txw-r { font-weight: 400;}
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}

/* Line Height */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-2 { line-height: 2; }
.lh-25 { line-height: 2.5; }

/* Text Align */
.txa-c { text-align: center;}
.txa-l { text-align: left;}
.txa-r { text-align: right;}

/* Font Size */
.txs-12 { font-size: 0.75rem; }
.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-24 { font-size: 1.5rem; }
.txs-28 { font-size: 1.75rem; }
.txs-32 { font-size: 2rem; }
.txs-36 { font-size: 2.25rem; }
.txs-42 { font-size: 2.625rem; }
.txs-48 { font-size: 3rem;}
p { font-size: 1rem; }
b {font-weight: 500;}

.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 2;
  letter-spacing: 0.1em;}

/* Display */
.d-pc, .d-pd, .d-pd-sp, .d-sp, .d-pc-inline { display: none; }


/* Layout
========================================== */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;}
.contents {
  width: 100%;
  margin: 0 auto;
  padding: 0 100px;}


/* Media Query
========================================== */

/* PC */
@media screen and (max-width: 1280px) {
  .wrap,.contents { padding: 0 4vw;}}

@media screen and (min-width: 769px) {
  .d-pc { display: block;}
  .d-pc-inline { display: inline-block;}}

/* Tablet */
@media screen and (max-width: 1080px) {
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.375rem; }
  .txs-28 { font-size: 1.625rem; }
  .txs-32 { font-size: 1.7rem; }
  .txs-36 { font-size: 1.8rem; }
  .txs-42 { font-size: 2rem; }
  .txs-48 { font-size: 2.5rem; }}

@media screen and (max-width: 768px) {
  .d-pd-sp { display: block;}
  .d-pd { display: block;}}

/* SP */
@media screen and (max-width: 480px) {
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.25rem; }
  .txs-28 { font-size: 1.5rem; }
  .txs-32 { font-size: 1.6rem; }
  .txs-36 { font-size: 1.7rem; }
  .txs-42 { font-size: 1.8rem; }
  .txs-48 { font-size: 2rem; }
  .d-pd { display: none;}
  .d-sp { display: block;}}


/* Header
========================================== */
#header {
  z-index: 2;
  padding: 0 200px 0 40px;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;}
#header h1 { width: 261px;}
#nav { font-size: 15px;}
#nav .menu {
  display: flex;
  gap:0 40px;
  justify-content: flex-end;}
#header .menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  z-index: 1001;}
#header .menu-btn button {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;}
#header .menu-btn span {
  position: absolute;
  left: 50%;
  width: 44px;
  height: 2px;
  background: #050E26;
  transition: .35s;
  transform: translateX(-50%);}
#header .menu-btn span:nth-child(1) { top: 54px;}
#header .menu-btn span:nth-child(2) { top: 64px;}
#header .menu-btn em {
  position: absolute;
  transition: .35s;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  font-style: normal;
  color: #050E26;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;}
#header .menu-btn.open span:nth-child(1) {
  background: #fff;
  top: 54px;
  transform: translateX(-50%) rotate(45deg);}
#header .menu-btn.open span:nth-child(2) {
  background: #fff;
  top: 54px;
  transform: translateX(-50%) rotate(-45deg);}
#header .menu-btn.open em { color: #fff;}
#gNav {
  position: fixed;
  top: 0;
  right: -400px;
  opacity: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background: #050E26cc;
  transition: .5s;
  z-index: 1000;}
#gNav.open { right: 0;opacity: 1;}
#gNav a {
  color: #fff;
  display: block;
  padding: 20px 40px 5px;
  text-decoration: none;
  font-size: 18px;
  transition: .3s;}
#gNav .sub a {
  padding: 0 60px;
  font-size: 14px;}
#gNav .menulink {
  padding-top: 120px;
  padding-bottom: 100px;
  height: 100%;
  overflow-y: scroll;}
#gNav a:hover { color: #C7923C;}

@media screen and (max-width: 1080px) {
  #nav { display: none;}
  #header { height: 80px;padding:0 100px 0 20px;}
  #header .menu-btn { width: 80px; height: 80px;}
  #header .menu-btn { width: 80px; height: 80px;}
  #header .menu-btn span:nth-child(1) { top: 24px;}
  #header .menu-btn span:nth-child(2) { top: 34px;}
  #header .menu-btn em { bottom: 16px;}
  #header .menu-btn.open span:nth-child(1),
  #header .menu-btn.open span:nth-child(2)  { top: 24px;}}

/* Contact
========================================== */
.flex.col2all {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 40px;}
.flex.col2all .item { width: calc(50% - 20px);}
#contact { background: #F8F7F5;}
#contact img { width: 100%;}
#contact .wrapall {
  margin-top: -16px;
  padding: 0 5vw;}
#contact .wrapall img { border-radius: 20px;}
#contact .item { position: relative;}
#contact .text {
  color: #fff;
  line-height: 1.5;
  position: absolute;
  bottom: 0; left: 0;
  text-align: left;
  text-shadow: 0 0 10px #4D260066;
  padding: 40px 60px;}
#contact .text h2 { margin-bottom: 14px;}
#contact .text h2 span {
  display: inline-block;
  line-height: 1;
  border-bottom: 1px solid #fff;}
#contact a {transition: 0.5s all;}
#contact a:hover { opacity: 0.8;}

@media screen and (max-width: 1280px) {
  .flex.col2all { gap: 4vw 4vw;}
  .flex.col2all .item { width: 100%;}}
@media screen and (max-width: 480px) {
  #contact .text { padding: 20px 30px;}
  #contact .txs-18 { font-size: 15px;}}

/* Footer
========================================== */
#footer {
  padding-top: 120px;
  background: #F8F7F5;}
#footer .flex {
  gap: 0 10vw;
  display: flex;}
#footer .ftlogo {
  margin-bottom: 30px;
  width: 261px;}
#footnav ul { margin-bottom: 4px;}
#footnav ul li { display: inline-block;}
#footnav ul li.main { width: 180px;}
#footnav .sub a {
  font-weight: 400;
  text-decoration: underline;
  display: inline-block;
  font-size: 13px;}
#footnav .sub.sura::after {
  content: "/";
  margin: 0 5px 0 10px;
  display: inline-block;}
#footer .copy {
  padding: 120px 0 50px;
  color: #8D857E;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: right;}

@media screen and (max-width: 1080px) {
  #footer h1 { margin: 20px 0 4px;}
  #footer .flex { gap:40px 8vw; flex-wrap: wrap;}
  #footer .flex .box { width: 100%;}
  #footer .ftlogo {  margin: 0 auto;}
  #footer h1, #footer p{ text-align: center;}
  #footer .item { margin: 0 auto; max-width: 500px;}
  #footer .copy { text-align: center;padding: 60px 0 40px;}}
@media screen and (max-width: 769px) {
  #footnav ul li.main { width: 100%; margin-top: 10px;}
  #footnav { text-align: center;}
  #footer .flex { gap: 20px 8vw;}}