@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){
  /*必要ならばここにコードを書く*/
}
/*1024px以上*/
@media screen and (min-width: 1024px){
  /*必要ならばここにコードを書く*/

/*マウスオーバーで画像拡大*/
.BigImage01 img {
    transition: transform .6s ease;
}

.BigImage01:hover img {
    transform: scale(1.1);
}

/*マウスオーバーで画像拡大 縦横サイズは元画像のまま*/
/*枠外は非表示処理*/
.BigImage02 {
    overflow: hidden;
}

.BigImage02 img {
    transition: transform .6s ease;
}

.BigImage02:hover img {
    transform: scale(1.1);
}
	
}

/************************************
****　プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
margin-bottom:0;
}
aside#author_box-4.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 4px 4px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url(https://machiyanohana.com/wp-content/uploads/2023/12/IMG_4520-scaled.jpg) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 1.5em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-4 p{
margin:.1em 1.0em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
author-box {
border: none;
}
a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

/*************************************/
.cform th {
	font-size: 14px;
	width: 30%; /*変なところで改行される場合はここの数字を変更します。*/
	border-bottom: solid 1px #ccc;
	background: #efefef;
	padding: 10px 0 10px 5px;
	font-weight: normal;
	vertical-align: middle;
}

.cform td {
	font-size: 14px;
	line-height: 150%;
	border-bottom: solid 1px #ccc;
	padding: 10px 5px;
}

.cform {
	width: 100%;
	margin: auto;
}

.cform [type=submit] {
	width: 200px;
	background-color: #ff8f00;
	border: 3px solid #cc6600 opacity: 0.3;
	color:#fff;
	font-size:1.2em;
	font-weight: bold;
/*	margin: 0 auto;*/
	padding: 15px 50px;
	transition: all 0.5s 0s ease;
	display: block;
	margin: auto;
	border-radius: 3px;
}

.cform option,
.cform textarea,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
	width: 100%;
}

.required-srt {
	font-size: 8pt;
	padding: 5px;
	background: #ce0000;
	color: #fff;
	border-radius: 3px;
	margin-left: 10px;
	vertical-align: middle;
}

.nonrequired-srt {
	font-size: 8pt;
	padding: 5px;
	background: #efefef;
	color: #efefef;
	border-radius: 3px;
	margin-left: 2px;
	vertical-align: middle;
}

.mw_wp_form_confirm .notshow {
  display: none;
}

@media only screen
	and (max-device-width:736px) 
 {
	.cform th,
	.cform td {
		width: 100%;
		display: block;
		border-top: none;
	}
}

@media only screen
	and (max-device-width:320px) {
	.cform th,
	.cform td {
		width: 100%;
		display: block;
		border-top: none;
	}
}

@media only screen
    and (min-device-width:320px) 
    and (max-device-width:480px) 
    and (orientation:landscape) {
	.cform th,
	.cform td {
		width: 100%;
		display: block;
		border-top: none;
	}
}

.submit-btn input {
	background: #00142c;
	width: 60%;
	max-width: 550px;
	min-width: 220px;
	margin: 30px auto;
	display: block;
	border: 1px #00142c solid;
	text-align: center;
	padding: 5px;
	color: #fff;
	transition: all 0.4s ease;
}

.submit-btn input:hover {
	background: #fff;
	color: #00142c;
}

.noborder {
  border: 0px none;
}

.home-header-title{
letter-spacing: 15px;	
}
.home-header-text{
letter-spacing: 1px;	
}
div.aioseo-breadcrumbs {
	color: yellowgreen;
  max-width: 1000px;
  margin:5px auto 5px 0%;
}

/************************************/
.post-1054 .date-tags {
display: none;
}

/****************カルーセル********************/
#carousel .a-wrap {
  background-color: transparent;
  padding-top: -10px;
  margin: initial;
  margin-top: -6px !important;
}

#carousel .carousel-entry-card-title {
  display: none; /* タイトル消す */
}

