@charset 'utf-8';


@font-face {
	font-family: 'uiicon';
	src: url('../font/uiicon/uiicon.woff2') format('woff2'),
		 url('../font/uiicon/uiicon.woff') format('woff'),
		 url('../font/uiicon/uiicon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/* 
.displaydetect {
	opacity: 0;
	transition: 1s;
}

.displaydetect.display-success {
	opacity: 1;
}
 */


body {
	font-family: BlinkMacSystemFont, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'メイリオ', Meiryo, sans-serif;
}

.etext {
	font-family: 'Helvetica Neue', Helvetica, Avenir, san-serif;
}

::selection {
    background: #898989;
    color: #fff;
}

::-moz-selection {
    background: #898989;
    color: #fff;
}

a {
	color: #44a0dc;
}

a:hover,
a.hover {
	color: #81bee6;
}


.caution {
	text-align: left;
}

.caution p {
	padding-left: 1em;
	color: #747474;
	line-height: 1.5;
	position: relative;
}

.caution p:before {
	display: inline-block;
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}

sup {
	color: #747474;
	font-size: .5em;
	font-weight: normal !important;
	vertical-align: top;
}

.sup:after {
	color: #747474;
	content: '※';
	font-size: .5em;
	vertical-align: top;
}

.caution ol {
	counter-reset: number;
	list-style: none;
}

.caution ol li {
	padding-left: 2em;
	color: #747474;
	font-size: 1.2em;
	position: relative;
}

.caution ol li:before {
	counter-increment: number;
	content: '※'counter(number)' ';
	position: absolute;
	top: 0;
	left: 0;
}

.caution p:not(:last-child),
.caution ol li:not(:last-child) {
	margin-bottom: .3em;
}

.linebreak span {
	display: inline-block;
}

.btnarea a {
}

.btnarea a:hover,
.btnarea a.hover {
}

#call_head,
#call_head a {
	color: #204068;
}

.btn_contact a {
	background: #204068;
	color: #fff !important;
}

.btn_contact a:hover,
.btn_contact a.hover {
	background: #597ca7;
}

#navimenu {
	color: #dec621;
}

#navimenu.hover,
#navimenu.open {
	background: #dec621;
	color: #fff;
}

#navi_header_thin .btn_header a {
	color: #37c57d;
}

#navi_header_thin .btn_header a.hover {
	background: #37c57d;
	color: #fff;
}


#headerelemlanguagebtn > .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .2s;
	cursor: pointer;
}

#headerelemlanguagebtn > .inner:hover {
	color: #666;
}

#headerelemlanguagebtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	text-align: center;
	text-decoration: none;
}

#headerelemlanguagebtn .icon {
	margin-right: 5px;
	font-size: 20px;
}

#headerelemlanguagebtn .label {
	font-size: 14px;
}

#headerelemsearchbtn {
	display: none;
	background: #fff;
}

#headerelemsearchbtn > .inner {
	display: flex;
	justify-content: center;
	align-items: end;
	padding: 0 10px;
	transition: .2s;
}

#headerelemsearchbtn .searchform {
	width: 100%;
}

#headerelemsearchbtn > .inner .inputcover {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0 10px;
}

#headerelemsearchbtn > .inner span {
	color: #37c57d;
}

#headerelemlanguagebtn a:hover,
#headerelemlanguagebtn a.hover,
#headerelemsearchbtn > .inner:hover span {
	color: #37c57d;
}

#headerelemsearchbtn .icon {
	font-size: 20px;
	transition: .2s;
	cursor: pointer;
}

#headerelemsearchbtn .label {
	font-size: 14px;
}

#headerelemsearchbtn input {
	display: none;
	width: 100%;
	padding: .5em;
	color: #000;
	font-size: 1rem;
	border: none;
	border-bottom: 1px solid #000;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: .2s;
}


@media only screen and (max-width: 1000px) {

	#headerelemsearchbtn .icon {
		padding: 8px;
		background: #000;
		color: #fff;
	}

	#headerelemsearchbtn > .inner:hover span.icon {
		background: #000;
		color: #fff;
	}

	#headerelemsearchbtn > .inner:hover span.icon {
		background: #666;
		color: #fff;
	}
	
	#headerelemsearchbtn input {
		display: inline;
	}
}

@media only screen and (min-width: 1001px) {

	body.fixed #call_head .btn_contact a {
		color: #000;
	}

	body.fixed #call_head .btn_contact a:hover,
	body.fixed #call_head .btn_contact a.hover {
		background: #204068;
	}
}

.blockheader {
	color: #898989;
}

.blockheader.small .label {
	font-size: 1.3em !important;
}

.blockheader.deco .label {
	font-size: .85em !important;
	font-weight: normal;
}

.blockheader.deco .shoulder {
	font-family: 'Titillium Web', 'Helvetica Neue', Helvetica, Avenir, san-serif;
	font-size: 1.6em;
	font-weight: 700;
}

.blockheader.deco.en .label {
	font-family: 'Titillium Web', 'Helvetica Neue', Helvetica, Avenir, san-serif;
	font-size: 1.6em !important;
	font-weight: 700;
}

.blockheader.deco.en .shoulder {
	display: none;
}

.blockheader.left {
	text-align: left;
}

.blockheader.right {
	text-align: right;
}

.blockheader.wide .brick {
	max-width: none;
}


body {
	margin: 0 auto;
	background: #fff;
	color: #1a1a1a;
	-webkit-font-smoothing: antialiased;
}

body:before {
	height: 60px;
}

@media only screen and (min-width: 769px) and (max-width: 1000px) {

	body:not(.nosticky):before {
		height: 60px;
	}
}

@media only screen and (min-width: 1001px) {

	body.nosticky:before {
		height: 0;
	}

	body:not(.nosticky):before {
		height: 80px;
	}

	body.detach:not(.nosticky):before {
		height: 220px;
	}
}

#upper > .inner,
#navi_menu > .inner,
#contentheader > .inner,
.breadcrumb > ul,
#container > .inner,
#bottom > .inner,
#copyright > .inner,
#bureau > .inner{
	max-width: 1600px;
}

#upper {
	min-width: 320px;
	height: 60px;
}

#logo_header {
	height: 60px;
	left: 10px;
}

#navi_header_thin {
	height: 60px;
}

#navi_global {
	top: 0;
}

body:not(.slidenavi) #navi_global.open {
	padding-top: 60px;
}

#navi_menu {
	top: 90px;
}

#navi_menu.fixed {
	height: calc(100% - 90px);
}

