@charset "UTF-8";

body{	position: relative;	}


/* ================================================================================
title
================================================================================ */
@media print, screen
{

#title
{
	scroll-margin-top: var(--headerH);
}
#title > .inner
{
	display: flex;	flex-wrap: wrap;	justify-content: space-between;
	width: 100%;
	max-width: var(--pageW);

	padding: 65px var(--pageP) 30px;
	margin: 0 auto;
}

#title h2
{
	width: fit-content;
	padding: 0.5em 2em;
	background-color: var(--Cgray0);
	border-radius: 2em;
	color: white;
	font-size: 21px;
	font-weight: bold;
	letter-spacing: 0.01em;
}

}
@media screen and (max-width: 767px)
{

#title > .inner
{
	display: block;
	padding: 10vw var(--pageP);
}
#title h2
{
	margin: 0 auto;
	font-size: 4vw;
	line-height: 1.5;
	text-align: center;
}

}


/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV
{
	position: relative;
	scroll-margin-top: var(--headerH);
}

#KV .obi
{
	z-index: 1;
	position: absolute;
	top: 20px;	left: 0;

	max-width: calc((100% - var(--pageW))/2 + var(--pageW) * 0.8);
	width: 80%;	height: 335px;

	background-color: var(--Cgray2);
}

.story02 #KV .obi{	height: 410px;	}


#KV .inner
{
	z-index: 10;
	position: relative;
	width: 100%;
	max-width: var(--pageW);

	padding: 0 var(--pageP);
	margin: 0 auto;
}

#KV .titleArea
{
	z-index: 20;
	position: relative;
	padding: 0 0 0 20px;
}

#KV .storyNo
{
	display: flex;	justify-content: center;	align-items: center;
	width: 160px;	height: 40px;
	background-color: var(--Cgreen0);
	margin: 0 0 30px calc(var(--pageP) * -0.5);
}
#KV .storyNo p
{
	color: white;
	font-size: 28px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.05em;
}

#KV .year
{
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
}

#KV h1
{
	margin: 0 0 340px;
	font-size: 60px;
	line-height: 1.3;
}

.story02 #KV h1{	margin: 0 0 260px;	}
.story04 #KV h1{	margin: 0 0 450px;	}


#KV .text_1
{
	margin: 0 0 20px;
	font-size: 36px;
	line-height: 1.8;
}
#KV .text_1 .green{	color: var(--Cgreen0);	}
#KV .text_2
{
	font-size: 18px;
	line-height: 1.5;
}

#KV .image
{
	z-index: 15;
	position: absolute;
	top: 160px;	right: 10%;
	width: 700px;
}

.story02 #KV .image{	top: 190px;	}
.story03 #KV .image{	top: 200px;	}



}
@media screen and (max-width: 767px)
{

#KV .obi
{
	top: 7vw;
	max-width: 100%;
	width: 100%;	height: 80vw;
}
#KV .titleArea
{
	padding: 0 0 0 5vw;
}

#KV .storyNo
{
	width: 45vw;
	margin: 0 0 6vw -5vw;
}

#KV .storyNo
{
	width: 45vw;	height: 11vw;
	margin: 0 0 5vw -5vw;
}
#KV .storyNo p{	font-size: 8vw;	}

#KV .year
{
	margin: 0 0 7vw;
	font-size: 4.5vw;
}

#KV h1
{
	margin: 0 0 67vw;
	font-size: 7.2vw;
	line-height: 1.4;
}
.story02 #KV h1{	margin: 0 0 57vw;	}
.story04 #KV h1{	margin: 0 0 64vw;	}

#KV .text_1
{
	margin: 0 0 2vw;
	font-size: 6.5vw;
	line-height: 1.5;
}
#KV .text_2
{
	font-size: 4vw;
	line-height: 1.8;
}

#KV .image
{
	top: 57vw;	right: 5vw;
	width: 80vw;
}
.story02 #KV .image{	top: 60vw;	}
.story03 #KV .image{	top: 55vw;	}
.story04 #KV .image{	top: 40vw;	}

}

