/*
Theme Name:   Twenty Twenty-Four Child
Theme URI:    https://example.com/twentyfour-child/
Description:  Child theme for the Twenty Twenty-Four theme
Author:       Your Name
Author URI:   https://example.com
Template:     twentytwentyfour
Version:      1.0.0


/* ----------------------------------------------------------------------------------
   Basic setting:
------------------------------------------------------------------------------------- */

/* reset:
--------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
}

li {list-style: none;}
em,address {font-style: normal;}

input,
button {
	border: none;
	background: none;
    font-family:inherit;
	transition: all 300ms 0s ease;
}

a {
	color: var(--black1);
	text-decoration: none;
	transition: all 300ms 0s ease;
}

button:hover {
	cursor: pointer;
}

body * {
/* 	color: var(--black1); */
	word-break: break-all;
}


/* Basic
--------------------------------------------*/

button,
select {
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	font-size: calc(0.875rem + ((1vw - 7.68px) * 0.2604));
}

@media (max-width: 767px) {
  html {
    font-size: calc(0.85rem + ((1vw - 7.68px) * 0.2604));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {	
  html {
    font-size: 17px;
  }
}

:root {
	--white: #ffffff;
	--black1: #2D3540;
	--black2: #4E5862;
	--gray1: #7C838B;
    --gray2: #CAD2DB;
	--gray3: #EBEEF5;
	--navy: #123456;
	--red: #D73767;
	--blue: #B6FBFF;
	--green: #CAFFCF;
	--yellow: #FFFA92;
	--pink: #FFCFFF;
	--font-family: Helvetica , Arial , 'BIZ UDGothic', sans-serif;
	--gap1: 2rem;
	--gap2: 1rem;
	--card: repeat(auto-fit, minmax(300px, 1fr));
	--border: 1px solid var(--gray2);
	--shadow: 2px 5px 25px rgba(0,0,0,0.05);
	--shadow_h: 4px 7px 30px rgba(0,0,0,0.15);
}


body {
	font-family: Helvetica , Arial , 'BIZ UDGothic', sans-serif;
	line-height: 1.8rem;
	letter-spacing: 0.12rem;
	word-spacing: 0.16rem;
	color:  var(--black1);
	position: relative;
	box-sizing: border-box;
}

a:focus-visible,	
input:focus-visible,	
button:focus-visible {outline: 2px var(--navy) solid;}


main button,
main select {font-size: 1rem;}


@media (max-width: 767px) {
	body {
		line-height: 1.6rem;
		-webkit-text-size-adjust: 100%;
	}
	button {
		line-height: 1.5rem;
	}
}

/*-- scrollbar --*/

.scroll {
	overflow-x: scroll;
}
.scroll::-webkit-scrollbar{
	height: 5px;
}
.scroll::-webkit-scrollbar-track{
   background-color: var(--gray2);
}
.scroll::-webkit-scrollbar-thumb{
   background-color: var(--navy);
}

/*------ outline ------*/

.outline1 {
	padding: 3rem 5% 2rem;
}

.outline2 {
	max-width: 1536px;
	margin: 0 auto;
	box-sizing: content-box;
	padding: 0 4%;
}

/*---- やさしい日本語 ----*/

#tsutaeru-info,
body #tsutaeru-info * {
	color: var(--white)!important;
}

/*---- gdpr ----*/

#gdpr {
	display: block;
	text-align: left;
	background: rgba(0, 0, 0, 0.8);
	width: 100vw;
	left: 0;
	bottom: 0;
	z-index: 99;
	border-radius: var(--maru);
	position: fixed;
	text-align: center;
}

#gdpr p {
	text-align: left;
	color: var(--white)!important;
}

#gdpr button {
	color: var(--white);
	padding: 1rem;
	min-width: 10rem;
	margin-top: 2rem;
	border: var(--border);
	font-size: 1rem;
}

#gdpr button:hover {
	background: rgba(0, 0, 0, 0.9);
}

#gdpr a {
	text-decoration: underline;
	color: var(--white);
}

