@charset "UTF-8";

/* ----------------------------------------------------------- */
/* メインレイアウト用CSS                                        */
/* ----------------------------------------------------------- */
/* 【このCSSファイルの適用場所】                                */
/* 基本レイアウト(コンテンツ部枠含む)                            */
/* 共通ヘッダ                                                  */
/* サイドメニュー ※専用サイドコンテンツはここではない            */
/* フッター                                                   */
/* スマホポップアップメニュー                                  */
/* TOPコンテンツの一部(特集・TOPメイン画像(スライド)            */
/* ----------------------------------------------------------- */
/* 「未定」                                                  */
/* 入力フォーム                                              */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */



/* font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; */


body{
	background-color: white;
}




/* ----------------------------------------------------------- */
/* ▼ヘッダー                                                   */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ●【ヘッダー】共通                                            */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ●【ヘッダー】PC・タブレット横                                 */
/* ----------------------------------------------------------- */
@media print{
	body {
		min-width: 1024px !important; /* Chromeで、幅1280だと印刷で切れてしまうのでその対応 */
	}
}
@media print, screen and (min-width: 769px){
	body{
		min-width: 1210px;
	}
	/* スマホメニュー関連 */
	#header_sp_menu,
	.header-sp-menu{
		display:none;
	}
	.popup-close-button,
	#popup_menu{
		display: none;
	}

	/* ----------------------------------------------------------- */
	/* ヘッダーパーツ                                               */
	/* ----------------------------------------------------------- */
	/* スマホ用追従ヘッダー */
	#header_sp_menu{
	}
	/* ヘッダー */
	#header_wrapper{
	}
	
	
	#header_wrapper > .header-top-line{
		display : table;
		position: relative;
		padding: 3px 0;
		width: 100%;
		box-shadow: 0 0 1px black;
	}
	#header_wrapper > .header-top-line > section{
		display: table-cell;
		vertical-align: bottom;
		width: 50%;
		text-align: right;
	}
	
	/* ヘッダー1行分 */
	#header_wrapper > .header-one-line{
		display : table;
		position: relative;
	}
	/* ヘッダー内コンテンツ、共通 */
	#header_wrapper > .header-one-line > section{
		display: table-cell;
		vertical-align: bottom;
	}
	/* ロゴ＋スマホアイコンメニュー */
	#header_wrapper > .header-one-line > section#logo{
		position: absolute;
		bottom: 10px; /* ロゴ画像が高いものだとメニューの上に余白ができるための対応 */
	}
	/* グローバルメニュー */
	#header_wrapper > .header-one-line > section#global_menu{
		padding-left: 200px; /* ロゴ画像がabsoluteのため */
	}
	/* 店舗情報 */
	#header_wrapper > .header-one-line > section#shop_info{
	}
	#header_wrapper > .header-one-line > section#shop_info > div.shop-text{
		white-space: nowrap;
	}
	/* 会員機能 */
	#header_wrapper > .header-one-line > section#member_func{
	}
	/* 保存機能 */
	#header_wrapper > .header-one-line > section#save_func{
	}


	/* ----------------------------------------------------------- */
	/* ロゴ(＋スマホアイコンメニュー)                                */
	/* ----------------------------------------------------------- */
	#logo h1 img{
		display: inline-block;
		padding: 5px;
		max-width: 200px;
	}
	#logo .site-shop-info{
		text-align:center;
	}


	/* ----------------------------------------------------------- */
	/* グローバルメニュー                                           */
	/* ----------------------------------------------------------- */
	#global_menu{
	}
	#global_menu > ul{
		display : -webkit-box; /* Android 2~4 */
		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: stretch;
		list-style: none;

		overflow :hidden;
		height: 50px;
	}
	
	/* グローバルメニューのセレクタ詳細
		通常リンク
			ボックス		  #global_menu > ul > li
			リンクボックス	#global_menu > ul > li > a
			アイコン部分	  #global_menu > ul > li > a > span
			テキスト部分	  #global_menu > ul > li > a > div
			
		エキスパンド
			ボックス		  #global_menu > ul > li.expand-menu
			範囲ボックス	  #global_menu > ul > li.expand-menu > div
			アイコン部分	  #global_menu > ul > li.expand-menu > div > span
			テキスト部分	  #global_menu > ul > li.expand-menu > div > div
			サブメニュー	  #global_menu > ul > li.expand-menu > ul
			
		サブメニュー
			カバー			#global_menu > ul > li.expand-menu > ul
			ボックス		  #global_menu > ul > li.expand-menu > ul > li
			リンクボックス	#global_menu > ul > li.expand-menu > ul > li > a
			アイコン部分	  #global_menu > ul > li.expand-menu > ul > li > a > span
			テキスト部分	  #global_menu > ul > li.expand-menu > ul > li > a > div
			
		サブエキスパンド
			ボックス		  #global_menu > ul > li.expand-menu > ul > li.expand-menu
			範囲ボックス	  #global_menu > ul > li.expand-menu > ul > li.expand-menu > div
			アイコン部分	  #global_menu > ul > li.expand-menu > ul > li.expand-menu > div > a
			テキスト部分	  #global_menu > ul > li.expand-menu > ul > li.expand-menu > div > div
			最下層メニュー	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul
			
		最下層メニュー
			カバー			#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul
			ボックス		  #global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li
			リンクボックス	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a
			アイコン部分	  #global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a > span
			テキスト部分	  #global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a > div
			
		
	*/
	
	#global_menu > ul > li{
		flex: 0 0 auto;
	}
	/* メニュー基本幅 */
	#global_menu > ul > li,
	#global_menu > ul > li.expand-menu > ul > li,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li{
		display: block;
		min-width: 150px; /* paddingなどを子要素で行うのでここで幅を設定 */
	}

	/* メニュー、サブメニューの枠 */
	#global_menu > ul > li > a,
	#global_menu > ul > li.expand-menu > div,
	#global_menu > ul > li.expand-menu > ul > li > a,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > div,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a{
		position: relative; /* for box link color */
		display : block;
		
		padding : 0;
		
		text-align: center;
		text-decoration: none;
	}
	#global_menu > ul > li > a:hover:after, /* hover表現(色の上乗せ) */
	#global_menu > ul > li.expand-menu > div:hover:after,
	#global_menu > ul > li.expand-menu > ul > li > a:hover:after,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > div:hover:after,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a:hover:after{
		content : "";
		position: absolute;
		top	 : 0;
		left	: 0;
		right   : 0;
		bottom  : 0;
		
		background-color: transparent;
		opacity:0.1;
	}
	/* メニューのテキスト部分 */
	#global_menu > ul > li > a > div,
	#global_menu > ul > li.expand-menu > div > div,
	#global_menu > ul > li.expand-menu > ul > li > a > div,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > div > div,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a > div{
		display: inline-block;
		
		font-size  : 16px;
		line-height: 32px;
	}
	#global_menu > ul > li > a:hover > div, /* hover表現 */
	#global_menu > ul > li.expand-menu > ul > li > a:hover > div,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a:hover > div{
		text-decoration: underline;
	}
	/* メニューのアイコン部分(表示する場合) */
	#global_menu > ul > li > a > span.expand-menu-icon,
	#global_menu > ul > li.expand-menu > ul > li > a > span.expand-menu-icon,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a > span.expand-menu-icon{
		display: inline-block;

		font-size:1.4em;
		line-height: 24px;
		margin-right:0.2em;
	}
	#global_menu > ul > li.expand-menu span.expand-menu-icon {
		font-size:1.4em;
		margin-right:0.2em;
	}

	/* エキスパンドのサブメニューのカバー部分 */
	#global_menu > ul > li.expand-menu > ul,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul{
		position: absolute;
		z-index : 200;
		
		margin:0;
		
		background-color:white;
		box-shadow: 0 3px 2px #c5c5c5;
	}
	/* エキスパンドのサブメニューのボックス部分 */
	#global_menu > ul > li.expand-menu > ul > li,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li{
		height: 0;
		overflow: hidden;
		
		transition: height 0.2s;
	}
	/* 表示状態 */
	#global_menu > ul > li.expand-menu:hover > ul > li,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu:hover > ul > li{
		height: 52px;
	}
	/* サブエキスパンドを横並びにする */
	#global_menu > ul > li.expand-menu > ul > li.expand-menu {
		float: left;
	}
	
	/* TODO 大川 デザインコントロールCSS   ここから  */
	/* CSSの優先順位がユーザー定義＞テンプレート＞レイアウト のためここだと実質反映はされていない */
	#global_menu > ul > li.expand-menu > div,
	#global_menu > ul > li.expand-menu > ul > li > a,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > div,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a{
		color: #5b4032;
	}
	#global_menu > ul > li.expand-menu > div:hover:after,
	#global_menu > ul > li.expand-menu > ul > li > a:hover:after,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > div:hover:after,
	#global_menu > ul > li.expand-menu > ul > li.expand-menu > ul > li > a:hover:after{
		background-color: #5b4032;
	}
	/* TODO 大川 デザインコントロールCSS  ここまで   */



	/* ----------------------------------------------------------- */
	/* 店舗簡易情報												*/
	/* ----------------------------------------------------------- */
	#shop_info{
	}
	#shop_info .shop-tel{
		display: block;

		font-size  : 24px;
		font-weight: bold;
		line-height: 24px;
	}
	/* 最上位に会員機能を置く場合 */
	#header_wrapper.top-menu-member_func  > .header-one-line > section#shop_info{
		width: auto;
	}
	.top-menu-member_func #shop_info > div{
		display: inline-block;
	}


	/* ----------------------------------------------------------- */
	/* 会員機能													*/
	/* ----------------------------------------------------------- */
	#member_func{
	}
	#member_func .member-message{
		display: inline-block;
		padding-right: 5px;
	}
	#member_func .member-action-button{
		display: inline-block;
	}
	#member_func .member-action-button a{
		position: relative; /* for box link white */
		display: inline-block;

		margin: 0 3px;
		padding: 3px 10px;
		border-radius: 3px;

		background-color: black;

		color: white;
		text-decoration: none;
		font-size: 12px;
		line-height: 18px;
	}
	#member_func .member-action-button a:hover{
		text-decoration: underline;
	}
	#member_func .member-action-button a:hover:after{ /* box link white */
		content: "";
		position: absolute;

		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color: white;
		opacity:0.3;
	}


	/* ----------------------------------------------------------- */
	/* 保存機能													*/
	/* ----------------------------------------------------------- */
	#save_func{
	}
	#save_func a{
		display: inline-block;
		padding: 5px 10px;

		min-width: 70px;

		font-weight: bold;
		text-align: right;
		text-decoration: none;
	}
	#save_func a div:last-child{
		padding-top: 5px;
	}

	#save_func a .save-num{
		font-size: 24px;
		line-height: 24px;
		padding: 0 5px;
	}
	#save_func a:hover{
		text-decoration: underline;
	}
	
	/* 最上位に会員機能を置く場合 */
	.header-top-line #save_func a{
		padding: 2px 3px;
	}
	.header-top-line #save_func a div{
		display: inline-block;
	}
	.header-top-line #save_func a .save-num{
		font-size: 14px;
		line-height: 14px;
	}

}/* }}} @media PC・タブレット横 */


