/* color setting */
:root {
  /* 血友病を1から知りたいあなたへ */
  --to-you-color1: #009c64;
  --to-you-color2: #19c764;
  /* 血友病を1から知りたいあなたへ */
  --with-you-color1: #ffa24b;
  --with-you-color2: #ffdbab;
  --with-you-color3: #ffbc3c;
}

/* ----------------------------------
ページ別スタイル
---------------------------------- */
/*button*/
#to-you .button-type-1{
  color: var(--to-you-color1);
  border: 2px solid var(--to-you-color2);
}
#to-you .button-type-1:hover {
  color: #fff;
  background: var(--to-you-color2);
}
/* 血友病を1から知りたいあなたへ (ディレクトリ：to_you配下) */
#to-you .main-v{
  background: var(--to-you-color2) url(../../to_you/disease/img/to_you_main_v_bg.png)no-repeat right 85% / 400px;
  overflow:hidden;
}
#to-you .main-v .main-v-icon-1{fill:#aeebc9;}
#to-you .main-v .main-v-icon-2{fill:#fff;}
#to-you .breadcrumb ul li a{color: var(--to-you-color1);}
#to-you section h2.type-1{
  color: var(--to-you-color1);
  border: 2px solid var(--to-you-color2);
}
#to-you section h3.type-1{
  color: var(--to-you-color1);
}
#with-you .point_title {
  color: var(--to-you-color2);
  border: 2px solid var(--to-you-color1);
  background: #fff6d4;
}
#to-you section p a{
	color: var(--to-you-color1);
}
#with-you .border-box{
  border: 2px solid var(--to-you-color1);
}
#to-you .page-link-prev-next ul li a{
  color: var(--to-you-color1);
  border: 2px solid var(--to-you-color2);
}
#to-you .page-link-prev-next ul li.prev a:before{
  border-bottom: solid 2px var(--to-you-color2);
  border-left: solid 2px var(--to-you-color2);  
}
#to-you .page-link-prev-next ul li.next a:after{
  border-top: solid 2px var(--to-you-color2);
  border-right: solid 2px var(--to-you-color2);
}
#to-you .page-link-prev-next ul li a:hover{
  color: #fff;
  background: var(--to-you-color2);
}
#to-you .page-link-prev-next ul li a:hover:before,
#to-you .page-link-prev-next ul li a:hover:after{
  border-color: #fff;
}
#to-you .movie-notes p{
  background: var(--to-you-color2);
}
#to-you .default-list li .list-title{
  color: var(--to-you-color1);
}
#to-you .default-list li:before{
  background: var(--to-you-color2);
}
#to-you .border-frame dt{
  color: var(--to-you-color2);
  border: 2px solid var(--to-you-color2);
}
#to-you .border-frame dd{
  border: 2px solid var(--to-you-color2);
}
#to-you .border-frame dd ul li:before{
  background: var(--to-you-color2);
}
#to-you .bg-area h3{
  color: var(--to-you-color1);
}
#to-you .border-frame-in-list{
  border-color: var(--to-you-color2);
}
#to-you .caution-area{
  border: 2px solid var(--to-you-color1);
}

/* STUDY */
#to-you .column-content.study h3:first-of-type{
  color: var(--to-you-color1);
}
#to-you .column-content.study h3:first-of-type:after{
  background: radial-gradient(circle farthest-side, var(--to-you-color1), var(--to-you-color1) 10%, transparent 50%, transparent); 
  background-size: 8px 4px;
}
#to-you .column-content.study h5{
  color: var(--to-you-color1);
  border-bottom: dotted 2px var(--to-you-color1);
}
#to-you .column-content.study .column-content-list li:before{
  background: var(--to-you-color1);
}
#to-you .column-content.study .graph_overview dt {
  background: var(--to-you-color1);
}

/* ----------------------------------
動画リード文エリア
---------------------------------- */
#to-you .movie-read-area{
  color: var(--to-you-color1);
}

/* ［ 例 ］ */
#to-you .example-area .example-title{
  color: var(--to-you-color1);
}
#to-you .example-area .example-title:after{
  background: radial-gradient(circle farthest-side, var(--to-you-color2), var(--to-you-color2) 20%, transparent 40%, transparent);
  background-size: 12px 6px;
}
#to-you a.pdf-link{
  border: 1px solid var(--to-you-color1);
  color: var(--to-you-color1);
}
#to-you a.pdf-link:hover{
  background: var(--to-you-color1);
  color: #fff;
}
/* ----------------------------------
アンカーリンクリスト
---------------------------------- */
#to-you .anker-link-list li a{
  color: var(--to-you-color1);
  border: 2px solid var(--to-you-color1);
}
#to-you .anker-link-list li a:hover{
  color: #fff;
  background-color: var(--to-you-color1);
}

/* ----------------------------------
テーブル
---------------------------------- */
#to-you .table-color-bg{
  background: var(--to-you-color2);
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
}
#to-you .table-color-bg.border-bottom{
  border-bottom: 2px solid #fff;
}
#to-you .table-color-bg.border-right{
  border-right: 2px solid #fff;
}
@media screen and (max-width: 768px) {
  #to-you .main-v{
    background-size: 180px!important;
    background-position: right -50px bottom 25px!important;
  }
  #to-you .table-color-bg.border-bottom{
    border-bottom: 2px solid var(--to-you-color2);
  }
  #to-you .table-color-bg.border-bottom.sp-fff{
    border-bottom: 2px solid #fff;
  }
  #to-you .table-color-bg{
    font-size: 1.4rem;
  }
}



