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

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

html {
  scroll-behavior: smooth;
}

body {
/* 	background-color: var(--cocoon-white-color); */
	background-color: #e5e0cf;
}

.header-container, .main, .sidebar, .footer, .mobile-menu-buttons {
	background-color: #e5e0cf !important;
}

h1, .navi-menu-button span {
	color: #601986 !important;
}

/* .home .header-container {
	display: none;
} */

.home .article-header {
	display: none;
}

.home .article-footer {
	display: none;
}

.home .sidebar {
	display: none;
}

.home .main {
	margin-top: 0px !important;
	padding-top: 0px !important;
	width: 100%;
}

.home .wp-block-columns {
	width: 100%;
}

.home .wp-block-columns {
	width: 100%;
}

.home .main, .post-8, .entry-content {
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
}

.home .footer {
	padding-top: 0px !important;
	margin-top: 0px !important;
}

.home a {
	text-decoration: none;
}

.site-logo-image {
	margin-top: 30px;
	max-width: 40%
}

.wp-block-latest-posts__list li {
	margin-left: 15px !important;
	list-style: disc;
}

/* #loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  z-index: 10;
}

#loading-nami {
  position: absolute;
  width: 100%;
  height: 100px;
  top: calc(50% - 50px);
  transition: all 3s ease;
}

.big {
  transform: scale(1.0, 3.0) translate(0px, calc(50% - 50px));
}

#loading-img1 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

#loading-img2 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
} */









*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
.cp_cont {
	width: 90vw;
	max-width: calc(640px - 10px);
	margin: 3em auto 10em auto;
	padding: 16px;
	background: #F2F3EB;
	border: 1px solid #424242;
	box-shadow: #F2F3EB 0px 0px 0px 10px;
}
input[type='text'],
input[type='tel'],
input[type='email'],
textarea,
select {
	vertical-align: top; -webkit-appearance: none; appearance: none;-moz-appearance: none;
	width: 100%; height: 2em;
	padding-left: 0.4em; border: none; border-radius: 0;
	color:#757575;
	background: #F2F3EB;
	font-size: 1em;

}
input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
textarea:focus,
select:focus {
	outline: none;
}
textarea {
	height: 10em; min-height: 2em;
	resize: none;
}
input[type='text']::placeholder,
input[type='tel']::placeholder,
input[type='email']::placeholder,
textarea::placeholder,
select {
	text-transform: uppercase;
}
input[type='submit'],
input[type='button'],
button {
	cursor: pointer;
	color:#757575;
	background: #F2F3EB;
	border:1px solid #424242;
	padding: 1em 2em;
	transition: all 0.3s;
	text-transform: uppercase;
}
input[type='submit']:hover,
input[type='button']:hover,
button:hover {
	color:#ffffff;
	background: #424242;
}
.cp_cf7name,
.cp_cf7email,
.cp_cf7telephone,
.cp_cf7subject,
.cp_cf7textarea {
	margin: 0 0 2em 0;
}
.cp_cf7name {
	float: left;
	width: 48%;
}
.cp_cf7email {
	float: right;
	width: 48%;
}
.cp_cf7telephone {}
.cp_cf7subject {
	position: relative;
}
.cp_cf7textarea {}
.cp_cf7submit {
	margin: 0 auto;
	text-align: center;
}
.cp_cf7name::after,
.cp_cf7email::after,
.cp_cf7telephone::after,
.cp_cf7subject::after,
.cp_cf7textarea:after {
	display: block;
	width: 100%;
	height: 4px;
	margin-top: -1px;
	content: '';
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #424242;
}
.cp_cf7subject::before {
	position: absolute;
	top: 0.8em;
	right: 0.2em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #666666 transparent transparent transparent;
	pointer-events: none;
	z-index: 1;
}
.cp_cont h1 {
	text-align: center;
	margin: 0 auto 2em auto;
	color: #424242;
	position: relative;
	width: 10em;
}
.cp_cont h1::before,
.cp_cont h1::after {
	position: absolute;
	content: '●';
	font-size: 0.3em;
	top: 1.6em;
}
.cp_cont h1::before {
	left: 2em;
}
.cp_cont h1::after {
	right: 2em;
}











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

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

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