@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:550px;
	background:url(../../common/img/bg_main_pc.jpg) no-repeat;
	background-size: cover;
}
header .logo{
	width:76px;
	height:45px;
	padding:20px 0 0 40px;
}
header .header_contents{
	width:50%;
	margin:0 0 0 50%;
}
header .header_contents .main_title{
	width:100%;
	height: 228px;
	border:7px solid #000;
	border-radius:10px;
	position:relative;
	padding:12px 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:185px;
	height:40px;
	position:relative;
	top:30px;
	left:-25px;
	text-align: center;
	line-height:1.2;
	font-weight:bold;
	float:left;
}
header .header_contents .main_title .year .roboto{
	font-size: 33px;
	line-height: 1;
	font-weight: 600;
	color: #f21b00;
}
header .header_contents .main_title .year .roboto span{
	font-size: 120%;
}
header .header_contents .main_title .year .headphone{
	width:185px;
	position:relative;
	top: -127px;
}
header .header_contents .main_title h1 {
	text-align: right;
	padding-right: 5%;
}
header .header_contents .main_title h1 .test{
	font-size:40px;
	font-weight:600;
	line-height:1.4;
	padding-right: 7px;
}
header .header_contents .main_title h1 .listening{
	font-size:54px;
	font-weight:600;
	line-height:1.2;
	letter-spacing:1.5px;
}
header .header_contents .main_title h1 .listening .surely{
	color: #f21b00;
}
header .header_contents .main_title h1 .listening .possible{
	font-size:85%;
}


@media screen and (max-width:839px) {
	header {
		height:auto;
		background:url(../../common/img/bg_main_sp.jpg) no-repeat;
		background-size: contain;
	}
	header .logo{
		width:76px;
		height:20px;
		padding:4vw;
	}
	header .header_contents{
		width:80%;
		margin:18% 0 5% 10%;
	}
	header .header_contents .main_title{
		width:100%;
		height: auto;
		border:1.5vw solid #000;
		border-radius:10px;
		padding:3vw 0 4vw;
		background: #fff;
	}
	header .header_contents .main_title .year{
		width:30vw;
		height:1vw;
		top:2.5vw;
		left:-5vw;
	}
	header .header_contents .main_title .year .roboto{
		font-size:5.5vw;
		line-height: 6vw;
	}
	header .header_contents .main_title .year .noto{
		font-size:4.5vw;
	}
	header .header_contents .main_title .year .headphone{
		width: 30vw;
		top: -19.5vw;
	}
	header .header_contents .main_title h1 .college{
		font-size:6vw;
	}
	header .header_contents .main_title h1 .test{
		font-size:7vw;
		line-height:1.2;
		letter-spacing:0.5vw;
		padding-bottom: 1vw;
	}
	header .header_contents .main_title h1 .listening{
		font-size: 9vw;
		font-weight:600;
		line-height:10vw;
		letter-spacing:0.5vw;
	}
	header .header_contents .main_title h1 .listening .surely{
		color: #f21b00;
	}
	header .header_contents .main_title h1 .listening .possible{
		font-size:85%;
	}
	
	
}


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


#smart_start main {
	background:url(../../listening/common/img/bg_voice.svg);
	background-size:1px 100px;
}

/*------------------------------------------------------------------------
	Pontents
/*-----------------------------------------------------------------------*/

.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;
}


@media screen and (max-width:839px) {
	.contents{
		width:90%;
	}
}


/*------------------------------------------------------------------------
	Bookmark
/*-----------------------------------------------------------------------*/
.bookmark{
	width:860px;
	text-align: center;
	font-size:16px;
	font-weight:bold;
	border-top:1px dashed;
	position:relative;
	margin:0 auto 0 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: -3vw;
		left: 3vw;
		width:8.5vw;
	}
}


/*------------------------------------------------------------------------
	Select
/*-----------------------------------------------------------------------*/
.select{
	width:860px;
	margin:0 auto;
	padding:60px 0 0 0;
	display: flex;
	flex-wrap:wrap;
}
.select dt,
.select dd a{
	width:260px;
	height:100px;
	margin: 0 40px 50px 0;
	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;
}

#smart_start .select dd a {
	border:3px solid #f65f4c;
	transition:0.15s;
}

#smart_start .select dd a:hover {
	background-color:#f65f4c;
	color:#fff;
}

#smart_start .select dd a:before {
	background-image:url(../../listening/common/img/icn_voice_main.svg);
	background-repeat: 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;
}
	#smart_start .select dt:before{
		background-image:url(../../listening/common/img/icn_listening.svg);
		background-repeat: no-repeat;
	}

.select dd a{
	font-size:23px;
    font-weight: 400;
	line-height: 28px;
}
.select dd a:before{
	content:"";
	background-size:40px 40px;
	display: inline-block;
	width:40px;
	height:40px;
	margin:0 20px 0 25px;
}
.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 a:hover: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%;
		padding-top:1vw;
		display: block;
	}
	.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.7vw;
	    font-weight: 300;
		color:#fff;
		padding: 4vw;
	}
	.select dt:before{
		content:"";
		background-size:contain;
		background-position: center;
		display: inline-block;
		width:12vw;
		height:12vw;
		margin:0 1vw;
	}
	.select dd a{
		font-size:5vw;
	    font-weight: 400;
		line-height: 6vw;
	}
	.select dd a br{
		display: none;
	}
	.select dd a:before{
		content:"";
	    background-size: 90%;
		background-position: center;
	    display: inline-block;
		width: 12vw;
		height: 12vw;
		margin:3vw 4.5vw;
	}
	.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%;
	}
	#smart_start .select dd a {
		border:0.8vw solid #f65f4c;
		transition:0.15s;
	}
	
}


/*------------------------------------------------------------------------
	Sns
/*-----------------------------------------------------------------------*/
.sns{
	text-align:center;
	margin:4% 0 4% 0;
	display: flex;
	align-items: start;
	justify-content: center;
}
.sns li{
	display:inline;
	margin:0 0.5vw;
}

@media screen and (max-width:839px) {
	.sns{
		text-align:center;
		margin:10vw 0 10vw 0;
		display: flex;
		align-items: start;
		justify-content: center;
	}
}

/*------------------------------------------------------------------------
	Spec
/*-----------------------------------------------------------------------*/
.spec{
	font-size:16px;
	width:860px;
	margin:0 auto;
	color:#666666;
}
.spec h3{
	font-weight:bold;
	background:#666666;
	color:#fff;
	padding:5px 10px;
}
.spec dl{
	padding-bottom:40px;
}
.spec dt{
	margin:10px 0 5px 0;
}
.spec dd a{
	text-decoration: underline;
	color:#666666;
	font-weight: 600;	
}
.spec span{
	font-size: 80%;
}
.spec .attention{
	font-size:12px;
	margin:10px 0 0 0;
}


@media screen and (max-width:839px) {
	.spec{
		font-size:4vw;
		width:90%;
		margin:0 auto;
		color:#666666;
	}
	.spec .attention{
		font-size:3vw;
		margin:10px 0 0 0;
	}
}


/*------------------------------------------------------------------------
	3rd edition
/*-----------------------------------------------------------------------*/
.third_edition header {
	height:360px;
}
.third_edition .spec .caption {
	font-size: 12px;
}
.third_edition .spec .caption a{
	color:#666666;
	text-decoration: underline;
}

@media screen and (max-width:839px) {
	.third_edition header {
		height:85vw;
	}
	.third_edition header .header_contents .main_title h1 .smart{
		font-size: 3.5vw;
	
	}
}