@charset "utf-8";

/* index.html専用のデザイン */

@font-face {
  font-family: 'Noto Sans'; /* 任意のフォント名を指定 */
  src: url('/font/notosans.ttf') format('truetype'); /* ファイルの場所と形式を指定 */
  font-weight: normal;
  font-style: normal;
}
/* ロゴアニメーション */
#splash {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: #9af6c5;
    text-align: center;
    color: #fff;
    opacity: 0;
}
#splash.onLoaded {
    opacity: 1;
}
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#splash_logo img {
    width: 80%;
}
.fadeUpLogo {
    animation: logo-fadeUpAnime 0.5s forwards;
    opacity: 0;
}

/* style_new.cssの規定値を書き換える */
.top-image-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
}
.top-image {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-image: url(../image/top.webp);
    filter: contrast(0.5);
    background-position: center center;
    background-size: cover;
    object-fit: cover;
    animation: zoomUp 5s ease forwards;
}
.top-caption-main, .top-caption-sub {
    position: absolute;
    margin: 0 auto;
    left: 5%;
    color: white;
    font-family: 'Noto Sans';
    text-shadow: 2px 2px 3px #888;
}
.top-caption-main {
    top: 20%;
    font-size: 100px;
    font-weight: bold;
    line-height: 1.2;
}
.top-caption-main span {
    position: absolute;
    opacity: 0;
    animation: slideSideFade 1s ease forwards;
    transform: translateX(-50%);
}
.top-caption-main span#row1 {
    animation-delay: 1.5s;
}
.top-caption-main span#row2 {
    animation-delay: 1.7s;
}
.top-caption-main span#row3 {
    animation-delay: 1.9s;
}
.top-caption-sub {
    top: 80%;
    animation: slideSideFade 1s ease forwards;
    transform: translateX(-50%);
    opacity: 0;
    animation-delay: 2.5s;
    font-size: 40px;
}

/* アニメーションの動きを定義 */
@keyframes logo-fadeUpAnime {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideSideFade {
  from {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/*
本文
*/
.wrapper-outer {
    width: 100%;
    background-color: #f5f8f5;
}

/* 各アプリへのリンク */
.banner {
    width: 100%;
    text-align: center;
}

.banner-image {
    width: 95%;
    max-width: 300px;
    margin: 0 10px;
}
/* 開室予定, お知らせ, 学友会について 共通 */
.content-name {
    flex-basis: 10%;
}
.content-sub {
    background-color: #d3f0d3;
    padding: 10px;
    border-top: 3px solid #04e16b;
    border-radius: 3px;
}

.midashi, .midashi-small {
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
}
.midashi {
    font-size: 40px;
    margin: 2px 0;
}
.midashi-small {
    margin: 0;
}
/* 開室予定 */
.default-open-time {
    display: flex;
    justify-content: space-between;
    vertical-align: top;
}
.default-open-time dt {
    flex-basis: 20%;
}
.default-open-time dd {
    margin-left: 2px;
    flex-basis: 75%;
    font-size: 22px;
    font-weight: bold;
}
.calendar-content {
    flex-basis: 75%;
    height: 500px;
}
.calendar {
    width: 100%;
    height: 100%;
}
/* お知らせ */
.news-summary-content {
    flex-basis: 80%;
}
.news-summary-content dl{
    border-top: dotted 2px #694d00;
}
.news-item {
    display: flex;
    border-bottom: dotted 2px #694d00;
    padding: 15px 5px;
}

.news-item dt {
    width: 20%;
}

.news-item dd {
    width: 75%;
    margin: 0;
}
.for-more-news {
    position: absolute;
    right: 10px;
    margin-bottom: 20px;
}

.formore-link {
    text-align: right;
}

.formore-link a {
    border: 1.5px solid #000;
    color: #000;
}
.formore-link a:hover {
    color: #fff;
    background-color: #444;
}
/* 学友会とは */
.about-image-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 450px;
}
.about-image {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.9;
    filter: contrast(0.4);
    background-position: center center;
    background-size: cover;
    object-fit: cover;
}
.about-wrapper {
    max-width: 100px;
}
.about-midashi {
    opacity: 1;
}

#gakuyukai .content-name h1, #gakuyukai .content-name p{
    flex-basis: 30%;
}
.about-background {
    color: #117a42;
    background-color: #ebfaf2;
    padding: 10px;
    box-shadow: 1px 1px 2px rgb(245, 255, 242);
}
#gakuyukai .main-content {
    flex-basis: 65%;
    color: black;
    font-size: 24px;
}

.gakuyukai-meaning {
    font-size: 30px;
    color: #4be391;
    text-shadow: 2px 2px 3px #777;
    margin: 10px 0;
    text-align: center;
}
.gakuyukai-meaning-detail {
    font-size: 18px;
    color: #fff;
    text-shadow: 2px 2px 3px #777;
    text-align: center;
    margin: 15px 0;
}
.gakuyukai-meaning-detail strong{
    font-size: 24px;
}

.service-link {
    text-align: center;
}

.service-link a {
    border: 1.5px solid #fff;
    color: #fff;
    background-color: rgba(68, 68, 68, 0.3);
}
.service-link a:hover {
    color: #444;
    background-color: #fff;
}
/*
スマホ表示用
*/
@media screen and (max-width: 1000px) {
    .top-caption {
        left: 3%;
        animation: slideSIdeFadeMobile 1s ease forwards;
    }
    .top-caption-main {
        font-size: 70px;
    }
    .top-caption-sub {
        font-size: 30px;
    }
    @keyframes slideSIdeFadeMobile {
        from {
            opacity: 1;
            transform: translate(-100%, -50%);
        }
        to {
            opacity: 1;
            transform: translate(0, -50%);
        }
    }
    .banner {
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    .g-bas {
        width: 100%;
    }

    .page-content {
        display: block; /* スマホではflexによる2段組みを解除 */
    }
    .content-name {
        text-align: center;
    }
    .default-open-time {
        text-align: left;
    }
    .news-item {
        display: block;
    }
    .news-item dd {
        width: 100%;
    }

    .about-midashi {
        font-size: 24px;
    }
    .about-image-container {
        height: 600px;
    }
}