/*
Theme Name: gx_251002
*/
/*

Noto Sans Regular	400
Noto Sans Semi Bold	500

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

html,body{
	font-family:YakuHanJP,'Noto Sans JP',YakuHanMP,'Noto Serif JP',sans-serif;
	font-weight:400;
	line-height:1.8em;
	box-sizing: border-box;
	font-feature-settings:"palt";
	margin:0;
	padding:0;
	position:relative;}

*	{margin:0;padding:0;list-style:none;box-sizing:border-box;text-align:justify;}

h1,h2,h3,h4
	{font-size: 1em;margin:0;padding:0;}

.t_mms	{font-size: 0.5em;line-height:1.2em !important;}
.t_ms	{font-size: 0.8em;}
.t_em	{font-size: 1.0em;}
.t_s	{font-size: 1.1em;}
.t_m	{font-size: 1.2em;}
.t_l	{font-size: 1.5em;}
.t_ll	{font-size: 1.625em;}
.t_xl	{font-size: 1.875em;}
.t_xxl	{font-size: 3.0em;line-height:1.0em !important;}

.txt_l	{font-weight: 200;}
.txt_r	{font-weight: 400;}
.txt_b	{font-weight: 600;}
.txt_eb	{font-weight: 800;}

.indent	{text-indent:-1em;padding-left:1em;}
.indent2{text-indent:-2em;padding-left:2em;}
.indent3{text-indent:-3em;padding-left:3em;}

.nl	{letter-spacing:0 !important;}

.t_left		{text-align:left;}
.t_right	{text-align:right;}
.t_center	{text-align:center;}

.t_gold		{color:#8f713c;}
.t_silver	{color:#9fa0a0;}
.t_red		{color:#e61911;}
.t_dred		{color:#c42a15;}
.t_blue		{color:#1d2088;}
.t_color	{color:#231815;}
.t_skyblue	{color:#00afec;}
.t_white	{color:#fff;}

.t_sh5		{text-shadow:0px 0px 5px #000;}
.t_sh10		{text-shadow:0px 0px 10px #000;}

.t_sans		{font-family:YakuHanJP,'Noto Sans JP',sans-serif;}
.t_serif	{font-family:YakuHanMP,'Noto Serif JP',serif;}

.ul		{display:inline-block;border-bottom:1px solid #000;}
.ulw		{display:inline-block;border-bottom:1px solid #fff;}

.vertical{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;}

a	{color:#00633d;text-decoration:none;}
a:hover	{color:#00633d;text-decoration:underline;}

a.other	{
	background-image:url(/wp-content/themes/img/icon_otherlink.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_w{
	background-image:url(/wp-content/themes/img/icon_otherlink_w.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_txt	{
	padding-right:18px;
	background-image:url(/wp-content/themes/img/icon_otherlink.png);
	background-position:right 0 top 50%;
	background-repeat:no-repeat;}

img	{vertical-align:bottom;}
img.w	{width: 100%;}

@media screen and (max-width:640px){
a	{text-decoration-skip: none;}
}

.cf:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.pc	{display:inline;}
.sp	{display:none;}

@media screen and (max-width:640px){
.pc	{display:none;}
.sp	{display:inline;}
}

#scrollImage {
	width: 110px;
	height: auto;
	position: fixed;
	bottom: -150px;
	right: 20px;
	opacity: 0;
	display: none;
	animation: float 3s ease-in-out infinite;}


@media screen and (max-width:640px){
#scrollImage {
	width: 80px;
	bottom: -150px;}
}

@keyframes float {
	0%	{transform: translateY(0);}
	50%	{transform: translateY(-20px);}
	100%	{transform: translateY(0);}
}


/* 汎用 */
.skip{
	position: absolute;
	margin-left:-9999px;}

section{
	margin:0;padding:0;}

video::-internal-media-controls {
	display: none;}

video::-webkit-media-controls {
	display: none !important;}

video::-webkit-media-controls-enclosure {
	display: none !important;}

video::-webkit-media-controls-panel {
	display: none !important;}

.tab-content .tab {
	display: none;
	}

.tab-content .tab.now {
	display: block;}

.inlink{
	padding-top:100px !important;
	margin-top:-100px !important;}


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none; /* フェード中でもクリック無効化 */
}

body.loaded #preloader {
  opacity: 0;
}



/* scroll fade */
/* 基本のフェードイン */
.fade-in,
.fade-in3{
	opacity: 0;
	transition: opacity 0.5s;}

