@charset "UTF-8";

@import "layout.css";

#all{
	background-size:1px 100px;
	background-image:url(../../common/img/bg_voice.svg);
}
/* h3{
	margin-top:-420px !important;
	padding-top:420px !important;
}

@media screen and (max-width:839px) {
	h3{
		margin-top:-77vh !important;
		padding-top:77vh !important;
	}
}
@media screen and (max-width:320px) {
	h3{
		margin-top:-82vh !important;
		padding-top:82vh !important;
	}
} */

/* chrome opera */
/* @media screen and (max-width:839px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	h3{
		margin-top:-70vh !important;
		padding-top:70vh !important;
	}
} */
/* Firefox */
/* @media screen and (max-width:839px) {
@-moz-document url-prefix() {
	h3{
		margin-top:-73vh !important;
		padding-top:73vh !important;
	}
}
} */

html {
	touch-action: manipulation;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*-------------------------------------------------------------------------
	Header
/*-----------------------------------------------------------------------*/
#header{
	position:fixed;
	background-color:#fff;
	width: 100%;
	z-index: 9;
}
	#header .header_wrap{
		width:100%;
		background:url(../img/bg_main_pc.jpg) no-repeat ;
		background-position: 0 -60px;
	    background-size: 75%;
		padding: 0 0 125px 0;
		z-index: 99;
	}
	#header h1{
		width:76px;
		padding:20px 40px;
	}
@media screen and (max-width:839px) {
	#header{
		position:static;
	}
	#header .header_wrap{
		width:100%;
		background:url(../img/bg_main_sp.jpg) no-repeat;
		background-size:45%;
		position:static;
		padding: 0 0 5% 0;
	}
		#header h1{
			padding:4vw 4vw;
		}
}
/*-------------------------------------------------------------------------
	Contents
/*-----------------------------------------------------------------------*/
#contents {
	text-align: center;
}
	#contents h2 {
		font-size:14px;
		color:#ff3300;
		display:inline;
		float:left;
		margin-top:30px;
		margin-bottom:35px;
	}
		#contents h2 span {
			font-size:24px;
			font-weight:bold;
			margin-right:5px;
		}
@media screen and (max-width:839px) {
	#contents .wrap {

	}
		#contents .wrap .box {
			position:relative;
		}
}


/*-------------------------------------------------------------------------
	Fix
/*-----------------------------------------------------------------------*/
.fix {
	z-index:999;
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 60px;/* 上端から10pxのところで固定 */
}
@media screen and (max-width:839px) {
	.fix {
		top: 0px;
	}
}


/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/
.title_wrap{
	width: 940px;
	margin: 0 auto;
	position:relative;
}
.title{
	width:470px;
	border:4px solid #000;
	border-radius:5px;
	background-color:#fff;
	text-align: center;
	padding:1% 0;
}
.title .title01{
	font-size:1.0rem;
}
.title .title02{
	font-size:1.0rem;
	font-weight:bold;
}
.title .sub_title{
	border-bottom:1px solid #c2c2c2;
    margin: 0 5%;
    padding: 0 0 1% 0;
	font-size: 20px;
	font-weight: 600;
}
.title .year{
	font-size:3rem;
	font-weight:800;
}
.title .year .roboto{
	font-size:3.5rem;
		margin:0 0.5rem ;
}
.title .contents_name{
	font-size: 1.5rem;
	font-weight: 800;
	text-align: left;
	color: #33a6de;
	line-height: 1.3;
	padding-right: 1rem;
}
.title_text{
	text-shadow:1px 1px 0px #fff;
	text-align: right;
	width: 500px;
	margin-top: 0.5rem;
}

