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

 /** --------------------------------------------------
block01
 -------------------------------------------------- **/
#block01{
margin: 0 auto;
width:100%;
background-color: #ea5413;
}

#block01 article{
margin: 0 auto;
padding: 2% 0 3%;
width: 45%;
letter-spacing: 0.05em;
background-color: #fff;
border-radius: 20px;
position: relative;
}

#block01 article .tel-box{
margin: 0 auto;
padding: 1% 0 0 0 ;
width: 100%;
}

/*  title */
#block01 article .tel-box .contact-title{
margin: 0 auto;
width: 65%;
padding: 2.5% 0;
font-size: 1.5vw;
font-weight: 500;
color: #fff;
background-color: #ea5413;
border-radius: 50px;
border: solid 2px #fff;
position: absolute;
top:-15%;
left: 50%;
transform: translateX(-50%);
}
/*  title */

#block01 article .tel-box h1{
margin: 0 auto;
width: 65%;
font-size: 2.1vw;
font-weight: 700;
border-bottom: solid 2px #ea5413;
padding: 2% 0;
line-height: 1;
}

#block01 article .tel-box h1 a{
color: #ea5413;
}

#block01 article .tel-box h1>span{font-size: 2vw;}

#block01 article .tel-box p:nth-of-type(2){
margin: 5% auto 0;
width: 100%;
font-size: 1vw;
}


/* メディアクエリ */
/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#block01 article{
padding: 2% 0 3%;
width: 55%;
}
/*  title */
#block01 article .tel-box .contact-title{
font-size: 1.8vw;
top:-12%;
}
/*  title */
#block01 article .tel-box h1{
width: 70%;
font-size: 3vw;
padding-bottom: 2%;
}

#block01 article .tel-box h1>span{font-size: 2.3vw;}
#block01 article .tel-box p:nth-of-type(2){
margin: 3% auto 0;
font-size: 1.3vw;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#block01 article{width: 65%;}
#block01 article .tel-box .contact-title{font-size: 2vw;}
#block01 article .tel-box h1{font-size: 3vw; padding: 3% 0;}
#block01 article .tel-box h1>span{font-size: 2.5vw;}
#block01 article .tel-box p:nth-of-type(2){font-size: 1.6vw;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block01{padding: 5% 0 0 0 ;}
#block01 article{width: 70%;}
#block01 article .tel-box{padding: 8% 0 0 0 ;}
#block01 article .tel-box .contact-title{
width: 65%;
padding: 2% 0;
font-size: 2.5vw;
}
#block01 article .tel-box h1{font-size: 4vw;}
#block01 article .tel-box h1>span{font-size: 3vw;}
#block01 article .tel-box p:nth-of-type(2){font-size: 1.9vw;}
/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block01 article{width: 85%;}
#block01 article .tel-box{padding: 7% 0 0 0 ;}

#block01 article .tel-box .contact-title{
width: 70%;
font-size: 3.1vw;
}

#block01 article .tel-box h1{
width: 50%;
font-size: 4.5vw;
border-bottom: solid 1.5px #ea5413;
}

#block01 article .tel-box h1>span{font-size: 3.5vw;}
#block01 article .tel-box p:nth-of-type(2){font-size: 2.2vw;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block01 article{
width: 90%;
padding: 2% 0 5%;
border-radius: 15px;
}

#block01 article .tel-box{padding: 9% 0 0 0 ;}

#block01 article .tel-box .contact-title{
width: 80%;
font-size: 3.3vw;
}

#block01 article .tel-box h1{
width: 90%;
font-size: 5.2vw;
}

#block01 article .tel-box h1>span{font-size: 4.5vw;}
#block01 article .tel-box p:nth-of-type(2){font-size: 2.6vw;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
 #block01 article .tel-box .contact-title{
width: 90%;
font-size: 4vw;
}

#block01 article .tel-box h1{
width: 90%;
font-size: 5.2vw;
}

#block01 article .tel-box h1>span{font-size: 5vw;}
#block01 article .tel-box p:nth-of-type(2){font-size: 2.7vw;}
 /* ---------------------------------- */
}


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

#block02-mail_box article{
margin: 0 auto;
padding: 10% 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;
}
 /* ---------------------------------- */
}