@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


.body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
}



/* 削除 */

html {
  margin-top: 0 !important;
}

.cf::after {
  display: none;
}

.footer-bottom-content {
  float: none;
  text-align: left;
}

.apdt-pc-only,
#wpadminbar {
  display: none;
}

a:hover {
  color: initial;
}

#navi .navi-in a:hover, #footer a:not(.sns-button):hover {
  background-color: initial;
}

.grecaptcha-badge {
  visibility: hidden;
}



h1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}


/* 共有 */

p,.copy_1,h2,h3 {
  line-height: normal;
}

p {
  font-size: 1.1em;
  text-align: justify;
}

a {
  opacity: 1;
  text-decoration: none;
  color: #000;
}


li {
  list-style: none;
}

ol, ul {
  padding-left: 0;
}


.inner,
#snow-monkey-form-78 {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.wrap {
  width: 100%;
  max-width: initial;
}

.content {
  margin-top: 0;
}


.button {
  position: relative;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  background-color: #fff;
  transition: 1s all ease-in-out;
  opacity: 0;
}
.active .button {
  opacity: 1;
}


.button a {
  display: block;
  padding: .5em 5.3em;
  font-size: 1.5em;
  border: 2px #0D3594 solid;
  transition: .2s all ease-in-out;
  color: #0D3594;
}
.button:hover a {
  color: #fff;
}

.button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #0D3594;
  transition: .2s all ease-in-out;
  clip-path: polygon(0 0 , 20% 0 , 0 100% , 0 100%);
}
.button:hover::before {
  clip-path: polygon(0 0 , 100% 0 , 100% 100% , 0 100%);
}

.arrow-right {
  position: absolute;
  bottom: 30%;
  right: 5%;
  display: inline-block;
  vertical-align: middle;
  z-index: 2;
  width: 5em;
  height: 2px;
  line-height: 1;
  transition: .2s all ease-in-out;
  background: #0D3594;


}
.button:hover .arrow-right {
  background: #fff;

}

.arrow-right::before {
  position: absolute;
  top: 0.01em;
  right: -0.1em;
  content: '';
  width: 1em;
  height: 2px;
  transform: rotate(35deg);
  box-sizing: border-box;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  transform-origin: top right;
  transition: .2s all ease-in-out;
  border: 2px solid #0D3594;
}
.button:hover .arrow-right::before {
  border: 1px solid #fff;
}

.section {
  width: 100%;
  padding: 5em 0;
  font-size: clamp(14px ,1.67vw , 16px );
}

/* タイトル */
.title {
  margin-bottom: 2.5em;
  text-align: center;
  transition: 1s all ease;
  opacity: 0;
}
.active .title {
  opacity: 1;
}

.title p {
  font-size: 1.5em;
  color: #FF8600;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.05em;
}

.title-e {
  text-align: center;
}

#about .title-e {
  text-align: left;
}


.title h2 {
  font-size: 3.1em;
  color: #0D3594;
}

.title .title-text {
  width: 100%;
  margin: 3.1em auto 0 auto;
  text-align: left;
}

#facility .title .title-text {
  max-width: 800px;
}

.title-text p {
  font-size: 1.1em;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: normal;
  text-align: center;
  color: #000;

}

.title span {
  display: inline-block;
}

.sp,
.sp2 {
  display: none;
}
.pc {
  display: block;
}

.mobile-footer-menu-buttons  {
  display: none;
}


/* パンくず */
.breadcrumb {
  display: flex;
  gap: 1em;
  width: 90%;
  margin: 0 auto;
  padding-top: 1em;
  font-size: 13px;
  color: #000;

}

.breadcrumb a {
  color: #FF8600;
  border-bottom: 1px solid #FF8600;
  transition: .2s all ease;
  opacity: 1;
}
.breadcrumb a:hover {
  opacity: .5;
}



/* ---------------------------------------------------- header　全ページ共通 ------------------------------------------------------ */



#ham,
#ham-bg {
  display: none;
}

.navi-in > ul li {
  width: auto;
  height: auto;
}



.hlt-tm-right .navi-in > ul {
  width: 50%;
  justify-content: space-between;
}

.header {
  width: 100%;
  height: 6vw;
  max-height: 75px;
  font-size: min(1.05vw, 16px);
  background-color: #fff;
}

.header-in {
  justify-content: space-between;
  height: 100%;
  flex-direction: row;
  align-items: center;
}

/* ヘッダーロゴ */
.header .logo {
  width: 14%;
  max-width: 210px;
  height: 100%;
  text-align: left;
  transition: .2s all ease-in-out;
  opacity: 1;
}
.header .logo:hover {
  opacity: .6;
}

.footer .logo {
  width: 35%;
  text-align: left;
}

.logo_img {
  width: auto;
  height: 95%;
}
.logo_img img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.header .logo_a,
.footer .logo_a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1em;
}

.logo_text p {
  font-size: 1em;
  white-space: nowrap;
}

.logo_text p:nth-child(2) {
  font-size: 1.56em;
}


/* ヘッダーメニュー */

#header ul {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}


#header li,
#footer li {
  position: relative;
  display: block;
  font-size: min(1.56vw , 18px);
}

#footer li a {
  font-size: min(1.9vw);
  display: block;
}
#header li a {
  display: block;
}

#header li::after,
#footer li::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  transform-origin: bottom right;
  transform: scale(0, 1);
  transition: transform .3s ease;
  background-color: #0D3594;
  
}
#footer li::after {
  background-color: #fff;
}

#header li:hover::after,
#footer li:hover::after {
  transform: scale(1, 1.1);
  transform-origin: bottom left;

}


.header .contact {
  height: 100%;
}

.header .contact-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 100%;
}

#header .tel {
  margin: 0 1em 0 2.5em;
}

.tel p{
  font-size: 1em;
}
.tel span {
  font-size: 1.87em;
}

#header .button {
  height: 100%;
}


.contact_botton {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1em;
  border: 2px #FF8600 solid;
  font-size: min(1.56vw , 18px);
  background-color: #FF8600;
  color: #fff;
  transition: .2s all ease-in-out;

}
.contact_botton::before {
  content: '';
  display: block;
  height: auto;
  width: 1.5em;
  aspect-ratio: 1 / 1;
  margin-right: .2em;
  background: url(img/contact_mail_w.webp) no-repeat center / contain;

}

.contact_botton:hover {
  border: 2px #FF8600 solid;
  color: #FF8600;
  background-color: #fff;
}
.contact_botton:hover::before {
  background: url(img/contact_mail_o.webp) no-repeat center / contain;

}

/* ---------------------------------------------------- main ------------------------------------------------------ */



.main {
  padding-left: 0;
  padding-right: 0;
  padding: 0;
}


/* ---------------------------------------------------------------------- TOPページ ------------------------------------------------------------------- */


/* ---------------------------------------------------- fv ------------------------------------------------------ */

.fv {
  position: relative;
  width: 100%;
  height: auto;
  font-size: min(1.05vw, 16px);
}

/* 画像スライド */
.splide {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 1080px;
}
.splide .splide__track,
.splide .splide__list,
.splide .splide__slide {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 1080px;

}

.splide li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* キャッチコピー */
.fv .copy {
  position: absolute;
  top: 65%;
  left: 5%;
  transform: translateY(-50%);
  width: auto;
}

.copy .copy_1 {
  font-size: min(4.68vw , 140px);
  line-height: normal;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  color: #0D3594;

}

.copy .copy_1 span::after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  clip-path: polygon(6% 0, 6% 0, 0 100%, 0 100%);
  transition: 1.5s all ease-in-out;
  background-color: #fff;

  
}
.copy .copy_1 span {
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(6% 0, 6% 0, 0 100%, 0 100%);
  padding-left: .5em;
  padding-bottom: .08em;
  transition: 1.5s all ease-in-out;

}

