@charset "UTF-8";
@import url(./common.css);
/*==================================================================*/
/* style css　*/
/*==================================================================*/
/* -------------------------------------------- */
/* titlearea */
/* -------------------------------------------- */
.titlearea {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4em;
}
.titlearea .detail {
  width: calc(100% - 577px);
  padding-right: 2em;
}
.titlearea .detail .title {
  padding-top: 2em;
}
.titlearea .detail .title dl {
  margin-bottom: 2em;
}
.titlearea .detail .title dl dt {
  margin-bottom: .5em;
  font-size: 1.25em;
}
.titlearea .detail .read {
  margin-bottom: 2em;
}
.titlearea .photo {
  width: 577px;
}

/* -------------------------------------------- */
/* information */
/* -------------------------------------------- */
.information {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4em;
}
.information .block {
  width: 48%;
}
.information .block h2 {
  margin-bottom: 1em;
  padding: .4em 1em;
  background-color: #e8eff9;
  font-size: 1.1em;
}
.information .block h2:before {
  margin-right: .2em;
  font-family: FontAwesome;
}
.information .block p {
  padding: 0 .5em;
}
.information .block p:not(:last-of-type) {
  margin-bottom: 1em;
}
.information .block p span {
  color: #a80000;
  font-weight: bold;
}
.information .block ul {
  width: 97%;
  margin: 0 auto 1em;
  padding: 1em 1em 1em 1.5em;
  border: 1px dashed #000;
}
.information .block ul li {
  position: relative;
  padding-left: 1em;
}
.information .block ul li:before {
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}
.information .block .bikou {
  font-size: .9em;
  letter-spacing: normal;
}
.information .block.caution h2:before {
  content: "\f06a";
}
.information .block.point h2:before {
  content: "\f164";
}

/* -------------------------------------------- */
/* box */
/* -------------------------------------------- */
.box {
  margin-bottom: 6em;
}
.box h2 {
  position: relative;
  margin-bottom: 1.3em;
  padding-bottom: .2em;
  padding-left: 1em;
  border-bottom: 1px solid #061834;
  font-size: 2.1em;
  font-weight: normal;
}
.box h2:before {
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  left: 10px;
  content: "";
  width: 5px;
  height: 80%;
  background-color: #061834;
}
.box.flow .step {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5em;
}
.box.flow .step dl {
  display: flex;
  padding: .7em 1.5em .6em;
  justify-content: center;
  background-color: #f2f2f2;
}
.box.flow .step dl dt {
  margin-right: 1em;
  font-size: 1.1em;
  font-weight: bold;
}
.box.flow .step dl:not(:last-of-type) {
  position: relative;
  margin-right: 2em;
}
.box.flow .step dl:not(:last-of-type):after {
  position: absolute;
  top: 50%;
  right: -19px;
  transform: translateY(-50%);
  content: "\f101";
  font-size: 1.1em;
  font-family: FontAwesome;
}
.box.flow .bikou {
  margin-bottom: 1em;
}
.box.flow .bikou ol li {
  margin-left: 2em;
  list-style-type: decimal;
}
.box.flow .bikou ol li strong {
  color: #a80000;
  font-weight: bold;
}
.box.flow .btn {
  text-align: right;
}
.box.flow .btn a {
  display: inline-block;
  padding: .7em 5em;
  background-color: #061834;
  color: #fff;
}
.box.flow .btn a:before {
  transform: translateY(-50%);
  content: "\f105";
  margin-right: 1em;
  font-size: 1em;
  color: #fff;
  font-family: FontAwesome;
}
.box.flow .btn a:hover {
  text-decoration: none;
}
.box.price p {
  width: 98%;
  margin: 0 auto 2em;
}
.box.price table {
  width: 98%;
  margin: 0 auto 2em;
  border-collapse: collapse;
}
.box.price table th, .box.price table td {
  padding: .5em;
  border: 1px solid #e5e5e5;
  vertical-align: middle;
}
.box.price table thead tr th {
  background-color: #2c6371;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
}
.box.price table thead tr th:nth-of-type(1) {
  width: 10%;
}
.box.price table thead tr th:nth-of-type(2) {
  width: 30%;
}
.box.price table thead tr th:nth-of-type(3) {
  width: 15%;
}
.box.price table thead tr th:nth-of-type(4) {
  width: 15%;
}
.box.price table thead tr th:nth-of-type(5) {
  width: 15%;
}
.box.price table thead tr th:nth-of-type(6) {
  width: 15%;
}
.box.price table tbody tr th {
  background-color: #f2f2f2;
}
.box.price table tbody tr td:nth-of-type(2) {
  text-align: center;
}
.box.price table tbody tr td:nth-of-type(3) {
  text-align: center;
}
.box.price table tbody tr td:nth-of-type(4), .box.price table tbody tr td:nth-of-type(5) {
  text-align: right;
}
.box.price table tbody tr td a {
  text-decoration: underline;
}
.box.price table tbody tr td a:hover {
  text-decoration: none;
}
.box.price .btn {
  text-align: right;
}
.box.price .btn a {
  display: inline-block;
  padding: 1em 3.5em;
  border: 3px solid #a40000;
  color: #a40000;
  font-size: 1.3em;
}
.box.price .btn a:before {
  content: "\f105";
  margin-right: 1em;
  font-size: .8em;
  color: #a40000;
  font-family: FontAwesome;
}
.box.price .btn a:hover {
  text-decoration: none;
}

