@charset "UTF-8";
/* ##############################################################
#
#    base
#
############################################################## */
html {
  scroll-behavior: auto !important;
}

.obn-main {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #F5F5F5;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .obn-main {
    min-width: initial;
    background: #fff;
  }
}
.obn-main img {
  width: 100%;
  max-width: initial;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  .obn-main .obn-pc,
  .obn-main .obn-hidden-sp {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .obn-main .obn-sp,
  .obn-main .obn-hidden-pc {
    display: none !important;
  }
  .obn-main a {
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  .obn-main a:hover {
    opacity: 0.5;
    text-decoration: none;
  }
}

.l-footer {
  position: relative;
  background: #fff;
}

/* -------------------------------------------------------------
#    .obn-loading
------------------------------------------------------------- */
.obn-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  z-index: 1000;
}
.obn-loading__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(136 / 1360 * 100vw);
  height: calc(16 / 1360 * 100vw);
  background: url(../img/img_oldbutnew_loading_01.svg) no-repeat center center/contain;
}
@media screen and (max-width: 768px) {
  .obn-loading__loader {
    width: calc(102 / 390 * 100vw);
    height: calc(12 / 390 * 100vw);
  }
}
.obn-loading__loader.count-1 {
  background-image: url(../img/img_oldbutnew_loading_01.svg);
}
.obn-loading__loader.count-2 {
  background-image: url(../img/img_oldbutnew_loading_02.svg);
}
.obn-loading__loader.count-3 {
  background-image: url(../img/img_oldbutnew_loading_03.svg);
}
.obn-loading__loader.count-4 {
  background-image: url(../img/img_oldbutnew_loading_04.svg);
}

