@charset "UTF-8";
/* CSS Document */
body {
width: 100%;
min-width: 320px;
color: #777777;
position: absolute;
top: 0;
}
br.pc {
display: none;
}
br.sp {
display: inline;
}
header {
background: #ffffff;
box-shadow: 0px 0px 16px rgba(0,0,0,0.2);
position: relative;
z-index: 2;
}
header .wrapper {
height: 80px;
display: block;
z-index: 1;
}
h1 {
width: 150px;
height: 43px;
margin: 0 auto;
display: block;
background: url(../images/logo.svg) no-repeat center;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: relative;
}
header h1 a, header h1 a:link, header h1 a:hover, header h1 a:visited {
display: block;
width: 100%;
height: 100%;
}
header ul {
margin: 0;
padding: 0;
background: #cccccc;
}
header ul,
header li,
header li a {
display: flex;
justify-content: center;
}
header li,
header li a {
flex-basis: 100%;
}
header li a {
height: 36px;
position: relative;
align-items: center;
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
header li:nth-child(n+2) {
margin-left: -1px;
}
header li a, header li a:hover, header li a:visited {
color: #001e78;
}
footer {
text-align: center;
}
#contents {
margin-top: 360px;
padding: 0 20px;
position: relative;
}
#contents:before, #contents:after {
content: "";
width: 20px;
height: 100%;
padding-top: 40px;
display: block;
position: absolute;
top: 0;
}
#contents:before {
left: 0;
background: -webkit-linear-gradient(top, rgba(0,30,120,0.3) 0%,rgba(146,39,142,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,30,120,0.3) 0%,rgba(146,39,142,0.3) 100%);
}
#contents:after {
right: 0;
background: -webkit-linear-gradient(top, rgba(146,39,142,0.3) 0%,rgba(0,30,120,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(146,39,142,0.3) 0%,rgba(0,30,120,0.3) 100%);
}
h2, h3 {
color: #333333;
}
p {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
line-height: 2;
}
p + p {
margin-top: 1.25em;
}
#lead, #works, #about {
padding-bottom: 80px;
}
#contact {
padding-bottom: 60px;
}
#lead h2{
width: 100%;
height: 360px;
color: #ffffff;
background: url(../images/img_main_pc.jpg) no-repeat center;
background-size: cover;
text-align: center;
position: absolute;
top: -360px;
left: 0;
z-index: -4;
}
#lead h2:after {
content: "";
width: 100%;
height: 360px;
display: block;
background: url(../images/img_main_over_pc.png) center repeat;
position: absolute;
top: 0;
z-index: -3;
}
#lead h2 + p {
padding-top: 40px;
}
#lead h2 span {
margin-top: -0.5em;
font-size: 2em;
font-weight: 200;
display: block;
position: relative;
top:50%;
}
#lead h2 span:before, #lead h2 span:after {
content: "";
display: block;
top:50%;
width: 208px;
height: 208px;
margin-top: -104px;
position: absolute;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
}
#lead h2 span:before {
right: 50%;
margin-right: -110px;
background: rgba(255,62,201,0.3);
z-index: -1;
}
#lead h2 span:after {
left: 50%;
margin-left: -110px;
background: rgba(0,116,255,0.3);
z-index: -2;
}
#works h2, #about h2, #contact h2 {
padding: 27px 0;
margin-bottom: 40px;
text-align: center;
background: #fcfcfc url(../images/img_titleback.png) center;
font-size: 2em;
font-weight: 400;
color: #001e78;
}
#works h3, #contact h3 {
margin-bottom: 20px;
text-align: center;
font-size: 1.5em;
font-weight: 300;
line-height: 1.5;
}
#media {
max-width: 960px;
margin: 40px auto 0 auto;
padding: 0 20px;
text-align: center;
}
#media section {
flex-basis: 100%;
margin-bottom: 20px;
padding: 36px 0;
box-shadow: 0px 0px 16px rgba(0,0,0,0.2);
}
#media h3 {
margin-bottom: 1.25em;
font-size: 1.5em;
position: relative;
}
#media p {
padding: 0;
line-height: 1.75;
}
#media p br {
display: inline
}
#about h3 {
margin-bottom: 60px;
text-align: center;
position: relative;
font-size: 1.5em;
font-weight: 300;
}
#about h3 em {
margin-bottom: 1em;
font-size: 1.25rem;
display: block;
font-style: normal;
}
#about h3 span {
margin-top: 0.5em;
font-size: 1rem;
display: block;
}
#media h3:before, #media h3:after, #about h3:before, #about h3:after {
content: "";
width: 155px;
height: 4px;
display: block;
position: absolute;
top: 0;
}
#media h3:before, #about h3:before {
margin-left: -90px;
background: rgba(255,62,201,0.4);
left: 50%;
}
#media h3:after, #about h3:after {
margin-right: -90px;
background: rgba(0,116,255,0.4);
right: 50%;
}
#media h3:before, #media h3:after {
margin-top: 1.8em;
}
#about h3:before, #about h3:after {
margin-top: 4.4em;
}
#about dl {
max-width: 100%;
padding: 0 20px;
margin: 3em auto 0 auto;
line-height: 1.5;
text-align: left;
}
#about dt {
padding: 0.25em 0 0.25em 0;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#about dt:before, #contact dt:before {
content: '◆ ';
color: rgba(0,30,120,0.4);
}
#about dd {
padding: 0.5em 0 1.5em 0;
}
#about dd li {
margin-left: 1.25em;
margin-bottom: 0.5em;
list-style: disc;
}
#pagetop {
position: fixed;
bottom: 12px;
right: 4px;
display: none;
z-index: 3;
}
#pagetop a {
display: block;
width: 36px;
height: 36px;
border: 1px solid #ffffff;
background: #9CC8FF no-repeat center center;
background-image: url(../images/icon_arrow_up.svg);
background-size: 16px auto;
text-decoration: none;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
border-radius: 18px;
}
#contact dl {
max-width: 100%;
margin: 3em auto 1em auto;
padding: 0 20px;
}
#contact dt {
margin-top: -1px;
padding-top: 1em;
border-top: 1px solid #cccccc;
}
#contact dd {
margin: 0.75em 0 0 0;
padding-bottom: 1em;
border-bottom: 1px solid #cccccc;
color: #333333;
}
#contact dl span, #contact span.required {
font-size: 0.75em;
}
#contact span.required {
margin-left: 0.75em;
color: #FF3EC9;
}
#contact span.required:before {
content: '※'
}
#contact input[type="text"], #contact input[type="tel"], #contact input[type="email"], #contact textarea {
width: 95%;
padding: 0.75em 2%;
border: 1px solid #cccccc;
background: #f6f6f6;
}
#contact textarea {
height: 10em;
resize: none;
font-size: 1em;
}
#contact input[type="submit"], #contact input[type="button"] {
width: 100%;
padding: 0.5em;
font-size: 1.5em;
border-radius : 8px;
border: 0;
color: #555555;
}
#contact input[type="submit"] {
background: rgba(0,116,255,0.3);
box-shadow: 0px 4px 0px rgba(0,116,255,0.4);
}
#contact input[type="button"] {
background: rgba(170,170,170,0.3);
box-shadow: 0px 4px 0px rgba(170,170,170,0.5);
}
#contact input[type="submit"]:hover {
background: rgba(0,116,255,0.4);
box-shadow: 0px 4px 0px rgba(0,116,255,0.6);
}
#contact input[type="button"]:hover {
background: rgba(170,170,170,0.6);
box-shadow: 0px 4px 0px rgba(170,170,170,0.9);
}
#contact input[type="submit"] + input[type="button"], #contact input[type="button"] + input[type="submit"] {
margin-top: 0.5em;
}
::-webkit-input-placeholder { /* Chrome, Opera */
color: #aaaaaa;
}
:-moz-placeholder { /* Firefox 19+ */
color: #aaaaaa;
}
:-ms-input-placeholder { /* IE 10+ */
color: #aaaaaa;
}
p.text_err span {
display: block;
color: #FF3EC9;
}

