/*------------------------------
仮TOP用CSS
------------------------------- */
@import url("reset.css");
@import url("share.css");



/* トップイメージ
------------------------------- */
#img_top{
position:relative;
width: 100%;
height:540px;
margin:0 0 120px;
}
#img_top h2{
position:absolute;
z-index:100;
width:1000px;
top:-40px;
left:50%;
margin-left:-500px;
}
#img_top li{
float:left;
}
#slider{
margin:0 auto;
}
.slide_all {
width: 800px;
margin: 0 auto;
height: 520px;
position: relative;
}
.slide_wrap {
width: 2310px;
height: 520px;
position: absolute;
left: 50%;
margin-left: -1180px;
}
.slide_body {
width: 100%;
}
#slider li{
margin:0 40px 0 0;
background:#F5B79E;
padding:10px;
-webkit-border-radius: 96px;
border-radius: 96px;
behavior: url("/js/PIE.htc");
position:relative;
}
#slider img{
width: 100%;
vertical-align: bottom;
-webkit-border-radius: 90px;
border-radius: 90px;
behavior: url("/js/PIE.htc");
position:relative;
}
#img_top .bx-controls-direction{
position:absolute;
left:50%;
top:50%;
width:894px;
margin:-35px 0 0 -420px; 
}
#img_top .bx-controls-direction a{
display:block;
width:72px;
height:72px;
position:relative;
text-indent:-9999px;
text-decoration:none;
z-index:200;
}
.bx-wrapper .bx-pager.bx-default-pager a{
display:inline-block;
-webkit-border-radius: 50%;
border-radius: 50%;
behavior: url("/js/PIE.htc");
position:relative;
width:12px;
height:12px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background:#1E50A2;
}
#img_top .bx-controls-direction .bx-prev{
position:absolute;
top:0;
right:0;
background:url(../gazou/top/arrow_l.png) no-repeat;
}
#img_top .bx-controls-direction .bx-next{
position:absolute;
top:0;
right:0;
background:url(../gazou/top/arrow_r.png) no-repeat;
}
.bx-wrapper .bx-pager{
bottom: -40px;
padding-left:26px;
}

/* 新着情報
------------------------------- */
#news{
position:relative;
}
#news:after{
content:"";
display:block;
clear:both;
}
#news h2{
background:url(../gazou/top/bg_tit_news.png) no-repeat top;
position:absolute;
top:-60px;
width:100%;
text-align:center;
padding:43px 0 0;
}
#news1{
background:url(../gazou/top/bg_news1.jpg) repeat-x;
width:50%;
float:left;
padding:70px 0 0;
height:465px;
}
#news2{
background:url(../gazou/top/bg_news2.jpg) repeat-x;
width:50%;
float:right;
padding:70px 0 0;
height:465px;
}
#news .box{
padding:60px 20px 0;
height:232px;
width:420px;
position:relative;
background:#fff;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url("/js/PIE.htc");
position:relative;
}
#news1 .box{
float:right;
margin:0 30px 0 0;
}
#news2 .box{
float:left;
margin:0 0 0 30px;
}
#news .box h3{
position:absolute;
z-index:1;
top:-38px;
left:20px;
}
#news li a{
display:block;
position:relative;
padding:16px 0 0 112px;
height:64px;
border-bottom:2px dotted #A1A1A1;
line-height:1.2;
transition:.3s;
color:#000;
font-size:16px;
}
#news1 li a:hover{
background:#D5EDFB;
}
#news2 li a:hover{
background:#FFD5D5;
}
#news li .date{
position:absolute;
top:16px;
left:0;
font-size:14px;
}
#news li .ctgname{
display:inline-block;
padding:0 20px;
line-height:20px;
}
#news1 .ctgname{
background:#A4DAE3;
}
#news2 .ctgname{
background:#F0A4A4;
}
#news li .tit{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
margin:8px 0 0;
}
#news .btn_news{
text-align:center;
padding:10px 0 0;
}
#news .btn_blog{
clear:both;
width:290px;
position:relative;
}
#news1 .btn_blog{
float:right;
padding:32px 80px 0 0;
}
#news2 .btn_blog{
float:left;
padding:32px 0 0 140px;
}
#news .btn_blog a{
display:block;
position:relative;
}
#news .btn_blog a:before{
position:absolute;
z-index:1;
top:-20px;
left:-84px;
transition:.6s;
}
#news .btn_blog a:after{
position:absolute;
z-index:2;
top:-16px;
left:-100px;
}
#news #news1 .btn_blog a:before{
content:url(../gazou/top/btn_blog1_img.png);
}
#news #news1 .btn_blog a:after{
content:url(../gazou/top/btn_blog1_i.png);
}
#news #news2 .btn_blog a:before{
content:url(../gazou/top/btn_blog2_img.png);
}
#news #news2 .btn_blog a:after{
content:url(../gazou/top/btn_blog2_i.png);
}
#news1 .btn_blog a:hover:before,#news2 .btn_blog a:hover:before{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

/* concept
------------------------------- */
#concept{
background:url(../gazou/top/bg_tit_concept.png) no-repeat center 40px,url(../gazou/top/bg_concept1.png) no-repeat left top,url(../gazou/top/bg_concept2.png) no-repeat right top;
-webkit-background-size:auto,auto 100%,auto 100%;
background-size:auto,auto 100%,auto 100%;
position:relative;
padding:0 0 20px;
}
#concept:after{
content:"";
display:block;
clear:both;
}
#concept h2{
padding:136px 0 48px;
text-align:center;
}
#concept .txt_concept{
width:700px;
margin:0 auto 160px;
line-height:1.8;
font-size:16px;
}
#page_link{
width:780px;
float:left;
position:relative;
}
#page_link:after{
content:"";
display:block;
clear:both;
}
#page_link:after{
content:url(../gazou/top/i_bird1.png);
position:absolute;
left:-100px;
bottom:10px;
}
#page_link li{
width:260px;
float:left;
}
#page_link li a{
display:block;
position:relative;
}
#page_link a:hover img{
opacity:1;
}
#page_link .tit{
position:absolute;
top:-20px;
z-index:1;
left:56px;
}
#page_link a .img{
transition:.6s;
display:block;
}
#page_link a:hover .img{
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#dl_link{
width:200px;
float:right;
position:relative;
}
#dl_link li{
margin:0 0 8px;
}
#dl_link:after{
content:url(../gazou/top/i_bird2.png);
position:absolute;
right:-60px;
top:-100px;
}


/* フォトアルバム
------------------------------- */

#photo{
background:#FFF7BA;
padding:25px 0 130px;
}
#photo h2{
text-align:center;
margin:0 0 16px;
}
#photo .tit_photo, #photo .att{
display:none;
}
#photo ul{
padding:0 0 20px 20px;
}
#photo ul:after{
content:"";
display:block;
clear:both;
}
#photo li{
width:200px;
float:left;
margin:0 50px 0 0;
}
#photo li:last-child{
margin:0;
}
#photo li a{
display:block;
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 3px 3px #B5E2FA;
-webkit-border-radius:50%;
border-radius:50%;
behavior: url("/js/PIE.htc");
position:relative;
cursor:default;
}
#photo li a img{
max-width:300px;
width:300px;
display:block;
position:absolute;
top:0;
left:-25%;
}
#photo li a:hover img{
opacity:1;
}
#photo .btn{
text-align:center;
}