.copy .copy_1 span,
.copy .copy_1 span:nth-child(1) {
  margin-bottom: .2em;
}

.copy .copy_1 span.loaded,
.copy .copy_1 span.loaded::after{
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}


.copy .copy_1 span:nth-child(2).loaded,
.copy .copy_1 span:nth-child(2).loaded:after {
  clip-path: polygon(6% 0, 90% 0, 84% 100%, 0 100%);
}

.copy .copy_2 {
  margin-top: 1em;
  font-size: 1.87em;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
  color: #fff;

}


/* ---------------------------------------------------- about ------------------------------------------------------ */

#about {
  position: relative;
  margin-top: 0;
  padding-top: 8em;
}


/* 三角 */
#about::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 1.5;
  clip-path: polygon(0 0, 0 0, 100% 100%, 100% 0);
  background-color: #0D3594;
}

#about .title {
  text-align: left;
}

#about .inner {
  text-align: left;
}

#about .about-wrap {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 3.1em;
}

.about-text {
  transform: translateX(-10%);
  transition: .8s all ease-in-out;
  opacity: 0;
}

.active .about-text {
  transform: translateX(0);
  opacity: 1;

}

.about-text .title {
  margin-bottom: 0;
}

.about-text .title h2 {
  margin-bottom: .5em;
  font-size: min(4vw , 54px);
  color: #0D3594;
}


.about-text {
  width: 50%;
  height: auto;
}

.textbox {
  width: 92%;
  line-height: 2.2;
}


.about-img {
  width: 45%;
  height: auto;
  transition: 1s all ease-in;
  opacity: 0;

}

.active .about-img {
  opacity: 1;
}

.about-img img {
  width: 100%;
  height: 100%;
}




/* ---------------------------------------------------- support ------------------------------------------------------ */

/* サポートタイトル */
#support .title {
  width: auto;
  margin-bottom: 3.125em;
  text-align: center;
  transition: 1s all ease-in-out;
  opacity: 0;
}
#support .active .title {
  opacity: 1;

}

#support .title h2 {
  position: relative;
  display: inline-block;
  padding: 0 3.5em;
  text-align: center;
  font-size: min(4.1vw,50px);
  color: #0D3594;

}
#support .title h2::before,
#support .title h2::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5em;
  height: 2px;
  background-color: #0D3594;
}
#support .title h2::before {
  left: 0;
}
#support .title h2::after {
  right: 0;
}


/* サポート内容 */

.supprt-wrap {
  width: 100%;
  height: auto;
  transition: 1s all ease-in-out;
  transform: translateY(10%);
  opacity: 0;

}
.active .supprt-wrap {
  transform: translateY(0);
  opacity: 1;
}

.supprt-wrap ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2em;
}

.supprt-wrap li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100%/4 - 1.5em);
  height: auto;
  aspect-ratio: 10 / 7;
  background-color: #F2F2F2;
}
.supprt-number {
  position: absolute;
  top: -4%;
  left: 2%;
  font-size: 1.875em;
  color: #FF8600;
}

.supprt-wrap li p {
  margin-top: .5em;
  font-size: min(4.1vw, 60px);
  font-weight: 700;
  line-height: .7;
  text-align: center;
  color: #0D3594;

}
.supprt-wrap li.supprt-a p {
  font-size: min(2.4vw , 30px);
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.supprt-wrap .supprt-1 {
  font-size: .5em;
}


.supprt-wrap .supprt-2 {
  font-size: min(1.67vw, 18px);
  color: #000;
}
.supprt-wrap .supprt-a .supprt-2 {
  display: block;
  letter-spacing: 0;

}



/* ---------------------------------------------------- service ------------------------------------------------------ */


.service-wrap,
.product-wrap,
.facility-wrap {
  width: 100%;
  margin-bottom: 3.1em;
  transition: 1s all ease;
  transform: translateY(10%);
  opacity: 0;

}
.active .service-wrap,
.active .product-wrap,
.active .facility-wrap {
  transform: translateY(0);
  opacity: 1;
}

.service-wrap ul,
.product-wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  width: 100%;
  height: auto;
}

.service-wrap li,
.product-wrap li {
  width: calc(100%/3 - 1.5em);
  height: 100%;
}

.service-wrap li img,
.product-wrap li img {
  object-fit: cover;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
}

.service-wrap p,
.product-wrap p  {
  width: 100%;
  padding: .5em 0;
  border-top: 0;
  border: 2px #0D3594 solid;
  text-align: center;
  letter-spacing: 0.05em;
  color: #0D3594;
  background-color: #fff;
}

.lettr {
  letter-spacing: -0.05em;
}
.lettr span {
  display: inline-block;
}



/* ---------------------------------------------------- product ------------------------------------------------------ */


#product {
  width: 100%;
  background-color: #F2F2F2;
}




/* ---------------------------------------------------- facility ------------------------------------------------------ */




.facility-wrap ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 2em;
}

.facility-wrap li {
  position: relative;
  width: calc(100% / 4 - 1.5em);
  height: auto;
  aspect-ratio: 10 / 7;
}

.facility-wrap li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.facility-wrap li:hover::after {
  background-color: #fff;
  opacity: .2;
  
}




/* ---------------------------------------------------- contact ------------------------------------------------------ */



#contact .inner {
  padding: 3.1em 0;
  border: 2px #0D3594 solid;
  transition: 1s all ease;
  opacity: 0;
}
#contact .inner.active {
  opacity: 1;
}

#contact .title {
  width: 85%;
  margin: 0 auto 3.1em auto;
  opacity: 1;
}

#contact .title p {
  text-align: left;
  width: 50%;
}
#contact .title p span {
  display: inline-block;
}

#contact .title .title-text {
  display: flex;
  align-items: end;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

#contact .title h2 {
  margin-right: 1em;
}

.contact-wrap {
  display: flex;
  justify-content: space-between;
  width: 85%;
  margin: 0 auto;
  gap: 4vw;
}

#contact a,
#contact-copy a {
  color: #fff;
}


#contact .contact-mail:hover  a {
  color: #FF8600;
}

.contact-wrap .contact-tel ,
.contact-wrap .contact-mail,
#contact-copy .contact-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 7.5em;
  width: 50%;
  transition: .2s all ease-in-out;
  background-color: #0D3594;
  border: 2px solid #0D3594;
}
.contact-wrap .contact-mail {
  background-color: #FF8600;
  border: 2px solid #FF8600;
}
.contact-wrap .contact-mail:hover {
  background-color: #fff;
}

.contact-wrap .contact-tel {
  margin-bottom: 1.5em;
  color: #fff;
}

.contact-tel .tel-n {
  font-size: 2.5em;
  line-height: 0;
}
.contact-tel .tel-n::before,
.contact-wrap .contact-mail a::before {
  content: '';
  display: inline-block;
  width: auto;
  height: .8em;
  aspect-ratio: 1 / 1;
  margin-right: .2em;
  background: url(img/contact_tel_w.webp) no-repeat center / contain;
}
.contact-tel .tel-n::after {
  content: '';
  display: block;
  width: 120%;
  height: 2px;
  transform: translateX(-8%);
  margin: .2em 0;
  background-color: #fff;
}


.contact-wrap .contact-mail a {
  font-size: min(2.4vw, 32px);
  display: flex;
  align-items: center;
}
.contact-wrap .contact-mail a::before {
  height: 1.5em;
  background: url(img/contact_mail_w.webp) no-repeat center / contain;
}

.contact-wrap .contact-mail:hover a::before {
  background: url(img/contact_mail_o.webp) no-repeat center / contain;
}



#snow-monkey-form-78 {
  padding-bottom: 5em ;
  margin-bottom: 0;
}

