@charset "utf-8";

@media only screen and (max-width: 640px) {
	
/*============================
#header
============================*/
#header {}
#header .logo a span {}
#header .pcSubNavi ul li a {}

/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 640px; position: relative; }
#mainPanelArea .panel { z-index: 1; position: relative; height: 720px; }
#mainPanelArea .panel ul {}
#mainPanelArea .panel ul li {}
#mainPanelArea .panel ul li img {}
#mainPanelArea .panel::after {}
#mainPanelArea .catch { left: 20px; top: 25%; font-size: 1.75em; width: inherit; margin-left: 0;  white-space: inherit; line-height: 1.125; }
#mainPanelArea .lead { left: 20px; top: 37%; font-size: 0.875em; width: inherit; margin-left: 0;  white-space: inherit; padding: 0 20px; }
#mainPanelArea .catch span {}
#mainPanelArea .catch span:nth-child(1) {}
#mainPanelArea .catch span:nth-child(2) {}
#mainPanelArea .catch span:nth-child(3) {}
#mainPanelArea .catch span:nth-child(4) {}
#mainPanelArea .catch span:nth-child(5) {}
#mainPanelArea .catch span:nth-child(6) {}
#mainPanelArea .catch span:nth-child(7) {}
#mainPanelArea .catch span:nth-child(8) {}
#mainPanelArea .catch span:nth-child(9) {}
#mainPanelArea .catch span:nth-child(10) {}
#mainPanelArea .catch span:nth-child(11) {}
#mainPanelArea .catch span:nth-child(12) {}
#mainPanelArea .catch span:nth-child(13) {}
#mainPanelArea .catch span:nth-child(14) {}
#mainPanelArea .catch span:nth-child(15) {}
#mainPanelArea .catch span:nth-child(16) {}
#mainPanelArea .catch span:nth-child(17) {}
#mainPanelArea .catch span:nth-child(18) {}
#mainPanelArea .catch span:nth-child(19) {}
#mainPanelArea .catch span:nth-child(20) {}
#mainPanelArea .catch span:nth-child(21) {}
#mainPanelArea .catch span:nth-child(22) {}
#mainPanelArea .catch span:nth-child(23) {}
#mainPanelArea .catch span:nth-child(24) {}
#mainPanelArea .catch span:nth-child(25) {}
#mainPanelArea .catch span:nth-child(26) {}
#mainPanelArea .catch span:nth-child(27) {}
#mainPanelArea .button { left: 20px; top: 46%; width: inherit; margin-left: 0; }
#mainPanelArea .button a.md_btn_lineWhite { padding: 14px 0; width: 180px; min-width: 180px; }
#mainPanelArea .button a.md_btn_lineWhite::after {}
#mainPanelArea .button a.md_btn_lineWhite:hover::after {}
#mainPanelArea .point {}
#mainPanelArea .point ul {}
#mainPanelArea .point ul li {}
#mainPanelArea .point ul li span {}

/*============================
#tourListArea
============================*/
#tourListArea { margin: -200px 10px 0; padding-top: 20px; }
#tourListArea .md_subTitle {}
#tourListArea .md_title { font-size: 0.875em; }
#tourListArea .category { margin-top: 8px; }
#tourListArea .category ul {}
#tourListArea .category ul li { margin: 8px 2px 0; }
#tourListArea .category ul li a.md_btn_lineBlack { padding: 5px 12px; font-size: 0.75em; }
#tourListArea .category ul li a.md_btn_lineBlack:hover {}
#tourListArea .content {}
#tourListArea .content ul {}
#tourListArea .content ul li { float: left; width: 47%; height: inherit; margin: 20px 1.5% 0; }
#tourListArea .content ul li a { width: 100%; height: inherit; }
#tourListArea .content ul li a::after { right: 0; bottom: 0; }
#tourListArea .content ul li a:hover {}
#tourListArea .content ul li a:hover::after {}
#tourListArea .content ul li a .image { position: inherit; left: inherit; top: inherit; width: 100%; height: 100%; z-index: 0; aspect-ratio: 3 / 4; overflow: hidden; }
#tourListArea .content ul li a .image::before { display: none; }
#tourListArea .content ul li a .image::after { background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 30%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,1)); }
#tourListArea .content ul li a .image img { width: 100%; height: auto; }
#tourListArea .content ul li a:hover .image img {}
#tourListArea .content ul li a:hover .image::before { left: 0; top: 0; width: 100%; opacity: 0; }
#tourListArea .content ul li a .data { height: inherit; padding: 10px; position: inherit; left: 0; top: 0; }
#tourListArea .content ul li a .data .title { font-size: 1em; line-height: 1.125; }
#tourListArea .content ul li a .data .number { margin-top: 5px; font-size: 0.9125em; }
#tourListArea .content ul li a .data .number .hours { margin-right: 0; }
#tourListArea .content ul li a .data .number .price { display: block; margin-left: 0; }
#tourListArea .content ul li a .icon { position: absolute; left: 10px; top: 10px; margin-right: 40px; }
#tourListArea .content ul li a .icon .pickup {}
#tourListArea .content ul li a .icon .pickup_2 {}
#tourListArea .content ul li a .ranking { position: absolute; right: 0; top: -15px;}
#tourListArea .content ul li a .ranking .pickup_no1 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no1.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .content ul li a .ranking .pickup_no2 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no2.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .content ul li a .ranking .pickup_no3 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no3.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .content .button { margin-top: 30px; }
#tourListArea .content .button a.md_btn_black { min-width: 240px; }
	
/* Load More ボタン全体のコンテナ */
#infinite-handle span.ctis-load-more button { padding: 15px 0 13px; }
#infinite-handle span.ctis-load-more button:hover {}
	
/*============================
#bannerArea
============================*/
#bannerArea { margin-top: 60px; padding: 0 15px; }
#bannerArea a {}
#bannerArea a img { width: 100%; height: auto; }
#bannerArea a:hover {}
#bannerArea a:hover img {}

/*============================
#contactArea
============================*/
#contactArea { margin-top: 60px; padding: 40px 0 50px; }
#contactArea .md_container { display: block; align-items: inherit; }
#contactArea .title { font-size: 2em; margin-right: 0; text-align: center; }
#contactArea .text { margin-top: 20px; width: inherit; margin-right: 0; top: inherit; }
#contactArea .button { margin-top: 20px; text-align: center; }
#contactArea .button a.md_btn_lineBlack { min-width: 240px; }
#contactArea .button a.md_btn_lineBlack:hover {}

}