@charset "utf-8";
/*共通部分
---------------------*/
html{
  font-size: 100%;
}
body{
       font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ Pro W3","sans-serif";
       line-height: 1.7;
       color: #432;
}

a{
  text-decoration: none;
}
img{
  max-width: 100%;
}
h3{
  font-size: 1.1rem;
}
h6{
  font-size: 1.0rem;
  margin-top: 20px;
}
p{
  font-size: 0.95rem;
}
.space-3rem{
  margin-top: 3rem;
}
.center{
display: flex;
justify-content: center;
}
.right{
  display: flex;
  justify-content: flex-end;
}
.center-02{
justify-content: center;
}
.space-between{
  justify-content:space-between;
}
.left{
  justify-content: flex-start;
}
.margin-top-30{
  margin-top: 30px;
}
.margin-top-50{
  margin-top: 50px;
}
.margin-top-100{
  margin-top: 100px;
}
.margin-bottom-30{
  margin-bottom: 30px;
}
.under-bar{
  border-bottom: 2px solid;
}
.flex-end{
  align-items: flex-end;
}
.green{
  color:#0F8D40;
}
/*HEADER
----------------------*/
.intro{
  font-size: 0.50rem;
  background: -moz-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  text-align: center;
}
.header{
  display:flex;
  justify-content: center;
  align-items: center;
}
.page-header{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 0 4%;
}
.page-header-up{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.logo{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
}
.logo img{
  max-width: 280px;
}

.main-nav{
  width: 100%;
  font-size: 0.875rem;
  text-transform: uppercase;
  list-style:none;
  text-align: center;
}
.main-nav ul{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0 4%;
}

.main-nav ul li{
  list-style: none;
  margin-left: 36px;
}
.main-nav ul li a{
  color: #111;
  opacity: 1;
}
.main-nav ul li a:hover{
  color: #0bd;
   opacity: 1;
}

.sub-nav-1, .sub-nav-2 p{
  font-size: 0.75rem;
}
.info-button {
  background: #d52f25;
  background: -moz-linear-gradient(top, #d52f25, #d52f25);
  background: -webkit-linear-gradient(left top,#d52f25,#d52f25);
  background: linear-gradient(bottom,, #d52f25, #d52f25)
  border: 1px solid #d52f25;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
  color: #fff;
  display: inline-block;
  font-family: "Jun 501", sans-serif;
  font-size: 14px;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #d52f25;
  width: 200px;
}

.info-button_inner {
  display: block;
  height: 56px;
  line-height: 56px;
  opacity: 0.9;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.info-button.hover .info-button_inner,
.info-button:hover .info-button_inner{
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.download-button {
  background: #026CAF;
  background: -moz-linear-gradient(top, #026CAF, #026CAF);
  background: -webkit-linear-gradient(left top,#026CAF,#026CAF);
  background: linear-gradient(bottom,, #026CAF, #026CAF)
  border: 1px solid #026CAF;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
  color: #fff;
  display: inline-block;
  font-family: "Jun 501", sans-serif;
  font-size: 14px;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #026CAF;
  width: 200px;
}

.download-button_inner {
  display: block;
  height: 56px;
  line-height: 56px;
  opacity: 0.9;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.download-button.hover .download-button_inner,
.download-button:hover .download-button_inner{
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.sub-nav-1{
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
  text-align: center;
  width: 200px;
  line-height: 1.2;
  margin: 20px 10px 0px;

}
.sub-nav-2{
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 1;
  -ms-grid-row: 1;
  text-align: center;
  margin: 20px 10px 0px;
  width: 200px;

}
.sub-nav-3{
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 1;
  -ms-grid-row: 1;
  text-align: center;
    margin: 20px 10px 0px;
  width: 200px;
}
.sub-nav-4{
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
  text-align: center;
    margin: 20px 10px 0px;
  display: flex;
}
.sub-nav-4 img{
  margin: 10px;
  width: 40px;
  height: 40px;
}

.wrapper{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4%;
}
.telnumber{
  margin-top: 3px;
  margin-bottom: 10px;
}
/*HOME
--------------------*/
.home-content{
  text-align: center;
  margin-top: 5%;
}
.home-content p{
  font-size: 1.125rem;
  margin: 10px 0 42px;
}
/*見出し
---------------------*/
.page-title{
  font-size: 5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
}
.title{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.social h3{
  font-size: 1.375rem;
  text-align: center;
  margin-bottom: 1rem;
}
.social a{
  font-size: 0.75rem;
  text-align: justify;
}
.social{
  position: relative;
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.social img{
  margin-bottom: 2rem;
}
.social-image{
  margin: 30px;
  text-align: center;
}
.graph{
  max-width: 600px;
  position: center;
}
/*ボタン
---------------------*/
.button{
  text-align: center;
  width: 32%;
  margin: 0 1%;
}
.buttonlist{
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  list-style: none;
  margin-top: 50px;
  margin-bottom: 50px;
}
.button-contact{
  margin: 10px;
  display: flex;
  justify-content: center;
}
.button2{
  display: block;
  width: 50%;
  margin: 0 auto;
}
.button2 a{
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 3rem;
  padding-top: 1rem;
  background: #dbedf0;
  color: #111;
  text-align: center;
}
.button2 a:hover{
  background: -moz-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(135deg,#85241b,#f1e2be,#85241b);
}
.buttonlist2{
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: flex-start;
  list-style: none;
  margin-top: 3rem;
  height: 3.5rem;
  background: -moz-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(90deg,#85241b,#f1e2be,#85241b);
}
.button3{
  display: block;
  width: 50%;
  margin: 0 auto;
}
.button3 a{
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 3rem;
  padding-top: 1rem;
  background: #dbedf0;
  color: #111;
  text-align: center;
}
.button3 a:hover{
  background: -moz-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(135deg,#85241b,#f1e2be,#85241b);
}
.buttonlist3{
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: flex-start;
  list-style: none;
  margin-top: 3rem;
  height: 3.5rem;
  background: -moz-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(90deg,#85241b,#f1e2be,#85241b);
}
.button4{
  display: block;
  width: 33.33%;
  margin: 0 auto;
}
.button4 a{
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 3rem;
  padding-top: 0.7rem;
  background: #fff;
  color: #111;
  text-align: center;
  border-style: solid;
  border-width: thin;
}
.button4 a:hover{
  background-color: #ffbf1f;
}
.buttonlist4{
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.button5{
background: #026CAF;
background: -moz-linear-gradient(top, #026CAF, #026CAF);
background: -webkit-linear-gradient(left top,#026CAF,#026CAF);
background: linear-gradient(bottom,, #026CAF, #026CAF)
border: 1px solid #026CAF;
border-radius: 28px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
color: #fff;
display: inline-block;
font-family: "Jun 501", sans-serif;
font-size: 14px;
height: 36px;
line-height: 36px;
overflow: hidden;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #026CAF;
width: 240px;
}
.button5 p{
  font-size: 1.2rem;
}
.button_under{
  text-align: center;
  margin: 0,0;
}
.button4 a{
  display: block;
  height: 3rem;
  padding-top: 0.7rem;
  background: #fff;
  color: #111;
  text-align: center;
  border-style: solid;
  border-width: thin;
}
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: -moz-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(135deg,#85241b,#f1e2be,#85241b);
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*大きな背景画像
-------------------*/
.big-bg{
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.big-bg img{
  width: 100%;
  max-height: 30vh;
  margin: 0 auto;
}
.slider{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.slider__content{
    min-width: 100%;
    animation: sliderAnime 10s ease-in-out infinite;
}

@keyframes sliderAnime{
    0%{    }
    16.6%{transform: translateX(0);}
    33.3%{transform: translateX(-100%);}
    50%{transform: translateX(-100%);}
    66.6%{transform: translateX(-200%);}
    83.2%{transform: translateX(-200%);}
    100%{transform: translateX(-300%);}
}

.slider__img{
    max-width: 100%;
    min-width: 100%;
}
#home h1{
  font-size: 8rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
  line-height: 0.8;
  padding-top: 100px;
  letter-spacing: 1px;
  font-family: "Reimin Ultra";
}
#home h2{
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  line-height: 1.7;
  margin-top: 90px;
}
.info-contents{
  border-top: 1px solid #111;
  margin-top: 3rem;
  text-align: center;
  border-collapse: collapse;
}
.info-contents tr{
  font-size: 1.0rem;
  padding: 1rem;
  text-align: left;
  justify-content: space-around;
}
.info-contents td{
 border-bottom: 1px solid #111;
 min-width: 150px;
 padding: 20px;
}
#info img{
  max-height: 60vh;
}
#service img{
  max-height: 60vh;
}
#employment img{
  max-height: 60vh;
}
/*NEWS
--------------------------*/
.news{
  border-top: 1px #111 solid;
  margin: 1rem;
  margin-bottom: 3rem;
}
.newslist{
  font-size: 1rem;
  padding; 8px 8px;
  border-bottom: 2px #111 solid;
  list-style: none;
  margin-top: 3rem;
}


.index-service-title{
  border-bottom: 1px solid;
  text-align: center;
  margin-top: 30px;
}
.index-service-title p{
  font-size: 1.3rem;
  font-weight: 900;
  font-family: 游ゴシック体;
}
.index-service-text{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-around;
  margin-top: 30px;
}
.index-service-text-01{width: 25%}
.index-service-text-02{width: 3%; margin-bottom: 50px;}
.index-service-text-03{width: 33%}
.index-service-text-04{width: 33%}
.index-service-text-05{width: 39%}
.index-service-text-06{width: 10%}
.index-service-text-07{width: 39%}
.index-service-text-08{width: 10%}
.index-service-text-09{width: 18%}
.index-service-text-10{width: 3%; margin-bottom: 50px;}
.index-service-text-11{width: 30%}
.index-service-text-12{width: 15%}
.index-service-text-13{width: 3%; margin-bottom: 50px;}
.index-service-text-14{width: 23%}

.index-service-wrapper{
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
}
#index-service,#social_situation{
  margin-top: 50px;
}
#social_situation img{
  margin-top: 1rem;
}
/*フッター最下部
--------------------------*/
footer{
  background: #c83e36;
  text-align: center;
  padding: 26px 0;
}
footer p{
  color: #fff;
  font-size: 0.875rem;
}
/*フッター０２
--------------------------*/
.footer-footer{
  background: -moz-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: -webkit-linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  background: linear-gradient(90deg,#85241b,#f1e2be,#85241b);
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 5rem;
}
.footer-nav{
  display: flex;
  justify-content: space-between;
}
.footer-nav-01{
  margin: 0 2%;
  font-size: 0.90rem;
  color: #111;
  text-transform: none;
  list-style: square;
}
.footer-nav-02{
  margin: 0 2%;
  font-size: 0.90rem;
  color: #111;
  text-transform: none;
}
.footer-company{
  margin: 0 2%;
}
.footer-logo{
    text-align: center;
      margin: 20px 5px 0px;
    display: flex;
}
.footer-logo img{
    margin: 10px;
    width: 40px;
    height: 40px;
  }
}
/*代表メッセージ
------------------------------*/
#daihyoumessage h3{
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1rem;
}
#daihyoumessage h4{
  font-size: 1.25rem;
  text-align: center;
  color: #fff;
  background-color: #888;
  width: 150px;
  margin-bottom: 2rem;
}
.daihyoumessage{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.daihyoumessage-a{
  width: 57%;
}
.daihyoumessage-b{
  width: 38%;
}
.daihyoumessage-c{
  margin-top: 1rem;
  width: 38%;
}
.daihyoumessage-d{
  width: 57%;
}
.daihyoumessage-e{
  width: 57%;
}
.daihyoumessage-f{
  margin-top: 1rem;
  width: 38%;
}
/*会社概要
------------------------------*/
.profile-image{
  margin: 2rem 20%;
  text-align: center;
}

/*アクセス
------------------------------*/
.address{
  margin: 1.5rem 0;
}
/*Service-1
------------------------------*/
.service{
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.service-1{
   width: 100%
}
.service-0{
   width: 47%
}
.service-2{
  width: 47%
}
.service-3{
  width: 25%;
}
.service-3-1{
  width: 15%
}
.service-4{
  width: 47%
}
.service-5{
   width: 57%
}
.service-6{
  width: 38%
}
.service-7{
  width: 41%
}
.service-8{
  width: 48%
}
.service-9{
   width: 57%
}
.service-10{
  width: 38%
}
.service-11{
  width: 47%
}
.service-12{
  width: 42%
}
.service-13{
   width: 47%
}
.service-14{
  width: 47%
}
.service-15{
  width: 80%
}
.service-1-title p{
  font-size: 1.1rem;
}
#service-01 h3{
  font-size: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  border-color: #ffdead;
  border-width: thin;
  border-style: solid;
  margin-bottom: 2rem;
}
#service-01 h4{
  font-size: 1.1rem;
}
#service-01 h5{
  font-size: 1rem;
  color: #333;
}
#service-02 h3{
  font-size: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  margin-bottom: 2rem;
  background-color: #dc8ba7;
  height: 3rem;
  padding: 0.5rem;
}
#service-02 h4{
  font-size: 1.1rem;
  margin: 20px;
}
#service-02 h5{
  font-size: 1rem;
  color: #ab0f50;
}
#partner h3{
  font-size: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  border-bottom: 1px solid;
}

.service-16{
  display: flex;
  position: relative;
  align-items: center;
}
.service-16 img{
  position: absolute;
  left: 10%;
  width: 100px;
  z-index: 2;
}
.service-16 h3{
  width: 100%;
  z-index: 2;
}

.day-title{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
  position: relative;
}
.day-title-01{
  background-color: #ffffff;
 color: #cc0000;
 border: #cc0000 solid 2px;
 border-radius: 20px;
 height: 40px;
 width: 150px;
 text-align: center;
 padding: 2px;
 z-index: 2;
}
.day-title-01 span{
 font-size: 1.2rem;
}
.day-title-02{
  width: 500px;
  background-color: #E6E6E5;
  padding-left: 30px;
  position: absolute;
  left: 130px;
  z-index: 1;
}
.day-title-02 p{
  font-size: 1.1rem;
  font-weight: 900;
  font-family: 游ゴシック体;
}
.day-text{
  display: flex;
  justify-content:space-around;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.day-text-00{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  align-items:flex-start;
  margin-top: 30px;
  margin-bottom: 30px;
}
.day-text-01{
  width: 40%;
}
.day-text-01 img{
  width: 100%;
  background-size: cover;
}
.day-text-02{
  width: 40%;
}
.day-text-02 img{
  width: 100%;
  background-size: cover;
}
.day-text-03{
  width: 20%;
}
.day-text-03 img{
  width: 100%;
  background-size: cover;
}
.day-text-04{
  width: 33%;
}
.day-text-04 img{
  width: 100%;
  background-size: cover;
}
.day-text-05{
  width: 35%;
}
.day-text-05 img{
  width: 100%;
  background-size: cover;
}
.day-text-06{
  width: 55%;
}
.day-text-06 img{
  width: 100%;
  background-size: cover;
}
.allow{
  width: 50px;
}

.day-text-02{
  width: 420px;
  position: relative;
}

.day-text-grid{
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  flex-wrap: wrap;
}
.day-text-grid-text {
  border: 2px solid #cc0000;
  border-radius: 5px;
  width: 130px;
  height: 60px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.day-text-grid-text p{
}
.day-text-grid-img-01{
 height: 300px;
 display: flex;
 align-items: center;
}
.day-text-grid-img-02{
  position: absolute;
  top:  0px;
  left: 450px;
  width: 250px;
}
.day-text-grid-img-03{
  position: absolute;
  top:  250px;
  left: 500px;
  width: 400px;
}
.day-text-grid-img-04{
  position: absolute;
  top:  80px;
  left: 700px;
  width: 200px;
}

.case-text{
  display: flex;
  justify-content:space-around;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.case-text-01{
  width: 40%;
}
.case-text-01 img{
  width: 100%;
  background-size: cover;
}
.case-text-01 p{
  color: #0D6BA6;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  font-family: 游ゴシック体;
}
.case-text-02{
  width: 40%;
}
.case-text-02 img{
  width: 100%;
  background-size: cover;
}
.case-text-02 p{
  color: #D94929;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  font-family: 游ゴシック体;
}
.service-1-img{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
}
.service-1-img img{
  width: 48%;
}

/*Service-2
------------------------------*/
.service-manga{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.service-manga-1{
   width: 100%;
}
.service-manga-2{
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-around;
}
.service-manga-2 img{
  width: 47%;
}
.service-manga-title{
}
.service-manga-title p{
  font-size: 1.1rem;
}
#service-03 h3{
  font-size: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  margin-bottom: 2rem;
  background-color: #7acba1;
  height: 3rem;
  padding: 0.5rem;
}
#service-03 h5{
  font-size: 1rem;
  color: #7acba1;
}
/*Service-3
------------------------------*/
.service-03{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.service-03-1{
   width: 100%;
   margin-bottom: 30px;
}
.service-03-2{
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-around;
}
.service-03-2 img{
  width: 47%;
  height: 300px;
  object-fit: contain;
}
.service-03-4{
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-around;
}
.service-03-4 img{
  width: 47%;
  height: 300px;
  object-fit: contain;
}



.service-03-title{
  margin-bottom: 30px;
}
.service-03-title p{
  font-size: 1.1rem;
}
#service-04 h3{
  font-size: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  margin-bottom: 2rem;
  background-color: #00a0dc;
  height: 3rem;
  padding: 0.5rem;
}
#service-04 h5{
  font-size: 1rem;
  color: #00a0dc;
}
/*社員からのメッセージ１
------------------------------*/
.employment_message h6{
  font-size: 1.0rem;
  margin-top: 10px;
}
.employment_message p{
  margin-top: 10px;
}
.employment_image{
  margin-top: 40px;
  padding-bottom: 40px;
}
.employment_message{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.employment_message-1{
  width: 49%;
}
.employment_message-2{
  width: 49%;
}
.employment_message-3{
  width: 40%;
}
/*CONTACT
------------------------------*/
#contact img{
  max-height: 60vh;
}
#contact-01{
  text-align: center;
  border-style: solid;
  border-width: medium 0;
  border-color: #ffdead;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 20px;
}
#contact-01 h4{
  font-size: 1.5rem;
  font-weight: bold;
  color: #d52f25;
  margin-top: 20px;
}
#contact-01 h5{
  font-size: 1.25rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

#formWrap {
	width:700px;
	margin:2rem auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	text-align:left;
}
input,textarea {
	font-weight:normal;
  border:1px solid #111;
}
/*iframe*/
iframe{
  width: 100%;
}

/*ポップアップ*/
.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}
.popupModal1 > input:nth-child(1) + label {
    cursor: pointer;
}
.modalPopup2 { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    height: 80%;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 20px;
    overflow: hidden;
}
@media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
         width: 600px;
         height: 400px;
         padding: 30px;

    }
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
     left: 50% !important;
     top: 50% !important;
     margin-left: 270px !important;
     margin-top: -310px !important;
}
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */

}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}


.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
     padding-bottom: .5em;
     margin: .5em 0;
     border-bottom:
     1px solid #ccc;
     font-weight: bold;
}
.modalTitle span{
  background-color: #20268C;
  color: #fff;
  padding: 5px;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     font-size: 14px;
     line-height: 1.8em;
}
.modalMain{
  margin-top: 150px;
  height: 120px;
  position: relative;
  background-color: #FFE67A;
  border-radius: 30px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.modalMain span{
  background-color: #000;
  color: #fff;
  padding: 5px;
}
.modalMain img{
  position: absolute;
  top: -130px;
  right: 20px;
  width: 180px;
}

/*IE11対応
------------------------------*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .buttonlist,.buttonlist1,.buttonlist2,.buttonlist3,.buttonlist4,{ width: 100%;} /* IE11 */
}

/*PC版
------------------------------*/
@media screen and (min-width: 680px){
  .pc { display:block; }
   .sp { display:none; }
   #header{
     display: none;
   }
}
/*モバイル版
------------------------------*/
@media(max-width: 1057px){
.sub-nav-4 {
  display: none;
}
}
/*モバイル版
------------------------------*/
@media(max-width: 1200px){
.logo {
  display: none;
}
}
/*モバイル版
------------------------------*/
@media(max-width: 875px){
  .pc { display:none; }
  .sp { display:block; }
  .page-title{
    font-size: 2.5rem;
  }
  .intro {
    text-align: left;
    width: 100%;
    padding-left: 30px;
  }
  .intro p{
    text-align: left;
    width: 80%;
  }
  .wrapper{
    width: 100%;
  }
  .title{
    display: block;
    width: 100%;
    object-fit: contain;
  }
/*大きな背景画像----*/
  .big-bg{
    background-size: contain;
  }
  .home-content{
    text-align: center;
    margin-top: 1%;
  }
  #home{
  }
  #info{
  }
  #service{
  }
  #employment{
  }
  #contact{
  }
  /*HEADER*/
  .header, .logo, .main-nav, .sub-nav-1, .sub-nav-2, .sub-nav-3, .sub-nav-4, .footer-nav-01, .footer-nav-02{
    display: none;
  }

  /*ボタン*/
  .buttonlist{
    display: block;
    max-height: auto;
    background: -moz-linear-gradient(left,#ffffff,#ffffff,#ffffff);
    background: -webkit-linear-gradient(left,#ffffff,#ffffff,#ffffff);
    background: linear-gradient(left,#ffffff,#ffffff,#ffffff);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 5px;
  }
  .button{
  width: 200px;


  margin: 0px auto;
  }
  /*FOOTER*/
  .footer-nav{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .footer-company{
    margin-bottom: 10px;
  }

  /*NEWS*/
  .news-contents{
    flex-direction: column;
  }
  article,
  aside{
    width: 100%;
  }
  #news .page-title{
    margin-top: 30px;
  }
  aside {
    margin-top: 60px;
  }
  .post-info{
    margin-top: 30px;
  }
  .post-date {
    width: 70px;
    height: 70px;
    font-size: 1rem;
  }
  .post-date span{
    font-size: 0.875rem;
    padding-top: 2px;
  }
  .post-title{
    font-size: 1.375rem;
  }
  .post-cat {
    font-size: 0.875rem;
    margin-top: 10px;
  }
  .post-title,
  .post-cat{
    margin-left: 80px;
  }
  .social-image{
    background-size: contain;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .social-image img{
    background-size: contain;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .index-service-text-05{width: 68%; margin-bottom: 10px;}
  .index-service-text-06{width: 30%; margin-bottom: 10px;}
  .index-service-text-07{width: 68%}
  .index-service-text-08{width: 30%}
  .index-service-text-09{width: 32%; margin-bottom: 10px;}
  .index-service-text-10{width: 6%; margin-bottom: 60px;}
  .index-service-text-11{width: 54%; margin-bottom: 10px;}
  .index-service-text-12{width: 30%; margin-bottom: 10px;}
  .index-service-text-13{width: 6%; margin-bottom: 60px;}
  .index-service-text-14{width: 46%; margin-bottom: 10px;}
  /*代表メッセージ*/
  .daihyoumessage{
    flex-direction: column;
    margin-bottom: 10px;
  }
  .daihyoumessage-a{
    width: 100%;
  }
  .daihyoumessage-b{
    width: 100%;
  }
  .daihyoumessage-c{
    width: 100%;
    order: 1;
  }
  .daihyoumessage-d{
    width: 100%;
  }
  .daihyoumessage-e{
    width: 100%;
  }
  .daihyoumessage-f{
    width: 100%;
  }
  .info-contents{
    width: 100%;
  }
  /*サービス*/
  .service-0{
     width: 100%;
  }
  .service-1{
     width: 100%;
  }
  .service-2{
    width: 100%;
  }
  .service-3{
    width: 50%
  }
  .service-3-1{
    width: 30%;
  }
  .service-4{
    width: 100%;
  }
  .service-5{
     width: 100%;
  }
  .service-6{
    width: 27%;
  }
  .service-7{
    width: 40%;
  }
  .service-8{
    width: 27%;
  }
  .service-9{
     width: 100%;
  }
  .service-10{
    width: 31%;
  }
  .service-11{
    width: 31%;
  }
  .service-12{
    width: 31%;
  }
  .service-13{
     width: 100%;
  }
  .service-14{
    width: 100%;
  }
  .service-15{
    width: 100%;
  }
  .service-16 img{
    left: 0px;
  }
  .day-title-02{
    width: 230px;
  }
  .day-text-02{
    width: 100%;
  }
  .day-text-03{
    width: 32%;
  }
  .day-text-04{
    width: 80%;
  }
  .day-text-grid-img-02,.day-text-grid-img-03,.day-text-grid-img-04{
    display: none;
  }
  .service-manga-1{
     width: 100%;
  }
  .service-manga-2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-size: contain;
  }
  .service-manga-2 img{
    width: 100%;
    height: 300px;
  }
  .service-03-1{
     width: 100%;
  }
  .service-03-2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .service-03-2 img{
    margin-bottom: 10px;
  }
  .service-03-4{
    display: block;
  }
  .service-03-4 img{
    width: 100%;
  }

    .service-03-img{
      width: 47%;
    }
    #service-04 h3{
      font-size: 3.6vw;
      padding: 4% 0;
    }
/*社員メッセージ*/
  .employment_message-1{
    width: 100%;
  }
  .employment_message-2{
    width: 100%;
    order: 1;
  }
  .employment_message-3{
    width: 100%;
  }
  /*CONTACT*/
  #formWrap {
    width:95%;
    margin:0 auto;
  }
  table.formTable th, table.formTable td {
    width:auto;
    display:block;
  }
  table.formTable th {
    margin-top:5px;
    border-bottom:0;
  }
  input[type="text"], textarea {
    width:80%;
    padding:5px;
    font-size:110%;
    display:block;
  }
  input[type="submit"], input[type="reset"], input[type="button"] {
    display:block;
    width:100%;
    height:40px;
  }

  /*フォーム*/
  input[type="text"],
  input[type="e-mail"],
  textarea{
    max-width: 100%;
  }

  /* bager menu */
  #header #navi {
    transition: all 0.6s;
    overflow-y: auto;
    padding-top: 40px;
    width: 300px;
    height: 40vh;
    z-index: 200;
    top: 0;
    right: -320px;
    background-color: #fff;
    position: fixed;
    flex-direction: column;
    align-items: baseline;
  }
  #header #navi li {
    padding: 10px;
  }
  #header .nav_btn {
    width: 44px;
    height: 44px;
    z-index: 300;
    top: 7px;
    right: 7px;
    cursor: pointer;
    position: absolute;
  }
  .hamburger_line {
    transition: all 0.6s;
    width: 34px;
    height: 2px;
    right: 5px;
    background-color: #000;
    position: absolute;
    z-index: 999;
  }
  .hamburger_line1 {
    top: 40px;
    right:5px;
  }
  .hamburger_line2 {
    top: 51px;
  }
  .hamburger_line3 {
    top: 62px;
  }
  .hamburger_line4 {
    top: 10px;
  }
  .hamburger_line5 {
    top: 21px;
  }
  .hamburger_line6 {
    top: 32px;
  }
  .nav_bg {
    opacity: 0;
    transition: all 0.6s;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    visibility: hidden;
    background-color: #000;
    cursor: pointer;
    position: fixed;
  }
  /* 表示された時用のCSS */
  .nav_open #header #navi {
    right: 0;
  }
  .nav_open .nav_bg {
    opacity: 0.8;
    visibility: visible;
  }
  .nav_open .hamburger_line1 {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav_open .hamburger_line2 {
    width: 0;
    left: 50%;
  }
  .nav_open .hamburger_line3 {
    transform: rotate(-45deg);
    top: 20px;
  }
  .nav_open .hamburger_line4 {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav_open .hamburger_line5 {
    width: 0;
    left: 50%;
  }
  .nav_open .hamburger_line6 {
    transform: rotate(-45deg);
    top: 20px;
  }
}