@charset "UTF-8";
/*-----------------------------------------------------------------------------
初期化
-------------------------------------------------------------------------------*/
* {
  box-sizing: border-box;
}

ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: all 0.3s ease-in;
}

img {
  vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6, figure, p, dl, dt, dd {
  padding: 0;
  margin: 0;
}

.none {
  display: none;
}

html, body {
  scroll-behavior: smooth;
}

/*-----------------------------------------------------------------------------
break point
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
PC/SP
-------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sp-only {
    display: block;
  }
}
/*-----------------------------------------------------------------------------
font
-------------------------------------------------------------------------------*/
body {
  font-family: "Kosugi", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.8;
  width: 100%;
  color: #fff;
}
@media screen and (max-width: 767px) {
  body {
    height: 100%;
    font-size: 4vw;
    width: 100%;
  }
}

/*-----------------------------------------------------------------------------
display
-------------------------------------------------------------------------------*/
.dflex {
  display: flex;
}

span.dblock {
  display: block;
}

.grid {
  display: grid;
}

/*-----------------------------------------------------------------------------
colors
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
背景
-------------------------------------------------------------------------------*/
.bg-white {
  background-color: #fff;
}

/*-----------------------------------------------------------------------------
テキスト
-------------------------------------------------------------------------------*/
.txt-center {
  text-align: center;
}

.txt-bold {
  font-weight: 700;
}

/*-----------------------------------------------------------------------------
ボタン
-------------------------------------------------------------------------------*/
.btn {
  width: 48%;
}
.btn a {
  display: block;
  width: 100%;
  line-height: 3.625rem;
  font-size: min(1.125rem, 1.6vw);
  text-align: center;
  border-radius: 0.75rem;
  transition: all 0.3s ease-in;
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn a {
    font-size: 3.8vw;
    line-height: 12vw;
    border-radius: 2vw;
  }
}
.btn a:after {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background: url("../img/icon_arrow_btn.svg") no-repeat top center;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.25rem;
}
@media screen and (max-width: 767px) {
  .btn a:after {
    width: 3vw;
    height: 3vw;
    right: 3vw;
  }
}
@media screen and (min-width: 768px) {
  .btn a:hover {
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}

.btn-white a {
  background-color: #fff;
  color: #222;
}

/*-----------------------------------------------------------------------------
トップに戻る
-------------------------------------------------------------------------------*/
.tothetop {
  position: fixed;
  bottom: 3.125rem;
  right: 1.25rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 1.5rem));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0.35s ease;
}
@media screen and (max-width: 767px) {
  .tothetop {
    bottom: 14vw;
    right: 1.5vw;
    width: 14vw;
  }
  .tothetop img {
    width: 100%;
  }
}
.tothetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/*-----------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------*/
.footer {
  position: relative;
  z-index: 3;
}
.footer .footer_upper {
  background: url("../img/bg_footer.webp") no-repeat top center/cover;
  padding: 3.75rem 0;
}
@media screen and (max-width: 767px) {
  .footer .footer_upper {
    background: url("../img/bg_footer@sp.webp") no-repeat top center/cover;
    padding: 15vw 0;
  }
}
.footer .footer_upper .btns {
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .footer .footer_upper .btns {
    flex-direction: column;
    gap: 5vw;
    width: 100%;
  }
}
.footer .footer_upper .btns .btn {
  width: 48%;
}
@media screen and (max-width: 767px) {
  .footer .footer_upper .btns .btn {
    width: 100%;
  }
}
.footer .footer_bottom {
  background-color: #241815;
  height: 2.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .footer .footer_bottom {
    height: 13vw;
  }
}
.footer .footer_bottom small {
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.72px;
}
@media screen and (max-width: 767px) {
  .footer .footer_bottom small {
    text-align: center;
    font-size: 2.65vw;
    line-height: 1.4;
  }
}
.footer .footer_bottom small a {
  color: #fff;
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .footer .footer_bottom small a:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .footer .footer_bottom small a {
    text-align: center;
    font-size: 2.65vw;
  }
}

/*-----------------------------------------------------------------------------
エリアから探す
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
画像
-------------------------------------------------------------------------------*/
img {
  display: block;
}

.img-center {
  display: block;
  margin: 0 auto;
}

.w100 {
  width: 100%;
}

