@charset "utf-8";

/*------------------------------
  Basement
------------------------------*/
html { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif; }
body { min-width: 100vw; width: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; color: #333; background-color: #ececec; }
* { margin: 0; padding: 0; text-align: left; line-height: 1.5em; box-sizing: border-box; }
a { text-decoration: none; }
img { width: 100%; border: none; display: block; }
li { list-style: none; }
dt, dd { padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
header, main, footer { width: 100%; }
main { padding-bottom: 4em; }
.cf { zoom:100%; }
.cf:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }

/*-- common --*/
h2.title { padding: .1em 0 .1em 2.2em; background-position: left .35em top 50%; background-repeat: no-repeat; font-size: 2.5em; font-weight: bold; font-family: 'Anton', sans-serif; }
.type_wonder { background: url(../img/WONDER_SHIP.svg) 50% 50% no-repeat; background-size: 100%; }
.bread { max-width: 1180px; width: 100%; margin: .25em auto; display: flex; }
.bread li { padding-left: 1.2em; margin-right: 1em; font-size: .8em; color: #888; background: url(../img/ico_arr_lg.svg) 0 40% no-repeat; background-size: .6em; }
.bread li:first-child { padding-left: .5em; background: none; }
.bread li a { font-weight: bold; color: #888; }
.bread li a:hover, .bread li a:focus { color: #E34; }
.facebook a { padding-left: 1.75em; font-weight: bold; background-position: 0 50%; background-repeat: no-repeat; background-size: 1.25em; }
.btn_contact a { width: 16em; margin: .5em auto; padding: .75em; letter-spacing: .2em; text-align: center; color: #FFF; background-color: #222; display: block; }
.btn_contact a:hover, .btn_contact a:focus { background-color: #E34; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3); }
.btn_pagetop { width: 3em; height: 3em; padding: 1em; background-color: rgba(255,255,255,0.5); background-image: url(../img/ico_pageup_lg.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: 1.5em; border: #888 solid 2px; border-radius: .25em; display: block; position: fixed; bottom: 1.5em; right: 2em; z-index: 90; }
.btn_pagetop:hover, .btn_pagetop:focus { background-color: rgba(255,255,255,0.8); background-image: url(../img/ico_pageup_blue.svg); border-color: #36B; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); cursor: pointer; }
.btn_2top a { width: 13em; padding: .5em 0; margin: 1em auto; font-size: 1.2em; text-align: center; color: #333; background-color: #FFF; border: #666 solid 1px; display: block; }
.btn_2top a:hover, .btn_2top a:focus { color: #FFF; background-color: #E34; border-color: #E34; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3); }

/*-- header --*/
header { width: 100%; padding: 0 2em; font-size: .875em; font-weight: bold; display: flex; justify-content: flex-start; align-items: center; }
header .logo { min-width: 6em; max-width: 9em; margin: .35em .5em .35em 0; }
header .head_menu { max-width: 800px; width: calc(100% - 38em); display: flex; justify-content: space-evenly; align-items: stretch; flex-grow: 1; }
header.light { color: #333; background-color: #ececec; }
header.light .head_menu a { color: #333; }
header.light .head_menu a:hover, header.light .head_menu a:focus { color: #E34; }
header.dark { color: #FFF; background-color: #222; }
header.dark .head_menu a { color: #FFF; }
header.dark .head_menu a:hover, header.dark .head_menu a:focus { color: #FD4; }
header .head_menu .facebook a { color: #36B; background-image: url(../img/ico_facebook_blue.svg); }
header .head_menu .facebook a:hover, header .head_menu .facebook a:focus { color: #93D; background-image: url(../img/ico_facebook_purple.svg); }
header .btn_head_contact { position: fixed; top: 0; right: 1%; z-index: 100; }
header .btn_head_contact a { padding: 1.2em 1.5em; width: 18em; text-align: center; color: #FFF; background-color: #222; display: block; }
header .btn_head_contact a:hover, header .btn_head_contact a:focus { background-color: #E34; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3); }


/*-- footer --*/
footer { padding: 1em 0 .5em 0; color: #FFF; background: #89A url(../img/foot_gray.jpg) 50% 0 repeat-y; background-size: 100%; position: relative; }
footer a { color: #FFF; display: block; }
footer .type_wonder { width: 30em; height: 15em; position: absolute; top: -1em; left: -.5em; }
footer .foot_wrap { width: calc(100% - 35em); margin: 5em 0 0 35em; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
footer .foot_info dt { font-size: 1.3em; font-weight: bold; letter-spacing: .2em; }
footer .foot_info .address { font-size: .8em; letter-spacing: .15em; }
footer .foot_info .tel { font-size: 1.5em; font-weight: bold; font-family: 'Verdana', sans-serif; letter-spacing: .1em; line-height: 2em; }
footer .foot_info .tel a:hover, footer .foot_info .tel a:focus { color: #FD4; }
footer .foot_menu { margin: 0 20% 0 5%; text-align: center; }
footer .foot_menu p { letter-spacing: .2em; text-align: center; }
footer .foot_menu .facebook a { width: 9em; margin: 0 auto; font-size: 1.2em; background-image: url(../img/ico_facebook_white.svg); }
footer .foot_menu .facebook a:hover, footer .foot_menu .facebook a:focus { color: #FD4; background-image: url(../img/ico_facebook_yellow.svg); }
footer .foot_menu .policy a { margin: 1em auto; display: inline-block; }
footer .foot_menu .policy a:hover, footer .foot_menu .policy a:focus { color: #FD4; }
footer .foot_copylights { width: 100%; margin: 8em auto 0 auto; font-size: .8em; letter-spacing: .15em; text-align: center; }

/*------------------------------
  index
------------------------------*/
/*-- COVER --*/
#cover { position: fixed; top: -150px; left: 0; right: 0; z-index: -1; }
.topbody { padding: 30vw 0 0 0; overflow-x: hidden; }
.topbody .content_wrap { padding-bottom: 2em; background-color: #ececec; position: relative; }
.topbody .content_wrap .type_wonder { width: 36em; height: 18em; position: absolute; top: -17.5em; right: -1em; }

/*-- sp_menu --*/
.sp_menu { display: none; justify-content: space-between; }
.sp_menu li { width: 33.33%; }
.sp_menu li:nth-child(even) { border-color: #dedede; border-width: 0 .5px; border-style: solid; }
.sp_menu li a { padding: .75em .5em .5em .5em; color: #666; text-align: center; text-shadow: 0 1px 0 #FFF; display: block; }
.sp_menu li a:focus { color: #E34; }

/*-- SERVICE --*/
#service { max-width: 1640px; min-width: 280px; width: 90%; padding: 4em 0; margin: 0 auto; }
#service h2.title { background-image: url(../img/ico_sailing.svg); background-size: 1.8em; }
.service_list { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; }
.service_list dl { min-width: 240px; width: 31.33%; margin: 0 1% 2em 1%; padding: 2em 3em; background-color: #FFF; box-shadow: 0 2px 9px 0 rgba(0,0,0,0.2); border-radius: .15em; }
.service_list dt p { margin: .5em 0; font-size: 1.35em; font-weight: 800; }
.service_list h4 { font-size: 1.75em; font-weight: bold; font-family: 'Anton', sans-serif; }
.service_list .facility h4 { color: #36B; }
.service_list .design h4 { color: #C68; }
.service_list .construction h4 { color: #A96; }
.service_list .ict h4 { color: #A7B; }
.service_list .estate h4 { color: #9B6; }
.service_list .consulting h4 { color: #89A; }
.service_list dd { color: #666; }
.service_list dd p { margin: 1em auto; }
.service_list dd .tags { display: flex; flex-wrap: wrap; }
.service_list dd .tags li { padding: 0 1em; margin: 0 .5em .25em 0; font-size: .8em; border: #888 solid .5px; }
/*-- PRIORITY --*/
#priority { padding: 5em 0; background-color: #FFF; }
#priority h2.title { padding: 0; font-size: 3em; line-height: 1em; text-align: center; }
#priority h2.title span { width: 10.5em; padding-right: 2.25em; margin: 0 auto; font-size: .35em; background: url(../img/ico_trust.svg) 100% 50% no-repeat; background-size: 2em; display: block; }
#priority .copy { margin: 1em auto; font-size: 2.3em; font-weight: 800; line-height: 1.2em; text-align: center; color: #36B; }
#priority p, #priority img { max-width: 720px; width: 96%; margin: 1em auto; }
#priority p { text-indent: 1em; }
#priority .btn_contact { margin-top: 3em; }
/*-- MESSAGE --*/
#company { padding: 3em 0; background: url(../img/about_BG.jpg) 100% 0 no-repeat; background-size: 80%; }
#company .message { width: 60%; margin: 0 auto 2em 0; padding: 3em 3em 4em 2em; background-color: #FFF; box-shadow: 0 2px 9px 0 rgba(0,0,0,0.2); border-radius: 0 .15em .15em 0; }
#company .message .message_wrap { max-width: 520px; margin: 0 0 0 auto; }
#company .message h2.title { padding-left: 1em; background: url(../img/ico_anchor.svg) 0 50% no-repeat; background-size: 1em; }
#company .message .copy { margin: .5em auto; font-size: 1.8em; font-weight: 800; letter-spacing: .1em; line-height: 1.35em; color: #36B; }
#company .message p { text-indent: 1em; }
#company .profile dl { max-width: 1080px; width: 96%; margin: 0 auto; display: flex; flex-wrap: wrap; }
#company .profile dt, #company .profile dd { margin: .25em .5em; padding: .5em 2em; background-color: #FFF; }
#company .profile dt { min-width: 10em; text-align: center; }
#company .profile dd { flex-grow: 1; }
#company .profile dd p { letter-spacing: .15em; }

/*------------------------------
  contact
------------------------------*/
/*-- form --*/
.contact { max-width: 1180px; width: 100%; padding: 3em 4%; margin: 0 auto; background-color: #FFF; border-radius: .25em; box-shadow: 0 2px 9px 0 rgba(0,0,0,0.2); box-sizing: border-box; }
.contact h2.title { padding: 0 0 0 1.1em; line-height: 1.2em; color: #888; background: url(../img/ico_post_lg.svg) 0 50% no-repeat; background-size: 1.1em; border-bottom: #888 solid 1px; }
.contact h2.title span { margin-left: .5em; font-size: .4em; letter-spacing: .2em; color: #333; }
.contact .comment { max-width: 780px; width: 90%; margin: 3em auto; }
.contact .comment p { text-align: center; }
.contact .comment dl { width: 90%; margin: 1em auto; display: flex; flex-wrap: wrap; align-items: center; }
.contact .comment dt, .contact .comment dd { margin: 0 0 0 2em; }
.contact .comment .open { font-size: .8em; line-height: 1em; }
.contact .comment .tel a { font-size: 1.3em; font-weight: bold; font-family: 'Verdana', sans-serif; letter-spacing: .1em; color: #666; }
.contact .comment .tel a:hover, .contact .comment .tel a:focus { color: #E34; }
form[name="contact_form"] { max-width: 980px; width: 96%; margin: 0 auto; }
form[name="contact_form"] .error { font-size: .9em; font-weight: bold; color: #E34; }
form[name="contact_form"] ul { display: flex; flex-wrap: wrap; }
form[name="contact_form"] li { width: 49%; margin-bottom: 1em; }
form[name="contact_form"] li:nth-child(odd) { margin-right: 2%; }
form[name="contact_form"] li.message { width: 100%; margin-top: 1em; margin-right: 0; }
form[name="contact_form"] dl { width: 100%; display: table; }
form[name="contact_form"] dt, form[name="contact_form"] dd { display: table-cell; vertical-align: middle; }
form[name="contact_form"] dt { width: 6em; padding: 0 .5em; text-align: center; color: #666; }
form[name="contact_form"] li.message dt { width: 8em; }
form[name="contact_form"] dd { flex-grow: 1; }
form[name="contact_form"] input[type="text"], form[name="contact_form"] textarea { width: 100%; padding: .5em 1em; font-size: 1.2em; line-height: 1em; border: #CCC solid 1px; outline: none; -webkit-appearance: none; appearance: none; }
form[name="contact_form"] textarea { height: 9em; padding: .75em 1em; }
form[name="contact_form"] input[type="text"]:focus, form[name="contact_form"] textarea:focus { border-color: #36B; box-shadow: 0 0 6px 0 #6BE; }
form[name="contact_form"] input[type="text"]::placeholder, form[name="contact_form"] textarea::placeholder { font-size: .6em; color: #E34; }
form[name="contact_form"] .control { max-width: 24em; width: 90%; margin: 0 auto; text-align: center; }
form[name="contact_form"] .control .chkbox { margin: 1em auto; color: #36B; }
form[name="contact_form"] .control input[type="submit"] { width: 100%; padding: .75em; font-size: 1.2em; letter-spacing: .1em; text-align: center; outline: none; -webkit-appearance: none; appearance: none; }
form[name="contact_form"] .control input[type="submit"].done { color: #FFF; background-color: #222; border: #222 solid 1px; }
form[name="contact_form"] .control input[type="submit"].done:hover, form[name="contact_form"] .control input[type="submit"].done:focus { background-color: #e34; border-color: #E34; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); }
form[name="contact_form"] .control input[type="submit"].cancel { color: #333; background-color: #FFF; border: #666 solid 1px; }
form[name="contact_form"] .control input[type="submit"].cancel:hover, form[name="contact_form"] .control input[type="submit"].cancel:focus { color: #36B; border-color: #36B; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); }
form[name="contact_form"] .control input[type="submit"]:disabled { background-color: #CCC; border-color: #dfdfdf; }
.contact #policy { margin: 4em auto; font-size: .8em; color: #888 }
.contact #policy dt { width: 10em; margin: 0 auto; text-align: center; border-bottom: #888 solid 1px; }
.contact #policy dd { width: 100%; height: 30em; margin: .5em auto 0 auto; padding: 0 2em; border: #CCC solid 1px; border-radius: .25em; overflow-y: scroll; }
.contact #policy dd p { margin-top: 1em; }
.contact #policy dd p:first-child { margin-top: 2em; }
.contact #policy dd p:last-child { margin-bottom: 2em; }
.contact #policy dd h4 { font-weight: normal; }
/*-- confirm --*/
.contact .alert { margin: 3em auto; font-weight: bold; text-align: center; color: #36B; }
.contact .alert p { max-width: 20em; margin: 0 auto; padding-left: 1.5em; background: url(../img/ico_q_blue.svg) 0 50% no-repeat; background-size: 1.3em; }
.contact.confirm form[name="contact_form"] ul { max-width: 640px; margin: 0 auto; display: block; }
.contact.confirm form[name="contact_form"] li { width: 100%; }
.contact.confirm form[name="contact_form"] dt { width: 8em; }
.contact.confirm form[name="contact_form"] dd { font-weight: bold; }
form[name="contact_form"] .control.duo { max-width: 600px; width: 90%; margin: 2em auto 4em; display: flex; }
form[name="contact_form"] .control.duo input[type="submit"] { margin: 0 .5em; }
/*-- complete --*/
.contact.complete .alert { letter-spacing: .3em; }
.contact.complete p { max-width: 640px; width: 90%; margin: 0 auto 5em auto; }

/*------------------------------
  MediaQuery
------------------------------*/
/*-- iPhone --*/
@media screen and (max-width:599px){
  body{ font-size: 13px; }
  header { padding: 0 .5em; }
  header .logo { width: 50vw; margin: .25em .5em .25em 0; }
  header .head_menu { display: none; }
  header .btn_head_contact { font-size: .9em; top: auto; bottom: 0 !important; }
  header .btn_head_contact a { padding-bottom: 2em; background-color: #36B; border-radius: .35em .35em 0 0; box-shadow: 0 -1px 3px 0 rgba(0,0,0,0.3); }
  #cover { top: 0; }
  footer .type_wonder { width: 50vw; height: 25vw; top: -.5em; left: -.5em; }
  footer .foot_wrap { width: 94%; margin: 23vw auto 0 auto; }
  footer .foot_info dt { font-size: 1em; }
  footer .foot_menu { margin: 2em auto 0 auto; }
  footer .foot_copylights { margin: 4em auto; }
  .bread { width: 96%; }
  .topbody { width: 100vw; padding: 10em 0 0 0; }
  .topbody .content_wrap .type_wonder { width: 50vw; height: 25vw; top: -24vw; right: -.5em; }
  .sp_menu { display: flex; }
  #service { width: 94%; padding: 1em 0; margin: 0 auto; }
  #service h2.title { padding-left: 2em; font-size: 2em; background-size: 1.5em; }
  .service_list dl { width: 100% !important; padding: 1.5em; margin-bottom: 1em; }
  .service_list dt p { font-size: 1.2em; }
  #priority { padding: 2em 0; }
  #priority h2.title { font-size: 2.4em; }
  #priority .copy { margin: .5em auto; font-size: 1.6em; }
  #company { padding: 50vw 0 0 0; background-size: 100%; position: relative; }
  #company .message { width: 86%; margin: 0 auto 1em auto; padding: 1em 1.5em 2em 1.5em; }
  #company .message .message_wrap { width: 100%; }
  #company .message h2.title { color: #FFF; background-image: url(../img/ico_anchor_white.svg); position: absolute; top: 25vw; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); }
  #company .message .copy { margin: .5em auto 1.5em auto; font-size: 1.3em; }
  #company .profile { font-size: .8em; }
  #company .profile dt, #company .profile dd { margin: .15em .25em; padding: .5em 1em; }
  #company .profile dt { min-width: 7em; }
  #company .profile dd { width: calc(100% - 8em); flex-grow: 0; }
  .btn_pagetop { background-color: rgba(255,255,255,0.8); bottom: .5em; left: 1em; }
  .contact { width: 96%; padding: 1.5em 2%; }
  .contact .comment { width: 96%; }
  .contact .comment p { text-align: left; }
  .contact .comment dl { width: 96%; }
  form[name="contact_form"] ul { display: block; }
  form[name="contact_form"] li { width: 98%; }
  form[name="contact_form"] dt { width: 5em; }
  form[name="contact_form"] li.message dt, form[name="contact_form"] li.message dd { display: block; }
  form[name="contact_form"] li.message dt { width: 7em; }
  form[name="contact_form"] .control .chkbox { margin: 2em auto; font-size: .9em; }
  .contact #policy dd { width: 96%; padding: 0 1em; }
  form[name="contact_form"] .control.duo { text-align: center; display: block; }
  form[name="contact_form"] .control.duo input[type="submit"] { margin-bottom: 1em; }
  form[name="contact_form"] .control.duo input[type="submit"].cancel { width: 70%; }

}

/*-- iPad --*/
@media screen and (min-width:600px) and (max-width:1240px){
  body{ font-size: 14px; }
  header { padding: 0 .5em; }
  header .logo { width: 8em; margin: .25em .5em .25em 0; }
  header .head_menu { width: 50%; flex-grow: 0; }
  header .btn_head_contact { font-size: .9em; right: 0; }
  header .btn_head_contact a { padding-top: 1.5em; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3); }
  #cover { top: 0; }
  footer .type_wonder { width: 30vw; height: 15vw; top: -.5em; left: -.5em; }
  footer .foot_wrap { width: calc(100vw - 32vw); margin: 3vw 0 0 32vw; }
  footer .foot_info { width: calc(100vw　-　32vw); }
  footer .foot_info dt { font-size: 1em; }
  footer .foot_copylights { margin: 3em auto 0 auto; }
  .bread { width: 96%; }
  .topbody { width: 100vw; padding: 25em 0 0 0; }
  .topbody .content_wrap .type_wonder { width: 40vw; height: 20vw; top: -19.5vw; right: -.75em; }
  #service { width: 94%; padding: 1em 0; margin: 0 auto; }
  #service h2.title { padding-left: 2em; font-size: 2em; background-size: 1.5em; }
  .service_list dl { width: 48% !important; padding: 1.5em 1.5em 1.5em 1.75em; margin-bottom: 1em; }
  .service_list dt p { font-size: 1.16em; }
  #priority { padding: 2em 0; }
  #priority h2.title { font-size: 2.4em; }
  #priority .copy { margin: .5em auto; font-size:2em; }
  #priority p { width: 70%; }
  #priority img { max-width: 50%; }
  #company { padding: 3em 0; background-size: 100%; position: relative; }
  #company .message { padding: 2em 2em 4em 6em; }
  #company .message .copy { font-size: 1.6em; }
  #company .profile dt, #company .profile dd { margin: .15em .25em; padding: .5em 1em; }
  #company .profile dt { min-width: 7em; }
  #company .profile dd { width: calc(100% - 8em); flex-grow: 0; }
  .contact { width: 96%; }
  .contact .comment p { text-align: left; }
  .contact .comment dl { width: 100%; }
}