/**
* @file
* このテーマのメインのcssファイル
*/
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family: source-han-sans-japanese, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: var(--size-15);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--black);
  letter-spacing: -0.01em;
  color: var(--white);
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul, ol {
  margin:0;
  padding:0;
}
li {
  list-style-type: none;
}
p {
  margin:0;
  padding:0;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: var(--black);
}
a, a:hover, button, button:hover, img, article, input, textarea {
  text-decoration:none;
  -webkit-transition: 0.3s cubic-bezier(0.25,1,0.5,1);
  -moz-transition: 0.3s cubic-bezier(0.25,1,0.5,1);
  -o-transition: 0.3s cubic-bezier(0.25,1,0.5,1);
  -ms-transition: 0.3s cubic-bezier(0.25,1,0.5,1);
	transition: 0.3s cubic-bezier(0.25,1,0.5,1);
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: 500;
  margin:0;
  padding:0;
	line-height: 1.3;
}
dl, dt, dd {
  margin:0;
  padding:0;
}
input:focus, textarea:focus {
  outline:none;
}
input, textarea, button {
  border: none;
  background: none;
}
button {
  cursor: pointer;
  display: block;
  width: 100%;
}
figure,figcaption {
  margin: 0;
  padding: 0;
}

/* アニメーション */
.js-slide-up {
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 1.8s cubic-bezier(0.14,1,0.34,1),transform 1.8s cubic-bezier(0.14,1,0.34,1);
}
.js-slide-up-opacity {
  opacity: 0;
  transition: opacity 1.8s;
}
.js-slide-up.is-active {
  opacity: 1;
  transform: translateY(0);
}
.js-slide-up-opacity.is-active {
  opacity: 1;
}
.js-img-slide {
	opacity: 0;
}
.js-img-slide.is-active {
	opacity: 1;
}
.js-img-slide.is-active::before {
	content: '';
	position: absolute;
  z-index: 1;
  animation: img-wrap 1s cubic-bezier(0.25,1,0.5,1) forwards;
  background: #fff;
  inset: 0;
  pointer-events: none;
}
@keyframes img-wrap {
  100% {
    transform: translateY(-100%);
  }
}
.js-delay1 {
  transition-delay: 0.3s;
}
.js-delay2 {
	transition-delay: 0.6s;
}
.js-delay3 {
  transition-delay: 1.8s;
}
/* component */
.c-width880 {
  max-width: calc(880px + var(--size-96));
  padding: 0 var(--size-48);
  margin: auto;
}
@media screen and (max-width:768px){
	.c-width880 {
    padding: 0 var(--size-16);
  }
}

