@charset "UTF-8";
/*******************************
wrapper
*******************************/
#wrapper {
	width: 900px;
	margin: 0 auto;
}
/*******************************
header
*******************************/
#header {
	width: 900px;
	height: 115px;
	background: url(../images/header.gif) no-repeat 0 top;
	text-align: left;
	/* overflow: hidden; */
}
#header ul {
	overflow: hidden;
}
#header li {
	list-style: none;
	float: left;
}
#header h1 {
	float: left;
	margin: 35px 0 0 0;
}
#header h1 a {
	display: block;
	width: 480px;
	height: 0;
	padding: 35px 0 0 0;
	overflow: hidden;
}

/********hnavi********/
#header #hnavi {
	float: left;
	width: 340px;
	height: 22px;
	margin: 10px 0 0 -188px;
}
#header #hnavi li a {
	display: block;
	height: 0;
	padding: 22px 0 0 0;
	overflow: hidden;
}
#header #hnavi li.h01 a {
	width: 58px;
}
#header #hnavi li.h02 a {
	width: 66px;
}
#header #hnavi li.h03 a {
	width: 65px;
}
#header #hnavi li.h04 a {
	width: 68px;
}
#header #hnavi li.h05 a {
	width: 83px;
}
/********search********/
#header #search {
	float: right;
	height: 26px;
	margin: 11px 0 42px 0;
}
#header #search li {
	list-style: none;
	float: left;
}
#header #search input.txt {
	width: 153px;
	height: 17px;
	border: 1px solid #cfd3d6;
	vertical-align: middle;
	padding: 3px 0 0 0;
}
/********gnavi********/
#header #gnavi {
	clear: both;
	height: 36px;
	background: url(../images/hd_gnavi.gif) no-repeat 0 -36px;
}
#header #gnavi li a {
	display: block;
	height: 0;
	padding: 36px 0 0 0;
	overflow: hidden;
}
#header #gnavi li.g01 a {
	width: 125px;
	background: url(../images/hd_gnavi.gif) no-repeat 0 0;
}
#header #gnavi li.g02 a {
	width: 126px;
	background: url(../images/hd_gnavi.gif) no-repeat -125px 0;
}
#header #gnavi li.g03 a {
	width: 91px;
	background: url(../images/hd_gnavi.gif) no-repeat -251px 0;
}
#header #gnavi li.g04 a {
	width: 118px;
	background: url(../images/hd_gnavi.gif) no-repeat -342px 0;
}
#header #gnavi li.g05 a {
	width: 117px;
	background: url(../images/hd_gnavi.gif) no-repeat -460px 0;
}
#header #gnavi li.g06 a {
	width: 101px;
	background: url(../images/hd_gnavi.gif) no-repeat -577px 0;
}
#header #gnavi li.g07 a {
	width: 85px;
	background: url(../images/hd_gnavi.gif) no-repeat -678px 0;
}
#header #gnavi li.g08 a {
	width: 137px;
	background: url(../images/hd_gnavi.gif) no-repeat -763px 0;
}
#header #gnavi li a:hover,
#header #gnavi li a.on {
	background: none;
}
/*******************************
main
*******************************/
#main {
	clear: both;
	float: left;
	width: 675px;
	overflow: hidden;
	text-align: left;
	line-height: 160%;
}
/********topicpath********/
#main #topicpath {
	margin: 0 0 10px 0;
	padding: 5px 6px 4px 6px;
	font-size: 11px;
	line-height: 100%;
}
#main #topicpath a {
	text-decoration: underline;
}
/********headline********/
#main h2 {
	margin: 0 0 15px 0;
}
#main h3 {
	font-size: 14px;
	margin: 0;
	padding: 6px 15px 4px 15px;
	background: url(../images/hl_bg.gif) repeat-x 0 top #f5f6f6;
	line-height: 22px;
}
#main h4 {
	border: 1px solid #cfd3d6;
	margin: 0 0 15px 0;
	padding: 1px;
}
#main h4 span {
	display: block;
	border-left: 3px solid #66b9da;
	padding: 6px 10px;
}
#main h5 {
	color:#8b93a0;
	font-weight: normal;
	line-height: 20px;
	margin: 0;
	padding: 0;
}
#main h5 strong {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	color: #616976;
}
#main h5 strong a {
	color: #616976;
}
#main h6 {
	color:#8b93a0;
	font-weight: normal;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

