/* @override 
	http://203.143.96.127:8003/anniv_30th/assets/css/base.css */

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

:root {
	/*color*/
	/*色相-彩度(％)-輝度(％-50%中間)*/
	--main_bk: hsl(0, 0%, 1%);
	--main_kf_blue: hsl(199, 99%, 57%);/**/
	--main_kf_blue_darker: hsl(199, 99%, 42%);/**/
	--main_kf_blue_pale: hsl(199, 99%, 95%);
	--main_kf_blue_pale_more: hsl(198, 62%, 96%);
	--main_kf_gold: hsl(48, 50%, 44%);
	--main_red: hsl(0, 100%, 50%);
	--main_glay_light: hsl(0, 0%, 95%);

}



:root {
/*Font-jp*/
--main_jp:'Noto Sans JP',"Hiragino Sans","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",sans-serif;
/*Font-en-DIN Next Condensed*/
--main_en_cond_light:normal 1rem/1.4 DINNextLTPro-LightCondensed, sans-serif;
--main_en_cond_reg:normal 1rem/1.4 DINNextLTPro-Condensed, sans-serif;
--main_en_cond_med:normal 1rem/1.4 DINNextLTPro-MediumCond, sans-serif;
--main_en_cond_bold:normal 1rem/1.4 DINNextLTPro-BoldCondensed, sans-serif;
--main_en_reg:normal 1rem/1.4 DINNextLTPro-Regular, sans-serif;
}

html,
button,
input,
select,
textarea {
    color: #020202;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

button:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}


html,body {
	margin: 0;
	font-family: var(--main_jp);
	font-weight: 400;
    font-size: 62.5%;
    line-height: 1.4;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}


body {
	position: relative;
	z-index: 0;
	min-height: 100vh;
}

body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, hsla(199, 99%, 57%, 0.7) 1px, transparent 1px), /* 水色 */
        radial-gradient(circle, hsla(0, 0%, 0%, 0.3) 1px, transparent 1px), /* 黒 */
        radial-gradient(circle, hsla(48, 50%, 44%,0.3) 1px, transparent 1px); /* gold */
    background-size: 3px 3px; /* ノイズの粒のサイズ */
    background-position: 
        0 0,
        1px 1px,
        2px 4px; /* ノイズの配置をランダムに見せる */
    opacity: 0.3; /* 透明度を設定 */
    pointer-events: none;
    z-index: -1;/* 要素によって調整が必要 */
}

.pcv {
	
}

.spv {
	display: none;
}

#overlay {
	width: 100%;
	height: 100svh;
	background-color: hsla(0, 0%, 0%,0.56);
	display: none;
	position: fixed;
	z-index: 50;
	left: 0;
	top: 0;
}

