@charset "utf-8"; 


/* homePage */
.mainContent#home { padding: 0 0 49px; background-color: #fff; }

/* homePage */

/* top */
.slick { position: relative; z-index: 5; top: 0; left: 0; width: 100%; background-color: #fff; overflow: hidden; }
.slick.slick-dotted.slick-slider { padding-bottom: 0; margin-bottom: 0; }
.slick div.slick-list { overflow: visible; }
.slick div.slick-slide { width: 100%; height: auto; margin: 0; overflow: hidden; background-color: #ddd; text-align: center; color: #fff; }
.slick div.slick-slide > div { position: relative; top: 0; left: 0; }
.slick div.slick-slide > div img { display: block; width: 100%; height: auto; }
.slick div.slick-slide > div img + img { display: none; }
.slick div.slick-slide > div > a { position: absolute; bottom: 77px; left: 50%; display: block; width: 17.1875%; height: auto; -webkit-transition: all .3s; transition: all .3s; }
.slick div.slick-slide > div > a:hover { opacity: .6; }

.slick .slick-dots { position: relative; z-index: 2; bottom: 45px; }
.slick .slick-dots li { width: 10px; height: 10px; padding: 0; margin: 0 12px; background-color: #bcbdbd; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.slick .slick-dots li:hover,
.slick .slick-dots li.slick-active { background-color: #fff; }
.slick .slick-dots li button::before { display: none; }

@media screen and (max-width: 1400px){
  .slick { left: 50%; width: 120%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@media screen and (max-width: 1200px){
  .slick { width: 140%; }
  .slick div.slick-slide > div.cc { overflow: hidden; }
  .slick div.slick-slide > div.cc img { position: relative; left: 6%; }
  .slick div.slick-slide > div > a { left: 55%; bottom: 75px; }
}

@media screen and (max-width: 1000px){
  .slick { width: 150%; }
  .slick div.slick-slide > div.cc img { position: relative; left: 6%; }
  .slick div.slick-slide > div > a { left: 55%; bottom: 72px; }
}

@media screen and (max-width: 860px){
  .slick div.slick-slide > div > a { bottom: 63px; }
}

@media screen and (max-width: 767px){
	.slick.slick-dotted.slick-slider { width: 100%; left: 0; padding: 0 0 50px; margin-bottom: 0; -webkit-transform: none; transform: none; }
	.slick div.slick-slide { width: 100%; height: auto; }
  .slick div.slick-slide > div img { display: none; }
  .slick div.slick-slide > div img + img { display: block; }
  .slick div.slick-slide > div.cc img { left: 0; }
  .slick div.slick-slide > div > a { left: 9%; width: 87.2%;  }
	
	.slick .slick-dots { bottom: 30px; }
  .slick .slick-dots li { width: 8px; height: 8px; margin: 0 9px; }
}

@media screen and (max-width: 374px){
  .slick div.slick-slide > div > a { bottom: 51px; }
  .slick .slick-dots { bottom: 34px; }
}
/* top */


/* mainContent */

#home .cb { position: relative; padding-top: 130px; }
#home .cb:before { position: absolute; top: 0; display: block; font-family: 'Khand'; font-weight: bold; color: #f3f6f9; z-index: 0; font-size: 26rem; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
#home #recruiting { padding-top: 194px; }
#home #blog:before { top: -7px; left: -14px; content: 'note'; }
#home #recruiting:before { top: 86px; right: -50px; content: 'RECRUITING'; }
#home #keyword:before { top: 210px; left: -14px; content: 'KEY WORD'; white-space: nowrap; }

#home .hd { position: relative; text-align: center; margin: 0 auto 20px; }
#home .hd h2  { font-family: 'Khand'; font-size: 7.0rem; font-weight: 600; line-height: 1; color: #004e9d; margin: 0 auto; letter-spacing: .09em; }
#home .hd h2 + p { font-size: 1.8rem; margin: 8px auto 20px; letter-spacing: .08em; font-weight: 500; }

#home div.catch { display: block; margin: 60px auto 20px; text-align: center; }
#home div.catch p { position: relative; display: inline-block; font-size: 2.6rem; letter-spacing: .1em; }
#home div.catch p:before { position: absolute; content: ''; top: 22px; left: -40px;  width: 1.4em; height: 1px; background-color: #222; -webkit-transform: rotate(60deg); transform: rotate(60deg); }
#home div.catch p:after  { position: absolute; content: ''; top: 22px; right: -40px; width: 1.4em; height: 1px; background-color: #222; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); }



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

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

@media screen and (max-width: 767px) {
  #home .cb { position: relative; padding-top: 40px; }
  #home .cb:before { font-size: 10rem; }
  #home #blog { padding-top: 0px; }
  #home #recruiting { padding-top: 60px; }
  #home #blog:before { top: -30px; }
  #home #recruiting:before { top: 30px; }
  #home #keyword:before { top: 148px; }

  #home .hd { margin: 0 auto 10px; }
	#home .hd h2  { font-size: 4.0rem; font-weight: bold; margin: 2px auto 0; padding: 4px 0 0; }
	#home .hd h2 + p { font-size: 1.0rem; margin: 0 auto 10px; }
	
	#home div.catch { margin: 30px auto 10px; }
	#home div.catch p { font-size: 1.6rem; line-height: 1.375; }
	#home div.catch p .spp { display: inline; }
	#home div.catch p:before { top: 20px; left: -40px;  width: 2.4em; }
  #home div.catch p:after  { top: 20px; right: -40px; width: 2.4em; }
}

#blog .note_wrap { display: flex; gap: 0 10px; justify-content: center; flex-wrap: wrap; max-width: 1020px; margin: 0 auto;}
#blog .note_wrap iframe { margin: 0px!important;}

#recruiting ul { position: relative; width: 102%; margin: 30px auto 30px -1%; padding: 0 .3%; display: flex; flex-wrap: wrap; justify-content: flex-start; }
#recruiting ul li { position: relative; width: 18.4%; height: auto; text-align: center; margin: 10px .8% 40px; }
#recruiting ul li a > div { border: 1px solid #d6e0ea; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 160px; margin-bottom: 1em; -webkit-transition: all .3s; transition: all .3s; }
#recruiting ul li a > div > img { width: 80%; height: auto; }
#recruiting ul li a { text-decoration: none; color: #222; -webkit-transition: all .3s; transition: all .3s; }
#recruiting ul li a:hover { color: #004e9d; }
#recruiting ul li a:hover > div { border-color: #004e9d; }


@media screen and (max-width: 1200px){
  #recruiting ul li a > div { height: 130px; }
}

@media screen and (max-width: 1000px){
  #recruiting ul li a > div { height: 100px; }
}

@media screen and (max-width: 767px){
  #recruiting ul { width: 100%; margin: 15px auto; padding: 0; justify-content: space-between; }
  #recruiting ul li { width: 48%; margin: 5px 0 20px; font-size: 1.0rem; }
  #recruiting ul li a > div { height: auto; padding: 8px 0; }
}



#keyword .view { position: relative; width: 100%; height: 450px; background-color: #004e9d; overflow: hidden; text-align: justify; }
#keyword .view ul {  }
#keyword .view ul li { display: inline; position: relative; word-break: break-all; }

#keyword .view ul li a { display: inline; padding: 0 .5em 0 1em; font-size: 3.6rem; font-weight: 500; text-decoration: none; color: #fff; line-height: 1.66; pointer-events: none; }
#keyword .view ul li a:before { position: absolute; top: -3px; left: .2em; content: ''; width: .7em; height: .7em; background-image: url(../img/common/tag-solid_02.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; }
#keyword .view ul li a:hover { background: #fff; color: #004e9d; }
/* mainContent */

@media screen and (max-width: 1200px){
  #keyword .view ul li a { font-size: 3.3rem; }
}

@media screen and (max-width: 1000px){
  #keyword .view ul li a { font-size: 3.0rem; }
}

@media screen and (max-width: 767px){
  #keyword .view { height: 440px; margin-top: 30px; }
  #keyword .view ul li a { font-size: 2.4rem; }
}

@media screen and (max-width: 580px){
  #keyword .view ul li a { font-size: 2.0rem; }
}

@media screen and (max-width: 420px){
  #keyword .view ul li a { font-size: 1.8rem; }
}



#keyword .view ul {
 position:absolute
}
#keyword .view ul {
 -webkit-animation:keywordSlide 40s linear infinite;
 animation:keywordSlide 40s linear infinite
}
@media screen and (max-width: 1200px){
 #keyword .view ul {
  -webkit-animation:keywordSlide 50s linear infinite;
  animation:keywordSlide 50s linear infinite
 }
}
@media screen and (max-width: 767px){
 #keyword .view ul {
  -webkit-animation:keywordSlide 60s linear infinite;
  animation:keywordSlide 60s linear infinite
 }
}
@media screen and (max-width: 580px){
 #keyword .view ul {
  -webkit-animation:keywordSlide 70s linear infinite;
  animation:keywordSlide 70s linear infinite
 }
}
@media screen and (max-width: 420px){
 #keyword .view ul {
  -webkit-animation:keywordSlide 80s linear infinite;
  animation:keywordSlide 80s linear infinite
 }
}
@-webkit-keyframes keywordSlide {
 0% {
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 99% {
  opacity:1
 }
 100% {
  opacity:0;
  -webkit-transform:translateY(calc(-100% + 50vh + 60px));
  transform:translateY(calc(-100% + 50vh + 60px))
 }
}
@keyframes keywordSlide {
 0% {
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 99% {
  opacity:1
 }
 100% {
  opacity:0;
  -webkit-transform:translateY(calc(-100% + 50vh + 60px));
  transform:translateY(calc(-100% + 50vh + 60px))
 }
}



@-webkit-keyframes keywordSlideSP {
 0% {
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 99% {
  opacity:1
 }
 100% {
  opacity:0;
  -webkit-transform:translateY(calc(-100% + 50vh + 60px));
  transform:translateY(calc(-100% + 50vh + 60px))
 }
}
@keyframes keywordSlideSP {
 0% {
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 99% {
  opacity:1
 }
 100% {
  opacity:0;
  -webkit-transform:translateY(calc(-100% + 50vh + 60px));
  transform:translateY(calc(-100% + 50vh + 60px))
 }
}





#home .btn90.blue { margin: 150px auto 100px; }


@media screen and (max-width: 767px){
  #home .btn90.blue { margin: 75px auto 50px; }
}

/* ========================================
   note記事一覧
   PC：4列
   スマホ：1列
======================================== */
.note-feed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
}

/* ========================================
   1記事
======================================== */
.note-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
.note-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* ========================================
   サムネイル
======================================== */
.note-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f5f5;
}
.note-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.note-card-image:hover img {
    transform: scale(1.04);
}

/* ========================================
   記事本文
======================================== */

.note-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

/* ========================================
   投稿日
======================================== */

.note-card-date {
    margin-bottom: 8px;
    color: #888;
    font-size: 12px;
}

/* ========================================
   タイトル
======================================== */
.note-card-title {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
}
.note-card-title a {
    color: #333;
    text-decoration: none;
}
.note-card-title a:hover {
    text-decoration: none;
}

/* ========================================
   概要
======================================== */
.note-card-description {
    margin: 0 0 16px;
    color: #666;
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ========================================
   作者
======================================== */
.note-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #666;
    font-size: 12px;
}
/* 作者アイコン */
.note-card-author-image {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.note-card-author a,
.note-card-author a:hover,
.note-card-author a:visited,
.note-card-author a:active {
    color: inherit;
    text-decoration: none;
}
/* ========================================
   スマホ
   1列
======================================== */
@media screen and (max-width: 768px) {
    .note-feed {
        grid-template-columns: 1fr;

        gap: 16px;
    }
    .note-card {
        display: grid;

        grid-template-columns: 120px minmax(0, 1fr);

        flex-direction: initial;
    }
    /* スマホではサムネイルを左側 */
    .note-card-image {
        width: 120px;
        height: 100%;
        aspect-ratio: auto;
    }
    .note-card-body {
        padding: 12px;
    }
    .note-card-date {
        margin-bottom: 4px;
        font-size: 11px;
    }
    .note-card-title {
        margin-bottom: 6px;
        font-size: 15px;
        line-height: 1.4;
    }
    /* スマホでは概要を非表示 */
    .note-card-description {
        display: none;
    }
    .note-card-author {
        font-size: 11px;
    }
    .note-card-author-image {
        width: 22px;
        height: 22px;
    }

}