@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く　HARUKA*/
/* テーマカラー　#12ccc3 #88e5e1 #ebfdff #f1feff */

/* 全固定ページで非表示 */
.page .entry-title {
    display: none;
}
/*投稿日・更新日を消す場合*/
.page .date-tags {
    display: none;
}
/*投稿日のみを消す場合*/
 .page .post-date {
    display: none;
}

/************************************
** 見出し調整
************************************/

/* 見出しリセット */
/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
}
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* 見出し */
h1:first-letter {
  font-size: 1.5em;
  color: #12ccc3;
}
h1 {
  position: relative;
  padding: 0.25em 0;
}
h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(18, 204, 195), transparent);
  background: linear-gradient(to right, rgb(18, 204, 195), transparent);
}
h2 {
  color: #888888;
  padding: 0.25em!important;
  border-top: solid 2px #12ccc3;
  border-bottom: solid 2px #12ccc3;
  background: -webkit-repeating-linear-gradient(-45deg, #f1feff, #f1feff 3px,#ebfdff 3px, #ebfdff 7px)!important;
  background: repeating-linear-gradient(-45deg, #f1feff, #f1feff 3px,#ebfdff 3px, #ebfdff 7px)!important;
}
h3 {
  border-bottom: solid 2px #88e5e1!important;
  padding-left: 55px!important;
  position: relative;
}
h3:before {
  content: "";
  background-color: #88e5e1;
  border-radius: 50%;
  opacity: 0.5;
  width: 35px;
  height: 35px;
  left: 5px;
  top: 0px;
  position: absolute;
}
h3:after{
  content: "";
  background-color: #12ccc3;
  border-radius: 50%;
  opacity: 0.5;
  width: 20px;
  height: 20px;
  left: 25px;
  top:15px;
  position: absolute;
}
h4 {
  padding: .25em 0 .25em .5em !important;
  border-bottom: 3px dotted #ccc !important;
  color: #666;
  text-align: center !important;
}
h5 {
  position: relative;
  color: #555555;
  display: inline-block;
  margin: 47px 0;
 text-shadow: 1px 0 10px white;
text-align: center;
}
h5:before {
  content: "";
  position: absolute;
  background: #88e5e1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
border: dashed 1px white;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
  box-shadow: 0px 0px 0px 5px #88e5e1;
}
h6{
  position: relative;
 color: #888888;
 font-size: 20px;
padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
h6:before {
content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  width: 100px;
  height: 60px;
  border-radius: 50%;
	border: 5px solid #88e5e1;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/************************************
** 目次設定
************************************/
.toc{
    font-size: 1em;
    padding: 1em 2em 2em;
background-color: #FFF; /*←背景色*/
    box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
    border: 1px solid;
}
 
.toc-title {
    font-size: 1.1em;
    font-weight: 500;
    color: #12ccc3;  /*←タイトルの文字色*/
    margin: 1em;
}
 
.toc-title:before {
 content : "●"; /*←アイコン*/
font-size: 1.1em;
    border-radius: 50%;
    color: #88e5e1; /*←アイコンの色*/
background-color: #12ccc3; /*←アイコンの背景色*/
    padding: 0.5em;
    margin-right: 0.5em;
}
 
.toc-content ol {
    font-size: 0.9em;
    position: relative;
}
 
.toc-content ol li {
    font-size: 0.9em;
    padding: 1em 0 0 1em;
    border-bottom: dotted 1px #12ccc3  ;
    list-style: none;
}
 
.toc a {
    color: #888888 ; /*←見出しの文字色*/
}
 
.toc-content ol li:before {
    content: ">"; /*←見出しアイコン*/
    color: #12ccc3; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}
 
.toc-content ol li:last-child {
    border-bottom: none;
}
/************************************
** サイドバー設定
************************************/
/* サイドバーカテゴリ（イラスト非表示） */
#sidebar .widget_categories .cat-item-5 {
  display: none;
}
#sidebar .widget_categories .cat-item-6 {
  display: none;
}
#sidebar .widget_categories .cat-item-7 {
  display: none;
}
#sidebar .widget_categories .cat-item-11{
  display: none;
}
/*サイドバー色*/
.sidebar h3 {
	background-color: #fff;
}

/************************************
** ご依頼4プランの表示(タイトルなし)
************************************/
.recommend{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.recommend a img{
  display:block;
  padding:0 2px;
  width:100%;
}
.recommend a:hover{
  opacity:0.7;
  transition: all .25s ease-out;
}
@media screen and (max-width: 800px){
  .recommend{
    -ms-flex-wrap: wrap;
    flex-wrap:wrap;
  }
  .recommend a img{
    padding:1px 0;
  }
  .recommend a{
    width:50%;
  }
}
.recommend a{
    width:50%; /* スマホタブレット二列 */
  }
@media screen and (max-width: 768px){
.column-wrap{
flex-direction: row !important;
}
}

/************************************
** ヘッダー
************************************/

/*ヘッダーロゴ　余白*/
.logo-image {
    padding: 0;
	margin: 0;
}

/************************************
** フッター
************************************/

.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #12ccc3; /*フッター背景色*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}

.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 240px; 
  margin: 0 auto;
}
.footer-bottom-logo img {
	height: 30px;
	width: auto;
}



.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
   /* padding: 0.3em 0;*/
  }
}


