@charset "UTF-8";
@media screen and (min-width: 768px){
	header.pof-logo {
		width: 100%;
		max-width:1024px;
		min-width: 480px;
		margin: 0 auto;
		padding: 10px 0;
		font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
		display: flex;
		justify-content: space-between;
	}
	#titleimg-element {
		width:65%;
	}
	#titleimg-element img {
		max-width: 100%;
		max-height: 100%;
		margin: 0;
		padding: 0;
	}
	#title-element {
		margin: 0;
		padding: 0;
		width: 30%;
	}

/* google Search Box */
	#search-box * {
		box-sizing: border-box;
	}
	#search-box .gsc-control-cse {
		background: none;
		border: none;
		margin-top:3px;
		padding: 0;
	}
	#search-box table.gsc-search-box {
		height: 31px;
		margin-bottom: 0;
	}
	#search-box td.gsc-input {
		height: 100%;
		padding-right: 0!important;
	}
	#search-box .gsc-input-box {
		border: 1px solid #6ad9c7;
		border-radius: 0;
		height: 100%;
		padding: 0;
	}
}

@media screen and (max-width: 680px) {
	header.pof-logo {
		height: 100%;
		flex-direction: column;
		-webkit-flex-direction: column;
		justify-content: wrap;
		padding:0 5px;
	}
	#titleimg-element img{
		margin: 0 auto;
		padding: 0;
		max-width: 100%;
		max-height: 100%;
	}
	#title-element{
		width: 100%;
		align-items: right;
		margin: 0;
		padding: 0;
	}
/* google Search Box */
	#search-box .gsc-input-box {
		border-left: 0;
	}
}

#search-box table.gsc-input {
    height: 100%;
}
#search-box .gsib_a {
    height: 100%;
    padding: 0 10px;
}
#search-box input.gsc-input {
    display: block;
    font-size: 16px;
    height: 100%!important;
    -webkit-appearance: none;
}
#search-box .gsib_b {
    height: 100%;
}
#search-box .gsst_b {
    height: 100%;
    padding: 0;
}
#search-box .gsst_a {
    display: block;
    height: 100%;
    padding: 0;
    text-decoration: none;
}
#search-box .gscb_a {
    align-items: center;
    color:#6ad9c7!important;
    display: flex;
    font-size: 24px;
    height: 100%;
    justify-content: center;
    line-height: 1;
    width: 29px;
}
#search-box td.gsc-search-button {
    height: 100%;
}
#search-box .gsc-search-button-v2 {
    align-items: center;
    background:#6ad9c7;
    border: none;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    width: 31px;
}
#search-box .gsc-search-button-v2:hover {
    background:#6ad9c7;
    opacity: 0.5;
}
#search-box .gsc-search-button-v2:focus{
    background: #6ad9c7;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}
#search-box .gsc-search-button-v2 svg {
    display: block;
    height: 13px;
    width: 13px;
}
 /* g-nav */
 #menu-box {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #ECECEC;
	}
#menu {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	border-radius:1px;
	}
#menu li{
	/*display: block;*/
	float: left;
	width: 16.6%; /* カテゴリ数で分割1024px以上 */
	margin: 0;
	padding: 0;
	font-size: 1rem;
	list-style-type: none;
	}
#menu li a {
	display: block;
	padding: 10px 0 10px; /* pxで指定 */
	text-align: center;
	background-color: rgb(220, 235, 234);
	color: rgb(57, 127, 143);
	transition: all .4s;
	text-decoration: none;
	border-right:1px solid rgb(255, 255, 255);
}
/* 20171228 */
[data-current-nav="CL"] menu ul li:nth-child(1) a,
[data-current-nav="BZ"] menu ul li:nth-child(2) a,
[data-current-nav="ED"] menu ul li:nth-child(3) a,
[data-current-nav="CA"] menu ul li:nth-child(4) a,
[data-current-nav="CR"] menu ul li:nth-child(5) a,
[data-current-nav="support"] menu ul li:nth-child(6) a,

#menu li:last-child a{
	background-color: rgb(234, 238, 209);
	border-right: none;
}
#menu li a:hover{
	background-color: #2ABB9B;
	color:#fff;
	text-decoration: underline;
}
#toggle {
	display: none;
}

/* 画面サイズが1024px以下 legacyNotePC,iPadPro */
@media only screen and (max-width: 1024px) {
	#menu li {
		width: 33.3%;
		}
	#menu li a {
		border-bottom:1px solid #E0E0E0;
		}
}


/* 画面サイズが480px以下で適用 */
@media only screen and (max-width: 480px) {

	#titleimg-element{
		margin: 0;
		padding: 0;
		max-width: 100%;
	}
	#search-box {
		display: none;
	}
	#menu {
		display: none;
		}
	#menu li {
		width:100%;
		background-color: #2ABB9B;
		}
/* hamburger icon */
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background-color: rgb(213, 235, 228);
		}
	#toggle a{
		display: block;
		position: relative;
		padding:8px 0 8px;
		color: #37474F;
		text-align: center;
		text-decoration: none;
		}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 25px;
		height: 25px;
		margin-top: -11px;
		background: url('/_css/img/menu-icon-s.png') no-repeat;
		}
}