@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: 1280px;
	}
	/* スマホメニュー関連 */
	#header_sp_menu,
	.header-sp-menu{
		display:none;
	}
	.popup-close-button,
	#popup_menu{
		display: none;
	}

	/* ----------------------------------------------------------- */
	/* ヘッダーパーツ                                              */
	/* ----------------------------------------------------------- */
	/* スマホ用追従ヘッダー */
	#header_sp_menu{
	}
	/* ヘッダー */
	#header_wrapper{
	}

	/* ヘッダー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 black;
	}
	/* エキスパンドのサブメニューのボックス部分 */
	#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  ここまで   */


	/* ----------------------------------------------------------- */
	/* グローバルメニューボタン                                    */
	/* ----------------------------------------------------------- */
	#global-menu-button{
	}
	#global-menu-button .button-label{
		text-align: center;
	}
	#global-menu-button .button-label label{
		/*color: white;*/
		font-size: 1.8rem;
	}
	#global-menu-button .button-label label div{
		font-size: 0.6rem;
	}
	#global-menu-button .menu-area{
		top: 66px;
		height: 0;
		overflow: auto;
		position: absolute;
		transition: height 0.4s linear 0s;
		z-index: 1;
	}
	#global-menu-button input:checked + .menu-area{
		height: 768px;
	}
	.header-all-menu{
		display: block;
		list-style: none;
		margin: 10px 0;
		background-color: white;
	}
	.header-all-menu > dt,
	.header-all-menu > dd{
		display :block;
	}
	.header-all-menu > dt{
		padding: 10px;

		border-bottom: 2px solid black;

		font-size  : 22px;
		line-height: 22px;
		font-weight: bold;
		text-align : center;
	}
	.header-all-menu > dd{
		border-bottom: 1px solid #cccccc;
	}
	/* メニュー枠 */
	.header-all-menu > dd > a > div,
	.header-all-menu > dd > label > div{
		margin-right: 20px;
	}
	.header-all-menu > dd > a,                       /* メニュー */
	.header-all-menu > dd.expand-menu > label,       /* エキスパンド */
	.header-all-menu > dd.expand-menu > ul > li > a, /* エキスパンド展開後メニュー */
	.header-all-menu > dd.expand-menu > ul > li > label, /* エキスパンド展開後メニュー */
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a{ /* エキスパンド展開後メニュー */
		position: relative;
		display :block;
		padding: 10px;
		background-color: transparent;
		
		color: #444;
		font-size  : 18px;
		line-height: 18px;
		font-weight: bold;
		text-decoration: none;

		cursor: pointer;
	}
	.header-all-menu > dd > a:hover,
	.header-all-menu > dd.expand-menu > label:hover,
	.header-all-menu > dd.expand-menu > ul > li > a:hover,
	.header-all-menu > dd.expand-menu > ul > li > label:hover{
	}
	/* メニューのアイコン */
	.header-all-menu > dd > a > span,
	.header-all-menu > dd.expand-menu > label > span{
		font-size  : 24px;
		line-height: 24px;
		vertical-align: middle;
	}
	/* メニューのテキスト */
	.header-all-menu > dd > a > div,
	.header-all-menu > dd.expand-menu > label > div,
	.header-all-menu > dd.expand-menu > ul > li > a > div,
	.header-all-menu > dd.expand-menu > ul > li > label > div,
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > div{
		display: inline-block;
		padding-left: 10px;
		font-size  : 20px;
		line-height: 24px;
		vertical-align: middle;
		white-space: pre-wrap;
	}
	/* エキスパンドメニュー内のメニュー枠 */
	.header-all-menu > dd.expand-menu > ul > li > a,
	.header-all-menu > dd.expand-menu > ul > li > label{
		margin-left: 10px;
	}
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a{
		margin-left: 20px;
	}
	/* エキスパンドメニュー内のメニューのアイコン */
	.header-all-menu > dd.expand-menu > ul > li > a > span,
	.header-all-menu > dd.expand-menu > ul > li > label > span,
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > span{
		font-size  : 18px;
		line-height: 18px;
		vertical-align: middle;
	}
	/* エキスパンドメニュー内のメニューのテキスト */
	.header-all-menu > dd.expand-menu > ul > li > a > div,
	.header-all-menu > dd.expand-menu > ul > li > label > div,
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > div{
		font-size  : 14px;
		line-height: 18px;
		vertical-align: middle;
	}
	/* メニュー枠の右矢印 */
	.header-all-menu > dd > a:after,
	.header-all-menu > dd.expand-menu > label:before,
	.header-all-menu > dd.expand-menu > label:after,
	.header-all-menu > dd.expand-menu > ul > li > a:after,
	.header-all-menu > dd.expand-menu > ul > li > label:before,
	.header-all-menu > dd.expand-menu > ul > li > label:after,
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a:after{
		position: absolute;
		display: block;
		content: '';

		top: 50%;

		background-color: transparent;
	}
	.header-all-menu > dd > a:after,
	.header-all-menu > dd.expand-menu > ul > li > a:after,
	.header-all-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 black;
		border-right: 2px solid black;
		transform: rotate(45deg);
	}
	.header-all-menu > dd.expand-menu > label:before,
	.header-all-menu > dd.expand-menu > label:after{
		right: 12px;
		width: 12px;
		height: 0;
		margin-top: -1px;

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

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




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

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

	.header-all-menu > dd > a > span > img,
	.header-all-menu > dd.expand-menu > label > span > img,
	.header-all-menu > dd.expand-menu > ul > li > a > span > img,
	.header-all-menu > dd.expand-menu > ul > li > label > span > img,
	.header-all-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;
	}
	.header-all-menu > dd > a > span > img,
	.header-all-menu > dd.expand-menu > label > span > img{
		max-height: 23px;
		max-width: 23px;
	}
	.header-all-menu > dd.expand-menu > ul > li > a > span > img,
	.header-all-menu > dd.expand-menu > ul > li > label > span > img,
	.header-all-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a > span > img{
		max-height: 18px;
		max-width: 18px;
	}


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

		font-size  : 24px;
		font-weight: bold;
		line-height: 24px;
	}


	/* ----------------------------------------------------------- */
	/* 会員機能                                                    */
	/* ----------------------------------------------------------- */
	#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;
	}
}/* }}} @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: 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: space-around;
		align-items: center;
	}
	.header-sp-menu > a{
		flex: 0 1 36px;
		flex: 0 1 10vw;
		padding-left: 2px;

		text-align: center;
		font-size: 10px;
		text-decoration: none;
		color: #777;
		
		background-color: black;
	}
	.header-sp-menu > a > span{
		color: white;
		
		/* ～A4.3 */
		font-size  : 18px;
		line-height: 21px;

		/* A4.4～ */
		font-size: 6vw;
		line-height: 10vw;
	}
	/* アイコンメニュー名は表示しない */
	.header-sp-menu > a > div{
		display: none;
	}
	
	#global-menu-button{
		display: none;
	}
	
	#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;
	}
	#save_func a:hover{
		text-decoration: underline;
	}


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

		background-color: white;
		overflow: auto;
		-webkit-overflow-scrolling: touch; /* iPhone用スムーススクロール */
		
		max-height: 100%;
		
		padding-top: 20px; /* 閉じるボタンで隠れないように */
		
		transform: translate3d( 0 , -100%, 0 );
		transition: transform 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{
		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 > 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 > 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%);

}
.side-feature > dd > 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 > a > div:first-of-type{
	position: relative;
	z-index: 3;
	padding-top: 5px;

	color      : black;
	font-size  : 28px;
	
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}
.side-feature > dd > a > div:last-of-type{
	position: relative;
	z-index: 3;
	font-size: 12px;
	color: #333;
}
.side-feature > dd > a > img{
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	max-height: 120px;
}
/* アイコンタイプ */
.side-feature > dd > a > div > div:first-of-type{
	position: relative;
	z-index: 3;
	margin-top: -5px;

	color      : black;
	font-size  : 28px;
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}
.side-feature > dd > a > div > div:last-of-type{
	position: relative;
	z-index: 3;
	font-size: 12px;
	color: #333;
}
.side-feature > dd > a > span + div{
	position: relative;
	margin-left: 90px;
}
.side-feature > dd > a > span, /* アイコン */
.side-feature > dd > a > span > img{
	position: absolute;
	z-index: 3;
	
	max-height: 80px;
	max-width: 80px;
	
	padding-top: 5px;

	color      : black;
	font-size  : 72px;
	line-height:80px;
	text-shadow: 2px 2px 2px white;
}
.side-feature > dd > a > span:before {
	vertical-align:baseline;
}

.main-contents > .side-feature > dd {
	float: left;
}

.main-contents > .side-feature:after {
	display:block;
	content:"";
	clear:both;
}




/* ----------------------------------------------------------- */
/* ▼サイドエリア                                              */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* ●【サイドエリア】共通                                      */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* サイドメニュー                                              */
/* ----------------------------------------------------------- */
.side-menu{
	display: block;
	list-style: none;
	margin: 10px 0;
}
.side-menu > dt,
.side-menu > dd{
	display :block;
}
.side-menu > dt{
	padding: 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 > 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  : 20px;
	line-height: 24px;
	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: 210px;
	}
}/* /[SCREEN SP] */

/* エキスパンドメニュー内のメニュー枠 */
.side-menu > dd.expand-menu > ul > li > a,
.side-menu > dd.expand-menu > ul > li > label{
	margin-left: 10px;
}
.side-menu > dd.expand-menu > ul > li.expand-menu > ul > li > a{
	margin-left: 20px;
}
/* エキスパンドメニュー内のメニューのアイコン */
.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  : 14px;
	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 black;
	border-right: 2px solid black;
	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 black;
	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 black;
	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: 23px;
	max-width: 23px;
}
.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;
}
.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] */