/*iPadのカスタム設定 , デバイス最大値以下に適応*/

@media screen and (max-height: 600px) 
{ /* 高さ600px以下 */
header,#gallery {position:absolute;}
}

@media screen and (max-width: 1024px)
{ /* 背景の木棚の調節 */
.fantasy #contents { margin:0; padding:170px 0 0; background-size:125% auto; }
}

@media screen and (max-width: 960px)
{ /* 左右の余白を解除 */
header, #gallery, #contents, footer,
.fantasy header, .fantasy #gallery, .fantasy footer
 { margin-right:0; padding-right:0; margin-left:0; padding-left:0; }
.fantasy footer { background-position:-40px 100%; }
}


/*iPad iPhoneのカスタム設定,デバイス最大値以下に適応*/
@media screen and (max-device-width: 690px), (max-width: 690px)
{ /* 小タブレット初期設定 */
header,#gallery {position:absolute;}
#gallery { display:none; }
header { height:300px; background-position:50% -9px; }
#headermenu ul {max-width:300px;} 
h1#title a { font-size:24px; }
#contents {width:100%; padding:240px 0 200px; margin:0;}
#side { width:80%; padding:5px 0; float:none; margin:30px auto 0;}
main { width:96%; padding:15px 2% 0; float:none; margin:auto 0;}
main.column1 { float:none; width:96%; padding:40px 2% 0; margin:0; }
footer { margin:-250px 0 0; padding:80px 0 0;}
footer ul { visibility:hidden; }
h2 { margin:auto 10%; font-size:18px;}
h3 { margin:auto 10%; text-align:center; font-size:18px;}
a {font-size:110%;}
dt a { text-align:left; margin:0 0 2em; }
dd { padding: 5px 0px 0.5em;} 
iframe#social1 {max-width:96%;}

.fantasy header { height:138px; background-size:auto 552px; background-position:50% -30px; }
.fantasy #gallery { height:286px; margin:0; padding:0; background-size:auto 552px; background-position:50% -30px; display:inline; }
.fantasy footer { background-size:auto 552px; height:215px; margin:-160px 0 0; padding:0;}
.fantasy #copyright {bottom:0; background-color:rgba(0,0,0,0.6); }
main.grid1 { width:96%; padding:170px 1% 220px; margin:-170px 1% 0; position:relative; }
.dark main { background-color:rgba(0,0,0,0.7);}
.fantasy h1#title a {font-size:22px; margin-left:20%; padding:0; white-space:pre; }
.fantasy main h1 {font-size:20px;}
.fantasy #headermenu ul { display:none; }
.page dl.character {width:100%; font-size:120%;}
.page {padding:2em 1em;}
.fantasy ul#footmenu {display:none;}
#fmenu li a:hover span { display:none; }

.page dt {float:none; margin:10px 0;}
.page dd { padding: 15px 0; margin:0;}
}



@media screen and (max-device-width: 480px), (max-width: 480px)
{ /* スマホ初期設定 */
a {font-size:110%; margin:10px;}
header { background:#fff url(../images/0-back.png) 50% -9px no-repeat; background-size:120% auto; position:fixed;}
#gallery { display:block; background:transparent url(../images/0-back.png) 50% -9px no-repeat; background-size:120% auto; width:100%; padding:0; margin:0; position:fixed;}
#headermenu label {display:inline-block; width:44px; height:23px; padding:33px 0 0; background:rgba(255,255,255,0.7) url(../images/imenu.png) 50% 3px no-repeat; background-size:75% auto; position:fixed; top:15px; right:8px; z-index:3; border-radius:7px; border:1px solid #555; text-align:center;}
#headermenu input:checked ~ label {background:rgba(255,255,255,0.5) url(../images/imenu.png) 50% 3px no-repeat; background-size:75% auto; }
#headermenu label:after {content:"menu"; font-size:12px; font-weight:bold; color:#000; font-family:serif;}
#headermenu label:hover { cursor: pointer; }
.fantasy #headermenu label { width:30px; height:18px; padding:23px 0 0; background:rgba(255,255,255,0.8) url(../images/imenu2.png) 50% 3px no-repeat; background-size:75% auto; text-shadow:none;}
.fantasy #headermenu label:after {font-size:9px;}
.fantasy #headermenu input:checked ~ label { background:rgba(255,255,255,0.5) url(../images/imenu2.png) 50% 3px no-repeat; background-size:75% auto; text-shadow:none;}

#headermenu ul { width:80%; max-width:90%; padding:15px 9% 20px; margin:28px auto 0; border:4px double #590; border-radius:16px; background-color:rgba(255,255,255,0.8); display:none; position:fixed;  top:50px; }
#headermenu input:checked ~ ul:before {content:"メニューアイコンをタップしてね(' '*)♪"; display:inline-block; width:100%; text-align:center; line-height:30px; margin:0 auto; position:relative; top:0; z-index:1;}
#headermenu input:checked ~ ul{display:block;}

#headermenu li { width:31%; }
#headermenu li a { display:inline-block; width:80%; margin-bottom:20px; }
#headermenu li a:after { position:relative; top:30px; }


#contents { padding:75px 0 0; margin:0; }
main {padding:0 2% 0;}
h1#title a { margin-top:8px; font-size:18px; white-space:pre; }
h1#title a span { margin:0 5px 0 0;}
main h1, main h2 {font-size:110%;}
main *{max-width:100%; }

footer { background:transparent url(../images/0-back.png) 50% 100% no-repeat; background-size:120% auto; margin:0; padding:0;}
footer ul { display:none; }
#copyright {bottom:100px; font-size:80%;}
#copyright a {margin:0;}

.fantasy header { background:#000 url(../images/0u-back.png) 60% -9px no-repeat; background-size:120% auto; position:fixed;}
.fantasy #gallery { display:block; background:transparent url(../images/0u-back.png) 60% -9px no-repeat; background-size:120% auto; padding:0; margin:0; position:fixed;}
.fantasy footer { background:transparent url(../images/0u-back.png) -20px 117% no-repeat; background-size:110% auto; margin:-88px 0 0; padding:0;}
.fantasy main {padding:100px 1%;}
.fantasy h1#title a {font-size:15px; margin:8px 0 0 6%; padding:0;}
.fantasy #copyright {bottom:10px; font-size:80%;}

#fmenu ul { width:98%; margin:0; padding:0; display:inline-block; z-index:2; border-radius:16px; }
#fmenu li { width:99%; margin:0; padding:0.5%;}
#fmenu li a { width:99%; margin:0.5%; padding:8px 0; font-size:110%;}
#fmenu li a {background: #383932 url(../images/bg_arrow.gif) 10px 50% no-repeat; }
}


@media screen and (max-device-width: 480px), (max-width: 480px){
header { height:118px; }
#gallery { height:208px; }
footer { height:184px;}
.fantasy header { height:103px;} #fmenu ul{ top:103px; }
.fantasy #gallery { height:214px;}
.fantasy footer { height:158px;}
}

@media screen and (max-device-width: 360px), (max-width: 360px){ 
header { height:82px;}
#gallery {height:162px;}
footer { height:140px;}
.fantasy header { height:88px;} #fmenu ul{ top:88px; }
.fantasy #gallery { height:177px;}

}

@media screen and (max-device-width: 320px), (max-width: 320px){
header { height:73px;}
#gallery {height:142px;}
footer { height:130px;}
.fantasy header { height:77px;} #fmenu ul{ top:77px; }
.fantasy #gallery { height:156px;}
}