@charset "utf-8";

/* ---------------------------------------------------- */
/* 変数 */
/* ---------------------------------------------------- */
:root {
  --co_blue: #476FB7;
	--co_blue_2: #F3FAFF;
  --co_green: #81bf09;
	--co_yellow: #ff8a15;

}


header>.inner>.logo h1{
	    background-image: url(/wp-content/themes/ishigami_2022/assets/common/img/logo/top_1.png);
}

main>.inner>.feature>.inner>.list ul li .photo,main>.inner
.inplant>.inner>.photo,
main>.inner .flow>.inner>.cont .list li .photo {
    border-color: #cecece;
}


.global_nav .nav_toggle>.inner{
	background-color:var(--co_blue);
}
main>.inner .visual>.inner>.cont>.feature ul li .point::before{
	background-image:url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/ico_point.svg);
}
main>.inner .visual>.inner .tag ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
	margin-top: 20px;
}
main>.inner .visual>.inner .tag ul li {
    background: #81bf09;
    color: #fff;
    font-size: 1.2em;
    padding: 5px 20px;
}
@media screen and (max-width: 768px) {
	main>.inner .visual>.inner .tag ul {
		margin-top: 10px;
		margin-bottom: 20px;
	}
}


.sp_foot{
	display:none;
}
@media screen and (max-width: 768px) {
	.sp_foot {
        background: rgb(255 255 255 / 90%);
        height: 95px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-top: 3px solid #476fb7;
        transform: translateY(100px);
        transition: all .3s;
    }
	.scroll .sp_foot {
		transform: translateY(0);
		transition: all .3s;
	}
	.sp_foot ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 10px;
		align-items: center;
		width: 100%;
	}
	.sp_foot span {
		width: 100%;
		text-align: center;
		font-size: 1em;
		margin-bottom: 5px;
	}
	.sp_foot ul li {
		width: 49%;
	}
	.sp_foot ul li a {
		background: #476fb7;
		color: #fff;
		display: block;
		text-align: center;
		text-decoration: none;
		line-height: 1.3;
		padding: 5px;
		font-size: .85em;
	}
	.sp_foot ul li:nth-of-type(2) a {
		background: #81bf09;
	}
}
main>.inner .visual>.inner>.cont>.feature ul li .inner,
main>.inner .visual>.inner>.cont>.feature ul li.point_03 .inner{
    line-height: 1.4;
}
@media screen and (max-width: 768px) {
	main>.inner .visual {
        min-height: 100vh;
	}
	main>.inner .visual>.inner>.cont>.feature ul li {
        width: clamp(9rem, -11.1111111111rem + 62.5vw, 15.5555555556rem);
    }
	main>.inner .visual>.inner>.cont>.feature ul li.point_01 {
        left: clamp(-0.6rem, -5.5555555556rem + 18.2291666667vw, 2.2222222222rem);
    }
	main>.inner .visual>.inner>.cont>.feature ul li.point_04 {
        right: clamp(-0.6rem, -5.5555555556rem + 18.2291666667vw, 2.2222222222rem);
        bottom: 0;
    }
	main>.inner .visual>.inner>.cont>.feature ul li.point_04 .inner,
	main>.inner .visual>.inner>.cont>.feature ul li.point_04 .inner .yellow {
        font-size: 1em;
    }
	main>.inner .visual>.inner>.cont>.feature ul li.point_03,
	main>.inner .visual>.inner>.cont>.feature ul li.point_04{
        bottom: -5px;
    }
	
}
main>.inner .problem>.inner .cont>.inner .list ul li::before{
	background-image:url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/ico_check.svg);
}

main>.inner .ttl_pre {
    color: #476fb7;
}
main>.inner .ttl_pre .en,
main>.inner>.feature>.inner>.list ul li .en{
    color: #58B7FF;
}
main>.inner .ttl_pre::before{
	background-image:url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/ico_ttl.svg);
}

/*** こんなお悩みありませんか？ ***/
main>.inner .problem {
    background: #fff;
    padding-bottom: 120px;
}
main>.inner .problem>.inner .cont>.inner {
    background: #F3FAFF;
}
main>.inner .problem>.inner .cont::before {
    height: 0;
    width: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #f3faff;
}

