@charset "UTF-8";

@import "css/common/layout.css";


/*---------------------------------------------------------
Theme Name: kyoto-hanakanzashi
Theme URI: http://www.kyoto-hanakanzashi.jp
Description: 
Author: Graphic
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-header, custom-menu,
Text Domain: 
Version: 20151021
---------------------------------------------------------*/

/*-------------------------------------------------------------------------
	TOPページ
/*-----------------------------------------------------------------------*/


	
#news {
	background:#ec6d81;
	text-align:center;
	padding:2% 0 1% 0;
	margin:10px 0 0 0;
}

#news .box {
	position:relative;
	max-width:960px;
	margin:0 auto;
}

#news .box h2 {
	background:none;
}

#news .box .ichiran {
	position:absolute;
	top:70%;
	right:0;
}

	#news .box .ichiran a {
		color:#FFF;
	}
	
	#news .box .ichiran a:hover {
		text-decoration:underline;
	}

.triangle {
	background-image:url(images/index/news/triangle.gif);
	background-repeat:no-repeat;
	background-position:top center;
}


#concept {
	clear:both;
}


#campaign {
}

	#campaign ul {
		margin:1% 0 0 0;
	}
	
		#campaign ul li {
			float:left;
			margin:0 0 1% 0;

		}

#plan {
}

#plan ul.set {
		margin:1% 0 0 0;
	}
	
		#plan ul.set li {
			float:left;
		}
		
#plan ul.list {
		margin:1% 0 0 0;
	}
	
		#plan ul.list li {
			float:left;
			margin:0 15px 0 0;
		}
		
		#plan ul.list li.last {
			float:left;
			margin:15px 0 0 0;
		}

/* ドロップダウンメニューの基本設定 */
#dropmenu li {
    position: relative; /* 親要素を相対配置 */
}

#dropmenu li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    border: 1px solid #ddd;
    width: 220px;
    position: absolute; /* 絶対配置で隠す */
    top: 100%; /* 親の下に配置 */
    left: 0;
    display: none; /* 初期状態は非表示 */
    z-index: 1000; /* メニューを前面に */
}

/* ホバー時に表示 */
#dropmenu li:hover ul {
    display: block;
}

/* 各項目のデザイン */
#dropmenu li ul li {
    width: 100%;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    background: white;
    transition: background 0.3s;
}

/* 最後の項目の下線を消す */
#dropmenu li ul li:last-child {
    border-bottom: none;
}

/* ホバー時のデザイン */
#dropmenu li ul li:hover {
    background: #f5f5f5;
}

/* 各リストアイテムのリンクデザイン */
#dropmenu li ul li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 12px 0;
}

/* ホバー時の文字色 */
#dropmenu li ul li a:hover {
    color: #ff6b6b;
}



#option {
}	
		#option ul li {
			float:left;
		}


#magazine{
	background-color:#ffedef;
	border-radius:10px;
	padding: 2% 4% 3% 4%;
	margin: 6% 0 1% 0;
}
	#magazine dl{
	}
	#magazine dl:after{
		clear: none;
		visibility: visible;
	}
		#magazine dl dt{
			text-align:center;
			margin:2% 0 1% 0;
		}
			#magazine dl .cover ul{
				text-align:center;
			}
			#magazine dl .cover ul.foreign{
				text-align: center;
				border-top: dashed 1px #ec6d81;
				padding-top: 2%;
				margin-top: 2%;
			}
			#magazine dl .cover li{
				padding:2% 2%;
				display:inline-block;
			}
				#magazine dl .cover img{
					margin:0 0 5% 0;
				}
				#magazine dl .cover .mag_ttl {
					text-align:center;
					font-size:75%;
					font-weight:bold;
					color:#ec6d81;
				}

	#magazine .overview{
		border-top: dashed 1px #ec6d81;
		padding:2% 0;
		margin:2% 0 0 0;
	}


#calendar {
	border: dotted 2px #AAA;
	padding: 0 3% 4% 3%;
	margin: 7% 0 0 0;
	border-radius: 20px;
}

	#calendar ul.left {
		float:left;
	}
	
	#calendar ul.right {
		float:right;
	}

	#calendar .shop_link {
		background: #f7e785;
		max-width: 800px;
		text-align: center;
		font-weight: bold;
		margin: 20px 0 30px 5.5%;
		border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  

	}

	#calendar .shop_link a {
		padding: 10px 10px 10px 10px;
		color: #222;
		display: block;
	}

	#calendar .shop_link a:hover {
		color: #999;
	}

	#calendar .shop_title {
		font-weight: bold;
		border-left: 6px solid #EC6D81;
		padding: 0 0 0 8px;
	}
	
	
#shop {

}


