@charset "UTF-8";
/*================================================
ヘッダーサジェスト専用CSS
================================================*/

/** ZETA SUJEST
------------------------------*/
.section_zeta_suggest {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    max-height: 0;
    z-index: 20000;
    width: 100%;
    background: #fff;
    padding: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    overflow: hidden;
}
.suggest_open .section_zeta_suggest {
	display:block;
	height:auto;
	max-height: 100vh;
}
.section_zeta_suggest_wrapper {
    /*! margin: 26px auto; */
    margin: 16px 0 0;
    -webkit-transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    opacity:0;
    transition-delay: 0.2s;
    overflow: hidden;
}
.suggest_open .section_zeta_suggest_wrapper{
	opacity: 1;
}

.suggest_open .section_zeta_suggest_wrapper > div {
	animation-name:fadeUpSuggest;
	animation-duration:0.6s;
	animation-fill-mode: forwards;
	animation-delay: .25s;
	opacity: 0;
}
.zeta_suggest_list_wrapper{
	max-height: calc(100vh - 98px);
	overflow:auto;
	padding-bottom: 1rem;
}
.fadeUpItem{
	animation-name:fadeUpSuggest;
	animation-duration:0.6s;
	animation-fill-mode: forwards;
	animation-delay: .25s;
	opacity: 0;	
}
@keyframes fadeUpSuggest{
	from {
	    opacity: 0;
		transform:translateY(1rem);
	}
	to {
		opacity: 1;
		transform:translateY(0rem);
	}	
}

.suggest_page-mask {
    opacity:0;
    position: fixed;
    left: 0px;
    top: 0px;
    overflow: hidden;
    width: 100%;
	height:100%;
    -webkit-transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	z-index:-1;
}
.suggest_open .suggest_page-mask{
	display:block;
	opacity:1;
    background-color: rgba(42, 41, 47, 0.6);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    z-index: 1001;
}
.suggest_page-mask
  .section_category_zeta {
	display:none;
  }

.section_zeta_suggest_input input[type="text"]{
    width: 287px !important;
    height: 48px !important;
    padding: 0 35px 0 48px;
    background: #F5F5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    border: none;
    color: #555555;
    font-size: 14px;
    outline: none;
}

/* .section_zeta_suggest_input input[type="text"]:focus {
	outline: 0;
	border-color: #555555;
	box-shadow: 0px 0px 10px #555555;
} */

.section_zeta_suggest_input input[type="image"] {
    position: absolute;
    top: calc(50% - 12px);
    left: 16px;
    outline: none;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;
    width: 24px;
    height: 24px;
}

.section_keyword_history,
.section_keyword_zeta {
	border-bottom: 1px solid #E9E9E9;
	margin-bottom: 36px;
}

#keyword_history ,
#keyword_zeta2 ,
#keyword_zeta ,
#category_zeta  {
	width: 100%;
	padding: 0 24px 36px;
}

#keyword_history li,
#keyword_zeta2 li,
#keyword_zeta li,
#category_zeta li {
	font-size: 20px;
	margin-bottom: 12px;
	cursor: pointer;
	color: #1A1A1A;
	letter-spacing: 0.1em;
	list-style: none;
	line-height:1.5;
	margin-left:0;
	padding-left:0;
}
#keyword_history li:last-child,
#keyword_zeta2 li:last-child,
#keyword_zeta li:last-child,
#category_zeta li:last-child{
	margin-bottom:0;
}
.zeta_suggest_title {
	font-size:12px;
	width: 100%;
	padding: 0 24px 20px;
	color: #555555;
	line-height: 1.5;
}

.section_zeta_suggest_input {
    position: relative;
	width: 100%;
	margin: 0 24px 33px;
}

.section_keyword_history {
	display: none;
}
.section_keyword_zeta2 {
	display:none;
}

.section_keyword_zeta {
	display:none;
}

