/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 30 2025 | 07:20:51 */
/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 


#main h1{
	display:none;
}

/* ふわっと */
.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}

.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/* PHPコード */
.news-loop{
	display:flex;
	flex-wrap:wrap;
}

.loop{
   	position:relative;
    width: 30%;
    padding: 10px;
    margin: 5px auto;
    background-color: #fff;
    border: 1px solid #0C7974;
    border-radius: 10px;
}

.loop p {
	margin-bottom:0;
}

.eyechatch{
	text-align:center;
	margin-top: 30px;
}

.news-day{
	position: absolute;
    top: 10px;
    left: 10px;
    color: #0C7974;
    font-size: 15px;
   	font-weight:700;
}

/* ページトップへ */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #54ad6f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #54ad6f;
    border-right: 3px solid #54ad6f;
    transform: translateY(20%) rotate(-45deg);
}

/* Instagram icon */
.instagram-btn{
	height: 50px;
	width: 50px;
	position: fixed;
	right: 100px;
	bottom: 30px;
	background-color: #fff;
	border:2px solid #c21500;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.instagram-btn img{
    width: auto;
    border-radius: 0;
}

/* clm */
.clm{
	width:80%;
	margin:auto;
}

/* HOMEへ戻る */
.pagehome {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 170px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #999999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

/* image border-radius */
.img_radius img{
	border-radius:20px;
}

/* menu_title */
.menu_img{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30vh;
	width: 100%;
	background-size: cover;
	border-radius: 20px;
	margin:auto;
	transition: 1s;
}

.menu_img:hover{
	opacity: 0.6;
	transition: 1s;
}

.mi_condate{
	background-image: url(https://www.kusanokicco.com/teafarm_sam/wp-content/uploads/2023/05/curry-1.jpg);
}

.mi_sweets{
	background-image:url(https://www.kusanokicco.com/teafarm_sam/wp-content/uploads/2023/05/nerikiri.jpg);
}

.mi_drink{
		background-image: url(https://www.kusanokicco.com/teafarm_sam/wp-content/uploads/2023/05/green-tea.jpg);	
}

/* ご案内 */
.notice{
    position: relative;
    height:170px;
    max-width: 450px;
	 border: 1px solid #02ab35;
   	border-radius: 20px;
    margin: auto;
}

.notice ul{
	position: absolute;
	top: 20%;
	left: 5%;
}

@keyframes test_box_slide {
	0% {
		transform: translate(-100%,0)
	}
	100% {
		transform: translate(0,0)
	}
}

/* 営業時間 */
.time{
    position: relative;
	max-width:450px;
	 border: 1px solid #02ab35;
   	border-radius: 20px;
	margin:auto;
}

table{
    height:100%;
	width:100%;
    width: 100%;
    color: #333;
    margin: auto;
}

td{
    padding: 10px;
}

.td1{
    text-align: center;
    width: 40%;
}

.td2{
    text-align: left;
    width: 60%;
}

.td2 img{
	max-height:50px;
	height:100%;
	transition:1s;
}

.td2 img:hover{
	transition:1s;
	opacity:0.2;
}

/* google map */
.g_map{
	text-align:center;
	width:100%;
}

.g_map iframe{
	width:80%;
}

/* homeへ */
/* ボタンリンク */
.home_btn { 
    position: fixed;
    bottom: 50px;
    left: 5%;
    height: 10vh;
    width: 10vh;
    transition: 1s;
    z-index: 1000;
}

.home_btn:hover{
    opacity: 0.7;
    transition: 1s;
}

.home_btn img{
    width: 100%;
}

/* おしながき */
.menu-clm{
	width:80%;
	margin:20px 0 20px auto;
}

/* お茶を選ぶ */
.tea-clm{
	display:flex;
	width: 60%;
	margin:auto;
}

.select-tea{
	width: 20%;
}

.select-tea img{
	width: 90%;
	border-radius: 50%;
	margin: auto;
}

.select-tea p{
	text-align: center;
}

/* 追加メニュー */
.menu{
	width:60%;
	margin: auto;
}

.menu td{
	vertical-align: baseline;
}

.add-menu{
	text-align:right;
}

/* ドリンク */
.drink-menu{
	display: flex;
	width: 80%;
	margin: auto;
}

.drink-left{
	position: relative;
	height:300px;
}

.p-img1,.p-img2{
	position: absolute;
	max-width:350px;
	width:100%;
}

.p-img1{
	top:  0;
	left: 10%;
}

.p-img2{
	top: 15vh;
	right: 10%;
}

.drink-right{
	display: flex;
	width: 100%;
}

.menu-title{
	color: #54ad6f;
	font-size: 18px;
	font-weight: 700;
}

.drink-name,.drink-price{
	text-align: end;
	width: 50%;
}

.drink-name h3,.drink-price h3{
	color: #54ad6f;
	font-size: 20px;
	font-weight: 700;
	padding-right: 5%;
}

/* アルコール */
.alchol{
	max-width: 980px;
}

.alchol h3{
	color: #54ad6f;
	font-size: 18px;
	font-weight: 700;
	margin-left:35%;
}

.alchol-menu{
	width: 100%;
}

.alchol-p{
	display: flex;
	justify-content: space-between;
}

.alchol-p p{
	text-align:end;
	width:50%;
}