/* ヘッダー */
.l-header {
  position: fixed;
  top: var(--size-24);
  z-index: 999;
  width: 100%;
  padding: 0 var(--size-48);
  transition: 0.8s cubic-bezier(0.25,1,0.5,1);
  opacity: 1;
}
.l-header.hidden {
  transform: translateY(-40px);
  opacity: 0;
}
#header.is-active {
	outline: solid var(--size-1) rgba(255, 255, 255, .48);
}
.l-header__inner.is-open {
	outline: inherit!important;
	border-radius: var(--size-4) var(--size-4) 0 0;
}
.l-header__inner {
  display: flex;
  background-color: var(--black);
  border-radius: var(--size-4);
  justify-content: space-between;
  align-items: center;
  height: var(--size-64);
  padding: 0 var(--size-24);
}
.l-header__logo-link:hover {
	opacity: .64;
}
.l-header__logo-img {
  width: var(--size-104);
}
.l-header__nav {
  display: flex;
  align-items: center;
}
.l-header__nav-sp {
  display: none;
}
.l-header__nav-bg {
  display: none;
}
.l-header__hamburger {
  display: none;
}
.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--size-24);
}
.l-header__nav-link {
  position: relative;
  font-size: var(--size-14);
  color: var(--white);
}
.l-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.l-header__nav-link:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (max-width:768px) {
  .l-header {
    top: var(--size-16);
    padding: 0 var(--size-16);
  }
  .l-header__inner {
    height: var(--size-48);
    padding: 0 var(--size-16);
  }
  .l-header__logo-img {
    width: var(--size-88);
  }
  .l-header__hamburger {
    display: block;
    width: var(--size-24);
    height: var(--size-24);
  }
  .l-header__hamburger-inner {
    position: relative;
    width: 100%;
    height: 100%;
		margin: auto;
  }
  .l-header__hamburger-line {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background: var(--white);
    transition: 0.8s cubic-bezier(0.16,1,0.3,1);
  }
  .l-header__hamburger.is-open .l-header__hamburger-line {
    background: var(--white);
  }
  .l-header__hamburger-line:nth-child(1) {
    top: calc(50% - var(--size-4));
  }
  .l-header__hamburger-line:nth-child(2) {
    top: 50%;
  }
  .l-header__hamburger-line:nth-child(3) {
    top: calc(50% + var(--size-4));
  }
  .is-open .l-header__hamburger-line:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }
  .is-open .l-header__hamburger-line:nth-child(2) {
    transform: rotate(90deg);
    opacity: 0;
  }
  .is-open .l-header__hamburger-line:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }
  .l-header__nav {
    display: none;
  }
  .l-header__nav-sp {
    position: fixed;
    top: var(--size-16);
    left: var(--size-16);
    z-index: -9;
    display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: var(--size-88) var(--size-24) var(--size-40);
    width: calc(100% - var(--size-32));
    height: calc(50% - var(--size-48));
    background: var(--black);
    border-radius: var(--size-4);
    opacity: 0;
    visibility: hidden;
    transition: 0.8s cubic-bezier(0.16,1,0.3,1);
  }
  .l-header__nav-sp.is-open {
    opacity: 1;
    visibility: visible;
  }
  .l-header__nav-bg {
    position: fixed;
		top: 0;
		left: 0;
		z-index: -999;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .32);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: opacity, backdrop-filter;
		transition: 0.8s cubic-bezier(0.16,1,0.3,1);
  }
	.l-header__nav-bg.is-open {
		opacity: 1;
		display: block;
	}
	.l-header__nav-sp-item {
		padding-bottom: var(--size-24);
	}
  .l-header__nav-sp-item:last-child {
    padding-bottom: 0;
  }
	.l-header__nav-sp-link {
		font-size: var(--size-13);
		border-bottom: solid var(--size-1) var(--gold);
    color: var(--white);
	}
}

/* フッター  */
.l-footer {
  position: relative;
  border-top: solid var(--size-1) rgba(255, 255, 255, .48);
}
.l-footer__inner {
  position: relative;
  z-index: 9;
  padding: var(--size-88) var(--size-96);
}
.l-footer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.l-footer__logo-link:hover {
  opacity: .64;
}
.l-footer__logo-img {
  width: var(--size-104);
}
.l-footer__nav-menu {
  display: flex;
  align-items: center;
  gap: var(--size-24);
}
.l-footer__nav-menu-link {
  position: relative;
  font-size: var(--size-13);
  color: var(--white);
}
.l-footer__nav-menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.l-footer__nav-menu-link:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
.l-footer__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--size-196);
}
.l-footer__foot-nav {
  display: flex;
  gap: var(--size-24);
}
.l-footer__foot-nav-link {
  display: flex;
  align-items: flex-start;
  gap: var(--size-4);
  font-size: var(--size-13);
  color: var(--white);
}
.l-footer__foot-nav-link-icon {
  width: var(--size-8);
}
.l-footer__foot-nav-link:hover {
	opacity: .64;
}
.l-footer__foot-copyrights {
  font-size: var(--size-11);
}
@media screen and (max-width:768px){
	.l-footer__inner {
		padding: var(--size-64) var(--size-24);
	}
  .l-footer__head {
    flex-direction: column;
    gap: var(--size-32);
  }
  .l-footer__logo-img {
    width: var(--size-88);
  }
  .l-footer__nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-16);
  }
  .l-footer__nav-menu-link {
    font-size: var(--size-11);
  }
  .l-footer__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-32);
    margin-top: var(--size-72);
  }
  .l-footer__foot-nav {
    display: flex;
    gap: var(--size-16);
  }
  .l-footer__foot-nav-link {
    gap: var(--size-4);
    font-size: var(--size-11);
  }
}

