@charset "UTF-8";
/* CSS Document */

@import url('../splide/splide.min.css');

html { scrollbar-gutter: stable; }
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
  overscroll-behavior: none; /* 対応ブラウザではバウンスも抑制 */
}

#brand .history { background: url("../../brand/img/history/bg_pc.png") repeat top center; background-size: contain; padding: 60px 0 0; line-height: 1 }

#brand .history .amusement_bk { background: #009D3B; }
#brand .history .golf_bk { background: #9CC715; }
#brand .history .public-racing_bk { background: #915100; }
#brand .history .health-park_bk { background: #00B1C0; }
#brand .history .ball-park_bk { background: #ED7826; }
#brand .history .amusement { color: #009D3B !important; }
#brand .history .golf { color: #9CC715 !important; }
#brand .history .public-racing { color: #915100 !important; }
#brand .history .health-park { color: #00B1C0 !important; }
#brand .history .ball-park { color: #ED7826 !important; }
#brand .history .mv { position: relative }
#brand .history .mv h1 { position: absolute; width: 67.8%; left: 16.1%; top: 43.9%; opacity: 0; transform: translateY(40px); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.4s }
#brand .history .mv.active h1 { opacity: 1; transform: translateY(0); }
#brand .history .mv .img { opacity: 0; transform: scale(1.33); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.175, 0.885, 0.42, 1.12); }
#brand .history .mv.active .img { opacity: 1; transform: scale(1); }
#brand .history .mv .img01 { position: absolute; left: 0; top: 12%; }
#brand .history .mv .img02 { position: absolute; left: 73.6%; bottom: 0; }
#brand .history .mv .img03 { position: absolute; left: 41.9%; top: 18.2%; }
#brand .history .mv .img04 { position: absolute; left: 0; top: 80.2%; }
#brand .history .mv .img05 { position: absolute; left: 9.5%; top: 28.36%; transition-delay: 0.1s }
#brand .history .mv .img06 { position: absolute; left: 17%; top: 0; transition-delay: 0.15s }
#brand .history .mv .img07 { position: absolute; left: 24.3%; top: 4.25%; transition-delay: 0.2s }
#brand .history .mv .img08 { position: absolute; left: 59.5%; top: 5.8%; transition-delay: 0.25s }
#brand .history .mv .img09 { position: absolute; right: 0; top: 8.88%; transition-delay: 0.3s }
#brand .history .mv .img10 { position: absolute; left: 0; top: 45.75%; transition-delay: 0.35s }
#brand .history .mv .img11 { position: absolute; right: 0; top: 48.3%; transition-delay: 0.4s }
#brand .history .mv .img12 { position: absolute; left: 18.76%; bottom: 0; transition-delay: 0.45s }
#brand .history .mv .img13 { position: absolute; left: 57.1%; top: 68.78%; transition-delay: 0.5s }
#brand .history .mv .img14 { position: absolute; left: 42.4%; top: 73.4%; transition-delay: 0.55s }
#brand .history .lead { width: 1000px; margin: 0 auto 20px; position: relative; }
#brand .history .lead p { position: relative; font-size: 19px; font-weight: 600; line-height: 1.8em; letter-spacing: 0.02em; z-index: 10 }
#brand .history .lead .img01 { position: absolute; top: 25px; left: -55px; }
#brand .history .lead .img02 { position: absolute; top: 30px; right: -40px; }

#brand .history .page-nav { width: 100%; text-align: center; margin: 0 0 80px; padding: 15px 0; transition: all 0.3s ease; }
#brand .history .page-nav .page-nav-inner { width: 966px; margin: 0 auto; }
#brand .history .page-nav ul { margin: 0 auto 0 -15px; }
#brand .history .page-nav ul li { width: calc(25% - 15px); float: left; margin: 0 0 0 15px; }
#brand .history .page-nav ul li a { color: #fff; font-weight: 600; letter-spacing: 0; padding: 20px 0 15px; border-radius: 30px; display: block; background-size: contain; height: 100%; transition: 0.3s ease; }
#brand .history .page-nav ul li:nth-child(1) a { background: url("../../brand/img/history/page-nav_bg01.jpg") repeat-x, #019d3b; }
#brand .history .page-nav ul li:nth-child(2) a { background: url("../../brand/img/history/page-nav_bg02.jpg") repeat-x, #ed6c00; }
#brand .history .page-nav ul li:nth-child(3) a { background: url("../../brand/img/history/page-nav_bg03.jpg") repeat-x, #e84873; }
#brand .history .page-nav ul li:nth-child(4) a { background: url("../../brand/img/history/page-nav_bg04.jpg") repeat-x, #0082cd; }
#brand .history .page-nav ul li a span { font-size: 25px; display: block; }
#brand .history .page-nav ul li a:hover { opacity: 0.5; }
#brand .history .page-nav.fixed { position: fixed; top: 64px; left: 0; width: 100%; margin: 0; padding: 4px 0; background: #fff; z-index: 100; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); border-top: 1px solid #009D3B; }
#brand .history .page-nav.fixed .page-nav-inner { width: 680px; margin: 0 auto; }
#brand .history .page-nav.fixed ul { margin: 0 auto 0 -6px; }
#brand .history .page-nav.fixed ul li { width: calc(25% - 6px); float: left; margin: 0 0 0 6px; }
#brand .history .page-nav.fixed ul li a { padding: 12px 0 0; line-height: 1.2em; font-size: 12px; border-radius: 20px; min-height: 56px }
#brand .history .page-nav.fixed ul li a span { font-size: 23px; line-height: 1.6em; }
#brand .history .page-nav.fixed ul li:nth-child(1) a { line-height: 1em }

#brand .history .history-container { margin-top: 0 }
#brand .history .history-container.fixed { margin-top: 210px }
.stage { overflow: hidden; }
.stage__inner { width: 1000px; transform-origin: top left; margin: 0 auto }

