@charset "UTF-8";
/* 文字に対する影付けは、text-shadowを使用してみる */

.top-img {
	position: relative;
	height: auto;
	overflow: hidden;
	background-color: white;;
/*	background-color: #3eacf5;*/
	border-style: solid;
	border-color: #f0f0f0;
	border-width: 0 1px 0 1px;
}
.top-img .t-img {
	position: absolute;
	top: 0;
	left: 0;
	/*max-width: 100%;*/
	height: auto;
	/*opacity: 0.7;*/
}
.zas {
	transform: scale(1.03);
}
.zooms {
	animation: zoom-in-a 19s;
}
@keyframes zoom-in-a {
	0% {
		transform: scale(1.0);
	}
	100% {
		transform: scale(1.03);
	}
}
.msk-text {
	/*background-color: rgba(255,255,255,0.5);*/
	border-radius: 6px;
	color: #0000c0;
	font-weight: bold;
	font-size: 14px;
	text-shadow: 1px 1px 2px #ddebeb, -1px 1px 2px #ddebeb, 1px -1px 2px #ddebeb, -1px -1px 2px #ddebeb;
}
.top-img .of-y1 {
	top: -550px;
	left: -50px;
}
.top-img .of-y2 {
	top: -550px;
	left: -100px;
}
.top-img .of-y3 {
	top: -150px;
	left: -400px;
}
.top-img .of-y4 {
	top: -720px;
	left: -100px;
}
.top-img .of-y5 {
	top: -350px;
	left: -300px;
}
.top-img .cover {
	position: absolute;
	top: 0;
	background-color:black;
	opacity: 0.2;
	height: 800px;
	width: 100%;
}

.bg_dot{
	background-image:
	  radial-gradient(#7bded9 30%, transparent 30%);
	background-size: 20px 20px;
}
.top-messages {
	margin: 0px 20px 10px 20px;
	padding: 0 20px 10px 20px;
	font-size: 20px;
	font-weight: 600;
	border-radius: 20px;
	max-width: 100%;
	min-height: 240px;
}
.ul-dot {
	background: linear-gradient(rgba(255,255,255,0) 65%, rgb(172, 243, 255,0.7) 25%);
	padding: 0 10px 5px 10px;
	color: #f9f9ff;
	text-shadow: 1px 1px 2px #4d5d5d, -1px 1px 2px #4d5d5d, 1px -1px 2px #4d5d5d, -1px -1px 2px #4d5d5d;
}
.top-messages p {
	margin: 8px 0;
}
.top-messages .mss1 {
	display:none;
}

.top-img>div {
	position: relative;
	z-index: 90;
}
.top-img .b-logo {
	background-color: rgba(200,230,255, 0.4);
	backdrop-filter: blur(3px);
}
.top-img .logo-w {
	filter: drop-shadow(1px 1px 2px rgba(255,255,255,0.5));
}
.top-img .logo-b {
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

/* 2025.05.21 */
.top-info {
	min-height:168px;
	background-color: #fffff9;
}
.top-info .banner {
	padding-right:10px;
	padding-bottom:10px;
}

.brand-link-box {
	margin: 0 5px;
	border-radius: 25px 25px 0 0;
}
.brand-link-box img {
	margin: auto;
	width: 110px;
}
.brand-link-box a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 72px;
	border-radius: 8px;
}
.brand-link-box a:hover {
	background-color: rgba(255,255,255,0.3);
}
.brand-link-box a:active {
	background-color: rgba(255,200,200,0.3);
}

.pdf-set {
	display: inline-block;
	margin-bottom: 10px;;
	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: #d0d0d0;
	background-color: white;
}

.attention-point {
	font-weight: bold;
	color: #880000!important;
}

.boy-news,
.boy-attention {
	--bs-accordion-btn-padding-y:8px;
	--bs-accordion-btn-padding-x:20px;
	font-size: 1rem;
	margin-bottom: 6px;
}

.boy-news button:has(.collapsed) {
	background-color: #e0e0f0;
}

.boy-news .accordion-header .accordion-button,
.boy-attention .accordion-header .accordion-button {
	font-size: 1.0rem;
}

.accordion-header .accordion-button span {
	margin-right: 5px;
}
.accordion-header .bd-category {
	width: 70px;
}


.boy-news h3,
.boy-attention h3 {
	margin-bottom: 0;
	font-size: 1.0rem;
}
.boy-news h4,
.boy-attention h4 {
	font-size: 1.0rem;
}

.boy-news .accordion-body,
.boy-attention .accordion-body {
	background-color: #fafafa;
	padding-left: 35px;
	font-size: 1.0rem;
}
.boy-news .accordion-body p,
.boy-attention .accordion-body p {
	color: black;
	margin-bottom: 6px;
}

.boy-news table,
.boy-attention table {
	font-size: 14px;
	width: auto;
}
.boy-news table th,
.boy-news table td,
.boy-attention table th,
.boy-attention table td {
		padding: 2px 10px;
}
.brand-list,
.brand-list-2 {
	margin: 0 0 20px;
}
.brand-list .card {
	padding-top:3px;
	font-size: 0.80rem;
	width: 10.5rem;
	text-align:center;
}
.brand-list .card:hover {
	background-color:aliceblue;
	color:black;
}
.brand-list .card img {
	margin: auto;
	width: 110px;
}
.brand-list .card .card-body {
	padding: 2px 2px;
}

.brand-list-2 {
	font-size: 1.0rem;
}
.brand-list-2 .col {
	text-align: center;
}

.brand-list-2 a img:hover {
	opacity: 0.7;
}

a {
	transition: all 0.5s 0s ease;
}
.outer-links a {
	text-align: center;
}
.outer-links a:hover {
	opacity: 0.7;
	transform: translateY(-2px);
}