@charset "utf-8";
/*
Theme Name: 漢方薬ピュア
Theme URI: https://www.pure-kanpou.com/
Description: 漢方薬ピュアのテーマです
*/

/* =========================
   #voice 記事全体
   ========================= */
#voice article {
    display: flex;
    flex-wrap: wrap; /* レスポンシブ対応 */
    gap: 4.5rem;
    margin-bottom: 9rem;
    padding-bottom: 9rem;
    border-bottom: 1px solid #ddd;
}

/* =========================
   画像部分
   ========================= */
#voice article figure {
    flex: 0 0 350px; /* 横幅固定 */
    margin: 0;
}

#voice article figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* =========================
   テキスト部分
   ========================= */
#voice article .text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#voice article .text {
    max-height: 380px; /* 初期高さ制限 */
    overflow: hidden;
    transition: max-height 3s ease;
}

#voice article .text.expanded {
    max-height: 10000px; /* 「続きを読む」で全表示 */
}

/* 見出し */
#voice article .text h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 2rem 0;
	color:#f07a8b;
	line-height:1.4;
}

#voice article .text h3 {
    font-size: clamp(16px, 1.8vw, 20px);
    margin: 2rem 0 2rem 0;
	background:#f7dbe2;
	padding:1.25rem 2rem;
	border-radius:0.5rem;
	color:#6d3e10;
}

/* 段落 */
#voice article .text p {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.6;
    margin: 0 0 1rem 0;
	line-height:2.2;
}

/* =========================
   続きを読むボタン
   ========================= */
#voice article .read-more-wrapper {
    text-align: right;
    margin-top: 3rem;
}

#voice article .read-more {
    font-size: clamp(14px, 1.5vw, 15px);
    color: #f07a8b;
    cursor: pointer;
    user-select: none;
	display:inline-block;
	padding:1rem 6rem;
	border:1px solid #f07a8b;
	border-radius:0.5rem;
	position:relative;
}

/*#voice article .read-more:after {
	content:"≫";
	font-size:0.8em;
	margin-left:2rem;
	position:absolute;
	right:1.5rem;
	top:1.15rem;
}*/

/* =========================
   左右交互
   ========================= */

/* article の左右交互だけ制御 */
#voice article {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* figure 幅固定 */
#voice article figure {
    flex: 0 0 350px;
    margin: 0;
}

/* .text は残りの幅 */
#voice article .text {
    flex: 1;
    box-sizing: border-box;
}

/* 奇数記事: 画像左 */
#voice article:nth-child(odd) {
    flex-direction: row;
}

/* 偶数記事: 画像右 */
#voice article:nth-child(even) {
    flex-direction: row-reverse;
}

/* レスポンシブ対応 */
@media screen and (max-width: 980px) {
    #voice article {
        flex-direction: column !important;
    }
    #voice article figure,
    #voice article .text {
        flex: 1 1 100%;
        padding: 0;
    }
}

.flow-box {
	width:80%;
	margin:0 auto;
	position:relative;
	left:2%;
}

.flow-box > .wp-block-group__inner-container > .wp-block-group {
  counter-increment: number;
  position:relative;
  margin-bottom:6rem;
}

.flow-box h3 {
	color:#f07a8b;
	position: static;
	border-bottom:none;
	font-size:clamp(18px, 2vw, 24px);
}

.flow-box h3:before {
  content: counter(number);
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 7.5rem;
  margin-block: calc((0lh - 4rem)/2);
  text-align: center;
  color: #FFF;
  background-color: #f07a8b;
  font-size:clamp(20px, 1.5vw, 24px);
  letter-spacing: 0;
  position:relative;
}

.flow-box h3:before {
  float: inline-start;
  aspect-ratio: 1;
  margin-inline-start: calc(6rem*-1.5);
  border-radius: 50%;
}

.flow-box h3:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(7.2rem*-1 + 4rem/2 - 0.25rem/2);
  border-right: 0.25rem solid;  
  margin-top: 2em;
  margin-bottom: -1em;
  color:#f07a8b;
}

.flow-box > .wp-block-group__inner-container > .wp-block-group:last-child h3:after {
	content:none;
}

@media screen and (max-width: 980px) {

.flow-box {
	width: 77%;
	margin: 0 auto;
	position:relative;
	left:3%;
}

.flow-box h3:before {
	inline-size: 6rem;
	margin-block: calc((0.35lh - 4rem)/2);
	margin-inline-start: calc(5rem*-1.5);
}

.flow-box h3::after {
	left: calc(6.4rem*-1 + 4rem/2 - 0.25rem/2);
	margin-top: 3em;
	margin-bottom: -2em;
}

}

@media screen and (max-width: 600px) {
.flow-box {
	left:7%;
}

}







.qa-list dl.faq {
	width:100%;
	margin:0 auto !important;
	padding:3rem;
	background: #FFF;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #EEE;
}

.qa-list dl.faq:first-child {
    border-top: 1px solid #EEE;
}
.qa-list dl.faq::before {
    position: absolute;
    top: 46px;
    right: 35px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #f07a8b;
    border-right: 2px solid #f07a8b;
}
.qa-list .open::before {
    transform: rotate(-45deg);
}

.qa-list dl.faq dt {
	font-size:clamp(18px, 1.5vw, 20px);
	font-weight:normal;
}

.qa-list dl.faq dt:before {
    content: "Q.";
    margin-right:1.5rem;
	font-size:1.25em;
	font-weight:900;
	color:#f07a8b;
}

.qa-list dl.faq dd {
	margin-top:2rem;
	padding-top:2rem;
	padding-left:4.3rem;
	position:relative;
}

.qa-list dl.faq dd:before {
	position:absolute;
	top:0.25rem;
	left:0.15rem;
    content: "A.";
    margin-right:0.5rem;
	font-size:1.5em;
	font-weight:900;
	color:#a7b83f;
	line-height:1.2;
}

.qa-list dl.faq dd strong {
	font-weight:normal;
	font-size:clamp(18px, 1.5vw, 20px);
	display:block;
	margin-bottom:1rem;
}

.qa-list dl.faq dd p {
	margin-bottom: 0 !important;
}

@media screen and (max-width: 980px) {
dl.faq dt {
	text-indent: -3rem;
	padding-left: 3rem;
	line-height:1.6;
}

.qa-list dl.faq {
	padding: 1rem 40px 1rem 1rem;
}

.qa-list dl.faq:before {
    right: 20px;
    top: 20px;
}

.qa-list dl.faq dd {
	padding-left:3.2rem;
}

.qa-list dl.faq dd:before {
	font-size:1.25em;
}

}