@charset "utf-8";

@import "layout.css";


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


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


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

header {
	width:100%;
	height:350px;
	background:url(../img/bg_main_pc.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
header .logo{
	width:76px;
	height:20px;
	padding:20px 0 0 40px;
	margin-bottom: 50px;
}
header .header_contents{
	width:fit-content;
	float: right;
}
header .header_contents .main_title{
	width:100%;
	border:7px solid #000;
	border-radius:10px;
	position:relative;
	padding:10px 0 15px 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	float: right;
}
header .header_contents .main_title h1{
	font-size:46px;
	font-weight:bold;
	line-height:1.2;
	letter-spacing:2px;
}
header .header_contents .main_title h1 .small_title{
	font-size: 24px;
	letter-spacing:0;
	line-height: 2.5rem;
}
header .header_contents .main_title h1 .roboto{
	font-size:75px;
	font-weight:500;
}
header .header_contents .main_title h1 .title-ver {
	text-indent: -1rem;
    display: inline-block;
}
	#wpm1 header .header_contents .main_title h1 .title-ver	,
	#wpm0 header .header_contents .main_title h1 .title-ver {
		margin-right: 20px;
	}
	#wpm2 header .header_contents .main_title h1 .title-ver, 
	#wpm3 header .header_contents .main_title h1 .title-ver {
		margin-right: -12px;
		font-size: 2.75rem;
	}
	
.clock-image {
	position: absolute;
	width: 140px;
	right: -45px;
	top: -70px;
}
	#wpm2 .clock-image {
		right: 10px;
	}

@media screen and (max-width:839px) {
	header {
		height:auto;
		background:url(../img/bg_main_sp.jpg) no-repeat;
		background-size: cover;
		background-position: center;
		display: inline-block;
		margin-bottom: -0.1vw;
	}
	header .logo{
		width:20vw;
		height:auto;
		padding:4vw 4vw 7vw;
		margin-bottom: 0;
	}
	header .header_contents{
		width: 86%;
		margin: 0 7%;
		padding-bottom: 10vw;
	}

	header .header_contents .main_title{
		width:100%;
		border:1.6vw solid #000;
		border-radius:2vw;
		padding:2.5vw 0 2.5vw 3vw;
		background-color: #fff;
	}
	header .header_contents .main_title h1{
		font-size:8vw;
		letter-spacing:0;
	}
	header .header_contents .main_title h1 .small_title{
		font-size: 5vw;
		letter-spacing:0;
		line-height: 1.2;
	}
	header .header_contents .main_title h1 .roboto{
		font-size:9vw;
	}
	header .header_contents .main_title h1 .title-ver {
		text-indent: -2.5vw;
	}
		#wpm1 header .header_contents .main_title h1 .title-ver {
			margin-right: 0;
		}
		#wpm2 header .header_contents .main_title h1 .title-ver, 
		#wpm3 header .header_contents .main_title h1 .title-ver,
		#wpm0 header .header_contents .main_title h1 .title-ver {
			margin-right: -2.5vw;
			font-size: 7vw;
		}
		
	.clock-image {
		width: 27vw;
	}
		#wpm1 .clock-image, #wpm2 .clock-image, #wpm3 .clock-image, #wpm0 .clock-image {
			right: -6vw;
			top: -15.5vw;
		}
}


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

#wpm1 main {
	background:url(../../wpm1/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#wpm2 main {
	background:url(../../wpm2/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#wpm3 main {
	background:url(../../wpm3/common/img/bg_voice.svg);
	background-size:1px 100px;
}
#wpm0 main {
	background:url(../../wpm0/common/img/bg_voice.svg);
	background-size:1px 100px;
}

/*------------------------------------------------------------------------
	bookmark
/*-----------------------------------------------------------------------*/

/* .bookmark{
	padding:15px 0;
	display: flex;
	justify-content: center;
} */
.bookmark img {
	width: 27px;
	margin-right: 5px;
}
.bookmark p {
	font-size: 16px;
	font-weight: 600;
	line-height: 3.6;
}
.bookmark{
	display: flex;
	justify-content: center;
    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;
}


