@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
/*
i-functions
-----------------------------------------------------*/
a,
img,
a img {
  transition: all 600ms;
}
a:hover,
img:hover,
a img:hover {
  opacity: 0.7;
}

/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
brand
-----------------------------------------------------*/
body#brand,
body#brand-post {
  background: #F4F0EA;
}

body#brand-post .c-herohead {
  display: none;
}

.p-brand h2 {
  width: 100%;
  color: #333;
  background: none;
  margin: 0 auto;
  padding: 0;
}
.p-brand .-sub dl dt {
  background: #2E6030;
}
.p-brand .-lead img {
  display: block;
  margin-bottom: 1em;
}
.p-brand .-concept {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 5%;
}
@media screen and (min-width: 768px) {
  .p-brand .-concept {
    padding: 3%;
  }
}
.p-brand .-concept h2 {
  font-size: 18px;
  padding-left: 0.5em;
  border-left: 4px solid #D3B695;
  margin: 0 0 1em;
}
.p-brand .-concept p {
  margin: 0;
}
.p-brand .-list h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1em;
}
.p-brand .-list h2 span {
  position: relative;
  display: block;
  padding: 0 1.5em;
}
@media screen and (min-width: 768px) {
  .p-brand .-list h2 span {
    display: inline-block;
  }
}
.p-brand .-list h2 span:before, .p-brand .-list h2 span:after {
  content: "●";
  line-height: 1;
  position: absolute;
  width: 1em;
  top: calc(50% - 0.5em);
  color: #D3B695;
}
.p-brand .-list h2 span:before {
  left: 0;
}
.p-brand .-list h2 span:after {
  right: 0;
}
.p-brand .-list ul {
  display: flex;
  flex-wrap: wrap;
}
.p-brand .-list ul li {
  width: 49%;
  margin-bottom: 40px;
}
.p-brand .-list ul li:not(:nth-of-type(2n+1)) {
  margin-left: 2%;
}
@media screen and (min-width: 768px) {
  .p-brand .-list ul li {
    width: 32%;
    margin-bottom: 50px;
  }
  .p-brand .-list ul li:not(:nth-of-type(2n+1)) {
    margin-left: 0;
  }
  .p-brand .-list ul li:not(:nth-of-type(3n+1)) {
    margin-left: 2%;
  }
}
.p-brand .-list ul li a {
  display: block;
  color: #333;
  text-decoration: none;
}
.p-brand .-list ul li a img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 6px 6px 0 0;
}
.p-brand .-list ul li a div {
  background: #fff;
  padding: 5%;
  border-radius: 0 0 6px 6px;
}
.p-brand .-list ul li a div i {
  display: block;
  font-size: 10px;
  color: #808080;
}
.p-brand .-post article h2 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .p-brand .-post article h2 {
    font-size: 36px;
  }
}
.p-brand .-post article h2 span {
  display: block;
  color: #808080;
  font-size: 10px;
}
.p-brand .-post article .-brandimages {
  margin: 0 calc(50% - 50vw) 5em;
  width: 100vw;
}
@media screen and (min-width: 768px) {
  .p-brand .-post article .-brandimages {
    margin: 0 auto 3em;
    width: 100%;
  }
}
.p-brand .-post article .-features {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 5%;
}
@media screen and (min-width: 768px) {
  .p-brand .-post article .-features {
    padding: 3%;
  }
}
.p-brand .-post article .-features h3 {
  position: relative;
  font-size: 22px;
  line-height: 1.5;
  padding-left: 1.5em;
  margin: 0 0 1em;
}
.p-brand .-post article .-features h3:before {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: #D3B695;
  top: 0.3em;
  left: 0;
}
.p-brand .-post article .-features h3:after {
  display: none;
}
.p-brand .-post article .-features h4 {
  line-height: 1.2;
  border-color: #D3B695;
  margin-bottom: 1em;
}
.p-brand .c-swiper04 h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 1em;
}
.p-brand .c-swiper04 .-brandother {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}/*# sourceMappingURL=brand.css.map */