@charset "UTF-8";
/**************************************************
* パラメータ定義
**************************************************/
/**********[ ブレークポイント ]**********/
/**********[ カラー設定 ]**********/
/**********[ ページサイズ設定 ]**********/
/* ------------------------------------
   Variables
------------------------------------ */
/*
// remを返す
@function rem($pixels) {
    @return $pixels / 16 * 1;
}

// remを返す(単位付き)
@function _rem($pixels) {
    @return ($pixels / 16 * 1)+rem;
}
*/
/**************************************************
* 初期化
**************************************************/
/**********[ 表示切替 ]**********/
.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.bg1 {
  background-color: rgb(197, 82, 77);
  color: #fff;
}

.bg2 {
  color: rgb(84, 34, 34);
}

a:hover {
  opacity: 0.9;
}

/**************************************************
* フォント設定
**************************************************/
/**********[ 使用フォント ]**********/
/* ------------------------------------
   MOBO Font 11（ローカルフォント読み込み）
------------------------------------ */
@font-face {
  font-family: "MOBO Font 11";
  src: url("../fonts/MOBO-Font11/MOBO-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MOBO Font 11";
  src: url("../fonts/MOBO-Font11/MOBO-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MOBO Font 11";
  src: url("../fonts/MOBO-Font11/MOBO-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MOBO Font 11";
  src: url("../fonts/MOBO-Font11/MOBO-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.video_wrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.video_wrap .title {
  font-family: "MOBO Font 11", Arial, Helvetica, sans-serif;
  color: #542222;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%; /* 30px */
  letter-spacing: 2px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .video_wrap .title {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
}
.video_wrap > div {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.video_wrap > div video {
  width: 100%;
  border-radius: 18px;
  background: #000;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 800/450;
}
@media screen and (max-width: 768px) {
  .video_wrap > div video {
    aspect-ratio: 335/594.63;
  }
}

.item_wrap {
  padding: 24px;
}
@media screen and (max-width: 768px) {
  .item_wrap {
    padding: 0;
  }
}
.item_wrap.reverse > div {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .item_wrap.reverse > div {
    flex-direction: column;
  }
}
.item_wrap > h3 {
  font-family: "m-plus-rounded-1m", sans-serif;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  display: block !important;
  width: fit-content;
  color: #C5524D;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  position: relative;
  padding-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .item_wrap > h3 {
    margin-bottom: 24px;
  }
}
.item_wrap > h3:not(.title-tag) {
  display: inline-block;
}
.item_wrap > h3:not(.title-tag)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 4px;
  background-image: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/line_dot2.svg");
  background-size: 12px 4px;
  background-repeat: repeat-x;
}
.item_wrap > div {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .item_wrap > div {
    gap: 24px;
    flex-direction: column;
  }
}
.item_wrap > div > figure {
  width: 400px;
  aspect-ratio: 400/520;
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .item_wrap > div > figure {
    width: 100%;
  }
}
.item_wrap > div .info {
  flex: 1;
  text-align: center;
}
.item_wrap > div .info .comment {
  padding: 16px 24px 20px 24px;
  border-radius: 20px;
  background: #FFF;
  margin-bottom: 16px;
}
.item_wrap > div .info .comment .caption {
  font-family: "m-plus-rounded-1m", sans-serif;
  color: #C5524D;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 2.4px;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .item_wrap > div .info .comment .caption {
    width: 100%;
    font-weight: 400px;
  }
}
.item_wrap > div .info .comment .text {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: 1.4px;
  text-align-last: left;
  word-break: break-all;
  text-align: left;
  margin-bottom: 8px;
}
.item_wrap > div .info figure {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}
.item_wrap > div .info figure img {
  border-radius: 20px;
}
.item_wrap > div .info .name {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%; /* 18px */
  letter-spacing: 1.8px;
  margin-bottom: 4px;
}
.item_wrap > div .info .price {
  font-family: "m-plus-rounded-1m", sans-serif;
  color: #542222;
  font-size: 19px;
  font-weight: 500;
  line-height: 160%; /* 30.4px */
  margin-bottom: 8px;
}
.item_wrap > div .info .price .size1 {
  font-size: 24px;
}
.item_wrap > div .info .price .size2 {
  font-family: "MOBO Font 11", sans-serif;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
}
/* SPで縦並び */
.styling_wrap {
  max-width: 800px;
  width: 100%;
}
.styling_wrap h3 {
  font-family: "MOBO Font 11", Arial, Helvetica, sans-serif;
  color: #C5524D;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 160%; /* 38.4px */
  letter-spacing: 2.4px;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .styling_wrap h3 {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
.styling_wrap > div {
  gap: 20px;
}
.styling_wrap > div .comment {
  width: 100%;
  border-radius: 16px;
  gap: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .styling_wrap > div .comment {
    gap: 16px;
  }
}
.styling_wrap > div .comment figure {
  aspect-ratio: 1/1;
  width: 108px;
}
@media screen and (max-width: 768px) {
  .styling_wrap > div .comment figure {
    width: 88px;
  }
}
.styling_wrap > div .comment .text {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  flex: 1;
  border-radius: 20px;
  background: #F8E7E5;
  padding: 20px;
  color: #542222;
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  letter-spacing: 1.4px;
  position: relative;
}
.styling_wrap > div .comment .text::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  aspect-ratio: 12/16;
  background: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/arrow_fukidashi1.svg") no-repeat center center/contain;
  pointer-events: none;
}
.styling_wrap > div ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .styling_wrap > div ul {
    flex-direction: column;
    align-items: center;
  }
}
.styling_wrap > div ul img {
  border-radius: 14px;
  background: #fff;
  aspect-ratio: 240/384;
  flex: 1;
  max-width: 240px;
}
@media screen and (max-width: 768px) {
  .styling_wrap > div ul img {
    width: 240px;
  }
}
@media screen and (max-width: 768px) {
  .styling_wrap > div {
    flex-direction: column;
  }
  .styling_wrap .comment {
    max-width: 100%;
  }
}

.point_wrap {
  text-align: center;
}
.point_wrap h3 {
  font-family: "m-plus-rounded-1m", sans-serif;
  color: #FFF;
  text-align: center;
  font-size: 24px;
  font-weight: 200;
  line-height: 150%; /* 36px */
  margin-bottom: 8px;
}
.point_wrap figure {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(197, 82, 77, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}
.point_wrap p {
  font-family: "MOBO Font 11", sans-serif;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%; /* 25.6px */
  letter-spacing: 1.6px;
}
@media screen and (max-width: 768px) {
  .point_wrap p {
    font-weight: 400;
  }
}

.type_wrap {
  width: 100%;
}
.type_wrap a {
  display: block;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  padding: 16px 16px 46px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 20px rgba(197, 82, 77, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.type_wrap a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 18px;
  aspect-ratio: 1/1;
  background: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/arrow.svg") no-repeat center center/contain;
  pointer-events: none;
}
.type_wrap a:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(197, 82, 77, 0.12);
}
.type_wrap a figure {
  width: 100%;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: rgba(197, 82, 77, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
}
.type_wrap a p {
  font-family: "MOBO Font 11", sans-serif;
  color: var(--, #542222);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%; /* 16px */
  letter-spacing: 2.4px;
}

/* ------------------------------------------------
   Boa Collection block
   HTML:
   <article id="section9_item4" class="collection_wrap">...</article>
------------------------------------------------ */
.collection_wrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .collection_wrap {
    padding-inline: 20px;
  }
}
.collection_wrap .title {
  font-family: "m-plus-rounded-1m", sans-serif;
  color: #C5524D;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  margin-bottom: 24px;
}
.collection_wrap > div ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .collection_wrap > div ul {
    flex-direction: column;
  }
}
.collection_wrap > div ul li {
  flex: 1;
  position: relative; /* 疑似要素用 */
  background: #fff;
  border-radius: 12px;
  padding: 34px 28px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  /* 点線フレーム */
}
@media screen and (max-width: 768px) {
  .collection_wrap > div ul li {
    flex-direction: column;
  }
}
.collection_wrap > div ul li::before {
  content: "";
  position: absolute;
  inset: 10px; /* ←ここで内側に下げる量を調整 */
  border: 2px dotted #b54545;
  border-radius: 10px;
  pointer-events: none;
}
.collection_wrap > div ul li h4 {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  font-size: 18px;
  font-weight: 700;
  line-height: 160%; /* 28.8px */
  letter-spacing: 1.8px;
  margin-bottom: 12px;
}
.collection_wrap > div ul li img {
  width: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  margin-bottom: 24px;
}

/* ------------------------------------
   Title 共通
------------------------------------ */
.title {
  text-align: center;
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .title {
    margin-bottom: 40px;
  }
}
.title p {
  font-family: "MOBO Font 11", Arial, Helvetica, sans-serif;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: 1.6px;
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .title p {
    font-size: 14px;
    letter-spacing: 1.4px;
  }
}
.title h2 {
  font-family: "MOBO Font 11", sans-serif;
  color: #FFF;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 3.2px;
  position: relative;
  padding-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .title h2 {
    font-size: 22px;
    letter-spacing: 2.2px;
  }
}
.title h2:not(.title-tag) {
  display: inline-block;
}
.title h2:not(.title-tag)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 4px;
  background-image: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/line_dot1.svg");
  background-repeat: repeat-x;
  background-size: 12px 4px;
}

.bg2 .title p,
.bg2 .title h2 {
  color: rgb(84, 34, 34);
}
.bg2 .title h2::after {
  background-image: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/line_dot2.svg");
}

/* ------------------------------------
   タイトルタグ
------------------------------------ */
.title-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #C5524D;
  border-radius: 8px;
  height: 82px;
  max-width: 416px;
  width: 100%;
  padding: 0 24px;
  color: #fff;
  position: relative;
}
.title-tag::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dotted #fff;
  border-radius: 10px;
}
.title-tag span {
  font-family: "MOBO Font 11", sans-serif;
  color: #FFF;
  font-size: 26.383px;
  font-weight: 700;
  line-height: 100%; /* 26.383px */
  letter-spacing: 2.638px;
  margin-top: 4px;
}
@media screen and (max-width: 768px) {
  .title-tag span {
    font-size: 24px;
    letter-spacing: 2.4px;
  }
}

.btn1 {
  font-family: "MOBO Font 11", sans-serif;
  display: inline-flex;
  padding: 16px 42px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #542222;
  color: #FFF!important;
  font-size: 14px;
  font-weight: 600;
  line-height: 100%; /* 14px */
  letter-spacing: 1.4px;
  text-decoration: none;
  cursor: pointer;
}
/* ---------------------------------------------
   Reset
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

main h1,main h2,main h3,main h4,main p,main ul,main ol,main li,main figure,main img,main a {
  margin: 0;
  padding: 0;
}

main img {
  max-width: 100%;
  display: block;
  height: auto;
}

main ul,main ol {
  list-style: none;
}

/* ------------------------------------
   Base
------------------------------------ */
/*
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Shippori Mincho B1", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック体", "メイリオ", sans-serif;
	background: $color-base;
	color: $color-text;
	line-height: 1.5;
}
*/
main img {
  max-width: 100%;
  height: auto;
  display: block;
}

main {
  width: 100%;
  background-color: rgb(248, 231, 229);
}

main section {
  padding: 40px 16px;
}
@media screen and (max-width: 768px) {
  section .contents {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
  }
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

/* ------------------------------------
   1. MV
------------------------------------ */
#section1 {
  background: #F8E7E5;
  padding-top: 0;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #section1 {
    padding: 0 0 40px;
  }
}
#section1 figure {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

/* ------------------------------------
   2. 説明テキスト
------------------------------------ */
#section2 {
  text-align: center;
  padding: 40px 16px 80px;
}
@media screen and (max-width: 768px) {
  #section2 {
    padding-bottom: 80px;
  }
}
#section2 .text1 {
  font-family: "MOBO Font 11", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 200%; /* 32px */
  letter-spacing: 1.6px;
}
@media screen and (max-width: 768px) {
  #section2 .text1 {
    font-size: 14px;
  }
}

