@charset "UTF-8";


/*-----------------------------------------------------*/
/*------------------------変数--------------------------*/
/*-----------------------------------------------------*/

:root {


  /*フォント*/
  --font-basic: "ubuntu", "Noto Sans JP", sans-serif;
  --font-en: "ubuntu", sans-serif;
  --font-ja: "Shippori Antique", sans-serif;


  /*カラー*/
  --color-main:#0089d2;
  --color-black: #000;
  --color-gray: #33373a;
  --color-gray-light: #e8e8e8;
  --color-gray-pale: #f7f8f8;
  --color-white: #fff;
  --color-blue-hi-light:#9ec9ec;
  --color-blue-light:#59bfe7;
  --color-blue:#009cda;
  --color-blue-dark:#0079bc;
  --color-yellow:#FBEB00;
  --color-red:#ff101c;


/*フォントサイズ*/
  --s8: calc(8 / 16 * 1rem);
  --s10: calc(10 / 16 * 1rem);
  --s11: calc(11 / 16 * 1rem);
  --s12: calc(12 / 16 * 1rem);
  --s13: calc(13 / 16 * 1rem);
  --s14: calc(14 / 16 * 1rem);
  --s15: calc(15 / 16 * 1rem);
  --s16: calc(16 / 16 * 1rem);
  --s17: calc(17 / 16 * 1rem);
  --s18: calc(18 / 16 * 1rem);
  --s19: calc(19 / 16 * 1rem);
  --s20: calc(20 / 16 * 1rem);
  --s21: calc(21 / 16 * 1rem);
  --s22: calc(22 / 16 * 1rem);
  --s23: calc(23 / 16 * 1rem);
  --s24: calc(24 / 16 * 1rem);
  --s25: calc(25 / 16 * 1rem);
  --s26: calc(26 / 16 * 1rem);
  --s27: calc(27 / 16 * 1rem);
  --s28: calc(28 / 16 * 1rem);
  --s29: calc(29 / 16 * 1rem);
  --s30: calc(30 / 16 * 1rem);
  --s31: calc(31 / 16 * 1rem);
  --s32: calc(32 / 16 * 1rem);
  --s33: calc(33 / 16 * 1rem);
  --s34: calc(34 / 16 * 1rem);
  --s35: calc(35 / 16 * 1rem);
  --s36: calc(36 / 16 * 1rem);
  --s37: calc(37 / 16 * 1rem);
  --s38: calc(38 / 16 * 1rem);
  --s39: calc(39 / 16 * 1rem);
  --s40: calc(40 / 16 * 1rem);
  --s41: calc(41 / 16 * 1rem);
  --s42: calc(42 / 16 * 1rem);
  --s43: calc(43 / 16 * 1rem);
  --s44: calc(44 / 16 * 1rem);
  --s45: calc(45 / 16 * 1rem);
  --s46: calc(46 / 16 * 1rem);
  --s47: calc(47 / 16 * 1rem);
  --s48: calc(48 / 16 * 1rem);
  --s49: calc(49 / 16 * 1rem);
  --s50: calc(50 / 16 * 1rem);
  --s51: calc(51 / 16 * 1rem);
  --s52: calc(52 / 16 * 1rem);
  --s53: calc(53 / 16 * 1rem);
  --s54: calc(54 / 16 * 1rem);
  --s55: calc(55 / 16 * 1rem);
  --s56: calc(56 / 16 * 1rem);
  --s57: calc(57 / 16 * 1rem);
  --s58: calc(58 / 16 * 1rem);
  --s59: calc(59 / 16 * 1rem);
  --s60: calc(60 / 16 * 1rem);
  --s80: calc(80 / 16 * 1rem);
  --s90: calc(90 / 16 * 1rem);
  --s100: calc(100 / 16 * 1rem);
  --s110: calc(110 / 16 * 1rem);
  --s120: calc(120 / 16 * 1rem);
  --s132: calc(132 / 16 * 1rem);
  --s150: calc(150 / 16 * 1rem);
  --s200: calc(200 / 16 * 1rem);
}




/*-----------------------------------------------------*/
/*-------------------ベース・リセット---------------------*/
/*-----------------------------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

html {
  font-size: 16px;
  font-weight: 400;
  scroll-behavior: smooth;/*スムーズスクロール*/
}

body {
  font-feature-settings: 'palt';/*文字つめ*/
  /* Safari*/
  text-size-adjust: 100%;
  overflow-wrap: anywhere;/*urlもテキスト折る*/
  font-family: var(--font-basic);
  background: var(--color-white);
  letter-spacing: 0.05rem;
  color: var(--color-gray);
}

/*
main{overflow:hidden;}*/


