@charset "UTF-8";

html {
    scroll-behavior: smooth;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
a {
  transition: all 0.3s ease;
}
a:hover {
  opacity: 0.7;
}
.wrapper {
    max-width: 663px;
    padding: 0 20px;
    margin: 0 auto;
}
.btn {
  text-align: center;
}
.btn a {
  background-color: #E4002B;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  padding: 10px 50px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  position: relative;
}
.btn a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 20px;
  right: 22px;
}

.section-title {
  color: #E4002B;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 0.14em;
  margin-bottom: 80px;
  text-align: center;
}
.section-title span {
  border-bottom: solid 2px #E4002B;
  padding-bottom: 5px;
}

/*-------------------------------------------
MV
-------------------------------------------*/
.mv {
  margin-bottom: 40px;
}

/*-------------------------------------------
MOVIE
-------------------------------------------*/
#movie {
    margin-bottom: 80px;
}
#movie .movie {
  margin-bottom: 25px;
}
#movie .movie-title {
  color: #E4002B;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 60px 0 25px;
  text-align: center;
}

/*-------------------------------------------
PRODUCTS
-------------------------------------------*/
#products {
    margin-bottom: 80px;
}
#products .products-img {
    position: relative;
    margin-bottom: 60px;
}
#products .products-img .text {
    width: 100%;
    max-width: 374px;
    position: absolute;
    top: 50%;
    left: 67%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-align: justify;
}
#products .products-img .text span {
    color: #E4002B;
}
#products .point-title {
    max-width: 354px;
    margin: 0 auto 40px;
}
#products .point-box {
    display: flex;
    align-items: center;
    background-color: #FFF9DA;
    border-radius: 30px;
    color: #E4002B;
    padding: 7% 10%;
    margin-bottom: 25px;
}
#products .point-box .no {
    margin-right: 23px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}
#products .point-box .no .no-name {
    font-size: 18px;
    display: block;
    letter-spacing: 0.1em;
}
#products .point-box .no .no-num {
    font-size: 49px;
    display: block;
}
#products .point-box .point-box-title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}
#products .point-box .point-box-title span {
    font-size: 18px;
    margin-left: 10px;
}
#products .point-text {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 35px;
    text-align: justify;
}
#products .method-sub-title {
    color: #E4002B;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-align: center;
}
#products .method-title {
    max-width: 337px;
    margin: 0 auto 25px;
}
#products .method-text {
    color: #000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
}
#products .method-text span {
    color: #E4002B;
		font-weight: 400;
}
#products .method-about-box {
    border: solid 1px #E4002B;
    border-radius: 30px;
    padding: 7% 12%;
    margin-bottom: 25px;
}
#products .method-about-box .abount-box-title {
    color: #E4002B;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    text-align: center;
}
#products .method-about-box .about-box-text {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}
#products .method-about-box .about-img {
    display: flex;
    align-items: center;
}
#products .method-about-box .about-img .about-img-item {
    width: 45%;
    text-align: center;
}
#products .method-about-box .about-img .about-img-item .item-img {
    max-width: 196px;
    margin: 0 auto 20px;
}
#products .method-about-box .about-img .about-img-item:nth-child(2) {
    width: 10%;
}
#products .method-about-box .about-img .about-img-item .icon {
    max-width: 25px;
    margin: 0 auto 70px;
}
#products .method-about-box .about-img .about-img-item .item-text {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

