@charset "UTF-8";



.bg01{ padding-bottom: 100px;}
.intervie{}
h2.intervieTitle{ display: block;transform: translateY(-50%); font-size: 50px; text-align: center;}
@media screen and (max-width: 1080px) {
.bg01{ padding-bottom: 30px;}
h2.intervieTitle{ font-size: 30px;}
}


.titleBox{ margin-bottom: 0;}


.w900{ width: 100%; max-width: 904px; margin: 0 auto 40px;}






/* btnBox */
.btnBox{ display: flex; width: 100%; max-width: 1080px; margin: 0 auto;}
.btnBox h2{
display: block;
font-size: 30px;
width: 100%;
max-width: 48%;
margin: 0 auto 40px;
border-bottom: 1px solid #ccc;
}

.btnBox a{
display: block;
position: relative;
display: flex;
align-items: center;
justify-content: center;

font-size: 30px;
font-weight: bold;

padding: 40px 1em;
font-family: "Open Sans", sans-serif;
}

.btnBox a::after {
position: absolute;
display: flex;
align-items: center;
justify-content: center;

background: #FDE202;
width: 45px;
height: 45px;
border-radius: 100%;

font-family: "Font Awesome 6 Free";
content: '\f063';
right: 100px;
top: 38px;
font-size: 18px;
}

