@charset "utf-8";
/* CSS Document */
/*大枠のcss*/
#outer{
	width: 1260px;
	margin: 0 auto;
}
/*パンくず*/
.navitopicpath_{
	overflow: hidden;
	font-size: 12px;
	margin: 15px 10px 25px;
}
#bread-crumb-list {
	width: 100%;
	float: left;
	overflow: hidden;
}
#bread-crumb-list li{
	display: inline;
}
.navitopicpath_ a{
	margin: 0 0.5em;
	white-space: nowrap;
}
/*見出し*/
#outer .top_parts{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #2F2B55;
}
#outer .top_parts .top_txt{
	width: 54%;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 0 0 25px;
}
#outer .top_parts .top_txt h1{
	font-size: 2.3em;
	font-weight: bold;
	padding-bottom: 5px;
	line-height: 1.2;
}
#outer .top_parts .top_txt p{
	font-size: 1.3em;
	padding-top: 10px;
}
#outer .top_parts .top_img{
	width: 44%;
}
#outer .top_parts .top_img img{
	width: 100%;
}
/*ページジャンプのcss*/
#outer .jump{
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto 50px;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	z-index: 2;
	padding-bottom: 0;
	padding-top: 0;
	max-width: 100%;
}
.jump ul._genre_menu{
	width: 100%;
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin: 0;
	box-sizing: border-box;
	border: solid 2px #B05365;
	list-style: none;
	padding: 0;
}
.jump ul._genre_menu li.global_item{
	width: 50%;
	border-right: solid 2px #8C2538;
	position: relative;
}
.jump ul._genre_menu li.global_item:last-child{
	border-right-style: none;
	margin-right: 0;
}
.jump ul._genre_menu li.global_item a{
	display: block;
	padding: 20px 20px 40px 20px;
	font-weight: bold;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
	color: #8C2538;
}
.jump ul._genre_menu li.global_item a::after{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 17.5px 0 17.5px;
	border-color: #8C2538 transparent transparent transparent;
}
/*各選び方の見出し*/
h2.uline_b{
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	border-bottom: solid 5px #8C5504;
	margin-top: 45px;
	margin-bottom: 15px;
}
/*h3*/
h3.contents_h3{
	font-size: 1.8em;
	font-weight: bold;
	margin-top: 35px;
	margin-bottom: 20px;
	padding-left: 5px;
}
h3.contents_h3::before{
content: "┃"}
/*3個並べ*/
.contents{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.contents .item{
	width: 32%;
	box-sizing: border-box;
	border: solid 1px #cccccc;
	margin-bottom: 30px;
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.contents::after{
	content: "";
	display: block;
	width: 32%;
	height: 0;
}
.contents .item .item_img{
	width: 100%;
}
.contents .item .item_img img{
	width: 100%;
}
.cotents .item .item_txt{
	width: 100%;
}
.item .item_txt{
	margin-bottom: 15px;
}
.item .item_txt h4{
	font-size: 1.5em;
	font-weight: bold;
	color: #000000;
	margin-bottom: 5px;
}
.item .item_txt p{
	line-height: 2;
	margin-bottom: 20px;
}
/*4個のところ*/
.contents_4{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.contents_4 .item{
	width: 24%;
	box-sizing: border-box;
	border: solid 1px #cccccc;
	margin-bottom: 20px;
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.contents_4::after,.contents_4::before{
	content: "";
	display: block;
	width: 24%;
	height: 0;
}
.contents_4::before{
	order: 1;
}
.contents_4 .item .item_img{
	width: 100%;
}
.contents_4 .item .item_img img{
	width: 100%;
}
.contents_4 .item .item_txt{
	padding: 0 10px;
	margin-bottom: 20px;
	font-size: 0.9em;
}
.item_ex {
	font-size: 15px;
	margin-bottom: 15px;
	padding-left: 5px;
	padding-right: 5px;
}
/*商品一覧はこちらのボタン*/
.contents .item ul.btns{
	margin-top: auto;
	margin-bottom: 12px;
	padding: 0 10px;
}
.contents .item ul.btns li.btn_gazou{
	position: relative;
}
.item .btn_gazou a{
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff;
	background-color: #906F1A;
	font-weight: bold;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
}
.item .btn_gazou a::after{
	content: url(https://shimojima.live/img/freepage/food_delivery/ico_ya.png);line-height: 0;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
}
/*おすすめ一覧*/
#outer .recommend{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin: 0 auto;
}
#outer .recommend .item{
	width: 19%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	margin-bottom: 20px;
	border: solid 1px #cccccc;
	padding: 0 0 1rem;
}
#outer .recommend .item a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	transition: .3s;
}
#outer .recommend .item img{
	width: 100%;
}
#outer .recommend .item p{
	padding: 5px 5px 0;
}
#outer .btn_gazou2{
	width: 100%;
	font-size: 10px;
	margin-bottom: 10px;
}
/*.section .btn_gazou a{
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff;
	background-color: #90A6A7;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
}
*/
#outer .btn_gazou2 a{
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto auto 50px auto;
	padding: 10px 4rem;
	font-weight: bold;
	border-radius: 100vh;
	background: #006DC7;
	color: #ffffff!important;
	font-size: 2em;
}
#outer .btn_gazou2 a::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 35%;
	transform: translateY(-50%);
	border: 10px solid transparent;
	border-left: 13px solid #ffffff;
	/*content: url(https://shimojima.live/img/freepage/food_delivery/ico_ya.png);line-height: 0;
	position: absolute;
	top: 50%;
	right: 35%;
	transform: translateY(-50%);
	*/
}

