@charset "utf-8";
/* CSS Document */
header , footer , .wrap{
text-align: center;
}
.wrap{
width: 100%;
background-color:#F4F6FB;
}
.font_p{
font-size: 16px!important;
font-weight: bold;
}
header{
width: 100%;
height: 300px;
}
nav{
font-size: 1em;
font-weight: 500;  
}
main{
position: relative;
top: 0;
width: 100%;
height: 200px;
margin: 0 auto;
}
.event_back{
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 0;
}
#main{
background-image:  linear-gradient(to top, rgba(166,181,253, 0.1) 0%,rgba(166,181,253,0.7) 100%),url("../imgs/hotel/hotel_top.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center; 
}
#main h2{
color: #fff; 
font-size: 36px;
text-shadow: #000 1px 0 5px;
}
.main_title{
color: #fff;
font-family: 'Archivo Black', sans-serif;
font-size: 32px;
transform: rotate(-10deg);
margin: 25px 0;
background-color: #37862E;
width: 150px;
display: inline-block;
line-height: 54px;
height: 50px;
border-radius: 5px;
}
#main p{
color: #37862E;
font-weight: bold;
font-size: 18px;
}
.text{
width: 80%;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.text p{
display: inline-block;
margin-left: 25px;
color:hsla(359,98%,49%,1.00);
font-weight: bold;
margin-top: 237.5px;
}
.main_news{
width: 80%;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: flex;
height: auto;
justify-content: space-around;
text-align: left; 
}
.main_news p{
width: 100%;
font-size: 16px;
line-height: 1.5rem;
margin-top: 0;
margin-bottom: 0;
}
.tel{
font-size: 1.3rem;
font-weight: bold;
}
.tel:before{
content: "☎" ; 
}
.uketsuke {
line-height: 1.2rem;
color: #fff;
background-color: #C0A000;
width: 100%;
text-align: left;
padding-left: 5px;
font-weight: bold;
}
h1{
width: 300px;
margin: 0 auto;
text-align: center;
font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
diaplay:inline-block;
padding: 0;
}
h5{
font-size: 18px;
margin: 10px 0;
}
ol li{
font-size: 16px;
line-height: 1.5rem;
}
#h_logo{
display: inline-block;
width: 100%;
margin: 50px auto;
}
.h_logo{
display: inline-block;
width: 100%;
margin: 25px auto;
}
.senro:before{
content: url(../imgs/senro.png);
width: 300px;
padding: 0 5px;
} 
#object1 img{
position:absolute;
z-index: 100;
left: 300px;
animation:30s linear infinite rotation1;
}
#object2 img{
position:absolute;
z-index: 100;
right: 300px;
animation:7s linear infinite rotation2;
}
.info_mark{
width: 100%;
display: inline-flex;
text-align: center;
align-items: center;
justify-content: flex-end;
}
.point_of_departure{
display: inline-block;
width: 50px;
height: auto;
align-items: center;
background-color: #C0A000;
color: #fff;
margin: 0 10px 10px 0;
padding-top: 3px;
border-radius: 5px;
font-weight: bold;
}
.plan_type{
display: inline-block;
width: 50px;
height:auto;
align-items: center;
border: 2px solid #4A546C;
color: #4A546C;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
margin: 0;
font-weight: bold;
}
@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}

