@charset "utf-8";
/************************************
◆共通（各ページ）
************************************/
a.link_color {
    color: #ffcc00;
}

a.link_color.blue {
    color: #00009f;
}
/*ページmenu*/
#page_navi {
    position: absolute;
    width: 100%;
    top: 19vw;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
    z-index: 5;
    box-sizing: border-box;
    transition:top 0.5s;
}
#page_navi.up {
    top: 17vw;
}
#page_navi #navi_title {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    position: relative;
    font-size: 17px;
    font-weight: bold;
    transition:color 0.5s;
}
#page_navi.color #navi_title {
    color: #FFF;
    border-bottom: 1px solid #fff;
}
#page_navi #navi_title .arrow {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 8.9px;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#page_navi #navi_title .arrow::before,
#page_navi #navi_title .arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 10px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: 50% calc(100% - 0.5px);
}
#page_navi.color #navi_title .arrow::before,
#page_navi.color #navi_title .arrow::after {
  background-color: #FFF;
}
#page_navi #navi_title.open .arrow::before,
#page_navi #navi_title.open .arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 10px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: 50% 0.5px;
}

#page_navi #navi_title .arrow::before {
  transform: rotate(30deg);
}

#page_navi #navi_title .arrow::after {
  transform: rotate(-30deg);
}

#page_navi #navi_menu {
    display: none;
    margin-top: 5px;
    width: 100%;
    background: rgba(255,255,255,0.60);
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}
#page_navi #navi_menu li {
    margin-bottom: 8px;
}
#page_navi #navi_menu li#btn_search {
    margin-bottom: 4px;
}

#page_navi #navi_menu a {
    color: #000;
    transition:color 0.5s;
}
#page_navi.color #navi_menu a {
    color:#fff;	
}
#page_navi #navi_menu a:hover {
    color: #fd961c;
}
#page_navi #navi_menu #btn_search a {
    display: inline-block;
    padding: 2px 10px 4px;
    background: #004EC8;
    color: #FFF;
    border-radius: 24px;
}
@media print, screen and (min-width:768px){
    #navi_menu ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #page_navi #navi_menu li {
        margin-bottom: 0;
    }
}
@media print, screen and (min-width:769px){
    /*ページmenu*/
    #page_navi {
        position: absolute;
        width: 90%;
        top: 140px;
        left: 0;
        right: 0;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        z-index: 5;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
        transition:top 0.5s, border-bottom 0.5s;
    }
    #page_navi.color {
        border-bottom: 1px solid #FFF;
    }
    #page_navi #navi_title {
        width: 40%;
        padding-bottom: 15px;
        border-bottom: 0;
        transition:color 0.5s;
    }
    #page_navi.color #navi_title {
        color: #FFF;
        border-bottom: 0;
    }
    #page_navi #navi_title .arrow {
     display: none;   
    }
    #page_navi #navi_menu {
        display: block !important;
        width: 60%;
        border-radius: 0;
        background: none;
        padding-bottom: 10px;
        border-bottom: 0;
        transition:color 0.5s;
    }
    #page_navi.color #navi_menu {
        border-bottom: 0;	
    }
    #page_navi #navi_menu ul {
        display: flex;
        justify-content: space-between;
    }
    #page_navi #navi_menu a {
        transition:color 0.5s;
    }
    #page_navi.color #navi_menu a {
        color:#fff;	
    }
}
@media print, screen and (min-width:1215px){
    /*ページmenu*/
    #page_navi {
        position: absolute;
        width: 1080px;
        top: 140px;
        left: 0;
        right: 0;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        z-index: 5;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
        transition:top 0.5s, border-bottom 0.5s;
    }
    #page_navi.up {
        top: 100px;
    }
    #page_navi #navi_title {
        width: 40%;
        padding-bottom: 15px;
        border-bottom: 0;
        transition:color 0.5s;
    }
    #page_navi.color #navi_title {
        color: #FFF;
        border-bottom: 0;
    }
    #page_navi #navi_title .arrow {
     display: none;   
    }
    #page_navi #navi_menu {
        display: block;
        width: 60%;
        border-radius: 0;
        background: none;
        padding-bottom: 10px;
        border-bottom: 0;
        transition:color 0.5s;
    }
    #page_navi.color #navi_menu {
        border-bottom: 0;	
    }
    #page_navi #navi_menu ul {
        display: flex;
        justify-content: space-between;
    }
    #page_navi #navi_menu a {
        transition:color 0.5s;
    }
    #page_navi.color #navi_menu a {
        color:#fff;	
    }
}

