@charset "utf-8";
/* CSS Document */
/*====================
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/
/*---page-------------------------------------------------------*/
/*****固定ページ共通*****/
.page_content {
  position: relative;
}
.page_content section {
  padding: 8rem 0 10rem;
  position: relative;
}
.page_content .wrap{
  max-width: 1200px;
  margin-left:auto;
  margin-right:auto;
}
.page_content .flex_box{
  margin-bottom: 8rem;
}
@media screen and (min-width:900px){
  .page_content section {
    padding: 12rem 0 14rem;
  }
}
@media screen and (max-width:899px){
  .page_content .flex_item{
    margin: 2rem 0;
  }
}
@media screen and (min-width:1200px) {
  .container .wrap {
    width: 80%;
  }
}
@media screen and (max-width:799px) {
  .page section {
    padding: 6rem 0;
  }
}

/*** page_link ***/
.page_link{
  max-width: none;
  margin-bottom: 8rem;
}
.page_link_list{
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
.arrow_border ul.page_link_list{
  border-top: none;
}
.arrow_border ul.page_link_list li{
  width: 96%;
}
.arrow_border ul.page_link_list li:nth-child(-n+1){
  border-top: 1px solid #707070;
}
.page_link_item a{
  position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1.6em 2.4em;
}
.arrow_border ul.page_link_list li a::before{
  content: url(../img/arrow_down.svg);
  position: absolute;
  top: calc( 50% - 8px );
  right: 1.5rem;
  width: 0.75rem;
  height: 0.375rem;
  transition: all .3s;
}
@media screen and (min-width:550px) {
  .page_link_list{
    grid-template-columns: 1fr 1fr;
  }
  .arrow_border ul.page_link_list li:nth-child(-n+2){
    border-top: 1px solid #707070;
  }
}
@media screen and (min-width:800px) {
  .page_link_list{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .arrow_border ul.page_link_list li:nth-child(-n+3){
    border-top: 1px solid #707070;
  }
}
@media screen and (min-width:1000px) {
  .page_link_list{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .arrow_border ul.page_link_list li:nth-child(-n+4){
    border-top: 1px solid #707070;
  }
}

/*** page_header ***/
.page_header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 6rem;
  padding: 20vh 0 6vh 0;
  /***background: url(../img/bg_white.jpg) repeat;***/
}
.hero_ttl{
  width: fit-content;
  height: fit-content;
  color: #2E3F55;
}
.page_header img{
  min-height: 32vh;
}
@media screen and (max-width:899px){
  .hero_ttl{
    width: 90%;
    margin: 0 auto 2rem;
  }
  .page_header img{
    border-radius: 0;
  }
}
@media screen and (min-width:900px){
  .page_header{
    padding-bottom: 0;
    width: 90%;
  }
  .page_header .grid_area {
    grid-template-columns: 36% 60%;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 4%;
    grid-row-gap: 40px;
    }
    .page_header .hero_ttl {
      grid-area: 1 / 1 / 2 / 2;
      top: 8rem;
      position: relative;
    }
    .page_header .img_outer { grid-area: 1 / 2 / 3 / 3; }
    .page_header .breadcrumbs { grid-area: 2 / 1 / 3 / 2; }
  .page_header .outer{
    margin-top: 16vh;
  }
} 

/*** breadcrumbs ***/
.breadcrumbs {
  font-size: 1.4rem;
  line-height: 2;
}
.breadcrumbs a{
  color: #15417A;
  border-bottom: 1px solid #3065aa;
  transition: all .2s ease-out;
}
.breadcrumbs a:hover{
  opacity: .5;
}
@media screen and (max-width:899px){
  .breadcrumbs {
    margin: 2rem auto 0;
    width: 90%;
  }
}

/*** gallery ***/
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 40px;
}
.gallery figcaption{
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
  border-bottom: 1px solid #CECECE;
  padding: 1.6vw 0;
  margin-bottom: 2rem;
}
@media screen and (max-width:899px){
  .gallery{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 3.2vw;
  }
}

/***** products *****/
.page_content section#products_intro{
  padding-bottom: 0;
}
#products_intro .page_lead,#service_intro .page_lead{
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: #2E3F55;

}
#products_intro .page_lead{
  margin-bottom: 6rem;
}
#products_detail section{
  margin: 0;
  padding: 0;
}
#products_detail h2{
  color: #15417A;
  margin-bottom: 2.8rem;
  font-size: clamp(2.2rem, 3.6vw, 4rem);
}
.products_cat{
  margin-bottom: 10rem;
}
/* accordion */
.accordion{
  margin:0 auto;
}
.accordion-area h3{
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  margin-bottom: 0;
}
.acc_title {
  position: relative;
  cursor: pointer;
  font-size:1.6rem;
  font-weight: normal;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #aaa;
  transition: all .5s ease;
}
.acc_title .detail_btn{
  width: 80px;
  position: relative;
  background-color: #EBEBEB;
  padding: 10px;
  border-radius: 2px;
  transition: .5s
}
.acc_title .detail_btn::before,
.acc_title .detail_btn::after{
  position: absolute;
  content:'';
  top: 50%;
  right: 12px;
  width: 18px;
  height: 2px;
  background-color: #2E3F55;
}
.acc_title .detail_btn::before{
  transition: all .3s cubic-bezier(1,0,0,1);
  transition-property: transform;
  transition-timing-function: cubic-bezier(1,0,0,1);
  transform: translateY(-50%) rotate(-90deg);
}
.acc_title .detail_btn::after{    
  transition: all .3s cubic-bezier(1,0,0,1);
  transition-property: transform,opacity;
  transition-timing-function: cubic-bezier(1,0,0,1);
  transform: translateY(-50%);
}
.acc_title.close .detail_btn::before{
  transform: translateY(-50%) rotate(0deg);
}
.acc_title.close .detail_btn::after{
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}
.acc_title:hover .detail_btn{
  background-color: #f7f7f7;
}
.acc_title.close{
  border-bottom: 1px solid #F9F9F9;
}
.acc_box {
  display: none;/*はじめは非表示*/
  padding: 2.8rem 2rem;
  border-bottom: 1px solid #aaa;
}
.acc_box p{
  padding-bottom: 0;
}
.accordion dl h4{
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: .8rem;
}
h4.blue{
  color: #4A6D8C;
}
.pt20{
  padding-top: 20px;
}
h4.pt20{
  margin-bottom: .8rem;
}
.accordion dl{
  border-top: 1px solid #e9e9e9;
}
.accordion dl dt{
  flex-basis: 28%;
  border-bottom: 1px solid #e9e9e9;
}
.accordion dl dd{
  flex-basis: 72%;
  border-bottom: 1px solid #e9e9e9;
}
dl.detail_dl{
  border-top:none;
}
dl.detail_dl dt,dl.detail_dl dd{
  border-bottom:none;
  padding:0 0 .4rem;
}
dl.detail_dl dt{
  flex-basis: 28%;
}
.accordion ul.text_list{
  margin: 0;
}
#nano_titanium .detail_dl dt{
  flex-basis: 36%;
}
#nano_titanium .detail_dl dd{
  flex-basis: 64%;
}
.mt16{
  margin-top: 1.6rem;
}
@media screen and (max-width: 599px) {
  .accordion dl dt {
    border-bottom: none;
  }
  dl.detail_dl dd{
    margin-bottom: .6rem;
  }
}
@media screen and (max-width: 699px){
  .acc_title .btn_text{
    display: none;
  }
  .acc_title .detail_btn{
    background-color: transparent;
    width: 60px;
    padding: 0;
  }
}
@media screen and (max-width:768px) {
  .title::before,.title::after{
    top: 50%;
    right: 1.6rem;
  }
  .title {
    padding: 2rem 4.4rem 2rem 3.6rem;
  }
  .title span::before{
    top: 1.7rem;
    left: 1rem;
    font-size: 1.8rem;
  }
  .box {
    padding: 2rem 2rem 2rem 3.6rem;
  }
  .box p::before{
    top: -0.2rem;
    left: -2.5rem;
    font-size: 1.8rem;
  }
}

