@charset "UTF-8";

/****************************************************************************

	NG
    where 87 / 13.7
    min 79
    aspect-ratio 87 / 14.8 → non absolute
    inset-inline-start 86 / 14.4
    margin-inline 86 / 14.4
	has 104 / 15.3
    nesting 119 / 17.1

    container type

    is:-webkit-any

****************************************************************************/


.👒 {
	scroll-behavior: smooth;
}


:root {

	--number: 8px;
	--motion-block: calc(var(--margin-vertical-adjust-400) * 1);
	--motion-block-long: calc(var(--margin-vertical-adjust-400) * 2);

    --font-primaly: "Noto Serif JP", serif;

    --main-color: #5e5e5e;

	--sub-color: #f1f7f9;
	--pale-color: #f2dbf9;

	--core-color-primary: #c8e1eb;

	--font-size-primary-max: 90rem;
	--font-size-primary: 1.75rem;
	--font-size-secondary: 1.3rem;
	--font-size-small: 80%;
	--font-size-section-caption: 60%;

	--text-shadow-primary: 1px 2px 4px rgba(67, 109, 242, 0.44);

	--margin-primary: 61.8vw;
	--margin-secondary: 38.2vw;
	--margin-tertiary: 23.6vw;
	--margin-quaternary: 14.58vw;
	--margin-quinary: 9.01vw;
	--margin-senary: 5.57vw;

	--margin-vertical-septenary: 3.44vw;
	--margin-vertical-octonary: 2.13vw;

	/* --three: calc(100% / 3); */

	/* size400 */
	--margin-primary-400: 247.2px;
	--margin-secondary-400: 153px;
	--margin-tertiary-400: 94.8px;
	--margin-quaternary-400: 58.5px;
	--margin-quinary-400: 36.2px;
	--margin-senary-400: 22.3px;
	--margin-septenary-400: 13.8px; /* 1st */

	--margin-vertical-octonary-400: 8.5px;
	--margin-vertical-adjust-400: 10px;


	/* size400 - margin-septenary-400 */
	--margin-primary-372: 230.14px;
	--margin-secondary-372: 142.2285px;
	--margin-tertiary-372: 87.897212px;
	--margin-quaternary-372: 54.320477px;
	--margin-quinary-372: 33.570055px;
	--margin-senary-372: 20.746294px;
	--margin-septenary-372: 12.82121px; /* 1st */

	/* size600 */
	--margin-senary-600: 33.4px;

	/* percent */
	--margin-primary-square-big: 61.8%;
	/* マトリョーシカWhole⑦ */
	--margin-primary-square: 38.2%;
	/* ⑥ */
	--margin-primary-percent: 23.6%;
	/* ⑤ */
	--margin-secondary-percent: 14.58%;
	/* ④ */
	--margin-tertiary-percent: 9.01%;
	/* ③ */
	--margin-quaternary-percent: 5.57%;
	/* ② */
	--margin-quinary-percent: 3.44%;
	/* ① */
	--margin-senary-percent: 2.13%;

	/* 100% - --margin-quaternary-percent  */
	--margin-primary-square-big-margin: 58.36%;
	/* マトリョーシカWhole⑦ */
	--margin-primary-square-margin: 36.07%;
	/* ⑥ */
	--margin-primary-percent-margin: 22.29%;
	/* ⑤ */
	--margin-secondary-percent-margin: 13.77%;
	/* ④ */
	--margin-tertiary-percent-margin: 8.51%;
	/* ③ */
	--margin-quaternary-percent-margin: 5.26%;
	/* ② */
	--margin-quinary-percent-margin: 3.25%;
	/* ① */
	--margin-senary-percent-margin: 2.01%;

	--angle: 0deg;
}

@container style(--fonts: hTagBold) {
	.noveltyInfoInner h1,
	.introTxtRight>h1,
	.tagJaH1 {
		font-family: "Shippori Mincho", serif;
		font-weight: 600;
		font-style: normal;
		white-space: nowrap;
		letter-spacing: .2px;
	}
	.introTxtRight>h1 {
		color: var(--sub-color);
	}
	.tagJaH1,
	.noveltyInfoInner h1 {
		color: var(--sub-color);
	}
}

@property --radius-img {
	syntax: "<number>";
	inherits: true;
	initial-value: 30;
}

