.lighting-container {
  --content-max-width: 850px;
  --marker-yellow: linear-gradient(transparent 55%, #f5f084 55%, #f5f084 85%, transparent 85%, transparent 100%);
  --border-radius: 30px;
  --color-brown: #8D412F;
  --color-beige: #FFF0DC;
  --color-green: #30A0A1;
  --color-dark-green: #2C735A;
  --color-orange: #F47A3F;
  --color-yellow: #FEF100;
  --radius: 20px;
  --padding-width: 30px;
}

.lighting-wrapper {
  font-size: 16px;
  line-height: 1.7;
  width: 100%;
  overflow: hidden;
  background: #ffefdc;
}

.lighting-wrapper img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  object-fit: contain;
  position: relative;
}

.lighting-top {
  position: relative;
  text-align: center;
  img {
    width: 100%;
  }
}

.lighting-lead {
  display: grid;
  place-items: center;
  gap: var(--padding-width);
  padding: 55px 20px 10px;
  h2 {
    margin: 5px 15px;
  }

  p {
    max-width: 800px;
  }
}

.lighting-attention {
  box-sizing: border-box;
  padding: 20px;
  background: #fff7ee;
  margin: 1em 0 2em;
  font-size: 14px;
}

.lighting-main {
  position:relative;
  &:before {
    content:"";
    display:block;
    aspect-ratio:153/115;
    width: 150px;
    height: auto;
    position:absolute;
    top: 20px;
    right: 40px;
    z-index: 2;
    background: url(../img/deco.png) center /100%;
  }
  section {
    box-sizing: border-box;
    padding: 130px var(--padding-width) 70px;
    --cut: 100px;
    clip-path: polygon( calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut) );
    position: relative;
    &:not(:first-child) {
      margin-top: 60px;
    }

    > div {
      background: var(--color-beige);
      padding: 50px var(--padding-width) 280px;
      box-sizing: border-box;
      border-radius: 9999px;
      margin-bottom: 1.5em;
      display: grid;
      place-items: center;
    }

    h2 {
      text-align: center;
      font-family: "WDXL Lubrifont JP N", sans-serif;
      color: white;
      max-width: 340px;
      aspect-ratio: 425/137;
      margin: -0.5em auto -1.9em;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 47px;
      padding-top: 1.6%;
      padding-right: 1.7%;
      position: relative;
      .lighting-5m & {
        background: url(../img/bg_title.png) center / contain no-repeat;
      }

      .lighting-2m & {
        background: url(../img/bg_title2.png) center / contain no-repeat;
      }

      .lighting-other & {
        background: url(../img/bg_title3.png) center / contain no-repeat;
      }

      > span {
        position: absolute;
        right: 8%;
        top: 3.5%;
        color: #8D412F;
        font-size: 20px;
        span {
          font-size: 1.2em;
          line-height: 1.2;
          translate: 0 2px;
          display: inline-block;
          font-weight: bold;
          padding: 0 1px 0 2px;
        }
      }
    }
  }

  > section {
    &.lighting-5m {
      background: #72bdbe;
    }

    &.lighting-2m {
      background: #F4A3C0;
    }

    &.lighting-other {
      background: #F69565;
      padding-bottom: 380px;
    }

    &:before {
      content: "";
      display: block;
      /* width: 100px; */
      /* height: 100px; */
      z-index: -1;
      background: url(../img/bg_noise.png) center;
      /* background:red; */
      position: absolute;
      background-blend-mode: soft-light;
      mix-blend-mode: overlay;
      opacity: 0.2;
      inset: 0;
    }
  }

  h3 {
    display: inline-block;
    /* place-items: center; */
    /* text-align: center; */
    margin: 0em auto 1em;
    color: #8d412f;
    font-size: 40px;
    position: relative;
    /* max-width: 500px; */
    padding: 111px 20px 0 20px;
    font-family: "WDXL Lubrifont JP N", sans-serif;
    border-bottom: 2px solid var(--color-brown);
    &:before {
      content: "";
      display: block;
      height: auto;
      width: 174px;
      aspect-ratio: 174/79;
      position: absolute;
      left: -100px;
      top: 70px;
    }

    .lighting-main section > div:nth-of-type(1) &:before {
      background: url(../img/icon1.png) center / 100% no-repeat;
    }

    .lighting-main section > div:nth-of-type(2) &:before {
      background: url(../img/icon2.png) center / 100% no-repeat;
    }

    .lighting-main section > div:nth-of-type(3) &:before {
      background: url(../img/icon3.png) center / 100% no-repeat;
    }

    .lighting-main section > div:nth-of-type(4) &:before {
      background: url(../img/icon4.png) center / 100% no-repeat;
    }

    &:after {
      content: "";
      display: block;
      height: 1px;
      width: 11px;
      height: 11px;
      background: var(--color-brown);
      position: absolute;
      right: 0;
      bottom: -6px;
      border-radius: 50%;
    }
  }
}

.lighting-movie {
  padding: var(--padding-width);
  max-width: 910px;
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  .lighting-5m & {
    background: var(--color-green);
  }

  .lighting-2m & {
    background: var(--color-dark-green);
  }

  .lighting-other & {
    background: var(--color-orange);
  }
}

