@charset "UFT-8";

/* Add below content. */
* {
    box-sizing: border-box;
}

/* スクロールをスムーズにする */

html {
  scroll-behavior: smooth;
}

body{
/*	background:url(img/bg.jpg) top left repeat-x; */
	padding:0px;
	margin:0px;
}

body,td,h1{
	line-height:140%;
}

/* ==========================================
   外枠・ラッパー
   ========================================== */

.wrapper{
      width : 80%;
      margin : 0 auto;
}

/* ==========================================
   ヘッダー・タイトル
   ========================================== */
  #header{
      align-items : center;
      height : auto;
      margin : 0;
      padding : 0;
  }

  #titlebox{
      width  : 100%;
      height : 200px;
      text-align : left ;
      padding-left : auto;
      display : flex;
      justify-content : left;
      align-items : flex-start;
      background-image: url('./img/top-base.jpg'); /*学校毎に拡張子に注意*/
      background-size : 100% 100%;
      border-radius : 10px;
  }

@media screen and (max-width : 767px) and (orientation: portrait){
    #titlebox{
	height : 100%;
    }
}

  #title > a {
      text-decoration : none;
      color : white;
  }
      
  #subtitle{
      font-size : 2rem;
      padding : 0;
      margin : 10px 0 5px 20px;
      line-height : 1;
  }
  
  #title{
      font-family : sans-serif;
      font-weight : 800;
      font-size : 3rem; /* This size is 64px when base font size is 16px */
      color : white;
      line-height : 1; /* this attribute is important for large size text place inside a div box */
      /*    margin-top : calc((200px - 128px)/2); */
      margin : 5px calc(100% / 80);
  }

  #title-prefix{
      font-family : sans-serif;
      font-weight : 800;
      font-size : 0.5em; /* This size is 64px when base font size is 16px */
      color : white;
      line-height : 1; /* this attribute is important for large size text place inside a div box */
      /*    margin-top : calc((200px - 128px)/2); */
      margin : 5px calc(100% / 80);
  }

  /* ========================================
     header〜main_titleまでをつつんで、上部に固定する
     ======================================== */
  /* --- ヘッダーの滑らかな非表示アニメーション --- */
  #headerWrapper {
      background-color : white;

    /* 高さ(max-height)と透明度(opacity)を0.4秒かけて滑らかに変化させる */
    transition: max-height 0.4s ease, opacity 0.4s ease;
    
    /* 開いている時の状態 */
    max-height: 600px; /* ※ヘッダーの実際の高さより少し大きめの数字にしておきます */
    opacity: 1;
    overflow: hidden;  /* 縮んでいくときにはみ出た部分を隠す */
}

/* jsで 'is-hidden' クラスが付いた時の状態 */
#headerWrapper.is-hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none; /* 透明になっている間は、誤ってクリックされないようにする */
}
 
  /* ========================================
   カルーセル・画像
   ========================================= */	
  /* carousel.cssを参照 */
  
/* =========================================
   メインコンテンツ・サブページ
   ========================================== */

  
  /* css3.css の修正 */
#maincontent {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: calc(100vh - 60px);  ← 削除、または height: auto; に変更 */
    height: auto; 
    margin: 0;
    /* overflow: hidden; ← 削除、または overflow: visible; に変更 */
    overflow: visible; 
}

iframe.blog {
    width: 100%;
    height: 100%; /* 親要素の高さ（画面いっぱい）に合わせる */
    border: none;
}

/* 親ページのフッターは、ブログ画面のときは画面外に押し出すか、
   他の単体ページ（概要など）の時のためにそのまま残しておいても干渉しません */
footer {
    width: 80vw;
    margin: 10px auto;
}

.main_box{
    /*	width:540px; */
    width : calc(80vw - 220px);
    margin:0px 0px 40px 0px;
}

.main_title{
    width : 100%;
    height : 2.5rem;
    gap : 0 1rem;
    display : flex;
    align-items : center;
    font-family : sans-serif;
    font-weight : bold;
    background-color : skyblue;
    border : 1px solid transparent;
    border-radius : 5px;
    padding : 0 1rem;
}

.main_title span{
    line-height : 2;
}

.info_title{
	font-weight:bold;
	font-size:105%;
	color:#003063;
}

/* ====================================
   カレンダー
   ===================================== */

.event_table{
	margin-bottom:30px;
}

.day{
	width:30px;
	text-align:center;
	background-color:#e5e5e5;
	padding:4px;
}