/********book********/
#main .book {
	clear: both;
	border-top: 1px solid #cfd3d6;
	line-height: 18px;
	padding: 10px 0 0 0;
	overflow: hidden;
}
#main .book .bookL {
	float: left;
	display: inline-block;
	width: 150px;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: top;
}
#main .book .bookL .bookimg {
	width: 152px;
	overflow: hidden;
}
#main .book .bookL .bookimg img {
	display: block;
	margin: 0 0 5px 0;
	padding: 0;
	border: 1px solid #a9a9a9;
	vertical-align: bottom;
}
#main .book .bookR {
	float: right;
	width: 500px;
	min-height: 216px;
	height: auto !important;
	height: 216px;
}
#main .book .bookR ul {
	overflow: hidden;
}
#main .book .bookR ul li.bk01{
	list-style: none;
	margin: 0;
}
#main .book .bookR ul li.bk02{
	list-style: none;
	margin: 5px 0 10px 0;
	font-size: 11px;
}
#main .book .bookR ul li.bk02 span {
	font-size: 12px;
}
#main .book .bookR ul li.bk03{
	list-style: none;
	margin: 0 0 10px 0;
	font-weight: bold;
}
#main .book .bookR ul li.bk04{
	list-style: none;
}
#main .book .bookR ul li.bk05{
	list-style: none;
	font-size: 11px;
	margin: 4px 0 0 0;
}
#main .book .bookR ul li.bk06 {
	list-style: none;
	background: #e0f1f8;
	font-weight: bold;
	text-align: right;
	line-height: 25px;
	margin: 5px 0 10px 0;
	/* padding: 0 5px 0 0; */
	padding: 5px 5px 0 0;
}
#main .book .more {
	clear: both;
	float: right;
	margin: 0 0 6px 0;
}

/********pagenavi********/
#main .pagenavi {
	clear: both;
	border-top: 1px solid #cfd3d6;
	text-align: right;
	margin: 0 0 0 0;
	padding: 10px 0 0 0;
	height: 35px;
}
#main .pagenavi a {
	text-decoration: underline;
}

/*******************************
sidebar
*******************************/
#sidebar {
	float: right;
	width: 200px;
	margin: 15px 0 0 0;
	overflow: hidden;
	text-align: left;
	font-size: 12px;
}
#sidebar ul {
	margin: 0;
	padding: 0;
	float: left;
}
#sidebar ul li {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	background: url(../images/sb_arrow.gif) no-repeat 3px 11px;
	border-bottom: 1px solid #cfd3d6;
	display: inline-block;
}
#sidebar ul li a {
	display: block;
	margin: 0 !important;
	padding: 8px 5px 7px 20px;
}

