@charset 'utf-8';

/* top
------------------------------------------------ */
.content {
    padding-bottom: 85px;
}

/* top_splash */
#top_splash {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 100;
}
#top_splash .table { display: table; width: 100%; height: 100%; }
#top_splash .table-cell { display: table-cell; vertical-align: middle; }

	#top_splash .copy,
	#top_splash .copy ul li,
	#top_splash .skip {
		opacity: 0;
	}

	#top_splash .copy {
		text-align: center;
	}

		#top_splash .copy ul {
			margin: 0 auto;
			max-width: 885px;
			height: 230px;
		}

			#top_splash .copy ul li {
				position: relative;
				float: right;
				margin-left: 40px;
				width: 26px;
				height: 0;
				vertical-align: top;
			}
			#top_splash .copy ul .space { margin-left: 106px; }
			#top_splash .copy ul li:last-child { margin-left: 0; }

				#top_splash .copy ul li span {
					display: block;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}

	#top_splash .skip {
		margin: 160px auto 0;
		width: 50px;
	}

		#top_splash .skip a { display: block; }

@media screen and (max-width: 900px) {
	#top_splash .copy ul { max-width: 624px; }
	#top_splash .copy ul li { margin-left: 20px; }
	#top_splash .copy ul .space { margin-left:  66px; }
	#top_splash .skip { margin-top: 80px; }
}

@media screen and (max-width: 640px) {
	#top_splash {}
	#top_splash .table,
	#top_splash .table-cell { display: block; }
	#top_splash .copy { padding-top: 50px; }
	#top_splash .copy ul { max-width: 218px; height: 403px; }
	#top_splash .copy ul li { margin-left: 13px; width: 20px; }
	#top_splash .copy ul .space { margin-left: 46px; }
	#top_splash .skip { margin-top: 26px; height: 35px; }
}

@media screen and (max-width: 320px) {
	#top_splash .copy { padding-top: 20px; }
}

/* top_visual */
#top_visual {
	position: relative;
	background: #000;
}

	#top_visual .dissolve {
		position: relative;
	}

		#top_visual .dissolve .frame {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

			#top_visual .dissolve .move {
				position: relative;
				width: 100%;
				height: 100%;
			}

				#top_visual .dissolve .move li {
					display: none;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					text-indent: 100%;
					white-space: nowrap;
					overflow: hidden;
					z-index: 1;
				}

				#top_visual .dissolve .move li.on { z-index: 2; }

.masthead {
    background-size: 1900px;
    background-image: url(../../img/top/masthead.png);
    height: 800px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
    .kanji_list {
        position: relative;
        overflow: hidden;
        margin-bottom: 45px;
    }
        .kanji_list .thumbnail {
            width: 50%;
            float: left;
        }
        .kanji_list .caption {
            width: 50%;
            float: right;
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            font-size: 1.9rem;
            line-height: 37px;
            height: 364px;
            position: relative;
        }
            .caption .kanji_title {
                font-size: 3.1rem;
                font-weight: 500;
                line-height: 54px;
            }
            .caption .vertical_caption {
                position: absolute;
                bottom: 0;
                margin-right: 45px;
            }
            .caption rt {
                font-size: 1.2rem;
            }

    .kanji_list.vd_change .thumbnail {
        float: right;
    }
    .kanji_list.vd_change .caption {
        padding-right: 35px;
        box-sizing: border-box;
    }
    .title_break {
        position: relative;
        z-index: 2;
    }
    .break_img {
        margin-top: -110px;
        position: relative;
        z-index: 1;
    }
        .break_img img {
            margin: 0 auto;
            display: block;
        }

/* top_introduce */
#top_introduce {}
#top_introduce .kanji_list .caption { width: 40%; }
#top_introduce .kanji_list .vertical_caption { position: relative; float: right; width: 10%; height: 364px; }
#top_introduce .kanji_list .vertical_caption img { position: absolute; bottom: 0; right: 0; }

    .event_list .lists {
        width: 20%;
        overflow: hidden;
        float: left;
        margin-right: 6.66666667%;
    }
    .event_list .lists:last-child {
        margin-right: 0;
    }
    .event_list .lists figcaption {
        margin-top: 20px;
    }
    .event_list .lists .event_title {
        font-size: 4.2rem;
        font-weight: 500;
        line-height: 54px;
        float: right;
    }
    .event_list .lists .event_date {
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 1.9rem;
        line-height: 55px;
        float: right;
    }

/* top_news */
#top_news {
}

    .notice_list {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        padding-left: 10%;
    }

        .notice_list .notice_title {
            position: absolute;
            left: 10%;
            bottom: 0;
        }

	        .notice_list .notice_title a { display: block; }

        .notice_list .list {
	       }

	        .notice_list .dec-note {
		        float: right;
		        width: 46%;
	        }

	        .notice_list .dec-note .thumbnote {
	            display: inline-block;
	            float: right;
	            width: 30%
	        }
	            .notice_list .dec-note .text-note {
	                -webkit-writing-mode: vertical-rl;
	                -ms-writing-mode: tb-rl;
	                writing-mode: vertical-rl;
	                font-size: 1.9rem;
	                line-height: 40px;
	                float: right;
	                width: 70%;
	                height: 380px;
	                overflow: auto;
	            }
	                .notice_list .dec-note .text-note .note-link {
	                    text-decoration: none;
	                    color: #567ab0;
	                }
	                .dec-note .text-note .notice_title2 {
	                    font-size: 3.1rem;
	                    margin-right: 24px;
	                    font-weight: 500;
	                }
	                .dec-note .text-note .date {
		               }

    .break_map iframe {
        width: 65%;
        height: 510px;
    }

        .break_map .contact {
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            font-size: 1.9rem;
            line-height: 34px;
            float: right;
            width: 35%;
        }
            .break_map .contact p {
                margin-left: 25px;
            }
            .break_map .contact .break_p {
                font-size: 1.5rem;
            }
            .break_map .contact .contact_title {
                font-size: 4rem;
                font-weight: 500;
            }

