body{ background-color: #69b9a2; } button{ font-size:20px; margin-right:72px; border-radius:50%; width:40%; height:10%; padding:3%; } .leaflet-popup-content-wrapper{ width:35rem; } .leaflet-popup-content{ width:92% !important; margin: 1rem auto; } img{ width:100%; } .stamp{ width:20%; } footer{ width: 100%; background-color:#2e1200; display: flex; flex-direction: column; padding-bottom: 10px; margin-top: 20px; } p.copy{ color: white; font-size: 0.8em; font-family: none; text-align: center; } h1.tate{ color: white; font-family: serif; font-size: 250%; writing-mode: vertical-rl; padding-left: 80%; margin-top: 20px; position: relative; font-weight: bold; text-shadow: -1px -1px 0 black, -1px 0 0 black, -1px 1px 0 black, 0 -1px 0 black, 0 1px 0 black, 1px -1px 0 black, 1px 0 0 black, 1px 1px 0 black; } p.tate{ color: white; font-family: serif; font-size:150%; writing-mode: vertical-rl; position:relative; margin-left: 20px; font-weight: bold; text-shadow: -1px -1px 0 black, -1px 0 0 black, -1px 1px 0 black, 0 -1px 0 black, 0 1px 0 black, 1px -1px 0 black, 1px 0 0 black, 1px 1px 0 black; } span{ font-size: 150%; } .slide { position: absolute; width: 99%; height: 755px; overflow: hidden; } .slide-image { background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 99.6%; height: 99.6%; opacity: 0; animation: slider-1 12s linear infinite; } .slide-image:nth-child(1) { background-image: url(image/kitamae.jpg); animation-delay: 0s; } .slide-image:nth-child(2) { background-image: url(image/sankyo_yoko.jpg); animation-delay: 6s; } @keyframes slider-1 { 0% { opacity: 0; transform: scale(1); } 8.33% { opacity: 1; } 41.66% { opacity: 1; } 66.66% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } } @media screen and (max-width:767px){ .slide{ width: 96%; height: 755px; } .leaflet-popup-content-wrapper { width: 25rem } .stamp{ width:40%; } h1 { font-size: 1.4rem; } .leaflet-popup-content p { font-size: 1.0rem; margin: 0.5rem; } button{ font-size:20px; margin-right:10px; margin-left:20px; border-radius:50%; width:40%; height:10%; padding:5%; } h1.tate{ padding-left: 65%; } p.tate{ font-family: serif; font-size:150%; writing-mode: vertical-rl; } #g_navi { background: #2e1200; } #g_navi ul { overflow: hidden; margin: 0 auto; padding: 0 2%; width: 98%; max-width: 960px; list-style-type: none; } #g_navi ul li { position: relative; float: left; width: 30%; } #g_navi ul li:first-child::before { position: absolute; display: block; content: ""; top: 25%; left: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li::after { position: absolute; display: block; content: ""; top: 25%; right: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li a { display: block; padding: 17px 10px; color: #fff; text-align: center; text-decoration: none; } #g_navi ul li a:hover { background-color: #472108; } .slide-image:nth-child(1) { background-image: url(image/kitamae_tate.jpg); animation-delay: 0s; } .slide-image:nth-child(2) { background-image: url(image/sankyo.jpg); animation-delay: 6s; } } @media screen and (min-width:768px) and (max-width:1000px) { .slide{ width:98%; } #g_navi { background: #2e1200; } #g_navi ul { overflow: hidden; margin: 0 auto; width: 100%; max-width: 960px; list-style-type: none; } #g_navi ul li { position: relative; float: left; width: 30%; } #g_navi ul li:first-child::before { position: absolute; display: block; content: ""; top: 25%; left: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li::after { position: absolute; display: block; content: ""; top: 25%; right: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li a { display: block; padding: 17px 10px; color: #fff; text-align: center; text-decoration: none; } #g_navi ul li a:hover { background-color: #472108; } .slide-image:nth-child(1) { background-image: url(image/kitamae_tate.jpg); animation-delay: 0s; } .slide-image:nth-child(2) { background-image: url(image/sankyo.jpg); animation-delay: 6s; } } @media screen and (min-width:1001px) { #g_navi { background: #2e1200; } #g_navi ul { overflow: hidden; margin: 0 auto; width: 100%; max-width: 960px; list-style-type: none; } #g_navi ul li { position: relative; float: left; width: 30%; } #g_navi ul li:first-child::before { position: absolute; display: block; content: ""; top: 25%; left: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li::after { position: absolute; display: block; content: ""; top: 25%; right: 0px; width: 1px; height: 50%; background-color: #976d52; } #g_navi ul li a { display: block; padding: 17px 10px; color: #fff; text-align: center; text-decoration: none; } #g_navi ul li a:hover { background-color: #472108; } .slide-image:nth-child(1) { background-image: url(image/kitamae.jpg); animation-delay: 0s; } .slide-image:nth-child(2) { background-image: url(image/sankyo_yoko.jpg); animation-delay: 6s; } }