html:not(.responsive) {
/* min-width: 1200px;*/
/* viewport */
width: 100%; /* viewport */
}
@font-face {
font-family: NotoSerifCJKjp;
src: url('../fonts/NotoSerifCJKjp-SemiBold.otf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: NotoSerifCJKjp;
src: url('../fonts/NotoSerifCJKjp-Medium.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: NotoSansCJKjp;
src: url('../fonts/NotoSansCJKjp-Bold.otf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: NotoSansCJKjp;
src: url('../fonts/NotoSansCJKjp-Medium.otf');
font-weight: normal;
font-style: normal;
}
/*=============================================
* .fnt - customs
*=============================================*/
.fnt-notosan {
font-family: 'Noto Sans JP', sans-serif;
}
.fnt-notoserif {
font-family: 'Noto Serif JP', serif;
}
/*=============================================
* body
*=============================================*/
body {
font-family: NotoSansCJKjp;
font-weight: 500;
font-size: 16px;
line-height: 40px;
letter-spacing: 0.15em;
background: #FFF;
min-width: inherit;
min-height: inherit;
max-height: 100%;
color: #414141;
}
.font20 {
font-size: 20px;
}
/*=============================================
* 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-NotoSerif {
font-family: NotoSerifCJKjp;
}
.fnt-tenmincho {
font-family: NotoSerifCJKjp;
}
/*=============================================
*
*=============================================*/
main {
clear: both;
width: 100%;
position: relative;
overflow: hidden;
padding-top:360px;
}
img {
max-width: 100%;
height: auto;
}
a {
transition: all ease .3s;
}
a:hover {
text-decoration: none;
}
i {
font-style: normal;
}
.container {
width: 100%;
max-width: 1200px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin: auto;
}
.wrap {
width: 1000px;
}
.mb20 {
margin-bottom: 15px;
}
.mt90 {
margin-top: 90px;
}
.tac, .txt-center {
text-align: center;
}
.full-width {
width: 100%;
}
.box_shadow {
box-shadow: 6px 8px 40px 0px rgba(0, 0, 0, 0.1);
}
.img_shadow img {
box-shadow: 6px 8px 40px 0px rgba(0, 0, 0, 0.1);
}
.rss_img img {
max-width: 100%;
height: auto;
}
.rss_img span {
width: 100% !important;
height: 0 !important;
padding-top: 75%;
transition: all ease .3s;
}
.rss_img span:hover {
opacity: .8;
}
.d-flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
.txt_red {
color: #f33b3b;
}
.txt_white {
color: #fff;
}
.btn_style a {
background-color: #e22929;
box-shadow: 6px 8px 40px 0px rgba(0, 0, 0, 0.1);
background-position: center left 24px;
background-repeat: no-repeat;
box-sizing: border-box;
display: block;
padding: 10px 0 10px 64px;
font-size: 16px;
line-height: 30px;
border-radius: 50px;
font-weight: 700;
width: 100%;
color: #fff;
}
.btn_style a span {
display: inline-block;
padding-left: 20px;
}
.btn_style a:hover {
opacity: 0.7;
}
.btn_style a.icon1 {
background-image: url('../img/shared/icon_btn_youtube.png');
}
.btn_style a.icon2 {
background-image: url('../img/shared/icon_btn_mail.png');
}
.toggle-link {
cursor: pointer;
}
a.link_line {
text-decoration: underline;
}
a.link_line:hover {
text-decoration: none;
}
@media all and (-ms-high-contrast:none) {
p.btn a img, header .nav-fl a img {
transition: opacity 0s ease !important;
-moz-transition: opacity 0s ease !important;
-webkit-transition: opacity 0s ease !important;
}
.btn-over img,
.over-img img,
img.over,
img:not(.btn):not(.non-over),
button img {
opacity: 1;
transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
-webkit-transform: translateX(0) translateZ(0);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
}
@media screen and (min-width: 1000px) {
.ip {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.sp {
display: none !important;
}
}
@media screen and (max-width: 1199px) {
.container {
padding: 0 20px;
}
html.responsive .wrap {
padding: 0 20px;
}
}
@media screen and (max-width: 767px) {
body {
font-size: 14px;
line-height: 32px;
}
.container {
padding: 0;
}
.wrap {
width: auto;
padding: 0 4%;
}
.mt90 {
margin-top: 50px;
}
.d-flex {
flex-wrap: wrap;
}
.pc {
display: none !important;
}
.fl, .fr {
float: none;
}
.btn_style a {
font-size: 14px;
}
.btn_style a span {
padding-left: 15px;
letter-spacing: 0.05em;
white-space: nowrap;
}
}
/*=============================================
*
*=============================================*/
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 77px;
}
header .menu_wrap {
width: 100%;
max-width: 1055px;
box-sizing: border-box;
padding: 0 20px 20px;
margin: auto;
position: relative;
}
header h1 {
font-size: 15px;
letter-spacing: 0.3em;
text-align: center;
}
header .logo {
width: 160px;
text-align:left;
}
@media screen and (max-width: 767px) {
header .logo {
text-align: center;
margin: auto;
}
}
header .tel {
position: absolute;
top: 5px;
right: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
header .head-top {
align-items: center;
margin-bottom: 10px;
}
header .nav-icon {
display: flex;
text-align: center;
justify-content: center;
}
header .nav-icon li {
font-size: 13px;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
margin-left: 19px;
}
header .nav-icon li:first-child {
margin-left: 0;
}
header .nav-icon li a {
display: block;
}
header .nav-icon li span {
margin-top: 4px;
display: block;
}
header .nav {
display: flex;
justify-content: center;
line-height: 32px;
text-align: center;
}
header .nav > li {
position: relative;
}
header .nav > li > a {
border-left: 2px solid #4b4b4b;
padding: 0 15px;
display: block;
letter-spacing: 0.3em;
position: relative;
}
header .nav > li:last-child > a {
border-right: 2px solid #4b4b4b;
}
/*header .nav > li > a:before,
header .nav > li > a:after {
content: "●";
vertical-align: top;
position: relative;
display: inline-block;
}
header .nav-main > li > a:after {
display: none;
}*/
header .nav-bottom {
margin: 16px 0 37px;
line-height: 26px;
}
header .nav-bottom > li > a {
padding: 0 45px;
}
header .nav-bottom > li > a:before {
font-size: 10px;
margin-right: 12px;
}
header .nav-bottom > li > a:after {
font-size: 10px;
margin-left: 12px;
}
header .nav-icon li a:hover,
header .nav > li:hover > a,
header .nav a:hover {
color: #f33b3b;
}
header .nav_sub {
background-color: #fff;
box-shadow: 6px 8px 40px 0px rgba(0, 0, 0, 0.1);
transition: all ease 0.3s;
padding: 16px 20px;
opacity: 0;
visibility: hidden;
min-width: 100%;
box-sizing: border-box;
z-index: 10;
position: absolute;
top: 80%;
left: 0;
}
header .nav_sub li a {
text-align: left;
font-size: 16px;
letter-spacing: 0.3em;
line-height: 35px;
white-space: nowrap;
display: block;
}
.hamburger {
background-color: #000000;
z-index: 100;
flex: 0 0 73px;
width: 73px;
height: 73px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
margin: 0;
position: relative;
overflow: visible;
font-size: 16px;
letter-spacing: 0;
line-height: 1;
color: #fff;
}
.hamburger:hover{
opacity: 0.8;
transition: all 0.5s;`
}
/*.hamburger:before {
content: "";
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
border: 2px solid #fff;
}*/
.hamburger span {
margin-top: 5px;
display: block;
}
.hamburger-box {
width: 36px;
height: 14px;
display: block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -1px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 100%;
height: 2px;
background-color: #fff;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -6px;
}
.hamburger-inner::after {
bottom: -6px;
}
/** Vortex Reverse **/
.hamburger--vortex-r .hamburger-inner {
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r .hamburger-inner::before,
.hamburger--vortex-r .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear;
}
.hamburger--vortex-r .hamburger-inner::before {
transition-property: top, opacity;
}
.hamburger--vortex-r .hamburger-inner::after {
transition-property: bottom, transform;
}
.hamburger--vortex-r.is-active .hamburger-inner {
transform: rotate(-765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r.is-active .hamburger-inner::before,
.hamburger--vortex-r.is-active .hamburger-inner::after {
transition-delay: 0s;
}
.hamburger--vortex-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--vortex-r.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
.menu_toggle {
background-color: #fff;
padding-top: 25px;
}
.navOpen:before {
content: "";
position: fixed;
z-index: 89;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.navOpen .nav-fixed {
box-shadow: none;
border-bottom: none;
}
/*-----------------------------------------*/
#h_productlist{position: absolute; top:90px; left:calc(50% - 270px); list-style: none; width: 700px; display: flex;}
#h_productlist li{flex: 150px;text-align: center; padding: 2px; border-right:1px #999999 solid; font-weight: 600; font-size: 90%;}
#h_productlist li:last-child{border-right:none;}
#h_productlist li span{display: block;}
@media screen and (max-width: 768px) {
#h_productlist{position:relative; top: auto; left:auto; width: 100%; display: flex; margin-bottom: 5%;}
#h_productlist li{flex:auto;text-align: center; padding: 1%; border-right:1px #999999 solid;}
#h_productlist li img{width: 15vw;}
}
/*-----------------------------------------*/
.navOpen .menu_toggle {
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 1;
visibility: visible;
pointer-events: visible;
box-sizing: border-box;
/*padding-bottom: 100px;*/
z-index: 90;
height: 100vh;
overflow-y: scroll;
padding-top: 50px;
}
.navOpen .menu_toggle .nav_sub{
position: relative;
top: 0;
opacity: 1;
visibility: inherit;
background: none;
box-shadow: none;
padding: 5px 20px 0;
}
.navOpen .menu_toggle .head-top{
display:block;
}
.navOpen .menu_toggle .nav-icon{
padding:20px 0 0;
}
.fixed_tel{
display:none !important;
}
.navOpen .fixed_tel{
display:block !important;
margin: auto;
}
.navOpen .fixed_tel p{
line-height: 28px;
}
.navOpen .fixed_tel p img{
padding: 1.6em 0.5em 0 0;
}
.navOpen .fixed_tel span.inn{
padding: 1em 0.25em;
display: inline-block;
font-size:22px;
}
.navOpen .fixed_tel span.num{
font-size:16px;
}
.navOpen .open-flex{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
max-width: 620px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.navOpen .fixed_tel img{
padding: 0 !important;
width: 30px;
height: auto;
}
.navOpen .fixed_tel span.inn{
padding: 0 0 0 3%;
font-size: 21px;
}
.navOpen .fixed_tel span.num {
font-size: 13px;
}
}
/*=============================================
* nav-fixed
*=============================================*/
.nav-fixed {
/* background-color: #fff; */
padding: 13px 0;
position: fixed;
z-index: 99;
width: 73px;
top: 0;
transition: all ease .3s;
transform: translateY(-100%);
right: 0;
}
.nav-fixed.fixed {
transform: translateY(0);
}
.nav-fixed .wrap-fixed {
display: flex;
justify-content:flex-end;
align-items: center;
}
.nav-fixed .wrap-fixed > div {
margin: 0 20px;
}
.nav-fixed .fixed_tel p {
box-shadow: 13px 16px 40px 0px rgba(75, 63, 63, 0.3);
border-radius: 25px;
overflow: hidden;
}
.nav-fixed .btn_style {
width: 300px;
}
.nav-fixed .btn_style + .btn_style {
margin-top: 11px;
}
.nav-fixed .btn_style a {
box-shadow: 13px 16px 40px 0px rgba(75, 63, 63, 0.3);
line-height: 21px;
}
.nav-fixed nav {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
}
.nav-fixed a {
position: relative;
}
.nav-fixed a:hover {
text-decoration: none;
}
@media (min-width: 1000px) and (max-width: 1199px) {
header .nav > li > a {
padding: 0 15px;
letter-spacing: 0.2em;
}
}
@media (min-width: 768px) and (max-width: 999px) {
header .nav-icon li {
margin-left: 10px;
}
header .nav > li > a {
letter-spacing: 0.1em;
font-size: 13px;
}
header .nav-main > li > a {
padding: 0 10px;
}
header .nav-bottom > li {
padding: 0 30px;
}
.nav-fixed .wrap-fixed > div {
margin: 0 10px;
}
}
@media screen and (min-width: 768px) {
header li:hover .nav_sub {
display: block;
opacity: 1;
visibility: visible;
top: 100%;
}
}
@media screen and (max-width: 767px) {
main {
padding-top: 0;
}
header {
position: relative;
padding: 25px 0 30px;
}
header h1 {
display: none;
}
header .head-top {
padding: 15px 0;
justify-content: center;
}
header .head-sp .nav-icon {
margin: 20px 0 10px;
}
header .nav {
flex-wrap: wrap;
}
header .nav > li {
width: 100%;
margin-bottom: 20px;
}
header .nav > li:after {
content: "";
border-bottom: 1px solid #414141;
width: 100%;
position: absolute;
top: 45px;
left: 0;
}
header .nav > li > a {
border-right: 2px solid #4b4b4b;
line-height: 32px;
box-sizing: border-box;
padding: 0 25px;
margin-bottom: 16px;
text-align: center;
width: 100%;
}
header .nav > li > a:before,
header .nav > li > a:after {
font-size: inherit;
}
.hamburger {
flex: 0 0 65px;
width: 65px;
height: 65px;
font-size: 12px;
}
.menu_toggle {
display: none;
}
header .menu_toggle {
top: 0 !important;
}
header .menu_wrap {
padding: 155px 0 0;
}
header .head-top {
padding: 0 20px;
margin: 0;
}
header .nav-main {
margin-top: 30px;
order: 2;
}
header .nav-main > li > a:before {
display: inline-block;
margin-right: 12px;
}
header .nav-main > li > a:after {
display: inline-block;
margin-left: 12px;
}
header .nav-bottom {
background-color: #f0efed;
padding: 20px;
margin: 0;
}
header .nav-bottom > li {
padding: 0;
}
header .menu_toggle .logo {
position: absolute;
top: 0;
left: 50%;
margin-left: -90px;
}
header .menu_toggle .open-flex .fixed_tel{
display:none !important;
}
header .head-btn {
padding: 0 20px;
margin-bottom: 30px;
}
header .head-btn .fixed_btn .btn_style {
padding: 0 10px;
margin-top: 10px;
}
header .nav_sub {
transition: none;
background: none;
position: relative;
top: 0 !important;
left: 0;
width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
padding: 0 !important;
box-shadow: none;
display: none;
}
header .nav_sub li a {
border-bottom: 1px dashed #d7d7d7;
padding: 0 20px;
font-size: inherit;
}
.navOpen .menu_toggle {
overflow-y: auto;
display: block;
height: 100vh;
padding-bottom: 70px;
}
.nav-fixed {
transform: translateY(0);
right: 10px;
top: 10px;
padding: 0;
background: none;
box-shadow: none;
border: none;
width: auto;
}
.nav-fixed .wrap-fixed > div {
margin: 0;
}
}
/*=============================================
* key
*=============================================*/
#key {
background-color: #ccc;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
min-height: 500px;
position: relative;
}
#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;
}
/*=============================================
*