@charset "utf-8";

/* 本文検索ボタン用装飾 */
/* 情報を探すボタンが無い時 */
#tab_menu:not(:has(.tabmenu_btn__srch)) {
	position: fixed;
	top: 380px;
	right: 0;
	z-index: 90;
}
button.tabmenu_btn__text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 60px;
	min-height: 160px;
	padding: 10px;
	border: 1px solid #153d5d;
	border-right: 0;
	border-radius: 10px 0 0 10px;
	background: #fff;
}
.tpl_top_index button.tabmenu_btn.tabmenu_btn__text {
	display: none;
}
button.tabmenu_btn__text::before {
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
button.tabmenu_btn.tabmenu_btn__text::before {
	width: 26px;
	height: 30px;
	background-image: url(/img/common/icon_text.png);
}
button.tabmenu_btn__text::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background: url(/img/common/arrow_white.png) no-repeat center / 4px auto #153d5d;
	rotate: 180deg;
}
span.tabmenu_txt {
	color: #153d5d;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: .05em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	text-orientation: mixed;
	vertical-align: top;
}
@media (hover: hover) {
	button.tabmenu_btn__text:hover {
		text-decoration: underline;
	}
	button.tabmenu_btn__text:hover::after {
		color: #153d5d;
		background-image: url(/img/common/arrow_blue.png);
		background-color: #fff;
		outline: 1px solid;
	}
}

/* 本文検索ボタン用装飾ここまで */


/* 本文検索ボタン。 #search-inpageが存在しない（.is_viewが無い）ときは非表示*/
#tab_menu .tabmenu_btn__text:not(.is_view) {
	display: none;
}

/* 本文検索ボタンで表示されるまでは非表示 */
#search-inpage:not(.is_view) {
	display: none;
}

#search-inpage {
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(243, 245, 247, 1) 3px, rgba(243, 245, 247, 1) 6px );
	width: min(100%,1100px);
	margin-inline: auto;
	padding: 15px 20px;
	box-sizing: border-box;
	position: fixed;
	z-index: 60;
	bottom: 0;
	left: calc(50% - 550px);
	border-radius: 10px;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 1.4rem;
}

button#close_search-inpage {
	position: absolute;
	bottom: 100%;
	right: 20px;
	border: none;
	background: #153d5d;
	color: #fff;
	padding: 8px 15px;
	box-sizing: border-box;
	font-size: 1.2rem;
	line-height: 1;
	border-radius: 5px 5px 0px 0px;
}
button#close_search-inpage span{
	display: grid;
	grid-template-columns: 10px 1fr;
	gap: 5px;
	align-items: end;
}
button#close_search-inpage span::before{
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	color: #000;
}

/* 入力枠関係 */
.search-inpage-input-wrap {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 10px;
}

label[for="search-inpage-input"] {
	font-size: 1.8rem;
	line-height: 1;
	font-weight: bold;
	color: #153d5d;
}
.search-inpage-input-title{
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
	gap: 5px;
}
.search-inpage-input-title::before {
	content: '';
	display: block;
	width: 40px;
	height: 46px;
	background: url(/img/common/icon-search-inpage.png) no-repeat center center;
	background-size: contain;
}
input#search-inpage-input {
	width: min(100%,320px);
	margin: 0;
	padding: 10px;
	line-height: 1;
	border: none;
	font-size: 1.4rem;
	border-radius: 10px 0px 0px 10px;
}

button#search-inpage-button {
	border: none;
	background: #153d5d;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	font-weight: bold;
}

span.search-inpage-input-box {
	display: grid;
	grid-template-columns: 320px 70px;
	align-items: stretch;
	border: 1px solid #153d5d;
	border-radius: 10px;
	overflow: hidden;
}
/* 入力枠関係ここまで */

/* ボタン関係 */
.search-inpage-input-control {
	display: grid;
	/* grid-template-columns: auto 50px 50px 5rem; */
	grid-template-columns: 1fr 50px 50px auto;
	align-items: center;
	gap: 5px;
}

#search-inpage-stats {
	max-width: 200px;
}
.search-inpage-input-control button {
	background: #fff;
	display: grid;
	place-content: center center;
	width: 100%;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #b7cee1;
	box-sizing: border-box;
	font-size: 1.4rem;
	line-height: 1;
	position: relative;
}
#search-inpage-prev-button::before,
#search-inpage-next-button::before{
	content: '';
	display: block;
	width: 12px;
	height: 8px;
	background: #153d5d;
}
#search-inpage-prev-button::before{
	clip-path: polygon(0% 100%, 0% 75%, 50% 0%, 100% 75%, 100% 100%, 50% 25%);
}
#search-inpage-next-button::before{
	clip-path: polygon(0% 0%, 0% 25%, 50% 100%, 100% 25%, 100% 0%, 50% 75%);
}
.search-inpage-input-control button[disabled]{
	opacity: 0.75;
	pointer-events: none;
}

button#search-inpage-clear-button {
	background: #fbe186;
	border: none;
	white-space: nowrap;
}
/* ボタン関係ここまで */

/* 背景色変更 */
.color_change #search-inpage {
	background-image: none !important;
	border: 1px solid;
}
.color_change input#search-inpage-input {
	background: #ffffff !important;
	color: #333333 !important;
}
.color_change #search-inpage-prev-button::before,
.color_change #search-inpage-next-button::before {
	background: #ffffff;
}
/* 背景色変更 ここまで */


@media screen and (width < 1100px){
	.c_onlyPc{
		display: none !important;
	}
	#search-inpage,#search-inpage:not(.is_view){
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		left: 0;
		bottom: 60px;
	}
	#search-inpage:not(.is_view_sp){
		background: none #fff;
		gap: 0;
		border: 1px solid #153d5d;
		border-radius: 0;
		& #close_search-inpage{
			display: none;
		}
		& .search-inpage-input-wrap{
			gap: 0;
		}
		& .search-inpage-input-box{
			display: none;
		}
		& .search-inpage-input-control{
			display: none;
		}
		& label[for="search-inpage-input"]::after{
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background: url(/img/common/icon-arrow-up.png) no-repeat center center #153d5d;
			background-size: 10px auto;
			border-radius: 50%;
			position: absolute;
			right: 0;
			top: calc(50% - 10px);
		}
	}
	.search-inpage-input-title::before{
		width: 24px;
		height: 27px;
	}
	span.search-inpage-input-box,
	.search-inpage-input-control{
		/* display: none; */
	}
	.search-inpage-input-wrap{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		justify-content: center;
		/* justify-items: center; */
		/* width: 100%; */
	}
	label[for="search-inpage-input"]{
		/* justify-self: center; */
		display: grid;
		place-content: center center;
		/* grid-template-columns: 1fr 20px; */
		position: relative;
	}
	span.search-inpage-input-box{
		grid-template-columns: 1fr 70px;
	}
	input#search-inpage-input{
		width: auto;
	}
}