.fade-in.active,
.fade-in3.active{
	opacity: 1;}

/* 左からフェードイン */
.fade-in-left{
	opacity: 0;
	transform: translateX(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left3{
	opacity: 0;
	transform: translateX(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left.active,
.fade-in-left3.active{
	opacity: 1;
	transform: translateX(0);}

/* 右からフェードイン */
.fade-in-right{
	opacity: 0;
	transform: translateX(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right3{
	opacity: 0;
	transform: translateX(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right.active,
.fade-in-right3.active{
	opacity: 1;
	transform: translateX(0);}

/* 上からフェードイン */
.fade-in-up{
	opacity: 0;
	transform: translateY(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up3{
	opacity: 0;
	transform: translateY(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up.active,
.fade-in-up3.active{
	opacity: 1;
	transform: translateY(0);}

/* 下からフェードイン */
.fade-in-down{
	opacity: 0;
	transform: translateY(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down3{
	opacity: 0;
	transform: translateY(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down.active,
.fade-in-down3.active{
	opacity: 1;
	transform: translateY(0);}

@media screen and (max-width:500px){
/* scroll fade */

/* 左からフェードイン */
.fade-in-left,
.fade-in-left3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 右からフェードイン */
.fade-in-right,
.fade-in-right3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 上からフェードイン */
.fade-in-up,
.fade-in-up3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 下からフェードイン */
.fade-in-down,
.fade-in-down3{
 	transition: opacity 1.0s, transform 0.5s;}
}

/* 並びのフェードイン */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-item.active {
  opacity: 1;
  transform: translateY(0);
}


/* ハンバーガー */
@media screen and (min-width:1157px){
.hamburger_area {
	display:none;}
}

.hamburger {
	position:fixed;
	top:0px;
	left:calc(100vw - 75px);
	display: block;
	height: 74px;
	margin-left: auto;
	z-index: 2000;
	width: 40px;
	border: none;
	background-color:rgba(0,0,0,0);
	cursor:pointer;}

.hamburger.-active .hamburger__line {
	background-color: transparent;}

.hamburger.-active .hamburger__line::before {
	top: 0;
	transform: rotate(45deg);
	background-color: #fff;}

.hamburger.-active .hamburger__line::after {
	top: 0;
	transform: rotate(-45deg);
	background-color: #fff;}

.hamburger.-active .hamburger__text::before {
	content: 'CLOSE';
	color: #fff;}

.hamburger__line {
	display: block;
	height: 1px;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	background-color: #00633d;
	transition: 0.4s;}

.hamburger__line:before,
.hamburger__line:after {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
	background-color: #00633d;
	transition: inherit;}

.hamburger__line:before {
	top: -6px;}

.hamburger__line:after {
	top: 6px;}

.hamburger__text {
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align:center;}

.hamburger__text::before {
	content: "MENU";
	text-align: center;
	color: #00633d;
	font-size: 0.8em;
	font-weight:200;}

.header {
	width: 300px;}

.header__nav-area {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000; /* 他の要素よりも前面に表示 */
	width: 100vw; /* ビューポートの幅に合わせる */
	height: 100vh; /* ビューポートの高さに合わせる */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s, transform 0.4s ease;
	transform: translateX(50px);
	background-color: rgba(0,0,0,0.93); /* 不透明な背景色 */
	z-index: 1900;}

.header__nav-area.-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s; /* アクティブ時は遅延なし */
	transform: translateX(0);
	overflow-y:auto;}

@media screen and (max-width:500px){
.hamburger {
	left:calc(100vw - 60px);}
}

.gloval-navigation_box{
	width:80%;
	margin:100px auto;
	box-sizing:border-box;}

.global-navigation_list{
	display:flex;
	flex-direction:column;}

.global-navigation_list li{
	width:100%;
	color:#fff;
	border-bottom:1px solid #fff;
	box-sizing:border-box;}

.global-navigation_list li a{
	font-family:'Noto Serif JP';
	display:block;
	padding:1em 0;
	color:#fff;}



/* header */
header{
	position:fixed;
	top:0;
	width:100%;
	height:100px;
	background-color:rgba(255,255,255,1);
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 50px;
	box-sizing:border-box;
	z-index:1000;}

header h1{
	width:290px;}

header h1 a{
	position:relative;
	display:block;}

header h1 img{
	position:relative;
	width:290px;
	height:60px;
	margin-right:40px;
	transition:0.5s;}

header h1 a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 50px;
    background-image: url('/wp-content/themes/img/header_logo_o.svg');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 11;}

header h1 a:hover::before{
	opacity:1;}

header nav{
	width:auto;}

header nav ul{
	display:flex;
	gap:0 1.5em;}

header nav li{
	font-size:0.8em;
	letter-spacing:0.2em;}

header nav li a{
	position:relative;}

header nav li a:hover{
	position:relative;
	text-decoration:none;}

header nav li a::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 0;
	width: 100%;
	height: 2px;
	background:#f49f00;
	transition: all .3s;
	transform: scale(0, 1);
	transform-origin: center top;}

header nav li a:hover::after {
	transform: scale(1, 1);}

@media screen and (max-width:1156px){
header nav.main{
	display:none;}
}

@media screen and (max-width:640px){
header{
	padding:0 25px;}
}


/* article basic */
article{
	width:100%;
	position:relative;}

@media screen and (max-width:1200px){
article{
	}
}



/* article fv */
article.fv {
	padding-top: 100px;
	position: relative;
	height: 800px;
/*	overflow: hidden;*/
	transition: background-color 1s ease;
	box-sizing:border-box;
}

.fv_back_bg {
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	height: 700px;
	overflow: hidden;
	z-index: 100;}

.fv_back_bg svg {
	height: 100% !important;
	width: auto !important;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) !important;}

section.fv_back {
	position: relative;
	z-index: 200;}



#lottie-animation {
	width: 350px;
	margin:0 auto;
	max-width: 100%;
	height: 700px;
	height: auto;}

/*
@media screen and (max-width:640px) {
#lottie-animation {
	width: 80vw;
	height: auto;}
}
*/



article.fv nav {
	position: absolute;
	left: 0;
	width: 100%;
	height: 120px;
	background-color: #00633d;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1s ease, transform 1s ease;
	z-index: 10;
	display:flex;
	justify-content:center;
	align-items:center;}

article.fv nav ul{
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;}

article.fv nav ul li{
	width:84px;
	height:85px;}

article.fv nav ul li.long{
	width:190px;
	height:85px;}

article.fv nav ul li a{
	display:flex;
	justify-content:center;
	align-items:center;}

article.fv nav ul li .btn-icon {
	width:auto;
	height:60px;
	fill: #ffffff;
	transition: fill 0.4s ease;
	cursor: pointer;}

article.fv nav ul li .btn-icon:hover {
	fill: #f49f00;}

article.fv nav ul li .btn-hokkaido {
	width:190px;
	height:85px;
	fill: #f49f00;
	transition: fill 0.4s ease;
	cursor: pointer;}

article.fv nav ul li .btn-hokkaido:hover {
	fill: #ffffff;}

@media screen and (max-width:1157px){
article.fv nav ul{
	width:90%;
	gap:5px;}

article.fv nav ul li,
a.cat-icon{
	width:6.5vw;
	height:6.5vw;}

article.fv nav ul li.long,
a.all-icon{
	width:18vw;
	height:6.5vw;}

/*
article.fv nav ul li{
	width:84px;
	height:auto;}

article.fv nav ul li.long{
	width:190px;
	height:auto;}
*/
article.fv nav ul li .btn-icon,
article.fv nav ul li .btn-hokkaido {
	width:100%;
	height:auto;}
}

@media screen and (max-width:640px){
article.fv nav {
	height:auto;
	transform: translateY(50px) !important;}

article.fv nav ul{
	width:90%;
	height:auto;
	padding:20px 0;}

article.fv nav ul li{
	width:10%;
	height:auto;}

article.fv nav ul li .btn-icon,
article.fv nav ul li .btn-hokkaido {
	width:100%;
	height:auto;}
}




/*北海道アイコン（初期は #f49f00 、hoverで白に） */
.all-icon{
	display:inline-block;
	width:190px;
	height:85px;
	background-color:#f49f00;
	-webkit-mask: no-repeat center / contain;
	        mask: no-repeat center / contain;
	transition: background-color .5s ease; /* ゆっくり */
	text-decoration:none;}

.all-icon:hover,
.all-icon:focus{
	background-color:#fff;}

/* 共通：マスクアイコン（初期は白、hoverで #f49f00 に） */
.cat-icon{
	display:inline-block;
	width:84px;          /* 必要なら調整可 */
	height:85px;         /* 以前の <img style="height:60px;"> を踏襲 */
	background-color:#fff;
	-webkit-mask: no-repeat center / contain;
	        mask: no-repeat center / contain;
	transition: background-color .5s ease; /* ゆっくり */
	text-decoration:none;}

.cat-icon:hover,
.cat-icon:focus{
	background-color:#f49f00;}

@media screen and (max-width:1157px){
/*
.all-icon{
	width:95px;
	height:42.5px;}

.cat-icon{
	width:42px;
	height:42.5px;}
*/
}

/* 各カテゴリのマスク画像（ファイル名に合わせて指定） */
.icon-all{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/00_all.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/00_all.svg");
}
.icon-co2_ccus{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/01_co2_ccus.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/01_co2_ccus.svg");
}
.icon-co2_free_proc{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/02_co2_free_proc.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/02_co2_free_proc.svg");
}
.icon-renewable{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/03_renewable.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/03_renewable.svg");
}
.icon-green_bio{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/04_green_bio.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/04_green_bio.svg");
}
.icon-infra_gx{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/05_infra_gx.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/05_infra_gx.svg");
}
.icon-smart_grid{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/06_smart_grid.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/06_smart_grid.svg");
}
.icon-informatics{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/07_informatics.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/07_informatics.svg");
}
.icon-battery{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/08_battery.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/08_battery.svg");
}
.icon-hydrogen{
  -webkit-mask-image: url("/wp-content/themes/gx_251002/img/09_hydrogen.svg");
          mask-image: url("/wp-content/themes/gx_251002/img/09_hydrogen.svg");
}




.fv_back .fv_main{
	position:absolute;
	top:100px;
	left:100px;
	font-size:2em;
	line-height:1.5em;
	letter-spacing:0.1em;
	color:#fff;
	opacity: 0;
	transition: opacity 1s ease;}

.fv_back .fv_sub{
	position:absolute;
	top:273px;
	left:calc(50% + 200px);
	font-size:2em;
	line-height:1.2em;
	letter-spacing:0.1em;
	color:#fff;
	opacity: 0;
	transition: opacity 1s ease;}

.fv_main.show,
.fv_sub.show {
	opacity: 1;}

.fv_sub #years{
	position:relative;
	font-size:2.8rem !important;
	font-weight:500;
	margin-bottom:0.25em;
	z-index:1;}

.fv_sub #years::after{
	content: '';
	position: absolute;
	bottom: -9px;
	left: 0;
	width: 100%;
	height: 3px;
	background:#f49f00;
	transition: all .3s;
	transform: scale(1, 1);
	transform-origin: center top;
	z-index:0;}

.fv_sub .from{
	font-size:1.07rem !important;
	font-weight:500;
	margin-bottom:1em;}

.fv_sub #days{
	font-size:1.9rem !important;
	font-weight:500;}

.fv_sub #seconds{
	font-size:1.13rem !important;
	font-weight:500;}


@media screen and (max-width:800px){
article.fv {
	margin-top: -50px;
	padding-top: 50px;}

.fv_back_bg {
	top: 50px;}

.fv_back .fv_main{
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translateX(-50%) !important;
	text-align:center;
	white-space:nowrap;
	font-size:1.5rem}

.fv_back .fv_sub{
	position: absolute;
	top:auto;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) !important;
	text-align:center;
	white-space:nowrap;}

.fv_sub #years{
	font-size:1.5rem !important;}

.fv_sub .from{
	font-size:0.8rem !important;
	margin-bottom:0.5em;}

.fv_sub #days{
	font-size:1.4rem !important;}

.fv_sub #seconds{
	font-size:0.75rem !important;
	line-height:1em;}
}

.fv_back span{
	position:relative;}

.fv_back .border::after{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 3px;
	background:#f49f00;
	transition: all .3s;
	transform: scale(1, 1);
	transform-origin: center top;}




article#news{
    width: 1100px;
    margin: 0 auto;}

@media screen and (max-width:1157px){
article#news{
	width:calc(100% - 40px);
	margin:0 auto;}
}

article#news h3 {
    font-size: 1.6em;
    line-height: 1.8em;
    font-weight: 400;
    color: #00633d;
    margin-bottom: 30px;
	padding-bottom: 15px;
	text-align:center;
	border-bottom:1px solid #f4a000;}

article#news .card{
	width:100%;
	display: flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin-bottom:40px;}

article#news .card li {
	position: relative;
	width: 22%;
	margin-right:4%;
	margin-bottom:4%;
	background: #fff;
	transition: 0.5s;
	border:1px solid #00633d;
	border-radius:10px;
	z-index:2;}

article#news .card li:nth-child(4n) {
	margin-right:0;}

@media screen and (max-width:800px){
article#news .card li {
	position: relative;
	width: 30%;
	margin-right:5%;
	margin-bottom:4%;}

article#news .card li:nth-child(4n) {
	margin-right:5%;}

article#news .card li:nth-child(3n) {
	margin-right:0;}
}

@media screen and (max-width:640px){
article#news .card li {
	position: relative;
	width: 48%;
	margin-right:4%;
	margin-bottom:4%;}

article#news .card li:nth-child(3n) {
	margin-right:4%;}

article#news .card li:nth-child(2n) {
	margin-right:0;}
}

