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

.cmn_tit01 { padding-left: 70px; }
.cmn_tit01 .jp { font-size: 33px; }

@media screen and (max-width: 600px) {
	.cmn_tit01 { padding-left: 45px; }
	.cmn_tit01 .jp { font-size: 24px; }
}


/* ---------------------------------------------------
loading
------------------------------------------------------ */
#loading { display: none; background: #fff; }
.loading #loading { position: fixed; height: 100vh; width: 100vw; left: 0; top: 0; z-index: 99999; background: #fff; display: flex; justify-content: center; align-items: center; transition: background 1s; }
.loading.active #loading { background: transparent; pointer-events: none; }
#loading img { width: 400px; }
.loading #loading > div { transition: opacity 1.2s; animation: load_fadeIn 1.5s; }
.loading.active #loading > div { opacity: 0; }
.loading #main_logo { opacity: 0; }
.loading.active #main_logo { opacity: 1; transition: opacity 1.2s 1s;}
.loading #header_wrap { opacity: 0; }
.loading.active #header_wrap { opacity: 1; transition: opacity 1.2s 2s;}

@keyframes load_fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@media screen and (max-width: 600px) {
	#loading img { width: 50vw;}
}


/* ---------------------------------------------------
	Main_img
------------------------------------------------------ */
#main_img { margin: 0; padding: 0; position: relative; }
#main_img .photo { position: relative; z-index: 5;}
#main_img .slick-slide div { vertical-align: bottom; }
#main_img .slick-slide { height: auto; }
#main_img .main_slick img { width: 100%; height: auto; }
#main_img h1 { color: #fff; font-size: 42px; display: flex; flex-direction: column; position: absolute; right: 85px; top: 100px; z-index: 10; }
#main_img h1 span { background: #7092be; display: inline-block; width: fit-content; padding: 0 10px; box-sizing: border-box; }
#main_img h1 span + span { margin-top: 15px; }

#main_link { position: absolute; top: 0; right: 15px; z-index: 90; width: auto; height: min(100vh - 140px, 100%); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#main_link #copyright { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #fff; line-height: 1; margin-bottom: 15px; }
#main_link #copyright span { transform: rotate(90deg); display: inline-block; }
#main_link .sns_link { display: flex; flex-direction: column; align-items: center; }
#main_link .sns_link li + li { margin-top: 10px; }
#main_link .sns_link img { display: block; }

.fix_bnr { position: absolute; top: calc(100vh - 165px); transform: translateY(-100%); right: 85px; z-index: 5; }


@media screen and (max-width: 1200px) {
	.fix_bnr { top: calc(100% - 25px); }
}
@media screen and (max-width: 600px) {
	.main_logo { margin: 70px auto 70px; text-align: center; }
	.main_logo p { margin-bottom: 25px; }
	.main_logo img { width: 50vw; min-width: 100px; }
	#main_img h1 { font-size: 4.5vw; right: 6%; top: 4vw; }
	#main_img h1 span { padding: 0 5px; }
	#main_img h1 span + span { margin-top: 1vw; }

	#main_link { display: none; pointer-events: none; }

	.fix_bnr { position: static; transform: none; padding: 20px 0; }
	.fix_bnr a { width: 90%; margin: 0 auto; display: block; }
	.fix_bnr a img { width: 100%; height: auto; object-fit: contain;}
}


/* ---------------------------------------------------
	Lead_col
------------------------------------------------------ */
#lead_col { padding: 150px 0 0; font-size: 45px; letter-spacing: 0.07em; display: flex; justify-content: center; align-items: flex-end; flex-direction: row-reverse; position: relative; }
#lead_col .tit { padding-bottom: 30px; letter-spacing: 0.09em; text-align: left; }
#lead_col .tit [data-ruby] { position: relative; }
#lead_col .tit [data-ruby] rt { display: none; }
#lead_col .tit [data-ruby]::before { content: attr(data-ruby); position: absolute; top: 0; left: 0; right: -30px; margin: auto; height: 100%; font-size: 16px; letter-spacing: 1.15em; text-align: center; }
#lead_col .popup-modal { font-size: 12px; display: inline-block; letter-spacing: 0.29em; position: absolute; bottom: 0; right: calc(50% + 165px); border-right: 1px solid #666; }

