@charset "Shift_JIS";
/* --------------------------------------------------------------------
ハルカスニッポン博覧会CSS／ブランドページ / .brand
--------------------------------------------------------------------- */
/* ヘッダーエリア
================================================== */
#bussan-fair_wrap.brand .head {
  position: relative; /* ボーダー用 */
}

/* ボーダー */
#bussan-fair_wrap.brand .head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 3px;
  background: var(--bussan-fair-area-color-dark); /* 現在の「エリアカラー(濃)」設定 */
}

#bussan-fair_wrap.brand .head .name {
  margin: 0 0 10px 0;
}

#bussan-fair_wrap.brand .head .name > span {
  display: inline-block;
  line-height: 30px;
}

#bussan-fair_wrap.brand .head .name .area {
  color: #fff;
  background: #333;
  padding: 0 10px;
  background: var(--bussan-fair-area-color-dark); /* 現在の「エリアカラー(濃)」設定 */
}

#bussan-fair_wrap.brand .head .name .city {
  padding: 0 0 0 10px;
}

/* ブランド説明エリア
================================================== */
/*
#bussan-fair_wrap.brand {
  position: relative; /* 地図用 
  overflow: hidden;
}
*/

/* ブランド名 */
#bussan-fair_wrap.brand .brand_info .about .about_head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
  padding: 16px 30px;
  background: #f7f7f7;
  line-height: 1;
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
}

#bussan-fair_wrap.brand .brand_info .about .about_head .name {
  font-size: 24px;
  letter-spacing: .03em;
}

#bussan-fair_wrap.brand .brand_info .about .about_head .name_sub {
  margin-top: 8px;
  font-size: 18px;
}

/* ブランド内容 */
#bussan-fair_wrap.brand .brand_info .about .about_content {
  padding: 0 20px;
  line-height: 1.8;
  margin-top: 20px;
}

#bussan-fair_wrap.brand .brand_info .about .about_content .copy {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;
}

#bussan-fair_wrap.brand .brand_info .about .about_content .txt {
  font-size: 16px;
}

#bussan-fair_wrap.brand .brand_info .about .about_content .txt + .txt {
  margin-top: 20px;
}

/* SP調節用 */
/* ブランド名 */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .about .about_head {
  justify-content: center;
  flex-direction: column;
}

/* ブランド内容 */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .about .about_content {
  padding: 0 3%;
}

/* ブランド内容（その他）
================================================== */
#bussan-fair_wrap.brand .brand_info .other {
  position: relative;
  margin-top: 20px;
  padding: 0 20px;
  min-height: 430px;
}

/* 動画 */
#bussan-fair_wrap.brand .brand_info .movie {
  position: relative;
  width: 460px;
  padding: 0 10px 10px 0;
}

#bussan-fair_wrap.brand .brand_info .movie .box,
#bussan-fair_wrap.brand .brand_info .movie .box::after,
#bussan-fair_wrap.brand .brand_info .movie .box iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 360;
}

#bussan-fair_wrap.brand .brand_info .movie .box {
  position: relative;
}

#bussan-fair_wrap.brand .brand_info .movie .box::after {
  position: relative;
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bussan-fair-area-color-light); /* 現在の「エリアカラー(ライト)」 */
}

#bussan-fair_wrap.brand .brand_info .movie .box iframe {
  position: relative;
  z-index: 1;
}

/* テキストリンク */
#bussan-fair_wrap.brand .brand_info .movie .btn {
  position: relative;
  text-align: center;
  margin-top: 20px;
}

#bussan-fair_wrap.brand .brand_info .movie .btn a {
  position: relative;
  color: #1a0dab;
  font-size: 1.4rem;
  font-weight: bold;
}

#bussan-fair_wrap.brand .brand_info .movie .btn a::after {
  content: ' >';
  display: inline;
}

/* 四角あしらい */
#bussan-fair_wrap.brand .brand_info .movie::before,
#bussan-fair_wrap.brand .brand_info .movie .box::before,
#bussan-fair_wrap.brand .brand_info .movie .btn::before {
  content: "";
  position: absolute;
  width: 16px;
  height: auto;
  aspect-ratio: 1;
  background: var(--bussan-fair-area-color-light); /* 現在の「エリアカラー(ライト)」 */
}
#bussan-fair_wrap.brand .brand_info .movie::before { top: 40px; left: 480px; width: 26px; } /* 横・大 */
#bussan-fair_wrap.brand .brand_info .movie .box::before { top: 80px; left: 520px; } /* 横・小 */
#bussan-fair_wrap.brand .brand_info .movie .btn::before { top: 20px; left: 40px; } /* ボタン周り　あしらい */

