@charset "utf-8";

html{scroll-behavior: smooth;}
#wrap{overflow:visible;}

header{background:#000;}
.single-therapists h1{display:block;padding:0.3em ;text-align:center;}
h1 a img{max-width:150px;}
nav{background:url(/wp/wp-content/uploads/bg_flower.png) #222;border-top:solid 2px #974;}
nav a{display:grid;place-content:center;height:60px;padding:0;font-size:1.4em;font-family:"Tangerine",serif;font-weight:bold;line-height:0.7;color:#b79f76;background:none;}
nav a:hover{opacity:0.8;color:#7d6c4f;}

/*トップ画像*/
#helo{position:relative;display:grid;place-content:center;
	background:
		url(/wp/wp-content/uploads/couner_1.png) no-repeat top left,
		url(/wp/wp-content/uploads/couner_2.png) no-repeat top right,
		url(/wp/wp-content/uploads/couner_3.png) no-repeat bottom left,
		url(/wp/wp-content/uploads/couner_4.png) no-repeat bottom right,
		linear-gradient(90deg, #000, #1f1f1f 50%, #000);
}

#helo div{position:static;text-align:center;}



h2{font-size: clamp(1.8em, calc(1.8rem + ((1vw - 0.234375em) * 0.6214)), 2.4em);}
h2::before{content:none;}
/*
h2::before{margin:0 auto 1em;padding-top:1em;padding-bottom:0.2em;border-bottom:solid 1px #974;
font-size:0.8em;font-family:Tangerine,serif;
background:url(https://bar-2face.com/wp/wp-content/uploads/bijou_h2_img1.png) no-repeat top center;
}
*/
h2 span,h3 span{display:block;}

#link{display:none;}

#weekday_schedule ul.week_calendar li.target a{background:#974!important;}

#sns{display:none;}


main > section{position:relative;border-bottom:solid 2px #974;}
main > section::before{content:'';display:block;width:40px;height:20px;background:url(/wp/wp-content/uploads/sec_img.png) no-repeat center;background-size:contain;
	position:absolute;left:50%;top:0;transform:translateX(-50%) rotateZ(180deg);z-index:10;}
main > section::after{content:'';display:block;width:40px;height:20px;background:url(/wp/wp-content/uploads/sec_img.png) no-repeat center;background-size:contain;
	position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:10;}
#bunny section .box{max-width:700px;padding:5em 1.4em;}
#bunny #helo{padding:0;height:auto;}

#therapist_content{padding:1em;}
@media (width >= 600px){
	#therapist_content{padding:4em 1em;}
}

#therapists_post {box-sizing:border-box;        max-width: 960px;        margin: auto;   
    padding: 1em;
    box-shadow: 0 0 1.4em rgba(0,0,0,.15);
}

#therapists_post article {    margin-bottom: 4em}

#therapists_post #top {    margin-bottom:1em;}
#therapists_post #top div {display:flex;align-items:center;}
#therapists_post #top div::before,#therapists_post #top div::after {flex:1;content: "";display: block;width:100%;max-width:30px;aspect-ratio:43 / 30;background:url(/wp/wp-content/uploads/name_frame.png) no-repeat center;background-size:contain;}
#therapists_post #top div::before{}
#therapists_post #top div::after{transform:rotateY(180deg);}
#therapists_post #top h2 {flex:1;text-align:center;    margin: 0 auto;padding:0;    font-size: 2em;border:solid 2px #222;  /*  grid-template-columns: 1fr auto 1fr;*/}
#therapists_post #top h2::before,#therapists_post #top h2::after{content:none;}
#therapists_post #top h2 span {	display:block;	padding:0 1rem;    font-size: inherit;    color: #222}



#therapists_post #top h2 ruby {
    display: block;
    padding-top: .5em;
    text-align: center;
    font-size: .6em
}

#therapists_post #bread {
    display: none
}

#therapists_post .therapist_top {
    overflow: hidden;
    margin-bottom: 4em;
    color: #333
}
@media (width >= 600px){
	#therapists_post .therapist_top {
        display: flex;
        justify-content: space-between;
		
    }
	#therapists_post .therapist_top div:first-of-type {
        width: 45%;
    }
	#therapists_post .therapist_top div:last-of-type {
        width: 52%;
    }
}


