@charset "utf-8";


/* ------------------------------------------------------------ common */
body{ min-width: 1200px; margin: 0 auto; color: #4d4d4d; font-size: 13px; font-family: 'Noto-Sans-JP-Regular'; }
img{ max-width: initial; }
a,
a:visited,
a:link{ color: #4d4d4d; }
a:hover{ opacity: 0.8; }

.wrapper{ position: relative; }
.sticky{ }


.SP{ display: none; }
.object.SP{ display: none; }

.main-ttl{ position: absolute; left: 6%; top: 50%; translate: 0 -50%; }
.main-ttl .en-ttl{ padding: 0 0 15px; font-size: clamp(40px,3vw,80px); font-family: 'BigCaslon'; font-style: normal; }
.main-ttl .line{ padding-left: 13px; border-left: 5px solid #4d4d4d; }
.main-ttl .line h3{ padding: 0 0 5px; font-size: 16px; font-family: 'Noto-Sans-JP-Bold'; font-style: italic; }
.main-ttl .line p{ font-size: 10px; line-height: 180%; line-height: 180%; font-family: 'Noto-Sans-JP-Bold'; font-style: italic;  }

.slide-arrow{ z-index: 10; position: absolute; top: 30%; display: block; width: 15px; height: 30px; background: #130A8F; }
.next-arrow{ left: 68vw; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* animation */
.Report-bubble{ animation: bubbleScale 2s cubic-bezier(0.7, 0, 0.84, 0) 1s forwards; scale: 0.4; top: -14%; left: 50%; translate: -50% 0; width: auto; height: 140vh; }
@keyframes bubbleScale{
	0%{ scale: 0.4; }
	100%{ scale: 2; opacity: 0; }
}
@-webkit-keyframes bubbleScale{
	0%{ scale: 0.4; }
	100%{ scale: 2; opacity: 0; }
}


/* ------------------------------------------------------------ fix-border */
#fix-border{ position: relative; z-index: 600; }
#fix-border span{ position: fixed; background: #130A8F; }
.border-col{ width: 100%; height: 30px; }
.border-row{ width: 30px; height: 100%; }

.border-l{ transform: scale(1,0); transform-origin: left bottom; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%); }
.border-t{ transform: scale(0,1); transform-origin: left top; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 30%); }
.border-r{ transform: scale(1,0); transform-origin: right top; top: 0; right: 0; clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%); }
.border-b{ transform: scale(0,1); transform-origin: right bottom; bottom: 0; left: 0; clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 100%); }

/* animation */
.js-border span{ animation-duration: 0.8s; animation-timing-function: linear; animation-fill-mode: forwards; }
.js-border .border-l{ animation-name: border-l; }
.js-border .border-t{ animation-name: border-t; animation-delay: 0.8s; }
.js-border .border-r{ animation-name: border-r; animation-delay: 1.6s; }
.js-border .border-b{ animation-name: border-b; animation-delay: 2.4s; }

@keyframes border-l{
	0%{ transform: scale(1,0); }
	100%{ transform: scale(1,1); }
}
@keyframes border-t{
	0%{ transform: scale(0,1); }
	100%{ transform: scale(1,1); }
}
@keyframes border-r{
	0%{ transform: scale(1,0); }
	100%{ transform: scale(1,1); }
}
@keyframes border-b{
	0%{ transform: scale(0,1); }
	100%{ transform: scale(1,1); }
}


/* ------------------------------------------------------------ header */
header{ z-index: 900; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 40px 40px 40px 50px; }
header h1{ width: 115px; }
header h1 img{ width: 100%; height: auto; }

header nav{ display: flex; align-items: center; justify-content: flex-end; width: 800px; }
header nav.SP{ display: none; }
header nav a{ display: block; margin: 0 15px; font-size: 17px; font-family: 'BigCaslon'; font-style: italic; }
header nav a:nth-of-type(-n+3){ margin: 0 19px; }
header nav a:nth-of-type(4){ margin-right: 23px; }
header nav a:last-of-type{ margin-right: 0; }
header nav .sns{ width: 30px; height: auto; }
header nav .sns img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ aside */
aside{ z-index: 100; width: 65px; text-align: center; position: fixed; bottom: 5%; left: 50%; translate: -50% -50%; font-size: 18px; font-family: "Helvetica Neue" , Helvetica , Arial; font-weight: 700; font-style: italic; color: #4d4d4d; }
aside span{ display: block; width: 18px; height: 8px; margin: 5px auto 0; background: #4d4d4d; clip-path: polygon(0 0, 100% 0, 50% 100%); }


/* ------------------------------------------------------------ history */
#history{ padding: 0 0 150px; }

.history-list li{ display: flex; align-items: center; padding: 0 0 10px; }
.history-list li p{ font-family: 'Noto-Sans-JP-Medium'; }
.history-list li .grade{ padding: 0 80px 0 0; }


/* ------------------------------------------------------------ related */
#related{ padding: 0 0 150px; }

.slider-container{ width: calc(100% + (100vw - 100%) / 2); }
.slider-area h3{ padding: 0 0 20px; font-size: 40px; font-family: 'BigCaslon'; font-style: normal; }
.slider-list .slider{ display: flex; align-items: flex-start; }
.slider-list .box{ width: 415px!important; margin: 0 25px 0 0; }
.slider-list .box figure{ position: relative; }
.slider-list .box figure.new:before{ z-index: 10; position: absolute; content: "NEW"; rotate: -45deg; bottom: -6px; right: -29px; width: 90px; height: 45px; padding: 7px 0 0; text-align: center; background: #130A8F; clip-path: polygon(0 0, 100% 0, 50% 100%); font-family: "Helvetica Neue" , Helvetica , Arial; font-weight: 700; font-style: italic; color: #fff; }
.slider-list .box img{ width: 100%; height: auto; }

.slider-list .box .txt{ padding: 13px 0 0; }
.slider-list .box h4{ padding: 0 0 10px; font-size: 13px; line-height: 150%; }
.slider-list .box h4 strong{ padding: 10px 0 0; display: block; font-weight: 700; font-style: italic; font-size: 20px; font-family: "Helvetica Neue" , Helvetica , Arial; }
.slider-list .box h4 .no{ display: block; }
.slider-list .box h4 .characters{ font-size: 17px; }
.slider-list .box p{ font-size: 13px; line-height: 150%; }
.slider-list .box .date{ padding: 0 0 5px; }

.slider-list .box a figure{ position: relative; }
.slider-list .box a figure:after{ transition: opacity 0.8s; opacity: 0; position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.3); filter: blue; }
.slider-list .box a:hover figure:after{ transition: opacity 0.8s; opacity: 1; }


/* ------------------------------------------------------------ other-project */
#other-project{ padding: 50px 0 95px; }
#other-project .box h4 .no{ font-style: italic; font-family: 'Noto-Sans-JP-Bold'; }




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ common */
	body{  min-width: 100%; }

	.PC{ display: none; }
	.SP{ display: block; }
	.object.PC{ display: none; }
	.object.SP{ display: block; }
	
	.main-ttl{ position: initial; translate: 0; margin: 0 0 25px; padding-left: 15px; border-left: 5px solid #4d4d4d; }
	.main-ttl .en-ttl{ padding: 0 0 12px; font-size: 42px; }
	.main-ttl .line{ padding-left: 0; border-left: none; }
	.main-ttl .line h3{ padding: 0 0 10px; font-size: 17px; }
	.main-ttl .line p{ font-size: 10px; }

	.loadIn,
	.fadeIn{ opacity: 0; visibility: hidden; transition: 0.8s; translate: 0 100px; }
	.loadIn.on,
	.fadeIn.on{ opacity: 1; visibility: visible; translate: 0 0; }


/* ------------------------------------------------------------ fix-border */
	.border-col{ height: 15px; }
	.border-row{ width: 15px; }
		

/* ------------------------------------------------------------ header */
	header{ padding: 20px 3% 20px 6%; }
	header h1{ width: 20%; }
	
	header nav{ width: 79%; }
	header nav.PC{ display: none; }
	header nav.SP{ display: flex; }
	header nav a{ font-size: 12px; }
	header nav a:nth-of-type(4){ margin-right: 5px; }
	header nav a,
	header nav a:nth-of-type(-n+3){ margin: 0 5px; }
	header nav .sns{ width: 20px; height: auto; }


/* ------------------------------------------------------------ aside */
	aside{ font-size: 10px; }
	aside span{ width: 13px; height: 5px; }


/* ------------------------------------------------------------ history */
	#history{ padding: 0 0 30px; }

	.history-list li p{ font-size: 0.6em; }
	.history-list li .grade{ padding: 0 40px 0 0; }


/* ------------------------------------------------------------ related */
	#related{ padding: 0; }

	.slider-area h3{ padding: 0 0 15px; font-size: 24px; }

	.slider-list{ position: initial; flex-wrap: wrap; align-items: flex-start; translate: 0; padding-left: 0; }
	.slider-list .slider{ flex-wrap: wrap; }
	
	.slider-list .box{ width: calc(100% / 2 - 2%)!important; margin: 0 4% 5% 0; }
	.slider-list .box:nth-of-type(even){ margin-right: 0; }
	
	.slider-list .box figure.new:before{ bottom: -4px; right: -19px; width: 60px; height: 30px; padding: 6px 0 0; font-size: 11px; }
	
	.slider-list .box .txt{ padding: 5px 0 0; }
	.slider-list .box h4{ padding: 0 0 5px; font-size: 13px; }
	.slider-list .box .date{ padding: 0 0 4px; }
	.slider-list .box p{ font-size: 12px; line-height: 170%; }

	.slider-list .slider02 .box{ width: 79vw!important; margin: 0 3vw; }
	.slider-list .slider02 .next-arrow{ left: 81vw; }
	.slider-list .slider02 img{ width: 100%; height: auto; }
	

/* ------------------------------------------------------------ other-project */
	#other-project{ padding-top: 20px; }


	
}