/* ------------------------------------
   3. 3つのこだわりポイント
------------------------------------ */
#section3 {
  padding: 64px 0;
}
#section3 .title {
  margin-bottom: 40px;
}
#section3 .contents ul {
  margin-left: auto;
  margin-right: auto;
  max-width: 690px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  #section3 .contents ul {
    flex-direction: column;
    width: 215px;
    gap: 40px;
  }
}
#section3 .contents ul li {
  width: 33.3333333333%;
  margin: 0 10px;
}
@media screen and (max-width: 768px) {
  #section3 .contents ul li {
    width: 100%;
    margin: 0;
  }
}
#section3 .contents ul li:first-child {
  margin-left: 0;
}
#section3 .contents ul li:last-child {
  margin-right: 0;
}

/* ------------------------------------
   4. 動画ブロック
------------------------------------ */
#section4 {
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  #section4 > div {
    width: 335px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------
   5. 3タイプ選択
------------------------------------ */
#section5 {
  background: #F8E7E5;
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  #section5 {
    padding: 40px 0 40px;
  }
}
#section5 .title {
  margin-bottom: 64px;
}
@media screen and (max-width: 768px) {
  #section5 .title {
    margin-bottom: 32px;
  }
}
#section5 .contents ul {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  max-width: 848px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #section5 .contents ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
  }
}
#section5 .contents ul li {
  width: 33.3333333333%;
  margin: 0 12px;
}
@media screen and (max-width: 768px) {
  #section5 .contents ul li {
    width: 263px;
    margin: 0;
  }
}
#section5 .contents ul li:first-child {
  margin-left: 0;
}
#section5 .contents ul li:last-child {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  #section5 .contents ul {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------
   6,7,8 各スタイルブロック
