@charset "utf-8";

/* -----------------------------------------------------------
   #notice_wrapper
   ----------------------------------------------------------- */
#notice_wrapper {padding: 90px 5%; position: relative; z-index: 1; text-align: center;}
@media only screen and (max-width: 950px) {
#notice_wrapper{padding:80px 5%}
}
@media only screen and (max-width: 736px) {
#notice_wrapper{padding:70px 5%}
}
@media only screen and (max-width: 414px) {
#notice_wrapper{padding:60px 5%}
}

#notice_wrapper h2 { font-size:30px; letter-spacing:2px;line-height:1; margin-top: 0; font-weight:700; text-align: center;}
#notice_wrapper h2 b{font-size: 1.1em; vertical-align: 0;}
@media only screen and (max-width: 950px) {
#notice_wrapper h2 { font-size:25px; }
}
@media only screen and (max-width: 667px) {
#notice_wrapper h2 { font-size:20px; }
}
@media only screen and (max-width: 414px) {
#notice_wrapper h2 { font-size:18px; }
}


/* .noticeArea */
#notice_wrapper .noticeArea { margin-top: 90px; position: relative; z-index: 1; }
@media only screen and (max-width: 950px) {
#notice_wrapper .noticeArea{margin-top: 70px;}
}
@media only screen and (max-width: 736px) {
#notice_wrapper .noticeArea{margin-top: 60px;}
}
@media only screen and (max-width: 414px) {
#notice_wrapper .noticeArea{margin-top: 50px;}
}




/* .noticeBox */
#notice_wrapper .noticeBox { margin-top: -1px; padding: 50px 5%; border: #ddd 1px solid; position: relative; z-index: 1;text-align: left;}
#notice_wrapper .noticeBox:nth-child(even){ background: #fafafa;}
/* .titleArea */
#notice_wrapper .noticeBox .titleArea { float: left; width: 25%;}
#notice_wrapper .noticeBox .titleArea h3 { font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 1px; position: relative; z-index: 1;}
#notice_wrapper .noticeBox .titleArea h3 span{ font-size: 0.8em; vertical-align: 0;}
/* .txtArea */
#notice_wrapper .noticeBox .txtArea { float: right; width: 70%; padding-left: 5%; position: relative; z-index: 1;}
#notice_wrapper .noticeBox .txtArea:before { position: absolute; top: -35px; left: 0; bottom: -35px; width: 0; content: ""; border-left: #ddd 1px dotted; z-index: -1;}

@media only screen and (max-width: 950px) {
#notice_wrapper .noticeBox .titleArea h3 { font-size: 14px; }
}
@media only screen and (max-width: 768px) {
#notice_wrapper .noticeBox {  padding: 45px 5%;}
#notice_wrapper .noticeBox .titleArea { float: none; width: 100%;}
#notice_wrapper .noticeBox .titleArea h3 { text-align: center;}
#notice_wrapper .noticeBox .txtArea { float: none; width: 100%; padding-left: 0; margin-top: 30px;}
#notice_wrapper .noticeBox .txtArea:before { display: none;}
}
@media only screen and (max-width: 736px) {
#notice_wrapper .noticeBox {  padding: 35px 5%;}
#notice_wrapper .noticeBox .txtArea { margin-top: 20px;}
}





/* ul */
#notice_wrapper .noticeBox ul {margin:0; padding:0; list-style: disc; list-style: circle; padding-left:1em;}
#notice_wrapper .noticeBox ul li { margin-top: 3px; font-size: 14px; letter-spacing: 1px; line-height: 2; position:relative;}
#notice_wrapper .noticeBox ul li:first-child { margin-top: 0;}
#notice_wrapper .noticeBox ul li a{ border-bottom: #111 1px dashed;}
#notice_wrapper .noticeBox ul li a:hover{ border-bottom: #111 1px dashed; color: #fefefe; background: #111; }
#notice_wrapper .noticeBox ul li ul {list-style: none;}
#notice_wrapper .noticeBox ul li ul li { padding-left:1.25em;margin-top: 0;}
#notice_wrapper .noticeBox ul li ul li:before { position:absolute; top:0; left:0; width:10px; display:block; content:"※"; }

@media only screen and (max-width: 768px) {
#notice_wrapper .noticeBox ul li{ font-size: 13px; line-height: 2; }
}
@media only screen and (max-width: 736px) {
#notice_wrapper .noticeBox ul li{ font-size: 12px; line-height: 1.8; }
}