@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.2
*/

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

/* フォントの適用 */
 @font-face{
font-family: "mameron3";
src: url("https://www.kanade-mc-sanda.com/wp-content/themes/cocoon-child-master/fonts/mameh_woff/Mamelon-3.5HiRegular.woff2");
}

 @font-face{
font-family: "mameron4";
src: url("https://www.kanade-mc-sanda.com/wp-content/themes/cocoon-child-master/fonts/mameh_woff/Mamelon-4HiRegular.woff2");
}

 @font-face{
font-family: "mameron5";
src: url("https://www.kanade-mc-sanda.com/wp-content/themes/cocoon-child-master/fonts/mameh_woff/Mamelon-5-Hi-Regular.woff2");
}


address, blockquote, button, dl, input, label, li, ol, p, select, td, textarea, th, ul, h1, h2, h3, h4, h5, h6{
	font-family: mameron5;
	font-family: mameron4;
	font-family: mameron3;
}



h1, h2, h3, h4, h5, h6{
	-webkit-text-stroke: 0.5px;
}

strong{
	font-weight: 400;
	-webkit-text-stroke: 1px;
}


/* リセットcss */
a{
	text-decoration: none;
	color: #333;
}


ul{
	list-style: none;
	padding : 0px;
}

.article h2, .article h3, .article h4, .article h5, .article h6 {
   margin-top: 20px;
	background-color: transparent;
}


.reset-margin-bottom{
    margin-bottom: 0 !important;
}

.entry-content{
	margin-bottom: 0;
}



/******************************
  トップページのみ目次を非表示 
*******************************/
.home.page .toc {
 display: none;
}

.author-info{
	display: none;
}

 table.noborder{	
	background-color: transparent;
} 
 
table th, table td, table tr:nth-of-type(2n+1){
	background-color: transparent;
}

.noborder> tbody> tr> th, .noborder> tbody> tr> td{
	border: none;
}

.noborder> tbody> tr> th{
	text-align: left;
}


/* ****************************
 フォント設定
*******************************/
html body{ 
	font-family: "M PLUS Rounded 1c"; 
}

.txts{
	font-size: 15px;
	font-weight: 300;
}

.txtm{
/* 	font-size: 30px; */
	font-weight: 300;
}

.txtl{
	font-size: 60px;
}

a:hover{
	color: #ffb368;
}

/* *********************
 本文設定 
************************/
.main{
	padding: 0 !important;
}


/* *************************
パーツ設定
****************************/

/* リンク を全体に*/


.h2-title{
	margin-bottom: 0 !important;
	padding: 25px 0 10px 0 !important;
}


/* 背景設定 */

.header-container, .main, .navi, .footer {
  background-color: transparent;
}

.bg-color{
	background-color: #faf5f0;
}

.bg-white{
	background-color: #fff;
}

.bg-black{
	background-color: #000;
}

.border{
	border: 1px solid #cdcdcd;
	border-radius: 20px;
}



/*********************************
 ここをコメントアウト 
*********************************/
/* .round img, .news img, .blog img{
	border-radius: 20px !important;
	-webkit-border-radius: 20px !important;
	-moz-border-radius: 20px !important;
} */
/* ここまでコメントアウト */

.card-thumb > img, .news-img > img, .blog-img > img{
	border-radius: 0.5em;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}

/* ボタン設定 */
.tel-botton-orenge{
    background-color: #ffb469;
	position:relative;
	max-width: 384px;
    padding: 8px 30px;
    margin: 0 auto 20px;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}

