@charset "UTF-8";

/*========================================================
    トンボKIDS 第二階層用スタイル
========================================================*/
/*----------------------------
for PC
----------------------------*/
body.allclear-fade {
  background: #fff;
}

/*header*/
header .home-btn {
  float: left;
  margin-left: 5px;
  text-align: center;
  transition: opacity .3s linear;
}

header .home-btn .icn {
  display: inline-block;
  width: 44px;
}

header .home-btn span {
  font-size: .625rem;
  color: #6cf;
}

header .home-btn:hover {
  opacity: .5;
}

header .navi-btn-list {
  position: relative;
  float: right;
  font-size: 0;
}

header .navi-btn-list li {
  display: inline-block;
  width: 65px;
}

header .navi-btn-list li {
  margin-left: 10px;
}

header .navi-btn-list li a {
  transition: opacity .3s linear;
}

header .navi-btn-list li a:hover {
  opacity: .5;
}

/*外側キャラ*/
.second-layer .img_chara p {
  top: -120px;
  left: -21px;
}

.img_chara.chara03 {
  width: 121px;
  right: calc(100% + 60px);
}

/*キャラ*/
.img_chara.chara01 .chara-box {
  position: relative;
  top: 4px;
}

.img_chara.chara02 p {
  width: 100%;
}

.img_chara .chara-container {
  position: relative;
  width: 100%;
}

.img_chara .chara-container .fukidasho-box {
  position: relative;
  width: 100%;
  background: url(../img/common_hukidashi.png) no-repeat;
  background-size: 100%;
}

.img_chara .chara-container .fukidasho-box .text-box p {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}

.img_chara .chara-container .fukidasho-box .text-box {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.img_chara .chara-container .fukidasho-box img {
  width: 100%;
  max-width: inherit;
  height: auto;
}

.img_chara .chara-container .fukidasho-box .text-box p .span {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  font-size: 2.4vw;
  white-space: nowrap;
}

.content-wrapper {
  position: relative;
  padding-bottom: 280px;
  z-index: 1;
}

.content-wrapper .inner {
  position: relative;
}

/*もどるボタン*/
.history-back-btn {
  width: 51px;
  margin: 0 auto;
  text-align: center;
  transition: opacity .3s linear;
}

.history-back-btn .icn {
  display: inline-block;
  width: 51px;
}

.history-back-btn .icn img {
  width: 100%;
}

.history-back-btn span {
  font-size: .8125rem;
  color: #fff;
}

.history-back-btn:hover {
  opacity: .5;
}

/*メインカラム*/
.second-layer .main-article-wrap {
  padding-bottom: 28px;
  vertical-align: 　bottom;
  font-size: 0;
}

/*記事メインタイトル*/
.main-title-area {
  width: 100%;
  height: 128px;
  padding: 0 36px .2vw 36px;
  text-align: left;
  background: url(../img/second_main-title-area_bg_pc.png) no-repeat;
  background-size: 100%;
}

.main-title-area.bg-pink {
  background: url(../img/second_main-title-area_pink_bg_pc.png) no-repeat;
  background-size: 100%;
}

.main-title-area .chara-obj {
  position: relative;
  float: left;
  display: inline-block;
  width: 17.25%;
  bottom: -14px;
}

.main-title-area .title-box {
  float: left;
  height: 100%;
  white-space: nowrap;
}

.main-title-area .title-box .ttl {
  display: inline-block;
  font-size: 1.75rem;
  margin-left: 3.25%;
  color: #fff;
  vertical-align: middle;
}

.main-title-area .icn-list,
.main-title-area .icn-list li {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}

.main-title-area .icn-list {
  margin-left: 2.375%;
}

.main-title-area .icn-list li {
  width: 58px;
  margin-left: 8px;
}

.main-title-area .icn-list li:first-child {
  margin-left: 0;
}

.main-body-area {
  position: relative;
  width: 100%;
  /*padding: 40px 8.75%;*/
  padding: 40px 8%;
  background: url(../img/second_main-body-area_bg_pc.png) repeat-y;
  background-size: 100%;
}

.main-bottom-area {
  width: 100%;
  vertical-align: top;
}

.main-bottom-area img {
  width: 100%;
  height: auto;
}

/*全問正解時遷移先初期表示マスク*/
.white-mask {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #fff;
  z-index: 10000;
}

/*コンテンツ*/
.main-article-wrap .feature-area {
  margin-top: 100px;
}

.section-ttl {
  margin-bottom: 30px;
  font-size: 1.4375rem;
  line-height: 1.4;
  color: #6cf;
}

.article-area {
  margin-top: 60px;
}

.feature-area .section-ttl + .article-area {
  margin-top: 0;
}

.main-bottom-area .article-area {
  margin-top: 0;
}

.article-box {
  width: 48.1818182%;
}

.article-box.none-float {
  width: 100%;
}

.article-box p,
.article-box li {
  font-size: 1rem;
  line-height: 1.888125;
  word-break: break-all;
}

.article-box .photo-frame figcaption {
  margin-top: 16px;
  font-size: .8125rem;
  line-height: 1.44;
}

.article-box.right .photo-frame {
  padding: 46px 0 0 46px;
}

.article-box.left .photo-frame {
  padding: 46px 46px 0 0;
}

.article-box.illust-box {
  display: table;
  height: 100%;
}

.article-box.illust-box .photo-frame {
  display: table-cell;
  height: 100%;
  padding-top: 0;
  vertical-align: middle;
}

/*クイズ*/
.quiz-area {
  width: 100%;
}

.quiz-area .top-box {
  position: relative;
  margin-top: 130px;
  vertical-align: bottom;
}

.quiz-area .bottom-box {
  vertical-align: top;
}

.quiz-area .top-box img, .quiz-area .bottom-box img {
  width: 100%;
}

.quiz-area .top-box .ttl {
  position: absolute;
  width: 77.2727273%;
  margin-left: -38.6363636%;
  left: 50%;
  top: -68px;
}

.quiz-area .body-box {
  width: 100%;
  padding: 80px 76px;
  background: url(../img/quizbox_body_bg_pc.gif) repeat-y;
  background-size: 100%;
  text-align: center;
}

.quiz-area .question-box dt,
.quiz-area .question-box dd {
  display: inline-block;
}

.quiz-area .question-box dt {
  padding: 14px;
  margin-right: 20px;
  font-size: 1.1125rem;
  color: #fff;
  background: #6cf;
  border-radius: 6px;
}

.quiz-area .question-box dd {
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

.quiz-area .question-box ol {
  margin-top: 20px;
}

.quiz-area .question-box ol li {
  position: relative;
  display: inline-block;
  width: 149px;
  height: 149px;
  margin-left: 32px;
  background-size: 100%;
  cursor: pointer;
  transition: opacity .2s linear;
}

.quiz-area .question-box ol li:hover {
  opacity: .5;
}

.quiz-area .question-box ol li:first-child {
  margin-left: 0;
}

.quiz-area .question-box .q1 {
  background: url(../img/q1_bg_pc.gif) no-repeat;
}

.quiz-area .question-box .q2 {
  background: url(../img/q2_bg_pc.gif) no-repeat;
}

.quiz-area .question-box .q3 {
  background: url(../img/q3_bg_pc.gif) no-repeat;
}

.quiz-area .question-box ol li .a-txt {
  top: 79px;
  font-size: .9375rem;
  position: absolute;
  width: 100%;
  text-align: center;
  display: inline-block;
  left: 0;
  line-height: 1.2;
}

.quiz-area .result-box {
  display: none;
  position: relative;
}

.quiz-area .result-box .answer-img {
  margin: 0 auto;
  width: 65%;
}

.quiz-area .result-box .incorrect-img {
  margin: 0 auto;
  width: 65%;
}

.quiz-area .result-box .comment-ttl {
  margin-top: 10px;
  font-size: 1.4375rem;
  color: #6cf;
}

.quiz-area .result-box .comment-txt {
  margin-top: 16px;
  line-height: 1.4175;
  word-break: break-all;
  font-size: 1rem;
}

.quiz-area .result-box.answer .chara-obj {
  position: absolute;
  left: 0;
  top: 70px;
  z-index: 1;
}

.eraser .quiz-area .result-box.answer .chara-obj {
  position: absolute;
  left: 10px;
  top: 110px;
  z-index: 1;
}

.quiz-area .result-box.incorrect .chara-obj {
  position: absolute;
  right: 0;
  top: 70px;
  z-index: 1;
}

.eraser .quiz-area .result-box.incorrect .chara-obj {
  position: absolute;
  right: 20px;
  top: 110px;
  z-index: 1;
}

.quiz-area .result-box.incorrect .btn-blue {
  margin-top: 20px;
}

.btn-blue {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: #6cf;
  border: solid 2px #000;
  cursor: pointer;
  transition: opacity .2s linear;
  border-radius: 8px;
  font-size: 1rem;
}

.btn-blue:hover {
  opacity: .5;
}

.btn-blue.page-link {
  margin-top: 48px;
  font-size: 1rem;
}

/*
 トンボ鉛筆について
---------------------------------------*/
#company .main-title-area.bg-pink {
  background: url(../img/second_main-title-area_bgyellow_pc.png) no-repeat;
  background-size: 100%;
}

#company .main-title-area .title-box .ttl {
  color: #000;
}

