@charset "UTF-8";
/* CSS Document */

 /** --------------------------------------------------
block02
 -------------------------------------------------- **/
#block02-mail_box{
margin: 0 auto;
width:100%;
padding: 5% 0 10% 0 ;
position: relative;
}

#block02-mail_box article{
margin: 0 auto;
padding: 0% 0 3%;
width: 85%;
letter-spacing: 0.05em;
background-color: #fff;
border-radius: 20px;
}

/*  title */
#block02-mail_box .mail-contact-title{
margin: 0 auto;
width: 30%;
padding: 1% 0;
font-size: 1.5vw;
font-weight: 500;
color: #fff;
background-color: #ea5413;
border-radius: 50px;
border: solid 2px #fff;
position: absolute;
top:5.5%;
left: 50%;
transform: translateX(-50%);
}
/*  title */

 
 /* メディアクエリ */
/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#block02-mail_box .mail-contact-title{
width: 35%;
font-size: 1.8vw;
padding: 1.5% 0;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */ 
#block02-mail_box{padding: 9% 0 10% 0 ;}

#block02-mail_box .mail-contact-title{
width: 43%;
font-size: 2vw;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block02-mail_box{padding: 10% 0 7%;}

#block02-mail_box .mail-contact-title{
width: 50%;
font-size: 2.5vw;
top:5%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block02-mail_box{padding: 12% 0 9%;}

#block02-mail_box .mail-contact-title{
width: 60%;
font-size: 3.1vw;
padding: 1.7% 0;
top:4.5%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block02-mail_box article{
width: 90%;
border-radius: 15px;
}

#block02-mail_box{padding: 12% 0 6%;}

#block02-mail_box .mail-contact-title{
width: 65%;
font-size: 3.3vw;
padding: 1.6% 0;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#block02-mail_box{padding: 17% 0 5%;}
#block02-mail_box .mail-contact-title{
width: 75%;
font-size: 4vw;
padding: 1.6% 0;
}
 /* ---------------------------------- */
}