@charset "UTF-8";

/*------------------初めてご来院いただく方へ---------------------*/
a#f+section .content_wrapper {
    background: #fff;
}

/*-------------当院は神戸市西区にある親子3世代で通える歯科医院です----------------*/
a#about-clinic01 + .dec1_2:not(.block_images_21)>.content_wrapper {
    background: var(--i_sub2_color);
}

@media screen and (min-width: 821px) and (max-width: 900px) {
	a#about-clinic01+section .wrapper_item {
    display: flex !important;
    }
	a#about-clinic01+.contents_box01:not(.block_image_text_2):not(.block_image_text_6) .inner_item_img {
    margin-bottom: 0 !important;
    max-width: 40% !important;
    flex-basis: 40% !important;
	}
	a[id^="flow"]+.contents_box01 .inner_item_txt {
        padding-right: 20px !important;
    }
}

/*----------------黒木歯科医院と皆様との約束---------------------*/
a[id^="promise"]+div {
    border-top: 3px solid var(--i_main_color);
    border-bottom: 3px solid var(--i_main_color);
}
@media screen and (min-width: 821px) {
	a#promise_sp+div {
		display: none;
	}
}
@media screen and (max-width: 820px) {
	a#promise_pc+div {
		/*display: none;*/
	}
	a#promise_sp+div .wrapper_item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: center;
}
a#promise_sp+.composite_box01:not(.block_images_7):not(.block_images_8):not(.block_images_10):not(.block_images_11):not(.block_images_12):not(.block_images_13):not(.block_images_15):not(.block_images_17):not(.block_images_21):not(.block_images_22):not(.block_images_23):not(.block_images_24) .inner_item {
    width: 100% !important;
	margin-left: 0 !important;
}
a#promise_sp+.composite_box01 .inner_item_img img {
    height: auto !important;
    object-fit: contain;
}
}

/* 黒木歯科医院のこだわり */
a[id^="about-clinic02"]+section .inner_item_txt {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    left: -20px;
}

a[id^="about-clinic02"]:nth-of-type(2n)+section .inner_item_txt {
    left: auto;
    right: -20px;
}

a[id^="about-clinic02"]+section .inner_item_txt:before {
    content: "";
    position: absolute;
    display: block;
    width: 95%;
    height: 95%;
    background: var(--i_btn_color);
    z-index: -1;
    top: 22px;
    left: -10px;
    border-radius: 30px;
}

a[id^="about-clinic02"]:nth-of-type(2n)+section .inner_item_txt:before {
    background: var(--i_main_color);
    left: auto;
    right: -10px;
}

a[id^="about-clinic02"]+.contents_box01 .inner_item_img img {
	position: relative;
	z-index: -2;
}

@media screen and (min-width: 821px) and (max-width: 900px) {
	a[id^="about-clinic02"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6):not(.block_text_6) .wrapper_item {
        display: flex;
    }
	a[id^="about-clinic02"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6) .inner_item_img {
    margin-bottom: 0 !important;
    max-width: 40% !important;
    flex-basis: 40% !important;
}
a[id^="about-clinic02"]+section .inner_item_txt {
    padding: 4vw !important;
}
}

@media screen and (max-width: 820px) {
	a[id^="about-clinic02"]+section .inner_item_txt {
    padding: 4vw !important;
    left: auto !important;
    right: -12% !important;
    top: -70px !important;
    width: 90% !important;
}
a[id^="about-clinic02"]+section .inner_item_txt:before {
    top: 33px;
}
a[id^="about-clinic02"]:nth-of-type(2n)+section .inner_item_txt:before {
    left: -10px;
    right: auto;
}
}

@media screen and (max-width: 600px) {
	a[id^="about-clinic02"]+section .inner_item_txt {
    padding: 5vw !important;
}
}

@media screen and (max-width: 500px) {
	a[id^="about-clinic02"]+section .inner_item_txt {
    right: -13% !important;
}
}

/* 患者様へのお願い */
a[id^="about-clinic03_"]+section .content_wrapper {
    border: 2px solid var(--i_main_color) !important;
}

.rev {
    background: var(--i_sub2_color);
    border-radius: 10px;
    padding: 40px 30px;
    margin-top: 20px;
}

.rev .contact_tel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	gap: 20px;
}

.rev .contact_tel p {
    font-weight: bold;
    font-size: 2.5rem;
}

.rev .contact_tel .tel a {
    font-size: 6.0rem;
    letter-spacing: 0.6rem;
    transition: 0.4s ease-in-out;
	text-decoration: none !important;
}

.rev .contact_tel .tel a:hover {
	opacity: 0.8;
}

.rev .contact_tel .tel svg {
    width: 50px;
    height: 50px;
    fill: var(--i_txt_color);
    margin-right: 10px;
}