/* IE10以降に適用するCSS */
@media all and (-ms-high-contrast:none){
	/* IEで、table-cell直下autoのflexでwrapされない問題対応。 */
	#global_menu > ul{
		display: inline-block;
	}
	#global_menu > ul > li{
		float: left;
	}
}


/* ----------------------------------------------------------- */
/* ●【ヘッダー】スマホ・タブレット縦						  */
/* ----------------------------------------------------------- */
@media screen and (max-width: 768px){
	/* グローバルメニュー、会員機能の内容は、ポップアップメニューへ */
	/* 店舗情報は非表示 */
	#global_menu,
	#shop_info{
		display: none !important;
	}
	#member_func > .member-action-button{
		display: none !important;
	}
	
	/* ----------------------------------------------------------- */
	/* ロゴ(＋スマホアイコンメニュー)							  */
	/* ----------------------------------------------------------- */
	/* ロゴ、スマホメニューの前出し用 */
	#header_wrapper{
		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	
		position: relative;
		z-index: 1000;
	}
	#header_wrapper > .header-one-line{
		flex: 1 1 100%;
	}
	#header_wrapper > .header-one-line:first-of-type{
		order: 2;
	}
	#header_wrapper > .header-one-line:last-of-type{
		order: 1; /* テンプレートで、ロゴが後ろにあるため */
	}
	.header-one-line > section{
		display: block;
	}
	.header-one-line:after{
		content: "";
		display:block;
		clear: both;
	}
	/* ロゴ */
	#logo{
		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	#logo > *{
		flex: 1 1 50%;
	}
	#logo h1 img{
		box-sizing: border-box;
		display: inline-block;
		padding: 5px;
		max-width : 100%;
		max-height: 50px;
	}
	#logo .site-shop-info{
		display: none;
	}




	/* スマホヘッダーアイコンメニュー */
	#header_sp_menu{
		display: inline-block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;

	}
	/* 追従メニュー */
	#header_sp_menu .header-sp-menu{
		margin: 0;
	}
	#header_sp_menu .header-sp-menu > a{
		padding: 0px 10px 5px 10px;
		border-width: 0;
		border-radius: 0 0 0 10px;
		background-color: black;
		color: white;
		opacity: 0.8;
		
		transition: transform 0.5s, opacity 30s;
		transform: translate3d( 0, 0, 0 );
	}
	.scrolling #header_sp_menu .header-sp-menu > a{
		transform: translate3d( 50px, -50px, 0 );
		transition: transform 0.5s;
		opacity: 0.3;
	}
	/* ヘッダーアイコンメニュー */
	.header-sp-menu{
		display: block;
		white-space: nowrap;
		text-align: center;

		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
	}
	.header-sp-menu > a{
		position : relative;/* 文字表示用scale使うので */
		padding-bottom: 10px;
		flex: 0 1 36px;
		flex: 0 1 10vw;
		padding-left: 2px;
		text-align: center;
		font-size: 10px;
		text-decoration: none;
		color: #777;
		background-color: #797979;
		margin: 0 4px;
	}
	.header-sp-menu > a > span{
		color: white;
		/* ～A4.3 */
		font-size  : 18px;
		line-height: 21px;
		/* A4.4～ */
		font-size: 6vw;
		line-height: 9vw;
	}
	.header-sp-menu > a > div{
		position: absolute;
		left  : 0;
		right : 0;
		bottom: 0;
		
		color: white;
		transform: scale( 0.8 );
		line-height: 3vw;
		white-space: nowrap;
	}
	
	
	
	#member_func{
		float: left;
	}
	
	/* ----------------------------------------------------------- */
	/* 保存機能													*/
	/* ----------------------------------------------------------- */
	#save_func{
		text-align: right;
		float: right;
	}
	#save_func a{
		display: inline-block;
		padding: 0 10px 5px;

		min-width: 70px;

		color: black;
		font-weight: bold;
		text-align: right;
		text-decoration: none;
	}
	#save_func a div{
		display: block;
		text-align: center;
	}

	#save_func a .save-num{
		font-size: 16px;
		line-height: 16px;
		padding: 0 5px;
		text-decoration: underline;
	}
