@charset "UTF-8";
/* CSS Document */
/* ------ Column ------ */

.row-top {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.row-top:after {
	content: "";
	display: block;
	clear: both;
}
/* ------ header ------ */
header {
	width: 100%;
	background-color: #f5f5f5;
	padding-top: 10px;
}

header .row {
	position: relative;
}

/* ------ navi ------ */
* {
    padding: 0;
    margin: 0;
     
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
nav {
    width: 100%;
	margin-top: 20px;
    margin-left: auto;  
	margin-right: auto;  
	margin-botom: 0px;
}
 
nav ul {
    list-style: none;
    overflow: hidden;
}
nav li a {
    background: #cd853f;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 25%;　/* メニューバーの大きさを整える */
     
    /*TRANSISTIONS*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}
 
/*HOVER*/
nav li a:hover {
    background: #e69647;
}
/*SMALL*/
nav small {
	color: #CCC;
	text-transform: none;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 11px;
	line-height: 1;
	font-weight: 100;     
}
nav li:last-child a {
    border: none;
}

.row-top .col.one-second-top .tel {
	color: #808080;
	font-size: 50px;
	text-align: right;
	font-family: 'Fira Sans Condensed', sans-serif;
	margin-top: 30px;
	margin-bottom: auto;
	margin-right: 15px;
}

/* ------ footer ------ */
body footer {
	background: -moz-linear-gradient(top center, #000 0%, #a0522d 100%);
	/* Chrom と Safari */
    background: -webkit-gradient(linear, center top, center bottom, from(#000), to(#a0522d));
	/* 共通 */
    background: linear-gradient(top center, #000 0%, #a0522d 100%);
	padding-bottom: 10px;
}
#wrap{
	width:100%;
	height:350px;
	position:relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#wrap01{
    width:100%;
    height:autopx;
    margin:0 auto;
    position:relative;
}
 
#box01{
	width:100%;
	height:350px;
	position:relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 10px;
}
.row .col.one-second #copyright {
	color: #a9a9a9;
	text-align:right;
	padding-top:10px;
	padding-bottom:10px;
	font-size: small;	
}
.row .col.one-second #sns {
	color: #a9a9a9;
	text-align:right;
}
.row .col.one-second #adress {
	color: #a9a9a9;
	margin-bottom:15px;
	text-align:right;
}
.row .col.one-second img {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left:auto;
	margin-right:auto;
}
.row .col.one-second #wrap #wrap01 #box01 ul {
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
}
.row .col.one-second #wrap #wrap01 #box01 ul li a {
	display: block;
	height: auto;
	color: #a9a9a9;
	padding: 10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: large;
	text-decoration: none;
}
.row .col.one-second #wrap #wrap01 #box01 ul li a:hover {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #a9a9a9;
}
.row .col.one-second #logo {
	text-align: right;
	margin-bottom: 15px;
}
.row-top .col.one-second-top .logo {
	margin-left: 15px;
}
.row .col.one-second #sns img {
	margin-right: 10px;
	margin-left: 10px;
}

.page-top-area {
	border-top: solid #000 1px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.page-top-area img {
	width: 40px;
}

/*-----------------------------------------------------	*/
/*	for  1020- 768px				*/
/*-----------------------------------------------------	*/
@media (max-width: 1020px) and (min-width: 768px) { 
		
	/* ------ navi ------ */
    nav li a {
        font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        width: 25%;
        border-bottom: 1px solid #fff;
    }
     
    nav small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }
    nav li:last-child a, nav li:nth-child(4) a {
            border-right: none;
    }
     
    nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
            border-bottom: none;
    }
    .row-top .col.one-second-top img {
	        width: 35%;
	        height: auto;
    }
	.row .col.one-second #sns img {
	        width:18%;
	        height:auto;
    }
	.row .col.one-second #copyright {
	        margin-right: 10px;
    }
    .row .col.one-second #sns {
	        margin-right: 10px;
    }
    .row .col.one-second #adress {
	        margin-right: 10px;
    }
    .row .col.one-second #logo {
	        margin-right: 10px;
    } 
}
/*-----------------------------------------------------	*/
/*	for  - 767px				*/
/*-----------------------------------------------------	*/
@media (max-width: 767px) {

	/* ------ navi ------ */
        nav li a {
            width: 50%;
            font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
            padding-top: 12px;
            padding-bottom: 12px;
        }
        nav li:nth-child(even) a {
            border-right: none;
        }
     
        nav li:nth-child(1) a, nav li:nth-child(2) a {
            border-bottom: 1px solid #fff;
       }
	   .row-top .col.one-second-top .logo img {
	        width: 35%;
	        height: auto;
       }
       .row-top .col.one-second-top .logo {
	       text-align: center;
       }
      .row-top .col.one-second-top .tel {
       	   font-size: 30px;
	       text-align: center;
		   margin-top: 5px;
       }
       .row .col.one-second #copyright {
	       text-align: center;
       }
      .row .col.one-second #sns {
	       text-align: center;
       }
      .row .col.one-second #adress {
		       text-align: center;
       }
      .row .col.one-second #logo {
		       text-align: center;
       } 
	   .row .col.one-second #sns img {
	           width:10%;
	           height:auto;
       }
       .row .col.one-second #wrap #wrap01 #box01 ul {
	          text-align: center;
       }
	   .row .col.one-second #adress {
	          font-size: small;
       }
	   .row .col.one-second #sns {
	　　　　　padding-right: 0;
       }
	   #wrap{
	         background-image: url(../images/under_img.jpg);
	         background-repeat: no-repeat;
	         background-position: top;
       }
	   #wrap01{
             background-color:rgba(0,0,0,0.7);/*background-color:rgbaを使用すると、現在の要素だけが透明になる。*/
       }
       .row .col.one-second #wrap #wrap01 #box01 ul li a {
	         font-size: 90%;
       }
}
@media (max-width: 480px) {
	.page-top-area {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.page-top-area img {
		width: 25px;
	}
}