#company .main-title-area .chara-obj {
  width: 25.25%;
  bottom: -13px;
}

#company .article-area,
.tips .article-area {
  margin-top: 0;
}

#company .section-ttl,
.tips .section-ttl {
  margin-bottom: 30px;
}

#company .article-box.right .photo-frame,
.tips .article-box.right .photo-frame {
  padding: 0 0 0 46px;
  text-align: right;
}

#company .article-box.left .photo-frame,
.tips .article-box.left .photo-frame {
  padding: 0 46px 0 0;
  text-align: left;
}

#company .main-article-wrap .feature-area,
.tips .main-article-wrap .feature-area {
  margin-top: 60px;
}

/*年表*/
#historyTimeline {
  margin-top: 35px;
}

#historyTimeline .ttl {
  width: 77.2727273%;
  margin: 0 auto;
}

#historyTimeline .start-img {
  width: 65.1127820%;
  margin: 20px auto 0 auto;
}

#historyTimeline .timeline-wrapper {
  position: relative;
}

#historyTimeline .timeline-wrapper .timeline-container:before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  left: 50%;
  margin-left: -1.5px;
  width: 3px;
  height: 100%;
  border-radius: 3px;
  top: -30px;
  background: #6cf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #6cf 0%, #6cf 81%, #ace3ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #6cf 0%, #6cf 81%, #ace3ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #6cf 0%, #6cf 81%, #ace3ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cf', endColorstr='#ace3ff',GradientType=0 );
  /* IE6-9 */
}

#historyTimeline .timeline-wrapper .timeline-container:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  left: 50%;
  margin-left: -1.5px;
  height: 100px;
  width: 3px;
  height: 71px;
  background: url(../img/company/company_timeline_end.gif) no-repeat;
}

#historyTimeline .year-block .left,
#historyTimeline .year-block .right {
  width: 50%;
}

#historyTimeline .year-block figure {
  padding: 50px 0 20px;
}

#historyTimeline .year-block .left figure {
  text-align: right;
  padding-right: 50px;
}

#historyTimeline .year-block .right figure {
  text-align: left;
  padding-left: 50px;
}

#historyTimeline .chronology-topic dt {
  position: relative;
}

#historyTimeline .chronology-topic dt .ttl {
  width: 100%;
  margin-top: -1em;
  padding: 0 0 5px 20px;
  font-size: 1.4375rem;
  color: #6cf;
  white-space: nowrap;
  border-bottom: solid 2px #6cf;
}

#historyTimeline .chronology-topic dt .ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  left: -13px;
  top: 2em;
  background: #6cf;
  border-radius: 50%;
}

#historyTimeline .chronology-topic dt .img-circle {
  position: absolute;
  display: block;
  width: 112px;
  height: 112px;
  max-width: 112px;
  max-height: 112px;
  top: 0;
  right: 0;
  overflow: hidden;
  border-radius: 50%;
  z-index: 1;
}

#historyTimeline .chronology-topic dt .img-circle img {
  height: 100%;
  border: solid 1px #6cf;
  border-radius: 50%;
  text-align: center;
  vertical-align: bottom;
}

#historyTimeline .chronology-topic dt .img-circle:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  top: 0;
  right: 0;
  border: solid 2px #6cf;
  border-radius: 50%;
  z-index: 2;
}

#historyTimeline .left .chronology-topic dt .ttl {
  padding: 0 0 5px 122px;
}

#historyTimeline .left .chronology-topic dt .ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  left: calc(100% - 14px);
  top: 2em;
  background: #6cf;
  border-radius: 50%;
}

#historyTimeline .left .chronology-topic dt .ttl.none-img {
  padding-left: 0;
}

#historyTimeline .left .chronology-topic dt .ttl.none-img:before {
  content: "";
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  left: calc(100% - 14px);
  top: -7px;
  background: #6cf;
  border-radius: 50%;
}

#historyTimeline .left .chronology-topic dt .img-circle {
  position: absolute;
  display: block;
  width: 112px;
  height: 112px;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 50%;
  z-index: 1;
}

#historyTimeline .left .chronology-topic dt .img-circle:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  top: 0;
  left: 0;
  border: solid 2px #6cf;
  border-radius: 50%;
  z-index: 2;
}

#historyTimeline .chronology-topic dd {
  padding: 10px 0 0 20px;
  font-size: .8125rem;
}

#historyTimeline .chronology-topic dd .topic-list li {
  margin-top: 1em;
  line-height: 1.6;
}

/*
工場
---------------------------------------*/
.main-title-area.bg-blue {
  background: url(../img/second_main-title-area_bgblue_pc.png) no-repeat;
  background-size: 100%;
}

.factory .main-body-area {
  padding: 0;
}

.factory .main-body-area .station-area {
  padding: 40px 8%;
}

/*メインタイトルエリア*/
.factory-main-ttl-area {
  position: relative;
  padding: 25px 3.75939850% 0;
}

.factory-main-ttl-area .factory-main-ttl {
  width: 55.0125313%;
  margin: 60px auto 0;
}

.factory-main-ttl-area .lead-txt {
  margin-top: 30px;
  font-size: 1rem;
  line-height: 1.875;
}

.factory-main-ttl-area .bg-box {
  position: relative;
}

.factory-main-ttl-area .bg-box .item-img {
  width: 7.51879699%;
  position: absolute;
  bottom: 0;
  left: 53px;
}

.factory-main-ttl-area .content-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 1;
}

/*作業工程*/
.station-list {
  position: relative;
  display: table;
  width: 100%;
}

.station-list ol {
  position: relative;
  display: table-cell;
  padding: 10px 20px;
  background: #6cf;
  color: #fff;
  font-size: .875rem;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle;
  border: solid 2px #000;
  letter-spacing: -.05em;
  font-weight: bold;
}

