/*
Theme Name: Arkhe Child
Template: arkhe
Description: Arkheの子テーマです。
Version: 3.12.0
*/

/************************************
 * ヘッダ調整
 * 
 * padding設定メモ：上、右、下、左
************************************/
/*
.logo.logo-header.logo-text {
	padding: 0px;
}
 */

// 1rem = 16px
/* これは正しく書かれています！ */
.l-header__logo.has-text {
  font-size: 1.4rem !important;
}

.c-headLogo {
  font-size: 1.4rem !important;
}

h1 {
  font-size: 1.4rem !important;
}

h2 {
  font-size: 1.3rem !important;
}

h3 {
  font-size: 1.2rem !important;
}

/* スマホ向けの調整 */
@media screen and (max-width: 767px) {

}

/************************************
 * アイキャッチ調整
 * 
 * 
************************************/
.eyecatch-inside {
  text-align: center;
}

.eyecatch-img {
  border-radius: 4px;
  width: 70%;
  height: 70%;
}

/**************************************************
 * 日時非表示
 * 
 */
.date-tags {
  display: none;
}

/**************************************************
 * インデックスの見出し設定
 * 
 */
/*
.h2-index {
    margin-bottom: 1.62em;
}
.h2-index {
    font-size: 24px;
    padding: 25px;
    background-color: var(--cocoon-xx-thin-color);
    border-radius: var(--cocoon-badge-border-radius);
}
.h2-index {
    line-height: 1.25;
    font-weight: bold;
}
*/

/**************************************************
 * 固定ページ：商品画像メイン
 * div：背景色は無し、センタリング
 */
.div-outline-item1 {
  display: flex;
  height: auto;
  margin-bottom: 20px;
}

.div-outline-item1 img {
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height: 400px;
}

/**************************************************
 * 固定ページ：商品店舗情報リスト
 * div：薄い暖色系
 */
.div-outline-item2 {
  display: flex;
  height: auto;
  border: 1px solid orange;
  border-radius: 4px;
  background-color: seashell;
  margin-bottom: 20px;
  padding-left: 10px;
}

.div-outline-item2 ul {
  margin-top: 20px;
  margin-left: 5px;
}

/**************************************************
 * 固定ページ：商品画像広告
 * div：薄いグレー系
 * img、span回り込み設定
 */
.div-outline-item3 {
  display: flex;
  align-items: flex-start;  
  border: 1px solid gray;
  border-radius: 4px;
  background-color: #f5f5f5;
  margin-bottom: 50px;
  padding: 10px;
  height: auto;
}

.div-outline-item3 a {
  display: flex;
  align-self: flex-start;
}

.div-outline-item3 img {
  border-radius: 4px;
  width: 128px;
  height: 128px;
}

.div-outline-item3 span {
  margin-left: 20px;
}  

/**************************************************
 * 共通のリスト
 * div: 薄い暖色系
 * img、span回り込み設定
 * ※必要箇所で利用
 */
.div-outline-list {
  display: flex;
  height: auto;
  border: 1px solid orange;
  border-radius: 4px;
  background-color: seashell;
  margin-bottom: 20px;
}

.div-outline-list ul {
  margin-top: 20px;
  margin-left: 5px;
}

/**************************************************
 * 共通の広告エリア
 * div: 薄いグレー系
 */
.div-outline-common-ad-area {
  display: flex;
  height: auto;
}

.div-outline-common-ad-area img {
  border-radius: 4px;
}

/***********************************************
 * HTMLクリッカブルマップ 設定
 * 
 */

/* グローバルリセット */
html, body {
    margin: 0;
    padding: 0;
}

/* HTMLクリッカブルマップ スマホ版設定 */
/* #div-outline-area { height: 500px; max-width: 100%; position: relative; list-style-type: none; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; } */

/* #div-outline-area, div-area, div-area-header, div-prefecture, div-city */
#div-outline-area {
  display: block;
  max-width: 100%;
}

/***********************************************
 * HTMLクリッカブルマップ 設定
 * 
 */

.div-area {
  display: block;
  margin-bottom: 50px;
}

.div-area-header {
  display: block;
  font-size: 20px;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
}

.div-prefecture {
  display: block;
  margin-bottom: 20px;
}

.div-prefecture-header {
  display: block;
  font-size: 16px;
  width: 100%;
  margin-bottom: 5px;
  padding: 5px;
}