#outer .btn_gazou3{
	width: 100%;
	font-size: 10px;
	margin-bottom: 10px;
}
/*.section .btn_gazou a{
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff;
	background-color: #90A6A7;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
}
*/
#outer .btn_gazou3 a{
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto auto 50px auto;
	padding: 10px 4rem;
	font-weight: bold;
	border-radius: 100vh;
	background: #8F2A52;
	color: #ffffff!important;
	font-size: 2em;
}
#outer .btn_gazou3 a::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 35%;
	transform: translateY(-50%);
	border: 10px solid transparent;
	border-left: 13px solid #ffffff;
	/*content: url(https://shimojima.live/img/freepage/food_delivery/ico_ya.png);line-height: 0;
	position: absolute;
	top: 50%;
	right: 35%;
	transform: translateY(-50%);
	*/
}
/*関連記事のところ*/
.column{
	width: 100%;
	margin-bottom: 45px;
}
.column h3.column_h3{
	font-size: 1.5em;
	font-weight: bold;
	margin: 35px 0 15px;
}
.column h3.column_h3::before{
content: "┃"}
.contents_01{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
.contents_01 .item_{
	width: 32%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.contents_01::after{
	content: "";
	display: block;
	width: 32%;
	height: 0;
}
.contents_01 .item_ ul.btns_{
	margin-top: auto;
	margin-bottom: 12px;
	padding: 0 10px;
}
.contents_01 .item_ ukl.btns_ li.btn_gazou_{
	position: relative;
}
.item_ .btn_gazou_ a{
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff;
	background-color: #006DC7;
	font-weight: bold;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
}
.column ul.tokusyu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.column ul.tokusyu li{
	width: 23%;
	margin-bottom: 10px;
}
.column ul.tokusyu li img{
	width: 100%;
	height: auto;
}
.column ul.tokusyu::before{
	content: "";
	display: block;
	width: 23%;
	order: 1;
}
.column ul.tokusyu::after{
	content: "";
	display: block;
	width: 23%;
}

/* 表幅の統一（禁則回避のためインラインstyleは使わない） */
#outer .bx-fixed { table-layout: fixed; }
#outer .bx-col-spec { width: 30%; }
#outer .bx-col-size { width: 70%; }


#outer .bx-tab-labels a {
  display: inline-block;
  min-width: 180px;
  text-align: center;
  padding: 10px 14px;
  font-size: 15px;
  white-space: nowrap;
}
/* カード（= .item）を相対配置にして底に余白を確保 */
.contents_4 .item{
  position: relative;
  padding-bottom: 84px;   /* ボタンの高さ＋下余白（数値はサイトに合わせて微調整） */
}

/* ボタンブロックを下端に固定 */
.contents_4 .btns{
  position: absolute;
  left: 24px;             /* カードの内側余白に合わせて調整 */
  right: 24px;
  bottom: 24px;
  margin: 0;              /* 既存の下マージンがあれば打ち消し */
}

/* 念のため、ボタンは横幅いっぱいに */
.contents_4 .btns .btn_gazou a{
  display: block;
  width: 100%;
}

#outer .jump {
    margin-bottom: 30px;
}
 
#outer h2.uline_b {
    margin-top: 25px;
}



