@charset "utf-8";
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figcaption, figure, section, footer, header, main, hgroup, menu, nav, summary {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
@media all and (max-width: 389px) {
	html {
		font-size: calc(1000vw / 390);
	}
}
body, table, input, textarea, select, option {
	font-family: "Noto Sans JP", sans-serif;
}
article, aside, canvas, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
chrome_annotation {
	border: none !important;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
address {
	font-style: normal;
}
a,
a:link {
	color: #000;
	text-decoration: none;
	transition: 0.3s;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	min-width: 1280px;
	color: #000;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
}
#container {
	position: relative;
	text-align: left;
}
.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
#main {
	margin-bottom: 14.4rem;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
@media all and (min-width: 897px) {
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 896px) {
	body {
		min-width: inherit;
		font-size: 1.4rem;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
	#main {
		margin-bottom: 7rem;
	}
}
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	padding: 3rem 5rem;
	transition: transform 0.6s ease;
}
/* headerがfooterに行くと消える処理 */
.site-header.is-hidden {
  transform: translateY(-100%);
}

#gHeader .hBox {
	padding-left: 3rem;
	position: relative;
	align-items: center;
	border-radius: 1.2rem;
	background-color: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(3rem);
	-webkit-backdrop-filter: blur(3rem);
	will-change: transform;
}
#gHeader .logo {
	/* width: 24.2rem; */
	height: 35px;
	aspect-ratio: 548 / 87;
	width: auto;
}
#gHeader .logo a {
	display: block;
}
#gHeader .rBox {
	display: flex;
	justify-content: right;
	flex: 1;
	align-items: center;
}

/* ヘッダーのナビ強制処理 */
#gHeader #gNavi li  {
	margin-right: 1vw !important;
}

#gNavi li {
	margin-right: 3rem;
}
#gNavi a {
	padding: 0 0.5rem 2rem;
	font-weight: 700;
	font-size: 1.6rem;
	color: #222;
	font-family: "Noto Sans", sans-serif;
	border-bottom: 0.3rem solid transparent;
}
#gNavi li.on a {
	border-color: #222;
}
#gHeader .hLogo {
	padding: 2.5rem 1.5rem 1.8rem;
	text-align: center;
	background-color: #fff;
	border-radius: 0 1.2rem 1.2rem 0;
}
#gHeader .hLogo a {
	display: block;
}
#gHeader .hLogo img {
	width: 12.4rem;
}
#gHeader #gNavi li {
	margin-right: 2rem;
}
#gHeader #gNavi li:last-child {
	margin-right: 5rem;
}
#gHeader .li01 a {
	color: #666;
	font-size: 1.6rem;
}
@media all and (max-width: 1350px) {
	/* ヘッダーのナビ強制処理 */
	#gHeader #gNavi li  {
		margin-right: 1vw !important;
	}

	#gNavi a {
		font-size: 1.4rem;
	}
}
@media all and (min-width: 897px) and (max-width: 1170px) {
	#gHeader {
		padding: 1rem;
	}
	#gHeader h1 {
		width: 15rem;
	}
	#gNavi li {
		margin-right: 1rem;
	}
}
@media all and (min-width: 897px) {
	#gNavi a:hover {
		border-color: #222;
	}
}
@media all and (max-width: 896px) {
	#gHeader {
		padding: 1rem;
	}
	#gHeader .hBox {
		padding-left: 1rem;
		border-radius: 0.6rem;
	}
	#gHeader h1 {
		width: 17rem;
	}
	#gNavi {
		display: none;
	}
	#gHeader .hLogo {
		padding: 2.5rem 1.5rem 1.8rem;
		text-align: center;
		background-color: #fff;
		border-radius: 0 1.2rem 1.2rem 0;
	}
	#gHeader .hLogo a {
		display: block;
	}
	#gHeader .hLogo img {
		width: 12.4rem;
	}
	#gHeader #gNavi li {
		margin-right: 2rem;
	}
	#gHeader #gNavi li:last-child {
		margin-right: 5rem;
	}
	#gHeader .li01 a {
		color: #666;
		font-size: 1.5rem;
	}
}
/*------------------------------------------------------------
	menu
------------------------------------------------------------*/
.menu {
	width: 7.5rem;
	height: 7rem;
	position: relative;
	background-color: #222;
	border-radius: 0 0.8rem 0.8rem 0;
	transition: .3s;
}
.menu .line {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	position: absolute;
	right: 2.1rem;
	width: 3.3rem;
	height: .2rem;
	background-color: #fff;
}
.menu .txt {
	width: 100%;
	display: block;
	transition: all .4s;
	box-sizing: border-box;
	position: absolute;
	bottom: 1.5rem;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	font-family: "Raleway", sans-serif;
}
.menu .txt.close {
	display: none;
}
.menu.on .txt.open {
	display: none;
}
.menu.on .txt.close {
	display: block;
}
.menu .line:nth-of-type(1) {
	top: 2rem;
}
.menu .line:nth-of-type(2) {
	top: 2.8rem;
	width: 1.9rem;
}
.menu.on .line:nth-of-type(2) {
	width: 3.3rem;
}
.menu.on span:nth-of-type(1) {
	transform: translateY(0.4rem) rotate(-15deg);
}
.menu.on span:nth-of-type(2) {
	transform: translateY(-0.4rem) rotate(15deg);
}
.menuBox {
	padding: 29.5rem 2rem 6rem;
	position: fixed;
	display: none;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(3rem);
	-webkit-backdrop-filter: blur(3rem);
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}

