@charset "utf-8";
/*
Theme Name: students

*/

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
#navi .container,
	#footer .container {
		max-width:1200px;
	}
a{word-break: break-all;
}

html{
    font-size:16px;
}
body{
line-height: 1.7;
color:  #2b2b2b;
font-family: "Noto Sans JP",Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}


.alignleft{
	float: left;
    margin: 0px 15px 15px 0;
}


.alignright{
	float: right;
    margin: 0px 0px 15px 15px;
}

.aligncenter{
	display: block;
	margin: auto;
}

p{
font-size: 16px;
line-height: 24px;
letter-spacing : 0.64px;
color : #141414;
color : rgb(20, 20, 20);
}

@media(min-width:750px){
    .plan p{
        font-size: 14px;
        line-height: 1.7;
        }


}

li{
    list-style: none;
}


img.rounded{
    border-radius: 20px !important;
}


/***********container*******************/
.heading{
    position: fixed;
    background-color: rgba(255, 255, 255, 1);
    z-index: 999;
 }



@media (min-width: 1200px){

.container.wrapper{
    /* box-shadow: 0 0 15px rgb(0 0 0 / 30%); */
    max-width:1000px;
    /* border: 1px solid rgba(255, 255, 255, 0); */
}
.head{
    max-width:1000px;
}


.container.wrapper.none{
    box-shadow:none;
    max-width:1000px;
    border: 1px solid rgba(255, 255, 255, 0);
}



}





/*********** ヘッダー*******************/

    .main{
        padding-top: 50px;
    }
    
/*********** ナビゲーション*******************/
#top{
    padding-top:10px;
    position: fixed;
    width:100%;
    background-color: rgba(255, 255, 255, 0.683);
    height:50px;
    z-index: 9999;
}


.entry{
    padding-right:20px;
}
/* 3本のバーそれぞれの座標を設定 */
.menu_wrap{
    padding-right: 5px;
    padding-left: 0;
    flex-basis: 43px;
}

.menu{
  position: fixed;
  width:32px;
  top:8px;
  height: 50px;
  z-index: 999;
  right:5px;
}


@media (min-width:972px){
    .menu{
        right: auto;
    }
        

}



.menuborder{
  position: absolute;
  display: block;
  width:32px;
    height:2px;
  background-color: #000;
}


.menuborder:nth-of-type(1) {
  top:0px;
}
.menuborder:nth-of-type(2) {top:15px;}
.menuborder:nth-of-type(3) {top:30px;}

.Close .menuborder:nth-of-type(1) {
  top:16px;
  transform: rotate(45deg);
  }
  .Close .menuborder:nth-of-type(2) {
  opacity: 0;
  }
  .Close .menuborder:nth-of-type(3) {
  top:16px;
  transform: rotate(-45deg);
  }
  
  .gnav{
    position: fixed;
    opacity: 0;
    /* line-height: 0; */
    height:0;
    overflow: hidden;
    z-index: 999999;
    background-color: #FDF7CE;
    width:100%;
    transition: all 0.5s ease-in-out;
    top:45px;
    right: 0px;
    padding-top: 1rem;
  }
.gnav .border-bottom{
    border-bottom: 1px solid#E8C100 !important;
    
}


@media(min-width:992px){
    .gnav{
        width:33%;
    }
}

  
  .gnav li {
      text-align: left;
      padding:.3em 0;
  }
 
  .gnav li a{
      font-size: 1rem;
      color: #141414;
  }

  @media(max-width:567px){
.gnav .row{
    transform: translateX(10px);
}

    .gnav li a{
        font-size: 1rem;
        color: #141414;
    } 
    .gnav.open{
        padding-left: 10px;
    }
  }
  
  .gnav.open{
    /* overflow-y: scroll; */
    opacity: 1;
    line-height: 1.5;
    height:100%;
    }
    .gnav h2{
        font-size: 1.4rem !important;
    }

/*********** メインイメージ*******************/

.head-2{
    padding: 0 20px;
   }


.head-2 h2,.head-2 h3{
    display: block;
    color: #fff;
    font-size: 1.25rem;
    background-color: #E8C100;
    border-radius: 40px;
    text-align: center;
    padding:1em 1em;
    font-weight: bold;
}


.head-3{
    text-align: center;
}

.head-3 h3,.head-3 h2{
    font-size: 2rem;
       font-family : Poppins;
    letter-spacing : 3.2px;
    text-align: center;
    color: #E8C100;
    margin-bottom: 0;
}

.head-3 span{
    font-weight : bold;
  font-size : .875rem;
  letter-spacing : 1.12px;
  display: block;

}



/***********message *******************/



.bg-m{
    position: relative;
    z-index: 2;

}

.bg-m:before{
    content: "";
    position: absolute;
    width:70%;
    height: 60%;
    background-color: #F0F0F0;
    right:0px;
    bottom:50px;
    z-index: -1;
    border-radius: 8px;

}


/***********ひろ銀座について *******************/

