@charset "utf-8";
/* CSS Document */
@media screen and (max-width:900px){
	
	html {
		font-size: 8px;
	}
	body {
		max-width: 900px;
	}
	.sp-only {
		display: block;
	}
	.pc-only {
		display: none;
	}
	
	
	/*header*/
	#header {
	padding: 2% 0 2% 2%;
}
	/*mainvisual*/
	.mainvisual {
		height: 80vh;
		background-size: cover;
		position: relative;
	}
	.slider02 {
		position:relative;
		z-index: -1;
		/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
		height: 80vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	}
	/*　背景画像設定　*/

	.slider-item01 {
		background:url("../img/mainvisual01.jpg");
	}

	.slider-item02 {
		background:url("../img/mainvisual02.jpg");
	}

	.slider-item03 {
		background:url("../img/mainvisual03.jpg");
	}

	.slider-item {
		width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
		height:80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
		background-repeat: no-repeat;/*背景画像をリピートしない*/
		background-position: center;/*背景画像の位置を中央に*/
		background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	}

	.catch-copy {
		width: 30%;
		position: absolute;
		bottom: 3%;
		right: 3%;
		/*width: 90%;
		right: 5%;
		bottom: 50%;
		transform: translateY(50%);
		padding-top: 2%;*/
	}
	.catch-copy h2 {
		text-align: center;
		font-size: 24px;
		letter-spacing: 2px;
		line-height: 2;
	}
	.catch-copy h2 span {
		font-size: 36px;
	}
	.mv-timetable {
		width: 80%;
	}
	
	/*news*/
	.ttl-sec01 {
		font-size: 26px;
	}
	.ttl-sec01 span {
		font-size: 16px;
	}
	#news .inner {
		width: 90%;
	}
	#news .inner dl {
		font-size: 16px;
	}
	#news .inner dl dt {
		width: 20%;
	}
	#news .inner dl dd {
		width: 80%;
	}
	.news_inner{
		display: block;
	}
	.news_left{
		width: 100%;
	}
	.news_right{
		width: 100%;
		margin-top: 50px;
	}

	/*greeting*/
	.ttl-greeting {
		font-size: 80px;
		letter-spacing: 5px;
		position: absolute;
		top: -40px;
		left: 10px;
	}
	#greeting .inner {
		width: 90%;
		flex-direction: column-reverse;
		gap:5rem;
	}
	#greeting .inner .txt {
		width: 100%;
	}
	.greeting-b {
		font-size: 24px;
		text-align: center;
	}
	.greeting-s {
		font-size: 16px;
	}
	.greeting-name {
		font-size: 28px;
		text-align: center;
	}
	.greeting-name .gn-s {
		font-size: 18px;
	}
	.greeting-name .en {
		font-size: 18px;
	}
	#greeting .inner .img {
		width: 55%;
	}
	.g-img02 {
		display: none;
	}
	.g-img03 {
		display: none;
	}
	#greeting .page-link {
		margin-top: 3rem;
		margin-left: auto;
		margin-right: auto;
	}


	/*medical-info*/
	.ttl-mi::before {
		content: "MEDICAL";
		font-size: 120px;
		letter-spacing: 8px;
	}
	#medical-info .ttl03{
		width: calc(600 / 750* 100vw);
        height: auto;
        background: url(../img/medical_catch_deco_l.png.webp),url(../img/medical_catch_deco_r.png.webp);
        background-repeat: no-repeat, no-repeat;
        background-position: left calc(10 / 750* 100vw), right calc(10 / 750* 100vw);
        background-size: calc(29 / 750* 100vw), calc(29 / 750* 100vw);
        font-size: 2.5rem;
        letter-spacing: 0.1em;
        line-height: 150%;
        margin: 50px auto;
		padding: 0 15px;
	}
	#medical-info .ttl03:after{
		content: "";
		display: block;
		background: url(../img/medical-staff_bg.png) no-repeat center / contain;
		position: absolute;
		width: 150px;
		height: 150px;
		margin-top: 30px;
		right: 42%;
        top: 180px
	}
	.medical-top {
		margin-top: 8rem;
		padding: 5rem 0;
	}
	.medical-top .inner {
		justify-content: center;
		gap:5rem;
		align-items: center;
	}
	.medical-top .inner .left p {
		font-size: 22px;
	}
	.medical-top .inner .right {
		width: 500px;
	}
	.medical-top .inner .right p {
		font-size: 15px;
	}
	.mi-mid-wrap {
		/*width: 90%;*/
		margin: auto;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 200px;
	}
	.mi-mid-wrap .item {
		width: calc(90% / 2);
		margin-bottom: 30px;
	}
	.mi-mid-wrap .item:after {
		border-width: 0 0 calc(100 / 1920* 100vw) calc(100 / 1920* 100vw);
	}
	.mi-mid-img {
		width: 100%;
	}
	.mi-mid-ttl {
		font-size: 30px;
	}
	.mi-mid-txt {
		width: 95%;
		font-size: 15px;
		text-align: center;
	}
	.more-link {
		width: 60%;
	}
	.mi-bot-wrap {
		margin: 5rem auto;
		width: 98%;
		justify-content: center;
		gap: 3rem;
	}
	.mi-bot-wrap .item {
		width: calc(80% / 3);
		margin-bottom: 2rem;
		padding: 30px 0;
    }
	.mi-bot-wrap .item:after {
		border-width: 0 0 calc(100 / 1920* 100vw) calc(100 / 1920* 100vw);
	}
	.mi-bot-img {
		position: relative;
	}
	/*.mi-bot-img img {
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}*/
/*	.mi-bot-img::before {
		content: "";
		width: 100%;
		height: 100%;
		background: #F3F0E7;
		position: absolute;
		top: -10px;
		left: 10px;
		z-index: -1;
	}*/
	.mi-bot-ttl {
		font-size: 22px;
		text-align: center;
		letter-spacing: 2px;
		margin-top: 2rem;
	}
	.mi-bot-ttl span {
		font-size: 15px;
		letter-spacing: 1px;
		margin-left: 1rem;
	}
	.mi-bot-txt {
		width: 90%;
		margin: 1.5rem auto;
		font-size: 16px;
		line-height: 2;
	}

	
	/*consept*/
	#consept .inner {
		margin-top: 10rem;
		flex-direction: column-reverse;
		gap: 5rem;
	}
	#consept .inner .left {
		width: 100%;
	}
	#consept .inner .right {
		width: 95%;
		margin-left: auto;
		padding: 5rem 0;
		box-sizing: border-box;
		position: relative;
	}
	#consept .inner .right::before {
		content: "";
		width: 160px;
		height: 400px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		top: 0;
		right: 0;
	}
	#consept .inner .right::after {
		content: "";
		width: 160px;
		height: 400px;
		background: url("../img/deco04.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.ttl-consept {
		font-size: 50px;
		letter-spacing: 5px;
	}
	.consept-b {
		font-size: 28px;
		line-height: 2;
		margin: 2rem auto;
	}
	.consept-s {
		width: 85%;
		font-size: 16px;
		line-height: 2;
	}

	/*feature*/

	.feature_01 .feature_txt {
  width: calc(800 / 900* 100vw);
  margin: 0 auto;
}
.ttl-feature {
  background: url("../img/feature_ttl_bg_sp.png") no-repeat center / cover;
  padding: 100px 3%;
}
.feature_wrap4-5 .feature_txt {
  width: calc(600 / 1280* 100vw);
  line-height: 1.8;
  margin: auto;
}
    .feature_img {
  background: url("../img/feature_img_sp.png") no-repeat center / 100%;
    background-attachment: scroll;
  height: calc(700 / 1920* 100vw);
}
	/*clean*/
	#clean h5 {
		font-size: 22px;
	}
	#clean .en{
		font-size: 3.5rem;
		margin-bottom: 30px;
	}
	.clean-wrap {
		width: 85%;
	}
	.clean-wrap img {
		width: 28%;
		margin-top: 30px;
	}
	#clean p {
		width: 85%;
		font-size: 16px;
	}


	/*flow*/
	.ttl-flow {
		position: relative;
	}
	.ttl-flow::before {
		content: "FLOW";
		font-size: 100px;
	}
	#flow .inner {
		margin: 10rem auto 0 auto;
	}
	.flow-con {
		padding: 5rem 0;
	}
	.flow-con p {
		width: 95%;
		margin: 3rem auto 0 auto;
	}
	.flow-ttl {
		font-size: 20px;
	}
	.flow-txt {
		font-size: 15px;
		line-height: 2;
	}

	/*tabの形状*/
	.tab{
		justify-content: center;
		gap:3rem;
	}
	.tab li {
		width: 200px;
		padding: 3rem 0;
		background: #fff;
	}
	.tab li a{
		display: block;
		text-align: center;
		font-size: 16px;
		letter-spacing: 2px;
	}
	.tab li:hover
	.tab li:active {
		background: #C5B17A;
	}

	/*エリアの表示非表示と形状*/
	.area {
		display: none;/*はじめは非表示*/
		opacity: 0;/*透過0*/
		width: 90%;
		margin: auto;
	}

	/*areaにis-activeというクラスがついた時の形状*/
	.area.is-active {
			display: block;/*表示*/
			animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
			animation-duration: 2s;
			animation-fill-mode: forwards;
	}

	


	/*--- スライドショー ---*/
	#slideshow {
		padding: 5rem 0;
	}
	.slider li.mt50 {
		margin-top: 5rem;
	}
	
	
	/*recruit*/
	#recruit::before {
		content: "";
		width: 150px;
		height: 150px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		top: 5rem;
		right: 0;
		z-index: -1;
	}
	#recruit::after {
		content: "";
		width: 150px;
		height: 150px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		bottom: 5rem;
		left: 0;
		z-index: -2;
	}
	.ttl-recruit {
		font-size: 40px;
		letter-spacing: 8px;
	}
	.ttl-recruit span {
		font-size: 22px;
	}
	#recruit .inner {
		width: 95%;
	}
	#recruit .inner::before {
		content: "";
		width: 100%;
		height: 120%;
		background: url("../img/bg-recruit.png");
		background-size: cover;
		opacity: 0.7;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: -1;
	}
	.rec-txt {
		font-size: 16px;
	}
	.rec-point {
		width: 80%;
		margin: 3rem auto;
		padding: 3rem 0;
		border-radius: 2rem;
		position: relative;
	}
	.ttl-rec-p {
		font-size: 20px;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.rec-point ul {
		width: 90%;
		margin: auto;
		justify-content: space-between;
	}
	.rec-point ul li {
		width: 40%;
		padding: 2rem 0 1rem 3rem;
		font-size: 15px;
		position: relative;
	}
	.rec-point ul li::before {
		content: "";
		width: 18px;
		height: 18px;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.rec-img {
		width: 80%;
		margin: auto;
		position: relative;
	}
	.rec-img::before {
		content: "";
		width: 15px;
		height: 100%;
		background: #C5B17A;
		position: absolute;
		top: 5px;
		right: -15px;
	}
	.rec-img::after {
		content: "";
		width: 100%;
		height: 5px;
		background: #C5B17A;
		position: absolute;
		bottom: -5px;
		right: -15px;
	}


	/*感染症対策*/
	#covid19 {
		padding: 5rem 0;
	}
	.accordion-001 {
		max-width: 90%;
		margin: 0 auto;	
	}
	.accordion-001 summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 5rem 0 ;
		text-align: center;
		box-sizing: border-box;
		margin: 0 auto;
		font-size: 20px;
		cursor: pointer;
	}

	.accordion-001 summary::-webkit-details-marker {
			display: none;
	}

	.accordion-001 summary::after {
		transform: translateY(-15%) rotate(45deg);
		 width: 7px;
		 height: 7px;
		 margin-left: 10px;
		 border-bottom: 3px solid #9D8640;
		 border-right: 3px solid #9D8640;
		 content: '';
		 transition: transform .3s;
	}

	.accordion-001[open] summary::after {
		transform: rotate(225deg);
	}

	.accordion-open {
		transform: translateY(-10px);
		opacity: 1;
		margin: 0;
		padding: 1em 2em 2em 2em;
		transition: transform .5s, opacity .5s;
		width: 100%;
	}

	.accordion-open[open] {
			transform: none;
			opacity: 1;
	}
	.covid19-flex {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
	}
	.covid19-list {
		width: 30%;
		margin: 0 auto;
		padding: 30px 0;
		text-align: center;
	}
	.covid19-list img {
		width: 80%;
		margin: 0 auto;
	}
	.covid19-list span {
		font-size: 16px;
	}
	
	
	/*footer*/
	#footer {
		margin-bottom: 60px;
	}
	.foot-top .inner {
		width: 90%;
		flex-direction: column;
		gap:3rem;
	}
	.foot-top .inner .left,
	.foot-top .inner .right {
		width: 100%;
	}
	.foot-logo {
		width: 280px;
		margin: auto;
	}
	.foot-adress {
		font-size: 16px;
	}
	.foot-bnr {
		align-items: center;
		justify-content: center;
	}
	.foot-tel {
		width: 250px;
	}
	.foot-web {
		width: 200px;
	}
	.foot-access {
		width: 80%;
		margin: auto;
	}
	.ttl-f-access {
		font-size: 26px;
		letter-spacing: 3px;
		position: absolute;
		top: -15px;
		left: 10px;
	}
	.fa-in {
		width: 70%;
		margin: 2rem auto 0 auto;
	}
	.fa-in-ttl {
		font-size: 17px;
	}
	.fa-in ul {
		font-size: 14px;
	}
	.fa-in ul li {
		list-style: disc;
		list-style-position: inside;
	}
	.foot-timetable {
		width: 95%;
	}
	.foot-card {
		width: 85%;
		margin: auto;
	}
	.foot-card p {
		text-align: center;
		font-size: 14px;
	}
	.foot-map {
		width: 100%;
	}
	.foot-map iframe {
		width: 100%;
	}
	
	
	/*--- 下層 ---*/
	/*mainvisual*/
	.s-mainvisual {
		height: 28vh;
	}
    .s-mainvisual02 {
        height: 28vh;
    }
	.page-ttl {
		width: 90%;
		position: absolute;
		bottom: 130px;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-ttl h2 {
		font-size: 35px;
		position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        height: 100%;
		letter-spacing: 1px;
	}
	.page-ttl h2 span {
		font-size: 20px;
	}
	.sec-ttl {
		width: 95%;
		height: 100px;
		padding-top: 3.9rem;
		box-sizing: border-box;
		position: relative;
	}
	.sec-ttl h4 {
		text-align: center;
		font-size: 30px;
	}
	.sec-ttl::before {
		content: "";
		border-top: 80px solid rgba(255, 255, 255, 0.50);
		border-left: 160px solid transparent;
		position: absolute;
		top: 0;
		right: 0;
	}
	.sec-ttl::after {
		content: "";
		border-bottom: 80px solid rgba(255, 255, 255, 0.50);
		border-right: 160px solid transparent;
		position: absolute;
		bottom: 0;
		left: 0;
	}


	/*clinic*/
	.policy-img {
		width: 90%;
	}
	.policy-img::before {
		width: 100px;
		height: 100px;
		top: -20px;
		right: -30px;
		z-index: -1;
	}
	.policy-img::after {
		width: 100px;
		height: 100px;
		bottom: -20px;
		left: -30px;
		z-index: -1;
	}
	.ttl-policy {
		letter-spacing: 10px;
		font-size: 80px;
		bottom: -50px;
	}
	.policy-index {
		width: 90%;
	}
	.policy-txt-b {
		font-size: 20px;
	}
	.policy-txt-s {
		font-size: 15px;
	}
	.CT_img_wrap{
	flex-direction: column;
	gap: 20px;
	}
	.CT_img{
	width: 100%;
	}

	.facility-wrap {
		width: 95%;
	}
	.facility-wrap ul {
		justify-content: space-between;
		align-items: flex-start
	}
	.facility-wrap ul li {
		width: 48%;
	}
	.facility-name p {
		font-size: 20px;
	}

	.qa-wrap {
		width: 95%;
	}
	.accordion-006 summary {
			font-size: 16px;
	}
	.accordion-006 p {
			font-size: 14px;
	}

	
	/*staff*/
	#doctor-intro .inner {
		width: 95%;
		flex-direction: column-reverse;
		gap:5rem;
	}
	#doctor-intro .inner .left {
		width: 100%;
	}
	.doc-i-name {
		width: 80%;
		margin: auto;
	}
	.doc-i-name p {
		text-align: center;
		font-size: 30px;
	}
	.doc-i-name p .dn-l {
		font-size: 18px;
	}
	.doc-i-name p .en {
		font-size: 16px;
	}
	.doc-i-txt {
		width: 90%;
		margin: 2rem auto;
		font-size: 15px;
	}
	.career {
		width: 90%;
		margin: auto;
	}
	.career p {
		font-size: 17px;
	}
	.career dl {
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
	}
	.career dl dt {
		width: 25%;
		padding-bottom: 1rem;
	}
	.career dl dd {
		width: 75%;
		padding-bottom: 1rem;
	}
	#doctor-intro .inner .right {
		width: 70%;
		margin: auto;
	}

	.staff-wrap {
		width: 95%;
		margin: 5rem auto;
	}
	.staff-wrap ul {
		gap: 2%;
		align-items: flex-start;
	}
	.staff-wrap ul li {
		width: 48%;
		margin-bottom: 3.5rem;
	}
	.staff-name {
		font-size: 18px;
	}

	
	
	
	/*access*/
	#basic-info .inner {
		width: 95%;
		margin: 5rem auto;
		justify-content: space-between;
		align-items: center;
	}
	#basic-info .inner .left {
		width: 45%;
	}
	#basic-info .inner .right {
		width: 52%;
	}
	#basic-info .inner .right table {
		width: 100%;
		font-size: 15px;
	}
	#basic-info .inner .right table th {
		width: 30%;
		text-align: center;
	}
	#basic-info .inner .right table td {
		width: 70%;
	}
	.access-timetable {
		width: 90%;
        /*display: flex;*/
	}
	.access-map {
		width: 95%;
	}
	.access-map iframe {
		width: 100%;
	}
	.access-con {
		width: 95%;
	}
	.ttl-access-con {
		font-size: 30px;
		letter-spacing: 5px;
		top: -20px;
	}
	.access-con .inner {
		width: 95%;
	}
	.access-con .inner .item {
		width: 48%;
	}
	.ttl-a-tra {
		font-size: 18px;
		padding-left: 45px;
	}
	.ttl-a-tra::before {
		content: "";
		width: 40px;
		height: 40px;
		background: url("../img/icon-tra.png");
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.access-con .inner .item ul {
		flex-direction: column;
		gap:1.5rem;
		font-size: 15px;
	}

	
	/*recruit*/
	.rec-in-con {
		width: 95%;
	}
	.rec-in-con::before {
		content: "";
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 5rem;
		left: -20px;
		z-index: -2;
	}
	.rec-in-con::after {
		content: "";
		width: 50px;
		height: 50px;
		top: 5rem;
		right: -20px;
		z-index: -2;
	}
	.rec-in-img {
		width: 60%;
	}
	.rec-in-txt {
		width: 95%;
		font-size: 15px;
	}
	
	
	
	
	
	
	
	
	
	
	#sp-btn {
		position: fixed;
		bottom: 0;
		left: 50%;
		z-index: 980;
    width: 100%;
		transform: translateX(-50%);
	}
	#sp-btn ul {
		justify-content: center;
    max-width: 900px;
    padding-bottom: 0;
    margin: 0 auto;
    position: relative;
	}
	#sp-btn .type1 ul::before {
		background: rgba(76, 190, 227, 0.7);
	}
	#sp-btn ul::before {
		content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
		background:#a88e6d;
		backdrop-filter: blur(2px);
	}
	#sp-btn ul li {
		width: calc(100% / 4);
    margin: 0;
    padding: 10px 0 6px;
    text-align: center;
    line-height: 1.2;
    position: relative;
	}
	#sp-btn ul li a {
		display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
		text-align: center;
	}
	#sp-btn ul li i {
		font-size: 3.6rem;
    font-family: "Font Awesome 5 Free";
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
		text-align: center;
	}
	#sp-btn ul li span {
		display: block;
    font-size: 1.8rem;
    color: #fff;
		text-align: center;
	}
	
}
@media screen and (max-width:480px) {
     .ttl-feature {
    background: url("../img/feature_ttl_bg_sp.png") no-repeat center / cover;
    padding: 40px 3%;
  }
    .feature_num.num01 {
  top: calc(-40 / 480* 100vw);
  left: 0;
  right: 0;
}
    .feature_img_box {
  width: 100%;
}
    .feature_txt_box {
  width: 100%;
}
    .feature_wrap03 .flex
    {
        flex-wrap: wrap;
    }
    .feature_wrap03 ul.flex
    {
        justify-content: center;
    }
    .feature_wrap03 ul.flex li {
  width: calc((100% - 30px) / 2);
}
    .feature_wrap4-5 .flex
    {
        flex-wrap: wrap;
    }
    .feature04_half, .feature05_half {
  width: 100%;
}
    .feature_wrap4-5 .feature_txt {
    width: calc(900 / 980* 100vw);
    line-height: 1.8;
    margin: auto;
  }
}