.menuBox .content {
	max-width: 113rem;
}
.menuBox .innerBox {
	margin: -3rem -3rem 13.2rem 0;
}
.menuBox .innerBox .logo {
	margin-bottom: 3.5rem;
}
.menuBox .innerBox .logo a {
	display: block;
}
.menuBox .innerBox .sub {
	margin: 3rem 9.05% 0 0;
	max-width: 26.2rem;
}
.menuBox .innerBox .sub:nth-of-type(4n) {
	margin-right: 0;
}
.menuBox .innerBox .navBox {
	margin-bottom: 1.5rem;
}
.menuBox .innerBox .navBox .title {
	margin-bottom: 1rem;
}
.menuBox .innerBox .navBox .title a {
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
	display: inline-block;
}
.menuBox .innerBox .navBox ul {
	padding-bottom: 2.5rem;
	min-height: 7.9rem;
}
.menuBox .innerBox .navBox ul li {
	position: relative;
	line-height: 1;
}
.menuBox .innerBox .navBox ul li::after {
	width: 0.7rem;
	height: 1px;
	position: absolute;
	top: 1rem;
	left: 0.2rem;
	z-index: 0;
	content: "";
	background-color: #666;
}
.menuBox .innerBox .navBox ul a {
	padding-left: 1.3rem;
	font-size: 1.3rem;
	color: #666;
	display: inline-block;
}
.menuBox a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) and (max-width: 1200px) {
	.menuBox .innerBox {
		margin: -3rem auto 13.2rem;
		justify-content: center;
	}
	.menuBox .innerBox .sub {
		margin-right: 1%;
	}
}
@media all and (min-width: 897px) {
	.menu:hover {
		cursor: pointer;
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	.menu {
		width: 5rem;
		height: 5rem;
		border-radius: 0 0.6rem 0.6rem 0;
	}
	.menu .line {
		height: 1px;
		right: 0.9rem;
	}
	.menu .txt {
		bottom: 0.8rem;
		font-size: 1rem;
	}
	.menu .line:nth-of-type(1) {
		top: 1.4rem;
	}
	.menu .line:nth-of-type(2) {
		top: 2.1rem;
	}
	.menu.on span:nth-of-type(1) {
		transform: translateY(0.38rem) rotate(-12deg);
	}
	.menu.on span:nth-of-type(2) {
		transform: translateY(-0.38rem) rotate(12deg);
	}
	.menuBox { 
		padding: 9.3rem 0 3.6rem;
		min-width: 100%;
	}
	.menuBox .naviList {
		margin: -2rem 0 2rem;
	}
	.menuBox .naviList01 {
		margin-bottom: 5rem;
	}
	.menuBox .naviList li {
		margin-top: 2rem;
		margin-right: 2.5rem;
		/* width: calc(100% / 3); */
	}
	.menuBox .naviList a {
		font-size: 1.5rem;
		font-weight: 700;
		font-family: "Noto Sans", sans-serif;
		color: #222;
	}
	.menuBox .innerBox .navBox .title .ico {
		margin-left: 0.5rem;
		width: 1.2rem;
		height: 1rem;
		display: inline-block;
		vertical-align: -0.2rem;
		background: url(../img/common/icon10_on.png) no-repeat left top / 100%;
	}
	.menuBox .innerBox .navBox .title .ico.on {
		background-image: url(../img/common/icon10.png);
	}
	.menuBox .content {
		max-width: 100%;
	}
	.menuBox .innerBox {
		margin: 0 0 0rem 0;
		display: block;
		overflow: hidden;
	}
	.menuBox .innerBox .logo {
		margin-bottom: 1rem;
		position: relative;
		width: fit-content;
	}
	.menuBox .innerBox .logo a {
		padding-right: 1rem;
		display: inline-block;
	}
	/* .menuBox .innerBox .logo::after {
		width: 89rem;
		height: 1px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 100%;
		right: 1rem;
		content: "";
		background-color: #d8d8d8;
	} */
	.menuBox .innerBox .logo img {
		width: auto;
		height: 2.6rem;
	}
	.menuBox .innerBox .sub {
		margin: 0;
		max-width: 100%;
	}
	.menuBox .innerBox .sub .info {
		display: flex;
		align-items: flex-start;
	}
	.menuBox .innerBox .navBox {
		margin-bottom: 1.7rem;
	}
	.menuBox .innerBox .navBox:nth-of-type(1) {
		/* width: 62%; */
		width: 19%;
	}
	.menuBox .innerBox .navBox:nth-of-type(2) {
		/* width: 23%; */
		width: 6.5%;
	}
	.menuBox .innerBox .navBox:nth-of-type(3) {
		width: 15%;
	}
	.menuBox .innerBox .sub:nth-of-type(4n) {
		/* margin-right: 9.05% !important; */
		margin-right: 10.5rem !important;
		margin-bottom: 4.86rem;
	}
	.menuBox .innerBox .navBox .title {
		margin-bottom: 0.6rem;
	}
	.menuBox .innerBox .navBox .title a {
		font-size: 1.3rem;
	}
	.menuBox .innerBox .navBox .inn {
		display: none;
	}
	.menuBox .innerBox .navBox ul {
		padding-bottom: 0;
	}
	.menuBox .innerBox .navBox ul li {
		margin-bottom: 0.6rem;
	}
	.menuBox .innerBox .navBox ul li:last-child {
		margin-bottom: 0;
	}
	.menuBox .innerBox .navBox ul li::after {
		top: 0.7rem;
	}
	.menuBox .innerBox .navBox ul a {
		padding-left: 1.3rem;
		font-size: 1.1rem;
		letter-spacing: -0.02em;
	}
	/* .menuBox .comLinkList {
		margin-top: -2rem;
	} */
	.menuBox .comLinkList {
		justify-content: left;
	}
	.menuBox .comLinkList li {
		padding: 0 3.5rem;
	}
	.menuBox .comLinkList li:first-child {
		padding-left: 0;
	}
	.menuBox .comLinkList li:not(:last-child)::after {
		width: 1px;
		height: 1.2rem;
	}
	.menuBox .comLinkList a {
		font-size: 1rem;
	}
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	padding-top: 13.7rem;
	border-top: 1px solid #d8d8d8;
	background-color: #fff;
}
#gFooter .fBox {
	margin-bottom: 12.9rem;
}
#gFooter .logo {
	/* margin: 0 auto 5.6rem; */
	margin: 0 auto 7.1rem;
	width: 31.5rem;
}
#gFooter .logo a {
	display: block;
}
#gFooter .brandList  {
	margin-bottom: 8.96rem;
}
#gFooter .brandList li {
	margin: 0 2rem;
}
#gFooter .brandList img {
	height: 2.8rem;
}
#gFooter .comLinkList li {
  padding: 0 2.7rem;
  border-right: 1px solid #767676;
  font-size: 15px;
  line-height: 1;
}
#gFooter .comLinkList li:last-child {
  border-right: none;
}
#gFooter .comLinkList li::after {
  display: none;
}
#gFooter .brandList a {
	display: block;
}
#gFooter .brandList a:hover,
#gFooter .comLinkList a:hover {
	opacity: 0.7;
}
#gFooter .comLinkList a {
	font-size: 1.5rem;
}
#gFooter address {
	padding: 4.5rem 0;
	text-align: center;
	font-size: 1.3rem;
	color: #767676;
	border-top: 1px solid #d8d8d8;
}
@media all and (max-width: 896px) {
	#gFooter {
		padding-top: 12rem;
	}
	#gFooter .fBox {
		margin-bottom: 2rem;
	}
	#gFooter .logo {
		margin: 0 0 5.6rem;
		width: 23.7rem;
	}
	#gFooter .brandList {
		margin: -3rem 0 6.3rem;
		justify-content: left;
	}
	#gFooter .brandList a {
		display: inline-block;
	}
	#gFooter .brandList li {
		margin: 3rem 0 0 !important;
	}
	#gFooter .brandList li:nth-child(2n-1) {
		width: 46%;
	}
	#gFooter .brandList li:nth-child(2n) {
		width: 54%;
	}
	#gFooter .brandList img {
		height: 2.4rem;
	}
	#gFooter .comLinkList li {
		padding: 0 2rem;
		border-right: none;
	}
	#gFooter .comLinkList a {
		font-size: 1.2rem;
	}
	#gFooter address {
	font-size: 1rem;
}
}
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LYX */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	font
------------------------------------------------------------*/
.rale {
	font-weight: 700;
	font-family: "Raleway", sans-serif;
}
.noto {
	font-weight: 500;
	font-family: "Noto Sans", sans-serif;
}
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	max-width: 120rem;
}
@media all and (max-width: 896px) {
	.content {
		padding: 0 2rem;
		max-width: 100%;
	}
}
/*------------------------------------------------------------
	pageTitle
------------------------------------------------------------*/
.pageTitle {
	padding: 15.8rem 0 4.7rem;
	margin: 0 auto 6.5rem;
	max-width: 120rem;
	border-bottom: 1px solid #d8d8d8;
}
@media all and (max-width: 896px) {
	.pageTitle {
		padding: 12rem 0 5rem;
		margin: 0 2rem 6.5rem;
		max-width: 100%;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 .en {
	display: block;
	font-size: 9rem;
	line-height: 1.15;
	font-weight: 400;
}
.headLine01 .jp {
	font-size: 2.2rem;
}
@media all and (max-width: 896px) {
	.headLine01 .en {
		font-size: 6rem;
	}
	.headLine01 .jp {
		font-size: 1.6rem;
	}
}
/*------------------------------------------------------------
	headLine02
------------------------------------------------------------*/
.headLine02 {
	margin-bottom: 1.9rem;
	padding-left: 1.8rem;
	font-size: 2.6rem;
	font-weight: 700;
	background: url("../img/common/line01.png") no-repeat left 0.7rem / 0.4rem;
}
@media all and (max-width: 896px) {
	.headLine02 {
		padding-left: 1.5rem;
		font-size: 2.2rem;
		background-size:  auto 2.2rem;
	}
}
/*------------------------------------------------------------
	headLine03
------------------------------------------------------------*/
.headLine03 {
	margin-bottom: 9rem;
	font-size: 2.6rem;
	font-weight: 700;
}
@media all and (max-width: 896px) {
	.headLine03 {
		font-size: 2.2rem;
	}
}
/*------------------------------------------------------------
	comLinkList
------------------------------------------------------------*/
.comLinkList li {
	padding: 0 3.5rem;
	position: relative;
}
.comLinkList li:not(:last-child)::after {
	width: 1px;
	height: 1.2rem;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-40%);
	right: 0;
	content: "";
	background-color: #767676;
}
.comLinkList a {
	font-size: 1.3rem;
	color: #767676;
}
.comLinkList a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.comLinkList li {
		padding: 0 3.5rem;
	}
	.comLinkList a {
		font-size: 1.1rem;
	}
	.comLinkList li:not(:last-child)::after {
		display: none;
	}
}
/*------------------------------------------------------------
	newsBox
------------------------------------------------------------*/
/* .newsBox {
  padding: 0 4rem 0 2.5rem;
  position: absolute;
  z-index: 1;
  bottom: 2.8rem;
  right: 8.7rem;
  width: 46.7rem;
  display: flex;
  border-radius: 0.5rem;
  background-color: #fff;
}

.newsBox a {
  width: calc(100% - 7.3rem);
}

.newsBox .lBox {
  padding: 1.7rem 0;
  width: 5.5rem;
  color: #222;
}

.newsBox .rBox {
  padding: 2.2rem 0;
  display: flex;
}

.newsBox .newsItem {
  margin-left: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.newsBox .rBox .time {
  width: 8.5rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: #222;
}

.newsBox .rBox .txt {
  color: #222;
  font-weight: 700;
  font-size: 1.4rem;
  margin-left: 1.5rem;
}

.newsBox .ico {
  width: 1.3rem;
  position: absolute;
  z-index: 10;
  right: 2rem;
  top: 1.9rem;
  cursor: pointer;
  transition: 0.3s;
}

.newsBox .ico.down {
  top: auto;
  bottom: 0;
}

.newsItem.slide-in-down {
  opacity: 1;
  transform: translateY(0);
  animation: slideInDown 0.5s forwards;
}

.newsItem.slide-in-up {
  opacity: 1;
  transform: translateY(0);
  animation: slideInUp 0.5s forwards;
}


@keyframes slideInDown {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media all and (min-width: 897px) {
	.newsBox a:hover {
		opacity: 0.7;
	}
	.newsBox .ico:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	.newsBox {
		padding: 0 3.2rem 0 2.3rem;
		bottom: 2.5rem;
		right: 5.2rem;
		left: 2rem;
		width: auto;
		border-radius: 0.5rem;
	}
	.newsBox a {
		width: calc(100% - 5.5rem);
	}
	.newsBox .lBox {
		padding: 2.4rem 0 1.4rem;
		width: 4rem;
		font-size: 1.5rem;
	}
	.newsBox .rBox {
		padding: 1.2rem 0 1.4rem;
		display: block;
	}
	.newsBox .rBox .time {
		width: auto;
		display: block;
		font-size: 1.2rem;
	}
	.newsBox .rBox .txt {
		font-size: 1.2rem;
	}
	.newsBox .ico {
		top: 1.8rem;
	}
	.newsBox .ico.down {
		bottom: 0.5rem;
	}
} */

