@charset "UTF-8";
/* CSS Document */
.billboard-style-02 {background: transparent;overflow: hidden;}
.billboard-style-02::before {display: block;content: '';width: 100%;height: 100%;background: linear-gradient(to bottom,rgba(0,0,0,0.3),transparent,transparent);position: absolute;top: 0;left: 0;}
.billboard-style-02::after {display: block;content: '';width: 100%;height: 100%;background: url("../img/merit/merit_mv01_img01_pc.webp") no-repeat center bottom / cover;position: absolute;top: 50%;left: 50%;z-index: -1;transform: translate(-50%,-50%) scale(1.05);transform-origin: center;opacity: 0;}
body.loaded .billboard-style-02::after {opacity: 1;transform: translate(-50%,-50%) scale(1.0);transition: 2.0s ease-out;}
.billboard-style-02 h2,
.billboard-style-02 div p {position: relative;z-index: 1;}
.billboard-style-02 div {padding: 27em 0 5em;}
.billboard-style-02 div::after {display: block;content: '';width: 100%;height: 100%;background: linear-gradient(to top,rgba(0,0,0,0.3),transparent,transparent);position: absolute;left: 0;bottom: 0;}
.billboard-style-02 h2 {background: transparent;}
.billboard-style-02 div p:nth-child(1) {font-size: 275%;}
.billboard-style-02 div p:nth-child(2) {margin-top: 1.5em;}
#contentsWrap {background: linear-gradient(120deg, #fdfdf9, #efeddc 15%, #c1b19a 67%);}
.block-merit-01 {padding: 4em 0 0;}
.block-merit-01 nav ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
.block-merit-01 nav ul li {text-align: center;width: 18.5%;}
.block-merit-01 nav ul li a {display: block;color: #fff;font-size: 93.75%;padding: 0.7em 0 2.5em;background: linear-gradient(-135deg,#692d01,#441d00);position: relative;}
.block-merit-01 nav ul li a::before {display: block;content: attr(data-num);font-size: 300%;line-height: 1;margin-bottom: 0.2em;}
.block-merit-01 nav ul li a::after {display: block;content: '';width: 0.9em;height: 0.5em;background: url("../img/common/common_arrow1.svg") no-repeat center/contain;position: absolute;left: 50%;bottom: 0.8em;transform: translateX(-50%);pointer-events: none;}
.block-merit-02 .container {padding-top: 6em;}
.block-merit-02 .container h3 {color: #441d00;font-size: 150%;text-align: center;padding-bottom: 0.5em;border-bottom: 1px solid #684a33;}
.block-merit-02 .container h3::before {display: block;content: attr(data-num);font-size: 300%;line-height: 1;margin-bottom: 0.2em;}
.block-merit-02 .container h3 + p {color: #441d00;line-height: 2;text-align: center;margin-top: 2.5em;}
.block-merit-02 .container .imgBox01 {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin-top: 4em;}
.block-merit-02 .container .imgBox01 figure {width: 50%;position: relative;/*transform: translateY(2em);*/}
.block-merit-02 .container .imgBox01 figure.on {/*transform: translateY(0);*/transition: 1.0s;}
.block-merit-02 .container .imgBox01 figure + figure {/*margin-top: 3em;*/}
.block-merit-02 .container.merit03 {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.block-merit-02 .container.merit03 .mw1200 {width: 48%;}
.block-merit-02 .container.merit03 .mw1200 p,
.block-merit-02 .container.merit03 .mw1200 h3 {text-align: left;}
.block-merit-02 .container.merit03 .mw1200 h3:nth-of-type(2) {margin-top: 1.5em;}
.block-merit-02 .container.merit03 .mw1200 p {margin-top: 1.5em;}
.block-merit-02 .container.merit03 figure {width: 47%;max-width: 560px;position: relative;}
.block-merit-02 .container.merit03 figure figcaption {color: #222;padding-bottom: 0.5em;}
.block-merit-02 .container.merit06 .imgBox01 {justify-content: center;}
.block-note {padding: 8em 0 3em;}
footer {padding-top: 0;}
footer .inner02 {margin-top: 0;}
@media only screen and (min-width: 768px) and (max-width: 1200px) {}
@media only screen and (max-width: 1200px) {
  .block-merit-01 nav ul li {width: 33%;margin-bottom: 0.5%;}
}
@media only screen and (min-width: 768px) {
  .billboard-style-02 div p {letter-spacing: 0.1em;}
  .block-merit-02 .container h3 {letter-spacing: 0.05em;}
  .block-merit-02 .container .imgBox01 figure + figure {transition-delay: 0.2s !important;}
}
@media only screen and (max-width: 767px) {
  .billboard-style-02::after {background: url("../img/merit/merit_mv01_img01_sp.webp") no-repeat center bottom / cover;}
  .billboard-style-02 h2 {font-size: 175%;}
  .billboard-style-02 div {padding: 14em 0 1.5em;}
  .billboard-style-02 div p:nth-child(1) {font-size: 150%;}
  .billboard-style-02 div p:nth-child(2) {margin-top: 0.5em;font-size: 87.5%;line-height: 1.75;white-space: nowrap;}
  .block-merit-01 {padding: 2em 0 0;}
  .block-merit-01 nav ul li {text-align: left;width: 100%;margin-bottom: 1px;}
  .block-merit-01 nav ul li a {font-size: 112.5%;padding: 1.1em 0 1em 4.5em;}
  .block-merit-01 nav ul li a::before {font-size: 275%;position: absolute;top: 48%;left: 0.3em;transform: translateY(-50%);}
  .block-merit-01 nav ul li a::after {width: 0.8em;top: 50%;left: auto;right: 0.75em;bottom: auto;transform: translate(0%,-50%);}
  .block-merit-02 .container {padding-top: 3em;}
  .block-merit-02 .container h3 {font-size: 125%;}
  .block-merit-02 .container h3::before {font-size: 250%;}
  .block-merit-02 .container h3 + p {text-align: left;margin-top: 1.5em;}
  .block-merit-02 .container .imgBox01 {margin-top: 1em;}
  .block-merit-02 .container .imgBox01 figure {width: 100%;}
  .block-merit-02 .container .imgBox01 figure + figure {margin-top: 0;}
  .block-merit-02 .container.merit03 .mw1200 {width: 100%;}
  .block-merit-02 .container.merit03 .mw1200 h3 {text-align: center;}
  .block-merit-02 .container.merit03 .mw1200 h3:nth-of-type(2) {margin-top: 0.5em;}
  .block-merit-02 .container.merit03 figure {width: 100%;max-width: 100%;margin-top: 1.5em;}
  .block-note {padding: 4em 0 2em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}