@media screen and (max-width:839px) {
	.title_wrap{
		width: 100%;
	}
	.title{
		width:80%;
		margin:0 auto;
		float:none;
	}
	.title .sub_title{
		font-size:4.5vw;
		border-bottom:1px solid #c2c2c2;
		margin: 0 5%;
		padding: 0 0 1% 0;
	}
	.title .year{
		font-size:11vw;
	}
	.title .year .roboto{
		font-size:12vw;
		margin:0 0.5rem ;
	}
	.title .contents_name{
		font-size: 8vw;
		text-align: center;
		padding-right: 0;
	}
	.title .contents_name span{
		font-size: 4.5vw;
	}
	.reading_01 .title .contents_name span.small{
		font-size: 4vw;
		display: inline-block;
	}
	.title_text{
		text-align:center;
		margin:0.5rem 0 1rem;
		width:auto;
	}
}
/*-------------------------------------------------------------------------
	Menu
/*-----------------------------------------------------------------------*/
#menu {
    float:right;
    margin:10px 0px 40px;
}

    #menu h3 {
        display:none;
    }

    #menu li {
        float:left;
        margin-right:10px;
    }

        #menu li a {
            background:url(../../img/common/icon/arrow_normal.png) no-repeat left center;
            padding-left:20px;
            font-size:14px;
            color:#acacac;
        }

        #menu li.home a {
            background-image:url(../../img/common/icon/arrow_top.png);
            color:#ffaf3d;
        }

		#menu li a:hover,
		#menu li a.current {
			background-image:url(../../img/common/icon/arrow_active.png);
			color:#ff4f23;
		}

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

    #menu h3 {
        display:block;
        background:url(../../img/common/menu.png) no-repeat left top;
        text-indent:-9999px;
        height:22px;
        width:47px;
        cursor:pointer;
    }

    #menu ul {
        display:none;
        background:#f02800;
        position:absolute;
        top:40px;
        right:0;
        z-index:9999;
    }

        #menu li {
			float:none;
			margin-right:0;
        }

            #menu li a {
				display:block;
				padding:10px 20px;
				 border-bottom:1px solid #fff;
				background:none;
                font-size:14px;
                color:#fff;
				text-align:center;
            }

			#menu li.home a {
				background:none;
				color:#ffaf3d;
			}

			#menu li a:hover,
			#menu li a.current {
				background:none;
				color:#fff;
			}

}