/*------------------------------------------------------------
  newsBox
------------------------------------------------------------*/
.newsBox {
  position: absolute;
  z-index: 1;
  bottom: 2.8rem;
  right: 8.7rem;
  width: 46.7rem;
  padding: 0 5.6rem 0 2.5rem; /* → 右にアイコン分の余白を確保 */
  display: grid;
  grid-template-columns: 5.5rem 1fr; /* 左ラベル / 右本文 */
  column-gap: 1.5rem;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #fff;
  box-sizing: border-box;
}

/* a の幅指定は不要。要素全体をタップターゲットに */
.newsBox a {
  display: contents; /* 子要素のレイアウトを崩さずリンク化 */
}

/* 左側ラベル */
.newsBox .lBox {
  padding: 1.7rem 0;
  color: #222;
  width: auto; /* グリッドで制御するため固定幅は外す */
}

/* 右側本体 */
.newsBox .rBox {
  padding: 2.2rem 0;
  display: flex;
  align-items: center;
  min-width: 0; /* 省略記号が効くように */
}

/* 1件分 */
.newsBox .newsItem {
  margin-left: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
  min-width: 0;
}

.newsBox .rBox .time {
  flex: 0 0 auto;
  width: 8.5rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: #222;
}

.newsBox .rBox .txt {
  flex: 1 1 auto;
  min-width: 0;              /* ← 省略記号に必須 */
  margin-left: 1.5rem;
  font-weight: 700;
  font-size: 1.4rem;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 横幅超過で「…」 */
}

