@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

/* ---------------------------------------------------
loading
------------------------------------------------------ */
#load {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 1;
transition: opacity 1.2s ease-in-out;
pointer-events: none;
}

#load .logo1,
#load .logo2,
#load .img {
opacity: 0;
transition: opacity 1.2s ease-in-out;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}

#load .logo1,
#load .logo2 { z-index: 1;}

#load .logo1 img { position: relative; left: -30px;}

#load .img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.loadStart #load .logo1 {
opacity: 1;
}

.logo2Show #load .logo1 {
opacity: 0;
}
.logo2Show #load .logo2 {
opacity: 1;
}

.bgShow #load .img {
opacity: 1;
}

.loadEnd #load .logo2,
.loadEnd #load .img {
opacity: 0;
}
.loadEnd #load {
opacity: 0;
/* visibility: hidden; */
}

@media screen and (max-width: 600px) {
	#load {
		height: 100vh;
		padding-right: 0;
		/* transition: none; */
	}

	#load .logo {
		width: 30vw;
	}

	#load .logo1 img { left: -20px;}

	#load .logo2 img { width: 46px;}
		}
		


/* ---------------------------------------------------
main_img
------------------------------------------------------ */
#main_img { display: flex;}
#main_img >div { width: 50%; height: 100vh; display: flex; align-items: center; justify-content: center;}
#main_img #main01 { background: url(../../img/main1.jpg)no-repeat center; background-size: cover;}
#main_img #main02 { background: url(../../img/main2.jpg)no-repeat center; background-size: cover;}
#main_img >div h1 { text-align: center;}
#main_img >div a,
#main_img >div .tel-link { display: block; padding: 17px 0; width: 400px; text-align: center; color: #fff; background-color: rgba(255, 255, 255, 0.2); line-height: 1.6;}
#main_img >div a span,
#main_img >div .tel-link span { display: block; font-size: 13px; color: #c6c6c6; opacity: .5;}

#main_img #main01 h1 { margin-bottom: 59px;}
#main_img #main02 h1 { margin-bottom: 44px;}

@media screen and (max-width: 600px) {
	#main_img { display: block; height: 100svh; min-height: 550px;}
	#main_img >div { width: 100%; padding: 0 0 30px; height: 50%;}
	#main_img >div >div { width: 80%;}
	#main_img >div a,
	#main_img >div .tel-link { width: 100%;}
	#main_img #main01 h1, 
	#main_img #main02 h1 { margin: 30px 0 10px;}
	#main_img h1 img { height: 100px;}
	#main_img >div a span,
	#main_img >div .tel-link span { color: #fff;}
}



/* ---------------------------------------------------
#sec_lead
------------------------------------------------------ */
#sec_lead { position: relative; padding: 180px 0 130px;}
#sec_lead h2 { padding: 0 0 100px; color: #585858; opacity: .4; font-size: 43px; text-align: center;}
#sec_lead h2 span { display: block; font-size: 29px;}
#sec_lead::after { position: absolute; left: 50%; top: 0; content: ""; display: block; width: 1px; height: 140px; background-color: #d9d9d9;}
#sec_lead div { display: flex; margin: 0 auto; flex-direction: row-reverse; justify-content: center;}
#sec_lead div h3 { font-size: 40px; color: #cfcfcf; line-height: 2; padding: 0 0 0 60px; font-feature-settings: initial; writing-mode: vertical-rl;}
#sec_lead div h3 span { display: block; font-size: 26px; color: #585858;}
#sec_lead div p { line-height: 2; padding: 0 0 0 25px; font-feature-settings: initial; writing-mode: vertical-rl;}
#sec_lead div p span { font-weight: bold;}

