@charset "UTF-8";

/*-----------------------------------------------------------------
		変更スタイル
-----------------------------------------------------------------*/
/* ▼▼▼▼Part1▼▼▼▼ */
.part1 .mv {
  background-color: #2E3F4E;
  background-image: url(../images/archive/part_1/part01_mv.png);
}

.BG_1 {
  background-color: #F8F3DE;
}

.BG_1 .f_title,
.BG_1 .b_title {
  color: #D9BC73;
  z-index: 2;
  text-shadow: 1px 1px 0px #2E3F4E, -1px -1px 0px #2E3F4E, -1px 1px 0px #2E3F4E, 1px -1px 0px #2E3F4E, 1px 0px 0px #2E3F4E, -1px 0px 0px #2E3F4E, 0px 1px 0px #2E3F4E, 0px -1px 0px #2E3F4E;
}

.BG_1 .front,
.BG_1 .back {
  background: linear-gradient(#334554, #334554, #2A3B49, #263644, #263644);
  outline: solid 2px #D9BC73;
  outline-offset: -15px;
}

.BG_1 .b_round,
.BG_1 .s_round {
  background: #C8A95B;
}

.BG_1 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23C8A95B"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_1 .thumb .slick-current {
  outline: 2px solid #D9BC73;
  outline-offset: -2px;
}

.BG_1 .note {
  color: #D9BC73;
}

/* ▲▲▲▲Part1▲▲▲▲ */
/* ▼▼▼▼Part2▼▼▼▼ */
.part2 .mv {
  background-color: #658fa7;
  background-image: url(../images/archive/part_2/part02_mv.png);
}

.part2 .theme_wrap {
  background-color: #0D2C40;
  padding: 20px 0;
}

.part2 .theme {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 200px;
  background-image: url(../images/archive/part_2/part02_explanation_pc.png);
  margin: 0 20px;
}

@media screen and (max-width: 768px) {
  .part2 .theme{
    width: 470px;
    margin: auto;
    height: 135px;
  }
    .part2 .theme_wrap {
      padding: 10px 0
    }
}

@media screen and (max-width: 555px){
    .part2 .theme{
      width: 390px;
      height: 111px;
    }
}

@media screen and (max-width: 415px){
  .part2 .theme {
    background-image: url(../images/archive/part_2/part02_explanation_sp.png);
  }
  .part2 .theme{
    margin: 0 auto;
    height: 180px;
    width: auto;
  }
}

.BG_2 {
  /* background: linear-gradient(#E3E8EA, #8BD6FB); */
  background: url(../images/archive/part_2/part02_bg.png) center center / cover no-repeat;
  /* background: url(../images/archive/part_2/part02_bg.png); */
}

.BG_2 .front,
.BG_2 .back {
  outline: solid 2px #0D2C40;
  outline-offset: -15px;
  /* background: url(../images/archive/part_2/part02_bg.png) center center / cover no-repeat; */
  /* background: #fff; */
  background: linear-gradient(#E3E8EA, #8BD6FB);
}

.BG_2 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%230D2C40"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_2 .f_title,
.BG_2 .b_title {
  color: #0D2C40;
}

.BG_2 .b_round,
.BG_2 .s_round {
  background: #FF7800;
}

.BG_3_orange .note {
  color: #0D2C40;
}

/* ▲▲▲▲Part2▲▲▲▲ */
/* ▼▼▼▼Part3▼▼▼▼ */
.part3 .mv {
  background-color: #A2542D;
  background-image: url(../images/archive/part_3/part03_mv.png);
}

.BG_3_purple .f_title,
.BG_3_purple .b_title {
  color: #5F3156;
}

.BG_3_orange .f_title,
.BG_3_orange .b_title {
  color: #A2542D;
}

.BG_3_purple {
  background-color: #5D3157;
}

.BG_3_orange {
  background-color: #A0552D;
}

/* オレンジ背景 */
.BG_3_purple .front,
.BG_3_purple .back {
  background: #A2542D url(../images/archive/part_3/part03_bg_orange.png) bottom repeat-x;
}

.BG_3_purple .back {
  background-color: #A2542D;
}

.BG_3_orange .b_round,
.BG_3_orange .s_round {
  background: #A2542D;
}

.BG_3_orange .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23A2542D"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_3_orange .note {
  color: #fff;
}

