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

/* ************************************************************
各ブロックタイトル部分
************************************************************ */

h2.block-title{
margin: 0 auto;
font-size: 33px;
color: #6a3906;
line-height: 1.8;
font-weight: 700;
}

h2.block-title span{
position: relative;
line-height: 1;
z-index: 2;
}

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

#block02 h2.block-title span::before{
background-color: #fdc958;
}

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

#block01 h2.block-title{
font-size: 26px;
line-height: 1.6;
}

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


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

#block01 h2.block-title{font-size: 28px;}

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

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

h2.block-title{font-size: 28px;}

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

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

#block01 h2.block-title{font-size: 26px;}
h2.block-title{font-size: 26px;}
h2.block-title span::before{height: 8px;}

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

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

h2.block-title{font-size: 24px;}

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

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

#block01{
margin: 7% auto 4%;
width:100%;
padding:0 6%;
}

#block01>article{
margin: 0 auto;
width: 100%;
max-width: 1500px;
padding: 5% 5%;
background:#fff;
border-radius: 50px;
}

#block01>article .visit-box{
margin: 5% auto 0;
padding: 0 5%;
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
align-items: top;
flex-flow: row wrap;
}

#block01>article .visit-box .visit{
width: 30%;
}

#block01>article .visit-box .visit img{
margin: 0 4% 4% 4%;
padding: 1% 1%;
}

#block01>article .visit-box .visit p{
font-size: 1.3vw;
letter-spacing: 0.05em;
line-height: 1.3;
}


/* *********** ******************************** */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
 
#block01>article{padding: 4% 4%;}
#block01>article .visit-box{padding: 0 2.5%;}

#block01>article .visit-box .visit{
padding: 0 2%;
width: 30%;
}

#block01>article .visit-box .visit img{margin: 0 0 6% 0;}

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

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
 
 #block01{
 margin: 10% auto 5%;
 padding:0 5%;
 }
 
 #block01>article .visit-box .visit p{font-size: 1.4vw;}

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

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
 
 #block01>article .visit-box .visit{width: 33%;}

#block01>article .visit-box .visit p{font-size: 1.5vw;}

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

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

#block01{padding:0 10%;}

#block01>article .visit-box{
display: flex;
flex-flow: column nowrap;
}

#block01>article .visit-box .visit{
margin: 8% auto;
width: 70%;
}

#block01>article .visit-box .visit img{margin: 0 0 8% 0;}
#block01>article .visit-box .visit p{font-size: 3vw;}

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


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

 #block01{margin: 12% auto 8%;}
 
 /* ---------------------------------- */
}


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

#block01>article .visit-box .visit p{font-size: 4vw;}

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

/* ************************************************************
block02
************************************************************ */

#block02{
margin: 0 auto;
width:100%;
padding:3% 6% 0 6% ;
}

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

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

#block02 dl dt{
margin: 5% 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;
}

#block02 dl dt:nth-of-type(1){margin: 7% auto 0;}
#block02 dl dt:nth-of-type(2){background-color: #ffd386;}

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


/*トライアングル*/

#block02 dl .triangle-box{margin: 2% auto 0;}

#block02 dl .triangle,
#block02 dl .triangle::before,
#block02 dl .triangle::after{
display: inline-block;
text-align: center;
width: 1.7vmin;
height: 1.7vmin;
background: #ffd386;
}

#block02 dl .triangle::before,
#block02 dl .triangle::after {
content: "";
position: absolute;
top: 0;
left: 0;
}

#block02 dl .triangle{
position: relative;
border-bottom-right-radius: 30%;
transform: rotate(30deg) skewY(30deg) scaleX(.86666);
}

#block02 dl .triangle::before {
border-bottom-left-radius: 30%;
transform: skewX(-45deg) translateX(-50%);
}

#block02 dl .triangle::after {
border-top-right-radius: 30%;
transform: skewY(-45deg) translateY(-50%);
}


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

#block02{padding:5%;}
#block02 dl{padding:0 10%;}

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

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

/*トライアングル*/

#block02 dl .triangle,
#block02 dl .triangle::before,
#block02 dl .triangle::after{
width: 2.5vmin;
height: 2.5vmin;
}


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

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

#block02 dl dd{text-align: left;}
#block02 dl dd br{display: none;}

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

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

#block02 dl{padding:0 10%;}

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

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

/*トライアングル*/

#block02 dl .triangle,
#block02 dl .triangle::before,
#block02 dl .triangle::after{
width: 2.2vmin;
height: 2.2vmin;
}

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

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
 
#block02{padding:10% 5%;}
#block02 dl dd{font-size: 13px;}

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

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

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

#block02 dl .triangle,
#block02 dl .triangle::before,
#block02 dl .triangle::after{
width: 2.5vmin;
height: 2.5vmin;
}

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

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

#block02 dl dt{font-size:15px;}
#block02 dl dd{font-size: 12px;}

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


/* ************************************************************
block03
************************************************************ */
#block03{
margin: 0 auto 8%;
width:100%;
background-color: #fff;
}

#block03 article{
margin: 0 auto;
width: 100%;
padding:5% 6%;
max-width: 1200px;
}

#block03 article img{width: 75%;}

#block03 article h3{
margin: 7% auto 0;
width: 100%;
font-size: 28px;
font-weight: 600;
}

#block03 article h3 span{
border-bottom: 2px solid;
padding-bottom: 1%;
}

#block03 article h4{
margin: 6% auto 0;
font-size: 23px;
font-weight: 600;
line-height: 1.5em;
}

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

#block03 article{padding:7% 6%;}

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

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

#block03 article h3{font-size: 26px;}
#block03 article h4{font-size: 20px;}

/*
#block03 article h3{font-size: 2.6vw;}
#block03 article h4{font-size: 2.3vw;}
*/

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

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

#block03 article{padding:10% 6%;}
#block03 article img{width: 83%;}

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

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

#block03 article{padding:10% 4%;}
#block03 article h3{font-size: 22px;}
#block03 article h4{font-size: 17px;}

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

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

#block03 article img{width: 90%;}

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

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
 
#block03 article img{width: 95%;}
#block03 article h3{font-size: 19px;}
#block03 article h4{font-size: 15px;}
/*#block03 article h3{font-size: 4.2vw;}
#block03 article h4{font-size: 3.2vw;}*/

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