@charset "utf-8";


/* margin set
----------------------------------------------------------------------------------------------*/
p{
margin:0 0 10px 0;
}

table{
margin:0 0 10px 0;
}

ul{
margin:0 0 10px 0;
padding:0;
}

ol{
margin:0 0 10px 1.8em;
padding:0;
}

img{
vertical-align:top;
}

form{
margin:0;
}

.mb0{ margin-bottom:0px;}
.mb05{ margin-bottom:5px;}
.mb10{ margin-bottom:10px;}
.mb15{ margin-bottom:15px;}
.mb16{ margin-bottom:16px;}
.mb20{ margin-bottom:20px;}
.mb24{
	margin-bottom:24px !important;
}
.mb25{ margin-bottom:25px;}
.mb30{ margin-bottom:30px;}
.mb32{ margin-bottom:32px;}
.mb40{ margin-bottom:40px;}
.mb48{ margin-bottom:48px;}
.mb50{ margin-bottom:50px;}

.only-sp{display:none;}
@media only screen and (max-width:750px),print{
	.only-sp{display:block;}
}

/* font size
----------------------------------------------------------------------------------------------*/
.fontL{
font-size:130% !important;
}
.fontLL{
font-size:150% !important;
}


/* position
----------------------------------------------------------------------------------------------*/
.fltL{
float:left;
}
.fltR{
float:right;
}

.clear{
zoom:1;
}
.clear:after{content:".";display:block;height:0;clear:both;visibility: hidden;}

.txtCenter{
text-align:center !important;
}
.txtRight{
text-align:right !important;
}
.txtLeft{
text-align:left !important;
}

.vAlineMiddle{
vertical-align:middle !important;
}


/* sectionLv
----------------------------------------------------------------------------------------------*/
.sectionLv01{
}
.sectionLv02{
margin-bottom:24px;
}
.sectionLv02Boder{
border:2px solid #f5e8e9;
border-top:none;
padding:14px;
}
.sectionLv03Boder{
border:2px solid #d9d9d9;
border-top:none;
padding:14px;
}
.sectionLv04Boder{
border:1px solid #cccccc;
border-top:none;
padding:14px;
}
.sectionLv03{
margin-bottom:16px;
}
.sectionLv04{
background: url(../images/line_dot_black.gif) repeat-x left top;
padding:16px 0 0;
margin:0;
}

/* font
----------------------------------------------------------------------------------------------*/
.bold{
font-weight:bold;
}

.textRed{
color:#9c1d2b;
}

/*a{
color:#1a7ee1;
text-decoration:none;
}*/
a{
color:#0000DD;
text-decoration:none;
}
a:hover{
color:#0099ff;
text-decoration:underline;
}



/* base style
----------------------------------------------------------------------------------------------*/
body{
background:#fff;
color:#333;
line-height:1.5;
width:100%;
min-width:1224px;
width:expression(document.body.clientWidth < 1226? "1224px" : "auto");
}
/* モバイル表示時のみmin-widthを解除 */
@media only screen and (max-width:750px),print{
	body{
		min-width:auto !important;
		width: 100% !important;
		overflow-x: hidden !important;
	}
}

/* header
----------------------------------------------------------------------------------------------*/
#header{
width:100%;
background: none;
height:144px;
border:none;
}
@media only screen and (max-width:750px),print{
	#header{
		height: auto !important;
	}
}
#header .header01{
width:100%;
background-color:#8f1a27;
height:30px;
}
@media only screen and (max-width:750px),print{
	#header .header01{height: 10px !important;}
}
#header .header01 .inner{
width:1200px;
height:30px;
margin:0 auto;
position:relative;
}
@media only screen and (max-width:750px),print{
	#header .header02, #header .header02 .inner {
	    height: 62px !important;
	}
}
#header .header02{
width:100%;
background-color:#fff;
height:112px;
border-bottom:2px solid #8f1a27;
}

#header .header02 .inner{
width:1200px;
height:112px;
margin:0 auto;
position:relative;
}
@media only screen and (max-width:750px),print{
	#header .header02 .inner{
		width:96% !important;
	}
}

#header .globalNavigation{
background: url(/common/images/nav_bg.gif) no-repeat left bottom;
position: absolute;
top:82px;
left:0;
}
.globalNavigation{
position: relative;
margin:0;
padding:0;
list-style:none;
zoom:1;
}
.globalNavigation:after{content:".";display:block;height:0;clear:both;visibility: hidden;}
.globalNavigation li{
float:left;
margin:0 0 0;
padding:0 0 0 1px;
}
.globalNavigation li.last{
margin:0 0 0;
padding:0 1px 0 1px;
}

#headerBlock01{
margin:0;
padding:0;
zoom:1;
}
#headerBlock01:after{content:".";display:block;height:0;clear:both;visibility: hidden;}
@media only screen and (max-width:750px),print{
	.head_poweredlist li{display:none}
}
#header .siteID{
	position:absolute;
	top:10px;
	left:0;
}
#header .siteID a img{
    width: 90%;
    height: auto;
}

#headerBlock01Inner{

}

