@charset "utf-8";

/* 全称セレクター */

/*
html{
font-size:20px;
}*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
vertical-align:bottom;  
}

body{
color:white;
font-family:serif;
/*background-image: url('images/ptn.jpg');*/
background:black;
}

a{
color:white;
text-decoration:none;
}

a:hover {　　　
  color: red;
  text-decoration: underline;
}

/*区切りゴールドライン*/

.kugiri{
background:pnk;
width:100%;
max-width:1200px;
height:70px;
margin:0 auto;
/*position:relative;
top:0;
left:0;*/
}
/*
.iyashi{
width:200px;
}*/

.goldline{
width:100%;
max-width:1200px;/*
position:absolute; 
top: 50%;
left: 50%;
  transform: translate(-50%, -50%);*/
}






/*ヘッダー①*/

header{
background:black;/*カラー*/
width:100%;
height:auto;
position: fixed;
  top: 0;
  right: 0;
z-index: 5;
}

.menue{
background:black;/*①グレーカラー*/
width:100%;
max-width:1200px;
height:auto;
margin:0 auto;
padding:20px 20px;
display:flex;
align-items:center;
justify-content:space-between;

}

header img{
/*vertical-align:baseline;*/
width:250px;
}


ul {
width:100%;
max-width:500px;
font-size:1.8rem;
  list-style: none; /* リストのマーカーを非表示 */
  writing-mode: vertical-rl;
  text-orientation: upright;
line-height: 2.5; 
}


.info{
white-space: nowrap;
}



@media screen and (max-width:1000px){
header img{
width:180px;
}


ul{
font-size:1.5rem;
line-height: 2; 
margin:0 15px 0 0;
}


}


@media screen and (max-width:500px){
header img{
width:80px;
margin:0 0 20px 0;
}

ul{
font-size:5vw;
margin:10px 30px 0 0;
}

.info{
display:none;
}

}


/*メイン*/
main{
height:;
padding:;
margin:;
}

/*TOP画像エリア*/
.top{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
margin:0 auto;
padding:;
position:relative;
top:0;
left:0;
}

.top h1{
font-size:3rem;/*文字サイズ*/
text-align:center;
writing-mode: vertical-rl;
  text-orientation: upright;
position:absolute; 
top: 40%;
left: 50%;
  transform: translate(-50%, -50%);
}

.top img{
width:100%;
max-width:1200px;
height:1238px;
object-fit:cover;

}


@media screen and (max-width:500px){
.top img{
width:100%;
height:400px;
object-fit:none;
}

.top h1{
font-size:5vw;
white-space: nowrap;
top:70%;

}


}



/*温泉画像メイン*/
.furo_mein{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
position:relative;
top:0;
left:0;
}


.furo_mein img{
width:100%;
max-width:1200px;
height:691px;
padding:;
margin:0 auto;
text-align:center;
object-fit:cover;
}

.furo_mein h2{
font-size:3rem;/*文字サイズ*/
text-align:center;
position:absolute; 
top: 40%;
left: 50%;
  transform: translate(-50%, -50%);
white-space: nowrap;

}

@media screen and (max-width:500px){
.furo_mein img{
width:100%;
height:auto;
object-fit:none;
}

.furo_mein h2{
font-size:6vw;
top: 50%;
}

}



/*スタイルＡ＝横3連画像 ~~~~~~~~~~~~~~~ピンク*/

.style_a{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

bath3 img{
width:300px;
height:250px;
}


.style_a h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}

.style_a h3{
font-size:1rem;/*文字サイズ*/
margin:20px 0 0 0;
}

.style_a div{
background:black; /*カラー*/
width:100%;
height:auto;
padding:;
margin:0 auto;
display:flex;
justify-content:space-around;
}


@media screen and (max-width:1000px){
.style_a div{
display:block;
text-align:center;
}

}

@media screen and (max-width:500px){
.style_a h2{
font-size:5.5vw;
}

.style_a img{
margin:20px 0;
}

}



/*スタイルB＝上部画像＋テキスト、下部、横3連画像~~~~~~~~~~~~~~~　青*/
.style_b{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

#text_right{
display:flex;
align-items:center;
}

#text_right h3{
font-size:1.2rem;/*文字サイズ*/
display:flex;
line-height:50px;
margin:0 20px;
}


/*.style_b div*/
.area_room{
background:black; /*カラー*/
width:100%;
height:auto;
padding:;
margin:0 auto;
display:flex;
justify-content:space-around;
}


.style_b h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:20px 0;
}

.style_b h3{
font-size:1rem;/*文字サイズ*/
margin:20px 0;
}


@media screen and (max-width:1000px){
#text_right{
display:block;
}

#text_right img{
width:100%;
}

.area_room{
display:block;
text-align:center;

}

}

@media screen and (max-width:500px){
.area_room img{
margin:10px 0;

}

.style_b h2{
font-size:6vw;
}


#text_right h3{
line-height:30px;

}


}




/*スタイルC＝左テキスト＋画像~~~~~~~~~~~~~~~~~~~~~~　黄色*/

.style_c{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

#text_left{
background:black;
width:100%;
max-width:1200px;
display:flex;
align-items:center;
margin:0 auto;
padding:20px 20px;
}

#text_left h3{
font-size:1.2rem;/*文字サイズ*/
display:flex;
line-height:50px;
}

.style_c h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}

/*
@media screen and (max-width:1000px){
#text_left{
display:block;
}

#text_left img{
width:100%;
}



/*スタイルD＝テキスト横3連画像~~~~~~~~~~~~~~~~~~~~~~紫*/
.style_d{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

/*.style_d div*/
.este{
background:black; /*カラー*/
width:100%;
height:auto;
padding:;
margin:0 auto;
display:flex;
justify-content:space-around;
}

/**/
.style_d h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}

