@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/****************************************

          共通

*****************************************/
body {
  background: #fff !important;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a { 
  color:#00e;
  text-decoration:none;
}

a:hover {
  color:#e00;
}

img {
  border:0;
  height:auto;
  max-width:100%;
  vertical-align:middle;
  width /***/:auto;
}

a img {
  filter: alpha(opacity=100);
  opacity:1.0;
}

a:hover img {
  filter: alpha(opacity=65);
  opacity:.8;
}

h3 {
	border-top:2px solid #ddd;
	clear:both;
	display:block;
	margin:0;
	padding:1.5% 0 2%;
}

h4 {
	margin:0;
	padding:0;
}

.access h4 {
  background: #063;
  color: #fff;
  font-weight: normal;
  margin: 2% 0 3%;
  padding: 1.5%;
}

h5 {
	border-top:3px double #ddd;
	display:block;
	margin:2% 0;
	padding:2% 0 0;
}

table {
	border:1px solid #888;
	border-collapse:collapse;
	margin:0 0 3%;
	text-align:left;
	width:100%;
}

table tr:nth-of-type(2n+1) {
  background-color: transparent;
}

th {
	background:#f9f9f9;
	font-weight:normal;
	padding:1.5%;
	width:23%;
}

td {
	padding:1.5% 1%;
}

ul,ol {
	margin:0;
	padding:0;
}

ul ul{
	margin-left:1em;
}

li {
	list-style:none;
}

.liStyle {
	margin:0 0 0 3%;
}

.liStyle li {
	list-style:circle
}

td li {
	margin:0;
}

dl {
	margin:0;
	overflow: hidden;
	padding:0;
	width:100%;
}
dt {
	clear:left;
	float:left;
	text-align:right;
	width:18.5%;
}
dd {
	background:#fff;
	margin-left:22%;
}

hr {
	margin-bottom:1em;
}

.m-top { margin-top:4%; }
.m-bottom { margin-bottom:1%; }

.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.center {
	text-align:center;
}

.accessSpan {
	display:block;
	margin-top:.8em;
}

/*ページネーションに表示される「次のページ」を消す*/
.pagination-next-link {
  display: none;
}
/****************************************
          レイアウト
*****************************************/
.no-sidebar .content .main {
  margin: auto;
  max-width: 1200px;
}
.archive-title .fa-folder-open {
  display: none;
}
/************************************
** パンくずリスト
************************************/
/*アイコンをまとめて非表示にする*/
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file-o {
	display: none;
}

.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
  margin: 0;
}

/****************************************
          ヘッダー
*****************************************/
.header div.header-in {
  flex-direction: row;
  justify-content: space-between;
}
.logo-header {
  flex-grow: 1;
}
.logo {
  text-align: left;
}
.header-tel-area {
  margin: 8px 16px 0 0;
  width: 30%;
}
.header-tel-area figure {
  margin-bottom: 0 !important;
}
.navi-in > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.navi-in > ul li {
  text-align:center;
  width: calc(100% / 6);
}

.navi-in > ul li a {
  background:#f5f5f5;
  color: #222;
  display:block;
  padding:5% 0;
}

.navi-in > ul li a:hover {
  background:#ddd;
  color: #222;
}
/****************************************
          フッター
*****************************************/
.footer {
  background-color: #f5f5f5;
}

.footer-info {
  padding: clamp(16px,2.4vw,24px);
}
.footer-info .wp-block-column {
  padding: 16px;
}

/****************************************
          メイン
*****************************************/
main a { text-decoration:underline; }

main .w-box01 {
	background:#ffed5a;
	margin-bottom:2%;
  max-width: 1000px;
	padding:1% 2% 2%;
	text-align:center;
}

main .w-box01 p {
	font-weight:bold;
	margin:0 1em .5em;
}

main .title {
	border-top:3px solid #ccc;
	display:block;
	font-weight:bold;
	padding:2% 0;
}