------------------------------------ */
#section6,
#section7,
#section8 {
  background: #F8E7E5;
}
@media screen and (max-width: 768px) {
  #section6,
  #section7,
  #section8 {
    padding: 40px 20px;
    width: 375px;
    margin-left: auto;
    margin-right: auto;
  }
}
#section6 .title,
#section7 .title,
#section8 .title {
  margin-bottom: 56px;
}
#section6 .contents,
#section7 .contents,
#section8 .contents {
  max-width: 960px;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  #section6 .contents,
  #section7 .contents,
  #section8 .contents {
    gap: 56px;
  }
}

@media screen and (max-width: 768px) {
  #section8 {
    padding-bottom: 80px;
  }
}

/* ボタン */
/*
.btn1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: $color-accent;
	color: #fff;
	min-width: 160px;
	height: 44px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	transition: transform .2s ease, box-shadow .2s ease;

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 16px rgba(197, 82, 77, 0.25);
	}
}
*/
/* ------------------------------------
   9. 年代別おすすめ
------------------------------------ */
#section9 {
  background: #FFF8F7;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  #section9 {
    padding: 80px 20px 80px;
  }
}
#section9 .title {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #section9 .title {
    margin-bottom: 16px;
  }
}
#section9 .contents {
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #section9 .contents {
    width: 335px;
    margin-left: auto;
    margin-right: auto;
  }
}
#section9 .contents .styling_wrap {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}
#section9 .contents .styling_wrap:last-child {
  margin-bottom: 0;
}
#section9 .contents .collection_wrap {
  margin-bottom: 80px;
}

