@charset "utf-8";

/*============================
#header
============================*/
#header { background: none; position: absolute; top: 0; left: 0; }
#header .logo a span {  border: solid 1px #fff; color: #fff; }
#header .pcSubNavi ul li a { color: #fff; }

/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 640px; position: relative; }
#mainPanelArea .panel { z-index: 1; position: relative; height: 800px; }
#mainPanelArea .panel ul { position: relative; }
#mainPanelArea .panel ul::before { position: absolute; left: 0; top: 0; content: ""; display: block; z-index: 1; width: 100%; height: 100%;  background: rgba(0,0,0,0.1); }
#mainPanelArea .panel ul li {}
#mainPanelArea .panel ul li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
#mainPanelArea .panel::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(245,245,245,0), rgba(245,245,245,0) 36%, rgba(245,245,245,1) 64%, rgba(245,245,245,1)); z-index: 1; }
#mainPanelArea .catch { position: absolute; left: 50%; top: 20%; width: 1240px; padding: 0 20px; margin-left: -620px; font-size: 3.5em; color: #fff; white-space: nowrap; z-index: 2; line-height: 1.125; }
#mainPanelArea .catch span { position: relative; opacity: 0;
	animation-name: text01-animate;
	animation-duration: 1s;
	animation-fill-mode: forwards; }
	@keyframes text01-animate {
		0% { opacity: 0; top: 0; }
		100% { opacity: 1; top: -5px; }
	}
#mainPanelArea .catch span:nth-child(1) { animation-delay: 0.40s; }
#mainPanelArea .catch span:nth-child(2) { animation-delay: 0.44s; }
#mainPanelArea .catch span:nth-child(3) { animation-delay: 0.48s; }
#mainPanelArea .catch span:nth-child(4) { animation-delay: 0.52s; }
#mainPanelArea .catch span:nth-child(5) { animation-delay: 0.56s; }
#mainPanelArea .catch span:nth-child(6) { animation-delay: 0.60s; }
#mainPanelArea .catch span:nth-child(7) { animation-delay: 0.64s; }
#mainPanelArea .catch span:nth-child(8) { animation-delay: 0.68s; }
#mainPanelArea .catch span:nth-child(9) { animation-delay: 0.72s; }
#mainPanelArea .catch span:nth-child(10) { animation-delay: 0.76s; }
#mainPanelArea .catch span:nth-child(11) { animation-delay: 0.80s; }
#mainPanelArea .catch span:nth-child(12) { animation-delay: 0.84s; }
#mainPanelArea .catch span:nth-child(13) { animation-delay: 0.88s; }
#mainPanelArea .catch span:nth-child(14) { animation-delay: 0.92s; }
#mainPanelArea .catch span:nth-child(15) { animation-delay: 0.96s; }
#mainPanelArea .catch span:nth-child(16) { animation-delay: 0.96s; }
#mainPanelArea .catch span:nth-child(17) { animation-delay: 1.00s; }
#mainPanelArea .catch span:nth-child(18) { animation-delay: 1.04s; }
#mainPanelArea .catch span:nth-child(19) { animation-delay: 1.08s; }
#mainPanelArea .catch span:nth-child(20) { animation-delay: 1.12s; }
#mainPanelArea .catch span:nth-child(21) { animation-delay: 1.16s; }
#mainPanelArea .catch span:nth-child(22) { animation-delay: 1.20s; }
#mainPanelArea .catch span:nth-child(23) { animation-delay: 1.24s; }
#mainPanelArea .catch span:nth-child(24) { animation-delay: 1.28s; }
#mainPanelArea .catch span:nth-child(25) { animation-delay: 1.32s; }
#mainPanelArea .catch span:nth-child(26) { animation-delay: 1.36s; }
#mainPanelArea .catch span:nth-child(27) { animation-delay: 1.40s; }
#mainPanelArea .lead { position: absolute; left: 50%; top: 41%; width: 1240px; padding: 0 20px; margin-left: -620px; font-size: 1.25em; color: #fff; letter-spacing: 0.05em; font-weight: 500; white-space: nowrap; z-index: 2; }
#mainPanelArea .lead span { font-size: 0.9125em; }
#mainPanelArea .button { position: absolute; left: 50%; top: 50%; width: 1240px; padding: 0 20px; margin-left: -620px; z-index: 2; }
#mainPanelArea .button a.md_btn_lineWhite { position: relative; border: solid 2px #fff; padding: 16px 0 14px; width: 200px; min-width: 200px; }
#mainPanelArea .button a.md_btn_lineWhite::after {}
#mainPanelArea .button a.md_btn_lineWhite:hover::after {}
#mainPanelArea .point { position: absolute; width: 92%; left: 4%; top: 72%; border-top: solid 1px rgba(255,255,255,0.5); padding-top: 40px; z-index: 2;  }
#mainPanelArea .point ul { max-width: 1500px; display: flex; align-items: center; margin: 0 auto; }
#mainPanelArea .point ul li { width: 33.3333%; padding: 0 20px 0 80px; color: #fff; font-size: 1.125em; line-height: 1.5; position: relative; }
#mainPanelArea .point ul li span { position: absolute; left: 0; top: -6px; display: block; font-size: 1.5em; width: 64px; height: 64px; line-height: 64px; text-align: center; font-weight: 600; border: solid 1px #fff; border-radius: 100px; }

