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

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

/* 固定ページの日付を非表示 */
.page .date-tags {
  display: none;
}
.page .article h2 {
	padding:12px;
}


/*header キャッチフレーズ　*/
#header .logo .site-name-text {
font-size:46px;
font-weight:600;	
color: black;
-webkit-text-fill-color: white; /* （順序に関係なく）色を上書きする */
-webkit-text-stroke: 2px black;	
}
supports (-webkit-text-stroke: 3px black) {
#header .logo .site-name-text {
    -webkit-text-fill-color: white;
    -webkit-text-stroke:2px black;
  }
}


/* link　*/
.wp-block-button__link {
background-color: #cc0066;
}
.wp-block-button__link:hover {
color: #ffffff;
background-color: #3300cc;
}


.header-container-in.hlt-top-menu {
	background-color:black;
}
.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: 40px;
vertical-align: middle;
margin-top: -25px;
}
.tagline {
	color: #ffffff;
	background-color:#CC0066;
	padding: 5px 25px;
	margin-left: 30px;
	width: 205px;
	margin-top: 15px;	
}

.logo {
text-align: left;
}
.logo-image {
	padding:  0;
}
#header .tagline {
margin-left: 25px;
}

/* 
* gnavi
*/

#navi .navi-in > ul > li{
border-right: 1px solid #ffffff;
height: 40px;
	
}

#navi .navi-in > ul > li:last-child{
border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
} 
.navi-in a {
	font-size:20px;
}


/* home button　*/
.breadcrumb-home {
	font-size:18px;
	margin-left: -10px;
	color: DeepPink;
	}

/* space　*/
.mt20 {
	margin-top:20px;
}
/* H1見出しのサイズを大きく、padding-leftを左端に揃える */
.article h1 {
	font-size: 1.7em;
	padding-left: 0;
}



/* H2見出しの色と背景色を変更 */
.article h2 {
    color: #000000;           
    background: #ffffff;  
    border-left: none; 
	border-bottom: 1px solid #000000;   
	padding: 10px;   
}
/* H4見出しの色と背景色を変更 */
.article h4 {
	display: inline-block;
	border-top: none;
	padding-right: 100px;
}
/* 申し込みフォームの名前 */
div.form-p-name {
	width: 60% !important; 
	min-width: 300px;
}
/* 申し込みフォームのemail */
div.form-p-email {
	width: 60%; 
	min-width: 350px;
}

/* 申し込みフォームの日時セレクト */
div .date-field {
    /* 上下の余白を調整 */
	width: 200px; 
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*********************************
** ▼PC用デザイン
************************************/
@media (min-width: 1024px) {
　/* 個別ページの横幅のみ適用 260322 */
.no-sidebar .content .main {
	width: 86%;
　　margin-left:7%;
}
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
 #navi .navi-in>.menu-mobile li a {
  	font-size: 20px;  /*250918*/
  }

.navi-in>ul .caption-wrap>div {
	width: 100%;
	padding-left:0;
	}	
 /* メニューの下に白い罫*/
#navi .navi-in > ul > li{
border-bottom: 1px solid #ffffff;
	
}	
#navi .navi-in>.menu-mobile li {
		width:25%;
	}
}

/*834px以下*/

/* ロゴの幅 */
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
   #navi .navi-in>.menu-mobile li a {
  	font-size: 15px;  
}

.site-logo-image　{
visibility: hidden;
	}	
.logo-header.logo-image　{
background-image: url(http://www.stainedglass.wantolife.net/wp-content/uploads/2026/02/logo_w175.png);
background-size: 30%;
background-position: 23px;
background-repeat: no-repeat;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	#navi .navi-in>.menu-mobile li {
		width:50%;
	}
	#navi .navi-in>ul>li:nth-child(even) {
		border-right-width:0 !important;
	}
	
/* スマホ用のロゴ */
.site-logo-image　{
visibility: hidden;
	}	

.logo-header.logo-image　{
background-image: url(http://www.stainedglass.wantolife.net/wp-content/uploads/2026/02/logo-mobile_w1200.png);
background-size: 30%;
background-position: 20px;
background-repeat: no-repeat;
}
	
#header .tagline {
	padding: 5px 11px;
	margin-left: 20px;
	width: 158px;
	margin-top: 35px;
	}	
	
}	

 /* 改行  */
.br-560 {
	display:none;
}
@media screen and (max-width: 560px) {
.br-560{
    display: inline; 
  }
}

.br-480 {
	display:none;
}
@media screen and (max-width: 480px) {
.br-480 {
    display: inline; 
  }
}