@charset "utf-8";

@import "layout.css";


/*------------------------------------------------------------------------
	color
/*-----------------------------------------------------------------------*/
:root {
	--j1qMaincolor: #00ae77;
	--j1qSubcolor:  #009996;
	--n1qMaincolor: #927F5E;
	--n1qSubcolor:  #9F9542;
}

/*------------------------------------------------------------------------
	Common
/*-----------------------------------------------------------------------*/
.wrap{
	width:960px;
	margin:0 auto;
}


@media screen and (max-width:839px) {
	.wrap{
		width:100%;
		margin:0 auto;
	}
}


/*------------------------------------------------------------------------
	Header
/*-----------------------------------------------------------------------*/

header {
	width:100%;
	height:550px;
	background:url(../../common/img/bg_main_pc.jpg) no-repeat;
	background-size: cover;
}
.header2022 {
	background-size: 72%;
	height:320px;
}
header .logo{
	width:76px;
	height:20px;
	padding:20px 0 0 40px;
}
header .header_contents{
	width:50%;
	margin:0 0 0 50%;
}
.header_contents_34q {
	width: 51%!important;
	margin:20px 0 0 49%!important;
}
.header2022 .header_contents{
	margin:20px 0 0 50%;
}
header .header_contents .main_title{
	width:100%;
	height: 200px;
	border:7px solid #000;
	border-radius:10px;
	position:relative;
	padding:10px 0 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
header .header_contents .main_title .year{
	width:170px;
	height:150px;
	position:relative;
	top:60px;
	left:-20px;
	text-align: center;
	line-height:1.2;
	font-weight:bold;
	float:left;
}
header .header_contents .main_title .year .roboto{
	font-size:38px;
}
header .header_contents .main_title .year .noto{
	font-size:28px;
}
header .header_contents .main_title .year .headphone{
	width:170px;
	position:relative;
	top:-120px;
	left:0px;
}
header .header_contents .main_title h1{
	font-size:55px;
	font-weight:bold;
	line-height:1.2;
	letter-spacing:6px;
}
header .header_contents .main_title h1 .ken{
	letter-spacing:0;
}
header .header_contents .main_title h1 .r{
	font-size:25px;
	vertical-align: text-top;
}
header .header_contents .main_title h1 .jun{
	font-size:62px;
	font-weight:500;
}
header .header_contents .main_title h1 .roboto{
	font-size:75px;
	font-weight:500;
}
header .header_contents .main_title h1 .q{
	font-size:35px;
}
header .header_contents .main_title h1 .middledot{
	font-size:35px;
	color: #000;
}
header .header_contents .main_title h1 .fourth{
	color: #ff6676;
}

header .header_contents h2{
	font-size:38px;
	font-weight:800;
	color:#ff4522;
	text-align: center;
	line-height: 1.3;
	margin:30px 0 0 0;
}
header .header_contents h2 .small{
	font-size:22px;
}
header .header_contents .sns{
	text-align:center;
	margin:5% 0;
	display: flex;
	align-items: start;
	justify-content: center;
}
header .header_contents .sns li{
	display:inline;
	margin:0 0.5vw;
}

header .header_contents .caption{
	font-size:12px;
}
header .header_contents .caption span{
	font-size:10px;
}


@media screen and (max-width:839px) {
	header {
		height:auto;
		background:url(../../common/img/bg_main_sp.jpg) no-repeat;
		background-size: contain;
	}
	.header2022 {
		background-size: 85%;
		height:auto;
	}
	header .logo{
		width:76px;
		height:20px;
		padding:4vw;
	}
	header .header_contents{
		width:80%;
		margin:15% 0 5% 10%;
	}
	.header2022 .header_contents, .header2022 .header_contents_34q {
		width: 80%!important;
		margin: 2% 0 10% 10%!important;
	}

	header .header_contents .main_title{
		width:100%;
		height: auto;
		border:1.5vw solid #000;
		border-radius:10px;
		padding:2vw 0 4vw;
		background: #fff;
	}
	header .header_contents .main_title .year{
		width:28vw;
		height:auto;
		top:9vw;
		left:-3vw;
	}
	header .header_contents .main_title .year .roboto{
		font-size:6vw;
	}
	header .header_contents .main_title .year .noto{
		font-size:4.5vw;
	}
	header .header_contents .main_title .year .headphone{
		width: 28vw;
		top: -19vw;
		left:0px;
	}
	header .header_contents .main_title h1{
		font-size:8vw;
		font-weight:bold;
		line-height:1.2;
		letter-spacing:0.5vw;
	}
	header .header_contents .main_title h1 .ken{
		letter-spacing:0;
	}
	header .header_contents .main_title h1 .r{
		font-size:4vw;
		vertical-align: text-top;
	}
	header .header_contents .main_title h1 .jun{
		font-size:11vw;
		font-weight:500;
	}
	header .header_contents .main_title h1 .roboto{
		font-size:13vw;
		font-weight:500;
	}
	header .header_contents .main_title h1 .q{
		font-size:6vw;
	}
	header .header_contents .main_title:after{
		display: none;
	}
	header .header_contents h2{
		font-size:8vw;
		font-weight:800;
		color:#ff4522;
		text-align: center;
		line-height: 1.3;
		margin:30px 0 0 0;
	}
	header .header_contents h2 .small{
		font-size:5vw;
	}
	header .header_contents .caption{
		font-size:3vw;
	}
	header .header_contents .caption span{
		font-size:10px;
	}
}


/*------------------------------------------------------------------------
	Main
/*-----------------------------------------------------------------------*/

#n1q main {
	background:url(../../1q_audio/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#j1q main {
	background:url(../../j1q_audio/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#n2q main {
	background:url(../../2q_audio/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#j2q main {
	background:url(../../j2q_audio/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#n3q main {
	background:url(../../3q_audio/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#n34q main {
	background:url(../../34q_kakomon_2022ta/common/img/bg_voice.svg);
	background-size:1px 100px;
}

/*------------------------------------------------------------------------
	Period
/*-----------------------------------------------------------------------*/

.period{
	width:100%;
	padding:15px 0;
}
.period dl{
	display: flex;
	justify-content:center;
}
.period .wrap .period_title{
	font-size:18px;
	font-weight:bold;
	background:#fff;
	padding:0 30px 0 20px;
	border-radius:25px;
	align-self: flex-start;
	margin:0 20px 0 0;

}
.period .wrap .period_title img{
	width:21px;
	height:22px;
	vertical-align: top;
	margin: 2px 20px 0 0;
}
.period .wrap .period_year{
	color:#fff;
	font-size:24px;
	line-height:1.5;
}
.period .wrap .period_year span{
	font-size:12px;
	font-weight:normal;
	padding: 5px 0 0 0;
	display: inline-block;
}


@media screen and (max-width:839px) {
	.period dl{
		display: inline-block;
		text-align: center;
	}
	.period .wrap .period_title{
		font-size:5vw;
		display: inline-block;
		margin:0 0 2vw 0;
	}
	.period .wrap .period_title img{
		width:5vw;
		height:auto;
		vertical-align: baseline;
		margin: 2px 20px 0 0;
	}
	.period .wrap .period_year{
		font-size:5vw;
	}
	.period .wrap .period_year span{
		font-size:3vw;
	}
}


/*------------------------------------------------------------------------
	Contents
/*-----------------------------------------------------------------------*/
.contents{
	background:#fff;
}
.contents .attention{
	text-align:center;
}
.contents .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;
}
.contents .attention a:hover{
	background:#aaa;
}
.contents .attention a:after{
	content:"＞";
	position:absolute;
	top:50%;
	right:5%;
	transform:translateY(-50%);
	transition:0.3s;
}
.contents .attention a:hover:after{
	right:2%;
}

.contents .sns{
	text-align:center;
	margin: 0 0 5% 0;
	display: flex;
	align-items: start;
	justify-content: center;
}
.contents .sns li{
	display:inline;
	margin:0 0.5vw;
}

.contents .caption{
	font-size:12px;
	width: 860px;
	margin: 0 auto;
	padding-bottom: 3%;
}
.contents .caption span{
	font-size:10px;
}

@media screen and (max-width:839px) {
	.contents{
		width:90%;
		padding:10% 0 0 0;
	}
	.contents .caption{
		font-size:3vw;
		width: 90%;
		padding-bottom: 10vw;
		padding-top: 7vw;
	}
	.contents .caption span{
		font-size:2.5vw;
	}
}


/*------------------------------------------------------------------------
	function
/*-----------------------------------------------------------------------*/


#function .sp_only{
    display: none;
}

#function h4 {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    /*border-bottom:1px solid;*/
    /*margin-bottom:1rem;*/
    color:#ff3300;
}
#function dt {
    font-size:0.9rem;
    font-weight: bold;
    margin:1rem 0 0.5rem 0;
    border-bottom: 1px solid;
    display: inline-block;
}
#function dt:before {
    content:"";
    background:url(../img/common/icn_check.svg) no-repeat;
    display: inline-block;
    width:1rem;
    height:1rem;
}
#function dd {
    margin-bottom:0.5rem;
}
#function span {
    font-weight: bold;
}
#function span.mode_box {
    background-color: #ff8000;
    padding: 0.15rem 0.5rem;
    color: #fff;
    margin-right: 0.5rem;
    border-radius: 3px;
}
#function .unit span {
    font-weight: bold;
    padding:0.3rem 1rem;
    margin-right:0.5rem;
    background:#fda429;
    color:#fff;
    border-radius:3px;
    display: inline-block;
    margin-bottom:0.5rem;
}
#function .speed span {
    font-weight: bold;
    padding:0.3rem 1rem;
    margin-right:0.5rem;
    background:#fda429;
    color:#fff;
    border-radius:3px;
    display: inline-block;
    margin-bottom:0.5rem;
	text-indent: 0;
}
#function .volume_btn span {
    font-weight: normal;
    font-size: 0.8rem;
}
#function #mode span {
    font-size: 0.75rem;
}
#function .red {
    color:#ff3300;
}
#function p {
    font-size: 14px;
    line-height: 150%;
    padding: 10px;
}