#header .catch{
font-size:12px;
color:#fff;
margin:0;
padding:0;
position:absolute;
top:7px;
left:0;
width:100%;
}
@media only screen and (max-width:750px),print{
	#header .catch{display:none}
}
#header .lead{
font-size:12px;
color:#222;
margin:0;
padding:0;
position:absolute;
top:10px;
left:0;
width:100%;
font-weight:normal;
}

.btnBeginner{
position:absolute;
right:322px;
top:8px;
}

.btnRun{
position:absolute;
right:-4px;
top:0;
}

.btn_loginbefore{
position:absolute;
right:524px;
top:7px;
font-size:12px;
background: url(../images/head_icon_about.png) no-repeat 0 2px;
padding-left:22px;
}

.btn_loginbefore a { color: #fff; text-decoration:none; cursor: pointer;}
.btn_loginbefore a:visited { color: #fff;}
.btn_loginbefore a:hover   { color: #f4dbde; text-decoration:none;}

.btn_tm{
position:absolute;
right:124px;
top:7px;
font-size:12px;
background: url(../images/head_icon_book.png) no-repeat 0 2px;
padding-left:22px;
}

.btn_tm a { color: #fff; text-decoration:none; cursor: pointer;}
.btn_tm a:visited { color: #fff;}
.btn_tm a:hover   { color: #f4dbde; text-decoration:none;}

.btn_about{
position:absolute;
right:322px;
top:7px;
font-size:12px;
background: url(../images/head_icon_about2.png) no-repeat 0 2px;
padding-left:22px;
}

.btn_about a { color: #fff; text-decoration:none; cursor: pointer;}
.btn_about a:visited { color: #fff;}
.btn_about a:hover   { color: #f4dbde; text-decoration:none;}

.btn_outline{
position:absolute;
right:0px;
top:7px;
font-size:12px;
background: url(../images/head_icon_company.png) no-repeat 0 2px;
padding-left:22px;
}

.btn_outline a { color: #fff; text-decoration:none; cursor: pointer;}
.btn_outline a:visited { color: #fff;}
.btn_outline a:hover   { color: #f4dbde; text-decoration:none;}

/*.btn_about{
position:absolute;
right:322px;
top:7px;
font-size:12px;
background: url(../images/head_icon_about.png) no-repeat 0 2px;
padding-left:22px;
}

.btn_about a { color: #fff; text-decoration:none; cursor: pointer;}
.btn_about a:visited { color: #fff;}
.btn_about a:hover   { color: #f4dbde; text-decoration:none;}
*/
.fileText{
position:absolute;
top:23px;
right:0;
margin:0;
padding:0;
list-style:none;
zoom:1;
}
.fileText:after{content:".";display:block;height:0;clear:both;visibility: hidden;}
.fileText li{
float:left;
color:#222;
background: url(../images/head_icon_file.gif) no-repeat 0 0.7em;
padding:0 0 0 18px;
margin:0 12px 0 0;
}
.fileText li span{
font-weight:bold;
font-size:150%;
color:#ff7f21;
}
.fileText li.comp {
    background: url("../images/head_icon_company2.gif") no-repeat scroll 0 0.6em transparent;
}

.fileText li a{
color:#ff7f21;
}

.fileText li a:hover{
color:#36abff;
}

.fileText li a:hover span{
color:#36abff;
}


.head_rnav{
	list-style:none;
	margin:0;
	position:absolute;
	top:10px;
	left:260px;
}

.head_rnav li{
	float:left;
	margin-right:5px;
}







.loginName{
background:#fff;
color:#9a1d2a;
font-size:12px;
padding:2px 10px;
width:200px;
position:absolute;
right:522px;
top:4px;
text-align:center;
}

.head_category{
position:absolute;
left:0px;
top:133px;
font-size:14px;
background: url(../images/arrow_category.gif) no-repeat 0 0;
padding-left:128px;
font-weight:bold;
}

.head_serch{
position:absolute;
left:258px;
top:18px;
}

.head_serch input.searchTextBox {
border: 1px solid #ddd2d3;
margin: 0 15px 0 0;
padding: 8px;
width: 620px;
}


.linkimg a img {
background:none!important;
}
.linkimg a:hover img {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background:none!important;
}

/* mobile header
----------------------------------------------------------------------------------------------*/
.mobile{}
#header.mobile .header01 .inner {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
}
@media only screen and (max-width:750px),print{
	#header.mobile .header01 .inner {
    	width: 96%;
    }
}

/* ad_navi
----------------------------------------------------------------------------------------------*/

#adnavi{
width:100%;
border:none;
border-bottom:1px solid #edd5d8;
background:#f7eff0;
}
#adnaviInner{
width:1200px;
margin:0 auto;
padding:10px 0;
}
.adnavi_category{
font-size:14px;
background: url(../images/arrow_category.gif) no-repeat 0 0;
padding-left:128px;
font-weight:bold;
margin-bottom:0;
}

/* clearfix
--------------------------------------*/
.clearfix:after {
 content: "";
	display: block;
	height: 0;
	line-height:0;
	visibility: hidden;
	clear: both;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* topicPath
----------------------------------------------------------------------------------------------*/
#topicPath{
/*background:#f2f2f2;
min-height:42px;*/
zoom:1;
}
#topicPathInner{
width:1200px;
margin:0 auto;
padding:12px 0 0;
}
/* 
@media only screen and (max-width:750px),print{
	#topicPathInner{
	width: 100% !important;
}
}
*/
#topicPath p{
margin:0;
color:#666;
}
#topicPath p a{
color:#666;
}


/* contents
----------------------------------------------------------------------------------------------*/
#contents{
margin:0 auto;
padding-bottom:20px;
padding-top:16px;
width:1200px;
zoom:1;
}
/* 
@media only screen and (max-width:750px),print{
	#contents{
		width: 96% !important;
	}
}
*/
#contents:after{content:".";display:block;height:0;clear:both;visibility: hidden;}

#mainContents{
width:882px;
float:left;
zoom:1;
}
/* 
@media only screen and (max-width:750px),print{
	#mainContents{
	width: 100% !important;
    }
}
*/
#mainContentsForm{
width:1200px;
zoom:1;
}
/* 
@media only screen and (max-width:750px),print{
	#mainContentsForm{width: 100% !important;}
}
*/
#subContents{
position:relative;
width:300px;
float:right;
/*margin-top:-32px;
padding-top:16px;*/
zoom:1;
}

#mainContentsIndex{
width:882px;
float:left;
zoom:1;
}
#subContentsIndex{
position:relative;
width:300px;
float:right;
zoom:1;
}