.smf-form--simple-table+.smf-action {
  margin-bottom: 0;
}




/* ---------------------------------------------------------------------- 下層ページ　共有 ------------------------------------------------------------------- */

/* キービジュアル */
.key-visual {
  position: relative;
  width: 100%;
  height: 30vw;
  min-height: 400px;
  font-size: min(1.43vw, 16px);
}

.key-visual::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #5E6688;
  opacity: .4;
}

.key-visual.about-fv {
  background: url(img/key_visual_about.webp) no-repeat center / cover;
}
.key-visual.service-fv {
  background: url(img/key_visual_service.webp) no-repeat center / cover;
}
.key-visual.product-fv {
  background: url(img/fv_2.webp) no-repeat center / cover;
}
.key-visual.facility-fv {
  background: url(img/key_visual_facility.webp) no-repeat center / cover;
}
.key-visual.faq-fv {
  background: url(img/key_visual_faq.webp) no-repeat center / cover;
}
.key-visual.privacy-fv {
  background: url(img/key_visual_privacy.webp) no-repeat center / cover;
}
.key-visual.campany-fv {
  background: url(img/key_visual_campany.webp) no-repeat center / cover;
}


.content-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  white-space: nowrap;
  font-size: min(5.98vw , 90px);
  letter-spacing: 0.1em;
  color: #fff;
}

.content-title2 {
  pointer-events: none;
  position: absolute;
  bottom: -5%;
  left: -0.6%;
  font-size: min(10vw , 170px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  opacity: .5;
  color: #fff;
}

/* 各コンテンツのコピー */



#content-copy h3 {
  font-size: min(3.59vw, 50px);
  margin-bottom: .5em;
}

.copy_textbox {
  margin: 0 auto;
  width: 70%;
}

.copy_textbox p {
  margin: 0 auto;
  text-align: left;
  line-height: 2.2;
}

      


/* ---------------------------------------------------------------------- ABOUTページ ------------------------------------------------------------------- */



/* ---------------------------------------------------- feature ------------------------------------------------------ */

#feature {
  position: relative;
}



.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 80vw;
  max-height: 1320px;
  min-height: 1000px;
  clip-path: polygon(0 40% , 100% 0 , 100% 60%, 0 100%);
  background-color: #F2F2F2;
}


.feature-wrap {
  display: flex;
  width: 100%;
  height: auto;
  gap: 3em;

  transition: 1s all ease;
  margin-bottom: 5em;
  transform: translateY(10%);
  opacity: 0;


}
.feature-wrap:last-child {
  margin-bottom: 0;
}
.feature-wrap.active {
  transform: translateY(0);
  opacity: 1;
}

.reason_title {
  position: relative;
  display: inline-block;
  padding-bottom: .25em;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
  border-bottom: .25em #FF8600 solid;
}

.reason_title span {
  display: inline-block;
}


.f-content {
  width: 60%;
  text-align: left;
}



.f-content .f-title {
  display: inline-block;
  padding: .5em 1em;
  transform: translateY(.1em);
  margin-right: 1em;
  font-size: .5em;
  color: #fff;
  background-color: #0D3594;
}

.f-content h3 {
  display: flex;
  align-items: center;
  margin-bottom: .5em;
  font-size: 3em;
  line-height: 1;
}

.f-content.f-img {
  width: 40%;
  height: auto;
  aspect-ratio: 10 / 7;
}
.f-content.f-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.f-text {
  line-height: 2.2;

}

/* ---------------------------------------------------- feature ------------------------------------------------------ */

.detail-wrap {
  text-align: left;
  margin-bottom: 5em;
}
.detail-wrap:last-child {
  margin-bottom: 0;
}

.detail-wrap h3 {
  position: relative;
  margin-bottom: 1em;
  font-size: 2.5em;

}
.detail-wrap h3::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  transform: translate(-15%, -15%);
  z-index: -1;
  width: 2em;
  height: 1.8em;
  clip-path: polygon(0 0 , 100% 0 , 0 100% , 0 100%);
  background-color: #F2F2F2;
}

.detail-wrap .d-no {
  margin-right: .2em;
  font-size: 1.5em;
  font-family: "Roboto", sans-serif;
  color: #0D3594;
}

.detail-wrap p {
  line-height: 2;

}

/* 協力工場 */

.d-1 {
  margin-bottom: 2.5em;
}

.collab {
  width: 65%;
  min-width: 520px;
  padding: 2em;
  font-size: 1.1em;
  background-color: #F2F2F2;
}

.collab-title {
  font-weight: 700;
  margin-bottom: .5em;
}

.collab-content ul {
  display: flex;
  flex-wrap: wrap;
}

.collab-content ul li {
  width: 50%;
}


/* ---------------------------------------------------- voice ------------------------------------------------------ */


.voice-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 3em;
  margin-bottom: 3.1em ;
}

.voice-wrap .voice01 {
  width: calc(100%/3 - 2em);
}

.voice-cease {
  padding: .5em;
  margin-bottom: 1em;
  font-size: 1.5em;
  color: #fff;
  background-color: #FF8600;
}


.voice01 img {
  width: 55%;
  height: auto;
  margin: 0 auto 1.5em auto;
}

.v-text {
  line-height: 2;
}

.v-title {
  margin-bottom: 1em;
  text-align: center;
  font-size: 1.5em;
  color: #0D3594;
}


/* ---------------------------------------------------------------------- SERVICEページ ------------------------------------------------------------------- */


/* ---------------------------------------------------- 部署 ------------------------------------------------------ */

#division {
  position: relative;
}

#division .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4em;

}

.dicision-wrap {
  width: calc(100% /2 - 2em);
  transition: 1s all ease;
  opacity: 0;
}
.dicision-wrap.active {
  opacity: 1;
}

.d-content {
  width: 100%;
  margin-bottom: 1em;
}

.d-content:nth-child(1) {
  position: relative;
  padding-left: 1em;
}
.d-content:nth-child(1):before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  width: 3px;
  height: 100%;
  margin-right: .25em;
  background-color: #0D3594;
}

.d-content img {
  width: 100%;
}

.d-content h3 {
  display: flex;
  align-items: center;
  margin-bottom: .25em;
  font-size: 2.5em;
  text-align: justify;
  line-height: 1;
  color: #0D3594;

}

.d-content p {
  line-height: 2;
  text-align: left;

}
.d-content span {
  display: inline-block;
}


/* ---------------------------------------------------- 営業品目 ------------------------------------------------------ */

#item .inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

#item .title h2 {
  letter-spacing: 0.1em;
}

#item .item_bg .item-inner {
  flex-direction: row-reverse;
}

#item .item-inner:last-child {
  margin-bottom: 0;
}

.item-inner {
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 366px;
  max-width: 1200px;
  margin: 0 auto 5em auto;
  transition: 1s all ease;
  opacity: 0;
  transform: translateY(10%);
}
.item-inner.active {
  opacity: 1;
  transform: translateY(0);
}

.item_bg {
  position: relative;
  margin-bottom: 5em;
}

.item_bg1,
.item_bg2 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0 , -50%);
  width: 90vw;
  height: 122%;
  clip-path: polygon(0 0 , 90% 0 , 100% 100% , 0 100%);
  background-color: #F2F2F2;
}
.item_bg2 {
  left: initial;
  right: 0;
  clip-path: polygon(10% 0 , 100% 0 , 100% 100% , 0 100%);

}

/* 品目タイトル */
.item-title {
  width: 100%;

}

.item-title h3 {
  display: inline-block;
  width: 100%;
  margin-bottom: .5em;
  padding: .5em 1em;
  font-size: 2.5em;
  font-weight: 400;
  color: #fff;
  background-color: #0D3594;
}

.i-feature {
  display: flex;
  align-items: center;
  margin-right: 1em;
}

