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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.cation-sp {
	display: none;
	}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
	.cation-sp {
	display: block;
    margin: 15px 0 0;
    padding: 8px;
	font-size: 12px;
	text-align: left;
	background-color: white;
	}
}


/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}

.content {
	margin-bottom: 15px;
}

/*
ヘッダー

ヘッダー用のプロジェクトコンポーネントを提供します。

ex [トップページ　ヘッダー](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
  +e.header
    +ec-headerRole
    +ec-headerNaviRole
    +ec-categoryNaviRole

Styleguide 11.2
*/
.ec-layoutRole__header {
  background: #fff;
}
.ec-layoutRole {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  transition: transform 0.3s;
  background: #fff;
}
.ec-layoutRole .ec-layoutRole__contentTop {
  padding: 0;
}
.ec-layoutRole .ec-layoutRole__contents {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 1150px;
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
}
.ec-layoutRole .ec-layoutRole__main {
  width: 100%;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 75%;
  }
}
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 50%;
  }
}
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: block;
    width: 25%;
  }
}

.ec-headerRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  padding-top: 15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
}
.ec-headerRole:after {
  content: " ";
  display: table;
}
.ec-headerRole:after {
  clear: both;
}
.ec-headerRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-headerRole img {
  max-width: 100%;
}
.ec-headerRole html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.ec-headerRole img {
  width: 100%;
}
.ec-headerRole:after {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole:after {
    content: " ";
    display: table;
  }
  .ec-headerRole:after {
    clear: both;
  }
}
.ec-headerRole::before {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole {
    width: 100%;
  }
  .ec-headerRole:after {
    content: " ";
    display: table;
  }
  .ec-headerRole:after {
    clear: both;
  }
}
.ec-headerRole .ec-headerRole__title {
  width: 100%;
}
.ec-headerRole .ec-headerRole__navSP {
  display: block;
  position: absolute;
  top: 15px;
  width: 27%;
  right: 0;
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole .ec-headerRole__navSP {
    display: none;
  }
}

