/* PITTEN用　CSS GAMEパーツ ver1.1 20240201 */
/* -------------------------------------------- 
common.js　と連動　

+スマホタップ時の黒い影を消す
 {-webkit-tap-highlight-color:rgba(0,0,0,0);}

--------------------------------------------- */
/* 必須じゅもん */
body,div{-webkit-text-size-adjust: 100%;}
::selection{background:rgba(0,0,0,0);}
*:focus{ outline:0px solid transparent !important; }
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
img{ /* Safari */ -webkit-user-select: none;user-select: none;}


/* WPカスタマイズ用 */
#wpadminbar { display: none;}

/* 画面調整中 */

.setting_now section .centering_box{opacity:0;}


/* ピッテン */
.p_nml{background:url("../image/content/pitten/pitten_nb_200.png")}
.p_dwn{background:url("./image/content/pitten/batten_nb_200.png")}
/* PIEXLシリーズ*/
.p_p_nml ,._p{background:url("../image/content/pixel/p_p_nml.png")}
.p_p_slp {background:url("../image/content/pixel/p_p_slp.png")}
.p_p_dwn ,._p.batten{background:url("../image/content/pixel/p_p_dwn.png")}
.p_p_spz {background:url("../image/content/pixel/p_p_spz.png")}
.p_p_niko{background:url("../image/content/pixel/p_p_niko.png")}
.p_p_stn {background:url("../image/content/pixel/p_p_stn.png")}
.p_p_bee {background:url("../image/content/pixel/p_p_bee.png")}
.p_p_clm {background:url("../image/content/pixel/p_p_clm.png")}
.p_p_ten {background:url("../image/content/pixel/p_p_ten.png")}

/* ピッテンチェンジ */
#p_p_change{font-size: 0;float: right;margin-top: -6px; margin-left: -60px;}
#p_p_change img{width:30px;transition:0.3s}
.pixel_off #p_p_change .change_arrow{transform:rotate(180deg)}

.pixel_off .p_nml{background:url("../image/content/pixel/p_p_nml.png")}
.pixel_off .p_dwn{background:url("../image/content/pixel/p_p_dwn.png")}
.pixel_off .p_p_nml, .pixel_off ._p{background:url("../image/content/pitten/pitten_nb_200.png")}
.pixel_off .p_p_dwn, .pixel_off ._p.batten{background:url("../image/content/pitten/batten_nb_200.png")}
.pixel_off .pixel.btn_pitten{background:url("../image/content/pitten/pitten_nb_200.png")}