#access {
	
}



	#access p.b_img {
		float:left;
	}

	
	#access ul.s_img {
	}
	
		#access ul.s_img li {
			float:left;
			margin:0 0 20px 20px;
		}

	.pay{
		border-radius: 10px;
		border: 1px dotted;
		padding: 10px 15px;
		margin: 10px 0 20px 0;
	}

	#recruit{
	}

	#recruit dl{
		border:2px solid red;
		text-align:center;
		margin:0 0 3% 0;
		background-image:url(images/index/access/recruit.jpg);
	}
		#recruit dl dt{
			font-weight:bold;
			color:#fffbbe;
			font-size:1.8em;
		}
		#recruit dl dd{
			background-color:white;
			padding:10px;
		}

#map {
}
//20170807　文字サイズを小さめに変更
	#map p.text {
		font-size:10px;
		margin:3% 0 3% 0;
	}
	
	#map div.left {
		float:left;
		margin:0 0 0 0;
	}

	#map div.left dl.address {
		margin:0 0 0 0;
		font-size:14px;
	}
	
		#map div.left dl.address dt {
			margin:0 15px 0 0;
			float:left;
		}

		#map div.left dl.address dd.qr {
		}

		#map div.left dl.address dd.tel {
			font-size:24px;
			font-weight:bold;
			margin:10px 0;
		}
		
		#map div.left dl.address dd.tel_sp {
			font-size:24px;
			font-weight:bold;
			margin:10px 0;
			display:none;
		}

		#map div.left dl.address dd.time {
			border:1px solid #000;
			padding:2px 15px;
			font-size:15px;
			font-weight:bold;
			display:inline-block;
			margin:0 0 5px 0;
		}

		#map div.left dl.address dd.caption {
			font-size:12px;
		}

	
	#map .right {
		width:55%;
		float:right;
	}
	
		#map .right .title {
			color:#cc141d;
			font-weight:bold;
		}
		
		#map .right dl.address {
			margin:0 0 3% 0;
		}
		
			#map .right dl.address dt {
				font-weight:bold;
			}
	
		#map .right dl.traffic {
		}
		
			#map .right dl.traffic dt {
				font-weight:bold;
				font-size:16px;
				margin:3% 0 0 0;
			}
			
			#map .right dl.traffic dd {
			}

/*--------------------------------
関連記事表示部分
---------------------------------*/
#news_box {
	position:relative;
	margin:0 0 40px 0;
}
#news_box_01,
#news_box_02 {
	position:relative;
	margin:1% 5% 40px 0;
	width:30%;
	float:left;
}
#news_box_03 {
	position:relative;
	margin:1% 0 0 0;
	width:30%;
	float:left;
}

#news_left {
	width:100%;
	height:430px;
	overflow-y:scroll;
}

#news_box #news_list {
	padding:0 0 0 0;
	width:100%;
	float:left;
}

#news_box_01 h3,
#news_box_02 h3,
#news_box_03 h3 {
	font-weight:bold;
	font-size:18px;
	border-left:5px #EC6D81 solid;
	padding:0 0 0 6px;
}

/* タイトル名 */
#news_list dd h4,
#news_list02 dd h4{
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
	border-bottom:1px #000 solid;
}

#news_list p.day,
#news_list02 p.day{
	color:#2e94cf;
	font-size:14px;
	margin:0 0 0 0;
}

#news_list dt,
#news_list02 dt{
	float: left;
	width: 150px;
}

#news_list dt img,
#news_list02 dt img{
	width: 150px;
}

#news_list dd,
#news_list02 dd{
	padding-left: 160px;
}

#news_list dl,
#news_list02 dl{
	margin: 20px 0 0 0;
	padding:0 3% 0 0;
}

#news_list dl:last-child,
#news_list02 dl:last-child{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-style: none;
}

/* 抜粋文字 */
#news_list .clearfix dd p,
#news_list02 .clearfix dd p{
	font-size: 13px;
	color: #666;
	line-height: 18px;
}

#news_list .clearfix dd h4 a,
#news_list02 .clearfix dd h4 a{
	color: #333;
	text-decoration: none;
}

#news_list .clearfix dd h4 a:hover,
#news_list02 .clearfix dd h4 a:hover{
	color:#EC6D81;
}

#news_box #sns {
	clear:both;
	margin:0 0 40px 0;
	width:30%;
	position:absolute;
	right:0;
	top:0;
}

.mb10{
	margin-bottom:10px;
}
.mb30{
	margin-bottom:20px;
}
.mb30{
	margin-bottom:30px;
}
.mb40{
	margin-bottom:40px;
}
.mb50{
	margin-bottom:50px;
}
.mt10{
	margin-top:10px;
}
.mt20{
	margin-top:20px;
}
.mt30{
	margin-top:30px;
}
.mt40{
	margin-top:40px;
}
.mt50{
	margin-top:50px;
}