/************************************
** メニュー
************************************/

/* メニューマウスオーバー時色 */
#navi ul li a:hover{
background:#88e5e1 !important; /*メインメニューにポインタを置いたときの背景色*/
}
.content {
margin-top: 0;
}
#site-title {
  margin-top: 0;
}

/************************************
** スマホメニュー
************************************/
/* ヘッダーモバイルメニュー設定 */
/* モバイルフッターメニューの文字色・背景色を変更 */
.mobile-menu-buttons .menu-button > a,
	.menu-button{
    color: #ffffff; /* 文字色 */
    background-color: #12ccc3; /* 背景色 */
	min-height: 60px;/* メニュー縦幅 */
}

/*ヘッダーモバイルメニュー各色と高さ、アイコンの位置を調整*/
.home-menu-button.menu-button,
.logo-menu-button.menu-button,
.navi-menu-button.menu-button{
	padding-top: 30px;
}
/*スライドインメニューを右から*/
.navi-menu-content{
	color: #888888; /* 文字色 */
	/*
    background-color: #ffffff;
	*/
	left: auto;
	right: 0;
	transform: translateX(101%);
}
/*
メニュー下余白*/
.navi {
  margin-bottom: 0px;
}
/*グローバルナビ上下線
nav#navi, .menu-header .sub-menu{
     border-bottom:1px solid;
     border-top:1px solid;
     color: #88e5e1; 
}
*/
/*ヘッダータイトルロゴ幅など*/
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 280px;
  vertical-align: middle;
  margin: 0;
}

/************************************
** 問い合わせ
************************************/