@media screen and (min-width: 821px) and (max-width: 900px) {
	.rev .contact_tel .tel a {
    font-size: 5.0rem;
}
.rev .contact_tel .tel svg {
    width: 40px;
    height: 40px;
}
}

@media screen and (max-width: 820px) {
	.rev .contact_tel {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	gap: 10px;
}
}

@media screen and (max-width: 600px) {
	.rev .contact_tel .tel a {
    font-size: 4.2rem;
}
.rev .contact_tel .tel svg {
    width: 32px;
    height: 32px;
}
}

@media screen and (max-width: 480px) {
	.rev .contact_tel .tel a {
    letter-spacing: 0.3rem;
    font-size: 3.2rem;
}
.rev .contact_tel .tel svg {
    width: 24px;
    height: 24px;
}
.rev .contact_tel p {
    font-size: 2.0rem;
}
}

/* 初診時について */
.blg {
    background: var(--i_sub2_color);
    border-radius: 10px;
    padding: 40px 30px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.blg p {
    font-size: 2.5rem;
}

@media screen and (max-width: 820px) {
	.blg {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	gap: 10px;
}
.blg p strong br {
	display: none;
}
}

@media screen and (max-width: 480px) {
.blg p {
    font-size: 2.0rem;
}
}

/* 初診の流れ */
a[id^="flow"]+.contents_box01 .heading.block_header_2 .h {
    left: 50px;
}

a[id^="flow"]+.contents_box01 .heading.block_header_2 .h:before {
    content: "01";
    display: block;
    position: absolute;
    left: -50px;
    color: var(--i_main_color);
    font-weight: bold;
    font-size: 3.2rem;
    top: 50%;
    transform: translateY(-55%);
}

a#flow2+.contents_box01 .heading.block_header_2 .h:before {
	content: "02";
}

a#flow3+.contents_box01 .heading.block_header_2 .h:before {
	content: "03";
}

a#flow4+.contents_box01 .heading.block_header_2 .h:before {
	content: "04";
}

a#flow5+.contents_box01 .heading.block_header_2 .h:before {
	content: "05";
}

a#flow6+.contents_box01 .heading.block_header_2 .h:before {
	content: "06";
}

/* 追加ボタン */
a#flow+.contents_box01 .contents_btn01.block_button_1 a:nth-of-type(2) span {
    position: relative;
    padding-right: 19px !important;
}

a#flow+.contents_box01 .contents_btn01.block_button_1 a:nth-of-type(2) span:before,
a#flow+.contents_box01 .contents_btn01.block_button_1 a:nth-of-type(2) span:after {
    content: "";
    display: block;
    width: 6px;
    height: 4px;
    position: absolute;
    border: 1px solid var(--i_btn_txt_color);
    right: 16px;
    top: calc(50% - 1px);
    transition: 0.5s;
}

a#flow+.contents_box01 .contents_btn01.block_button_1 a:nth-of-type(2) span:after {
    right: 18px;
    top: calc(50% - 3px);
}

@media screen and (min-width: 821px) and (max-width: 900px) {
	a[id^="flow"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6):not(.block_text_6) .wrapper_item {
        display: flex;
    }
	a[id^="flow"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6) .inner_item_img {
    margin-bottom: 0 !important;
    max-width: 40% !important;
    flex-basis: 40% !important;
	}
	a[id^="flow"]+.contents_box01[class*="block_image_text_"] .inner_item_txt .contents_btn01 {
		text-align: left;
	}
	a[id^="flow"]+.contents_box01 .inner_item_txt {
		padding-right: 20px !important;
	}
}

/* 治療後からがスタートです */
@media screen and (min-width: 821px) {
	a#st+section .contents_btn01.block_button_1 {
    text-align: left;
}
}

/* よくある質問 */
a#about-clinic05+.contents_faq01 dt:before,
a#about-clinic05+.contents_faq01 dd:before {
    border-radius: 50%;
}

a#about-clinic05+.contents_faq01 dd:before {
    line-height: 1.1;
    top: 50%;
    transform: translateY(-50%);
}

a#about-clinic05+.contents_faq01 dt i.more:before {
	content: "▼";
}

a#about-clinic05+.contents_faq01 dt.open i.more::before {
    content: "▲";
}

a#about-clinic05+.contents_faq01 dl {
    background: var(--i_sub2_color);
    padding: 20px !important;
    border: 0;
    margin: 10px;
    border-radius: 10px;
}

a#about-clinic05+.contents_faq01 dd {
    background: #fff;
    padding: 20px !important;
    height: auto !important;
    padding-left: 7.3rem !important;
	border-radius: 10px;
}

a#about-clinic05+.contents_faq01 dd span.inner {
	padding-top: 0;
}

