@charset "utf-8";
/* CSS Document */
div#wrapper {
  /* width: 65% !important;*/
  min-width: auto !important;
  overflow: hidden;
}
div#wrapper80 {
  width: 80% !important;
  min-width: auto !important;
  overflow: hidden;
  margin: 0 auto;
}
@media(max-width:750px) {
  div#wrapper80 {
    width: 100% !important;
    min-width: auto !important;
    overflow: hidden;
    margin: 0 auto;
  }
}
ul#gMenu {
  height: 20px;
}
#head {
  height: auto !important;
}
a.anchor {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}
.indents1 {
  padding-left: 1em;
  text-indent: -1em;
}
@media(min-width:751px) {
  .pc_none {
    display: none !important;
  }
}
@media(max-width:750px) {
  .sp_none {
    display: none !important;
  }
}
.center {
  text-align: center;
}
.notice-center {
  text-align: center;
}
.small {
  font-size: 72%;
  font-weight: 600;
}
.bold {
  font-weight: 800;
}
.black {
  color: #000;
}
.fs-2 {
  font-size: 1.3rem !important;
  font-weight: 500;
}
.fs-1 {
  font-size: 1.1rem !important;
  font-weight: 600;
}
.fs-09 {
  font-size: 1rem !important;
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  .small {
    font-size: 75%;
    font-weight: normal;
  }
  .fs-2 {
    font-size: 1rem !important;
  }
  .fs-1, .fs-09 {
    font-size: 0.7rem !important;
  }
  .notice-center {
    text-align: left;
  }
}
.mgt-1 {
  margin-top: 1rem;
}
.mgb-1 {
  margin-bottom: 1rem;
}
.w-60 {
  width: 60%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .w-60 {
    width: 90%;
    margin: 0 auto;
  }
}
.contents {
  width: 100%;
  /*font-size: 1.27rem;*/
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  color: #444;
}
.main {
  width: 100%;
  margin: 0 0 3%;
  position: relative;
}
.main img {
  width: 100%;
  height: auto;
  margin-top: 0 !important;
}
.main_none {
  width: 100%;
  /*margin: 0 0 3% 0;*/
  position: relative;
}
.main_none img {
  max-width: 100%;
  height: auto;
  margin-top: 0 !important;
}
.main h1 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 4px 4px 4px #000, -4px -4px 4px #000, -4px 4px 4px #000, 4px -4px 4px #000, 4px 0 4px #000, -4px 0 4px #000, 0 4px 4px #000, 0 -4px 4px #000;
  text-align: center;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .main h1 {
    font-size: .97rem !important;
    font-weight: 600;
  }
}
.main_hn {
  width: 100%;
  margin: 0 0 3%;
  position: relative;
}
.main_hn img {
  width: 100%;
  height: auto;
  margin-top: 0 !important;
}
.main_hn h1 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 4px 4px 4px #000, -4px -4px 4px #000, -4px 4px 4px #000, 4px -4px 4px #000, 4px 0 4px #000, -4px 0 4px #000, 0 4px 4px #000, 0 -4px 4px #000;
  text-align: center;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .main_hn h1 {
    font-size: .97rem !important;
    font-weight: 600;
  }
}
.tel-info {
  text-align: right;
  font-size: .9rem;
  color: red;
}
.contents .intro {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 5% auto;
  width: 100%;
}
.contents .intro img {
  max-width: 100%;
}
.contents .intro_ttl {
  font-size: 2rem;
  color: #c33c0b;
}
@media screen and (max-width: 768px) {
  .contents .intro_ttl {
    font-size: 1.4rem;
  }
}
.contents .intro_a {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 5% auto;
  width: 60%;
}
@media screen and (max-width: 640px) {
  .contents .intro_a {
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    margin: 5% auto;
    width: 90%;
  }
}
.contents .intro_a_ttl {
  font-size: 1.5rem;
  color: #161616;
}
@media screen and (max-width: 768px) {
  .contents .intro_a_ttl {
    font-size: 1.3rem;
  }
}
.contents .intro {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 5% auto;
  width: 100%;
}
.contents .intro img {
  max-width: 100%;
}
@media screen and (max-width: 640px) {
  .contents .intro {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    color: red;
    text-align: left;
    margin: 5% auto;
    width: 90%;
  }
}
.box-entry {
  width: 70%;
  position: relative;
  margin: 2rem auto;
  padding: 25px 10px 7px;
  border: solid 2px #4D9BC1;
}
.box-entry .box-title {
  position: absolute;
  display: inline-block;
  top: -2px;
  left: -2px;
  padding: .5rem 1rem;
  height: 25px;
  line-height: 25px;
  font-size: 1.2rem;
  background: #4D9BC1;
  color: #ffffff;
  font-weight: bold;
}
.box-entry p {
  margin: 0;
  padding: 0;
}
.contents h2 {
  width: 80%;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  background: #0ac2df;
  vertical-align: middlecenter;
  height: 40px;
  padding-top: 5px;
  margin: 5% auto;
}
.contents h4 {
  width: 80%;
  font-size: 24px;
  color: #ffffff !important;
  text-align: center;
  background: #FF0000;
  vertical-align: middlecenter;
  height: 40px;
  padding-top: 5px;
  margin: 5% auto;
}
.contents h3 {
  font-size: 1.6rem;
  color: #494949;
  background: transparent;
  border-left: solid 5px #0ac2df;
  /*height: 40px;*/
  padding: 10px;
  margin: 5% auto;
  font-weight: 500;
}
.contents h3 img {
  width: 15%;
}
@media screen and (max-width: 640px) {
  .contents h3 {
    font-size: 1.4rem;
    font-weight: 700;
  }
}
.contents h4 {
  font-size: 24px;
  font-weight: bold;
  color: red;
  text-align: center;
}
.contents h5 {
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: 2%
}
.contents h6 {
  font-size: 19px;
  font-weight: bold;
  line-height: 1;
  color: red;
  text-align: center;
  margin: 5% 0 0
}
.contents .intro {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 5% auto;
  width: 100%;
}
.contents .intro-chui {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 5% auto;
  width: 90%;
  background-color: yellow;
  padding: .7rem;
}
@media screen and (max-width: 640px) {
  .contents .intro-chui {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    margin: 5% auto;
    background-color: yellow;
  }
}
.ttl {
  color: #001eb3;
  font-size: 20px;
  font-weight: bold;
}
.cp_ttl {
  font-size: 22px;
  font-weight: bold;
  margin-left: 10%;
  margin-bottom: 1%;
  border-left: 10px solid #3EB1C6;
  padding-left: 10px;
}
.box {
  width: 80%;
  margin: 3% 10%;
}
.box img {
  width: 100%;
}
.box dd {
  margin: 0 0 5% 0;
}
.box .product-ttl {
    border-bottom: solid 3px #0ac2df;
    font-size: 1.5rem;
    margin: 0 1rem;
    color: #0ac2df;
}
.box .bk-caution {
  background: repeating-linear-gradient(135deg, #ef4e5e12, #ef4e5e12 20px, #fff 20px, #fff 40px);
}
.box_bblue {
  width: 78%;
  margin: 3% 10%;
  border: 3px solid #0ac2df;
  padding: 1%;
  border-radius: 1vh;
}
.box-c {
  width: 80%;
  margin: 3% auto;
  text-align: center
}
.contents p {
  margin: 2% auto;
  /*font-size: 1.35rem;*/
  /* line-height: 1.2;*/
}
@media screen and (max-width: 640px) {
  .contents p {
    font-size: 15px;
  }
}
.box_70 {
  width: 70%;
  margin: 0 auto;
  background-color: rgb(182 225 246);
  padding: 2%;
}
.img-area {
  width: 70%;
  margin: 0 auto;
}
.img-area img {
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .box_70 {
    width: 90%;
    margin: 0 auto;
  }
  .img-area {
    width: 100%;
    margin: 0 auto;
  }
}
.qa {
  width: 100%;
  text-align: center;
}
.qa img {
  width: 80%;
}
table.table01 {
  width: 80%;
  border-right: #fff solid 2px;
  border-collapse: collapse;
  margin: 0 10%;
}
table.table01 thead th {
  background: #4D9BC1;
  color: #FFF;
  padding: 10px 15px;
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
table.table01 thead th:last-child {
  /* border-right: #b41955 solid 1px;*/
}
table.table01 tbody th {
  background: #4D9BC1;
  color: #FFFFFF;
  padding: 10px 15px;
  vertical-align: top;
  font-weight: 800;
  border-left: #fff solid 2px;
  border-bottom: #fff solid 2px;
}
table.table01 tbody td {
  background: #96d3f0;
  padding: 10px 15px;
  border-top: #fff solid 2px;
  border-left: #fff solid 2px;
  border-bottom: #fff solid 2px;
  vertical-align: top;
}
table.table01 tbody td p {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
table.table02 {
  width: 90%;
  border-right: #000 solid 1px;
  border-collapse: collapse;
  margin: 1rem auto;
}
table.table02 thead th {
  background: #4D9BC1;
  color: #FFF;
  padding: 10px 15px;
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
}
table.table02 thead th:last-child {
  border-bottom: #474545 solid 1px;
}
table.table02 tbody th {
  background: #4D9BC1;
  color: #FFFFFF;
  padding: 10px 15px;
  vertical-align: top;
  font-size: 15px;
  font-weight: 800;
  border-left: #fff solid 1px;
  border-right: #fff solid 1px;
  border-bottom: #fff solid 1px;
}
table.table02 tbody td {
  padding: 10px 15px;
  border-top: #474545 solid 1px;
  border-right: #474545 solid 1px;
  border-left: #474545 solid 1px;
  border-bottom: #474545 solid 1px;
  vertical-align: top;
  font-size: 13px;
}
table.table02 tbody td p {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  table.table02 {
    width: 100%;
  }
}
/* テーブル全体の基本設定 */
table .table03, .table04 {
  border-collapse: separate; /* これが角丸を出すために必須です */
  border-spacing: 0; /* セル同士の隙間を0にします */
  border: 1px solid #ddd; /* 外枠の線（必要に応じて調整） */
  border-radius: 8px; /* テーブル全体の角も丸くする場合 */
  overflow: hidden; /* 中身が角からはみ出さないように */
  width: 100%;
}
table.table03 thead th, .table04 thead th {
  background: #4D9BC1;
  color: #FFF;
  padding: 10px 15px;
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  /*font-size: 15px;*/
  text-align: center;
  font-weight: bold;
}
table.table03 thead th, .table04 thead th:last-child {
  border-bottom: #474545 solid 1px;
}
table.table03 tbody th, .table04 tbody th {
  background: #4D9BC1;
  color: #FFFFFF;
  padding: 9px;
  vertical-align: top;
  /*font-size: 15px;
  font-weight: 800;*/
  border-left: #fff solid 1px;
  border-right: #fff solid 1px;
  border-bottom: #fff solid 5px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
@media screen and (max-width: 600px) {
  table.table03 tbody th, .table04 tbody th {
    padding: 9px;
  }
}
table.table03 tbody td, .table04 tbody td {
  padding: 6px;
  /*border-top: #474545 solid 1px;
  border-right: #474545 solid 1px;
  border-left: #474545 solid 1px;*/
  border-bottom: 1px solid #a19c9c;
  vertical-align: top;
  /*font-size: 13px;*/
}
table.table03 tbody td p, .table04 tbody td p {
  text-align: center;
  /*font-size: 16px;*/
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  table.table03, .table04 {
    width: 100%;
    border-right: none;
  }
  table.table03 tbody th, table.table03 tbody td, .table04 tbody th, table.table04 tbody td {
    font-size: 15px;
  }
  table.table03 tbody th, table.table03 tbody td, .table04 tbody th, table.table04 tbody td {
    display: block;
  }
  table.table03 tbody td, .table04 tbody td {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: #474545 solid 1px;
    vertical-align: none;
  }
}
.table03 .w12 {
  width: 12%;
}
.table03 .w14 {
  width: 14%;
}
.table03 .w15 {
  width: 15%;
}
.table03 .w17 {
  width: 17%;
}
.table03 .w18 {
  width: 18%;
}
.table03 .w27 {
  width: 27%;
}
.table03 .w30 {
  width: 30%;
}
.table03 .w32 {
  width: 32%;
}
.table03 .w33 {
  width: 33%;
}
.table03 .w34 {
  width: 34%;
}
.table03 .w35 {
  width: 35%;
}
.table03 .w36 {
  width: 36%;
}
.table03 .w37 {
  width: 37%;
}
.table03 .w38 {
  width: 38%;
}
.table03 .w39 {
  width: 39%;
}
.table03 .w40 {
  width: 40%;
}
@media screen and (max-width: 600px) {
  .table03 .w12, .table03 .w14, .table03 .w15, .table03 .w17, .table03 .w18, .table03 .w27, .table03 .w14, .table03 .w30, .table03 .w32, .table03 .w33, .table03 .w34, .table03 .w35, .table03 .w36, .table03 .w37, .table03 .w38, .table03 .w39, .table03 .w40 {
    width: 100%;
  }
}
table.table04 {
  width: 100%;
  border-right: #000 solid 1px;
  border-collapse: collapse;
  margin: 1rem auto;
}
table.table04 thead th {
  background: #4D9BC1;
  color: #FFF;
  padding: 10px 15px;
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  /*font-size: 15px;*/
  text-align: center;
  font-weight: bold;
}
table.table04 thead th:last-child {
  border-bottom: #474545 solid 1px;
}
table.table04 tbody th {
  background: #4D9BC1;
  color: #FFFFFF;
  padding: 9px;
  vertical-align: middle;
  /*font-size: 15px;*/
  font-weight: 800;
  border-left: #fff solid 1px;
  border-right: #fff solid 1px;
  border-bottom: #fff solid 1px;
}
@media screen and (max-width: 600px) {
  table.table04 tbody th {
    padding: 9px;
  }
  table.table04 tbody th, table.table04 tbody td {
    font-size: 15px;
  }
}
table.table04 tbody td {
  padding: 6px;
  /*border-top: #474545 solid 1px;
  border-right: #474545 solid 1px;
  border-left: #474545 solid 1px;*/
  border-bottom: 1px solid #777171;
  vertical-align: middle;
  /*font-size: 13px;*/
}
table.table03 tbody td p {
  text-align: center;
  /*font-size: 16px;*/
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  div#wrapper {
    width: 100% !important;
  }
  #headUnit li img {
    width: 100%;
    height: auto;
    margin-left: 0 !important;
  }
  .contents {
    width: 100%;
  }
  .contents h6 {
    width: 95%;
    margin: 0 2.5%
  }
  #foot {
    width: 100% !important;
    margin-top: 5%;
  }
  div#foot {
    font-size: 100%;
  }
  div#pMark {
    margin: 0 5% 5%;
  }
}
@media screen and (max-width: 640px) {
  .main {
    width: 100%;
    margin: 4rem 0 3%;
  }
  .main img {
    width: 100%;
  }
  .main_hn {
    width: 100%;
    margin: 5rem 0 3%;
  }
  .main_hn img {
    width: 100%;
  }
  .contents h5 {
    text-align: left;
    margin: 3% 0;
  }
  .contents h2 {
    width: 90%;
    font-size: 1.4rem;
    color: #ffffff;
    text-align: center;
    background: #0ac2df;
    height: auto;
    padding: 5px;
    margin: 5% auto;
  }
  .contents .intro {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    color: red;
    text-align: left;
    margin: 5% auto;
    width: 90%;
  }
  .contents dl dd {
    margin: 2% auto 2%;
    line-height: 1.5;
  }
  .cp_ttl {
    margin-left: 1% !important;
  }
  table.table01 {
    width: 95%;
    margin: 5% 2.5% !important;
  }
  table.table01 thead {
    display: none;
  }
  table.table01 tbody th {
    /*display: block;*/
  }
  table.table01 tbody th {
    font-size: 1rem;
  }
  table.table01 tbody td {
    /*display: block;*/
    font-size: 1rem;
    vertical-align: middle;
  }
  table.table01 tbody td {
    background: #96d3f0;
    color: #000;
    width: 50%;
  }
  table.table01 tbody td::before {
    content: attr(label);
    float: left;
    clear: both;
    font-weight: bold;
  }
  .ttl {
    margin: 3% 0;
  }
  .qa img {
    width: 100%;
  }
  .box {
    /*width: 90%;
    margin: 5%;*/
    width: 96%;
    margin: 5% auto;
  }
  .box_bblue {
    width: 90%;
    margin: 5%;
  }
  .contents dl {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 3% auto;
  }
  .contents dl dt {
    width: 30%;
    font-size: 15px;
    padding-top: 0.5rem;
    text-align: left;
    padding-bottom: 0.5rem;
    padding-left: 8%;
  }
  .contents dl dd {
    font-size: 15px;
    width: 70%;
    padding-top: 0.5rem;
    text-align: left;
    padding-bottom: 0.5rem
  }
  .contents dl dd p {
    text-indent: -1em;
    padding-left: 1em;
    margin: 0;
  }
  @media(max-width:640px) {
    .contents dl {
      display: block !important;
    }
    .contents dl dt {
      width: 100%;
    }
    .contents dl dd {
      width: 100%;
    }
  }
  .contents ul li {
    /*width: 100%;*/
  }
  .contents ul li img {
    width: 90%;
    margin: 0 5%;
  }
  div#foot {
    padding: 0;
  }
  #fNavi ul {
    margin: 5px;
  }
  .contents ul li {
    font-size: 15px;
    margin-top: .8rem;
    /*text-indent: -.5em;*/
    padding-left: 1em;
  }
}
.red {
  color: red;
}
a.btn_ao {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  color: rgb(0, 0, 0);
  text-decoration: none;
  /*width: 70%;*/
  margin: auto;
  padding: 1rem 4rem;
  font-size: 1.4rem;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-image: initial;
  border-radius: 8px;
  background: #0ac2df;
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn_ao:hover {
  opacity: 0.8;
}
@media(max-width:640px) {
  a.btn_ao {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}
@media(min-width:992px) {
  .pc-none {
    display: none;
  }
}
.box_bkblue {
  width: 80%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ffffff;
  background: #191970;
  padding: 1%;
  margin: 5% 10% 2%;
}
.box_bkblue p {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
}
.hr1 {
  border-top: 2px solid #FFF;
  width: 85%;
  margin: 1% auto;
}
.box_container {
  width: 85%;
  margin: 2% auto 0;
  display: flex;
  flex-wrap: wrap;
}
.item1 {
  flex-basis: 30%;
  padding-left: 14%;
  font-weight: 800;
}
.item2 {
  flex-basis: 55%;
  font-weight: 800;
}
.item3, .item4 {
  margin-top: 10px;
  margin: 1rem auto;
}
.item100 {
  flex-basis: 100%;
  font-weight: 800;
  text-align: center;
}
.item80 {
  flex-basis: 80%;
  font-weight: 800;
  text-align: center;
  margin: 0 auto;
}
.box_container a {
  color: #FFFFFF;
}
@media(max-width:640px) {
  .box_bkblue {
    width: 90%;
    margin: auto;
    padding: 1%
  }
  .box_bkblue p {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .box_container {
    display: block;
  }
  .item1 {
    width: 100%;
    text-align: center;
    padding: 0;
    font-weight: 600;
    font-size: 1.1rem;
  }
  .item2 {
    width: 100%;
    text-align: center;
    padding: 0;
    font-weight: 600;
    font-size: 1.1rem;
  }
  .item3, .item4 {
    widows: 100%;
    padding: 0;
    font-weight: 600;
    font-size: 0.8rem;
  }
  .item80 {
    width: 100%;
    text-align: center;
    padding: 0;
    font-weight: 600;
    font-size: 1.1rem;
  }
}
.lavel {
  position: absolute;
  display: inline-block;
  background-color: #454242;
  padding: 0 1em;
  color: #FFF;
  font-size: 0.8em;
}
.arrow {
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow::before, .arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.ar_r::before {
  left: 2px;
  width: 7px;
  height: 3px;
  background: #7a0;
}
.ar_r::after {
  left: 2px;
  width: 6px;
  height: 6px;
  border-top: 3px solid #7a0;
  border-right: 3px solid #7a0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ar_r-sp::before, .ar_r-sp::after {
  display: none;
}
@media(max-width:640px) {
  .ar_r::before, .ar_r::after {
    display: none;
  }
}
.btn_ur05 {
  width: 100%;
  margin: 5% auto 0;
  text-align: center;
}
.btn_ur05 a {
  font-size: 20px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.5);
}
.btn_ur05 a:hover {
  opacity: 0.8;
}
.btn_ur05 a {
  background: -moz-linear-gradient(top, #ff6600, #ff5500, #ff9900);
  background: -webkit-linear-gradient(top, #ff6600, #ff5500, #ff9900);
  background: linear-gradient(to bottom, #ff6600, #ff5500, #ff9900);
  padding: 1.5% 10%;
  margin: 0 auto;
}
.btn_blue {
  width: 100%;
  margin: 5% auto 0;
  text-align: center;
}
.btn_blue a {
  font-size: 20px;
  font-weight: bold;
  color: blue;
  text-align: center;
  text-decoration: none;
  border: solid 2px;
  border-radius: 30px;
  box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.5);
}
.btn_blue a:hover {
  opacity: 0.8;
  background: blue;
  color: white;
}
.btn_blue a {
  padding: 1.5% 10%;
  margin: 0 auto;
}
.marginbottom_5per {
  margin-bottom: 5%;
}
@media screen and (max-width: 680px) {
  .btn_ur05 a {
    font-size: 13px;
    padding: 2% 1rem;
  }
  .btn_blue a {
    font-size: 13px;
    padding: 2% 1rem;
  }
}
/* flow */
.flow_design {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flow {
  padding-left: 0;
}
.flow > li {
  list-style-type: none;
  position: relative;
  padding-left: 50px;
}
@media(max-width:640px) {
  .flow > li {
    padding-left: 50px;
  }
}
.flow > li:not(:last-child) {
  padding-bottom: 10px;
}
.flow > li .icon {
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 100vh;
  display: inline-block;
  background: #4D9BC1;
  color: #fff;
  position: absolute;
  left: 0;
}
.flow > li:not(:last-child)::before {
  content: '';
  background: #c3c3c3;
  width: 4px;
  height: 100%;
  position: absolute;
  top: calc(50% - -30px);
  left: 19px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.flow > li dl dt {
  font-weight: 600;
  color: #4D9BC1;
}
.flow > li dl dd {
  margin-left: 0;
}
.flow p {
  display: inline-block;
  border: #000000 2px solid;
  margin: 0;
  padding: .5rem;
}
.f_s-blue {
  color: #4D9BC1;
  font-weight: bold;
}
.f_s-red {
  color: #ff0000;
  font-weight: bold;
  font-size: 2rem;
}
/* btn */
a.btn_orange {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 70%;
  margin: auto;
  padding: 1rem 4rem;
  font-size: 1.4rem;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-image: initial;
  background: #ff8c00;
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn_orange:hover {
  color: #fff;
  background: #ffad5b;
}
@media(max-width:640px) {
  a.btn_orange {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}
a.btn_app {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 70%;
  margin: auto;
  padding: 1rem 4rem;
  font-size: 1.4rem;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-image: initial;
  background: #4D9BC1;
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
a.btn_app:hover {
  opacity: 0.7;
}
@media(max-width:640px) {
  a.btn_app {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}
/* btn */
.tourbrand {
  display: flex;
}
.tourbrand .item {
  flex: 1;
}
.tourbrand .item p {
  text-align: center;
  font-size: 1rem;
}
@media(max-width:640px) {
  .tourbrand {
    flex-direction: column;
    text-align: center;
  }
}
.tourbrand .item a.btn_hp {
  display: block;
  text-align: center;
  vertical-align: middle;
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 70%;
  margin: auto;
  padding: 0.5rem;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-image: initial;
  background: #000;
  color: #fff;
  border-radius: 1vh;
  transition: 0.5s;
  font-size: 0.8rem;
}
.caret-right {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.375em 0.64952em;
  border-left-color: currentColor;
  border-right: 0;
  padding-right: 0.5rem;
}
@media(max-width:640px) {
  .tourbrand .item a.btn_hp {
    padding: 1rem;
  }
  .tourbrand .item img {
    width: 80%;
  }
  .flow > li:not(:last-child)::before {
    display: none;
  }
}
.tourbrand .item a.btn_hp:hover {
  opacity: 0.7;
}
.tourbrand .item a.btn_other {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 70%;
  margin: 1% auto;
  padding: 1rem;
  font-weight: bold;
  background: #4D9BC1;
  color: #fff;
  border-radius: 4vh;
  transition: 0.5s;
  font-size: 1rem;
  border: 2px solid #4D9BC1;
}
.tourbrand .item a.btn_other:hover {
  /*background: #fff;
  color: #4D9BC1;*/
  opacity: 0.7;
}
.tourbrand .item a.btn_pink {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 70%;
  margin: 1% auto;
  padding: 1rem;
  font-weight: bold;
  background: #fb3584;
  color: #fff;
  border-radius: 4vh;
  transition: 0.5s;
  font-size: 1rem;
  border: 2px solid #fb3584;
}
.tourbrand .item a.btn_pink:hover {
  /*background: #fff;
  color: #4D9BC1;*/
  opacity: 0.7;
}
.tourbrand .item a.btn_sblue {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 70%;
  margin: 1% auto;
  padding: 1rem;
  font-weight: bold;
  background: #00bfff;
  color: #fff;
  border-radius: 4vh;
  transition: 0.5s;
  font-size: 1rem;
  border: 2px solid #00bfff;
}
.tourbrand .item a.btn_sblue:hover {
  /*background: #fff;
  color: #4D9BC1;*/
  opacity: 0.7;
}
.no-hover {
  pointer-events: none;
}
.jikan {
  margin: 0 auto;
  padding: 15px;
  font-size: 1.5rem;
  line-height: 1;
  border: solid 5px #00496c;
  position: relative;
  text-align: center;
  width: 50%;
}
.right {
  text-align: right;
}
@media(max-width:640px) {
  .right {
    text-align: left;
  }
}
@media(max-width:640px) {
  .jikan {
    width: 90%;
    padding: 5px 0;
    font-size: 1.2rem;
    font-weight: 700;
  }
}
.info-content .info-contentbox {
  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: center;
  margin-top: 1rem;
}
.info-content .productbtn {
  margin-top: auto;
}
.info-content .productbtn a {
  display: block;
  width: 50%;
  background: #4D9BC1;
  filter: drop-shadow(0px 2px 4px #ccc);
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  color: #fff;
  line-height: 30px;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  margin: 15px 25%;
}
.Product .productbtn a:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.info-content .productbtn-a {
  margin-top: auto;
}
.info-content .productbtn-a a {
  display: block;
  width: 50%;
  background: #125f85;
  filter: drop-shadow(0px 2px 4px #ccc);
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  color: #fff;
  line-height: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  margin: 15px 25%;
  padding: .7rem;
}
@media(max-width:640px) {
  .info-content .productbtn-a a {
    width: 80%;
    margin: 0 auto;
    font-size: 1.2rem;
  }
}
.Product .productbtn-a a:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.info-content .productbtn-b {
  margin-top: auto;
}
.info-content .productbtn-b a {
  display: block;
  width: 80%;
  background: #125f85;
  filter: drop-shadow(0px 2px 4px #ccc);
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  color: #fff;
  line-height: 30px;
  font-size: .8rem;
  font-weight: bold;
  text-align: center;
  margin: 15px 0;
  padding: .7rem;
}
@media(max-width:640px) {
  .info-content .productbtn-b a {
    width: 80%;
    margin: 0 auto;  
    }
}
.Product .productbtn-b a:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.info-content .box dl {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  /*margin: 3% auto;*/
  font-size: 1.1rem;
}
.info-content .box dl dt {
  width: 20%;
  padding-top: 0.5rem;
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 1.35rem;
}
.info-content .box dl dd {
  width: 80%;
  padding-top: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #FFFFFF;
  padding-bottom: 0.5rem;
  font-size: 1.35rem;
}
@media(max-width:640px) {
  .info-content .info-contentbox {
    display: block;
  }
  .info-content .box dl {
    display: block;
  }
  .info-content .box dl dt {
    width: 100%;
    padding-bottom: 0;
    font-size: 15px;
  }
  .info-content .box dl dd {
    width: 100%;
    padding-top: 0;
    font-size: 15px;
  }
}
.info-content .item3 {
  background: #fff;
  /* padding: 15px; */
  width: 32%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  /*border: 1px solid #333;*/
  text-decoration: none;
  margin-bottom: 2%;
  /*margin-right: 1%;*/
}
.info-content .item3 img {
  width: 100%;
}
.info-content .item3 .ttl {
  font-size: 1rem;
  line-height: 1.5;
  width: 99%;
  margin: 0 auto;
}
.info-content .item3 .price {
  font-size: 0.8rem;
  text-align: left;
  margin: 5% 0 2%;
}
.info-content .item3 .price span {
  font-size: 1rem;
  font-weight: bold;
  color: red;
}
.info-content .item3 .date {
  font-size: .9rem;
  font-weight: 700;
  margin: 2% 0;
}
.info-content .item3 .txt {
  font-size: .8rem;
  margin-left: 0 !important;
}
.info-content .item4 {
  background: #fff;
  /* padding: 15px; */
  width: 23%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  /*border: 1px solid #333;*/
  text-decoration: none;
  margin-bottom: 2%;
  /*margin-right: 1%;*/
}
.info-content .item4 img {
  width: 100%;
}
.info-content .item4 .ttl {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
  padding: 0 .2rem;
  width: 100%;
}
.info-content .item4 .price {
  font-size: 0.7rem;
  margin-top: auto;
}
.info-content .item4 .price span {
  font-size: 1.7rem;
  font-weight: bold;
  color: red;
}
.info-content .item4 .date {
  font-size: .7rem;
  font-weight: 700;
}
@media(max-width:640px) {
  .info-content .item4 .date {
    font-size: .87rem;
    font-weight: 700;
  }
}
@media(max-width:640px) {
  .info-content .item3 {
    display: block;
  }
  .info-content .item3 {
    width: 100%;
    font-size: 15px;
  }
  .info-content .item3 {
    width: 90%;
  }
  .info-content .item4 {
    display: block;
  }
  .info-content .item4 {
    width: 100%;
    font-size: 15px;
  }
  .info-content .item4 {
    width: 90%;
  }
}
/*grid使ったproductここから*/
/* 親要素にdisplay: grid; を適用 */
.product-grid-container {
  display: grid;
  /* カラムの設定例: レスポンシブに250px以上の幅で、可能な限り列を配置し、余ったスペースを均等に分配 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* グリッドアイテム間の余白 */
  padding: 10px; /* コンテナの内側の余白 */
}

/* 各商品アイテム（グリッドアイテム）のスタイル */
.product-item {
  background-color: #f8f8f8; /* 背景色 */
  border: 1px solid #ddd; /* ボーダー */
  padding: 15px; /* 内側の余白 */
  display: flex; /* アイテム内部のコンテンツもFlexboxで配置 */
  flex-direction: column; /* 垂直方向に並べる */
  /* デフォルトでグリッドアイテムは高さを揃えますが、
     内部コンテンツで高さを調整したい場合はflex-growなどを活用します */
}

/* アイテム内部のコンテンツで高さを調整する場合 */
.product-item h3 {
  /* タイトルのスタイル */
}

.product-item p {
  /* テキストのスタイル */
  margin-bottom: 10px;
}

.product-item a {
  margin-top: auto; /* 他のコンテンツが伸びてもボタンが常に下部に揃うようにする */
  align-self: flex-start; /* ボタンを左寄せにする場合 */
  /* または align-self: center; で中央寄せ、align-self: stretch; で幅いっぱいに伸ばす */
}
/*grid使ったproductここまで*/
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/
.header {
  width: 100%;
}
.headerbar {
  background: #fff;
  color: #555f66;
  height: 8rem;
  left: 0;
  line-height: 3em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.25);
  padding: 5px 0;
  margin: 0;
}
.logo h1 a img {
  width: 100%;
}
.headerbar ul {
  display: flex;
  width: 80%;
  margin: 0 auto;
  list-style-type: none;
  justify-content: space-around;
}
.headerbar ul li img {
  width: 80%;
}
.header_ttl img {
  margin-left: 30%;
}
.header_tel img {
  width: 80%;
  margin-left: 35%;
  padding-top: 2%;
}
.header_mail img {
  width: 80% !important;
  margin-left: 25%;
  padding-top: 2%;
}
@media screen and (max-width:1024px) {
  .headerbar {
    padding: 1.5% 0;
  }
}
@media screen and (max-width:768px) {
  .headerbar {
    height: 3.5rem;
    /*  display: none;*/
  }
}
@media screen and (max-width:600px) {
  .headerbar {
    height: 3.5rem;
    /* display: none;*/
  }
  .headerbar ul {
    width: 95%;
    margin: 0 auto;
  }
  .logo {
    width: 20%;
  }
  .header_ttl {
    width: 25%;
  }
  .headerbar ul li img {
    /* width: 100%;*/
  }
  .logo, .header_tel, .header_mail {
    /*display: none;*/
  }
  .header_tel img {
    max-width: 100% !important;
    margin: 0 auto;
    padding-top: 0;
  }
}
.headerbar-info {
  background: #fff;
  color: #555f66;
  height: 8rem;
  left: 0;
  line-height: 3em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.25);
  padding: 5px 0;
  margin: 0;
}
.headerbar-info ul {
  display: flex;
  width: 80%;
  margin: 0 auto;
  list-style-type: none;
  justify-content: space-around;
}
.headerbar-info ul li img {
  width: 80%;
}
@media screen and (max-width:1024px) {
  .headerbar-info {
    padding: 2.5% 0;
  }
}
@media screen and (max-width:768px) {
  .headerbar-info {
    height: 4.5rem;
    /*  display: none;*/
  }
}
@media screen and (max-width:600px) {
  .headerbar-info {
    height: 4.5rem;
    /* display: none;*/
  }
}
/*================================================
 *  グローバルナビゲーション
 ================================================*/
menu, nav {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
}
menu, nav {
  display: block
}
nav {
  width: 100%;
  /*background: #fff;*/
  /*box-shadow: 0 1px 2px #d0d8dc;*/
  ⁄zoom: 1;
}
nav:after {
  content: '';
  display: block;
  clear: both;
}
@media print, screen and (min-width:768px) {
  nav {
    /* box-shadow: 0 1px 3px #999;*/
    z-index: 3;
    width: 100%;
    margin: auto;
  }
  /* 共通 */
  nav ul {
    margin: 0;
    padding: 0;
  }
  nav ul li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav ul li a, nav ul li a.on {
    display: block;
    margin: 0;
    padding: 20px 0 10px 0;
    background: #007bbb;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    height: 30px;
  }
  nav.black ul li a, nav.black ul li a.on {
    background: #000;
    color: #fff;
  }
  nav.gray ul li a, nav.gray ul li a.on {
    background: #0ac2df;
    color: #ffffff;
  }
  nav.red ul li a, nav.red ul li a.on {
    background: #ea5550;
    color: #FFFFFF;
  }
  nav.brown ul li a, nav.red ul li a.on {
    background: #946243;
    color: #FFFFFF;
  }
  nav.navy ul li a, nav.red ul li a.on {
    background: #19448e;
    color: #FFFFFF;
  }
  nav.skyblue ul li a, nav.skyblue ul li a.on {
    background: #87cefa;
    color: #000080;
  }
  nav ul li:hover > a {
    color: #fff;
    background: #006eb0;
  }
  nav.black ul li:hover > a {
    color: #fff;
    background: #333333;
  }
  nav.gray ul li:hover > a {
    color: #0ac2df;
    background: #fff;
  }
  nav.red ul li:hover > a {
    color: #fff;
    background: #cc4a45;
  }
  nav.brown ul li:hover > a {
    color: #fff;
    background: #66432e;
  }
  nav.navy ul li:hover > a {
    color: #fff;
    background: #223a70;
  }
  nav.skyblue ul li:hover > a {
    color: #191970;
    background: #00bfff;
  }
  /* 1段目 */
  nav ul.gnav > li {
    position: relative;
    width: 14%;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
  }
  nav ul.gnav > li.subnav a {
    padding-right: 20px;
  }
  nav ul.gnav > li.subnav > a:after {
    position: absolute;
    content: "";
    top: 20px;
    width: 0;
    height: 0;
    margin-left: 10px;
    border: 5px solid transparent;
    border-top-color: #fff;
  }
  /* 2段目 */
  nav ul li ul {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  nav ul li ul li {
    overflow: hidden;
    width: 150%;
    height: 0;
    color: #fff;
    transition: .2s;
  }
  nav ul li ul li a {
    padding: 13px 15px;
    text-align: left;
    background: #7c0c0c;
    font-weight: normal;
  }
  nav ul li:hover > ul > li {
    overflow: visible;
    height: 40px;
    border-bottom: 1px solid #505050;
  }
  nav ul li:hover ul li:last-child {
    border-bottom: none;
  }
  nav ul.gnav > li:last-child > ul {
    left: -50%;
  }
  nav ul li ul li ul:before {
    position: absolute;
    content: "";
    top: 13px;
    left: -20px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #fff;
  }
  nav ul.gnav > li:last-child ul li ul:before {
    position: absolute;
    content: "";
    top: 13px;
    left: 200%;
    margin-left: -20px;
    border: 5px solid transparent;
    border-right-color: #fff;
  }
  .gnav {
    display: block !important;
  }
  .gnav_fes {
    margin: 1% 0;
  }
  .gnav_fes li {
    border: 1px solid #FFF;
    padding: 0 1rem;
    width: 16% !important;
  }
  #spMenu {
    display: none;
  }
  .flexnav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .fnav {
    flex: 1;
    margin: 0 3px;
    text-align: center;
  }
}
@media screen and (max-width:767px) {
  .lock {
    overflow: hidden;
  }
  header {
    z-index: 2;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  #main {
    float: none;
    width: 100%;
  }
  #sub {
    float: none;
    width: 100%;
  }
  nav {
    background: #737373;
  }
  nav ul {
    margin: 0;
    padding: 0;
  }
  nav .inner > ul {
    z-index: 2;
    overflow: auto;
    position: fixed;
    top: 53px;
    right: 0;
    width: 100%;
    height: 88%;
    height: -webkit-calc(100% - 53px);
    height: calc(100% - 53px);
  }
  nav li {
    position: relative;
    width: 100%;
    float: none;
    margin: 0;
    text-align: left;
    list-style: none;
    border-bottom: 1px solid #505050;
    background: #737373;
  }
  nav li:first-child {
    border-top: 0;
  }
  nav li:last-child {
    border-bottom: 0;
  }
  nav li a {
    display: block;
    padding: 10px 30px;
    color: #fff;
    text-decoration: none;
    background: #505050;
  }
  nav li a:hover {
    color: #fff;
    background: #737373;
  }
  nav ul ul {
    display: none;
    position: relative;
  }
  nav li li a {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 30px 10px 50px;
    text-align: left;
  }
  nav li li li a {
    padding: 10px 30px 10px 70px;
  }
  .subnav > a:before {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 20px;
    right: 30px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: #f1f1f1;
  }
  .subnav > a:after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 20px;
    right: 30px;
    width: 10px;
    height: 10px;
    margin-top: -10px;
    background: #505050;
  }
  .subnav a:hover:after {
    background: #737373;
  }
  .active > a:before {
    margin-top: 0;
  }
  .active > a:after {
    margin-top: 5px;
  }
  .gnav {
    display: none;
  }
  #spMenu {
    display: block;
    z-index: 2;
    position: fixed;
    top: 0;
    right: 10px;
  }
  #spMenu:hover {
    cursor: pointer;
  }
  #navBtn {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 5%;
    background: #737373;
  }
  #navBtnIcon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: #f1f1f1;
    transition: .2s;
  }
  #navBtnIcon:before, #navBtnIcon:before, #navBtnIcon:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 2px;
    background: #f1f1f1;
    transition: 0.3s;
  }
  #navBtnIcon:before {
    margin-top: -6px;
  }
  #navBtnIcon:after {
    margin-top: 4px;
  }
  #navBtn .close {
    background: transparent;
  }
  #navBtn .close:before, #navBtn .close:after {
    margin-top: 0;
  }
  #navBtn .close:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  #navBtn .close:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  .col_two_one ul {
    margin-right: 0;
  }
  .col_two_one li {
    width: 100%;
  }
  .col_two_one li:nth-child(2n+1) {
    clear: both;
  }
  .hight0 {
    height: 120px !important;
    margin-bottom: 0% !important;
  }
  .scroll {
    overflow: auto;
    white-space: nowrap;
  }
  .flexnav {
    flex-direction: column;
  }
}
/*商品メニューここから================*/
.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.menu-list .menu {
  box-sizing: border-box;
  padding: .9rem .5rem;
}
.menu-list .menu a {
  background: #fff;
  color: #333;
}
.menu-list .menu a:hover {
  color: #fff;
  font-weight: bold;
  background: #333;
  padding: .9rem .5rem;
  border-radius: 6px;
  transition: .3s;
}
/*商品メニューここまで================*/
/*=================================
ページトップ スクロール
==================================*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 25px;
  z-index: 1;
}
#page-top a {
  display: block;
  text-decoration: none;
}
#page-top a:hover {
  text-decoration: none;
}
@media screen and (max-width: 600px) {
  #page-top {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 1;
  }
  #page-top a {
    display: block;
    text-decoration: none;
  }
  #page-top a:hover {
    text-decoration: none;
  }
  #page-top a img {
    width: 60%;
  }
}
/*アコーディオンここから===========================*/
.toggle {
  display: none;
}
.Label { /*タイトル*/
  padding: .5rem;
  display: block;
  color: #fff;
  background: #019ac6;
  border-radius: 10px;
}
.Label::before { /*タイトル横の矢印*/
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 3px);
  right: 20px;
  transform: rotate(135deg);
}
.Label, .content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
.content { /*本文*/
  height: 0;
  margin-bottom: 10px;
  padding: 0 20px;
  overflow: hidden;
}
.toggle:checked + .Label + .content { /*開閉時*/
  height: auto;
  padding: 20px;
  transition: all .3s;
}
.toggle:checked + .Label::before {
  transform: rotate(-45deg) !important;
}
/*アコーディオンここまで===========================*/
/*スクロールここから===================================*/
#scroll_box1 {
  width: 80%;
  height: 260px;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0 2%;
  /* margin-bottom: 5%; */
  margin: 0 auto;
}
.step-list {
  max-width: 800px;
  margin: 0 auto;
}
/* セットごとの設定 */
.step-set {
  display: flex; /* dtとddを横並びにする */
  align-items: center; /* 上下中央揃え */
  padding: 10px 0;
  /*border-bottom: 1px solid #eee;  区切り線 */
}
/* 左側（Stepタイトル） */
.step-set dt {
  flex: 0 0 100px; /* 幅を100pxに固定（伸び縮みさせない） */
  font-weight: bold;
  color: #e60012;
  background: #fff3f3;
  text-align: center;
  padding: 5px 10px;
  border-radius: 4px;
  margin-right: 20px;
}
/* 右側（説明文） */
.step-set dd {
  flex: 1; /* 残りの幅をすべて使う */
  margin: 0; /* デフォルトの余白を消す */
  color: #333;
  line-height: 1.6;
}
/* スマホ対応 */
@media screen and (max-width: 600px) {
  .step-set {
    flex-direction: column; /* 縦並びに切り替え */
    align-items: flex-start;
  }
  .step-set dt {
    margin-bottom: 10px;
  }
}
/*スクロールここまで===================================*/
.jikan {
  margin: 0 auto;
  padding: 15px;
  font-size: 1.5rem;
  line-height: 1;
  border: solid 5px #00496c;
  position: relative;
  text-align: center;
  width: 50%;
}
.info-content .info-contentbox {
  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: center;
  margin-top: 1rem;
}
.info-content .box dl {
  display: flex;
  flex-wrap: wrap;
  width: 93%;
  /*margin: 3% auto;*/
  /*font-size: 1.1rem;*/
}
.info-content .box dl dt {
  width: 20%;
  padding: 0.5rem;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 800;
  background: #def4ff;
  color: #4D9BC1;
  margin-top: 1%;
}
.info-content .box dl dd {
  width: 76%;
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #FFFFFF;
  font-size: 1.35rem;
  margin-top: 1%;
}
@media(max-width:640px) {
  .info-content .info-contentbox {
    display: block;
  }
  .info-content .box dl, .info-content {
    display: block;
  }
  .info-content .box dl dt, .info-content {
    width: 100%;
    font-size: 15px;
  }
  .info-content .box dl dd {
    width: 100%;
    padding-top: 0;
    font-size: 15px;
  }
}
.info-content .item3 {
  background: #fff;
  /* padding: 15px; */
  width: 24%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  /*border: 1px solid #333;*/
  text-decoration: none;
  margin-bottom: 2%;
  /*margin-right: 1%;*/
}
.info-content .item3 img {
  width: 100%;
}
@media(max-width:640px) {
  .info-content .item3 {
    display: block;
  }
  .info-content .item3 {
    width: 100%;
    font-size: 15px;
  }
  .info-content .item3 {
    width: 90%;
  }
}
.info-content .item30 {
  background: #fff;
  /* padding: 15px; */
  width: 32%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  /*border: 1px solid #333;*/
  text-decoration: none;
  margin-bottom: 2%;
  /*margin-right: 1%;*/
}
.info-content .item30 img {
  width: 100%;
}
.info-content .item30 .ttl {
  font-size: 1rem;
  line-height: 1.5;
  width: 99%;
  margin: 0 auto;
}
.info-content .item30 .price {
  font-size: 0.8rem;
  text-align: left;
  margin: 5% 0 2%;
}
.info-content .item30 .price span {
  font-size: 1rem;
  font-weight: bold;
  color: red;
}
.info-content .item30 .date {
  font-size: .9rem;
  font-weight: 700;
  margin: 2% 0;
}
.info-content .item30 .txt {
  font-size: .8rem;
  margin-left: 0 !important;
}
.info-content .item30 img {
  width: 100%;
}
@media(max-width:640px) {
  .info-content .item30 {
    display: block;
  }
  .info-content .item30 {
    width: 100%;
    font-size: 15px;
  }
  .info-content .item30 {
    width: 100%;
  }
}
.info-content .item30_a {
  background: #fff;
  /* padding: 15px; */
  width: 32%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  /*border: 1px solid #333;*/
  text-decoration: none;
  margin-bottom: 2%;
  /*margin-right: 1%;*/
    margin: 1rem auto;
}
.info-content .item30_a img {
  width: 100%;
}
.info-content .item30_a .ttl {
  font-size: 1rem;
  line-height: 1.5;
  width: 99%;
  margin: 0 auto;
}
.info-content .item30_a .price {
  font-size: 0.8rem;
  text-align: left;
  margin: 5% 0 2%;
}
.info-content .item30_a .price span {
  font-size: 1rem;
  font-weight: bold;
  color: red;
}
.info-content .item30_a .date {
  font-size: .9rem;
  font-weight: 700;
  margin: 2% 0;
}
.info-content .item30_a .txt {
  font-size: .8rem;
  margin-left: 0 !important;
}
@media(max-width:640px) {
  .info-content .item30_a {
    display: block;
  }
  .info-content .item30_a {
    width: 100%;
    font-size: 15px;
  }
  .info-content .item30_a {
    width: 90%;
  }
}