@media screen and (max-width: 600px) {
	#lead_col { padding: 80px 0 0; font-size: 26px; }
	#lead_col .tit { padding-bottom: 30px; }
	#lead_col .tit [data-ruby]::before { right: -20px; font-size: 12px; letter-spacing: 0.8em; }
	#lead_col .popup-modal { font-size: 12px; right: calc(50% + 80px); letter-spacing: 0.05em; }
}


/* ---------------------------------------------------
	News_col
------------------------------------------------------ */
#news_col { padding-bottom: 130px; }
#news_col .tit_wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
#news_col .tit_wrap .cmn_tit01 { background-image: url(../img/home/icon_news.svg); background-size: 39px; }
#news_col .blog_list li { border-bottom: 1px solid var(--color02); }
#news_col .blog_list li a { display: flex; align-items: center; padding: 30px 20px; transition: background .5s; }
#news_col .blog_list li a .date { color: rgba(0, 0, 0, 0.5); margin-right: 95px; }
#news_col .blog_list li a .txt { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

@media screen and (hover: hover) {
	#news_col .blog_list li a:hover { opacity: 1; background: var(--color03); }
}

@media screen and (max-width: 600px) {
	#news_col { padding-bottom: 80px; }
	#news_col .tit_wrap { margin-bottom: 20px; }
	#news_col .tit_wrap .cmn_tit01 { background-size: 30px; }
	#news_col .blog_list li a { padding: 15px 0; flex-direction: column; text-align: left; align-items: flex-start; }
	#news_col .blog_list li a .date { font-size: 13px; margin: 0; }
	#news_col .blog_list li a .txt { width: 100%; }
}


/* ---------------------------------------------------
	Event_col
------------------------------------------------------ */
#event_col { padding-bottom: 150px; }
#event_col .tit_wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
#event_col .tit_wrap .cmn_tit01 { background-image: url(../img/home/icon_event.svg); background-size: 48px; }
#event_col .blog_list { display: flex; }
#event_col .blog_list li { width: 250px; }
#event_col .blog_list li:not(:first-child) { margin-left: 33px; }
#event_col .blog_list li a .photo { height: 220px; overflow: hidden; }
#event_col .blog_list li a .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
#event_col .blog_list li a .txt { margin-top: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; display: -webkit-box; }

@media screen and (hover: hover) {
	#event_col .blog_list li a:hover .photo img { transform: scale(1.05); }
}

@media screen and (max-width: 600px) {
	#event_col { padding-bottom: 80px; }
	#event_col .tit_wrap { margin-bottom: 20px; }
	#event_col .tit_wrap .cmn_tit01 { background-size: 35px; }
	#event_col .blog_list { flex-direction: column; }
	#event_col .blog_list li { width: 100%; }
	#event_col .blog_list li:not(:first-child) { margin-left: 0; }
	#event_col .blog_list li + li { margin-top: 20px; }
	#event_col .blog_list li a { display: flex; align-items: center; }
	#event_col .blog_list li a .photo { width: 33.733vw; height: 29.333vw; flex-shrink: 0; }
	#event_col .blog_list li a .txt { margin: 0 0 0 20px; text-decoration: underline; }
}


/* ---------------------------------------------------
	Area_map
------------------------------------------------------ */
#area_map .tit_wrap { position: absolute; top: 0; left: 50%; transform: translateX(-100%); padding-top: 95px; z-index: 5; width: 550px; max-width: 46%; }
#area_map .tit_wrap .cmn_tit01 { background-image: url(../img/common/hd_icon03.svg); margin-bottom: 35px; }
#area_map .tit_wrap p { line-height: 1.8;}

