@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*--------------------------------------------------------------
# ビューポイントごと表示非表示
-------------------------------------------------------------- */
.off1200,
.off1170,
.off1100,
.off991,
.off850,
.off767,
.off640,
.off480,
.off375,
.off360,
.off320 {
		display: block !important;
}

.on1200,
.on1170,
.on1100,
.on991,
.on850,
.on767,
.on640,
.on480,
.on375,
.on360,
.on320 {
		display: none !important;
}

@media (max-width: 1200px) {
		.off1200 {
				display: none !important;
		}
		.on1200 {
				display: block !important;
		}
}

@media (max-width: 1170px) {
		.off1170 {
				display: none !important;
		}
		.on1170 {
				display: block !important;
		}
}

@media (max-width: 1100px) {
		.off1100 {
				display: none !important;
		}
		.on1100 {
				display: block !important;
		}
}

@media (max-width: 991px) {
		.off991 {
				display: none !important;
		}
		.on991 {
				display: block !important;
		}
}

@media (max-width: 850px) {
		.off850 {
				display: none !important;
		}
		.on850 {
				display: block !important;
		}
}

@media (max-width: 767px) {
		.off767 {
				display: none !important;
		}
		.on767 {
				display: block !important;
		}
}

@media (max-width: 640px) {
		.off640 {
				display: none !important;
		}
		.on640 {
				display: block !important;
		}
}

@media (max-width: 480px) {
		.off480 {
				display: none !important;
		}
		.on480 {
				display: block !important;
		}
}

@media (max-width: 375px) {
		.off375 {
				display: none !important;
		}
		.on375 {
				display: block !important;
		}
}

@media (max-width: 360px) {
		.off360 {
				display: none !important;
		}
		.on360 {
				display: block !important;
		}
}

@media (max-width: 320px) {
		.off320 {
				display: none !important;
		}
		.on320 {
				display: block !important;
		}
}

#main {
		width: auto;
}

#content {
		overflow: hidden;
}

.main, .sidebar, .sidebar-left .main, .sidebar-left .sidebar {
		margin: 0;
}

.home main section .section-inner h2 {
		position: relative;
		text-align: center;
		padding: 1rem 0;
		margin-bottom: 3rem;
}

.home main section .section-inner h2::before {
		content: "";
		position: absolute;
		width: 20rem;
		height: 1px;
		left: 0;
		right: 0;
		background: #000;
		margin: auto;
		top: 0;
}

.home main section .section-inner h2::after {
		content: "";
		position: absolute;
		width: 20rem;
		height: 1px;
		left: 0;
		right: 0;
		background: #000;
		margin: auto;
		bottom: 0;
}

#top-keyvisual {
		margin: -21px -30px;
}

#top_profile {
		margin: 5rem 0;
}

#top_profile .top_profile {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
}

#top_profile .top_profile .img_block {
		position: relative;
		height: auto;
		width: 350px;
		padding-top: 350px;
		border-radius: 50%;
		overflow: hidden;
}

@media (max-width: 834px) {
		#top_profile .top_profile .img_block {
				width: 300px;
				padding-top: 300px;
		}
}

@media (max-width: 640px) {
		#top_profile .top_profile .img_block {
				margin: 0 auto 20px;
		}
}

#top_profile .top_profile .img_block img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: " object-fit: cover;";
}

#top_profile .top_profile .text_block {
		width: calc(100% - 350px);
		padding-left: 20px;
}

@media (max-width: 834px) {
		#top_profile .top_profile .text_block {
				width: calc(100% - 300px);
		}
}

@media (max-width: 640px) {
		#top_profile .top_profile .text_block {
				width: 100%;
		}
}

#top_blog {
		margin: 5rem 0;
}

#top_blog .new-entry-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 1%;
}

#top_blog .new-entry-cards a {
		width: 100%;
}

@media (max-width: 640px) {
		#top_blog .new-entry-cards a {
				margin: auto;
		}
}

#top_blog .new-entry-cards a .new-entry-card figure {
		width: 350px;
}

@media (max-width: 834px) {
		#top_blog .new-entry-cards a .new-entry-card figure {
				width: 300px;
		}
}

@media (max-width: 640px) {
		#top_blog .new-entry-cards a .new-entry-card figure {
				width: 100%;
		}
}

#top_blog .new-entry-cards a .new-entry-card .new-entry-card-title {
		font-size: 18px;
		font-weight: 500;
}

#top_blog .new-entry-cards a .new-entry-card .widget-entry-card-snippet {
		font-size: 18px;
}

#top_blog .new-entry-card-date {
		display: block;
		text-align: right;
}

#top_blog .new-entry-card-date .post-update {
		display: none;
}

#top_friends {
		margin: 5rem 0;
}

#top_friends .logo-area {
		display: flex;
		flex-wrap: wrap;
		gap: 20px 1%;
}

@media (max-width: 834px) {
		#top_friends .logo-area {
				gap: 20px 2%;
		}
}

@media (max-width: 640px) {
		#top_friends .logo-area {
				gap: 15px 2%;
		}
}

@media (max-width: 480px) {
		#top_friends .logo-area {
				gap: 5px 2%;
		}
}

