﻿* {
	padding: 0px;
	margin: 0px;
} 

* {
	font-family: "メイリオ",sans-serif;
}

body {
	background-image: url(img/msmLogo3.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;      
	background-color: #ffff00;
}

a.mail:link {
        font-family: Times New Roman;
	font-size: 20px;
	color: #1e90ff;
}

a.mail:hover {
	color: #ff0000;
}


a:link {
	color: #1e90ff;
}

a:hover {
	color: #ff0000;
}

a:active {
	color: #ffffff;
}

a.info:link { 
	color: #ffffff;
}

a.info:visited {
	color: #ffff00;
}

a.info:hover {
	color: #000000;
}

a.info:active {
	color: #ff0000;
}


#top {
	padding-top: 150px;
	padding-bottom: 170px; /*スクールニュースを下げるときは+XXpx */
	white-space: nowrap;
}

#menubox {
	vertical-align: top;
}

#menu {
	width: 280px;
	height: 850px;
	background-image: url(img/CA280020.jpg);
	background-position: 50% -100px;
	background-repeat: no-repeat;
	border-width: 3px;
	border-style: solid;
	border-right-color: #d9d9d9;
	border-left-color: #666666;
	border-bottom-color: #d9d9d9;
	border-top-color: #666666;
}

.menutop {
        font-family: Times New Roman;
	font-size: 28px;
	font-style: italic;
	color: #FFFFFF;
	background-color: #FF9900;
	font-weight: 600;
	text-align: center;
	padding-top: 5px;
	margin: 15px;
} 

.menutitle {
	font-family: Comic Sans MS;
	font-size: 24px;
	color: #ffff00;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 20px;
text-align: left;
}





.menufooter {
	font-family: Comic Sans MS;
	font-size: 12px;
	color: #ffffff;
	line-height: 1.5;
	margin-left: 20px;
	margin-top: 200px;
	margin-bottom: 50px;
text-align: left;
}

.info {
	font-size: 18px;
	color: #ffffff;
	line-height: 1.5;
	font-weight: bold;
	amargin-left: 20px;
	margin-top: 40px;
	margin-bottom: 40px;
}

#contents {
	vertical-align: top;
}

#contentsinbox {
	awidth: 240px;
	afont-family: "メイリオ";
	afont-size: 16px;
	aline-height: 1.5;
	acolor: #330000;

	background-color: #ffffaa;
	border-width: 3px;
	border-style: solid;
	border-right-color: #d9d9d9;
	border-left-color: #666666;
	border-bottom-color: #d9d9d9;
	border-top-color: #666666;

	padding: 15px;
	width: 90%;
margin-right: 0px;
margin-left: 5px;
	height: 472px;
	overflow-y:scroll;
	font-family: "メイリオ";
	font-size: 13px;
	line-height: 1.4;

}

.contents {
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

#rightbox {
	vertical-align: top;
}

#inbox {
	background-color: #ffffaa;
	border-width: 3px;
	border-style: solid;
	border-right-color: #d9d9d9;
	border-left-color: #666666;
	border-bottom-color: #d9d9d9;
	border-top-color: #666666;
	padding: 15px;
	width: 85%;
margin-right: 0px;
margin-left: 5px;
	height: 820px;
	overflow-y:scroll;
	font-family: "メイリオ";
	font-size: 13px;
	line-height: 1.4;
}

.rightboxtitle {
	font-family: "メイリオ";
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #FF9900;
	padding: 2px;
	margin: 2px;
	text-align: center;
}

#footer {
	width: 100%;
	font-size: 14px;
	padding: 10px;
	background-color: #000000;
	color: #ffffff;
}

.footer {
	font-family: "メイリオ";
	font-size: 14px;
	line-height: 1.4;
	color: #ffffff;
        font-style: italic;
	font-weight: 600;
	margin: 20px;
}


h1 {
	font-size: 32px;
	font-style: italic;
	font-weight: 500;
	text-align: center;
	line-height: 1.2
}

h2 {
	font-size: 26px; 
	font-family: Comic Sans MS;
	color: #000099;
	font-style: italic;
	font-weight: 700;
	text-align: center;
	line-height: 1.5
}

.addtel {
	font-family: メイリオ;
	font-size: 18px;
	font-style: italic;
	color: #dd0077;
	font-weight: bold;
	text-align: center;
	line-height: 1.5
}

.mail {
	font-size: 18px;
	font-family: Times New Roman;
	font-weight: bold;
	color: #330000;
	text-align: center;
	line-height: 1.3
}

font {
	color: #ff0000;
	font-weight: bold;
}

#fontdel {
	text-decoration: line-through;
}

hr {
	border-color: #66cc99;
	border-top-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-right-style: none;
	border-width: 2px;
	margin-left: 5px;
	margin-right: 5px;
}

#std table{
position: relative;
width: 70%;
left:15%; /*左からの位置*/
border:1px solid #0033cc; /*ボーダー*/
text-align: center;
}

#movei-contents {
  position: relative;
  display: inline-block;
  awidth: 100%;
  aspect-ratio: 4 / 3; /* 横16:縦9の比率 */
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 0px -10px;
  display: block;

}

.insta {
  float: right;
}

    .responsive-iframe {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 のアスペクト比 */
      display: none; /* 初期状態では非表示 */
    }

    .responsive-iframe iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1;
    }

    .link-button {
      display: inline-block;
      margin: 10px 0;
      color: orange;
      cursor: pointer;
      text-decoration: underline;
      transition: all 0.3s ease;
 
   }
    .link-button:hover {
      color: #ff0000; /* ホバー時の文字色を変更 */
      text-decoration: none; /* 下線を消す（任意） */
      transform: scale(1.05);
   }

a.menulink {

      display: inline-block;
      color: yellow;

	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	line-height: 2.1;
	margin-left: 20px;
text-align: left;
      text-decoration: underline;
      transition: all 0.3s ease;
} 

.menulink:visited {
      color: #ffffff;
}
.menulink:hover {
      color: #ff0000; /* ホバー時の文字色を変更 */
      text-decoration: none; /* 下線を消す（任意） */
      transform: scale(1.05);
}
.menulink:active {
      color: #000000;
}



    .responsive-box {
      position: relative;
      width: 100%;
      padding-top: 75%; /* 4:3 の縦横比（高さ = 幅 × 0.75） */
      background-color: #000000;
    }

    .responsive-box img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 必要に応じて contain に変更可能 */
    }

    .triangle {
      font-size: 1.8em; /* 通常の文字より大きく */
      vertical-align: middle; /* テキストと高さを揃える */
      margin-right: 5px; /* テキストとの間隔 */
      text-decoration: none; /* ← 下線を消す */
      color: orange;
      display: inline-block;
    }

    /* 点滅アニメーション */
    .blink {
      animation: blinkAnim 1s ease-in-out infinite;
    }

    @keyframes blinkAnim {
      50% {
        opacity: 0;
      }
    }


    .responsive-text-frame {
      width: 100%;
      height: 100px;
      border: none;
      background-color: #000000;
      font-family: sans-serif;
    }



