@charset "UTF-8";
/* すべてのページに適用される */
html {font-family: sans-serif;}
html * {box-sizing: border-box;}

body      {margin: 0 0 0 0 ; color: #000000; background-color: #f0ffff; width=600px}
.wrapper{margin: 0 auto 0 auto; max-width:960px;}
.att {color: #0099ff}

/* -------------------------------- */
/* ▼すべてのページに適用されるーヘッダーー */
/* -------------------------------- */
.logo {margin: 50px 0 40px 0; line-height: 0; text-align: center;}
/* -------------------------------- */
/* ▼見出しのフォントと画像の大きさ */
/* -------------------------------- */
h1          {color: #0099ff}
h2          {color: #000000}
h3          {color: #000000}
p           {line-height: 1.6;}
h4           {color: #000000}
h5           {color: #000000}
img {max-width: 100%; heignt: auto;}
/* -------------------------------- */
/* ▼リンクの色 */
/* -------------------------------- */
a:link {
color:#0099ff;
}
a:visited { /*アクセスしたことのあるリンク*/
color:#6600ff;
}
a:hover {
color:#ff0033;
text-decoration:underline;
}
a:active {
color:#ff0000;
}
/* -------------------------------- */
/* ▼フォントサイズ */
/* -------------------------------- */
html {
 font-size: 10px;
}
body {
 font-size: 1.6rem;
}
h1 {
 font-size: 2.8rem; 
}
h2 {
 font-size: 2.4rem; 
}
h3 {
 font-size: 2.2rem; 
}
h4 {
 font-size: 2.0rem; 
}
h5 {
 font-size: 1.8rem; 
}
h6 {
 font-size: 1.6rem; 
}


/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.navigation {
    margin-left: 0;
    padding-left: 0;
    background-color: #228b22;
    padding: 3px 20px;
    text-align: center;
    }

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.navigation li {
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.navigation a {
   background-color: #228b22; /* メニュー項目の背景色(Forestgreen) */
   color: #33ffff;              /* メニュー項目の文字色(空色) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.navigation a:hover {
   background-color: #228b22; /* メニュー項目にマウスが載ったときの背景色(Forestgreen) */
   color: #ffff33;            /* メニュー項目にマウスが載ったときの文字色(黄色）) */
}

/* ▼サブメニューは、とりあえず非表示にしておく */
ul.navigation ul {
   display: none;        /* ★5:非表示にする */
}
/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.navigation ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position: absolute;  /* ★4:絶対配置にする */
}
/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.navigation li:hover ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}
 

/* ---------------------------------- */
/* ▼サブメニューが重ならないようにする*  /5ではなくもっと小さい数字にしてもよいかもしれない*/
/* ---------------------------------- */
.premier {position: relative; z-index:5;}

/* ------------------------------- */
/* ▼ お知らせボックスで背景を塗りつぶす
/* --------------------------------*/
.boxofnews{
margin: 40px;
padding: 15px;
max-inline-size: max-content;
 margin-inline: auto;
 font-size: 1.6rem;
border: 2px solid #0099ff;
}

/* ------------------------------- */
/* ▼ 目次を文字は左寄せ全体は中央
/* --------------------------------*/

.boxoftoc{
 max-inline-size: max-content;
 margin-inline: auto;
 font-size: 1.6rem;
 border: 1px solid #0099ff;
 }
.boxoftoc li{
list-style: none;
.padding-left: 0;
}
.boxoftoc a{text-decoration: none;
}
/* ------------------------------- */
/* ▼ すべてのページで下線を消す
/* --------------------------------*/

a{text-decoration: none;
}
/* ----------------------------- */
/* ▼画像とテキストを横に並べる */
/* ----------------------------- */
.photoexplication {
   display: flex;
   border-bottom: 1px dashed #bec2c7;
   padding: 20px 8px;
}
.tamaphoto {
   margin-right: 16px;
   flex: 1 1 auto;
}
.tamaexplication {
   flex: 0 0 336px;
}

.title {text-align: center;}
/* -------------------------------- */
/* ▼画像にテキストを回り込ませる  */
/* -------------------------------- */
.tamaphoto {
   float: left;
   padding: 0 1em 1em 0;
}

/* ----------------- */
/* ▼ 回り込み解除
/* ------------------*/
.clear { 
  clear: both;
}


/* ----------------- */
/* ▼ 傍点
/* ------------------*/

.emphasis{
 text-emphasis: sesame;
 -webkit-text-emphasis: sesame;
}

/* ----------------------------- */
/* ▼ スマートフォン向けCSS 
/* ----------------------------- */
@media (max-width: 767px){
  /* 全体　-　ナビゲーション */
  .wrapper {
    margin: 0 8px;
  }
  .profile img  {
     width: 200px;
  }
  .nav {
    background-color: #228b22;
}
  .nav li {display: block;}
html {
 font-size: 10px;
}
body {
 font-size: 1.8rem;
}
h1 {
 font-size: 2.0rem; 
}
h2 {
 font-size: 1.8rem; 
}
h3 {
 font-size: 1.8rem; 
}
h4 {
 font-size: 1.8rem; 
}
h5 {
 font-size: 1.8rem; 
}
h6 {
 font-size: 1.8rem; 
}
/* ----------------------------------------------- */
/* ▼ photoexplicationスマートフォンでの写真とテキスト横並び解除
/* ------------------------------------------------*/
.photoexplication {
  display: block;
}
.tamaphoto {
  margin-right: 0;
  width: 100%;
}
.tamaexplication {
  width: 100%;
}
}