/*-------------------------------------------
RECIPES
-------------------------------------------*/
#recipes .recipes-area {
    max-width: 1076px;
    margin: 0 auto;
}
#recipes .recipes-area .recipes-title {
    border-top: solid 1px #E4002B;
    border-bottom: solid 1px #E4002B;
    color: #E4002B;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 17px 0;
    margin-bottom: 25px;
    text-align: center;
}
#recipes .recipes-cm {
    display: block;
    margin-bottom: 50px;
}
#recipes .recipes-area {
    margin-bottom: 50px;
}
#recipes .recipes-area:last-child {
    margin-bottom: 0;
}
#recipes .recipes-area .recipes-list {
    display: flex;
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 25px;
}
#recipes .recipes-area .recipes-list li {
    width: calc((100% - 80px) / 3);
    max-width: 335px;
}
#recipes .recipes-text {
    background-color: #FFF9DA;
    color: #E4002B;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.6;
    padding: 13px 40px 13px 16px;
    position: relative;
}
#recipes .recipes-list.row2 .recipes-text {
    min-height: 50px;
}
#recipes .recipes-text::before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #E4002B;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#recipes .recipes-text::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    bottom: 19.5px;
    right: 21.5px;
}

/*-------------------------------------------
HISTORY
-------------------------------------------*/
#history .sbarstyle {
scrollbar-width: thin;
scrollbar-color: #e4002b #ffc4cf;
}

#history .sbarstyle::-webkit-scrollbar {
width: 8px;
height: 8px;
}

#history .sbarstyle::-webkit-scrollbar-thumb {
background-color: #e4002b;
}

#history .sbarstyle::-webkit-scrollbar-track {
background-color: #ffc4cf;
}

/*================*/
#history {
    position: relative;
    width: 100%;
    padding-bottom: 80px;
}

#history .title-area {
    position: absolute;
    left: 0;
    top: 310px;
}
#history .title-area .section-title {
    margin-bottom: 55px;
    text-align: left;
}
#history .title-area .title-area-text {
    color: #E4002B;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
#history .icon-scroll {
    max-width: 140px;
    cursor: pointer;
    position: absolute;
    top: 420px;
    right: 160px;
    z-index: 10;
}
#history .icon-scroll img {
    width: 100%;
}
#history .frame {
width: 100%;
height: 760px;
overflow-x: auto;
overflow-y: hidden;
}

#history .frame .timeline {
position: relative;
width: 5406px;
height: 100%;
}
#history .frame .timeline .skin {
position: absolute;
left: 380px;
top: 0;
width: 100%;
height: 100%;
background-image: url(../images/top/history/line.svg);
background-repeat: no-repeat;
background-position: 0 84%;
background-size: auto auto;
}

/*--------*/
#history .frame .timeline .year {
position: absolute;
width: 0;
height: 0;
color: #e4002b;
}

#history .frame .timeline .year.sizea {
top: 100px;
}

#history .frame .timeline .year.sizeb {
top: 430px;
}

#history .frame .timeline .year figure {
position: absolute;
left: 0;
top: 70px;
width: 170px;
height: 340px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
}

#history .frame .timeline .year .num {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}

#history .frame .timeline .year .num p {
line-height: 1;
white-space: nowrap;
}

#history .frame .timeline .year.sizea .num p {
font-size: 48px;
}

#history .frame .timeline .year.sizeb .num p {
font-size: 27px;
}

#history .frame .timeline .year .txt {
position: absolute;
left: 0;
width: 0;
height: 0;
color: #666;
}

#history .frame .timeline .year.sizea .txt {
top: 90px;
}

#history .frame .timeline .year.sizeb .txt {
top: 40px;
}

#history .frame .timeline .year .txt p {
line-height: 1.4;
font-size: 1.8rem;
font-weight: normal;
letter-spacing: 0.1em;
}
#history .frame .timeline .year.sizea .txt .link {
letter-spacing: 0;
font-weight: normal;
color: #e4002b;
position: relative;
}
#history .frame .timeline .year.sizea .txt .link:hover {
color: #e4002b;
}
#history .frame .timeline .year.sizea .txt .link:hover::after {
animation: arrow-button .3s ease;
}
#history .frame .timeline .year.sizea .txt .link:after {
display: inline-block;
content: '';
width: 5.63px;
height: 11.58px;
background: url(../images/common/arrow_red.svg) no-repeat right;
background-size: contain;
padding-left: 12px;
}

/*--------*/
#history .frame .timeline .year.y1991 {
left: 0;
}