.station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 108%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -4%;
  left: -10px;
}
.ie .station-list ol:after {
    height: 109%;
    top: -4%;
}
.station-list ol:first-child:after {
  content: none !important;
}

.station-info .section-ttl {
  margin-bottom: 14px;
  text-align: center;
  color: #00a8ff;
}

.station-info .scroll-txt {
  margin-top: 50px;
  text-align: center;
  font-size: 1rem;
  color: #6cf;
}

.station-info .scroll-icn {
  display: block;
  width: 1.87969925%;
  margin: 10px auto 0 auto;
}

/*--作業工程ie調整用スタイル--*/
/*ボールペン*/
.ie .ballpointpen .station-list ol:nth-child(2):after,
.ie .ballpointpen .station-list ol:nth-child(5):after {
  content: '';
  display: block;
  position: absolute;
  height: 156%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -5%;
  left: -12px;
}

/*シャープ芯*/
.ie .sharpcore .station-list ol:nth-child(n+2):after {
  content: '';
  display: block;
  position: absolute;
  height: 156%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -6%;
  left: -12px;
}

/*修正テープ*/
.ie .factory.correction_tape .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 107%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -3%;
  left: -12px;
}

.ie .factory.correction_tape .station-list ol:nth-child(n+5):after {
  content: '';
  display: block;
  position: absolute;
  height: 156%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -5%;
  left: -12px;
}

.ie .factory.glue_stick .station-list ol:nth-child(4):after,
.ie .factory.glue_stick .station-list ol:nth-child(6):after {
  content: '';
  display: block;
  position: absolute;
  height: 156%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -5%;
  left: -12px;
}

.ie .factory.glue_tape .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 112%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -6%;
  left: -9px;
}
.ie .factory.marker .station-list ol:after {
    height: 110%;
    top: -5%;
}
.ie .factory.eraser .station-list ol:after {
    height: 110%;
    top: -5%;
}

/*mac　調整用*/
.mac .factory.marker .station-list ol:after,
.mac .factory.eraser .station-list ol:after,
.mac .factory.glue_tape .station-list ol:after,
.win.firefox .factory.marker .station-list ol:after,
.win.firefox .factory.eraser .station-list ol:after,
.win.firefox .factory.glue_tape .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 112%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -6%;
  left: -10px;
}

.mac.chrome .eraser.factory .station-list ol:after,
.mac.chrome .glue_tape.factory .station-list ol:after,
.mac.chrome .marker.factory .station-list ol:after,
.win.chrome .factory.marker .station-list ol:after,
.win.chrome .factory.eraser .station-list ol:after,
.win.chrome .factory.glue_tape .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 111%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -51%;
  left: -10px;
}

.win.chrome .marker.factory .station-list ol:after,
.win.chrome .factory.eraser .station-list ol:after,
.win.chrome .factory.glue_tape .station-list ol:after,
.mac.chrome .marker.factory .station-list ol:after,
.mac.chrome .eraser.factory .station-list ol:after,
.mac.chrome .glue_tape.factory .station-list ol:after {
    top: -5%;
}

.mac.chrome .correction_tape.factory .station-list ol:after,
.mac.chrome .glue_stick.factory .station-list ol:after,
.mac.chrome .ballpointpen.factory .station-list ol:after,
.mac.chrome .sharpcore.factory .station-list ol:after,
.win.chrome .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 107%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -3%;
  left: -10px;
}

.mac.firefox .correction_tape.factory .station-list ol:after {
  content: '';
  display: block;
  position: absolute;
  height: 108%;
  width: 28px;
  background: url(../img/factory_station-list_ol_after_pc.png) no-repeat;
  background-size: contain;
  top: -4%;
  left: -10px;
}

/*工程*/
.factory .station-area .section-ttl {
  margin-bottom: 25px;
  text-indent: -1.2em;
  padding-left: 1.2em;
  text-align: left;
  color: #6cf;
}
.factory .station-area .right .section-ttl {
  padding-left: 0;
}

.factory .station-area .article-box.right .photo-frame {
  padding: 0 0 0 5px;
}
.factory .station-area .article-box.left .photo-frame {
  padding: 0 5px 0 0;
}

/*詳細説明*/
.factory .detail-description-box {
  padding: 20px;
  background: #fffee9;
}

.factory .detail-description-box .ttl {
  padding: 14px;
  margin-right: 20px;
  font-size: 1.1125rem;
  color: #fff;
  background: #6cf;
  border-radius: 6px;
}

.factory .detail-description-box .article-box p {
  font-size: .8774375rem;
  line-height: 1.57183703;
}

/*消しゴム工場*/
.factory.eraser .section-3-4 {
  position: relative;
}

.factory.eraser .section-3-4 .section-4 {
  position: absolute;
  bottom: 60px;
}

.factory.eraser .section-5 {
  position: relative;
  top: -80px;
}

.factory.eraser .section-5 .feature-area {
  margin-top: 0;
}

.factory.eraser .quiz-area .top-box {
  margin-top: 70px;
}

/*修正テープ工場*/
.factory.correction_tape .article-box.left .photo-frame {
  padding: 0;
}

.factory.correction_tape .detail-description-box .ttl {
  width: 100%;
  margin-bottom: 25px;
  text-align: center;
}

.fukidashi-ttl {
  padding: 14px;
  margin-right: 0;
  font-size: .98rem;
  color: #00a8ff;
  background: #fff;
  border: solid 2px #00a8ff;
  white-space: nowrap;
  text-align: center;
}

.fukidashi-ttl:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.fukidashi-ttl:after {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #00a8ff;
  z-index: 1;
}

.factory.correction_tape .detail-description-box .fukidashi-ttl,
.factory.glue_tape .detail-description-box .fukidashi-ttl {
  margin-bottom: 25px;
}

.dl-blue-dt {
  font-size: 1rem;
}

.dl-blue-dt dt {
  margin-top: 1em;
  letter-spacing: -.05em;
  text-indent: -1em;
  margin-left: 1em;
  color: #00a8ff;
  font-weight: bold;
}

.dl-blue-dt dt:first-child {
  margin-top: 0;
}

.dl-blue-dt dd {
  padding: .25em 0 0 1em;
  line-height: 1.4;
}

/*シャープペンシル工場*/
.parts-info-area {
  position: relative;
  width: 85.7142857%;
  margin: 0 auto;
}

.parts-info-area .ttl {
  margin-bottom: 30px;
}

.parts-box-pc, .parts-box-sp {
  position: relative;
}

.parts-info-area .linker-image-box {
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  z-index: 2;
}

.parts-info-area .switch-img-list {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  z-index: 1;
}

.parts-info-area .switch-img-list li {
  display: none;
}

.parts-info-box area {
  cursor: pointer;
}

.parts-box {
  position: relative;
}

/*アニメーション*/
.animetion-area {
  position: relative;
}

.animetion-area .anime-screen-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}

.animetion-area .anime-screen-wrap .anime-screen {
  position: relative;
  width: 100%;
  height: 100%;
}

.animetion-area .anime-screen-wrap .anime-bg-img {
  width: 100%;
  height: auto;
}

.animetion-area .screen-ttl {
  width: 100%;
  font-size: 1.4375rem;
  line-height: 1.4;
  text-align: center;
  color: #6cf;
}

.anime-screen .parts-info {
  width: 27%;
}

.animetion-area .parts-info-dl dt {
  padding: 14px;
  font-size: 1.1125rem;
  color: #fff;
  background: #6cf;
  border-radius: 6px;
  text-align: center;
}

.animetion-area .parts-info-dl dd {
  margin-top: .5em;
  font-size: 1rem;
  line-height: 1.4;
}

