@charset "utf-8";

/* ----------------------------------
location
---------------------------------- */
.f-180 {
font-size: 180%;
}
.f-270 {
font-size: 270%;
}
.purple{
color: #373472;
}
.blue{
color: #205496;
}

#content_Wrap {
    position: relative;
	color: #323232;
    background: #ffffff00;
}

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

/*共通*/

[class$="-box"] {
	margin-top: 100px;
}



/*個別*/
figure {
	position: relative;
}
a {
	transition: all .5s;
}
a:hover {
	opacity: .7;
}

.main {
	background-image: url(../img/main.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 16% 0;
	position: relative;
    z-index: 1;
}

.main h2 {
	font-size: 24px;
	letter-spacing: 6px;
	color: #fefefe;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#content_Wrap > .secbg{
position: absolute;
top: 0;
left: 0;
transform: translate(0,0);
width: 100%;
z-index: -1;
}

.notes {
    color: #000;
}

.main_bg {
}

.main_bg {
background-image: url(../img/main_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.lead_copy {
width: 94%;
text-align: center;
margin: 0 auto;
padding: 80px 0;
}
.lead_copy h3 {
color: #000;
font-size: clamp(18px,2vw,24px);
line-height: 1.8;
}
.lead_copy p {
color: #000;
font-size: clamp(14px,1.4vw,16px);
line-height: 1.8;
padding-top: 2em;
}

.text {
letter-spacing: 0.08em;
}
.text h2 {
font-size: clamp(40px, 5.6vw, 70px);
line-height: 1.0;
font-family: "EB Garamond", serif;
font-style: italic;
white-space: nowrap;
}

.text h3 {
font-size: clamp(16px,1.67vw,20px);
line-height: 1.8;
}
.text h4 {
font-size: clamp(14px,1.4vw,16px);
line-height: 1.4;
}
.text h4 span{
line-height: 1.0;
}
.text p {
font-size: clamp(14px,1.4vw,16px);
line-height: 1.8;
}
.text p span{
line-height: 1.0;
}
figure + .text {
padding-top: 0.4em;
}


.img-text .text p {
font-size: 14px;
line-height: 1.8;
}
.img-text .text h4 .f-270{
color: #31485b;
}

.img-text .text + figure {
padding-top: 1em;
}

.copy {
width: 94%;
text-align: center;
margin: 0 auto;
padding: 0 0 80px;
}
.copy h3 {
font-size: clamp(18px,2vw,24px);
line-height: 1.8;
}
.copy p {
font-size: clamp(14px,1.4vw,16px);
line-height: 1.8;
padding-top: 2em;
}
.lead_content{
position: relative;
}
.lead_content .secbg{
position: absolute;
bottom: 10%;
left: 0;
transform: translate(0,0);
width: 100%;
}
.lead_content.sec02 .secbg{
bottom: -48%;
}
.lead_content.sec03 .secbg{
bottom: -48%;
}


.lead_content .content_inner{
position: relative;
z-index: 1;
}
.lead_content.sec01 .content_inner .column2{
display: flex;
width: 92.85714286%;
margin: 0 auto 0 0;
gap: 1em 9.23076923%;
}

.lead_content.sec01 .content_inner .column2 > figure{
width: 53.84615385%;
}
.lead_content.sec01 .content_inner .column2 .img-text{
width: 36.92307692%;
padding-top: 1em;
}
.lead_content.sec01 .content_inner .column2 .img-text .text h4 + p{
padding-top: 0.75em;
}


.lead_content.sec01 .content_inner > ul{
display: flex;
width: 85.71428571%;
margin: 0 auto;
gap: 20px 3.33333333%;
}
.lead_content.sec01 .content_inner > ul li{
width: 22.5%;
}
.lead_content.sec01 .content_inner > ul li .text h4{
font-size: 16px;
letter-spacing: 0.04em;
font-feature-settings: "palt";
}


.lead_content.sec01 .content_inner .column2 + ul{
padding: 60px 0 0;
}

.lead_content.sec02 .content_inner .column2{
display: flex;
width: 92.85714286%;
margin: 0 0 0 auto;
gap: 1em 9.23076923%;
}
.lead_content.sec03 .content_inner .column2{
display: flex;
width: 92.85714286%;
margin: 0 auto 0 0;
gap: 1em 9.23076923%;
}

.lead_content.sec02 .content_inner .column2 > figure,
.lead_content.sec03 .content_inner .column2 > figure{
width: 64.61538462%;
}
.lead_content.sec02 .content_inner .column2 .img-text,
.lead_content.sec03 .content_inner .column2 .img-text{
display: flex;
justify-content: space-between;
flex-direction: column;
width: 30.76923077%;
padding-top: 1em;
}
.lead_content.sec02 .content_inner .column2 .img-text figure,
.lead_content.sec03 .content_inner .column2 .img-text figure{
transform: translateY(60px);
}

.lead_content.sec02{
margin: 160px auto 0;
}
.lead_content.sec03{
margin: 400px auto 0;
}
/*
.w-bg {
margin: 400px auto 0;
}
*/
.w-bg {
margin: 160px auto 0;
}

.cat_area {
display: flex;
flex-direction: column;
gap: 80px 0;
}
.cat_area .cat_sec {
display: flex;
width: 94%;
max-width: 1200px;
margin: 0 auto;
gap: 20px 2.5%;
}
.cat_area .cat_main {
width: 40%;
}

.cat_area .cat_side {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 57.5%;
}
.cat_area .cat_side > .text{

}
.cat_area .cat_side > .text h3{
display: flex;
align-items: center;
text-align: left;
font-size: clamp(28px, 3.0vw, 36px);
letter-spacing: 0.18em;
font-family: "EB Garamond", serif;
white-space: nowrap;
line-height: 1;
}
.cat_area .cat_side > .text h3:before {
    content: "";
    flex-grow: 1;
    height: 1px; /* 線の太さを変えたいときはここを変える */
    background: #000; /* 線の色を変えたいときはここを変える */
    margin:0 .4em 0 0; /* 文字と線の余白用 なくても良い */
}
.cat_area .cat_side > .text h3:after {
    content: "";
    flex-grow: 1;
    height: 1px; /* 線の太さを変えたいときはここを変える */
    background: #000; /* 線の色を変えたいときはここを変える */
    margin:0 0 0 .4em; /* 文字と線の余白用 なくても良い */
}

.cat_area .cat_side > .text p{
line-height: 1.6;
padding-top: 1.2em;
}


.cat_area .cat_side ul {
display: flex;
flex-wrap: wrap;
margin: 20px auto 0;
gap: 20px 4.34782609%;
}

.cat_area .cat_side ul li {
width: 47.82608696%;
}

.map_area {
position: relative;
margin: 120px auto 70px;
}
.map_area figure {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.map_area .secbg{
position: absolute;
top: 38%;
left: 0;
transform: translate(0,0);
width: 100%;
}

.info_area {
}
.info_area > h3 {
text-align: center;
font-size: clamp(20px,2vw,24px);
letter-spacing: 0.18em;
padding: 60px 0;
}
.info_area .info {
width: 94%;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
gap:60px 4%;
}
.info_area .info_box {
width: 48%;
}
.info_area .info_box.tf-01 {
transform: translateY(-3em);
}
.info_area .info_box.tf-02 {
transform: translateY(-9.5em);
}
.map_area {
    margin: 60px auto 70px;
}
.map_area .secbg {
    top: unset;
    bottom: -10%;
}

.info_area .info_box h4 {
position: relative;
text-align: center;
color: #fff;
padding: 10px;
font-size: clamp(16px,1.67vw,20px);
letter-spacing: 0.18em;
margin: 0 auto 20px;
z-index: 1;
}
.info_area .info_box h4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 97%;
    height: 100%;
    background: #31485b;
    z-index: -1;
    transform: translate(-50%,-50%) skewX(-18deg);
}

.info_area h4 dd {
}
.info_area h4 dt {
}
.info_area dl {
display: flex;
justify-content: space-between;
font-size: 14px;
line-height: 1.4;
}
.info_area dl + dl{
margin: 10px auto 0;
}

.info_area dl dd {
}
.info_area dl dt {
}


/*=============================
調整
=============================*/
@media only screen and (max-width: 1280px) {

    .w1280 {
    display: block;
    }


}

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

}


/*=============================
spから
=============================*/
@media screen and (max-width: 767px) {
#content_Wrap > .secbg {
    top: 70px;
}

	/*個別*/
	
	.main {
		background-image: url(../img/main_sp.jpg);
		background-position: left center;
		padding: 24% 0;
	}
	.main h2 {
		font-size: 20px;
		width: 100%;
		text-align: center;
	}
    
    .lead_copy {
    padding: 40px 0;
}
.copy {
    padding: 0 0 40px;
}
.img-text figure + figure {
    padding-top: 1em;
}
    
.lead_content.sec01 .content_inner .column2 {
flex-wrap: wrap;
    width: 94%;
    margin: 0 auto;
    gap: 1em 0;
}
.lead_content.sec01 .content_inner .column2 > figure {
    width: 100%;
}
.lead_content.sec01 .content_inner .column2 .img-text {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    padding-top: 0;
}
.lead_content.sec01 .content_inner > ul {
flex-wrap: wrap;
    width: 94%;
    margin: 0 auto;
    gap: 20px 3.33333333%;
}
.lead_content.sec01 .content_inner > ul li {
    width: 100%;
}
.lead_content.sec02 {
    margin: 60px auto 0;
}
.lead_content.sec03 {
    margin: 60px auto 0;
}

.lead_content.sec02 .content_inner .column2,
.lead_content.sec03 .content_inner .column2{
flex-wrap: wrap;
width: 94%;
margin: 0 auto;
}

.lead_content.sec02 .content_inner .column2 .img-text,
.lead_content.sec03 .content_inner .column2 .img-text {
    width: 100%;
    padding-top: 0;
    margin: 0 auto;
    order: 2;
}
.lead_content.sec02 .content_inner .column2 .img-text figure,
.lead_content.sec03 .content_inner .column2 .img-text figure {
    width: 100%;
    transform: translateY(0);
    order: 1;
}

.lead_content.sec02 .content_inner .column2 > figure,
.lead_content.sec03 .content_inner .column2 > figure {
    width: 100%;
}

.lead_content.sec02 .content_inner .column2 .img-text figure:nth-of-type(2) {
    width: 60%;
    margin: 0 0 0 auto;
}
.lead_content.sec03 .content_inner .column2 .img-text figure:nth-of-type(2) {
    width: 60%;
    margin: 0 auto 0 0;
}


.lead_content .secbg {
    bottom: 86%;
}
.lead_content.sec02 .secbg {
    bottom: -5%;
}
.lead_content.sec03 .secbg {
    bottom: -5%;
}

/*
.w-bg {
    margin: 60px auto 0;
}
*/
.w-bg {
margin: 80px auto 0;
}

.cat_area .cat_side {
    display: flex
;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
}
.cat_area .cat_main {
    width: 100%;
    padding-top: 1em;
}


.info_area > h3 {
    padding: 0 0 40px;
}
.info_area .info_box {
    width: 100%;
}
.info_area .info_box.tf-01 {
transform: translateY(0);
}
.info_area .info_box.tf-02 {
transform: translateY(0);
}

}