body {
font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic", "ＭＳ ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#header {
width: max(70%, 1000px);
margin: 0 auto;
}
.renewal-logo {    
width: 200px;
z-index: 1000;
padding: 20px 0;
}
.header-container {
position: relative;
display: flex;
gap: 50px; }
#header-navi .navi-item .header-contact {
display: flex;
margin-left: 10px;
}
#header-navi .navi-item .header-contact a {
color: #fff;
background-color: #DA4613;
height: 36px;
margin: auto 0;
border-radius: 4px;
} #header-navi .header-contact a {
color: #fff;
background-color: #DA4613;
height: 36px;
margin: auto 0;
border-radius: 4px;
}
@media (min-width: 768px) {
.home #header-navi .navi-item .header-contact {
display: none;
}
}
@media (max-width: 767px) {
#header-navi .navi-item .header-contact {
display: none;
}
}
@media (max-width: 1399px) {
.header-container {
gap: 10px;
}
}
@media (max-width: 1200px) { 
.renewal-logo {
width: 160px;
}
}
#header-navi{
color:#da4612;
}
#header-navi .navi-container {
gap: 20px;
}
.navi-item {
flex-direction:row;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: center;
}
#header-navi .navi-item li a {
color:#000;
padding: 10px 20px;
text-decoration: none;
}
@media (max-width: 1200px) {
#header-navi .navi-item li a {
padding: 10px 12px;
}
}
@media (max-width: 1470px) {
#header-navi .navi-item {
gap: 0;
}
}
@media (min-width: 768px) {
#header-navi,
.navi-container,
.navi-item,
.navi-item > * {
height: 100%;
}
.navi-item > li > a {
height: 100%;
display: grid;
place-content: center;
}
.menu-section .sp-menu-cards {
display: none;
} .menu-news > a {
position: relative;
}
.menu-news.has-new > a::after {
content: "";
position: absolute;
top: 38px;
right: 4px;
width: 8px;
height: 8px;
background: #DA4613;
border-radius: 50%;
display: block;
}
.menu-news > a::after {
display: none;
} .mega-menu-wrap {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100px;
left: 0;
right: 0;
margin: 0 calc(50% - 50vw);
padding: 32px calc(50vw - 50%);
background: linear-gradient(90deg, rgba(217, 107, 11, 0.95) 0%, rgba(218, 70, 19, 0.95) 100%);
padding: 32px 0;
z-index: 1000;
color: #fff; transform: translateY(10px);
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
} .header-menu li.menu-item:hover > .mega-menu-wrap {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.menu-item:has(.mega-menu-wrap) > a {
position: relative;
}
.menu-item-has-children > a {
position: relative;
}
.header-menu li.menu-item > a::before {
content: "";
width: 150px;
aspect-ratio: 1/cos(80deg);
clip-path: polygon(50% 0,100% 100%,0 100%);
background: linear-gradient(180deg, #DB651A 0%, #DB641A 100%);
position: absolute;
bottom: 5.5px;
left: 50%;
transform: translateX(-50%) translateY(10px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
} .header-menu li.menu-item:has(.mega-menu-wrap):hover > a::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
#header-navi .navi-item li a:hover {
color: rgba(217, 107, 11, 1.0) ;
opacity: 1;
}
.submenu-link img:hover {
opacity: 0.8;
}
.menu-container {
width: max(70%, 1000px);
margin-inline: auto;
}
.menu-contents {
display: grid;
grid-template-columns: max-content 1fr;
align-items: flex-start;
}
.menu-header {
border-right: solid 1px #fff;
padding: 2em 2em 3em 0;
margin-right: 2em;
}
.menu-title {
font-size: max(42px, min(3vw, 52px));
color: #fff;
margin: 0;
}
.menu-subtitle {
font-size: min(1.5em, 2em);
font-weight: 600;
margin: 0;
}
.menu-cards {
display: grid;
grid-template-columns: 1fr;
gap: 32px 0;
}
.menu-heading {
font-size: 16px;
font-weight: 600;
margin: 0 0 1em 0;
display: flex;
align-items: center;
gap: 8px;
}
.menu-heading::before {
content: "";
min-width: 24px;
height: 24px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/icon-circle.svg) no-repeat center / contain;
}
.submenu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
}
#header-navi .navi-item li a.submenu-link {
padding: 0;
}
.submenu-bnr {
border-radius: 8px;
}
}
@media (min-width: 1800px) {
.menu-item:has(.mega-menu-wrap):hover > a::before {
bottom: 5.5px;
}
}
@media (min-width: 840px) {
.submenu {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
#header {
width: 100%;
}
#sp-navi {
display: inline-block;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: 0px 2px 5px 0px rgba(218, 70, 18, 0.4);
cursor: pointer;
margin-top: 5px;
}
.header-contact {
color: #fff;
background-color: #DA4613;
box-shadow: none;
}
.renewal-logo{
max-width: 120px;
z-index: 999;
padding: 10px 0;
}
.renewal-header{
margin:15px;
}
#header-navi .navi-container {
flex-direction: column;
padding: 7em 0;
position: absolute;
top:0px;
right: 0;
width: 100%;
z-index: 998;
}
.is-cloth{
display: none;
}
.is-open {
display: block;
}
#header-navi .navi-item {
flex-direction: column;
text-align: center;
}
#header-navi .navi-item li {
background-color: #da4612;
color: #fff;
width: 100%;
text-align: left;
}
#header-navi .navi-item li a {
color: #fff;
padding: 1em 20px;
border-bottom: solid 1px #fff;
display: block;
width: 100%;
position: relative;
}
#header-navi .navi-item li a::after {
content: "";
width: 17px;
height: 17px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/icon-link.svg) no-repeat center / contain;
position: absolute;
top: 1em;
right: 20px;
}
.navi-item .menu-item a {
font-size: 1.2em;
}
.sp-menu-cards {
text-align: center;
display: grid;
background-color: #fff;
gap: 10px;
}
.sp-menu-cards .menu-card .submenu {
display: block;
}
#header-navi .sp-menu-cards .menu-card .submenu li {
padding: 16.8px 0 16.8px 30px;
border-bottom: solid 1px #ffcfcf;
background-color: #fff;
}
#header-navi .sp-menu-cards .menu-card .submenu li a {
padding: 0;
font-size: 1em;
border-bottom: none;
color: #000;
position: relative;
}
#header-navi .sp-menu-cards .menu-card .submenu li a::after {
content: "";
width: 17px;
height: 17px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/icon-link-red.svg) no-repeat center / contain;
position: absolute;
top: 0;
right: 20px;
}
.sp-menu-cards .menu-heading {
background-color: #fff;
color: #da4612;
padding: 1em 40px;
margin: 0;
text-align: left;
position: relative;
border-bottom: solid 1px #da4613;
}
.sp-menu-cards .menu-heading::before {
content: "";
width: 17px;
height: 17px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/icon-circle-red.svg) no-repeat center / contain;
position: absolute;
top: 14px;
left: 20px;
} .menuOpen{
display:none;
}
.menuClose {
display:block;
cursor: pointer;
text-align: right;
display: block;
position: absolute;
top: 15px;
right: 25px;
z-index: 1000;
}
.menuClose-icon{
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
width: 3em;
height: 0.2em;
background: #ce3400;
border-radius: 0.1em;
position: relative;
transform: rotate(30deg);
}
.menuClose-icon:before {
display: block;
content: '';
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(-60deg);
} .menu-section .menu-cards {
display: none;
}
.menu-section .menu-header {
display: none;
}
.navi-item li:nth-child(2) a:focus {
pointer-events: none;
}
.sub-menu li a {
padding-left: 40px;
}
.menu-box{
margin-left: auto;
padding: 10px 0;
}
.overlay-b {
background-color: rgb(255 255 255 / 90%);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: auto;
z-index: 2;
}
}
@media (min-width: 768px) {
#sp-navi,
.menu-close {
display: none;
}
.navi-item a {
display: block;}
#header-navi .navi-container {
display: block;
}
} .mainvisual{
width: max(70%, 767px);
margin: 0 auto;
}
.main-visual-titel{
font-family: "Noto Sans JP";
font-size: 5.5em;
font-weight: bold;
}
.main-color{
color:#DA4613;
}
.main-visual-text{
line-height: 200%;
letter-spacing: 0.2em;
color: #444444;
margin-top: 2em;
width: 50%;
}
.mv-text-container {
padding: 13.5vw 0 5vw 0;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/mv-item-bg.png) no-repeat;
background-size: 40%;
background-position: 3.5em 1em;
}
.mv-img{
position: relative;
}
.mv-img-container{
pointer-events:none;
position: absolute;
width: 45%;
top: 90px;
right: -15px;
}
@media (min-width: 1800px) {
.mv-img-container {
width: 50%;
top: -30px;
right: -30px;
}
.main-visual-text{
width: 40%;
}
.main-visual-titel{
font-size: 6.5em;
}
.mv-text-container{
padding: 11vw 0 5vw 0;
background-size: 30%;
background-position: 4em 2em;
}
}
.carousel-banner{
margin: 20px 0;
}
.banner-container {
max-width: 1400px;
margin: 0 auto;
}
@media (max-width: 1399px) {
.banner-container{
margin: 0 15px;
}
}
@media (max-width: 1200px) {
.main-visual-titel {
font-size: 3.6em;
}
.mv-text-container{
padding: 10vw 0 15vw 0;
}
}
@media (max-width: 767px) {
.mainvisual{
width: 100%;
padding: 0 15px;
}
.mv-container{
display: flex;
flex-direction: column-reverse;
text-align: center;
}
.mv-text-container{
padding: 10vw 0 5vw 0;
background-size: 50%;
margin:0;
background-position: top left;
}
.mv-img-container{
position: relative;
top: -10px;
left: 0;
width: 100%;
}
.main-visual-titel {
font-size: 3.5em;
}
.main-visual-text {
margin: 2em auto;
text-align: left;
width: 90%;
}
} @media (min-width: 1501px){
.left-contact-btn {
position: absolute;
top: 700px;
left: 80px;
}
}
@media (max-width: 1500px){
.left-contact-btn {
position: absolute;
top: 680px;
left: 20px;
width: 140px;
}
}
@media (max-width: 1200px){
.left-contact-btn {
position: absolute;
top: 480px;
left: 20px;
width: 120px;
}
}  
@media (max-width: 767px){
.left-contact-btn {
display: none;
}
}