@charset "utf-8";
@import "cmn_reset.css";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ---------------------------------------------------------

	株式会社 JECC 創業60周年
	Date: 2021.07.31

	01. 基礎設定
	02. 画面構成
	03. ヘッダー
	04. フッター
	05. コンテンツ

--------------------------------------------------------- */

/* ---------------------------------------------------------

	01. 基礎設定

--------------------------------------------------------- */
html {
	color: #222;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	height: 100%;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: #fff;
	height: 100%;
}

.font_oswald {
	font-family: 'Oswald', sans-serif;
}

/*===============================================
	基礎設定：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.only_sp {display: none;} /* SP時のみ表示する要素に */
}

/*===============================================
	基礎設定：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.only_pc {display: none;} /* PC時のみ表示する要素に */
}



/* ---------------------------------------------------------

	02. 画面構成

--------------------------------------------------------- */
.wrapper {
	min-height: 100%;
	min-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.cmn_container {
	margin: 0 auto;
	max-width: 1100px;
	padding: 0 50px;
	position: relative;
	width: 100%;
}

/*===============================================
	基礎設定:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.cmn_container {
		padding: 0 20px;
	}
}

/*===============================================
	基礎設定：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.cmn_container {
		padding: 0 15px;
	}
}



/* ---------------------------------------------------------

	03. ヘッダー

--------------------------------------------------------- */
header {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 1px 15px rgba(1,1,1,0.1);
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	height: 75px;
	max-width: 1200px;
	overflow: hidden;
	padding-right: 30px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, -110%);
	transition: transform 0.3s;
	width: 100%;
	z-index: 100;
}
header.is-show {transform: translate(-50%, 0);}

.header_logo {
	height: 42px;
}
.header_logo a {
	display: flex;
	align-items: center;
}
.header_logo a::after {
	content: '';
	background: url(../img/mv_arrow_message.png) center bottom/contain no-repeat;
	height: 0.8em;
	transform: rotate(-90deg);
	width: 0;
}
.device_pc .header_logo a::after {transition: width 0.2s;}
.device_pc .header_logo a:hover::after {width: 1.5em;}

header nav {
	flex-basis: 82%;
}
.header_menu {
	display: flex;
}
.header_menu li {
	background-color: #fff;
	position: relative;
	width: 33.33%;
}
.header_menu li::before {
	content: '';
	background-color: #d0cfcf;
	display: block;
	height: 54%;
	position: absolute;
	top: 23%;
	right: 0;
	width: 1px;
}
.header_menu a {
	color: #bdbcbc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	height: 75px;
	letter-spacing: 0.02em;
	padding-bottom: 1em;
	position: relative;
	text-align: center;
	text-decoration: none;
}
.header_menu a::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 0.6em;
	position: absolute;
	bottom: 0.8em;
	left: 50%;
	transform: translateX(-50%);
	width: 1.2em;
}
.header_menu a em {
	font-style: normal;
	margin-left: 0.3em;
}
.device_pc .header_menu a {transition: opacity 0.3s;}
.device_pc .header_menu a:hover {opacity: 0.8;}

.header_switch {display: none;}

/*===============================================
	ヘッダー:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.header_menu a {font-size: 18px;}
}

/*===============================================
	ヘッダー:768px未満
===============================================*/
@media screen and (max-width:767px) {
	header {
		border-radius: 0;
		flex-direction: row;
		height: 56px;
		overflow: visible;
		padding: 0 20px;
		transform: translate(-50%, 0);
	}

	.header_logo {
		height: 30px;
		width: 70px;
	}

	header nav {
		background-color: rgba(29,80,162,0.95);
		display: block;
		height: calc(100vh - 56px);
		opacity: 0;
		overflow-y: auto;
		padding: 100px 0 40px;
		pointer-events: none;
		position: fixed;
		top: 56px;
		left: 0;
		transition: opacity 0.3s;
		width: 100vw;
	}
	header nav.is-open {
		opacity: 1;
		pointer-events: auto;
	}
	.header_menu {
		display: block;
	}
	.header_menu::after {
		content: '';
		background: url(../img/header_logo_white.svg) center/contain no-repeat;
		display: block;
		height: 100px;
		margin: 70px auto 0;
		width: 100px;
	}
	.header_menu li {
		background-color: transparent;
		text-align: center;
		width: 100%;
	}
	.header_menu li::before {display: none;}
	.header_menu li + li {margin-top: 3em;}
	header .header_menu a {
		color: #fff;
		display: inline;
		font-size: 22px;
		height: auto;
		padding-bottom: 0;
	}
	.header_menu a::after {display: none;}
	header .header_menu a em {
		color: #fff;
		margin-left: 0;
	}

	.header_switch {
		display: block;
		height: 42px;
		position: absolute;
		top: 7px;
		right: 7px;
		width: 42px;
	}
	.header_switch a {
		border: 2px solid #1d50a2;
		display: block;
		height: 100%;
		overflow: hidden;
		position: relative;
		text-indent: 100%;
		white-space: nowrap;
	}
	.header_switch::before,
	.header_switch::after,
	.header_switch a::before,
	.header_switch a::after {
		content: '';
		background-color: #1d50a2;
		height: 2px;
		margin-left: -11px;
		position: absolute;
		left: 50%;
		transition: opacity 0.2s, transform 0.2s;
		width: 22px;
	}
	.header_switch::before {top: 12px;}
	.header_switch::after {bottom: 12px;}
	.header_switch a::before,
	.header_switch a::after {top: calc(50% - 1px);}

	.header_switch.is-open::before,
	.header_switch.is-open::after {opacity: 0;}
	.header_switch.is-open a::before {transform: rotate(45deg);}
	.header_switch.is-open a::after {transform: rotate(-45deg);}

	.header_back a {
		font-size: 15px;
	}
}



