@charset "UTF-8";

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

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


/* アニメーション */
#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;}
}

.loop_wrap {
  display: flex;
  width: 100vw;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
}

.loop_wrap img:first-child {
  animation: loop 150s -75s linear infinite;
	filter: drop-shadow(2px 5px 7px #aaaaaa66);
}

.loop_wrap img:last-child {
  animation: loop2 150s linear infinite;
	filter: drop-shadow(2px 5px 7px #aaaaaa66);
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
/* 共通 */
.sp,
.spbk{display: none;}
.cen {margin: 0 auto; text-align: center;}
.shadow {  text-shadow: 1px 1px 0 #000,
               -1px 1px 0 #000,
               1px -1px 0 #000,
               -1px -1px 0 #000;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 10px;}
.mt40 {margin-top: 20px;}
.mt50 {margin-top: 10px;}
.mt60 {margin-top: 20px;}


.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}

.tx110 {font-size: 110%;}
.tx120 {font-size: 120%;}
.tx140 {font-size: 140%;}

.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}

.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}

.sm {font-size: 75%;}
.mainc {color:#e4007f;}

.bgw {background-color: #fff;}
.height_auto {height: auto!important;}
.header .header-in {
    min-height: 220px;
}
h2 {letter-spacing: .85px}
h2.big {font-size:28px}

.h2_info {
	color: #C9A700;
	text-align: center;
	margin: 2.5em auto 1.5em;
	border-bottom: 2px solid #e4007f;
	width: 45%;
}
.column-wrap > div.waku {
    width: 49.5%;
    margin: 0;
    box-shadow: 1px 1px 3px #eee;
	background: #f8f8f8;
}
.dot::before {
	position: relative;
	content:"";
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/dot.png);
	display: block;
	background-repeat: no-repeat;
	width: 300px;
	height: 50px;
	margin: 0 auto 20px;
}
.dot::after {
	position: relative;
	content:"";
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/dot.png);
	display: block;
	background-repeat: no-repeat;
	width: 300px;
	height: 50px;
	margin: 20px auto 0;
}
.r5_bg {
	background: #6b3d30;
	color: #fff!important;
	font-weight: bold;
;
}
dl.menu {
	width: 100%;
	padding: 0 1.4em;
	box-sizing: border-box;
	clear: both;
}
dl.menu dt {
	width: 58%;
	float: left;
	line-height: 2em;
	padding-bottom: 3px;
}
dl.menu dt span {
	font-size: 80%;
}
dl.menu dd {
	text-align: right;
	font-style: italic;
	font-size: 110%;
line-height: 2em;
}

/*キャンペーン用*/

.event_bg {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/84311.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-size: 100%;
}

.fbox_bg_flier {
	width: 100%;
	background-color: #3a2312;

	padding: 0.5em 1em;
	position: relative;
	margin-bottom: 20px;
	opacity: 0.9;
    background-size: cover;
}

.kado001 {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/kado001.svg);
	background-position: 15px 15px;
	background-repeat: no-repeat;
	background-size: 100px 100px;
}

.fbox_bg_flier:after {
	content: " ";
	position: absolute;
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/kado002.svg);
	top: 15px;
	right: 15px;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	z-index: 80;
}

.fbox_bg_flier::before {
    content: " ";
    top: -4%;
	right: 23%;
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/point002.svg);
	width: 120px;
	height: 120px;
    position: absolute;
    z-index: 100;
}

/* seesaw */

.see_box {
	position: relative;
	margin: 0 auto;
	padding: 0.5em 0;
	margin-bottom: 20px;
	box-shadow: 0px 2px 3px #ddd;
	overflow: hidden;
	background: rgb(247 245 174);
	background: radial-gradient(circle, rgb(252 255 198 / 30%) 9%, rgb(239 89 153 / 30%) 100%);
}
.see_box::before {
	content: " ";
    top: 0;
    left: 0;
    border-bottom: 6em solid transparent;
    border-left: 6em solid #e4007f;
    position: absolute;
    z-index: 100;
}
.see_box::after {
	content: "NEW!!";
    display: block;
    top: 18px;
    left: 11px;
    transform: rotate(-45deg);
    color: #fff;
    font-size: 90%;
    position: absolute;
    z-index: 101;
}