/***** ページナビ（ボトム）*****/
.about-governance .l-article.w-100 {
    width: 100%;
}
.p-about-clinical-trials-excursion-sec{
    background-color: #1F3A8A;
    padding: 20px 10px;
    box-sizing: border-box;
}
.bottom_navi_wrap {
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
}
.bottom_navi_wrap h2 {
    color: #FFF;
    margin-bottom: 20px;
}
.bottom_navi_wrap p {
    color: #FFF;
    font-size: 1.2em;
}
.bottom_navi_wrap .bottom_navi {
    margin-top: 20px;
}
.bottom_navi_wrap .bottom_navi li {
    margin-bottom: 15px;    
}
.bottom_navi_wrap .bottom_navi li p, .bottom_navi_wrap .bottom_navi li a {
    display: block;
    padding: 8px 0;
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #FFF;
    border-radius: 50px;
    text-align: center;
}
.bottom_navi_wrap .bottom_navi li p  {
    color: #FFF;
}
.bottom_navi_wrap .bottom_navi li a  {
    color: #1F3A8A;
    background: #FFF;
}

@media print, screen and (min-width:640px){
    .bottom_navi_wrap {
        width: 100%;
        padding: 20px 20px;
        box-sizing: border-box;
    }
    .bottom_navi_wrap p {
        color: #FFF;
        font-size: 18px;
    }
    .bottom_navi_wrap .bottom_navi li p, .bottom_navi_wrap .bottom_navi li a {
        display: block;
        padding: 8px 0;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid #FFF;
        border-radius: 50px;
        text-align: center;
    }
}

@media print, screen and (min-width:768px){
    .bottom_navi_wrap {
        width: 90%;
        margin: 0 auto;
    }
}

@media print, screen and (min-width:1215px){
    .bottom_navi_wrap {
        width: 1000px;
        margin: 0 auto;
    }
    .bottom_navi_wrap .bottom_navi {
        display: flex;
        justify-content: space-between;
    }
    .bottom_navi_wrap .bottom_navi li:first-child {
        width: 15%;
    }
    .bottom_navi_wrap .bottom_navi li:nth-child(2) {
        width: 20%;
    }
    .bottom_navi_wrap .bottom_navi li:nth-child(3) {
        width: 27%;
    }
    .bottom_navi_wrap .bottom_navi li:last-child {
        width: 32%;
    }
}


/************************************
◆治験について
************************************/
/***** main *****/
/* ヒーローエリア */
#hero-wrap {
  height: 200vh;
  position: relative;
}
#hero {
  position: fixed;
  width: 100%;
  height: 90vh;
  top: 0;
  left: 0;
  background: url("/assets/images/about/clinical-trials/main_01.webp") no-repeat center center/cover;
  transition: background 1s ease;
    z-index: 0;
  /*overflow: hidden;*/
}
#hero.stop {
  position: absolute;
  top:auto;
  bottom:0;
}

/* 黒フィルター */
#hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 1s ease;
  z-index: 3;
}

/* テキスト中央配置 */
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  position: absolute;
  font-size: 2.0rem;
  opacity: 0;
  transition: opacity 1s ease;
}

#text1 {
    opacity: 1;
    color: #000;
}
#text2 {
    color: #FFF;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    min-height: 100vh;
}
.content p {
    position: relative;
    width: 100%;
    margin: 0 auto;
    color: #FFC79A;
    opacity: 0;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 5;
    transition: opacity 0.2s ease;
}
.content p.visible {
  opacity: 1;
}

