@charset "UTF-8";
/********************************

 CAFFEE

 ********************************/
/* * {
	outline: 1px solid #ff0000;
} */
/*******************/
/*   common        */
/*******************/
html {
	/* 	さわらぎゴシック */
	font-family:"Sawarabi Gothic",sans-serif
}
html * {
	box-sizing: border-box;
}
body {
	background-color: /*#ffedab*/#e7e7e7;
	margin: 0;
}
header p {
 /*align-items: center;*/
	padding-right: 20px;
}
.wrapper {
	font-size: 16px;
	line-height: 1.6;
	color: #2f2f4b;
	max-width: 1100px; /*960px;*/
	margin: 0 auto 0 auto;
}
img {
	/* wrapperで設定した幅にイメージを合わせる(決まり文句) */
	max-width: 100%;
	height: auto;
}
/*******************/
/*   header        */
/*******************/
.kujira_logo{
	text-align:center;
	margin-bottom:15px;

}
.tel_num{
	text-align:end;
	font-size:150%;
	color: #3b82c4;
	background-color: /*#92cb97*/#990000;
	margin:0 0 10px 0;
}
/*******************/
/*  hambuger menu  */
/*******************/
/**スマホ用ハンバーガー三本線**/
/*.sp {
	display: none;
}*/
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: /*60*/50px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: /*#3584bb*/rgba(231,231,231,0.95);
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #000000;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: /*#3584bb*/#e7e7e7;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px /*#ffffff*/#000000;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:/*#ffffff*/#000000;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px /*#ffffff*/#000000;
    border-right: solid 2px /*#ffffff*/#000000;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
.menu-content {
    width: 100%;
    height: 60%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: /*#3584bb*/#e7e7e7;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}
/* ????? */
@media(min-width:768px){
	.sp{
		display: none;
	}
}
/*******************/
/*   navi menu     */
/*******************/
.navi_lists {
	display: flex;
	margin: 10px 0 0 0;
	padding: 0;
}
.navi_list {
	width: 30%;
	height: 40px;
	background-color: /*#92cb97*/#990000;
	position: relative;
	transition: all .3s;
	list-style-type: none;
}
.navi_list:hover {
	background-color: #3b82c4;
}
.navi_list:not(:first-child)::before {
	content: "";
	width: 1px;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .3s;
}
.navi_list:hover::before {
	background-color: #3b82c4;
}
.navi_list a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: /*#1b4059*/#e7e7e7;
	font-size: 15px;
	letter-spacing: 0.05em;
	font-weight: 600;
	transition: all .3s;
}
/*.navi_list a {
	color: #ffff
}*/
.navi_list:hover a {
	color: #fff;
}
/*******************/
/*  dropdown menu  */
/*******************/
.dropdown_lists {
	display: none;/*デフォルトでは非表示の状態にしておく*/
	width: 100%;
	position: absolute;
	top: 40px;
	left: 0;
}
.navi_list:hover .dropdown_lists {
	display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown_list {
	background-color: #004d80;
	height: 40px;
	transition: all .3s;
	position: relative;
	list-style-type: none;
}
.dropdown_list:not(:first-child)::before{
	content: "";
	width: 100%;
	height: 1px;
	background-color: #3492d1;
	position: absolute;
	top: 0;
	left: 0;
}
.dropdown_list:hover {
	background-color: #003558;
}
.dropdown_list a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-decoration: none;
	position: relative;
}
.dropdown_list a::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(135deg);
	position: absolute;
	right: 15px;
	top: calc(50% - 5px);
}
/*******************/
/*   footer        */
/*******************/
.footer_nav {
	display: flex;
	align-items: right;
	justify-content: right;
	background-color: /*#f5a500*/#e7e7e7;
}
.footer_nav p {
	padding-right: 15px;
}
.footer_space {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color:/*#990000*/#76777f;
}
.footer_logo {
	padding-left: 10px;
}
.footer_text {
	padding: 20px 50px 0 0;
	color: #fff;
}
/* TopPageへ */
.gotop{
	display: block;
	/*width: 60px;
	height: 60px;
	box-sizing: border-box;
	background: #FFF;
	border: 1px solid #999;
	padding-top: 30px;
	text-align: center;
	letter-spacing: -1px;
	font-size: 85%;
	text-decoration: none;
	color: #333;
	opacity: 0.5;*/
	position: fixed;
	bottom: 20px;
	right: 5%; /*10px;*/
	z-index: 10000;
}
.gotop::before{
	content: "";
	display: block;
	/*border-top: 2px solid #333;
	border-right: 2px solid #333;
	width: 25%;
	height: 25%;
	top: 25%;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	transform: rotate(-45deg); */
}
.gotop:hover{
	opacity: 1;
}

