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

------------------------------------------------------ */
#main_img { position: relative; color: #fff; height: 100vh; text-align: center;}
#main_img #main_logo {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;}
#main_img #main_logo img { width: 389px;}
#main_img #main_logo p { font-size: 27px;}
#main_img #main_logo img+p { padding: 10px 0 0; font-size: 18px;}

#main_img .slick-slide img { height: 100vh;}

#main_img .scroll-bar { position: absolute; bottom: 0; left: calc(50% - 5px); height: auto; z-index: 1; }
#main_img .scroll-bar a { display: block; width: 10px; height: 70px;}
#main_img .scroll-bar a::before { content: ''; position: absolute; bottom: 0; left: calc(50%  - 2px); width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite; }
#main_img .scroll-bar a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 70px; background: #fff; }

@keyframes circlemove{
	0% { bottom: 70px;}
	100% { bottom: -5px;}
}
@keyframes cirlemovehide {
	0% { opacity: 0}
	50% { opacity: 1;}
	80% { opacity: .9;}
	100% { opacity: 0;}
}

@media screen and (max-width: 600px) {
	#main_img #main_logo { width: 80%;}
	#main_img #main_logo img { width: 70%;}
	#main_img #main_logo p { font-size: 22px;}
	#main_img #main_logo img+p { font-size: 16px;}
	
}


/* ---------------------------------------------------
#sec_search
------------------------------------------------------ */

.bestrate { display: flex; align-items: center; justify-content: center; padding: 50px 0 30px; color: #7d690d; font-size: 22px; text-align: center;}
.bestrate img { margin: 0 20px 0 0;}
.search_col { display: flex; align-items: center; margin: 0 0 60px;}
.search_col h2 { display: flex; align-items: center; font-size: 18px; padding: 0 30px 0 0; width: calc(4em + 70px);}
.search_col h2 span { padding: 0 10px 0 0;}
#search_489ban form { display: flex; align-items: end;}
#sec_search .search_col #search_489ban input[type="text"],
#sec_search .search_col #search_489ban .select_label,
#sec_search .search_col #search_489ban button[name="searchButton489ban"] { width: 62%; box-sizing: border-box; min-width: 0; height: 45px; padding: 10px 0; margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-size: 25px; letter-spacing: 0; appearance: none; background: #fff; border: none; border-bottom: 1px solid #7b7b7b; border-radius: 0; outline: none; box-shadow: none;}
#sec_search .search_col #search_489ban input[type="text"]:disabled { color: #ccc; opacity: 1; -webkit-text-fill-color: #ccc; }
#sec_search .search_col #search_489ban input[type="text"] { margin: 0 15px 0 0; background: url(../../img/icon_calendar.svg)no-repeat right center; background-size: 15px;}
#sec_search .search_col .inbox_489ban { margin: 0 25px 0 0;}
#sec_search .search_col #search_489ban .stay_489ban dd { width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: auto;}
#sec_search .search_col #search_489ban .select_label { display: flex; grid-row: 1; grid-column: 1; width: 133px; align-items: center; pointer-events: none; background: url(../../img/search_arrow.svg) no-repeat right 10px center; background-size: 10px;}
#sec_search .search_col #search_489ban select { grid-row: 1; grid-column: 1; font-size: 16px; appearance: none; opacity: 0; }
#sec_search .search_col .date_489ban { width: 47.5%;;}
#sec_search .search_col .date_489ban dd { display: flex;}
#sec_search .search_col .date_489ban dd label { display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 5px 0 5px 10px;
    font-size: 13px;
    letter-spacing: 0;}
#sec_search .search_col #search_489ban button[name="searchButton489ban"] { width: 133px; display: flex; align-items: center; justify-content: center; margin-left: auto; font-size: 17px; color: #fff; background: #ac985b; border: none; cursor: pointer; transition: opacity .5s; height: 100%; padding: 13px 0; border: none !important;}

