@charset "UTF-8";

/* -----------------------------------------------
 1366px
-------------------------------------------------- */

@media screen and (max-width: 1366px) {

}

/* -----------------------------------------------
 1200px
-------------------------------------------------- */

@media screen and (max-width: 1200px) {
#cover .cover_ttl {

  left: 6%;
}
    #cover .cover_ttl h1 {
  font-size: 4em;
}
.container_top {
  width:1000px;
}
#sub-cover{
  height: 400px;
}
.sub-cover__image{
  position: absolute;
  width: 100%;
  top:5%;  
  z-index: 3;    
}

.sub-cover__image img{
width: 100%; 
}
.sub-cover__circle{
  left: -5%;
  top: 10%;
  width: 200px;
}
 .recruit_cover-inner{
    width: 97%;
    padding: 80px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .recruit_cover-images{
    display: none;
  }
 .staff-title {
 
  left: 40%;

}     
    
    
}
/* -----------------------------------------------
1024px
-------------------------------------------------- */

@media screen and (max-width: 1024px) {
  

.container-fluid{
  position: relative;
  padding: 2em 0 0 ;
}
  .bm-right {
    display: none; /* 右消す */
  }

  #cover .cover_ttl {
    width: 60%;
    left: 5%;
  }

  #cover .cover_ttl h1 {
    font-size: 3.2em;
    letter-spacing: 0.8rem;
  }   
    
.news-inner {
  width: 100%;

  
}

 .feature2-panel {
  top: 0;
  right: -5%;
  height: 80%;
 
}   

.vertical-title {
  font-size: 30px;
}
.vertical-title span {
  font-size: 1.0em;
}

  .works-header h2 {
    font-size: 48px;
  }

  .works-header h2 span {
    font-size: 18px;
  }
  .works-link {
    gap: 8px;
    font-size: 14px;
  }

  .works-link .arrow {
    width: 34px;
    height: 34px;
  }

  .works::after {
    height: 280px;
    background-size: cover;
  }
    
}
/* -----------------------------------------------
 991px
-------------------------------------------------- */
@media screen and (max-width: 991px) {


.pc { display: none !important; }
.sp { display: block !important; }

#cover .cover_ttl {
    
left: 5%;    
}
#cover .cover_ttl p.sn {
  font-size: 1.5em;
  letter-spacing: 5px;
  margin-bottom: 0.75em;
}
#cover .cover_ttl h1 {
  font-size: 2.9em;
  line-height: 2;
  margin-bottom: 10px;
}
#cover .cover_ttl h2 {
  font-size: 1.75em;
letter-spacing: 0.115em;
  margin-bottom: 1em;
}

#eventa  {
	width: 100%;
	margin-bottom: 4em;
}
  
#eventa li .date {
	width: 100%;
    padding-right: 0;
}
#eventa li .title {
	width: 100%;
}
#eventa li.new_li .date {
  
  padding-right: 0; /* NEW分の余白 */
}
#eventa li.new_li .date::after {
 
  right:0%;
  left: 15%;    
  
  
  
}
 .container_top {
    width: 100%;
    margin: 2em auto;
  }


  /* Topics と view more を横並び */
  .topics-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

 
  /* Topicsとview moreの親要素にpositionを持たせる */
  .container_top {
    position: relative;
      
  }


.button_w,
.button_n{
  font-size: 15px;
  padding: 10px 0 10px 10px; /* 上下の余白、左右の余白 */
}
.button_w::after, .button_n::after {
  top: -16px;
  right:-10px;
  transform: scale(0.4);
}



#access .container{
padding-top: 2em!important;
}
#top_list{
    padding: 30px !important;
}
 #icon01{
   width: 35%;
    top:-10%; 
	left: 1%;
    z-index: 1;
   
}
#icon02 {
   display: none;
    
}
#icon03{
    position: absolute;
	width: 20%;
	bottom:-8%;
	right: 0%;
    z-index: 2;
 
}

.news-wrap {
    margin-top: -100px;
  }


  .news-box {
    width: 100%;
    padding: 200px 20px 30px 60px;
    border-radius: 0 0 0 0;
  }

  .news-inner {
    flex-direction: column; /* ← 縦にする */
    width: 100%;
    gap: 30px;
  }

  .news-left {
    min-width: auto;
    text-align: center;
  }
.news-label {
  margin: 0;    
} 


  #eventa li.new_li .date::after {
    
    right:0;
    left:13%;  
  }
