@charset "UTF-8";
/********************** メインコンテンツ **********************/
/************ 大枠のコントロールタグ/class/id/ ************/
main {
  width: 80%;
  margin: 0 auto;
}

.content_wrap {
  margin: var(--px150) auto;
  position: relative;
}

a.button.pc_only {
  display: flex !important;
}

/* 1カラム*/
/* 2カラム*/
.content_two {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--px70);
}

/* 3カラム*/
.content_three {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px30);
}

.three_item {
  width: calc(33.9% - var(--px30));
}

/* 4カラム*/
.content_four {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px30);
}

.four_item {
  width: calc(25% - var(--px30));
}

.four_item figure {
  -o-object-fit: contain;
     object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

img.attachment-medium {
  width: 100% !important;
  height: 100% !important;
}

[id] {
  scroll-margin-top: var(--px100);
}

/********************** ポイントタグ/class/id/ **********************/
.text_right {
  text-align: right;
}

.n_circle {
  position: relative;
}

.n_circle::before {
  content: "01";
  position: absolute;
  left: -70%;
  top: 0%;
  transform: translate(50%, -50%);
  width: clamp(300px, 20vw, 500px);
  height: clamp(300px, 20vw, 500px);
  border-radius: 50%;
  border: 2px solid var(--sub-color);
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12rem;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  opacity: 0.1;
}

/********************** 下層ページ共通 **********************/
h2 {
  margin-bottom: var(--px30);
}

.underlayer .button {
  margin: var(--px30) 0;
}

.underlayer h2 {
  font-size: var(--fsize50);
  font-family: "M PLUS 1p", sans-serif;
  color: var(--sub-color);
  font-weight: bold;
}

.nav_active {
  color: var(--sub-color);
  font-weight: bold;
}

.underlayer .fv_wrap {
  background-color: #f4f4f4;
  height: 300px;
  width: 90%;
  margin-left: auto;
}

h1.en {
  position: absolute;
  top: 55%;
  left: -5%;
  transform: translateY(-50%);
}

h1.en span {
  display: block;
  color: #000;
}

.pankuzu {
  display: flex;
  gap: 10px;
  width: 80%;
  margin: 1rem auto;
}

.underlayer #content1 {
  margin: var(--px100) auto var(--px150);
}

.underlayer h3::before {
  content: "";
  padding: 1rem;
  background: url(./../images/logo_h3.png) no-repeat center center;
  background-size: contain;
  margin-right: 0.5rem;
}

/************ 会社概要 ************/
#company #content1 article {
  width: calc(60% - var(--px70));
}
#company #content1 article .text_right {
  font-weight: bold;
  margin-top: 1.5rem;
}
#company #content1 figure {
  width: 40%;
  text-align: center;
}
#company #content1 figure img {
  aspect-ratio: 16/12;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
#company #content2 .content_two {
  margin-top: var(--px30);
  align-items: stretch;
}
#company #content2 .content_two h3 {
  text-align: center;
}
#company #content2 .item_01,
#company #content2 .item_02 {
  width: calc(51.7% - var(--px70));
  padding: 2rem;
  background-color: var(--bg_shape-color);
}
#company #content3 .content_one {
  margin: var(--px30) auto;
}
#company #content4 .content_one {
  position: relative;
}
#company #content4 .content_one dl dt.last-dt::before {
  height: 90%;
  bottom: 50%;
}
#company dl {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--px30);
  border-bottom: 1px solid;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
#company dl.first_dl dt::before {
  height: 120%;
  top: 50%;
}
#company dl dt {
  font-size: 1.3rem;
  word-break: keep-all;
  position: relative;
  width: 25%;
  display: flex;
  align-items: center;
}
#company dl dt::before {
  content: "";
  border: 2px solid var(--sub-color);
  position: absolute;
  right: 0;
  height: 200%;
  transform: translateX(50%);
}
#company dl dt::after {
  content: "●";
  position: absolute;
  right: 0;
  color: var(--sub-color);
  transform: translateX(50%);
}
#company dl dt span {
  color: var(--sub-color);
  font-weight: bold;
  margin-right: 0.2rem;
}
#company dl dd {
  width: 20%;
  display: flex;
  align-items: center;
}
#company dl dd:last-child {
  width: calc(55% - var(--px30));
}
#company dl img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16/12;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
#company #content5 {
  position: relative;
}
#company #content5 .deco_circle {
  top: -15%;
  right: -40%;
}