#sec_search .link_col { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; width: 32%; margin: 10px 0 0 40px;}
#sec_search .link_col li:nth-of-type(1),#sec_search .link_col li:nth-of-type(2) { padding: 0 0 10px;}
#sec_search .link_col li a::before { content: "-";}
#sec_search .link_col li{ width: 59.5%; min-width: 145px;}
#sec_search .link_col li:nth-of-type(1),#sec_search .link_col li:nth-of-type(3) { width: 40%;}

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

	#sec_search .inner_md { max-width: 100%;}
	.search_col { margin: 0; padding: 30px 5% 60px; display: block; background: url(../../img/sec_bg1.png)repeat-x top,url(../../img/sec_bg2.png);}
	.bestrate { display: block; font-size: 18px;}
	.bestrate img { margin: 0 0 10px;}
	.search_col h2 { width: auto; justify-content: center; margin: 0 0 20px; padding: 0;}
	#search_489ban form { flex-wrap: wrap;}
	#sec_search .search_col #search_489ban dl { flex-direction: column; }
	#sec_search .search_col #search_489ban dt { position: static;}
	#sec_search .search_col #search_489ban input[type="text"],
	#sec_search .search_col #search_489ban .select_label,
	#sec_search .search_col #search_489ban button[name="searchButton489ban"] { height: 40px; padding: 5px 10px; font-size: 15px; border: 1px solid #7b7b7b;}
	#sec_search .search_col #search_489ban .select_label { width: 100%;}
	#sec_search .search_col #search_489ban .date_489ban { display: flex; width: 100%; margin: 0 0 20px; flex-grow: 1; flex-shrink: 0; }
	/* #sec_search .search_col #search_489ban .date_489ban dd { flex-direction: column; } */
	#sec_search .search_col #search_489ban .date_489ban dd label { padding: 5px 0; }
	#sec_search .search_col #search_489ban .date_489ban input[type="text"] { width: calc(100% - 80px); max-width: 100%; background-position: right 15px center; padding: 5px 35px 5px 10px; }
	#sec_search .search_col #search_489ban .inbox_489ban { margin-left: 0; width: 100%; flex-grow: 0; }
	#sec_search .search_col #search_489ban button[name="searchButton489ban"] { width: 100%; margin: 20px 0 0;}
	#sec_search .link_col { width: 100%; justify-content: space-between; margin: 30px 0 0;}
	#sec_search .link_col li { min-width: auto;}
	#sec_search .link_col li:nth-of-type(1),
	#sec_search .link_col li:nth-of-type(3) { width: 40%;}
	#sec_search .link_col li:nth-of-type(2),
	#sec_search .link_col li:nth-of-type(4) { width: 55%;}
	#sec_search .search_col .inbox_489ban { margin: 0;}
}

/* ---------------------------------------------------
#sec_news
------------------------------------------------------ */

#sec_news { position: relative; background: url(../../img/search_bg1.png)no-repeat left top,url(../../img/search_bg2.png)no-repeat right -40px top 20px, url(../../img/search_bg3.png)no-repeat right 13% bottom 0, url(../img/bg.jpg); color: #fff; padding: 85px 0;}
/* #sec_news::before { position: absolute; display: block; content: ""; background: url(../../img/search_bg1.png)no-repeat left top; width: 297px; height: 197px; left: 0; top: -38px;} */
#sec_news section { display: flex; justify-content: space-between; align-items: center;}
#sec_news section .sec_tit { width: 17%;}
#sec_news section h2 { margin: 0 0 40px; font-size: 45px; text-align: center; letter-spacing: 3px;}
#sec_news section h2 span { display: block; font-size: 19px;}
#sec_news section #feed { width: 78%;}
#sec_news section #feed ul { display: flex; justify-content: space-between;}
#sec_news section #feed ul li { display: flex; flex-direction: column; background-color: #fff; width: 30%; height: 410px; box-sizing: border-box;}
#sec_news section #feed ul li a { display: flex; flex-direction: column; height: 100%;}
#sec_news section #feed ul li .cat { display: table; width: max-content; color: #fff; margin: 0 0 15px; padding: 5px 10px; background-color: #000;}
#sec_news section #feed ul li .cat_01 { background-color: #b48c6b;}
#sec_news section #feed ul li .cat+div { width: 90%; height: 100%; display: flex; flex-direction: column; margin: 0 auto;}
#sec_news section #feed ul li .cat+div .news_photo { overflow: hidden; transition: opacity 0.5s ease; background-color: #181818; width: 100%; height: 187px;}
#sec_news section #feed ul li .cat+div .news_photo img { opacity: 1; transition: opacity 0.4s linear, transform 0.5s linear;}
#sec_news section #feed ul li .cat+div .news_txt { display: flex; flex-direction: column; flex-grow: 1;}

