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

PC

////////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  /*
  ========================================================================= */
  /* layout レイアウト
  ========================================================================= */
  .cmn_layout {
    padding-bottom: calc(var(--var-1) * 160);
  }
  .cmn_layout .inner::before {
    content: "";
    position: absolute;
    top: calc(var(--var-1) * -520);
    left: calc(var(--var-1) * -420);
    z-index: -1;
    display: block;
    width: calc(var(--var-1) * 1112);
    height: calc(var(--var-1) * 918);
    background: url(../img/cmn/deco2.png) no-repeat top/100%;
  }
  .cmn_layout .inner::after {
    bottom: calc(var(--var-1) * -160);
    right: calc(var(--var-1) * -420);
  }
  .cmn_layout .cmn_layout_list {
    gap: calc(var(--var-1) * 80);
    margin-top: calc(var(--var-1) * 60);
    counter-reset: number 0;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt {
    width: calc(var(--var-1) * 530);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_deco {
    font: italic 700 calc(var(--var-1) * 30)/1 var(--family-base);
    color: var(--cl-blue);
    letter-spacing: normal;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_deco::after {
    counter-increment: number 1;
    content: "0" counter(number);
    display: block;
    margin-left: calc(var(--var-1) * 4);
    font: italic 600 calc(var(--var-1) * 110)/1 var(--family-en);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_lead {
    margin-top: calc(var(--var-1) * 12);
    padding: calc(var(--var-1) * 2) 0 calc(var(--var-1) * 2) calc(var(--var-1) * 30);
    font: 700 calc(var(--var-1) * 30)/1.533 var(--family-base);
    border-left: calc(var(--var-1) * 3) solid var(--cl-blue);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_desc {
    margin-top: calc(var(--var-1) * 24);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_figure {
    flex-shrink: 0;
    width: calc(var(--var-1) * 450);
    height: calc(var(--var-1) * 340);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_figure .cmn_layout_img {
    width: calc(var(--var-1) * 450);
    height: calc(var(--var-1) * 340);
    -o-object-fit: cover;
       object-fit: cover;
  }
  /*
  ========================================================================= */
  /* title タイトル
  ========================================================================= */
  .cmn_ttl {
    font: 900 calc(var(--var-1) * 58)/1 var(--family-base);
  }
  .cmn_ttl .cmn_ttl_en {
    margin-bottom: calc(var(--var-1) * 24);
    color: var(--cl-blue);
    font: italic 700 calc(var(--var-1) * 30)/1 var(--family-base);
    letter-spacing: 0.01em;
  }
  /*
  ========================================================================= */
  /* text テキスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* list リスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* table テーブル
  ========================================================================= */
  /*
  ========================================================================= */
  /* tel 電話番号
  ========================================================================= */
  .tel .tel_number {
    font: 600 calc(var(--var-1) * 34)/1 var(--family-en);
    letter-spacing: 0.01em;
  }
  .tel .tel_number em {
    color: var(--cl-blue);
    font: 600 calc(var(--var-1) * 24)/1 var(--family-en);
  }
  .tel img {
    display: inline-block;
    margin-top: calc(var(--var-1) * 8);
  }
  /*
  ========================================================================= */
  /* times 営業時間・定休日
  ========================================================================= */
  /*
  ========================================================================= */
  /* btn ボタンの設計 
  ========================================================================= */
  .btn_wrap .btn {
    display: block;
    width: calc(var(--var-1) * 180);
    padding: calc(var(--var-1) * 22) 0;
    color: var(--cl-white);
    font: 700 calc(var(--var-1) * 16)/1 var(--family-base);
    text-align: center;
  }
  .btn_wrap .contact_btn {
    background: linear-gradient(145deg, rgb(23, 72, 226) 0%, rgb(23, 72, 226) 30%, rgb(40, 170, 235) 70%, rgb(40, 170, 235) 100%);
  }
  .btn_wrap .contact_btn::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 24);
    height: calc(var(--var-1) * 16);
    margin-right: calc(var(--var-1) * 4);
    background: url(../img/cmn/mail_icon.png) no-repeat top/100%;
    transform: translateY(calc(var(--var-1) * 2));
  }
  .btn_wrap .official_btn {
    background: var(--cl-black-light);
  }
  .cmn_btn {
    display: block;
    width: calc(var(--var-1) * 280);
    padding: calc(var(--var-1) * 22) 0;
    background: linear-gradient(145deg, rgb(23, 72, 226) 0%, rgb(23, 72, 226) 40%, rgb(40, 170, 235) 60%, rgb(40, 170, 235) 100%);
    color: var(--cl-white);
    font: 700 calc(var(--var-1) * 16)/1 var(--family-base);
    text-align: center;
    position: relative;
  }
  .cmn_btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 0;
    display: block;
    width: calc(var(--var-1) * 20);
    height: calc(var(--var-1) * 2);
    background: var(--cl-white);
  }
  /*
  ========================================================================= */
  /*  sns
  ========================================================================= */
  .sns_wrap .instagram {
    display: block;
    width: calc(var(--var-1) * 30);
    height: calc(var(--var-1) * 30);
  }
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////

SP

////////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  /*
  ========================================================================= */
  /* layout レイアウト
  ========================================================================= */
  .cmn_layout .inner::before {
    content: "";
    position: absolute;
    top: calc(var(--var-1) * -80);
    left: calc(var(--var-1) * -220);
    z-index: -1;
    display: block;
    width: calc(var(--var-1) * 400);
    height: calc(var(--var-1) * 918);
    background: url(../img/cmn/deco2.png) no-repeat top/100%;
  }
  .cmn_layout .inner::after {
    bottom: calc(var(--var-1) * -160);
    right: calc(var(--var-1) * -420);
  }
  .cmn_layout .cmn_layout_list {
    gap: calc(var(--var-1) * 48);
    margin-top: calc(var(--var-1) * 60);
    counter-reset: number 0;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item {
    gap: calc(var(--var-1) * 32);
    flex-direction: column;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_deco {
    font: italic 700 calc(var(--var-1) * 22)/1 var(--family-base);
    color: var(--cl-blue);
    letter-spacing: normal;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_deco::after {
    counter-increment: number 1;
    content: "0" counter(number);
    display: block;
    margin-left: calc(var(--var-1) * 4);
    font: italic 600 calc(var(--var-1) * 40)/1 var(--family-en);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_lead {
    margin-top: calc(var(--var-1) * 18);
    padding: calc(var(--var-1) * 2) 0 calc(var(--var-1) * 2) calc(var(--var-1) * 18);
    font: 700 calc(var(--var-1) * 22)/1.533 var(--family-base);
    border-left: calc(var(--var-1) * 2) solid var(--cl-blue);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_item .cmn_layout_txt .cmn_layout_desc {
    margin-top: calc(var(--var-1) * 24);
  }
  .cmn_layout .cmn_layout_list .cmn_layout_figure {
    flex-shrink: 0;
    width: 88%;
    height: calc(var(--var-1) * 208);
    margin: 0 auto;
  }
  .cmn_layout .cmn_layout_list .cmn_layout_figure .cmn_layout_img {
    width: 100%;
    height: calc(var(--var-1) * 208);
    -o-object-fit: cover;
       object-fit: cover;
  }
  /*
  ========================================================================= */
  /* title タイトル
  ========================================================================= */
  .cmn_ttl {
    font: 900 calc(var(--var-1) * 28)/1.379 var(--family-base);
    text-align: center;
  }
  .cmn_ttl .cmn_ttl_en {
    margin-bottom: calc(var(--var-1) * 16);
    color: var(--cl-blue);
    font: italic 700 calc(var(--var-1) * 18)/1 var(--family-base);
    letter-spacing: 0.01em;
  }
  /*
  ========================================================================= */
  /* text テキスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* list リスト
  ========================================================================= */
  /*
  ========================================================================= */
  /* table テーブル
  ========================================================================= */
  /*
  ========================================================================= */
  /* tel 電話番号
  ========================================================================= */
  .tel .tel_number {
    font: 600 calc(var(--var-1) * 28)/1 var(--family-en);
    letter-spacing: 0.01em;
  }
  .tel .tel_number em {
    color: var(--cl-blue);
    font: 600 calc(var(--var-1) * 18)/1 var(--family-en);
  }
  .tel img {
    display: inline-block;
    margin-top: calc(var(--var-1) * 8);
  }
  /*
  ========================================================================= */
  /* times 営業時間・定休日
  ========================================================================= */
  /*
  ========================================================================= */
  /* btn ボタンの設計 
  ========================================================================= */
  .btn_wrap .btn {
    display: block;
    width: calc(var(--var-1) * 140);
    padding: calc(var(--var-1) * 18) 0;
    color: var(--cl-white);
    font: 700 calc(var(--var-1) * 14)/1 var(--family-base);
    text-align: center;
  }
  .btn_wrap .contact_btn {
    background: linear-gradient(145deg, rgb(23, 72, 226) 0%, rgb(23, 72, 226) 30%, rgb(40, 170, 235) 70%, rgb(40, 170, 235) 100%);
  }
  .btn_wrap .contact_btn::before {
    content: "";
    display: inline-block;
    width: calc(var(--var-1) * 16);
    height: calc(var(--var-1) * 12);
    margin-right: calc(var(--var-1) * 4);
    background: url(../img/cmn/mail_icon.png) no-repeat top/100%;
    transform: translateY(calc(var(--var-1) * 2));
  }
  .btn_wrap .official_btn {
    background: var(--cl-black-light);
  }
  .cmn_btn {
    display: block;
    width: calc(var(--var-1) * 180);
    padding: calc(var(--var-1) * 14) 0;
    background: linear-gradient(145deg, rgb(23, 72, 226) 0%, rgb(23, 72, 226) 40%, rgb(40, 170, 235) 60%, rgb(40, 170, 235) 100%);
    color: var(--cl-white);
    font: 700 calc(var(--var-1) * 14)/1 var(--family-base);
    text-align: center;
    position: relative;
  }
  .cmn_btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 0;
    display: block;
    width: calc(var(--var-1) * 16);
    height: calc(var(--var-1) * 2);
    background: var(--cl-white);
  }
  /*
  ========================================================================= */
  /*  sns
  ========================================================================= */
  .sns_wrap .instagram {
    display: block;
    width: calc(var(--var-1) * 30);
    height: calc(var(--var-1) * 30);
  }
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////

共通コンポーネント

////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
========================================================================= */
/*  breadcrumb(パンくずリスト)
========================================================================= */
.breadcrumb {
  position: relative;
}
.breadcrumb .inner .breadcrumb_list {
  padding-top: calc(var(--var-1) * 32);
  position: absolute;
  gap: calc(var(--var-1) * 24);
  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) * 16);
  }
}
/*
========================================================================= */
/*  no_post
========================================================================= */
.no_post {
  margin-top: calc(var(--var-1) * 80);
  font-size: calc(var(--var-1) * 56);
  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) * 30);
    font-weight: 700;
    text-align: center;
  }
}
/*
========================================================================= */
/*  copy
========================================================================= */
.copy {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--var-1) * -18);
  font: 400 calc(var(--var-1) * 13)/1 var(--family-base);
  text-align: right;
}
.copy .copy_link {
  transition: 0.3s;
}
.copy .copy_link:hover {
  color: var(--cl-blue);
}

@media screen and (max-width: 767px) {
  .copy {
    margin-top: calc(var(--var-1) * 56);
    font: 400 calc(var(--var-1) * 10)/1 var(--family-base);
    text-align: center;
  }
}