@media screen and (max-width:839px) {
	/* .bookmark{
		padding:3vw 0 5vw;
		display: block;
		text-align: center;
	} */
	.bookmark{
		display: block;
		width: 80%;
		font-size: 4vw;
		border: 1px dashed;
		border-radius: 10px;
		padding:5%;
	}
	/* .bookmark img {
		width: 6vw;
		margin-right: 6vw;
		padding-bottom: 1vw;
		display: inline;
	} */
	.bookmark img {
		position: absolute;
		width: 27px;
		top: -15px;
		left: 15px;
	}
	.bookmark p {
		font-size: 4vw;
		line-height: 1.7;
		display: inline;
	}
	.bookmark .sp_indent {
		text-indent: -5vw;
		display: inline-block;
	}
}


/*------------------------------------------------------------------------
	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;
}
	#attention .contents .attention a{
		margin-bottom:5rem;
	}
.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;
	padding: 0 0 60px 0;
	display: flex;
	align-items: start;
	justify-content: center;
}
.contents .sns li{
	display:inline;
	margin:0 0.5vw;
}

@media screen and (max-width:839px) {
	.contents{
		width:90%;
		padding:10% 0 0 0;
	}
	.contents .attention a{
		font-size: 3.5vw;
		border: 0.6vw solid #aaa;
		padding: 2.5vw 10vw;
		margin-bottom: 15vw;
		margin-top: 6vw;
	}
		#attention .contents .attention a{
			margin-bottom:25vw;
		}
	.contents .sns{
		padding: 0 0 15vw 0;
	}
	.contents .sns li{
		display:inline;
		margin:0 2vw;
	}
	
}



/*------------------------------------------------------------------------
	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),
.select dd:nth-child(12)
{
	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;
}

	#wpm1 .select dd a {
		border:3px solid #ff6676;
		transition:0.15s;
	}
	#wpm1 .select dd a:hover {
		background-color:#ff6676;
		color:#fff;
	}
	#wpm1 .select dd a:before {
		background:url(../../wpm1/common/img/icn_clock.svg) no-repeat ;
		color:#fff;
	}
	#wpm2 .select dd a {
		border:3px solid #3bb99c;
		transition:0.15s;
	}
	#wpm2 .select dd a:hover {
		background-color:#3bb99c;
		color:#fff;
	}
	#wpm2 .select dd a:before {
		background:url(../../wpm2/common/img/icn_clock.svg) no-repeat ;
		color:#fff;
	}
	#wpm3 .select dd a {
		border:3px solid #33aee3;
		transition:0.15s;
	}
	#wpm3 .select dd a:hover {
		background-color:#33aee3;
		color:#fff;
	}
	#wpm3 .select dd a:before {
		background:url(../../wpm3/common/img/icn_clock.svg) no-repeat ;
		color:#fff;
	}
	#wpm0 .select dd a {
		border:3px solid #f98f1b;
		transition:0.15s;
	}
	#wpm0 .select dd a:hover {
		background-color:#f98f1b;
		color:#fff;
	}
	#wpm0 .select dd a:before {
		background:url(../../wpm0/common/img/icn_clock.svg) no-repeat ;
		color:#fff;
	}

.select dt{
	font-size:16px;
    font-weight: 300;
	color:#fff;
	padding: 0 20px;
}
.select dt:before{
	content:"";
	display: inline-block;
	width:68px;
	height:40px;
}
	#wpm1 .select dt:before{
		background:url(../../wpm1/common/img/icn_listening.svg) no-repeat ;
	}
	#wpm2 .select dt:before{
		background:url(../../wpm2/common/img/icn_listening.svg) no-repeat ;
	}
	#wpm3 .select dt:before{
		background:url(../../wpm3/common/img/icn_listening.svg) no-repeat ;
	}
	#wpm0 .select dt:before{
		background:url(../../wpm0/common/img/icn_listening.svg) no-repeat ;
	}

.select dd a{
	font-size:24px;
    font-weight: 400;
}
.select_wpm1 dd a{
    line-height: 1.3;
}
.select dd a:before{
	content:"";
	background-size:40px 40px;
	display: inline-block;
	width:40px;
	height:40px;
	margin:0 10px 0 20px;
}
.select dd a:after, .select .sound-btn: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, .select .sound-btn:hover:after {
	background:url(../img/img_arrow_w.svg) no-repeat ;
}
.select-sound {
	padding: 0;
	margin-bottom: 50px;
}
.sound-btn {
	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;
	font-size:24px;
    font-weight: 400;
	padding-left: 35px;
}
	#wpm3 .wrapper {
        position: relative;
    }
    #wpm3 .select-sound {
        justify-content: end;
        position: absolute;
        right: 50px;
        bottom: 0;
    }
    #wpm3 .select dd{
        z-index: 10;
    }
	#wpm0 .wrapper {
        position: relative;
    }
    #wpm0 .select-sound {
        justify-content: center;
        position: absolute;
        right: 50px;
        bottom: 0;
    }
    #wpm0 .select dd{
        z-index: 10;
    }

@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 10vw 0;
	}
	.select dd:nth-child(3),
	.select dd:nth-child(6),
	.select dd:nth-child(9),
	.select dd:nth-child(12){
		margin: 0 0 10vw 0;
	}
	.select dt,
	.select dd a{
		width:90%;
		height:auto;
		margin: 10% auto;
		border-radius:3vw;
	}
	.select dt{
		font-size:4vw;
		font-weight: 300;
		color:#fff;
		padding: 4vw;
		justify-content: space-around;
		margin: 0 auto 10vw;
	}
	.select dt:before{
		background-size: 12vw 10vw;
		width: 17vw;
		height: 10vw;
		margin:0;
	}
	.select dd a{
		font-size:5vw;
	}
	.select dd a:before{
		background-size: 9vw;
		width: 9vw;
		height: 9vw;
		margin:4vw;
	}
	.select dd a:after, .select .sound-btn:after {
		background-size: 3vw 5vw;
		width: 5vw;
		height: 5vw;
		margin: 0 3% 0 8%;
	}
	.sound-btn {
		width:90%;
		height:auto;
		margin: 10% auto;
		border-radius:3vw;
		font-size:5vw;
		padding-left: 0;
		padding: 4.5vw 0 4.5vw 24vw;
	}
		#wpm3 .wrapper {
			position: static;
		}
		#wpm3 .select-sound {
			position: static;
			right: auto;
			bottom: auto;
		}
		#wpm0 .wrapper {
			position: static;
		}
		#wpm0 .select-sound {
			position: static;
			right: auto;
			bottom: auto;
		}
}



/*------------------------------------------------------------------------
	Attention
/*-----------------------------------------------------------------------*/
#spec,
#function,
#mobile,
#offline, 
.spec, 
#sucsess{
	font-size:1rem;
	width:860px;
	margin:0 auto ;
	padding-bottom:40px;
	color:#666666;
}
#offline {
	padding-bottom:60px;
}
#spec h3,
#function h3,
#mobile dt,
#offline .offline_title, 
.spec dt h3, 
#sucsess dt{
	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 .back3s::before {
		background: url(../img/audioplayer/btn_back3s.svg)no-repeat;
	}
	#function .skip3s::before {
		background: url(../img/audioplayer/btn_skip3s.svg)no-repeat;
	}
	#function .rewind::before {
		background: url(../img/audioplayer/btn_rewind.svg)no-repeat;
	}
	#function .noindent .rewind::before {
		margin: 0 5px 5px 5px;
	}
	#function .forward::before {
		background: url(../img/audioplayer/btn_forward.svg)no-repeat;
	}
	#function .unit_btn::before {
		width: 108px;
		height: 48px;
		background: url(../../wpm1/common/img/img_unit_btn.svg)no-repeat;
	}
	#function .speed_set::before {
		width: 350px;
		height: 30px;
		background: url(../../wpm1/common/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,
#function .attention,
#offline .attention{
	font-size:12px;
	margin:10px 0 0 0;
}
#offline a{
	text-decoration:underline;
}
#attention #spec .attention,
#attention #function .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,
	#sucsess,
	#mobile,
	#offline {
		font-size:4vw;
		width:90%;
		margin:0 auto;
		color:#666666;
		padding-bottom: 11vw;
	}
	.spec,
	#spec h3,
	#function h3,
	#sucsess dt,
	#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: 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;
	}
}