@charset "UTF-8";
/* CSS Document */

html,
body {
	padding: 0;
	margin: 0;
	font-family: "meno-display-condensed", serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
}
ul,li {
	list-style: none;
	padding: 0;
	margin: 0;
}
h1,h2,h3,h4,p,a {
	padding: 0;
	margin: 0;
}
img,svg {
	width: 100%;
}
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
#ch {
	position: relative;
	width: 100%;
	background-color: #DEDEDD;
	
}
#ch .anim {
	opacity: 0;
	transition: 1s all 0s;
}
#ch .anim.ac {
	opacity: 1;
	transform: translate(0);
}




/* #main_visual ===========================================*/
#main_visual {
	position: relative;
	width: 100%;
	line-height: 0;
	overflow: hidden;
}
video {
	width: 100%;
}
#main_visual .ttl {
	position: absolute;
    width: 84%;
    top: 42%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 1.5s all 1.8s ease;
    filter: drop-shadow(-4px 0px 16px rgba(0, 0, 0, 1.9));
}



@media only screen and (min-width: 769px)  {
	#main_visual {
		width: 40%;
        margin: 0%;
        position: sticky;
        top: 0;
        right: 0;
        background: #000;
	}
	#main_visual .ttl {
		width: 58%;
		top: 38%;
		 z-index: 3;
	}
  #main_visual .main_visual_parent {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 16;
  }
  #main_visual .main_visual_parent video.mv-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .65s ease;
    will-change: opacity;
  }
  #main_visual .main_visual_parent video.mv-layer.is-active {
    opacity: 1;
  }
}



#main_contents {
	position: relative;
}
#ch #main_contents section {
	position: relative;
	box-sizing: border-box;
	margin-top: 8px;
}
@media only screen and (min-width: 769px)  {
	#main_contents {
		width: 59.3%;
        margin: -71vw 0 0 auto;
	}
}

/* staff==============*/

#ch #main_contents section .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	align-items: start;
}

#ch #main_contents section .grid .grid-child {
	position: relative;
    aspect-ratio: 3 / 4.5;
    overflow: hidden;
}
#ch #main_contents section .grid .grid-child > img {
	display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
#ch #main_contents section .grid .grid-child.mono .item {
  position: relative;
}

#ch #main_contents section .grid .grid-child.mono .zoom {
  display: block;
  transition: opacity 1.6s ease;
}

#ch #main_contents section .grid .grid-child.mono .zoom:first-of-type {
  opacity: 0;
}

#ch #main_contents section .grid .grid-child.mono .zoom:nth-of-type(2) {
  position: absolute;
  inset: 0;
  opacity: 1;
}

#ch #main_contents section .grid .grid-child.mono.is-visible .zoom:first-of-type {
  opacity: 1;
}

#ch #main_contents section .grid .grid-child.mono.is-visible .zoom:nth-of-type(2) {
  opacity: 0;
}

#ch #main_contents section .grid .grid-child .more,
#ch #main_contents section .grid .grid-child .credit {
  position: relative;
  z-index: 1;
}

#ch #main_contents section .grid .grid-child .item .more {
  position: absolute;
    width: 18px;
    height: auto;
    top: 3%;
    right: 3%;
    object-fit: none;
}
#ch #main_contents section .grid .grid-child:not(.mono) > img.more {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
}
#ch #main_contents section .grid .grid-child.full {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  line-height: 0;
}
#ch #main_contents section .grid .grid-child .credit {
  position: absolute;
  width: 94%;
  height: auto;
  bottom: 2%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 7px;
  filter: drop-shadow(-4px 0px 16px rgba(0, 0, 0, 1.9));
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  display: flex;
  flex-wrap: wrap;
}

#ch #main_contents section .grid .grid-child.full .credit {
  position: absolute;
  width: 62%;
  bottom: 7%;
  line-height: 1.2;
}
#ch #main_contents section .grid .grid-child .credit .credit-item {
  white-space: nowrap; /* 項目内は折り返さない */
}
#ch #main_contents section .grid .grid-child .credit .credit-sep {
  white-space: pre;    /* " / " の余白を保持 */
}

