@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');

@import "compass/css3";


/*----- トップページ 設定 ----------------------------------------------------*/

/*----- スライダー 設定 ----------------------------------------------------*/

div#sliderWrap{ width:100%; float:left; }
div.slideArea{ position:relative; width:100%; float:left; }


.slider-img img {
  height: auto;
  width: 100%;
}

div.slider_overlay{ position:absolute; top:0; width:100%; height:100%; }
div.slider_overlay h1{ position:absolute; right:20vw; top:10px; width:10vw; }
div.slider_overlay h2{ position:absolute; left:20vw; bottom:20px; width:30vw; }
div.slider_overlay_btn{ position:absolute; right:20vw; bottom:10px; width:200px; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.slider_overlay h1{ right:10px; top:10px; width:15vw; }
    div.slider_overlay h2{ left:10px; bottom:10px; width:45vw; }
    div.slider_overlay_btn{ display:none; }
    
}

/*----- 共通 設定 ----------------------------------------------------*/

section.sectionWrap{ position:relative; width:100%; padding:20px 0; float:left; }
div.sectionArea{ width:1100px; margin:0 auto; }

.sectionWrap2{ background:url("../../img/index/sectionwrap2_bg.jpg") no-repeat; background-size:cover; color:#fff; }
.sectionWrap4{ background-color:#00055a; color:#fff; }
.sectionWrap5{ background-color:#f0f0f0; }
.sectionWrap5 h2.sectionTit{ color:#7993db; }
.sectionWrap7{ background-color:#e7ffe0; }

h2.sectionTit{ width:100%; font-size:2em; letter-spacing:0.2em;  font-weight:bold; text-align:center; float:left; }
h2.sectionTit::before{ content:"・"; color:#ff0000; }
div.sectionText{ width:100%; padding:20px 0 0; font-size:1.4em; font-weight:bold; text-align:center; float:left; }

div.sectionCatch{ position:absolute; top:50px; width:30px; }
/* 左側 */
.sectionCatch_L {
	left: 50%;
	margin-left: -570px; /* sectionAreaの左端に合わせる(1100px/2) */
	transform: translateX(-100%); /* さらに外側に出す */
	margin-right: 30px; /* sectionAreaとの間隔 */
}

/* 右側 */
.sectionCatch_R {
	right: 50%;
	margin-right: -570px; /* sectionAreaの右端に合わせる(1100px/2) */
	transform: translateX(100%); /* さらに外側に出す */
	margin-left: 30px; /* sectionAreaとの間隔 */
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.sectionArea{ width:96%; }
    
    h2.sectionTit{ font-size:1.6em; letter-spacing:0.2em; }
    
    div.sectionText{ font-size:1.1em; }
    
    div.sectionCatch{ display:none; }
    
    
}



/*----- イントロ 設定 ----------------------------------------------------*/

div.introWrap{ position:relative; width:90%; height:364px; padding:0; margin:50px 5% 0; border-radius:0 90px 0 0; background-color:#00055a; background:url(../../img/index/intro_bg.png) no-repeat; background-size:contain; background-position:top center; float:left; }

div.introBox{ width:720px; float:left; background-color:#fff; }
div.introBox h2{ width:100%; font-size:1.4em; font-weight:bold; letter-spacing:0.2em; float:left; }
div.introBox h2::before {
	content: "・";
	color: #ff0000;
	margin-right:0em; /* ← 点と文字の間隔調整 */
}

div.introBox h2 .line2 {
	display: inline-block;
	margin-left: 1.2em; /* ← 「・」の分だけ右に寄せる */
}
.introText{ width:90%; padding:20px 2% 20px 8%; line-height:2em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.introWrap{ position:relative; width:98%; height:auto; padding:20px 2% 20px 0; margin:0; border-radius:0 20px 0 0; background-color:#00055a; background:#00055a; float:left; }
    
    div.introBox{ width:100%; }
    div.introBox h2{ font-size:1.2em; letter-spacing:0.1em; }
    .introText{ width:96%; padding:20px 2% ; line-height:1.7em; float:left; }
   
}


/*----- 会社案内 設定 ----------------------------------------------------*/

div.profileBox{ display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; padding:20px 0; float:left; }

div.profileBox_Detail{ width:48%;  }
dl.company-info{ width:100%; font-size:1.2em; float:left; }
.company-info div{ width:96%; padding:15px 2%; border-bottom:1px solid #fff; float:left; }
.company-info div dt{ width:16%; text-align:right; float:left; }
.company-info div dd{ width:80%; float:right; }
.company-info div dd a{ color:#fff; }

div.profileBox_Googlemap{ width:48%; }
.map {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    
/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.profileBox_Detail{ width:100%; }
    dl.company-info{ font-size:1.1em; }
    .company-info div dt{ width:20%; text-align:right; float:left; }
    .company-info div dd{ width:76%; float:right; }
    
    div.profileBox_Googlemap{ width:100%; padding-top:20px; }
    
    .map {
        padding-top: 56.25%;
        /* 16:9のアスペクト比 */
    }
    
}

/*----- 事業内容 設定 ----------------------------------------------------*/

div.productList{ display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:20px 0; gap:10px 0; float:left; }
div.productList_Box{ width:24%; }
.productList_Box_img{ width:100%; float:left; }
.productList_Box_img img{ border-radius:15px; }
.productList_Box_text{ position:relative; width:100%; float:left; }
.productList_Box_text::before{
    display:inline-block;
    content: '';
    width: 14px;
    height: 14px;
    border-top: solid 1px #272626;
    border-right: solid 1px #272626;
    -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    margin:10px;
    float:left;
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.productList_Box{ width:48%; }
    
    .productList_Box_text::before{ display:none; }
    
}


/*----- 働く魅力 設定 ----------------------------------------------------*/

div.meritsList{ display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:20px 0; gap:10px 0; float:left; }

div.meritsList_Box{ box-sizing:border-box; width:31%; padding:20px 0; border:1px solid #fff; text-align:center; float:left; }
.meritsList_Box_tit{ width:100%; font-size:1.4em; font-weight:bold; float:left; }
.meritsList_Box_icon{ width:80%; padding:20px 10%; float:left; }
.meritsList_Box_text{ width:100%; float:left; }
.meritsList_Box_text::before{
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 10px;
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.meritsList_Box{  width:48%; }
    
    .meritsList_Box_text::before{ display:none; }    
    
}
    

/*----- 採用情報 設定 ----------------------------------------------------*/

div.recruit_img{ width:90%; padding:20px 5%; float:left; }
div.recruit_img img{ border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,0.2); }


div.recruitDetail{ width:80%; padding:20px 10%; float:left; }
.recruitDetail dl{ width:100%; font-size:1.2em; float:left; }
.recruitDetail dl div{ width:96%; padding:15px 2%; border-bottom:1px solid #b8b8b8; float:left; }
.recruitDetail dl div dt{ width:16%; text-align:right; letter-spacing:0.2em; float:left; }
.recruitDetail dl div dd{ width:80%; float:right; }

div.recruitDetail_Bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; width:80%; padding:20px 10%; text-align:center; float:left; }
.recruitDetail_Bottom a{ display:block; width:31%; }
.recruitDetail_Bottom a:hover{ opacity:0.8; }
    
/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.recruitDetail{ width:100%; padding:20px 0; }
    .recruitDetail dl{ font-size:1.1em; }
    .recruitDetail dl div dt{ width:20%; letter-spacing:0em; }
    .recruitDetail dl div dd{ width:76%; float:right; }
    
    div.recruitDetail_Bottom{ display:flex; flex-direction: column; gap:20px; width:80%; }
    .recruitDetail_Bottom a{ width:80%; margin:0 10%; }
    
    }

/*----- Instagram 設定 ----------------------------------------------------*/

div.instagram_feed{ width:80%; padding:20px 10%; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.instagram_feed{ width:100%; padding:20px 0%; }
    
}

/*----- お問合せ 設定 ----------------------------------------------------*/

div.form_tel{ width:80%; padding:20px 10%; float:left; }
div.form_tel a:hover{ opacity:0.8; }

div.formWrap{ width:80%; padding:20px 10%; flaot:left; }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.form_tel{ width:100%; padding:20px 0%; }

    div.formWrap{ width:100%; padding:20px 0%; }
    
}




/*----- スクロールアニメーション 設定 ----------------------------------------------------*/

/* === Scroll Reveal 基本 === */
.js-reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}

/* 表示状態 */
.js-reveal.is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* バリエーション：下→上（既定）、左→右、右→左、ズーム */
.js-reveal[data-reveal="left"] {
	transform: translate3d(-24px, 0, 0);
}
.js-reveal[data-reveal="right"] {
	transform: translate3d(24px, 0, 0);
}
.js-reveal[data-reveal="zoom"] {
	transform: scale(.96);
}
.js-reveal.is-inview[data-reveal="zoom"] {
	transform: scale(1);
}

/* 遅延（連番でステップ表示） */
.js-reveal[data-delay="1"] { transition-delay: .08s; }
.js-reveal[data-delay="2"] { transition-delay: .16s; }
.js-reveal[data-delay="3"] { transition-delay: .24s; }
.js-reveal[data-delay="4"] { transition-delay: .32s; }

/* SPでも滑らかに */
@media screen and (max-width:1200px){
	/* 既存ヘッダーは固定のまま。:contentReference[oaicite:2]{index=2} */
	/* ここに特別な指定は不要 */
}