.content_wrap {
    background: #FFF;
    position: relative;
    z-index: 11;
}

@media print, screen and (min-width:480px){
    /* テキスト中央配置 */
    .hero-content h1 {
      font-size: 2.5em;
    }
}

@media print, screen and (min-width:640px){
    .content p {
        width: 70%;
        margin: 0 auto;
        font-size: 1.5em;
        line-height: 1.6;
    }
}

@media print, screen and (min-width:1215px){
    /* ヒーローエリア */
    #hero {
        height: 90vh;
        background: url("/assets/images/about/clinical-trials/main_01.webp") no-repeat;
        background-position: top center;
        background-size: cover;
    }

    /* テキスト中央配置 */
    .hero-content h1 {
        font-size: 3.5em;
        padding-bottom: 100px;
    }
    .hero-content h1 br {
      display: none;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 20px;
        min-height: 100vh;
    }
    .content p {
        position: relative;
        width: 50%;
        margin: 0 auto;
        color: #FFC79A;
        opacity: 0;
        font-size: 2.2em;
        z-index: 5;
        transition: opacity 1s ease;
    }
    .content p.visible {
      opacity: 1;
    }

    .content_wrap {
        background: #FFF;
        position: relative;
        z-index: 11;
    }
}

/***** content_wrap *****/
.content_wrap {
    overflow: hidden;
}
.about-governance .l-article {
    padding-top: 4em;
    padding-bottom: 0;
}

/*スライダー*/
.l-article.visible {
    overflow: visible;
}
.slick_inner {
    width: min(100%,1120px);
    margin: 0 auto;
    padding: 0 0;
}
.slick_container {
    position: relative;
    width: calc(100% + (100vw - 100%)/2);
}
.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}
.slider {
    padding: 50px 0 0px 10px;  
}
.slider li.slick-slide {
    background: #06B6D4;
    position: relative;
    width: 200px;
    border-radius: 12px;
    margin-right: 20px;
    padding: 15px;
    box-sizing: border-box;
}
.slider li.slick-slide h3 {
    color: #FFF;
    text-align: center;
    height: 40px;
    line-height: 1.2;
    font-size: 18px;
    margin-bottom: 10px;
}
.slider li.slick-slide .icon {
    margin-bottom: 10px;
}
.slider li.slick-slide .icon img {
    width: 80px;
    height: 91px;
    margin: 0 auto;
}
.slider li.slick-slide .txt {
    color: #FFF;
    font-size: 14px;
    text-align: left;
}

.dots-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background:#CFCFCF;
    border-radius: 50%;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: #1E3A8A;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

@media print, screen and (min-width:480px){
    .slider li.slick-slide {
        width: 300px;
        margin-right: 30px;
        padding: 20px;
    }
    .slider li.slick-slide h3 {
        height: 60px;
        font-size: 20px;
    }
    .slider li.slick-slide .txt {
        font-size: 16px;
        margin-top: 15px;
    }
}
@media print, screen and (min-width:640px){
    .slider li.slick-slide h3 {
        height: 60px;
        font-size: 24px;
    }
    .slider li.slick-slide .txt {
        font-size: 18px;
    }
}
@media print, screen and (min-width:769px){
    .slick_container {
        position: relative;
        width: calc(100% + (200vw - 100%)/2);
    }
}
@media print, screen and (min-width:1215px){
    .slick_container {
        position: relative;
        width: calc(100% + (100vw - 100%)/2);
    }
    .slider li.slick-slide {
        margin-right: 50px;
        padding: 30px;
    }
}

/*step*/
.step_wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 50px;
}
.step_wrap #progress_bar {
    width: 40px;
    position: relative;
    box-sizing: border-box;
}
.step_wrap #progress_bar p {
    width: 70%;
    height: calc(100% - 19px);
    margin: 0 auto;
    padding: 30px 5px 0;
    background: #06B6D4;
    background: linear-gradient(0deg,rgba(6, 182, 212, 1) 0%, rgba(251, 146, 60, 1) 50%, rgba(30, 58, 138, 1) 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    position: relative;
    box-sizing: border-box;
}
.step_wrap #progress_bar:after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #06B6D4;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.step_wrap #step_contents{
    margin-left: 15px;
    flex:1;
}

