@charset "UTF-8";

h1 {
    font-family: 'Yuji Mai', serif;
    font-size: 56px;
    text-align: center;
    margin-bottom: 100px;
}

h2 {
    font-size: 20px;
    text-align: center;
    margin: 0 20px 20px 20px;
    line-height: 2em;
    border-bottom: 1px solid #EBE300;
}

section {
    margin-bottom: 200px;
}

.logo {
    width: 100px;
}

.logo img {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 50px;
}

.menu {
    position: absolute;
    top: 160px;
    left: 50px;
}

.menu li {
    width: 100px;
    padding-bottom: 20px;
}

body {
    position: relative;
    font-family: 'Kaisei HarunoUmi', serif;
}

header {
    position: fixed;
}

main {
    position: absolute;
    left: 200px;
    height: 2000px;
}

footer {
    position: absolute;
    left: 200px;
    top: 2200px;
}

.top-image img {
    width: 100%;
    margin-bottom: 100px;
}

.section-introduction p {
    padding: 0 30px;
    margin-bottom: 50px;
    line-height: 2em;
}

.section-news {
    padding: 0 30px;
}

.title {
    margin-bottom: 60px;
}

.news-tittle {
    background-color: #e94709;
    padding: 0 5px;
    max-width: 600px;
    margin: 0 auto;
}

.news-warpper {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.news-warpper dt::after {
    content: "・・・・";
}

.footer-link ul {
    display: flex;
    margin-left: 200px;
}

.footer-link li {
    list-style: none;
}

.footer-image {
    max-width: 500px;
    height: auto;
}

.footer-image img {
    width: 90%;
}

.footer-image {
    position: relative;
    /*テキストの基点となる位置を定義*/
}

.footer-image span.mask {
    position: relative;
    /*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.footer-image span.mask::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    opacity: 0;
    /*透過0*/
    transition: .3s ease-in-out;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
    background: #333;
    /*背景色*/
    width: 90%;
    height: 100%;
}

.footer-image:hover span.mask::before {
    /*hoverした時の変化*/
    opacity: 0.5;
    /*透過なしに変化*/
    transform: translateY(0);
}

.footer-image span.cap {
    /*画像の上のテキスト*/
    position: absolute;
    opacity: 0;
    /*透過0*/
    transition: .5s ease-in-out;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    z-index: 3;
    /*テキストを前面に出す*/
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    /*テキストの位置中央指定*/
    color: #fff;
    /*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;
    /*行の高さを1.5にする*/
}

.footer-image:hover span.cap {
    /*hoverした時の変化*/
    opacity: 1;
    /*透過なしに変化*/
}

.footer-image1 {
    max-width: 500px;
    height: auto;
}

.footer-image1 img {
    width: 90%;
}

.footer-image1 {
    position: relative;
    /*テキストの基点となる位置を定義*/
}

.footer-image1 span.mask {
    position: relative;
    /*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.footer-image1 span.mask::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    opacity: 0;
    /*透過0*/
    transition: .3s ease-in-out;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
    background: #333;
    /*背景色*/
    width: 90%;
    height: 100%;
}

.footer-image1:hover span.mask::before {
    /*hoverした時の変化*/
    opacity: 0.5;
    /*透過なしに変化*/
    transform: translateY(0);
}

.footer-image1 span.cap {
    /*画像の上のテキスト*/
    position: absolute;
    opacity: 0;
    /*透過0*/
    transition: .5s ease-in-out;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    z-index: 3;
    /*テキストを前面に出す*/
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    /*テキストの位置中央指定*/
    color: #fff;
    /*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;
    /*行の高さを1.5にする*/
}

.footer-image1:hover span.cap {
    /*hoverした時の変化*/
    opacity: 1;
    /*透過なしに変化*/
}

.big-font {
    font-size: 28px;
}