#therapists_post .therapist_top img.display_photo {
    box-sizing: border-box;
    width: 100%;
    height: 100vw;
    max-height: 650px;
    object-fit: cover;
    object-position: center top
}

#therapists_post .therapist_top #change_photo {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
	gap:0.4em;
    width: 100%;
    margin-bottom: 1em;
    padding: .5em 0
}

#therapists_post .therapist_top #change_photo li {
    width: 20%;
    padding: 0;
    padding-top: 0
}

#therapists_post .therapist_top #change_photo li img {
    width: 100%;
    height: 100%;
    max-height: 80px;
    object-fit: cover;
    object-position: top center;
    transition: opacity .3s
}

#therapists_post .therapist_top #change_photo li img:hover {
    opacity: .8
}

.photo_wrapper {
    position: relative;
   
}

#prev_btn, #next_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    padding: 1em 0.5em;
    cursor: pointer;
    border-radius: 4px;
}
#prev_btn svg, #next_btn svg{width:1em;color:#fff;}
#prev_btn {
    left: 10px;
}

#next_btn {
    right: 10px;
}

#prev_btn:hover, #next_btn:hover {
    background: rgba(0,0,0,0.6);
}

#therapists_post .therapist_top section {
    margin-bottom: 4em
}

#therapists_post .therapist_top h3 {
    position: relative;
    margin: 0 auto 1em;
    padding: .8em;
    background: #f7f1e4
}

#therapists_post .therapist_top p {
    line-height: 1.6
}

#therapists_post .therapist_top table {
    table-layout: fixed;
    position: relative;
    width: 100%;
    margin-bottom: 1em
}

#therapists_post .therapist_top table.table2 {
    margin-bottom: 3em
}

#therapists_post .therapist_top table th,#therapists_post .therapist_top table td {
    padding: .5em 0;
    text-align: center;
    font-size: 1.2em
}

#therapists_post .therapist_top table th {
    background: #f7f1e4
}

#therapists_post .therapist_top .free_text {
    margin-bottom: 2em
}

#therapists_post .therapist_top dl {
    margin-bottom: 2em
}

#therapists_post .therapist_top dt,#therapists_post .therapist_top dd {
    line-height: 1.6
}

#therapists_post .therapist_top dt {
    padding: .8em;
    background: #111;
    color: #fff;
    text-align: center
}

#therapists_post .therapist_top dd {
    padding-top: .8em
}

#therapists_post .therapist_top dl.aside_link li {
    text-align: left
}

#therapists_post .therapist_top dl.aside_link li:not(:last-child) {
    border-bottom: dashed 1px #999
}

#therapists_post .therapist_top dl.aside_link li:before {
    content: '\f005';
    font-family: var(--awesome_font);
    font-weight: var(--awesome_weight);
    margin-right: .5em;
    color: #cc0;
    font-size: .8em
}

#therapists_post .therapist_top dl.aside_link a {
    color: #c36;
    text-decoration: underline;
    line-height: 2
}

#therapists_post .therapist_top dl.aside_link a:hover {
    text-decoration: none
}

#therapists_post .therapist_top .system .description_text {
    margin-bottom: 2em
}

#therapists_post .therapist_top .system dl .text {
    padding: .5em 0;
    font-weight: 700;
    border-bottom: solid 1px #ccc
}

#therapists_post .therapist_top .system dl dt,#therapists_post .therapist_top .system dl dd {
    padding: 0;
    background: 0 0;
    color: #222;
    font-size: 1.1em
}

