body{margin:0; overflow-x: hidden;}
a{text-decoration: none;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb {background: orange; border-radius: 5px;}

/**loading function*/
@keyframes infinity-scroll-left{
    from{transform:translateX(0);}
    to{transform: translateX(-100%);}}

.loading {position: fixed; justify-content: center; align-items: center; z-index: 1000; width: 100%; height: 100vh; display: flex; top:0; left:0;background: #fdfdfd;}
    .loading.hide {opacity: 0; pointer-events: none; transition: opacity 5s;}
    .loading img {display: block; width: 100px; height: 100px;  animation-name: fadeUpAnime; animation-duration:2s;
      animation-fill-mode:forwards; opacity: 0;}
      
      @keyframes fadeUpAnime{
        from {opacity: 0; transform: translateY(100px);}
        to {opacity: 1; transform: translateY(0);}}

    @keyframes loading {
      0% { transform: rotate( 0deg ); }
      100% { transform: rotate( 360deg ); }}

/**osaka-tour ad**/
 #osaka-tour{position:fixed; width:100%; height:100vh; z-index:250; background: rgba(0,0,0,.6); align-items: center; justify-content: center; transition: 1s;}
 #osaka-tour a iframe{position:fixed; width:80%; height:90%; top:5vh; left:10%; cursor:pointer;}
 #osaka-tour .close{cursor:pointer; position:absolute; top:25px; right:25px;}
 #osaka-tour .close svg{transform:rotate(45deg);}

 /**header*/
  header{margin: 0px; position:fixed; width:100%; height:100px; top:0; left:0; z-index: 30;
    display:flex; justify-content: space-between; background-color: rgba(253,232,233,0.85);}
  .header-lis{display:flex; list-style-type: none; width:35%; justify-content: space-around; padding: 0 2%;}
  .logo{height:calc(100% + 60px); background-color:rgba(253,232,233); width:15%; text-align: center;}
  .logo img{width:80%; padding-top:10px;}
  .header-lis li a img{width:40px;}
  .header-lis li a img:hover{width:50px; transition: 0.5s;}
  .mask{visibility: hidden; padding:2; text-align: center;}
  .header-lis li a img:hover +.mask{visibility: visible; position: relative; width:100%; background-color: rgba(0,0,0,0.3);
     color:white; opacity:1; top:-20px;}

 /**intro-movie area*/
    .kv{height: 100vh; display: flex; justify-content: center; align-items: center;}
    .kv .main-copy{color: #fff; font-size: 30px; font-weight: bold; text-align: center; line-height: 1; letter-spacing: .2em}
    .kv .sub-copy{color: #fff; font-size: 20px; text-align: center;}
    .scrolldown1{position: absolute; left: 50%; bottom: 10px; height: 70px; margin-bottom: 100px;}
    .scrolldown1 p{position: absolute; left:-25px; top:-40%; color:white; font-size: 18px; letter-spacing: 0.05em;}
    .scrolldown1::after{ content:""; position:absolute; top:0; width:3px; height:30px; background: white; animation:pathmove 1.4s ease-in-out infinite;
      opacity:0;}
    @keyframes pathmove{
      0%{height:0; top:0; opacity:0;}
      30%{height:30px; opacity:1;}
      100%{height:0; top:50px; opacity:0;}}
    .video{width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden; z-index: -1;}
    .video::after{content: ''; width: 100%; height: 100%; background-color: rgba(16, 57, 75, .3); display: block;
      position: absolute; left: 0; top: 0;}
    video{width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
  

 /**main*/
  .button{position:fixed; bottom:15vh; width:20vw; left:40vw; z-index:30; border-radius:25px; background-color: none; padding:10px 0; font-size:20px; cursor: pointer; visibility: hidden; transition: 1s;}
  main{padding-top:100px; background-color: aliceblue;}
 .first{display:flex; justify-content:space-around; position:relative; top:-150px;}
 .first div{text-align: center; border-radius: 25px; color:white; padding:20px; width:20vw;}
 .first div:hover{width:22vw; transition:1s ease;}
 .first div h2{border-bottom:solid white 2px;}
 .price{font-size: 16px; font-weight: bolder;}
 .second{padding-bottom:100px;}
 .second div{display:flex; justify-content: center; align-items: center;}
 .section div p{width:50%;}

/**ツアースライドショー（23/7）*/
 .slider {width:96%; margin:0 auto; padding-left:0;}
 h3{text-align: center; width:50vw; margin:0 auto; font-size: larger; padding:15px 0;}
 .slider li{background-color:lightblue;}
 .but{width:30vw; border-radius: 30px; background-color: darkblue; color:white; cursor: pointer; padding:5px 0;}
 .slider li div{text-align: center; margin-bottom:40px;}
 .slider img{width:44vw; height:auto; margin:0 auto;}
 .story{width:48vw; margin:0 auto; border-bottom:solid blue 2px; padding-top:30px;}
 .cost{width:48vw; margin:0 auto; text-align: center; padding-top:20px;}
 .slider .slick-slide {transform: scale(0.8); transition: all .5s; opacity: 0.5;}
.slider .slick-slide.slick-center{transform: scale(1); opacity: 1;}
.slick-prev, .slick-next {position: absolute; top: 42%; cursor: pointer; outline: none; border-top: 2px solid #666;
  border-right: 2px solid #666; height: 15px; width: 15px;}
.slick-prev { left: -1%; transform: rotate(-135deg);}
.slick-next {right: -1%; transform: rotate(45deg);}
.slick-dots {text-align:center; margin:20px 0 0 0; padding-left:0;}
.slick-dots li {display:inline-block; margin:0 5px;}
.slick-dots button { color: transparent; outline: none; width:8px; height:8px; display:block; border-radius:50%; background:#ccc;}
.slick-dots .slick-active button{background:#333;}

 .more{text-align: center; font-size: larger;}
 .more a{ position: relative; display: inline-block; transition: .3s;}
 .more a::after {position: absolute; bottom: 0; left: 50%; content: ''; width: 0; height: 2px; background-color: #31aae2; transition: .3s;
  transform: translateX(-50%);}
 .more a:hover::after{width: 100%;}
 .outer1,.outer2{width:200px; height:200px;}
 .inner1,.inner2{width:150px; height:150px;}
 .inner1{position:relative; top:50px; left:-100px;}
 .inner2{position:relative; top:50px; right:-100px;}

.promotion{display:flex; justify-content: center; margin:0 auto; padding:0 10%; background-color: #330000;}
.promotion div img{width:100%;}
.wera{padding:30px 10%; margin:0 auto; background-color: #330000;}
h2{text-align: center;}
table{width:95vw; margin:0 auto;}
.que{width:60%;}

 .third{background-color: #330000; padding:140px 0 140px 0;}
 .third p::first-letter{font-size:200%;}
 .third p{color:white; display:table-cell; vertical-align: middle; width:70%; padding-left:20px;}
 .third img{width:100%; height:auto;}
 .spe-sep{display:flex; margin:0 auto; width:80%; display:table;}
 .forth{text-align: center;}
 .temp{background-color: darkslategrey; color:white; width:80%; margin:0 auto; padding:20px 0;}
 .temp p a{color:white; text-decoration: underline;}
 iframe{width:60%; height:750px; border:none;}

  .eighth{display:flex; border: 2px solid yellow; width:90%; margin:20px auto; justify-content: space-around; background-color: white;}
 .eighth div img{width:70%;}
 .eighth div{padding:30px 0; text-align: center;}

 .nineth{display:flex; justify-content: center; margin:0 auto; padding:0 10%;}
 .nineth div img{width:100%;}

 /**library**/
 .d-demo__wrap{display:flex; overflow:hidden;}
.d-demo__list{display:flex; list-style: none;}
.d-demo__list--left{animation:infinity-scroll-left 95s infinite linear 0.5s both; margin-bottom:0;}
.d-demo__item{width:calc(100vw/5);}
.d-demo__item>img{width:100%;}

/**blog-part**/
.blog-part{display:none;}


 /**footer*/
  #copy{margin-top:0; text-align: center;}
  footer{margin:0; background-color: #FDE8E9;}
  .footer-lis{list-style-type: none; display:flex; justify-content: space-around; width:30%; margin:0 auto; padding-left:0;}
  .footer-lis li img{width:35px;}
  .footer-lis li img:hover{width:40px; transition: all 0.5s ease;}
  .prefectures{padding-bottom:20px;}
  .prefectures div{width:120px;}
 .pre1{padding-left:10%;}



  @media screen and (max-width:1024px){
    .logo{width:20%;}
    .header-lis li a img{width:45px;}
    .header-lis li a img:hover{width:45px;}
    button{padding:8px;}
     .d-demo__item{width:calc(100vw/4);}
  }
  @media screen and (max-width:896px){
    iframe{width:75%; height:900px;}
    .d-demo__item{width:calc(100vw/4);}
    .promotion,.nineth{padding:0 5%;}
  }
  @media screen and (max-width:736px){
    h1{font-size: 24px; padding-top:80px;}
    .logo{width:24%;}
    iframe{width:85%; height:900px;}
    .d-demo__item{width:calc(100vw/2.5);}
    h1{font-size: 18px;}
    .first{display:block;}
    .first div{width:70vw; margin:10px auto;}
    .first div:hover{width:73vw;}
    .outer1,.outer2{width:150px; height:150px;}
   .inner1,.inner2{width:100px; height:100px;}
   .inner1{position:relative; top:50px; left:-80px;}
   .inner2{position:relative; top:50px; right:-80px;}
   .eighth div img{width:100%;}
   .eighth{width:96%;}
  }
  @media screen and (max-width:667px){
   .logo{height:calc(100% + 60px);}
    .kv .main-copy{font-size:25px;}
    .kv .sub-copy{font-size:15px;}
    .d-demo__item{width:calc(100vw/3);}
    .header-lis li a img{width:40px;}
    .header-lis li a img:hover{width:40px;}
    h3{width:60vw;}
    .story{font-size: small;}
    iframe{width:95%;}
    .button{font-size: 14px; padding:7px 0; width:30vw; left:35vw;}
    .side-small{display:none;}
    .promotion{display:block;}
  }
  @media screen and (max-width:568px){
    .logo{width:28%;}
    .mask{display: none;}
    .d-demo__item{width:calc(100vw/3);}
    .header-lis li a img{width:35px;}
    .header-lis li a img:hover{width:35px;}
    h1{padding-top: 100px; margin-bottom:0; font-size: 18px; font-size:17px;}
  h1{font-size: 17px;}
  .story{width:60vw;}
  h3{width:70vw;}
  iframe{width:100%;}
 .second div{display:block; margin-bottom:20px;}
  .second div p{font-size: 15px;}
  .spe-sep{display:block; width:80%; text-align: center;}
  .third img{width:50%;}
  .third p{padding-left:0;}
  .inner1{position:relative; top:-70px; left:80px;}
  .inner2{position:relative; top:80px; right:-80px;}
  .eighth{display:block; width:70%;}
  .eighth div img{width:80%;}
  .prefectures{flex-wrap: wrap;}
  }
  @media screen and (max-width:480px){
     h1{ font-size: 16px;}
    .logo{width:30%; height:calc(100% + 40px);}
    .kv .main-copy{font-size:20px;}
    .kv .sub-copy{font-size:12px;}
    .header-lis li{padding:0 12px;}
    .d-demo__item{width:calc(100vw/3);}
    .outer1,.outer2{width:120px; height:120px;}
   .inner1,.inner2{width:70px; height:70px;}
   .inner1{position:relative; top:-70px; left:60px;}
   .inner2{position:relative; top:80px; right:-60px;}
   .que{ font-size: smaller;}
   .footer-lis{width:50%;}
   video{height:80%;}
  }
  @media screen and (max-width:412px){
    p{font-size: 13px;}
    .logo{width:35%; height:calc(100% + 35%);}
    .header-lis{margin-right:30px;}
  }