/* 問い合わせフォームカスタマイズ */
.wpcf7 input[type="submit"] {
position: absolute;
width:60%;
left:20%;
padding:0.5rem 0.5rem;
border-radius:10px;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #12ccc3;
transition: 0.3s;
color: #ffffff;
font-size: 20px;
}
.wpcf7-submit:hover {
background: #a4dd6c;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}


/************************************
** ブログカード
************************************//* Blog Card */
.blogcard {
	color: #888888;
	width: 100%;
	border: none;
	padding: 0;
	box-shadow: 0 1px 5px 0 rgb(0 0 0 / 25%);
}
.blogcard-wrap{
	width: 100%;
}
.blogcard-label {
	background-color: #7fbfff; /* ラベルの背景色 */
        color: white; /* ラベルの文字色 */
	top: 5px;
	right: 5px;
	left: auto;
}
.blogcard-content {
    padding: .5em;
    margin-left: 0;
    max-height: none;
    min-height: auto;
}
.blogcard-thumbnail {
    float: none;
    width: 100%;
    margin: 0;
}
.blogcard-thumbnail img {
    width: 100%;
}
.blogcard-footer {
    padding: .5em;
	display: none;/* URLと日付を非表示にする */
}
/*ブログカードのスニペット非表示*/
.blogcard-snippet {
 display: none;
}

/************************************
** インデックス・エントリーカード
************************************/

.ect-vertical-card .entry-card-wrap{
max-width: 48%;
    padding:0;
}
.ect-vertical-card .entry-card-wrap:hover {
max-width: 48%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 3px;
    padding:0;
}
@media screen and (max-width:480px){
    .ect-vertical-card .entry-card-wrap{
        max-width: 92%;
    }
    .e-card-title {
        font-size: 13px;
    }
.ect-vertical-card .entry-card-wrap:hover {
max-width: 92%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 3px;
    padding:0;
}
}
.entry-card-title{
color: #888888; /*見出しの色*/
    line-height: 1.6;
	background: none!important;
	border: none;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
    margin: 5px 5px 5px 5px;
}
.entry-card-meta, .related-entry-card-meta {
    color: #b7b7b7;
    margin: 4px 8px;
}
.entry-card-wrap .cat-label{
    display: none; /*カテゴリを非表示に*/
}
.ect-vertical-card {
    justify-content: space-around;
}
/************************************
** 記事下の関連記事
************************************/
.related-entry-card-title{
 color: #888;
}
.related-entry-card-thumb img {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.entry-card-title, .related-entry-card-title {
  color:#555;
}
.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px dashed #CCCCCC;/*区切り線*/
}
/*スニペット非表示*/
.related-entry-card-snippet {
 display: none;
}

/************************************
** 検索窓
************************************/
/*検索ボックスのカスタマイズ（一体型・丸縁）*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px 16px;
	padding-right: 68px;
	border-color: #88e5e1;
	border-radius: 20px;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #88e5e1;
	border-radius: 0 20px 20px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-right: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/************************************
** タイムラインカスタマイズ
************************************/
.timeline-item:before {
  background: #f8c678;/*好きな色に*/
  top:22px;
  width: 17px;
  height: 17px;
  left: 103px;
}
.timeline-item-content{
  border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-box{
  border:initial;
}
.timeline-item-label{
  color:rgba(25,25,25,.7);
}
@media screen and (max-width: 480px){
.timeline-item-content {
  border-left:initial;
}
.timeline>li.timeline-item {
  border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-item:before {
  left: -10px;
}
}
/************************************
** SNSシェア・フォローボタン
************************************/
#main .button-caption {
	display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/*SNSフォローボタン*/
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/*すべてのボタンの色を一括で変える*/
#container .sns-buttons a{
background-color: #88e5e1; /*背景色*/
color: #fff; /*文字色*/
border: 0;
}

/************************************
** 未整理
************************************/


/**アイコン画像余白**/
.site-name-text img {
margin-top: 15px;
margin-bottom: 0px;
}

/* 記事フェードイン */
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
/* 記事フェードイン　ここまで */
/* テーブル（表）設定 */
table {
   table-layout: fixed;
   width: 100%;
}
/* ふきだしアイコン */
.speech-person {
	width: 100px;
	min-width: 100px;
}

/* ギャラリー設定　画像を全部同じ大きさに */
.blocks-gallery-grid .blocks-gallery-item,  .wp-block-gallery .blocks-gallery-item {
  flex-grow: initial !important;
}


/************************************
** カルーセル
************************************/
.slide {
  position: relative;
  width: 100%;
  height: 400px;/*高さ固定なので、画像に工夫が必要*/
  overflow: hidden;
}
@keyframes slideshow{
  0%{
    opacity: 0;
	  height: auto;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.slide a {
  position: absolute;
top: 50%;
left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
height: 0;/* 追加 元auto */
  opacity: 0;
  animation :slideshow 24s linear infinite;
overflow:hidden;/* 追加 */
	
}

.slide a:nth-child(2){
  animation-delay: 6s;
}

.slide a:nth-child(3){
  animation-delay: 12s;
}
 
.slide a:last-child{
  animation-delay: 18s;
}

/************************************
** カルーセル２（丸つき）
************************************/

.slider-001 {
width: 80%;
	max-width :700px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  border-radius: 6px;
}


.slide-001 {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.6s ease-in-out;
}

.slide-content-001 {
  width: 100%;
height: 438px;
  background-color: #c8e4ff;
}

.slide-content-001 img {
  width:100%;
  object-fit: cover;
  height: 100%;
}

.prev-001,
.next-001 {/*左右矢印*/
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
height: 65px;
padding: 16px;
margin-top: -28px;
color: #fff;
font-weight: bold;
font-size: 18px;
transition: all 0.2s ease;
border-radius: 0 4px 4px 0;
user-select: none;
  background-color: rgba(136, 229, 225, 0.6);
}

.next-001 {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.prev-001:hover,
.next-001:hover {
  background-color: rgba(18, 204, 195, 0.8);
}

.slide-caption-001 {
  color: #fff;
  font-size: 30px;
  padding: 0;
  position: absolute;
  bottom: 31px;
  width: 100%;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
/*  display: none;*/
}

.numbertext {
  color: #888888;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 16px;
  position: absolute;
  top: 0;
  display: none;
}

.dots {
  height: 15px;
  padding: 0;
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 10px 4px;
  background-color: rgba(136, 229, 225, 0.6);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s ease;
}

.dot:hover {
  background-color: rgba(18, 204, 195, 0.8);
}

/************************************
** テーブルのデザイン
************************************/
table{
 width: 80%;
  border-collapse: collapse;
margin:auto;
	border-color:#fff;
}

table tr{
  border-bottom: solid 2px #fff;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #88e5e1;
  color: white;
	text-align: center;
  padding: 10px 0;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
border-left: 10px solid #88e5e1;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

table td{
  text-align: left;
  width: 70%;
  text-align: center;
  background-color: #ebfdff;
  padding: 10px 0;
	border-color:#fff;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
	
	
	
	
.slide-content-001 {
  width: 100%;
height: auto;
background-color: #12ccc3;
}
	
.slide-001 img {
  width: 100%;
  height: auto;
}

	
}

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

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

	
}

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