@charset "UTF-8";

/* FONT
------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&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;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}: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}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 400;}: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 #CE242C,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}

/* COMMON
------------------------- */
:where(html){ color-scheme: #fff;}

html{
  scroll-behavior: smooth;
  font-size: 100%;
  background: #fff;
  overflow-x: hidden;}
body{
  margin: 0;
  padding: 0;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 100%;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;}
a {
  position: relative;
  color: #000;
  display: block;
  text-decoration: none;}

/* font */
.en {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;}

/* weight */
.txw-r { font-weight: 400;}
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}
.txw-w { font-weight: 900;}

p { font-weight: 400;}

/* color */
.tcl-1 { color: #000; }
.tcl-2 { color: #DF2015; }
.tcl-3 { color: #846600; }

/* line-height */
.lh-10 { line-height: 1; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2; }
.lh-25 { line-height: 2.5; }

/* text-decoration */
.underline { text-decoration: underline; }

/* align */
.txa-c { text-align: center;}

/* text */
.txs-14 { font-size: 14px;}
.txs-16 { font-size: 16px;}
.txs-18 { font-size: 18px;}
.txs-20 { font-size: 20px;}
.txs-32 { font-size: 32px;}
.txs-36 { font-size: 36px;}
.txs-38 { font-size: 38px;}
.txs-48 { font-size: 48px;}

/* layout */
.wrap {
  margin: 0 auto;
  padding: 0 4vw;
  width: 100%;}
.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;}
.flex {
  display: flex;
  flex-wrap: wrap;}

/* fade */
.ef-fade {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
	transform: translate(0, 50px);}
.is-scrollIn {
  opacity: 1;
	transform: translate(0, 0);}

.d-pc { display: block;}
.d-sp { display: none;}

@media screen and (max-width: 1280px) {
  body { width: 100%; overflow-x: hidden;}
  .contents { padding: 0 4vw;}}
@media screen and (max-width: 768px) {
  img { max-width: 100%;}
  .txs-14 { font-size: 14px;}
  .txs-16 { font-size: 16px;}
  .txs-18 { font-size: 17px;}
  .txs-20 { font-size: 18px;}
  .txs-32 { font-size: 20px;}
  .txs-36 { font-size: 22px;}
  .txs-38 { font-size: 24px;}
  .txs-48 { font-size: 40px;}
	.d-pc { display: none;}
	.d-sp { display: block;}}


/* HEADER
------------------------- */
#fixed {
  position: fixed;
  right: 40px;
  top: 20px;
  z-index: 99;
  width: 340px;}
#fixed .flex { gap: 20px;}
#fixed a {
  background: #FFFFFF;
  text-align: center;
  width: 160px;
  line-height: 50px;
  height: 50px;}
#fixed a:nth-child(2) {
  background: #DF2015;
  color: #fff;}
#mtitle {
  top: 30px;
  left: 40px;
  z-index: 2;
  color: #fff;
  position: absolute;}
#hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  background: url("img/hero.jpg") no-repeat right top #000;
  background-size: auto 100%;}
#hero .logo {
  width: 50%;
  text-align: center;}
#hero .logo img {
  display: block;
  margin: 0 auto;}
.blur {
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;}
@keyframes blurAnime{
from {
  filter: blur(20px);
  transform: scale(1.05);
  opacity: 0;}
to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;}}
.blurTrigger { opacity: 0;}

@media screen and (max-width:1080px) {
  #hero { background: url("img/hero.jpg") no-repeat center center #000; background-size: cover;}
  #hero .logo { width: 100%;}}
@media screen and (max-width:1080px) {
  #fixed {
    top: 0; left: 0;
    width: 100%;}
  #fixed .flex { gap:0;}
  #fixed .flex a { width: 50%;}
  #mtitle {
    width: 100%;
    top: 50px;
    padding: 10vw 6vw;
    background: #00000099;
    left: 0;
    text-align: center;}
  #mtitle h1 { line-height: 1.5;}
  #hero {
    margin-top: 50px;
    height: 90vh;
    align-items: flex-end;
    padding: 0 10vw;}
  #hero .logo { padding-bottom: 6vw;}
  #hero .logo img { max-width: 400px;  width: 100%;}}

/* ALL
------------------------- */
h2.title {
  margin-bottom: 60px;
  text-align: center;
  line-height:1.2;
  color: #DF2015;
  font-weight: 900;
  font-size: 14px;}
h2.title span {
  display: block;
  font-weight: 700;}

@media screen and (max-width:768px) {
  h2.title { margin-bottom: 40px;}
}

/* INTRO
------------------------- */
#intro { padding: 140px 0;}
#intro h3 {
  margin-bottom: 40px;
  text-align: center;}
#intro p {
  margin: 0 auto 60px;
  max-width: 760px;}
#intro .photo img {
  margin: 0 auto;
  display: block;}
@media screen and (max-width:768px) {
#intro { padding: 20vw 0;}
  #intro h3 { text-align: left;}
  #intro h3 br { display: none;}
  #intro p { margin-bottom: 40px;}}


/* FEATURES
------------------------- */
#feature { padding: 140px 0 100px;}
#feature img {
  width: 100%;
  border-radius: 20px;}
