@charset "UTF-8";
/* ===============================================
   Reset
=============================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, b, cite, code, del, dfn,
em, img, ins, kbd, q, samp, strong, sub, sup, tt, var,
ul, ol, li, dl, dt, dd, form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, small, section, #wrapper,
*:after, *:before {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  outline-offset: 0;
}

* {
  min-height: 0%;
}

header, footer, nav, small, section {
  display: block;
}

ul {
  list-style: none;
}

img {
  border: 0;
  height: auto;
  vertical-align: bottom;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*===============================================
all
===============================================*/
:root {
  --ff-go: "Noto Sans JP", sans-serif;
  --ff-min: "Zen Old Mincho", serif;
  --ff-en: "EB Garamond", serif;
  --c-main: #005cac;
  --c-black: #333;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --fw-eb: 800;
  --fw-bl: 900;
  --width-content: clamp(0px, 93.75vw, 1200px);
  --content-padding: clamp(0px, 3.125vw, 40px);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

img {
  display: inline-block;
  max-width: 100%;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

br.pc {
  font-size: 0;
}

.pc_inline {
  display: inline-block;
}

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

  .sp {
    display: block;
  }

  .pc_inline {
    display: none;
  }
}
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
}

#contents {
  position: relative;
  z-index: 2;
}

#mainContainer #mainContents #contents section {
  margin-top: 0;
}

.contents a {
  color: var(--c-black);
  position: relative;
  transition: color 0.3s ease;
}

.contents a:hover {
  text-decoration: none;
}

.hover a,
a.hover {
  transition: color 0.3s ease, transform 0.3s ease;
}

.hover a:hover,
a.hover:hover {
  transform: scale(1.08);
}

.contents button {
  border-radius: 0;
  border: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
}

html.is-modal-open {
  scroll-behavior: auto;
}

/*===============================================
content
===============================================*/
/* ----------------------------------------
 * Fluid Responsive
 * ----------------------------------------
 * ■ PC（1280px基準・clamp）
 * vw計算式： (px / 1280) * 100vw
 * 例）16px → 1.25vw
 * clamp(min, vw, max)で制御
 *
 * ■ SP（750px基準・vw）
 * vw計算式： (px / 750) * 100vw
 * 例）16px → 2.133vw
 *
 * ※ デザインカンプ基準
 * PC：1280px / SP：750px
 * ---------------------------------------- */
.container {
  max-width: calc(var(--width-content, 0px) + var(--content-padding, 0px) * 2);
  padding-left: var(--content-padding, 0);
  padding-right: var(--content-padding, 0);
  margin-left: auto;
  margin-right: auto;
}

