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


#consept,
#mission,
#vision,
#value,
#s2031 {
	/*display: none !important;*/
}


/* ----------------------------------------------
	フォント指定
------------------------------------------------- */
/*- 標準フォント -*/
#consept dl dt span,
#mission .mission_in h3 span,
#vision .vision_in h3 span,
#value .value_in h3 span,
#history .history_in h3 span {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-style: normal;
}

/*-
	gooogleフォント
	私たちのMVV
		CONCEPT
	HISTORY
		年
	HISTORY（2031）
		年
	選果機の生い立ち
		年
------------------------------------------------- */
#consept h3,
#consept dl dt,
#history .history_in > h3,
#history .history_in #shibuya #s2031 h3 {
	/*font-family: "Vollkorn", serif;*/
	font-family: "Sorts Mill Goudy", serif;
	/*font-weight: bold;*/
	font-style: italic;
}
#history .history_in #shibuya #chapter dl dt.years,
#history .history_in #shibuya #s2031 dl dt.years,
#history .history_in #BackStory dl dt.years {
	font-family: "Vollkorn", serif;
	/*font-weight: bold;*/
	font-style: italic;
}
#history .history_in #shibuya #chapter dl dt.years,
#history .history_in #shibuya #s2031 h3,
#history .history_in #shibuya #s2031 dl dt.years,
#history .history_in #BackStory dl dt.years {
	font-weight: 400;
}


/*-
	gooogleフォント
	Mission
	Vision
	Value
------------------------------------------------- */
#mission .mission_in h3,
#vision .vision_in h3,
#value .value_in h3 {
	/*font-family: "Alice", serif;*/
	font-family: "Sorts Mill Goudy", serif;
	font-style: italic;
}


/* ----------------------------------------------
	CONCEPT 創造と挑戦
------------------------------------------------- */
#consept {
	background-image: url("../images/img_concept.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}
#consept .stageWrap {
	display: grid;
	grid-template-rows: 1fr auto auto 2fr;
	place-items: center;
	gap: 20px;
}
#consept .stageWrap::before,
#consept .stageWrap::after {
	content: '';
}
#consept h3 {
	background-image: url("../../images/brackets_wh_hidari-ue.svg"), url("../../images/brackets_wh_migi-ue.svg"), url("../../images/brackets_wh_migi-shita.svg"), url("../../images/brackets_wh_hidari-shita.svg");
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
	/*mix-blend-mode: overlay;*/
	font-weight: bold;
	text-align: center;
	display: grid;
	place-items: center;
	margin: 0 auto 50px;
	background-repeat: no-repeat;
	background-position: left top, right top, right bottom, left bottom;

	font-size: 30px;
	height: 3em;
	width: auto;
	background-size: 50px;
}

#consept dl {
	margin: auto;
	display: grid;
	gap: 20px;
}
#consept dl dt {
	font-size: 30px;
	text-align: center;
}
#consept dl dt span {
	font-size: 14px;
	display: block;
	line-height: 1em;
	font-weight: normal;
	margin-top: 15px;
}


/* ----------------------------------------------
	Mission 社会的使命・目的
	Vision  将来ありたい姿
	Value   価値基準・行動指針
------------------------------------------------- */
#mission .stageWrap,
#vision .stageWrap,
#value .stageWrap {
	height: 100%;
	display: grid;
}
#mission .stageWrap::before,
#vision .stageWrap::before,
#value .stageWrap::before {
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#mission .stageWrap::before {
	background-image: url("../images/img_mvv01.jpg");
}
#vision .stageWrap::before {
	background-image: url("../images/img_mvv02.jpg");
}
#value .stageWrap::before {
	background-image: url("../images/img_mvv03.jpg");
}
#mission .mission_in,
#vision .vision_in,
#value .value_in {
	display: grid;
}
#mission .mission_in h3,
#vision .vision_in h3,
#value .value_in h3 {
	display: grid;
	grid-template-rows: 1fr auto auto;
	font-weight: bold;
	color: #016f9c;
}
#mission .mission_in h3 span,
#vision .vision_in h3 span,
#value .value_in h3 span {
	display: block;
	line-height: 1em;
}
#mission .mission_in dl dt,
#vision .vision_in dl dt,
#value .value_in dl dt {
	font-weight: bold;
	font-size: 20px;
}