@media screen and (max-width:450px){
article#news .card li {
	position: relative;
	width: 100%;
	margin-right:0%;
	margin-bottom:4%;}
}

article#news .card li a {
	width: 100%;
	height: 100%;
	color:#000;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	text-decoration:none;}

article#news .card li a:hover,
article#news .card li a:focus {
	opacity:1;}

article#news .card li .top{
	margin:20px 20px 10px;}

article#news .card li img{
	width:100%;
	height:auto;
	margin-bottom:20px;}

article#news .card li .icon {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #00633d;
	border: 1px solid #00633d;
	padding: 5px 10px;
	margin-bottom: 10px;
	border-radius: 15px;}

article#news .card li .date{
	display:block;
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;}

article#news .card li .title{
	margin:10px 0 20px;
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;
	color: #00633d;}

article#news .card li a:hover .title {
	text-decoration:underline;}

article#news .btn {
	text-align:center;}

article#news .btn a{
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #fff;
	background-color:#00633d;
	padding: 10px 20px;
	border-radius: 10px;
	transition:0.5s;}

article#news .btn a:hover{
	background-color:#f49f00;}




article.internal{
    width: 1100px;
    margin: 0 auto;}

@media screen and (max-width:1157px){
article.internal{
	width:calc(100% - 40px);
	margin:0 auto;}
}

