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

header{ position: fixed; top:0; width: 100%; z-index: 10;}
header div { position: relative; margin: 0 auto; max-width: 1100px;}
header img{ }
header ul{ position: absolute; top:25px; right: 0;}
header ul li{display: inline; margin: 0 10px; color: #000;}
header ul li a{ text-decoration: none; color: #000; font-weight:  bold;}

section{ margin: 100px auto 0; max-width: 1100px; width: 100%;}
section#visual{ width: 100%!important; max-width: none; margin: 0;}
section#visual img{ width: 100%; height: auto;}

section h1{ font-size: 90%; letter-spacing: 0.1em; margin: -20px auto 0; font-weight: bold;}
section p:nth-of-type(1){ margin: 0 auto; font-size:350%; padding: 0; border: none; font-family: "Professor","sans-serif"; letter-spacing:0em; color: #CCC; transform: rotateZ(-6deg); text-align: center; border: none; font-weight: normal;}

section#who{ text-align: center;}
section#who p:nth-of-type(2){ letter-spacing: 0.3em; line-height: 2em; margin: 90px auto; font-size: 1.2em;}
section#who p:nth-of-type(3){  line-height: 2.0em;}

div#serviceBox{ background:#f8f8f8; padding: 10px 0 50px 0; margin: 80px auto;}
section#service{ text-align: center; }
section#service h2{ margin:80px 0 20px; text-align: left; font-size: 1.2em; letter-spacing: 0.3em;}
section#service p:nth-of-type(2){ padding-left:50px; border-left:#2A2A2A 2px solid; letter-spacing: 0.3em; line-height: 2em; text-align: left;}
section#service p:nth-of-type(3){ padding-left:50px; border-left:#2A2A2A 2px solid; letter-spacing: 0.3em; line-height: 2em; text-align: left;}

section#pix{ text-align: center;}
section#pix img{ max-width: 80%;}

section#contact{ text-align: center;}
form{ margin: 50px auto; }


footer{ text-align: center;}
footer img{ max-width: 100%;}
footer p{ font-size:0.8em; padding:5px 0 15px 0;}

div#pagetop{ background: #000000; color:#FFF; position:fixed; top:45%; right: -40px; transform:rotateZ(90deg); padding :10px 20px; display: block; z-index: 5;}
div#pagetop a{color:#FFF; text-decoration: none;}

@media screen and (max-width: 1100px) {
section{ margin: 100px auto 0; width: 90%;}

}

@media screen and (max-width: 640px) {
body{ font-size: 90%;}
header img{ width: 60px; height: auto;}
header ul{ position: absolute; top:15px; right: 0;}

section#visual{ width: 100%; margin: 0; overflow: hidden;}
section#visual img{ width: auto; height: 650px;}
div#serviceBox{ background:#f8f8f8; padding: 10px 0 50px 0; margin: 80px auto 30px;}
section#service p:nth-of-type(2){ padding-left:20px; border-left:#2A2A2A 2px solid; letter-spacing: 0.3em; line-height: 2em; text-align: left;}
section#service p:nth-of-type(3){ padding-left:20px; border-left:#2A2A2A 2px solid; letter-spacing: 0.3em; line-height: 2em; text-align: left;}
section#pix{ text-align: center; margin: 50px auto;}
div#contactFormSheet input[type="text"] { padding:10px; width: 100%; margin: 0 0 20px; box-sizing: border-box;}
}



div#contactFormSheet{ margin: 30px 0 0 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; }
div#contactFormSheet p:first-of-type{ width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; transform:rotateZ(0deg); margin: 0; font-size: 100%;}
div#contactFormSheet p:last-of-type{ text-align: center;}
div#contactFormSheet span:first-of-type{ width: 100%; margin: 0 0 20px 0;}
div#contactFormSheet span:last-of-type{ width: 100%; margin: 0 0 20px 0;}
div#contactFormSheet span{ width: 49%; margin: 0 0 20px 0;}
div#contactFormSheet span span{ margin: 2px 0 15px;}
div.screen-reader-response{ text-align: center; margin: 20px 0;}
div.wpcf7-response-output{ display: none;}
div#contactFormSheet span:nth-of-type(7){ width: 100%!important;}
div#contactFormSheet input[type="text"] { padding:10px; width: 100%; margin: 0 0 0; box-sizing: border-box; font-size: 16px;}
div#contactFormSheet input[type="email"] { padding:10px; width: 100%; margin: 0 0 0; box-sizing: border-box; font-size: 16px;}
div#contactFormSheet textarea { padding:10px; width: 99.5%; margin: 0 0 20px; box-sizing: border-box; -webkit-flex-grow: 1; flex-grow: 1; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100px; font-size: 16px;}

div#contactBtnArea{ text-align: center;}
div#contactBtnArea p{ margin: 20px auto 0; text-align: center; width: 100%;}
div#contactFormSheet input[type="submit"]{ width: 200px; background:#000; color:#FFFFFF; padding: 10px; text-align: center; margin: 0 auto;appearance: none; outline: none; border: none; cursor: pointer; font-size: 100%;}

form{ font-family: "YuGothic","Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}

@media screen and (max-width: 640px) {
div#contactFormSheet{ margin: 30px 0 0 0; display:block;}
div#contactFormSheet span{ width: 100%; margin: 0 0 20px 0;}
div#contactFormSheet input[type="text"] { padding:10px; width: 100%; margin: 0 0 20px; box-sizing: border-box;}
div#contactFormSheet input[type="email"] { padding:10px; width: 100%; margin: 0 0 20px; box-sizing: border-box;}
div#contactFormSheet textarea { padding:10px; width: 100%; margin: 0 0 20px; box-sizing: border-box; -webkit-flex-grow: 1; flex-grow: 1; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100px;}
}