@charset "utf-8";

/*--------------------------------------
mv
---------------------------------------*/
.l-mv {
min-height: 56.6rem;
margin: 0 0 5rem 0;
padding: 6rem 0;
background: url(img/mv_bg_01.png) no-repeat left -4rem top 14rem, url(img/mv_bg_03.jpg) no-repeat right center;
background-size: auto, auto 100%;
}
.l-mv-wrapper {
position: relative;
width: 100rem;
margin: 0 auto;
}
.l-mv-logo {
width: 22rem;
margin: 0 0 2rem 0;
}
.l-mv-title {
margin: 0 0 0.5rem 0;
color: #000;
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
}
.l-mv-title span {
font-size: 4rem;
}
.l-mv-title span span {
display: inline-block;
margin: 1rem 0.5rem 0 0;
padding: 0.1rem 0.5rem 0.4rem 0.5rem;
background: #2e2e2e;
color: #fff;
text-shadow: none;
}
.l-mv-txt {
max-width: 78rem;
}
.l-mv-txt p:not([class]) {
margin: 0;
max-width: 69rem;
padding: 1.5rem;
background: rgba(255,255,255,0.8);
}
.l-mv-txt p:not([class]) > span:not([class]) {
background: linear-gradient(transparent 70%, #f6c891 70%);
font-weight: 700;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 3rem 0 0 0;
}
.btns .btn {
width: calc((100% - 3.6rem) / 2);
}
.btns .btn a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
min-height: 8rem;
margin: 0 auto;
padding: 2rem 4rem;
background: #3f4448 url(img/arrow01_white.svg) no-repeat right 2rem center;
background-size: 1rem auto;
border: 3px solid #3f4448;
border-radius: 6rem;
box-sizing: border-box;
color: #fff;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
backface-visibility: hidden;
transition: 0.2s;
will-change: opacity;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btns .btn a:hover {
text-decoration: none;
opacity: 0.7;
}
.btns .btn-1 a {
padding: 2rem 5rem;
background: #fff url(img/arrow01_gray_down.svg) no-repeat right 2rem center;
background-size: auto 1rem;
color: #3f4448;
}













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

/*--------------------------------------
mv
---------------------------------------*/
.l-mv {
min-height: auto;
margin: 0;
padding: 1rem 1.5rem 4rem 1.5rem;
background: none;
}
.l-mv-wrapper {
width: 100%;
}
.l-mv-logo {
margin: 0 auto 0.5rem auto;
text-align: center;
}
.l-mv-title {
margin: 0 -1.5rem 1rem -1.5rem;
padding: 1.5rem;
background: url(img/mv_bg_01.png) no-repeat left -2rem top 2rem, url(img/mv_bg_03.jpg) no-repeat right center;
background-size: auto 50%, auto 100%;
color: #000;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4;
}
.l-mv-title span {
font-size: 2.4rem;
}
.l-mv-txt {
max-width: 100%;
}
.l-mv-txt p:not([class]) {
max-width: 100%;
padding: 0;
background: none;
}
.btns {
display: block;
margin: 0;
}
.btns .btn {
width: 90%;
margin: 2rem auto 0 auto;
}
.btns .btn a {
min-height: 7rem;
font-size: 1.5rem;
}

}