/* メインビジュアル */
.l-mv {
  position: relative;
  width: 100%;
  height: 80svh;
  overflow: hidden;
	will-change: height;
}
.l-mv::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background: #0C0C0C;
  background: linear-gradient(0deg, rgba(12, 12, 12, 0.88) 20%, rgba(12, 12, 12, 0) 100%);
}
.p-mv__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  text-align: center;
}
.p-mv__title-ja {
  font-family: hot-kaishokk, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.5rem, 1.972rem + 2.25vw, 4rem);
}
.p-mv__title-en {
  font-size: var(--size-17);
}
.p-mv__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
  object-position: center;
}

/* コンテンツ */
.p-content__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-16);
  border: solid var(--size-1) var(--gold);
  border-radius: var(--size-4);
}
.p-content__title02 {
  padding: var(--size-8) var(--size-16);
}
.p-content__title-en {
  display: inline;
  font-size: var(--size-21);
  color: var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
}
.p-content__title-en-youth {
  font-weight: 400;
  font-size: var(--size-18);
}
.p-content__title-detail {
  font-size: var(--size-13);
  text-align: right;
}
.p-content__list01 {
  margin-top: var(--size-64);
}
.p-content__item01 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--size-32);
  margin-bottom: var(--size-48);
  border-bottom: solid var(--size-1) var(--gold);
  cursor: pointer;
}
.p-content__item01:last-child {
  margin-bottom: 0;
}
.p-content__item01-name-ja {
  font-size: var(--size-17);
}
.p-content__item01-name-en {
  font-size: var(--size-14);
}
.p-content__item01-img-wrapper {
  position: relative;
  border-radius: var(--size-4) var(--size-4) 0 0;
  border-top: solid var(--size-1) var(--gold);
  border-right: solid var(--size-1) var(--gold);
  border-left: solid var(--size-1) var(--gold);
}
.p-content__item01-img-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 64%;
  background: #0C0C0C;
  background: linear-gradient(0deg, rgba(12, 12, 12, 0.8) 24%, rgba(12, 12, 12, 0) 100%);
  overflow: hidden;
}
.p-content__item01-img {
  /* height: var(--size-200); */
  aspect-ratio: 1.618 / 1;
  max-width: 320px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--size-4) var(--size-4) 0 0;
}
.p-content__sex {
  display: flex;
  align-items: center;
  gap: var(--size-8);
}
.p-content__sex-main {
  font-size: var(--size-14);
  padding: var(--size-6) var(--size-8);
  border: solid var(--size-1) var(--gold);
  border-radius: var(--size-4);
  background-color: var(--white);
  color: var(--black);
  font-weight: 500;
  line-height: 1.0;
}
.p-content__sex-detail {
  font-size: var(--size-14);
  color: rgba(255, 255, 255, .48);
}
.p-content__list02-wrapper {
  margin-top: var(--size-64);
}
.p-content__list02 {
  margin-top: var(--size-40);
}
.p-content__item02 {
  padding-bottom: var(--size-24);
  border-bottom: solid var(--size-1) rgba(255, 255, 255, .48);
  margin-bottom: var(--size-32);
}
.p-content__item02:last-child {
  margin-bottom: 0;
}
.p-content__item02-name-ja {
  font-size: var(--size-19);
  line-height: 1.5;
  padding-bottom: var(--size-4);
}
.p-content__item02-name-en {
  font-size: var(--size-16);
  line-height: 1.0;
}
/* ポップアップ */
.p-popup__content {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--size-16);
  overflow: auto;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  will-change: opacity, backdrop-filter;
  transition: 0.8s cubic-bezier(0.16,1,0.3,1);
  cursor: auto;
}
.p-popup__content.is-show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p-popup__content-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--size-48);
  max-width: calc(880px + var(--size-96));
  width: 100%;
  padding: var(--size-48);
  margin: auto;
  background-color: var(--white);
  border-radius: var(--size-8);
}
.p-popup__content-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 9;
  width: var(--size-48);
  height: var(--size-48);
  border-radius: 50%;
  border: solid var(--size-1) var(--gold);
  background-color: var(--white);
  font-size: var(--size-19);
  color: var(--gold);
  line-height: 0;
  cursor: pointer;
}
.p-popup__content-img-wrapper {
  width: calc(50% - var(--size-24));
  position: relative;
  border-radius: var(--size-4);
  border: solid var(--size-1) var(--gold);
  overflow: hidden;
}
.p-popup__content-img {
  aspect-ratio: 1.618 / 1;
  width: 100%;
  object-fit: cover;
  object-position: top;
}
.p-popup__content-text {
  width: calc(50% - var(--size-24));
}
.p-popup__content-text-name-ja {
  color: var(--black);
  font-size: var(--size-21);
}
.p-popup__content-text-name-en {
  font-size: var(--size-16);
}
.p-popup__content-text-detail {
  margin-top: var(--size-32);
}
.p-popup__content-text-detail-title {
  color: var(--black);
}
.p-popup__content-text-detail-list {
  margin-top: var(--size-8);
}
.p-popup__content-text-detail-item {
  display: inline-block;
  padding: var(--size-6) var(--size-8);
  border-radius: var(--size-4);
  border: solid var(--size-1) var(--gold);
  font-size: var(--size-13);
  color: var(--gold);
  margin-bottom: var(--size-8);
}
.p-popup__content-text-detail-item:last-child {
  margin-bottom: 0;
}

