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

/** --------------------------------------------------
block01
-------------------------------------------------- **/

#block01{
margin: 0 auto;
padding: 0 10% 10% 10% ;
width: 100%;
background: #ea5413;
}

#block01 article{
margin: 0 auto;
padding: 10% 10%;
width: 100%;
background: #fff;
border-radius: 30px;
position: relative;
}

#block01 article h1{
margin: 0 auto;
padding: 1.5%;
width: 60%;
font-size: 25px;
font-weight: 900;
color: #ea5413;
background: #ffff00;
border: solid 4px #ea5413; 
border-radius: 100px;
position: absolute;
top:-25px;
left: 50%;
transform: translateX(-50%);
}

#block01 article div {
margin: 0 auto;
width: 100%;
}

#block01 article div .text{
margin: 0 auto 10%;
text-align: center;
font-size: 20px;
line-height: 1.5;
font-weight: 700;
}

#block01 article div .text span{
display: block;
margin-top: 15px;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}

#block01 article div .triangle-box .triangle{
margin: 10% auto 0;
width: 0;
height: 100px;
border-style: solid;
border-width: 25px 25px 0 25px;
border-color: #ea5413 transparent transparent transparent;
}

#block01 article div .illust01{
margin: 5% auto 0;
width:25%;
}

#block01 article div .illust02{
margin: 5% auto 0;
width:40%;
}

#block01 article div .illust03{
margin: 5% auto 0;
width:40%;
}

#block01 article div .orange{
margin: 10% auto;
text-align: center;
font-size: 18px;
color: #ea5413;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
}

#block01 article div .link{
margin: 0 auto;
padding: 2.5% 0;
width: 65%;
background: #ea5413;
border-radius: 100px;
margin-bottom: 25px;
}

#block01 article div .link a{
font-size: 20px;
font-weight: 500;
letter-spacing: 0.05em;
color: #ffff00;
}

#block01 article div .link:hover{
opacity: 0.5;
transition: 1s;
}

#block01>p{
margin: 10% auto 0;
text-align:center;
font-size: 2vw;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
color: #ffff00;
}

/* *********** ******************************** */
@media screen and (min-width: 1500px) {
 /* ---------------------------------- */
#block01 article div .text{font-size: 24px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */ 
#block01 article h1{
padding: 2%;
font-size: 22px;
border: solid 3px #ea5413; 
top:-25px;
}

#block01 article div .text{
font-size: 18px;
line-height: 1.2;
}

#block01 article div .triangle-box .triangle{
margin:  8% auto 0;
border-width: 20px 20px 0 20px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block01{padding: 10% 5%;}

#block01 article div {margin: 10% auto;}
#block01 article div .text{margin: 5% auto;}
#block01 article div .text span{font-size: 13px;}

#block01 article h1{
padding: 2%;
font-size: 20px;
line-height: 1.5;
top:-40px;
}

#block01 article div .triangle-box .triangle{margin: 0 auto -15%;}
#block01 article div .orange{font-size: 16px;}

#block01 article div .link{
padding: 3% 0;
width: 70%;
}

#block01 article div .link a{font-size: 18px;}

#block01>p{font-size: 2.5vw;}

 /* ---------------------------------- */
}


/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */ 
#block01 article div .text{font-size: 16px;}
#block01 article div .link {
  width: 80%;
  line-height: 1.2;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */ 
#block01 article{padding: 15% 5% 5% 5% ;}
#block01 article div .triangle-box .triangle{
margin: 0 auto -20%;
border-width: 15px 15px 0 15px;
}

#block01>p{font-size: 15px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */ 
#block01{padding: 15% 5% 10%;}
#block01 article h1{width: 70%;}

#block01 article div .text span{font-size: 12px;}

#block01 article div .illust01{
margin: 8% auto 0;
width:30%;
}

#block01 article div .illust02{
margin: 8% auto 0;
width:55%;
}

#block01 article div .illust03{
margin: 8% auto 0;
width:50%;
}

#block01 article div .orange{font-size: 14px;}
#block01 article div .link a{
width: 75%;
font-size: 16px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */ 
#block01 article h1{
padding: 3%;
width: 65%;
font-size: 18px;}

#block01 article div .link a{font-size: 15px;}
#block01>p{font-size: 13px;}

 /* ---------------------------------- */
}