.ec-headerNaviRole {
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ec-headerNaviRole:after {
  content: " ";
  display: table;
}
.ec-headerNaviRole:after {
  clear: both;
}
.ec-headerNaviRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-headerNaviRole img {
  max-width: 100%;
}
.ec-headerNaviRole html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.ec-headerNaviRole img {
  width: 100%;
}
.ec-headerNaviRole .fa-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1400px) {
  .ec-headerNaviRole {
    padding: 15px 20px;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__left {
  width: 33.3333333333%;
}
.ec-headerNaviRole .ec-headerNaviRole__search {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__search {
    display: inline-block;
    margin-top: 10px;
  }
  .ec-headerNaviRole .ec-headerNaviRole__search a {
    color: inherit;
    text-decoration: none;
  }
  .ec-headerNaviRole .ec-headerNaviRole__search a:hover {
    text-decoration: none;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__navSP {
  display: block;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__navSP {
    display: none;
  }
  .ec-headerNaviRole .ec-headerNaviRole__navSP a {
    color: inherit;
    text-decoration: none;
  }
  .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
    text-decoration: none;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__right {
  width: 66.6666666667%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ec-headerNaviRole .ec-headerNaviRole__nav {
  display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a {
  color: inherit;
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart {
  display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a {
  color: inherit;
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
  text-decoration: none;
}

.ec-headerNavSP {
  display: block;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
.ec-headerNavSP .fas {
  vertical-align: top;
}
@media only screen and (min-width: 768px) {
  .ec-headerNavSP {
    display: none;
  }
}

.ec-headerNavSP.is-active {
  display: none;
}

/*
ヘッダー：タイトル

ヘッダー内で使用されるタイトルコンポーネントです。

Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle

Styleguide 11.2.1
*/
.ec-headerTitle {
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
}
.ec-headerTitle textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-headerTitle img {
  max-width: 100%;
}
.ec-headerTitle html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.ec-headerTitle img {
  width: 100%;
}
.ec-headerTitle .ec-headerTitle__title {
  text-align: center;
}
.ec-headerTitle .ec-headerTitle__title h1,
.ec-headerTitle .ec-headerTitle__title .h1 {
  margin: 0;
  padding: 0;
}
.ec-headerTitle .ec-headerTitle__title a {
  display: inline-block;
  margin-bottom: 30px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-headerTitle .ec-headerTitle__title a {
    font-size: 40px;
  }
}
.ec-headerTitle .ec-headerTitle__title a:hover {
  opacity: 0.8;
}
.ec-headerTitle .ec-headerTitle__subtitle {
  font-size: 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.ec-headerTitle .ec-headerTitle__subtitle a {
  display: inline-block;
  color: #0092c4;
  text-decoration: none;
  cursor: pointer;
}

/*
ヘッダー：ユーザナビゲーション

ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__nav">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.3
*/
.ec-headerNav {
  text-align: right;
}
.ec-headerNav .ec-headerNav__item {
  margin-left: 0;
  display: inline-block;
  font-size: 28px;
}
.ec-headerNav .ec-headerNav__itemIcon {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-headerNav .ec-headerNav__itemIcon {
    margin-right: 0;
    font-size: 20px;
  }
}
.ec-headerNav .ec-headerNav__itemLink {
  display: none;
  margin-right: 5px;
  font-size: 14px;
  vertical-align: middle;
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-headerNav .ec-headerNav__itemLink {
    display: inline-block;
  }
}

/*
ヘッダー：検索ボックス

ヘッダー内で使用される商品検索コンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__search">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.4
*/
.ec-headerSearch:after {
  content: " ";
  display: table;
}
.ec-headerSearch:after {
  clear: both;
}
.ec-headerSearch .ec-headerSearch__category {
  float: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category {
    float: left;
    width: 43%;
  }
}
.ec-headerSearch .ec-headerSearch__category .ec-select {
  overflow: hidden;
  width: 100%;
  margin: 0;
  text-align: center;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
  width: 100%;
  cursor: pointer;
  padding: 8px 24px 8px 8px;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  appearance: none;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category .ec-select select {
    max-width: 165px;
    height: 36px;
  }
}
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
  color: #000;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
  display: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  position: relative;
  border: 0;
  background: #000;
  color: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    border-top-right-radius: inherit;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }
}
.ec-headerSearch
  .ec-headerSearch__category
  .ec-select.ec-select_search::before {
  position: absolute;
  top: 0.8em;
  right: 0.4em;
  width: 0;
  height: 0;
  padding: 0;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  pointer-events: none;
}
.ec-headerSearch .ec-headerSearch__keyword {
  position: relative;
  color: #525263;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__keyword {
    float: right;
    width: 57%;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
}
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
  width: 100%;
  height: 34px;
  font-size: 16px;
  border: 0 none;
  padding: 0.5em 50px 0.5em 1em;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    font-size: 12px;
  }
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
  width: 22px;
  height: 22px;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
  border: 0;
  background: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-55%);
  display: block;
  white-space: nowrap;
  z-index: 1;
}

/*
ヘッダー：カテゴリナビ

ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。

Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav

sg-wrapper:
<div class="ec-categoryNaviRole" style="padding-bottom:150px;">
  <sg-wrapper-content/>
</div>

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: none;
}
.ec-categoryNaviRole:after {
  content: " ";
  display: table;
}
.ec-categoryNaviRole:after {
  clear: both;
}
.ec-categoryNaviRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-categoryNaviRole img {
  max-width: 100%;
}
.ec-categoryNaviRole html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.ec-categoryNaviRole img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-categoryNaviRole {
    display: block;
    width: 100%;
  }
  .ec-categoryNaviRole a {
    color: inherit;
    text-decoration: none;
  }
  .ec-categoryNaviRole a:hover {
    text-decoration: none;
  }
}

.ec-itemNav {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.ec-itemNav__nav {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  height: auto;
  list-style-type: none;
  text-align: center;
  vertical-align: bottom;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav {
    display: inline-block;
  }
}

.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li {
    float: left;
    width: auto;
  }
}

.ec-itemNav__nav li a {
  display: block;
  border-bottom: 1px solid #e8e8e8;
  margin: 0;
  padding: 16px;
  height: auto;
  color: #2e3233;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li a {
    text-align: center;
    border-bottom: none;
  }
}

.ec-itemNav__nav li ul {
  display: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  position: static;
  top: 100%;
  left: 2px;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul {
    display: block;
    z-index: 100;
    position: absolute;
  }
}

.ec-itemNav__nav li ul li {
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li {
    overflow: hidden;
    height: 0;
  }
}

.ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 22px 16px 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  background: black;
}

.ec-itemNav__nav > li:hover > a {
  background: #fafafa;
}

.ec-itemNav__nav > li:hover li:hover > a {
  background: #333;
}

@media only screen and (min-width: 768px) {
  .ec-itemNav__nav > li:hover > ul > li {
    overflow: visible;
    height: auto;
  }
}

.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto;
}

@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li ul:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: white;
    position: absolute;
    top: 19px;
    right: auto;
    left: -20px;
  }
}

@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li:hover > ul > li {
    overflow: visible;
    height: auto;
    width: auto;
  }
}

.ec-itemNav__nav li ul li ul li a {
  background: #7d7d7d;
}

.ec-itemNav__nav li:hover ul li ul li a:hover {
  background: #333;
}

/*
ヘッダー：SPヘッダー

SP時のみ出現するヘッダーに関係するコンポーネントです。<br>
ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。<br>
<br>
`.ec-drawerRole`：SPのドロワー内の要素をwrapするコンポーネントです。<br>
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します。<br><br>
`.ec-overlayRole`：SPのドロワー出現時にz-indexがドロワー以下の要素に半透明の黒背景をかぶせるコンポーネントです。<br>

Styleguide 11.2.6
*/
.ec-drawerRole {
  overflow-y: scroll;
  background: black;
  width: 260px;
  height: 100vh;
  transform: translateX(-300px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: z-index 0ms 1ms;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRole {
    display: none;
  }
}
.ec-drawerRole .ec-headerSearchArea {
  padding: 20px 10px;
  width: 100%;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerSearch {
  padding: 16px 8px 26px;
  background: #ebebeb;
  color: #636378;
}
.ec-drawerRole .ec-headerSearch select {
  width: 100% !important;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 1em 10px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea p {
  margin-top: 0;
  margin-bottom: 0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
  border-bottom: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: black;
  font-weight: normal;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #ccc;
  padding-left: 20px;
  font-weight: normal;
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
  padding-left: 40px;
  color: black;
  background: white;
}
.ec-drawerRole
  .ec-headerCategoryArea
  .ec-itemNav__nav
  li:hover
  ul
  li
  ul
  li
  a:hover {
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
  padding-left: 60px;
  font-weight: normal;
}
.ec-drawerRole .ec-headerLinkArea {
  background: black;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
  border-top: 1px solid #ccc;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
  display: inline-block;
  width: 28px;
  font-size: 17px;
}

.ec-drawerRoleClose {
  display: none;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1000;
}
.ec-drawerRoleClose .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .ec-drawerRoleClose {
    display: none;
  }
}

.ec-drawerRole.is_active {
  display: block;
  transform: translateX(0);
  transition: all 0.3s;
  z-index: 100000;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRole.is_active {
    display: none;
  }
}

.ec-drawerRoleClose.is_active {
  display: inline-block;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRoleClose.is_active {
    display: none;
  }
}

.ec-overlayRole {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  background: transparent;
  transform: translateX(0);
  transition: all 0.3s;
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .ec-overlayRole {
    display: none;
  }
}

.have_curtain .ec-overlayRole {
  display: block;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
}
@media only screen and (min-width: 768px) {
  .have_curtain .ec-overlayRole {
    display: none;
  }
}
/* ==========================================================
   既存cssの変更
   ========================================================== */
.ec-headerSearch .ec-headerSearch__category {
  display: none; /* カテゴリ検索を非表示 */
}
.ec-headerSearch .ec-headerSearch__keyword {
  display: flex;
  position: relative;
  color: #525263;
  background-color: #faf9f5;
  width: 210px; /* 検索窓の幅 */
  margin-left: 14px;
}
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
  width: 150px; /* 検索窓内のテキストエリア幅 */
  height: 34px;
  font-size: 16px;
  border: 0 none;
  padding: 0.5em 0 0.5em 0.5em;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  margin-bottom: 0;
}
.ec-headerSearch .ec-headerSearch__keyword {
  border-radius: 5px;
}

.ec-drawerRole .ec-headerSearch {
  display: flex;
  padding: 20px 18px;
  background-color: transparent;
  border-bottom: solid 2px #f86387;
}

.ec-drawerRoleClose {
  font-size: 24px;
  color: white;
  background-color: #f86387;
}

.ec-drawerRoleClose.is_active {
  z-index: 100001; /* パネルのz-index（100000）よりも高い値を設定 */
}

.ec-itemNav {
  height: 55.5%;
}

/* ==========================================================
   ヘッダー大枠
   ========================================================== */
.site-header {
  width: 100%;
  display: flex; /* 親CSSに指定がなくても、念のため指定しておくと確実です */
  flex-direction: column; /* 中の要素を縦列配置 */
}

/* ==========================================================
   PCヘッダー1段目
   ========================================================== */
.header-top-bar {
  padding: 8px 0;
  font-size: 14px;
  color: #555;
  text-align: left;
}

.header-motto {
  margin: 0;
  padding: 0;
}

/* ==========================================================
   PCヘッダー2段目
   ========================================================== */
.header-main-bar {
  padding: 0 0 5px;
}

/* Flexboxを有効にするためのコンテナ */
.header-main-flex {
  display: flex;
  justify-content: space-between; /* 要素を両端に配置 */
  align-items: center; /* ★要素の高さを垂直方向に中央揃え */
  gap: 15px;
}

/* 左エリア */
.logo-area img {
  display: flex;
  max-height: 50px; /* ロゴの高さを指定 */
  width: auto;
}

/* 右エリア */
.header-right-area {
  display: flex;
  gap: 0; /* ★検索窓、メニュー、カートの間の隙間を指定 */
  margin-left: 42px;
}

/* ==========================================================
   PCヘッダー3段目
   ========================================================== */
/* メニューのスタイル */
.header-nav ul {
  display: flex;
  gap: 7px; /* 各メニュー項目間の隙間 */
  margin: 14px 0 0 170px;
  padding: 0;
  list-style: none;
}

.header-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.ec-headerNav .ec-headerNav__item {
  font-size: 0;
}
.ec-headerNav .ec-headerNav__itemLink {
  font-size: 15px;
}
.ec-headerNav .ec-headerNav__itemLink {
  color: #b1a999;
}
/* ヘッダーメニュー*/
.ec-itemNav {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0 0;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav {
    padding: 8px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .ec-itemNav {
    padding: 0;
  }
}
@media only screen and (max-width: 768px) {
  .ec-itemNav {
    font-size: 14px;
  }
}
.ec-itemNav__nav {
  text-align: left;
}
.ec-itemNav__nav > li {
  display: flex; /* ★区切り画像とリンク(a)を横並びにする */
  align-items: center;
}
/* トップカテゴリの「前（左側）」に区切り画像を設置 */
.ec-itemNav__nav > li::before {
  content: ""; /* 疑似要素には必須 */
  display: block;
  width: 2px; /* ★区切り画像の幅 */
  height: 16px; /* ★区切り画像の高さ */
  background-image: url("https://xs303399.xsrv.jp/html/template/default/assets/img/footer/rectangle.webp"); /* ★区切り画像のパスを指定 */
  background-size: contain;
  background-repeat: no-repeat;
}
.ec-itemNav__nav li ul {
  border-left: 2px solid #f86387;
}
.ec-itemNav__nav li a {
  padding: 16px 17px;
  font-size: 15px;
}
/* 問い合わせボタン */
.header-action-button.header-action-button {
  display: inline-block;
  background-color: #f86387;
  color: white;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 5px;
  margin: 0 0 0 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* ボタンのホバースタイル */
.header-action-button:hover {
  background-color: #f8eded; /* ホバー時の背景色 */
  color: #000; /* ホバー時の文字色 */
}
.ec-itemNav__nav li ul li a {
  display: flex; /* ★テキストと矢印を横並びにするため */
  justify-content: space-between; /* ★テキストを左、矢印を右に配置 */
  align-items: center; /* ★テキストと矢印を上下中央に揃える */
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 22px 16px 16px;
  font-size: 15px;
  font-weight: bold;
  color: black;
  text-align: left;
  background: white;
}
.ec-itemNav__nav > li:hover > a {
  background: #f86387;
  color: white;
}
.ec-itemNav__nav > li:hover li:hover > a {
  background: #f8eded;
}
.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto;
  border-left: 2px solid #f86387;
  /*border: 2px solid #F86387;  ★色付きの枠線（色は適宜変更してください） */
  background: white; /* 背景色も指定しておくと確実です */
  display: flex;
  flex-direction: column;
}
.ec-itemNav__nav li:hover ul li ul li a:hover {
  background: #f8eded;
}
.ec-itemNav__nav li ul li ul:before {
  color: #f86387;
}
.ec-itemNav__nav li ul li ul li a {
  background: white;
}

/* ヘッダーメニュースマートフォン版 */
/* ==========================================================
   1. 新しいヘッダーバー全体（Flexboxの親コンテナ）
   ========================================================== */
.mobile-header-bar {
  display: flex;
  align-items: center; /* ★要素を垂直方向に中央揃え */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px 15px 8px; /* 上下の余白と、左右の余白 */
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を付けると見やすい */
  z-index: 999; /* ハンバーガーメニュー本体より少し下 */
  box-sizing: border-box;
}

/* ==========================================================
   2. 左側エリア（ロゴとモットー）
   ========================================================== */
.mobile-header-left {
  display: flex;
  align-items: center;
  gap: 0; /* ロゴとモットーの間の隙間 */
  width: 83%; /* ★左側エリア全体の幅を制限 */
}
/* ロゴのスタイル */
.mobile-logo {
  width: 103px; /* ★ロゴのコンテナ幅を80pxに固定（この数値を調整） */
  flex-shrink: 0; /* コンテナが縮まないようにする */
  margin-top: -5px;
}
.mobile-logo img {
  display: block;
  height: auto;
  width: 100px;
}
.mobile-motto {
  flex-grow: 1; /* ★残りの利用可能なスペースを全て埋めるように広げる */
  min-width: 0; /* ★長い単語などがあった場合のはみ出し防止 */
  font-size: 10px;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================
   3. 右側エリア（ハンバーガーメニュー）
   ========================================================== */
.hamburger-menu-wrapper {
  margin-left: auto; /* ★左側の余白を自動で最大化し、要素を右端に押しやる */
  display: flex;
  flex-direction: column; /* アイコンとテキストを縦に並べる */
  align-items: center;
}

.hamburger-label {
  font-size: 12px;
  color: #333;
  margin-top: -2px; /* アイコンとの隙間を微調整 */
}

/* ==========================================================
   4. 親CSSの上書き（最重要）
   ========================================================== */
.ec-headerNavSP {
  position: static; /* ★fixedから変更。これによりFlexbox内で配置できるようになる */
  border: none; /* 親CSSのborderが不要な場合はリセット */
  padding: 0;
  width: auto; /* サイズをアイコンに合わせる */
  height: auto;
}
/* ★ハンバーガーメニューの画像サイズを指定 */
.ec-headerNavSP img {
  display: block; /* 画像の下にできる余分な隙間を防ぐ */
  width: 47px; /* ★お好みの画像の幅を指定 */
  height: auto; /* 高さは幅に合わせて自動調整 */
}
/* @media (max-width: 1129px) {
  スマホ表示に切り替える画面幅を指定
  body {
    ヘッダーの高さ分（padding等も考慮して少し余裕を持つ）の余白を設ける
    padding-top: 70px;
  }
} */
/*
 * デフォルトのスタイル（主にPCで適用）
 * まず、スマホ用のヘッダー関連要素をすべて非表示にします。
*/
.mobile-header-bar,
.sp-menu-panel {
  display: none;
}

.site-spHeader {
  display: none; /* 親CSSに指定がなくても、念のため指定しておくと確実です */
}

/*
 * 画面幅が1399px以下の場合のスタイル（スマホ・タブレット用）
*/
@media (max-width: 1399px) {
  /* 1. PC用のヘッダーを非表示にする */
  /*.site-header {
        display: none;
    }
	 */

  /*
     * 補足：.sp-menu-panel はJavaScriptで表示/非表示を制御するため、
     * ここで display: block; を指定する必要はありません。
     * 親である .mobile-header-bar が表示されれば、中のハンバーガーボタンも
     * 表示されるようになり、クリックすればJSがパネルを表示してくれます。
    */
}

/* ==========================================================
   ハンバーガーメニュー内部全体のスタイル上書き
   ========================================================== */
.ec-drawerRole {
  width: 100%; /* 幅を画面いっぱいに */
  transform: translateX(-100%); /* 初期位置を画面左外へ */
  background: white; /* 背景色を白に */
  /* その他の overflow-y, position, top, left, z-index は親CSSのままでOK */
}
.ec-drawerRole.is_active {
  transform: translateX(0); /* アクティブ時に画面内に表示 */
}

/* ==========================================================
   1. トップエリア
   ========================================================== */
.sp-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f86387;
}
.sp-menu-top-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sp-menu-top .search-area {
  flex-grow: 1; /* 検索窓が残りのスペースを埋める */
  margin-right: 15px;
}
.sp-menu-top .cart-area img,
.sp-menu-top .close-button-wrapper img {
  width: 28px;
  height: 28px;
}
.sp-menu-top .close-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.sp-menu-top .close-button-wrapper span {
  font-size: 10px;
  margin-top: 2px;
}

/* ==========================================================
   新カテゴリナビ(SP) トップエリアのスタイル
   ========================================================== */

/* 3つの要素を囲む親コンテナ（Flexbox） */
.sp-nav-top-actions {
  display: flex;
  align-items: center; /* 要素を垂直方向に中央揃え */
  gap: 5px; /* ★ご指定の、各アイテム間の隙間 */
  padding: 10px 15px; /* 上下の余白と、左右の余白 */
  background-color: #f8f8f8; /* 背景色（親テーマに合わせて調整） */
  border-bottom: 1px solid #ddd;
}

/* 1. 検索窓エリアのスタイル */
.sp-nav-top-actions .ec-headerNaviRole__search {
  flex-grow: 1; /* ★利用可能な残りのスペースを全て埋めるように広がる */
  min-width: 0; /* ★flexアイテムが縮む際のオーバーフローを防ぐ */
}

/* 2. カートアイコンエリアのスタイル */
.sp-nav-top-actions .ec-headerRole__cart {
  flex-shrink: 0; /* ★画面が狭くなっても縮まないようにする */
}
/* カートアイコン自体の見た目を調整（必要に応じて） */
.sp-nav-top-actions .ec-cartNavi__icon {
  font-size: 24px;
  color: #333;
}

.ec-cartNavi {
  position: absolute;
  left: 32px;
}

@media (max-width: 1399px) {
  .ec-cartNavi {
    top: 20px;
    left: 250px;
  }
}

/* 3. 閉じるボタンエリアのスタイル */
.sp-nav-top-actions .close-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0; /* ★縮まないようにする */
  cursor: pointer;
}
.sp-nav-top-actions .close-button-wrapper img {
  width: 24px;
  height: 24px;
}
.sp-nav-top-actions .close-button-wrapper span {
  font-size: 10px;
  color: #333;
  margin-top: 2px;
}

/* ==========================================================
   2. カテゴリメニュー（アコーディオン）
   ========================================================== */
/* リスト全体の基本スタイル */
.sp-menu-accordion,
.sp-menu-static-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* アコーディオン内部のul（下層リスト）も余白をリセット */
.sp-menu-accordion ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- 各リスト項目のスタイル --- */

/* 全てのリンク（aタグ）に共通するスタイル */
.sp-menu-accordion li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
}

/* 全ての矢印に共通する形状のスタイル */
.sp-menu-accordion li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0; /* 矢印が縮まないように */
  margin-left: 15px; /* テキストと矢印の間の余白 */
}

/* --- トップカテゴリの専用スタイル --- */
.sp-menu-accordion .top-category:first-child > a {
  border-top: 2px solid #f86387;
}
.sp-menu-accordion .top-category > a {
  font-weight: bold;
  border-bottom: 2px solid #f86387;
}

.sp-menu-accordion .top-category > a::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 12px;
  background-image: url("/html/template/default/assets/img/header/arrow_5.svg"); /* ★トップカテゴリ用の下向き矢印 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-left: 15px;
  transition: transform 0.3s ease; /* 回転アニメーション */
}

/* --- 下層カテゴリの専用スタイル --- */
.sp-menu-accordion .sub-category a {
  font-weight: normal;
  border-bottom: 1px solid #e8e8e8;
  padding-left: 40px; /* インデント */
}

.sp-menu-accordion .sub-category a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background-image: url("/html/template/default/assets/img/header/arrow_6.svg"); /* ★下層カテゴリ用の右向き矢印 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-left: 15px;
}

/* --- アコーディオンパネル（開閉部分）のスタイル --- */
.accordion-panel {
  max-height: 0; /* ★高さを0にして、デフォルトでは非表示にする */
  overflow: hidden; /* ★中身がはみ出さないようにする */
  transition: max-height 0.4s ease-out; /* ★高さの変化を滑らかにアニメーションさせる */
  background-color: #f9f9f9; /* 開いた部分の背景色 */
}

/* --- 開いた状態（.is-active）のスタイル --- */
/* JavaScriptによって li.has-submenu に .is-active が付与されることを想定 */

/* .is-active が付いたパネルを表示状態にする */
.sp-menu-accordion li.is-active > .accordion-panel {
  max-height: 100%; /* ★中身が十分収まる大きな値を指定 */
  transition: max-height 0.4s ease-in;
}

/* 開いたトップカテゴリのボーダー色を変更 */
.sp-menu-accordion .top-category.is-active > a {
  border-bottom-color: #e8e8e8;
}

/* 開いたトップカテゴリの矢印を180度回転させる */
.sp-menu-accordion .top-category.is-active > a.accordion-trigger::after {
  transform: rotate(180deg);
}

/* トップカテゴリの矢印にもtransitionを追加しておくと、より滑らかになります */
.sp-menu-accordion .top-category > a::after {
  /* ... 既存のスタイル ... */
  transition: transform 0.3s ease;
}


/* ==========================================================
   3. サードエリア（静的リンク）
   ========================================================== */
.sp-menu-static-links {
  margin-top: 0;
}

.sp-menu-static-links li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
  font-weight: bold;
  border-bottom: 2px solid #dedbcf;
}

.sp-menu-static-links li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background-image: url("/html/template/default/assets/img/header/arrow_7.svg"); /* ★下層カテゴリ用の右向き矢印 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-left: 15px;
}

/* ==========================================================
   4. ボタンエリア
   ========================================================== */
.sp-menu-button-area {
  padding: 30px 20px;
  width: 100%;
}
.sp-menu-button-area .c-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #f86387;
  color: white;
  padding: 15px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

/* 共通コンテナ */
.c-container {
  max-width: 1200px; /* サイト全体の最大幅 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================
   表示切り替え（メディアクエリ）
   ========================================================== */
@media (max-width: 1399px) {
  /* PC用ヘッダーを強制的に非表示 */
  .site-header {
    display: none !important;
  }
  .sp-menu-accordion {
    display: block !important;
    width: 100%;
  }
  /* スマホ用ヘッダーを強制的に表示 */
  .mobile-header-bar {
    display: flex !important;
  }
  /* スマホ表示時にbodyにpadding-topを追加 */
  body {
    padding-top: 44px; /* mobile-header-barの高さ分 */
  }
  .site-spHeader {
    display: flex; /* 親CSSに指定がなくても、念のため指定しておくと確実です */
    flex-direction: column; /* 中の要素を縦列配置 */
  }
}


/* ==========================================================
   フッター
   ========================================================== */
/* PC用のスタイルは今まで通り */
.footer-desktop {
    display: block; /* PCではこちらを表示 */
}
.footer-mobile {
    display: none;  /* PCではスマホ用を非表示にする */
}
/* 共通パーツ：コンテンツの幅を制限し中央揃えにする */
.footer-container {
    max-width: 1130px;
    margin: 0 auto;
    padding: 0 15px;
}
/* 役割1：大カテゴリの行（ボーダーと背景担当） */
.footer-category-bar {
    background: white;
    border-top: 2px solid #DEDBCF;
    border-bottom: 2px solid #DEDBCF;
    padding: 20px 0;
}
/* 役割2：大カテゴリのリスト（ul） - Flexboxで横並びを実現 */
.footer-categories {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 89px; /* ★項目間の隙間を80pxに指定（この値を自由に変更してください） */
    padding: 0 0 0 9px;
    margin: 0;
    list-style: none;
}
/* 役割3：大カテゴリの項目（li） - 区切り画像を担当 */
.footer-categories li {
    position: relative; /* ★区切り画像を配置するための基準点 */
	width: 138px; /* ★各カテゴリの幅を固定 */
    box-sizing: border-box;
}
/* 最後の項目以外の右側に区切り線を表示する */
.footer-categories li::after {
    content: ''; /* 疑似要素には必須 */
    display: block;
    position: absolute;
    top: 50%; /* 上から50%の位置に */
    right: -50px; /* ★liの右側に配置、値はgapに合わせて調整 */
    transform: translateY(-50%); /* 垂直方向の中央に補正 */

    width: 2px;  /* 区切り画像の幅 */
    height: 20px; /* 区切り画像の高さ */
    background-image: url('https://xs303399.xsrv.jp/html/template/default/assets/img/footer/rectangle-2.webp'); /* ★区切り画像のパス */
    background-size: contain;
    background-repeat: no-repeat;
}
/* 役割4：大カテゴリのテキスト（h3）のスタイル */
.footer-categories h3 {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
}
/* 親要素（ul）をFlexコンテナにして、子要素(li)を横に並べる */
ul.ec-footerNavi {
	display: flex;          /* これで子要素である li が横に並びます */
    flex-wrap: wrap;        /* 画面幅が狭い時に折り返す設定 */
    gap: 28px;              /* 横に並んだ li 同士の隙間 */
    padding: 0;             /* ulが元々持っている内側の余白を消す */
    list-style: none;       /* liの先頭にある黒い点を消す */
  	color: black;
  	text-align: left;
    justify-content: flex-start;
}
/* 子要素（li）自身もFlexコンテナにするが、中身は「縦方向」に並べるように指定 */
ul.ec-footerNavi > li.ec-footerNavi__link {
    display: flex;
	flex-direction: column; /* ★中身を縦方向に並べるための重要な指定 */
	gap: 15px;              /* 縦に並んだ孫要素（リンクなど）同士の隙間 */
    /* width: 200px; */     /* 必要に応じて、各カラムの幅を固定することもできます */
    /* justify-content: flex-start;  (必要なら) 縦方向の揃え位置を指定（上揃え） */
    /* align-items: flex-start;      (必要なら) 横方向の揃え位置を指定（左揃え） */
}
/* 個別リンク（a）のスタイル */
.ec-footerNavi .ec-footerNavi__link a {
	display: block;
	width: 190px;
	margin: 16px 0 -13px 9px;
	padding-bottom: 14px; /* 下の余白 */
	border-bottom: 1px solid #E8E8E8; /* 下線 */
	text-decoration: none;
	background-image: url('https://xs303399.xsrv.jp/html/template/default/assets/img/footer/arrow-2.webp'); /* ★ここに画像のパスを記述 */
	background-repeat: no-repeat;
	background-position: 175px 6px; /* 右端・垂直中央に配置 */
	padding-right: 22px; /* ★矢印の幅 + 余白分を確保 */
	background-size: 3.5%; /* ← ここでサイズを指定（幅 高さ） */
	font-size: 14px;
	color: #333
}
/* ==========================================================
   メインレイアウト（CSS Grid）
   ========================================================== */
.footer-main-layout {
    display: grid;
    grid-template-columns: 3fr 2fr; /* ★左エリアと右エリアの幅の比率を 3:2 に設定 */
    gap: 10px; /* ★左右エリア間の隙間 */
	align-items: start; /* ★追加：カラムを上揃えにする */
	width: 1200px;
	margin: 0 auto;
}

/* ==========================================================
   1. 左側メインナビ（ec-footerNavi）
   ========================================================== */
.ec-footerNavi {
    display: flex;
    justify-content: space-between; /* 3つのカラムを均等に配置 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.ec-footerNavi__link {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ec-footerNavi__link h3 {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

/* ==========================================================
   2. 右側メニュー（side-menu-area）
   ========================================================== */
.side-menu-area {
    display: flex;
    flex-direction: column;
    gap: 15px; /* メニューの各行の間の余白 */
	align-items: flex-end; /* 横方向の配置（右揃え） */
	margin-top: 19px;
}

.side-menu-list {
    display: flex;
    justify-content: space-between; /* 4つのメニューを均等に配置 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.side-menu-list li {
    position: relative;
}

/* 最後の項目以外の右側に区切り画像を表示 */
.side-menu-list li:not(:last-child)::after {
    content: '';
    display: inline-block;
    vertical-align: text-top;
    width: 3px; /* 区切り画像の幅 */
    height: 14px; /* 区切り画像の高さ */
    background-image: url('https://xs303399.xsrv.jp/html/template/default/assets/img/footer/rectangle-3.webp');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 21px; /* テキストと区切り線の間の余白 */
	margin-right: 19px;
}

.side-menu-list a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    /* font-weight: normal; ← 太字にしない（デフォルト） */
}

/* ==========================================================
   3. ボタンエリア
   ========================================================== */
.button-area {
    text-align: center;
}

.footer-button {
    display: inline-block;
    background-color: #f86387;
    color: white;
    padding: 12px 21px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
	font-size: 16px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
/* ボタンのホバースタイル */
.footer-button:hover {
    background-color: #F8EDED; /* ホバー時の背景色 */
    color: #000;            /* ホバー時の文字色 */
}

/* ==========================================================
   4. Copyrightエリア
   ========================================================== */
.copyright-area {
    text-align: right;
}

.copyright-area .site-name {
    font-size: 24px;
    font-weight: bold;
    margin: 50px 0 10px 0;
	color: black;
}

.copyright-area .site-name a {
	color: inherit;
}
.copyright-area small {
    font-size: 12px;
    color: black;
}

/* ★背景色を画面いっぱいに広げるためのラッパー */
.main-nav-background-wrapper {
    background-color: #FDFDFC; /* ★ここに画面いっぱいに広げたい背景色を指定 */
    padding: 0 0 60px; /* 中のコンテンツとの間に上下の余白を作る */
}

/* ==========================================================
   メディアクエリ（画面幅が1399px以下の場合に適用）
   ========================================================== */
@media (max-width: 1399px) {

    /* --- 表示の切り替え（変更なし） --- */
    .footer-desktop {
        display: none;
    }
    .footer-mobile {
        display: block;
    }

    /* --- スマホ用レイアウトのスタイリング --- */
    .footer-mobile {
        border-top: 2px solid #DEDBCF;
        /* ★左右のpaddingを0にする */
        padding: 2px 0 60px; 
        margin-top: 30px;
		background-color: #FDFDFC;
    }

    .mobile-nav-list {
        padding: 0;
        margin: 0 0 40px 0;
        list-style: none;
    }

    .mobile-nav-list li {
        border-bottom: 1px solid #e0e0e0;
        /* ★liにはpaddingを設定しない。これでborderが画面幅いっぱいになる */
    }

    .mobile-nav-list a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* ★上下のpaddingに加え、左右のpaddingもここで設定する */
        padding: 18px 20px;
        text-decoration: none;
        color: #333;
        font-weight: bold;
		font-size: 15px;
    }

    /* 矢印の実装（変更なし） */
    .mobile-nav-list a::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 12px;
        background-image: url('https://xs303399.xsrv.jp/html/template/default/assets/img/footer/arrow-3.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    /* ボタンとCopyrightのスタイルも、左右の余白が必要な場合は
       それぞれの要素にpadding-left/rightを設定します。*/
    .button-area {
        margin-bottom: 40px;
        padding: 0 20px; /* ボタンも左右に余白を持たせる */
    }

    .copyright-area {
        text-align: center;
        padding: 0 20px; /* Copyrightも左右に余白を持たせる */
    }

}