/***** service *****/
.page_content section#service_intro{
  padding: 8rem 0 12rem;
}
#service_content h3{
  margin: 8rem 0 2rem;
}
#service_content dl{
  margin-top: 2.8rem;
}
#service_intro .page_lead{
  line-height: 1.8;
}
#service_development .flex_box{
  width: 46%;
  display: flex;
}
#service_development .flex_box .img_left{
  margin-right: 8%;
}
#service_oem img{
  max-width: 400px;
}
#service_equipment{
  background: #fefefe;
}
#service_equipment h3{
  font-size: clamp(2rem, 2.6vw, 3.2rem);
  color: #1F2A38;
}
.page_content #service_development .flex_box,.page_content #service_oem .flex_box{
  margin-bottom: 4rem;
}
@media screen and (min-width:900px) {
  #service_intro .page_lead{
    width: 80%;
  }
  .page_content #service_development .flex_box,.page_content #service_oem .flex_box{
    margin-bottom: 0;
  }
}
@media screen and (max-width:899px) {
  #service_oem img{
    max-height: 400px;
  }
}

/***** company *****/
.img_box .flex_box{
  overflow: hidden;
  justify-content: space-between;
  margin: 8rem 0;
}
.img_box img{
  max-width: 400px;
  width: 32%;
}
@media screen and (max-width:699px) {
  .img_box img.img03{
    display: none;
  }
  .img_box img{
    width: 49%;
  }
}
/* message */
#company_message h3{
  margin-bottom: 4rem;
}
.ceo{
  text-align: right;
  font-size: 1.8rem;
  margin-top: 4rem;
}
.ceo_name{
  padding-left: 1.2rem;
}
@media screen and (max-width:768px){
  #company_message .img_outer{
    width: fit-content;
    margin: 0 auto 4rem;
  }
}
/* history */
.history_list_item{
  display: flex;
  align-items: baseline;
  padding-bottom: 32px;
  position: relative;
}
.history_list_item::before{
  content: "";
  width: 1px;
  height: 100%;
  background: #4A6D8C;
  position: absolute;
  top: 25px;
  left: 104px;
  display: block;
}
.history_list_item.item_end::before{
  height: 60%;
}
.history_year{
  font-size: 1.8rem;
  margin-right: 20px;
  width: 160px;
  position: relative;
  top: 4px;
  font-weight: 200;
}
.history_year::before{
  content: "";
  width: 20px;
  height: 1px;
  background: #4A6D8C;
  position: absolute;
  bottom: 17px;
  left: 95px;
}
.history_year p{
  padding-bottom: 0;
}
.history_year .number{
  font-size: 2.4rem;
  padding: 0 .2rem;
}
.history_info{
  position: relative;
}
.history_info dl{
  display: flex;
  margin: 0 0 7px 0;
  flex-flow: nowrap;
  border-top: none;
}
.history_info dl dt{
  font-weight: 500;
  flex-basis:auto;
  padding: 0;
  border-bottom: none;
}
.history_info dl dd{
  width: 50vw;
  flex-basis:auto;
  border-bottom: none;
  padding: 0;
}
.history_info dl img{
margin-top: 1rem;
}
@media screen and (max-width:899px) {
  .history_info{
    width: 100%;
  }
  .history_info dl dt{
    margin-right: 0px;
    width: 55px;
  }
  .history_info dl dd{
    width: 70%;
  }
}
@media screen and (min-width:900px) {
  .history_list{
    display: flex;
    align-items: baseline;
    padding-bottom: 32px;
    position: relative;
  }
  .history_info{
    width: 87%;
  }
  .history_info dl dt{
    margin-right: 20px;
    width: 55px;
  }
}