article.internal h3 {
    font-size: 1.6em;
    line-height: 1.8em;
    font-weight: 400;
    color: #00633d;
    margin-bottom: 30px;
	padding-bottom: 15px;
	text-align:center;
	border-bottom:1px solid #f4a000;}

article.internal .card{
	width:100%;
	display: flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin-bottom:40px;}

article.internal .card li {
	position: relative;
	width: 22%;
	margin-right:4%;
	margin-bottom:4%;
	background: #fff;
	transition: 0.5s;
	border:1px solid #00633d;
	border-radius:10px;
	z-index:2;}

article.internal .card li:nth-child(4n) {
	margin-right:0;}

@media screen and (max-width:800px){
article.internal .card li {
	position: relative;
	width: 30%;
	margin-right:5%;
	margin-bottom:4%;}

article.internal .card li:nth-child(4n) {
	margin-right:5%;}

article.internal .card li:nth-child(3n) {
	margin-right:0;}
}

@media screen and (max-width:640px){
article.internal .card li {
	position: relative;
	width: 48%;
	margin-right:4%;
	margin-bottom:4%;}

article.internal .card li:nth-child(3n) {
	margin-right:4%;}

article.internal .card li:nth-child(2n) {
	margin-right:0;}
}

@media screen and (max-width:450px){
article.internal .card li {
	position: relative;
	width: 100%;
	margin-right:0%;
	margin-bottom:4%;}
}

article.internal .card li a {
	width: 100%;
	height: 100%;
	color:#000;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	text-decoration:none;}

article.internal .card li a:hover,
article.internal .card li a:focus {
	opacity:1;}

article.internal .card li .top{
	margin:20px 20px 10px;}

article.internal .card li img{
	width:100%;
	height:auto;
	margin-bottom:20px;}

article.internal .card li .icon {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #00633d;
	border: 1px solid #00633d;
	padding: 5px 10px;
	margin-bottom: 10px;
	border-radius: 15px;}

article.internal .card li .date{
	display:block;
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;}

article.internal .card li .title{
	margin:10px 0 20px;
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;
	color: #00633d;}

article.internal .card li a:hover .title {
	text-decoration:underline;}

article.internal .btn {
	text-align:center;}

article.internal .btn a{
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #fff;
	background-color:#00633d;
	padding: 10px 20px;
	border-radius: 10px;
	transition:0.5s;}

article.internal .btn a:hover{
	background-color:#f49f00;}



article#greeting{
/*	margin-top:120px;*/
	padding:100px 0;}

article#greeting section{
	width:1100px;
	margin:0 auto;}

@media screen and (max-width:1157px){
article#greeting section{
	width:calc(100% - 40px);
	margin:0 auto;}
}

.greeting_header{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:50px !important;}

.greeting_header .photo{
	width:250px;}

.greeting_header .photo img{
	width:100%;}

.greeting_header .read{
	width:770px;}

@media screen and (max-width:1157px){
.greeting_header{
	align-items:flex-start;}

.greeting_header .read{
	width:calc(100% - 330px);}
}

@media screen and (max-width:800px){
.greeting_header{
	display:flex;
	flex-direction:column;
	margin-bottom:100px !important;}

.greeting_header .photo{
	width:300px;
	margin:0 auto 50px;}

.greeting_header .read{
	width:100%;}
}

.greeting_header .read h2{
	font-size:1.6em;
	line-height:1.8em;
	font-weight:400;
	color:#00633d;
	border-bottom:1px solid #f4a000;
	padding-bottom:0.8em;
	margin-bottom:0.8em;}

.greeting_header .read .title{
	font-size:1.2em;
	line-height:1.8em;
	margin-bottom:0.8em;}

.greeting_header .read .name{
	font-size:2.4em;
	line-height:1em;
	font-weight:200;}

.greeting_text{
	font-size:1.2em;
	line-height:2.0em;}



article#gaiyo{
    width: 1100px;
    margin: 0 auto;}

