@charset "utf-8";
/* CSS Document */

body {
	/* font-family:"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; */
}

/*
____________ pankuzu ____________*/

.pankuzu {
	color:#3e4752 !important;
	width:950px;
	margin:0 auto 0 auto;
	font-size:80%;
	text-align: left;
    border-top: solid 1px #d9d9d9;
}

.pankuzu a { text-decoration:underline !important;color:#3e4752 !important;border:none !important;}
.pankuzu a:link,
.pankuzu a:visited,
.pankuzu a:hover,
.pankuzu a:active { text-decoration:underline;}

.pankuzu td {
	padding: 5px 0 6px 0;
}

/*
____________ link ____________*/

.imgLink {display:inline-block; /* IE8 */
			*display:inline-block; /* IE7 */}
.imgLink:hover {opacity:0.8;
			filter:alpha(opacity=80);        /* ie lt 8 */
			-ms-filter:"alpha(opacity=80)";  /* ie 8 */
			-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
			-khtml-opacity: 0.8;              /* Safari 1.x */}

a:link{text-decoration:none;color:#023f98;}
a:visited{text-decoration:none;color:#023f98;}
a:hover,a:active {text-decoration:underline; color:#023f98;}

/*
____________ contents ____________*/

sup {
    vertical-align: super;
	line-height: 8px;
}

sub {
    vertical-align: sub;
	line-height: 5px;
}


/* 2023/9/6　共通ヘッダー反映用 */
#header a {
    color: #3c3c3c;
}
#header a:visited {
    color: #3c3c3c;
}
#header a:hover {
    color: #004098;
    text-decoration: none;
}
#header .l-header__emergency2 a {
    color: #ffffff;
}
#header .l-header__emergency2 a:hover {
    color: #ffffff;
}
#header .l-sp-nav-control2 {
    display: none;
}
@media (max-width:767px) {
    #header .l-header__emergency2{
        margin-right: 0;
    }
}

/* --------------------------------------------------
	2025/02 add
-------------------------------------------------- */
:root {
	--blue: #0071BC;
	--orange: #E68003;
	--z-nav: 210;
	--z-navHamburger: 220;
	--z-navBg: 200;
}

