@charset "UTF-8";
/* ========================
plan
======================== */
.contents {
background: #0b1810;
font-feature-settings: "palt";
overflow: hidden;
}
/*img{width: 100%;}*/

figure{
position: relative;
height: fit-content;
}

.f-50{font-size: 50%;}
.f-60{font-size: 60%;}
.f-70{font-size: 70%;}
.f-80{font-size: 80%;}
.f-90{font-size: 90%;}
.f-110{font-size: 110%;}
.f-120{font-size: 120%;}
.f-130{font-size: 130%;}
.f-140{font-size: 140%;}
.f-150{font-size: 150%;}
.f-160{font-size: 160%;}
.f-170{font-size: 170%;}
.f-180{font-size: 180%;}
.f-190{font-size: 190%;}
.f-200{font-size: 200%;}
.f-210{font-size: 210%;}
.f-220{font-size: 220%;}
.f-230{font-size: 230%;}
.f-240{font-size: 240%;}

.f-82{font-size: 82%;}

.cap_half{
right: calc(50% + 5px);
}


#main_Wrap {
position: relative;
text-align: center;
}
#main_Wrap h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(20px,3.333333333333333vw,40px);
color: #fff;
text-shadow: 0px 0px 4px #000000, 0px 0px 6px rgba(0,0,0,0.8);
letter-spacing: 0.12em;
font-family: "Cinzel", serif;
line-height: 0.8;
}
#main_Wrap h2 span {
font-size: 30%;
}
.text.center {
text-align: center;
}
.text h3 {
position: relative;
color: #b5975c;
font-family: "Cinzel", serif;
font-size: clamp(24px,2.8vw,34px);
letter-spacing: 0.15em;
padding: 0 0 0 1.3em;
margin: 0.5em 0 0;
}
.text.center h3 {
width: fit-content;
margin: 0.5em auto 0;
}
.text.cl-gr h3 {
color: #335a4f;
}
.text h3::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 24px;
height: 2px;
background: #b5975c;
transform: translate(0,-100%);
}
.text.cl-gr  h3::before {
background: #335a4f;
}
.text h4 {
color: #fff;
font-size: clamp(17px,2vw,24px);
letter-spacing: 0.12em;
line-height: 1.8;
}
.text.cl-gr h4 {
color: #000;
}
.text p {
color: #fff;
font-size: clamp(14px,1.34vw,16px);
letter-spacing: 0.08em;
line-height: 2;
}

.text h3 + h4 {
padding-top: 1.0em;
}
.text h4 + p {
padding-top: 1.6em;
}
.text h3 + p {
padding-top: 1.6em;
}
.subimg .text h3 + p {
padding-top: 1.2em;
}
.contentbox > .text {
margin: 0 auto 3em;
}


.contentbox {
position: relative;
padding: 120px 0 0;
}
.contentbox.sec01{
display: flex;
align-items: center;
padding: 180px 0 0;
}
.contentbox.sec01::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 42.858%;
background: url(../img/bg-top-l.png) top center no-repeat;
background-size: cover;
}
.contentbox.sec01 .textside {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 42.857142857142857%;
padding: 0 2.857142857142857%;
}
.contentbox.sec03 {
display: flex;
align-items: center;
padding: 180px 0 0;
}
.contentbox.sec03::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 42.858%;
background: url(../img/bg-top-r.png) top center no-repeat;
background-size: cover;
}
.contentbox.sec03 .textside,
.contentbox.sec04_02 .textside {
width: 41.428571428571429%;
padding: 0 2.857142857142857%;
}
.contentbox.sec04 {
display: flex;
align-items: center;
padding: 120px 0;
}
.contentbox.sec04_02 {
display: flex;
align-items: center;
padding: 120px 0 0;
}
.contentbox.sec05::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 42.858%;
background: url(../img/bg-bottom-l.png) top center no-repeat;
background-size: cover;
transform: translate(0, -98%);
}
.contentbox.sec04 .textside {
width: 47.142857142857143%;
padding: 0 2.857142857142857%;
}
.contentbox.sec05 {
display: flex;
align-items: flex-end;
padding: 0 0 120px;
}
.contentbox.sec05 .textside {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 41.428571428571429%;
padding: 0 2.857142857142857%;
}
.contentbox.sec06 {
padding: 60px 0;
background: #fff;
}

.contentbox .subimg {
}

.contentbox .subimg figure {
padding-top: 1.5em;
}

