/* 汎用 */
.h1_space { height:54px; }
@media screen and (min-width: 501px){ .h1_space { height:68px; } }
@media screen and (min-width: 601px){ .h1_space { height:90px; } }
.pb20 { padding-bottom: 5px; }.pb50 { padding-bottom:10px; }.pb100 { padding-bottom:20px; }
.mb20 { margin-bottom : 5px; }.mb50 { margin-bottom :10px; }.mb100 { margin-bottom :20px; }
@media screen and (min-width: 601px){
.pb20 { padding-bottom: 20px; }.pb50 { padding-bottom: 50px; }.pb100 { padding-bottom:100px; }
.mb20 { margin-bottom : 20px; }.mb50 { margin-bottom : 50px; }.mb100 { margin-bottom :100px; }
}
.sp_80{font-size:80%}
@media screen and (min-width: 601px){.sp_80{font-size:100%}}
/* index[物語の舞台] */
#stage {position:relative;margin-bottom:20px;}
@media screen and (min-width: 601px){#stage{margin-bottom:40px;}}
/*
.stage_introduction { padding:0 1%;margin:0 auto 10px auto;border:0px solid red;text-align:center; }
@media screen and (min-width: 601px){ .stage_introduction{ padding:0; margin:0 auto 20px auto;} }
.stage_introduction p {
padding:0 1em;
font-size:11px;
font-family:"hannari", serif;
// font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'meiryo','Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
color:#342820;
}
@media screen and (min-width: 601px){ .stage_introduction p{ font-size:16px; } }
*/
.stage_introduction{background-image:-webkit-linear-gradient(transparent 21px, rgba(55,55,55,0.3) 22px);background-image:linear-gradient(transparent 21px, rgba(55,55,55,0.3) 22px);background-size:100% 22px;width:90%;margin:auto}
.stage_introduction p{color:#342820;line-height:22px;font-size:11px;margin:22px 0}
.stage_introduction p:first-of-type{margin:10px 0 22px 0}
.stage_introduction p:first-letter{font-size:15.4px;line-height:15.4px;display:inline-block;margin-right:1px}
@media screen and (min-width: 601px){
.stage_introduction{background-image:-webkit-linear-gradient(transparent 27px, rgba(55,55,55,0.3) 28px);background-image:linear-gradient(transparent 27px, rgba(55,55,55,0.3) 28px);background-size:100% 28px;}
.stage_introduction p{line-height:28px;font-size:14px;margin:28px 0}
.stage_introduction p:first-of-type{margin:10px 0 28px 0}
.stage_introduction p:first-letter{font-size:19.6px;line-height:19.6px;}
}
.stage_building { padding:0 1%;border:0px solid red;text-align:center; }
@media screen and (min-width: 601px){ .stage_building{ padding:0; } }
.stage_building img { width:28%; height:auto; margin:10px 1%; }
@media screen and (min-width: 601px){
.stage_building img { width:22%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: scale(1); }
.stage_building img:hover{ opacity:1.0; cursor:pointer; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: scale(1.2); }
}
.stage_building p { font-size:11px;padding:0 1em;font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'meiryo','Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;color:#342820;}
.stage_building p:last-child { font-size:10px;}
@media screen and (min-width: 601px){
.stage_building p { font-size:16px; }
.stage_building p:last-child{ font-size:14px; }
}
/* index[登場人物] charactor[登場人物＆物語選択] */
#character {position:relative;margin-bottom:20px;}
@media screen and (min-width: 601px){#character{margin-bottom:40px;}}
.characterlink_wrap{position:relative;width:100%;border:0px solid red;background:url(../image/index/charalink2.png);background-position:left top;background-size:100% auto;background-repeat:no-repeat}
.characterlink_wrap::after{content:"";display:block;padding-top:64.1%}
.characterlink{position:absolute;top:0;left:0;bottom:0;right:0;border:0px solid red;text-align:center;background:url(../image/index/charalink.png);background-position:left top;background-size:100% auto;background-repeat:no-repeat;opacity:1;-webkit-transition:all 0.2s 0s ease;transition:all 0.2s 0s ease}
.characterlink::after{content:"";display:block;padding-top:66.1%}
@media screen and (min-width: 601px){.characterlink:hover{opacity:0;-webkit-transition:all 0.2s 0s ease;transition:all 0.2s 0s ease}}
.character_list { padding:0 1%;border:0px solid red;text-align:center; }
@media screen and (min-width: 601px){ .character_list{ padding:0; } }
.character_list p { font-size:11px;padding:0 1em;font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'meiryo','Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;color:#342820;}
@media screen and (min-width: 601px){ .character_list p{ font-size:16px; } }
/* index[「北野異人館ラブストリート」開発スタッフ] atogaki[あとがき] policy[異人館実名使用にあたって] */
#atogaki {position:relative;margin-bottom:20px;}
@media screen and (min-width: 601px){#atogaki{margin-bottom:40px;}}
.atogakilink_wrap{position:relative;width:100%;margin:0 auto;border:0px solid red;background:url(../image/index/atogakilink.png);background-position:left top;background-size:100% auto;background-repeat:no-repeat}
.atogakilink_wrap::after{content:"";display:block;padding-top:35%}
.atogakilink{position:absolute;top:0;left:0;bottom:0;right:0;border:0px solid red;text-align:center;background:url(../image/index/atogakilink2.png);background-position:left top;background-size:100% auto;background-repeat:no-repeat;opacity:0;-webkit-transition:all 0.2s 0s ease;transition:all 0.2s 0s ease}
.atogakilink::after{content:"";display:block;padding-top:35%}
@media screen and (min-width: 601px){.atogakilink:hover{opacity:1;-webkit-transition:all 0.2s 0s ease;transition:all 0.2s 0s ease}}
.atogaki_cont {position:relative;padding:10px 4% 40px 4%}
@media screen and (min-width: 601px){ .atogaki_cont{padding:20px 8% 60px 8%} }
table.staff{width:100%;border:0px solid gray;border-collapse:collapse}
table.staff tr{border-bottom:1px solid rgba(255,255,255,0.3)}
table.staff tr:nth-child(even){background-color:rgba(184,160,140,0.1)}
table.staff tr td{line-height:200%;color:#342820;vertical-align:top;padding:5px 0 5px 0em;font-size:11px}
table.staff tr td:first-child{padding:5px 0 5px 1.5em;width:13em;border:0px solid red}
table.staff tr td:nth-child(2){width:2em}
table.staff tr td:not(:first-child){border:0px solid green;vertical-align:top}
@media screen and (min-width: 601px){
table.staff tr td{font-size:14px}
table.staff tr td:first-child{padding:5px 0 5px 1.5em;width:17.5em;border:0px solid red}
}
.atogaki_cont h2{font-size:4.5vw}
@media screen and (min-width: 601px){.atogaki_cont h2{font-size:18px}}
.atogaki_text{background-image:-webkit-linear-gradient(transparent 21px, rgba(55,55,55,0.3) 22px);background-image:linear-gradient(transparent 21px, rgba(55,55,55,0.3) 22px);background-size:100% 22px;width:90%;margin:auto}
.atogaki_text p{color:#342820;line-height:22px;font-size:11px;margin:22px 0}
.atogaki_text p:first-of-type{margin:10px 0 22px 0}
.atogaki_text p:first-letter{font-size:15.4px;line-height:15.4px;display:inline-block;margin-right:1px}
.atogaki_text p.signature{text-align:right;margin-top:44px}
.atogaki_text p.signature:first-letter{font-size:11px;line-height:11px}
.atogaki_text p.normal:first-letter{font-size:11px;line-height:11px}
.atogaki_text p.kome{margin:0;margin-left:2em}
@media screen and (min-width: 601px){.atogaki_text{background-image:-webkit-linear-gradient(transparent 27px, rgba(55,55,55,0.3) 28px);background-image:linear-gradient(transparent 27px, rgba(55,55,55,0.3) 28px);background-size:100% 28px;width:90%;margin:auto}.atogaki_text p{color:#342820;line-height:28px;font-size:14px;margin:28px 0}.atogaki_text p:first-of-type{margin:10px 0 28px 0}.atogaki_text p:first-letter{font-size:19.6px;line-height:19.6px;display:inline-block;margin-right:1px}.atogaki_text p.signature{text-align:right;margin-top:56px}.atogaki_text p.signature:first-letter{font-size:14px;line-height:14px}.atogaki_text p.normal:first-letter{font-size:14px;line-height:14px}}
/* gallery[ギャラリー] */
#gallery {position:relative;margin-bottom:20px;}
@media screen and (min-width: 601px){#gallery{margin-bottom:40px;}}
#gallery_thumb{position:relative;width:100%;height:auto;z-index:100;margin:2px 0;background:-webkit-linear-gradient(left, rgba(10,61,155,0.5) 0%, rgba(10,61,155,0.7) 15%, rgba(9,54,146,0.8) 20%, rgba(8,40,127,0.8) 30%, rgba(8,40,127,0.8) 70%, rgba(9,54,146,0.8) 80%, rgba(10,61,155,0.7) 85%, rgba(10,61,155,0.5) 100%);background:linear-gradient(to right, rgba(10,61,155,0.5) 0%, rgba(10,61,155,0.7) 15%, rgba(9,54,146,0.8) 20%, rgba(8,40,127,0.8) 30%, rgba(8,40,127,0.8) 70%, rgba(9,54,146,0.8) 80%, rgba(10,61,155,0.7) 85%, rgba(10,61,155,0.5) 100%);}
#gallery_thumb::before,#gallery_thumb::after{content:"";position:absolute;left:0;height:2px;width:100%;background:-webkit-linear-gradient(left, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);background:linear-gradient(to right, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);box-shadow:0 0 2px 0 rgba(0,0,0,0.5)}
#gallery_thumb::before{top:-2px}
#gallery_thumb::after{bottom:-2px}
/* manual[操作説明] */
#manual {position:relative;margin-bottom:20px;}
@media screen and (min-width: 601px){#manual{margin-bottom:40px;}}
.manual_cont { width:90%; margin:auto; }
//.manual_cont {position:relative;padding:0 4%}
//@media screen and (min-width: 601px){ .manual_cont{padding:0 8%} }
.manual_cont img { width: 100%; margin: 0; 0; }
/* charactor[登場人物＆物語選択] */
#charactor_select { width: 100%; margin: 0; padding: 40px 0 20px 0; }
@media screen and (min-width: 601px){ #charactor_select { padding: 40px 0 40px 0; } }
#charactor_select a { text-decoration: none; }
.cs_box { position: relative; height: auto; width: 26%; margin: 0% -6% 2% 8%; display: inline-block; box-sizing: border-box; }
@media screen and (min-width: 601px){ .cs_box { width: 20%; margin: 3% -8% 2% 8%; } }
.cs_1 { transform: rotate( -5deg ); }
.cs_2 { transform: rotate( 10deg ); }
.cs_3 { transform: rotate( -7deg ); }
.cs_4 { transform: rotate( 10deg ); }
@media screen and (min-width: 601px){
.cs_1:hover { z-index:199; transform: rotate( -15deg ) scale(1.2); }
.cs_2:hover { z-index:199; transform: rotate( 20deg ) scale(1.2); }
.cs_3:hover { z-index:199; transform: rotate( -17deg ) scale(1.2); }
.cs_4:hover { z-index:199; transform: rotate( 20deg ) scale(1.2); }
}
.cs_photo { width: 100%; }
.cs_photo2 { width: 100%; filter:grayscale(100%); }
.cs_new { position: absolute; width: 50%; top: -10%; right: -10%; }
.chara_list{ border:0px solid red; position:relative; width:100%; padding-top:663px; margin:auto; overflow:hidden; }
.chara_list_pn { position:absolute; width: 90%; height: 40%; top:20px; left:0; right:0; margin:0 auto; z-index:4; }
@media screen and (min-width: 601px){ .chara_list_pn{ width: 60%; height: 40%; } }
.chara_list_bg { position:absolute; width: 80%; height:100%; top: 0; left:0; right:0; margin:0 auto; z-index:1; }
@media screen and (min-width: 601px){ .chara_list_bg{ width:100%; height: 90%; } }
.chara_list_bg::after{ content:""; position:absolute; width:100%; height:100%; top:0; left:0; z-index:0; }
.chara_list_chara { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; overflow:hidden; }
.chara_list_chara::after{ content:""; position:absolute; width:100%; height:100%; top:0; right:-7%; z-index:3; }
.chara_list_text { position:absolute; height:auto; width:94%; bottom:2%; left: 3%; z-index:3; border:1px solid rgba(255,255,255,0.9); }
@media screen and (min-width: 601px){ .chara_list_text{ width:70%; bottom:4%; left:15%; } }
.chara_list p.name_male,
.chara_list p.name_female{ font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'meiryo','Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; position:absolute; top:-4em; text-align:left; width:auto; height:2.8em; z-index:1; padding:0 3em; font-size:11px; font-weight:bold; color:#ffffb4 !important; text-shadow:0 0 3px #000,0 0 2px #000; box-shadow:0 4px 3px -4px rgba(0,0,0,0.5),0 -4px 3px -4px rgba(0,0,0,0.5); line-height:3.5em; }
.chara_list p.name_male { top:-7em; left:-3em; text-align:left; background:-webkit-linear-gradient(left, rgba( 10,61,155,0) 0%, rgba( 10,61,155,0.7) 15%, rgba( 9,54,146,0.8) 20%, rgba( 8,40,127,0.8) 30%, rgba( 8,40,127,0.8) 70%, rgba( 9,54,146,0.8) 80%, rgba( 10,61,155,0.7) 85%, rgba( 10,61,155,0) 100%); background:linear-gradient(to right, rgba( 10,61,155,0) 0%, rgba( 10,61,155,0.7) 15%, rgba( 9,54,146,0.8) 20%, rgba( 8,40,127,0.8) 30%, rgba( 8,40,127,0.8) 70%, rgba( 9,54,146,0.8) 80%, rgba( 10,61,155,0.7) 85%, rgba( 10,61,155,0) 100%); }
.chara_list p.name_female{ top:-4em; right:-3em; text-align:right; background:-webkit-linear-gradient(left, rgba(160,20, 90,0) 0%, rgba(160,20, 90,0.7) 15%, rgba(120,10, 40,0.8) 20%, rgba(120,10, 40,0.8) 30%, rgba(120,10, 40,0.8) 70%, rgba(120,10, 40,0.8) 80%, rgba(160,20, 90,0.7) 85%, rgba(160,20, 90,0) 100%); background:linear-gradient(to right, rgba(160,20, 90,0) 0%, rgba(160,20, 90,0.7) 15%, rgba(120,10, 40,0.8) 20%, rgba(120,10, 40,0.8) 30%, rgba(120,10, 40,0.8) 70%, rgba(120,10, 40,0.8) 80%, rgba(160,20, 90,0.7) 85%, rgba(160,20, 90,0) 100%); }
@media screen and (min-width: 601px){
.chara_list p.name_male,
.chara_list p.name_female{ height:2.2em; font-size:18px; line-height:3em; }
.chara_list p.name_male{ top:-3em; left:-6em; }
.chara_list p.name_female{ top:-3em; right:-6em; }
}
.chara_list p.name_male ruby rt,
.chara_list p.name_female ruby rt{ height:1.2em; padding:0; margin-bottom:-0.5em; margin-top:0.5em; font-size:10px; }
@media screen and (min-width: 601px){
.chara_list p.name_male ruby rt,
.chara_list p.name_female ruby rt{ height:1.2em; padding:0; margin-bottom:0; margin-top:0.5em; font-size:10px; }
}
.chara_list p.name_male::before,
.chara_list p.name_male::after,
.chara_list p.name_female::before,
.chara_list p.name_female::after{ content:""; position:absolute; left:0; height:2px; width:100%; background:-webkit-linear-gradient(left, rgba(243,226,199,0) 0%, rgba(222,197,158,0.7) 15%, rgba(215,187,144,0.8) 20%, rgba(193,158,103,0.8) 35%, rgba(182,141,76,0.8) 36%, rgba(229,194,112,0.8) 50%, rgba(221,196,126,0.8) 78%, rgba(222,197,131,0.8) 80%, rgba(225,201,143,0.7) 85%, rgba(233,212,179,0) 100%); background:linear-gradient(to right, rgba(243,226,199,0) 0%, rgba(222,197,158,0.7) 15%, rgba(215,187,144,0.8) 20%, rgba(193,158,103,0.8) 35%, rgba(182,141,76,0.8) 36%, rgba(229,194,112,0.8) 50%, rgba(221,196,126,0.8) 78%, rgba(222,197,131,0.8) 80%, rgba(225,201,143,0.7) 85%, rgba(233,212,179,0) 100%); }
.chara_list p.name_male::before,
.chara_list p.name_female::before{ top:-2px; }
.chara_list p.name_male::after,
.chara_list p.name_female::after{ bottom:-2px; }
.chara_list p.chara_arasuji{
font-weight:bold;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'meiryo','Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
background:url(../image/stripe.png) repeat center,rgba(255,255,255,0.7);
background-size:6px 6px;
position:relative;
line-height:2em;
text-align:right;
width:100%;
z-index:1;
font-size:10px;
margin:0;
padding:1.5em;
text-align:left;
text-shadow:0 0 3px #fff,0 0 2px #fff;
color:#342820;
box-shadow:0 0 3px 0 rgba(0,0,0,0.3);
}
@media screen and (min-width: 601px){ .chara_list p.chara_arasuji{ font-size:14px; } }
.chara_list p.chara_arasuji span:nth-child(1){
border:0px solid red;
text-align:center;
color:#634c3d;
font-size:90%;
display:block;
margin-bottom:.5em;
}
.chara_list.chara1 .chara_list_pn { background:url(../image/chara/chara01pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara1 .chara_list_bg { background:url(../image/chara/chara01_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara1 .chara_list_chara { background:url(../image/chara/chara01a.png) -75% bottom; background-repeat:no-repeat; background-size:242.5px auto; }
.chara_list.chara1 .chara_list_chara::after{ background:url(../image/chara/chara01b.png) 120% bottom; background-repeat:no-repeat; background-size:193px auto; }
@media screen and (min-width: 321px){ .chara_list.chara1 .chara_list_chara{ background:url(../image/chara/chara01a.png) -7% bottom; background-repeat:no-repeat; background-size:242.5px auto; } .chara_list.chara1 .chara_list_chara::after{ background:url(../image/chara/chara01b.png) right bottom; background-repeat:no-repeat; background-size:193px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara1 .chara_list_chara{ background:url(../image/chara/chara01a.png) -3% bottom; background-repeat:no-repeat; background-size:242.5px auto; } }
@media screen and (min-width: 551px){ .chara_list.chara1 .chara_list_chara{ background:url(../image/chara/chara01a.png) -3% bottom; background-repeat:no-repeat; background-size:242.5px auto; } .chara_list.chara1 .chara_list_chara::after{ background:url(../image/chara/chara01b.png) 88% bottom; background-repeat:no-repeat; background-size:193px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara1 .chara_list_chara{ background:url(../image/chara/chara01a.png) 5% bottom; background-repeat:no-repeat; background-size:242.5px auto; } .chara_list.chara1 .chara_list_chara::after{ background:url(../image/chara/chara01b.png) 90% bottom; background-repeat:no-repeat; background-size:193px auto; right:0%; } }
.chara_list.chara2 .chara_list_pn { background:url(../image/chara/chara02pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara2 .chara_list_bg { background:url(../image/chara/chara02_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara2 .chara_list_chara { background:url(../image/chara/chara02a.png) -80px bottom; background-repeat:no-repeat; background-size:309px auto; }
.chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 300% bottom; background-repeat:no-repeat; background-size:283px auto; }
@media screen and (min-width: 321px){ .chara_list.chara2 .chara_list_chara{ background:url(../image/chara/chara02a.png) -150% bottom; background-repeat:no-repeat; background-size:309px auto; } .chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 160% bottom; background-repeat:no-repeat; background-size:283px auto; } }
@media screen and (min-width: 376px){ .chara_list.chara2 .chara_list_chara{ background:url(../image/chara/chara02a.png) -50px bottom; background-repeat:no-repeat; background-size:309px auto; } .chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 118% bottom; background-repeat:no-repeat; background-size:283px auto; } }
@media screen and (min-width: 551px){ .chara_list.chara2 .chara_list_chara{ background:url(../image/chara/chara02a.png) -10% bottom; background-repeat:no-repeat; background-size:309px auto; } .chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 110% bottom; background-repeat:no-repeat; background-size:283px auto; right:0%; } }
@media screen and (min-width: 601px){ .chara_list.chara2 .chara_list_chara{ background:url(../image/chara/chara02a.png) 3% bottom; background-repeat:no-repeat; background-size:309px auto; } .chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 90% bottom; background-repeat:no-repeat; background-size:283px auto; right:0%; } }
@media screen and (min-width: 769px){ .chara_list.chara2 .chara_list_chara{ background:url(../image/chara/chara02a.png) 3% bottom; background-repeat:no-repeat; background-size:309px auto; } .chara_list.chara2 .chara_list_chara::after{ background:url(../image/chara/chara02b.png) 90% bottom; background-repeat:no-repeat; background-size:283px auto; right:0%; } }
.chara_list.chara3 .chara_list_pn { background:url(../image/chara/chara03pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara3 .chara_list_bg { background:url(../image/chara/chara03_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara3 .chara_list_chara { background:url(../image/chara/chara03a.png) 3% bottom; background-repeat:no-repeat; background-size:198px auto; }
.chara_list.chara3 .chara_list_chara::after{ background:url(../image/chara/chara03b.png) 90% bottom; background-repeat:no-repeat; background-size:200.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara3 .chara_list_chara{ background:url(../image/chara/chara03a.png) 5% bottom; background-repeat:no-repeat; background-size:198px auto; } .chara_list.chara3 .chara_list_chara::after{ background:url(../image/chara/chara03b.png) 85% bottom; background-repeat:no-repeat; background-size:200.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara3 .chara_list_chara{ background:url(../image/chara/chara03a.png) 10% bottom; background-repeat:no-repeat; background-size:198px auto; } .chara_list.chara3 .chara_list_chara::after{ background:url(../image/chara/chara03b.png) 85% bottom; background-repeat:no-repeat; background-size:200.5px auto; right:0%; } }
.chara_list.chara4 .chara_list_pn { background:url(../image/chara/chara04pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara4 .chara_list_bg { background:url(../image/chara/chara04_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara4 .chara_list_chara { background:url(../image/chara/chara04a.png) -30% bottom; background-repeat:no-repeat; background-size:247px auto; }
.chara_list.chara4 .chara_list_chara::after{ background:url(../image/chara/chara04b.png) 133% bottom; background-repeat:no-repeat; background-size:210.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara4 .chara_list_chara{ background:url(../image/chara/chara04a.png) 2% bottom; background-repeat:no-repeat; background-size:247px auto; } .chara_list.chara4 .chara_list_chara::after{ background:url(../image/chara/chara04b.png) 95% bottom; background-repeat:no-repeat; background-size:210.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara4 .chara_list_chara{ background:url(../image/chara/chara04a.png) 10% bottom; background-repeat:no-repeat; background-size:247px auto; } .chara_list.chara4 .chara_list_chara::after{ background:url(../image/chara/chara04b.png) 90% bottom; background-repeat:no-repeat; background-size:210.5px auto; right:0%; } }
.chara_list.chara5 .chara_list_pn { background:url(../image/chara/chara05pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara5 .chara_list_bg { background:url(../image/chara/chara05_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara5 .chara_list_chara { background:url(../image/chara/chara05a.png) -220% bottom; background-repeat:no-repeat; background-size:285.5px auto; }
.chara_list.chara5 .chara_list_chara::after{ background:url(../image/chara/chara05b.png) 110% bottom; background-repeat:no-repeat; background-size:187.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara5 .chara_list_chara{ background:url(../image/chara/chara05a.png) -35px bottom; background-repeat:no-repeat; background-size:285.5px auto; } .chara_list.chara5 .chara_list_chara::after{ background:url(../image/chara/chara05b.png) 92% bottom; background-repeat:no-repeat; background-size:187.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara5 .chara_list_chara{ background:url(../image/chara/chara05a.png) 5% bottom; background-repeat:no-repeat; background-size:285.5px auto; } .chara_list.chara5 .chara_list_chara::after{ background:url(../image/chara/chara05b.png) 87% bottom; background-repeat:no-repeat; background-size:187.5px auto; right:0%; } }
.chara_list.chara6 .chara_list_pn { background:url(../image/chara/chara06pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara6 .chara_list_bg { background:url(../image/chara/chara06_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara6 .chara_list_chara { background:url(../image/chara/chara06a.png) -90% bottom; background-repeat:no-repeat; background-size:240.5px auto; }
.chara_list.chara6 .chara_list_chara::after{ background:url(../image/chara/chara06b.png) 140% bottom; background-repeat:no-repeat; background-size:247.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara6 .chara_list_chara{ background:url(../image/chara/chara06a.png) -51% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara6 .chara_list_chara::after{ background:url(../image/chara/chara06b.png) 116% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara6 .chara_list_chara{ background:url(../image/chara/chara06a.png) -35% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara6 .chara_list_chara::after{ background:url(../image/chara/chara06b.png) 110% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara6 .chara_list_chara{ background:url(../image/chara/chara06a.png) -5% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara6 .chara_list_chara::after{ background:url(../image/chara/chara06b.png) 90% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara6 .chara_list_chara{ background:url(../image/chara/chara06a.png) 10% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara6 .chara_list_chara::after{ background:url(../image/chara/chara06b.png) 90% bottom; background-repeat:no-repeat; background-size:247.5px auto; right:0%; } }
.chara_list.chara7 .chara_list_pn { background:url(../image/chara/chara07pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara7 .chara_list_bg { background:url(../image/chara/chara07_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara7 .chara_list_chara { background:url(../image/chara/chara07a.png) -90% bottom; background-repeat:no-repeat; background-size:240.5px auto; }
.chara_list.chara7 .chara_list_chara::after{ background:url(../image/chara/chara07b.png) 160% bottom; background-repeat:no-repeat; background-size:247.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara7 .chara_list_chara{ background:url(../image/chara/chara07a.png) -29% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara7 .chara_list_chara::after{ background:url(../image/chara/chara07b.png) 127% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara7 .chara_list_chara{ background:url(../image/chara/chara07a.png) -10% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara7 .chara_list_chara::after{ background:url(../image/chara/chara07b.png) 110% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara7 .chara_list_chara{ background:url(../image/chara/chara07a.png) -5% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara7 .chara_list_chara::after{ background:url(../image/chara/chara07b.png) 90% bottom; background-repeat:no-repeat; background-size:247.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara7 .chara_list_chara{ background:url(../image/chara/chara07a.png) 15% bottom; background-repeat:no-repeat; background-size:240.5px auto; } .chara_list.chara7 .chara_list_chara::after{ background:url(../image/chara/chara07b.png) 86% bottom; background-repeat:no-repeat; background-size:247.5px auto; right:0%; } }
.chara_list.chara8 .chara_list_pn { background:url(../image/chara/chara08pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara8 .chara_list_bg { background:url(../image/chara/chara08_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara8 .chara_list_chara { background:url(../image/chara/chara08a.png) -45% bottom; background-repeat:no-repeat; background-size:219.5px auto; }
.chara_list.chara8 .chara_list_chara::after{ background:url(../image/chara/chara08b.png) 110% bottom; background-repeat:no-repeat; background-size:201.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara8 .chara_list_chara{ background:url(../image/chara/chara08a.png) -20% bottom; background-repeat:no-repeat; background-size:219.5px auto; } .chara_list.chara8 .chara_list_chara::after{ background:url(../image/chara/chara08b.png) 100% bottom; background-repeat:no-repeat; background-size:201.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara8 .chara_list_chara{ background:url(../image/chara/chara08a.png) -10% bottom; background-repeat:no-repeat; background-size:219.5px auto; } .chara_list.chara8 .chara_list_chara::after{ background:url(../image/chara/chara08b.png) 95% bottom; background-repeat:no-repeat; background-size:201.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara8 .chara_list_chara{ background:url(../image/chara/chara08a.png) -1% bottom; background-repeat:no-repeat; background-size:219.5px auto; } .chara_list.chara8 .chara_list_chara::after{ background:url(../image/chara/chara08b.png) 90% bottom; background-repeat:no-repeat; background-size:201.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara8 .chara_list_chara{ background:url(../image/chara/chara08a.png) 12% bottom; background-repeat:no-repeat; background-size:219.5px auto; } .chara_list.chara8 .chara_list_chara::after{ background:url(../image/chara/chara08b.png) 88% bottom; background-repeat:no-repeat; background-size:201.5px auto; right:0%; } }
.chara_list.chara9 .chara_list_pn { background:url(../image/chara/chara09pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara9 .chara_list_bg { background:url(../image/chara/chara09_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara9 .chara_list_chara { background:url(../image/chara/chara09a.png) -100% bottom; background-repeat:no-repeat; background-size:268px auto; }
.chara_list.chara9 .chara_list_chara::after{ background:url(../image/chara/chara09b.png) 320% bottom; background-repeat:no-repeat; background-size:286.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara9 .chara_list_chara{ background:url(../image/chara/chara09a.png) -20% bottom; background-repeat:no-repeat; background-size:268px auto; } .chara_list.chara9 .chara_list_chara::after{ background:url(../image/chara/chara09b.png) 155% bottom; background-repeat:no-repeat; background-size:286.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara9 .chara_list_chara{ background:url(../image/chara/chara09a.png) -10% bottom; background-repeat:no-repeat; background-size:268px auto; } .chara_list.chara9 .chara_list_chara::after{ background:url(../image/chara/chara09b.png) 140% bottom; background-repeat:no-repeat; background-size:286.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara9 .chara_list_chara{ background:url(../image/chara/chara09a.png) -1% bottom; background-repeat:no-repeat; background-size:268px auto; } .chara_list.chara9 .chara_list_chara::after{ background:url(../image/chara/chara09b.png) 100% bottom; background-repeat:no-repeat; background-size:286.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara9 .chara_list_chara{ background:url(../image/chara/chara09a.png) 12% bottom; background-repeat:no-repeat; background-size:268px auto; } .chara_list.chara9 .chara_list_chara::after{ background:url(../image/chara/chara09b.png) 88% bottom; background-repeat:no-repeat; background-size:286.5px auto; right:0%; } }
.chara_list.chara10 .chara_list_pn { background:url(../image/chara/chara10pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara10 .chara_list_bg { background:url(../image/chara/chara10_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara10 .chara_list_chara { background:url(../image/chara/chara10a.png) 600% bottom; background-repeat:no-repeat; background-size:315.5px auto; }
.chara_list.chara10 .chara_list_chara::after{ background:url(../image/chara/chara10b.png) 100% bottom; background-repeat:no-repeat; background-size:187.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara10 .chara_list_chara{ background:url(../image/chara/chara10a.png) -100% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara10 .chara_list_chara::after{ background:url(../image/chara/chara10b.png) 95% bottom; background-repeat:no-repeat; background-size:187.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara10 .chara_list_chara{ background:url(../image/chara/chara10a.png) -25% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara10 .chara_list_chara::after{ background:url(../image/chara/chara10b.png) 90% bottom; background-repeat:no-repeat; background-size:187.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara10 .chara_list_chara{ background:url(../image/chara/chara10a.png) -10% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara10 .chara_list_chara::after{ background:url(../image/chara/chara10b.png) 88% bottom; background-repeat:no-repeat; background-size:187.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara10 .chara_list_chara{ background:url(../image/chara/chara10a.png) 10% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara10 .chara_list_chara::after{ background:url(../image/chara/chara10b.png) 85% bottom; background-repeat:no-repeat; background-size:187.5px auto; right:0%; } }
.chara_list.chara11 .chara_list_pn { background:url(../image/chara/chara11pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara11 .chara_list_bg { background:url(../image/chara/chara11_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara11 .chara_list_chara { background:url(../image/chara/chara11a.png) 800% bottom; background-repeat:no-repeat; background-size:315.5px auto; }
.chara_list.chara11 .chara_list_chara::after{ background:url(../image/chara/chara11b.png) -140% bottom; background-repeat:no-repeat; background-size:325.0px auto; }
@media screen and (min-width: 321px){ .chara_list.chara11 .chara_list_chara{ background:url(../image/chara/chara11a.png) -110% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara11 .chara_list_chara::after{ background:url(../image/chara/chara11b.png) 180% bottom; background-repeat:no-repeat; background-size:325.0px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara11 .chara_list_chara{ background:url(../image/chara/chara11a.png) -10% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara11 .chara_list_chara::after{ background:url(../image/chara/chara11b.png) 110% bottom; background-repeat:no-repeat; background-size:325.0px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara11 .chara_list_chara{ background:url(../image/chara/chara11a.png) -5% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara11 .chara_list_chara::after{ background:url(../image/chara/chara11b.png) 90% bottom; background-repeat:no-repeat; background-size:325.0px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara11 .chara_list_chara{ background:url(../image/chara/chara11a.png) 10% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara11 .chara_list_chara::after{ background:url(../image/chara/chara11b.png) 86% bottom; background-repeat:no-repeat; background-size:325.0px auto; right:0%; } }
.chara_list.chara12 .chara_list_pn { background:url(../image/chara/chara12pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara12 .chara_list_bg { background:url(../image/chara/chara12_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara12 .chara_list_chara { background:url(../image/chara/chara12a.png) -90px bottom; background-repeat:no-repeat; background-size:315.5px auto; }
.chara_list.chara12 .chara_list_chara::after{ background:url(../image/chara/chara12b.png) 220% bottom; background-repeat:no-repeat; background-size:315.0px auto; right: -30%; }
@media screen and (min-width: 321px){ .chara_list.chara12 .chara_list_chara{ background:url(../image/chara/chara12a.png) -70px bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara12 .chara_list_chara::after{ background:url(../image/chara/chara12b.png) 180% bottom; background-repeat:no-repeat; background-size:315.0px auto; right: -20%; } }
@media screen and (min-width: 375px){ .chara_list.chara12 .chara_list_chara{ background:url(../image/chara/chara12a.png) -60px bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara12 .chara_list_chara::after{ background:url(../image/chara/chara12b.png) 140% bottom; background-repeat:no-repeat; background-size:315.0px auto; right: -10%; } }
@media screen and (min-width: 501px){ .chara_list.chara12 .chara_list_chara{ background:url(../image/chara/chara12a.png) -10% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara12 .chara_list_chara::after{ background:url(../image/chara/chara12b.png) 100% bottom; background-repeat:no-repeat; background-size:315.0px auto; right: -5%; } }
@media screen and (min-width: 601px){ .chara_list.chara12 .chara_list_chara{ background:url(../image/chara/chara12a.png) 0% bottom; background-repeat:no-repeat; background-size:315.5px auto; } .chara_list.chara12 .chara_list_chara::after{ background:url(../image/chara/chara12b.png) 100% bottom; background-repeat:no-repeat; background-size:315.0px auto; right: 0%; } }
.chara_list.chara13 .chara_list_pn { background:url(../image/chara/chara13pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara13 .chara_list_bg { background:url(../image/chara/chara13_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara13 .chara_list_chara { background:url(../image/chara/chara13a.png) center bottom; background-repeat:no-repeat; background-size:420.0px auto; }
/*
.chara_list.chara13 .chara_list_chara { background:url(../image/chara/chara13a.png) 100% bottom; background-repeat:no-repeat; background-size:370.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara13 .chara_list_chara{ background:url(../image/chara/chara13a.png) 400% bottom; background-repeat:no-repeat; background-size:370.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara13 .chara_list_chara{ background:url(../image/chara/chara13a.png) -50% bottom; background-repeat:no-repeat; background-size:370.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara13 .chara_list_chara{ background:url(../image/chara/chara13a.png) -10% bottom; background-repeat:no-repeat; background-size:370.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara13 .chara_list_chara{ background:url(../image/chara/chara13a.png) 10% bottom; background-repeat:no-repeat; background-size:370.5px auto; } }
*/
.chara_list.chara14 .chara_list_pn { background:url(../image/chara/chara14pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara14 .chara_list_bg { background:url(../image/chara/chara14_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara14 .chara_list_chara { background:url(../image/chara/chara14a.png) center bottom; background-repeat:no-repeat; background-size:271.5px auto; }
.chara_list.chara15 .chara_list_pn { background:url(../image/chara/chara15pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara15 .chara_list_bg { background:url(../image/chara/chara15_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara16 .chara_list_pn { background:url(../image/chara/chara16pn.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara16 .chara_list_bg { background:url(../image/chara/chara16_bg.png) center top; background-repeat:no-repeat; background-size:contain; }
.chara_list.chara16 .chara_list_chara { background:url(../image/chara/chara16a.png) -160px bottom; background-repeat:no-repeat; background-size:380.5px auto; }
.chara_list.chara16 .chara_list_chara::after{ background:url(../image/chara/chara16b.png) 160% bottom; background-repeat:no-repeat; background-size:244.5px auto; }
@media screen and (min-width: 321px){ .chara_list.chara16 .chara_list_chara{ background:url(../image/chara/chara16a.png) -150px bottom; background-repeat:no-repeat; background-size:380.5px auto; } .chara_list.chara16 .chara_list_chara::after{ background:url(../image/chara/chara16b.png) 130% bottom; background-repeat:no-repeat; background-size:244.5px auto; } }
@media screen and (min-width: 375px){ .chara_list.chara16 .chara_list_chara{ background:url(../image/chara/chara16a.png) -130px bottom; background-repeat:no-repeat; background-size:380.5px auto; } .chara_list.chara16 .chara_list_chara::after{ background:url(../image/chara/chara16b.png) 110% bottom; background-repeat:no-repeat; background-size:244.5px auto; } }
@media screen and (min-width: 501px){ .chara_list.chara16 .chara_list_chara{ background:url(../image/chara/chara16a.png) -100px bottom; background-repeat:no-repeat; background-size:380.5px auto; } .chara_list.chara16 .chara_list_chara::after{ background:url(../image/chara/chara16b.png) 100% bottom; background-repeat:no-repeat; background-size:244.5px auto; } }
@media screen and (min-width: 601px){ .chara_list.chara16 .chara_list_chara{ background:url(../image/chara/chara16a.png) -10% bottom; background-repeat:no-repeat; background-size:380.5px auto; } .chara_list.chara16 .chara_list_chara::after{ background:url(../image/chara/chara16b.png) 90% bottom; background-repeat:no-repeat; background-size:244.5px auto; right:0%; } }
/* story-xx[ノベルページ] */
.nav { width:40px; height:40px; background:rgba(104,80,68,0.8); border-radius:50%; color:#FFF; position:fixed; opacity:0.8; text-decoration:none; z-index:600; border:2px solid #fff; box-shadow:0 2px 10px 0px rgba(0,0,0,0.3); cursor:pointer; text-align:center; }
.nav_l { left:5px; }
.nav_r { right:5px; }
@media screen and (min-width: 601px){
.nav { width:60px; height:60px; }
.nav_l { left:20px; }
.nav_r { right:20px; }
.nav:hover{ background:rgba(104,80,68,0.5); color:#111; }
}
.nav a, .nav p {
text-decoration:none;
color:#fff;
}
.nav img{
width:auto;
height:85%;
margin:0;
margin-top:8%;
padding:0;
transform: rotate(30deg);
filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}
.nav_prev { bottom:100px; } .nav_prev a { font-size:14px; line-height:34px; }
.nav_next { bottom: 60px; } .nav_next a { font-size:14px; line-height:34px; }
.nav_back { bottom: 5px; } .nav_back a { font-size:14px; line-height:34px; }
.nav_top { bottom:100px; } .nav_top p { font-size:20px; line-height:32px; }
.nav_bottom{ bottom: 60px; } .nav_bottom p{ font-size:20px; line-height:38px; }
.nav_save { bottom: 5px; }
@media screen and (min-width: 601px){
.nav_prev { bottom:160px; } .nav_prev a { font-size:22px; line-height:52px; }
.nav_next { bottom:100px; } .nav_next a { font-size:22px; line-height:52px; }
.nav_back { bottom: 20px; } .nav_back a { font-size:22px; line-height:52px; }
.nav_top { bottom:160px; } .nav_top p { font-size:32px; line-height:50px; }
.nav_bottom{ bottom:100px; } .nav_bottom p{ font-size:32px; line-height:56px; }
.nav_save { bottom: 20px; }
}
#shiori_save {
z-index:999;
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding:10px;
color:#fff;
background:rgba(0,0,0,0.7);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#nobel_menu{
position: sticky;
position: -webkit-sticky;
top: 2px;
z-index: 200;
background-color:#f0e8dc;
background-image:url(../image/paper.png);
background-repeat:repeat;
background-size:200px 200px;
box-shadow:0 0 20px rgba(255,255,255,0.8);
}
#nobel_menu::before{content:"";background:-webkit-linear-gradient(left, rgba(95,70,70,0.3) 0%, transparent 100%);background:linear-gradient(to right, rgba(95,70,70,0.3) 0%, transparent 100%);z-index:1;position:absolute;top:0;left:0;height:100%;width:20px}
#nobel_menu::after {content:"";background:-webkit-linear-gradient(right, rgba(95,70,70,0.3) 0%, transparent 100%);background:linear-gradient(to left, rgba(95,70,70,0.3) 0%, transparent 100%);z-index:1;position:absolute;top:0;right:0;height:100%;width:20px}
.nm_body{
position:relative;
line-height:1em;
text-align:left;
width:100%;
height:40px;
z-index:201;
margin:2px 0 2px 0;
padding:0 1em;
overflow:visible;
font-size:14px;
font-weight:bold;
color:#fff;
text-shadow:0 0 3px #000,0 0 2px #000;
box-shadow:0 4px 3px -4px rgba(0,0,0,0.5),0 -4px 3px -4px rgba(0,0,0,0.5);
}
.nm_body::before,.nm_body::after{content:"";position:absolute;left:0;height:2px;width:100%;background:-webkit-linear-gradient(left, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);background:linear-gradient(to right, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);box-shadow:0 0 2px 0 rgba(0,0,0,0.5)}
.nm_body::before{top:-2px}
.nm_body::after{bottom:-2px}
@media screen and (min-width: 601px){.nm_body{height:50px;font-size:16px}}
.nm_name { position:absolute; width:100%; top: 2px; font-size:14px; left:0px; line-height:16px; text-align:center; color:#000; text-shadow:0 0 3px #fff,0 0 2px #fff; font-family:"hannari", serif; }
@media screen and (min-width: 501px){ .nm_name { top: 9px; font-size:18px; } .nm_name br{ display:none; } }
@media screen and (min-width: 601px){ .nm_name { top:13px; font-size:28px; } }
.nm_home { position:absolute; width:auto; height:26px; left: 5px; top:7px; }
@media screen and (min-width: 601px){ .nm_home { height:36px; left:10px; } }
.nm_zoom { position:absolute; width:auto; height:26px; right:36px; top:7px; }
@media screen and (min-width: 601px){ .nm_zoom { height:36px; right:50px; } }
#sp_container {
position: relative;
padding:0 5%;
margin:2px 0 2px 0;
}
@media screen and (min-width: 401px){ #sp_container { padding:0 10%; } }
@media screen and (min-width: 601px){ #sp_container { padding:0 20%; } }
#sp_container::before,#sp_container::after{content:"";position:absolute;left:0;height:2px;width:100%;background:-webkit-linear-gradient(left, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);background:linear-gradient(to right, #fff 0%, #fffcb5 14%, #938971 29%, #fcd874 73%, #fcfcfc 100%);box-shadow:0 0 2px 0 rgba(0,0,0,0.5)}
#sp_container::before{top:-2px}
#sp_container::after{bottom:-2px}
#sp_loading {
position: relative;
}
#sp_loading img {
width:100%; height:auto;
}
#sp_loading .bg {
background-color: black;
opacity: 0.5;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#sp_loading .circle{
border-radius:150px;
border:15px solid #fff;
border-top-color:rgba(0,0,0,0.3);
box-sizing:border-box;
position:absolute;
width:100px;
height:100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
animation:circle 1s linear infinite;
-webkit-animation:circle 1s linear infinite;
}
@media screen and (min-width: 601px){
#sp_loading .circle { width:200px; height:200px; }
}
@keyframes circle{
0%{transform: translate(-50%, -50%) rotate(0deg)}
100%{transform: translate(-50%, -50%) rotate(360deg)}
}
@-webkit-keyframes circle{
0%{-webkit-transform: translate(-50%, -50%) rotate(0deg)}
100%{-webkit-transform: translate(-50%, -50%) rotate(360deg)}
}
#sp_keyword {
display: none;
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 90%;
margin:0 5%;
height: 100%;
top: 0px;
left: 0px;
}
@media screen and (min-width: 401px){ #sp_keyword { width: 80%; margin:0 10%; } }
@media screen and (min-width: 601px){ #sp_keyword { width: 60%; margin:0 20%; } }
#sp_keyword .input_keyword {
position: relative;
width: 300px;
margin: 40% auto 0 auto;
}
@media screen and (min-width: 401px){ #sp_keyword .input_keyword { width: 380px; } }
@media screen and (min-width: 601px){ #sp_keyword .input_keyword { width: 460px; } }
#sp_keyword .input_info {
position: relative;
width: 90%;
margin: 40px auto 0 auto;
padding: 10px 15px;
text-align: center;
font-size: 19px;
color: white;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
@media screen and (min-width: 401px){ #sp_keyword .input_info { font-size: 22px; } }
@media screen and (min-width: 601px){ #sp_keyword .input_info { font-size: 24px; } }
#sp_keyword .info_err {
color: red;
}
#sp_keyword label {
position: absolute;
top: 0;
font-size: 22px;
margin: 10px;
padding: 0 10px;
color: white;
border-radius: 10px;
background-color: black;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
#sp_keyword label.active {
top: -23px;
font-size: 18px;
}
@media screen and (min-width: 401px){ #sp_keyword label { font-size: 26px; } #sp_keyword label.active { top: -24px; font-size: 19px; } }
@media screen and (min-width: 601px){ #sp_keyword label { font-size: 30px; } #sp_keyword label.active { top: -25px; font-size: 20px; } }
#sp_keyword input[type=text] {
width: 240px;
padding: 14px 20px;
border: 1px solid white;
font-size: 20px;
background-color: black;
color: white;
}
@media screen and (min-width: 401px){ #sp_keyword input[type=text] { width: 300px; padding: 17px 20px; } }
@media screen and (min-width: 601px){ #sp_keyword input[type=text] { width: 360px; padding: 20px 20px; } }
#sp_keyword input[type=text]:focus {
outline: none;
}
#sp_keyword button {
border: 0;
line-height: 2.5;
padding: 0 10px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
@media screen and (min-width: 401px){ #sp_keyword button { font-size: 1.2rem; padding: 0 15px; } }
@media screen and (min-width: 601px){ #sp_keyword button { font-size: 1.4rem; padding: 0 20px; } }
#sp_keyword button:hover {
background-color: rgba(255, 0, 0, 1);
}
#sp_keyword button:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
#map_info {
text-align: right;
padding:10px 20px 20px 20px;
font-size:10px;
}
@media screen and (min-width: 401px){ #map_info { font-size:12px; } }
@media screen and (min-width: 601px){ #map_info { font-size:14px; } }