/* --------------------------------------------------
Stylesheet: top.css
Description: topページスタイル
-------------------------------------------------- */

/* hero start */

.hero {
padding:0;
margin-top:82px;
}

.hero .hero-catch-wapper{
position:absolute;
top:10%;
left:50%;
transform: translateX(-50%);
color:#FFF;
width:100%;
text-align:center;
}

.hero .hero-catch-wapper h1{
font-size:3.2rem;
font-weight:800;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* hero end */


/* Top sec01 start */

.top-sec01 h3{
font-size:1.4rem;
text-align:center;
line-height:1.8;
}

.top-sec01-content-wapper{
padding:40px;
}

/* Top sec01 end */


/* Top sec02 start */


/* Top sec02 end */


/* Top sec03 start */

.top-sec03 h3{
font-size:1.4rem;
text-align:center;
color:#FFF;
}

.top-sec03-content-wapper{
position:relative;
}

.top-sec03-content-inner{
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}

/* Top sec03 end */

/* ########################
 * Responsive design CSS
 * ######################## */

@media (max-width: 1399.98px) {
.hero .hero-catch-wapper h1{
font-size:3.3vw;
}

}

@media (min-width: 992px) and (max-width: 1199.98px) {
.top-sec02 .btn1{
width:300px;
}
}

@media (max-width: 1199.98px) {
.hero{
margin-top:82px;
}
}

@media (max-width: 991.98px) {
.top-sec02 img{
max-width:60%;
margin:0 auto;
}
}

@media (max-width: 767.98px) {
.hero{
margin-top:62px;
}
.hero .hero-catch-wapper h1{
font-size:5.4vw;
}
}

@media (max-width: 575.98px) {
.top-sec01 h3,.top-sec03 h3{
font-size:4.1vw;
}
.top-sec03-content-inner{
width:80%;
}
.top-sec02 .btn1{
width:80%;
}
}