#therapists_post .therapist_top .system dl div {
    width: 100%
}

#therapists_post .therapist_top .system dl dd div {
    display: flex;
    width: 100%;
    border-bottom: solid 1px #ccc
}

#therapists_post .therapist_top .system dl dd div dt,#therapists_post .therapist_top .system dl dd div dd {
    flex: 1;
    padding: .3em 0;
    text-align: center
}

#therapists_post .krc_calendar {
    display: flex;
    margin: 4em 0;
    border: solid 1px #ccc
}

#therapists_post .krc_calendar div {
    flex: 1;
    display: flex;
    flex-direction: column
}

#therapists_post .krc_calendar div:not(:last-of-type) {
    border-right: solid 1px #ccc
}

#therapists_post .krc_calendar dt,#therapists_post .krc_calendar dd {
    text-align: center;
    padding: 1em 0
}

#therapists_post .krc_calendar dt {
    background: #56544e;
    color: #fff
}

#therapists_post .krc_calendar dt span {
    display: block;
    text-align: center;
    line-height: 1.6
}

#therapists_post .krc_calendar dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

#therapists_post .krc_calendar dd span.v_line {
    display: block;
    line-height: 2;
    transform: rotateZ(90deg)
}

#therapists_post .krc_calendar dd span.h_line {
    display: block
}

#therapists_post .krc_calendar dd span.place {
    display: block;
    margin: .5em .5em 0;
    padding: .5em 0;
    line-height: 1;
    background: #eee;
    color: #111;
    border-radius: 100px
}

#therapists_post #youtube {
    position: relative;
    padding-top: 56.25%;
    margin-top: 3em
}

#therapists_post #youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#therapists_post .cast_name input[type=text] {
    opacity: 1;
    color: #222;
    pointer-events: none
}

#therapists_post #wpforms-1837-field_10-container {
    display: none
}

.wpcf7-form.hide_error_message .wpcf7-not-valid-tip {
    display: none
}

#therapists_post aside {
    padding: 0 1.6em
}

aside h3 {
    margin-bottom: 1em;
    padding: 1em;
    font-size: 1.4em;
    background: #222;
    color: #fff
}

#therapist_list {
    margin-bottom: 2em
}

#therapist_list ul {
	display:grid;
	gap:0.5em;
	grid-template-columns:repeat(auto-fit, 154px);
	justify-content: start;
}
@media (width >= 600px){
	#therapists_post #therapist_list ul {
	grid-template-columns:repeat(auto-fit, 230px);
	}
}
#therapist_list li {
    position: relative;
    box-sizing: border-box;
    text-align: center;
    padding: .5em .5em .8em;
    box-shadow: 2px 2px 5px rgba(0,0,0,.2);
    z-index: 6
}
#therapist_list li img {
    width: 100%;
    aspect-ratio:1 / 1;
    object-fit: cover;
    object-position: top center;
    margin-bottom: .5em
}

#weekday_schedule .cast,#therapist_list li {
    transition: transform .3s
}

#weekday_schedule .cast:hover,#therapist_list li:hover {
    transform: scale(1.1,1.1);
    z-index: 12
}

#therapist_reserved {
    max-width: 400px;
    margin: auto;
    padding: 3em 0
}
aside{max-width:960px;margin:auto;padding:4em 1em;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*481px以上*/
@media screen and (min-width: 481px){
  /*必要ならばここにコードを書く*/
#helo img{max-width:600px;}

}

/*641px以上*/
@media screen and (min-width: 641px){
header{padding:0.3em 1em;}
	h1 a img{max-width:200px;}
	nav a{box-sizing:border-box;padding:1em 2em;font-size:1.6em;}
	#therapists_post{padding:4em;}
}

/*1025px以上*/
@media screen and (min-width: 1025px){
  /*必要ならばここにコードを書く*/
	#helo {}
	#helo div{display:grid;}
	nav{background:none;border:none;}
}