/*テクスト選択反転カラー*/
::selection {
  color: var(--color-white);
  background: var(--color-blue);
}
/*Firefox*/
::-moz-selection {
  color:var(--color-white);
  background: var(--color-blue);
}

:where(:any-link, button, [type='button'], [type='reset'], [type='submit'], label[for], select, summary, [role='tab'], [role='button']) {
  cursor: pointer;
}

table,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
  list-style: none;
}

p {
  font-feature-settings: 'palt';/*文字つめ*/
  font-family: var(--font-basic);
  line-height: var(--s26);
  padding: 0;
  margin: 0;
  word-wrap: break-word;
  color: var(--color-gray);
  text-align: justify;
}

sub,
sup {
  font-size: 0.6rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/*下付き*/
sub {
  bottom: 0;
}

/*上付き*/
sup {
  top: -0.25rem;
}

hr {
  height: 1px;
  background-color: var(--color-black);
  border: none;
  color: var(--color-black);
  margin: 10px 0;
}

a {
  text-decoration: none;
  cursor: pointer;
  outline: none;
  color: var(--color-gray);
}
a:hover {
  color: var(--color-blue-light);
  transition: 0.2s;
}
ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

/* 画像 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  max-width: 100%;
  height: auto;
  border-style: none;
  image-rendering: -webkit-optimize-contrast;
}

/*フォーム系*/
input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
textarea:focus {
  border: none;
  outline: 0;
}

input[type='submit'],
input[type='button'] {
  cursor: pointer;
  outline: none;
  border: none;
}


small {font-size: var(--s10);}

/* ----------------------------- */
/* -------要素をふわっと表示-------- */
/* ------------------------------ */
.fade {
	opacity: 0;
	transform: translateY(80px);
	transition: opacity 1.5s, transform 1s;
}
.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/*-----------------------------------------------------*/
/*-------------------コンテンツ--------------------------*/
/*-----------------------------------------------------*/

/* 表示切り替え（PC / SP）*/
.pc_no {display: none;}
.sp_no {display: block;}

@media screen and (max-width: 768px) {
  .pc_no {display: block;}
  .sp_no {display: none;}
}

/* ===============================
   コンテナ共通
================================= */
.content,
.w980,
.w680 {
  width: 100%;
  margin: 0 auto;
  position: relative;
  clear: both;
}

/* サイズ別 */
.content {width: min(85%, 1400px);}
.w980 {width: min(85%, 980px);}
.w680 {width: min(85%, 680px);}

/* スマホ */
@media screen and (max-width: 768px) {
  .content,
  .w980,
  .w680 {
    width: 93%;
  }
}


/* -------------------------- */
/* --------flexbox 共通------ */
/* -------------------------- */
.flex{
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}


/*-----------------------------------------------------*/
/*---------------------- テキスト ----------------------*/
/*-----------------------------------------------------*/

.txt-ja{font-family: var(--font-ja);}
.txt-en{font-family: var(--font-en);}


/*-----------------------------------------------------*/
/*---------------------- パンくず -----------------------*/
/*-----------------------------------------------------*/

.breadcrumb {
  margin-bottom: 100px;
  margin-top: 0.5rem;
}
.breadcrumb-nav {
  font-size:var(--s14);
}
.breadcrumb-nav li:first-child a {
  color:var(--color-gray);
  vertical-align: baseline;
  position: static;
  transform: none;
  line-height: 1.5;
  font-size: inherit;
}
.breadcrumb-nav a:hover {
  text-decoration: underline;
  color: var(--color-blue-light);
  transition: 0.2s;
}



.breadcrumb-nav ul {display: flex;}
.breadcrumb-nav li {margin-right: 8px;}
.breadcrumb-nav a {text-decoration: none;}

.breadcrumb-nav li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
}
@media screen and (max-width: 768px) {
  .breadcrumb {
    margin-bottom: 50px;
  }
  .breadcrumb-nav {
    font-size:var(--s12);
  }
  .breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
}
  .breadcrumb-nav li:not(:last-child)::after {
    content: ">";
  }
}



/* =========================================
   タイトルエリア
========================================= */

.title {
  width: 100%;
  margin-top: 7.7rem;
}

/* 枠（ここで切り抜く） */
.bg-frame {
  width: 100%;
  height: 260px;
  overflow: hidden;
  position: relative;
}

.bg-img-service,
.bg-img-equipment,
.bg-img-company,
.bg-img-recruit{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* 背景画像 */
.bg-img-service{background: url('../../service/img/title_service.jpg') center/cover no-repeat;}
.bg-img-equipment{background: url('../../equipment/img/title_equipment.jpg') center/cover no-repeat;}
.bg-img-company{background: url('../../company/img/title_company.jpg') center/cover no-repeat;}
.bg-img-recruit{background: url('../../recruit/img/title_recruit.jpg') top/cover no-repeat;}

.title h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  z-index: 10;
}
.title .txt-ja{
  color: var(--color-white);
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.3);
}

