/* =====================================================================
コンテンツ共通
======================================================================== */
body{
	/* position: relative;
	width: 100%;
	height: 100vh; */
}

.inner {
	width: 100%;
	max-width: calc(1600px + var(--side) + var(--side));
	margin-inline: auto;
	padding-inline: var(--side);
	/* border: 1px solid blue; */
}

#sub_contents .inner {
	max-width: calc(940px + var(--side) + var(--side));
}

/* #sub_contents .inner .kwds{
	margin-bottom: var(--s5);
} */

/* .inner > *{
	border: 1px solid red;
} */

time{
	color: var(--c-gray99);
}

main{
	width: 100%;
	overflow: hidden;
}

.ac{text-align: center;}
.al{text-align: left;}
.ar{text-align: left;}

.mt_s1{margin-top: var(--s1);}
.mt_s2{margin-top: var(--s2);}
.mt_s3{margin-top: var(--s3);}

.bt_st1{
	text-align: center;
	margin-top: var(--s3);
}

.bt_st1 a{
	display: inline-block;
	background-color: var(--c-blue);
	color: #fff;
	padding: 1em 2.5em 1em 1.5em;
	border-radius: 100px;
	width: 450px;
	max-width: 100%;
	text-align: center;
	font-weight: bold;
	position: relative;
}

.bt_st1 a:hover{
	background-color: var(--c-lightBlue);
	color: #fff;
}

.bt_st1 a::after{
	font-family: lifestage;
	content:"\E858";
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	font-size: 1.5em;
}


/* ===================================================================================
header
====================================================================================== */


/* header
----------------------------------------------- */
#gl_header {
	background-color: rgba(255,255,255,.2);
	backdrop-filter: blur(10px); /* ブラー効果 */
	-webkit-backdrop-filter: blur(10px); /* Safari対応 */
	border-top: 5px solid var(--c-blue);
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 5000;
	line-height: 1.3;
	height: var(--header-h);
	z-index: 9999;
}

#b_ld #gl_header {
	border-color: var(--c-orange);
}

#b_hw #gl_header {
	border-color: var(--c-green);
}

#gl_header .headerInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 96%;
	margin-inline: auto;
}

#gl_header .headerInner > *{
	flex-grow: 2;
	height: 100%;
}

#gl_header a {
	display: block;
}

#gl_header .logoAria{
	display: grid;
	font-weight: bold;
	/* max-width: 55%; */
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

#gl_header .logoAria a.-ks{
	max-width: 25%;
}

#gl_header .logoAria a.-lss{
	max-width: 45%;
}


#gl_header .logoAria a.-ks img{
	max-height: var(--f42);
}

#gl_header .logoAria a.-lss img{
	max-height: var(--f22);
	margin-left: var(--s3);
}



#gl_header .logoAria a img:hover{
	opacity: .7;	
}

#gl_header .logoAria a{

}

#gl_header .logoAria {
	margin-bottom: 0;
}

#gl_header .headerMenu{
	max-width: 42%;
}

#gl_header .headerMenu nav{
	/* min-width: 45%; */
	height: 100%;
}

@media (max-width: 768px) {
	#gl_header .logoAria{
		max-width: 100%;
	}
	
	#gl_header .headerMenu{
		display: none;
	}
}


#gl_header .headerMenu ul{
	/* min-width: 50%; */
	display: grid;
	grid-template-columns: .5fr 1fr 1fr;
	gap: var(--s1);
	align-items: start;
	height: 100%;
}

#gl_header .headerMenu li{
	height: 90%;
}

#gl_header .headerMenu a{
	color: #fff;
	display: block;
	align-content: center;
	background-color: var(--c-blue);
	padding: .8em .5em;
	border-radius: 0 0 1em 1em;
	height: 100%;
	position: relative;
}

/* #gl_header .headerMenu a:hover{
	background-color: var(--c-lightOrange);
} */

#gl_header .headerMenu  li.-ld a{
	background-color: var(--c-orange);
}

#gl_header .headerMenu  li.-hw a{
	background-color: var(--c-green);
}

/* #gl_header .headerMenu li:nth-child(2) a:hover{
	background-color: var(--c-lightGreen);
} */

