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

.base-color {
	#37aef5;
}


* { 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;
}

A { text-decoration:none; }
A:link { color:#06F;  }
A:visited { color:#06F; }
A:hover { color:#06C; }

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


/* 正方形ボタン本体 */
.icon-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;

  padding: 12px 10px;
  text-align: left;
  white-space: normal !important;
  line-height: 1.2;

  border-radius: 20px;
  border: none;

  /* iPhone風グラデーション（ここが基本） */
  background: linear-gradient(180deg, #ff4aa3 0%, #d70078 100%);
  color: #fff;
  font-weight: bold;

  /* 外側の柔らかい影 + 内側の光沢 */
  box-shadow:
    0 6px 12px rgba(0,0,0,0.25),
    inset 0 1px 3px rgba(255,255,255,0.5);

  transition: 0.2s ease;
}

/* hover */
.icon-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #ff5cb5 0%, #cc0070 100%);
  box-shadow:
    0 10px 16px rgba(0,0,0,0.3),
    inset 0 1px 4px rgba(255,255,255,0.6);
}

/* active（押し込み） */
.icon-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #d70078 0%, #b20062 100%);
  box-shadow:
    0 3px 6px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(0,0,0,0.3);
}

/* グリッド配置 */
.icon-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

/* 左右レイアウト */
.icon-btn-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.icon-btn-left {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-left i {
  font-size: 20px;
}

.icon-btn-right {
  flex: 1;
  padding-left: 4px;
  white-space: normal !important;
  line-height: 1.3;
  word-break: break-word;
}

/* スマホ縦 2x2 */
@media (max-width: 767.98px) and (orientation: portrait) {
  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ横 4つ */
@media (max-width: 767.98px) and (orientation: landscape) {
  .icon-grid {
    grid-template-columns: repeat(4, auto);
  }
}

/* PC 4つ */
@media (min-width: 768px) {
  .icon-grid {
    grid-template-columns: repeat(4, auto);
  }
}


button.btn--button {
	color: #fff;
	background-color: #e4007f;
	border-bottom: 5px solid #cc297a;
}

button.btn--button:hover {
	margin-top: 3px;
	color: #fff;
	background: #cc297a;
	border-bottom: 2px solid #cc0066;
}

button.btn--shadow {
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}


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



H1 {
	font-size: 1.6rem;
}

H1.title {
	padding: 1rem;
	border-left: 10px solid #42AAC7;
	border-bottom: 3px solid #42AAC7;
	background-color: #F4F4F4;
	margin-bottom: 20px;
    color: #37aef5;
}


.site-title H1.title-line,
.site-title DIV.title-line {
	margin-bottom: 0;
	color: #37aef5;
	font-size: 1.6rem;
	font-weight: 700 !important;
}


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

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


.alert-heading {
    color: #FF0000;
    background-color: #FFFFFF;
    padding: .5rem;
//    border-left: 3px solid #007bff;
	border-radius: 0.5em;/*角の丸み*/
    font-size: 1.0rem;
}


.contents .card {
    margin-top: 2rem;
}

.card-header {
    background-color: #3496d8;
    color: #fff;
    font-size: 1rem;
	padding: 0.40rem 1rem;
	border-radius: 0.5em 0.5em 0 0;/*上部のみ角の丸み*/
}

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



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


.form-control OPTION {
	font-size:14px;
}


#map_status {
	font-size: min(1.1rem, 5vmin); /* 5vminと1.1remのうち大きい方にする */
	white-space: nowrap; /* 改行しない */	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

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


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

.main {
	overflow: hidden;
}



TABLE {
	font-size: 14px;
}

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

.form-explain { 
	margin-bottom: 2rem;
}

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


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


HEADER {
	position: relative;
	max-height: 150px;
	z-index: 1030;
	border-bottom: solid 5px #00bfff;
}









HEADER .header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 100%;
}

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

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

HEADER .title-line {
//  display: inline-flex;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


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

HEADER .menu-area {
  flex-shrink: 0;
}


.navbar-collapse {
	position: absolute;
	top: 60px; /* Navbarの下に配置 */
	right: 0;
	min-width: 200px;
	background-color: white;
	z-index: 1050; /* Ensure dropdown menu appears above other elements */
	transition: all 0.3s ease-in-out;
}



.breadcrumb {
	background:transparent;
	background-color: #fff;
	margin: 3px 0;
	white-space: nowrap;
	flex: 1;
	vertical-align: middle;
//	z-index: 1030; /* Ensure dropdown menu appears above other elements */
}


.navbar-toggler {
	box-shadow: none;
	margin-right: 5px;
//	margin-right: 10px;
}

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




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



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


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

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


footer ul {
	margin-bottom: 0
}

/***************** // 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 */
/**************/

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

.contents { margin-bottom:1em; }

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


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

.qrcode {
    float: right;
}


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

.list_image {
    float: left;
	width: 20%;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.list_image IMG {
//	width: 160px;
//	max-width: 100%;
//	padding:5px;
	max-width: 100%;
	max-height: 160px;
	border-radius: 8px;
	object-fit: contain;
    object-fit: cover;
	display: block;
}


.list_contents {
	font-size: 14px;
	overflow: hidden;
	padding:5px;
}

.list_contents DIV {
	padding: 3px 0;
}

.list_contents .explanation {
	border-top : 1px dotted #EBEBEB;
	padding-top : 10px;
	overflow: hidden;
}

.list_contents DIV H2, .list_contents DIV SPAN {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

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


/***************** // review ****************/

.review_image {
    float: left;
	width: 20%;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
    padding :10px;
}

.review_image IMG {
//	width: 160px;
//	max-width: 100%;
//	padding:5px;
	max-width: 100%;
	max-height: 160px;
	border-radius: 8px;
	object-fit: contain;
	display: block;
}

.review_content {
	font-size: 14px;
	overflow: hidden;
    padding :10px;
}

/***************** review // ****************/

.res_content {
    border: 1px solid #3496d8;
    padding:10px;
    margin:10px;
}


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

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



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




/* Google検索フォーム全体 */
/* 入力欄 */
.site-search-input {
  margin-bottom: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
  border-radius: 999px;  /* ピル型 */
}

/* ボタン */
.site-search-btn {
  padding: 6px 28px;
  border-radius: 999px;
  font-size: 0.9rem;
}

/* フォーカス時 */
.site-search-input:focus {
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}





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


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


.auth_site {
	width: 396px;
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
}

.auth_site .auth_item {

	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	color: #222;
	padding: 0;
	overflow: hidden;
	margin-bottom: 10px;
}

.auth_item A {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 42px;
	box-sizing: border-box;

	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth_item A:hover {
	background: #fafafa;
	text-decoration: none;
	color: inherit;
}

.auth_item IMG {
	width: 42px;
	height: 42px;
	flex: 0 0 24px;
	object-fit: contain;
	margin-right: 14px;
}

.auth_item SPAN {
	flex: 1;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0;
}

@media (max-width: 480px) {
	.auth_site {
		width: auto;
		margin-top: 20px;
		margin-left: 12px;
		margin-right: 12px;
	}

	.auth_item A {
		min-height: 52px;
		padding: 12px 14px;
	}

	.auth_item IMG {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
		margin-right: 12px;
	}

	.auth_item SPAN {
		font-size: 15px;
	}
}

.auth_line A{
	background:#06C755;
	color:#fff;
}

.auth_line A:hover{
	background:#05b84d;
}


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

/***************** // 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) {

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

	H1 {
      font-size: 1.4rem;
	}

	H2 {
      font-size: 1.2rem;
	}


	H3 {
      font-size: 1.1rem;
	}

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


/* 小さい画面のときに改行 */
@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;
	}
}