/* ↓ arrow共通 ↓ */
.step_wrap #step_contents .arrow {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.step_wrap #step_contents .arrow.navy {
    background: #1F3A8A;
}
.step_wrap #step_contents .arrow.orange {
    background: linear-gradient(to top, #06B6D4,#FB923C );
}
.step_wrap #step_contents .arrow.blue {
    background: #06B6D4;
    margin-top: 10px;
}
/* ↑ arrow共通 ↑ */

/* ↓ box共通 ↓ */
.step_wrap #step_contents .box {
    border-radius: 12px;
    padding: 10px;
    position: relative;
}
.step_wrap #step_contents .box.navy {
    background: #1E3A8A;
}
.step_wrap #step_contents .box.blue {
    background: #06B6D4;
}
.step_wrap #step_contents .box h3 {
    color: #FFF;
    font-size: 1.4em;
    margin-bottom: 15px;
}
.step_wrap #step_contents .box .box_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.step_wrap #step_contents .box .box_content .icon {
    width: 80px;
    padding-right: 15px;
    box-sizing: border-box;
}
.step_wrap #step_contents .box .box_content .txt {
    flex:1;
}
/* ↑ box共通 ↑ */

.step_wrap #step_contents p{
    color: #FFF;
    font-size: 1.2em;
}

/* ↓ step① ↓ */
.step_wrap #step_contents .step_first > div {
    margin-bottom: 10px;
}
.step_wrap #step_contents .step_first > div:last-of-type:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    margin-top: 10px;
    background: linear-gradient(to top, #FB923C,#1E3A8A );
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
/* ↑ step① ↑ */

/* ↓ step② ↓ */
.step_wrap #step_contents .second_wrap {
    background: #FFC79A;
    border-radius: 12px;
    padding: 15px 10px;
    margin-bottom: 10px;
}
.step_wrap #step_contents .second_wrap h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
}
.step_wrap #step_contents .second_wrap ul li {
    background: #FB923C;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
}
.step_wrap #step_contents .second_wrap ul li:last-child {
    margin-bottom: 0;
}
.step_wrap #step_contents .second_wrap ul li:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.2;
    left: 0;
    bottom: 0;
}
.step_wrap #step_contents .second_wrap ul li:first-child:after {
    background: url("../../images/about/clinical-trials/icon_phase_01.png") no-repeat;
    background-size: auto 100px;
    background-position: left bottom;
    z-index: 0;
}
.step_wrap #step_contents .second_wrap ul li:nth-child(2):after {
    background: url("../../images/about/clinical-trials/icon_phase_02.png") no-repeat;
    background-size: auto 100px;
    background-position: left bottom;
    z-index: 0;
}
.step_wrap #step_contents .second_wrap ul li:last-child:after {
    background: url("../../images/about/clinical-trials/icon_phase_03.png") no-repeat;
    background-size: auto 100px;
    background-position: left bottom;
    z-index: 0;
}
.step_wrap #step_contents .second_wrap ul li h4 {
    font-size: 1.3em;
    margin-bottom: 10px;
}
.step_wrap #step_contents .second_wrap ul li p {
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
/* ↑ step② ↑ */

/* ↓ step③ ↓ */
.step_third {
    margin: 10px 0;
}
/* ↑ step③ ↑ */

