/**
Theme Name: JIN:R child
Template: jinr
Author: CROOVER Inc.
Author URI: https://croover.co.jp
Version: 1.00
*/


@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&display=swap');

/* 既存CSS変更記述 */

.home #mainContentInner{
margin: 0 auto!important;
padding: 0!important;
width: 100%!important;
max-width: 100%!important;
}
.home.page-template-template-full-width #jinrArticle,.home.post-template-template-full-width #jinrArticle,.home.template-full-width #jinrArticle {
max-width: 100%!important;
}
.tuyomi{
max-width: 1200px;
margin: auto;
}

.about-box > section{
background:none!important;
}

.about-box div.d--fullwidth-pad40{
max-width:1200px!important;
padding:40px!important;
background:#FFF;
box-sizing:border-box;
}


/******* FV用 *******/
.fv-main-box{
margin: 0 auto -450px!important;
padding: 0!important;
}
.hero-section {
font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Arial, sans-serif;
position: relative;
width: 100%;
min-height: 1000px;
overflow: hidden;
background: #f5f5f5;
}
.background-collage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.bg-slot {
position: absolute;
overflow: hidden;
}

.fv-img1  { width:15%; height:20%; top:0;    left:0;   z-index:1;  }
.fv-img2  { width:30%; height:20%; top:0;    left:10%; z-index:0;  }
.fv-img3  { width:20%; height:20%; top:0;    left:30%; z-index:1;  }
.fv-img4  { width:30%; height:20%; top:0;    right:30%;z-index:0;  }
.fv-img5  { width:30%; height:30%; top:0;    right:0;  z-index:1;  }
.fv-img6  { width:30%; height:15%; top:20%;  right:0;  z-index:1;  }
.fv-img7  { width:30%; height:60%; top:10%;  left:0;   z-index:0;  }
.fv-img8  { width:40%; height:40%; top:30%;  left:20%; z-index:-1; }
.fv-img9  { width:25%; height:20%; top:50%;  right:20%;z-index:-1; }
.fv-img10 { width:30%; height:40%; top:50%;  right:0;  z-index:0;  }
.fv-img11 { width:50%; height:50%; bottom:0; left:0;   z-index:-2; }
.fv-img12 { width:50%; height:50%; bottom:0; right:0;  z-index:-2; }
.fv-img13 { width:30%; height:20%; top:30%;  right:0;  z-index:0;  }

.img-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9);
opacity: 1;
transition: opacity 1.2s ease-in-out;
animation: kenBurns 8s ease-in-out infinite alternate;
}
.img-layer.hidden {
opacity: 0;
}
.bg-slot:nth-child(2n)  .img-layer { animation-name: kenBurns2; }
.bg-slot:nth-child(3n)  .img-layer { animation-name: kenBurns3; }
.bg-slot:nth-child(5n)  .img-layer { animation-duration: 10s; }
.bg-slot:nth-child(7n)  .img-layer { animation-duration: 6s;  }

@keyframes kenBurns {
0%   { transform: scale(1.0)  translate(0,    0   ); }
100% { transform: scale(1.1)  translate(-2%,  -2% ); }
}
@keyframes kenBurns2 {
0%   { transform: scale(1.08) translate(2%,   1%  ); }
100% { transform: scale(1.0)  translate(0,    0   ); }
}
@keyframes kenBurns3 {
0%   { transform: scale(1.0)  translate(1%,   -1% ); }
100% { transform: scale(1.12) translate(-1%,  2%  ); }
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.7) 100%);
z-index: 2;
}

/* メインコンテンツ */
.hero-content {
position: relative;
z-index: 3;
max-width: 1400px;
height: 600px;
margin: 0 auto;
}

/* 左側コンテンツ */
.content-left {
position: absolute;
top: 110px;
left: 0;
width: 100%;
}

/* キャッチコピー */
.catch-copy {
font-size: 5.5rem;
font-weight: bold!important;
color: #1a1a1a;
line-height: 1.3;
letter-spacing: 0.05em;
background: #FFF;
box-shadow: 0 0 0 3px #000;
padding: 40px 40px 90px 100px;
width: 1100px;
}

.catch-copy .highlight {
color: #0e6596;
font-size: 6rem;
font-weight: bold;
}
.catch-copy .quote {
font-family: "Aoboshi One", serif;
color: #828a8e;
font-weight: 400;
padding: 0 10px;
}
.catch-copy .quote2 {
font-family: "Aoboshi One", serif;
color: #f4dc35;
font-weight: 400;
padding: 0 10px;
}
.copytxt{
color: #0e6596;
font-weight: bold;
}