/* ★グローバルナビ「コンテンツ」のドロップダウン。
   `#nh_info` は class_theme_element.php:355 の `$id = 'nh_' . trim($k, '/')` で
   動的に組み立てられるIDで、ソースに文字列として現れない。2026-08-09 の未使用CSS整理
   （「php/js/html のどこにも出現しないトークン」を未使用と判定）で誤って削除され、
   ドロップダウンの装飾が失われていたため復元した。**このブロックは消さないこと。** */
#navitab #nh_info .navilowercontents .cover .listgroup .head {
	padding: 1em;
	font-weight: 700;
	border-bottom: 1px solid;
}

#navitab #nh_info .navilowercontents ul {
	padding-left: 1em;
}

#contentheader {
	top: 60px;
}

#contentheader > .inner {
	height: 30px;
}

#columns #main,
#columns #side {
	width: 100%;
}

@media only screen and (max-width: 1000px) {

	body.slidenavi #navi_global {
		width: 240px;
		height: calc(100% - 60px);
		margin-top: 60px;
		left: auto;
		right: -240px;
	}

	body.safearea.slidenavi #navi_global {
		width: calc(240px + env(safe-area-inset-right));
		right: calc(calc(240px + env(safe-area-inset-right)) * -1);
	}

	body.slidenavi #navi_global.open {
		right: 0;
	}

	#slidenavicover {
		width: calc(100% - 240px);
		height: calc(100% - 60px);
	}
}

@media only screen and (min-width: 1001px) {

	#contentheader > .inner {
		height: 40px;
	}

	#columns #main {
		width: calc(100% - 300px);
	}

	#columns #side {
		width: 300px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px) {

	#navi_menu {
		top: 100px;
	}

	#navi_menu.fixed {
		height: calc(100% - 100px);
	}
}

@media only screen and (min-width: 1001px) {

	body:not(.detach) #upper {
		height: 80px;
	}

	body.fixed:not(.nosticky) #upper {
		height: 60px;
	}


	#logo_header {
		height: 100%;
		left: 20px;
	}

	body:not(.fixed) #logo_header,
	body.nosticky #logo_header {
		height: auto;
		top: 15px;
	}

	body:not(.fixed) #navi_global {
		width: calc(100% - 320px);
		top: 0;
	}

	body.fixed #navi_global {
		width: calc(100% - 200px);
	}

	body:not(.nosticky) #navi_menu {
		top: 160px;
	}

	body.fixed:not(.nosticky) #navi_menu {
		top: 100px;
	}

	body:not(.fixed):not(.nosticky) #navi_menu.fixed {
		height: calc(100% - 220px);
	}

	body.fixed:not(.nosticky) #navi_menu.fixed {
		height: calc(100% - 100px);
	}

	#navitab .navilowercontents {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		box-shadow: 0 1px 2px rgba(0,0,0,.2);
		background: #fff;
		overflow-y: auto;
		position: fixed;
		box-shadow: none;
	}

	#navitab .navilowercontents:before {
		content: '';
		width: 100%;
		height: 100%;
		opacity: .05;
		background-image: linear-gradient(132deg, #44a0dc, #37c57d);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	body.detach #navitab .navilowercontents,
	body.fixed #navitab .navilowercontents {
		top: 59px;
	}

	body:not(.detach):not(.fixed) #navitab .navilowercontents {
		top: 79px;
	}

	body:not(.nosticky) #contentheader {
		top: 80px;
	}

	body.fixed:not(.nosticky) #contentheader {
		top: 60px;
	}

	#navitab li.open .navilowercontents {
		box-shadow: 0 2px 0 0 rgba(0,0,0,.2);
	}

	#navitab li .navilowercontents > li {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
		padding: 20px;
		border-top: 1px solid #b0b8d0;
		position: relative;
		z-index: 2;
	}

	#navitab li .navilowercontents > li > .cover {
		max-width: 1200px;
		margin: 0 auto;
	}

	#navitab li .navilowercontents ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		max-width: 1200px;
		margin: 0 auto;
	}

/* 
	#navitab li .navilowercontents ul:not(:last-child) {
		border-bottom: 1px solid;
	}
 */

	#navitab li .navilowercontents ul:not(.lower) li {
		width: 25% !important;
		padding: 0;
	}

	#navitab li .navilowercontents ul.lower li {
		width: 100% !important;
	}

	#navitab .navilowercontents ul.lower li a {
		padding-left: 1em;
		font-size: 12px !important;
	}

	#navitab .navilowercontents ul li {
/* 		text-align: center; */
	}

	#navitab .navilowercontents ul a {
		display: inline-block;
	}

	/* ★以下12ルールも `#nh_info` が動的生成IDのため未使用CSS整理で誤削除されていた分の復元。
	   PC(1001px以上)のメガメニューの3カラム化・見出し・ホバー下線を担当する。消さないこと。 */

	#navitab #nh_info .navilowercontents .cover {
		display: flex;
	}

	#navitab #nh_info .navilowercontents .cover .listgroup {
		width: 33.333%;
		padding: 15px;
	}


	#navitab #nh_info .navilowercontents ul {
		display: block;
		width: 100%;
	}

	#navitab #nh_info .navilowercontents ul li {
		width: 100% !important;
		height: auto;
	}

	#navitab #nh_info .navilowercontents ul a {
		display: inline-block;
	}

	#navitab #nh_info .navilowercontents .listgroup > ul {
		display: flex;
	}

	#navitab #nh_info .navilowercontents .listgroup > ul > li {
		width: 50% !important;
	}

	#navitab #nh_info .navilowercontents .listgroup:nth-child(3) > ul > li {
		width: auto !important;
		margin-right: 1em;
	}

	#navitab #nh_info .navilowercontents .cover .listgroup .head {
		margin-bottom: 1em;
		border-bottom-color: #44a0dc;
		color: #44a0dc;
	}

	#navitab #nh_info .navilowercontents .cover .listgroup:nth-child(3) .head {
		border-bottom-color: #37c57d;
		color: #37c57d;
	}

	#navitab #nh_info .navilowercontents .cover .listgroup a:hover span,
	#navitab #nh_info .navilowercontents .cover .listgroup a.hover span {
		background: linear-gradient(transparent 90%, #81bee6 10%);
	}

	#navitab #nh_info .navilowercontents .cover .listgroup:nth-child(3) a:hover span,
	#navitab #nh_info .navilowercontents .cover .listgroup:nth-child(3) a.hover span {
		background: linear-gradient(transparent 90%, #91d8b0 10%);
	}

	body.detach:not(.fixed) #upper {
		height: 180px;
	}

	#headerelemlanguagebtn {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: 0;
		order: 3;
	}

	#headerelemlanguagebtn > .inner {
		width: 100px;
		height: 60px;
	}

	#headerelemsearchbtn {
		display: flex;
		align-items: center;
		order: 2;
		width: 60px;
	}

	#headerelemsearchbtn > .inner {
		align-items: center;
		width: 60px;
		height: 60px;
	}