@media print, screen and (min-width:480px){
    /* ↓ box共通 ↓ */
    .step_wrap #step_contents .box {
        padding: 15px;
    }
    
    /* ↓ step② ↓ */
    .step_wrap #step_contents .second_wrap ul li {
        padding: 15px;
    }
}
@media print, screen and (min-width:640px){
    .step_wrap #progress_bar {
        width: 50px;
    }
    .step_wrap #progress_bar p {
        width: 70%;
        height: calc(100% - 22px);
        margin: 0 auto;
        padding: 30px 5px 0;
        background: #06B6D4;
        background: linear-gradient(0deg,rgba(6, 182, 212, 1) 0%, rgba(251, 146, 60, 1) 50%, rgba(30, 58, 138, 1) 100%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        position: relative;
        box-sizing: border-box;
    }
    .step_wrap #progress_bar:after {
        content: "";
        display: block;
        position: absolute;
        width: 50px;
        height: 30px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: #06B6D4;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
    }
    /* ↓ box共通 ↓ */
    .step_wrap #step_contents .box h3 {
        font-size: 24px;
    }
    .step_wrap #step_contents p{
        color: #FFF;
        font-size: 18px;
    }
    
    /* ↓ step② ↓ */
    .step_wrap #step_contents .second_wrap h3 {
        font-size: 24px;
    }
    .step_wrap #step_contents .second_wrap ul li h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

@media print, screen and (min-width:1215px){
    .step_wrap #step_contents{
        margin-left: 30px;
    }
    .step_wrap #step_contents .arrow.navy {
        clip-path: polygon(0 0, 0 100%, 100% 50%);
    }
    .step_wrap #step_contents .step_first {
        display: flex;
    }
    .step_wrap #step_contents .step_first > div {
        width: 48%;
    }
    .step_wrap #step_contents .step_first > div:nth-child(2) {
        width: 4%;
        align-self: center;
    }
    .step_wrap #step_contents .second_wrap {
        padding: 20px 15px;
    }
    .step_wrap #step_contents .second_wrap ul li {
        padding: 15px 25px;
        display: flex;
        justify-content: space-between;
    }
    .step_wrap #step_contents .second_wrap ul li:nth-child(2){
        padding-bottom: 20px;
    }
    .step_wrap #step_contents .second_wrap ul li:nth-child(3){
        padding-bottom: 50px;
    }
    .step_wrap #step_contents .second_wrap ul li h4 {
        width: 20%;
    }
    .step_wrap #step_contents .second_wrap ul li > div {
        width: 80%;
    }
    .step_wrap #step_contents .second_wrap ul li:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 1;
        left: 10px;
        bottom: 0;
    }
    .step_wrap #step_contents .second_wrap ul li:last-child:after {
        background: url("../../images/about/clinical-trials/icon_phase_03.png") no-repeat;
        background-size: auto 80px;
        background-position: left bottom;
        z-index: 0;
    }
}


/* 治験に関する詳細情報 */
.box_info {
    margin-top: 50px;
}
.box_info .box {
    margin-bottom: 15px;
    padding: 20px 10px;
    border-radius: 12px;
    background: #06B6D4;
}
.box_info .box h3 {
    font-size: 1.6em;
    text-align: center;
    color: #FFF;
    margin-bottom: 25px;
}
.box_info .box h3 p {
    font-size: 80%;
    color: #FFF;
}
.box_info .box > p {
    color: #FFF;
    font-size: 1.2em;
    margin-bottom: 40px;
}
.box_info .box .thumb {
    width: 80%;
    margin: 0 auto;
}
.btn {
    margin-top: 15px;
}
.btn a {
    display: block;
    background: #FFF;
    border: 2px solid #1F3A8A;
    text-align: center;
    color: #1F3A8A;
    padding: 8px 0;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.5s;
}
.btn a:hover {
    background: #1F3A8A;;
    color: #fff;
}
.btn.modal_btn a {
    font-size: 1.4em;
    position: relative;
    cursor: pointer;
}
.btn.modal_btn a:before, .btn.modal_btn a:after {
    content:'';
    position:absolute;
    right:15px;
    top:50%;
    width:15px;
    height:2px;
    background-color:#1F3A8A;
    transition: all 0.5s;
}
.btn.modal_btn a:hover:before, .btn.modal_btn a:hover:after {
    background-color:#FFF;
}
.btn.modal_btn a:before {
    transform: rotate(90deg);
}
.btn a span {
    display: block;
    font-size: 80%;
    color: #1F3A8A;
    transition: color 0.5s;
}
.btn a:hover span {
    color: #FFF;
}