.font_en {
  font-family: var(--ff-en);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

@media (max-width: 768px) {
  .container {
    width: 90%;
    max-width: none;
    padding: 0;
  }
}
/*---------------------------------------------------
bg
---------------------------------------------------*/
.sec_bg_01 {
  width: 100%;
  background: url("../img/bg_sec_01_bottom.png") repeat-x bottom -1px left/clamp(0px, 109.38vw, 1400px) auto, url("../img/bg_sec_01.jpg") no-repeat bottom center/cover;
  padding: clamp(0px, 10.16vw, 130px) 0 clamp(0px, 14.84vw, 190px);
}

.sec_bg_02 {
  width: 100%;
  background: url("../img/bg_sec_02_top.png") repeat-x top -1px left/clamp(0px, 109.38vw, 1400px) auto, url("../img/bg_sec_bottom.png") repeat-x bottom -1px left/clamp(0px, 109.38vw, 1400px) auto, url("../img/bg_sec_02.jpg") no-repeat bottom center/cover;
  padding: 0 0 clamp(0px, 16.41vw, 210px);
}

.sec_bg_03 {
  width: 100%;
  background: url("../img/bg_sec_top.png") repeat-x top -1px left/clamp(0px, 109.38vw, 1400px) auto, url("../img/bg_sec_bottom.png") repeat-x bottom -1px left/clamp(0px, 109.38vw, 1400px) auto, url("../img/bg_sec_03.jpg") no-repeat bottom center/cover;
  padding: 0 0 clamp(0px, 16.41vw, 210px);
}

@media (max-width: 768px) {
  .sec_bg_01 {
    background: url("../img/bg_sec_bottom_sp.png") no-repeat bottom -1px left/100% auto, url("../img/bg_sec_01_sp.jpg") no-repeat bottom center/cover;
    padding: 20vw 0 33.33vw;
  }

  .sec_bg_02 {
    background: none;
    padding: 0 0 26.67vw;
  }

  .sec_bg_02_sp {
    background: url("../img/bg_sec_top_sp.png") no-repeat top 28vw left/100% auto, url("../img/bg_sec_bottom_sp.png") no-repeat bottom -1px left/100% auto, url("../img/bg_sec_02_sp.jpg") no-repeat top 28vw center/cover;
  }

  .sec_bg_03 {
    background: none;
    padding: 0 0 26.67vw;
  }

  .sec_bg_03_sp {
    background: url("../img/bg_sec_top_sp.png") no-repeat top 26.67vw left/100% auto, url("../img/bg_sec_bottom_sp.png") no-repeat bottom -1px left/100% auto, url("../img/bg_sec_03_sp.jpg") no-repeat top 26.67vw center/cover;
  }
}
/*---------------------------------------------------
button
---------------------------------------------------*/
a.button {
  font-size: clamp(0px, 1.88vw, 24px);
  font-weight: var(--fw-sb);
  color: #fff;
  line-height: 1.4;
  text-align: center;
  display: inline-block;
  width: clamp(0px, 25.78vw, 330px);
  transition: all 0.2s;
}

a.button:hover {
  transform: translate(clamp(0px, 0.39vw, 5px), clamp(0px, 0.39vw, 5px));
}

a.button > span {
  width: 100%;
  border-radius: 100vh;
  background: linear-gradient(to right, #005cac, #1b1464);
  border: 1px solid #2e3192;
  box-shadow: 2px 2px 4px 0 rgba(0, 92, 172, 0.3);
  padding: 0.45em 1.5em 0.55em;
  display: inline-block;
  z-index: 2;
  position: relative;
}

a.button.button_blue > span {
  background: linear-gradient(to right, #005cac, #1b1464);
}

a.button.button_red > span {
  background: linear-gradient(to right, #ff0000, #c1272d);
  border-color: #c1272d;
  box-shadow: none;
}

a.button > span::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  position: absolute;
  top: 50%;
  right: 0.83em;
  transform: rotate(45deg) translateY(-50%);
  margin-top: -0.08em;
}

a.button::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #005cac, #1b1464);
  opacity: 0.3;
  border-radius: 100vh;
  position: absolute;
  top: clamp(0px, 0.39vw, 5px);
  left: clamp(0px, 0.39vw, 5px);
  transition: all 0.2s;
}

a.button:hover::after {
  transform: translate(clamp(-5px, -0.39vw, 0px), clamp(-5px, -0.39vw, 0px));
}

a.button.button_blue::after {
  background: linear-gradient(to right, #005cac, #1b1464);
}

a.button.button_red::after {
  background: linear-gradient(to right, #ff0000, #c1272d);
}

@media (max-width: 768px) {
  a.button {
    font-size: 5.07vw;
    width: 72vw;
  }

  a.button:hover {
    transform: translate(1.07vw, 1.07vw);
  }

  a.button::after {
    top: 1.07vw;
    left: 1.07vw;
  }

  a.button:hover::after {
    transform: translate(-1.07vw, -1.07vw);
  }
}
/*---------------------------------------------------
animation
---------------------------------------------------*/
.js_fadeup {
  opacity: 0;
  transform: translateY(5vh);
  transition: opacity 1.5s, transform 1.5s;
}

.js_fadeup.is_visible {
  opacity: 1;
  transform: translateY(0);
}

.js_fadein {
  opacity: 0;
  transition: opacity 1.5s;
}

.js_fadein.is_visible {
  opacity: 1;
}

.delay_0_3 {
  transition-delay: 0.3s;
}

.delay_0_5 {
  transition-delay: 0.5s;
}

@media (max-width: 767px) {
  .delay_0_3,
.delay_0_5 {
    transition-delay: 0;
  }
}
/*---------------------------------------------------
youtube動画モーダル
---------------------------------------------------*/
#modal_movie {
  z-index: 999;
}

.m_modal {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.m_modal .modal_inner {
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m_modal .modal_inner .modal_wrapper {
  width: 68.57143vw;
  max-width: 960px;
  min-width: 750px;
  position: relative;
}

.m_modal.is_short .modal_inner .modal_wrapper {
  width: 24vw;
  max-width: 340px;
  min-width: 260px;
}

.m_modal .modal_inner .modal_wrapper .btn_close {
  width: 60px;
  height: 60px;
  display: block;
  background: transparent;
  border: 0;
  position: absolute;
  top: -60px;
  right: 0;
  z-index: 2;
  cursor: pointer;
}

.m_modal .modal_inner .modal_wrapper .btn_close::before, .m_modal .modal_inner .modal_wrapper .btn_close::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 30px;
  background: #c80a1e;
  position: absolute;
  top: 15px;
  right: 30px;
  z-index: 1;
}

.m_modal .modal_inner .modal_wrapper .btn_close::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.m_modal .modal_inner .modal_wrapper .btn_close::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.m_modal .modal_inner .modal {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  padding-top: 0;
  background: #fff;
}

.m_modal.is_short .modal_inner .modal {
  aspect-ratio: 9/16;
}

.m_modal .modal_inner .modal iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  #modal_movie.m_modal .modal_inner {
    padding: 20px 0;
  }

  .m_modal .modal_inner .modal_wrapper {
    min-width: 90%;
  }

  #modal_movie.m_modal .modal_inner .modal_wrapper {
    margin-top: 60px;
  }

  .m_modal.is_short .modal_inner .modal_wrapper {
    width: 45vh;
    min-width: 0;
    max-width: 90%;
  }
}
/*---------------------------------------------------
mv
---------------------------------------------------*/
.mv_img {
  width: 100%;
  aspect-ratio: 2500/1340;
}

.mv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv_title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0px, 1.17vw, 15px);
  padding: clamp(0px, 2.34vw, 30px) 0 clamp(0px, 1.56vw, 20px);
}