#sec_news section #feed ul li .day { padding: 10px 0;}
#sec_news section #feed ul li .more { margin: auto 0 10px auto;}
#sec_news section #feed ul li .more::before { content: "-";}


#sec_news section #feed ul li a:hover { opacity: 1;}
#sec_news section #feed ul li a:hover .cat+div .news_photo img { opacity: .6; transform: scale(1.1);}
#sec_news section #feed ul li a:hover .news_txt p.tit { text-decoration: underline;}


#sec_news section #feed+a.btn2 { display: none;}

@media screen and (max-width: 600px) {
	#sec_news { padding: 50px 0; overflow: hidden; background: url(../../img/search_bg1.png)no-repeat left -100px top 0,url(../../img/search_bg4.png)no-repeat right -50px bottom 0, url(../img/bg.jpg); background-size: 230px, 200px;}
	#sec_news section { display: block;}
	#sec_news section .sec_tit { width: 100%;}
	/* #sec_news::before { left: -100px;} */
	#sec_news section h2 { margin: 0 0 20px; font-size: 35px; line-height: 1.5;}
	#sec_news section h2 span { font-size: 16px;}
	#sec_news section #feed { width: 100%;}
	#sec_news section #feed ul { display: block;}
	#sec_news section #feed ul li { width: 100%; height: auto; margin: 0 0 30px; padding: 0; align-items: flex-start;}
	#sec_news section #feed ul li a { flex-wrap: wrap; flex-direction: row;}
	#sec_news section #feed ul li .cat+div .news_photo { width: 48%; height: auto;}
	#sec_news section #feed ul li .cat+div .news_photo img { min-width: auto;}
	#sec_news section #feed ul li .cat+div { display: flex; width: 94%; margin: 0 auto 10px; align-items: flex-start; justify-content: space-between; flex-direction: inherit;}
	#sec_news section #feed ul li .cat+div .news_txt { width: 50%; padding: 0 0 0 4%;}
	#sec_news section #feed ul li .day { padding: 0;}
	#sec_news section #feed+a.btn2 { display: flex; margin: 0 auto;}
}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { background: url(../../img/sec1_bg.png)no-repeat left top;}
#sec1 section { display: flex; padding: 120px 0; justify-content: space-between;}
#sec1 section > div { display: flex; align-items: center; flex-direction: column; width: 27.4%; padding: 0 0 0 3.7%;}
#sec1 section > div .sec_tit { font-feature-settings: initial; writing-mode: tb-rl; writing-mode: vertical-rl;}
#sec1 section > div .sec_tit >p { display: table; margin: 0 0 0 25px; padding: 5px 0; font-size: 17px; border: 1px solid #a0a0a0;}
#sec1 section > div .sec_tit h2 { display: flex; flex-direction: column; margin: 0 0 40px; padding: 17px 0 0;}
#sec1 section > div .sec_tit h2 span { font-size: 21px; letter-spacing: 2px;}

#sec1 section > ul { display: flex; width: 64.4%; justify-content: space-between; padding-right: min(5%, 80px);}
#sec1 section > ul li:nth-of-type(1) { width: 66%;}
#sec1 section > ul li:nth-of-type(2) { width: 33.7%;}
#sec1 section > ul li:nth-of-type(2) img { height: 49.5%;}
#sec1 section > ul li:nth-of-type(2) img:nth-of-type(1) { margin: 0 0 1%;}
#sec1 section > ul li img { width: 100%;}

@media screen and (max-width: 600px) {
	#sec1 { background: url(../../img/sec1_bg_sp.png)no-repeat left 40% top 30px; background-size: 260px;}
	#sec1 section { display: block; padding: 150px 0 50px;}
	#sec1 section > div { width: 90%; margin: 0 auto; padding: 0;}
	#sec1 section > div .sec_tit h2 img { width: 42px;}
	#sec1 section > div .sec_tit >p { margin: 0 0 0 10px; font-size: 15px;}
	#sec1 section > div .sec_tit h2 span { font-size: 18px;}
	#sec1 section > ul { width: 100%; margin: 0 auto; padding: 30px 0 0;}
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 100px 0 150px; background: url(../../img/sec_bg1.png)repeat-x top,url(../../img/sec_bg2.png);}
#sec2 h2 { padding: 30px 0 0; font-size: 44px; text-align: center; background: url(../../img/tit_icon.svg)no-repeat top center; background-size: 33px;}
#sec2 h2 span { display: table; margin: 0 auto; padding: 10px 0 0; border-top: 1px solid #ccd2d7; font-size: 15px; opacity: .5;}
.sec2a { position: relative; margin: 80px 0 110px;}
.sec2a > img { position: absolute; z-index: 1; left: 70%; width: 23%;}