/*
	#headerelemsearchbtn.open {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	body:not(.fixed) #headerelemsearchbtn.open {
		height: 80px;
	}

	body.fixed #headerelemsearchbtn.open {
		height: 60px;
	}

	#headerelemsearchbtn.open > .inner {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	
	#headerelemsearchbtn.open input {
		display: inline;
		width: 100%;
	}
*/

/*  */
/* 
	#headerelemsearchbtn {
		width: 200px;
	}
 */


	body:not(.fixed) #headerelemsearchbtn {
		height: 80px;
	}

	body.fixed #headerelemsearchbtn {
		height: 60px;
	}

	#headerelemsearchbtn > .inner {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	
	#headerelemsearchbtn input {
		display: none;
/* 		width: 100%; */
	}

	body.detach:not(.fixed) #headerelemnavi.elem,
	body.detach.nosticky #headerelemnavi.elem {
		height: 60px;
		order: initial;
	}

	#navielem #headerelemnavi.elem {
		margin-right: 0;
		margin-left: auto;
	}

/* 
	#headerelemnavi.elem {
		flex-grow: 1;
	}
 */

	body.detach:not(.fixed):not(.nosticky) #navi_menu {
		top: 220px;
	}
/*
	body.detach:not(.fixed):not(.nosticky) #container {
		padding-top: 220px;
	}
*/

	body.detach:not(.fixed):not(.nosticky) #contentheader {
		top: 180px;
	}

	body.nosticky #upper {
		height: 80px;
	}

	body.nosticky.detach #upper {
		height: 180px;
	}

	body.nosticky #contentheader {
		top: 0;
	}

	body.nosticky #navi_menu {
		top: 40px;
	}

	body:not(.fixed) #navitab {
		justify-content: flex-start;
	}

	body.detach:not(.fixed) #navitab {
		min-width: 100vw;
	}
}

@media only screen and (min-width: 1201px) {

	body:not(.fixed) #logo_header,
	body.nosticky #logo_header {
/* 		top: 27px; */
	}

/* 
	body:not(.fixed) #navi_global {
		width: calc(100% - 280px);
	}
 */

	body.detach:not(.fixed) #navitab {
		min-width: 1600px;
	}
}


#navimenu {
	right: 0;
}

#naviicon {
	right: 50px;
}


#upper {
	background: #fff;
}

body.fixed #upper {
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

@media only screen and (min-width: 1001px) {

/* 
	#upper {
		border-bottom: 1px solid #e6e6e6;
	}
 */
}


body.safearea #logo_header {
	left: calc(env(safe-area-inset-left) + 10px);
}

@media only screen and (min-width: 1001px) {

	body.safearea #logo_header {
		left: calc(env(safe-area-inset-left) + 20px);
	}
}


#navi_global {
	background: #fff;
}

body.safearea #navi_global > .inner {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
}

body.safearea.slidenavi #navi_global > .inner {
	padding-left: 0;
}
/*
body.slidenavi #navi_global.open {
	box-shadow: 1px 0 3px 1px rgba(0,0,0,.3);
}
*/
body.slidenavi #navi_global.open > .inner {
	border-left: 1px solid #e6e6e6;
}

@media only screen and (min-width: 1001px) {

	body.safearea #navi_global > .inner {
		padding-bottom: 0;
	}
}

#navi_header_thin {
	border-bottom: 1px solid #b0b8d0;
}

body.safearea #navi_header_thin {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body.safearea #navi_header_thin {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

#navi_header_thin .btn_header .label {
	display: none;
}

#navitab .exlink .arrow span:before,
#navitab a[target="_blank"] .arrow span:before {
	content: '\f109';
}

#navitab li.exlink:not(.navilower) a:hover .arrow span,
#navitab li.exlink:not(.navilower) a.hover .arrow span,
#navitab li:not(.navilower) a[target="_blank"]:hover .arrow span,
#navitab li:not(.navilower) a[target="_blank"].hover .arrow span {
	transform: translate(3px,-3px);
}

@media only screen and (min-width: 1001px) {

	#navitab .exlink a .anctitle,
	#navitab a[target="_blank"] .anctitle {
		padding: 0 15px;
	}

	#navitab .exlink .arrow,
	#navitab a[target="_blank"] .arrow {
		display: block;
	}
}


#contentheader {
	border-bottom: 1px solid #e6e6e6;
	background: #fff;
}

body.safearea #contentheader {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body.fixed #contentheader {
	border: none;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#navi_menu {
	background: #fff;
}

body.safearea #navi_menu {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body.safearea #navi_menu.fixed {
	padding-bottom: env(safe-area-inset-bottom);
}

#navi_menu.open {
	border-top: 1px solid #e6e6e6;
}

#navi_menu.open:not(.fixed) {
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#container {
/* 	background: #fff; */
}

#columns #side {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	border-top: 1px solid #000;
	background: #fff;
}

#container > .inner > #side {
	border-top: 1px solid #000;
}

@media only screen and (min-width: 1001px) {

	body.nosticky #contentheader {
		border-bottom: 1px solid #e6e6e6;
		box-shadow: none;
	}

	#columns {
		max-width: 1600px;
		margin: 0 auto;
	}

	#columns #side {
		border-top: none;
		border-left: 1px solid #000;
	}
}


.breadcrumb {
	background: #fff;
}

body.safearea .breadcrumb {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body.safearea .articleblock {
	padding-left: calc(env(safe-area-inset-left) + 20px);
	padding-right: calc(env(safe-area-inset-right) + 20px);
}

.articleblock {
	padding-bottom: 0;
}

@media only screen and (min-width: 769px) {

	body.safearea #main .breadcrumb {
		padding-right: 0;
	}

	body.safearea #columns #side {
		padding-left: 0;
	}
}

@media only screen and (min-width: 1001px) {

/* 
	.breadcrumb > ul {
		border-top: 1px solid #b0b8d0;
	}
 */
}


#bottom {
	background-image: linear-gradient(132deg, #44a0dc, #37c57d);
}

body.safearea #bottom {
	padding-bottom: env(safe-area-inset-bottom);
}

#bottom .footer_navi a {
	color: #fff;
	text-decoration: none;
}

