/* ========== Accordion ========== */
/* 見出し（既存の .js-accordion-title / .open を尊重） */
.js-accordion-title {
  cursor: pointer;
  position: relative;
  padding-left: 1em;
}

.accordion_li{
  position: relative;
  padding: 10px !important;
}

.accordion_li::before{
  position: absolute;
  left: 0;
  top:22px;
  transform: rotate(45deg);
}

.list li.open::before {
    transform: rotate(135deg);
  top:18px;
}

/* 見出し直後の要素を“パネル”として扱う（HTML変更なしで適用） */
.js-accordion-title + * {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  will-change: max-height;
}
.js-accordion-title.is-open + *,
.js-accordion-title.open + * {
  /* JS側で inline style に scrollHeight を入れて滑らかに開閉します。
     CSS側は fallback として十分大きめの値を指定しておく */
  max-height: 1000px;
}

/* ========== Modal ========== */
/* オーバーレイ（JSが動的に追加） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9998;
}
.modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 既存の .remodal をそのまま使う（表示時だけ is-open を付与） */
.remodal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display: none;
  z-index: 9999;
  transition: transform .2s ease;
}
.remodal.is-open {
  display: block;
  transform: translate(-50%, -50%);
}

/* ざっくり内側余白（任意） */
.remodal .modal__body { padding: 20px; }

/* body スクロールロック */
body.modal-open {
  overflow: hidden;
}

/* 既存Remodalの閉じるボタン互換（data-remodal-action="close"） */
[data-remodal-action="close"],
[data-modal-close],
.modal-close {
  cursor: pointer;
} 
  
/* ========== Tabs (radio + label + content) ========== */

/* ラジオは非表示 */
.tab-area .tab-btn {

}

/* タブ見出し */
.tab-area .tab-list-wrap {

}
.tab-area .tab-list {

}
.tab-area .tab-list.is-active {

}

/* コンテンツ枠 */
/* いったん全部隠す */
.tab-area .tab-content { display: none; }

/* --- ラジオの :checked と内容の対応（btn1→content1…） --- */
#tab-btn1:checked ~ .tab-content-wrap #tab-content1 { display: block; }
#tab-btn2:checked ~ .tab-content-wrap #tab-content2 { display: block; }

/* ラベルの見た目アクティブ化（:has が効くブラウザ向けの即時反映。古い環境はJSが付与） */
.tab-area:has(#tab-btn1:checked) #tab-list1{ 
  background:#054DD1; 
}

.tab-area:has(#tab-btn2:checked) #tab-list2 { 
  background: rgb(87 147 111 / var(--tw-text-opacity)); 
}

