@charset "utf-8";

/*--------------------------------------------------*/
/*		http://
/*		/css/index.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index.......目次
/*			$layout......全体・部分的なレイアウト
/*			$visual......visual部分
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$layout
/*--------------------------------------------------*/
@media screen and (max-width: 767px) {

}



/*--------------------------------------------------*/
/*			$visual
/*--------------------------------------------------*/
#visual{overflow: hidden; position: relative; width: 100%; height: 0; padding-top: 44.44%; margin-bottom: 50px;}
#visual .visual-inner{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#visual video{position: absolute; width: 100%; left: 0; top: -17%; font-size: 0; line-height: 0;}
#visual dl{padding: 12.69% 0 0 3rem; font-weight: bold;}
#visual dl dt{padding-left: .3em; font-size: 2rem;}
#visual dl dd h2{font-size: 4rem; line-height: 1.2;}
#visual aside{position: absolute; left: 50%; bottom: 0; margin-left: -3em; padding-bottom: 60px; color: #fff; font-size: 1.4rem; font-weight: bold;}
#visual aside:after{content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 70%; background-color: #fff;}
@media screen and (max-width: 767px) {
#visual{padding-top: 118.75%; margin-bottom: 7.8125%;}
#visual video{width: auto; height: 117%; left: 50%; top: -17%; margin-left: -117%;}
#visual dl{padding: 44.53% 0 0 0; font-weight: bold;}
#visual dl dt{padding-left: 0; font-size: 1.2rem; text-align: center;}
#visual dl dd h2{font-size: 2.5rem; text-align: center;}
#visual aside{margin-left: -2em; padding-bottom: 9.375%; font-size: .9rem;}
}



/*--------------------------------------------------*/
/*			$box01
/*--------------------------------------------------*/
#box01{padding-bottom: 50px;}
#box01 .solid-inner{padding-left: 75px;}
#box01 dl{padding-right: 300px; background: url(/images/index/box01_img.png) no-repeat 640px top;}
#box01 dl dt{padding-bottom: 1em; font-size: 2.4rem; font-weight: bold; line-height: 1;}
#box01 dl dd{padding-bottom: 1.5em; font-size: 2rem; line-height: 1.6;}
@media screen and (max-width: 767px) {
#box01{padding-bottom: 9.375%;}
#box01 .solid-inner{padding-left: 0;}
#box01 dl{padding-right: 0; background: none;}
#box01 dl dt{font-size: 1.5rem; text-align: center;}
#box01 dl dd{padding: 0 38.33% 14% 0; background: url(/images/index/box01_img.png) no-repeat right bottom; background-size: 37% auto; font-size: 1.2rem;}
}



/*--------------------------------------------------*/
/*			$box02
/*--------------------------------------------------*/
#box02{padding-bottom: 50px;}
#box02 .liquid-inner{-webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start;}
#box02 .column-box{width: 51.72%; padding: 50px 90px; border: 1px #000 solid;}
#box02 .info-box{width: 45.68%; padding: 40px; border: 1px #000 solid;}
#box02 h3{font-size: 2rem; text-align: center;}
#box02 ul{padding-bottom: 1rem;}
#box02 li{padding-bottom: 1rem;}
#box02 dt{font-size: 1.2rem;}
#box02 dd p{font-size: 1.4rem; font-weight: bold;}
#box02 dd p a{display: block;}
#box02 dd p a i{margin-left: 2em; font-size: .8rem; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box02 dd p a:hover i{margin-left: 3em;}
#box02 dd aside{font-size: 1.2rem;}
#box02 dd aside a{text-decoration: underline;}
#box02 dd aside a:hover{text-decoration: none;}
#box02 .btn{width: 250px; margin: 0 auto;}
#box02 .btn a{-webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 1em 0; border: 1px #002150 solid; background-color: #002150; color: #fff; font-size: 1.4rem; font-weight: bold; line-height: 1; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box02 .btn a:hover{background-color: #fff; color: #002150;}
#box02 .btn i{margin-left: 2em; font-size: .8rem; line-height: 1.4;}
#box02 .bnr{position: absolute; right: 0; bottom: 0; width: 45.68%; font-size: 0; line-height: 0;}
#box02 .bnr a{transition: opacity .4s ease;}
#box02 .bnr a:hover{opacity: .7;}
@media screen and (max-width: 767px) {
#box02{padding-bottom: 0;}
#box02 .liquid-inner{display: block;}
#box02 .column-box{width: 100%; margin-bottom: 4.6875%; padding: 4.6875% 6.25%;}
#box02 .info-box{width: 100%; margin-bottom: 4.6875%; padding: 4.6875% 6.25%;}
#box02 h3{font-size: 1.5rem;}
#box02 dt{font-size: .8rem;}
#box02 dd p{font-size: 1rem;}
#box02 dd p a i{margin-left: 1em; font-size: .5rem;-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box02 dd p a:hover i{margin-left: 1.2em;}
#box02 dd aside{font-size: .8rem;}
#box02 .btn{width: 49.1%;}
#box02 .btn a{font-size: 1rem;}
#box02 .btn i{margin-left: 1em; font-size: .5rem;}
#box02 .bnr{position: static; width: 100%; margin-bottom: 4.6875%;}
}


