@charset "utf-8";

/* ---------------------------------------------------
   File: common.css
   Version: 1.0.0
   Update: 2025-01-21
   Author: https://flowlab.co.jp

   (c)2007-2024 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */
.sp { display: none;}


/* ====================================================
		Layout
==================================================== */
body {
  background: #fff;
  position: relative;
}
#container {
  padding: 50px 0;
}
main {
  max-width: 740px;
  filter: drop-shadow(0 0 30px rgb(0,0,0,0.1));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* -------------------------------
		Background
------------------------------- */
body::before,
body::after {
  content: '';
  position: fixed;
  display: block;
  z-index: 0;
}

/* Left Top - Text */
/*body::before {
  width: 250px;
  height: 80px;
  background: url("../images/bg_illust01.png") no-repeat 0 0 / 250px 80px;
  bottom: 0;
  left: 0;
}*/

/* Right Bottom - Illust */
body::after {
  width: 120px;
  height: 220px;
  background: url("../images/bg_illust.png") no-repeat 0 0 / 120px 220px;
  bottom: 0;
  bottom: 10px;
  right: 10px;
}

/* -------------------------------
		Selection
------------------------------- */
::selection {
  color: #fff;
  background: #1a1a1a;
}


/* ====================================================
		Splash
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
}

/* -------------------------------
		Logo
------------------------------- */
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width: 300px;
}

/* -------------------------------
		Animation
------------------------------- */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ====================================================
		Header
==================================================== */
/* -------------------------------
		Logo
------------------------------- */
#logo {
  overflow: hidden;
}
#logo img {
  display: block;
}

/* -------------------------------
		Main Visual
------------------------------- */
h1 img {
  display: block;
}


/* ====================================================
		Common / 画像の高さを指定する要素は全てここに書き出すこと
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
/* SP img */
#problems p.txt,
#course section p.txt {
  position: relative;
  overflow: hidden;
}

/* PC img */
#problems p.txt::after,
#course section p.txt::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}


/* -------------------------------
		Link
------------------------------- */
a:hover {
  opacity: 1.0;
}



/* ====================================================
		About
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
/* SP img */


/* PC img */



/* ====================================================
		Problems
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#problems {
  position: relative;
}
#problems img {
  display: block;
}

/* -------------------------------
		Text
------------------------------- */
/* SP img */
#problems #resolve p.txt {
  height: 574px;
}

/* PC img */
#problems #resolve p.txt::after {
  width: 740px;
  height: 574px;
  background: url("../images/txt_resolve.jpg") no-repeat 0 0 / contain;
}


/* ====================================================
		Course
==================================================== */
/* -------------------------------
		Course 01
------------------------------- */
/* SP img */
#course section:nth-of-type(1) p.txt {
  height: 290px;
}

/* PC img */
#course section:nth-of-type(1) p.txt::after {
  width: 740px;
  height: 290px;
  background: url("../images/img_course_cad-monodukuri-support02.jpg") no-repeat 0 0 / contain;
}

/* -------------------------------
		Course 02
------------------------------- */
/* SP img */
#course section:nth-of-type(2) p.txt {
  height: 290px;
}

/* PC img */
#course section:nth-of-type(2) p.txt::after {
  width: 740px;
  height: 290px;
  background: url("../images/img_course_mechanical-cad-processing02.jpg") no-repeat 0 0 / contain;
}

/* -------------------------------
		Course 03
------------------------------- */
/* SP img */
#course section:nth-of-type(3) p.txt {
  height: 332px;
}

/* PC img */
#course section:nth-of-type(3) p.txt::after {
  width: 740px;
  height: 332px;
  background: url("../images/img_course_welding-engineer02.jpg") no-repeat 0 0 / contain;
}

/* -------------------------------
		Course 04
------------------------------- */
/* SP img */
#course section:nth-of-type(4) p.txt {
  height: 332px;
}

/* PC img */
#course section:nth-of-type(4) p.txt::after {
  width: 740px;
  height: 332px;
  background: url("../images/img_course_construction-machinery02.jpg") no-repeat 0 0 / contain;
}


/* -------------------------------
		Course 05
------------------------------- */
/* SP img */
#course section:nth-of-type(5) p.txt {
  height: 332px;
}

/* PC img */
#course section:nth-of-type(5) p.txt::after {
  width: 740px;
  height: 332px;
  background: url("../images/img_course_building-management-technoligy02.jpg") no-repeat 0 0 / contain;
}




/* ====================================================
		Copyright
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#copyright,
#copyright img {
  display: block;
}
#copyright img {
  margin-bottom: 90px;
}


/* ====================================================
		Fix Btn
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#fixBtn a {
  position: fixed;
  bottom:0;
  left: 0;
  right: 0;
  max-width: 740px;
  width: 100%;
  height: auto;
  display: block;
  z-index: 100;
  margin: 0 auto;
}




/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  .sp { display: none;}
  
  /* ====================================================
      Copyright
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #copyright img {
    margin-bottom: 12%;
  }
  }








/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  .sp { display: block;}
  .pc { display: none;}
  
  /* ====================================================
      Layout
  ==================================================== */
  #container {
    padding: 0;
  }
  
  
  /* ====================================================
      Splash
  ==================================================== */
  /* -------------------------------
      Logo
  ------------------------------- */
  #splash_logo img {
    width: 150px;
  }
  
  
  /* ====================================================
      Common
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  /* SP img */
  #problems p.txt,
  #course section p.txt {
    height: auto!important;
    position: static;
  }
  
  /* PC img */
  #problems p.txt::after,
  #course section p.txt::after {
    content: none;
  }
  
  
  /* ====================================================
		Copyright
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#copyright img {
  margin-bottom: 18%;
}

}