#sec2 .slide_wrap { width: 75%;}
#sec2 .slide_wrap img { width: 100%; height: 630px;}
#sec2 .slick-dots { line-height: 0; font-size: 0; text-align: left; bottom: 25px; left: 20px;}
#sec2 .slick-dots li { width: 10px; height: 10px; margin: 0 5px;}
#sec2 .slick-dots li:first-of-type { margin-left: 0;}
#sec2 .slick-dots li button { width: 10px; height: 10px; padding: 0;}
#sec2 .slick-dots li button::before { content: ''; width: 15px; height: 15px; background: none; border: 1px solid #fff; border-radius: 50%; opacity: 1; transform: scale(.5); transition: transform .5s;}
#sec2 .slick-dots li.slick-active button::before { background: #fff;}
#sec2 .slick-dotted.slick-slider { margin: 0;}

.sec2a { overflow: hidden;}
.sec2a .sec_txt { width: calc(100% - 950px); min-width: 34.4%; padding: 50px 0 0 5.5%;}
.sec2a .sec_txt .stit { display: table; position: relative; font-size: 21px; opacity: .5; letter-spacing: 3px;}
.sec2a .sec_txt .stit::after { position: absolute; left: 84px; top: 50%; content: ""; display: block; width: 84px; height: 1px; background-color: #c9c9c8;}
.sec2a .sec_txt h3 { margin: 30px 0; font-size: 30px; line-height: 1.5;}
.sec2a .sec_txt p:not(.stit) { padding: 0 0 40px; line-height: 2;}
.sec2a .sec_txt+ul { display: flex; flex-direction: row-reverse; align-items: flex-start; margin: 90px 0 0; padding-right: min(5%, 80px); width: 53%;}
.sec2a .sec_txt+ul li { position: relative;}
.sec2a .sec_txt+ul li:nth-of-type(2) { margin-right: 35px;}
.sec2a .sec_txt+ul li:nth-of-type(1) { margin-top: -140px;}
.sec2a .sec_txt+ul li p { position: absolute; right: 0; top: 0; padding: 10px 0 5px; font-feature-settings: initial; writing-mode: tb-rl; writing-mode: vertical-rl; color: #fff;}
.sec2a .sec_txt+ul li:nth-of-type(2) p { background-color: #6c84af;}
.sec2a .sec_txt+ul li:nth-of-type(1) p { background-color: #883721;}
.sec2a .sec_txt a { width: 270px;}
.sec2a .sec_txt+ul li span { position: absolute; left: 5px; bottom: 5px; color: #fff;}

.sec2b { position: relative;}
.sec2b > img { position: absolute; right: 68%; width: 26%; top: 100px; z-index: 2;}
.sec2b >ul { display: flex; width: 72%; justify-content: space-between; margin: 0 0 50px auto;}
.sec2b >ul li { background-color: #000; width: 49.9%; height: 660px;}
.sec2b >ul li a { position: relative; display: flex; height: 100%; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; transition: opacity 0.5s ease;}
.sec2b >ul li a p span { display: block; font-size: 14px;}
.sec2b >ul li a p { font-size: 30px; line-height: 1.2;}
.sec2b >ul li div >span { display: block; margin: 5px 0 0; padding: 5px 0 0; border-top: 1px solid #fff; font-size: 19px;}
.sec2b >ul li a div { position: absolute; padding: 0 0 125px; background: url(../../img/sec2b_arrow.svg)no-repeat bottom center; background-size: 60px; z-index: 2;}
.sec2b >ul li img { position: relative; width: 100%; height: 100%; opacity: .7; transition: opacity 0.4s linear, transform 0.5s linear; z-index: 1;}
.sec2b >.flex_col >img { width: 42.8%;}
.sec2b >.flex_col >div { width: 53%; position: relative; right: -70px;}
.sec2b .stit { display: table; position: relative; font-size: 21px; opacity: .5; letter-spacing: 3px;}
.sec2b .stit::after { position: absolute; left: 84px; top: 50%; content: ""; display: block; width: 84px; height: 1px; background-color: #c9c9c8;}
.sec2b h3 { margin: 0 0 15px; font-size: 30px;}
.sec2b >.flex_col >div a { margin: 30px 0 0 auto;}

@media screen and (hover: hover) and (min-width: 769px) {
	.sec2b >ul li a:hover { opacity: 1; }
    .sec2b >ul li a:hover img { opacity: 1; transform: scale(1.1);}
    
}

@media screen and (max-width: 1330px) {
.sec2b >.flex_col >div { width: 50%; right: 0;}
}

@media screen and (max-width: 600px) {
	#sec2 { padding: 50px 0;}
	#sec2 h2 { font-size: 30px;}
	#sec2 h2 span { margin: 4px auto 0; padding: 10px 0 0;}
	#sec2 .slide_wrap { width: 100%;}
	#sec2 .slide_wrap img { height: 80vw;}
	.sec2a { margin: 50px 0 80px;}
	.sec2a > img { position: relative; z-index: 1; left: 0; width: 50%; margin: 0 auto -20px; display: block;}
	.sec2a .sec_txt { width: 90%; margin: 0 auto; padding: 30px 0 0;}
	.sec2a .sec_txt h3 { font-size: 24px; line-height: 1.5; margin: 20px 0;}
	.sec2a .sec_txt a { margin: 0 auto 40px; width: 80%;}
	.sec2a .sec_txt .stit { font-size: 18px;}
	.sec2a .sec_txt+ul { display: block; padding: 0; width: 90%; margin: 0 auto;}
	.sec2a .sec_txt+ul li:nth-of-type(1) { margin-top: 0;}
	.sec2a .sec_txt+ul li:nth-of-type(2) { margin: 10px 0 0;}
	.sec2a .sec_txt+ul li img { height: 80vw;}
	.sec2a .sec_txt p:not(.stit) { padding: 0 0 20px;}

	.sec2b > img { position: relative; z-index: 1; top: 0; left: 0; width: 50%; margin: 0 auto -20px; display: block;}
	.sec2b >ul { display: block; width: 100%;}
	.sec2b >ul li { width: 100%; height: 80vw;}
	.sec2b >ul li:nth-of-type(1) { margin: 0 0 3px;}
	.sec2b >ul li a div { padding: 0 0 80px;}
	.sec2b >ul li a p { font-size: 26px;}
	.sec2b >ul li a p span { font-size: 13px;}
	.sec2b >ul li a div { padding: 0 0 50px; background-size: 40px;}
	.sec2b >div.inner_md { display: flex; flex-direction: column;}
	.sec2b >.flex_col >div { order: 1; width: 100%;}
	.sec2b >.flex_col >img { order: 2;}
	.sec2b h3 { font-size: 24px; line-height: 1.5; margin: 20px 0;}
	.sec2b .stit { font-size: 18px;}
	.sec2b >.flex_col >div a { width: 80%; margin: 30px auto 0;}
	.sec2b >.flex_col >img { width: 100%; margin: 50px 0 0;}
	#sec2 .slick-dots { text-align: center; left: 0;}
}


/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 { position: relative; padding: 70px 0; color: #fff; background: url(../img/bg.jpg);}
#sec3::after { position: absolute; bottom: -50px; left: 0; content: ""; display: block; width: 434px; height: 283px; background: url(../../img/sec3_bg.png)no-repeat;}
#sec3 h2 { padding: 0 0 40px; font-size: 45px; text-align: center; letter-spacing: 7px; line-height: 1.5;}
#sec3 h2 span { display: block; font-size: 18px; letter-spacing: 0;}

#sec3 .slick-arrow {
	top: 40%;
	bottom: 0;
	z-index: 9;
	width: 60px;
	height: 60px;
	padding: 60px 0 0;
	overflow: hidden;
	/* background-color: rgba(0, 104, 53, 0.8); */
	transform: translate(0, 0);
	transform: translate(0, 0);
	transform: translate(0, 0);
}
#sec3 .slick-arrow::before,
#sec3 .slick-arrow::after {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 1px;
	content: "";
	background: #fff;
	opacity: 0.7;
}
#sec3 .slick-arrow .slick-arrow::after {
	top: calc(50% - 1px);
}
#sec3 .slick-prev::before,
#sec3 .slick-prev::after {
	left: calc(50% - 10px);
	transform-origin: left center;
	transform-origin: left center;
	transform-origin: left center;
	transform-origin: left center;
	transform-origin: left center;
}
#sec3 .slick-prev::before {
	transform: rotate(-45deg);
	transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#sec3 .slick-prev::after {
	transform: rotate(45deg);
	transform: rotate(45deg);
	transform: rotate(45deg);
}
#sec3 .slick-next::before,
#sec3 .slick-next::after {
	right: calc(50% - 10px);
	transform-origin: right center;
	transform-origin: right center;
	transform-origin: right center;
	transform-origin: right center;
	transform-origin: right center;
}
#sec3 .slick-next::before {
	transform: rotate(45deg);
	transform: rotate(45deg);
	transform: rotate(45deg);
}
#sec3 .slick-next::after {
	transform: rotate(-45deg);
	transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#sec3 .slick-next {
	right: 13vw;
}
#sec3 .slick-prev {
	left: 13vw;
}
#sec3 .slick-dots {
	bottom: -50px;
}
#sec3 .slick-dots li button {
	padding: 0;
}
#sec3 .slick-dots li button::before {
	width: 20px;
	height: 20px; /* content: "●"; */
	font-size: 10px;
}
#sec3 .slick-dots li button::before {
	color: #aaa !important;
	opacity: 1 !important;
}
#sec3 .slick-dots li.slick-active button::before {
	font-size: 20px;
	/* color: #006835 !important; */
}
#recommend_489ban .PlanView {
	background-color: #fff;
    padding: 4.5% 4%;
    display: flex !important;
    justify-content: space-between;
}