.mv_title_box {
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-sb);
  letter-spacing: 0.05em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(to right, #005cac, #2e3192);
  padding: 0.3em 0.7em 0.4em;
  margin-bottom: clamp(0px, 0.23vw, 3px);
}

.mv_title_img {
  width: clamp(0px, 34.92vw, 447px);
  display: inline-block;
}

@media (max-width: 768px) {
  .mv_img {
    width: 100%;
    aspect-ratio: 750/907;
  }

  .mv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mv_title {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6vw 0 2.67vw;
  }

  .mv_title_box {
    font-size: 3.73vw;
    padding: 0.3em 0.7em 0.4em;
    margin-bottom: 2.67vw;
  }

  .mv_title_img {
    width: 72vw;
  }
}
/*---------------------------------------------------
menu
---------------------------------------------------*/
#page_menu {
  width: 100%;
  height: clamp(0px, 6.25vw, 80px);
}

.page_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(0px, 0.78vw, 10px) 0;
}

.page_menu_list > li:not(:last-child) a {
  border-right: 1px solid rgba(51, 51, 51, 0.5);
}

.page_menu_list > li a {
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-sb);
  color: var(--c-black);
  letter-spacing: 0.05em;
  line-height: 1.3;
  padding: clamp(0px, 1.56vw, 20px) clamp(0px, 2.34vw, 30px);
  display: block;
  position: relative;
}

.page_menu_list > li a:hover {
  color: var(--c-main);
}

.page_menu_list > li a::before {
  content: "";
  width: clamp(0px, 0.94vw, 12px);
  height: clamp(0px, 0.94vw, 12px);
  border: 0;
  border-right: solid 1px var(--c-black);
  border-bottom: solid 1px var(--c-black);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
}

.page_menu_list > li a span {
  display: inline-block;
}

@media (max-width: 768px) {
  #page_menu {
    width: 100%;
    height: auto;
  }

  #page_menu .container {
    width: 100%;
  }

  .page_menu_list {
    flex-wrap: wrap;
    padding: 2.67vw 0;
    row-gap: 5.33vw;
  }

  .page_menu_list > li {
    height: 10.67vw;
    width: 33.3333333333%;
  }

  .page_menu_list > li a {
    height: 100%;
    font-size: 3.47vw;
    text-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .page_menu_list > li:nth-child(3n) a {
    border-right: none;
  }

  .page_menu_list > li a::before {
    width: 2vw;
    height: 2vw;
    bottom: -0.4em;
  }

  .page_menu_list > li a .sp_mt {
    margin-top: -0.6em;
  }
}
/*---------------------------------------------------
sns
---------------------------------------------------*/
#sns {
  padding-bottom: clamp(0px, 7.81vw, 100px);
}

