@charset "utf-8";

/*---------------------------------------------------------
GURADUATION
---------------------------------------------------------*/

.article.graduation {
  width: 870px;
  margin: 0 auto;
}
.graduation .article-header .background {
  width: 100%;
}
@media screen and (max-width: 667px) {
  .article.graduation {
    width: 100%;
    margin: 0 auto;
  }
.graduation .article-header .background {
  background-size: 100% auto;
  width: 100%;
  height: auto;
  padding-bottom: 0;
}
}

.graduation.sotsuen_sotsugyo_template .article-header .background { background-image: url(../images/cp/graduation/template_main.png); }
.graduation.sotsuen_sotsugyo_faq .article-header .background { background-image: url(../images/cp/graduation/faq_main.png); }
.graduation.sotsuen_sotsugyo_howto .article-header .background { background-image: url(../images/cp/graduation/howto_main.png); }

.graduation .article-header .headline,
.graduation .article-header .sentence { text-align: left; }
@media screen and (max-width: 667px) {
.graduation .article-header .headline,
.graduation .article-header .sentence { position: static; }
}

.graduation .article-header .headline {
  top: 0.7em;
  left: 0.5em;
  font-size: 4em;
  line-height: 1.1;
  color: #fff;
}
.graduation.sotsuen_sotsugyo_howto .article-header .headline { top: 0.5em; }
@media screen and (max-width: 667px) {
.graduation .article-header .headline {
  position: absolute;
  top: 2em;
  font-size: 1.6em;
  color: #fff;
}
}

.graduation.sotsuen_sotsugyo_howto .article-header .subheading {
  position: absolute;
  top: 4.5em;
  left: 0.8em;
  font-size: 2em;
}
@media screen and (max-width: 667px) {
.graduation.sotsuen_sotsugyo_howto .article-header .subheading {
  position: static;
  margin-top: 0.5em;
  text-align: left;
  font-size: 1.2em;
}
}

