/*------------------------*/
/*---- ベーススタイル ----*/
/*------------------------*/
@import url("common.css");
/* @import url("sticky_footer.css"); */
@import url("bootstrap.css");

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

body,input,select,textarea,button {
font-family: "BIZ UDPGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}

/* BODY,TD,TH { font-family: Arial, Helvetica, sans-serif; color:#333 } */
A { text-decoration:none; }
A:link { color:#06F;  }
A:visited { color:#06F; }
A:hover { color:#06C; }

IMG {
	border: none;
	max-width: 100%;
	height: auto;
}

.carousel-inner {
}

.carousel-item {
}

.carousel-item IMG {
}


HTML {
	font-size: 16px;
	min-height: 100%;
	position: relative;
}



H1 {
	font-size: 1.6rem;
}


H1.title {
    color: #F89174;
	border-bottom: double 5px #F89174;
	padding: 5px 0 0 10px;
	line-height: 1; /* 行の高さを調整 */
	vertical-align: bottom; /* 垂直方向の配置を底辺に揃える */
	padding: .5em .5em .5em 1em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	border-bottom: solid .1em #ff5a5f; /*下線（線種 太さ 色）*/
	border-left: solid .5em #ff5a5f; /*下線（線種 太さ 色）*/
}


H2 {
	font-size: 1.4rem;
	font-weight: 600;
}

H2.title {
    color: #fff;
    padding: .5rem;
    background-color: #3496d8;
    border: 1px solid #3496d8;
	border-radius: 0.5em;/*角の丸み*/
}


H3 {
	font-size: 1.2rem;
	font-weight: 500;
}

H4 {
	font-weight: bold;
    font-size: 1.0rem;
}
















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


/* overwrite style for table-responsive
-------------------------------------------------- */
.table-responsive > .table {
	width: 100%;
	table-layout: fixed;
	word-wrap: break-word;
}


.table-responsive .table TH {
	background-color: #eee;
}


.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; }

.main {
	overflow: hidden;
}

TABLE {
	font-size: 14px;
}

.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; }




/**************/
/* Header     */
/**************/


HEADER {
	position: relative;
	max-height: 150px;
	z-index: 1030;
}


NAV {
	border-bottom: solid 5px #00bfff;
}


HEADER .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
}

HEADER .header-row A {
	margin-right: 5px;
}


.navbar-brand {
	argin: 0;
	padding: 0;
}

HEADER .navbar-brand IMG {
    max-width: 250px;
	display: block;
	max-height: 50px;
}

HEADER .site-title {
	display: inline-flex;
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
   white-space: nowrap; /* ← 念押しでつけてもOK */
	align-items:flex-end;
}




HEADER .title-line {
	margin-bottom: 0;
	color: #37aef5;
	font-size: 1.6rem;
	font-weight: 700 !important;

	display: flex;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-items:flex-end;
}


HEADER .title-line SPAN {
	display: block;
}


HEADER .subtitle {
  font-size: 0.9rem;
//  margin-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
//  display: block;
}



.navbar-brand A {
	text-decoration: none;
}


.navbar-expand button.navbar-toggler {
	display: inline-block;
}



/* ハンバーガーメニューのスタイリング */


.navbar-toggler:focus {
	box-shadow: none;
}


.navbar-nav {
  flex-direction: row;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  z-index: 1000;
}

/***************** // nav ****************/



/**************/
/* Header end */
/**************/


/**************/
/* Footer     */
/**************/

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

/***************** // 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 {
	border: none;
}

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

/**************/
/* Footer end */
/**************/


P.title {
	font-size: 1.1em; 
	font-weight: bold;					// 文字を太文字に
	margin:10px 0;
}

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

.card {
    margin-top: 1rem;
}


.card-header {
//    background-color: #f47ed4;
    background-color: #158ED0;
    background-color: #00bfff;
    color: #fff;
	padding: 0.40rem 1rem;
	border-radius: 0.5em;	// 角の丸み
    font-size: 1.0rem;
}



H2.card-header {
    color: #fff;
    padding: .5rem;
    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 {
	padding: 1rem;
}

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



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




.status_disp {
	font-size:x-small;
	color:#CCC;
}


p.inline {
	display:inline-block;
	margin-bottom:0;
	vertical-align: middle;
}




/* overwrite style for table-responsive
-------------------------------------------------- */
.table-responsive > .table {
	width: 100%;
	table-layout: fixed;
	word-wrap: break-word;
}

/* end-------------------------------------------------- */



/*-- // google_adsense --*/
DIV.google_adsense {
   max-width: 100%;
    overflow: hidden;
    width: auto;
	text-align: center;
	margin-top: 10px;
}


.qrcode {
//    float: right;
}







/* next 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; }


.not_content { padding:30px; color:#FF0000; text-align:center; }


/***************** // agecho_kind_tab ****************/

/***************** // list ****************/


#list_tab {
	width: 100%;		/* コンテナの幅を100%に */
	overflow: hidden;	/* 全体のオーバーフローを隠す */
}

#list_tab UL {
	display: flex;
	flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
    
  border-bottom: 2px solid #00bfff;
:  scrollbar-width: thin;
   padding: 0;
  margin-bottom: 4px;
  -ms-overflow-style: auto;      /* Edge/IE */
}