.img-tag {
  position: relative;
}
.img-tag p {
  position: absolute;
  color: #fff;
  font-size: 1.1rem;
  top: 0;
  left: 0;
  background: #ff0000;
  padding: 0.3rem 0.5rem;
  margin: 0;
}
.autumn {
  background-color: rgba(220, 176, 0, 0.42);
}
/*boxここから*/
.box_bred {
  width: 70%;
  margin: 0 auto;
  padding: 0 3% 3%;
  border: red solid 2px;
}
@media(max-width:640px) {
  .box_bred {
    width: 95%;
    margin: 0 auto;
    padding: 0 3% 3%;
    border: red solid 2px;
  }
}
/*boxここまで*/
/* 商品ここから ===================================*/
/* 外側のコンテナ */
.loadcontents-wrap {
  width: 100%;
  margin: 0 auto;
}
.loadcontents-wrap p {
  margin: 0;
}
.tour-list {
  list-style: none;
  padding: 0;
}
.tour-list a {
  text-decoration: none;
}
/* 各カードのスタイル */
.tour-item {
  display: flex;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
}
.tour-item:hover {
  /*transform: translateY(-2px);*/
  transform: translateY(-10px); /* 浮き上がるエフェクト */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* 左側：画像エリア */
.tour-image-box {
  position: relative;
  width: 200px; /* 固定幅 */
  flex-shrink: 0;
}
.tour-image-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* 王冠バッジ */
.rank-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
}
/* 右側：詳細エリア */
.tour-details {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.tour-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #333;
}
.tour-catch {
  font-size: 14px;
  color: #666;
  margin-bottom: auto; /* 下部の要素を一番下に押し下げる */
}
/* 下部の行（空港と価格） */
.tour-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 15px;
}
.airport-tag {
  background: #f2f2f2;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 15px;
  color: #333;
}
.price-range {
  color: #e60012; /* HISらしい赤色 */
  font-size: 1.1rem;
  font-weight: bold;
}
.img-tag__right {
  position: relative;
}
.img-tag__right p {
  position: absolute;
  color: #fff;
  font-size: .7rem;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.3rem 0.5rem;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .tour-item {
    flex-direction: column; /* 縦並びに変更 */
    padding-left: 0 !important;
  }
  .tour-image-box {
    width: 100%;
    height: auto;
  }
  .tour-image-box img {
    height: 100%;
  }
  .tour-details {
    padding: 15px;
  }
  .tour-title {
    font-size: 16px; /* 文字を少し小さくして読みやすく */
  }
  .tour-bottom {
    flex-direction: column; /* 下部のタグと価格も縦並びに */
    align-items: flex-start; /* 左寄せにする */
    gap: 10px; /* タグと価格の間に隙間を作る */
  }
  .price-range {
    font-size: 20px; /* 価格の文字サイズを調整 */
    align-self: flex-end; /* 価格だけ右寄せにしたい場合はこれ */
  }
}
/* 商品ここまで ===================================*/
/* 注意ここから ===================================*/
.campaign-notice {
  background-color: #fff;
  border-left: 5px solid #ff0000; /* 左側に赤いアクセントライン */
  border-right: 5px solid #ff0000; /* 右側に赤いアクセントライン */
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 30px;
  margin: 20px auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ほんの少しの影 */
  border-radius: 0 8px 8px 0;
  width: 80%;
}
.notice-text {
  color: #444;
  margin-bottom: 15px;
}
.notice-highlight {
  /* display: inline-block; */
  background-color: #fff3f3;
  color: #d32f2f;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-align: center;
}
.notice-highlight strong {
  font-weight: 700;
}
/* スマホ対応 */
@media screen and (max-width: 768px) {
  .campaign-notice {
    padding: 20px;
  }
  .notice-highlight {
    font-size: 1rem;
    display: block; /* スマホでは幅いっぱいに */
  }
}
/* 注意ここまで ===================================*/
/* 対象外商品ここから ===================================*/
.exclusion-box {
  /*max-width: 800px;*/
  margin: 20px auto;
  background: #fff;
  border: 2px solid #ffeded; /* 薄い赤の枠線 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}
/* ヘッダー部分 */
.exclusion-header {
  background: #fffafa; /* ごく薄い赤 */
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);
  background-size: 10px 10px; /* さりげないストライプ */
  padding: 20px;
  border-bottom: 2px solid #ffeded;
  display: flex;
  align-items: center;
  gap: 10px;
}
.exclusion-header h2 {
  margin: 0;
  color: #d32f2f;
  font-size: 1.25rem;
  font-weight: bold;
  background: none;
}
.warning-icon {
  font-size: 1.4rem;
}
/* リスト部分 */
.exclusion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.exclusion-list li {
  padding: 5px 20px 5px 45px;
  border-bottom: 1px solid #f9f9f9;
  position: relative;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* リストの先頭アイコン（・） */
.exclusion-list li::before {
  content: "・";
  position: absolute;
  left: 20px;
  color: #d32f2f;
  font-weight: bold;
}
.exclusion-list li small {
  display: block;
  color: #888;
  font-size: 0.85rem;
  margin-top: 2px;
}
/* 特に重要な下2行 */
.exclusion-list li.important-item {
 /* background-color: #fff3f3;*/
  /*color: #d32f2f;*/
  font-weight: bold;
}
.exclusion-list li.important-item::before {
  content: "×"; /* できないことを強調 */
  left: 22px;
}
.exclusion-list li:last-child {
  border-bottom: none;
}
/* スマホ対応 */
@media (max-width: 600px) {
  .exclusion-box {
    margin: 10px;
  }
  .exclusion-list li {
    font-size: 0.9rem;
    padding-left: 35px;
  }
  .exclusion-list li::before {
    left: 15px;
  }
}
/* 対象外商品ここまで ===================================*/
/* ブランドここから ===================================*/
/* 全体コンテナ */
.TourBrandSection {
  padding: 60px 20px;
  /*background-color: #f9f9f9;
    font-family: "Helvetica Neue", Arial, sans-serif;*/
}
.Container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.MainTitle {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.SubTitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}
/* グリッドレイアウト */
.BrandGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
/* 個別カード */
.BrandCard {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.BrandCard:hover {
  transform: translateY(-10px); /* 浮き上がるエフェクト */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* 画像部分 */
.BrandImage {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.BrandImage img {
  width: 80%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.BrandCard:hover .BrandImage img {
  transform: scale(1.1); /* ズームエフェクト */
}
/* コンテンツ部分 */
.BrandContent {
  padding: 0 25px 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.BrandLogo {
  /*font-size: 1rem;*/
  font-weight: 800;
  color: #007bff;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.BrandText {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}
/* ボタン */
.BrandBtn {
  margin-top: auto;
    display: inline-block;
    padding: 5px;
    border: 2px solid #007bff;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 20px;
    font-size: .8rem;
    transition: all 0.3s;
}
.BrandBtn:hover {
  background: #007bff;
  color: #fff;
}
/* レスポンシブ対応 */
@media (max-width: 900px) {
  .BrandGrid {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
  }
}
@media (max-width: 600px) {
  .BrandGrid {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
  .MainTitle {
    font-size: 24px;
  }
}
/* ブランドここまで ===================================*/