* {
  margin: 0;
  padding: 0;
  transition: 0.5s;
}

body {
  background-color: #ffd7e0;
}

.page {
  min-width: 1920px;
  background-size: cover;
  background-position: center top;
  max-width: 2560px;
  margin: 0 auto;
  height: 1440px;
}

section {
  position: relative;
  background-position: center;
  max-width: 2560px;
  min-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

#slide {
  width: 175px;
  height: 400px;
  position: fixed;
  right: 30px;
  z-index: 3;
  top: 40%;
}

#slide .a {
  width: 250px;
  height: 250px;
  position: absolute;
  z-index: 1;
  left: -28px;
  background-repeat: no-repeat;
  top: 0;
}

#slide .m {
  display: block;
  width: 175px;
  height: 253px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 119px;
  transition: transform 0.5s ease-in-out;
}

#slide .m:hover {
  filter: brightness(1.1);
  transform: rotateY(360deg);
}

#slide .bt {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/TOP.png);
  width: 63px;
  height: 63px;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  cursor: pointer;
}

#slide .bt:hover {
  transform: scale(1.1);
}

#slide .a1 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/slide-a-1.png);
}

#slide .m1 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/slide-m-2.png);
}

#slide .a2 {
  top: -30px;
  left: -12px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/slide-a-2.png);
}

#slide .m2 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/slide-m-1.png);
}

.btn {
  position: absolute;
  width: 214px;
  height: 76px;
  bottom: 323px;
  margin: auto;
  cursor: pointer;
  right: 0;
}

.btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn.btn1 {
  left: -516px;
}

.btn.btn2 {
  left: 0;
}

.btn.btn3 {
  left: 516px;
}

.gif {
  position: absolute;
  top: 30px;
  right: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.gif.gif1 {
  width: 352px;
  height: 222px;
  top: 779px;
  left: -503px;
  border-radius: 10px;
  right: 0;
  margin: auto;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif1.gif);
}

.gif.gif2 {
  width: 430px;
  height: 276px;
  top: 2582px;
  left: -505px;
  right: 0;
  margin: auto;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif2.gif);
  border-radius: 18px;
}

.gif.gif3 {
  width: 165px;
  height: 276px;
  top: 2582px;
  right: -505px;
  left: 0;
  margin: auto;
  border-radius: 10px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif3.gif);
}

.gif.gif4 {
  width: 172px;
  height: 51px;
  top: 4169px;
  left: -668px;
  right: 0;
  margin: auto;
  border-radius: 10px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif4.gif);
}

.gif.gif5 {
  width: 172px;
  height: 51px;
  top: 4169px;
  left: -0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif5.gif);
}

.gif.gif6 {
  width: 172px;
  height: 51px;
  top: 4169px;
  left: 0;
  right: -684px;
  margin: auto;
  border-radius: 10px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/gif6.gif);
}

#back {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 65px;
  height: 60px;
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/backhome.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
}

#page1 section#s1 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page1-1.jpg);
  height: 1769px;
}

#page1 section#s2 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page1-2.jpg);
  height: 1080px;
}

#page1 section#s3 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page1-3.jpg);
  height: 3122px;
}

#page1 section#s3 .link1 {
  position: absolute;
  width: 197px;
  height: 76px;
  bottom: 355px;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  display: block;
  border-radius: 50px;
}

#page1 section#s3 .link1:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

#page1 section#s4 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page1-4.jpg);
  height: 5190px;
}

#page2 section#s1 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page2-1.jpg);
  height: 1621px;
}

#page2 section#s2 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page2-2.jpg);
  height: 3286px;
}

#page2 section#s3 {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/page2-3.jpg);
  height: 3793px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-dialog {
  background-position: center;
  position: relative;
  display: none;
}

.modal-content {
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.modal-content.dialog1-bg {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/dialog1.png);
  width: 1500px;
  height: 100vh;
  background-size: contain;
}

.modal-content.dialog1-bg .modal-close {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/close1.png);
}

.modal-content.dialog2-bg {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/dialog2.png);
  width: 1500px;
  height: 100vh;
  background-size: contain;
}

.modal-content.dialog2-bg .modal-close {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/close2.png);
}

.modal-content.dialog3-bg {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/dialog3.png);
  width: 1500px;
  height: 100vh;
  background-size: contain;
  background-position: center;
}

.modal-content.dialog3-bg .modal-close {
  background-image: url(https://static.web.sdo.com/chd/pic/chdXsakura/close3.png);
}

.modal-close {
  background-color: rgba(255, 255, 255, 0);
  position: fixed;
  top: 30px;
  right: 30px;
  border: none;
  width: 69px;
  height: 63px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  transform: scale(1.1);
}

.btn {
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.05);
}