.see_fuwa {
	width: 15%;
    height: auto;
    position: absolute;
    z-index: 8;
    top: 49%;
    left: 14%;
}
.see_title {
	width: 72%;
	margin: 20px auto -10px;
	text-align: center;
}
.see_price {
	font-size: 120%;
	margin: 0 0 1.2em;
}
.see_price span {
	font-size: 60%;
}
.plus {
    top: 61%;
    left: 48%;
    width: 5%;
    height: 5%;
    position: absolute;
    z-index: 100;
}

.f_50 {
	width: 50%;
	float: left;
	position: relative;
}
.w2 {
	width: 2%;
}
.w30 {
	width: 30%;
	padding:0 1.5%;
	vertical-align: middle;
}
.sankaku {position: relative;}

.sankaku::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 1em solid transparent;
    border-left: 1em solid #e4007f;
    position: absolute;
    z-index: 100;
}


.fbox_bg_cam {
	width: 100%;
	background-color: #eee;
	background-image:  url(https://beauty-collection-gyoda.com/wp-content/uploads/img/luviona_bg.jpg);
	padding: 0.5em 1em;
	position: relative;
	margin-bottom: 20px;
	opacity: 0.7;
    background-size: cover;
}

.fbox_bg_cam::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 6em solid transparent;
    border-left: 6em solid #e4007f;
    position: absolute;
    z-index: 100;
}
.fbox_bg_cam::after {
    content: "おすすめ!";
    display: block;
    top: 19px;
    left: 0;
    transform: rotate(-45deg);
    color: #fff;
    font-size: 90%;
    position: absolute;
    z-index: 101;
}


.fbox_bg {
	width: 100%;
	background-color: #eee;
	padding: 0.5em 1em;
	position: relative;
	margin-bottom: 20px;
}

.fbox_bg::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 6em solid transparent;
    border-left: 6em solid #e4007f; 
    position: absolute;
    z-index: 100;
}
.fbox_bg::after {
    content: "Pickup!";
    display: block;
    top: 19px;
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
	font-size: 90%;
    left: 5px;
    position: absolute;
    z-index: 101;
}


.fbox {
	width: 48.5%;
	float: left;
	box-shadow: 0px 2px 3px #ddd;
	margin-top:0.5em;
	margin-bottom: 2em;
	overflow:hidden;
	height:21.5em;
	position: relative;
}
.fbox ul {
	padding: 0;
}

.fbox ul li {
	list-style: none;
}

.fbox:nth-child(2n) {
	float: right!important;
}

/*YouTube動画の中央配置*/
.video-container{
margin: 0 auto;
}



.cl_2 {
	width: 48%;
	float: left;
	background: #fff;
	padding: 1.5em;
	box-sizing: border-box;
	
	
}
.cl_2 h2 {
	text-align: center;
	border-bottom: 2px solid #e4007f;
	text-shadow: 0px 0px 2px #fff;
	margin-left: -25px;
	margin-bottom: 15px;
	color: #C9A700;
}

.cl_2 p {
	font-size: 90%;
	text-shadow: 1px 1px 1px #fff;
}

.fbox .cl_2 a {
    padding: 0.8em 0;
    display: block;
    background: #e4007f;
    color: #fff;
    text-decoration: none;
    font-size: 70%;
    border-bottom-right-radius: 12px;
    margin: 15px auto 0;
    box-shadow: 1px 2px 3px #eee;
    max-width: 110px;
    text-align: center;
}


.cl_2 a:hover {
	opacity: 0.6;
}



.cr_2 {
	width: 48%;
	min-height: 66%;
	
	float: right;
	background: #fff;
}

.concept_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/concept_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 65%;
	min-height: 325px;
}
.shampoo_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/shampoo_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 76%;
}
.color_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/color_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 69%;
}
.degicure_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/degicure_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 67%;
}
.r5_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/r5_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 67%;
}
.aw78_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/aw78_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 57%;
}

.price_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/price_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 67%;
	min-height: 325px;
}

.hairrepear_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/hairrepear_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 57%;
}

.no_img {
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/noimage.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 57%;
	min-height: 325px;
}

/* 固定ページPrice */
.article h3　{
	color: #C9A700!important;
}
h2.h2_price {
	padding-bottom: 1.65em;
	color: #C9A700!important;
	background: rgba(255, 255, 255 , 0.1);
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/h2_bar.png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 70%;
}
h2.h2_price span {
	font-size: 70%;
}
.attention {
	text-align: center;
	padding: 0.5em 0;
	background: #e6e6e6;
	font-size: 90%;
}