/* 黒木歯科医院(旧山田歯科医院)の歴史 */
a[id^="about-clinic06"]+section {
    overflow: visible;
}

a[id^="about-clinic06"]+section .content_wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
	position: relative;
}

a[id^="about-clinic06"]+section .content_wrapper .heading.block_header_4 {
    flex-basis: 20%;
    max-width: 20%;
    text-align: center;
}

a[id^="about-clinic06"]+section .content_wrapper .heading.block_header_4:before {
    content: "●";
    display: block;
    color: var(--i_txt_color);
    position: absolute;
	top: 18px;
}

a[id^="about-clinic06"]+section .content_wrapper:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 150%;
    background: var(--i_txt_color);
    left: 27px;
    top: 30px;
}

a#about-clinic06_4+section .content_wrapper:before {
    height: -webkit-fill-available;
}

a[id^="about-clinic06"]+section .content_wrapper .heading.block_header_4 .h {
    font-size: 4rem !important;
}

a[id^="about-clinic06"]+section .wrapper_item {
    flex-basis: 80%;
    max-width: 80%;
    border-radius: 10px;
    padding: 20px !important;
    border-color: var(--i_main_color) !important;
    background: #fff;
}

a[id^="about-clinic06"]+section .inner_item_txt .heading.block_header_2 .h {
    color: var(--i_txt_color);
}

@media screen and (min-width: 821px) and (max-width: 900px) {
	a[id^="about-clinic06"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6):not(.block_text_6) .wrapper_item {
        display: flex;
    }
	a[id^="about-clinic06"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6) .inner_item_img {
    margin-bottom: 0 !important;
    max-width: 40% !important;
    flex-basis: 40% !important;
    padding: 0 !important;
	}
	a[id^="about-clinic06"]+.contents_box01:not(.block_image_text_2):not(.block_image_text_6) .inner_item_img img {
    width: 100% !important;
}
}

@media screen and (max-width: 820px) {
	a[id^="about-clinic06"]+section .content_wrapper {
    gap: 0;
    flex-direction: column;
	padding-left: 60px;
}
a[id^="about-clinic06"]+section .content_wrapper .heading.block_header_4 {
    flex-basis: auto;
    max-width: none;
    text-align: left;
}
a[id^="about-clinic06"]+section .wrapper_item {
    flex-basis: 100%;
    max-width: 100%;
}
a[id^="about-clinic06"]+section .content_wrapper .heading.block_header_4:before {
    left: -40px;
}
}

/* 区切り線 */
/*
.contents_hr.block_line_4 {
    height: 10px;
}

.contents_hr.block_line_4:before {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #5c3f1d;
    border-radius: 0;
}*/

/*----------------------------------20251209追加----------------------------------------------------------*/
/*------------------黒木歯科医院と皆様との約束--------------------*/
a[id^="promise"]+div .wrapper_item {
    align-items: flex-start;
}
a[id^="promise"]+div .wrapper_item .inner_item {
    position: relative;
}
a[id^="promise"]+div .wrapper_item .inner_item:before {
    content: "";
    background: url(/common/upload_data/yamada-dtcom/image/20251208140204.png) no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    margin: auto;
    position: relative;
    top: 15px;
    left: 12px;
}
a[id^="promise"]+div .wrapper_item .inner_item:nth-of-type(2):before {
	background: url(/common/upload_data/yamada-dtcom/image/20251208140204_1.png) no-repeat;
    background-size: contain;
}
a[id^="promise"]+div .wrapper_item .inner_item:nth-of-type(3):before {
	background: url(/common/upload_data/yamada-dtcom/image/20251208140204_4.png) no-repeat;
    background-size: contain;
}
a[id^="promise"]+div .wrapper_item .inner_item:nth-of-type(4):before {
	background: url(/common/upload_data/yamada-dtcom/image/20251208140204_3.png) no-repeat;
    background-size: contain;
}
a[id^="promise"]+div .wrapper_item .inner_item:nth-of-type(5):before {
	background: url(/common/upload_data/yamada-dtcom/image/20251208140204_2.png) no-repeat;
    background-size: contain;
}
@media screen and (max-width: 1100px) {
	a[id^="promise"]+div .wrapper_item .inner_item:before {
    width: 70px;
    height: 70px;
}
}
@media screen and (max-width: 768px) {
	a[id^="promise"]+div .wrapper_item .inner_item {
    position: relative;
    margin-bottom: 10px !important;
}
	a[id^="promise"]+div .wrapper_item .inner_item:before {
    width: 100px;
    height: 100px;
    top: 35px;
    left: 17px;
}
}
@media screen and (max-width: 480px) {
	a[id^="promise"]+div .wrapper_item .inner_item:before {
    width: 80px;
    height: 80px;
    left: 10px;
}
}