@charset "utf-8";
/*##########################################################*/
/*  Page For Top Use Style  																*/
/*    Ver:1.00/001           																*/
/*    Date:2018/11/08        																*/
/*##########################################################*/
/*###################### Variable Define #######################*/
/*################### For Top Pages ###################*/
/* スライダー画面高 */
main {
  --TOP-SLIDE-IMG-HEIGHT:calc(100dvh - 289.1px);  /* ヘッダー+workコンテンツ高 259.1:mac対応 + 30 */
  --TOP-SLIDE-IMG-HEIGHT-PC2:calc(var(--TOP-SLIDE-IMG-HEIGHT) + var(--COM-HEADER-TEXT-HEIGHT));  /* 1120px以下 */
  --TOP-SLIDE-IMG-HEIGHT-SP:calc(var(--TOP-SLIDE-IMG-HEIGHT-PC2) + var(--COM-HEADER-PTB-DIFF));  /* 480px以下 */
  
  /* for Mac Safari */
  --TOP-SLIDE-IMG-HEIGHT-SAFARI:calc(100dvh - 287px);  /* ヘッダー+workコンテンツ高 257+30 */
  --TOP-SLIDE-IMG-HEIGHT-SAFARI-PC2:calc(var(--TOP-SLIDE-IMG-HEIGHT-SAFARI) + var(--COM-HEADER-TEXT-HEIGHT));  /* 1120px以下 */
  --TOP-SLIDE-IMG-HEIGHT-SAFARI-SP:calc(var(--TOP-SLIDE-IMG-HEIGHT-SAFARI-PC2) + var(--COM-HEADER-PTB-DIFF-SAFARI));  /* 480px以下 */
}

/*###################### Main PC sec #######################*/
/*################### Com div ###################*/
/* コンテンツ内共通 */
#main-content {
  margin-top: 0;
}

/*################### Each Section div ###################*/
/* ヘッダー部（トップページのみ適用） */
header #header-content .common-wrap,
#main-content #works .common-wrap {
  width:calc(100% - 200px);
  margin-left: 100px;
  margin-right: 100px;
}

/* Worksセクション、リンクテキスト */
#main-content #works .link-text {
  text-align: right;
}
#main-content #works .link-text a {
  text-decoration: underline;
  font-weight: bold;
}

/* Worksセクション、スライダー */
#main-content #works .image-slide.pc {
  margin-top:8px;
} 
#main-content #works .image-slide .slick-slide img {
  height:var(--TOP-SLIDE-IMG-HEIGHT);  /* スライド画像の高さ制御 */
  width:100%;
  object-fit:cover;
  transition:border-radius .5s cubic-bezier(.165,.84,.44,1);
}
_::-webkit-full-page-media, _:future, :root  #main-content #works .image-slide .slick-slide img {
  height:var(--TOP-SLIDE-IMG-HEIGHT-SAFARI);  /* スライド画像の高さ制御Safari18.4別対応 */
}
#main-content #works .image-slide .slick-slide img:hover {
  border-radius: 50%;
  transition:border-radius .5s cubic-bezier(.165,.84,.44,1);
}

/*###################### Middle2 PC sec  #######################*/
@media (max-width:1280px){
  /*################### Each Section div ###################*/
  /* ヘッダー部（トップページのみ適用） */
  header #header-content .common-wrap,
  #main-content #works .common-wrap {
    width:calc(100% - 40px);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*###################### Middle3 PC sec  #######################*/
@media (max-width:1120px){
  /*################### Each Section div ###################*/
  /* Worksセクション、スライダー */
  #main-content #works .image-slide .slick-slide img {
    height:var(--TOP-SLIDE-IMG-HEIGHT-PC2);  /* スライド画像の高さ制御 */
  }
  _::-webkit-full-page-media, _:future, :root  #main-content #works .image-slide .slick-slide img {
    height:var(--TOP-SLIDE-IMG-HEIGHT-SAFARI-PC2);  /* スライド画像の高さ制御Safari18.4別対応 */
  }
}

/*###################### S-Phone sec #######################*/
@media (max-width : 480px) {
	/*################### Common Layout div ###################*/
  /*################### Com div ###################*/
  /* コンテンツ内共通 */
  #main-content {
    margin-top: 0;
  }

  /* Worksセクション、スライダー */
  #main-content #works .image-slide .slick-slide img {
    height:var(--TOP-SLIDE-IMG-HEIGHT-SP);  /* スライド画像の高さ制御 */
  }
  _::-webkit-full-page-media, _:future, :root  #main-content #works .image-slide .slick-slide img {
    height:var(--TOP-SLIDE-IMG-HEIGHT-SAFARI-SP);  /* スライド画像の高さ制御Safari18.4別対応 */
  }
}