.graduation.sotsuen .article-header .headline { color: #333; }

.graduation .article-header.multiple-line .headline {
  font-size: 3em;
  line-height: 1.2;
  color: #333;
}
@media screen and (max-width: 667px) {
.graduation .article-header.multiple-line .headline {
  top: 1em;
  font-size: 1.6em;
}
.graduation.sotsuen_sotsugyo_howto .article-header.multiple-line .headline {
  top: 1em;
  font-size: 1.4em;
}
}

.graduation .article-header .sentence {
  top: 7.5em;
  left: 1.4em;
  width: 57%;
  font-size: 1em;
  line-height: 1.6;
}
.graduation.sotsuen_sotsugyo_howto .article-header .sentence { top: 8.5em; }
@media screen and (max-width: 667px) {
.graduation .article-header .sentence {
  position: static !important;
  width: 100%;
  margin-top: 0.5em;
  font-size: 1em;
}
}

.graduation .article-header.multiple-line .sentence {
  left: 1.2em;
  font-size: 1.4em;
  line-height: 1.6;
}
@media screen and (max-width: 667px) {
.graduation .article-header.multiple-line .sentence {
  width: 100%;
  font-size: 1em;
}
}

.graduation .article-header .background + .btn {
  height: 4em;
  margin: 1em 0 0 auto;
}

.graduation .article-header .background + .btn .btn-body {
  width: 25em;
  font-size: 1.6em;
}
@media screen and (max-width: 667px) {
.graduation .article-header .background + .btn .btn-body {
  width: 100%;
  font-size: 1.2em;
}
}

.graduation .article-header .background + .btn .btn-body.sotsugyo {
  background-color: #fbc6cc;
  color: #fff;
}
.graduation .article-header .background + .btn .btn-body.sotsuen {
  background-color: #fcdc9c;
  color: #333;
}

@media screen and (max-width: 667px) {
.graduation .school .page-navi { margin-top: 1em; }
}

.graduation .school .page-navi .btn {
  border-left: 1px solid #a5a5a5;
  transition: 0.3s;
  padding: 0 !important;
  font-size: 13px !important;
}
@media screen and (max-width: 667px) {
.graduation .school .page-navi .btn {
  float: left;
  width: 50%;
}
}

.graduation .school .page-navi .btn:first-child { border-left: none; }
@media screen and (max-width: 667px) {
.graduation .school .page-navi .btn:nth-child(odd) { border-left: none; }
.graduation .school .page-navi .btn:nth-child(even) { border-left: 1px solid #a5a5a5; }
}

.graduation .school .page-navi .btn:hover { background-color: #fbc6cc; }

.graduation .school .page-navi .btn-body:before {
  content: "▼";
  margin-right: 0.2em;
  font-size: 0.8em;
}
.graduation .school .page-navi .btn-body.red:before { color: red; }
.graduation .school .page-navi .btn-body.pink:before { color: deeppink; }
.graduation .school .page-navi .btn-body.green:before { color: green; }
.graduation .school .page-navi .btn-body.blue:before { color: blue; }
.graduation .school .page-navi .btn-body.yellow:before { color: darkgoldenrod; }
.graduation .school .page-navi .btn-body.sky-blue:before { color: deepskyblue; }

.graduation .school .page-navi .btn-body {
  height: 2em;
  padding: 0 1em;
  font-size: 1.4em;
}
.graduation.sotsuen_sotsugyo_howto .school .page-navi .btn-body { padding: 0 0.7em; }
@media screen and (max-width: 667px) {
.graduation .school .page-navi .btn-body {
  height: 1.5em;
  padding: 0;
  font-size: 1.1em;
}
.graduation.sotsuen_sotsugyo_howto .school .page-navi .btn-body {
  padding: 0;
  font-size: 1em;
}
}

.graduation .page-navi .btn-body {
  font-weight: normal;
  color: #3d3d3d;
}

.graduation .page-menu {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 667px) {
.graduation .page-menu { width: 100%; }
}

.graduation .page-menu .page-navi .btn { transition: 0.3s; }

.graduation .page-menu .page-navi .btn { width: 26em; padding: 0; font-size: 13px;}
@media screen and (max-width: 667px) {
.graduation .page-menu .page-navi .btn {
  width: 100%;
  margin-top: 1em;
}
}

.graduation .page-menu .page-navi .btn:nth-child(even) { margin-left: 1em; }
@media screen and (max-width: 667px) {
.graduation .page-menu .page-navi .btn:nth-child(even) { margin-left: 0; }
}

.graduation .page-menu .page-navi .btn:nth-child(n+3) { margin-top: 1em; }

.graduation .page-menu .page-navi .btn-body {
  background-color: #fbc6cc;
  font-size: 1.6em;
  font-weight: bold;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
@media screen and (max-width: 667px) {
.graduation .page-menu .page-navi .btn-body { font-size: 1.2em; }
}

.graduation.sotsuen .page-menu .page-navi .btn-body { background-color: #fcdc9c; }

.graduation .page-menu .page-navi .btn-body .small {
  font-size: 0.8em;
  font-weight: normal;
}

.graduation .page-menu .page-navi .btn-body:hover { box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); }

.graduation .article-section > .headline {
  background-color: #fbc6cc;
  padding: 1em 0.5em;
}

.graduation.sotsuen .article-section > .headline { background-color: #fcdc9c; }

.graduation .article-section .subheadline {
  background-color: #ff8569;
  margin-top: 1.5em;
  padding: 0.5em;
  font-size: 1.2em;
  color: #fff;
}

.graduation .article-section > .headline + .sentence,
.graduation .article-section > .subheadline + .sentence,
.graduation .article-section > .common-sentence {
  margin-top: 1em;
  font-size: 1.25em;
  line-height: 1.6;
}

.graduation .pickup .column .comment { padding: 2em 0 2em 1.3em; }
@media screen and (max-width: 667px) {
.graduation .pickup .column .comment { padding: 0.5em 0; }
}

.graduation .pickup.prehead {
  margin-top: 0;
  padding-bottom: 3em;
}
@media screen and (max-width: 667px) {
.graduation .pickup.prehead {
  margin-top: 1em;
  padding-bottom: 0;
}
}

.graduation .pickup.prehead .figure { width: 26.5%; }
.graduation .pickup.prehead .comment { width: 73.5%; }
@media screen and (max-width: 667px) {
.graduation .pickup.prehead .figure,
.graduation .pickup.prehead .comment { width: 100%; }
}

.graduation .pickup.prehead .comment {
  display: block;
  width: 100%;
}

.graduation .pickup.prehead.photo-left .comment .picture,
.graduation .pickup.prehead.photo-right .comment .picture {
  vertical-align: top;
  width: 46%;
}
.graduation .pickup.prehead.photo-left .comment .picture {
  float: left;
  margin-right: 1.3em;
  margin-bottom: 1.3em;
}
.graduation .pickup.prehead.photo-right .comment .picture {
  float: right;
  margin-left: 1.3em;
  margin-bottom: 1.3em;
  padding: 1em 0 1em 0;
}

.graduation .pickup.prehead .comment { font-size: 1.3em; }
@media screen and (max-width: 667px) {
.graduation .pickup.prehead .comment { font-size: 1em; }
}

.graduation .pickup.prehead .comment .headline {
  margin: 0;
  color: #c00;
}
@media screen and (max-width: 667px) {
.graduation .pickup.prehead .comment .headline { margin-top: 0.5em; }
}

.graduation .item-list { padding-bottom: 2em; }
@media screen and (max-width: 667px) {
.graduation .item-list { margin-top: 0; }
}

.graduation .item-list > .sentence {
  margin-top: 2em;
  text-align: right;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.graduation .item-list > .sentence {
  margin-top: 1em;
  text-align: left;
  font-size: 1em;
}
}

.graduate-ranking .wide-item { position: relative; }

.graduate-ranking .column .item,
.graduate-ranking .wide-item { padding-top: 3.4em; }
@media screen and (max-width: 667px) {
.graduate-ranking .column .item:first-child,
.graduate-ranking .wide-item { border-top: 1px solid #ccc; }
.graduate-ranking .wide-item { padding-bottom: 3em; }
}

@media screen and (max-width: 667px) {
.graduation .item.prehead {
  border-bottom: 1px solid #ccc;
  margin-bottom: 2em;
  padding-bottom: 1em;
}
}

.graduate-ranking .wide-item .link-block,
.graduate-ranking .item .link-block { position: relative; }

.graduation.sotsuen .wide-item .figure .picture { width: auto; }
@media screen and (max-width: 667px) {
.graduation.sotsuen .wide-item .figure .picture { width: 100%; }
}

.graduate-ranking .wide-item .comment {
  left: 64%;
  top: 3em;
  width: 35%;
  z-index: 2;
}
@media screen and (max-width: 667px) {
.graduate-ranking .wide-item .comment { width: 100%; }
}

.sotsuen .graduate-ranking .wide-item .comment {
  top: 9em;
  left: 50%;
  width: 50%;
}
@media screen and (max-width: 667px) {
.sotsuen .graduate-ranking .wide-item .comment { width: 100%; }
}

.graduate-ranking .wide-item .comment .headline { font-size: 1.4em; }

.graduation .item .comment .headline { font-size: 1em; }
.graduation .item.prehead .comment .headline { font-size: 1.6em; }
@media screen and (max-width: 667px) {
.graduation .item .comment .headline,
.graduation .item.prehead .comment .headline { font-size: 0.8em; }
}

.graduate-ranking .rankic {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  background-size: 60px 60px;
  border: none;
  width: 60px;
  height: 60px;
}
@media screen and (max-width: 667px) {
.graduate-ranking .rankic {
  top: -2.5em;
  left: 0;
  background-size: 30px 30px;
  border: none;
  width: 30px;
  height: 30px;
}
}

.graduate-ranking .rankic.r1 {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 90px 90px;
  width: 90px;
  height: 90px;
}
.sotsuen .graduate-ranking .wide-item .rankic.r1 { left: 32.5em; }
@media screen and (max-width: 667px) {
.graduate-ranking .wide-item .rankic.r1,
.sotsuen .graduate-ranking .wide-item .rankic.r1 {
  left: 0;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
}
}

.graduate-ranking .rankic.r1 { background-image: url(../images/cp/graduation/icon_rank1.png); }
.graduate-ranking .rankic.r2 { background-image: url(../images/cp/graduation/icon_rank2.png); }
.graduate-ranking .rankic.r3 { background-image: url(../images/cp/graduation/icon_rank3.png); }
.graduate-ranking .rankic.r4 { background-image: url(../images/cp/graduation/icon_rank4.png); }
.graduate-ranking .rankic.r5 { background-image: url(../images/cp/graduation/icon_rank5.png); }

.graduate-ranking .rankic.r6 {
  background-color: #fff;
  background-image: url(../images/cp/graduation/icon_special.png);
  background-size: 60px 60px;
  border-radius: 50px;
  width: 60px;
  height: 65px;
}
@media screen and (max-width: 667px) {
.graduate-ranking .rankic.r6 {
  background-size: 40px 40px;
  width: 40px;
  height: 45px;
}
}

.graduation .wide-item .comment .sentence,
.graduation .item .comment .sentence { font-size: 1.2em; }
@media screen and (max-width: 667px) {
.graduation .wide-item .comment .sentence,
.graduation .item .comment .sentence { font-size: 1em; }
}

.graduation .wide-item .comment .sentence .small,
.graduation .item .comment .sentence .small {
  display: block;
  text-indent: -0.6em;
}
@media screen and (max-width: 667px) {
.graduation .wide-item .comment .sentence .small,
.graduation .item .comment .sentence .small {
  display: block;
  margin-top: 0.2em;
  font-size: 0.9em;
}
}

.graduation .box {
  background-color: #f6fcd8;
  text-align: center;
  padding: 1.5em;
  font-size: 1.3em;
}
@media screen and (max-width: 667px) {
.graduation .box {
  text-align: left;
  padding: 1em 0.5em;
  font-size: 1.1m;
}
}

@media screen and (max-width: 667px) {
.graduation .box.relation-category .headline {
  text-align: center;
  font-size: 0.9em;
}
}

@media screen and (max-width: 667px) {
.graduation .box.relation-category .btn {
  float: none;
  width: 100%;
  text-align: left;
}
}

.graduation .box .btn {
  font-size: 1em;
  border-right: 1px solid #333;
  float: left;
  margin-top: 0.5em;
}
@media screen and (max-width: 667px) {
.graduation .box .btn {
  border-right: none;
  width: 50%;
}
}

.graduation .box .btn-body {
  text-decoration: underline;
  font-weight: normal;
  color: #333;
  transition: 0.3s;
}
@media screen and (max-width: 667px) {
.graduation .box .btn-body {
  padding: 0.2em 0;
  text-align: left;
  font-size: 0.9em;
}
}

.graduation .box .btn-body:hover { background-color: #fbc6cc; }

.graduation.sotsuen_sotsugyo_template .example .item { text-align: center; }
.graduation.sotsuen_sotsugyo_template .example .item .comment { padding: 1em 0; }
.graduation.sotsuen_sotsugyo_template .example .item .comment .headline {
  margin: 0;
  font-size: 1.4em;
  font-weight: normal;
}
.graduation.sotsuen_sotsugyo_template .example .item .figure .picture {
  width: 90%;
  margin: 0 auto;
}

.graduation.sotsuen_sotsugyo_template .example.stamp .item .figure .picture { width: 60%; }

.graduation .wide-banner { margin-top: 3em; }
@media screen and (max-width: 667px) {
.graduation .wide-banner { margin-top: 1em; }
}

.graduation .font-sample { margin-top: 2em; }
.graduation .font-sample .item {
  display: table;
  table-layout: fixed;
  width: 50%;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.graduation .font-sample .item {
  border: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
}

.graduation .font-sample .item:nth-child(n+3) { margin-top: 1em; }
@media screen and (max-width: 667px) {
.graduation .font-sample .item:nth-child(n+2) { margin-top: 1em; }
}

.graduation .font-sample .item .subheading,
.graduation .font-sample .item .font-sample-figure {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.1;
}
@media screen and (max-width: 667px) {
.graduation .font-sample .item .subheading { width: 7em; }
}

@media screen and (max-width: 667px) {
.graduation .example .column.col03 .item { margin-top: 1.5em; }
.graduation .example .column .item .figure { margin-right: 0; }
.graduation .example .column .item .figure .picture {
  width: 95%;
  margin: 0 auto;
}
}

@media screen and (max-width: 667px) {
.graduation .example.stamp .item .figure { margin-top: 1em; }
.graduation .example.stamp .item .headline { font-weight: normal; }
.graduation .example .item {
  border: none;
  float: left;
  width: 50%;
  padding: 0;
}
}

.graduation .example .item .figure,
.graduation .example .item .comment {
  float: none;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
}

.graduation.sotsuen_sotsugyo_faq .faq-index {
  margin-top: 2em;
  font-size: 1.4em;
  text-align: left;
}
@media screen and (max-width: 667px) {
.graduation.sotsuen_sotsugyo_faq .faq-index {
  margin-top: 1em;
  font-size: 1em;
}
}

.graduation.sotsuen_sotsugyo_faq .faq-index .faq-index-list {
  margin-left: 1.3em;
  transition: 0.3s;
}
@media screen and (max-width: 667px) {
.graduation.sotsuen_sotsugyo_faq .faq-index .faq-index-list { margin-left: 0; }
}

.graduation.sotsuen_sotsugyo_faq .faq-index .faq-index-list:hover { background-color: #fbc6cc; }

@media screen and (max-width: 667px) {
.graduation.sotsuen_sotsugyo_howto .example .item { margin-top: 1em; }
}

.graduation .howto-faq {
  padding-left: 2em;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.graduation .howto-faq {
  padding-left: 0;
  font-size: 1.2em;
}
}

.graduation .howto-faq .howto-faq-q { margin-top: 3em; }
@media screen and (max-width: 667px) {
.graduation .howto-faq .howto-faq-q .picture { width: 100%; }
}

.graduation .howto-faq .headline {
  margin-top: 1em;
  color: #c00;
}
.graduation .howto-faq .sentence { margin-top: 0.5em; }

.graduation .must-item { margin-top: 1.5em; }

.graduation .must-item .sentence {
  font-size: 1.6em;
  font-weight: bold;
  color: #c00;
}

.graduation .must-item .sentence .small { font-size: 0.8em; }

.graduation .must-item-example { font-size: 1.2em; }

@media screen and (max-width: 667px) {
.graduation .must-item-example .item .figure,
.graduation .must-item-example .item .comment {
  float: none;
  width: 100%;
}
}

.graduation .must-item-example .item .comment .headline { font-size: 1.4em; }

.graduation .flow-chart {
  background-color: #f1f2e4;
  margin-top: 3em;
  padding: 1em 0.5em 4em;
}
@media screen and (max-width: 667px) {
.graduation .flow-chart {
  margin-top: 1em;
  padding: 1em 0.5em 2em;
}
}

@media screen and (max-width: 667px) {
.graduation .flow-chart .headline .picture { width: 100%; }
}

.graduation .flow-chart > .headline .picture,
.graduation .flow-chart > .subheading .picture { margin: 0 auto; }

.graduation .flow-chart > .subheading { margin-top: 2em; }

.graduation .chart-area {
  position: relative;
  height: 44.5em;
  margin-top: 1em;
}
@media screen and (max-width: 667px) {
.graduation .chart-area {
  height: auto;
  padding-bottom: 2em;
}
}

.graduation .chart-area .chart-box {
  position: absolute;
  background-color: #fff;
  background-image: url(/html/plugin/Exp/assets/images/cp/graduation/bg_chart-box.png);
  background-position: left top;
  background-repeat: repeat;
  width: 390px;
  height: 190px;
  padding: 1.5em 1em 0 1em;
  font-size: 1.2em;
  z-index: 2;
}
@media screen and (max-width: 667px) {
.graduation .chart-area .chart-box {
  position: static;
  width: 80%;
  height: auto;
  margin: 1em auto 0;
  padding: 1em 0.5em 0 0.5em;
  font-size: 1em;
}
}

.graduation .chart-area .chart-box:nth-child(1) {
  top: 0;
  left: 12em;
  height: auto;
}
.graduation .chart-area .chart-box:nth-child(2) {
  top: 12em;
  left: 0;
}
.graduation .chart-area .chart-box:nth-child(3) {
  top: 12em;
  right: 0;
}
.graduation .chart-area .chart-box:nth-child(4) {
  top: 24.5em;
  left: 17.5em;
  height: 160px;
}

.graduation .chart-area .chart-box .headline {
  border-bottom: 1px solid #333;
  padding-bottom: 0.5em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.graduation .chart-area .chart-box .headline { text-align: left; }
}

.graduation .chart-area .chart-box .chart-choice { margin-top: 0.5em; }

.graduation .chart-area .chart-box .chart-choice-answer {
  position: relative;
  height: 48px;
  padding-left: 1.5em;
  font-size: 0.8em;
}
@media screen and (max-width: 667px) {
.graduation .chart-area .chart-box .chart-choice-answer {
  height: auto;
  padding-right: 4em;
}
}

.graduation .chart-area .chart-box .chart-choice-answer .answer-link { display: none; }
@media screen and (max-width: 667px) {
.graduation .chart-area .chart-box .chart-choice-answer .answer-link {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  font-size: 2em;
}
.graduation .chart-area .chart-box:nth-child(3) .chart-choice-answer .answer-link { top: -0.5em; }
.graduation .chart-area .chart-box .chart-choice-answer .answer-link .small { font-size: 0.5em; }
}

.graduation .chart-area .chart-box .chart-choice-answer:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: serif;
  font-size: 1.3em;
  font-weight: bold;
}

.graduation .chart-area .chart-box .chart-choice-answer.type-a:before {
  content: "A";
  color: #e4b6bd;
}
.graduation .chart-area .chart-box .chart-choice-answer.type-b:before {
  content: "B";
  color: #becdef;
}

.graduation .chart-area .chart-arrow .picture {
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 667px) {
.graduation .chart-area .chart-arrow .picture { display: none; }
}

.graduation .chart-area .chart-arrow .a-1 {
  top: 5em;
  left: 10em;
}
.graduation .chart-area .chart-arrow .a-2 {
  bottom: 0;
  left: 3em;
}
.graduation .chart-area .chart-arrow .a-3 {
  top: 26em;
  left: 29em;
}
.graduation .chart-area .chart-arrow .a-4 {
  bottom: 0;
  left: 24.5em;
}
.graduation .chart-area .chart-arrow .b-1 {
  top: 5em;
  right: 10em;
}
.graduation .chart-area .chart-arrow .b-2 {
  bottom: 0;
  left: 14em;
}
.graduation .chart-area .chart-arrow .b-3 {
  bottom: 0;
  right: 15em;
}
.graduation .chart-area .chart-arrow .b-4 {
  bottom: 0;
  right: 5.2em;
}

.graduation .chart-arrow-sp .picture { display: none; }
@media screen and (max-width: 667px) {
.graduation .chart-arrow-sp .picture {
  position: absolute;
  display: block;
  width: 10%;
  z-index: 1;
}
.graduation .chart-area .chart-arrow-sp .a-1,
.graduation .chart-area .chart-arrow-sp .a-2 { left: 0; }
.graduation .chart-area .chart-arrow-sp .b-1 { right: 0; }
}
@media screen and (max-width: 320px) {
.graduation .chart-area .chart-arrow-sp .a-1,
.graduation .chart-area .chart-arrow-sp .b-1 { top: 4em; }
.graduation .chart-area .chart-arrow-sp .a-2 { top: 25em; }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
.graduation .chart-arrow-sp .picture { width: 8%; }
.graduation .chart-area .chart-arrow-sp .a-1,
.graduation .chart-area .chart-arrow-sp .b-1 { top: 3.5em; }
.graduation .chart-area .chart-arrow-sp .a-2 { top: 23.5em; }
}
@media screen and (min-width: 376px) and (max-width: 413px) {
.graduation .chart-arrow-sp .picture { width: 8%; }
.graduation .chart-area .chart-arrow-sp .a-1,
.graduation .chart-area .chart-arrow-sp .b-1 { top: 1.5em; }
.graduation .chart-area .chart-arrow-sp .a-2 { top: 21.5em; }
}
@media screen and (min-width: 414px) and (max-width: 667px) {
.graduation .chart-arrow-sp .picture { width: 8%; }
.graduation .chart-area .chart-arrow-sp .a-1,
.graduation .chart-area .chart-arrow-sp .b-1 { top: 1.5em; }
.graduation .chart-area .chart-arrow-sp .a-2 { top: 21.5em; }
}

.graduation .chart-result .result-box {
  background-color: #fff;
  background-image: url(/html/plugin/Exp/assets/images/cp/graduation/bg_chart-box.png);
  background-position: left top;
  background-repeat: repeat;
  float: left;
  width: 164px;
  margin-left: 8px;
  font-size: 1em;
}
@media screen and (max-width: 667px) {
.graduation .chart-result .result-box {
  float: none;
  width: 100%;
  margin-left: 0;
}
}

.graduation .chart-result .result-box:nth-child(1) { margin-left: 0; }

.graduation .chart-result .result-box .headline {
  padding: 0.2em 0;
  text-align: center;
  font-size: 1.42em;
  color: #fff;
}
@media screen and (max-width: 667px) {
.graduation .chart-result .result-box .headline { padding: 0; }
}

.graduation .chart-result .result-box:nth-child(1) .headline { background-color: #60c7c5; }
.graduation .chart-result .result-box:nth-child(2) .headline { background-color: #ee909b; }
.graduation .chart-result .result-box:nth-child(3) .headline { background-color: #f2c649; }
.graduation .chart-result .result-box:nth-child(4) .headline { background-color: #5f98ce; }
.graduation .chart-result .result-box:nth-child(5) .headline { background-color: #8772b0; }

.graduation .chart-result .result-box .sentence {
  padding: 1em 0.5em; }

.graduation .flow-chart-result {
  position: relative;
  border-radius: 1em;
  width: 95%;
  margin-top: 3em;
  margin-left: 2em;
  padding: 1em 1.5em;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.graduation .flow-chart-result {
  width: 100%;
  margin-top: 1em;
  margin-left: 0;
  padding: 1em 0.5em;
}
}

.flow-chart-result > .headline {
  position: static;
  padding-left: 0.5em;
}
@media screen and (max-width: 667px) {
.flow-chart-result > .headline { padding-left: 0; }
}

.graduation .flow-chart-result.type-a { border: 4px solid #60c7c5; }
.graduation .flow-chart-result.type-b { border: 4px solid #ee909b; }
.graduation .flow-chart-result.type-c { border: 4px solid #f2c649; }
.graduation .flow-chart-result.type-d { border: 4px solid #5f98ce; }

.graduation .flow-chart-result .column { margin-top: 1em; }
@media screen and (max-width: 667px) {
.graduation .flow-chart-result .column .item {
  border: none;
  float: left;
  width: 49%;
  margin-top: 0.5em;
  padding-top: 0;
}
.graduation .flow-chart-result .column .item:nth-child(even) { margin-left: 2%; }
.graduation .flow-chart-result .column .item .figure {
  width: 100%;
  margin-right: 0;
}
}

.graduation .flow-chart-icon {
  position: absolute;
  top: -0.3em;
  left: -1.3em;
  border-radius: 50%;
  display: block;
  padding: 0.6em 0.8em;
  text-align: center;
  font-size: 1.2em;
  color: #fff;
}
@media screen and (max-width: 667px) {
.graduation .flow-chart-icon {
  position: static;
  display: inline-block;
  width: 2em;
  height: 2em;
  padding: 0.3em;
}
}

.graduation .type-a .flow-chart-icon {
  background-color: #6de0de;
  border: 4px solid #60c7c5;
}
.graduation .type-b .flow-chart-icon {
  background-color: #ff9ba7;
  border: 4px solid #ee909b;
}
.graduation .type-c .flow-chart-icon {
  background-color: #ffd14d;
  border: 4px solid #f2c649;
}
.graduation .type-d .flow-chart-icon {
  background-color: #6aaae6;
  border: 4px solid #5f98ce;
}

.graduation .article-footer { margin-top: 10em; }
@media screen and (max-width: 667px) {
.graduation .article-footer { margin-top: 5em; }
}


/*---------------------------------------------------------
NP BILL PAYMENT
---------------------------------------------------------*/
.np-bill-payment .article-header > .headline {
  margin-top: 0;
  text-align: left;
  color: #333;
}

@media screen and (max-width: 667px) {
.np-bill-payment .picture { width: 100%; }
}

.np-bill-payment > .article-section > .headline {
  padding: 0.3em 0;
  text-align: center;
}

.np-bill-payment .picture { margin: 0 auto; }

.np-bill-payment .headline + .sentence .picture { margin-top: 2em; }
@media screen and (max-width: 667px) {
.np-bill-payment .headline + .sentence .picture { margin-top: 1em; }
}

.np-bill-payment .sentence { margin-top: 1.5em; }
@media screen and (max-width: 667px) {
.np-bill-payment .sentence { margin-top: 1em; }
}

.np-bill-payment > .article-section > .btn { margin-top: 3em; }

@media screen and (max-width: 667px) {
.np-bill-payment .page-navi { margin-top: 2em; }
}

.np-bill-payment .page-navi .btn {
  border-left: 1px solid #a5a5a5;
  transition: 0.3s;
}
@media screen and (max-width: 667px) {
.np-bill-payment .page-navi .btn { border-left: none; }
}

.np-bill-payment .page-navi .btn:hover { opacity: 0.7; }

.np-bill-payment .page-navi .btn:first-child { border-left: none; }

.np-bill-payment .page-navi .btn-body {
  height: 2em;
  font-weight: normal;
  color: #3d3d3d;
}

.np-bill-payment .page-navi .btn-body:before {
  content: "▼";
  margin-right: 0.2em;
  font-size: 0.8em;
  color: #0087c1;
}

.np-bill-payment .box {
  background-color: #fefdf2;
  padding: 2.5em 1.5em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .box { padding: 1.5em 0.5em; }
}

.np-bill-payment .box .table {
  width: 100%;
  margin-top: 2.5em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .box .table { margin-top: 1.5em; }
}

.np-bill-payment .box .table:nth-child(1) { margin-top: 0; }

.np-bill-payment .point { margin-top: 3em; }

.np-bill-payment .point .table:nth-child(1) { background-color: #def1be; border: 2px solid #daf0b6; }
.np-bill-payment .point .table:nth-child(2) { background-color: #fad9a5; border: 2px solid #f4ce93; }
.np-bill-payment .point .table:nth-child(3) { background-color: #fed5cb; border: 2px solid #f0bcaf; }
.np-bill-payment .point .table:nth-child(4) { background-color: #bee5ec; border: 2px solid #a6d9e2; }

.np-bill-payment .point .figure,
.np-bill-payment .point .comment { vertical-align: middle; }

.np-bill-payment .point .figure {
  background-color: #fff;
  width: 227px;
  height: 158px;
  text-align: center;
}
@media screen and (max-width: 667px) {
.np-bill-payment .point .figure {
  display: block;
  width: 100%;
  height: auto;
  padding: 1em 0;
}
}

.np-bill-payment .point .figure .picture { width: 70%; }
@media screen and (max-width: 667px) {
.np-bill-payment .point .figure .picture { width: 40%; }
}

.np-bill-payment .point .comment {
  width: 599px;
  padding: 0 2em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .point .comment {
  display: block;
  width: 100%;
  padding: 1.5em 1em;
}
}

.np-bill-payment .point .comment .headline {
  border-bottom: 1px dashed #333;
  font-size: 1.4em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .point .comment .headline { font-size: 0.9em; }
}

.np-bill-payment .point .comment .headline .color--red { font-size: 1.2em; }

.np-bill-payment .headline.mark {
  margin-top: 1em;
  padding-top: 1em;
  padding-right: 0;
  padding-bottom: 1em;
  text-align: left;
  color: #333;
}
@media screen and (max-width: 667px) {
.np-bill-payment .headline.mark {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.1em;
}
}

.np-bill-payment .headline.mark:after {
  bottom: 0.5em;
  left: 2.9em;
  border-top: thick dotted #e72d84;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.np-bill-payment .headline.mark:after {
  bottom: 0;
  left: 2.1em;
}
}
.np-bill-payment .article-section .headline.mark.step1:before { background-image: url(../images/cp/np-bill-payment/np_icon-step1.png); }
.np-bill-payment .article-section .headline.mark.step2:before { background-image: url(../images/cp/np-bill-payment/np_icon-step2.png); }
.np-bill-payment .article-section .headline.mark.step3:before { background-image: url(../images/cp/np-bill-payment/np_icon-step3.png); }

.np-bill-payment .step {
  width: 90%;
  margin-top: 2em;
  margin-left: 5em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .step {
  width: 100%;
  margin-top: 1em;
  margin-left: 0;
}
}

.np-bill-payment .step .figure,
.np-bill-payment .step .comment { vertical-align: top; }
@media screen and (max-width: 667px) {
.np-bill-payment .step .figure,
.np-bill-payment .step .comment { display: block; }
}

.np-bill-payment .step .figure { width: 335px; }
@media screen and (max-width: 667px) {
.np-bill-payment .step .figure { width: 100%; }
.np-bill-payment .step .figure .picture { width: 70%; }
}

.np-bill-payment .step .comment { padding-left: 2em; }
@media screen and (max-width: 667px) {
.np-bill-payment .step .comment {
  padding-left: 0;
  padding-top: 1em;
  padding-bottom: 1em;
}
}

.np-bill-payment .step .comment .headline {
  font-size: 1.2em;
  color: #e72d84;
}

.np-bill-payment .step .comment .sentence:nth-child(1) { margin-top: 0; }

.np-bill-payment .article-section .table-style {
  border-top: 1px solid #c8c8c8;
  border-left: 1px solid #c8c8c8;
  margin-top: 2em;
}

.np-bill-payment .article-section .table-style--th,
.np-bill-payment .article-section .table-style--td {
  border-right: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
  text-align: left;
}

.np-bill-payment .article-section .table-style--th {
  background-color: #f3f3f3;
  width: 30%;
  padding: 0.5em 3em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .article-section .table-style--th {
  padding: 0.5em;
  font-size: 0.9em;
}
}

.np-bill-payment .article-section .table-style--td { padding: 0.5em 1.5em; }

.np-bill-payment .article-section .table-style--td .sentence { margin-top: 1em; }

.np-bill-payment .article-section .table-style--td .sentence .strong {
  display: block;
  font-size: 1em;
}

.np-bill-payment .article-section .table-style--td .strong.color--red {
  font-size: 1.6em;
  font-weight: normal;
}
@media screen and (max-width: 667px) {
.np-bill-payment .article-section .table-style--td .strong.color--red { font-size: 1.2em; }
}

.np-bill-payment .faq-q {
  background-color: #e6eff8;
  margin-top: 2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 2.5em;
  font-weight: bold;
  color: #00007f;
}

.np-bill-payment .faq {
  margin-top: 2em;
  font-size: 1.1em;
}
@media screen and (max-width: 667px) {
.np-bill-payment .faq {
  margin-top: 1em;
  font-size: 1em;
}
}

.np-bill-payment .faq-a { margin: 0.5em 0 0 1.1em; }

.np-bill-payment .faq-q:before,
.np-bill-payment .faq-a:before { top: 0.2em; }

.np-bill-payment .faq-q:before { left: 1em; }


/*---------------------------------------------------------
FULL COLOR PRINT
---------------------------------------------------------*/
.full-color-print .article-section > .headline {
  padding: 0.5em 1em;
  box-shadow: 2px 2px 10px #ccc;
}

.full-color-print .page-navi .column-list {
  border: 1px solid #0080a7;
  border-top: 7px solid #0080a7;
  width: 23.5%;
  margin-left: 2%;
  padding: 1em;
  text-align: left;
  transition: 0.3s;
}
@media screen and (max-width: 667px) {
.full-color-print .page-navi .column-list {
  width: 49%;
  margin-top: 0.5em;
  padding: 1em 0.5em;
}
.full-color-print .page-navi .column-list:nth-child(odd) { margin-left: 0; }
}

.full-color-print .page-navi .column-list:first-child,
.full-color-print .page-navi .column-list:nth-child(4n+1) { margin-left: 0; }

.full-color-print .page-navi .column-list:nth-child(n+5) { margin-top: 1.5em; }
@media screen and (max-width: 667px) {
.full-color-print .page-navi .column-list:nth-child(n+5) { margin-top: 0.5em; }
}

.full-color-print .page-navi .column-list:hover { background-color: #f1f8fa; }

.full-color-print .page-navi .column-list .picture { margin: 0 auto; }
@media screen and (max-width: 667px) {
.full-color-print .page-navi .column-list .picture { width: 50%; }
}

.full-color-print .page-navi .column-list .headline {
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
}
@media screen and (max-width: 667px) {
.full-color-print .page-navi .column-list .headline { font-size: 1em; }
}

.full-color-print .page-navi .column-list .sentence { margin-top: 0; font-size: 0.8em;}

.full-color-print .page-navi .column-list .sentence .strong {
  margin-left: 0.3em;
  font-size: 2em;
  font-weight: normal;
}
@media screen and (max-width: 667px) {
.full-color-print .page-navi .column-list .sentence .strong { font-size: 1.2em; }
}

.full-color-print .check-point .box {
  background-color: #ecefe1;
  padding: 3em;
}
@media screen and (max-width: 667px) {
.full-color-print .check-point .box { padding: 2em; }
}

.full-color-print .check-point .box .column-list {
  background-color: #fff;
  border-radius: 10px;
  width: 48%;
  padding: 1.5em 1em 1.5em 0;
  box-shadow: 2px 2px 10px #ccc;
}
@media screen and (max-width: 667px) {
.full-color-print .check-point .box .column-list {
  width: 100%;
  margin-top: 0.5em;
  padding: 1em 1em 1em 0;
}
}

.full-color-print .check-point .box .column-list:nth-child(even) { margin-left: 4%; }
@media screen and (max-width: 667px) {
.full-color-print .check-point .box .column-list:nth-child(even) { margin-left: 0; }
}

.full-color-print .check-point .box .column-list:nth-child(n+3) { margin-top: 2em; }
@media screen and (max-width: 667px) {
.full-color-print .check-point .box .column-list:nth-child(n+3) { margin-top: 0.5em; }
}

.full-color-print .check-point .box .column-list .table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.full-color-print .check-point .column-list .figure,
.full-color-print .check-point .column-list .comment {
  display: table-cell;
  vertical-align: middle;
  height: 11em;
}
@media screen and (max-width: 667px) {
.full-color-print .check-point .column-list .figure,
.full-color-print .check-point .column-list .comment { height: 8em; }
}

.full-color-print .check-point .column-list .figure { width: 10em; }
@media screen and (max-width: 667px) {
.full-color-print .check-point .column-list .figure { width: 8em; }
}

.full-color-print .check-point .column-list .figure .picture {
  width: 90%;
  margin: 0 auto;
}

.full-color-print .check-point .column-list .comment .headline {
  font-size: 1.4em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.full-color-print .check-point .column-list .comment .headline { font-size: 1.2em; }
}

.full-color-print .article-section > .headline {
  background-color: ;
}

.full-color-print .item {
  border-bottom: 1px dotted #999;
  width: 100%;
  margin-top: 50px;
  padding-bottom: 49px;
}
@media screen and (max-width: 667px) {
.full-color-print .item {
  margin-top: 3em;
  padding-bottom: 3em;
}
}

.full-color-print .item:last-child { border-bottom: none; }

.full-color-print .item .figure,
.full-color-print .item .comment { width: 50%; }
@media screen and (max-width: 667px) {
.full-color-print .item .figure,
.full-color-print .item .comment { width: 100%; }
}

.full-color-print .item .figure {
  border: 1px solid #ccc;
  float: left;
  width: 400px;
  height: 377px;
}
@media screen and (max-width: 667px) {
.full-color-print .item .figure {
  float: none;
  width: 70%;
  height: auto;
  margin: 0 auto;
}
}

.full-color-print .item .figure .picture { width: 100%; }

.full-color-print .item .comment {
  float: right;
  padding-left: 0.2em;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment {
  float: none;
  padding-left: 0;
}
}

.full-color-print .item .headline {
  margin-top: 0;
  font-size: 1.6em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.full-color-print .item .headline {
  margin-top: 1em;
  text-align: center;
  font-size: 1.2em;
}
}

.full-color-print .item .comment .price { margin-top: 0.2em; }
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price {
  width: 100%;
  margin-top: 1.5em;
}
}

.full-color-print .item .comment .price .labels {
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 208px;
  height: 63px;
  text-align: left;
  font-weight: normal;
  line-height: 1.2;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price .labels {
  width: 48%;
  height: 4em;
  font-size: 0.9em;
}
}

.full-color-print .item .comment .price .labels:nth-child(odd) { padding: 0.8em 1em; }
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price .labels:nth-child(odd) { padding: 0.7em 0.5em; }
}

.full-color-print .item .comment .price .labels:nth-child(even) {
  margin-left: 8px;
  padding: 1.3em 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price .labels:nth-child(even) {
  margin-left: 2%;
  padding: 1.2em 1em;
}
}

.full-color-print .item .comment .price .labels .strong {
  display: inline;
  font-size: 1.5em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price .labels .strong { font-size: 1.26em; }
}

.full-color-print .item .comment .price .labels .small { font-size: 0.8em; }

.full-color-print .item .comment .price-list { margin-top: 1.2em; }

.full-color-print .item .comment .price-list .table-style {
  border-right: 1px solid #0080a7;
  border-bottom: 1px solid #0080a7;
  border-left: 1px solid #0080a7;
  width: 432px;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price-list .table-style {
  width: 80%;
  margin: 0 auto;
}
}

.full-color-print .item .comment .price-list .table-style-th,
.full-color-print .item .comment .price-list .table-style-td {
  width: 216px;
  padding: 0.87em 0;
  text-align: center;
  font-size: 1.2em;
  line-height: 1;
}
@media screen and (max-width: 667px) {
.full-color-print .item .comment .price-list .table-style-th,
.full-color-print .item .comment .price-list .table-style-td {
  padding: 0.5em 0;
  width: 50%;
}
}

.full-color-print .item .comment .price-list .table-style-th {
  background-color: #fff;
  border-top: 3px solid #0080a7;
  border-bottom: 3px solid #0080a7;
  font-weight: bold;
}

.full-color-print .item .comment .price-list .table-style-tr:nth-child(even) { background-color: #d9ecf2; }

.full-color-print .item .conversion { margin-top: 1em; }

.full-color-print .item .conversion:after {
  content: "\0020";
  clear: both;
  display: block;
}

.full-color-print .item .conversion .btn {
  float: left;
  width: 400px;
  height: 42px;
  margin-top: 0;
}
@media screen and (max-width: 667px) {
.full-color-print .item .conversion .btn {
  float: none;
  width: 100%;
  height: 3.5em;
  margin-top: 1em;
}
}

.full-color-print .item .conversion .btn .btn-body { border-radius: 5px; }

.full-color-print .item .conversion .sentence {
  position: relative;
  right: -0.5em;
  float: right;
}
@media screen and (max-width: 667px) {
.full-color-print .item .conversion .sentence {
  position: static;
  float: none;
}
}


/*---------------------------------------------------------
ABOUT NOVELTY GOODS
---------------------------------------------------------*/
.about-noveltygoods .sentence { line-height: 2.2; }

.about-noveltygoods .box {
  background-color: #f8f0e5;
  padding: 2em;
}

.about-noveltygoods .box--inner {
  background-color: #fff;
  padding: 2em 1.5em;
}

.about-noveltygoods .box--inner .headline {
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  color: #706d68;
}

.about-noveltygoods .box--inner .sentence { margin-top: 1.2em; }

.about-noveltygoods .article-section > .headline {
  background-color: #cfaa77;
  padding: 0.5em 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.about-noveltygoods .article-section .article-body { margin-top: 2em; }

.about-noveltygoods .column .figure {
  float: left;
  padding-right: 1em;
}

.about-noveltygoods .column .comment {
  float: left;
  width: 53%;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .column .comment {
  float: none;
  width: 100%;
}
}

.about-noveltygoods .page-navi .column-list {
  width: 32%;
  margin-left: 1.8%;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .page-navi .column-list {
  width: 100%;
  margin-top: 1em;
  margin-left: 0;
}
}

.about-noveltygoods .page-navi .column-list:nth-child(1),
.about-noveltygoods .page-navi .column-list:nth-child(3n+1) { margin-left: 0; }

.about-noveltygoods .page-navi .column-list:nth-child(n+4) { margin-top: 1em; }

.about-noveltygoods .step {
  position: relative;
  padding-bottom: 3px;
}

.about-noveltygoods .step:before {
  content: "";
  position: absolute;
  top: 5.8em;
  left: 1.8em;
  background-image: url(../images/cp/about-noveltygoods/block.png);
  background-repeat: repeat-y;
  height: 85%;
  padding-left: 3em;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .step:before { height: 90%; }
}

.about-noveltygoods .step.last:before { background-image: none; }

.about-noveltygoods .step .article-body {
  padding-bottom: 3em;
  padding-left: 5em;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .step .article-body { padding-left: 3em; }
}

.about-noveltygoods .step:after {
  content: "\0020";
  clear: both;
  display: block;
}

.about-noveltygoods .step > .headline {
  padding: 0.5em 0 1em 3.5em;
  font-size: 1.4em;
  color: #3d3d3d;
}

.about-noveltygoods .headline.mark:after {
  bottom: 0.5em;
  left: 3.4em;
  border-top: thick dotted #cfaa77;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.about-noveltygoods .headline.mark:after {
  bottom: 0;
  left: 3.1em;
}
}

.about-noveltygoods .headline.mark.back-img:before {
  top: 0;
  left: 0;
  width: 4em;
  height: 4em;
}

.about-noveltygoods .headline.mark.step1:before { background-image: url(../images/cp/about-noveltygoods/icon_step1.png); }
.about-noveltygoods .headline.mark.step2:before { background-image: url(../images/cp/about-noveltygoods/icon_step2.png); }
.about-noveltygoods .headline.mark.step3:before { background-image: url(../images/cp/about-noveltygoods/icon_step3.png); }
.about-noveltygoods .headline.mark.step4:before { background-image: url(../images/cp/about-noveltygoods/icon_step4.png); }
.about-noveltygoods .headline.mark.step5:before { background-image: url(../images/cp/about-noveltygoods/icon_step5.png); }
.about-noveltygoods .headline.mark.step6:before { background-image: url(../images/cp/about-noveltygoods/icon_step6.png); }

.about-noveltygoods .step .figure {
  float: right;
  padding: 0 2em 0 7em;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .step .figure {
  float: none;
  width: 70%;
  margin: 0 auto;
  padding: 0;
}
}

.about-noveltygoods .step .sentence { margin-top: 2em; }

.about-noveltygoods .step .sentence:nth-child(1) { margin-top: 0; }

.about-noveltygoods .novelty-search .column-list {
  width: 32%;
  margin-left: 1.8%;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .novelty-search .column-list {
  width: 100%;
  margin-left: 0;
  margin-top: 1em;
}
}

.about-noveltygoods .novelty-search .column-list:nth-child(1),
.about-noveltygoods .novelty-search .column-list:nth-child(3n+1) { margin-left: 0; }

.about-noveltygoods .novelty-search .column-list:nth-child(n+4) { margin-top: 1em; }

.about-noveltygoods .column-list .picture { width: 100%; }

.about-noveltygoods .step.last .ul { margin-top: 2em; }

.about-noveltygoods .step.last .sentence .strong { font-size: 1.4em; }

.about-noveltygoods .sankaku-icon-link {
  position: relative;
  margin-top: 0.5em;
  text-decoration: underline;
  color: #5da0f3;
}

.about-noveltygoods .sankaku-icon-link .fas {
  position: relative;
  top: 0.15em;
  display: inline-block;
  text-decoration: none;
  font-size: 1.6em;
}
@media all and (-ms-high-contrast:none){
*::-ms-backdrop,.about-noveltygoods .sankaku-icon-link .fas { letter-spacing: -0.5em; }
}

.about-noveltygoods .banner-link { margin-top: 2em; }

.about-noveltygoods .banner-link .column .column-list:nth-child(even) { padding-left: 4em; }
@media screen and (max-width: 667px) {
.about-noveltygoods .banner-link .column .column-list:nth-child(even) {
  margin-top: 2em;
  padding-left: 0;
}
}

.about-noveltygoods .check-list-menu { margin-top: 1em; }

.about-noveltygoods .check-list-menu .headline {
  font-size: 2em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .check-list-menu .headline { font-size: 1.6em; }
}

.about-noveltygoods .check-list {
  position: relative;
  margin-top: 1.5em;
  padding-left: 25px;
}
@media screen and (max-width: 667px) {
.about-noveltygoods .check-list { margin-top: 1em; }
}

.about-noveltygoods .check-list:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/cp/about-noveltygoods/icon_check.png) no-repeat left center;
  display: block;
  width: 22px;
  height: 19px;
}

.info-trans {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  margin-top: 1.5em;
  padding: 1em;
}

.info-trans .sentence {
  margin-top: 1em;
  line-height: 1.6;
}


/*---------------------------------------------------------
2018 AUTUMN & WINTER Vol.2
---------------------------------------------------------*/
.autumn-winter-2018_vol2 #section4 .pickup {
  position: relative;
  height: 260px;
  margin-top: 1em;
}
@media screen and (max-width: 667px) {
.autumn-winter-2018_vol2 #section4 .pickup { height: auto; }
}
.autumn-winter-2018_vol2 #section4 .pickup .sentence,
.autumn-winter-2018_vol2 #section4 .pickup .figure { position: absolute; }
@media screen and (max-width: 667px) {
.autumn-winter-2018_vol2 #section4 .pickup .sentence,
.autumn-winter-2018_vol2 #section4 .pickup .figure { position: static; }
}
.autumn-winter-2018_vol2 #section4 .pickup .sentence { left: 1em; width: 16em; z-index: 1; }
@media screen and (max-width: 667px) {
.autumn-winter-2018_vol2 #section4 .pickup .sentence { width: 100%; }
}
.autumn-winter-2018_vol2 #section4 .pickup .sentence:nth-child(1) { top: 1em; }
.autumn-winter-2018_vol2 #section4 .pickup .sentence:nth-child(2) { top: 5em; }
.autumn-winter-2018_vol2 #section4 .pickup .figure { top: 0; left: 0; z-index: 0; }
.autumn-winter-2018_vol2 #section4 .pickup { position: relative; }
.autumn-winter-2018_vol2 .page-navi .btn-body { font-size: 0.9em; }
.autumn-winter-2018_vol2 .page-navi .btn { margin-left: 1em; }
.autumn-winter-2018_vol2 .article-section > .headline {
  background: #003295;
  color: #fff;
}

/*---------------------------------------------------------
RANKING
---------------------------------------------------------*/
.access-menu {
  position: relative;
  overflow: hidden;
  padding-bottom: 1em;
}
@media screen and (max-width: 667px) {
.access-menu { width: 100%; }
}

.access-menu .headline.under-line {
  border-bottom-color: #fbb03b;
  font-size: 1.4em;
  color: #fbb03b;
}
.access-menu .column {
  position: relative;
  left: 50%;
  float: left;
  margin: 1.5em auto 0;
}

.access-menu .column .labels {
  position: relative;
  left: -50%;
  float: left;
  width: 32%;
  margin-left: 1%;
  box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.1);
}
@media screen and (max-width: 667px) {
.access-menu .column .labels {
  width: 100%;
  margin-top: 1em;
  margin-left: 0;
}
}

.access-menu .column .labels:first-child,
.access-menu .column .labels:nth-child(3n+1) { margin-left: 0; }

.access-menu .column .labels:nth-child(n+4) { margin-top: 0.7em; }
@media screen and (max-width: 667px) {
.access-menu .column .labels:nth-child(n+4) { margin-top: 1em; }
}

.access-menu .labels .link-block { padding: 1em 0; }


/*---------------------------------------------------------
2018 AUTUMN & WINTER Vol.1
---------------------------------------------------------*/
.autumn-winter-2018_vol1 .page-navi .btn { margin-left: 1.5em; }
.autumn-winter-2018_vol1 .article-section > .headline {
  background: #003295;
  color: #fff;
}


/*---------------------------------------------------------
THERMOS
---------------------------------------------------------*/
.thermos .item .figure { border: 1px solid #ccc; }
.thermos .article-section .btn-body { background: #2f84ed; }
.article.thermos > .btn .btn-body {
  background: #fff;
  border: 2px solid #f00;
  color: #f00;
}
.article.thermos > .btn .btn-body:hover {
  background: #f00;
  color: #fff;
}
.thermos .headline.mark { color: #2f84ed; }
.thermos .headline.mark:after {
  bottom: 0.5em;
  left: 2.9em;
  border-top: thick dotted #09c;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.thermos .headline.mark:after {
  bottom: 0;
  left: 2.1em;
}
}
.thermos .article-section .headline.mark.mug:before { background-image: url(../images/cp/thermos/icon_mug.png); }
.thermos .article-section .headline.mark.tumbler:before { background-image: url(../images/cp/thermos/icon_tumbler.png); }
.thermos .article-section .headline.mark.can:before { background-image: url(../images/cp/thermos/icon_can.png); }