/* ==========================================================================
   リセットとベーススタイル
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.7;
    font-size: 1.0em;
}


/* ==========================================================================
   見出しスタイル
   ========================================================================== */

h2, h3 {
    padding: 2rem 0;
    color: #333333;
    font-weight: 900;
    font-size: 1.3em;
    text-align: center;
}

h2 span, h3 span {
    font-family: "Oswald", sans-serif;
    display: block;
    color: #4bb2f5;
    font-size: 0.8em;
    letter-spacing: 1px;
	font-weight:400;
}

h3 {
    padding: 0 0 2rem 0;
}

/* ==========================================================================
   メインコンテンツエリア
   ========================================================================== */

.article {
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #f8f3ef;
    margin: 0 auto;
}

.article_detail {
    background-image: url("../images/main-background.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 5rem 0 0 0;
}

/* ==========================================================================
   セクション共通スタイル
   ========================================================================== */

#sec01, #sec02, #sec03, #sec04, #sec06 {
    margin-bottom: 5rem;
}

#sec05 {
    margin-bottom: 2rem;
}

/* ==========================================================================
   スマートフォン用ヘッダー
   ========================================================================== */

.sp_logo_detail dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

.sp_logo_detail dl img {
    width: 100%;
}

.sp_logo_detail dd {
    width: 80%;
    margin: 1rem auto 0 auto;
}

.sp_logo_detail dd img {
    width: 100%;
}

.sp_logo_detail p {
	text-align: center;
    padding: 1rem;
    margin-top: 1rem;
}


.sp_latest {
	display: flex;
    margin: 2rem auto -2rem auto;
    padding: 3rem 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #e6f4f9;}

.sp_latest_list li {
    list-style: none;
}

.sp_latest_logo{
	width:75px;
	margin-right:15px;
	position:relative;
	}
	
.sp_latest_logo img {
    width: 100%;
    animation: rotate 10s linear infinite;
	animation-duration: 10s;
	}
    @keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg); 
    }
}
.sp_latest_logo p{
    font-family: "Oswald", sans-serif;
	position: absolute;
    top: 24px;
    left: 19px;
    font-weight:400;
    color:#ffffff;
}

.sp_latest_list li:first-child {
    font-weight: 700;
    color: #4bb2f5;
}

/* ==========================================================================
   ハンバーガーメニュー
   ========================================================================== */

#g-nav {
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../images/background.png");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    transition: all 0.3s;
}

#g-nav.panelactive {
    opacity: 1;
    z-index: 999;
}

#g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav ul {
    display: none;
    z-index: 999;
}

#g-nav.panelactive ul {
    display: flex;
    flex-direction: column;
}

#g-nav li {
    border-bottom: 1px dotted #333333;
    text-align: center;
    font-size: 1.3em;
    }

