.sub_top .banner_bg {background: url(/img/sub_top1.png) no-repeat center center; background-size: cover;}

.marq {font-size: 8vw; text-align: center; height: 100%; letter-spacing: 1px; color: #eee;font-weight: 900;}

#about #sec1 {background: #f9f9f9; padding: 100px 0;}
#about #sec1 .wrapper {display: flex; align-items: flex-start;}
#about #sec1 .lt {font-size: 2.5em; width: 30%; letter-spacing: 0;}
#about #sec1 .rt {width: 70%;}
#about #sec1 .rt .desc {font-size: 1.125em; margin-bottom: 60px; transform: rotate(-0.03deg); line-height: 170%; padding-top: 48px;}
#about #sec1 .rt .count_wrap li {padding: 25px 0;}
#about #sec1 .rt .count_wrap .noto {font-size: 1.125em;}
#about #sec1 .rt .count_wrap .roboto {font-size: 2.1875em;}
#about #sec1 .rt .count_wrap .roboto .reg {font-size: 1.75rem;}

.sub_title {text-align: center;}
.sub_title .green {font-size: 3.75em; margin-bottom: 45px; letter-spacing: 0; transform: rotate(-0.03deg);}
.sub_title .light {font-size: 1.625em; line-height: 170%; transform: rotate(-0.03deg);}
#about #sec2 .top {padding: 100px 0 120px 0;}
#about #sec2 .bt {padding: 150px 0 160px 0; position: relative; background: url(/img/about_bg.png) no-repeat center center; background-attachment: fixed; text-align: center; background-size: cover; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#about #sec2 .bt .yellow {letter-spacing: 12px; color: #ffa930; font-size: 1.375em; margin-bottom: 45px; transform: rotate(-0.03deg);}
#about #sec2 .bt .thin {font-size: 3.125em; color: #fff; transform: rotate(-0.03deg);}
#about #sec2 .bt::before {content: ""; display: block; position: absolute; left: 50%; top: -24px; transform: translateX(50%); width: 2px; height: 24px;background: url(/img/dot_line.png) no-repeat center center; background-size: 2px 24px;}
#about #sec2 .bt::after {content: ""; display: block; position: absolute; left: 50%; bottom: -24px; transform: translateX(50%); width: 2px; height: 24px;background: url(/img/dot_line.png) no-repeat center center; background-size: 2px 24px;}

#about #sec3 .sub_title {padding: 120px 0;}
#about #sec3 .chart_wrap {padding: 90px 0 150px 0; background: #fff; display: flex;}
#about #sec3 .chart_wrap .chart {width: 50%; padding-right: 20px;}
#about #sec3 .chart_wrap .chart img {width: 100%;}
#about #sec3 .chart_wrap .txt {width: 50%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; transform: rotate(-0.03deg); padding-bottom: 5%; position: relative; padding-right: 20px;}
#about #sec3 .chart_wrap .txt .txt_center {position: relative; left: 50%; transform: translateX(-50%); width: fit-content;}
#about #sec3 .chart_wrap .txt .roboto {font-size: 2.5em; letter-spacing: 0;}
#about #sec3 .chart_wrap .txt .md {font-size: 1.375em; margin: 10px 0 45px 0;}
#about #sec3 .chart_wrap .txt .light {font-size: 1.125em;}

#about #sec4 {background: url(/img/about_bt.png) no-repeat top center; background-size: cover; color: #fff; height: 1000px; padding-top: 175px;}
#about #sec4 .flex .history_wrap li:nth-child(1),
#about #sec4 .flex .history_wrap li:nth-child(2) {
  margin-bottom: 117px;
}
#about #sec4 .flex {align-items: flex-start;}
#about #sec4 .flex .roboto {font-size: 2.5em; width: 30%; letter-spacing: 0;}
#about #sec4 .flex .history_wrap {width: 70%; display: flex; flex-wrap: wrap;}
#about #sec4 .flex .history_wrap.mo {display: none;}
#about #sec4 .flex .history_wrap li {position: relative; width: 50%; transform: rotate(-0.03deg);}
#about #sec4 .flex .history_wrap li::before {content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; top: -13px; left: -10px;}
#about #sec4 .flex .history_wrap li .year {font-size: 1.5em; margin-bottom: 15px;}
#about #sec4 .flex .history_wrap li .history {font-size: 1.0625em; opacity: 0.35;}
#about #sec4 .flex .history_wrap li .history .dot_p {line-height: 170%; font-weight: 300;}
#about #sec4 .flex .history_wrap li .history .dot_p::before {content: "- ";}
#about #sec4 .flex .history_wrap li.now::before {background: #ffa930;}
#about #sec4 .flex .history_wrap li.now .year {color: #ffa930;}
#about #sec4 .flex .history_wrap li.now .history {opacity: 1;}



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

}