.fileText2{
margin:0 0 20px 0;
padding:8px 14px;
list-style:none;
zoom:1;
background-color:#f7ead7;
border:2px solid #ffd0ae;
}
.fileText2:after{content:".";display:block;height:0;clear:both;visibility: hidden;}
.fileText2 li{
float:left;
color:#222;
background: url(../images/head_icon_file.gif) no-repeat 0 15px;
padding:0 0 0 18px;
margin:0 12px 0 0;
font-size:130%;
}
.fileText2 li span{
font-weight:bold;
font-size:160%;
color:#ff7f21;
}
.fileText2 li.comp {
    background: url("../images/head_icon_company2.gif") no-repeat scroll 0 15px transparent;
}

/* sub
----------------------------------------------------------------------------------------------*/

.sub_serch{
margin-bottom:20px;
}

.sub_serch input.searchTextBox {
border: 1px solid #ddd2d3;
margin: 0 15px 0 0;
padding: 8px;
width: 620px;
}

/* seo
----------------------------------------------------------------------------------------------*/
.seo_u {
    margin: 0 auto;
    padding-bottom: 15px;
    padding-top: 0;
    width: 1200px;
}
.text_seo_u {
    width: 882px;
}

.text_seo_t {
    font-size: 120%;
    font-weight: bold;
    padding: 0 14px;
    color: #9c1d2b;
}

/* footer
----------------------------------------------------------------------------------------------*/
#footer{
width:100%;
background:#f3f3f3 url(../images/foot_bg.gif) repeat-x left top;
padding-top:2px;
z-index:0;
}

#footerInner{
width:1200px;
margin:0 auto;
position:relative;
}
@media only screen and (max-width:750px),print{
	#footerInner{
		width:96% !important;
	}
}
#footerBlock01{
background:#f3f3f3 url(../images/foot_bg.gif) repeat-x left bottom;
height:142px;
position:relative;
}

.foot_tit{
	font-size:20px;
	font-weight:bold;
	position:absolute;
	top:25px;
	left:0;
}

.foot_txt01{
	font-size:12px;
	position:absolute;
	top:62px;
	left:0;
	width:490px;
}

.foot_logo{
	position:absolute;
	top:34px;
	right:149px;
}

.foot_txt02{
	font-size:12px;
	position:absolute;
	top:92px;
	right:134px;
}

.foot_pmark{
	position:absolute;
	top:32px;
	right:19px;
}


#footerBlock02{
height:142px;
position:relative;
margin-right:-19px;
padding:22px 0;
}
@media only screen and (max-width:750px),print{
	#footerBlock02{
	height: auto !important;
	margin-right: 0 !important;
}
}
.foot_txtlink{
	list-style:none;
	float:left;
	width:180px;
	margin-right:19px;
}


.foot_txtlink li{
font-size:12px;
background: url(../images/foot_arrow.gif) no-repeat 0 6px;
padding-left:12px;
margin-bottom:10px;
}