/* -------------------------------------------- */
/* category-area */
/* -------------------------------------------- */
.category-search {
  display: flex;
  margin-bottom: 2em;
  padding: 2em;
  background-color: #f2f2f2;
  border: 1px solid #e5e5e5;
}
.category-search .title {
  width: 19%;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1em;
}
.category-search .title:before {
  position: absolute;
  content: "\f02b";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  color: #061834;
}
.category-search ul {
  width: 81%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.category-search ul li {
  margin: .3em 1em .3em 0;
  padding-right: 1em;
  border-right: 1px solid #cecece;
}
.category-search ul li a {
  display: block;
  min-width: 100px;
  padding: 0 1em;
  color: #061834;
  transition: all .25s ease;
  font-weight: bold;
  text-align: center;
}
.category-search ul li a:hover {
  background-color: #061834;
  color: #fff;
  text-decoration: none;
}
.category-search ul li.current a {
  background-color: #061834;
  color: #fff;
}
.category-search ul li.current a:hover {
  cursor: default;
}

/* -------------------------------------------- */
/* gallery */
/* -------------------------------------------- */
.gallery h2 {
  margin-bottom: 1.3em;
  padding-left: 1em;
  padding-bottom: .2em;
  border-bottom: 1px solid #000;
  font-size: 2em;
}
.gallery .inner {
  display: flex;
  flex-wrap: wrap;
}
.gallery .inner .block {
  width: 23.5%;
  margin-bottom: 3em;
}
.gallery .inner .block:not(:nth-of-type(4n)) {
  margin-right: 2%;
}
.gallery .inner .block a {
  display: block;
}
.gallery .inner .block a .photo {
  position: relative;
  overflow: hidden;
  margin-bottom: 1em;
  height: 270px;
}
.gallery .inner .block a .photo img {
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  min-height: 100%;
  min-width: 100%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  transition: all .2s ease;
}
.gallery .inner .block a .caption {
  font-weight: bold;
  text-align: left;
}
.gallery .inner .block a:hover .photo img {
  transform: scale(1.1);
  opacity: 1;
}

@supports (object-fit: cover) {
  .gallery .inner .block a .photo img {
    position: static;
    height: 100%;
    width: 100%;
    width: 270px;
    height: 270px;
    object-fit: cover;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}
/* -------------------------------------------- */
/* entry-wrapper */
/* -------------------------------------------- */
.entry-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5em;
}
.entry-wrapper .detail {
  width: 480px;
}
.entry-wrapper .detail .title {
  margin-bottom: 1em;
  padding: .2em 0 .2em 1.5em;
  border-left: 4px solid #061834;
  line-height: 1.8;
}
.entry-wrapper .detail .title h1 {
  font-size: 2.1em;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: normal;
}
.entry-wrapper .detail .title .category ul {
  display: flex;
  flex-wrap: wrap;
}
.entry-wrapper .detail .title .category ul li a {
  color: #061834;
  letter-spacing: normal;
  font-size: .9em;
}
.entry-wrapper .detail .title .category ul li:first-of-type a:before {
  content: "\f07c";
  font-family: fontAwesome;
}
.entry-wrapper .detail .title .category ul li:not(:last-of-type):after {
  margin-right: .5em;
  content: ",";
}
.entry-wrapper .detail .snsarea {
  margin-bottom: 1em;
}
.entry-wrapper .detail .snsarea ul {
  display: flex;
  justify-content: flex-end;
}
.entry-wrapper .detail .snsarea ul li img {
  vertical-align: bottom;
}
.entry-wrapper .detail .snsarea ul li:not(:last-of-type) {
  margin-right: .5em;
}
.entry-wrapper .detail .spec table {
  width: 100%;
  border-collapse: collapse;
}
.entry-wrapper .detail .spec table tr th {
  width: 31%;
  background-color: #f2f2f2;
  font-weight: bold;
}
.entry-wrapper .detail .spec table tr th, .entry-wrapper .detail .spec table tr td {
  padding: 1em;
  border: 1px solid #e5e5e5;
  font-size: .9em;
}
.entry-wrapper .photo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 610px;
  min-height: 300px;
  padding: 20px;
  border: 7px solid #e5e5e5;
}
.entry-wrapper .photo img {
  vertical-align: bottom;
}