/* 説明文ボックス */
.description-box {
background: #f4d03f;
padding: 25px;
position: relative;
box-shadow: 0 0 0 3px #000;
top: -50px;
left: 100px;
width: 750px;   
z-index: 90;
}

.description-box p {
font-size: 1rem;
color: #1a1a1a;
line-height: 1.8;
margin:0!important;
padding:0 0 20px!important;
}

.description-box p:last-child {
margin-bottom: 0;
}

.company-name {
font-weight: 700;
}

/* CTAボタン */
.cta-button {
display: inline-flex;
align-items: center;
gap: 15px;
background: #3d5a6d;
color: white;
padding: 20px 0;
font-size: 1.6rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 0 2px #000;
left:200px;
right:0;
position: absolute;
bottom: 20px;
z-index: 100;
margin:auto;
width:300px;
text-decoration:none!important;
justify-content:center;
display: block;
text-align:center;
}

.cta-button:hover {
background: #2c4454;
transform: translateY(-2px);
}

.cta-button::after {
content: '';
background:url(/img/yaji-w.svg)no-repeat;
width:10px;
height:10px;
display:inline-block;
margin:0 0 0 15px;
}

.cta-button:hover::after {
transform: translateX(5px);
}

/* 右側 - メイン画像 */
.main-image{
position: absolute;
height: 500px;
width:auto;
top:-130px;
right: 0;
}

.main-image img{
width: auto!important;
height: 100%!important;
}

/* 装飾要素 */


/* お問い合わせボタン（右上） */
#globalMenu{
position:relative;
}
#globalMenu nav ul{
position:relative;
padding:0 190px 0 0;
}
#globalMenu nav ul li.menu-item-84{
height:110px;
position:absolute;
right:0;
box-sizing:border-box;
}
#globalMenu nav ul li.menu-item-84 a{
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #1a1a1a;
padding:32px 0 0 0!important;
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
border-radius:0 0 10px 10px;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
transition: all 0.3s ease;
display: inline-block;
display:block;
height:130px;
line-height:130px;
width:170px;
position: absolute;
top: 0;
right:0;
z-index: 4;
color:#0e6596;
}
#globalMenu nav ul li.menu-item-84 a:before{
content:"";
background:url(/img/mail-icon.svg)no-repeat 100%;
width:50px;
height:50px;
display:flex;
position:absolute;
top:25px;
left:0;
right:0;
margin:auto;
}
#globalMenu nav ul li.menu-item-84 a:hover{
color:#527c95;
}
#globalMenu nav ul li.menu-item-84 a:hover:after{
display:none!important;
}
#globalMenu nav ul li.menu-item-84 a:hover:before{
opacity:0.8;
}
.sp-br{
display:none;
}

@media (max-width: 1160px) {
.catch-copy {
font-size: 5.0rem;
}
.catch-copy .highlight {
font-size: 5.5rem;
}
}
@media (max-width: 1110px) {
.catch-copy {
font-size: 4.5rem;
}
.catch-copy .highlight {
font-size: 5.0rem;
}
}
@media (max-width: 1060px) {
.catch-copy {
font-size: 4.0rem;
}
.catch-copy .highlight {
font-size: 4.5rem;
}
}
/* レスポンシブ対応 - タブレット */
@media (max-width: 1024px) {
.fv-main-box{
margin: 0 auto -300px!important;
padding: 0!important;
}

.hero-section {
min-height: 800px;
}

.hero-content {
height:100%;
padding: 60px 30px;
}

.content-left {
position: absolute;
top: 150px;
left: 0;
width: 100%;
}

.catch-copy {
font-size: 3.5rem;
width: 100%;
padding: 30px 30px 70px 60px;
}

.catch-copy .highlight {
font-size: 4rem;
}

.description-box {
background: #f4d03f;
padding: 25px;
position: relative;
box-shadow: 0 0 0 3px #000;
top: -40px;
left:0;
width:100%;   
z-index: 90;
}

.description-box p {
font-size: 1.4rem!important;
color: #1a1a1a;
line-height: 1.8;
margin:0!important;
padding:0 0 20px!important;
}

.cta-button {
display: inline-flex;
align-items: center;
gap: 15px;
background: #3d5a6d;
color: white;
padding: 15px 0px;
font-size: 1.4rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 0 2px #000;
left:0;
right:0;
position: absolute;
bottom: 20px;
z-index: 100;
margin:auto;
width:300px;
text-decoration:none!important;
justify-content:center;
display: block;
text-align:center;
}

.main-image {
position: absolute;
height: 300px;
top:-160px;
right: -30px;
}

.main-image img{
height: 100%!important;
width: auto!important;
}
}

