@charset "utf-8";

/* ---------------------------------------------------
   File: works.css
   Version: 2.0.0
   Update: 2023-05-08
   Author: https://flowlab.co.jp

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



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

   WIDE DESKTOP LAYOUT

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


/* ====================================================
		Layout
==================================================== */
.row {
  padding: 0 100px;
}




/* ====================================================
		Header
==================================================== */
/* -------------------------------
		Global Navigation - PC
------------------------------- */
#gNavi .pc li:nth-child(2) a {
  color: #771c20;
}
#gNavi .pc ul li:nth-child(2) a {
  color: #4d4d4d;
}
#gNavi .pc ul li:nth-child(2) a:hover {
  color: #771c20;
}



/* ====================================================
		Contents
==================================================== */
/* -------------------------------
		Page Title
------------------------------- */
#main h1 {
  width: calc(100% - 100px);
  padding-bottom: 250px;
}

/* -------------------------------
		Contents Title
------------------------------- */
#main h2 {
  padding-bottom: 50px;
}

/* -------------------------------
		List
------------------------------- */
#main .row {
  padding-bottom: 200px;
}
#main .row ul {
  justify-content: flex-start;
}
#main .row li {
  width: 30%;
  padding-bottom: 100px;
}
#main .row li:not(:nth-of-type(3n)) {
  margin-right: 5%;
}
#main .row li a {
  display: block;
}

/* -------------------------------
		Image
------------------------------- */
#main .row li p {
  position: relative;
}

/* Border */
#main .row li p::before {
  content: '';
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 3px solid #dbdfe2;
  border-radius: 14px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

/* Caegory */
#main .row li p span {
  font-size: 1rem;
  background: #dbdfe2;
  border-radius: 0 14px 0 14px;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 15px;
}

/* Image */
#main .row li p img {
  border-radius: 14px;
}

/* -------------------------------
		Title
------------------------------- */
#main .row h2 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 35px 0 20px 10px;
}

/* -------------------------------
		Service List
------------------------------- */
#main .row ul ul {
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#main .row ul ul li {
  width: auto;
  color: #dbdfe2;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  display: inline;
  position: relative;
  padding-bottom: 0;
}
#main .row ul ul li:not(:last-child)::after {
  content: '／';
  color: #dbdfe2;
  font-size: 1.1rem;
  display: inline;
  margin: 0 0.2em;
}
#main .row ul ul li:not(:nth-of-type(3n)) {
  margin-right: 0;
}

/* -------------------------------
		Button - View more
------------------------------- */
#main .row ul a ul {
  position: relative;
  padding-bottom: 35px;
}
#main .row ul a ul::after {
  content: 'View more.';
  font-size: 1.1rem;
  line-height: 1.4;
  position: absolute;
  text-align: right;
  bottom: 0;
  right: 0;
}






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

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  
  /* ====================================================
      Layout
  ==================================================== */
  .row {
    padding: 0 50px;
  }
  
  

  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Page Title
  ------------------------------- */
  #main h1 {
    padding-bottom: 200px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #main .row h2 {
    font-size: 1.8rem;
    padding-bottom: 10px;
  }
  
  
}













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

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {

  /* ====================================================
      Layout
  ==================================================== */
  .row {
    padding: 0 20px;
  }
  
  
  
  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Page Title
  ------------------------------- */
  #main h1 {
    width: calc(100% - 40px);
    padding-bottom: 100px;
  }
  
  /* -------------------------------
      List
  ------------------------------- */
  #main .row {
    padding-bottom: 100px;
  }
  #main .row ul {
    justify-content: space-between;
  }
  #main .row li:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  #main .row li {
    width: 47%;
    padding-bottom: 50px;
  }
  
  /* -------------------------------
      Image
  ------------------------------- */
  #main .row li p {
    position: relative;
  }

  /* Border */
  #main .row li p::before {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid #dbdfe2;
    border-radius: 6px;
  }
  
  /* Caegory */
  #main .row li p span {
    border-radius: 0 6px 0 6px;
    padding: 3px 10px;
  }
  
  /* Image */
  #main .row li p img {
    border-radius: 6px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #main .row h2 {
    font-size: 1.4rem;
    padding: 20px 0 10px 0;
  }
  
  /* -------------------------------
      Service List
  ------------------------------- */
  #main .row ul ul {
    padding-left: 0;
  }
  #main .row ul ul li {
    display: inline;
    padding-bottom: 0;
  }
  #main .row ul ul li:not(:last-child)::after {
    display: inline;
  }
  
  
  
  
  
  
}