/*-------------------------------------------------------------------------
	Audio Player
/*-----------------------------------------------------------------------*/
#audioPlayer {
    position:relative;
    width:37.2%;
    margin-bottom:50px;
    background:#fff;
    float:right;
}
	#audioPlayer img{
		width:100%;
	}

	#audioPlayer video {
		display:none;
		visibility:hidden;
		height:0;
	}

	.legacyIE #audioPlayer video {
		display:block !important;
	}

    #audioPlayer .player {
		width:100%;
		margin-bottom:20px;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
    }
    #audioPlayer .player:after {
		display: none;
    }

        #audioPlayer .player li {
            position:relative;
			cursor:pointer;
        }

		#audioPlayer .player .rewind,
		#audioPlayer .player .forward,
		#audioPlayer .player .skip,
		#audioPlayer .player .back {
			opacity:.2;
			cursor:default;
			width:15%;
		}

		.pc_only #audioPlayer .player .rewind,
		.pc_only #audioPlayer .player .forward,
		.played #audioPlayer .player .rewind,
		.played #audioPlayer .player .forward, 
		.played #audioPlayer .player .skip,
		.played #audioPlayer .player .back {
			opacity:1;
			cursor:pointer;
		}

		#audioPlayer .player .rewind,
		#audioPlayer .player .playAndPause {
			width:15%;
		}

		#audioPlayer .player .rewind {
		}

		#audioPlayer .player .playAndPause .play{
			border-radius:50%;
			animation-name:play_animation;
			animation-duration:1s;
			animation-fill-mode: both;
			animation-timing-function:ease-in-out;
			animation-iteration-count:infinite;
			animation-direction:alternate;
		}
		@keyframes play_animation {
			0% { transform:scale(1)}
			100% { transform:scale(1.1)}
			/* 0% { background-color:#fffcb1;}
			100% { background-color:#fff;} */
		}
		.played #audioPlayer .player .playAndPause .play{
			animation-name:played_animation;
		}
		
		#audioPlayer .player .playAndPause .play,
				#audioPlayer.playing .player .playAndPause .pause {
					display:block;
				}

				#audioPlayer.playing .player .playAndPause .play,
				#audioPlayer .player .playAndPause .pause {
					display:none;
				}

		#audioPlayer .player .forward {
		}
		#audioPlayer .player .forward img{
		}

	#audioPlayer .progressbar {
		position:relative;
		margin-bottom:15px;
	}

		#audioPlayer .progressbar .line {
			display:block;
			width:100%;
			height:6px;
			background:#eee;
		}

		.pc_only #audioPlayer .progressbar .line,
		.played #audioPlayer .progressbar .line {
			background-color:#b5b5b6;
		}

			#audioPlayer .progressbar .line .progress {
				display:block;
				position:relative;
				width:0;
				height:100%;
				background:#666666;
			}

				#audioPlayer .progressbar .line .progress .dial {
					position:absolute;
					right:0;
					top:0;
					width:3px;
					height:6px;
					background:#eee;
					cursor:pointer;
				}

    #audioPlayer .time {
		color:#666666;
        text-align:right;
    }

	.pc_only #audioPlayer .time,
	.played #audioPlayer .time {
		color:#666666;
	}

    #audioPlayer .volume {
        position:relative;
        margin-top:-1.25rem;
    }

    #audioPlayer .rate {
        display: flex;
        flex-wrap:wrap;
        justify-content:space-between;
		margin-top: 0.75rem;
    }
    #audioPlayer .rate:after {
        content:none;
    }
    #audioPlayer .rate li{
        width: 23%;
		background: #fff;
		border:1px solid #666;
		color: #666;
		padding:0.25rem 0;
		border-radius:0.25rem;
		cursor: pointer;
	}
    #audioPlayer .rate li.active{
        color:#fff;
        font-weight:bold;
    }
	#audioPlayer .rate li.active {
        background:#33a6de;
        border:1px solid #33a6de;
    }

	.ipad #audioPlayer .volume,
	.iphone #audioPlayer .volume,
	.android #audioPlayer .volume {
		display:none;
	}

        #audioPlayer .volume li {
            float:left;
            margin-right:10px;
			cursor:pointer;
        }

		#audioPlayer .volume .vol {
			position:relative;
		}

			#audioPlayer .volume .vol span {
				display:none;
				position:absolute;
				left:0px;
				top:5px;
			}

			#audioPlayer .volume .vol span.sound0 {
				display:block;
			}

			#audioPlayer .volume.mute .vol span {
				display:none !important;
			}

			#audioPlayer .volume.mute .vol span.sound0 {
				display:block !important;
			}
			#audioPlayer .volume .vol span img{
				width:30px;
				height:25px;
			}

		#audioPlayer .volume .minus {
			width:9%;
			margin-left:40px;
		}

		#audioPlayer .volume .plus {
			width:9%;
			margin-right:10px;
		}

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

	#audioPlayer {
		position:relative;
		width:80%;
		height:auto;
    	margin-bottom:0px;
		padding:5% 10%;
		float:none;
	}

	#audioPlayer .volume .minus {
		width:10%;
		margin-left:40px;
	}

	#audioPlayer .volume .plus {
		width:10%;
		margin-right:10px;
	}

}

@media screen and (max-width:645px) {
	#audioPlayer .volume {	
		display: none;	
	}
}

/*-------------------------------------------------------------------------
	Form
/*-----------------------------------------------------------------------*/
#form{
	display: inline-block;
	position:relative;
}
#form div{
	font-size: 14px;
	border: 1px solid #b6b6b6;
	background: #fff;
	padding: 10px 20px;
	margin: 0 0 10px 0;
	display: inline-block;
}
#form div:after{
	display: none;
}

