@charset "utf-8";












body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 300;
    font-style: normal;
}



.header__inner {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: inherit;
    position: relative;

}


.header__title {
    width: 80px;
}


.header__title img {
    display: block;
    width: 50%;
    height: 50%;
}

h1 {
    margin: 0px;
    padding: 10px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #fff;
  }
  
  .logo {
    font-size: 24px;
    margin-top: 10px;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  section {
    scroll-margin-top: 100px;
    margin-bottom: 50px;
  }





  
  
  /* 遷移先の要素に指定する */
  section {
    scroll-margin-top: 100px;
  }


  /*------------------------------
  
    ここから下がハンバーガーメニュー
    に関するCSS
  
  ------------------------------*/
    
  /* チェックボックスは非表示に */
  .drawer-hidden {
    display: none;
  }
  
  /* ハンバーガーアイコンの設置スペース */
  .drawer-open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
  }
  
  /* ハンバーガーメニューのアイコン */
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #333;
    transition: 0.5s;
    position: absolute;
  }
  
  /* 三本線のうち一番上の棒の位置調整 */
  .drawer-open span:before {
    bottom: 8px;
  }
  
  /* 三本線のうち一番下の棒の位置調整 */
  .drawer-open span:after {
    top: 8px;
  }
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~ .drawer-open span {
    background: rgba(255, 255, 255, 0);
  }
  
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  
  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
  }
    
  /* メニューのデザイン*/
  .drawer-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/* メニューを画面の外に飛ばす */
    z-index: 99;
    background: #fff;
    transition: .5s;
  }
  
  .drawer-item1 {
    position: absolute;
    top: 100px;
    text-align: center;
    margin-left: 30px;
  }

  .drawer-item2 {
    position: absolute;
    top: 130px;
    text-align: center;
    margin-left: 30px;
  }

  .drawer-item3 {
    position: absolute;
    top: 160px;
    text-align: center;
    margin-left: 30px;
  }

  .drawer-item4 {
    position: absolute;
    top: 190px;
    text-align: center;
    margin-left: 30px;
  }

  .drawer-item5 {
    position: absolute;
    top: 220px;
    text-align: center;
    margin-left: 30px;
  }




  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~ .drawer-content {
    left: 0;/* メニューを画面に入れる */
  }















#mainvisual {
    margin: 0px;
    background-image: url(topimage.png);
    background-size: cover;
    top: 0px;
}



#haikei2 {
    margin-top: -7px;
    background-image: url(haikei2.png);
    background-size: 2620px;
    top: 0px;
}

.tekisuto1 {
    position: absolute;
    text-align: center;
    font-size: 15px;
    top: 965px;
    line-height: 25px;
    margin-left: 93px;
}



.zennsyu {
    position: absolute;
    width: 100%;
    top: 1000px;
    margin-left: 1px;
}




.tekisuto0 {
    position: absolute;
    text-align: center;
    font-size: 18px;
    top: 1670px;
    line-height: 25px;
    margin-left: 65px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.tekisuto2 {
    position: absolute;
    text-align: center;
    font-size: 13px;
    top: 1770px;
    line-height: 25px;
    margin-left: 60px;
}



.tyamisuru {
    position: absolute;
    top: 1845px;
}


.tekisuto4 {
    position: absolute;
    text-align: center;
    font-size: 18px;
    top: 2530px;
    line-height: 25px;
    margin-left: 80px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
}



.tekisuto5 {
    position: absolute;
    text-align: center;
    font-size: 13px;
    top: 2640px;
    line-height: 25px;
    margin-left: 43px;
}


.rainnnappu {
    position: absolute;
    text-align: center;
    font-size: 15px;
    top: 3100px;
    margin-left: 134px;
}


#no-maru {
    background-size: 309px;
    position: absolute;
    text-align: center;
    margin: 30px;
    margin-left: 39px;
    top: 3200px;
}

.no-maru2 {
    position: absolute;
    text-align: left;
    font-size: 18px;
    top: 20px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #2F95DF;
}

.no-maru1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 80px;
    left: 100px;
}





#masukkato {
    background-size: 309px;
    position: absolute;
    margin: 30px;
    margin-left: 39px;
    top: 3650px;
}

.masukkato2 {
    position: absolute;
    text-align: left;
    font-size: 18px;
    top: 20px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #49BA3A;
}

.masukkato1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 70px;
    left: 100px;
}





#gure-puhuru-tu {
    background-size: 309px;
    position: absolute;
    margin: 30px;
    margin-left: 39px;
    top: 4100px;
}

.gure-puhuru-tu2 {
    position: absolute;
    text-align: left;
    font-size: 18px;
    top: -10px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #FE4243;
}

.gure-puhuru-tu1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 70px;
    left: 100px;
}

h2{
    text-align: left;
}


#sumomo {
    background-size: 309px;
    position: absolute;
    margin: 30px;
    margin-left: 39px;
    top: 4550px;
}

.sumomo2 {
    position: absolute;
    text-align: left;
    font-size: 18px;
    top: 20px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #ED2F33;
}