#bottom .footer_navi a:hover,
#bottom .footer_navi a.hover {
	color: #f2f2f2;
}

#bottom > .inner {
/* 
	padding-top: 10px;
	padding-bottom: 10px;
 */
}

body.safearea #bottom > .inner {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

#bureau > .inner {
/* 	border-top: 1px solid #ccc; */
}

body.safearea #bureau > .inner {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

.footertoplevelnavi {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px 10px;
	font-size: 1rem;
}

.footertoplevelnavi ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.footertoplevelnavi li {
	padding: .3em 0;
	font-size: .9em;
	font-weight: 700;
	white-space: nowrap;
}

.footertoplevelnavi li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 10px;
	color: #fff;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-align: center;
	text-decoration: none;
}

.footertoplevelnavi li a:hover,
.footertoplevelnavi li a.hover {
	color: #f2f2f2;
}

.footertoplevelnavi li a .icon {
	margin-right: .3em;
}

/* 
.footertoplevelnavi li a:before {
	content: '\f104';
	margin-right: .5em;
	font-size: .65em;
	font-family: 'uiicon';
	font-weight: normal !important;
	line-height: 2.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
 */

#copyright {
	background: #fff;
}

#copyright > .inner {
	margin: 0 auto;
}

#copyright a {
	color: #000;
	text-decoration: none;
}

#copyright a:hover,
#copyright a.hover {
	color: #666;
}

.textnavi {
	margin-bottom: 1em;
	padding: 0 10px;
	font-size: 1rem;
}

.textnavi ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.textnavi li {
	margin: .3em 1em;
	padding: 0;
	font-size: .75em;
}

#webservice {
	justify-content: center;
	align-items: center;
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 50px
}

#webservice img {
	width: 100%;
	height: auto;
}

@media only screen and (min-width: 769px) {

	.footertoplevelnavi {
		padding: 20px;
		flex-direction: row;
	}
	
	.footertoplevelnavi ul {
		flex-direction: row;
		width: auto;
	}

	.footertoplevelnavi li:not(:last-child) {
		margin-right: 2em;
	}

	.footertoplevelnavi li a {
		padding: 0;
		border: none;
	}

	#bottom .followbutton {
		margin-left: auto;
		margin-right: 0;
	}

	#footer_navi {
		width: auto;
		max-width: 900px;
	}

	.footer_navi ul.navilower ul {
		width: 100%;
	}

	#copyright > .inner {
/* 
		display: flex;
		justify-content: center;
		align-items: center;
 */
	}

	.textnavi {
		order: 2;
		margin-left: auto;
		margin-right: 0;
		padding-right: 70px;
	}

	.copyright {
		order: 1;
	}

	#webservice {
		max-width: 300px;
	}
}

.navilowercontents a[target="_blank"]:after {
	display: inline-block;
	content: '\f109';
	margin-left: .5em;
	font-size: .8em;
	font-family: 'uiicon';
	font-weight: normal !important;
	text-align: center;
	line-height: 2;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.footer_navi ul ul {
	width: 100%;
}

.footer_navi .navilower ul li.lower {
	width: 50%;
}

.footer_navi a[target="_blank"]:after {
	display: inline-block;
	content: '\f109';
	margin-left: .5em;
	font-size: .8em;
	font-family: 'uiicon';
	font-weight: normal !important;
	text-align: center;
/* 	line-height: 2; */
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media only screen and (min-width: 769px) {

	.footer_navi > ul {
		width: 33.333%;
	}

	.footer_navi ul ul {
		padding: 10px 0;
	}

	.footer_navi .navilower ul li.lower {
		width: 100%;
	}

	.footer_navi .navilower:nth-child(1) {
		width: auto;
	}

	.footer_navi .navilower:nth-child(2) {
		width: auto;
	}

	.footer_navi .navilower:nth-child(1) li > ul > li {
		width: 50%;
	}

	.footer_navi .navilower:nth-child(2) li > ul {
		width: 33.333%;
	}

	.footer_navi .navilower:nth-child(2) li > a {
		width: 100%;
	}
}

@media only screen and (min-width: 1001px) {

/* 
	.footer_navi > ul {
		width: 20%;
	}
 */
}

.logotypeset .logo_mark {
	width: 100%;
}

.logotypeset .mark {
	width: 100%;
}

.logotypeset img {
	position: relative;
	top: auto;
	left: auto;
}

@media only screen and (max-width: 768px) {

	#logo_header .logotypeset {
		width: 140px;
	}
}

@media only screen and (min-width: 769px) {

	#logo_header .logotypeset {
		width: 140px;
	}
}

@media only screen and (min-width: 1001px) {

	body:not(.fixed) #logo_header .logotypeset,
	body.nosticky #logo_header .logotypeset {
		width: 180px;
	}
}

@media only screen and (min-width: 1201px) {

	body:not(.fixed) #logo_header .logotypeset,
	body.nosticky #logo_header .logotypeset {
		width: 180px;
	}
}


/*  */
.logo_text {
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
	font-feature-settings: 'palt';
}

.logo_text small {
	margin-left: .5em;
	font-size: .65em;
	font-weight: 400;
}


#emergency_notice {
	width: 100%;
	border-bottom: 1px solid #d8d8d8;
	background: #f2f2f2;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#emergency_notice.hide {
	display: none;
}

#emergency_notice > .inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
}

#emergency_notice > .inner {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

#emergency_notice .brick {
	padding: 1em 1.5em;
	padding-right: calc(1.5em + 60px);
	font-size: 1rem;
	position: relative;
}

#emergency_notice .brick {
	padding-right: calc(1.5em + 60px + env(safe-area-inset-right));
}

#emergency_notice .brick p {
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}

#emergency_notice .brick a {
	border-bottom: 1px solid;
	color: #000;
	text-decoration: none;
}

#emergency_notice .brick a:after {
	content: '\f101';
	margin-left: .2em;
	font-family: 'uiicon';
	font-weight: normal !important;
	vertical-align: middle;
}

#btn_noticeclose {
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

#btn_noticeclose {
	background: #099;
	right: env(safe-area-inset-right);
}

#btn_noticeclose .cover {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 100%;
	background: rgba(255,255,255,.3);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	transition: .2s;
	cursor: pointer;
}

#btn_noticeclose .cover.hover {
	background: rgba(255,255,255,.5);
}


.banner_block {
	margin-bottom: 10px;
}

.banner_block > .inner {
	width: 100%;
	margin: 0 auto;
	font-size: .65rem;
}