#function img {
    vertical-align: middle
}
#function .skip,
#function .back {
    margin:0.3rem 0.5rem 0.5rem 1.5rem;
}
#function .back_f {
    margin:0.3rem 0.5rem 0.5rem 0;
}
#function .volume{
    margin:0.3rem 0 0.5rem 0.5rem;
}
#function .unit,
#function .speed {
    margin-top:0.3rem;
}
#function .volume{
    height: 30px;
}
#function p:last-child {
    margin-bottom: 0px;
}
#function .times p{
    font-size:12px;
    padding:0;
}
#function .times table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.25rem 0;
}
#function .times table th, 
#function .times table td {
    border: solid 1px black;
    background: #fff;
    text-align: center;
    padding: 5px 0;
}
#function .times table th{
    width:calc(100% / 7);
    background: #fdf695;
}
#function .times table td span{
    font-size: 0.5rem;
    font-weight: normal;
    vertical-align: top;
}

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

    #function .sp_only{
        display: inherit;
    }
        #function p {
            font-size: 16px;
            line-height: 150%;
            padding: 10px;
        }
        
            #function p:last-child {
                margin-bottom: 0px;
            }

    .caution{
        width: 90%;
        margin-left: 5%;
    }
}


/*------------------------------------------------------------------------
	Bookmark
/*-----------------------------------------------------------------------*/
.bookmark{
	width:860px;
	text-align: center;
	font-size:16px;
	font-weight:bold;
	border-bottom:1px dashed;
	position:relative;
	margin:0 auto 50px auto;
	padding:10px 0 10px 0;
}
.bookmark img{
	width:27px;
}

