@media screen and (max-width: 768px) {
.sliderphoto{
    width:100%;
    float: left;   
}

.thumb-item{
	width:100%;   
	padding:17.5% 0% 0;
	text-align: center;   
}     
  
.bu-outline{
width:90%;
float: left; 
padding:2% 5%;
}
    

     
.photo_gallery01{
    width: 80%;
    height:30vh;
    margin: 10vh 10% 0;
    background-image: url('../wv-hirakawacho/plan-1f.png');
    background-size: contain;
    background-position: center; 
    background-color: #fff;
    background-repeat: no-repeat;
}  
          
.photo_gallery02 li{ 
    width: 80%;
    height:30vh;
    margin: 10vh 10% 0;
    background-image: url('../wv-hirakawacho/plan-2f.png');
    background-size: contain;
    background-position: center; 
    background-color: #fff;
    background-repeat: no-repeat;    
    }      

.photo_gallery03 li{ 
    width: 80%;
    height:30vh;
    margin:10vh 10% 0;
    background-image: url('../wv-hirakawacho/plan-3f.png');
    background-size: contain;
    background-position: center; 
    background-color: #fff;
    background-repeat: no-repeat;    
    }


.photo_gallery01 .copy{
    width:80%;
    position: absolute;
    top:45vh;
    left:10%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    }
     


.photo_gallery02 .copy{
    width:80%;
    position: absolute;
    top:45vh;
    left:10%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    } 

 

.photo_gallery03 .copy{
    width:80%;
    position: absolute;
    top:45vh;
    left:10%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem; 
    }
    

    
.photo_gallery01 .copy img{
    padding:10% 0 0 0;
    } 
    
.photo_gallery02 .copy img{
    padding:10% 0 0 0;
    } 
    
.photo_gallery03 .copy img{
    padding:10% 0 0 0;
    }     
    
.access li{ 
    width: 80%;
    margin: 0vh 10% 0vh;
    background-size: cover;
    background-position: left;    
    } 
    
.access .copy{
    width:80%;
    position: absolute;
    top:65vh;
    left:10%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    text-align: left;
    } 
    
    
    .bu_title{
    padding:5% 5%;
	font-size:3rem;
    line-height: 4;
	letter-spacing:0.5em;
    color:#fff;
    } 
    
   
.bu_box01{
        width:85%;
        background: rgba(255,255,255,1);
        text-align: center;
        float: left;
        display: inline-block; 
        margin:0% 0% 5% 5%;
    } 
.bu_box02{
        width:85%;
        background: rgba(255,255,255,1);
        text-align: center;
        float: left; 
        display: inline-block;
        margin:0% 0% 5% 5%;    
    }
.res-photo{
        width:40%;
        padding:5% 2.5% 5% 2.5%;
        float:left;
    } 
.res-outline{
        width:50%;
        padding:10% 2.5% 5% 0%;
        float:left;
    font-size:2rem;
    }     
}
	
