@charset "UTF-8";

/* ────────────────────────────────────────────────────────── Toppage Tab Layout */

#about {
background:#f5f2e9;
padding:80px;
}

#about p.align-center + .heading01 {
margin-top:1em;
}

#about .pic-xs_about {
width:100%;
max-width:208px;
}

#reading {
overflow:hidden;
padding-top:3.5em;
}

#reading p.thumb img {
width:100%;
max-width:810px;
height:auto;
}

#challenge, #quiz {
overflow:hidden;
}

#challenge p, #quiz p {
color:#fff;
}

#challenge p.text-sm, #quiz p.text-sm {
text-align:center;
}

/*#challenge p ruby, #quiz p ruby {
line-height:2em;
}*/

.page-link li {
border:1px solid #fff;
border-radius:18px;
box-sizing:border-box;
display:inline-block;
width:100px;
height:36px;
font-size:87.5%;
color:#fff;
text-align:center;
vertical-align:top;
line-height:34px;
margin:10px 0 0 10px;
}

.page-link li.active {
background:none;
border:none;
}

.page-link li:nth-child(-n+9) {
margin-top:0;
}

.page-link li:nth-child(9n+1) {
margin-left:0;
}

.page-link li a {
background:#a08a23;
border-radius:18px;
display:block;
width:100px;
height:36px;
color:#fff;
text-decoration:none;
line-height:36px;
}

.col-chg, .col-quiz {
background:#f5f2e9;
margin-top:60px;
padding:60px;
}

.heading02 + .col-chg, .heading02 + .col-quiz {
margin-top:0;
}

#challenge .col-chg p {
color:#594c51;
text-align:center;
}

#challenge .col-chg p strong {
display:block;
font-weight:normal;
color:#131018;
}

#challenge .col-chg p .num {
display:inline-block;
font-family:'bluu_nexttitling';
font-size:240%;
color:#40245e;
line-height:1em;
margin-bottom:0.625em;
padding:2px 40px;
position:relative;
}

#challenge .col-chg p .num:before, #challenge .col-chg p .num:after {
display:inline-block;
content:'';
width:20px;
height:30px;
position:absolute;
}

#challenge .col-chg p .num:before {
border-top:1px solid #40245e;
border-left:1px solid #40245e;
top:0;
left:0;
}

#challenge .col-chg p .num:after {
border-right:1px solid #40245e;
border-bottom:1px solid #40245e;
bottom:0;
right:0;
}

#challenge .col-chg p.notes {
margin-top:1.25em;
}

.col-quiz dl dt {
background:#40245e;
font-size:125%;
color:#fff;
line-height:1.5em;
margin:3em 0 0.625em;
padding:0.5em 1.5em;
position:relative;
}

.col-quiz dl dt:nth-child(1) {
margin-top:0;
}

.col-quiz dl dt:before {
content:'';
border:none;
border-bottom:9px solid transparent;
border-right:12px solid rgb(18, 6, 31);
position:absolute;
top:100%;
left:0;
}

.col-quiz dl dd {
padding-left:2.5em;
}

.col-quiz dl dd ol li {
border-bottom:1px solid #dfd7cb;
box-sizing:border-box;
color:#131018;
line-height:1.5em;
padding:0.75em 0;
position:relative;
}

.col-quiz dl dd ol > li {
counter-increment:cnt;
}

.col-quiz dl dd ol > li:before {
display:inline-block;
content:""counter(cnt, decimal)".";
width:1.25em;
font-family:'bluu_nexttitling';
font-size:125%;
color:#40245e;
position:absolute;
left:-1.25em;
}

.mfp-bg {
background:#131018;
/*opacity:0.5;*/
opacity:0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width:95%;
}

.modal-popup {
width:auto;
max-width:980px;
margin:2.5em auto;
position:relative;
}

.mfp-content p.modal-popup {
margin-top:2.5em;
}

.mfp-bg.mfp-ready {
opacity: 0.8;
}

.mfp-bg.mfp-removing {
opacity: 0;
}

.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}

.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}

.mfp-close {
border-radius:1.5em;
width:1.5em;
height:1.5em;
font-size:2em;
line-height:1.5em;
opacity:1;
top:-0.75em;
right:-0.75em;
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}

.mfp-close:hover, .mfp-close:focus {
opacity:0.75;
}

.mfp-close:active {
top:-0.75em;
}

.mfp-close-btn-in .mfp-close {
background:#a08a23;
color:#fff;
}


/* ────────────────────────────────────────────────────────── TB */

@media all and (max-width:1199px) {

#about {
padding:6%;
}

#about p.align-center + .heading01 {
margin-top:5.25%;
}

.page-link {
text-align:center;
}

.page-link li {
margin:5px;
}

.page-link li:nth-child(-n+9) {
margin-top:5px;
}

.page-link li:nth-child(9n+1) {
margin-left:5px;
}

.col-chg, .col-quiz {
margin-top:6%;
padding:6%;
}

#challenge .col-chg p .num {
margin-bottom:4%;
}

#challenge .col-chg p.notes {
margin-top:0.75em;
}

.col-quiz dl dt {
margin:6% 0 0.625em;
}

}


/* ────────────────────────────────────────────────────────── SP */

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

#about p.align-center + .heading01 {
margin-top:0.625em;
}

#about .pic-xs_about {
width:100%;
max-width:104px;
}

.page-link li {
border-radius:14px;
width:80px;
height:28px;
font-size:75%;
line-height:26px;
}

.page-link li.active {
background:none;
border:none;
}

.page-link li a {
border-radius:14px;
width:80px;
height:28px;
line-height:28px;
}

.col-chg, .col-quiz {
margin-top:2em;
padding:2em 6%;
}

#challenge p.mt-60 {
margin-top:2em;
}

#challenge .col-chg p .num {
margin-bottom:0.25em;
}

.mfp-close {
font-size:1em;
}

}