#sidebar li ul li {
	width: 180px;
	margin: 0 0 5px 0;
	padding: 0 0 0 20px;
	font-size: 11px;
	line-height: 14px;
	border: none;
	background: url(../images/icon_arrow02.gif) no-repeat 8px 2px;
}
#sidebar li ul li a {
	margin: 0;
	padding: 0;
	color: #8b93a0;
	text-decoration: underline;
}
#sidebar li ul li a:hover {
	color: #67B53A;
}
#sidebar #sb_bnr {
	margin: 30px 0 0 0;
}
#sidebar #sb_bnr li {
	margin: 0 0 12px 0;
	background: none;
	border: 0;
}
#sidebar #sb_bnr li a {
	padding: 0;
	width: 200px;
	display: inline-block;
}
/*******************************
pagetop
*******************************/
#pagetop {
	clear: both;
	display: block;
	height: 20px;
	font-size: 10px;
	text-align: right;
	padding: 20px 0 0 0;
}
#pagetop a {
	margin: 25px 0 0 0;
	padding: 0 12px 0 0;
	background: url(../images/pagetop.gif) no-repeat right 0;
}
/*******************************
footer
*******************************/
#footer {
	clear: both;
	width: 100%;
	height: 46px;
	text-align: left;
	/* background: url(../images/footer_bg.gif) repeat-x 0 bottom;
	overflow: hidden; */
	background:#eee; box-shadow:0px 1px 1px 0px rgba(0,0,0,0.2) inset;;
}
#footer #footer-inner {
	width: 900px;
	margin: 0 auto;
}
#footer ul {
	float: left;
	margin: 10px 0 0 0;
	font-size: 10px;
}
#footer li {
	list-style: none;
	float: left;
	margin: 0 15px 0 0;
	padding: 0 0 0 8px;
	background: url(../images/icon_arrow02.gif) no-repeat 0 3px;
}
#footer address {
	float: right;
	height: 0;
	margin: 10px 0 0 0;
	padding: 14px 0 0 0;
	background: url(../images/ft_copy.gif) no-repeat;
	overflow: hidden;
}



/* ---------------------------------------------


 Added at 2018.08


--------------------------------------------- */
/* ---------------------------------------------
 font-size 13pxBase
--------------------------------------------- */
html{ font-size:62.5%; color:#222; } /*初期値16pxの62.5%でルートが10px*/
p { font-size:1.4rem; line-height:1.4; }
#main .book h5 span { font-size:1.6rem; margin-top:2px; display:block; }
#main .book h5 strong { font-size:2.2rem; color:#333; margin-top:2px; line-height:1.3; }
#main .book .bookR { font-size:1.35rem; line-height:1.8; }
#main .book .bookR p { font-size:1.35rem; line-height:1.8; margin-bottom:20px; }
#sidebar #sb_ad { font-size:1.3rem; }
#sidebar ul li { font-size:1.3rem; }
/* ---------------------------------------------
  header
 --------------------------------------------- */
#wrapper .header1 { background-image:url(../images/header1.gif); position:relative; }
#wrapper .header1 h1 { margin-bottom:9px; }
#wrapper .header1 h1 a { height:auto; padding:0; overflow:visible; }
#wrapper .header1 #search { position:absolute; float:none; top:0; right:0; width:260px; }
#wrapper .header1 #search .label { font-size:11px; color:#aaa; line-height:23px; padding-right:3px; }
#wrapper .header1 #hnavi { position:absolute; float:none; top:2px; left:480px; }
#wrapper .header1 #hnavi li { margin:0 0 0 12px; }
#wrapper .header1 #hnavi li a {
	width:auto; height:auto; overflow:visible; display:inline-block;
    font-size:11px; color:#999; padding:2px 0 2px 7px;
    background:url(../images/icon_arrow02.gif) no-repeat 0 7px;
}
body.cat_gendaiyougo #header #gnavi .g01 a,
body.cat_houritsugakushu #header #gnavi .g02 a,
body.cat_shikakushushoku #header #gnavi .g03 a,
body.cat_shakaikeizaijinbun #header #gnavi .g04 a,
body.cat_shumiseikatsu #header #gnavi .g05 a,
body.cat_ehonjido #header #gnavi .g06 a,
body.cat_denshishuppan #header #gnavi .g07 a,
body.cat_u-can #header #gnavi .g08 a { background: none; }