.i-feature::before {
  content: '';
  width: auto;
  height: 1.2em;
  aspect-ratio: 5 / 4;
  margin-right: .5em;
  background: url(img/service_check.webp) no-repeat center / contain;
}


/* 品目内容 */


.item-wrap {
  width: 40%;
  text-align: left;
}
.item-wrap:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-wrap_img {
  display: none;
}

.item-wrap_img.item-pc,
.item-wrap_img.item-pc2{
  display: flex;
  width: 50%;
}
.item-wrap_img img {
  object-fit: cover;
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
}

#item .item_bg.one .item-inner .item-wrap_img img {
  aspect-ratio: 2 / 1;
  width: 100%;
  height: auto;
  justify-content: right;
}


.item-r {
  flex-direction: row-reverse;
}

.i-content {
  width: 50%;
}

.i-content img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.item-copy {
  position: relative;
  padding-left: .25em;
  font-size: 1.5em;
  font-weight: 700;
  text-align: left;
}
.item-copy::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #0D3594;
}


.i-work {
  width: 100%;
  height: auto;
  text-align: left;
}

.work1 {
  font-size: 1.5em;
  margin-bottom: .5em;
  color: #0D3594;
}

.i-work ul {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin-bottom: 3.1em;
  padding-left: .5em;
  text-align: left;
  border-left: 6px #0D3594 solid;
}


.i-work ul li {
  width: 50%;
}


/* ---------------------------------------------------------------------- PRODCTページ ------------------------------------------------------------------- */


/* ----------------------------------------------------　製品紹介 ------------------------------------------------------ */

#product-item {
  position: relative;
}

.p-wrap {
  width: 100%;
  height: auto;
  margin-bottom: 5em;
  text-align: left;
  transition: 1s all ease;
  opacity: 0;
  transform: translateY(10%);
}
.p-wrap.active {
  opacity: 1;
  transform: translateY(0);
}

.p-wrap:last-child {
  margin-bottom: 0;
}
#p-2,
#p-3 {
  position: absolute;
  left: 0;
  transform: translateY(-5em);
  width: 100%;
  height: 5em;
  padding-top: 5em;

}

.p-wrap h3 {
  position: relative;
  margin-bottom: 0.45em;
  padding: .5em 0 .5em 1.5em;
  font-size: 2.5em;
}
.p-wrap h3::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 2em;
  height: 1.8em;
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
  background-color: #0D3594;
}
.p-wrap h3::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}

.p-wrap p {
  margin-bottom: 2.8em;
  line-height: 2;
}
.p-wrap span {
  color: #FF8600;
}

.p-wrap2 {
  width: 100%;

}

.p-wrap2 ul {
  display: flex;
  gap: 2em;
}

.p-wrap2 ul li {
  width: calc(100%/3 - 1em);
}

.p-wrap2 ul li img {
  width: 100%;
}


.p-wrap2 p {
  margin-bottom: 0;
  text-align: center;
  line-height: 1.7;

}


/* ---------------------------------------------------- 提案事例 ------------------------------------------------------ */

.pr {
  width: 100%;
  height: auto;
  margin-bottom: 5em;
  transition: 1s all ease;
  opacity: 0;
  transform: translateY(10%);
}
.pr.active {
  opacity: 1;
  transform: translateY(0);

}

.pr:last-child {
  margin-bottom: 0;
}

/* 事例タイトル */
.pr h3 {
  position: relative;
  display: flex;
  align-items: baseline;
  padding-bottom: 0.2em;
  font-size: 2.5em;
  text-align: left;
  color: #FF8600;

}
.pr h3::after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: #FF8600;
}


.pr .case {
  font-size: 0.6em;
}
.pr .case2 {
  margin-left: 0.2em;
  font-size: 1.6em;

}


.pr .cross {
  position: relative;
  display: block;
  transform: translateY(0.1em);
  width: auto;
  height: 1em;
  aspect-ratio: 1 / 1;
  margin: 0 0.5em;
}
.cross::before {
  position: absolute;
  width: 1em;
  height: 1em;
  opacity: 1;
  background-color: #FF8600;
}


.pr .pr-imgbox p {
  font-size: .8em;
}

/* 事例内容1 */

.pr-wrap {
  width: 100%;
  margin-top: 1.5em;
}


.pr-text:last-child {
  margin-bottom: 0;
}

.pr-text01,
.pr-text02 {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.5em;

}
.pr-text02 {
  align-items: normal;
  margin-bottom: 0;
}


.pr-textbox p span {
  color: #FF8600;
}

.pr-imgbox {
  width: 90%;
  height: auto;
}

.pr-text02 .pr-imgbox {
  width: 90%;
}

.pr-imgbox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  height: auto;
}
.pr-imgbox ul li {
  width: calc(100% / 4 - .75em);
}
.pr-imgbox ul li img {
  width: 100%;
}
.pr-imgbox p {
  text-align: center;
}
.pr-imgbox p span {
  display: inline-block;
}

.pr-text {
  letter-spacing: -0.1em;
}

.pr-title1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  min-width: 100px;
  height: auto;
  margin-right: 1em;
  padding: .5em 0;
  text-align: center;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #0D3594;
}


.pr-img {
  width: 31%;
  height: auto;
  max-height: 312px;
  aspect-ratio: 5 / 4.1;
}
.pr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.pr-title2 {
  font-size: 1.5em;
}

.pr-t2 {
  display: flex;
  line-height: 1.7;
}
.pr-t2::before {
  content: '・';
}

.pr04 {
  display: flex;
}


/* ---------------------------------------------------- 納品実績 ------------------------------------------------------ */


#delivery td p {
  display: flex;
  align-items: center;
}
#delivery td p::before,
#delivery td span::before {
  content: '';
  display: inline-block;
  width: .3em;
  height: auto;
  aspect-ratio: 1 / 1 ;
  border-radius: 50%;
  margin-right: .5em;
  background-color: #000;
}

#delivery td p.sp {
  display: none;
}

#delivery td span {
  margin-left: auto;
  width: 50%;
}

#delivery .table {
  max-width: 800px;
  margin: 0 auto;
}
.sup {
  text-align: right;
}

#delivery .f-content01 {
  width: 30%;
}
#delivery .f-content02 {
  width: 70%;
}

#delivery tr:nth-child(even) {
  background-color: #F2F2F2;
}

thead {
  display: contents;
}

/* ---------------------------------------------------------------------- FACILITYページ ------------------------------------------------------------------- */

#main-f {
  position: relative;
  width: 100%;
  height: auto;
}


/* 主要生産設備 */
.main-f-wrap {
  width: 100%;
  height: auto;
}

.main-f-wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  width: 100%;
}

.main-f-wrap li {
  position: relative;
  width: calc(100% / 5 - 1.2em);
  height: auto;
  aspect-ratio:  1 / 1;
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.45);
}

.main-f-wrap li a {
  display: block;
  width: 100%;
  height: 100%;
}

.main-f-wrap li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.main-f-wrap li p {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 55px ;
  color: #fff;
  background-color: rgba(13, 53, 148, .5);
}

.table {
  opacity: 0;
  transition: 1s all ease;
}
.active .table {
  opacity: 1;
}



/* 各設備詳細 */

.f-conetnt2 {
  margin-bottom: 5em;
}

.f-conetnt2:last-child {
  margin-bottom: 0;
}

.f-wrap01 {
  width: 100%;
  display: flex;
  gap: 3.5em;
  align-items: center;
  transition: 1s all ease;
  opacity: 0;
}
.active .f-wrap01 {
  opacity: 1;
}

.f-wrap02 {
  width: 50%;
}

.f-wrap02 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.7;
}

.f-wrap02 h2 {
  margin-bottom: 1em;
  font-size: min(3.8vw , 40px);
  text-align: left;
  letter-spacing: -0.03em;
}
.f-wrap02 h2 span {
  display: inline-block;
}

