@charset "utf-8";

* {
	margin:0;
	padding:0;
}

/* No height:100% on html/body - that (plus .manage_wrapper's old overflow:auto and .content's
   inline height:100%) is what used to trap the page in nested scroll panes. The document itself is
   now the one and only scroller, on both axes. */
html { min-height: 100%; }

body {
	background: #fff;
	color: #000;
	margin-right: 0 auto;
	margin-left : 0 auto;
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
	font-size:120%;
	width:100%;
	min-height: 100%;
	margin: 0;
}

table {
	border: 1px solid #000;
}
table th{
	font-weight: bold;
	border: 1px solid #000 !important;
	min-width: 30px;
	max-width: 140px;
	padding: 10px 5px;
	white-space: normal;
	overflow-wrap: break-word;
}
table td{
	border: 1px solid #000;
	min-width: 30px;
	max-width: 220px;
	word-break: break-all;
	padding: 10px 5px;
}
table td .btn-link {
	white-space: break-spaces;
}
/* Column flex so .layout_row absorbs the leftover vertical space and the side menu's background
   stretches the full height even on a short page - what min-height:100% used to be for. */
.manage_wrapper {
	border: solid 0px;
	margin: 0 auto;
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* The side-menu + content pair. Replaces the old float:left / position:absolute:left:240px pairing,
   whose width:100% resolved against the wrapper (not the space left over beside the menu) and so
   always overhung its container by exactly the menu's width. */
.layout_row {
	display: flex;
	align-items: stretch;
	flex: 1 0 auto;
}

.container {
	text-align: left;
	width: auto;
}
.header{
	background: #13819c;
	color: #fff;
	padding: 0 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
h3.title {
	display: inline-block;
	padding: 10px 0;
}
ul.site-tab {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0;
}
ul.site-tab li {
	list-style-type: none;
}
ul.site-tab li a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 30px 10px;
}
ul.site-tab li a:hover {
	color: #123333;
}
#sub_header{
	background: #123333;
	color: #fff;
	padding: 10px 20px;
}
#sub_header ul{
    padding: 0px;
    margin: 0px;
}
#sub_header ul li {
    display: inline;
}
#sub_header ul li a {
    text-decoration: none;
    color: #fff;
}
#sub_header ul li a:hover{
    border-bottom: dotted 1px #fff;
}
#nav ul li{
    display: inline;
 }
.side_menu{
	background: #cce8fc;
	color: #000;
    	text-align: left;
	padding: 5px 20px;
	flex: 0 0 220px;
	position: relative;
}
.side_menu li {
	border:2px outset #5bc0de;
	background: #5bc0de;
	border-radius:5px;
	margin-bottom:2px;
}
.side_menu a {
	margin-left: 3px;
	padding: 5px 5px 5px 0px;
	color: #fff;
	display: block;
	text-decoration: none;
}

.maintenance_check{
	background: #ff0000;
	color: #fff;
    	text-align: center;
	padding: 10px 20px;
}
.side_menu ul li {
	list-style: none;
}
/* min-width:0 is load-bearing: without it a flex item refuses to shrink below its content's
   intrinsic width, so one wide table would blow the whole layout out sideways again. With it, the
   content column stays put and wide tables scroll inside their own .table-scroll wrapper instead.
   The old padding-right:240px reserved room for the side menu a second time (the element was
   already offset by left:240px), which is what squeezed the usable column down to ~140px on a
   phone. */