.event{
	width:400px;
	text-align:center;
	background-color:#e5e5e5;
	padding:4px;
}

.td{
	padding:4px;
	text-align:center;
}

.td2{
	padidng:4px;
}

.td_month{
	padding:4px;
	text-align:center;
	width:30px;
}

.td2_month{
	paddidng:4px;
	width:420px;
	line-height:140%;
}

/* ===================================
   年間行事予定
   =================================== */

.event_year_list ul{
	padding:20px 0px 60px 10px;
	margin:0px;
	list-style:none;
	}

.event_year_list li{
	padding:0px;
	margin:0px;
	float:left;
	width:80px;
	border-right:1px dotted #666666;
	text-align:center;
}

.event_year{
	border-left:3px solid black;
	border-bottom:1px solid black;
	padding:4px;
	font-weight:bold;
	width:520px;
	margin-left:10px;
	margin-bottom:10px;
}

/* ================================
   学校概要
   ================================ */

.gaiyou_table{
	width: min(500px ,100%);
	background-color:#999999;
	margin-bottom:20px;
	border : 1px solid lightblue;
}

.gaiyou_td1{
    width:1%;
    white-space : nowrap;
    /* width : 1%;とwhite-spage : nowrap;はテーブルで使う魔法の組み合わせ */
    text-align:justify;
    text-align-last : justify;
    padding:4px;
    background-color : gray;
    color : white;
}

.gaiyou_td2{
	width:calc(100vw - 100px);
	padding:4px;
	background-color : #dcdcdc;
}


/* headline */    
.gaiyou__title,.headline{
    font-weight : bold;
    background-color : #ffd7ff;
}

.gaiyou__title,.headline::before{
    content : "🏫";
}

.gaiyou__subject{
    background-color : #d7ffd7;
}

.gaiyou__context{
    font-size : 1rem;
    white-space : normal;
    line-height : 2rem;
    background-color : #dcdcdc;
}

.gaiyou__context ol{
    list-style : decimal;
    list-style-position : inside;
}

/* =====================================
   沿革
   ===================================== */

.enkaku_table{
    background-color:#999999;
    /*    width : min(600px, 100%); */
    width : 90%;
    height :auto;
}

.enkaku_th{
    background-color : darkseagreen;
    text-align : left;
    padding : 0 1rem;
}

.enkaku_td1{
	background-color : #e5e5e5;
	width : 10rem;
	min-width : 100px;
	padding : 4px;
	font-size : 1em;
	text-align : right;
}

.enkaku_td2{
	background-color:white;
	width:fit-content;
	max-width : 500px;
	padding:4px;
	font-size: 1em;
	text-align : left;
}

/* ----- 自動生成する沿革用 -------- */

#history{
    position : sticky;
    top : 65px;
    background-color : white;
}

#history button span, #history label span{
    font-size : 1rem;
}

@media screen and (max-width : 736px){
    #history button span, #history label span{
	font-size : 0.8rem;
	display: inline-block; /* または block */
	width: min-content;    /* 最小のコンテンツ幅に合わせる（空白で改行される） */
	
	/* ※日本語テキストの場合、文字の途中で不自然に改行されるのを防ぐ */
	word-break: keep-all;
    }
}



.history-timeline {
    border-left : 2px solid blue;
    max-width: 800px;
    margin: 2em auto;
}

.history-timeline dt {
  font-weight: bold;
  color: #1a73e8;
  margin-top: 1.5em; /* 各項目の間隔 */
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 4px;

  &::before{
      content : 'ー';
      color : red;
  }
}



.history-timeline dd {
    margin: 0.5em 0 0 0; /* 左のインデントをリセット */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    line-height: 1.6;
    text-indent : 0.5rem;
}


/* --- 校章 --- */

.kosyo{
    text-align: left;
    white-space:pre-wrap;
}

.kosyo > span{
    font-size : 1.5rem;
}

@media screen and (max-width : 736px){
    .enkaku_td1{
	font-size : 0.5rem;
    }

    .enkaku_td2{
	font-size: 0.5rem;
    }

    .kosyo > span{
	font-size : 1rem;
    }
}


/* ==================================
    学校報
   ================================== */

.gakkouhou{
    width : min(500px, 95%);
    border : 1px solid lightblue;
    margin: 1rem auto;
}

.gakkouhou caption{
    heigth : 2rem;
    line-height : 2rem;
    background-color : #008080;
    height : 2rem;
    color : white;
}

.gakkouhou th{
    text-align : left;
    padding : 0 1rem;
}

