@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
*/

/****************************************
          共通
*****************************************/
:root {
  --cocoon-red-color: #e00;
  --cocoon-xx-thin-color: #fafafa;
}
body {
  background: #fff !important;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.br-pc {
  display: none;
}
.info-tel {
  margin-bottom: 0 !important;
}
.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
  margin-bottom: clamp(16px,2.4vw,24px);
}
.wp-block-group:last-child {
  margin-bottom: clamp(16px,2.4vw,24px) !important;
}
a,
.a-wrap h2, .related-entry-card-title { 
  color:#00e;
}
.a-wrap h2, .related-entry-card-title {
  text-decoration: underline;
}
a:hover,
a.entry-card-wrap:hover .entry-card-title,
a.related-entry-card-wrap:hover .related-entry-card-title {
  color: var(--cocoon-red-color);
}
.a-wrap:hover {
  background: none;
}
img {
  border:0;
  height:auto;
  max-width:100%;
  vertical-align:middle;
  width /***/:auto;
}
a:hover img {
  filter: alpha(opacity=80);
  opacity:.8;
}
.page h1 {
  font-size: clamp(22px,3.2vw,32px);
  margin-bottom: 32px;
}
.single-post h1 {
  font-size: clamp(17px,2.2vw,22px);
}
.article h2 {
  font-size: clamp(17px,2.2vw,22px);
  padding: 8px 16px;
}
.article h3 {
  border: none;
}
.article h4 {
  border: none;
}
table {
  margin: 32px 0;
	text-align:left;
}
table tr:nth-of-type(2n+1) {
  background-color: transparent;
}
table th {
	padding: 16px;
	width: 24%;
}
table td {
	padding: 16px;
}
.article ul,
.article ol {
  padding-left: 0;
}
li {
	list-style:none;
}
/*ご利用案内ページで使用*/
.liStyle {
	margin:0 0 0 3%;
}
.liStyle li {
	list-style:circle
}
.center {
  text-align:center;
}
.accessSpan {
	display:block;
	margin-top:.8em;
}
.u-mb-16 {
  margin-bottom: 16px;
}
/*ページネーションに表示される「次のページ」を消す*/
.pagination-next-link {
  display: none;
}
/****************************************
          レイアウト
*****************************************/
.no-sidebar .content .main {
  margin: auto;
  max-width: 1200px;
}
.archive-title .fa-folder-open {
  display: none;
}
.br-sp {
  display: block;
}
/************************************
** パンくずリスト
************************************/
/*アイコンをまとめて非表示にする*/
.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: var(--cocoon-xx-thin-color);
  color: #333;
  display:block;
  padding:5% 0;
}
.navi-in > ul li a:hover {
  background:#eee;
  color: #333;
}
/****************************************
          フッター
*****************************************/
.footer {
  background-color: var(--cocoon-xx-thin-color);
}
.footer-info {
  padding: clamp(16px,2.4vw,24px);
}
.footer-info .wp-block-column {
  padding: 16px;
}
/************************************
** 内容
************************************/
.entry-content {
  margin-bottom: 2em;
}
/****************************************
          メイン
*****************************************/
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;
}
/* ========トップページ======== */
.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%;
}
/****************************************
          商品表示
*****************************************/
/* ========商品一覧======== */
.related-entry-card-title, .entry-card-title {
  font-weight: normal;
}
.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 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2,1fr);
}
.item-images img {
  margin-bottom: 16px;
}
.c-red {
  color: var(--cocoon-red-color);
}
.price {
  font-size:24px;
  font-weight:bold;
}
.zaiko {
  display:block;
  margin:1em 0;
}
.tenji {
	background:#063;
	border-radius:6px;
	color:#fff;
	display:block;
  font-size: clamp(20px,2.4vw,24px);
	letter-spacing:2px;
	margin:1% 0 3%;
	padding:2%;
	text-align:center;
}
.item-description .info-area {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2,1fr);
  margin-bottom: 16px;
}
/****************************************
          シャーシとのセット販売
*****************************************/
.chassis-explanation {
	box-shadow: 0 0 4px rgba(0,0,0,.3);
  padding: clamp(24px,5.6vw,56px) 16px;
}
.trailer-explanation {
  border: 8px solid #eee;
  border-radius: 12px;
  font-size: clamp(18px,2.8vw,28px);
  font-weight: bold;
  padding: 32px 16px;
  text-align: center;
}
.trailer-explanation span:not(:last-child) {
  background: var(--cocoon-red-color);
  color: #fff;
  padding: 6px 10px;
}
.chassis-set-merit {
  background: #fcf6ea;
  border-radius: 8px;
  padding: 32px 16px;
}
.page-id-1319 .main h2 {
  background: none;
  color: var(--cocoon-red-color);
  font-size: clamp(24px,4.8vw,48px);
  margin-bottom: 24px;
  padding-top: 8px;
}
.chassis-set-merit h2 {
  text-align: center;
}
.chassis-set-merit h3 {
  background: none;
  font-size: 23px;
  padding: 0;
  text-align: center;
}
.chassis-set-merit div div {
  padding: 32px 20px;
}
.LP-page-tel {
  font-size: clamp(34px,4.3vw,43px);
  font-weight: bold;
  margin-bottom: 0 !important;
  text-align: center;
}
.LP-page-mail {
  font-size: clamp(24px,2.8vw,28px);
  font-weight: bold;
}
/****************************************
    ユニットハウス店舗情報
*****************************************/
.unit-shop table {
  table-layout: fixed;
}
.unit-shop thead th,
.unit-shop tbody th {
  font-weight: normal;
}
.unit-shop tbody th span {
  font-weight: bold;
}
.unit-shop table span {
  display: block;
}
.unit-shop table img {
  width: 50%;
}
.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;
}
/****************************************
          各店舗ページ
*****************************************/
.tableFixed {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2,1fr);
}
.tableFixed > div {
  border: 1px solid #888;
  padding: 24px;
}
.tableFixed > div p:first-child {
  font-weight: bold;
}
.access h2 {
  background: #063;
  color: #fff;
  font-weight: normal;
  margin: 2% 0 3%;
  padding: 1.5%;
}
.gmap {
  margin-bottom: 24px;
}
.access table thead th {
  background: #222;
  color: #fff;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media (min-width: 835px) {
a[href*="tel:"] {
  pointer-events: none;
  color: var(--cocoon-red-color);
  cursor: default;
  text-decoration: none;
}
}
@media screen and (max-width: 834px) {
main.main {
  padding: 24px 16px;
}
main .w-box01 {
	text-align:left;
}
table th,
table td {
  font-size: 16px;
}
/****************************************
    ヘッダー
*****************************************/
.header div.header-in {
  flex-direction: column;
  justify-content: flex-start;
}
.logo-header {
  flex-grow: 0;
  max-width: 60%; 
}
.header-tel-area {
  display: none;
}
}
@media screen and (max-width: 640px) {
.br-sp {
  display: none;
}
.br-pc {
  display: block;
}
h1.entry-title {
  padding: 0;
}
.fz-20px {
  font-size: 18px;
}
.fz-32px {
  font-size: 24px;
}
figure.wp-block-image.alignright {
  float: none;
}
table th,
table td {
	display:block;
	width:100%;
}
.liStyle {
	margin:0 0 0 8%;
}
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);
}
/* ========商品個別ページ======== */
.single-item {
  display: block;
}
.item-images {
	display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.item-images div {
  flex: 0 0 96%;
  padding: 0 2% 0 0;
  position: relative;/*相対配置*/
}
.item-images .first:after {
	background:#fff;
  position: absolute;/*絶対配置*/
  color:#444;
	content:"NEXT＞";
	font-weight:bold;
	padding:1% 2% .5%;
  top:45%;
  right:0;
}
.item-description .info-area {
  grid-template-columns: repeat(1,1fr);
  text-align: center;
}
/****************************************
          シャーシとのセット販売
*****************************************/
.trailer-explanation {
  border: 6px solid #eee;
  line-height: 2.5;
  padding: 16px 8px 8px;
}
.trailer-explanation span:not(:last-child) {
  padding: 6px 8px;
}
/****************************************
    ユニットハウス店舗情報
*****************************************/
.unit-shop tbody th span {
  margin: 2% 0;
  padding: 1.5% 4%;
}
.th-touhoku,
.th-kantou,
.th-cyuubu,
.th-kinki,
.th-cyuugoku,
.th-shikoku,
.th-Kyushu {
  background: var(--cocoon-xx-thin-color);
}
.touhoku {
  background: #c1e6f9;
}
.kantou {
  background: #bbe2dc;
}
.cyuubu {
  background: #dcecc5;
}
.kinki {
  background: #feedc1;
}
.cyuugoku {
  background: #f8d5e4;
}
.shikoku {
  background: #f1e9d4;
}
.Kyushu {
  background: #f9d7d4;
}
/****************************************
          各店舗ページ
*****************************************/
.tableFixed {
	display: block;
}
}