/* [SCREEN SPはhover不能とする]
	#save_func a:hover{
		text-decoration: underline;
	}
 */

	/* ----------------------------------------------------------- */
	/* ●【スマホ】ポップアップメニュー							*/
	/* ----------------------------------------------------------- */
	#popup_menu{
		position: fixed;
		left: 30px;
		top: 0;
		right: 30px;

		background-color: white;
		overflow: auto;
		-webkit-overflow-scrolling: touch; /* iPhone用スムーススクロール */
		
		max-height: 100%;
		
		padding-top: 50px; /* 閉じるボタンで隠れないように */
		
		/* android 4.4の標準ブラウザでメニューが表示されたままになる
		translate3dの不具合と思われるので、opacityで非表示にしz-indexで選択不可にするように変更 */
		opacity: 0;
		z-index: -1;
		
		transform: translate3d( 0, -100%, 0 );
		transition: transform 0.5s, opacity 0.5s;
	}
	#popup_cover{
		pointer-events: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1499;
		background-color: rgba( 0, 0, 0, 0 );

		transition: background-color 0.5s
	}
	.popup-close-button{
		pointer-events: none;
		
		position: fixed;
		z-index: 1510;
		left: 50px;
		top: 0; /* メニューの最下部がわからないので、上に設置 */
		right: 50px;
		
		text-align: center;
		background-color: white;
		
		opacity: 0;
		
		transition: opacity 0.5s
	}
	.popup-view-mode #popup_menu.view-slide{
		/* android 4.4の標準ブラウザでメニューが表示されたままになる
		translate3dの不具合と思われるので、opacityで表示にしz-indexで選択可にするように変更 */
		opacity: 1;
		z-index: 1500;
		
		transform: translate3d( 0, 0, 0 );
	}
	.popup-view-mode #popup_cover{
		pointer-events: inherit;
		background-color: rgba( 0, 0, 0, 0.5 );
	}
	.popup-view-mode .popup-close-button{
		pointer-events: inherit;
		opacity: 1;
	}
	.popup-view-mode{ /* 外側のスクロール禁止 */
		overflow: hidden; /* Android用 iPhoneは、preventDefaultで */
	}

	/* ----------------------------------------------------------- */
	/* ●【スマホ】サイドメニュー								  */
	/* ----------------------------------------------------------- */
	.side-menu > dt{
		font-size: 6vw;
	}
	.side-menu > dd > a{
		font-size: 5vw;
	}
	.side-menu > dd > a > span{
		font-size: 7vw;
	}
	.side-menu > dd > a > div{
		padding-left: 3vw;
	}



}/* }}} @media スマホ・タブレット縦 */



