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

/*  all reset
==============================================*/

* {
	margin: 0;
	padding: 0;
	list-style: none;
	}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}	
	

/*  base
==============================================*/
body {
  background-color: #fff;
  color: #786956;
  background: url(../img/common/bg.jpg);
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 30px;
  -webkit-text-size-adjust: 100%;
}

ul, ol, dl, h1, h5, h6 {
	padding: 0;
	margin: 0;
}
p { width:96%; margin:0 auto;}
h2 { width:90%; margin:20px auto; text-align: center; border-bottom:#6698cd solid 1px;}
h3 {font-size: 160%; text-align: center; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; margin-bottom:15px;}
h4 { font-size:1.1em; }

a img { 
	border: none;
}

a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;
}

a:link {
	color:#659acc;
	text-decoration: none; 
}
a:visited {
	color: #659acc;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
color: #659acc;
	text-decoration: underline;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1; /* for IE6/7 */
}
@media only screen and (max-width: 959px) {
h2 img{width:80%; margin:5px auto;}
}

/* レイアウト */
#topline {
	width: 100%;
	height: 5px;
	background-color:#659acc;
}

#container {
	max-width: 960px;
	margin: 0 auto; 
	padding: 0 0 130px 0;
	text-align: left;
	overflow:hidden;
	background-color:#fff;
	}
	
#header {
	width: 100%;
	position: relative;
}

.logo{
	display:block;
	float: left;
	width: 100%;
	height: auto;
	text-align:center;
	margin:0;
	position: relative;
	}
.logo a { display:block;
    width: 325px;
	height: 150px;
	margin:0 auto;}

@media only screen and (max-width: 959px) {
	#container {
	width: 100%;
	padding: 0;
	border:none;
}
}

@media only screen and (max-width: 641px) {
	body {
  font-size: 20px;
  line-height: 36px;
}
#container { padding-bottom:20%;}
.logo{
position: relative;
width:100%;
margin:0;
float: left;
	}
.logo a img {width:100%;}
h2 { width:100%;}
h3 {font-size: 120%; }
h4 { font-size: 18px;line-height: 30px; }
.imgright img { width:100%;}
}



/*  navigation
==============================================*/
.menu-box{margin-bottom:0;}
#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  margin: 0;
  padding: 10px 0 0px;
}
#menu li a{
  display: block;
  text-decoration: none;
}



#toggle{ 
 display: none;
}

@media only screen and (max-width: 959px) {
#menu{
    display: none;
  }
#menu li{
	padding: 2% 0 1% 0;
    width: 100%;
	border-bottom:#746550 solid 1px;
	}
#menu li a{
  display: block;
  text-decoration: none;
}


  #toggle{
	  margin-top:130px;
    display: block;
    position: relative;
    width: 100%;
    background: #659acc;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 8px 0 16px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #659acc;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}


/*  footer
==============================================*/
#go-pagetop {
  right: 45%;
  bottom: 130px;
  position: fixed;
  z-index: 2;
}



#footer {
	width: 100%;
	margin: 0;
	padding:1px 0;
	background-color:#659acc;
	text-align:center;	
	position:relative;
}
.footerframe {
	max-width: 960px;
	margin: 0 auto; 
	text-align: center;
	position:relative;
		}
.footernavi ul{ display:block; width:60%; margin:20px 20% 0 20%;}
.footernavi li { float:left; display:block; background:url(../img/common/footer_icon.png) no-repeat left center; padding:2% 3%; font-size:13px;}
.footernavi li a { color:#fff;}
.copyright {
	font-size: 12px;
	color:#fff;
	width: 100%;
	padding:40px 0 20px 0;
	margin:0 auto;
	text-align:center;
	clear:both;
}
@media only screen and (max-width: 959px) {
#go-pagetop {
  left: 50%;
  bottom: 130px;
  position: fixed;
  margin-left: -60px;
  z-index: 2;
}
.footernavi ul{ display:block; width:60%; margin:20px 20% 0 20%;}
.footernavi li { display:block; background:url(../img/common/footer_icon.png) no-repeat left center; padding:0 5%; font-size:18px;}
}
@media only screen and (max-width: 640px) {


.footernavi ul{ width:90%; margin-left:5%;}
.footernavi li { float: left; display:block; width:46%; margin:2%; background:url(../img/common/footer_icon.png) no-repeat left center; padding:3% 1% 3% 3.5%; font-size: 0.7em;
 border:#bbd7f2 solid 1px;}
.copyright {
	font-size: 0.7em;
	width: 100%;
	padding: 10px;
	margin:0 auto;
	text-align:center;
	clear:both;
}
}


/*  hidden

==============================================*/

#logo,h1
 {
	text-indent: -9999px;
	/*  MacIE 5 \*/
overflow: hidden;

/*  MacIE 5 end */
	}


.kv{width:100%; height:360px; text-align:center;}



/*  top
==============================================*/
#kv {
	width:100%;
	height:380px;
	margin:0;
	position: relative;
	}
.topcopy { width:90%; margin:5%; text-align:center;}
.topleft{float:left; width:29%;margin:3%  0 0 3%;position: relative; border-top:#988771 1px solid;}
.topleft img {width:100%}

@media only screen and (max-width: 959px) {
#kv {background-size:contain; 
    margin:30px 0; height:auto; }
}
@media only screen and (max-width: 640px) {
.topleft{float:left; width:90%;margin:30px 5% 0 5%;}
.topcopy { text-align:left;}
}
/* 下層共通
==============================================*/
.kv_kaso{ width:100%;}
.kv_kaso img{ width:100%;}
.toiawase { width:100%; margin:30px 0; text-align:center;}
.content {width:80%; margin:3% 10%; position:relative;}
.imgright { float:right;}
@media only screen and (max-width: 959px) {
.kv_kaso{ margin-top:5%;}
}
@media only screen and (max-width: 640px) {
.toiawase { width:100%; margin:40px 0;}
.toiawase img { width:100%;}
.content {width:90%; margin:5%; }
}


