<@charset "UTF-8";>

* {
  margin: 0;
}

 /* ページ設定
---------------------------------------------------------------------------*/
body {
  margin: 0; /* 隙間 */
　font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
　font-size: 14px;	/*文字サイズ*/

/*背景固定*空色グラデーション--------*/
 background:linear-gradient(to bottom, #6598f7, #a0e6ff 200px, #caffff 400px, #eeffff );
 background-attachment:fixed;
}

img {
  max-width: 100%; /* 親要素の幅に合わせて最大100%にする */
  height: auto;    /* 縦横比を維持して高さを自動調整する */
}

  


/*段落タグ設定
---------------------------------------------------------------------------*/
p {
  padding: 20px 20px 20px;	/*上、左右、下への余白*/
}



/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
  padding: 1em 1em; /* 枠の内側の余白 */
  margin: 0em 0em 0em 0em;
  color: #565656;   /*文字色*/
  width: 95%;
  max-width: 800px; /* 幅800pxを最大幅に設定し、それ以上広げない。*/
  margin: 0 auto;
  background: #ffffff;
　　}
#container p {
  margin: 0; 
  padding: 0;
　　}


 /* 固定ヘッダー
---------------------------------------------------------------------------*/
header {
  position: sticky;   /* 画面上部に固定 */
  top: 0;             /* 上からの位置 */
  z-index: 10;        /* コンテンツより手前に表示 */
  height: 50px;
  color: white;
　font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
  line-height: 1;     /* 文字の行の高さ */
  background-color: #6ad1c8;
  padding-inline: 15px;   /* 左右余白設定 */
  align-content: center;  /* 上下中央揃え */
   }

section {
  padding: 5px 15px;
  margin: 0em 0em 10em 10em;
   }



 /* ヘッダー内　メニュー
---------------------------------------------------------------------------*/
#menu-box {
 display: flex; /* 横並びにする設定 */
 margin: 0;
 border: none;
 justify-content:flex-end; /* 横並びの要素を右寄せで配置 */
　　}

#menu-box img {
  height: 20px;
}

.menu {
  padding: 0px;
  display: flex;
  justify-content:flex-end; /* 右寄せ */
  align-items: flex-end;    /* 下揃え */
　　}

.menu:first-child {  /* リストの最初だけ指定 */
  margin-right: auto; /* 左寄せ */
　　}

.menu-l {
  padding: 0px;
  display: flex;
  margin-right: auto; /* 左寄せ */
　　}




