/* Section1 */
#sec1{width:100%; height:400px; min-height:280px; max-height:50%; padding:10px 0; box-sizing:border-box; background:url('../images/portfolio_back.jpg') 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%; padding:10px 0;}
#sec2 h3{padding-bottom:0; margin-bottom:10px;}
#sec2 .date{background:#1a1a1a; padding:2px 10px; border-radius:15px; font-size:13px; color:white; box-shadow:0 0 13px #535353;}
#sec2 .badge{padding:2px 7px; margin:0px 0px; border:0.5px solid #c7c7c7; border-radius:10px; font-size:10px;}
/* //Section2 */

/* Section3 */
#sec3{width:100%; padding:10px 0 50px 0; background:#fdfdfd;}
#sec3 .badge{padding:2px 7px; margin:0px 0px; border:0.5px solid #c7c7c7; border-radius:10px; font-size:10px;}
/* //Section3 */

/* Section4 */
#sec4{width:100%; padding:10px 0 50px 0;}
#sec4 .badge{padding:2px 7px; margin:0px 0px; border:0.5px solid #c7c7c7; border-radius:10px; font-size:10px;}
/* //Section4 */

/* Section5 */
#sec5{width:100%; padding:10px 0 50px 0; background:#fdfdfd;}
#sec5 .badge{padding:2px 7px; margin:0px 0px; border:0.5px solid #c7c7c7; border-radius:10px; font-size:10px;}
#sec5 .date{background:#1a1a1a; padding:2px 10px; border-radius:15px; font-size:13px; color:white; box-shadow:0 0 13px #535353;}
#sec5 .icon{position:relative; top:-2px; left:-5px;}
/* //Section4 */

/* Section5 */
#sec6{width:100%; padding:10px 0 50px 0;}
#sec6 .badge{padding:2px 7px; margin:0px 0px; border:0.5px solid #c7c7c7; border-radius:10px; font-size:10px;}
#sec6 .date{background:#1a1a1a; padding:2px 10px; border-radius:15px; font-size:13px; color:white; box-shadow:0 0 13px #535353;}
#sec6 .icon{position:relative; top:-2px; left:-5px;}
/* //Section5 */

img{pointer-events:none;}


/* 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;}
}
@keyframes move-stripe3 {
    0% {background-position-x: 0;}
    100% {background-position-x: -50px;}
}
/* //Keyframe */