@charset "UTF-8";
/* //////////////////////////////////////////////////////////////////////////////////////////////////

PC

////////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  /*
  ========================================================================= */
  /* layout レイアウト
  ========================================================================= */
  /*
  ========================================================================= */
  /*  deco 装飾
  ========================================================================= */
  /*
  ========================================================================= */
  /* title タイトル
  ========================================================================= */
  .top_ttl {
    font: 700 calc(var(--var-1) * 45)/1 var(--family-ttl);
    letter-spacing: 0.06em;
  }
  .top_ttl .top_ttl_sub {
    margin-bottom: calc(var(--var-1) * 28);
    color: var(--cl-gray);
    font: 600 italic calc(var(--var-1) * 25)/1 var(--family-en);
    letter-spacing: 0.1em;
    position: relative;
  }
  .top_ttl .top_ttl_sub::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 12);
    height: calc(var(--var-1) * 21);
    margin-right: calc(var(--var-1) * 8);
    background: url(../img/top/ttl_deco.png) no-repeat top/100%;
  }
  .top_ttl2 {
    position: relative;
    z-index: 10;
  }
  .top_ttl2 .top_ttl2_sub {
    position: relative;
    z-index: -1;
    margin-bottom: calc(var(--var-1) * -22);
    background-image: repeating-linear-gradient(-45deg, rgba(204, 204, 204, 0.5019607843), rgba(204, 204, 204, 0.5019607843) calc(var(--var-1) * 3), transparent calc(var(--var-1) * 3), transparent calc(var(--var-1) * 6));
    color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
    font: 700 calc(var(--var-1) * 90)/1 var(--family-en);
  }
  .top_ttl2 .top_ttl2_sub::before {
    content: none;
  }
  .cmn_ttl {
    font: 700 calc(var(--var-1) * 45)/1 var(--family-ttl);
    text-align: center;
    letter-spacing: 0.06em;
  }
  /*
  ========================================================================= */
  /* list リスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* tel 電話番号
  ========================================================================= */
  .tel {
    position: relative;
  }
  .tel::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 14);
    height: calc(var(--var-1) * 18);
    background: url(../img/cmn/tel_icon.png) no-repeat top/100%;
  }
  .tel .tel_number {
    font: 900 calc(var(--var-1) * 30)/1 var(--family-ttl);
    letter-spacing: 0.1em;
  }
  /*
  ========================================================================= */
  /* times 営業時間・定休日
  ========================================================================= */
  .business_hour em {
    display: block;
    margin-right: calc(var(--var-1) * 8);
    padding: calc(var(--var-1) * 4) calc(var(--var-1) * 8) calc(var(--var-1) * 6);
    background: var(--cl-blue);
    color: var(--cl-white);
    font: 400 calc(var(--var-1) * 15)/1 var(--family-base);
  }
  /*
  ========================================================================= */
  /* btn ボタンの設計 
  ========================================================================= */
  .cmn_btn {
    display: block;
    width: calc(var(--var-1) * 280);
    padding: calc(var(--var-1) * 21) 0;
    color: var(--cl-white);
    position: relative;
    background: var(--cl-red);
    text-align: center;
    border-radius: calc(var(--var-1) * 100);
  }
  .cmn_btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: calc(var(--var-1) * 15);
    display: block;
    width: calc(var(--var-1) * 30);
    height: calc(var(--var-1) * 30);
    background: url(../img/cmn/arw_w_r.png) no-repeat top/100%;
  }
  .line {
    position: relative;
    background: var(--cl-black);
    padding-left: calc(var(--var-1) * 60);
    text-align: left;
  }
  .line::before {
    content: "";
    position: absolute;
    left: calc(var(--var-1) * 20);
    right: auto;
    display: block;
    width: calc(var(--var-1) * 20);
    height: calc(var(--var-1) * 20);
    background: url(../img/sns/LINE_logo.svg) no-repeat top/100%;
  }
  .line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: calc(var(--var-1) * 15);
    display: block;
    width: calc(var(--var-1) * 12);
    height: calc(var(--var-1) * 12);
    background: url(../img/cmn/link_icon.png) no-repeat top/100%;
  }
  .contact_btn {
    position: relative;
  }
  .contact_btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: calc(var(--var-1) * 20);
    display: block;
    width: calc(var(--var-1) * 16);
    height: calc(var(--var-1) * 12);
    background: url(../img/cmn/mail_icon.png) no-repeat top/100%;
  }
  /*
  ========================================================================= */
  /*  deco
  ========================================================================= */
  .deco_l {
    position: relative;
  }
  .deco_l::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
    width: calc(var(--var-1-sub) * 151);
    height: calc(var(--var-1-sub) * 237);
    background: url(../img/cmn/deco_l.png) no-repeat top/100%;
  }
  .deco_r {
    position: relative;
  }
  .deco_r::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: calc(var(--var-1-sub) * 406);
    height: calc(var(--var-1-sub) * 342);
    background: url(../img/cmn/deco_r.png) no-repeat top/100%;
  }
  .deco3 {
    position: relative;
  }
  .deco3::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: calc(var(--var-1-sub) * 109);
    height: calc(var(--var-1-sub) * 105);
    background: url(../img/cmn/deco3.png) no-repeat top/100%;
  }
  .deco4_l {
    position: relative;
  }
  .deco4_l::before, .deco4_l::after {
    content: "";
    position: absolute;
    left: calc(var(--var-1-sub) * 274);
    display: block;
    width: calc(var(--var-1-sub) * 91);
    height: calc(var(--var-1-sub) * 136);
    background: url(../img/cmn/deco4.png) no-repeat top/100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1730px) {
  .deco4_l::before, .deco4_l::after {
    left: calc(var(--var-1) * 100);
  }
}
@media screen and (min-width: 768px) and (max-width: 1480px) {
  .deco4_l::before, .deco4_l::after {
    left: calc(var(--var-1) * 40);
  }
}
@media screen and (min-width: 768px) {
  .deco4_l::before {
    top: calc(var(--var-1-sub) * 100);
  }
  .deco4_l::after {
    bottom: calc(var(--var-1-sub) * 100);
    transform: scale(1, -1);
  }
  .deco4_r::before, .deco4_r::after {
    content: "";
    position: absolute;
    right: calc(var(--var-1-sub) * 274);
    display: block;
    width: calc(var(--var-1-sub) * 91);
    height: calc(var(--var-1-sub) * 136);
    background: url(../img/cmn/deco4.png) no-repeat top/100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1730px) {
  .deco4_r::before, .deco4_r::after {
    right: calc(var(--var-1) * 100);
  }
}
@media screen and (min-width: 768px) and (max-width: 1480px) {
  .deco4_r::before, .deco4_r::after {
    right: calc(var(--var-1) * 40);
  }
}
@media screen and (min-width: 768px) {
  .deco4_r::before {
    top: calc(var(--var-1-sub) * 100);
    transform: scale(-1, 1);
  }
  .deco4_r::after {
    bottom: calc(var(--var-1-sub) * 100);
    transform: scale(-1, -1);
  }
}
@media screen and (min-width: 768px) {
  /*
  ========================================================================= */
  /*  便利系
  ========================================================================= */
  .w_bg {
    background-image: repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 calc(var(--var-1) * 6), rgba(248, 248, 248, 0.7) calc(var(--var-1) * 6), rgba(248, 248, 248, 0.7) calc(var(--var-1) * 12));
  }
  .r_bg {
    background-image: repeating-linear-gradient(-45deg, #eb0023, #eb0023 calc(var(--var-1) * 6), rgba(235, 0, 35, 0.96) calc(var(--var-1) * 6), rgba(235, 0, 35, 0.96) calc(var(--var-1) * 12));
  }
  .b_bg {
    background-image: repeating-linear-gradient(-45deg, #2d4197, #2d4197 calc(var(--var-1) * 6), rgba(45, 65, 151, 0.98) calc(var(--var-1) * 6), rgba(45, 65, 151, 0.98) calc(var(--var-1) * 12));
  }
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////

SP

////////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  /*
  ========================================================================= */
  /* layout レイアウト
  ========================================================================= */
  /*
  ========================================================================= */
  /*  deco 装飾
  ========================================================================= */
  /*
  ========================================================================= */
  /* title タイトル
  ========================================================================= */
  .top_ttl {
    font: 700 calc(var(--var-1) * 22)/1 var(--family-ttl);
    letter-spacing: 0.06em;
  }
  .top_ttl .top_ttl_sub {
    margin-bottom: calc(var(--var-1) * 18);
    color: var(--cl-gray);
    font: 600 italic calc(var(--var-1) * 16)/1 var(--family-en);
    letter-spacing: 0.1em;
    position: relative;
  }
  .top_ttl .top_ttl_sub::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 12);
    height: calc(var(--var-1) * 14);
    margin-right: calc(var(--var-1) * 8);
    background: url(../img/top/ttl_deco.png) no-repeat top/100%;
  }
  .top_ttl2 {
    position: relative;
    z-index: 10;
  }
  .top_ttl2 .top_ttl2_sub {
    position: relative;
    z-index: -1;
    margin-bottom: calc(var(--var-1) * -12);
    background-image: repeating-linear-gradient(-45deg, rgba(204, 204, 204, 0.5019607843), rgba(204, 204, 204, 0.5019607843) calc(var(--var-1) * 3), transparent calc(var(--var-1) * 3), transparent calc(var(--var-1) * 6));
    color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
    font: 700 calc(var(--var-1) * 38)/1 var(--family-en);
  }
  .top_ttl2 .top_ttl2_sub::before {
    content: none;
  }
  .cmn_ttl {
    font: 700 calc(var(--var-1) * 22)/1 var(--family-ttl);
    text-align: center;
    letter-spacing: 0.06em;
  }
  /*
  ========================================================================= */
  /* list リスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* tel 電話番号
  ========================================================================= */
  .tel {
    position: relative;
  }
  .tel::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 12);
    height: calc(var(--var-1) * 17);
    background: url(../img/cmn/tel_icon.png) no-repeat top/100%;
  }
  .tel .tel_number {
    font: 900 calc(var(--var-1) * 24)/1 var(--family-ttl);
    letter-spacing: 0.1em;
  }
  /*
  ========================================================================= */
  /* times 営業時間・定休日
  ========================================================================= */
  .business_hour em {
    display: block;
    margin-right: calc(var(--var-1) * 8);
    padding: calc(var(--var-1) * 4) calc(var(--var-1) * 4) calc(var(--var-1) * 5);
    background: var(--cl-blue);
    color: var(--cl-white);
    font: 400 calc(var(--var-1) * 12)/1 var(--family-base);
  }
  /*
  ========================================================================= */
  /* btn ボタンの設計 
  ========================================================================= */
  .cmn_btn {
    display: block;
    width: calc(var(--var-1) * 240);
    padding: calc(var(--var-1) * 12) 0;
    color: var(--cl-white);
    position: relative;
    background: var(--cl-red);
    text-align: center;
    border-radius: calc(var(--var-1) * 100);
  }
  .cmn_btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: calc(var(--var-1) * 15);
    display: block;
    width: calc(var(--var-1) * 16);
    height: calc(var(--var-1) * 16);
    background: url(../img/cmn/arw_w_r.png) no-repeat top/100%;
  }
  .line {
    position: relative;
    background: var(--cl-black);
    padding-left: calc(var(--var-1) * 58);
    text-align: left;
  }
  .line::before {
    content: "";
    position: absolute;
    left: calc(var(--var-1) * 20);
    right: auto;
    display: block;
    width: calc(var(--var-1) * 20);
    height: calc(var(--var-1) * 20);
    background: url(../img/sns/LINE_logo.svg) no-repeat top/100%;
  }
  .line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: calc(var(--var-1) * 15);
    display: block;
    width: calc(var(--var-1) * 12);
    height: calc(var(--var-1) * 12);
    background: url(../img/cmn/link_icon.png) no-repeat top/100%;
  }
  .contact_btn {
    position: relative;
  }
  .contact_btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: calc(var(--var-1) * 20);
    display: block;
    width: calc(var(--var-1) * 16);
    height: calc(var(--var-1) * 12);
    background: url(../img/cmn/mail_icon.png) no-repeat top/100%;
  }
  /*
  ========================================================================= */
  /*  deco
  ========================================================================= */
  .deco_l {
    position: relative;
  }
  .deco_l::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
    width: calc(var(--var-1-sub) * 56);
    height: calc(var(--var-1-sub) * 90);
    background: url(../img/cmn/deco_l.png) no-repeat top/100%;
  }
  .deco_r {
    position: relative;
  }
  .deco_r::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: calc(var(--var-1-sub) * 120);
    height: calc(var(--var-1-sub) * 108);
    background: url(../img/cmn/deco_r.png) no-repeat top/100%;
  }
  .deco4_l {
    position: relative;
  }
  .deco4_l::before, .deco4_l::after {
    content: "";
    position: absolute;
    left: calc(var(--var-1-sub) * 24);
    display: block;
    width: calc(var(--var-1-sub) * 20);
    height: calc(var(--var-1-sub) * 32);
    background: url(../img/cmn/deco4.png) no-repeat top/100%;
  }
  .deco4_l::before {
    top: calc(var(--var-1-sub) * 30);
  }
  .deco4_l::after {
    bottom: calc(var(--var-1-sub) * 30);
    transform: scale(1, -1);
  }
  .deco4_r::before, .deco4_r::after {
    content: "";
    position: absolute;
    right: calc(var(--var-1-sub) * 24);
    display: block;
    width: calc(var(--var-1-sub) * 20);
    height: calc(var(--var-1-sub) * 32);
    background: url(../img/cmn/deco4.png) no-repeat top/100%;
  }
  .deco4_r::before {
    top: calc(var(--var-1-sub) * 30);
    transform: scale(-1, 1);
  }
  .deco4_r::after {
    bottom: calc(var(--var-1-sub) * 30);
    transform: scale(-1, -1);
  }
  /*
  ========================================================================= */
  /*  便利系
  ========================================================================= */
  .w_bg {
    background-image: repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 calc(var(--var-1) * 4), rgba(248, 248, 248, 0.96) calc(var(--var-1) * 4), rgba(248, 248, 248, 0.96) calc(var(--var-1) * 8));
  }
  .r_bg {
    background-image: repeating-linear-gradient(-45deg, #eb0023, #eb0023 calc(var(--var-1) * 6), rgba(235, 0, 35, 0.96) calc(var(--var-1) * 6), rgba(235, 0, 35, 0.96) calc(var(--var-1) * 12));
  }
  .b_bg {
    background-image: repeating-linear-gradient(-45deg, #2d4197, #2d4197 calc(var(--var-1) * 6), rgba(45, 65, 151, 0.98) calc(var(--var-1) * 6), rgba(45, 65, 151, 0.98) calc(var(--var-1) * 12));
  }
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////

共通コンポーネント

////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
========================================================================= */
/*  breadcrumb(パンくずリスト)
========================================================================= */
.breadcrumb {
  position: relative;
}
.breadcrumb .inner .breadcrumb_list {
  padding-top: calc(var(--var-1) * 32);
  position: absolute;
  gap: calc(var(--var-1) * 32);
  z-index: 100;
}
.breadcrumb .inner .breadcrumb_list .breadcrumb_top a {
  transition: 0.3s;
}
.breadcrumb .inner .breadcrumb_list .breadcrumb_top a:hover {
  color: var(--cl-must);
}
.breadcrumb .inner .breadcrumb_list .breadcrumb_item_secondary,
.breadcrumb .inner .breadcrumb_list .breadcrumb_third {
  color: var(--cl-must);
}
.breadcrumb .inner .breadcrumb_list .arrow {
  position: relative;
}
.breadcrumb .inner .breadcrumb_list .arrow::before {
  content: ">";
  width: calc(var(--var-1) * 8);
  height: 100%;
  display: block;
  position: absolute;
  right: calc(-1 * var(--var-1) * 16);
}

@media screen and (max-width: 767px) {
  .breadcrumb {
    position: relative;
  }
  .breadcrumb .inner .breadcrumb_list {
    width: 84%;
    position: absolute;
    padding-top: calc(var(--var-1) * 24);
    gap: calc(var(--var-1) * 24);
    z-index: 100;
    overflow-x: scroll;
  }
  .breadcrumb .inner .breadcrumb_list .breadcrumb_item {
    display: inline-block;
    font-size: calc(var(--var-1) * 12);
    flex-shrink: 0;
  }
  .breadcrumb .inner .breadcrumb_list .breadcrumb_item:first-child {
    margin: 0;
  }
  .breadcrumb .inner .breadcrumb_list .breadcrumb_item_secondary,
  .breadcrumb .inner .breadcrumb_list .breadcrumb_third {
    color: var(--cl-must);
  }
  .breadcrumb .inner .breadcrumb_list .arrow {
    position: relative;
  }
  .breadcrumb .inner .breadcrumb_list .arrow::before {
    content: ">";
    width: calc(var(--var-1) * 8);
    height: 100%;
    display: block;
    position: absolute;
    right: calc(-1 * var(--var-1) * 14);
  }
}
/*
========================================================================= */
/*  nav_hover , current
========================================================================= */
.hd_link,
.ft_link {
  transition: 0.3s;
}
.hd_link:hover,
.ft_link:hover {
  color: var(--cl-must);
}

.current {
  color: var(--cl-must);
}

/*
========================================================================= */
/*  no_post
========================================================================= */
@media screen and (min-width: 768px) {
  .no_post {
    padding: calc(var(--var-1) * 120);
    font-size: calc(var(--var-1) * 32);
    font-weight: 700;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .no_post {
    margin-top: calc(var(--var-1) * 40);
    font-size: calc(var(--var-1) * 28);
    font-weight: 700;
    text-align: center;
  }
}
/*
========================================================================= */
/*  copy
========================================================================= */
@media screen and (min-width: 768px) {
  .copy {
    margin-top: calc(var(--var-1) * 40);
    font: 400 calc(var(--var-1) * 12) var(--family-base);
    text-align: right;
  }
  .copy .copy_link {
    transition: 0.3s;
  }
  .copy .copy_link:hover {
    color: var(--cl-must);
  }
}
@media screen and (max-width: 767px) {
  .copy {
    margin-top: calc(var(--var-1) * 64);
    font: 400 calc(var(--var-1) * 10) var(--family-base);
    text-align: center;
  }
}