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

/* ************************************************************
block01
************************************************************ */

#block01{
margin: 8% auto;
width:100%;
background:#fff;
padding:6% 6%;
}

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

#block01 div{
margin: 3% auto 8%;
max-width: 800px;
padding: 3% 2% 3% 15%;
background-color: #fff8e7;
border-radius: 50px;
position: relative;
}

#block01 div h2{
margin: 0 auto;
font-size: 38px;
line-height: 2;
font-weight: 900;
}

#block01 div h2 span{
position: relative;
line-height: 1;
z-index: 2;
}

#block01 div h2 span::before{
content: '';
width: 100%;
height: 12px;
background-color: #8fd6a6;
border-radius: 20px;
position: absolute;
bottom: 2px;
left: 0%;
z-index: -1;
}

#block01 div img{
margin: 0 auto;
width: 25%;
position: absolute;
left: -5px;
bottom: -30px;
}

#block01 dl{
margin: 8% auto 4%;
width:100%;
max-width:1000px;
padding:0 5%;
}

#block01 dl dt{
margin: 7% 0 1% 0;
padding: 2% 0;
width:100%;
font-size:26px;
letter-spacing: 0.06em;
line-height:1.3;
background-color: #ffef86;
border-radius: 100px;
}

#block01 dl dt:nth-of-type(even){background-color: #ffd386;}

#block01 dl dd{
width:100%;
padding:2% 4%;
font-size:16px;
letter-spacing: 0.06em;
line-height:1.8;
text-align: left;
}


/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */


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

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */

#block01{padding:5%;}

#block01 div{
padding: 3% 3% 3% 15%;
max-width: 600px;
border-radius: 40px;
}

#block01 div h2{font-size: 28px;}
#block01 div h2 span::before{height: 10px;}

#block01 div img{
width: 21%;
bottom: -20px;
}

#block01 dl{padding:0 10%;}

#block01 dl dt{
font-size:20px;
line-height:1.4;
}

#block01 dl dd{
font-size:14px;
}

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

/* ******************************************* */
@media screen and (max-width: 800px) {
 /* ---------------------------------- */

#block01 div img{
width: 19%;
bottom: -13px;
}

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

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */

#block01 div{
padding: 3% 2% 3% 15%;
max-width: 80%;
border-radius: 20px;
}

#block01 div h2{font-size: 4vw;}

#block01 div h2 span::before{
height: 7px;
bottom: 1px;
}

#block01 div img{
width: 21%;
bottom: -10px;
}

#block01 dl{padding:0 8%;}

#block01 dl dt{
margin: 10% 0 3% 0;
font-size:18px;
}

#block01 dl dd{padding:2% 6%;}

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

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */

#block01 dl dd{font-size: 13px;}

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

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

#block01 dl dt{font-size:16px;}

#block01 div h2 span::before{
height: 5px;
bottom: 1px;
}

 /* ---------------------------------- */
}
/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */

#block01 dl dt{font-size:14px;}

#block01 dl dd{
padding:2% 4% 2% 6%;
font-size: 12px;
}

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