/*モーダル表示*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 150;
}
.modal__bg{
    background: rgba(68,68,68,0.80);
    height: 100vh;
    position: absolute;
    width: 100%;
    
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    border-radius: 12px;
}
.modal__content h4 {
    font-size: 18px;
    margin-bottom: 20px;
}
.modal__content p {
    font-size: 14px;
    word-break: break-all;
}
.modal__content ul {
    margin: 20px 0;
}
.modal__content ul li {
    margin-bottom: 15px;
}
.modal__content ul li h5 {
    font-size: 14px;
}
.modal__content ul li a {
    color: #2C34CD;
    text-decoration: underline;
}
.modal__content .note {
    font-size: 1.0em;
}
.modal__content a.js-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0;
    width: 25px;
    height: 25px;
    background: #000;
    border-radius: 50%;
    display: block;
}
.modal__content a.js-modal-close:before, .modal__content a.js-modal-close:after {
    content:'';
    position:absolute;
    right:5px;
    top:50%;
    width:15px;
    height:2px;
    background-color:#fff;
}
.modal__content a.js-modal-close:before {
    transform: rotate(45deg);
}
.modal__content a.js-modal-close:after {
    transform: rotate(-45deg);
}

@media print, screen and (min-width:480px){
    /* 治験に関する詳細情報 */
    .box_info .box {
        margin-bottom: 25px;
        padding: 25px 15px;
    }
    .modal__content h4 {
        font-size: 20px;
    }
    .modal__content p {
        font-size: 16px;
    }
    .modal__content ul li h5 {
        font-size: 16px;
    }
}

@media print, screen and (min-width:640px){
    .box_info .box h3 {
        font-size: 24px;
        text-align: center;
        color: #FFF;
        margin-bottom: 25px;
    }
    .box_info .box > p {
        font-size: 18px;
    }
    .btn a {
        display: block;
        background: #FFF;
        border: 2px solid #1F3A8A;
        text-align: center;
        color: #1F3A8A;
        padding: 8px 0;
        font-size: 20px;
        font-weight: bold;
        border-radius: 50px;
    }
    .btn.modal_btn a {
        font-size: 20px;
        position: relative;
        cursor: pointer;
    }
    .content_text {
        font-size: 18px;
    }
    .link_wrap {
        margin-top: 20px;
    }
    .modal__content h4 {
        font-size: 24px;
    }
    .modal__content p {
        font-size: 18px;
    }
    .modal__content ul li h5 {
        font-size: 18px;
    }
}

@media print, screen and (min-width:768px){
    .box_info .box .thumb {
        width: 60%;
        margin: 0 auto;
    }
}

@media print, screen and (min-width:1215px){
    .box_info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .box_info .box {
        width: 46%;
        padding: 25px 25px;
        box-sizing: border-box;
    }
    .link_wrap {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
    }
    .link_wrap .btn.link:first-child {
        width: 32%;
    }
    .link_wrap .btn.link:last-child {
        width: 65%;
    }
    .modal__content{
        padding: 50px;
        width: 1000px;
    }
}