@media screen and (max-width:1157px){
article#gaiyo{
	width:calc(100% - 40px);
	margin:0 auto;}
}

article .icon_leaf{
	width:60px;
	height:120px;
	margin:0 auto 20px;}

article#gaiyo h3 {
    font-size: 1.6em;
    line-height: 1.8em;
    font-weight: 400;
    color: #00633d;
    margin-bottom: 30px;
	padding-bottom: 15px;
	text-align:center;
	border-bottom:1px solid #f4a000;}

/*
article#gaiyo h3:before{
	display:inline-block;
	content:url(/wp-content/themes/img/icon_leaf.svg);
	width:60px;
	height:120px;
	margin:0 auto;}
*/

article#gaiyo p {
	font-size:1.2em;
	line-height:2.0em;}

article#gaiyo .btn {
	text-align:center;}

article#gaiyo .btn a{
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #fff;
	background-color:#00633d;
	padding: 10px 20px;
	border-radius: 10px;
	transition:0.5s;}

article#gaiyo .btn a:hover{
	background-color:#f49f00;}



article#news{
	padding:150px 0 100px;}

article#news section{
	width:1100px;
	margin:0 auto;}

@media screen and (max-width:1157px){
article#news section{
	width:calc(100% - 40px);
	margin:0 auto;}
}

