/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");

/* ICOMOON */
@import url("icomoon.css");


/*	EXAMPLE STYLES */
body {
	font-family: Meiryo,"メイリオ","ＭＳ Ｐゴシック",Osaka,sans-serif;
	color: #333;
	font-size: 13px;
	background-image:url(../common_img/bg01.png),url(../common_img/bg02.png);
	background-position:0 0,right 0;
	background-repeat:no-repeat,no-repeat;
	background-color:#f7f6f1;
	background-size:30%,60%;
}

/* ----------   header  --------------------- */
header {
	padding-bottom:0px;
	background-position: 0 0;
	border-top:solid 4px #ab92aa;
	position: relative;
	animation-name: SlideDown;
	animation-duration: 2s;
}


/* ----------   article  --------------------- */

main {
	margin:0px 0 30px;
	animation-name: LeftToRight;
	animation-duration: 3s;
}

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

body {
	background-size:40%,100%;
}

main {
	padding:0px 10px 0px;
}

}

/* ----------   section  --------------------- */
section {

}
section p{
padding:0 1%;
line-height:1.8;
}
aside {
	margin:0px 0 10px;
	animation-name: RightToLeft;
	animation-duration: 3s;
}

#side_bar{
}

/* ----------   footer  --------------------- */
footer {
	padding:0px 0px 0px;
}

#link_area{
text-align:center;
margin:10px 0;
}


#link_area img{
margin:5px 0;
}


/* ----------   メインイメージ系  --------------------- */

#main_img {
	margin:15px 0 0px;
	padding:0px 0 0px 0;
	animation-name: SlideUp;
	animation-duration: 2s;
}

#main_img h2{
	text-align:center;
}

#main_img p{
	padding:0px 0 30px 0;
	text-align:center;
	font-size:160%;
	color:#8b5f00;
}

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


#main_img {
	margin:0px 0 0px;
}

#main_img p{
	font-size:100%;
	padding:10px 0 20px 0;
}

}

.nak_tt{
background:url(../common_img/page_tt.png) no-repeat center center;
margin:15px 0px 10px 0px ;
	animation-name: SlideUp;
	animation-duration: 2s;
}

.nak_tt h2{
font-weight:bold;
padding:9.5% 2% 9.5%;
font-size:200%;
color:#fff;
text-shadow:1px 1px 3px #88ae2d,-1px -1px 3px #88ae2d,1px 1px 3px #88ae2d,-1px -1px 3px #88ae2d,1px 1px 3px #88ae2d,-1px -1px 3px #88ae2d;
}


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

.nak_tt{
margin:0px 0px 10px 0px ;
background:url(../common_img/page_tt.png) no-repeat 80% 65%;
}

.nak_tt h2{
font-weight:bold;
padding:6% 2% 6%;
font-size:140%;
margin:0px 0px 0px ;
color:#fff;
}


}



/* ----------   menu  --------------------- */

#menu-box{
  margin:0px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
}

#menu{
  margin: 10px 0 0px;
  padding: 0;
  font-size:100%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#menu li{
  float: left;
  text-align:center;
  line-height:1.5;
  width: 25%;
  border-right:dotted 1px #000;
  margin: 0;}


#menu li a{
  display: block;
  padding: 5px 0px 5px;
  color: #a0724c;
  text-align: center;
  font-weight:bold;
  text-decoration: none;
}

#menu li a span{
  display: block;
  color: #401d00;
  text-align: center;
  font-size:110%;
}


#menu li:first-child a{border-left:none;}

#menu li a:hover{background:#ebe9e2;}

#menu li dd{ display:none; position: absolute; z-index:1000; top:115px;padding:0; border:solid 1px #a57253;background:#fff;}


#menu li ul.sub_nav { padding:0 0 0;display:block; overflow: hidden;margin:0;font-size:90%;} 
#menu li ul.sub_nav li { width:300px;float: none; color:#fff; padding:0 0px; margin-bottom:1px; height:auto; list-style:none; }
#menu li ul.sub_nav li a { background:none!important;color:#000; text-align:left; padding:10px 20px 10px 20px; height:auto;text-decoration:none;border-bottom:dotted 1px #a57253;}
#menu li ul.sub_nav li:last-child a{ border-bottom:none;}
#menu li ul.sub_nav li a:hover { background:#b9d8ff!important;color:#2172d7; text-align:left;}
#menu li ul.sub_nav li a:before { content:'\e910'; margin-right:15px;font-family:'icomoon';color:#a57253;}

#menu li ul.sub_nav li a {
	opacity:0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}

#menu li ul.sub_nav li a:hover {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


#toggle{ 
 display: none;
}


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


#menu li a{
  font-weight:normal;
}

}

