@charset "UTF-8";
/* CSS Document */

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; text-decoration:none; color:#F96;}
a:link,a:visited,a:active {outline: none;} 
a:hover{ text-decoration:underline;}

body { background-image: url(../img/bg.jpg); background-repeat:repeat-x; background-color:#DCC567; background-attachment:fixed; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.clearfix{ clear:both;}
#sns{ width: 100%; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin: 40px 0 20px; text-align: center; padding: 10px 0;}
#pagetop { bottom: 50px; right: 25px; position: fixed; z-index: 500;}
.cs{opacity:0.3; filter:alpha(opacity=30); -ms-filter: "alpha( opacity=30 )";}
#cd .cdbox .text{ font-size:75%; padding:10px 0 40px;}

/* movie */
.movie{ width:100%; max-width:660px; margin: 0 auto; padding: 10px 0;}
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

a.getcd{display: block; border-radius: 30px; padding: 6px 15px; border: solid 2px #bf9e25; margin: 20px auto; text-align: center; font-size: 200%; color: #fff; text-shadow: 0 0 8px #000; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #ffa220), color-stop(0.00, #d9d83f));
background: -webkit-linear-gradient(top, #d9d83f 0%, #ffa220 88%);
background: -moz-linear-gradient(top, #d9d83f 0%, #ffa220 88%);
background: -o-linear-gradient(top, #d9d83f 0%, #ffa220 88%);
background: -ms-linear-gradient(top, #d9d83f 0%, #ffa220 88%);
background: linear-gradient(to bottom, #d9d83f 0%, #ffa220 88%);
width:86%; max-width:350px;
}
a:hover.getcd{ color:#FF0; text-decoration:none; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #ff2025), color-stop(0.00, #d9963f));
background: -webkit-linear-gradient(top, #d9963f 0%, #ff2025 88%);
background: -moz-linear-gradient(top, #d9963f 0%, #ff2025 88%);
background: -o-linear-gradient(top, #d9963f 0%, #ff2025 88%);
background: -ms-linear-gradient(top, #d9963f 0%, #ff2025 88%);
background: linear-gradient(to bottom, #d9963f 0%, #ff2025 88%);
}

@media screen and (min-width: 640px) {
 
#PV img{width:86.5%;margin-bottom:30px;}
#wrapper{ margin:0 auto; width:1029px; background-image:url(../img/shadow.png); }
#content{ margin:0 auto; width:1000px; background-image:url(../img/bg_head.jpg); background-repeat:no-repeat; background-color:#FFF; position:relative;}
#ktlogo{ position:absolute; margin:15px;}
h1{ padding-top:30px; text-align:center;}
h2{ padding-bottom:30px; text-align:center;}
#read{ color: #000000; font-size: 18px; line-height: 165%; width: 470px; margin: 30px 0 0 70px; float: left;}
#photo{ margin:20px 0 0 15px; float:left;}
#list{ margin:0 65px; }
#list ul{ list-style:none;}
#list li{ float:left; position:relative;}
#list li img{ width:435px;}
#list li span{ position:absolute; left:370px; top:5px;}
#list li span img{ width:56px;}
#sns{ text-align: center; padding: 10px 0;}
#sns img{ margin:0 10px;}
#footer{ padding: 10px; font-size: 14px; text-align:center;}
#footer #copyright{ font-size: 12px; margin: 30px 0 10px;}
#footer span{ float:right;}
#footer a{ color:#666;}
#footer a:hover{ color: #DCC567;}
.hidepc{ display:none;}
#links img{ padding:2px;}
#cd{ width: 865px; margin: 0 auto 20px; display: flex; flex-wrap: wrap;}
#cd h3{ font-weight: bold; color: #AB631F; padding-bottom: 15px; font-size:27px;}
#cd p{ font-size:14px; line-height:150%; padding-bottom:10px;}
#cd .cdbox{ display:inline-block; width:31%; text-align:center; padding:0 0.5%;}
#cd .cdbox img{ width:90%;}
#cd .cdbox a{ color:#333;}

}


@media screen and (max-width: 639px) {

#PV img{width:93.5%;margin-bottom:30px;} 
#content{ margin:0 auto; width:100%; background-image:url(../img/bg_head.jpg); background-repeat:no-repeat; background-color:#FFF; position:relative;}
#ktlogo{ position:absolute; margin:10px;}
#ktlogo img{ width:70%;}
h1 img{ padding-top:30px; text-align:center; width:100%;}
h2 img{ padding-bottom:30px; text-align:center; width:100%; margin:0 auto;}
#read{ color: #000000; font-size: 16px; line-height: 165%; width: 92%; margin: 30px auto;}
#photo { margin: 20px auto; width:95%;}
#photo img{ width:100%;}
#list{ margin:0 auto; }
#list ul{ list-style:none;}
#list li{ }
#list li img{ width:100%;}
#list li span{ position:absolute; z-index:100; right:10px; }
#list li span img{ width:56px;}
#sns img{ margin:0 3px;}
#footer{ padding: 10px; font-size: 14px;}
#footer a{ color:#666;}
#footer a:hover{ color:#DCC567;}
#footer #copyright{ font-size:12px; margin:10px 0;}
#footer span{ float: left; text-align: center; padding-top: 15px;}
.hidesp{ display:none;}
#links{ width:100%;}
#links img{ width:49%; padding-bottom:5px;}
#cd{ width:100%; margin:0 auto 30px; display: flex; flex-wrap: wrap;}
#cd h3{ font-weight: bold; color: #AB631F; padding-bottom: 15px;     text-align: center;}
#cd p{ font-size:14px; line-height:150%; padding-bottom:10px;}
#cd .cdbox{ display:inline-block; width:49%; text-align:center;}
#cd .cdbox img{ width:90%;}
}


/*Accordion*/
.Accordion { overflow: hidden;}
.AccordionPanel { margin: 30px auto; padding: 0; width: 100%; max-width:1200px; background-color:#fff;}
.AccordionPanelTab { cursor: pointer; -moz-user-select: none; -khtml-user-select: none; padding: 1.5% 0px; color: #333; font-size: 160%; text-align:center; background-color: #f8ab26; background-repeat: no-repeat; background-position: right; background-image: url(../img/plus.png); font-weight: bold; border-radius: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.41); border: solid 1px #9e7653;}
.AccordionPanelTab span{ position: absolute; width: 32px; height: 5px; background-image: url(../story/new.png); margin-left: 10px;}
.AccordionPanelContent { overflow: hidden; margin: 0 auto; height: auto; width: 90%; color: #111; line-height: 150%; padding: 4% 3% 5%; background-color: rgba(249, 214, 133, 0.38); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);}
.AccordionPanelContent .text{ width: 100%; float: left; font-size: 100%; }
.AccordionPanelContent .text span{ font-weight: bold; padding: 10px 0; display: block; color: #b01cda; font-size: 120%; line-height: 1.4; border: solid 4px #d981f3; background-color: #f7b6f3; margin-bottom: 20px;}
.AccordionPanelContent .text img{ width: 32%; padding:0.5%;}
.AccordionPanelContent .text .partytext{ display:block; line-height:1.5;}
.AccordionPanelOpen .AccordionPanelTab { padding: 1.5% 0px; font-size: 160%; color: #333; background-repeat: no-repeat; background-position: right; background-image: url(../img/minus.png);}
.AccordionPanelTabHover { color: #cc0000;}
.AccordionPanelOpen .AccordionPanelTabHover { color: #cc0000;}
.AccordionFocused .AccordionPanelTab { background-color: #3399FF;}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #33CCFF;}

.AccordionPanelContent .text h3{ color:#FFFB00; padding-bottom:15px;}
.AccordionPanelContent .text dl{ padding:0 0 20px 0; display: flex; flex-wrap: wrap;}
.AccordionPanelContent .text dl a{ background-color: #eee; padding:2% 0.55%; margin: 0.5%; font-size: 80%; width: 17.89%; text-align: center; color: #666; line-height:1; border-radius:10px;}
.AccordionPanelContent .text dl a.btn_manual{background-color: #e0c9c9;}
.AccordionPanelContent .text dl a:hover{ background-color:#ccc;}
.AccordionPanelContent .text hr{width: 100%; padding-bottom: 5px; border-bottom: none; border-left: none; border-right: none; margin-top: 5px;}
.AccordionPanelContent .notice{ font-size:80%; color: #444; text-indent:-1em; margin-left:1em; line-height:1.4;}

@media screen and (max-width: 639px) {
#catalog{ width:95%; margin:0 auto;}
#catalog #result .games .frames{ margin:5% 0;}
.AccordionPanel { width: 100%;}
.AccordionPanelContent .text img{ width: 32.9%;}
.AccordionPanelContent .text dl a{ background-color: #eee; padding:4% 0.55%; margin: 0.5%; font-size: 80%; width: 47.9%; text-align: center; color: #666; line-height:1;}
.AccordionPanelTab { font-size: 100%;}
.AccordionPanelOpen .AccordionPanelTab { font-size: 100%;
.list2 td{ display:none;}
}