@charset "UTF-8";
/*---------------------------------------------------------
HOREI BAG
---------------------------------------------------------*/
.horei-bag .anchor-link { margin: 3em auto 0; }

.horei-bag .box.type-double-border ,
.horei-bag .box.type-double-border:before {
  border-style: solid;
  border-width: 2px;
}

.horei-bag .box.type-double-border {
  border-radius: 6px;
  text-align: center;
}

.horei-bag .box.type-double-border:before {
  top: -7px;
  left: -7px;
  border-radius: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  box-sizing: unset;
}

.horei-bag .box.type-double-border.color--blue,
.horei-bag .box.type-double-border.color--blue:before { border-color: #0469db; }
.horei-bag .box.type-double-border.color--green,
.horei-bag .box.type-double-border.color--green:before { border-color: #00b050; }

.horei-bag .anchor-link .box.type-double-border {
  width: 200px;
  padding: 10px;
}

.horei-bag .box.type-double-border .title {
  margin: 0 !important;
  font-size: 1.6em;
  line-height: 1;
}

.horei-bag .box.type-double-border.color--blue .title { color: #0469db; }
.horei-bag .box.type-double-border.color--green .title { color: #00b050; }

.horei-bag .box.type-double-border .sub-title {
  position: relative;
  background-color: #fff;
  display: block;
  width: 4.5em;
  margin: -1.5em auto 0;
  padding: 0.2em 0.3em 0.4em;
  font-size: 0.8em;
  z-index: 2;
}

.horei-bag .anchor-link .l-column { margin-top: 2em; }

.horei-bag .anchor-link .column-list { text-align: center; }

.horei-bag .anchor-link .column-list .link {
  display: block;
  padding: 1em 0.5em;
}

.horei-bag .anchor-link .column-list .title,
.horei-bag .anchor-link .column-list .sub-title { font-weight: bold; }

.horei-bag .anchor-link .column-list .title {
  margin: 0;
  font-size: 1.6em;
}
@media screen and (max-width: 667px) {
.horei-bag .anchor-link .column-list .title { font-size: 1.2em; }
}

.horei-bag .anchor-link .column-list .sub-title {
  border-top: 1px solid #0469db;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.horei-bag .anchor-link .column-list .sub-title { font-size: 1em; }
}

.horei-bag .anchor-link .column-list .link:hover .sub-title { border-top: 1px solid #fff; }

.horei-bag .anchor-link .column-list .text {
  margin-top: 0.5em;
  text-align: left;
  font-size: 0.9em;
}

.horei-bag .anchor-link .column-list .photo {
  display: block;
  margin: 0.5em auto 0;
}

.horei-bag .anchor-link:nth-child(4) { width: 70%; }
@media screen and (max-width: 667px) {
.horei-bag .anchor-link:nth-child(4) { width: 90%; }
.horei-bag .anchor-link:nth-child(4) .l-column.line--03 .column-list {
  width: 32%;
  margin-left: 2% !important;
}
.horei-bag .anchor-link:nth-child(4) .l-column.line--03 .column-list:first-child { margin-left: 0 !important; }
}

.horei-bag .anchor-link:nth-child(4) .column-list .link {
  border: 1px solid #0469db;
  color: #0469db;
}
.horei-bag .anchor-link:nth-child(4) .column-list .link:hover {
  background: #0469db;
  color: #fff;
}
.horei-bag .anchor-link:nth-child(4) .column-list .sub-title { border-top: 1px solid #0469db; }
.horei-bag .anchor-link:nth-child(4) .column-list .photo { width: 40%; }

.horei-bag .anchor-link:nth-child(5) { width: 90%; }
.horei-bag .anchor-link:nth-child(5) .column-list .link {
  border: 1px solid #00b050;
  color: #00b050;
}
.horei-bag .anchor-link:nth-child(5) .column-list .link:hover {
  background: #00b050;
  color: #fff;
}
.horei-bag .anchor-link:nth-child(5) .column-list .sub-title { border-top: 1px solid #00b050; }
.horei-bag .anchor-link:nth-child(5) .column-list .photo { width: 100%; }

.horei-bag .section-box {
  margin-top: 4em;
  padding: 3em 2em;
}
@media screen and (max-width: 667px) {
.horei-bag .section-box {
  margin-top: 2em;
  padding: 2em 1em;
}
}

.horei-bag .section-box .introduction .box.type-double-border {
  width: 300px;
  padding: 10px;
}
@media screen and (max-width: 667px) {
.horei-bag .section-box .introduction .box.type-double-border {
  width: 90%;
}
}

.horei-bag .section-box .introduction .box.type-double-border.color--blue .title { color: #333; }
.horei-bag .section-box .introduction .box.type-double-border.color--green .title { color: #333; }

.horei-bag .section-box .introduction .box.type-double-border .sub-title {
  width: 7em;
  margin: -1.5em auto 0;
  padding: 0.2em 0.3em 0.4em;
}

.horei-bag .section-box.color--sky-blue .introduction .box.type-double-border .sub-title { background-color: #e9fafd; }
.horei-bag .section-box.color--thin-green .introduction .box.type-double-border .sub-title { background-color: #f0ffef; }

.horei-bag .section-box .introduction .section-box--title {
  margin: 0 !important;
  font-size: 1.6em;
}
@media screen and (max-width: 667px) {
.horei-bag .section-box .introduction .section-box--title { font-size: 1.2em; }
}

.horei-bag .section-box .introduction .section-box--title .photo {
  display: block;
  margin: 0 auto;
}

.horei-bag .section-box .introduction .text {
  width: 45%;
  margin: 1em auto 0;
}
@media screen and (max-width: 667px) {
.horei-bag .section-box .introduction .text { width: 100%; }
}

.horei-bag .section-box.color--sky-blue { background-color: #e9fafd; }
.horei-bag .section-box.color--thin-green { background-color: #f0ffef; }

.horei-bag .label-title { margin-top: 0.5em; }

.horei-bag .circle-mark { width: 20%; }
.horei-bag .circle-mark:before {
  width: 3.5em;
  height: 3.5em;
}
@media screen and (max-width: 667px) {
.horei-bag .circle-mark:before {
  width: 2.5em;
  height: 2.5em;
}
}

.horei-bag .circle-mark.color--liter02:before { background-color: #21b489; }
.horei-bag .circle-mark.color--liter04:before { background-color: #21b4a3; }
.horei-bag .circle-mark.color--liter05:before { background-color: #21b4be; }
.horei-bag .circle-mark.color--liter06:before { background-color: #219fba; }
.horei-bag .circle-mark.color--liter08:before { background-color: #217cba; }
.horei-bag .circle-mark.color--liter12:before { background-color: #2159ba; }
.horei-bag .circle-mark.color--liter18:before { background-color: #2136ba; }
.horei-bag .circle-mark.color--liter20:before { background-color: #1c2e9d; }
.horei-bag .circle-mark.color--liter21:before { background-color: #172580; }
.horei-bag .circle-mark.color--liter23:before { background-color: #0a1038; }

.horei-bag .circle-mark:after {
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5;
}
@media screen and (max-width: 667px) {
.horei-bag .circle-mark:after { line-height: 4; }
}

.horei-bag .circle-mark.color--liter02:after { content: "2ℓ"; }
.horei-bag .circle-mark.color--liter04:after { content: "4ℓ"; }
.horei-bag .circle-mark.color--liter05:after { content: "5ℓ"; }
.horei-bag .circle-mark.color--liter06:after { content: "6ℓ"; }
.horei-bag .circle-mark.color--liter08:after { content: "8ℓ"; }
.horei-bag .circle-mark.color--liter12:after { content: "12ℓ"; }
.horei-bag .circle-mark.color--liter18:after { content: "18ℓ"; }
.horei-bag .circle-mark.color--liter20:after { content: "20ℓ"; }
.horei-bag .circle-mark.color--liter21:after { content: "21ℓ"; }
.horei-bag .circle-mark.color--liter23:after { content: "23ℓ"; }

.horei-bag .circle-mark:after {
  font-size: 1.4em;
  color: #fff;
}
@media screen and (max-width: 667px) {
.horei-bag .circle-mark:after { font-size: 1em; }
}

.horei-bag .label-title .title { padding-left: 0.5em; }
@media screen and (max-width: 667px) {
.horei-bag .label-title .title {
  padding-left: 0.2em;
  font-size: 0.9em;
}
}

.horei-bag .section-box .product-list .column-list .link {
  display: block;
  padding-bottom: 2em;
}
/*---------------------------------------------------------
COMMON STYLE
---------------------------------------------------------*/
.page-introduction.common-style .title{
    margin-top: 2em;
    text-align: center;
  }
  
  .page-introduction.common-style .statement { margin-top: 1em; }
  
  .page-introduction.common-style .statement .text { text-align: center; }
  @media screen and (max-width: 667px) {
  .page-introduction.common-style .statement .text { text-align: left; }
  }
  
  .button-margin { margin-top: 3em; }
  @media screen and (max-width: 667px) {
  .button-margin { margin-top: 2em; }
  }
  .common-center-button .button-block { margin: 0 auto; }
  
  .circle-mark { position: relative; }
  .circle-mark:before {
    content: "";
    position: relative;
    border-radius: 50%;
    display: table;
  }
  .circle-mark:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  
  .label-title { display: table; }
  
  .label-title .circle-mark,
  .label-title .title {
    display: table-cell;
    vertical-align: middle;
  }
  
  .box.type-double-border {
    position: relative;
    margin: 0 auto;
  }
  
  .box.type-double-border:before {
    content: "";
    position: absolute;
    border: 1px solid #000;
    width: 100%;
    min-height: 100%;
  }