/* 紫背景 */
.BG_3_orange .front,
.BG_3_orange .back {
  background: #5F3156 url(../images/archive/part_3/part03_bg_purple.png) bottom repeat-x;
}

.BG_3_orange .back {
  background-color: #5F3156;
}

.BG_3_purple .b_round,
.BG_3_purple .s_round {
  background: #5F3156;
}

.BG_3_purple .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23522148"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_3_purple .note {
  color: #fff;
}

.BG_3_purple .thumb .slick-current {
  outline: 2px solid #5F3156;
  outline-offset: -2px;
}

.BG_3_orange .thumb .slick-current {
  outline: 2px solid #A2542D;
  outline-offset: -2px;
}

/* ▲▲▲▲Part3▲▲▲▲ */
/* ▼▼▼▼Part4▼▼▼▼ */
.part4 .mv {
  background-color: #FAF7F0;
  background-image: url(../images/archive/part_4/part04_mv.png);
}

.BG_4_red {
  background-color: #612022;
}

.BG_4_blue {
  background-color: #203961;
}

.BG_4_red .front,
.BG_4_red .back {
  background: url(../images/archive/part_4/part04_bg_valentine.png) repeat;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}

.BG_4_blue .front,
.BG_4_blue .back {
  background: url(../images/archive/part_4/part04_bg_whiteday.png) center center / cover no-repeat;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}

.BG_4_red .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23612022"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_4_red .f_title,
.BG_4_red .b_title {
  color: #612022;
  text-shadow:
    1px 1px 0px #F2E7CB, -1px -1px 0px #F2E7CB,
    -1px 1px 0px #F2E7CB, 1px -1px 0px #F2E7CB,
    1px 0px 0px #F2E7CB, -1px 0px 0px #F2E7CB,
    0px 1px 0px #F2E7CB, 0px -1px 0px #F2E7CB;
}

.BG_4_red .b_round,
.BG_4_red .s_round {
  background: #612022;
}

.BG_4_red .thumb .slick-current {
  outline: 2px solid #612022;
  outline-offset: -2px;
}

.BG_4_red .note {
  color: #612022;
  font-weight: bold;
  text-shadow:
    1px 1px 0px #F2E7CB, -1px -1px 0px #F2E7CB,
    -1px 1px 0px #F2E7CB, 1px -1px 0px #F2E7CB,
    1px 0px 0px #F2E7CB, -1px 0px 0px #F2E7CB,
    0px 1px 0px #F2E7CB, 0px -1px 0px #F2E7CB;
}

.BG_4_blue .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23203961"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_4_blue .f_title,
.BG_4_blue .b_title {
  color: #203961;
}

.BG_4_blue .b_round,
.BG_4_blue .s_round {
  background: #203961;
}

.BG_4_blue .note {
  color: #203961;
  font-weight: bold;
}

/* ▲▲▲▲Part4▲▲▲▲ */
/* ▼▼▼▼Part5▼▼▼▼ */
.part5 .mv {
  background-color: #31C5ED;
  background-image: url(../images/archive/part_5/part05_mv.png);
}

.BG_5_yellow {
  background: #FFE300;
}

.BG_5_red {
  background: #FF3F4E;
}

.BG_5_blue {
  background: #3F49FF;
}

.BG_5_green {
  background: #00C006;
}

.BG_5_purple {
  background: #8800C0;
}