#brand .history .sec { width: 1000px; margin: 0 auto; position: relative; padding: 0 }
#brand .history .sec .section-header { width: 730px;  margin: 0 auto; position: relative; z-index: 10 }
#brand .history .sec .section-header .section-header-inner { background: #fff; padding: 45px 0 40px; box-shadow: 4px 4px 0 0 #000; box-sizing: border-box; position: relative; }
#brand .history .sec .section-header .section-header-inner h2 { font-size: 36px; line-height: 1.4em; margin: 0 0 10px; }
#brand .history .sec .section-header .section-header-inner p { font-weight: 500; letter-spacing: 0; }
#brand .history .sec .history-inner { position: relative; }
#brand .history .sec .block-l { text-align: left; position: relative; }
#brand .history .sec .block-r { text-align: right; position: relative; }
#brand .history .sec .card { width: 370px; display: inline-block; }
#brand .history .sec .card .year { font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: 0; }
#brand .history .sec .card .shoulder { font-size: 24px; font-weight: 600; line-height: 1.2em; letter-spacing: 0; text-align: left; }
#brand .history .sec .card h3 { color: #fff; font-size: 18px; text-align: center; line-height: 1.2em; letter-spacing: 0; padding: 15px 0; margin: 15px 0 0; }
/* Chrome hack */
html.is-chrome #brand .history .sec .card h3, html.is-firefox #brand .history .sec .card h3, html.is-edge #brand .history .sec .card h3 {　line-height: 1.1em; padding: 14px 0; margin: 15px 0 0;　}
/* Chrome hack */
#brand .history .sec .card ul li:nth-child(n+2) h3 { margin-top: 10px; }
#brand .history .sec .card .pic { margin: 20px 0 0; transition: all 0.2s ease; }
#brand .history .sec .card .pic:hover { transform: scale(1.025); }
#brand .history .sec .card .pic img { border-radius: 30px; }
#brand .history .sec .card .btn-more { text-align: right; margin: 10px 0 0; }
#brand .history .sec .card .btn-more img { border-radius: 15px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; }
#brand .history .sec .card .btn-more:hover img{ transform: scale(1.2); border-radius: 60px; }
#brand .history .sec .block-l .card .ico { position: absolute; bottom: 115px; left: 435px; }
#brand .history .sec .block-l .card .year { position: absolute; bottom: 150px; left: 540px; }
#brand .history .sec .block-r .card .ico { position: absolute; bottom: 120px; right: 435px; }
#brand .history .sec .block-r .card .year { position: absolute; bottom: 150px; right: 540px; }
#brand .history .sec .block-l .card.no-pic .ico { position: absolute; bottom: -20px; left: 435px; }
#brand .history .sec .block-l .card.no-pic .year { position: absolute; bottom: -5px; left: 540px; }
#brand .history .sec .block-r .card.no-pic .ico { position: absolute; bottom: -20px; right: 435px; }
#brand .history .sec .block-r .card.no-pic .year { position: absolute; bottom: -5px; right: 540px; }
#brand .history .sec .status-change { width: 430px; display: inline-block; position: relative; }
#brand .history .sec .status-change h3 { font-size: 23px; line-height: 1.2em; letter-spacing: 0; }
#brand .history .sec .status-change .cir { width: 40px; height: 40px; border-radius: 60px; display: block; }
#brand .history .sec .block-l .status-change { text-align: right; }
#brand .history .sec .block-l .status-change .cir { position: absolute; top: 10px; right: -90px; }
#brand .history .sec .block-r .status-change { text-align: left; }
#brand .history .sec .block-r .status-change .cir { position: absolute; top: 10px; left: -90px; }
#brand .history #sec01 .history-inner { position: relative; padding-bottom: 170px; }
#brand .history #sec01 .history-line { position: absolute; left: calc(50% - 130px); top: 0; width: 260px; height: 100%; background: url('../../brand/img/history/history_line01.png') no-repeat top; background-size: 100%; z-index: 0 }
#brand .history #sec01 .section-header-inner { border: 2px solid #009D3B; }
#brand .history #sec01 .history-inner .era-year { position: absolute; top: 30px; right: 20px; }
#brand .history #sec01 .year { color: #009D3B; }
#brand .history #sec01 .block01 { padding-top: 70px; position: relative; z-index: 13; }
#brand .history #sec01 .block02 { margin-top: -48px; position: relative; z-index: 12; }
#brand .history #sec01 .block03 { margin-top: 42px; position: relative; z-index: 11; }
#brand .history #sec01 .block04 { margin-top: -28px; position: relative; z-index: 10; }
#brand .history #sec01 .block05 { margin-top: 70px; position: relative; z-index: 9; }
#brand .history #sec01 .block06 { margin-top: -18px; position: relative; z-index: 8; }
#brand .history #sec01 .block07 { margin-top: 36px; position: relative; z-index: 7; }
#brand .history #sec01 .block08 { margin-top: -60px; position: relative; z-index: 6; }
#brand .history #sec01 .block09 { margin-top: -51px; position: relative; z-index: 5; }
#brand .history #sec01 .block10 { margin-top: -91px; position: relative; z-index: 4; }
#brand .history #sec01 .block11 { margin-top: -126px; position: relative; z-index: 3; }
#brand .history #sec01 .block12 { margin-top: 23px; position: relative; z-index: 2; }
#brand .history #sec01 .block13 { margin-top: 44px; position: relative; z-index: 1; }
html.is-chrome #brand .history #sec01 .block10, html.is-firefox #brand .history #sec01 .block10, html.is-edge #brand .history #sec01 .block10 { margin-top: -94px; }
html.is-chrome #brand .history #sec01 .block12, html.is-firefox #brand .history #sec01 .block12, html.is-edge #brand .history #sec01 .block12 { margin-top: 23px; }
#brand .history #sec01 .img01 { position: absolute; top: 140px; left: 20px; }
#brand .history #sec01 .img02 { position: absolute; top: 130px; left: 720px; }
#brand .history #sec01 .img03 { position: absolute; top: 205px; right: 20px; }
#brand .history #sec01 .img04 { position: absolute; top: 450px; right: 40px; }
#brand .history #sec01 .block03 .ico01 { position: absolute; bottom: 172px; right: 435px; }
#brand .history #sec01 .block03 .ico02 { position: absolute; bottom: 100px; right: 435px; }
#brand .history #sec01 .block08 .card .ico { position: absolute; bottom: 40px; right: 435px; }
#brand .history #sec01 .block08 .card .year { position: absolute; bottom: 50px; right: 540px; }
#brand .history #sec02 .history-inner { padding-bottom: 170px; }
#brand .history #sec02 .history-line { position: absolute; left: calc(50% - 130px); top: 0; width: 260px; height: 100%; background: url('../../brand/img/history/history_line02.png') no-repeat top; background-size: 100% }
#brand .history #sec02 .section-header-inner { border: 2px solid #ED6C00; }
#brand .history #sec02 .history-inner .era-year { position: absolute; top: 30px; left: 20px; }
#brand .history #sec02 .year { color: #ED6C00; }
#brand .history #sec02 .block01 { padding-top: 74px; position: relative; z-index: 9; }
#brand .history #sec02 .block02 { margin-top: -104px; position: relative; z-index: 8; }
#brand .history #sec02 .block03 { margin-top: -18px; position: relative; z-index: 7; }
#brand .history #sec02 .block04 { margin-top: 37px; position: relative; z-index: 6; }
#brand .history #sec02 .block05 { margin-top: -18px; position: relative; z-index: 5; }
#brand .history #sec02 .block06 { margin-top: 75px; position: relative; z-index: 4; }
#brand .history #sec02 .block07 { margin-top: -115px; position: relative; z-index: 3; }
#brand .history #sec02 .block08 { margin-top: -105px; position: relative; z-index: 2; }
#brand .history #sec02 .block09 { margin-top: -120px; position: relative; z-index: 1; }
#brand .history #sec02 .block10 { margin-top: -133px; position: relative; z-index: 0; }
#brand .history #sec02 .img01 { position: absolute; top: -270px; right: 60px; }
#brand .history #sec02 .img02 { position: absolute; top: 60px; right: 30px; }
#brand .history #sec02 .img03 { position: absolute; bottom: -265px; left: 45px; }
#brand .history #sec02 .img04 { position: absolute; bottom: -80px; left: 30px; }
#brand .history #sec03 .history-inner { padding-bottom: 170px; }
#brand .history #sec03 .history-line { position: absolute; left: calc(50% - 130px); top: 0; width: 260px; height: 100%; background: url('../../brand/img/history/history_line03.png') no-repeat top; background-size: 100% }
#brand .history #sec03 .section-header-inner { border: 2px solid #E7336E; }
#brand .history #sec03 .history-inner .era-year { position: absolute; top: 30px; right: 20px; }
#brand .history #sec03 .year { color: #E7336E; }
#brand .history #sec03 .block01 { padding-top: 40px; position: relative; z-index: 11; }
#brand .history #sec03 .block02 { margin-top: 85px; position: relative; z-index: 10; }
#brand .history #sec03 .block03 { margin-top: 35px; position: relative; z-index: 9; }
#brand .history #sec03 .block04 { margin-top: -95px; position: relative; z-index: 8; }
#brand .history #sec03 .block05 { margin-top: -125px; position: relative; z-index: 7; }
#brand .history #sec03 .block06 { margin-top: -95px; position: relative; z-index: 6; }
#brand .history #sec03 .block07 { margin-top: -125px; position: relative; z-index: 5; }
#brand .history #sec03 .block08 { margin-top: -20px; position: relative; z-index: 4; }
#brand .history #sec03 .block09 { margin-top: 50px; position: relative; z-index: 3; }
#brand .history #sec03 .block10 { margin-top: 40px; position: relative; z-index: 2; }
#brand .history #sec03 .block11 { margin-top: -50px; position: relative; z-index: 1; }
html.is-chrome #brand .history #sec03 .block07, html.is-firefox #brand .history #sec03 .block07, html.is-edge #brand .history #sec03 .block07 { margin-top: -123px; }
#brand .history #sec03 .img01 { position: absolute; bottom: -320px; right: 40px; }
#brand .history #sec03 .img02 { position: absolute; top: 130px; right: 55px; }
#brand .history #sec03 .img03 { position: absolute; bottom: -275px; left: 25px; }
#brand .history #sec04 { padding-bottom: 210px }
#brand .history #sec04 .history-inner { padding-bottom: 95px; }
#brand .history #sec04 .history-line { position: absolute; left: calc(50% - 130px); top: 0; width: 260px; height: 100%; background: url('../../brand/img/history/history_line04.png') no-repeat top; background-size: 100% }
#brand .history #sec04 .section-header-inner { border: 2px solid #0070BA; }
#brand .history #sec04 .history-inner .era-year { position: absolute; top: 30px; right: 20px; }
#brand .history #sec04 .year { color: #0070BA; }
#brand .history #sec04 .block01 { padding-top: 70px; position: relative; z-index: 17; }
#brand .history #sec04 .block02 { margin-top: -95px; position: relative; z-index: 16; }
#brand .history #sec04 .block03 { margin-top: -105px; position: relative; z-index: 15; }
#brand .history #sec04 .block04 { margin-top: -54px; position: relative; z-index: 14; }
#brand .history #sec04 .block05 { margin-top: 8px; position: relative; z-index: 13; }
#brand .history #sec04 .block06 { margin-top: 73px; position: relative; z-index: 12; }
#brand .history #sec04 .block07 { margin-top: -100px; position: relative; z-index: 11; }
#brand .history #sec04 .block08 { margin-top: -95px; position: relative; z-index: 10; }
#brand .history #sec04 .block09 { margin-top: 10px; position: relative; z-index: 9; }
#brand .history #sec04 .block10 { margin-top: 23px; position: relative; z-index: 8; }
#brand .history #sec04 .block11 { margin-top: -35px; position: relative; z-index: 7; }
#brand .history #sec04 .block12 { margin-top: -50px; position: relative; z-index: 6; }
#brand .history #sec04 .block13 { margin-top: 55px; position: relative; z-index: 5; }
#brand .history #sec04 .block14 { margin-top: 7px; position: relative; z-index: 4; }
#brand .history #sec04 .block15 { margin-top: 40px; position: relative; z-index: 3; }
#brand .history #sec04 .block16 { margin-top: -104px; position: relative; z-index: 2; }
#brand .history #sec04 .block17 { margin-top: -95px; position: relative; z-index: 1; }
html.is-chrome #brand .history #sec04 .block05, html.is-firefox #brand .history #sec04 .block05, html.is-edge #brand .history #sec04 .block05 { margin-top: 4px; }
html.is-chrome #brand .history #sec04 .block07, html.is-firefox #brand .history #sec04 .block07, html.is-edge #brand .history #sec04 .block07 { margin-top: -102px; }
html.is-chrome #brand .history #sec04 .block10, html.is-firefox #brand .history #sec04 .block10, html.is-edge #brand .history #sec04 .block10 { margin-top: 20px; }
html.is-chrome #brand .history #sec04 .block14, html.is-firefox #brand .history #sec04 .block14, html.is-edge #brand .history #sec04 .block14 { margin-top: 5px; }
#brand .history #sec04 .img01 { position: absolute; bottom: -290px; left: 40px; }
#brand .history #sec04 .img02 { position: absolute; top: 100px; left: 25px; }
#brand .history #sec04 .img03 { position: absolute; bottom: -290px; left: 20px; }
#brand .history #sec04 .img04 { position: absolute; top: 140px; left: 20px; }
#brand .history #sec04 .block04 .status-change .cir { position: absolute; top: 20px; left: -90px; }
#brand .history #sec04 .block09 .status-change .cir { position: absolute; top: 20px; right: -90px; }
#brand .history #sec04 .block13 .status-change .cir { position: absolute; top: 20px; left: -90px; }
#brand .history #sec04 .block-next-asobi { position: relative; margin: 0; }
#brand .history #sec04 .block-next-asobi .dots { position: absolute; top: 150px; left: 0; }