@media screen and (max-width: 600px) {
	#sec_lead { padding: 80px 5% 30px;}
	#sec_lead::after { height: 70px;}
	#sec_lead div { display: block; }
	#sec_lead div p,
	#sec_lead div h3 { writing-mode: inherit;}
	#sec_lead h2 { font-size: 22px; padding: 0 0 30px; line-height: 1.5;}
	#sec_lead h2 span { font-size: 20px;}

	#sec_lead div h3 { padding: 0 0 50px; font-size: 30px; text-align: center;}
	#sec_lead div h3 span { font-size: 20px; line-height: 1.5;}
	#sec_lead div p { padding: 0 0 20px;}

}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 0 0 170px; color: #858585; background-color: #1f1f1f;}
#sec1 h2 { display: flex; justify-content: center; align-items: center; width: 100%; height: 850px; background: url(../../img/sec1_main.jpg)no-repeat center center; background-size: cover;}
#sec1 .sec_lead { display: flex; flex-direction: row-reverse; justify-content: center; margin: 0 auto; padding: 200px 0 180px;}
#sec1 .sec_lead p:not(.stit) span { text-combine-upright: all;}
#sec1 .sec_lead h3 { font-size: 40px; line-height: 2; color: #565656; font-feature-settings: initial; writing-mode: vertical-rl; white-space: nowrap;}
#sec1 .sec_lead p.stit { display: block; padding: 0 0 0 60px; font-size: 26px; color: #aeaeae;}
#sec1 .sec_lead p.stit span { padding: 60px 0 0; font-weight: normal;}
#sec1 .sec_lead p { line-height: 2; padding: 0 0 0 25px; font-feature-settings: initial; writing-mode: vertical-rl; white-space: nowrap;}
#sec1 .sec_lead p span { font-weight: bold;}

#sec1 .sec1_slide { margin-bottom: 70px;}
#sec1 .slick-dots { position: static; text-align: right;}
#sec1 .slick-dots li { margin: 0;}
#sec1 .slick-dots li { width: 5px; height: 5px; margin: 0 0 0 20px;}
#sec1 .slick-dots li button { padding: 0; width: 5px; height: 5px;}
#sec1 .slick-dots li button:before { width: 5px; height: 5px; content: ""; border-radius: 50%; background-color: #646464;}
#sec1 .slick-dots li button::before{ color: #646464 !important; opacity: 1 !important;}
#sec1 .slick-dots li.slick-active button:before{ background-color: #fff !important;}

#sec1 .inner_md >img { margin-bottom: 160px;}
#sec1 .sec1_col { background-color: #000; padding: 100px 7%;}
#sec1 .sec1_col * { min-height: 0; min-width: 0;}
#sec1 .sec1_col h3 { margin: 0 0 25px; width: 100%; color: #4c4c4c; font-size: 28px;}
#sec1 .sec1_col h3 span { display: block; padding: 5px 0 0; font-size: 14px; color: #fff;}

#sec1 #sec1_col1 { flex-wrap: wrap; display: flex; flex-direction: row-reverse;}
#sec1 .sec1_col_slide { width: 45%; margin: 0;}
#sec1 .sec1_col_slide p { padding: 20px 0 0; text-align: center;}
#sec1 .sec1_col_slide .slick-dots { text-align: center;}
#sec1 .sec1_col_slide img { display: block; margin: 0 auto; width: 400px; max-width: 100%;}
#sec1 #sec1_col1 .sec_txt { width: 55%; font-size: 15px;}
#sec1 #sec1_col1 .sec_txt dl { margin: 0 0 30px;}
#sec1 #sec1_col1 .sec_txt dt { padding: 0 0 10px; color: #fff; border-bottom: 1px solid #333;}
#sec1 #sec1_col1 .sec_txt dd { padding: 10px 0 0; line-height: 2;}
#sec1 #sec1_col1 .sec_txt dd li { text-indent: -1em; padding-left: 1em;}
#sec1 #sec1_col1 .sec_txt dd li::before { content: "・";}

#sec1 #sec1_col2 { margin: 50px 0 0; display: flex; justify-content: space-between;}
#sec1 #sec1_col2 div { width: 64%;}
#sec1 #sec1_col2 img { width: 31%;}
#sec1 .sec_detail { padding: 130px 0 70px;}
#sec1 .sec_detail dl { display: flex; padding: 26px 0; border-bottom: 1px solid #404040;}
#sec1 .sec_detail dt { width: 280px;}
#sec1 .sec_detail dd { width: calc(100% - 280px);}
#sec1 .sec_detail dd li { text-indent: -1em; padding-left: 1em;}
#sec1 .sec_detail dd li::before { content: "・";}
#sec1 .inner_md > a { display: block; width: 100%; padding: 50px 0; font-size: 18px; color: #c6c6c6; text-align: center; background-color: #363636;}
#sec1 .inner_md > a span { display: block; font-size: 10px; color: #c6c6c6; opacity: .5;}


