@charset "utf-8";

#g-nav-list ul li a.a_top:link { color:#EBFF00; }
#g-nav-list ul li a.a_top:visited { color:#EBFF00; }
#g-nav-list ul li a.a_top:active { color:#EBFF00; }
.fright .ul_footer a.f_top:link { background:#EBFF00;}


/*ローディング*/

@media screen and (min-width:320px){
  #splash_text .splash_text_in p { font-size:37px; text-align:left; line-height:1em;letter-spacing:-0.2em; position:relative; margin:50vw 0 50px 0; font-weight:normal; }
}
@media screen and (min-width:375px){
  #splash_text .splash_text_in p { font-size:40px; }
}

@media screen and (min-width:414px){
  #splash_text .splash_text_in p { font-size:45px; }
}

@media screen and (min-width:768px){
  #splash_text .splash_text_in p { margin-top:40px; }
}

#splash_text .splash_text_in { max-width:100%; margin:0 auto; }
.splash_copyright { width:100%; margin:50px 0 0 0; }


#splash_text .splash_text_in span.splash_copyright{width:100%;display:block;position:fixed;top:48%;display:none;}
@media screen and (min-width:768px){
#splash_text .splash_text_in p { font-size:74px; line-height:1em;letter-spacing:-0.2em; position:relative; top:20vw; margin:0 0 50px 0; font-weight:normal; }
#splash_text .splash_text_in { max-width:900px; margin:0 auto; }
#splash_text .splash_text_in span { width:100%; text-align:left; font-size:16px; margin-top:50px; display:block; } 
#splash_text .splash_text_in span.splash_copyright{ width:900px; margin:50px auto 0 auto; display:none; text-align:left; position:fixed; top:55%;  }


}


.div_message { width:100%; height:100vw }
.div_message .contents { height:100%; }
@media screen and (min-width:768px) {
  .div_message { width:100%; height:initial; }
  .div_message .contents { height:100%; }
}

.header_wrap { width:100%; height: 250vw; margin-bottom:0px; background:none; position:relative; z-index:11; overflow:hidden; }
@media screen and (min-width:768px) {
.header_wrap { height:initial; margin-bottom:50px;}
}

/*そこで満足か*/
.div_message .contents img {  width:100%; margin:50vw 0 0 0;}
@media screen and (min-width:768px) {
  .div_message .contents img {  width:auto; margin:250px 0 100px 0;}
}




/*I-UNIT*/
.div_message h1 { width:100%; }
.div_message h1 img { width:100%;  }
@media screen and (min-width:768px) {
  .div_message h1 img { width:90%; margin-left:10%; }
}

.img_top_ceo { width:100%; height:auto; margin:0vw auto 0 auto; position:relative; z-index:-5; display:block; filter: grayscale(100%); /* モノクロにする */}
.p_lead { font-size:16px; font-weight:bold; line-height:1.8em; margin-top:50px; display:block; font-family: "游ゴシック体", YuGothic, "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.div_iunit { width:100%; height:150vw; margin-top:-10vw; padding-top:15vw; background:#313131; clip-path: polygon(0% 24%, 100% 15%, 100% 100%, 0% 90%); }
.div_iunit .div_ceo { width:90%; margin:-50px auto 0 auto; position:relative; z-index:10; }
.div_iunit .div_ceo .st_message { width:100%; font-size:30px; display:block; letter-spacing:-0.16em; line-height:1em; color:#fff; margin-bottom:20px; }

@media screen and (min-width:375px) {
  .div_iunit .div_ceo .st_message { font-size:36px; }
}

@media screen and (min-width:414px) {
  .div_iunit .div_ceo .st_message { font-size:40px; }
}

.div_iunit .div_ceo .sp_info { font-size:18px; color:#fff; margin-top:20px; }
.div_iunit .div_ceo .ul_ceo { display:block; }
.div_iunit .div_ceo .ul_ceo li { width:100%;  }
.div_iunit .div_ceo .ul_ceo li .div_entry { width:50%; margin-left:50%; }
@media screen and (min-width:768px) {

    .div_iunit { height:70vw; margin-top:-21vw;  clip-path: polygon(0% 32%, 100% 15%, 100% 100%, 0% 90%); padding:0 0 200px 0; }
    .div_iunit .img_top_ceo { width:65%; margin:0 auto 0 auto; z-index:10; display:block; position:absolute; bottom:15vw; left:50%; transform: translateX(-50%);}
    .div_iunit .div_ceo { width:75%; position:absolute; bottom:7vw; left:50%; transform: translateX(-50%);  z-index:10; }
    /*.div_iunit .div_ceo .st_message { font-size:90px; margin-bottom:20px; }*/
    .div_iunit .div_ceo .st_message { font-size:7vw; margin-bottom:20px; }
    .div_iunit .img_top_sankaku { width:30vw; z-index:initial; position:absolute; bottom:-7vw; z-index:10; }
    .div_iunit .div_ceo .sp_info { font-size:18px; color:#fff; margin-top:20px; }
    .div_iunit .div_ceo .sp_info small { font-size:16px; }
    .div_iunit .div_ceo .ul_ceo { display:flex; margin-top:50px; }
    .div_iunit .div_ceo .ul_ceo li { width:50%;  }
    .div_iunit .div_ceo .ul_ceo li .div_entry a img {transition: transform 0.3s ease; /* 画像の移動に0.3秒かけて滑らかにアニメーションする */}
    .div_iunit .div_ceo .ul_ceo li .div_entry a:hover img {transform: translateX(50px); /* ホバー時に画像を右に50px移動 */}
    .p_lead { font-size:18px; }


    
}

/*h1*/
.photo-container h1 { width:100%; transform: initial;}
h1 { width:100%; }
h1 .iunitcorpration { width:100%; }
.div_h1 .iunitcorpration { width:100%; }
@media screen and (min-width:768px) {
  .div_h1 .iunitcorpration { width:80%; margin-top:200px; }
}

/*h2*/
h2 { width:100%; font-size:54px; margin-bottom:10px; }
h2.h2_aboutus { width:100%; text-align:center; margin-left:0; }


.ul_about { width:100%; display:flex; flex-wrap:wrap; }
.ul_about li { width:100%; }
.ul_about li img { width:100%; }
@media screen and (min-width:768px) {
  h2 { font-size:9.5vw; font-family:"Nanum Myeongjo", serif; letter-spacing:-0.1em; font-weight:normal; margin-top:20px;}
  .ul_about li h2.h2_aboutus {text-align:right; margin-left:0; }
  .ul_about li { width:50%; }


}


.contents_wrap.back {
  background: url(../img/back.svg) no-repeat;
  background-position: center top 200px; /* 上部に200pxの空白を追加 */
  background-size:cover;
}

.st_members { font-size:24px; letter-spacing:-0.1em; margin-top:0; display:block; align-items:center; flex-wrap:wrap; }
.st_members p { width:100%; font-size:15px; text-align:center; display:inline-block; }
@media screen and (min-width:768px) {
  .st_members { font-size:24px; letter-spacing:-0.1em; margin-top:5vw; display:flex; align-items:center;}
  .st_members p { width:auto; font-size:18px; letter-spacing:0; margin-left:20px; text-align:left; }
}

@media screen and (min-width:768px) {
  .st_members { font-size:63px;}
}
.photo-container img { width:100%; height:100%; object-fit:cover; clip-path:initial;}

/*つかみとれ*/



/*動画*/
.div_movie { width:100%; margin:50px auto; display:block; text-align:center; }
.div_movie strong { width:100%; text-align:center; font-size:56px; font-family:"Nanum Myeongjo", serif; display:block; margin-bottom:30px; }
.div_movie iframe { width:100%; height:380px; }
@media screen and (min-width:768px) {
  .div_movie { margin:100px 0;}
  .div_movie iframe { width:710px; height:380px; }
  .div_movie strong { font-size:80px; color:#8d8d8d;} 
}

/*スタッフ*/
.column3.staff{ width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; }
.column3.staff li { width:100%; }
.column3.staff li img { width:100%; filter: grayscale(100%);}
.column3.staff li a:hover img { filter: grayscale(0%); /* ホバー時にモノクロを解除 */ }
.div_infotitle { width:60%; margin:-50px 0 20px 40%; display:inline-block;transform: skewX(-20deg);padding:.5em 1em;background: #EBFF00;font-size: 16px;}
.column3.staff li .div_infotitle span { width:100%; font-size:14px; transform: skewX(20deg); display: inline-block;}
.column3.staff li .div_infotitle strong { width:100%; font-size:18px; transform: skewX(20deg); display: inline-block;}
.column3.staff li .div_infotitle .arrow { width:40px; position:absolute; right:50px; bottom:20px; transform: skewX(20deg);}
.column3.staff li a:hover .div_infotitle .arrow {  transform: translateX(25px); transition: transform 0.3s ease; }
.column3 li.inline_sp .div_infotitle_sp { width:60%; margin:-20px 0 20px 45%; transform: skewX(-10deg);padding:.5em 1em;background: #EBFF00;font-size: 14px;}
.column3 li.inline_sp .div_infotitle_sp .arrow {  width:40px; transform: translateX(25px); transition: transform 0.3s ease; }
.column3 li.inline_sp .div_infotitle_sp strong { transform: skewX(10deg); display:inline-block;}

@media screen and (min-width:768px) {
  .column3.staff{ display:flex; justify-content:space-between; flex-wrap:initial; }
  .column3.staff { margin-top:50px; }
  .column3.staff li { width:30%; }
  .column3.staff li:nth-child(2) { margin-top:50px; display:block; }
  .column3.staff li:nth-child(3) { margin-top:100px; display:block;}
  .column3.staff li .div_infotitle { width:225px; background:url(../img/yellow_detail.svg)no-repeat; position:relative; margin:-100px 0 0 120px; padding-bottom:30px; display:block; }
  .column3.staff li .div_infotitle span { width:100%; text-align:center; font-size:14px; display:inline-block; }
  .column3.staff li .div_infotitle strong { width:100%; font-size:18px; display:inline-block; text-align:left; margin:0 0 0 20px; }
  .column3.staff li .div_infotitle .arrow { width:40px; position:absolute; right:50px; bottom:40px; }
  }
.a_members { width:100%; }
.a_members .arrow {transition: transform 0.3s ease;}
.a_members:hover .arrow {transform: translateX(10px); /* 右に5px移動 */}

  .column2 { width:100%; display:block;  }
  .column2 li { width:100%; margin-bottom:20px; }
  .column2 li img.inline_sp { width:100%; }
  .column2 li .photo-container { width:100%; }
  .column2_text.inine_pc { display:none;}
  .column2.inine_pc { display:none;}
  @media(min-width: 768px){
    .column2 { width:1100px; display:flex; justify-content: space-between; }
    .column2 li { width:530px; position:relative; margin-bottom:0; }
    .column2 li a img { width:530px; filter: grayscale(100%); }
    .column2 li a:hover img { filter: grayscale(0%);  }
    .column2 li .column2_text { position:absolute; top:20px; left:10px; z-index:10;  filter: grayscale(0%);}
    .column2 li.column2_right { width:530px; position:relative; }
    .column2 li.column2_right a img { width:530px; filter:grayscale(100%);}
    .column2 li.column2_right a:hover img { filter: grayscale(0%); }
    .column2 li.column2_right .column2_text2 {position:absolute; top:40px; left:10px; z-index:10; filter: grayscale(0%);}
    .column2 li.column2_right { margin-top:-100px; } 
    .column2 li.column2_right a { width:100%; height:100%; position:relative; }
    .column2 li a { width:100%; height:100%; position:relative; display:block;} 
    .column2_text.inine_pc { display:block;}
    .column2.inine_pc { display:none;}

  
  }


  .column3 { display:flex; justify-content:space-between; flex-wrap:wrap; }
  .column3 li { width:100%; }
  .column3 li.inline_sp { width:100%; margin-bottom:0; }
  .column3 li.inline_sp img { width:100%; filter: grayscale(100%);}
  .column3 li.inline_sp a:hover img { width:100%; filter: grayscale(0);}
  @media(min-width: 768px){
    .column3 { display:flex; justify-content:space-between;}
    .column3 li { width:33%; position:relative; }

    .column3 li.li_center { margin-top:-60px; position:relative; }
    .column3 li.li_last  { margin-top:-120px; position:relative; }
    .column3 li .column3_text { position:absolute; top:15px; left:0; z-index:10; filter: grayscale(0); }
    .column3 li.li_center .column3_text { position:absolute; top:-5px; left:0; z-index:10; filter: grayscale(0); }
    .column3 li.li_center .column3_text_arrow { position:absolute; bottom:10px; right:0; z-index:10; }

    .column3 li .arrow_pc { position:absolute; right:0; bottom:0; }


    .column3 li img {filter: grayscale(100%); }
    .column3 li a:hover img {filter: grayscale(0%); }
    .column3 li.inline_sp { display:none; }

  }

  h2.aboutus { margin-bottom:30px; text-align:center; }
  .contents_wrap.aboutus { margin-top:50px; }
  @media(min-width: 768px){
    .contents_wrap.aboutus { margin-top:200px; }
    }

  /*問い合わせボックス*/
  .contact_box {width:100%;height:180vw; overflow:hidden; position:relative; margin-top:50px; }
  .contact_text .img_joinus { width:90%;  }
  .fadeRight {position: absolute; bottom:-50px;z-index: 1;height: 200vw;}

  @media(min-width: 768px){
    .contact_box {height:45vw; overflow:hidden; position:relative; margin-top:50px; }
    .contact_text .img_joinus { width:600px; position:absolute; right:0; bottom:0;}
    .fadeRight { height:900px; bottom:-200px; z-index: 1;}
    .ul_entry { width:50%; margin:0 0 50px 0;}
    .ul_entry li { width:100%; }
    .ul_entry .div_entry { margin:50px auto; }
    .joinus { margin-top:5vw; }
    .contact_box .contact_text a:hover { opacity:1; }
    .contact_box .contact_text a:hover .img_joinus { opacity:1; }
  
  }