@charset "utf-8";
/* =======================
common
=======================*/
.selector {
    font-feature-settings: "palt";
  }

:root{
    --primary-white: #FFFFFF;
    --primary-black: #333333;
    --primary-redgray: #CCC5C5;
    --primary-gray: #727171;
    --primary-red: #E60012;
}

html{
    font-size: 62.5%;
}

body{
    font-family:
        'Noto Sans JP',
        Arial, 
        sans-serif;
    font-style: normal;
    color:  var(--primary-black, #333333);
    background-color: var(--primary-white);
    line-height: 1.5;
    font-weight: 400;
}

img{
    max-width: 100%;
    height: auto;
}

.en{
    font-family: Roboto;
}

/*  PC版では表示しないbrタグ common PC */
@media screen and (min-width: 769px){
    .br-sp{
        display: none;
    }

} /* PC769px*/


/* ボタン*/

.btn{
    transition: 0.4s; /* ボタンには絶対入れる*/
}

.btn:hover{
    opacity: 0.5;
}


/* ================
　トップボタン
================*/

.back-to-top {
    display: none;
    position: fixed;
    right: 2.5%;
    bottom: 10%;
    display: inline-block;
    text-decoration: none;
    z-index: 101;
  }

.btn_top{
    width: 50px;
    height: 50px;
    background-image: url(../images/topbtn.png);
    background-size: 50px;
    background-repeat: no-repeat;
}

.btn_top:hover{
    background-image: url(../images/hover-topbtn.png);
    background-size: 50px;
    background-repeat: no-repeat;
}
 



/* =======================
footer
=======================*/

.footer{
    background-color: rgba(204,197,197,0.2);
    padding: 60px 10%;/* 上は文字の高さの影響を受ける */
    font-family: Zen Maru Gothic;
}

.footerNav__item{
	font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 1.4px;
    margin-top: 32px;
    text-align: left;
}

.copy{
    text-align: center; 
    margin-top: 48px;
}

.copy small{
    font-size: 1.2rem;
    letter-spacing: 1px;
}


/* PC 769px*/
@media screen and (min-width: 769px){
    .footerNav__list{
        display: flex;
        justify-content: space-between;
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

    .copy small{
        font-size: 1.4rem;
        letter-spacing: 1.2px;
    }
} /* pc 769px */


/*=======================
 下層ページのページタイトル
 =======================*/
 .page__title{
    font-family: Zen Maru Gothic;
    color: var(--primary-black);
    font-size: 4.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 3px;
    padding-bottom: 32px;
    border-bottom:0.8px solid var(--primary-gray);
    width: 90%;
    margin: 0 auto;
}

.page__title h3{
    margin-left: 5%;
    margin-top: 80px;

}

/*pc769px*/
@media screen and (min-width: 769px) {
    .page__title{
        font-family: Zen Maru Gothic;
        color: var(--primary-black);
        font-size: 6.6rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 4.5px;
        padding-bottom: 80px;
        border-bottom:0.8px solid var(--primary-gray);
        width: 90%;
        margin: 0 auto;
        max-width: 1280px;
    }
} /* pc 769px */


/* =======================
戻るボタン共通
=======================*/

.btn_back{
    width: 50px;
    height: 50px;
    background-image: url(../images/backbtn.png);
    background-size: 50px;
    background-repeat: no-repeat;
  }
  
  .btn_back:hover{
    background-image: url(../images/hover-backbtn.png);
    background-size: 50px;
    background-repeat: no-repeat;
  }



/* =======================
workの作品画像　マウスオーバー設定
=======================*/
.worksItem{
    cursor: pointer;
    max-width: 200px;
    width: 100%;
  }
  .worksItem img {
    height: auto;
    transition: transform .6s ease;/* ゆっくり変化させる */
    width: 100%;
  }
  .worksItem:hover img {
    transform: scale(1.1);/* 拡大 */
  }


/* =======================
動く汽車エリア
=======================*/

.locomotive__area{
    background-color: var(--primary-white);
    padding-top: 10px;
    padding-bottom: 5px;
}

@keyframes infinity-scroll-left-1 {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap-1  {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list-1  {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left-1  {
      animation: infinity-scroll-left-1 15s infinite linear 0.5s both;
    }
    .scroll-infinity__item-1  {
      width: 150px;
    }

    .locomotive-w150,.locomotive-w300,.locomotive-w450,.locomotive-w600,.locomotive-w-750,.locomotive-w-900,.locomotive-w-1050,.locomotive-w-1200,.locomotive-w-1350,.locomotive-w-1500{
        display: none;
    }

/* 450px*/
@media screen and (min-width: 450px){
    .locomotive-w-450{
        display: block;
    }
} /* 450px */

/* 600px*/
@media screen and (min-width: 600px){
    .locomotive-w-600{
        display: block;
    }
} /*600px */

/* 700px*/
@media screen and (min-width: 700px){
    .locomotive-w-150,.locomotive-w-300{
        display: block;
    }
} /* 700px */

/* 750px*/
@media screen and (min-width: 750px){
    .locomotive-w-750{
        display: block;
    }
} /* 750px */

/* 900px*/
@media screen and (min-width: 900px){
    .locomotive-w-900{
        display: block;
    }
} /* pc 900px */

/* 1050px*/
@media screen and (min-width: 1050px){
    .locomotive-w-1050{
        display: block;
    }
} /* pc 1050px */

/* 1200px*/
@media screen and (min-width: 1200px){
    .locomotive-w-1200{
        display: block;
    }
} /* pc 1200px */

/* 1350px*/
@media screen and (min-width: 1350px){
    .locomotive-w-1350{
        display: block;
    }
} /* pc 1350px */

/* 1500px*/
@media screen and (min-width: 1500px){
    .locomotive-w-1500{
        display: block;
    }
} /* pc 1500px */





/* =======================
header
=======================*/
.container{
    position: relative;
}

.header__box{
    height: 67px;
    display: flex;
    align-items: center;/* 水平中央に揃う */
    justify-content: space-between;
    width: 100%;
    padding: 56px 5% 66px;
    top: 0;
    position: relative;
}

.logo img{
    width: 182.4px;
    height: 75.2px;
}

/*pc769px*/
@media screen and (min-width: 769px) {
  .header__box{
    padding: 66px 5% 70px;
}
}/*pc769px*/



/* =======================
ナビボタン
=======================*/

.wrapper {
    height: 100%;
    overflow-x: hidden;
    position: relative;
  }


/* ナビ画面が出た時の通常画面を薄いグレーにする設定*/
  .overlay {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .5s;
  }

  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }


  /* ハンバーガーメニューとクローズボタン*/

  .menu-trigger {
    display: inline-block;
    width: 36px;
    height: 28px;
    vertical-align: middle;
    border-radius: 100px;
    cursor: pointer;
    position: fixed;
    top: 5%;
    right: 5%;
    z-index: 100;
  }

  /* ハンバーガーメニュー*/
   .header__btn{
    width: 69px;
      position: fixed;
      right: 5%;
      display: inline-block;
      z-index: 101;
      margin-top: -6px;
  }
  
  .menu-trigger.active{
    margin-top: -5px;
  }

  .menu-trigger.active img{
    display: none;
  }

  /* クローズボタン*/
  .menu-trigger.active .nav__close{
    background-image: url(../images/btn-close.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width:  40px;               /* 幅指定 */
    height:  40px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: 10px;                  /* 位置調整 */
    right: 10px;          /* 余白指定 */
  }

  /* クローズボタンをマウスクリック*/
  .menu-trigger.active .nav__close:hover{
    background-image: url(../images/hover-btn-close.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width:  40px;               /* 幅指定 */
    height:  40px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: 10px;                  /* 位置調整 */
    right: 10px;          /* 余白指定 */
  }
  
/* ナビ画面*/
  .nav__box {
    width: 250px;
    height: 100%;
    padding-top: 100px;
    background-color: var(--primary-redgray);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    transform: translate(250px);
    transition: all .5s;
  }

  nav.open {
    transform: translateZ(0);
  }

  nav li {
    color: var(--primary-black);
    text-align: center;
    padding: 10px 0;
  }
  
  * {
    box-sizing: border-box;
  }

 


/* =======================
ナビ画面のメニュー項目
=======================*/
.nav__list__pc{
    display: none;
}

  .nav__topic{
    color: var(--primary-black);
}

.nav__list{
    width: 100%;
}

.nav__item{
    color: var(--primary-black);
    font-size: 2.4rem;
    font-family: Zen Maru Gothic;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2.0px;
    display: flex;
    align-items: center;
	margin-top:32px;
    margin-left:56px;
    position: relative;
}

.nav__item-1{
    margin-top: 24px;
}

/* メニュー項目の丸装飾*/
.nav__item::before{
    content:  "";     /* 空の要素作成 */
    background-color: rgba(0,0,0,0);
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: 1px;                  /* 位置調整 */
    margin-right: 24px;          /* 余白指定 */
}

.nav__item:hover:before{
    background-color: var(--primary-black);
}



/*  600px*/
@media screen and (min-width: 600px){
    .nav__item{
        color: var(--primary-black);
        font-size: 2.8rem;
        margin-top: 32px;
    }
}/* 600px*/


/* PC 769px*/
@media screen and (min-width: 769px){
    .nav__box{
        display: none;
    }

    .menu-trigger{
        display: none;
    }

    .overlay {
        display: none;
    }

    .logo img{
        width: 228px;
        height: 94px;
    }
   
    .header__box{
        max-width:  1600px;
        margin: 0 auto;
    }

    .nav__header{
         display: none; /*メニューボタンを消す*/
    }


    .nav__list__pc{
        margin: 0;
        display: flex; /* 横並び*/
        align-items: center;/* flexとセットで使う*/
        margin-top: 16px;
    }


    .nav__item{
        margin: 0 0 0 48px;
        text-align: left;
        font-size: 1.6rem;
        letter-spacing: 1.4px;
        line-height: 1.3;
        padding: 0;
    }

    /* HOMEメニューの非表示*/
    .nav__item-1{
        display: none;
    }

    /* ナビ版メニューの左の丸装飾の非表示*/
    .nav__item::before{
        display: none;
    }

    /* PC版メニュー項目の丸装飾*/
    .work-b::after{
        content:  "";     /* 空の要素作成 */
        background-color: rgba(0,0,0,0);
        width:  10px;               /* 幅指定 */
        height:  10px;              /* 高さ指定 */
        display:  inline-block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top: -24px;                  /* 位置調整 */
        right: 50%;                  /* 位置調整 */
    }

    .about-b::after{
        content:  "";     /* 空の要素作成 */
        background-color: rgba(0,0,0,0);
        width:  10px;               /* 幅指定 */
        height:  10px;              /* 高さ指定 */
        display:  inline-block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top: -24px;                  /* 位置調整 */
        right: 50%;                  /* 位置調整 */
    }

    .news-b::after{
        content:  "";     /* 空の要素作成 */
        background-color: rgba(0,0,0,0);
        width:  10px;               /* 幅指定 */
        height:  10px;              /* 高さ指定 */
        display:  inline-block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top: -24px;                  /* 位置調整 */
        right: 50%;                  /* 位置調整 */
    }

    .contact-b::after{
        content:  "";     /* 空の要素作成 */
        background-color: rgba(0,0,0,0);
        width:  10px;               /* 幅指定 */
        height:  10px;              /* 高さ指定 */
        display:  inline-block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top: -24px;                  /* 位置調整 */
        right: 50%;                  /* 位置調整 */
    }

    .news-b:hover:after{
        background-color: var(--primary-black);
    }
    .contact-b:hover:after{
        background-color: var(--primary-black);
    }

    .work-b:hover:after{
        background-color: var(--primary-black);
    }
    .about-b:hover:after{
        background-color: var(--primary-black);
    }
    
    .header__btn{
        display: none!important; /* 強制的に非表示 */
    }
		
} /* PC769px*/


/* =======================
Workの共通設定（トップページ、Workページ）
=======================*/

.works__box{
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

.workItem__list{
    width: 90%;
    margin: 64px auto 0;
    align-items: center;
}

.workItem__box{
    width: 100%;
    margin: 0 auto;
    max-width: 200px;
}

.worksItem{
    margin-top: 120px;
    text-align: center;
    width: 200px;
    height: 200px;
}

.worksItem img{
  border-radius: 50%;
}

.work-year{
    font-family: Zen Maru Gothic;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 2.4px;
    margin: 8px 0;
}

/*  Works 642px */
@media screen and (min-width: 642px){
    .workItem__box{
        display: flex;
        flex-wrap:wrap;
        gap: 120px;
        justify-content: space-between;
        width: 90%;
        margin: 120px auto 0;
        max-width: 533px;
    }

    .worksItem{
        margin-top: 0;
    }
}/*pc642px*/

/*  Works pc */
@media screen and (min-width: 1038px){
    .workItem__box{
        max-width: 866px;
    }
}/*1038px*/