@media screen and (max-width: 600px) {
	#area_map .tit_wrap { position: static; transform: none; padding: 50px 0 40px; width: auto; max-width: 88%; }
	#area_map .tit_wrap .cmn_tit01 { margin-bottom: 20px; flex-wrap: wrap; background-size: 35px; padding-top: 5px; padding-bottom: 5px; }
}


/* ---------------------------------------------------
	Contents_col
------------------------------------------------------ */
#contents_col { position: relative; padding: 260px 0 185px; }
#contents_col .cmn_tit01 { background-image: url(../img/common/hd_icon01.svg); background-size: 60px; margin-bottom: 70px; padding-left: 95px; }
#contents_col .contents_list { display: flex; justify-content: space-between; flex-wrap: wrap; }
#contents_col .contents_list .list + .list { margin-top: 110px; }
#contents_col .contents_list .list .txt { display: flex; align-items: center; transition: opacity .5s; }
#contents_col .contents_list .list .txt h3 { font-size: 30px;}
#contents_col .contents_list .list .txt h3 span { font-size: 15px; vertical-align: text-top;}
#contents_col .contents_list .list .photo .img_wrap { overflow: hidden; }
#contents_col .contents_list .list .photo .img_wrap img { transition: all .5s;}
#contents_col .contents_list .list_lg { width: 100%; }
#contents_col .contents_list .list_lg a { display: flex; justify-content: space-between; flex-wrap: wrap; }
#contents_col .contents_list .list_lg .txt div:nth-child(1) p { font-size: 23px; margin-left: 5px; }
#contents_col .contents_list .list_lg .txt .arrow { margin-top: 20px; }
#contents_col .contents_list .list_lg a + a {  margin-top: 15px; display: inline-block;}
#contents_col .contents_list .list_lg .txt { width: 120px; position: relative; flex-wrap: wrap; }
#contents_col .contents_list .list_md { width: max(42.5%, 510px); }
#contents_col .contents_list .list_md .txt { margin-top: 30px; justify-content: space-between; }
#contents_col .contents_list .list_md .txt div:nth-child(1) p { font-size: 15px; margin-top: 5px; }

@media screen and (hover: hover) {
	#contents_col .contents_list .list a:hover { opacity: 1; }
	#contents_col .contents_list .list .photo:hover .img_wrap img { transform: scale(1.05); opacity: .6; }
	#contents_col .contents_list .list .txt:hover { opacity: .6; }
	#contents_col .contents_list .list .txt:hover .arrow p:after { animation: arrow-in 0.6s forwards ease-in; }
	#contents_col .contents_list .list .txt:hover .arrow svg ellipse { stroke-dasharray: 280 280; stroke-dashoffset: 280; stroke-width: 1px; animation: circle-in 0.6s forwards ease-in; }
}

@media screen and (max-width: 600px) {
	#contents_col { padding: 50px 0 0; }
	#contents_col .cmn_tit01 { background-size: 40px; margin-bottom: 30px; padding-left: 50px; }
	#contents_col .cmn_tit01 .jp { font-size: 22px; }
	#contents_col .contents_list .list .txt h3 { font-size: 20px;}
	#contents_col .contents_list .list .txt h3 span { font-size: 12px; }
	#contents_col .contents_list .list_lg a { flex-direction: column; }
	#contents_col .contents_list .list_lg .txt {  width: 100%; justify-content: space-between;writing-mode: horizontal-tb; width: 100%; margin-top: 10px; }
	#contents_col .contents_list .list_lg .txt div:nth-child(1) p { font-size: 14px; margin: 0; }
	#contents_col .contents_list .list_lg .txt .arrow { width: 55px; margin-top: 0; }
	#contents_col .contents_list .list_lg a + a { margin-top: 15px; line-height: 1.5; font-size: 14px; }
	#contents_col .contents_list .list_md { width: 100%; }
	#contents_col .contents_list .list_md a { display: flex; }
	#contents_col .contents_list .list_md .photo { width: 40%; flex-shrink: 0; }
	#contents_col .contents_list .list_md .txt { flex-grow: 1; height: 100%; margin: 0 0 0 15px; flex-direction: column; justify-content: center; align-items: flex-start; }
	#contents_col .contents_list .list_md .txt h3 { font-size: 16px;}
	#contents_col .contents_list .list_md .txt div:nth-child(1) p { font-size: 12px; margin-top: 0; }
	#contents_col .contents_list .list_md .txt .arrow { margin: 0 0 0 auto;}
	#contents_col .contents_list .list + .list { margin-top: 60px; }
	#contents_col .contents_list .list_md + .list_md { margin-top: 30px;}
}


