@charset "UTF-8";
/* CSS Document */


#panorama-head { padding-bottom: 4rem; }
#head-img { width: 100%; margin-bottom: 6rem; position: relative; overflow: visible; }
.img-box { aspect-ratio: 1 / .2; position: relative; overflow: hidden; }
.img-box img { object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#panorama-head .head-icon { width: 190px; height: auto; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); }
#panorama-head-box { width: 92%; margin: 0 auto; }
#panorama-head h1 { width: min(100%,720px); margin: 0 auto; padding-bottom: 2rem; display: flex; justify-content: space-between; }
#panorama-head h1 strong { width: 51%; display: block; }
#panorama-head h1 span { width: 47%; display: block; }
#panorama-head p { font-size: 1.3rem; line-height: 1.4; text-align: center; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#head-img { margin-bottom: 4rem; }
	.img-box { aspect-ratio: 1 / .7; }
	.img-box img { width: auto; height: 100%; }
	#panorama-head .head-icon { width: 30%; }
	#panorama-head h1 { flex-direction: column; align-items: center; }
	#panorama-head h1 strong { width: 58%; padding-bottom: .5rem; }
	#panorama-head h1 span { width: 52%; }
	#panorama-head p { font-size: 1.2rem; line-height: 1.4; }
	#panorama-head p span { content: "\A"; white-space: pre; }
}

#panorama-tab ul { width: min(92%,920px); margin: 0 auto; display: flex; justify-content: space-between; }
#panorama-tab ul li { width: calc((100% / 3) - (20px / 3)); }
#panorama-tab ul li a { color: #333; min-height: 3rem; background: #D2D2D2; display: flex; align-items: center; justify-content: center; position: relative; transition: 0.3s; }
#panorama-tab ul li a::after { content: ""; width: 100%; height: .3rem; background: rgba(0,0,0,.2); background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.2)); position: absolute; left: 0; bottom: 0; }
#panorama-tab ul li a:hover { min-height: 3.3rem; margin-top: -.3rem; }
#panorama-tab ul li a.active { background: #E6E6E6; }
#panorama-tab ul li a.active::after { background: none; }
#panorama-tab ul li a.active:hover { min-height: 3rem; margin-top: 0; }
#panorama-tab ul li a p { font-size: 1rem; line-height: 1.4; text-align: center; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#panorama-tab ul li a p { font-size: .9rem; line-height: 1.4; }
	#panorama-tab ul li a p span::before { content: "\A"; white-space: pre; }
}

#panorama-column { background: #E6E6E6; }
#panorama-column .inner-box { padding: 2rem 0; }
#panorama { height: 60vh; }
.p-select { padding: 1em 0 2em 0; }
.p-select ul { display: flex; flex-wrap: wrap; }
.p-select ul li { width: calc(94% / 7); margin: 0 1% 1% 0; overflow: hidden; }
#p-select1 ul { justify-content: center; }
.p-select ul li:nth-child(7n), #p-select1 ul li:nth-child(4) { margin-right: 0; }
.p-select ul li a { display: block; position: relative; }
.p-select ul li a img { transition: .3s; }
.p-select ul li a:hover img { opacity: .8; transform: scale(1.2); filter: blur(1px); }
.p-select ul li a.active img { opacity: .6; }
.p-select ul li a.active:hover img { transform: scale(1); filter: blur(0); }
.p-select ul li a.active::after { content: ""; width: 100%; height: 100%; box-shadow: 0 0 0 6px rgba(64,154,214,0.65) inset; display: block; position: absolute; top: 0; left: 0; }
#panorama-column h2 { font-size: 180%; line-height: 1.2; text-align: center; font-weight: bold; color: #409AD6; padding-bottom: .5em; }
#panorama-column h2 span { font-size: 75%; line-height: 1.2; font-weight: normal; }
#panorama-column p { line-height: 1.8; text-align: justify; }
#panorama-column ul.attention { margin-top: .5em; }
#panorama-column ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: .2em 0 0 1em; }
#p-menu { padding-top: 2em; }
#p-menu ul { display: flex; justify-content: space-between; }
#p-menu ul li { width: 32%; }
#p-menu ul li a img { transition: .3s; }
#p-menu ul li a:hover img { opacity: .8; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#panorama { height: 50vh; }
	.p-select { padding: .5em 0 2em 0; }
	.p-select ul { justify-content: flex-start; }
	.p-select ul li { width: calc(92% / 5); margin-right: 2%; overflow: hidden; }
	.p-select ul li:nth-child(7n) { margin-right: 2%; }
	.p-select ul li:nth-child(5n) { margin-right: 0; }
	#panorama-column h1 { font-size: 150%; line-height: 1.2; padding-bottom: .3em; }
	#panorama-column p { line-height: 1.6; }
	#p-menu ul li { width: 49%; }
	#p-menu ul li.active { display: none; }
}