/* ** */
/********** NEWS LIST **********/
/* ** */
.interview-list {max-width:640px; margin:0 auto; width:100%;}
.interview-list > ul {margin:0 auto;}
.interview-list > ul > li {padding:0 10px; box-sizing:border-box; margin:15px auto;}
.interview-list > ul > li a {display:block; padding:15px 10px; box-sizing:border-box; border:1px solid #ccc; position:relative;}
.interview-list > ul > li p {margin:0; line-height:120%;}
.interview-list li.pr a:before {content:"PR"; background-color:#AAA;}
.interview-list li.new a:before {content:"NEW"; background-color:#FF7373;}
.interview-list li a:before {width:46px; font-size:8px; position:absolute; top:-1px; left:-1px; color:#fff; text-align:center; font-weight:bold; height:16px; line-height:16px;}
.interview-list li .thumbnail {display:table; width:35%; text-align:center; margin:0; padding:0 10px 0 0; float:left; box-sizing:border-box;}
.interview-list li .thumbnail span {display:table-cell; width:100px; height:84px; vertical-align:middle; background-color:#f6f6f6; line-height:0;}
.interview-list li .thumbnail img {max-width:100%; max-height:84px; display:block; margin:auto;}
.interview-list li .article-title {width:65%; font-size:14px; font-weight:normal; margin:0; line-height:140%; float:right; color:#01b900;}
.interview-list li .copy-text {font-size:14px; line-height:140%;}
.interview-list li .day-data {width:65%; font-size:11px; padding:4px 0 2px 0; color:#888; display:inline-block; float:right;}

.interview-detail header {margin:15px auto 0; padding:0 10px;}
.interview-detail .day-data {color:#888; float:left; display:inline-block; margin:0; padding:0 0 0; font-size:11px;}
.interview-detail .sns-link {float:right;}
.interview-detail .sns-link li {display:inline-block; padding:0 0 0 2px; width:30px;}
.interview-detail .sns-link li imgg {width:100%;}
.interview-detail .article-title {clear:both; padding:10px 0 5px; margin:0; font-size:16px; font-weight:normal; line-height:140%;}

.box-head-ads {text-align:center; margin:10px auto;}

.interview-detail .article-box {margin:10px auto 0; padding:0 10px;}
.interview-detail .article-box .photo,
.interview-detail .article-box .text {margin:0 auto 10px;}
.interview-detail .article-box .photo p {margin:0 auto 10px; text-align:center; line-height:0;}
.interview-detail .article-box .photo img {max-width:100%; max-height:600px;}
.interview-detail .article-box .text p {margin:0 auto 10px; line-height:190%; font-size:16px;}
.interview-detail .article-box .text p a {text-decoration:underline;}
.interview-detail .article-box .caption {display:block; line-height:normal; font-size:12px;}
.interview-detail .article-box .text-right {text-align:right;}
.interview-detail .article-box .question {color:#01B900;}
.interview-detail .article-box .answer {color:#fff; background-color:#aaa; padding:0 8px; display:inline-block; margin-right:8px; line-height:140%; font-weight:bold;}
.interview-detail .article-box .interview-title {font-size:20px; line-height:140%; color:#01B900; font-weight:normal; margin-top:40px;}

/* ** */
/********** production-list **********/
.interview-list,
.school-list {max-width:640px; margin:0 auto 40px; padding:0; box-sizing:border-box;}
.school-data {margin:0 auto 20px;}
/* ** */
.syllabary-link {margin-top:20px;}
.syllabary-link ul {margin-bottom:20px;}
.syllabary-link li {float:left; width:20%; margin-bottom:10px;}
.syllabary-link li p {margin:0 auto; width:53px; height:36px; background-color:#01b900;}
.syllabary-link li a {display:table; width:100%; height:36px;}
.syllabary-link li a span {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; color:#fff; font-weight:bold;}
.syllabary-link li:last-child {margin-right:0;}
/* ** */

.syllabary-list {padding:0 10px;}
.syllabary-list dt {background-color:#f6f6f6; border:1px solid #01b900; margin:-1px 0 0 0;}
.syllabary-list dt a {display:block; font-weight:bold; color:#01b900; line-height:20px; height:20px; padding:8px 20px; text-align:center; position:relative;}
.syllabary-list dt a:after {content:""; width:8px; height:8px; border:0; border-top:solid 2px #01b900; border-right:solid 2px #01b900; -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); display:block; position:absolute; top:50%; right:14px; margin:-8px 0 0;}
.syllabary-list dt.active a:after {-ms-transform:rotate(315deg); -webkit-transform:rotate(315deg); transform:rotate(315deg); margin:-4px 0 0 0;}
.syllabary-list dd {display:none; padding:10px 0 20px;}
.syllabary-list dd.active {display:block;}
.syllabary-list dd li {width:100%;}
.syllabary-list dd li a {padding:0 3px 8px 6px; display:block; font-size:14px; text-indent:-0.8em; margin:0 0 0 1em;}
.syllabary-list dd li a:before {content:"\2022"; color:#01b900; display:inline-block; margin-right:0.1em; font-size:32px; font-weight:bold; line-height:14px; position:relative; top:3px;}


  ul.syllabary {padding:10px 20px 0;}
  ul.syllabary li {display:-webkit-inline-box;margin:8px;font-size:16px;font-weight:800;padding:10px; background-color:#01b900; color:#fff;}
  section.selection-list h5 {border:1px solid #01b900; background-color:#f6f6f6; text-align:center; font-size:16px; padding:5px 0; color:#01b900; margin:30px 0 15px;}
  section.selection-list{margin:10px 10px 40px;}
  section.selection-list ul li {font-size:16px;list-style:disc;text-indent:0;list-style-position:unset; color:#01b900; margin-left:5%; padding:4px 0;}
  section.selection-list ul li a {color: #111;text-decoration:none;}
  section.selection-list ul li a:hover {text-decoration:underline;}


.new-interview-box {max-width:640px; margin:0 auto 40px; width:100%;}
.new-interview-box ul {margin:20px auto 0;}
.new-interview-box li {padding:0 10px; box-sizing:border-box; margin:0 auto 20px; list-style:none;}
.new-interview-box li a {display:block; padding:10px 10px; box-sizing:border-box; border:1px solid #ccc; position:relative;}
.new-interview-box li p {margin:0; line-height:120%;}
.new-interview-box li .thumbnail {display:table; width:40%; text-align:center; margin:0; padding:0 10px 0 0; float:left; box-sizing:border-box;}
.new-interview-box li .thumbnail span {display:table-cell; width:100px; height:84px; vertical-align:middle; background-color:#f6f6f6; line-height:0;}
.new-interview-box li .thumbnail img {max-width:100%; max-height:84px; display:block; margin:auto;}
.new-interview-box li .info-box {width:100%; display:table;}
.new-interview-box .article-title {width:100%; font-size:16px; font-weight:normal; margin:0 0 4px; line-height:140%; color:#01b900;}
.new-interview-box .copy-text {font-size:16px; line-height:140%;}
.new-interview-box .day-data {width:60%; font-size:14px; padding:4px 0 2px 0; color:#888; display:inline-block; float:right;}

.interview-paging {margin:0 auto 50px;}
.interview-paging .next-page {text-align:center;}
.interview-paging .next-arrow {background:url(/assets/imgs/pc/interview/next-arrow.png) no-repeat; line-height:29px; width:99px; height:29px; display:inline-block; font-size:14px; color:#01B900; font-weight:bold; vertical-align:top;}
.interview-paging .next-title {display:inline-block; padding:0 10px; text-align:center; vertical-align:middle; max-width:545px; font-size:14px; line-height:29px; font-weight:bold;}
.interview-paging .page-num { text-align:center; margin:10px auto 20px auto;}
.interview-paging .page-num li {display:inline-block; margin:10px 5px;}
.interview-paging .page-num li a {display:block; padding:6px 12px; background-color:#aaa; color:#fff;}
.interview-paging .page-num li.current a {background-color:#01B900;}