@charset "utf-8";

@import "layout.css";


/*------------------------------------------------------------------------
	Common
/*-----------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}
.wrap{
	width:960px;
	margin:0 auto;
}
input[type="submit"] {
	-webkit-appearance: none;
}


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


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

header {
	width:100%;
	height:330px;
	background:url(../../common/img/bg_main_pc.jpg) no-repeat;
	background-size: 72%;
}
header .logo{
	width:76px;
	height:20px;
	padding:20px 0 0 40px;
}
header .header_contents{
	width:50%;
	margin:10px 0 0 50%;
}
	#kobeshigaidai header .header_contents, #tougaidai header .header_contents{
		width:55%;
		margin:0 0 0 45%;
	}
header .header_contents .main_title{
	width:100%;
	height: 170px;
	border:7px solid #000;
	border-radius:10px;
	position:relative;
	-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:72px;
	left:-24px;
	text-align: center;
	line-height:1.25;
	font-weight:bold;
	float:left;
}
header .header_contents .main_title .year .roboto{
	font-size:38px;
}
header .header_contents .main_title .year .noto{
	font-size:20px;
}
header .header_contents .main_title .year .headphone{
	width:185px;
	position:relative;
	top:-112px;
	left:-8px;
}
header .header_contents .main_title h1{
	font-size:55px;
	font-weight:bold;
	line-height:1.65;
}
	#kobeshigaidai header .header_contents .main_title h1, #tougaidai header .header_contents .main_title h1{
		font-size:58px;
		line-height:1.3;
	}
header .header_contents .main_title h1 .smart{
	color: #fff;
	font-size: 23px;
	font-weight: 500;
	display: inline-block;
	padding: 5px 42px 5px 42px;
	background-color: #009bd2;
	border-radius: 32px;
}
header .header_contents h2{
	font-size:38px;
	font-weight:800;
	color:#ff4522;
	text-align: center;
	line-height: 1.3;
	margin:20px 0 0 0;
}
header .header_contents .header_caption {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	margin-top: 20px;
}


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: 75%;
	}
	header .logo{
		width:76px;
		height:20px;
		padding:4vw;
	}
	header .header_contents{
		width:80%;
		margin:8% 0 8% 10%;
	}

	header .header_contents .main_title{
		width:100%;
		height: auto;
		border:1.5vw solid #000;
		border-radius:10px;
		padding:4vw 0 5vw;
		background: #fff;
	}
	header .header_contents .main_title .year{
		width: 31vw;
		height:17vw;
		top: 9vw;
		left: -4vw;
	}
	header .header_contents .main_title .year .roboto{
		font-size:6vw;
	}
	header .header_contents .main_title .year .noto{
		font-size:3.6vw;
	}
	header .header_contents .main_title .year .headphone{
		width: 33vw;
		top: -20vw;
		left: -1vw;
	}
	header .header_contents .main_title h1{
		font-size: 8.5vw;
		font-weight:bold;
		line-height:1.2;
	}
	header .header_contents .main_title h1 .sub {
		font-size: 6vw;
		line-height: 1.1;
		letter-spacing: 0.1rem;
	}
	header .header_contents .main_title h1 .roboto{
		font-size:13vw;
		font-weight:500;
	}
	header .header_contents .main_title h1 .smart{
		color: #fff;
		font-size: 4vw;
		font-weight: 500;
		margin-top: 1vh;
		display: inline-block;
		padding: 1.5vw 5vw 2.3vw 5vw;
		background-color: #009bd2;
		border-radius: 4.5vw;
	}
	header .header_contents h2{
		font-size:8vw;
		font-weight:800;
		color:#ff4522;
		text-align: center;
		line-height: 1.3;
		margin:5% 0 0 0;
	}
	header .header_contents .main_title:after{
		display: none;
	}
	header .header_contents .header_caption{
		font-size:3.8vw;
		margin-bottom: 10px;
	}
	header .header_contents .caption{
		font-size:3vw;
	}
	header .header_contents .caption span{
		font-size:10px;
	}
}


/*------------------------------------------------------------------------
	Main
/*-----------------------------------------------------------------------*/
main {
	background:url(../../common/img/bg_voice.svg);
	background-size:1px 100px;
}
#attention main {
	background: none;
}

/*------------------------------------------------------------------------
	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.35;
}
.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 .caption{
	font-size:14px;
	width: 860px;
	margin: 0 auto;
	padding-bottom: 3%;
	color: #666;
}
	.contents .cap_omit{
		padding-bottom: 5%;
	}
.contents .caption .indent{
	padding-left: 14px;
}

@media screen and (max-width:839px) {
	.contents{
		width:90%;
		padding:10% 0 0 0;
	}
	.contents .caption{
		font-size:3.2vw;
		width: 90%;
		padding-bottom: 10vw;
		padding-top: 7vw;
	}
		.contents .cap_omit{
			padding-bottom: 16vw;
		}
	.contents .caption .indent{
		padding-left: 3.2vw;
	}
}


/*------------------------------------------------------------------------
	Bookmark
/*-----------------------------------------------------------------------*/
.bookmark{
	width:860px;
	text-align: center;
	font-size:16px;
	font-weight:bold;
	border-bottom:1px dashed;
	position:relative;
	margin:0 auto 60px auto;
	padding:30px 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%;
		margin: 0 auto 15% auto;
	}
	.bookmark img{
		position:absolute;
		top: -15px;
		left: 15px;
		width:27px;
	}
	.bookmark_2022 {
		font-size: 3.6vw;
	}
}


