@charset "utf-8"; 
/*
トップページ用CSSファイル
*/


/* =====================
 ページ全体
===================== */
.p-front {
  width: 100%;
}


/* =====================
  アイキャッチ（フル幅）
===================== */
.p-front-hero img {
  width: 100vw;
  max-width: 100%;
  height: auto;
  display: block;
 /* margin-left: calc(50% - 50vw);*/
}


/* =====================
  実績（本文）投稿記載コンテンツ
===================== */
.p-front-content {
  margin: 0 auto 6rem;
  padding: 0 3vw;
}

/* =====================
  実績（本文）説明文
===================== */
h2#about{
  padding-top:4rem;
  letter-spacing: 0.2em;
}

.about-explain {
  padding: 0 0 4rem;
  gap: 3vw;
  margin:0;
}

.about-explain p {
  font-size: 0.9rem;
  line-height: 1.9;
}


/* =====================
  写真共通
===================== */
/*写真の隙間を変数で定義*/
:root {
  --imggap: 2px;
}

.p-front-content figure {
 margin: 0 0 var(--imggap);

}

.p-front-content figure img{
 width:100%;
}

/* 横長写真 */
.p-front-content .img-landscape{
}

/* 2枚並び写真 */
.p-front-content .img-2column {
 gap:var(--imggap);
 margin:0;
}

/* 縦長写真 */
.p-front-content .img-portrait {
 width:calc(50% - var(--imggap)/2);
}



/* スマホ */
@media (max-width: 768px) {
  .works-gallery.is-portrait {
    grid-template-columns: 1fr;
  }
}

/* =====================
コンタクト情報
===================== */
.p-contact {
  margin: 6rem 0;
}

.p-contact__inner {
  margin: 0 auto;
  padding: 0 6vw;
}

/* SP：1カラム */
.p-contact__inner {
  display: block;
}

/* PC：左空白＋右項目 */
@media (min-width: 1024px) {
  .p-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .p-contact__inner dl,.p-contact__inner h2 {
    grid-column: 2;
  }
}

/*タイトル*/
.p-contact__inner h2 {
  margin:0;
  letter-spacing: 0.4rem;
}
/* dl レイアウト */
.p-contact dl {
  display: grid;
  grid-template-columns: max-content 6% auto;
  gap: 0.5rem 0.5rem;
  border-top:solid #333 1px;
  /*border-bottom:solid #333 1px;*/
  padding: 0.5rem 0;
  letter-spacing: 0.2rem;
  margin:0;
  font-weight:bold;
}

/* dt レイアウト */
.p-contact dl dt {
  width:fit-content;
}

/* dd レイアウト */
.p-contact dl dd {
  margin:0;
}