@charset "utf-8";
/* CSS Document */
/*================================================
 *  画面遷移時フェードイン
 ================================================*/
main {
	animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}



/*================================================
 *  ローディング画面
 ================================================*/
#js-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #272727;
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 8rem;
  opacity: 1;
  transition: opacity 1s ease-out;
  z-index: 999;
  line-height: 0.5;
    overflow: hidden;
}
#js-countup-year {
  font-size: 16rem;
}
#js-count-up {
  text-align: center;
}
/*================================================
 *  マルヒロ50th
 ================================================*/
.kv-50th {
    position: relative;
    height: 80vh;
}
@media screen and (min-width:1200px) {
    .kv-50th {
        height: 100vh
    }
}
.kv-50th .main-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    width: 90%;
    text-align: center;
}


@media screen and (min-width:1025px) {
    .kv-50th .main-copy {
        max-width: 1000px;
        width: 90%;
    }
}

@media screen and (min-width:1200px) {
    .kv-50th .main-copy {
        max-width: 1000px;
    }
}

img.histoty_kv_copy {
    width: 100%;
}
.kv-50th img.logo-50th {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
}
.kv-50th img.period {
    display: block;
    margin: 0px auto;/*16px auto 0 auto*/
    max-width: 380px;
    width: 100%;
}



@media screen and (min-width:1025px) {
    .kv-50th img.logo-50th {
        max-width: 640px;
    }
    .kv-50th img.period {
        max-width: 600px;
    }
}
.intro-animation-area {
    padding: 24px 0;
    overflow: hidden;
    z-index: -1;
}
.intro-animation-wrap {
    display: flex;
    overflow: hidden;
}
.intro-animation-wrap:not(:first-child) {
    margin-top: 4%;
}
@media screen and (min-width:1200px) {
    .intro-animation-wrap:not(: first-child) {
        margin-top: 4vh;
    }
}
.intro-animation-list {
    align-items: center;
    display: flex;
    list-style: none;
    padding: 0
}
.intro-animation-item {
    width: calc(100vw / 3);
}
@media screen and (min-width:1200px) {
    .intro-animation-item {
        width: calc(100vw / 6);
    }
}
.intro-animation-item > img {
    width: 100%;
    max-height: 160px;
    max-width: 240px;
    object-fit: contain;
}
@media screen and (min-width:1200px) {
    .intro-animation-item > img {
        max-height: 180px;
        height: 100%;
        max-width: 320px;
        width: 100%;
    }
}
/* animation */
.intro-animation-list__left {
    animation: intro-animation-list__left 20s infinite linear 0.5s both;
}
@keyframes intro-animation-list__left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.intro-animation-list__right {
    animation: intro-animation-list__right 20s infinite linear 0.5s both;
}
@keyframes intro-animation-list__right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
.kv-50th img.intro_head_bg {
    position: absolute;
    bottom: 0;
    left: 0;
}


/* マルヒロ50thごあいさつ
----------------------------------------*/
.kv-50th-intro {
    background: #b8e8ff;
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 80px;
    padding: 80px 0 80px 0;
}
.kv-50th-intro h2 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    margin-bottom: 40px;
}
.kv-50th-intro h2 {
    font-size: 2.4rem;
    margin-bottom: 24px;
}
.kv-50th-intro h2 span {
    font-weight: 600;
    letter-spacing: 0.1em;
}
.kv-50th-intro p {
    line-height: 2;
}

.kv-50th-intro .number{
    font-family:'Crimson Text', serif;
    font-weight: 500;
    font-size: 4rem;
}

