@charset "utf-8";

.contents {
    overflow: hidden;
}

/* common
------------------------------------------------------------------------*/
figure{
position: relative;
overflow: hidden;
}
.txt-L{
text-align: left;
}
.txt-R{
text-align: right;
}
.txt-C{
text-align: center;
}


#main_Wrap {
margin:0 auto ;
}
#main_Wrap figcaption {
bottom: 23.4%;
right: 5px;
}


.intro {
width: 94%;
max-width: 1200px;
/* margin: -30px auto 0; */
margin: 100px auto 0;
text-align: center;
}
.intro .page-ttl {
color: #a0b3bd;
font-size: clamp(24px, calc(-22.22222222222222px + 6.018518518518518vw), 50px);
font-family: 'Cinzel', serif !important;
font-weight: 400;
font-style: normal;
letter-spacing: 2px;
margin:0 auto 60px;
}
.intro p {
color: #46626f;
font-size: clamp(17px, 2.1vw, 21px);
line-height: 1.8;
text-align: center;
margin-bottom: 60px;
}

.txt_box {
}
.sec04 .txt_box h3,
.sec04 .txt_box h4{
color: #fff;
}
.sec03 .txt_box h3{
line-height: 1.6;
}


.txt_box h3 {
color: #a0b3bd;
font-family: 'Cinzel', serif !important;
font-size: clamp(24px, 4vw, 48px);
letter-spacing: 0.085em;
}
.txt_box h3 + h4 {
padding-top: 2.4em;
}
.txt_box h3 + p {
padding-top: 3.5em;
}
.txt_box h4 {
color: #46626f;
font-size: clamp(16px, 1.75vw, 21px);
line-height: 1.8;
letter-spacing: 0.085em;
}
.txt_box p {
color: #46626f;
font-size: clamp(14px, 1.34vw, 16px);
line-height: 2;
letter-spacing: 0.085em;
}
.txt_box h4 + p {
padding-top: 1.8em;
}

.sec01{
background: url(../img/bg-LR.png) no-repeat top center;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: center;
gap: 30px 0;
padding: 0 0 3%;
margin: 0 auto 100px;
}
.sec02{
background: url(../img/bg-RL.png) no-repeat top center;
background-size: cover;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
gap: 30px 4%;
padding: 0 0 15%;
margin: 0 auto 80px;
}
.sec03{
background: url(../img/bg-LR.png) no-repeat top center;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: center;
gap: 30px 0;
padding: 0 0 14.4%;
margin: 0 auto 0;
}


.sec04{
/* margin: 0 auto 100px; */
}
.sec04 .bg01{
background: url(../img/bg-01.png) no-repeat top center;
background-size: cover;
padding: 10% 0 0;
margin: -40px auto 0;
}
.sec04 .bg02{
background: #69828f;
margin: -1px auto 0;
padding: 80px 0 100px;
}

.flex_box {
display: flex;
align-items: flex-start;
width: 94%;
max-width: 1200px;
margin: 0 auto;
gap: 30px 5%;
}
.flex_box ul {
display: flex;
flex-direction: column;
gap: 40px 0;
width: 47.5%;
}
.flex_box li {
}
.flex_box li h5 {
text-align: center;
font-size: clamp(16px,1.67vw,20px);
color: #fff;
background: #c6a74e;
padding: 10px 0;
margin: 0 auto 1em;
}
.flex_box li .txt_box{
text-align: left;
}
.flex_box li .txt_box p{
color: #fff;
}
.flex_box ul li .in_box{
display: flex;
align-items: flex-start;
gap: 20px 4.9122807%;
}
.flex_box li .in_box .txt_box{
width: 41.05263158%;
}
.flex_box li .in_box figure{
width: 54.03508772%;
}

.flex_box > figure {
width: 47.5%;
}

.sec01 figure{
width: 50%;
}
.sec01 .txt_box {
width: 50%;
padding: 0 3% 0 7.14285714%;
}
.sec02 figure{
width: 57.14285714%;
}
.sec02 .txt_box {
width: 38.85714286%;
padding: 0 0 0 0%;
}
.sec03 figure{
width: 57.14285714%;
}
.sec03 .txt_box {
width: 42.85714286%;
padding: 0 3% 0 7.14285714%;
/*max-width: 800px;*/
}
.sec04 > figure{

}
.sec04 .bg01 .txt_box {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.sec05 > figure{
width: 100%;
}
.sec05 .txt_box {
width: 94%;
text-align: center;
margin: 0 auto 60px;
}


/*===========================================
TAB
===========================================*/

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


}




/*===========================================
SP
===========================================*/
@media screen and (max-width: 767px) {
#main_Wrap figcaption {
bottom: 24%;
}
.intro {
/* margin: 20px auto 0; */
margin: 50px auto 0;
}
.intro .page-ttl {
margin:0 auto 40px;
}
.intro p {
margin-bottom: 50px;
}
.txt_box h3 + h4 {
padding-top: 1em;
}
.flex_box {
flex-wrap: wrap;
}

.flex_box ul {
width: 100%;
order: 2;
}
.flex_box > figure {
width: 100%;
order: 1;
}


.sec01 {
background: url(../img/bg-LR_sp.png) no-repeat center top;
background-size: cover;
margin: 0 auto 60px;
padding: 0;
}
.sec01 > figure{
width: 100%;
order: 2;
}
.sec01 .txt_box {
width: 94%;
margin: 0 auto;
padding: 0;
order: 1;
}
.sec02 {
background: url(../img/bg-RL_sp.png) no-repeat center top;
background-size: cover;
margin: 0 auto 60px;
padding: 0;
}
.sec02 > figure{
width: 100%;
order: 2;
}
.sec02 .txt_box {
width: 94%;
margin: 0 auto;
padding: 0;
order: 1;
}
.sec03 {
background: url(../img/bg-LR_sp.png) no-repeat center top;
background-size: cover;
margin: 0 auto 60px;
padding: 0;
}
.sec03 > figure{
width: 100%;
order: 2;
}
.sec03 .txt_box {
width: 94%;
margin: 0 auto;
padding: 0;
order: 1;
}
.sec04 {
margin: 0 auto 60px;
padding: 0;
}
.sec04 .bg01 {
background: url(../img/bg-01_sp.png) no-repeat top center;
background-size: cover;
padding: 15% 0 0;
margin: 0 auto;
}
.sec04 .bg02 {
padding: 30px 0 60px;
}
.sec04 > figure{

}
.sec04 .bg01 .txt_box {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.sec05 {
    margin: 20px auto 0;
}
.sec05 > figure{
width: 100%;
order: 2;
}
.sec05 .txt_box {
width: 94%;
text-align: center;
margin: 0 auto 40px;
order: 1;
}



}