#gdpr a:hover {
	text-decoration: none;
}

@media (max-width: 767px) {
	#gdpr {
		padding: 2rem 3% 1rem;
	}
}

/*---- header ----*/

header {
	display: grid;
	grid-template-columns: 30% 1fr;
	column-gap: 10px;
	align-items: center;
	margin: 0 auto;
	max-width: 1536px;
	box-sizing: content-box;
	padding: 0 5%;
	position: relative;
}

@media (max-width: 1700px) {
	header {
		padding: 0 2%;
	}
}

@media (max-width: 1366px) {
	header {
		grid-template-columns: 25% 1fr;
	}
}

/*-- logo --*/
footer .logo img,
header .logo img{
	width: 100%;
	max-width: 400px;
}

@media (max-width: 767px) {
	footer .logo img,
	header .logo img{
		max-width: 270px;
		margin: 15px 0 0 0;
	}
}

header nav {
	display: grid;
	grid-template-columns: auto 160px;
	grid-gap: 10px;
}

header ul.utility {
	justify-self: flex-end;
	margin-top: 10px;
}

header ul.utility > li{
	margin-left: 30px;
	display: inline-block;
}

header ul.utility li a:hover,
header ul.utility li button:hover {text-decoration: underline;}

header li#search a {background: url("/common/img/common/icon_search.svg") no-repeat left center;}
header li#simple a {background: url("/common/img/common/icon_simple.svg") no-repeat left center;}
header li#lang button {background: url("/common/img/common/icon_lang.svg") no-repeat left center;}

header .utility > li > a,
header .utility button,
header .utility sns {
	background-size: 25px!important;
	padding: 1rem 0 1rem 35px;
	font-size: 0.9rem;
}

header ul.sns {
	justify-self: flex-end;
	align-self: end;
	padding-right: 60px;
}
header ul.sns li {
	margin-left: 10px;
	display: inline-block;
}

header ul.sns li a img{
	width: 30px;
}


/*lang*/

header #lang ul {
	display: none;
	position: absolute;
	z-index: 5;
	width: 10rem;
	box-shadow: var(--shadow);
}

header #lang ul a {
	background: var(--white);
	display: block;
	padding: 1rem;
	border-bottom: 1px solid var(--gray3);
}

header #lang ul a:hover {
	box-shadow: var(--shadow);
	text-decoration: none;
}

@media (max-width: 767px) {
	header #lang ul {
		width: 100%;
		left: 0;
	}
	header #mega_menu #lang li {
		display: block!important;
		margin: 0!important;
	}
	
	header #lang ul a {
		width: 100%;
		color: var(--black);
	}
}


/*-- glnav --*/

#glnav {
	grid-column: 1 / 3;
	justify-self: space-between;
}

#glnav > ul{
	display: grid;
	grid-template-columns: repeat(5,auto);
}

#glnav > ul li {
	text-align: right;
}

#glnav > ul li a {
	font-size: 1.1rem;
	display: block;
	text-align: center;
	padding: 1.5rem 1rem;
	border-bottom: 2px solid var(--white);
}

#glnav > ul > li > a:hover {
	border-bottom: 2px solid var(--navy);
	box-shadow: 0px 5px 10px rgba(0,0,0,0.05);
}

@media (max-width: 1080px) {
	#glnav > ul li a {
		font-size: 1rem;
	}
}


/*--humberger menu--*/

.menu {
	display: block;
	position: fixed;
	right: 15px;
	top: 10px;
	z-index: 999;
}

.menu button {
	background: var(--navy);
	text-align: center;
	position: relative;
	width: 55px;
	height: 55px;
	border-radius: 100%;
	box-shadow: var(--shadow);
	z-index: 999;
}

.menu button:hover {
	 box-shadow: var(--shadow_h);
}

.menu button.close {
	display: none;
}

.menu button span{
	transition: all .25s .25s;
}


.menu button.open span {
	top: 13px;
}

.menu button span,
.menu button span::before,
.menu button span::after {
	content: "";
	position: relative;
}

