@charset "utf-8";

/*-------------------------------------------------------------
///////////////////////////////////////////////////////////////
layout
///////////////////////////////////////////////////////////////
--------------------------------------------------------------*/
body {
    min-height: 100vh;
}

.wrapper {
    width: 100%;
}

.main .main-body {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row-reverse;
}
@media screen and (max-width:767px) {
    .main .main-body {
        width: 92%;
        flex-direction: column;
    }
}

.contents {
    width: 730px;
}
@media screen and (max-width:767px) {
    .contents {
        width: 100%;
    }
}

.side {
    width: 230px;
}
@media screen and (max-width:767px) {
    .side {
        width: 100%;
    }
}

.footer > div {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width:767px) {
    .footer > div {
        width: 92%;
        flex-direction: column;
    }
}

/*リンク*/
a {
    color: #0000FF;
    text-decoration: none;
    word-break: break-all;
}

a:hover {
    text-decoration: underline;
}

/*-------------------------------------------------------------
///////////////////////////////////////////////////////////////
style
///////////////////////////////////////////////////////////////
--------------------------------------------------------------*/
/* 基本 */
:root {
	--key-color: #000000;
	--sub-color: #008cd6;
	--point-color: #ffe207;
	box-sizing: border-box;
    --space-s: 0.5em;
    --space-m: 1em;
    --space-l: 2em;
}

/* SP、PC表示切り替え */
.sp_on {
    display: block; /* SPのみ表示 */
}
@media (min-width: 768px) {
	.sp_on {
        display: none;
    }
}

.pc_on {
    display: none;
}
@media (min-width: 768px) {
	.pc_on {
        display: block; /* PCのみ表示 */
    }
}

/* @group ヘッダーエリア
------------------------------------------------------*/
/* @group メインエリア
------------------------------------------------------*/

.wrapper {
    background-color: var(--point-color);
}

.contents {
    position: relative;
}

.contents.home {
    background-image: url(../images/bg-contents.png);
    background-position: center 195px;
    background-repeat: no-repeat;
    background-size: 661px auto;
}
@media screen and (max-width:767px) {
    .contents.home {
        background-position: center 135px;
        background-size: 100% auto;
    }
}

@media screen and (max-width:767px) {
    .bg-shadow {
        display: none;
    }
}

.bg-shadow::before {
    position: absolute;
    top: 0;
    content: "";
    width: 10px;
    height: 1270px;
    background-image: url(../images/bg-shadow.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: multiply;
}

.society-title {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.society-title img {
    width: 638px;
    height: 88px;
}
@media screen and (max-width:767px) {
    .society-title img {
        width: 100%;
        height: auto;
    }
}

.society-title.home img {
    width: 638px;
    height: 196px;
}
@media screen and (max-width:767px) {
    .society-title.home img {
        width: 100%;
        height: auto;
    }
}

/* @group サイドエリア
------------------------------------------------------*/

/* 演題登録期間 */
.abstract-period {
    width: 214px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
}

/* 事務局 */

.secretariat {
    margin-top: 40px;
}
@media screen and (max-width:767px) {
    .secretariat {
        margin-top: 40px;
    }
}

.secretariat h3 {
    width: 230px;
    height: 30px;
    background-color: var(--sub-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
@media screen and (max-width:767px) {
    .secretariat h3 {
        width: 100%;
    }
}

.secretariat h3 span {
    margin-left: 7px;
	color: var(--point-color);
    font-size: 16px;
    font-weight: bold;
}

.secretariat dl {
    width: 220px;
    margin: 0 auto 15px;
    line-height: 1.3;
    color: var(--key-color);
}
@media screen and (max-width:767px) {
    .secretariat dl {
        width: 96%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
    }
}

.secretariat dt {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: bold;
}

.secretariat dd {
    font-size: 12px;
    font-weight: 300;
}

/* @group フッターエリア
------------------------------------------------------*/
.footer {
    height: 30px;
    display: flex;
    align-items: center;
    background-color: var(--key-color);
    line-height: 1.2;
}
@media screen and (max-width:767px) {
    .footer {
        min-height: 40px;
    }
}

.footer-copyright small {
    font-size: 13px;
    color: var(--point-color);
}