@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;}
h2{font-family:'Spinnaker', "Sawarabi Gothic", sans-serif;}
.name_sub{text-align:center;}

/* Section1 */
#sec1{width:100%; height:400px; min-height:280px; max-height:50%; padding:10px 0; box-sizing:border-box; background:url('../images/link_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%; box-sizing:border-box; padding-top:50px;}
#sec2 h1{font-family:'Spinnaker', sans-serif; letter-spacing:5px; text-align:center;}
#sec2 .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;}
#sec2 .row{text-align:center;}
/* //Section2 */

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

/* Section4 */
#sec4{width:100%; box-sizing:border-box; padding:50px 0;}
#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;}
#sec4 .row{text-align:center;}
/* //Section4 */

/* Space */
#space01{width:100%; height:100px; margin-top:50px; -webkit-clip-path: polygon(0 100%, 100% 0%, 100% 100%); clip-path: polygon(0 100%, 100% 0%, 100% 100%); background-color:#f9ffaf;}
#space02{width:100%; height:100px; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%); background-color:#f9ffaf;}
@media screen and (max-width:750px) {
    #space01,#space02{height:50px;}
}
/* //Space */

/* 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 */