/*** ひざの痛みの原因 ***/
.cause {
	background-image: url(/wp-content/themes/ishigami_2022/assets/common/img/bg/pt_1.png);
    background-color: #fff;
	border-top: 6px solid var(--co_blue);
}
.cause .inner {
    margin: auto;
    max-width: 1400px;
    width: 100%;
    padding: 0 1rem;
    padding-top: 120px;
    padding-bottom: 120px;
}
.cause .cause_block {
    max-width: 1000px;
    margin: auto;
}
.cause .cause_block + .cause_block{
    margin-top: 100px;
}
.cause .ttl {
    text-align: center;
}
.cause .ttl p {
    display: inline-block;
    background: #476fb7;
    color: #fff;
    text-align: center;
    font-size: 1.6em;
    padding: 10px 10px;
    font-weight: bold;
    position: relative;
}
.cause .ttl p span {
    font-size: 1.2em;
}
.cause .ttl p:before,
.cause .ttl p:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0px;
    top: 50%;
    transform: translateY(-50%);
    
}
.cause .ttl p:after {
    right: -20px;
    border-left: 20px solid #476fb7;
    border-top: 42px solid transparent;
    border-bottom: 42px solid transparent;
}
.cause .ttl p:before {
    left: -20px;
    border-top: 42px solid transparent;
    border-right: 20px solid #476fb7;
    border-bottom: 42px solid transparent;
}
.cause .sub_ttl {
    text-align: center;
    color: #476fb7;
    font-size: 1.4em;
    font-weight: bold;
    margin: 30px 0;
    position: relative;
}
.cause .sub_ttl:after {
    position: absolute;
    content: "";
    width: 5em;
    height: 1px;
    background: #476fb7;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.cause .cause_flex .img {
    width: 250px;
    margin-left: calc(100% - 250px);
    z-index: 1;
    position: sticky;
}
.cause .cause_flex .img img {
    border-radius: 20px;
}
.cause .cause_flex .txt {
    margin-right: 40px;
    margin-top: -220px;
    background: #fff;
    padding: 60px 230px 60px 60px;
	box-shadow: 0px 0px 10px #cecece;
}
.cause .cause_block:nth-of-type(2) .cause_flex .img {
    margin-left: inherit;
}
.cause .cause_block:nth-of-type(2) .cause_flex .txt {
    margin-right: 0;
    margin-left: 40px;
    padding: 60px 60px 60px 230px;
}
@media screen and (max-width: 768px) {
	.cause .ttl p {
		font-size: 1.24em;
	}
	.cause .ttl p:after {
		border-top: 34px solid transparent;
		border-bottom: 34px solid transparent;
	}
	.cause .ttl p:before {
		border-bottom: 34px solid transparent;
		border-top: 34px solid transparent;
	}
	.cause .sub_ttl {
		font-size: 1.1em;
	}
	.cause .cause_flex .img {
		width: 130px;
		margin-left: calc(100% - 130px);
	}
	.cause .cause_flex .txt {
		margin-right: 40px;
		margin-top: -120px;
		padding: 30px 110px 30px 30px;
	}
	.cause .cause_block:nth-of-type(2) .cause_flex .txt {
		padding: 30px 30px 30px 110px;
	}
	.cause .cause_block + .cause_block {
		margin-top: 80px;
	}
}


/*** 治療実績 ***/
.results {
    padding: 120px 0;
    background-image: url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/bg_results.jpg);
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}
.results .inner {
    margin: auto;
    max-width: 1400px;
    width: 100%;
}
.results .inner {
    margin: auto;
    max-width: 1400px;
    width: 100%;
}
.results_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.results_box {
    text-align: center;
    background: #fff;
    padding: 30px;
    margin-top: 40px;
    flex: 1;
}
.results_box h3 {
    display: inline-block;
    font-size: 1.25em;
    color: #476fb7;
    padding: 0 20px;
    /*border-bottom: 2px solid;*/
    font-weight: bold;
}
.results_box .results_data {
    font-size: 1.8em;
}
.results_box .results_data span {
    font-size: 2.2em;
    font-family: Open Sans, sans-serif;
    color: #f9b900;
	margin: 0 10px;
}
@media screen and (max-width: 768px) {
	.results {
		padding: 60px 0;
	}
	.results_list {
		gap: .7em;
	}
	.results_box {
		flex: inherit;
		margin: 40px auto 0;
		padding: 25px;
		width: 80%;
	}
	.results_box .results_data {
		font-size: 1.4em;
	}
}

