@charset "UTF-8";
body {
  background-image: url(./img/pattern.png);
  background-repeat: repeat-y;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif !important;
  margin: 0px;
}
@media screen and (min-width: 737px) {
  body .timelag img {
    /* レイアウトは貼り付けた要素に合わせて調整してください。*/
    padding: initial;
    opacity: 0;
    transform: translateY(10%);
  }
  body .timelag .txt_box {
    padding: initial;
    opacity: 0;
    transform: translateY(10%);
  }
}
@media screen and (max-width: 736px) {
  body .elm2 {
    padding: initial;
    opacity: 0;
    transform: translateY(50%);
  }
}
body .huwa {
  animation: huwa 1.5s ease-out forwards;
}
@keyframes huwa {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: initial;
    opacity: 1;
  }
}
body .huwa2 {
  animation: huwa2 1.5s ease-out forwards;
}
@keyframes huwa2 {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: initial;
    opacity: 1;
  }
}

.foto {
  margin: 80px;
  padding: 20px;
}
@media screen and (max-width: 737px) {
  .foto {
    font-size: 14px;
    margin: 30px;
    padding: 10px;
  }
}
.foto .insta_list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 50px 50px;
}
@media screen and (max-width: 737px) {
  .foto .insta_list {
    margin: 30px;
  }
}
.foto .insta_list li {
  position: relative;
  width: calc((100% - 40px) / 3);
}
@media screen and (max-width: 750px) {
  .foto .insta_list li {
    width: calc((100% - 20px) / 2);
  }
}
.foto .insta_list li::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.foto .insta_list li a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.foto .insta_list img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  float: left;
  padding: 10px 10px 20px;
  background-color: white;
  box-shadow: 0 4px 10px #333;
  transform: rotate(3deg);
}
.foto .panel {
  text-align: center;
}
.foto .view_more {
  color: #454545;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #454545;
  position: relative;
  margin: 1em;
  padding: 0.5vw;
  transition: all 0.3s ease-in-out;
  text-align: center;
  font-family: comfortaa;
  font-weight: bold;
  font-size: 2em;
}