/* ----------------------------------------------
	HISTORY シブヤの歩み
------------------------------------------------- */




/*-
	PC版（821px以上）ここから
------------------------------------------------- */
@media screen and (min-width:821px), print{
	
	/* ----------------------------------------------
		横スクロール設定
	------------------------------------------------- */
	#l-root {
		overflow: hidden;
		opacity: 1;
		/*opacity: 0;*/
		position: relative;
	}
	#l-root #l-scroll {
		width: 100%;
		position: fixed;
		top: 60px;
		left: 0;
		z-index: 1;
	}
	#backcolor {
		content: '';
		display: block;
		position: absolute;
		height: calc(100vh - 60px);
		width: 100vw;
		top: 0;
		left: 0;
		background-image: linear-gradient(150deg, rgba(231, 247, 246, 1), rgba(185, 220, 226, 1));
		z-index: -10;
	}
	#l-root #l-scroll #l-scroll-body {
		display: flex;
		flex-direction: row;
/*		width: calc(400vw + 50px + 400px + 2400px + 1500px + 1000px + 1000px + 1200px + 1000px + 100vw);*/
		width: calc(400vw + 50px + 2200px + 950px + 950px + 1300px + 1000px + 100vw);
		/*width: calc(50px + 400px + 2400px + 1500px + 1000px + 1000px + 1200px + 1000px);*/
		/*400px 2400px 1500px 1000px 1000px 1200px 1000px*/
	}
	
	
	/* ----------------------------------------------
		共通設定
	------------------------------------------------- */
	.stageWrap {
		padding: 0;
	}
	#consept,
	#mission,
	#vision,
	#value {
		height: calc(100vh - 60px);
		width: 100vw;
	}
	
	#consept,
	#mission,
	#vision,
	#value{ /*display: none;*/ }
	
	/*#consept{  }
	#mission{ background-color: #F00; }
	#vision{ background-color: #0F0; }
	#value{ background-color: #00F; }*/
	

	/* ----------------------------------------------
		CONCEPT 創造と挑戦
	------------------------------------------------- */
	#consept .stageWrap {
		height: calc(100vh - 60px);
	}
	#consept h3 {
		width: 15em;
	}
	
	#consept dl {
		width: 700px;
	}
	
	
	/* ----------------------------------------------
		Mission 社会的使命・目的
		Vision  将来ありたい姿
		Value   価値基準・行動指針
	------------------------------------------------- */
	#mission,
	#vision,
	#value {
		background: linear-gradient(180deg, #fff 0%, #fff 50%, #dbf3ff 50%, #dbf3ff 100%);
	}
	#mission .stageWrap,
	#vision .stageWrap,
	#value .stageWrap {
		grid-template-columns: 450px 1fr;
		gap: 50px;
	}
	#mission .mission_in,
	#vision .vision_in,
	#value .value_in {
		grid-template-rows: 1fr 1fr;
		gap: 50px;
	}
	#mission .mission_in h3,
	#vision .vision_in h3,
	#value .value_in h3 {
		font-size: 100px;
	}
	#mission .mission_in h3 span,
	#vision .vision_in h3 span,
	#value .value_in h3 span {
		font-size: 20px;
	}
	#mission .mission_in h3::before,
	#vision .vision_in h3::before,
	#value .value_in h3::before {
		content: '';
		display: block;
	}
	
	
	/* ----------------------------------------------
		HISTORY シブヤの歩み
	------------------------------------------------- */
	#history {
		height: calc(100vh - 60px);
		position: relative;
	}
	#history .stageWrap,
	#history .history_in {
		height: 100%;
		width: auto;
	}
	#history .stageWrap{
		display: grid;
		grid-template-rows: 1fr auto auto 1fr;
		padding-left: 50px;
	}
	#history .stageWrap::before,
	#history .stageWrap::after {
		content: '';
		display: block;
	}
	#history .history_in {
		display: grid;
		gap: 20px;
	}
	#history .history_in#in_shibuya {
		grid-template-rows: auto 1fr auto 1fr;
	}
	#history .history_in#in_BackStory {
		grid-template-rows: 1fr auto auto 1fr;
	}
	#history .history_in::before,
	#history .history_in::after {
		content: '';
		display: block;
	}
	#history .history_in > h3       {order: 1;}
	#history .history_in::before    {order: 2;}
	#history .history_in #shibuya   {order: 3;}
	#history .history_in::after     {order: 4;}
	#history .history_in > h3 {
		font-size: 36px;
		font-weight: bold;
		line-height: 1em;
		text-align: center;
		margin-bottom: 50px;
		color: #016f9c;
		/*width: 100vw;*/
		width: 5em;
		position: relative;
		left: 0;
	}
	#history .history_in h3 span {
		font-size: 14px;
		display: block;
		line-height: 1em;display: grid;
		margin-top: 15px;
		color: #4A4848;
	}
	#history .history_in #shibuya {}
	#history .history_in #shibuya #chapter {
		display: grid;