#g-nav li a {
    font-family: "ads-type7", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #333333;
    text-decoration: none;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.g-nav-wrapper {
    display: flex;
    padding: 4rem 0;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.g-nav-logo {
    width: 70%;
    margin: 0 auto 2rem auto;
}

.g-nav-logo img {
    width: 100%;
}

/* ハンバーガーボタン */
.openbtn {
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.openbtn span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #333333;
    width: 55%;
}

.openbtn span:nth-of-type(1) {
    top: 15px;
}

.openbtn span:nth-of-type(2) {
    top: 25px;
}

.openbtn span:nth-of-type(3) {
    top: 36px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

/* ==========================================================================
   プログラムセクション
   ========================================================================== */

.program_wrapper {
    background-color: #f8dd55;
    padding: 4rem 1.5rem;
    --mask:
        radial-gradient(31.9px at 50% 45.1px, #000 99%, #0000 101%) calc(50% - 44px) 0/88px 51% repeat-x,
        radial-gradient(31.9px at 50% -23.1px, #0000 99%, #000 101%) 50% 22px/88px calc(51% - 22px) repeat-x,
        radial-gradient(31.9px at 50% calc(100% - 45.1px), #000 99%, #0000 101%) calc(50% - 44px) 100%/88px 51% repeat-x,
        radial-gradient(31.9px at 50% calc(100% + 23.1px), #0000 99%, #000 101%) 50% calc(100% - 22px)/88px calc(51% - 22px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.program_list {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 10px;
}

.program_list > dl {
    display: flex;
    padding: 1rem 0;
    border-bottom: dotted 1px #333333;
	flex-wrap: wrap;
    justify-content: flex-end;
    }

.program_list > dl:last-child {
    border-bottom: none;
}

.program_list dt {
    width: 25%;
}

.program_list dd {
    width: 75%;
}

.program_list dd:nth-child(3),.program_list dd:nth-child(4){
	margin-top:1rem;
}

.program_list dd a {
    color: #3fa9f5;
    text-decoration: underline;
}

.program_list dd li dl {
    display: flex;
    align-items: flex-start;
    padding-top: 0.5rem;
}

.program_list dd li:first-child {
    font-weight:700;
    }

.program_list dd li dl dt {
    display: block;
    background-color: #3fa9f5;
    color: #ffffff;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    width: 50px;
    text-align: center;
    margin-right: 1rem;
}

/* ==========================================================================
   出展者一覧セクション
   ========================================================================== */

.exhibitor_wrapper {
    width: 95%;
    margin: 0 auto;
}

.exhibitor_detail {
    margin-bottom: 3rem;
}

.category_list {
    list-style: none;
}

.category_item06,.category_item07 {
    margin-bottom: 0.8rem;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}

.category_header {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    color: #ffffff;
    transition: opacity 0.3s;
}

/*.category_header:hover {
    opacity: 0.85;
}*/

/* カテゴリーごとの色分け */
.category_item06:nth-child(1) .category_header {
    background-color: #4bb2f5;
}

.category_item06:nth-child(2) .category_header {
    background-color: #ff99cc;
}

.category_item06:nth-child(3) .category_header {
    background-color: #ffb347;
}

.category_item07:nth-child(1) .category_header {
    background-color: #66cc66;
}

.category_item07:nth-child(2) .category_header {
    background-color: #b19cd9;
}

.category_item07:nth-child(3) .category_header {
    background-color: #ff6b6b;
}


.category_name {
    font-weight: 700;
    font-size: 1.1em;
    flex: 1;
}

.category_icon {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.category_icon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
}

.category_item06.active .category_icon,.category_item07.active .category_icon {
    transform: rotate(90deg);
}

.booth_list_container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
    padding: 0 1.5rem;
    background-color: #ffffff;
}

.category_item06.active .booth_list_container,.category_item07.active .booth_list_container {
    max-height: 3000px;
    opacity: 1;
    padding: 0 1.5rem;
}

.booth_list {
    list-style: none;
}

.booth_item {
    padding: 1.5rem 0;
    border-bottom: 1px dotted #ddd;
}

.booth_item:last-child {
    border-bottom: none;
}

.booth_name {
    font-weight: 700;
    margin-bottom: 0.2rem;
    font-size: 1.05em;
}

/* ブース名の色分け */
.category_item06:nth-child(1) .booth_name {
    color: #4bb2f5;
}

.category_item06:nth-child(2) .booth_name {
    color: #ff99cc;
}

.category_item06:nth-child(3) .booth_name {
    color: #ffb347;
}

.category_item07:nth-child(1) .booth_name {
    color: #66cc66;
}

.category_item07:nth-child(2) .booth_name {
    color: #b19cd9;
}

.category_item07:nth-child(3) .booth_name {
    color: #ff6b6b;
}


.booth_description {
    color: #333333;
    font-size: 0.9em;
    line-height: 1.8;
}

/* ==========================================================================
   会場Mapセクション
   ========================================================================== */

.map_wrapper {
    width: 90%;
    margin: 0 auto;
}

.map_detail img {
    width: 100%;
}

.map_btn {
    display: block;
    width: 80%;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-image: linear-gradient(90deg, #3fa9f5, #9cd6ef);
    color: #ffffff;
    padding: 1rem;
    margin: 2rem auto 0 auto;
    font-weight: 700;
    font-size: 0.9em;
    border-radius: 10px;
    transition: all 0.3s;
}

.map_btn:hover {
    color: #ffffff;
    background-color: #4bb2f5;
    opacity: 0.7;
}

/* ==========================================================================
   開催概要セクション
   ========================================================================== */

.info_detail {
    padding: 40px 24px;
}

.info_detail dl {
    display: flex;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.info_detail dt {
    width: 120px;
    color: #4bb2f5;
}

.info_detail dd {
    width: calc(100% - 150px);
}

/* ==========================================================================
   アクセスセクション
   ========================================================================== */

.access_wrapper {
    width: 90%;
    margin: 0 auto;
}

.main__stage p {
    background-image: linear-gradient(90deg, #3fa9f5, #9cd6ef);
    color: #ffffff;
    padding: 10px;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
    border-radius: 50px;
}

.main__stage {
    margin-bottom: 2rem;
}

.bus__stage dt {
    background-image: linear-gradient(90deg, #3fa9f5, #9cd6ef);
    color: #ffffff;
    padding: 10px;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
    border-radius: 50px;
}

.bus__stage dl:last-child{
	margin-top:2rem;
}

.access_wrapper span {
    font-weight: 700;
}

.access_wrapper div.note {
    margin: 2rem 0 0 0;
    font-size: 0.8em;
}

.access_detail {
    margin: 2rem 0;
}

.access_detail p{
	background-image: linear-gradient(90deg, #3fa9f5, #9cd6ef);
    color: #ffffff;
    padding: 10px;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
    border-radius: 50px;
}

.access_detail dl {
    margin-bottom: 2rem;
}

.access_detail dt {
    margin-bottom: 1rem;
    font-weight: normal;
}

.access_detail dt span {
    border-bottom: 1px dotted #333333;
}

.access_detail dd img {
    width: 100%;
}

/* ==========================================================================
   お知らせセクション
   ========================================================================== */

.news_detail {
    width: 95%;
    margin: 0 auto;
}

.news_list {
    list-style: none;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
}

.news_header {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s;
}

.news_date {
    color: #4bb2f5;
    font-weight: 700;
    margin-right: 1rem;
    min-width: 85px;
}

.news_title {
    color: #333;
    flex: 1;
}

.news_icon {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.news_icon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #4bb2f5;
    border-right: 2px solid #4bb2f5;
    transform: rotate(45deg);
}

.news_item.active .news_icon {
    transform: rotate(90deg);
}

.news_content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    background-color: #e7f8ff;
    line-height: 1.8;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.news_item.active .news_content {
    max-height: 500px;
    opacity: 1;
    padding: 1rem 1rem 1.5rem 1rem;
    font-size:0.9em;
}

/* ==========================================================================
   フッター
   ========================================================================== */

footer {
    background-image: linear-gradient(90deg, #3fa9f5, #9cd6ef);
    color: #ffffff;
    padding: 2rem 0;
    text-align: center;
}

/* ==========================================================================
   PC用スタイル - ロゴとナビゲーション（モバイルでは非表示）
   ========================================================================== */

.no_sp {
    display: none;
}

.logo_wrapper {
    display: none;
}

.latest_logo img {
    width: 100%;
}

.nav_wrapper {
    display: none;
}

.nav_item {
    font-family: "ads-type7", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 2rem;
    width: 180px;
    color: #333333;
    font-size: 1.2em;
    line-height:110%;
	letter-spacing: -1px;
}

.nav_item a:hover {
    color: #4bb2f5;
    transition: all 0.3s;
}

.nav_item img {
    width: 100%;
}

/* ==========================================================================
   タブレット以上のスタイル (980px以上)
   ========================================================================== */

@media screen and (min-width: 980px) {
    /* レスポンシブユーティリティ */
    .no_sp {
        display: block;
    }

    /* 背景画像を表示 */
    body {
        background-attachment: fixed;
        background-image: url("../images/background.png");
        background-size: cover;
    }

    /* スマホ用見出しを非表示 */
    h3 {
        display: none;
    }

    /* スマホ用ヘッダーを非表示 */
    .sp_header {
        display: none;
    }

    /* PC用ロゴエリアを表示 */
    .logo_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: calc((100vw - 550px) / 2);
        z-index: 10;
        pointer-events: auto;
        margin-left: 10%;
    }

    .logo_wrapper .logo_detail {
        max-width: 430px;
    }
    
    .logo_wrapper .logo_detail p{
	text-align: center;
    margin-top: 2rem;
    font-size: 0.9em;
    
    }
    
    .logo_wrapper .latest {
        display: flex;
        margin-top: 1rem;
        align-items: center;
    }

    .logo_wrapper .latest_list {
        margin-left: 1rem;
        font-size: 0.9em;
    }

    .logo_wrapper .latest_list li {
        list-style: none;
    }

    .logo_wrapper .latest_list li:first-child {
        font-weight: 700;
        color: #4bb2f5;
        letter-spacing: 1px;
    }

    .logo_wrapper dl img {
        width: 100%;
    }

    .latest_logo {
        max-width: 80px;
		position:relative;
    }
	.latest_logo img {
    width: 100%;
    animation: rotate 10s linear infinite;
	animation-duration: 10s;
	}
    @keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg); 
    }
}
	.latest_logo p{
    font-family: "Oswald", sans-serif;
	position: absolute;
    top: 27px;
    left: 22px;
    font-weight:400;
    color:#ffffff;
}

    /* PC用ナビゲーションを表示 */
    .nav_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: fixed;
        top: 75%;
        right: 10%;
        transform: translateY(-50%);
        z-index: 10;
        pointer-events: auto;
    }

    /* メインコンテンツの配置とボーダー */
    .article {
        max-width: 550px;
        margin: 0 auto 0 45%;
        border-image: linear-gradient(to bottom, #3fa9f5, #9cd6ef) 1;
        border-right: 10px solid;
        border-left: 10px solid;
    }

    .article_detail {
        padding: 5rem 0 0 0;
        border-right: 10px solid #f8f3ef;
        border-left: 10px solid #f8f3ef;
    }
}

/* 小さめPC用スタイル (1200px未満) */
@media screen and (max-width: 1200px) {
    .nav_wrapper {
        display: none;
    }
}

/* 1500px以下の画面幅でナビゲーション位置を調整 */
@media screen and (max-width: 1550px) and (min-width: 1201px) {
    .nav_wrapper {
        right: 2%;
    }
}