/* レスポンシブ対応 - スマホ */
@media (max-width: 768px) {
.sp-br{
display:block;
}

.hero-section {
height:100%;
padding-bottom: 40px;
}

/* 背景画像をスマホ用に調整 */
.bg-image.fv-img1 {
width: 30%;
height: 15%;
top: 0;
left: 0;
}
.bg-image.fv-img2 {
width: 40%;
height: 15%;
top: 0;
left: 30%;
}
.bg-image.fv-img3 {
display: none;
}
.bg-image.fv-img4 {
display: none;
}
.bg-image.fv-img5 {
width: 30%;
height: 20%;
top: 0;
right: 0;
}
.bg-image.fv-img6 {
width: 35%;
height: 15%;
top: 15%;
right: 0;
}
.bg-image.fv-img7 {
width: 35%;
height: 40%;
top: 15%;
left: 0;
}
.bg-image.fv-img8 {
width: 30%;
height: 25%;
top: 30%;
left: 35%;
}
.bg-image.fv-img9 {
display: none;
}
.bg-image.fv-img10 {
width: 35%;
height: 30%;
top: 55%;
right: 0;
}
.bg-image.fv-img11 {
width: 50%;
height: 30%;
bottom: 0;
left: 0;
}
.bg-image.fv-img12 {
width: 50%;
height: 30%;
bottom: 0;
right: 0;
}
.bg-image.fv-img13 {
width: 30%;
height: 15%;
top: 30%;
right: 0;
}

.hero-content {
padding: 30px 20px;
height: auto;
}
.content-left {
position: absolute;
top: 100px;
}
.catch-copy {
font-size: 3.5rem;
width: 100%;
padding: 25px 20px 70px 20px;
box-shadow: 0 0 0 2px #000;
}
.catch-copy .highlight {
font-size: 3.8rem;
}
.description-box {
padding: 20px;
width:100%;
left:0;
top: -40px;
box-shadow: 0 0 0 2px #000;
}
.description-box p {
font-size: 0.7rem;
line-height: 1.7;
}
.cta-button {
width:300px;
position: absolute;
justify-content: center;
padding:0;
box-shadow: 0 0 0 2px #000;
height: 60px;
line-height:60px;
}
.main-image {
position: absolute;
height: 300px;
right: -40px;
text-align: center;
top:-100px;
}

.main-image img{
height: 100%!important;
width: auto!important;
max-width: 100%!important;
}

.header-cta {
top: 15px;
right: 15px;
}

.header-cta-button {
padding: 10px 20px;
font-size: 0.9rem;
border-radius: 30px;
}
}
@media (max-width: 570px) {
.catch-copy {
font-size: 3.0rem;
width: 100%;
padding: 25px 20px 70px 20px;
box-shadow: 0 0 0 2px #000;
}
.catch-copy .highlight {
font-size: 3.5rem;
}
.main-image {
position: absolute;
height: 280px;
right: -80px;
text-align: center;
top:-100px;
}
}
/* さらに小さいスマホ対応 */
@media (max-width: 480px) {
.catch-copy {
font-size: 2.8rem;
padding: 25px 15px 40px 15px;
}
.catch-copy .highlight {
font-size: 3.2rem;
}
.description-box {
padding:15px;
width:100%;
left:0;
top: -10px;
box-shadow: 0 0 0 2px #000;
}
.description-box p {
font-size: 1.4rem!important;
line-height: 1.7;
}
.cta-button {
width:300px;
position: absolute;
justify-content: center;
padding:0;
box-shadow: 0 0 0 2px #000;
height: 50px;
line-height:50px;
font-size: 1.4rem!important;
bottom:-10px;
}
.main-image {
position: absolute;
height: 235px;
right: -70px;
text-align: center;
top:-75px;
}
}

@media (max-width: 410px) {
.main-image {
position: absolute;
height: 235px;
right: -120px;
text-align: center;
top:-75px;
}
}