#eventa li .title {
	width: 100%;
	margin-bottom: 0.5em
}
  #sub-cover{
  height: 350px;
}  
 .recruit_cover {
  padding: 120px 20px 0;
  
   
}
    .profile{
    text-align: center;
  }

  .profile img{
    display: block;
    margin: 0 auto 10px;
  }

  .profile ul.listDisc2{
    display: inline-block;
    text-align: left;
    margin-bottom: 50px;
  }

   .profile .name{
    text-align: center;
    font-size: 1.3em;
    margin-top: 30px;   
  }  
 .staff-title {
  position: absolute;
  top: 0px ;
  left: 23%;
  font-size: 80px ;
  
    
}

.job_tab_btn{
  width: 80%;
  height: 70px;
font-size: 1.3em;
 
}

 .job_btn{
 min-width: 420px;
height: 80px;
font-size: 1.2rem;
 
}  
 ul#eventa2_list_grid{
    grid-template-columns: repeat(2,1fr);
    gap: 30px 20px;
  }
}

/* -----------------------------------------------
 768px/tablet
-------------------------------------------------- */

 @media screen and (max-width: 768px) {
body { padding-bottom: 0px; }
.pc_br {
       display: none;
    }
.br-sp{
        display: block;
}

  .bm-center {
    display: none; /* 中も消す */
  }

  #cover {
   position: relative;  
  padding-top: 90px;
  }

  #cover .cover_ttl {
  top: 35%;
  left:10%;   
  }

  #cover .cover_ttl h1 {
    font-size: 3.5em;
    letter-spacing: 0.4rem;
    line-height: 1.3;  
  }


.no_br br{display: none;}
.sp_container .container{
padding: 3em 0!important;
}
.sp_container2 .container{
padding: 1em 0!important;
}
#h_column {
  display: block;
}
#h_column .lab,
#h_column .jin{
  width: 100%;
  padding: 6% 5% 4% 5%;
}
#h_column .lab h3 a, #h_column .jin h3 a {
  background-size: 24px 24px;
}

 
 .news-box{
          margin-bottom: 170px;
     }

  .news-left {
    min-width: auto;
    text-align: center;
  }

  .news-title {
    font-size: 40px;
  }

  .feature2-panel {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    padding: 20px;
  }

  /* ▼ テキスト縦並び */
  .feature2-text {
    flex-direction: column;
    gap: 15px;
  }

  /* ▼ 横書きに変更 */
  .vertical-title,
  .vertical-sub {
    writing-mode: horizontal-tb;
    text-orientation: initial;
  }

  /* ▼ タイトル調整 */
  .vertical-title {
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: 3px;
    text-align: center;
  }

  /* ▼ 本文 */
  .vertical-sub {
    font-size: 16px;
    line-height: 2;
    margin: 0;
    height: auto;
  }

.works {
  padding: 0px 0;
 
}
 .works-header {
    gap: 10px;
  }

  .works-header h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .works-header h2 span {
    
    font-size: 14px;
    margin-left: 0;
    margin-top: 5px;
  }
  .works-link {
      
    font-size: 13px;
  }

  /* 矢印小さく */
  .works-link .arrow {
    width: 30px;
    height: 30px;
  }

  /* 波背景コンパクトに */
    .works::after {
    height: 180px;
    background-size: cover;
    bottom: 30px;    
  }
     