.contentbox.sec01 > figure{
width: 57.142857142857143%;
}
.contentbox.sec03 > figure{
width: 58.571428571428571%;
}
.contentbox.sec04 > figure{
width: 52.857142857142857%;
}
.contentbox.sec04_02 > figure{
/* width: 52.857142857142857%; */
width: 58.571428571428571%;
}
.contentbox.sec05 > figure{
width: 58.571428571428571%;
}
.contentbox.sec05 .subimg figure {
padding-top: 10%;
}
.contentbox.sec06 > figure{
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.contentbox.sec05 .subimg{
width: 85%;
max-width: 476px;
margin: 0 auto 0 0;
}

.contentbox.sec06 ul{
display: flex;
flex-wrap: wrap;
width: 94%;
max-width: 1200px;
margin: 60px auto 0;
gap: 40px 1.666666666666667%;
}
.contentbox.sec06 ul li{
width: 23.75%;
}
.contentbox.sec06 ul li:nth-child(2){
width: 49.166666666666667%;
}
.contentbox.sec06 ul .text_box {
margin: 0.5em 0 0;
}
.contentbox.sec06 ul .text_box h5 {
color: #004d59;
font-size: clamp(16px,1.5vw,18px);
letter-spacing: 0.08em;
}
.contentbox.sec06 ul .text_box h5 .num {
display: inline-block;
color: #fff;
letter-spacing: 0.02em;
background: #004d59;
padding: 0.2em 0.25em 0.2em 0.3em;
margin-right: 0.3em;
}
.contentbox.sec06 ul .text_box p {
font-size: clamp(12px,1.166666666666667vw,14px);
letter-spacing: 0.08em;
line-height: 1.6;
}
.contentbox.sec06 ul .text_box h5 + p {
padding-top: 0.5em;
}

#notes_Area {
background: #fff;
}
/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {






}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {
.f-82{font-size: 100%;}

.contents {
padding: 0;
}

#main_Wrap h2 span {
font-size: 50%;
}
.text.center {
text-align: left;
}
.text.center h3 {
margin: 0.5em 0 0;
}

.contentbox > .text {
width: 94%;
margin: 0 auto 1em;
}

.contentbox.sec01 {
flex-wrap: wrap;
}
.contentbox > figure{
order: 2;
}
.contentbox .textside {
order: 1;
}
.contentbox > .text {
order: 1;
}
.contentbox.sec01 > figure{
width: 100%;
}
.contentbox.sec03 > figure{
width: 100%;
}
.contentbox.sec04 > figure{
width: 100%;
}
.contentbox.sec04_02 > figure{
width: 100%;
}
.contentbox.sec05 > figure{
width: 100%;
}

.contentbox.sec01{
display: flex;
padding: 80px 0 0;
}
.contentbox.sec01 .textside {
width: 94%;
margin: 0 auto 1em;
padding: 0;
}
.contentbox.sec02{
display: flex;
flex-wrap: wrap;
padding: 60px 0 0;
}
.contentbox.sec03 {
flex-wrap: wrap;
padding: 60px 0 0;
}
.contentbox.sec03 .textside {
width: 94%;
margin: 0 auto 1em;
padding: 0;
}
.contentbox.sec04 {
flex-wrap: wrap;
padding: 60px 0;
}
.contentbox.sec04 .textside {
width: 94%;
margin: 0 auto 1em;
padding: 0;
}
.contentbox.sec04_02 {
flex-wrap: wrap;
padding: 60px 0 0;
}
.contentbox.sec04_02 .textside {
width: 94%;
margin: 0 auto 1em;
padding: 0;
}
.contentbox.sec05 {
flex-wrap: wrap;
padding: 0 0 60px;
}
.contentbox.sec05 .textside {
width: 94%;
margin: 0 auto 1em;
padding: 0;
}
.contentbox.sec05 .subimg {
width: 100%;
max-width: 100%;
margin: 0 0;
}
.contentbox.sec05 .subimg figure {
padding-top: 1em;
}
.contentbox.sec05 figure.sp {
width: 94%;
margin: 0 auto;
padding-top: 1em;
}
.contentbox.sec05::before {
top: 60%;
}

.contentbox.sec06 ul {
gap: 30px 1.666666666666667%;
}
.contentbox.sec06 ul li {
display: flex;
flex-direction: column;
width: 100%;
}
.contentbox.sec06 ul li:nth-child(2) {
display: none;
}
.contentbox.sec06 ul figure {
    order: 2;
}
.contentbox.sec06 ul .text_box {
    order: 1;
    margin: 0 0 1em;
}
.contentbox.sec07 {
display: flex;
flex-wrap: wrap;
padding: 60px 0;
}
/*
.contentbox.sec01::before {
top: 35%;
}
.contentbox.sec03::before {
top: 45%;
}
*/


}