#menuBtn { display:none; }
.hidePC { display:none !important; }
@media only screen and (max-width:767px) {
	html { padding:0; margin:0;}
	body { padding:0; margin:0; width:100%;}
	body {-webkit-text-size-adjust:100%; font-size:1.4rem; }

	.hidePC { display:inherit !important; }
	.hideSP { display:none !important; }

    
	/* こまごま */
	/*ul,dl,dd,dt { margin:0; padding:0;}*/
    iframe { max-width:100%; }
	img { max-width:100%; height:auto; }
    p.p { margin:20px 0; }
    ul.check li { background-size:15px; padding-left:25px; }

	/* レイアウト */
    #wrapper { width:auto; padding-top:50px; }
    #main { width:auto; float:none; padding:0 5%; }
    #sidebar { width:auto; float:none; padding:0 5%; }
    #main .fltL, #main .fltR { max-width:100%; float:none; }
    #sidebar ul { background:#fff; width:100%; }
    #sidebar ul li { width:100%; }
    #pagetop { padding:20px 5% 0; }
    #footer { height:auto; text-align:center; padding:4px 0 8px; }
    #footer #footer-inner { width:auto; }
    #footer ul { float:none; }
    #footer ul li { float:none; display:inline-block; }
    #footer address { float:none; text-align:center; background-position:center center; }

    /* #header */
    #header,
    #wrapper .header1 { height:auto; position:fixed; top:0; left:0; width:100%; padding:0; height:50px; 
        box-shadow:0 1px 1px 0px rgba(0,0,0,0.2); z-index:50; background:#fff; }
    #header h1 { margin:15px 0 5px 5vw; }
    #header h1 img { width:120px; height:auto; }
    
    /* #menu */    
    #menu { display:none; }
    #menuBtn { display:block; position:absolute; top:0px; right:4vw; width:40px; padding:0; z-index:99; }
        body.menuopen #menuBtn { position:fixed; }
    #wrapper #gnavi_sp { display:none; position:absolute; top:50px; left:0; 
        background:#fff; z-index:20; width:100%; overflow:scroll; height:105vh; }
    #wrapper .gnavi_sp_h { background:#333; position:fixed; top:0; left:0; width:100%; z-index:1; }
    #wrapper #gnavi_sp .inner { z-index:0; padding:55px 0 35px; }
    #wrapper #gnavi_sp .logo { width:175px; height:35px; overflow:hidden; padding:10px; display:block;}
    #wrapper #gnavi_sp .logo img { max-width:none; width:185px; height:auto; }
    
    #wrapper #gnavi_sp #gnavi { background:#f8f8f8; height:auto; border-top:1px solid #ccc; margin-bottom:17px; }
    #wrapper #gnavi_sp #gnavi li { width:50%; /* border-bottom:1px solid #ccc; */ }
    #wrapper #gnavi_sp #gnavi li a { background:none; padding:15px 5px 15px 24px; width:auto; height:auto; position:relative;
        font-size:12px; font-weight:bold; color:#333; text-decoration:none; vertical-align:middle; display:block; }
        #wrapper #gnavi_sp #gnavi li a:hover { text-decoration:none; }
        #wrapper #gnavi_sp #gnavi li a:visited { color:#555; }
        #wrapper #gnavi_sp #gnavi li:nth-child(even) a { border-left:1px solid #fff; }
    #wrapper #gnavi_sp #gnavi li a::before { content:''; 
        position:absolute; top:0; bottom:1px; left:6px; margin:auto; display:block; 
        width:8px; height:8px; border-radius:50%; /* border:2px solid #bbb; */ }
        #gnavi .g01 a { border-bottom:3px solid #333; }
        #gnavi .g01 a:before { border:3px solid #333; }
        #gnavi .g02 a { border-bottom:3px solid #09c; }
        #gnavi .g02 a:before { border:3px solid #09c; }
        #gnavi .g03 a { border-bottom:3px solid #eb0; }
        #gnavi .g03 a:before { border:3px solid #eb0; }
        #gnavi .g04 a { border-bottom:3px solid #a4a; }
        #gnavi .g04 a:before { border:3px solid #a4a; }
        #gnavi .g05 a { border-bottom:3px solid #6b3; }
        #gnavi .g05 a:before { border:3px solid #6b3; }
        #gnavi .g06 a { border-bottom:3px solid #e59; }
        #gnavi .g06 a:before { border:3px solid #e59; }
        #gnavi .g07 a { border-bottom:3px solid #44a; }
        #gnavi .g07 a:before { border:3px solid #44a; }
        #gnavi .g08 a { border-bottom:3px solid #e22; }
        #gnavi .g08 a:before { border:3px solid #e22; }
        
    #wrapper #gnavi_sp #hnavi { position:relative; top:auto; left:auto; width:auto; height:auto; margin:0 0 20px;  }
    #wrapper #gnavi_sp #hnavi li { float:none; display:inline-block; }
    #wrapper #gnavi_sp form { padding:20px 0; border-top: 1px solid #ccc;}
    #wrapper #gnavi_sp #search { position:relative; top:auto; right:auto; margin:0 auto; }

    /*　.tcon   */
    .tcon { transition:0.3s; height:52px; width:50px; background:transparent; outline:none;  margin:auto;
        -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; cursor:pointer; 
        display:-webkit-flex; display:-ms-flexbox; display:flex;   -webkit-justify-content:center; 
        -ms-flex-pack:center; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center;   
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; 
        -webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;  }
        .tcon > * { display:block;  }
        .tcon:hover, .tcon:focus { outline:none;  }
        .tcon::-moz-focus-inner { border:0;  }
    .tcon-menu__lines { display:inline-block; height:2px; width:30px; border-radius:2px; transition:0.3s; background:#333; position:relative;  }
            .tcon:hover .tcon-menu__lines { background:#333;}
            .tcon-menu__lines::before, 
            .tcon-menu__lines::after {
            display:inline-block; height:2px; border-radius:2px; transition:0.3s; 
            background:#333; content:''; position:absolute; left:0; right:0; width:100%; margin:auto;
            -ms-transform-origin:1px center; -webkit-transform-origin:1px center; transform-origin:1px center; }
                    .tcon:hover .tcon-menu__lines::before, .tcon:hover .tcon-menu__lines::after { background:#333; }
        .tcon-menu__lines::before { top:10px;  }
        .tcon-menu__lines::after { top:-10px;  }
        .tcon-transform .tcon-menu__lines { -ms-transform:scale3d(0.8, 0.8, 0.8); -webkit-transform:scale3d(0.8, 0.8, 0.8); transform:scale3d(0.8, 0.8, 0.8);  }
    .tcon-menu--xcross { width:auto;  }
        .tcon-menu--xcross.tcon-transform .tcon-menu__lines { background:transparent; background:transparent;  }
        .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, 
        .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -ms-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; top:0; width:35px; /* background:#fff; */}
        .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before { -ms-transform:rotate(45deg);  -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg) scaleY(1.4); }
        .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -ms-transform:rotate(-45deg); -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate(-45deg) scaleY(1.4); }
    .tcon-visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;  }
    .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; }
}
/* ---------------------------------------------
 cols
--------------------------------------------- */
.cols2 { margin-right:-30px; }
    .cols2:after { content:""; display:table; clear:both; }
