@charset "utf-8";
@media only screen and (max-width:767px){

/* CSS Document */
/* ============================================================

   reset

============================================================ */
.headbar {display:none;}
.headNavi {display:none;}
h3.ttl,
h3.ttlm {font-size:1.1rem;}
.lb03 span {
	margin:0;
	display:inline-block;
	line-height:1.0rem;
}

/* ============================================================

   レイアウト

============================================================ */

#header {
	height:50px;
	margin-bottom:0;
}
#header .inner {
	width:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
#header .inner .logo {
	width:180px;
	margin:0;
	float:none;
}
#header .inner .logo img {
	width:100%;	
}
.visual {
	width:100%;
	height:auto;
}
#container {
	width:100%;
}

#main {
    width:100%;
}
#main .contents {
	width:100%;
	float:none;
}
#main .sidebar {
	width:100%;
	float:none;
}
#footer {
	margin-top:0;
}
#footer .inner {
	width:100%;
	margin:0 auto;
}

.breadcrumbs {
	display:none;
}
/* =========================================================

	ドローワーメニュー

========================================================= */
/*BUTTON
--------------------------------------------------*/
.hiraku-open-btn, .js-offcanvas {display:block;}
.hiraku-open-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    transition: 0.3s;
	z-index:100;
}
.hiraku-open-btn {
	padding: 10px 5px;
	cursor: pointer;
	background: rgba(39,168,230,0.6);
	border: none;
}
.hiraku-open-btn span {
	margin-right:5px;
	float:left;
	color:#FFF;
}
.hiraku-open-btn span:last-child {
	margin-right:0;	
}
.hiraku-open-btn-line {
	position: relative;
	display: block;
	width: 28px;
	height: 4px;
	margin: 6px 0;
	transition: .1s all;
	border-radius: 1px;
	background-color: #FFF;
}

.hiraku-open-btn-line:before,
.hiraku-open-btn-line:after {
	position: absolute;
	display: block;
	width: 100%;
	height: 4px;
	content: '';
	transition: .3s all;
	border-radius: 1px;
	background-color: #FFF;
}

.hiraku-open-btn-line:before {
	top: -10px;
}

.hiraku-open-btn-line:after {
	bottom: -10px;
}
[aria-expanded='true'] .hiraku-open-btn-line:before,
[aria-expanded='true'] .hiraku-open-btn-line:after {
	width: 28px;
}

[aria-expanded='true'] .hiraku-open-btn-line:before {
	-ms-transform: translate(-2px, 10px) rotate(45deg);
	transform: translate(-2px, 10px) rotate(45deg);
}