/*ページトップリンクの右下固定
---------------------------------------------------------------------------*/
html{
    scroll-behavior: smooth;　/*スムーズスクロールする*/
}
.gotop{
    display: block;
    width: 60px;
    box-sizing: border-box;
    background: #FFF;
    padding: 6px 6px 6px 6px;
    border: 1px solid #999;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
.gotop:hover{
    opacity: 1;
}
@media(max-width:600px){
    .gotop{
        width: 15%;
        padding: 8px 8px 8px 8px;
        border: 1px solid #999;
        text-align: center;
        letter-spacing: -1px;
        opacity: 1;
        border: none;
        background: rgba(255,255,255,0.8);
    text-decoration: none;
    color: #333;
    opacity: 0.5;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}






/*ボックス各種
---------------------------------------------------------------------------*/

  /*ステッチ丸角*/
.box2 {
  padding: 1em 1em; /* 枠の内側の余白 */
  margin: 2em 2em;
  color: #565656;  /*文字色*/
  background: #ffeaea;
  box-shadow: 0px 0px 0px 10px #ffeaea;
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
  width: 400px;
　}
.box2 p {
  margin: 0; 
  padding: 0;
　}


  /*あづさとちゃんbox*/
.box3 {
  padding: 0em 0em; /* 枠の内側の余白 */
  margin: 0em 0em;
  width:750px;     /* 横幅のサイズを指定    */
  color: #565656;  /*文字色*/
  background-image: url("image/adusato-chan.png"); /* 背景画像 */
  background-size: 24%;  /* 画像のサイズを指定    */
  background-position: top right; /* 右上に配置 */
  background-repeat: no-repeat;   /* 画像の繰り返しを防ぐ */
　　}
.box3 p {
  margin: 0; 
  padding: 0;
　　}


  /*透明box*/
.box4 {
  padding: 0em 0em; /* 枠の内側の余白 */
  margin: 1.5em 2em;
  color: #565656;  /*文字色*/
　　}
.box4 p {
  margin: 0; 
  padding: 0;
　　}



.box5 {
  padding: 0em 0em; /* 枠の内側の余白 */
  margin: 0em 2em;
  color: #565656;  /*文字色*/
　　}
.box5 p {
  margin: 0; 
  padding: 0;
　　}
.box5 img {
  width:100%;     /* 横幅のサイズを指定    */
　　}


.box6 {
  padding: 0em 0em; /* 枠の内側の余白 */
  margin: 0em 2em;
  color: #565656;  /*文字色*/
　　}
.box6 p {
  margin: 0; 
  padding: 0;
　　}
.box6 img {
  width:60px;     /* 横幅のサイズを指定    */
　　}









  /*画像サイズ指定
---------------------------------------------------------------------------*/

.image_box_s{
	width: 100%;
}
.image_box_s img{
	height: 40px;
}

.image_box_m{
	width: 100%;
}
.image_box_m img{
	width: 360px;	
}


.image_box_l{
	max-width: 100%;
}
.image_box_l img{
	width: 700px;
}




  /*コンテンツタイトル
---------------------------------------------------------------------------*/
.index {
  padding: 0;
  margin: 0em 0em 0em;
  width: 100%;
  height: 10px;
  background: -webkit-repeating-linear-gradient(-45deg, #ffccaa, #ffccaa 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ffccaa, #ffccaa 2px, #fff 2px, #fff 4px);

　}
.index p {
　font-size: 30px;
  margin: 0;
  padding: 0;
　}
.index img{
  height: 40px;
}



.space table{
    margin: 5px 10px;
}

.t-1 {
    border-collapse: collapse;
    border: 0;
}
    
.t-1 th{
    background: #ffccaa;
    padding:3px 15px 3px;
}
.t-1 td{
    background: #ffffe0;
    padding: 3px 15px 5px;
    border-spacing: 0;
}
.t-1 tr:nth-of-type(2n-1) td{
    background: #ffeecc;
}




 /*テーブル用コード
---------------------------------------------------------------------------*/
table {
   padding: 0;
   }

table img {
  heigt: 40px;
   }

.left {
　text-align: left;
}

.right {
　text-align: right;
}

.center {
　text-align: center;
}

.justify {
　text-align: justify;
}
.baseline {
 vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}



/* リストの設定
---------------------------------------------------------------------------*/
/* デフォルトマークをなしにする */
ul {
　list-style-type: none;
　　}
/* 任意のマーク */
li::before {
　content: "※ " ;
　　}




/*リンク設定
---------------------------------------------------------------------------*/
a {
  color: inherit; /* 親の文字色をそのまま使う */
  text-decoration: none; /* 下線を消す */
　　}
a, a:visited {
  color: inherit; /* 親の文字色をそのまま使う */
  text-decoration: none;
　　}
a:hover {
  color: #0a5148;	/*マウスオン時の文字色*/
}







/*見出し設定
---------------------------------------------------------------------------*/

h1 {
  padding: 0.5em 1em;
  margin: 0em 0em 0em;
  color: #2c2c2f;/*文字色*/
  background: #ffefad;/*背景色*/
  border-left: solid 20px #ffd700;/*左端の色と幅*/
  font-size: 30px; /* 文字サイズ */
}

h2 {
  position: relative;
  font-size: 30px; /* 文字サイズ */
  vertical-align: middle;
  line-height: 1.8; 
  top: 50%;}
h2 img{
  height: 40px;
  vertical-align: middle;
}
h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: -webkit-repeating-linear-gradient(-45deg, #ffccaa, #ffccaa 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ffccaa, #ffccaa 2px, #fff 2px, #fff 4px);
}



h3 {
  position: relative;
  font-size: 30px; /* 文字サイズ */
  line-height: 1.8; 
}
h3 img{
  height: 40px;
}
h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

h4 {
  font-size: 24px; /* 文字サイズ */
}


h5 {
  font-size: 16px;
  vertical-align: middle;
}
h5 img {
  vertical-align: middle;
  height: 40px;
}

}





/* アンダーライン設定（蛍光ペン）
---------------------------------------------------------------------------*/
.under-h {
  background: linear-gradient(transparent 50%, #4ab1a8 50%);
}

/* スペース設定 
---------------------------------------------------------------------------*/
.space-l{
  margin-left: 5px;　/* 文章の左にスペース */

  }





/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){



/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
  padding: 2% 2% ; /* 枠の内側の余白 */
  margin: 0em 0em 0em 0em; /* 枠の外側の余白 */
  width: 98%;
  color: #565656;  /*文字色*/
  margin: 0 auto;
  background: #ffffff;
　　}
#container p {
  margin: 0; 
  padding: 0;
　　}


 /* 固定ヘッダー
---------------------------------------------------------------------------*/
header {
  position: sticky;   /* 画面上部に固定 */
  top: 0;             /* 上からの位置 */
  z-index: 10;        /* コンテンツより手前に表示 */
  height: 100px;
  color: white;
  line-height: 1;
  background-color: #6ad1c8;
  padding-inline: 15px;
  align-content: center;    /* 上下中央揃え */
   }
section {
  padding: 5px 15px;
  margin: 0em 0em 10em 10em;
   }

 /* ヘッダー内　メニュー
---------------------------------------------------------------------------*/
#menu-box {
 display: block;	/*メニューを「横並び」から「縦並び」に変更する設定*/
 margin: 0;
 border: none;
 justify-content:flex-end; /* 横並びの要素を右寄せで配置 */
　　}

