@charset "Shift_JIS";

@import "../../files/css/common/layout.css";

/*-------------------------------------------------------------------------
	Index
/*-----------------------------------------------------------------------*/
#contents {
    padding-bottom: 20px;
}

    #contents #soundcheck {
        margin-bottom: 15px;
        padding-top: 20px;
    }
    
    #contents #mainmenu img{
        width: 140px;
        height: 90px;
    }
    #contents #mainmenu .img-s{
        width: 90px;
        height: 90px;
    }
    
    #contents #mainmenu ul.recent {
        display: inline;
        float: left;
    }
    
    #contents #mainmenu ul.old {
        display: inline;
        float: left;
    }
    
    #contents #mainmenu ul li {
        display: inline;
        float: left;
        margin-right: 20px;
        margin-bottom: 15px;
    }
    #contents #mainmenu ul .btn-end {
        margin-right: 100px;
    }

    #contents #oldmenu ul.recent {
        display: inline;
        float: left;
    }
    
    #contents #oldmenu ul.old {
        display: inline;
        float: left;
    }
    
    #contents #oldmenu ul li {
        display: inline;
        float: left;
        margin-right: 20px;
        margin-bottom: 15px;
    }

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

#contents #soundcheck {
    width: 94%;
    margin-left: 3%;
    margin-bottom: 15px;
    padding-top: 20px;
}

#contents #mainmenu, #contents #oldmenu {
    width: 94%;
    margin-left: 3%;
    margin-bottom: 20px;
}

    #contents #mainmenu ul li {
        display: inline;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    #contents #mainmenu ul .btn-end {
        margin-right: 15px;
    }
    #contents #oldmenu ul li {
        display: inline;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    #contents #oldmenu ul .btn-end {
        margin-right: 15px;
    }
    #contents .caution {
        width: 94%;
        margin-left: 3%;
    }

}

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

#contents #soundcheck {
    width: 300px;
    padding-top: 20px;
    margin: 0px auto 15px;
}

#contents #mainmenu, #contents #oldmenu {
    width: 300px;
    margin: 0px auto 20px;
}

#contents #mainmenu ul li {
    float: left;
    display: inline;
    margin-right: 0px;
    margin-bottom: 15px;
}
#contents #mainmenu ul .left-item {
    margin-right: 20px;
}
#contents #mainmenu ul .mini-item {
    margin-right: 15px;
}
#contents #oldmenu ul {
    width: 300px;
    margin: 0 auto;
}
#contents #oldmenu ul li {
    float: left;
    display: inline;
    margin-right: 0px;
    margin-bottom: 15px;
}
#contents #oldmenu ul .left-item {
    margin-right: 20px;
}
#contents #oldmenu ul .mini-item {
    margin-right: 15px;
}
}


#contents #release {
    background: #fff;
    margin-bottom: 50px;    
    border: solid 1px #ccc;
    border-radius: 8px;
    margin-top: 35px;

}

    #contents #release h4 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        padding: 15px 15px 0;
    }
    
    #contents #release .inner {
        padding: 15px;
    }
    
    #contents #release .img {
        display: inline;
        float: left;
        width: 112px;
    }
    #contents #release .img img{
        max-width: 100%;
    }
    
    #contents #release .txt {
        display: inline;
        float: left;
        padding-left: 40px;
    }
    
        #contents #release .txt p {
            font-size: 14px;
        }

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

#contents #release {
    background: #fff;
    display: block;
    float: none;    
    width: 94%;
    margin-left: 3%;
    margin-bottom: 40px;
    margin-top: 25px;
    border: solid 1px #ccc;
    border-radius: 8px;
}

    #contents #release h4 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        padding: 10px 10px 0;
    }
    
    #contents #release .inner {
        padding: 10px;
    }
    
    #contents #release .img {
        display: inline;
        float: left;
        margin-right: 5%;
    }
    
    
    #contents #release .txt {
        display: inline;
        float: left;
        width: 60%;
        padding-left: 0;
    }
	
	#contents #browser,
    #contents #mobile,
    #contents #cache,
    #contents #offline {
	    width: 85%;
        margin-left: 5%;
	}    
    #contents #offline a{
        font-weight:bold;
    }    

}

/*-------------------------------------------------------------------------
	Accordion
/*-----------------------------------------------------------------------*/
.accordion-container {
	position: relative;
	width: 90%;
	border-top: none;
	outline: 0;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	word-break: break-word;
    color: #000;
    margin: 20px 0 35px;
}
.accordion-container .accordion-title {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer!important;
	margin-top: 8px;
    background: #d0d0d0;
}
.accordion-title{
	position: relative;
}
.accordion-title:after {
	content: "";
	position: absolute;
	right: 25px;
	top: 38%;
	transition: all 0.2s ease-in-out;
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
    visibility: visible;
}
.accordion-title.open:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 45%;
}
.accordion-content {
	display: none;
	padding: 25px 20px 10px;
	font-size: 1rem;
	font-weight: 400;
    background: #f4f4f4;
}
.accordion-content h5 {
	font-weight: 500;
}
.accordion-content .words {
	margin-top: 15px;
	display: flex;
	align-items: center;
}
.accordion-content .words::after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background: #000;
	display: block;
	margin: -2px 0 0 10px;
}

@media screen and (max-width:839px) {
	.accordion-container {
		line-height: 3.5vw;
        width: 94%;
        margin: 0 auto 5vw;
	}
	.accordion-container .accordion-title {
		padding: 2vw 2vw;
        font-size: 2.25vw;
		margin-top: 8px;
	}
	.accordion-content {
		padding: 3vw 2vw 1vw;
        margin-left: 0%!important;
        width: auto!important;
	}
}

@media screen and (max-width:767px) {
	.accordion-container {
		line-height: 5vw;
	}
	.accordion-container .accordion-title {
		font-size: 2.5vw;
	}
	.accordion-content {
		padding: 6vw 4vw;
	}
}

@media screen and (max-width:706px) {
	.accordion-container .accordion-title {
        padding: 3.5vw 3.5vw;
		font-size: 4vw;
	}
}

/*-------------------------------------------------------------------------
	attention
/*-----------------------------------------------------------------------*/
.attention a {
    font-size: 0.8rem;
    border: 2px solid #aaa;
    display: inline-block;
    padding: 0.5rem 2rem;
    transition: 0.3s;
    margin-bottom: 3rem;
    position: relative;

}

.attention a:after {
    content: "\ff1e";
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    transition: 0.3s;
}    
.attention {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
display: flex;
justify-content: center;
}