main {
	width: 100%;
	height: auto;
    display: block;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

body:not(#home) main{
		/*nest-start*/
		&::after {
		content: "";
		width: 100%;
		display: block;
		height: 320px;
		transform: skewY(-5deg);
		background-color: var(--main_kf_blue_pale);
		position: absolute;
		top: -150px;
		left: 0;
		z-index: -1;
		}
		/*nest-end*/
}


p {
    font-size: 1.6rem;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.red {
	color: red;
}

[lang='en'],
[lang='en']>strong {
	font-weight: normal;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 1.6rem;
	line-height: 1;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

ul,li {
	list-style: none;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}



/*===== font basic settings  =======*/

* {
	font-feature-settings: "palt" 1;
}

a {
	color: #020202;
	text-decoration: none;
}

/*===== #wrapperr(pc)  =======*/
#wrapper {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
	overflow: hidden;
}



/*===== header(pc)  =======*/
#site_id{
	width: 310px;
	font: var(--main_en_cond_reg);
	text-transform: uppercase;
	line-height: 1;
	font-size: 2rem;
	position: fixed;
	z-index: 0;
	/*nest-start*/
	& a{
	display: block;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	}
	
	& strong {
		width: 144px;
		display: block;
		margin-right: 10px;
	}
	
	& a > span{
		position: relative;
		top: 1px;
	}
	
	& a > span > span{
	color: var(--main_kf_blue);
	}
	
	/*nest-end*/
	
}

/*buttons(pc)*/

/*btn gold ol*/

ul.set_gold_btn,
ul.year_switcher {
		display: flex;
		justify-content: center;
		font: var(--main_en_cond_reg);
		color: var(--main_kf_gold);
		line-height: 1;
		text-align: center;
		
		/*nest-start*/
		
		& li{
		border: 2px solid var(--main_kf_gold);
		border-radius: 4px;
		min-width: 180px;
		padding: 0.3em 0.5em 0.1em 0.5em;
		transition: 0.3s;
		text-transform: uppercase;
		}
		
		& a {
		display: block;
		width: 100%;
		height: 100%;
		color: var(--main_kf_gold);
		padding: 0.53em 0.5em 0.35em 0.5em;
		position: relative;
		z-index: 0;
		text-align: center;
		}
		
		& li>a>span,
		& li>span {
			display: inline-block;
			position: relative;
			z-index: 0;
		}
		
		& li:hover {
			background-color: var(--main_kf_gold);
			color: #fff;
		}
		
		& li:hover a {
			color: #fff;
		}
		
		& li>a>span,
		li.next>span {
			padding-left: 24px;
		}
		
		& a>span {
			padding-left: 0.75em;
		}
		
		li.more>a>span, 
		li.prev>span {
			padding-right: 0.5em;
			padding-left: 0;
		}
		
		li.prev>a>span {
			padding-right: 0;
			padding-left: 24px;
		}
		
		
		
		& li>a>span::after,
		& li>span::before {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			width: 26px;
			height: 14px;
			background-image: url(/anniv_30th/assets/img/icon_arrows.svg);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 76% 0;
		}
		
		& li>a>span::after {
			width: 23px;
			height: 12px;
			transform: translateY(-68%) rotate(90deg) scale(1,1);
			right: 0;
		}
		
		li.more>a>span::after,
		li.next>span::before {
			left: 0;
			transform: translateY(-68%) rotate(90deg);
		}
		
		& li>a>span::before,
		li.prev>span::before {
			right: 0;
			transform: translateY(-68%) rotate(90deg) scale(1,-1);
		}
		
		
		
		& li:hover>span::before {
			background-position: 101% 0;
		}
		
		& a>span:hover::after {
			background-position: 101% 0;
		}
		
		li.prev>a>span::after {
			left: 0;
			transform: scale(-1,1) rotate(90deg) translateX(-31%);
		}
		
		li.more>a>span::after {
			right: -8%;
			left: auto;
		}

		
		/*nest-end*/


}

ul.set_gold_btn>li{
	padding: 0;
	& >a{
		
	}
}



/* header(pc) */
header {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	
	/*nest-start*/
	
	& > .inner{
	position: relative;
	z-index: 0;
	padding: 8px 32px 0 32px;
	height: 88px;
	}
	
	div.inner_right {
	position: absolute;
	right: 24px;
	top: 16px;
	z-index: 10;
	}
	
			
	
	
	/*menu btn--一旦不要*/
	#menu_btn {
		font: var(--main_en_cond_reg);
		font-size: 1.4rem;
		text-transform: uppercase;
		text-align: center;
		display: none;
		position: relative;
	}
	
		#menu_btn span {
			position: relative;
			z-index: 0;
		}
	
	#menu_btn>span.icon {
		display: block;
		width: 48px;
		height: 48px;
		border-radius: 24px;
		background-color: var(--main_kf_blue);
		margin-bottom: 4px;
		position: relative;
		z-index: 0;
	}
	
	#menu_btn>span.icon::before,
	#menu_btn>span.icon::after {
	content: "";
	display: block;
	position: absolute;
	width: 24px;
	height: 3px;
	background-color: #aaa;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}
	
	#menu_btn>span.icon::before {
		margin-top: -5px;
		background-color: var(--main_bk);
	}
	
	#menu_btn>span.icon::after{
		margin-top: 5px;
		background-color:#fff;
	}
	
	/*nest-end*/
	
}


ul.list_sns {
		justify-content: flex-end;
		gap:0 6px;
		margin: -2px -8px 0 0;
		transition:0.3s;
		display: none;
		/*nest-start*/
		
		& li > a {
		display: block;
		display: block;
		text-decoration: none;
		color: var(--main_bk);
		height: 40px;
		width: 41px;
		text-indent:105%;
		white-space:nowrap;
		overflow:hidden;
		background-image: url(/assets_global/img/icon_sns.svg);
		background-size: cover;
		background-repeat: no-repeat;
		transition: 0.3s;
		transform: scale(0.8);
		}
		
		& li a:hover {
		transform: scale(1);
		}
		
		& li.x > a {
		background-position: 0 0;
		}
		
		& li.fb > a {
		background-position: 17.2% 0;
		}
		
		& li.line > a {
		background-position: 34.5% 0;
		}
		
		& li.instagram > a {
		background-position: 51.5% 0;
		}
		
		& li.note > a {
		background-position: 68.9% 0;
		}
		
		& li.tiktok > a {
		width: 32px;
		background-position: 84% 0;
		}
		
		& li.youtube > a {
		width: 47px;
		background-position: 101% 0;
		}

/*nest-end*/
	}