/*アニメーション時　スクロールロック*/
body.scroll-rock {
  overflow: hidden;
}

/*えんぴつ工場*/
area {
  cursor: pointer;
}

.factory.pencil .station-box {
  position: relative;
}

.factory.pencil .station-box .linker-mask {
  position: absolute;
  z-index: 1;
  opacity: 0;
}

.factory.pencil .station-box .top-box .left {
  width: 82.0668693%;
}

.factory.pencil .station-box .top-box .right {
  width: 17.9331307%;
}

.factory.pencil .station-box ol li img {
  vertical-align: bottom;
}

.factory.pencil .station-box .top-box .left ol li {
  width: 33.33333%;
  display: inline-block;
}

.factory.pencil .station-box .bottom-box ol li {
  display: inline-block;
  width: 25%;
}

.factory.pencil .station-box .top-box .shin-box,
.factory.pencil .station-box .top-box .jiku-box {
  position: relative;
}

.factory.pencil .station-box .top-box .icn {
  position: absolute;
  width: 6.07902736%;
  left: -3.03951368%;
  top: .7vw;
}

.factory.pencil .station-info .section-ttl {
  margin-top: 30px;
  text-align: center;
}

.lead-txt {
  font-size: 1rem;
  line-height: 1.888125;
}

.photo-box {
  position: relative;
}

.photo-box .cricle-img {
  position: absolute;
  width: 20%;
  top: 40px;
  right: 0;
}

.yellow-box-ttl {
  display: inline-block;
  padding: 9px 20px;
  margin-bottom: 24px;
  background: #fff100;
  border: solid 2px #000;
  border-radius: 6px;
  font-size: 1.25rem;
}

.factory.pencil .station-area .article-box.right .photo-frame {
  text-align: center;
  padding-bottom: 1.5rem;
}

.factory.pencil .anime-gif {
  display: inline-block;
  width: 80%;
  max-width: 100%;
  margin: 4vw auto 2vw auto;
}
.factory.pencil .anime-gif.size-s {
    width: 70%;
  }
.photo-box.harf-box .cricle-img {
  position: absolute;
  width: 36%;
  top: 40px;
  right: 0;
}

.factory.pencil .section-3 .photo-frame {
  text-align: left;
}

.txt-center {
    text-align: center;
}

/*工場ページ固有スタイル*/
.factory.marker .factory-main-ttl-area .bg-box .item-img {
  width: 9.518797%;
  position: absolute;
  bottom: 0;
  left: 53px;
}

.factory.eraser .factory-main-ttl-area .bg-box .item-img {
  width: 10.518797%;
  left: 42px;
}

.factory.glue_tape .factory-main-ttl-area .bg-box .item-img {
  width: 9.518797%;
  left: 42px;
}

.factory.correction_tape .factory-main-ttl-area .bg-box .item-img {
  width: 9.518797%;
  left: 42px;
}

.factory.ballpointpen .station-list ol,
.factory.sharpcore .station-list ol,
.factory.eraser .station-list ol,
.factory.correction_tape .station-list ol,
.factory.glue_tape .station-list ol {
  padding: 10px 0 10px 20px;
  text-align: left;
}
.factory.ballpointpen .station-list ol:first-child,
.factory.sharpcore .station-list ol:first-child,
.factory.eraser .station-list ol:first-child,
.factory.correction_tape .station-list ol:first-child,
.factory.glue_tape .station-list ol:first-child {
  padding: 10px 0 10px 10px;
  text-align: left;
}

/*シャープペンシル工場第2フェーズ*/
.anime-pager {
    font-size: 1.5rem;
    width: 100%;
}
.factory.mechanicalpencil .assembly-ttl {
    width: 312px;
    margin: 0 auto 30px auto;
}
.factory.mechanicalpencil .parts-info-area {
    margin: 40px auto 0 auto;
}

/*
 トンボKIDSとは？
---------------------------------------*/
#kids .about-tombow-kids p {
  font-size: 1rem;
  line-height: 1.875;
  text-align: center;
}

#kids .site-map-area .ttl,
#kids .about-icon .ttl {
  width: 47.5757576%;
  margin: 50px auto 0 auto;
}

#kids .icon-info-box .icon-info {
  width: 48.1818182%;
  margin-top: 30px;
}

#kids .icon-info-box .icon-info:nth-child(odd) {
  float: left;
}

#kids .icon-info-box .icon-info:nth-child(even) {
  float: right;
}

#kids .icon-info-box .icon-info dt {
  width: 32.5849057%;
  float: left;
  max-width: 75px;
}

#kids .icon-info-box .icon-info dd {
  display: inline-block;
  width: 67%;
  float: left;
  margin: 0 0 0 4%;
  font-size: .875rem;
  line-height: 1.42857143;
}

/*サイトマップ*/
#kids .site-map-area .category-box {
  position: relative;
  width: 100%;
  margin-top: 70px;
}

#kids .site-map-area .ttl + .category-box {
  margin-top: 30px;
}

#kids .site-map-area .category-box .ttl-area {
  position: relative;
  width: 100%;
}

#kids .site-map-area .category-box .ttl-area .icn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 14.5454545%;
  max-widh: 98px;
}

#kids .site-map-area .category-box .text-area {
  display: table;
  width: 100%;
  height: 98px;
  padding: 12px 0 12px 14px;
  color: #fff;
  font-size: 1.125rem;
}

#kids .site-map-area .category-box .text-area span {
  display: table-cell;
  height: 100%;
  padding-left: 100px;
  border-radius: 6px;
  vertical-align: middle;
}

#kids .site-map-area .category-box .text-area p {
  line-height: 1.333333333;
}

#kids .site-map-area .category-box.cate-write .text-area span {
  background: #ff673e;
}

#kids .site-map-area .category-box.cate-write .info-txt {
  color: #ff673e;
}

#kids .site-map-area .category-box.cate-delete .text-area span {
  background: #005dcf;
}

#kids .site-map-area .category-box.cate-delete .info-txt {
  color: #005dcf;
}

#kids .site-map-area .category-box.cate-paste .text-area span {
  background: #d66af1;
}

#kids .site-map-area .category-box.cate-paste .info-txt {
  color: #d66af1;
}

#kids .site-map-area .category-box.cate-tombow .text-area span {
  background: #b70031;
}

#kids .site-map-area .category-box.cate-tombow .info-txt {
  color: #b70031;
}

/*サイトマップ*/
#kids .link-wrap .site-map-dl {
  width: 48.1818182%;
  margin-top: 30px;
}

#kids .link-wrap .site-map-dl:nth-child(odd) {
  float: right;
}

#kids .link-wrap .site-map-dl:nth-child(even) {
  float: left;
}

#kids .link-wrap .site-map-dl dt {
  font-size: 1.0625rem;
  margin-bottom: 10px;
  font-weight: bold;
}

#kids .link-wrap .site-map-ul {
  margin-top: 30px;
}

#kids .link-wrap .site-map-ul li,
#kids .link-wrap .site-map-dl dd {
  line-height: 2.85714286;
  font-size: .875rem;
}

#kids .link-wrap .site-map-ul li a,
#kids .link-wrap .site-map-dl dd a {
  border-bottom: solid 1px #000;
  transition: opacity .3s linear;
}

#kids .link-wrap .site-map-ul li a:hover,
#kids .link-wrap .site-map-dl dd a:hover {
  opacity: .6;
}

.sp #kids .link-wrap .site-map-dl dd a:hover {
  opacity: 1;
}

#kids .link-wrap .site-map-dl dt .ttl-box {
  display: table;
  height: 100%;
}

