@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
a:link { color: #666666; text-decoration: underline;}
a:visited { color: #666666; }
a:hover { color: #666666; }
a:active { color: #666666; }

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
	

/* 便利なもの */
hr.style0 {
	border-top: 1px solid #f6ab00;
	width: 100%;
margin: 0 0 0 0;
padding: 0;}
hr.style1{
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
	width: 100%;
	margin-bottom: 10px;}
hr.style2 {
	border-top: 1px dashed #8c8b8b;
	width: 100%;
	margin: 15 0px;}
hr.style3 {
	border-top: 1px dashed #8c8b8b;
	width: 100%;
	margin:5 0 10 0px;}
.center{text-align: center;}




.mb10{margin-bottom: 10px;}
.ml20{margin-left: 20px;}



ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{color:#555;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;
-webkit-text-size-adjust:100%;
font-style: inherit;
font-weight: inherit;}




#header .headform{
float:none;
padding:10px;
}
	
/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0px auto 0;
padding:0 1%;
width:98%;
position:relative;
}


/*************
/* ヘッダー
*************/
#header{
z-index:100;
margin:10px 0px;
background-color: #fff;
}



#header:after{
content:"";
display: block;   
clear:both; 
visibility:hidden;
}

#header h1{
font-size:12px;
font-weight:normal;
}

/*************
/* ロゴ
*************/
#header .logo{
float:left;
padding:10px;
}

.logo a{
font-size:20px;
color:#444;
font-weight:bold;
line-height:1;
}

.logo span{
font-size:12px;
font-weight:normal;
}

#header h1{
font-size:11px;
color:#444;
margin:10px 0 0;
}




	/* --- フッター全体の基本スタイル --- */
	#footer {
    background-color: #ededed;
    color: #333;
    padding: 40px 20px 20px;
    line-height: 1.6;
}
		#footer a {
			color: #333;
			text-decoration: none;
		}
		#footer a:hover {
			text-decoration: underline;
		}
		#footer .inner {
			max-width: 1000px;
			margin: 0 auto;
		}

		/* --- ロゴ & キャッチコピー --- */
		#footer .foot-logo-area {
			text-align: center;
			margin-bottom: 20px;
		}
		#footer .foot-logo-area img {
			height: auto;
			vertical-align: middle;
		}
		#footer .catchphrase {
			display: block;
			font-size: 12px;
			margin-top: 15px;
			color: #555;
		}

		/* --- 上部コンテンツ（SNS & 会員登録） --- */
		.footer-top-widgets {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
			padding-bottom: 20px;
		}
		.widget-box {
			flex: 1;
			min-width: 280px;
			text-align: center;
			margin: 15px 10px;
		}
		.widget-box h4 {
			font-size: 15px;
			margin: 0 0 5px;
			font-weight: bold;
		}
		.widget-box .sub-txt {
			font-size: 12px;
			margin: 0 0 15px;
			color: #666;
		}
		/* SNSアイコン */
		.sns-links {
			display: flex;
			justify-content: center;
			gap: 15px;
		}
		.sns-links img {
			width: 45px; /* アイコンのサイズ調整 */
			height: auto;
			transition: opacity 0.2s;
		}
		.sns-links img:hover {
			opacity: 0.8;
		}
		/* 会員登録ボタン */
	.btn-member {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px 10px;
    font-size: 13px;
    min-width: 260px;
    box-sizing: border-box;
    transition: background-color 0.2s, color 0.2s;
}
		.btn-member:hover {
			background-color: #333;
			color: #fff !important;
			text-decoration: none !important;
		}
		.btn-member::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 25px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') no-repeat center center;
    background-size: contain;
    margin-right: 8px;
}
		.btn-member:hover::before {
			/* ホバー時にアイコンの色を白にする反転処理 */
			filter: invert(1);
		}

		/* --- 下部ナビゲーション（4カラムリンク） --- */
		.footer-links-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.link-column {
			width: 22%;
			min-width: 160px;
			margin-bottom: 25px;
		}
		.link-column h5 {
			font-size: 14px;
			font-weight: bold;
			margin: 0 0 15px 0;
			position: relative;
		}
		.link-column ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.link-column ul li {
			margin-bottom: 10px;
			font-size: 13px;
		}

		/* --- コピーライト --- */
		.copyright {
			text-align: center;
			font-size: 11px;
			color: #777;
			margin-top: 20px;
		}



