@charset "UTF-8";
/* Probo用CSS */

.siteSearch {
	padding: 15px 0 15px 15px;
}
.siteSearch .searchInput {
	border: none;
	float: left;
	margin: 0;
	vertical-align: top;
	background-color: #e8e9e8;
	font-family: 'リュウミン R-KL', 'Ryumin Regular KL', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', serif; 
	outline: 0; 
}
.siteSearch .searchInput:focus {
    border: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: 0;
}
.siteSearch input::-ms-clear {
    visibility:hidden
}


/* -----------------------------------------------------

 for TB / SP

----------------------------------------------------- */
		@media screen and (min-width: 0px) and (max-width: 1024px) {
		#hdr-search {
	display: inline-block;
	position: absolute;
	right: 70px; top: 0;
	padding: 6px 0 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
}
#hdr-search.inputarea {
	width: auto;
	animation: show 1s swing 0.3s;
	-webkit-animation: width 1s swing 0.3s;
	-moz-animation: width 1s swing 0.3s;
}
.siteSearch .searchInput {
	width: 86px !important;
}
.siteSearch .searchIcon {
	width: 46px;
	height: 40px;
	float: left;
	text-align: left;
	padding: 0;
	margin: 4px 0 0;
}
.siteSearch .searchIcon img {
	width: auto;
	height: 100%;
	cursor: pointer;
}
.siteSearch .searchInputBox {
	float: left;
}
.siteSearch .searchButtonBox {
	float: right;
}
.siteSearch .searchInput {
	padding: 3.5px 8px;
	font-size: 0.9em;
	margin: 9px 0 0;
}

@keyframes show {
	from{width: 48px;}
	to {width: auto;}
}
@-webkit-keyframes show {
	from{width: 48px;}
	to {width: auto;}
}
@-moz-keyframes show {
	from{width: 48px;}
	to {width: auto;}
}

		}

/* -----------------------------------------------------

 for TB

----------------------------------------------------- */
		@media screen and (min-width: 641px) and (max-width: 1024px) {
#hdr-search {right: 80px; padding: 13px 0 0;}
.siteSearch .searchInput {width: 100px !important; margin-right: 1em;}
		}

/* -----------------------------------------------------

 for PC

----------------------------------------------------- */
		@media screen and (min-width: 1025px) {
.siteSearch {
	padding: 25px 0 25px 17px;
}
.siteSearch .searchInput {
	font-size: 1.25em;
	padding: 10px 15px;
	width: 72%;
}
.siteSearch .searchButton {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    width: 48px;
    height: 48px;
    vertical-align: top;
    background-image: url(/-/media/obagi/common/images/header/ico_search.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    cursor: pointer;
}
		}