/*** 変形性膝関節症の治療法 ***/
.function .ttl {
    background: #476fb7;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 10px;
    font-size: 1.25em;
    font-weight: bold;
}
main>.inner .function {
    background-color: #fafafa;
}
.accordion-container {
  position: relative;
  width: 100%;
  outline: 0;
  cursor: pointer
}
.accordion-container .accordion-title {
  display: block;
  position: relative;
  margin: 0;
  margin-bottom: 15px;
  padding: 0.625em 0.625em 0.625em 2em;
  font-size: 1.12em;
  font-weight: normal;
  color: #476fb7;
  background: #f3faff;
  cursor: pointer;
  font-weight: bold;
}
.accordion-container .accordion-title:last-of-type{
	margin-bottom: 0;
}
/*.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #00aaa7;
  color: white;
}*/
.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}
.accordion-title{
  position: relative;
}
.accordion-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #476fb7;
  border-right: solid 2px #476fb7;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}
.accordion-content {
  display: none;
  padding-left: 2.3125em;
	padding: 15px 30px 30px 30px;
}
.treatment_wrap {
    background: #fff;
    padding: 60px;
    margin-top: 60px;
}
.open + .treatment_box {
    display: flex!important;
    justify-content: space-between;
    flex-wrap: wrap;
}
.treatment_box .img {
    width: 30%;
}
.treatment_box .txt {
    width: 65%;
}
.treatment_wrap h4 {
    font-size: 1.2em;
    border-bottom: 1px solid #476fb7;
    margin-bottom: 20px;
}
.treatment_wrap dl {
    display: flex;
    flex-wrap: wrap;
}
.treatment_wrap dl dt {
    width: 6em;
    padding: 10px 0;
    text-align: center;
    background: rgba(167, 211, 152, .2);
    height: min-content;
}
.treatment_wrap dl dd {
    width: calc(100% - 7em);
    margin-left: 1em;
}
.treatment_wrap dl dd,
.treatment_wrap dl dt {
    margin-top: 10px;
}
@media screen and (max-width: 768px) {
	.treatment_wrap {
		padding: 30px;
		margin-top: 30px;
	}
	.accordion-content {
		padding: 15px;
	}
	.treatment_box .img,.treatment_box .txt {
		width: 100%;
	}
	.treatment_box .txt {
		margin-top: 20px;
	}
	.treatment_wrap dl {
	}
	.treatment_wrap dl dd, .treatment_wrap dl dt {
		width: 100%;
	}
}

/*** 当院が選ばれる5つの特徴 ***/
main>.inner>.feature {
    margin-top: 0;
}
main>.inner>.feature>.inner {
    background: #fff;
}


/*** ひざの痛み治療のお約束 ***/
main>.inner>.feature>.inner {
    background: #fff;
}
main>.inner .inplant {
    background-color: #edf6ea;
}
main>.inner .inplant>.sign {
    color: #edf6ea;
}
main>.inner .inplant>.inner::before {
	background-image:url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/ico_promise.svg);
}

/*** 治療比較 ***/
main>.inner .comparison{
	background-image: url(/wp-content/themes/ishigami_2022/assets/common/img/bg/pt_1.png);
    background-color: #fff;
}
main>.inner .comparison table {
    width: 100%;
}
main>.inner .comparison>.inner .list .list_table table tbody tr .th_pre {
    background: #f3faff;
}


