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

	+ content
		- pageTitle
		+ innerBox
			- breadcrumb
			+ box01
				- box01_1
				- box01_2
				- box01_3
		- aboutusLinks
		- str100thLinks

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

article {
	background: url(../img/i_bg02.png) repeat-x center top, url(../img/i_bg06.jpg) no-repeat center top;
	background-color: #2ca8ff;
	background-size: auto, 100% auto;
}

@media screen and (max-width: 767px) {
	article {
		background: none, url(../img/i_bg06.jpg) no-repeat center top;
		background-color: #2ca8ff;
		background-size: auto, 180% auto;
	}
}

/*----------------------------------------
	pageTitle
-----------------------------------------*/

#pageTitle {
	height: 300px;
	background: transparent url(../../img/c_aboutus_tit02.jpg) no-repeat center center;
	background-size: cover;
}

.pageTitle_inner {
	width: 1100px;
	padding: 60px 0 0;
	margin: 0 auto;
	text-align: right;
}

.pageTitle_inner>span {
	display: block;
	letter-spacing: 0.3rem;
}

.pageTitle_inner>span.pageTitle_eng {
	color: #242c3e;
	letter-spacing: -0.3rem;
	opacity: .3;
}

@media screen and (max-width: 767px) {
	#pageTitle {
		height: 29.33vw;
		background: transparent url(../../img/c_aboutus_tit02_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.pageTitle_inner {
		width: 89.3vw;
		padding: 11.1vw 0 0;
	}

	.pageTitle_inner>span {
		margin-right: -3px;
		letter-spacing: 0.2rem;
	}

	.pageTitle_inner>span.pageTitle_eng {
		margin: 1px -1px 0 0;
		color: #242c3e;
		letter-spacing: -0.1rem;
		opacity: .4;
	}
}

/*----------------------------------------
	breadcrumb
-----------------------------------------*/

#breadcrumb {
	border-bottom: 1px solid #fff;
}

/*----------------------------------------
	innerBox
-----------------------------------------*/
#innerBox {
	margin-top: -120px;
}

#innerBox>p {
	position: relative;
	padding: 34px 0 0;
	background-color: #fff;
	text-align: center;
	line-height: 1.7;
}

#innerBox>p::before {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: -133px;
	left: 0;
	height: 100px;
	width: 1px;
	margin: auto;
	background-color: #0086cd;
}

#innerBox>p::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: -144px;
	left: 0;
	width: 11px;
	height: 11px;
	margin: auto;
	border-radius: 50%;
	background-color: #0086cd;
}

@media screen and (max-width: 767px) {
	#innerBox {
		margin-top: 0;
	}

	#innerBox>p {
		text-align: left;
		line-height: 1.75;
	}

	#innerBox>p::before {
		bottom: -64px;
		height: 50px;
	}

	#innerBox>p::after {
		bottom: -71px;
		width: 7px;
		height: 7px;
	}
}

/*----------------------------------------
	breadcrumb
-----------------------------------------*/
#breadcrumb {
	border-bottom: 1px solid #fff;
}

/*----------------------------------------
	box01
-----------------------------------------*/
#box01 {
	position: relative;
	padding-top: 220px;
	background: url(../img/i_bg02.png) no-repeat center top, url(../img/i_bg01.jpg) no-repeat center top;
	/* background-color: rgba(44,168,255,0.9); */
}

#box01>h1 {
	position: relative;
	margin: auto;
	text-align: center;
	letter-spacing: 0.06em;
	line-height: 1.1;
}

#box01>h1::before {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: -141px;
	left: 0;
	height: 100px;
	width: 1px;
	margin: auto;
	background-color: #fff;
}

#box01>h1::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: -41px;
	left: 0;
	width: 11px;
	height: 11px;
	margin: auto;
	border-radius: 50%;
	background-color: #fff;
}

#box01>h1>span {
	display: block;
}

/* リンク01,02 */
#box01>ul {
	display: flex;
	justify-content: space-between;
	width: 980px;
	margin: 35px auto 0;
}

#box01>ul li {
	width: calc((100% - 20px)/2);
	text-align: center;
}

#box01>ul li>span,
#box01>ul li>a {
	display: block;
	position: relative;
	padding: 30px 30px 23px;
	border-radius: 4px;
	background-color: #fff;
	transition-property: all;
	transition-duration: .15s;
	transition-timing-function: ease-out;
}

#box01>ul li>span::before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: -19px;
	left: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 19px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
}

.pc #box01>ul li>a:hover {
	background-color: #93d5f4;
}

#box01>ul li>span span,
#box01>ul li>a span {
	display: inline-block;
}

#box01>ul li>span span.robotoCndNormal,
#box01>ul li>a span.robotoCndNormal {
	color: #ddefff;
	line-height: 1;
	letter-spacing: -1.4px;

}