article.internal{
	padding:150px 0 0;}

article.internal.btm{
	padding:150px 0 100px;}

article.internal section{
	width:1100px;
	margin:0 auto;}

@media screen and (max-width:1157px){
article.internal section{
	width:calc(100% - 40px);
	margin:0 auto;}
}

.news_header{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:50px !important;}

.news_header .read{
	width:100%;}

@media screen and (max-width:1157px){
.news_header{
	align-items:flex-start;}
}

@media screen and (max-width:800px){
.news_header{
	display:flex;
	flex-direction:column;
	margin-bottom:100px !important;}

.news_header .photo{
	width:300px;
	margin:0 auto 50px;}

.news_header .read{
	width:100%;}
}

.news_header .read h2{
	font-size:1.6em;
	line-height:1.8em;
	font-weight:400;
	color:#00633d;
/*	border-top:1px solid #f4a000;*/
	border-bottom:1px solid #f4a000;
	padding:0 0 25px;
	margin-bottom:15px;}

.news_header .read .title{
	font-size:1.2em;
	line-height:1.8em;
	margin-bottom:0.8em;}

.news_text{
	font-size:1.2em;
	line-height:2.0em;}

.news_text .photo{
	width:100%;
	margin-bottom:1em;}

.news_text .photo img{
	width:100%;
	height:auto;}


:root	{ --header-h: 100px; }
#member	{ scroll-margin-top: var(--header-h); }

article#member{
    width: 1100px;
    margin: 0 auto;}

