/*@import url(./custom.css);*/ /****************************************************** ヘッダー ******************************************************/ @media screen and (min-width:1280px) { #h_cover {position: absolute;top: 0;left: 0;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 100%;padding: .5rem 1.5rem 0;padding-right: calc(100px + 3rem);box-sizing: border-box;z-index: 100;} #h_logo {width: 300px;padding: 1.5rem;} #h_logo .image {width: 300px;height: 46px;margin-bottom: 1.2rem;background: url(https://rental-maruya.com/assets/img/logo-white.png) center center no-repeat;background-size: contain;} #h_logo .image img {display: none;} #h_logo .type {width: 280px;margin: 0 auto;color: #fff;font-size: 1.6rem;text-align: center;line-height: 3.2rem;border: 1px solid #fff;} #h_btn {display: flex;flex-wrap: wrap;justify-content: flex-end;} #h_btn .btn {position: relative;width: 300px;margin-left: 1.5rem;background: #fff;position: fixed;margin-top: -50px} #h_btn .btn.fix {position: fixed;bottom: 3rem;left: 3rem;box-shadow: -4px 4px 4px 0 rgba(0,0,0,.1); } #h_btn .btn a {position: relative;display: flex;flex-wrap: wrap;flex-direction: column;align-items: center;justify-content: center;padding: 2rem; height: 100px; font-family: var(--serif);-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition: all .3s linear;box-sizing: border-box;} #h_btn .btn a:hover {opacity: .7;} #h_btn .btn a .title {font-size: 1.6rem;line-height: 3rem;} #h_btn .btn a .logo {display: flex;flex-wrap: wrap;justify-content: center;font-size: 2.4rem;line-height: 3rem;} /* 電話番号 */ #h_btn .btn a.tel {background: #fff;} #h_btn .btn a.tel:after {content: "";position: absolute;border-left: 30px solid var(--main-color);border-top: 30px solid transparent;border-bottom: 30px solid transparent;bottom: -19px;right: -5px;width: 0;height: 0;transform: rotate(45deg);} #h_btn .btn a.tel .logo {color: var(--main-color);} #h_btn .btn a.tel .logo .icon {content: "";width: 3rem;height: 3rem;margin-right: 1rem;line-height: 3rem;background: url() center center;background-size: contain;} /* フォーム */ #h_btn .btn a.form {color: #fff;background: var(--bg-grad-2);} #h_btn .btn a.form .logo {color: #fff;} /* #h_btn .btn a.form .logo .icon {content: "";width: 3rem;height: 3rem;margin-right: 1rem;line-height: 3rem;background: url() center center;background-size: contain;} */ /* オフィシャル */ #h_btn .btn a.official {color: #fff;background: var(--main-color);} #h_btn .btn a.official:after {content: "";position: absolute;border-left: 30px solid #fff;border-top: 30px solid transparent;border-bottom: 30px solid transparent;bottom: -19px;right: -5px;width: 0;height: 0;transform: rotate(45deg);} #h_btn .btn a.official .logo {padding: 0 2rem;} #h_toggle_btn {position: fixed;display: block;width: 100px;height: 100px;top: 1.5rem;right: 1.5rem;z-index: 101;color: var(--text-high-color);background: var(--bg-grad-1);cursor: pointer;box-sizing: border-box;transition: all .3s linear;} #h_toggle_btn span {display: block;width: 40px;height: 1px;background: var(--text-high-color);position: absolute;left: 30px;transition: 0.5s ease-in-out; } #h_toggle_btn span:nth-child(1){top: 24px;} #h_toggle_btn span:nth-child(2){top: 36px;} #h_toggle_btn span:nth-child(3){top: 48px;} #h_toggle_btn.open {z-index: 10004;} #h_toggle_btn.open span {color: var(--text-high-color);} #h_toggle_btn.open span:nth-child(1) {top: 36px;transform: rotate(135deg);background: var(--text-high-color);} #h_toggle_btn.open span:nth-child(2) {width: 0;left: 50%;} #h_toggle_btn.open span:nth-child(3) {top: 36px;transform: rotate(-135deg);background: var(--text-high-color);} #h_toggle_btn div {position: absolute;width: 100%;bottom: 16px;text-align: center;} /* メニュー全体 */ #h_nav {background: rgba(255,255,255,.9);display: block;width: 480px;max-width: calc(100% - 60px);height: 100%;padding: 18rem 6rem 6rem;overflow-x: hidden;overflow-y: auto;position: fixed;right: 0;top: 0;z-index: 100;visibility: hidden;transform: translateX(100%);webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: all .3s linear;box-sizing: border-box;} #h_nav.on {visibility: visible;transform: translateX(0px);} #h_nav li a {position: relative;display: block;padding: 1em;padding-left: 1.5em;border-bottom: 1px solid #f2f2f2;} /*#h_nav li a:before {position: absolute;top: 50%;left: 0;display: block;content: "";width: 1rem;height: 1rem;margin-top: -.5rem;line-height: 1;background: var(--main-color);} #h_nav li:nth-child(even) a:before {background: var(--sub-color);} */ /* #h_nav li a:before {position: absolute;top: 50%;left: 0px;transform: translateY(-50%);width: 0px;height: 0px;border: 0.3em solid transparent;border-left: 0.4em solid #3388dd;content: "";} #h_nav .link_btn a {position: relative;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 6rem;color: #fff;background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);box-sizing: border-box;transition: all .3s linear;} #h_nav .link_btn a:hover {opacity: .7;} #h_nav .link_btn a:after {position: absolute;display: block;content: "\f105";font-family: "FontAwesome";top: 50%;right: 1em;margin-top: -.5em;line-height: 1; } #h_nav .link_btn a .logo {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;} #h_nav .link_btn a .logo .icon {content: "";width: 3rem;height: 3rem;margin-right: 1rem;line-height: 3rem;background: url(../img/instagram.png) center center;background-size: contain;margin-bottom: 0} */ #h_nav .link_btn {display: flex;justify-content: space-between;} #h_nav .link_btn a {margin-top:1.5rem;position: relative;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;align-items: center;width: 32%;/*height: 5rem;*/color: #fff;background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);box-sizing: border-box;transition: all .3s linear;border-radius: 5px} #h_nav .link_btn a .logo {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding:10px 5px} #h_nav .link_btn a .logo .icon {content: "";width: 2rem;height: 2rem;/*margin-right: 1rem;*/line-height: 3rem;background: url(../img/instagram.png) center center;background-size: contain;margin-bottom:0;} #h_nav .link_btn a .logo span {margin-top: 2px;display: block;width: 100%;text-align: center;font-size:.7em} /*Facebook*/ #h_nav .link_btn a.facebook {background:#1778F2 } #h_nav .link_btn a.facebook .logo .icon {background: url(../img/facebook.png) center center; background-size:contain} /*Youtube*/ #h_nav .link_btn a.youtube {background:#ee2d24} #h_nav .link_btn a.youtube .logo .icon {background: url(../img/youtube.png) center center; background-size:contain} } @media screen and (max-width:1279px) { #header {height: 6rem;} #h_cover {position: fixed;top: 0;left: 0;width: 100%;box-sizing: border-box;z-index: 100;background: #fff;} #h_logo {padding: 7px 1.2rem;padding-right: 7.2rem;display: flex;flex-wrap: wrap;align-items: center;} #h_logo .image {} #h_logo .image img {height: 45px;vertical-align: middle;} #h_logo .type {margin-left: 1rem;padding: .6rem;color: #fff;font-size: 1.2rem;line-height: 1;text-align: left;background: var(--main-color);} #h_btn {position: fixed;bottom: 0;left: 0;width: 100%;display: flex;flex-wrap: wrap;} #h_btn .btn {width: calc(100% / 2);} #h_btn .btn a {hright:100%;position: relative;display: flex;flex-wrap: wrap;flex-direction: column;align-items: center;justify-content: center;padding: 1rem .5rem; font-family: var(--serif);box-sizing: border-box;} #h_btn .btn a .title {font-size: 1rem;line-height: 1.5rem;} #h_btn .btn a .logo {display: flex;flex-wrap: wrap;justify-content: center;font-size: 1.2rem;line-height: 2.5rem;} /* 電話番号 #h_btn .btn a.tel {background: #fff;} #h_btn .btn a.tel .logo {color: var(--main-color);} #h_btn .btn a.tel .logo .icon {content: "";width: 2rem;height: 2rem;margin-right: .4rem;line-height: 2rem;background: url() center center;background-size: contain;} */ /* フォーム */ #h_btn .btn a.form {color: #fff;background: var(--bg-grad-2);height: 100%} #h_btn .btn a.form .logo {color: #fff;} /*#h_btn .btn a.form .logo .icon {content: "";width: 2rem;height: 2rem;margin-right: .4rem;line-height: 2rem;background: url() center center;background-size: contain;} */ /* オフィシャル */ #h_btn .btn a.official {color: #fff;background: var(--main-color);} #h_btn .btn a.official .logo {} #h_btn .btn a.official .logo span img {height: 35px;width: auto} #h_toggle_btn {position: fixed;display: block;width: 60px;height: 60px;top: 0;right: 0;z-index: 101;color: var(--text-high-color);background: var(--bg-grad-1);cursor: pointer;box-sizing: border-box;transition: all .3s linear;} #h_toggle_btn span {display: block;width: 26px;height: 1px;background: var(--text-high-color);position: absolute;left: 17px;transition: 0.5s ease-in-out; } #h_toggle_btn span:nth-child(1){top: 16px;} #h_toggle_btn span:nth-child(2){top: 22px;} #h_toggle_btn span:nth-child(3){top: 28px;} #h_toggle_btn.open {z-index: 10004;} #h_toggle_btn.open span {color: var(--text-high-color);} #h_toggle_btn.open span:nth-child(1) {top: 22px;transform: rotate(135deg);background: var(--text-high-color);} #h_toggle_btn.open span:nth-child(2) {width: 0;left: 50%;} #h_toggle_btn.open span:nth-child(3) {top: 22px;transform: rotate(-135deg);background: var(--text-high-color);} #h_toggle_btn div {position: absolute;width: 100%;bottom: .8rem;font-size: 1rem;text-align: center;} /* メニュー全体 */ #h_nav {background: rgba(255,255,255,.9);display: block;width: 280px;max-width: 100%;height: 100%;padding: 9rem 3rem 3rem;overflow-x: hidden;overflow-y: auto;position: fixed;right: 0;top: 0;z-index: 100;visibility: hidden;transform: translateX(100%);webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: all .3s linear;box-sizing: border-box;} #h_nav.on {visibility: visible;transform: translateX(0px);} #h_nav li a {position: relative;display: block;padding: 1em;padding-left: 1.5em;border-bottom: 1px solid #f2f2f2;} #h_nav li a:before { position: absolute;top: 50%;left: 0px;transform: translateY(-50%);width: 0px;height: 0px;border: 0.3em solid transparent;border-left: 0.4em solid #3388dd;content: "";} #h_nav .link_btn {display: flex;justify-content: space-between;} #h_nav .link_btn a {margin-top:1.5rem;position: relative;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;align-items: center;width: 32%;/*height: 5rem;*/color: #fff;background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);box-sizing: border-box;transition: all .3s linear;border-radius: 5px} #h_nav .link_btn a .logo {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding:5px} #h_nav .link_btn a .logo .icon {content: "";width: 2rem;height: 2rem;/*margin-right: 1rem;*/line-height: 3rem;background: url(../img/instagram.png) center center;background-size: contain;margin-bottom:0;} #h_nav .link_btn a .logo span {font-size:70%;margin-top: 5px} /*Facebook*/ #h_nav .link_btn a.facebook {background:#1778F2 } #h_nav .link_btn a.facebook .logo .icon {background: url(../img/facebook.png) center center; background-size:contain} /*Youtube*/ #h_nav .link_btn a.youtube {background:#ee2d24} #h_nav .link_btn a.youtube .logo .icon {background: url(../img/youtube.png) center center; background-size:contain} }