/*-------------------------------------------------------------------------
	スマホ専用のレイアウト
/*-----------------------------------------------------------------------*/
@media only screen and (max-width: 780px) {
	
	#main h2 {
		text-align:center;
		margin:17% 0 7% 0;
		background:none;
	}

	#news_list dl {
		margin: 20px 0 0 0;
		padding:0 0 0 0;
		width:100%;
		float:none;
	}

	
	#news .box {
		position:static;
		width:auto;
		margin:0 0 0 0;
	}
	
	#news .box .ichiran {
		position:static;
		margin:2% 0 0 0;
	}
	
	#concept dt img,
	#concept dd img,
	#concept ul li img,
	#campaign ul li img,
	#campaign p img,
	#plan ul.set li img,
	#plan ul.list li img,
	#plan ul.list li.last img,
	#option ul li img,
	#access p.b_img img,
	#access ul.s_img li img,
	#map p.img_map img {
		width:100%;
		height:auto;
	}
	
	#news_box #news_list {
	padding:0 0 0 0;
	width:100%;
}

#news_left {
	width: 90%;
	height: 300px;
	overflow-y: scroll;
	margin: 0 0 0 2%;
	border: 1px solid #AAA;
	padding: 3%;
}

#news_box_01,
#news_box_02 {
	position:relative;
	margin:0 5% 40px 0;
	width:100%;
	float:left;
}
#news_box_03 {
	position:relative;
	margin:0 0 0 0;
	width:100%;
	float:left;
}
#news_box_01 h3,
#news_box_02 h3,
#news_box_03 h3 {
	font-weight:bold;
	font-size:18px;
	border-left:5px #EC6D81 solid;
	padding:0 0 0 6px;
	margin:0 0 10px 9px;
}

#news_box #news_list {
	padding:0 0 0 0;
	width:100%;
	float:none;
}

#news_box #news_list02 {
	width:100%;
	float:none;
}
	
	#news_box #sns {
		clear: both;
		margin: 10% 0 40px 2.5%;
		width: 95%;
		position: static;
		border: 1px solid #AAA;
	}
	
	#concept dt {
		float:none;
	}

	#concept ul.image li {
		float:none;
		margin:15px 0 0 0;
	}
	
	#campaign ul li {
			float:none;
		}
		
		#plan ul.set li {
			float:none;
		}
		
	#plan ul.list li {
			float:none;
			margin:15px 0 0 0;
		}
		
		#plan ul.list li.last {
			float:none;
		}


	#option ul li {
			float:none;
		}

	#access dl.address {
		float:none;
		margin:0 0 10px 0;
	}
	
	#access dl.address dd.tel {
		display:none;
	}
	
	#access dl.address dd.tel_sp {
			font-size:24px;
			font-weight:bold;
			display:block;
	}
	
	#access p.b_img {
		float:none;
		margin:0 0 4% 0;
	}
	
		#access ul.s_img li.s_img01,
		#access ul.s_img li.s_img03 {
			float:left;
			margin:0 4% 4% 0;
			width:48%;
		}
		
		#access ul.s_img li.s_img02,
		#access ul.s_img li.s_img04 {
			float:left;
			margin:0 0 4% 0;
			width:48%;
		}


	#map p.img_map {
		float:none;
		margin:0 0 3% 0;
	}
	
	#map .right {
		width:100%;
		float:none;
	}

#shop h2.sp {
	background-image:url(images/index/access/title_bk.jpg) !important;
	padding: 5% 3% 4% 3%;
	margin: 10% 0 4% 0;
}

	.pc {
			display:none;
		}
	#campaign ul li.camp_couple {
		float: right;
		width: 100%;
	}

	#concept #movie {
	    position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 30px;
	    height: 0;
	    overflow: hidden;
	    margin-top:20px;
	}
 
	#concept #movie iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}	
}


/*-------------------------------------------------------------------------
	PC専用のレイアウト
/*-----------------------------------------------------------------------*/
@media only screen and (min-width: 781px) {

	#main h2 {
		text-align:center;
		margin:6% 0 1% 0;
		background:none;
	}

	#concept dl dt {
		float:left;
	}

	#concept ul li {
		width:310px;
		height:250px;
		margin:15px 15px 0 0;
		float:left;
	}
		#concept ul li.last {
			width:310px;
			height:250px;
			margin:15px 0 0 0;
			float:left;
		}
	
	#shop h2.pc {
	background-image:url(images/index/access/title_bk.jpg) !important;
	padding: 2% 0 1% 0;
	margin: 7% 0 2% 0;
	}

	.sp {
		display:none;
	}
			#campaign ul li.camp_right{
				float:right;
				max-width:100%;

			}
	
	#concept #movie {
	    position: relative;
	    padding-bottom: 50%;
	    padding-top: 30px;
	    height: 0;
	    overflow: hidden;
	    margin: 20px auto;
	    background-color: #000000;

	    /*position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 30px;
	    height: 0;
	    overflow: hidden;
	    margin-top:20px;*/
	}
 
	#concept #movie iframe {
	    position: absolute;
	    /* top: 100px; */
	    left: 8.334%;
	    /* width: 100%; */
	    /* height: 100%; */

	    /*position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;*/
	}	
}