.cols2 .col { width:50%; float:left; }
.cols2 .col .colinner { margin:0 30px 30px 0;}

.cols3 { margin-right:-30px; }
    .cols3:after { content:""; display:table; clear:both; }
.cols3 .col { width:33.3%; float:left; }
.cols3 .colspan2 { width:66.6%;}
.cols3 .col .colinner { margin:0 30px 30px 0; }

.cols4 { margin-right:-30px; }
    .cols4:after { content:""; display:table; clear:both; }
.cols4 .col { width:25%; *width:24.95%; float:left; }
.cols4 .colspan2 { width:50%;}
.cols4 .col .colinner { margin:0 30px 30px 0; display:block; }

.colinner  { display:block; }
	.colinner:after { content:""; display:table; clear:both; }
.colinner img { max-width:100%; }
@media only screen and (max-width:1200px) {
    .cols2,
    .cols3,
    .cols4 { max-width:100%; margin-right:0;  }
    .cols2 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
    .cols3 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
    .cols4 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
}
@media only screen and (max-width:767px) {    
	.cols2,
	.cols3 { margin-left:auto; margin-right:auto; max-width:none; }
	.cols2 .col,
	.cols3 .col { width:100%; margin:0 auto 10px; }
	.cols2 .col .colinner,
	.cols3 .col .colinner { margin:0 0 10px; width:100%; }
	.cols4 { margin-right:-10px; max-width:none; }
	.cols4 .col { width:50%; }
	.cols4 .col .colinner { margin:0 10px 10px 0; width:auto; }
}
/* ---------------------------------------------
 #main
--------------------------------------------- */
#main #topicpath { font-size:1.3rem; margin-top:5px; line-height:1.4; }
#main #topicpath a,
#main #topicpath span { display:inline-block; vertical-align:middle; }

