@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1366px) {
	
	ul.global-navigation__menu li a { font-size: .9em; }
    .topics_img { width: 24%; padding-right: 10px;　}
    .topics_img:last-child{ padding: 0;}
	
}

@media screen and (max-width:1024px) {
	
	/*--- header ---*/
	header { padding-top: 20px; }
	header h1 { width: 300px; margin-left: 20px; }
	
	ul.global-navigation__menu { display: none; }
	header.content-header ul.global-navigation__menu { display: none; }
	
	/*--- sp menu ---*/
	#sp-button {
		display: block;
		background-color: transparent;
		position: fixed;
		z-index: 2;
		top: 25px;
		right: 25px;
		border: none;
		width: 36px;
		height: 30px;
		outline: none;
		-webkit-transition: opacity 0.2s ease-out;
		transition: opacity 0.2s ease-out;
	}
	#sp-button:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		right: auto;
		width: 100%;
		background: linear-gradient(to bottom, #fff, #fff 10%, transparent 10%, transparent 45%, #fff 45%, #fff 55%, transparent 55%, transparent 90%, #fff 90%, #fff 100%);
		-webkit-transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
		transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
	}
	#sp-button:after {
		opacity: 0;
		content: '×';
		color: white;
		position: absolute;
		top: 16px;
		right: -20px;
		font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
		font-size: 65px;
		font-weight: 400;
		line-height: 0;
		-webkit-transition: opacity 0.4s ease-out;
		transition: opacity 0.4s ease-out;
	}
	#sp-button:active {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	#sp-button:hover {
		opacity: 1;
	}
	.open #sp-button {
		opacity: 1;
	}
	.open #sp-button:before {
		opacity: 0;
		width: 0;
	}
	.open #sp-button:after {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
		transform: translate3d(0, 0, 0) rotate(360deg);
		-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
		transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
		transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
		transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
	}
	#menu {
		display: block;
		z-index: 1;
		position: fixed;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		overflow: hidden;
	}
	#menu:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		background: rgba(52,144,69,0.9);
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		border-radius: 100%;
		-webkit-transform: scale(0.04), translateY(9999px);
		transform: scale(0.04), translateY(9999px);
		overflow: hidden;
	}
	.open #menu {
		top: 0;
	}
	.open #menu:before {
		-webkit-animation: menu-animation 0.8s ease-out forwards;
		animation: menu-animation 0.8s ease-out forwards;
	}
	ul.menu {
		display: block;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
		list-style: none;
		padding: 0;
		color: white;
	}
	ul.menu li {
		opacity: 0;
		text-align: center;
		-webkit-transform: translate3d(0, 36px, 0);
		transform: translate3d(0, 36px, 0);
		padding: 1em;
	}
	ul.menu li a {
		display: block;
		color: #fff;
		font-size: 1.2em;
		text-decoration: none;
		transition: .3s;
	}
	ul.menu li a:hover {
		color: #349045;
	}
	ul.menu li a:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: #fff;
		transform: scale(0,1);
		transform-origin: left top;
		transition: transform .3s;
		z-index: -1;
	}
	ul.menu li a:hover:after {
		transform: scale(1,1);
	}
	.open ul.menu li {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
		transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
		transition: transform 0.2s ease-out, opacity 0.2s ease-out;
		transition: transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
	}
	.open ul.menu li:nth-child(1) {
		-webkit-transition-delay: 0.75s;
		transition-delay: 0.75s;
	}
	.open ul.menu li:nth-child(2) {
		-webkit-transition-delay: 0.85s;
		transition-delay: 0.85s;
	}
	.open ul.menu li:nth-child(3) {
		-webkit-transition-delay: 0.95s;
		transition-delay: 0.95s;
	}
	.open ul.menu li:nth-child(4) {
		-webkit-transition-delay: 1.05s;
		transition-delay: 1.05s;
	}
	.open ul.menu li:nth-child(5) {
		-webkit-transition-delay: 1.15s;
		transition-delay: 1.15s;
	}
	.open ul.menu li:nth-child(6) {
		-webkit-transition-delay: 1.25s;
		transition-delay: 1.25s;
	}
	.open ul.menu li:nth-child(7) {
		-webkit-transition-delay: 1.35s;
		transition-delay: 1.35s;
	}
	.open ul.menu li:nth-child(8) {
		-webkit-transition-delay: 1.45s;
		transition-delay: 1.45s;
	}
    
	
	@-webkit-keyframes menu-animation {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.04) translateY(300%);
			transform: scale(0.04) translateY(300%);
		}
		40% {
			-webkit-transform: scale(0.04) translateY(0);
			transform: scale(0.04) translateY(0);
			-webkit-transition: ease-out;
			transition: ease-out;
		}
		40% {
			-webkit-transform: scale(0.04) translateY(0);
			transform: scale(0.04) translateY(0);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(0.02) translateY(0px);
			transform: scale(0.02) translateY(0px);
		}
		61% {
			-webkit-transform: scale(0.04);
			transform: scale(0.04);
		}
		99.9% {
			height: 0;
			padding-bottom: 100%;
			border-radius: 100%;
		}
		100% {
			-webkit-transform: scale(2);
			transform: scale(2);
			height: 100%;
			padding-bottom: 0;
			border-radius: 0;
		}
	}
	
	@keyframes menu-animation {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.04) translateY(300%);
			transform: scale(0.04) translateY(300%);
		}
		40% {
			-webkit-transform: scale(0.04) translateY(0);
			transform: scale(0.04) translateY(0);
			-webkit-transition: ease-out;
			transition: ease-out;
		}
		40% {
			-webkit-transform: scale(0.04) translateY(0);
			transform: scale(0.04) translateY(0);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale(0.02) translateY(0px);
			transform: scale(0.02) translateY(0px);
		}
		61% {
			-webkit-transform: scale(0.04);
			transform: scale(0.04);
		}
		99.9% {
			height: 0;
			padding-bottom: 100%;
			border-radius: 100%;
		}
		100% {
			-webkit-transform: scale(2);
			transform: scale(2);
			height: 100%;
			padding-bottom: 0;
			border-radius: 0;
		}
	}
	
	header.content-header #sp-button:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		right: auto;
		width: 100%;
		background: linear-gradient(to bottom, #111, #111 10%, transparent 10%, transparent 45%, #111 45%, #111 55%, transparent 55%, transparent 90%, #111 90%, #111 100%);
		-webkit-transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
		transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
	}
	
	
	/*--- slide ---*/
	#vegas .caption { bottom: 3%; font-size: 8em; }
	
	
	/*--- top_content01 ---*/
	#top_content01 .inner { padding: 30px 0;}
	#top_content01 .inner .top-copy-cont { width: 70%; }
	#top_content01 .inner h1 { font-size: 2.7em; line-height: 1.5em; letter-spacing: 0;}
    
    .topics_img { width: 48%; }
    .topics_img:nth-child(1){ padding-right: 14px;}
    .topics_img:nth-child(2){ padding-right: 0px;}
    .topics_img:nth-child(3){ padding-right: 14px; padding-top: 14px;}
    .topics_img:nth-child(4){ padding-top: 14px;}
    
    ul.list li .thm-Box img { width: 300px; height: 300px; }
    
    #about_content .inner {
        padding: 0px;
        z-index: 1;
        position: relative;
    }
    
    .about_text01 th{
        display: block;
        line-height: 2;
        width: 100%;
    }
    
    .about_text01 td{
        display: block;
        line-height: 4;
    }
    
	
}