.BG_5_yellow .front, .BG_5_yellow .back,
.BG_5_red .front, .BG_5_red .back,
.BG_5_blue .front, .BG_5_blue .back,
.BG_5_green .front, .BG_5_green .back,
.BG_5_purple .front, .BG_5_purple .back {
  background: linear-gradient(#ffffff, #EAEAEA);
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
  outline: solid 2px #000;
  outline-offset: -15px;
}

.BG_5_yellow .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23FFE300"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_5_red .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23FF3F4E"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_5_blue .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%233F49FF"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_5_green .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%2300C006"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_5_purple .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%238800C0"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_5_yellow .f_title,
.BG_5_yellow .b_title {
  color: #FFE300;
}

.BG_5_red .f_title,
.BG_5_red .b_title {
  color: #FF3F4E;
}

.BG_5_blue .f_title,
.BG_5_blue .b_title {
  color: #3F49FF;
}

.BG_5_green .f_title,
.BG_5_green .b_title {
  color: #00C006;
}

.BG_5_purple .f_title,
.BG_5_purple .b_title {
  color: #8800C0;
}

.BG_5_yellow .b_round,
.BG_5_yellow .s_round {
  background: #FFE300;
}

.BG_5_red .b_round,
.BG_5_red .s_round {
  background: #FF3F4E;
}

.BG_5_blue .b_round,
.BG_5_blue .s_round {
  background: #3F49FF;
}

.BG_5_green .b_round,
.BG_5_green .s_round {
  background: #00C006;
}

.BG_5_purple .b_round,
.BG_5_purple .s_round {
  background: #8800C0;
}

.BG_5_yellow .note {
  color: #FFE300;
}

.BG_5_red .note {
  color: #FF3F4E;
}

.BG_5_blue .note {
  color: #3F49FF;
}

.BG_5_green .note {
  color: #00C006;
}

.BG_5_purple .note {
  color: #8800C0;
}

.BG_5_green .thumb .slick-current {
  outline: 2px solid #00C006;
  outline-offset: -2px;
}

/* ▲▲▲▲Part5▲▲▲▲ */
/* ▼▼▼▼Part6▼▼▼▼ */
.part6 .mv {
  background-color: #005469;
  background-image: url(../images/archive/part_6/part06_mv.png);
}

.BG_6_red {
  background: url(../images/archive/part_6/part06_bg_red.png);
}

.BG_6_blue {
  background: url(../images/archive/part_6/part06_bg_blue.png);
}

.BG_6_red .front,
.BG_6_red .back,
.BG_6_blue .front,
.BG_6_blue .back {
  background: url(../images/archive/part_6/part06_bg.png) center center / cover no-repeat;
  outline: solid 15px #4C3F3F;
  outline-offset: -15px;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}

.BG_6_red .outer_BG_6 {
  display: block;
  margin: 50px auto;
  width: 600px;
  height: 540px;
  border-width: 1px 0;
  position: relative;
  background: url(../images/archive/part_6/part06_bg.png) center center / cover no-repeat;
  outline: solid 15px #4C3F3F;
  outline-offset: -15px;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}

.BG_6_blue .outer_BG_6 {
  display: block;
  margin: 50px auto;
  width: 600px;
  height: 540px;
  border-width: 1px 0;
  position: relative;
  background: url(../images/archive/part_6/part06_bg.png) center center / cover no-repeat;
  outline: solid 15px #4C3F3F;
  outline-offset: -15px;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}

.BG_6_red .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%2300556A"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_6_red .f_title,
.BG_6_red .b_title {
  color: #00556A;
}

.BG_6_red .b_round,
.BG_6_red .s_round {
  background: #00556A;
}

.BG_6_red .thumb .slick-current {
  outline: 2px solid #00556A;
  outline-offset: -2px;
}

.BG_6_red .note {
  color: #00556A;
}

.BG_6_blue .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23AC442F"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_6_blue .f_title,
.BG_6_blue .b_title {
  color: #AC442F;
}

.BG_6_blue .b_round,
.BG_6_blue .s_round {
  background: #AC442F;
}

.BG_6_blue .note {
  color: #AC442F;
}

/* ▲▲▲▲Part6▲▲▲▲ */

/* ▼▼▼▼Part7▼▼▼▼ */
.part7 .mv {
  background-color: #49eef2;
  background-image: url(../images/archive/part_7/part07_mv.png);
}

.part7 .theme_wrap {
  background-color: #787878;
  padding: 20px 0;
  /* background: url(../images/archive/part_7/part07_bg.png) center center / cover no-repeat; */

}

.part7 .theme {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 209px;
  background-image: url(../images/archive/part_7/part07_explanation_pc.png);
  margin: 0 20px;
}

@media screen and (max-width: 768px) {
  .part7 .theme{
    /* width: 470px; */
    margin: auto;
    height: 140px;
  }
    .part7 .theme_wrap {
      padding: 10px 0
    }
}

@media screen and (max-width: 555px){
    .part7 .theme{
      height: 116px;
    }
}

@media screen and (max-width: 415px){
  .part7 .theme {
    background-image: url(../images/archive/part_7/part07_explanation_sp.png);
  }
  .part7 .theme{
    margin: 0 auto;
    width: auto;
  }
}

.BG_7 {
  /* background: linear-gradient(#E3E8EA, #8BD6FB); */
  background: url(../images/archive/part_7/part07_bg.png) center center / cover no-repeat;
  /* background: url(../images/archive/part_2/part02_bg.png); */
}

.BG_7 .front,
.BG_7 .back {
  outline: solid 2px #4D7186;
  /* outline-offset: -15px; */
  /* background: url(../images/archive/part_7/part07_card_bg.png) center center / cover no-repeat; */
  background-image: url(../images/archive/part_7/part07_card_bg.png);
  background-color: #fff;
  background-repeat: repeat;
  background-size: 70px;
  border-radius: 0;
}



.BG_7 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%230D2C40"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_7 .f_title,
.BG_7 .b_title {
  color: #0D2C40;
  text-shadow: 1px 1px 0px #f3f2f7, -1px -1px 0px #f3f2f7, -1px 1px 0px #f3f2f7, 1px -1px 0px #f3f2f7, 1px 0px 0px #f3f2f7, -1px 0px 0px #f3f2f7, 0px 1px 0px #f3f2f7, 0px -1px 0px #f3f2f7;
  z-index: 2;
}


.BG_7 .b_round,
.BG_7 .s_round {
  background: #0D2C40;
}


/* ▲▲▲▲Part7▲▲▲▲ */

/* ▼▼▼▼Part8▼▼▼▼ */
.part8 .mv {
  background-color: #B99759;
  background-image: url(../images/archive/part_8/part08_mv.png);
}

.BG_8 {
    background: url(../images/archive/part_8/part08_bg.png);
    background-size: 70px;
    outline: solid 2px #B99759;
   outline-offset: -20px;
   border: solid 10px #B99759;
  box-shadow: 0px 0px 0px 1px #382D29;
}


.BG_8 .f_title,
.BG_8 .b_title {
  color: #382D29;
  font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  -ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
/* font-size: 2.4em; */
padding: 30px 0 0 30px;
}

.BG_8 .front,
.BG_8 .back {
  background: #E2D9BA;
   outline: solid 2px #382D29;
  outline-offset: -15px;
}

.BG_8 .b_round,
.BG_8 .s_round {
  background: #241F19;
  width: 200px;
}

.BG_8 .b_round p,
.BG_8 .s_round p{
font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

}


.BG_8 .f_img{
  filter: drop-shadow(0px 0px 2px #E2D9BA);
}

.BG_8 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23241F19"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_8 .thumb .slick-current {
  outline: 2px solid #8B6246;
  outline-offset: -2px;
}

.BG_8 .note {
  color: #382D29;
}

/* ▲▲▲▲Part8▲▲▲▲ */




/* ▼▼▼▼Part9▼▼▼▼ */
.part9 .mv {
  background-color: #fff;
  background-image: url(../images/archive/part_9/part09_mv.png);
}

.part9 .theme_wrap {
  /* background-color: #787878; */
  padding: 20px 0;
  /* background: url(../images/archive/part_9/part09_bg.png) center center / cover no-repeat; */

}

.part9 .theme {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 209px;
  background-image: url(../images/archive/part_9/part09_explanation_pc.png);
  margin: 0 20px;
}

@media screen and (max-width: 768px) {
  .part9 .theme{
    /* width: 470px; */
    margin: auto;
    height: 140px;
  }
    .part9 .theme_wrap {
      padding: 10px 0
    }
}

@media screen and (max-width: 555px){
    .part9 .theme{
      height: 116px;
    }
}

@media screen and (max-width: 415px){
  .part9 .theme {
    background-image: url(../images/archive/part_9/part09_explanation_sp.png);
  }
  .part9 .theme{
    margin: 0 auto;
    width: auto;
  }
}

.BG_9 {
  /* background: linear-gradient(#E3E8EA, #8BD6FB); */
  background: url(../images/archive/part_9/part09_bg.png) center center / cover no-repeat;
  /* background: url(../images/archive/part_2/part02_bg.png); */
}

.BG_9 .front,
.BG_9 .back {
  /* outline: solid 2px #7A7C7E; */
  /* outline-offset: -15px; */
  background: url(../images/archive/part_9/part09_card_bg.png) center center / cover no-repeat;
  /* background-image: url(../images/archive/part_9/part09_card_bg.png); */
  background-color: #fff;
  /* background-repeat: repeat; */
  /* background-size: 70px; */
  border-radius: 0;
  box-shadow: 0px 2px 8px 0px rgb(203 180 148 / 100%);
}



.BG_9 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%230D2C40"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_9 .f_title,
.BG_9 .b_title {
  color: #FFFFFF;
  
  z-index: 2;
  font-family: 'Noto Sans CJK JP', sans-serif;
}


.BG_9 .b_round,
.BG_9 .s_round {
  background: #7A7C7E;
}

.BG_9 .note {
  color: #7A7C7E;
}

/* ▲▲▲▲Part9▲▲▲▲ */


/* ▼▼▼▼part10▼▼▼▼ */
.part10 .mv {
  background-color: #0D0921;
  background-image: url(../images/archive/part_10/part10_mv.png);
}

.part10 .theme_wrap {
  /* background-color: #787878; */
  padding: 20px 0;
  /* background: url(../images/archive/part_10/part10_bg.png) center center / cover no-repeat; */

}

.part10 .theme {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 209px;
  background-image: url(../images/archive/part_10/part10_explanation_pc.png);
  margin: 0 20px;
}

@media screen and (max-width: 768px) {
  .part10 .theme{
    /* width: 470px; */
    margin: auto;
    height: 140px;
  }
    .part10 .theme_wrap {
      padding: 10px 0
    }
}

@media screen and (max-width: 555px){
    .part10 .theme{
      height: 116px;
    }
}

@media screen and (max-width: 415px){
  .part10 .theme{
    margin: 0 auto;
    width: auto;
  }
}

.BG_10 {
  /* background-color:  #0D0921; */
  /* background: url(../images/archive/part_10/part10_ornament.png) center center / cover no-repeat; */
 /* background: url(../images/archive/part_10/part10_ornament.png); */
     background: #0D0921 url(../images/archive/part_10/part10_ornament.png) 10% 5%;
       background-repeat: no-repeat;
  background-size: 150px;
  /* background-position: 5% 5%; */
}

.BG_10:nth-child(odd){
       background: #0D0921 url(../images/archive/part_10/part10_ornament.png) 95% 10%;
       background-repeat: no-repeat;
  background-size: 150px;
}

.BG_10 .front,
.BG_10 .back {
  /* outline: solid 2px #7A7C7E; */
  /* outline-offset: -15px; */
  /* background-image: url(../images/archive/part_10/part10_card_bg.png); */
  background-color: #CB3885;

  border-radius: 0;
  /* box-shadow: 0px 2px 8px 0px rgb(203 180 148 / 100%); */
}



.BG_10 .icon-allow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 15.8"><path fill="%23ffffff"  d="M12.2,25.4a44.43,44.43,0,0,0-5.5-4.2c-1.2-.8-2.4-1.5-3.6-2.2A22,22,0,0,0,0,17.5c1.1-.5,2.1-1,3.1-1.5a34.79,34.79,0,0,0,3.6-2.2,38,38,0,0,0,5.5-4.2c-.2,1.2-.4,2.4-.5,3.6a16.2,16.2,0,0,0-.1,2.2,83.49,83.49,0,0,0,9.1.4,85.4,85.4,0,0,0,10.1-.5c1-.1,2-.3,3-.5a3,3,0,0,0,1-.4L33,17.5l2,3.4V21c0-.2-.4-.4-1.1-.7a15.67,15.67,0,0,0-3-.5,84.35,84.35,0,0,0-10.1-.5,81.16,81.16,0,0,0-9.1.4c0,.8.1,1.5.1,2.2.1,1.1.2,2.3.4,3.5Z" transform="translate(0 -9.6)"/></svg>');
  background-repeat: no-repeat;
}