@media screen and (max-width:839px) {
	.bookmark{
		width:80%;
		font-size:4vw;
		border:1px dashed;
    	border-radius: 10px;
		position:relative;
		padding:5%;
	}
	.bookmark img{
		position:absolute;
		top: -15px;
		left: 15px;
		width:27px;
	}
	.bookmark_2022 {
		font-size: 3.8vw;
	}
}


/*------------------------------------------------------------------------
	Select
/*-----------------------------------------------------------------------*/
.select{
	width:860px;
	margin:0 auto;
	padding:60px 0 0 0;
	display: flex;
	flex-wrap:wrap;
}
.select dt,
.select dd{
	margin: 0 40px 50px 0;
}
.select dd:nth-child(3),
.select dd:nth-child(6),
.select dd:nth-child(9)
{
	margin: 0 0 50px 0;
}
.select dt,
.select dd a{
	width:260px;
	height:120px;
	border-radius:8px;
	display: flex;
	align-items:center;
	justify-content:space-between;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#n1q .select dd:nth-child(1) a, #n1q .select dd:nth-child(2) a, #n1q .select dd:nth-child(3) a, #n1q .select dd:nth-child(7) a, #n1q .select dd:nth-child(8) a, #n1q .select dd:nth-child(9) a {
	border:3px solid var(--n1qMaincolor);
	transition:0.15s;
}
#n1q .select dd:nth-child(4) a, #n1q .select dd:nth-child(5) a, #n1q .select dd:nth-child(6) a, #n1q .select dd:nth-child(10) a, #n1q .select dd:nth-child(11) a, #n1q .select dd:nth-child(12) a {
	border:3px solid var(--n1qSubcolor);
	transition:0.15s;
}
#n1q .select dd:nth-child(1) a:hover, #n1q .select dd:nth-child(2) a:hover, #n1q .select dd:nth-child(3) a:hover, #n1q .select dd:nth-child(7) a:hover, #n1q .select dd:nth-child(8) a:hover, #n1q .select dd:nth-child(9) a:hover {
	background-color: var(--n1qMaincolor);
	color:#fff;
}
#n1q .select dd:nth-child(4) a:hover, #n1q .select dd:nth-child(5) a:hover, #n1q .select dd:nth-child(6) a:hover, #n1q .select dd:nth-child(10) a:hover, #n1q .select dd:nth-child(11) a:hover, #n1q .select dd:nth-child(12) a:hover {
	background-color: var(--n1qSubcolor);
	color:#fff;
}
#n1q .select dd:nth-child(1) a:before, #n1q .select dd:nth-child(2) a:before, #n1q .select dd:nth-child(3) a:before, #n1q .select dd:nth-child(7) a:before, #n1q .select dd:nth-child(8) a:before, #n1q .select dd:nth-child(9) a:before {
	background:url(../../1q_audio/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#n1q .select dd:nth-child(4) a:before, #n1q .select dd:nth-child(5) a:before, #n1q .select dd:nth-child(6) a:before, #n1q .select dd:nth-child(10) a:before, #n1q .select dd:nth-child(11) a:before, #n1q .select dd:nth-child(12) a:before {
	background:url(../../1q_audio/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}



#j1q .select dd:nth-child(1) a, #j1q .select dd:nth-child(2) a, #j1q .select dd:nth-child(3) a, #j1q .select dd:nth-child(7) a, #j1q .select dd:nth-child(8) a, #j1q .select dd:nth-child(9) a {
	border:3px solid var(--j1qMaincolor);
	transition:0.15s;
}
#j1q .select dd:nth-child(4) a, #j1q .select dd:nth-child(5) a, #j1q .select dd:nth-child(6) a, #j1q .select dd:nth-child(10) a, #j1q .select dd:nth-child(11) a, #j1q .select dd:nth-child(12) a {
	border:3px solid var(--j1qSubcolor);
	transition:0.15s;
}
#j1q .select dd:nth-child(1) a:hover, #j1q .select dd:nth-child(2) a:hover, #j1q .select dd:nth-child(3) a:hover, #j1q .select dd:nth-child(7) a:hover, #j1q .select dd:nth-child(8) a:hover, #j1q .select dd:nth-child(9) a:hover {
	background-color:var(--j1qMaincolor);
	color:#fff;
}
#j1q .select dd:nth-child(4) a:hover, #j1q .select dd:nth-child(5) a:hover, #j1q .select dd:nth-child(6) a:hover, #j1q .select dd:nth-child(10) a:hover, #j1q .select dd:nth-child(11) a:hover, #j1q .select dd:nth-child(12) a:hover {
	background-color:var(--j1qSubcolor);
	color:#fff;
}
#j1q .select dd:nth-child(1) a:before, #j1q .select dd:nth-child(2) a:before, #j1q .select dd:nth-child(3) a:before, #j1q .select dd:nth-child(7) a:before, #j1q .select dd:nth-child(8) a:before, #j1q .select dd:nth-child(9) a:before {
	background:url(../../j1q_audio/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#j1q .select dd:nth-child(4) a:before, #j1q .select dd:nth-child(5) a:before, #j1q .select dd:nth-child(6) a:before, #j1q .select dd:nth-child(10) a:before, #j1q .select dd:nth-child(11) a:before, #j1q .select dd:nth-child(12) a:before {
	background:url(../../j1q_audio/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}

#n2q .select dd:nth-child(1) a, #n2q .select dd:nth-child(2) a, #n2q .select dd:nth-child(3) a, #n2q .select dd:nth-child(7) a, #n2q .select dd:nth-child(8) a, #n2q .select dd:nth-child(9) a {
	border:3px solid #7344ba;
	transition:0.15s;
}
#n2q .select dd:nth-child(4) a, #n2q .select dd:nth-child(5) a, #n2q .select dd:nth-child(6) a, #n2q .select dd:nth-child(10) a, #n2q .select dd:nth-child(11) a, #n2q .select dd:nth-child(12) a {
	border:3px solid #5367d3;
	transition:0.15s;
}
#n2q .select dd:nth-child(1) a:hover, #n2q .select dd:nth-child(2) a:hover, #n2q .select dd:nth-child(3) a:hover, #n2q .select dd:nth-child(7) a:hover, #n2q .select dd:nth-child(8) a:hover, #n2q .select dd:nth-child(9) a:hover {
	background-color:#7344ba;
	color:#fff;
}
#n2q .select dd:nth-child(4) a:hover, #n2q .select dd:nth-child(5) a:hover, #n2q .select dd:nth-child(6) a:hover, #n2q .select dd:nth-child(10) a:hover, #n2q .select dd:nth-child(11) a:hover, #n2q .select dd:nth-child(12) a:hover {
	background-color:#5367d3;
	color:#fff;
}
#n2q .select dd:nth-child(1) a:before, #n2q .select dd:nth-child(2) a:before, #n2q .select dd:nth-child(3) a:before, #n2q .select dd:nth-child(7) a:before, #n2q .select dd:nth-child(8) a:before, #n2q .select dd:nth-child(9) a:before {
	background:url(../../2q_audio/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#n2q .select dd:nth-child(4) a:before, #n2q .select dd:nth-child(5) a:before, #n2q .select dd:nth-child(6) a:before, #n2q .select dd:nth-child(10) a:before, #n2q .select dd:nth-child(11) a:before, #n2q .select dd:nth-child(12) a:before {
	background:url(../../2q_audio/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}

#j2q .select dd:nth-child(1) a, #j2q .select dd:nth-child(2) a, #j2q .select dd:nth-child(3) a, #j2q .select dd:nth-child(7) a, #j2q .select dd:nth-child(8) a, #j2q .select dd:nth-child(9) a {
	border:3px solid #009bd2;
	transition:0.15s;
}
#j2q .select dd:nth-child(4) a, #j2q .select dd:nth-child(5) a, #j2q .select dd:nth-child(6) a, #j2q .select dd:nth-child(10) a, #j2q .select dd:nth-child(11) a, #j2q .select dd:nth-child(12) a {
	border:3px solid #085eab;
	transition:0.15s;
}
#j2q .select dd:nth-child(1) a:hover, #j2q .select dd:nth-child(2) a:hover, #j2q .select dd:nth-child(3) a:hover, #j2q .select dd:nth-child(7) a:hover, #j2q .select dd:nth-child(8) a:hover, #j2q .select dd:nth-child(9) a:hover {
	background-color:#009bd2;
	color:#fff;
}
#j2q .select dd:nth-child(4) a:hover, #j2q .select dd:nth-child(5) a:hover, #j2q .select dd:nth-child(6) a:hover, #j2q .select dd:nth-child(10) a:hover, #j2q .select dd:nth-child(11) a:hover, #j2q .select dd:nth-child(12) a:hover {
	background-color:#085eab;
	color:#fff;
}
#j2q .select dd:nth-child(1) a:before, #j2q .select dd:nth-child(2) a:before, #j2q .select dd:nth-child(3) a:before, #j2q .select dd:nth-child(7) a:before, #j2q .select dd:nth-child(8) a:before, #j2q .select dd:nth-child(9) a:before {
	background:url(../../j2q_audio/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#j2q .select dd:nth-child(4) a:before, #j2q .select dd:nth-child(5) a:before, #j2q .select dd:nth-child(6) a:before, #j2q .select dd:nth-child(10) a:before, #j2q .select dd:nth-child(11) a:before, #j2q .select dd:nth-child(12) a:before {
	background:url(../../j2q_audio/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}

#n3q .select dd:nth-child(1) a, #n3q .select dd:nth-child(2) a, #n3q .select dd:nth-child(3) a, #n3q .select dd:nth-child(7) a, #n3q .select dd:nth-child(8) a, #n3q .select dd:nth-child(9) a {
	border:3px solid #ff903d;
	transition:0.15s;
}
#n3q .select dd:nth-child(4) a, #n3q .select dd:nth-child(5) a, #n3q .select dd:nth-child(6) a, #n3q .select dd:nth-child(10) a, #n3q .select dd:nth-child(11) a, #n3q .select dd:nth-child(12) a {
	border:3px solid #ff4003;
	transition:0.15s;
}
#n3q .select dd:nth-child(1) a:hover, #n3q .select dd:nth-child(2) a:hover, #n3q .select dd:nth-child(3) a:hover, #n3q .select dd:nth-child(7) a:hover, #n3q .select dd:nth-child(8) a:hover, #n3q .select dd:nth-child(9) a:hover {
	background-color:#ff903d;
	color:#fff;
}
#n3q .select dd:nth-child(4) a:hover, #n3q .select dd:nth-child(5) a:hover, #n3q .select dd:nth-child(6) a:hover, #n3q .select dd:nth-child(10) a:hover, #n3q .select dd:nth-child(11) a:hover, #n3q .select dd:nth-child(12) a:hover {
	background-color:#ff4003;
	color:#fff;
}
#n3q .select dd:nth-child(1) a:before, #n3q .select dd:nth-child(2) a:before, #n3q .select dd:nth-child(3) a:before, #n3q .select dd:nth-child(7) a:before, #n3q .select dd:nth-child(8) a:before, #n3q .select dd:nth-child(9) a:before {
	background:url(../../3q_audio/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#n3q .select dd:nth-child(4) a:before, #n3q .select dd:nth-child(5) a:before, #n3q .select dd:nth-child(6) a:before, #n3q .select dd:nth-child(10) a:before, #n3q .select dd:nth-child(11) a:before, #n3q .select dd:nth-child(12) a:before {
	background:url(../../3q_audio/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}
/**/
#n34q .select dd:nth-child(1) a, #n34q .select dd:nth-child(2) a, #n34q .select dd:nth-child(3) a, #n34q .select dd:nth-child(4) a {
	border:3px solid #ff6676;
	transition:0.15s;
}
#n34q .select dd:nth-child(5) a, #n34q .select dd:nth-child(6) a, #n34q .select dd:nth-child(7) a, #n34q .select dd:nth-child(8) a {
	border:3px solid #00aa8b;
	transition:0.15s;
}
#n34q .select dd:nth-child(1) a:hover, #n34q .select dd:nth-child(2) a:hover, #n34q .select dd:nth-child(3) a:hover, #n34q .select dd:nth-child(4) a:hover {
	background-color:#ff6676;
	color:#fff;
}
#n34q .select dd:nth-child(5) a:hover, #n34q .select dd:nth-child(6) a:hover, #n34q .select dd:nth-child(7) a:hover, #n34q .select dd:nth-child(8) a:hover {
	background-color:#00aa8b;
	color:#fff;
}
#n34q .select dd:nth-child(1) a:before, #n34q .select dd:nth-child(2) a:before, #n34q .select dd:nth-child(3) a:before, #n34q .select dd:nth-child(4) a:before {
	background:url(../../34q_kakomon_2022ta/common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
#n34q .select dd:nth-child(5) a:before, #n34q .select dd:nth-child(6) a:before, #n34q .select dd:nth-child(7) a:before, #n34q .select dd:nth-child(8) a:before {
	background:url(../../34q_kakomon_2022ta/common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}

.select dt{
	font-size:16px;
    font-weight: 300;
	color:#fff;
	padding: 0 10px;
}
.select dt:before{
	content:"";
	background-size:53px 41px;
	display: inline-block;
	width:53px;
	height:41px;
	margin:0 10px;
}
	#n1q .select dt:before{
		background:url(../../1q_audio/common/img/icn_listening.svg) no-repeat ;
	}
	#j1q .select dt:before{
		background:url(../../j1q_audio/common/img/icn_listening.svg) no-repeat ;
	}
	#n2q .select dt:before{
		background:url(../../2q_audio/common/img/icn_listening.svg) no-repeat ;
	}
	#j2q .select dt:before{
		background:url(../../j2q_audio/common/img/icn_listening.svg) no-repeat ;
	}
	#n3q .select dt:before{
		background:url(../../3q_audio/common/img/icn_listening.svg) no-repeat ;
	}
	#n34q .select dt:before{
		background:url(../../34q_kakomon_2022ta/common/img/icn_listening.svg) no-repeat ;
	}