@media only screen and (min-width: 769px)  {
	#ch #main_contents section .grid .grid-child .credit {
		font-size: 10px;
	}
	#ch #main_contents section .grid .grid-child.mono .item .credit {
		width: 78%;
		text-align: center;
		font-size: 10px;
	}
	#ch #main_contents section .grid .grid-child .item .more {
		width: 22px;
		top: 2%;
	}

}




.remodal {
	position: relative;
    box-sizing: border-box;
    width: 100%;
	background: none;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #fff;
    hashTracking: false;
    outline: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
	text-align: left;
	font-size: 11px;
	line-height: 2.0;
	padding: 0 !important;
  margin: 0 !important;
  background: transparent !important; /* 白背景が不要なら */
}
.modal-body {
  position: relative;
}
.remodal-wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
.remodal img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
.modal-body {
	position: relative;
}
.modal-body strong {	    
	position: absolute;
    top: 2%;
    right: 4%;
    width: 28px;
    margin: 0;
    z-index: 1000;
}
.no {
	position: absolute;
    top: 1%;
    left: 4%;
    z-index: 1000;
    font-size: 26px;
    font-weight: 300;
    color: #111;
    line-height: 1;
    letter-spacing: 1px;
}
.modal-content {
	position: relative;
}
.modal-content .modal-look {
	width: 100%;
	margin: 0 auto 7%;
	float: none;
}
.modal-content .modal-look img {
    line-height: 0;
}
.modal-content .modal-look .slider {
  position: relative;
}
.modal-content .modal-look .slider .slick-slide img {
  display: block;
}
.modal-content .modal-look .slider .slick-dots {
  bottom: -30px;
}
.modal-content .modal-look .slider .slick-dots li button:before {
  font-size: 10px;
  color: #111;
  opacity: .35;
}
.modal-content .modal-look .slider .slick-dots li.slick-active button:before {
  opacity: .95;
}
.modal-content .modal-look .slider .ch-slick-prev,
.modal-content .modal-look .slider .ch-slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-content .modal-look .slider .ch-slick-prev {
  left: 8px;
}
.modal-content .modal-look .slider .ch-slick-next {
  right: 8px;
}
.modal-content .modal-look .slider .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 2px;
}
.modal-content .modal-look .slider .slick-dots li button {
  padding: 0;
}
.modal-content .modal-look .slider .slick-dots li button:before {
  font-size: 8px;
  line-height: 10px;
}
.remodal,
.remodal-wrapper:after {
  vertical-align: top !important;
}
.remodal-wrapper:after {
  content: none !important; /* 中央寄せトリックを無効化 */
}


/* アプリLP用 ===========================================*/
.modal-content .modal-look .slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 117vw;
}
.modal-content .modal-look .slide img {
  display: block;
  position: absolute;
  width: inherit;
  opacity: 0;
  animation: slideAnime 8s ease infinite;
}
.modal-content .modal-look .slide img:nth-of-type(1) { animation-delay: 0s }
.modal-content .modal-look .slide img:nth-of-type(2) { animation-delay: 4s }
@keyframes slideAnime{
   0% { opacity: 0 }
   8% { opacity: 1 }
  50% { opacity: 1 }
  58% { opacity: 0 }
 100% { opacity: 0 }
}


/* modal-credit ===========================================*/
.modal-content .modal-credit {
	margin: 10% auto 0 6%;
    letter-spacing: .5px;
    color: #111;
    font-size: 11px;
}
.modal-content .modal-credit .modal-credit-child span {
	margin-right: 4%;
}
.modal-content .modal-credit .modal-credit-child a {
	color: #111;
}