/* ----------------------------------------------------------- */
/* ▲ヘッダ                                                     */
/* ----------------------------------------------------------- */






/* ----------------------------------------------------------- */
/* CSS適用状態をJavaScriptへ通知するための手段                   */
/* ----------------------------------------------------------- */
/* [SCREEN PC] */
@media print, screen and (min-width: 769px){
	#dummy_identifier{ /* 端末モードの把握用PCは-10000 */
		position: absolute;
		top: -10000px;
		left: -10000px;
	}
}/* }}} /[SCREEN PC] */
/* [SCREEN SP] */
@media screen and (max-width: 768px){
	#dummy_identifier{ /* 端末モードの把握用スマホは-5000 */
		position: absolute;
		top: -5000px;
		left: -5000px;
	}
}/* }}} /[SCREEN SP] */






/* ----------------------------------------------------------- */
/* ●フッター                                                   */
/* ----------------------------------------------------------- */
#footer_company_info{
	color: white;
	font-size: 16px;
	line-height: 24px;
}
#footer_company_info .site-logo{
	margin-bottom: 10px;
}
#footer_company_info .site-logo a{
	color: white;
	font-size: 28px;
	text-decoration: none;
}
#copyright{
	position: relative;
	background-color: white;
	font-size: 16px;
}
#copyright > .footer-plus-image{
}
/* [SCREEN PC] */
@media print, screen and (min-width: 769px){
	#footer{
		min-height: 300px;
		background-color: #205269;
	}
	#footer_menu{
		float: left;
	}
	#footer_menu > dl{
		margin: 20px 0 50px 20px;
		float: left;
	}
	#footer_menu > dl > dd > a{
		display: block;
		min-width: 200px;
		font-size: 16px;
		line-height: 30px;
		color: white;
		text-decoration: none;
	}
	#footer_menu > dl > dd > a:before{
		content : "";
		display: inline-block;
		margin-right: 10px;
		border: 5px solid transparent;
		border-color: white white transparent transparent;
		width: 0;
		height: 0;
		transform: rotate( 45deg );
	}
	#footer_menu > dl > dd > a > div{
		display: inline-block;
		margin-left: 4px;
		white-space: pre;
		vertical-align: middle;
		/*text-decoration: underline;*/
		line-height: 1.2;
	}
	#footer_menu > dl > dd > a > div:hover{
		text-decoration: underline;
	}
	#footer_company_info{
		float: right;
		margin: 20px 20px 20px 0;
		min-height: 200px;
	}
	#copyright{
		clear: both;
		padding: 30px 20px;
	}
}/* }}} /[SCREEN PC] */
/* [SCREEN SP] */
@media screen and (max-width: 768px){
	#footer{
		text-align: center;
		background-color: #205269;
	}
	#footer_menu{
		display: none;
	}
	#footer_company_info{
		display: inline-block;
		text-align: left;
		padding: 20px 5px 50px;
	}
	#footer_company_info .site-logo{
		text-align: center;
	}
	#copyright{
		padding: 10px 5px;
		text-align: center;
		font-size: 10px;
	}
	#copyright > .footer-plus-image{
	}
}/* }}} /[SCREEN SP] */






















