@charset 'UTF-8';

/*

    Base

*/

/*  color  */
:root {
	--main-color: #e83b4d;
	--text-color01: #333333;
	--text-color02: #666666;
	--white-color: #ffffff;
	--black-color: #000000;
	--light-gray-color: #f5f5f5;
	--dark-gray-color: #e3e3e3;
	--bg-color: #f4f3eb;
	--sub-color: #4caf50;
	--caution-color: #ff892a;
	--link-color: #337ab7;
}

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
}
input[type=password], input[type=text], button, textarea {
	max-width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

/*  font  */
html { font-size: 10px;}
body { font-size: 1.25rem;}
@media screen and (min-width: 768px) { 
	html { font-size: 10px;}
	body { font-size: 1.5rem;}
}
body {
	font-family: "IBM Plex Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--text-color01);
	line-height: 1.5;
}
a {
	color: var(--link-color);
	transition: all 0.1s linear;
}
a:hover	{ opacity: 0.7;}
p {
	line-height: 2;
	font-feature-settings: "palt";
}

/*  size  */
h1 { font-size: 2em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.25em;}

/*  common  */
.global ul,
.global li,
.global p {
	margin: 0;
	list-style: none;
	line-height: 1;
}
.global a {
	text-decoration: none;
	color: inherit;
}

/*  max width  */
body img,
body iframe {
	max-width: 100%;
}

/*  placeholder  */
::placeholder {
	font-size: 1.5rem;
	color: #999999;
}

/*  material-symbols-outlined  */
.material-symbols-outlined {
	margin-right: 0.25em;
	font-size: 1.5em;
	color: inherit;
	vertical-align: middle;
}






/*

    layout

*/
body {
	padding: 50px 0 0;
	background-color: var(--bg-color);
	box-sizing: border-box;
}

/*  .container  */
.container {
	margin: 0  auto;
	padding: 2em 1em;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	.container {
		padding: 4em 0;
		max-width: 768px;
	}
}





/*

    #contents

*/

/*  #c_header  */
#contents #c_header .container h1 {
	margin: 0;
	font-size: 2em;
	color: var(--main-color);
}
/*  #c_content  */
#contents #c_content {
	background-color: var(--white-color);
}

/*  heading  */
#contents #c_content h2 {
	margin: 2em 0 1em;
	font-size: 1.5em;
	color: var(--main-color);
}
#contents #c_content h3 {
	margin: 2em 0 1em;
	font-size: 1.25em;
	color: var(--text01-color);
}

/*

    parts

*/
/*  .btn  */
.btn {
	color: var(--main-color);
	text-align: center;
}
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 300px;
	margin: 0 auto;
	padding: 0.5em 1em;
	border-radius: 10px;
	background-color: var(--main-color);
	font-weight: bold;
	color: var(--white-color);
	box-sizing: border-box;
}
.btn.ghost a {
	border: 1px solid var(--main-color);
	background-color: transparent;
	color: var(--main-color);
}

/*  .br  */
.br {
	display: inline-block;
}
@media screen and (min-width: 768px) {
	.br {
		display: block;
	}
}

/*  .frame  */
.frame {
	margin: 2em 0;
	padding: 2em;
	border-radius: 10px;
	border: 1px solid var(--dark-gray-color);
	background-color: var(--white-color);
	box-sizing: border-box;
}
.frame > :first-child { margin-top: 0 !important;}
.frame > :last-child { margin-bottom: 0 !important;}

/*  .round  */
.round p {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 0 0 2.5em;
	font-size: 1.25em;
	font-weight: bold;
}
.round p:before {
	position: absolute;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "";
	width: 2em;
	height: 2em;
	border-radius: 9999px;
	background-color: var(--main-color);
	font-size: 1em;
	color: var(--white-color);
}
.round.no1 p:before { content: "1";}
.round.no2 p:before { content: "2";}
.round.no3 p:before { content: "3";}
.round.no4 p:before { content: "4";}
.round.no5 p:before { content: "5";}
.round.no6 p:before { content: "6";}
.round.no7 p:before { content: "7";}
.round.no8 p:before { content: "8";}
.round.no9 p:before { content: "9";}

