@charset "utf-8";
/* CSS Document */
header , footer , .wrap{
text-align: center;
}
.wrap{
width: 100%;
background-color:#EDF4FD;
}
#yokkaichi{
background-color:#EEFDF8;
}
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(86,91,127,0.3) 0%, rgba(86,91,127,0.6) 100%), url("../imgs/travel/travel_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;
}
p,li{
font-size: 16px!important;
}
.main_title{
color: #fff;
font-size: 32px;
transform: rotate(-10deg);
margin: 25px 0;
background-color: #FB8A9D;
width: 150px;
display: inline-block;
line-height: 54px;
height: 50px;
border-radius: 5px;
}
#main p{
color: #FB8A9D;
font-weight: bold;
font-size: 18px;
}
.text{
width: 80%;
height: auto;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
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;
display: flex;
height: auto;
justify-content: space-around;
text-align: left;
}
.main_news p{
width: 100%;
font-size: 18px;
line-height: 1.6rem;
}
.tel{
font-size: 1.5rem;
font-weight: bold;
}
.tel:before{
content: "☎" ; 
}
.uketsuke {
line-height: 1.2rem;
font-weight: bold;
color: #fff;
background-color: #c1a470;
width: 100%;
text-align: left;
padding-left: 5px;
}
h1{
width: 300px;
margin: 0 auto;
text-align: center;
font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
diaplay:inline-block;
padding: 0;
}
#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: 180px;
height: 50px;
font-size: 0.9rem;
vertical-align: middle;
line-height: 1.5rem;
background-color: #c1a470;
color: #fff;
margin: 0 0 10px 0;
padding-top: 3px;
border-radius: 5px;
font-weight: bold;
}
.plan_type{
display: inline-block;
width: 50px;
height: 21px;
align-items: center;
border: 2px solid #36A3AF;
color: #36A3AF;
padding-top: 18px;
padding-bottom: 10px;
border-radius: 5px;
margin: 0 0 10px 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: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
/*background-color: #36A3AF;*/background-color: #7A97BD;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 0;/*margin: 0 auto 10px;*/
height: auto;
}
.topic_top2{
font-size: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #36A3AF;
width: calc(100% - 20px);
text-align: center;
padding: 10px;
margin: 0px auto 10px;
height: auto;
word-break: break-all;
}
.topic_top3{
font-size: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #346A50;
width: 100%;
text-align: center;
padding: 20px 0;
margin: 0px auto 10px;
/*height: 100px;*/
}
.tour_point{
font-size: 1.2rem;
}
.item_img_box{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
text-align: right;
}
.sub_img_box{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
text-align: right;
}
.sub_img_box_flex{
display: flex;
justify-content: space-between;
gap: 5px;
}
.point_auto{
width: 100%;
height: auto;
line-height: 1.8rem!important;
}
.point_box{
width: 100%;
height: 235px;
line-height: 1.8rem!important;
}
.point_box1{
width: 100%;
height: 175px!important;
line-height: 1.8rem!important;
}
.point_box2{
width: 100%;
height: 150px;
line-height: 1.8rem!important;
}
.point_box3{
width: 100%;
height: 305px;
line-height: 1.8rem!important;
}
.gentei_tour{
line-height: 1.2rem;
font-weight: bold;
color: #fff;
/*background-color: #36A3AF;*/background-color: #7A97BD;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 10px auto;
}
.green{
background-color: #1C8660;    
}
.img_box{
display: flex;
padding: 0 auto;
}
.img_box img{
margin: 0 auto;
}
.item{
width: 30%;
}
.item img{
margin: 0 auto;
}
.item ul li{
font-size: 14px;
line-height: 1.5rem;
}

