@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){
  /*必要ならばここにコードを書く*/
}

/* 絞り込み検索フォーム */
/* .my_searchform input, .my_searchform select {
	margin-bottom: 0.0em;	
} */

.my_searchform .keyword {
	margin-right: 10px;
	width: 250px;
}

.my_searchform .category {
	margin-right: 10px;
	width: 250px;
}

.my_searchform .tags {
	margin-right: 10px;
	width: 250px;
}

.my_searchform .search {
	margin-left: -25px;
	width: 250px;
}

/*新着記事大きいエントリーカードを二列にして見え方を調節*/
.main .new-entry-cards.card-large-image {
display: flex;
flex-wrap: wrap;
}

/*関連記事カードの要素*/
/* .main .new-entry-cards.related-entry-card-wrap { 
	position: relative;
	margin: 6px 4px;
	min-width: 28.57%;
	min-width: calc((100% / 3.5) - 8px);
	overflow: visible;
}

.main .new-entry-cards.related-entry-card-wrap:last-child::after {
	content: '';
	position: absolute;
	display: block;
	top: 1px;
	left: 100%;
	height: 1px;
	width: 4px;
	background-color: transparent;
}

/*アンダースクロールバーと関連記事カードの間の調整（モバイル時）*/
/* @media screen and (max-width: 1023px) {
	.main .new-entry-cards.related-entry-card-wrap {
		margin-bottom: 12px;
	}
}
*/
/*画面サイズがスマートフォンの場合の関連記事カードの幅の再調整*/
/* @media screen and (max-width: 834px) {
	.main .new-entry-cards.related-entry-card-wrap {
		min-width: 40%;
		min-width: calc((100% / 2.5) - 8px);
	}
}  */
/*ここまで*/


/*おすすめ記事（navi entry card）の大きいエントリーカードを二列にして見え方を調節*/
.page .navi-entry-cards{
display: flex;
flex-wrap: wrap;
}

/*大きいエントリーカードの下にスペースを入れて見栄え良く*/
.card-content {
padding-top: 10px;
line-height: 1.6;
}

<pre>/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
table-layout: fixed;
	 font-size:12px;
}
.required-contactform7{
 font-size:10px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
.unrequired-contactform7{
 font-size:10px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
.table-contactform7 th{
  font-weight:bold;
	 padding-right:5px;
}
.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
	margin: 5px 10px 10px 5px;
}
.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}
.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}
@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
  }
    }
@media screen and (max-width: 900px){
.table-contactform7{
  display:block;
}
  .table-contactform7 tbody,
  .table-contactform7 tr{
    display: block;
    width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:5;
  width: 100%;
  border-top: none !important;
}
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#000;
 color:#fff;
 font-size:18px;
 font-weight:bold;
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
}
</pre>

/*掲載問い合わせ2*/
/************************************
** お問い合わせフォームの入力
************************************/
#cf-tbl{
width: 800px;
}

#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf-tbl table tr th{
width: 35%;
background: #eee;
}
@media screen and (max-width:768px){
#cf-tbl{
width: 100%;
}

#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}

#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}

#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}

#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #000080;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
	background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 15px;
    width: 400px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 250px;
}
}

input.wpcf7-submit:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	opacity:0.7;
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

/* スライダーのCSS */

.slider-container {
    position: relative;
    overflow: hidden;
    padding: 20px 0; /* 上下の余白 */
}

.slider-wrapper {
    display: flex;
}

.slide-group {
    flex: 0 0 100%;
    display: flex;
}

.slide {
    flex: 0 0 33.3333%;
    text-align: center;
}

.slide a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.slide h2 {
    font-size: 20px;
    margin-bottom: 10px;
	margin-top: 0px;
}

.slider-controls {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.slider-controls button {
    background-color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.prev-slide {
    left: 0;
}

.next-slide {
    right: 0;
}

/* #menu-media div.wp-menu-image:before {
    content: "\f111";
} */

/* figure {
	position: relative;
	display: inline-block;
}
figure img {
	max-width: 100%;
	vertical-align: top;
}
figure figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 5px 10px;
	font-size: 86%;
	color: #fff;
	background: #333;
}  */

a{
  color: #333;
  text-decoration:none;
}

/*セクション背景色*/
.color-section-1{
	background:#E0E0F8; /*カラーコードをここで設定*/
}

.shop-atmosphere-title {
  clip-path: inset(1 100% 0 0);
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 40px;
  margin-top: 15px;
}

.shop-atmosphere-title.is-animated {
  clip-path: inset(0);
}

.fz-40px {
		animation-name:fdin;
		animation-duration:4s;
}

.toggle-checkbox:checked ~ .toggle-content {
    background-color:white;
}

/* フッターモバイルボタン */

.skin-grayish:not(.front-top-page) .mobile-header-menu-buttons.mobile-menu-buttons:not(.has-logo-button)>.menu-button {
	color: white;
}

.skin-grayish .mobile-menu-buttons .menu-button, .skin-grayish .mobile-menu-buttons .menu-button>a, .skin-grayish .sidebar-menu-content .sidebar-menu-close-button {
	color: white;
}

.mobile-header-menu-buttons.mobile-menu-buttons {
	top:0px !important;
}