.f-wrap02 p {
  font-size: 1.5em;
  line-height: 2;
}

/* 表の調節 */

.f-table {
  overflow: scroll;
  text-align: left;
}

.f-table table {
  white-space: nowrap;

}

.f-content01 {
  width: 30%;
}
.f-content02 {
  width: 15%;
}
.f-content03 {
  width: 15%;
}
.f-content04 {
  width: 30%;
}
.f-content05 {
  width: 10%;
}

.f-table .f-border td {
  border-top: 0;
}

table:not(.has-border-color) th, table:not(.has-border-color) td {
  border-color: #000;
  background-color: #fff;

}
#delivery table:not(.has-border-color) td {
  background-color: transparent;
  padding: 1em;
}

table:not(.has-border-color) th {
  color: #fff;
  background-color: #0D3594;
  border-color: #fff;
  border-top: #0D3594 1px solid;
  border-left: #1d1e21 1px solid;
}
table:not(.has-border-color) th:last-child {
  border-right: #0D3594 1px solid;

}
table:not(.has-border-color) th.b_1 {
  border-bottom: #0D3594 1px solid;
}


table tr:nth-of-type(2n+1) {
  background-color: transparent;
}

.f-table td {
  border-left: 10em;
}

/* スクロール */

.f-scroll {
  position: relative;
  transform: translateX(0);
  width: 8em;
  height: 2em;
  margin-left: auto;
  animation: scroll 1.5s alternate-reverse infinite ease-in-out;
}
#delivery .f-scroll {
  margin-bottom: 1em;
}

.f-scroll::before {
  position: absolute;
  content: '';
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.f-scroll::after {
  position: absolute;
  content: '';
  transform: rotate(35deg);
  transform-origin: top right;
  bottom: -0.05em;
  right: -0.1em;
  width: 1em;
  height: 2px;
  border-top: 1px solid #000;
  box-sizing: border-box;

}

@keyframes scroll {
  0% {transform: translateX(0);}
  100%{transform: translateX(-10%);}
}




/* ---------------------------------------------------------------------- COMPANYページ ------------------------------------------------------------------- */

/* 代表挨拶 */

.c-wrap {
  width: 70%;
  height: auto;
  margin: 0 auto;
  opacity: 0;
}

.active .c-wrap {
  opacity: 1;
  transition: .5s all ease;
}

.c-wrap h3 {
  font-size: 2em;
  margin-bottom: .5em;
}


.c-wrap h3 span {
  display: inline-block;
}

.c-wrap p {
  line-height: 2.2;
}

.c-r {
  line-height: 1.7;
  
}
.c-wrap .c-r p {
  text-align: right;
  margin-bottom: 0;
}

/* 会社概要 */

.o-wrap {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  transition: .5s all ease;
  opacity: 0;
}
.active .o-wrap {
  opacity: 1;
}

.o-wrap ul {
  display: flex;
  border-bottom: 1px solid #000;
}

.o-wrap ul:last-child {
  border-bottom: 0;
}

.o-wrap li {
  padding: 1em;
  text-align: left;
  font-size: 1.2em;
}
.o-wrap li:first-child {
  width: 25%;
  text-align: right;
  border-right: 1px solid #000;
  color: #0D3594;

}

/* アクセス */

.ac-wrap {
  width: 100%;
  height: auto;
  margin-bottom: 3.1em;
  opacity: 0;
  transition: .5s all ease;
}
.active .ac-wrap {
  opacity: 1;
}

.ac-wrap.ac-wrap2 {
  margin-bottom: 0;
}


#access .inner {
  max-width: 840px;
}

.ac-title {
  margin-bottom: 1em;
  text-align: left;
}

.ac-title h3 {
  font-size: 1.2em;
}
.ac-title h3 span {
  display: inline-block;
  font-size: .8em;
}

.map {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  background-color: #eee;
}



/* ---------------------------------------------------------------------- FAQページ ------------------------------------------------------------------- */


#faq {
  width: 100%;
  height: auto;
}

#faq.section {
  padding: 5em 0 0 0;
}


#faq li {
  text-align: left;
  font-size: 1.5em;
}


#faq .q,
#faq .q-last {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #E6E8F2;

}
#faq .q::before {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-1em);
  content: '';
  display: block;
  width: 100%;
  height: 1em;
  background-color: #fff;
}
#faq .q-last {
  background-color: #fff;
}


.open {
  position: relative;
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
}
.open::before,
.open::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(0);
  height: 2px;
  width: 1em;
  background-color: #707070;
}
.open::after {
  transform: translate(-50%,-50%) rotate(90deg);

}


#faq .a {
  height: 0;
  padding: 0 1em;
  transition: .5s all ease-in-out;
}

#faq .a.active {
  height: 5em;
}


#faq span {
  margin-right: 2em;
}
#faq span.open {
  margin-right: 0;
}

#faq .q span {
  color: #0D3594;
}

#faq .a span {
  color: #FF8600;
}

/* ---------------------------------------------------------------------- PRIVACY POLICYページ ------------------------------------------------------------------- */



#privacy .inner {
  max-width: 900px;
}

#privacy dl {
  text-align: left;
}

#privacy dt {
  font-size: 1.5em;
  color: #0D3594;
}

#privacy dd {
  margin-bottom: 1em;
}





/* ---------------------------------------------------------------------- CONTACTページ ------------------------------------------------------------------- */



#contact-copy .contact-tel {
  max-width: 428px;
  margin: 0 auto;
}

#contact-copy .copy_textbox p {
  margin-bottom: 3.1em;
}


/* フォーム調節 */

#post-16 {
  text-align: left;
}




.wp-block-snow-monkey-forms-item {
  display: flex;
  align-items: start;
  gap: 7em;
  margin-bottom: 3.1em;
}


.smf-item__col--label {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5em;
}
.smf-item3 .smf-item__col--label {
  flex: auto;
  width: 50%;
  max-width: initial;
}

.smf-item3 .smf-item__col--controls {
  flex: auto;
  width: 30%;
  max-width: initial;
}

.smf-form .smf-radio-button-control {
  margin-right: 2em;
}

.wp-block-snow-monkey-forms-item.smf-item3 {
  align-items: center;
}

.smf-item3 .smf-item__col--controls .smf-radio-buttons-control__control {
  display: flex;
}

.smf-item__label {
  width: 100%;
}

.smf-item__label__text {
  display: flex;
  justify-content: space-between;
  font-size: .75em;
}

.item-label,
.item-label2 {
  padding: .5em 1em;
  font-size: .75em;
  font-weight: 400;
  background-color: #FF8600;
  color: #fff;
}
.item-label2 {
  background-color: #707070;
}

.smf-item__col--controls {
  width: 70%;
}

.smf-form--simple-table .smf-item {
  margin-bottom: 3.1em;
  padding: 0;
}
.smf-form--simple-table .smf-item.smf-item2 {
  margin-bottom: 1.1em;
}

.smf-form .smf-text-control__control {
  padding: .8em;
}

/* ラジオボタン修正 */

.Form-Item.radio {
  gap: 0;
}

.Form .radio .Form-Item-Label {
  width: auto;
  width: 60%;
}

.Form .radio p {
  width: auto;
}

.radio .wpcf7-list-item {
  display: inline;
}


/* 確認画面ボタン */


.Form .button-wrap p {
  width: 100%;
}


.smf-action .smf-button-control__control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
  max-width: 300px;
  margin: 0 auto;
  padding: .5em 0;
  font-size: 1.1em;
  color: #fff;
  background-color: #FF8600;
  background-image: initial;
  border: 2px solid #FF8600;
  transition: .2s all ease-in-out;

}
.smf-action .smf-button-control__control:hover {
  border: 2px #FF8600 solid;
  color: #FF8600;
  background-color: #fff;

}