.foot_txtlink li a { color: #222; text-decoration:none; cursor: pointer;}
.foot_txtlink li a:visited { color: #222;}
.foot_txtlink li a:hover   { color: #888; text-decoration:none;}








#footer .globalNavigation{
width:976px;
margin:0 auto;
background: url(../images/gnavi_bg_new.gif) no-repeat left top;
}


ul.footerLink{
margin-right:160px;
margin-bottom:10px;
zoom:1;
}
ul.footerLink:after{content:".";display:block;height:0;clear:both;visibility: hidden;}
ul.footerLink li{
float:left;
border-right:1px solid #666666;
padding:0 10px 0 0;
margin:0 10px 0 0;
line-height:1.2em;
}
ul.footerLink li.last{
border-right:none;
padding:0 0 0 0;
margin:0 0 0 0;
}
ul.footerLink li a{
color:#333;
}

.foot_copy{
background:#8f1a27 repeat-x;
padding:10px 0;
}

address{
color:#fff;
font-size:80%;
margin:0 auto;
padding:0;
width:1200px;
}
@media only screen and (max-width:750px),print{
	address{
		width:100% !important;
	}
}
#footer .siteID{
position:absolute;
right:0;
top:17px;
}
/* button
----------------------------------------------------*/
div.formbtn {
	margin:0 auto 50px;
	text-align:center;
}
div.formbtn form,
div.formbtn span {
	display:inline-block;
	margin:10px;
    *display: inline;
    *zoom: 1;
}
div.formbtn .txt {
	font-size:1.25em;
	margin-bottom:1em;
}
div.formbtn button {
	color:#FFF;
	font-size:1.15em;
	font-weight:bold;
	padding:12px 10px;
	width:300px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	cursor:pointer;

}

div.formbtn_s button {
	color:#FFF;
	font-size:1.15em;
	font-weight:bold;
	padding:5px;
	width:80px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	cursor:pointer;
}

div.formbtn_ss button {
	color:#FFF;
	font-size:1.0em;
	font-weight:normal;
	padding:2px 3px;
	width:80px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	cursor:pointer;
}

div.formbtn p.gr button {
	border:1px solid #a2a2a2;
 background-color: #C5C5C5;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#C5C5C5), to(#888888));
 background-image: -webkit-linear-gradient(top, #C5C5C5, #888888);
 background-image: -moz-linear-gradient(top, #C5C5C5, #888888);
 background-image: -ms-linear-gradient(top, #C5C5C5, #888888);
 background-image: -o-linear-gradient(top, #C5C5C5, #888888);
 background-image: linear-gradient(to bottom, #C5C5C5, #888888);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#C5C5C5, endColorstr=#888888);
}
div.formbtn p.gr button:hover{
 background-color: #888888;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#888888), top(#C5C5C5));
 background-image: -webkit-linear-gradient(top, #888888, #C5C5C5);
 background-image: -moz-linear-gradient(top, #888888, #C5C5C5);
 background-image: -ms-linear-gradient(top, #888888, #C5C5C5);
 background-image: -o-linear-gradient(top, #888888, #C5C5C5);
 background-image: linear-gradient(to bottom, #888888, #C5C5C5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#888888, endColorstr=#C5C5C5);
}


div.formbtn p.bl button {
	border:1px solid #0681c8;
 background-color: #80bfe3;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#80bfe3), to(#0681c8));
 background-image: -webkit-linear-gradient(top, #80bfe3, #0681c8);
 background-image: -moz-linear-gradient(top, #80bfe3, #0681c8);
 background-image: -ms-linear-gradient(top, #80bfe3, #0681c8);
 background-image: -o-linear-gradient(top, #80bfe3, #0681c8);
 background-image: linear-gradient(to bottom, #80bfe3, #0681c8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0E6FBE, endColorstr=#084495);
}
div.formbtn p.bl button:hover{
 background-color: #0681c8;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#084495), top(#80bfe3));
 background-image: -webkit-linear-gradient(top, #0681c8, #80bfe3);
 background-image: -moz-linear-gradient(top, #0681c8, #80bfe3);
 background-image: -ms-linear-gradient(top, #0681c8, #80bfe3);
 background-image: -o-linear-gradient(top, #0681c8, #80bfe3);
 background-image: linear-gradient(to bottom, #0681c8, #80bfe3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#084495, endColorstr=#0E6FBE);
}

div.formbtn p.bl2 button {
	border:1px solid #084395;
 background-color: #0E6FBE;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#0E6FBE), to(#084495));
 background-image: -webkit-linear-gradient(top, #0E6FBE, #084495);
 background-image: -moz-linear-gradient(top, #0E6FBE, #084495);
 background-image: -ms-linear-gradient(top, #0E6FBE, #084495);
 background-image: -o-linear-gradient(top, #0E6FBE, #084495);
 background-image: linear-gradient(to bottom, #0E6FBE, #084495);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0E6FBE, endColorstr=#084495);
}
div.formbtn p.bl2 button:hover{
 background-color: #084495;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#084495), top(#0E6FBE));
 background-image: -webkit-linear-gradient(top, #084495, #0E6FBE);
 background-image: -moz-linear-gradient(top, #084495, #0E6FBE);
 background-image: -ms-linear-gradient(top, #084495, #0E6FBE);
 background-image: -o-linear-gradient(top, #084495, #0E6FBE);
 background-image: linear-gradient(to bottom, #084495, #0E6FBE);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#084495, endColorstr=#0E6FBE);
}


div.formbtn p.pk button {
	border:1px solid #B22B59;
 background-color: #0E6FBE;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#D54D9F), to(#B22B59));
 background-image: -webkit-linear-gradient(top, #D54D9F, #B22B59);
 background-image: -moz-linear-gradient(top, #D54D9F, #B22B59);
 background-image: -ms-linear-gradient(top, #D54D9F, #B22B59);
 background-image: -o-linear-gradient(top, #D54D9F, #B22B59);
 background-image: linear-gradient(to bottom, #D54D9F, #B22B59);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#D54D9F, endColorstr=#B22B59);
}
div.formbtn p.pk button:hover{
 background-color: #B22B59;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#B22B59), top(#D54D9F));
 background-image: -webkit-linear-gradient(top, #B22B59, #D54D9F);
 background-image: -moz-linear-gradient(top, #B22B59, #D54D9F);
 background-image: -ms-linear-gradient(top, #B22B59, #D54D9F);
 background-image: -o-linear-gradient(top, #B22B59, #D54D9F);
 background-image: linear-gradient(to bottom, #B22B59, #D54D9F);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#B22B59, endColorstr=#D54D9F);
}


div.formbtn p.or button {
	border:1px solid #fc7d23;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#FD9423), to(#F75223));
 background-image: -webkit-linear-gradient(top, #FD9423, #F75223);
 background-image: -moz-linear-gradient(top, #FD9423, #F75223);
 background-image: -ms-linear-gradient(top, #FD9423, #F75223);
 background-image: -o-linear-gradient(top, #FD9423, #F75223);
 background-image: linear-gradient(to bottom, #FD9423, #F75223);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FD9423, endColorstr=#F75223);
}
div.formbtn p.or button:hover{
 background-color: #B22B59;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#F75223), top(#FD9423));
 background-image: -webkit-linear-gradient(top, #F75223, #FD9423);
 background-image: -moz-linear-gradient(top, #F75223, #FD9423);
 background-image: -ms-linear-gradient(top, #F75223, #FD9423);
 background-image: -o-linear-gradient(top, #F75223, #FD9423);
 background-image: linear-gradient(to bottom, #F75223, #FD9423);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F75223, endColorstr=#FD9423);
}

div.formbtn p.grn button {
	border:1px solid #138F4D;
 background-color: #0E6FBE;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#1AB367), to(#0F7439));
 background-image: -webkit-linear-gradient(top, #1AB367, #0F7439);
 background-image: -moz-linear-gradient(top, #1AB367, #0F7439);
 background-image: -ms-linear-gradient(top, #1AB367, #0F7439);
 background-image: -o-linear-gradient(top, #1AB367, #0F7439);
 background-image: linear-gradient(to bottom, #1AB367, #0F7439);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1AB367, endColorstr=#0F7439);
}
div.formbtn p.grn button:hover{
 background-color: #084495;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#0F7439), top(#1AB367));
 background-image: -webkit-linear-gradient(top, #0F7439, #1AB367);
 background-image: -moz-linear-gradient(top, #0F7439, #1AB367);
 background-image: -ms-linear-gradient(top, #0F7439, #1AB367);
 background-image: -o-linear-gradient(top, #0F7439, #1AB367);
 background-image: linear-gradient(to bottom, #0F7439, #1AB367);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0F7439, endColorstr=#1AB367);
}

div.formbtn p.red button {
	border:1px solid #800000;
	background-color: #8b0000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cd5c5c), to(#8b0000));
	background-image: -webkit-linear-gradient(top, #cd5c5c, #8b0000);
	background-image: -moz-linear-gradient(top, #cd5c5c, #8b0000);
	background-image: -ms-linear-gradient(top, #cd5c5c, #8b0000);
	background-image: -o-linear-gradient(top, #cd5c5c, #8b0000);
	background-image: linear-gradient(to bottom, #cd5c5c, #8b0000);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cd5c5c, endColorstr=#8b0000);
}
div.formbtn p.red button:hover{
	background-color: #084495;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#8b0000), top(#cd5c5c));
	background-image: -webkit-linear-gradient(top, #8b0000, #cd5c5c);
	background-image: -moz-linear-gradient(top, #8b0000, #cd5c5c);
	background-image: -ms-linear-gradient(top, #8b0000, #cd5c5c);
	background-image: -o-linear-gradient(top, #8b0000, #cd5c5c);
	background-image: linear-gradient(to bottom, #8b0000, #cd5c5c);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8b0000, endColorstr=#cd5c5c);
}
.Tblform th span {
    color: #FF0000;
    font-size: 1.15em;
    margin-left: 0.5em;
}
/* head_social
--------------------------------------*/
#socialbuttons_header {
position: absolute;
    top: 2px;
    right: 312px;
}

.social {
    margin-bottom: 20px;
    margin-top: 8px;
    text-align: center;
}
.social li {
    display: inline-block;
    margin-right: 5px;
    position: relative;
}

.social__balloon {
    background: url("/common/images/social_btn/balloon_center.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 44px;
    left: 0;
    position: absolute;
    text-align: center;
    top: -41px;
    width: 100%;
    z-index: 100;
}
.social__balloon-target {
    cursor: pointer;
}
.social__balloon-close {
    cursor: pointer;
    position: absolute;
    right: -19px;
    top: -7px;
}
.social__balloon-close:hover {
    opacity: 0.7;
}
.social__balloon-left {
    float: left;
    margin-left: -16px;
}
.social__balloon-right {
    float: right;
    margin-right: -16px;
}
.social__balloon-arrow {
    bottom: 4px;
    position: absolute;
    text-align: center;
}
.social__balloon iframe {
    left: 0;
    position: absolute;
}
.social__balloon > div {
    left: 0;
    position: absolute;
}
.social__balloon--facebook {
    left: -16px;
    width: 100px;
}
.social__balloon--facebook iframe {
    margin-top: 7px;
    max-width: 150px;
}
.social__balloon--facebook .social__balloon-arrow {
    left: 24px;
}
.social__balloon--google {
    left: -26px;
    width: 100px;
}
.social__balloon--google .social__balloon-arrow {
    left: 33px;
}
.social__balloon--google iframe {
    margin-top: 7px !important;
}
.social__balloon--hatebu {
    left: -80px;
    width: 100px;
}
.social__balloon--hatebu iframe {
    margin-top: 7px;
}
.social__balloon--hatebu .social__balloon-arrow {
    left: 87px;
}

/* ==========================================
   レスポンシブ対応追加スタイル（既存に影響なし）
========================================== */

/* Figmaデザイン準拠：ハンバーガーメニュー - モバイルのみ表示 */
.hamburger-menu, 
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10001;
    background: transparent;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.hamburger-menu span,
.mobile-menu-toggle span {
    position: absolute;
    width: 24px;
    height: 2px;
    background: #333333;
    border-radius: 1px;
    transition: all 0.3s ease;
    left: 8px;
}

.hamburger-menu span:nth-child(1),
.mobile-menu-toggle span:nth-child(1) { top: 11px; }
.hamburger-menu span:nth-child(2),
.mobile-menu-toggle span:nth-child(2) { top: 19px; }
.hamburger-menu span:nth-child(3),
.mobile-menu-toggle span:nth-child(3) { top: 27px; }

.hamburger-menu.active span:nth-child(1),
.mobile-menu-toggle.active span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(2),
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3),
.mobile-menu-toggle.active span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
}

/* Figmaデザイン準拠：モバイルメニュー */
.mobile-menu {
    display: none;
    position: fixed;
    top: 60px;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: calc(100vh - 60px);
    background: #FFFFFF;
    z-index: 10000;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: none;
}

.mobile-menu-search {
    padding: 20px 15px;
    background: #F8F8F8;
    border-bottom: 1px solid #E5E5E5;
}

.mobile-menu-search input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 16px;
    background: #FFFFFF;
    -webkit-appearance: none;
}

.mobile-menu-search button {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: #8f1a27;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.mobile-menu-content {
    padding: 0;
}

.mobile-menu-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-nav li {
    border-bottom: 1px solid #F0F0F0;
}

.mobile-menu-nav a {
    display: block;
    padding: 18px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    transition: background 0.2s ease;
}

.mobile-menu-nav a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
    background: #F8F8F8;
    color: #333333;
}

/* オーバーレイ */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
}

.menu-overlay.active {
    display: block;
}

/* サイドバー用のボタン */
.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #8f1a27;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 9000;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

/* レスポンシブメディアクエリ（タブレット除外、デスクトップとモバイルのみ） */
/* デスクトップでは既存のスタイルを維持するため、メディアクエリは750px以下のみに適用 */

/* JavaScriptによるモバイル検出クラス */
.is-mobile,
.is-mobile body,
body.is-mobile {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* スマートフォン・モバイル表示（480px以下）*/
@media screen and (max-width: 480px) {
    /* 基本リセット - 最優先 */
    html, body {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* すべての要素の幅制限解除 */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* bodyの最小幅を完全に解除 */
    body {
        min-width: auto !important;
        width: 100% !important;
        font-size: 14px !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* ハンバーガーメニュー確実に表示 */
    .hamburger-menu,
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media only screen and (max-width: 750px) {
    /* ボディの最小幅を解除 */
    body {
        min-width: auto !important;
        width: 100% !important;
        overflow-x: hidden;
    }
    
    /* ヘッダーの調整 */
    #header {
        height: 70px !important;
        position: relative;
    }
    
    #header .header01 {
        height: 0 !important;
        display: none;
    }
    
    #header .header02 {
        height: 70px !important;
        border-bottom: 2px solid #8f1a27;
    }
    
    #header .header02 .inner {
        height: 70px !important;
        padding: 0 15px;
    }
    
    #header .siteID {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 100;
    }
    
    #header .siteID img {
        height: 40px;
        width: auto;
    }
    
    /* PCナビゲーションを非表示 */
    #header .globalNavigation,
    .head_rnav,
    .head_serch,
    .fileText,
    .btnBeginner,
    .btnRun,
    .btn_loginbefore,
    .btn_tm,
    .btn_about,
    .btn_outline {
        display: none !important;
    }
    
    /* ハンバーガーメニューを表示 */
    .hamburger-menu,
    .mobile-menu-toggle {
        display: flex !important;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
    }
    
    /* モバイルメニューを初期は非表示に */
    .mobile-menu {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        right: -100% !important;
        width: 80% !important;
        max-width: 320px !important;
        height: calc(100vh - 60px) !important;
        background: #FFFFFF !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        transition: right 0.3s ease !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-menu.active {
        right: 0 !important;
    }
    
    /* オーバーレイ */
    .mobile-overlay,
    .menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9999 !important;
    }
    
    .mobile-overlay.active,
    .menu-overlay.active {
        display: block !important;
    }
    
    /* コンテンツエリア */
    #contents {
        width: 100% !important;
        padding: 10px !important;
        margin-top: 0 !important;
    }
    
    #mainContents,
    #mainContentsForm,
    #mainContentsIndex {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    
    /* サイドバーを初期非表示 */
    #subContents,
    #subContentsIndex {
        display: none;
        width: 100% !important;
        float: none !important;
        margin-top: 30px;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
    }
    
    #subContents.mobile-show,
    #subContentsIndex.mobile-show {
        display: block;
    }
    
    .sidebar-toggle {
        display: flex;
    }
    
    /* トップページ特有の要素 */
    .topbox .lbox {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    
    .topbox .rbox {
        width: 100% !important;
        float: none !important;
    }
    
    .topbox .rbox .list {
        margin-right: 0 !important;
    }
    
    .topbox .rbox .list li {
        width: 48% !important;
        margin: 0 1% 15px !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    
    /* フッター調整 */
    #footer {
        padding: 20px 0;
    }
    
    #footerInner {
        width: 96% !important;
        padding: 0 2%;
    }
    
    #footerBlock01 {
        height: auto !important;
        padding: 20px 0;
    }
    
    .foot_tit,
    .foot_txt01,
    .foot_logo,
    .foot_txt02,
    .foot_pmark {
        position: static !important;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .foot_txtlink {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }
    
    /* テーブルのレスポンシブ化 */
    table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 画像のレスポンシブ化 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* フォーム要素の調整 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* ボタンの調整 */
    .formbtn button {
        width: 100% !important;
        max-width: 300px;
    }
    
    /* パンくずリストの調整 */
    #topicPath {
        font-size: 12px;
        padding: 10px 15px;
    }
    
    #topicPathInner {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* 検索ボックスの調整 */
    .head_serch input.searchTextBox,
    .sub_serch input.searchTextBox {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    
    /* リストの調整 */
    .submit-list {
        flex-direction: column !important;
    }
    
    .submit-list-item {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* カードレイアウトの調整 */
    .card {
        width: 100% !important;
    }
    
    /* 広告エリアの調整 */
    .ads-section__list {
        flex-direction: column !important;
    }
    
    .ads-section__item {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* タブレット対応は除外 - デスクトップとモバイルの2段階のみ */

/* アニメーション */
@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ホバー無効化（タッチデバイス用） */
@media (hover: none) {
    .linkimg a:hover img {
        opacity: 1 !important;
    }
}

/* ==========================================
   Figmaデザイン準拠のモバイル対応
   最優先度の設定で確実にモバイル表示を実現
========================================== */
@media screen and (max-width: 750px) {
    /* body要素の最小幅制限を完全に解除 */
    html, body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    }
    
    /* viewportに合わせたレイアウト強制 */
    body * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Figmaデザイン準拠：bodyのパディング調整 */
    body {
        background: #f5f5f5 !important;
    }
    
    /* メインコンテナの幅調整 */
    #contents,
    #mainContents,
    #mainContentsForm,
    #mainContentsIndex,
    #topicPathInner,
    #footerInner,
    .container,
    .inner {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px;
        box-sizing: border-box !important;
    }
    
    /* Figmaデザイン準拠：固定ヘッダー */
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E5E5E5 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
        z-index: 9999 !important;
    }
    
    #header .header01 {
        display: none !important;
    }
    
    #header .header02 {
        height: 60px !important;
        background: #FFFFFF !important;
        border: none !important;
    }
    
    #header .header02 .inner {
        width: 100% !important;
        height: 60px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* ロゴ表示と位置調整 - 左側に固定 */
    #header .siteID {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        z-index: 10002 !important;
    }
    
    #header .siteID img {
        height: 35px !important;
        width: auto !important;
        max-width: 180px !important;
        display: block !important;
    }
    
    #header .siteID a {
        display: block !important;
    }
    
    /* ハンバーガーメニューとその他の要素のコンテナ */
    .mobile-header-actions {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 10002 !important;
    }
    
    /* 検索アイコン（ヘッダー内） */
    .mobile-search-icon {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .mobile-search-icon::before {
        content: "🔍" !important;
        font-size: 20px !important;
        color: #333 !important;
    }
    
    /* モバイル用ログイン・新規登録ボタン（ヘッダー内） */
    .mobile-auth-buttons {
        display: flex !important;
        gap: 8px !important;
    }
    
    .mobile-auth-buttons a {
        display: block !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }
    
    .mobile-auth-buttons .btn-login {
        background: #fff !important;
        color: #8f1a27 !important;
        border: 1px solid #8f1a27 !important;
    }
    
    .mobile-auth-buttons .btn-register {
        background: #8f1a27 !important;
        color: #fff !important;
        border: 1px solid #8f1a27 !important;
    }
    
    /* 固定幅要素を相対幅に変更 */
    [style*="width:"][style*="px"],
    [width] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* テーブルを横スクロール可能に */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 画像のレスポンシブ化 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* フォントサイズの調整 */
    body {
        font-size: 14px !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* 横スクロールの原因となる要素を制御 */
    .submit-list-wrap,
    .submit-list,
    ._rcmdjp_display_wrap {
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* フロートレイアウトを解除 */
    .fltL,
    .fltR,
    [style*="float:"] {
        float: none !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
    
    /* ナビゲーション系を非表示 */
    .globalNavigation,
    .head_rnav,
    .head_serch,
    .fileText,
    .btn_loginbefore,
    .btn_tm,
    .btn_about,
    .btn_outline,
    ul.footerLink,
    #header .catch,
    #header .lead,
    .loginName,
    #socialbuttons_header {
        display: none !important;
    }
    
    /* ハンバーガーメニュー表示（右端に配置） */
    .hamburger-menu,
    .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        z-index: 10003 !important;
        width: 35px !important;
        height: 35px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    .hamburger-menu span,
    .mobile-menu-toggle span {
        position: absolute !important;
        width: 22px !important;
        height: 2px !important;
        background: #333 !important;
        transition: all 0.3s ease !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .hamburger-menu span:nth-child(1),
    .mobile-menu-toggle span:nth-child(1) { 
        top: 25% !important;
    }
    
    .hamburger-menu span:nth-child(2),
    .mobile-menu-toggle span:nth-child(2) { 
        top: 50% !important;
        transform: translateX(-50%) translateY(-50%) !important;
    }
    
    .hamburger-menu span:nth-child(3),
    .mobile-menu-toggle span:nth-child(3) { 
        bottom: 25% !important;
    }
    
    /* モバイルメニュー（スライド式） */
    .mobile-menu,
    .modern-nav.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: #FFFFFF !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        transition: right 0.3s ease !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-menu.active,
    .modern-nav.mobile-open {
        right: 0 !important;
    }
    
    /* モバイルメニュー内の検索バー */
    .mobile-search-section {
        padding: 20px 15px !important;
        background: #f8f8f8 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    
    .mobile-search-section input {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    
    .mobile-search-section button {
        width: 100% !important;
        margin-top: 10px !important;
        padding: 12px !important;
        background: #8f1a27 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    
    /* モバイルメニュー内のナビゲーション */
    .mobile-menu-nav,
    .modern-nav.mobile-open {
        padding: 0 !important;
        list-style: none !important;
        margin: 0 !important;
    }
    
    .mobile-menu-nav li,
    .modern-nav.mobile-open > li {
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .mobile-menu-nav a,
    .modern-nav.mobile-open > li > a {
        display: block !important;
        padding: 18px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        position: relative !important;
    }
    
    /* モバイルメニュー内の認証ボタン */
    .mobile-auth-section {
        padding: 20px !important;
        background: #f8f8f8 !important;
        border-top: 2px solid #8f1a27 !important;
    }
    
    .mobile-auth-section a {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        text-align: center !important;
        margin-bottom: 12px !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 16px !important;
    }
    
    .mobile-auth-section .btn-register {
        background: #8f1a27 !important;
        color: #fff !important;
    }
    
    .mobile-auth-section .btn-login {
        background: #fff !important;
        border: 2px solid #8f1a27 !important;
        color: #8f1a27 !important;
    }
    
    .mobile-auth-section .btn-contact {
        background: #f0f0f0 !important;
        color: #666 !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }
    
    /* サイドバーのレスポンシブ化 */
    #subContents,
    #subContentsIndex {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    }
    
    /* メインコンテンツエリア */
    #contents {
        padding-top: 20px !important;
    }
    
    /* Figmaデザイン準拠：ヒーローセクション */
    .mobile-hero {
        background: #fff !important;
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .mobile-hero h1 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }
    
    .mobile-hero p {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.6 !important;
    }
    
    /* Figmaデザイン準拠：カードレイアウト */
    .card,
    .submit-list-item {
        background: #fff !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        width: 100% !important;
    }
    
    .card h3,
    .submit-list-item h3 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    .card p,
    .submit-list-item p {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
    
    /* ボタンスタイル */
    button,
    input[type="submit"],
    input[type="button"],
    .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }
    
    /* フッター調整 */
    #footer,
    #footerBlock01,
    #footerBlock02 {
        width: 100% !important;
        height: auto !important;
        padding: 20px 15px !important;
        background: #2c3e50 !important;
        color: #fff !important;
    }
    
    .foot_txtlink {
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
    }
    
    .foot_txtlink a {
        color: #fff !important;
        opacity: 0.9;
    }
    
    /* トピックパス非表示 */
    #topicPath {
        display: none !important;
    }
}

/* iPhone X以降のノッチ対策 */
@supports (padding: max(0px)) {
    @media screen and (max-width: 750px) {
        #header {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(60px + env(safe-area-inset-top)) !important;
        }
                
        .mobile-menu {
            top: calc(60px + env(safe-area-inset-top)) !important;
            height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
        }
        
        .menu-overlay {
            top: calc(60px + env(safe-area-inset-top)) !important;
            height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
        }
        
        #footer {
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* 小さいデバイス用の追加調整 */
@media screen and (max-width: 380px) {
    body {
        font-size: 13px !important;
    }
    
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    
    button,
    input[type="submit"],
    input[type="button"] {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }
}

?>