/*スマホの設定*/
@media screen and (max-width: 768px) {
	#outer{
		width: 100%;
	}
	/*見出し*/
	#outer .top_parts{
		flex-direction: column-reverse;
	}
	#outer .top_parts .top_txt{
		width: 100%;
		padding: 15px;
	}
	#outer .top_parts .top_txt h1{
		font-size: 1.2em;
		padding: 5px 5px 0 5px;
	}
	#outer .top_parts .top_txt p{
		font-size: 1em;
		padding: 5px;
	}
	#outer .top_parts .top_img{
		width: 100%;
	}
	#outer .top_parts .top_img img{
		width: 100%;
	}
	/*ページジャンプ*/
	#outer .jump{
		width: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 1rem;
		position: static;
	}
	#outer .jump ul._genre_menu{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 0.9em;
		border-right-style: none;
		border-left-style: none;
		border-bottom-style: none;
	}
	#outer .jump ul._genre_menu li.global_item{
		border-left: solid 1px #8C2538;
		width: 50%;
		border-bottom: solid 1px #8C2538;
		box-sizing: border-box;
		border-right: solid 1px #8C2538;
	}
	.jump ul._genre_menu li.global_item:nth-child(2n+1){
		border-right: none;
	}
	#outer .jump ul._genre_menu li.global_item a{
		width: 100%;
		margin: 0 auto;
		padding: 5px 7px;
		font-size: 12px;
		text-align: center;
	}
	#outer .jump ul._genre_menu li.global_item a::before{
		position: absolute;
		content: '';
		top: 0.7em;
		left: 1em;
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 6px 0 6px 9px;
		border-color: transparent transparent transparent #8C2538;
	}
	#outer .jump ul._genre_menu li.global_item a::after{
		content: none;
	}
	/*h2*/
	h2.uline_b{
		font-size: 1.5em;
		font-weight: bold;
		margin: 50px 10px 25px;
		padding-bottom: 5px;
		line-height: 1.2;
	}
	/*h3*/
	#outer h3.contents_h3{
		font-size: 17px;
		font-weight: bold;
		margin: 25px 0 10px 0;
	}
	#outer h3.contents_h3{
	content: "┃"}
	/*3個のところ*/
	.contents{
		padding: 0 10px;
	}
	.contents .item{
		width: 49%;
		margin: 0 0 5px 0;
		padding-bottom: 15px;
	}
	.contents::after{
		content: none;
	}
	.contents .item .item_txt{
		padding: 0 5px;
		margin-bottom: 20px;
		font-size: 0.8em;
	}
	.contents .item .item_txt h4{
		padding: 5px;
		font-size: 1.2em;
	}
	/*4個のところ*/
	.contents_4{
		padding: 0 10px;
	}
	.contents_4 .item{
		width: 49%;
		margin: 0 0 5px 0;
		padding-bottom: 15px;
	}
	.contents_4::after,.contents_4::before{
		content: none;
	}
	.contents_4 .item .item_txt{
		padding: 0 5px;
		margin-bottom: 20px;
		font-size: 0.8em;
	}
	/*リンクボタンのところ*/
	.contents .item ul.btns{
		margin-top: auto;
		margin-bottom: 10px;
		padding: 0 5px;
	}
	.contents .item ul.btns li.btn_gazou{
		position: relative;
	}
	.contents .item ul.btns li.btn_gazou a{
		font-size: 0.7em;
		border-radius: 2em;
		padding: 1em 0 1em 1em;
		text-align: left;
		text-decoration: none;
	}
	.contents_4 .item ul.btns{
		margin-top: auto;
		margin-bottom: 10px;
		padding: 0 5px;
	}
	.contents_4 .item ul.btns li.btn_gazou{
		position: relative;
	}
	.contents_4 .item ul.btns li.btn_gazou a{
		font-size: 0.7em;
		border-radius: 2em;
		padding: 1em 0 1em 1em;
		text-align: left;
		text-decoration: none;
	}
	/*おすすめ商品一覧*/
	#outer .recommend{
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 10px;
	}
	#outer .recommend .item{
		width: 32%;
		font-size: 0.8em;
	}
	.recommend::after{
		content: "";
		display: block;
		width: 32%;
		height: 0;
	}
	#outer .btn_gazou2 {
		font-size: 10px;
	}
	#outer .btn_gazou2 a{
		padding: 10px 0;
		background-color: #006DC7;
		border-radius: 100vh;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		display: block;
		position: relative;
		transition: .3s;
		margin: 5px 5px 50px 5px;
	}
	#outer .btn_gazou2 a::after{
		content: "";
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translateY(-50%);
		border: 10px solid transparent;
		border-left: 13px solid #ffffff;
	}
    	#outer .btn_gazou3 {
		font-size: 10px;
	}
	#outer .btn_gazou3 a{
		padding: 10px 0;
		background-color: #6A0F5A3;
		border-radius: 100vh;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		display: block;
		position: relative;
		transition: .3s;
		margin: 5px 5px 50px 5px;
        text-decoration: none; /* 下線を消す */
	}
	#outer .btn_gazou3 a::after{
		content: none;
	}
	/*関連記事のとこ*/
	.column{
		width: 100%;
	}
	.column h3.column_h3{
		padding: 5px;
		font-size: 1.3em;
		margin: 0;
	}
	.column h3.column_h3::before{
	content: "┃"}
	.column ul.tokusyu{
		width: 96%;
		margin: 0 auto;
		padding: 0;
	}
	.column ul.tokusyu li{
		width: 49%;
	}
	.contents_01{
		padding: 0 10px;
	}
	.contents_01 .item_{
		width: 100%;
		margin: 5px auto;
		padding: 0;
	}
	.contents_01::after{
		content: none;
	}
	.contents_01 .item_ ul.btns_{
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	.contents_01 .item_ ul.btns_ li.btn_gazou_{
		position: relative;
	}
	.item_ .btn_gazou_ a{
		padding: 10px 0;
		background-color: #006DC7;
		border-radius: 100vh;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		display: block;
		position: relative;
		transition: .3s;
		margin: 5px;
	}
}