#kids .link-wrap .site-map-dl dt .ttl-box span {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

#kids .link-wrap .site-map-dl dt .ttl-box .photo-cell {
  width: 20%;
}

#kids .link-wrap .site-map-dl dt .ttl-box .title-cell {
  padding-left: 3%;
  line-height: 1.4;
}

#kids .link-wrap .site-map-dl dt .ttl-box .title-cell span {
  font-size: .875rem;
}

#kids.pc-mode .site-map-area .link-wrap {
  display: block !important;
}

.ex-linl-icn {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0 0 .25em;
  background: url(../img/icn_exlink.png) no-repeat center 110%;
  background-size: 80%;
}

/*----------------------------
for TAB SP
----------------------------*/
@media screen and (max-width: 767px) {
  /*header*/
  header h1::before {
    content: "";
    top: -25%;
    left: 18%;
    background-image: url(../img/common_img_04.png);
    width: 8.4vw;
    height: 100px;
  }
  header h1::after {
    content: "";
    top: -25%;
    right: 22%;
    background-image: url(../img/common_img_05.png);
    width: 6.66VW;
    height: 100px;
    -moz-transform: scale(-1, 1) rotate(-12deg);
    -o-transform: scale(-1, 1) rotate(-12deg);
    -ms-transform: scale(-1, 1) rotate(-12deg);
    -webkit-transform: scale(-1, 1) rotate(-12deg);
    transform: scale(-1, 1) rotate(-12deg);
  }
  header .home-btn {
    float: none;
    margin-left: 0;
    text-align: center;
    transition: opacity .3s linear;
    position: absolute;
    right: 10%;
    top: 0;
    line-height: 1.2;
  }
  header .home-btn .icn {
    width: 24.5%;
  }
  header .home-btn span {
    font-size: 2vw;
    letter-spacing: -.05em;
  }
  header .navi-btn-list {
    position: absolute;
    float: none;
    right: 6.5%;
    top: -2.5vw;
    font-size: 0;
  }
  header .navi-btn-list li {
    display: inline-block;
    width: 11.13vw;
  }
  header .navi-btn-list li {
    margin-left: 10px;
  }
  header .navi-btn-list li a {
    transition: opacity .3s linear;
  }
  header .navi-btn-list li a:hover {
    opacity: .5;
  }
  .img_head.right {
    width: 12%;
    top: -10vw;
    right: -1%;
  }
  .img_head.left {
    width: 16%;
    top: -6vw;
  }
  header h1::before,
  header h1::after {
    background-image: none;
  }
  .content-wrapper {
    padding-bottom: 113px;
  }
  .main-body-area {
    position: relative;
    width: 100%;
    /* padding: 40px 8.75%; */
    padding: 40px 8%;
    background: url(../img/second_main-body-area_bg_pc.png) repeat-y;
    background-size: 100%;
  }
  /*外側キャラ*/
  .img_chara.chara02 .chara-container .fukidasho-box .text-box p span {
    display: inline-block;
    margin-top: 3.5vw;
    font-size: 2vw;
  }
  .img_chara.chara01, .img_chara.chara03 {
    display: none;
  }
  /*記事メインタイトル*/
  .main-title-area {
    height: auto;
    padding: 0 1.5384% .25vw 1.5384%;
    background: url(../img/second_main-title-area_bg_sp.png) no-repeat;
    background-size: 100%;
    border-bottom: solid 1px #000;
  }
  .main-title-area.bg-pink {
    background: url(../img/second_main-title-area_pink_bg_sp.png) no-repeat;
    background-size: 100%;
  }
  .main-title-area.bg-blue {
    background: url(../img/second_main-title-area_bg_blue_sp.png) no-repeat;
    background-size: 100%;
  }
  .main-title-area .title-box {
    width: 75.5%;
    margin-top: 7%;
  }
  .main-title-area .title-box.line-2 {
    width: 75.5%;
    margin-top: 5%;
  }
  .main-title-area .title-box .ttl {
    font-size: 4.53333333vw;
    line-height: 1.176470588235294;
    margin-left: 3.076923076923077%;
  }
  .main-title-area .icn-list li {
    width: 60%;
  }
  .main-title-area .title-box h2 {
    font-size: 4.53333333vw;
    margin-left: 3.25%;
  }
  .main-title-area .chara-obj {
    width: 24.5%;
    bottom: -1px;
  }
  .main-title-area .icn-list {
    width: 20%;
    margin-left: 3.076923076923077%;
  }
  .main-article-wrap .feature-area {
    margin-top: 6.6vw;
  }
  .main-body-area {
    padding: 22px 6.153846153846154%;
  }
  /*コンテンツ*/
  .section-ttl {
    margin-bottom: 0;
    font-size: 4.266666666666667vw;
    line-height: 1.5625;
    text-align: center;
  }
  .article-area {
    margin-top: 12px;
  }
  .article-box.left, .article-box.right {
    width: 100%;
    float: none;
  }
  .article-box.right .photo-frame, .article-box.left .photo-frame {
    padding: 0 10.769230769230769%;
  }
  .article-box .photo-frame {
    margin-bottom: 13px;
  }
  .article-box .photo-frame figcaption {
    margin-top: 8px;
    font-size: 2.666666666666667vw;
    text-align: center;
  }
  .article-box p,
  .article-box li {
    font-size: 3.2vw;
    line-height: 1.666666666666667;
  }
  /*クイズ*/
  .quiz-area .top-box {
    position: relative;
    margin-top: 13vw;
  }
  .quiz-area .top-box .ttl {
    position: absolute;
    width: 90.526315789473684%;
    margin-left: -45.263157894736842%;
    left: 50%;
    top: -10vw;
  }
  .quiz-area .body-box {
    padding: 8.115942028985507% 10.526315789473684% 12.594202898550725%;
  }
  .quiz-area .question-box dl {
    text-align: left;
  }
  .quiz-area .question-box dt {
    padding: 3.508771929824561%;
    margin-right: 0;
    font-size: 2.933333333333333vw;
    border-radius: 6px;
  }
  .quiz-area .question-box dd {
    width: 100%;
    margin-top: .5em;
    font-size: 2.933333333333333vw;
    line-height: 1.363636363636364;
  }
  .quiz-area .question-box ol {
    text-align: center;
  }
  .quiz-area .question-box ol li {
    position: relative;
    width: 45%;
    height: auto;
    margin-left: 0;
    background-size: 100%;
  }
  .quiz-area .question-box ol li img {
    width: 100%;
    height: auto;
  }
  .quiz-area .question-box ol li:first-child {
    display: block;
    margin: 0 auto;
  }
  .quiz-area .question-box ol li:last-child {
    margin-left: 5.263157894736842%;
  }
  .quiz-area .question-box .q1 {
    background: url(../img/q1_bg_sp.gif) no-repeat;
  }
  .quiz-area .question-box .q2 {
    background: url(../img/q2_bg_sp.gif) no-repeat;
  }
  .quiz-area .question-box .q3 {
    background: url(../img/q3_bg_sp.gif) no-repeat;
  }
  .quiz-area .question-box .q1,
  .quiz-area .question-box .q2,
  .quiz-area .question-box .q3 {
    background-size: contain;
  }
  .quiz-area .question-box ol li .a-txt {
    position: absolute;
    width: 100%;
    left: 0;
    top: 3.8em;
    font-size: 3.466666666666667vw;
    text-align: center;
  }
  .quiz-area .result-info {
    position: relative;
  }
  .quiz-area .result-info p {
    width: 84%;
    margin: 2em auto 0 auto;
  }
  .quiz-area .body-box {
    padding: 8.115942028985507% 8.298245614035088% 16.594202898550725%;
  }
  .quiz-area .result-box.incorrect .chara-obj {
    width: 16%;
    right: 6%;
    top: 10vw;
  }
  .eraser .quiz-area .result-box.incorrect .chara-obj {
    width: 16%;
    right: 6%;
    top: 14vw;
  }
  .quiz-area .result-box.answer .chara-obj {
    /*
        width: 24%;
        left: -8%;
        top: 15vw;
        */
    width: 22%;
    left: -3%;
    top: 10vw;
  }
  .eraser .quiz-area .result-box.answer .chara-obj {
    left: 0;
    top: 12vw;
    z-index: 1;
  }
  .quiz-area .result-box .comment-ttl {
    font-size: 2.933333333333333vw;
    line-height: 1.4;
  }
  .quiz-area .result-box .comment-txt {
    margin-top: 1em;
    font-size: 2.933333333333333vw;
  }
  .quiz-area .result-box.incorrect .btn-blue {
    font-size: 3.413333333333333vw;
  }
  .btn-blue {
    border: solid 1px #000;
  }
  /*もどるボタン*/
  .page-link-btn-wrap {
    text-align: center;
  }
  .btn-blue.page-link {
    display: inline-block;
    margin: 2em auto 0 auto;
    font-size: 3.2vw;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .history-back-btn {
    top: 2em;
    width: 10.666666666666667%;
  }
  .history-back-btn span {
    display: inline-block;
    padding-top: .25em;
    font-size: 2vw;
    white-space: nowrap;
  }
  .history-back-btn .icn {
    width: 100%;
  }
  /*
     トンボ鉛筆について
    ---------------------------------------*/
  #company .main-title-area.bg-pink {
    background: url(../img/second_main-title-area_bgyellow_sp.png) no-repeat;
    background-size: 100%;
  }
  #company .main-title-area .title-box .ttl {
    color: #000;
  }
  #company .main-title-area .chara-obj {
    width: 24.5%;
    bottom: -2.5vw;
    padding-bottom: 6.6vw;
  }
  #company .section-ttl {
    margin-bottom: 0;
  }
  #company .article-box .disp-table {
    width: 100%;
  }
  #company .article-box.right .photo-frame,
  #company .article-box.left .photo-frame,
  .tips .article-box.right .photo-frame,
  .tips .article-box.left .photo-frame {
    margin-top: 2em;
    padding: 0;
    text-align: center;
  }
  #company .article-box .section-ttl,
  .tips .article-box .section-ttl {
    margin-bottom: .5em;
  }
  #company .main-article-wrap .feature-area,
  .tips .main-article-wrap .feature-area {
    margin-top: 6.6vw;
  }
  /*年表*/
  #historyTimeline .timeline-wrapper .timeline-container:before {
    content: "";
    position: absolute;
    top: 10vw;
    display: block;
    left: 0;
    margin-left: 0;
    width: 3px;
    height: 98%;
    border-radius: 3px;
    background: #6cf;
    /* Old browsers */
    background: -moz-linear-gradient(top, #6cf 0%, #6cf 81%, #ace3ff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6cf 0%, #6cf 81%, #ace3ff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6cf 0%, #6cf 81%, #ace3ff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cf', endColorstr='#ace3ff',GradientType=0 );
    /* IE6-9 */
  }
  #historyTimeline .timeline-wrapper .timeline-container:after {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    left: 0;
    margin-left: 0;
    height: 100px;
    width: 3px;
    height: 71px;
    background: url(../img/company/company_timeline_end.gif) no-repeat;
  }
  #historyTimeline .year-block .left, #historyTimeline .year-block .right {
    width: 100%;
    float: none;
  }
  #historyTimeline .year-block {
    margin-top: 2em;
  }
  #historyTimeline .year-block figure {
    padding-top: 25px;
  }
  #historyTimeline .year-block .left figure {
    text-align: left;
    padding-left: 6.65634675%;
  }
  #historyTimeline .year-block .right figure {
    text-align: left;
    padding-left: 6.65634675%;
  }
  #historyTimeline .chronology-topic dt .ttl,
  #historyTimeline .left .chronology-topic dt .ttl.none-img {
    font-size: 4.8vw;
    padding: 0 0 .125em 6.65634675%;
  }
  #historyTimeline .chronology-topic dt .img-circle {
    width: 28.6377709%;
    height: auto;
    max-width: inherit;
    max-height: inherit;
    text-align: center;
  }
  #historyTimeline .chronology-topic dt .img-circle img {
    width: 100%;
    height: auto;
  }
  #historyTimeline .left .chronology-topic dt .img-circle {
    width: 28.6377709%;
    height: auto;
    left: inherit;
    right: 0;
  }
  #historyTimeline .left .chronology-topic dt .ttl {
    padding: 0 0 .125em 6.65634675%;
    text-align: left;
  }
  #historyTimeline .chronology-topic dt .ttl:before,
  #historyTimeline .left .chronology-topic dt .ttl:before {
    content: "";
    display: block;
    position: absolute;
    width: 5.06666667vw;
    height: 5.06666667vw;
    left: -2vw;
    top: 1.85em;
    background: #6cf;
    border-radius: 50%;
  }
  #historyTimeline .left .chronology-topic dt .ttl.none-img:before {
    content: "";
    display: block;
    position: absolute;
    width: 5.06666667vw;
    height: 5.06666667vw;
    left: -2vw;
    top: 5.5vw;
    background: #6cf;
    border-radius: 50%;
  }
  #historyTimeline .chronology-topic dd .topic-list li {
    font-size: 2.8vw;
  }
  #historyTimeline .left .chronology-topic dt .ttl.none-img {
    padding-top: 1.5em;
  }
  #historyTimeline .year-block.year-1910 figure,
  #historyTimeline .year-block.year-1930 figure {
    padding-bottom: 0;
  }

  /*
    工場
    ---------------------------------------*/
  .factory-main-ttl-area {
    padding: 25px 6.15384615% 0;
  }
  .factory-main-ttl-area .factory-main-ttl {
    width: 87.6923077%;
    margin: 5vw auto 0;
  }
  .factory-main-ttl-area .bg-box .item-img {
    width: 7.51879699%;
    left: 2%;
  }
  .factory .main-body-area .station-area {
    padding: 4vw 8%;
  }
  .factory .station-area .section-ttl {
    margin-bottom: 1.5vw;
    font-size: 4.266666666666667vw;
    text-align: center;
  }
  .factory .station-area .article-area .section-ttl {
    text-align: left;
  }
  .factory-main-ttl-area .bg-box {
    padding-top: 15.5vw;
  }
  .factory-main-ttl-area .lead-txt {
    margin-top: 10vw;
    font-size: 3.2vw;
  }
  .factory .station-area .right .section-ttl {
    padding-left: 1.2em;
  }
  /*製造工程*/
  .station-list {
    display: block;
    overflow: hidden;
  }
  .station-list ol {
    display: block;
    padding: 4vw 0 8vw 0;
    font-size: 3.2vw;
    text-align: center;
    border-bottom: none;
    border-top: none;
  }
  .station-list ol:first-child {
    padding: 4vw 0 6vw 0;
    border-top: solid 2px #000;
  }
  .station-list ol:last-child {
    padding: 4vw 0 3vw 0;
    border-bottom: solid 2px #000;
  }
  .factory.ballpointpen .station-list ol,
  .factory.sharpcore .station-list ol,
  .factory.eraser .station-list ol,
  .factory.correction_tape .station-list ol,
  .factory.glue_tape .station-list ol,