/*  .emphasis  */
.emphasis {
	margin: 1em 0;
	padding: 1.5em;
	border-radius: 10px;
	background-color: var(--light-gray-color);
	box-sizing: border-box;
}
.emphasis strong {
	display: flex;
	align-items: center;
	font-size: 1.25em;
}
.emphasis strong:before {
	content: '\e86c';
	display: inline-block;
	margin: 0 0.25em 0 0;
	font-family: 'Material Symbols Outlined';
	font-size: 1.25em;
}
.emphasis :first-child { margin-top: 0;}
.emphasis :last-child { margin-bottom: 0;}

/*  .note  */
.note {
	margin: 1em 0;
	padding: 1.5em;
	border-radius: 10px;
	background-color: var(--light-gray-color);
	text-align: left;
	box-sizing: border-box;
}
.note strong {
	display: flex;
	align-items: center;
	font-size: 1.25em;
}
.note strong:before {
	content: '\e000';
	display: inline-block;
	margin: 0 0.25em 0 0;
	font-family: 'Material Symbols Outlined';
	font-size: 1.25em;
}
.note *:first-child { margin-top: 0;}
.note *:last-child { margin-bottom: 0;}

/*  ul.notes  */
ul.notes {
	list-style: none;
}
ul.notes li {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.5em;
	box-sizing: border-box;
}
ul.notes li:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "※";
	font-size: 1em;
}

/*  .caution  */
.caution {
	font-size: 1.0rem;
	color: var(--text-color02);
}

/*  img-txt  */
.img-txt {
	margin: 2em 0;
}
.img-txt .img {
	margin: 0 0 2em;
}
.img-txt .img > img {
	display: block;
}
.img-txt .txt:first-child { margin-top: 0;}
.img-txt .txt:last-child { margin-bottom: 0;}
@media screen and (min-width: 768px) {
	.img-txt {
		display: flex;
	}
	.img-txt.left {
		flex-direction: row;
	}
	.img-txt.right {
		flex-direction: row-reverse;
	}
	.img-txt .txt {
		
	}
	.img-txt .img {
		flex-shrink: 0;
		width: 30%;
	}
	.img-txt.left .img {
		margin: 0 2em 0 0;
	}
	.img-txt.right .img {
		margin: 0 0 0 2em;
	}
}

/*  .flow  */
.flow ul {
	list-style: none;
	margin: 1em 0;
}
.flow ul li {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 1em;
	background-color: var(--white-color);
	font-weight: bold;
	box-sizing: border-box;
}
.flow ul li + li {
	margin-top: 2em;
}
.flow ul li + li:before {
	position: absolute;
	top: -1.75em;
	left: 0;
	right: 0;
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: auto;
	border: 0.5em solid transparent;
	border-bottom: 0.5em solid var(--main-color);
	border-left: 0.5em solid var(--main-color);
	transform: rotate(-45deg);
}
.flow ul li img {
	width: auto;
	height: 2em;
	margin: 0 0.5em 0 0;
}

/*  ul.tab  */
ul.tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
}
ul.tab li {
	width: 50%;
	margin: 0;
}
ul.tab li a {
	display: block;
	width: 100%;
	padding: 1em 2em;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	font-weight: bold;
	color: inherit;
	text-align: center;
	opacity: 0.5;
	cursor: pointer;
	box-sizing: border-box;
}
ul.tab li a.current {
	opacity: 1;
}






/*

    Block editor

*/

/*  image  */
div.container div.be-item a img {
	display: block;
	margin: 0 auto;
}

/*  imagetext  */
div.container div.be-item div.imagetext {
	margin: 2em 0;
}
div.container div.be-item div.imagetext img {
	display: block;
	margin: 0 auto 2em;
}
div.container div.be-item div.imagetext p {
	margin-top: 0;
}
@media screen and (min-width: 768px) {
	div.container div.be-item div.imagetext {
		overflow: hidden;
	}
	div.container div.be-item div.imagetext p {
		margin-top: 0;
	}
	div.container div.be-item div.imagetext.left img {
		float: left;
		max-width: 30%;
		margin: 0 2em 2em 0;
	}
	div.container div.be-item div.imagetext.right img {
		float: right;
		max-width: 30%;
		margin: 0 0 2em 2em;
	}
}








/*

    Header

*/
/*  common  */
header.global {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--dark-gray-color);
	background-color: var(--white-color);
	z-index: 9999;
}

