@charset "utf-8";



#wrap {
	width: 100%;
}

#header img{
	width: 30px;
}

#headimage{
	width: 100%
}

.zzz{
	width: 100%;
}


#main {
	width: 100%;
}

#dropmenu{
	width: 100%;
	height: 40px;
}

#topinfo {
	width: 100%;
}


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

#main #info {
	width: 100%;
}

#main #sideinfo {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#info table {
	width: 100%;
}

#info table tr #date {
	width: 25%;
}

.subject p {
    width:		100%;
	font-size:	150%;
	font-weight: bold; /*太字に*/
	text-align:	center;
	bottom:		50%;
	margin:		0;
	padding:	0;
	color:		#fff;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
  }
.subject {
	width: 23.2%;
	margin-right: 2.4%;
}

#main #content {
	width: 67%;
}

#sidebar {
	width: 25%;
}

.gmaps {
position: relative;
padding-bottom: 75%; /*これが縦横比*/
height: 0;
overflow: hidden;
}
.maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.gcalender {
position: relative;
padding-bottom: 75%; /*これが縦横比*/
height: 0;
overflow: hidden;
}
.gcalender iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

#footer{
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}



.dropmenu-hidden-tablet {
    display: none !important;
}

#content p img {
	width: 47%;
	margin-right: 2%;
}

.blst li {
	width: 47%;
}

.spinfo {
        width: 100%;
	height: auto;
}


.spinfo p {
	width:		100%;
	font-size:	150%;
	font-weight: bold; /*太字に*/
	text-align:	center;
	bottom:		50%;
	margin:		0;
	padding:	0;
	color:		#fff;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
  }

/* ========================================
   iPad・タブレット用 ハンバーガーメニュー
   768px ～ 949px
   ======================================== */


/* ========================================
   ヘッダー
   ======================================== */

#header {
    position: relative;
    min-height: 60px;
    background: #ffffff;
    border-bottom: 1px solid #d5dfda;
    box-sizing: border-box;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 60px;

    padding: 8px 70px 8px 15px;

    box-sizing: border-box;
}


/* ========================================
   学校名
   ======================================== */

.school-name {
    margin: 0;
    padding: 0;
}

.school-name a {
    display: flex;
    align-items: center;

    color: #29332f;
    text-decoration: none;
}

.school-name img {
    width: 36px;
    height: auto;

    margin: 0 10px 0 0;
}

.school-name-text {
    display: flex;
    flex-direction: column;

    line-height: 1.25;
}

.school-name-main {
    display: block;

    font-size: 18px;
    font-weight: bold;

    white-space: nowrap;
}

.school-name-sub {
    display: block;

    margin-top: 2px;

    font-size: 13px;
    font-weight: normal;

    color: #66736d;
}


/* ========================================
   ハンバーガーボタン
   ======================================== */

#menu-button {
    display: block;

    position: fixed;
    top: 8px;
    right: 12px;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 10px;

    border: 0;
    background: transparent;

    box-sizing: border-box;

    cursor: pointer;

    z-index: 2100;
}

#menu-button span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: #29332f;

    transition:
        transform .3s ease,
        opacity .3s ease,
        background .3s ease;
}


/* メニューOPEN時は × にする */

body.menu-open #menu-button span {
    background: #ffffff;
}

body.menu-open #menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.menu-open #menu-button span:nth-child(2) {
    opacity: 0;
}

body.menu-open #menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ========================================
   メニューOPEN時 背景
   ======================================== */

body.menu-open {
    overflow: hidden;
}

body.menu-open::before {
    content: "";

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.45);

    z-index: 1800;
}


/* ========================================
   右側ドロワーメニュー
   ======================================== */

#navi {
    position: fixed;

    top: 0;
    right: -360px;

    width: 340px;
    max-width: 82%;

    height: 100vh;
    height: 100dvh;

    margin: 0;
    padding: 64px 0 30px;

    box-sizing: border-box;

    background: #202624;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    z-index: 2000;

    transition: right .35s ease;
}


