@charset "UTF-8";

.contents{
padding-top:50px;
}


h1{
text-align:center;
text-indent:-9999px;
margin:0 auto 50px;
width:100%;
height:290px;
background-image:url(../img/title_02.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center -10px;
}

.navigation{
list-style:none;
margin:35px 0 0 0;
padding:0;
overflow:hidden; /*下部の隙間を消す*/
font-size:0.1em; /*下部の隙間を消す*/
line-height:0; /*下部の隙間を消す*/
zoom:1;
}
.navigation:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.navigation li a{
float:left;
height:50px;
margin-right:4.625%;
display:block;
text-indent:-9999px;
}
.navigation li.photo a{
width:10.625%;
background:url(../common/img/navi_01_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.photo a:hover{
background:url(../common/img/navi_01_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.video a{
width:9.75%;
background:url(../common/img/navi_02_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.video a:hover{
background:url(../common/img/navi_02_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.work a{
width:9.375%;
background:url(../common/img/navi_03_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.work a:hover{
background:url(../common/img/navi_03_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.about a{
width:10.75%;
background:url(../common/img/navi_04_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.about a:hover{
background:url(../common/img/navi_04_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.info a{
width:7.375%;
background:url(../common/img/navi_05_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.info a:hover{
background:url(../common/img/navi_05_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.diary a{
width:9.625%;
background:url(../common/img/navi_06_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.diary a:hover{
background:url(../common/img/navi_06_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
.navigation li.contact a{
width:14.75%;
background:url(../common/img/navi_07_o.png) no-repeat;
background-size:contain;
background-position:bottom;
margin-right:0;
}
.navigation li.contact a:hover{
background:url(../common/img/navi_07_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}


@media screen and (min-width:768px) and (max-width:799px) {
.contents{
padding-top:46px;
padding-bottom:46px;
}
.sub-title{
height:28px;
margin-bottom:17px;
}
h1{
height:120px;
margin-bottom:45px;
}
}


@media screen and (min-width:480px) and (max-width:767px) {
.contents{
padding-top:29px;
padding-bottom:29px;
}
.sub-title{
height:18px;
margin-bottom:11px;
}
h1{
height:130px;
margin-bottom:28px;
}

.navigation{
background:url(../img/bg_navi.png) no-repeat;
}
.navigation li.photo a{
width:25%;
}
.navigation li.video a{
width:25%;
}
.navigation li.work a{
width:25%;
}
.navigation li.about a{
width:25%;
}
.navigation li.info a{
width:25%;
}
.navigation li.diary a{
width:25%;
}
.navigation li.contact a{
width:25%;
}
}


@media screen and (min-width:320px) and (max-width:479px) {
.contents{
padding-top:18px;
padding-bottom:18px;
}
.sub-title{
height:13px;
margin-bottom:7px;
}
h1{
height:130px;
margin-bottom:25px;
}

.navigation{
background:url(../img/bg_navi_s.png) no-repeat;
}
.navigation li.photo a{
width:33%;
}
.navigation li.video a{
width:33%;
}
.navigation li.work a{
width:34%;
}
.navigation li.about a{
width:33%;
}
.navigation li.info a{
width:33%;
}
.navigation li.diary a{
width:34%;
}
.navigation li.contact a{
width:33%;
}
}


@media screen and (min-width:320px) and (max-width:767px) {
.navigation{
background-size:100% 100%;
}
.navigation li a{
margin-right:0;
}
.navigation li.photo a{
background:url(../common/img/navi_s_01_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.photo a:hover{
background:url(../common/img/navi_s_01_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.video a{
background:url(../common/img/navi_s_02_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.video a:hover{
background:url(../common/img/navi_s_02_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.work a{
background:url(../common/img/navi_s_03_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.work a:hover{
background:url(../common/img/navi_s_03_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.about a{
background:url(../common/img/navi_s_04_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.about a:hover{
background:url(../common/img/navi_s_04_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.info a{
background:url(../common/img/navi_s_05_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.info a:hover{
background:url(../common/img/navi_s_05_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.diary a{
background:url(../common/img/navi_s_06_o.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.diary a:hover{
background:url(../common/img/navi_s_06_h.png) no-repeat;
background-size:contain;
background-position:center;
}
.navigation li.contact a{
background:url(../common/img/navi_s_07_o.png) no-repeat;
background-size:contain;
background-position:center;
margin-right:0;
}
.navigation li.contact a:hover{
background:url(../common/img/navi_s_07_h.png) no-repeat;
background-size:contain;
background-position:center;
}
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


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

#slide-area{
width:135%;
}

#slide-area img{
width:100%;
height:auto;
}

}

#slide-area,
#slide-area img{
width:100%;
max-width:100%;
height:auto;
}