/*		grid-template-columns: 400px 2400px 1500px 1000px 1000px 1200px 1000px;*/
		grid-template-columns: 2200px 950px 950px 1300px 1000px;
		position: relative;
	}
	#history .history_in #shibuya #chapter::before {
		content: '';
		display: block;
	}
	#history .history_in #shibuya #chapter dl {
		position: relative;
		padding-left: 450px;
	}
	#history .history_in #shibuya #chapter dl dt.years {
		font-size: 80px;
		/*font-weight: bold;*/
		color: #016f9c;
	}
	#history .history_in #shibuya #chapter dl dd.story {
		width: 400px;
	}
	#history .history_in #shibuya #chapter dl dd.story h4 {
		font-size: 20px;
		font-weight: bold;
		color: #016f9c;
	}
	#history .history_in #shibuya #chapter dl dd.image {
		position: absolute;
		top: calc(50% - 200px);
		left: 0;
	}
	#history .history_in #shibuya #chapter dl dd.image img {
		width: 400px;
		height: 600px;
	}
	#history .history_in #shibuya #chapter .line {
		width: 100%;
		position: absolute;
		top: 100px;
		/*top: calc(50% - 20px);*/
		
		left: 0;
		z-index: -1;
		display: flex;
		gap: 10px;
	}
	#history .history_in #shibuya #chapter .line .short {
		background-color: #016f9c;
		width: 10px;
		height: 10px;
	}
	#history .history_in #shibuya #chapter .line .long {
		background-color: #016f9c;
		width: 100%;
		height: 10px;
	}
	
	#history .history_in #shibuya #s2031 {
		position: absolute;
		right: -100vw;
		height: calc(100vh - 60px);
		top: 0;
		/*background-color: #ccc;*/
		background-image: url("../images/img_his-2031.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		width: 100vw;
		display: grid;
		grid-template-rows: 1fr auto auto 2fr;
		gap: 20px;
	}
	#history .history_in #shibuya #s2031::before,
	#history .history_in #shibuya #s2031::after {
		content: '';
		display: block;
	}
	#history .history_in #shibuya #s2031 h3 {
		font-size: 36px;
		font-weight: bold;
		line-height: 1em;
		text-align: center;
		margin-bottom: 50px;
		color: #fff;
		width: 100vw;
	}
	#history .history_in #shibuya #s2031 h3 span {
		color: #fff;
	}
	#history .history_in #shibuya #s2031 dl {
		display: grid;
		padding: 0;
		place-items: center;
		color: #fff;
	}
	#history .history_in #shibuya #s2031 dl dt.years {
		font-size: 80px;
		/*font-weight: bold;*/
	}
	#history .history_in #shibuya #s2031 dl dd.story {
		width: 700px;
	}
	#history .history_in #shibuya #s2031 dl dd.story h4 {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 50px;
		display: grid;
		grid-template-columns: 1fr repeat(2, auto) 1fr;
		gap: 1em;
	}
	#history .history_in #shibuya #s2031 dl dd.story h4::before,
	#history .history_in #shibuya #s2031 dl dd.story h4::after {
		content: '';
	}
	
	
	#history .history_in > h4 {
		font-size: 18px;
		font-weight: bold;
		line-height: 1em;
		margin-bottom: 0.6em;
	}
	#history .history_in #BackStory {
		display: grid;
