/* staffvoice.css - staffvoiceページ専用（Tailwind新規追加なし） */

/* 一覧（details/summary） */
.svc-voice-list{
  display: grid;
  gap: 12px;
}

.svc-voice-list__item{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.svc-voice-list__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.svc-voice-list__summary::-webkit-details-marker{ display:none; }

.svc-voice-list__summary::after{
  content: "＋";
  font-weight: 900;
  color: #3b82f6;
}

.svc-voice-list__item[open] .svc-voice-list__summary::after{
  content: "－";
}

.svc-voice-list__body{
  padding: 0 16px 14px;
  display: grid;
  gap: 6px;
  color: #334155;
}

.svc-voice-list__title{
  margin-top: 6px;
  font-weight: 900;
}

/* service.css側の指定で黒になるのを防止 */
.svc-btn.svc-btn--primary{
  color: #fff;
}


/* Voice article layout (text + image on right) */
.svc-voice-article{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.svc-voice-article__body{
  flex: 1 1 auto;
  min-width: 0;
}

.svc-voice-article__media{
  flex: 0 0 220px;
}

.svc-voice-article__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}



#pTitle_news{
 width: 100%;
 height: 400px;
 object-fit: cover;
 background: url(../news_blog/img/pagetitle.webp) center center / cover no-repeat;
 margin: 0 0 30px 0;
 padding: 0;
 position: relative;
}

#blog_wrapper{
 max-width: 1240px;
 width: 100%;
 margin: 50px auto;
 overflow: hidden;
}

#blog_contents{
 float: left;
 width: 780px;
 margin: 0 100px 0 0;
 overflow: hidden;
}

.pInfo_box{
 width: 780px;
 margin: 0 0 40px 0;
 padding: 0 0 40px 0;
 border-bottom:#ddd 1px solid;
 overflow: hidden;
}

.pInfo_box img{
 float:left;
 max-width: 250px;
 margin: 0 50px 0 0;
 padding: 0;
}

.pInfo_text{
 float:left;
 width: 480px;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

.pInfo_text p{
 color:#888365;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 100%;
 font-weight: 400;
 line-height: 180%;
 margin: 0 0 0.5em 0;
 padding: 0;
}

.pInfo_text h4{
 color:#333;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 90%;
 letter-spacing: 0.1em;
 line-height: 180%;
 margin: 0 0 2em 0;
 font-weight: 400;
}

.bt a.bt_ib {
  display: flex;
  align-items: center;
  max-width: 170px;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #8ECE66;
  text-decoration: none;
  transition: 0.3s;
}

.bt a.bt_ib:hover {
  background-color: #BFE3A8;
}

.bt a.bt_ib .ib_text {
  display: block;
  flex-grow: 1;
 font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  font-weight:300;
  letter-spacing: 0.1em; 
  position: relative;
  font-size: 90%;
}

.bt a.bt_ib .ib_text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  transition: 0.3s;
}


#blog_archive{
 float: left;
 width: 250px;
 margin: 0;
 overflow: hidden;
}

#blog_archive h6{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 100%;
 font-weight: normal;
 margin : 0 0 15px 0;
 padding : 0 0 0 10px;
 border-left-width : 3px;
 border-left-style : solid;
 border-left-color : #3B82F6;
}


.archive_llst{
 width: 100%;
 margin: 0 0 3.125rem 0;
 padding: 0;
}

.archive_llst dl{
 width: 100%;
 margin: 0 0 1.25rem 0;
 padding: 0 0 0.3125rem 0;
 border-bottom : dotted 1px #ccc;
}

.archive_llst dt{
 font-size:90%;
 letter-spacing: 0.05em;
 color:#898365;
 font-family: 'Noto Sans JP', sans-serif;
 margin: 0 0 0.4375rem 0;
 padding: 0;
}


.archive_llst dt a {
 color : #333;
 text-decoration: underline;
}

.archive_llst dt a:hover {
 color : #333;
 text-decoration : none;
}

.archive_llst dd{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 95%;
 font-weight: 400;
 letter-spacing: 0.05em;
 margin: 0 0 0.4375rem 0;
 padding: 0;
}

.archive_llst dd a {
 color : #333;
 text-decoration: underline;
}

.archive_llst dd a:hover {
 color : #333;
 text-decoration : none;
}