.sns_box {
  width: clamp(0px, 46.88vw, 600px);
  background-color: rgba(255, 255, 255, 0.8);
  padding: clamp(0px, 3.75vw, 48px) clamp(0px, 3.91vw, 50px) clamp(0px, 4.3vw, 55px);
  margin: 0 auto;
}

.sns_text {
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-sb);
  letter-spacing: 0.05em;
  line-height: 1.9;
  text-align: center;
  margin-bottom: clamp(0px, 2.34vw, 30px);
}

.sns_list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, 4.69vw, 60px);
}

.sns_list > li a {
  display: block;
}

@media (max-width: 768px) {
  #sns {
    padding-bottom: 20vw;
  }

  .sns_box {
    width: 100%;
    padding: 6.67vw 6.67vw 8vw;
  }

  .sns_text {
    font-size: 3.73vw;
    line-height: 1.57;
    margin-bottom: 4vw;
  }

  .sns_list {
    gap: 10.67vw;
  }

  .sns_list > li a img {
    display: inline-block;
    width: 12vw;
  }
}
/*---------------------------------------------------
limited_movie
---------------------------------------------------*/
.movie_list {
  display: flex;
  justify-content: center;
  gap: clamp(0px, 4.69vw, 60px);
}

.movie_list > li {
  width: calc((100% - clamp(0px, 9.37vw, 120px)) / 3);
}

.movie_list li .movie_wrap {
    width: 100%;
    aspect-ratio: 360 / 640;
    overflow: hidden;
}

.movie_list .movie_title {
  width: 100%;
}

.movie_wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    line-height: 0;
    vertical-align: bottom;
    position: relative;
}

.movie_wrap iframe {
    width: 100%;
    height: 100%;
}

.button_play {
  width: clamp(0px, 4.69vw, 60px);
  aspect-ratio: 1 / 1;
  background-color: #005cac;
  border-radius: 50%;
  position: absolute;
  top: clamp(0px, 3.13vw, 40px);
  left: clamp(0px, 3.13vw, 40px);
  cursor: pointer;
  pointer-events: none;
  display: block;
  z-index: 3;
}

.button_play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 41.6%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: clamp(0px, 1.56vw, 20px) solid #fff;
  border-top: clamp(0px, 1.09vw, 14px) solid transparent;
  border-bottom: clamp(0px, 1.09vw, 14px) solid transparent;
  z-index: 3;
}

.movie_list .button_play {
  top: clamp(0px, 1.56vw, 20px);
  left: clamp(0px, 1.56vw, 20px);
}

.movie_thumb_wrap {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.movie_thumb_wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.movie_thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.3s;
}

.movie_thumb:hover {
  opacity: 0.6;
}

.movie_title {
  font-size: clamp(0px, 1.72vw, 22px);
  font-weight: var(--fw-sb);
  color: var(--c-main);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  border-top: 1px solid var(--c-main);
  border-bottom: 1px solid var(--c-main);
  padding: 0.15em 0.9em 0.2em;
  display: inline-block;
  margin-bottom: clamp(0px, 1.56vw, 20px);
}

.movie_title > span {
  font-size: 1.25em;
}

.movie_title.dark_blue {
  color: #1d217e;
  border-top-color: #1d217e;
  border-bottom-color: #1d217e;
}

.movie_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
    pointer-events: none;
}
.movie_overlay.is-paused {
    pointer-events: auto;
}

@media (max-width: 768px) {
  #limited_movie .sec_title {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .movie_list {
    flex-direction: column;
    gap: 14.67vw;
  }

  .movie_list > li {
    width: 100%;
    text-align: center;
  }

  .button_play {
    width: 10.67vw;
    top: 5.33vw;
    left: 5.33vw;
  }

  .button_play::before {
    border-left: 3.47vw solid #fff;
    border-top: 2.4vw solid transparent;
    border-bottom: 2.4vw solid transparent;
  }

  .movie_list .button_play {
    top: 5.33vw;
    left: 5.33vw;
  }

  .movie_title {
    font-size: 4.27vw;
    line-height: 1.5;
    padding: 0.15em 1.2em 0.2em;
    margin-bottom: 4vw;
  }
}
/*---------------------------------------------------
muhi_tvcm
---------------------------------------------------*/
#muhi_tvcm {
  margin-top: clamp(-65px, -5.08vw, 0px);
  padding-top: clamp(0px, 3.125vw, 40px);
}

