/* ============================================================
  style.css

  ブレイクポイント：600px / 1025px
  コンテンツ幅　　：min 320px ～ max 1200px
============================================================ */



/* ==========================================================================
   1.  Base (リセット・共通設定)
   ========================================================================== */

/* すべてのボックス要素について、paddingとborderを含めたサイズになる */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-width: 320px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "Yu Gothic", Meiryo, sans-serif;
  color: #000000;
  line-height: 1.8;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p, table {
  margin: 0;
}

h3{
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding:0.5rem;
  font-size: 1.8rem;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  letter-spacing:0.1em;
}

.header-inner, main .content-wrap, .footer-inner{
    max-width: 1024px;
    margin:0 auto;
}

main > div{
  padding:3rem 0;
}

main .subpage{
  padding-top:0;
}


h4{
  margin:0;
}

main .content-wrap{
  padding:1rem 1rem 3rem 1rem;
}

main .content-wrap p{
  margin-bottom:2rem;
}

@media (min-width: 600px) {

  main .content-wrap{
    padding:3rem;
  }
}

/* ページ高さが足りなくても余白を広げる（footerを画面下部に表示させる） */
.main-wrapper {
  flex: 1 0 auto;
}

/* 音声読み上げソフト用隠し文字　（使ってない） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   2.  共通パーツ（ヘッダー・フッター)
   ========================================================================== */

   
/* --- header  --------------------------------- */

header{
  margin-bottom: 1rem;
}

h1{
  font-size: clamp(0.75rem, 0.706rem + 0.188vw, 0.875rem);
  font-weight: normal;
}

h2{
  padding-bottom:0.5em;
}

.header-contact{
  width: 100vw;
  text-align:center;
  margin-bottom: 1em;
}
.header-contact a{
  width: 100vw;
  position: relative;
  display: inline-block;
  padding: 0.25em 1em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  font-weight: bold;
}
.header-contact a:hover {
  opacity: 0.8
}
.header-contact a img{
  display: inline;
  width: 1.4rem; 
  height: 1.4rem; 
  vertical-align: middle;
  margin: 0 0.2em; 
}
.header-contact > a > span{
  font-size:1.4em;
}

@media (min-width: 600px) {

  .header-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width :100vw;
  }

  .header-inner h2{
    order: 1;
    display: inline-block;
    justify-content: flex-start;
    padding-block: 5px;
    width: 288px;
  }

  .header-inner h2 img{
    width: 288px;
  }   

  .header-navi{
     display: inline-block;
     order: 3; 
     width: 100vw;
  }

  .header-contact {
    order: 2;  
    display: inline-block;
    max-width: 280px;
  }   

  .header-contact a{
    display: inline-block;
    width: 280px;
    text-align: center;
  }  
}

.header-navi ul {
  display: flex;
}
.header-navi ul li {
  list-style-type: none;
  background-color: #fff;
  color: #000;
  flex-grow: 1;
  text-align: center;
}
.header-navi ul li + li {
  border-left: 1px solid #000;
}
.header-navi ul li a{
  color:#333;
  display: inline-block; 
  transition: transform 0.1s ease; 
  font-weight: bolder;
}
.header-navi ul li a:hover {
  color:#000;
  transform: translateY(0.1em);
}

@media (min-width: 1024px) {

  .header-inner{
    display: flex;
    align-items: center; 
  }

  .header-inner h2{
    order:1;
    display: inline-block;
    justify-content: flex-start;
    padding-block: 5px;
    width: 30vw;
    max-width:320px;
  }
  .header-inner h2 img{
    width: 300px;
  }

  .header-navi{
    order:2;
    width:auto;
    text-align:right;
  }
  .header-navi ul{
    margin-left:auto;
  }
  .header-navi ul li{
    padding:0 1em;
  }

  .header-contact {
   order:3;
   display: inline-block;
   width: 30vw;
   text-align:right;
  }   
  .header-contact a{
    display: inline-block;
    width: 280px;
    text-align: center;
    font-size:16px;
  }

}

/* ---------- footer ---------- */