@media screen and (max-width:768px) {
	
	/*--- slide ---*/
	#vegas .caption { font-size: 6em; }
	
	/*--- top_content01 ---*/
	#top_content01 .inner { padding: 0;}
	#top_content01 .inner h1 { font-size: 2em; margin-bottom: 20px; }
	
	/*--- top_content02 ---*/
	#top_content02 .inner { margin-bottom: 0; padding: 2em 0; z-index: 100; }
	
	ul.list { flex-wrap: wrap; }
	
	/*--- top_content03 ---*/
	#top_content03 { margin: 0; padding: 0; }
	#top_content03 .inner { padding: 2em 0; }
	
	/*--- top_content04 ---*/
	#top_content04 { padding: 0; }
	#top_content04 .inner { padding: 2em 0; }
	
	/*--- footer ---*/
	footer { padding: 50px 0; }
	footer .inner .logo { margin: 0 auto 30px auto; }
	ul.common-footer__glo-menu { width: 100%; margin: 0 auto 30px auto; }
	ul.common-footer__glo-menu li { font-size: .8em; }
	
	/*--- contents ---*/
	#content_Box .inner .page-head { padding: 20px 0 40px; }
	#content_Box .inner .page-head h1 { font-size: 5em; margin-bottom: 40px; }
	#content_Box .inner .page-head small { margin-right: 30%; }
	#content_Box .inner .page-head .pan { margin-left: 0; }
	#content_Box .inner .page-head .pan span:first-child { margin-left: 0; }
    
    .topics_img { width: 48%; }
    .topics_img:nth-child(1){ padding-right: 14px;}
    .topics_img:nth-child(2){ padding-right: 0px;}
    .topics_img:nth-child(3){ padding-right: 14px; padding-top: 14px;}
    .topics_img:nth-child(4){ padding-top: 14px;}
    
    ul.list li .thm-Box img { width: 200px; height: 200px; }
    
    #about_content .inner {
        padding: 0px;
        z-index: 1;
        position: relative;
    }
    
    .about_text01 th{
        display: block;
        line-height: 2;
        width: 100%;
    }
    
    .about_text01 td{
        display: block;
        line-height: 4;
    }
}