.banner_block .bnrcolumns {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.banner_block .bnrcolumns .bnritem {
	width: 100%;
	margin-bottom: 1em;
	font-size: 1em;
}

/* 項目：採用バナーは高さ固定ではなく比率で持つ（2026-08-17）。
   高さを固定していると、ウインドウが広いほど画像の見える帯が薄くなり
   人物の足下が切れていた（1600px 窓では胸から上だけ）。

   12:5 は「人物の頭上に少し空を残して足下まで入る」比率。
   元画像 1600x1200 のうち y=533〜1200 が見える計算で、人物は頭 y≒600・
   顔 y=620〜780・足下 y≒1145 に写っている。

   ★スマホは比率どおりだと低くなりすぎてテキストとボタンが入らないため
   min-height で下限を持つ。下限が効いている間は画像が横にはみ出して
   左右がトリミングされるだけで、上下の見え方（＝足下まで入ること）は変わらない。 */
.banner_block .bnrcolumns .cover {
	display: flex;
	justify-content: center;
	/* ★★align-items は center ではなく stretch（＝中のリンクを高さいっぱいに伸ばす）。
	   ★Safari は下の `> a` の `height: 100%` を **min-height を無視して aspect-ratio 由来の
	   高さ**（幅 ÷ 2.4）で解いてしまう。そのため min-height が効く幅（＝670px 以下）では
	   リンクだけが低くなり、center で中央に置かれて上下に地色(#ccc)の余白が出た
	   （600px 幅でバナー 280px に対しリンク 250px ＝上下 15px ずつ）。Chrome では出ない。
	   stretch なら伸縮はフレックス側が決めるので、両方のブラウザで高さが一致する。
	   ※ `> a` の height: 100% も外してある（指定すると stretch が効かない）。 */
	align-items: stretch;
	width: 100%;
	aspect-ratio: 12 / 5;
	min-height: 280px;
	background: #ccc;
	cursor: pointer;
}

.banner_block .bnrcolumns .bnritem.bnrtext .cover {
	font-size: 1.4em;
	line-height: 1.6;
}

.banner_block .bnrcolumns .cover > a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	/* height: 100% は指定しない（上の .cover の注記のとおり Safari で低く解かれる）。
	   高さは .cover の align-items: stretch で埋まる。 */
	background: #a5b9d2;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	position: relative;
}