/*============================
#tourListArea
============================*/
#tourListArea { position: relative; margin: -200px 4% 0; padding-top: 40px; z-index: 3; border-top: solid 1px rgba(255,255,255,0.5);  }
#tourListArea .md_subTitle {}
#tourListArea .md_title { font-size: 1.125em; }
#tourListArea .category { margin: 20px 0 0; }
#tourListArea .category ul { text-align: center; margin-top: -10px; }
#tourListArea .category ul li { display: inline-block; margin: 0 5px; margin-top: 10px; }
#tourListArea .category ul li a.md_btn_lineBlack { min-width: inherit; padding: 10px 20px 9px; font-weight: 400; }
#tourListArea .category ul li a.md_btn_lineBlack:hover { border-radius: 8px; background: #fff; }
#tourListArea .content { margin-top: 20px; }
#tourListArea .content ul { text-align: center; }
#tourListArea .content ul li { display: inline-block; width: 300px; height: 548px; position: relative; margin: 30px 15px 0; transition: all 250ms ease-out; }
#tourListArea .content ul li a { display: block; width: 300px; height: 548px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); transition: all 250ms ease-out; }
#tourListArea .content ul li a::after { content: ""; position: absolute; right: 5px; bottom: 5px; border-bottom: 20px solid #333; border-left: 20px solid transparent; transition: all 200ms ease-out; z-index: 1; }
#tourListArea .content ul li a:hover { box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.1); }
#tourListArea .content ul li a:hover::after { right: 0; bottom: 0; border-bottom: 20px solid #633; border-left: 20px solid transparent; }
#tourListArea .content ul li a .image { position: absolute; left: 0; top: 0; width: 300px; height: 400px; z-index: 0; overflow: hidden; }
#tourListArea .content ul li a .image::before { content: ""; display: block; position: absolute; left: 10px; top: 10px; width: 280px; height: 380px; border: 1px solid #fff; z-index: 2; opacity: 0.5; transition: all 200ms ease-out; }
/*#tourListArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,1)); z-index: 1; }*/
#tourListArea .content ul li a .image img { transition: all 200ms ease-out; width: 100%; height: 100%; object-fit: cover; }
#tourListArea .content ul li a:hover .image img { transform: scale(1.1,1.1); }
#tourListArea .content ul li a:hover .image::before { left: 0; top: 0; width: 300px; height: 400px; opacity: 0; }
#tourListArea .content ul li a .data { height: 148px; position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px 20px; z-index: 1; text-align: left; background: #fff; }
#tourListArea .content ul li a .data .title { font-size: 1.375em; font-weight: 400; max-height: 88px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#tourListArea .content ul li a .data .number { margin-top: 10px; color: #888; font-weight: 500; display: flex; }
#tourListArea .content ul li a .data .number .hours { display: inline-block; margin-right: 5px; white-space: nowrap; }
#tourListArea .content ul li a .data .number .price { display: inline-block; margin-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tourListArea .content ul li a .icon { position: absolute; left: 20px; top: 20px; text-align: left; }
#tourListArea .content ul li a .icon .pickup { display: inline-block; margin-right: 5px;  text-align: center; background: #fff; color: #222; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; }
#tourListArea .content ul li a .icon .pickup_2 { display: inline-block; text-align: center; background: #c33; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; }

#tourListArea .content ul li a .ranking { position: absolute; right: 10px; top: -31px;}
#tourListArea .content ul li a .ranking .pickup_no1 { display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no1.svg") no-repeat center; background-size: 50px auto; }
#tourListArea .content ul li a .ranking .pickup_no2 { margin-left: 5px; display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no2.svg") no-repeat center; background-size: 50px auto; }
#tourListArea .content ul li a .ranking .pickup_no3 { margin-left: 5px; display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no3.svg") no-repeat center; background-size: 50px auto; }

#tourListArea .content .button { margin-top: 60px; text-align: center; }
#tourListArea .content .button a.md_btn_black {}

/* Load More ボタン全体のコンテナ */
#infinite-handle span { line-height: inherit; }
#infinite-handle span.ctis-load-more button { position: relative; display: inline-block; min-width: 240px; padding: 17px 0 15px; color: #fff; font-size: 1em; text-align: center; background: #222; box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); letter-spacing: 0.05em; border-radius: 50px; font-family: "century-gothic", sans-serif; font-weight: 700; font-style: normal; transition: all 250ms ease-out; }
#infinite-handle span.ctis-load-more button:hover { box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #000; }

/*============================
#bannerArea
============================*/
#bannerArea { margin-top: 80px; text-align: center; }
#bannerArea a { background: #fff; transition: all 200ms ease-out;  }
#bannerArea a img { width: 728px; height: auto; transition: all 200ms ease-out; }
#bannerArea a:hover {}
#bannerArea a:hover img { opacity: 0.9 }

/*============================
#contactArea
============================*/
#contactArea { margin-top: 100px; background: #ddd; padding: 70px 0 80px; }
#contactArea .md_container { display: flex; align-items: center; }
#contactArea .title { font-size: 3em; margin-right: 40px; }
#contactArea .text { width: 660px; font-size: 1.125em; margin-right: 30px; line-height: 1.5; color: #555; position: relative; top: 5px; }
#contactArea .button {}
#contactArea .button a.md_btn_lineBlack { min-width: 280px; background: #f5f5f5; border: none; }
#contactArea .button a.md_btn_lineBlack:hover { border: none; background: #fff; }