/************ 事業内容 ************/
#service #content1 .content_one {
  width: clamp(50%, 60vw, 80%);
  margin: auto;
}
#service #content1 h2.en {
  text-align: center;
  color: #000;
  font-size: 1.2rem;
}
#service #content2 .content_wrap,
#service #content3 .content_wrap,
#service #content4 .content_wrap {
  position: relative;
}
#service #content2 .content_two .item_01,
#service #content2 .content_two .item_02,
#service #content3 .content_two .item_01,
#service #content3 .content_two .item_02,
#service #content4 .content_two .item_01,
#service #content4 .content_two .item_02 {
  width: calc(50% - var(--px30));
}
#service #content2 .content_two .item_02 img,
#service #content3 .content_two .item_02 img,
#service #content4 .content_two .item_02 img {
  aspect-ratio: 16/12;
  -o-object-fit: contain;
     object-fit: contain;
}
#service #content3 .n_circle::before {
  content: "02";
  left: auto;
  right: 0;
}
#service #content3 .content_two {
  flex-direction: row-reverse;
}
#service #content4 .n_circle::before {
  content: "03";
}
#service #content5 h3 {
  text-align: center;
}
#service #content5 .content_two {
  margin-top: var(--px30);
  gap: var(--px30);
  align-items: stretch;
}
#service #content5 .item_01,
#service #content5 .item_02 {
  width: calc(51.7% - var(--px70));
  padding: 2rem;
  background-color: var(--bg_shape-color);
  text-align: center;
}

/************ 実績 ************/
#works .card_item {
  padding: 1rem 1.5rem;
  border: 2px solid var(--sub-color);
  width: calc(25% - var(--px30));
  background-color: #fff;
}
#works .card_item a {
  font-weight: bold;
  pointer-events: none;
  position: relative;
}
#works .card_item a::before {
  content: "●";
  color: var(--sub-color);
  position: absolute;
  left: -1rem;
  font-size: 0.8rem;
}
#works .card_item a[href]:not([href=""]) {
  color: var(--ac-color);
  pointer-events: auto;
}
#works #content2 {
  position: relative;
}
#works #content2::before {
  content: "";
  background: var(--bg_shape-color);
  width: 100vw;
  height: 130%;
  display: block;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/************ 製品情報 ************/
#product .deco_circle {
  width: clamp(250px, 45vw, 800px);
  height: clamp(250px, 45vw, 800px);
}
#product .content_wrap ul {
  margin-left: 2rem;
}
#product .content_wrap ul li {
  list-style: disc;
}
#product .content_wrap ul li::marker {
  color: var(--sub-color);
}
#product #content1 .deco_circle {
  display: none;
}
#product #content1 .content_wrap,
#product #content2 .content_wrap,
#product #content3 .content_wrap {
  position: relative;
}
#product #content1 .content_two .item_01,
#product #content1 .content_two .item_02,
#product #content2 .content_two .item_01,
#product #content2 .content_two .item_02,
#product #content3 .content_two .item_01,
#product #content3 .content_two .item_02 {
  width: calc(49% - var(--px30));
}
#product #content1 .content_two .item_02 img,
#product #content2 .content_two .item_02 img,
#product #content3 .content_two .item_02 img {
  aspect-ratio: 16/12;
  -o-object-fit: contain;
     object-fit: contain;
}
#product #content2 .deco_circle {
  top: -50%;
  left: -40%;
  transform: rotate(90deg);
}
#product #content3 .deco_circle {
  top: -20%;
  right: -20%;
}
#product.third_layer h2 {
  margin-top: var(--px100);
}
#product.third_layer #content1 {
  margin: 0 auto;
}
#product.third_layer #content1 .item_01,
#product.third_layer #content2 .item_01,
#product.third_layer #content3 .item_01,
#product.third_layer #content4 .item_01 {
  width: calc(39% - var(--px30));
  order: 2;
}
#product.third_layer #content1 .item_02,
#product.third_layer #content2 .item_02,
#product.third_layer #content3 .item_02,
#product.third_layer #content4 .item_02 {
  width: 57%;
  order: 1;
}
#product.third_layer table {
  margin: var(--px30) auto;
}
#product.third_layer table th,
#product.third_layer table td {
  width: auto;
  padding: 0.8rem 0.8rem;
  text-align: center;
  border: 2px solid var(--sub-color);
}
#product #content2 .content_two,
#product #content4 .content_two {
  flex-direction: row-reverse;
}

/************ 採用情報 ************/
#recruit.underlayer .button {
  width: clamp(200px, 20vw, 90%);
  margin: var(--px50) auto;
}

/************ お知らせ ************/
#news.third_layer h2 {
  color: #000;
  background-color: #fff;
  margin-bottom: 5px;
}
#news .post_content {
  margin-top: var(--px30);
}
#news .news_list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--px30);
  border-bottom: 2px solid var(--ac-color);
  width: 60%;
}
#news .news_list div {
  background-color: #fff;
}
#news .button {
  font-family: "Noto Sans", sans-serif;
  width: clamp(180px, 15vw, 90%);
}
#news .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px30);
  margin: var(--px50);
}
#news span.page-numbers.current,
#news .nav-links a {
  padding: 1rem;
  background: #000;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#news .nav-links a {
  background-color: var(--ac-color);
}
#news a.page-numbers {
  word-break: keep-all;
}
#news h2.news_page {
  color: var(--sub-color);
  margin-bottom: var(--px30);
}