/*******************/
/*   index         */
/*******************/
/****** メインビジュアルスライダー全体設定 ***********/
.css-carousel-slider3 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider3 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider3 .slide-wrap {
    width: 300%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider3 {
    0% { transform: translateX(0); }

    27.3% { transform: translateX(calc(1 / 3 * -100%)); }
    33.3% { transform: translateX(calc(1 / 3 * -100%)); }

    60.6% { transform: translateX(calc(2 / 3 * -100%)); }
    66.6% { transform: translateX(calc(2 / 3 * -100%)); }

    94% { transform: translateX(calc(3 / 3 * -100%)); }
    100% { transform: translateX(calc(3 / 3 * -100%)); }
}

@keyframes css-carousel-slider-main3 {
    0% { transform: translateX(100%); }
    66.6% { transform: translateX(100%); }
    94% { transform: translateX(0%);}
}
.slide{
	position: relative;
}
.slide p{
	position: absolute;
	color:whitesmoke;
	font-weight: bold;
	font-size: 2.5vw;
	top: 70%;
	left: 5%;
	margin: 0;
	background-color:/*rgba(245,165,0,0.6)*/rgba(153,0,0,0.45);
	/*background-color:rgba(197,6,47,0.5);*/
	line-height: 2;
	padding: 10px 20px;
}
.slide img{
	width: 100%;
}
/********ニュース********/
#top_news{
	border-bottom: 3px double #3f5170;
	font-family: "Times New Roman", Times, "serif";
	margin-bottom: 0px;
	margin-left:5px;
}
.news{
	margin-top: 0px;
	margin-bottom: 20px;
}
.new_1::before{
	content:"NEW!";
	font-weight: bold;
	color: #990000;
}
.year{
	font-weight: bold;
	font-size: 2rem;
	padding-bottom: 5px;
	/*letter-spacing: 0.5em;*/
}
.news th,td{
	text-align: left;	
}
.news th{
	letter-spacing: 0.2em;
}
.news td{
	padding-left: 20px;
}
.news img{
	padding-right: 10px;
}

/*******************/
/*   about         */
/*******************/


.about-mainvisual p{
	position: absolute;
	color: #666666;
	font-weight: bold;
	font-size: 3.5vw;
	margin: 0;
	background-color:rgba(230,230,230,0.9);
	/*background-color:rgba(197,6,47,0.5);*/
	line-height: 2;
	padding: 10px 50px;
	align-items: center;
}
.p-about{
	display: flex;
	justify-content: center;
	align-items: center;
}
h3{
	font-size: 22px;
	padding:0 ;
	margin:0;
}
.historys{
	display:flex;
}

.about{
	display: flex;
	padding:50 0 0 0;
}
.accessmap{
	display:flex;
}
.history-photo1{
	padding: 80px 0 0 0 ;
}
.history-text{
	flex: 3;
	

}
.text-center1{
		padding: 60px 0 0 0 ;
	flex: 1;
}
.text-center1-2{
	display: none;
}
.now{
	flex:3;
	
}
.now-text2{
	padding: 60px 0 0 0 ;
}

.image{
	flex: 3;
	padding: 50px 0 0 0 ;
}
.text-center2{
	flex: 1;
	padding: 0 ;
}
.text-center2-2{
	display: none;
}
.about-text{
	flex:3;
	padding: 50px 0 0 0 ;
}
iframe{
		
	max-width: 100%;
	
}
.map{	
	flex:3;
	padding: 50px 0 0 0 ;
}
.text-center3{
	flex:1;
	margin: 0;
	padding: 0 ;
}

.text-center3-2{
	display: none;
}
.timetable{
	flex:3;
	padding: 50px 0 0 0 ;
}
/*******************/
/*   menu          */
/*******************/

/* main visual */
.menu-top-box p{
	position: absolute;
	color: #666666;
	font-weight: bold;
	font-size: 3.5vw;
	margin: 0;
	background-color:rgba(230,230,230,0.9);
	/*background-color:rgba(197,6,47,0.5);*/
	line-height: 2;
	padding: 10px 50px;
	align-items: center;
}
.p-main{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* section lunch */
.lunch-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
}
.p-lunch{
	flex: 3;
}
.p-lunch-text{
	flex: 1;
}
.text-lunch{
	flex: 3;
}
		
/* section cafe */
.cafe-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
}
.text-cafe{
	flex: 3;
}
.p-cafe-text{
	flex: 1;
}
.p-cafe{
	flex: 3;
}

/* section bar */
.bar-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
}
.p-bar{
	flex: 3;
}
.p-bar-text{
	flex: 1;
}
.text-bar{
	flex: 3;
}

/* section drink */
.drink-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
}
.text-drink{
	flex: 3;
}
.p-drink-text{
	flex: 1;
}
.p-drink{
	flex: 3;
}

/* その他 */
.m-title
{
	padding-left: 20px;
}
.none{
	display: none;
}
.text-lunch{
	background-color:#F9F9E1;
	padding-top: 75px;
	padding-bottom: 75px;
	height: 499.71px;
}
.text-cafe,.text-bar,.text-drink{
	background-color:#F9F9E1;
	padding-top: 100px;
	padding-bottom: 100px;
	height: 499.71px;
}
/*******************/
/*   contact       */
/*******************/
section {
	margin: 20px;
}
form div {
	padding:12px;
	border-bottom: 1px dashed #bec2c7;
}
.c_lunch_menu {
	width: 100%;
	display: flex;
	align-items: center;
}