/* ⾎友病を⽣きるあなたとともに (ディレクトリ：with_you配下) */
/*button*/
#with-you .button-type-1{
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color2);
}
#with-you .button-type-1:hover {
  color: #fff;
  background: #ffc776;
}
#with-you .main-v{
  background: var(--with-you-color3) url(../../with_you/img/with_you_main_v_bg.png)no-repeat right -5px bottom -140px / 410px;
  overflow:hidden;
}
#with-you .main-v .main-v-icon-1{fill:var(--with-you-color2);}
#with-you .main-v .main-v-icon-2{fill:#fff;}
#with-you .breadcrumb ul li a{color: var(--with-you-color1);}
#with-you .default-list li .list-title{
  color: var(--with-you-color1);
}
#with-you .default-list li:before{
  background: var(--with-you-color1);
}
#with-you .border-box{
  border: 2px solid var(--with-you-color1);
}
#with-you section h2.type-1{
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color1);
}
#with-you .qa-h2{
  color: var(--with-you-color1);
}
#with-you .breadcrumb ul li a {color: var(--with-you-color1);}
#with-you section h3.type-1,
#with-you section h4.type-1{
  color: var(--with-you-color1);
}
#with-you .bg-area h3{
  color: var(--with-you-color1);
}
#with-you .bg-area h3:after{
  background: radial-gradient(circle farthest-side, var(--with-you-color1), var(--with-you-color1) 10%, transparent 50%, transparent);
  background-size: 8px 4px;
}
#with-you section h4.type-1.icon:before{
  background: var(--with-you-color1);
}
#with-you .point_title {
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color1);
  background: #fff6d4;
}
#with-you section p a{
	color: var(--with-you-color1);
}
#with-you .page-link-prev-next ul li a{
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color2);
}
#with-you .page-link-prev-next ul li.prev a:before{
  border-bottom: solid 2px #ffc776;
  border-left: solid 2px #ffc776;  
}
#with-you .page-link-prev-next ul li.next a:after{
  border-top: solid 2px #ffc776;
  border-right: solid 2px #ffc776;
}
#with-you .page-link-prev-next ul li a:hover{
  color: #fff;
  background: #ffc776;
}
#with-you .page-link-prev-next ul li a:hover:before,
#with-you .page-link-prev-next ul li a:hover:after{
  border-color: #fff;
}
#with-you .movie-notes p{
  background: var(--with-you-color1);
}
#with-you .border-frame dt{
  background: var(--with-you-color1);
  border: 2px solid var(--with-you-color1);
}
#with-you .border-frame dd{
  border: 2px solid var(--with-you-color1);
}
#with-you .border-frame dd ul li:before{
  background: var(--with-you-color1);
}
#with-you .caution-area{
  border: 2px solid var(--with-you-color1);
}


/* STUDY */
#with-you .column-content.study h3:first-of-type{
  color: var(--with-you-color1);
}
#with-you .column-content.study h3:first-of-type:after{
  background: radial-gradient(circle farthest-side, var(--with-you-color1), var(--with-you-color1) 10%, transparent 50%, transparent); 
  background-size: 8px 4px;
}
#with-you .column-content.study h5{
  color: var(--with-you-color1);
  border-bottom: dotted 2px var(--with-you-color1);
}
#with-you .column-content.study .column-content-list li:before{
  background: var(--with-you-color1);
}
#with-you .column-content.study .graph_overview dt {
  background: var(--with-you-color1);
}


/* ----------------------------------
動画リード文エリア
---------------------------------- */
#with-you .movie-read-area{
  color: var(--with-you-color1);
}

/* ［ 例 ］ */
#with-you .example-area .example-title{
  color: var(--with-you-color1);
}
#with-you .example-area .example-title:after{
  background: radial-gradient(circle farthest-side, var(--with-you-color2), var(--with-you-color2) 20%, transparent 40%, transparent);
  background-size: 12px 6px;
}
#with-you .border-frame-in-list{
  border-color: var(--with-you-color1);
}
#with-you a.pdf-link{
  border: 1px solid var(--with-you-color1);
  color: var(--with-you-color1);
}
#with-you a.pdf-link:hover{
  background: var(--with-you-color1);
  color: #fff;
}
#with-you .current-page-link-list a{
  color: var(--with-you-color1);
}
#with-you .current-page-link-list li a:after{
  border-color: transparent transparent transparent var(--with-you-color1);
}
#with-you .manga-area .manga-view-button{
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color2);
}
#with-you .manga-area .manga-view-button:hover{
  cursor: pointer;
  background: var(--with-you-color1);
  color: #fff;
}
#with-you .confirmation_frame{
  border: 2px solid var(--with-you-color1);
}
#with-you .confirmation_head {
  background: var(--with-you-color1);
}
#with-you .confirmation li:before{
  background: var(--with-you-color1);
}
/* ----------------------------------
アンカーリンクリスト
---------------------------------- */
#with-you .anker-link-list li a{
  color: var(--with-you-color1);
  border: 2px solid var(--with-you-color1);
}
#with-you .anker-link-list li a:hover{
  color: #fff;
  background-color: var(--with-you-color1);
}

@media screen and (max-width:980px) {
	#with-you .main-v {
		background-position-y: 135px;
	}
}
@media screen and (max-width: 768px) {
  #with-you .main-v{
    background-size: 150px!important;
    background-position: right -10px bottom -10px!important;
  }
}