@charset "utf-8";
/*----------------------------------------------------
	custom properties
----------------------------------------------------*/
:root {
  --mainSize: 1400; /*デザインのコンテンツ幅*/
  --mainColor: #96140c;
  --yellowColor: #cfa800;
}

/*----------------------------------------------------
	font　clamp(最小サイズ単位, 100vw * 最大サイズ / コンテンツ幅, 最大サイズ単位);
----------------------------------------------------*/
body { font-size: clamp(1.4rem, 100vw * 16 / var(--mainSize), 1.6rem); }

/*----------------------------------------------------
	box
----------------------------------------------------*/
.main { width: min(100%, var(--mainSize) * 1px); margin-inline: auto; line-height: 1.8; }
.wrap { width: min(100% - 4em, 1100px); margin-inline: auto; }
.wrapSmall { width: min(100% - 4em, 800px); margin-inline: auto; }
.wrapCenter { max-inline-size: max-content; margin-inline: auto; }
.inner { padding: 5em 0; }

.full { margin: 0 calc(50% - 50vw); width: 100vw; } /*全幅*/
.fullBack { margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); width: 100vw; } /*背景全幅*/
.fullRight { margin-right: calc(50% - 50vw); } /*右側へ要素を広げる*/
.fullLeft { margin-left: calc(50% - 50vw); } /*左側へ要素を広げる*/
.fullBoxRight { flex: 1; margin-right: calc(50% - 50vw); } /*右側へ要素を広げる*/
.fullBoxLeft { flex: 2; margin-left: calc(50% - 50vw); } /*左側へ要素を広げる*/
@media (max-width: 767px) { /* SP */
.main { overflow-x: hidden; }
}
/*----------------------------------------------------
	header
----------------------------------------------------*/
.header {
  display: flex;
  align-items: center;
  background: url("../../index/header/back_header_top.png") no-repeat top left / auto 100%, 
    url("../../index/header/back_header.jpg") no-repeat top center / auto 100%, 
    var(--mainColor); }
.header__inner { width: min(100% - 2em, 1440px); margin-inline: auto; position: relative; padding: 0; display:flex; justify-content: space-between; }
.header__pattern { position: absolute; top: 80%; left: 60%; }
.header__catch { font-size: clamp(1.4rem, 100vw * 30 / 1440, 3.0rem); line-height: 2.0; color: #fff; }

#check { display: none; }
@media (min-width: 768px) { /* PC */
/*縦書き追加*/
.header__catch__wrap { writing-mode: vertical-rl; margin: auto; padding-bottom: .5em; }
.text__ttl__wrap { writing-mode: vertical-rl; margin: auto; }

.header__inner { display: grid; grid-template-columns: 22.5% 1fr; align-items: start; }/*PCには grid の3行追加*/
.headerLogo { margin-left: 12%; /*width: 22.5%; header__innen に移動*/ height: 100%; align-self: center; padding-top: 5em; padding-bottom: 5em; }
.header__catch {
  width: 22.5%;
  vertical-align: middle;
  display: table-cell;
  writing-mode: vertical-rl;
  padding-top: .5em;
  padding-bottom: .5em;
}
.nav { display: grid; }/*追加*/
.nav__list {
  list-style: none;
  font-size: clamp(1.3rem, 100vw * 16 / 1440, 1.6rem);
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: sticky;
  top: 0;
  /*margin: 0 auto; 削除*/
  z-index: 100;
  background: rgba(0,0,0,0.5);
  padding: 3em 3em 2em 3em;
  align-self: flex-start;
  justify-self: end; /*追加*/
}
.nav__link { color: #fff; padding-left: 1em; padding-right: 1em; text-decoration: none; display: block; }
.nav__link:hover { color: #f1df61; }
.nav__item span { border-right: #fff 1px solid; padding-right: 1em; }
.nav__item:first-child { display: none; }
}
@media (max-width: 767px) { /* SP */
.header {  }
.header__inner { padding: 1em 0;display:flex; justify-content: space-between; }/*SPには flex の2行追加*/
.header__link { display: block; margin-top: -100px; padding-top: 100px; }/*sp 追従ヘッダーの高さ*/
.headerLogo { margin-left: 5%; width: 40%; text-align: center; }
.header__catch { margin-bottom: .5em; }
header .nav__link { color: #fff; text-decoration: none; display: block; }
header .nav__list { width: 100vw; height: 100vh; position: fixed; top: 0; right: -100%; z-index: 2; background: rgba(0,0,0,0.8); list-style: none; text-align: center; padding: 2em 0; }
header .nav__item:first-child { margin: 1em auto .5em; width: 50%; }
header .nav__item { font-size: 2.4rem; padding: .7em 0; }
header .nav__spButton { background: var(--mainColor) url("../images/btn.png") no-repeat; display: block; width: 50px; height: 50px; position: fixed; top: 10px; right: 10px; cursor: pointer; z-index: 200; }

#check:checked ~ .nav__list { right: 0; transition: .4s; }
#check:checked ~ .nav__spButton { background-position: -50px 0; z-index: 300; }
}

/*----------------------------------------------------
	pageTop
----------------------------------------------------*/
.pageTop { text-align: center; margin: 1em 0; }

/*----------------------------------------------------
	footer
----------------------------------------------------*/
.footerCopyright { font-size: 1.4rem; background: var(--mainColor); color: #fff; text-align: center; padding: 1.5em 0; }

/*----------------------------------------------------
	line
----------------------------------------------------*/
hr { height: 0; border: 0; border-top: 1px solid #000; margin: 5em 0; }

/*----------------------------------------------------
	link
----------------------------------------------------*/
a { text-decoration: none; }