@charset 'utf-8';
/* =============================================
トップページ専用CSS
============================================= */

/* キービジュアル */
.top-keyVisual {
  margin-top: -8px;
  margin-bottom: 70px;
}
.top-keyVisual img {
  display: block;
  width: 100%;
}

/* スタッフ紹介 */
.top-staffs {
  padding-left: 18px;
  padding-right: 18px;
  background: url("/img/top/staffs-bg.svg") no-repeat bottom center;
  background-size: 328px auto;
  padding-bottom: 20px;
}

/* ナビゲーション */
.top-navFrame {
  margin-top: 96px;
}
.top-navFrame .heading {
  margin-top: 0;
}
.top-navFrame h2 {
  margin-top: 0;
  border-top: 0;
}
.top-navFrame h2::before {
  display: none;
}
.top-navFrame .navGrid {
  margin-top: 0;
}

/* 費用 */
.top-priceFrame {
  margin-top: 128px;
}
.top-priceFrame::after {
  background-image: linear-gradient(
    to bottom,
    #f4dcdc,
    #fffafa 43%,
    #fcfcfc 97%,
    #efdada 101%
  );
}
.top-priceFrame .container {
  display: flex;
  flex-direction: column;
}
.top-priceFrame .image {
  padding-top: 64px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.top-priceFrame .text {
  padding-top: 64px;
}

/* 評価 */
.top-evaluation .item {
  padding-bottom: 48px;
  border-bottom: 1px solid #cbcbcb;
}
.top-evaluation .text {
  margin-top: 24px;
}
.top-evaluation .button-action {
  margin-top: 48px;
}
.top-evaluation .detail img {
  display: block;
  margin: auto;
}

/* ゴンウェブについて */
.top-about {
  margin-top: 96px;
}
.top-about .text {
  padding-left: 24px;
  padding-right: 24px;
}
.top-about .button {
  margin-top: 40px;
}
.top-about .image img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  /* スタッフ紹介 */
  .top-staffs {
    display: flex;
    align-items: center;
    background-position: left bottom;
    background-size: 519px 720px;
    min-height: 720px;
    max-width: 1133px;
    margin-left: auto;
    margin-right: auto;
  }
  .top-staffs .text {
    order: 0;
    padding-left: 31px;
  }
  .top-staffs .lead {
    text-align: left;
    font-size: 42px;
    line-height: 1.4;
  }
  .top-staffs .image {
    padding-left: 0;
    padding-bottom: 34px;
    margin-left: 6.6%;
    order: 1;
    width: 57%;
    max-width: 627px;
    flex-shrink: 0;
  }

  /* コンポーネント：フレーム */
  .top-navFrame h2 {
    padding-top: 0;
  }

  /* 費用*/
  .top-priceFrame .container {
    flex-direction: row;
    padding-top: 0;
  }
  .top-priceFrame .image {
    order: 1;
    width: 40%;
    max-width: 585px;
    flex-shrink: 0;
    padding-top: 0;
  }
  .top-priceFrame .text {
    order: 0;
    max-width: 424px;
  }

  /* 評価 */
  .top-evaluation {
  }
  .top-evaluation .item {
    display: grid;
    grid-template-areas:
      "title detail"
      "text detail";
    grid-template-columns: 1fr min(481px, 45.037%);
    grid-column-gap: 6.554%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .top-evaluation .title {
    grid-area: title;
    height: min-content;
    align-self: end;
  }
  .top-evaluation .text {
    margin-top: 0;
    height: min-content;
  }
  .top-evaluation .detail {
    grid-area: detail;
    margin-top: 0;
    align-self: center;
  }

  /* ゴンウェブについて */
  .top-about .container {
    display: flex;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
  .top-about .image {
    flex-basis: 50%;
    flex-shrink: 0;
  }
  .top-about .lead {
    text-align: left;
  }
}

@media screen and (min-width: 980px) {
  .top-keyVisual {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5px;
    margin-bottom: 72px;
  }
  /* 費用*/
  .top-priceFrame .image {
    flex-shrink: 0;
    width: 585px;
  }
  /* ゴンウェブについて */
  .top-about .image {
    flex-basis: 65.517%;
    flex-shrink: 0;
  }
}





/* disolo addition 25.07.11  */

/* TOPキービジュアル
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay100 {
text-align: center;
padding: 0 20px;
}
.lay100 p:first-child {
display: block;
}
.lay100 p:last-child {
display: none;
}
		@media screen and (max-width:767px) {
		.lay100 {
		text-align: center;
		padding: 0 10px;
		}
		.lay100 p:first-child {
		display: none;
		}
		.lay100 p:last-child {
		display: block;
		}
		/*smp end*/}



/* キービジュアル下リード文
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay101 {
width: 1070px;
height: 515px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
padding-left: 450px;
display: flex;
align-items: center;
}
.lay101 .boxa {
display: flex;
flex-wrap: wrap;
}

.lay101 h2,
.lay101 p {
position: relative;
z-index: 2;
color: #fff;
}
.lay101 h2 {
font-family: var(--font-family-serif);
font-size: 54px;
font-weight: 500;
line-height: 1.3;
display: inline-block;
}
.lay101 h2 + p {
width: 260px;
margin-left: 38px;
margin-top: 10px;
}
.lay101 p + p {
width: 250px;
margin-top: 64px;
}

.lay101 > p:last-child {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
width: 1070px;
}
.lay101 > p:last-child img:first-child {
display: inline-block;
}
.lay101 > p:last-child img:last-child {
display: none;
}

		@media screen and (max-width:767px) {

		.lay101 {
		width: auto;
		height: auto;
		padding-top: 65vw;
		padding-left: 0px;
		display: block;
		}
		.lay101 .boxa {
		display: block;
		margin-right: 12px;
		margin-left: 12px;
		}

		.lay101 h2 {
		font-size: 33px;
		position: absolute;
		top: 100px;
		left: 50%;
		}
		.lay101 p {
		color: #222;
		}
		.lay101 h2 + p {
		width: auto;
		margin-left: 0px;
		margin-top: 32px;
		}
		.lay101 p + p {
		margin-top: 32px;
		}
		.lay101 p + p a {
		background-color: #db012a;
		color: #fff;
		padding: 5px 16.5px 5px 19px;
		}
		.lay101 p + p a::after {
		background: url(/img/common/icon-arrow-white.svg) no-repeat top;
		}
		.lay101 p + p a:hover {
		background-color: #fff;
		color: #db012a;
		}
		.lay101 p + p a:hover::after {
		background: url(/img/common/icon-arrow-white-hover.svg) no-repeat top;
		}

		.lay101 > p:last-child {
		width: 100%;
		}
		.lay101 > p:last-child img {
		width: 96%;
		max-width: initial;
		}
		.lay101 > p:last-child img:first-child {
		display: none;
		}
		.lay101 > p:last-child img:last-child {
		display: inline-block;
		}

		/*smp end*/}