@charset "utf-8";

/* -------------------------------------------------------------------
 * 建設業界の道具
------------------------------------------------------------------- */

.gatun2023-tools-mv h1 {
  top:auto; bottom:10px; transform: translate(-50%, 0);
  font-size:0rem; color: #fff;
  background-color:transparent;
}
.gatun2023-tools-title  { padding:0 0 30px; text-align:center; font-size:2.0rem; font-weight:700;}
.gatun2023-tools-title span  { display:inline-block; margin:0 10px 0 0; vertical-align:middle;}
.gatun2023-tools-title span img { width:67px; height:auto;}

.gatun2023-tools  { margin-bottom:6rem;}
.gatun2023-tools ul li {
  position:relative; display:block; margin:0 0 3rem; padding:0 2em 30px; width:100%;
}
.gatun2023-tools ul li figure {
  position:absolute; bottom:0; right:0; width:46%; height:auto;
}
.gatun2023-tools ul li figure img {
  width:100%; height:auto;
}
.gatun2023-tools .moji  { display:block; text-align:center; padding:30px;}
.gatun2023-tools .moji img  { margin:0 auto; width:170px; height:170px;}
.gatun2023-tools h4 {
  margin-bottom:10px; font-size:2.0rem; font-weight:700;
}
.gatun2023-tools p {
  margin:0 45% 0 0;
  font-size:1.6rem; font-weight:400;
  line-height:1.8;
}
.gatun2023-tools-sekkei ul li:nth-child(odd){ background-color:#56472D;}
.gatun2023-tools-sekkei ul li:nth-child(odd) h4,
.gatun2023-tools-sekkei ul li:nth-child(odd) p { color:#fff;}
.gatun2023-tools-sekkei ul li:nth-child(even){ box-sizing:border-box; border:4px solid #56472D;}
.gatun2023-tools-sekkei ul li:nth-child(even) h4,
.gatun2023-tools-sekkei ul li:nth-child(even) p { color:#56472D;}

.gatun2023-tools-sekou ul li:nth-child(odd){ background-color:#1E4344;}
.gatun2023-tools-sekou ul li:nth-child(odd) h4,
.gatun2023-tools-sekou ul li:nth-child(odd) p { color:#fff;}
.gatun2023-tools-sekou ul li:nth-child(even){ box-sizing:border-box; border:4px solid #1E4344;}
.gatun2023-tools-sekou ul li:nth-child(even) h4,
.gatun2023-tools-sekou ul li:nth-child(even) p { color:#1E4344;}


@media screen and (min-width:768px) {

  .gatun2023-tools-mv h1 {
    top:auto; bottom:20px; transform: translate(-50%, 0);
    font-size:5.6rem; color: #fff;
    background-color:transparent;
  }
  .gatun2023-tools-title  { font-size:2.8rem;}
  .gatun2023-tools ul {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
  }
  .gatun2023-tools ul li {
    display:flex; flex-direction:column; width:48.5%;
  }

}

@media screen and (min-width:1024px) {

  .gatun2023-tools-mv h1 {
    top:auto; bottom:20px; transform: translate(-50%, 0);
    font-size:5.6rem; color: #fff;
    background-color:transparent;
  }
  .gatun2023-tools ul {
    justify-content:flex-start; align-items:stretch;
  }
  .gatun2023-tools ul li {
    margin:0 3% 3rem 0; width:31.0%;
  }
  .gatun2023-tools ul li:nth-child(3n) { margin-right:0;}

}


/* -------------------------------------------------------------------
 * 修成周遊
------------------------------------------------------------------- */

.gatun2023-walk-mv h1 {
  top:auto; bottom:10px; transform: translate(-50%, 0);
  font-size:0rem; color: #fff;
  background-color:transparent;
}

.gatun2023-walk { margin-bottom:6rem;}
.gatun2023-walk ul li { margin:0 0 5rem;}
.gatun2023-walk .caption { 
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  padding:10px 0 0;
}
.gatun2023-walk .love { display:block; width:50px; cursor:pointer;}
.gatun2023-walk .love.on { background-color:#C5F550;}
.gatun2023-walk .love img { width:50px;}
.gatun2023-walk p { width:calc(100% - 60px); font-size:1.5rem; line-height:1.5;}
.gatun2023-walk p .hash  { display:inline; margin-right:1em;}

@media screen and (min-width:768px) {

  #gatun2023_walk .breadcrumb  { color:#ccc;}

  .gatun2023-walk ul {
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;
  }
  .gatun2023-walk ul li {
    margin:0 6% 5rem 0; width:29.0%;
  }
  .gatun2023-walk ul li:nth-child(3n) { margin-right:0;}


}



/* -------------------------------------------------------------------
 * 建設ギョーカイ用語集
------------------------------------------------------------------- */

.gyokai-wordbank  { margin-bottom:8rem;}

.gyokai-word  { padding:3rem 0 3rem;}
.gyokai-word:nth-child(1)  { padding-top:0;}
.gyokai-word:nth-child(even)  { background-color:rgba(197,245,80,.5);}
.gyokai-word h3  { margin:0 0 0.8em; font-size:1.8rem;}
.gyokai-word p  { margin-bottom:1.6em; font-size:1.4rem;}
.gyokai-word figure { border:2px solid #000;}

@media screen and (min-width:768px) {
  
  .gatun2023-gyokai-mv h1 {
    color: #000;
    background-color:#fff;
  }
  .gyokai-wordbank  { margin-bottom:8rem;}
  .gyokai-word  { padding:6rem 0;}
  .gyokai-word h3  { font-size:2.4rem;}
  .gyokai-word p  { font-size:1.6rem;}

}



/* -------------------------------------------------------------------
 * 段組
------------------------------------------------------------------- */

/* 2段 */
.block-2 ul {
  display:flex; flex-wrap:wrap;
}
.block-2 ul li{
  margin-bottom:20px;
}
.block-2 ul li figure {
  margin-bottom:0;
}

@media screen and (min-width:768px) {

  .block-2 ul {
    margin-bottom:0px;
  }
  .block-2 ul li {
    width:48.5%;
  }
  .block-2 ul li:nth-of-type(2n + 2) {
    margin-left:3%;
  }

}
/* -------------------------------------------------------------------
 * 
------------------------------------------------------------------- */

article h3 {
  font-size:2.4rem; font-weight:700; letter-spacing:0.04em; 
}
article p {
  font-size:1.6rem; line-height:2.0;
}
p.lead  { font-size:1.8rem; font-weight:700; line-height:1.8;}
p.note  { font-size:1.4rem; line-height:1.4;}

.copy .container  { padding-top:42px;}
.copy p:first-of-type { font-size:2.0rem; margin-bottom:11px;}
.copy p:last-of-type { font-size:1.6rem; font-weight:500;}
#gatun2023_tools .breadcrumb,
#gatun2023_walk .breadcrumb,
#gatun2023_gyokai .breadcrumb  { position:absolute; top:50px; left:0; z-index:1; width:90%; color:#fff;}

a.image-on-arrow {
  display:block;
  overflow:hidden;
  position:relative;
  margin-bottom:20px;
}
a.image-on-arrow figure { margin-bottom:0 !important;}
a.image-on-arrow::before,
a.image-on-arrow::after {
  position:absolute; z-index:1; content:"";
}
a.image-on-arrow::before {
  right:0;
  bottom:0;
  width:32px;
  height:32px;
  background-color:#000;
}
a.image-on-arrow::after {
  background-image:url(../img/common/icon-arrow-right-white.png);
  background-size:cover;
  right:8px;
  bottom:8.5px;
  width:16px;
  height:15px;
}
a.image-on-arrow img {
  transition:transform .3s;
}
a.image-on-arrow:hover img {
  transform:scale(1.1);
}


@media screen and (min-width:768px) {

  p.lead  { font-size:2.4rem;}  

  .copy .container  { padding-top:50px;}
  .copy p:first-of-type { font-size:2.4rem; margin-bottom:20px;}

  #gatun2023_tools .breadcrumb,
  #gatun2023_walk .breadcrumb,
  #gatun2023_gyokai .breadcrumb  { top:60px; left:0;}

}

@media screen and (min-width:1024px) {

  #gatun2023_tools .breadcrumb,
  #gatun2023_walk .breadcrumb,
  #gatun2023_gyokai .breadcrumb  { top:80px; left:5%;}

}