@media screen and (max-width: 1200px) {
    .kanji_list .caption,
    .break_map .contact { overflow: auto; }
    .notice_list .notice_title { left: 4%; }
}
@media screen and (max-width: 640px) {

#main {
    overflow: hidden;
}
    .masthead {
        background-image: none;
        height: auto;
    }
    .kanji_list {
        margin-bottom: 0;
    }
        .kanji_list .thumbnail {
            width: 100%;
            float: none;
        }
        .kanji_list .caption {
            width: 100%;
            float: none;
            padding: 20px 0;
            font-size: 1.4rem;
            line-height: 28px;
            height: 335px;
        }
        .kanji_list.vd_change .caption {
            padding-right: 0;
        }
            .caption .kanji_title {
                font-size: 2.4rem;
            }

	/* top_introduce */
	#top_introduce {}
	#top_introduce .kanji_list .caption { float: right; width: 75%; }
	#top_introduce .kanji_list .vertical_caption { float: left; margin: 20px 0; width: 20%; height: 335px; }

    .break_map iframe {
        width: 100%;
        height: 300px;
    }
        .break_img {
            width: 170%;
            margin-left: -38%;
            margin-top: -10%;
        }
        .event_list .lists figcaption {
            margin-top: 0px;
        }
        .event_list .lists .event_title {
            text-align: center;
            float: none;
            font-size: 2.4rem;
        }
        .event_list .lists .event_date {
            margin: 0 auto;
            float: none;
            font-size: 1.4rem;
            line-height: 24px;
        }
        .notice_list .dec-note {
            width: 49%;
        }
        .notice_list .notice_title {
            top: 0;
            left: 0;
            bottom: inherit;
            padding: 5px 0;
            width: 10%;
        }
            .notice_list .dec-note .thumbnote {
                display: inline-block;
                float: right;
                width: 50%;
            }
            .notice_list .dec-note .text-note {
                width: 50%;
                font-size: 1.4rem;
                line-height: 28px;
            }
                .dec-note .text-note .notice_title2 {
                    margin-right: 0;
                    font-size: 2rem;
                    margin-right: 10px;
                }
    .caption .vertical_caption {
        margin-right: 0;
    }
        .caption .vertical_caption img {
            width: 60px;
        }
    .break_map .contact .contact_title {
        font-size: 2.8rem;
    }
    .break_map .contact {
        margin: 20px auto 0;
        float: none;
        width: max-content;
        font-size: 1.4rem;
        line-height: 24px;
    }
        .break_map .contact p:last-child {
            margin-left: 0;
        }
}

@media screen and (max-width: 414px) {
    .event_list .lists .event_date {
        font-size: 1.2rem;
        line-height: 20px;
    }
}

/* top_guide */
#top_guide {
    
}


#top_guide .danka_banner a img {
    opacity: 1;
    transition: .3s;
}
#top_guide .danka_banner a:hover img {
    opacity: 0.7;
}
	#top_guide .guide_modal {
		display: none;
	}

    @media screen and (min-width: 641px) {
        #top_guide .danka_banner {
            margin: 50px 0 100px;
        }
        #top_guide .danka_banner a .pc {
            display: block;
        }
        #top_guide .danka_banner a .sp {
            display: none;
        }
    }
    @media screen and (max-width: 640px) {
        #top_guide .danka_banner {
            margin: 30px 0 50px;
        }
        #top_guide .danka_banner a .pc {
            display: none;
        }
        #top_guide .danka_banner a .sp {
            display: block;
        }
    }