.menu button span::before {
	top: -17px;
	left: 0px;
	}
.menu button span::after {
	bottom: 18px;
	left: 0px;
	}

.menu button span::before,
.menu button span::after{
	display: inline-block;
	background-color: var(--gray2);
	width: 30px;
	height: 1px;
}



.menu button.open span::after { animation: sp_btn-after .75s forwards;}
@keyframes sp_btn-after {
	0% {
		transform: translateY(-5px) rotate(-45deg);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}

.menu button.open span::before { animation: sp_btn-before .75s forwards;}
@keyframes sp_btn-before {
	0% {
		transform: translateY(3px) rotate(45deg);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}


/*髢峨§繧�*/

.menu button.close {
	background: var(--gray2);
}
.menu button.close span::before,
.menu button.close span::after{
	background-color: var(--navy);
}

.menu button.close span {background-color: transparent;}

.menu button.close span::after { animation: close-sp_btn-after .75s forwards;}
@keyframes close-sp_btn-after {
	0% {
		transform: translateY(12px) rotate(0);
	}
	100% {
		transform: translateY(5px) rotate(-45deg);
	}
}
.menu  button.close span::before { animation: close-sp_btn-before .75s forwards;}
@keyframes close-sp_btn-before {
	0% {
		transform: translateY(12px) rotate(0);
	}
	100% {
		transform: translateY(19px) rotate(45deg);
	}
}

@media (max-width: 959px) {
	.menu {
		right: 5px;
		top: 8px;
	}
}

@media (max-width: 767px) {
	.menu button {
		width: 50px;
		height: 50px;
	}
	.menu button span::before {
		top: -14px;
		}
	.menu button span::after {
		bottom: 20px;
	}
}


/*--mega menu--*/

#mega_menu {
	position: fixed;
	background: var(--navy);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 998;
	display: none;
	padding: 3rem;
	font-size: 1.1rem;
	overflow-y: auto;
}

#mega_menu > ul > li > button {
	font-size: 1.1rem;
}

#mega_menu a,
#mega_menu button {
	color: var(--white);
}

#mega_menu a:hover {
	text-decoration: underline;
}

#mega_menu > ul {
	display: grid;
	grid-template-columns: repeat(4,1fr);
}

#mega_menu ul {
	margin: 0.5rem 0 1rem 1rem;
	line-height: 2rem;
}

#mega_menu ul ul {
	font-size: 0.9rem;
}

#mega_menu ul ul ul {
	font-size: 0.8rem;
	margin-top: 0;
}
#mega_menu > ul a:focus-visible,	
#mega_menu > ul input:focus-visible,	
#mega_menu > ul button:focus-visible {outline: 2px var(--white) solid;}


@media (max-width: 1366px) {
	#mega_menu > ul {
		grid-template-columns: repeat(3,1fr);
	}
}

/*---- sp ----*/

@media (max-width: 959px) {
	header {
		display: block;
		padding: 1rem;
	}
	
	header .utility,
	header .sns,
	header #glnav > ul {
		display: none;
	}
	
	#mega_menu > ul {
		grid-template-columns: repeat(2,1fr);
	}
	
	#mega_menu {
		padding: 0;
	}
	#mega_menu ul {
		margin: 0;
	}
	#mega_menu > ul {
		padding: 2rem;
	}
	header .sp .utility,
	header .sp .sns {
		display: inline-block;
		margin: 0!important;
		justify-self: flex-end;
	}
	#mega_menu .sp {
		background: var(--white);
		padding: 1rem 1rem .5rem;
	}
	#mega_menu ul.utility li,
	#mega_menu .sns li {
		margin: 0 .8rem 0 0!important;
		display: inline-block;
	}
	header ul.utility li a,
	header ul.utility li button {
		background-image: none!important;
		padding: 0;
		}
	header .sp .utility img {
		width: 30px;
	}
}