/*  .sitetop  */
header.global h1,
header.global p {
	margin: 0;
	font-size: 1em;
	line-height: 1;
}
header.global a.sitetop {
	display: flex;
	align-items: center;
}
header.global a.sitetop img {
	width: auto;
	height: 45px;
}
header.global a.sitetop span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.25em 0.5em;
	border-radius: 9999px;
	border: 1.5px solid var(--main-color);
	font-size: 0.75em;
	font-weight: 500;
	color: var(--main-color);
	text-align: center;
	box-sizing: border-box;
}
header.global a.sitetop span img {
	width: auto;
	height: 1em;
	margin: 0.25em;
}
@media screen and (min-width: 960px) {
	header.global a.sitetop span {
		font-size: 1em;
	}
}

/*  menu  */
#menu {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	margin: 0;
	font-size: 4.0rem;
	color: var(--text-color02);
}
@media screen and (min-width: 960px) {
	#menu {
		display: none;
	}
}

/*  nav  */
header.global nav {
	position: absolute;
	top: 50px;
	left: 0;
	display: none;
	width: 100%;
	height: 100vh;
	padding: 1em;
	background-color: var(--bg-color);
	box-sizing: border-box;
}
header.global nav ul {
	margin: 0;
}
header.global nav ul li {
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
header.global nav ul li+li {
	border-top: 1px solid var(--dark-gray-color);
}
header.global nav ul li a {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: var(--text-color02);
}
@media screen and (min-width: 960px) {
	header.global nav {
		position: relative;
		top: auto;
		left: auto;
		display: block !important;
		width: auto;
		height: auto;
		background-color: transparent;
	}
	header.global nav ul {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header.global nav ul li {
		padding: 0;
	}
	header.global nav ul li+li {
		margin: 0 0 0 2em;
		border: none;
	}
}





/*

    Footer

*/

/*  layout  */
footer.global {
	padding: 1em;
	border-top: 1px solid var(--dark-gray-color);
	background-color: var(--white-color);
	text-align: center;box-sizing: border-box;
}
footer.global small img {
	width: auto;
	height: 35px;
}





/*

    Message

*/

/*  layout  */
.message {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1em 0;
	padding: 0.5em 1em;
	color: #ffffff;
	border-radius: 3px;
	animation: failure 1s linear both;
}
.message.success { background-color: #8fc31f;}
.message.failure { background-color: #ea545d;}
.message p {
	text-align: center;
	margin: 0 0 0 0.75em;
}
@keyframes failure {
	0% { opacity: 1;}
	50% { opacity: 1;}
	75% { opacity: 0.3;}
	100% { opacity: 1;}
}





/*

    #authentication

*/
#authentication {
	width: 100%;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	#authentication {
		max-width: 420px;
	}
}
#authentication .container a.sitetop {
	display: block;
	text-align: center;
}
#authentication .container a.sitetop img {
	width: 300px;
	height: auto;
}
#authentication .container a.sitetop span {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border-radius: 9999px;
	border: 1.5px solid var(--main-color);
	font-weight: 500;
	color: var(--main-color);
	text-align: center;
	box-sizing: border-box;
}
#authentication .container a.sitetop span img {
	width: auto;
	height: 1em;
	margin: 0 0.25em;
}

/*  form  */
#authentication .container .form {
	margin: 2em auto 0;
	padding: 2em;
	border-radius: 10px;
	background-color: var(--white-color);
	text-align: center;
	box-sizing: border-box;
}
#authentication .container .form .error {
	color: var(--caution-color);
}
#authentication .container .form form label {
	display: block;
	padding: 0.5em 1em;
	text-align: left;
	box-sizing: border-box;
}
#authentication .container .form form input {
	width: 100%;
	border-radius: 10px;
	padding: 0.5em 1em;
	box-sizing: border-box;
}
#authentication .container .form form button {
	margin: 1em 0 0;
	padding: 1em 3em;
	border-radius: 10px;
	background-color: var(--main-color);
	font-size: 1em;
	font-weight: bold;
	color: var(--white-color);
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	/* reset */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	outline: none;
}





