@charset "utf-8";
html { box-sizing: border-box; }
body{ width: 100%; margin: 0 auto; padding: 0; line-height: 0; text-decoration: none; font-size: 16px; font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333333; }
header { margin-bottom : 0px!important; overflow: hidden;}
figure { margin: 0; }
table{ border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
ul { padding: 0; margin: 0; }
dl,
dd,
p { margin: 0; line-height: 2em; }
a { text-decoration: none; }
*, *::before, *::after { box-sizing: content-box; }
h1,h2,h3,h4,h5 { line-height: 1em; text-decoration: none; font-size: 16px; font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333333; }
#global-header { width: calc(100% - 20px); padding: 6px 0; margin: 0 auto; border-bottom: 0; }
#logo, #logo * { box-sizing: border-box!important; }
#global-footer .copyright { width: 95%; }
#button-share ul.share { margin-top: 10px; }



/* コンテンツ
------------------------------------------------------------ */
.mt05 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb70 { margin-bottom: 70px; }
.mb100 { margin-bottom: 100px; }
.pl20 { padding-left: 20px; }
.taC { text-align: center; }
.taR { text-align: right; }
.flR { float: right; margin: 0 0 1em 40px; }
.flL { float: left; margin: 0 40px 1em 0; }
.ofH { overflow: hidden; }

.container { width: 100%; overflow: hidden; }
.pcView { display: block; }
.spView { display: none; }
.pcViewIn { display: inline; }
.spViewIn { display: none; }
@media (max-width: 768px) {
	.pcView { display: none; }
	.spView { display: block; }
	.pcViewIn { display: none; }
	.spViewIn { display: inline; }
}



.head { width: 100%; }
.head .hero { position: relative; max-width: 1080px; width: 100%; }
.head .hero img { width: 100%; }
.head p { text-align: center; font-size: 1.125em; margin: 50px auto 60px; }

section,
article { margin: 0 auto; padding: 0; }

nav.pageManu { width: 100%; max-width: 1080px; overflow: hidden; margin: 20px 0 40px; }
aside.publicity + nav.pageManu { margin: 80px 0 40px; }
nav.pageManu ul { margin-left: -0.4%; }
nav.pageManu li { width: 19.6%; float: left; vertical-align: top; padding-left: 0.4% }
nav.pageManu li a {
	width: 100%;
	display: block;
	font-size: 14px;
	line-height: 14px;
	text-decoration: none;
	border-bottom: 3px solid #cccccc;
}
nav.pageManu li a p { width: 216px; height: 60px; display: table-cell; text-align: center; vertical-align: middle; }
nav.pageManu li:nth-child(1) a p:nth-child(2) { display: none; }
nav.pageManu li a:hover,
nav.pageManu li.checked a { border-bottom: 3px solid #0076c6; }

.attention { width: 100%; max-width: 840px; display: table; margin: 60px auto; }
.attention p { text-align: center; font-weight: bold; font-size: 20px; line-height: 30px; }
.attention p:after {
	content: "";
	width: 60px;
	display: block;
	height: 5px;
	background: #fdd000;
	margin: 5px auto 20px;
}
.attention ul { margin: 20px 20px 0; }
.attention ul li { background: #fdd000; border-radius: 10px; overflow: hidden; }
.attention ul li a {
	display: block;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	position: relative;
	padding: 15px 30px;
}
.attention ul li a:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto 0;
}
.attention ul li:hover { opacity: 0.5; }



/*------------------------------index---------------------------*/
.container { border-top: solid 29px #0076c6; }
.contents-end .container { border-top: 0!important; }
.container img { width: 100%; }

.mainTitle { position: relative; width: 100%; max-height: 330px; background: url(../images/idx_main.png) no-repeat; background-size: cover; height: 31vw; overflow: hidden; background-position: center; }
.mainTitle .mainTitleTxt { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 40.7%; max-width: 440px; height: 21.3vw; max-height: 230px; }
.mainTitle .mainTitleStm { position: absolute; right: 30px; bottom: 30px; width: 11%; max-width: 120px; min-width: 60px; }


#firstPage section { margin: 0 auto; max-width: 1080px; padding: 0 20px; background: #ffffff; }
#firstPage #spotMap { padding-top: 40px; margin-top: -40px; }
#firstPage #spotMap h1.spotTitle { margin: 0 auto; max-width: 650px; width: 100%; }
#firstPage #spotMap .spotTxt { font-size: 1.125em; line-height: 1.5; font-weight: 700; color: #0081c9; margin-top: 25px; text-align: center; }
#firstPage #spotMap .mapTaiwan { position: relative; max-width: 900px; margin: 15px auto 0; border-radius: 65px; background: url(../images/bg_map.png) repeat; background-size: 48px 14px; }
#firstPage #spotMap .mapTaiwan nav { position: absolute; top: 75px; left: 8%; background: #fff; width: 23%; text-align: center; padding: 3px 5px; }
#firstPage #spotMap .mapTaiwan nav ul li { border-top: 1px solid #26599a; }
#firstPage #spotMap .mapTaiwan nav ul li:last-child { border-bottom: 1px solid #26599a; }
#firstPage #spotMap .mapTaiwan nav ul li a { position: relative; display: block; font-size: 1.25em; background: #26599a; margin: 1px 0; overflow: hidden; height: 1.75em; }
#firstPage #spotMap .mapTaiwan nav ul li a span { position: absolute; color: #26599a; text-decoration: none; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 1em; z-index: 150; line-height: 1; transition: 0.1s; }
#firstPage #spotMap .mapTaiwan nav ul li p { position: relative; display: block; font-size: 1.25em; background: #26599a; margin: 1px 0; overflow: hidden; height: 1.75em; }
#firstPage #spotMap .mapTaiwan nav ul li p span { position: absolute; color: #26599a; text-decoration: none; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 1em; z-index: 150; line-height: 1; transition: 0.1s; }
#firstPage #spotMap .mapTaiwan nav ul li a:before { content: ""; position: absolute; width: 100%; height: 100%; background: #ffffff; z-index: 100; left: 0; bottom: 0; margin: auto 0; }
#firstPage #spotMap .mapTaiwan nav ul li a:hover span { color: #ffffff; }
#firstPage #spotMap .mapTaiwan nav ul li a:before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,255); z-index: 100;  left: 0; bottom: 0; margin: auto 0; transition: 0.3s; }
#firstPage #spotMap .mapTaiwan nav ul li a:hover:before { background: rgba(255,255,255,0); }

#firstPage #spotMap .mapTaiwan nav ul li.select p:before { width: 0; height: 0; }
#firstPage #spotMap .mapTaiwan nav ul li.select p span { color: #ffffff; }

#firstPage #spotMap .mapEx { max-width: 360px; margin: 0 auto; padding: 40px 10px; }
#firstPage #spotMap .mapAttach01 { position: absolute; top: 50%; left: -8%; width: 25%; }
#firstPage #spotMap .mapAttach02 { position: absolute; top: 1%; right: 8%; width: 18%; }
#firstPage #spotMap .mapAttach03 { position: absolute; top: 23%; right: -5%; width: 24%; }
#firstPage #information { margin: 80px auto 20px; max-width: 720px; align-items: top; }
#firstPage #information h1.infoTitle { color: #26599a; font-size: 2em; line-height: 1; font-weight: 700; letter-spacing: 2px; text-align: center; margin-bottom: 40px; }
#firstPage #information .infoList { margin-bottom: 40px; }
#firstPage #information .infoList li a { display: block; text-decoration: none; color: #333333; transition: .15s; }
#firstPage #information .infoList li a:hover { opacity: .5; }
#firstPage #information .infoList li dl { border-top: 1px dotted #333333; padding: 7px 0; }
#firstPage #information .infoList li:last-child dl { border-bottom: 1px dotted #333333; }
#firstPage #information .infoList li dl { display: -webkit-flex; display: flex; }
#firstPage #information .infoList li dl dt,
#firstPage #information .infoList li dl dd { line-height: 1.5; }
#firstPage #information .infoList li dl dt { padding-left: 0.5em; font-weight: 700; }
#firstPage #information .infoList li dl dd { margin-left: 1em; }


@media screen and (max-width: 1100px) {
	#firstPage #spotMap .mapAttach01 { position: absolute; top: 50%; left: 1%; }
	#firstPage #spotMap .mapAttach02 { position: absolute; top: 1%; right: 8%; }
	#firstPage #spotMap .mapAttach03 { position: absolute; top: 23%; right: -2%; }
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	#global-header { width: calc(100% - 20px); border-bottom: 0; }
	.container { border-top: solid 5px #0076c6; }
	#firstPage section { padding: 0 10px; }
	#firstPage #spotMap h1.spotTitle { max-width: 300px; width: 100%; }
	#firstPage #spotMap .spotTxt { font-size: 0.937em; margin-top: 20px; line-height: 1.25; }
	#firstPage #spotMap .mapTaiwan { border-radius: 30px; }
	#firstPage #spotMap .mapTaiwan nav { top: 30px; left: 30px; width: 25%; padding: 4px; }
	#firstPage #spotMap .mapTaiwan nav ul li a { font-size: 1em; }
	#firstPage #spotMap .mapTaiwan nav ul li p { font-size: 1em; }
	#firstPage #spotMap .mapAttach01,
	#firstPage #spotMap .mapAttach02,
	#firstPage #spotMap .mapAttach03 { display: none; }

	#firstPage #information { margin: 40px auto 30px; display: block; }
	#firstPage #information h1.infoTitle { font-size: 1.5em; margin-bottom: 30px; }
	#firstPage #information .infoList { max-width: 568px; width: 100%; margin: 20px auto 0; }
	#firstPage #information .infoList li dl { display: block; }
	#firstPage #information .infoList li dl dt { padding: 0; margin: 5px 0 0; font-size: 0.8125em; }
	#firstPage #information .infoList li dl dd { margin: 5px 0 0; font-size: 0.8125em; }
}
@media screen and (max-width: 568px) {
	.mainTitle { height: 140px; }
	.mainTitle .mainTitleTxt { width: 200px; height: 99px; }
	.mainTitle .mainTitleStm { position: absolute; right: 15px; bottom: 15px; width: 45px; min-width: auto; }
	#firstPage #spotMap .spotTxt { text-align: left; max-width: 340px; margin: 20px auto 0; }
}
@media screen and (max-width: 414px) {
	.mainTitle .mainTitleTxt { width: 160px; height: 79px; }
	.mainTitle .mainTitleStm { right: 10px; bottom: 10px; }
	#firstPage #spotMap .mapTaiwan { border-radius: 15px; }
	#firstPage #spotMap .mapTaiwan nav { top: 5px; left: 5px; }
	#firstPage #spotMap .mapTaiwan nav ul li a { font-size: 0.8125em; }
	#firstPage #spotMap .mapTaiwan nav ul li p { font-size: 0.8125em; }
}



/*list page*/
#seeingList section { margin: 0 auto; max-width: 1080px; padding: 0 20px; background: #ffffff; }
#seeingList #recomNav { height: 26.3vw; max-height: 285px; min-height: 200px; background: url(../images/bg_seeinglist.jpg) no-repeat; background-size: cover; background-position: center; }
#seeingList #recomNav .recomNavList { position: relative; height: 26.3vw; max-height: 285px; min-height: 200px; max-width: 1100px; margin: 0 auto; }
#seeingList #recomNav .recomNavList ul { position: absolute; right: 0; left: 0; bottom: 10px; display: -webkit-flex; display: flex; flex-wrap: nowrap; margin: 0 10px; }
#seeingList #recomNav .recomNavList ul li { width: calc(20% - 0.8px); }
#seeingList #recomNav .recomNavList ul li + li { margin-left: 1px; }
#seeingList #recomNav .recomNavList ul li a { position: relative; display: block; text-align: center; background: #26599a; margin: 0 2px; padding: 8px 10px; font-size: 1.25em; font-weight: 700; line-height: 1; text-decoration: none; letter-spacing: 2px; overflow: hidden; height: 1.3em; }
#seeingList #recomNav .recomNavList ul li p { position: relative; display: block; text-align: center; background: #26599a; margin: 0 2px; padding: 8px 10px; font-size: 1.25em; font-weight: 700; line-height: 1; text-decoration: none; letter-spacing: 2px; overflow: hidden; height: 1.3em; }
#seeingList #recomNav .recomNavList ul li:first-child a { margin-left: 0; }
#seeingList #recomNav .recomNavList ul li:last-child a { margin-right: 0; }
#seeingList #recomNav .recomNavList ul li:first-child p { margin-left: 0; }
#seeingList #recomNav .recomNavList ul li:last-child p { margin-right: 0; }
#seeingList #recomNav .recomNavList ul li a span { position: absolute; color: #26599a; text-decoration: none; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 1em; z-index: 150; line-height: 1; transition: 0.1s; }
#seeingList #recomNav .recomNavList ul li a:before { content: ""; position: absolute; width: 230px; height: 230px; z-index: 100; left: 0; bottom: 0; margin: auto 0; background: rgba(255,255,255,255); transition: 0.3s; }
#seeingList #recomNav .recomNavList ul li p span { position: absolute; color: #26599a; text-decoration: none; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 1em; z-index: 150; line-height: 1; transition: 0.1s; }
#seeingList #recomNav .recomNavList ul li p:before { content: ""; position: absolute; width: 230px; height: 230px; z-index: 100; left: 0; bottom: 0; margin: auto 0; background: rgba(255,255,255,255); transition: 0.3s; }
#seeingList #recomNav .recomNavList ul li a:hover span { color: #ffffff; }
#seeingList #recomNav .recomNavList ul li a:hover:before { background: rgba(255,255,255,0); }
#seeingList #recomNav .recomNavList ul li.select p:before { width: 0; height: 0; }
#seeingList #recomNav .recomNavList ul li.select p span { color: #ffffff; }
#seeingList #recomNav .recomNavList h1.seeTitle { position: absolute; display: flex; color: #ffffff; justify-content: center; align-items: center; font-size: 2.5em; line-height: 1.25; font-weight: 700; letter-spacing: 2px; text-align: center; top: 33%; right: 0; left: 0; margin: 0 auto; }
#seeingList #recomNav .recomNavList h1.seeTitle br { display: none; }

@media screen and (max-width: 1120px) {
	#seeingList #recomNav .recomNavList ul { margin: 0 20px; }
}

@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	#seeingList #recomNav .recomNavList h1.seeTitle { width: auto; max-width: 100%; height: auto; font-size: 1.75em; top: 31%; left: 0; right: 0; margin: 0 auto; text-align: center; background: none; }
	#seeingList #recomNav .recomNavList h1.seeTitle br { display: none; }
}
@media screen and (max-width: 568px) {
	#seeingList section { padding: 0 10px; }
	#seeingList #recomNav { height: 140px; min-height: auto; margin-bottom: 130px; }
	#seeingList #recomNav .recomNavList { height: 140px; min-height: auto; }
	#seeingList #recomNav .recomNavList ul { padding: 140px 0 0; position: static; flex-wrap: wrap; margin: 0; border-top: none; border-bottom: 1px solid #26599a; }
	#seeingList #recomNav .recomNavList ul li { width: calc(50% - 1px); border-bottom: 1px solid #26599a; }
	#seeingList #recomNav .recomNavList ul li + li { margin-left: 0px; }
	#seeingList #recomNav .recomNavList ul li:first-child { width: 100%; }
	#seeingList #recomNav .recomNavList ul li:nth-child(2n) { border-right: 1px solid #26599a; }
	#seeingList #recomNav .recomNavList ul li:nth-child(4) { border-bottom: 0; }
	#seeingList #recomNav .recomNavList ul li:last-child { border-bottom: none; }
	#seeingList #recomNav .recomNavList ul li:not(.select) a { background: none; }
	#seeingList #recomNav .recomNavList ul li:not(.select) a span { color: #26599a; }
	#seeingList #recomNav .recomNavList ul li a { margin: 0; padding: 7px 10px; font-size: 1em; height: 1.5em; }
	#seeingList #recomNav .recomNavList ul li a span { color: #ffffff; }
	#seeingList #recomNav .recomNavList ul li a:before  {display: none; }
	#seeingList #recomNav .recomNavList ul li p { margin: 0; padding: 7px 10px; font-size: 1em; height: 1.5em; }
	#seeingList #recomNav .recomNavList ul li p span { color: #ffffff; }
	#seeingList #recomNav .recomNavList ul li p:before { display: none; }
	#seeingList #recomNav .recomNavList h1.seeTitle { width: auto; max-width: 100%; height: auto; font-size: 1.75em; top: 41%; left: 0; right: 0; margin: 0 auto; text-align: center; background: none; }
}
@media screen and (max-width: 414px) {
	#seeingList #recomNav .recomNavList h1.seeTitle { font-size: 1.375em; }
}


/*place*/

#sightseeingSpot section { margin: 0 auto; padding: 0 20px; background: #ffffff; }
#sightseeingContents { margin: 0 auto; max-width: 1080px; padding: 0 20px; background: #ffffff; }
#sightseeingContents .sigImg .sigSubImg { display: -webkit-flex; display: flex; flex-wrap: wrap; margin-top: 20px; }
#sightseeingContents .sigImg .sigSubImg img { width: calc(50% - 10px); height: 100%; }
#sightseeingContents .sigImg .sigSubImg img + img { margin-left: 20px; }
#sightseeingContents .sigEx { margin: 20px auto 0; background: #e5f1ff; padding: 60px; display: }
#sightseeingContents .sigEx .sigTitle { display: -webkit-flex; display: flex; flex-wrap: nowrap; align-items: center; }
#sightseeingContents .sigEx .sigTitle img { width: 80px; }
#sightseeingContents .sigEx .sigTitle h1 { max-width: calc(100% - 0.5em - 80px); font-size: 2.75em; line-height: 1.25em; font-weight: 700; color: #0081c9; padding-left: 0.5em; margin: 0; }

#sightseeingContents .sigEx .sigInfo { display: -webkit-flex; display: flex; flex-wrap: wrap; margin-left: 110px; align-items: flex-start; margin-top: 20px; }
#sightseeingContents .sigEx .sigInfo .sigType { order: 2; width: 244px; display: -webkit-flex; display: flex; flex-wrap: wrap; }
#sightseeingContents .sigEx .sigInfo .sigType dt { color: #ffffff; background: #0081c9; font-size: 0.875em; font-weight: 700; text-align: center; padding: 8px 0; line-height: 1.3; width: 80px; }
#sightseeingContents .sigEx .sigInfo .sigType dd { color: #0081c9; font-size: 0.875em; font-weight: 700; text-align: center; padding: 8px 0; line-height: 1.3; background: #ffffff; border: 1px solid #0081c9; width: 160px; }
#sightseeingContents .sigEx .sigInfo .sigType dd + dt,
#sightseeingContents .sigEx .sigInfo .sigType dd + dt + dd { border-top: 0; }
#sightseeingContents .sigEx .sigInfo .sigTxt { font-size: 1.125em; line-height: 1.71; order: 1; width: calc(100% - 280px); margin-right: 20px; }

#sightseeingContents .sigEx .sigLink { margin-top: 20px; }
#sightseeingContents .sigEx .sigLink.sigSub a { font-weight: 400; font-size: 0.85em; }
#sightseeingContents .sigEx .sigLink a { position: relative; display: block; border: 1px solid #0081c9; text-align: center; font-size: 1.063em; color: #0081c9; font-weight: 700; letter-spacing: 2px; line-height: 1.25; padding: 15px 40px; text-decoration: none; transition: 0.15s; }
#sightseeingContents .sigEx .sigLink a:before { content: ""; position: absolute; width: 9px; height: 7px; border: 1px solid #0081c9; background: #ffffff; margin: auto 0; top: 0; bottom: 2px; right: 22px; z-index: 200; transition: 0.15s; }
#sightseeingContents .sigEx .sigLink a:after { content: ""; position: absolute; width: 9px; height: 7px; border: 1px solid #0081c9; background: #ffffff; margin: auto 0; top: 2px; bottom: 0; right: 20px; z-index: 100; transition: 0.15s; }
#sightseeingContents .sigEx .sigLink a:hover { opacity: .5; }
#sightseeingContents .sigEx .sigLink a:hover:before { bottom: 5px; right: 23px; z-index: 200; width: 10px; height: 8px; }
#sightseeingContents .sigEx p.sigLinkTit { margin-top: 40px; line-height: 1.5; text-align: center; color: #0081c9; font-weight: 700; }
#sightseeingContents .sigEx p.sigLinkTit + .sigLink { margin-top: 10px; }
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 960px) {
	#sightseeingContents .sigEx { padding: 30px; }
	#sightseeingContents .sigEx .sigTitle h1 { font-size: 2em; margin-top: 15px; }
	#sightseeingContents .sigEx .sigType { margin-top: 15px; }
	#sightseeingContents .sigEx .sigTitle h1 { font-size: 1.5em; margin-top: 12px; }
	#sightseeingContents .sigEx .sigTitle img { width: 45px; }
	#sightseeingContents .sigEx .sigInfo { display: block; margin-left: 0; }
	#sightseeingContents .sigEx .sigInfo .sigType { width: 100%; }
	#sightseeingContents .sigEx .sigInfo .sigType dt { color: #ffffff; background: #0081c9; font-size: 0.75em; padding: 6px 0; width: 60px; }
	#sightseeingContents .sigEx .sigInfo .sigType dd { font-size: 0.75em; padding: 6px 5px; width: calc(50% - 72px); text-align: left; border: 1px solid #0081c9; }
	#sightseeingContents .sigEx .sigInfo .sigType dd + dt,
	#sightseeingContents .sigEx .sigInfo .sigType dd + dt + dd { border-top: 1px solid #26599a; }

	#sightseeingContents .sigEx .sigInfo .sigTxt { margin-top: 15px; font-size: 0.937em; line-height: 1.5; width: 100%; margin-right: 0; }
}
@media screen and (max-width: 767px) {
	#sightseeingSpot section { padding: 0 10px; }
	#sightseeingContents { padding: 0 10px; }
	#sightseeingContents .sigImg .sigSubImg { margin-top: 10px; }
	#sightseeingContents .sigImg .sigSubImg img { width: calc(50% - 5px); }
	#sightseeingContents .sigImg .sigSubImg img + img { margin-left: 10px; }
	#sightseeingContents .sigEx { margin: 10px auto 0; }
	#sightseeingContents .sigEx .sigLink a { text-align: left; padding: 10px 25px 10px 15px; font-size: 1em; }
	#sightseeingContents .sigEx .sigLink a:before { bottom: 2px; right: 12px; }
	#sightseeingContents .sigEx .sigLink a:after { right: 10px; }
	#sightseeingContents .sigEx .sigLink a:hover:before { right: 13px; }
	
}
@media screen and (max-width: 568px) {
	#sightseeingContents .sigEx .sigTitle {  align-items: flex-start; }
	#sightseeingContents .sigEx .sigTitle h1 { margin-top: 0; }
}
@media screen and (max-width: 414px) {
	#sightseeingContents .sigEx { padding: 15px; }
	#sightseeingContents .sigEx .sigInfo .sigType { width: 100%; }
	#sightseeingContents .sigEx .sigInfo .sigType dt { color: #ffffff; background: #0081c9; font-size: 0.75em; padding: 6px 0; width: 60px; }
	#sightseeingContents .sigEx .sigInfo .sigType dd { font-size: 0.75em; padding: 6px 5px; width: calc(100% - 72px); text-align: left; border: 1px solid #0081c9; }
	#sightseeingContents .sigEx .sigInfo .sigType dd + dt,
	#sightseeingContents .sigEx .sigInfo .sigType dd + dt + dd { border-top: 0; }
}


/* common */

.subTitle { max-width: 460px; padding: 0 20px; margin: -50px auto 15px; }
#recommendation { position: relative; }

#seeingList #recommendation { margin-top: 30px; }
#recommendation h1.recomTitle { color: #26599a; font-size: 2em; line-height: 1; font-weight: 700; letter-spacing: 2px; text-align: center; margin-top: 120px; margin-bottom: 40px; }

#recommendation ul.spotList { margin: 0 auto ; display: -webkit-flex; display: flex; flex-wrap: wrap; max-width: 1080px; }

#recommendation ul.spotList li { width: calc(25% - 22.5px); }
#recommendation ul.spotList li:not(:nth-child(4n+1)) { margin-left: 30px; }
#recommendation ul.spotList li:nth-child(n+5) { margin-top: 90px; }
#recommendation ul.spotList li a { display: block; text-decoration: none; transition: 0.15s; }
#recommendation ul.spotList li a:hover { opacity: .5; }
#recommendation ul.spotList li a .spotListEx { border-bottom: 1px solid #aaaaaa; padding-bottom: 10px; }
#recommendation ul.spotList li a .spotListEx dd { margin-top: 5px; }
#recommendation ul.spotList li a .spotListEx dd .spotListNum { width: 20px; line-height: 1; margin-top: 10px; }
#recommendation ul.spotList li a .spotListEx dd .spotListName { margin-top: 5px; font-size: 1.125em; line-height: 1.25; font-weight: 700; color: #0081c9; }
#recommendation ul.spotList li a .spotListEx dd .spotListName sup { font-size: 0.625em; line-height: 1; }
#recommendation ul.spotList li a .spotListEx dd .spotListPlace { margin-top: 4px; font-size: 0.875em; line-height: 1.25; }
#recommendation ul.spotList li ul.spotListGroup { display: -webkit-flex; display: flex; flex-wrap: wrap; margin: 10px auto 0; }
#recommendation ul.spotList li ul.spotListGroup li { width: calc(2em + 10px); display: block; padding: 3px 8px; line-height: 1; background: #0081c9; color: #ffffff; font-size: 0.875em; white-space: nowrap; text-align: center; margin-left: 0; margin-right: 10px; }
#recommendation .recomBtn { margin-top: 80px; }
#firstPage #recommendation .recomBtn { margin-bottom: 100px; }
#recommendation .recomBtn a { position: relative; display: block; text-align: center; font-weight: 700; color: #0081c9; border: 1px solid #0081c9; letter-spacing: 2px; font-size: 1.063em; line-height: 1; text-decoration: none; padding: 15px 30px; margin: 0 auto; max-width: 260px; letter-spacing: 2px; width: 100%; transition: .15s; }
#recommendation .recomBtn a:before { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; width: 10px; height: 10px; border-top: 2px solid #0081c9; border-right: 2px solid #0081c9; transform: rotate(45deg); margin: auto 0; transition: .15s; }
#recommendation .recomBtn a:after { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; width: 20px; height: 2px; background: #0081c9; transition: .15s; }
#recommendation .recomBtn a:hover { opacity: .5; }
#recommendation .recomBtn a:hover:before { right: 16px; }
#recommendation .recomBtn a:hover:after { right: 16px; }

#recommendation .recomBackBtn { margin: 80px auto 20px; padding-left: 20px; max-width: 1080px; }
#recommendation .recomBackBtn a { position: relative; font-weight: 700; color: #26599a; font-size: 1em; line-height: 1; text-decoration: none; text-align: right; transition: .15s; }
#recommendation .recomBackBtn a:before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; width: 14px; height: 2px; background: #26599a; margin: auto 0; transition: .15s; }
#recommendation .recomBackBtn a:after { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; margin: auto 0; width: 7px; height: 7px; border-top: 2px solid #26599a; border-left: 2px solid #26599a; transform: rotate(-45deg); transition: .15s; }
#recommendation .recomBackBtn a:hover { opacity: .5; }

#recommendation .recomBtn + .recomBackBtn { margin-top: 60px; margin-bottom: 20px; }

#spotFooter { margin-top: 40px; padding-bottom: 40px; }
#spotFooter .footCooperation { max-width: 280px; width: 100%; margin: 0 auto; }
#spotFooter .footCooperation .coorpeName { display: -webkit-flex; display: flex; }
#spotFooter .footCooperation .coorpeName a { display: block; width: calc(50% - 10px); }
#spotFooter .footCooperation .coorpeName a + a { margin-left: 20px; }
#spotFooter .footCooperation .coorpeUrl { margin-top: 20px; }

@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	.subTitle { margin: 15px auto; }
	#seeingList #recommendation { margin-top: 30px; }
	#recommendation h1.recomTitle { font-size: 1.5em; margin: 40px auto 30px; }
	#recommendation ul.spotList { margin-top: 0; }
	#recommendation ul.spotList li { width: calc((100% / 3) - 10px); }
	#recommendation ul.spotList li:not(:nth-child(4n+1)) { margin-left: 0; }
	#recommendation ul.spotList li:nth-child(n+5) { margin-top: 0; }
	#recommendation ul.spotList li:not(:nth-child(3n+1)) { margin-left: 15px; }
	#recommendation ul.spotList li:nth-child(n+4) { margin-top: 60px; }
	#recommendation ul.spotList li a .spotListEx dd .spotListNum img { vertical-align: bottom; }
	#recommendation ul.spotList li a .spotListEx dd .spotListName { font-size: 1.067em; line-height: 1.25; }
	#recommendation ul.spotList li a .spotListEx dd .spotListPlace { font-size: 0.8125em; }
	#recommendation ul.spotList li ul.spotListGroup li { width: 2em; margin: 3px 1.5px 0 1.5px;  padding: 2px 4px; font-size: 0.8125em; }
	#recommendation .recomBtn { margin-top: 60px; margin-bottom: 20px; }
	#firstPage #recommendation .recomBtn { margin-bottom: 60px; }
	#recommendation .recomBtn a { font-size: 1em; padding: 10px 20px; max-width: 220px; }
	#recommendation .recomBackBtn { margin-top: 80px; margin-bottom: 20px; }
	#recommendation .recomBackBtn a { font-size: 0.875em; }
	#spotFooter { margin-top: 40px; padding-bottom: 40px; }
	#spotFooter .footCooperation { max-width: 220px; }
	#spotFooter .footCooperation .coorpeUrl { margin-top: 10px; }
}
@media screen and (max-width: 568px) {
	#recommendation ul.spotList li { width: calc(50% - 5px); }
	#recommendation ul.spotList li:not(:nth-child(4n+1)) { margin-left: 0; }
	#recommendation ul.spotList li:nth-child(n+5) { margin-top: 0; }
	#recommendation ul.spotList li:not(:nth-child(3n+1)) { margin-left: 0; }
	#recommendation ul.spotList li:nth-child(n+4) { margin-top: 0; }
	#recommendation ul.spotList li:nth-child(2n) { margin-left: 10px; }
	#recommendation ul.spotList li:nth-child(n+3) { margin-top: 40px; }

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


/*モーダルウィンドウ パララックス*/

.parallaxBg1 { background: url(../images/para_img_01.jpg); min-height: 300px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
.parallaxBg2 { background: url(../images/para_img_02.jpg); min-height: 300px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
.parallaxBg3 { background: url(../images/para_img_03.jpg); min-height: 300px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
#sightseeingSpot .parallaxBg2 { background: url(../images/para_img_02.jpg); min-height: 300px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; margin-top: 0; }

.modal_open { cursor: pointer; }
.modal_box { position: fixed; z-index: 7777; display: none; width: 80%; max-width: 630px; margin: 0; padding: 10px 10px 20px 10px; background: #ffffff; box-sizing: border-box; }
.modal_box .modListContents { padding: 20px 20px 0 20px; display: -webkit-flex; display: flex; justify-content: space-between; }
.modal_box .modListContents .modListEx { width: calc(100% - 150px); }
.modal_box .modListContents .modListEx .modListTitle { display: -webkit-flex; display: flex; align-items: flex-start; }
.modal_box .modListContents .modListEx .modListTitle img { width: 46px; }
.modal_box .modListContents .modListEx .modListTitle p.modListName { max-width: calc(100% - 0.5em - 46px); padding-left: 0.5em; margin-top: 3px; color: #0081c9; font-weight: 700; font-size: 2em; line-height: 1.25; }
.modal_box .modListContents .modListEx .modListTxt { font-size: 0.927em; line-height: 1.5; margin-top: 10px; }
.modal_box .modListContents .modListLink a { position: relative; display: -webkit-flex; display: flex; border: 1px solid #26599a; height: 110px; width: 110px; justify-content: center; align-items: center; color: #26599a; font-size: 1.06em; line-height: 1.76;text-decoration: none; font-weight: 700; letter-spacing: 2px; }
.modal_box .modListContents .modListLink a:before { content: ""; position: absolute; width: 7px; height: 7px; border-top: 1px solid #26599a; transform: rotate(45deg); bottom: 36px; right: 28px; transition: 0.15s; }
.modal_box .modListContents .modListLink a:after { content: ""; position: absolute; width: 15px; height: 1px; background: #26599a; bottom: 39px; right: 26px; transition: 0.15s; }
.modal_box .modListContents .modListLink a:hover:before { right: 24px; }
.modal_box .modListContents .modListLink a:hover:after { right: 22px; }
.modal_box .modClose { position: absolute; margin: 0 auto; width: 25px; height: 25px; top: 20px; right: 20px; }
.modal_box .modClose a { display: block; position: relative; width: 25px; height: 25px; cursor: pointer; }
.modal_box .modClose a:before { content: ""; position: absolute; display: block; top: 50%; width: 26px; height: 1px; background: #ffffff; transform: rotate(45deg); }
.modal_box .modClose a:after { content: ""; position: absolute; display: block; left: 50%; width: 1px; height: 26px; background: #ffffff; transform: rotate(45deg); }
.modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0,0,0,0.7);}


@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	.parallaxBg1 { background: url(../images/para_img_01.jpg); height: 170px; min-height: auto; background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; }
	.parallaxBg2 { background: url(../images/para_img_02.jpg); height: 150px; min-height: auto; background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; }
	.parallaxBg3 { background: url(../images/para_img_03.jpg); height: 150px; min-height: auto; background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; }
	#sightseeingSpot .parallaxBg2 { background: url(../images/para_img_02.jpg); height: 150px; min-height: auto; background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; margin-top: 0; }

	.modal_box .modListContents { padding: 0; display: block; }
	.modal_box .modListContents .modListEx { width: 100%; margin-top: 20px; }
	.modal_box .modListContents .modListEx .modListTitle img { width: 35px; }
	.modal_box .modListContents .modListEx .modListTitle p.modListName { font-size: 1.5em; }
	.modal_box .modListContents .modListEx .modListTxt { font-size: 0.875em; }
	.modal_box .modListContents .modListLink a { height: 30px; width: 100%; font-size: 0.8125em; line-height: 1; margin: 10px auto 0; }
	.modal_box .modListContents .modListLink a br { display: none; }
	.modal_box .modListContents .modListLink a:before { top: 0; bottom: 0; right: 15px; margin: auto 0; }
	.modal_box .modListContents .modListLink a:after { margin: auto 0; top: 0; bottom: 0; right: 14px; }
	.modal_box .modListContents .modListLink a:hover:before { right: 13px; }
	.modal_box .modListContents .modListLink a:hover:after { right: 12px; }
}
@media screen and (max-width: 568px) {

}
@media screen and (max-width: 414px) {
	.parallaxBg1 { height: 120px; }
	.parallaxBg2 { height: 80px; margin-top: 40px; }
	.modal_box .modListContents .modListEx { margin-top: 15px; }
	.modal_box .modListContents .modListEx .modListTitle img { width: 25px; }
	.modal_box .modListContents .modListEx .modListTitle p.modListName { font-size: 1.25em; margin-top: 0; }
	.modal_box .modListContents .modListEx .modListTxt { font-size: 0.8125em; }
}