/* ---------------------------------------------------------

	04. フッター

--------------------------------------------------------- */
footer {
	background-color: #fff;
	height: 120px;
	padding-top: 35px;
}
footer .cmn_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer_corporate a {
	background-color: #f3f3f3;
	border: 1px solid #b4b4b4;
	color: #4a4a4a;
	display: block;
	font-size: 12px;
	font-weight: bold;
	padding: 0.8em 2em 0.6em;
	text-decoration: none;
}
.footer_corporate a span {
	background: url(../img/logo_jecc.svg) center/contain no-repeat;
	display: inline-block;
	height: 2em;
	margin-right: 0.8em;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	vertical-align: middle;
	width: 5em;
}
.device_pc .footer_corporate a {transition: background-color 0.3s;}
.device_pc .footer_corporate a:hover {background-color: #fff;}
.footer_copyright {
	font-size: 12px;
}

.footer_btn_pagetop {
	height: 60px;
	opacity: 0;
	overflow: hidden;
	position: fixed;
	bottom: 20px;
	right: 40px;
	transition: opacity 0.25s;
	width: 60px;
	z-index: 10;
}
.footer_btn_pagetop.is-show {
	opacity: 1;
}
.footer_btn_pagetop.is-stop {
	position: absolute;
	bottom: 140px;
}
.footer_btn_pagetop a {
	background: #fff url(../img/footer_pagetop.png) center/contain no-repeat;
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.device_pc .footer_btn_pagetop a {transition: background-color 0.25s;}
.device_pc .footer_btn_pagetop a:hover {background-color: #ebebeb;}

/*===============================================
	フッター:768px未満
===============================================*/
@media screen and (max-width:767px) {
	footer {
		height: auto;
		padding: 25px 0;
	}
	footer .cmn_container {display: block;}

	.footer_corporate a {
		padding: 0.8em 1em 0.6em;
		width: 18em;
	}

	.footer_copyright {
		margin-top: 1em;
	}

	.footer_btn_pagetop {
		height: 40px;
		right: 20px;
		width: 40px;
	}
}



/* ---------------------------------------------------------

	05. コンテンツ

--------------------------------------------------------- */

/* モジュール
--------------------------------------------------------- */
.cmn_title {
	margin: 0 auto;
	max-width: 1140px;
	position: relative;
	z-index: 1;
}
.cmn_title::before {
	content: '';
	height: 1px;
	position: absolute;
	z-index: -1;
}
.cmn_title span {
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.cmn_subtitle {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1em;
}

/*===============================================
	モジュール:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.cmn_subtitle {font-size: 20px;}
	.cmn_title::before {display: none;}
	.cmn_title span {background-position: center top;}
}


/* スクロールアニメーション
--------------------------------------------------------- */
.js-anim_scroll,
.js-anim_item {
	opacity: 0;
	transition: transform 0.5s, opacity 0.5s;
	transition-timing-function: cubic-bezier(0.07, 0.38, 0.24, 1.02);
	will-change: transform;
}

.about_100th .js-anim_item {
	transform: scale(0);
	transform-origin: center bottom;
}
.about_paper_left .js-anim_item {
	transform: scale(0);
	transform-origin: right bottom;
}
.about_paper_right .js-anim_item {
	transform: scale(0);
	transform-origin: left bottom;
}

.story_item li:not(.story_item_relate) {
	transform: matrix(1, 0, 0, 1, 0, 80);
}
.story_jecc li.story_item_relate {
	transform: matrix(1, 0, 0, 1, -80, 0);
}
.story_it li.story_item_relate {
	transform: matrix(1, 0, 0, 1, 80, 0);
}
.story_relate_wrap .story_it li.story_item_relate {
	transform: translate(100px, -50%);
}
.story_achieve li {
	transform: scale(0.75);
}

.js-anim_scroll_up {transform: matrix(1, 0, 0, 1, 0, 50);}
.js-anim_scroll_down {transform: matrix(1, 0, 0, 1, 0, -50);}
.js-anim_scroll_right {transform: matrix(1, 0, 0, 1, 50, 0);}
.js-anim_scroll_left {transform: matrix(1, 0, 0, 1, -50, 0);}

.js-anim_scroll.is-action,
.js-anim_item.is-action,
.story_item li.is-action,
.story_jecc li.story_item_relate.is-action  {
	opacity: 1;
	transform: none;
}
.story_relate_wrap .story_it li.story_item_relate.is-action {
	transform: translate(0, -50%);
}


/* loading
--------------------------------------------------------- */
.mv_loading {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0 auto;
	padding: 0 20px;
	position: fixed;
	top: 0;
	left: 0;
	transition: background 3s, opacity 1s;
	width: 100%;
	z-index: 1000;
}
.mv_loading.is-loaded {
	background-color: transparent;
	pointer-events: none;
}
.mv_loading_logo {
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.5s;
	width: 250px;
}
.mv_loading_60th {
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.mv_loading.is-ready .mv_loading_60th {
	opacity: 1;
	transition-duration: 1s;
	transition-property: opacity;
}
.mv_loading.is-ready .mv_loading_2 {transition-delay: 1.5s;}
.mv_loading.is-ready .mv_loading_3 {transition-delay: 2s;}
.mv_loading.is-ready .mv_loading_4 {transition-delay: 2.5s;}

.mv_loading_wrap {
	background-color: #fff;
	display: block;
	overflow: hidden;
	position: absolute;
	text-indent: 100%;
	transition-property: opacity;
	white-space: nowrap;
}
.mv_loading.is-ready .mv_loading_wrap {opacity: 0;}
.mv_loading_wrap:not(.mv_loading_last) {
	height: 18%;
	top: 2%;
	transition-duration: 0.5s;
	width: 12%;
}
.mv_loading_J {
	left: 54%;
	transition-delay: 3.2s;
}
.mv_loading_E {
	left: 65%;
	transition-delay: 3.4s;
}
.mv_loading_C1 {
	left: 77%;
	transition-delay: 3.6s;
}
.mv_loading_C2 {
	left: 89%;
	transition-delay: 3.8s;
}
.mv_loading_last {
	height: 11%;
	top: 20%;
	left: 54%;
	transition-duration: 0.8s;
	transition-delay: 4.5s;
	width: 47%;
}

.mv_loading.is-loaded .mv_loading_logo {
	opacity: 0;
}

#lp_60th {
	opacity: 0;
	transition: opacity 1s;
}
#lp_60th.is-loaded {
	opacity: 1 !important;
}

/*===============================================
	loading:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.mv_loading_logo {
		height: 180px;
		top: calc(50% - 50px);
		width: 180px;
	}
}


/* MV
--------------------------------------------------------- */
.sec_mv {
	background: url(../img/mv_bg_pc.jpg) center/cover no-repeat;
	padding: 60px 0 250px;
}

.mv_heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: -50px;
	width: calc(100% + 100px);
}
.mv_logo {
	width: 48%;
}
.mv_title {
	color: #1d50a2;
	display: flex;
	justify-content: center;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 0.2em;
	line-height: 1.88;
	text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
	width: 50%;
}

.mv_menu {
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}
.mv_menu li {
	background-color: #fff;
	width: 31%;
}
.mv_menu a {
	background-color: #fff;
	border-left-style: solid;
	border-left-width: 17px;
	color: #bdbcbc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	height: 75px;
	letter-spacing: 0.02em;
	padding-bottom: 0.4em;
	position: relative;
	text-decoration: none;
}
.mv_menu a::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 0.6em;
	position: absolute;
	bottom: 0.2em;
	left: 50%;
	transform: translateX(-50%);
	width: 1.2em;
}
.mv_menu a em {
	font-style: normal;
	margin-left: 0.3em;
}
.mv_menu_story a {border-left-color: #1493cd;}
.mv_menu_story a::after {background-image: url(../img/mv_arrow_story.png);}
.mv_menu_story a em {color: #1493cd;}
.mv_menu_message a {
	border-left-color: #1d50a2;
	color: #1d50a2;
}
.mv_menu_message a::after {background-image: url(../img/mv_arrow_message.png);}
.mv_menu_concept a {border-left-color: #6fb8a0;}
.mv_menu_concept a::after {background-image: url(../img/mv_arrow_concept.png);}
.mv_menu_concept a em {color: #6fb8a0;}
.device_pc .mv_menu a {transition: opacity 0.3s;}
.device_pc .mv_menu a:hover {opacity: 0.8;}

.mv_corporate {
	height: 42px;
	position: absolute;
	top: -20px;
	right: 50px;
}
.mv_corporate a {
	display: flex;
	align-items: center;
}
.mv_corporate a::after {
	content: '';
	background: url(../img/mv_arrow_message.png) center bottom/contain no-repeat;
	height: 0.8em;
	transform: rotate(-90deg);
	width: 0;
}
.device_pc .mv_corporate a::after {transition: width 0.2s;}
.device_pc .mv_corporate a:hover::after {width: 1.5em;}

/*===============================================
	MV:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.sec_mv {padding-bottom: 220px;}
	.mv_heading {
		margin-left: 0;
		width: 100%;
	}
	.mv_title {font-size: 30px;}
	.mv_menu a {
		font-size: 17px;
		height: 70px;
	}
}

/*===============================================
	MV:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.sec_mv {
		background-image: url(../img/mv_bg_sp.jpg);
		padding: 20px 0 120px;
	}

	.mv_heading {
		flex-direction: column-reverse;
		margin-left: 0;
		padding-top: 4.5em;
		width: 100%;
	}
	.mv_logo {
		margin-top: 0.5em;
		max-width: 250px;
		width: 100%;
	}
	.mv_title {
		display: block;
		font-size: 20px;
		margin-left: 0.8em;
		text-align: center;
		width: 100%;
	}

	.mv_menu {
		display: block;
		margin: 40px auto 0;
		width: 80%;
	}
	.mv_menu li {width: 100%;}
	.mv_menu li + li {margin-top: 1em;}
	.mv_menu a {
		border-left-width: 10px;
		font-size: 18px;
		height: 54px;
		text-decoration: none;
	}

	.mv_corporate {
		height: 30px;
		top: 0;
		right: auto;
		left: 20px;
		width: 70px;
	}
}


/* STORY
--------------------------------------------------------- */
.sec_story {
	background-color: #1493cd;
	border-radius: 120px 120px 0 0;
	margin-top: -120px;
	overflow: hidden;
	padding: 120px 20px 190px;
	position: relative;
	z-index: 1;
}
.sec_story::before,
.sec_story::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.sec_story::before {
	background-image: url(../img/story_wave01.png);
	height: 563px;
	top: -180px;
	left: -55px;
	width: 600px;
}
.sec_story::after {
	background-image: url(../img/story_wave02.png);
	height: 229px;
	top: -48px;
	right: -55px;
	width: 193px;
}

.sec_story .cmn_container {
	background: url(../img/story_bg.png) center bottom/1150px auto no-repeat;
	padding-bottom: 50px;
}
.sec_story .cmn_title::before {
	background: linear-gradient(to right, #43a9d7 0%, #1493cd 100%);
	bottom: 30px;
	left: 359px;
	width: calc(100% - 359px);
}
.sec_story .cmn_title span {
	background-image: url(../img/story_title.png);
	height: 158px;
}

.story_menu {
	display: flex;
	justify-content: center;
	margin-top: 3em;
}
.story_menu li:not(:first-child) {
	border-left: 1px solid #fff;
}
.story_menu a {
	color: #fff;
	display: block;
	font-size: 24px;
	font-weight: bold;
	padding: 0 1.2em;
	position: relative;
	text-align: center;
	text-decoration: none;
}
.story_menu a::after {
	content: '';
	background: url(../img/story_arrow_anchor.png) center/contain no-repeat;
	display: block;
	height: 0.3em;
	position: absolute;
	bottom: -0.2em;
	left: 50%;
	transform: translate(-50%, 100%);
	width: 0.7em;
}

.story_list_wrap {
	margin-top: 4.8em;
}

.story_year {
	background-color: #fff;
	box-shadow: 0 0 20px rgba(29,80,162,0.3);
	padding: 0.9em 0;
	position: relative;
	text-align: center;
	z-index: 1;
}
.story_year:first-child::before {
	content: '';
	background-color: #fff;
	display: block;
	height: 2em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	width: 34px;
}
.story_year:first-child::after {
	content: '';
	background: linear-gradient(to top, rgba(20,147,205,0.25) 0%, #fff 30%);
	display: block;
	height: 2em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	width: 34px;
}

.story_list {
	padding: 2.4em 0 5em;
	position: relative;
}
.story_list::before {
	content: '';
	background-color: #fff;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
}
.story_list::after {
	content: '';
	background: linear-gradient(to bottom, rgba(20,147,205,0.3) 0%, #fff 100%);
	display: block;
	height: 4em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
}

.story_label {
	display: flex;
	justify-content: space-between;
	margin: 0 auto ;
	width: 92%;
}
.story_label::before {
	content: '';
	background-color: #51c0f4;
	display: block;
	height: 1.5em;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
}
.story_list:last-child .story_label::before {background-color: #1493cd;}
.story_label::after {
	content: '';
	background: url(../img/story_arrow_bottom.png) center bottom/contain no-repeat;
	display: block;
	height: 35px;
	position: absolute;
	bottom: 0.5em;
	left: 50%;
	transform: translateX(-50%);
	width: 75px;
}
.story_label li {
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	width: 43%;
}

.story_item_wrap {
	display: flex;
	margin: 2.4em auto 0;
	position: relative;
	width: 92%;
}
.story_item {
	width: calc(50% - 17px);
}
.story_it {
	margin-left: auto;
}
.story_item li {
	width: calc(100% - 48px);
}
.story_item li + li {
	margin-top: 1.8em;
}
.story_item h3 {
	display: flex;
	align-items: flex-end;
	position: relative;
	width: calc(100% + 48px);
}
.story_item h3::after {
	content: '';
	background-color: #fff;
	height: 1px;
	margin: 0 0 0.15em 0.2em;
	width: 100%;
}
.story_item span {
	flex: 0 0 auto;
}
.story_item h3 em {
	font-size: 1.5em;
	font-style: normal;
	font-weight: bold;
}
.story_item p {
	color: #fff;
	line-height: 1.4;
	margin-top: 0.3em;
}
.story_item a {
	border-bottom: 1px solid #fff;
	color: #fff;
	text-decoration: none;
}
.story_item figure {
	background: url(../img/story_bg_img.png) center/39px;
	margin: 1em 0 0;
	text-align: center;
}
.device_pc .story_item a {transition: border 0.2s, opacity 0.2s;}
.device_pc .story_item a:hover {
	border-color: transparent;
	opacity: 0.8;
}

.story_1980 .story_it {
	margin-left: auto;
	width: 42.5%;
}
.story_1980 .story_it h3::after {
	position: absolute;
	top: 1.3em;
	left: -0.4em;
	transform: translateX(-100%);
	width: 48px;
}

.story_relate_wrap .story_it li {
	position: absolute;
	top: 50%;
	right: 0;
	/* transform: translateY(-50%); */
	width: calc(50% - 70px);
}
.story_item_relate {
	background-color: #365ca3;
	font-weight: bold;
	padding: 1.5em 2em 1.7em;
	position: relative;
	width: calc(100% - 48px);
}
.story_item_relate::before {
	content: '';
	background-color: #365ca3;
	display: block;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateX(100%);
	width: 48px;
}
.story_1970 .story_item_relate {background-color: #005c97;}
.story_1990 .story_item_relate {background-color: #078e6d;}
.story_2000 .story_item_relate {background-color: #0e72c1;}
.story_2010_1 .story_item_relate {background-color: #00828f;}
.story_2010_2 .story_item_relate {background-color: #1d50a2;}

.story_it .story_item_relate {
	margin-left: auto;
}
.story_it .story_item_relate::before {display: none;}
.story_it .story_item_relate::after {
	content: '';
	background-image: url(../img/story_bg_1960.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-69.5px);
	width: 70px;
}
.story_1970 .story_it .story_item_relate::after {background-image: url(../img/story_bg_1970.png);}
.story_1990 .story_it .story_item_relate::after {background-image: url(../img/story_bg_1990.png);}
.story_2000 .story_it .story_item_relate::after {background-image: url(../img/story_bg_2000.png);}
.story_2010_1 .story_it .story_item_relate::after {background-image: url(../img/story_bg_2010_1.png);}
.story_2010_2 .story_it .story_item_relate::after {background-image: url(../img/story_bg_2010_2.png);}
.story_it .story_item_relate p + h3 {margin-top: 1em;}
.story_it .story_item_relate p + p {margin-top: 0.4em;}

.story_item_relate p {
	margin-top: 0;
	width: 100%;
}
.story_item_relate h3 {
	color: #fff;
	display: block;
	margin-bottom: 0.3em;
	width: 100%;
}
.story_item_relate h3::after {display: none;}

.story_achieve {
	color: #fff;
	margin-top: 1em;
	padding: 1em 0;
	position: relative;
}
.story_achieve h3 {
	font-size: 28px;
	font-weight: bold;
	text-align: center;
}
.story_achieve::before,
.story_achieve::after,
.story_achieve h3::before,
.story_achieve h3::after {
	content: '';
	display: block;
	height: 66px;
	position: absolute;
	width: 66px;
}
.story_achieve::before {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	top: 0;
	left: 0;
}
.story_achieve::after {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	top: 0;
	right: 0;
}
.story_achieve h3::before {
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	bottom: 0;
	left: 0;
}
.story_achieve h3::after {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	bottom: 0;
	right: 0;
}
.story_achieve ul {
	display: flex;
	justify-content: space-between;
	margin-top: 3.2em;
}
.story_achieve li {
	text-align: center;
	width: 32%;
}
.story_achieve figure {
	margin: 0;
}
.story_achieve h4 {
	border-bottom: 1px solid #fff;
	font-size: 20px;
	font-weight: bold;
	margin-top: 0.6em;
	padding-bottom: 0.6em;
}
.story_achieve p {
	font-size: 20px;
	font-weight: bold;
	margin-top: 0.3em;
}
.story_achieve strong {
	font-size: 1.4em;
}
.story_achieve small {
	font-size: 0.7em;
	font-weight: normal;
	margin-top: 0.5em;
}
.story_achieve small:last-child {display: block;}

.story_obj {
	position: absolute;
	left: 50%;
	z-index: -1;
}
.story_obj_large {
	height: 563px;
	width: 600px;
}
.story_obj_small {
	height: 229px;
	width: 193px;
}
#story_obj01 {
	margin-left: -750px;
	top: 10%;
}
#story_obj02 {
	margin-left: 250px;
	top: 30%;
}
#story_obj03 {
	margin-left: -950px;
	top: 40%;
}
#story_obj04 {
	margin-left: 250px;
	top: 20%;
}
#story_obj05 {
	margin-left: -750px;
	top: -20%;
}
#story_obj06 {
	margin-left: 300px;
	top: 30%;
}
#story_obj07 {
	margin-left: -950px;
	top: 80%;
}
#story_obj08 {
	margin-left: 200px;
	top: 15%;
}
#story_obj09 {
	margin-left: -800px;
	top: 60%;
}
#story_obj10 {
	margin-left: 300px;
	top: 30%;
}

/*===============================================
	STORY:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.sec_story {
		border-radius: 80px 80px 0 0;
		padding-top: 80px;
	}

	.story_menu a {padding: 0 1em;}

	.story_achieve::before,
	.story_achieve::after,
	.story_achieve h3::before,
	.story_achieve h3::after {
		height: 40px;
		width: 40px;
	}
	.story_achieve h4 {font-size: 18px;}
	.story_achieve p {font-size: 18px;}

	#story_obj02 {margin-left: 150px;}
	#story_obj04 {margin-left: 100px;}
	#story_obj06 {margin-left: 150px;}
	#story_obj10 {margin-left: 100px;}
}

/*===============================================
	STORY:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.sec_story {
		border-radius: 60px 60px 0 0;
		margin-top: -60px;
		padding: 50px 15px 100px;
	}
	.sec_story::before {
		height: 280px;
		top: -80px;
		left: -95px;
		width: 300px;
	}
	.sec_story::after {
		height: 115px;
		top: -30px;
		right: -10px;
		width: 95px;
	}

	.sec_story .cmn_container {padding: 0 0 40px;}
	.sec_story .cmn_title span {
		background-position: center top;
		height: 90px;
	}

	.story_menu {
		flex-wrap: wrap;
		margin-top: 2em;
	}
	.story_menu li {width: 30%;}
	.story_menu li:nth-child(4) {border-left: none;}
	.story_menu li:nth-child(n+4) {margin-top: 1.5em;}
	.story_menu a {
		font-size: 20px;
		padding: 0 0.5em;
	}

	.story_list_wrap {margin-top: 3.6em;}

	.story_year {
		margin-left: -50vw;
		left: 50%;
		width: 100vw;
	}
	.story_year img {
		height: 32px;
		width: auto;
	}
	.story_year:first-child::before {
		height: 1em;
		width: 14px;
	}
	.story_year:first-child::after {
		background: linear-gradient(to top, rgba(20,147,205,0.25) 0%, #fff 80%);
		height: 1em;
		width: 14px;
	}

	.story_list {padding: 2em 0 3.5em;}
	.story_list::before {width: 14px;}
	.story_list::after {
		height: 3em;
		width: 14px;
	}

	.story_label {
		width: 100%;
	}
	.story_label::before {
		height: 1.2em;
		width: 14px;
	}
	.story_label::after {
		height: 24px;
		width: 50px;
	}
	.story_label li {font-size: 14px;}

	.story_item_wrap {
		font-size: 14px;
		margin: 2em auto 0;
		width: 95%;
	}
	.story_item {width: calc(50% - 7px);}
	.story_item li {width: calc(100% - 17px);}
	.story_item li + li {margin-top: 1.5em;}
	.story_item h3 {width: calc(100% + 17px);}
	.story_item h3 em {font-size: 1.2em;}
	.story_item p {margin-top: 0.5em;}
	.story_item figure {margin-top: 0.6em;}

	.story_1980 .story_it {width: calc(47% - 17px);}
	.story_1980 .story_it li {width: 100%;}
	.story_1980 .story_it h3::after {width: 17px;}

	.story_relate_wrap .story_it li {width: calc(50% - 24px);}
	.story_item_relate {
		padding: 0.8em 0.8em 1em;
		width: calc(100% - 17px);
	}
	.story_item_relate::before {width: 17px;}

	.story_it .story_item_relate::after {
		transform: translateX(-24px);
		width: 24px;
	}

	.story_item_relate p {margin-top: 0;}
	.story_item_relate h3 {width: 100%;}

	.story_achieve {
		margin: 0.5em 15px 0;
	}
	.story_achieve h3 {
		font-size: 20px;
		line-height: 1.4;
	}
	.story_achieve::before,
	.story_achieve::after,
	.story_achieve h3::before,
	.story_achieve h3::after {
		height: 30px;
		width: 30px;
	}
	.story_achieve ul {
		display: block;
		margin-top: 2em;
	}
	.story_achieve li {
		margin: 0 auto;
		width: 85%;
	}
	.story_achieve li + li {margin-top: 30px;}
	.story_achieve figure {
		margin: 0 auto;
		max-width: 200px;
	}
	.story_achieve p {font-size: 18px;}

	.story_obj_large {
		height: 280px;
		width: 300px;
	}
	.story_obj_small {
		height: 115px;
		width: 95px;
	}
	#story_obj01 {
		margin-left: 15%;
		top: 30%;
	}
	#story_obj02 {
		margin-left: 5%;
		top: 80%;
	}
	#story_obj03 {display: none;}
	#story_obj04 {
		margin-left: 10%;
		top: 50%;
	}
	#story_obj05 {
		margin-left: 10%;
		top: 50%;
	}
	#story_obj06 {display: none;}
	#story_obj07 {
		margin-left: 20%;
		top: 20%;
	}
	#story_obj08 {
		margin-left: 5%;
		top: 80%;
	}
	#story_obj09 {display: none;}
	#story_obj10 {
		margin-left: 5%;
		top: 40%;
	}
}

/*===============================================
	STORY:360px未満
===============================================*/
@media screen and (max-width:359px) {
	.story_label li {font-size: 13px;}
	.story_item h3 em {font-size: 1em;}
}


/* MESSAGE
--------------------------------------------------------- */
.sec_message {
	background-color: #1d50a2;
	border-radius: 120px 120px 0 0;
	margin-top: -120px;
	overflow: hidden;
	padding: 120px 20px 190px;
	position: relative;
	z-index: 1;
}
.sec_message::before,
.sec_message::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.sec_message::before {
	background-image: url(../img/message_wave01.png);
	height: 563px;
	top: -170px;
	right: -155px;
	width: 600px;
}
.sec_message::after {
	background-image: url(../img/message_wave02.png);
	height: 229px;
	top: -48px;
	left: -55px;
	width: 193px;
}

.sec_message .cmn_container {
	background: url(../img/message_bg.png) center bottom/1150px auto no-repeat;
}
.sec_message .cmn_title::before {
	background: linear-gradient(to left, #4a73b5 0%, #1d50a2 100%);
	bottom: 28px;
	right: 524px;
	width: calc(100% - 524px);
}
.sec_message .cmn_title span {
	background-image: url(../img/message_title.png);
	background-position: right top;
	height: 86px;
}
.sec_message .cmn_subtitle {color: #fff;}

.message_box {
	margin-top: 60px;
	padding-bottom: 40px;
}
.message_image {
	float: right;
	margin: 0 0 1em 2em;
	width: 32%;
}
.message_image img {
	border: 1px solid #fff;
}
.message_image figcaption {
	color: #fff;
	font-weight: bold;
	margin-top: 0.8em;
	text-align: center;
}

.message_box p {
	color: #fff;
	line-height: 1.875;
	text-indent: 1em;
}
.message_box p + p {
	margin-top: 1.5em;
}

/*===============================================
	MESSAGE:1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	.sec_message::before {
		right: 50%;
		transform: translateX(855px);
	}
	.sec_message::after {
		left: 50%;
		transform: translateX(-757px);
	}
}

/*===============================================
	MESSAGE:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.sec_message {
		border-radius: 80px 80px 0 0;
		padding-top: 80px;
	}
}

/*===============================================
	MESSAGE:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.sec_message {
		border-radius: 60px 60px 0 0;
		margin-top: -60px;
		padding: 50px 15px 110px;
	}
	.sec_message::before {
		height: 280px;
		top: -96px;
		right: -148px;
		width: 300px;
	}
	.sec_message::after {
		height: 115px;
		top: -20px;
		left: -30px;
		width: 95px;
	}

	.sec_message .cmn_title span {
		background-position: center top;
		height: 43px;
	}

	.message_box {
		margin-top: 35px;
	}
	.message_image {
		float: none;
		order: 1;
		margin: 0 0 2em;
		width: 100%;
	}
}


/* CONCEPT
--------------------------------------------------------- */
.sec_concept {
	background-color: #f3f3f3;
	border-radius: 120px 120px 0 0;
	margin-top: -120px;
	overflow: hidden;
	padding: 100px 20px 70px;
	position: relative;
	z-index: 1;
}
.sec_concept::before,
.sec_concept::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.sec_concept::before {
	background-image: url(../img/concept_wave01.png);
	height: 563px;
	top: -180px;
	left: -55px;
	width: 600px;
}
.sec_concept::after {
	background-image: url(../img/concept_wave02.png);
	height: 229px;
	top: -48px;
	right: -55px;
	width: 193px;
}

.sec_concept .cmn_container {
	background: url(../img/concept_bg.png) center bottom/1150px auto no-repeat;
}
.sec_concept .cmn_title::before {
	background: linear-gradient(to right, #dadada 0%, #f3f3f3 100%);
	bottom: 35px;
	left: 369px;
	width: calc(100% - 369px);
}
.sec_concept .cmn_title span {
	background-image: url(../img/concept_title.png);
	height: 161px;
}

.concept_box {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	padding-bottom: 40px;
}

.concept_logo {
	background-color: #fff;
	height: 0;
	padding-top: 50%;
	position: relative;
	width: 50%;
}
.concept_logo img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 69%;
}

.concept_text {
	width: 45%;
}
.concept_text p {
	line-height: 1.875;
}
.concept_text p + p {
	margin-top: 1.5em;
}
.concept_blue {color: #1d50a2;}
.concept_green {color: #48ab85;}

.concept_wire {
	margin-top: 40px;
	text-align: center;
}

/*===============================================
	CONCEPT:1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	.sec_concept::before {
		left: 50%;
		transform: translateX(-757px);
	}
	.sec_concept::after {
		right: 50%;
		transform: translateX(757px);
	}
}

/*===============================================
	CONCEPT:992px未満
===============================================*/
@media screen and (max-width:991px) {
	.sec_concept {
		border-radius: 80px 80px 0 0;
		padding-top: 80px;
	}
}

/*===============================================
	CONCEPT:768px未満
===============================================*/
@media screen and (max-width:767px) {
	.sec_concept {
		border-radius: 60px 60px 0 0;
		margin-top: -60px;
		padding: 50px 15px;
	}
	.sec_concept::before {
		height: 280px;
		top: -80px;
		left: -95px;
		width: 300px;
	}
	.sec_concept::after {
		height: 115px;
		top: -30px;
		right: -10px;
		width: 95px;
	}

	.sec_concept .cmn_title span {
		background-position: center top;
		height: 90px;
	}

	.concept_box {
		display: block;
		margin-top: 25px;
		padding-bottom: 30px;
	}

	.concept_logo {
		padding-top: 100%;
		width: 100%;
	}

	.concept_text {
		margin-top: 30px;
		width: 100%;
	}
	.concept_text p + p {
		margin-top: 1.2em;
	}

	.concept_wire {
		margin-top: 20px;
	}
}