/*--------------------------------------------------*/
/*			$box03
/*--------------------------------------------------*/
#box03{padding-bottom: 60px;}
#box03 ul{-webkit-justify-content: space-between; justify-content: space-between;}
#box03 ul li{font-size: 0; line-height: 0;}
#box03 ul li a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box03 ul li a:hover{opacity: .7;}
@media screen and (max-width: 767px) {
#box03{padding-bottom: 4.6875%;}
#box03 ul{display: block;}
#box03 ul li{padding-bottom: 3.125%;}
}



/*--------------------------------------------------*/
/*			$box04
/*--------------------------------------------------*/
#box04{position: relative; padding: 60px 0; background: url(/images/index/box04_bg01_pc.jpg) no-repeat center top; background-size: cover;}
#box04 h3{position: relative; z-index: 3; padding-bottom: 2em; color: #fff; font-size: 2.4rem; line-height: 1; text-align: center; letter-spacing: .1em;}
#box04 a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box04 a:hover{opacity: .7;}
#box04 ul.flex{-webkit-justify-content: space-between; justify-content: space-between;}
#box04 ul.flex li{width: 48.4375%; padding-top: 27%;}
#box04 ul.flex li.sell{background: url(/images/index/box04_bg02_pc.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box04 ul.flex li.sell-form{background: url(/images/index/box04_bg03_pc.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box04 ul.flex li a{-webkit-flex-flow: column; flex-flow: column; -webkit-align-content: space-between; align-content: space-between; -webkit-align-items: center; align-items: center; padding: 40px 0 20px;}
#box04 ul.flex li a h4{padding-bottom: 1em; font-size: 2rem; line-height: 1.2;}
#box04 ul.flex li a p{display: none; padding-bottom: 1em; font-size: 1.4rem; line-height: 1.6;}
#box04 i{width: 40px; height: 40px; padding: 1.3rem 0 0 1.4rem; border-radius: 20px; background-color: #193761; color: #fff; font-size: 1.4rem; line-height: 1; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box04 a:hover i{-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg);}
@media screen and (max-width: 767px) {
#box04{padding: 7.8125% 3.125% 4.6875%; background: url(/images/index/box04_bg01_sp.jpg) no-repeat center top; background-size: cover;}
#box04 h3{padding-bottom: 1em; font-size: 1.5rem; letter-spacing: 0;}
#box04 ul.flex{display: block;}
#box04 ul.flex li{width: 100%; margin-bottom: 3.125%; padding-top: 35%;}
#box04 ul.flex li.sell{background: url(/images/index/box04_bg02_sp.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box04 ul.flex li.sell-form{background: url(/images/index/box04_bg03_sp.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box04 ul.flex li a h4{font-size: 1.5rem;}
#box04 ul.flex li a p{font-size: 1rem;}
#box04 i{width: 20px; height: 20px; padding: .65rem 0 0 .7rem; border-radius: 10px; font-size: .7rem;}
}