#top_friends .logo-area .logo {
		position: relative;
		width: 19.2%;
		padding-top: 19.2%;
}

@media (max-width: 834px) {
		#top_friends .logo-area .logo {
				width: 23.5%;
				padding-top: 23.5%;
		}
}

@media (max-width: 640px) {
		#top_friends .logo-area .logo {
				width: 32%;
				padding-top: 32%;
		}
}

#top_friends .logo-area .logo img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: "object-fit: cover;";
		border: solid 1px #ddd;
}

#top_friends .logo-area .logo a:hover {
		opacity: 0.8;
}

/*--------------------------------------------------------------
# お問い合わせ
-------------------------------------------------------------- */
.wpcf7 {
		padding: 0;
}

.contact-form {
		background: #fff;
		padding: 10px 30px;
		width: 100%;
		max-width: 800px;
		margin: 30px auto;
		box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
		position: relative;
}

@media (max-width: 480px) {
		.contact-form {
				padding: 10px 20px;
		}
}

.contact-form p {
		text-align: center;
		margin-top: 30px;
}

.contact-form::before, .contact-form::after {
		content: "";
		height: 98%;
		position: absolute;
		width: 100%;
		z-index: -1;
}

.contact-form::before {
		background: #fafafa;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
		left: -10px;
		top: 4px;
		transform: rotate(-2.5deg);
}

.contact-form::after {
		background: #f6f6f6;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
		right: -10px;
		top: 1px;
		transform: rotate(1.4deg);
}

.contact-form .form-item {
		line-height: 2;
		margin-bottom: 30px;
}

@media (max-width: 480px) {
		.contact-form .form-item {
				line-height: 2;
		}
}

.contact-form .form-item textarea, .contact-form .form-item input {
		font-size: 16px;
		width: 100%;
		background: rgba(243, 243, 243, 0.8);
}

.contact-form .form-item input[type="checkbox"] {
		display: inline-block;
		width: 30px;
}

.contact-form .form-item .form-area {
		padding: 0 20px;
}

@media (max-width: 480px) {
		.contact-form .form-item .form-area {
				padding: 0;
		}
}

.contact-form .form-item textarea {
		margin-top: 5px;
}

.contact-form .submit-area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 30px 0;
}

.contact-form .submit-area .submit-btn2 {
		position: relative;
}

.contact-form .submit-area .submit-btn2 span.wpcf7-spinner {
		position: absolute;
		top: 30%;
}

.contact-form .submit-area .agree-area {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
}

.contact-form .submit-area input[type=submit][disabled] {
		background: #ccc;
}

.contact-form .submit-area input[type=submit][disabled]:hover {
		text-shadow: none;
		cursor: not-allowed;
}

.contact-form .submit-area input[type=submit] {
		width: 200px;
		padding: 20px;
		background: #dc9933;
		color: #fff;
		border-radius: 0;
		font-size: 25px;
		-moz-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;
}

.contact-form .submit-area input[type=submit]:hover {
		text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 10px #fff;
		cursor: pointer;
}

.contact-form .submit-area input[type=submit].back {
		margin-left: 20px;
}

#post-46 .date-tags {
		display: none;
}

#post-46 table.asct {
		max-width: 1120px;
		margin: 20px auto 50px;
		border-collapse: collapse;
}

#post-46 table.asct tr th {
		width: 230px;
		background: #f5f5f5;
		border: 1px solid #ccc;
		padding: 20px;
		vertical-align: baseline;
		font-weight: 500;
}

@media (max-width: 767px) {
		#post-46 table.asct tr th {
				width: 150px;
		}
}

@media (max-width: 640px) {
		#post-46 table.asct tr th {
				width: 100%;
				display: block;
				border-bottom: none;
		}
}

#post-46 table.asct tr td {
		border: 1px solid #ccc;
		padding: 20px;
}

@media (max-width: 640px) {
		#post-46 table.asct tr td {
				width: 100%;
				display: block;
		}
}

@media (max-width: 640px) {
		#post-46 table.asct tr:not(:first-child) th {
				border-top: none;
		}
}

/*--------------------------------------------------------------
# 矢印ボタン
--------------------------------------------------------------*/
.link-btn {
		margin-top: 1em;
		text-align: right;
}

.link-btn a {
		text-decoration: none;
		position: relative;
		display: inline-block;
		padding: 10px 50px 10px 0;
		font-weight: 500;
		color: #333;
}

.link-btn a span.arrow {
		margin-left: 10px;
}

.link-btn a span.arrow::before {
		content: "";
		width: 40px;
		position: absolute;
		background-color: #c1001a;
		height: 1px;
		top: 53%;
		transition: all 0.3s ease;
}

.link-btn a span.arrow::after {
		content: "";
		display: block;
		position: absolute;
		top: 44%;
		width: 10px;
		height: 10px;
		border: 1px solid;
		border-color: transparent transparent #c1001a #c1001a;
		transform: rotate(-135deg);
		right: 10px;
		transition: 0.3s;
}

.link-btn a:hover span.arrow::before {
		width: 58px;
}

.link-btn a:hover span.arrow::after {
		top: 39%;
		width: 15px;
		height: 15px;
		right: -5px;
}

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

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

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