/* ----------------------------------------------------------- */
/* ▼コンテンツ部設定                                            */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ●【コンテンツ部設定】PC・タブレット横                          */
/* ----------------------------------------------------------- */
@media print, screen and (min-width: 769px){
	/* コンテンツ部 */
	#contents_wrapper{
		display : -webkit-box; /* Android 2~4 */
		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
	}
	/* サイドメニュー */
	#side_area{
		order : 1;
		flex: 0 0 300px;
		padding: 40px 0 40px 40px;
	}
	/* コンテンツ部と開始の高さを合わせるため */
	#side_area > *:first-of-type{
		margin-top: 0;
	}
	/* コンテンツ部 */
	#contents{
		order : 2;
		flex: 1 1 100%; /* IEでは、flexにcalc()が使えない。本来は 0 0 calc( 100% -200px ) としたい */
		padding: 40px;
	}
}/* }}} @media PC・タブレット横 */

/* ----------------------------------------------------------- */
/* ●【コンテンツ部設定】スマホ・タブレット縦				  */
/* ----------------------------------------------------------- */
@media screen and (max-width: 768px){

}/* }}} @media スマホ・タブレット縦 */




/* ----------------------------------------------------------- */
/* ▲コンテンツ部設定                                          */
/* ----------------------------------------------------------- */