.isMenuOpen {
	overflow: hidden;
}

/*#gl_header .headerMenu {
	transition: height .3s ease, padding .3s ease;
	position: fixed;
	left: 0;
	top: 80px;
	z-index: 500;
	width: 100%;
	box-shadow: 0px 12px 10px 0 rgba(0, 0, 0, 0.05);
} */

.headerArrow {
  position: relative;
}

.headerArrow::before,
.headerArrow::after {
  content: "";
  position: absolute;
  top: calc(50% - .6em);
  left: -1.5em;
  width: .7em;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 1px) 50%;
  transform: rotate(-45deg);
}

.headerArrow::before {
  transform: rotate(45deg);
}



#gl_header .headerButton {
	display: grid;
	place-content: center;
	position: relative;
}

#gl_float {
	position: fixed;
	bottom: var(--s2);
	right: 2vw;
	z-index: 100;
}

.totop {
	width: 60px;
	height: 60px;
	display: grid;
	place-content: center;
	opacity: 0;
	background-color: var(--c-green);
	color: #fff;
	border-radius: 100px;
	line-height: 1;
	transition: .5s all ease 0s;
	border: 1px solid var(--c-green);
	font-family: "Inter", sans-serif;
	letter-spacing: 0;
	font-weight: 500;
}

.totop:hover{
	background-color: #fff;
	color: var(--c-green);
}

.totop::before{
	font-family: lifestage;
	content:"\e82a";
	transform: rotate(-90deg);
	margin-top: -10px;
	font-size: 1.3em;
	transition: 0.3s margin ease 0s;
}

.totop:hover::before{
	margin-top: -15px;
}

.totop.isShow {
	cursor: pointer;
	opacity: 1;
}







/* =====================================================================
s_main
======================================================================== */
#s_main{
	
}

#s_main .inner{
	padding-top: 13vh;
	padding-bottom: calc(13vh + var(--s5));
	position: relative;
	/* height: calc(50vh + var(--s5)); */
}

@media (max-width: 768px) {
	#s_main .inner{
		padding-top: var(--s10);
		/* padding-bottom: var(--s5); */
		min-height: 80vw;
	}
}

#s_main h2{
	color: #fff;
	font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem); /*24px-40px*/
}

@media (max-width: 480px) {
	#s_main .inner{
		padding-top: var(--s5);
		min-height: 90vw;
	}
	
}

#s_main figure{
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	max-width: 955px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* display: grid;
	align-content: end; */
}

#s_main figure img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;

  /* object-fit: contain; */
}

/* .jsSwiper1{display: none;} */

#boxMessage .logoAria{
	margin-top: var(--s4);
	width: calc(var(--f16) * 10);
}

.jsAnimeText {
	display: inline-block;
	/* display: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center; */
}

.jsAnimeText.isInview {
  --opacity: 1;
  --scale: 1;
}

.jsAnimeText span {
  display: inline-block;
  transform: scale(var(--scale, 0));
  opacity: var(--opacity, 0);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1), transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: calc(0.06s * var(--char-index));
}

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/**/

/* #boxMovie .innerArea{
	margin-top: var(--s8);
	text-align: center;
}

#boxMovie .innerArea iframe{
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 100%;
} */



/* ===================================================================================
s_slider
====================================================================================== */

:root {
	--swiper-pagination-color: var(--c-green);
--swiper-pagination-bullet-size: 13px;
--swiper-pagination-bullet-width: 13px;
--swiper-pagination-bullet-height: 13px;
--swiper-pagination-bullet-inactive-color: #000;

--swiper-pagination-bullet-inactive-opacity: 0.1;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
/* --swiper-pagination-bullet-border-radius: 0; */
}

#s_slider{
	position: relative;
	top: calc(0px - var(--s5));
	margin-bottom: calc(0px - var(--s5));
	padding-bottom: 0;
}

/*タブレット以上*/
@media (min-width: 600px) {
	#s_slider .swiper{
		cursor: pointer;
	}
}

/* #s_slider h2{
	margin-bottom: var(--s12);
}

#s_slider .swiper{
	overflow-y: auto;
}

#s_slider .swiper .swiper-slide-item {
	height: 100%;
} */