@media screen and (min-width: 737px) {
  .topslide .slider {
    display: none;
  }
}
@media screen and (max-width: 737px) {
  .topslide .sliderr {
    display: none;
  }
}
.topslide .box6 {
  position: absolute;
  color: #fff;
}
@media screen and (max-width: 737px) {
  .topslide .box6 {
    width: 60vw;
    height: auto;
    top: 20vw;
    left: 50%;
    transform: translate(-50%, 43%);
  }
}
@media screen and (min-width: 737px) {
  .topslide .box6 {
    width: 38vw;
    height: auto;
    top: 20vw;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
}
.topslide .box7 {
  position: absolute;
  color: #fff;
  height: auto;
}
@media screen and (max-width: 737px) {
  .topslide .box7 {
    width: 65vw;
    left: 50%;
    transform: translate(-24%, -255%);
  }
}
@media screen and (min-width: 737px) {
  .topslide .box7 {
    width: 31vw;
    left: 50%;
    transform: translate(59%, -185%);
  }
}
.topslide img {
  position: relative;
  margin: none;
}
@media screen and (min-width: 737px) {
  .topslide img {
    display: block;
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: 133px;
  }
}
@media screen and (max-width: 736px) {
  .topslide img {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: 65px;
  }
}

.topcard .txt_box {
  box-sizing: border-box;
  display: block;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.1);
  transition: 0.2s linear;
  transition-property: box-shadow;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 736px) {
  .topcard .txt_box {
    width: 100%;
    padding: 5px;
  }
}
.topcard .txt_box .title {
  border-bottom: solid 3px #bd271b;
  position: relative;
}
.topcard .txt_box .title:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #010a48;
  width: 20%;
}
@media screen and (max-width: 736px) {
  .topcard .txt_box .title:after {
    transform: translateX(-7%);
    bottom: -0.3rem;
  }
}
.topcard .txt_box .title {
  margin-bottom: 15px;
  font-family: "Koburina Gothic W6 JIS2004", "Hiragino Kaku Gothic ProN", "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  font-size: 24px;
}
@media screen and (min-width: 737px), print {
  .topcard .txt_box .title {
    font-size: 24px;
  }
}
@media screen and (max-width: 736px) {
  .topcard .txt_box .title {
    padding: 1vw;
    font-size: 4vw;
    line-height: 1.5;
  }
}
.topcard .txt_box .txt {
  font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.6;
}
@media screen and (min-width: 737px), print {
  .topcard .txt_box .txt {
    font-size: 16px;
  }
}
@media screen and (max-width: 736px) {
  .topcard .txt_box .txt {
    font-size: 14px;
    padding: 1vw;
  }
}
.topcard .txt_box .panel {
  text-align: center;
}
.topcard .txt_box .view_more {
  color: #454545;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #454545;
  position: relative;
  margin: 1em;
  padding: 0.5vw;
  transition: all 0.3s ease-in-out;
  text-align: center;
  font-family: comfortaa;
  font-weight: bold;
  font-size: 2em;
}
@media screen and (max-width: 736px) {
  .topcard img {
    display: inline-block;
    width: 100vw;
    height: auto;
    box-shadow: 0px -5px 50px 10px rgba(0, 0, 0, 0.2);
  }
}
@media screen and (max-width: 1780px) {
  .topcard #story {
    padding: 5vw 0 5vw 0;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story {
    padding: 5vw 30px 15vw 30px;
  }
}
.topcard #story .story_01 {
  /*スクロールバー :新着情報のスクロールバー*/
}
@media screen and (min-width: 737px), print {
  .topcard #story .story_01 {
    position: relative;
  }
}
.topcard #story .story_01 img {
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 737px), print {
  .topcard #story .story_01 img {
    display: block;
    width: 60vw;
    height: auto;
    margin-left: 10vw;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story .story_01 img {
    display: inline-block;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story .story_01 .txt_box {
    position: absolute;
    top: 20vw;
    right: 10vw;
    width: 460px;
    padding: 25px 36px 40px 31px;
  }
}
@media screen and (min-width: 737px) {
  .topcard #story .story_01 .txt_box p {
    font-size: 14px;
  }
}
.topcard #story .story_01 .scroll {
  height: 13vw;
  overflow-x: hidden;
  overflow-y: scroll;
  border-radius: 3px 3px 3px 3px;
  /* スクロールの幅の設定 */
  /* スクロールの背景の設定 */
  /* スクロールのつまみ部分の設定 */
}
@media screen and (max-width: 736px) {
  .topcard #story .story_01 .scroll {
    width: 100%;
    height: 30vw;
    padding: 5px;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story .story_01 .scroll p {
    font-size: 14px;
  }
}
.topcard #story .story_01 .scroll span {
  border-bottom: 2.5px dotted #000000;
}
.topcard #story .story_01 .scroll ::-webkit-scrollbar {
  width: 1px;
  height: 5vw;
}
.topcard #story .story_01 .scroll ::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}
.topcard #story .story_01 .scroll ::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #000000;
}
@media screen and (max-width: 1780px) {
  .topcard #story2 {
    padding: 8vw 0 8vw 0;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story2 {
    padding: 5vw 30px 15vw 30px;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story2 {
    position: relative;
  }
}
.topcard #story2 img {
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 737px), print {
  .topcard #story2 img {
    display: block;
    width: 60vw;
    height: auto;
    margin-left: 30vw;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story2 img {
    display: inline-block;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story2 .txt_box {
    position: absolute;
    top: 26vw;
    left: 10vw;
    width: 460px;
    padding: 25px 25px 0px 25px;
  }
}
@media screen and (max-width: 1780px) {
  .topcard #story3 {
    padding: 8vw 0 8vw 0;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story3 {
    padding: 5vw 30px 15vw 30px;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story3 .story_03 {
    position: relative;
  }
}
.topcard #story3 .story_03 img {
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 737px), print {
  .topcard #story3 .story_03 img {
    display: block;
    width: 60vw;
    height: auto;
    margin-left: 10vw;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story3 .story_03 img {
    display: inline-block;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story3 .story_03 .txt_box {
    position: absolute;
    top: 17vw;
    right: 10vw;
    width: 460px;
    padding: 25px 25px 0px 25px;
  }
}
@media screen and (max-width: 1780px) {
  .topcard #story4 {
    padding: 8vw 0 8vw 0;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story4 {
    padding: 5vw 30px 15vw 30px;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story4 {
    position: relative;
  }
}
.topcard #story4 img {
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 737px), print {
  .topcard #story4 img {
    display: block;
    width: 60vw;
    height: auto;
    margin-left: 30vw;
  }
}
@media screen and (max-width: 736px) {
  .topcard #story4 img {
    display: inline-block;
  }
}
@media screen and (min-width: 737px), print {
  .topcard #story4 .txt_box {
    position: absolute;
    top: 26vw;
    left: 10vw;
    width: 460px;
    padding: 25px 25px 0px 25px;
  }
}/*# sourceMappingURL=style.css.map */