#recommend_489ban .PlanView .picture {
     width: 51%;
}

#recommend_489ban .PlanView .picture picture { display: block; height: 300px; overflow: hidden; background-color: #181818;}
#recommend_489ban .PlanView .picture a { 
	transition: opacity 0.5s ease;
	opacity: 1;
    
}
#recommend_489ban .PlanView .picture img { 
    object-fit: cover;
    width: 100%;
    height: 100%;
	opacity: 1;
    transition: opacity 0.4s linear, transform 0.5s linear;
}
#recommend_489ban .PlanView .picture a { opacity: 1;}
#recommend_489ban .PlanView .picture a:hover img { opacity: .6; transform: scale(1.1);}

#recommend_489ban .PlanView .explan {
     width: 45%;
     
}
#recommend_489ban .PlanView .explan .plan { font-size: 18px; padding: 0 0 80px;}
#recommend_489ban .PlanView .explan .plan a:hover { text-decoration: underline;}

#recommend_489ban .PlanView .planlist a { display: table; margin: 0 0 0 auto; padding: 0 10px; color: #a98251; border-bottom: 1px solid #a98251;}

#recommend_489ban .slick-slide {
	margin: 0 45px;
}

#recommend_489ban+a { display: table; margin: 50px auto 0; color: #fff; border-bottom: 1px solid #fff;}