/*PC用設定
------------------------------------------------------------------------------------------------------ */
@media screen and (min-width: 48em) {
html {
/* 768px以上960px間はフォントサイズ13px〜16px */
font-size: calc(81.25% + 3 * (100vw - 768px) / 192);
}
br.pc {
display: inline;
}
br.sp {
display: none;
}
header {
width: 100%;
height: 100px;
position: fixed;
left: 0;
top: 0;
}
header .wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
}
h1 {
width: 200px;
height: 30px;
margin: 48px 0 0 0;
}
nav {
margin-top: 40px;
flex-basis: 320px;
font-size: 1.125em;
}
header ul {
margin: 0;
padding: 0;
background: #ffffff;
}
header ul,
header li,
header li a {
display: flex;
justify-content: center;
}
header li,
header li a {
flex-basis: 100%;
}
header li a {
height: 44px;
position: relative;
align-items: center;
border: none;
}
header li:nth-child(n+2) {
margin-left: 0;
}
header li a, header li a:hover, header li a:visited {
color: #001e78;
border: 2px solid #ffffff;
}
header li a:hover {
border: 2px solid #eeeeee;
border-radius: 8px;
}
#contents {
margin-top: 580px;
padding: 0 40px;
}
#contents:before, #contents:after {
width: 40px;
padding-top: 60px;
}
section {
text-align: center;
}
#lead, #works, #about {
padding-bottom: 12.5em;
}
#contact {
padding-bottom: 6em;
}
#lead h2 {
height: 480px;
top: -480px;
}
#lead h2:after {
height: 480px;
}
#lead h2 + p {
padding-top: 7.5em;
}
#lead h2 span {
font-size: 2.5em;
}
#lead h2 span:before, #lead h2 span:after {
width: 7em;
height: 7em;
margin-top: -3.5em;
}
#lead h2 span:before {
margin-right: -3.25em;
}
#lead h2 span:after {
margin-left: -3.25em;
}
#works, #about, #contact {
position: static;
margin-top: -100px;
padding-top: 100px;
}
#works h2, #about h2, #contact h2 {
padding: 48px 0;
margin-bottom: 3.75em;
}
p {
max-width: 960px;
margin: 0 auto;
padding: 0 40px;
line-height: 2.25;
}
#works h3, #contact h3 {
margin-bottom: 1.25em;
font-size: 2em;
font-weight: 300;
}
#media {
max-width: 960px;
margin: 60px auto 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
}
#media section {
flex-basis: 31.5%;
padding: 3em 0;
margin-bottom: 0;
}
#media h3 {
font-size: 1.5em;
}
#media h3:before, #media h3:after {
margin-top: 2em;
}
#media p {
line-height: 1.8;
}
#about dl {
max-width: 960px;
padding: 0 40px;
margin: 5em auto 0 auto;
line-height: 1.75;
}
#about dt {
width: 180px;
padding: 0.5em 0;
text-align: left;
background: transparent;
border: none;
float: left;
}
#about dt:before {
content: '';
}
#about dd {
margin-top: -1px;
padding: 0.5em 0 0.5em 180px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#about dd li {
margin-bottom: 0;
}
#pagetop {
bottom: 20px;
right: 20px;
}
#pagetop a {
width: 40px;
height: 40px;
background-size: 16px auto;
border-radius: 20px;
}
#pagetop a:hover {
background-color: #67AAFF;
}
#contact dl {
max-width: 960px;
margin: 2.5em auto 2em auto;
padding: 0 40px;
text-align: left;
}
#contact dt {
width: 17em;
padding: 1em 0;
border-top: none;
float: left;
}
#contact dd {
min-height: 1em;
margin: -1px 0 0 0;
padding: 1em 0 1em 17em;
border-top: 1px solid #cccccc;
}
span.company {
padding: 0.75em;
display: block;
}
#contact input[type="text"], #contact input[type="tel"], #contact input[type="email"] {
width: 45%;
padding: 0.75em 2%;
border: 1px solid #cccccc;
background: #f6f6f6;
}
#contact input[type="submit"], #contact input[type="button"] {
max-width: 35%;
margin: 0 1em;
padding: 0.5em;
font-size: 1.5em;
border-radius: 8px;
border: 0;
color: #555555;
}
#contact input[type="submit"] + input[type="button"], #contact input[type="button"] + input[type="submit"] {
margin-top: 0;
}
}
@media (min-width: 60em) {
html{
/* 960px以上はフォント最大サイズ16px */
font-size: calc(100%);
}
}