#feature .flex {
  gap: 80px 80px;
  justify-content: space-between;}
#feature .item.type1 { width: 100%;}
#feature .item.type2 { width: calc(50% - 40px);}
#feature .item.type1 img { margin-bottom: 40px;}
#feature .item.type2 img { margin-bottom: 24px;}
#feature .item.type2 .titlebox { margin-bottom: 24px;}
#feature .item.type1 .flexbox {
  justify-content: space-between;
  display: flex;}
#feature .item.type1 .flexbox p.text { width: 50%;}
#feature .titlebox {
  display: flex;
  align-items: center;
  gap:50px;}
#feature .item.type2 .titlebox { gap:30px;}
#feature .titlebox p { color: #846600; line-height: 1;}
#feature h3 { font-weight: 400;line-height: 1.5;}
@media screen and (max-width:1080px) {
  #feature { padding: 20vw 0 15vw;}
  #feature img { border-radius: 10px;}
  #feature .item.type1 { width: 100%;}
  #feature .item.type2 { width:  100%;}
  #feature .item.type1 .flexbox { display: block;}
  #feature .item.type1 .flexbox p.text { width: 100%;}
  #feature .item.type1 img {
    object-fit: cover;
    width:100%;
    height: 61vw;}
  #feature .item.type1 img,#feature .item.type2 img,
  #feature .item.type2 .titlebox,#feature .item.type1 .titlebox { margin-bottom: 16px;}
  #feature .titlebox,#feature .item.type2 .titlebox { gap:20px;}
  #feature .flex { gap:40px 40px;}}


/* INFO
------------------------- */
#info { padding-bottom: 160px;}
#info table {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 80px;
  border-collapse: collapse;}
#info table th, #info table td {
  padding: 14px 6px;
  font-weight: 500;
  border-bottom: 1px solid #eee;}
#info table th {
  color: #846600;
  font-weight: 700;
  text-align: left;
  width: 100px;}
#info .flex {
  gap: 20px 80px;
  justify-content: space-around;}
#info .flex a { width: calc(50% - 40px);}
@media screen and (max-width:768px) {
  #info { padding-bottom: 20vw;}
  #info .flex { gap: 20px 20px;}
  #info .flex a { width:100%;}
  #info .flex a img { width:100%;}
  #info table { margin-bottom: 40px;}
  #info table th, #info table td { display: block;}
  #info table th { border-bottom: none; padding-bottom: 0;}
  #info table td { padding-top: 0;}}

/* CTA
------------------------- */
#cta {
  color: #fff;
  background: url("img/hero.jpg") no-repeat right top #000;
  background-size: auto 100%;
  padding: 140px 0 160px;}
#cta h2 {
  color: #fff;
  text-align: left;}
#cta .flex {
  margin-top: 60px;
  gap: 20px;}
#cta a {
  background: #FFFFFF;
  text-align: center;
  width: 160px;
  line-height: 50px;
  height: 50px;}
#cta a:nth-child(2) {
  background: #DF2015;
  color: #fff;}
@media screen and (max-width:1080px) {
  #cta {
    padding: 20vw 0 20vw;
    background: url("img/hero.jpg") no-repeat center center #000;
    background-size: cover;}
  #cta h2 { text-align: center;}
  #cta p { font-size: 16px;}
  #cta p br { display: none;}
  #cta .flex { justify-content: center; gap: 10px;}}


/* FOOTER
------------------------- */
#footer { padding: 60px 0;}
#footer p { letter-spacing: 2px;}
@media screen and (max-width:768px) {
  #footer { padding: 40px 10vw;}
  #footer p { font-size: 12px; line-height: 1.2;}}

/* RESPONSIVE
------------------------- */
@media screen and (min-width:768px) {
  a{ transition:0.25s all;}
  #fixed a:hover,#cta a:hover { background: #ccc;}
  #fixed a:nth-child(2):hover,#cta a:nth-child(2):hover { background: #8E0F07;}}


/* SLIDER
------------------------- */
#mainslider {
  width: 100%;
  overflow: hidden;}
#mainslider .mainslider__item {
  width: min(67.5vw, 960px);
  margin: 0 5px;}
#mainslider .mainslider__item img {
  display: block;
  width: 100%;
  aspect-ratio: 27 / 16;
  object-fit: cover;
  border-radius: 12px;}
@media (max-width: 767px) {
  #mainslider .mainslider__item {
    width: 82vw;
    margin: 0 4px;}
  #mainslider .mainslider__item img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;}}


/* LOAD
------------------------- */
#splash {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background: #000;
  text-align: center;
  color: #fff;}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
#splash_logo img {
  max-width: 140px;}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;}
@keyframes fadeUpAnime {
  0% { opacity: 0; transform: translateY(100px);}
  80% { opacity: 1; transform: translateY(0);}
  100% { opacity: 0; transform: translateY(0);}}