#form div a{
	padding:5px 10px;
	background-color:#f02800;
	display:inline-block;
	color:#fff;
}
#form .none{
	border:none;
	position:absolute;
	top: -10px;
	right: -15px;
	background-color:transparent;
	padding:0;
	margin:0;
}
#form .none a{
	background-color:transparent;
	padding:0;
}
#form .none a img{
	width:30px;
	height:30px;
}

@media screen and (max-width:839px) {
	#form{
		display: block;
		position: fixed;
		bottom:0;
	}
	#form div{
		font-size: 3.5vw;
		border-top: 1px solid #b6b6b6;
		border-left:0px;
		border-right:0px;
		border-bottom:0px;
		margin: 0;
	}
	#form div a{
	    margin: 2% 0 0 0;
	}
	#form .none{
		top: -10px;
		right: 5px;
	}
}
/*-------------------------------------------------------------------------
	Accordion
/*-----------------------------------------------------------------------*/
.attention{
	width:840px;
	margin:0 auto 50px auto;
	padding:40px 0 20px 0;
}
.attention a{
	display: inline-block;
}
.attention .for_mobile{
    border: 2px solid #f21b00;
    padding: 15px;
    line-height: 1.8;
    margin:40px 0 0 0;
}
.attention .for_mobile dt{
	font-size:1rem;
	font-weight:bold;
    display: inline-block;
	margin: 0 0 1% 0;
}
.attention .for_mobile dt span{
	background: linear-gradient(transparent 60%, #fcd1cc 60%);
}
.attention .for_mobile dt img{
    width: 20px;
    height: 26px;
	padding:0 10px 0 0;
}
.attention .for_mobile dd.case{
	font-size:0.85rem;
	font-weight:bold;
	color:#ff4522;
}
@media screen and (max-width:839px) {
	.attention{
		width:90%;
		margin:0 auto 15% auto;
		padding:5%;
	}
	.attention a{
		display: initial;
	}
	.attention .for_mobile{
		margin-top:5%;
	}
	.attention .for_mobile dt{
		font-size:4vw;
	}
	.attention .for_mobile dt img{
		width:5vw;
		height:auto;
	}
}
/*-------------------------------------------------------------------------
	Questions
/*-----------------------------------------------------------------------*/
.questions_wrap {
	padding:60px 0 30px ;
	background:#fff;
}
#questions {
	opacity:.2;
}
#questions .note{
	font-size:1rem;
	color: #fff;
	padding: 6px 10px;
	background-color: #666;
	display: inline-block;
	margin: 20px 0 40px;
}
#questions h3{
	font-size:2rem;
	font-weight:600;
	letter-spacing: 0.1rem;
	margin:70px 0 20px 0;
}
#questions h3#listning02 p,
#questions h3#listning04 p{
}
#questions h3 img.listening,
#questions h3 img.download{
	width:53px;
	height:auto;
	margin:0 1rem 0 0;
}
/* #questions,
.rate {
	opacity:.2;
	pointer-events: none;
}
#questions .box li a{
	pointer-events: none;
} */

/* .iphone #questions .box{
	opacity:0.2;
	pointer-events: none;
} */
.iphone.played #questions .box{
	opacity:1;
}