/* ===== bx：タブ＋アコーディオン＆テーブル（#outer スコープ｜統合済み） ===== */

/* タブ見出し（リンク化） */
#outer .bx-tab-labels{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0;
}
#outer .bx-tab-labels a{
  display:inline-block;
  flex:1 1 180px;
  text-align:center;
  padding:10px 18px;
  font-weight:700;
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  background:#3FA3E3;
  color:#fff;
  text-decoration:none;
}
#outer .bx-tab-labels a:hover{ filter:brightness(1.08); }

/* ラジオは残してOK（非表示） */
#outer .bx-tabs-njs input[type="radio"]{ display:none; }

/* 全パネル常時表示（だだっと縦並び） */
#outer .bx-panels .bx-panel{ display:block !important; }
#outer .bx-panel{ margin:12px 0 24px; }

/* 見出し（h4） */
#outer .bx-h4{ font-size:1.15rem; font-weight:700; color:#333; margin:10px 0; }

/* アコーディオン（details） */
#outer .bx-acc{
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
#outer .bx-acc + .bx-acc{ margin-top:10px; }
#outer .bx-acc-sum{
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:12px 14px; cursor:pointer; font-weight:700;
}
#outer .bx-acc-sum::-webkit-details-marker{ display:none; }
#outer .bx-acc-sum::after{ content:"＋"; font-weight:900; }
#outer .bx-acc[open] .bx-acc-sum::after{ content:"－"; }
#outer .bx-acc-meta{ color:#666; font-size:.92rem; }

/* 画像＋表レイアウト（PC基本） */
#outer .bx-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr 2fr;
  align-items:start;
  padding:12px;
  border-top:1px solid #d9d9d9;
}
#outer .bx-fig{ margin:0; min-height:160px; display:flex; align-items:center; justify-content:center; background:#fff; }
#outer .bx-fig img{ max-width:100%; height:auto; display:block; }

/* テーブル（センター揃え＋枠線） */
#outer .bx-tablewrap{ overflow:auto; background:#fff; }
#outer .bx-table{
  width:100%;
  border-collapse:collapse;
  color:#333;
  min-width:360px;
}
#outer .bx-table thead th{
  background:#f3c6d9;
  color:#333;
  font-weight:700;
  padding:8px 10px;
  text-align:center;
  border:1px solid #ddd;
}
#outer .bx-table tbody td{
  padding:8px 10px;
  border:1px solid #ddd;
  text-align:center;
  font-size:.95rem;
  line-height:1.5;
}
/* 固定幅は解除（自然な配分／モバイル比率は@mediaで上書き） */
#outer .bx-table .col-spec,
#outer .bx-table .col-size{ width:auto; }

/* アンカーで飛んだ時に見出しに被らないよう余白 */
#outer .bx-panel { scroll-margin-top: 100px; }

