@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

main#main.main{padding:0;border:none;}
.content{margin-top:0;}
.header-container{height:0;}
div#content-in.content-in.wrap{width:100%;}
body:not(.home) .content-in{justify-content:space-around;width:90%!important;}
.container{font-weight:500;}
.no-sidebar .content-in{margin:0;width:100%;}
.logo-text {padding: 20px 0;}
.content {margin-top:0;}
.tagline{display:none;}
.site-name-text{font-size:40px;color:#957c46;font-weight:bold;font-family:"Hiragino Mincho ProN",YuMincho,serif;}
.header-in{width:100%;position:absolute;top:0;z-index:3;background:transparent;}
.header-inner{width:90%;margin:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.header-menu {width:50%;}
.header-menu ul{display:flex;flex-direction:row;justify-content:space-between;padding-left:0;}
.header-menu ul li{list-style:none;}
.header-menu ul li a{text-decoration:none;color:#000;font-size:120%;}
.cf::after {display:none;}
.contact{line-height:1.3;}
.header-tel{font-size:230%;color:#F96B8C;font-weight:bold;}

#g-nav{display:none;}
.fv{background:url(img/fv.png);background-size:cover;background-repeat:no-repeat;height:100vh;display:flex;align-items:center;justify-content:center;background-position:center;}
.fv div{text-align:center;}
.catch1{font-size:160%;}
.catch2{font-size:190%;color:#F96B8C;font-weight:bold;}

#about{background:url(img/about-bg.png);background-size:cover;background-repeat:no-repeat;height:120vh;display:flex;align-items:center;justify-content:center;background-position:center;}
.about-bx{margin:auto;padding:40px 0;width:70%;background:rgb(255,255,255,0.7);position: relative;border-radius:50px;}
.about-1{font-size:230%;text-align:center;padding-bottom:30px;}
.small{font-size:80%;}
.about-2{font-size:20px;text-align:center;}
.about-button{text-align:center;margin-top:50px;}
.btn{position: relative;overflow: hidden;text-decoration:none;display:inline-block;border:1px solid #555;padding:20px 40px;text-align:center;outline: none;   transition:ease .2s;font-size:20px;}
.btn span {position: relative;z-index:3;color:#fff;}
.btn:hover span{color:#000;}
.bgtop:before {content: '';position: absolute;top:0;left: 0;z-index: 2;background:#fff;width:100%;
height:0;transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;}
.bgtop:hover:before{height:100%;background-color:#fff;}

#medical-info{padding:100px 0;}
.h2-medical{text-align:center;font-size:36px;position:relative;margin-bottom:50px;}
.h2-medical::before{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl1.png);background-size: contain;margin-right: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.h2-medical::after{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl2.png);background-size: contain;margin-left: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.inner{width:80%;margin:auto;}
.medical-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;margin:30px 0 0 0;}
.medical-ctt{width:48%;margin-bottom:30px;}
.medical-img img{border-radius:10px;}
.h3-top{text-align:center;font-size:150%;margin-bottom:20px;}
.info-txt p{font-size:110%;text-align:center;}
.medical-ctt p{font-size:110%;}
.more-bx{display:flex;justify-content:center;margin-top:70px;}
.more-btn {max-width:230px;width:100%;padding:10px 25px 8px 40px;position: relative;text-decoration: none;outline: none;display: flex;justify-content: space-between;align-items: center;border-radius: 9999px;color: #fff;background-color:#957c46;border: 1px solid #957c46;transition: all 0.3s ease;font-weight:bold;font-size:16px;}
.more-btn .arrow {width:35px;height:35px;display: grid;place-items: center;background-color:transparent;border-radius: 40px;border:solid 1px #fff;overflow: hidden; transition: all 0.3s ease;}
.more-btn .arrow span { position: relative;right: 2px; width: 16px;height:4px;border-bottom: 1px solid #fff;border-right: 2px solid #fff;transform: skew(45deg);transition: all 0.3s ease;}
.more-btn:hover {color:#957c46;background:transparent;}
.more-btn:hover .arrow {background:transparent;border:solid 1px #957c46;}
.more-btn:hover .arrow span {border-color:#957c46;right:-2px;}

#news{padding:100px 0;background:#F9D6CF;}
.h2-news{text-align:center;font-size:36px;position:relative;margin-bottom:50px;}
.h2-news::before{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl3.png);background-size: contain;margin-right: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.h2-news::after{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl4.png);background-size: contain;margin-left: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.news-bx{border-radius:50px;background:#fff;margin:auto;width:80%;padding:50px 0;}
.t-list {border-bottom:solid 1px #ccc;padding:15px 0;width:70%;margin:auto;}
.ut-list {border-bottom:solid 1px #ccc;padding:15px 0;width:70%;margin:auto;}
.new {color:#000;display:flex;justify-content:space-between;transition:0.7s;align-items:flex-end;}
.new span{width:90%;}
.new .arrow {width:35px;height:35px;display: grid;place-items: center;background-color:transparent;border-radius: 40px;border:solid 1px #000;overflow: hidden; transition: all 0.3s ease;}
.new .arrow span { position: relative;right: 2px; width: 16px;height:4px;border-bottom: 1px solid #000;border-right: 2px solid #000;transform: skew(45deg);transition: all 0.3s ease;}
.new:hover {color:#F96B8C;background:transparent;}
.new:hover .arrow {background:transparent;border:solid 1px #F96B8C;}
.new:hover .arrow span {border-color:#F96B8C;right:-2px;}

/*schedule*/
#schedule{padding:100px 0 200px 0;background:url(img/hour-bg.png);background-repeat:no-repeat;background-position:center bottom;background-size:60%;}
.h2-schedule{text-align:center;font-size:36px;position:relative;margin-bottom:50px;}
.h2-schedule::before{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl5.png);background-size: contain;margin-right: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.h2-schedule::after{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl6.png);background-size: contain;margin-left: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.schedule-inner{width:60%;margin:auto;}
.hours-bx{width:45%;}
table tr:nth-of-type(2n+1){background-color:transparent;}
table:not(.has-border-color) :where(th, td){border:none;}
table th{background-color:#fff;border-top:none!important;}
.schedule-hour th{border-top:1px solid #000;background:transparent;}
.schedule-hour th, .schedule-hour td{padding: 10px 20px;text-align: center;border-bottom:1px solid #000;}
.schedule-hour th.sat{color: #3db2da;}
.schedule-hour th.sun{color:#e66a6a;}
.worry-bx{border-radius:20px;background:#F96B8C;padding:30px;margin-top:50px;text-align:center;color:#fff;}

/*footer*/
.h2-footer{text-align:center;font-size:36px;position:relative;margin-bottom:50px;}
.h2-footer::before{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl7.png);background-size: contain;margin-right: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.h2-footer::after{display: inline-block;width: 50px;height: 50px;content: "";background: url(img/ttl8.png);background-size: contain;margin-left: 10px;background-repeat: no-repeat;position: relative;top: 10px;}
.footer {margin:0;padding:0;}
.footer-bottom {margin-top:0;padding:0;}
#footer-area{padding:100px 0;background:url(img/news-bg.png);background-size:cover;background-repeat:no-repeat;}
.schedule-bx{display:flex;flex-direction:row;justify-content:space-between;width:70%;margin:auto;}
.address-bx{width:43%;text-align:left;}
.tel{font-size:230%;color:#F96B8C;font-weight:bold;}
.address{font-size:18px;}
.h4-top{margin-top:10px;}
.map{width:55%;}
iframe{border-radius:20px;}
.tel{text-decoration:none;}
.footer-in.wrap.cf{width:100%;}

/*下層ページ*/
body:not(.home) .content-in {justify-content:space-around;}
body:not(.home) .content {margin-top:100px;}

.h1-under{text-align:center;}
.h2-under{position:relative;text-align:center;margin-bottom:50px;}
.h2-under::before{background-color:#F96B8C;border-radius:5px;bottom:-5px;content: "";height: 3px;left: 50%;position: absolute;transform: translateX(-50%);width:30px;}
.under-inner{width:80%;margin:auto;margin-bottom:100px;}
.under-inner2{width:70%;margin:auto;margin-bottom:100px;}

/*よくある質問*/
.title-bx-faq{margin-bottom:100px;background:url(img/faq-img.png);background-size: contain;background-position: center bottom;background-repeat: no-repeat;padding: 100px 0 200px 0;width: 60%;margin: auto;margin-bottom:100px;}
.first-txt{text-align:center;width:80%;margin:auto;}
.faq-first{margin:50px auto;padding:20px;border:solid 2px #ccc;width:50%;}
.faq-first ul {margin:0;}
.qa-008 dt {margin-bottom:20px;font-weight:bold;font-size:120%;}
.qa-008 dt::before,
.qa-008 dd::before{margin-right: .4em;}
.qa-008 dt::before{content:"Q.";}
.qa-008 dd{margin: 0 0 40px;padding: 20px;background-color:#f2f2f2;color:#333333;}
.qa-008 dd::before{content: "A.";}

/*お知らせ*/
.title-bx-news{margin-bottom:100px;background:url(img/news-img.png);background-size: contain;background-position: center bottom;background-repeat: no-repeat;padding: 100px 0 200px 0;width: 60%;margin: auto;margin-bottom:100px;}
.first-news{text-align:center;width:80%;margin:auto;}
.pnavi{text-align:center;margin-top:100px;}
.catn{background:#F96B8C;color:#fff;border-radius:20px;padding:5px 10px;}
.page-numbers{border-radius:50%;border:solid 1px #F96B8C;color:#F96B8C;}
.page-numbers.current{background:#F96B8C;color:#fff;}

/*診療内容*/
.title-bx-medical{margin-bottom:100px;background:url(img/medical-img.png);background-size: contain;background-position: center bottom;background-repeat: no-repeat;padding: 100px 0 200px 0;width: 40%;margin: auto;margin-bottom:100px;}
.med-bx1{display:flex;flex-direction:row;justify-content:space-between;margin:30px 0 15px 0;flex-wrap:wrap;}
.med-bx2{display:flex;flex-direction:row;justify-content:space-between;margin:30px 0 15px 0;flex-wrap:wrap;}
.med-img{width:48%;}
.med-img img{border-radius:20px;}
.med-ctt{width:48%;}

/*当院について*/
.title-bx-about{margin-bottom:100px;background:url(img/about-img.png);background-size: contain;background-position: center bottom;background-repeat: no-repeat;padding: 100px 0 200px 0;width: 40%;margin: auto;margin-bottom:100px;}
.clinic-ctt{margin:30px 0 50px 0;border-bottom:solid 1px #ccc;padding-bottom:30px;}
.clinic-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.img-bx{width:50%;}
.img-bx img{width:100%;height:100%;}
.greeting-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.greeting-ctt{width:48%;}
.greeting-img{width:48%;}
.sec{margin:50px 0 100px 0;}
.career-bx{background:#f2f2f2;padding:20px;margin-top:50px;}
.career{text-align:center;}
.name{font-size:120%;border-bottom:solid 1px #ccc;}
.greeting{margin:20px 0;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1300px以下*/
@media screen and (max-width:1300px){
.about-1 {font-size: 200%;}
.header-inner {width: 98%;}
.header-tel {font-size: 180%;}
.header-address {font-size: 80%;}	
.about-bx{width: 90%;}
#about {height: 100vh;}
.schedule-bx {width: 90%;}	
}

/*1100px以下*/
@media screen and (max-width:1100px){
  /*必要ならばここにコードを書く*/
.schedule-inner {width: 80%;}
.header-menu ul li a {font-size:100%;}
.site-name-text {font-size: 30px;}
}


@media(min-width:960px){a[href^="tel:"]{pointer-events: none;}}

/*960px以下*/
@media screen and (max-width: 960px){
body:not(.home) .content {margin-top: 140px;}
.tagline{display:block;}
.logo-text {padding: 0;}
.header-inner {flex-direction:column;}
#header .site-name-text {font-size:36px;}
#g-nav{display:block;position:fixed;z-index:10;top:0;right: -120%;width:100%; height: 100vh;filter: drop-shadow(0px 8px 6px rgba(0, 0, 0, 0.16));backdrop-filter: blur(24.50979995727539px);--webkit-backdrop-filter: blur(24.50979995727539px);background-color: rgba(255, 255, 255, 0.7);transition: all 0.6s;}
#g-nav.panelactive{right: 0;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999; width: 100%; height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav ul { position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);padding:0;width:100%;}
#g-nav li{ list-style: none;text-align: center;font-size:17px;}
#g-nav li a{color:#000;font-size:120%;text-decoration: none;margin-bottom:20px;display: block;letter-spacing: 0.1em;}
.openbtn1{position:fixed;z-index: 9999;top:20px;right: 20px;cursor: pointer;width: 50px;height:50px;}
.openbtn1 span{display: inline-block; transition: all .4s; position: absolute;left: 14px;height:2px;background-color:#000;width: 60%;}
.openbtn1 span:nth-of-type(1) {top:15px; }
.openbtn1 span:nth-of-type(2) {top:23px;}
.openbtn1 span:nth-of-type(3) { top:31px;}
.openbtn1.active span:nth-of-type(1) { top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg); width: 60%;}
.openbtn1.active span:nth-of-type(2) { opacity: 0;}
.openbtn1.active span:nth-of-type(3){ top: 30px;left: 18px; transform: translateY(-6px) rotate(45deg);width: 60%;}	
.contact{display:none;}	
.fv{background:url(img/sp-fv.png);background-size:cover;background-repeat:no-repeat;height:100vh;background-position:center;}
.fv div {width: 90%;}	
.catch1 {font-size: 115%;}
.catch2 {font-size: 140%;}
	
#medical-info {padding:50px 0;}
.h2-medical {font-size:24px;margin-bottom:30px;}
.h2-medical::before {width:30px;height:30px;top:5px;}
.h2-medical::after {width:30px;height:30px;top:5px;}
.medical-ctt {width:100%;}
.info-txt p {text-align:left;font-size: 100%;}
.medical-ctt p {font-size: 100%;}	
.more-bx {margin-top: 50px;}
.h3-top {font-size: 130%;margin-bottom: 10px;}	
.about-bx {width:100%;}
.about-1{font-size:20px;}
.about-2{font-size:16px;text-align:left;padding:0 20px;}
	
#news {padding:50px 0;background-size:100%;}		
.h2-news {font-size:24px;margin-bottom:30px;}
.h2-news::before {width:30px;height:30px;top:5px;}
.h2-news::after {width:30px;height:30px;top:5px;}	
.news-bx{width:90%;}	
.ul-news {width:80%;padding:0;}
.t-list{width:80%;}	
	
#schedule {padding:50px 0 100px 0;background-size:100%;}	
.schedule-inner {width:90%;}
.h2-schedule {font-size:24px;margin-bottom:30px;}
.h2-schedule::before {width:30px;height:30px;top:5px;}
.h2-schedule::after {width:30px;height:30px;top:5px;}		
	
#footer-area {padding:50px 0;}	
.schedule-bx {flex-direction:column;width:90%;}
.address-bx{width:100%;margin-bottom:20px;}
.map{width:100%;}
iframe{height:250px;}
.address {font-size:14px;}	
.h2-footer {font-size:24px;margin-bottom:30px;}
.h2-footer::before {width:30px;height:30px;top:5px;}
.h2-footer::after {width:30px;height:30px;top:5px;}	
.tel{text-align:center;display:block;}
.top-box {padding-top: 30px;}
.no-sidebar .content .main{padding:0;}
.header{display:flex;flex-direction:row;}
.inner{width:90%;}

	
.under-inner{width:90%;}	
.h1-under{font-size:26px;}
.title-bx-faq {margin-bottom: 100px;padding: 0 0 100px 0;width:100%;margin-bottom: 50px;}
.faq-first {margin:40px auto;padding:10px;width:100%;}
.first-txt {width:100%;text-align:left;}
.qa-008 dt {margin-bottom: 10px;font-size: 110%;}	
.qa-008 dd {margin: 0 0 20px;padding:10px;font-size:14px;}	
.title-bx-news {margin-bottom: 100px;padding: 0 0 100px 0;width:100%;margin-bottom: 50px;}	
.ut-list {width:100%;}
.title-bx-medical {margin-bottom: 100px;padding: 0 0 100px 0;width:60%;margin-bottom: 50px;}	
.med-bx2{flex-direction:column-reverse;}
.med-img{width:100%;}
.med-ctt{width:100%;}	
.h2-under{margin-bottom:30px;}	
.title-bx-about{margin-bottom: 100px;padding: 0 0 100px 0;width:60%;margin-bottom: 50px;}
.schedule-hour th,.schedule-hour td,.schedule-hour2 th,.schedule-hour2 td{padding: 8px 10px}	
.header-menu {display: none;}
.under-inner2{width:90%;}	
.clinic-ctt {margin: 20px 0 30px 0;border-bottom: solid 1px #ccc;padding-bottom: 20px;}	
.sec {margin: 30px 0 50px 0;}
.greeting-img{width:100%;}
.greeting-ctt{width:100%;}
}