#box01>ul li>span span.robotoCnd,
#box01>ul li>a span.robotoCnd {
	margin: -6px 0 0 -5px;
	color: #ddefff;
	line-height: 1;
	letter-spacing: -4.5px;
}

#box01>ul li>span span.font18_14,
#box01>ul li>a span.font18_14 {
	margin-top: 17px;
	line-height: 1;
}

#box01>ul li>span span.font24_18,
#box01>ul li>a span.font24_18 {
	margin-top: 11px;
	line-height: 1;
}

/* 記事タイトル */
#box01>h2 {
	position: relative;
	height: 437px;
	margin: auto;
	background: linear-gradient(to bottom, rgba(44,168,255,0) 0%, rgba(44,168,255,0.1) 10%, rgba(44,168,255,0.9) 100%);
	text-align: center;
}

#box01>h2::before {
	content: "02";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	margin-left: -10px;
	font-family: 'Roboto Condensed';
	font-weight: 700;
	font-size: 40.0rem;
	letter-spacing: -15px;
	line-height: 1;
	color: #ddefff;
	opacity: .15;
}

#box01>h2>span {
	display: block;
	position: absolute;
	width: 100%;
	line-height: 1;
}

#box01>h2>span.font18_16 {
	top: 149px;
}

#box01>h2>span.font36_24 {
	top: 184px;
	letter-spacing: 2px;
}

#box01>h2>span.font24_16 {
	top: 250px;
}

#box01>div {
	padding: 0 60px;
	background-color: rgba(44,168,255,0.9);
	box-sizing: border-box;
}

@media (max-width: 767px) {
	#box01 {
		padding-top: 86px;
		background: url(../img/i_bg02.png) repeat-x center top, url(../img/i_bg01.jpg) no-repeat center top;
		background-size: 375px auto, 375px auto;
		background-color: transparent;
	}

	#box01>h1::before {
		top: -71px;
		height: 50px;
		width: 1px;
	}

	#box01>h1::after {
		top: -21px;
		width: 7px;
		height: 7px;
	}

	/* リンク01,02 */
	#box01>ul {
		width: 89.3vw;
		margin: 22px auto 0;
	}

	#box01>ul li {
		width: calc((100% - 10px)/2);
	}

	#box01>ul li>span,
	#box01>ul li>a {
		padding: 9px 0 8px;
	}

	#box01>ul li>span::before {
		bottom: -14px;
		border-width: 14px 7px 0 7px;
	}

	#box01>ul li>span span.robotoCnd,
	#box01>ul li>a span.robotoCnd {
		margin: -2px 0 0 -1px;
	}

	#box01>ul li>span span.font18_14,
	#box01>ul li>a span.font18_14 {
		margin-top: 6px;
		line-height: 1.5;
	}

	#box01>ul li:nth-of-type(1) span.font18_14 {
		height: 3em;
		letter-spacing: 1px;
	}

	#box01>ul li>span span.font24_18,
	#box01>ul li>a span.font24_18 {
		margin-top: 10px;
	}

	/* 記事タイトル */
	#box01>h2 {
		height: 207px;
	}

	#box01>h2::before {
		top: 19px;
		margin-left: -5px;
		font-size: 20.0rem;
		letter-spacing: -8px;
	}

	#box01>h2>span.font18_16 {
		top: 81px;
	}

	#box01>h2>span.font36_24 {
		top: 105px;
		letter-spacing: 0;
	}

	#box01>h2>span.font24_16 {
		top: 142px;
	}

	#box01>div {
		display: block;
		width: 100%;
		padding: 40px 20px 0;
		box-sizing: border-box;
	}
}

/*----------------------------------------
	box01_1
-----------------------------------------*/
#box01_1 {
	position: relative;
	height: 563px;
	margin-top: -21px;
	padding-bottom: 24px;
	border-radius: 10px;
	border: 1px solid #fff;
	box-sizing: border-box;
}

#box01_1>h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 1;
	top: -19px;
	right: 0;
	left: 0;
	height: 40px;
	width: 470px;
	margin: auto;
	border-radius: 20px;
	background-color: #0e65b1;
}

/* swiper設定 */
/* 個別設定 1px白線枠内 */
#box01_1>div {
	display: flex;
	justify-content: space-between;
	position: relative;
	padding:  50px 0 25px;
	box-sizing: border-box;
}

#box01_1>div div.swiper-container1 {
	overflow: hidden;
	width: 920px;
	margin: 0 auto;
}

#box01_1>div div.swiper-container1 ul li.swiper-slide {
	background-color: #fff;
	opacity: .6;
	transition: all .3s ease-out;
}

#box01_1>div div.swiper-container1 ul li.swiper-slide.swiper-slide-active {
	opacity: 1;
}

#box01_1>div div.swiper-container1 ul li.swiper-slide figure figcaption {
	padding: 5px 0;
	text-align: center;
}

