body{ margin: 0; padding: 0; text-align: center; min-height: 100vh; display: flex; flex-direction: column; position: relative; font-family: "Sawarabi Mincho"; background-color: #fffffc; } h2,h3,p{ color: #606060; } footer{ width: 100%; background-color: white; display: flex; flex-direction: row; } .guide_p{ color: #303030; font-size: 1.2em; } .guide{ background-image: url("back_image.PNG"); background-size: cover; background-color: #fdeff2; } .tour_video{ min-width: 300px; } .tour_title{ position: relative; display: block; padding: 30px; } .tour_title:before{ content: ""; margin-top: -10px; display: block; position: absolute; width: 5%; border-top: solid 2px #808080; transition: 1s ease-in-out; left: 0; } .tour_title:after{ content: ""; margin-top: 10px; display: block; position: absolute; width: 5%; border-top: solid 2px #808080; transition: 1s ease-in-out; right: 0; } .tour_title:hover:before{ width: 70%; left: 15% } .tour_title:hover:after{ width: 70%; right: 15%; } @media screen and (orientation: landscape){ .side{ display: flex; flex-flow: row nowrap; } .tour{ flex: auto; padding: 2vh; } .tour_title{ margin: 10px; padding: 10px; position: relative; display: block; } .tour_title:after{ content: ""; margin-top: 10px; display: block; position: absolute; width: 5%; border-top: solid 2px #808080; transition: 1s ease-in-out; right: 0; } .tour_title:hover:before{ width: 90%; left: 5% } .tour_title:hover:after{ width: 90%; right: 5%; } }