@charset "utf-8";

/*
==============
voice_sp.css
==============
*/

/* -----------------
■ wrapper
------------------- */
.wrapper {
  background-color: #F7F4EB; }

/* -----------------
■ titleBlock
------------------- */
.titleBlock h2 {
  width: 176px;
  margin: 0 auto; }


/* -----------------
■ messageBlock
------------------- */
.messageBlock {
  width: 325px;
  margin: 0 auto; }

.messageBlock p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75; }


/* -----------------
■ cardBlock
------------------- */
.cardBlock {
  margin-top: 18px; }

.cardBox {
  width: 325px;
  margin: 0 auto; }

.cardBox:not(:first-child) {
  margin-top: 10px; }


/* cardHead */
.cardBox .cardHead {
  position: relative;
  padding: 13px 0 10px;
  border-radius: 20px;
  border: 1px solid #000;
  z-index: 1; }

.cardBox:nth-of-type(odd) .cardHead {
  background-color: #1CB989; }

.cardBox:nth-of-type(odd) .prefectures,
.cardBox:nth-of-type(odd) .caption {
  color: #1CB989; }

.cardBox:nth-of-type(even) .cardHead {
  background-color: #F8AD1D; }

.cardBox:nth-of-type(even) .prefectures,
.cardBox:nth-of-type(even) .caption {
  color: #F8AD1D; }

.cardBox.open + .cardBox {
  margin-top: 5px; }

.cardHeadInner {
  display: flex;
  align-items: center;
  width: 300px;
  margin: 0 auto; }

.cardHead .img {
  flex-shrink: 0;
  width: 74px;
  margin-right: 12px; }

.cardHead .prefectures {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 70px;
  padding: 4px 0 5px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  border-radius: 10px;
  background-color: #fff; }

.cardHead .textBlock {
  color: #fff; }

.cardHead .job,
.cardHead .name {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.56; }

.cardHead .length {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.56; }

.cardHead .icon {
  position: absolute;
  bottom: 18px;
  right: 13px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff; }

.cardHead .icon span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 2px;
  transition: transform .2s;
  transform: rotate(90deg);
  border-radius: 2px;
  background-color: #fff; }

.cardBox.open .cardHead .icon span {
  transform: rotate(0deg); }


/* cardBody */
.cardBody {
  display: none;
  transform: translateY(-5px);
  border-radius: 20px;
  border: 1px solid #000;
  background-color: #fff; }

.cardBodyInner {
  width: 273px;
  margin: 0 auto;
  padding: 23px 0 30px; }

.cardBody h3 {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5; }

.cardBody .text {
  margin-top: 5px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75; }

.cardBody .text + h3 {
  margin-top: 16px; }

.cardBody .img {
  margin-top: 13px; }

.cardBody .img .caption {
  margin-top: 3px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6; }

.cardBody .img + h3 {
  margin-top: 15px; }