#questions {
	opacity:1;
}


    #questions .box {
		padding:0 50px;
        margin-bottom:70px;
    }
    #questions .download_box {
		padding:0 50px;
    }
    #questions h3 p{
		display:inline-block;
		vertical-align: middle;
    }
    #questions ul {
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        align-self: stretch;
    }

    #questions ul li {
        width:180px;
        margin:0 40px 30px 0;
    }
    #questions ul li:nth-child(4n) {
		margin-right:0;
	}
    #questions .box ul li a:after {
        content:"";
        background:url(../../common/img/icn_play_main.svg) no-repeat;
        background-position:center;
        width:26px;
		height:18px;
		visibility:visible;
		margin: 0 15px 0 5px;
    }
    #questions .box:nth-child(2n) ul li a:after {
        background:url(../../common/img/icn_play_sub.svg) no-repeat;
    }
    #questions ul li .bd div{
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.3;
		padding: 0 0 0 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		word-break: normal;
	}
	#questions ul li a.gray div{
		font-size:0.9rem;
		font-weight:normal;
	}
    #questions ul li .active div{
		color:#fff;
    }
	#questions ul li:last-child {
		margin-right:0px;
	}
		#questions .box a,
		#questions .download_box a{
			cursor:pointer;
			pointer-events : auto;
			border: 3px solid;
			border-radius:8px;
			height: 70px;
			display: flex;
			width: calc( 100% - 6px);
			align-items: center;
			background-color: #fff;
			position: relative;
			line-height: 1.5;
		}
		#questions .box a.gray{
			border: 1px solid;
		}
		#questions .box ul:after{
			display: none;
		}

			#questions .box:nth-child(2) a,
			#questions .box:nth-child(4) a {
				border: 3px solid #0f7dda !important;
			}
			#questions .box:nth-child(2n) a.gray {
				border: 2px solid #0f7dda !important;
			}
			#questions .box a.active {
				background-color:#33a6de !important;
			}
			#questions .box:nth-child(2n) a.active {
				background-color:#0f7dda !important;
			}
		#questions a.active img {
			opacity:0 !important;
		}
		#questions .btn_download{
			font-size: 1.1rem;
			color: #fff;
			width: 46.3% !important;
			align-content: center;
			justify-content: center;
			text-align: center;
			border-radius: 8px;
		}
		#questions .btn_download:hover{
			opacity:0.8;
		}
		.return_wrap {
			text-align:center;
		}
		.return {
			border-bottom:1px solid #000;
			font-size:1.0rem;
		}
		.attention .offline a{
			text-decoration: underline;
		}
#questions .q_note {
	font-size: 14px;
	color: #000;
}
#questions .q_note_01 {
	color: #666;
}
#questions ul.q_note {
	margin-top: 40px;
	display: block;
}
#questions ul.q_note li {
	width: 100%;
	margin-bottom: 10px;
}
.back_wrap {
	text-align:center;
}
.back {
	font-size:1.0rem;
}



@media screen and (min-width:840px) {
		#questions .box a:hover {
			color:#fff;
			transition:0.15s;
		}
		#questions .box a:hover {
			background-color: #33a6de;
		}
		#questions .box:nth-child(2) a:hover,
		#questions .box:nth-child(4) a:hover {
			color:#fff;
			background-color:#0f7dda !important;
		}
	}
	
@media screen and (max-width:839px) {
	.questions_wrap {
		width:90% !important;
		padding:0 0 5% 0;
	}
	#questions .note{
		font-size:4.0vw;
	}
	#questions h3{
		font-size:6vw;
	}
	#questions h3 img.listening,
	#questions h3 img.download{
		width:12vw;
		float:left;
		margin:0 3vw 0 0;
	}
	#questions h3 p{
		width:65vw;
	}
    #questions .box {
    	padding:0 5%;
    	margin-bottom:15%;
    }
    #questions .download_box {
    	padding:0 5%;
    }
    #questions ul {
        justify-content:space-between;
    }
    #questions ul li {
       width:48%;
       margin:0 0 10px 0;
    }
    #questions ul li .bd div,
    #questions ul li a.gray div{
        font-size: 3.3vw;
        line-height: 1.3;
        padding: 0 0 0 3vw;
        height:auto;
    }
    #questions .box ul li div:after {
        width:6vw !important;
		height:6vw !important;
		top: 5vw;
	    right: 2vw;
    }
	#questions .btn_download{
		font-size: 4.0vw;
	    width: 100% !important;
        height: 16vw;
        border:none !important;
	}
	#questions .box a,
	#questions .box ul li > div,
	#questions .download_box a {
	    height: 16vw;
		width: auto;
	}
	#questions .box ul li div:after{
		content: none;
	}
	#questions .box ul li a:after {
		width: 10vw !important;
		height: 5vw !important;
		margin: 0 !important;
	}
	#questions .q_note_01 {
		margin-top: 20px;
	}
	#questions ul.q_note {
		margin-bottom: 40px;
	}

	/* iphoneでロード直後ボタン無効に */
	/* .iphone #questions .box a{
	    pointer-events: none;
	}
	.iphone.played #questions .box a {
	    pointer-events: auto;
	} */
}


