@charset "UTF-8";
/*---------------------------
 Laptop Styling
 ---------------------------*/
@media (min-width:500px) {

*{
   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: 2.0rem 2.0rem;
}

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

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

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

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

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


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

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

.main-hero h1{
   position: absolute;
   top: 20%;
   left:70%;
   font-size: 36px;
   line-height:1.7;
   padding: 3.0rem 3.0rem;
   background:rgba(11,60,93,.5);
}

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

.main-philosophy{
   /* text-align:center; */
   display: flex;
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

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

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

.main-philosophy-text{
   font-size: 20px;
   text-align: left;
   width: 50%;
   line-height: 1.7;
   padding-left: 5%;
}

.main-philosophy-img{
   width: 50%;
}

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

.container-2{
   display: flex;
   margin-top: 2.0rem;
}

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

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

.main-works h2{
   font-size: 2.0rem;
   position: relative;
}

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

.main-works-item{
   width: 600px;
   padding: 1.5rem;
   margin-top: 2.0rem;
}

.main-works-item-img img{
   width: 490px;
   height: 380px;
   padding: 2.0rem;
}

.main-works-item-text{
   font-size: 24px;
   text-align: left;
}

.container-3{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

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

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

.page-works2-item2{
   flex-direction: row-reverse;
}

.page-works4-item4{
   flex-direction: row-reverse;
}

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

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

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

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

.main-about-text{
   font-size: 20px;
   text-align: left;
   width: 50%;
   line-height: 1.7;
   padding-left: 5%;
}

.main-about-img{
   width: 50%;
}

.main-about-img img{
   display: block;
}

.container-4{
   display: flex;
   margin-top: 2.0rem;
}

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

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

.container-5{
   display: flex;
   justify-content: space-between;
}

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

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

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

.main-access-text{
   width: 50%;
   font-size: 20px;
   text-align: left;
   line-height: 1.7;
   padding-left: 1.0rem;
}

.main-access-map{
   width:50%
}

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

.access1{
   display: flex;
}

.access1 img{
   height: 100%;
}

.access2{
   display: flex;
}

.access2 img{
   height: 100%;
}

.access3{
   display: flex;
}

.access3 img{
   height: 100%;
}

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

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


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

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

.main-contact-text{
   font-size: 20px;
   text-align: center;
   line-height: 1.7;
   width: 100;
   padding-left: 1.0rem;
}

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

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

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

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

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

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

.footer{
   padding: 3.0rem 3.0rem;
}

.footer-logo{
   display: flex;
   justify-content: space-around;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

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

.footer-nav-menu{
   text-align: right;
   list-style: none;
   display: flex;
}

.footer-nav-menu-item{
   font-size: 20px;
   margin-left: 5.0rem;
}

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

.footer-info{
   text-align: left;
   font-size: 20px;
   margin-top: 2.0rem;
   margin-bottom:  2.0rem;
   margin-left: 10.0%;
}

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

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

.works-fv{
   height: 600px;
   background-position: center center;
}

.works-fv h2{
   font-size: 40px;
   line-height:1.7;
   padding: 3.0rem 3.0rem;
}

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

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

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

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

.page-works1-item1{
   display: flex;
   /* justify-content: space-around; */
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

.page-works1-item1-img{
   width: 50%;
   padding: 2.0rem 1.0rem;
}

.page-works1-item1-img img{
   display: block;
}

.page-works1-item1-text{
   font-size: 20px;
   text-align: left;
   line-height: 1.7;
   width: 50%;
   margin: 0 auto;
   padding: 2.0rem 5%;
}

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


.page-works2-item2{
   display: flex;
   /* justify-content: space-around; */
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

.page-works2-item2-img{
   width: 50%;
   padding: 2.0rem 1.0rem;
}

.page-works2-item2-img img{
   display: block;
}

.page-works2-item2-text{
   font-size: 20px;
   text-align: left;
   line-height: 1.7;
   width: 50%;
   margin: 0 auto;
   padding: 2.0rem 5%;
}

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

.page-works3-item3{
   display: flex;
   /* justify-content: space-around; */
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

.page-works3-item3-img{
   width: 50%;
   padding: 2.0rem 1.0rem;
}

.page-works3-item3-img img{
   display: block;
}

.page-works3-item3-text{
   font-size: 20px;
   text-align: left;
   line-height: 1.7;
   width: 50%;
   margin: 0 auto;
   padding: 2.0rem 5%;
}

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

.page-works4-item4{
   display: flex;
   /* justify-content: space-around; */
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

.page-works4-item4-img{
   width: 50%;
   padding: 2.0rem 1.0rem;
}

.page-works4-item4-img img{
   display: block;
}

.page-works4-item4-text{
   font-size: 20px;
   text-align: left;
   line-height: 1.7;
   width: 50%;
   margin: 0 auto;
   padding: 2.0rem 5%;
}

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

.about-fv{
   height: 600px;
   background-position: center center;
}

.about-fv h2{
   font-size: 40px;
   line-height:1.7;
   padding: 3.0rem 3.0rem;
}

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

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

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

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

.page-about-employee{
   display: flex;
   justify-content: space-around;
   width: 100%;
   margin-top: 2.0rem;
   margin-bottom: 2.0rem;
}

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

.page-about2-item-text{
   font-size: 24px;
   text-align: left;
   line-height: 1.7;
   width: 70%;
   margin: 0 auto;
   padding: 2.0rem 0 1.0rem;
  }

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

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

.page-about-office-profile th{
   font-size: 24px;
   text-align: left;
   width: 20%;
   padding:2.0rem 2.0rem;
   border: 3px solid #1d2731;
}

.page-about-office-profile td{
   font-size: 24px;
   width: 80%;
   padding:2.0rem 2.0rem;
   border: 3px solid #1d2731;
}

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

.access-fv{
   height: 700px;
   background-position: center center;
}

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

.contact-fv{
   height: 600px;
   background-position: center center;
}

.contact-fv h2{
   font-size: 40px;
   line-height:1.7;
   padding: 3.0rem 3.0rem;
}

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

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

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


}