/*
Theme Name:NANO child
Theme URI:
Description:Custom made child theme of WordPress theme NANO.
Template:nano_tcd065
Author:Yoshiike
Author URI:
Version:1.22.2
*/

/* service の House and Complex カテゴリを２カラムで中央揃いで表示*/
.p-service-cats-list{
	justify-content: space-evenly
}

/* TOPページのヘッダーコンテンツ下のキャッチコピーの上下マージンを狭くする */
.p-index-content01 { 
  padding: 50px 0; 
}

/* TOPページのWORKS（実績紹介）に記事のテキストを表示させない*/
.p-article01__excerpt {
  display: none;
}

.p-article02__excerpt {
  display: none;
}

.p-article03__excerpt {
  display: none;
}

.p-article04__excerpt {
  display: none;
}

.p-article05__excerpt {
  display: none;
}

.p-article06__excerpt {
  display: none;
}

/* TOPページのWorksエリアに背景色をつける*/
.p-index-content06{
  background-color: rgb(248, 248, 248);
  padding: 100px 0;
}

/* TOPページのABOUT　画像の上にテキストを表示*/
/* ↓親要素*/
.free-space1{
  text-align: center;
}

.free-space1 .p-index-content03 .p-cb__item-header{
  position: relative;
  display: inline-block;
}

/* ↓子要素*/
.free-space1 .p-index-content03 .p-cb__item-header img{
  display: block;
}

.free-space1 .p-index-content03 .p-cb__item-header::before{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8; /*画像の上に被せる色を指定*/
  opacity: 0.8;/*透過させる度合い*/
}

.free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-title{
  position: absolute;
  top: 20%;
  left: 50%;
  margin-bottom: 10px;
  transform: translate(-50%,-60%);/*タイトルの上下位置を指定*/
  /* color: #fff; */ /*背景画像を暗くする場合の文字色を白にする */
}
@media screen and (min-width: 768px) and (max-width: 1024px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-title {
  transform: translate(-50%,-100%);/*タブレット時のタイトルの上下位置を指定*/} 
}
@media screen and (max-width: 767px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-title {
  transform: translate(-50%,-140%);/*SP時のタイトルの上下位置を指定*/} 
}

.free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-sub{
  position: absolute;
  top: 30%;
  left: 50%;
  margin-bottom: 42px;
  transform: translate(-50%,130%);/*サブタイトルの上下位置を指定*/
  /* color: #fff; */ /*背景画像を暗くする場合の文字色を白にする */
}
@media screen and (min-width: 768px) and (max-width: 1024px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-sub {
  transform: translate(-50%,50%);/*タブレット時のサブタイトルの上下位置を指定*/} 
}
@media screen and (max-width: 767px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-sub {
  transform: translate(-50%,50%);/*SP時のサブタイトルの上下位置を指定*/} 
}

.free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-desc{
  position: absolute;
  top: 40%;
  left: 50%;
  margin-bottom: 42px;
  transform: translate(-50%,30%);/*説明テキストの上下位置を指定*/
  /* color: #fff; */ /*背景画像を暗くする場合の文字色を白にする */
}
@media screen and (min-width: 768px) and (max-width: 1024px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-desc {
  transform: translate(-50%,20%);/*タブレット時の説明テキストの上下位置を指定*/
  width: 100%;}/*改行を回避*/
}
@media screen and (max-width: 767px) { .free-space1 .p-index-content03 .p-cb__item-header .p-cb__item-desc {
  /* display: none;　SP時はスペースの関係で詰まってしまうので非表示 */
  transform: translate(-50%,-10%);/*SP時の説明テキストの上下位置を指定*/
  width: 100%;}/*改行を回避*/
}

.free-space1 .p-index-content03 .p-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,130%);/*ボタンの上下位置を指定*/
  /* color: #fff; */ /*背景画像を暗くする場合の文字色を白にする */
}
@media screen and (min-width: 768px) and (max-width: 1024px) { .free-space1 .p-index-content03 .p-btn {
  transform: translate(-50%,120%);}/*タブレット時の説明テキストの上下位置を指定*/
}
@media screen and (max-width: 767px) { .free-space1 .p-index-content03 .p-btn {
  transform: translate(-50%,130%);}/*SP時の説明テキストの上下位置を指定*/
}

/* TOPの各フリースペース下に透過色がはみ出すのを回避 */
.p-index-content07 .free-space1 .p-index-content03 .p-cb__item-header p{
  margin-bottom: 0px;
}

/* 不要な<p>タグ出力を非表示 */
p:empty {
  display: none;
}

/* SP時に要素の上部が詰まるのを回避 */
@media screen and (max-width: 767px) { .p-index-content03 { 
  margin-top: 40px; margin-bottom: 40px; } 
}

/* TOPのNEWS要素上部の不要なマージンを回避 */
.p-index-content03 {
  margin-top: 100px;
}

/* TOPフリースペースの余計なマージンを回避 */
.p-index-content07 .free-space1 .p-index-content03 { 
  margin-bottom: 0px; 
}

/* TOPページWORKS上部がスペースなく詰まってしまうのを回避 */
@media screen and (max-width: 767px) {.p-index-content06 .p-cb__item-header { 
  padding-top: 50px !important;} 
}

/* TOPページWORKS下部がスペースなく詰まってしまうのを回避 */
@media screen and (max-width: 767px) {.p-index-content06 { 
  padding-bottom: 50px !important;} 
}