.navi-in a:hover {
	border-bottom: 2px solid #e4007f;
}
.navi-in a:active {
	border-bottom: 2px solid #e4007f;
}
* {
	font-family:'NotoSansJP-Regular', 'Hiragino Kaku Gothic ProN', Verdana, Meiryo, sans-serif;
}

/* 固定ページタイトル */
.page .entry-title {
	color: #C9A700;
	padding-left: 0;
}
.subtitle {
	position: relative;
	color: #C9A700;
}
.subtitle::after {
	position: absolute;
	top: 117%;
	left: 1%;
	display: inline-block;
	content: "	";
	border-bottom: 2px solid #e4007f;
	width: 7%;
}



#media_image-3 img {
	width: 100%!important;
}

	.c2_l{
		width: 50%;
		float: left;
	}
	.c2_r{
		width: 50%;
		float: left;
	}
	.c2_l,
	.c2_r {
		padding: 0 1.5em;
}
.section01 {
	background:url(https://beauty-collection-gyoda.com/wp-content/uploads/2019/10/section01.jpg);
	padding-bottom:23%;
	background-size: 100%;
	background-repeat:no-repeat;
	margin: auto;
}
.section02 {
	background:url(https://beauty-collection-gyoda.com/wp-content/uploads/2019/10/section02.jpg);
	padding-bottom:22%;
	background-size: 100%;
	background-position:40% 30%;
	background-repeat:no-repeat;
	margin: auto;
}
.section02 h2 {
	color:#fff;
}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}

/* 固定ページコンタクトBOX */
.contact_box {
	position: relative;
	background: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/contact_fbox.jpg) no-repeat top right 45%;
	max-width: 100%;
	height: 230px;
}
.contact_box p {
    position: relative;
    top: 20%;
    left: 5%;
    font-size: 120%;
    color: #C9A700;
}
.contact_box p span {
	font-size:150%;
	font-weight: bold;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1255px) {
    .entry-card-thumb {
        width: 24%;
    }
	.entry-card-content {
		margin-left: 28%;
	}
}
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
.site-logo-image,
.haeder-site-logo-image {
	width: 80%;
	top: 10%;
}
	.fbox_bg_flier::before {
    content: " ";
	top: -2%;
	right: 20%;
	background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/point002.svg);
	width: 120px;
	height: 120px;
    position: absolute;
    z-index: 100;
}
}