#history .frame .timeline .year.y1991 figure {
left: 0;
background-image: url(../images/top/history/1991.png);
}

#history .frame .timeline .year.y1991 .num {
    left: 0;
}

#history .frame .timeline .year.y1991 .txt {
left: 190px;
}

#history .frame .timeline .year.y1991 .txt p {
width: 100px;
}

#history .frame .timeline .year.y1996 {
left: 610px;
}

#history .frame .timeline .year.y1996 figure {
left: -30px;
background-image: url(../images/top/history/1996.png);
}

#history .frame .timeline .year.y1996 .num {
left: -35px;
}

#history .frame .timeline .year.y1996 .txt {
left: 160px;
}

#history .frame .timeline .year.y1996 .txt p {
width: 180px;
}

#history .frame .timeline .year.y1997 {
left: 800px;
}

#history .frame .timeline .year.y1997 .num {
left: 0;
}

#history .frame .timeline .year.y1997 .txt {
left: 0;
}

#history .frame .timeline .year.y1997 .txt p {
width: 100px;
}

#history .frame .timeline .year.y1999 {
left: 1240px;
}

#history .frame .timeline .year.y1999 .num {
left: 0;
}

#history .frame .timeline .year.y1999 .txt {
left: 0;
}

#history .frame .timeline .year.y1999 .txt p {
width: 100px;
}

#history .frame .timeline .year.y2000 {
left: 1460px;
}

#history .frame .timeline .year.y2000 figure {
left: 0;
background-image: url(../images/top/history/2000.png);
}

#history .frame .timeline .year.y2000 .num {
left: -2px;
}

#history .frame .timeline .year.y2000 .txt {
left: 190px;
}

#history .frame .timeline .year.y2000 .txt p {
width: 165px;
}

#history .frame .timeline .year.y2001 {
left: 1680px;
}

#history .frame .timeline .year.y2001 .num {
left: 0;
}

#history .frame .timeline .year.y2001 .txt {
left: 0;
}

#history .frame .timeline .year.y2001 .txt p {
width: 130px;
}

#history .frame .timeline .year.y2002 {
left: 1900px;
}

#history .frame .timeline .year.y2002 figure {
left: 0;
background-image: url(../images/top/history/2002.png);
}

#history .frame .timeline .year.y2002 .num {
left: -2px;
}

#history .frame .timeline .year.y2002 .txt {
left: 188px;
}

#history .frame .timeline .year.y2002 .txt p {
width: 285px;
}

#history .frame .timeline .year.y2004 {
left: 2340px;
}

#history .frame .timeline .year.y2004 .num {
left: 0;
}

#history .frame .timeline .year.y2004 .txt {
left: 0;
}

#history .frame .timeline .year.y2004 .txt p {
width: 120px;
}

#history .frame .timeline .year.y2005 {
left: 2560px;
}

#history .frame .timeline .year.y2005 figure {
left: 0px;
background-image: url(../images/top/history/2005.png);
}

#history .frame .timeline .year.y2005 .num {
left: -2px;
}

#history .frame .timeline .year.y2005 .txt {
left: 180px;
}

#history .frame .timeline .year.y2005 .txt p {
width: 220px;
}

#history .frame .timeline .year.y2010 {
left: 3130px;
}

#history .frame .timeline .year.y2010 .num {
left: 2px;
}

#history .frame .timeline .year.y2010 .txt {
left: 4px;
}

#history .frame .timeline .year.y2010 .txt p {
width: 100px;
}

#history .frame .timeline .year.y2012 {
left: 3360px;
}

#history .frame .timeline .year.y2012 figure {
left: 5px;
background-image: url(../images/top/history/2012.png);
}

#history .frame .timeline .year.y2012 .num {
left: 3px;
}

#history .frame .timeline .year.y2012 .txt {
left: 180px;
}

#history .frame .timeline .year.y2012 .txt p {
width: 240px;
}

#history .frame .timeline .year.y2016 {
left: 3820px;
}