.bdetail_hiduke{
 color:#898365;
 font-family: 'Noto Sans JP', sans-serif;
 font-size:100%;
 font-weight:none;
 letter-spacing: 0.05em;
 margin: 0 0 0.5em 0;
}

.blogtitle{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 600;
 color: #333;
 font-size: 180%;
 letter-spacing: 0.1em;
 line-height: 200%;
 margin: 0 0 2em 0;
 padding : 0;
}

.bdetail_img{
 width: 600px;
 margin: 0 0 20px 0;
 padding: 0;
 overflow: hidden;
}

.bdetail_img img{
 max-width: 600px;
 margin: 0;
 padding: 0;
}

.bdetail_text{
 width: 780px;
 margin: 0 0 40px 0;
 padding: 0;
 overflow: hidden;
}

.bdetail_text p{
 font-size: 100%;
 font-weight: 400;
 letter-spacing: 0.1em;
 line-height: 200%;
 margin: 0 0 3em 0;
 padding: 0;
}


.bt a.bt_iblist {
  display: flex;
  align-items: center;
  max-width: 240px;
  margin: 0 auto;
  padding: 0.8rem 1rem 1rem 2rem;
  background-color: #E11D48;
  text-decoration: none;
  transition: 0.3s;
}

.bt a.bt_iblist:hover {
  background-color: #BE123C;
}

.bt a.bt_iblist .iblist_text {
  display: block;
  flex-grow: 1;
 font-family: 'Noto Sans JP', sans-serif;;
  color: #fff;
  font-weight:700;
  letter-spacing: 0.1em; 
  position: relative;
  font-size: 95%;
  text-align: center;
}

.bt a.bt_iblist .iblist_text::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: rotate(225deg);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  transition: 0.3s;
}

/* ===== カスタムセレクト ===== */
.svc-select-wrap {
  position: relative;
  width: 320px;
  margin: 0 auto 20px;
}

/* select本体 */
.svc-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 15px;
  color: #333;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}

/* ホバー */
.svc-select:hover {
  border-color: #999;
}

/* フォーカス */
.svc-select:focus {
  outline: none;
  border-color: #5A3C34;
  box-shadow: 0 0 0 2px rgba(90, 60, 52, 0.1);
}

/* 矢印 */
.svc-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}


/* SP: stack vertically */
@media (max-width: 767px){
  .svc-voice-article{
    flex-direction: column;
  }
  .svc-voice-article__media{
    flex-basis: auto;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
  }
  
 
 #pTitle_news{
 width: 100%;
 height: 12.5rem;
 object-fit: cover;
 background: url(../news_blog/img/pagetitle.webp) center center / cover no-repeat;
 margin: 0 0 1.25rem 0;
 padding: 0;
}

#blog_wrapper{
 width: 90%;
 margin: 1.875rem auto;
 overflow: hidden;
}

#blog_contents{
 float: none;
 width: 100%;
 margin: 0 0 4.375rem 0;
 overflow: hidden;
}

#blog_archive{
 float: none;
 width: 100%;
 margin: 0;
 overflow: hidden;
}

#blog_archive h6{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 0.875rem;
 font-weight: normal;
 margin: 0 0 1.25rem 0;
 padding : 0 0 0 10px;
 border-left-width : 3px;
 border-left-style : solid;
 border-left-color : #3B82F6;
}


.pInfo_box{
 width: 100%;
 margin: 2.5rem 0 1.25rem;
 padding: 0 0 1.25rem 0;
 border-bottom:#ddd 1px solid;
 overflow: hidden;
}

.pInfo_box img{
 float:left;
 max-width: none;
 width: 30%;
 margin: 0 3% 0 0;
 padding: 0;
}

.pInfo_text{
 float:left;
 width: 67%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

.pInfo_text p{
 color:#888365;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 0.625rem;
 letter-spacing: 0.05em;
 line-height: 100%;
 margin: 0 0 0.3em 0;
 font-weight: 400;
}

.pInfo_text h4{
 color:#333;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 0.75rem;
 letter-spacing: 0.05em;
 line-height: 1.375rem;
 margin: 0 0 1em 0;
 font-weight: 400;
}

.bt a.bt_ib {
  display: flex;
  align-items: center;
  max-width: 6.25rem;
  margin: 0;
  padding: 0.4rem 0.5rem;
  background-color: #E11D48;
  text-decoration: none;
  transition: 0.3s;
}

.bt a.bt_ib:hover {
  background-color: #BE123C;
}

.bt a.bt_ib .ib_text {
  display: block;
  flex-grow: 1;
 font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  font-weight:600;
  letter-spacing: 0.1em; 
  position: relative;
  font-size: 0.625rem;
}

.bt a.bt_ib .ib_text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  width: 0.4375rem;
  height: 0.4375rem;
  transition: 0.3s;
}