.div-city {
  display: flex;
  /* 行が足りない場合に折り返す */
  flex-wrap: wrap;
  /* gap: 10px; */
  /* margin-left: 20px; */
}

.div-outline-page-thumbnail {
  /* 正確な幅計算 */
  /* box-sizing: border-box; */
  width: 260px;
  border: 1px solid silver;
  margin-bottom: 20px;
  padding: 10px;
}
.div-outline-page-thumbnail a {  }

.div-outline-page-thumbnail img {
  width: 240px;
  height: 160px;
  border-radius: 4px;
}

.div-outline-page-thumbnail h2 {
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;"
}

.div-outline-page-thumbnail span {
  font-size: 11px;
  line-height: 0.6px;
}

.div-hokkaido-area-header { border: 1px solid #6482d0; }
.div-tohoku-area-header { border: 1px solid #759ef4; }
.div-kanto-area-header { border: 1px solid #7ecfea; }
.div-hokuriku-area-header { border: 1px solid #7dd6be; }
.div-tokai-area-header { border: 1px solid #7cdc92; }
.div-kinki-area-header { border: 1px solid #ffe966; }
.div-chugoku-area-header { border: 1px solid #ffcc66; }
.div-shikoku-area-header { border: 1px solid #ffbb9c; }
.div-kyushu-area-header { border: 1px solid #ffbdbd; }
.div-okinawa-area-header { border: 1px solid #f9a8d4; }

/***********************************************
 * area-link-list
 * ※全角空白が入っていると失敗するので注意
 */

#div-outline-area-link-list {
  max-width: 100%;
}

#div-outline-area-link-list .div-area-link-list-row {
  display: grid;
  grid-template-columns: 120px auto; /* 左の幅を120px、右側は自動 */
  grid-auto-flow: row dense; /* 要素がはみ出たら次の行に配置 */
}

#div-outline-area-link-list .div-area-link-list-item1 {
  white-space: nowrap;
  overflow: hidden;
}

#div-outline-area-link-list .div-area-link-list-item2 {
  display: flex;
  flex-wrap: wrap; /* アイテムがはみ出たら折り返す */
}

/* 2列レイアウトは不要？ */
/*
@media (max-width: 768px) {
  .div-outline-page-thumbnail {
    flex: 1 1 calc(50% - 10px);
  }
}
 */

/* スマホは幅を親コンテナの最大幅にする */
@media (max-width: 599px) {
  .div-outline-page-thumbnail {
    width: 100%;
  }
}

/* 600px以上 */
/* HTMLクリッカブルマップ PC版設定 */
/*
@media screen and (min-width: 600px) {
*/
/*
  #area_map .hokkaido-area a { background-color: #6482d0; }
  #area_map .tohoku-area a { background-color: #759ef4; }
  #area_map .kanto-area a { background-color: #7ecfea; }
  #area_map .hokuriku-area a { background-color: #7dd6be; }
  #area_map .tokai-area a { background-color: #7cdc92; }
  #area_map .kinki-area a { background-color: #ffe966; }
  #area_map .chugoku-area a { background-color: #ffcc66; }
  #area_map .shikoku-area a { background-color: #ffbb9c; }
  #area_map .kyushu-area a { background-color: #ffbdbd; }
  #area_map .okinawa-area a { background-color: #f9a8d4; }
 */
  
  /* common？ */
  /*  
  #area_map { height: 500px; max-width: 100%; position: relative; list-style-type: none; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; }
  #area_map: : before { content: ''; display: block; padding: 80% 0 0; }
  #area_map ul, #area_map li { display: block; list-style: none; margin: 0; padding: 0; }
  #area_map a { display: block; font-weight: normal; text-decoration: none; box-sizing: border-box; color: #3a3835; border: solid #fff 2px; float: none; font-size: 14px; line-height: 1; padding: 6px 0; text-align: center; position: absolute; margin: 0; text-decoration: none;text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; }
  #area_map a: hover { opacity: .85; text-decoration: none; }
  #area_map a span { display: block; margin: 0 auto; padding: 0; line-height: 1.1em; text-align: center; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  */

  /* prefecture */
  /*
  #area_map li.hokkaido a { top: 6%; left: 72%; height: 26%; width: 29%; }
  #area_map li.aomori a { top: 34%; left: 74%; height: 5%; width: 9%; }
  #area_map li.iwate a { top: 39%; left: 79%; height: 8%; width: 6%; }
  #area_map li.miyagi a { top: 47%; left: 79%; height: 6%; width: 5%; }
  #area_map li.akita a { top: 39%; left: 73%; height: 8%; width: 6%; }
  #area_map li.yamagata a { top: 47%; left: 73%; height: 6%; width: 6%; }
  #area_map li.fukushima a { top: 53%; left: 74%; height: 5%; width: 10%; }
  #area_map li.ibaraki a { top: 58%; left: 79%; height: 10%; width: 5%; }
  #area_map li.tochigi a { top: 58%; left: 74%; height: 5%; width: 5%; }
  #area_map li.gunma a { top: 58%; left: 69%; height: 5%; width: 5%; }
  #area_map li.saitama a { top: 63%; left: 74%; height: 5%; width: 5%; }
  #area_map li.chiba a { top: 68%; left: 79%; height: 6%; width: 5%; }
  #area_map li.tokyo a { top: 68%; left: 74%; height: 5%; width: 5%; }
  #area_map li.kanagawa a { top: 68%; left: 69%; height: 5%; width: 5%; }
  #area_map li.nigata a { top: 53%; left: 63%; height: 7%; width: 11%; }
  #area_map li.toyama a { top: 59%; left: 57%; height: 5%; width: 6%; }
  #area_map li.ishikawa a { top: 58%; left: 52%; height: 6%; width: 5%; }
  #area_map li.fukui a { top: 64%; left: 49%; height: 5%; width: 5%; }
  #area_map li.yamanashi a { top: 63%; left: 68%; height: 5%; width: 6%; }
  #area_map li.nagano a { top: 60%; left: 63%; height: 10%; width: 6%; }
  #area_map li.gifu a { top: 64%; left: 54%; height: 9%; width: 9%; }
  #area_map li.shizuoka a { top: 70%; left: 64%; height: 5%; width: 5%; }
  #area_map li.aichi a { top: 70%; left: 59%; height: 5%; width: 5%; }
  #area_map li.mie a { top: 73%; left: 54%; height: 9%; width: 5%; }
  #area_map li.shiga a { top: 69%; left: 49%; height: 5%; width: 5%; }
  #area_map li.kyoto a { top: 67%; left: 44%; height: 6%; width: 5%; }
  #area_map li.osaka a { top: 73%; left: 44%; height: 6%; width: 5%; }
  #area_map li.hyogo a { top: 68%; left: 39%; height: 8%; width: 5%; }
  #area_map li.nara a { top: 74%; left: 49%; height: 5%; width: 5%; }
  #area_map li.wakayama a { top: 79%; left: 45%; height: 5%; width: 9%; }
  #area_map li.tottori a { top: 68%; left: 34%; height: 4%; width: 5%; }
  #area_map li.shimane a { top: 68%; left: 29%; height: 4%; width: 5%; }
  #area_map li.okayama a { top: 72%; left: 34%; height: 4%; width: 5%; }
  #area_map li.hiroshima a { top: 72%; left: 29%; height: 4%; width: 5%; }
  #area_map li.yamaguchi a { top: 71%; left: 23%; height: 6%; width: 6%; }
  #area_map li.tokushima a { top: 83%; left: 35%; height: 4%; width: 7%; }
  #area_map li.kagawa a { top: 79%; left: 33%; height: 4%; width: 7%; }
  #area_map li.ehime a { top: 83%; left: 28%; height: 4%; width: 7%; }
  #area_map li.kochi a { top: 87%; left: 28%; height: 4%; width: 12%; }
  #area_map li.fukuoka a { top: 78%; left: 16%; height: 5%; width: 5%; }
  #area_map li.saga a { top: 78%; left: 11%; height: 5%; width: 5%; }
  #area_map li.nagasaki a { top: 83%; left: 11%; height: 5%; width: 5%; }
  #area_map li.kumamoto a { top: 83%; left: 16%; height: 6%; width: 5%; }
  #area_map li.oita a { top: 79%; left: 21%; height: 5%; width: 5%; }
  #area_map li.miyazaki a { top: 84%; left: 21%; height: 6%; width: 5%; }
  #area_map li.kagoshima a { top: 89%; left: 16%; height: 6%; width: 5%; }
  #area_map li.okinawa a { top: 89%; left: 85%; height: 7%; width: 7%; }
   */
/*
}
*/