.footer-navi{
  border-top:1px solid #cddde2;
  margin:3rem 0;
}
.footer-navi ul {
  padding-block: clamp(12px, 2vw, 20px);
}
.footer-navi ul li{
  border:1px solid #cccccc;
  margin:0.2rem 0;
  text-align:center;
}
.footer-navi ul li:hover{
  color:#fff;
  background-color: #3296b4;
}

footer img{
  margin-bottom:1rem;
}

.footer-address{
  padding:0 1rem;
  margin-bottom: 1rem;
}
.footer-address p{
  padding:1rem 0;
}

.footer-contact{
  width:100vw;
  text-align:center;
  margin: 1em auto;
  max-width:1024px;
}
.footer-contact a{
  width: 100vw;
  max-width:1024px;
  position: relative;
  display: inline-block;
  padding: 0.25em 1em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  font-weight: bold;
}
.footer-contact a:hover {
  opacity: 0.8
}
.footer-contact a img{
  display: inline;
  width: 16px; 
  height: 16px; 
  vertical-align: middle;
  margin: 0 0.2em; 
}

.copyright{
  display: flex;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.7;
}

@media (min-width: 600px) {

  .footer-navi{
    border-bottom:1px solid #cddde2;
    background-color: #eff6f8;
  }
  
  .footer-navi ul{
    display: flex;
    max-width:1024px;
    margin:0 auto;
  }
  .footer-navi ul li{
    border:0;
    margin:1rem auto;
    font-size:16px;
  }

  .footer-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width :100vw;
  }

  .footer-logo{
    order: 1;
    display: inline-block;
    justify-content: flex-start;
    padding-block: 5px;
    width: 255px;
  }
  .footer-logo img{
    width: 255px;
  }   

  .footer-address{
    order:2;
    display: inline-block;
  }
  .footer-address p{
    padding:0;
    font-size:16px;
  }

  .footer-contact{
    order:3;
    display: inline-block;
  }

  .nowrap-first{
    display: none;
  }
}

@media (min-width: 860px) {
  .nowrap-second{
    display: none;
  }
}


/* ---  index.html以外のページタイトル  --------------------------------- */

main .h3-pagetitle{
  margin:0 auto;
  background-color:#085091;
  background-image: url(../image/title-liner.png);
  background-size:1024px;
  background-repeat: no-repeat;
  background-position: center;
}

main .h3-pagetitle .inner{
  background-color: rgb(255 255 255 / 0.1);
  width:100%;
  height:auto;
}


/* ==========================================================================
   3.  各ページの設定
   ========================================================================== */


/* ---  INDEX mv  --------------------------------- */

.mv-outer{
  background-image: url( ../image/mv.png );
  background-size:cover;
}

.mv{
  position: relative;
  padding:1em;
  margin-bottom:1em;
  aspect-ratio: 21 / 9; 
  margin:0 auto;
  max-width: 1024px;
}

.mv p{
  font-size:16px;
  -webkit-text-size-adjust: 100%;
  color:#fff;
  line-height: 1.4;
  padding-bottom:3em;
}

.mv > p{
  position: absolute;
  top:1rem;
  left:1rem;
}

.mv-lead{
  position: absolute;
  right:1rem;
  bottom:0.5rem;
  font-weight :bold;
  text-align:right;
}

.mv-lead p{
 padding-bottom:0; 
}

.mv-lead img{
  max-width:30vw;
  padding-bottom:1em;
  margin-left:auto;
}

.mv span{
  display:none;
  position: absolute;
}

.mv span.image-003{
  display:inline-block;
  top:5%;
  right:5%;
  width:200px;
  opacity: 0.8;
}

