@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
/* CSS Document */
#billboard {background: url("../img/value/value_mv_img01_pc.webp") no-repeat center / cover;position: relative;}
#billboard::after {display: block;content: '';width: 100%;height: 100%;background: #000;opacity: 0.4;position:absolute;top: 0;left: 0;}
#billboard h2 {color: #fff; font-size: 300%;text-align: center;letter-spacing: 0.1em;padding: 5em 0;position: relative;z-index: 100;}
#Main > .container {padding: 0 !important;}
#Main .block-value-01 .inner00 {padding: 5em 0 0;}
#Main .block-value-01 .inner00 h3 {font-size: 250%;text-align: center;letter-spacing: 0.2em;}
#Main .block-value-01 .inner00 h3 + p {font-size: 125%;line-height: 2.5;text-align: center;letter-spacing: 0.01em;margin-top: 1.5em;}
#Main .block-value-01 h4 {font-size: 200%;width: 100%;margin: 2em 0 0;border-bottom: 1px solid var(--basic-03);} 
#Main .block-value-01 h4 span {color: var(--basic-03);}
#Main .block-value-01 .box {}
#Main .block-value-01 .box > div {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 -1.5em;}
#Main .block-value-01 .box > div > div {width: calc(50% - 3em);margin: 1.5em;}
#Main .block-value-01 .box .boxInner figure {padding-bottom: 2em;position: relative;}
#Main .block-value-01 .box .boxInner .ttl01 {font-size: 150%;margin-top: 0.5em;}
#Main .block-value-01 .box .boxInner .txt01 {margin-top: 1em;padding-bottom: 1.5em;position: relative;}
#Main .block-value-01 .box .boxInner .txt01 small {font-size: 62.5%;line-height: 1.5;text-align: center;position: absolute;right: 0;bottom: 0;z-index: 1000;}
#Main .block-value-01 .box01 .left img {margin-top: 2em;}
#Main .block-value-01 .box01 .right {padding: 2em;background: #f7f4eb;position: relative;}
#Main .block-value-01 .box01 .right ul {}
#Main .block-value-01 .box01 .right ul li {}
#Main .block-value-01 .box01 .right ul li + li {margin-top: 1em;}
#Main .block-value-01 .box01 .right ul li p {padding-left: 1em; position: relative;clear: both;}
#Main .block-value-01 .box01 .right ul li p::before {display: block;content: '';width: 0.75em;height: 0.75em;background: #d2bb8e;position: absolute;top: 0.25em;left: 0;}
#Main .block-value-01 .box01 .right ul li p:after {display: block;content: '';width: 90%;height: 2px;background-size: 5px 2px;background-image: linear-gradient(to right, #444, #444 2px, transparent 2px, transparent 5px);opacity: 0.7;position: absolute;top: 0.65em;z-index: 1;}
#Main .block-value-01 .box01 .right ul li p .sp02,
#Main .block-value-01 .box01 .right ul li p .sp01 {background: #f7f4eb;position: relative;z-index: 100;}
#Main .block-value-01 .box01 .right ul li p .sp01 {padding-right: 1em;}
#Main .block-value-01 .box01 .right ul li p .sp01 small {font-size:87.5%;padding-left: 0.5em;}
#Main .block-value-01 .box01 .right ul li p .sp02 {padding-left: 1em;float: right;}
#Main .block-value-01 .box01 .right ul li p .sp03 {display: block;font-size:87.5%;}
#Main .block-value-01 .box02 .boxInner01 {margin-top: 0.5em;}
#Main .block-value-01 .box02 .boxInner01 .left {width: calc(40% - 3em);}
#Main .block-value-01 .box02 .boxInner01 .left figure {padding: 0;}
#Main .block-value-01 .box02 .boxInner01 .left figure + figure {margin-top: 1em;}
#Main .block-value-01 .box02 .boxInner01 .left figure figcaption {color: #fff;font-size: 100%;text-align: left;background: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5),transparent);right: 0;}
#Main .block-value-01 .box02 .boxInner01 .right {width: calc(60% - 3em);}
#Main .block-value-01 .box02 .boxInner01 .right ul {margin-top: 2em;}
#Main .block-value-01 .box02 .boxInner01 .right ul li {display: inline-block;margin: 0 0.75em 0.75em 0;}
#Main .block-value-01 .box02 .boxInner01 .right ul li:last-child::after {display: inline-block;content: 'など';margin-left: 1em;}
@media only screen and (max-width: 1300px) {}
@media only screen and (max-width: 1100px) {
  #Main .block-value-01 h4 {font-size: 150%;}
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {
  #billboard h2 {font-size: 187.5%;padding: 3em 0;}
  #Main .block-value-01 h4 {font-size: 137.5%;margin: 0;}
  #Main .block-value-01 .inner00 {padding: 3em 0 0;}
  #Main .block-value-01 .inner00 h3 {font-size: 175%;letter-spacing: 0;}
  #Main .block-value-01 .inner00 h3 + p {font-size: 100%;line-height: 2.5;margin-top: 1.5em;}
  #Main .block-value-01 .box > div {margin: 0 -1em;}
  #Main .block-value-01 .box > div > div {width: calc(100% - 2em);margin: 1em;}
  #Main .block-value-01 .box .boxInner .txt01 {padding: 0;}
  #Main .block-value-01 .box .boxInner .txt01 small {display: block;text-align: left;margin-top: 1em;position: static;}
  #Main .block-value-01 .box02 {margin-top: 2em;}
  #Main .block-value-01 .box02 .boxInner01 {padding-top: 7em;position: relative;}
  #Main .block-value-01 .box02 .boxInner01 > div {width: calc(100% - 2em) !important;margin: 1em !important;}
  #Main .block-value-01 .box02 .boxInner01 .right img {width: 90%;position: absolute;top: 1em;left: 5vw;}
  #Main .block-value-01 .box02 .boxInner01 .right ul {margin-top: 0;}
  #Main .block-value-01 .box02 .boxInner01 .right ul li {display: block;}  
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}