/* すべての表に適用 */
#outer .bx-fixed {
  table-layout: fixed;
  width: 100%;s
  border-collapse: collapse; /* 隙間をなくす */
}

/* 列幅を統一（2列用） */
#outer .bx-col-spec {
  width: 30%;
}
#outer .bx-col-size {
  width: 70%;
}

/* 枠線と中央寄せ */
#outer .bx-table th,
#outer .bx-table td {
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}


@media screen and (max-width: 768px){
  #outer{ width:100%; } /* 既存のレイアウト意図に合わせて明示 */
  #outer .bx-grid{ grid-template-columns:1fr; gap:10px; padding:10px; }
  #outer .bx-fig{ min-height:auto; justify-content:flex-start; }
  #outer .bx-fig img{ width:100%; height:auto; }
  #outer .bx-fig figcaption{ font-size:12px; color:#666; margin-top:4px; text-align:left; }

  #outer .bx-tablewrap{ overflow-x:visible; }
  #outer .bx-table{ width:100%; min-width:0; table-layout:fixed; font-size:14px; }
  #outer .bx-table thead th{ padding:8px 8px; font-size:14px; }
  #outer .bx-table tbody td{ padding:8px 8px; line-height:1.45; word-break:break-word; }

  /* 列比率（読みやすさ優先） */
  #outer .bx-table thead th:first-child,
  #outer .bx-table tbody td:first-child{ width:38% !important; }
  #outer .bx-table thead th:last-child,
  #outer .bx-table tbody td:last-child{ width:62% !important; }
}

/* クリスタルボックスの規格リンクを改行させない */
#outer #panel-crystal .bx-table td:first-child a {
  white-space: nowrap;         /* 折返し禁止 */
  display: inline-block;
}

/* スマホ幅では1列目を広げる（=リンクを収める） */
@media (max-width: 414px) {
  #outer #panel-crystal .bx-col-spec { width: 70%; }  /* 既定30%→46%に拡張 */
  #outer #panel-crystal .bx-col-size { width: 54%; }  /* 既定70%→54%に縮小 */
  #outer #panel-crystal .bx-table td, 
  #outer #panel-crystal .bx-table th {
    padding-left: 10px;
    padding-right: 6px;        /* ちょい詰めて収まりUP */
  }
  #outer #panel-crystal .bx-table td:first-child a {
    font-size: 14px;           /* ほんの少しだけ小さく（好みで） */
    letter-spacing: 0;
  }
}

@media (max-width: 768px) {
  #outer #panel-crystal .bx-table {
    table-layout: auto;
  }
  #outer #panel-crystal .bx-col-spec {
    width: 55%;
    white-space: nowrap;
  }
  #outer #panel-crystal .bx-col-size {
    width: 45%;
  }
}
@media (max-width: 768px){
  /* クリスタルだけ：固定レイアウト解除＋最小幅も外す */
  #outer #panel-crystal .bx-table{
    table-layout: auto !important;
    min-width: 0 !important;
  }

  /* 規格列を広く、サイズ列を狭く */
  #outer #panel-crystal .bx-col-spec{ width: 56% !important; }
  #outer #panel-crystal .bx-col-size{ width: 44% !important; }

  /* 規格テキストの折り返しを完全に止める */
  #outer #panel-crystal .bx-table td:first-child,
  #outer #panel-crystal .bx-table th:first-child{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  #outer #panel-crystal .bx-table td:first-child a{
    display: inline-block;
    max-width: 100%;
    white-space: nowrap !important;
  }
}
/* 読みやすさ微調整（共通） */
#outer .bx-col-spec { width: 34%; }
#outer .bx-col-size { width: 66%; }

/* クリスタルだけ少し広め（必要なら） */
#outer #panel-crystal .bx-col-spec { width: 42%; }
#outer #panel-crystal .bx-col-size { width: 58%; }

/* iPhoneなど狭幅時 */
@media (max-width: 480px) {
  #outer .bx-col-spec { width: 40%; }
  #outer .bx-col-size { width: 60%; }
  #outer #panel-crystal .bx-col-spec { width: 44%; }
  #outer .bx-table th, #outer .bx-table td {
    word-break: keep-all;
    white-space: nowrap;
  }
}
@media (max-width: 560px) {
  .contents_4 .item {
    padding-bottom: 60px;
  }
  .contents_4 .btns {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .contents_4 .btns .btn_gazou a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 36x;
    padding: 0;
    box-sizing: border-box;
  }
}