@charset "utf-8";

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #3e3a39;
font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
img, iframe {
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: #3e3a39;
}

.box, #main {
max-width: 1024px;
margin: 0 auto;
}
.btn {
display: table;
margin: 0 auto;
border-radius: 3px;
background: #3e3a39;
color: #fff;
}

#header {
background: #fff;
box-shadow: 0 3px 3px 1px #999;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
#subNav {
position: absolute;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.hero {
position: relative;
}
.hero h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: -moz-linear-gradient(top,  rgba(153,153,153,0) 0%, rgba(139,200,255,0.6) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(153,153,153,0) 0%,rgba(139,200,255,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(153,153,153,0) 0%,rgba(139,200,255,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00999999', endColorstr='#998bc8ff',GradientType=0 ); /* IE6-9 */
}
.hero h1 div {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.hero h1 span {
display: table;
background: #fff;
color: #26a3de;
}

#footer {
background: #26a3de;
color: #fff;
}
#footerNav ul li a {
color: #fff;
}
#footerNav ul li a:before {
content: "- ";
}
#footer p {
text-align: center;
font-size: 12px;
padding-bottom: 10px;
}

@media (max-width: 560px){
#logo {
width: 160px;
padding: 8px 0;
}
#subNav {
top: 12px;
right: 60px;
}
#subNav li {
padding-left: 16px;
}
#subNav i {
font-size: 2rem;
}
div#sp-icon {
top: 0;
}
ul#menu {
top: 50px;
}

.hero {
padding-top: 40px;
margin-bottom: 30px;
}
	
#main {
padding-bottom: 60px;
}
}

@media (min-width: 561px){
.nobr {
display: none;
}
	
#footerNav ul {
display: flex;
}
}

@media (min-width:561px) and (max-width:1023px){
#logo {
width: 240px;
padding: 10px 0;
}
#subNav {
top: 25px;
right: 70px;
}
#subNav li {
padding-left: 20px;
}
#subNav i {
font-size: 2.4rem;
}
div#sp-icon {
top: 14px;
}
ul#menu {
top: 70px;
}

.hero {
padding-top: 50px;
margin-bottom: 40px;
}
	
#main {
padding-bottom: 80px;
}
}

@media (max-width: 1023px){
.btn {
font-size: 1.3rem;
padding: 6px 10px;
}
.btn i {
font-size: 1.1em;
padding-left: 6px;
line-height: 160%;
}

div#sp-icon {
width: 50px;
height: 50px;
position: absolute;
right: 10px;
z-index: 999;
}
div#sp-icon:hover {
cursor: pointer;
opacity: 0.7;
}
div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
display: inline-block;
width: 30px;
height: 3px;
background: #000000;
position: absolute;
transition-property: transform;
transition-duration: 0.3s;
}
div#sp-icon span {
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
div#sp-icon span:before {
content: "";
transform: translateY( -10px ) rotate( 0deg );
}
div#sp-icon span:after {
content: "";
transform: translateY( 10px ) rotate( 0deg );
}
div.sp-open span {
background: transparent !important;
}
div.sp-open span:before {
transform: rotate( 45deg ) !important;
}
div.sp-open span:after {
transform: rotate( -45deg ) !important;
}

ul#menu {
list-style-type: none;
width: 100%;
background: #ffffff;
opacity: 0.9;
position: absolute;
left: 0px;
z-index: 990;
display: none;
}
ul#menu li {
text-align: center;
}
ul#menu li a {
text-decoration: none;
display: block;
padding: 15px 0;
}
ul#menu li a:hover {
background: #a9a9a9;
opacity: 0.7;
}

#subNav li a span {
display: none;
}
	
.hero h1 span {
padding: 3px 6px;
}
#header .box, #main {
width: 90%;
}

#footer .box {
padding: 10px 0 8px;
}
#footer h6 {
width: 80%;
max-width: 400px;
margin: 0 auto;
padding-bottom: 20px;
}
#footerNav address {
text-align: center;
padding-bottom: 8px;
}
#footerNav ul {
display: none;
}
}

@media (min-width: 1024px){
a[href^="tel:"] {
pointer-events: none;
}

.box, #main {
width: 100%;
}
.btn {
font-size: 14px;
font-size: 1.4rem;
padding: 8px 12px;
}
.btn i {
font-size: 1.2em;
padding-left: 8px;
line-height: 150%;
}

#header .box {
padding: 20px 0;
position: relative;
}
#logo {
width: 200px;
padding-bottom: 20px;
}
#subNav {
top: 25px;
right: 0;
}
#subNav li {
padding-left: 30px;
}
#subNav li a {
color: #26a3de;
font-size: 15px;
font-size: 1.5rem;
}
#subNav li a i {
font-size: 1.2em;
padding-right: 8px;
}
#gNav {
width: 100%;
}
#gNav ul {
display: flex;
}
#gNav ul li {
width: 25%;
box-sizing: border-box;
border-left: 1px solid #3e3a39;
padding: 8px 0;
}
ul#menu li:nth-child(1), ul#menu li:nth-child(n + 6) {
display: none;
}
#gNav ul li:nth-child(5) {
border-right: 1px solid #3e3a39;
}
#gNav ul li a {
font-size: 14px;
font-size: 1.4rem;
display: table;
margin: 0 auto;
}

.hero {
margin-bottom: 50px;
}
.hero h1 span {
padding: 4px 8px;
}

#main {
padding-bottom: 100px;
}
	
#footer .box {
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 0 10px;
}
#footer h6 {
width: 300px;
}
#footerNav {
width: 600px;
}
#footerNav address {
text-align: right;
padding-bottom: 10px;
}
#footerNav ul {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#footerNav ul li {
padding-left: 20px;
}
#footerNav ul li a {
font-size: 14px;
font-size: 1.4rem;
}
}