/* CSS Document */ @media (min-width:1001px){ #mv { background: url(../images/mv.jpg) center center no-repeat; background-size: cover; } #lead { margin-bottom: 80px; } #lead h2.ch2 { background:url(../images/ttl.svg) top center no-repeat; } #map p { text-align: center; margin-bottom: 40px; } #map iframe { border-radius: 10px; } #map .cbtn { margin: 40px auto 85px; } #sightseeing { margin-bottom: 45px; } #sightseeing h3.ch3 { background: url(../images/ttl_ss.svg) center top no-repeat; height: 30px; } #sightseeing ul.cflex { flex-wrap: wrap; justify-content: space-between; } #sightseeing ul.cflex>li { width: 326px; margin-bottom: 75px; } #sightseeing ul.cflex>li .img { width: 326px; height: 250px; margin-bottom: 35px; } #sightseeing ul.cflex>li .img img { width: 100%; border-radius: 10px; } #sightseeing ul.cflex>li h4 { width: 100%; height: 30px; text-indent: -10000px; overflow: hidden; margin-bottom: 20px; } #sightseeing ul.cflex>li:first-child h4 { background: url(../images/ttl01.svg) left top no-repeat; } #sightseeing ul.cflex>li:nth-child(2) h4 { background: url(../images/ttl02.svg) left top no-repeat; } #sightseeing ul.cflex>li:nth-child(3) h4 { background: url(../images/ttl03.svg) left top no-repeat; } #sightseeing ul.cflex>li:nth-child(4) h4 { background: url(../images/ttl04.svg) left top no-repeat; } #sightseeing ul.cflex>li:nth-child(5) h4 { background: url(../images/ttl05.svg) left top no-repeat; } #sightseeing ul.cflex>li:nth-child(6) h4 { background: url(../images/ttl06.svg) left top no-repeat; height: 54px; } #sightseeing ul.cflex>li p { font-size: 15px; line-height: 24px; margin-bottom: 15px; height: 165px; } #sightseeing ul.cflex>li:nth-child(4) p,#sightseeing ul.cflex>li:nth-child(5) p { height: 120px; } #sightseeing ul.cflex>li:nth-child(6) p { height: 94px; } #sightseeing ul.cflex>li p.accesstime { color: #005F32; font-size: 16px; margin-bottom: 25px; height: auto; } #sightseeing ul.cflex>li ul { justify-content: space-between; display: flex; } #sightseeing .cbtn,#sightseeing .cbtn2 { width: 160px; height: 40px; line-height: 40px; } /*shops*/ #shops { padding: 90px 0 100px; margin-bottom: 165px; position: relative; } #shops:before { content: ""; width: 250px; height: 226px; position: absolute; top:-90px; background:url(../../images/index/matsu_left.svg) right center no-repeat; left: 0; } #shops:after { content: ""; width: 250px; height: 226px; position: absolute; bottom: 175px; background:url(../../images/index/matsu_right.svg) right center no-repeat; right: 0; } #shops .ch3 { background: url(../images/ttl_shop.svg) center top no-repeat; height: 30px; } #shops ul.cflex { flex-wrap: wrap; justify-content: space-between; } #shops ul.cflex>li { width: 525px; margin-bottom: 60px; background: #ffffff; border-radius: 10px; padding: 40px; } #shops ul.cflex>li h4 { width: 100%; height: 30px; text-indent: -10000px; overflow: hidden; margin-bottom: 20px; } #shops ul.cflex>li:first-child h4 { background: url(../images/ttl_shop01.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(2) h4 { background: url(../images/ttl_shop02.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(3) h4 { background: url(../images/ttl_shop03.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(4) h4 { background: url(../images/ttl_shop04.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(5) h4 { background: url(../images/ttl_shop05.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(6) h4 { background: url(../images/ttl_shop06.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(7) h4 { background: url(../images/ttl_shop07.svg) left top no-repeat; } #shops ul.cflex>li:nth-child(8) h4 { background: url(../images/ttl_shop08.svg) left top no-repeat; } #shops ul.cflex>li p { font-size: 15px; line-height: 24px; margin-bottom: 15px; } #shops ul.cflex>li p.accesstime { color: #005F32; font-size: 16px; margin-bottom: 25px; height: auto; } #shops ul.cflex>li ul { display: flex; } #shops ul.cflex>li ul li { margin-right: 5px; } #shops .cbtn,#shops .cbtn2 { width: 160px; height: 40px; line-height: 40px; } }/* End @media(min-width751px) */ /* ---------------------------------------------------------------------------------------------------- */ @media (min-width: 1001px) and (max-width:1245px){ }/* End @media (min-width: 751px) and (max-width:1100px) */ /* ---------------------------------------------------------------------------------------------------- */ @media (max-width:1000px){ #mv { background: url(../images/mv.jpg) center center no-repeat; background-size: cover; } #lead h2.ch2 { background:url(../images/ttl.svg) top center no-repeat; background-size: auto 12vw; } #lead:before { top:3vw; } #map p { text-align: center; margin-bottom: 6vw; } #map iframe { border-radius: 10px; width: 100%; height: 60vw; } #map .cbtn { margin: 6vw auto 12vw; } #sightseeing { margin-bottom: 16vw; } #sightseeing h3.ch3 { background: url(../images/ttl_ss.svg) center top no-repeat; height: 6vw; background-size: contain; margin-bottom: 8vw; } #sightseeing ul.cflex { } #sightseeing ul.cflex>li { width: 100%; margin-bottom: 10vw; } #sightseeing ul.cflex>li .img { width: 100%; height: 62vw; overflow: hidden; border-radius: 10px; margin-bottom: 4vw; } #sightseeing ul.cflex>li .img img { width: 100%; border-radius: 10px; } #sightseeing ul.cflex>li h4 { width: 100%; height: 5vw; text-indent: -10000px; overflow: hidden; margin-bottom: 4vw; } #sightseeing ul.cflex>li:first-child h4 { background: url(../images/ttl01.svg) left top no-repeat; background-size: contain; } #sightseeing ul.cflex>li:nth-child(2) h4 { background: url(../images/ttl02.svg) left top no-repeat; background-size: contain; } #sightseeing ul.cflex>li:nth-child(3) h4 { background: url(../images/ttl03.svg) left top no-repeat;background-size: contain; } #sightseeing ul.cflex>li:nth-child(4) h4 { background: url(../images/ttl04.svg) left top no-repeat;background-size: contain; } #sightseeing ul.cflex>li:nth-child(5) h4 { background: url(../images/ttl05.svg) left top no-repeat;background-size: contain; } #sightseeing ul.cflex>li:nth-child(6) h4 { background: url(../images/ttl06.svg) left top no-repeat;background-size: contain; height: 8vw; } #sightseeing ul.cflex>li p { font-size: 3.8vw; line-height: 6vw; margin-bottom: 2vw; } #sightseeing ul.cflex>li p.accesstime { color: #005F32; font-size: 4vw; margin-bottom: 4vw; height: auto; } #sightseeing ul.cflex>li ul { justify-content: space-between; display: flex; } #sightseeing ul.cflex>li ul li { width: 48%; } #sightseeing ul.cflex>li ul li .cbtn,#sightseeing ul.cflex>li ul li .cbtn2 { width: 100%; height: 8vw; line-height: 8vw; background-position: right 2vw center; } /*shops*/ #shops { padding: 14vw 0 24vw; margin-bottom: 32vw; position: relative; } #shops:before { content: ""; width: 54vw; height: 30vw; position: absolute; top:-10vw; background:url(../../images/index/matsu_left.svg) left center no-repeat; left: -3vw; background-size: contain; } #shops:after { content: ""; width: 54vw; height: 30vw; position: absolute; bottom: 2vw; background:url(../../images/index/matsu_right.svg) right center no-repeat; right: -3vw; background-size: contain; } #shops .ch3 { background: url(../images/ttl_shop.svg) center top no-repeat; height: 30px; } #shops ul.cflex { } #shops ul.cflex>li { width: 100%; margin-bottom: 6vw; background: #ffffff; border-radius: 10px; padding: 6vw; } #shops ul.cflex>li h4 { width: 100%; height: 5vw; text-indent: -10000px; overflow: hidden; margin-bottom: 4vw; } #shops ul.cflex>li:first-child h4 { background: url(../images/ttl_shop01.svg) left top no-repeat; background-size: contain; } #shops ul.cflex>li:nth-child(2) h4 { background: url(../images/ttl_shop02.svg) left top no-repeat; background-size: contain; } #shops ul.cflex>li:nth-child(3) h4 { background: url(../images/ttl_shop03.svg) left top no-repeat;background-size: contain; } #shops ul.cflex>li:nth-child(4) h4 { background: url(../images/ttl_shop04.svg) left top no-repeat;background-size: contain; } #shops ul.cflex>li:nth-child(5) h4 { background: url(../images/ttl_shop05.svg) left top no-repeat;background-size: contain; } #shops ul.cflex>li:nth-child(6) h4 { background: url(../images/ttl_shop06.svg) left top no-repeat;background-size: contain; } #shops ul.cflex>li:nth-child(7) h4 { background: url(../images/ttl_shop07.svg) left top no-repeat; background-size: contain; } #shops ul.cflex>li:nth-child(8) h4 { background: url(../images/ttl_shop08.svg) left top no-repeat; background-size: contain; } #shops ul.cflex>li p { font-size: 3.8vw; line-height: 6vw; margin-bottom: 2vw; } #shops ul.cflex>li p.accesstime { color: #005F32; font-size: 4vw; margin-bottom: 4vw; height: auto; } #shops ul.cflex>li ul { justify-content: space-between; display: flex; } #shops ul.cflex>li ul li { width: 48%; } #shops ul.cflex>li ul li .cbtn,#shops ul.cflex>li ul li .cbtn2 { width: 100%; height: 8vw; line-height: 8vw; background-position: right 2vw center; font-size: 3.4vw; } }/* End @media (max-width: 750px) */ /* ----------------------------------------------------------------------------------------------------