/************ お問い合わせ ************/
#contact form {
  width: 80%;
  margin: var(--px150) auto;
}
#contact form select,
#contact form input,
#contact form textarea {
  padding: 1rem;
  background: #f4f4f4;
  border: none;
}
#contact form select {
  width: 50%;
  color: #000;
}
#contact form input {
  width: 100%;
}
#contact form input[type=checkbox] {
  width: auto;
}
#contact form input[type=submit] {
  width: 50%;
  margin: auto;
  display: block;
}
#contact form input::-moz-placeholder {
  color: #b5b5b5;
}
#contact form input::placeholder {
  color: #b5b5b5;
}
#contact form textarea {
  width: 100%;
}
#contact form .validation {
  padding: 0.2rem 0.5rem;
  margin-left: 1rem;
  background: #d50d0d;
  font-size: 0.8rem;
  color: #fff;
}
#contact form p {
  margin-bottom: 1rem;
}
#contact form span.wpcf7-list-item-label a {
  display: inline-block;
  color: var(--ac-color);
  text-decoration: underline;
}

/************ プライバシーポリシー ************/
#privacy_policy h2.wp-block-heading {
  margin: var(--px50) auto 1rem;
  font-size: var(--fsize30);
  color: #000;
}

@media screen and (max-width: 1280px) {
  /************ 会社概要 ************/
  #company #content4 dt {
    width: 32%;
  }
  #company #content4 dd:last-child {
    width: calc(48% - var(--px30));
  }
}
@media screen and (max-width: 1024px) {
  /************ 共通 ************/
  h1.en {
    top: 50%;
  }
  main {
    width: 95%;
    margin: 0 auto;
  }
  .content_two {
    flex-direction: column;
  }
  .item_01,
  .item_02 {
    width: 100% !important;
  }
  .underlayer .fv_wrap {
    width: 93%;
  }
  .pankuzu {
    width: 93%;
  }
  #service .content_two,
  #product .content_two,
  #company .content_two {
    flex-direction: column-reverse !important;
  }
  /************ 会社概要 ************/
  #company #content1 figure {
    width: 50%;
    margin: 1rem auto;
  }
  #company dl dt::before,
  #company dl dt::after {
    content: none;
  }
  /************ 実績 ************/
  #works .content_four .card_item {
    width: calc(51% - var(--px30));
  }
  #works #content2::before {
    height: 110%;
  }
  /************ 製品情報 ************/
  #product.third_layer .content_two {
    gap: 10px;
  }
  #product.third_layer h3 {
    order: 3;
  }
  #product.third_layer #content1 .item_01,
  #product.third_layer #content2 .item_01,
  #product.third_layer #content3 .item_01,
  #product.third_layer #content4 .item_01 {
    order: 2;
  }
  #product.third_layer #content1 .item_02,
  #product.third_layer #content2 .item_02,
  #product.third_layer #content3 .item_02,
  #product.third_layer #content4 .item_02 {
    order: 1;
  }
  #product #content2 .deco_circle {
    top: -10%;
    left: 70%;
  }
  /************ お知らせ ************/
  #news .news_list {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  /************ 共通 ************/
  #product.third_layer table th {
    width: 35%;
    background-color: var(--bg_shape-color);
    padding: 0.5rem 0.2rem;
  }
  #product.third_layer table td {
    width: 65%;
    padding: 0.5rem 0.2rem;
  }
  #product.third_layer table {
    table-layout: fixed;
  }
  /************ 会社概要 ************/
  #company #content1 figure {
    width: 100%;
  }
  #company #content4 dl {
    flex-direction: column;
    width: 100%;
  }
  #company #content4 dl img {
    aspect-ratio: 1/1;
  }
  #company #content4 dl dt::before,
  #company #content4 dl dt::after {
    content: none;
  }
  #company #content4 dt + dd {
    width: 40% !important;
  }
  #company #content4 dl dd,
  #company #content4 dl dd:first-child,
  #company #content4 dl dd:last-child {
    width: 100%;
  }
  #company #content5 .deco_circle {
    right: -80%;
  }
  /************ 事業内容 ************/
  #service #content1 .content_one {
    width: 100%;
  }
  #service .n_circle::before {
    left: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: clamp(200px, 18vw, 300px);
    height: clamp(200px, 18vw, 300px);
    border-radius: 50%;
    border: 2px solid var(--sub-color);
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
  }
  #service #content3 .n_circle::before {
    left: 0;
    right: auto;
  }
  /************ 実績 ************/
  #works .content_four .card_item {
    width: 100%;
  }
  /************ お知らせ ************/
  #news .news_list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  /************ お問い合わせ ************/
  #contact form {
    width: 100%;
    margin: var(--px150) auto;
  }
  #contact form select,
  #contact form input,
  #contact form textarea {
    width: 100%;
  }
  #contact form input[type=submit] {
    width: 80%;
  }
}/*# sourceMappingURL=style.css.map */