@charset "utf-8";
/* CSS Document */

/* ==========================================================

全サイト共通

========================================================================= */



@media screen and (max-width: 960px) {
	
	.leftContents {
		float: none;
		clear: both;
		width: 90%;
		margin: 0 auto;
	}	
	
	.rightContents {
		width: 98%;
		margin: 1%;
	}
	
/* ハンバーガーメニュー */
/*メニュー部分*/
#hm_navi {
    background-color: #FFF; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 20px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
	border-left: 1px solid #eee;
	overflow: scroll;
}

#menu-background {
    background-color: #FFF; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: -1;

}

#menu-icon {
    background-color: #FFF; /*アイコン部分背景色*/
    color: #4c4c4c; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}


#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #hm_navi,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

/* ナビゲーション　*/
#hm_navi ul {

}
#hm_navi ul li {
	padding: 10px 0;
}
#hm_navi ul li.tp_ttl {
	margin-bottom: 10px;
	border-bottom:  1px dotted #ccc;
	color: #00bac3;
}


#hm_navi li a:hover {
color: #00bac3;
}

#hm_navi ul li ul {
	padding-left: 16px;
	margin-top: 10px;
}
#hm_navi ul li ul li {

}
}


/* -----------------------------------------------------------------------

タブレット+PC
 
 ---------------------------------- */
@media screen and (max-width: 768px) {

/* フォームの拡大を回避 iOS専用  */
input   {font-size: 16px;}

.idx_contents {
	width: 100%;
	margin:  0 auto;
}

#logo {

	width: 100%;
}
.tbcen {
		text-align: center;
	}
.leftimg .clm2blk {
width: 98%;
	float: none;
	margin: 10px 0;
	text-align: center;
}
.leftimg .clm2blk a {
	display: block;
}	
}

/* タブレットのみ */
@media screen and (min-width: 481px) and (max-width: 768px) {

.clm_between li {
padding: 5px;
}
}


/* スマホ ------------------------------------ */
@media screen and (max-width: 480px) {

.clm3blk, .clm3_2blk, .clm2blk, .clm2blk {
	width: 98%;
	margin: 0 auto;
	float: none;
}


/* h2タイトル font-size */
h2.f36 {
font-size: 3.0rem;
}
h3.f26 {
font-size: 2.0rem;
}
.cts_block {
margin:  0;
}
.spcen {
		text-align: center;
	}

/* 各ページテーブル */

  table.storytbl {
    border-top: 1px solid #999;
  }
  table.storytbl td {
    display: block;
    text-align: left;
  }
  table.storytbl th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 94%;
 }

.br {
display: block;
}

/* リンクボタン　詳細ページへ ------------------------------ */
.nextstyle, .nextstyle_cen {
	float: clear;
	width: 90%;
    font-size:1.6rem;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    border-radius:5px;
    box-shadow:2px 2px #AAAAAA;
	border: 1px solid #cccccc;
	margin:1%;
}
.nextstyle a, .nextstyle_cen a {
	display: block;
}
	


/* 横並び関連 */
.clm_between {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.clm_between li {
	text-align: center;
	width: 100%;
	}


/* スマホでの画像拡大時の注釈 */
.spupimg {
	width: 96%;
	margin: 5px auto;
	text-align: center;
	background-color:#f1f1f1;
	padding: 5px;
	border:  1px solid #ccc;
	}
	
/* お問い合わせテーブル */
.inq_tbl {
	border-top: solid 1px #ccc;
	max-width: 100%;
	margin: 20px auto;
}
.inq_tbl th {
    display: block;
    border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
		padding: 5px;
		width: 97%;
  }
	
.inq_tbl td {
    display: block;
    text-align: left;
	padding: 5px;
  }
.inq_tbl input[textarea] {
		width: 100%;
	font-size: 1.4rem;
	}
.inq_tbl input[text] {
		margin-top: 5px;
	}


}



	
	
/* カートとハンバーガーのアイコン画像　*/
.icnmenu {
	font-size: 1.6rem;
  	padding:10px 5px;
	margin-right:0;
}
.icnshop {
	font-size: 1.6rem;
  	padding:10px 5px;
	margin-right: 0;
}
		
/* スライド画像 */
	
.carousel-cell img {
  max-width: 100%; /* full width */
  height: 100%;
}
	
}

/* ===========================================================

JFTAサイト
768pixel 以下　パソコン以外全て

============================================================== */
@media screen and (max-width: 768px) {

div#head_l {
	clear: both;
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
div#head_r {
	clear: both;
	margin: 4px 0 0 0;
	width: 100%;
	padding: 0;
}

	
}

/* ===========================================================

JFTAサイト
481px以上768pixel 以上　タブレットのみ

===================================================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {


}



/* ===========================================================

CLEAR
768pixel 以下　パソコン以外全て

============================================================== */
@media screen and (max-width: 768px) {


/* 各ページの枠 */
.blk {
width: 98%;
margin-left: auto;
margin-right: auto;
}
}

/* ===========================================================

CLEAR
480pixel 未満　スマートフォンのみ

===================================================================== */

@media screen and (max-width: 480px) {

/* フッター */
.footnavi li {
font-size: 1.4rem;
  display: block;
  /display: block;
  /zoom: 1;
  padding: 15px 10px;
}
}