/* ##############################
 * Created on : 2025/08/15
 * @version 1.00
 * @copyright Heaven-studio.com
 * @author Myazou3(Toshiyasu.Tkamoto)
##############################  */

/* ##############################
	初期化
##############################  */
/*### 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: 100vh; height: auto; font-family: 'Roboto', sans-serif; font-weight: 400; z-index: 0; color: #000; position: absolute;}
* { 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; }
.official_color { background: linear-gradient(180deg, rgba(128,0,128,1) 0%, rgba(255,173,255,1) 50%, rgba(128,0,128,1) 100%); }
.f_size_10to12 { font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); }
.f_size_12to14 { font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); }
.f_size_12to16 { font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem); }
.f_size_14to20 { font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem); }
.p_center { text-align: center; }
/*### Header ###*/
header {  }
.inner { width: calc(100% - 20px); height: 50px; margin: 0 auto; }
.inner:after { content: ""; clear: both; display: block; }
#top-head { top: -100px; left:50%; transform: translate(-50%,0); position: fixed; width: 100%; margin: 100px auto 0; padding: 5px 0 ; line-height: 1; z-index: 999; box-shadow: 0px 3px 15px rgba(0,0,0,0.2);  background: #fff; }
#top-head a, #top-head { color: #000; text-decoration: none; }
#top-head .inner { position: relative; max-width: 1280px; }
#top-head .logo { float: left; max-height: 50px; display: block; position: relative; right: 0; top: 0; cursor: pointer; }
#top_logo_svg svg { width: 250px; max-height: 50px; display: block; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); }
#global-nav ul { list-style: none; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); font-size: 14px; line-height: 30px; }
#global-nav ul li { float: left; font-size: 14px; line-height: 30px; }
#global-nav ul li a { padding: 5px 15px; position: relative; }
#global-nav ul li a::after { position: absolute; left: 0; bottom: -3px; content: ''; width: 100%; height: 3px; background-image: linear-gradient(90deg, #ee741d, #f75dd0); transform: scale(0, 1); transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.3s;  /*変形の時間*/ }
#global-nav ul li a:hover::after { transform: scale(1, 1); }
#global-nav ul li a.active::after { position: absolute; left: 0; bottom: -3px; content: ''; width: 100%; height: 3px; background: #ee741d; transform: none; }
#global-nav ul li a.active:hover::after { transform: none; }
 
/* Fixed */
#top-head.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; }
#top-head.fixed .logo { font-size: 24px; color: #333; }
#top-head.fixed #global-nav ul li a { color: #333; padding: 0 20px; }
 
/* Toggle Button */
#nav-toggle { display: none; position: absolute; right: 12px; top: 17px; width: 34px; height: 36px; cursor: pointer; z-index: 101; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; 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; }

#back_image { position: fixed; width: 100%; min-height: 100vh; background: url("") center / cover; z-index: -1; }
/*### Main ###*/
main { width: 100%; min-height: calc(100vh - 170px); display: block; padding-top: 70px; margin: 0 auto;}
main h1 { font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); text-align: center; margin: 5px 0; line-height: 40px; background-color: #ee741d; color: #FFF; }
main h2.head1 { font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); text-align: center; margin: 5px 0; line-height: 40px; background-color: #ee741d; color: #FFF; }
section { width: 100%; max-width: 1280px; margin: 0 auto 10px; padding-bottom: 5px;  }
.text { display: block; padding: 10px; }
.text p { font-size: 14px; line-height: 22px; }