.BG_10 .f_title,
.BG_10 .b_title {
  color: #FFFFFF;

  z-index: 2;
  font-family: 'Noto Sans CJK JP', sans-serif;
}


.BG_10 .b_round,
.BG_10 .s_round {
  background: #0D0921;
}

.BG_10 .note {
  color: #0D0921;
}

/* ▲▲▲▲part10▲▲▲▲ */


/* ▼▼▼▼Part11▼▼▼▼ */

.BG_11_rk { 
  --main-color: #833E3E;
  --bg-image: url(../images/archive/part_11/part11_bg_rk.png);
}
.BG_11_ki { 
  --main-color: #2E4155;
  --bg-image: url(../images/archive/part_11/part11_bg_ki.png);
}
.BG_11_ku { 
  --main-color: #2C402B;
  --bg-image: url(../images/archive/part_11/part11_bg_ku.png);
}



.part11 .mv {
  background-image: url(../images/archive/part_11/part11_mv.png);
}

.part11 .mv::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 背景ぼかし用 */
  background-image: url(../images/archive/part_11/part11_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  filter: blur(2px) brightness(105%);
  content: '';
  z-index: -1;
}


.part11 .theme {
  display: grid;
  place-items: center;
  /* position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 480px;
  background-image: url(../images/archive/part_11/part11_explanation.png); */
  margin-bottom: 50px;
}

