@charset "UTF-8";

header { background-color:#fefefe; padding-top:60px; padding-bottom:40px; }

h1 { font-size:28px; font-weight: normal; text-indent: 0.5em; letter-spacing: 0.5em; margin:auto; text-align:center; padding-top:40px; position:relative; }
h1::before { content: ""; display: block; position: absolute; width:50px; height:37px; top:0; left:50%; transform: translateX(-50%); background:url("../img/icon_img01.png"); background-repeat: no-repeat; background-size: contain; }
h1::after { content: ""; display: none; }
@media (max-width:900px) {
    header { padding-top:50px; padding-bottom:30px; }
    h1 { font-size:21px; padding-top:26px; }
    h1::before { width:32px; }
}

div#main_img { position:relative; height:240px; z-index: -1; }
div#main_img::before { content: ''; position:fixed; width:100%; height:50vh; z-index: -1; top:0; background:url("../img/main_history.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat;  }
div#main_img::after { content: ''; display: block; position:absolute; left:0; bottom:-10px; width:100%; height: 20px; background: linear-gradient(to right, #cdf4f4, #99c2c4); }

@media (max-width:900px) {
    div#main_img { height:150px; }
    div#main_img::after { height:10px; bottom:-5px; }
}


div#logo_icon { position:fixed; left:30px; top:30px; width:35%; max-width:250px; z-index: 10000; }
div#logo_icon img { width:100%; }
@media (max-width:900px) {
    div#logo_icon { top:15px; left:20px; }
}

div#history_block { margin:auto; padding-top:10px; padding-bottom:100px; width:100%; position: relative; background:linear-gradient(to bottom, #fefefe 0%, #ecf4f4 30%, #cbe3e5 100%); }
div#history_area { width:84%; max-width:900px; margin:auto; padding:100px 100px 20px; background-color:#fafdff; border-radius: 2px; box-sizing: border-box; }
div.history_content { margin-bottom:100px; }
div.history_content > h2 { font-size:28px; font-weight: normal; letter-spacing: 0.3em; text-align:center; margin-bottom:40px; position:relative; }
div.history_content > h2::before, div.history_content > h2::after { content: ""; position:absolute; width:4em; height:1px; background-color:#333; top:49%; }
div.history_content > h2.line_l::before, div.history_content > h2.line_l::after { width:6em; }
div.history_content > h2::before { left:0; }
div.history_content > h2::after { right:0; }
div.history_content div.history_photo { margin:auto; margin-bottom:40px; text-align:center; }
div.history_content div.history_photo > img { width:84%; max-width:320px; height:auto; object-fit: cover; margin:auto; }
div.history_content div.history_txt > p { margin-bottom:15px; letter-spacing: 1px; line-height: 1.8; }
@media (max-width:900px) {
    div#history_area { padding:7%; }
    div.history_content { margin-bottom:60px; }
    div.history_content > h2 { font-size:18px; letter-spacing: 0.1em; margin-bottom:20px; }
    div.history_content > h2::before, div.history_content > h2::after { width:1em; }
    div.history_content > h2.line_l::before, div.history_content > h2.line_l::after { width:3em; }
    div.history_content div.history_photo { margin-bottom:20px; }
    div.history_content div.history_photo > img { width:70%; }
    div.history_content div.history_txt > p { margin-bottom:10px; line-height: 1.6; }
}