/* PC用　960px以上
------------------------------------------------------------*/
@media only screen and (min-width:769px) {

#wrapper,.inner{
width:100%;
padding:0;
}

#wrapper{width:100%;padding-bottom:20px;}

/* トップナビゲーション */
nav div.waku{display:block !important;}

a#menu{display:none;}

#topNav{
float:right;
font-weight: normal;
}

#topNav li{
float:left;
margin:25px 5px 0;
text-align:center;
	font-weight: normal;
position:relative;
}

#topNav a {
    color: #555;
    font-size: 13px;
    display: block;
    padding: 20px 3px;
    line-height: 1.2;
}
#topNav span{
font-size:11px;
color:#555;
}
#topNav p.sd{
font-size:11px;
color:#555;
}	

#topNav li.toplink a,#topNav a:hover{
background:#ffffff;
}

#topNav ul{
width:160px;
display:none;
}

#topNav li:hover ul{
display:block;
position:absolute;
top:60px;
left:0;
z-index:500;
}

#topNav li li{
margin:0;
float:none;
width:200px;
text-align:left;
background:#f4f4f4;
}

#topNav li li a{
padding:10px;
border:0;
}

#topNav li.toplink li a,#topNav li li a{
border-top-width:1px;	
border-bottom-width:1px;
}

#topNav li li.toplink a,#topNav li li a:hover{
padding-bottom:12px;
border-bottom-width:4px;
}
.pc_noview {display: none;border:0;}	
.pc_noview2 {display: none;border:0;}		
	#header3{margin-top: -50px;}	
}



/* スマホ用 768px以下の場合
------------------------------------------------------------*/

@media only screen and (max-width:768px){

#header{
	padding-bottom:0;
	position:  relative;
	z-index: 999;
	overflow-x: hidden;
	}
#header h1{text-align:center;}

#header .logo{
float:none;
text-align:center;
padding:60px 5px 20px;
}


#header .headform{
float:none;
}
.headform .input_inq1	{width: 70%;}	
	
	

/* トップナビゲーション */
nav#GroNav{
clear:both;
width:100%;
margin:0 auto;
padding:0;
	}


nav .waku{
width:100%;
position:relative;
right:0;
top:0;
z-index:999;
}

nav#GroNav ul{margin:0;padding:0;
	}

nav#GroNav ul li{
float:none;
clear:both;
width:100%;
/* height:auto;*/
line-height:1.3;
}

nav#GroNav ul li a,nav#GroNav ul li.toplink li a{
padding:12px;
text-align:left;
color:#555;
}

nav#GroNav ul li a span{padding-left:10px;}
nav#GroNav ul li a p.sd{padding-left:-10px;font-size:11px;
color:#555;}	
nav#GroNav ul li:last-child a{border:0;}
nav#GroNav ul li li:last-child a{border:0;}

nav div.waku{float:none;}

nav#GroNav ul li li{
float:left;
border:0;
}
nav#GroNav ul li li a, nav#GroNav ul li.toplink li a, nav#GroNav ul li li.toplink a{
padding-left:40px;
}
nav#GroNav ul li a:hover{background:#eee;}

	
#sub ul.list{padding:10px 10px 11px;}

#sub ul.list li{padding-bottom:10px;margin-bottom:8px;}
}
.pc_noview {height: 86px;border:0;}	
.pc_noview2 {height: 40px;border:0;}	
.footer-top-widgets {
				flex-direction: column;
				align-items: center;
				padding-bottom: 20px;
			}
			.widget-box {
				width: 100%;
				margin-bottom: 30px;
			}
			.footer-links-container {
				justify-content: flex-start;
			}
			.link-column {
				width: 50%; /* スマホ時は2カラムずつ並べる */
			}

		@media screen and (max-width: 480px) {
			.link-column {
				width: 50%; /* 極小画面では1カラム（縦並び） */
				text-align: center;
			}
		}
}