@media screen and (max-width: 600px) {
	#sec1 { padding: 0 0 80px;}
	#sec1 h2 { height: 90vw;}
	#sec1 h2 img { height: 130px;}
	#sec1 .sec_lead { display: block; padding: 80px 0 30px;}

	#sec1 .sec_lead h3 { font-size: 30px; text-align: center; writing-mode: inherit; white-space: inherit;}
	#sec1 .sec_lead p { padding: 0 0 20px; writing-mode: inherit; white-space: inherit;}
	#sec1 .sec_lead p.stit { padding: 0 0 20px; line-height: 1.5; font-size: 20px; text-align: center; padding: 0 0 50px;}
	#sec1 .sec_lead p.stit span { padding: 0;}
	#sec1 .inner_md >img { margin: 0 0 50px;}
	#sec1 .sec1_col { padding: 50px 5% 30px;}
	#sec1 #sec1_col1 { display: block;}
	#sec1 .sec1_col_slide { width: 100%;}
	#sec1 #sec1_col1 .sec_txt { margin: 40px 0 0; width: 100%; font-size: inherit;}
	#sec1 #sec1_col2 { display: block; margin: 30px 0 0; padding: 50px 5%;}
	#sec1 #sec1_col2 div { width: 100%;}
	#sec1 #sec1_col2 img { width: 100%; margin: 20px 0 0;}
	#sec1 .sec_detail { padding: 50px 0 30px;}
	#sec1 .sec_detail dl { display: block; padding: 10px 0;}
	#sec1 .sec_detail dd { width: 100%;}
	#sec1 .inner_md > a { padding: 20px 0; font-size: 16px;}
	
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 0 0 170px; background-color: #fff;}
#sec2 h2 { display: flex; justify-content: center; align-items: center; width: 100%; height: 850px; background: url(../../img/sec2_main.jpg)no-repeat center center; background-size: cover;}
#sec2 .sec_lead { display: flex; flex-direction: row-reverse; justify-content: center; margin: 0 auto; padding: 200px 0 180px;}
#sec2 .sec_lead h3 { font-size: 40px; line-height: 2; color: #cfcfcf; font-feature-settings: initial; writing-mode: vertical-rl; white-space: nowrap;}
#sec2 .sec_lead p.stit { display: block; padding: 0 0 0 60px; font-size: 26px;}
#sec2 .sec_lead p.stit span { padding: 60px 0 0; font-weight: normal;}
#sec2 .sec_lead p { line-height: 2; padding: 0 0 0 25px; font-feature-settings: initial; writing-mode: vertical-rl; white-space: nowrap;}
#sec2 .sec_lead p span { font-weight: bold;}
#sec2 .sec2_col { position: relative; margin: 215px 0 0; background-color: #f2f2f2; padding: 100px 7%;}
#sec2 .sec2_col div { width: 60%;}
#sec2 .sec2_col img { position: absolute; right: 7%; bottom: 80px;}
#sec2 .sec2_col h3 { margin: 0 0 30px; font-size: 26px;}
#sec2 .sec2_col h3 span { padding: 0 15px 0 0; font-size: 18px;}
#sec2 .sec2_col p { line-height: 2; color: #585858; opacity: .6;}

#sec2 .sec_detail { padding: 130px 0 70px;}
#sec2 .sec_detail dl { display: flex; padding: 26px 0; border-bottom: 1px solid #d9d9d9;}
#sec2 .sec_detail dt { width: 280px;}
#sec2 .sec_detail dd { width: calc(100% - 280px);}
#sec2 .sec_detail dd li { text-indent: -1em; padding-left: 1em;}
#sec2 .sec_detail dd li::before { content: "・";}
#sec2 .sec_detail+.tel-link { display: block; width: 100%; padding: 50px 0; font-size: 18px; color: #585858; text-align: center; background-color: #e5e5e5; line-height: 1.5;}
#sec2 .sec_detail+.tel-link span { display: block; padding: 5px 0 0; font-size: 10px; opacity: .5;}


@media screen and (max-width: 600px) {
	#sec2 { padding: 0 0 80px;}
	#sec2 h2 { height: 90vw;}
	#sec2 h2 img { height: 130px;}
	#sec2 .sec_lead { display: block; padding: 80px 0 30px;}
	#sec2 .sec_lead h3 { padding: 0; font-size: 26px; text-align: center; white-space: inherit; writing-mode: inherit;}
	#sec2 .sec_lead p { padding: 0 0 20px; white-space: inherit; writing-mode: inherit;}
	#sec2 .sec_lead p.stit { padding: 0 0 50px; line-height: 1.5; font-size: 20px; text-align: center;}
	#sec2 .sec_lead p.stit span { padding: 0;}

	#sec2 .sec2_col { margin: 80px 0 0; padding: 50px 5% 30px;}
	#sec2 .sec2_col h3 { margin: 0 0 20px; font-size: 22px;}
	#sec2 .sec2_col h3 span { font-size: 16px;}
	#sec2 .sec2_col img { position: static;}
	#sec2 .sec2_col div { width: 100%; margin: 0 0 30px;}
	#sec2 .sec_detail { padding: 50px 0 30px;}
	#sec2 .sec_detail dl { display: block; padding: 10px 0;}
	#sec2 .sec_detail dd { width: 100%;}
	#sec2 .inner_md > .tel-link { padding: 20px 0; font-size: 16px;}
}

/* ---------------------------------------------------
#sec_access
------------------------------------------------------ */
#sec_access { padding: 170px 0 200px; background-color: #f2f2f2;}
#sec_access h2 { margin: 0 0 70px; font-size: 34px; color: #afafaf; text-align: center; line-height: 1.6;}
#sec_access h2 span { display: block; font-size: 14px; color: #585858;}

#sec_access .tabs .panel:not(:first-of-type) { display: none;}
#sec_access .tabs ul { display: flex; justify-content: space-between;}
#sec_access .tabs ul li { width: 30%;}
#sec_access .tabs ul li a { display: block; width: 100%; background-color: #e8e8e8; text-align: center; padding: 26px 0;}
#sec_access .tabs ul li a.active { background-color: #fff;}
#sec_access .tabs .panel { padding: 100px 0; background: #fff;}
#sec_access .tabs .panel h3 { padding: 0 0 40px; font-size: 26px; text-align: center;}
#sec_access .tabs .panel img { display: block; width: 1000px; margin: 0 auto;}
#sec_access .sec_detail { margin: 80px 0 0;}
#sec_access .sec_detail dl { display: flex; padding: 26px 0; border-bottom: 1px solid #d9d9d9;}
#sec_access .sec_detail dl dt { width: 280px;}
#sec_access .sec_detail dl dd { width: calc(100% - 280px);}

#sec_access .sec_detail dl+a { display: table; margin: 15px 0 0 auto; padding: 0 0 10px 30px; background: url(../img/h_arrow.svg)no-repeat left 4px; background-size: 15px; border-bottom: 1px solid #d9d9d9;}

@media screen and (max-width: 600px) {
	#sec_access { padding: 80px 0 100px;}
	#sec_access h2 { margin: 0 0 40px; font-size: 28px;}
	#sec_access .tabs ul { display: none;}
	#sec_access .tabs .panel { margin: 0 0 50px; padding: 30px 0;}
	#sec_access .tabs .panel:not(:first-of-type) { display: inherit;}
	#sec_access .tabs .panel h3 { padding: 0 0 20px; font-size: 20px;}
	#sec_access .box_route { width: 90%; margin: 0 auto;}
	#sec_access .box_route dl{ padding: 0 0 20px;}
	#sec_access .box_route .acc_tit{ background: #eaeaea; text-align: center; padding: 10px 0; font-size: 14px; position: relative;}
	#sec_access .box_route .acc_tit span { display: block;}
	#sec_access .box_route .acc_tit::after{ content: ""; display: block; width: 7px; height: 7px; border-bottom: solid 1px #585858; border-right: solid 1px #585858; transform: rotate(45deg); position: absolute; top: calc(50% - 3.5px); right: 20px; transition: transform 0.5s;}
	#sec_access .box_route .acc_tit.active::after{ transform: rotate(-135deg); }
	#sec_access .box_route .acc_contents ol{ list-style-type: none; position: relative;}
	#sec_access .box_route .acc_contents ol::after{ content: ""; display: block; width: 1px; height: 100%; background: #d0d0d0; position: absolute; top: 0; left: 50%; z-index: 1;}
	#sec_access .box_route .acc_contents ol li{ position: relative; z-index: 2; line-height: 1.5;}
	#sec_access .box_route .acc_contents ol li.way{ font-size: 14px; text-align: center; padding: 20px 0;}
	#sec_access .box_route .acc_contents ol li.way span{ width: 100%; padding: 10px 0; display: inline-block; background: #fff;}
	#sec_access .box_route .acc_contents ol li.point{ background: #f5f5f5; font-size: 14px; text-align: center; padding: 10px 0;}
	#sec_access .box_route .acc_contents ol li.goal{ background: #454546; color: #fff; font-size: 14px; text-align: center; padding: 10px 0;}
	#sec_access .box_route .acc_contents ol li.goal span{ font-size: 17px;}
	#sec_access .sec_detail { margin: 50px 0 0;}
	#sec_access .sec_detail dl { display: block; padding: 10px 0;}
	#sec_access .sec_detail dl dd { width: 100%;}
}