/* フォントカラー*/
.tool_html div, .tool_html a,.tool_html a:visited{color:#fff}



/* 共通 */
::selection { background-color: transparent !important;}
html{background:#0DC755;}
section{overflow:hidden;}
input[type="radio"]{margin-top:-2.5px}
.select_area{height:25px;text-align:left;line-height:25px}
.select_area .w_input{display:inline-block;}
.one_line{height:20px}


.btn_pitten{background-image:url(../image/content/pitten/pitten_nb.png);}
.pixel.btn_pitten{background-image:url(../image/content/pixel/p_p_nml.png)}
.w_btn{text-align:center;}
.game_button{cursor:pointer;display:inline-block;line-height:1em !important;padding:0.3em 2em;border-radius:2em;border:2px solid #fff;box-sizing:border-box;font-weight:400;background:#0Dc755}
#game_area .game_button{font-size:16px;}
.game_button_on{cursor:pointer;display:inline-block;line-height:1em !important;padding:0.3em 2em;border-radius:2em;border:2px solid #fff;box-sizing:border-box;background:#fff;color:#0DC755 !important;font-weight:400}
.pc .game_button:hover{color:#0DC755 !important;background:#fff}
.game_button:active{color:#0DC755 !important;background:#fff}


#game_core{opacity:0;z-index:-1;position:relative;}

#comment_area{opacity:0;}
#comment_area b{    display: block;margin: 0 auto; position: absolute; margin: 0 auto; width: 100%;text-align: center;}
.game_started #comment_area{opacity:1;}

.before_time,.after_time{font-size:12px;margin:0 5px;display: inline-block;}
.before_time{width:5em;text-align:right;}
#_s.time_num{line-height:1em;font-weight:400;width:2em;text-align:center;display:inline-block;}
.after_time{width:5em;text-align:left;}

.org_q{opacity:0;}

 /* GAMEレイヤー */
.game_layer._open ~ #game_core{opacity:0;z-index:-1;transition:0s;}

.game_layer{position:absolute;opacity:0;z-index:-1;}
.game_layer._open{opacity:1;transition:opacity 0.2s;z-index:100;}




#w_btn_reset{height:30px;line-height:30px;position:relative;}

#btn_reset{opacity:0;pointer-events:none;}
#btn_reset:hover{color:#0DC755 !important;background:#fff}}
#btn_reset:active{color:#0DC755 !important;background:#fff}}


 #score_area{opacity:0;transition:0.2s;position:relative;z-index:9}
 .game_started #score_area{opacity:1;}
 .w_time{opacity:0;transition:0.2s;}

 
 /* GAME スタート後 */
 .game_started #game_area div{/* Safari */ -webkit-user-select: none; user-select: none;} 
 .game_started header{z-index:1000 !important}
 .game_started .w_time{opacity:1;}
 .game_started #btn_reset{opacity:1;pointer-events:auto;z-index:9}
 .game_started #game_core{z-index:99;opacity:1;}
 html.game_started{overflow:hidden;height:100vh;height:100dvh;}

 /* スタート後に機能させないボタン等 */
 .game_started .sound_btn,.game_started .select_area label, .game_started .select_area .w_input{opacity:0.6;pointer-events:none}
 

#start_note, #end_note{margin-top:-2em}

  /* 残り時間　*/
	#w_time_t{line-height:1em;position:relative;top:-1em;margin-bottom:-1em;}




/* END レイヤー*/
#end_score.score_num{line-height:1em;}


/* タイプ別 */
 /* QUIZ, TANGO */
 ._q{max-width:800px;width:82%;margin:0 auto;}
.w_ans{position:relative;border:4px solid #fff;box-sizing:border-box;border-radius:10px;background:rgba(0,0,0,0.1);height:100%;padding:1em;margin:0 auto;}
.ans_comment{text-align:justify;margin:0 auto;color:#fff;height:100%;overflow:auto;padding:0 1em}
@media (orientation:portrait){
 ._q{width:calc(100% - 30px);line-height:1.4em}
}

 /* トリビア */
 .tpl_marubatsu .ans_comment{font-size:20px;line-height:1.5em}

 /* ムズかんじ */
.stars div,.lv0,lv1,lv2,lv3,lv4,lv5{display:none;}
.stars h5{text-align:center;font-weight:600;color:#000;margin:5em 0 1em;}
.stars .star{display:inline-block;width:50px;height:50px;background-size:contain !important;background:url("https://pitten.jp/image/star.png")}

#lv1 .lv1{display:block;}
#lv2 .lv2{display:block;}
#lv3 .lv3{display:block;}
#lv4 .lv4{display:block;}
#lv4 .lv4{display:block;}
#lv5 .lv5{display:block;} 

.q_order{position:relative;top:-2.8em;margin-bottom:-1.7em}
/* 余白 */
/*
.adjust_ma{height:calc((100vh - 155px - 420px - 145px) * 0.5);}
@media (orientation:portrait){
	.adjust_ma{height:calc((100vh - 90px - 320px - 145px - ((100vw - 30px) * 0.325)) * 0.5); }
}
*/
.adjust_ma{height:0;width:100%;}


/* GAME  */
#comment_area{position:relative;}
#game_core{height:auto;}
.base_sq{height:140px;font-size:0px}
.base_sq b{ font-size:16px;font-weight:600}

@media (orientation:portrait){
 .base_sq{
	 height:calc((100vw - 60px) * 0.325);
	 max-height:250px;
 }	
}

/*時間*/
.w_time{width: 10em; display: block; text-align: center;margin: auto;font-size:20px}
.time_num{display: inline-block;text-align: center;width: 1.3em;}
.time_text{width:0.5em;display:inline-block;}

/*　スコア　*/
.score{font-size:40px;font-weight:600;margin-top:20px;display:inline-block}
#end_score{font-size: 50px;font-weight: 600;line-height:1em}
.evaluation_score{}

.end_score{ pointer-events: none;}
.w_pp{ font-size: 15px; width: 100%; margin: 0 auto; text-align: center; margin-top: 40px;}
.w_p_p{display:none; padding: 2px 7px;background: rgba(0,0,0,0.1);margin:5px 5px 0 5px; border-radius: 10px;transition:0.2s;opacity:0}
.w_p_p b { font-size: 30px; font-weight: 500; top: -7px;position: relative;}
.w_p_p._on{ display:inline-block;}
._pp{ background-size:cover;width: 40px; height: 40px; position: relative; display: inline-block; margin-right: 8px; margin-top: 5px;}


.base_sq img{height:100%;}




/* 全画面　フルスクリーンレイヤー */
#count_down.layer.full_screen{background:rgba(0,0,0,0.3) !important;height:100vh;height:100dvh}
#count_down.layer.full_screen.go{opacity:1;z-index:999;display:block;}
._cd{font-size:50vh;line-height:100vh;line-height:100dvh;position:absolute;top:0;left:0;width:100%;height:100vh;height:100dvh;opacity:0;transition:font 1s;font-family:'Roboto',sans-serif;transition-timing-function: ease-in-out !important;}
._cd.go{font-size:0px;opacity:1;}

.pc.layer_opened{width:calc(100vw - 5px)}
.ipad.layer_opened{width:100vw}

.pc.game_started{width:calc(100vw - 5px)}
.ipad.game_started{width:100vw}

/* コピーライト　*/
.mid_copy{margin-top:0 !important;text-align:center;}
.mid_copy.copyright,.mid_copy.copyright a{color:#fff;font-size:12px !important}
.mid_copy_under_ma{height:20px}


.w_game_footer{text-align:center;}
.game_footer_under_ma{height:20px}

/* リンクベルト */
.tool_link_belt{text-align:center;padding:30px;background:#999;border-top:1px solid #666;color:#ccc}
.tool_link_belt a{font-size:16px;color:#fff !important;transition:0.3s;margin:0 15px;}
.tool_link_belt a:hover{opacity:0.5;}
.tool_link_belt a.ptn::before{background:url("./image/logo/pittenTV.png?ver=1.0")}
.tool_link_belt a.yt::before{background:url("./image/logo/logo_youtube.png?ver=1.2")}
.tool_link_belt a.tw::before{background:url("./image/logo/logo_twitter.png?ver=1.2")}
.tool_link_belt ._sns img { width: 30px;}


/* GAME 解説 */
.w_banner img{border-radius:20px}
#pre_footer .tool_banner{max-width:350px;width:80%;min-width:200px;display:block;margin-bottom:80px;}

#pre_footer{background:#f0f0f0;/*box-shadow:5px 0px 5px rgba(0,0,0,0.5) inset, -5px 0px 5px rgba(0,0,0,0.5) inset;*/}
#pre_footer div{color:#999;font-size:14px}
#pre_footer .centering_box{max-width:900px;padding:100px 0 0;background:transparent !important;text-align:justify;font-size:14px;font-weight:300;}
#pre_footer .centering_box.pre_cb2{margin-bottom:100px;padding-top:30px}
#pre_footer .main_area,#pre_footer .pr_area{ font-size: 14px; font-weight: 400;float:left;}
#pre_footer .main_area{width:60%;margin-right:5%;}
#pre_footer .pr_area{width:35%;margin-top:0em;text-align:right;}
#pre_footer .pr_area img{margin-bottom:2em;transition:0.3s}
#pre_footer .pr_area img:hover{opacity:0.5;}
.single footer{background:#f0f0f0;}
.f_text{display:none}
.single .copyright{font-size:12px;background:transparent;font-weight:300;display:inline-block;}
.single section#pre_footer{margin-top:0em;border-top:1px solid #999;border-bottom:1px solid #999}
.pr_area h3{text-align:left;font-size:14px;margin:0 auto;color:#666;}


@media  (orientation:portrait){
	#pre_footer .main_area{float:none;width:100%}
	#pre_footer .tool_banner{margin-top:4em;}
	#pre_footer .pr_area h3{padding-top:2em;font-size:14px;width:70%;margin:0 auto;color:#666;}
	#pre_footer .pr_area{margin:0 auto;width:100%;text-align:center;margin-top:20%}
	#pre_footer .pr_area .slick_pr{width:70%;margin:0 auto;}
	#pre_footer .pr_area img{margin:0 10% 10%;width:80%;}
	#pre_footer .centering_box{padding:0 15px;}
#pre_footer div{color:#999;font-size:12px}	
	.tool_link_belt a span{display:none;}
	.pr_ma{height:2em;}
}



.pr_area .w_banner img{width:80%;}

/* フッター */
footer{border-top:0px solid #ccc !important;}
.pt_tool footer .centering_box{background:#f0f0f0}
footer .copyright{color:#666;margin-bottom:1.5em;}
.tool_f_menu a{color:#666 !important;font-weight:200;margin-top:2em;display:inline-block;font-size:14px;}
footer .copyright a{color:#666 !important;margin-bottom:2em}


@media ( max-width:600px){
 .tool_f_menu a{font-size:12px;}	
}

/* アーカイブページ */

.acv_eye{display:none;z-index:11;opacity:0;transition: opacity 0.5s;border:2px solid rgba(0,0,0,0.2);position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;margin-right:10%;width:40%;max-width: 200px;border-radius:25px;border-color:#fff}
.pc .w_game_menu .w_item:hover .acv_eye{display:block;opacity:1}


/* FONT SIZE */
section,.centering_box,.btn,div,p,h1,h2,h3,h4,h5,header,footer,li,dt,dd{font-size:16px;line-height:1.6em;}
.select_area #btn_reset{font-size:14px;}

@media (max-width:600px){
	section,.centering_box,.btn,div,p,h1,h2,h3,h4,h5,header,footer,li,dt,dd{font-size:12px;line-height:1.7em;}
 .select_area #btn_reset{font-size:12px;}	
}


/* CENTERING BOX SIZE */

.centering_box{width:85%;height:100%;margin:0 auto;text-align:center;}
.top_section .centering_box{}
/* 600px */@media  (orientation:portrait){	.centering_box{width:calc(100% - 30px)} }


/* FONT ゴシック系 */
body,textarea,select,input{font-family:"Work Sans","Helvetica","Noto Sans","Arial","Verdana","sans-serif","Noto Sans JP","Noto Sans Japanese","游ゴシック","ヒラギノ角ゴ","メイリオ" !important;}
/* FONT 明朝系 */
.serif{font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}


/* レイアウト用　*/
.centering_box::before{clear:both;}
.centering_box::after{clear:both;}
.middle{margin:auto;top:0;left:0;right:0;bottom:0;position:absolute;max-height:80%;max-width:80%;}

/* トランジション */
a,li,.btn,h1,h2{transition:0.2s;box-sizing:border-box;}


/*オリジナルカラーのラジオボタン*/
.o_radio{float: left;display: block;margin:2px 0 0 2px;}
.o_radio:before {content: "";display: inline-block;width:8px;height:8px;border-width: 1px;border-style: solid;border-radius: 50%;padding: 2px;background-clip: content-box;margin:2px 0 6px;opacity:0.2}
input[type="radio"]:checked + .o_radio:before {border-color:orange;background-color:orange;opacity:1;}


/* ボタン */
.btn{cursor:pointer}
.btn:active{transform:scale(0.95)}
.enable{opacity:1 !important;pointer-events:auto !important}

/* 音*/
.sound_btn{background-image:url(../image/button/sound_on_w.png)}
.sound_btn.muted{background-image:url(../image/button/sound_off_w.png)}
.no_sound .sound_btn{opacity:0.5;pointer-events:none;}
.sound_on .sound_btn{opacity:1;pointer-events:auto;}


/* スマートスクロールバー　*/
.ssbar{transition:0.2s;overflow-y:auto;}
.ssbar::-webkit-scrollbar {width: 5px;height: 10px;}
.ssbar::-webkit-scrollbar-track {background:transparent;}
.ssbar:hover::-webkit-scrollbar-track {background:rgba(0,0,0,0.05);}
html.ssbar:hover::-webkit-scrollbar-track {background:#ccc;}
.ssbar::-webkit-scrollbar-thumb {background: rgba(0,0,0,0);border-radius:5px;}
.ssbar:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1);}
html.ssbar:hover::-webkit-scrollbar-thumb {background:#999;}

/* 機能付きクラス */
.scroll_none{overflow:hidden !important}
.layer.full_screen{transition: 0.2s; opacity: 0;padding: 10vh 0; top: 0;left: 0;position: fixed; z-index: -1;	}
html.layer_opened, .layer_opened body, .layer_opened #body{overflow:hidden !important;}
.flex{display:flex;align-items:center}
.flex .flex_child,.flex .btn{margin:auto;}
.loading{opacity:0 !important;transition:opacity 0.2s;}

/* よみがな */
.yomigana .yomi{display:unset;}
.yomi{font-size:0.5em;font-weight:400;margin-top:-0.5em;opacity:0.9;display:none;}
.yomi:before{content:"(";margin-left:2px;}
.yomi:after{content:")";margin-right:2px;}
._yomi{background-color: rgba(0,0,0,0.07);padding: 0 0.1em;border-radius: 0.2em;margin: 0 0.1em;}

.jump{cursor:pointer;}
.not_jump, .not_event{pointer-events:none;}
.table_cell{display:table-cell;}
.hide{display:none !important;visibility:hidden;opacity:0;transition:0s !important}
.fixed{position:fixed;}
.full_screen{width:100%;}
.pc_only{display:block;} 
.mobile_only{display:none;} 

@media (orientation:portrait){.mobile_only{display:block;} .pc_only{display:none !important;}}
.bgi{background-position: 50% 50% !important;background-repeat: no-repeat !important;background-size: contain !important;}
.clear{clear:both;float:none;}
.left{float:left;} .left::after{clear:both;}
.right{float:right;} .right::after{clear:both;}
.alignL{text-align:left;}
.alignR{text-align:right;}
.ja{font-size:0.9em;font-weight:400;}
.btn{cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.top_of_page{text-decoration:underline;line-height:2em;}
.top_of_page:hover{text-decoration:none;}
.underline{text-decoration:underline;}
.tile_list{font-size:0px;line-height:1em;} .tile_list li{display:inline-block;}
.delay_show{opacity:0;transition:0.2s;}

/*　タグリセット　*/
a{text-decoration:none;color:#000;}
a:visited{color:#000;}
a:hover{text-decoration:none;}
h1,h2,h3,h4,h5{font-size:1em;font-weight:400;}
hr{margin:1em 0;}

img{max-width:100%;height:auto;}
li{list-style:none;}
address{font-style:normal;}

/* ハンバーガーメニュー */
.hbg_menu{float:right;margin-top:-90px;margin-right:-13px;position:relative;}
.hbg_menu{padding:17px 15px 15px 15px}
.hbg_input{display:none;}
.hbg_label{display:block;position: relative;padding: 2px;width: 30px;height: 20px;cursor:pointer;}
.hbg_label::before{ width: 8em;height: 20px;position: absolute;left: -8em;transition:0.2s;overflow:hidden}
.ja .hbg_label::before{content:"";}
.en .hbg_label::before{content:"";}
.hbg_bar,.hbg_bar::before,.hbg_bar::after{content: "";position: absolute;top: 15px;height: 2px;width: 30px;opacity: 1;background: #fff;transition: 0.14s ease-in-out;}
.hbg_bar::before{top:-8px;left:0}
.hbg_bar::after{top:8px;left:0}
.hbg_input:checked ~ .hbg_label::before{width:4em;left:-4em;}
.ja .hbg_input:checked ~ .hbg_label::before{content:"";}
.en .hbg_input:checked ~ .hbg_label::before{content:"";}
.hbg_input:checked ~ label .hbg_bar{width:0;}
.hbg_input:checked ~ label .hbg_bar::before{transform: rotateZ(45deg);top: 0;}
.hbg_input:checked ~ label .hbg_bar::after{transform: rotateZ(-45deg);top: 0;}
.hbg_menu .tool_menu{transition: 0.1s;display:none;position:fixed;right:7.5%;top:100px;padding:20px 40px;background:#0DC755;z-index:-1;opacity:0;width:40%;border:2px solid #000;border-width:2px;border-radius:15px;max-width:30em}
.hbg_menu .tool_menu{margin:0 auto;width:100%;max-width:100%;top:107px;left:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-width:0;border-radius:0px;overflow:hidden;padding:14px 0px 50px}
.hbg_menu .tool_menu.top_mo_menu{background:#fff}
.hbg_menu .tool_menu ul li{display:block;margin:auto;margin-top:10px;margin-bottom:10px;text-align:center;padding:0 45px;max-width:400px}
.hbg_menu .tool_menu ul li a{display:block;padding:10px 25px;border:2px solid #fff;color:#0DC755;background:#fff;border-radius:50px;font-weight:500;line-height:1em}
.hbg_menu .tool_menu ul li a:hover{color:#fff;background:transparent;opacity:1 !important}
.hbg_menu .tool_menu ul li span.mo{display:none;}
.hbg_menu .tool_menu ul li.current-menu-item a{color:#000;background:#fff}
.hbg_menu .tool_menu ul li.current-menu-item a::before{content:"";display:inline-block;width:15px;height:15px;background:#FFD402;border:1px solid #000;border-radius:15px;position:relative;top:4px;left:-3px;}
.hbg_input:checked ~ .tool_menu{z-index:999;opacity:1;display:block/*right:0*/}

@media (orientation:portrait) {
	.hbg_menu{position:absolute;top: 0;left:0;margin:0}
	.hbg_label::before{display:none;}
	.hbg_menu .tool_menu{top:63px;}
	.hbg_menu .tool_menu ul li span.mo{display:inline-block;}
	.hbg_menu .tool_menu ul li{text-align:center;line-height:1.2em}	
	.hbg_label{transform:scale(0.75)}
	.hbg_menu .tool_menu{max-width:unset;}
	
	.tpl_marubatsu ._q{max-width:90%;}

}
@media (orientation:portrait) and (max-width:1200px){

}
@media (orientation:portrait) and (max-height:600px){
	.result_title{margin-top:2em;display:inline-block}
	.tpl_marubatsu .ans_comment{font-size:14px;line-height:1.43em}	
}