/* #s_slider .swiper .innerArea {
	height: auto;
} */


.swiper-pagination {
	position: static;
	padding: var(--s4) 15%;
	display: block;
	height: auto;
	overflow: visible;
}

.swiper-pagination-bullet{
	border-radius: 0;
	width: var(--s8);
	height: 6px;
}

.swiper-pagination-bullet-active{
	background-color: var(--c-blue);
}

#b_ld .swiper-pagination-bullet-active{
	background-color: var(--c-orange);
}

#b_hw .swiper-pagination-bullet-active{
	background-color: var(--c-green);
}

/*1つ単位*/
/* #s_slider .swiper-slide */
#s_slider .swiper-slide,
.article_cards .swiper-slide{
	height: auto;
	position: relative;
	background-color: #fff;
	border-radius: var(--s1);
	z-index: 0;
	/* aspect-ratio: 2000/1413; */
}

.jsSwiper2 .swiper-slide{
	background-color: #fff;
	position: relative;
}

.jsSwiper2 .swiper-slide img{
	border: 1px solid var(--c-orange);
}


.jsSwiper2 .swiper-slide::before {
  background: var(--c-orange);
  content: '';
  width: 100%;
  height: 7px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: center top;
  transform: scale(0, 1);
  z-index: 1000;
  transition: transform .3s;
}
.jsSwiper2 .swiper-slide:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}

#b_hw .jsSwiper2 .swiper-slide::before {
	background: var(--c-green);
}

#b_hw .jsSwiper2 .swiper-slide img{
	border: 1px solid var(--c-green);
}


/* article_cards
======================================================================================*/

.article_cards figure{
	border-top-right-radius: var(--s1);
	border-top-left-radius: var(--s1);
	position: relative;
	backface-visibility: hidden;
	z-index: -1;
}


/* .article_cards figure::before{
background: var(--c-orange);
  content: '';
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: center top;
  transform: scale(0, 1);
  z-index: 1000;
  transition: transform .3s;
}

#b_hw .article_cards figure::before{
	background: var(--c-green);
}

.article_cards :hover figure::before {
  transform-origin: center top;
  transform: scale(1, 1);
} */

.article_cards figure::after{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 10;
	transition: background-color 0.3s, transform 0.3s;
}

.article_cards :hover figure::after {
  background-color: rgba(0, 0, 0, 0.01);
} 

.article_cards figure img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	position: relative;
	z-index: 0;
}

.article_cards ._content{
	padding: var(--s2);
	padding-top: var(--s3);
	position: relative;
	background-color: #fff;
	border-bottom-right-radius: var(--s1);
	border-bottom-left-radius: var(--s1);
	z-index: 10;
	backface-visibility: hidden;
}

.article_cards time{
	display: inline-block;
	margin-top: .5em;
}

.tags {
	display: flex;
	gap: 5px;
}

.article_cards .tags {
	position: absolute;
	top: -1em;
	left: var(--s2);
	display: flex;
	backface-visibility: hidden;
	z-index: 10;
}
	
.article_cards ._text{
	font-size: var(--f18);
}


._tag{
	display: block;
	border: 1px solid var(--c-green);
	padding-inline: .5em	
}

._tag.-main{
	background-color: var(--c-green);
	color: #fff;
}

._tag.-sub{
	background-color: #fff;
	color: var(--c-green);
}

._tag.-main.-ld{
	background-color: var(--c-orange);
}

._tag.-ld{
	border: 1px solid var(--c-orange);
}

._tag.-sub.-ld{
	color: var(--c-orange);
}

/* #s_slider .swiper-slide .logoAria{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	transform: translateY(-50%);
	transform: translate(-50%, -50%);
	width: 100%;
} */

.pagenation{
	text-align: center;
	padding: 0 var(--side) var(--s10);
}

.pagenation ul{
	display: flex;
	justify-content: center;
	gap: 5px;
}

.pagenation li > *{
	display: inline-block;
	padding: 1em;
	height: 100%;
	position: relative;
}

.pagenation li > a{
	background-color: #fff;
	color: var(--c-blue);
}

