/* ##############################
 * Created on : 2020/11/03
 * @version 1.00
 * @copyright Sumika-Group.com(Heaven-studio.com)
 * @author Toshiyasu Takamoto
##############################  */

/* ##############################
	初期化
##############################  */
/*### Basic CSS ###*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body { margin: 0; padding: 0; width: 100%; max-width: 100%; min-height: 100%; height: auto; font-family: 'Roboto', sans-serif; font-weight: 400; z-index: 0; color: #000; position: absolute; top: 0; left: 0;}
* { margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
img { border-style: none; }
.red { color: #f00; }
.red_b { color: #f00; font-weight: bold; }
.blue { color: #00F; }
.blue_b { color: #00F; font-weight: bold; }
#no_js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 5000; }
#no_js div { position: fixed; width: 320px; padding: 15px 0; top:50%; left: 50%; transform: translate(-50%,-60%); font-size: 14px; line-height: 22px; text-align: center; color: #f00; background: #fff; border-radius: 10px; }
.hide { display: none !important; }


/*### Header ###*/
header { width: 100%; display: block; position: fixed; padding: 0; z-index: 10; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
/*.official_head { box-shadow: 0px 2px 0px rgba(69,157,215,0.6); -webkit-box-shadow: 0px 2px 0px rgba(69,157,215,0.6); -moz-box-shadow: 0px 2px 0px rgba(69,157,215,0.6); }
.member_head { box-shadow: 0px 2px 0px rgba(72,121,81,0.6); -webkit-box-shadow: 0px 2px 0px rgba(72,121,81,0.6); -moz-box-shadow: 0px 2px 0px rgba(72,121,81,0.6); } */
#head_top_wrap { width: 100%; max-width: 1080px; height: calc(40px + 40 * (100vw - 320px)/760); max-height: 80px; margin: 0 auto; display: block; }
#top_logo { min-width: 150px; max-width: 300px; width: calc(150px + 150 * (100vw - 320px)/760); display: block; margin: 0; cursor: pointer; position: relative; top: 50%; left: 0; transform: translate(0,-50%); float: left; }
#top_logo_svg svg { width: 100%; display: block; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
#top_mes_area { display: block; float: left; line-height: calc(40px + 40 * (100vw - 320px)/760); font-size: calc(12px + 4 * (100vw - 320px)/760); margin: 0 0 0 10px; }
#top_mes_area h1 { line-height: calc(40px + 40 * (100vw - 320px)/760); font-size: calc(12px + 4 * (100vw - 320px)/760); filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
#header_nav_wrap { width: 100%; margin: 0; padding: 0; }
.official_color { background: linear-gradient(180deg, rgba(255,123,34,1) 0%, rgba(244,205,145,1) 50%, rgba(255,123,34,1) 100%); }
.member_color { background: #487951; }
#global-nav { display: block; height: 40px; width: 100%; max-width: 1080px; margin: 0 auto; }
#global-nav ul { list-style: none; width: 100%; height: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: space-around; -ms-flex-pack: space-around; -ms-flex-pack: distribute; justify-content: space-around; vertical-align: bottom;}
#global-nav ul li { display: block; width: 100%; margin: 0; padding: 0; text-align: center; height: 40px; border-left: 1px #fff solid; box-sizing: border-box; }
#global-nav ul li:last-child { border-right: 1px #fff solid; }
#global-nav ul li a { display: block; width: 100%; height: 100%; font-size: 14px; line-height: 40px; background: none; font-weight: bold; color: #333; }
#global-nav ul li a svg { display: inline-block; width: calc(14px + 2 * (100vw - 320px)/760); position: relative; top: 3px; fill: #333; }
#global-nav ul li a:hover, #global-nav ul li a:hover svg { color: #ffffff; fill: #ffffff; background: rgba(255,255,255,0.4); }

/* Toggle Button */
#nav-toggle { display: none; position: absolute; right: 15px; top: calc(8px + 10 * (100vw - 320px)/760); width: 34px; height: 34px; cursor: pointer; z-index: 11; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #000; border-radius: 4px; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }


/*### Main ###*/
main { max-width: 1080px; width: 100%; min-height: calc(100vh - 185px); display: block; padding-top: calc(45px + 40 * (100vw - 320px)/760); margin: 0 auto; background: none; z-index: 0; }
.text { display: block; padding: 10px; }
.text p { font-size: 14px; line-height: 22px; }


/*### SVG Animation ###*/
#svg_animation { width: 100%; margin: 0 auto;}
#svg_animation svg { -webkit-animation: drop 5s ease-in forwards; animation: drop 5s ease-in forwards; }
.line1 {
    fill-opacity: 1;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    -webkit-animation: lines1 5s ease-in forwards;
    animation: lines1 5s ease-in forwards;
}
.line2 {
    fill-opacity: 1;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    -webkit-animation: lines2 5s ease-in forwards;
    animation: lines2 5s ease-in forwards;
}
.line3 {
    fill-opacity: 1;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    -webkit-animation: lines3 5s ease-in forwards;
    animation: lines3 5s ease-in forwards;
}
.line4 {
    fill-opacity: 1;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    -webkit-animation: lines4 5s ease-in forwards;
    animation: lines4 5s ease-in forwards;
}
@-webkit-keyframes lines1 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	50% { stroke-dashoffset: 0; fill-opacity: 0;  }
	70% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@keyframes lines1 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	50% { stroke-dashoffset: 0; fill-opacity: 0;  }
	70% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@-webkit-keyframes lines2 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	10% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	60% { stroke-dashoffset: 0; fill-opacity: 0; }
	75% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@keyframes lines2 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	10% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	60% { stroke-dashoffset: 0; fill-opacity: 0; }
	75% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@-webkit-keyframes lines3 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	20% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	70% { stroke-dashoffset: 0; fill-opacity: 0; }
	80% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@keyframes lines3 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	20% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	70% { stroke-dashoffset: 0; fill-opacity: 0; }
	80% { fill-opacity: 0.5; }
	90% { fill-opacity: 1; }
}
@-webkit-keyframes lines4 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	30% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	80% { stroke-dashoffset: 0; fill-opacity: 0; }
	90% { fill-opacity: 0.5; }
	100% { fill-opacity: 1; }
}
@keyframes lines4 {
	0% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	30% { stroke-dasharray: 2000px; stroke-dashoffset: 2000; fill-opacity: 0; }
	80% { stroke-dashoffset: 0; fill-opacity: 0; }
	90% { fill-opacity: 0.5; }
	100% { fill-opacity: 1; }
}
@-webkit-keyframes drop {
	0% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.0)); }
	80% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.0)); }
	100% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
}
@keyframes drop {
	0% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.0)); }
	80% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.0)); }
	100% { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
}






