/*
Theme Name: SERUM Child
Theme URI: https://tcd-theme.com/tcd096/
Template: serum_tcd096
Author: TCD
Author URI: https://tcd-theme.com/
Description: WordPress theme "SERUM" is a template with the image of a dermatology clinic, featuring side icon buttons and a post type that allows you to organize the subjects of treatment. CTAs can also be easily set up.
Version:2.8.1

*/

body.taxonomy-treatment_category .term-parent-wrap{display:block!important;}


#header_slider_wrap,
#header_slider,
#header_slider .item{height: 840px;}

@media screen and (max-width: 800px) {
	body.home{padding:0!important;}
	body.home.no_header_logo_image_mobile #header_logo2{top:0!important;}
	body.home #drawer_menu_button{bottom:2px!important;}
	   #header_slider_wrap{height:100%!important;width:100%!important;margin:0 auto!important;}
	   #header_slider{height:auto!important;}
	   #header_slider .item{height: 100%!important;aspect-ratio: 16 / 9;} 
	   .cb_carousel:first-child{margin-top:0!important;}
  }

#page_header_small{height:240px;}

table td {overflow-wrap : break-word;word-break: break-all;white-space: normal;}
.post_content li ul{margin-left:-1.3em;padding-left:1.3em}
.post_content li ul li{list-style: none;}