@media screen and (max-width: 1080px) {
.btnBox{
padding: 0 25px;
}
.btnBox h2{
padding-bottom: 20px;
width: 40%;
}
.btnBox a{
justify-content: left;
font-size: 15px;
margin: 40px auto 0;
padding: 0;
width: 100%;
height: 40px;

}
.btnBox a::after{
width: 25px;
height: 25px;

right: 0;
top: 8px;
font-size: 14px;
}
}
.btnBox a:hover::after{ background: #000; color: #fff; transition: .2s;}





/* intervieBox */
.intervieBox{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 50px;}
.intervieBox .txtBox{ width: 100%; max-width: 540px; display: flex; justify-content: center; align-items: center; margin-top: -60px;}

.intervieBox .txtBox h2{ font-size: 30px; margin-bottom: 1em;}
.txtBox h3 {
text-indent: -2em;
margin-left: 2em;
}
.intervieBox .txtBox p{ font-size: 15px; color: #666; line-height: 2;}
.intervieBox .txtBox p span{ display: inline-block; padding-right: 20px; font-size: 30px; color: #000; font-weight: bold;}

@media screen and (max-width: 1080px) {
.intervieBox{ margin: 0;}
.intervieBox figure{ margin: 0;}

.intervieBox .txtBox{ margin: 0; padding: 0;}
.intervieBox .txtBox h2{ font-size: 17px; margin-top: -20px;}
.txtBox h3 {
padding-left: 3.5em;
margin-left: 3em;
text-indent: -3.2em;
}
.intervieBox .txtBox p{ font-size: 12px;}
}





.accordion{ margin-top: -105px; border-bottom: none;}
.accordion-header{ border: none; font-size: 20px; font-weight: bold; width: 20%;
 transform: translateX(-152%);
}
.boxR{}
.boxR .accordion-header{ width: 100%; transform: translateX(258%); width: 210px;}
.accordion-header::after{
width: 60px;
height: 60px;
border-radius: 100px;
right: 0;
top: -5px;
transition:transform 0.3s;
transform:rotate(90deg);
}
.accordion-header.active::after{transform:rotate(0deg);}
.read02{ margin-left: 330px;}



@media screen and (max-width: 1080px) {
.accordion{ margin: 0; padding: 0 5px 0;}
.accordion-header,
.boxR .accordion-header{ text-align: center; margin-top: -50px; font-size: 15px;}

.accordion-header{}
.accordion-header::after{
top: 2px;
right: 100px;
width: 40px;
height: 40px;
}

.accordion{ margin: 0;}
.accordion-header,
.boxR .accordion-header{ width: 100%; transform: translateX(0%); margin-left: -20px; }

.intervieBox{ display: flex; padding: 10px 25px;}

.intervieBox .txtBox{ margin: 0; order: 1;}

.read02{ margin-left: -20px;}

.mainImg{ margin: 0 0 -40px; padding: 0;}

}


.accordion-content{ padding: 0 0 100px; border-radius: 20px 20px 0 0; background: #fff; border: none; margin-top: 60px;}
.accordion-content .flexBox{ width: 100%; max-width: 900px; margin: 50px auto;}
.accordion-content .flexBox .txtBox{  padding: 0 1em;}
.accordion-content .flexBox .txtBox p{ font-size: 15px; line-height: 1.7;}
.accordion-content .flexBox h3{ font-size: 20px; margin-bottom: 20px;}
.accordion-content .flexBox h3::before{
vertical-align: 0px;
}
.accordion-content h3{ line-height: 2;}
.accordion-content p{ width: 100%; max-width: 397px; line-height: 2;}

.mainImg{ width: 100%; max-width: 1080px;}
.mainImg img{ width: 100%;}







@media screen and (max-width: 1080px) {
.accordion-content{ margin-top: 20px; padding: 0 0 20px; border-radius: 8px;}
.intervieBox img{ width: 100%;}
.accordion-content img{ width: 100%; padding: 0;}
.accordion-content .mainImg img{ width: 100%; padding: 0;}

.accordion-content .flexBox h3{ font-size: 17px; margin-bottom: 1em; margin-left: -25px;}
}


.hBox{}
.hBox h2{ display: inline-block; font-size: 20px; margin-bottom: 1em; padding: 10px 1em; border-radius: 16px 16px 0 16px; background: #FDE202;}
.hBox figure{ margin-bottom: 30px; text-align: center;}
.hBox p{ font-size: 15px; line-height: 2;}

.hBox02{ width: 30%;}
@media screen and (max-width: 1080px) {
.hBox,
.hBox02{ width: 100%; padding: 10px;}
.hBox .w240 img{ width: 100%; max-width: 240px;}
}








.read{
position: absolute;
transform: translateY(-50%);
left: -100px;
}
@media screen and (max-width: 1080px) {
.read{
display: none;
}
}



#sect01{}
.worksBox{ position: relative; padding-top: 100px; margin-bottom: 100px;}
.worksBox p{ font-size: 20px; line-height: 2.4;}
@media screen and (max-width: 1080px) {
.worksBox{ overflow: hidden;}
.worksBox{ margin: 0; padding: 40px 0 0; }
.worksBox section{ margin-top: -30px; padding: 25px;}
.worksBox figure{ width: 100%;}
.worksBox figure img{ width: 100%;}

.worksBox p{ font-size: 12px; line-height: 2; padding-right: 70px;}
.ew{ width: 100%; max-width: 102px;
position: absolute;
top: 8px;
right: -25px;
z-index: 1;
}

.ew img{ width: 100%;}
.sect0201Img{
position: absolute;
top: 0;
right: 60px;}
}



.note{ width: 100%; max-width: 900px; margin-top: 80px; padding: 50px 90px; border: 2px solid #FDE202; border-radius: 10px; position: relative;}
.note .flex{ display: flex; align-items: center;}
.note .flex .txtBox{ margin-left: 50px;}
.note h2{font-size: 20px; margin-bottom: 1em;}
.note p{ font-size: 15px; margin-bottom: 0; line-height: 1.7;}

@media screen and (max-width: 1080px) {
.wrap{ padding: 0 25px;}
.note{  margin: 0; padding: 0;}
.note .flex{ display: block; text-align: center;}
.note .flex .txtBox{ margin: 0;}
.note .flex p{ text-align: left;}
.note img{ margin-bottom: 20px;}

.note h2{font-size: 17px;}
.note p{ font-size: 12px; margin: 0; padding: 0; line-height: 2;}
}

.blnTitle{
padding: 10px 2em;
display: inline-block;
background: #FDE202;
border-radius: 20px 20px 0 20px ;
position: absolute;
top: -20px;
left: -20px;
}
@media screen and (max-width: 1080px) {
h2.blnTitle{
font-size: 15px;
}
}



#sect02{}
@media screen and (max-width: 1080px) {
#sect02 { padding: 40px 0;}

.ewMain02{}
.ewMain02 img{}

.ew2{ width: 100%; max-width: 102px;
position: absolute;
top: 8px;
left: -25px;
z-index: 1;
}


.ew2 img{ width: 100%;}



#sect02 .wrap{}
#sect02 .contBox {margin-left: 40px;}
#sect02 .contBox p{ padding: 0;}

figure.sect0202Img{
position: absolute;
top: 0;
right: 0;
}
figure.sect0202Img img{ width: 100px;}
}
@media screen and (max-width: 1080px) {
#sect02 .contBox{ padding-right: 30px;}
}



/* worksTitle */
.worksTitle{ display: flex; justify-content: space-between; align-items: end; margin: -50px 0 50px;}
@media screen and (max-width: 1080px) {
.worksTitle{ position: relative; display: block; margin: 20px 0;}

.worksTitle img{ position: absolute; top: 40px; right: 0; width: 120px;}
}

.roundTitle{ display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; border-radius: 100%; background: #FDE202;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.roundTitle span{ display: block; font-size: 40px;}
@media screen and (max-width: 1080px) {

.roundTitle {
margin-top: -40px;
width: 100px;
height: 100px;
font-size: 14px;
}
.roundTitle span {
font-size: 22px;
}
}

.worksTitle h2{ font-size: 30px; display: block; width: 50%; margin-left: 0px; text-align: left;}
@media screen and (max-width: 1080px) {
.worksTitle h2{font-size: 20px; width: 100%; margin: 10px 0; }


}




/* flex2 */
.flex02{ display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; width: 100%; max-width: 900px; margin: 80px auto 0;}
.flex02 section{ position: relative; width: 100%; max-width: 420px; margin: 0 0 40px; padding: 0;}
.flex02 h2{ display: inline-block; font-size: 20px; padding: 10px 2em; border-radius: 16px 16px 0 16px; background: #FDE202;
position: absolute;
top: -20px;
left: -20px;
}

.flex02 figure{ margin-bottom: 20px;}
.flex02 p{ font-size: 15px; line-height: 2;}


@media screen and (max-width: 1080px) {

.flex02{ margin: 140px auto 0;}
.flex02 section{ width: 100%; max-width: 420px; margin: 0 0 40px; padding: 0;}

.flex02 section figure{ width: 100%; margin: 0 auto 20px; padding: 0;}
.flex02 section figure img{ width: 100%; height: auto;}
.flex02 h2{
top: -20px;
left: -20px;
font-size: 14px;
}

.flex02 p{ padding: 0; font-size: 12px; line-height: 2}

#sect02 .note{ margin: 40px auto; }


}



@media screen and (max-width: 1080px) {
.accordion-content{}

.orderBox{ display: flex; flex-direction: column;}
.orderBox .txtBox{ width: 100%; order: 1;}
.orderBox figure{ width: 100%; order: 2;}
}