.c_lunch_menu img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 600px;
}
.c_title {
	margin-top: 50px;
	border-bottom: 3px dashed #bec2c7;
}
.c_contact {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tel_no {
	text-align: center;
	color: #3b82c4;
	font-size: 120%;

}
.top_mark {
	margin: 0 20px 0 0;
}
.today_menu {
	padding-bottom: 40px;
}
select {
	width: 30em;
}
input[name="subject"] {
	width:30em;
}
textarea {
	width:30em;
	height:6em;
}
input[type="submit"] {
	margin: 20px,0;
	width:30em;
}
/*******************/
/*    manual       */
/*******************/
.template_h1 {
	/*border-bottom: solid 3px;*/
}
.template_h1, .template_h2 {
	/*color: #3b82c4;*/
	padding-left: 10px;	
	margin-bottom: 0;
}
section p {
	padding-left: 20px;
	margin-top: 0;
}
.color_list {
	margin: 10px 0 20px 20px;
}
/*****  ここからはレスポンシブ対応。PC版が完成してから作成する予定  *****/
/*******************/
/*   respontive    */
/*******************/
@media (max-width:767px) {

	/*.sp{
		display: block;
	}*/
	/*******************/
	/*   header        */
	/*******************/
	.navi_wrap {
		display: none;
	}
	.kujira_logo img { 
		width: 250px;
	}
	.tel_num {
		text-align: center;
	}
	/*******************/
	/*   footer        */
	/*******************/
	.gotop{
	right: 0px;
	}
	.footer_space {
		display: block;
	}
	.footer_logo {
		text-align: center;
		padding-top: 10px
	}
	.footer_text {
		text-align: center;
		padding: 0;
	}
	/*******************/
	/*   index         */
	/*******************/
	.slide p{
	display:none;
	}
	.news{
	text-align: left;
	margin-left: 5px;
	}
	.news th,td{
	display: block;
	width: 100%;
	margin-left: 5px;
	}
	/*.news td{
	display: block;
	width: 100%;
	}*/
	
	/*******************/
	/*   about         */
	/*******************/
/*about  -  */
	.historys {
	display: block;
	margin-bottom: 10;
	background-color: aliceblue;
	}
	.history-photo1 {
	margin: 0;
	padding: 0;
	width: 100%;
	}
	.history-text {
	width: 100%;
	}
	.text-center1{
	display: none;
	}
	.text-center1-2{
	display: block;
	width: 100%;
	transform: scale(0.5);
	}
	.kujira-line{
	display:block;
	}
	.now {
	display: block;
	}
	.now-photo {

	margin-bottom: 10;

	width: 100%;
	}
	.now-text {
	width: 100%;
	padding:0;
	}
	
	.about {
	display: block;
	
	
	}
	.about-image {
	display: none;
	}
	.about-text {
	width: 100%;
	padding:5 ;
	}
	
	.ABOUT{
		display: none;
	}
	.text-center2{
		display: none
	}
	.text-center2-2{
		display: block;
		transform: scale(0.5);
		width: 100%;
		height: 40px;
		padding:0 0 20 0;
	}
	.accessmap {
	display: block;
	background-color: aliceblue;
	
	}
	.map{
	padding: 0;
	}
	iframe {
		width: 100%;
		aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
	}
	  .text-center3{
		display: none
	}
	.text-center3-2{
		display: block;
		transform: scale(0.5);
		width: 100%;
		height: 100px;
	}
	.timetable {
	margin-right: 0;
	width: 100%;
	padding:0;
	margin:0;
	}
	.ACCESS{
		display: none;
	}	/*******************/
	/*   menu          */
	/*******************/
	/* 全体 */
	.lunch-box,.cafe-box,.bar-box,.drinkb-box{
		padding: 0;
	}
	.lunch-box,.bar-box{
		display: block;
	}
	
	/* 縦向きテキスト画像非表示 */
	.p-lunch-text,.p-cafe-text,.p-bar-text,.p-drink-text{
		display: none;
	}

	/* 横向きテキスト画像表示 */
	.none{
		display: block;
		transform: scale(0.5);
		width: 100%;
		height: 40px;
		padding:0 0 20 0;
	}	
	
	/* 順番並べ替え */
	.none-p-cafe,.none-p-drink{
		order: 1;
	}
	.text-cafe,.text-drink{
		order: 3;
	}	
	.p-cafe,.p-drink{
		order: 2;	
	}
	.cafe-box,.drink-box{
		flex-direction: column;
	}
	.text-lunch{
		padding-top: 30px;
		padding-bottom: 30px;
		height: 500px;
	}
	.text-cafe,.text-bar,.text-drink{
		padding-top: 50px;
		padding-bottom: 80px;
		height: 450px;
	}

	/*******************/
	/*   contact       */
	/*******************/
	.c_lunch_menu {
		display: block;

	}
	.c_lunch_menu p{
		padding: 10px 0 0 0;
	}
	select {
		width: 100%;
	}
	input[name="subject"] {
		width: 100%;
	}
	textarea {
		width: 100%;
	}
	input[type="submit"] {
		margin: 20px 0;
		width: 100%;
	}

}