@media all and (min-width: 641px) {
    .wrap {
        overflow: hidden
    }

    .section-pagetop .page-title {
        width: 225px
    }

    .section-pagetop .page-title-text {
        font-size: 16px !important
    }

    .tab-holder {
        max-width: 1024px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        border: 1px solid #ccc;
        margin: 60px auto 0
    }

    .tab-holder .tab+.tab {
        border-left: 1px solid #ccc
    }

    .tab-holder .tab {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 25%;
        height: 80px;
        position: relative
    }

    .tab-holder .tab .age {
        display: block;
        fill: #000;
        height: 24px
    }

    .tab-holder .tab.tab1 .age {
        width: 74px
    }

    .tab-holder .tab.tab2 .age {
        width: 76px
    }

    .tab-holder .tab.tab3 .age {
        width: 70px
    }

    .tab-holder .tab.tab4 .age {
        width: 70px
    }

    .tab-holder .tab.active {
        position: relative;
        background-color: #9c162e;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease
    }

    .tab-holder .tab.active .age {
        fill: #fff
    }

    .tab-holder .tab.active:before {
        content: "";
        display: block;
        margin: auto;
        width: 10px;
        height: 6px;
        background-image: url("../img/icon-arrow-bottom-white.svg");
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px
    }

    .section-history {
        max-width: 1440px;
        margin: 0 auto;
        padding-bottom: 102px
    }

    .section-history .line-left {
        width: 1px;
        height: 110%;
        background-color: #999;
        position: absolute;
        top: -65px;
        left: 32px
    }

    .section-history .line-left .icon-arrow-bottom {
        margin: 0;
        width: 13px;
        height: 7px;
        position: absolute;
        bottom: 0;
        left: -6px
    }

    .section-history .tab-content {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        -webkit-transition: opacity 1.0s 0.2s ease;
        transition: opacity 1.0s 0.2s ease
    }

    .section-history .tab-content.active {
        opacity: 1;
        visibility: visible;
        position: relative;
        top: 0
    }

    .section-history .history-box {
        width: 1000px;
        margin: 150px auto;
        margin-left: 32px;
        position: relative
    }

    .section-history .history-box.setA {
        margin-bottom: 100px
    }

    .section-history .history-box.setB {
        margin-top: 60px
    }

    .section-history .age {
        font-size: 0;
        margin-left: 50px;
        padding-bottom: 15px;
        position: relative
    }

    .section-history .age:before,
    .section-history .age:after {
        content: "";
        display: block;
        position: absolute
    }

    .section-history .age:before {
        bottom: 0;
        left: -60px;
        width: 25px;
        height: 25px;
        border-left: 1px solid #999;
        -webkit-transform: skew(40deg);
        transform: skew(40deg);
        z-index: 0
    }

    .section-history .age:after {
        bottom: 18px;
        left: -74px;
        width: 9px;
        height: 9px;
        background-color: #000;
        z-index: 1
    }

    .section-history .age.pink:before {
        border-left: 1px solid #e274a1
    }

    .section-history .age.pink:after {
        background-color: #e274a1
    }

    .section-history .age.age-1999 {
        width: 111px
    }

    .section-history .age.age-2001 {
        width: 109px
    }

    .section-history .age.age-2003 {
        width: 118px
    }

    .section-history .age.age-2005 {
        width: 119px
    }

    .section-history .age.age-2006 {
        width: 119px
    }

    .section-history .age.age-2007 {
        width: 120px
    }

    .section-history .age.age-2008 {
        width: 120px
    }

    .section-history .age.age-2009 {
        width: 119px
    }

    .section-history .age.age-2010 {
        width: 113px
    }

    .section-history .age.age-2011 {
        width: 103px
    }

    .section-history .age.age-2012 {
        width: 113px
    }

    .section-history .age.age-2013 {
        width: 112px
    }

    .section-history .age.age-2014 {
        width: 115px
    }

    .section-history .age.age-2015 {
        width: 113px
    }

    .section-history .age.age-2016 {
        width: 113px
    }

    .section-history .age.age-2017 {
        width: 114px
    }

    .section-history .age.age-2018 {
        width: 114px
    }

    .section-history .age.age-2019-01 {
        width: 112px
    }

    .section-history .age.age-2019-02 {
        width: 112px
    }

    .section-history .age.age-2022 {
        width: 112px
    }

    .section-history .info-box {
        padding-left: 50px;
        padding-top: 15px;
        border-top: 1px solid #999
    }

    .section-history .info-box.pink {
        border-top: 1px solid #e274a1
    }

    .section-history .info-box .title {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 10px
    }

    .section-history .info-box .text {
        font-size: 14px;
        line-height: 1.71429;
        margin-bottom: 10px
    }

    .section-history .text-note {
        font-size: 12px;
        line-height: 1.83333;
        padding-left: 1.5em;
        text-indent: -1.7em;
        margin-left: 3px
    }

    .section-history .pic {
        width: 244px;
        position: absolute;
        top: 50%;
        right: 40px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .section-history .pic .icon-new {
        width: 48px;
        margin: auto;
        position: absolute;
        top: -58px;
        left: 0;
        right: 0
    }

    .section-history .pic .item-type {
        text-align: center;
        margin-top: 10px
    }

    .section-history .pic .item-type .icon {
        display: inline-block
    }

    .section-history .box-2005 .item-type,
    .section-history .box-2008 .item-type,
    .section-history .box-2017-02 .item-type,
    .section-history .box-2018-01 .item-type {
        margin-top: 0
    }

    .section-history .box-2006 .item-type,
    .section-history .box-2007 .item-type {
        margin-top: 7px
    }

    .section-history .box-2017-01 .item-type {
        margin-top: -10px
    }

    .section-history .box-2018-01 .item-type {
        margin-top: 13px
    }

    .section-history .box-2019-02 .item-type {
        margin-top: 2px
    }

    .section-history .box-2022 .item-type {
        margin-top: 2px
    }

}

@media screen and (max-width: 640px) {
    .wrap {
        overflow: hidden
    }

    .section-pagetop .page-title img {
        width: 40.3125vw
    }

    .tab-holder {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        border: 2px solid #ccc;
        margin: 12.5vw 6.25vw 15.625vw
    }

    .tab-holder .tab+.tab {
        border-left: 2px solid #ccc
    }

    .tab-holder .tab {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 21.875vw;
        height: 15.625vw;
        position: relative
    }

    .tab-holder .tab .age {
        display: block;
        fill: #000;
        height: 3.75vw
    }

    .tab-holder .tab.tab1 .age {
        width: 11.5625vw
    }

    .tab-holder .tab.tab2 .age {
        width: 12.03125vw
    }

    .tab-holder .tab.tab3 .age {
        width: 12.03125vw
    }

    .tab-holder .tab.tab4 .age {
        width: 11.09375vw
    }

    .tab-holder .tab.active {
        position: relative;
        background-color: #9c162e;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease
    }

    .tab-holder .tab.active .age {
        fill: #fff
    }

    .tab-holder .tab.active:before {
        content: "";
        display: block;
        margin: auto;
        width: 2.1875vw;
        height: 1.25vw;
        background-image: url("../img/icon-arrow-bottom-white.svg");
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2.34375vw
    }

    .section-history .section--inner {
        width: 78.125vw;
        padding: 0;
        margin: auto;
        margin-bottom: 21.875vw
    }

    .section-history .tab-content {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        -webkit-transition: opacity 1.0s 0.2s ease;
        transition: opacity 1.0s 0.2s ease
    }

    .section-history .tab-content .box-1999:before,
    .section-history .tab-content .box-2009:before,
    .section-history .tab-content .box-2014-01:before,
    .section-history .tab-content .box-2017-01:before {
        content: "";
        display: block;
        width: 4.6875vw;
        height: 2.34375vw;
        background-image: url("../img/icon-arrow-bottom.svg");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        left: -1.875vw
    }

    .section-history .tab-content.n2 .pic,
    .section-history .tab-content.n3 .pic {
        background-color: #fff
    }

    .section-history .tab-content.active {
        opacity: 1;
        visibility: visible;
        position: relative;
        top: 0
    }

    .section-history .history-box {
        padding-bottom: 18.75vw;
        padding-left: 6.25vw;
        border-left: 2px solid #999
    }

    .section-history .history-box.box-1999,
    .section-history .history-box.box-2009,
    .section-history .history-box.box-2014-01,
    .section-history .history-box.box-2017-01 {
        padding-top: 7.8125vw
    }

    .section-history .age {
        margin-bottom: 3.125vw;
        padding-bottom: 3.125vw;
        padding-left: 1.5625vw;
        border-bottom: 2px solid #999;
        position: relative
    }

    .section-history .age:before,
    .section-history .age:after {
        content: "";
        display: block;
        position: absolute
    }

    .section-history .age:before {
        width: 1.875vw;
        height: 1.875vw;
        background-color: #000;
        left: -7.1875vw;
        bottom: 2.96875vw;
        z-index: 1
    }

    .section-history .age:after {
        height: 2px;
        width: 6.875vw;
        background-color: #999;
        -webkit-transform: skewY(30deg);
        transform: skewY(30deg);
        left: -6.25vw;
        bottom: 1.5625vw
    }

    .section-history .age.pink:before,
    .section-history .age.pink:after {
        background-color: #e274a1
    }

    .section-history .age.pink {
        border-bottom: 2px solid #e274a1
    }

    .section-history .age.age-1999 img {
        width: 19.84375vw
    }

    .section-history .age.age-2001 img {
        width: 19.375vw
    }

    .section-history .age.age-2003 img {
        width: 21.25vw
    }

    .section-history .age.age-2005 img {
        width: 21.40625vw
    }

    .section-history .age.age-2006 img {
        width: 21.09375vw
    }

    .section-history .age.age-2007 img {
        width: 21.25vw
    }

    .section-history .age.age-2008 img {
        width: 21.40625vw
    }

    .section-history .age.age-2009 img {
        width: 21.5625vw
    }

    .section-history .age.age-2010 img {
        width: 20.15625vw
    }

    .section-history .age.age-2011 img {
        width: 17.8125vw
    }

    .section-history .age.age-2012 img {
        width: 20.15625vw
    }

    .section-history .age.age-2013 img {
        width: 20.15625vw
    }

    .section-history .age.age-2014 img {
        width: 20.9375vw
    }

    .section-history .age.age-2015 img {
        width: 20.78125vw
    }

    .section-history .age.age-2016 img {
        width: 20.625vw
    }

    .section-history .age.age-2017 img {
        width: 20.15625vw
    }

    .section-history .age.age-2018 img {
        width: 20.15625vw
    }

    .section-history .age.age-2019-01 img {
        width: 20vw
    }

    .section-history .age.age-2019-02 img {
        width: 20vw
    }

    .section-history .age.age-2022 img {
        width: 20vw
    }

    .section-history .info-box {
        padding-left: 1.5625vw;
        margin-bottom: 4.6875vw
    }

    .section-history .info-box .text {
        display: block;
        font-size: 3.4375vw;
        line-height: 1.72727
    }

    .section-history .info-box .text-note {
        font-size: 3.125vw;
        line-height: 1.7
    }

    .section-history .tab-content .history-box .pic {
        background-color: transparent
    }

    .section-history .pic {
        width: 70.3125vw;
        margin-left: auto
    }

    .section-history .pic .item-type {
        text-align: center;
        margin-top: 3.125vw
    }

    .section-history .pic .item-type .icon {
        display: inline-block
    }

    .section-history .icon-new {
        display: block;
        width: 10.625vw;
        margin: 4.6875vw auto 3.125vw
    }

    .section-history .box-2005 .item-type,
    .section-history .box-2008 .item-type,
    .section-history .box-2017-02 .item-type,
    .section-history .box-2018-01 .item-type {
        margin-top: .46875vw
    }

    .section-history .box-2006 .item-type,
    .section-history .box-2007 .item-type {
        margin-top: 3.125vw
    }

    .section-history .box-2017-01 .item-type {
        margin-top: -1.5625vw
    }

    .section-history .box-2018-02 .item-type {
        margin-top: 4.0625vw
    }

    .section-history .box-2019-02 .item-type {
        margin-top: 1.25vw
    }
}