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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.spc100
{
	padding-top:100px;
}


.reservation_btn {
    position: fixed;
    right: 50px;
    top: 0;
    width: 160px;
    height: 40px;
    /* background-color: #973468; */
    /* background-color: #41845B; */
    background-color: #066b2b;
    color: #fff;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
    z-index: 9999;
    transition: .3s;
}

.reservation_btn:hover {
	background-color: #045121;
}

.wp-block-cover__inner-container p
{
	color:#fff !important;
	font-size:24px !important;
	font-weight: 100 !important;
}

a {
	color: #474747;
	/* text-decoration: none; */
}

/* コンテンツ */
#content {
	max-width: 1295px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}

/* パンくずリスト */
#breadcrumb .breadcrumb-caption {
	transition: .3s;
}

#breadcrumb .breadcrumb-caption:hover {
	opacity: .7;
}

/* グローバルメニュー */
#menu-mainmenu .item-label {
	transition: .3s;
}

#menu-mainmenu .item-label:hover {
	opacity: .7;
}

/* ミニカレンダー */
#holiday_calendar {
	padding-top: 100px;
	padding-bottom: 0px;
}


.xo-event-calendar .calendars.columns-2 {
	column-gap: 30px;
}

.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 3.0em;
	/* height: 100%; */
}

.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}

h2.wp-block-heading {
	background-color: inherit !important;
}

/* スタイリスト一覧 */
.stylist_view {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-evenly;
}

.stylist_view .stylist_photo {
	width: calc(25% - 20px);
	transition: .3s;
	flex-grow: 0;
}

.stylist_view .stylist_photo img {
	display: block;
}

.stylist_view .stylist_photo:hover {
	opacity: .7;
	transform: scale(1.05, 1.05);
}

/* スタイリスト一覧ページ用 */
#stylist {
	padding-top:100px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-evenly;
}

#stylist .stylist_photo {
	width: calc(25% - 40px);
	transition: .3s;
	flex-grow: 0;
}

#stylist .stylist_photo img {
	display: block;
}

#stylist .stylist_photo:hover {
	opacity: .7;
	transform: scale(1.05, 1.05);
}

.map {
	margin-top: 100px;
}

.check_info {
	margin-top: 100px !important;
}

.check_info p {
	margin: 0;
	font-size: .9em;
}

/* TOPヘアーカタログ */
.hair_catalog {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-evenly;
}

.hair_catalog .hair_catalog_photo {
	width: calc(20% - 20px);
	transition: .3s;
	flex-grow: 0;
}

.hair_catalog .hair_catalog_photo img {
	display: block;
}

.hair_catalog .hair_catalog_photo:hover {
	opacity: .7;
	transform: scale(1.05, 1.05);
}

/* ヘアーカタログ一覧ページ */
#hair_catalog {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-evenly;
	padding-top:100px;
}

#hair_catalog .hair_catalog_photo {
	width: calc(20% - 20px);
	transition: .3s;
	flex-grow: 0;
}

#hair_catalog .hair_catalog_photo img {
	display: block;
}

#hair_catalog .hair_catalog_photo:hover {
	opacity: .7;
	transform: scale(1.05, 1.05);
}

/* スタイリスト個別ページ */
#stylist_area {}

#stylist_area .block {
	display: flex;
}

#stylist_area .image {
	padding-right: 0;
}

#stylist_area .profile {
	padding-left: 20px;
}

#stylist_area .introduction {
	padding-top: 20px;
}

/* ヘアースタイル */
#hair_style_area {}

#hair_style_area .block {
	display: flex;
}

#hair_style_area .image {
	padding-right: 0;
}

#hair_style_area .detail {
	padding-left: 20px;
}

#hair_style_area .comment {
	padding-top: 20px;
	max-width: 400px;
}

.other_hair_style {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

}

.other_hair_style .hair_catalog_photo {
	width: calc(25% - 20px);
	transition: .3s;
	flex-grow: 0;
}

.other_hair_style .hair_catalog_photo img {
	border:1px solid #ccc;
}

.other_hair_style .hair_catalog_photo:hover {
	opacity: .7;
	transform: scale(1.05, 1.05);

}

.other_style_head
{
	margin-top:80px !important;
}



/* フッター */
.footer-right {
	text-align: right;
}

/* scroll_up */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
	transition: 0.8s ease-in-out;
	transform: translateY(60px);
	opacity: 0;
}

.scroll_up.on {
	transform: translateY(0);
	opacity: 1.0;
}

/*----------------------------
  scroll_left ｜左から出現
  ----------------------------*/
.scroll_left {
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform: translateX(-30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}

.scroll_left.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}

/*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/
.scroll_right {
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform: translateX(30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}

.scroll_right.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}



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

/*834px以下*/
@media screen and (max-width: 834px) {

	/*必要ならばここにコードを書く*/
	.stylist_view .stylist_photo {
		width: calc(33.3% - 20px);
	}

	.hair_catalog .hair_catalog_photo {
		width: calc(33.3% - 20px);
	}


	.other_hair_style .hair_catalog_photo {
		width: calc(33.3% - 20px);
		transition: .3s;
		flex-grow: 0;

	}


.reservation_btn {
    right: 10px;
    width: 120px;
    height: 30px;
	line-height:28px;
}


}

/*480px以下*/
@media screen and (max-width: 480px) {

	/*必要ならばここにコードを書く*/
	.stylist_view .stylist_photo {
		width: calc(50% - 20px);
	}

	.hair_catalog .hair_catalog_photo {
		width: calc(50% - 20px);
	}


	.other_hair_style .hair_catalog_photo {
		width: calc(50% - 20px);
		transition: .3s;
		flex-grow: 0;

	}

}