/*### Footer ###*/
footer { width: 100%; height: 80px; display: block; border-top: 1px #333 solid; text-align: center; bottom: 0; position: relative; padding: 0; background: rgba(255,255,255,.3); }
footer small { display: block; margin: 20px 0 0; line-height: 16px; font-size: 10px; }
footer small a:hover { color: #666; text-decoration: underline; }

/*### Concting ###*/
#concting_load_animation { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); z-index: 9999; }
#concting_load_svg_box { width: 80px; height: 80px; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }



/* ### フレキシブル ###  */
@media (min-width: 320px) {
	#select_contents { width: calc(18.75rem + ((1vw - 3.2px) * 90.9091)); }

}
@media screen and (max-width: 640px) {
    #global-nav { position: absolute; top: -500px; right: 0; width: 100%; text-align: center; clear: both; float: none; margin: 0; padding: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; margin-right: 0; }
    #global-nav ul { list-style: none; display: block; position: relative; right: 0; bottom: 0; font-size: 14px; background: #459dd7; width: 100%; margin: 0; padding-bottom: 10px; }
    #global-nav ul li { float: none; display: block; position: relative; margin: 0; height: 40px; border: none; border-top: 1px #fff solid;}
	#global-nav ul li:last-child { border-bottom: 1px #fff solid; }
    #global-nav ul li a { width: 100%; display: block; line-height: 40px;}
    #nav-toggle { display: block; }
	#login_data_area { font-size: calc(10px + 2 * (100vw - 320px)/760); right: 70px; width: 70%; }
	#login_data_area div { line-height: calc(14px + 6 * (100vw - 320px)/760);  }
	#login_open { font-size: calc(12px + 2 * (100vw - 320px)/760); }
	#login_open svg { width: calc(12px + 2 * (100vw - 320px)/760); }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); }
    .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; }
    .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
    /* #global-nav スライドアニメーション */
    .open #global-nav { -moz-transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); -webkit-transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); }
}
@media (min-width: 1080px) {
	#top_mes_area h1 { font-size: 16px; line-height: 80px; }
	#select_contents { width: 1080px; }
	main { padding-top: 125px; }
	.main_title { font-size: 18px; line-height: 34px; font-weight: bold; color: #459dd7; }
	.date_info { font-size: 14px; line-height: 26px; }
	.sub_title { font-size: 16px; line-height: 30px; font-weight: bold; color: #459dd7; }
	.sub_sbu_title { font-size: 15px; line-height: 28px; }
	.main_text { font-size: 14px; line-height: 26px; }
}