@media screen and (max-width:1157px){
article#member{
	width:calc(100% - 40px);
	margin:0 auto;}
}

article#member h3 {
    font-size: 1.6em;
    line-height: 1.8em;
    font-weight: 400;
    color: #00633d;
    margin-bottom: 30px;
	padding-bottom: 15px;
	text-align:center;
	border-bottom:1px solid #f4a000;}

article .icon_org{
	width:120px;
	height:86px;
	margin:40px auto 10px;}

article#member h3.org {
    font-size: 1.6em;
    line-height: 1.8em;
    font-weight: 400;
    color: #00633d;
    margin-bottom: 30px;
	padding-bottom: 0;
	text-align:center;
	border-bottom:none;}

article#member .card{
	width:100%;
	display: flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	gap:4%;
	margin-bottom:40px;}

article#member .card li {
	position: relative;
	width: 22%;
/*	margin-right:4%;*/
	margin-bottom:4%;
	background: #fff;
	transition: 0.5s;
	border:1px solid #00633d;
	border-radius:10px;
	z-index:2;}

article#member .card li:nth-child(4n) {
	margin-right:0;}

@media screen and (max-width:800px){
article#member .card li {
	position: relative;
	width: 30%;
	/*margin-right:5%;*/
	margin-bottom:4%;}

article#member .card li:nth-child(4n) {
	/*margin-right:5%;*/}

article#member .card li:nth-child(3n) {
	/*margin-right:0;*/}
}

@media screen and (max-width:640px){
article#member .card li {
	position: relative;
	width: 48%;
	/*margin-right:4%;*/
	margin-bottom:4%;}

article#member .card li:nth-child(3n) {
	/*margin-right:4%;*/}

article#member .card li:nth-child(2n) {
	/*margin-right:0;*/}
}

@media screen and (max-width:450px){
article#member .card li {
	position: relative;
	width: 100%;
	/*margin-right:0%;*/
	margin-bottom:4%;}
}

article#member .card li a {
	width: 100%;
	height: 100%;
	color:#000;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	text-decoration:none;}

article#member .card li a:hover,
article#member .card li a:focus {
	opacity:1;}

article#member .card li .top{
	margin:20px}

article#member .card li img{
	width:100%;
	margin-bottom:10px;}

article#member .card li .icon {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #00633d;
	border: 1px solid #00633d;
	padding: 5px 10px;
	margin-bottom: 10px;
	border-radius: 15px;}

article#member .card li .date{
	display:block;
	font-size:0.75em;
	font-weight:600;
	line-height:1.5em;}

article#member .card li .name{
	font-size:1.5em;
	font-weight:600;
	line-height:1.5em;
	margin-bottom:5px;}

article#member .card li .title{
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;
	padding-bottom:10px;
	border-bottom:1px solid #000;
	margin-bottom:10px;}

article#member .card li .keyword{
	font-size:0.8em;
	font-weight:600;
	line-height:1.5em;
	display:flex;
	flex-direction:column;
	margin-bottom:10px;}

article#member .card li .keyword span{
	text-align:left;
	padding-left:1em;
	text-indent:-1em;}

article#member .card li .keyword span.t_mms{
	padding-left:0;
	text-indent:0;}

article#member .card li .keyword span::before{
	content:'●';
	color:#f5a000;}

article#member .card li .keyword span.t_mms::before{
	content:'';}

article#member .card li .profile a{
	display: block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #fff;
	background-color:#00633d;
	padding: 10px 10px;
	border-radius: 10px;
	transition:0.5s;
	text-align:center;}

article#member .card li .profile a:hover{
	background-color:#f49f00;}

article#member .btn {
	text-align:center;}

article#member .btn a{
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1em;
	color: #fff;
	background-color:#00633d;
	padding: 10px 20px;
	border-radius: 10px;
	transition:0.5s;}

article#member .btn a:hover{
	background-color:#f49f00;}



footer{
	background-image:url(/wp-content/themes/gx_251002/img/fv_back_leaf_g.svg);
	background-color:rgba(29,143,89,1);
	background-position:center top;
	background-size:cover;}