/* ----------------------------------------------------------- */
/* ●特集用(サイドエリア/TOPページコンテンツ)                      */
/* ----------------------------------------------------------- */
.side-feature{
	margin-top: 10px !important;
}
.side-feature > dd{
	margin-bottom: 20px;
	background-color: white;
}

.side-feature dd h3 {
	font-size: initial;
	font-weight: initial;
	background-color: initial;
	color: initial;
	border-radius: initial;
	padding: initial;
}

.side-feature > dd h3 a{
	position: relative; /* for box link color */
	display: block;
	box-sizing: border-box;
	width: 300px;
	height: 120px;
	padding: 15px;
	margin: auto;
	border: 1px solid black;
	overflow: hidden;
	font-weight	: bold;
	text-decoration: none;
}
.side-feature > dd h3 a:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;

	background-image: linear-gradient( 100deg, rgba( 255, 255, 255, 1 ) 62%, rgba( 255, 255, 255, 0 ) 90%);

}
/* [SCREEN PCはhover可能とする] */
@media screen and (min-width: 769px){
.side-feature > dd h3 a:hover:after{ /* box link color */
	content: "";
	position: absolute;
	z-index: 20; /* 他のabsoluteをかぶせる */
	top	:0;
	left   :0;
	right  :0;
	bottom :0;
	background-color: transparent;
	background-image: none;
	opacity:0.1;
}
}
/* 背景画像タイプ */
.side-feature > dd h3 a > div:first-of-type{
	position: relative;
	z-index: 3;
	padding-top: 5px;
	color: black;
	font-size: 28px;
	line-height: 1.1;	
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}
.side-feature > dd h3 a > div:last-of-type{
	position: relative;
	z-index: 3;
	font-size: 12px;
	color: #333;
	line-height: 1.2;
}
.side-feature > dd h3 a > img{
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	max-height: 120px;
}
/* アイコンタイプ */
.side-feature > dd h3 a > div > div:first-of-type{
	position: relative;
	z-index: 3;
	margin-top: -5px;
	color: black;
	font-size: 26px;
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
	line-height: 1.1;
}
.side-feature > dd h3 a > div > div:last-of-type{
	position: relative;
	z-index: 3;
	font-size: 12px;
	color: #333;
}
.side-feature > dd h3 a > span + div{
	position: relative;
	margin-left: 85px;
}
.side-feature > dd h3 a > span, /* アイコン */
.side-feature > dd h3 a > span > img{
	position: absolute;
	z-index: 3;
	
	max-height: 80px;
	max-width: 80px;
	
	padding-top: 5px;

	color: black;
	font-size  : 65px;
	line-height:80px;
	text-shadow: 2px 2px 2px white;
}
.side-feature > dd h3 a > span:before {
	vertical-align:baseline;
}
@media print, screen and (min-width: 769px){
	.main-contents > .side-feature > dd h3 {
		float: left;
		margin: 5px;
	}
	.main-contents > .side-feature:after {
		display:block;
		content:"";
		clear:both;
	}
}




