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

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

#header-container-in {
	display: block;
}
#header .grid-container.item-center {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#header .logo {
	text-align: left;
}
#header .custom_header-info {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#header .custom_header-info li:not(:first-of-type) {
	margin-left: 20px;
}
#header .custom_header-info li a {
		color: white;
	}
#header .custom-tel a {
	    font-weight: 600;
    white-space: nowrap;
}
#header .custom-line a {
	display: flex;
    align-items: center;
	justify-content: center;
    font-weight: 600;
    white-space: nowrap;
}
#header .custom-line a svg {
	width: 16px;
}

.navi-in > ul li {
	border-top: 1px solid white;
	border-left: 1px solid white;
}
.navi-in > ul li:last-of-type {
	border-right: 1px solid white;
}
.navi-in a .item-label {
	color: white;
	font-weight: bold;
}


/*非表示*/
.home.page .entry-title,
.home.page .date-tag,
.home.page .date-tags,
.home.page .author-info {
	display: none;
}

.page .entry-title,
.page .date-tag,
.page .date-tags,
.page .author-info,
.admin-pv {
	display: none;
}

.home.page .main {
	background: #faf5eb;
	padding-top: 0;
}

.home.page .main .entry-content {
	margin-top: 0;
}

.home.page .appeal {
    background-size: contain;
	aspect-ratio: 1980 / 925;
}

.home.page .intro {
	margin: 0 calc(50% - 50vw);
   width: 100vw;
   padding-bottom: 80px;
}
.home.page .intro img {
	display: block;
	margin: auto;
	width: calc(100% - 58px);
}

.home.page .column-wrap.column-2 {
	background: white;
	border: 1px solid #428bca;
	padding: 20px;
}

.page-template-default.page .column-wrap.column-2 {
	background: white;
	border: 1px solid #428bca;
	padding: 20px;
}

.home.page .column-wrap.column-3>div {
	background: white;
	border: 1px solid #428bca;
	padding: 20px 16px 40px;
}

.home.page .column-wrap.column-3>div .img-wrap {
	aspect-ratio: 4 / 3;
	margin-bottom: 1.6em;
}
.home.page .column-wrap.column-3>div .img-wrap img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.home.page .column-wrap.column-3>div p:not(:last-child) {
	margin-bottom: 1em;
}

/* TOPと同じstyle */
.page .column-wrap.column-3>div {
	background: white;
	border: 1px solid #428bca;
	padding: 20px 16px 40px;
}

.page .column-wrap.column-3>div .img-wrap {
	aspect-ratio: 4 / 3;
	margin-bottom: 1.6em;
}
.page .column-wrap.column-3>div .img-wrap img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.home.page .column-wrap.column-3>div p:not(:last-child) {
	margin-bottom: 1em;
}

.article h2 {
	background: #428BCA;
	color: #ffffff;
	margin-left: -29px;
	margin-right: -29px;
	margin-bottom: 20px;
	font-size: 32px;
}

.article h3 {
	color: #5F453D;
}

.page-id-159 .article h3 {
	 color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.page-id-159 #content_3_0 {
/* 	padding-top: 130px; */
}

.btn-primary {
	background: #428BCA;
	color: #ffffff;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	#header-container {
		position: fixed;
		top: 50px;
		width: 100%;
	}
	body {
		margin-top: 84px;
	}
	#header .custom_header-info {
/* 		background: #815b3a; */
		background: #f7f7f6;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
		padding: 8px 40px;
	}
	#header .custom_header-info {
		justify-content: center;
		padding: 0;
	}
	#header .custom_header-info li {
		background-color: #428BCA;
		width: 50%;
		margin-left: 0 !important;
		text-align: center;
		font-size: 14px;
	}
	#header .custom_header-info li a {
		width: 100%;
		height: 100%;
		padding: 8px;
	}
	#header .custom-tel a {
		font-size: 18px;
	}
	#header .custom-line a {
		font-size: 18px;
	}
	#header .custom_header-info li:nth-of-type(n + 3) {
		display: none;
	}
	#header-container {
		
	}
	#header-container .navi {
		display: none;
	}
	.navi-in > ul li:last-of-type {
		width: 100% !important;
	}
	.navi-menu-content{
	  background-color: rgba(244,247,247,0.8); 
	}
	.home.page .intro img {
		width: 100%;
	}
	.page-id-159 #content_3_0 {
/* 		padding-top: 165px; */
	}
	.copyright {
		margin-top: 40px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/* 	
 	#header .custom_header-info {
		padding: 8px 20px;
	}
	#header .custom_header-info li {
		position: relative;
		width: 100%;
		text-align: left;
		padding-left: 16px;
		font-size: 12px;
	}
	#header .custom_header-info li:before {
		font-family: FontAwesome;
		content: "\f138";
		position: absolute;
		left : 0;
		top: 50%;
		transform: translateY(-50%);
		color: white;
		line-height: 1;
	}
	#header .custom_header-info li:not(:first-child) {
		margin-top: 4px;
	} 
	 */
	#header-container .navi {
		display: none;
	}
	.mobile-header-menu-buttons {
		background: #dd8e18;
	}
	#appeal {
		aspect-ratio: 828 / 1080;
		background-image: url(https://yokoyama2023.com/wp-content/uploads/2024/11/top_kv-sp.jpg);
	}
	.article h2 {
		margin-left: -16px;
		margin-right: -16px;
		font-size: 24px;
	}
	.navi-footer-in>.menu-footer{
		flex-wrap: nowrap;  /*フッターメニューを一列に*/
		justify-content: center;
	  }
	.navi-footer-in a{
		font-size: 90%;  /*フッターメニューの文字の大きさを変更*/
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.custom-font-size {
		font-size: 30px !important;
	}
	.navi-footer-in li {
		justify-content: center;
		width: auto !important;
	}
	.navi-footer-in a {
		width: auto !important;
		font-size: 80%;
		white-space: nowrap;
	}
}