#b_ld .pagenation li > a{
	color: var(--c-orange);
}
	
#b_hw .pagenation li > a{
	color: var(--c-green);
}

.pagenation li > a:hover{
	background-color: var(--c-cream);
}

.pagenation li > .current{
	color: #fff;
	background-color: var(--c-blue);
}

#b_ld .pagenation li > .current{
	background-color: var(--c-orange);
}

#b_hw .pagenation li > .current{
	background-color: var(--c-green);
}

.pagenation li > .prev,
.pagenation li > .next{
	width: 3em;
	line-height: 1;
}

.pagenation li > .prev::after,
.pagenation li > .next::after{
	font-family: lifestage;
	content: "\E82A";
	font-size: 4em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pagenation li > .prev::after{
	transform: translate(-50%, -50%) scaleX(-1); 
	transform-origin: center center;
}

#b_ld .pagenation li > .prev::after,
#b_ld .pagenation li > .next::after{
	color: var(--c-orange);
}

#b_hw .pagenation li > .prev::after,
#b_hw .pagenation li > .next::after{
	color: var(--c-green);
}


/* =====================================================================
s_about
======================================================================== */
.areaPaleOrange{
	background-color: var(--c-paleOrange);
	position: relative;
}

#s_about{
	padding-top: var(--s10);
}

#s_about ._inner{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
}

#s_about ._inner > section{
	margin-top: var(--s13);
	color: #fff;
	padding: 0 var(--s8) var(--s5);
}

@media (max-width: 599px) {
	
	#s_about ._inner{
		display: block;
	}
	
	#s_about ._inner > section{
		padding-inline: var(--s3);
	}
	
	#s_about .bt_st1 a{
		width: 100%;
	}
}

#s_about ._lead{
	font-size: var(--f20);
	font-weight: bold;
	margin-bottom: 0.5em;
}

#s_about ._inner > section.-ld{
	background-color: var(--c-orange);
	border-top-right-radius: 30px;
	margin-right: var(--s3);
}

#s_about ._inner > section.-hw{
	background-color: var(--c-green);
	border-top-left-radius: 30px;
	margin-left: var(--s3);
}

#s_about ._inner > section figure{
	position: relative;
	text-align: center;
}

#s_about ._inner > section figure{
	position: relative;
	margin-top: calc(0px - var(--s10));
	max-width: 337px;
	width: 80%;
	margin-inline: auto;
}

/* @media (max-width: 599px) {
	#s_about ._inner > section figure{
		max-width: 150px;
	}
	
} */

#s_about ._inner > section.-hw figure{
	max-width: 310px;	
}

#s_about ._inner > section h3{
	padding-top: 1em;
	text-align: center;
}

#s_about ._inner > section {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
}

#s_about ._inner > section .bt_st1 a{
	background-color: #fff;
}

#s_about ._inner > section.-ld .bt_st1 a{
	color: var(--c-orange);
}

#s_about ._inner > section.-ld .bt_st1 a:hover{
	background-color: var(--c-paleOrange);
}

#s_about ._inner > section.-hw .bt_st1 a{
	color: var(--c-green);
}

#s_about ._inner > section.-hw .bt_st1 a:hover{
	background-color: var(--c-paleGreen);
}

/* =====================================================================
s_kwd
======================================================================== */
#s_kwd{
	padding-top: var(--s10);	
}

#s_kwd .arrowLink{
	position: absolute;
	top: var(--s4);
	right: var(--s4);
}

.boxKwd{
	border: 2px solid var(--c-grayDD);
	border-radius: var(--s2);
	padding: var(--s4);	
	background-color: #fff;
	position: relative;
}

.boxKwd h3{
	font-size: var(--f24);
	margin-bottom: 0.5em;
}

.kwds{
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

.kwds a{
	font-size: var(--f18);
	display: inline-block;
	padding: .4em .8em;
	color: var(--c-blue);
	border: 1px solid  var(--c-blue);
	border-radius: 100px;
}
.kwds a:hover{
	background-color: var(--c-paleBlue);
}

.kwds a::before{
	content: "#";
	margin-right: 3px;	
}

.boxKwd .arrowLink{
	margin-top: 0.5em;
	text-align: right;
	font-size: var(--18);
}

.boxKwd .arrowLink a{
	color: var(--c-blue);	
	text-align: right;
}



#sub_side .boxKwd h3{
	font-size: var(--f22);
	color: var(--c-blue);
	margin-bottom: .5em;
}


