*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body{
 background-color: #0F386F;
 margin:0px;
}

.f-12{
  font-size: 12px;
}


.f-15{
  font-size: 15px;
}

.f-18{
  font-size: 18px;
}


.f-22{
  font-size: 20px;
}


.ja{
  font-family: 'Noto Sans JP', sans-serif;
}

.ja-serif{
  font:'Noto Serif CJK JP', serif;
}

.en{
  font-family: 'Dosis', sans-serif;
}

header{
  display: flex;
	justify-content: flex-end;
	/* align-items: center; */
  /* padding: 10px 10px; */
  position:fixed;
  z-index: 10;
  background-color:#0F386F;
  width: 100%;
  margin:0px auto;
}

.fa-bars{
display: none;
}

.logo{
  width: auto;
  height: auto;
  margin-right: auto;
  color: #fff;
  text-decoration: none;
  padding-left:26px;
   padding-top: 20px;
  padding-bottom: 10px;
}

.headerimg{
  width: auto;
  height: 47px;
}

.ul-r{
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 6px;
  list-style-type: none;
  align-items: center;
  padding-right: 20px;
}

.li-r{
  margin: 10px 20px 0 20px ;
  text-align: center;
}

header li{
  margin: 10px 20px 0 20px ;
  text-align: center;
}

.header-subtitle{
  text-align: center;
  margin-top: 0;

}

.nav-text:hover {
	color:#BA965C; 	/*リンクにマウスが乗ったら背景色を変更する*/
}

.nav-text{
  color: #fff;
  text-align: center;
}

nav a{
  text-decoration: none;
}

.main-wrapper{
  /* background-color: #0F386F; */
  margin-top: 0;
  margin-bottom: 50px;
}


.header-contents{
  background-size: cover;
  padding: 81px 0 0px 0;
  text-align: center;
  /* background-color: #797979; */
  width: 100%;
  height:auto;
}

.serviceimg-r{
  width: 100%;
  height: auto;
}

.serviceimg-1{
  display: none;
}


.white-back{
  /* background-color: #fff; */
  background-image : url(images/bg_pc.png);
  margin:30px 30px 0 30px;
  background-size: contain;
}

.works-wrapper{
  /* background-color: white; */
  width: 100%;
  height: auto;
  /* margin-top: 144px; */
  /* padding-top: 144px; */
  padding-left: 60px;
  padding-right: 60px;
}

.text-box{
  width: 100%;
  height: auto;
}

.text-box-paragraph-r{
  text-align: center;
  font-size: 16px;
  padding-top: 100px;
  line-height: 60px;
}

.text-box-paragraph-1{
  display: none;
}

.service-contents-1{
  max-width: 852px;
  height:auto;
  margin: 150px auto 0 auto;

}


.service-contents-2{
  max-width: 852px;
  height:auto;
  margin: 175px auto 0 auto;

}

.service-video{
  text-align: center;
  margin-top: 40px;
}


.ec-video{
  width: 60%;
  height: auto;
}

.service-contents-3{
  max-width: 852px;
  height:auto;
  margin: 175px auto 0 auto;
}

.service-text-paragraph-1{
  padding-bottom: 180px;
  text-align: left;
}

.service-image{
  width: 100%;
  height: auto;
}

.service-image-img{
  width: 100%;
  height: auto;

}

.service-text{
  margin-top: 30px;
}

.title{
  color:#0F386F;
  font-size: 30px;
  text-align: center;
  opacity: 1;
  font-weight: bold;
}


.service-text-paragraph{
  text-align: left;
}


.footer-text{
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border-left:solid 1px #fff;
  border-right:solid 1px #fff;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.footer-wrapper{
  height: auto;
  background-color: #fff;
  padding-top: 0px;
  text-align: center;
  /* margin-bottom: 20px; */
}

.footer-logo{
  width: auto;
  height: auto;
  text-align: center;
}

.copy{
  font-size: 15px;
  color: #383838;
  text-align: center;
}