/* access */
#company_access h3{
  margin-bottom: 1.2rem;
}
#company_access h4{
  margin-top: 1.2rem;
  font-size: 1.6rem;
}
#company_access .img_outer{
  margin-top: 4rem;
}
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:899px) {
  .map{
    margin: 4rem 0;
  }
}
@media screen and (min-width:900px) {
  #company_access .text_area{
    margin-right: 4rem;
  }
}

/*** RECRUIT ***/
#recruit_hero .video-box{
  position: relative;
}
#recruit_hero video{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  filter: brightness(0.8); /* Darken the image */
} 
.hero_ttl_wrap{
  position: absolute;
  bottom: 20%;
  left: 10vw;
}
#recruit_hero .hero_ttl,#recruit_hero .breadcrumbs{
  width: 100%;
}
#recruit_hero .hero_ttl{
  margin-bottom: 40px;
}

#recruit_hero .hero_ttl,#recruit_hero .breadcrumbs a,#recruit_hero .hero_ttl_wrap{
  color: #fefefe;
}
#recruit_hero .breadcrumbs a{
  border-bottom: 1px solid #fefefe;
}
.page_content section#recruit_message {
  padding: 16rem 0 10rem;
}
#recruit_message .flex_box{
  margin-bottom: 0;
}
#recruit_hero,#recruit_message,#recruit_message .slide-bg{
  background-color: #2E3F55;
}
#recruit_message,#recruit_message h2{
  color: #fefefe;
  line-height: 2;
}
#recruit_message .slide img{
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
@media screen and (max-width:899px) {
  #recruit_message .slide{
    width: 100%;
    height: 44vh;
    filter: brightness(100%);
    margin-top: 8rem;
  }
  #recruit_message .slide img{
    
    max-width: 480px;
    max-height: 310px;
    
    object-position: 80% 50%;
    top: 0;
    left: 20vw;
    right: 10px;
    transform: translate(0%, 0%);
  }
  #recruit_message .text_box{
    width: 72vw;
  }
}
@media screen and (min-width:900px) {
  .page_content section#recruit_message {
    padding: 18rem 0 22rem;
  }
  #recruit_message .text_area{
    width: 40%;
  }
  #recruit_message h2{
    margin-bottom: 12rem;
  }
  #recruit_message .slide{
    height: 40vh;
    width: 40%;
    top: 9rem;
  }
}
/*recruit_person*/
.page_content section#recruit_person {
  padding: 12rem 0 10rem;
}
#recruit_person dt{
  font-size: clamp(2rem, 3.4vw, 2.4rem);
  font-family: 'Zen Old Mincho';
}
@media screen and (min-width: 900px) {
  .page_content section#recruit_person {
      padding: 16rem 0 14rem;
  }
}
@media screen and (min-width: 600px) {
  #recruit_person dt{
    padding-left: 2vw;
  }
  #recruit_person dd{
    padding-right: 2vw;
  }
}
/* img_movie */
.img_movie .flex_box{
  align-items: flex-end;
}
.img_movie .img_outer{
  width: 50%;
  margin-right: 10vw;
}
.img_movie .video-box{
  width: 90%;
}
@media screen and (max-width:899px){
  .img_movie .img_outer{
    margin-bottom: 4rem;
  }
}
/* job */
@media screen and (min-width: 800px){
  #recruit_job dl{
    background-color: #fefefe;
    padding: 2vw 4vw 6vw;
    border: 1px solid #eee;
  }
}
/* entry */
.page_content section#recruit_entry{
  padding-top: 0;
}
#recruit_entry .flex_box{
  margin-bottom: 0;
}
@media screen and (min-width:900px){
  #recruit_entry .text_box{
    width: 60%;
  }
  #recruit_entry .btn{
    margin-top: 0;
    max-height: 60px;
  }
}
/* landscape */
#recruit_landscape .wrap{
  max-width: 1500px;
}
#recruit_landscape h2{
  text-align: center;
}

