@charset "utf-8";
*{
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
}
img{
	display: block;
	width: 100%;
	height: auto;
}
body{
	margin: 0 auto;
}
.pc { display: block !important; }
.note { display: none !important; }
.sp { display: none !important; }


h1,h2{
	margin: 0;
	padding: 0;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.note { display: block !important; }
	.pc { display: none !important; }
    body .accordion_wrap {
        max-height: 300px;
    }

}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 765px) {
	.note { display: none !important; }
    .pc { display: none !important; }
    .sp { display: block !important; }

}
/* --------------------FV------------------ */
header{
	background-color: #64acd3;
}
.header_inner{
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.logo{
	width: 6%;
}
.header_right{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.head_tel{
	margin-right: 4%;
	display: block;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.fv_pc_wrap{
		background-image: none;
	}
	.header_right {
		width: 35%;
	}
	.header_inner {
		justify-content: space-between;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.header_right {
		width: 37%;
	}
	.header_inner {
		justify-content: space-between;
	}
}
@media only screen and (max-width: 765px) {
	.fv_pc_wrap{
		height: auto;
	}
	.header_inner{
		width: 100%;
		justify-content: space-between;
	}
	.header_right{
		width:80%;
	}
	.logo {
		width: 14%;
		margin-left: 2%;
	}
}
/* --------------------CTA------------------ */
.cta_wrap{
	margin: 6% 0 ;
}
.pc_cta_flex{
	display: flex;
	gap: 1%;
	justify-content: center;
    max-width: 1400px;
    margin: auto;
}
.cta_txt{
	padding-bottom: 1%;
	display: block;
	max-width: 650px;
	margin: 0 auto;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.cta_wrap{
		margin: 7% 0 ;
	}
	.cta_txt {
		max-width: 550px;
	}
	.pc_cta_flex {
		max-width: 850px;
		margin: 0 auto;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.pc_cta_flex {
		margin: 0 auto;
	}
	.cta_txt {
		padding-bottom: 2%;
		max-width: 450px;
	}
	.pc_cta_flex {
		max-width: 550px;
	}
}
@media only screen and (max-width: 765px) {
	.cta_txt{
		margin-bottom: 3%;
		display: block;
	}
	.cta_wrap{
		margin: 12% 5% ;
	}
	.cta{
		margin-bottom: 2%;
	}
	body .osusume .cta_wrap {
    border: 12px solid #73bbe3;
    margin: 0;
    padding: 11% 4%;
	}
}
.osusume .cta_wrap {
    border: 20px solid #64acd3;
    margin: 0;
    padding: 4% 4%;
}
/* --------------------メリット------------------ */
.merit_wrap{
	background-image: url(../img/merit_bg_pc.png);
	background-position: left top;
	background-repeat: no-repeat;
}
.merit_wrap02{
	padding: 6% 2% 7% 2%;
}
.merit_ttl{
	max-width: 700px;
	margin: 0 auto;
	margin-bottom: 4%;
}
.merit_inner{
	max-width: 1400px;
	margin: 0 auto;
}
 @media (min-width: 1000px) and (max-width: 1400px){
     .merit_wrap{
        	background-size: 50%;
     }
	.merit_ttl {
		max-width: 550px;
		margin-bottom: 4%;
	}
	.merit_inner {
		max-width: 1000px;
	}
}
@media (min-width: 766px) and (max-width: 999px){
     .merit_wrap{
        	background-size: 37%;
     }
	.merit_ttl {
		max-width: 350px;
		margin-bottom: 4%;
	}
	.merit_inner {
		max-width: 700px;
	}
}
@media only screen and (max-width: 765px) {
	.merit_wrap{
		background-size: 80%;
	}
	.merit_wrap02{
		padding: 12% 5%;
	}
.merit_ttl{
	width: 100%;
	margin-bottom: 10%;
}
    div .toggle-button, div .toggle-button02 {
        width: 40%;
    }
}

/* --------------------がん遺伝子治療のイメージ------------------ */


@media only screen and (max-width: 765px) {
	.image_wrap02{
		background-image: url(../img/image_bg_sp.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		padding: 10% 4% 11% 4%;
	}
	.image_ttl{
		width: 100%;
        margin-bottom: 10%;
		margin-top: 4%;
	}
}
.image_ttl{
	width: 100%;
}

/* --------------------おすすめ------------------ */
.osusume_wrap{
	background-image: url(../img/osusume_bg_pc.jpg);
	background-repeat: no-repeat;
	padding: 6% 2%;
}
.osusume_inner{
	max-width: 1400px;
	margin: 0 auto;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.osusume_inner {
		margin: 0 auto;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.osusume_inner {
		max-width: 650px;
	}
}
@media only screen and (max-width: 765px) {
	.osusume_wrap{
		background-image: url(../img/osusume_bg_sp.jpg);
		padding: 0 0 12%;
        background-position: bottom;
        background-size: cover;
	}
}
/* --------------------比較------------------ */
.comparison_wrap{
	background-color: #e9f8ff;
	position: relative;

}
.COMPARISON{
	position: absolute;
	width: 80%;
}
.comparison_wrap02{
	padding: 8% 2%;
}
.comparison_wrap03{
	background-color: #fff;
	padding: 5%;
	max-width: 1300px;
	margin: 0 auto;
}
.comparison_ttl{
	max-width: 250px;
	margin: 0 auto;
	margin-bottom: 5%;
}
.comparison_inner{
	max-width: 1300px;
	margin: 0 auto;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.comparison_wrap02{
		padding: 7% 2%;
	}
	.COMPARISON{
		width: 90%;
	}
	.comparison_inner {
		max-width: 1100px;
	}
	.comparison_wrap03{
		background-color: #fff;
		padding: 5%;
		max-width: 950px;
	}
	.comparison_ttl {
		max-width: 190px;
		margin-bottom: 6%;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.comparison_ttl {
		max-width: 120px;
	}
	.comparison_wrap03 {
		max-width: 600px;
	}
}
@media only screen and (max-width: 765px) {
 	.COMPARISON{
		width: 100%
	}
	.comparison_wrap02{
		padding: 15% 5%;
	}
	.comparison_wrap03{
		background-color: #fff;
        padding: 10% 7%;
	}
	.comparison_ttl{
		width: 45%;
		margin-bottom: 10%;
	}
}
/* --------------------流れ------------------ */
.flow_wrap{
	background-color: #7bc4ec;
	background-image: url(../img/FLOW.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 34%;
}
.flow_wrap02{
	padding: 7% 2%;
}
.flow_ttl{
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 3%;
}
.step_inner{
	max-width: 1350px;
	margin: 0 auto;
	margin-bottom: 3%;
}
/* ---スライダー--- */
.slider_wrap {
	display: flex;
	align-items: center;
	height: 300px;
	overflow: hidden;
	max-width: 1350px;
	margin: 0 auto;
	font-size: 0; 
  }
  .slideshow {
	display: flex;
	list-style:none;
  }
  .content {
	width: 400px;
	height: 400px;
  }
  .slideshow {
	display: flex;
	animation: loop-slide 20s infinite linear 1s both;
	padding: 0;
  }
  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }
 @media (min-width: 1000px) and (max-width: 1400px){
.flow_wrap{
   	background-size: 40%;
}
	.flow_wrap02{
		padding: 7% 2%;
	}
	.flow_ttl {
		max-width: 600px;
        margin-bottom: 5%;
	}
	.step_inner {
		max-width: 950px;
		margin-bottom: 4%;
	}
	.slider_wrap {
		height: 200px;
		max-width: 950px;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.flow_ttl {
		max-width: 400px;
		margin-bottom: 4%;
	}
	.step_inner {
		max-width: 700px;
	}
	.slider_wrap {
		height: 150px;
		max-width: 700px;
	}
	.content {
		width: 200px;
		height: 200px;
	}
}
@media only screen and (max-width: 765px) {
         .flow_wrap{
	background-size: 70%;
}
	.flow_wrap02{
		padding: 12% 0%;
	}
	.flow_ttl{
		width: 65%;
		margin-bottom: 10%;
	}
	.step_inner{
		width: 90%;
	}
	.slider_wrap {
		height: 130px;
		margin-top: 10%;
	  }
	.content {
		width: 130px;
		height: 130px;
	  }
}
/* --------------------院長紹介------------------ */
.doctor_wrap{
	background-color: #eefaff;
	padding: 6% 2%;
}
.doctor_ttl{
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 3%;
}
.doctor_inner{
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 3%;
}
.doctor_message{
	max-width: 1000px;
	margin: 0 auto;
}
 @media (min-width: 1000px) and (max-width: 1400px){
	.doctor_wrap{
		padding: 7% 2%;
	}
	.doctor_ttl {
		max-width: 380px;
		margin-bottom: 4%;
	}
	.doctor_inner {
		max-width: 750px;
		margin-bottom: 3%;
	}
	.doctor_message {
		max-width: 750px;
	}
}
@media (min-width: 766px) and (max-width: 999px){
	.doctor_ttl {
		max-width: 240px;
		margin-bottom: 4%;
	}
	.doctor_inner {
		max-width: 600px;
		margin-bottom: 4%;
	}
	.doctor_message {
		max-width: 600px;
	}
}
@media only screen and (max-width: 765px) {
	.doctor_wrap{
		padding: 12% 5%;
	}
	.doctor_ttl{
		width: 65%;
		margin-bottom: 10%;
	}
	.doctor_inner{
		margin-bottom: 10%;
	}
}
/* --------------------アクセス------------------ */
.access_ttlwrap{
	background-color: #64acd3;
	background-image: url(../img/ACCESS.png);
	background-position: left top;
	background-repeat: no-repeat;
}
.access_ttlwrap02{
	padding: 3% 0;
}
.access_ttl{
	max-width: 500px;
	margin: 0 auto;
}
.access_wrap{
	padding: 4% 2%;
}
.clinic_ttl{
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 3%;
}
.clinic_img{
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 3%;
}
.time{
	max-width: 400px;
	margin: 0 auto;
	margin-bottom: 4%;
}
.map_wrap{
	max-width: 1000px; 
    margin: 0 auto;  
    width: 100%;
}
.map_wrap iframe {
	width: 100%; 
    height: 400px;   
	max-width: 100%;
}
.map_txt{
	margin: 0 auto;
	max-width: 1000px;
	color: #5a5a5a;
	font-weight: bold;
}
.map_txt01{
	font-size: 25px;
}
.train{
	display: flex;
	align-items: flex-start;
}
.train p{
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
}
.metoro , .JR{
display: flex;
width: 50%;
}
.metoro_ttl{
	padding: 1% 2%;
	border: solid 1px;
	width: 20%;
	height: 20%;
	text-align: center;
	align-items: center;
}
.JR{
	align-items: center;
}
.JR_ttl{
	padding: 1% 2%;
	border: solid 1px;
	width: 20%;
	height: 20%;
	text-align: center;
	align-items: center;
}
 @media (min-width: 1000px) and (max-width: 1400px){
     	.access_ttlwrap{
		background-size:50%;
	}
	.access_wrap {
		padding: 6% 2% 7% 2%;
	}
	.access_ttl {
		max-width: 400px;
	}
	.clinic_ttl {
		max-width: 750px;
		margin-bottom: 4%;
	}
	.clinic_img {
		max-width: 750px;
		margin-bottom: 3%;
	}
	.time {
		max-width: 300px;
		margin-bottom: 4%;
	}
	.map_wrap {
		max-width: 750px;
	}
	.map_txt {
		max-width: 750px;
	}
	.map_txt01 {
		font-size: 23px;
	}
	.train p {
		font-size: 15px;
	}
	.metoro{
		margin-right: 2%;
	}
	.metoro_ttl {
		width: 22%;
	}
	
}
@media (min-width: 766px) and (max-width: 999px){
	.access_wrap{
		padding: 7% 5%;
	}
	.access_ttlwrap{
		background-size:40%;
	}
	.access_ttl {
		max-width: 320px;
	}
	.clinic_ttl {
		max-width: 500px;
		margin-bottom: 4%;
	}
	.clinic_img {
		max-width: 600px;
		margin-bottom: 4%;
	}
		.map_wrap iframe {
		height: 300px;   
	}
	.time {
		max-width: 250px;
		margin-bottom:6%;
	}
	.map_wrap {
		max-width: 600px;
	}
	.map_txt {
		max-width: 600px;
	}
	.map_txt01 {
		font-size: 18px;
	}
	.train p {
		font-size: 12px;
	}
	.metoro_ttl {
		font-size: 12px;
	}
	.JR_ttl{
	    	font-size: 12px;
	}
	.map_wrap iframe {
		height: 280px;   
	}
}
@media only screen and (max-width: 765px) {
	.access_ttlwrap{
		background-image: none;
	}
	.access_ttlwrap02{
		padding: 0;
	}
	.access_wrap{
		padding: 12% 5%;
	}
	
	.clinic_ttl{
		width: 100%;
		margin-bottom: 10%;
	}
	.clinic_img{
		margin-bottom: 6%;
	}
	.time{
		margin-bottom: 10%;
		width: 70%;
	}
	.map_wrap iframe {
		height: 200px;   
	}
	.map_txt01{
		font-size: 14px;
	}
	.train{
		display: block;
	}
	.train p{
		font-size: 13px;
	}
	.metoro , .JR{
	width: 100%;
	}
	.metoro_ttl{
        font-size: 12px;
	}
	.JR{
		align-items: center;
	}
	.JR_ttl{
        font-size: 12px;
	}
}

/* --------------------QA------------------ */
.qa_wrap{
	background-color: #f4f4f4;
	background-image: url(../img/Q&A.png);
	background-position: left top;
	background-repeat: no-repeat;
	border-top: solid 10px #64acd3;
}
.qa_wrap02{
	padding: 6% 2%;
}
.qa_ttl{
	max-width: 450px;
	margin: 0 auto;
	margin-bottom: 4%;
}

.accordion{
	max-width: 1000px;
	margin: 0 auto;
}
.accordion-content {
	display: none;
  }
  .accordion-header {
	background-color: #64acd3;
	padding: 3% 4%;
	margin: 10px 0 0;
	transition: background .3s ease;
	cursor: pointer;
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 23px;
	display: flex;
	align-items: center;
  }
  
  .accordion-header::before,
  .accordion-header::after{
	position:absolute;
	content:'';
	top:1px;
	right:20px;
	bottom:0;
	width:25px;
	height:2px;
	margin:auto;
	background:#fff;
  }
  .accordion-header::after{
	transform:rotate(-90deg);
	transition:transform 0.3s;
  }
  .accordion-header.active::after{transform:rotate(0deg);}
  
  .accordion-content {
	background-color: #FFF;
	padding: 3% 4%;
  }

  .accordion-header span::before{
	content:"";
	top: 2px;
	left: 0;
	color: #151E2F;
	font-size: 17px;
  }

  .Q , .A{
	width: 30px;
	margin-right: 25px;
  }
  .A{
    width: 35px;
    height: 35px;
	margin-top: 2%;
  }
  .accordion-content span::before{
	content:"";
	top: 3px;
	left: 0;
	color: #151E2F;
	font-size: 17px;
	font-size: 23px;
  }
  .accordion_a{
    display: flex;
    justify-content: flex-start;
    max-width: 90%;
	font-size: 18px;
    align-items: flex-start;
	color: #5a5a5a;
  }
   @media (min-width: 1000px) and (max-width: 1400px){
       .qa_wrap{
   	background-size: 33%;
}
	.qa_wrap02{
		padding: 7% 2%;
	}
	.qa_ttl {
		max-width: 350px;
		margin-bottom: 4%;
	}
	.accordion-header {
		padding: 2% 4%;
		margin: 10px 0 0;
		font-size: 19px;
	}
	.accordion {
		max-width: 750px;
	}
	.Q, .A {
		width: 26px;
	}
	.accordion_a {
		max-width: 97%;
		font-size: 16px;
	}
	.A {
		height: 26px;
	}
  }
  @media (min-width: 766px) and (max-width: 999px){
      
	.qa_wrap{
		background-size: 30%;
	}
	.qa_ttl {
		max-width:270px;
	}
	.qa_wrap02 {
		padding: 7% 2%;
	}
	.accordion {
		max-width: 600px;
	}
	.accordion-header {
		padding: 2% 4%;
		font-size: 16px;
	}
	.Q, .A {
		width: 22px;
		margin-right: 20px;
	}
	.accordion_a {
		font-size: 15px;
	}
	.A {
		width: 27px;
		height: 27px;
	}
  }
  @media only screen and (max-width: 765px) {
	.qa_wrap{
		background-size: 50%;
	}
	.qa_wrap02{
		padding: 12% 5%;
	}
	.qa_ttl{
		width: 80%;
		margin-bottom: 10%;
	}
	.accordion-header {
		padding: 3% 17% 3% 5%;
		margin: 10px 0 0;
		font-size: 14px;
		align-items: center;
	}
	.Q, .A {
		margin-right: 10px;
	}
	.Q{
		width: 21px;
	}
	.accordion_a {
		font-size: 14px;
		max-width: 100%;
	}
	.A {
		height: 23px;
		margin-top: 5%;
	}
	.accordion-header::before,
	.accordion-header::after{
	  width:23px;
	}
  }
  

  /* --------------------フッター------------------ */
  footer{
	background-color: #5da5cf;
	padding: 2% 2%;
  }
  .footer_inner{
	display: flex;
	justify-content: center;
	align-items: center;
  }
  footer a{
	text-align: center;
	display: block;
	color: #fff;
	font-size: 18px;
  }
  footer p{
	margin: 0;
  }
  .footer_logo{
    width: 100px;
    height: 100px;
  }
  .footer_txt{
	color: #fff;
	text-align: center;
	width: 35%;
	
  }
  .footer_txt01{
	font-size: 20px;
	font-weight: bold;
  }
  .footer_tel{
	font-size: 35px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1%;
	display: block;
	letter-spacing: 0.07em;
  }
  .time_ttl{
	padding: 0.5% 1%;
	font-size: 15px;
	border: solid 1px #fff;
	margin-right: 1.5%;
  }
  .footer_txt02{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1%;
  }
  .footer_txt03{
	font-size: 17px;
  }
   @media (min-width: 1000px) and (max-width: 1400px){
	.footer_txt01 {
		font-size: 16px;
	}
	.footer_tel {
		font-size: 30px;
	}
	.footer_txt03 {
		font-size: 12px;
	}
	.time_ttl {
		font-size: 13px;
	}
	.footer_logo {
		width: 80px;
		height: 80px;
	}
  }
  @media (min-width: 766px) and (max-width: 999px){
	.footer_txt01 {
		font-size: 15px;
	}
	.footer_txt {
		width: 50%;
	}
	.footer_tel {
		font-size: 25px;
	}
	.footer_txt03 {
		font-size: 12px;
	}
	.time_ttl {
		font-size: 12px;
	}
	.footer_logo {
		width: 70px;
		height: 70px;
	}
  }
  @media only screen and (max-width: 765px) {
	footer{
		padding: 6% 2%;
	}
	.footer_txt {
		width: 65%;
	}
	.footer_tel {
		font-size: 23px;
	}
	.footer_txt01 {
		font-size: 13px;
	}
	.footer_txt02 {
    width: 100%;
}
	.footer_txt03 {
		font-size: 10px;
		text-align: left;
	}
	.footer_logo {
		width: 70px;
		height: 70px;
	}
	.time_ttl {
		padding: 1% 2%;
		font-size: 8px;
		line-height: 1.1;
	}
	footer a{
		font-size: 15px;
	  }
}

/* --------------------運営者情報------------------ */

.policy_ttl{
	text-align: center;
    margin-top: 40px;
    padding: 15px;
}
.wrapper {
    position: relative;
    overflow: visible;
	padding: 5%;
	width: 700px;
	margin: 0 auto;
}
.min-table{
	margin-bottom: 8%;
}
table {
    margin: auto;
    border-collapse: collapse;
}
table tbody tr th, table tbody tr td {
    text-align: center;
}
td {
    border: 1px solid #ccc;
    padding: 10px 30px;
    font-size: 18px;
}
th {
    border: 1px solid #ccc;
    font-size: 18px;
    padding: 15px;
}
@media screen and (max-width: 765px) {
    .wrapper{
		width: auto;
	}
	.policy_ttl{
		font-size: 28px;
	}
	table tbody tr th, table tbody tr td {
		font-size: 15px;
	}
	.min-table{
		width: 100%;
	}
	table {
		width: 100%;
	}
	table td {
        position: relative;
        padding: 15px 0;
        margin: 0;
        font-size: 13px;
        vertical-align: top;
        border-right: 2px dotted #eee;
    }
}
 /* イメージのアコーディオン */
.toggle-button, .toggle-button02 {
    display: block;
    cursor: pointer;
    width: 15%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999;
    bottom: 4%;
}
.accordion_wrap {
    position: relative;
    overflow: hidden;
    max-height: 450px;
    transition: max-height 0.5s ease-in-out;
}
.accordion_wrap.expanded {
    max-height: 1000px;
}
.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    pointer-events: none;
    transition: opacity 0.3s;
}

.hide-overlay {
    opacity: 0;
}