@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
nav ul {
width: 80%;
display: inline-flex;
justify-content: space-between;
list-style: none;
}
nav li{
list-style: none;
width:-moz-fit-content; 
width:fit-content; 
}
nav ul li a{
color: #272727;
text-decoration: none;
}
.topic_top{
font-size: 21px!important;
line-height: 1.8rem!important;
font-weight: bold;
color: #fff;
background-color: #4A546C;
text-align: center;
padding: 15px;
margin: 0px auto 10px;
height: 160px;
}
.topic_top2{
font-size: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #4A546C;
text-align: center;
padding: 10px;
margin: 0px auto 10px;
height: auto;
}
.topic_top3{
font-size: 21px;
line-height: 1.8rem;
font-weight: bold;
color: #fff;
background-color: #4A546C;
text-align: center;
padding: 15px;
margin: 0px auto 10px;
height: 160px;
}
.topic_goriyo{
font-size: 21px!important;
line-height: 1.8rem!important;
font-weight: bold;
color: #FB8A9D;
background-color:#FDF2F3;
text-align: center;
padding: 16px;
margin: 0px auto 10px;
height: auto;
width: 80%;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.topic_goriyo p{
color: red;
font-weight: bold;
margin :0 auto;
width: 90%;
line-height: 1.5rem!important;
padding: 1rem 0;
}
.tour_point{
font-size: 1.2rem;
}
.tour_point_mini{
font-size: 1rem;
}
.item_img_box{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
text-align: right;
}
.sub_img_box_flex{
display: flex;
justify-content: space-around;
gap: 5px;
}
.point_box{
width: 100%;
height: 100px;
}
.gentei_tour{
line-height: 1.2rem;
font-weight: bold;
color: #fff;
background-color: #c1a470;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 10px auto;
}
.img_box{
display: flex;
padding: 0 auto;
}
.img_box img{
margin: 0 auto;
}
.item{
width: 45%;
}
.item img{
margin: 0 auto;
}
.item ul li{
font-size: 14px;
line-height: 1.5rem;
}
.koutei {
padding: 10px 5px 5px 5px;
position: relative;
margin: 2rem auto;
padding-top: 10px;
width: 100%;
border: 2px solid #4A546C;
color: #000;
font-size: 14px;
line-height: 1.5rem;
text-align: left;
height: 285px;
}
.koutei-title {
position: absolute;
left: 20px;
top: -15px;
padding: 0 .5em;
font-weight: bold;
font-size: 1.1em;
color: #fff; 
background: #4A546C;
}
.apply {
padding: 10px 5px 5px 5px;
position: relative;
margin: 2rem auto;
padding-top: 10px;
width: 100%;
border: 2px solid #4A546C;
color: #000;
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
.apply-title {
position: absolute;
left: 20px;
top: -15px;
padding: 0 .5em;
font-weight: bold;
font-size: 1.1em;
color: #fff; 
background: #4A546C;
}
.hosoku {
position: relative;
margin: 0 auto 1rem;
padding-top: 10px;
padding-left: 1rem;
padding-right: 1rem;
width: 95%;
border: 2px solid #4A546C;
color: #000;
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
.hosoku-title {
position: absolute;
left: 20px;
top: -15px;
padding: 0 .5em;
font-weight: bold;
font-size: 1.1em;
color: #fff; 
background: #4A546C;
}
#block h4,
.block h4{
font-size: 16px;
line-height: 1.2rem;
font-weight: bold;
text-align: left;
margin: 10px 0 5px 0;
}
#block p,
.block p{
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
.max_img{
width: 50%;
margin: 0 auto;
}
.block{
width: 80%;
margin: 0 auto;
display: block;
background-color: #fff;
padding: 1rem;
}
table{
table-layout:fixed;
width:100%;
}

.hotel_name{
background-color:#6988D4;/*background-color:#c1a470;*/
line-height: 3rem;
/*border-radius: 5px;*/
width: auto;
display: block;
margin: 0 auto;
/*padding: 0 1rem;*/
/*margin-bottom: 10px;*/
}.httl_sub table{
margin: 0;
}
.httl_sub table tr th{
background-color:#4A546C;
color: #fff;
border-style: none;
}
.httl_sub table tr td{
background-color:#fff;
color: #4A546C;

}
@media screen and ( min-width: 1301px) {
.sub_img_box {
height: auto;
}
}
@media screen and (min-width: 901px) and ( max-width: 1300px) {
.topic_top2 {
margin: 125px auto 10px;
font-size: 14px;
}
.topic_top {
margin: 0 auto 10px;
font-size: 14px;
}
.topic_goriyo {
margin: 0 auto 10px;
font-size: 14px;
}
.topic_top3{
margin: 150px auto 10px;
}
.item_img_box {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
}
.sub_img_box {
height: 175px;
}
.midium{
display: block;
width: 100%;
height: 40px;
}
.point_box{
height: 150px;
}
.koutei{
height: 425px; 
}
.gentei_tour {
font-size: 12px;
}
.text{
width: 100%!important;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.text p{
display: inline-block;
margin-left: 25px;
color:hsla(359,98%,49%,1.00);
font-weight: bold;
margin-top: 100px!important;
}
.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3){
margin-top: -150px;
}
.img_div{
min-height: 600px;
}
.shourenji_img_box{
min-height: 1000px;
}
}
/*900以上　start*/
@media (min-width: 901px){
#main{
top: -100px;
position: relative;
height: 300px;
overflow: hidden;
background-color: #FFF;
width: 100%;
margin: 0 auto;
display: inline-flex;
justify-content: space-around;
align-items: center;
box-shadow: 0px 5px 5px #eee;
}
main .container {
margin-top: 0;
max-width: 5760px;
width: 100%;
}
main h1{
top: 5px;
left: 0;
font-size: 3rem;
font-weight: 300;
}
.text{
width: 100%;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.text p{
display: block;
width: 80%;
margin: 0 auto;
color:hsla(359,98%,49%,1.00);
font-weight: bold;
margin-top: 237.5px;
}
.item{
width: 45%;
}
.blank{
margin-bottom: 250px;
}
.main_news{
border: 2px solid #4A546C;
border-bottom: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px; 
}
.topic_goriyo{
border: 2px solid #4A546C;
border-top: none; 
}
}
@media (min-width: 501px) {
#main{
top: -200px;
position: relative;
height: 300px;
overflow: hidden;
background-color: #FFF;
width: 100%;
margin: 0 auto;
display: inline-flex;
justify-content: space-around;
align-items: center;
box-shadow: 10px 5px 5px #eee;
}
#main_img{
  width: 500px;
  text-align: left;
}
#block , .block{
width: 80%;
margin: 0 auto;
display: block;
background-color: #fff;
padding: 1rem;
}
#flex{
width: 80%;
margin: 0 auto;
display: inline-flex;
  background-color: #fff;
  padding: 0 1rem;
}
#apply_how{
padding-top: 32px;
width: 45%;
margin: 0 auto;
text-align: left;
}
#apply_tel{
text-align: left;
width: 45%;
margin: 0 auto;
}
.flex,
.flex_rank{
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 auto;
gap: 15px;
}
.hotel_w_flex{
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto;
}
.rank_sub{
padding-left: 1em;
}
}
/*900以上　end*/
/*900以下　start*/
@media (max-width: 900px) {
.rank_sub{
font-size: 0.8em;
padding-left: 1em;
}
main{
margin-top: 0;
}
main .container{
margin: 0 auto;
max-width: auto;
width: 100%;
}
main h1{
top: 5px;
left: 0;
font-size: 1rem;
}
.main_news{
width: 90%;
margin: 0 auto;
display: block;
height: auto;
}
.main_news img{
margin: 0 auto;
display: block;
text-align: center;
}
#main img{
margin: 50px auto;
}
.anime_test {
top: 25px;
}
.item{
width: 100%;
}
.item:first-child{
margin-top: 100px;
}
.block{
width: 90%;
margin: 0 auto;
}
.block p{
font-size: 16px!important;
line-height: 18px;
margin-bottom: 1rem;
}
.topic_top
.item_img_box ,
.sub_img_box{
width: 100%;
height: auto;
}
.topic_goriyo{
display: block;
width: 90%;
height: auto;
margin: 0 auto;
margin-bottom: 25px;
}
.topic_goriyo{
border-bottom-right-radius: 0px!important;
border-bottom-left-radius: 0px!important;
}
.point_box ,
.koutei{
height: auto;
} 
.max_img{
width: 90%;
margin: 0 auto;
}
.topic_goriyo p {
text-align: left;
line-height: 1.5rem;
}
.flex_rank{
width: 100%;
display: block;
margin: 25px auto;
}
.flex_rank img{
width: 100%;
}
.hotel_w_flex{
display: block;
width: 100%;
margin: 0 auto;
}
}
/*900以下 end*/
@media screen and (min-width: 501px) and ( max-width: 900px) {
.text{
width: 90%;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.text p{
display: inline-block;
margin-left: 25px;
color:hsla(359,98%,49%,1.00);
font-weight: bold;
margin-top: 125px;
}
.item:first-child{
margin-top: 0!important;
}
}
@media (max-width: 500px) {
#main{
top: 25px;
position: relative;
height: 250px;
overflow: hidden;
background-color: #FFF;
width: 100%;
margin: 0 auto;
box-shadow: 10px 5px 5px #eee;
}
#main h2{
font-size: 32px;
margin-top: 50px;
}
main{
height: 0;
}
#main_img{
width: 100%;
text-align: center;
}
h1{
width: 200px;
}
#flex ,#block, .block{
margin: 0 auto;
display: block;
background-color: #fff;
}
#flex{
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 35px;  
text-align: left;
}
.flex {
display: block;
}
#block , .block{
padding: 1rem;  
}
.uketsuke{
display: block;
width: 100%;
margin: 0 auto;
font-size: 14px;
}
.hosoku{
width: 90%;
}
.koutei,
.apply{
right: 5px;
}
.text{
width: 90%!important;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.text p{
display: inline-block;
margin-left: 10px;
color:hsla(359,98%,49%,1.00);
font-weight: bold;
margin-top: 75px;
}
.item:first-child{
margin-top: 25px!important;/*margin-top: -25px!important;*/
}
.item_img_box{
height: auto;
}
.topic_top,

.topic_top2{
height: auto;
}
.sp_mt25{
margin-top: 25px;
}
.height215{
height: 215px!important;
}
}
.for_scroll{
color:red;
font-weight: bold;
text-align: right;
}
@media (max-width: 500px) {
th ,td{
  font-size: 14px!important;
}
.rank_up h4{
width: 90%!important;
}
}
th{
/*width: 200px;*/
}
th , td {
border: solid 1px;    
padding: 5px;
/*white-space: nowrap; */
font-size: 14px!important;
width: 225px;
}
table {
border-collapse:  collapse; 
width: 100%;            
table-layout: fixed; 
text-align: center;
margin: 10px 0;
}
.scroll table{
width:100%;
}
.scroll{
overflow-x: auto;
white-space: nowrap;
margin-bottom: 10px;
}
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb{
background: #BCBCBC;
}
.light_green_back{
background-color: #F2FBF2;
color:#664b45;
padding: 10px;
}
.event_tokuten{
background-color:#486B5C;
color: #fff;
font-weight:bold;
width:auto;
padding: 2px 15px;
display:inline-block;
text-align: center;
margin-top:10px;
margin-right:1rem;
border-radius:5px;
min-width: 75px;
}
.early{
color:#664b45;
font-weight: bold;
font-size: 1.2rem;
margin: 15px 0;
}
#early{
padding: 10px;
background-color: #F2FBF2;
margin: 10px 0;
}
.rank_up{
padding: 1em;
background-color: #e6d5b8;
margin: 25px 0;
}
.rank_up h4{
width: 95%;
background: #AF3636;
padding: 15px 0;
margin: 0 auto 25px;
color: #fff;
font-size: 1.5rem;
  border: 3px solid #c21500;
  border-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
  border-image-slice: 1;
}
.rank_title{
  border-bottom: 1px solid #c21500;
  border-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
  border-image-slice: 1;
display: block;
margin-bottom: 10px;
padding-left: 1em;
}
.rank_tokuten{
display: block;
background: #AF3636;
color: #fff;
margin: 25px auto 10px;
padding: 0 5px;
}
.tour_point{
background: linear-gradient(transparent 70%, #ffb0bc 70%); 
line-height: 45px;
font-weight: bold;
}
.tour_point_mini{
background: linear-gradient(transparent 70%, #ffb0bc 70%); 
line-height: 1.2rem;
font-weight: bold;
}
#obi{
text-shadow: 1px 1px 2px #998e4d;
display: inline-block;
position: relative;
left: 0;
top: 5px;
box-sizing: border-box;
padding: 0 12px;
margin: 0;
height: 34px;
line-height: 36px;
font-size: 26px;
letter-spacing: 0.1em;
color: white;
background: #25434d;/*background: #ec6d51;*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.obi:before {
position: absolute;
content: '';
top: 0;
left: -7px;
border: none;
height: 42px;
width: 7px;
background: #25434d;/*background: #ec6d51;*/
border-radius: 5px 0 0 5px;
}
.obi:after {
position: absolute;
content: '';
bottom: -7px;
left: -5px;
border: none;
height: 7px;
width: 5px;
background: #182c33;/*background: #4d1216;*/
border-radius: 5px 0 0 5px;
}
.hotel_arrow{
background: #c1a470;
color: #fff;
padding: 2px 5px;
position: relative;
margin-right: 1em;
}
.hotel_arrow:after{
position: absolute;
content: "";
width: 0;
height: 0;
border: 9px solid transparent;
border-left: 9px solid #c1a470;
right: -18px;
top: 1px
}
.plan_title{
font-weight: bold;
border-bottom: 2px solid #4A546C;
}
.shasen{
background-image: linear-gradient(15deg, transparent 49%, #a0a0a0 49%, #a0a0a0 51%, transparent 51%, transparent);
}
ol.circle_num{
  margin: 0;
  padding: 10px;
  background: #F4F6FB;
  width: calc(100% - 20px);
}
ol.circle_num li{
  list-style: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
  margin-bottom: 15px;
}
li .ttl_mini{
background: #4A546C;
border-radius: 5px;
color: #fff;
padding: 0 0 0 20px;
display: inline-block;
width: auto;
min-width: 50px!important;
text-align: center!important;
margin: 0 auto 0;
line-height: 1.3rem;
}