#sub_side .boxKwd{
	padding: var(--s2);	
}

.column_header .kwds,
#sub_side .kwds{
	gap: var(--s1);
}

.column_header .kwds a,
#sub_side .kwds a{
	font-size: var(--f14);
}





/* =====================================================================
s_news
======================================================================== */
#s_news{
	padding-block: var(--s10);
}

#b_news #s_news{
	padding-top: 0;
}

#s_news ._inner{
	display: grid;
	grid-template-columns: 10em auto;
	padding-bottom: var(--s6);
}

#s_news ul li>*{
	padding-block: 1em;
	display: grid;
	grid-template-columns: 6em auto;
	border-bottom: 1px solid var(--c-grayCC);
}

#s_news ul li>a div{
	text-decoration: underline;
	text-underline-offset: 3px;
}

#s_news ul li a:hover div{
	color: var(--c-blue);
}

@media (max-width: 599px) {
	#s_news ._inner{
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
sub_header
======================================================================== */
#sub_header{
	padding-top: var(--s10);
	padding-bottom: var(--s10);
}

.bread ul{
	display: flex;
	flex-wrap: wrap;
}

.bread ul li + li{
	margin-left: 1em;	
}

.bread ul li + li::before{
	content: ">";
	margin-right: 1em;	
}

#sub_header ._inner{
	padding-top: var(--s3);
	display: grid;
	grid-template-columns: auto minmax(200px, 20vw);
	align-items: center;
	gap: var(--s10);
	font-size: var(--f18);
}

#sub_header ._inner.-grid1{
	grid-template-columns: 1fr;
}

#sub_header figure{
	text-align: right;
}

@media (max-width: 599px) {
	#sub_header ._inner{
		grid-template-columns: 1fr;
	}
	
	#sub_header figure{
		text-align: center;
	}
	
	#sub_header figure img{
		max-width: 50%;
	}
}


#sub_header h1{
	margin-bottom: 0.5em;
	font-size: var(--f40);
	line-height: 1.5;
}

/* =====================================================================
#sub_contents
======================================================================== */

#sub_contents{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 23vw);
}

#sub_contents.-grid1{
	display: block;
	padding-bottom: var(--s10);
}


div#sub_contents{
	background: var(--c-paleOrange);
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 50px, var(--c-paleOrange) 50px);
}

#b_news div#sub_contents{
	display: block;
	background: transparent;
}

#sub_contents.-columm{
	background: none;
}

@media (max-width: 768px) {
	#sub_contents{
		display: block;
		/* grid-template-columns: 1fr; */
	}	
}

/* =====================================================================
sub_center
======================================================================== */
#sub_center{
	width: 100%;
}

#s_sliderSub + .article_cards{
	padding-block: var(--s10);
}

#sub_center .article_cards{
	padding-bottom: var(--s10);
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s4);
	margin-inline: auto;
}

#sub_center .article_cards.-grid3{
	width: 100%;
	max-width: calc(1600px + var(--side) + var(--side));
	margin-inline: auto;
	padding-inline: var(--side);
	grid-template-columns: repeat(var(--3-1), 1fr);
}

#s_sliderSub{
	margin-inline: auto;
	padding-inline: var(--side);
	overflow: hidden;
	width: 100%; /* ←これを追加！ */
}

#s_sliderSub .swiper{
	width: 100%; /* 親の幅に合わせる */
	max-width: 870px;
	margin: 0 auto;
}

#s_sliderSub .swiper-slide{
	position: relative;
	width: 100%;
	height: 100%
	/* aspect-ratio: 2000/1413; */
}


/* =====================================================================
sub_side
======================================================================== */

#sub_side{
	margin-bottom: var(--s10);
}

#sub_side>._inner{
	padding: var(--s3);
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--s3)
}