/*### Footer ###*/
footer { width: 100%; height: 100px; display: block; box-sizing: border-box; border-top: 1px #333 solid; text-align: center; bottom: 0; position: relative; padding: 0; background: rgba(255,255,255,.5); }
footer small { display: block; margin: 5px 0 20px; line-height: 16px; font-size: 10px; }
footer small a:hover { color: #666; text-decoration: underline; }
#footer_menu{ display: block; text-align: center; width: 100%; max-width: 800px; min-width: 300px; margin: 0 auto; }
.footer_menu_content { display: flex; justify-content: center; width: 100%; font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); margin: 20px 0; }
.footer_menu_content a { display: flex; box-sizing: border-box; min-width: 0px; justify-content: start; align-items: center; width: auto; min-height: 20px; margin: 0px; padding: 0px 20px; box-sizing: border-box; }
.footer_menu_content a:hover { text-decoration: underline; color: #ee741d; }

/*### Comp/Transactions ###*/
.comp_title { display: block; width: 100%; max-width: 900px; margin: 5px auto; padding: 5px 0; font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); background: #ee741d; color: #FFF; font-weight: bold; text-align: center; box-sizing: border-box; outline: 1px solid black; outline-offset: 0px; }
.comp_container{ display: flex;justify-content: center;min-width: 0px; }
.comp_table { box-sizing: border-box; outline: 1px solid black; outline-offset: -1px; overflow: hidden; margin: 0 0 5px; max-width: 900px; width: 100%; }
.comp_row { display: flex; width: 100%; }
.comp_cell { display: flex; box-sizing: border-box; min-width: 0px; justify-content: start; align-items: center; width: 80%; min-height: 40px; outline: 1px solid black; outline-offset: 0px; background-color: white; margin: 0px; padding: 0px 10px; box-sizing: border-box; }
.comp_header { background-color: #ee741d; color: #FFF; display: flex; box-sizing: border-box; min-width: 0px; justify-content: center; align-items: center; width: 30%;  min-width: 110px; min-height: 40px; outline: 1px solid black; outline-offset: 0px; margin: 0px; }
.comp_act span { font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); margin: 3px 0; }
.comp_header span { text-align: center; }
.c_area { display: block; width: 100%; max-width: 900px; margin: 5px auto; padding: 5px 0; box-sizing: border-box; }


/*### Back Ground ###*/
#back_ground { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: -1; display: block; }


#dialog_mess_wrap { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); z-index: 9999; }
#dialog_mess_inner { width: 300px; height: auto; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #FFF; border: 5px #ee741d solid; border-radius: 5px; }
#dialog_mess { display: block; width: 100%; max-width: 260px; margin: 0 auto; box-sizing: border-box; padding: 15px; font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); text-align: center; }

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



/* ### フレキシブル ###  */
@media screen and (min-width: 1199px) {
    main h1 { font-size: 20px;}
    .comp_act span { font-size: 14px; margin: 3px 0; }
    .f_size_10to12 { font-size: 12px; }
    .f_size_12to14 { font-size: 14px; }
    .f_size_12to16 { font-size: 16px; }
    .f_size_14to20 { font-size: 20px; }
    #dialog_mess { font-size: 16px;}
}
@media screen and (max-width: 768px) {
    #top-head, .inner { width: 100%; padding: 0; margin: 0; }
    #top-head { top: 0; position: fixed; margin-top: 0; }
    /* Fixed reset */
    #top-head.fixed { padding-top: 0; background: transparent; }
    #mobile-head { background: #fff; width: 100%; height: 60px; z-index: 999; position: fixed; box-shadow: 0px 3px 15px rgba(0,0,0,0.2); }
    #top-head.fixed .logo,
    #top-head .logo { position: absolute; left: 0; top: 0; margin: 5px 0 5px 5px; }
    #global-nav { position: absolute; /* 開いてないときは画面外に配置 */ top: -500px; background: #000; width: 100%; text-align: center; padding: 10px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
    #global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; transform: none; }
    #global-nav ul li { float: none; position: static; }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #ee741d; padding: 18px 0; border-bottom: 1px #fff solid; }
    #global-nav ul li a::after { position: absolute; left: 0; bottom: -3px; content: ''; width: 100%; height: 3px; background: #ee741d; transform: scale(0, 1); transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.3s;  /*変形の時間*/ }
    #global-nav ul li a:hover::after { transform: scale(1, 1);  }
     #global-nav ul li a.active { border-left: 10px #ff3399 solid; text-indent: -10px; box-sizing: border-box;}
    #global-nav ul li a.active::after { position: absolute; left: 0; bottom: -3px; content: ''; width: 100%; height: 0; background: #ee741d; transform: none; }
    #global-nav ul li a.active:hover::after { transform: none; }
    #nav-toggle { display: block; }
    /* #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 { /* #global-nav top + #mobile-head height */ -moz-transform: translateY(560px); -webkit-transform: translateY(560px); transform: translateY(560px); }
}