html:not(.responsive) {
min-width: 1000px; /* viewport */
}
/*=============================================
* body
*=============================================*/
body {
color: #000;
/*font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ明朝体 Pro", "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 16px;
line-height: 42px;
letter-spacing: 0;
background: url("../img/shared/bd_bg.jpg") repeat;
min-width: inherit;
min-height: inherit;
max-height: 100%;
font-weight: 400;
}
.red {
color: #e42b00;
}
/*=============================================
* fonts - DON'T EDIT
*=============================================*/
.fnt-mincho {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fnt-meiryo {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fnt-gothic {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.fnt-noto {
font-family: 'Noto Serif JP', serif;
}
/*=============================================
* .fnt - customs
*=============================================*/
.fnt-mincho {}
.fnt-meiryo {}
.fnt-gothic {}
.fnt-garamond {}
.flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.button {
width: 400px;
}
.button a {
font-family: 'Noto Serif JP', serif;
display: block;
text-decoration: none;
text-align: center;
color: #fff;
letter-spacing: 2px;
font-size: 20px;
}
.button {
position: relative;
z-index: 2;
background-color: #aa2a07;
color: #333;
line-height: 60px;
overflow: hidden;
margin-left: 50px;
}
.button:before {
position: absolute;
background: url("../img/shared/arrow.png") no-repeat;
width: 22px;
height: 22px;
left: 36px;
top: 50%;
transform: translateY(-50%);
content: '';
}
.button:hover {
color: #fff;
}
.button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.button::after {
top: -100%;
left: -100%;
width: 100%;
height: 100%;
}
.button:hover:after {
top: 0;
left: 0;
background-color: #d3300b;
}
/*=============================================
*
*=============================================*/
main {
clear: both;
width: 100%;
position: relative;
overflow: hidden;
}
.wrap {
width: 1000px;
}
/*=============================================
*
*=============================================*/
header {
height: 160px;
margin-bottom: -56px;
position: relative;
}
header:before {
position: absolute;
left: 0;
top: 0;
background: url("../img/shared/header_bg_left.jpg") repeat;
right: calc(50% + 450px);
height: 904px;
content: '';
}
header h1 {
padding-top: 35px !important;
z-index: 2;
position: relative;
padding-left: 0px !important;
font-size: 13px;
letter-spacing: 0;
}
header .logo {
padding-top: 25px !important;
z-index: 2;
position: relative;
margin-left: 100px !important;
}
header .tel {
background-size: cover;
position: absolute;
left: auto;
top: 31px;
right: 0;
color: #fff;
padding: 17px 0px 23px 0;
z-index: 10;
text-align: center;
letter-spacing: 0;
}
header .tel:before {
background: url("../img/shared/tel_bg.png") no-repeat center left;
position: absolute;
background-size: cover;
top: 0;
left: 0;
right: -500px;
bottom: 0;
content: '';
z-index: -1;
}
header .tel dt {
width: auto;
text-align: center;
padding-left: 111px;
box-sizing: border-box;
line-height: 26px;
margin-bottom: 6px;
}
header .tel dd {
width: auto;
text-align: center;
padding-left: 110px;
box-sizing: border-box;
line-height: 26px;
}
header .tel dd .num {
font-size: 28px;
font-weight: bold;
color: #fec733;
}
header .tel dd .fax {
font-size: 24px;
font-weight: bold;
color: #e9e9e9;
}
header .tel dd .des {
color: #fec733;
font-weight: bold;
}
header .tel dd .des span {
font-size: 22px;
}
header .tel dt {
font-size: 16px;
}
header > .wrap {
position: absolute;
z-index: 2;
top: 105px;
left: 50%;
transform: translateX(-50%);
}
header .group {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/*=============================================
*
*=============================================*/
.nav-fixed {
position: absolute;
background: url("../img/shared/navi_fixed_bg.png") repeat;
height: 80px;
position: absolute;
z-index: 999;
left: 0;
right: 0;
bottom: -20px;
opacity: 0;
visibility: hidden;
}
.nav-fixed .wrap nav {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.nav-fixed.fixed {
position: fixed;
top: 0;
opacity: 1;
visibility: visible;
}
.nav-fixed a {
position: relative;
}
.nav-fixed a.active:before, .nav-fixed a:hover:before {
width: 100%;
}
.nav-fixed a:hover {
text-decoration: none;
}
header .nav-fixed {}
/*=============================================
* key
*=============================================*/
#key {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
min-height: 800px;
position: relative;
width: 1400px;
margin: 0 auto 0;
max-width: 100%;
}
#key ul {
min-height: inherit;
}
#key li {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
min-height: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#key .logo {
position: absolute;
left: 22%;
top: 40px;
z-index: 2;
transform: translateX(-50%);
}
#key nav.nav_key {
position: absolute;
bottom: 74px;
left: 50%;
z-index: 2;
transform: translateX(-50%);
width: 1000px;
}
/*=============================================
*
*=============================================*/
section {}
/*=============================================
*