/* TOP英表記 */
#title-service .txt-en,
#title-company .txt-en,
#title-recruit .txt-en{
  position: absolute;
  top: 0;
  left: max(7.5%, calc((100vw - 1400px) / 2));
  z-index: 10;
  font-size: var(--s90);
  font-weight: 500;
  opacity: 0.5;
}
#title-service .txt-en{color: var(--color-white);}
#title-company .txt-en,
#title-recruit .txt-en{
  background: linear-gradient(180deg, #0079bc 0%, #009cda 40%, #9ec9ec 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: multiply;
}
#title-equipment .txt-en{
  position: absolute;
  bottom: 1rem;
  left: max(7.5%, calc((100vw - 1400px) / 2));
  z-index: 10;
  font-size: var(--s90);
  font-weight: 500;
  opacity: 0.7;
  background: linear-gradient(180deg, #0079bc 0%, #009cda 40%, #9ec9ec 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: screen;
}

/* CONTACT / PRIVACY */
#title-contact h1,
#title-form h1,
#title-privacy h1 {
  font-size: var(--s80);
  opacity: 0.8;
  background: linear-gradient(180deg, #0079bc 0%, #009cda 40%, #9ec9ec 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: multiply;
}

/* 下層ページトップ画像アニメーション */
/* 共通 */
.img1,
.img2 {
  transform-origin: top center;
}

/* 1枚目 */
.img1 {
  animation: zoomOut1 20s linear infinite;
}

/* 2枚目（半周期ずらす） */
.img2 {
  animation: zoomOut2 20s linear infinite;
}

/* 1枚目 */
@keyframes zoomOut1 {
  0% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  50.01% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* 2枚目 */
@keyframes zoomOut2 {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  49.99% {
    opacity: 0;
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* 見出し h2 */
h2 {
  margin: 1rem auto;
  text-align: center;
  color: var(--color-blue-dark);
  font-size: var(--s25);
}

@media screen and (max-width: 768px) {
  .title {
    width: 100%;
    margin-top: 4.4rem;
  }
  #title-service .txt-en,
  #title-equipment .txt-en,
  #title-company .txt-en,
  #title-recruit .txt-en {
    font-size: var(--s26);
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #0079bc 0%, #009cda 40%, #9ec9ec 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: screen;
    opacity: 1;
  }

  #title-contact .bg-frame,
  #title-privacy .bg-frame{
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;

  }
  #title-contact h1,
  #title-privacy h1 {
    padding: 0;
    font-size: var(--s50);
  }
  #title-form h1{font-size: var(--s40)}
  h2 {
    font-weight: 500;
    font-size: var(--s23);
  }

}

/*-----------------------------------------------------*/
/*-------------背景色-----------------------------------*/
/*-----------------------------------------------------*/
.bg_gray{
  width: 100%;
  background-color: var(--color-gray-pale);
  padding: 4rem 0;
  margin: 5rem 0;
}
#message .bg_gray{margin-bottom: 0;}



/*-----------------------------------------------------*/
/*---------------------- マージン ----------------------*/
/*-----------------------------------------------------*/
/*上*/

.ma-t-10{margin-top: 10px;}
.ma-t-20{margin-top: 20px;}
.ma-t-30{margin-top: 30px;}
.ma-t-40{margin-top: 40px;}
.ma-t-50{margin-top: 50px;}
/*左*/
.ma-l-s{margin-left: 1em;}
.ma-l-20{margin-left: 20px;}
.ma-l-30{margin-left: 30px;}
.ma-l-40{margin-left: 40px;}
.ma-l-50{margin-left: 50px;}
/*右*/
.ma-r-10{margin-right: 10px;}
.ma-r-20{margin-right: 20px;}
.ma-r-30{margin-right: 30px;}
.ma-r-40{margin-right: 40px;}
.ma-r-50{margin-right: 50px;}
/*下*/
.ma-b-10{margin-bottom: 10px;}
.ma-b-20{margin-bottom: 20px;}
.ma-b-30{margin-bottom: 30px;}
.ma-b-40{margin-bottom: 40px;}
.ma-b-50{margin-bottom: 50px;}


.ma-c{margin-left: auto; margin-right: auto;}


/* ジャンプ先の要素に適用するクラス */
.anchor {
    scroll-margin-top: 10rem; /* 固定ヘッダーの高さ + アルファ */
}