@charset "utf-8";

/*--------------------------------------
heading
---------------------------------------*/
.l-main-area--index h1:not([class]) {
position: relative;
margin: 0 0 8rem 0;
padding: 0;
color: #01326d;
font-size: 3.6rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
}
.l-main-area--index h1:not([class])::before {
position: absolute;
left: 50%;
bottom: -3rem;
transform: translateX(-50%);
width: 10rem;
height: 0.4rem;
background: #b72ca1;
content: "";
}

.l-main-area--index h2:not([class]) {
position: relative;
margin: 8rem 0 3rem 0;
padding: 0.6rem 2rem 1rem 0.3rem;
border-bottom: 3px solid #01326d;
color: #01326d;
font-size: 3.6rem;
font-weight: 900;
line-height: 1.4;
}

.l-main-area--index h3:not([class]) {
position: relative;
margin: 8rem 0 2rem 0;
padding: 1rem 2rem 1.2rem 2rem;
background: #01326d url(img/title_bg_01.png) no-repeat right center;
background-size: auto 100%;
color: #fff;
font-size: 2.6rem;
font-weight: 900;
line-height: 1.4;
}

.l-main-area--index h4:not([class]),
.l-main-area--index h5:not([class]),
.l-main-area--index h6:not([class]) {
position: relative;
margin: 3rem 0 2rem 0;
padding: 0 2rem 0 1.2rem;
border-left: 7px solid #b72ca1;
color: #01326d;
font-size: 2.2rem;
font-weight: 900;
line-height: 1.4;
}

.l-main-area--index h2:not([class]) a,
.l-main-area--index h3:not([class]) a,
.l-main-area--index h4:not([class]) a,
.l-main-area--index h5:not([class]) a,
.l-main-area--index h6:not([class]) a {
display: block;
padding: 0 2rem 0 0;
background: url(img/arrow01_navy.svg) no-repeat right center;
background-size: 1rem auto;
color: inherit;
text-decoration: none;
}
.l-main-area--index h3:not([class]) a {
background: url(img/arrow01_white.svg) no-repeat right center;
background-size: 1rem auto;
}


/*--------------------------------------
mv
---------------------------------------*/
.l-mv {
position: relative;
min-height: 51rem;
margin: 0 0 8rem 0;
}
.l-mv::before {
position: absolute;
left: 0;
bottom: 0;
width: 64%;
height: 100%;
background: url(img/mv_bg_01.jpg) no-repeat left center;
background-size: cover;
content: "";
}
.l-mv-wrapper {
width: 65%;
min-width: 100rem;
margin: 0 auto;
}
.l-mv-box {
position: relative;
width: 55%;
min-height: 51rem;
padding: 4rem 0;
color: #fff;
}
.l-mv-box::before {
position: absolute;
left: calc(100% + 6rem);
bottom: 0;
width: 48.5rem;
height: 48.4rem;
background: url(img/mv_bg_02.png) no-repeat left top;
background-size: contain;
content: "";
}
.l-mv-logo {
width: 22rem;
margin: 0 0 4rem 0;
}
.l-mv-title {
margin: 0 0 3rem 0;
font-size: 3rem;
font-weight: 900;
line-height: 1.4;
}
.l-mv-title .txt-1 {
display: inline-block;
position: relative;
top: -0.5rem;
margin: 0 0.5rem 0 0;
padding: 0 0.5rem;
background: #fff;
color: #01326d;
font-size: 1.8rem;
line-height: 3.4rem;
}
.l-mv-title .txt-2 {
font-size: 2.4vw;
}
.l-mv-title .txt-2 span {
color: #ff71e9;
}
.l-mv-txt p:not([class]) {
margin: 1em 0 0 0;
}
















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

/*--------------------------------------
heading
---------------------------------------*/
.l-main-area--index h1:not([class]) {
margin: 0 0 4rem 0;
font-size: 2.4rem;
}
.l-main-area--index h1:not([class])::before {
bottom: -2rem;
}

.l-main-area--index h2:not([class]) {
margin: 8rem 0 2rem 0;
padding: 0.6rem 1.5rem 1rem 0.2rem;
font-size: 2.4rem;
}

.l-main-area--index h3:not([class]) {
margin: 6rem 0 2rem 0;
padding: 1rem 1.5rem;
background-size: 100% 100%;
font-size: 2.0rem;
}

.l-main-area--index h4:not([class]),
.l-main-area--index h5:not([class]),
.l-main-area--index h6:not([class]) {
margin: 3rem 0 1.5rem 0;
padding: 0 1.5rem 0 1rem;
font-size: 1.8rem;
}


/*--------------------------------------
mv
---------------------------------------*/
.l-mv {
position: relative;
min-height: auto;
margin: 0 0 4rem 0;
}
.l-mv::before {
display: none;
content: none;
}
.l-mv-wrapper {
width: 100%;
background: url(img/mv_bg_01.jpg) no-repeat center center;
background-size: cover;
min-width:auto;
}
.l-mv-box {
width: 100%;
min-height: auto;
padding: 2rem 1.5rem 3rem 1.5rem;
}
.l-mv-box::before {
display: none;
content: none;
}
.l-mv-logo {
position: relative;
width: 18rem;
margin: 0 auto 3rem auto;
z-index: 1;
}
.l-mv-title {
position: relative;
margin: 0 0 3rem 0;
padding: 0 40% 0 0;
font-size: 1.8rem;
}
.l-mv-title::before {
position: absolute;
right: 0;
top: calc(50% + 0.8rem);
transform: translateY(-50%);
width: 38%;
height: 16rem;
background: url(img/mv_bg_02.png) no-repeat right center;
background-size: contain;
content: "";
}
.l-mv-title .txt-1 {
top: -0.3rem;
margin: 0 0.4rem 0 0;
padding: 0 0.4rem;
font-size: 1.5rem;
line-height: 2.2rem;
}
.l-mv-title .txt-2 {
font-size: 2.5rem;
}

}