@charset "utf-8";

header {
    background: #e69800;	/*背景色（古いブラウザだとここの色のみが出ます）*/
    background: linear-gradient(#f7dfb1, #eebb56 49%, #e69800 50%);		/*グラデーション*/
    border: 1px solid #e69800;	/*枠線の幅、線種、色*/
}

.mt200 {
    margin-top:200px;
}

.text-center {
    text-align:center;
}

.bukken #main {
    float:left;
    width:60%;
}

.bukken #sub {
    float:right;
    width:35.5%;
}

.bukken .ta1, .ta1 td, .ta1 th {
    padding: 3px 6px;
}

span.transaction {
	text-align: center;
	display: inline-block;
	color: #FFF;	/*文字色*/
	background: #FF0000;	/*背景色*/
    padding:0px 12px;
    margin-left:12px;
    float:right;
}

span.kodawari {
	text-align: center;
	display: inline-block;
	color: #FFF;	/*文字色*/
	background: #e69800;	/*背景色*/
    padding:0px 12px;
}

.main_pic img {
    display:block;
    margin: 5px auto 1em;
    max-height:400px;
}

/*buttonに「class="btn"」を加えた場合のスタイル
---------------------------------------------------------------------------*/
.fbox button.btn,
.fbox a.btn {
	padding: 5px 10px;	/*上下、左右へのボタン内余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 3px;	/*角丸のサイズ*/
	background: #eee;	/*背景色*/
	font-size: 16px;
    line-height:2;
}
.fbox a.btn {
    text-decoration:none;
}
/*マウスオン時の設定*/
.fbox button.btn:hover,
.fbox a.btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

.fbox button.btn,
.fbox a.btn {
	padding: 5px 10px;	/*上下、左右へのボタン内余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 3px;	/*角丸のサイズ*/
	background: #eee;	/*背景色*/
	font-size: 16px;
    line-height:2;
}
.fbox a.btn {
    text-decoration:none;
    margin: 0 .5rem;
}
/*マウスオン時の設定*/
.fbox button.btn:hover,
.fbox a.btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

.fbox button.btn:disabled,
.fbox a.btn:disabled {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;	/*背景色*/
}

.bukken_button_list {
    display:inline-flex;
}

form[name=form2] {
    display:inline-block;
    margin: 0 1rem;
}

.bukken_detail th {
    text-align:left;
    width:7rem;
}


.fbox {
    display:block;
}

.order1 {
	float: left;	/*左に回り込み*/
	width: 66.5%;
}
.order2 {
	float: right;	/*右に回り込み*/
	width: 31%;
}
.order3 {
	float: left;	/*左に回り込み*/
	width: 66.5%;
}
.order4 {
	width: 100%;
}

.fclear {
    display:block;
    clear:both;
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

.fbox {
    display:flex;
}

.fbox{
    flex-direction: column;　/* 積み重なるように配置 */
}

.order1 {
	float: none;
	width: 100%;
    order: 1;　/*上から1番目に表示*/
}
.order2 {
	float: none;
	width: 100%;
    order: 2;　/*上から2番目に表示*/
}
.order3 {
	float: none;
	width: 100%;
    order: 3;　/*上から3番目に表示*/
}
.order4 {
    order: 4;　/*上から4番目に表示*/
}

.fclear {
    display:none;
}

}

.mb-1 {
    margin-bottom:2rem;
}

/*main以外のコンテンツのh2タグ設定*/
.fbox h2 {
	clear: both;
	margin-bottom: 20px;
	padding: 10px 15px;	/*上下、左右への余白*/
	font-size: 16px;	/*文字サイズ*/
	background: #e69800;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(#f7dfb1, #eebb56 49%, #e69800 50%);		/*グラデーション*/
	border: 1px solid #e69800;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/
}

/*main以外のコンテンツのh3タグ設定*/
.fbox h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 4px 15px;	/*上下、左右への余白*/
	font-size: 16px;	/*文字サイズ*/
	border: 1px solid #ccc;		/*枠線の幅、線種、色*/
}
/*h3タグの１文字目への追加設定*/
.fbox h3::first-letter {
	border-left: 3px solid #e69800;	/*左の線の幅、線種、色*/
	padding-left: 15px;				/*線とテキストとの余白*/
}

/*コンテンツの段落タグ設定*/
.fbox p {
	padding: 0px 15px 20px;	/*上、左右、下への余白*/
}
.fbox h2 + p,
.fbox h3 + p {
	margin-top: -10px;
}
.fbox section + section {
	margin-top: 30px;
}

/*SHOPPINGページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.fbox .list {
	position: relative;overflow: hidden;
	padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}
.fbox .list a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
	margin: -20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
}
/*マウスオン時の背景色*/
.fbox .list a:hover {
	background: #eee;	/*背景色*/
}
/*リンクを貼った際に出る「→」マーク*/
.fbox .list a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;text-align: center;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	background: #ccc;	/*背景色*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*円形にする*/
}
/*マウスオン時の「→」マーク*/
.fbox .list a:hover::before {
	background: #e69800;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
.fbox .list h4 {
	margin-bottom: 0.5em;	/*下に少しスペースを空ける*/
	margin-left: 34%;		/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
	color: #e69800;	/*文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.fbox .list p {
	padding: 0px !important;
	margin-left: 34%;		/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
}
/*ボックス内の画像*/
.fbox .list figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
/*最後ボックスの設定*/
.fbox .list:last-of-type {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	margin-bottom: 20px;	/*下に空けるスペース*/
}


#mainimg {
    margin-top:-40px;
}

.near_pic {
    text-align:center;
    min-height:80px;
    max-width:100%;
    margin-bottom:.25rem;
}

#check_list {
    display:none;
}

.check_pic {
    text-align:center;
    min-height:80px;
    max-width:100%;
    margin-bottom:.25rem;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#item-image img {
    max-height:600px;
    width:auto;
    margin:0 auto;
    display:block;
}

/*サムネイル画像*/
.bg_thumbnail {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;	/*枠線の幅、線種、色*/
    margin-bottom: 20px;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    flex-basis:80px;
}

.thumbnail_box {
    display:flex;
    justify-content: center;
}

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

#main .list h5 {
    margin-bottom: 0.5em;	/*下に少しスペースを空ける*/
    margin-left: 34%;
}

.ml-20px {
    margin-left: 20px;
}