.menu {
  padding: 2px;
  display: flex;
  justify-content:flex-end; /* 右寄せ */
　　}

.menu:first-child {  /* リストの最初だけ指定 */
  margin-right: auto; /* 左寄せ */
　　}	



/*ボックス各種
---------------------------------------------------------------------------*/


  /*ステッチ丸角*/
.box2 {
  padding: 1em 1em; /* 枠の内側の余白 */
  margin: 0em 0em;  /* 枠の外側の余白 */
  color: #565656;  /*文字色*/
  background: rgba(255, 234, 234, 0.9);
  box-shadow: 0px 0px 0px 10px rgba(255, 235, 235, 0.9);
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
  width: 90%;
  max-width: 400px; /* 最大幅を設定し、それ以上広げない。*/
  font-size: 90%;
　}
.box2 p {
  margin: 0; 
  padding: 0;
　}


  /*あづさとちゃんbox*/
.box3 {
  padding: 0em 0em; /* 枠の内側の余白 */
  margin: 0em 2%;  /* 枠の外側の余白 */
  width:95%;     /* 横幅のサイズを指定    */
  color: #565656;  /*文字色*/
  background-image: url("image/adusato-chan-wink.png"); /* 背景画像 */
  background-size: 26%;  /* 画像のサイズを指定    */
  background-position: top right; /* 右上に配置 */
  background-repeat: no-repeat;   /* 画像の繰り返しを防ぐ */
　　}
.box3 p {
  margin: 0; 
  padding: 0;
　　}


  /*透明box*/
.box4 {
  width: fit-content;
  padding: 1% 1%; /* 枠の内側の余白 */
  margin: 1em 2%; /* 枠の外側の余白 */
  color: #565656;  /*文字色*/
  border-radius: 8px;
  background: rgba(255,255,255,0.8);
  font-size: 100%;
　　}
.box4 p {
  margin: 0; 
  padding: 0;
　　}




  /*画像サイズ指定
---------------------------------------------------------------------------*/

.image_box_m{
	width: 100%;
}
.image_box_m img{
	width: 45%;	
}


.image_box_l{
	width: 100%;
}
.image_box_l img{
	width: 95%;
}



/*見出し
---------------------------------------------------------------------------*/

h1 {
  padding: 0.3em 0.5em;
  margin: 0em 0em 0em;
  color: #2c2c2f;/*文字色*/
  background: #ffefad;/*背景色*/
  border-left: solid 20px #ffd700;/*左端の色と幅*/
  font-size: 26px; /* 文字サイズ */
}






}