@media only screen and (min-width: 769px)  {
	.remodal,
	.remodal-wrapper:after {
		vertical-align: middle !important;;
	}
	.remodal-wrapper:after {
		content: "" !important;
		display: inline-block;
		height: 100%;
	}
	.modal-body strong {
		width: 68px;
        top: 3%;
	}
	.no {
		position: absolute;
		top: 4%;
		left: 4%;
		font-size: 42px;
    }
	.modal-content-inner {
		width: 980px;
		margin: 0 auto;
	}
	.modal-content-inner-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.modal-content .modal-look {
		width: 50%;
		margin: 0;
	}
	.modal-content .modal-look .slide {
		height: 528px;
	}
	.modal-content .modal-credit {
		width: 40%;
		margin: 0;
		font-size: 13px;
	}
	.modal-content .modal-credit .modal-credit-child span {
		margin-right: 8%;
}
	.modal-content .modal-link {
		width: 22%;
        margin: 0 auto;
	}
}

/* foot ===========================================*/
#ch #foot {
	margin-top: 22%;
	color: #111;
}
#ch #foot .staff_credit {
	width: 84%;
	margin: 0 auto;
}
#ch #foot .staff_credit_row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 6%;
	margin-bottom: 8px;
}
#ch #foot .staff_credit_row p {
	font-size: 10px;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
#ch #foot .staff_credit_row p:first-child {
	text-align: right;
}

#ch #foot .foot_nav {
	width: 70%;
    margin: 16% auto 0;
    display: grid;
    grid-template-columns: minmax(120px, 28%) 1fr;
    align-items: start;
    column-gap: 10%;
}
#ch #foot .logo {
	width: 100%;
}
#ch #foot .logo img {
	display: block;
}
#ch #foot .links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 2px;
}
#ch #foot .links a {
	display: inline-block;
	font-size: 11px;
	color: #111;
	text-decoration: none;
	letter-spacing: 0.02em;
}
#ch #foot .copy {
	display: block;
    margin-top: 18%;
    padding-bottom: 16%;
    text-align: center;
    font-size: 9px;
    letter-spacing: .5px;
}

@media only screen and (min-width: 769px)  {
	#ch #foot {
		width: 59.3%;
		margin: 160px 0 0 auto;
	}
	#ch #foot .staff_credit {
		width: 440px;
	}
	#ch #foot .staff_credit_row p {
		font-size: 11px;
	}
	#ch #foot .foot_nav {
		width: 400px;
        margin-top: 50px;
        grid-template-columns: minmax(188px, 30%) 1fr;
        column-gap: 7%;
	}
	#ch #foot .links {
		gap: 14px;
	}
	#ch #foot .links a {
		font-size: 11px;
	}
	#ch #foot .copy {
		margin-top: 120px;
		padding-bottom: 120px;
	}
}

/* ===== mobile only: more の + を細線で描画 ===== */
@media only screen and (max-width: 768px) {
  #ch #main_contents section .grid .grid-child .item .more {
    display: none;
  }

  #ch #main_contents section .grid .grid-child .item {
    position: relative;
  }

  #ch #main_contents section .grid .grid-child .item::before,
  #ch #main_contents section .grid .grid-child .item::after {
    content: "";
    position: absolute;
    top: 3%;
    right: 3%;
    background: #fff;
    z-index: 2;
  }

  #ch #main_contents section .grid .grid-child .item::before {
    width: 1px;
    height: 18px;
    transform: translateX(-8.5px);
  }
  #ch #main_contents section .grid .grid-child .item::after {
    width: 18px;
    height: 1px;
    transform: translateY(8.5px);
  }
}

/* view 
**************************************************/
#ch .spview {
	display: block;
}
#ch .pcview {
	display: none;
}
@media only screen and (min-width: 768px)  {
    #ch .spview {
		display: none;
	}	
	#ch .pcview {
		display: block;
	}
}
@media only screen and (min-width: 769px) {
  #main_visual video {
    transition: opacity .35s ease;
  }
  #main_visual video.is-switching {
    opacity: 0;
  }
}