/*------------------------------------------------------------------------
	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:100px;
	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 dd:nth-child(1) a, .select dd:nth-child(2) a, .select dd:nth-child(3) a, .select dd:nth-child(7) a, .select dd:nth-child(8) a, .select dd:nth-child(9) a {
	border:3px solid #33a6de;
	transition:0.15s;
}
.select dd:nth-child(4) a, .select dd:nth-child(5) a, .select dd:nth-child(6) a, .select dd:nth-child(10) a, .select dd:nth-child(11) a, .select dd:nth-child(12) a {
	border:3px solid #33a6de;
	transition:0.15s;
}
.select dd:nth-child(1) a:hover, .select dd:nth-child(2) a:hover, .select dd:nth-child(3) a:hover, .select dd:nth-child(7) a:hover, .select dd:nth-child(8) a:hover, .select dd:nth-child(9) a:hover {
	background-color:#33a6de;
	color:#fff;
}
.select dd:nth-child(4) a:hover, .select dd:nth-child(5) a:hover, .select dd:nth-child(6) a:hover, .select dd:nth-child(10) a:hover, .select dd:nth-child(11) a:hover, .select dd:nth-child(12) a:hover {
	background-color:#33a6de;
	color:#fff;
}
.select dd:nth-child(1) a:before, .select dd:nth-child(2) a:before, .select dd:nth-child(3) a:before, .select dd:nth-child(7) a:before, .select dd:nth-child(8) a:before, .select dd:nth-child(9) a:before {
	background:url(../../common/img/icn_voice_main.svg) no-repeat ;
	color:#fff;
}
.select dd:nth-child(4) a:before, .select dd:nth-child(5) a:before, .select dd:nth-child(6) a:before, .select dd:nth-child(10) a:before, .select dd:nth-child(11) a:before, .select dd:nth-child(12) a:before {
	background:url(../../common/img/icn_voice_sub.svg) no-repeat ;
	color:#fff;
}
	.select dd.grayout a {
		border:3px solid #d9d9d9;
		background: #d9d9d9;
		cursor: default;
		pointer-events: none;
	}
	.select dd.grayout a:hover {
		background-color:#d9d9d9;
		color:#000;
	}
	.select dd.grayout a:before {
		background: none;
	}

.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;
	background:url(../../common/img/icn_listening.svg) no-repeat ;
}

.select dd a{
	font-size:24px;
    font-weight: 400;
}
.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.grayout a:after{
		background:none ;
	}
.select dd:hover a:after{
	background:url(../img/img_arrow_w.svg) no-repeat ;
}
	.select dd.grayout:hover a:after{
		background:none ;
	}
.select .smaller_index {
	line-height: 1.35;
}
.select .smaller_sub {
	font-size: 1.1rem;
	letter-spacing: -0.1rem;
	display: contents;
	line-height: 1.5;
}

@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:3.8vw;
	    font-weight: 300;
		color:#fff;
		padding: 4vw;
		margin: 0 auto 10%;
	}
	.select dt:before{
	    background-size: 12vw 10vw;
	    width: 12vw;
	    height: 10vw;
		margin:0;
	}
	.select dd a{
		font-size:5vw;
	    font-weight: 400;
	}
	.select dd a:before{
		content:"";
	    background-size: 9vw;
	    display: inline-block;
	    width: 9vw;
	    height: 9vw;
		margin:4vw;
		background:url(../../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%;
	}
	.select .small_index a, .select .smaller_index a{
		font-size:4.85vw;
	}
	.select .smaller_sub {
		font-size: 4.85vw;
		letter-spacing: 0;
	}
}


/*------------------------------------------------------------------------
	Spec
/*-----------------------------------------------------------------------*/
.spec,
#spec,
#function,
#mobile,
#offline {
	font-size:1rem;
	width:860px;
	margin: -30px auto 0;
	padding-bottom:40px;
	color:#666666;
	padding-top: 30px;
}
.spec {
	padding-bottom:60px;
}
#offline {
	padding-bottom:60px;
}
.spec h3,
#spec h3,
#function h3,
#mobile 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{
	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: 113px;
		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;
	text-align: left;
}
#function .attention{
	font-size:12px;
	font-weight: 500;
}
#offline a{
	text-decoration:underline;
}
#attention .spec .attention,
#attention #offline .attention{
	text-align:left;
}
#attention div:after, ul:after, dl:after {
    content: none;
}
#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,
	#offline {
		font-size:4vw;
		width:90%;
		margin: -5vw auto 0;
		color:#666666;
		padding-bottom: 11vw;
		padding-top: 5vw;
	}
	.spec h3,
	#spec h3,
	#function h3,
	#mobile 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: 32vw;
			height: 14vw;
			background: url(../img/img_unit_btn_sp.svg)no-repeat;
		}
		#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;
	}
}