@charset "UTF-8";
html{
}
body{
margin: 0;
padding: 0;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, figure, input, textarea, p, blockquote, table, th, td, address{
margin: 0;
padding: 0;
color: #000;
color: #333;
font: 99% "新ゴ M","Shin Go Medium","Helvetica Neue","Helvetica","Hiragino Kaku Gothic Pro W3","ms pgothic",hirakakupro-w3,Helvetica,Meiryo,Arial,sans-serif;
font-style: normal;
line-height: 1.5;
}
select,
input,
button,
textarea{
font-size: 99%;
}
table{
border-spacing: 0;
border-collapse: collapse;
font: 100%;
font-size: inherit;
}
textarea,
input{
margin: 0;
padding: 0;
}
caption,
th{
text-align: left;
}
td,
th{
vertical-align: top;
}
fieldset,
img,
abbr{
border: none;
}
li{
list-style-type: none;
}
hr{
display: none;
}
strong{
font-weight: normal;
}
body{
-webkit-text-size-adjust: 100%;
}
a,
a:link{
color: #003399;
}
a:visited{
color: #003399;
}
a:hover{
color: #0092d7;
}
img{
max-width: 100%;
}
.alpha{
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
transition-duration: .3s;
}
.alpha:hover{
opacity: .6;
-ms-filter: "alpha(opacity=60)";
filter: alpha(opacity=60);
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
transition-duration: .3s;
}
.clearfix:before,
.clearfix:after{
display: block;
overflow: hidden;
content: "";
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
#wrap h2,
#wrap h3,
#wrap h4,
#wrap li{
line-height: 1;
}
#wrap img{
vertical-align: top;
}
/*---------------------------------*/
.pc{
display: block;
}
.sp{
display: none;
}
.jasrac{
margin-top: 10px;
text-align: right;
}
#logo{
background: url(../images/bg-header.gif) repeat-x;
}
#logoInner{
margin: 0 auto;
width: 960px;
text-align: left;
} 
#logoInner img{
vertical-align: middle;
}
#logoInner span{
color: #585858;
vertical-align: middle;
font-weight: normal;
font-size: 12px;
}
/* thumbnail */
.thumbnail{
position: relative;
}
.thumbnail a:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: url(../images/icon-play.png) no-repeat;
content: "";
}
.thumbnail a:hover img:not(.new){
opacity: .7;
}
/* layout */
#headline{
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
#headline .inner{
position: relative;
}
#headline h1{
padding: 22px 230px 22px 0px;
font-size: 22px;
}
#headline .support{
position: absolute;
top: 0;
right: 0;
padding-top: 17px;
width: 225px;
text-align: right;
}
#headline .print-btn{
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 5px 0 0 10px;
padding: 5px 25px;
width: 135px;
border: 1px solid #039;
border-radius: 30px;
color: #039 !important;
text-align: center;
text-decoration: none !important;
font-size: 12px;
}
#headline .print-btn:hover{
text-decoration: none !important;
opacity: .7;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
#headline .print-btn img{
margin-right: 10px;
vertical-align: middle;
}
#main h2{
position: relative;
box-sizing: border-box;
width: 100%;
text-align: center;
}
#main h2 img{
margin: 0 auto;
}
#main .sp-slide{
position: absolute;
overflow: hidden;
max-width: 980px;
max-height: 551px;
}
#main .sp-slide .new{
position: absolute;
}
#main .sp-slide img:not(.new){
width: 100%;
}
#main .sp-slide .another{
position: absolute;
top: 1.81%;
right: 0;
z-index: 1;
width: 22.86% !important;
}
.sp-slide p.sp-layer{
background: rgba(5,12,68,.6);
color: #fff;
text-align: center;
line-height: 1.5;
transform: none;
}
#main .sp-slide p.sp-layer span{
display: block;
font-weight: bold;
}
#main .sp-button{
border: none;
background: #666;
}
#main .sp-selected-button{
background: #0f3693;
}
#cboxOverlay{
background: #000!important;
}
#family{
position: relative;
background: #f3f8fd;
}
#family h2{
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
#family ul li{
float: left;
box-sizing: border-box;
margin-bottom: 42px;
}
#family ul li{
text-align: center;
}
#family ul li h3{
margin: 20px 0px;
}
#family ul li p{
text-align: left;
}
#family .inner > p{
clear: both;
font-size: 13px;
}
#making ul{
text-align: center;
}
#sns{
text-align: center;
}
#headline ul li,
#sns ul li{
display: inline-block;
}
ul li.facebook{
margin-right: 10px;
width: 90px;
}
ul li.twitter{
width: 100px
}
#archives{
border-bottom: 1px solid #c1c1c1;
background: #f6f6f6;
}
#archives h2{
margin-bottom: 40px;
text-align: center;
}
#archives ul li{
float: left;
background: #fff;
}
#archives ul li .description h3{
font-weight: bold;
}
#snsArea{
padding: 30px 0 0;
border-top: 1px solid #c1c1c1;
text-align: center;
}
#snsAreaInner{
margin: 0 auto;
max-width: 960px;
width: 100%;
text-align: right;
}
#snsArea ul{
margin-bottom: 25px;
}
#snsArea li{
display: inline;
margin-right: 8px;
text-align: right;
}
#snsArea p{
height: 19px;
}
footer{
padding: 10px 0;
background: #363636;
text-align: center;
}
footer #copy{
color: #797979;
font-size: 10px;
}
#cboxContent{
margin-top: 0
}
#cboxClose:before{
position: absolute;
top: -14px;
right: 20px;
display: block;
width: 2px;
height: 30px;
background: #fff;
content: "";
transform: rotate(45deg);
}
#cboxClose:after{
position: absolute;
top: 0px;
right: 6px;
display: block;
width: 30px;
height: 2px;
background: #fff;
content: "";
transform: rotate(45deg);
}
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose{
background: none;
}
#colorbox,
#cboxOverlay,
#cboxWrapper{
overflow: visible;
}
@media screen and (min-width: 769px) , print{
    .inner{
    margin: 0 auto;
    max-width: 980px;
    }
    #headline ul{
    padding-top: 10px;
    }
    #main h2{
    padding: 60px 0;
    }
    #main h2 img{
    max-width: 61%;
    }
    #main h2 .img01,
    #main h2 .img02{
    position: absolute;
    bottom: 0;
    content: "";
    }
    #main h2 .img01{
    left: 55px;
    max-width: 11%;
    }
    #main h2 .img02{
    right: 60px;
    max-width: 13%;
    }
    #main .thumbnail a:after{
    width: 40px;
    height: 60px;
    background-size: 40px;
    }
    #main .thumbnail .new{
    top: 20px;
    left: 20px;
    }
    .sp-slide p.sp-layer{
    padding: 18px;
    font-size: 0.9em;
    }
    .sp-slide p.sp-layer span{
    margin-bottom: 8px;
    font-size: 1.3em;
    }
    .sp-horizontal .sp-arrows{
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 1020px;
    height: 0;
    }
    .sp-horizontal .sp-previous-arrow{
    left: 0px;
    }
    .sp-horizontal .sp-next-arrow,
    .sp-horizontal.sp-rtl .sp-previous-arrow{
    right: 0px;
    }
    .sp-next-arrow:after,
    .sp-next-arrow:before,
    .sp-previous-arrow:after,
    .sp-previous-arrow:before{
    width: 35px;
    height: 35px;
    background-color: transparent;
    transform: none;
    }
    .sp-previous-arrow:before{
    background: url(../images/btn-arrow-left.png) no-repeat;
    }
    .sp-next-arrow:before{
    background: url(../images/btn-arrow-left.png) no-repeat;
    }
    .sp-buttons{
    margin-top: 30px;
    margin-right: 10px;
    }
    #family{
    margin-top: 111px;
    padding: 96px 0 76px;
    }
    #family h2{
    top: -75px;
    width: 453px;
    }
    #family ul li{
    padding: 0 30px;
    width: 33.3%;
    }
    #family .inner > p{
    margin-left: 30px;
    }
    #making{
    margin-bottom: 80px;
    padding-top: 80px;
    }
    #making ul li{
    display: inline-block;
    margin: 0 auto;
    max-width: 480px;
    width: 49%;
    }
    #making ul li:last-child{
    margin-left: 10px;
    }
    #making ul li h2{
    margin-bottom: 40px;
    }
    #making ul li h2 img{
    width: 440px;
    }
    #making ul li .thumbnail a:after{
    width: 30px;
    height: 46px;
    background-size: 30px;
    }
    #sns{
    padding-bottom: 80px;
    }
    #archives{
    padding: 80px 0px;
    }
    #archives ul li{
    max-width: 33.2%;
    width: 326px;
    }
    #archives ul li:not(:nth-child(3n)){
    border-right: 1px solid #c1c1c1;
    }
    #archives ul li .thumbnail a:after{
    width: 22px;
    height: 35px;
    background-size: 22px;
    }
    #archives ul li .description{
    padding: 30px;
    }
    #archives ul li .description h3{
    margin-bottom: 30px;
    }
}
@media screen and (max-width: 980px){
    .sp-slide p.sp-layer{
    bottom: 6px!important;
    transform: none!important;
    }
}
@media screen and (max-width: 768px){
    .pc{
    display: none;
    }
    .sp{
    display: block;
    }
    .jasrac img{
    margin-right: 10px;
    width: 40%;
    }
    #logoInner{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    }
    #logoInner img{
    width: 130px;
    vertical-align: middle;
    }
    #logoInner span{
    display: none;
    }
    #headline h1{
    padding: 15px 20px;
    }
    #headline .support{
    right: 20PX;
    }
    #headline .sns-btn{
    display: inline-block;
    margin: 5px 0;
    color: #039;
    vertical-align: middle;
    }
    #headline .sns-btn li{
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
    }
    #headline .sns-btn dd a:hover{
    text-decoration: none !important;
    opacity: .7;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    }
    #main h2{
    padding: 30px 25px;
    }
    #main .thumbnail a:after{
    width: 20px;
    height: 30px;
    background-size: 20px;
    }
    #main .thumbnail .new{
    top: 10px;
    left: 10px;
    max-width: 95px;
    width: 13%;
    }
    .sp-slide p.sp-layer{
    padding: 8px 7px;
    font-size: 0.7em;
    }
    .sp-slide p.sp-layer span{
    margin-bottom: 4px;
    font-size: 1.1em;
    }
    .sp-horizontal .sp-arrows{
    display: none;
    }
    .sp-buttons{
    margin-top: 10px;
    }
    .sp-button{
    margin-right: 8px;
    width: 7px;
    height: 7px;
    }
    #family{
    margin-top: 55px;
    padding: 45px 0 40px;
    }
    #family h2{
    top: -39px;
    width: 225px;
    }
    #family ul li{
    padding: 0 20px;
    width: 50%;
    }
    #family ul li h3{
    margin: 8px auto;
    }
    #family ul li h3 img{
    max-height: 30px;
    }
    #family .inner > p{
    margin-left: 15px;
    }
    #making{
    padding: 40px 20px 0;
    }
    #making ul li{
    margin-bottom: 40px;
    }
    #making ul li h2{
    margin: 0 auto 20px;
    width: 90%;
    }
    #making ul li .thumbnail a:after{
    width: 20px;
    height: 40px;
    background-size: 20px;
    }
    #sns{
    padding-bottom: 40px;
    }
    #archives{
    padding: 40px 0px;
    }
    #archives h2 img{
    max-width: 140px;
    }
    #archives ul li{
    box-sizing: border-box;
    width: 50%;
    }
    #archives ul li:not(:nth-child(even)){
    border-right: 1px solid #c1c1c1;
    }
    #archives ul li .thumbnail a:after{
    width: 12px;
    height: 17px;
    background-size: 12px;
    }
    #archives ul li img{
    width: 100%;
    }
    #archives ul li .description{
    padding: 15px;
    }
    #archives ul li .description h3{
    margin-bottom: 10px;
    }
    #archives ul li .description p{
    font-size: 0.9em;
    }
    #btmbnr img{
    max-width: 540px;
    width: 90%;
    }
    #snsArea{
    padding: 30px 0 0;
    text-align: center;
    }
    #snsAreaInner{
    text-align: center;
    }
    #snsArea ul{
    margin-bottom: 25px;
    margin-left: 8px;
    }
    #snsArea li{
    display: inline;
    margin-right: 8px;
    text-align: center;
    }
    #snsArea p{
    height: 19px;
    }
    footer{
    margin-top: 0;
    text-align: center;
    }
}
@media print{
    .sp-mask{
    width: 100%!important;
    }
    .sp-slides{
    transform: none!important;
    }
    .sp-slide{
    position: static!important;
    display: none!important;
    width: 100%!important;
    }
    .sp-selected{
    display: block!important;
    }
}