.part11 .theme .finish_drawing{
  max-height: 480px;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
    .part11 .theme .finish_drawing {
      max-width: 100vw;
      min-width: auto;
      max-height: auto;
      object-fit: contain;
      margin-bottom: 10px;
      height: auto;
    }
}




.part11 .container_wrap {
  background: url(../images/archive/part_11/part11_bg.png);
}

.part11 .front,
.part11 .back {
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
}




.BG_11_rk, .BG_11_ki, .BG_11_ku {
  .front, .back {
    background: var(--bg-image) center center / cover no-repeat;
  }

  .front h2, .back h2 {
    color: var(--main-color);
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  }

  .b_round, .s_round {
    background: var(--main-color);
  }

  .thumb .slick-current {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
  }

  .note {
    color: var(--main-color);
    text-shadow:
      0 0 1em #fff,
      0 0 0.2em #fff;
  }

}

.part11 .icon-allow {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: var(--main-color);

  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'><path d='M12.2,25.4c-1.7-1.5-3.6-3-5.5-4.2c-1.2-0.8-2.4-1.5-3.6-2.2c-1-0.6-2.1-1.1-3.1-1.5c1.1-0.5,2.1-1,3.1-1.5c1.2-0.6,2.4-1.4,3.6-2.2c2-1.2,3.8-2.7,5.5-4.2c-0.2,1.2-0.4,2.4-0.5,3.6c-0.1,0.7-0.1,1.5-0.1,2.2c2.6,0.3,5.8,0.4,9.1,0.4c3.4,0,6.7-0.1,10.1-0.5c1-0.1,2-0.3,3-0.5c0.4-0.1,0.7-0.2,1-0.4L33,17.5l2,3.4v0.1c0-0.2-0.4-0.4-1.1-0.7c-1-0.3-2-0.4-3-0.5c-3.3-0.4-6.7-0.5-10.1-0.5c-3.4,0-6.6,0.1-9.1,0.4c0,0.8,0.1,1.5,0.1,2.2C11.9,23,12,24.2,12.2,25.4z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'><path d='M12.2,25.4c-1.7-1.5-3.6-3-5.5-4.2c-1.2-0.8-2.4-1.5-3.6-2.2c-1-0.6-2.1-1.1-3.1-1.5c1.1-0.5,2.1-1,3.1-1.5c1.2-0.6,2.4-1.4,3.6-2.2c2-1.2,3.8-2.7,5.5-4.2c-0.2,1.2-0.4,2.4-0.5,3.6c-0.1,0.7-0.1,1.5-0.1,2.2c2.6,0.3,5.8,0.4,9.1,0.4c3.4,0,6.7-0.1,10.1-0.5c1-0.1,2-0.3,3-0.5c0.4-0.1,0.7-0.2,1-0.4L33,17.5l2,3.4v0.1c0-0.2-0.4-0.4-1.1-0.7c-1-0.3-2-0.4-3-0.5c-3.3-0.4-6.7-0.5-10.1-0.5c-3.4,0-6.6,0.1-9.1,0.4c0,0.8,0.1,1.5,0.1,2.2C11.9,23,12,24.2,12.2,25.4z'/></svg>") no-repeat center / contain;
}