.smf-action .smf-button-control__control[data-action="back"] {
  border: 2px solid #E6E8F2;
  color: #000;
  background-color: #E6E8F2;

}
.smf-action .smf-button-control__control[data-action="back"]:hover {
  border: 2px solid #E6E8F2;
  background-color: #fff;
  
}

.smf-system-error-content {
  text-align: center;
}

.article-header,
#breadcrumb,
.article-footer {
  display: none;
}

.wp-text {
  font-size: .8em;
  color: #FF8600;
}
.wp-text2 {
  font-size: .8em;
  color: #000;
}

.smf-checkboxes-control {
  text-align: left;
}

.smf-placeholder {
  text-align: left;
  font-size: 1.2em;
}

.wp-text a {
  border-bottom: 1px solid #000;
  color: #FF8600;
  transition: .2s all ease-in-out;
  opacity: 1;
}
.wp-text a:hover {
  opacity: .5;
}


.smf-form .smf-checkbox-control {
  display: flex;
  align-items: center;
}




/* ---------------------------------------------------- footer　全ページ共通 ------------------------------------------------------ */


.footer {
  margin-top: 0;
  padding: 3.1em 0;
}



#footer, .company-wrap p, #footer a:not(.sns-button), .footer-title {
  display: flex;
  align-items: center;
  font-size: 1em;
  color: #fff;

}


.footer-bottom {
  position: relative;
  margin-top: 0;
  padding: 0;
  font-size: 16px;
}

.navi-footer-in > .menu-footer li {
  border-left: 0;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 0;
}




/* メニュー */
.footer-menu {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 3.1em auto;
}

.footer-menu  ul {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 2em;
}

.footer-menu li {
  width: auto;
}


.footer-wrap {
  display: flex;
  justify-content: space-between;
  width: 90%;
  max-width: 700px;
  margin: 0 auto 3.1em auto;
}

.footer-wrap p {
  line-height: 1.7;
}

/* コピーライト */
.copyright {
  margin-top: 0;
  font-size: 12px;
}


@media screen and (max-width: 1920px){
  .copy .copy_1 {
    font-size: min(7.1vw,90px);
  }
}








/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/


/*1300px以下*/
@media screen and (max-width: 1300px){

  .item-inner,
  #item .item_bg .item-inner {
    flex-direction: column;
    gap: 0;
    max-width: 650px;
    margin: 0 auto 5em auto;
  }

  #item .item_bg.two{
    margin-bottom: 0;
  }


  .item-inner {
    height: auto;
  }

  .item-wrap {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
  }
  #item .item-inner:last-child .item-wrap:nth-child(1) {
    margin-bottom: 0;
  }

  #item .item-inner:last-child  {
    margin-bottom: 0;
  }

  .item-title {
    margin-bottom: 1.2em;
    text-align: left;

  }

  .item-wrap:nth-child(1) {
    display: block;
  }

  .item-wrap_img {
    margin-bottom: 3.1em;
  }

  .item-wrap_img.item-pc {
    display: none;
  }
  .item-wrap_img.item-pc2 {
    width: 100%;
    margin-bottom: 0;
  }
  
  .item-wrap_img {
    display: flex;
    gap: 2em;
  }

  .item-wrap_img img {
    width: calc(100% / 2 - 1em);
    aspect-ratio: 10 / 7;
  }

  .item_bg1,
  .item_bg2 {
    display: none;
    }
  
  }


/*1023px以下*/
@media screen and (max-width: 1023px){

  .mblt-footer-mobile-buttons .go-to-top-button, .mblt-header-and-footer-mobile-buttons .go-to-top-button {
    display: flex;
  }

  #header {
    position: fixed;
    z-index: 99;
  }
  
  .header {
    height: 7vw;
    font-size: min(1.4vw, 16px);
  }

  .header-in {
    margin: 0 auto;
    padding: .5em 0;
  }

  .header .logo {
    width: 22%;
    max-width: initial;
 }

 .service-wrap, .product-wrap {
    margin: 0 auto 3.1em auto;
 }


  /* ハンバーガーメニュー */
  #ham {
    position: relative;
    z-index: 12;
    display: block;
    right: 2%;
    width: 2.5em;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  #ham span {
    position: absolute;
    top: 0;
    transform: translateY(-50%) rotate(0);
    width: 100%;
    height: .2em;
    opacity: 1;
    transition: .5s all ease-in-out;
    background-color: #0D3594;
  
  }
  .active  #ham span {
    background-color: #fff;
  }

  #ham span:nth-child(1) {
    top: 10%;
  }
  #ham span:nth-child(2) {
    top: 50%;
  }
  #ham span:nth-child(3) {
    top: 90%;
  }

  .active  #ham span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .active  #ham span:nth-child(2) {
    opacity: 0;
  }

  .active  #ham span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }




  
  /* ヘッダー */

  .header .contact {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 70vw;
    height: 100dvh ;
    transition: .5s all ease-in-out;
  }
  .header.active .contact{
    transform: translateX(0);

  }

  .header .contact-inner {
    display: block;
    padding: 8em 2em 4em 2em;
    color: #fff;
    background: #0D3594;

  }

  #header li a::after {
    display: none;
  }

  #header li {
    position: relative;
    border-bottom: 2px solid #fff;
  }

  

  .logo_img {
    width: 25%;
    min-width: 40px;
  }

  #footer .logo_img {
    width: 35%;
    min-width: 40px;
  }

  .contact-inner {
    width: 90%;
    margin: 0 auto;
  }


  /* ヘッダー関連*/


  #header li a {
    font-size: 1.1em;
  }

  .nav {
    margin-bottom: 3.1em;
  }

  #header ul {
    flex-direction: column;
  }


    #header li a {
      color: #fff;
  }


    #header .tel {
      margin: 0 0 3.1em 0 ;
    }

    .contact_botton {
      height: auto;
      padding: 1em;
  }

  .contact_botton {
    justify-content: center;
    max-width: 300px;
    font-size: min(4.6vw,  24px);
}

  
  /* ハンバーガーメニューバックグラウンド */

#ham-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100dvh;
    background-color: #000;
    transition: .5s all ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

.active #ham-bg {
  opacity: .5;
  pointer-events: all;
  }

  .fv {
    height: 100vh;
    max-height: 700px;
  }


  .splide {
    width: 100%;
    height: 100%;
  }
  
  .splide .splide__track, .splide .splide__list, .splide .splide__slide{
    height: 100%;
  }

  .splide li img {
    height: 100%;
    object-fit: cover;
  }















}