.section-service {
  margin-top: 0;
  padding: 20px 0 0px;

}
.section-service .row > div {
padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
.service-item {
  border-radius: 10px;
  padding: 45px 20px 35px;
  }
  .ttl {
    font-size: 22px;       /* 見出し縮小 */
    padding-bottom: 14px;  /* 下余白も少し詰める */
  }

  .ttl::before,
  .ttl::after {
    width: 22px;           /* ライン短く */
    height: 5px;           /* 少し細く */
  }

  /* 左（位置調整） */
  .ttl::before {
    margin-left: -24px;    /* 中央からの距離を縮める */
  }
#eventa li.new_li .date::after {
 
  right:0%;
  left: 20%;    
}
  #sub-cover{
  height: 300px;
}  
 #workflow{
    padding: 70px 20px;
  }

  .workflow-item{
    gap: 20px;
    padding-bottom: 40px;
  }

  .workflow-item::before{
    left: 25px;
    top: 60px;
  }

  .workflow-num{
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

.recruit_cover-inner{
    padding: 50px 20px 70px;
    width: 100%;  
  }

  .recruit_cover-title{
    position: static;
    transform: rotate(-5deg);
    font-size: 70px;
    letter-spacing: 5px;
    margin-bottom: 10px;
    line-height: 1;
  }

  .recruit_cover-copy{
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .recruit_cover-sub{
    font-size: 16px;
    letter-spacing: 2px;
  }
.staff-title {
  position: absolute;
  top: 40px ;
  left: 30%;
  font-size: 60px ;
  
    
}
.job_acc_item{
    margin-bottom: 15px;
  }

  .job_acc_head{
    min-height: 65px;

    padding: 18px 20px;

    font-size: 1.1em;
    line-height: 1.5;

    text-align: left;
  }

  /* 矢印 */
  .job_acc_head::after{
    width: 10px;
    height: 10px;

    border-top: 3px solid #fff;
    border-right: 3px solid #fff;

    flex-shrink: 0;

    margin-left: 15px;
  }

  .job_acc_body{
    margin-top: 12px;

    padding: 25px 20px;

    border-radius: 15px;
  }
  .job_card_wrap{
    grid-template-columns: repeat(2,1fr);
    gap: 12px;

    margin-bottom: 30px;
  }

  .job_card{
    min-height: 120px;

    padding: 15px 10px;

    font-size: 0.95rem;
    line-height: 1.6;

    border-radius: 12px;
  }

  .job_card::before{
    width: 35px;
    height: 4px;
  }
    .job_table th,
  .job_table td{
    display: block;
    width: 100%;

    padding: 14px 0;

    font-size: 0.95rem;
    line-height: 1.8;
  }

  .job_table th{
    padding-top: 20px;
    padding-left: 32px;
    padding-bottom: 0;

    font-size: 1rem;
  }

  .job_table td{
    padding-top: 8px;
    padding-bottom: 18px;
  }

  /* 丸 */
  .job_table th::before{
    width: 12px;
    height: 12px;

    left: 8px;
    top: 26px;
  }
.modal_box {
      padding: 50px 3vw 20px;
  }

   .modal_close {
      width: 40px;
      line-height: 40px;
      font-size: 30px;
  }
   .modal_close i {
      line-height: 44px;
  }      
   
  .staff_modal{
    padding: 30px 15px;
  }

  .staff_modal_inner{
    padding: 50px 20px 30px;
    border-radius: 20px;
  }

  .staff_modal_wrap{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .staff_name{
    font-size: 1.8rem;
  }
 .staff_modal_inner .modal_close{
    width: 45px;
    height: 45px;

    top: 15px;
    right: 15px;

    min-width: auto;
    padding: 0;
  }
  .modal_close::before,
  .modal_close::after{
    width: 18px;
  }     
}

/* -----------------------------------------------
smartPhone
-------------------------------------------------- */

 @media screen and (max-width: 576px) {
html, body, div, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	font-size : 14px;
}
body { line-height: 1.5;}
/*---cover---*/
.container{
padding-left: 7%;
padding-right: 7%;
}
 

#cover .cover_ttl h1 {
    font-size: 2.5em;
  }
.button_yt {
width: 90%;
font-size: 14px;
}
.container p{font-size: 14px;}
.row p{font-size: 14px;}

/*斜めグレー*/
.container_bg {
width: 100%;
  clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%);
}
.container_top {
    margin: 1em auto 0;
	padding-top: 3em;
	padding-bottom: 0;
  }


h1{ font-size:28px; font-size:1.75rem;}
h2{font-size:24px; font-size:1.5rem;}
h3{ font-size:22px; font-size:1.35rem;}
h4 ,h5 { font-size:18px; font-size:1.125rem;}
p.fs24{font-size: 120%}
p.fs20{font-size: 110%}
h3.h3_link {
  font-size: 1.65em;
}
.button_n,
.button_w,
.button_wb,
.button_wb40 {
  font-size: 14px;
}
.ptb40 {
  padding: 30px 0 0 0 !important;
}
#logos img.large,
#logos img.large2,
#logos img.medium,
#logos img.medium2,
#logos img.medium3,
#logos img.small2{
    width: 100%;
}
p.right {
  width: 100%;
  background: #fff;
  margin-left: auto;
}
#eventa li.new_li {
    background-position: 30px 50px;
}  