.lighting-movie iframe {
  aspect-ratio: 16/9;
  width: 100%;
}

.lighting-item {
  max-width: 910px;
  margin: 1.1em auto;
  h4 {
    color: var(--color-brown);
    font-weight: bold;
    width: 250px;
    text-align: center;
    margin: 0.5em auto;
    font-size: 34px;
    background: url(../img/deco_title.png) left calc(50% - 2px) / 27px no-repeat, url(../img/deco_title.png) right calc(50% - 2px) / 27px no-repeat;
    .lighting-other & {
      width: 280px;
    }
  }

  ul:has( li:nth-child(2)) {
    display: grid;
    gap: var(--padding-width) calc(var(--padding-width)*2.5);
    grid-template-columns: repeat(2, 1fr);
    background-image: radial-gradient(circle, var( --color-brown) 3px, transparent 4px);
    background-size: 17px 17px;
    background-repeat: repeat-y;
    background-position: center top;
    /* width: 100%; */
    max-width: 870px;
  }

  ul:has( li:nth-child(2)) li {
    display: grid;
    place-items: center;
    /* width: 100%; */
    @media (min-width: 1000px) {
      /* width: 380px; */
    }

    max-width: 100%;
  }

  li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    background: white;
    width: 100%;
    aspect-ratio: 20/8.8;
    max-height: 180px;
    box-sizing: border-box;
    /* width: 100%; */
  }

  li > a img {
    z-index: 2;
    object-fit: contain;
    background: white;
    width: 100%;
    height: 100%;
    max-width: 410px;
    max-height: 240px;
  }

  li p:nth-of-type(1) {
    font-size:18px;
    margin: 1em 0 0.4em;
    font-weight: bold;
    /* width: 500px; */
    /* max-width: 100%; */
    /* max-width: 100%; */
    word-break: auto-phrase;
    text-align: center;
    line-height: 1.5;
  }
}

.ligting-point {
  max-width: 910px;
  background: var(--color-green);
  padding: var(--padding-width) var(--padding-width) calc(var(--padding-width)*1.5);
  box-sizing: border-box;
  margin: 20px auto;
  color: white;
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: var(--padding-width);
  border-radius: 0 70px;
  .lighting-5m & {
    background: var(--color-green);
  }

  .lighting-2m & {
    background: var(--color-dark-green);
  }

  .lighting-other & {
    background: var(--color-orange);
  }

  > div:first-child {
    display:grid;
    justify-items: center;
    h4 {
      font-size: 45px;
      font-family: "WDXL Lubrifont JP N", sans-serif;
      line-height: 0.8;
      letter-spacing: 0.3em;
      color: var(--clor-beige);
    }
  }

  > div:last-child {
    place-items: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    a {
      display: block;
      padding: 10px 30px;
      background: white;
      color: var(--color-dark-green);
      margin: 1em 0 0;
      border-radius: 100px;
    }
  }

  dl {
    --dl-width: 63px;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    dt {
      width: var(--dl-width);
    }

    dd {
      width: calc(100% - var(--dl-width));
      position: relative;
      &:before {
        position: absolute;
        content: ":";
        left: -1em;
      }
    }

    dd + dt, dt:not(:first-child) + dd {
      margin-top:.4em;
    }
  }
}

.lighting-present {
  /* max-width: 1020px; */
  margin: -300px var(--padding-width) 110px;
  border: solid var( --color-yellow);
  border-width: 50px 0;
  position: relative;
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 30px;
    background-image: radial-gradient(circle, white 12px, transparent 13px);
    background-size: 44.4px 30px;
    background-repeat: repeat-x;
    background-position: center top;
  }

  &:before {
    top: -40px;
  }

  &:after {
    bottom: -40px;
  }

  > div {
    background: var(--color-dark-green);
    border: solid var(--color-yellow);
    border-width: 0 var(--padding-width);
    padding: 50px calc(var(--padding-width)*1.5) 70px;
    box-sizing: border-box;
    margin: 0 15px;
  }

  h2 {
    text-align: center;
    img {
      width: 80%;
      max-width: 310px;
    }
  }
}

.lighting-present-product {
  display: flex;
  gap: 25px;
  margin: 1.5em auto 0;
  padding: 20px 0px;
  box-sizing: border-box;
  justify-content: center;
  /* align-items: center; */
  color: white;
  max-width: 900px;
  /* justify-content: center; */
  align-items: center;
  > div:first-child {
    max-width: 50%;
    padding: 10px;
    box-sizing: border-box;
    background: white;
    /* height: 100%; */
    display: flex;
    img {
    }
  }

  h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: .5em;
    a {
      color: #f3d70f;
      display: inline-block;
    }
  }

  > div:last-child {
    flex:1;
    word-break: auto-phrase;
    p:first-child {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: .5em;
      color: var(--color-yellow);
      @media (max-width: 900px) {
        font-size:18px;
        text-align: center; }
    }
  }
}