/*834px以下*/
@media screen and (max-width: 834px){
  
  /* 共通 */

  p {
    font-size: 1.1em;
  }
  .pr .pr-imgbox p {
    font-size: 1em;
}

  .sp {
    display: block;
  }
  .pc {
    display: none;
  }

  #delivery td p.sp {
    display: block;
}

  #content-copy h3 {
    font-size: 2em;
  }

  .inner, #post-16 {
    max-width: 650px;
  }

  .service-wrap, .product-wrap,
  #division .inner  {
    max-width: 500px;
  }
  .service-wrap {
    margin: 0  auto;
  }

  .facility-wrap {
    transform: translateY(0);
  }

  .active.service-wrap,
  .active .product-wrap,
  .active .facility-wrap  {
    opacity: 1;
    }
    
    .service-wrap li,
    .product-wrap li  {
      opacity: 0;
      transition: 1s all ease;
      transform: translateY(10%);
    }
    .service-wrap li.active2,
    .product-wrap li.active2 {
      opacity: 1;
      transform: translateY(0);
    }

  .supprt-wrap {
    transform: translateY(0);
  }
  .active .supprt-wrap {
    transform: translateY(0);
  }



  .button:hover a {
    color: #0D3594;
  }

  .button:hover::before {
    clip-path: polygon(0 0 , 20% 0 , 0 100% , 0 100%);
  
  }

  .contact_botton:hover {
    border: 2px #FF8600 solid;
    color: #fff;
    background-color: #FF8600;
  }
  .contact_botton:hover::before {
    background: url(img/contact_mail_w.webp) no-repeat center / contain;
  
  }

  .button:hover .arrow-right {
    background: #0D3594;
  
  }
  .button:hover .arrow-right::before {
    border: 1px solid #0D3594;
  }
  




  /* キャッチコピー */
  .fv .copy {
    top: 70%;
    left: 0;
    width: 100%;
    max-width: 500px;
  }
  .copy .copy_1 span ,
  .copy .copy_1 span::after {
    clip-path: polygon(0 0, 6% 0, 0 100%, 0 100%);
  }
  .copy .copy_1 span.loaded, .copy .copy_1 span.loaded::after {
    clip-path: polygon(0 0, 90% 0, 84% 100%, 0 100%);
  }
  .copy .copy_1 span:nth-child(2).loaded, .copy .copy_1 span:nth-child(2).loaded:after {
    clip-path: polygon(0 0, 80% 0, 74% 100%, 0 100%);
}


  .copy p {
    margin-left: 1em;
  }



  main.main, div.sidebar {
    padding: 0;
    margin: 0;
  }

  .header,
  .footer {
    font-size: .75em;
    min-height: 60px;
  }


  .fv {
    font-size: min(3.3vw, 16px);
  }


  .header .logo {
    width: min(50vw, 200px);
    max-width: initial;
  }

  .header .logo:hover {
    opacity: 1;
  }
  

  
  .copy .copy_1 {
    font-size: 3.5em;
    margin-left: 0;
  }





  .section {
    font-size: clamp(10px , 3.75vw, 15px);
  } 

  .copy .copy_2 {
  font-size: 1.2em;
  }

  #about .about-wrap {
    flex-direction: column;
    margin-bottom: 0;
  }

  .about-text {
    width: 100%;
    margin-bottom: 2.5em;
  }

  .about-img {
    width: 100%;
  }

  .about-text .title h2 {
    font-size: min(8.1vw , 2.5em);
  }

  #about .inner {
    text-align: center;
  }

  #about::before {
    aspect-ratio: 6 / 1.5;
  }
  

  .title p {
    font-size: 1em;
  }

  .title-text p {
    text-align: left;
  }

  .textbox {
    width: 100%;
  }


  .title h2 {
    font-size: 2.5em;
  }

  #support .title {
    margin-bottom: 2em;
  }
  
  #support .title h2::after {
    width: 0;
  }
  
  #support .title h2::before {
    width: 0;
  }
  
  #support .title h2 {
    display: block;
    text-align: center;
    padding: 0;
    font-size: 2.5em;
  }

  .supprt-wrap ul {
    gap: 1em;
  }

  .supprt-wrap li {
    width: calc(100% / 3 - .7em);
  }

  .supprt-wrap li p {
    font-size: min(8.8vw, 48px);
  }
  .supprt-wrap li.supprt-a p {
    margin-top: 1em;
    font-size: min(5.3vw , 24px);
    line-height: 1.2;
  }

  .supprt-wrap .supprt-2 {
    font-size: .4em;
    color: #000;
  }
  .supprt-wrap .supprt-a .supprt-2 {
    font-size: min(4vw, 20px);
  }

  .title .title-text {
    width: 100%;
    margin: 0 auto;
  }

  .service-wrap li, .product-wrap li {
    width: 100%;
  }
  .facility-wrap li {
    width: calc(100% / 2 - 1em);
  }
  #contact .title .title-text {
    display: block;
  }

  #contact .title h2 {
    margin-right: 0;
    text-align: center;
  }

  #contact .title p {
    text-align: center;
    width: 100%;
  }

  #contact .inner {
    padding: 5vw;
  }
  #contact .title {
    width: 100%;
  }
  .contact-wrap {
    flex-direction: column;
    gap: 0;
    max-width: 500px;
    width: 100%;
  }

  .contact-wrap .contact-tel, .contact-wrap .contact-mail, #contact-copy .contact-tel {
    width: 100%;
    height: 6em;
    
  }


  .contact-tel .tel-n {
    font-size: 2em;
  }

  .contact-wrap .contact-mail a {
    font-size: 1.5em;
  }

  .footer-menu ul {
    justify-content: left;
    gap: 1em;
  }

  .footer .logo {
    width: auto;
    display: inline-block;
  }

  #footer, #footer p, #footer a:not(.sns-button), .footer-title {
    font-size: 1em;
  }

   #header li ,
   #footer li {
    font-size: min(3.8vw, 16px)
  }

  #footer p {
    font-size: min(3.8vw, 16px);
  }

  #footer .logo_text p:nth-child(2) {
    font-size: 1.2em;
  }

  .logo_a {
    align-items: center;
  }

  /* 私たちの強み */

  #feature .inner {
    width: 100%;
    max-width: initial;
  }

  .feature-wrap {
    position: relative;
    flex-direction: column-reverse;
    gap: 2.5em;
    margin-bottom: 5em;
  }

  .key-visual {
    height: auto;
    margin-top: 60px;
    aspect-ratio: 1 / 1;
    min-height: inherit;
    font-size: min(4.37vw, 16px);
  }

  .content-title {
    font-size: min(7.5vw, 53px);
  }

  .content-title2 {
    bottom: -3%;
    font-size: min(18.7vw, 170px);
  }

  .copy_textbox {
    width: 100%;
  }


  .f-content {
    width: 100%;
  }

  .f-left .f-content {
    text-align: right;
  }

  .f-content.f-img {
    width: 90%;
    max-width: 650px;
    margin: 0 auto;
  }


  .f-content .f-title.pc {
    display: none;
  }

  .f-textbox {
    width: 90%;
    max-width: 650px;
    margin: 0 auto;
  }

  #feature .feature-wrap:nth-child(2) .f-content .f-title {
    left: initial;
    right: 0;
  }
  

  #feature .feature-wrap:nth-child(2) .f-content h3 {
    text-align: right;
  }


  .f-content h3,  
  .d-content h3,
  .p-wrap h3,
  .f-wrap02 h2 {
    font-size: 2em;
  }

  .item-copy {
    font-size: 1.5em;
  }

  .f-content h3 {
    margin: .5em auto;
    font-size: 2.5em;
  }
  .f-content h3 span {
    display: inline-block;
  }

  .f-wrap02 h2 {
    margin-bottom: 0;
  }

  

  .detail-wrap h3 {
    font-size: 1.5em;
  }

  .collab {
    width: 100%;
    min-width: initial;
  }

  .collab-content ul li {
    font-size: 12px;
  }


  .voice-wrap {
    flex-direction: column;
  }

  .voice-wrap2 {
    display: flex;
  }

  .v-title {
    text-align: left;
  }

  .voice01 img {
    width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }



  .voice-wrap .voice01 {
    width: 100%;
  }

  .dicision-wrap {
    width: 100%;
  }

  .d-content {
    width: 100%;
  }

  .item-pc {
    display: none;
  }

  .item-title {
    display: block;
    align-items: normal;
    margin-bottom: 2em;
  }



  .i-content {
    width: 100%;
  }

  .item-title h3 {
    display: block;
    margin-right: 0;
    margin-bottom: .5em;
    font-size: 2em;
  }

  .button {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;

  }

  .arrow-right {
    animation: scroll 1.5s alternate-reverse infinite ease-in-out;
  }

  .arrow-right::before {
    top: 0;
  }

  

  .button a {
    padding: .5em 0;
    text-align: center;
  }

  #item .button  {
    width: 95%;
  }

  .i-work ul {
    width: 100%;
  }



  .p-wrap2 ul {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  .p-wrap2 ul li {
    width: 100%;
  }

  .pr h3 {
    font-size: min(6.8vw , 32px);
    flex-wrap: wrap;
  }
  .pr h3::after {
    left: 50%;
    transform: translate(-50%);
    width: 100vw;
  }

  .pr .case {
    display: block;
    width: 100%;
  }

  .pr .case2 {
    font-size: 1.2em;
  }


  .pr-t, 
  .pr-title2 {
    font-size: 1.2em;
  }

  .pr-textbox {
    width: 90%;
    margin: 0 auto;
  }
  .pr-text01 {
    width: 100%;
    min-width: initial;
  }

  .pr03 {
    flex-direction: column-reverse;
    padding: 1.5em 0;
  }

  .pr-text02 {
    display: block;
  }

  .pr-text02 .pr-title1 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1em;
  }

  .pr03 .pr-textbox {
    padding: 0;
    margin-bottom: 1.5em;
  }

  .pr-img {
    width: 90%;
    display: flex;
    height: auto;
    max-height: initial;
    aspect-ratio: auto;
    gap: 2em;
    margin: 0 auto 1em auto;
  }
  .pr-img.pc {
    display: none;
  }

  .pr-imgbox ul li {
    width: calc(100% / 2 - .5em);
}

