@charset "UTF-8";

#sec2 a,#sec3 a,#sec4 a{text-decoration:none;}
#sec2 a:hover p,#sec3 a:hover p,#sec4 a:hover p{text-decoration:underline;}

/* Section1 */
#sec1{width:100%; height:400px; min-height:280px; max-height:50%; padding:10px 0; box-sizing:border-box; -webkit-animation: bg-color 10s infinite; background:url('../images/aboutme_back.png') center / cover; position:relative;}
#sec1 img{width:70%; max-width:500px; position:absolute; top:50%; left:50%; pointer-events:none; transform:translateY(-50%) translateX(-50%); -webkit- transform:translateY(-50%) translateX(-50%); padding:8px; box-sizing:border-box; -webkit-animation: bg-color 10s infinite;}
/* 横向きの場合のスタイル */
@media screen and (orientation: landscape) and (max-width:750px) {
    #sec1 img{max-height:60%; width:auto;}
}
/* //Section1 */

/* Section2 */
#sec2{width:100%; box-sizing:border-box; padding-top:50px;}
#sec2 h1{font-family:'Spinnaker', sans-serif; letter-spacing:5px; text-align:center;}
#sec2 h2{font-family:'Spinnaker', sans-serif; letter-spacing:5px; margin-bottom:10px;}
#sec2 .title_underline{width:200px; margin:0 auto; display:block; pointer-events:none; background:repeating-linear-gradient(90deg, #1f1f1f, #1f1f1f 25px, #d8d8d8 0, #d8d8d8 50px); animation: move-stripe2 2s infinite linear; background-size:cover;}
#sec2 .name_sub{text-align:center;}
/* //Section2 */

/* Section3 */
#sec3{width:100%; box-sizing:border-box; margin-top:50px; padding:50px 0; position: relative; background-color:#f9ffaf;}
#sec3::before{height:40px; content:""; position:absolute; left:0; width:100%; top:-40px; background:linear-gradient(45deg, #f9ffaf 20px, transparent 0), linear-gradient(315deg, #f9ffaf 20px, transparent 0); background-size: 40px 40px;}
#sec3::after{height:40px; content:""; position:absolute; left:0; width:100%; bottom:-40px; background:linear-gradient(135deg, #f9ffaf 20px, transparent 0), linear-gradient(225deg, #f9ffaf 20px, transparent 0); background-size: 40px 40px;}
#sec3 h1{font-family:'Spinnaker', sans-serif; letter-spacing:5px; text-align:center;}
#sec3 h2{font-family:'Spinnaker', sans-serif; letter-spacing:5px; margin-bottom:10px;}
#sec3 .title_underline{width:200px; margin:0 auto 20px; display:block; pointer-events:none; background:repeating-linear-gradient(90deg, #1f1f1f, #1f1f1f 25px, #d8d8d8 0, #d8d8d8 50px); animation: move-stripe2 2s infinite linear; background-size:cover;}
#sec3 .name_sub{text-align:center;}
/* //Section3 */

/* Section4 */
#sec4{width:100%; box-sizing:border-box; padding-top:70px; padding-bottom:30px; text-align: center;}
#sec4 h1{font-family:'Spinnaker', sans-serif; letter-spacing:5px; text-align:center;}
#sec4 .title_underline{width:200px; margin:0 auto 20px; display:block; pointer-events:none; background:repeating-linear-gradient(90deg, #1f1f1f, #1f1f1f 25px, #d8d8d8 0, #d8d8d8 50px); animation: move-stripe2 2s infinite linear; background-size:cover;}
.my-sign{width:400px; max-width:60%; margin:0 auto; display:block; pointer-events:none; opacity:0.5;}
/* //Section4 */


/* Keyframe */
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes move-stripe1 {
    0% {background-position-y: -50px;}
    100% {background-position-y: 0;}
}
@keyframes move-stripe2 {
    0% {background-position-x: -50px;}
    100% {background-position-x: 0;}
}
/* //Keyframe */