.koutei {
padding: 10px;
position: relative;
margin: 2rem auto;
padding-top: 10px;
width: calc(100% - 20px);
border:  solid 2px #7A97BD;
color: #000;
font-size: 14px;
line-height: 1.5rem;
text-align: center;
min-height: 120px;/*min-height: 285px;*/
height: auto;
}
.koutei p{
display: inline-block;
width: 95%;
text-align: left;
font-size: 14px!important;
line-height: 1.5rem;
}
.koutei2{
min-height: 450px;
}
.koutei-title {
position: absolute;
left: 20px;
top: -15px;
padding: 0 .5em;
font-weight: bold;
font-size: 1.1em;
color: #fff; 
/*background: #36A3AF;*/background:#7A97BD;
}
.ct_koutei_p{
position: relative;
}
.ct_koutei_p:after{
position: absolute;
content: "【－昼－】";
bottom: 0;
right: 0;
}
.apply {
padding: 10px 5px 5px 5px;
position: relative;
margin: 2rem auto;
padding-top: 10px;
width: 100%;
/*border: 2px solid #36A3AF;*/border: 2px solid #7A97BD;
color: #000;
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
.apply-title {
position: absolute;
left: 15px;
top: -15px;
padding: 0 .5em;
font-weight: bold;
font-size: 1.1em;
color: #fff; 
/*background: #36A3AF;*/background: #7A97BD;
}
.hosoku {
position: relative;
margin: 0 auto 1rem;
padding-top: 10px;
padding-left: 1rem;
padding-right: 1rem;
width: 95%;
border: 2px solid #727272;
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: #727272;
}
#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: 100%;
margin: 0 auto;
}
.mark{
display: flex;
width: 100%;
justify-content: space-between;
}
.back_100_w{
width: 100%;
margin: 0 auto;
background: #fff;
}
.t_r{
text-align: right;
display: block;
}
.month{
float: left;
width: 50px!important;
height: 50px;
line-height: 50px!important;
color: #7A97BD;
background: #fff;
border-radius: 5px;
/*border: 1px solid #fff;*/
margin-left:10px;
margin-top: 25px;
text-align: center;
}
.month span{
font-size: 1.3rem;
}
.topic_ttl{
display: inline-block!important;
/*width: 85%!important;*/
color: #fff;
height: 70px;
}
table.travel_table{
margin:0 auto;
text-align: left;
}
table.travel_table td{
padding: 5px;
}
table.table_mini{
text-align: left;
}
table.table_mini td{
padding: 5px;
}
.travel_b{
background: #7A97BD;
color: #fff;
line-height: 2rem;
}
.travel_bb{
border-left: 1px solid #101010;
border-right: 1px solid #101010;
border-bottom: 1px solid #101010;
}
@media screen and (min-width: 1301px) {
.ad_50{
margin: 50px 0;
}
.ad_mT150{
margin-top: 150px;
}
}
@media screen and (min-width: 1301px) and ( max-width: 1600px) {
.koutei2{
height: 524px!important;
}
}
@media screen and (min-width: 1001px) and ( max-width: 1300px) {
.koutei2{
height: 600px!important;
}

}
@media screen and (min-width: 901px) and ( max-width: 1000px) {
.koutei2{
height: 720px!important;
}
}
@media screen and (min-width: 901px) and ( max-width: 1300px) {
.topic_top{
margin: 150px auto 10px;
font-size: 14px;
}

.topic_top3{
margin: 0 auto 10px;
font-size: 14px;
height: 50px;
}
.wrap_event .topic_top2{
margin: 0 auto 10px!important;
}
.topic_top2{
margin: 125px auto 10px;
font-size: 14px;
height: 125px;
}
.item_img_box {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
}
.sub_img_box {
height: auto;
}
.midium{
display: block;
width: 100%;
height: 40px;
}
.point_box,
.point_box1,
.point_box3{
height: auto!important;
}
.point_box{
height: 550px;
}
.point_box2{
height: 185px!important;
}
#zenno_1 .point_box2,
#zenno_2 .point_box2,
#zenno_3 .point_box2{
height: 250px!important;
}
.koutei{
height: auto;
}
.gentei_tour {
font-size: 12px;
}
.text{
width: 100%!important;
height: auto;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
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;
}
.block,
#block{
width: 95%;
}
.flex,
#flex{
width: 100%;
padding: 0 1rem;
}
.ad_mT150{
margin-top: 150px;
}
}
@media screen and (min-width: 901px) and ( max-width: 1500px) {
.topic_top{
height: auto;
}
.topic_ttl{
/*width: 70%!important;*/
}
.ct_koutei_p:after{
bottom: -22px!important;
}
}
/*900以上　ここから*/
@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: 10px 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;
}
.main_news{
width: 90%;
margin: 0 auto;
display: flex;
height: auto;
justify-content: space-around;
text-align: left;
gap: 15px;/*秋冬のみ*/
}
.text{
width: 90%!important;
height: auto;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
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: 100%;/*秋冬のみ　以前30％*/
background: #fff;
padding: 15px;
}
#flex,
.flex{
width: 80%;
margin: 0 auto;
display: inline-flex;
background-color: #fff;
padding-left: 1rem;
padding-right: 1rem;
}
.item {
/*border: 2px solid #6AC6D0;*/border: 2px solid #7A97BD;
border-radius: 20px;
}
.wrap_event .item {
border: 2px solid #346A50!important
}
.yokkaichi{
border: 2px solid #1C8660;
}
.travel_flex{
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.travel_left,
.travel_right{
width: 49%;
}
.kikaku_jisshi_flex{
display: flex;
text-align: left;
align-items: flex-start;
justify-content:flex-start;
gap: 50px;
}
.club_img{
margin-bottom: 25px;
position: relative;
}
.club_img:before{
position: absolute;
content: "|";
top: 13px;
left: -15px;
font-size: 75px;
line-height: 80px;
}
.kikaku_jisshi{
border-left: 5px solid #565656;
}
table.table_mini{
width: 45%;
}
}
/*900以上　ここまで*/
/*900以下　ここから*/
@media (max-width: 900px) {
main{
margin-top: 0;
}
main .container{
margin: 0 auto;
max-width: auto;
width: 100%;
}
main h1{
top: 5px;
left: 0;
font-size: 1rem;
}
#main h2{
margin-top: 20px!important;
}
.main_news{
width: 90%;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
height: auto;
text-align: left;
}
.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;
}
.topic_top{
margin: 50px auto 10px;
}
.item_img_box ,
.sub_img_box {
width: 100%;
height: auto;
}
.point_box ,
.koutei{
height: auto;
} 
.max_img{
width: 100%;
margin: 0 auto;
}
#block,
.block,
#flex,
.flex{
width: 90%;
padding: 1rem;
margin: 0 auto;
background: #fff;
}
.travel_flex{
display: block;
}
.kikaku_jisshi_flex{
text-align: center;
gap: 15px;
}
.kikaku_jisshi_flex p{
margin-left: 10px;
}
.club_img{
border-top: 2px solid #000;
margin-bottom: 25px;
}
table.travel_table td{
display: block;
width: 100%;
}
.kikaku_jisshi{
border-top: 2px solid #565656;
}
table.table_mini{
width: 100%;
}
}
/*900以下　ここまで*/
@media screen and (min-width: 501px) and ( max-width: 8999px) {
#flex,.flex{
display: flex;
}
}
/*500以上　ここから*/
@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: 0px 5px 5px #eee;
}
#main_img{
  width: 500px;
  text-align: left;
}
#block,
.block{
width: 80%;
margin: 0 auto;
display: block;
background-color: #fff;
padding: 1rem;
}