.style_d h3{
font-size:1rem;/*文字サイズ*/
margin:20px 0 0 0;
}


@media screen and (max-width:1000px){
.este{
display:block;
text-align:center;
}

}

@media screen and (max-width:500px){
.este img{
margin:10px 0;
}

.style_d h2{
font-size:6vw;
}


}



/*スタイルE＝画像＋右テキスト*/

.style_e{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}


.style_e div{
background:black;/* カラー*/
width:100%;
height:auto;
padding:;
margin:0 auto;
display:flex;
justify-content:space-around;
}



.style_e h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}

.style_e h3{
font-size:1rem;/*文字サイズ*/
margin:20px 0 0 0;
}


/*スタイルF＝画像＋2連画像~~~~~~~~~~~~~~~~~~オレンジ*/

.style_f{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

.style_f div{
background:black; /*カラー*/
width:100%;
height:auto;
padding:;
margin:0 auto;
display:flex;
justify-content:space-around;
}

/*
.text_right{
display:flex;
align-items:center;
}

.text_right h3{
display:flex;
line-height:50px;
margin:;
}*/

.style_f h2{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}

.style_f h3{
font-size:1rem;/*文字サイズ*/
margin:20px 0 0 0;
}

@media screen and (max-width:1000px){
.style_f div{
display:block;
}

.style_f img{
width:100%;
margin:10px 0;
}


}


@media screen and (max-width:500px){
.style_f h2{
font-size:6vw;
}

}



/*スタイルG＝左画像右テキスト　~~~~~~~~~~~~~~~~~~エメラルド*/
.style_g{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

.style_g h2{
font-size:2rem;/*文字サイズ*/
background:black;
width:;
text-align:center;
margin:0 0 20px 0;
}

#text_right2{
display:flex;
align-items:center;
}

#text_right2 h3{
font-size:1.2rem;/*文字サイズ*/
display:flex;
line-height:50px;
margin:0 20px;
}



/*
.style_g h3{
font-size:1.2rem;/*文字サイズ
margin:20px 0 0 0;
text-align:left;
}


.style_g h4{
font-size:1rem;/*文字サイズ
margin:20px 0 0 0;
}*/


@media screen and (max-width:1000px){
#text_right2{
display:block;
}

#text_right2 img{
width:100%;
}

}

@media screen and (max-width:500px){
#text_right2 h3{
line-height:30px;

}

.style_g h2{
font-size:6vw;
}

}


.move{
width:100%;
max-width:1200px;
height:auto;
text-align:center;
margin:0 auto;
padding:20px 20px;
}

.move iframe{
width:80%;
height:500px;

}

@media screen and (max-width:500px){
.move{
padding:5px 5px;
}



.move iframe{
width:100%;
height:300px;
}

}



/*スタイルH＝テキスト ~~~~~~~~~~~~~~~~~~~~~~緑　*/
.style_h{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
}

.style_h h2{
font-size:2rem;/*文字サイズ*/
background:black;
width:;
text-align:center;
margin:0 0 20px 0;
}

.style_h p{
font-size:2rem;/*文字サイズ*/
text-align:center;
margin:0 0 20px 0;
}
.style_h h3{
font-size:2rem;/*文字サイズ*/
margin:20px 0 0 0;
text-align:center;
}


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

.style_h p{
font-size:4vw;/*文字サイズ*/
}
.style_h h3{
font-size:4vw;/*文字サイズ*/
}

.style_h h4{
font-size:3.5vw;/*文字サイズ*/
}


}


/*スタイルh＝テキスト予約*/
.yoyakubotan{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:100px;
margin:0 auto;
padding:30px 0 0 0;
text-align:center;
}

.yoyakubotan h3 a{
font-size:1.5rem;
background:red;
border:5px solid white;
width:300px;
height:50px;
border-radius:15px;
padding:10px 10px;
position:relative;
box-shadow:2px 2px 5px rgba(0,0,0,1);
}
.yoyakubotan h3 a:hover{
top:2px;
left:2px;
box-shadow:4px 4px 5px rgba(0,0,0,1);
}

/*スタイル＝~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~アクセス*/
.access{
background:black;/*カラー*/
width:100%;
max-width:1200px;
height:auto;
padding:20px 20px;
margin:0 auto;
display:flex;
justify-content:space-between;

}

.access div{
width:50%;
background:black;/*カラー*/
padding:;

}*/

.access div h2{
font-size:1.5rem;
}

.access div p{
font-size:1.5rem;
}

iframe{
width:50%;
margin:0 0 0 20px;
}


@media screen and (max-width:1000px){
.access{
display:block;
text-align:center;
}

.access div{
width:100%;
text-align:left;
}

iframe{
width:100%;
margin:0 0 0 0;
}


}

@media screen and (max-width:400px){
iframe{
width:100%;
}

.access div h2{
font-size:6vw;
}

.access div p{
font-size:5vw;
}

iframe{
width:100%;

}

}





/*スタイルh＝フッター*/

footer{
width:100%;
max-width:1200px;
height:auto;
padding:;
margin:0 auto;
text-align:;
background:black;
}


footer div{
font-size:1.5rem;
width:100%;
max-width:1200px;
height:auto;
padding:;
margin:0 auto;
text-align:;
background:;
line-height:15px;
;
}


footer p{
font-size:1.5rem;
text-align: center;
margin:50px auto;

}


#footerad{

}





*/