/****************************************
          商品表示
*****************************************/
/* ========トップページ======== */
.top-eyecatch .wp-block-image {
  margin-bottom: 0;
}
.medama {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.medama div {
  padding: 2%;
  width: calc(100% / 4);
}

.medama div img {
  margin-bottom:1%;
}

/* ========商品一覧======== */
.itemset {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

span.kensuuhyouji {
  clear:both;
  display:block;
  margin:20px 20px 10px;
  text-align:right;
}

.itemset div {
  padding: 2%;
  width: calc(100% / 5);
}

.itemset div img {
  margin-bottom:1%;
}

.souryou {
  color: #f36;
  font-weight: bold;
}

.forsale-itembox__sold {
  position: relative
}
.forsale-itembox__sold:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 112px 112px 0 0;
}
.forsale-itembox__sold:before {
    border-color: #111 transparent transparent transparent;
}
.forsale-itembox__sold:after {
    position: absolute;
    transform: rotate(315deg);
    display: block;
    font-size: 18px;
    white-space: pre;
    color: #fff;
    top: 30px;
    left: 10px;
    text-align: center;
    z-index: 2;
    letter-spacing: 2px;
    line-height: 1.2;
}
.forsale-itembox__sold:after {
    content: "SOLD";
}
/* ========商品個別ページ======== */
.single-item {
  margin-top:1em;
}

.single-item .left {
	text-align:center;
	width:50%;
}

.single-item .left img {
  margin:0 0 20px;
}

.single-item .right {
  letter-spacing:0;
	width:48%;
}

.single-item .right th, .single-item .right td {
	padding: 2%;
}

.single-item .right th {
	width:28%;
}

.c-red {
  color:#f00;
}

.price {
  font-size:24px;
  font-weight:bold;
}

.zaiko {
  display:block;
  margin:1em 0;
}

.tenji {
	background:#063;
	border-radius:6px;
	color:#fff;
	display:block;
	letter-spacing:2px;
	margin:1% 0 3%;
	padding:2%;
	text-align:center;
}

.single-item .info-area {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2,1fr);
  margin-bottom: 16px;
}

.single-item dl {
	line-height:1.4;
	margin:0 0 1%;
}

.single-item dt {
	background:#e9e9e9;
	float:none;
	font-weight:bold;
	margin:20px 0;
	padding:1% 2%;
	text-align:left;
	width:100%;
}

.single-item dd {
	background:#fff;
	margin-left:0;
	padding:0 2%;
}

/****************************************

    ユニットハウス店舗情報

*****************************************/
.map-pc {
  margin: 0 0 24px;
}

.unit-shop table {
  margin: 0 0 16px;
  table-layout: fixed;
}

.unit-shop th {
  text-align: left;
}

.unit-shop th {
  padding: .5% 2%;
}

.unit-shop thead th {
  font-weight: normal;
}

.unit-shop tbody th {
  border-bottom: 1px solid #bbb;
  font-weight: normal;
}

.unit-shop table span {
  display: block;
}

.unit-shop table img {
  width: 50%;
}

.btn-margin {
  margin-bottom: 12px;
}

.th-touhoku {
  background: #c1e6f9;
}

.th-kantou {
  background: #bbe2dc;
}

.th-cyuubu {
  background: #dcecc5;
}

.th-kinki {
  background: #feedc1;
}

.th-cyuugoku {
  background: #f8d5e4;
}

.th-shikoku {
  background: #f1e9d4;
}

.th-Kyushu {
  background: #f9d7d4;
}

.unit-shop tbody th span {
  font-weight: bold;
}

.unit-shop tbody td {
  border-bottom: 1px solid #bbb;
  padding: 32px 2%;
}

/****************************************

          各店舗ページ

*****************************************/
.tableFixed {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tableFixed div {
  border: 1px solid #888;
  margin-bottom: 2%;
  padding: 2%;
  width: calc(96% / 2);
}

.tableFixed div span {
  display: block;
  font-weight: bold;
  margin-bottom: 2%;
}

.access table thead th {
  background: #222;
  color: #fff;
}

/****************************************

          Form

*****************************************/
input[type="text"],
input[type="email"],
textarea {
	border: 1px solid #999;
	border-radius: 5px;
	outline: none;
	padding:1%;
	vertical-align: bottom;
	width:97%;
}

#comment-area input[type="text"],
#comment-area textarea{
	display: block;
}

textarea {
	overflow: auto;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	background: #fff;
	border: 1px solid #999;
	box-shadow: 0 0 3px rgba(0,0,0,1);
 	color: #666;
}

#searchform {
	margin:1% 0;
	padding:0;
}

#s {
  margin-right:.5%;
  width:30%;
}

