@charset "utf-8";
/* CSS Document */
header , footer , .wrap{
text-align: center;
}
.wrap{
width: 100%;
background-color: #FDF6F0;
}
header{
width: 100%;
height: 300px;
}
nav{
font-size: 1em;
font-weight: 500;  
}
p, li{
font-size: 16px!important;
}
main{
position: relative;
top: 0;
width: 100%;
height: 200px;
margin: 0 auto;
}
.event_back{
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 0;
color: rgba(186,79,96,1.00)
}

#main{
background-image:  linear-gradient(to bottom, rgba(252,162,146,0.70) 0%, rgba(255,255,255,0)100%),url("../imgs/topics/topics_top.jpg");/*rgba(116,208,212,0.5) 0%*/
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom; 
color:rgba(252,205,146,1.00);
}
#main h2{
color: #fff; 
font-size: 36px;
text-shadow: #000 1px 0 5px;
}
#main h4{
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: #78418E;
width: 150px;
display: inline-block;
line-height: 54px;
height: 50px;
border-radius: 5px;
}
#main p{
color: #78418E;
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.8rem;
}
.tel{
font-size: 1.5rem;
font-weight: bold;
}
.tel:before{
content: "$0024260E" ; 
}
.uketsuke {
line-height: 1.2rem;
font-weight: bold;
color: #fff;
background-color: #C0A000;
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;
} 
.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 #A6709D;
color: #A6709D;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
margin: 0 0 10px 0;
font-weight: bold;
}
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: #ba4f60;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 250px auto 10px;
height: 100px;
}
.topic_top2{
font-size: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #ba4f60;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 0px auto 10px;
height: 50px;
}
.topic_top3{
font-size: 18px;
line-height: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #ba4f60;
width: 100%;
text-align: center;
padding: 5px 0;
margin: 0px auto 10px;
/*height: 50px;*/
}
.tour_point{
font-size: 1.2rem;
}
.item_img_box{
width: 100%;
height: 290px;
overflow: hidden;
margin-bottom: 10px;
}
.sub_img_box{
width: 100%;
height: 180px;
overflow: hidden;
margin-bottom: 10px;
}
.point_box{
width: 100%;
min-height: 150px;
}
.gentei_tour{
line-height: 1.2rem;
font-weight: bold;
color: #fff;
background-color: #ba4f60;
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: 30%;
}
.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 #ba4f60;
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: #A6709D;
}
.apply {
padding: 10px 5px 5px 5px;
position: relative;
margin: 2rem auto;
padding-top: 10px;
width: 100%;
border: 2px solid #A6709D;
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: #A6709D;
}
.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{
font-size: 20px;
line-height: 1.2rem;
font-weight: bold;
text-align: left;
margin: 10px 0 5px 0;
}
#block p{
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
.max_img{
width: 50%;
margin: 0 auto;
}
.point_box2{
width: 100%;
min-height: 350px;
position: relative;
}
@media (min-width: 1300px){
.point_box2{
height: 200px!important;
}
}