/*** 治療の流れ ***/
main>.inner .flow{
	background-color: #f3faff;
}
main>.inner .en {
    color: #476fb7;
}
main>.inner .flow>.inner>.cont .list {
    box-shadow: 0px 0px 10px #cecece;
}
main>.inner .flow>.inner>.cont .list li:nth-child(odd) {
    background-color: #d1dbed;
}
main>.inner .flow>.inner>.cont .list li:nth-child(even) {
    background-color: #eef2f8;
}
main>.inner .flow>.inner>.cont .list li::before{
	position: absolute;
    content: "";
    width: 0;
    height: 0;
    right: -18px;
    top: 50%;
	transform: translateY(-50%);
	border-left: 20px solid #d1dbed;
    border-top: 28px solid transparent;
    border-bottom: 27px solid transparent;
}
main>.inner .flow>.inner>.cont .list li:nth-child(even)::before {
    border-left: 20px solid #eef2f8;
}
@media screen and (max-width: 768px) {
	main>.inner .flow>.inner>.cont .list li::before,
	main>.inner .flow>.inner>.cont .list li:nth-child(odd)::before{
		border-left: 28px solid transparent;
		border-right: 28px solid transparent;
		border-top: 20px solid #d1dbed;
		top: inherit;
		bottom: -45px;
		left: 50%;
		transform: translateX(-50%);
		
	}
	main>.inner .flow>.inner>.cont .list li:nth-child(even)::before {
		border-left: 28px solid transparent;
        border-top: 20px solid #eef2f8;
    }
}


/*** よくある質問 ***/
main>.inner .faq{
	background-color: #fff;
}
main>.inner .faq>.inner .cont .list {
    border-top-color: #000000;
}
main>.inner .faq>.inner .cont .list dd {
    border-bottom-color: #000000;
}

/*** フッター ***/
footer {
    background: #fef6cc;
}
footer dl.overview_1 dt:nth-of-type(1),
footer dl.overview_1 dd:nth-of-type(1),
footer dl.overview_1 dt:nth-of-type(2),
footer dl.overview_1 dd:nth-of-type(2){
    display:none;
}
footer .businessday_1 table {
    width: 100%;
    max-width: 540px;
    text-align: center;
    border-collapse: collapse;
}
footer .businessday_1 table th {
    background: var(--co_blue);
    color: #fff;
}
footer .businessday_1 table td {
    background: #fff;
}
footer>.inner:nth-of-type(2) .businessday_1 table th {
    background: #81bf09;
}
footer .businessday_1 table th,.businessday_1 table td {
    align-items: center;
    padding: 10px 10px;
    font-size: .9em;
}
footer .businessday_1 .note,
footer .businessday_1 .table_add{
    font-size: .9em;
    margin-top: 10px;
}
footer dl.overview_1 {
    display: flex;
}
footer dl.overview_1 dt {
    width: 5em;
	display:none;
}
footer dl.overview_1 dd {
    width: calc(100% - 4em);
	font-size: 1.6em;
    font-family: "Noto Serif JP", serif;
	margin-top: 10px;
	margin-bottom: 5px;
}
footer dl.overview_1 dd:before {
	font-family: "Font Awesome 5 Free";
    content: '\f095';
    font-weight: 900;
    margin-right: .5em;
}
footer dl.overview_1 dd a{
	text-decoration: none;
}
footer>.inner>.access{
	font-size: .9em;
}
footer .copy {
    background: #ff8a15;
}
@media screen and (max-width: 768px) {
	footer .copy{
	 padding-bottom: 140px;
	}
}