/* -------------------------------------------- */
/* pageback */
/* -------------------------------------------- */
.pageback {
  margin-bottom: 2em;
}
.pageback p {
  display: inline-block;
}
.pageback p a {
  position: relative;
  display: block;
  padding: .3em 2.5em;
  border: 1px solid #061834;
  font-size: 0.9em;
  transition: all .15s ease;
}
.pageback p a:before {
  position: absolute;
  content: "\f104";
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
}
.pageback p a:hover {
  background-color: #061834;
  color: #fff;
  text-decoration: none;
}
.pageback p a:hover:before {
  color: #fff;
}

/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1150px) {
  /* -------------------------------------------- */
  /* category-area */
  /* -------------------------------------------- */
  .category-search {
    flex-wrap: wrap;
    padding: 1.3em;
  }
  .category-search .title {
    display: inline-block;
    justify-content: center;
    width: 100%;
    margin-right: 0;
    margin-bottom: .5em;
    text-align: center;
  }
  .category-search .title:before {
    position: static;
  }
  .category-search ul {
    justify-content: center;
    width: 100%;
  }

  /* -------------------------------------------- */
  /* gallery */
  /* -------------------------------------------- */
  .gallery h2 {
    margin-bottom: 1em;
    padding-left: .5em;
    font-size: 1.6em;
  }
  .gallery .inner .block a .photo {
    height: 23vw;
  }

  @supports (object-fit: cover) {
    .gallery .inner .block a .photo img {
      width: 23vw;
      height: 23vw;
    }
  }
  /* -------------------------------------------- */
  /* entry-wrapper */
  /* -------------------------------------------- */
  .entry-wrapper .detail {
    width: 43%;
  }
  .entry-wrapper .detail .title {
    margin-bottom: 1.5em;
    padding: .2em 0 .2em 1.2em;
  }
  .entry-wrapper .detail .title h1 {
    font-size: 1.5em;
  }
  .entry-wrapper .detail .spec table tr th, .entry-wrapper .detail .spec table tr td {
    padding: .7em;
  }
  .entry-wrapper .photo {
    width: 54%;
    min-height: 250px;
    border: 6px solid #e5e5e5;
  }
}
/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1000px) {
  /* -------------------------------------------- */
  /* titlearea */
  /* -------------------------------------------- */
  .titlearea {
    flex-wrap: wrap;
  }
  .titlearea .detail {
    width: calc(100% - 350px);
    padding-right: 2em;
  }
  .titlearea .detail .title {
    padding-top: 0;
  }
  .titlearea .detail .title dl dt {
    font-size: 1.2em;
    font-feature-settings: "palt";
  }
  .titlearea .photo {
    width: 350px;
  }

  /* -------------------------------------------- */
  /* information */
  /* -------------------------------------------- */
  .information {
    flex-wrap: wrap;
    margin-bottom: 2em;
  }
  .information .block {
    width: 100%;
  }
  .information .block h2 {
    padding: .4em .7em;
    font-size: 1em;
  }
  .information .block p {
    font-size: .9em;
  }
  .information .block ul {
    padding-left: 1em;
  }
  .information .block ul li {
    font-size: .9em;
  }
  .information .block ul li:before {
    top: 8px;
  }
  .information .block.caution {
    margin-bottom: 1.5em;
  }

  /* -------------------------------------------- */
  /* box */
  /* -------------------------------------------- */
  .box {
    margin-bottom: 4em;
  }
  .box h2 {
    margin-bottom: 1.5em;
    padding-left: .5em;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5;
  }
  .box h2:before {
    left: 0px;
    width: 4px;
  }
  .box.flow .step {
    flex-wrap: wrap;
    margin-bottom: 1em;
  }
  .box.flow .step dl {
    margin-bottom: .5em;
    padding: .4em .7em .3em;
    font-size: .9em;
  }
  .box.flow .step dl dt {
    letter-spacing: normal;
    font-size: .9em;
  }
  .box.flow .step dl dd {
    font-size: .9em;
  }
  .box.flow .step dl:not(:last-of-type) {
    margin-right: 1.2em;
  }
  .box.flow .step dl:not(:last-of-type):after {
    right: -12px;
    font-size: 1em;
  }
  .box.flow .bikou ol li {
    font-size: .9em;
    margin-left: 1.5em;
  }
  .box.flow .btn {
    text-align: center;
  }
  .box.price p {
    margin: 0 auto 1.5em;
    font-size: .9em;
  }
  .box.price table {
    width: 100%;
  }
  .box.price table th, .box.price table td {
    padding: 0.4em .2em;
    font-size: .75em;
    letter-spacing: normal;
    font-feature-settings: "palt";
  }
  .box.price table thead tr th {
    line-height: 1.3;
  }
  .box.price table thead tr th:nth-of-type(1) {
    width: 12%;
  }
  .box.price table thead tr th:nth-of-type(2) {
    width: 26%;
  }
  .box.price table thead tr th:nth-of-type(3) {
    width: 21%;
  }
  .box.price table thead tr th:nth-of-type(4) {
    width: 11%;
  }
  .box.price table thead tr th:nth-of-type(5) {
    width: 15%;
  }
  .box.price table thead tr th:nth-of-type(6) {
    width: 15%;
  }
  .box.price .btn {
    text-align: center;
  }
  .box.price .btn a {
    padding: 1em 1.5em;
    font-size: 1.2em;
  }
  .box.price .btn a:before {
    vertical-align: top;
  }
}
/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 767px) {
  /* -------------------------------------------- */
  /* titlearea */
  /* -------------------------------------------- */
  .titlearea {
    margin-bottom: 2em;
  }
  .titlearea .detail {
    width: 100%;
    margin-bottom: 1em;
    padding-right: 0;
  }
  .titlearea .detail .title dl {
    margin-bottom: 1em;
  }
  .titlearea .detail .title dl dt {
    font-size: 1em;
  }
  .titlearea .detail .title dl dd img {
    width: 95%;
    max-width: 450px;
  }
  .titlearea .detail .read {
    font-size: .9em;
  }
  .titlearea .photo {
    width: 100%;
  }
  .titlearea .photo img {
    vertical-align: bottom;
  }

  /* -------------------------------------------- */
  /* category-area */
  /* -------------------------------------------- */
  .category-search {
    flex-wrap: wrap;
    padding: .8em;
  }
  .category-search ul {
    justify-content: flex-start;
  }
  .category-search ul li {
    margin-right: .5em;
    padding-right: .5em;
  }
  .category-search ul li a {
    min-width: 80px;
    padding: 0 .5em;
    font-size: .9em;
    letter-spacing: normal;
  }
  .category-search ul li a:hover {
    background-color: #061834;
    color: #fff;
    text-decoration: none;
  }
  .category-search ul li.current a {
    color: #fff;
  }
  .category-search ul li.current a:hover {
    cursor: default;
  }

  /* -------------------------------------------- */
  /* gallery */
  /* -------------------------------------------- */
  .gallery h2 {
    font-size: 1.3em;
  }
  .gallery .inner .block {
    width: 32%;
    margin-bottom: 2em;
  }
  .gallery .inner .block:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .gallery .inner .block:not(:nth-of-type(3n)) {
    margin-right: 2%;
  }
  .gallery .inner .block a .photo {
    height: 32vw;
    margin-bottom: .5em;
  }
  .gallery .inner .block a .caption {
    font-weight: normal;
    font-size: .85em;
    letter-spacing: normal;
  }

  @supports (object-fit: cover) {
    .gallery .inner .block a .photo img {
      width: 32vw;
      height: 32vw;
    }
  }
  /* -------------------------------------------- */
  /* entry-wrapper */
  /* -------------------------------------------- */
  .entry-wrapper {
    position: relative;
    flex-wrap: wrap;
  }
  .entry-wrapper .detail {
    width: 100%;
  }
  .entry-wrapper .detail .title {
    margin-bottom: 1em;
    padding: .2em 0 .2em 1em;
  }
  .entry-wrapper .detail .title h1 {
    font-size: 1.3em;
  }
  .entry-wrapper .detail .snsarea {
    margin-bottom: 2.5em;
  }
  .entry-wrapper .detail .spec {
    margin-bottom: 2em;
  }
  .entry-wrapper .detail .spec table tr th, .entry-wrapper .detail .spec table tr td {
    padding: .5em;
  }
  .entry-wrapper .photo {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: auto;
    border: none;
    padding: 0;
  }
}
/*===========================================================================*/
/*  media quary:479px  */
/*===========================================================================*/
@media screen and (max-width: 479px) {
  /* -------------------------------------------- */
  /* entry-wrapper */
  /* -------------------------------------------- */
  .entry-wrapper {
    margin-bottom: 3em;
  }
  .entry-wrapper .detail .title h1 {
    font-size: 1.2em;
  }
  .entry-wrapper .detail .spec table tr th, .entry-wrapper .detail .spec table tr td {
    display: block;
    width: 100%;
    padding: .4em;
  }
  .entry-wrapper .detail .spec table tr:not(:last-of-type) th, .entry-wrapper .detail .spec table tr:not(:last-of-type) td {
    border-bottom: none;
  }
  .entry-wrapper .detail .spec table tr:last-of-type th {
    border-bottom: none;
  }
  .entry-wrapper .photo {
    padding: 10px;
    border-width: 5px;
  }
}