/*--------------------------------------------------*/
/*			$box05
/*--------------------------------------------------*/
#box05{position: relative; margin-bottom: 60px; padding: 60px 0; background: url(/images/index/box05_bg01_pc.jpg) no-repeat center top; background-size: cover;}
#box05 h3{position: relative; z-index: 3; padding-bottom: 2em; font-size: 2.4rem; line-height: 1; text-align: center; letter-spacing: .1em;}
#box05 a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box05 a:hover{opacity: .7;}
#box05 ul.flex{-webkit-justify-content: space-between; justify-content: space-between;}
#box05 ul.flex li{width: 48.4375%; padding-top: 27%;}
#box05 ul.flex li.article-info{background: url(/images/index/box05_bg02_pc.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box05 ul.flex li.library{background: url(/images/index/box05_bg03_pc.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box05 ul.flex li a{-webkit-flex-flow: column; flex-flow: column; -webkit-align-content: space-between; align-content: space-between; -webkit-align-items: center; align-items: center; padding: 40px 0 20px;}
#box05 ul.flex li a h4{padding-bottom: 1em; font-size: 2rem; line-height: 1.2;}
#box05 ul.flex li a p{display: none; padding-bottom: 1em; font-size: 1.4rem; line-height: 1.6;}
#box05 i{width: 40px; height: 40px; padding: 1.3rem 0 0 1.4rem; border-radius: 20px; background-color: #193761; color: #fff; font-size: 1.4rem; line-height: 1; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box05 a:hover i{-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg);}
@media screen and (max-width: 767px) {
#box05{margin-bottom: 9.375%; padding: 7.8125% 3.125% 4.6875%; background: url(/images/index/box05_bg01_sp.jpg) no-repeat center top; background-size: cover;}
#box05 h3{padding-bottom: 1em; font-size: 1.5rem; letter-spacing: 0;}
#box05 ul.flex{display: block;}
#box05 ul.flex li{width: 100%; margin-bottom: 3.125%; padding-top: 35%;}
#box05 ul.flex li.article-info{background: url(/images/index/box05_bg02_sp.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box05 ul.flex li.library{background: url(/images/index/box05_bg03_sp.jpg) no-repeat center top #fff; background-size: 100% auto;}
#box05 ul.flex li a h4{font-size: 1.5rem;}
#box05 ul.flex li a p{font-size: 1rem;}
#box05 i{width: 20px; height: 20px; padding: .65rem 0 0 .7rem; border-radius: 10px; font-size: .7rem;}
}


/*--------------------------------------------------*/
/*			$box06
/*--------------------------------------------------*/
#box06{padding-bottom: 80px;}
#box06 h3{padding-bottom: 2em; font-size: 2.4rem; line-height: 1; text-align: center;}
#box06 ul{-webkit-justify-content: space-around; justify-content: space-around;}
#box06 li{width: 32%;}
#box06 li a{-webkit-flex-flow: column; flex-flow: column; padding: 20px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box06 li a .webfont{margin-bottom: 2rem; color: #2d486d; font-size: 10rem; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box06 li a p{font-size: 2rem; font-weight: bold; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box06 li a p i{margin-left: 2em; font-size: 1.2rem;}
#box06 li a:hover{background-color: #2d486d;}
#box06 li a:hover .webfont{color: #fff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg);}
#box06 li a:hover p{color: #fff;}
@media screen and (max-width: 767px) {
#box06{padding-bottom: 25%;}
#box06 h3{font-size: 1.5rem;}
#box06 li a{padding: 2.34375% 0;}
#box06 li a .webfont{margin-bottom: 1rem; font-size: 5rem;}
#box06 li a p{font-size: 1.2rem;}
#box06 li a p i{margin-left: 1em; font-size: .8rem;}
#box06 li a:hover{background-color: #2d486d;}
#box06 li a:hover .webfont{color: #fff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg);}
#box06 li a:hover p{color: #fff;}
}


/*--------------------------------------------------*/
/*			$box07
/*--------------------------------------------------*/
#box07{position: relative; padding: 60px 0; background: url(/images/index/box07_bg01_pc.jpg) no-repeat center top; background-size: cover;}
#box07 h3{position: relative; z-index: 3; padding-bottom: 2em; color: #333; font-size: 2.4rem; line-height: 1; text-align: center; letter-spacing: .1em;}
#box07 a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#box07 a:hover{opacity: .7;}
#box07 ul{
	font-size:0;
	line-height:0;
	display:flex;
	display:-webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	flex-direction: column;
}
#box07 li{
	margin:0 0 40px;
}
#box07 li:last-child{
	margin:0;
}
@media screen and (max-width: 767px) {
#box07{padding: 7.8125% 3.125% 4.6875%; background: url(/images/index/box07_bg01_sp.jpg) no-repeat center top; background-size: cover;}
#box07 h3{padding-bottom: 1em; font-size: 1.5rem; letter-spacing: 0;}
#box07 ul{
		display:block;
}
#box07 li{
	margin:0 0 2%;
}
#box07 li:last-child{
	margin:0;
}
}

/*--------------------------------------------------*/
/*			$boxlp
/*--------------------------------------------------*/
#boxlp p{
	font-size:0;
	line-height:0;
	margin:0 0 50px;
}
#boxlp p a{
	opacity:1;
	transition:opacity .5s ease 0s;
}
#boxlp p a:hover{
	opacity:0.5;
}
@media screen and (max-width: 767px) {
	#boxlp p{
		margin:0 0 7.8125%;
	}
}