/***** contact *****/
#contact.page_content section{
  padding-bottom: 0;
}
#contact .wrap{
  max-width: 1000px;
}
.contact_info {
margin-bottom: 2rem;
}

/*** Contact Form7 ***/
input[type="text"]:focus,textarea:focus,input[type="email"]:focus,input[type="tel"]:focus {
outline: solid 2px #666;
}
input[type="text"],textarea,input[type="email"],input[type="tel"] {
width: 100%;
margin: 0;
box-sizing: border-box;
}
input[type="text"],input[type="email"],input[type="tel"] {
height: 2rem;
}
.contact7 {
max-width: 100%;
box-sizing: border-box;
padding-top: 2rem;
margin-top: 4rem;
border-top: 1px solid #ccc;
}
.contact7 dl {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 4rem;
}
.contact7 dl, .contact7 dl dt, .contact7 dl dd {
border: #fff;
}
.contact7 dl dt {
display: flex;
justify-content: space-between;
flex-basis: 32%;
}
.contact7 dl dd {
width: 630px;
flex-basis: 68%;
}
.contact7 dl dd select, .contact7 dl dd textarea {
width: 100%;
}
.contact7 dl dd select, .contact7 dl dd textarea, .contact7 dl dd input {
padding: 2rem 1.6rem;
border: 1px solid #999;
}
.contact7 dl.checkbox dd input{
  border: none;
}
section .contact7 dd.form_name p span input.wpcf7-text {
width: 96%;
}
section .contact7 dd.birthday p span input.wpcf7-text {
width: 94%;
margin-left: 2rem;
}
dd.birthday .age {
padding: 2rem 0rem;
}
.wpcf7-text {
width: 100%;
}
/* 必須マーク */
.contact7 .must {
background: #F1686D;
}
/* 任意マーク */
.contact7 .optional {
background: #999;
}
.contact7 .must, .contact7 .optional {
  color: #FFF;
  font-size: 12px;
  margin-left: 8px;
  padding: 4px 8px;
  letter-spacing: 2px;
  font-weight: 500;
  border-radius: 2px;
}
/* CF7チェックボックスとラジオボタンを縦並びに */
span.wpcf7-list-item {
display: block;
line-height: 2;
}
.contact7 .radio dd input {
width: auto;
}
.wpcf7-list-item {
margin: 0 !important;
}
.wpcf7 form .wpcf7-response-output {
border: none;
}
/* チェックボックスデザイン */
.contact7 dl.checkbox dd input{
padding: 0 1.6rem;
}
input[type="checkbox"] {
  cursor: pointer;
  padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
  vertical-align: middle;
  position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
  content: "";
  display: block; 
  position: absolute;
}
input[type="checkbox"]::before {
  background-color: #fff;
  border-radius: 0%;
  border: 1px solid #666;
  width: 20px;/*チェックボックスの横幅*/
  height: 20px;/*チェックボックスの縦幅*/
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}
input[type="checkbox"]::after {
  border-bottom: 3px solid #666;/*チェックの太さ*/
  border-left: 3px solid #666;/*チェックの太さ*/
  opacity: 0;/*チェック前は非表示*/
  height: 8px;/*チェックの高さ*/
  width: 11px;/*チェックの横幅*/
  transform: rotate(-45deg);
  top: -6px;/*チェック時の位置調整*/
  left: 9px;/*チェック時の位置調整*/
}
input[type="checkbox"]:checked::after {
  opacity: 1;/*チェック後表示*/
}
.contact7 .check {
margin: 4rem 0 2rem;
}
.btn_contact7 {
width: 100%;
position: relative;
transition: all .2s ease-out;
margin-top: 6rem;
}
.btn_contact7 input {
width: 100%;
padding: 2.8rem 0;
background: #379B37;
color: #fefefe;
font-size: 1.1em;
font-weight: bold;
border-radius: 4px;
border: #379B37 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
transition: all .2s ease-out;
}
.btn_contact7 input.wpcf7-previous{
background: #f8f8f8;
  border: #444 solid 2px;
  color: #444;
}
.btn_contact7 input:hover {
  background: #fefefe;
  color: #379B37;
}

@media screen and (max-width: 768px) {
  .contact7 dl {
    display: block;
  }
  .contact7 dl dt {
    justify-content: flex-start;
    flex-basis: auto;
  }
  .contact7 dl dd {
    flex-basis: auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 600px){
  .contact7 .btn_wrap{
    display: flex;
    justify-content: space-between;
  }
  .contact7 .previous{
    width: 28%;
    margin-left: 4rem;
  }
}
@media screen and (max-width: 599px) {
  .contact7 .previous{
    margin-top: 0;
  }
}
/*** NotFound ***/
#notfound a,#contact a {
  color: #15417A;
}
#notfound a,#contact .check a {
  text-decoration: underline;
}
#notfound a:hover,#contact a:hover {
  opacity: .6;
}