@media screen and (max-width:768px) {
  .p-mv__title-en {
    font-size: var(--size-15);
  }
  /* コンテンツ */
  .p-content__title {
    padding: var(--size-8);
  }
  .p-content__title02 {
    padding: var(--size-8) var(--size-8);
  }
  .p-content__title-en {
    font-size: var(--size-19);
  }
  .p-content__title-en-youth {
    font-size: var(--size-16);
  }
  .p-content__title-detail {
    font-size: var(--size-11);
  }
  .p-content__list01 {
    margin-top: var(--size-40);
  }
  .p-content__item01 {
    gap: var(--size-8);
    margin-bottom: var(--size-32);
  }
  .p-content__item01-name-ja {
    font-size: var(--size-15);
  }
  .p-content__item01-name-en {
    font-size: var(--size-12);
  }
  .p-content__item01-img-wrapper {
    width: 42.8134%;
  }
  .p-content__item01-img {
    /* height: var(--size-106); */
    max-width: inherit;
    object-position: top;
  }
  .p-content__sex {
    gap: var(--size-4);
  }
  .p-content__sex-main {
    font-size: var(--size-12);
  }
  .p-content__sex-detail {
    font-size: var(--size-12);
  }
  .p-content__list02-wrapper {
    margin-top: var(--size-40);
  }
  .p-content__list02 {
    margin-top: var(--size-24);
  }
  .p-content__item02 {
    padding-bottom: var(--size-16);
    margin-bottom: var(--size-24);
  }
  .p-content__item02-name-ja {
    font-size: var(--size-17);
  }
  .p-content__item02-name-en {
    font-size: var(--size-14);
  }
  /* ポップアップ */
  .p-popup__content-inner {
    flex-direction: column;
    gap: var(--size-24);
    padding: var(--size-16) var(--size-16) var(--size-40);
  }
  .p-popup__content-close {
    top: 6px;
    right: 6px;
    width: var(--size-32);
    height: var(--size-32);
    font-size: var(--size-15);
  }
  .p-popup__content-img-wrapper {
    width: 100%;
  }
  .p-popup__content-text {
    width: 100%;
  }
  .p-popup__content-text-name-ja {
    font-size: var(--size-19);
  }
  .p-popup__content-text-name-en {
    font-size: var(--size-14);
  }
  .p-popup__content-text-detail {
    margin-top: var(--size-24);
  }
  .p-popup__content-text-detail-title {
    font-size: var(--size-13);
  }
  .p-popup__content-text-detail-item {
    padding: var(--size-6) var(--size-8);
    font-size: var(--size-11);
  }
  .p-popup__content-text-detail-item:last-child {
    margin-bottom: 0;
  }
}