/*-----------------------------------------------------------------------------
枠
-------------------------------------------------------------------------------*/
.wrapper {
  position: relative;
  /* hidden だと子孫の position:sticky が効かない（スクロール容器になるため） */
  overflow: visible;
}
.wrapper .inner {
  width: 100%;
  max-width: 65rem;
  margin: 0 auto;
  position: relative;
  padding: 0 1.25rem;
}
@media screen and (max-width: 767px) {
  .wrapper .inner {
    padding: 0 5vw;
  }
}

/*-----------------------------------------------------------------------------
a tag
-------------------------------------------------------------------------------*/
a {
  transition: all 0.3s ease-in;
}

/*-----------------------------------------------------------------------------
パンくずリスト
-------------------------------------------------------------------------------*/
.breadlist {
  border-top: none;
  padding: 0 4px;
  border-bottom: 1px solid #cccccc;
}
.breadlist .inner {
  width: 100%;
  margin: 0 auto;
  max-width: unset;
}
@media screen and (max-width: 767px) {
  .breadlist .inner {
    max-width: unset;
    padding: 1.2vw;
  }
}
@media screen and (max-width: 767px) {
  .breadlist {
    padding: 0.25rem 0.375rem 0.25rem;
    width: 100%;
  }
}
.breadlist .list {
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .breadlist .list {
    padding: 0;
    flex-wrap: nowrap;
    gap: 4px 0;
  }
}
.breadlist .list .item {
  font-size: 0.75rem;
  letter-spacing: 0.045rem;
  color: #ccc;
}
.breadlist .list .item.myfont {
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item {
    font-size: 2.7vw;
    line-height: 1.3;
  }
  .breadlist .list .item.fontnormal {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.breadlist .list .item:not(:last-of-type):after {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  background: url("../img/icon_arrow_breadlist.svg") no-repeat top center;
  background-size: contain;
  margin-left: 4px;
  position: relative;
  top: 0rem;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item:not(:last-of-type):after {
    vertical-align: -0.2vw;
    width: 2.7vw;
    height: 2.7vw;
  }
}
.breadlist .list .item a {
  font-size: 0.625rem;
  color: #ccc;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item a {
    font-size: 2.7vw;
  }
}
.breadlist .list .item a:hover {
  text-decoration: underline;
}

/*-----------------------------------------------------------------------------
ヘッダー
-------------------------------------------------------------------------------*/
.header {
  justify-content: center;
  align-items: center;
  padding: 0.625rem 0;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 2.2vw 0;
  }
}
.header .logo {
  width: 9.8125rem;
}
@media screen and (max-width: 767px) {
  .header .logo {
    width: 30vw;
  }
}

/*-----------------------------------------------------------------------------
SNS
-------------------------------------------------------------------------------*/
.sec-share {
  margin-top: 3.75rem;
}
@media screen and (max-width: 767px) {
  .sec-share {
    margin-top: 16vw;
  }
}
.sec-share .p-share__buttons {
  gap: 1.875rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .sec-share .p-share__buttons {
    gap: 6vw;
  }
}
.sec-share .p-share__buttons li a {
  width: 3.75rem;
  display: block;
  height: 3.75rem;
}
@media screen and (max-width: 767px) {
  .sec-share .p-share__buttons li a {
    width: 9vw;
    height: 9vw;
  }
  .sec-share .p-share__buttons li a img {
    width: 100%;
  }
}

