/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*opa2
---------------------------------------------------------------------------*/
@keyframes opa2 {
	0% {opacity: 0;height: 0px;overflow: hidden;}
	50% {opacity: 0;height: 80px;overflow: hidden;}
	100% {opacity: 1;height: auto;}
}

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo {
	line-height: 0;margin: 0;
	width: 100px;		/*ロゴ画像の幅*/
	padding: 15px 20px;	/*上下、左右に空けるスペース*/
	position: absolute;	/*絶対配置するための指定*/		
	left: 20px;			/*左からの配置場所指定*/
	top: 0px;			/*上からの配置場所指定*/					
	background: linear-gradient(#ffa800,#ff8400);/*背景グラデーション*/
	border-radius: 0px 0px 5px 5px;	/*角丸にする指定。左上、右上、右下、左下への順番。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;	/*fixedはスクロールに追従しない(固定で表示)為の指定*/
	top: 20px;		/*上からの配置場所*/
	right: 20px;	/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	cursor: pointer;
	background: rgba(0,0,0,0.6) url(../images/ham.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/*×印が出ている状態の設定。*/
#menubar_hdr.ham {
	background: #0068b3 url(../images/ham.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}


/*メニュー設定（全端末サイズ共通の設定）
---------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar {background: #fff;height: 0px;overflow: hidden;}

/*メニュー1個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	padding: 15px 5px;	/*上下、左右への余白*/
	background: #fff;	/*背景色*/
}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;	/*リンク要素のカーソルを矢印に変更しておく*/
}

/*spanタグ（装飾用のテキスト）*/
#menubar span {
	display: block;
	font-size: 0.5em;		/*文字サイズ。50%。*/
	opacity: 0.6;			/*透明度。0.6は60%色が出た状態。*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広くとる指定*/
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定（900px以上の端末用メニューもこの設定が反映されます）*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f150";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;	/*この手の設定がないとアイコンが出ない場合があります*/
	color: #0068b3;		/*アイコンの色*/
	margin-right: 1em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*マウスオン時のアイコンの色（900px以上の端末用メニューもこの設定が反映されます）*/
a.ddmenu:hover::before {
	color: #0068b3;
}


/*メニューの設定（.shは900px未満の端末向けのメニューです）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.sh {
	display: none;
	position: fixed;overflow: auto;z-index: 99;	/*fixedはスクロールに追従しない(固定で表示)為の指定*/
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 20px;	/*上下、左右へのボックス内の余白*/
}