.select dd a{
	font-size:24px;
    font-weight: 400;
}
.select_34q dd a{
    line-height: 1.3;
}
.select dd a:before{
	content:"";
	background-size:40px 40px;
	display: inline-block;
	width:40px;
	height:40px;
	margin:0 20px 0 20px;
}
.select dd a:after{
	content:"";
	background:url(../img/img_arrow.svg) no-repeat ;
	background-size:11px 20px;
	display: inline-block;
	width:11px;
	height:20px;
	margin:0 20px 0 20px;
}
.select dd:hover a:after{
	background:url(../img/img_arrow_w.svg) no-repeat ;
}
@media screen and (min-width:840px) {
	.select dd:nth-child(3n) a{
	    margin-right:0;
	}
}

@media screen and (max-width:839px) {
	.select{
		width:100%;
		margin:0 auto;
		padding:0;
		display: block;
	}
	.select dt,
	.select dd{
		margin: 0 0 50px 0;
	}
	.select dt,
	.select dd a{
		width:90%;
		height:auto;
		margin: 10% auto;
		border-radius:8px;
		display: flex;
		align-items:center;
		justify-content:space-between;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.select dt{
		font-size:4vw;
	    font-weight: 300;
		color:#fff;
		padding: 4vw;
	}
	.select dt:before{
	    background-size: 12vw 10vw;
	    width: 12vw;
	    height: 10vw;
		margin:0;
	}
	.select dd a{
		font-size:5vw;
	    font-weight: 400;
	}
	#n34q .select dd a{
		font-size:4.85vw;
	}
	.select dd a:before{
		content:"";
	    background-size: 9vw;
	    display: inline-block;
	    width: 9vw;
	    height: 9vw;
		margin:4vw;
	}
		#n1q .select dd a:before{
			background:url(../../1q_audio/common/img/icn_voice_main.svg) no-repeat ;
		}
		#j1q .select dd a:before{
			background:url(../../j1q_audio/common/img/icn_voice_main.svg) no-repeat ;
		}
		#n2q .select dd a:before{
			background:url(../../2q_audio/common/img/icn_voice_main.svg) no-repeat ;
		}
		#j2q .select dd a:before{
			background:url(../../j2q_audio/common/img/icn_voice_main.svg) no-repeat ;
		}
		#n3q .select dd a:before{
			background:url(../../3q_audio/common/img/icn_voice_main.svg) no-repeat ;
		}
		#n34q .select dd a:before{
			background:url(../../34q_kakomon_2022ta/common/img/icn_voice_main.svg) no-repeat ;
		}
	.select dd a:after{
		content:"";
		background:url(../img/img_arrow.svg) no-repeat ;
	    background-size: 3vw 5vw;
	    display: inline-block;
	    width: 5vw;
	    height: 5vw;
	    margin: 0 3% 0 8%;
	}
}