@media (min-width: 600px) {
  .mv{
    aspect-ratio: 16 / 9; 
  }

  .mv p{
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
  }

  .mv > p{
    position: absolute;
    margin:1rem 0 0 1rem;
  }
  .mv-lead{
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight :bold;
    padding-bottom:0.5em;
    text-align:right;
    padding-right: 2em;
  }
  .mv-lead p{
    padding-bottom:0.5rem;
  }
  .mv-lead img{
    width:240px;
    padding-bottom:1em;
  }

  .mv span{
    display:inline-block;
  }
  .mv span img{
    display:inline-block;
    margin-left:0;
    opacity: 0.6;
  }

  .mv span.liner img{
    opacity: 1;
    aspect-ratio: 8 / 5;
    width:100%;
  }

  .mv span.image-003{
    top:5%;
    right:5%;
    width: clamp(15.625rem, 10.123rem + 23.474vw, 31.25rem);
  }

  .mv span.image-013{
    bottom:15%;
    right:10%;
    width: clamp(11.25rem, 7.685rem + 15.211vw, 21.375rem);
  }

  .mv span.image-004{
  top:20%;
    left:30%;
    width: clamp(7.5rem, 4.595rem + 12.394vw, 15.75rem);
  }

 /* ---  mv imgスライダー --- */

  .slideInL-img01 {
    animation: slideInL01 2s ease-in-out 1 forwards;
  }

  @keyframes slideInL01 {
    from { 
      transform: translateX(-30%);
      opacity: 0;
    }
    to { 
      transform: translateX(0%);
      opacity: 1; 
    }
  }

  .slideInL-img02 {
    animation: slideInL02 2s ease-in-out 1 forwards;
  }

  @keyframes slideInL02 {
    from { 
      transform: translateY(-30%);
      opacity: 0;
    }
    to { 
      transform: translateY(0%);
      opacity: 1; 
    }
  }

  .slideInL-img03 {
    animation: slideInL03 2s ease-in-out 1 forwards;
  }

  @keyframes slideInL03 {
    from { 
      transform: translateY(30%);
      opacity: 0;
    }
    to { 
      transform: translateY(0%);
      opacity: 1; 
    }
  }
 /* ---  //mv imgスライダー// --- */
}

@media (min-width: 1024px) {

  .mv span.image-003{
    top:5%;
    right:5%;
    width: 414px;
  }

  .mv span.image-013{
    bottom:15%;
    right:10%;
    width: 289px;
  }

  .mv span.image-004{
  top:20%;
    left:30%;
    width: 210px;
  }

}

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

main .jigyou{
  background-color: #eff6f8;
}

main .goaisatsu h3, main .jigyou h3{
  color: #00316A;
  margin-bottom:1rem;
}

main .column{
  display: flex;
  gap: 4px;
}
main .column img{
  width: calc((100% - 8px) / 3);
  height: auto;
  display: block;
}

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

main .setsubi h4 {
  position: relative;
  padding: 5px 5px 5px 60px;
  background: #3296B4;
  font-size: 1.3em;
  color: white;
  margin-bottom: 3rem;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

main .setsubi h4:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

.setsubi-line .inner{
  max-width:80vw;
  margin:0 auto;
  padding-bottom:3rem;
}

.setsubi-line .first{
margin-bottom:2rem;
}

.setsubi-line .inner .item{
  text-align:center;
}

.setsubi-line .inner .item span {
  display: block ;
  font-size:16px;
  background: #f4f4f4;
  border: 1px solid #ddd;
  margin:0 auto;
  padding:20px;
  box-sizing: border-box;
  text-align:center;
}

.setsubi-line .inner .item span br.nowrap{
  display: none ;
}

.setsubi-line .inner .item:not(:last-child):after {
  content:"▼"; 
}

h5{
  display: inline-block ; 
  width:100%;
  --stripe-color: #b2aba1; /* ストライプの色 */
  position: relative;
  padding: .1em 0; /* 余白 */
  color: #000; /* 文字色 */
  font-size:1.2em;
  font-weight: normal;
  margin-top:4rem;
  margin-bottom:2rem;
}

h5:first-child{
  margin-top:0;
}

h5::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    transparent 25%,
    var(--stripe-color) 25%,
    var(--stripe-color) 50%,
    transparent 50%,
    transparent 75%,
    var(--stripe-color) 75%,
    var(--stripe-color)
  );
  background-size: 4px 4px;
}


