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;
}
} h1, h2, h3, h4, h5, h6 {
font-weight: 600;
color: #000;
line-height: 150%;
}
.section-heading .en-title {
color: #DA4613;
font-size: 32px;
line-height: 150%;
}
.section-heading .section-title {
font-size: 48px;
font-weight: 700;
margin: 8px 0 0;
position: initial;
}
.fot-tsukubrdgothic {
font-family: Roboto Condensed, sans-serif;
font-weight: 300;
font-style: normal;
}
#case {
background: #FFFBF4; padding: 5em 0;
margin-bottom: 0px;
}
#column {
padding-bottom: 40px;
}  .primary-btn {
background: #fff;
border: solid 1px #DA4613;
border-radius: 9999px;
color: #DA4613;
padding: 16px 80px 16px 30px;
min-width: 140px;
text-align: center;
font-weight: 600;
font-size: 1.5em;
box-shadow: none;
position: relative;
}
.primary-btn:hover {
opacity: 0.5;
color: #DA4613;
}
.primary-btn::before {
content: "";
display: inline-block;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/btn-icon.svg) no-repeat;
width: 44px;
height: 44px;
position: absolute;
right: 8px;
top: 8px;
} .section {
margin-top: 10em;
}
.post-list__more {
margin-top: -70px;
text-align: right;
}
.slick-dots li {
width: 16px;
height: 16px;
margin: 0 12px;
}
.slick-dots li button:before {
content: "";
width: 16px;
height: 16px;
border-radius: 100px;
background: #DA4613;
}
.en-title {
color: #DA4613;
padding: 0 0 0 40px;
}
#case .section-heading .en-title {
color: #DA4613;
}
.en-title::before {
content: "";
display: inline-block;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/en-title-icon.svg) no-repeat;
width: 32px;
height: 32px;
position: absolute;
left: 0;
top: 8px;
}
@media (max-width:767px) {
.section-heading .en-title {
color: #DA4613;
font-size: 32px;
line-height: 150%;
text-align: left;
}
.section-heading .section-title {
font-size: 32px;
font-weight: 700;
margin: 8px 0 0;
text-align: left;
}
.post-list__more {
margin-top: 10px;
text-align: left;
}
} #strength{
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/strength-bg.jpg) no-repeat;
background-size: 100%;
margin-top: 0;
padding: 10em 0;
}
#strength .section-heading {
text-align: center;
}
#strength .en-title {
padding: 0;
}
#strength .en-title::before {
left: 590px;
}
.strength-intro-box {
text-align: center;
margin-top: 10em;
}
.strength-intro-box p {
font-size: 1.5em;
font-weight: 600;
}
.strength-intro {
display: flex;
align-items: center;
}
.strength-intro h3 {
padding: 10px;
background-color: #DA4613;
color: #fff;
font-size: 2.4em;
width: 48%;
margin: 0;
}
.strength-intro p {
font-size: 2.2em;
font-weight: 600;
padding: 16px;
margin: 0;
}
.strength-box {
padding: 1em 2em;
background: transparent;
border: none;
min-height: 100px;
}
.strength-box h3{
color: #000;
text-align: left;
font-size: 1.8em;
}
.strength-box hr {
height: 3px;
background-color: #000;
border: none;
}
.strength-box .en-strength {
font-size: 2em;
}
.strength-boxes {
margin-top: 4em;
}
.strength-box p {
line-height: 2;
}
.red {
color: #DA4613;
}
@media (max-width:1441px) {
.section {
margin-top: 5em;
}
#strength {
padding: 4em 0;
}
.strength-intro-box {
margin-top: 3em;
}
}
@media (max-width:767px) {
#strength .en-title {
padding: 0 0 0 40px;
}
#strength .en-title::before {
left: 0;
}
}
@media (max-width:767px) {
#strength {
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/strength-bg_sp.jpg) no-repeat;
padding: 32px 0;
background-size: 100% 164px;
}
.strength-intro-box {
margin-top: 56px;
}
.strength-intro {
display: block;
}
.strength-intro h3 {
width: 100%;
font-size: 1.8em;
padding: 4px;
}
.strength-intro p {
font-size: 1.8em;
padding: 8px;
}
.strength-boxes {
margin-top: 0;
}
.strength-box {
padding: 0;
}
.strength-box h3 {
margin: 1rem 0;
}
} .service-boxes {
display: grid;
gap: 2%;
grid-template-columns: 74% 24%;
margin-top: 4em;
}
.sub-title {
position: relative;
font-size: 1.5em;
}
.sub-title::before {
content: "";
width: 50px;
height: 5px;
background-color: #DA4613;
position: absolute;
left: 0;
top: 40px;
}
.service-list {
margin-top: 50px;
}
@media (max-width:767px) {
.section {
margin-top: 1em;
}
.service-boxes {
display: block;
}
.service-box h3 {
text-align: left;
}
} #column .post-list_inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px
}
#column .post-list__link {
padding: 30px;
}
#column .post-list {
margin-top: 3em;
}
@media (max-width:1440px) {
#recruit .post-list__item {
height: 320px;
}
}
@media (max-width:767px) {
#column .post-list {
overflow-x: scroll;
white-space: nowrap;
}
#column .post-list_inner {
display: inline-flex;
gap: 0;
}
#column .post-list__item {
width: 220px;
margin-right: 10px;
}
#column .post-list__link {
padding: 15px;
}
} #contact-box {
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/contact-bg.jpg) no-repeat;
margin: 0;
}
#contact-box .en-title {
color: #fff;
font-size: 32px;
}
#contact-box .section-title {
color: #fff;
}
#contact-box .en-title::before {
content: "";
min-width: 32px;
height: 32px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/icon-circle.svg) no-repeat center / contain;
}
.contact-wrap {
display: grid;
grid-template-columns: 2fr 1fr;
align-items: center;
}
.contact-box__text {
width: 100%;;
line-height: 2;
margin-top: 2em;
}
@media (max-width:767px) {
.contact-wrap {
display: block;
}
.contact-box__btn {
width: 45%;
padding: 0;
margin: auto;
}
.contact-wrap .section-heading {
margin: 0;
}
.contact-wrap .contact-box__text {
margin-top: 1em;
}
#contact-box {
padding: 20px 0;
}
} #footer {
background-color: #efefef;
}
.footer-nav {
border: none;
padding: 0 80px 0 0;
}
.footer-navi__list{
column-count:3; column-gap:40px;
}
.footer-navi__list li{
break-inside: avoid;
}
.site-address {
background-color: #DA4613;
color: #fff;
display: flex;
justify-content: space-between;
padding: 2em 12em;
}
.site-address p {
color: #fff;
margin: 0 1em;
}
#footer .menu-item a {
border-bottom: solid 1px #545454;
color: #545454;
font-size: 20px;
font-weight: 600;
line-height: 2;
padding: 0.5em 0;
display: block;
width: 100%;
}
#footer .sub-menu .menu-item a {
border: none;
font-size: 18px;
font-weight: 400;
}
.footer-navi__list li:not(:last-of-type) {
margin: 0;
}
.corp-info {
width: 20%;
}
.corp-address {
font-size: 16px;
line-height: 2;
}
.footer-link {
display: flex;
}
@media (max-width:767px) {
.footer-inner {
display: flex;
flex-direction: column-reverse;
}
.footer-nav {
padding: 0;
}
#footer .menu-item a {
font-size: 16px;
}
#footer .sub-menu .menu-item a { 
font-size: 14px;
padding: 4px 0;
}
.footer-navi__list {
column-count: 2;
column-gap: 14px;
}
.corp-info {
width: 100%;
}
.corp-address p {
margin: 4px 0;
font-size: 14px;
}
.site-address{
padding: 1.5rem 15px;
display: block;
text-align: left;
}
.site-address p {
margin-right: 10px;
}
.footer-link {
margin-bottom: 1rem;
}
} .post-list__slide {
width: 22vw;
margin-right: 24px;
}
.post-list-slider {
padding: 4em 0;
}
.post-list--full {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.post-list {
position: relative;
} .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
cursor: pointer;
z-index: 999;
} .slider-btn--prev {
left: 60px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/btn-icon_2.svg) no-repeat center;
width: 70px;
height: 70px;
}
.slider-btn--next {
right: 60px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/btn-prev.svg) no-repeat center;
width: 70px;
height: 70px;
}
.slick-dotted.slick-slider {
margin: 0;
} .slider-btn--prev::before {
transform: rotate(-135deg);
}
.slider-btn--next::before {
transform: rotate(45deg);
}
.tag {
color: #DA4613;
font-size: 12px;
background-color: #fff;
border-radius: 5px;
padding: 4px;
border: solid 1px #DA4613;
margin: 0 8px 8px 0;
}
.post-list__link {
padding: 8px 16px;
}
#case .post-list__item {
height: 410px;
}
.tag-box {
display: flex;
padding: 0 16px ;
flex-wrap: wrap;
}
.post-list__title {
margin-top: 8px;
}
@media (max-width:1440px) {
#case .post-list__item {
height: 350px;
}
}
@media (max-width:767px) {
.post-list__slide {
width: 80vw;
}
.post-list__item {
width: 100%;
}
.slick-dots li button:before {
width: 8px;
height: 8px;
}
.slick-dots li {
margin: 0;
}
.slider-btn {
top: 100%;
}
.slider-btn--prev {
left: 15px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/btn-icon_2_sp.svg) no-repeat center;
width: 44px;
height: 44px;
}
.slider-btn--next {
right: 15px;
background: url(//cajiya.co.jp/wp-content/themes/cajiya/assets/img/btn-prev_sp.svg) no-repeat center;
width: 44px;
height: 44px;
}
.post-list-slider {
padding: 3em 0;
}
.post-list {
overflow-x: visible;
}
} .intview-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
margin-top: 3em;
}
#recruit .post-list__link img {
margin: 1em 0  0 auto;
}
#recruit .post-list__link {
padding: 1em;
}
.post-list__slide .post-list__title {
color: #000;
}
#recruit .post-list__item {
height: 390px;
}
.recruit-text p {
line-height: 2;
}
@media (max-width:767px) {
#recruit .post-list {
margin-bottom: 5em;
}
.intview-list {
display: block;
}
.intview-list a img {
margin-bottom: 2rem;
}
}