.lighting-present-detail {
  background: var(--color-beige);
  padding: 55px calc(var(--padding-width)*1.5) 45px;
  margin: 45px auto 0px;
  position: relative;
  display: grid;
  justify-items: center;
  box-sizing: border-box;
  border-radius: var( --radius);
  max-width: 900px;
  h3 {
    background: var(--color-yellow);
    color: var(--color-dark-green);
    font-weight: bold;
    width: 180px;
    height: 52px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-size: 22px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
  }

  h3 + p {
    line-height: 2;
  }

  dl {
    display: flex;
    flex-wrap: wrap;
    --dtwidth: 119px;
    --dlgap: 2px;
    margin: 7px 0 0;
    gap: 20px var(--dlgap);
  }

  dt {
    width: var(--dtwidth);
    font-weight: bold;
  }

  dd {
    width: calc(100% - var(--dtwidth) - var(--dlgap));
  }

  dt,dd {
    border-top: 1px dashed var(--color-dark-green);
    padding-top: 20px;
  }
  .tw-sns {
    margin:.7em 0;
  }
  
  .tw-sns a + a {
    border-left:1px solid black;
    margin-left:.6em;
    padding-left:.6em;
  }
}

@media (min-width: 801px) {
  .lighting-other .lighting-item {
    li {
      display: grid;
      grid-template-columns: 42% 1fr;
      gap: 0 25px;
    }

    li > :nth-child(1) {
      grid-row: 1 / 3;
      background: white;
      height: 100%;
    }

    li > :nth-child(2) {
      grid-row: 1;
      display: grid;
      align-items: flex-end;
      text-align: left;
    }

    li > :nth-child(3) {
      grid-row: 2;
    }
  }
}

@media (max-width: 800px) {
  .lighting-container {
    --padding-width:15px;
  }

  .lighting-wrapper {
    font-size: 14px;
  }

  .lighting-lead {
    padding-top: 20px;
    h2 {
      margin: 20px 13px 12px;
    }
  }

  .lighting-main {
    h3 {
      font-size: clamp(10px,6.2vw,30px);
      word-break: auto-phrase;
      text-align: center;
      &:before {
        left: -30px;
        top: 41px;
        width: 119px;
      }
    }

    section {
      &:not(:first-child) {
        margin-top:20px;
      }
      &:last-child {
        padding-bottom: 310px;
      }
    }
  }

  .lighting-item {
    margin-top: 1.5em;
    ul {
      grid-template-columns: repeat(1, 1fr);
      background: none;
    }

    li p:nth-of-type(1) {
      font-size:16px;
    }

    a {
      color:#795284;
      text-decoration:underline;
    }

    h4 {
      font-size: 20px;
      width: 170px;
      background-size: 25px;
      padding-bottom: 6px;
    }
  }

  .lighting-main {
    &:before {
      width: 18%;
      right: 6%;
      top: 10px;
    }
    section {
      --cut: 50px;
      padding: 80px var(--padding-width) 10px;
      > div {
        padding-bottom: 33%;
        padding-top: 2%;
        h2 + & {
          padding-top: 40px;
        }
      }

      h2 {
        font-size: clamp(30px,8.3vw,36px);
        padding-top: 15px;
        /* padding-bottom: 50px; */
        > span {
          font-size: 17px;
          top: 5%;
          right: 9%;
        }
      }
    }

    h3 {
      padding: 91px 0 0 0px;
    }
  }

  .ligting-point {
    grid-template-columns: repeat(1, 1fr);
    padding: calc(var(--padding-width) * 2) var(--padding-width) calc(var(--padding-width) * 2);
    > div:first-child {
      h4 {
        font-size: 30px;
      }
    }
    > div:last-child {
      a {
        margin-top:1.5em;
      }
    }
  }

  .lighting-present-product {
    flex-direction: column;
    > div:first-child {
      max-width: 100%;
    }
  }
}

@media (max-width: 600px) {
  .lighting-item {
    ul:has( li:nth-child(2)) {
      grid-template-columns: repeat(1, 1fr);
      background: none;
    }
  }

  .lighting-attention {
    font-size: 12px;
  }

  .lighting-present {
    margin: -300px 0 110px;

    > div {
      margin: 0 10px;
      padding: 50px calc(var(--padding-width) * 1) 30px;
    }
  }

  .lighting-present-detail {
    padding: 55px calc(var(--padding-width) * 1) 15px;
    dl {
      flex-direction: column;
      gap: 0;
    }

    dt,dd {
      width: 100%;
    }

    dt {
      padding: 10px 0 0;
    }

    dd {
      border: none;
      padding: 5px 0 10px;
    }

    ul {
      margin: .5em 0;
    }

    a {
      display:inline;
      color: #795284;
      text-decoration: underline;
    }

    li + li {
      margin-top: .3em;
    }
   .tw-sns {
      display:grid;
     place-items:center;
     gap:6px;
     
     }
    
    .tw-sns a {
     display:block;
    }
   .tw-sns a + a {
      margin-left:0;
     border-left:0;
     padding:0;
   }
  }
}

@media (max-width: 400px) {
  .lighting-container {
    --padding-width:15px;
  }
}