/* CSS Document */

/* 事業内容欄 */

.possible-bg{
  background-color: #FFFDE6;
  padding-top: 5rem;
}
.possible-text {
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-align: justify;
}
.service-btn {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 20px 0;       /* ← 押しやすさを確保 */
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}

.service-btn:hover {
  transform: scale(1.04);
  opacity: 0.85;
}
.service-btn p{
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: clamp(1.8rem, 2.8vw + 1rem, 2rem);
  font-weight: bold;
  color: #02144C;
}

.icon-wrap {
  max-width: 55%;          /* ← 見た目サイズ */
  margin: 0 auto 5px;   /* ← 中央寄せ */
}

.icon-wrap img {
  width: 100%;
  height: auto;
}


/* サービス内容欄 */
.web-bg{
  background-color: #0F94D4;
}
.design-bg{
  background-color: #fff;
}
.character_input-bg{
  background-color: #B8E8FF;
}

.web-text h3,
.design-text h3,
.character_input-text h3 {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: clamp(2rem, 2.8vw + 1rem, 2.5rem);
  font-weight: bold;
  color: var(--title-color);  
  margin-bottom: 2rem;
}

.web-text p,
.design-text p,
.character_input-text p {
  font-family: 'Noto Sans JP', 'Zen Maru Gothic', sans-serif;
  font-size: clamp(1.6rem, 2.8vw + 1rem, 1.6rem);
  color: var(--title-color);  
  text-align: justify;
  line-height: 2.3;
}

.web-text{
  --title-color: #fff;
}
.design-text{
  --title-color: #231815;
}
.character_input-text{
  --title-color: #231815;
}


@media only screen and (max-width: 575px){
.possible-section {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

}


/* パソコン・タブレット用（768px以上） */

@media only screen and (max-width: 767px){
.service-img {
width: 100%;
max-width: 210px;
height: auto;
}
.service-row {
  text-align: center;
  padding-bottom: 3rem;
  padding-top: 2rem;
}
.web-text h3,
.design-text h3,
.character_input-text h3 {
  margin-top: 3rem;
}
.icon-wrap {
  max-width: 90%;          /* ← 見た目サイズ */
}
}
@media only screen and (max-width: 575px){
.web-text h3,
.design-text h3,
.character_input-text h3 {
  margin-top: 5rem;
}
.service-row {
  padding-bottom: 4rem;
}
}