/* プロフィール
==============================================*/
.profile img { position:absolute;top: 120px; right: 0;}
.profile li{ 
 background-image: url(../img/info/icon2.jpg);
	background-repeat: no-repeat;
	background-position: left 8px;
	padding-left: 20px;
	clear:left;}
#profilelist{
	width: 70%; margin:20px 0;
}
#profilelist dl{
	height: 150px;
	padding-top: 0px;
}

#profilelist dl dt {
	width: 88px;
	float: left;
}

#profilelist dl dd {
	padding-left: 110px;
	line-height: 18px;
	padding-bottom:8px;
	padding-top: 8px;
}
@media only screen and (max-width: 959px) {
	#profilelist{ width:100%;}
	.profile img { position: relative; float:right; margin: -260px 0 200px 0;}
}
@media only screen and (max-width: 640px) {
	.content { margin-bottom:30px;}
	.content img { width:80%; margin: 10px 10%;}
	.profile img { width:60%; margin: -100px 20% 200px 20%;}
}

/* whatwedo
==============================================*/
.whatwedo {width:90%; margin:5%; text-align:center; }
.whatwedoimg_l { width:49%; float:left;}
.whatwedoimg_r { width:49%; float:left; margin-top:82px; margin-left:1%;}
.whatwedoimg_l img, .whatwedoimg_r img { width:100%;}
@media only screen and (max-width: 640px) {
.whatwedo {text-align:left; }
.whatwedoimg_l { width:100%;}
.whatwedoimg_r { width:100%;margin-top:0;}
}



/* アルバム
==============================================*/
.album {width:90%; margin:5%; text-align:center; }
.album img { width:100%;}
@media only screen and (max-width: 640px) {
.album {text-align:left; }
}


/* リンク
==============================================*/
.linklist{
	width: 42.5%;
	float: left;
	margin: 25px 0 10px 5%;
}
.linklist dl{
	padding-top: 0px;
}

.linklist dl dt {
	width: 120px;
	float: left;
}

.linklist dl dd {
	padding-left: 120px;
	line-height: 1.4em;
}

.linkname {
	font-size: 18px;
	margin-top: 0px;
	margin-bottom: 10px;
	font-weight: bold;
}
.linkname a {
	text-decoration: none;
}
.linkname a:visited {
	text-decoration: none;
}
.linkname a:active {
	color: #6ca5db;
	text-decoration: underline;
}
.linkname a:hover {
	color: #6ca5db;
	text-decoration: underline;
}
@media only screen and (max-width: 959px) {
	
}
@media only screen and (max-width: 640px) {
.linklist{
	width: 85%;
	float: left;
	margin: 25px 0 30px 6%;
}

}
	
/* info
==============================================*/
#infolist { width:90%; margin:0 5%; position:relative;}

#infolist dl dt{ width:20%;float:left; background-image: url(../img/info/icon2.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
	clear:left;}
#infolist dl dd{width:80%;float:left; margin-bottom:40px;}
@media only screen and (max-width: 959px) {

}
@media only screen and (max-width: 640px) {
#infolist dl dt{width:100%;}
#infolist dl dd{width:100%;}
}	
	
	
/* お問合せ
==============================================*/
.contacttxt { margin:5px 0 20px 250px;}
.red { color:#cc0000; font-size: 0.8em;}
.formTable { width:90%; margin:0 10% 0 0; padding: 0 0 20px 0;	}
.formTable th { padding:20px 20px 20px 40px; font-weight:normal;}
.formTable td {padding:20px;}
.imput1 {height:60px; width:100%; background-color:#f7f4ef; border:1px solid #bfbfbf; font-size:18px; padding:10px;}
.textarea {height:300px; width:100%; background-color:#f7f4ef; border:1px solid #bfbfbf; font-size:18px; padding:10px;}
	
#btn_confirm{ width:280px; height: 81px; float:left; margin: 0 20px 0 240px; display:block; background:url(../img/contact/btn_kakunin.png) no-repeat; border: none; cursor:pointer;text-indent: -9999px;}
#btn_reset{ width:280px; height: 81px; float:left; margin: 0 20px; display:block; background:url(../img/contact/btn_reset.png) no-repeat; border: none; cursor:pointer;text-indent: -9999px;}
.right{ float:right; margin:10px;}
.kakunin { width:60%; margin:20px auto;}
@media only screen and (max-width: 959px) {
.contacttxt { margin:5px 0 20px 25%;}
.kvotoiawase {	background-size:contain; }
#btn_confirm{ width:90%; height: 70px; margin: 0 auto 30px auto; display:block; background:url(../img/contact/btn_kakunin.png) no-repeat center center ; border: none; cursor:pointer; background-size:contain;}
#btn_reset{ width:90%; height: 70px; margin: 0 auto 30px auto; display:block; background:url(../img/contact/btn_reset.png) no-repeat center center; border: none; cursor:pointer; background-size:contain;}

}

@media only screen and (max-width: 640px) {
.contacttxt { margin:5px 3% 20px 3%;}
.formTable { width:100%; margin:0; padding: 0 0 20px 0;	}
.formTable th { padding:0 5px 20px 5px; font-weight:normal; font-size:0.9em; line-height:1.3em;}
.formTable td {padding:5px 5px 5px 0;font-size:0.9em; line-height:1.3em;}
#btn_confirm{ margin: 0 10px 30px 10px; }
#btn_reset{ margin: 0 10px 30px 10px; }
}