*{
margin:0;
padding:0;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type:none;
}
.responsive{
max-width:100%;
}
#bg{
position:fixed;
width:100%;
height:100%;
background:url(images/bg.png) 50% 0% #000;
z-index:0;
}
#container{
position:relative;
z-index:1;
}

#head{
margin:0 auto;
width:90%;
}

#catch{
margin-top:10px;
}
#catch ul{
margin:0 auto;
width:90%;
}
#catch li:nth-child(2){
margin-top:10px;
}

.title{
margin:20px auto 0 auto;
width:90%;
}

#sotei ul{
margin:20px auto 0 auto;
display:table;
width:90%;
}
#sotei li{
display:table-cell;
vertical-align:bottom;
text-align:center;
}
#sotei .caption{
margin:-2px 5% 0 0;
text-align:right;
font-size:10px;
color:#fff;
}

#info{
margin-top:20px;
}
#info > ul{
display:block;
width: 97%;
}
#info > ul > li{
display:block;
}
#info > ul > li > ul{
display:table;
}
#info > ul > li > ul > li{
display:table-cell;
vertical-align:top;
}
#info > ul > li > ul > li:nth-child(1){
width:35%;
}
#info > ul > li > ul > li:nth-child(2){
padding-top:15px;
position:relative;
width:65%;
}
#info .midashi{
padding:2px 10px;
font-size:16px;
line-height:1.4;
color:#fff;
background-color:#b6a012;
}
#info .furigana{
float:right;
width:30%;
}
#info p{
margin:10px 0 0 5px;
font-size:14px;
line-height:1.6;
color:#fff;
}
#info .note{
font-size:12px;
}
#info .btn{
position:absolute;
bottom:10%;
width:70%;
}

#story{
margin-top:20px;
text-align:center;
font-size:4.5vw;
line-height:1.6;
color:#ae8a1c;
}
#story .btn{
margin:20px auto 0 auto;
width:60%;
}

#tvcm{
margin:40px auto 0 auto;
width:90%;
}
#tvcm .midashi{
padding:2px 10px;
text-align:center;
font-size:16px;
line-height:1.4;
color:#fff;
background-color:#b6a012;
}

#profile{
margin:40px auto 0 auto;
border-radius:20px;
padding:20px 5%;
width:80%;
background-color:#FFF100;
}
#profile .photo{
margin:20px auto 0 auto;
width:70%;
text-align:center;
}
#profile .namae{
margin-top:10px;
text-align:center;
font-size:22px;
line-height:1.4;
color:#CD6715;
}
#profile p{
margin-top:5px;
text-align:justify;
font-size:15px;
line-height:1.4;
color:#EC6800;
}

#message{
margin-top:20px;
padding-bottom:40px;
}
#message p{
margin-top:10px;
text-align:center;
font-size: 4vw;
line-height:1.8;
color:#fff;
}
#message .btn{
margin:20px auto 0 auto;
width:80%;
}

#footer{
padding:20px 0;
text-align:center;
font-size:10px;
line-height:1.4;
color:#b69100;
background-color:#fff;
}
#footer div:nth-child(1){
margin:10px auto 0 auto;
width:80%;
}
#footer li:nth-child(2){
margin-top:10px;
}
#footer div:nth-child(2){
margin:20px auto 0 auto;
width:30%;
}
#footer div:nth-child(3){
margin:30px auto 0 auto;
}

.pc{
display:none;
}


@media (min-width: 768px) {
#content{
margin:0 auto;
width:1000px;
}

#head{
width:100%;
text-align:center;
}

#catch{
margin-top:20px;
}
#catch ul{
display:table;
width:820px;
}
#catch li{
padding:0 10px;
display:table-cell;
vertical-align:middle;
}
#catch li:nth-child(1){
width:42%;
}
#catch li:nth-child(2){
width:58%;
}

#info > ul > li > ul > li:nth-child(1){
display:none;
}
#info > ul > li > ul > li:nth-child(2){
width:100%;
}
#info > ul{
margin-top:10px;
display:table;
table-layout:fixed;
width: 100%;
}
#info > ul > li{
display:table-cell;
vertical-align:top;
text-align:center;
}
#info > ul > li > ul{
width: 100%;
}
#info > ul > li:nth-child(1) > ul > li:nth-child(2){
padding:0 40px 0 80px;
}
#info > ul > li:nth-child(2) > ul > li:nth-child(2){
padding:0 80px 0 40px;
}
#info .midashi{
padding:4px 10px;
font-size:20px;
}
#info > ul > li:nth-child(2) > ul > li:nth-child(2) > .midashi{
padding: 4px 10px 4px 84px;
}
#info .furigana{
width:84px;
}
#info p{
font-size:16px;
}
#info .note{
font-size:14px;
}
#info .btn{
margin-top:20px;
position:relative;
width:100%;
}

#tvcm .midashi{
padding:4px 10px;
font-size:20px;
}

#story{
padding:0 80px;
text-align:justify;
font-size:18px;
line-height:1.6;
}
#story .btn{
width:100%;
text-align:center;
}

#profile ul{
display:table;
table-layout:fixed;
width:100%;
}
#profile li{
padding:0 40px;
display:table-cell;
vertical-align:top;
}
#profile li:nth-child(2){
display:none;
}
#message .midashi img{
margin:0 auto;
}
#message p{
font-size: 18px;
}
#message .btn{
width:600px;
}

#footer div:nth-child(2){
width:108px;
}
#footer ul{
margin:0 auto;
display:table;
table-layout:fixed;
width:620px;
}
#footer li{
padding:0 5px;
display:table-cell;
vertical-align:top;
}

.mobile{
display:none;
}
.pc{
display:block;
}
}