/*1030px以下*/
@media screen and (max-width: 1030px){
	/*必要ならばここにコードを書く*/
	.site-logo-image,
	.haeder-site-logo-image {
		width: 70%;
		top: 10%;
	}
	.fbox_bg_cam .fbox {
		background-color: #fff;
		height: 100%;
	}
	h2.big {font-size:24px}

	.section01 {
		background:url(https://beauty-collection-gyoda.com/wp-content/uploads/2019/10/section01.jpg);
		padding-bottom:26%;
		background-size: 100%;
		background-repeat:no-repeat;
		margin: auto;
		height: auto;
	}
	.fbox {
		width: 100%;
		float: none;
		margin-top:0.5em;
		margin-bottom: 2em;
	}

	.fbox:nth-child(2) {

		float: right;

	}

	.concept_img {
		padding-bottom: 54%;
		min-height: 325px;
	}
	.shampoo_img {
		padding-bottom: 57%;
	}
	.degicure_img {
		background-size: contain;
		padding-bottom: 47%;
		position: relative;
		left: 8%;
	}
	.r5_img {
		background-size: contain;
		padding-bottom: 43%;
		position: relative;
		left: 7%;
	}
	.aw78_img {
		background-size: contain;
		padding-bottom: 43%;
		position: relative;
		left: 7%;
	}
}

	/*768px以下*/
	@media screen and (max-width: 768px){
		/*必要ならばここにコードを書く*/
		.site-logo-image,
		.haeder-site-logo-image {
			width: 65%;
			position: absolute;
			top: 7%;
			left: 0;
			right: 0;
			margin: 0 auto;
			filter: drop-shadow(1px 1px 2px #000);
		}
		.cl_2 p {
			font-size: 110%;
			color: #111;
		}

		.h2_info {
			width: 60%;
		}
		.fbox .cl_2 h2 {
			font-size: 145%;
		}
		.fbox .cl_2 a {
			margin-right: 0;
		}
		.concept_img {
			display: none;
		}

		.concept_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/concept_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.5)!important;
			background-blend-mode:lighten;
		}
		.shampoo_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/shampoo_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.color_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/color_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.price_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/price_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.degicure_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/degicure_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.r5_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/r5_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.aw78_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/aw78_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.hairrepear_imgsp {
			background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/hairrepear_bg.jpg)!important;
			background-repeat: no-repeat!important;
			background-size: cover!important;
			background-color:rgba(255,255,255,0.7)!important;
			background-blend-mode:lighten;
		}
		.cl_2 {
			width: 100%;
			float: none;
			background: #fff;
			padding: 1.5em;
			box-sizing: border-box;
		}
		.cr_2 {
			display: none;
		}
		.c2_l{
			width: 100%;
			float: none;
		}
		.c2_r{
			width: 100%;
			float: none;
		}
		.c2_l,
		.c2_r {
			padding: 0.5em;
		}
		.section1 {
			padding: 1em;
			padding-bottom:50%;
			display: block;

		}

		.sp_big {
			max-width: 380%;
			position: relative;
			height: auto;
			left: -50%;
		}

		.see_fuwa {
			width: 34%;
			height: auto;
			position: absolute;
			z-index: 8;
			top: 8%;
			left: auto;
			right: 0;
		}

		.see_title {
			width: 95%;
		}
		.see_price {
			font-size: 110%;
			margin: 0 0 1.2em;
		}
		.see_price span {
			font-size: 60%;
		}
		.plus {
			top: 61%;
			left: 47%;
			width: 25px;
			height: 25px;
		}

		.f_50 {
			width: 95%;
			float: left;
			position: relative;
		}
		.fr {
			float: right;
			margin-top: 30px;
		}
		.w2 {
			width: 4%;
		}
		.w30 {
			width: 70%;
			padding:0 1.5%;
			vertical-align: middle;
		}
		.pc {display: none;}
		.sp {display: inline-block;}
		.spbk {display:block; margin:auto;}
		/* 固定ページタイトル */
		.page .entry-title {
			color: #C9A700;
			padding-left: 2%;
		}
		.subtitle {
			position: relative;
			color: #C9A700;
			padding-left: 2%;
		}

		.subtitle::after {

			top: 108%;

			width: 20%;
		}	
		.column-wrap > div.waku {
			width: 100%;
			margin: 0;
			box-shadow: 1px 1px 3px #eee;
		}
		.column-wrap > div.waku:first-child {
			margin-bottom: 20px;
		}

		.contact_box {
			position: relative;
			background: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/contact_fbox.jpg) no-repeat top left 30%;
			max-width: 100%;
			height: 180px;
		}
		.contact_box p {
			position: relative;
			top: 20%;
			left: 2%;
			font-size: 110%;
			color: #C9A700;
			text-shadow: 1px 1px 3px #fff;
		}
		.contact_box p span {
			font-size:130%;
			font-weight: bold;
		}
	}

			/*480px以下*/
			@media screen and (max-width: 480px){
				/*必要ならばここにコードを書く*/
				.h2_info {
					width: 100%;
				}
				.tel_btn {
					width: 80%;
					margin: 0 auto;
				}
				.tel_btn a{
					padding: 10px 10px;
					border-radius: 45px;
					background: #e4007f;
					box-sizing: border-box;
					width: 100%;
					color: #fff;
					text-align: center;
					margin: 24px auto;
					display: inline-block;
					text-decoration: none;
				}

				.fbox {
					height: auto;
				}

				.fbox_bg_cam .fbox {
					background-color: #fff;
					height: 100%;
				}
				.fbox_bg_flier::before {
					content: " ";
					top: -1%;
					right: 0%;
					background-image: url(https://beauty-collection-gyoda.com/wp-content/uploads/img/point002.svg);
					width: 80px;
					height: 80px;
					position: absolute;
					z-index: 100;
				}

			}
				/*375px以下*/
				@media screen and (max-width: 375px){
					.header div.header-in {
						min-height: 130px;
					}
					.site-logo-image, .haeder-site-logo-image {
						width: 80%;
						top: 7%;
					}				
					.fz-28px,.fz-32px {
						font-size: 20px;
						line-height: 1.6;
					}
				}
/*投稿日・更新日を消す場合*/
.page .date-tags {
    display: none;
}

/*著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*まとめて消す場合*/
.page .date-tags,
.page .author-info {
    display: none;
} 

/*投稿日のみを消す場合*/
 .page .post-date {
    display: none;
}