/*-------------------------------------------------------------------------
	Accordion
/*-----------------------------------------------------------------------*/
	#accordion{

	}
		#accordion .cp_actab {
			max-width:940px;
			margin:0 auto;
	        padding:25px 0;
		}
		#accordion .cp_actab input {
			position: absolute;
			z-index: -1;
			opacity: 0;
		}
		#accordion .cp_actab label {
			font-weight: 400;
			line-height: 2;
			position: relative;
			display: block;
			padding: 0 1em 0 0;
			cursor: pointer;
			margin: 0 0 1px 0;
			font-size:1.1rem;
			color:#ffff00;
			width:70px;
			float:left;
			text-align: left;
	    cursor: default;
		}
		#accordion .cp_actab label a {
			color: #ffff00;
		}

		#accordion .cp_actab .cp_actab-content ul{
			display: flex;
	        flex-wrap: wrap;
		}
		#accordion .cp_actab .cp_actab-content ul li{
			font-size:1rem;
			font-weight:200;
    		line-height: 2;
			margin:0 3rem 0 0;
		}
		#accordion .cp_actab .cp_actab-content ul li a{
			color:#fff;
			text-decoration: underline;
		}

@media screen and (max-width:839px) {
		#accordion .cp_actab {
			position: relative;
			/* overflow: hidden; */
			width: 100%;
			margin: 0 auto;
			color: #ffffff;
			padding:2% 0;
		}
		#accordion .cp_actab input {
			position: absolute;
			z-index: -1;
			opacity: 0;
		}
		#accordion .cp_actab label {
			width:80%;
			padding:0 10%;
			float:none;
		}
		#accordion .cp_actab .cp_actab-content {
			overflow: hidden;
			max-height: 0;
			-webkit-transition: max-height 0.35s;
			transition: max-height 0.35s;
			color: #333333;
			opacity:1;
            /* top: 35px; */
            position: absolute;
            width:100%;
		}
		#accordion .cp_actab .cp_actab-content li {
		    width: 80%;
    		margin: 0 10% !important;
			padding: 0.5rem 0 0 0;
			border-bottom: 1px solid #fff;
		}
			#accordion .cp_actab .cp_actab-content li:last-child {
				margin: 0 10% 25px !important;
			}
		#accordion .cp_actab .cp_actab-content ul li a{
			text-decoration: none;
			display: block;
			text-align: left;
		}
		/* :checked */
		#accordion .cp_actab input:checked ~ .cp_actab-content {
			max-height: 30em;
		}
		/* Icon */
		#accordion .cp_actab label::after {
			line-height: 2;
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			width: 2em;
			height: 2em;
			-webkit-transition: all 0.35s;
			transition: all 0.35s;
			text-align: center;
    		margin: 0 10%;
		}
		#accordion .cp_actab input[type=checkbox] + label::after {
			content: '+';
		}
		#accordion .cp_actab input[type=checkbox]:checked + label::after {
			transform: rotate(315deg);
		}

}
/*-------------------------------------------------------------------------
	Landscape
/*-----------------------------------------------------------------------*/
.landscape{
	display: none;
	position: fixed;
    z-index: 99999;
}
.landscape > div{
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: bold;
}