.content{
	background: #fff;
	color: #333;
	padding: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Wide tables get their own scoped horizontal scroller rather than widening the page. Applied by
   the wrapping snippet in layout/main.php, since no template markup uses a scroll container of its
   own. overflow-y stays auto per spec once overflow-x is set, but the wrapper's height is content
   sized, so no vertical scrollbar ever materialises here. */
.table-scroll {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	/* Stop a table that's been scrolled to its end from handing the rest of the gesture up to the
	   .layout_row track underneath and parking the menu as a side effect. */
	overscroll-behavior-x: contain;
}

/* Login page box (layout/top.php). Centred rather than the old left:35% + width:20% absolute
   positioning, so it stays put at any width instead of needing the two numbers to stay in sync. */
.login_box {
	margin: 100px auto 0;
	max-width: 340px;
}

.choice_radio label{
	margin-right: 10px;
}

.loading {
	display: none;
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: rgb(255 255 255 / 85%);
  z-index: 999;
  height: 100%;
  padding: 20% 0;
  font-size: 18px;

}
.footer {
	padding: 6px 10px;
}

/* ==================== PHONE / NARROW SCREENS ====================
   The swipe-sideways-to-park-the-menu gesture, made deliberate. Previously it was an accident:
   .content was width:100% offset by left:240px, so the page always overhung its own container by
   240px and you could drag into that dead band. Here the horizontal track is exactly
   (menu + one viewport) wide, so there is nowhere to over-scroll TO, and scroll snapping means the
   swipe lands on one of exactly two positions:
     x = 0     -> menu visible, content starts beside it
     x = 220px -> menu parked off-screen left, content occupying the full viewport width
   The content column is sized 100vw (not 100%) precisely so that the parked position fills the
   screen edge to edge. If the snapping ever feels grabby, changing `mandatory` to `proximity` below
   relaxes it without altering the geometry. */
@media (max-width: 900px) {
	/* The track owns the horizontal axis; the document keeps the vertical one. Keeping them on
	   separate elements is the whole point. When a single element owns both axes, a vertical drag
	   carrying a pixel or two of sideways drift is still "a scroll of that element", and mandatory
	   snapping then has to commit it somewhere - and because a flick is resolved by direction and
	   velocity rather than pure proximity, a leftward pixel resolves to the *previous* snap point,
	   springing the menu back into view mid-scroll. Split across two elements, the browser's own
	   touch direction-locking picks one target for the whole gesture, so a vertical drag never
	   reaches the horizontal scroller at all.
	   The document no longer scrolls sideways, which is also why the header and sub-header no longer
	   need to be sticky - they simply never move now. */
	.layout_row {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.side_menu {
		scroll-snap-align: start;
	}

	.content {
		flex: 0 0 100vw;
		scroll-snap-align: start;
	}

	/* Let the two bars wrap onto extra lines instead of spilling past the viewport - they're now
	   sticky, so anything overflowing them would sit visibly on top of the content as you swipe.
	   Wrapping is preferable to giving them their own horizontal scroller: it keeps the "one
	   scroller per axis" rule this whole rework is built on. */
	.header {
		flex-wrap: wrap;
		padding: 0 10px;
	}

	ul.site-tab {
		flex-wrap: wrap;
	}

	ul.site-tab li a {
		padding: 10px 8px;
	}

	#sub_header {
		padding: 8px 10px;
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* The mobile override for .sub-tabs itself (overflow-x, min-width) lives in admin-modern.css's
	   own narrow/phone section, not here - see that file for why: this selector needs to be
	   #sub_header .sub-tabs specifically, which only wins if it's declared in the same file as
	   (and after) the unconditional #sub_header .sub-tabs rule that sets overflow:hidden. */

	/* Reclaim some horizontal room now that the column is genuinely full-width. */
	body {
		font-size: 100%;
	}

	table th,
	table td {
		padding: 6px 4px;
	}

	/* Without a floor on column width, a many-column table doesn't overflow - it collapses, and
	   `word-break:break-all` shreds the Japanese headers into one-character-wide vertical strips
	   that technically fit and are completely unreadable. Giving cells a minimum instead pushes the
	   table past the column's width, which is what hands it to .table-scroll to scroll properly. */
	.table-scroll th,
	.table-scroll td {
		min-width: 88px;
	}

	.table-scroll th {
		word-break: keep-all;
	}
}

/* ==================== DEVELOPMENT ENVIRONMENT ==================== */
body.env-development .header {
    background: #FF819C;
}

/* Repeating "開発環境" tiled watermark */
body.env-development .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg width='320' height='220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='t' patternUnits='userSpaceOnUse' width='320' height='220'%3E%3Ctext x='20' y='85' font-family='sans-serif' font-size='52' font-weight='900' fill='rgba(255,255,255,0.085)' transform='rotate(-12 160 110)'%3E%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%3C/text%3E%3Ctext x='20' y='195' font-family='sans-serif' font-size='52' font-weight='900' fill='rgba(255,255,255,0.085)' transform='rotate(-12 160 110)'%3E%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23t)'/%3E%3C/svg%3E");
    background-size: 320px 220px;     /* Controls tiling density */
    opacity: 1;
}

/* Content on top */
body.env-development .header > * {
    position: relative;
    z-index: 2;
}