.tab-area:has(#tab-btn1:checked) #tab-list1 *,
.tab-area:has(#tab-btn2:checked) #tab-list2 *{
  color:#ffffff !important;
}

    .tab-area:has(#tab-btn1:checked) #tab-list1 .opacity-0,
    .tab-area:has(#tab-btn2:checked) #tab-list2 .opacity-0{
    opacity: 100;
    }


.inline{
  margin-right: 8px;
}

.fl_mid{
  display: flex;
  align-items: center;
}

h1 small{
  font-size: 2.4rem;
}

h1 small.pt02{
  font-size: 1.2rem;
}


.u-bg-grada--yellow-v {
    background-image: linear-gradient(to right, #FFF6A4 0%, #FFF6A4 15%, #fff 100%);
}

.tab-list-wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.tab-list-wrap li{
  width: 49%;
}

.illust_area{
  position: relative;
}

.illust{
  position: absolute;
  z-index: 0;
  left: 0;
  top:0;
}

.btn_areaWrap{
  position: relative;
  width: 590px;
  margin-left: calc(100% - 590px);
  z-index: 10;
}

.btn_area{
  position: relative;
  padding: 10px;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
}

.btn_area a{
  background: #ffffff;
  width: 130px;
}

.btn_areaTitle{
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom-width: 2px;
  border-style: solid;
}

.btn_area1 .box{
  position: relative;
  text-align: center;
  padding: 0;
}

.btn_area1 .box img{
  margin: auto;
}

.navSec01line{
    position: absolute;
    left: -70px;
    top: 0;
}

.btn_area1{
  border-color:#FFCA6B;
  background: #FFFDF9;
  margin-bottom: 20px;
  padding-bottom: 0;
}

.btn_area1 .btn_areaTitle{
  border-color:#FFCA6B;
}

.navSec02line{
    position: absolute;
    left: -70px;
    top: 0;
}

.btn_area2{
  border-color:#60C236;
  background: #FBFDFA;
  margin-bottom: 20px;
}

.btn_area2:after{
  content: " ";
  background: #60C236;
  width: 65px;
  height: 2px;
  left: -65px;
  top: 48px;
  position: absolute;
}

.btn_area2 .btn_areaTitle{
  border-color:#60C236;
}

.btn_area2Wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn_area2Wrap .box{
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 50%;
  align-items: center;
  padding:5px 10px;
}

.btn_area2Wrap .box:nth-child(odd):after{
  content:" ";
  height: 80%;
  border-right: dashed 1px #707070;
  width: 1px;
  display: block;
  position: absolute;
  top:10%;
  right: 0;
}

.btn_area2Wrap .box:nth-child(n + 3){
  border-top: 1px dashed #707070;
}

.btn_area2Wrap .box .img{
  width: 50%;
}

.btn_area2Wrap .box img{
  margin: auto;
}

.btn_area2Wrap .btn-border:not(:first-child){
  margin-top: 5px;
}

.navSec03line{
    position: absolute;
    left: -70px;
    top: -150px;
}

.btn_area3{
  border-color:#52AAE3;
  background: #F1F8FD;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.btn_area3 .btn_areaTitle{
  border-color:#52AAE3;
}

.btn_area3 .boxflex{
  justify-content: space-between;
}


.boxflex{
  display: flex;
  align-items: center;
}

.btn_area4{
  background: #ffffff;
}

.btn_area4 .img{
  text-align: center;
  width: 60px;
  
}

.btn_area4 .boxflex{
  padding: 5px 0;
}

.btn_area4 .btn-border{
  width: calc((100% - 30px) / 3);
  margin-left: 10px;
}

.btn_area4 .boxflex.line{
 border-bottom: 1px dashed #707070;
margin-bottom: 10px;
}

.btn_area4 .btnCont{
  display: flex;
  align-items: center;
  width: calc(100% - 60px);
  flex-wrap: wrap;
}

.btn_area4 a{
  width: 100%;
}

.btn_area4 .btn-border:nth-child(n + 4){
 margin-top: 10px;
}

.btn01{
    position: absolute;
    left: 60px;
    top: 20px;
}

.btn02{
  position: absolute;
  left: 60px;
  top: 75px;
}

.btn03{
  position: absolute;
    left: 60px;
    top: 130px;
}

.btn04{
  position: absolute;
    right: 40px;
    top: 55px;
}

.btn05{
  position: absolute;
    right: 40px;
    top: 110px;
}

.list{
  padding:10px 30px;
}

.list li{
  padding:10px 0;
}

.list li:first-child{
  padding-top: 0;
}

.list li:not(:last-child){
  border-bottom: 1px dashed #707070;
}

.list li::before {
    content: '';
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-right: .8rem;
    border-top: 2px solid #054DD1;
    border-right: 2px solid #054DD1;
    transform: rotate(45deg) translateY(-40%);
}

.remodal-close{
  display: none;
}

.remodal .title-h3{
margin-top:0 !important;
}

.list_box2{
  position: relative;
  padding: 80px 0;
  margin-top: 60px;
}

.list_box2:before{
  content:" ";
  background: #ECF6F9;
  width: calc(100% + 9.6vw);
  left: -4.8vw;
  top:0;
  z-index: 0;
  position: absolute;
  display: block;
  height: calc(100% + 7rem);
}

.list_box2 .inner{
  z-index: 10;
  position: relative;
}

.list_box2 h3{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.list_box2 .flex > div{
  background: #ffffff;
  width: 48%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.list_box2 .flex{
  justify-content: space-between;
  flex-wrap: wrap;
}

.title_box-h4{
padding:0 30px;
margin-top: 10px;
}

.accordion-content{
  width: calc(100% - 20px);
  margin-left: 20px;  
  border-radius: 10px;
}

.open .accordion-content{
  margin-top: 20px;
}

.accordion-content .msg{
  padding: 20px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.accordion-content .link{
  padding: 20px;
}

.accordion-content .link strong{
  margin-bottom: 10px;
  display: block;
}

.accordion-content a{
  background: #ffffff;
}

.list_pt01 .accordion-content{
  background: rgba(255 215 143 / 20%);
}

.list_pt01 .accordion-content .msg{
  border-bottom-color: #FFCA6B;
}

.list_pt02 .accordion-content{
  background: #EEEEEE;
}

.list_pt02 .accordion-content .msg{
  border-bottom-color: #AAAAAA;
}

.list_pt03 .accordion-content{
  background: rgba(126 204 90 / 20%);
}

.list_pt03 .accordion-content .msg{
  border-bottom-color: #60C236;
}

.list_pt04 .accordion-content{
  background: #DAEBF7;
}

.list_pt04 .accordion-content .msg{
  border-bottom-color: #52A9E3;
}

.list_pt05 .accordion-content{
  background: #FCF3F1;
}

.list_pt05 .accordion-content .msg{
  border-bottom-color: #FEC7CC;
}

.accordion_li .btn-border:not(:first-child){
  margin-top: 5px;
}

.illust02{
  text-align: center;
}

.section02 img{
  margin: auto;
  padding-right: 120px;
}

.btn02Wrap{
  position: absolute;
  top:0;
  left: calc(50% + 100px);
}

.btn02Wrap .section02_btn{
  display: block;
  padding: 15px;
  width: 215px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  font-size: 19px;
  border-style: solid;
  border-width: 3px;
  margin-top: 125px;
  cursor: pointer;
}

.btn02Wrap .section02_btn:not(:last-child):after{
  content:" ";
  display: block;
  width: 130px;
  height: 3px;
  position: absolute;
  top:25px;
  left: -130px;
}

.btn02Wrap .section02_btn.pt01{
  background: rgba(255 215 143 / 20%);
  border-color: #FFCA6B;
  margin-top: 70px;
}

.btn02Wrap .section02_btn.pt01:after{
  background: #FFCA6B;
}

.btn02Wrap .section02_btn.pt02{
  background: #EEEEEE;
  border-color: #AAAAAA;
}

.btn02Wrap .section02_btn.pt02:after{
  background: #AAAAAA;
}

.btn02Wrap .section02_btn.pt03{
  background: rgba(126 204 90 / 20%);
  border-color: #60C236;
}

.btn02Wrap .section02_btn.pt03:after{
  background: #60C236;
}

.btn02Wrap .section02_btn.pt04{
  background: #DAEBF7;
  border-color: #52A9E3;
}

.btn02Wrap .section02_btn.pt04:after{
  background: #52A9E3;
}

.btn02Wrap .section02_btn.pt05{
  background: #FCF3F1;
  border-color: #FEC7CC;
}

.btn02Wrap .section02_btn.pt05:after{
  background: #FEC7CC;
}

.disease.page .list .flex{
  display: block;
}

/*大きいリスト
------------------------------ */
    .disease.page .pt-16 {
        padding-bottom: 0;
    }

.disease.page .list {
	display: flex;
	flex-direction: column;
	row-gap: 1.8rem;
  margin-bottom: 20px;
  padding: 0;
}

.disease.page .sec01 .list .flex{
  padding-bottom: 20px;
  border-bottom: 1px dotted #333333;
}

.disease.page .sec01 .list .pc{
  display: none;
}

.udPage .list .flex{
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #ffffff;
}

.home_btn{
  width: 215px !important;
}

.udBox .flex{
  display: block;
  position: relative;
  padding: 20px;
  padding-left: 220px;
  margin-bottom: 30px;
  border:#FBFBFB 15px solid;
  border-radius: 6px;
  
}

.udBox .flex > img{
  position: absolute;
  left: 20px;
  top:20px;
}

.udBox .title-h3.title-h3--gray{
    background-color: #E6F4F6;
  margin-top: 0;
}

.udBox .txt{
  margin-bottom: 20px;
}

/* スマホエリア */


@media print, screen and (min-width: 768px) {
	.disease.page .list {
		row-gap: 2rem;
	}
}

.disease.page .list h3 {
	font-size: 1.8rem;
	margin-bottom: .6rem;
}
.disease.page .list h3::before{
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	margin-right:.8rem ;
	background-repeat: no-repeat;
	background-image: url('/assets/img/parts/lead-box.svg');
	background-size: contain;
	display: inline-block;
}

@media print, screen and (min-width: 768px) {
.disease.page .list h3 {
		font-size: 2rem;
	}
}

/*ここまで*/


@media screen and (max-width:1250px){
  .navSec01line,
  .btn_area2:after,
  .navSec03line{
    display: none;
  }
}

@media screen and (max-width:865px){
  .btn_areaWrap {
      width: 100%;
    margin-left: 0;
  }
  
  .illust{
    display:none;
  }
}

@media screen and (max-width:767px){
  .illust_area .btn_area1 a{
    width: 70px;
  }
  
  .illust_area .btn_area1 .btn01,
  .illust_area .btn_area1 .btn02,
  .illust_area .btn_area1 .btn03{
    left: calc(50% - 160px);
}
  
  .illust_area .btn_area1 .btn04,
  .illust_area .btn_area1 .btn05{
    right: calc(50% - 160px);
}
  
  .btn_area2Wrap .box:nth-child(odd):after{
    display: none;
  }
  
  .btn_area2Wrap {
    display: block;
}
  
    .btn_area2Wrap .box{
    width: 100%;
}
 
.btn_area2Wrap .box:nth-child(n + 2) {
    border-top: 1px dashed #707070;
}  

  .list_box2 .flex{
    display: block;
  }
  
  .list_box2 .flex > div {
    width: 100%;
}
  
.udBox .flex {
    padding-left: 20px;
}
  
.udBox .flex > img {
    position: inherit;
  width: 100%;
  height: auto;
  top:0;
  left: 0;
  margin-bottom: 20px;
}
 
  
  .illust02{
    display: none;
  }
  
  .btn02Wrap {
    position: initial;
    top: 0;
    left: 0;
}
  
.btn02Wrap .section02_btn.pt01 {
    margin-top: 0;
  width: 100%;
}  
  
.btn02Wrap .section02_btn.pt02,
.btn02Wrap .section02_btn.pt03,
.btn02Wrap .section02_btn.pt04,
.btn02Wrap .section02_btn.pt05{
    margin-top: 20px;
  width: 100%;
}  
  
.btn02Wrap .section02_btn:not(:last-child):after{
  display: none;
}  
  
  .btn_area3 .boxflex{
    display: block;
  }
  
  .btn_area3 a,
  .btn_area3 .btn-border{
    width: 100%;
  }
  
   .btn_area3 .btn-border{
   margin-top: 10px;
  }
  
  .btn_area4 .btnCont{
    display: block;
  }
  
  .btn_area4 a,
  .btn_area4 .btn-border{
    width: 100%;
  }
  
   .btn_area4 .btn-border{
   margin-bottom: 10px;
  }
  
}