/* ---------------------------------------------------
	Access_col
------------------------------------------------------ */
#access_col { position: relative; padding: 95px 0 200px; }
#access_col .map_col { padding-bottom: 49%; height: 0; overflow: hidden; position: relative;}
#access_col .map_col iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#access_col .cmn_tit01 { background-image: url(../img/common/hd_icon04.svg); background-size: 38px; margin-bottom: 35px; }
#access_col .txt { display: flex; justify-content: flex-end; align-items: center; margin-top: 15px; }
#access_col .txt a { margin-left: 35px; }

@media screen and (hover: hover) {
}

@media screen and (max-width: 600px) {
	#access_col { padding: 80px 0; }
	#access_col .map_col { padding-bottom: 75%; }
	#access_col .cmn_tit01 { background-size: 30px; margin-bottom: 20px; }
	#access_col .txt { flex-direction: column; align-items: flex-start; margin-top: 10px; }
	#access_col .txt a { margin: 5px 0 0 auto; }
}


/* ---------------------------------------------------
	Umimachi_col
------------------------------------------------------ */
#umimachi_col { margin-bottom: 140px; background: var(--color03); display: flex; justify-content: space-between; }
#umimachi_col .photo  { width: 54%; max-height: 738px; }
#umimachi_col .detail { width: 46%; padding-left: calc(50vw - 550px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
#umimachi_col .detail > p { margin-top: 40px; font-size: 15px; letter-spacing: 0.06em; line-height: 2.3; }
#umimachi_col .detail > a { margin-top: 40px; font-size: 15px; }

@media screen and (hover: hover) {
}
@media screen and (max-width: 1200px) {
	#umimachi_col .detail { padding-left: 4%; }
}
@media screen and (max-width: 600px) {
	#umimachi_col { padding: 50px 0; margin-bottom: 80px; flex-direction: column-reverse; }
	#umimachi_col .photo  { width: 88%; margin: 0 auto; max-height: none; }
	#umimachi_col .photo img { height: auto;}
	#umimachi_col .detail { width: 88%; padding: 10px 0 0;  margin: 0 auto; }
	#umimachi_col .detail .logo { width: 80%; }
	#umimachi_col .detail .logo img { object-fit: contain; width: 100%; height: auto;}
	#umimachi_col .detail > p { margin-top: 20px; line-height: 1.8; }
	#umimachi_col .detail > a { margin: 20px 0 0 auto; }
}

/* ---------------------------------------------------
	Bnr_col
------------------------------------------------------ */
#bnr_col { padding-bottom: 90px; }
#bnr_col > div { display: flex; justify-content: space-between; }
#bnr_col .bnr_list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 771px; }
#bnr_col .bnr_list li + li { margin-top: 40px; }
#bnr_col .sbnr_list { width: 246px; }
#bnr_col .sbnr_list li + li { margin-top: 15px; }

@media screen and (max-width: 600px) {
	#bnr_col { padding-bottom: 50px; }
	#bnr_col > div { flex-direction: column; }
	#bnr_col .bnr_list { width: 100%; }
	#bnr_col .bnr_list li + li { margin-top: 10px; }
	#bnr_col .bnr_list li { width: 100%;}
	#bnr_col .bnr_list li img { width: 100%; height: auto;}
	#bnr_col .sbnr_list { margin-top: 20px; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
	#bnr_col .sbnr_list li { width: calc(50% - 5px);}
	#bnr_col .sbnr_list li + li { margin-top: 0; }
	#bnr_col .sbnr_list li:nth-child(n+3) { margin-top: 10px; }
}