/*		grid-template-columns: 100px 1200px 500px 500px 960px 500px 3300px 1fr;*/
		grid-template-columns: 100px repeat(5, 350px) 3200px 1fr;
		position: relative;
	}
	#history .history_in #BackStory::before {
		content: '';
		display: block;
	}
	#history .history_in #BackStory dl dt.years {
		font-size: 40px;
		/*font-weight: bold;*/
		color: #00ac97;
	}
	#history .history_in #BackStory dl dd.story {
/*		width: 400px;*/
		width: 250px;
		color: #00ac97;
	}
	#history .history_in #BackStory .line {
		width: 100%;
		position: absolute;
		top: 50px;
		left: 0;
		z-index: -1;
		display: flex;
		gap: 6px;
	}
	#history .history_in #BackStory .line .short {
		background-color: #00ac97;
		width: 6px;
		height: 6px;
	}
	#history .history_in #BackStory .line .long {
		background-color: #00ac97;
		width: 100%;
		height: 6px;
	}
	
	
	#breadcrumbs,
	#footer {
		display: none;
	}
}
/*-
	SP版（820px以下）ここから
------------------------------------------------- */
@media screen and (max-width: 820px) {
	

	/* ----------------------------------------------
		共通設定
	------------------------------------------------- */
	.stageWrap {
		padding: 0;
	}
	#consept,
	#mission,
	#vision,
	#value {
		width: 100vw;
	}
	
	
	/* ----------------------------------------------
		CONCEPT 創造と挑戦
	------------------------------------------------- */
	#consept {
		height: calc(max(400px,100vh - 50px));
	}
	#consept .stageWrap {
		height: calc(100vh - 150px);
	}
	#consept h3 {
		width: 10em;
		background-size: 30px;
	}
	#consept dl {
		width: 100%;
	}
	
	
	/* ----------------------------------------------
		Mission 社会的使命・目的
		Vision  将来ありたい姿
		Value   価値基準・行動指針
	------------------------------------------------- */
	#mission,
	#vision,
	#value {
		background: linear-gradient(90deg, #fff 0%, #fff 50%, #dbf3ff 50%, #dbf3ff 100%);
	}
	#mission .stageWrap,
	#vision .stageWrap,
	#value .stageWrap {
		grid-template-rows: 200px 1fr;
	}
	#mission .stageWrap::before,
	#vision .stageWrap::before,
	#value .stageWrap::before {
		background-size: cover;
	}
	#mission .mission_in,
	#vision .vision_in,
	#value .value_in {
		grid-template-rows: auto 1fr;
		gap: 20px;
		padding: 0 10px;
	}
	#mission .mission_in h3,
	#vision .vision_in h3,
	#value .value_in h3 {
		font-size: 70px;
	}
	#mission .mission_in h3 span,
	#vision .vision_in h3 span,
	#value .value_in h3 span {
		font-size: 16px;
		text-indent: 1em;
	}
	#mission .mission_in dl dd,
	#vision .vision_in dl dd,
	#value .value_in dl dd {
		font-size: 16px;
	}
	
	
	
	/* ----------------------------------------------
		HISTORY シブヤの歩み
	------------------------------------------------- */
	#history {
		padding: 0;
	}
	#history .stageWrap {
		width: 100%;
	}
	#history #in_shibuya {
		background-image: linear-gradient(150deg, #e5f6f4, #b8dae0);
		padding: 50px 0;
	}
	#history .history_in > h3 {
		font-size: 36px;
		font-weight: bold;
		line-height: 1em;
		text-align: center;
		margin-bottom: 50px;
		color: #016f9c;
		width: 100vw;
	}
	#history .history_in h3 span {
		font-size: 14px;
		display: block;
		line-height: 1em;display: grid;
		margin-top: 15px;
		color: #4A4848;
	}
	#history .history_in #shibuya {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 50px;
		overflow: scroll;
		position: relative;
	}
	#history .history_in #shibuya #chapter {
		display: grid;