@media screen and (max-width: 600px) {
	#sec3 { padding: 50px 0;}
	#sec3::after { display: none;}
	#sec3 h2 { padding: 0 0 20px; font-size: 30px;}
	#sec3 h2 span { font-size: 15px;}
	#recommend_489ban .PlanView { display: block !important;}
	#recommend_489ban .PlanView .picture picture { height: 40vw;}
	#recommend_489ban .PlanView .picture { width: 100%;}
	#recommend_489ban .PlanView .explan { width: 100%;}
	#recommend_489ban .PlanView .explan .plan { padding: 10px 0 30px;}
	
	#recommend_489ban .PlanView .planlist a { margin: 0 auto;}
	#recommend_489ban+a { margin: 30px auto 0;}
	#sec3 .slick-next { right: 0;}
	#sec3 .slick-prev { left: 0;}
}

/* ---------------------------------------------------
#sec4
------------------------------------------------------ */
#sec4 { padding: 120px 0 250px;}
#sec4 h2 { margin: 0 0 90px; font-size: 45px; text-align: center; line-height: 1.5;}
#sec4 h2 span { display: block; font-size: 18px;}
#sec4 ul { display: flex; justify-content: space-between;}
#sec4 ul li { position: relative; width: 29.1%;}
#sec4 ul li a { display: flex; height: 100%; color: #fff; overflow: hidden; transition: opacity 0.5s ease; background-color: #181818; align-items: center; justify-content: center;}
#sec4 ul li div { width: 96%; height: 96%; position: absolute; z-index: 1; display: flex; flex-direction: column; border: 1px solid rgb(255, 255, 255, .5); padding: 50px 10% 0;}
#sec4 ul li div p:nth-of-type(1) { display: flex; flex-direction: column; justify-content: center; font-feature-settings: initial; writing-mode: tb-rl; writing-mode: vertical-rl; height: 280px; font-size: 25px;}
#sec4 ul li div p:nth-of-type(2) { padding: 20px 0 0; border-top: 1px solid rgb(255, 255, 255, .5); text-align: center; font-size: 12px;}
#sec4 ul li img { opacity: 0.62; transition: opacity 0.4s linear, transform 0.5s linear;}