/*------------------------------------------------------------------------
	Spec
/*-----------------------------------------------------------------------*/
#attention div:after, ul:after, dl:after {
    content: none;
}
.spec,
#spec,
#function,
#mobile,
#sucsess,
#offline {
	font-size:1rem;
	width:860px;
	margin:0 auto ;
	padding-bottom:40px;
	color:#666666;
}
#offline {
	padding-bottom:60px;
}
#spec h3,
#function h3,
#mobile dt,
#sucsess dt,
#offline .offline_title{
	font-weight:bold;
	background:#666666;
	color:#fff;
	padding:5px 10px;
	margin-bottom:20px;
}
#offline .offline_title{
	margin-bottom: 5px;
}
#mobile dd span, #sucsess dd span{
	color:#f21b00;
}
#offline dt span{
	border: 1px solid #666;
	padding: 0.2rem 1rem;
	margin: 20px 0 0.5rem;
	display: inline-block;
}
#spec dt, 
#function dt {
	margin:10px 0 5px 0;
	font-weight: bold;
}
#function dd:not(.attention) {
	text-indent: 1rem;
}
#function .noindent {
	text-indent: 0!important;
	margin-left: 1rem;
}
#function .img::before {
	content:'';
	display: inline-block;
	width: 35px;
	height: 35px;
	vertical-align: middle;
	margin: 0 8px 5px 0;
}
	#function .back5s::before {
		background: url(../img/audioplayer/btn_back5s.svg)no-repeat;
	}
	#function .skip5s::before {
		background: url(../img/audioplayer/btn_skip5s.svg)no-repeat;
	}
	#function .rewind::before {
		background: url(../img/audioplayer/btn_rewind.svg)no-repeat;
	}
	#function .noindent .rewind::before {
		margin: 5px;
	}
	#function .forward::before {
		background: url(../img/audioplayer/btn_forward.svg)no-repeat;
	}
	#function .unit_btn::before {
		width: 108px;
		height: 48px;
		background: url(../img/img_unit_btn.svg)no-repeat;
	}
	#function .speed_set::before {
		width: 350px;
		height: 30px;
		background: url(../img/img_speed_set.svg)no-repeat;
	}
	#function .repeat::before {
		background: url(../img/audioplayer/btn_repeat_off.svg)no-repeat;
	}
	#function .volume_set::before {
		background: url(../img/img_volume_set.svg)no-repeat;
		width: 108px;
		height: 30px;
	}