/* ----------------------------------------------------------- */
/* ▼サイドエリア                                                */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ●【サイドエリア】共通                                         */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* サイドメニュー                                               */
/* ----------------------------------------------------------- */
.side-menu{
	display: block;
	list-style: none;
	margin: 0;
}
.side-menu > dt,
.side-menu > dd{
	display :block;
}
.side-menu > dt{
	padding: 10px 0px 10px;

	border-bottom: 2px solid black;

	font-size  : 22px;
	line-height: 22px;
	font-weight: bold;
	text-align : center;
}
/* メニュー枠 */
.side-menu > dd > a,					   /* メニュー */
.side-menu > dd.expand-menu > label,	   /* エキスパンド */
.side-menu > dd.expand-menu > ul > li > a, /* エキスパンド展開後メニュー */
.side-menu > dd.expand-menu > ul > li > label, /* エキスパンド展開後メニュー */
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a{ /* エキスパンド展開後メニュー */
	position: relative;
	display :block;
	padding: 10px;
	background-color: transparent;
	
	font-size  : 18px;
	line-height: 18px;
	font-weight: bold;
	text-decoration: none;

	cursor: pointer;
}
.side-menu > dd > a:hover,
.side-menu > dd.expand-menu > label:hover,
.side-menu > dd.expand-menu > ul > li > a:hover,
.side-menu > dd.expand-menu > ul > li > label:hover,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a:hover{
	background-color: #ededed;
}
/* メニューのアイコン */
.side-menu > dd > a > span,
.side-menu > dd.expand-menu > label > span{
	font-size  : 24px;
	line-height: 24px;
	vertical-align: middle;
}
/* メニューのテキスト */
.side-menu > dd > a > div,
.side-menu > dd.expand-menu > label > div,
.side-menu > dd.expand-menu > ul > li > a > div,
.side-menu > dd.expand-menu > ul > li > label > div,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > div{
	display: inline-block;
	padding-left: 10px;
	font-size  : 18px;
	line-height: 22px;
	max-width: 230px;
	vertical-align: middle;
	white-space: pre-wrap;
}
.side-menu > dd.expand-menu > label > div,
.side-menu > dd.expand-menu > ul > li > label > div{
	max-width: 220px;
}
/* [SCREEN SP] */
@media screen and (max-width: 768px){
	.side-menu > dd > a > div,
	.side-menu > dd.expand-menu > label > div,
	.side-menu > dd.expand-menu > ul > li > a > div,
	.side-menu > dd.expand-menu > ul > li > label > div,
	.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > div{
		max-width: 280px;
	}
}/* /[SCREEN SP] */

/* エキスパンドメニュー内のメニュー枠 */
.side-menu > dd.expand-menu > ul > li > a,
.side-menu > dd.expand-menu > ul > li > label{
	padding-left: 20px;
	color: #666666;
}
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a{
	padding-left: 30px;
}
/* エキスパンドメニュー内のメニューのアイコン */
.side-menu > dd.expand-menu > ul > li > a > span,
.side-menu > dd.expand-menu > ul > li > label > span,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > span{
	font-size  : 18px;
	line-height: 18px;
	vertical-align: middle;
}
/* エキスパンドメニュー内のメニューのテキスト */
.side-menu > dd.expand-menu > ul > li > a > div,
.side-menu > dd.expand-menu > ul > li > label > div,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > div{
	font-size  : 16px;
	line-height: 18px;
	vertical-align: middle;
}
/* メニュー枠の右矢印 */
.side-menu > dd > a:after,
.side-menu > dd.expand-menu > label:before,
.side-menu > dd.expand-menu > label:after,
.side-menu > dd.expand-menu > ul > li > a:after,
.side-menu > dd.expand-menu > ul > li > label:before,
.side-menu > dd.expand-menu > ul > li > label:after,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a:after{
	position: absolute;
	display: block;
	content: '';

	top: 50%;

	background-color: transparent;
}
.side-menu > dd > a:after,
.side-menu > dd.expand-menu > ul > li > a:after,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a:after{
	right: 12px;
	width: 6px;
	height: 6px;
	margin-top: -4px;

	border-top: 2px solid #494949;
	border-right: 2px solid #494949;
	transform: rotate(45deg);
}
.side-menu > dd.expand-menu > label:before,
.side-menu > dd.expand-menu > label:after{
	right: 12px;
	width: 12px;
	height: 0;
	margin-top: -1px;

	border-top: 2px solid #494949;
	transition: transform 0.2s;
}
.side-menu > dd.expand-menu > ul > li.expand-menu > label:before,
.side-menu > dd.expand-menu > ul > li.expand-menu > label:after{
	right: 12px;
	width: 12px;
	height: 0;
	margin-top: -1px;

	border-top: 2px solid #494949;
	transition: transform 0.2s;
}
.side-menu > dd.expand-menu > label:after,
.side-menu > dd.expand-menu > ul > li.expand-menu > label:after{
	transform: rotate(90deg);
}
.side-menu > dd.expand-menu > input:checked + label:after,
.side-menu > dd.expand-menu > ul > li.expand-menu > input:checked + label:after{
	transform: rotate(0);
}
/* エキスパンドメニュー内の右矢印は小さく */
.side-menu > dd.expand-menu > ul > li > a:after,
.side-menu > dd.expand-menu > ul > li > label:after,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a:after{
	border-width: 1px 1px 0 0;
}