/* ================================================================================
history
================================================================================ */
@media print, screen
{

#history
{
	scroll-margin-top: var(--headerH);
}
#history > .inner
{
	width: 100%;
	max-width: var(--pageW);

	padding: 70px var(--pageP) 80px;
	margin: 0 auto;
}

#history .boxes
{
	scroll-margin-top: var(--headerH);

	display: flex;	flex-wrap: wrap;	justify-content: space-between;
	padding: 0 10% 0 0;
}
#history .box:nth-child(1){	width: 65%;	}
#history .box:nth-child(2){	width: 33%;	padding: 150px 0 0;	}

#history h2
{
	position: relative;
	padding: 80px 0 10px 20px;

	border-left: 1px solid var(--Cgray1);

	background-image : linear-gradient(to right, var(--Cgreen0) 2px, transparent 2px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;

	color: var(--Cgray0);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;

	transition: var(--T05);
}
#history h2::after
{
	position: absolute;
	bottom: -5px;	left: -5px;
	content: "";
	display: block;
	width: 10px;	height: 10px;

	background-color: white;
	border: 2px solid var(--Cgreen0);
	border-radius: 50%;
}
#history .boxes.step01 h2{	border-left: none;	}

#history .text_1
{
	padding: 20px 20px 70px 20px;

	border-left: 1px solid var(--Cgray1);

	font-size: 16px;
	line-height: 1.8;
	text-align: justify;
}
#history .boxes:not(:last-child) .text_1{	height: 100%;	}
#history .text_1 .note{	font-size: 0.9em;	}

#history .text_2
{
	width: fit-content;
	padding: 10px;
	margin: 0 auto;

	font-size: 14px;
	line-height: 1.5;
}
#history .text_2:not(:last-child){	margin: 0 auto 10px;	}

#history a
{
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
#history a:hover{	text-decoration: none;	}


#history .IV h2{	color: var(--Cgray1);	}
#history .IV.inview h2{	color: var(--Cgray0);	}
#history .IV .text_1{	display: none;	}
#history .IV .box:nth-child(2){	display: none;	}

}
@media screen and (max-width: 767px)
{

#history > .inner{	padding: 0 var(--pageP);	}
#history .boxes{	padding: 0;	}
#history .box:nth-child(1){	width: 100%;	}
#history .box:nth-child(2)
{
	width: 100%;
	padding: 0 5vw 10vw;
	border-left: 1px solid var(--Cgray1);
}

#history h2
{
	padding: 15vw 0 2vw 5vw;
	font-size: 6vw;
}
#history h2::after
{
	bottom: -1.25vw;	left: -1.52vw;
	width: 2.5vw;	height: 2.5vw;
}
#history .boxes.step01 h2{	border-left: none;	}

#history .text_1
{
	padding: 5vw 5vw 10vw 5vw;
	font-size: 4vw;
}
#history .text_2
{
	padding: 2vw 0 0;
	margin: 0 auto;
	font-size: 3.5vw;
}
#history .text_2:not(:last-child){	margin: 0 auto 5vw;	}

}


/* ================================================================================
column
================================================================================ */
@media print, screen
{

#column
{
	scroll-margin-top: var(--headerH);
}
#column > .inner
{
	width: 100%;
	max-width: var(--pageW);

	padding: 0 var(--pageP) 80px;
	margin: 0 auto;
}

#column .box
{
	scroll-margin-top: var(--headerH);
	padding: 0 10% 0 0;
}
#column h2
{
	position: relative;
	padding: 0.5em 0 0.5em 3em;

	border: 1px solid var(--Cgreen0);

	color: var(--Cgray0);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;

	transition: var(--T05);
}
#column h2::before
{
	position: absolute;
	bottom: -1px;	left: -1px;
	
	display: block;
	width: 58px;	height: 71px;
}

.story01 #column h2::before{	content: url("../img/story01/column_number.svg");	}
.story02 #column h2::before{	content: url("../img/story02/column_number.svg");	}
.story03 #column h2::before{	content: url("../img/story03/column_number.svg");	}
.story04 #column h2::before{	content: url("../img/story04/column_number.svg");	}
.story05 #column h2::before{	content: url("../img/story05/column_number.svg");	}


#column .text_1
{
	position: relative;
	padding: 30px 50px 40px 70px;

	border: 1px solid var(--Cgreen0);
	border-top: none;

	font-size: 16px;
	line-height: 1.8;
	text-align: justify;
}
#column .text_1 .note{	font-size: 0.9em;	}

#column .text_1::before
{
	position: absolute;
	bottom: -1px;	right: -1px;
	content: "";
	display: block;
	width: 0;	height: 0;

	border-style: solid;
	border-width: 0 0 1.4em 1.4em;
	border-color: transparent transparent white transparent;
}
#column .text_1::after
{
	position: absolute;
	bottom: -1px;	right: -1px;
	content: "";
	display: block;
	width: 0;	height: 0;

	border-style: solid;
	border-width: 1.4em 1.4em 0 0;
	border-color: var(--Cgreen0) transparent transparent transparent;
}

#column .text_1{	display: none;	}

}
@media screen and (max-width: 767px)
{

#column > .inner{	padding: 15vw var(--pageP);	}
#column .box{	padding: 0;	}

#column h2{	font-size: 6vw;	}
#column h2::before{	width: 15vw;	height: calc(15vw / 58 * 71);	}

#column .text_1
{
	padding: 5vw 5vw 10vw 5vw;
	font-size: 4vw;
}

}


/* ================================================================================
next
================================================================================ */
@media print, screen
{

#next{	background-color: var(--Cgray2);	}
#next > .inner
{
	display: flex;	align-items: center;
	gap: 40px;

	width: 100%;	height: 220px;
	max-width: var(--pageW);

	padding: 40px var(--pageP);
	margin: 0 auto;
}

#next .text
{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}
#next .buttonA
{
	flex-shrink: 0;
	width: 235px;	height: 64px;
}
#next .buttonA a{	padding: 0 20px 0 30px;	}
#next .buttonA p
{
	font-size: 40px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0;
}

}
@media screen and (max-width: 767px)
{

#next > .inner
{
	display: block;
	height: auto;
	padding: 15vw var(--pageP) 10vw;
}

#next .text
{
	margin: 0 0 5vw;
	font-size: 4vw;
	text-align: center;
}
#next .buttonA
{
	width: 45vw;	height: 12vw;
	margin: 0 auto;
}
#next .buttonA a{	padding: 0 3vw 0 4vw;	}
#next .buttonA p{	font-size: 9vw;	}

}



/* ================================================================================
years
================================================================================ */
@media print, screen
{

#years
{
	z-index: 100;
	position: absolute;
	top: 0;	right: 0;
	width: fit-content;	height: 100%;

	margin: 0;
}
#years > .inner
{
	position: sticky;
	top: 0;

	width: 100%;
	padding: calc(var(--headerH) + 60px) 0 580px;
	margin: 0 auto;
}

#years .stepBox
{
	width: fit-content;
	padding: calc( var(--pageP) * 0.7) 0;
	margin: 0 0 0 auto;

	background-color: rgba(255,255,255,0.8);
	box-shadow: var(--shadow0);
	border-radius: 8px 0 0 8px;
}

#years h2
{
	margin: 0 0 10px;
	font-size: 28px;
	text-align: center;
}

#years li
{
	padding: 0 calc( var(--pageP) * 0.7);
	transition: var(--T03);
}
#years li:hover{	background-color: var(--Cgray0);	}

#years li > .inner
{
	display: flex;	align-items: center;
	height: 50px;
	gap: 8px;
	padding: 0 10px;

	transition: var(--T03);
}
#years li:not(:last-child) > .inner{	border-bottom: 1px solid var(--Cgray2);	}

#years li > .inner::before
{
	content: "";
	width: 8px;	height: 8px;
	background-color: var(--Cgray0);
	border-radius: 50%;
	transition: var(--T03);
}
#years li:not(.open) > .inner::before{	opacity: 0.3;	}
#years li:hover > .inner::before
{
	background-color: white;
	opacity: 1;
}

#years li hr
{
	width: 18px;
	background-color: var(--Cgray0);
	transition: var(--T03);
}
#years li:not(.open) hr{	opacity: 0.3;	}
#years li:hover hr
{
	background-color: white;
	opacity: 1;
}

#years p:nth-child(1)
{
	min-width: 80px;
	font-size: 22px;
	font-weight: 700;
	transition: var(--T03);
}
#years p:nth-child(3)
{
	font-size: 16px;
	font-weight: 700;
	transition: var(--T03);
}
#years li:not(.open) p:nth-child(1),
#years li:not(.open) p:nth-child(3)
{	opacity: 0.3;	}

#years li:hover p:nth-child(1),
#years li:hover p:nth-child(3)
{
	color: white;
	opacity: 1;
}


}
@media screen and (max-width: 767px)
{

#years
{
	position: static;
	width: 100%;
	background-color: var(--Cgray2);
}

#years > .inner
{
	position: static;
	padding: 5vw var(--pageP) 15vw;
}

#years .stepBox
{
	width: 100%;
	padding: 10vw 0;
	margin: 0;
	border-radius: 3vw;
}

#years h2
{
	margin: 0 0 5vw;
	font-size: 8vw;
}
#years li{	padding: 0 10vw;	}
#years li > .inner
{
	height: 12vw;
	gap: 3vw;
	padding: 0 4.5vw;
}
#years li > .inner::before{	width: 1.8vw;	height: 1.8vw;	}
#years li hr{	width: 5vw;	}

#years p:nth-child(1)
{
	min-width: 23vw;
	font-size: 6vw;
}
#years p:nth-child(3){	font-size: 4vw;	}


}


/* ======================================== end ======================================== */