#list_tab ul::-webkit-scrollbar {
  height: 6px;                   /* Chrome/Safariで表示 */
}


#list_tab ul::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

#list_tab UL::after {
  content: '';
  flex: 0 0 16px; /* スクロールヒントスペース */
}

#list_tab .tab-item {
  list-style: none;
  flex-shrink: 0;
  min-width: clamp(40px, 6vw, 80px);
  max-width: 100%;
  text-align: center;
  border: 1px solid #1E90FF;
  border-radius: 5px 5px 0 0;
  margin: 0 2px;
}

#list_tab .tab-item A {
	display: block;
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: bold;
  color: #777;
  text-decoration: none;
  padding: 6px 6px;
  height: 100%;
}

#list_tab .tab-item A.active {
  background-color: #2C7CFF;
  color: #fff;
}

/***************** list // ****************/


/* モバイル：スクロールバー非表示 */
@media (hover: none) and (pointer: coarse) {
	#list_tab ul {
		scrollbar-width: none;
	}
	#list_tab ul::-webkit-scrollbar {
		display: none;
	}
}

/*****************  menu_kind_tab // ****************/





/***************** // oauth_site ****************/


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



.oauth_site .oauth_item {
	align-items: center;
	display: flex;
	border: 1px solid #ced4d6;
	border-radius: 5px;
	color: #000;
	padding: 1em 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;
}


/***************** oauth_site // ****************/

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


/*
@media (min-width: 1200px) {
	main {
		width: 1200px;
		margin: 0 auto;
	}
}

@media (min-width: 1150px) {
	main {
		width: 1150px;
		margin: 0 auto;
	}
}
*/

@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;
	}

	HEADER .header-row {
	  gap: 0.5rem;
	  flex-wrap: nowrap;
	}

	H1 {
      font-size: 1.4rem;
	}

	H2 {
      font-size: 1.2rem;
	}


	H3 {
      font-size: 1.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;
    }

    main {
        position: relative;
    }

    .aside, .card.bd-none {
        position: static;
        margin: 0;
        background: transparent;
        border: none;
    }

    #openNav {
        position: absolute;
        top: 0;
        left: 0;
        height: 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: 768px) {
	HEADER .navbar H1 {
		white-space: normal; /* 改行を有効にする */
		word-wrap: break-word; /* 長い単語も折り返し */
	}

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

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


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

	BODY {
		font-size: 12px;
	}

	HEADER .title-line {
		display: flex;
		flex-direction: column;
		white-space: normal;
		overflow: visible;
	}

	HEADER .subtitle {
		margin-left: 0;
		white-space: nowrap;
		overflow: hidden;
		font-size: 0.8rem;
		text-overflow: ellipsis;
	}

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


	.btn {
		font-size: 14px;
		padding: 12px;
	}

	IMG {
		max-width: 100%;
		height: auto;
	}
}



@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%; */
  }
	.navbar-brand img {
	    margin-right: 0;
	}
}

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




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


/***************** // calender.html ****************/

.calender TABLE {
	width: 100%;
	table-layout: fixed;
}

.calender TH {
	height: 30px;
	text-align: center;
}

.calender TD {
	height: 100px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 0;
}

.calender .today {
            background:#eee !important;
        }
.calender TH:nth-of-type(1), .calender TD:nth-of-type(1) {
            color: red;
        }
.calender TH:nth-of-type(7), .calender TD:nth-of-type(7) {
            color: blue;
        }

/***************** calender.html // ****************/


/***************** // index.html ****************/

.index_feature LI { margin-top:15px; }

.explain-frame {
	margin: 10px;
	padding: 5px;
	border: 3px solid #158ED0;
	color : #158ED0;
}


.page_explain {
  display: flex;
  flex-direction: column;
}

.page_explain_inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; /* スマホで折り返し */
  gap: 1rem;
  margin-top: 1rem;
}

.title_explain {
  flex: 1;
  min-width: 200px;
}

.qrcode {
  width: 140px;
  flex-shrink: 0;
  text-align: right;
}



/***************** index.html // ****************/

#agreement OL { margin:12.8px 0; padding-left:40px; }

#vote_detail TH { color:#FFFFFF; background-color:#82CBDB; padding:3px; text-align:center; }
#vote_detail TD { padding: 3px; background-color:#FFFFFF; }

.can_do_list { margin:10px 0px 10px 30px; }


.btn {
	margin: 10px;
	padding: 10px 50px;
	font-weight: bold;
}

/***************** // blog ****************/
.blog-title {
	background-color: pink;
	color: #FFFFFF;
	font-size: 1.1em; 
	font-weight: bold;
	padding: .5rem 1rem;
}



TABLE.radius10 {
	border: 1px solid #ccc;
	border-radius: 10px;
	border-collapse: separate;
}