:root {
--serif: 'Noto Serif JP', serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
--sans: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.main{height: 425px;width: 100%;
    background-image: url(../img/recruit/main_bg.png);
    background-position: center bottom ;
background-size: cover;position: relative;}
.main img{ 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom:50px;;
}


.letter .contents{
    width: 100%;
    padding-bottom: 30px;
    padding-top: 0px;

}


.letter .contents .recruit_block{}

.letter .contents .recruit_block_letter{}

.letter .contents .recruit_block_letter_01{ text-align: center;border-bottom: 2px solid #a99280;padding: 0px 0px 15px 0px;font-size: 32px;width: min(100%, 1080px);margin: 30px auto 50px auto;font-weight: 900;color: #666666;position: relative}



.letter .contents .recruit_block_letter_01 .back{position: absolute;bottom:20px;left: 0;}

.letter .contents .recruit_block_letter_02{width: 900px;margin: 0 auto 0 auto;display: flex;justify-content: space-between;font-size: 16px;}

.year_list{width: 380px;}

.year_list .title{padding:0px 15px 5px 10px ;border-bottom: 1px solid #a38a77;margin-bottom: 15px;font-weight: bold;font-size: 20px;}

.year_list ul{display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 0 10px 0 10px}

.year_list ul li{width: calc(33% - 20px);cursor: pointer;background-image: url(../img/recruit/letter_arrow.png);background-position: right 20px center;background-repeat: no-repeat;margin-bottom: 10px;font-size: 18px;padding: 10px;}
.year_list ul li:hover{opacity: 1}


.year_list ul li.active{font-weight: bold; color: #000;background-color: #c4e3ef}

.letter_list{width:calc(100% -  420px);}

.letter_list .year_title{padding:0px 15px 0px 10px ;margin-bottom: 5px;font-weight: bold;font-size: 20px;text-align: center}

.letter_list ul{width: 100%;border-top: 1px solid #CCC}

.letter_list ul li{border-bottom: 1px solid #CCC;border-left: 1px solid #CCC;border-right:1px solid #CCC;}
.letter_list ul li a{padding: 15px;display: block;text-align: left;text-decoration: none;color: #000;background-image: url(../img/recruit/letter_arrow.png);background-repeat: no-repeat;background-position: right 10px center}
.letter_list ul li a:hover{opacity: 1}


.panel {
  display: none;
}







.panel.active {
  display: block;
opacity: 0;
animation-name: fade_panel;/*1で解説*/
animation-fill-mode:forwards;/*2で解説*/
animation-duration:0.5s;/*3で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

@keyframes fade_panel{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



@media screen and (max-width: 479px){
    
.main{height: 300px;}
    
.main img{ 
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 130px;
}
.letter .contents .recruit_block_letter_01{font-size: 22px;width: min(100%, 1080px);margin: 30px auto 10px auto;}
.letter .contents .recruit_block_letter_01 .back{display: none}
.letter .contents .recruit_block_letter_02{width:100%;margin: 0 auto 0 auto;display: block}
.year_list{width: 100%}
.year_list .tab-scr{width: 100%;overflow-x: scroll;border-top: 1px solid #CCC;border-bottom: 1px solid #CCC;margin-bottom: 30px;}
.year_list ul{display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 0 0px 0 0px;width: 2400px;}
.year_list ul li{width: 100px;background-image:none;margin-bottom: 0px;font-size: 16px;border-right: 1px solid #CCC;text-align: center;padding: 10px 0px 10px 0px}

.letter_list{width:calc(100% - 40px);margin: 0 auto 0 auto}
}