[aria-expanded='true'] .hiraku-open-btn-line:after {
	-ms-transform: translate(-2px, -10px) rotate(-45deg);
	transform: translate(-2px, -10px) rotate(-45deg);
}
/*BODY
--------------------------------------------------*/
.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
	padding-bottom:200px;
	background:#FFF;
}
ul.js-offcanvas {
	margin:0;
	padding:0;
}
.hidden-accessible input {
	display:none;	
}
ul.js-offcanvas li {
	margin:0;
    padding: 8px;
	line-height:1.4rem;
	text-align:left;
    border-bottom:1px solid #FFF;
}
ul.js-offcanvas li,
ul.js-offcanvas li a {
	display:block;
	color:#FFF;
	background:#27A8E6;
}
ul.js-offcanvas li.mtitle {
	padding:20px 20px 10px 10px;
	font-size:1.0rem;
	font-weight:bold;	
	background:#2884bb;
}
ul.js-offcanvas li.mtitle a {
	background:none;
}
ul.js-offcanvas li.child,
ul.js-offcanvas li.child a {
	font-size:0.8rem;
	color:#333;
	background:#FFF;
}
ul.js-offcanvas li.child a:before {
	margin-right:5px;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0da";
}
ul.js-offcanvas li.login {background:#d0d0d0;}
ul.js-offcanvas li.movie {background:#444444;}
ul.js-offcanvas li.mcat {background:#606060;}
ul.js-offcanvas li.movie a,
ul.js-offcanvas li.mcat a {color:#d0d0d0;}

ul.js-offcanvas li.cat-item {
	background:#FFF;
}
ul.js-offcanvas li.cat-item a {
	font-size:0.8rem;
	color:#333;
	background:#FFF;
}
ul.js-offcanvas li.cat-item a:before {
	margin-right:5px;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0da";
}

/*
ul.js-offcanvas li a {
}
ul.js-offcanvas li input[type="search"] {
  border: 1px #979797 solid;
  height: 25px;
  width: 70%;
  margin: 0 5px 0 0;
  float:left;
  background: url(../../img/common/search_icon.png) no-repeat 4px 8px;
  padding-left: 20px;
  background-color:#FFF;
}
ul.js-offcanvas li form {
	overflow:hidden;	
}
ul.js-offcanvas li.member {
    background:#f77cb8;

}
ul.mvcatmenu {
	padding:0 10px 10px 10px;
    background:#f77cb8;	
}
ul.mvcatmenu li {
	margin:0;
	padding:0;
	border:none;	
}
ul.mvcatmenu li.sdcatname {
	padding:10px 0 0 0;
	font-size:0.8rem;
	font-weight:bold;
	color:#e01678;
}
ul.mvcatmenu li a {
	margin:0;
	padding:0 0 0 10px;
	font-size:0.7rem;	
}
ul.js-offcanvas li.actlabel {
    border-top:1px solid #d33b85;
}

ul.js-offcanvas .actsearch {
	width:90%;
	margin:0 auto;
	padding:10px;
    background:#f77cb8;
	box-sizing:border-box;
}
ul.actsearch li {
	width:34px;
	height:34px;
	margin:0;
	padding:0;
	float:left;
	background:none;
	border:none;
}
ul.actsearch li a {
	width:34px;
	height:34px;
	font-size:0.8rem;
	color:#FFF;
    background:#f77cb8;	
}
/*BUTTON
--------------------------------------------------*/
#drawer_btn,
#drawer_btn span {
  position: fixed;
  top: 25px;
  right: 10px;
  transition: 0.3s;
}
a.bt_more2 {width:50%;}

.wpp-list a img {
	width:30%;
}

/*icon 
----------------------------------------------------*/
.icoL {font-size:48px;}


/*contents 
----------------------------------------------------*/
.post-list, .post-list ul {
	padding:10px;
    display: block;
	box-sizing:border-box;
}
.post-list.visual {
	/*padding:10px;*/
}
.post-list ul li.list4 {
	margin:0;
}
.post-list .row2,
.post-list .row2.thumb,
.post-list .row2.postbox,
.post-list .row3,
.post-list .row4,
.post-list ul li.list4 {
	width:100%;
	margin:0;
	padding:0;
	flex-basis: 100%!important;
	box-sizing:border-box;
}
.post-list .row2.date,
.post-list .row2.pcat {
	text-align:center;
}
.post-list .row3 {
	padding:10px;
	margin-bottom:20px;
}
.post-list.phrs .row3 {
	margin-bottom:10px;	
}
.port-list ul li.list4,
.post-list ul li.list4:first-child .thumb,
.post-list ul li.list4:first-child .postbox {
	width:100%;
	flex-basis: 100%!important;
	box-sizing:border-box;
}
.post-list ul li.list4:first-child .thumb img {
	width:100%;
	box-sizing:border-box;
}
.post-list .row3 .thumb {
	height:160px!important;
}
.post-list.voc .row3 {
	margin-bottom:10px;
}
.eyecatch {
	width:100%;
	height:200px;
	overflow:hidden;
	background:#FFF;	
}

.post-list .row2_cnt .pickupbox p.ttl01 {
	margin:10px 0;
}
	
.cntBox {
	padding:5px;	
}
.cntBox .imgL,
.bgtv .imgL,
.bgda .imgL,
.bgbz .imgL,
.bgds .imgL,
.bgvc .imgL {
	float:none;
	display:block;
	margin:0 auto;
}

#main .contents .gmBox {
	width:100%;
	margin-bottom:0;
	padding-bottom:0;
}
#main .contents .gmBox .game {
	margin-top:0;	
}
.snsBox {
	width:100%;
}
.gmBox .snsBox {
	margin-left:0;	
}
.linkbox img {
	width:100%;
	margin-right:10px;
	float:left;
}
.linkbox p.linktxt {
	text-align:right;
	position:static;
}
ul.rowList {
	width:100%;
	margin:10px auto 20px auto;
	padding:5px 0;
	overflow:hidden;
	list-style:none;
}
ul.rowList li {
	width:30%;
	height:140px;
	margin:0 10px 10px 0;
	font-size:1.0em;
	padding-top:10px;
	text-align:center;
	float:left;
	background:#f1f1f1;
	box-sizing:border-box;
}
ul.rowList li p {
	line-height:1em;	
}
ul.rowList li p a {
	font-size:0.8em;	
}
	
ul.lineup li img {
	width:40%;
	margin-right:10px;
	float:left;
}
ul.lineup li p {
	font-size:0.8rem;
	}
ul.cntList {
	width:100%;
	overflow: hidden;
	margin: 5px auto;
	padding:0;
}
ul.cntList li{
    float: left;
	width: 50%;/*152*/
	height: 100px;
	margin:5px 0;
	background:#CCC;
	list-style:none;
	border:5px solid #FFF;
}
ul.catList {
	width:100%;
	overflow: hidden;
	margin: 5px auto;
	padding:0;
}
ul.catList li{
    float: left;
	width: 33%;/*152*/
	margin-top:5px;
	padding:10px 0;
	text-align:center;
	list-style:none;
	border:5px solid #F1f1F1;
}
h2.top {
	line-height:1.6rem;
}

/*blog 
----------------------------------------------------*/ 
.post-list .row2 {
	line-height:1.0rem;
}
.post_title {
	padding:10px 0;
	text-align:center;
	font-size:1.4rem;
}

.entryList .thumb {
	height:auto;

}
.entryList li p {
	width:100%;
	margin:0 auto;
}
.entryBox {
	padding:0 10px;
}
.entryBox h3 {
	margin:20px 0;
}
.entryBox iframe {
	width:100%;
	height:auto;
}

/*phrase box
----------------------------------------------------*/
dl.exphrase {
	padding:5px;
	/*padding-left: 1em; /* 文章のスタート位置。li:beforeが入るスペースを確保*/
}
dl.exphrase dt,
dl.exphrase dt.ans {
	position:relative;
    padding-left: 2em; /* 文章のスタート位置。li:beforeが入るスペースを確保*/
	padding-right:2em;
	line-height:1.4em;
}
dl.exphrase dt:before,
dl.exphrase dt.ans:before {
position: absolute;
left: 0.5em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
top: 0.5em; /* アイコンの場所を変えたければ適宜変更 */
}
dl.keyphrase dt {
	padding-right:1em;
}

/*Movie 
----------------------------------------------------*/
.mvBox iframe {
	width:100%;
	height:200px;
}

/*phrase 
----------------------------------------------------*/
ul.phlist p.phttl {
	height:80px;
	font-size:0.8rem;
}

.cattl {
	font-size:1.2rem;
	text-align:center;
}
.jp_txt {
	font-size:18px;
	text-align:center;	
}
/*	
.phraseBox {
	width:100%;
	margin:10px 0;
	padding:0;
	text-align:center;
	overflow:hidden;
	border:1px dotted #CCC;
	background:pink;
}
*/
.expBox {
	padding:5px;
}

.phraseBox .eng_txt {
	width:90%;
	font-size:2.0em;
	line-height:1.2;
	/*float:left;*/
}
.audioBox {
	text-align:center;
	margin:0;
}
.imgBox {
	margin-bottom:10px;
	text-align:center;
}
.imgBox img {
	width:90%;	
}

table.phrase {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	text-align:left;
	font-weight:normal;
}
table.phrase th {
	width:40px;
	padding:10px;
	font-size:1.5em;
	font-weight:normal;
	border-bottom:1px dotted #CCC;
}
table.phrase td {
	padding:10px;
	font-size:1.5em;
	border-bottom:1px dotted #CCC;
}

.ftcat {
	font-size:1.8em;	
}
table.example {
	margin:0;	
}	
table.example th,
table.example td {
	width:100%;
	padding:0;
	display:block;
}	
table.example th {
	padding-top:5px;
	border:none;
}
table.example td {
	font-size:0.9rem;
	padding-bottom:5px;
}

ul.phlist p.phjp {
	width:100%;
	font-size:0.8rem;
	text-align:right;
	background: rgba(255,255,255,0.1);	
}
ul.phlist .imgbox {
	width:120px;
	height:80px;
}
/*Lesson Contents 
----------------------------------------------------*/
/*Lesson Parts*/
.lsntitle {
	margin-bottom:10px;
	font-size:18px;
	color:#FFF;
	text-align:center;
	background:#2884bb;
}
.lensubtitle {
	padding:10px 5px;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	position:relative;
	background:#7dd2fb;
}
.lesBox {
	/*width:100%;*/
	margin-bottom:20px;
	padding:10px;
	background:#FFF;
	overflow:hidden;
}
.lesBox .inner {
	font-size:16px;
	overflow:hidden;
	background:#d8f2fe;
}
.lesBox .inner p {
	font-size:16px;
}

/*Dialog*/
dl.dlogBox {
	overflow:hidden;
	padding-top:10px;
}
dl.dlogBox dt {
	width:90%;
	margin:0;
	float:left;
	display:inline-block;
}
dl.dlogBox dd {
	width:90%;
	margin-top:10px;
	margin-bottom:30px;
	font-weight:bold;
	float:right;
	text-align:right;
	display:inline-block;
}
dl.dlogBox dt p a {
	padding:10px 15px;
	display:inline-block;
	background:#FFF;
	cursor: pointer;
	font-size:18px;
	color:#333;
	/* border-radius */
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	/* box-shadow */
	box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
	-moz-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
}
dl.dlogBox dd p a {
	padding:10px 15px;
	display:inline-block;
	background:#FFF;
	cursor: pointer;
	font-size:18px;
	color:#333;
	/* border-radius */
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	/* box-shadow */
	box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
	-moz-box-shadow:rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
}
dl.dlogBox dt p a:hover {
	background:#ffd1bc;
}
dl.dlogBox dd p a:hover {
	background:#adfab0;
}
dl.dlogBox dt p a:before{
    content: "Q";
    font-size: 20px;
	font-weight:bold;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background: #f56725;
    float: left;
    position: relative;
    top: 0;
	right:10px;
    border-radius: 25px;
 
    /** define it as a block element **/
    display: block;
    height: 30px;
    width: 30px;
}
dl.dlogBox dt p a:after{
    content: " ";
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    float: right;
    position: relative;
	left:10px;
    bottom: 0;
    border-radius: 25px;
 	/*
    background: url(http://simenglish.net/games/common/cg/images/voice.png) no-repeat 5px 5px #CCC;
 	*/
    display: block;
    height: 30px;
    width: 30px;
}
dl.dlogBox dd p a:before{
    content: "A";
    font-size: 20px;
	font-weight:bold;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background: #3fb344;
    float: left;
    position: relative;
    top: 0;
	right:10px;
    border-radius: 25px;
 
    /** define it as a block element **/
    display: block;
    height: 30px;
    width: 30px;
}
dl.dlogBox dd p a:after{
    content: " ";
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    float: right;
    position: relative;
	left:10px;
    bottom: 0;
    border-radius: 25px;
 	/*
    background: url(http://simenglish.net/games/common/cg/images/voice.png) no-repeat 5px 5px #CCC;
 	*/
    display: block;
    height: 30px;
    width: 30px;
}
dl.dlogBox dt p a:hover:after, dl.dlogBox dd p a:hover:after{
    /*background:#FFF;*/
}




/*topics 
----------------------------------------------------*/
.topicsBox {
	width:100%;
	height:200px;
	margin-bottom:10px;
	padding:10px;
	overflow:auto;
	border:1px solid #CCC;
}
table.topics {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	text-align:left;
	font-weight:normal;
}
table.topics th {
	width:80px;
	padding:10px;
	font-size:1.5em;
	font-weight:normal;
	border-bottom:1px dotted #CCC;
}
table.topics td {
	padding:10px;
	font-size:1.5em;
	border-bottom:1px dotted #CCC;
}
table.topics th .key-phrase,
table.topics th .travel-phrase {
	width:40px;
	padding-top:3px;
	font-size:10px;
	text-align:center;
	display:block;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;	
}
table.topics th .key-phrase {background:rgba(248,44,48,1.00);color:#FFF;}
table.topics th .travel-phrase {background:#00bef1;color:#FFF;}
table.topics th .daily-phrase {background:#00e406;color:#FFF;}
table.topics th .bz-phrase {background:#767384;color:#FFF;}

table.topics th .key-phrase:after {content:"必須";}
table.topics th .travel-phrase:after {content:"旅行";}
table.topics th .daily-phrase:after {content:"日常";}
table.topics th .bz-phrase:after {content:"仕事";}



/*common parts 
----------------------------------------------------*/
table.com {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	margin-top:20px;
	margin-bottom:30px;
}
table.com th {
	padding:10px;
	text-align:left;
	border-bottom:1px solid #CCC;
}
table.com td {
	padding:10px;
	border-bottom:1px solid #CCC;
}
/*
table.example {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	margin-top:20px;
	margin-bottom:30px;
}
table.example th {
	padding:10px;
	text-align:left;
	border-bottom:1px solid #CCC;
}
table.example td {
	padding:10px;
	border-bottom:1px solid #CCC;
}
*/
ul.list {
	list-style:none;
	overflow:hiddne;
	margin:0;
	padding:0;
}
ul.list li {
	margin:0;
	padding:15px 10px 10px 10px;
	font-size:14px;
	border-bottom:1px dotted #CCC;
}
.bt_more a {
	color:#333;
	border:1px solid #CCC;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;	
}


}