#carousel .carousel-in {
  background-color: transparent;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.carousel-entry-card:hover {
  background-color: transparent;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

#carousel .slick-dots {
  display: none !important;
}

.slick-slide img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.slick-slide img:hover {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.carousel-entry-card-thumb {
  width: 100%;
}

.carousel .cat-label {
  display: none; /* カテゴリーを消す */
}

/** 画像開始 **/
.card-thumb {
    overflow: hidden;
}
.card-thumb img {
    transition: all .6s ease-out 0.1s;
}
.card-thumb img:hover {
/*    transform: scale(0.95);*/
    transform: scale(1.2);
    transition: all .6s ease-out 0.1s;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}
/** 画像終了 **/
/*********************************/
/*********************************/
#overheader-20240101{
margin-top:8px;
margin-right:0px;	
background: url(https://machiyanohana.com/wp-content/uploads/2023/12/flower01.png) no-repeat;/*-- 上にのせる背景透過画像の指定 --*/
width: 370px;
height: auto;
position: absolute;/*-- 絶対位置の指定 --*/
z-index: 1;/*-- 上にする --*/
}

#overheader-20240102{
margin-top:8px;
margin-left:0px;	
background: url(https://machiyanohana.com/wp-content/uploads/2023/12/flower02.png) no-repeat;/*-- 上にのせる背景透過画像の指定 --*/
width: 370px;
height: auto;
position: absolute;/*-- 絶対位置の指定 --*/
z-index: 1;/*-- 上にする --*/
}
#enmaku{
  background-image:url(
https://machiyanohana.com/wp-content/uploads/2024/01/enmaku-99px.png);
  background-repeat:repeat-x;
  background-size:99px;
  height:65px;
}

.shominnoengei{
margin-top:8px;
margin-left:0px;	
background: urlhttps://machiyanohana.com/wp-content/uploads/2023/12/shominnoengei.png) no-repeat;/*-- 上にのせる背景透過画像の指定 --*/
width: 373px;
height: auto;
position: absolute;/*-- 絶対位置の指定 --*/
z-index: 1;/*-- 上にする --*/
}	
/*******************特定固定ページ日付非表示*******************/
.post-2 .date-tags {
display: none;
}
.post-237 .date-tags {
display: none;
}
.post-4195 .date-tags {
display: none;
}
.post-4197 .date-tags {
display: none;
}
/*****************************/
/* browser-shotのスクリーンショットを中央に */
.browser-shot {
text-align:center;
}
/* browser-shotのスクリーンショットの周りにボーダーを表示 */
.browser-shot img {
border: 1px solid #cccccc!important;
}

/************************************
** グローバルメニュー
************************************/
.navi {
  background-color: var(--cocoon-white-color);
}
.navi .item-label,
.navi .item-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navi-in .has-icon {
  position: absolute;
  right: 6px;
  top: 0;
  display: inline-block;
  opacity: 0.7;
  font-size: 11px;
}
.navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  /*サブメニュー*/
}
.navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.navi-in > ul li:hover > ul {
  display: block;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
  line-height: 21.4285714286px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 60px;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
  width: 100%;
}
.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  width: 240px;
  list-style: none;
  padding: 0;
  background-color: var(--cocoon-xxx-thin-color);
  z-index: 99;
  text-align: left;
  /*サブメニューのサブメニュー*/
}
.navi-in > ul .sub-menu li {
  width: auto;
}
.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}
.navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}
.navi-in a {
  position: relative;
  color: var(--cocoon-text-color);
  text-decoration: none;
  display: block;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

.navi-in a:hover {
  background-color: #f5f8fa;
  font-weight: bolder;    
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}
/********************************/
.navi-in a::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #B2B4FF;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
  transition: .7s;   
}

.navi-in a:hover::after {
  transform: scale(1, 1);
}

