@charset "utf-8";

html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 300;
}

.font-bold {
  font-weight: 700;
}

.font-key-color {
  color: #2b8e8f;
}

body {
  background-color: #eaf4f4;
  margin: 0;
  padding: 0;
}

.interview-wrapper {
  background-color: #eaf4f4;
  display: flex;
  flex-direction: column;
}

#container img {
  width: 100%;
  display: block;
}

#container2 {
  border: 1px solid #2b8e8f;
  border-radius: 1rem;
  background-color: white;
  margin: 4% 7%;
  padding: 4% 6%;
}

/* pスタイルリセット */
#container2 p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  line-height: normal;
}

#content1 {
  text-align: center;
  margin-bottom: 4%;
}
#content1 img {
  width: 25%;
}

#content2 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 4%;
}
	
#faceImage {
  width: 18%;
}
#faceImage img {
  width: 100%;
}
#profile {
  width: 60%;
  padding: 0 12px;
  word-break: normal;
}
#profile hr {
  width: 100%;
  border: 1px solid #2b8e8f;
}
#job {
  margin: 0;
  font-size: 1.4vw;
  line-height: 1.5vw;
}
#detail {
  margin: 0;
  word-break: normal;
  font-size: 1.2vw;
}
#storeImage {
  width: 27%;
}
#storeImage img {
  width: 100%;
}
#equipmentImage {
	width: 40%;
}
#q4details {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#content3 {
  background-color: #2b8e8f;
  border-radius: 1rem;
  color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  align-items: end;
  width: 100%;
  position: relative;
}
#speechBubble {
  position: absolute;
  width: 13%;
  top: calc(20% / 2 * -1); /* 吹き出しの位置調整 (要素の約半分上へ移動)*/
  left: calc(13% * 1 / 3 * -1); /* 吹き出しの位置調整 (要素の約1/3左へ移動)*/
  z-index: 1; /* キャラクター画像より背面に配置*/
}
#speechBubble img {
  width: 100%;
}
#characterImage {
  width: 17%;
  text-align: center;
  vertical-align: bottom;
  margin-bottom: 1.4vw;
}
#characterImage img {
  width: 65%;
  /* 吹き出しより前面に配置*/
  position: relative;
  z-index: 2;
  padding-left: 7%;
}
#content3-text-area {
  width: 80%;
  padding-right: 3%;
}
#content3-text-1 {
  font-size: 1.4vw;
}
#content3-text-2 {
  font-size: 2vw;
}
#content3 hr {
  width: 100%;
  border: 1px solid white;
}

#content4 {
  padding: 0 4%;
}
/* 波線のスタイル */
#top-wavy-line {
  width: 100%;
  margin: calc(1rem + 4%) 0 4% 0; /* 微調整 */
}
#bottom-wavy-line {
  width: 100%;
  margin: calc(1rem + 4%) 0 7% 0; /* 微調整 */
}
img.wavy-line {
  width: 100%;
}
/* アコーディオン */
details.accordion {
  width: 100%;
  margin-bottom: 7px;
  border-bottom: 0.5vw dotted #c2c2c2;
  padding: 1.7vw 0;
}
/* アコーディオン-summary */
details.accordion summary {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  color: #2b8e8f;
  font-size: 1.6vw;
}
details.accordion summary span {
  width: 100%;
  vertical-align: top;
  padding: 0 1vw;
  margin: 0;
}
details.accordion summary::-webkit-details-marker {
  display: none; /* デフォルトの矢印を削除： Chrome、Safari */
}
details.accordion summary:after {
  content: "▶︎"; /* 矢印を設定(初期値) */
  margin-left: auto;
  vertical-align: top;
}
details.accordion summary::before {
  content: "";
  display: inline-block;
  background-image: url("../images/interview/Q_icon.png"); /* 「Q」の画像 */
  background-size: contain;
  background-repeat: no-repeat;
  width: 4vw;
  height: calc(4vw * 68 / 78); /*画像の縦横比に沿って高さを算出 */
  vertical-align: top;
}
/* アコーディオン-.details-content */
details.accordion .details-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  padding: 0;
  cursor: pointer;
  font-size: 1.2vw;
  margin-top: 1vw;
}
details.accordion .details-content::before {
  content: "";
  display: inline-block;
  background-image: url("../images/interview/A_icon.png"); /* 「A」の画像 */
  background-size: contain;
  background-repeat: no-repeat;
  width: 4vw;
  height: calc(4vw * 68 / 78); /*画像の縦横比に沿って高さを算出 */
  vertical-align: top;
}
details.accordion .details-content div {
  width: 100%;
  vertical-align: top;
  padding: 0 1vw;
  margin: 0;
}
details.accordion .details-content p {
  margin-top: 0;
}
details.accordion .details-content::after {
  content: ""; /* 幅調整用 */
  margin-left: auto;
  vertical-align: top;
  width: 4vw;
}
/* アコーディオン-openスタイル */
details[open].accordion {
  border-bottom: none;
  padding-bottom: 0vw;
}
details[open].accordion summary::after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
  color: #bfdddd;
}
/* アニメーション */
details[open].accordion .details-content {
  animation: fadeIn 0.5s ease-in-out normal;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@media screen and (max-width: 60em) {
	#container2 {
		margin: 4% 4%;	
		padding: 4% 2%;
	}
	
	#content1 img {
		width: 70%;
	}
	
	#content2 {
		flex-direction: column;
		align-items: center;
	}

	#faceImage {
		width: 50%;
	}
	
	#profile {
		width: 100%;
		padding: 0 4px;
	}
	
	#job {
		font-size: 3vw;
	}

	#detail {
		font-size: 2.5vw;
	}
	
	#storeImage {
		width: 60%;
	}
	
	#speechBubble {
		display: none;
	}
	
	#characterImage {
		display: none;
	}
	
	#content3 {
		justify-content: center;
	}
	
	#content3-text-area {
		width: 95%;
	}
	
	#content3-text-1 {
		font-size: 2.8vw;
	}

	#content3-text-2 {
		font-size: 4vw;
	}

	#content4 {
		padding: 0 2%;
	}
	
	details.accordion summary {
		font-size: 3.2vw;
	}
	
	details.accordion summary::before {
		width: 8vw;
		height: calc(8vw* 68 / 78);
	}
	
	details.accordion .details-content {
		font-size: 3.2vw;
	}

	#equipmentImage {
		width: 60%;
	}

	details.accordion .details-content::before {
		width: 8vw;
		height: calc(8vw* 68 / 78);
	}
	
}