.wp-block-image,
.wp-block-table{margin-bottom:2rem!important;}
.wp-block-table{white-space:normal!important;}
.wp-block-getwid-tabs__nav-links{list-style: none!important;margin-left:0!important;margin-bottom:0!important;}
.wp-block-getwid-tabs__nav-links a{color:#DB006E!important;}
.wp-block-table{margin-bottom:2rem;}
.wp-block-table thead{border:1px solid!important;}
.post_content th{color:#fff;background:#DB006E!important;}
.wp-block-table td,
.wp-block-table th{border: 1px solid #bbb!important;vertical-align: middle;}
.wp-block-image :where(figcaption){text-align: center;}

@media screen and (min-width: 801px) {
.clinic_btn_wrap{display: flex;justify-content:center;flex-wrap: wrap;}
.clinic_btn_wrap .q_button_wrap{width:calc(50% -32px);margin:16px!important;}
}

.cb_box_content .headline{top:-40px;}

h2 span{display: block;margin:8px;font-size:1em;font-weight: normal;}
.map {position: relative;width: 100%;padding-top: 56.25%;height: 0;margin-bottom:40px;}
.map iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

@media screen and (min-width: 801px) {
    .sp-only {display: none;}
  }
  
@media screen and (max-width: 800px) {
    .pc-only { display: none;}
  }

.modal{padding:80px 24px; text-align: center;}
.modal h2{color:black;margin-bottom:24px;font-size:1.4rem;}

/*popoupmaeker*/

.pum-overlay.pum-active,
.pum-overlay.pum-active .popmake.active {
   		display: block !important;
	}


/*固定ページの施術一覧*/

.treatment_list { background-color: #fff9f9; padding:120px 0; position:relative;margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw); margin-bottom:80px; }
.treatment_list .header { text-align:center; margin-bottom:67px; }
.treatment_list .header .catch { text-align:center; line-height:1.7; margin:-10px 0 20px 0; }
.treatment_list .header .desc { line-height:2.4; }
.treatment_list .post_list { margin:0 auto; display:flex; flex-wrap:wrap; }
.treatment_list .post_list .item { width:50%; }
.treatment_list .post_list a { padding:20px 30px; display:block; background:#fff; border-right:1px solid #ddd; border-top:1px solid #ddd; display:flex; flex-wrap:wrap; align-items:center; }
.treatment_list .post_list .item:nth-child(1) a { border-top:none; }
.treatment_list .post_list .item:nth-child(2) a { border-top:none; }
.treatment_list .post_list .item:nth-child(2n) a { border-right:none; }
.treatment_list .post_list .item:last-of-type a { border-right:none; }
.treatment_list .post_list .image_wrap { width:80px; height:80px; position:relative; overflow:hidden; z-index:1; border-radius:100%; }
.treatment_list .post_list .image { width:100%; height:100%; display:block; overflow:hidden; position:relative; z-index:2; }
.treatment_list .post_list .image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }
.treatment_list .post_list .title { font-weight:500; width:calc(100% - 80px); padding-left:30px; line-height:1.6; transform: translate3d(0,0,0); transition: transform 0.35s ease; }
.treatment_list .post_list a:hover .title { transform: translate3d(14px,0,0); }
.treatment_list .link_button { text-align:center; }

.treatment_list .header { padding:0 100px; }
.treatment_list .post_list {width:930px; }

@media only screen and (max-width: 1000px) {
  .treatment_list { padding:100px 0; }
  .treatment_list .header { padding:0 60px; }
   .treatment_list .post_list { width:auto;margin:0 60px;}
}
@media only screen and (max-width: 800px) {
  .treatment_list { padding:40px 0; }
	.treatment_list .header { margin-bottom:32px; padding:0 20px; }
	.treatment_list .header .catch { margin-bottom:18px; margin-top:-5px; }
	.treatment_list .header .desc { line-height:2; }
	.treatment_list .post_list a { padding:15px 20px; }
	.treatment_list .post_list .image_wrap { width:70px; height:70px; }
	.treatment_list .post_list .title { width:calc(100% - 70px); padding-left:20px; }
}
@media only screen and (max-width: 600px) {
  .treatment_list .post_list { display:block; }
	.treatment_list .post_list .item { width:auto; }
	.treatment_list .post_list .item a { border:none; border-bottom:1px solid #ddd; }
	.treatment_list .post_list .item:last-of-type a { border-bottom:none; }
}

/*施術一覧ページの記事一覧*/

.blog_list { width:930px; margin:0 auto; display:flex; flex-wrap:wrap; }
.blog_list .item { position:relative; width:50%; }
.blog_list .animate_background { display:block; width:100% !important; height:270px !important; position:relative; z-index:1; overflow:hidden; }
.blog_list .image { width:100%; height:100%; position:relatiive; }
.blog_list .image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }
.blog_list .category { padding:0 25px; font-size:14px; min-width:130px; height:40px; line-height:40px; background:#fff; text-align:center; display:inline-block; position:absolute; left:40px; transform: translate3d(0,-100%,0); z-index:2; }
.blog_list .content { background:#fff; height:155px; padding:32px 40px; position:relative; }
body.hide_blog_date .blog_list .content { display:flex; flex-wrap:wrap; align-items:center; }
.blog_list .content:after { content:''; display:block; width:1px; height:100%; position:absolute; top:0px; right:0px; background:#ddd; z-index:2; }
.blog_list .item:nth-child(2n) .content:after, .blog_list .item:last-of-type .content:after { display:none; }
.blog_list .title { font-size:18px; line-height:1.8; width:100%; text-align: left;}
.blog_list .title a { display:block; height:3.6em; overflow:hidden; visibility:visible; width:100%; word-break:break-word; color: #000;}
.blog_list .title a:hover {color:#b30046;}
.blog_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; }
body.hide_blog_date .blog_list .title a { height:auto; max-height:5.4em; }
body.hide_blog_date .blog_list .title span { -webkit-line-clamp:3; }
.blog_list .date { font-size:14px; color:#999; display:block; position:absolute; bottom:36px; }

@media only screen and (max-width: 1221px) {
.blog_list { width:auto; margin:0 100px; }
.blog_list .animate_background { height:auto !important; aspect-ratio:465/270; }
.blog_list .category { left:30px; }
.blog_list .content { padding:32px 30px; }

@media only screen and (max-width: 1000px) {
  .blog_list { width:auto; margin:0 60px; }
}
@media only screen and (max-width: 800px) {
	body.search #archive_blog { margin-top:0; padding-top:0; }
	body.search #bread_crumb { border-bottom:none; }
	#no_post { margin-top:0px; }
  .blog_list { margin:-1px 0 0 0; }
  .blog_list .content { background:#fff; height:130px; padding:15px 20px; }
	body.hide_blog_date .blog_list .content { padding:30px 20px; }
	.blog_list .category { padding:0 15px; font-size:12px; min-width:100px; height:30px; line-height:30px; left:20px; }
	.blog_list .title { font-size:14px; line-height:1.6; }
  .blog_list .title a { height:4.8em; }
  body.hide_blog_date .blog_list .title a { max-height:4.4em; }
  .blog_list .title span { -webkit-line-clamp:3; }
	.blog_list .date { font-size:12px; bottom:20px; }
}
}

.update{display:none!important;}

#header_slider .overlay{pointer-events: none;}
#header_slider .item1 .overlay {
    background-color: rgba(0, 0, 0, 0.2)!important;}