#carrer h3,#carrer h4{
     font-size: 1.9rem;
}

.check li{
    position: relative;
    padding: .5em 0 .5em 2em;
    font-size:1rem;
    line-height: 1.5;
    letter-spacing : 0.64px;
    color : #141414;
    color : rgb(20, 20, 20);
}




.check li:before{
    position: absolute;
    content: "";
    background: url(images/check.png) no-repeat center;
    width:16px;
    height: 16px;
    left: 12px;
    top: 14px
}
@media (min-width:992px) {
   
    .check li{
        font-size: 1.4rem;
    }

    .check li:before{
        position: absolute;
        content: "";
        background: url(images/check.png) no-repeat center;
        width:16px;
        height: 16px;
        left: 23px;
        top: 20px;
    }


}


.jitugen{
    font-weight: bold;
    text-align: center;
    font-size : 5vw;
    color : #141414;
    color : rgb(20, 20, 20);
    background: linear-gradient(transparent 60%, #E8C100 60%);
    display: inline-block;
}

 @media (min-width:768px) {
    .jitugen{
        font-size: 1.5rem;
    }
 }

.welcom_area{
    position: relative;
    z-index: 2;
}

.welcom_area:before{
    content: "";
    position: absolute;
    width:80%;
    height: 60%;
    background-color: #F0F0F0;
    left:0px;
    bottom:10px;
    z-index: -1;
    border-radius: 8px;
    
}
/***********キャリアについて *******************/



/***********ヒロ銀座の特徴 *******************/





/**********汎用 *******************/

h4.num,h3.num{
    font-size: 1.25rem;
}
h4.num span,h3.num span{
    font-size: 3rem;
    font-family: Poppins;
    font-style: italic;
    font-weight: normal;
}



.box .img{
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
}

.box.left .img{
    padding-left: 20px;
    padding-right: 10px;
    text-align: right;
  

}

.box .img:before{
    content: "";
    position: absolute;
    width:90%;
    height: 100%;
    background-color: #F0F0F0;
    right:0px;
    top:25%;
    z-index: -1;
    border-radius: 8px;
    
}


.box.left .img:before{
    content: "";
    position: absolute;
    width:90%;
    height: 100%;
    background-color: #F0F0F0;
    left:0px;
    top:25%;
    z-index: -1;
    border-radius: 8px;
   
}

.box .text{
    position: relative;
    padding:1em 2rem;
}


@media(min-width:992px){
    .box .text{
        position: relative;
        padding:1em 6.4rem 0 1rem;
    }
    .box.left .text{
       padding:1rem 0 1rem 6.4rem;
   }

   }





/***********headerページ*******************/

.headerbg{
    text-align: center;

}

.head h1{
    margin: 0;
    padding: 0;
    font-size: 1rem;

}

.headerbg h1,.headerbg h2{
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
    padding: 1em 2em;
    background-color:#e8c10085;
    letter-spacing : 0.96px;
}

.headerbg h1 span,.headerbg h2 span{
font-family : Poppins;
display: block;
font-size: 1.75rem;
}

.headerbg{
 background: url(images/header_bg_about.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}
.headerbg.mydream{
    background: url(images/header_pc_dream.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}


.headerbg.movie{
    background: url(images/header_bg_move.png) no-repeat center 0px /100%;
padding:95px 0 45px;
}

.headerbg.about{
    background: url(images/header_bg_about.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}
.headerbg.quwstionnaire{
    background: url(images/header_quwstionnaire.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}
.headerbg.entryflow{
    background: url(images/header_entryflow.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}

.headerbg.growth{
    background: url(images/header_growth.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}

.headerbg.event{
    background: url(images/header_event.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}


.headerbg.career{
    background: url(images/header_career.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}

.headerbg.staff{
    background: url(images/header_staff.jpg) no-repeat center 0px /180%;
    padding:95px 0 45px;
}

.headerbg.welfare{
    background: url(images/header_welfare.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}

.headerbg.faq{
    background: url(images/header_faq.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}

.headerbg.form{
    background: url(images/header_form.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}

.headerbg.work_style{
    background: url(images/header_work_style.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}

.headerbg.entry{
    background: url(images/header_entry.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
    transform: translateY(0);
}
.headerbg.shop{
    background: url(images/header_shop.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}


.headerbg.training{
    background: url(images/header_training.jpg) no-repeat center 0px /100%;
        padding:95px 0 45px;
}
.headerbg.salary{
    background: url(images/header_salary.jpg) no-repeat center 0px /100%;
        padding:95px 0 45px;
}

.headerbg.privacy{
    background: url(images/header_privacy.jpg) no-repeat center 0px /100%;
        padding:95px 0 45px;
}
.headerbg.feature{
    background: url(images/header_feature.jpg) no-repeat center 0px /100%;
        padding:95px 0 45px;
}
.headerbg.recruitment{
    background: url(images/header_recruitment.jpg) no-repeat center 0px /100%;
        padding:95px 0 45px;
}

.headerbg.entryflow{
    background: url(images/header_entryflow.jpg) no-repeat center 0px /100%;
padding:95px 0 45px;
}
.headerbg.growth{
    background: url(images/header_growth.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}
.headerbg.glossary{
    background: url(images/header_glossary.jpg) no-repeat center 0px /100%;
    padding:95px 0 45px;
}


@media(min-width:970px){
    .headerbg{
        background: url(images/header_bg_about.jpg) no-repeat center 0px /100%;
    padding:200px 0 200px;
    }
    .headerbg.mydream{
        background: url(images/header_pc_dream.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }

    .headerbg.movie{
        background: url(images/header_move.png) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }

    
    .headerbg.career{
        background: url(images/header_career.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    .headerbg.event{
        background: url(images/header_event.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.about{
        background: url(images/header_bg_about.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }

    .headerbg.quwstionnaire{
        background: url(images/header_quwstionnaire.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    .headerbg.growth{
        background: url(images/header_growth.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }

    .headerbg.entryflow{
        background: url(images/header_entryflow.jpg) no-repeat center -233px /100%;
        padding:200px 0 200px;
    }

    .headerbg.feature{
        background: url(images/header_feature.jpg) no-repeat center 0px /100%;
    padding:200px 0 200px;
    }

    .headerbg.staff{
        background: url(images/header_staff.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.welfare{
        background: url(images/header_welfare.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.faq{
        background: url(images/header_faq.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.form{
        background: url(images/header_form.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.work_style{
        background: url(images/header_work_style.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    
    .headerbg.entry{
        background: url(images/header_entry.jpg) no-repeat center 0px /100%;
        transform: translateY(0);
    }
    .headerbg.shop{
        background: url(images/header_shop.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }


    .headerbg.training{
        background: url(images/header_training.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }

            .headerbg.entry{
        background: url(images/header_entry.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    .headerbg.salary{
        background: url(images/header_salary.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
    .headerbg.privacy{
        background: url(images/header_privacy.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
       .headerbg.feature{
        background: url(images/header_feature.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
       .headerbg.recruitment{
        background: url(images/header_recruitment.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }
       .headerbg.glossary{
        background: url(images/header_glossary.jpg) no-repeat center 0px /100%;
        padding:200px 0 200px;
    }


}



/***********テンプレート*******************/
.bg-left{
  background: url(images/bg_message.png) no-repeat left 0/100%;
  position: relative;
}

.bg-right{
    background: url(images/bg_about.png) no-repeat left 0/100%;
    position: relative;
}




.font-yellow h4,.font-yellow h3{
    font-size: 1.25rem;
    color: #E8C100 ;
}



/***********給与が高い理由*******************/

.box-center{
    margin: 0;
}


.box-center .right{
    transform: translate(-20px,20px);
     padding: 0;
    background-color: #fff;
    border-radius: 8px;
    }

    .box-center .left{
        transform: translate(20px,-20px);
         padding: 0;
        background-color: #fff;
        border-radius: 8px;
        }





        
/***********研修*******************/

.number{
    font-size: 2.5rem;
    font-family : Poppins;
     text-align: center;
}

.text-pink{
    color: #E8C100;
    letter-spacing: normal;
}

.f14{
    font-size: .8rem;
}

#TRAINING .text-pink{
    font-size: .9rem;
}

/***********about usページ*******************/


.greeting .text p{
    margin-bottom: .5rem;
}




/***********fukuri*******************/

.fukuri_area{
    position: relative;
    z-index: 2;
}

.fukuri_area:before{
    content: "";
    position: absolute;
    width:90%;
    height: 60%;
    background-color: #F0F0F0;
    left:0px;
    bottom:170px;
    z-index: -1;
    border-radius: 8px;
    
}


.check2 li{
    position: relative;
    padding: .5em 0 .5em 2em;
    font-size:1rem;
    line-height: 1.5;
    letter-spacing : 0.64px;
    color : #141414;
    color : rgb(20, 20, 20);
}




.check2 li:before{
    position: absolute;
    content: "";
    background: #E8C100;
    width:10px;
    height: 10px;
    left: 12px;
    top: 14px;
    border-radius: 50%;
}



/***********footer ******************/
.bg-3{
    background-color: rgba(229, 229, 229, 0.7);
}


#footer .link ul li{
    position: relative;
    padding: .5em 0 .5em 1em;
    font-size: 1rem;
    }

#footer .link ul li:before{
content: "";
position: absolute;
background: url(images/aic_footer.png) no-repeat center;
width:4px;
height:9px;
left:-1px;
top:34%;

}

#footer .link ul li a{
    color: #141414;
    text-decoration: none;
}

#footer .link ul li.f15{
    font-size: 0.9rem;
}

.bg-pink{
    background-color: #E8C100;
}


.btn-pink:hover{
    color: #fff;
    text-decoration: none;
}

#copyright{
    font-size:0.875rem ;
}

.top_back{
    position: fixed;
    right:10px;
    bottom: 65px;
    z-index: 999;
}

/***********ひろ銀座について *******************/
.makerline{
	background: linear-gradient(transparent 70%, #A27A43 70%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  line-height: 1;
  transition: background-size 1s ease-in-out;
  display: inline-block;
  padding: 2px 4px;
}
.makerline.is-animated{
	animation: animateBackground 1s ease-in-out forwards;
  background-size: 100% 100%;
}

.pt{
    padding-top: 100px;
}



/***********ボタン汎用*******************/
.entry{
transform:translateY(-25px)
}

.more{
    position: absolute;
    bottom: 0;
    transform:translateY(25px)
}

.btn-pink{
    display: block;
    color: #fff;
    font-size: 1.25rem;
    background-color: #E8C100;
    border-radius: 40px;
    text-align: center;
    padding:.5em 1em;
    font-weight: bold;

}


.btn-end:hover{
    color: #FDF7CE;
    text-decoration: none;
}

.btn-end{
    display: block;
    color:  #FDF7CE;
    font-size: 1.25rem;
    background-color: #FBB03B ;
    border-radius: 40px;
    text-align: center;
    padding:.5em 1em;
    font-weight: bold;
}


/***********ボタン*******************/



.point{
    position: relative;
    padding: .2em 0 .2em 4.2em;
    margin-bottom: .5rem;
}

.point:before{
    position: absolute;
    content: "";
    background: url(images/aic_point.png) no-repeat center;
    width:60px;
    height:20px;
    left: 1px;
    top: 10px;

}



/***********社風*******************/
#culture h4,#kodawari h4,#culture h3,#kodawari h3{
    display: inline-block;
    font-weight: bold;
    font-size: 1.15rem;
    padding-bottom: .3em;
}

.border-pink{
    border-bottom: #E8C100 2px solid;
}

.border-yellow{
    border-bottom: #E8C100 2px solid;
}


h4.border-pink,h3.border-pink{
    display: inline-block;
    font-weight: bold;
     padding-bottom: .3em;
    border-bottom: #E8C100 2px solid;
}

h4.border-yellow,h3.border-yellow{
    display: inline-block;
    font-weight: bold;
     padding-bottom: .3em;
    border-bottom: #E8C100 2px solid;
}


#culture h4 span,#kodawari h4 span,h4.border-pink span,h4.border-yellow span,#culture h3 span,#kodawari h3 span,h3.border-pink span,h3.border-yellow span{
    font-size: 2.4em;
    font-family : Poppins;
    font-style: italic;
   font-weight: normal;

}

.img-box{
    position: relative;

}

.img-box:before{
    content: "";
    position: absolute;
    width: 90%;
    height: 100%;
    background-color: #F0F0F0;
    right: 0px;
    top: 25%;
    z-index: -1;
    border-radius: 8px;
}

/***********キャリアについて*******************/
#car .head-2{
   transform: translateY(-26px);
}

/***********質問 *******************/



/*質問項目*/
#faq dl dt { 
    padding:1rem 1.5rem 1rem 2.4rem; 
    position: relative;
    background:url(images/Q.png)no-repeat 10px 50% #FDF7CE;
    border-radius: 8px;
  }
  
  
  #faq dl dd { 
    background:url(images/A.png)no-repeat 5px 15px;
    padding:0 1rem;
      margin-bottom: 0; 
    position: relative; 
    /* height:0px; */
    overflow: hidden;
    /* opacity: 0; */
    /* border-bottom: 1px solid #E8C100 ; 
    border-left: 1px solid #E8C100 ; 
    border-right: 1px solid #E8C100 ; */
    transition: all .6s ease-in-out;
    padding:1rem 1rem 1rem 2.4rem; 
display: none;  
}
  
    
  #faq dl dd.show{
    padding:1rem 1rem 1rem 2.4rem; 
    /* height:100%;
    opacity: 1; */
    display: block;

  }
  
  
  #faq dl dt:before { content: ""; 
    font-size: 18px; 
    color: #fff; 
    background: #E8C100; 
    width: 2px; 
    height: 15px; 
    position: absolute; 
    right: 5%; 
    top: 40%; 
    text-align: center; 
    display: inline-block; 
    line-height: 1.3; 
    transition: all .6s ease-in-out;
  }
  
  
  #faq dl dt.show:before {
    transform: rotate(90deg);
  }
  
  
    #faq dl dt:after { content: ""; 
      font-size: 18px; 
      color: #fff; 
      background: #E8C100; 
      width: 2px; 
      height: 15px; 
      position: absolute; 
      right: 5%; 
      top: 40%; 
      text-align: center; 
      display: inline-block; 
      line-height: 1.3;
    transform: rotate(90deg);
    }
  
  
  #faq dl { margin-bottom:1rem;
      }
  
  /* #fukuri section styles */
  #fukuri dl dt {
    cursor: pointer;
    position: relative;
  }
  
  #fukuri dl dd {
    display: none;
    transition: all .6s ease-in-out;
  }
  
  #fukuri dl dd.show {
    display: block;
  }
  
  /* FAQ Accordion specific styles */
  #faq-accordion dl dd {
    background:url(images/A.png)no-repeat 5px 15px;
    padding:0 1rem;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    transition: all .6s ease-in-out;
    padding:1rem 1rem 1rem 2.4rem;
    display: none;
  }
  
  #faq-accordion dl dd.show {
    padding:1rem 1rem 1rem 2.4rem;
    display: block;
  }
  
  #faq-accordion dl dt {
    cursor: pointer;
    position: relative;
  }
  
  #faq-accordion dl dt:before {
    content: "";
    font-size: 18px;
    color: #fff;
    background: #E8C100;
    width: 2px;
    height: 15px;
    position: absolute;
    right: 5%;
    top: 40%;
    text-align: center;
    display: inline-block;
    line-height: 1.3;
    transition: all .6s ease-in-out;
  }
  
  #faq-accordion dl dt.show:before {
    transform: rotate(90deg);
  }
  
  #faq-accordion dl dt:after {
    content: "";
    font-size: 18px;
    color: #fff;
    background: #E8C100;
    width: 2px;
    height: 15px;
    position: absolute;
    right: 5%;
    top: 40%;
    text-align: center;
    display: inline-block;
    line-height: 1.3;
    transform: rotate(90deg);
  }
  
  #faq-accordion dl {
    margin-bottom: 1rem;
  }
  

/* PHILOSOPHY -ヒロ銀座の３つの理念- */

.box-ph{
    margin-bottom:3rem;
    display: flex;
   
}

.box-ph.reverse{
    flex-direction: row-reverse;
}

.box-ph .text-box{
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) ;
        padding: 1rem;
        background-color: #fff; 
         border-radius: 8px;
}


.box-ph .right{
    flex: 0 0 50%;

    transform: translate(-20px,20px);

}

.box-ph .left{
    flex:0 0 50%;
    transform: translate(20px,-20px);
       }

@media(min-width:979px){
    .box-ph{
        margin-bottom: 5rem;
    }


    .box-ph .right{
        transform: translate(-20px,20px);
    }
    .box-ph .left{
        transform: translate(20px,-20px);
    }

    .box-ph h4,.box-ph h3{
        font-size: 2rem;
        padding-top: 4rem;
        margin-bottom: 1.5rem;
    }
    .box-ph p{
        line-height: 1.8;
        font-size: 1.2rem;
    }


}


/******** 沿革******* */

table.alt{
    background-color: #ffffff;
    padding: 1rem;

}
table.alt th{
    border-color: #E8C100 ;
    border:none;
    padding: 1rem 0 1rem 2rem;
    
}

table.alt td{
    padding: 1rem 0 1rem 1rem;
    border-color: #E8C100 ;
    border: none;
}



/***********店舗 *******************/
table.tenpo th{
    font-size: 0.875rem;
    font-weight: normal;
    padding:5px 4px 5px;
}

table.tenpo td{
    font-size: 0.875rem;
    font-weight: normal;
    padding:5px 4px 5px;
}

table.tenpo p{
    margin-bottom: 0;
}




/***********workstle特徴 *******************/

.feature_box{
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    height: 100%;
    padding: 50px 20px 10px;
    background-color: #fff;
}

.feature_box .ttl{
    color: #E8C100 ;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

.feature_box .pointbox{
position: relative;
padding-left:4em;
font-weight: bold;
}


.feature_box .pointbox span{
    font-weight: bold;
    font-family: Poppins;
    font-size: .7em;
    font-family: Poppins;
    padding:0px 7px;
    border: 1px solid #E8C100 ;
    color: #E8C100 ;
    border-radius: 10px;
    display: inline-block;
    font-style: italic;
    line-height: 1.5;
    top:4px;
    position: absolute;
    left:0;
}


.feature_box .text{
     
    font-size: 0.8rem;
}


.path_box{
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    overflow: hidden;
    height: 100%;
    padding: 0;
    background-color: #fff;
}


.path_box .text-box{
padding: 1rem;

}

.path_box .career{
    font-weight: bold;
    background-color: #F0F0F0;
    padding:.5rem;
    text-align: center;
}

.path_box .ttl{
    color: #E8C100 ;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

.path_box .text{
    font-size: 0.875rem;
}

/***********staffの声 *******************/
.staff_box{
    padding: 0 1rem 0;
}

.staff_box .img-box:before{
      content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #F0F0F0;
        right: -10px;
        top: 10%;
        z-index: -1;
        border-radius: 8px;
}
.staff_box .staff{
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem 0;
}
.staff_box .staff span{
    display: block;
}


.staff_box dl{
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #FDF9D8;
    border-radius: 8px;
}

.staff_box dl dt span{
    font-size: 2.4em;
    font-family: Poppins;
    font-style: italic;
    font-weight: normal;
}

@media(min-width:979px){
    .staff_box .img-box:before{
            width: 80%;
          height: 100%;
          right: -5px;
          top: 7%;
       }
       .staff_box .staff{
           font-size: 2rem;
       }

}



/***********workstyle *******************/

.bg-interviw h5,.bg-interviw h4,.bg-interviw h3{
    font-weight: bold;
}



.bg-interviw{
    padding-top: 50px;
    background:url(images/day_line.png) repeat-y center 0 #f1f1f1;
    margin-bottom: 1rem;
    padding-bottom: 20px;
}


.fukidashi{
    background-color: #fff;
    padding: 2rem 1rem;
    width:80%;
    position: relative;
    margin:0 auto 50px;

}

.fukidashi.left:before{
position: absolute;
    content:"";
    width: 0;
height: 0;
border-style: solid;
border-width: 12.5px 20px 12.5px 0;
border-color: transparent #ffffff transparent transparent;
left:-20px;
top:45%;
   
}

.fukidashi.left span.time{
    background-color: #E8C100 ;
    color: #fff;
    padding: .5em .5em;
    position: absolute;
    bottom:calc(50% - 77px);
    left:-90px;
    display: inline-block;

    }

.fukidashi.left span.time:before{
    position: absolute;
    content: "";
    width:33px;
    height: 33px;
    background: url(images/day_icon.png) top center no-repeat;
    top: -45px;
    left: 21%;
}

.fukidashi.right:before{
    position: absolute;
        content:"";
        width: 0;
    height: 0;
    border-style: solid;
    border-width: 12.5px 20px 12.5px 0;
    border-color: transparent #ffffff transparent transparent;
    right:-20px;
    top:45%;
    transform: rotate(180deg);
    }
 .fukidashi.right span.time{
        background-color: #E8C100 ;
        color: #fff;
        padding: .5em .5em;
        position: absolute;
        bottom:calc(50% - 77px);
        right:-90px;
        display: inline-block;
    
        }
    
    .fukidashi.right span.time:before{
        position: absolute;
        content: "";
        width:33px;
        height: 33px;
        background: url(images/day_icon.png) top center no-repeat;
        top: -45px;
        left: 21%;
    }
    
.pt-10{
    padding-top: 150px;
}


@media(max-width:769px){

  .fukidashi{
      margin: 20px 0 40px 70px;
  
  }


 .fukidashi.left span.time{
 left:-70px;
 bottom: calc(50% - 77px);;
}

.fukidashi.right span.time{
       bottom: calc(50% - 77px);
    left:-70px;
    right:auto;
      }

.bg-interviw{
    padding-top: 20px;
    background:url(images/day_line.png) repeat-y 40px 0 #f1f1f1;
}
.fukidashi.right:before{
    left:-17px;
    right:none;
    transform: none;
}
.fukidashi.left:before{
    left:-17px;
    right:none;
    transform: none;
}


.pt-10{
    padding-top: 0px;
}

}





/***********salary*******************/

.salary_box{
    border-radius: 8px;
    overflow: hidden;
}



.f14{
    font-size: 14px;
}

.f12{
    font-size: 12px;
}

.month{
    font-size: 36px;
    font-family: 'Oswald', sans-serif;
    color: #E8C100 ;
}

.foot{
    background-color: #FDF9D8;
    padding: 5px 5px;
    
}

.foot p{
    margin-bottom: 10px;
}

.ex{
    display: flex;
align-items: center;
justify-content: center;
}
.ex:after,.ex:before{
    border-top: 1px solid;
    content: "";
    width:5px;
   }
   .ex:before{
    margin-right: 1rem;
   }
   .ex:after{
    margin-left: 1rem;
   }

.headbody{
    padding: 15px 5px;
}

.year{
    font-size: 28px;
    background-color: #FCB2C8;
}

#salary .f12.content{
    padding: 0 27px;
}

#salary .salary_box{
    height: 100%;
}
/***********給与が高い理由 *******************/

#salary_reason .rounded{
    border-radius: 10px;
}

/***********店舗一覧 *******************/

.shopBox .shop-title {
    background-color:#FCF7CF;
    padding: 5px 0;
    margin-bottom: 1rem;
}
a.btnTop:hover {
    background-color: #E8C100 ;
    text-decoration: none;
    color: #fff;
}

a.btnTop {
    display: block;
    font-size: 14px;
    border-radius: 25px;
    border: 1px solid #E8C100 ;
    width: 240px;
    color: #282828;
    position: relative;
    box-sizing: border-box;
    line-height: 40px;
    letter-spacing: 1.4px;
    text-align: center;
}


#shoplink ul li:hover {
    background: #E8C100 ;
    text-decoration: none;
    color: #fff;
}

#shoplink ul li {
    padding: 5px 10px;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
    border: 1px solid #E8C100 ;
    color: #282828;
    position: relative;
    box-sizing: border-box;
    letter-spacing: 1.4px;
    text-align: center;
    width: 130px;
    margin-right: 10px;
}

@media(max-width:767px){
    #shoplink ul li:nth-child(3n) {
        margin-right: 0px;
    }
}


#shopArea .shopBox {
    display: none;
}


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

    #shoplink ul  {
        padding-right: 15px;
         padding-left: 15px; 
     }	
         
     #shoplink ul li {
         width:30%;
       margin-bottom: 5px;
       padding:2px 0;
       margin-right: 5%;
     }
     



.map {
    position: relative;
    overflow: hidden;
}
/**************googlmap************************/
.map {
    position: relative;
    
    overflow: hidden;
    }
     
    .map iframe,
    .map object,
    .mapp embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    height: 100%;
    max-width:100%;
    }
}


.table.bosyu th{
    background-color: rgba(255, 255, 255, 0.6);

}


/***********応募フォーム *******************/

.mailform th{
    background-color: #e3e3e3;

}
.mailform .must{
    float:right;
}




@media(max-width: 768px){

    textarea{
        width:250px !important;
    }
    
    .mailform td{
        display: block;
        padding: 5px 0px 5px 0;
    }
    .mailform th{
        display: block;
        padding: 5px 5px 5px 5px;
    }
    
    
    .mailform td input[type="text"] {
        max-width: 100%;
        width:100% !important;
    }
    
    .mailform td input[type="text"]#mfp_element_13{
        width:93% !important;
    }
    
    .mailform td input[type="tel"] {
        max-width: 100%;
        width:100% !important;
    }
    .mailform td input[type="email"] {
        max-width: 100%;
        width:100% !important;
    }
    
    .mailform td textarea {
        max-width: 100%;
        width:100% !important;
    }
    
    
    }




#bottomBtn .yoyaku{
    background: rgba(232,193,0,0.8);
  }
  
  
  #bottomBtn .otameshi{
    background: rgba(206,185,133,0.8);
  }
  
  #bottomBtn .LINE{
    background: #00b900e1;
  }
  
  #bottomBtn .LINE a{
    position: relative;
    display:inline-block;
    padding: 1em 0;
    }
    


  
  #bottomBtn .otameshi a{
  position: relative;
  display:inline-block;
  padding: 1em 0;
  }
  
  
  
  #bottomBtn .yoyaku a{
  position: relative;
  display:inline-block;
  padding: 1em 0;
  }
  
  #bottomBtn .yoyaku a:before{
    display: inline-block;
  /*position: absolute;
  left:-5px;*/
  /*content:"";*/
  width:53px;
  height:30px;
  /*background: url(images/aic_yoyaku.png) no-repeat center;*/
  background-size: 60%;
  padding-top:5px; 
  }
  
  
  @media(min-width:979px){
    .pares{
        font-size: 15px !important;
    }
  }




  /* 新卒部分のみの追加 */

  table.evnt {
    box-sizing:border-box;
    }
     table.event th {
        width:20%;
        border:2px solid #FCEE97;
        padding:1em;
        text-align:center;
        color:#fff;
        background:#FCEE97;
        font-weight:500;
        vertical-align:middle;
    }
    
    table.event td {
        width:80%;
        border:2px solid #FCEE97;
        padding:1em 2em;
        font-weight:500;
    }
    
    .img-wrap{
        position: relative;
    }
    .img-wrap span{
        background-color: #000;
        color: #fff;
        position: absolute;
        left:0px;
        padding: .5em 1em;
        bottom:0;
    }

   



/* 2022.0831.追加 */

.border-secondary{
    border-color: #E8C100 !important;
}


.border-yellowall{
    border-color: #E8C100 !important;
}

.numr {
    background:#E8C100;
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: 600;
    font-size: 30px;
    font-family: "Noto Serif JP";
    vertical-align: middle;
    display: inline-block;
    margin: 0 35px 0 0;
}


.entrytel{
    background:rgba(232,193,0,0.8);
    color: #fff !important;
    display: inline-block;
    padding: 1rem;

}
.entoryform{
    background:rgba(206,185,133,0.8);
    color: #fff !important;
    display: inline-block;
    padding: 1rem;
}


@media (max-width:1140px){
    #photo p.small{
        font-size: .9em;
    }

}


.bg-cream{
    background-color: #FDF7CE;
    
}

@media (max-width:976px){
    #contact_Area h2{
        font-size: 1.5rem;
    }

}



/* 追加 20221201*/



.box_salary{
    margin-bottom: 1rem;
    padding: 0 1.5rem;
}



.box_salary h4{
background-color:#E8C100;
text-align: center;
padding: .5em 0;
margin-bottom: 1.5rem;
color: #fff;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/*店舗一覧*/
#aboutArea.shoplist p{
margin-bottom:0;
}

#aboutArea.shoplist .heading h2 {
font-family: 'Noto Serif JP'
   
}
/* 店舗リストのレスポンシブレイアウト */
.accordion__detail {
    padding: 20px 0;
}