@media screen and (max-width: 1240px) {
  #about #sec1 > .wrapper {display: block;}
  #about #sec1 .lt {width: 100%;}
  #about #sec1 .rt {width: 100%;}
  #about #sec1 .count_wrap {padding: 0;}

  #about #sec4 {background: url(/img/about_bt_no.png) no-repeat 70% center; background-size: cover; height: auto; padding: 5% 5% 10%; padding-left: 0; padding-right: 0;}
  #about #sec4 .flex {display: block; padding: 0;}
  #about #sec4 .flex .roboto {margin-bottom: 8%; width: 100%; margin-left: -12px; padding: 0 5%;}
  #about #sec4 .flex .history_wrap.pc {display: none;}
  #about #sec4 .flex .history_wrap.mo {display: flex;}
  #about #sec4 .flex .history_wrap {width: 100%;}
  #about #sec4 .flex .history_wrap li {padding: 0 20px 0 5%;}
  #about #sec4 .flex .history_wrap li:nth-child(1), #about #sec4 .flex .history_wrap li:nth-child(2) {margin-bottom: 7%;}
  #about #sec4 .flex .history_wrap li::before {z-index: 2; left: 8%;}
  #about #sec4 .flex .history_wrap li::after {content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); position: absolute; top: -9px; left: 0;}
}

@media screen and (max-width: 1024px) {
  #about #sec1 .rt .desc {font-size: 1.111em; margin-bottom: 5%; padding-top: 4%;}
}

@media screen and (max-width: 768px) {
  #about #sec1 {padding: 12% 0;}
  #about #sec2 .top {padding: 10% 0;}
  .sub_title .green {font-size: 3.5em; margin-bottom: 4%; letter-spacing: 0;}
  .sub_title .light {font-size: 1.325em; line-height: 160%;}
  
  #about #sec2 .bt {padding: 15% 0;}
  #about #sec2 .bt .yellow {font-size: 1.25em; margin-bottom: 4%;}
  #about #sec2 .bt .thin {font-size: 2.875em;}

  #about #sec3 .sub_title {padding: 12% 0;}

  #about #sec3 .chart_wrap {padding: 10% 0; display: block;}
  #about #sec3 .chart_wrap .chart {width: 100%; margin-bottom: 5%; padding-right: 0;}
  #about #sec3 .chart_wrap .txt {width: 100%; padding-right: 0;}
  #about #sec3 .chart_wrap .txt .md {margin: 3% 0 8% 0;}
}

@media screen and (max-width: 540px) {
  #about #sec1 {padding: 14% 0;}
  #about #sec1 .rt .desc .br_mo {display: block;}
  #about #sec2 .top {padding: 12% 0;}
  .sub_title .green {font-size: 3.25em; margin-bottom: 4%; letter-spacing: 0;}
  .sub_title .light {font-size: 1.25em; line-height: 150%;}
  
  #about #sec2 .bt {padding: 15% 0; background-attachment: local;}
  #about #sec2 .bt .yellow {font-size: 1em; margin-bottom: 4%; letter-spacing: 9px;}
  #about #sec2 .bt .thin {font-size: 2.25em;}

  #about #sec3 .sub_title {padding: 12% 0;}
  #about #sec3 .chart_wrap .chart {margin-bottom: 8%;}

  #about #sec4 {padding: 10% 0;}
  #about #sec4 .flex .history_wrap li .year {margin-bottom: 10px;}
  #about #sec4 .flex .history_wrap li .history {font-size: 1em;}
  #about #sec4 .flex .roboto {padding: 0 35px; margin-bottom: 12%;}
  #about #sec4 .flex .history_wrap li {width: 100%; margin-bottom: 10%; padding: 0 20px 0 30px;}
  #about #sec4 .flex .history_wrap li:nth-child(1), #about #sec4 .flex .history_wrap li:nth-child(2) {margin-bottom: 10%;}
  #about #sec4 .flex .history_wrap li::before {left: 20px; top: -10px; display: none;}
  #about #sec4 .flex .history_wrap li::after {top: -7px; display: none;}
  #about #sec4 .flex .history_wrap li {padding: 0 25px;}
  #about #sec4 .flex .roboto {margin-left: 0; padding: 0 25px;}
}

@media screen and (max-width: 414px) {
  .sub_title .light {font-size: 1.125em;}
}

@media screen and (max-width: 375px) {
  #about #sec1 .rt .desc {font-size: 1em;}
}