.factory.ballpointpen .station-list ol:first-child,
.factory.sharpcore .station-list ol:first-child,
.factory.eraser .station-list ol:first-child,
.factory.correction_tape .station-list ol:first-child,
.factory.glue_tape .station-list ol:first-child {

    padding: 4vw 0 8vw 0;
    text-align: center;
  }

  /*--作業工程ie調整用スタイル--*/
  /*ボールペン*/
  .ie .ballpointpen .station-list ol:nth-child(2):after,
  .ie .ballpointpen .station-list ol:nth-child(5):after {
    content: none;
  }
  .station-list ol:after,
  .mac .factory.marker .station-list ol:after,
  .mac .factory.eraser .station-list ol:after,
  .mac.chrome .eraser.factory .station-list ol:after,
  .mac.chrome .correction_tape.factory .station-list ol:after,
  .mac.chrome .glue_stick.factory .station-list ol:after,
  .mac.firefox .correction_tape.factory .station-list ol:after,
  .mac .factory.glue_tape .station-list ol:after,
  .mac.chrome .glue_tape.factory .station-list ol:after,
  .mac.chrome .ballpointpen.factory .station-list ol:after,
  .mac.chrome .sharpcore.factory .station-list ol:after,
  .mac.chrome .marker.factory .station-list ol:after,
  .station-list ol:first-child:after,
  .ie .ballpointpen .station-list ol:nth-child(2):after,
  .ie .sharpcore .station-list ol:nth-child(n+2):after,
  .ie .factory.correction_tape .station-list ol:after,
  .ie .factory.correction_tape .station-list ol:nth-child(n+5):after,
  .ie .factory.glue_stick .station-list ol:nth-child(4):after,
  .ie .factory.glue_tape .station-list ol:after,
  .win.chrome .station-list ol:after,
  .win.firefox .factory.marker .station-list ol:after,
  .win.chrome .factory.marker .station-list ol:after,
  .win.firefox .factory.eraser .station-list ol:after,
  .win.chrome .factory.eraser .station-list ol:after,
  .win.firefox .factory.glue_tape .station-list ol:after,
  .win.chrome .factory.glue_tape .station-list ol:after {
    content: "" !important;
    position: absolute;
    left: -2%;
    top: inherit;
    bottom: -1vw;
    display: block;
    width: 104%;
    height: 8vw;
    background: url(../img/factory_station-list_ol_after_sp.png) no-repeat center;
    background-size: cover;
    z-index: 2;
  }
  .station-list ol:last-child:after,
  .mac .factory.marker .station-list ol:last-child:after,
  .mac .factory.eraser .station-list ol:last-child:after,
  .mac .factory.glue_tape .station-list ol:last-child:after,
  .mac.chrome .correction_tape.factory .station-list ol:last-child:after,
  .mac.chrome .glue_stick.factory .station-list ol:last-child:after,
  .mac.firefox .correction_tape.factory .station-list ol:last-child:after,
  .mac.chrome .glue_tape.factory .station-list ol:last-child:after,
  .mac.chrome .ballpointpen.factory .station-list ol:last-child:after,
  .mac.chrome .sharpcore.factory .station-list ol:last-child:after,
  .mac.chrome .marker.factory .station-list ol:last-child:after,
  .ie .factory.correction_tape .station-list ol:last-child:after,
  .ie .factory.glue_tape .station-list ol:last-child:after,
  .ie .factory.sharpcore .station-list ol:last-child:after,
  .win.chrome .station-list ol:last-child:after,
  .win.firefox .factory.marker .station-list ol:last-child:after,
  .win.chrome .factory.marker .station-list ol:last-child:after,
  .win.firefox .factory.eraser .station-list ol:last-child:after,
  .win.chrome .factory.eraser .station-list ol:last-child:after,
  .win.firefox .factory.glue_tape .station-list ol:last-child:after,
  .win.chrome .factory.glue_tape .station-list ol:last-child:after {
    content: none !important;
  }
  .station-info .scroll-txt {
    margin-top: 6vw;
    font-size: 3.2vw;
  }
  .station-info .scroll-icn {
    width: 4.2%;
  }
  .factory .detail-description-box {
    padding: 6%;
  }
  .factory .detail-description-box .ttl {
    padding: 4%;
    font-size: 3.57733333vw;
    line-height: 1.4;
  }
  .factory .detail-description-box .article-box p {
    font-size: 3.2vw;
  }
  .factory .station-area .article-box.right .photo-frame {
    margin-bottom: .5em;
  }
  .factory .detail-description-box .article-box.right .photo-frame {
    margin-top: .5em;
    margin-bottom: 0;
  }
  /*消しゴム工場*/
  .factory.eraser .section-3-4 {
    position: relative;
    margin-top: 6.6vw;
  }
  .factory.eraser .section-3-4 .section-4 {
    position: relative;
    bottom: inherit;
  }
  .factory.eraser .section-5 {
    position: relative;
    top: inherit;
  }
  .factory.eraser .section-5 .feature-area {
    margin-top: inherit;
  }
  .factory.eraser .quiz-area .top-box {
    margin-top: 70px;
  }
  /*修正テープ工場*/
  .factory.correction_tape .article-box.left .photo-frame,
  .factory.glue_tape .article-box.left .photo-frame {
    padding: 4vw;
  }
  .factory.correction_tape .detail-description-box .ttl,
  .factory.glue_tape .detail-description-box .ttl {
    width: 100%;
    margin-bottom: 0;
  }
  .fukidashi-ttl {
    padding: 4% 0;
    font-size: 3.4vw;
    line-height: 1.4;
  }
  .fukidashi-ttl:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 2;
  }
  .fukidashi-ttl:after {
    content: "";
    position: absolute;
    bottom: -29px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #00a8ff;
    z-index: 1;
  }
  .factory.correction_tape .detail-description-box .fukidashi-ttl,
  .factory.glue_tape .detail-description-box .fukidashi-ttl {
    margin-bottom: 25px;
  }
  .dl-blue-dt dt {
    font-size: 3.4vw;
  }
  .dl-blue-dt dd {
    font-size: 3vw;
  }
  /*シャープペンシル工場*/
  .factory.mechanicalpencil .factory-main-ttl-area {
    padding-top: 20vw;
  }
  .factory.mechanicalpencil .factory-main-ttl-area .bg-box {
    padding-top: 1vw;
  }
  .sp-parts-switch {
    width: 100%;
    text-align: center;
  }
  .sp-parts-switch li {
    display: inline-block;
    width: 38%;
    padding: 2.2vw 0;
    margin-bottom: 2vw;
    margin-left: 7.46666667%;
    text-align: center;
    font-size: 4.267vw;
    background: #fff;
    color: #6cf;
    border-radius: 4px;
    border: solid 2px #000;
    transition: background .2s linear,color .2s linear;
    cursor: pointer;
  }
  .sp-parts-switch li:first-child {
    margin-left: 0;
  }
  .sp-parts-switch li.current {
    background: #6cf;
    color: #fff;
  }
  /*アニメーション*/
  .animetion-area .screen-ttl {
    font-size: 4.2vw;
    margin-bottom: 1em;
    letter-spacing: -.1em;
  }
  /*えんぴつ工場*/
  .factory.pencil .station-box {
    padding: 0 1%;
  }
  .factory.pencil .station-box .top-box .left {
    width: 50%;
  }
  .factory.pencil .station-box .top-box .right,
  .factory.pencil .station-box .top-box .left {
    width: 50%;
  }
  .factory.pencil .station-box .top-box .left ol li,
  .factory.pencil .station-box .top-box .right ol li {
    width: 100%;
    display: block;
  }
  .factory.pencil .station-box .bottom-box ol li {
    display: block;
    width: 100%;
  }
  .factory.pencil .station-box .top-box .icn {
    position: absolute;
    width: 22.0452617%;
    left: -5%;
    top: -4vw;
  }
  .factory.pencil .station-box .top-box .jiku-box .icn {
    left: -1%;
  }
  .factory.pencil .station-info .section-ttl {
    margin-top: 0;
    padding-bottom: 6vw;
    text-align: center;
  }
  .factory.pencil .intro-text {
    margin: 8vw 0;
    font-size: 3.2vw;
    line-height: 1.666666666666667;
  }
  .photo-box .cricle-img {
    position: absolute;
    width: 28.4210526%;
    top: 0;
    right: 0;
  }
  .yellow-box-ttl {
    display: block;
    width: 60%;
    padding: 9px 2.6%;
    margin: 8vw auto 4vw auto;
    background: #fff100;
    border: solid 2px #000;
    border-radius: 6px;
    font-size: 3.99466667vw;
    text-align: center;
  }
  .photo-box.harf-box .cricle-img {
    position: absolute;
    width: 26%;
    top: 40px;
    right: 0;
  }
  .factory.pencil .section-3 .photo-frame {
    text-align: center;
  }
  .factory.pencil .detail-description-box .ttl {
    width: 100%;
    text-align: center;
  }
  .lead-txt {
    font-size: 3.2vw;
    line-height: 1.666666666666667;
  }
  /*工場ページ固有スタイル*/
  .factory.pencil .factory-main-ttl-area .bg-box .item-img {
    width: 12.518797%;
    left: 2px;
  }
  .factory.ballpointpen .factory-main-ttl-area .bg-box .item-img {
    width: 9.518797%;
    left: 2px;
  }
  .factory.mechanicalpencil .factory-main-ttl-area .bg-box .item-img {
    width: 9.518797%;
    left: 2px;
  }
  .factory.sharpcore .factory-main-ttl-area .bg-box .item-img {
    width: 9.518797%;
  }
  .factory.marker .factory-main-ttl-area .bg-box .item-img {
    width: 12.518797%;
    left: 2px;
  }
  .factory.eraser .factory-main-ttl-area .bg-box .item-img {
    width: 12.518797%;
    left: 2px;
  }
  .factory.correction_tape .factory-main-ttl-area .bg-box .item-img {
    width: 11.518797%;
    left: 2px;
  }
  .factory.glue_stick .factory-main-ttl-area .bg-box .item-img {
    width: 9.518797%;
    left: 2px;
  }
  .factory.glue_tape .factory-main-ttl-area .bg-box .item-img {
    width: 12.518797%;
    left: 2px;
  }
    .factory.mechanicalpencil .assembly-ttl {
        width: 73.0263158%;
        margin: 0 auto 4vw auto;
    }
    .factory.mechanicalpencil .parts-info-area {
        margin: 4vw auto 0 auto;
    }


  /*
     トンボKIDSとは？
    ---------------------------------------*/
  #kids .main-body-area {
    padding-top: 0;
  }
  #kids .about-tombow-kids p {
    font-size: 3.2vw;
    line-height: 1.666666666666667;
  }
  #kids .site-map-area .ttl,
  #kids .about-icon .ttl {
    width: 71.1340206%;
    margin: 40px auto 0 auto;
  }
  #kids .icon-info-box .icon-info {
    width: 100%;
    margin-top: 15px;
  }
  #kids .icon-info-box .icon-info:nth-child(odd),
  #kids .icon-info-box .icon-info:nth-child(even) {
    float: none;
  }
  #kids .icon-info-box .icon-info dd {
    font-size: 2.93333333vw;
  }
  #kids .icon-info-box .icon-info dt {
    width: 20%;
    max-width: inherit;
  }
  #kids .site-map-area .category-box {
    margin-top: 4vw;
  }
  #kids .site-map-area .category-box .ttl-area .icn {
    width: 20%;
  }
  #kids .site-map-area .category-box .text-area {
    display: table;
    width: 100%;
    height: auto;
    padding: 2vw 0 2vw 14px;
    font-size: 4vw;
    text-align: center;
  }
  #kids .site-map-area .category-box .text-area span {
    padding-left: 0;
  }
  #kids .site-map-area .category-box .info-txt {
    margin-top: .5em;
    font-size: 3.11688312vw;
    line-height: 1.25;
  }
  #kids .link-wrap .site-map-dl {
    width: 100%;
    margin-top: 6vw;
  }
  #kids .link-wrap .site-map-dl:nth-child(odd),
  #kids .link-wrap .site-map-dl:nth-child(even) {
    float: none;
  }
  #kids .link-wrap .site-map-dl dt .ttl-box .photo-cell {
    width: 16%;
  }
  #kids .link-wrap .site-map-dl dt {
    font-size: 4vw;
  }
  #kids .link-wrap .site-map-dl dt .ttl-box .title-cell span {
    font-size: 3.2vw;
  }
  #kids .link-wrap .site-map-ul li, #kids .link-wrap .site-map-dl dd {
    font-size: 3.37662338vw;
    line-height: 2.30769231;
  }
  #kids .link-wrap .site-map-ul {
    margin-top: 6vw;
  }
  /*SPアコーディオン*/
  #kids .site-map-area .category-box .text-area {
    cursor: pointer;
  }
  #kids .site-map-area .category-box .text-area .acord-icn {
    position: absolute;
    width: 4.86842105%;
    font-weight: bold;
    color: #fff;
    right: 8%;
    top: 5vw;
    transform: rotate(180deg);
    transition: transform .3s linear;
  }
  #kids .site-map-area .category-box.opened .text-area .acord-icn {
    transform: rotate(0);
  }
  #kids .site-map-area .link-wrap {
    display: none;
  }
}

