@charset "UTF-8";
@import url(./common.css);

/* ==============================
アイキャッチ
============================== */
.eye_catch {
  display: flex;
  align-items: center;
  width: min(90%, 1200px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1rem;
  margin: 0 auto 50px;
}
.eye_catch > .catch_copy {
  width: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
}
.eye_catch > .catch_copy > p {
  text-align: center;
  font-family: "SawarabiMincho";
}
.eye_catch > .catch_copy em {
  color: rgb(207, 115, 146);
  font-size: 1.2rem;
}

/* ==============================
h2
============================== */
main .sec_h2 {
	padding: 2rem 0;
}
/* 見出し */
main .h2_block {
  padding: 2rem 0;
}
.sec_h2 h2 span {
  text-align: center;
}

/* ==============================
h3
============================== */
main .sec_h3 {
	padding: 2rem 0;
}
/* 見出し */
main .h3_block {
	margin-bottom: 16px;
}
main h3 {
  padding: 1em;
  border-top: solid 1px #bbb;
  border-bottom: solid 1px #bbb;
	background-color: #efefef;
}
main h3 > span {
  display: inline-block;
}
main h3 > .main_title {
  font-size: clamp(25px, 2vw, 35px);
}
main h3 > .sub_title {
  font-size: clamp(14px, 1.5vw, 16px);
  margin-left: 2rem;
}
/* 説明文 */
main .website .explanation {
	padding: 16px 16px 32px;
}
main .website .explanation > p {
	padding: 4px 16px;
	border-left: solid 3px #ddd;
}

/* ==============================
各カード 共通
============================== */
main .sampleList_container > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ==============================
サイトのカード
============================== */
main .website ul > li > a {
  padding: 10px;
  border: solid 1px #bbb;
}
main .website ul a > .text {
  padding: 1em 0;
}
main .website ul a span {
  display: block;
  padding: 5px 0;
}
main .website ul img {
	aspect-ratio: 3 / 2;
  object-position: 50% 0%;
}

/* ==============================
名刺のカード
============================== */
main .businessCard ul > li > a {
  border: solid 1px #bbb;
}


/* ------------------------------
スマホ
------------------------------ */
@media screen and (max-width: 767px) {
  /* ------------------------------
	アイキャッチ
	------------------------------ */
  .eye_catch {
		aspect-ratio: 5 / 3;
    background-image: url(../images/eye-catch/index-800-400-72.jpg);
  }
  /* ------------------------------
	サイトのカード
	------------------------------ */
	main .website ul {
		flex-direction: column;
	}

	/* ------------------------------
	名刺のカード
	------------------------------ */
	main .businessCard ul > li {
		flex: 0 0 calc((100% - 16px) / 2);
	}
}

/* ==============================
タブレット以上
============================== */
@media screen and (min-width: 768px) {

  /* ------------------------------
	アイキャッチ
	------------------------------ */
	.eye_catch {
		aspect-ratio: 5 / 2;
		background-image: url(../images/eye-catch/index-1280-800.jpg);
	}

}

/* ==============================
タブレット
============================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

  /* ------------------------------
	サイトのカード
	------------------------------ */
	main .website ul > li {
		flex: 0 0 calc((100% - 16px) / 2);
	}

	/* ------------------------------
	名刺のカード
	------------------------------ */
	main .businessCard ul > li {
		flex: 0 0 calc((100% - 32px) / 3);
	}
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {

}

/* ------------------------------
パソコン
------------------------------ */
@media screen and (min-width: 960px) {

  /* ------------------------------
	サイトのカード
	------------------------------ */
	main .website ul > li {
		flex: 0 0 calc((100% - 32px) / 3);
	}

	/* ------------------------------
	名刺のカード
	------------------------------ */
	main .businessCard ul > li {
		flex: 0 0 calc((100% - 48px) / 4);
	}
	main .businessCard ul img {
		height: auto;
	}
}