@charset "utf-8";

/* #common
--------------------------------------------------*/
body {
font-size: 12px;
font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
color: #4B4B4B;
}


/* #wrapper
--------------------------------------------------*/
#wrapper {
}


/* #header
--------------------------------------------------*/
#header {
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow:hidden;
}

.logo {
float: left;
margin: 20px 0 30px 130px;
}

.copy {
float: left;
margin: 20px 0 30px 50px;
}


/*  #slider
--------------------------------------------------*/
.flexslider {
margin: 0 0 25px 0;
}

.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}

.flexslider .slides img {
margin: 0 auto;
width: 100%;
max-width: 1200px;
display: block;
}

.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

html[xmlns] .flexslider .slides {
display: block;
}

* html .flexslider .slides {
height: 1%;
}

.no-js .flexslider .slides > li:first-child {
display: block;
}


/*  #about
--------------------------------------------------*/
.about {
width: 90%;
max-width: 825px;
margin: 0 auto;
letter-spacing: 1px;
line-height:25px
}
 
 
 /*  #menu
--------------------------------------------------*/
.menu {
overflow:hidden;
width: 90%;
max-width: 840px;
margin: 0 auto;
letter-spacing: 1px;
line-height:20px;
padding: 65px 0 180px 0;
}
  
  
 /*  #menubotton
--------------------------------------------------*/
.menubotton {
overflow:hidden;
width: 172px;
float: left;
margin-right:45px;
}

.menubotton .text {
margin: 32px 0 10px 0;
}

.menubotton img {
display:block;
margin: 0 auto;
}
 
.menubotton .link {
padding: 40px 0 0 0;
}


 /*  #menubotton_truck
--------------------------------------------------*/
.menubotton_truck {
    overflow: hidden;
    width: 172px;
    float: left;
    margin-right: 45px;
}

.menubotton_truck .text {
margin: 32px 0 10px 0;
}

.menubotton_truck img {
display:block;
margin: 0 auto;
}
 
.menubotton_truck .link {
padding: 40px 0 0 0;
}
 
 
 
/*  #example
--------------------------------------------------*/
.example {
width: 90%;
max-width: 390px;
display:block;
margin: 0 auto;
}

.example .inner{
line-height:20px;
letter-spacing: 3px;
text-align:center;
}

.example .inner .shop{
margin: 50px 0 30px 0;
}

.example .inner .title{
margin: 0 0 15px 0;
}

.example .inner .design{
margin: 70px 0 30px 0;
width: 160px;
height: 160px;
}

 
/*  #portfolio
--------------------------------------------------*/
.portfolio {
width: 90%;
max-width: 560px;
display:block;
margin: 0 auto;
overflow:hidden;
}

.portfolio .inner {
    margin: 118px 0 0 0;
    text-align: center;
    height: 280px;
}

@media print, screen and (max-width: 946.9px) {
	.portfolio .inner {
    margin: 70px 0 0 0;
    text-align: center;
    height: 440px;
}
}

.portfolio .inner .img{
float: left;
margin: 80px 30px 0 0;
}

.portfolio .inner .img2{
 float: left;
margin: 0 30px 0 0;
}

.portfolio .inner .img3{
 float: left;
margin: 0 30px 0 0;
}

.portfolio .inner .text{
text-align: left;
color: #00A0E6;
font-size: 15px;
font-weight: bold;
letter-spacing: 5px;
margin: 80px 0 30px 0;
}

.portfolio .inner .text2 {
    text-align: left;
    color: #1e1e87;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 5px;
    margin: 170px 0 30px 0;
}

.portfolio .inner .text3{
text-align: left;
color: #FFC500;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
margin: -45px 0 30px 0;
}

.portfolio .inner .text4{
text-align: left;
color: #E1007D;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
margin: 170px 0 30px 0;
}
.portfolio .inner .text_shosai{
text-align: left;
line-height:20px;
letter-spacing: 1px;
}