/* アイコンは常に右端中央に固定。重なり防止で右パディングを確保済み */
.newsBox .ico {
  width: 1.3rem;
  position: absolute;
  z-index: 10;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.3s;
}

/* 下向きだけ別配置にしたい場合は必要に応じて上書き */
.newsBox .ico.down {
  top: auto;
  bottom: -0.5rem;
  transform: none;
}

/* アニメーション（既存） */
.newsItem.slide-in-down { opacity: 1; transform: translateY(0); animation: slideInDown 0.5s forwards; }
.newsItem.slide-in-up   { opacity: 1; transform: translateY(0); animation: slideInUp   0.5s forwards; }

@keyframes slideInDown {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes slideInUp {
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* hover（PCのみ） */
@media all and (min-width: 897px) {
  .newsBox:has(a):hover { opacity: 0.98; } /* ほんのり */
  .newsBox .ico:hover { opacity: 0.7; }
}

/* ===== SP ===== */
@media all and (max-width: 896px) {
  .newsBox {
    left: 2rem;
    right: 5.2rem;
    bottom: 2.5rem;
    width: auto;
    padding: 0 4.4rem 0 2.3rem;    /* 右の余白を少し詰める */
    grid-template-columns: 4rem 1fr;
    border-radius: 0.5rem;
  }
  .newsBox .lBox {
    padding: 2.0rem 0 1.2rem;
    font-size: 1.5rem;
  }
  .newsBox .rBox {
    padding: 1.2rem 0 1.4rem;
    display: block;               /* 縦積み */
  }
  .newsBox .rBox .time {
    display: block;
    width: auto;
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }
  .newsBox .rBox .txt {
    font-size: 1.2rem;
    white-space: normal;          /* 折り返しに変更 */
    overflow: visible;
    text-overflow: clip;
    margin-left: 0;               /* 行頭を揃える */
  }
  .newsBox .newsItem { margin-left: 0; }
  .newsBox .ico {
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
  }
  .newsBox .ico.down { bottom: 0.5rem; }
}

/*------------------------------------------------------------
	scroll
------------------------------------------------------------*/
.scroll {
	font-size: 1.6rem;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.scroll a {
	padding-left: 0.6rem;
	position: relative;
	color: #fff;
	display: block;
}
.scroll a::after {
	position: absolute;
	z-index: 10;
	top: 0.2rem;
	left: 0;
	width: 1px;
	height: 11.9rem;
	content: "";
	background-color: #fff;
}
.scroll a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.scroll {
		font-size: 1.2rem;
	}
	.scroll a {
		padding-left: 0.6rem;
	}
}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.comBtn {
	width: 15.9rem;
}
.message .comBtn {
	width: 20rem;
}

.comBtn a,
.comBtn .link {
	position: relative;
	font-weight: 700;
	display: block;
	font-family: "Raleway", sans-serif;
}
.comBtn a::after,
.comBtn .link::after {
	width: 3.5rem;
	height: 3.5rem;
	position: absolute;
	z-index: 1;
	top: -0.5rem;
	right: 0;
	content: "";
	background-color: #e8131f;
	border-radius: 50%;
	box-sizing: border-box;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comBtn a::before,
.comBtn .link::before {
	width: 1.5rem;
	height: 1.7rem;
	position: absolute;
	z-index: 2;
	top: 0.2rem;
	right: 0.8rem;
	content: "";
	background: url(../img/common/icon06.png) no-repeat left top / 100%;
}
.comBtn a span,
.comBtn .link span {
	border-bottom: 0.2rem solid transparent;
	transition: .3s;
}
.comBtn.green a::after,
.comBtn.green .link::after {
	background-color: #009944;
}
.comBtn.blue a::after,
.comBtn.blue .link::after {
	background-color: #0a81de;
}
.comBtn.purple a::after,
.comBtn.purple .link::after {
	background-color: #303776;
}
.comBtn.black a::after,
.comBtn.black .link::after {
	background-color: #000;
}
@media all and (min-width: 897px) {
	.comBtn a:hover span {
		border-bottom-color: #000;
	}
	.comBtn a:hover::after {
		transform: scale(1.6);
	}
}
@media all and (max-width: 896px) {
	.comBtn {
		margin: 0 1.2rem 0 auto;
		width: 12.5rem;
	}
	.message .comBtn {
		margin: 0 auto;
		width: 15rem;
	}
	.comBtn a,
  .comBtn .link {
		font-size: 1.3rem;
	}
	.comBtn a::after,
  .comBtn .link::after {
		top: -1rem !important;
	}
	.comBtn a::before,
  .comBtn .link::before {
		top: -0.3rem !important;
	}
}
/*------------------------------------------------------------
	comBtn-pattern-b
------------------------------------------------------------*/
.comBtn-pattern-b {
	/* width: 15.6rem; */
	width: 12.6rem;
}
.message .comBtn-pattern-b {
	padding: 0 0 15px 0;
}

.comBtn-pattern-b a,
.comBtn-pattern-b .link {
	position: relative;
	font-weight: 400;
	display: block;
	font-family: "Raleway", sans-serif;
	border-bottom: 0.25rem solid transparent;
  transition: border-color 0.3s ease, border-bottom-width 0.3s ease;
}
.comBtn-pattern-b a::after,
.comBtn-pattern-b .link::after {
	width: 3.5rem;
	height: 3.5rem;
	position: absolute;
	z-index: 1;
	top: -0.5rem;
	right: -5.4rem;
	content: "";
	background-color: #000;
	border-radius: 50%;
	box-sizing: border-box;
	transition: transform ease 0.3s;
	-webkit-transition: transform ease 0.3s;
}
.comBtn-pattern-b a::before,
.comBtn-pattern-b .link::before {
	width: 1.5rem;
	height: 1.7rem;
	position: absolute;
	z-index: 2;
	top: 0.2rem;
	right: -4.5rem;
	content: "";
	background: url(../img/common/icon06.png) no-repeat left top / 100%;
}

@media all and (min-width: 897px) {
.comBtn-pattern-b a:hover::after {
		transform: scale(1.6);
}
.comBtn-pattern-b a:hover {
	border-bottom-color:#000;
}
}
@media all and (max-width: 896px) {
	.comBtn-pattern-b {
		margin: 0 1.2rem 0 auto;
		width: 12.5rem;
	}
	.message .comBtn-pattern-b {
		margin: 0 auto;
		width: 13.5rem;
	}
	.comBtn-pattern-b a,
  .comBtn-pattern-b .link {
		font-size: 1.3rem;
	}
	.comBtn-pattern-b a::after,
  .comBtn-pattern-b .link::after {
		width: 3.24rem;
		height: 3.24rem;
		top: -1rem;
		right: 0;
	}
	.comBtn-pattern-b a::before,
  .comBtn-pattern-b .link::before {
		top: -0.4rem;
		right: 0.75rem;
	}
}
/*------------------------------------------------------------
	comFBox
------------------------------------------------------------*/
.comFBox {
  margin:9rem 0 0;
	padding: 5.5rem 0 3.2rem;
	border-top: 1px solid #d8d8d8;
	background-color: #fff;
}
.comFBox .fBox {
	margin-bottom: 11.5rem;
	align-items: flex-start;
}
.comFBox .fBox .lBox {
	width: 32rem;
}
.comFBox .fBox .lBox .logo {
	margin-bottom: 3.5rem;
	width: 20.7rem;
}
.comFBox .fBox .lBox .logo a {
	display: block;
}
.comFBox .fBox .lBox .ttl {
	margin-bottom: 1rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
}
.comFBox .fBox .lBox .add {
	font-size: 1.4rem;
	color: #666;
}
.comFBox .fBox .fNavi {
	margin-top: 1.7rem;
	flex: 1;
	display: flex;
	justify-content: right;
}
.comFBox .fBox .fNavi li:not(:first-child) {
	margin-left: 2rem;
}
.comFBox .fBox .fNavi a {
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
}
.comFBox .fBox .fNavi a:hover {
	opacity: 0.7;
}
.comFBox .fBox .fNavi .li01 {
	/* margin-left: 2rem !important; */
	margin-left: 2rem;
}
.comFBox .fBox .fNavi .li02 {
	margin-left: 5rem !important;
}
.comFBox .fBox .fNavi .li01 a {
	/* padding-right: 2.5rem; */
	color: #666;
	font-size: 1.5rem;
	font-weight: 600;
	font-family: "Noto Sans", sans-serif;
	/* background: url(../img/common/icon07.png) no-repeat right center / 1.3rem; */
}
.comFBox .comLinkList li:first-child {
	padding-left: 0;
}
@media all and (max-width: 1350px) {
	/* フッターのナビ強制処理 */
	.comFBox .fBox .fNavi li:not(:first-child) {
			margin-left: 1vw;
	}
	.comFBox .fBox .fNavi a {
    font-size: 1.4rem;
	}
}
@media all and (max-width: 896px) {
	.comFBox {
    margin-top:0;
		padding: 10.2rem 0 5.3rem;
		border-top: 1px solid #d8d8d8;
	}
	.comFBox .fBox {
		/* margin-bottom: 6.7rem; */
		margin-bottom: 4rem;
		display: block;
	}
	.comFBox .fBox .lBox {
		width: auto;
	}
	.comFBox .fBox .lBox .logo {
		margin-bottom: 3.8rem;
		width: 20.9rem;
	}
	.comFBox .fBox .lBox .ttl {
		margin-bottom: 1rem;
		font-size: 1.6rem;
		font-weight: 700;
		color: #222;
	}
	.comFBox .fBox .lBox .add {
		margin-bottom: 5.5rem;
	}
	.comFBox .fBox .fNavi {
		margin-top: -3rem;
		display: block;
	}
	.comFBox .fBox .fNavi li {
		margin: 3rem 0.5rem 0 !important;
	}

	.comFBox .fBox .fNavi a {
		font-size: 1.4rem;
	}

	.comFBox .fBox .fNavi .li01 {
		margin-right: 0.5rem !important;
	}
	.comFBox .fBox .fNavi .li02 {
		margin-left: 0 !important;
	}
	.comFBox .fBox .fNavi .li01 a {
		/* padding-right: 2.5rem; */
		font-size: 1.3rem;
		font-weight: 600;
		/* background: url(../img/common/icon07.png) no-repeat right center / 1.3rem; */
	}
	.comFBox .flexC {
		display: block;
	}
	.comFBox .comLinkList li {
		padding-left: 0;
		margin-top: 1.5rem;
	}
	.comFBox .comLinkList li:first-child {
		margin-top: 0;
	}
}
/*------------------------------------------------------------
	comLink
------------------------------------------------------------*/
.comLink {
	width: 17.3rem;
}
.comLink a {
	padding-bottom: 1.2rem;
	text-align: center;
	font-size: 2rem;
	display: block;
	border-bottom: 4px solid #000;
}
.comLink a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.comLink {
		margin-left: auto;
		width: 11.9rem;
	}
	.comLink a {
		font-size: 1.3rem;
		border-width: 0.2rem;
	}
}
/*------------------------------------------------------------
	popLink
------------------------------------------------------------*/
.comLink02 {
	padding: 0 1.7rem .5rem;
	font-weight: 500;
	letter-spacing: -0.05em;
	text-align: center;
	display: block;
	border-bottom: 0.4rem solid #000;
}
.comLink02:hover {
	opacity: 0.7;
}
.comLink02 span {
	padding-right: 4.3rem;
	background: url(../img/common/icon11.png) no-repeat right center / 2.9rem;
  display:inline-block;
  min-height:2.9rem;
  line-height:2.9;
}
@media all and (max-width: 896px) {
	.comLink02 {
		padding: 0 1.2rem .4rem 1.7rem;
		font-size: 1.3rem;
		border-width: 0.2rem;
	}
	.comLink02 span {
		padding-right: 3.7rem;
	}
}

/*------------------------------------------------------------
	タイトルのアニメーション
------------------------------------------------------------*/
.c-animated-title {
  display: inline-block;
  overflow: hidden;
	font-weight: 400;
}

.c-animated-title b {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* アニメーション適用時（JSで付与） */
.c-animated-title.active b {
  transform: translateY(0);
  opacity: 1;
}

/* 遅延を付ける */
.c-animated-title.active b:nth-child(1) { transition-delay: 0.1s; }
.c-animated-title.active b:nth-child(2) { transition-delay: 0.2s; }
.c-animated-title.active b:nth-child(3) { transition-delay: 0.3s; }
.c-animated-title.active b:nth-child(4) { transition-delay: 0.4s; }
.c-animated-title.active b:nth-child(5) { transition-delay: 0.5s; }
.c-animated-title.active b:nth-child(6) { transition-delay: 0.6s; }
.c-animated-title.active b:nth-child(7) { transition-delay: 0.7s; }
.c-animated-title.active b:nth-child(8) { transition-delay: 0.8s; }
.c-animated-title.active b:nth-child(9) { transition-delay: 0.9s; }
.c-animated-title.active b:nth-child(10) { transition-delay: 1.0s; }
.c-animated-title.active b:nth-child(11) { transition-delay: 1.1s; }
.c-animated-title.active b:nth-child(12) { transition-delay: 1.2s; }
.c-animated-title.active b:nth-child(13) { transition-delay: 1.3s; }
.c-animated-title.active b:nth-child(14) { transition-delay: 1.4s; }
.c-animated-title.active b:nth-child(15) { transition-delay: 1.5s; }
.c-animated-title.active b:nth-child(16) { transition-delay: 1.6s; }
.c-animated-title.active b:nth-child(17) { transition-delay: 1.7s; }
.c-animated-title.active b:nth-child(18) { transition-delay: 1.8s; }
.c-animated-title.active b:nth-child(19) { transition-delay: 1.9s; }
.c-animated-title.active b:nth-child(20) { transition-delay: 2.0s; }

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*------------------------------------------------------------
	brの処理
------------------------------------------------------------*/
.br-sm {
  display: none;
}
@media all and (max-width: 896px) {
  .br-sm {
    display: block;
  }
}

.br-sm-hide {
  display: block;
}
@media all and (max-width: 896px) {
  .br-sm-hide {
    display: none;
  }
}

/*------------------------------------------------------------
	フェードイン
------------------------------------------------------------*/

/*------------------------------------------------------------
  Reveal Fade-In（下からフワッと）
  - class="reveal" を付けた要素に適用
  - 下から：data-reveal="up"（既定60px）
  - 遅延：data-reveal-delay="0.2"（秒）
  - 連番スタッガー：親に data-reveal-stagger="0.1"
  - 何度も再生：data-reveal-once="false"（※挙動はJS側）
------------------------------------------------------------*/

/* 初期状態（共通） */
.reveal {
  --reveal-duration: 2.4s;
  --reveal-ease: cubic-bezier(0.25, 0.9, 0.4, 1);
  --reveal-delay: 0s;
  --reveal-ty: 60px;
  --reveal-tx: 0px;
  --reveal-scale: 1;

  opacity: 0;
  transform: translate3d(var(--reveal-tx), var(--reveal-ty), 0) scale(var(--reveal-scale));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* 可視化時（発火後の状態） */
.reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/*--------------------------------------
  方向指定（必要に応じて上書き）
---------------------------------------*/
[data-reveal="up"]    { --reveal-ty: 60px;  --reveal-tx: 0; }   /* 下→上（推奨） */
[data-reveal="down"]  { --reveal-ty: -24px; --reveal-tx: 0; }   /* 上→下 */
[data-reveal="left"]  { --reveal-ty: 0;     --reveal-tx: 24px; }/* 右→左 */
[data-reveal="right"] { --reveal-ty: 0;     --reveal-tx: -24px;}/* 左→右 */

/*--------------------------------------
  ズーム（任意で併用可能）
---------------------------------------*/
[data-reveal="zoom"] { --reveal-scale: .96; }
[data-reveal="zoom"].is-inview { --reveal-scale: 1; }

/*--------------------------------------
  スタッガー（親に付ける）
  例）<ul data-reveal-stagger="0.1"> … <li class="reveal">…</li>
  JSが各子要素の --reveal-delay を順番に設定します
---------------------------------------*/
[data-reveal-stagger] .reveal {
  transition-delay: var(--reveal-delay, 0s);
}

/*--------------------------------------
  個別ディレイ（要素に秒で指定）
  例）<div class="reveal" data-reveal-delay="0.3">
---------------------------------------*/
.reveal[data-reveal-delay] {
  transition-delay: calc(attr(data-reveal-delay number) * 1s);
}
/* ※上記はブラウザにより attr() の算術未対応のため、
   JS で --reveal-delay を設定する実装が確実（同梱JSで対応済） */

/*--------------------------------------
  可読性や視覚負荷への配慮
---------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-inview {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/*------------------------------------------------------------
	規約
------------------------------------------------------------*/
.footer-terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media all and (max-width: 896px) {
  .footer-terms {
    display: block;
		margin-bottom: 6.3rem;
  }

	.footer-terms li {
		font-size: 1.2rem;
		margin-bottom: 2rem;
		padding: 0 !important;
	}
}

.footer__flex-each {
	display: flex;
	flex-wrap: wrap;
}