@media (min-width:600px) {
    .kv-50th-intro h2 {
        font-size: 3.2rem;
    }
}
@media (min-width:1025px) {
    .kv-50th-intro {
        background-size: cover;
        padding: 80px 0 160px 0;
    }
    .kv-50th-intro h2 {
        font-size: 3.2rem;
        margin-bottom: 40px;
    }
    .kv-50th-intro p {
        max-width: 860px;
        margin: auto;
    }
}
/* マルヒロヒストリー
----------------------------------------*/
.history-copy > h2, .history-copy > h3, .history-copy > h3 span, .history-box.year2024 > p {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    text-align: center;
}
.history-copy > h2 {
    color: #1399DB;
    font-size: 9vw;
    margin-bottom: 24px;
}
.history-copy > h3 {
    font-size: 6.5vw;
    margin-bottom: 40px;
}
@media (min-width:600px) {
    .history-copy > h2 {
        font-size: 4rem;
    }
    .history-copy > h3 {
        font-size: 3.2rem;
    }
}
@media (min-width:1025px) {
    .history-copy > h2 {
        color: #1399DB;
        font-size: 6.4rem;
        margin-bottom: 40px;
    }
    .history-copy > h3 {
        font-size: 4rem;
        margin-bottom: 80px;
    }
}
.history-box {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
@media (min-width:1025px) {
    .history-box {
        margin-bottom: 80px;
    }
}
/* 和暦 */

@media (max-width:1024px) {
    .jp-calendar-sp{
        display: inline-block;
        margin-bottom: 24px;
        color: #1399DB;
        font-size: 2rem;
        font-weight: 500;
    }
    
    .history .jp-calendar {
        display: none;
    }
}
@media (min-width:1025px) {
    .history .jp-calendar-sp{
        display: none;
    }
    .history .jp-calendar {
        color: #1399DB;
        font-size: 2.4rem;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-align: center;
        height: auto;
        margin: auto 8px auto 0;
        padding-top: 64px;
        width: 32px;
    }
    .history .jp-calendar > span {
        display: inline-block;
        text-combine-upright: all;
    }
}
.event-area {
    border-left: solid 4px #1399DB;
    margin-left: 24px;
    padding: 0 0 40px 25px;
    position: relative;
}
.event-area::before {
    background: #ffffff;
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    height: 60px;
    width: 40px;
}
@media (min-width:1025px) {
    .event-area {
        margin-left: 0;
        padding-left: 24px;
    }
    .history-box:not(:first-child) .event-area {
        flex: 1;
    }
}
@media (max-width:1024px) {
    .event-area .text-area p {
        margin-bottom: 24px;
    }
}
@media (min-width:1025px) {
    .event-area .text-area {
        margin-right: 80px;
    }
}
.history-box .year {
    margin-bottom: 24px;
    position: relative;
}
.history-box .year::before {
    background: #fff;
    border: solid 4px #1399DB;
    border-radius: 100vh;
    content: "";
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -40px;
    height: 16px;
    width: 16px;
}
.history-box .year img {
    object-fit: contain;
    max-width: 240px;
}
@media (min-width:1025px) {
    .history-box .year{
        margin-bottom: 40px;
    }
    .history-box .year::before {
        left: -47px;
        height: 32px;
        width: 32px;
    }
    .history-box .year img {
        max-width: 320px;
    }
}
/* 月 */
.event-area .month {
    align-content: center;
    color: #ffffff;
    margin-bottom: 16px;
    margin-left: 16px;
    position: relative;
    text-align: center;
    height: 41px;
    width: 120px;
    z-index: 1;
    font-size: 2rem;
}
.event-area .month::before {
    background-color: #1399DB;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: skewX(-30deg);
    z-index: -1;
}
@media (min-width:1025px) {
    /* 月 */
    .event-area .month {
        font-size: 2.4rem;
        margin-bottom: 24px;
        height: 51px;
        width: 160px;
    }
}
.history-box .photo img {
    margin-bottom: 8px;
}
@media (min-width:1025px) {
    .history-box .photo {
        max-width: 400px;
    }
}
/* 1971年 */
.year1971 .year {
    background: #1399DB;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    padding: 6% 16%;
    margin-left: -12%;
}
@media (max-width:1024px) {
    .year1971 .year img {
        max-width: 160px;
        width: 64%;
        object-fit: contain;
        height: 80px;
        font-size: 16px;
    }
}
@media (min-width:1025px) {
    .year1971 .year {
        padding: 40px 88px;
        margin-left: -80px;
    }
}
.year1971 .year span {
    color: #ffffff;
    font-size: 4vw;
    margin-right: 4vw;
}

@media (min-width:600px) {
    .year1971 .year span {
        font-size: 2.4rem;
    }


}
@media (min-width:1025px) {
    .year1971 .year span {
        font-size: 4rem;
        margin-right: 40px;
    }
}
.history-box.year1971 .year::before {
    display: none;
}
.year1971 .event-area .flex:first-child {
    position: relative;
}
@media (min-width:1025px) {
    .year1971 .event-area .flex:first-child .photo {
        position: absolute;
        top: 24%;
        right: -28vh;
        max-width: 640px;
        width: 64%;
        z-index: -1;
    }
}
@media (max-width:1024px) {
    .year1971 .event-area .flex:last-child {
        flex-direction: column;
    }
}
@media (min-width:1025px) {
    .year1971 .event-area .flex:last-child {
        align-items: center;
    }
}
/* 2021年 */
.year2021 {
    padding: 80px 0;
}

.year2021 .event-area::before {
    background: #EFF9FF;
}


.history-box.year2021 .year::before{
    background: #EFF9FF;
}

.year2021 .event-area .flex{
    align-content: center;
}



.history-box.year2021 .photo{
    margin: auto;
    max-width: 400px;
    width: 100%;
    
}

.history .year2021 .event-area .flex .photo img{
    width: 100%;
}

/* 2024年 */
.history-box.year2024 .event-area {
    margin-bottom: 24px;
}
.history-box.year2024 > p {
    padding-bottom: 160px;
    text-align: left;
    width: 100%;
}
@media (max-width:1024px) {
    .history-box.year2024 > p {
        margin-left: 0;
        padding-left: 0;
        font-size: 6.4vw;
    }
}
@media (min-width:1025px) {
    .history-box.year2024 .event-area {
        margin-bottom: 40px;
    }
    .history-box.year2024 > p {
        font-size: 4.8rem;
    }
}
.history-wrap:last-child {
    background: url("../corporate/img/history_bg.jpg")no-repeat;
    background-position: right bottom;
    background-size: 140%;
    margin-bottom: -240px;
    padding-bottom: 160px;
}
@media (min-width:1025px) {
    .history-wrap:last-child {
        background-size: 110vw;
        margin-bottom: -320px;
        padding-bottom: 160px;
    }
}