@media (min-width: 770px) {

  .setsubi-line .inner{
    max-width:900px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start ;
  }

  .setsubi-line .inner img{
    width:90%;
    border:10px solid #cddde2;
    margin:0 auto;
  }

  .setsubi-line .inner .item{
    display: flex; 
    align-items: center;
    margin-bottom:2rem;
  }

  .setsubi-line .inner .item:not(:last-child):after {
    content:"▶"; 
  }

  .setsubi-line .inner .item span{
    display: flex; 
    align-items: center;
    height:150px;
    margin:0 0.5rem;
  }

  .setsubi-line .inner .item span br.nowrap{
   display:inline;
  }

} /* //@media (min-width: 770px) */


.setsubi-machine .inner{
  width:80%;
  margin:0 auto;
}

.setsubi-machine .inner div{
  margin-bottom:2rem;
}


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

.company h4{
  font-size: 1.6rem;
  text-align: center;
  font-weight:normal;
  color:#000;
}

.company .item-title{
  font-size: 1.1rem;
  font-weight:normal;
  color:#000;
  line-height: 3rem;
}

.company table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom:4rem;
  border-top:1px solid #cccccc;
}

.company table tr{
  border-bottom:1px solid #cccccc;  
}

.company table th, .company table td{
  display: block;
  text-align: left;
}

.company table th{
  background-color:#f6f6f6;
  border-bottom:1px solid #cccccc;  
  font-weight:bold;
  padding: 0.5rem 1rem;
}

.company table td{
  background-color: #fff;
  padding: 0.5rem 3rem;
}

.company table td .item{
  padding-bottom:3rem;
}

.company table td .item img.photo{
  padding-bottom:1rem;
}

.company .item span.maplink {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  padding: .5em 1em;
  border: none;
  border-radius: 5px;
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}

.company .item span.maplink:hover {
  background-color: #1579c0;
}

.company .item span.maplink img{
  display:inline-block;
  margin-left:0.3rem;
  width: 0.9rem;
}

@media (min-width: 600px) {

  .company table th, .company table td{
    display: table-cell;
    text-align: left;
    padding: 1rem;
  }

  .company table th{
    background-color:#f6f6f6;
    font-weight:normal;
    white-space: nowrap;
  }

  .company table td{
    background-color: #fff;
    padding: 1rem 2rem;
  }

  .company table td .item{
    padding-bottom:3rem;
  }

  .company table td br.nowrap-first{
    display: none;
  }

}

@media (min-width: 1024px) {
  
  .company table td br.nowrap{
    display: none;
}

}

.company .content-wrap{
  padding-bottom: 0;
}


/* ---------- CONTACT ---------- */

.contact .item{
  text-align:center;
  margin:1rem auto;
  margin-top:3rem;
  font-size: 1.6rem;
  background-color:#eff6f8;
  padding:1rem 0;
}

.contact .item .notes{
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact .item span:first-child{
  display:block;
  margin-bottom:1rem;
}

.contact .item img{
  display:inline-block;
  width:1.4rem;
  margin-right:0.5rem;
}

.contact .tel span{
  display:inline-block;
}

.contact .item .number{
  font-weight: bold;
}

.contact .tel .pc{
  display:none;
}

.contact .notes{
  display: block;
  line-height:1.2;
  max-width:80%;
  margin:1rem auto;
} 

.contact .mailform a{
  text-decoration: underline; 
}

.contact .mailform a:hover{
  color:#1579c0;
}

.contact .mailform .number{
  vertical-align: middle;
}

.contact .mailform .number img:last-child{
  width:0.9rem;
  margin-left:0.5rem;
}

.contact > div:last-child{
  width:100%;
  margin:0 auto;
  margin-top:2rem;
  padding:2rem;
  border-width: 1px 0;
  border-style: solid;
  border-color:#3296b4;
  font-size:0.9rem;
}


@media (min-width: 450px) { 

  .contact .tel .sp{
    display:none;
  }

  .contact .tel .pc{
    display:inline;
  }

  .contact > div:last-child{
    width:80%;
  }
}