.muhi_tvcm_title {
  text-align: center;
}

.muhi_tvcm_title .movie_title {
  margin-bottom: clamp(0px, 1.56vw, 20px);
}

#muhi_tvcm .white_box {
  margin-top: clamp(0px, 4.69vw, 60px);
}

.white_box {
  background-color: rgba(255, 255, 255, 0.8);
  padding: clamp(0px, 7.03vw, 90px);
}

.box_title {
  font-size: clamp(0px, 3.59vw, 46px);
  font-weight: var(--fw-m);
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 1em;
}

.box_text {
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-m);
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 2.73vw, 35px);
}

.box_text p {
  font-size: inherit;
}

@media (max-width: 768px) {
  #muhi_tvcm {
    margin-top: -9.87vw;
    padding-top: 8vw;
  }

  .muhi_tvcm_title {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    text-align: center;
  }

  .muhi_tvcm_title .movie_title {
    margin-bottom: 4vw;
  }

  .muhi_tvcm_title .movie_title.title_01 {
    margin-bottom: 0;
  }

  .muhi_tvcm_thumb {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  #muhi_tvcm .white_box {
    margin-top: 8vw;
  }

  .white_box {
    padding: 13.33vw 5.33vw;
  }

  .box_title {
    font-size: 7.47vw;
    margin-bottom: 1.3em;
  }

  .box_text {
    font-size: 3.73vw;
    line-height: 1.57;
    display: flex;
    flex-direction: column;
    gap: 6vw;
  }
}
/*---------------------------------------------------
product_muhi
---------------------------------------------------*/
#product_muhi {
  padding-bottom: clamp(0px, 14.84vw, 190px);
  margin-top: clamp(-130px, -10.16vw, 0px);
}

.product_muhi_item {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 3.13vw, 40px);
}

.muhi_cont {
  width: clamp(0px, 26.56vw, 340px);
}

.muhi_cont.pb {
  padding-bottom: clamp(0px, 2.34vw, 30px);
}

.muhi_logo {
  width: clamp(0px, 26.56vw, 340px);
  margin-bottom: clamp(0px, 3.52vw, 45px);
}

.muhi_link {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 1.95vw, 25px);
}

.muhi_link > li {
  text-align: center;
}

.muhi_img {
  width: clamp(0px, 22.66vw, 290px);
}

@media (max-width: 768px) {
  #product_muhi {
    padding-bottom: 48vw;
    margin-top: -11.33vw;
  }

  .product_muhi_item {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .muhi_cont {
    width: 100%;
  }

  .muhi_cont.pb {
    padding-bottom: 0;
  }

  .muhi_logo {
    width: 100%;
    margin-bottom: 0;
  }

  .muhi_link {
    gap: 6.67vw;
  }

  .muhi_img {
    width: 100%;
  }
}
/*---------------------------------------------------
muhi_tvcm
---------------------------------------------------*/
.muhiaex_tvcm_title {
  text-align: center;
}

#muhiaex_tvcm .white_box {
  margin-top: clamp(0px, 4.69vw, 60px);
}

@media (max-width: 768px) {
  .muhiaex_tvcm_main_title {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .muhiaex_tvcm_thumb {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  #muhiaex_tvcm .white_box {
    margin-top: 8vw;
  }
}
/*---------------------------------------------------
product_muhiaex
---------------------------------------------------*/
#product_muhiaex {
  padding-bottom: clamp(0px, 18.75vw, 240px);
  margin-top: clamp(-130px, -10.16vw, 0px);
}

.product_muhiaex_title {
  text-align: center;
}

.product_muhiaex_main {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 8.98vw, 115px);
}

.product_muhiaex_item {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 3.13vw, 40px);
}

.product_muhiaex_item.item_01 {
  gap: clamp(0px, 2.73vw, 35px);
}

