/* ボディ */
body
{
  margin                : 0;        /* スペース */
  padding               : 0;        /* 余白 */
  font-size             : 15px;     /* 文字サイズ */
  line-height           : 1.618;    /* 行の高さ */
  /*background           : #000;*/
}


/* メインメニュー */
.main_menu{
  display               : flex;
  justify-content       : center;   /* flexの位置設定 */
  height                : 80px;
  background-color      : white;
}

/* バナー */
div.top_banner img.top_banner{
  position              : absolute;
  top                   : 10px;
  height                : 60px;
  width                 : 100px;
}


/* メニュー */
/* ul ⇒ unordered list（順序がないリスト） */
/* リストの各項目は<li>で記述 */
.menu{
  padding-inline-start  : 120px;   /* 左側の内側余白 */
  margin                : 10px;    /* 外側余白 */
  display               : flex;    /* リストを横並びにする */
  list-style            : none;    /* リスト項目の黒丸を消す */
  justify-content       : left;    /* アイテムを左寄せ */
}

/* リスト項目 */
.menu_item{
  padding               : 5px;    /* 内側余白 */
  margin                : 5px;    /* 外側余白 */
  /*border-radius         :  5px; */   /* 角丸指定 */
}

/* ページにあるaタグ全てに対し下線を消す */
a {
  text-decoration       : none;
}
/* ページにあるaタグ全てに対しカーソルが当たった際に下線を表示する */
a:hover {
  text-decoration       : underline;
}


.sub_menu {
    height              : 400px;
    display             : flex;
    justify-content     : center;  /* flexの位置設定 */
}

.image img {
    margin-top          : 20px;
    width               : 300px;
    height              : 300px;
    box-shadow          : 0 0 8px #eeeeee;
    border-radius       : 10px;
}

.prof {
    margin-top          : 20px;
    margin-left         : 20px;
    width               : 400px;
    height              : 200px;
}

/*  */
.prof h1 {
    display             : block;
    animation           : rotation-data 4s 1.2s infinite;
    margin-bottom       : -10px;
    height              : 40px;
    overflow            : hidden;
}
@keyframes rotation-data{
    50% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(1turn);
    }
}

.prof h1 span{
    display             : block;
    font-size           : 1.1em;
    height              : 40px;
    animation           : img-move 8s steps(2) infinite;  /* 8秒かけて2段階を踏んで縦に80px(span高さ40px*2)動く */
}
@keyframes img-move {
    100% {
        transform: translateY(-80px);
    }
}


.prof h2{
    font-size           : 4em;
    /*padding             : 20px 0;*/
    margin              : 20px 0;
}
.prof img{
    width               : 20%;
    height              : 30%;
    margin-top          : 20px;
    border-radius       : 100px;
}

.winter {
    background          : #000;
    color               : ivory;
    padding-bottom      : 10px;
    position            : relative;
    overflow            : hidden;
}

.snow {
    color               : snow;    /*雪の色*/
    font-size           : 8px;     /*雪の大きさ*/
    position            : absolute;
    /*雪の位置を指定-ランダムな数値を入れて雪をあちこちに降らせる*/
    text-shadow         :3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px, 36vw -400px 2px,  40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px,    70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;
    /*アニメーションの指定*/
    animation           : snow 10s linear infinite;
}

@keyframes snow {
  0% {
    top: -20%;
  }
  100% {
    top: 120%;
  }
}



.summer {
  /*background           : #000;*/
    color               : green;
    padding-bottom      : 10px;
}


.autumn {
    background: hwb(25deg 80% 6%);
    color               : brown;
    padding-bottom      : 10px;
}


.aboutmt img {
    display             : block;
    margin-left         : auto;
    margin-right        : auto;
    /*margin-top          : 20px;
    margin-bottom       : 20px;*/
 /*   width               : 40%;
    height              : 40%;*/
    border-radius       : 10px;
}
.aboutmt h3, h4, h5 {
    font-size           : 2em;
    text-align          : center;
}

.aboutmt p {
    margin-bottom       : 0px;
    font-size           : 1.0em;
    text-align          : center;
}


.winter img,
.summer img,
.autumn img{
  width      : 400px!important;
  height     : 400px!important;
  object-fit : cover;
  margin     : 10px auto 50px;
}

/* footer */
.footer{
  display               : flex;
  justify-content       : center;
  height                : 60px;
  background-color      : white;
}