#brand .history #back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 50; }
#brand .history #back-to-top img { border-radius: 30px; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2); }
#brand .history #back-to-top a img { transition: all 0.2s ease;}
#brand .history #back-to-top a:hover img{ transform: scale(1.1); border-radius: 60px; }

.modal-wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; display: none }
.history-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(211,211,212,0.5); transition: opacity 0.6s ease; overscroll-behavior: contain; touch-action: none; }
.history-modal-content { background-color: #fff; width: 50%; max-width: 650px; max-height: 80vh; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 2px 2px rgba(0,0,0,0.2); overflow: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.history-modal-content .history-modal-content-inner { overflow: hidden; height: 100% }
.history-modal-content .tit-header { position: relative; min-height: 150px; }
.history-modal-content .ico { position: absolute; top: 30px; right: 30px; }
.history-modal-content .ico01 { position: absolute; top: 30px; right: 125px; }
.history-modal-content .ico02 { position: absolute; top: 30px; right: 30px; }
.history-modal-content h2 { color: #000; font-size: 36px; text-align: left;line-height: 1.4em; padding: 45px 50px 35px; }
.history-modal-content .pic { position: relative; z-index: 2; }
.history-modal-content .box { position: relative; }
.history-modal-content .box .year { color: #fff; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: 0; position: absolute; top: 12px; right: 25px; z-index: 2; }
.history-modal-content .box h3 { color: #000; font-size: 25px; text-align: left; padding: 20px 118px 0 50px; position: relative; z-index: 2; }
.history-modal-content .box .cir { width: 500px; height: 500px; display: block; border-radius: 250px; position: absolute; top: -90px; right: -230px; z-index: 1; }
.history-modal-content .box .bg { background: rgba(255,255,255,0.8); padding: 0 0 30px; position: relative; z-index: 2; }
.history-modal-content .box .bg p { color: #000; text-align: left; letter-spacing: 0em; padding: 20px 50px; }
.history-modal-content .box .bg .close { cursor: pointer }
.history-modal-content .box .bg .close img { border-radius: 15px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
.history-modal-content .box .bg .close:hover img{ transform: scale(1.1); border-radius: 60px; }
.history-modal-content .amusement_bk { background: #009D3B; }
.history-modal-content .golf_bk { background: #9CC715; }
.history-modal-content .public-racing_bk { background: #915100; }
.history-modal-content .health-park_bk { background: #00B1C0; }
.history-modal-content .ball-park_bk { background: #ED7826; }
.history-modal-content .amusement { color: #009D3B !important; }
.history-modal-content .golf { color: #9CC715 !important; }
.history-modal-content .public-racing { color: #915100 !important; }
.history-modal-content .health-park { color: #00B1C0 !important; }
.history-modal-content .ball-park { color: #ED7826 !important; }
.history-modal-content .pic .splide-prev svg, .history-modal-content .pic .splide-next svg { display: none }
.history-modal-content .pic .splide-prev { position: absolute; width: 40px; height: 40px; top: 50%; left: 10px; background: url("../../brand/img/history/btn_prev.png") no-repeat; background-size: contain }
.history-modal-content .pic .splide-next { position: absolute; width: 40px; height: 40px; top: 50%; right: 10px; background: url("../../brand/img/history/btn_next.png") no-repeat; background-size: contain; }

.dummy { width: 16px; height: 100%; background: #eee; display: inline-block; position: absolute; top: 0; left: 50%; margin: 0 0 0 -8px; }

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(60px); transition: opacity 0.8s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd.active { opacity: 1; transform: translateY(0); }
.fd-l { position: relative; opacity: 0; transform: translateX(40px); transition: opacity 0.8s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd-l.active { opacity: 1; transform: translateX(0); }
.fd-r { position: relative; opacity: 0; transform: translateX(-40px); transition: opacity 0.8s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd-r.active { opacity: 1; transform: translateX(0); }
.fd-l .ico, .fd-l .ico01, .fd-l .ico02, .fd-l .cir, .fd-r .ico, .fd-r .ico01, .fd-r .ico02, .fd-r .cir { opacity: 0; transform: scale(2); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.175, 0.885, 0.42, 1.12); }
.fd-l .ico02, .fd-r .ico02 { transition-delay: 0.2s }
.fd-l.active .ico, .fd-l.active .ico01, .fd-l.active .ico02, .fd-l.active .cir, .fd-r.active .ico, .fd-r.active .ico01, .fd-r.active .ico02, .fd-r.active .cir { opacity: 1; transform: scale(1) }
.zmm { opacity: 0; transform: scale(1.5); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.175, 0.885, 0.42, 1.12); }
.zmm.active { opacity: 1; transform: scale(1) }

#loader { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; z-index: 1001 }
.loader svg {
	fill: none;
	stroke: #9CC715 ;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

@media screen and (max-width: 1024px){
  #brand .history .lead { width: 100%; }
  #brand .history .page-nav .page-nav-inner { width: auto; max-width: 966px; margin: 0 auto; }
  #brand .history .page-nav ul li a { font-size: 1.5625vw }
  .stage { padding: 0 12px }
  .history-modal-content { width: 75%; max-width: 650px; }
}
@media screen and (max-width: 768px){
  #brand .history .page-nav { width: auto; margin: 0 auto 70px; padding: 4px; }
	#brand .history .page-nav.fixed { top: 42px; }
	#brand .history .page-nav .page-nav-inner { width: auto; margin: 0 auto; }	
	#brand .history .page-nav ul { margin: 0 0 0 -2px; }
	#brand .history .page-nav ul li { width: calc(25% - 2px); float: left; margin: 0 0 0 2px;}
	#brand .history .page-nav ul li a { font-size: 12px; line-height: 1.4em; padding: 12px 0; border-radius: 15px; height: 100% }
	#brand .history .page-nav ul li a span { font-size: 22px; margin: 5px 0 0; }
  #brand .history .page-nav.fixed ul li a abbr { display: none }
  #brand .history .page-nav.fixed { position: fixed; top: 42px; left: 0; width: 100%; margin: 0; padding: 4px 0; background: #fff; z-index: 100; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); border-top: 1px solid #009D3B; }
  #brand .history .page-nav.fixed .page-nav-inner { width: inherit; }
  #brand .history .page-nav.fixed ul { margin: 0 auto 0 -2px; }
  #brand .history .page-nav.fixed ul li { width: calc(25% - 2px); float: left; margin: 0 0 0 2px; }
  #brand .history .page-nav.fixed ul li a { font-size: 12px; line-height: 1.4em; padding: 10px 0; border-radius: 15px; height: 100%; min-height: inherit }
  #brand .history .page-nav.fixed ul li a span { font-size: 22px; line-height: 1.4em; }
}
@media screen and (max-width: 680px){
  
  #brand .history { background: url("../../brand/img/history/bg_sp.png") repeat top center; background-size: auto; padding: 44px 0 0 }
  #brand .history .mv h1 { width: 68.75%; left: 15.625%; top: 41.11%; z-index: 10 }
	#brand .history .mv .img01 { width: 31.5%; left: 0; top: 19.35%; }
	#brand .history .mv .img02 { width: 32.9%; left: auto; right: 0; bottom: 1.2%; }
	#brand .history .mv .img03 { width: 30.4%; left: 35.9%; top: 21.76%; }
	#brand .history .mv .img04 { width: 23.5%; left: 0; top: auto; bottom: 3.3% }
	#brand .history .mv .img05 { width: 28.3%; left: 8.4%; top: 28.9%; transition-delay: 0.1s }
	#brand .history .mv .img06 { width: 8.2%; left: 4.3%; top: 0; transition-delay: 0.15s }
	#brand .history .mv .img07 { width: 28.125%; left: 17.34%; top: 2.66%; transition-delay: 0.2s }
	#brand .history .mv .img08 { width: 21.875%; left: 56.875%; top: 1%; transition-delay: 0.25s }
	#brand .history .mv .img09 { width: 33%; right: 0; top: 18.14%; transition-delay: 0.3s }
	#brand .history .mv .img10 { width: 18%; left: 0; top: 46.66%; transition-delay: 0.35s }
	#brand .history .mv .img11 { width: 22.26%; right: 0; top: 46%; transition-delay: 0.4s }
	#brand .history .mv .img12 { width: 34.375%; left: 1.1%; bottom: 15.11%; transition-delay: 0.45s }
	#brand .history .mv .img13 { width: 31.5%; left: 64%; top: 66.5%; transition-delay: 0.5s }
	#brand .history .mv .img14 { width: 31.25%; left: 33.8%; top: auto; bottom: 0; transition-delay: 0.55s }
	#brand .history .lead { width: auto; padding: 60px 10px 0; }
	#brand .history .lead .img01 { position: absolute; top: -25px; left: 15px; width: 110px; }
	#brand .history .lead .img02 { position: absolute; top: 0; right: 0; width: 110px; }	
  
  .stage { padding: 0 }
  .stage__inner { width: 100% }
  
	#brand .history .sec { width: auto; padding: 0 5%; }
	#brand .history .sec .section-header { width: 100%; }
	#brand .history .sec .section-header .section-header-inner { padding: 40px 0 35px; }
	#brand .history .sec .section-header .section-header-inner h2 { font-size: 28px; }
	#brand .history .sec .section-header .section-header-inner p { font-size: 16px; }
	#brand .history .sec .history-inner .era-year { margin: 0 }
	#brand .history .sec .history-inner .era-year img { width: 62.5%; margin-top: 10vw }
	#brand .history .sec .block-l { text-align: left; width: 77.77%; margin: 0 0 0 22.22%; }
	#brand .history .sec .block-r { text-align: left; width: 77.77%; margin: 0 0 0 22.22%; }
	#brand .history .sec .card { width: 100%; }
	#brand .history .sec .card .year { font-size: 40px; letter-spacing: 0; }
	#brand .history .sec .card .shoulder { font-size: 18px; }
	#brand .history .sec .card h3 { display: block; font-size: 15px; padding: 13px 0 10px; margin: 5px 0 0; }
	#brand .history .sec .card ul li:nth-child(n+2) h3 { margin-top: 5px; }
	#brand .history .sec .card .pic { margin: 10px 0 0; }
	#brand .history .sec .card .btn-more { text-align: right; margin: 7px 0 0; }
	#brand .history .sec .card .btn-more img { width: 32px; border-radius: 10px; }
	#brand .history .sec .block-l .card .ico { position: absolute; bottom: inherit; top: -3.75vw; left: -17.25vw; }
	#brand .history .sec .block-l .card .year { position: static; }
	#brand .history .sec .block-r .card .ico { position: absolute; bottom: inherit; top: -3.75vw; right: inherit; left: -17.25vw; }
	#brand .history .sec .block-r .card .year { position: static; }
	#brand .history .sec .block-l .card.no-pic .ico { position: absolute; bottom: inherit; top: -3.75vw; left: -17.25vw; }
	#brand .history .sec .block-l .card.no-pic .year { position: static; }
	#brand .history .sec .block-r .card.no-pic .ico { position: absolute; bottom: inherit; top: -3.75vw; right: inherit; left: -17.25vw; }
	#brand .history .sec .block-r .card.no-pic .year { position: static; }
	#brand .history .sec .ico { width: 15.25vw; }
	#brand .history .sec .status-change { width: auto; }
	#brand .history .sec .status-change h3 { font-size: 18px;  letter-spacing: 0; }
	#brand .history .sec .status-change .cir { width: 7.5vw; height: 7.5vw; }
	#brand .history .sec .block-l .status-change { text-align: left; }
	#brand .history .sec .block-l .status-change .cir { position: absolute; top: 0; right: inherit; left: -13.25vw; }
	#brand .history .sec .block-r .status-change .cir { position: absolute; top: 0; left: -13.25vw; }
	#brand .history #sec01 .history-inner { position: relative; width: 100%; aspect-ratio: 720 / 11464; padding-bottom: 0; }
	#brand .history #sec01 .history-line { position: absolute; left: -2.5vw; top: 0; width: 16.1111%; aspect-ratio: 116 / 11464; background: url('../../brand/img/history/history_line01_sp.png') no-repeat 0 0 / 100% auto; }
  #brand .history #sec01 .history-inner .era-year { position: relative; top: inherit; right: inherit; width: 100%; aspect-ratio: 720 / 672; text-align: right }
	#brand .history #sec01 .block01 { position: absolute; left: 0; top: 5.8618%; padding-top: 0; }
	#brand .history #sec01 .block02 { position: absolute; left: 0; top: 13.79971%; margin-top: 0; }
	#brand .history #sec01 .block03 { position: absolute; left: 0; top: 19.5569%; margin-top: 0; }
	#brand .history #sec01 .block04 { position: absolute; left: 0; top: 27.2330%; margin-top: 0; }
	#brand .history #sec01 .block05 { position: absolute; left: 0; top: 33.4264%; margin-top: 0; }
	#brand .history #sec01 .block06 { position: absolute; left: 0; top: 40.9281%; margin-top: 0; }
	#brand .history #sec01 .block07 { position: absolute; left: 0; top: 47.3811%; margin-top: 1px; }
	#brand .history #sec01 .block08 { position: absolute; left: 0; top: 54.8936%; margin-top: 1px; }
	#brand .history #sec01 .block09 { position: absolute; left: 0; top: 61.33985%; margin-top: 1px; }
	#brand .history #sec01 .block10 { position: absolute; left: 0; top: 68.8416%; margin-top: 1px; }
	#brand .history #sec01 .block11 { position: absolute; left: 0; top: 79.1347%; margin-top: 2px; }
	#brand .history #sec01 .block12 { position: absolute; left: 0; top: 86.37474%; margin-top: 2px; }
	#brand .history #sec01 .block13 { position: absolute; left: 0; top: 90.1256%; margin-top: 2px; }
  html.is-chrome #brand .history #sec01 .block10, html.is-firefox #brand .history #sec01 .block10, html.is-edge #brand .history #sec01 .block10 { margin-top: 1px; }
  html.is-chrome #brand .history #sec01 .block12, html.is-firefox #brand .history #sec01 .block12, html.is-edge #brand .history #sec01 .block12 { margin-top: 2px; }
	#brand .history #sec01 .img01 { position: static; padding: 10.25vw 0 0 21.25vw; }
	#brand .history #sec01 .img01 img { width: 49vw; }
	#brand .history #sec01 .img02 { position: static; padding: 10.25vw 0 0 0; }
	#brand .history #sec01 .img02 img { width: 50vw; }	
	#brand .history #sec01 .img03 { position: static; padding: 5.125vw 0 0 20vw; }
	#brand .history #sec01 .img03 img { width: 49.5vw; }			
	#brand .history #sec01 .img04 { position: static; padding: 0 0 0 2.5vw; margin: -0.28vw 0 0; }
	#brand .history #sec01 .img04 img { width: 37.5vw; }
	#brand .history #sec01 .block03 .ico01 { position: absolute; bottom: inherit; top: -3.75vw; right: inherit; left: -17.25vw; width: 15.25vw; }
	#brand .history #sec01 .block03 .ico02 { position: absolute; bottom: inherit; top: 8.75vw; right: inherit; left: -17.25vw; width: 15.25vw; }
	#brand .history #sec01 .block08 .card .ico { position: absolute; bottom: inherit; top: -3.75vw; right: inherit; left: -17.25vw;; }
	#brand .history #sec01 .block08 .card .year { position: static; }
	#brand .history #sec02 .history-inner { position: relative; width: 100%; aspect-ratio: 720 / 9604; padding-bottom: 0; }
	#brand .history #sec02 .history-line { position: absolute; left: -2.5vw; top: 0; width: 16.1111%; aspect-ratio: 116 / 9604; background: url('../../brand/img/history/history_line02_sp.png') no-repeat 0 0 / 100% auto; }
	#brand .history #sec02 .history-inner .era-year { position: relative; top: inherit; right: inherit; width: 100%; aspect-ratio: 720 / 672; text-align: right }
	#brand .history #sec02 .block01 { position: absolute; left: 0; top: 6.9971%; padding-top: 0; }
	#brand .history #sec02 .block02 { position: absolute; left: 0; top: 15.9517%; margin-top: 0; }
	#brand .history #sec02 .block03 { position: absolute; left: 0; top: 24.9167%; margin-top: 0; }
	#brand .history #sec02 .block04 { position: absolute; left: 0; top: 33.0279%; margin-top: 0; }
	#brand .history #sec02 .block05 { position: absolute; left: 0; top: 45.31445%; margin-top: 0; }
	#brand .history #sec02 .block06 { position: absolute; left: 0; top: 53.0196%; margin-top: 1px; }
	#brand .history #sec02 .block07 { position: absolute; left: 0; top: 65.3061%; margin-top: 1px; }
	#brand .history #sec02 .block08 { position: absolute; left: 0; top: 77.59267%; margin-top: 1px; }
	#brand .history #sec02 .block09 { position: absolute; left: 0; top: 87.38026%; margin-top: 2px; }	
	#brand .history #sec02 .img01 { position: static; padding: 10.25vw 0 0 28.75vw; }
	#brand .history #sec02 .img01 img { width: 31.25vw; }
	#brand .history #sec02 .img02 { position: static; padding: 0 0 0 3.75vw; }
	#brand .history #sec02 .img02 img { width: 41.25vw; }
	#brand .history #sec02 .img03 { position: static; padding: 2vw 0 0 25vw; }
	#brand .history #sec02 .img03 img { width: 37.5vw; }	
	#brand .history #sec02 .img04 { position: static; padding: 0 0 0 25vw; }
	#brand .history #sec02 .img04 img { width: 41.25vw; }	
	#brand .history #sec03 .history-inner { position: relative; width: 100%; aspect-ratio: 720 / 11024; padding-bottom: 0 }
	#brand .history #sec03 .history-line { position: absolute; left: -2.5vw; top: 0; width: 16.1111%; aspect-ratio: 116 / 11024; background: url('../../brand/img/history/history_line03_sp.png') no-repeat 0 0 / 100% auto; }
	#brand .history #sec03 .history-inner .era-year { position: relative; top: inherit; right: inherit; width: 100%; aspect-ratio: 720 / 672; text-align: right }
	#brand .history #sec03 .block01 { position: absolute; left: 0; top: 6.0958%; padding-top: 0;  }
	#brand .history #sec03 .block02 { position: absolute; left: 0; top: 13.8967%; margin-top: 0; }
	#brand .history #sec03 .block03 { position: absolute; left: 0; top: 20.60958%; margin-top: 0; }
	#brand .history #sec03 .block04 { position: absolute; left: 0; top: 30.5878%; margin-top: 0; }
	#brand .history #sec03 .block05 { position: absolute; left: 0; top: 39.11466%; margin-top: 0; }
	#brand .history #sec03 .block06 { position: absolute; left: 0; top: 52.3585%; margin-top: 1px; }
	#brand .history #sec03 .block07 { position: absolute; left: 0; top: 60.88534%; margin-top: 1px; }
	#brand .history #sec03 .block08 { position: absolute; left: 0; top: 71.58926%; margin-top: 1px; }
	#brand .history #sec03 .block09 { position: absolute; left: 0; top: 77.5762%; margin-top: 2px; }
	#brand .history #sec03 .block10 { position: absolute; left: 0; top: 85.37736%; margin-top: 2px; }
	#brand .history #sec03 .block11 { position: absolute; left: 0; top: 92.9064%; margin-top: 2px; }
  html.is-chrome #brand .history #sec03 .block07, html.is-firefox #brand .history #sec03 .block07, html.is-edge #brand .history #sec03 .block07 { margin-top: 1px; }
	#brand .history #sec03 .img01 { position: static; padding: 5.12vw 0 0 22.5vw; }
	#brand .history #sec03 .img01 img { width: 40vw; }
	#brand .history #sec03 .img02 { position: static; padding: 6.4vw 0 0 6.25vw; }
	#brand .history #sec03 .img02 img { width: 35vw; }
	#brand .history #sec03 .img03 { position: static; padding: 12.8vw 0 0 21.25vw; }
	#brand .history #sec03 .img03 img { width: 42.5vw; }
	#brand .history #sec04 .history-inner { position: relative; width: 100%; aspect-ratio: 720 / 15084; padding-bottom: 0 }
	#brand .history #sec04 .history-line { position: absolute;  left: -2.5vw; top: 0; width: 16.1111%; aspect-ratio: 116 / 15084; background: url('../../brand/img/history/history_line04_sp.png') no-repeat 0 0 / 100% auto; }
	#brand .history #sec04 .history-inner .era-year { position: relative; top: inherit; right: inherit; width: 100%; aspect-ratio: 720 / 672; text-align: right }
	#brand .history #sec04 .block01 { position: absolute; left: 0; top: 4.45505%; padding-top: 0; }
	#brand .history #sec04 .block02 { position: absolute; left: 0; top: 10.15646%; margin-top: 0; }
	#brand .history #sec04 .block03 { position: absolute; left: 0; top: 15.85786%; margin-top: 0; }
	#brand .history #sec04 .block04 { position: absolute; left: 0; top: 21.36038%; margin-top: 0; }
	#brand .history #sec04 .block05 { position: absolute; left: 0; top: 24.7415%; margin-top: 1px; }
	#brand .history #sec04 .block06 { position: absolute; left: 0; top: 29.64731%; margin-top: 1px; }
	#brand .history #sec04 .block07 { position: absolute; left: 0; top: 35.34871%; margin-top: 1px; }
	#brand .history #sec04 .block08 { position: absolute; left: 0; top: 43.70194%; margin-top: 1px; }
	#brand .history #sec04 .block09 { position: absolute; left: 0; top: 49.46964%; margin-top: 2px; }	
	#brand .history #sec04 .block10 { position: absolute; left: 0; top: 52.8507%; margin-top: 2px; }	
	#brand .history #sec04 .block11 { position: absolute; left: 0; top: 59.08247%; margin-top: 2px; }
	#brand .history #sec04 .block12 { position: absolute; left: 0; top: 66.70644%; margin-top: 2px; }
	#brand .history #sec04 .block13 { position: absolute; left: 0; top: 69.09308%; margin-top: 2px; }
	#brand .history #sec04 .block14 { position: absolute; left: 0; top: 72.4715%; margin-top: 3px; }
	#brand .history #sec04 .block15 { position: absolute; left: 0; top: 77.38%; margin-top: 3px; }
	#brand .history #sec04 .block16 { position: absolute; left: 0; top: 83.61178%; margin-top: 3px; }
	#brand .history #sec04 .block17 { position: absolute; left: 0; top: 89.84354%; margin-top: 3px; }
  html.is-chrome #brand .history #sec04 .block05, html.is-firefox #brand .history #sec04 .block05, html.is-edge #brand .history #sec04 .block05 { margin-top: 1px; }
  html.is-chrome #brand .history #sec04 .block07, html.is-firefox #brand .history #sec04 .block07, html.is-edge #brand .history #sec04 .block07 { margin-top: 1px; }
  html.is-chrome #brand .history #sec04 .block10, html.is-firefox #brand .history #sec04 .block10, html.is-edge #brand .history #sec04 .block10 { margin-top: 2px; }
  html.is-chrome #brand .history #sec04 .block14, html.is-firefox #brand .history #sec04 .block14, html.is-edge #brand .history #sec04 .block14 { margin-top: 3px; }
	#brand .history #sec04 .img01 { position: static; padding: 1.28vw 0 0 25vw; }
	#brand .history #sec04 .img01 img { width: 40vw; }	
	#brand .history #sec04 .img02 { position: static; padding: 0 0 0 3.75vw; margin: -2vw 0 0; }
	#brand .history #sec04 .img02 img { width: 43.75vw; }	
	#brand .history #sec04 .img03 { position: static; padding: 7.7vw 0 0 20vw; }
	#brand .history #sec04 .img03 img { width: 42.5vw; }
	#brand .history #sec04 .img04 { position: static; padding: 3.85vw 0 0 2.5vw; }	
	#brand .history #sec04 .img04 img { width: 43.75vw; }
	#brand .history #sec04 .block04 .status-change .cir { position: absolute; top: 0; left: -13.5vw; }
	#brand .history #sec04 .block09 .status-change .cir { position: absolute; top: 0; right: -13.5vw; }
	#brand .history #sec04 .block13 .status-change .cir { position: absolute; top: 0; left: -13.5vw; }
	#brand .history #sec04 .block-next-asobi { margin: -2.5vw 0 0; }
	#brand .history #sec04 .block-next-asobi .next-asobi img { width: 100%; }
	#brand .history #sec04 .block-next-asobi .arw { text-align: left; margin: -12px 0 0 -7px; }
	#brand .history #sec04 .block-next-asobi .arw img { width: 98px; }
	#brand .history #sec04 .block-next-asobi .dots { position: absolute; top: inherit; left: 100px; bottom: -62px;  }
	#brand .history #sec04 .block-next-asobi .dots img { width: 335px; }	

	#brand .history #back-to-top img { width: 50px; border-radius: 18px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); }
	
	.history-modal-content { width: calc(100% - 40px); margin: 0 20px; max-width: auto; max-height: 90vh; left: calc(50% - 20px); box-shadow: 0 0 2px 2px rgba(0,0,0,0.1); }
	.history-modal-content .tit-header { min-height: inherit; }	
	.history-modal-content .ico { position: absolute; top: 30px; right: 15px; width: 50px; }
	.history-modal-content .ico01 { position: absolute; top: 30px; right: 68px; width: 50px; }
	.history-modal-content .ico02 { position: absolute; top: 30px; right: 15px; width: 50px; }	
	.history-modal-content h2 { font-size: 25px; padding: 25px 65px 15px 30px; }
  .history-modal-content h2.one-l { line-height: 50px }
  .history-modal-content h2 br { display: none }
  .history-modal-content h2 br.abs { display: block }
	.history-modal-content .box { z-index: 10 }
	.history-modal-content .box .year { color: #fff; font-size: 40px; position: absolute; top: -45px; right: 20px; z-index: 5; }
	.history-modal-content .box h3 { font-size: 18px; padding: 25px 30px 0; background: rgba(255,255,255,0.8); z-index: 4; }
	.history-modal-content .box .cir { position: absolute; top: -80px; right: -245px; z-index: 3; }
	.history-modal-content .box .bg { position: relative; padding: 0 0 25px; z-index: 4; }
	.history-modal-content .box .bg p { font-size: 16px; padding: 10px 30px 20px;  }
	.history-modal-content .box .bg .close img { width: 32px; border-radius: 10px; }
  
  .dummy { width: 13px; height: 100%; position: absolute; top: 0; left: 56px; margin: 0; background: #eee; }
}
@media screen and (max-width: 390px){
  #brand .history #sec01 .block01 { padding-top: 0; }
	#brand .history #sec01 .block02 { margin-top: 1px; }
	#brand .history #sec01 .block03 { margin-top: 2px; }
	#brand .history #sec01 .block04 { margin-top: 3px; }
	#brand .history #sec01 .block05 { margin-top: 4px; }
	#brand .history #sec01 .block06 { margin-top: 5px; }
	#brand .history #sec01 .block07 { margin-top: 5px; }
	#brand .history #sec01 .block08 { margin-top: 6px; }
	#brand .history #sec01 .block09 { margin-top: 7px; }
	#brand .history #sec01 .block10 { margin-top: 8px; }
	#brand .history #sec01 .block11 { margin-top: 9px; }
	#brand .history #sec01 .block12 { margin-top: 10px; }
	#brand .history #sec01 .block13 { margin-top: 10px; }
	#brand .history #sec02 .block01 { padding-top: 0; }
	#brand .history #sec02 .block02 { margin-top: 1px; }
	#brand .history #sec02 .block03 { margin-top: 2px; }
	#brand .history #sec02 .block04 { margin-top: 3px; }
	#brand .history #sec02 .block05 { margin-top: 4px; }
	#brand .history #sec02 .block06 { margin-top: 5px; }
	#brand .history #sec02 .block07 { margin-top: 6px; }
	#brand .history #sec02 .block08 { margin-top: 7px; }
	#brand .history #sec02 .block09 { margin-top: 8px; }
  #brand .history #sec03 .block01 { padding-top: 0;  }
	#brand .history #sec03 .block02 { margin-top: 1px; }
	#brand .history #sec03 .block03 { margin-top: 2px; }
	#brand .history #sec03 .block04 { margin-top: 3px; }
	#brand .history #sec03 .block05 { margin-top: 4px; }
	#brand .history #sec03 .block06 { margin-top: 5px; }
	#brand .history #sec03 .block07 { margin-top: 6px }
	#brand .history #sec03 .block08 { margin-top: 7px }
	#brand .history #sec03 .block09 { margin-top: 8px }
	#brand .history #sec03 .block10 { margin-top: 9px }
	#brand .history #sec03 .block11 { margin-top: 10px }
	#brand .history #sec04 .block01 { padding-top: 0; }
	#brand .history #sec04 .block02 { margin-top: 1px; }
	#brand .history #sec04 .block03 { margin-top: 2px; }
	#brand .history #sec04 .block04 { margin-top: 3px; }
	#brand .history #sec04 .block05 { margin-top: 4px; }
	#brand .history #sec04 .block06 { margin-top: 4px; }
	#brand .history #sec04 .block07 { margin-top: 5px; }
	#brand .history #sec04 .block08 { margin-top: 5px; }
	#brand .history #sec04 .block09 { margin-top: 6px; }	
	#brand .history #sec04 .block10 { margin-top: 7px; }	
	#brand .history #sec04 .block11 { margin-top: 8px; }
	#brand .history #sec04 .block12 { margin-top: 9px; }
	#brand .history #sec04 .block13 { margin-top: 9px; }
	#brand .history #sec04 .block14 { margin-top: 10px; }
	#brand .history #sec04 .block15 { margin-top: 11px; }
	#brand .history #sec04 .block16 { margin-top: 11px; }
	#brand .history #sec04 .block17 { margin-top: 12px; }
  html.is-chrome #brand .history #sec01 .block10, html.is-firefox #brand .history #sec01 .block10, html.is-edge #brand .history #sec01 .block10 { margin-top: 8px; }
  html.is-chrome #brand .history #sec01 .block12, html.is-firefox #brand .history #sec01 .block12, html.is-edge #brand .history #sec01 .block12 { margin-top: 10px; }
  html.is-chrome #brand .history #sec03 .block07, html.is-firefox #brand .history #sec03 .block07, html.is-edge #brand .history #sec03 .block07 { margin-top: 6px; }
  html.is-chrome #brand .history #sec04 .block05, html.is-firefox #brand .history #sec04 .block05, html.is-edge #brand .history #sec04 .block05 { margin-top: 4px; }
  html.is-chrome #brand .history #sec04 .block07, html.is-firefox #brand .history #sec04 .block07, html.is-edge #brand .history #sec04 .block07 { margin-top: 5px; }
  html.is-chrome #brand .history #sec04 .block10, html.is-firefox #brand .history #sec04 .block10, html.is-edge #brand .history #sec04 .block10 { margin-top: 7px; }
  html.is-chrome #brand .history #sec04 .block14, html.is-firefox #brand .history #sec04 .block14, html.is-edge #brand .history #sec04 .block14 { margin-top: 10px; }
}
@media screen and (max-width: 400px){
  	#brand .history .page-nav ul li a { font-size: 11px; line-height: 1.4em; padding: 13px 0; }
}