@charset "utf-8";
@import url("common.css");
@import url("bootstrap.css");



/* common */
BODY { margin:0 auto; font-size:14px; font-family: 'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Verdana,'ＭＳ Ｐゴシック',Osaka,Arial,sans-serif; }
TEXTAREA { font-size:100%; }

A:link { color:#06F }
A:visited { color:#06F }
A:hover { color:#06C }
HR { display:none; clear:both; }
BR.clear { clear:both; }
IMG { border:none }








FOOTER {
	bottom: 0;
	font-size: 0.9rem;
//	position: absolute;
}


/***************** // card ****************/

.card {
    margin-top: 1rem;
    border: none;
}


.card-header {
/*
    background-color: #f47ed4;
    background-color: #158ED0;
    background-color: #00bfff;
*/
	background: linear-gradient(#F79336 65%, #F6711D 35%);
    color: #fff;
	padding: 0.3rem;
	border-radius: 0.5em;	/* 角の丸み */
    font-size: 1.0rem;
}



H2.card-header {
    font-size: 1.0rem;
}

H3.card-header {
    font-size: 1.0rem;
}


/*
H3.card-header {
    color: #343a40;
    background-color: rgba(52,150,216,.3);
    padding: .5rem;
    border-bottom: 3px solid #007bff;
	border-radius: 0.5em;	/* 角の丸み */
}
*/

H4.card-header {
    color: #fff;
/*    background-color: #17a2b8; */
    padding: .5rem;
/*    border-left: 3px solid #007bff; */
	border-radius: 0.5em;	/* 角の丸み */
    font-size: 1.0rem;
}



.card {
    margin-top: 1rem;
}


.card-header a {
    color: #fff;
}

.card-body {
	margin-top: 5px;
	padding: 1rem;
	border:2px solid #F79336;
	clear:both;
	border-radius:10px;
	overflow:hidden;
}



.card_explain, .form_explain {
	padding :       5px;
	margin-bottom : 15px;
}


DIV.search_catg .card-body { background:#FFFFCC; }

/***************** card // ****************/



/***************** // footer menu ****************/

.footer_menu {
	background-color: #EEEEEE;
}

.footer_menu .list-group-item {
	border: none;
	padding-left : 0.75rem;
	padding-right : 0.75rem;
	font-size: 0.8rem;
/*	margin-bottom : 0;	*/
}

.footer_menu .card-body {
	border: none;
}

/***************** footer menu // ****************/

.main {
	overflow: hidden;
}


.breadcrumb {
	background:transparent;
	background-color: #fff;
  	padding: 0.25rem 0.25rem;
	margin-bottom: 0.25rem;
}
.breadcrumb li+li:before {
  content:'»';
}


.required { background: #ff4200 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 10px; margin-left: 5px; padding: 1px 3px; white-space: nowrap; }


.form-group {
    margin-bottom: 1rem;
}


.submit { margin-left:auto; margin-right:auto; text-align:center; }

.page_explain { margin-top:20px; text-align:left; font-size:1.0em; }



/***************** // auth_site ****************/


.oauth_site {
	width: 396px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}



.oauth_site .oauth_item {
	align-items: center;
	display: flex;
	border: 2px solid #ced4d6;
	border-radius: 5px;
	color: #000;
	padding: 0.5em;
}

.oauth_item A {
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
  color: inherit; /* リンクの色を親要素から継承 */
  text-decoration: none; /* 下線を削除（リンクの下線を削除） */
}


.oauth_item IMG {
	max-width: 100%;
	width: 24px;
	height: auto;
	margin-right: 10px;
}

.oauth_item SPAN {
	flex: 1;
	text-align: center;
	font-weight: 700;
}


/***************** auth_site // ****************/


/***************** // responsive ****************/



@media (min-width: 992px) {

	html {
		font-size: 1rem;
	}

    .navbar {
      flex-flow: wrap;
	}
/*
    #navbarNav {
      display: none !important;
    }
*/
    .sidebar .list-group-item {
      padding: .5rem .75rem;
    }
    .dropdown-divider {
      margin: .1em 0;
    }
    .jq_mg {
      margin-top: 0 !important;
    }
}

@media (max-width: 991px) {

	html {
		font-size: 1rem;
	}

    .main_menu {
        font-size: 100%;
    }
    ul.drawer-menu .list-group-item {
        background-color: transparent;
        border: none;
        padding: 0;
    }
    ul.drawer-menu .list-group-item a {
        color: rgba(255,255,255,1);
        padding: 0.5rem 0;
        display: block;
    }
    #openNav {
        height: 0;
    }
    main {
        position: relative;
    }
    .aside, .card.bd-none {
        position: static;
        margin: 0;
        background: transparent;
        border: none;
    }
    #openNav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
//      background: #17a2b8;
//        background: #f47ed4;
        background: #00bfff;
        padding: .5rem 1rem;
    }
    .jq_mg {
        transition: all 0.5s ease 0s;
    }

	.navbar-brand img {
	    max-width: 200px;
	}
}

@media (max-width: 575px) {

	html {
		font-size: 0.8rem;
	}

	.navbar-brand img {
	    max-width: 130px;
	}

	.navbar-brand H1 {
		font-size: 1.2rem;
	}

    .navbar-toggler {
        padding: .3rem .55rem;
        font-size: 1rem;
    }
}


@media (max-width: 576px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    flex-basis: 18%;
/*    max-width:  18%; */
  }
}

@media (min-width: 577px) and (max-width: 992px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    flex-basis: 12.5%;
/*    max-width:  12.5%; */
  }
}

@media (min-width: 993px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    flex-basis: 6.5%;
/*    max-width:  6.6%; */
  }
}




/***************** responsive// ****************/













/* width */


/* usr_entry関連 */
.usr_entry { text-align:center; margin:20px; border:1px solid #3333ee; padding:10px; background-color:#CCCCFF; }
.usr_entry_inside { text-align:center; margin:5px; background-color:#EEEEFF; padding:10px; }
.usr_entry_title { margin:30px; font-size:110%; text-align:center; color:#0000FF; font-weight:bold; }
.usr_entry_detail { margin:30px 50px; text-align:center; line-height:150%;  }



/* window warning */
.window_warning { margin:30px; text-align:center; }
.window_warning H1 { padding:10px; text-align:center; color:#FF0000; }
.window_warning .warning{ text-align:left; }
.window_warning FORM { margin:30px auto; text-align:center; }


.facebook { vertical-align:middle; }

.colorTitle { background: none repeat scroll 0 0 #98D6FF; font-weight:bold; }
.boxIn .usr_title:after { content:""; clear:both; height:0; display:block; visibility:hidden; }
.usr_title { background: none repeat scroll 0 0 #E8E8E8; }
.usr_title .usr_uhandle { vertical-align:middle; padding:2px; font-weight:bold; text-align:left; }
.usr_title .usr_age { font-size:80%; }




/* layout */
#gl_head { padding:2px 0 0 0; background:#F1F1F1; border-top:#999 1px solid; border-bottom:#999 1px solid; text-align:left }
#tabarea { clear:both; }
DIV.tabarea_btm  { background:url(/img/bg_top1.gif) repeat-x; clear:both; padding-top:5px }


#main { margin-bottom:20px }
#contents2nd {}
#contents3nd { width:560px; float:right }
#contents_full { margin:auto }

#go_menu { margin:30px; text-align:center; line-height:300% }

/* gl_head */
#gl_head DIV.cl { clear:both; height:1px; font-size:0; line-height:0; }
#gl_head #help { float:right; clear:both }
#gl_head #help IMG { vertical-align:top }
#gl_head #status_login { float:right; vertical-align:middle; margin-right:5px; }


/* bottom */
DIV.btm { font-size:0;line-height:0; clear:both }



H1.title {
	font-size:1.2rem;
	background: linear-gradient(#F79336 65%, #F6711D 35%);
	color:#FFF;
	padding:0.5rem;
}

H2.title {
	font-size:1.1rem;
	background: linear-gradient(#F79336 65%, #F6711D 35%);
	color:#FFF;
}

H3.title {
	font-size:1.0rem;
	background: linear-gradient(#F79336 65%, #F6711D 35%);
	color:#FFF;
}


P.title { margin:10px 0 0 10px; padding-left:10px; font-size:15px; color:#FF4A16; font-weight:bold }

H1.text { margin:10px 0 0 10px; padding-left:10px; font-size:15px; color:#FF4A16; }
H2.text { margin:10px 0 0 10px; padding-left:10px; font-size:15px; color:#FF4A16; }
H3.text { margin:10px 0; font-size:15px; color:#FF4A16; }


DIV.btn_list A { margin-right:8px; padding:0.3em 0.5em; display:block; float:right; border:1px solid #CCC; background:#FFF; color:#666; font-weight:bold; font-size:90%; text-decoration:none; }



/* --// block -- */
DIV.block DIV.box { border:2px solid #CCC; clear:both; border-radius:10px; overflow:hidden; }
DIV.block DIV.comment { margin-top:-20px; margin-right:75px; _margin-right:42px; float:right; font-size:80%; color:#FFF }
/* RSS */
DIV.btn_rss A { width:60px; height:14px; margin-top:-21px; margin-right:8px; text-indent:-5000px; display:block; overflow:hidden; float:right; background:url(/img/btn_rss.gif) no-repeat }
DIV.list_button A { width:45px; height:15px; margin-top:-22px; margin-right:8px; text-indent:-5000px; display:block; overflow:hidden; float:right; background:url(/images/listbutton_01.gif) no-repeat }

DIV.vote_btn A { width:75px; height:20px; margin-top:-20px; text-indent:-5000px; display:block; overflow:hidden; float:right; background:url(/images/info_up_btn.gif) no-repeat }

/* -- block //-- */

/* border_radius */
.border_radius { border:2px solid #F79336; background:#FFFFCC; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; vertical-align:top; padding:10px 4px; margin:auto; }



.block_h2_btm { width:100%; height: 5px; background:url(/img/area/block_h2_btm.gif) repeat-x; font-size:0; line-height:0 }

.green_table TABLE { width:100%; border-collapse:collapse; font-size:90%; }
.green_table TH { color:#FFFFFF; background-color:#82CBDB; padding:5px; text-align:center;border:1px solid #059EC4;  }
.green_table TD { padding:5px; background-color:#FFFFFF; border:1px solid #059EC4; }


/* header */
IMG#logo { float:left }
#head BR { display:none }
#head DIV.cl { clear:both; height:1px; font-size:0; line-height:0; }
#h_title { margin-left:10px; display:block; text-indent:-999em; font-size:1px; float:left }
#h_copy { width:200px; height:17px; margin-left:8px; margin-top:40px; background:url(/img/h_copy.gif) no-repeat 0 bottom; display:block; text-indent:-999em; font-size:1px; float:left}
#h_special { color:#FF267D; font-size:18px; font-weight:bold; float:left; margin-top:35px }
#h_copy2 { width:200px; height:17px; margin-left:8px; background:url(/img/h_copy.gif) no-repeat 0 bottom; display:block; text-indent:-999em; font-size:1px; float:left }


/* tabarea */
#tabarea UL { margin:7px 0 0 0; padding:0; }
#tabarea UL.tab_l { float:left }
#tabarea UL.tab_r { float:right }
#tabarea LI { float:left; list-style:none; text-indent:-5000px;}
#tabarea LI A { overflow:hidden }
#tabarea LI.t1 A { width:166px; height:28px; display:block; background:url(../img/tab/navi_tab1.gif) no-repeat}
#tabarea LI.t1 A:hover { background:url(/img/tab/navi_tab1_mv.gif) no-repeat }
#tabarea LI.t1 A.on { background:url(/img/tab/navi_tab1_mv.gif) no-repeat }
#tabarea LI.t2 A { width:166px; height:28px; display:block; background:url(/img/tab/navi_tab2.gif) no-repeat }
#tabarea LI.t2 A:hover { background:url(/img/tab/navi_tab2_mv.gif) no-repeat }
#tabarea LI.t2 A.on { background:url(/img/tab/navi_tab2_mv.gif) no-repeat }
#tabarea LI.t3 A { width:166px; height:28px; display:block; background:url(/img/tab/navi_tab3.gif) no-repeat }
#tabarea LI.t3 A:hover { background:url(/img/tab/navi_tab3_mv.gif) no-repeat }
#tabarea LI.t3 A.on { background:url(/img/tab/navi_tab3_mv.gif) no-repeat }
#tabarea LI.t4 { float:left }
#tabarea LI.t4 A { width:166px; height:28px; display:block; background:url(/img/tab/navi_tab_special_mv.gif) no-repeat }
#tabarea LI.t4 A:hover { background:url(/img/tab/navi_tab_special_mv.gif) no-repeat }
#tabarea LI.t4 A.on { background:url(/img/tab/navi_tab_special_mv.gif) no-repeat }

#tabarea LI.btn_login A { width:100px; height:28px; display:block; background:url(/img/tab/btn_login.gif) no-repeat }
#tabarea LI.btn_logout A { width:110px; height:28px; display:block; background:url(/img/tab/btn_logout.gif) no-repeat }
#tabarea LI.btn_regist A { width:126px; height:28px; display:block; background:url(/img/tab/btn_regist.gif) no-repeat }

.top_tab div.tabarea  { width:100%; height:27px; background:url(/img/bg_top1.gif) repeat-x; clear:both; padding-top:5px }
/*
#tabarea DIV.shadow1 { width:100%; height:27px; background:url(/img/bg_top1.gif) repeat-x; clear:both; padding-top:5px }
#tabarea DIV.shadow2 { width:100%; height:27px; background:url(/img/bg_top2.gif) repeat-x; clear:both; padding-top:5px }
#tabarea DIV.shadow3 { width:100%; height:27px; background:url(/img/bg_top3.gif) repeat-x; clear:both; padding-top:5px }
#tabarea DIV.shadow4 { width:100%; height:27px; background:url(/img/bg_top4.gif) repeat-x; clear:both; padding-top:5px }
*/
#tabarea #info_num { margin:8px 5px auto auto; float:right; font-size:80%; }
#tabarea #info_num SPAN { color:#FF0D00; padding:0 0.2em; font-weight:bold }

.top_tab #pankuzu { margin:8px 0 0 8px; font-size:80% }
.top_tab #pankuzu A { margin:auto 7px }
#tabarea LI.h_copy2 { width:166px; height:28px; display:block; background:url(/img/tab/navi_tab_special_mv.gif) no-repeat }
#tabarea LI.h_copy2 { width:200px; height:17px; display:block; background:url(/img/h_copy.gif) no-repeat }


/* footer */
#gotop { text-align:right; font-size:90%; margin:2em auto }
#gotop A { text-decoration:none }
#footer { clear:both; background:#F1F1F0; }
#foot { margin:15px 0 0 0; padding:10px 0 0 0; border-top:#999 1px solid }
#foot UL { margin:0 auto; padding:0; list-style:none }
#foot LI { display:inline; margin-right:1.2em; font-size:90% }
#foot A { text-decoration:none }
#foot DIV { clear:both; margin:0; padding:10px 0 10px 0; line-height:1.3em; color:#333 }
#foot_mirror { text-align:center; padding:0px 0px 10px 0px; }
#foot_mirror UL { margin:0 auto; padding:0; list-style:none }
#foot_mirror LI { display:inline; margin-right:1.2em; font-size:75% }
#foot_mirror A { text-decoration:none }
#foot_mirror DIV { margin:0; font-size:68%; line-height:1.3em; color:#333 }


/* -- // ads_tate -- */
#ads_tate { margin-left:10px; background-color:#FFFFFF; }
#ads_tate H3 { margin-top:0px; }
#ads_tate DIV.box { border:1px solid #F6721E; padding:3px }
#ads_tate TABLE { width:100% }
#ads_tate TR TD { border-top:1px dotted #F6721E; }
#ads_tate TR.top TD { border-top:none }
#ads_tate TD.ads_img { width:120px;  vertical-align:top; padding:3px; }
#ads_tate TD.ads_text { text-align:left; vertical-align:top; padding:3px; }
#ads_tate DIV.comment { margin-right:5px; }


/*--// dokoiku ads_yoko --*/
#block_ads_yoko TH { width:58px; padding:2px; border-top:1px dotted #CCC }
#block_ads_yoko TD { border-top:1px dotted #CCC }
#block_ads_yoko TR.top TH, #block_ads_yoko TR.top TD { border-top:none }
#block_ads_yoko DIV.comment { margin-right:5px; }


DIV.block_advert_under { text-align:right; padding:5px 5px 5px auto; }

/*-- // yahoo_adwords --*/
DIV.yahoo_adwords_yoko { width:auto; text-align:center; margin:0 auto; }

/* page */
DIV.page { font-size:90%; margin-top:10px; padding-top:10px; border-top:1px solid #000000; }



IMG.absmiddle { vertical-align:middle; }
IMG.bottom { vertical-align:bottom; }


/* usr_info */
#usr_info TD { border: 1px solid #FF4A16; vertical-align:top; padding:3px; }
#usr_info H4 { color:#FF4A16; font-size:110%; margin:5px; }
#usr_info DIV.usr_info2 { margin:5px; }





/***************** block_new.css ****************/

DIV.block DIV.box_nothing { padding:10px }

/* block_new_info */
#block_new_info TD.dtl A { margin:auto 7px; line-height:1.6em }


/* block_new_info_iname */
#block_new_info_iname TABLE { margin:2px }
#block_new_info_iname TH { padding:2px; border-top:1px dotted #CCC }
#block_new_info_iname TD { border-top:1px dotted #CCC }
#block_new_info_iname TR.top TH, #block_ads_yoko TR.top TD { border-top:none }



/* block_new_vote */
#block_new_vote TD.thumb_image { width:60px }
#block_new_vote TD.dtl { }
#block_new_vote TD.dtl A { margin:auto 7px; line-height:1.6em }

/* block_new_info */



/* block_new_teach */
#block_new_teach TABLE { margin:2px }
#block_new_teach TH { width:58px; padding:2px; }
#block_new_teach TD.tit { width:300px }
#block_new_teach TD.dtl { }
#block_new_teach TD.dtl A { margin:auto 7px; line-height:1.6em }
#block_new_teach TD { padding:2px 0; }


/* block_new_mikaiketu */
#block_new_mikaiketu DIV.box { padding:2px }
#block_new_mikaiketu TABLE { width:100%; border-bottom:1px dotted #CCC; }
#block_new_mikaiketu TH { width:58px; padding:2px; }
#block_new_mikaiketu TD.tit { width:400px }
#block_new_mikaiketu TD.dtl { }
#block_new_mikaiketu TD.dtl A { margin:auto 7px; line-height:1.6em }
#block_new_mikaiketu DIV.new_mikaiketu_detail { padding:5px; }
DIV.new_mikaiketu_nothing { margin:5px 0; padding:5px; border-top:1px dotted #CCC; border-bottom:1px dotted #CCC; }


/***************** block_new.css ****************/


#google_map_window { margin:5px auto; text-align:center; }
#google_map_window #map { margin:5px auto; text-align:center; }


TH.thumb_image { vertical-align:middle; padding:2px; }

TH.area_bg { background-color:#FCE0EF; color:#F376B8; font-weight:bold; }
TD.area_bg { background-color:#FCE0EF; color:#F376B8; font-weight:bold; }
TH.kind_bg { background-color:#D9ECFF; color:#4DA6FF; font-weight:bold; }
TD.kind_bg { background-color:#D9ECFF; color:#4DA6FF; font-weight:bold; }

TH.area_bd { border:#FCE0EF 1px solid; }
TD.area_bd { border:#FCE0EF 1px solid; }
TH.kind_bd { border:#D9ECFF 1px solid; }
TD.kind_bd { border:#D9ECFF 1px solid; }


/************************* loginbox *************************/
DIV#loginbox { position: relative; font-size:110%; }
DIV#loginbox_in {
  border:1px solid #999999;
  margin-left: -150px;			/* マイナス「横幅÷2」 */
  margin-top:  -0px;			/* マイナス「縦幅÷2」 */
  position: absolute;			/* body要素に対して絶対配置 */
  top: 50%;						/* 上端を中央に */
  left: 50%;					/* 左端を中央に */
  width: 300px;					/* 横幅 */
  height: auto;					/* 縦幅 */
  background-color: #E6F0FA;	/* 背景 */
  overflow: auto;				/* 内容がはみ出る場合の表示方法 */
}
.bd { padding:10px; }
.lbd { border-bottom: 1px solid #CAD3DF; margin-bottom:12px; padding:0; }
.ubd { padding:0; }
.beginner IMG { height:20px; width:20px; vertical-align:middle; }
.beginner SPAN STRONG { display:block; overflow:hidden; text-indent:-9999em; width:19px; }
.close_btn A { width:20px; height:20px; margin-top:-22px; text-indent:-5000px; display:block; overflow:hidden; float:right; background:url(/images/close_btn.gif) no-repeat }

/************************* loginbox *************************/

/***************** sns.css ****************/
.sns UL { margin:0; padding:0; list-style:none outside none; }
.sns LI { display:inline; padding-right: 2px; vertical-align:top; float:left; }
/***************** sns.css ****************/


/***************** // responsive ****************/


@media (min-width: 992px) {


    .navbar-dark .navbar-nav .nav-link {
      font-size: 90%;
    }
    .navbar {
      flex-flow: wrap;
    }
    .dropdown-divider {
      margin: .1em 0;
    }
    .jq_mg {
      margin-top: 0 !important;
    }
}

@media (max-width: 991px) {

  /* ヘッダーは1行固定 */
  HEADER .navbar{
    display: flex;
    flex-wrap: nowrap !important;
  }
  HEADER .navbar-brand{
    flex: 0 0 auto;
  }
  HEADER .header-row {
    gap: 0.5rem;
    flex-wrap: nowrap !important; /* ← ここも明示でnowrap */
    justify-content: flex-start !important;
  }

	html {
		font-size: 1rem;
	}

    .main_menu {
        font-size: 100%;
    }

	.site-title H1.title-line,
	.site-title DIV.title-line {
		font-size: 1.4rem;
	}

    main {
        position: relative;
    }

    #openNav {
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 100%;
        background: #17a2b8;
        padding: .5rem 1rem;
    }

    .jq_mg {
        transition: all 0.5s ease 0s;
    }
}


/* 小さい画面のときに改行 */
@media (max-width: 640px) {

	BODY {
		font-size: 12px;
	}

	HEADER .title-line {
		white-space: normal; /* 改行を有効にする */
		word-wrap: break-word; /* 長い単語も折り返し */
	}

	HEADER .subtitle {
		display: block; /* 小さい画面では改行して表示 */
	}

	.container-fluid, .container-xxl {
		padding: 0 0.25rem;
	}

    HEADER .header-row {
    	gap: .25rem !important;
    } /* すき間をさらに小さく */
}



/* スマホ縦だけロゴとタイトルの間隔を狭くする */
@media (max-width: 640px) and (orientation: portrait){
	HEADER .header-row {
		gap: .25rem !important;          /* 既存 gap をさらに縮小 */
	}

	HEADER .navbar-brand{
		margin-right: 0 !important;      /* BS5 の既定マージンを無効化 */
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* まだ窮屈ならロゴだけ少し自動縮小（任意） */
	HEADER .navbar-brand img{
		max-width: min(40vw, 250px) !important;
		height: auto !important;
	}
}