#apply_how,
.apply_how{
width: 45%;
margin: 0 auto;
text-align: left;
}
#apply_tel,
.apply_tel{
text-align: left;
width: 45%;
margin: 0 auto;
}
#main_flex{
display: flex;
align-items: center;
gap: 50px; 
}
}
/*500以上　ここまで*/
@media screen and (min-width: 501px) and ( max-width: 900px) {
.text{
width: 90%!important;
height: auto;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
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;
}
}
/*500以下　ここから*/
@media (max-width: 500px) {
#main{
top: 25px;
position: relative;
height: 285px;
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{
margin: 0 auto;
display: block;
background-color: #fff;
}
#flex,
.flex{
padding-left: 1rem;
padding-right: 1rem;
padding-top: 25px; 
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;
height: auto;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
display: block;
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: 0!important;
}
.mark{
display: block;
}
#flex,
.block,
.flex{
width: 90%;
margin: 0 auto;
background: #fff;
padding-top: 50px;}
.flex{
padding-left: 1rem;
}
.block p,
.apply{
width: 90%;
margin: 0 auto 25px;
}
#main_flex{
display: block;
}
.h4_white{
margin-top: 5px;
}
.sp_block{
display: block!important;
}
.topic_ttl{
/*width: 65%!important;*/
}
}
/*500以下　ここまで*/
.anime_test {
display:  inline-block;                
margin: 0 auto;                
position:  relative;            
animation: anime1 1s ease;  
}
@keyframes anime1 {
  0% {
      opacity:  0;              
      right: 50px;                  
  }
  100% {
      opacity:  1;               
      right: 0;                     
  } 
}
@media screen and (min-width: 1301px) and ( max-width: 1491px) {
.topic_top2{
height: 120px;
}
}
@media screen and (min-width: 1301px) and ( max-width: 1516px) {
.adjust_title{
font-size: 15px;
}
}
@media screen and (max-width: 417px) {
.adjust_title{
font-size: 15px;
}
}
@media screen and (max-width: 500px) {
.adjust_title_sp{
height: 115px;
}
}
.wavy_line:before{
content: "～";
}
.wavy_line:after{
content: "～";
}
@media (min-width: 1600px) {
.for_1600{
display: none;
}
}
#obi_maru{
position: relative;
}
.obi_maru{
font-size: 1rem;
font-weight: bold;
line-height:1.6rem;
position: absolute;
text-align: center;
padding-top: 32px;
padding: 5px;
z-index: 10;
top: -30px;
right: -5px;
display: inline-block;
color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #c1a470;
}
.tour_point{
background: linear-gradient(transparent 70%, #ffb0bc 70%); 
line-height: 45px;
font-weight: bold;
}
/*event 導入 start*/
.wrap_event{
width: 100%;
background-color: #E9F5EF!important;
}
#top_link ul {
display: flex;
width: 90%;
justify-content: space-around;
margin: 0 auto;
padding: 0;
}
#top_link ul a{
background-color: #346A50;/*background-color: #E9F5EF;*/
color: #fff;
border-radius: 5px;
display: inline-block;
margin: 15px auto;
padding: 5px 10px 5px 5px;
}
a{
text-decoration: none;
}
#top_link ul a li{
color: #E9F5EF;/*color: #346A50;*/
font-size: 1rem;
line-height: 1.5rem;
text-decoration: none!important;
list-style: none;
width: 100%;
margin: 0 auto;
padding: 5px;
}
#top_link ul a li:after{
content: " ▼";
text-align: right;
}
#top_link ul a li:hover{
color: #346A50;/*color:#E9F5EF;*/
}
#top_link ul a:hover{
color:#E9F5EF;
background-color:#E9F5EF;/*background-color:#346A50;*/
text-decoration: none;
opacity: 0.9;
}
#top_link .blue{
background-color:#7A97BD;/*background-color:#EBF3FC;*/
}
#top_link .blue li{
color: #EBF3FC;/*color: #7A97BD;*/
}
a.blue:hover,
a.blue li:hover{
background-color:#EBF3FC!important;/*background-color:#7A97BD!important;*/
color:#7A97BD!important;
}
@media (min-width: 901px) {
.wrap_event .item{
width: 40%!important;
}
}
@media (max-width: 900px) {
#top_link ul {
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
#top_link ul a li{
width: 100%;
}
#top_link ul a{
width: 100%;
}
}
.dark_green,
.wrap_event .gentei_tour,
.wrap_event .topic_top2{
background-color: #346A50!important;
}
.wrap_event .plan_type{
border: 2px solid #346A50!important;
color: #346A50!important; 
}
.wrap_event .koutei-title{
background-color: #346A50!important;
}
.wrap_event .koutei{
border: 2px solid #346A50!important;
text-align: left;
}
.tit_sub{
background-color: #7A97BD;
}
@media (min-width: 501px) {
.tit_sub{
color: white;
font-weight: bold;
font-size: 2rem;
padding: 50px 0!important; 
text-align: center; 
clear: both;
}
.wrap_event .apply_tel{
width: 100%!important;
}
}
@media (max-width: 500px) {
.tit_sub{
color: white;
font-weight: bold;
font-size: 20px;
line-height: 35px;
padding: 30px 0!important; 
text-align: center; 
clear: both;
}
}
/*#special{
position: relative;
}
#special:before{
position: absolute;
content: "S席入場券付き　クラブツ－リズム貸切公演";
}*/
#special {
 position: relative;
}
#special:before
{
content: "S席入場券付き クラブツ－リズム貸切公演";
 position: absolute;
 font-weight: bold;
/*  font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;*/
  line-height: 2rem;
  font-size: 1rem;
  color: #fff;
  top: -30px;
  right: 5px;
  text-align: center;
  background:#A20007;
  width: calc(100% - 20px);
  border: 3px solid #c1a470;
  border-radius: 10px;
}