body {
font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
background-image: url(../imgs/bg70.png);
overflow-x: hidden; 
color:#444;
font-size:16px;
line-height: 1.5em;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.no-gutters {
margin-right: 0;
margin-left: 0;
}


.container-fluid {
margin: 0;
padding: 0;
overflow:hidden;
} 

.pink {color:#f799b3 !important;}
.gray {color:#444 !important;}
/*nav*/

.bg-primary {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(225, 225, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

button:focus{
outline:0;
}


.navbar-toggler {
  border: 0;
}

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:visited, .navbar-dark .navbar-nav .nav-link:focus  {
  color: rgba(255, 255, 255, 1);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(245, 152, 177, 1);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.nav-item button {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0;
  padding-left: 0;

}

.navbar-nav {
  padding-left: 12px;
  margin-bottom: 0;
  list-style: none;
}

.header-title{
font-weight: 700;
font-family: 'Noto Sans Japanese', serif;
position: absolute;
top:15px;
left: 70px;
}
.jtb img{
position: absolute;
right: 10px;
top: 15px;
}


h1, h3 {
font-weight: 700;
font-family: 'Noto Sans Japanese', serif;
}

h3  {
font-size: 18px;
}

/*top*/
.title-container {
margin: 0;
text-align: center;
position:relative;
}
.image-container img{
position:relative;
margin: 0;
padding: 0;
width:100%
}


.image-container {
margin: 0;
width:100%
overflow:hidden;
text-align: center;
}


.wrapper{
width:100%; 
position: relative;
}

.title {
    text-align: center;
    position: absolute;
    /*top: 90px;*/
    top: 150px;
    width: 100%;
    margin: 0 auto 0 auto;
}


.contents-wrapper {
margin: 0;
   background: url('../imgs/rockbg.jpg') no-repeat right top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
overflow:hidden;
} 


.title img{
width: 50%;
max-width: 600px;
}

.frame{
text-align: center;
position: absolute;
top: 200px;
left:13px;
width: 100%;
margin: 0 auto 0 auto;
}

.frame-top-left{
text-align: center;
position: absolute;
top: 60px;
left:60px;
}

.frame-bottom-left{
text-align: center;
position: absolute;
bottom: 2px;
left:60px;
}

.frame-bottom-right{
text-align: center;
position: absolute;
bottom: 2px;
right:60px;
}

.frame img {
width: 50%;
max-width: 292px;
mini-width:260px;
z-index:1;
}

.caption-1 {
position: relative;
width: 100%;
/*top:-95px;*/
top:-110px;
z-index:5;
font-size:14px;
margin: 0 auto 0 auto;
}

.caption-2 {
position: relative;
width: 100%;
top:-95px;
z-index:5;
font-size:14px;
line-height: 1.3em;
margin: 0 auto 0 auto;
}
.area-name {
margin: 30px 60px 20px 60px;
position: relative;
}


.area-content {
padding: 10px 60px 30px 90px;
}

.col-6-txt{
padding: 0 0 0 50px;
}


.small-content {
padding: 10px 80px 5px 90px;
}


.small-col{
padding: 5px;
}
.small-col img{
width: 100%;
}

.item-wrapper {
width: 100%;
text-align: center;

}


.sns img{
width: 90%;
max-width: 300px;
text-align:center;
border: 1px solid #444;  !important;
margin-bottom: 10px; 
margin-left: auto;
margin-right: auto;

}

.link-button {
/*width: 250px;*/
text-align:center;
margin: 20px auto 0 auto;
border:none !important;
}



.btn:hover {
color:none !important;
background:none !important;
}
.link-txt {
    position: relative;
    /*top:-40px;
*/
    top: -45px;
   /* left: 20px;*/
}
 .pink-bg {
background-color: #feeaeb;
}

.tour-link, .tour-link:visited, .tour-link:focus  {
  color: rgba(245, 152, 177, 1) !important;
}

.tour-link:hover {
  color: rgba(68, 68, 68, 1) !important;
}

.no-num{
padding: 30px 0 0 60px;

}

.area-img img{
width:90%;
max-width: 800px;
}

.sns-cap{
width:300px;
font-size: 12px;
margin: 10px auto 0 auto;
}

.link-button-left{
/*widht:100%;*/
float:left;
margin-left: 40px;
}

.link-button-right{
float:right;
margin-right:20px; 
}

.link-button .link-txt .pink:hover {
    color: #444 !important; 
    transition: color 0.3s ease;
}
.num-1::before {
content: url('../imgs/1.png');
position: relative;
top: 40px;
left: -5px;
}

.num-2::before {
content: url('../imgs/2.png');
position: relative;
top: 40px;
left: -5px;
}

.num-3::before {
content: url('../imgs/3.png');
position: relative;
top: 40px;
left: -5px;
}

.num-4::before {
content: url('../imgs/4.png');
position: relative;
top: 40px;
left: -5px;
}

.num-5::before {
content: url('../imgs/5.png');
position: relative;
top: 40px;
left: -5px;
}

.num-6::before {
content: url('../imgs/6.png');
position: relative;
top: 40px;
left: -5px;
}

.num-7::before {
content: url('../imgs/7.png');
position: relative;
top: 40px;
left: -5px;
}

.num-8::before {
content: url('../imgs/8.png');
position: relative;
top: 40px;
left: -5px;
}


.line-2{
display: block;
position: relative;
left: 92px;
}

.carousel-item img, .right-t img {
width:100%
}




#carouselExampleControls2, #carouselExampleControls3, .right-t {
width: 90%;
margin: 0 0 20px 0;
}

.left-t p{
width: 90%;
margin: 0 0 20px 25px;
}

.area-name p{
display: block;
margin: 20px 80px 0 90px;
width: 85%;
}



.copy {
padding: 15px 0 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
}

@media screen and (max-width: 933px) {
.frame-top-left{
top: 30px;
left:30px;
}
.frame-bottom-right{
right:30px;
}

}

@media screen and (max-width: 758px) {
.area-img{
margin-top:10px;
}
.area-name h1 {
font-size: 1.5rem;
}
.sns img{
margin-top:20px;
}

.area-name{
margin-right:0;
}



.area-name p{
margin: 20px 10px 0 10px;
}

.col-6-txt {
margin: 20px 20px 0 0;
padding-left: 25px;
}

#carouselExampleControls2, #carouselExampleControls3, .right-t{
width: 90%;
margin: 0 0 20px 20px;
}

h2 img{
margin-top:20px; 
}


}


@media screen and (max-width: 600px) {
.frame{
top: 160px;
}
.caption-1 {
top:-85px;
font-size: 13px;
line-height: 1.5em;
}
.area-name h1 {
font-size: 1.3rem;
}
.area-name {
margin: 30px 0 20px 60px;
}


.area-content{
padding: 10px 30px;
}
.no-num{
padding: 10px 0 0 40px;

}


}

@media screen and (max-width: 538px) {
.caption-1 {
top:-80px;
font-size: 11px;
}

}

@media screen and (max-width:488px) {
.caption-1 {
/*top:-70px;*/
font-size: 11px;
}
.frame-top-left{
top: 25px;
left:25px;
}
.frame-bottom-right{
right:25px;
}
.small-content {
padding: 10px 40px 5px 40px;
}

    .navbar {
        padding-left: 16px;
        padding-right: 16px;
    }



    .area-name {
        margin: 30px 0px 20px 30px;
    }



    .frame {
        top:120px;
    }
}

@media screen and (max-width: 424px) {

    .frame {
        top: 130px;
        left: 5px;
    }

    .num-1::before {
        content: '';
    }

    .num-2::before {
        content: '';
    }

    .num-3::before {
        content: '';
    }

    .num-4::before {
        content: '';
    }

    .num-5::before {
        content: '';
    }

    .num-6::before {
        content: '';
    }

    .num-7::before {
        content: '';
    }

    .num-8::before {
        content: '';
    }

    .line-2 {
        left: 0;
    }

    .no-num {
        padding: 10px 0 0 10px;
    }





    

}

@media screen and (max-width:372px) {
.frame {
top: 130px;
left:0;
}
.caption-1 {
top:-50px;
font-size: 8.5px;
}
.area-img {
margin-top:10px;
}

.inner-item img {
width: 250px;
}

.sns-cap {
width:250px;
}



}

@media screen and (max-width:333px) {

.frame-top-left {
left:15px;
}

.frame-bottom-left {
left:15px;
}

.frame-bottom-right {
right:15px;
}
}
@media screen and (max-width:300px) {
.hide {
visibility: hidden;
}

}





.link-button a {
    display: inline-block;
    background: url("imgs/button.png") no-repeat center/contain;
    padding: 20px 60px;
    color: white;
    /*font-weight: bold;*/
    text-decoration: none;
}







.fa-arrow-right:before {
color:#444;
}