header ul.list_sns {
		display: flex;
		width: 400px;
}


#box_home_lead ul.list_sns {
	display: flex;
	justify-content: center;
	margin-top: 8vw;
	transform-origin:center ;
	transform: scale(1.15);
	display: none;
}


header.on {
	background: rgba(255, 255, 255, 0.3);
	/* すりガラス効果の本体 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari 対応 */
  
  /*nest-start*/
  ul.list_sns{
transform: translateY(7px);
}
/*nest-end*/ 
  
}





/*===== /header  =======*/


/*===== #nav_floating(pc)  =======*/
#nav_floating {
	position: fixed;
	top: 160px;
	left: calc(100% - 150px);
	z-index: 140;
width: 150px;
height: auto;
transition: 0.3s;
mix-blend-mode: luminosity;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
padding: 1.5em 16px 1.5em 0;
isolation: isolate;
background-color: hsla(0,100%,100%,0.3);

/*nest-start*/

& >span{
position: absolute;
bottom: -8px;
right: 20px;
display: block;
font: var(--main_en_cond_reg);
font-size: 1.3rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--main_kf_blue);
transform-origin: bottom right;
transform: rotate(-90deg);
transition: 0.3s;
}

&::before,
&::after{
content: "";
display: block;
position: absolute;
width: 1px;
background-color: var(--main_kf_blue);
transition: 0.3s;
right: 22px;
}

&::before{
transform-origin: bottom center;
bottom: -99px;
height: 16px;
transform: rotate(-25deg);
}

&::after{
transform-origin: bottom center;
bottom: -100px;
height: 90px;
}

&:hover::before {
	transform: translateY(50px) rotate(-25deg);
}

&:hover::after {
	transform: translateY(50px) scaleY(1.53);
}

&:hover>span {
transform:  translateY(80px) rotate(-90deg);
}



& ul{
font: var(--main_en_cond_reg);
font-size: 1.8rem;
line-height: 1;
text-align: right;
text-transform: uppercase;
}

& li {
	margin-top: 0.1em;
	white-space: nowrap;
}

& li>a {
	display: block;
	position: relative;
	z-index: 0;
	color: var(--main_kf_blue);
	padding: 0.35em 0.2em 0.12em 0.2em;
}

& li>a>span {
	display: inline-block;
	z-index: 10;
	position: relative;
}

& li>a::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	height: 100%;
	width: 0%;
	background-color: var(--main_kf_gold);
	display: block;
	transform-origin: top right;
	transition: 0.3s;
}

li>a:hover{
	color: #fff!important;
}

& li>a:hover::after{
	width: 100%;
}
/*nest-end*/
}

#nav_floating.bottom {
	/*nest-start*/
	
&::before{
transform: rotate(25deg) rotate(180deg);
bottom: -8px;
}

& >span{
	bottom: -66px;
right: 20px;
}

&:hover::before {
	transform: translateY(0px) rotate(25deg) rotate(180deg);
}

&:hover>span {
transform:  translateY(48px) rotate(-90deg);
}
	
/*nest-end*/
}


/*===== /#nav_floating(pc)  =======*/


/*===== footer(pc)  =======*/

p#page_top_btn {
	position: fixed;
	z-index: 100;
	left: 0;
	width: 100%;
	height: 0;
	top: 90svh;
}

p#page_top_btn>a {
	width: 64px;
	height: 64px;
	border-radius: 32px;
	background-color: hsla(0,0%,0%,0.3);
	color: #fff;
	display: block;
	right: 32px;
	top: -12px;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s ease; /* ふわっと */
	text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

p#page_top_btn.on>a {
	opacity: 1;
	transition: background-color 0.4s ease;
}

p#page_top_btn.on>a:hover {
	background-color: var(--main_kf_gold);
}

p#page_top_btn>a::before {
	content: "";
	display: block;
	position: absolute;
	width: 29px;
	height: 16px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%);
	background-image: url(/anniv_30th/assets/img/icon_arrows.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 0;
}



