/*------------------------*/
/*---- ベーススタイル ----*/
/*------------------------*/
@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;
}


/* 正方形ボタン本体 */
.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, #b8f24c 0%, #7fb81c 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.btn--button:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #c6ff59 0%, #73a619 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, #c6ff59 0%, #73a619 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);
  }
}


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



H1 {
	font-size: 1.6rem;
}

H1.title {
	position: relative;
	padding: 0.2em 0.5em;
	background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	color: white;
	font-weight: bold;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}


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


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

.card-body {
	padding: 1rem;
}


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

.form-control OPTION {
	font-size:0.9rem;
}


#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: 0.9rem;
}

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


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


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


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

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

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

/* --- fix: トグルが改行される問題対策 --- */
HEADER .header-row > div:last-child{
	display: flex !important;
	align-items: center !important;
	gap: .25rem !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	margin-left: auto !important;
}

HEADER .navbar-toggler{
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	box-shadow: none !important;
}


.navbar-collapse {
	position: absolute;
	top: 60px; /* Navbarの下に配置 */
	right: 0;
	width: 150px;
	background-color: white;
	z-index: 1050; /* Ensure dropdown menu appears above other elements */
}



.breadcrumb {
	background:transparent;
	background-color: #fff;
	margin: 3px 0;
	white-space: nowrap;
	flex: 1;
	vertical-align: middle;
}


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

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


.nav-item {
	padding: 0 5px;
}


.qrcode {
  float: right;}


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

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

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

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

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

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

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

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

.list_image IMG {
	max-width: 100%;
	max-height: 160px;
	border-radius: 8px;
	object-fit: contain;
	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 // ****************/



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

/* ===============================================
/*  外部ID　BUTTON
------------------------------------------------*/

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

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

  /* ヘッダーは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;
	}
}