#function .pc_sp {
	font-weight: bold;
}
#spec .attention,
#offline .attention{
	font-size:12px;
	margin:10px 0 0 0;
}
#function .attention{
	font-size:12px;
	font-weight: 500;
}
#offline a{
	text-decoration:underline;
}
#attention #spec .attention,
#attention #offline .attention{
	text-align:left;
}

#attention_menu {
	width: 860px;
	margin:0 auto ;
	padding-bottom:30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#attention_menu li {
	width: 46%;
	font-size: 1rem;
	font-weight: bold;
	padding: 10px;
	border-bottom: 2px solid #888;
	margin-bottom: 10px;
}
#attention_menu li a {
	display: flex;
	justify-content: space-between;
	color: #333;
	align-items: center;
}
#attention_menu li a::after{
	content: "";
    background: url(../img/img_arrow_attention.svg) no-repeat;
    display: inline-block;
    width: 9px;
    height: 16px;
    margin-right: 10px;
	transform: rotate(90deg);
}


@media screen and (max-width:839px) {
	#attention .contents {
		padding: 0;
	}

	.spec,
	#spec,
	#function,
	#mobile,
	#sucsess,
	#offline {
		font-size:4vw;
		width:90%;
		margin:0 auto;
		color:#666666;
		padding-bottom: 11vw;
	}
	.spec h3,
	#spec h3,
	#function h3,
	#mobile dt,
	#sucsess dt
	#offline .offline_title{
		padding:2vw;
		margin-bottom: 7vw;
	}
	#offline .offline_title {
		margin-bottom: 2vw;
	}
	#spec dt, 
	#function dt {
		margin:4vw 0 1.5vw 0;
	}
	#function dd:not(.attention) {
		text-indent: 0;
	}
	#function .noindent {
		margin-left: 0;
	}
	#function .img::before {
		width: 10vw;
		height: 10vw;
		margin: 0 2vw 1.25vw 0;
	}
		#function .unit_btn::before {
			width: 30vw;
			height: 14vw;
		}
		#function .speed_set::before {
			width: 67vw;
			height: 6vw;
		}
		#function .repeat::before {
			width: 8vw;
			height: 8vw;
		}
		#function .volume_set::before {
			width: 31vw;
			height: 8.5vw;
		}
	#offline {
		padding-bottom: 15vw;
	}
	#offline dt span{
		padding: 1.5vw 2vw;
		margin: 5vw 0 3vw;
	}
	#spec .attention,
	#function .attention,
	#offline .attention{
		font-size:3vw;
		margin:3vw 0 0 0;
	}

	#attention_menu {
		width: 90%;
		padding-bottom:11vw;
		display: block;
	}
	#attention_menu li {
		width: auto;
		font-size: 4vw;
		padding: 5vw 2.5vw 4vw;
		margin-bottom: 0;
		line-height: 1.3;
		border-bottom-width: 0.6vw;
	}
	#attention_menu li a::after{
		width: 2.5vw;
		height: 5vw;
		margin-right: 3vw;
	}
}