@media screen and (max-width: 768px){
  .part11 .icon-allow{
    display: none;
  }

.part11 .theme {
  /* height: 250px; */
  margin-bottom: 10px;
}

}



/* ▲▲▲▲part11▲▲▲▲ */

/*-----------------------------------------------------------------
		汎用スタイル
-----------------------------------------------------------------*/
/* ヘッダー */
.archive header {
  background-color: #A38449;
  padding: 20px;
}

.archive .logo {
  width: 40px;
}

.archive .menu {
  font-size: 1.8em;
}

@media screen and (max-width: 768px) {
  .archive header {
    padding: 10px 20px;
    /* height: 40px; */
  }

  #nav-toggle {
    height: 30px;
  }

  #nav-toggle span {
    background-color: #fff;
  }
}

.archive .nav ul li a:visited {
  color: #fff;
}

.archive .nav ul li a:link {
  color: #fff;
}

.nav-pc .nav a {
  text-shadow: none;
}

/* メイン  */
.mv {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 450px;
}

@media screen and (max-width: 768px) {
  .mv {
    height: 300px;
  }
}

@media screen and (max-width: 555px) {
  .mv {
    height: 250px;
  }
}

.archive h2 {
  font-size: 3em;
  font-family: 'Noto Sans CJK JP', sans-serif;
  line-height: 1.3em;
  margin-top: 0;
  text-align: left;
}