/***  ***/
.contact_wrap {
    background: #476fb7;
    padding: 80px;
    background-image: url(/wp-content/themes/ishigami_2022/knees_2025/asetts/img/bg_contact.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
/*.contact_wrap:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .6;
    border-radius: 10px;
    z-index: 1;
    transition: .3s ease-in-out;
}*/
.contact_wrap .inner {
    background: rgb(255 255 255 / 80%);
    padding: 30px 0;
    max-width: 1000px;
    margin: auto;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    z-index: 2;
    position: sticky;
}
.contact_wrap .inner .box {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 30px;
}
.contact_wrap .inner .box:after {
    position: absolute;
    content: "";
    background: #afafaf;
    width: 1px;
    height: 100%;
    right: 0;
    -50%: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.contact_wrap .inner .box:last-child:after {
    content: none;
}
.contact_wrap .inner .box .ttl {
    margin-bottom: 20px;
	font-weight: bold;
    color: #20458c;
	font-size: 1.1em;
}
.contact_wrap .inner .box a {
	font-size: .9em;
	height: 100px;
	height: 130px;
}
.contact_wrap .inner .box ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}
.contact_wrap .inner .box ul li {
    width: 100%;
    flex: 1;
}
.contact_wrap .inner .box ul li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
    background: linear-gradient(180deg, #f9b926, #f06600);
    color: #fff;
    font-weight: bold;
}
.contact_wrap .inner .box ul li:nth-of-type(2) a {
    background: linear-gradient(180deg, #81bf09, #3ca511);
    color: #fff;
}

.contact_wrap .line_link a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background: #06c755;
    text-decoration: none;
    gap: 1em;
	color: #ffffff;
    font-weight: bold;
    position: relative;
}
.contact_wrap .line_link a img.qr {
    position: absolute;
    right: 10px;
	width: 80px;
}
.contact_wrap .line_link a img.phone {
    height: 80px;
    width: auto;
    position: absolute;
    left: 15px;
    bottom: 0;
}
@media screen and (max-width: 980px) {
	.contact_wrap .inner .box ul li {
		flex: inherit;
	}
	.contact_wrap .inner .box a {
		height: 80px;
	}
}
@media screen and (max-width: 768px) {
	.contact_wrap {
		padding: 20px;
	}
	.contact_wrap .inner .box {
		width: 100%;
		flex: inherit;
		padding: 0 20px;
	}
	.contact_wrap .inner .box .ttl {
		margin-bottom: 10px;
	}
	.contact_wrap .inner .box:after {
		content: none;
	}
	.contact_wrap .inner {
		gap: 2em;
		padding: 20px 0;
	}
	.contact_wrap .inner .box a {
		height: initial;
		padding: 15px 0;
	}
	.contact_wrap .line_link a img.qr {
		display: none;
	}
	.contact_wrap .line_link a img.phone {
		height: 55px;
        right: 10px;
		left: inherit;
	}
}
/************************************
 * 文字サイズ
 ************************************/
body{
	font-size: 18px;
}
@media screen and (max-width: 768px) {
	body{
		font-size: 16px;
	}
}

main>.inner>.feature>.inner>.list ul li .txt {
    font-size: 1em;
}

main>.inner .visual>.inner>.cont>.ttl .line,
main>.inner .ttl_pre,
.cause .ttl p,
main>.inner .ttl_pre_more,
.results_box .results_data{
	font-size: 30px;
}
@media screen and (max-width: 768px) {
	main>.inner .visual>.inner>.cont>.ttl .line,
	main>.inner .ttl_pre,
	.cause .ttl p,
	main>.inner .ttl_pre_more,
	.results_box .results_data{
		font-size: 22px;
	}
}

.global_nav .menu nav .list li a,
main>.inner .visual>.inner>.cont>.feature ul li .ttl,
.cause .sub_ttl,
.results_box h3,
main>.inner .inplant>.inner>.cont>.inner .ttl_sec,
.function .ttl{
	font-size: 22px;
}
@media screen and (max-width: 768px) {
	.global_nav .menu nav .list li a,
	main>.inner .visual>.inner>.cont>.feature ul li .ttl,
	.cause .sub_ttl,
	.results_box h3,
	main>.inner .inplant>.inner>.cont>.inner .ttl_sec,
	.function .ttl{
		font-size: 18px;
	}
}

main>.inner .visual>.inner .tag ul li,
main>.inner>.feature>.inner>.list ul li .ttl,
.accordion-container .accordion-title{
    font-size: 20px;
}
@media screen and (max-width: 768px) {
	main>.inner .visual>.inner .tag ul li,
	main>.inner>.feature>.inner>.list ul li .ttl,
	.accordion-container .accordion-title{
		font-size: 16px;
	}
}

main>.inner .visual>.inner>.cont>.feature ul li .point,
main>.inner .ttl_pre .en, 
main>.inner>.feature>.inner>.list ul li .en,
main>.inner .flow>.inner>.cont .list li .step .en,
.results_box .note,
footer .businessday_1 .note, footer .businessday_1 .table_add,
footer .businessday_1 table th, .businessday_1 table td,
footer>.inner>.access{
    font-size: 16px;
}
@media screen and (max-width: 768px) {
	main>.inner .visual>.inner>.cont>.feature ul li .point,
	main>.inner .ttl_pre .en, 
	main>.inner>.feature>.inner>.list ul li .en,
	main>.inner .flow>.inner>.cont .list li .step .en,
	.results_box .note,
	footer .businessday_1 .note, footer .businessday_1 .table_add,
	footer .businessday_1 table th, .businessday_1 table td,
	footer>.inner>.access,
	.sp_foot ul li a{
		font-size: 12px;
	}
}