#shops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* PC表示：4列レイアウト */
#shops li {
    flex: 0 0 calc(33% - 8px); /* 4列（25%）からgap分を引く */
    background-color: #fff;
    border: 1px solid #d4af37; /* ゴールド系のボーダー */
    border-radius: 25px;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ホバーエフェクト */
#shops li:hover {
    background-color: #d4af37;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* タブレット表示：3列レイアウト */
@media (max-width: 1024px) and (min-width: 769px) {
    #shops li {
        flex: 0 0 calc(33.333% - 8px); /* 3列 */
    }
}

/* スマホ表示：2列レイアウト */
@media (max-width: 768px) {
    .accordion__detail {
        padding: 15px 0;
    }
    
    #shops {
        gap: 10px;
    }
    
    #shops li {
        flex: 0 0 calc(50% - 5px); /* 2列（50%）からgap分を引く */
        padding: 10px 16px;
        font-size: 13px;
        min-height: 44px;
        border-radius: 22px;
    }
}

/* より小さなスマホ画面対応 */
@media (max-width: 480px) {
    #shops {
        gap: 8px;
    }
    
    #shops li {
        flex: 0 0 calc(50% - 10px);
        padding: 8px 12px;
        font-size: 12px;
        min-height: 40px;
        border-radius: 20px;
    }
}

