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

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

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

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

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












/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
color:#000;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* 見出し */
.article h2 {
  position: relative;
  display: inline-block;
	padding: 0 55px;
}

.article h2:before, .article h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
	width: 20%;
  height: 1px;
  background-color: black;
}

.article h2:before {
  left:0;
}
.article h2:after {
  right: 0;
}

.center{
text-align: center;
}


/* タイトル非表示 */
.entry-title{
	display:none;
}

/* 背景色 */
.site {
	背景色:#c1c1c1;
}

body .home {
	background-color:#c1c1c1;
}
	
.btn-wrapper{
text-align: center;
}

.btnn {
	position: relative;
	display: inline-block;
    font-weight: bold;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 0.5em 1em;
	text-decoration: none;
	color: black;
	transition: .4s;
  }
  
  .btnn:hover {
	background: #555;
	color: #FFF;
  }


/* アイキャッチ非表示 */
.eye-catch {
display: none;
}

/* 固定ページの余白なし */
.content {
  margin-top: 0;
}
.article h1 {
  margin-top: 0;
  padding-top: 0;
}

/* 基本フォントサイズ */
html { 
  font-size: 16px;
}


/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}



/* トップページ */
.top-image {
    position: relative;
    width: 100%;
}


.top-image2 {
  position: absolute;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  width:50%;
}

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#333;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}











.top-group1 {
  display: flex; /*横並び*/
}
.top-group1 img {
	width: 30%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.top-group1 p {
  margin: 0 0 0 20px;
  padding: 0;
}

.top-group2 {
  display: flex; /*横並び*/
}
.top-group2 img {
	width: 40%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-left:auto
}
.top-group2 p {
  margin: 0 0 0 20px;
  padding: 0;
  margin-left:auto
}

.top-group3 {
  display: flex; /*横並び*/
}
.top-group3 img {
	width: 40%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.top-group3 p {
  margin: 0 0 0 20px;
  padding: 0;
}


.group1 {
  position: relative;
  }
        
.group1 p {
  position: absolute;
  top: 80%;/*画像の左上に配置*/
  left: 0%;
  margin: 0; /*余計な隙間を除く*/
  color: black;/*文字を黒に*/
  background: #ededaa;/*背景色*/
  font-size: 1em;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  box-shadow: 10px 10px 5px 0 rgb(125, 125, 125);
  }



/* ContactForm7カスタマイズ */
table.CF7_table{
	width:80%;
	margin:0 auto;
	color: black;
	margin-bottom: 0px;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
	background-color: #c1c1c1;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input,.CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color: #797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: orange;
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
	margin-left: left 1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#c1c1c1;
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #c1c1c1;
  border: solid 2px #c1c1c1;
  border-radius: 3px;
  transition: .4s;
  width: 250px;
  font-size:1em;
}

.wpcf7 input.wpcf7-submit:hover {
  background: #ededaa;
  color: #d8d8d8;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}


#birth-year,#birth-month,#birth-day,#zip
{
	width: 30%;
}

/* プルダウン */
.selectbox {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.selectbox::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #535353;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  pointer-events: none;
}

.selectbox select {
  appearance: none;
  min-width: 230px;
  height: 2.8em;
  padding: .4em calc(.8em + 30px) .4em .8em;
  border: none;
  border-bottom: 2px solid #cccccc;
  background-color: #d8d8d8;
  color: white;
  font-size: 1em;
  cursor: pointer;
}





.topic {
    display: flex;
    flex-wrap: wrap;
}
.topic li {
    width: 23.95%;
}
.topic li figure {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.topic li figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}



body {
    background-color: #c1c1c1;
}
.header-container, .main, .sidebar, .footer {
    background-color: #c1c1c1;  
　　color:#fff;
}
.site-name-text-link {
    color: #fff;  
}
.a-wrap {
    color: #fff;
}
.site-name-text-link {
    color: #fff;   
}
.sidebar {
    background-color: #c1c1c1;
}
.widget_recent_entries ul li a, 
.widget_categories ul li a, 
.widget_archive ul li a, 
.widget_pages ul li a, 
.widget_meta ul li a, 
.widget_rss ul li a, 
.widget_nav_menu ul li a {
 color: #fff;
}