@media screen and (hover: hover) and (min-width: 769px) {
	#sec4 ul li a:hover { opacity: 1; }
    #sec4 ul li a:hover img { opacity: 1; transform: scale(1.1);}
    
}

@media screen and (max-width: 600px) {
	#sec4 { padding: 50px 0;}
	#sec4 h2 { margin: 0; padding: 0 0 20px; font-size: 30px;}
	#sec4 h2 span { font-size: 15px;}
	#sec4 ul { flex-wrap: wrap;}
	#sec4 ul li { width: 49%; height: 240px; margin: 0 0 2%;}
	#sec4 ul li div { padding: 20px 10% 0;}
	#sec4 ul li div p:nth-of-type(1) { font-size: 15px;}
	#sec4 ul li div p:nth-of-type(2) { font-size: 10px; padding: 10px 0; line-height: 1.4;}
}


@media screen and (max-width: 350px) {
	#sec4 ul { display: block;}
	#sec4 ul li { width: 100%;}
}

/* ---------------------------------------------------
#sec5
------------------------------------------------------ */
#sec5 { margin-bottom: 100px; position: relative; padding: 90px 0;}
#sec5::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 90%; height: 100%; background: url(../../img/sec5_bg.png)no-repeat bottom right; background-color: #ccdbe7; z-index: -1;}

#sec5 .sec_txt { width: 48.4%; padding: 0 5% 0 calc(50vw - 600px);}
#sec5 ul { width: 51.6%; padding-right: 2%; margin-top: -220px;}
#sec5 ul li:nth-of-type(1) img { width: 100%; height: 28vw;}
#sec5 ul li:nth-of-type(2) { display: flex; justify-content: space-between; margin: 0.5% 0 0;}
#sec5 ul li:nth-of-type(2) img { height: 250px;}
#sec5 ul li:nth-of-type(2) img:nth-of-type(1) { width: 60.4%;}
#sec5 ul li:nth-of-type(2) img:nth-of-type(2) { width: 39.2%;}

#sec5 h3 { margin: 0 0 30px; font-size: 45px;}
#sec5 h3 span { display: block; font-size: 18px;}
#sec5 a { margin: 40px 0 0; width: 270px; background-color: #ccdbe7; border: 1px solid #8e99a1;}

@media screen and (max-width: 1300px) {
	#sec5 .sec_txt { padding: 0 4%;}
}

@media screen and (max-width: 600px) {
	#sec5::after { display: none;}
	#sec5 { padding: 50px 0; background: url(../../img/sec5_bg.png)no-repeat bottom right; background-color: #ccdbe7;}
	#sec5 .sec_txt { width: 100%;}
	#sec5 h3 { margin: 0 0 10px; font-size: 30px;}
	#sec5 h3 span { font-size: 15px;}
	#sec5 a { margin: 30px auto 0; width: 80%;}
	#sec5 ul { width: 90%; margin: 30px auto 0; padding: 0;}
	#sec5 ul li:nth-of-type(1) img { height: 60vw;}
	#sec5 ul li:nth-of-type(2) img { height: 35vw;}
}