@media only screen and (max-width: 768px) {
  #menu{
    display: none;
    margin: 0px 0 0px;
  }


  #menu li{
    width: 100%;
    border-bottom:dotted 1px #fff;
    font-size:90%;
    border-right:none;
  }

  #menu li a{
    display: block;
    padding: 10px 0 10px;
    background:#e0dad0;
    border-left:none;
  }

  #menu li.nak{
    width: 100%;
    border-bottom:dotted 1px #fff;
    background:none;
  }
  #menu li.hom{
    width: 100%;
    border-bottom:dotted 1px #fff;
  }


  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background:#807264;
    border-bottom:solid 1px #fff;
  }

  #toggle a{
    display: block;
    position: relative;
    padding: 10px 0 8px;
    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: #807264;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }

#menu li dt{ position: relative;}
#menu li dd{ display:none; position: absolute; z-index:100; top:258px;padding:0; border:none;width:100%;}
#menu li ul.sub_nav { padding:0 0 0;display:block; overflow: hidden;margin:0;font-size:120%;} 
#menu li ul.sub_nav li { float: left;width:50%; color:#fff; padding:0 0px; margin-bottom:1px; height:auto; list-style:none; }
#menu li ul.sub_nav li:last-child a{ border-bottom:dotted 1px #2172d7;}
#menu li ul.sub_nav li a { background:#fff!important;color:#193147;padding:8px;}

}





.btn01 {}

.btn01 a:before { content:'\e910'; margin-right:10px;font-family:'icomoon';color:#fff;font-size: 100%; }

.btn01 a{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	font-size:100%;
	display:block;
	padding:3px 10px;
	background:#ff6000;
	text-align:center;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

.btn01 a:hover{
	background:#007c1a;
}

.btn02 {}

.btn02 a:before { content:'\e910'; margin-right:10px;font-family:'icomoon';color:#fff;font-size: 100%; }

.btn02 a{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	font-size:100%;
	display:block;
	padding:3px 10px;
	background:#807264;
	text-align:center;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

.btn02 a:hover{
	background:#ff7800;
}


.office_box{
background:#fff;
margin:0px 0 10px;
padding:0px 0 10px;
border:solid 5px #e2e2e2;
}

.side_tt{
background:url(../common_img/side_tt.png) no-repeat 0 0px,url(../common_img/side_tt02.png) repeat-x 0 0px;
text-align:center;
color:#fff;
font-size:110%;
padding:10px 0 10px 15px;
}

ul.side_img{
margin:10px 0 10px;
}

ul.side_img li{
margin:0px 0 10px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
text-align:center;
}

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

.office_box{
background:#fff;
margin:0px 10px 10px;
padding:0px 0 10px;
border:solid 5px #e2e2e2;
}

ul.side_img{
margin:10px 10px 10px;
}

ul.side_img img{
width:90%;
}

}

.side_info{font-weight:bold;text-align:center;}


.link_box{
-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}

.bl-hover{
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background: #000;
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}

/* ----------   フッターナビ  --------------------- */

#page_up{width:62px;
margin:10px auto 0;
text-align:center;
}
#page_up img{width:100%;}


.fotter_bg{
background:#e0dad0 url(../common_img/fotter_bg.png) repeat-x 0 0px;
}

.fnav {
width:100%;
margin:0 0 0 20px;
}

.fnav li{
float:left;
margin:0 20px 5px 0;
color:#4d2f1e;
}

.fnav li a:before  { content:'>'; float:left;margin-right:5px;font-size:80%;padding:0px 3px;}

.fnav li a{
display:block;
color:#4d2f1e;
}

.fnav li a:hover{
color:red;
}


#site_copy{
text-align:center;
margin:40px 0 0 0;
padding:10px;
color:#fff;
background:#807264;
}

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

.fnav {
width:95%;
margin:0 auto 10px;
}

.fnav li{
float:none;
margin:0 0px 5px 0;
color:#fff;
}

.fnav li a{
text-align:center;
font-size:110%;
padding:10px 0;
background:rgba(0,0,0,0.3);
}

}

/* ----------   デバイス毎の振り分け  --------------------- */


/*PC960px以上 */


h1{
font-size:80%;
padding:0px 0 0px;
line-height:30px;
font-weight:normal;
text-align:left;
width:730px;
float:left;
color: #988e82;
}


.font{
width:170px;
margin:5px 0px 0px 0px ;
float:right;
}

.font ul:before { content:'文字サイズ';font-weight:bold;color:#ab92aa;}

.font ul {
padding:0px 0px 0px 0px ;
margin:0px 0px 0px 0px ;
}

.font li {
float:right;
margin:0px 0px 0px 5px ;
}

.logo{float:left;width:270px;padding:20px 0px 20px 0px ;}
.h_nav{float:right;width:660px;padding:10px 0px 0px 0px ;}


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

h1{
font-size:80%;
padding:0px 0 0px;
line-height:30px;
font-weight:normal;
text-align:left;
width:100%;
float:none;
}

.font{
display:none;
}

.logo{float:left;width:28.1%;padding:20px 0px 20px 0px ;}
.h_nav{float:right;width:67%;padding:10px 0px 0px 0px ;}

}

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


