@charset "utf-8";

/* -----------------------------------------------------------------
 base
----------------------------------------------------------------- */
#main {
	padding-bottom:0 !important;
}
@media print, screen and (max-width: 1023px) {
.wrap_contents {
	padding-bottom:3em;
	background-image: linear-gradient(90deg, transparent calc(100% - 1px), #ebebeb 1px);
	background-size: calc((100% - 8vw) / 4);
	background-position:calc(4vw + 1px) top;
}
.wrap_contents .cmn_wrap_cover {
	margin-left:4vw;
	margin-right:4vw;
}
}

@media print, screen and (min-width: 1024px) {
.wrap_contents {
}
.wrap_contents .cmn_wrap_cover {
	width:94%;
	max-width:1120px;
	margin-left:auto;
	margin-right:auto;
	background-image: linear-gradient(-90deg, transparent calc(100% - 1px), #ebebeb 1px);
	background-size: calc((100% - 1px) / 4);
	background-position:left top;
	padding-bottom:5em;
}
}

/* -----------------------------------------------------------------
 cmn_box_intro
----------------------------------------------------------------- */
.cmn_box_intro {
	text-align:center;
}
@media print, screen and (max-width: 1023px) {
.cmn_box_intro {
	padding-top:40px;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_box_intro {
	padding-top:80px;
	font-size:18px;
	font-size:1.13rem;
}
}



/* -----------------------------------------------------------------
 cmn_box_layout
----------------------------------------------------------------- */
.cmn_box_layout {
}
@media print, screen and (max-width: 1023px) {
.cmn_box_layout {
	display: flex;
	flex-wrap: wrap;
	margin-top:5px;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_box_layout {
	display: flex;
	flex-wrap: wrap;
	margin-top:15px;
}
}


/* -----------------------------------------------------------------
 cmn_cover
----------------------------------------------------------------- */
.cmn_cover {
	flex-shrink: 0;
}
@media print, screen and (max-width: 479px) {
.cmn_cover {
	width:calc((100% - 3.2vw) / 2);
	margin-top:35px;
	margin-left:3.2vw;
}
.cmn_cover:nth-of-type(2n-1) {
	margin-left:0;
}
}
@media print, screen and (min-width: 480px) and (max-width: 1023px) {
.cmn_cover {
	width:calc((100% - 5.6vw) / 3);
	margin-top:35px;
	margin-left:2.8vw;
}
.cmn_cover:nth-of-type(3n-2) {
	margin-left:0;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_cover {
	display: flex;/*IE対策*/
	flex-direction:column;/*IE対策*/
	width:calc((100% - 120px) / 3);
	margin-top:65px;
	margin-left:60px;
}
.cmn_cover:nth-of-type(3n-2) {
	margin-left:0;
}

}


/* -----------------------------------------------------------------
 cmn_cover_img
----------------------------------------------------------------- */
.cmn_cover_img {
	position:relative;
}
.cmn_cover_img .label {
	position:absolute;
	bottom:0;
	background:#fff;
}
@media print, screen and (max-width: 1023px) {
.cmn_cover_img .label {
	padding-top:4px;
	padding-right:12px;
}
.cmn_cover_img .label >img {
	width:45px;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_cover_img{
	overflow: hidden;
	padding-top: 63.3%;
}
.cmn_cover_img .cover{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	transition: .6s;
}

.cmn_cover_img .label {
	padding-top:5px;
	padding-right:8px;
}
.cmn_cover_img .label >img {
	width:60px;
}
/*----- hover -----*/
body:not(.ios) .cmn_cover:hover .cmn_cover_img .cover{
	transform:translate(-50%, -50%) scale(1.1);
}
}


/* -----------------------------------------------------------------
 cmn_cover_ttl
----------------------------------------------------------------- */
.cmn_cover_ttl{
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 12px;
	font-weight:bold;
	line-height:1.2;
}
.cmn_cover_ttl::after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
}

@media print, screen and (max-width: 1023px) {
.cmn_cover_ttl{
	min-height:3.3em;
	padding:6px 18px 6px 0;
	background:url(../img/arrow_std_black.svg) no-repeat right center;
	background-size:6px 12px;
}
.cmn_cover_ttl::after{
	background-image: linear-gradient(90deg, #043c83 50px, #b4931c 0%);
	background-size: 100%;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_cover_ttl{
	min-height:3em;
	padding:6px 18px 6px 0;
	background:url(../img/arrow_std_black.svg) no-repeat right 8px center;
	background-size:5px 10px;
	font-size:20px;
	font-size:1.25rem;
}
.cmn_cover_ttl::after{
	background-image: linear-gradient(90deg, #043c83 70px, #b4931c 0%);
	background-size: 100%;
}
/*----- hover -----*/
body:not(.ios) .cmn_cover_ttl{
	transition:all .3s;
}
body:not(.ios) a.cmn_cover:hover .cmn_cover_ttl,
body:not(.ios) a.cmn_cover_ttl:hover{
	background:url(../img/arrow_std_black.svg) no-repeat right center;
	background-size:5px 10px;
}
}





/* -----------------------------------------------------------------
 cmn_cover_menu
----------------------------------------------------------------- */
.cmn_cover_menu{
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 12px;
	line-height:1.2;
	padding:6px 18px 6px 0;
}
.cmn_cover_ttl + .cmn_cover_menu{
	margin-top:10px;
}
.cmn_cover_menu::after{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background-color: #8b8b8b;
}
.cmn_cover_menu >*:nth-of-type(1){
	flex-shrink: 0;
}

@media print, screen and (max-width: 1023px) {
.cmn_cover_menu{
	min-height:3em;
	background:url(../img/arrow_std_black.svg) no-repeat right center;
	background-size:6px 12px;
}
}

@media print, screen and (min-width: 1024px) {
.cmn_cover_menu{
	min-height:3em;
	background:url(../img/arrow_std_black.svg) no-repeat right 8px center;
	background-size:5px 10px;
}
.cmn_cover_menu::after{
	background-image: linear-gradient(90deg, #043c83 70px, #b4931c 0%);
	background-size: 100%;
}

/*----- hover -----*/
body:not(.ios) .cmn_cover_menu{
	transition:all .3s;
}
body:not(.ios) a.cmn_cover_menu:hover{
	background:url(../img/arrow_std_black.svg) no-repeat right center;
	background-size:5px 10px;
}

}