.muhiaex_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item_01 .muhiaex_cont {
  width: clamp(0px, 50vw, 640px);
  padding-bottom: clamp(0px, 3.13vw, 40px);
}

.item_02 .muhiaex_cont {
  width: clamp(0px, 40.78vw, 522px);
  padding-bottom: clamp(0px, 1.56vw, 20px);
}

.muhiaex_logo {
  margin-bottom: clamp(0px, 3.52vw, 45px);
}

.muhiaex_img {
  width: clamp(0px, 32.19vw, 412px);
}

@media (max-width: 768px) {
  #product_muhiaex {
    padding-bottom: 38.67vw;
    margin-top: -12vw;
  }

  .product_muhiaex_title {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .product_muhiaex_main {
    gap: 22.67vw;
  }

  .product_muhiaex_item {
    flex-direction: column;
    gap: 0;
  }

  .muhiaex_cont, .item_01 .muhiaex_cont, .item_02 .muhiaex_cont {
    width: 100%;
    padding-bottom: 0;
  }

  .muhiaex_logo {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 0;
  }

  .muhiaex_img {
    width: 100%;
  }
}
/*---------------------------------------------------
making_movie
---------------------------------------------------*/
#making_movie {
  padding-bottom: clamp(0px, 14.06vw, 180px);
}

.bg_block_r {
  position: relative;
  padding-bottom: clamp(0px, 8.59vw, 110px);
}

.bg_block_r::before {
  content: "";
  width: 100vw;
  height: clamp(0px, 52.73vw, 675px);
  background: linear-gradient(to right, #005cac, #2e3192);
  position: absolute;
  bottom: 0;
  left: clamp(0px, 17.19vw, 220px);
  z-index: 1;
}

@media (max-width: 768px) {
  #making_movie {
    padding-bottom: 28vw;
  }

  .bg_block_r {
    padding-bottom: 10.67vw;
  }

  .bg_block_r::before {
    height: 57.6vw;
    left: 8vw;
  }

  .making_movie_thumb {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
/*---------------------------------------------------
graphic
---------------------------------------------------*/
#graphic {
  padding-bottom: clamp(0px, 15.63vw, 200px);
  position: relative;
  z-index: 2;
}

.bg_block_l {
  position: relative;
  padding-bottom: clamp(0px, 7.81vw, 100px);
}

.bg_block_l::before {
  content: "";
  width: 100vw;
  height: clamp(0px, 52.73vw, 675px);
  background: linear-gradient(to right, #005cac, #2e3192);
  position: absolute;
  bottom: 0;
  right: clamp(0px, 15.63vw, 200px);
  z-index: 1;
}

.graphic_img {
  position: relative;
}

.graphic_img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.graphic_img img {
  transition: opacity 0.4s;
}

.graphic_img img:hover {
  opacity: 0.7;
}

.graphic_items {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, 1.95vw, 25px);
}

.graphic_item:nth-child(1) {
  width: clamp(0px, 37.11vw, 475px);
}

.graphic_item:nth-child(2) {
  width: clamp(0px, 26.25vw, 336px);
}

.graphic_item:nth-child(3) {
  width: clamp(0px, 26.25vw, 336px);
}

.graphic_item:nth-child(4) {
  width: clamp(0px, 52.5vw, 672px);
}

.graphic_item:nth-child(5) {
  width: clamp(0px, 26.25vw, 336px);
}

.graphic_item:nth-child(6) {
  width: clamp(0px, 26.25vw, 336px);
}

.graphic_item:nth-child(7) {
  width: clamp(0px, 52.5vw, 672px);
}

.graphic_modal {
  z-index: 999;
}

.graphic_modal .m_modal {
  background: rgba(255, 255, 255, 0.95);
}

.graphic_modal .m_modal .modal_inner {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.graphic_modal .m_modal .modal_inner .modal_wrapper {
  width: auto;
  max-width: 90%;
  max-height: 80vh;
  min-width: auto;
  top: auto;
  left: auto;
  transform: none;
  position: relative;
}

.modal_l {
  height: 100%;
  position: relative;
}

.modal_l img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

button.modal_close {
  width: clamp(0px, 8.59vw, 110px);
  min-height: clamp(0px, 2.34vw, 30px);
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-b);
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
  background-color: var(--c-main);
  padding: 0.55em 1.67em 0.44em 0.55em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  margin-top: clamp(0px, 1.56vw, 20px);
  transition: background-color 0.3s ease;
}

button.modal_close:hover {
  background-color: #ff0000;
}

.icon_close {
  width: clamp(0px, 1.25vw, 16px);
  height: clamp(0px, 1.25vw, 16px);
  display: block;
  position: absolute;
  top: 50%;
  right: clamp(0px, 0.78vw, 10px);
  transform: translateY(-50%);
}

.icon_close::before, .icon_close::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 100%;
  background: #fff;
  position: absolute;
  z-index: 1;
}

