@charset "utf-8";

/* ===============================
SERVICE AREA
=============================== */

.service-area{

  padding: 80px 20px;

  background: #f8fbff;

}


/* ===============================
HEADER
=============================== */

.area-header{

  text-align: center;

  margin-bottom: 50px;

}

.area-title{

  font-size: 30px;

  font-weight: 700;

  margin-bottom: 10px;

}

.area-subtitle{

  color: #007ACC;

  font-size: 14px;

  letter-spacing: 2px;

}


/* ===============================
CONTENTS
=============================== */

.service-contents{

  max-width: 900px;

  margin: auto;

  display: grid;

  gap: 15px;

}


/* ===============================
ACCORDION CARD
=============================== */

.accordion{

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 5px 20px rgba(0,0,0,0.08);

  transition: 0.3s;

}

.accordion:hover{

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.12);

}


/* ===============================
BUTTON
=============================== */

.accordion-btn{

  width: 100%;

  padding: 18px 20px;

  background: none;

  border: none;

  font-size: 16px;

  font-weight: 600;

  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;

}


/* ===============================
ICON
=============================== */

.icon{

  font-size: 18px;

  transition: transform 0.3s;

}


/* ===============================
CONTENT
=============================== */

.accordion-content{

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease;

  background: #fafafa;

}

.accordion-content p{

  padding: 20px;

  line-height: 1.8;

  color: #444;

}






/* ===============================
開いたときのスタイル
=============================== */


.accordion.active .accordion-content{

  max-height: 300px;

}

.accordion.active .icon{

  transform: rotate(90deg);

}