@media screen and (min-width: 768px) {
   /* ウィンドウ幅768px以上指定 */

.sliderphoto{
    width:60%;
    height:100vh;
    float: left;
}
    
.thumb-item{
	width:100%;   
	padding:12.5% 10% 0;
	text-align: center;   
}    
  
.bu-outline{
width:35%;
float: left; 
padding:5% 5% 0% 0%;
}
    
.photo_gallery01 li{ 
    width: 50%;
    height:70vh;
    background-color: #fff;
    margin: 10vh 0% 0vh 40%;
    background-image: url('../wv-hirakawacho/plan-1f.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;    
    } 
    
      
 
.photo_gallery02 li{ 
    width: 50%;
    height:70vh;
    margin: 10vh 0% 0vh 40%;
    background-color: #fff;    
    background-image: url('../wv-hirakawacho/plan-2f.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;       
    }      

.photo_gallery03 li{ 
    width: 50%;
    height:70vh;
    margin: 10vh 0% 0vh 40%;
    background-color: #fff;     
    background-image: url('../wv-hirakawacho/plan-3f.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;    
    }
    
.access li{ 
    width: 50%;
    height:60vh;
    margin: 0vh 0% 0vh 40%;
    background-size: cover;
    background-position: left;    
    }    
    
.photo_gallery01  h2{
    font-weight: 600;
	font-size: 3rem; 
	line-height:1.5;
    color:#fff;      
    } 
    
.photo_gallery02  h2{
    font-weight: 600;
	font-size: 3rem; 
	line-height:1.5;
    color:#fff;      
    }      

.photo_gallery03  h2{
    font-weight: 600;
	font-size: 3rem; 
	line-height:1.5;
    color:#fff;     
    } 


.photo_gallery01 .copy{
    width:30%;
    position: absolute;
    top:5%;
    left:5%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    } 
    
.photo_gallery01 .copy img{
    padding-top:5%;
    } 

.photo_gallery02 .copy{
    width:30%;
    position: absolute;
    top:5%;
    left:5%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    }
    
.photo_gallery02 .copy img{
    padding-top:5%;
    }    

.photo_gallery03 .copy{
    width:30%;
    position: absolute;
    top:5%;
    left:5%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;  
    } 
    
.photo_gallery03 .copy img{
    padding-top:5%;
    }     
    
    
.access  h2{
    font-weight: 600;
	font-size: 3rem; 
	line-height:1.5;
    color:#fff;     
    } 
    
.access .copy{
    width:30%;
    position: absolute;
    top:15%;
    left:5%;
    z-index:1;
    color:#fff;
    line-height: 3.5rem;
    text-align: left;
    } 
    
    
    .bu_title{
    padding:0% 5% 5%;
	font-size:2rem;
    line-height: 4;
	letter-spacing:0.5em;
    color:#fff;
    } 

    
.bu_box01{
        width:30%;
        background: rgba(255,255,255,0.9);
        text-align: center;
        float: left;
        margin-right:2.5%;
        display: inline-block;        
    } 
.bu_box02{
        width:30%;
        background: rgba(255,255,255,0.9);
        text-align: center;
        float: left;        
    }    
    
}
    
 
/* レスポンシブ終了 */

.fade-in-w {
  opacity: 0;    
  transform : translate(30px,0);
  transition : all 2s;
}    
 
 

@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }      
}     
    

	
.thumb-item img{
    width:100%;
	object-fit: cover;
	object-position: center top;
}

.thumb-item-nav{
	width:100%;    
	padding:1% 10%;
	text-align: center;

}

.thumb-item-nav img{width:100%;}
 


.bu-outline li{
width:100%;
color:#fff;
font-size:1.8rem;
line-height: 2.5rem;
text-align: left;
padding:2%; 
clear:both;    
}

.bu-outline li h2{
font-size:4rem;   
font-weight:600;
}

.bu-outline li .cap{
color:#000;
font-size:1.4rem;
padding:0% 2%;
margin-bottom:1%;
text-align: center;
background-color: #C3C0A3;
display: inline-block;   
}

.bu-outline li .cap2{
color:#000;
font-size:1.2rem;
padding:0% 2%;
margin:0% 1% 1% 0%;
text-align: center;
background-color: #ccc;
display: inline-block;
float:left;
}
    
.Main_bg{
    width:100%;
    height:100vh;
    background-image: linear-gradient(to right, transparent 0%, transparent 0%, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  
    }
    
.Main_bg2{
    width:100%;
    height:100vh;
    background-image: linear-gradient(to right, transparent 0%, transparent 0%, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  
    }  
    
.Main_bg3{
    width:100%;
    height:100vh;
    background: linear-gradient(300deg, transparent 40%, transparent 0%, #000 80%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  
    }
    
.Main_bg4{
    width:80%;
    height:100vh;
    background: linear-gradient(to top, transparent 0%, transparent 0%, #000 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding:0% 10%;
  
    }      


 

.slides-wrapper{
   display: flex;
   gap: 30px;
   width: calc(100% - 50px);
   margin: 0 auto;
   overflow: hidden;
}
.slide-img{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}    
    
   /*---scrollwrapper 横スクロール---*/    
    
.scroll__wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2rem 0.5rem;
}
.scroll__wrapper::-webkit-scrollbar {
    height: 10px;
}
.scroll__wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.scroll__wrapper::-webkit-scrollbar-button {
    display: none;
}
.scroll__wrapper::-webkit-scrollbar-track-piece:start, .scroll__wrapper::-webkit-scrollbar-track-piece:end {
    background-color: transparent;
}
.scroll__wrapper__list {
    display: flex;
    gap: 5rem;
}
.scroll__wrapper__list::after {
    content: "";
    width: 25%;
    display: block;
    position: relative;
    flex: 0 0 auto;
}
.scroll__wrapper__list__item {
    color: #000;
    width: 50%;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    transition: .3s;
}

/*---scrollwrapper 横スクロール終了---*/     


/*---ボタン---*/

a .more-btn {
          position: relative;
          width: 45%;
          margin:5% 1% 5% 0%;
          float: left;
          box-sizing: border-box;
          height: 5rem;
          background: rgba(8,61,119,1);
          -webkit-transition: background 0.2s linear;
          transition: background 0.2s linear; }

a .more-btn .txt {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 1.6rem;
            letter-spacing: 0.1rem;;
            color: #fff;
            transform: translateX(-50%) translateY(-50%); }

a .more-btn::after {
            content: "";
            height: 1rem;
            width: 1rem;
            position: absolute;
            top: 50%;
            right: 2rem;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: translateX(-50%) translateY(-50%) rotate(-45deg); }

a .more-btn::before {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          -webkit-transition: opacity 0.2s linear;
          transition: opacity 0.2s linear; }

a:hover .more-btn {
          background: #00346F; }

a:hover::before {
          opacity: 0.5; }



   /*---ボタン---*/


.contents .wrap {
    margin: 0 auto;
    position: relative;
	padding: 0;
    z-index: 1;
}





.fade-up {
  transform: translate3d(0,0,0);		
  transition: opacity 3s;
  -moz-transition: opacity 3s;
  -webkit-transition: opacity 3s;
  -o-transition: opacity 3s;
  transition: transform 3s;
  -moz-transition: transform 3s;
  -webkit-transition: transform 3s;
  -o-transition: transform 3s;  
}
    


.fade-up2 {
  transform: translate3d(0,0,0);		
  transition: opacity 3s;
  -moz-transition: opacity 3s;
  -webkit-transition: opacity 3s;
  -o-transition: opacity 3s;
  transition: transform 3s;
  -moz-transition: transform 3s;
  -webkit-transition: transform 3s;
  -o-transition: transform 3s;
}

.fade-up-main {
  transition: opacity 2s;
  -moz-transition: opacity 2s;
  -webkit-transition: opacity 2s;
  -o-transition: opacity 2s;
  transition: transform 2s;
  -moz-transition: transform 2s;
  -webkit-transition: transform 2s;
  -o-transition: transform 2s;
}

.fade-in {
  opacity: 0;     
  transform : translate(0, 20px);
  transition : all 2s;
}