/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/blocks/hero-section/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.hero-section {
  align-items: center;
  aspect-ratio: 1920/1180;
  display: flex;
  position: relative;
}
@media (max-width: 781px) {
  .hero-section {
    align-items: flex-start;
    aspect-ratio: auto;
    flex-direction: column;
    padding: 0 0 60px;
  }
}
.hero-section::before {
  background-image: linear-gradient(135deg, #0050a0, #0098cc);
  bottom: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: "";
  display: block;
  left: 0;
  padding: 49.0625% 0 0;
  position: absolute;
  width: 50%;
}
@media (max-width: 781px) {
  .hero-section::before {
    aspect-ratio: 1/1;
    padding: 0;
    width: 100%;
  }
}
.hero-section::after {
  aspect-ratio: 1/1;
  background-image: linear-gradient(90deg, #00D3EF 1px, transparent 1px);
  background-size: 6px 6px;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  content: "";
  display: block;
  position: absolute;
  right: 0;
  transform: translate(0, 50%);
  width: 10.4166666667%;
}
@media (max-width: 781px) {
  .hero-section::after {
    display: none;
  }
}
.hero-section--top {
  align-items: flex-start;
  padding-top: 4rem;
}
.hero-section--bottom {
  align-items: flex-end;
  padding-bottom: 4rem;
}
.hero-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
}
.hero-section__bg {
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  right: 0;
  top: 0;
  width: 81.25%;
  z-index: 5;
}
@media (max-width: 781px) {
  .hero-section__bg {
    margin: 0 0 -41.3333333333vw auto;
    position: relative;
    width: 85.3333333333%;
  }
}
.hero-section__bg::before {
  content: "";
  display: block;
  padding: 69.2307692308% 0 0;
}
@media (max-width: 781px) {
  .hero-section__bg::before {
    padding: 140.625% 0 0;
  }
}
.hero-section__container {
  padding: 0 0 0 clamp(1.875rem, -1.007rem + 12.3vw, 13.75rem);
  position: relative;
  z-index: 10;
}
.hero-section__content {
  background-image: linear-gradient(90deg, #00D3EF, #0050A0);
  padding: clamp(1.938rem, 1.125rem + 3.47vw, 4.375rem) clamp(1.375rem, 0.792rem + 2.49vw, 3.125rem);
  position: relative;
  z-index: 2;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
.hero-section__content::after {
  background-image: linear-gradient(0deg, #0050A0 1px, transparent 1px), linear-gradient(90deg, #0050A0 1px, transparent 1px);
  /* 横線の間隔3px (線1px + 空白2px) */
  /* 縦線の間隔3px (線1px + 空白2px) */
  background-size: 3px 3px;
  content: "";
  display: block;
  height: 100%;
  right: 0;
  position: absolute;
  bottom: clamp(0.563rem, 0.333rem + 0.98vw, 1.25rem);
  width: calc(100% + clamp(0.563rem, 0.333rem + 0.98vw, 1.25rem));
}
.hero-section__title, .hero-section__subtitle, .hero-section__description {
  position: relative;
  z-index: 5;
}
.hero-section__title {
  font-family: Barlow, sans-serif;
  font-size: clamp(1.813rem, 1.191rem + 2.65vw, 4.375rem);
  font-weight: bold;
  margin-bottom: clamp(0.938rem, 0.422rem + 2.2vw, 3.063rem);
}
.hero-section__subtitle {
  font-size: clamp(2.25rem, 1.431rem + 3.5vw, 5.625rem);
  font-weight: 700;
  line-height: 1.3333333333;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
.hero-section__subtitle-line {
  display: block;
}
.hero-section__description {
  font-size: clamp(0.813rem, 0.706rem + 0.45vw, 1.25rem);
  line-height: 1.6;
}
/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/blocks/hero-section/editor.scss ***!
  \****************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.wp-block-noda-kogyo-hero-section.is-selected, .wp-block-noda-kogyo-hero-section.has-child-selected {
  outline: 1px dashed #007cba;
}
.wp-block-noda-kogyo-hero-section .hero-section__subtitle-line {
  display: block;
}

.image-preview-wrapper {
  margin: 1rem 0;
}
.image-preview-wrapper img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

.components-textarea-control__input[aria-label=サブタイトル] {
  min-height: 80px;
}

.components-panel__body .components-base-control {
  margin-bottom: 1.5rem;
}

/*# sourceMappingURL=style.css.map*/