/*		grid-template-columns: repeat(6,100vw);*/
		grid-template-columns: repeat(4,100vw);
		gap: 50px;
		padding: 10px 0;
	}
	#history .history_in #shibuya #chapter dl {
		position: relative;
		z-index: 10;
	}
	#history .history_in #shibuya #chapter dl dt.years {
		font-size: 80px;
		line-height: 160px;
		color: #016f9c;
		padding-left: calc(50% + 10px);
	}
	#history .history_in #shibuya #chapter dl dd.story {
		width: calc(100vw - 40px);
		margin: auto;
	}
	#history .history_in #shibuya #chapter dl dd.story h4 {
		font-size: 20px;
		font-weight: bold;
		color: #016f9c;
		margin: 10px 0;
	}
	#history .history_in #shibuya #chapter dl dd.image {
		width: 50%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#history .history_in #shibuya #chapter dl dd.image img {
		width: 100%;
		height: 160px;
	}
	#history .history_in #shibuya #chapter .line {
/*		width: calc(600vw + 50px * 6);*/
		width: calc(400vw + 50px * 4);
		position: absolute;
		top: 125px;
		left: 0;
	}
	#history .history_in #shibuya #chapter .line .short {
		display: none;
	}
	#history .history_in #shibuya #chapter .line .long {
		background-color: #016f9c;
		width: 100%;
		height: 10px;
	}
	
	
	#history .history_in #shibuya #s2031 {
		/*background-color: #ccc;*/
		background-image: url("../images/img_his-2031.jpg");
		background-size: cover;
		
		width: 100vw;
		
		display: grid;
		grid-template-rows: 1fr auto auto 2fr;
		gap: 20px;
	}
	#history .history_in #shibuya #s2031::before,
	#history .history_in #shibuya #s2031::after {
		content: '';
		display: block;
	}
	#history .history_in #shibuya #s2031 h3 {
		display: none;
	}
	#history .history_in #shibuya #s2031 h3 span {
		color: #fff;
	}
	#history .history_in #shibuya #s2031 dl {
		display: grid;
		padding: 0;
		place-items: center;
		color: #fff;
	}
	#history .history_in #shibuya #s2031 dl dt.years {
		font-size: 80px;
		/*font-weight: bold;*/
	}
	#history .history_in #shibuya #s2031 dl dd.story {
		width: calc(100% - 40px);
	}
	#history .history_in #shibuya #s2031 dl dd.story h4 {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 50px;
		display: grid;
	}
	
	
	#history #in_BackStory {
		background-image: linear-gradient(150deg, #e5f6f4, #b8dae0);
		padding: 50px 0;
	}
	#history .history_in > h4 {
		font-size: 18px;
		font-weight: bold;
		line-height: 1em;
		margin-bottom: 0.6em;
		text-indent: 2em;
	}
	#history .history_in #BackStory {
		display: grid;
		grid-template-columns: repeat(7,100vw);
		gap: 50px;
		padding: 50px 0;
		overflow: scroll;
		position: relative;
	}
	#history .history_in #BackStory dl {
		padding: 0 10px 0 60px;
		z-index: 10;
	}
	#history .history_in #BackStory dl dt.years {
		font-size: 40px;
		/*font-weight: bold;*/
		color: #00ac97;
	}
	#history .history_in #BackStory dl dd.story {
		width: calc(100% - 20px);
		color: #00ac97;
	}
	#history .history_in #BackStory .line {
		width: calc(700vw + 50px * 6);
		position: absolute;
		top: 100px;
		left: 0;
		display: flex;
		gap: 6px;
	}
	#history .history_in #BackStory .line .short {
		background-color: #00ac97;
		width: 6px;
		height: 6px;
	}
	#history .history_in #BackStory .line .long {
		background-color: #00ac97;
		width: 100%;
		height: 6px;
	}
	
	
}