@media (max-width: 768px) {
	#sub_side>._inner{
		padding: var(--s5);
	}	
}

.side_menu{
	color: #fff;
	padding: var(--s3);
	padding-right: 0;
	font-weight: bold;
	border-top-left-radius: var(--s3);
	border-bottom-left-radius: var(--s3);
	background-color: var(--c-blue);
}

@media (max-width: 768px) {
	
	#sub_side{
		margin-top: var(--s10);
	}
	
	.side_menu{
		margin-left: var(--s5);	
	}
}

.side_menu li > *{
	color: #fff;
	display: block;
	padding: .7em 1.5em;
	position: relative;
}

.side_menu h3{
	margin-bottom: 0;
}

.side_menu h3 a{
	color: #fff;
	padding: .4em .5em;
	display: block;
}

/* .side_menu h3 a:hover {
  color: #fff;
} */

#gl_header .headerMenu a::after,
.side_menu a::after, .sideBnr::after{
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: 0;
}

#gl_header .headerMenu a:hover::after,
.side_menu a:hover::after, .sideBnr:hover::after{
  transform: scale(1, 1);
  transform-origin: center top;
}

/* .side_menu a:hover{
	background-color: var(--c-lightBlue);
}

#b_ld .side_menu a:hover{
	background-color: var(--c-lightOrange);
}


#b_hw .side_menu a:hover{
	background-color: var(--c-lightGreen);
} */


.side_menu li{
	border-top: 1px solid rgba(255, 255, 255, 0.4);	
}

#b_news .side_menu span time,
#b_news .side_menu a:not(.-active) time{
	color: #fff;	
}



.side_menu a.-active{
	background-color: #fff;
	color:  var(--c-blue);
}

#b_ld .side_menu a.-active{
	color:  var(--c-orange);
}

#b_hw .side_menu a.-active{
	color:  var(--c-green);
}

#b_ld .side_menu{
	background-color: var(--c-orange);
}

#b_hw .side_menu{
	background-color: var(--c-green);
}

.sideBnr{
	display: block;
	background-color: #fff;
	position: relative;
}

/* .sideBnr:hover img{
	opacity: .7;
} */

.boxPickup h3{
	color: var(--c-orange);
}

#b_hw .boxPickup h3{
	color: var(--c-green);
}

.boxPickup >._inner{
	background-color: #fff;
	padding: var(--s2);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s2);
	border: 1px solid var(--c-orange);
}

#b_hw .boxPickup >._inner{
	border: 1px solid var(--c-green);
}

@media (max-width: 768px) {
	.boxPickup >._inner{
		padding: var(--s4);
		gap: var(--s4);
	}	
}


.boxPickup a{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--s2);
}

.boxPickup img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.boxPickup figure{
	position: relative;
}

.boxPickup figure::after {
	content: "";
	position: absolute;
	aspect-ratio: 1 / 1;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 10;
	transition: background-color 0.3s, transform 0.3s;
}

.boxPickup a:hover figure::after {
  background-color: rgba(0, 0, 0, 0.03);
} 

/* =====================================================================
Column
======================================================================== */
.b_column #sub_header{
	padding-block: var(--s8);
}

.column_header .kwds{
	margin-top: var(--s3);
}

.column_header time{
	display: inline-block;
	margin-top: 1em;
}

.column_header h1{
	margin-top:.25em;
	font-size: var(--f40);
	line-height: 1.4;
}

.column_header p{
	font-weight: bold;
	font-size: var(--f18);
}





/* =====================================================================
gl_footer
======================================================================== */


#gl_footer{
	border-top: 1px solid var(--c-grayCC);
	padding: var(--s4) var(--side);
	display: flex;
	justify-content: space-between;
}

#gl_footer ul{
	display: flex;
	gap: 2em;
}


@media (max-width: 768px) {
	#gl_footer{
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
	}
	#gl_footer ul{
		justify-content: center;
	}
}