.logo{float:none;width:270px;margin:0 auto;padding:5px 0px 10px 0px ;}
.h_nav{float:none;width:100%;padding:0px 0px 0px 0px ;}



#side_bar{display:none;}
#pan {display:none;}

#page_up{width:25%;
margin:0px auto 0;
}
#page_up img{width:100%;}

}

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


h1{
font-size:80%;
padding:0px 0 0px;
line-height:1.2;
height:30px;
font-weight:normal;
text-align:center;
}


#page_up{width:35%;
margin:0px auto 0;
}
#page_up img{width:100%;}

}


/* ロールオーバーで不透明度変更
-------------------------------------------------- */
.hover_img a:hover img,
a.hover_img:hover img {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


/* タイトルのスタイル
-------------------------------------------------- */

.tt_style01{
font-size:130%;
color:#fff;
background:url(../common_img/h3_bg03.png) no-repeat 15px center,url(../common_img/h3_bg01.png) repeat 0 0;
padding:10px 0px 10px 35px ;
font-weight:bold;
margin:30px 0px 25px;
}


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


.tt_style01{
font-size:100%;
color:#fff;
background:url(../common_img/h3_bg01.png) repeat 0 0;
padding:8px 0px 8px 15px ;
font-weight:bold;
margin:30px 0px 15px;
}

}


.tt_style02{
font-size: 120%; 
color: #33590c;
padding:0px 0 5px 5px;
margin:40px 0px 20px;
font-weight:bold;
border-bottom:dotted 2px #4d7f19;
}

.tt_style02 span{
padding:0px 0px 0px 20px;
color:#000;
display:block;
font-size: 90%; 
}



.tt_style02:before  { content:'\f028'; margin-right:5px;color:red;font-family:'icomoon';}

/* ----------  わたしたちはこんな事務所です  --------------------- */

.point_box{
margin:0px 0 10px;
padding:50px 0 25px 2% ;
border:dotted 1px #ccc;
}

.point_box dt{
font-size:130%;
font-weight:bold;
margin:0px 0 5px;
color:#745536;
}

.p_01{background:#f3f1e9 url(../images/bg_03.png) no-repeat 0 0;}
.p_02{background:#f3f1e9 url(../images/bg_04.png) no-repeat 0 0;}
.p_03{background:#f3f1e9 url(../images/bg_05.png) no-repeat 0 0;}


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

.point_box dt{
font-size:110%;
}

.point_box{
margin:0px 0 5px;
padding:50px 2% 10px 5% ;
}

}

/* ----------   TOPのボタン  --------------------- */

#btn_area{
background:#f0eee6;
padding:35px 0;
margin-bottom:40px;
	animation-name: RightToLeft;
	animation-duration: 3s;
}

.btn_top{
background:#e4dce1;
padding:10px;
margin:5px 0;
}

.btn_top .inner{
background:url(../images/btn_bg.png) repeat center 0;
padding:10px;
border:solid 1px #fff;
}

.btn_top .inner h3{
text-align:center;
font-size:150%;
font-weight:bold;
color:#7b2d64;
background:url(../images/bt_07.png) no-repeat center bottom;
}

.btn_top .inner ul{
color:#73583d;
background:#fff;
margin:15px auto 0;
width:95%;
padding:15px 10px 45px;
}

.btn_top .inner ul li{
padding:3px 0;
}

.btn_top .inner ul li:before{
content:"●";
}


.btn_top .inner figure{
text-align:center;
margin-top:-30px;
color:#9d7e5f;
}


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

#btn_area{
padding:20px 15px;
}

}


/* 
====================================================================================================
◆画像のレフト・ライト
---------------------------------------------------------------------------------------------------- */

.fig_01{
float:right;
width:26%;
margin:0px 0px 20px 20px;
}

.fig_02{
float:left;
width:26%;
margin:0px 20px 20px 0px;
}

.fig_03{
float:right;
width:20%;
margin:0px 0px 20px 20px;
}

.fig_04{
float:left;
width:36%;
margin:0px 20px 20px 0px;
}


.fig_05{
float:right;
width:20%;
margin:0px 0px 20px 20px;
text-align:center;
}

.fig_06{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}

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

.fig_03{
display:none;
}

.fig_04{
display:none;
}

}

figure img{
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

/* 
====================================================================================================
◆表示アニメーション
---------------------------------------------------------------------------------------------------- */

/*右から左*/
@keyframes RightToLeft {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(500px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}

@keyframes LeftToRight {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(-500px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}

/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}

/*下から上*/
@keyframes SlideUp {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}