@charset "utf-8";

/* nomal */
@font-face {
	font-family: "BIZ UDPGothic", sans-serif;
	src: url(https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap);
}

/* alphabet & number */
@font-face {
	font-family: 'Questrial', sans-serif;
	font-weight: 400;
	src:url(https://fonts.googleapis.com/css2?family=Questrial);
}

/* ****************************************************
Title: layout.css
***************************************************** */

/*---------color, fonts-------------*/
:root {
    --baby-blue: #d9e1f5;
	--baby-blue-hover: #BDCAEB;
    --black: #000000;
    --charcoal-gray: #494949;
    --dove-gray: #6d7488;
	--storm-gray: #858FAA;
    --mist-gray: #f1f3f7;
    --relief-blue: #334a85;
	--background-blue: #E0E7F9;
	--navy:#182D65;
    --sumi: #272930;
    --white: #ffffff;
    --font-size-l: 1.00rem; /*16px*/
    --font-size-m: 0.875rem; /*14px*/
    --font-size-s: 0.75rem; /*12px*/
	--font-size-xs: 0.68rem; /*10px*/
    --font-size-xl: 1.125rem; /*18px*/
    --font-size-xxl: 1.375rem; /*22px*/
    --font-size-xxxl: 2.4375rem; /*39px*/
	--font-size-33px: 2.062rem;
	--font-size-36px: 2.25rem;
	--font-size-48px: 3.000rem;
	--font-size-60px: 3.750rem;
	--font-size-64px: 4rem;
    --font-family-questrial: "Questrial", Helvetica;
    --font-family-biz: "BIZ UDPGothic", sans-serif;
	--margin-xxl: 160px;
	--margin-x: 80px;
	--margin-l: 64px;
	--margin-m: 48px;
}

@media screen and (max-width: 1180px) {
	:root {
		--font-size-l: 1.000rem;
		--font-size-xxxl: 2.00rem;
		--font-size-33px: 1.50rem;
		--font-size-48px: 2.25rem;
	}
}

@media screen and (max-width: 960px) {
	:root {
		--font-size-xxxl: 1.750rem;
		--margin-xxl: 80px;
		--margin-m: 40px;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--font-size-xl: 18px;
		--font-size-33px: 1.00rem;
		--font-size-48px: 2.062rem;
	}
}

/* -------------------------------------------------------------------- 
 body
-------------------------------------------------------------------- */

body {
	color: #191818;
	background-color: #ffffff;
	box-sizing: border-box;
	font-family: var(--font-family-biz), sans-serif;
	font-size: var(--font-size-m);
	letter-spacing: .08em;
	line-height: 1.5;
	text-align: center;
	padding: 0;
	margin: 0;
}

.wrapper {
	max-width: 1840px;
	margin: auto;
}

img {
	vertical-align: bottom;
	width: auto;
	max-width: 100%;
	height: auto;
}

p {
	font-size: 0.875rem;
}

.center {
	margin: auto;
}

#page-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 500;
}
#page-top a {
    width: 54px;
    height: 54px;
    border-radius: 27px;
    background: #BCBCBC;
    border: solid 1px #BCBCBC;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#page-top a::before {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    margin: -3px 0 0 -7px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-width: 1180px) {
	.wrapper {
		overflow: hidden;
	}
}

.seminar-template footer {
	padding-top: 120px
}

/* -------------------------------------------------------------------- 
 サービス詳細ページ追加
-------------------------------------------------------------------- */
.service-detail__content__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-detail__content__list li {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.service-detail__content__list .img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-right: 16px;
  background: #E0E7F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-detail__content__list .img svg {
  width: 26px;
  height: 26px;
  stroke: var(--relief-blue);
}

.list__text-area {
  flex: 1;
}

.list__ttl {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.list__txt {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.service-detail__content .p-bold {
	color: var(--relief-blue);
	font-size: 2rem;
	font-weight: bold;
	padding-block: 2rem;
}

@media (max-width: 768px) {
  .service-detail__content__list {
    grid-template-columns: 1fr;
  }
}

.cardListWrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.cardItem {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
	align-items: center;
}

.cardIcon {
	width: 120px;
	height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cardIcon img {
	width: 100%;
	height: 100%;
    object-fit: contain;
}

.cardTextArea {
    display: flex;
    flex-direction: column;
    gap: 16px;
	text-align: left;
}
.cardTitle {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.cardSubtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}
.cardDescription {
    font-size: 14px;
    color: #333;
}
#function-card .cardIcon {
    width: 140px;
    height: 140px;
}
/* =====================================
   Flow Card
===================================== */

#flow-card {
  background: #f3f5f9;
  padding: 60px 0;
}

.flow-cardListWrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 80px;
  counter-reset: flow-step;
}

/* 縦ライン */
.flow-cardListWrap::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #cfd6e4;
}

/* 各カード */
.flow-cardItem {
  position: relative;
  margin-bottom: 40px;
  background: #fff;
  padding: 14px 28px 24px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 番号 */
.flow-cardItem::before {
  content: counter(flow-step);
  counter-increment: flow-step;
  position: absolute;
  left: -68px;
  top: 0;
  width: 42px;
  height: 42px;
  background: #2f5bd3;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

/* タイトル行（アイコン＋タイトル横並び） */
.flow-cardTitleWrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* アイコン */
.flow-cardIcon img {
  width: 72px;
  height: 72px;
}

/* タイトル */
.flow-cardTitle {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #1e2a3a;
}

/* 説明 */
.flow-cardDescription {
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
/* =====================================
   Flow Card (Mobile)
===================================== */

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

  /* 左余白削除 */
  .flow-cardListWrap {
    padding-left: 0;
  }

  /* 縦ライン非表示 */
  .flow-cardListWrap::before {
    display: none;
  }

  /* カード余白調整 */
  .flow-cardItem {
    margin-bottom: 24px;
    padding: 20px;
  }

  /* 番号をカード内左上に */
  .flow-cardItem::before {
    left: 16px;
    top: -12px;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  /* タイトル行 */
  .flow-cardTitleWrap {
    gap: 12px;
    margin-bottom: 10px;
  }

  /* アイコン小さめ */
  .flow-cardIcon img {
    width: 32px;
    height: 32px;
  }

  /* タイトル */
  .flow-cardTitle {
    font-size: 16px;
    line-height: 1.4;
  }

  /* 説明 */
  .flow-cardDescription {
    font-size: 13px;
    line-height: 1.6;
  }

}

#free-content .contactBtn02 p:nth-child(2) { display: none; }
#free-content .contactBtn02 a p:nth-child(2) { display: inline-block; }
.pageWrap .contIn .contInWrap.padding-36 {
	padding: 0 36px;
}
.pageWrap #free-content .contactWrap01 .contactContIn { margin-bottom: 0 }
.serviceFreeBlock {
	padding: 80px; 0
}