#box01_1>div .swiper-button-next,
#box01_1>div .swiper-button-prev {
	display: block;
	position: absolute;
	top: 200px;
	left: auto;
	height: 60px;
	width: 60px;
	margin: auto;
	border-radius: 50%;
	background-color: #276aac;
	transition: background-color .2s ease-out;
	outline: none;
}

#box01_1>div .swiper-button-next {
	right: 186px;
	background: #242c3e url(../img/history_arrow03.png) no-repeat left 26px center;
	background-size: 13px 22px;
}

#box01_1>div .swiper-button-prev {
	left: 186px;
	background: #242c3e url(../img/history_arrow02.png) no-repeat left 22px center;
	background-size: 13px 22px;
}

.pc #box01_1>div .swiper-button-next:hover,
.pc #box01_1>div .swiper-button-prev:hover {
	background-color: #276aac;
}

#box01_1 #slideTitle {
	width: 920px;
	margin: 0 auto;
	text-align: center;
}

#box01_1 #slideDiscription {
	width: 920px;
	margin: 20px auto 0;
	line-height: 1.7;
}

@media (max-width: 767px) {
	#box01_1 {
		height: initial;
		height: auto;
		width: 78.66vw;
		margin: auto;
		padding-bottom: 23px;
	}

	#box01_1 h1 {
		width: 72vw;
	}

	#box01_1>div {
		padding: 25px 0 17px;
	}

	#box01_1>div div.swiper-container1 {
		width: 68vw;
		margin: 16px auto 0;
	}

	#box01_1>div .swiper-button-next,
	#box01_1>div .swiper-button-prev {
		top: calc(50% - 7px);
		height: 40px;
		width: 40px;
		background-position: left 16px center;
		background-size: 9px 15px;
	}

	#box01_1>div .swiper-button-next {
		right: 50%;
		margin-right: -38vw;
	}

	#box01_1>div .swiper-button-prev {
		left: 50%;
		margin-left: -38vw;
	}

	#box01_1 #slideTitle {
		width: 68vw;
	}

	#box01_1 #slideDiscription {
		width: 68vw;
		margin-top: 10px;
	}
}

/*----------------------------------------
	box01_2
-----------------------------------------*/
#box01_2>p {
	margin-top: 22px;
}

#box01_2>figure {
	margin-top: 18px;
}

#box01_2>figure figcaption {
	margin-top: 21px;
}

#box01_2>ul {
	display: flex;
	flex-wrap: wrap;
	margin-top: 35px;
}

#box01_2>ul>li {
	width: 192px;
	margin-bottom: 22px;
	margin-left: 5px;
}

#box01_2>ul>li:nth-of-type(5n+1) {
	margin-left: 0;
}

#box01_2>ul>li figure+p {
	margin-top: 10px;
}

@media (max-width: 767px) {
	#box01_2>p {
		margin-top: 10px;
	}

	#box01_2>figure {
		margin-top: 25px;
	}

	#box01_2>figure figcaption {
		margin-top: 17px;
		line-height: 1.75;
	}

	#box01_2>ul {
		justify-content: space-between;
		margin-top: 23px;
	}

	#box01_2>ul>li {
		width: calc((100% - 5px)/2);
		margin-bottom: 10px;
		margin-left: 0;
	}

	#box01_2>ul>li figure+p {
		margin-top: 4px;
	}
}

/*----------------------------------------
	box01_3
-----------------------------------------*/
#box01_3 {
	margin-top: 73px;
}
/* 
#box01_3>div {
	margin: 0 calc((100% - 100vw) / 2);
} */

@media (max-width: 1100px) {
	#box01_3 {
		margin-top: 31px;
		line-height: 1.7;
	}
}

/*----------------------------------------
	loop
-----------------------------------------*/
#loop {
	overflow: hidden;
	width: inherit;
	margin-top: 23px;
}

#loop .swiper-wrapper {
	transition-timing-function: linear;
}

@media (max-width: 1100px) {
	#loop {
		margin-top: 13px;
	}
}

/*----------------------------------------
	aboutusLinks
-----------------------------------------*/
ul#aboutusLinks {
	margin-top: 100px;
}

@media (max-width: 767px) {
	ul#aboutusLinks {
		margin-top: 30px;
	}
}

@media (max-width: 374px) {
	#aboutusLinks>li:nth-of-type(3)>a>span:first-child {
		letter-spacing: -0.4px;
	}
}

/*----------------------------------------
	str100thLinks
-----------------------------------------*/
#str100thLinks {
	margin-top: 0;
	margin-bottom: 230px;
	padding-top: 201px;
	background-color: #fff;
}

#str100thLinks::before {
	top: 60px;
}

#str100thLinks::after {
	top: 160px;
}

@media (max-width: 767px) {
	#str100thLinks {
		margin-bottom: 222px;
		padding-top: 101px;
	}

	#str100thLinks::before {
		top: 30px;
	}

	#str100thLinks::after {
		top: 80px;
	}
}