/* ------------------------------------
   10. 安西こずえのスタイリング
------------------------------------ */
#section10 {
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  #section10 {
    padding: 80px 20px 40px;
  }
}
#section10 .title {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #section10 .contents {
    width: 335px;
    margin-left: auto;
    margin-right: auto;
  }
}
#section10 .contents > div {
  display: grid;
  gap: 24px 40px;
  align-items: start;
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* 左ブロック（コメント＋小画像2枚） */
  /* 右の大きい画像 */
}
@media screen and (max-width: 768px) {
  #section10 .contents > div {
    display: block;
  }
}
#section10 .contents > div .comment {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  letter-spacing: 1.4px;
  /*
  				&::after {
  					content: "";
  					position: absolute;
  					right: -16px;
  					top: 48px;
  					width: 26px;
  					height: 24px;
  					background: #fff;
  					clip-path: polygon(0 0, 100% 50%, 0 100%);
  					filter: drop-shadow(0 6px 10px rgba(84, 34, 34, .06));
  				}
  */
}
@media screen and (max-width: 768px) {
  #section10 .contents > div .comment {
    font-size: 12px;
  }
}
#section10 .contents > div .comment::before {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  aspect-ratio: 12/16;
  background: url("https://img.abc-mart.net/img/event/2025/2511_abcselect_boa/image/arrow_fukidashi2.svg") no-repeat center center/contain;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  #section10 .contents > div .comment::before {
    top: -20px;
    left: 50%;
    right: unset;
    transform: rotate(-90deg) translateX(-50%);
  }
}
#section10 .contents > div .imaage1 {
  grid-area: right;
  display: block;
  max-width: 240px;
  border-radius: 32px;
  object-fit: cover;
  box-shadow: 0 16px 40px rgba(84, 34, 34, 0.08);
  grid-row: 1/span 2;
  justify-self: end;
}
@media screen and (max-width: 768px) {
  #section10 .contents > div .imaage1 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }
}
#section10 .contents > div .images {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  grid-row: 2;
}
@media screen and (max-width: 768px) {
  #section10 .contents > div .images {
    margin-bottom: 40px;
  }
}
#section10 .contents > div .images img {
  display: block;
  max-width: 210px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(84, 34, 34, 0.05);
}
@media screen and (max-width: 768px) {
  #section10 .contents > div .images img {
    width: 150.5px;
  }
}