@media screen and (min-width: 901px) and ( max-width: 1600px) {
.item_img_box{
height: 210px;
}
.point_box{
height: 185px;
}
.topic_top2{
height: auto!important;
}
}
@media screen and (min-width: 901px) and ( max-width: 1300px) {
.topic_top{
margin: 150px auto 10px;
font-size: 14px;
height: 75px;
}
.topic_top2 {
margin: 150px auto 10px;
font-size: 14px;
/*height: 75px;*/height: auto;/*height: 105px;*/
}
.topic_top3{
margin: 0 auto 10px;
font-size: 14px;
height: 105px;
}
.item_img_box {
width: 100%;
height: 185px;
overflow: hidden;
margin-bottom: 10px;
}
.sub_img_box {
height: 125px;
}
.midium{
display: block;
width: 100%;
height: 40px;
}
.point_box{
min-height: 290px;
}
.koutei{
height: 425px; 
}
.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;
}
}
@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;
}
}
/*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: 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;
}
.main_news{
width: 80%;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-around;
text-align: left;
gap: 15px; 
}
.text{
width: 100%;
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: 30%;
background: #fff;
padding: 15px;
border: 2px solid #ba4f60;
border-radius: 20px;
}
}
/*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_news{
width: 85%;
margin: 0 auto;
background-color: #fff;
display: block;
height: auto;
text-align: left;
padding: 25px 1rem;
}
.main_news img{
margin: 0 auto;
display: block;
text-align: center;
}
#main img{
margin: 0 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: 90%;
margin: 0 auto;
}
.topic_top2,
.topic_top3{
height: auto;/*height: 50px;*/
}
}
/*900以下　ここまで*/
/*500以上　ここから*/
@media (min-width: 501px) {
#main{
top: -200px;
position: relative;
height: 300px;
overflow: hidden;
background-color: #ba4f60;
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{
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 {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
}
/*500以上　ここまで*/
/*500以下　ここから*/
@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;
}
.main_news{
padding: 50px 1rem;
}
.topic_top2 {
font-size: 15px;
}
h1{
width: 200px;
}
#flex ,#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{
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: -25px!important;
}
.new{
margin-left: 1rem;
}
}
/*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;                
  } 
}
.tenpo{
padding: 1rem;
}
.tenpo h4,
.tenpo p{
margin: 5px auto;
}
.purple{
color: #FBBD72;
font-size: 1.2rem;
margin-bottom: 25px!important;
border-bottom: 1px solid #eee;
}
.dark_red{
color: #ba4f60;
font-size: 1.2rem;
margin-bottom: 25px!important;
border-bottom: 1px solid #eee;
}
.dred{
color: #71000e;
font-size: 1.2rem;
margin-bottom: 25px!important;
border-bottom: 1px solid #eee;
}
.g_yellow{
color: #DDCC25;
font-size: 1.2rem;
margin-bottom: 25px!important;
border-bottom: 1px solid #eee;
}
.line_1{
height: 215px;
}
.line_2{
height: 325px;
}
.line_3{
height: 425px;
}
.line_4{
height: 485px;
}
.line_5{
height: 550px;
}
@media (max-width: 1200px) {
.line_1,
.line_2,
.line_3,
.line_4,
.line_5{
height: auto;
}
}
.comment_01,
.comment_02,
.comment_03,
.comment_04,
.comment_05{
position: relative;
}
.comment_01:after{
content: "写真はイメージです。季節と仕入状況により内容は変わります。";
position: absolute;
bottom: 5px;
right: 5px;
font-size: 11px;
}
.comment_02:after {
    content: "写真はイメージです";
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
/*.comment_03:before {
    content: "青海原膳3,080円";
    position: absolute;
    bottom: 25px;
   right: 0;

}*/
/*.comment_03:after {
    content: "冷やし茶蕎麦膳2,750円";
    position: absolute;
    bottom: 25px;
   left: 0;
}*/
.comment_04:after {
    content: "月替りコースとなります。（写真は８月）";
    position: absolute;
    bottom: 5px;
    right: 20px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
.comment_05:after {
    content: "季節の御膳3,300円（通常料金3,800円）\A　※その他の料金は5％割引";
    position: absolute;
    white-space: pre;
    bottom: 5px;
    right: 20px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
#top_link ul {
display: flex;
width: 90%;
justify-content: space-around;
margin: 0 auto;
padding: 0;
}
#top_link ul a{
background-color:#F9DCF4;
color: #fff;
border-radius: 5px;
display: inline-block;
margin: 15px auto;
padding: 5px;
}
a{
text-decoration: none;
}
#top_link ul a li{
color: #A6709D;
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:#FFF7FD;
}
#top_link ul a:hover{
color:#FFF7FD;
background-color:#A6709D;
text-decoration: none;
opacity: 0.9;
}

@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%;
}
}

.tit_sub{
background-color: #ba4f60;
}
@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;
}
.item_bdr{
border: 2px solid #71000e;
}
}
@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;
}
}

.new{
	background-color:rgba(225,5,9,0.6);
	font-weight: bold;
	color: #FFFFFF!important;
	padding: 5px;
	width: 60px;
	font-size: 110%!important;
    line-height: 1rem;
}
.shopping .item{
/*border-style: none;*/border: 2px solid #DDCC25;
}

.shopping .topic_top2,
.shopping .gentei_tour{
background-color: #DDCC25;
}

#top_link ul {
display: flex;
width: 90%;
justify-content: space-around;
margin: 0 auto;
padding: 0;
}
#top_link ul a{
background-color:#FDF6F0;
color: #fff;
border-radius: 5px;
display: inline-block;
margin: 15px auto;
padding: 5px;
}
a{
text-decoration: none;
}
#top_link ul a li{
color: #ba4f60;
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:#FDF6F0;
}
#top_link ul a:hover{
color:#FDF6F0;
background-color:#ba4f60;
text-decoration: none;
opacity: 0.9;
}

a#shop_y li{
color: #DDCC25!important;
}
#top_link ul a#shop_y li{
color: #DDCC25!important;
border-radius: 5px;
display: inline-block;
}
#top_link ul a#shop_y:hover{
background-color:#DDCC25;
color: #fff;
}
#top_link ul a#shop_y li:hover{
color: #fff!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%;
}
}

.tit_sub{
background-color: #ba4f60;
}
@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;
}
}