.banner_block .bnrcolumns .cover > a:before {
	content: '';
	background: rgba(0,0,0,.2);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.banner_block .bnrcolumns .bnritem .bnrimage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.banner_block .bnrcolumns .bnritem .bnrimage figure {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* ★画像の下端をバナーの下端に合わせ、高さを 180% で持つ。
   これで「画像の下 1/1.8（＝ y=533〜1200）が常に見える」形になり、
   どの幅でも足下が切れない。横幅は 4:3（元画像の比率）で自動。
   比率どおりの幅（12:5）ならちょうど収まり、それより背が高い＝スマホでは
   左右にはみ出してトリミングされる。 */
.banner_block .bnrcolumns .bnritem .bnrimage figure > span {
	display: block;
	width: auto;
	height: 180%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

/* ★★transform-origin は :hover ではなく**こちら（常時）**に書く。
   :hover 側だけに書くと、マウスが離れた瞬間に起点が既定の中心へ戻り、
   縮小のアニメーションだけ別の点を中心に動く＝途中で起点が変わって見える。

   72.22% は「見えている範囲の中心」。画像は高さ 180%・下端合わせなので
   見えているのは下から 1/1.8（55.56%）＝画像の 44.44%〜100% で、その中央が
   100% - 55.56%/2 = 72.22%。この値は幅によらず一定なので、どのサイズでも
   同じ点（＝バナーの中心）から拡大・縮小し続ける。 */
.banner_block .bnrcolumns .bnritem .bnrimage figure img {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 72.22%;
	transition: .5s;
}

/* 倍率は 1.15。中心から拡大すると上下へ均等に伸びるため、元の 1.2 では
   ホバーの最大時に足下（画像 y≒1150）が下へ出る。1.15 なら見える範囲が
   y=577〜1156 に収まり、頭（y≒600）も足下も切れない。 */
.banner_block .bnrcolumns .bnritem a:hover .bnrimage figure img,
.banner_block .bnrcolumns .bnritem a.hover .bnrimage figure img {
	transform: scale(1.15, 1.15);
}

.banner_block .bnrcolumns .bnritem .enclosed {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5em;
	position: relative;
	z-index: 3;
}

/* 項目：テキストを人物の顔より下から始める（2026-08-17）。
   顔はバナー高さの 13%〜37% に来る（画像 y=620〜780 が上記の比率で入る位置）。
   高さの割合で逃がすので、比率が効く幅でも min-height が効くスマホでも同じ位置関係になる。
   ★padding-top では代用できない。パーセント指定の padding は「幅」基準のため、
   min-height が効いている幅で比率が崩れる。 */
.banner_block .bnrcolumns .bnritem.bnrtext .enclosed:before {
	content: '';
	display: block;
	/* 狭い窓でテキストが3行になったときだけ縮む。min-height は顔の下端（37%）で、
	   ここまでは縮んでも顔には掛からない。 */
	flex: 0 1 auto;
	height: 40%;
	min-height: 37%;
}


.banner_block .bnrcolumns .bnritem:not(.bnrtext) p {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

/* margin-top:auto … 顔を逃がした位置（:before）からボタンまでの間で、
   テキストを上下中央に置くため。ボタン側の margin-top:auto と半分ずつ分け合う。 */
.banner_block .bnrcolumns .bnritem.bnrtext h3 {
	margin-top: auto;
	margin-bottom: .5em;
	font-size: 1.4em;
	font-weight: 700;
	text-align: center;
}

.banner_block .bnrcolumns .bnritem.bnrtext .shoulder {
	font-size: 1.2em;
	font-family: 'Titillium Web', 'Helvetica Neue', Helvetica, Avenir, san-serif;
	text-align: center;
}

.banner_block .bnrcolumns .bnritem.bnrtext p {
	font-size: .85em;
	font-weight: 400;
	text-align: center;
}

.banner_block .bnrcolumns .bnritem.bnrtext p > span {
	display: inline-block;
}

.banner_block .bnrcolumns .bnritem .enclosed .btn {
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	margin-top: auto;
	margin-bottom: 0;
}

.banner_block .bnrcolumns .bnritem .enclosed .btn span {
	background: #fff;
	color: #44a0dc;
}

.banner_block .bnrcolumns .bnritem .enclosed .btn .substance {
	display: inline-flex;
	width: 260px;
	justify-content: center;
	align-items: center;
	padding: .6em 1em;
	border: 2px solid;
	position: relative;
}

.banner_block .bnrcolumns .bnritem .enclosed .btn .substance:before {
	display: inline-block;
	content: '';
	width: 20px;
	visibility: hidden;
}

.banner_block .bnrcolumns .bnritem .enclosed .btn .substance:after {
	display: inline-block;
	content: '\f109';
	font-size: 20px;
	font-family: 'uiicon';
	font-weight: normal !important;
	text-align: center;
	transition: .2s;
}

.bnritem a:hover .enclosed .btn .substance:after,
.bnritem a.hover .enclosed .btn .substance:after {
	transform: translate(5px,-5px);
}

.banner_block .bnrcolumns .bnritem .enclosed .btn .substance span {
	display: inline-block;
	flex-grow: 1;
	padding: 0 .3em;
	text-align: center;
	vertical-align: middle;
}

/* 項目：ここにあった幅ごとの画像調整（max-width:350px の縦合わせ／min-width:641px の
   scale(1) 戻し）は削除した（2026-08-17）。高さ固定を前提にした調整で、
   比率で持つようにしたことで不要になった（どの幅でも同じ見え方になる）。 */

@media only screen and (min-width: 769px) {

	.banner_block .bnrcolumns .bnritem .enclosed .btn {
		font-size: 16px;
	}

	.banner_block .bnrcolumns .bnritem {
/* 		width: calc(100% / 2); */
		margin-bottom: 0;
		padding: 0;
	}

	/* 項目：PC表示(≥769px)は採用バナーを角丸に＋左右に余白（.inner にパディングを付け、
	   ウインドウ幅1600pxでも左右に余白が出るようにする）。スマホ(<769px)は角丸なし・全幅のまま。 */
	.banner_block > .inner {
		padding: 0 40px;
	}

	.banner_block .bnrcolumns .cover,
	.banner_block .bnrcolumns .cover > a {
		border-radius: 16px;
	}

	.banner_block .bnrcolumns .cover > a {
		/* Safari で hover 時の img scale(1.2) が角丸クリップを突き破らないよう合成レイヤー化 */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	/* 項目：トップのコンテンツ検索ブロックも採用バナーと同様に。
	   .presentation は max-width:1600px+margin:auto のため 1600px 窓で緑ブロックが画面端に密着する。
	   section を全幅化して padding:0 40px を付け、緑 .inner（max-width:1600 中央寄せ）を角丸16px に。
	   これで採用バナーと幅・左右余白が揃い、1600px 窓でも余白が出る。スマホ(<769px)は全幅・角丸なし。 */
	.presentation.contentssearchsection {
		max-width: none;
		padding: 0 40px;
	}

	.contentssearchsection > .inner {
		border-radius: 16px;
		overflow: hidden;
	}
}

@media only screen and (min-width: 1001px) {

	.banner_block {
		margin-bottom: 60px;
	}

/* 
	.banner_block .bnrcolumns .bnritem {
		width: calc(100% / 3);
		margin-bottom: 0;
		padding: 5px;
	}
 */

/* 
	.banner_block .bnrcolumns .bnritem:nth-child(3) {
		width: 100%;
	}
 */

	.banner_block .bnrcolumns .bnritem {
		font-size: 1.2em;
	}

	/* 項目：高さ 340px 固定と figure の padding-top:340px は削除した（2026-08-17）。
	   高さは .cover の aspect-ratio: 12/5 で幅から決まる。 */

	.banner_block .bnrcolumns .bnritem.bnrtext .cover {
		font-size: 1.6em;
	}

	.banner_block .bnrcolumns .bnritem .enclosed {
/* 		padding: 2em; */
	}

	.banner_block .bnrcolumns .bnritem.bnrtext h3 {
		height: 2em;
		font-size: 1.3em;
	}

/* 	
	.banner_block .bnrcolumns .bnritem .bnrimage figure img {
		width: auto;
		height: 100%;
	}
 */
}


#brandserviceinfo {
	width: 100%;
	position: relative;
}

#brandserviceinfo > .inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 30px 10px;
	padding-top: 50px;
	font-size: 0;
	vertical-align: top;
	position: relative;
}

@media only screen and (min-width: 1201px) {

	#brandserviceinfo > .inner {
		padding-top: 70px;
	}
}


.btnarea.wide a {
	width: 100%;
}

.btnarea > div {
	padding: 5px;
}

.btnarea.wide > div {
	width: 100%;
}

.btnarea.column > div {
	display: flex;
	flex-wrap: wrap;
}

.btnarea > div:not(:last-child) {
	margin-bottom: 10px;
}

.btnarea.column > div > div {
	margin-bottom: 5px;
}

.btnarea.column .label span {
	display: inline-block;
}

.btnarea .center {
	text-align: center;
}

.btnarea .label {
	padding: .3em;
	font-size: 14px;
}

@media only screen and (min-width: 1001px) {

	.btnarea.column > div > div {
		width: calc(50% - 5px);
		margin: 0;
	}

	.btnarea.column > div > div:nth-child(odd) {
		margin-right: 5px;
	}

	.btnarea.column > div > div:nth-child(even) {
		margin-left: 5px;
	}
}


.fixbadge {
	width: 100%;
	position: relative;
	z-index: 10;
}

.fixbadge:not(.relative) {
	position: absolute;
	top: 0;
	left: 0;
}

.fixbadge > .inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 15px;
}

.fixbadge > .inner > span {
	display: block;
	width: 50%;
	max-width: 300px;
}

.scrollarrowsign {
	display: flex;
}

.scrollarrowsign > span {
	width: 50%;
	color: #808080;
	font-size: 14px;
	text-align: left;
}

.scrollarrowsign > span:nth-child(2) {
	text-align: right;
}


/* 
.scrollbrick > .servicelist {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	> .carouselitem {
		scroll-snap-align: center;
	}
}

.scrollbrick > .servicelist {

	&::scroll-button(*) {
		outline-offset: 5px;
	}
	
	&::scroll-button(right) {
		position-area: inline-end center;
		content: 'arrow_forward' / 'Next';
	}
	
	&::scroll-button(left) {
		position-area: inline-start center;
		content: 'arrow_back' / 'Previous';
	}
}
 */


.scrollbrick {

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	
	@media (prefers-reduced-motion: no-preference) {
		scroll-behavior: smooth;
	}
	
	/* snap to center */  
	& .item {
		scroll-snap-align: center;
	}
}


.scrollbrick {

	&::scroll-button(*) {
		inline-size: auto;
		margin: 5px;
		border: none;
		background: transparent;
		font-size: 14px;
		cursor: pointer;
		position-anchor: --carouselframe;
	}
  
	&::scroll-button(*):focus-visible {
/* 		outline-offset: 5px; */
	}
  
	&::scroll-button(*):not(:disabled):is(:hover, :active) {
/* 		background-color: Canvas; */
	}
  
	&::scroll-button(*):not(:disabled):active {
		scale: 90%;
	}
  
	&::scroll-button(left) {
		content: '← scroll';
		grid-area: left;
	}
  
	&::scroll-button(right) {
		content: 'scroll →';
		grid-area: right;
	}
}

.scrollbrick .servicelist {
	position: relative;
	anchor-name: --carouselframe;
}

@layer support.demo {
  
	.scrollsect {

		display: grid;
/*     border: 1px dashed gray; */
    
		/* try a different layout =) */
		grid-template-areas: 
		  "left scroll right"
		  ". markers .";
    
		/* just place items in the grid */
		grid-template-areas: 
		  "left markers right"
		  "scroll scroll scroll";
    
		grid-template-columns: auto 1fr auto;

		.scrollbrick {
			grid-area: scroll;
		}
	}
  
  .scrollbrick {
    max-inline-size: 100%;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }
}


.contentgradatback {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 60px;
	left: 0;
}

.contentgradatback span {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: .4;
/* 	background-image: url(../image/blank.svg); */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.contentgradatback:after {
	content: '';
	width: 100%;
	height: 50%;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
}

@media only screen and (min-width: 1001px) {

	.contentgradatback {
		height: 500px;
	}
}

#serviceinfo .btn {
	display: inline-block;
	font-size: 1rem;
}

#serviceinfo .btn span {
	display: inline-block;
	min-width: 280px;
	padding: .7em 1.5em;
	background: #9a9994;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	transition: .2s;
	cursor: pointer;
}

