@charset "utf-8";
@import url(fonts.css);
@import url(reset.css);

footer {position:relative;bottom: 0;left: 0;width: 100%;color: #999;text-align: center;}
footer a {color: #999;}

dl.note dt {color: #666;background-image: url('../images/icon_outline_info@2x.png');background-repeat: no-repeat;}
dl.note dd {color: #999;}

div.terms {display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.3);z-index: 2;}
div.terms > div {position: absolute;width: 100%;background-color: #fff;overflow: hidden;}
div.terms > div > h6 {font-weight: 600;color: #333;}
div.terms > div input {position: absolute;left: 0;top: 0;z-index: -1;}
div.terms > div label {position: relative;display: inline-block;}
div.terms > div label > span {display: inline-block;background: #fff url('../images/ico_checkbox.png') no-repeat 0 50%;}
div.terms > div > ul > li button {float: right;color: #666;line-height: 130%;background-color: #fff;}
div.terms > div > ul > li div {display: none;border: 1px solid #ccc;overflow: auto;}
/*div.terms > div > button {display: block;margin: 0 auto;color:#fff;border-radius: 3px;background-color: #17c4bf;}*/
div.terms > div input:checked + span {background-image: url('../images/ico_checkbox_cur.png');}

.terms_cont > ul li {position: relative;color: #666;text-align: justify;}
.terms_cont > ul li:before {position: absolute;left: 0;display: block;background-color: #666;content: "";}
.terms_cont h3 {font-weight: 600;}
.terms_cont p.ex {color: #333;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #f2f2f2;}
.terms_cont p.ex span {color: #fc5669;}
.terms_cont p.text {color: #666;}
.terms_cont table {width: 100%;table-layout: fixed;border-spacing: 0;border-collapse: collapse;table-layout: auto;border: none;border-top: 1px solid #8f8f8f;border-bottom: 1px solid #8f8f8f;}
.terms_cont table th {font-weight: normal;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;text-align: center;background-color: #e4eaf2;}
.terms_cont table td {text-align: center;border-left: 1px solid #ccc;}
.terms_cont table tr th:first-of-type,
.terms_cont table tr td:first-of-type {border-left: 0;}
.terms_cont table tbody tr + tr td {border-top: 1px solid #ccc;}
.terms_cont table span {color: #fc5669;}
.terms_cont table + p {color: #666;}


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

	dl.note {margin-top: 5.556vw;}
	dl.note dt {padding-left: 5.3vw;font-size: 3.889vw;background-size: 4.444vw;background-position: 0 50%;}
	dl.note dd {padding-left: 5.3vw;font-size: 3.333vw;}
	footer {height: 11.111vw;font-size: 3.333vw;}

    div.terms > div {bottom: -200px;padding: 5.556vw 0;border-radius: 5.556vw 5.556vw 0 0;}
    div.terms > div h6 {margin-bottom: 2.778vw;padding-left: 5.556vw;}
    div.terms > div > ul > li {margin: 0 5.556vw;}
    div.terms > div > ul > li + li {margin-top: 2vw;}
    div.terms > div label span {padding-left: 5.556vw;font-size: 3.611vw;line-height: 4.5vw;background-size: 4.167vw;}
    div.terms > div > ul > li button {font-size: 3.333vw;}
    div.terms > div > ul > li div {margin: 3vw 0;padding: 2.778vw;max-height:30vh;font-size: 3.333vw;}
    div.terms > div > button {margin: 5.556vw 5.556vw 0;padding: 3vw 0;width: 88.888vw;font-size: 3.889vw;}

    .terms_cont > ul li {padding-left: 2.778vw; font-size: 3.333vw;}
    .terms_cont > ul li:before {top: 1.8vw;width: 0.833vw;height: 0.833vw;}
    .terms_cont > ul li + li {margin-top: 2.778vw;}
    .terms_cont h3 {margin-top: 5.556vw;font-size: 4.444vw;}
    .terms_cont .ex {margin-top: 2.778vw;padding: 2.778vw;font-size: 3.611vw;}
    .terms_cont p.text {margin-top: 2.778vw;font-size: 3.333vw;}
    .terms_cont table {margin-top: 1.389vw;font-size: 3.333vw;}
    .terms_cont table th {padding: 1.389vw 0;}
    .terms_cont table td {padding: 1.389vw 0;}
    .terms_cont table + p {margin-top: 1.389vw;font-size: 3.333vw;}
}

@media screen and (min-width:451px) {
	footer {height: 30px;font-size: 12px;}
	    
	dl.note {margin-top: 20px;}
	dl.note dt {padding-left: 20px;font-size: 12px;background-size: 15px;background-position: 0 50%;}
	dl.note dd {padding-left: 20px;font-size: 12px;}
    
    div.terms > div {left: 50%;margin-left: -250px;width: 500px;bottom: -200px;padding: 30px 0;border-radius: 10px 10px 0 0;}
    div.terms > div h6 {margin-bottom: 10px;padding-left: 20px;}
    div.terms > div > ul > li {margin: 0 20px;}
    div.terms > div > ul > li + li {margin-top: 5px;}
    div.terms > div label span {padding-left: 24px;font-size: 16px;line-height: 30px;background-size: 18px;}
    div.terms > div > ul > li button {font-size: 14px;}
    div.terms > div > ul > li div {margin: 10px 0;padding: 20px 20px 0; max-height:300px;font-size: 14px;}
    div.terms > div > button {margin: 20px 20px 0;padding: 10px 0;width: 460px;font-size: 16px;}

    .terms_cont > ul li {padding-left: 10px; font-size: 14px;}
    .terms_cont > ul li:before {top: 8px;width: 3px;height: 3px;}
    .terms_cont > ul li + li {margin-top: 10px;}
    .terms_cont h3 {margin-top: 25px;font-size: 16px;}
    .terms_cont .ex {margin-top: 15px;padding: 15px;font-size: 14px;}
    .terms_cont p.text {margin-top: 15px;font-size: 14px;}
    .terms_cont table {margin-top: 5px;font-size: 14px;}
    .terms_cont table th {padding: 5px 0;}
    .terms_cont table td {padding: 5px 0;}
    .terms_cont table + p {margin-top: 5px;font-size: 14px;}
}