/* マウスオーバー */
#bussan-fair_wrap.brand .brand_info .movie .btn a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* マップ */
#bussan-fair_wrap.brand .brand_info .img_map {
  position: absolute;
  top: 0;
  right: 0;
  width: 430px;
}

/* SP調節用 */
/* ブランド内容（その他） */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .other {
  position: unset;
  padding: 0 10px;
  min-height: unset;
}

/* 動画 */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie {
  position: relative;
  width: 100%;
  padding: 6px;
}

.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .box::after {
  top: 6px;
  left: 6px;
}

/* テキストリスト */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .btn {
  margin-top: 10px;
}

/* 四角あしらい */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie::before,
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .box::before,
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .btn::before {
  width: 14px;
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
}
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie::before { top: -30px; right: 20px; width: 20px; } /* 動画横・大 */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .box::before { top: -20px; right: -10px; } /* 動画横・小 */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .movie .btn::before { top: 10px; left: 0px; } /* ボタン横・小 */

/* マップ */
.wrapper_ > #bussan-fair_wrap.brand .brand_info .img_map {
  position: unset;
  width: 100%;
  margin: 20px 0 0 0;
}

/* 共通タイトル
================================================== */
#bussan-fair_wrap .title_box {
  margin: 30px 0 0 0;
}

#bussan-fair_wrap .title_box .title {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

#bussan-fair_wrap .title_box .title > span {
  display: block;
}

#bussan-fair_wrap .title_box .title .sub_txt {
  font-size: 1.4rem;
  padding: 0 0  10px 0;
}

/* ブランド商品掲載エリア
================================================== */
/* 生産者の紹介 */
#bussan-fair_wrap.brand .brand_producer {
  position: relative; /* ボーダー用 */
  margin: 30px 0 0 0;
  padding: 8px 0;
}
/* ボーダー */
#bussan-fair_wrap.brand .brand_producer::before,
#bussan-fair_wrap.brand .brand_producer::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(45deg, #cccccc, #cccccc 2px, transparent 2px, transparent 6px);
}
#bussan-fair_wrap.brand .brand_producer::before { top: 0; }
#bussan-fair_wrap.brand .brand_producer::after { bottom: 0; }

/* -------------------- 生産者の紹介（1人分） -------------------- */
#bussan-fair_wrap.brand .brand_producer .producer_box {
  position: relative;
  margin-top: 30px;
}
#bussan-fair_wrap.brand .brand_producer .producer_box:last-of-type {
  margin-bottom: 30px;
}

/* 生産者（写真） */
#bussan-fair_wrap.brand .brand_producer .producer_box .img .box,
#bussan-fair_wrap.brand .brand_producer .producer_box .img .box::after,
#bussan-fair_wrap.brand .brand_producer .producer_box .img img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 360;
}

#bussan-fair_wrap.brand .brand_producer .producer_box .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 350px;
  padding: 0 10px 10px 0;
}

#bussan-fair_wrap.brand .brand_producer .producer_box .img .box {
  position: relative;
}

#bussan-fair_wrap.brand .brand_producer .producer_box .img .box::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bussan-fair-area-color-light); /* 現在の「エリアカラー(ライト)」 */
}

#bussan-fair_wrap.brand .brand_producer .producer_box .img .box img {
  position: relative;
  z-index: 1;
}

/* 生産者（名前） */
#bussan-fair_wrap.brand .brand_producer .producer_box .name {
  margin: 0 0 0 250px;
  padding: 20px 20px 10px 130px;
}

#bussan-fair_wrap.brand .brand_producer .producer_box .name .icon {
  display: inline-block;
  color: #fff;
  font-size: 1.4rem;
  padding: 3px 10px;
  background: #111;
}
#bussan-fair_wrap.brand .brand_producer .producer_box .name .icon + .icon {
  margin: 0 0 0 5px;
}
#bussan-fair_wrap.brand .brand_producer .producer_box .name > span:not(.icon) {
  display: block;
  font-size: 2.0rem;
  font-weight: bold;
  margin: 5px 0 0 0;
}

/* 生産者（コメント） */
#bussan-fair_wrap.brand .brand_producer .comment_box {
  position: relative;
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0 0 0 250px;
  padding: 20px 20px 20px 130px;
  background: #fff;
  border: 2px solid var(--bussan-fair-area-color); /* 現在の「エリアカラー(基本)」設定 */
}

#bussan-fair_wrap.brand .brand_producer .comment_box .title {
  font-weight: bold;
  margin: 0 0 5px 0;
}

