@charset "utf-8";

/***************************************
Ver 2025.01.10
グリッドレイアウト
*************************************** */

/* *********************************** */
/*
font-family: 'メイリオ','Arial',sans-serif;
font-family: "Noto Sans JP";
font-family: "Sawarabi Mincho";

/* *********************************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym , address ,big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, form, label, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
   font: inherit;
    vertical-align: baseline;
	max-height:100%;
 }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section , iframe { display:block; box-sizing: border-box;  }
address{ display:inline; font-style:normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }


/*------------------------------
  非表示
--------------------------------*/
.mask{ display: none !important; visibility: hidden !important; opacity: 0 !important; }


/*---------------------------------
/*　モバイル制御
/*---------------------------------*/
.mb-on{ display:inline-block; }
.mb-off{ display:none; }
@media screen and (min-width: 600px) { .mb-on{ display:none; } .mb-off{ display:inline-block; } }



/*************************
  font Awesome icon 
  https://origin.fontawesome.com/
************************ */
i{ font-weight:400; }
i.fa-arrow-up-right-from-square ,
i.fa-up-right-from-square ,
i.fa-external-link-alt{ font-size:70%; vertical-align:text-top; margin-left:0.5rem !important;  } /*リンク別窓*/
i.marginR{ margin-right: 0.5em; }
i.marginL{ margin-left: 0.5em; }
i.margin{ margin-left: 0.5em; margin-right: 0.5em; }


/*---------------------------------
 ページレイアウト
-----------------------------------*/
html{ font-size:62.5%; zoom:1 ; overflow:auto; } /* -> 10px; */

body {
	position:relative; transition: 0.5s;
	font-family: "Noto Sans JP",'メイリオ','Arial',sans-serif;  font-weight: 400; font-size:1rem; line-height: 1;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.1vw;
}

section , aside , header , footer{
	display: grid;
	grid-template-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 960px)
	[main-end] minmax(1em, 1fr)
	[full-end];
}

section > * , aside > * , header > * , footer > * { grid-column: main; }
div.wrap-display , .grid-full{ grid-column: full; }

/*---------------------------------
 ヘッダー
 2025.01.15版 sidemenu統合 展開ヘッダー
<header id="PT">
<div class="logo">啓明塾<a href="../index.html">啓明塾</a></div>
<div class="accordion-title js-accordion-title"><i class="fas fa-bars"></i></div>
<div class="accordion-content">
<div id="PageList" class="sidemenubar">
-----------------------------------*/
header{ position:relative;  box-sizing: border-box; width:100%; padding: 4px 4px; }
header .logo{
	position:absolute; top:0; left: 0; margin-right: auto; z-index: 9;
	font-family: 'Noto Serif JP', serif; font-weight:700; line-height:130%; letter-spacing :calc( 2px + 0.1vw );
}
header .logo, header .accordion-title { font-size: calc( 24px + 0.5vw ); padding:8px ; }
header .logo a{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }

header .accordion-title { text-align: right; }
header .accordion-title:after {	border: none; }
header .accordion-content{ margin: 0 -1em; }

/*---------------------------------
/ フッター
-----------------------------------*/
footer {
	position:relative; font-size:1.3rem; overflow:hidden; padding: 10vh 5% ; min-height: 15vh; margin-top: auto;
	display:flex; flex-direction: column; justify-content: center; align-items: center; gap:20px;
}
footer .logo{ flex:1; position: relative; }
footer .logo a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  opacity: 0; overflow: hidden;}

footer address{ flex:1;}
footer address ul{ list-style:none; margin: 0; padding: 0; text-align: center; }
footer address ul li{ margin-bottom: 1.5rem; }
footer address ul li i{ display: block !important; margin-bottom: 0.5rem; font-size: 200%; }
footer address ul li:nth-child(1) { font-family: 'Noto Serif JP', serif; font-size: 200%; font-weight:700; line-height:130%; }


footer nav{ flex: 1 ; }
footer nav ul{
	position:relative; list-style:none; margin:0;  height:100%; 
	display:flex; flex-wrap:wrap; gap:12px;  justify-content:end;
}
footer nav ul li{
	flex:1; width: 72px; padding:8px; border: 1px solid ; 
	position:relative; display:flex; flex-direction: column; justify-content:center;
	font-family: arial,sans-serif; font-size:inherit; line-height:100%; text-align:center;
 }
