/*-------------------------------

	共通パーツ

-------------------------------*/
.g {
    margin: 1em 0.5em;
}

.cmn-btn {
    display: block;
    width: fit-content;
    background: linear-gradient(90deg,var(--main0), var(--main100));
    text-decoration: none;
    border-radius: 60px;
    padding: 20px 60px;
    color: white;
    margin: 2em 0;
}

.cmn-btn:hover {
    filter: brightness(300%);
    transition: all 2s;
}

.shadow {
    margin: 1em 0.5em;
    border-radius: 30px;
    box-shadow: 0 0 30px rgb(216, 212, 212);
    max-width: 1350px;
    margin-top: -30em;
    background: rgba(255, 255, 255, 0.9);
}

.cmn-hg p {
    letter-spacing: 2px;
    position: relative;
    margin-left: 15px;
    font-weight: bold;
}

.cmn-hg p::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--main0);
    position: absolute;
    left: -15px;
    top: 6px;
}

@media(min-width:1350px) {
    .shadow {
        margin: 2em auto;
    }
}

/*-------------------------------

ヘッダー関係（上書き）

-------------------------------*/
@media(min-width:650px) {
    .menu {
        background: transparent; 
    }
}


/*-------------------------------

FV(ファーストビュー)

-------------------------------*/
#catch {
    text-align: center;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
}

.catch-box {
    background-image: url(line.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    position: relative;
    z-index: -1;
}

.catch-box p {
    background:  linear-gradient(90deg,var(--main0), var(--main100));
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
    font-size: 2em;
    margin: 0 auto;
    width: fit-content;
    padding-left: 1.25em;
}

.catch-box img {
    width: calc(100% + 4em);
    min-width: 300px;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: contain;
    margin-bottom: 25em;
    margin: -2em -2em 25em -2em;
}

.catch-box video {
    width: calc(100% + 4em);
    min-width: 300px;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25em;
    margin: 0 -2em 25em -2em;
}

@media(min-width:500px) {
    .catch-box p br {
        display: none;
    }
}

@media(min-width:600px) { 

    .catch-box p {
        padding-top: 3em;
    }

    .shadow {
        margin-top: -30em;
        position: relative;
        z-index: 999;
    }
}

@media(min-width:800px) {
    .catch-box {
        display: flex;
        justify-content: space-evenly;
        margin-top: -3em;
    }

    .catch-box p br {
        display: none;
    }
}


@media(min-width:1200px) {
    #catch {
        overflow: hidden;
    }
    .catch-box {
        margin: -5em auto 0 auto;
    }

    .catch-box p {
        padding-top: 3em;
        font-size: 3em;
    }

    .catch-box video {
        max-width: 740px;
        margin-bottom: 50em;
    }

    .shadow {
        margin-top: -35em;
    }
}





/*-------------------------------

東信地域の社長・経営幹部の皆さんへ

-------------------------------*/
.evry {
    padding-top: 3em;
}

#intro > p {
    line-height: 2;
}

@media(min-width:1100px) {
    #intro {
        max-width: 1100px;
    }
    
    #intro > p {
        margin-left: 3em;
    }

    .cmn-btn {
        margin-left: 3em;
    }
}

@media(min-width:1300px) {
    .evry {
        margin-left: 7em;
    }


    #intro > p {
        margin-left: 7em;
    }

    .cmn-btn {
        margin-left: 7em;
    }
}

/*-------------------------------

例会案内（ワードプレス）

-------------------------------*/

.bigblock .top-imgcon {
    overflow: hidden;
}

.bigblock img {
    max-width: 285px;
    max-height: 400px;
    display: block;
    margin: 0 auto;
}

.bigblock img:hover {
    transform:scale(1.3);
    transition:0.3s;
}

.top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 55px;
    padding: 0;
}

.top-article {
    display: grid;
    list-style: none;
    max-width: 310px;
}

.top-article a {
    display: flex;
    flex-flow: column;
    text-decoration: none;
    color: black;
    margin: 0 0.5em;
}

/*-----参加受付中-----*/
.top-article-info {
    margin: 1em 0;
}


.top-article-info .recep {
    color: #E40113;
    margin: 1em 0;
    font-weight: bold;
    position: relative;
    padding-left: 2em;
}

.top-article-info .recep::before {
    content: "";
    display: block;
    background-color: #E40113;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 3px;
}

.top-article-info .no-recep {
    color: #474646;
    margin: 1em 0;
    font-weight: bold;
    position: relative;
    padding-left: 2em;
    padding-top: 3px;
}

.top-article-info .no-recep::before {
    content: "";
    display: block;
    background-color: #474646;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 5px;
}



/*-----記事のタイトル-----*/
.title-top {
    font-weight: bold;
    font-size: 1.5em;
}

/*-----記事の概要（ディスクリプション）-----*/
.top-p{
    max-width: 320px;
}

/*-----位置調整用-----*/
.position {
    margin-top: auto;
}

/*-----この例会を詳しく見る-----*/
.top-btn {
    background:  linear-gradient(90deg,var(--main0), var(--main100));
    color: white;
    width: fit-content;
    padding: 1px 40px;
    border-radius: 50px;
    margin: 0 auto;
}

/*-----共通パーツ-----*/
.top-box {
    display: grid;
    grid-template-rows: 30px 0px;
    grid-template-columns: 75px 1fr;
    font-weight: bold;
}

.top-box dd {
    margin: 0;
}

.no-info {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
}
/*-------------------------------

アーカイブ動画

-------------------------------*/
#movie {
    max-width: 1100px;
    margin: 0 auto;
} 

.movie-wr {
    margin: -180px auto 0 auto;
    width: fit-content;
}

.movie-wr > iframe {
    width: 300px;
    height: auto;
    border-radius: 10px;
}

.movie-box {
    background-color: var(--background);
    width: auto;
    margin: 2em 0.5em;
    height: 300px;
    padding-top: 2em;
    border-radius: 20px;
}
.mov2 {
    margin: 0em auto;
    width: fit-content;
}

.mov2 img {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

@media(min-width:500px) {
    .movie-wr > iframe {
        width: 400px;
        height: 300px;
    }
}

@media(min-width:700px) {
    .movie-wr > iframe {
        width: 650px;
        height: 450px;
    }

    .movie-box {
        height: 400px;
    }
    .movie-wr {
        margin: -280px auto 0 auto;
    }
}


@media(min-width:1000px) {
    .movie-wr > iframe {
        width: 900px;
        height: 450px;
    }
}


/*-------------------------------

近日公開

-------------------------------*/
#movie p {
    width: fit-content;
    margin: 1em auto;
    font-size: 3em;
} 



/*-------------------------------

会長メッセージ

-------------------------------*/
.mes-box {
    margin: 5em 0;
}

.mes-box:last-child {
    padding-bottom: 3em;
}

.mes-box hgroup h2{
    margin: 0.5em 0;
}

.mes-box img {
    width: 95%;
    margin: 0 auto;
    display: block;
    border-radius: 0 30px 0 0;
    max-width: 530px;
    max-height: 300px;
    object-fit: cover;
}

.mes-box p {
    margin: 1em 0.5em;
    max-width: 530px;
}

.mes-box a {
    color: black;
    text-decoration: none;
}

@media(min-width:650px){
    #massage {
        display: flex;
        justify-content: center;
    }

    .mes-box:last-child {
        padding-bottom: 0;
        position: relative;
    }
    
}