/*メニューの一番上の線*/
.sh > ul {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*メニュー1個あたりの下線*/
.sh > ul > li {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*装飾文字の左側余白のバランス調整*/
.sh a.ddmenu span {padding-left: 3.8em;}

/*ddmeuを持たないメニューのテキストの左側余白のバランス調整*/
.sh > ul > li > a:not(.ddmenu) {padding-left: 3.2em !important;}


/*ドロップダウンメニュー（全端末サイズ共通の設定）
---------------------------------------------------------------------------*/
.ddmenu_parent ul {
	display: none;	
}


/*ドロップダウンメニュー（900px未満の端末向けの設定）
---------------------------------------------------------------------------*/
.sh .ddmenu_parent ul li a {
	border-bottom: 1px solid #ccc;
}

.sh .ddmenu_parent ul a {
	padding-left: 65px !important;	/*ドロップダウンメニューの左側にとる余白*/
}
/*最初のドロップダウンの上の線*/
.sh .ddmenu_parent ul li:first-of-type a {
	border-top: 1px solid #ccc;
}
/*最後のドロップダウンの下線を消す*/
.sh .ddmenu_parent ul li:last-of-type a {
	border-bottom: none;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒の事で0.4は色が40%出た状態。*/
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
}


/*一覧ページの「こだわりで検索」のチェックボックス設定（CMS用）
---------------------------------------------------------------------------*/
.specialbox {
	display: inline-block;
	margin-right: 10px;
}


/*ページャー。ページナビボタン。（CMS用）
---------------------------------------------------------------------------*/
/*ページャーブロック全体*/
.pager {
	margin-top: 30px;
	text-align: center;
	color: #999;	/*文字色*/
}

/*リンクテキスト（ボタン１個あたり）*/
.pager a {
	display: inline-block;text-decoration: none;
	margin-bottom: 5px;
	padding: 0 10px;	/*上下、左右へのボタン内の余白*/
	border: 1px solid #ff8400;	/*枠線の幅、線種、色*/
	background: #ff8400;		/*背景色*/
	color: #fff;				/*文字色*/
}

/*リンクのマウスオン時*/
.pager a:hover {
	background: #fff;	/*背景色*/
	color: #ff8400;		/*文字色*/
}

/*リンクのないボタン*/
.pager span {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 10px;		/*上下、左右へのボタン内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;		/*背景色*/
	color: #999;			/*文字色*/
}


/*詳細ページ
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}

/*大きな画像のボックスの中の画像*/
#item-image img {
	width: 100%;
}

/*サムネイル画像*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin-bottom: 5px;
}

.thumbnail:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}


/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	width: 100% !important;
	height: 200px !important;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #ff8400 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}
.close {display: none;}
.db {display: block; height: 100% !important;overflow: auto !important;}





/*---------------------------------------------------------------------------
ここから下は画面が縦向きの場合の追加指定
---------------------------------------------------------------------------*/
@media screen and (orientation:portrait) {


/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*spanタグ。大きな文字の指定です。*/
mainimg-inner span {
	display: block;		/*改行させる*/
}


}


/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {


/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
.header-logo{
    position: fixed;
	z-index: 10000;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    width: calc(100% - 40px);
    left: 20px;		/*上から、左からの配置場所指定*/
}
   
.header-logo-k{
    position: fixed;
	z-index: 10000;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    width: calc(100% - 40px);
    left: 20px;		/*上から、左からの配置場所指定*/
}
    
.header-logo-k img {
    text-align: center;
    width: 400px;
}
    
header {animation-name: opa2;animation-duration: 2s;animation-fill-mode: both;}

/*ヘッダーブロック*/
header {
	position: fixed;			/*スクロールに追従しない(固定で表示)為の設定*/
	z-index: 99;
	display: flex;				/*flexボックスを使う指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、広げる量の順番。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: calc(100% - 40px);	/*幅。左右に各20pxずつ余白を入れたいので、40pxになっています。*/
	top: 80px;
    left: 20px;		/*上から、左からの配置場所指定*/
}

/*ロゴ画像*/
header #logo {
	position: static;background: none;border-radius: 0px;
	text-align: center;	/*ロゴをセンタリング*/
	padding: 0 20px;	/*上下、左右への余白*/
	width: 150px;		/*ロゴ画像の幅*/
}


/*menubar（.pcは900px以上の端末向けのメニューです）
---------------------------------------------------------------------------*/
#menubar {height: auto;overflow: visible;}

/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}

/*メニューのボックス全体の設定*/
.pc {
	display: block;
	flex: 1;
}

.pc > ul {
	display: flex;
	justify-content: space-between;
	flex: 1;
}

/*メニュー１個あたりの設定*/
.pc li {
	text-align: center;	/*テキストをセンタリング*/
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ddmenu ulの幅となる基準を作っておく*/
}


/*ドロップダウンメニュー（900px以上の端末向けの設定）
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.pc ul ul {
	position: absolute;			/*絶対配置するための指定*/
	width: 100%;				/*親のliタグに幅を合わせる*/
}

/*メニュー１個ごとに入れる線*/
.pc .ddmenu_parent ul li a {
	border: 1px solid #ccc;
	border-top: none;
}

/*最初のドロップダウンにのみ上の線を入れる*/
.pc .ddmenu_parent ul li:first-of-type a {
	border-top: 1px solid #ccc;
}


/*list_base.htmlの設定
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
ul.menu {
	display: flex;					/*flexボックスを使う指定*/
	flex-wrap: wrap;				/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*メニュー１個あたりの設定*/
ul.menu li {
	width: 49%;		/*幅*/
	margin-bottom: 20px;	/*メニューの上下間に空けるスペース*/
}

/*リンクテキスト*/
ul.menu a {
	padding: 20px 30px;	/*上下、左右へのメニュー内の余白*/
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*ボタンの設定*/
.pagetop a {
	right: 50px;		/*右からの配置場所指定*/
	bottom: 50px;		/*下からの配置場所指定*/
}