@import url("reset.css");

body{ width: 100%; margin: auto;}

.clearfix { *zoom: 1;}
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}

.forPC{ display: block;}
.forSP{ display: none;}

h1,h2,h3,h4,h5,li{ letter-spacing: 0.1em;}

p{ font-size: 14px; font-weight: normal; letter-spacing: 0.1em; text-align: left; color: #000;}
p.indent-1 { padding-left:1em; text-indent:-1em;}
p.indent-15 { padding-left:1.5em; text-indent:-1.5em;}
a{ text-decoration: none; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; outline: none; color: #595757; font-size: 14px;}
a:hover{ transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out;}

section.mv{ position: relative;}
section.mv > img{ margin-top: -1px; position: relative;}
section.mv a{ display: block; width: 100%; max-width: 370px; position: absolute; bottom: 20px; left: 20px; margin: auto auto;}
section.mv a:hover{ opacity: .6;}

section.movie{ width: 100%; overflow: hidden; background-color: #0070B0;}
section.movie .inner{ width: 100%; max-width: 1200px; padding: 60px 20px; box-sizing: border-box; margin: auto;}
section.movie .inner .youtube{ width: 100%; margin: auto auto; position: relative;}
section.movie .inner .youtube div{ width: 100%; overflow: hidden; margin: auto auto;}
section.movie .inner .youtube div iframe{ max-width: 100%; margin: auto auto; aspect-ratio: 16 / 9;}

section.introduction{ width: 100%; overflow: hidden; background-color: #03AAE7; position: relative;}
section.introduction .top{ position: absolute; z-index: 1; top: -2px; margin: auto; width: 100%;}
section.introduction .inner{ width: 100%; max-width: 715px; margin: auto auto; padding: 120px 20px 60px; box-sizing: border-box; position: relative; z-index: 2;}
section.introduction .hgroup{ width: 100%; overflow: hidden; margin-bottom: 40px; position: relative; z-index: 10;}
section.introduction .hgroup h2{ text-align: center; font-size: 58px; color: #fff; font-family: 'Audiowide', cursive;}
section.introduction .hgroup h2 span{ color: #de5404;}
section.introduction .hgroup h3{ text-align: center; font-size: 20px; color: #fff; font-weight: 600;}
section.introduction img{ max-width: 100%; display: block; margin: auto auto;}
section.introduction p{ font-size: 18px; color: #fff; text-align: center; line-height: 2.4;}
section.introduction img.text{ max-width: 500px; margin-top: 40px;}

footer{ width: 100%; overflow: hidden;}
footer .link{ width: 100%; overflow: hidden; background-color: #261917; text-align: center; padding: 20px 20px; box-sizing: border-box;}
footer .link a{ font-size: 18px; font-weight: 600; color: #fff; text-decoration: underline; position: relative; padding-right: 26px; box-sizing: border-box;}
footer .link a:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 19px; height: 19px; background-image: url(../images/link-arrow.png); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
footer .link a:hover{ opacity: .6;}
footer .copy{ width: 100%; overflow: hidden; text-align: center; padding: 10px 20px; box-sizing: border-box;}
footer .copy p{ text-align: center; font-size: 12px;}