.breadcrumbs {
	text-align: left;
    margin-top: 110px;
    padding-left:1em;
}
.breadcrumbs li,.breadcrumbs li a{
  font-size: 10px;
}
h3[ttl] .icon{
    top:-15px;
    width: 25px;
}
#greenborder_btn [class*="col-"] a{
    margin: -1px 0 0 0;
}
h4.ribbon {
  font-size: 0.9em;
  padding: 1rem 0;
}
ul.listDisc_top li a::after {
  content: url("../images/arrow_c_sp.png");
}
h3.vertical::before {
  width: 30px;/*画像の幅*/
  height: 27px;/*画像の高さ*/
}


.button,
.button2,
.button3{
    width: 100%;
    padding: 15px 100px 15px 40px; /* 上下の余白、左右の余白 */
    margin: 0.5em auto 0 auto;
}
.button::after,
.button2::after{
    top: 5px;
}
.button3::after{
    top: 10px;
}

a.button,
a.button2,
a.button3{
	font-size: 17px;
}
.news-wrap {
    margin-top: -50px;
  }
     
 .news-box {
    padding: 100px 5% 40px;
    margin-bottom: 200px;
 
  }

  .news-title {
    font-size: 24px;
    letter-spacing: 2px;
	margin-bottom: 0;
  }

.news-label {
  font-size: 10px;
  
}    


     
.vertical-title {
  font-size: 24px;
}
.vertical-title span {
  font-size: 1.0em;
}
 .works-header {
    
    gap: 10px;
  }
     .works-header h2 {
    text-align: left;  
  }   
   .works-header h2 span {
    display: block;
      
    margin-top: 8px;  
  }  
#eventa li.new_li .date::after {
 
  right:0%;
  left: 25%;    
}
  #sub-cover{
  height: 220px;
  margin-top: 80px;
}  
.sub-cover__circle{
  left: -8%;
  top: 10%;
  width: 120px;
}
.sub-cover__text{
  top: 40%;
  left: 8%;
}
.sub-cover__text h1{
  font-size: 2.5em;  
  margin-bottom: 10px;   
}
.sub-cover__text p{
  font-size: 15px;
}
.sp_br{
    display: block;
  }  
    
    .staff-title {
  position: absolute;
  top: 30px ;
  left: 35%;
  
  
    
}
 .job_btn{
 min-width: 320px;
height: 70px;
font-size: 1.2rem;
 
}    
.job_card_wrap{
    grid-template-columns: 1fr;
  }

.in_text{
    position: absolute;
    top: -2%;
    left: 2.5em;

    writing-mode: vertical-rl;
    text-orientation: upright;
    
    z-index: 5;
}

.in_text p {
    font-size: 22px!important;
    font-weight: 700;
    line-height: 1.7;
    color: #1a2a3a;
   margin: 0;
}

.in_text p span{
    background-color: white;
    padding: 14px 8px;
}     
  ul#eventa2_list_grid{
    grid-template-columns: 1fr;
    gap: 25px;
  }

  ul#eventa2_list_grid li div{
    margin: -15px 0 0 20px;
  }   
}

@media screen and (max-width: 414px) {
  #cover .cover_ttl {
  top: 45%;
  left: 8%;
  }

  #cover .cover_ttl h1 {
    font-size: 3em;
    letter-spacing: 0.4rem;
    line-height: 1.3;  
  }
#eventa li.new_li {
	
    background-position: 10px 50px;
      
} 
  .feature2-panel {
    top: 20%;
  }
.vertical-sub { 
  margin-right: 0px;
}
  #sub-cover{
  height: 150px;
}  
.sub-cover__circle{
  left: -8%;
  top: 10%;
  width: 120px;
}
.sub-cover__text{
  top: 75px;
  left: 6%;
}
.sub-cover__text h1{
  font-size: 2em;  
  margin-bottom: 10px;   
}
.sub-cover__text p{
  font-size: 14px;
}
.sub-cover__image{
  top:20%;     
}
}
@media screen and (max-width: 375px) {
body{
font-size: 13px;
}
  #eventa li.new_li .date::after {
 
  right:0%;
  left: 30%;    
  
}
  .job_btn{
 min-width: 250px;
height: 60px;
font-size: 1.0rem;
 
}      
.job_btn img{
    display: none;
}    
     
    
}

@media screen and (max-width: 320px) {


}

/* -----------------------------------------------
PRINT Module
-------------------------------------------------- */
@media print {
  
* {color: #666 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
body { width: 100%; }
@page  { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
thead { display: table-header-group; }
tr,img { page-break-inside: avoid; }
li { content: "» "; }
}