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

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

body{
	background-color:white;
}

	.boxs_list h3 {
		max-width: 100%;
	    width: 60%;
	    margin: auto;
	    text-align: center;
	}
	body.page-template-page-onecolumn #content h3 {
	    font-size: 28px;
	    margin-bottom: 20px;
	    color: #ff8e15;
	}
	.top_title {
	    margin-bottom: 60px;
	}
	.boxes {
	    max-width: calc( 900px + 6% );
	    width: 100%;
	    margin: 30px auto 90px;
	    padding: 0px 3px;
	}
	.boxes .boxs_table {
	    width: 100%;
	    overflow: hidden;
	    border-spacing: 2px;
	    border-collapse: separate;
	    border: none;
	    margin: 15px 0px 20px;
	}
	.boxes .boxs_table tr {
	    border: none;
	}
	.boxes .boxs_table tr th {
	    background-color: #ff8e15;
	    text-align: center;
	    border-radius: 5px;
	    padding: 15px;
	    border: none;
	    width: 20%;
	    color: #fff;
	    font-size: 18px;
	}
	.boxes .boxs_table tr td {
	    background-color: #ffebd6;
	    width: auto;
	    border-radius: 5px;
	    padding: 15px;
	    text-align: center;
	    border: none;
	    font-size: 18px;
	}
	.boxes .boxs_table2 {
	    width: 100%;
	    overflow: hidden;
	    border-spacing: 2px;
	    border-collapse: separate;
	    border: none;
	    margin: 0px 0px 10px;
	}
	.boxes .boxs_table2 tr {
	    border: none;
	}
	.boxes .boxs_table2 tr th {
	    background-color: #ffb218;
	    text-align: center;
	    border-radius: 5px;
	    padding: 15px;
	    border: none;
	    width: 20%;
	    color: #fff;
	    font-size: 18px;
	}
	.boxes .boxs_table2 tr td {
	    background-color: #ffead1;
	    width: auto;
	    border-radius: 5px;
	    padding: 15px;
	    text-align: center;
	    border: none;
	    font-size: 18px;
	}
	#content p.boxs_notes {
	    font-size: 18px;
	    text-align: center;
	    margin-bottom: 25px;
	}
	#content p.boxs_notes2 {
	    font-size: 18px;
	    text-align: center;
	    margin-bottom: 0px;
	}
	figure.boxs_imgae {
	    height: 260px;
	    overflow: hidden;
	    object-fit: cover;
	    object-position: center;
	    margin-bottom: 10px;
	}
	figure.boxs_imgae img {
	    object-fit: cover;
	    object-position: center;
	}


@media screen and (max-width: 768px){
	#content .top_title h2 {
		font-size: 25px;
	}
	.top_title {
		margin-bottom: 40px;
	}
	body.page-template-page-onecolumn #content .boxs_list h3 {
		width: 90%;
		font-size: 25px;
		margin: auto;
		color: #2b2b2b;
		margin-bottom: 20px;
	}
	.boxes {
		max-width: 100%;
		width: 94%;
		margin: 30px auto 60px;
	}
	#content p.boxs_notes2 {
		font-size: 16px;
		text-align: center;
		margin-bottom: 0px;
	}
	.boxes .boxs_table tr th {
		font-size: 15px;
	}
	.boxes .boxs_table tr td {
		font-size: 15px;
	}
	.boxes .boxs_table2 tr th {
		width: 45%;
		font-size: 15px;
	}
	.boxes .boxs_table2 tr td {
		font-size: 15px;
	}
	#content p.boxs_notes {
		font-size: 16px;
		margin-bottom: 8px;
	}
}

.case-block {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 6%;
}

.case-block span.case-title {
	display: block;
	font-size: 28px;
	color: #4B4443;
	text-align: center;
	padding: 10px;
}

.case-block span.case-title::before {
	content: "-";
	display: inline-block;
	margin-right: 25px;
	color: #f4bb27;
	transform: scaleX(4);
}

.case-block span.case-title::after {
	content: "-";
	display: inline-block;
	margin-left: 25px;
	color: #f4bb27;
	transform: scaleX(4);
}

.case-block ul {
	width: 100%;
	overflow: hidden;
	margin-bottom: 40px;
	padding: 0;
}

.case-block ul li {
	display: block;
	width: calc(100% / 3); /* 横列の数を変更する場合はここを修正 */
	padding: 10px;
	float: left;
	box-sizing: border-box;
	margin: 0;
}

.case-block a {
	text-decoration: none;
	transition: 0.2s;
	overflow: hidden;
	display: block;
	border-radius: 5px;
	background-color: #f4bb27;
	color: white;
	text-align: center;
	padding: 15px;
	font-size: 14px;
	font-weight: normal;
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: white;
}

.case-block a::after {
	content: " ";
	display: inline-block;
	border: 5px solid transparent;
	border-left-color: white;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.case-block a:hover {
	transform: scale(0.9);
	opacity: 0.5;
}

.case-block a span {
	color: white;
}

@media all and (max-width: 780px) {

	.case-block span.case-title {
		font-size: 21px;
	}

	.case-block ul li {
		width: 50%;
	}

	.case-block a {
		font-size: 12px;
	}

	.case-block a::after {
		right: 5px;
	}

	.case-block ul {
		margin-bottom: 20px;
	}

}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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