/* ------------------------------------
   11. Styling
------------------------------------ */
#section11 {
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  #section11 {
    padding: 40px 20px 80px;
  }
}
#section11 .title {
  margin-bottom: 16px;
}
#section11 .title h2 {
  font-family: "m-plus-rounded-1m", sans-serif;
  color: #C5524D;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
}
#section11 .title h2::after {
  content: unset;
}
#section11 .contents {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  #section11 .contents {
    width: 335px;
    margin-left: auto;
    margin-right: auto;
  }
}
#section11 .contents > div {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 42px;
  display: flex;
  gap: 24px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(84, 34, 34, 0.03);
}
@media screen and (max-width: 768px) {
  #section11 .contents > div {
    padding: 42px 30px;
    flex-direction: column;
  }
}
#section11 .contents > div::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dotted rgb(196, 73, 73);
  border-radius: 14px;
  pointer-events: none;
}
#section11 .contents > div figure {
  flex: 0 0 140px;
  max-width: 180px;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #section11 .contents > div figure {
    width: 180px;
    flex: 0 0 180px;
  }
}
#section11 .contents > div figure img {
  max-width: 100%;
  height: auto;
  display: block;
}
#section11 .contents .info {
  flex: 1;
  color: #542222;
  line-height: 1.7;
  font-size: 14px;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #section11 .contents .info {
    text-align: center;
  }
}
#section11 .contents .info .name {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  font-size: 29px;
  font-weight: 600;
  line-height: 100%; /* 29px */
  letter-spacing: 4.35px;
  margin-bottom: 16px;
  margin-right: 12px;
}
@media screen and (max-width: 768px) {
  #section11 .contents .info .name {
    font-size: 24px;
    margin-bottom: 8px;
  }
}
#section11 .contents .info .name span {
  font-family: "MOBO Font 11", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 100%; /* 14px */
  letter-spacing: 1.4px;
}
@media screen and (max-width: 768px) {
  #section11 .contents .info .name span {
    font-size: 12px;
  }
}
#section11 .contents .info .text {
  font-family: "MOBO Font 11", sans-serif;
  color: #542222;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: 1.4px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  #section11 .contents .info .text {
    font-size: 12px;
  }
}

/* ------------------------------------
   12. 一番下の Boa Collection
------------------------------------ */
#section12 {
  text-align: center;
  padding-bottom: 80px;
  max-width: unset;
}
#section12 .title {
  color: #fff;
  margin-bottom: 24px;
}
#section12 > div {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  #section12 > div {
    width: 335px;
    margin-left: auto;
    margin-right: auto;
  }
}/*# sourceMappingURL=style.css.map */