footer {
	margin-top: 144px;
	position: relative;
	z-index: 0;
	background-color: var(--main_kf_blue_pale);
	
	/*nest-start*/
	&::after{
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: -75px;
	left: 0;
	width: 100%;
	height: 220px;
	background-color: var(--main_kf_blue_pale);
	transform: skewY(-5deg) scale(-1, 1);
	}
	
	&>.inner {
		min-height: 280px;
		width: 100%;
		margin: 0 auto;
		padding: 0 160px 0 0;
		position: relative;
		z-index: 10;
		overflow: hidden;
	}
	
	p.copy {
	font: var(--main_en_cond_light);
	font-size: 1.4rem;
	line-height: 1;
	color: #222;
	margin-top: 12px;
	text-align: right;
	padding-right: 16px;
}
	
	
/*nest-end*/
}

/*footer p.site_id(pc)*/

footer p.site_id {
	font: var(--main_en_cond_reg);
	font-size: 4.8rem;
	line-height: 0.9;
	text-transform: uppercase;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 0;
	/*nest-start*/
	
	&::before,
	&::after{
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	width: 140px;
	height: 350px;
	transform: skewX(-45deg);
	background-color: #555;
	right: 0;
	}
	
	&::before {
		background-color: var(--main_kf_blue);
		right:850px;
		top: 18px;
	}
	
	&::after {
		background-color: var(--main_bk);
		right:800px;
		top: 140px;		
	}
	
	&>a{
	width: 750px;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	}
	
	&>a strong,
	&>a>span{
	display: block;
	}
	
	&>a>span{
	width: 350px;
	text-align: right;
	padding-top: 6px;
	margin-right: 16px;
	}
	
	&>a strong {
		width: 320px;
	}
	
	&>a>span>span {
		color: var(--main_kf_blue);
	}
	
	
	
/*nest-end*/
}

/*===== /footer  =======*/


/*===== 2nd directry base(pc) =======*/

#page_ttl_mini {
		width: 980px;
		margin: 0 auto;
		position: fixed;
		left: 50%;
		z-index: 150;
		text-align: center;
		margin-left: calc((980px / 2) * -1);
	padding-top: 24px;
		/*nest-start*/
		&>p{
		display: inline-block;
		text-align: center;
		font: var(--main_en_cond_reg);
		font-size: 1.8rem;
		line-height: 1;
		}
		
		&>p>a {
		display: block;
		color: var(--main_kf_gold);
		padding: 0.5em 1.5em 0.3em 1.5em;
		background-color: transparent;
		border-radius: 16px;
		transition: 0.3s;
		}
		/*nest-end*/
}

header.on+#page_ttl_mini {
		&>p>a{
		background-color: #fafafa;
		}
		
		&>p>a:hover {
			background-color: var(--main_kf_gold);
			color: #fff;
		}
}



/*===== /2nd directry base(pc) =======*/

/*==== Responsive(pc) ====*/


/*==== Responsive(sp) ====*/

@media (hover: none) {
  .btn:hover {
    background: inherit !important;
    color: inherit !important;
    transform: none !important;
  }
}

@media screen and (max-width: 768px) {
/*mq-start*/
/*========================*/
	.pcv {
	display: none;
	}
	.spv {
	display: block;
	}
	
	
body:not(#home) main{
		/*nest-start*/
		&::after {
		width: 100%;
		height: 70vw;
		transform: skewY(-5deg);
		top: -10vw;
		}
		/*nest-end*/
}

	



	
/*===== header(sp)  =======*/


header {
	/*nest-start*/
	& > .inner{
	width: 100%;
	padding: 1vw 0vw 0 1vw;
	height: 17vw;
	}
	
	ul.list_sns {
	display: none;
	}
	
	div.inner_right {
	right: 3vw;
	top: 2vw;
	}
	
	/*menu btn(sp)*/
	#menu_btn {
		display: block;
		font-size: 2.813vw;
	}
	
	#menu_btn>span.icon {
		width: 10vw;
		height: 10vw;
		border-radius: 5vw;
		margin-bottom: 0.5vw;
	}
	
	#menu_btn>span.icon::before,
	#menu_btn>span.icon::after {
	width: 5vw;
	height: 0.7vw;
	transform: translate(-50%,-50%);
	transition: 0.3s;
	}
	
	#menu_btn>span.icon::before {
		margin-top: -1vw;
	}
	
	#menu_btn>span.icon::after{
		margin-top: 1vw;
	}
	
	/*on*/
	/*blue*/
	#menu_btn.open>span.icon::before {
		margin-top: -1vw;
		transform: translate(-50%,0.6vw) skewY(35deg);
	}
	
	/*black*/
	#menu_btn.open>span.icon::after{
		transform: translate(-50%,-1.4vw) skewY(-35deg);
	}
	
	/*nest-end*/
}
	
