body{
  background:#ffffff;
    background-color:#ffffff;
background-size:cover;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;

  font-weight: 500;
}

/* 
  html で class="layout-center" と書かれたところに適用される
*/
.layout-center{
  /* 
  横幅を指定し、
  左右の margin を auto にすると中央揃えになる 
  */
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* 
  class="gazou"
*/


/* 
  <p class="gazou">
    <img src="xxx.jpg">
  </p>
のように class="gazou" の中にある img 要素に適用される
*/
.gazou img{
  width: 70%;
  height: auto;

}

/* 
  class="midashi
*/
.midashi{
        float: left;
  font-weight: 200;
  letter-spacing: 0.1em; 
  font-size: 32px;
}


.midashi-small{
  font-size: 70%;
  letter-spacing: 0.05em; 
}





.button{
  padding: 10px 40px;
  background: #803100;
  color: #ffffff;
  text-decoration: none;
  border-radius: 20px;
  font-size: 13px;
  letter-spacing: 0.2em;
  
}



.cc-license{
  font-size: 13px;
  margin-top: 40px;
  
}



/*アニメ　コピペ*/
.photo-show { 
    height: 440px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    padding-top: 98px;
    width: 440px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 16s infinite;
    -webkit-animation: show 16s infinite;
    border-radius: 50%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}
/*アニメ　コピペ終わり*/
.midashi a{
     text-decoration: none;
}
/*学校のコピペ*/
.animation-link {
    
/*    transition: all 1s ease-out;*/
    color: black;
     text-decoration: none;
    
}


/* マウスを乗せたとき
 ============ */

.animation-link:hover {
    color: #bbb;
}


/* マウスをクリックしたとき
 ============ */

.animation-link:active {
    color: #037670;
}

/*自己紹介のやつ(一番下)コピペ*/
.appIconBig{
 display: block;
 margin-left: auto;
 margin-right: auto;
}

/*メッセージのやつ*/
form {
    /* フォームをページの中央に置く */
    margin: 0 auto;
    width: 400px;
    /* フォームの範囲がわかるようにする */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
form div + div {
    margin-top: 1em;
}
label {
    /* すべてのラベルを同じサイズにして、きちんと揃える */
    display: inline-block;
    width: 90px;
    text-align: right;
}
input, textarea {
    /* すべてのテキストフィールドのフォント設定を一致させる
       デフォルトで、textarea は等幅フォントが設定されている */
    font: 1em sans-serif;

    /* すべてのテキストフィールドを同じサイズにする */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* テキストフィールドのボーダーの外見を同一にする */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* アクティブな要素を少し強調する */
    border-color: #000;
}
textarea {
    /* 複数行のテキストフィールドをラベルにきちんと揃える */
    vertical-align: top;

    /* テキスト入力に十分な領域を与える */
    height: 5em;

    /* ユーザが textarea を垂直方向にリサイズできるようにする
       これが動作しないブラウザもある */
    resize: vertical;
}
.button {
    /* ボタンを他のテキストフィールドと同じ場所に置く */
    padding-left: 90px; /* label 要素と同じサイズ */
}
button {
    /* このマージンは、ラベルとテキストフィールドの間のスペースと
       おおよそ同じスペースを表す */
    margin-left: .5em;
}


/*下のメールアドレス*/
.oya-box {
    background-color: #ffff;
    overflow: hidden;
    width: 100%;
     text-align: center;
    
}