.sumomo1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 70px;
    left: 100px;
}




#itigo {
    background-size: 309px;
    position: absolute;
    margin: 30px;
    margin-left: 39px;
    top: 5000px;
}

.itigo2 {
   position: absolute;
    text-align: left;
    font-size: 18px;
    top: 0px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #F53D75;
}

.itigo1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 80px;
    left: 100px;
}




#pi-ti {
    background-size: 309px;
    position: absolute;
    margin: 30px;
    margin-left: 39px;
    top: 5450px;
}

.pi-ti2 {
    position: absolute;
    text-align: left;
    font-size: 18px;
    top: 20px;
    left: 108px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #FF3869;
}

.pi-ti1 {
    position: absolute;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    margin: 10px;
    top: 75px;
    left: 100px;
}









#haikei3 {
    background-size: 2911px;
    position: absolute;
    top: 6000px;
}





#tyan {
    position: absolute;
    margin: 20px;
    top: 6100px;
}

.tyan2 {
    position: relative;
    text-align: center;
    font-size: 13px;
    top: 70px;
    line-height: 25px;
}




.pittari {
    position: absolute;
    text-align: center;
    font-size: 15px;
    top: 6480px;
    margin-left: 128px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #A71414;
}


.yannnyomu {
    position: absolute;
    background-size: 527px;
    margin: 10px;
    top: 6530px;
    margin-left: 10px;
}






/* .model-wrapper {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}

.model-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.model-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
}

.model-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
}

.model-wrapper .model-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 10;
    position: relative;
    width: 90%;

    padding: 0;
    border-radius: 0px;

    box-shadow: 0 0 30px rgba(0, 0, 0, 6);
    vertical-align: middle;
}

.model-wrapper .modelwindow .model-content {
    max-height: 40vh;
    overflow-y: auto;
}

.model-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 8);
}

.model-wrapper .model-close {
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    color: #95979c!important;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
}

.mofdel-wrapper .model-close:hover {
    color: #2b2e38!important;
} */










.sutore-to {
    position: absolute;
    text-align: center;
    font-size: 15px;
    top: 7180px;
    margin-left: 94px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #A71414;
}


#sawa {
    position: absolute;
    background-size: 233px;
    margin: 10px;
    top: 7230px;
    margin-left: 10px;
}



#hokanotanosimikata {
    position: absolute;
    margin-left: 110px;
    top: 7750px;
}







.movie {
    position: absolute;
    text-align: center;
    font-size: 15px;
    top: 8000px;
    margin-left: 122px;
}

.douga1 {
    position: absolute;
    top: 8100px;
    width: 100%;
    aspect-ratio: 16/9;
}


.dougasetumei1 {
    position: absolute;
    text-align: center;
    font-size: 14px;
    top: 8320px;
    margin-left: 112px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #A71414;
}


.douga2 {
    position: absolute;
    top: 8420px;
    width: 100%;
    aspect-ratio: 16/9;
}


.dougasetumei2 {
    position: absolute;
    text-align: center;
    font-size: 14px;
    top: 8660px;
    margin-left: 112px;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #A71414;
}










#haikei4 {
    background-size: 407px;
    position: absolute;
    top: 8910px;
}

.x {
    position: absolute;
    top: 8990px;
    margin-left: 105px;
}

.instagram {
    position: absolute;
    top: 8986px;
    margin-left: 146px;
}

.tiktok {
    position: absolute;
    top: 8991px;
    margin-left: 195px;
}

.youtube {
    position: absolute;
    top: 8986px;
    margin-left: 235px;
}



.ho-mu {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9070px;
    left: 40px;
    line-height: 35px;
}

.situmonn {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9100px;
    left: 40px;
    line-height: 35px;
}

.gaiyou {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9130px;
    left: 40px;
    line-height: 35px;
}

.csr {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9160px;
    left: 40px;
    line-height: 35px;
}

.porisi- {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9190px;
    left: 40px;
    line-height: 35px;
}

.kiyaku {
    position: absolute;
    text-align: left;
    font-size: 14px;
    top: 9220px;
    left: 40px;
    line-height: 35px;
}


a {
    color: #434343;
}


footer {
    position: absolute;
    text-align: center;
    padding: 10px;
    /* padding-left: 107px;
    padding-right: 107px; */
    font-size: 10px;
    background-color: #F5F5F5;
    color: #000;
    top: 9300px;
}




html {
    scroll-behavior: smooth;
}
      
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    /* border: solid 2px #000; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #8F8F8F;
    border-right: 3px solid #8F8F8F;
    transform: translateY(20%) rotate(-45deg);
}
    





.loading {
    position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      visibility: hidden;
    }
}

.loading__logo {
    opacity: 0;
    animation: logo_fade 2s 0.5s forwards;
    width: 175px;
}

@keyframes logo_fade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
  
    60% {
      opacity: 1;
      transform: translateY(0);
    }
  
    100% {
      opacity: 0;
    }
  }