.gakkouhou tr{
    height : 2rem;
}

.gakkouhou td{
    border : 1px solid lightblue;
}

.gakkouhou td:has(a){
    background-color : bisque;
}

.gakkouhou td:has(a):hover{
    background-color : sandybrown;
    color : white;
}


/* ===================================
   PDF wrapper  Kato wrote in 2024
  ==================================== */

.pdfwrapper {
    width : 100%;
    height : 100vh;
}

.pdf {
    width: 100%;
    height: 100vh;
    background-color: white;
    /* margin-right: 10px;  ← 隙間の原因になるので削除または 0 にする */
    border: none;           /* iframe特有の枠線を消す */
    display: block;         /* 下部にできるわずかな隙間を防ぐ */
}

@media (max-width : 414px){
    .pdfwrapper{
        width: 100vw;
        height: 300px;
        /* スマホ時も余白をなくす場合は以下を削除 */
        /* padding-right: 10px; */
        /* padding-left: 10px; */
    }
    .pdf{
        width: 100%;
    }
}


/* ==================================
   カレンダー用
   ================================== */

iframe.calender{
    width : 100%;
    height : 800px;
    border : none;
    padding-right : 20px;
}

#cal2{
    display : none;
}


@media (max-width : 414px){
    iframe.calender{
	padding-right: 10px;
	padding-left : 10px;
    }

    #cal1{
	display : none;
    }
    #cal2{
	display : block;
    }

    .calhead{
	width : 100%;
    }
}


/* =======================================
   Granddesign
  ======================================== */
iframe.granddesign{
    width : calc(80vw - 238px);
    height: 500px;
    margin-bottom : 20px;
}


@media screen and (max-width : 700px){
    iframe.granddesign{
	width : 100%;
	height: 500px;
	margin-bottom : 20px;
	
    }
}


/* ===================================
   Song
   =================================== */
#song>img{
    width : calc(100% - 40px);
    padding : 20px;
    object-fit : contain;
}

/* ===================================
   校歌 (Song Lyrics)
   =================================== */
.song-container {
    margin: 30px 15px;
    color: #333333; /* 真っ黒ではなく濃いグレーで読みやすく */
    font-family: "Yu Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; /* 落ち着いた明朝体 */
}

.song-title {
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.song-author {
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: #555555;
}

.song-lyrics {
    border-collapse: separate;
    border-spacing: 0 35px; /* ここで「一番」と「二番」の間の余白を調整 */
}

.song-lyrics tr{
    background-color : bisque;
}

.song-lyrics .verse-num {
    vertical-align: top;
    width: 40px;
    font-weight: normal;
    font-size: 1.2rem;
    color: #003063; /* info_titleと同じ色にして統一感を出す */
}

.song-lyrics .verse-text {
    line-height: 2.2; /* 歌詞の行間を少し広めに取って読みやすく */
    letter-spacing: 0.05em; /* 文字と文字の間を少し開ける */
    font-size: 1.05rem;
}

.piano::before{
    content : "🎹";
}

/* スマホ表示時の調整 */
@media screen and (max-width : 736px) {
    .song-lyrics {
        border-spacing: 0 25px; /* スマホでは段落の余白を少し詰める */
    }
    .song-lyrics .verse-num {
        width: 30px;
    }
}

  
/* ==================================
   フッター
   ================================== */
  footer{
      width : 80vw;
      margin : 10px auto;
  }

  /* =================================
     メディアクエリ
     ================================= */
  
  @media screen and (max-width : 736px){
      .wrapper{
	  width : 100%;
	  margin : 0;
      }
      
      #header {
	  width : 100vw;
	  height : 100px;
      }
      
      .headerimg{
	  width : calc(100% / 3);
	  object-fit : cover;
      }

      #title{
	  font-size : 1.4rem;
	  margin : 20px 10px;
      }
      
      #maincontent{
	  width : 100%;
	  overflow : clip;
	  margin : 0 auto;
      }

      footer{
	  width : 100%;
      }
  }
ikomanko
   @media screen and (max-width : 390px){
      #title{
	  font-size : 1.2rem;
      }

      #pdfwrapper{
	  height : 300px;
      }
   }

   @media screen and (max-width : 375px){
      #title{
	  font-size : 1rem;
      }
  }

  /* 印刷用設定 */

   @media print {
       #header , #gallery ,#mainmenu , footer , .no_print{
	   display : none;
       }
   }

   @page {
       size : A4 portrait;
   }