/*  #profile
--------------------------------------------------*/
.en {
    border: solid 1px #1e1e87;
    /* border-radius: 500px; */
    padding: 6%;
    text-align: center;
}
.profile {
    margin: 8px auto;
    max-width: 400px;
    width: 90%;
}
.profile li{
	font-size: 11px;
	line-height:15px;
	margin-bottom: 10px;
}
.profile ul{
	padding: 0 5%;
}
.profile .pro1{
	padding:0 0 10% 0;
}
.profile span:nth-child(2n){
	margin-left: 15px;
}
.profile .gaiyo{
	font-weight: bold;
	font-size: 20px;
    line-height: 3;
    color: darkgray;
}
.profile .text_title{
	font-weight: bold;
}

/*  #footerback
--------------------------------------------------*/
#footerback {
margin: 95px 0 -20px 0;
width: 100%;
background-color: #F0F0F0;
}

.footer{
width: 90%;
max-width: 825px;
display:block;
margin: 0 auto;
}

.footer .img{
text-align: left;
margin: 55px 0 0 0;
}

.footer .text{
text-align: left;
margin: 30px 0 0 0;
line-height:20px;
font-size: 11px;
letter-spacing: 1px;
}

.footer .copyright{
max-width: 400px;
display:block;
margin: 0 auto;
overflow:hidden;
margin: 90px auto 0;
}

.footer .copyright .img1, .footer .copyright .img2, .footer .copyright .img3 ,.footer .copyright .img4{
float: left;
background-color: #1E1E87;
height: 8px;
width: 8px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
margin: 6px 0 0 8px;
}
.footer .copyright .img{
margin-right: 0;
}

.footer .copyright .img2{
background-color: #FFF000;
}

.footer .copyright .img3{
background-color: #00A0E6;
}

.footer .copyright .img4{
background-color: #E1007D;
}

.footer .copyright .text{
float: left;
margin: 0 0 0 40px;
}


/* =============================================================================
レスポンシブ
============================================================================= */

/*-------------------------------- pc ----------------------------------------*/
/*@media screen and (min-width: 1001px) {*/
@media print, screen and (min-width: 947px) {


}

/*------------------------------- smartPhone ---------------------------------*/
/*ここにスマホ用スタイルを記述*/
@media print, screen and (max-width: 946.9px) {

.logo {
	display: block;
    float: none;
    margin: auto;
}

.copy {
	width: 80%;
    float: none;
    margin: 10%;
}

#footerback {
    width: 90%;
    padding: 0 5%;
}

.example .inner .shop {
    margin: 50px auto 30px;
}
.example .inner .title {
	width: 100%;
	margin: 0 auto 15px;
}
.portfolio .inner .img {
	float: none;
	margin: 30px; 
}
.portfolio .inner .img2 {
	float: none;
	margin: 30px; 
}
.portfolio .inner .img3 {
	float: none;
	margin: 30px; 
}
.portfolio .inner .text {
    margin: 10px 0 30px 0;
}
.portfolio .inner .text2 {
    margin: 10px 0 30px 0;
}
.portfolio .inner .text3 {
    margin: 10px 0 30px 0;
}
.portfolio .inner .text4 {
    margin: 10px 0 30px 0;
}
.menubotton {
    float: none;
    margin: 50px auto;
}
.menubotton_truck {
    float: none;
    margin: auto; 
}


}

@media print, screen and (max-width: 400px) {

.profile span{
	display: block;
	margin: 0!important;
}



}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.portfolio .inner {
    margin: 24px 0 0 0;
    text-align: center;
    height: 510px;
}
.table01 {
    width: 100%;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #cacaca;
}
.table01 .lv01 {
    background-color: #eeeeee;
}
.table01 th {
    font-weight: bold;
    text-align: left;
}

.table01 th, .table01 td {
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 15px;
}
}

.table01 {
    width: 100%;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #cacaca;
}
.table01 .lv01 {
    background-color: #eeeeee;
}
.table01 th {
    font-weight: bold;
    text-align: left;
}

.table01 th, .table01 td {
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 15px;
}