#history .frame .timeline .year.y2016 figure {
left: -10px;
background-image: url(../images/top/history/2016.png);
}

#history .frame .timeline .year.y2016 .num {
left: 0;
}

#history .frame .timeline .year.y2016 .txt {
left: 160px;
}

#history .frame .timeline .year.y2016 .txt p {
width: 310px;
}

#history .frame .timeline .year.y2022 {
left: 4510px;
}

#history .frame .timeline .year.y2022 figure {
left: 5px;
background-image: url(../images/top/history/2022.png);
}

#history .frame .timeline .year.y2022 .num {
left: 3px;
}

#history .frame .timeline .year.y2022 .txt {
left: 176px;
}

#history .frame .timeline .year.y2022 .txt p {
width: 220px;
}
#history .frame .timeline .year.y2026 {
left: 4960px;
}

#history .frame .timeline .year.y2026 figure {
left: 5px;
padding: 10px 0;
background-image: url(../images/top/history/2026.png);
background-size: 97.7%;
}

#history .frame .timeline .year.y2026 .num {
left: 3px;
}

#history .frame .timeline .year.y2026 .txt {
left: 176px;
}

#history .frame .timeline .year.y2026 .txt p {
width: 220px;
}

/*--------*/
#history .button {
position: absolute;
right: -120px;
bottom: 25px;
width: 64px;
height: 64px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}

#history .button.appear {
right: 25px;
}