#main .h { margin:0 0 10px; border-bottom:1px dotted #ccc; }
#main .h:after { content:""; display:table; clear:both; }
#main .h h3 { display:inline-block; padding:0; margin:0; height:25px; width:auto;
    background:none !important; color:#09c; font-size:18px; font-weight:bold; }
#main .link_list { display:block; float:right; }

#main .book .bookR ul li.bk06 a { display:inline-block; font-size:1.4rem; }

#pagetop { font-size:1.2rem; }
#footer ul { font-size:1.1rem; }
#footer li { background-position:0 center; }

.link_list { background:url(../../images/icon_docs.png) right center no-repeat; padding-right:20px; }
.link_list,
.link_list:visited { color:#666; }
.link_list:hover { color:#09c; }

@media only screen and (max-width:767px) {    
    #main #topicpath { padding:5px 0; }
    #main h2 { overflow:hidden; }
    #main h2 img { max-width:inherit; }
    #main .book .bookL { float:none; display:block; margin:10px auto; }
    #main .book .bookR { width:auto; height:auto; }
    
    #sidebar h3 { background:#67b53a; }
    body.cat_gendaiyougo #sidebar h3,
    body.cat_houritsugakushu #sidebar h3,
    body.cat_shikakushushoku #sidebar h3,
    body.cat_shakaikeizaijinbun #sidebar h3,
    body.cat_shumiseikatsu #sidebar h3,
    body.cat_ehonjido #sidebar h3,
    body.cat_denshishuppan #sidebar h3,
    body.cat_u-can #sidebar h3 { background:#7c7877; }
}
/* ---------------------------------------------
 modal
--------------------------------------------- */
#bg_modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
    background:rgba(0,0,0,0.7); text-align:center; z-index:999; }
    @keyframes animation1 {
        0% { opacity:0; }
        100% { opacity:1; }
    }
    body.openmodal #bg_modal { 
        display:block;
        animation-name:animation1;
        animation-timing-function: ease-out;
        animation-duration: .3s;
        animation-name: animation1;
        /*transition: opacity .3s ease-out;*/
    }
#modal { position:absolute; top:50px;left:0; right:0; margin:auto; 
    background:#fff; width:70vw; height:80%; /* padding:50px 0; */ 
    /* transition:.5s; opacity:0;  */ 
    }    
    @keyframes animation2 {
        0% { transform:translate(0,100px); opacity:0; }
        100% { transform:translate(0,0); opacity:1;}
    }
    body.openmodal #modal { 
        animation-name:animation2;
        animation-timing-function: ease-out;
        animation-duration: .3s;
        /*top:20px; opacity:1; transition: opacity .3s ease-out;*/
    }
#modal .modalinner { height:100%; }
.modalcontent  { display:none; /* height:100%;  */ text-align:center; 
    overflow-y:scroll; width:90%; height:100%; padding:0 5%; position:relative; }
    .modal_on { display:block; }
.modalcontent .contents { padding:30px 0; }
.modalcontent .body { text-align:left; }
#modal .btn_close { position:absolute; top:-35px; right:0; }

.btn_close { width:30px; height:30px; display:block; cursor:pointer; overflow:visible; }
.btn_close:before,
.btn_close:after { content:""; width:5%; height:100%; background:#fff; display:block; 
    position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
.btn_close:before {transform:rotate(45deg); }
.btn_close:after {transform:rotate(-45deg); }
    
@media only screen and (max-width:767px) {
    #modal { width:90%; }
}