/*-----------------------------------------------------------------------------
KV
-------------------------------------------------------------------------------*/
.kv {
  position: relative;
}
.kv .kv_ttl {
  position: absolute;
  top: 2vw;
  width: 10.5vw;
}
@media screen and (min-width: 768px) {
  .kv .kv_ttl {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  .kv .kv_ttl {
    width: 26vw;
    top: 3vw;
    right: 4vw;
  }
}

/*-----------------------------------------------------------------------------
スモーキーな薫りに包まれる、大人のボンカレーを体験しよう
-------------------------------------------------------------------------------*/
.sec01 {
  background: url("../img/bg_sec01.webp") repeat top center/1440px auto;
  padding: 3.5rem 0 8rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .sec01 {
    background: url("../img/bg_sec01@sp.webp") repeat top center/cover;
    padding: 15vw 0;
  }
}
.sec01 .sec_header {
  margin-bottom: 3.5rem;
}
@media screen and (max-width: 767px) {
  .sec01 .sec_header {
    margin-bottom: 10vw;
  }
}
.sec01 .sec_header .sec_ttl {
  width: 33.3125rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .sec01 .sec_header .sec_ttl {
    width: 83vw;
  }
}
.sec01 .contents {
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-bottom: 4.375rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents {
    flex-direction: column-reverse;
    gap: 5vw;
    padding-bottom: 14vw;
  }
}
.sec01 .contents .txtarea {
  width: 63%;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea {
    width: 100%;
  }
}
.sec01 .contents .txtarea .ttl {
  margin-bottom: 1.4375rem;
}
.sec01 .contents .txtarea .sec_txt {
  font-size: min(0.875rem, 1.2vw);
  line-height: 1.8;
  letter-spacing: 0.84px;
  margin-bottom: 2.25rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .sec_txt {
    font-size: 3.4vw;
    margin-bottom: 8vw;
  }
}
.sec01 .contents .txtarea .dl {
  border-bottom: 0.125rem solid #fff;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .dl {
    padding-bottom: 5vw;
    border-width: 0.3vw;
  }
}
.sec01 .contents .txtarea .dl .dflex {
  flex-direction: column;
}
.sec01 .contents .txtarea .dl .dflex .dt {
  position: relative;
  margin-bottom: 0.875rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .dl .dflex .dt {
    margin-bottom: 5vw;
  }
}
.sec01 .contents .txtarea .dl .dflex .dt:after {
  content: "";
  display: block;
  width: 78%;
  height: 0.125rem;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .dl .dflex .dt:after {
    width: 80%;
    height: 0.3vw;
  }
}
.sec01 .contents .txtarea .dl .dflex .dt img {
  width: 7.375rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .dl .dflex .dt img {
    width: 15vw;
  }
}
.sec01 .contents .txtarea .dl .dflex .dd {
  font-size: min(0.875rem, 1.2vw);
  line-height: 1.8;
  letter-spacing: 0.84px;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .txtarea .dl .dflex .dd {
    font-size: 3.4vw;
  }
}
.sec01 .contents .img {
  width: 36%;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .img {
    width: 100%;
  }
}
.sec01 .contents .img img {
  position: relative;
  left: -1.4375rem;
  top: -1.5rem;
}
@media screen and (max-width: 767px) {
  .sec01 .contents .img img {
    width: 58vw;
    top: unset;
    left: -2vw;
  }
}
.sec01 .box {
  color: #222;
}
@media screen and (max-width: 767px) {
  .sec01 .box .swiper-voice {
    padding: 0 5vw;
  }
}
.sec01 .box .swiper-voice .swiper-wrapper {
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  .sec01 .box .swiper-voice .swiper-wrapper {
    display: block;
    transform: none !important;
  }
}
.sec01 .box .swiper-voice .swiper-slide {
  height: auto;
  display: flex;
}
@media screen and (max-width: 767px) {
  .sec01 .box .swiper-voice .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .sec01 .box .swiper-voice .swiper-slide:not(:last-child) {
    margin-bottom: 5vw;
  }
}
.sec01 .box .swiper-voice .vitem {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .sec01 .box .swiper-voice {
    overflow: visible;
  }
}
.sec01 .box .box_ttl {
  background-color: #241815;
  height: 3.5625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3.75rem;
}
@media screen and (max-width: 767px) {
  .sec01 .box .box_ttl {
    height: 9vw;
    margin-bottom: 10vw;
    margin-bottom: 8vw;
  }
}
.sec01 .box .box_ttl img {
  width: 12.9375rem;
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .sec01 .box .box_ttl img {
    width: 36vw;
  }
}
.sec01 .box .vitem {
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem {
    width: 100%;
    border-radius: 2vw;
    padding-left: 20vw;
    position: relative;
  }
}
.sec01 .box .vitem .vitem_inner {
  padding: min(1.25rem, 1.8vw) min(1.25rem, 1.8vw) min(1.5rem, 2.2vw);
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .vitem_inner {
    padding: 5vw;
  }
}
.sec01 .box .vitem .vitem_header {
  display: flex;
  align-items: center;
  border-bottom: 0.0625rem solid #222;
  padding-bottom: 1.25rem;
  margin-bottom: 0.875rem;
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .vitem_header {
    padding-bottom: 3vw;
    border-width: 0.3vw;
    margin-bottom: 3vw;
  }
}
.sec01 .box .vitem .vitem_header .ttl {
  max-width: 8.125rem;
  order: 2;
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .vitem_header .ttl {
    width: auto;
    max-width: unset;
  }
}
.sec01 .box .vitem .vitem_header .picon {
  max-width: 3.75rem;
  order: 1;
  margin-right: min(1.0625rem, 1.5vw);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #222;
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .vitem_header .picon {
    position: absolute;
    left: 5vw;
    top: 5vw;
    width: 15vw;
    max-width: unset;
  }
}
.sec01 .box .vitem .vitem_header a {
  order: 3;
  display: block;
  margin-left: auto;
  position: relative;
}
.sec01 .box .vitem .vitem_header a .iicon {
  width: 1.5rem;
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .vitem_header a .iicon {
    width: 4.5vw;
  }
}
.sec01 .box .vitem .vitem_header a .iicon img {
  transition: all 0.3s ease-in;
}
.sec01 .box .vitem .vitem_header a .iicon img.on {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .sec01 .box .vitem .vitem_header a:hover img.on {
    opacity: 1;
  }
  .sec01 .box .vitem .vitem_header a:hover .off {
    opacity: 0;
  }
}
.sec01 .box .vitem .txt {
  font-size: min(0.875rem, 1.2vw);
}
@media screen and (max-width: 767px) {
  .sec01 .box .vitem .txt {
    font-size: 3.6vw;
  }
}
.sec01 .box .note {
  font-size: 0.75rem;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .sec01 .box .note {
    position: absolute;
    line-height: 1;
    bottom: 1rem;
    left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .sec01 .box .note {
    margin-top: 2vw;
    padding: 0 5vw;
    font-size: 2.65vw;
  }
}

/*-----------------------------------------------------------------------------
ボンカレーネオシリーズ〜日常の食卓に、特別なひとときを〜
-------------------------------------------------------------------------------*/
.sec02 .sec_header {
  background-color: #241815;
  padding: 1.875rem 0;
}
@media screen and (max-width: 767px) {
  .sec02 .sec_header {
    padding: 5vw 0;
  }
}
.sec02 .sec_header .sec_ttl {
  max-width: 34.25rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .sec02 .sec_header .sec_ttl {
    max-width: unset;
    width: 90%;
  }
}
.sec02 .wall {
  background: url("../img/bg_sec02.webp") no-repeat top center/cover;
  padding: 3.75rem 0 7.5rem;
}
@media screen and (max-width: 767px) {
  .sec02 .wall {
    background: url("../img/bg_sec02@sp.webp") no-repeat top center/cover;
    padding: 17vw 0 26vw;
  }
}
.sec02 .box:not(:last-of-type) {
  margin-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box:not(:last-of-type) {
    margin-bottom: 16vw;
  }
}
.sec02 .box .box_ttl {
  width: 30.0625rem;
  margin-inline: auto;
  margin-bottom: 3.75rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box .box_ttl {
    width: 100%;
    margin-bottom: 8vw;
  }
}
.sec02 .box01 .box_ttl {
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .box_ttl {
    margin-bottom: 5vw;
  }
}
.sec02 .box01 .lead {
  font-size: min(1.125rem, 1.6vw);
  line-height: 1.3;
  letter-spacing: 1.08px;
  margin-bottom: 2.5rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .sec02 .box01 .lead {
    border-bottom: 0.125rem dotted #fff;
  }
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .lead {
    font-size: 3.8vw;
    line-height: 2.4;
  }
  .sec02 .box01 .lead span {
    border-bottom: 0.5vw dotted #fff;
    padding-bottom: 0.8vw;
  }
}
.sec02 .box01 .lead + .dflex {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .lead + .dflex {
    flex-wrap: wrap;
    gap: 5vw 0;
  }
}
.sec02 .box01 .card {
  padding: min(1.25rem, 1.8vw);
  border-radius: 1rem;
  width: 23.5%;
  position: relative;
  color: #222;
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .card {
    width: 47%;
    border-radius: 2vw;
    padding: 3vw 2.5vw 2vw;
  }
}
.sec02 .box01 .card .txt-center {
  font-size: min(1.0625rem, 1.5vw);
  line-height: 1.4;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .card .txt-center {
    margin-top: 2vw;
    font-size: 3.64vw;
    letter-spacing: -0.25vw;
  }
}
.sec02 .box01 .card .icon {
  position: absolute;
  width: min(4.125rem, 6.4vw);
  top: -0.625rem;
  left: -0.625rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box01 .card .icon {
    width: 13vw;
    top: -2vw;
    left: -2vw;
  }
}
@media screen and (max-width: 767px) {
  .sec02 .box02 .box_header {
    padding: 0 5vw;
  }
}
.sec02 .box02 .swiper {
  width: 100%;
  height: 100%;
  margin-bottom: 3.875rem;
}
@media screen and (max-width: 767px) {
  .sec02 .box02 .swiper {
    padding: 0 5vw;
    margin-bottom: 15vw;
  }
}
.sec02 .box02 .swiper .card .txt-center {
  display: block;
  margin-top: 1rem;
  font-size: min(1.0625rem, 1.5vw);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .sec02 .box02 .swiper .card .txt-center {
    font-size: 3.64vw;
  }
}
.sec02 .box02 .swiper .card .label {
  line-height: 1.75rem;
  margin-top: 1.0625rem;
  width: 100%;
  color: #222;
  border-radius: 14px;
  background: linear-gradient(90deg, #C09951 0%, #FBEF7C 50.48%, #BC934E 100%);
}
@media screen and (max-width: 767px) {
  .sec02 .box02 .swiper .card .label {
    line-height: 6vw;
    font-size: 3.2vw;
  }
}
.sec02 .box02 .btns .dflex {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .sec02 .box02 .btns .dflex {
    flex-direction: column;
    gap: 5vw;
  }
  .sec02 .box02 .btns .dflex .btn {
    width: 100%;
  }
}

/*-----------------------------------------------------------------------------
背景固定エリア（sticky：親の範囲で張り付き、終端で自動解除）
-------------------------------------------------------------------------------*/
.bgfixedarea .fixedimgbg {
  display: none;
}
.bgfixedarea.is-ios-gsap .fixedimgbg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: clip-path, opacity;
  clip-path: inset(100% 0 0 0);
}
.bgfixedarea.is-ios-gsap .fixedimgbg picture {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}
.bgfixedarea.is-ios-gsap .fixedimgbg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom center;
     object-position: bottom center;
}
.bgfixedarea.is-pc-gsap {
  background: url("../img/bg_sec03.webp") no-repeat bottom center/cover;
}
.bgfixedarea.is-pc-gsap .fixedimgbg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: clip-path, opacity;
  clip-path: inset(100% 0 0 0);
}
.bgfixedarea.is-pc-gsap .fixedimgbg picture {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
.bgfixedarea.is-pc-gsap .fixedimgbg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom center;
     object-position: bottom center;
}
.bgfixedarea.is-sp-gsap {
  background-color: #1a221c;
}
.bgfixedarea.is-sp-gsap .fixedimgbg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: clip-path, opacity;
  clip-path: inset(100% 0 0 0);
}
.bgfixedarea.is-sp-gsap .fixedimgbg picture {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}
.bgfixedarea.is-sp-gsap .fixedimgbg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom center;
     object-position: bottom center;
}
.bgfixedarea > .box {
  position: relative;
  z-index: 1;
}
.bgfixedarea > .box:not(:last-of-type) {
  margin-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea > .box:not(:last-of-type) {
    margin-bottom: 16vw;
  }
}
.bgfixedarea .box01 {
  padding-top: 3rem;
}
.bgfixedarea .box01 .box_header {
  width: 47rem;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box01 .box_header {
    margin-bottom: 5vw;
    width: 84vw;
  }
}
.bgfixedarea .box01 .lead {
  font-size: 1.125rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 4.125rem;
}
@media screen and (min-width: 768px) {
  .bgfixedarea .box01 .lead {
    border-bottom: 0.125rem dotted #fff;
  }
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box01 .lead {
    margin-bottom: 14vw;
    font-size: 3.8vw;
    line-height: 2.4;
  }
  .bgfixedarea .box01 .lead span {
    border-bottom: 0.5vw dotted #fff;
    padding-bottom: 0.8vw;
  }
}
.bgfixedarea .box01 .img {
  width: 13.75rem;
  margin-inline: auto;
  margin-bottom: 3.75rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box01 .img {
    margin-bottom: 16vw;
    width: 43vw;
  }
}
.bgfixedarea .box01 .info {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box01 .info {
    flex-direction: column;
    gap: 10vw;
  }
}
.bgfixedarea .box01 .info > * {
  width: 47.5%;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box01 .info > * {
    width: 100%;
  }
}
.bgfixedarea .box02 {
  padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box02 {
    padding-bottom: 25vw;
  }
}
.bgfixedarea .box02 .box_header {
  background: rgba(0, 0, 0, 0.5);
  border-top: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  height: 3.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.75rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box02 .box_header {
    height: 13vw;
    margin-bottom: 16vw;
    border-width: 0.3vw;
    height: 10vw;
  }
}
.bgfixedarea .box02 .box_header .box_ttl {
  width: 12.9375rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .box02 .box_header .box_ttl {
    width: 42vw;
  }
}
.bgfixedarea .swiper {
  margin-bottom: 5.625rem;
  padding-bottom: 5.625rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper {
    padding-bottom: 16vw;
    margin-bottom: 12vw;
  }
}
.bgfixedarea .swiper .swiper-pagination-bullet {
  background: unset;
  border: 2px solid #fff;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  opacity: 1;
  margin: 0 0.625rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .swiper-pagination-bullet {
    width: 4.5vw;
    height: 4.5vw;
    margin: 0 1.6vw;
    border-width: 0.3vw;
  }
}
.bgfixedarea .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    width: 2.3vw;
    height: 2.3vw;
  }
}
.bgfixedarea .swiper .card .info .ttl {
  margin-top: 1.125rem;
  padding-bottom: 1.125rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .card .info .ttl {
    margin-top: 4vw;
    padding-bottom: 4vw;
  }
}
.bgfixedarea .swiper .card .info .ttl img {
  width: auto;
  height: 3.5vw;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .card .info .ttl img {
    height: 11vw;
  }
}
.bgfixedarea .swiper .card .info .address {
  padding-top: 1rem;
  font-size: min(1.0625rem, 1.5vw);
  border-top: 0.0625rem solid #fff;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .card .info .address {
    padding-top: 3vw;
    font-size: 3.8vw;
  }
}
.bgfixedarea .swiper .card .info .btn {
  width: 100%;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .card .info .btn {
    margin-top: 4vw;
  }
}
.bgfixedarea .swiper .card .info .btn a {
  line-height: 2.9375rem;
  border-radius: 0.375rem;
}
.bgfixedarea .swiper .swiper-button-prev,
.bgfixedarea .swiper .swiper-button-next {
  left: 50%;
  width: min(3.75rem, 5.8vw);
  height: min(3.75rem, 5.8vw);
  transform: translateX(-50%);
  top: 18vw;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .swiper-button-prev,
  .bgfixedarea .swiper .swiper-button-next {
    width: 10vw;
    height: 10vw;
    top: 35vw;
  }
}
.bgfixedarea .swiper .swiper-button-prev svg,
.bgfixedarea .swiper .swiper-button-next svg {
  display: none;
}
.bgfixedarea .swiper .swiper-button-prev {
  background: url("../img/icon_prev.svg") no-repeat top center/cover;
  margin-left: -34.5vw;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .swiper-button-prev {
    margin-left: -35vw;
  }
}
.bgfixedarea .swiper .swiper-button-next {
  background: url("../img/icon_next.svg") no-repeat top center/cover;
  margin-left: 34.5vw;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .swiper .swiper-button-next {
    margin-left: 35vw;
  }
}
.bgfixedarea .graph {
  width: 30rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph {
    padding: 0 5vw;
    width: 100%;
  }
}
.bgfixedarea .graph .bg-white {
  border-radius: 1rem;
  padding: 1.6875rem 0 1.75rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph .bg-white {
    padding: 7vw 5vw 1vw;
    border-radius: 2vw;
  }
}
.bgfixedarea .graph .graph_ttl {
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph .graph_ttl {
    margin-bottom: 5vw;
  }
}
.bgfixedarea .graph .graph_ttl span {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.125rem;
  text-align: center;
  margin-inline: auto;
  display: block;
  color: #222;
  border-bottom: 0.125rem dotted #222;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph .graph_ttl span {
    font-size: 3.8vw;
  }
}
.bgfixedarea .graph .graph_ttl span:not(:last-of-type) {
  margin-bottom: 0.75rem;
}
.bgfixedarea .graph .graph_img {
  width: 16.25rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  position: relative;
  right: -1rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph .graph_img {
    width: 60vw;
    margin-bottom: 4vw;
    right: -2vw;
  }
}
.bgfixedarea .graph .note {
  font-size: 0.75rem;
  margin-top: 0.375rem;
}
@media screen and (max-width: 767px) {
  .bgfixedarea .graph .note {
    font-size: 2.5vw;
    letter-spacing: 0.1vw;
    margin-top: 2vw;
  }
}

/*-----------------------------------------------------------------------------
タブ
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
アコーディオン
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
バナー
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
バナー
-------------------------------------------------------------------------------*/
.swiper-lineup .swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-voice .swiper-wrapper {
  transition-timing-function: linear !important;
}/*# sourceMappingURL=style.css.map */