.side-menu > dd.expand-menu{
	color: white;
}
.side-menu > dd.expand-menu > input,
.side-menu > dd.expand-menu > ul > li.expand-menu > input{
	display: none;
}
.side-menu > dd.expand-menu > ul > li,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li{
	height: 0;
	overflow: hidden;

	transition: height 0.2s;
}
.side-menu > dd.expand-menu > input:checked ~ ul > li{
	height: 40px;
	display: initial;
}
.side-menu > dd.expand-menu > input:checked ~ ul > li.expand-menu > input:checked ~ ul > li{
	height: 40px;
}

.side-menu > dd > a > span > img,
.side-menu > dd.expand-menu > label > span > img,
.side-menu > dd.expand-menu > ul > li > a > span > img,
.side-menu > dd.expand-menu > ul > li > label > span > img,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > span > img{
	position: relative;
	padding-top: 5px;

	color: black;
	text-shadow: 2px 2px 2px white;
	max-height: 23px;
	max-width: 23px;
	line-height:1;
	float:left;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
}
.side-menu > dd > a > span > img,
.side-menu > dd.expand-menu > label > span > img{
	max-height: 24px;
	max-width: 24px;
	padding-top: 0;
}
.side-menu > dd.expand-menu > ul > li > a > span > img,
.side-menu > dd.expand-menu > ul > li > label > span > img,
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > span > img{
	max-height: 18px;
	max-width: 18px;
}

.side-contents.html-contents,
.side-contents.banner{
	background-color:rgba(255,255,255,0);
	text-align:center;
	border:0;
	/* width:280px; */
}
.side-contents.html-contents > div{
	max-width:258px;
}
.side-contents.banner img{
	max-width:256px;
	/* max-height:40px; */
}



/* ----------------------------------------------------------- */
/* サイドコンテンツ											*/
/* ----------------------------------------------------------- */
.side-contents{
	margin: 10px 0;
}
.side-contents > header{
	padding: 10px;

	border-bottom: 2px solid black;

	font-size  : 22px;
	line-height: 22px;
	font-weight: bold;
	text-align : center;
}
.side-contents > div {
	padding: 10px;
	padding: 0;
}
.side-contents.contents-no-padding > div{
	padding: 10px 0;
}



.side-contents > div input[type="password"],
.side-contents > div input[type="text"]{
	font-size: 16px;
	padding: 5px;
	border-width: 0;
	box-shadow: 0 0 0 1px #999999;
	transition: box-shadow 0.2s;
}
.side-contents > div input[type="password"]:hover,
.side-contents > div input[type="text"]:hover{
	box-shadow: 0 0 0 3px #999999;
}
.side-contents > div input[type="password"]:focus,
.side-contents > div input[type="text"]:focus{
	box-shadow: 0 0 0 3px #999999;
}







/* ----------------------------------------------------------- */
/* ▲サイドエリア                                                */
/* ----------------------------------------------------------- */









/* ページトップへ */
#page_top{
	pointer-events: none;
	cursor: pointer;
	
	position: fixed;
	z-index: 500;
	right: 30px;
	bottom: 30px;
	
	display: block;
	width : 65px;
	height: 65px;
	padding: 5px;
	
	border-radius: 5px;
	background-color: black;
	
	color: white;
	font-size: 14px;
	text-align: center;
	
	opacity: 0;
	transition: opacity 1s, transform 1s;
	transform: translate3d( 0, 100px, 0 );
}

#page_top:before,
#page_top:after{
	position: absolute;
	left: 0;
	right: 0;
	
	display: inline-block;
	text-align: center;
}
#page_top:before{
	content: "ページ";
	top: 3px;
}
#page_top:after{
	content: "トップへ";
	bottom: 3px;
}
#page_top > div:before{
	position: absolute;
	display: block;
	content: '';
	
	top: 26px;
	right: calc( 50% - 8px);
	
	width: 12px;
	height: 12px;
	margin-top: 0;
	
	border-top: 3px solid white;
	border-right: 3px solid white;
	
	background-color: transparent;
	
	transform: rotate(-45deg);
}
#page_top > div:after{
	position: absolute;
	display: block;
	content: '';

	top: 26px;
	right: calc( 50% - 2px);

	width: 0;
	height: 21px;

	border-right: 3px solid white;
	
	background-color: transparent;
}
.scrolled #page_top{
	pointer-events: inherit;
	opacity: 0.7;
	transform: translate3d( 0, 0, 0 );
}
.scrolled #page_top:hover{
	opacity: 1;
}
/* [SCREEN SP] */
@media screen and (max-width: 768px){
	#page_top#page_top{
		position: static;
		margin: 20px auto 30px;
		transition: none;
		opacity: 1;
	}
}/* /[SCREEN SP] */