.icon_close::before {
  transform: rotate(-45deg);
}

.icon_close::after {
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  #graphic {
    padding-bottom: 21.33vw;
  }

  .bg_block_l {
    padding-bottom: 10.67vw;
  }

  .bg_block_l::before {
    height: 234.13vw;
    right: 18vw;
  }

  .graphic_items {
    gap: 3.2vw;
    margin: 0 -0.67vw;
  }

  .graphic_item:nth-child(1) {
    width: 61.87vw;
  }

  .graphic_item:nth-child(2) {
    width: 43.73vw;
  }

  .graphic_item:nth-child(3) {
    width: 43.73vw;
  }

  .graphic_item:nth-child(4) {
    width: 87.47vw;
  }

  .graphic_item:nth-child(5) {
    width: 43.73vw;
  }

  .graphic_item:nth-child(6) {
    width: 43.73vw;
  }

  .graphic_item:nth-child(7) {
    width: 87.47vw;
  }

  .graphic_modal .m_modal .modal_inner {
    overflow-y: auto;
    max-height: 100vh;
  }

  .graphic_modal .m_modal .modal_inner .modal_wrapper {
    max-width: 100%;
    max-height: none;
    flex: 0 0 auto;
    margin-bottom: 30px;
  }

  .modal_l {
    height: auto;
  }

  .modal_l img {
    height: auto;
  }

  button.modal_close {
    width: 26.67vw;
    min-height: 10.67vw;
    font-size: 3.73vw;
    padding: 0.89em 2.14em 0.89em 0.89em;
    margin-top: 6.67vw;
  }

  .icon_close::before, .icon_close::after {
    width: 1px;
  }

  .icon_close {
    width: 2.93vw;
    height: 2.93vw;
    right: 4vw;
  }
}
/*---------------------------------------------------
profile
---------------------------------------------------*/
.profile_box {
  background-image: url("../img/bg_profile.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(0px, 5.47vw, 70px) clamp(0px, 6.64vw, 85px) clamp(0px, 7.03vw, 90px);
}

.profile_box_row {
  display: flex;
  gap: clamp(0px, 5.08vw, 65px);
}

.profile_img {
  width: clamp(0px, 22.66vw, 290px);
}

.profile_main {
  flex: 1;
}

.profile_title {
  font-family: var(--ff-en);
  font-size: clamp(0px, 3.59vw, 46px);
  font-weight: var(--fw-m);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  line-height: 1;
  margin-bottom: 1.3em;
}

.profile_name {
  font-size: clamp(0px, 2.19vw, 28px);
  font-weight: var(--fw-sb);
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-bottom: 1em;
}

.profile_name > span {
  font-size: 0.75em;
}

.profile_text {
  font-size: clamp(0px, 1.41vw, 18px);
  font-weight: var(--fw-m);
  line-height: 1.9;
  letter-spacing: 0.1em;
}

@media (max-width: 768px) {
  .profile_box {
    background-image: url("../img/bg_profile_sp.jpg");
    padding: 13.33vw 5.33vw;
  }

  .profile_box_row {
    flex-direction: column;
    gap: 0;
  }

  .profile_img {
    width: 50.67vw;
    margin: 0 auto 4vw;
  }

  .profile_main {
    flex: 0 0 auto;
  }

  .profile_title {
    font-size: 7.47vw;
    text-align: center;
    margin-bottom: 0.7em;
  }

  .profile_name {
    font-size: 5.07vw;
    text-align: center;
    margin-bottom: 0.78em;
  }

  .profile_text {
    font-size: 3.73vw;
    line-height: 1.57;
  }
}