.archive_llst{
 width: 100%;
 margin: 0 0 3.125rem 0;
 padding: 0;
}

.archive_llst dl{
 width: 100%;
 margin: 0 0 0.9375rem 0;
 padding: 0 0 0.3125rem 0;
 border-bottom : dotted 1px #ccc;
}

.archive_llst dt{
 font-size: 0.625rem;
 letter-spacing: 0.05em;
 color:#888365;
 font-family: 'Noto Sans JP', sans-serif;
 margin: 0 0 0.4375rem 0;
 padding: 0;
}


.archive_llst dt a {
 color : #333;
 text-decoration: underline;
}

.archive_llst dt a:hover {
 color : #333;
 text-decoration : none;
}

.archive_llst dd{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 0.75rem;
 font-weight: 400;
 letter-spacing: 0.05em;
 margin: 0 0 0.4375rem 0;
 padding: 0;
}

.archive_llst dd a {
 color : #333;
 text-decoration: underline;
}

.archive_llst dd a:hover {
 color : #333;
 text-decoration : none;
}


.bdetail_hiduke{
 color:#888365;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 0.75rem;
 font-weight: normal;
 letter-spacing: 0.05em;
 margin: 0;
}

.blogtitle{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 600;
 color: #333;
 font-size: 1.125rem;
 letter-spacing: 0.1em;
 line-height: 1.5rem;
 margin: 0 0 1.25rem 0;
 padding : 0;
}

.bdetail_img{
 width: 100%;
 margin: 0 0 1.25rem 0;
 padding: 0;
 overflow: hidden;
}

.bdetail_img img{
 max-width: 100%;
 margin: 0;
 padding: 0;
}


.bdetail_text{
 width: 100%;
 margin: 0 0 1.875rem 0;
 padding: 0;
 overflow: hidden;
}

.bdetail_text p{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 400;
 color: #333;
 font-size: 0.75rem;
 letter-spacing: 0.1em;
 line-height: 1.375rem;
 margin: 0 0 3em 0;
 padding : 0;
}

.bt_page_detail {
 display: inline-block;
 max-width: 25rem;
 text-align: left;
 background-color: #BB8A60;
 font-size: 0.875rem;
 color: #fff;
 letter-spacing: 0.05em;
 text-decoration: none;
 font-weight: bold;
 padding: 0.625rem 1.5rem;
}

.bt_page_detail :active {
 transform: translateY(4px);
 border-bottom: none;
}

.bt a.bt_iblist {
  display: flex;
  align-items: center;
  max-width: 11.25rem;
  margin: 0 auto;
  padding: 0.8rem 1rem 0.8rem 2rem;
  background-color: #E11D48;
  text-decoration: none;
  transition: 0.3s;
}

.bt a.bt_iblist:hover {
  background-color: #BE123C;
}

.bt a.bt_iblist .iblist_text {
  display: block;
  flex-grow: 1;
 font-family: 'Noto Sans JP', sans-serif;;
  color: #fff;
  font-weight:600;
  letter-spacing: 0.1em; 
  position: relative;
  font-size: 0.75rem;
  text-align:center;
}

.bt a.bt_iblist .iblist_text::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: rotate(225deg);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  transition: 0.3s;
} 

  .svc-voice-list {
    gap: 0.75rem;
  }

  .svc-voice-list__summary {
    padding: 0.875rem 1rem;
  }

  .svc-voice-list__body {
    padding: 0 1rem 0.875rem;
    gap: 0.375rem;
  }

  .svc-voice-list__title {
    margin-top: 0.375rem;
  }

  .svc-voice-article {
    gap: 1.125rem;
  }

  .svc-select-wrap {
    margin: 0 auto 1.25rem;
  }

  .svc-select {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  .svc-select-wrap::after {
    right: 0.875rem;
    width: 0.5rem;
    height: 0.5rem;
  }

}


/* Media box: photo-like appearance */
.svc-voice-article__img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,0.10);
  filter: none;
  opacity: 1;
}