#serviceinfo .btn span.hover {
	background: #bcbbb9;
}



.contentssearch {
	max-width: 900px;
	margin: 0 auto;
	font-size: .75rem;
	line-height: 1.5;
}

.moviesearch {
	display: none;
	padding-top: 40px;
	background: #ebf9f2;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.moviesearch.show {
	z-index: 999;
}

.moviesearch .inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px;
}

body.safearea.slidenavi .moviesearch .inner {
	padding-left: calc(env(safe-area-inset-left) + 20px);
	padding-right: calc(env(safe-area-inset-right) + 20px);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}

.moviesearch .cover {
	position: relative;
	padding-bottom: 2.2em;
}

.moviesearch .brick {
	padding: 10px 0;
}

.filtergroupblock {
	font-size: 1.2em;
}

.contentssearch h4 {
	color: #21784c !important;
	font-size: 1.4em !important;
	text-align: center;
}

.moviesearch h4 {
	margin-bottom: 1em;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
}

.moviesearch h5 {
	margin-bottom: .5em;
	padding: .4em 1em;
	background: #556072;
	color: #fff;
	font-size: 1em;
	font-weight: 700;
}

.moviesearch h6 {
	font-size: 1em;
	font-weight: 700;
	white-space: nowrap;
}

.filtergroupblock {
	width: 100%;
}

.filtergroup {
	width: 100%;
}

.filtergroup:not(:last-child) {
	border-bottom: 1px solid #21784c;
}

.filtergroup > div {
	padding: 10px;
}

.filtergroup > div.head {
	padding-bottom: 5px;
}

.filtergroup > div.item {
	padding-top: 0;
}

.filtergroup ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.filtergroup li {
	list-style: none;
	padding: 2px;
	font-size: .9em;
}

.filtergroup li a {
	display: inline-block;
	padding: .3em .5em;
	background: #fff;
	border: 2px solid #67be8d;
	background: #fff;
	color: #67be8d;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.filtergroup li a.hover,
.filtergroup li a:hover,
.filtergroup li a.selected {
	background: #67be8d;
	color: #fff;
}

.filtergroup:not(.tag) li a {
	width: 9em;
}

.filtergroup .item > ul > li:has(ul) > a {
	width: 100% !important;
}

.filtergroup .item > ul > li:has(ul) > a {
	width: 100% !important;
}

.filtergroup li ul {
	margin-left: -2px;
	margin-right: -2px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.filtergroup li li {
	font-size: 1em;
}

.filtergroup > div.head h6 {
	text-wrap: nowrap;
}

.filtergroup > div.head h6 {
	text-wrap: nowrap;
}

.filtergroupblock > .filtergroup:nth-of-type(2) .item > ul >li:nth-child(3) {
	width: calc((9em * 3) + (2px * 6));
}

.contentssearch .searchbtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
}

.contentssearch .searchbtn > div {
	width: 100%;
	max-width: 400px;
	font-size: 14px;
}

.contentssearch .searchbtn > div a {
	display: inline-block;
	width: 100%;
	padding: .8em 1.5em;
	background: #37c57d;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.contentssearch .searchbtn > div a.hover,
.contentssearch .searchbtn > div a:hover {
	background: #91d8b0;
}

/* コンテンツ検索の「検索する」ボタン上の余白 */
.contentssearch .contentsbtn {
	margin-top: 14px;
}

/* コンテンツ検索とフリーワード検索の間隔・区切り線 */
.contentssearch .freewordhead {
	margin-top: 56px;
	padding-top: 44px;
	border-top: 1px solid #b7e4cd;
}

/* 支店が未選択の間はカテゴリーを選択不可にする */
.filtergroup.category.disabled {
	opacity: .4;
}

.filtergroup.category.disabled li a {
	cursor: not-allowed;
	pointer-events: none;
}

/* サブカテゴリーは親カテゴリーが選択されるまで直接選択できない */
.filtergroup.category .item > ul > li > ul a {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

.filtergroup.category .item > ul > li.subactive > ul a {
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
}

/* 未選択・未入力時の注意メッセージ */
.contentssearch .searchalert {
	display: none;
	width: 100%;
	margin-bottom: 10px;
	color: #d8434b;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.contentssearch .searchalert.show {
	display: block;
}


.searchbox {
	text-align: center;
	padding: 20px;
}

.searchbox label {
	display: flex;
	justify-content: center;
	align-items: center;
}

.searchbox input[type=search] {
	width: 100%;
	max-width: 400px;
	height: 46px;
	padding: .5em 1.2em;
	border-radius: 999px;
	border: 2px solid #67be8d;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
	vertical-align: top;
	-webkit-appearance: none;
}

.searchbox input[type=search]:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

.searchbox button {
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 8px;
	border: 2px solid #67be8d;
	background: #67be8d;
}

.searchbox button svg {
	fill: #fff;
}


#moviesearchclose span {
	display: inline-block;
	padding: .7em 1em;
	background: #67be8d;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	transition: .2s;
	cursor: pointer;
}

#moviesearchclose span.hover {
	background: #91d8b0;
}

#moviesearchclose {
	position: fixed;
	top: 0;
	right: 0;
}

