@charset "utf-8";

@media screen and (max-width: 767px) {
	.sp {
		display: inherit !important;
	}
	.clearfix:after {
		display: none;
	}
	body {
		min-width: 0;
		padding-top: 14vw;
		padding-bottom: 22vw;
		font-size: 3.5vw;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	#wrap {
		width: 100%;
		padding: 0 2.5vw;
		box-sizing: border-box;
		overflow: hidden;
	}

	.inner,
	body#index #main,
	#key .image,
	.select-corce,
	#gnav {
		width: auto;
	}

	#header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		padding: 2.5vw;
		background-color: #fff;
	}
	body#index #header {
		padding-bottom: 2.5vw;
	}
	#header .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#header #logo,
	#header .contact_area {
		width: 100%;
		float: none;
	}

	#header #logo {
		position: relative;
		z-index: 1100;
		width: 56vw;
	}

	#header #logo .logo-mark {
		width: 18%;
		margin-right: 2%;
	}
	#header #logo .copy {
		width: 62%;
		margin-bottom: 0.3em;
	}

	#header #logo .copy,
	#header #logo .logo-type {
		margin-left: 20%;
	}

	#header .contact_area {
		display: none;
	}
	#header .menu {
		width: 10vw;
		aspect-ratio: 1 / 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	#header .menu span {
		display: block;
		width: 65%;
		height: 2px;
		background: #ff932a;
		position: relative;
		transition: .3s ease;
	}
	#header .menu span::before,
	#header .menu span::after {
		content: "";
		width: 100%;
		height: 2px;
		background: #ff932a;
		position: absolute;
		left: 0;
		transition: transform .3s ease, top .3s ease;
	}
	#header .menu span::before {
		top: -8px;
	}
	#header .menu span::after {
		top: 8px;
	}
	#header .menu.is-open span {
		background: transparent;
	}
	#header .menu.is-open span::before {
		top: 0;
		transform: rotate(45deg);
	}
	#header .menu.is-open span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	#header .gnav {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: -100vw;
		width: 100vw;
		top: 0;
		bottom: 0;
		background-color: #fff;
		transition: 0.6s;
		font-size: 4.75vw;
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
		font-weight: bold;
	}
	#header .gnav.is-open {
		right: 0;
	}
	#header .gnav ul li + li {
		margin-top: 1.5em;
		text-align: center;
	}
	#header .gnav ul li a {
		display: block;
		padding: 0.75em 0;
	}
	#header .gnav ul li:nth-child(1) a {
		color: #ff932a;
		border-bottom: 3px solid #ff932a;
	}
	#header .gnav ul li:nth-child(2) a {
		color: #8ec21e;
		border-bottom: 3px solid #8ec21e;
	}
	.contactfiexd {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2000;
		background-color: #ff932a;
		padding: 2.5vw 0 1.5vw;
		line-height: 1.1;
	}
	.contactfiexd a {
		color: #fff;
		text-align: center;
	}
	.contactfiexd .label {
		display: block;
		margin-bottom: 0.25em;
	}
	.contactfiexd .tel {
		display: block;
		font-size: 7.75vw;
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
		letter-spacing: 0.08em;
	}
	.contactfiexd .tel span {
		margin-right: 0.25em;
		font-size: 0.7em;
	}
	.contactfiexd .time {
		display: block;
		margin-top: 0.25em;
		font-size: 2.75vw;
	}

	#gnav {
		display: none;
	}

	body#index #main {
		min-height: 0;
		padding-top: 16px;
	}

	#main .inner {
		margin-left: 0;
		margin-right: 0;
	}

	#content,
	body.sub #content {
		width: 100%;
		min-height: 0;
		float: none;
		margin-bottom: 5vw;
	}

	#side {
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}

	#side .img_school,
	#side .googlemap,
	#side .googlemap iframe {
		width: 100%;
		max-width: 100%;
	}

	#side .googlemap iframe {
		height: 240px;
	}

	#side .access .add {
		display: flex;
		margin-top: 0.5em;
	}
	#side .access .add dt {
		width: 5em;
	}
	#side .access .add dd {
		width: calc(100% - 5em);
	}

	#key .image {
		margin-bottom: 20px;
	}

	.select-corce {
		letter-spacing: normal;
	}

	.select-corce li,
	.select-corce li:first-child {
		display: block;
		width: 100%;
		margin: 0 0 18px;
		box-sizing: border-box;
	}
	.select-corce li .title {
		padding-right: 22px;
		background-size: auto 10px;
	}
	.select-corce li:last-child .title img {
		width: 84%;
	}

	.select-corce li a + p {
		margin-top: 0.5em;
	}

	body#index .backnumber .article {
		width: auto;
	}

	body#index #main .backnumber .update {
		width: auto;
		float: none;
		display: block;
		margin-bottom: 2px;
	}

	body#index #main .backnumber .title {
		display: block;
	}

	#index #greeting .area_txt br,
	#students .lead p br,
	#students .sec2 p br,
	#eiken .lead p br,
	#eiken .mamas-club p br,
	#baby .lead p br {
		display: none;
	}

	.bg {
		padding: 12px;
	}

	.kodawari,
	.kodawari:last-child {
		width: 100%;
		min-height: 0;
		float: none;
		margin: 0 0 26px;
	}

	.kodawari:last-child {
		margin-bottom: 0;
	}
	.kodawari .heading + img {
		width: 100%;
	}
	.kodawari p {
		margin-top: 0.75em;
	}

	.lesson-price h2 img {
		display: none;
	}
	.lesson-price h2 span {
		display: block;
		padding: 0.5em 0.75em 0.25em;
		background-color: #ff932a;
		color: #fff;
		font-size: 4vw;
	}
	.lesson-price .child li dt,
	.lesson-price .child li dd,
	.lesson-price .flower dt,
	.lesson-price .flower dd {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.lesson-price .nyukai {
		width: 100%;
		table-layout: fixed;
	}

	.lesson-price .nyukai th,
	.lesson-price .nyukai td {
		font-size: 12px;
		padding: 8px 4px;
	}

	#students .lead .photo,
	#students .lead .photo2,
	#eiken .lead .photo,
	#baby .lead .photo,
	#baby .lead .photo2 {
		width: 100%;
	}
	#students .lead .photo {
		margin-bottom: 5vw;
	}
	#students .lead h1 {
		margin-bottom: 0.5em;
	}
	#students h1 img, #students .sec2 h2 img {
		display: none;
	}
	#students h1 span,
	#students .sec2 h2 span {
		font-size: 4.5vw;
		color: #4a9bcd;
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
		font-weight: bold;
	}
	#students .sec2 h2 {
		margin-bottom: 0.75em;
	}
	#students .sec2 h2 span {
		font-size: 5vw;
	}

	#students .point ul,
	#eiken .point ul,
	#baby .point ul {
		display: flex;
		flex-wrap: wrap;
		gap: 24px 4%;
	}

	#students .point li,
	#students .point li:nth-child(3n),
	#eiken .point li,
	#eiken .point li:first-child,
	#baby .point li,
	#baby .point li:nth-child(3n) {
		width: 48%;
		min-height: 0;
		float: none;
		margin: 0;
	}

	#students .point li .image,
	#eiken .point li .image,
	#baby .point li .image {
		width: 100%;
	}

	#students .bnr_area,
	#baby .bnr_area {
		margin-left: 0;
	}

	#eiken .lead .photo {
		margin-bottom: 5vw;
	}
	#eiken .lead h1 {
		margin-bottom: 0.5em;
	}
	#eiken h1 img,
	#eiken .mamas-club h2 img,
	#eiken .indication h2 img {
		display: none;
	}
	#eiken h1 span,
	#eiken .mamas-club h2 span {
		font-size: 4.5vw;
		color: #8ec21e;
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
		font-weight: bold;
	}
	#eiken #content .indication h2.std {
		padding: 3em 1.5em;
		background: url(../img/course/eiken/bg.webp) center / cover no-repeat;
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
		color: #fff;
	}
	#eiken .mamas-club h2 {
		margin-bottom: 0.75em;
	}
	#eiken .mamas-club h2 span {
		font-size: 5vw;
	}

	#eiken .lead .images {
		gap: 12px;
	}

	#eiken .lead .images img {
		width: calc(50% - 6px);
	}

	#eiken .flow .chart {
		padding: 5vw 3.5vw 1em;
		background-color: #f5faef;
	}
	#eiken #content .flow .pointbox {
		display: block;
		padding: 16px;
	}

	#eiken #content .flow .pointbox ul,
	#eiken #content .flow .pointbox ul:last-child {
		width: 100%;
	}

	#eiken #content .flow .pointbox ul + ul {
		margin-top: 8px;
	}

	#eiken table.std {
		width: 100%;
		table-layout: fixed;
	}

	#eiken table.std th,
	#eiken table.std td {
		padding-left: 4px;
		padding-right: 4px;
	}

	#eiken table.std dl {
		width: auto;
		padding: 0 8px;
	}

	#eiken table.std dt,
	#eiken table.std dd {
		width: 100%;
	}

	#eiken .pricebox {
		display: block;
		padding: 18px 16px;
	}

	#eiken .pricebox .price {
		margin-top: 12px;
		text-align: right;
	}

	#baby #content .schedule {
		width: 185px;
		max-width: 45%;
		margin: 0 0 16px 16px;
	}

	#baby .pickup ul {
		display: flex;
		flex-wrap: wrap;
		gap: 24px 4%;
	}

	#baby .pickup li {
		width: 48%;
		float: none;
		padding: 0;
		box-sizing: border-box;
	}

	.article_news {
		padding: 30px 0;
	}

	#backnumber .thum {
		max-width: 35%;
		margin-right: 16px;
	}
	#content #news .list {
		position: static;
		margin-bottom: 1em;
	}
	#news .backnumber {
		height: 40vw;
	}

	body#news .categorytitle {
		padding-top: 5vw;
		margin-bottom: 5vw;
	}

	body#news .postbody img {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
		margin: 24px 0 32px;
	}

	body#news .postnav .wp-pagenavi {
		width: 100%;
        display: flex;
        justify-content: center;
        gap: 0.5em;
	}
	#side #list_news ul li a, #side #list_cat ul li a, #side #list_archive ul li a {
		display: block;
		padding: 0.5em 0;
	}

	body#news .postnav {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
	}
	body#news .postnav li,
	body#news .postnav li a {
		width: auto;
	}

	#pivacy, #sitemaps {
		padding-top: 5vw;
	}
	#pivacy h1, #sitemaps h1 {
		font-size: 5vw;
	}

	#footer {
		padding-top: 20px;
	}

	#footer #ft_logo {
		width: 80%;
		margin: 0 auto;
		float: none;
	}

	#footer #ft_logo .logo-mark {
		width: 18%;
	}

	#footer #ft_logo .copy,
	#footer #ft_logo .logo-type {
		margin-left: 20%;
	}
	#footer #ft_logo .logo-type img {
		display: block;
		margin-bottom: 0.5em;
	}

	#footer .grid2col .column,
	#footer .grid2col .column:last-child {
		width: 100%;
		float: none;
	}

	#footer .ft_nav {
		margin-top: 20px;
		text-align: center;
	}

	#footer .ft_nav li {
		margin: 0 8px;
	}

	#footer .copyright {
		margin-top: 12px;
		text-align: center;
	}

	#footer .totop {
		display: none;
	}

	.contact table,
	.contact tbody,
	.contact tr,
	.contact th,
	.contact td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.contact th {
		padding-bottom: 4px;
		border-bottom: none;
		font-weight: bold;
	}

	.contact td {
		padding-top: 4px;
	}
}