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

/*
VARIABLES
==============================================*/
:root {
  --hirak2: "ヒラギノ角ゴ W2 JIS2004", "Hiragino Kaku Gothic W2 JIS2004", Sans-Serif;
  --hirak5: "ヒラギノ角ゴ W5 JIS2004", "Hiragino Kaku Gothic W5 JIS2004", Sans-Serif;
  --hirak: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  --FA6: "Font Awesome 6 Free";
  --blue: #043491;
  --ltblue: #f4f8ff;
  --red: #C00;
  --white: #FFF;
  --black: #333;
  --ltgrey: #CCC;
  --grey: #777;
  --link: #003B83;
}

/*==============================================
 common layout
==============================================*/
*, *:before, *:after {
  box-sizing: border-box;
}
*:focus {
	outline: none;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}
body {
  position: relative;
  font-family: var(--hirak2);
  line-height: 1.5;
  font-size: 15px;
  color: var(--black);
}

/*====== header ======*/
header {
  border-bottom: 1px solid var(--blue);
  -webkit-box-shadow: rgb(0 0 0 / 11%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 3px;
  -moz-box-shadow: rgb(0 0 0 / 11%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 3px;
  box-shadow: rgb(0 0 0 / 11%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 3px;
}
.header-area {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.header-area img {
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: 1em;
  transform: translateY(-50%);
  width: 158px;
  height: 60px;
}
@media screen and (max-width:520px) {
  .header-area {
    position: static;
    display: block;
    height: auto;
  }
  .header-area img {
    position: static;
    top: 0;
    transform: translateY(0%);
  }
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
main {
  width: 94%;
  max-width: 798px;
  margin: 0 auto;
  flex: 1;
}
section {
  width: 100%;
  margin: 50px auto;
  padding: 10px 0 0;
}

.hr-hd {
  margin-left: calc(50% - 50vw);
  padding: 10px 0;
  width: 100vw;
	text-align: center;
  background-color: #DFFFFE;
	box-shadow: rgb(0 0 0 / 11%) 0 1px 3px inset;
}
.hr-hd img {
  margin: 0;
  width: 96%;
  max-width: 500px;
}

/*====== footer ======*/
footer {
	width: 100%;
	text-align: center;
	color: var(--white);
	background-color: var(--blue);
}
.footer-content {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 90%;
	max-width: 980px;
	height: 100px;
	margin: 0 auto;
}
.footer-content .logo a {
	display: block;
	overflow: hidden;
	width: 130px;
	height: 32px;
	white-space: nowrap;
	text-indent: 100%;
	background: url("../images/zkai-logo-f.svg") 0 0 no-repeat;
	background-size: 100%;
}
.footer-content p {
	font-family: sans-serif;
	font-size: 0.8em;
	text-align: right;
	color: var(--white);
}
@media screen and (max-width: 520px) {
	.footer-content {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: auto;
	}
	.logo {
		margin: 20px 0;
	}
	.copyright {
		margin-bottom: 12px;
	}
	.footer-content p {
		padding-right: 0;
	}
}


/*==============================================
 heading
==============================================*/
h1, h2, h3, h4, h5 {
  font-family: var(--hirak5);
  font-weight: bold;
  line-height: 1.4;
}
h1 {}
h2 {
  position: relative;
  margin-bottom: 15px;
  padding: 10px 5px 10px 30px;
  font-size: 135%;
  color: var(--blue);
  border: 2px solid var(--blue);
}
h2::before {
  position: absolute;
  top: 8px;
  left: 5px;
  content: "◆";
  font-size: 110%;
}
h3 {
  margin-bottom: 12px;
  padding: 3px 0 3px 8px;
  font-size: 125%;
  border-left: 8px solid var(--blue);
}
h4 {
  margin-bottom: 5px;
  font-size: 110%;
}
h5 {
  margin-bottom: 5px;
  font-size: 108%;
}

@media screen and (max-width:520px) {
  h2 {
    font-size: 120%;
    padding: 10px 5px 10px 28px;
  }
  h3 {
    font-size: 112%;
  }
  h4 {
    font-size: 108%;
  }
  h5 {
    font-size: 103%;
  }
}

/*==============================================
 font
==============================================*/
.text-note {
  position: relative;
  margin-top: 2px;
  padding-left: 1.2em;
  font-size: 85%;
  line-height: 1.3;
}
.text-note::before {
  position: absolute;
  content: '※';
  font-family: var(--hirak);
  top: 0;
  left: 0;
}

.txt-em, .txt-em-b, .txt-em-r {
  font-family: var(--hirak5);
  font-weight: bold;
}
.txt-em-b {
  color: var(--blue);
}
.txt-em-r {
  color: var(--red);
}
.txtblue {
  color: var(--blue);
}
.txtred {
  color: var(--red);
}
.txtgrey {
  color: var(--grey) !important;
}

em {
  color: var(--red);
  font-family: var(--hirak5);
  font-weight: bold;
}
.fwB {
  font-family: var(--hirak5);
  font-weight: bold;
}
mark {
	font-family: var(--hirak5);
  font-weight: bold;
	font-style: normal;
	background: linear-gradient(transparent 70%, #abdcef 70%);
}

.TI1 {
  text-indent: -1em;
  padding-left: 1em;
}

/**** icon ****/
.fa-chevron-right {
  margin: 0 5px;
}
/* 注目！*/
.notice::after,
.confirm::after {
  margin-left: 5px;
  padding: 2px 5px 1px;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
	font-family: var(--hirak5);
  font-weight: bold;
  background: var(--red);
  color: var(--white);
  font-size: 15px;
  animation: noticeAnime 2s infinite alternate;
  letter-spacing: 1px;
}
.notice::after {
  content: "注目!";
}

/* 確認 */
.confirm::after {
  content: "確認";
}

@keyframes noticeAnime {
   0% {
       color: var(--red);
       background: var(--white);
      }
 100% {
       color: var(--white);
       background: var(--red);
      }
}

/* font-size */
.fsxxs {
  font-size: 0.82em;
}
.fsxs {
  font-size: 0.9em;
}
.fsxl {
  font-size: 1.1em;
}
.fsxxl {
  font-size: 1.2em;
}

.box-text-flex {
  display: flex;
}
.box-text-flex > div {
  width: 50%;
  align-content: center;
}
@media screen and (max-width:520px) {
  .box-text-flex {
    flex-direction: column;
  }
  .box-text-flex > div {
    width: 100%;
  }
}

/*==============================================
 link
==============================================*/
a {
  transition: all .3s ease;
  text-decoration: underline;
  color: var(--link);
  word-break: break-all;
}
a:hover {
  text-decoration: none;
}

/* テキストリンク */
.box-text-link-area {
  margin: 5px 0;
}
.text-link, .text-linkB {
  color: var(--blue);
  margin-left: 3px;
}
.text-link::before, .text-linkB::before {
  font-family: var(--FA6);
  content: "\f138";
  font-weight: bold;
  display: inline-block;
  left: 0;
  top: 0;
  padding-right: 3px;
  color: var(--link);
}
.text-linkB::before {
  content: "\f13a";
}
a.text-link, a.text-linkB {
  text-align: center;
  text-decoration: underline;
}
a:hover.text-link, a:hover.text-linkB {
  text-decoration: none;
}

/* ボタンリンク */
.box-btn-link-area {
  text-align: left;
}
.btn-link {
  position: relative;
  display: inline-block;
  margin: 10px 0;
  padding: 10px 40px 10px 20px;
  font-family: var(--hirak5);
  font-weight: bold;
  font-size: 120%;
  color: var(--white);
  border-radius: 3px;
  border: 2px solid var(--link);
  background: var(--blue);
  text-decoration: none;
  cursor: pointer;
  transition: 0.5s;
}
.btn-link::after {
	position: absolute;
  display: inline-block;
	font-family: var(--FA6);
	content: "\f138";
  font-weight: bold;
	top: 50%;
  transform: translate(-50%, -50%);
	right: -2px;
  font-size: 80%;
}
.btn-link:hover {
  background: var(--white);
  color: var(--link);
}

/* flex */
.box-btn-flexA, .box-btn-flexB {
  display: flex;
  justify-content: flex-start;
}
.box-btn-flexA .item, .box-btn-flexB .item {
  margin: 0 5px;
}
.btn-grey {
  background: var(--grey);
}

@media screen and (max-width:520px) {
  .box-btn-flexA, .box-btn-flexB {
    margin: 10px auto;
    flex-direction: column;
  }
  .box-btn-flexA .item, .box-btn-flexB .item {
    margin: 7px 0;
  }
  .box-btn-flexA .btn-link, .box-btn-flexB .btn-link {
    padding: 12px 33px 12px 10px;
  }
  .box-btn-flexB .btn-link {
    font-size: 120%;
  }
}

/* 閉じる */
.close {
  margin: 30px auto 0;
  text-align: center !important;
}
.close button {
  margin: 0;
  padding: 7px 15px;
  background-color: var(--white);
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid var(--link);
  font-family: var(--hirak5);
  font-weight: bold;
  color: var(--link);
  font-size: 125%;
  cursor: pointer;
  transition: 0.3s;
}
.close button:before {
  font-family: var(--FA6);
  content: "\f057";
  font-weight: bold;
  margin-right: 3px;
}
.close button:hover {
  background: var(--link);
  color: var(--white);
}

/*==============================================
 image
==============================================*/
img {
  max-width: 100%;
}

.box-image-area {
  margin: 10px 0;
  text-align: center;
}
.img-base {
  width: 100%;
}
.img-large {
  width: 80%;
  height: auto;
}
.img-middle {
  width: 50%;
  height: auto;
}
.img-small {
  width: 35%;
  height: auto;
}

@media screen and (max-width:520px) {
  .img-large {
    width: 100%;
  }
  .img-middle, .img-small {
    width: 80%;
  }
}

.box-image-flexA {
  display: flex;
}
.box-image-flexA > .image {
  width: 100px;
  padding-right: 10px;
}
.box-image-flexA > .text {
}

.box-image-flexB {
  display: flex;
}
.box-image-flexB > .image {
  width: 170px;
  margin-right: 12px;
  border: 1px solid #CCC;
}
.box-image-flexB > .text {
}

@media screen and (max-width:520px) {
  .box-image-flexA {
    flex-direction: column;
  }
  .box-image-flexA > .image {
    margin: auto;
    width: 100px;
    padding-right: 0;
    padding-bottom: 10px;
  }
  .box-image-flexB {
    flex-direction: column;
  }
  .box-image-flexB > .image {
    margin: auto;
    width: 100px;
    padding-right: 0;
    padding-bottom: 10px;
  }
}

/*==============================================
 table
==============================================*/
.box-table-area {
  margin: 5px 0;
}

table {
  margin: 0;
  width: auto;
  border-spacing: 0;
  border-collapse: collapse;
  box-sizing: border-box;
  font-size: 96%;
  line-height: 1.3;
}
th, td {
  padding: 5px;
  border: 1px solid #777;
  text-align: left;
}
thead th {
  font-family: var(--hirak5);
  font-weight: bold;
  text-align: center;
  background: #CCC;
}
@media screen and (max-width:520px) {
  table {
    font-size: 80%;
  }
}

/*==============================================
 frame
==============================================*/
/* 青塗 */
.box-frame-A {
  margin: 0;
  padding: 15px;
  width: 100%;
  background-color: var(--ltblue);
  box-shadow: rgb(0 0 0 / 11%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 3px;
}

/* 黒罫線囲 */
.box-frame-B {
  margin: 10px 0;
  padding: 10px;
  display: inline-block;
  border: 1px solid var(--black);
}

@media screen and (max-width:520px) {
  .box-frame-A, .box-frame-B {
    padding: 15px 8px;
  }
}

/* ！注意！ */
.cautionbox {
  margin: 1em 0;
  background-color: #fff5f6;
  padding: 1em;
}
.cautionbox-ttl {
  color: #ef5350;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--hirak5);
}
.cautionbox-ttl:before {
  font-family: var(--FA6);
  content: "\f06a";
  font-size: 17px;
  margin-right: 3px;
}
.cautionbox-ttl:after {
  font-family: var(--FA6);
  content: "\f06a";
  font-size: 17px;
  margin-left: 3px;
}

/* みんなの声 */
.voice-box {  
  position: relative;
  display: block;
  margin: 20px auto;
  padding: 65px 15px 15px;
  background: #fcfcfc;
  box-shadow: 0 0 4px #888;
}
.ribbon {
  position: absolute;
  left: 0;
  top: 10px;
  margin: 0;
  padding: 0 10px;
  height: 33px;
  line-height: 33px;
  font-family: var(--hirak5);
  font-size: 120%;
  letter-spacing: 0.1em;
  color: #FFF;
  background: #ff7470;
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1);
}
.ribbon:before {
  position: absolute;
  content: '';
  top: -5px;
  left: -7px;
  border: none;
  height: 38px;
  width: 7px;
  background: #ff7470;
  border-radius: 5px 0 0 5px;
}
.ribbon:after {
  position: absolute;
  content: '';
  top: -7px;
  left: -5px;
  border: none;
  height: 7px;
  width: 5px;
}

ul.sp, ul.su, ul.wi {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
}
ul.sp li, ul.su li, ul.wi li {
  position: relative;
  margin-bottom: 18px;
  padding: 0 0 18px 31px;
  line-height: 1.3;
  border-bottom: 1px dashed var(--blue);
}
ul.sp li:last-of-type, ul.su li:last-of-type, ul.wi li:last-of-type {
  margin-bottom: 10px;
  padding: 0 0 0 31px;
  border-bottom: none;
}
ul.sp li::before, ul.su li::before, ul.wi li::before {
  position: absolute;
  top: -7px;
  left: 0;
  font-size: 1.4em;
}
/* 春 */
ul.sp li::before {
	content: '\1F338';
}
/* 夏 */
ul.su li::before {
	content: '\1F33B';
}
/* 冬 */
ul.wi li::before {
	content: '\26c4';
}

/*==============================================
 list
==============================================*/
ul li, ol li {
  list-style: none;
}
/* disc */
ul.disc {
	margin: 0;
	padding: 0;
}
ul.disc li {
	list-style-type: none;
	margin: 3px 0 3px 19px;
	position: relative;
}
ul.disc li::before {
	display: block;
	content: '●';
	color: var(--grey);
	position: absolute;
	top: 3px;
	left: -15px;
	font-size: 0.7em;
}

ul.list li {
  margin-left: 1em;
  text-indent: -1em;
}

/* □囲み番号 */
ol.sq {
  position: relative;
  margin: 0;
  padding: 2px 8px;
  border: 2px solid #0068B3;
}
ol.sq li {
  position: relative;
  margin: 8px 0;
  padding: 0 0 0 23px;
}
ol.sq {
  counter-reset: li;
}
ol.sq > li:before {
  position: absolute;
  box-sizing: border-box;
  counter-increment: li;
  content: counter(li) "";
  top: 3px;
  left: 0;
  font-family: var(--hirak);
  font-weight: bold;
  color: var(--white);
  width: 18px;
  height: 18px;
  line-height: 1.2;
  font-size: 15px;
  text-align: center;
  background: #0068B3;
}

/* ◯数字 */
ol.disc {
  position: relative;
  margin: 0;
}
ol.disc li {
  position: relative;
  margin: 30px 0 0;
  padding: 0 0 0 25px;
}
ol.disc li:first-of-type {
  margin: 0;
}
ol.disc {
  counter-reset: li;
}
ol.disc > li:before {
  position: absolute;
  box-sizing: border-box;
  counter-increment: li;
  content: counter(li) "";
  top: 2px;
  left: 0;
  font-family: var(--hirak);
  font-weight: bold;
  width: 18px;
  height: 18px;
  font-size: 13px;
  text-align: center;
  line-height: 17px;
  border: 1px solid var(--black);
  border-radius: 50%;
}

/* Description list */
dd {
  margin: 0;
}

/* スケジュール */
dl.schedule  {
  display: flex;
  flex-wrap: wrap;
}
dl.schedule dt, dl.schedule dd {
  width: 50%;
  margin: 3px 0;
  padding: 0 5px;
}
@media screen and (max-width:520px) {
  dl.schedule  {
    flex-direction: column;
  }
  dl.schedule dt, dl.schedule dd {
    width: 100%;
  }
}

/*==============================================
 Accordion
==============================================*/
details {
  margin: 0 0 15px;
  
  &::details-content {
    transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content {
    padding: 15px 0;
    opacity: 1;
  }
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 200px;
    overflow-y: scroll;
  }
}
summary {
  position: relative;
  padding: 12px 30px 12px 10px;
  border: 1px solid #1155CC;
  background: var(--blue);
  font-family: var(--hirak5);
  font-weight: bold;
  font-size: 1.2em;
  color: #FFF;
  cursor: pointer;
  transition: all .8s;
  display: block;
  &::-webkit-details-marker {
    display: none;
  }
  &:hover {
    cursor: pointer;
    background: #003B83;
    color: #FFF;
  }
}
summary:hover {
  background: #FFF;
  color: #1155CC;
}
summary::-webkit-details-marker {
  display: none;
}
details[open] summary {
  background: #D2E1FF;
  color: #1155CC;
}
summary:after,
details[open] summary:after {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  right: -10px;
  font-family: var(--hirak2);
  font-weight: normal;
  font-size: 1.3em;
}
summary:after {
  content: "＋";
}
details[open] summary:after {
  content: "－";
}
@media screen and (max-width:520px) {
  summary {
    font-size: 1.1em;
  }
}

/*==============================================
 pagetop
==============================================*/
.pagetop {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
  border: 1px solid var(--white);
}
.pagetop a {
	display: block;
	font-size: 0;
	width: 40px;
	height: 40px;
 	text-align: center;
	background-color: #0a3fa5;
	line-height: 40px;
}
.pagetop a i {
	font-size: 25px;
	color: var(--white);
	line-height: 40px;
}

/*==============================================
 Margin
==============================================*/
.MT05 {
  margin-top: 5px !important;
}
.MT10 {
  margin-top: 10px !important;
}
.MT15 {
  margin-top: 15px !important;
}
.MT20 {
  margin-top: 20px !important;
}
.MT25 {
  margin-top: 25px !important;
}
.MT30 {
  margin-top: 30px !important;
}
.MT40 {
  margin-top: 40px !important;
}
.MT50 {
  margin-top: 50px !important;
}
.MT60 {
  margin-top: 60px !important;
}

.MB10 {
  margin-bottom: 10px !important;
}
.MB15 {
  margin-bottom: 15px !important;
}
.MB20 {
  margin-bottom: 20px !important;
}
.MB30 {
  margin-bottom: 30px !important;
}
.MB40 {
  margin-bottom: 40px !important;
}

.ML5 {
  margin-left: 5px !important;
}
.ML10 {
  margin-left: 10px !important;
}
.ML15 {
  margin-left: 15px !important;
}
.ML20 {
  margin-left: 20px !important;
}

/*==============================================
 Display
==============================================*/
.disN {
  display: none;
}

/*==============================================
 text-align
==============================================*/
.taL {
  text-align: left !important;
}
.taR {
  text-align: right !important;
}
.taC {
  text-align: center !important;
}
.vaT {
  vertical-align: top !important;
}
.vaM {
  vertical-align: middle !important;
}
.vaB {
  vertical-align: bottom !important;
}

/*==============================================
 float
==============================================*/
.flL {
  float: left;
}
.flR {
  float: right;
}
.flN {
  float: none;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

/*==============================================
 メディアクエリ
==============================================*/
@media screen and (min-width: 1025px) {
  .header-area {
    margin: 0 auto;
  }
}
@media screen and (max-width: 520px) {
  body {
    font-size: 1em;
  }
  .btn-link {
    width: 100%;
  }
}