.sp_menu{
	display: none;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	padding: 20px;
	padding-top: calc(var(--header-h) + 20px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
}

.menuBtn {
	display: none; 
	position: fixed;
	top:9px;
	right: 2%;
	border-radius: 5px;
	width: 50px;
	height: 50px;
	border: 1px solid #fff;
	background-color: #666;
	cursor: pointer;
	outline: none;
	z-index: 10000;
}

@media (max-width: 768px) {	
	.is-menuOpen .sp_menu {
		display: block;
		
	}
	
	.sp_menu a{
		position: relative;
	}
	
	.sp_menu>ul{
		overflow-y: scroll;
		height: calc(100vh - var(--header-h) - 40px);
	}
	
	.sp_menu>ul>li + li{
		margin-top: 10px;
	}
	
	.sp_menu>ul>li>ul {display: none;}
	#b_ld .sp_menu>ul>li.-lifedesign>ul {display: block;}
	#b_hw .sp_menu>ul>li.-housework>ul {display: block;}
	#b_news .sp_menu>ul>li.-news>ul {display: block;}
	
	.sp_menu li._cate {
		border-radius: 10px;
		border: 2px solid var(--c-blue);
		overflow: hidden;
	}
	
	.sp_menu li._cate a{
		display: block;
		padding: .7em;
	}
	
	.sp_menu li._cate ._menu li > *{
		display: block;
		padding: .7em;
		display: block;
		color:#fff;
		font-size: 16px;
		font-weight: bold;
		padding-left: 2.5em;
		position: relative;
		background-color:var(--c-blue);
	}
	
	.sp_menu li._cate.-lifedesign{
		border-color: var(--c-orange);
	}
	
	.sp_menu li._cate.-housework{
		border-color: var(--c-green);
	}
	
	.sp_menu li._cate>a{
		font-size: 20px;
		padding-left: 1.5em;
		background-color: var(--c-blue);
		color: #fff;	
		font-weight: bold;
	}
	
	.sp_menu li._cate.-lifedesign>a{
		background-color:var(--c-orange);
	}
	
	.sp_menu li._cate.-housework>a{
		background-color:var(--c-green);
	}
	
	.sp_menu li._cate.-lifedesign ._menu a{
		background-color:var(--c-orange);
	}
	
	.sp_menu li._cate.-housework ._menu a{
		background-color:var(--c-green);
	}
	
	.sp_menu li._cate a.-active{
		color:var(--c-blue);
		background-color: #fff!important;	
	}
	
	.sp_menu a:not(.-active) time,
	.sp_menu span:not(.-active) time{
		color: #fff;	
	}
	
	
	
	.sp_menu li._cate a.-active::before{
		font-family: lifestage;
		content:"\E829";
		position: absolute;
		top: 50%;
		left: 5px;
		transform: translateY(-50%);	
	}
	
	.sp_menu li._cate ._menu >*.-active::before{
		left: 15px;
	}
	
	.sp_menu .textLink{
		padding: 10px;
	}
	
	.sp_menu .textLink a{
		display: inline-block;
		padding-block: 10px;
	}
	
	.sp_menu li._cate.-lifedesign a.-active{
		color:var(--c-orange);
	}
	
	.sp_menu li._cate.-housework a.-active{
		color:var(--c-green);
	}
	
	.sp_menu ul._menu>li{
		background-color: var(--c-blue);
	}
	
	.sp_menu li._cate.-lifedesign ul._bnr{
		border-top: 1px solid var(--c-orange);
	}
	
	.sp_menu li._cate.-housework ul._bnr{
		border-top: 1px solid var(--c-green);
	}
	
	.sp_menu ul._bnr a{
		background-color: #fff;
		padding: 20px;
	}
	
	.sp_menu ul._bnr li + li a{
		padding-top: 0;
	}
	
	.sp_menu .-lifedesign ul._menu>li{
		background-color: var(--c-orange);
	}
	
	.sp_menu li.-housework ul._menu>li{
		background-color: var(--c-green);
	}
	
	.sp_menu>ul._menu>li>ul>li>a{
		padding-left: 2.5em;
	}
	
	.sp_menu>ul>li>ul>li:not(:last-child)>a{
		border-bottom: 1px solid #fff;
	}
	
	.sp_menu>ul>li>ul>li:first-child>a{
		border-top: 1px solid #fff;
	}

	.menuBtn {
		display: block;
	}
}


.menuBtn::after {
  font-weight: bold;
  font-size: 10px;
  content: 'MENU';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  color:#000;
}

.menuBtn i {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background-color: #fff;
  border-radius: 100px;
  transition: 0.4s;
  transition-property: top, left, transform, opacity;
}

.menuBtn i:nth-of-type(2) {
  top: calc(40% + 20%);
}

.is-menuOpen{
	overflow: hidden;
}

.is-menuOpen .menuBtn i:nth-of-type(1) {
  top: calc(50%);
  transform: translate(-50%, -50%) rotate(45deg);
}

.is-menuOpen .menuBtn i:nth-of-type(2) {
  top: calc(50%);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menuBtn span {
  position: absolute;
  bottom: 10%;
  left: 0;
  color: var(--c-red);
  font-size: 10px;
  text-align: center;
  display: block;
  width: 100%;
}

.icon-round-tri {
  color: var(--c-red);
  transform-origin: center center;
  transform: rotate(-90deg);
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
}

/* ===================================================================================
ANIMATION
====================================================================================== */

/* 上に向かってフェードイン */
.jsFadeUp {
	opacity: 0;
	transform: translateY(200px);
	transition: 0.5s all ease 0.5s;
}

.jsFadeUp.delay1 {
	transition-delay: 0.3s;
}

.jsFadeUp.delay2 {
	transition-delay: 0.6s;
}

.jsFadeUp.delay3 {
	transition-delay: 0.9s;
}

.jsFadeUp.delay4 {
	transition-delay: 1.2s;
}

.jsFadeUp.delay5 {
	transition-delay: 1.5s;
}

.jsFadeUp.isInview {
	opacity: 1;
	transform: translateY(0);
}

/* 右からフェードイン */
.jsFadeFR {
	opacity: 0;
	transform: translateX(100px);
	transition: 0.5s all ease 0.5s;
}

.jsFadeFR.isInview {
	opacity: 1;
	transform: translateX(0);
}

/* 左からフェードイン */
.jsFadeFL {
	opacity: 0;
	transform: translateX(-100px);
	transition: 0.5s all ease 0.5s;
}

.jsFadeFL.isInview {
	opacity: 1;
	transform: translateX(0);
}

/* シンプルなフェードイン */
.jsFadeIn {
	opacity: 0;
	transition: 1s all ease 0.5s;
}

.jsFadeIn.isInview {
	opacity: 1;
}

/*ズームイン*/
.jsZoom {
	transform: scale(7);
	opacity: 0;
}

.jsZoom.isActive {
	animation-name: zoomInAnime;
	animation-delay: .5s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
	to {
		transform: scale(1);
		opacity: 1;
	}
}



.jsMoveLine{
  background-image: linear-gradient(to top, var(--c-blue) 1.3em, transparent 1.3em);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 100%;
}

.jsMoveLine.isInview{
	animation-name: kf_moveLine;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

@keyframes kf_moveLine {
  0%{
	background-size: 0% 100%;
  }
  100%{
	background-size: 100% 100%;
  }
}

.jsMoveLine2{
  background-image: linear-gradient(to top, var(--c-green) 2px, transparent 2px);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 100%;
}

.jsMoveLine2.isInview{
	animation-name: kf_moveLine;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}


.jsShutter{
	position: relative;
	/* width: 1000px;
	height: 500px; */
	overflow: hidden;
}

.jsShutter::before,
.jsShutter::after{
	content: "";
	position: absolute;
	width: 150%;
	height: 400%;
    top: 50%;
	
    transform: translateY(-50%) rotate(0);
	background-color: var(--c-green);
}

.jsShutter::before{
	transform-origin: left;
	left: -50%;
}

.jsShutter::after{
	transform-origin: right;
	right: -50%;
}

.jsShutter.isInview::before,
.jsShutter.isInview::after{
	animation: moveAndFade 1s forwards .5s;
}

/* アニメーションの定義 */
  @keyframes moveAndFade {
	/* 0% {
	  width: 150%;
	} */
	100% {
	  width: 0;
	  transform: translateY(-50%) rotate(45deg);
	}
  }