@charset "utf-8";

body {
	#main {
		padding-bottom:60px;
	}
}

#titlewrap {
    .wrap {
		background:url(../img/common/mv_bg.png) no-repeat calc(50vw - 540px - 317px) 0/317px auto,url(../img/common/mv_bg2.png) repeat-y calc(50vw - 540px - 317px) 0/317px auto #FFFFFF;
		padding:0;
		position:relative;
		&::before {
			content:'';
			width:calc(50vw - 540px);
			height:500px;
			display:block;
			background:url(../img/common/mv_bg.png) no-repeat calc(50vw - 540px - 317px) 0/317px auto;
			position:absolute;
			left:0;
			top:0;
			z-index: 0;
		}
        .contents {
			max-width: 1300px;
			position:relative;
			z-index:1;
			/* background: rgb(0,61,150);
			background: linear-gradient(90deg, rgba(0,61,150,1) 10%, rgba(255,255,255,1) 10%); */
            .titlewrap {
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                border-radius:1em;
                .title {
                    width:calc(100% - 60px);
                    max-width:1000px;
                    height: 280px;
                    margin:0 auto;
                    padding-bottom:20px;
                    display:grid;
					grid-template-columns:auto;
                    align-items:end;
                    justify-content:start;
                    h1 {
                        font-size:2.0rem;
	                    padding:1em 5em 1em 1em;
	                    border-radius:1em;
	                    background: rgb(255,255,255);
	                    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	                    display:grid;
						span {
								display:block;
								font-family: "Lato", sans-serif;
								color:#4a647c;
							}
                        &::after {
                            content:'';
		                    height:2px;
		                    border-top:1px solid #4a647c;
		                    border-bottom:1px solid #4a647c;
		                    grid-area:2/1/3/2;
		                    margin:.25em 0;
							max-width: 10em;
                        }
                    }
                }
            }
            .rank-math-breadcrumb {
                max-width:1100px;
                margin:0 auto;
                font-size:1.5rem;
                padding:1em 0;
                p {
                    line-height: 1.5;
                    padding-left: 3.5em;
                    a {
                        color:#0078dc;
                    }
                }
            }
        }
    }
}

#firstContent {
    .wrap {
		background:url(../img/common/mv_bg2.png) repeat-y calc(50vw - 540px - 317px) 0/317px auto #FFFFFF;
        padding:30px 0 45px;
		.contents {
			max-width: 1000px;
			/* background: rgb(0,61,150);
			background: linear-gradient(90deg, rgba(0,61,150,1) 10%, rgba(255,255,255,1) 10%); */
			.contents_inner {
				max-width: 900px;
				margin:0 auto;
				width: calc(100% - 120px);
				h2 {
					font-size:2.0rem;
					color:#4a647c;
					line-height:1.5;
					margin-bottom:1.33em;
				}
				p {
					font-size:1.5rem;
					line-height:1.8;
					color:#4a647c;
					margin-bottom:2em;
				}
				.btnwrap {
					max-width: 640px;
					margin:0 auto;
					display: flex;
					flex-wrap:wrap;
					align-items: center;
					justify-content: center;
					gap: 30px;
					a {
						display: grid;
						grid-template-columns: repeat(2,auto);
						grid-gap:.5em;
						align-items:center;
						justify-content:center;
						background-color: #d5e8f8;
						color:#003d96;
						font-size: 1.4rem;
						padding:0 1em;
						height:3em;
						font-weight: 600;
						border-radius:.5em;
						&::after {
							color:#003d96;
							font-size:1.4em;
						}
					}
				}
			}
        }
    }
}
#mainContent {
	&.column {
		.wrap {
			display:grid;
			grid-template-columns:auto 1100px;
			grid-gap:30px;
			align-items:start;
			justify-content:center;
			padding: 0;
			& > span {
				font-size:1.2rem;
				color:#FFFFFF;
				background-color:#b6b3b3;
				margin-top;
				line-height:2;
				margin-top:3em;
				padding:0 1em;
				border-radius:.33em;
			}
			.contents {
				border-left:1px solid #003c8a;
				position:relative;
				width:100%;
				background-color:#f1ecec;
				padding: 30px 30px 60px;
				&::before,&::after {
					content:'';
					display:block;
					background-color:#003c8a;
					width:12px;
					height:10px;
					position:absolute;
					left:-6px;
					top:0;
					clip-path:polygon(0 0,100% 0,50% 100%);
				}
				&::after {
					top:auto;
					bottom:0;
					clip-path:polygon(50% 0,100% 100%,0 100%);
				}
			}
		}
	}
    .wrap {
		padding-top: 30px;
        .contents {
			h2 {
				font-size:2.4rem;
				font-weight:500;
				color:#003d96;
				line-height:1.3;
				padding:.33em .5em .2em .66em;
				border-bottom:1px  solid #000000;
				margin-bottom:1.5em;
				background-repeat:no-repeat;
				background-position:left top;
				background-size:5px 100%;
				background-image: linear-gradient(0deg, rgba(74,100,124,1) 0%, rgba(235,235,236,0) 100%);
				&::before {
					content:'';
					width:5px;
					height:100%;
					background-image: rgb(74,100,124);
background: linear-gradient(0deg, rgba(74,100,124,1) 0%, rgba(235,235,236,0) 100%);
				}
			}
			.contents_inner {
				&:not(:last-child) {
					margin-bottom:60px;
				}
				.contbox {
					padding:0 30px;
				}
				p {
					font-size:1.6rem;
					line-height:1.8;
				}
			}
        }
    }
}