/*----------------------------
for SP
----------------------------*/
@media screen and (max-width: 320px) {
  /*header*/
  header .home-btn span {
    display: inline-block;
    position: relative;
    top: -2px;
  }
  .content-wrapper .inner {
    min-width: 320px;
  }
  .main-title-area .chara-obj {
    width: 24.2%;
    position: relative;
  }
  .main-title-area .title-box {
    width: 70%;
    margin-top: 8%;
  }
  .main-title-area .title-box .ttl {
    line-height: 1.176470588235294;
    letter-spacing: -.05em;
  }
  /*クイズ*/
  .quiz-area .question-box ol li {
    width: 46.2%;
  }
  /*戻るボタン*/
  .history-back-btn span, .sns_wrap span {
    font-size: 2.5vw;
  }
  /*
     トンボ鉛筆について
    ---------------------------------------*/
  #company .main-title-area .chara-obj {
    width: 24.5%;
    bottom: -3.5vw;
    padding-bottom: 6.6vw;
  }
  #company .main-title-area .title-box {
    margin-top: 6.6vw;
  }
  /*
      工場
    ----------------------------------------*/
  .station-list ol,
  .station-list ol:first-child,
  .station-list ol:last-child {
    border-width: 1px;
  }
  /*シャープペンシル工場*/
  .sp-parts-switch li {
    border: solid 1px #000;
  }
  /*アニメーション*/
  .animetion-area {
    position: relative;
  }
  .animetion-area .anime-screen-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .animetion-area .anime-screen-wrap .anime-screen {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .animetion-area .anime-screen-wrap .anime-bg-img {
    width: 100%;
    height: auto;
  }
}