/* コンテナの調整 */
.accordion__detail .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* 特定の店舗に特別なスタイルが必要な場合
#shops li.ginzahonten {
    font-weight: bold;
}
 */
/* アクティブ状態のスタイル（選択された店舗用） */
#shops li.active {
    background-color: #d4af37;
    color: #fff;
}

/* フォーカス状態（アクセシビリティ対応） */
#shops li:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}
/* グラデーションボーダー版 */
/* #shops li {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #d4af37, #f4e4bc) border-box;
    border: 2px solid transparent;
} */

/* シャドウ強調版 */
#shops li {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#shops li:hover {
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}
.container-fluid-front{
	max-width: 1200px;
}


/* scroll-snap対応横スクロールカルーセル */
.scroll-carousel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.carousel-title {
  font-size: 2em;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 20px;
  padding: 20px 0 30px 0;
  /* scroll-snapの核心設定 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* スクロールバーのカスタマイズ */
  scrollbar-width: thin;
  scrollbar-color: #bdc3c7 #ecf0f1;
}

/* Webkit系ブラウザ用スクロールバースタイル */
.scroll-container::-webkit-scrollbar {
  height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #ecf0f1;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #bdc3c7;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
}

.scroll-item {
  flex: 0 0 280px; /* 固定幅で横スクロール対応 */
  height: 380px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  /* scroll-snap設定 */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.scroll-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.item-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.scroll-item:hover .item-image {
  transform: scale(1.1);
}

.item-info {
  padding: 20px;
  text-align: center;
}

.item-title {
  font-size: 1.2em;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  line-height: 1.3;
}

.item-price {
  font-size: 1.4em;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 10px;
}

.item-rating {
  color: #E8C100;
  font-size: 1.1em;
}

.scroll-hint {
  text-align: center;
  margin-top: 15px;
  color: #7f8c8d;
  font-size: 0.9em;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .scroll-item {
    flex: 0 0 250px;
    height: 350px;
  }

  .item-image {
    height: 180px;
  }

  .item-info {
    padding: 15px;
  }

  .item-title {
    font-size: 1.1em;
  }

  .item-price {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .scroll-carousel {
    padding: 20px 10px;
  }

  .scroll-container {
    gap: 15px;
  }

  .scroll-item {
    flex: 0 0 220px;
    height: 320px;
  }

  .item-image {
    height: 160px;
  }

  .carousel-title {
    font-size: 1.6em;
  }
}

/* タッチデバイス向け最適化 */
@media (hover: none) and (pointer: coarse) {
  .scroll-container {
    /* タッチデバイスでのスクロール性能向上 */
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
  }

  .scroll-item:hover {
    /* タッチデバイスではホバー効果を無効化 */
    transform: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  .scroll-item:hover .item-image {
    transform: none;
  }
}




.marker-target {
  position: relative; /* 擬似要素の基準位置 */
  display: inline-block; /* または block など、表示形式に合わせて調整 */
  padding-bottom: 5px; /* マーカーを表示するスペース確保 */
}

.marker-target::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* マーカーの幅 */
  height: 8px; /* マーカーの高さ */
  background-color:#E8C100;  /* マーカーの色 */
  transform: scaleX(0); /* 初期状態では非表示 */
  transform-origin: left; /* アニメーションの起点を左端に */
  animation: markerAnimation 1s forwards; /* アニメーション */
}

@keyframes markerAnimation {
  0% {
    transform: scaleX(0); /* 初期状態：非表示 */
  }
  100% {
    transform: scaleX(1); /* 最終状態：表示 */
  }
}