@media screen and (max-width:1360px){
	
	#titlewrap {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -177px 0/317px auto;
			&::before {
				content:none;
			}
		}
	}
	
	#firstContent {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -177px 0/317px auto;
		}
	}
	
}


@media screen and (max-width:1320px){
	
	#titlewrap {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -250px 0/317px auto;
		}
	}
	
	#firstContent {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -250px 0/317px auto;
		}
	}

	#header{
		.menu-gmenu-container {
			background:url(../img/common/mv_bg2.png) repeat-y -250px 0/317px auto;
		}
	}
	
	#mainContent {
		&.column {
			.wrap {
				display:block;
				& > span {
					display:none;
				}
			}
		}
	}
}

@media screen and (max-width:1024px){

	#firstContent {
	    .wrap {
			.contents {
				.contents_inner {
					.btnwrap {
						a {
							font-size:1.3rem;
						}
					}
				}
			}
		}
	}
	#mainContent {
		&.column {
			.wrap {
				.contents {
					border-left:none;
					&::before,&::after {
						content:none;
					}
				}
			}
		}
	}

}

@media screen and (max-width:768px){

	#titlewrap {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -280px 0/317px auto;
	        .contents {
				padding-top:10px;
	            .titlewrap {
					border-radius:.5em;
	                .title {
	                    width:calc(100% - 20px);
	                    height: 130px;
	                    padding-bottom:10px;
						grid-template-columns:1fr;
	                    h1 {
	                        font-size:1.6rem;
	                        padding:.75em 1em;
	                        border-radius:.5em;
	                    }
	                }
	            }
	            .rank-math-breadcrumb {
	                font-size:1.2rem;
	                padding:.75em 0;
					text-align:right;
					p {
						padding-left: 0;
					}
	            }
	        }
	    }
	}

	#firstContent {
	    .wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -280px 0/317px auto;
	        padding:20px 0 30px;
			.contents {
				.contents_inner {
					width: calc(100% - 30px);
					margin-right:0;
					h2 {
						font-size:1.6rem;
					}
					p {
						font-size:1.4rem;
						line-height:1.6;
					}
					.btnwrap {
						gap: 10px;
					}
				}
	        }
	    }
	}
	#mainContent {
		&.column {
			.wrap {
				.contents {
					padding: 20px 20px 45px;
				}
			}
		}
	    .wrap {
			padding-top: 20px;
	        .contents {
				h2 {
					font-size:1.8rem;
				}
				.contents_inner {
					&:not(:last-child) {
						margin-bottom:45px;
					}
					.contbox {
						padding:0 10px;
					}
					p {
						font-size:1.4rem;
						line-height:1.6;
					}
				}
	        }
	    }
	}

}