@charset "UTF-8";
/* CSS Document */
body{
color:#666;
font-size:100%;
font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
margin: 0px;
}
a:link {
color:#eb0001;
text-decoration:none;
}
a:visited {color: #eb0001;}
a:hover {
color: #016599;
text-decoration:none;
}
a:active {color: #eb0001;}
a img {transition: 0.5s linear;}
a:hover img {opacity: 0.3;}
/*------------------*/
h1{
margin: 40px auto 0px auto;
text-align: center;
display: block;
}
.logo {
margin: 40px auto 0px auto;
text-align: center;
display: block;
}


/*------------------*/
footer {
margin: 60px auto 40px auto;
text-align: center;
}
/*------------------*/
.works_title {
width: 1120px;
margin: 100px auto 0px auto;
padding: 6px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 3rem;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
border-bottom: 4px solid #777;
}
.detail_title {
width: 800px;
margin: 100px auto 0px auto;
padding: 6px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.4rem;
text-align: center;
border-bottom: 2px solid #777;
}
/*about*/
.main_about {
width: 1120px;
margin: 90px auto 0px auto;
}
.main_about .text{
float: left;
}
.main_about .illust{
float: right;
}
/*contact*/
main.contact_txt {
width: 745px;
margin: 100px auto 0px auto;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.4rem;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}
main.contact_txt table {
margin: 0px auto 30px auto;
text-align: left;
}
main.contact_txt table img {
vertical-align: bottom;
}
main.contact_txt table tr {
}
main.contact_txt table tr th {
padding: 10px 50px 10px 0px;
}
main.contact_txt table tr td {
color: #eb0001;
}
/*works*/
main.works {
margin: 50px auto 0px auto;
}
main.works ul {
width: 1120px;
margin: 0px auto 32px auto;
}
main.works ul li {
width: 256px;
float: left;
margin: 0px 32px 0px 0px;
}
main.works ul li:last-child {
margin: 0px;
}
/*detail*/
main.detail {
width: 800px;
margin: 50px auto 0px auto;
text-align: center;
}
main .detail_ph {
margin: 0px auto;
}
main.detail p {
width: 800px;
margin: 30px auto 0px auto;
font-size: 1.1rem;
text-align: left;
line-height: 1.7rem;
}
main.detail .gotoback {
margin: 30px auto 0px auto;
}
main.detail .gotoback a:link,
main.detail .gotoback a:visited {
color: #016599;
}
main.detail .gotoback a:hover {
color: #eb0001;
}
/*------------------*/
.fs_l {font-size: 130%;}
.fw_b {font-weight: bold;}
.fc_red {color: #eb0001;}
/*margin*/
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
/*padding*/
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}
.pl50{padding-left: 50px;}
/*------------------*/
.clearfix:after {
content:" ";
display:block;
clear:both;
}








.inner {
width: 800px;
margin: 0 auto;
}
.inner:after {
content: "";
clear: both;
display: block;
}
#top-head {
width: 680px;
margin: 26px auto 0px auto ;
padding: 0;
}
#top-head .inner {
}
#sub-pages #global-nav{
margin: 40px 0px 0px 0px;
}
#global-nav ul {
}
#global-nav ul li {
float: left;
margin: 0px 32px 0px 0px;
}
#global-nav ul li:last-child {
margin: 0px;
}


/* Fixed */
#top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
padding-top: 10px;
height: 55px;
background: #fff;
background: rgba(255,255,255,.7);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}
#top-head.fixed #global-nav ul li a {
color: #333;
padding: 0 20px;
}

/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #FFF;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
}







@media screen and (max-width: 640px) {

h1{
margin: 20% auto 0px auto;
text-align: center;
display: block;
}
h1 img {
width: 80% !important;
}

.logo {
margin: 80px auto 0px auto;
text-align: center;
display: block;
}


/*------------------*/
.works_title {
width: 93%;
margin: 40px auto 0px auto;
padding: 6px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
border-bottom: 4px solid #777;
}
.detail_title {
width: 93%;
margin: 40px auto 0px auto;
padding: 6px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.4rem;
line-height: 2.0rem;
text-align: center;
border-bottom: 2px solid #777;
}



/*about*/
.main_about {
width: 100%;
margin: 40px auto 0px auto;
text-align: center;
}
.main_about .text {
margin: 0px auto 0px auto;
clear: both;
}
.main_about .text img {
width: 80% !important;
}
.main_about .illust {
margin: 20px auto 0px auto;
clear: both;
}
.main_about .illust img {
width: 80% !important;
}

/*contact*/
main.contact_txt {
width: 100%;
margin: 40px auto 0px auto;
font-family: 'Roboto Condensed', sans-serif;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}
main.contact_txt table {
width: 80%;
margin: 0px auto 30px auto;
text-align: left;
}
main.contact_txt table img {
width: 60% !important;
vertical-align: bottom;
}
main.contact_txt table tr {
}
main.contact_txt table tr th {
padding: 0px 20px 10px 0px;
}
main.contact_txt table tr td {
color: #eb0001;
}
main.contact_txt img.contact-img {
width: 80% !important;
}

/*works*/
main.works {
margin: 40px auto;
}
main.works ul {
width: 100%;
margin: 0px auto 0% auto;
padding: 0px 2%;
}
main.works ul li {
width: 50%;
float: left;
margin: 0px 0px 2% 0px;
}
main.works ul li:last-child {
margin: 0px;
}
main.works ul li img {
width: 92% !important;
}

/*detail*/
main.detail {
width: 100%;
margin: 50px auto 0px auto;
text-align: center;
}
main .detail_ph {
margin: 0px auto;
}
main .detail_ph img {
width: 90% !important;
}


main.detail p {
width: 100%;
margin: 30px auto 0px auto;
font-size: 1.1rem;
text-align: left;
line-height: 1.7rem;
}
main.detail .gotoback {
margin: 30px auto 0px auto;
}
main.detail .gotoback a:link,
main.detail .gotoback a:visited {
color: #016599;
}
main.detail .gotoback a:hover {
color: #eb0001;
}




footer {
margin: 5% auto 5% auto;
text-align: center;
}

footer img {
width: 70% !important;
}


#sub-pages #global-nav{
margin: 0px 0px 0px 0px;
}
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #f31f13;
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}

#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: #faccd0;
width: 100%;
text-align: center;
padding: 10px 0 0px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: none;
position: static;
border-bottom: 1px dashed #f28088;
margin: 0px;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #f00;
padding: 18px 0;
}
#nav-toggle {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}