@media (max-width: 767px) {
	#mega_menu > ul {
		padding: 0;
		font-size: 1.1rem;
		grid-template-columns: 1fr;
	}
	#mega_menu ul ul {
		font-size: 1rem;
		border-bottom: 1px solid var(--gray1);
		display: none;
	}

	#mega_menu ul ul ul {
		font-size: 0.9rem;
	}
	#mega_menu > ul a,
	#mega_menu > ul button {
		display: block;
		width: 100%;
		color: var(--white);
		text-align: left;
		font-size: 1.1rem;
		padding: 1.5rem 1rem;
		position: relative;
	}

	#mega_menu > ul > li > a,
	#mega_menu > ul > li > button {
		border-bottom: 1px solid var(--gray1);
	}
	#mega_menu > ul > li > a:after,
	#mega_menu > ul > li ul > li > a:after,
	#mega_menu > ul > li > button:after,
	#mega_menu > ul > li ul > li > button:after {
		content: "";
		display: block;
		position: absolute;
		right: 8px;
		top: 1.5rem;
		width: 18px;
		height: 12px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transform-origin: center 43%;
		transition: transform 0.4s;
	}

	#mega_menu > ul > li ul > li > a:after,
	#mega_menu > ul > li ul > li > button:after {
		right: 5px;
		top: 1.2rem;
		width: 15px;
		height: 10px;
	}
	#mega_menu > ul > li > a:after,
	#mega_menu > ul > li > ul > li > a:after {
		background-image: url("/common/img/common/lnk1.svg");
	}

	#mega_menu > ul > li > button:after,
	#mega_menu > ul > li > ul > li > button:after {
		background-image: url("/common/img/common/btn1.svg");
	}

	#mega_menu > ul > li button.on:after {
		transform: rotate(180deg);
	}
	#mega_menu > ul > li > ul > li > a,
	#mega_menu > ul > li > ul > li > button {
		padding: .7rem 1rem .7rem 1.5rem;
		background-position: right 10px center;
	}
	#mega_menu > ul > li > ul > li > ul > li > a {
	padding: .5rem .5rem .5rem 2rem;
	}
}

/*---- footer ----*/

footer {
	margin: 5rem auto 0;
	box-sizing: content-box;
}

/*-- bnr --*/

footer .bnr {
	max-width: 1536px;
	margin: 0 auto;
	box-sizing: content-box;
	padding: 0 4%;
	gap: var(--gap2);
	margin: 1rem auto;
	font-size: 0.9rem;
}

footer .bnr a:hover {
	text-decoration: underline;
}

footer .bnr img {
	width: 100%;
}

footer .bnr,
footer .bnr h2 {
	font-size: 1rem;
	margin: 0 0 0.2rem;
	font-weight: bold;
}

footer .bnr.grid.clm6 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap1);
	margin: 1rem auto;
}

footer .bnr.grid.clm6 > li {
  width: calc(100% / 6); 
  box-sizing: border-box;
  text-align: center;
}


/*-- info --*/

footer .info {
	margin: 2rem auto;
	text-align: center;
}

footer .info address {
	margin: 2rem 0;
}

footer .info ul li {
	display: inline-block;
	margin: 0 1.5rem;
	font-size: .9rem;
}

footer .info ul a {
	text-decoration: underline;
}

footer .info ul a:hover {
	text-decoration: none;
}


/*-- copy --*/

footer #copy {
	position: relative;
	padding: 1rem;
	text-align: center;
}

footer #copy a {
	display: block;
	background: var(--navy);
	text-align: center;
	position: fixed;
	width: 55px;
	height: 55px;
	border-radius: 100%;
	box-shadow: var(--shadow);
	z-index: 10;
	right: 10px;
	bottom: 15px;
}

footer #copy a:hover {
	 box-shadow: var(--shadow_h);
}

footer #copy a img {
	width: 20px;
	margin-top: 25px;
	transform: rotate( -180deg );
}

@media (max-width: 959px) {
	footer {
		margin: 3rem auto 0;
	}
/* 	footer .bnr.grid.clm6 {
		justify-content:flex-start;
	} */
	footer .bnr.grid.clm6 > li {
		width: calc(100% / 4); 
	}
}