/* -------------------------------------------------------------
#    .obn-section
------------------------------------------------------------- */
.obn-section {
  position: relative;
  min-height: 100dvh;
  padding: 100dvh 0 50dvh;
}
.obn-section__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.obn-section__bg.obn-section__bg--mask {
  clip-path: inset(0% 0% 0 0);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  -webkit-mask-image: url(../img/img_oldbutnew_mask_01.png);
          mask-image: url(../img/img_oldbutnew_mask_01.png);
}
.obn-section__bg__image {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.obn-section__bg__darken {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.obn-section__inner {
  position: relative;
  height: 300dvh;
}

/* -------------------------------------------------------------
#    .obn-kv
------------------------------------------------------------- */
.obn-kv {
  padding: 0;
}
.obn-kv .obn-section__inner {
  height: 100dvh;
}
.obn-kv .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_kv_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-kv .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_kv_bg_01_sp.jpg);
  }
}
.obn-kv__h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  margin: calc(-35 / 1360 * 100vw) 0 0;
  width: calc(539 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-kv__h1 {
    margin: calc(-20 / 390 * 100vw) 0 0;
    width: calc(306 / 390 * 100vw);
  }
}
.obn-kv__text {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  margin: calc(35 / 1360 * 100vw) 0 0;
  width: calc(394 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-kv__text {
    margin: calc(20 / 390 * 100vw) 0 0;
    width: calc(245 / 390 * 100vw);
  }
}
.obn-kv__logo {
  position: absolute;
  left: calc(40 / 1360 * 100vw);
  top: 5dvh;
  width: calc(201 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-kv__logo {
    left: calc(24 / 390 * 100vw);
    top: calc(30 / 390 * 100vw);
    width: calc(182 / 390 * 100vw);
  }
}
.obn-kv__attention {
  position: fixed;
  z-index: 9;
  right: 46px;
  bottom: 0;
  padding: 0 0 84px;
}
@media screen and (max-width: 768px) {
  .obn-kv__attention {
    right: calc(24 / 390 * 100vw);
    padding: 0 0 calc(67 / 390 * 100vw);
  }
}
.obn-kv__attention__image {
  width: 9px;
}
@media screen and (max-width: 768px) {
  .obn-kv__attention__image {
    width: calc(7 / 390 * 100vw);
  }
}
.obn-kv__attention__line {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 0.5px;
  height: 80px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .obn-kv__attention__line {
    width: calc(0.5 / 390 * 100vw);
    height: calc(62 / 390 * 100vw);
  }
}
.obn-kv__attention__line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 6.5px;
  height: 6.5px;
  border-radius: 100%;
  background: #fff;
  -webkit-animation: upDown 1500ms cubic-bezier(0.66, 0, 0.44, 1) forwards infinite;
          animation: upDown 1500ms cubic-bezier(0.66, 0, 0.44, 1) forwards infinite;
}
@media screen and (max-width: 768px) {
  .obn-kv__attention__line::after {
    width: calc(5 / 390 * 100vw);
    height: calc(5 / 390 * 100vw);
  }
}
@-webkit-keyframes upDown {
  0% {
    opacity: 0;
    top: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}
@keyframes upDown {
  0% {
    opacity: 0;
    top: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}

/* -------------------------------------------------------------
#    .obn-block-a
------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .obn-block-a {
    padding-bottom: 0;
  }
}
.obn-block-a .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_a_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-a .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_a_bg_01_sp.jpg);
  }
}
.obn-block-a__text {
  position: absolute;
  left: calc(68 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  width: calc(569 / 1360 * 100vw);
}
.obn-block-a__text img {
  -webkit-filter: drop-shadow(0 0 calc(40 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(40 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-a__text {
    left: calc(-36 / 390 * 100vw);
    width: calc(475 / 390 * 100vw);
  }
  .obn-block-a__text img {
    -webkit-filter: drop-shadow(0 0 calc(40 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(40 / 390 * 100vw) rgb(0, 0, 0));
  }
}

/* -------------------------------------------------------------
#    .obn-block-b
------------------------------------------------------------- */
.obn-block-b .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_b_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-b .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_b_bg_01_sp.jpg);
  }
}
.obn-block-b .obn-section__inner {
  height: 500dvh;
}
@media screen and (max-width: 768px) {
  .obn-block-b__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
  }
}
.obn-block-b__symbol {
  position: absolute;
  z-index: 1;
  left: calc(-20 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  margin: calc(-65 / 1360 * 100vw) 0 0;
  width: calc(599 / 1360 * 100vw);
  opacity: 0.3;
}
.obn-block-b__symbol img {
  -webkit-filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-b__symbol {
    top: auto;
    bottom: calc(193 / 390 * 100vw);
    translate: initial;
    left: calc(-32 / 390 * 100vw);
    margin: 0;
    width: calc(366 / 390 * 100vw);
  }
  .obn-block-b__symbol img {
    -webkit-filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
  }
}
.obn-block-b__text {
  position: absolute;
  z-index: 2;
  left: calc(142 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  margin: calc(65 / 1360 * 100vw) 0 0;
  width: calc(370 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-block-b__text {
    top: auto;
    bottom: calc(137 / 390 * 100vw);
    translate: initial;
    left: calc(50 / 390 * 100vw);
    margin: 0;
    width: calc(269 / 390 * 100vw);
  }
}
.obn-block-b__images {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.obn-block-b__images__image {
  position: absolute;
  top: 50dvh;
  translate: 0 -50%;
}
.obn-block-b__images__image--1 {
  right: calc(279 / 1360 * 100vw);
  margin-top: -8.0882352941dvh;
  width: calc(412 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-block-b__images__image--1 {
    right: auto;
    left: calc(36 / 390 * 100vw);
    margin: calc(-140 / 390 * 100vw) 0 0;
    width: calc(285 / 390 * 100vw);
  }
}
.obn-block-b__images__image--2 {
  right: calc(95 / 1360 * 100vw);
  margin-top: 5.8823529412dvh;
  width: calc(236 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-block-b__images__image--2 {
    right: auto;
    left: calc(159 / 390 * 100vw);
    margin: calc(110 / 390 * 100vw) 0 0;
    width: calc(194 / 390 * 100vw);
  }
}

/* -------------------------------------------------------------
#    .obn-block-c
------------------------------------------------------------- */
.obn-block-c .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_c_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-c .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_c_bg_01_sp.jpg);
  }
}
.obn-block-c .obn-section__inner {
  height: 325dvh;
}
.obn-block-c__symbol {
  position: absolute;
  left: calc(-20 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  margin: calc(-80 / 1360 * 100vw) 0 0;
  width: calc(656 / 1360 * 100vw);
  opacity: 0.3;
}
.obn-block-c__symbol img {
  -webkit-filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-c__symbol {
    top: calc(-14 / 390 * 100vw);
    translate: initial;
    left: calc(-34 / 390 * 100vw);
    width: calc(388 / 390 * 100vw);
  }
  .obn-block-c__symbol img {
    -webkit-filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
  }
}
.obn-block-c__text {
  position: absolute;
  left: calc(42 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  margin: calc(80 / 1360 * 100vw) 0 0;
  width: calc(545 / 1360 * 100vw);
}
.obn-block-c__text img {
  -webkit-filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(50 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-c__text {
    top: calc(17 / 390 * 100vw);
    translate: initial;
    left: calc(-12 / 390 * 100vw);
    width: calc(417 / 390 * 100vw);
  }
  .obn-block-c__text img {
    -webkit-filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(50 / 390 * 100vw) rgb(0, 0, 0));
  }
}

/* -------------------------------------------------------------
#    .obn-block-d
------------------------------------------------------------- */
.obn-block-d .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_d_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-d .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_d_bg_01_sp.jpg);
  }
}
.obn-block-d__text {
  position: absolute;
  right: calc(86 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  width: calc(362 / 1360 * 100vw);
}
.obn-block-d__text img {
  -webkit-filter: drop-shadow(0 0 calc(20 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(20 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-d__text {
    top: calc(50 / 390 * 100vw);
    translate: initial;
    left: calc(36 / 390 * 100vw);
    width: calc(261 / 390 * 100vw);
  }
  .obn-block-d__text img {
    -webkit-filter: drop-shadow(0 0 calc(20 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(20 / 390 * 100vw) rgb(0, 0, 0));
  }
}

/* -------------------------------------------------------------
#    .obn-block-e
------------------------------------------------------------- */
.obn-block-e .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_e_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-e .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_e_bg_01_sp.jpg);
  }
}
.obn-block-e__text {
  position: absolute;
  left: calc(110 / 1360 * 100vw);
  top: 50dvh;
  translate: 0 -50%;
  width: calc(430 / 1360 * 100vw);
}
.obn-block-e__text img {
  -webkit-filter: drop-shadow(0 0 calc(15 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(15 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-e__text {
    top: calc(45 / 390 * 100vw);
    translate: initial;
    left: calc(36 / 390 * 100vw);
    width: calc(314 / 390 * 100vw);
  }
  .obn-block-e__text img {
    -webkit-filter: drop-shadow(0 0 calc(15 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(15 / 390 * 100vw) rgb(0, 0, 0));
  }
}

/* -------------------------------------------------------------
#    .obn-block-f
------------------------------------------------------------- */
.obn-block-f .obn-section__bg__image {
  background-image: url(../img/img_oldbutnew_f_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-block-f .obn-section__bg__image {
    background-image: url(../img/img_oldbutnew_f_bg_01_sp.jpg);
  }
}
.obn-block-f .obn-section__inner {
  height: 400dvh;
}
.obn-block-f__logo {
  position: absolute;
  left: 50%;
  top: 50dvh;
  translate: -50% -50%;
  margin: calc(-60 / 1360 * 100vw) 0 0;
  width: calc(445 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-block-f__logo {
    top: calc(135 / 390 * 100vw);
    translate: -50% 0;
    margin: 0;
    width: calc(318 / 390 * 100vw);
  }
}
.obn-block-f__text {
  position: absolute;
  left: 50%;
  top: 50dvh;
  translate: -50% -50%;
  margin: calc(60 / 1360 * 100vw) 0 0;
  width: calc(482 / 1360 * 100vw);
}
.obn-block-f__text img {
  -webkit-filter: drop-shadow(0 0 calc(20 / 1360 * 100vw) rgb(0, 0, 0));
          filter: drop-shadow(0 0 calc(20 / 1360 * 100vw) rgb(0, 0, 0));
}
@media screen and (max-width: 768px) {
  .obn-block-f__text {
    top: calc(205 / 390 * 100vw);
    translate: -50% 0;
    margin: 0;
    width: calc(267 / 390 * 100vw);
  }
  .obn-block-f__text img {
    -webkit-filter: drop-shadow(0 0 calc(15 / 390 * 100vw) rgb(0, 0, 0));
            filter: drop-shadow(0 0 calc(15 / 390 * 100vw) rgb(0, 0, 0));
  }
}

/* -------------------------------------------------------------
#    .obn-bottom
------------------------------------------------------------- */
.obn-bottom {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 120px 0 88px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background: #F5F5F5;
}
@media screen and (max-width: 768px) {
  .obn-bottom {
    padding: calc(120 / 390 * 100vw) 0 calc(74 / 390 * 100vw);
  }
}
.obn-bottom__inner {
  width: 100%;
  max-width: 1229px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .obn-bottom__inner {
    width: calc(362 / 390 * 100vw);
  }
}
.obn-bottom h2 {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .obn-bottom h2 {
    font-size: calc(16 / 390 * 100vw);
  }
}
.obn-bottom h2 span {
  color: #000;
}
@media screen and (max-width: 768px) {
  .obn-bottom h2 span {
    font-size: calc(28 / 390 * 100vw);
  }
}
.obn-bottom__cm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 0 0 90px;
  padding: 0 0 120px;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm {
    margin: 0 0 calc(48 / 390 * 100vw);
    padding: 0 0 calc(96 / 390 * 100vw);
  }
}
.obn-bottom__cm__h2 {
  width: 142px;
  margin: 0 0 35px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__h2 {
    width: calc(142 / 390 * 100vw);
    margin: 0 0 calc(40 / 390 * 100vw);
  }
}
.obn-bottom__cm__video {
  position: relative;
  width: 720px;
  margin: 0 0 22px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__video {
    width: calc(326 / 390 * 100vw);
    margin: 0 0 calc(20 / 390 * 100vw);
  }
}
.obn-bottom__cm__video__image:not(.obn-bottom__cm__video__image--coming-soon) {
  opacity: 1;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 769px) {
  .obn-bottom__cm__video__image:not(.obn-bottom__cm__video__image--coming-soon):hover {
    opacity: 0.7;
  }
}
.obn-bottom__cm__modal {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.obn-bottom__cm__modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: opacity 0.4s ease, visibility 0s linear 0s;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.obn-bottom__cm__modal__close {
  position: absolute;
  right: calc(46 / 1360 * 100vw);
  top: calc(36 / 1360 * 100vw);
  width: calc(29 / 1360 * 100vw);
  height: calc(29 / 1360 * 100vw);
  opacity: 1;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 769px) {
  .obn-bottom__cm__modal__close:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__modal__close {
    right: calc(25 / 390 * 100vw);
    top: calc(25 / 390 * 100vw);
    width: calc(29 / 390 * 100vw);
    height: calc(29 / 390 * 100vw);
  }
}
.obn-bottom__cm__modal__container {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(921 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__modal__container {
    width: calc(360 / 390 * 100vw);
  }
}
.obn-bottom__cm__modal__video {
  width: calc(921 / 1360 * 100vw);
  height: calc(518 / 1360 * 100vw);
  margin: 0 0 calc(25 / 1360 * 100vw);
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__modal__video {
    width: calc(360 / 390 * 100vw);
    height: calc(203 / 390 * 100vw);
    margin: 0 0 calc(12 / 390 * 100vw);
  }
}
.obn-bottom__cm__modal__title {
  font-size: calc(24 / 1360 * 100vw);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__modal__title {
    font-size: calc(16 / 390 * 100vw);
  }
}
.obn-bottom__cm__title {
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__cm__title {
    font-size: calc(18 / 390 * 100vw);
  }
}
.obn-bottom__feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.obn-bottom__feature__h2 {
  margin: 0 0 38px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__feature__h2 {
    margin: 0 0 calc(28 / 390 * 100vw);
  }
}
.obn-bottom__feature__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 611px;
  height: 192px;
  margin: 0 0 90px;
  background: #ECECEC;
}
@media screen and (max-width: 768px) {
  .obn-bottom__feature__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: initial;
    margin: 0 0 calc(48 / 390 * 100vw);
    padding: 0 0 calc(56 / 390 * 100vw);
    background: transparent;
    border-bottom: 1px solid #ddd;
  }
}
.obn-bottom__feature__link__image {
  width: 302px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__feature__link__image {
    width: 100%;
    margin: 0 0 calc(14 / 390 * 100vw);
  }
}
.obn-bottom__feature__link__image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100;
}
.obn-bottom__feature__link__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 309px;
  height: 100%;
  padding: 0 0 0 44px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .obn-bottom__feature__link__text {
    display: block;
    width: initial;
    height: initia;
    padding: initial;
    font-weight: 600;
    font-size: calc(18 / 390 * 100vw);
  }
}
.obn-bottom__selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 0 0 98px;
}
.obn-bottom__selected__h2 {
  margin: 0 0 39px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__selected__h2 {
    margin: 0 0 calc(22 / 390 * 100vw);
  }
}
.obn-bottom__selected__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .obn-bottom__selected__items {
    gap: calc(16 / 390 * 100vw) calc(10 / 390 * 100vw);
  }
}
.obn-bottom__selected__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(calc(302 / 1229 * 100vw), 302px);
}
@media screen and (max-width: 768px) {
  .obn-bottom__selected__item {
    width: calc(176 / 390 * 100vw);
  }
}
.obn-bottom__selected__item__image {
  margin: 0 0 16px;
}
@media screen and (max-width: 768px) {
  .obn-bottom__selected__item__image {
    margin: 0 0 calc(6 / 390 * 100vw);
  }
}
.obn-bottom__selected__item__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .obn-bottom__selected__item__text {
    font-weight: 600;
    font-size: calc(14 / 390 * 100vw);
  }
}
.obn-bottom__banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 440px;
  height: 100px;
  margin: 0 auto;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  background: url(../img/img_oldbutnew_bottom_obj_08.svg) no-repeat 50% 50%/contain;
}
@media screen and (max-width: 768px) {
  .obn-bottom__banner {
    width: calc(362 / 390 * 100vw);
    height: calc(88 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
    background-image: url(../img/img_oldbutnew_bottom_obj_08_sp.svg);
  }
}

/* -------------------------------------------------------------
#    .obn-ghost-bg
------------------------------------------------------------- */
.obn-ghost-bg {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.obn-ghost-bg__type-a {
  background-image: url(../img/img_oldbutnew_a_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-a {
    background-image: url(../img/img_oldbutnew_a_bg_01_sp.jpg);
  }
}
.obn-ghost-bg__type-b {
  background-image: url(../img/img_oldbutnew_b_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-b {
    background-image: url(../img/img_oldbutnew_b_bg_01_sp.jpg);
  }
}
.obn-ghost-bg__type-c {
  background-image: url(../img/img_oldbutnew_c_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-c {
    background-image: url(../img/img_oldbutnew_c_bg_01_sp.jpg);
  }
}
.obn-ghost-bg__type-d {
  background-image: url(../img/img_oldbutnew_d_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-d {
    background-image: url(../img/img_oldbutnew_d_bg_01_sp.jpg);
  }
}
.obn-ghost-bg__type-e {
  background-image: url(../img/img_oldbutnew_e_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-e {
    background-image: url(../img/img_oldbutnew_e_bg_01_sp.jpg);
  }
}
.obn-ghost-bg__type-f {
  background-image: url(../img/img_oldbutnew_f_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  .obn-ghost-bg__type-f {
    background-image: url(../img/img_oldbutnew_f_bg_01_sp.jpg);
  }
}