@charset "UTF-8";

/* ===================================
	File Name   : structure.css
	Description : Structure Page CSS
	Editor      : Bface Nakamura
	
	Update Description :
	[2025/07/09] 新規作成
====================================== */

/*========== Style Contents ==========

	1. Redefinition
  2. Section [tit_onimg]
  3. Section [intro]
  4. Section [target_exhibitor]
  5. Section [structure]
  6. Colors

====================================== */



/*===== 1. Redefinition =====*/


/*===== 2. Section [tit_onimg]  =====*/
#tit_onimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40rem;
  margin: 5rem;
  padding: 2rem 6rem 2rem 2rem;
  box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(235,235,235,.5);
  background: center/cover no-repeat;
  font-family: 'Merriweather Sans','Noto Sans JP',sans-serif;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(0,0,0,.15) .1rem,rgba(0,0,0,.15) .2rem) rgba(153,153,153,.25);
    z-index: 1;
    content: ""
  }
  &::after {
    position: absolute;
    top: -3rem;
    left: -3rem;
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    border: 2rem solid currentColor;
    border-image: repeating-linear-gradient(135deg,currentColor,currentColor 2rem,rgba(255,255,255,0) 2rem,rgba(255,255,255,0) 4rem) 20;
    z-index: 1;
    content: ""
  }
  > * {
    position: relative;
    z-index: 2;
  }
  h1 {
    width: 100%;
    max-width: 70rem;
    padding: 1.5rem 2rem;
    background: var(--baseC);
    line-height: 0;
    margin-bottom: 2rem;
    img { width: 100%;}
  }
  > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    dl {
      display: flex;
      align-items: center;
      width: calc(50% - 1rem);
      margin: 0 0 1rem;
      background: var(--baseC);
    }
    dt {
      position: relative;
      height: 100%;
      margin-right: 1rem;
      padding: 1.5rem;
      background: var(--DC);
      color: var(--baseC);
      font-size: 1.8rem;
    }
    dd {
      color: var(--DC);
      span {
        font-size: 2rem;
        + span::before {
          display: inline-block;
          width: .6rem;
          height: 1rem;
          margin: 0 .5rem;
          background: linear-gradient(to bottom left,transparent 50%,currentColor 50.01%) top left/100% 50% no-repeat,linear-gradient(to top left,transparent 50%,currentColor 50.01%) bottom right/100% 50% no-repeat;
          transform: translateY(-25%);
          content: "";
        }
      }
      p {
        font-size: 1.8rem;
        span {
          font-size: 1.6rem;
          margin-left: .5rem
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  #tit_onimg {
    margin:4rem;
    padding: 1rem 4rem 1rem 1rem;
    &::after {
      top: -2rem;
      left: -2rem;
      width: calc(100% - 2rem);
      height: calc(100% - 2rem);
      border: 1rem solid currentColor;
      border-image: repeating-linear-gradient(135deg,currentColor,currentColor 1rem,rgba(255,255,255,0) 1rem,rgba(255,255,255,0) 2rem) 10
    }
  }
}

@media (max-width: 768px) {
  #tit_onimg {
    height: auto;
    min-height: 25rem;
    margin: 3rem 1.5rem;
    padding: 1.5rem 1rem;
    &::after {
      top: -1.5rem;
      left: -1.5rem;
      width: calc(100% + 1rem);
      height: calc(100% + 1rem);
      border: 1rem solid currentColor;
      border-image: repeating-linear-gradient(135deg,currentColor,currentColor 1rem,rgba(255,255,255,0) 1rem,rgba(255,255,255,0) 2rem) 10;
    }
    > div {
      display: block;
      dl {
        width: 100%;
        margin: 0;
        &:not(:last-child) { margin-bottom: 1rem;}
      }
      dt {
        padding: 1rem 1.5rem;
        font-size: 1.2rem;
      }
      dd {
        span {
          font-size: 1.8rem;
          + span::before {
            width: .5rem;
            height: 1rem;
            transform: translateY(-15%);
          }
        }
        p { font-size: 1.4rem;}
      }
    }
  }
}



/*===== 3. Section [intro]  =====*/
#intro {
  margin: 0 auto 8rem;
  img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  #intro {
    margin: 0 0 3rem;
  }
}