@media (max-width: 767px) {
	.spOnly {
		display: block;
	}
	.pcOnly {
		display: none;
	}
}
/*
____________ megaMenu ____________*/
@media (min-width:1024px) {
	.spMenuOnly {
		display: none;
	}
	.pcMenuOnly {
		display: block;
	}
	.megaMenu {
		background: var(--blue);
		z-index:  var(--z-nav);
		position: relative;
	}
	.menu {
		position: relative;
	}
	.menuList {
		display: flex;
		margin: 0 auto;
		gap: 0;
		justify-content: center;
	}
	.menuItem:nth-child(2){
		padding-left: 106px;
		padding-right: 53px;
	}
	.menuItem:nth-child(3){
		padding-left: 53px;
		padding-right: 53px;
	}
	.menuItem:nth-child(4){
		padding-left: 53px;
	}
	.menuItem.-hover {
		cursor: default;
	}
	.menuLink:visited {
		color: #fff;
	}
	.menuLink:hover {
		text-decoration: none;
	}
	.menuTitle {
		padding: 14px 0;
		font-size: 14px;
		font-weight: 600;
		color: #fff;
		z-index:  var(--z-nav);
		position: relative;
		transition: 0.4s;
		font-synthesis: none;
	}
	.menuItem .menuTitle .pcMenuOnly{
		transition: 0.4s;
	}
	.menuItem.-hover .menuTitle .pcMenuOnly, 
	.menuLink:hover .menuTitle {
		filter: brightness(0.8);
	}
	.menuTitle::after {
		content: "";
		position: absolute;
		bottom: -8.5px;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-bottom: 20px solid #F4F3F3;
        opacity: 0;
        transition: 0.4s;
		left: 50%;
        transform: translateX(-50%);
	}

	.menuItem:first-child .menuTitle::after {
		content: none;
	}
	.menuItem.-hover .menuTitle::after {
		opacity: 1;
	}
	.menuAccordionWrapper {
		pointer-events: none;
		opacity: 0;
		height: 0;
		position: absolute;
		width: 100%;
		margin: 0 calc(50% - 50vw);
		left: 0;
		top: 50px;
		transition: 0.5s;
	}
	.menuItem.-hover .menuAccordionWrapper {
		pointer-events: initial;
		opacity: 1;
		height: auto;
	}
	.menuAccordion {
		border-radius: 15px;
		position: relative;
		background: #F4F3F3;
		border: 2px solid transparent;
		width: 97%;
		margin: 0 auto;
		transition: 0.4s;
		margin-top: 10px;
		padding: 28px 0 40px;
		transition: border 0.8s;
	}
	.menuItem.-hover .menuAccordion {
		border: 2px solid #fff;
	}
	.menuAccordionList {
		max-width: 960px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
	.-teacher .menuAccordionList {
		justify-content: center;
	}
	.menuAccordionItem:not(:last-child) {
		border-right: 1px solid #ccc;
		padding-right: 30px;

	}
	.menuAccordionItem:last-child.pcMenuOnly {
		padding-left: 30px;
	}
	.-student .menuAccordionItem {
		padding: 0 25px;
		justify-content: center;
	}
	.accordionItem.-new .pcMenuOnly::before  {
		content: "NEW";
		color: #D72158;
		display: inline;
		margin-right: 4px;
		letter-spacing: 0.2px;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionList {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		gap: 0 20px;
		grid-template-areas:
		"left01 center01 right01"
		"left02 center02 right02"
		"left03 center03 right03"
		"left04  .  .";
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(1) {
		color:red;
		grid-area: left01;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(2) {
		grid-area: left02;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(3) {
		grid-area: left03;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(4) {
		grid-area: left04;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(5) {
		grid-area: center01;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(6) {
		grid-area: center02;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(7) {
		grid-area: center03;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(8) {
		grid-area: right01;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(9) {
		grid-area: right02;
	}
	.-student .menuAccordionItem:nth-child(2) .accordionItem:nth-child(10) {
		grid-area: right03;
	}
	.accordionItemImg {
		height: 17px;
		width: auto;
	}
	.accordionLink {
		display: flex;
		margin-left: 5px;
		letter-spacing: -1px;
		transition: 0.4s;
	}
	.accordionLink:link {
		color: #000;
	}
	.accordionLink::before {
		content: "▶";
		margin-right: 5px;
		color: var(--blue); 
		transform: translateY(5px);
		font-size: 11px;
	}
	.accordionLink:visited {
		color: #000;
	}
	.accordionLink:hover {
		color: #5c5c5c;
		text-decoration: none;
	}
	.accordionLink:hover::before {
		filter: brightness(1.1);
	}
	.accordionLink.-outside::after {
		content: "";
		background: url(/kids/src/images/common/menu/outside.svg) no-repeat;
		width: 12px;
		height: 12px;
		background-size: contain;
		filter: grayscale(1);
		margin-top: 8px;
	}
	.accordionLink.-pl-lines {
		line-height: 1.4;
        margin-bottom: 6px;
	}
	.menuButton {
		cursor: default;
		margin-bottom: 10px;
		filter: drop-shadow(-2px -2px 1px white) drop-shadow(2px -2px 1px white) drop-shadow(-2px 2px 1px white) drop-shadow(2px 2px 1px white);
	}
	.menuCTA {
		transition: 0.4s;
	}
	.menuCTA:hover {
		filter: brightness(1.1);
	}
	.navBg {
		transition: background 1s;
		position: fixed; 
	}
	.navBg.-active {
		background: rgba(0, 0, 0, .5); 
		width: 100%; 
		left: 0;
		z-index:var(--z-navBg);
	}
}

/*
____________ megaMenu humburger____________*/
@media (max-width: 1023px) {
	.spMenuOnly {
		display: block;
	}
	.pcMenuOnly {
		display: none;
	}
	.megaMenu {
		width: 100%;
		box-sizing: border-box;
		position: absolute;
	}
	.hamburger {
		display: block;
		height: 56px;
		margin: 12px 8px 0 auto;
		position: relative;
		z-index: var(--z-navHamburger);
		width: 56px;
		border: none;
		background: linear-gradient(0deg, var(--blue) 0%, #0595F4 100%);
		border: 2px solid #fff;
		border-radius: 7px;
		filter: drop-shadow(0px 3px 2px #444);
	}
	.hamburger.-active {
		background: #fff;
	}
	.hamburger.-active .hamburgerLine {
		background-color: transparent;
	}
	.hamburger.-active .hamburgerLine::before,
	.hamburger.-active .hamburgerLine::after {
		top: -2px;
		background-color: var(--blue);
		width: 130%;
	}
	.hamburger.-active .hamburgerLine::before {
		transform: rotate(45deg);
		left: -3px
	}
	.hamburger.-active .hamburgerLine::after {
		transform: rotate(-45deg);
		left: -3px;
	}
	.hamburgerLine {
		display: block;
		height: 3px;
		position: absolute;
		top: 26px;
		left: 50%;
		transform: translateX(-50%);
		width: 24px;
		background-color: #fff;
		transition: 0.4s;
	}
	.hamburgerLine:before,
	.hamburgerLine:after {
		content: "";
		display: block;
		height: 100%;
		position: absolute;
		width: 100%;
		background-color: #fff;
		transition: inherit;
	}
	.hamburgerLine:before {
		top: -9px;
	}
	.hamburgerLine:after {
		top: 9px;
	}
	.menuNavArea {
		position: fixed;
		top: 78px;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
		z-index: var(--z-nav);
		height: calc(100vh - 78px);
		height: calc(100dvh - 78px);
		overflow: scroll;
		transition: 0.4s;
		padding: 12px 0;
		width: 100%;
		pointer-events: none;
	}
	.menuNavArea.-active {
		opacity: 1;
		pointer-events: initial;
	}
	.menuCTA {
		position: absolute;
		left: 4px;
	}
	.menuCTAimg {
		width: 303px;
		height: auto;
	}
	.menu {
		padding: 66px 0 20px;
		width: 335px;
		max-width: 335px;
	}
	.menuItem {
		margin: 10px 0;
		padding: 13px 18px 0;
		background: linear-gradient(to bottom, #E4F5FF 0%, #BFE2FF 8%);
		border-radius: 7px;
		border: 2px solid #fff;
		filter: drop-shadow(2px 2px 3px #555);
		/* text-align: left; */
	}
	.menuItem.-odd {
		background: linear-gradient(to bottom, #FFF1E7 0%, #FFECDE 8%);
	}
	.menuItem:first-child {
		padding-bottom: 16px;
	}
	.menuItem.-hasAccorgion {

	}
	.menuTitleImg {
		height: 20px;
		filter: drop-shadow(-2px -2px 1px white) drop-shadow(2px -2px 1px white) drop-shadow(-2px 2px 1px white) drop-shadow(2px 2px 1px white);
	}
	.menuTitleImg.-top {
		width: 228px;
	}
	.menuTitleImg.-delivery {
		width: 178px;
	}
	.menuTitleImg.-student {
		width: 239px;
	}
	.menuTitleImg.-teacher {
		width: 178px;
	}
	.menuAccordionWrapper {
		margin-top: 20px;
		margin-left: -18px;
		margin-right: -18px;
		background: #fff;
	}
	.menuAccordionItem {
		padding: 10px 12px 19px;
		border-bottom: 1px solid #BFE2FF;
	}
	.menuAccordionItem.-sp-last {
		padding-bottom: 15px;
	}
	.menuItem.-odd .menuAccordionItem {
		border-bottom: 1px solid #FFECDE;
	}
	.menuAccordionItem:last-child,
	.menuAccordionItem.-sp-last,
	.menuItem.-odd .menuAccordionItem.-sp-last  {
		border: none;
	}
	.accordionItem.-new .spMenuOnly {
		display: flex;
		align-items: center;
	}
	.accordionItem.-new .spMenuOnly::before  {
		content: "";
		background: url(/kids/src/images/common/menu/menu-new.png) no-repeat;
		width: 30px;
		height: 30px;
		background-size: contain;
		margin: 3px 5px 0 0;
	}
	.accordionItemImg {
		height: 17px;
		width: auto;

	}
	.accordionItemImg.-delivery03 {
		width: 231px;
	}
	.accordionItemImg.-student01 {
		width: 232px;
	}
	.accordionItemImg.-teacher01 {
		height: 42.5px;
        margin-top: 3px;
	}
	.menuButton {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #172e59;
		font-weight: 900;
		transition: color 0.4s;
		font-size: 0.875rem;
	}
	.menuButton.-accordion {
		position: relative;
		background: none;
		border: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 100%;
		padding: 0;
	}
	.menuButton.-accordion::before,
	.menuButton.-accordion::after {
		content: '';
		display: block;
		position: absolute;
		top: 60%;
		background-color: var(--blue);
		transform: translateY(-50%);
	}
	.-odd .menuButton.-accordion::before,
	.-odd .menuButton.-accordion::after {
		background-color: var(--orange);
	}
	.menuButton.-accordion::after {
		height: 17px;
		right: 10px;
		width: 3px;
		transition: transform 0.4s;
	}
	.menuButton.-accordion::before {
		height: 3px;
		right: 3px;
		width: 17px;
	}
	.menuButton.-active::after {
		transform: translateY(-50%) rotate(-90deg);
	}
	.accordion {
		height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: 0.4s;
	}
	.accordion.-active {
		height: auto;
		visibility: visible;
		margin-top: 10px;
		margin-bottom: -3px;
	}
	.accordionItem {
		background: linear-gradient(to bottom, #E9F6FF,#DFF1FF);
		border-radius: 5px;
	}
	.-odd .accordionItem {
		background: linear-gradient(to bottom, #FFF2E9, #FFF5EE);
	}
	.accordionItem + .accordionItem {
		margin-top: 5px;
	}
	.accordionLink {
		display: flex;
		justify-content: space-between;
		padding: 10px 10px 14px;
		align-items: center;
	}
	.accordionLink::after {
		content: "▶";
		color: var(--blue); 
		position: relative;
		top: 3px;
		font-size: 14px;
	}
	.-odd .accordionLink::after {
		color: var(--orange);
	}
	.accordionLink.-outside::after {
		content: "";
		background: url(/kids/src/images/common/menu/outside.svg) no-repeat;
		width: 12px;
		height: 12px;
		background-size: contain;
	}
	.accordionLink:hover {
		text-decoration: none;
	}
	.accordionImg {
		width: auto;
		height: 13.5px;
	}
	.accordionImg.-delivery01-3 {
		width: 135px;
	}
	.accordionImg.-delivery02-1 {
		width: 134px;
	}
	.accordionImg.-delivery02-2 {
		width: 134px;
	}
	.accordionImg.-delivery03-1 {
		width: 185px;
	}
	.accordionImg.-teacher01-3 {
		height: 13.7px;
	}
	.accordionImg.-teacher01-4 {
		height: 14px;
	}
	.spNavBg {
		transition: 1s;
	}
	.spNavBg.-active {
		position: fixed; 
		background: var(--blue);
		opacity: 0.9; 
		width: 100%; 
		height: calc(100vh - 78px);
		top: 78px; 
		left: 0;
		z-index: var(--z-navBg);
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.menuNavArea {
		top: 122px;
		height: calc(100vh - 122px);
	}
	.spNavBg.-active {
		height: calc(100vh - 122px);
		top: 122px; 
	}
	.menuCTA {
        left: 50%;
        transform: translateX(-50%);
    }
}
@media  (min-width: 451px) and (max-width: 1023px) {
	.menuCTA {
		position: relative;
        margin-bottom: -63px;
		left: unset;
        transform: unset;
    }
}
@media (max-width: 450px) {
	.menuCTA {
		left: unset;
        transform: unset;
        right: 69px;
		position: absolute;
    }
}
@media (max-width: 374px) {
	.menu {
		width: 88vw;
	}
}