.tel-botton-orenge a{
	position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.tel-botton-orenge:hover {
  opacity: 0.8;
	transition: all 0.3s ease-in-out;
}

.botton-orenge{
    background-color: #ffb469;
	position:relative;
	max-width:386px;
    padding: 8px 30px;
    margin: 0 auto 20px;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}

.botton-orenge a{
	position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.botton-orenge:hover {
	color: #333;
  opacity: 0.6;
	transition: all 0.3s ease-in-out;
}

.teln{
	font-size: 25px;
	font-weight: bold;
}

.map{
	font-weight: 500;
}

.botton-blue{
	flex-shrink: 0;
	position:relative;
	background-color: #69baff;
   max-width: 382px;
	height: 42px;
   padding: 5px 20px 5px 20px;
	text-align: center;
   border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
   box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}

.botton-blue a{
	position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.botton-blue:hover {
  opacity: 0.6;
	transition: all 0.3s ease-in-out;
}

.a-wrap:hover, .widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover {
	border-radius: 8px;
}

/* リンクを要素全体に */

/* table */
table{
	background-color: #fff;
}

/* flex配置 */

.reversebox{
	display: flex;
} 

/* 目次 */
.toc-center {
	margin: 0 auto;
}

/* h3標準表示にする */
.h3-style{
	border-left: 7px solid #888;
   border-right: 1px solid #ddd;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   font-size: 22px !important;
   padding: 12px 20px !important;
}

/* H4標準表示にする */

.h4-style{
	border-left: none !important;
    border-right: none !important;
	border-top: 2px solid #ddd !important;
   border-bottom: 2px solid #ddd !important;
	font-size: 20px !important;
	padding: 9px 10px !important;
}


/* ************************************
headerのタグラインとロゴを非表示
************************************ */

/* header-tagline */
.tagline{
	display:none;
}
/* header-logo logotext */
.logo {
	display:none;
}

/* **********************************
ここからbodyのcss
********************************** */

/* bodyの幅設定 */
.content-in{
	width: auto;
	margin: 0 auto !important;
	justify-content: center;
}

/* header-container */
.content{
	margin: 0 auto;
}

.home .content-in{
	padding: 0;
}

.content-in{
	padding: 40px 100px;
}


.entry-content {
    margin-top: 0px;
}


/***************************************
ここからヘッダー
*****************************************/

.add-header-contents{
	margin: 0 60px;
}

/* サイトタイトル */
.header-in {
	margin: 0 auto;
   padding: 30px 0px 0px 0px;
}

.header-contents{
	display: flex;
	justify-content: space-evenly;
}

.header-contents-warp{
	margin-top: 30px;
   min-width: 260px;
	text-align: center;
}

.header-title-container{
   display: inline-block;
	width: 100%;
   height: 70px;
   position: relative;
}

.header-title-warp{
    display: flex;
    flex-direction: column-reverse;
}


h1 a {
    color: #ef9236;
}

/* 受付・営業時間 */
.reseption-contents{
	width: 460px;
	margin-right: 30px;
	margin-bottom: 20px;
}

.reseption-contents > p{
	font-size: 15px;
}
.reseption-table>table{
	min-width: 350px;
	min-height: 120px;
	font-size: 15px;
	text-align: center;
}


/* 電話・住所 */
.top-navi, .bottom-navi{
	margin: 10px 0;
	max-width: 386px;
}

/* 電話 */
.tel-box{
	line-height: 1.8em;
	padding-bottom: 5px;
}

.tel-box > img{
	position: absolute;
	width: 40px;
	height:40px;
	margin: 15px 15px 0 10px;
}

.tel-box > p{
	display: inline-block;
	vertical-align: middle;
}


.tel p{
	line-height: 15px;
	display: block;
   text-align: center;
   padding: 8px;
}

.tel a{
	font-size: 25px;
	font-weight: bold;
}


/* 住所 と経路案内*/
.access{
	display: flex;
	margin-bottom: 10px;
}
.access > p{
	font-size: 15px;
   margin: 0 70px 0 30px;
   line-height: 22px;
}

.access-box > p{
	font-weight: bold;
}

/***********************************
 フロント固定ページの設定
************************************/
.home.page .entry-title{
  display: none;
}

.home .date-tags {
	display: none;
}

.home .main{
	padding: 0;
}


/* グローバルメニュー */
.navi-in{
	max-width: 1280px;
}

.navi-in a{
	font-size: 15px;
}

.navi-in > ul{
	justify-content: space-around;
}

.navi-in > ul > li {
	height: 36px;
   line-height: 36px;
	color: #fff; 
	background-color: #ffb469;
	border-radius: 6px 6px 0 0;
}

.navi-in a:hover{
	height: 36px;
	line-height: 36px;
	background-color: #fff;
   border-left: 1px solid #ffb469;
   border-right: 1px solid #ffb469;
   border-top: 1px solid #ffb469;
   border-bottom: 3px solid #ffb469;
   border-radius: 7px 7px 0 0;
	transition: all 0.3s ease-in-out;
}

/* *****************************
ここからmain
***************************** */
.wp-block-group__inner-container{
	max-width: 1340px;
	margin: 0 auto;
	padding:0 60px;
}

.main{
	border: none;	
}

.top-contents-box{
	padding-bottom: 20px;
}

.main-contents-box{
	max-width: 1200px;
	margin: 0 auto;
}

/* notice（新着（お知らせ・ブログ）） */
.notice-content{
	background-color: #faf5f0;
}

.notice-continer{
	margin-bottom: 30px;
}

.what-new{
	margin-bottom: 60px !important;
}

.news-list-container , .blog-list-container{
	background-color: #fff;
	max-width: 700px;
	padding : 0 20px;
}

.news-list-container > p , .blog-list-container > p{
	margin-top: 1em;
	margin-bottom: 1.5em;
}

.news-list, .blog-list{
	margin-bottom: 10px !important;
}

.news-list-title , .blog-list-title{
	font-size: 20px;
	font-weight: bold;
}


.news-img, .blog-img{
	margin-right: 15px !important;
	float: left;
}

.news-list-container{
	max-width: 40%;
}

.blog-list-container{
	max-width: 60%;
}

.blog-list-content, .news-list-content{
	margin-bottom: 10px;
	position: relative;
}

.blog-list-content > a, .news-list-content > a{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blog-list-content:hover, .news-list-content:hover{
   background-color: #f5f8fa;
	border-radius: 8px;
	transition: all 0.3s ease-in-out;
}

.blog-img > img, .news-img > img{
	max-width: 100px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}

.news-list-content:after, .blog-list-content:after{
	content:"";
	clear: both;
	display: block;
}

.blog-cts a{
   width: 100%;
   height: 100px;
   top: 0;
   left: 0;
}

.news-cts a{
   width: 100%;
   height: 60px;
   top: 0;
   left: 0;
}

.news-cts:hover, .blog-cts:hover{
	color: #cdcdcd;
	border-radius: 8px;
	transition: all 0.3s ease-in-out;
}

.news-cts-time, .blog-cts-time{
	background-color: #5d5d5d;
   padding: 1px 6px;
   border-radius: 5px;
   color: #fff;
}

.main-content > .wp-block-group__inner-container{
	margin: 0;
	padding: 0;
}



/* そのお悩みお聞かせください */
/* こんな方も来院されています */
.visit{
	padding-bottom: 20px;
}

/* PROFILE */
.profile{
	background-image: url(https://www.kanade-mc-sanda.com/wp-content/uploads/2021/04/index_main_profile-bg.png);
	background-size: cover;
	padding: 50px 100px;
}

.profile-container{
	background-color: rgba(255, 255, 255, 0.6);
	background-blend-mode: lighten;
	
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.profile-container > h2{
	margin: 0;
}

.profile-content{
	justify-content: center;
	align-items: center;
	margin: 0 !important;
}

.profile-img{
	padding: 0 10px;
}

.profile-content{
	padding: 0 20px 20px;
}

.name{
	margin-bottom: 1.2em;
}

.name >p{
	margin: 0;
}

.profile-btn-txt{
	font-weight:500;
}

/* bottom-navi */
.bottom-navi{
	margin: 10px auto;
	max-width: 386px;
}

/***********************************
ここからsidebar
************************************/
.sidebar{
/* 	width: auto; */
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.sidebar h3{
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.sidebar-blog-img{
	float: left;
	margin-right: 10px;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.sidebar-blog-img img{
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.sidebar-blog-list{
	clear: both;
	padding-bottom: 30px;
}

.sidebar-profile a, .sidebar-treatment a{
	 color: #333;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
}

.sidebar-profile :hover, .sidebar-treatment :hover{
	display: block;
	color: #333;
	background-color: #f5f8fa;
	border-radius: 8px;
	transition: all 0.3s ease-in-out;
}

/* ***********************************
ここからfooter
*********************************** */
/* footer全体 */
.footer{
	margin-top: 1px;
}

.footer-bottom {
   margin-bottom: 20px;
	margin-top: 20px;
}

.footer-in{
	margin: 0 auto;
}

.footer-left, .footer-center, .footer-right {
    padding: 10px 60px;
}

/* footer-left */
.footer-left{
	width: 50%;
}

/* footer-center */
.footer-center{
	width: 50%;
}

.footer-map{
	margin-top: 83px;
	text-align: center;
	font-size: 30px;
}

.footer-map > img{
	margin-bottom: 60px;
	border-radius: 20px;
}

/* fo0ter-right */
.footer-menu > .menu-main-menu-container ul li{
	width: 200px;
}

.footer-menu > .menu-main-menu-container a{
	padding :0 20px;
}

.footer-menu > .menu-main-menu-container a:hover{
	display: block;
	color: #333;
   background-color: #ffb368;
	border-radius: 8px;
	transition: all 0.3s ease-in-out;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1896px以上 */
@media screen and (min-width: 1896px){
	.content-in{
		width: 1960px;
	}
	.main{
		display: block;
		width: 1150px;
		margin-right: 40px;
	}
	.sidebar{
		width: 570px;
	}
}


/* 1230px以下 */
@media screen and (max-width: 1230px){
.header-container{
		margin-bottom: 1px;
}
	
.access{
	display: block;
}

.access > p {
    display: none;
}

.tel-box > img{
		display: none;
}
	
.teln, .botton-orenge >p{
    font-size: 18px;
    font-weight: 500;
}

.botton-orenge{
	text-align: center;
}
	
.footer-left, .footer-center, .footer-right {
    padding: 10px 30px;
}

}

/* 1056px以下 */
@media screen and (max-width:1056px){
	.navi-in > ul li {
		width: 136px;
	}
	
	 .content-in {
    padding: 40px 30px;
	}
	
}


/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/

.txts{
	font-size: 15px;
}
	
.txtm{
	font-size: 15px;	
}

.txtl{
	font-size: 20px
}

	
#main.main{
	margin: 0;	
}
	
	.main{
		padding: 20px 29px !important;
	}
	
	.home .main{
		padding:0 !important;
	}

.content-in{
	padding: 0px;
}
	
.wp-block-group__inner-container {
    margin: 0;
    padding: 0 60px;
}	

.wp-block-spacer{
	display: none;		
}
	
.header-contents{
	display: none;		
}
	
.header-in {
    margin: 0 auto;
    padding: 0;
}

.tel {
	padding: 5px 10px;
}
	
/* header-tagline */
.tagline{
	display: block;
}
/* header-logo logotext */
.logo {
	display: block;
}
	
.logo-text {
    padding: 0;
}

/* main */
.what-new{
	margin: 0 20px;
	padding-top: 20px;
}
	
.news-list-container, .blog-list-container{
	max-width: 100%;
}

.blog_list, .news_list {
	margin-bottom: 0;
}

.blog-img, .news-img{
	margin-right: -7px !important;
}
	
.blog-img > img, .news-img > img{
	max-width: 80% !important;
}
	
.name > p{
	margin: 0 !important;
}

.profile-container{
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}	
	
/* 	footer */
.footer-widgets {
    display: block;
}

.footer-map{
	font-size: 18px;
}
	
	.footer-right{
		display: none;
	}
	
	/*  アーカイブ*/
/* お知らせのアーカイブページ */
.post-type-archive-news h1#archive-title:before{
	font-size: 18px;
}
/* ブログのアーカイブページ */
.post-type-archive-blog h1#archive-title:before{
	font-size: 18px;
}
	
}




/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

h1, h2, h3, h4, h5, h6, table th, table td, ul, li, p{
	font-size: 15px;
}
	
.article ul, .article ol {
    padding-left: 0;
}
	

.wp-block-group__inner-container {
   padding: 0 20px 20px;
}	

.wp-block-image img {
    padding: 0;
}

.notice-continer {
    margin: 0;
}	

.top-contents-box{
	padding: 0;
}

.what-new{
	margin-bottom: 20px !important;
}
	
.news-list-container, .blog-list-container {
    margin: 0 0 20px;
    padding: 10px;
}

.profile{
	padding: 0;
}
	
.profile-img, .profile-content{
	text-align: center;
}
	
}


/* 768px以下 */
@media screen and (max-width: 768px){
.news-list-container > p, .blog-list-container > p {
    margin-top: 0;
    margin-bottom: 15px;
}

}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
.article ul, .article ol {
   padding-left: 0;
}

.what-new{
	margin: 0 auto;
}
	
.news-list-container > p, .blog-list-container > p {
    margin-top: 0; 
    margin-bottom: 10px;
}
	
.reversebox{
  flex-direction: column;
 }

.order1{
	order: 1;
	margin-bottom: 20px !important;
}
.order2{
	order: 2;
}
	
.footer-left, .footer-center{
	padding: 0 20px;
}
	
.noborder >table{
	font-size: 15px;
}
	
.noborder> tbody> tr> th{
	width: 20%;
}

.noborder> tbody> tr> td{
	width: 80%;
}
	
}

@media screen and (max-width: 280px){
	.news-img, .blog-img {
		display: none;
	}
	
	.botton-orenge {
    padding: 8px 26px;
	}
}