#moviesearchclose span:after {
	display: inline-block;
	content: '\f107';
	margin-left: .5em;
	font-family: 'uiicon';
	font-weight: normal !important;
	text-align: center;
}

@media only screen and (min-width: 541px) {

	.filtergroupblock {
		width: 100%;
		display: table;
		border-collapse: collapse;
	}

	.filtergroup {
		display: table-row;
	}

	.filtergroup > div {
		display: table-cell;
		padding: 10px !important;
	}
}


.btnarea a,
.btn_contact a,
.contactbtn a,
.btnarea.contactbtn a,
.btnarea .contactbtn a,
.searchbtn a,
.contentssearch .searchbtn > div a,
.filtergroup li a,
.archivenavi.branch a,
.archivenavi.tag a,
.stepbtn a,
.shelfbtn a,
.banner_block .bnritem .enclosed .btn .substance,
.articlelist.arrowicon .item .enclosed .meta span,
.articlelist .category span a,
.articlelist .category span{
	border-radius: 999px;
}

/* カード式コンテンツ一覧のカテゴリは必ずピル型に
   （各CSSの .infocatlist ... category { border-radius: 0 } を上書き） */
.infocatlist .articlelist .category span a,
.infocatlist .articlelist .item .category span a {
	border-radius: 999px !important;
}


/* ===== サイト全体：写真を角丸に（デザイン柔らか化） ===== */
.articlebody figure img {
	border-radius: 16px;
	overflow: hidden;
}

/* 項目：記事メイン写真は 5:3 枠（figure）で上下を切り取るため、角丸は img ではなく
   切り取る側＝figure に付ける。img に付けると、はみ出した部分ごと角丸が枠外へ出て
   見えなくなる（ブランク画像だけでなく全記事で角丸が消えていた）。
   中央寄せラッパーの div は枠より背が高いので、そちらに付けても見えない。
   translateZ(0) は、中の div が transform を持つときに Safari でクリップが外れるのを防ぐため
   （一覧サムネイルで同じ対処をしている）。 */
.articlemainimage figure {
	border-radius: 16px;
	overflow: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* 項目：記事メイン写真は画面幅いっぱい(<769px＝左右余白なしで全幅)のとき角丸を解除する */
@media only screen and (max-width: 768px) {
	.articlemainimage figure {
		border-radius: 0;
	}
}

/* 検索結果など横並びリストのサムネイル */
.articlelist.line .thumb figure,
.articlelist.line .thumb img {
	border-radius: 12px;
	overflow: hidden;
}

/* スマホ表示：コンテンツ一覧のサムネイル写真を四隅とも角丸に（サイト全体）。
   モバイルは写真左＋テキスト右の横並びのため、上部のみの角丸ではなく四隅を丸める。 */
@media only screen and (max-width: 540px) {
	.articlelist .item .thumb figure,
	.articlelist .item .thumb figure span,
	.articlelist .item .thumb figure img,
	.infocatlist .articlelist .item .thumb figure,
	.infocatlist .articlelist .item .thumb figure span,
	.infocatlist .articlelist .item .thumb figure img {
		border-radius: 12px !important;
		overflow: hidden;
	}

	/* ホバー/タップで img が scale(1.3) するとき、Safari では角丸を持つ figure が
	   非合成のためクリップが外れて角が四角く飛び出す。直上の span は transform（object-fit 用の
	   translate）を常時持つ合成レイヤーなので、span 自身に角丸＋overflow を効かせてクリップさせる。
	   さらに念のため figure も translateZ(0) で合成レイヤーに昇格させ、クリップを確実にする。 */
	.articlelist .item .thumb figure,
	.infocatlist .articlelist .item .thumb figure {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}


/* ------------------------------------------------------------------
   支店で絞り込む（全支店横断の一覧に出る導線）

   支店が決まっていない一覧に出る。
     /contents/?category_name=…      … 全支店横断のカテゴリ一覧
     /contents/search/?tag=a,b       … 支店なしのタグ複数指定
     /contents/search/?…s=…          … 支店なしのフリーワード検索（2026-08-17 追加）
   検索結果ページでは結果が1件以上のときだけ出る（0件なら全支店とも0件になるため）。
   件数0の支店は押せない。見た目はサイドバーの支店ナビ（.archivenavi.branch）に合わせる。

   ★search.css ではなくここに置く。search.css は検索ページでしか読まないため、
   コンテンツ一覧（info.css 側）に出す分が無スタイルになる。
   ------------------------------------------------------------------ */

.branchfilter {
	margin: 0 0 40px;
	text-align: center;
}

/* 見出しは他の h3（本文中の小見出し）と同じ大きさにする。
   独自に小さくしていたが、ページ内でここだけが見出しなので普通の h3 に戻した。 */
.branchfilter h3 {
	margin: 0 0 18px;
	color: #48494c;
}

.branchfilter ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.branchfilter li {
	list-style: none;
}

.branchfilter a,
.branchfilter .empty span {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .45em 1.1em;
	border: 2px solid #44a0dc;
	border-radius: 999px;
	background: #44a0dc;
	color: #fff;
	font-size: .95em;
	line-height: 1;
	white-space: nowrap;
}

.branchfilter a em {
	font-style: normal;
	font-size: .85em;
	opacity: .85;
}

.branchfilter a:hover,
.branchfilter a.hover {
	background: #fff;
	color: #44a0dc;
	text-decoration: none;
}

/* 検索結果ページ（body#search）では上に余白を足す。
   語で検索したときは直前に「"○○" の検索結果」の h3 が来るため、
   余白が無いと見出しが2つ続いて1つの塊に見える。 */
body#search .branchfilter {
	margin-top: 40px;
}

/* 件数0の支店。押せないことが分かるよう淡くする */
.branchfilter .empty span {
	border-color: #d9dde3;
	background: #f2f4f7;
	color: #9aa1ab;
	cursor: default;
}

@media only screen and (max-width: 540px) {

	.branchfilter a,
	.branchfilter .empty span {
		padding: .4em .9em;
		font-size: .85em;
	}
}