/* 開いた状態 */

body.menu-open #navi {
    right: 0;
}


/* ========================================
   親メニュー
   ======================================== */

#dropmenu {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    list-style: none;
}

#dropmenu > li {
    position: relative;

    float: none;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    text-align: left;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);

    background: transparent;

    box-sizing: border-box;
}

#dropmenu > li > a {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 17px 52px 17px 22px;

    box-sizing: border-box;

    background: transparent;

    color: #ffffff;

    font-size: 15px;
    font-weight: normal;
    line-height: 1.5;

    text-align: left;
    text-decoration: none;
}


/* PC版のhoverを打ち消す */

#dropmenu > li:hover > a {
    background: transparent;
    color: #ffffff;
}


/* ========================================
   ＋ / －
   ======================================== */

#dropmenu > li:has(ul) > a::after {
    content: "＋";

    position: absolute;

    top: 50%;
    right: 22px;

    transform: translateY(-50%);

    color: #ffffff;

    font-size: 21px;
    font-weight: 300;
    line-height: 1;
}

#dropmenu > li.open > a::after {
    content: "－";
}


/* ========================================
   子メニュー
   ======================================== */

#dropmenu li ul {
    display: none;

    position: static;

    top: auto;
    left: auto;

    width: 100%;

    margin: 0;
    padding: 0;

    background: #29312e;

    list-style: none;

    border: 0;
}


/* タップした項目だけ開く */

#dropmenu li.open > ul {
    display: block;
}


/* 子メニュー各項目 */

#dropmenu li ul li {
    float: none;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: visible;

    background: transparent;

    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);

    transition: none;
}


/* 子メニューリンク */

#dropmenu li ul li a {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 16px 25px 16px 38px;

    box-sizing: border-box;

    background: transparent;

    color: #dce5e0;

    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;

    text-align: left;
    text-decoration: none;
}

#dropmenu li ul li a:hover {
    background: rgba(255,255,255,.06);
    color: #ffffff;
}


/* ========================================
   タブレットでは MORE を非表示
   ======================================== */

.dropmenu-hidden-tablet {
    display: none !important;
}


/* ========================================
   堺のまちで学ぶ
======================================== */

@media screen and (min-width: 768px) and (max-width: 949px) {

  .sakai-learning {
    margin: 44px auto 40px;
    padding: 0 24px;
  }

  .sakai-learning-heading h2 {
    font-size: 27px;
  }

  .sakai-learning-heading p {
    font-size: 15px;
  }

  .sakai-learning-photos {
    gap: 12px;
  }

  .sakai-learning-photo img {
    height: 130px;
  }

  .sakai-learning-bottom {
    margin-top: 12px;
  }

  .sakai-learning-keywords {
    font-size: 14px;
  }

  .sakai-learning-link {
    font-size: 14px;
  }

}


/* ========================================
   学び・授業
   選択科目 タブレット
   ======================================== */

.school-feature {
    display: block;
}

.school-feature .school-feature-text {
    width: 100%;
    max-width: none;
}

.learning-fields {
    width: 100%;
    min-width: 0;
    margin-top: 24px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    padding: 24px 20px;

    background: #f3f7f4;
    box-sizing: border-box;

    flex: none;
}

.learning-field {
    padding: 0 18px;
}

.learning-field + .learning-field {
    border-left: 1px solid #cbd9d0;
}

.learning-field h3 {
    font-size: 15px;
}

.learning-field p {
    font-size: 13px;
    line-height: 1.8;
}

/* 学び・授業 iPad用 強制上書き */

.school-feature {
    display: block !important;
}

.school-feature .school-feature-text {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

.learning-fields {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 24px !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    padding: 24px 20px !important;

    flex: none !important;
}

.graduation-section {
    display: block !important;
}

.graduation-section .school-feature-text {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

.graduation-flow {
    width: 100% !important;
    margin-top: 24px !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    flex: none !important;
}