/************************************
◆当社の治験結果
************************************/
/*main*/
.main.result {
    width: 100%;
    height: 40vh;
    background: url("../../images/about/clinical-trials/result_main.webp") no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.main_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.main_wrap h1 {
    padding-top: 50px;
    font-size: 36px;
}

/* article内 */
.cautionary_note {
    background: #EEEEEE;
    border: 2px solid #06B6D4;
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.6;
}
h2.p-about-clinical-trials-sec_ttl--digit.result {
    text-align: left;
}

@media print, screen and (min-width:640px){
    /*main*/
    .main.result {
        height: 470px;
    }
    .main_wrap h1 {
        font-size: 48px;
    }
}

@media print, screen and (min-width:768px){
    /*main*/
    .main.result {
        height: 563px;
    }
    .main_wrap h1 {
        font-size: 60px;
    }
    /* article内 */
    .cautionary_note {
        background: #EEEEEE;
        border: 2px solid #06B6D4;
        padding: 25px;
        border-radius: 12px;
        font-size: 18px;
        line-height: 1.6;
    }
}

@media print, screen and (min-width:1215px){
    /*main*/
    .main.result {
        height: 500px;
    }
    .main_wrap h1 {
        padding-top: 100px;
        font-size: 52px;
    }
    /* article内 */
    .cautionary_note {
        background: #EEEEEE;
        border: 2px solid #06B6D4;
        padding: 25px;
        border-radius: 12px;
        font-size: 18px;
        line-height: 1.6;
    }
}


/************************************
◆治験への新たな取り組み
************************************/
/*main*/
.main.activities {
    width: 100%;
    height: 40vh;
    background: url("../../images/about/clinical-trials/activities_main.webp") no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

/*article*/
.box_wrap {
    margin: 20px 0;
}
.box_wrap .box, .box_column .box {
    width: 100%;
    border-radius: 12px;
    padding: 20px 15px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.box_wrap .box.blue {
    background: #06B6D4;
}
.box_wrap .box.orange {
    background: #FB923C;
}
.box_column .box.light-blue {
    background: #C2CEF0;
}
.box_column .box.navy {
    background: #1F3A8A;
}
.box_wrap .box h3, .box_column .box h3 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    color: #FFF;
}
.box_column .box.light-blue h3 {
    color: #000;
}
.box_wrap .box p, .box_column .box p {
    font-size: 16px;
    color: #FFF;
}
.box_column .box.light-blue p {
    color: #000;
}
.box_wrap .box .thumb_data_collection, .box_column .box .thumb_data_collection {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
}
.box_column .box .thumb_data_collection {
    display: flex;
    justify-content:center;
    align-items: center;
}
.box_column .box .thumb_data_collection .thumb_capture {
    width: 100px;
    text-align: center;
}
.box_column .box .thumb_data_collection .thumb_img {
    flex: 1;
}
.box_wrap .box p.thumb_capture, .box_column .box p.thumb_capture {
    font-size: 14px;
    font-weight: bold;
} 

@media print, screen and (min-width:640px){
    /*main*/
    .main.activities {
        height: 470px;
    }
    
    /*article*/
    .box_wrap {
        margin: 40px 0 20px;
    }
    .box_wrap .box, .box_column .box {
        padding: 30px 20px;
    }
    .box_wrap .box h3, .box_column .box h3 {
        font-size: 22px;
    }
    .box_wrap .box p, .box_column .box p {
        font-size: 16px;
    }
    .box_wrap .box .thumb_data_collection, .box_column .box .thumb_data_collection {
        width: 80%;
        margin: 0 auto;
        margin-top: 30px;
    }
}

@media print, screen and (min-width:768px){
    /*main*/
    .main.activities {
        height: 563px;
    }
    /*article*/
    .box_wrap {
        display: flex;
        justify-content: space-between;
        margin: 40px 0 20px;
    }
    .box_wrap .box {
        width: 48%;
        display: flex;
        flex-direction: column;
    }
    .box_wrap .box, .box_column .box {
        padding: 30px 30px;
    }
    .box_wrap .box h3, .box_column .box h3 {
        font-size: 24px;
    }
    .box_wrap .box p, .box_column .box p {
        font-size: 18px;
    }
    .box_wrap .box .thumb_data_collection {
        margin-top: auto;
        padding-top: 30px;
    }
    .box_column .box .thumb_data_collection {
        width: 350px;
        margin: 0 auto;
        margin-top: 30px;
    }
}

@media print, screen and (min-width:1215px){
    /*main*/
    .main.activities {
        height: 500px;
    }
    .box_wrap .box, .box_column .box {
        padding: 50px 50px;
    }
    .box_column .box {
        margin-top: 30px;
        margin-bottom: 40px;
    }
}