input[type="search"],
input[type="submit"] {
	border: 1px solid #999;
	border-radius: 6px;
	padding: .5% 1.5%;
}

input[type="search"] {
	outline: none;
	vertical-align: bottom;
	width:20%;
}

input[type="search"]:focus,
textarea:focus {
	background: #fff;
	border: 1px solid #444;
	box-shadow: 0 0 3px rgba(0,0,0,1);
}

.button,
button,
input[type="submit"] {
	background:#00c;
	color:#fff;
	cursor: pointer;
	display: inline-block;
	line-height: normal;
	text-decoration: none;
  -webkit-appearance: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background:#03f;
}
	
/* ========お問い合わせ======== */
.mailform th {
	width:27%;
}

.mailform p {
	margin:2% 4%;
	text-align:left;
}

.mailform .error {
	display:block !important;
	margin-top:1% !important;
}

.must {
	background:#f30;
	border-radius: 4px;
	color:#ffe527;
	float:left;
	font-size:14px;
	font-weight:normal;
	margin-right:3%;
	padding:1%;
	text-align:center;
	width:40px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media (min-width: 835px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
@media screen and (max-width: 834px) {
main .w-box01 {
	text-align:left;
}
/****************************************
    ヘッダー
*****************************************/
.header div.header-in {
  flex-direction: column;
  justify-content: flex-start;
}
.logo-header {
  flex-grow: 0;
  max-width: 60%; 
}
.header-tel-area {
  display: none;
}
/****************************************
    ユニットハウス店舗情報
*****************************************/
.unit-shop table img {
  width: 80%;
}
}
@media screen and (max-width: 640px) {
h1.entry-title {
  padding: 0;
}
.single-post h1 {
  font-size: 18px;
}
table {
	margin-left:auto;
	margin-right:auto;
	width:96%;
}
	
th, td, .mailform th, .single-item .right th {
	display:block;
	padding:2%;
	width:100%;
}

.liStyle {
	margin:0 0 0 8%;
}

dt {
	width:30%;
}

dd {
	margin-left:32%;
}

main .w-box01 p {
	font-weight:normal;
	margin:0 .5em .5em;
}
/************************************
** パンくずリスト
************************************/
.breadcrumb {
  overflow-x: scroll;
  word-break: keep-all;
  white-space: nowrap;
}
/* ========トップページ======== */
.medama div {
  padding: 2%;
  width: calc(98% / 2);
}
/* ========商品一覧======== */
.itemset div {
  padding: 2%;
  width: calc(98% / 2);
}
/* ========商品個別ページ======== */
.single-item .left, .single-item .right {
	width:100%;
}
.single-item .left {
	display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.single-item .left div {
  flex: 0 0 96%;
  padding: 0 2% 0 0;
  position: relative;/*相対配置*/
}
.single-item .left .first:after {
	background:#fff;
  position: absolute;/*絶対配置*/
  color:#444;
	content:"NEXT＞";
	font-weight:bold;
	padding:1% 2% .5%;
  top:45%;
  right:0;
}
.single-item .left img {
	margin:0 0 2%;
}
/* ========検索フォーム======== */
#s {
  width:68%;
}
/* ========お問い合わせ======== */
.mailform {
	padding:0 0 5%;
}
/****************************************
    ユニットハウス店舗情報
*****************************************/
.unit-shop th, .unit-shop td {
  display: block;
}
.unit-shop tbody th, .unit-shop tbody td {
  border-bottom: none;
}
.unit-shop tbody th span {
  font-weight: normal;
  margin: 2% 0;
  padding: 1.5% 4%;
}
.unit-shop table img {
  width: 80%;
}
.unit-shop tbody td {
  padding: 2%;
}
.th-touhoku,
.th-kantou,
.th-cyuubu,
.th-kinki,
.th-cyuugoku,
.th-shikoku
{
  background: #f5f5f5;
}
.touhoku {
  background: #c1e6f9;
}
.kantou {
  background: #bbe2dc;
}
.cyuubu {
  background: #dcecc5;
}
.kinki {
  background: #feedc1;
}
.cyuugoku {
  background: #f8d5e4;
}
.shikoku {
  background: #f1e9d4;
}
/****************************************
          各店舗ページ
*****************************************/
.tableFixed {
	display: block;
}
.tableFixed div {
  padding: 3%;
  width: calc(100% / 1);
}
}