@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */	
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/* flex */	
.flex, .flexA, .flexB, .flexC {
	display: flex;
	flex-wrap: wrap;
}
.flexA {
	justify-content: space-around;
}
.flexB {
	justify-content: space-between;
}
.flexC {
	justify-content: center;
}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/

.comBox {
	max-width: 1120px;
	margin: 0 auto;
}

@media all and (max-width: 896px) {
.comBox {
	margin: 0 15px;
}
}
/**/
.comSec01 {
	margin-bottom: 55px;
}
.comSec01 h2 {
	margin-bottom: 56px;
	text-align: center;
}
.comSec01 .comUl {
	display: flex;
	flex-wrap: wrap;
}
.comSec01 .comUl li {
	min-height: 180px;
	width: 146px;
	background-color: #D9DFE5;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.comSec01 .comUl li::before {
	position: absolute;
	content: '';
	background: url("../../img/common/arrow01.png") no-repeat;
	background-size: 34px auto;
	width: 34px;
	height: 34px;
	top: 50%;
	transform: translateY(-50%);
	left: -25px;
}
.comSec01 .comUl li {
	margin-right: 20px;
}
.comSec01 .comUl li:nth-of-type(5n) {
	margin-right: 0;
}
.comSec01 .comUl li:nth-of-type(5n+1)::before {
	display: none;
}
.comSec01 .comUl li.special {
	width: 456px;
	background-color: #8E7A3C;
}
.comSec01 .comUl li.special {
	justify-content: space-between;
}
.comSec01 .comUl li.special::before {
	background-image: url("../../img/common/arrow02.png");
	background-size: 48px auto;
	width: 48px;
	height: 48px;
	left: -35px;
}
.comSec01 .comUl li.special .txtBox {
	width: 225px;
	text-align: center;
}
.comSec01 .comUl li.special h3 {
	margin-bottom: 10px;
}
.comSec01 .comUl li.special .img {
	width: 230px;
	margin: -10px -10px -10px 0;
}
.comSec01 .page {
	position: relative;
}
.comSec01 .page .pageTop {
	position: absolute;
	bottom: 0;
	right: -40px;
}
.comSec01 .page .pageTop a {
	display: inline-block;
}

@media all and (max-width: 896px) {
.comSec01 .comUl {
	display: block;
}
.comSec01 .comBox {
	margin: 0 30px;
}
.comSec01 .comUl li {
	width: auto!important;
	margin: 0 0 20px;
	min-height: 80px;
}
.comSec01 .comUl li.special {
	padding-top: 20px;
	display: block;
}
.comSec01 .comUl li.special .txtBox, .comSec01 .comUl li.special .img {
	width: auto;
}
.comSec01 .comUl li.special .txtBox {
	margin-bottom: 20px;
}
.comSec01 .comUl li.special .img {
	margin: 0;
}
.comSec01 .comUl li.special .img img {
	width: 100%;
}
.comSec01 .comUl li::before {
	top: -30px;
	left: 50%!important;
	transform: translate(-50%, 0)!important;
	background-size: 40px auto;
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../../img/common/arrow03.png");
}
.comSec01 .comUl li:first-of-type::before {
	display: none!important;
}
.comSec01 .comUl li.special {
	margin-top: 20px;
}
.comSec01 .comUl li.special::before {
	background-size: 40px;
	width: 40px;
	height: 40px;
	top: -30px;
	background-image: url("../../img/common/arrow04.png");
}
.pageTop {
	margin-bottom: 25px;
	position: static;
	text-align: center;
}
	.pageTop a {
		display: inline-block;
		
	}
	.pageTop img {
		width: 12px;
	}
}
.comSec02 {
	margin-bottom: 120px;
}
.comSec02:last-of-type {
	margin-bottom: 0;
}
.comSec02 h2 {
	padding-bottom: 105px;
	margin-bottom: 30px;
	position: relative;
}
.comSec02 h2::after {
	position: absolute;
	content: '';
	height: 83px;
	width: 1px;
	background-color: #fff;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}
.comSec02 a {
	display: block;
	background-color: #000F1C;
	padding: 50px 0 65px;
	text-align: center;
}
.comSec02 a .txt {
	padding: 45px;
	box-sizing: border-box;
	margin-top: -45px;
}
.btn05 {
	position: relative;
	display: block;
	text-decoration: none;
	outline: none;
	transition: all .3s;
	transition-delay: .7s;
}
.btn05::before, .btn05::after {
	content: "";
	position: absolute;
	width: 0;
	height: 1px;
	background: #fff;
	transition: all 0.2s linear;
}
.btn05 span::before, .btn05 span::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 0;
	background: #fff;
	transition: all 0.2s linear;
}

@media all and (min-width: 897px) {
.comSec02 a:hover .btn05::before, .comSec02 a:hover .btn05::after {
	width: 100%;
}
.comSec02 a:hover .btn05 span::before, .comSec02 a:hover .btn05 span::after {
	height: 100%;
}
}
.bordercircle1::before {
	right: 0;
	top: 0;
	transition-delay: 0.2s;
}
.bordercircle1::after {
	left: 0;
	bottom: 0;
	transition-delay: 0.2s;
}
/*縦線が出現*/
.bordercircle1 span::before {
	left: 0;
	top: 0;
}
.bordercircle1 span::after {
	right: 0;
	bottom: 0;
}

@media all and (max-width: 896px) {
.comSec02 {
	margin-bottom: 60px;
}
.comSec02 .comBox {
	margin: 0 30px;
}
.comSec02 a {
	padding: 40px 0;
}
.comSec02 h2 {
	padding-bottom: 80px;
}
.comSec02 h2::after {
	height: 40px;
	bottom: auto;
	top: 35px;
}
.comSec02 a .txt {
	padding: 30px 15px 20px;
border: 1px solid #fff;
margin-top: -75px;
}
}

@media all and (min-width: 897px) {
.scroll a:hover {
	opacity: 0.7;
}
.pageTop a:hover {
	opacity: 0.7;
}
}
.fadeInUp {
	opacity: 0;
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
}
.fadeInUp.on {
	transition: all ease 1.3s;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}