@charset "utf-8";
/* ****************************************************************** 

		Web Font Setting
		
****************************************************************** */



@font-face {
    font-family: 'Mugenplus-1cp-M';
    src: url('/font/mgenplus-1cp-medium.otf') format('opentype');
    src: url('/font/mgenplus-1cp-medium.ttf') format('truetype');
    src: url('/font/mgenplus-1cp-medium.woff') format('woff');
}


/*ベース*/
body{
  margin: 0px;
  font-size:16px;
  color:#404040;
  line-height:22px;
  text-align: center;
  background-color: white;
  font-family: "Mugenplus-1cp-M",Verdana,"MS PGothic",Osaka,Arial,sans-serif;
}

a{
  text-decoration: none;
}

p{
}

img{
  max-width: 90%;
  margin: 20px;
}

h2{
  padding-top: 150px;
  margin-top: -150px;
}

/* font */
.font_size_28{ font-size: 28px; line-height: 36px;}
.font_size_24{ font-size: 24px; line-height: 32px;}
.font_size_20{ font-size: 20px; line-height: 28px;}
.font_size_16{ font-size: 16px; line-height: 24px;}
.font_size_64{ font-size: 64px; line-height: 104px;}

.color_purple{ color: #4c2181;}
.color_grey{ color: #828386;}
.color_red{ color: #dd0044;}

.font_family_mplus{ font-family: 'Mugenplus-1cp-M';}

/* top image*/
.top_img{
  margin: auto;
  max-width: 934px;
}
.top_img img{
  margin: 50px auto;
}

/* header */
header{
  position: absolute;
  width: 100%;
  background-color: white;
  box-shadow:grey 0px 2px 6px 0px;
  z-index: 999;
}

.header_icon{
  position: absolute;
  margin: auto;
  vertical-align: middle;
}

.header_btn{
  display: none;
}

.header_menu{
  display: inline-block;
}

.header_menu li{
  display: inline-block;
  margin: 14px 28px;
}

.header_menu a{
  color: black;
}

header.fixed{
  position: fixed;
  top: 0;
}


/* vision */
.vision{
  margin: 200px auto 100px auto;
  width: 1000px;
}

/* service */
.service{
  margin: 50px auto;
  width: 1000px;
}

.service_table{
  margin: 50px;
  text-align: left;
}

/* link */
.link_table{
  margin: 100px auto;
  max-width: 1280px;
  width: 100%;
}

.link_item{
  display: inline-block;
  margin: 50px;
  width: 500px;
}

.link_item p{
  text-align: left;
}

/* footer */
footer{
  background-image: url(/img/bg_footer.png);
  height: 668px;
  position: relative;
}

.footer_menu{
  text-align:left;
  padding: 300px 30px 0px 30px;
}

.footer_menu ul{
  list-style: none;
}

.footer_menu li{
  margin: 50px auto;
}

.footer_menu a{
  color: white;
}

.footer_copyright{
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
}


/* message */
.message{
  margin: 200px auto 100px auto;
  width: 960px;
}

.message_prof{
  margin: 100px;
  text-align: left;
}

.profile_item{
  display: inline-block;
  vertical-align: top;
  margin: auto;
}

.profile_item ul{
  list-style: none;
}

.profile_item li{
  margin: 10px;
  
}

/* company */
.company{
  margin: 100px auto;
  width: 960px;
}

.company_table{
  margin-top: 100px;
  text-align: left;
  width: 960px;
}

.company ul{
  list-style: none;
}

.company li{
  display: inline-block;
  vertical-align: top;
}

.company_item_1{
  width: 20%;
}

.company_item_2{
  width: 70%;
}

/* ci design */
.ci{
  margin: 200px auto 100px auto;
  width: 960px;
}

.ci_text{
  text-align: left;
  line-height: 32px;
  margin: 50px 250px;
}

.ci_prof{
  text-align: left;
  margin: 100px 240px;
}

.ci_prof img{
  margin: 10px 0 10px auto;
}

.ci_prof_text{
  margin-bottom: 50px;
}

/* contact */
.contact{
  margin: 200px auto 100px auto;
  width: 960px;
}

.form_tbl{
  text-align: left;
  margin: 0 auto;
}

.form{
  margin: 60px auto 20px auto;
  border-collapse: collapse;
}

.form th{
  border: 1px solid #666;
  padding: 6px;
  background-color: #E8E8E6;
}

.form input{
  margin: 2px;
}

.form td{
  border: 1px solid #666;
  padding: 8px;
}

.form input[type="text"], .form input[type="tel"]{
  font-size: 20px;
  width: 400px;
}

.form textarea{
  font-size: 20px;
  width: 560px;
  margin: 2px;
}

.form_btn{
  text-align: center;
}

.form_btn input {
    width: 200px;
    height: 60px;
    font-size: 20px;
    margin: 4px 8px;
}

.contact li{
  list-style: none;
}

span.msg{
  color: #dd0000
}

/* タブレット用 */
@media screen and (max-width: 959px){

  /* header */
.header_menu{
  padding: 0px;
  width: 85%;
}

.header_menu li{
  margin: 14px 2% 14px auto;
}

/* vision */
.vision{
  width: 100%;
}

/* service */
.service{
  width: 100%;
}

/* link */
.link_table{
  width: 100%;
}

.link_item{
  display: block;
  width: 100%;
  margin: auto;
}

.link_item p{
  text-align: center;
}

/* message */
.message{
  width: 100%;
}

.message_prof{
  margin: 10px;
}

/* company */
.company{
  width: 100%;
}

.company_table{
  width: 100%;
}

.gmap{
  position: relative;
  width: 90%;
  height: 0;
  padding-top: 56.25%;
  margin: auto 5%;
}

.gmap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ci design */
.ci{
  width: 90%;
}

.ci_text{
  margin: 50px 15%;
}

.ci_prof{
  margin: 100px 15%;
}

/* contact */
.contact{
  margin: 200px auto 100px auto;
  width: 98%;
}

}


/* スマホ用 */
@media screen and (max-width: 720px){
  /* font */
  .font_size_28{ font-size: 24px; line-height: 32px;}
  .font_size_24{ font-size: 20px; line-height: 28px;}
  .font_size_20{ font-size: 16px; line-height: 24px;}
  .font_size_64{ font-size: 56px; line-height: 86px;}

/* header */
.header_icon img{
  margin: 10px;
}

.header_btn{
  display: block;
  width: 100%;
  height: 62px;
}

.header_btn button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    padding: 10px 6px;
}

.header_btn span {
    width: 100%;
    height: 2px;
    background-color: black;
    display: block;
    margin-bottom: 6px;
}

.header_menu{
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: #E8E8E6;
  height: 0;
  opacity: 0;
  transition-property: opacity, height;
  transition-duration: .2s, .3s;
  pointer-events: none;
}

.header_menu li {
    margin: 0;
    padding: 0;
    text-align: center;
    display: list-item;
    height: 0;
    font-size: 20px;
    transition: .3s;
}

.nav_btn.show span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}

.nav_btn.show span:nth-child(2){
  opacity: 0;
}

.nav_btn.show span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

.header_menu.show{
  opacity: 1;
  height: 284px;
  display: block;
  pointer-events: auto;
}

.show li{
  padding: 12px;
  border-top: dotted 1px grey;
  height: 22px;
}

  /* message */
.message_prof{
  text-align: center;
}

.profile_item{
  display: block;
}

.profile_item ul{
  margin-left: 10px;
  text-align: left;
}

/* ci design */
.ci_text{
  margin: 50px 10%;
}

.ci_prof{
  margin: 100px 10%;
}

/* contact */
.contact{
  margin: 200px auto 100px auto;
  width: 98%;
}

.form{
  width: 95%;
}

.form th{
  display: block;
  padding: 1%;
  width: 98%;
}

.form td{
  display: block;
  padding: 1%;
  width: 98%;
  min-height: 18px;
}

.form input[type="text"], .form input[type="tel"]{
  font-size: 16px;
  width: 98%;
}

.form textarea{
  font-size: 16px;
  width: 98%;
}

.responsive_br br{
  display: none;
}
  
}