@media screen and (max-width:430px) {
	
	html {
		font-size: 6px;
	}
	body {
		max-width: 430px;
	}
	.spbr {
		display: block;
	}
	.head-logo {
		width: 250px;
	}
	
	
	/*mainvisual*/
	.mainvisual {
		height: 90vh;
	}
	.slider02 {
		position:relative;
		z-index: -1;
		/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
		height: 90vh;
	}

	.slider-item {
		width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
		height:90vh;
		background-repeat: no-repeat;/*背景画像をリピートしない*/
		background-position: center;/*背景画像の位置を中央に*/
		background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	}
	.slider-item01 {
		background:url("../img/sp_mainvisual01.jpg") no-repeat center / cover;
	}

	.slider-item02 {
		background:url("../img/sp_mainvisual02.jpg") no-repeat center / cover;
	}

	.slider-item03 {
		background:url("../img/sp_mainvisual03.jpg") no-repeat center / cover;
	}
	.slider-item04 {
		background:url("../img/sp_mainvisual04.jpg") no-repeat center / cover;
	}
	.catch-copy {
		width: 40%;
		position: absolute;
		bottom: 3%;
		right: 3%;
	}
	.catch-copy h2 {
		width: 30%;
		position: absolute;
		bottom: 3%;
		right: 3%;
	}
	.catch-copy h2 span {
		font-size: 26px;
	}
	.mv-timetable {
		width: 100%;
	}
	
	/*news*/
	.ttl-sec01 {
		font-size: 24px;
	}
	.ttl-sec01 span {
		font-size: 14px;
	}
	#news .inner {
		width: 95%;
	}
	#news .inner dl {
		font-size: 16px;
		flex-direction: column;
	}
	#news .inner dl dt {
		width: 100%;
	}
	#news .inner dl dd {
		width: 100%;
	}


	/*greeting*/
	.ttl-greeting {
		font-size: 50px;
		letter-spacing: 5px;
		position: absolute;
		top: -25px;
		left: 10px;
	}
	#greeting .inner {
		width: 95%;
	}
	#greeting .inner .txt {
		width: 100%;
	}
	.greeting-b {
		font-size: 18px;
		text-align: center;
	}
	.greeting-s {
		font-size: 14px;
	}
	.greeting-name {
		font-size: 28px;
		text-align: center;
	}
	.greeting-name .gn-s {
		font-size: 18px;
	}
	.greeting-name .en {
		font-size: 18px;
	}
	#greeting .inner .img {
		width: 75%;
	}
	.g-img02 {
		display: none;
	}
	.g-img03 {
		display: none;
	}
	#greeting .page-link {
		margin-top: 3rem;
		margin-left: auto;
		margin-right: auto;
	}


	/*medical-info*/
	.ttl-mi::before {
		content: "MEDICAL";
		font-size: 60px;
	}
	#medical-info .ttl03:after{
		content: "";
		display: block;
		background: url(../img/medical-staff_bg.png) no-repeat center / contain;
		position: absolute;
		width: 150px;
		height: 150px;
		margin-top: 30px;
		right: 30%;
        top: 150px;
	}
	.medical-top {
		margin-top: 8rem;
		padding: 5rem 0;
	}
	.medical-top .inner {
		flex-direction: column;
		gap:3rem;
		align-items: center;
	}
	.medical-top .inner .left p {
		font-size: 18px;
		writing-mode: horizontal-tb;
		text-align: center;
	}
	.medical-top .inner .right {
		width: 90%;
	}
	.medical-top .inner .right p {
		font-size: 14px;
	}
	.mi-mid-wrap {
		width: 100%;
		margin: auto;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 200px;
	}
	.mi-mid-wrap .item {
		width: calc(85% / 2);
		margin: 0 auto;
	}
	.mi-mid-wrap .item:after {
		border-width: 0 0 calc(100 / 1920* 100vw) calc(100 / 1920* 100vw);
	}
	.mi-mid-img {
		width: 100%;
	}
	.mi-mid-ttl {
		font-size: 20px;
	}
	.mi-mid-txt {
		width: 95%;
		font-size: 16px;
		text-align: center;
	}
	.more-link {
		width: 60%;
	}
	.mi-bot-wrap {
		margin: 5rem auto;
		width: 98%;
		justify-content: center;
		gap: 3rem;
	}
	.mi-bot-wrap .item {
		width: calc(80% / 3);
		margin-bottom: 3rem;
	}
	.mi-bot-wrap .item:after {
		border-width: 0 0 calc(100 / 1920* 100vw) calc(100 / 1920* 100vw);
	}
	.mi-bot-img {
		position: relative;
	}
	.mi-bot-img::before {
		top: -5px;
		left: 5px;
		z-index: -1;
	}
	.mi-bot-ttl {
		font-size: 18px;
	}
	.mi-bot-ttl span {
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 1rem;
	}
	.mi-bot-txt {
		width: 90%;
		margin: 1.5rem auto;
		font-size: 14px;
		line-height: 2;
	}
	
	/*consept*/
	#consept .inner {
		margin-top: 10rem;
		flex-direction: column-reverse;
		gap: 5rem;
	}
	#consept .inner .left {
		width: 100%;
	}
	#consept .inner .right {
		width: 98%;
		margin-left: auto;
		padding: 5rem 0;
		box-sizing: border-box;
		position: relative;
	}
	#consept .inner .right::before {
		content: "";
		width: 160px;
		height: 400px;
		background: url("../img/deco03.png");
		background-size: cover;
		position: absolute;
		top: 0;
		right: 0;
	}
	#consept .inner .right::after {
		content: "";
		width: 160px;
		height: 400px;
		background: url("../img/deco04.png");
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.ttl-consept {
		font-size: 36px;
	}
	.consept-b {
		font-size: 18px;
		line-height: 2;
		margin: 2rem auto;
	}
	.consept-s {
		width: 90%;
		font-size: 14px;
		line-height: 2;
	}

	/*feature*/
	#feature {
		margin: 50px auto 0 auto;
		position: relative;
		padding-top: 5rem
	}
    .feature_01 .feature_txt {
  width: calc(800 / 900* 100vw);
  margin: 0 auto;
}


	/*clean*/
	#clean h5 {
		font-size: 18px;
	}
	.clean-wrap {
		width: 95%;
	}
	.clean-wrap img {
		width: 30%;
	}
	#clean p {
		width: 90%;
		font-size: 14px;
	}


	/*flow*/
	.ttl-flow {
		position: relative;
	}
	.ttl-flow::before {
		content: "FLOW";
		font-size: 60px;
	}
	#flow .inner {
		margin: 10rem auto 0 auto;
	}
	.flow-con {
		padding: 5rem 0;
	}
	.flow-con p {
		width: 95%;
		margin: 3rem auto 0 auto;
	}
	.flow-ttl {
		font-size: 18px;
	}
	.flow-txt {
		font-size: 14px;
		line-height: 2;
	}

	/*tabの形状*/
	.tab{
		justify-content: center;
		gap:3rem;
	}
	.tab li {
		width: 180px;
		padding: 3rem 0;
		background: #fff;
	}
	.tab li a{
		display: block;
		text-align: center;
		font-size: 14px;
	}

	/*エリアの表示非表示と形状*/
	.area {
		display: none;/*はじめは非表示*/
		opacity: 0;/*透過0*/
		width: 90%;
		margin: auto;
	}

	/*areaにis-activeというクラスがついた時の形状*/
	.area.is-active {
			display: block;/*表示*/
			animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
			animation-duration: 2s;
			animation-fill-mode: forwards;
	}

	


	/*--- スライドショー ---*/
	#slideshow {
		padding: 5rem 0;
	}
	.slider li.mt50 {
		margin-top: 5rem;
	}
	
	
	/*recruit*/
	#recruit::before {
		content: "";
		width: 80px;
		height: 80px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		top: 5rem;
		right: 0;
		z-index: -1;
	}
	#recruit::after {
		content: "";
		width: 80px;
		height: 80px;
		background: url("../img/deco02.png");
		background-size: cover;
		position: absolute;
		bottom: 5rem;
		left: 0;
		z-index: -2;
	}
	.ttl-recruit {
		font-size: 28px;
		letter-spacing: 5px;
	}
	.ttl-recruit span {
		font-size: 18px;
	}
	#recruit .inner {
		width: 95%;
	}
	#recruit .inner::before {
		content: "";
		width: 100%;
		height: 120%;
		background: url("../img/bg-recruit.png");
		background-size: cover;
		opacity: 0.7;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: -1;
	}
	.rec-txt {
		font-size: 14px;
	}
	.rec-point {
		width: 90%;
		margin: 3rem auto;
		padding: 3rem 0;
		border-radius: 2rem;
		position: relative;
	}
	.ttl-rec-p {
		width: 100%;
		font-size: 16px;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
	}
	.rec-point ul {
		width: 85%;
		margin: auto;
		flex-direction: column;
		gap: 2rem;
	}
	.rec-point ul li {
		width: 100%;
		padding: 0 0 0 20px;
		box-sizing: border-box;
		font-size: 14px;
		position: relative;
	}
	.rec-point ul li::before {
		content: "";
		width: 16px;
		height: 16px;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.rec-img {
		width: 80%;
		margin: auto;
		position: relative;
	}
	.rec-img::before {
		content: "";
		width: 15px;
		height: 100%;
		background: #C5B17A;
		position: absolute;
		top: 5px;
		right: -15px;
	}
	.rec-img::after {
		content: "";
		width: 100%;
		height: 5px;
		background: #C5B17A;
		position: absolute;
		bottom: -5px;
		right: -15px;
	}


	/*感染症対策*/
	#covid19 {
		padding: 5rem 0;
	}
	.accordion-001 {
		max-width: 90%;
		margin: 0 auto;	
	}
	.accordion-001 summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 5rem 0 ;
		text-align: center;
		box-sizing: border-box;
		margin: 0 auto;
		font-size: 20px;
		cursor: pointer;
	}

	.accordion-001 summary::-webkit-details-marker {
			display: none;
	}

	.accordion-001 summary::after {
		transform: translateY(-15%) rotate(45deg);
		 width: 7px;
		 height: 7px;
		 margin-left: 10px;
		 border-bottom: 3px solid #9D8640;
		 border-right: 3px solid #9D8640;
		 content: '';
		 transition: transform .3s;
	}

	.accordion-001[open] summary::after {
		transform: rotate(225deg);
	}

	.accordion-open {
		transform: translateY(-10px);
		opacity: 1;
		margin: 0;
		padding: 1em 2em 2em 2em;
		transition: transform .5s, opacity .5s;
		width: 100%;
	}

	.accordion-open[open] {
			transform: none;
			opacity: 1;
	}
	.covid19-flex {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
	}
	.covid19-list {
		width: 45%;
		margin: 0 auto;
		padding: 30px 0;
		text-align: center;
	}
	.covid19-list img {
		width: 80%;
		margin: 0 auto;
	}
	.covid19-list span {
		font-size: 14px;
	}
	
	
	/*footer*/
	#footer {
		margin-bottom: 60px;
	}
	.foot-top .inner {
		width: 95%;
		flex-direction: column;
		gap:3rem;
	}
	.foot-top .inner .left,
	.foot-top .inner .right {
		width: 100%;
	}
	.foot-logo {
		width: 280px;
		margin: auto;
	}
	.foot-adress {
		font-size: 14px;
	}
	.foot-bnr {
		flex-direction: column;
	}
	.foot-tel {
		width: 250px;
		margin: auto;
	}
	.foot-web {
		width: 200px;
		margin: auto;
	}
	.foot-access {
		width: 95%;
		margin: auto;
	}
	.ttl-f-access {
		font-size: 18px;
		letter-spacing: 3px;
		position: absolute;
		top: -9px;
		left: 10px;
	}
	.fa-in {
		width: 70%;
		margin: 2rem auto 0 auto;
	}
	.fa-in-ttl {
		font-size: 16px;
	}
	.fa-in ul {
		font-size: 14px;
	}
	.fa-in ul li {
		list-style: disc;
		list-style-position: inside;
	}
	.foot-timetable {
		width: 99%;
	}
	.foot-card {
		width: 90%;
		margin: auto;
	}
	.foot-card p {
		text-align: center;
		font-size: 14px;
	}
	.foot-map {
		width: 100%;
	}
	.foot-map iframe {
		width: 100%;
	}
	
	
	/*--- 下層 ---*/
	/*mainvisual*/
	.s-mainvisual {
		height: 28vh;
	}
    .s-mainvisual02 {
		height: 28vh;
	}
	.page-ttl {
		width: 95%;
		bottom: 120px;
	}
    .s-mainvisual02 .page-ttl {
    width: 95%;
    bottom: 120px;
  }
	.page-ttl h2 {
		font-size: 25px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		height: 100%;
	}
	.page-ttl h2 span {
		font-size: 15px;
	}
	.sec-ttl {
		width: 95%;
		height: 80px;
		padding-top: 4.2rem;
		box-sizing: border-box;
		position: relative;
	}
	.sec-ttl h4 {
		text-align: center;
		font-size: 24px;
	}
	.sec-ttl::before {
		content: "";
		border-top: 60px solid rgba(255, 255, 255, 0.50);
		border-left: 120px solid transparent;
		position: absolute;
		top: 0;
		right: 0;
	}
	.sec-ttl::after {
		content: "";
		border-bottom: 60px solid rgba(255, 255, 255, 0.50);
		border-right: 120px solid transparent;
		position: absolute;
		bottom: 0;
		left: 0;
	}


	/*clinic*/
	.policy-img {
		width: 90%;
	}
	.policy-img::before {
		width: 100px;
		height: 100px;
		top: -10px;
		right: -10px;
		z-index: -1;
	}
	.policy-img::after {
		width: 100px;
		height: 100px;
		bottom: -10px;
		left: -10px;
		z-index: -1;
	}
	.ttl-policy {
		letter-spacing: 10px;
		font-size: 60px;
		bottom: -40px;
	}
	.policy-index {
		width: 95%;
	}
	.policy-txt-b {
		font-size: 18px;
	}
	.policy-txt-s {
		font-size: 14px;
	}

	.facility-wrap {
		width: 90%;
	}
	.facility-wrap ul {
		justify-content: space-between;
		align-items: flex-start;
	}
	.facility-wrap ul li {
		width: 100%;
	}
	.facility-name p {
		font-size: 20px;
	}

	
	
	/*staff*/
	#doctor-intro .inner {
		width: 95%;
		flex-direction: column-reverse;
		gap:5rem;
	}
	#doctor-intro .inner .left {
		width: 100%;
	}
	.doc-i-name {
		width: 100%;
	}
	.doc-i-name p {
		font-size: 22px;
	}
	.doc-i-name p .dn-l {
		font-size: 16px;
	}
	.doc-i-name p .en {
		font-size: 14px;
	}
	.doc-i-txt {
		width: 95%;
		font-size: 14px;
	}
	.career {
		width: 95%;
	}
	.career p {
		font-size: 16px;
	}
	.career dl {
		font-size: 14px;
		flex-direction: column;
	}
	.career dl dt {
		width: 100%;
		padding-bottom: 0.5rem;
		font-weight: 500;
	}
	.career dl dd {
		width: 100%;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
	}
	#doctor-intro .inner .right {
		width: 70%;
		margin: auto;
	}

	.staff-wrap {
		width: 95%;
		margin: 5rem auto;
	}
	.staff-wrap ul {
		gap: 2%;
		align-items: flex-start;
	}
	.staff-wrap ul li {
		width: 100%;
		margin-bottom: 3.5rem;
	}
	.staff-name {
		font-size: 18px;
	}

	
	/*medical*/
	.medical-inner {
		width: 95%;
		flex-direction:column-reverse;
		gap:3rem;
	}
	.medical-inner .txt {
		width: 100%;
	}
	.medical-inner .txt p {
		font-size: 14px;
	}
	.medical-inner .img {
		width: 70%;
		margin: auto;
	}
	
	/*medical*/
	.med-con {
		width: 95%;
		margin: 5rem auto;
	}
	.m-con-wrap {
		width: 90%;
		margin: auto;
		flex-direction: column;
		gap:3rem;
	}
	.m-con-ttl01 p {
		font-size: 17px;
	}
	.m-con-txt {
		font-size: 14px;
	}
	.mcon-flex {
		flex-direction: column;
		gap:1.5rem;
	}
	.m-con-ttl02 p {
		font-size: 15px;
		text-align: center;
	}
	.mcon-flex .left {
		width: 50%;
		margin: auto;
	}
	.mcon-flex .right {
		width: 100%;
	}
	.m-con-item-ttl p {
		font-size: 15px;
		text-align: center;
	}
	.m-con-pic {
		justify-content: center;
		gap: 5rem;
		align-items: flex-start;
	}
	#whitening .m-con-wrap {
		margin-top: 3rem;
	}
	.m-con-pic .item {
		width: 250px;
	}
	.m-con-pic .item img {
		width: 100%;
	}
	
	
	/*access*/
	#basic-info .inner {
		width: 95%;
		margin: 5rem auto;
		flex-direction: column;
		gap:3rem;
	}
	#basic-info .inner .left {
		width: 80%;
		margin: auto;
	}
	#basic-info .inner .right {
		width: 100%;
	}
	#basic-info .inner .right table {
		width: 100%;
		font-size: 14px;
	}
	#basic-info .inner .right table th {
		width: 30%;
		text-align: center;
	}
	#basic-info .inner .right table td {
		width: 70%;
	}
	.access-timetable {
		width: 99%;
        flex-direction: column;
	}
	.access-map {
		width: 95%;
	}
	.access-map iframe {
		width: 100%;
		height: 250px;
	}
	.access-con {
		width: 95%;
	}
	.ttl-access-con {
		font-size: 20px;
		letter-spacing: 5px;
		top: -12px;
	}
	.access-con .inner {
		width: 95%;
		flex-direction: column;
		gap:3rem;
	}
	.access-con .inner .item {
		width: 100%;
	}
	.ttl-a-tra,
	.ttl-a-car {
		font-size: 18px;
		padding-left: 45px;
		text-align: center;
	}
	.ttl-a-tra::before {
		content: "";
		width: 40px;
		height: 40px;
		background: url("../img/icon-tra.png");
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 60px;
		transform: translateY(-50%);
	}
	.ttl-a-car::before {
		content: "";
		width: 40px;
		height: 40px;
		background: url("../img/icon-car.png");
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 60px;
		transform: translateY(-50%);
	}
	.access-con .inner .item ul {
		flex-direction: column;
		gap:1.5rem;
		font-size: 15px;
	}
	
	
	
	/*recruit*/
	.rec-in-con {
		width: 95%;
	}
	.rec-in-con::before {
		content: "";
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 5rem;
		left: -10px;
		z-index: -2;
	}
	.rec-in-con::after {
		content: "";
		width: 50px;
		height: 50px;
		top: 5rem;
		right: -10px;
		z-index: -2;
	}
	.rec-in-img {
		width: 90%;
	}
	.rec-in-txt {
		width: 95%;
		font-size: 14px;
		text-align: left;
	}
.biz-flex {
    flex-direction: column;
}
	.time-table {
    width: 100%;
}
    .biz-txt {
    width: 100%;
}
    .foot-timetable {
        flex-direction: column;
}
}