
/*---------------------------------
  about-mv-area
---------------------------------*/
.about-mv-area {
    position: relative;
    width: 100%;
    display: block;
    background-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.75) url(../img/about-mv-bg.png) center center / cover;
    padding: 230px 0 200px;
    text-align: center;
}

.mv-logo {
    text-align: center;
}

.mv-logo img {
    width: 400px;
    height: auto;
    margin: 0 0 25px;
}

.about-mv-area .txt {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 6px 0;
    margin: 0 auto 80px;
    letter-spacing: .1em;
    /* color: #575757; */
    display: block;
    width: 200px;
    /* border: solid 1px #dfdcdc; */
    /* background: #fff; */
    border-radius: 40px;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, .25); */

}

.about-mv-area h2 {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 50px;
    letter-spacing: .05em;
}

.about-mv-area h3 {
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .05em;
    color: #882235;
}

.about-mv-area h3 span {
    font-size: 1.8rem;
}


@media screen and (max-width: 768px){
    .about-mv-area {
        padding: 190px 20px 100px;
    }
    .mv-logo img {
        width: 70%;
        max-width: 360px;
        height: auto;
        margin: 0 0 15px;
    }

    .about-mv-area .txt {
        font-size: 1.5rem;
        margin: 0 auto 40px;
        width: 180px;
    }

    .about-mv-area h2 {
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1.8;
        margin: 0 0 50px;
        letter-spacing: .1em;
    }

    .about-mv-area h3 {
        font-size: 2.8rem;
        line-height: 2;
    }

    .about-mv-area h3 span {
        font-size: 1.6rem;
    }

    
}


/*---------------------------------
  about-message-area
---------------------------------*/
.about-message-area {
    position: relative;
    width: 100%;
    display: block;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 120px 0;
    margin: 0 0;
    text-align:center;
    background: rgba(255, 255, 255, 0.75) url(../img/about-message-bg.png) bottom center / cover; 
}

.about-message-area .txt-box {
    width: 800px;
    margin: 0 auto;
    color: #0D0C0C;
}

.about-message-area .txt-box p {
    font-size: 1.8rem;
    line-height: 2.5;
     margin: 0 0 60px;
}

.about-message-area .img-box.img01 {
    width: 190px;
    height: auto;
    top: 125px;
    left: calc((100% - 1200px) / 2 - 70px);
}

.about-message-area .img-box.img02 {
    width: 190px;
    height: auto;
    top: 510px;
    right: calc((100% - 1200px) / 2 - 80px);
}

.about-message-area .img-box.img03 {
    width: 190px;
    height: auto;
    bottom: 110px;
    left: calc((100% - 1200px) / 2 - 80px);
}

.about-message-area .img-box img {
    filter: drop-shadow(0 0 8px rgba(79, 9, 9, 0.6));
}

@media screen and (max-width: 768px){
    .about-message-area {
    padding: 180px 40px 130px;
    margin: 0 0;
    text-align:left;
    }

    .about-message-area .txt-box {
        width: 100%;
        margin: 0 auto;
        color: #0D0C0C;
    }

    .about-message-area .txt-box p {
        font-size: 1.65rem;
        line-height: 2;
        margin: 0 0 40px;
        word-break:break-word !important;
    }

    .about-message-area .img-box.img01 {
        width: 210px;
        height: auto;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-message-area .img-box.img02 {
        width: 175px;
        height: auto;
        top: unset;
        bottom: 30px;
        left: calc(50% - 185px);
        right: unset;
        
    }

    .about-message-area .img-box.img03 {
        width: 175px;
        height: auto;
        bottom: 30px;
        left: calc(50% + 15px);
    }

    .about-message-area .img-box img {
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3));
    }
    
}



/*---------------------------------
  history-area
---------------------------------*/

.history-area {
    position: relative;
    width: 100%;
    display: block;
    background-color: rgba(255, 255, 255, 0.8);
    border-top: solid 1px #ddd;
    padding: 150px 0 120px;
    margin: 0 0;
    background-color: transparent;
    background-image: radial-gradient(circle at top left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at top right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at bottom left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at bottom right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at 50% 150%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at 50% -50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at -50% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)), radial-gradient(circle at 150% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3));
    background-size: calc(var(--shippo2) * 1.732) var(--shippo2);
}

.history-area h3 {
    font-size: 3rem;
    font-weight: bold;
    margin: 0 0 20px;
}

.history-area table {
    width: 100%;
    border-top: solid 1px #ddd;
    border-collapse:collapse;
    table-layout: fixed;
    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}

.history-area table tr th {
    padding: 25px 25px 25px 15px;
    width: 140px;
    border-bottom: unset;
    text-align: left;
    font-size: 1.5rem;
    /* color: #5c1622; */
    background: #eee;
}

.history-area table tr th.line {
    border-bottom: solid 1px #d4d3d3;
}

.history-area table tr td {
    padding: 25px;
    width:calc(100% - 140px);
    border-bottom: solid 1px #ddd;
    letter-spacing: .05em;
    font-size: 1.5rem;
    line-height: 1.5;
    word-break:break-word !important;
    background: #ffffff;
}

.history-area .txt01 {
    font-size: 1.5rem;
    letter-spacing: .05em;
    line-height: 1.8;
}

.history-area .txt01.line {
    padding: 20px 0;
    margin: 0 0 60px;
    border-top: solid 1px #d4d3d3;
    border-bottom: solid 1px #d4d3d3;
}

@media screen and (max-width: 768px){
    
    .history-area {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 60px 10px 80px;
        border-top: solid 1px #eee;
    }

    .history-area h3 {
        font-weight: bold;
        font-size: 2.3rem;
        margin: 0 0 10px;
    }

    .history-area table tr th {
        padding: 14px 8px 14px 8px;
        width: 68px;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: unset;
        /* color: #882235; */
    }

    .history-area table tr th.line {
        border-bottom: solid 1px #eeeeee;
        
    }

    .history-area table tr td {
        padding: 14px 10px 14px 10px;
        width:calc(100% - 60px);
        font-size: 1.3rem;
        line-height: 1.7;
        letter-spacing: .025em;
        font-weight: 600;
        border-bottom: solid 1px #eeeeee;
    }

    .history-area .txt01 {
        font-size: 1.4rem;
        line-height: 1.7;
    }

    .history-area .txt01.line {
        padding: 15px 0;
        margin: 0 0 50px;
        border-top: solid 1px #eeeeee;
        border-bottom: solid 1px #eeeeee;
    }

}

/*---------------------------------
 .marker {
---------------------------------*/

.marker {
    background:linear-gradient(transparent 80%, rgba(225, 191, 81, 0.7) 80%);
    font-weight: bold;
}

@media screen and (max-width: 768px){
    .marker {
        background:linear-gradient(transparent 80%, rgba(225, 191, 81, 0.7) 80%);
    }

}