.section_category_zeta {
	display:none;
}
	.section_category_zeta {
		display:none;
		animation:fadeUpSuggest;
		animation-duration:0.6s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
		opacity: 0;
	}
	.section_keyword_history.active {
		display:block;
		animation:fadeUpSuggest;
		animation-duration:0.6s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
		opacity: 0;
	}
	.section_keyword_zeta2.active {
		display:block;
		animation:fadeUpSuggest;
		animation-duration:0.6s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
		opacity: 0;
	}

	.section_keyword_zeta.active {
		display:block;
		animation:fadeUpSuggest;
		animation:fadeUpSuggest;
		animation-duration:0.6s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
		opacity: 0;
	}

	.section_category_zeta.active {
		display:block;
		animation:fadeUpSuggest;
		animation-duration:0.6s;
		animation-fill-mode: forwards;
		animation-delay: .25s;
		opacity: 0;
	}
.suggest_close {
	display: block;
	width: 24px;
	height: 24px;
	/* background-color: #fff; */
	position: absolute;
	top: 23px;
	right: 20px;
	z-index: 100;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
.suggest_close__icon {
	display: inline-block;
	width: 24px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #000;
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	font-size: 0;
}
.suggest_close__icon:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: inherit;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.suggest_reset {
	display: none;
	width: 24px;
	height: 24px;
	position: absolute;
	top: calc((48px / 2) - 12px);
	left: 245px;
	z-index: 100;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}

@media screen and (min-width: 1001px){
	.suggest_reset {
		left: 456px;
		top: calc((60px / 2) - 12px);
	}
}

.suggest_reset__icon {
	display: inline-block;
	width: 24px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #000;
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	font-size: 0;
}
.suggest_reset__icon:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: inherit;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}


@media screen and (min-width: 1001px){
	/** ZETA SUJEST
	------------------------------*/
	.section_zeta_suggest {
		display: block;
		position: fixed;
		z-index: 2000000;
		width: 100%;
		background: #fff;
		-webkit-transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
		transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.suggest_open .section_zeta_suggest{
		
	}
	.section_zeta_suggest_wrapper {
		width:100%;
		margin: 26px auto;
	}
	.zeta_suggest_list_wrapper{
		calc(100vh - 129px);
		max-height: calc(100vh - 145px);
	}
	.suggest_page-mask {

	}

	.section_category_zeta {
		display:none;
	}

	.section_zeta_suggest_input input[type="text"]{
		width: 500px!important;
		height: 60px!important;
		padding: 0 35px 0 54px;
		background: #F5F5F5;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		-ms-border-radius: 30px;
		border-radius: 30px;
		border: none;
		color: #555555;
		font-size: 20px;
		outline: none;
		-o-border-radius: 30px;
}

	.section_zeta_suggest_input input[type="image"] {
		position: absolute;
		top: calc(50% - 12px);
		left: 16px;
		outline: none;
		-webkit-transition: opacity .3s ease;
		-moz-transition: opacity .3s ease;
		-ms-transition: opacity .3s ease;
		transition: opacity .3s ease;
		width: 24px;
		height: 24px;
	}

	.section_keyword_history,
	.section_keyword_zeta {
		border-bottom: 1px solid #E9E9E9;
		margin-bottom: 36px;
	}

	#keyword_history ,
	#keyword_zeta2 ,
	#keyword_zeta ,
	#category_zeta  {
		width: 500px;
		margin: 0 auto;
	}

	#keyword_history li,
	#keyword_zeta2 li,
	#keyword_zeta li,
	#category_zeta li {
		font-size: 20px;
		margin-bottom: 12px;
		cursor: pointer;
		color: #1A1A1A;
		letter-spacing: 0.1em;
	}

	.zeta_suggest_title {
		font-size:12px;
		width: 500px;
		margin: 0 auto;
		color: #555555;
	}

	.section_zeta_suggest_input {
		position: relative;
		width: 500px;
		margin: 0 auto 30px;
	}

	.section_keyword_history {
		display: none;
	}
	.section_keyword_zeta2 {
		display:none;
	}

	.section_keyword_zeta {
		display:none;
	}

	.suggest_close {
		display: block;
		width: 36px;
		height: 36px;
		background-color: #fff;
		position: absolute;
		top: 38px;
		right: 20px;
		z-index: 100;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		cursor: pointer;
	}
	.suggest_close__icon {
		display: inline-block;
		width: 36px;
		height: 1px;
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: #000;
		transform: translate(-50%, -50%) rotate(45deg);
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
	}
	.suggest_close__icon:after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: inherit;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	}
}