/********************************/
/************************************
** フッターメニュー
************************************/
.navi-footer-in > ul li {
  display: block;
  width: 176px;
  height: 20px;
  line-height: 20px;
  position: relative;
}
.navi-footer-in > ul li:hover > ul {
  display: block;
}

.navi-footer-in > .menu-footer {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: center;
}
.navi-footer-in > .menu-footer li {
  width: 120px;
  border-left: 2px solid var(--cocoon-thin-color);
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 2px solid var(--cocoon-thin-color);
}
.navi-footer-in a {
  color: var(--cocoon-text-color);
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
}

.navi-footer-in a:hover {
  background-color: #f5f8fa;
  font-weight: bolder;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}

/*ホバーエフェクト*/
.navi-footer-in a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  background-color: #E42C31;
  bottom: 0;
  left: 0;
  /*幅を0に設定*/
  width: 0;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.navi-footer-in a:hover::after {
  /*幅を100%に設定*/
  width: 100%;
}

/*Contact From 7 デザイン*/
.cf-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: .5em 0 0 10px;
	border-bottom: 1px dashed #ccc;
	transition: all .3s;
}

.cf-area:last-child {
	border-bottom: none;
}

.cf-area dt {
  width: 200px;
  padding-right: 30px;
  text-align: left;
	line-height:1.5em;
}

.cf-area dd {
    flex: 1;
}

.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.8em;
  border: none;
/*  background-color: #e6e6e6;*/
	background: #F0F8FF; 
font-size: 16px;
	resize: vertical;
	transition: all .3s;
}

.cf-area input:focus,.cf-area textarea:focus {
	outline: none;
/*	background: #dde2e9;*/
	background: #FFE4E1;
}

.cf-required {
	background: #b91e23;
	color: #fff;
	font-size: 0.8em;
	padding: 0 5px 2px;
	border-radius: 2px
}

.cf-unrequired {
	background: #bdbdbd; /*グレー*/
	color: #fff;
	font-size: 0.8em;
	padding: 0 5px 2px;
	border-radius: 2px
}

.cf-send input {
	display: block;
	background: linear-gradient(135deg, #6b7a8e 0%, #3b4a5e 100%);
	width: 300px;
	height: 60px;
	margin: 30px auto 0;
	border: none;
	border-radius: 10px;
	color: #fff;
	box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, .2);
	font-size: 1.3em;
	font-weight: bold;
	transition: all .3s;
}

.cf-send input:hover {
	filter: brightness(1.25);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #fce3e3;
	border: none;
	text-align: center;
}

.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: #cc0000;
font-weight: bold;
} 

@media screen and (max-width:768px){
	.cf-area {
		display: block;
	}

	.cf-area dt {
    width: 100%;
		margin-bottom: 5px;
    padding-right: 0;
    text-align: left;
		line-height:1.5em;
	}
}

/* 確認画面テーブル */
#wpcf7cpcnf table::before {
content: "ご確認ください";
color: #cc0000;
font-weight: bold;
}

#wpcf7cpcnf table::after {
content: "ご確認ください";
color: #cc0000;
font-weight: bold;
}

#wpcf7cpcnf table {
    border: none;
}
#wpcf7cpcnf table th {
    background-color: #696969;
/*    border: 1px solid #ccc; */
    border: 1px dashed #ccc;
color: #fff;
    text-align: center;
}
#wpcf7cpcnf table td {
/*    border: 1px solid #ccc; */
    border: 1px dashed #ccc;
}

/* ボタン */
#wpcf7cpcnf button {
/*    background-color: #555;
    border: 4px outset #000;
    color: #fff; */
	display: block;
	background: linear-gradient(135deg, #6b7a8e 0%, #3b4a5e 100%);
	width: 300px;
	height: 60px;
	margin: 30px auto 0;
	border: none;
	border-radius: 10px;
	color: #fff;
	box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, .2);
	font-size: 1.3em;
	font-weight: bold;
	transition: all .3s;

}