/* 四角あしらい */
#bussan-fair_wrap.brand .brand_producer .comment_box .title::before,
#bussan-fair_wrap.brand .brand_producer .comment_box::before,
#bussan-fair_wrap.brand .brand_producer .comment_box::after {
  content: "";
  position: absolute;
  width: 16px;
  height: auto;
  aspect-ratio: 1;
  background: var(--bussan-fair-area-color-light); /* 現在の「エリアカラー(ライト)」 */
}
#bussan-fair_wrap.brand .brand_producer .comment_box .title::before { top: -10px; right: 50px; }/* ボーダー・小 */
#bussan-fair_wrap.brand .brand_producer .comment_box::before { bottom: 100px; left: -90px; width: 26px; } /* 写真下・大 */
#bussan-fair_wrap.brand .brand_producer .comment_box::after { bottom: 76px; left: -50px; } /* 写真下・小 */

/* SP調節用 */
/* -------------------- 生産者の紹介（1人分） -------------------- */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .producer_box {
  padding: 0 10px;
}

/* 生産者（写真） */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .producer_box .img {
  position: unset;
  width: 100%;
}

.wrapper_ > #bussan-fair_wrap.brand .brand_producer .producer_box .img .box::after {
  top: 6px;
  left: 6px;
}

/* 生産者（名前） */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .producer_box .name {
  margin: 0;
  margin-top: 10px;
  padding: 0;
  text-align: center;
}

/* 生産者（コメント） */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box {
  margin: 0;
  margin-top: 10px;
  padding: 10px 3%;
}

/* 四角あしらい */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box .title::before,
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box::before,
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box::after {
  width: 14px;
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
}
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box .title::before { bottom: -8px; right: 30px; }/* ボーダー・小 */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box::before { top: -74px; left: 20px; width: 20px; } /* 写真下・大 */
.wrapper_ > #bussan-fair_wrap.brand .brand_producer .comment_box::after { top: -45px; left: 48px; } /* 写真下・小 */

/* バイヤーコメント 
================================================== */
#bussan-fair_wrap.brand .brand_buyer {
  position: relative;
  margin: 30px 20px 0px 20px;
  padding: 0 0 30px 0;
}

#bussan-fair_wrap.brand .brand_buyer .comment_box {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  width: 100%;
  max-width: 640px;
  padding: 20px;
  background: #fff;
}
#bussan-fair_wrap.brand .brand_buyer .comment_box::before,
#bussan-fair_wrap.brand .brand_buyer .comment_box::after {
    content:'';
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid #ccc;
}
/* PC用 */
.mainframe_ #bussan-fair_wrap.brand .brand_buyer .comment_box::before { border-right: none; left: 0; }
.mainframe_ #bussan-fair_wrap.brand .brand_buyer .comment_box::after { border-left: none; right: 0; }

/* 三角形 */
#bussan-fair_wrap.brand .brand_buyer .comment_box .triangle {
position: absolute;
z-index: 1;
top: 44px;
right: -15px;
width: 30px;
height: 30px;
background: #fff;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transform: rotate(100deg) skewY(-50deg);
}

#bussan-fair_wrap.brand .brand_buyer .comment_box .title {
  font-weight: bold;
  padding: 0 0 5px 0;
}

#bussan-fair_wrap.brand .brand_buyer .comment_box .name {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  text-align: right;
  padding: 5px 0 0 0;
}

#bussan-fair_wrap.brand .brand_buyer .img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
}

#bussan-fair_wrap.brand .brand_buyer img {
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 350;
}

/* タイトル */
#bussan-fair_wrap #title_list p {
  color: #333;
  text-align: center;
  font-size: 2.0rem;
  font-weight: bold;
  padding: 10px 0 0 0;
  border-top: 4px solid #333;
}

#bussan-fair_wrap #title_list p .mini {
  font-size: 1.6rem;
}

/* SP調節用 */
.wrapper_ > #bussan-fair_wrap.brand .brand_buyer {
  margin: 30px 3% 0px 3%;
}

.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box {
  max-width: 700px;
  margin-bottom: 50px;
}

.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box .name {
  text-align: left;
}

.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box::before,
.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box::after {
    top: unset;
    left: 0;
    width: 100%;
    height: 10px;
}
.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box::before { border-bottom: none; top: 0; }
.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box::after { border-top: none; bottom: 0; }

.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .comment_box .triangle {
  top: unset;
  bottom: -15px;
  right: clamp(120px, 10vw, 20px);
  transform: scale(-1, 1) rotate(190deg) skewY(-50deg);
}

.wrapper_ > #bussan-fair_wrap.brand .brand_buyer .img {
  width: 110px;
}