/********************************************************

setting

********************************************************/
:root {
  --margin-block: 200px; }

@media (min-width: 1101px) and (max-width: 1280px) {
  :root {
    --margin-block: 120px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --margin-block: 90px; } }
@media (max-width: 640px) {
  :root {
    --margin-block: 70px; } }
.page_concept .sec_concept {
  color: #FFF; }

.sec_concept.bg {
  background: url("../images/concept/bg_concept.jpg") no-repeat center bottom;
  background-size: cover;
  aspect-ratio: 1920 / 2604; }
  @media screen and (max-width: 600px) {
    .sec_concept.bg {
      background: url("../images/concept/bg_concept_sp.jpg") no-repeat center bottom;
      aspect-ratio: 750 / 1495;
      background-size: contain;
      background-color: #020e32; } }

.sec_concept.bg .in {
  padding: var(--margin-block) 0; }
  @media screen and (max-width: 1170px) {
    .sec_concept.bg .in {
      padding-bottom: 400px; } }
  @media screen and (max-width: 600px) {
    .sec_concept.bg .in {
      padding-bottom: 200px; } }

.sec_concept .h2_concept {
  width: min(80%, 960px);
  margin: 0 auto 70px; }
  @media screen and (max-width: 600px) {
    .sec_concept .h2_concept {
      margin: 0 auto 40px; } }

.sec_concept .h3_concept {
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  width: 90%;
  margin: 0 auto 50px; }
  @media screen and (min-width: 750px) {
    .sec_concept .h3_concept {
      font-size: calc(20px + 0.0273504274 * (100vw - 750px)); } }
  @media screen and (min-width: 1920px) {
    .sec_concept .h3_concept {
      font-size: 52px; } }
  @media screen and (max-width: 600px) {
    .sec_concept .h3_concept {
      margin: 0 auto 25px;
      line-height: 1.6; } }

.sec_concept .copy {
  text-align: center;
  font-size: 14px;
  line-height: 2.6;
  z-index: 1;
  width: 90%;
  margin: 0 auto 50px; }
  @media screen and (min-width: 750px) {
    .sec_concept .copy {
      font-size: calc(14px + 0.0051282051 * (100vw - 750px)); } }
  @media screen and (min-width: 1920px) {
    .sec_concept .copy {
      font-size: 20px; } }
  @media screen and (max-width: 600px) {
    .sec_concept .copy {
      text-align: left;
      line-height: 2.0; } }

.sec_concept .area-img {
  max-width: 1454px;
  margin: -25px auto 0; }
  @media (max-width: 1800px) {
    .sec_concept .area-img {
      width: 75%; } }
  @media screen and (max-width: 1600px) {
    .sec_concept .area-img {
      max-width: none;
      width: 50%; } }
  @media screen and (max-width: 1170px) {
    .sec_concept .area-img {
      width: 90%; } }