.f_title,
.b_title {
  padding: 20px 0 0 20px;
  position: relative;
}

.container_wrap {
  padding: 50px 0;
}

@media screen and (max-width: 555px) {
  .archive .front h2 {
    font-size: 2.5em;
  }

.container_wrap {
  padding:20px 0;
}
}
/*-----------------------------------------------------------------
		フリップカード
-----------------------------------------------------------------*/
.container {
  margin: 0 auto;
}

.container,
.flip-box,
.front,
.back {
  width: 720px;
  height: 540px;
}

@media screen and (max-width: 768px) {

  .container,
  .flip-box,
  .front,
  .back {
    width: 80vw;
    /* height: 70vh; */
  }
}

.container,
.flip_box {
  position: relative;
}

.front,
.back {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.container {
  -moz-transform: perspective(1200px);
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.flip_box {
  transition: all 0.5s ease-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.icon-allow {
  width: 35px;
  height: 16px;
}







@media screen and (max-width: 555px) {
  .icon-allow {
    transform: rotate(-90deg);
    margin: 20px;
  }
}

.front,
.back {
  border-radius: 5px;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
  /* outline: solid 2px #512B16; */
  /* outline-offset: -20px; */
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* .archive p {
  margin-top: 0;
  font-size: 1.2em;
} */
.note {
  text-align: center;
  font-size: 1em;
}

.f_img_warp {
  margin: 20px;
}

.f_img,
.b_img {
  position: absolute;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  /* max-height: 350px;
  max-width: 500px; */
  filter: blur(0);
  -webkit-filter: blur(0);
  /* width: 250px; */
}

.f_img {
  top: 45%;
}

.b_img {
  top: 50%;
}

.f_img,
.b_img {
  /* width: 250px; */
  min-width: 250px;
  max-width: 380px;
  min-height: 200px;
  max-height: 410px;
  object-fit: contain;
}

.finish_drawing {
  /* width: 255px; */
  min-width: 200px;
  max-width: 255px;
  min-height: 180px;
  max-height: 340px;
  object-fit: contain;
}

@media screen and (max-width: 768px) {

  .f_img,
  .b_img {
    max-width: 90%;
  }

  .finish_drawing {
    min-width: 250px;
    max-width: 440px;
  }
}

@media screen and (max-width: 555px) {
  .f_img {
    /* width: 80%; */
    max-width: 80%;
    max-height: 50vh;
  }

  .finish_drawing {
    max-width: 100%;
    margin: 0 auto;
    height: 300px;
    object-fit: cover;
  }
}

@media screen and (max-width: 375px) {
  .finish_drawing {
    max-width: 200px;
    min-width: 180px;
  }
}

.b_text {
  font-size: 1.4em;
  line-height: 28px;
  padding-top: 10px;
  opacity: 0.85;
}

.flipped {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flipped .f_img {
  display: none;
}

.b_round,
.s_round {
  margin: 20px auto 0;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 150px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.05em;
  /* padding: 0 20px; */
  transition: initial;
  overflow: hidden;
  transition: all 0.2s linear;
}

.s_round {
  cursor: pointer;
}

.s_round p {
  color: #fff;
}

.s_arrow {
  width: 53px;
  height: 7px;
  background-image: url(../images/archive/answer.svg);
  margin: 0 0 4px 15px;
  transition: all 0.35s linear;
}

.b_arrow {
  width: 53px;
  height: 7px;
  background-image: url(../images/archive/back.svg);
  margin: 0 15px 4px 0;
  transition: all 0.35s linear;
}

.s_arrow_rotate {
  transform: scale(-1, 1) translate(150px, 0);
}

.b_arrow_rotate {
  transform: scale(-1, 1) translate(40px, 0);
}

.s_txt,
.b_txt {
  transition: all 0.35s linear;
  font-size: 1.2em;
  margin-top: 0;
}

.s_txt_rotate {
  transform: translate(70px, 0);
}

.b_txt_rotate {
  transform: translate(70px, 0);
}

.back .answer_img {
  display: flex;
  margin: 10px 20px;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px; /* 矢印の幅分 */
}
/* 画像の親ラッパー */
.back .answer_img .design_wrap {
  display: flex;
  align-items: center;      /* 垂直方向中央揃え */
  justify-content: center;  /* 水平方向中央揃え */
  height: auto;             /* 高さは横画像に合わせる */
  max-height: 400px;        /* 最大高さ */
  width: 100%;
  overflow: hidden;
}

/* 画像自体 */
.back .answer_img .design_wrap img {
  max-height: 100%;   /* 親の高さを超えない */
  max-width: 100%;    /* 幅もはみ出さない */
  object-fit: contain; /* 縦横比を絶対維持 */
  display: block;
}


.back .answer_img .design_wrap .note {
  margin-top: 8px;          /* 画像とnoteの間に余白 */
  line-height: 1.4;
  flex-shrink: 0;           /* noteが潰れないよう固定 */
}




.back {
  position: relative;
}

.nomal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

@media screen and (max-width: 768px) {
  .nomal {
    top: 45%;
  }
  .back .answer_img .sp{
    display: none;
  }
}

@media screen and (max-width: 555px) {
  .answer_img {
    margin: 0 20px;
  }

  .nomal {
    margin-top: 20px;
  }
}








/*-----------------------------------------------------------------
		モーダル
-----------------------------------------------------------------*/
/* modal */
.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: 0.25s ease-out;
  z-index: 2;
}

.modal-wrapper.show {
  opacity: 1;
  pointer-events: all;
}

.modal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* object-fit: cover; */
  opacity: 0;
  transition: 0.5s ease-out;
  min-width: 45vh;
  max-width: 90%;
  min-height: 65vh;
  max-height: 80%;
  object-fit: contain;
}

.modal-image.show {
  opacity: 1;
}

/*-----------------------------------------------------------------
		カルーセル
-----------------------------------------------------------------*/


.sliderArea {
  max-width: 300px;
}

.slick-slide img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
}

.slick-slider {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .slider_thumb {
    height: 300px;
  }

  .slider_thumb img {
    object-fit: cover;
    width: 100%;
    height: 300px;
    /* width: 80%; */
    /* height: 50vw; */
    /* object-fit: cover; */
  }

  .slick-slider {
    width: 90%;
  }
}

@media screen and (max-width: 555px) {
  .slick-slider {
    width: 100%;
    max-width: 200px;
    min-width: 180px;
   max-height: 200px;
  }
  
  .slider_thumb img {
   max-height: 200px;
  }
}

/* .slider img{
  width: 500px;
   height: 50vw;
   object-fit: cover;
} */
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.thumb {
  margin: 10px auto 0;
}

/* .thumb .slick-slide {
  cursor: pointer;
  margin: 0 5px;
} */
.thumb .slick-slide {
    opacity: 1 !important;
    cursor: pointer;
    width: 40px !important;
    height: 40px;
    margin: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
}


.thumb .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb .slick-slide:hover {
  opacity: .7;
}


.thumb .slick-track {
  transform: unset !important;
}


.thumb_item {
  width: 40px;                 /* 枠の幅 */
  height: 40px;                /* 枠の高さ */
  background-color: #f0f0f0;   /* 背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;            /* はみ出し部分を隠す */
  margin: 0 5px;               /* サムネイル間の余白 */
}
.thumb_item img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 縦横比を維持して枠内に収める */
  display: block;
}

.sp {
  display: block;
}

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

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