/* border-radius: calc(var(--radius-img) * 1px); */

/****************************************************************************

	*common*

****************************************************************************/

body {
	background: #f1f7f9;
}

main {
    font-family: var(--font-primaly);
	color: var(--main-color);
}

#pickupH {
	width: 100%;
	height: 100%;
	max-height: 929px;
	position: relative;
	overflow: hidden;
	background: url(img/kantoku-pickup-h-bg.webp?v=01) no-repeat;
    background-size: cover;
    background-position: bottom;

}

.logonone {
	width: 10px;
    height: auto;
    display: none;
      img {
        width: 100%;
      }
}


/****************************************************************************

	*gaSec*

****************************************************************************/

#pickupgallery {
	max-height: 604px;
	overflow: hidden;
}

#gallery {
	overflow: hidden;
	background: #fbf4f4;
}

.minWidth {
	width: 98%;
}

.swiper-slide {
    align-self: center;
}

.wrapperSquare {
    position: relative;
	width: calc(100% - var(--margin-quaternary-percent)*1);
    margin: 0 auto;
	&>img {
		position: relative;
		margin-inline: auto;
	}
}
.swiper-button-next, .swiper-button-prev {
    display: block;
    position: absolute;
    width: var(--margin-senary-percent) !important;
    justify-content: flex-end;
	height: 100%;
    top: 0%;
	bottom: 0;
    margin: 0;
    padding: 0;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "" !important;
    width: 80%;
    background: url(img/ga/g-arrow.webp?v=01) no-repeat;
    background-size: 100% auto;
    aspect-ratio: 7 / 16;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);


}
.swiper-button-next {
	right: var(--margin-senary-400) !important;
}
.swiper-button-next::after {
    right: 0;
}
.swiper-button-prev {
	left: var(--margin-senary-400) !important;
}
.swiper-button-prev::after {
    left: 0;
    transform: scale(-1);
}


/*:: Products ::::::::::::::::*/
  .swiper {
	width: 100%;
	height: auto;
  }
  #gallery {
	.swiper-slide {
		align-self: flex-end;
	}
  }
  #pickupgallery {
	.swiper-slide {
		align-self: center;
	}
  }
  .swiper-slide {
	background: transparent;
	&>img {
	  display: block;
	  width: 100%;
	  height: auto;
	}
  }
  
  .swiper-slide-prev,
  .swiper-slide-next,
  .swiper-slide-duplicate-prev{
	  .swiper-slide-inner{
		opacity: .75;
		  transition: all 0.5s ease;
	  }
  }
  
  .swiper-wrapper {
	  align-items: flex-end;
  }
  
  .swiper-slide-inner{
	  width: 100%;
	  /* large→small */
	  /* width: min(70%, 100%); */
	  margin-inline: auto;
	  text-align: center;
	  margin-block-end: 0;
	  &>img {
		  width: auto;
		  margin-inline: auto;
	  }
	  figcaption {
		display: grid;
		grid-template-columns:auto;
		grid-template-rows: 21px;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		width: calc(100% - var(--margin-quaternary-400)*2);
		line-height: 1.3;
		margin-inline: auto;
		margin-block-start: .8rem;
	  &>span { 
		  display: block;
		  align-self: end;
	  }
	  }
  }
  .swiper-pagination {
	font-size: 1rem;
    position: relative;
    margin-block-start: 1rem;
	font-family: 'Times New Roman', Times, serif;
	color: var(--main-color);
}
/*   .fig1 {
	grid-area: 1 / 1 / 3 / 2;
	text-align: right;
	margin-inline-end: 4px;
	font-size: 1.3rem;
	&>img {
		width: 10px;
        text-align: right;
        display: inline-block;
        margin-block-end: 4px;
        margin-inline-end: 2px;
	}
	}
	.fig2 { grid-area: 1 / 2 / 2 / 3; font-size: var(--font-size-section-caption); text-align: left;}
	.fig3 { grid-area: 2 / 2 / 3 / 3; text-align: left;} */
	  .gaHeight {
		  width: 60%;
		  height: auto;
	  }
	  .gaWidth {
		width: calc(100% - var(--margin-septenary-400)* 2);
	  }
	
	  .gaWidthAuto {
		width: auto;
		max-width: calc(100% - var(--margin-septenary-400)* 2);
	  }