/*===== 4. Section [target_exhibitor]  =====*/
#target_exhibitor {
  margin: 0 auto 5rem;
}

@media (max-width: 768px) {
  #target_exhibitor {
    margin: 0 0 3rem;
  }
}



/*===== 5. Section [target_exhibitor]  =====*/
#structure { 
  margin: 4rem auto 2rem;
  img {
    width: 100%;
    width: 40rem;
  }
}



/*===== 6. Colors  =====*/
#plant {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-plant.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(135, 80, 156, 0.2);
    color: #86509c;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(135, 80, 156, 0.15) .1rem,rgba(135, 80, 156, 0.15) .2rem) rgba(135, 80, 156, 0.05);}
    > div dt { background: #86509c;}
  }
  #anchor a { 
    background: #86509c;
    &:hover { background: #a863c3;}
  }
  #intro h3:first-of-type { color: #86509c;}
}

#infra {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-infra.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(236, 108, 0, 0.2);
    color: #ec6c00;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(236, 108, 0, 0.15) .1rem,rgba(236, 108, 0, 0.15) .2rem) rgba(236, 108, 0, 0.05);}
    > div dt { background: #ec6c00;}
  }
  #anchor a { 
    background: #ec6c00;
    &:hover { background: #ff8c32;}
  }
  #intro h3:first-of-type { color: #ec6c00;}
}

#operation {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-operation.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(199, 51, 121, 0.2);
    color: #c73379;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(199, 51, 121, 0.15) .1rem,rgba(199, 51, 121, 0.15) .2rem) rgba(199, 51, 121, 0.05);}
    > div dt { background: #c73379;}
  }
  #anchor a { 
    background: #c73379;
    &:hover { background: #e0629f;}
  }
  #intro h3:first-of-type { color: #c73379;}
}

#construction {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-construction.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(170, 1, 2, 0.2);
    color: #aa0102;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(170, 1, 2, 0.15) .1rem,rgba(170, 1, 2, 0.15) .2rem) rgba(170, 1, 2, 0.05);}
    > div dt { background: #aa0102;}
  }
  #anchor a { 
    background: #aa0102;
    &:hover { background: #dc3c3c;}
  }
  #intro h3:first-of-type { color: #aa0102;}
}

#dx {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-ai.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(165, 127, 31, 0.2);
    color: #a57f1f;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(165, 127, 31, 0.15) .1rem,rgba(165, 127, 31, 0.15) .2rem) rgba(165, 127, 31, 0.05);}
    > div dt { background: #a57f1f;}
  }
  #anchor a { 
    background: #a57f1f;
    &:hover { background: #d7aa46;}
  }
  #intro h3:first-of-type { color: #a57f1f;}
}

#non-pole {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-non-pole.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(0, 77, 160, 0.2);
    color: #004da0;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(0, 77, 160, 0.15) .1rem,rgba(0, 77, 160, 0.15) .2rem) rgba(0, 77, 160, 0.05);}
    > div dt { background: #004da0;}
  }
  #anchor a { 
    background: #004da0;
    &:hover { background: #3c8ce6;}
  }
  #intro h3:first-of-type { color: #004da0;}
}

#traffic {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-traffic.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(234, 102, 160, 0.2);
    color: #ea66a0;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(234, 102, 160, 0.15) .1rem,rgba(234, 102, 160, 0.15) .2rem) rgba(234, 102, 160, 0.05);}
    > div dt { background: #ea66a0;}
  }
  #anchor a { 
    background: #ea66a0;
    &:hover { background: #f58cb9;}
  }
  #intro h3:first-of-type { color: #ea66a0;}
}

#drone {
  #tit_onimg {
    background-image: url("../img/structure/bg-visual-drone.jpg");
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.25),2rem 2rem 0 rgba(15, 149, 150, 0.2);
    color: #0f9596;
    &::before { background: repeating-linear-gradient(135deg,transparent,transparent .1rem,rgba(15, 149, 150, 0.15) .1rem,rgba(15, 149, 150, 0.15) .2rem) rgba(15, 149, 150, 0.05);}
    > div dt { background: #0f9596;}
  }
  #anchor a { 
    background: #0f9596;
    &:hover { background: #46c8c8;}
  }
  #intro h3:first-of-type { color: #0f9596;}
}