@media screen and (max-width:640px) {
	
	/*--- header ---*/
	header { padding-top: 15px; }
	header h1 { width: 50%; margin-left: 20px; }
	header h1 img { width: 100%; }
	
	/*--- slider ---*/
	#vegas .caption { font-size: 3.5em; }
	.scroll-Block { display: none; }
	
	/*--- top_content01 ---*/
	#top_content01 .inner { display: block; }
	#top_content01 .inner figure { width: 35%; margin: 0 auto 20px auto; }
	#top_content01 .inner h1 { font-size: 1.5em; text-align: center; }
	#top_content01 .inner p { font-size: .9em; }
	#top_content01 .inner .top-copy-cont { width: 100%; }
	
	/*--- top_content02 ---*/
	ul.list li { width: 100%; margin-bottom: 20px; display: flex; justify-content: space-between; }
	ul.list li .date01 { width: 40%; }
	ul.list li .thm-Box { width: 100%; }
	ul.list li .thm-Box img { width: 310px; height: 310px;}
	ul.list li .cate01 { position: relative; font-size: .7em; line-height: 2em; width: 100%; }
	ul.list li .cate02 { position: relative; font-size: .7em; line-height: 2em; width: 100%; }
	ul.list li .cate03 { position: relative; font-size: .7em; line-height: 2em; width: 100%; }
	ul.list li .date02 { width: 65%; }
	ul.list li .day { margin: 0 0 5px 0; }
	ul.list li .tit-Box { font-size: .9em; margin: 0; line-height: 1.5em; }
	
	/*--- contents ---*/
	#content_Box { margin: 40px 0; }
	#content_Box .inner .page-head { padding: 0 0 30px; }
	#content_Box .inner .page-head h1 { font-size: 3em; margin-bottom: 0; }
	#content_Box .inner .page-head small { font-size: 1.1em; line-height: 1em; margin-right: 20%; margin-left: 30px; }
	#content_Box .inner .page-head .pan { margin-left: 0; padding-top: 30px; font-size: .8em; }
	
	#content_Box .inner .topics-Box .category div:nth-child(1) { font-size: .8em; }
	#content_Box .inner .topics-Box .category div:nth-child(2) { font-size: .8em; }
    
    .about_title01 h1{ font-size: 1.8em; }
    .about_title02{ font-size: 1.4em; }
    .about_sub_title{ font-size: 1.4em; }
    .about_txt{ font-size: 1.2em; }
    
    .topics_img { width: 100%; }
    .topics_img:nth-child(1){ padding-right: 0px;}
    .topics_img:nth-child(2){ padding-right: 0px; padding-top: 10px;}
    .topics_img:nth-child(3){ padding-right: 0px; padding-top: 10px;}
    .topics_img:nth-child(4){ padding-top: 10px;}
    
    .seminar_box dl{flex-flow: column;}
    
    #about_content .inner {
        padding: 0px;
        z-index: 1;
        position: relative;
    }
    
    .about_text01 th{
        display: block;
        width: 100%;
    }
    
    .about_text01 td{
        display: block;
        line-height: 4;
    }
    
    .about_img02_sp{
    display: block;
    width: 100%;
    border: 2px solid #249d57;
    }

    .about_img02_sp img{
        width: 100%;
    }

    .about_img02{
        display: none;
    }
    
    /*会長挨拶*/
    .about_flex{
        flex-direction: column;
    }

    .about_img01{
        width: 100%;
    }

    .about_img01 img{
        width: 100%;
    }

    .about_text01_flex{
        width: 100%;
        padding-left: 0px;
        padding-top: 30px;
    }
    
    /*ページ内メニュー*/

    .about_menu ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        text-align: center;
        font-weight: bold;
        padding: 0;
        
    }

    .about_menu li{
        list-style: none;
        /*background: #249d57;*/
        border: solid 1px #249d57;
        width: calc(16.66666666666667% - 10px);
        color: #249d57;
        padding: 10px 0;
        width: 100%;
    }

    .about_btn a{
        display: block;
        width: 100%;
        height: 100%;
        color: #249d57;
        text-decoration: none;

    }
	
}

@media screen and (max-width:375px) {
    ul.list li .thm-Box img { width: 340px; height: 340px;}
}

@media screen and (max-width:414px) {
    ul.list li .thm-Box img { width: 372px; height: 372px;}
}