@charset "utf-8";
/* CSS Document */

*{
	color: #252525;
  scroll-behavior: smooth;
	  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
	background-color:#F3F3F3;
}

header {
  display: flex;
  background: #e2e5cc;
  color: #939675;
	justify-content: center;
}

.header-image{
	  text-align: center;
}

header img{
	width: 8%;
}

header a:hover{
	opacity: 0.7;
	
}

.fv1 {
  margin-bottom: 0px;
	position: relative;
}
.fv1 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

section a{
  display: block;        /* aタグをブロック化 */
  text-decoration: none; /* 下線を消す */
  transition: transform 0.5s ease-in-out; /* スムーズな拡大 */
}
section a:hover {
  transform: scale(1.05);       /* 5%拡大 */
}

#skills a div {
  justify-content: center;  /* 中央寄せ例 */
  align-items: center;      /* 垂直中央寄せ */
}



.ci3-container {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央寄せ */
  gap: 3%;
  margin: 0 auto;
  max-width: 100%; /* コンテナ全体は広く */
}

.ci3-image {
  width: 180px; /* 固定幅でバランスよく */
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}
.ci3-text-content {
  max-width: 500px; /* テキストエリアの広がりを制限 */
}

.ci3-heading {
  font-size: clamp(1.5rem, 5vw, 2rem); /* 画面幅に応じて縮小拡大 */
  margin: 30px 0 10px 0;
}

.ci3-description {
  font-size: clamp(1rem, 3vw, 1.25rem); /* 説明文も柔軟に */
}

.ci1-container {
  display: flex;
  gap: 5%;
  width: 100%;
  max-width: 800px; /* 任意の幅に制限 */
  margin: 40px auto;
  align-items: center;
  justify-content: center; /* これが重要 */
}


.ci1-image {
  width: 100%;
  max-width: min(30%, 200px); /* スマホでは幅45%、PCでは最大250px */
  height: auto;
  flex-shrink: 0;
}

.ci1-text-content {
  flex: 1;
}
.ci1-text-content.right-align {
  text-align: right;
  margin-left: auto; /* テキストを画像側に寄せる */
}



.ci1-heading {
  font-size: clamp(1.5rem, 5vw, 3rem); /* 画面幅に応じて拡大縮小 */
}

.ci1-description {
  font-size: clamp(1rem, 2.5vw, 1.25rem); /* 説明文も少しだけ柔軟に */
}
.tat4 {
  font-size: 2rem;
padding-top: 50px;
	
  text-align: center;
  position: relative;
}

.tat4::after {
  content: "";
  width: 100px;
  height: 3px;
  background-color: black;
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;

}

.ci2-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap; /* 小さい画面では折り返し可能 */
  max-width: 100%;
  margin: 0 auto;
}

.ci2-card {
  width: 20%;
  text-align: center;
}

.ci2-card-image {
  width: 100%;
  height: auto;
}

.ci2-card-title {
  font-size: clamp(1.5rem, 5vw, 3rem); /* 画面幅に応じて拡大縮小 */
}

.ci2-card-description {
  font-size: clamp(1rem, 2.5vw, 1.25rem); /* 説明文も少しだけ柔軟に */
	margin: 0 0 50px 0;
}

.ci2-a-text{
	text-align: center;
	  font-size: clamp(1rem, 2.5vw, 1.25rem); /* 説明文も少しだけ柔軟に */
	
}

footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  background: #e2e5cc;
  color: #939675;
  padding: 1rem;
}
footer a {
  color: #939675;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
  text-align: center;
}
footer a:hover {
  text-decoration: none;
		opacity: 0.7;
}

.plus-text{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}