/****************************************************************************

	*movieSec*

****************************************************************************/
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .movieWrapper {
        position: relative;
        overflow: hidden;
        height: 24vh;
        min-height: 200px;
        max-height: 335px;
        background: url(img/kantoku-profile-bg.webp) no-repeat center top;
    }
    .movieSpace {
        background-color: #000;
        height: calc(100% + 11rem);
        position: absolute;
        top: -1rem;
        width: calc(100% + 2rem);
    }
    .movieParallax {
        object-position: center;
        opacity: 1;
        position: relative;
        width: 100%;
    }

/****************************************************************************

	*eventSec*

****************************************************************************/

	#eventSec {
		width: 100%;
		height: auto;
		background: url(img/kantoku-eventinfo-bg.webp?v=01) #fbf4f4;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
		overflow: hidden;
	}

 .eventList {
	container-type: inline-size;
	 container-name: nav;
	overflow: hidden;
	margin-block-start: var(--margin-quaternary-400);
	float: left;
	width: min(100%, 1500px);
    margin-inline: auto;
    display: grid;
    grid-auto-columns: 1fr;
	justify-content: center;
	align-items: center;
	color: var(--main-color);
	padding-block-end: var(--margin-septenary-400);
		li {
			
			position: relative;
			width: calc(100% - calc(17px * 2));
			display: grid;
			grid-template-columns: 1.15fr 0.85fr;
			align-items: center;
			margin-inline: auto;
			padding-inline: var(--margin-senary-400);
		div:first-of-type {
			width: min(100%, 300px);
			margin-inline: auto;
			z-index: 2;
			h3 {
				font-size: clamp(1rem,4vw,1.78rem);
				text-align: left;
				margin-block: 0.09rem;
				&::after {
					content: '会場';
					font-size: clamp(.6rem,2.9vw,1.2rem);
					padding-inline-start: 3px;
				}
			}
			p {
				font-feature-settings: 'palt' 1;
					&:first-of-type {
						font-size: clamp(.6rem,2.9vw,1.2rem);
						line-height: 1.2;
						word-break: break-all;
					}
					&:first-of-type time {
						font-size: clamp(1rem,4.2vw,1.9rem);
						font-family: 'Times New Roman', Times, serif;
						letter-spacing: .4px;
						margin-inline-end: 1.5px;
					}
					&:nth-of-type(2) {
						font-size: clamp(.6rem, 3.076923vw, 1.35rem);
						line-height: 1.6;
						letter-spacing: .09rem;
						width: 96%;
					}	
			}
		}
		div:nth-of-type(2) {
			width: min(100%, 200px);
			margin-inline: auto;
			overflow: visible;
			a:last-of-type {
				opacity: .92;
				position: relative;
				z-index: 90;
				padding-block: 8px;
				display: block;
				text-align: center;
				background: url(img/event-btn.webp);
				background-size: cover;
				overflow: visible;
				aspect-ratio: 285 / 114;
				display: flex;
				justify-content: center;
				

				/* --matched-radius-padding: 3.3px;
				--matched-radius-inner-size: 5px;
			   
				padding: var(--matched-radius-padding);
				border-radius: calc(
				  var(--matched-radius-inner-size) + var(--matched-radius-padding)
				); */
				filter: drop-shadow(2px 2px 8px var(--pale-color));
				&:hover {
					outline: 0;
				}
			}
			a {
				display: block;
				text-align: center;
			}
		}

	}
}

.reserveTxt {
	position: relative;
	z-index: 10;
	letter-spacing: .078rem;
    margin-block-start: .55rem;
	font-size: clamp(.7rem,3.5vw,1.6rem);
    align-self: center;
}

 .eventList li {
	padding-block-end: calc(var(--number) * 3);
 }


 .eventList li:nth-of-type(n+2) {
	padding-block-start: calc(var(--number) * 3);
 }

 .arrowWrapper {
	margin-inline: .4rem;
 }


 /****************************************************************************

  *over*

****************************************************************************/
@media(min-width: 800px) {
	.boxShadow {
		box-shadow: 5px 5px 40px var(--core-color-primary);		
	}
	main {
		width: 800px;
		margin-inline: auto;
	}
}

@container nav (min-width: 560px) {
  .eventList li {
	width: 75%;
  }
}