/*

    #toppage

*/
/*  #mv  */
#toppage #mv .container .wrap {
	text-align: center;
}
#toppage #mv .container .wrap p.catch {
	font-size: 1.25em;
	font-weight: bold;
	color: var(--main-color);
	text-align: center;
}
#toppage #mv .container .wrap img.logo {
	width: 300px;
	height: auto;
}
#toppage #mv .container .wrap img.img {
	margin: -2em 0 0;
	width: auto;
	height: 200px;
}
@media screen and (min-width: 768px) {
	#toppage #mv .container .wrap {
		position: relative;
	}
	#toppage #mv .container .wrap p.catch {
		font-size: 2em;
	}
	#toppage #mv .container .wrap img.img {
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
	}
}
#toppage #mv .container p.lead {
	margin: 2em 0;
}
@media screen and (min-width: 768px) {
	#toppage #mv .container p.lead {
		text-align: center;
	}
}
#toppage #mv .container ul.links {
	list-style: none;
	margin: 1em auto;
	max-width: 375px;
}
#toppage #mv .container ul.links li {
	margin: 1em 0;
}
#toppage #mv .container ul.links li a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	border-radius: 10px;
	background-color: var(--main-color);
	font-weight: bold;
	color: var(--white-color);
	box-sizing: border-box;
}
#toppage #mv .container ul.links li a img {
	width: auto;
	height: 1.5em;
}




/*

    #page

*/
/*  #guide  */
#guide #c_content #c_main .reading {
	margin: 2em 0;
	padding: 2em;
	border-radius: 10px;
	background-color: rgba(232,59,77,0.2);
	box-sizing: border-box;
}
#guide #c_content #c_main .listening {
	margin: 2em 0;
	padding: 2em;
	border-radius: 10px;
	background-color: rgba(76,175,80,0.2);
	box-sizing: border-box;
}
#guide #c_content #c_main .frame > .round p {
	justify-content: space-between;
}
#guide #c_content #c_main .frame > .round p:after {
	content: "＋";
	color: var(--main-color);
}
#guide #c_content #c_main .frame > .round.active p:after {
	content: "ー";
}
@media screen and (min-width: 768px) {
	#guide #c_content #c_main .frame.pink .img-txt .img,
	#guide #c_content #c_main .frame.green .img-txt .img {
		width: 40%;
	}
}

/*  #campaign  */
/* ul.tab */
#campaign #c_content #c_main ul.tab li.reading a { 
	background-color: rgba(232,59,77,0.2);
}
#campaign #c_content #c_main ul.tab li.listening a { 
	background-color: rgba(76,175,80,0.2);
}
/* ul.types */
#campaign #c_content #c_main ul.types {
	list-style: none;
	margin: 0;
}
#campaign #c_content #c_main ul.types li.type {
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	#campaign #c_content #c_main ul.types li.type {
		padding: 4em;
	}
}
#campaign #c_content #c_main ul.types li.type#reading { 
	background-color: rgba(232,59,77,0.2);
}
#campaign #c_content #c_main ul.types li.type#listening { 
	background-color: rgba(76,175,80,0.2);
}
#campaign #c_content #c_main ul.types li.type > ul {
	list-style: none;
	margin: 0;
}
#campaign #c_content #c_main ul.types li.type > ul > li {
	margin: 0;
}
#campaign #c_content #c_main ul.types li.type > ul > li + li {
	margin: 1em 0 0;
}
#campaign #c_content #c_main ul.types li.type > ul > li > .frame {
	position: relative;
	margin: 0;
	border: none;
	text-align: center;
	overflow: hidden;
}
#campaign #c_content #c_main ul.types li.type > ul > li > .frame p {
	font-weight: bold;
}
#campaign #c_content #c_main ul.types li.type > ul > li > .frame p.term span {
	display: inline-block;
	margin: 0 0.5em 0 0;
	padding: 0 1em;
	border-radius: 5px;
	background-color: var(--main-color);
	font-size: 1.0rem;
	color: var(--white-color);
	box-sizing: border-box;
}
#campaign #c_content #c_main ul.types li.type > ul > li > .frame.close {
	background-color: rgba(0,0,0,0.1);
}
#campaign #c_content #c_main ul.types li.type > ul > li > .frame.close p.term {
	text-decoration: line-through;
}

/* detail */
#campaign #c_content #c_main p.question,
#campaign #c_content #c_main p.answer {
	padding: 1em;
	border-radius: 10px;
	background-color: var(--light-gray-color);
	font-size: 1.25em;
	box-sizing: border-box;
}

/*  #gakuen,#asahi,#yamakita  */
#gakuen,
#asahi,
#yamakita {
	padding: 0;
}
#gakuen header,
#asahi header,
#yamakita header {
	display: none;
}
#gakuen footer,
#asahi footer,
#yamakita footer {
	display: none;
}