footer p{
	font-size:0.9em;
	padding:3em 1em;
	text-align:center;
	color:#fff;}


/* =========================
   ▼ グロナビ：組織→サブ(戦略企画室)
   ========================= */
header nav li { position: relative; }

/* ▼ 親ラベルの小さな▼印（任意） */
header nav li.has-sub > a::after{
  content:"▼";
  font-size:1em;
/*  margin-left:.4em;*/
  transform: translateY(-1px);
  display:inline-block;
  pointer-events:none;
}

/* ▼ “見えない橋”で hover を維持（ここが肝） */
header nav li.has-sub{
  position: relative;
}
header nav li.has-sub::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:14px;              /* マウスが落ちない厚み */
  pointer-events:auto;      /* ← hoverを切らさないためにauto */
  background:transparent;
  z-index: 1199;
}

/* ▼ サブメニュー（初期：閉） */
header nav li.has-sub > ul.sub{
  position:absolute;
  top: calc(100% - 10px);   /* 親に10pxかぶせて隙間ゼロ */
  left:0;
  background:#fff;
  padding:0;       /* かぶせた分を内側余白で吸収 */
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:1200;

  /* ニュッと出し入れ（アニメ） */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(-8px); /* 出る時＝上→下にニュッ */
  max-height:0;
  /*overflow:hidden;*/

  transition:
    opacity .18s ease-out,
    transform .26s cubic-bezier(.2,.8,.2,1),
    max-height .35s ease,
    visibility 0s linear .26s; /* 閉じるときに遅延で非表示 */
  will-change: opacity, transform, max-height;


  display:flex;
  flex-direction:column;
}

/* ▼ 開く条件：親hover / フォーカス / サブ上hover */
header nav li.has-sub:hover > ul.sub,
header nav li.has-sub:focus-within > ul.sub,
header nav li.has-sub > ul.sub:hover{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);  /* 下がって着地 */
  max-height:480px;
  transition:
    opacity .18s ease-out,
    transform .26s cubic-bezier(.2,.8,.2,1),
    max-height .35s ease,
    visibility 0s;            /* 開く時は即 visible */
}

/* ▼ サブ内のリンク見た目 */
header nav li.has-sub > ul.sub li{ letter-spacing:0; }
header nav li.has-sub > ul.sub a{
  display:block;
  padding:10px 16px;
  white-space:nowrap;
  color:#00633d;
  font-size:0.8rem;
}
header nav li.has-sub > ul.sub a:hover,
header nav li.has-sub > ul.sub a:focus{
  background:#f4f7f5;
  text-decoration:none;
}
header nav li.has-sub > ul.sub li a::after{
	bottom:0;}

/* ▼ 低速端末配慮：アニメ軽減 */
@media (prefers-reduced-motion: reduce){
  header nav li.has-sub > ul.sub{ transition:none; transform:none; }
  header nav li.has-sub:hover > ul.sub,
  header nav li.has-sub:focus-within > ul.sub{ transition:none; }
}

/* ▼ モバイル（ハンバーガー）で入れ子を見せるなら（任意） */
@media screen and (max-width:1156px){
  .global-navigation_list li > ul.sub.sp-only{
    display:block; position:static; padding:0 0 0 2em;
    box-shadow:none; border:none;
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none; max-height:none; overflow:visible;border-bottom:none;
  }
.global-navigation_list li > ul.sub.sp-only li{
	border-top:1px solid #fff;
	border-bottom:none;
	font-size:1em;}
}


/* ====== グロナビ hover の安定化＆ふわっとアニメ ====== */

/* 親とサブの間の“橋”をもっと確実にキャッチする */
header nav li.has-sub::after {
  height: 18px;         /* ← 少し厚めに */
  pointer-events: auto;
  background: transparent;
  z-index: 1199;
}

/* サブメニューの位置とアニメーションを改良 */
header nav li.has-sub > ul.sub {
  top: calc(100% - 8px); /* 親に軽くかぶせる */
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(.16,.84,.44,1),
    max-height 0.4s ease,
    visibility 0s linear 0.35s; /* 閉じる時だけ遅延で非表示 */
}

/* “出る”アニメーション（上→下） */
header nav li.has-sub:hover > ul.sub,
header nav li.has-sub:focus-within > ul.sub,
header nav li.has-sub > ul.sub:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  max-height: 480px;
  pointer-events: auto;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(.16,.84,.44,1),
    max-height 0.4s ease,
    visibility 0s;
}

/* 開閉の見た目（ニュッ感強化） */
header nav li.has-sub > ul.sub {
  transform-origin: top center;
  transform: translateY(-10px) scaleY(0.96);
}
header nav li.has-sub:hover > ul.sub {
  transform: translateY(0) scaleY(1);
}