@media (max-width: 767px) {
	footer {
		margin: 2rem auto 0;
	}
	footer .bnr.grid.clm6 {
		justify-content:flex-start;
	}
	footer .bnr.grid.clm6 > li {
		width: calc(50% - var(--gap1) / 2);
	}
	footer #copy a {
		width: 50px;
		height: 50px;
		right: 5px;
		bottom: 5px;
	}
	footer #copy a img {
		margin-top: 22px;
	}
	footer #copy {
		padding: 1rem 60px .8rem;
	}
}

/* Elements
--------------------------------------------*/

/*-- link button --*/


.wp-block-button a {
	padding: 1.5rem;
	background: url("/common/img/common/lnk1.svg") no-repeat;
	background-position: bottom 10px right 10px;
	background-size: 20px;
	display: inline-block;
	text-decoration: none;
	border: var(--border);
	min-width: 12rem;
	color: var(--black);
	text-align: left;
	border-radius: 0;
	font-size: 1rem;
}

.wp-block-button.primary a {
	background-color: var(--navy);
	color: var(--white);
}

.sec .wp-block-button a { 
	padding: 1.2rem 1.2rem 1.5rem 1.2rem;
	background: url("/common/img/common/btn1.svg") no-repeat;
	background-position: bottom 10px right 50%;
	background-size: 18px;
	text-align: center;
}

.wp-block-button a:hover {
	 box-shadow: var(--shadow);
}
.wp-block-button.primary a:hover {
	 box-shadow: var(--shadow_h);
}


@media (max-width: 767px) {
	.wp-block-button a {
		margin: 0 0 1rem;
		padding: 1rem .5rem 1rem 1rem;
		background-position: bottom 5px right 5px;
		background-size: 15px;
		min-width: auto;
		width: 100%;
	}
}


/*-- link button --*/

/* .lnk1 a,
.lnk2 a,
.btn1,
.wp-block-button a,
a.wp-block-button {
	margin: 0 0 2rem;
	padding: 1.5rem 1rem 1.5rem 1.5rem;
	background: url("/common/img/common/lnk1.svg") no-repeat;
	background-position: bottom 10px right 10px;
	background-size: 20px;
	display: inline-block;
	text-decoration: none;
	border: var(--border);
	min-width: 12rem;
	text-align: center;
}



.lnk1 a:hover,
.lnk2 a:hover,
.btn1:hover,
.wp-block-button a:hover,
a:hover.wp-block-button {
	 box-shadow: var(--shadow);
}

.lnk2 a {
	padding: 1.5rem 2rem 1.5rem 1.5rem;
}

.lnk2 a img {
	vertical-align: middle;
	margin-right: .5rem;
}

@media (max-width: 767px) {
	.lnk1 a,
	.lnk2 a,
	.btn1 {
		margin: 0 0 1rem;
		padding: 1rem .5rem 1rem 1rem;
		background-position: bottom 5px right 5px;
		background-size: 15px;
		min-width: auto;
		width: 100%;
	}
	.lnk2 a {
		padding: 1rem;
	}
} */

/*-- icon --*/

img.icon,
svg.icon {
	width: 1.2rem!important;
	margin-left: .5rem;
	vertical-align: top;
}
img.icon[alt="別ウィンドウ"] {
	vertical-align: middle;
}

/*---- 繝九Η繝ｼ繧ｹ繝ｪ繧ｹ繝� ----*/

/* main ul.news li a {
	display: block;
    border-bottom: var(--border);
	padding: 1rem;
	background: url("/common/img/common/lnk1.svg") no-repeat;
	background-position: bottom 10px right 10px;
	background-size: 20px;
	text-decoration: none;
}

main ul.news  li a {
	display: grid;
	grid-template-columns: 9rem auto 1fr;
    justify-content: flex-start;
    align-items: center;
	grid-gap: 20px;	
}

main ul.news li a:hover {
	 box-shadow: var(--shadow);
}

main ul.news li a time {
	font-weight: bold;
	padding-right: 2rem;
	white-space: nowrap;
} */