footer nav ul li + li{ margin:0; }
footer nav ul li i{ display:block; font-size:24px; margin:0 0 4px; padding:0; }
footer nav ul li b{ display:block; font-size:10px; margin:0; padding:0; }
footer nav ul li a{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }

/*--------------------------*/
/* サイドメニュー
/*--------------------------*/
.sidemenubar{ box-sizing: border-box; padding: 8px 8px; }
.sidemenubar nav{ font-size:1.2rem; padding:4px 0;}
.sidemenubar nav.hidden{ display:none; }
.sidemenubar nav p.caption{ font-size:120%; line-height:100%; padding:0.25rem 0.5rem; margin:1rem 0 1rem; border-left:3px solid ; }
.sidemenubar nav ul{ flex-direction: row; }
.sidemenubar nav ul + ul{ margin-top: 1rem; }

/*--------------------------*/
.sidemenubar nav ul{ font-size:inherit;  padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.sidemenubar nav li{
	flex-grow: 0;
	font-family: arial,sans-serif; font-size:inherit; line-height:100%; letter-spacing: 0.5px; text-align: center;
	box-sizing:border-box;  overflow:hidden; margin:0; padding:0; /* a で設定 */ }
.sidemenubar nav li.blank{ height:0; line-height:0; border:none; margin:0 inherit; }

.sidemenubar nav li a{
	display:block; padding:0.5rem 1rem; line-height:150%;  text-decoration:none; white-space:wrap; overflow:hidden;
	border-width: 1px; border-style: solid;
	color:currentColor;
}
/*--------------------------*/
.sidemenubar nav.box-entry ul li{ flex:1; }
.sidemenubar nav.box-entry ul li a{
	padding: 0; font-weight: 700; font-family:'Zen+Maru+Gothic';
	display: flex; align-items: center;
	border: 1px solid; border-radius: 6px;
}
.sidemenubar nav.box-entry ul li a img{ height:3.5rem; margin-right:1rem; border-right: 1px solid; }
.sidemenubar nav li.entry a{ color: #ffffff !important; background-color: #e54234 !important; }
.sidemenubar nav li.entry_line a{ color: #ffffff !important; background-color: #06c755 !important; }





/*----------------------------------------------------
/*   アコーディオン
/* 　jQuery併用
/*   開閉の基本設定のみ
/*-----------------------------------------------------*/
.accordion-container { position: relative; width: 100%; box-sizing: border-box; } 
.accordion-title { position: relative; font-weight: 400; margin: 0; padding:8px calc( 24px + 1.5em) 8px 8px ; outline:0; cursor: pointer; }
/*
.accordion-title:hover ,
.accordion-title:active ,
.content-entry.open .accordion-title { } */
.accordion-title:after {
	content: ""; position: absolute; right: 20px; top:25%; transition: all 0.2s ease-in-out;
	display: block; width:1rem; height:1rem;
	border-width: 2px ; border-top-style: solid; border-right-style: solid ; 
	-webkit-transform: rotate(135deg); transform: rotate(135deg);
}
.accordion-title.open:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 45%; }
.accordion-content { display: none; padding-bottom: 0 ; margin-top: 0; }



/*--------------------------*/
/* レイアウト全体
/*--------------------------*/
section , aside.add{
	padding-top: calc( 40px + 2vw ); padding-bottom: calc( 40px + 2vw );
}

section { border-top-width: 1px; border-style: dotted; }
.wrap-section section{ border-top-width: 0; }

.color-sec-none ,
.color-sec-gray + section ,
.color-sec-blue ,
.color-sec-blue + section ,
.color-sec-green ,
.color-sec-green + section ,
.color-sec-green2 ,
.color-sec-green2 + section ,
.color-sec-yellow ,
.color-sec-yellow + section ,
.color-sec-orange ,
.color-sec-orange + section ,
.color-sec-red ,
.color-sec-red + section ,
.color-sec-murasaki ,
.color-sec-murasaki + section ,
.wrap-section + section ,
article section:first-child, section.no-border{ border-top-width: 0; }