/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 30px;
        margin-bottom: 50px;
    }

    /*-------------------------------------------
    MOVIE
    -------------------------------------------*/
    #movie .movie-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    /*-------------------------------------------
    PRODUCTS
    -------------------------------------------*/
    #products .products-img {
        display: flex;
        flex-direction: column-reverse;
        position: static;
    }
    #products .products-img .text {
        max-width: calc(100% - 40px);
        padding: 0 20px;
        margin-bottom: 20px;font-size: 16px;
        transform: none;
        position: static;
    }
    #products .point-title {
        width: 80%;
        margin: 0 auto 30px;
    }
    #products .point-box .no .no-name {
        font-size: 14px;
    }
    #products .point-box .no .no-num {
        font-size: 38px;
    }
    #products .point-box .point-box-title {
        font-size: 22px;
    }
    #products .point-box .point-box-title span {
        font-size: 14px;
        margin-left: 0;
    }
    #products .method-text {
        text-align: justify;
			color: #000;
    }
		#products .method-text span {
       color: #E4002B;
    }
    #products .method-about-box {
        padding: 50px 20px;
    }
    #products .method-about-box .about-box-text {
        text-align: justify;
    }
    #products .method-about-box .about-img .about-img-item {
        width: 43%;
    }
    #products .method-about-box .about-img .about-img-item:nth-child(2) {
        width: 14%;
    }
    #products .method-about-box .about-img .about-img-item .icon {
        max-width: 16px;
        margin: 0 auto 60px;
    }
    #products .method-about-box .about-img .about-img-item .item-text {
        font-size: 12px;
        line-height: 1.8;
    }

    /*-------------------------------------------
    RECIPES
    -------------------------------------------*/
    #recipes {
        margin-bottom: 80px;
    }
    #recipes .recipes-area {
        padding: 0 20px;
    }
    #recipes .recipes-area .recipes-list {
        flex-direction: column;
        padding: 0;
    }
    #recipes .recipes-area .recipes-list li {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /*-------------------------------------------
    HISTORY
    -------------------------------------------*/
    #history {
        position: relative;
        width: calc(100% - 10vw);
        padding:0 5vw 20vw 5vw;
        border-bottom: solid 1px #ccc;
    }
    #history .icon-scroll {
        max-width: 100px;
        top: 150px;
        right: 20px;
    }
    #history .frame {
        width: 100%;
        height: 125.3vw;
        margin-top: 60px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #history .frame .timeline {
        position: relative;
        width: 860vw;
        height: 100%;
    }

    #history .title-area {
        position: static;
        margin-bottom: 20px;
    }
    #history .title-area .section-title {
        margin-bottom: 45px;
        text-align: center;
    }

    #history .frame .timeline .skin {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/top/history/line.svg);
        background-repeat: no-repeat;
        background-position: 0 92%;
        background-size: 100% auto;
    }

    /*--------*/
    #history .frame .timeline .year {
        position: absolute;
        width: 0;
        height: 0;
        color: #e4002b;
    }

    #history .frame .timeline .year.sizea {
        top: 6vw;
    }

    #history .frame .timeline .year.sizeb {
        top: 82vw;
        bottom: 44vw;
    }

    #history .frame .timeline .year figure {
        position: absolute;
        left: 0;
        top: 20vw;
        width: 34.4vw;
        height: 71.7vw;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
    }

    #history .frame .timeline .year .num {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
    }

    #history .frame .timeline .year .num p {
        line-height: 1;
        white-space: nowrap;
    }

    #history .frame .timeline .year.sizea .num p {
        font-size: 12.8vw;
    }

    #history .frame .timeline .year.sizeb .num p {
        font-size: 6.4vw;
    }

    #history .frame .timeline .year .txt {
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        color: #666;
    }
    #history .frame .timeline .year.sizea .txt .link {
        letter-spacing: 0;
        font-weight: normal;
        color: #e4002b;
        position: relative;
    }
    /* #history .frame .timeline .year.sizea .txt .link:after {
        content: "";
        transform: rotate(45deg);
        display: inline-block;
        width: 6px;
        height: 6px;
        vertical-align: 3px;
        border-top: 1px solid #e4002b;
        border-right: 1px solid #e4002b;
        margin-left: 3px;
    } */
    #history .frame .timeline .year.sizea .txt {
        top: 26.6vw;
    }

    #history .frame .timeline .year.sizeb .txt {
        top: 7vw;
    }

    #history .frame .timeline .year .txt p {
        line-height: 1.4;
        font-size: 3.73vw;
        margin-top: 2vw;
        font-weight: normal;
    }

    #history .frame .timeline .year .txt p br.pc {
        display: none;
    }

    /*--------*/
    #history .frame .timeline .year.y1991 {
        left: 0;
    }

    #history .frame .timeline .year.y1991 figure {
        left: 0;
        background-image: url(../images/top/history/1991.png);
    }

    #history .frame .timeline .year.y1991 .num {
        left: 0;
    }

    #history .frame .timeline .year.y1991 .txt {
        left: 41.3vw;
    }

    #history .frame .timeline .year.y1991 .txt p {
        width: 15vw;
    }

    #history .frame .timeline .year.y1996 {
        left: 103vw;
    }

    #history .frame .timeline .year.y1996 figure {
        left: -11vw;
        background-image: url(../images/top/history/1996.png);
    }

    #history .frame .timeline .year.y1996 .num {
        left: -12vw;
    }

    #history .frame .timeline .year.y1996 .txt {
        left: 26vw;
    }

    #history .frame .timeline .year.y1996 .txt p {
        width: 41vw;
    }

    #history .frame .timeline .year.y1997 {
        left: 162vw;
    }

    #history .frame .timeline .year.y1997 .num {
        left: -36vw;
    }

    #history .frame .timeline .year.y1997 .txt {
        left: -36vw;
    }

    #history .frame .timeline .year.y1997 .txt p {
        width: 19vw;
    }

    #history .frame .timeline .year.y1999 {
        left: 124vw;
    }

    #history .frame .timeline .year.y1999 .num {
        left: 71vw;
    }

    #history .frame .timeline .year.y1999 .txt {
        left: 71vw;
    }

    #history .frame .timeline .year.y1999 .txt p {
        width: 19vw;
    }

    #history .frame .timeline .year.y2000 {
        left: 246vw;
    }

    #history .frame .timeline .year.y2000 figure {
        left: -16vw;
        background-image: url(../images/top/history/2000.png);
    }

    #history .frame .timeline .year.y2000 .num {
        left: -16vw;
    }

    #history .frame .timeline .year.y2000 .txt {
        left: 20vw;
    }

    #history .frame .timeline .year.y2000 .txt p {
        width: 33vw;
    }

    #history .frame .timeline .year.y2001 {
        left: 280vw;
    }

    #history .frame .timeline .year.y2001 .num {
        left: -15vw;
    }

    #history .frame .timeline .year.y2001 .txt {
        left: -15vw;
    }

    #history .frame .timeline .year.y2001 .txt p {
        width: 22vw;
    }

    #history .frame .timeline .year.y2002 {
        left: 310vw;
    }

    #history .frame .timeline .year.y2002 figure {
        left: -11vw;
        background-image: url(../images/top/history/2002.png);
    }

    #history .frame .timeline .year.y2002 .num {
        left: -11vw;
    }

    #history .frame .timeline .year.y2002 .txt {
        left: 31vw;
    }

    #history .frame .timeline .year.y2002 .txt p {
        width: 38vw;
    }

    #history .frame .timeline .year.y2004 {
        left:377vw;
    }

    #history .frame .timeline .year.y2004 .num {
        left: -8vw;
    }

    #history .frame .timeline .year.y2004 .txt {
        left: -8vw;
    }

    #history .frame .timeline .year.y2004 .txt p {
        width: 25vw;
    }

    #history .frame .timeline .year.y2005 {
        left: 403vw;
    }

    #history .frame .timeline .year.y2005 figure {
        left: 1vw;
        background-image: url(../images/top/history/2005.png);
    }

    #history .frame .timeline .year.y2005 .num {
        left: 0vw;
    }

    #history .frame .timeline .year.y2005 .txt {
        left: 36vw;
    }

    #history .frame .timeline .year.y2005 .txt p {
        width: 40vw;
    }

    #history .frame .timeline .year.y2010 {
        left: 500vw;
    }

    #history .frame .timeline .year.y2010 .num {
        left: -6vw;
    }

    #history .frame .timeline .year.y2010 .txt {
        left: -6vw;
    }

    #history .frame .timeline .year.y2010 .txt p {
        width: 19vw;
    }

    #history .frame .timeline .year.y2012 {
        left: 540vw;
    }

    #history .frame .timeline .year.y2012 figure {
        left: -10vw;
        background-image: url(../images/top/history/2012.png);
    }

    #history .frame .timeline .year.y2012 .num {
        left: -9vw;
    }

    #history .frame .timeline .year.y2012 .txt {
        left: 25vw;
    }

    #history .frame .timeline .year.y2012 .txt p {
        width: 30vw;
    }

    #history .frame .timeline .year.y2016 {
        left: 603vw;
    }

    #history .frame .timeline .year.y2016 figure {
        left: 0vw;
        background-image: url(../images/top/history/2016.png);
    }

    #history .frame .timeline .year.y2016 .num {
        left: 0;
    }

    #history .frame .timeline .year.y2016 .txt {
        left: 35vw;
    }

    #history .frame .timeline .year.y2016 .txt p {
        width: 44vw;
    }

    #history .frame .timeline .year.y2022 {
        left: 717vw;
    }

    #history .frame .timeline .year.y2022 figure {
        left: -6vw;
        background-image: url(../images/top/history/2022.png);
    }

    #history .frame .timeline .year.y2022 .num {
        left: -6vw;
    }

    #history .frame .timeline .year.y2022 .txt {
        left: 27vw;
    }

    #history .frame .timeline .year.y2022 .txt p {
        width: 36vw;
    }
    #history .frame .timeline .year.y2026 {
        left: 785vw;
    }
    #history .frame .timeline .year.y2026 .txt {
        left: 37vw;
    }

    /*--------*/
    #history .button {
        position: absolute;
        right: -80px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: 0 5vw 0 0;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }

    #history .button.appear {
        right: 10px;
    }
}