/* Utility
--------------------------------------------*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

@media (max-width: 959px) {
	.pc{display: none;}
	.sp{display: block;}
}

/*---- .align ----*/

.align_c { text-align: center!important; }
.align_l { text-align: left!important; }
.align_r { text-align: right!important; }
.valign-m { vertical-align: middle !important; }
.valign-t { vertical-align: top !important; }
.valign-b { vertical-align: bottom !important; }

/*---- .margin ----*/
.mg_0 { margin: 0!important; }
.mg_1 { margin: 1em!important; }
.mg_2 { margin: 1em!important; }
.mg_t0 { margin-top: 0rem!important; }
.mg_t1 { margin-top: 1rem!important; }
.mg_t2 { margin-top: 2rem!important; }
.mg_t3 { margin-top: 3rem!important; }
.mg_b0 { margin-bottom: 0!important; }
.mg_b1 { margin-bottom: 1em!important; }
.mg_b2 { margin-bottom: 2em!important; }
.mg_b3 { margin-bottom: 3em!important; }
.mg_l1 { margin-left: 1em!important; }
.mg_r1 { margin-right: 1em!important; }

/*---- .width ----*/

.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 65%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.w10px { width: 30px; }
.w20px { width: 20px; }
.w30px { width: 30px; }
.w40px { width: 40px; }
.w50px { width: 50px; }
.w100px { width: 100px; }
.w120px { width: 120px; }
.w200px { width: 200px; height: auto;}

.w100_sp70 { width: 100%; }

.nowrap {
	white-space: nowrap;
}


/*---- grid system ----*/

.grid {
	display: grid;
	grid-gap: var(--gap1);
    justify-content: space-between;
}

.grid.start{
    justify-content: flex-start;
}

.grid.clm2{grid-template-columns: repeat(2,1fr);}
.grid.clm3{grid-template-columns: repeat(3,1fr);}
.grid.clm4{	grid-template-columns: repeat(4,1fr);}
.grid.clm5{grid-template-columns: repeat(5,1fr);}
.grid.clm6{grid-template-columns: repeat(6,1fr);}

.grid.clm1-2 {grid-template-columns: 1fr 2fr;}
.grid.clm2-1 {grid-template-columns: 2fr 1fr;}
.grid.clm1-3 {grid-template-columns: 1fr 3fr;}
.grid.clm3-1 {grid-template-columns: 3fr 1fr;}
.grid.clm1-4 {grid-template-columns: 1fr 4fr;}
.grid.clm4-1 {grid-template-columns: 4fr 1fr;}
.grid.clm1-5 {grid-template-columns: 1fr 5fr;}
.grid.clm5-1 {grid-template-columns: 5fr 1fr;}
.grid.clm6-1 {grid-template-columns: 6fr 1fr;}

.grid.clm2-1-1 {grid-template-columns: 2fr 1fr 1fr;}

.grid.lr {
	grid-template-columns: auto auto;
	margin-bottom: 1rem;
}


@media (max-width: 1366px) {
	.grid.clm4{	grid-template-columns: repeat(3,1fr);}
}

@media (max-width: 1024px) {
	.grid.clm2{grid-template-columns: repeat(2,1fr);}
	.grid.clm3{grid-template-columns: repeat(2,1fr);}
/*	.grid.clm4{	grid-template-columns: repeat(3,1fr);}*/
	.grid.clm5{grid-template-columns: repeat(4,1fr);}
	.grid.clm6{grid-template-columns: repeat(4,1fr);}
}

@media (max-width: 959px) {
	.grid.clm2{grid-template-columns: repeat(1,1fr);}
	.grid.clm5{grid-template-columns: repeat(3,1fr);}
}

@media (max-width: 767px) {
	.grid {
		grid-gap: var(--gap2);
	}
	
	.grid.clm3{grid-template-columns: repeat(1,1fr);}
	.grid.clm4{	grid-template-columns: repeat(2,1fr);}
	.grid.clm6{grid-template-columns: repeat(2,1fr);}
}

.grid img:not([class]) {
	width: 100%;
}