/*---------------------------
 Mobile Styling
 ---------------------------*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style: none;
}

.biz-udpgothic-regular {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.biz-udpmincho-regular {
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-style: normal;
}

/*---------------------------
 Header
---------------------------*/
.header{
  padding:1.0rem 1.0rem;
}

.header-logo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.header-logo-title{
  font-size: 18px;
}

.header-nav-menu {
  text-align: right;
  list-style: none;
}

.header-nav-menu-item{
  font-size: 14px;
  margin-left: 1.0rem;
}


.header-nav-menu li{
  text-align: right;
  padding-left: 1.0rem;
}

/*---------------------------
 Main - Hero
 ---------------------------*/

.main-hero{
  height: 500px;
  position: relative;
}

.main-hero h1{
  position: absolute;
  top: 20%;
  left:50%;
  font-size: 16px;
  line-height:1.5;
  padding: 1.0rem 1.0rem;
  background:rgba(11,60,93,.5);
}

/*---------------------------
 Main - philosophy
 ---------------------------*/

.main-philosophy{
   width: 100%;
   margin-top: 1.0rem;
   margin-bottom: 1.0rem;
}

.main-philosophy h2{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.main-philosophy h2::before{
  content: "";
  width: 60px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.main-philosophy-text{
  font-size: 12px;
  text-align: left;
  line-height: 1.5;
  width: 70%;
  margin: 0 auto;
}

.main-philosophy-img img{
  display: none;
}

/*---------------------------
 Main - Works
---------------------------*/

.main-works{
  text-align:center;
  width: 100%;
  margin-top: 1.0rem;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
}

.main-works h2{
  font-size: 16px;
  position: relative;
  padding-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.main-works h2::before{
  content: "";
  width: 60px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.main-works-text{
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  width: 50%;
  margin: 0 auto;
}

.main-works h3{
  font-size: 14px;
  text-align: center;
}

.main-works-item{
  width: 80%;
  margin: 0 auto;
  padding: 1.5rem;
  margin-top: 2.0rem;
  margin-bottom: 1.0rem;
}

.main-works-item-img img{
  width: 370px;
  height: 300px;
  padding: 1.0rem;
  margin: 0 auto;
}

.button{
  display:inline-block;
  padding:1.0rem 1.5rem;
  border:none;
  border-radius: 1.0rem;
  color:#ecf0f1;
  font-size:12px;
  letter-spacing: 1px;
  text-decoration: none;
  background-color:#0b3c5d;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.button-quinary{
  display:inline-block;
  padding:1.0rem 1.5rem;
  border:none;
  border-radius: 1.0rem;
  color:#1d2731;
  font-size:12px;
  letter-spacing: 1px;
  text-decoration: none;
  background-color:#d9b310;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

/*---------------------------
 Main - About
---------------------------*/

.main-about{
  text-align:center;
  width: 100%;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.main-about h2{
 font-size: 16px;
 position: relative;
 margin-bottom: 1.0rem;
}

.main-about h2::before{
 content: "";
 width: 80px;
 height: 5px;
 background-color: #d9b310;
 position: absolute;
 bottom: -5px;
 left: 0;
 right: 0;
 margin: auto;
}

.main-about-text{
 font-size: 12px;
 text-align: left;
 line-height: 1.5;
 width: 70%;
 margin: 0 auto;
}

.main-about-img{
  width: 80%;
  margin: 0 auto;
}


/*---------------------------
 Main - Access
---------------------------*/

.main-access{
  width: 100%;
  padding-top: 1.0rem;
}

.main-access h2{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.main-access h2::before{
  content: "";
  width: 60px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.main-access-text{
  font-size: 12px;
  text-align: left;
  line-height: 1.5;
  width: 80%;
  margin: 0 auto;
  padding-top: 1.0rem;
 }

.main-access-map{
  text-align: center;
}

.main-access-map iframe{
  width: 90%;
}

.access1{
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
}

.access1 img{
  height: 100%;
}

.access2{
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1.0rem;
}

.access2 img{
  height: 100%;
}

.access3{
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1.0rem;
}

.access3 img{
  height: 100%;
}

/*---------------------------
 Main - Contact
---------------------------*/

.main-contact{
  width: 100%;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
  padding-top: 1.0rem;
}

.main-contact h2{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.main-contact h2::before{
  content: "";
  width: 100px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.main-contact-text{
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
}


.icon8{
  float: left;
  width: 10%;
  margin-left: 10px;
}

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

.button-senary{
  display:block;
  padding:1.0rem 0.5rem;
  border:none;
  border-radius: 1.0rem;
  color:#1d2731;
  font-size:14px;
  text-align: center;
  letter-spacing: 1px;
  text-decoration: none;
  background-color:#d9b310;
}

.icon9{
  width: 15%;
  float: left;
}

.contact2{
  width: 70%;
  margin: 0 auto;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
}

/*---------------------------
 Footer
---------------------------*/

.footer{
  padding: 3.0rem 3.0rem;
}

.footer-logo{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.footer-logo-title{
  font-size: 20px;
}

.footer-nav-menu{
  text-align: left;
  list-style: none;
}

.footer-nav-menu-item{
  font-size: 16px;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.footer-nav-menu li{
  text-align: left;
}

.footer-info{
  text-align: center;
  font-size: 14px;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.footer-info-copy{
  text-align: center;
  font-size: 12px;
}

/*---------------------------
 Page - Works
---------------------------*/

.works-fv{
  height: 250px;
}

.works-fv h2{
  font-size: 16px;
  line-height:1.5;
  padding: 1.0rem 1.0rem;
}

.works-fv-text {
  font-size: 12px;
  text-align: left;
  line-height: 1.5;
  width: 75%;
  margin: 0 auto;
  padding:1.0rem 0.5rem;
}

.page-works h3{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.page-works h3::before{
  content: "";
  width: 60px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.page-works1 .icon1{
  width: 40px;
  margin: 0 auto;
  display: block;
  padding: 0.5rem 0 0.5rem;
}

.page-works1-item1-img{
  width: 80%;
  margin: 0 auto;
}

.page-works1-item1-text{
 font-size: 12px;
 text-align: left;
 line-height: 1.5;
 width: 50%;
 margin: 0 auto;
 padding: 0.5rem 0 1.0rem;
}

.page-works2 .icon2{
  width: 40px;
  margin: 0 auto;
  display: block;
  padding: 0.5rem 0 0.5rem;
}

.page-works2-item2-img{
  width: 80%;
  margin: 0 auto;
}

.page-works2-item2-text{
 font-size: 12px;
 text-align: left;
 line-height: 1.5;
 width: 50%;
 margin: 0 auto;
 padding: 0.5rem 0 1.0rem;
}

.page-works3 .icon3{
  width: 40px;
  margin: 0 auto;
  display: block;
  padding: 0.5rem 0 0.5rem;
}

.page-works3-item3-img{
  width: 80%;
  margin: 0 auto;
}

.page-works3-item3-text{
 font-size: 12px;
 text-align: left;
 line-height: 1.5;
 width: 50%;
 margin: 0 auto;
 padding: 0.5rem 0 1.0rem;
}

.page-works4 .icon4{
  width: 40px;
  margin: 0 auto;
  display: block;
  padding: 0.5rem 0 0.5rem;
}

.page-works4-item4-img{
  width: 80%;
  margin: 0 auto;
}

.page-works4-item4-text{
 font-size: 12px;
 text-align: left;
 line-height: 1.5;
 width: 50%;
 margin: 0 auto;
 padding: 0.5rem 0 1.0rem;
}

/*---------------------------
 Page - About
---------------------------*/

.about-fv{
  height: 250px;
}

.about-fv h2{
  font-size: 16px;
  line-height:1.5;
  padding: 1.0rem 1.0rem;
}

.about-fv-text {
  font-size: 12px;
  text-align: left;
  line-height: 1.5;
  width: 75%;
  margin: 0 auto;
  padding:1.0rem 0.5rem;
}

.page-about h3{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.page-about h3::before{
  content: "";
  width: 100px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.page-about2{
  padding: 1.0rem 1.0rem;
}

.page-about-employee{
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.page-about2-item-img{
  width: 60%;
  margin: 0 auto;
}

.page-about2-item-text{
  font-size: 16px;
  text-align: left;
  line-height: 1.5;
  width: 60%;
  margin: 0 auto;
  padding: 1.0rem 0 0.5rem;
}

.page-about3{
  padding: 1.0rem 1.0rem;
}

.page-about-office{
  width: 85%;
  margin: 0 auto;
}

.page-about-office-profile th{
  font-size: 12px;
  text-align: left;
  width: 30%;
  padding:1.0rem 1.0rem;
  border: 1.5px solid #1d2731;
}

.page-about-office-profile td{
  font-size: 12px;
  width: 70%;
  padding:1.0rem 1.0rem;
  border: 1.5px solid #1d2731;
}

/*---------------------------
 Page - Access
---------------------------*/

.access-fv{
  height: 250px;
}

/*---------------------------
 Page - Contact
---------------------------*/

.contact-fv{
  height: 250px;
}

.contact-fv h2{
  font-size: 16px;
  line-height:1.5;
  padding: 1.0rem 1.0rem;
}

.page-contact h3{
  font-size: 16px;
  position: relative;
  margin-bottom: 1.0rem;
}

.page-contact h3::before{
  content: "";
  width: 150px;
  height: 5px;
  background-color: #d9b310;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
}

.page-contact2{
  padding: 1.0rem 1.0rem;
}