@charset "utf-8";

.flex{ display: flex; justify-content: space-between; flex-wrap: wrap;}

.history{ padding-top: 100px; background: #f5f5f5; padding-bottom: 200px;}

h2{ font-size: 5rem; font-weight: bold; max-width: 1200px; width: calc(100% - 50px); line-height: 1.5; margin:0 auto 30px;}
h2 span{ display: block; font-size: clamp(1.6rem,1.5vw,1.8rem); }
h4{ font-size: 1.6rem; line-height: 1.5; margin-top: -0.75rem;}

.mv{ background: #000; color: #fff; text-align: center; padding: 50px 7%; margin-bottom: 50px;}
.mv h3{ font-size: clamp( 3rem,4.17vw,8rem); line-height: 1;}
.mv .bigTxt{ display: flex; align-items: center; font-size: clamp( 2rem,2.5vw,4.8rem); margin: 1em auto 1em; line-height: 1; max-width: 786px; background: #000; z-index: 1;}
.mv .bigTxt::before, .mv .bigTxt::after{ content: ""; height: 1px; flex-grow: 1; background-color: #fff;}
.mv .bigTxt::before{ margin-right: 1em;}
.mv .bigTxt::after{ margin-left: 1em;}
.mv .txtBox p{ margin-bottom: 3rem; font-size: clamp(1.4rem,1vw,2.1rem);}

.tableBox{ width: 62.83%}
.cellBox{ border-top: 1px solid #000; padding: 25px 0 ;}
.cellBox:last-of-type{ border-bottom: 1px solid #000;}
.cellBox dt{ width: 4rem; margin-right: 12%; font-weight: bold;}
.cellBox dd{ text-align: left; margin: 0 auto 0 0 ;}

@media (max-width: 1400px){
    .history{ padding:100px 0 100px;}
   h2{ font-size: 4.5rem; margin-bottom: 50px;}
}

@media (max-width: 768px){

    .history{ padding:70px 0 50px;}
    h2{ font-size: clamp( 2rem , 6.5vw, 5rem); margin-bottom: 30px;  }
    h3{ font-size: 5vw; }

    .mv{ padding: 30px 7% 20px; }
    .mv .txtBox p{ margin-bottom: 2rem; font-size: 3vw;}
    
    .tableBox{ width: 100%}
    .cellBox{ padding: 10px 0 ;}
    .cellBox dt{ width: 100%; }
    .cellBox dd{ text-align: left; margin: 0 auto 0 0 ;}

}