#site_id{
	width: 60vw;
	font-size: 4.063vw;
	line-height: 1.05;
	/*nest-start*/
	
	& strong {
		width: 29vw;
		margin-right: 0vw;
	}
	
	& a > span{
		top: 0.5vw;
	}
		
	/*nest-end*/
	
}


/*===== /header(sp)  =======*/


#box_home_lead ul.list_sns {
	display: flex;
}

/*===== #nav_floating(sp)  =======*/
#nav_floating {
top: 0;
padding: 15vw 0 0vw 4vw;
left: 0;
background-color: var(--main_kf_blue_pale);
z-index: 50;
width: 100%;
mix-blend-mode: normal;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: none;


/*nest-start*/

& >span{
display: none;
}

&::before,
&::after {
	content: none;
}

& ul{
font-size: 6.5vw;
text-align: left;
}

& li {
	margin-top: 0.5em;
	white-space: nowrap;
}
/*nest-end*/

}

#nav_floating::after{
content: "";
display: block;
width: 100%;
height: 30vw;
position: absolute;
bottom: -14vw;
left: 0;
z-index: -1;
background-color: var(--main_kf_blue_pale);
transform: skewY(-15deg);
}

#nav_floating:hover::after {
transform: skewY(-15deg);
}

/*===== /#nav_floating(sp)  =======*/



/*===== footer(sp)  =======*/

p#page_top_btn {
	top: 92svh;
}


p#page_top_btn>a {
	width: 15vw;
	height: 15vw;
	border-radius: 7.5vw;
	right: 5vw;
	top: -5vw;
	opacity: 0;
}
p#page_top_btn>a::before {
	width: 8.2vw;
	height: 4vw;
	transform: translate(-50%, -50%);
	background-position: 101.5% 0;
}

p#page_top_btn.over-footer {
	top: auto;
	position: relative;
	transition: 0.3s;
}

p#page_top_btn.over-footer>a {
	top: -10vw;
	transition: none;
}

footer {
	margin-top: 5vw;
/*nest-start*/
	&::after{
	top: -10vw;
	left: 0;
	width: 100%;
	height: 15vw;
	background-color: var(--main_kf_blue_pale);
	transform: skewY(-5deg) scale(-1, 1);
	}
	
	&>.inner {
		min-height: 90vw;
		padding: 0 0 0 0;
	}
	
	p.copy {
	font-size: 4.375vw;
	margin-top: 3vw;
	text-align: right;
	padding-right: 8vw;
	line-height: 1.3;
}
	
/*nest-end*/
}

/*footer p.site_id(sp)*/
footer p.site_id {
	font-size: 8.75vw;
	line-height: 0.9;
	width: 100%;
	margin:  0;
	padding-right: 2vw;
	/*nest-start*/
	
	&>a{
	width: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: normal;
	justify-content: flex-start;
	align-items: center;
		flex-direction: row-reverse;

	}
	
	&>a>span{
	width: 100%;
	text-align: right;
	padding-top: 2vw;
	margin-right: 7vw;
	}
	
	&>a strong {
		width: 70vw;
	}
	
	&::before,
	&::after{
	width: 21vw;
	height: 45vw;
		top: auto;
	}
	/*blue*/
	&::before {
		right:84vw;
		bottom: -48vw;
	}
	
	/*black*/
	&::after {
		right:90vw;
		bottom: -29vw;
	}
	
	/*nest-end*/

}


/*===== 2nd directry base(sp) =======*/

#page_ttl_mini {
		width: 92vw;
		position: fixed;
		z-index: 20;
		margin-left: calc((92vw / 2) * -1);
	margin-top: 12vw;
		/*nest-start*/
		&>p{
		font-size: 3.75vw;
		}
		
		&>p>a {
		border-radius: 5vw;
		}
		/*nest-end*/
}

header.on+#nav_floating+#page_ttl_mini {
		&>p>a{
		background-color: #fafafa;
		}
		
		&>p>a:hover {
			background-color: var(--main_kf_gold);
			color: #fff;
		}
}


/*========================*/
/*mq-end*/
}