.pr-text02 .pr-imgbox {
  width: 100%;
}


  .pr-img img {
    width: calc(100% / 2 - 1em);
  }

  .main-f-wrap li {
    position: relative;
    width: calc(100% / 2 - 1.2em);
  }


  .f-wrap01 {
    flex-direction: column-reverse;
    gap: 1em;
    margin-bottom: 1em;
  }

  .f-wrap02 {
    width: 100%;
    max-width: 500px;
  }

  .f-wrap02 p {
    font-size: 1.1em;
  } 

  .table {
    width: 100%;
    overflow: scroll;
  }

  table {
    min-width: 800px;
  }
  thead {
    display: none;
  }

  #delivery  table {
    min-width: initial;
  }

  #delivery table td {
    display: block;
  }

  #delivery  table tr td:nth-child(1) {
    padding: .5em 1em;
    border-bottom: 0;
    text-align: left;
    font-weight: 900;
  }
  #delivery  table tr td:nth-child(2) {
    padding: 0 1em 1em 1em;
    border-top: 0;
    border-bottom: 0;
    font-weight: 400;
  }

  #delivery  table tr.last td:nth-child(2) {
    border-bottom: 1px solid;
  }

  .f-conetnt2 table {
    min-width: initial;
    margin-bottom: 0;
  }



  .f-table th:first-child,
  .f-table td.f-td {
    padding: .5em 1.5em;
  }

  .f-conetnt2 .f-table th:first-child,
  .f-conetnt2 .f-table td.f-td {
    padding: .5em 1em;
  }


  
  table th, table td {
    font-size: 1.1em;
    overflow: scroll;
  }

  .scroll {
    color: #707070;
    font-size: 12px;
  }



  .c-wrap {
    width: 100%;
  }

  #faq .q, 
  #faq .q-last,
  #faq .a  {
    font-size: 1em;
  }

  #faq .q-last {
    margin-bottom: 0;
    padding: 2em;
  }

  .smf-form--simple-table .smf-item {
    gap: 4em;
    margin-bottom: 1.2em;
  }

  .smf-form--simple-table .smf-item__col--label {
    font-size: 1.2em;
    width: 100%;
    padding-bottom: .5em;
  }

  .smf-item__label__text,
  .smf-checkbox-control__label {
    font-size: .9em;
  }


  .wp-block-snow-monkey-forms-item {
    display: block;
  }

  .smf-item__col--label {
    width: 100%;
  }
  
  .smf-item__col--controls {
    width: 100%;
  }

  .smf-item3 .smf-item__col--controls {
    width: 100%;
  }

  .f-table {
    max-width: 500px;
    margin: 0 auto;
    transition: 1s all ease;
    opacity: 0;
  }
  .active  .f-table {
    opacity: 1;
  }


  .o-wrap {
    max-width: 500px;
    font-size: .8em;
  }


  .o-wrap li:first-child {
    width: 30%;
  }

  .o-wrap li {
    width: 70%;
  }


  .pr04 {
    display: block;
  }

  .pr04 .pr-text02 {
    margin-bottom: 1em;
  }

  .c-wrap p {
    margin-bottom: 1em;
  }


  .pr-text01 {
    align-items: center;
  }



  .contact-copy {
    text-align: left;
  }


  .footer-wrap {
    max-width: 620px;
    align-items: end;
  }

  .logo_text {
    font-size: 1.2em;
  }

  .smf-action .smf-button-control__control {
    font-size: 1.5em;
    width: 80%;
  }



  .footer .logo {
    width: 42%;
    display: inline-block;
  }

  #footer li :hover::after {
    width: 0;
  }  

  .key-visual.campany-fv {
    background: url(img/key_visual_campany.webp) no-repeat right / cover;
  }


  #header li:hover::after,
  #footer li::after {
    transform: scale(0 , 1);
    width: 0;
  
  }

  #contact .contact-mail:hover  a {
    color: #fff;
  }
  .contact-wrap .contact-mail:hover {
    background-color: #FF8600;
  }
  .contact-wrap .contact-mail:hover a::before {
    background: url(img/contact_mail_w.webp) no-repeat center / contain;
  }
  .smf-action .smf-button-control__control:hover {
    background-color: #FF8600;
    color: #fff;
  }


  


}
  







@media (max-width: 700px) {

  .supprt-wrap li {
    width: calc(100% / 2 - .5em);
  }


}


@media (max-width: 650px) {

  .footer-wrap {
    align-items: end;
    gap: 0;
    max-width: 400px;
  }

  .supprt-wrap li p {
    font-size: 2.5em;
  }

  #footer a:not(.sns-button) {
    flex-direction: column;

  }

  #footer .logo_img {
    width: 75%;
  }
  #footer .logo_text p:nth-child(2) {
    font-size: min(3.8vw, 16px);
  }


  .c-wrap h3 {
    text-align: left;
 }


  




}

 













/*480px以下*/
@media screen and (max-width: 480px){


  .sp2 {
    display: block;
  }

  .collab-content ul {
    display: flex;
    flex-direction: column;
  }

  .collab-content ul li {
    width: 100%;
  }

  .voice-wrap2 {
    display: block;
  }
  .v-title {
    text-align: center;
  }

  .voice01 img {
    width: 55%;
  }

  .ac-title h3 span {
    display: block;
  }

  .arrow-right {
    width: 14vw;
  }

  #content-copy h3  {
    text-align: left;
  }
  #content-copy h3 span {
    display: inline-block;
  }

  .pr-text01 {
    align-items: self-start;
  }
  .pr-title1 {
    margin-top: .2em;
  }

  .sup {
    text-align: left;
  }

  .p-wrap {
    margin-bottom: 3.1em;
  }

  .section {
    padding: 3em 0;
  } 
  #about {
    padding-top: 5em;
  }

  .map {
    aspect-ratio: 2 / 1.5;
  }

  .item-inner,
  .item-inner, #item .item-inner:nth-child(odd) {
    margin-bottom: 3.1em;
  }

  #item .item-inner:last-child {
    margin-bottom: 0;
  }

  .item-wrap {
    margin-bottom: 0;
  }

  .item-wrap_img {
    flex-direction: column;
    margin-bottom: 2em;

  }

  .item-wrap_img img {
    width: 100%;
  }
  
  

}







@media (min-width: 640px) {
  .smf-form--simple-table .smf-item__col--label {
      padding-right:0;
  }


}