@charset "UTF-8";

/* *************************************************************

*   Navi CSS
*   Since:2025-05
*   Editor:ricostyle

************************************************************* */


/*PC用のcssを記述*/

/* COMMON */
#container {position:relative;height:auto;height:100%;width:100%;overflow: hidden;margin: 0;padding: 0;}
#contents{position:relative;width:100%;overflow:hidden;background:#FFF;}
.wrap{position:relative;margin:0 auto;width:100%;max-width:1060px;height:100%;}


/* HEAD */
#header {position: absolute;background:#FFF;height: 90px;width: 100%;top: -90px;left: 0px;margin-top: 90px;z-index: 50;
line-height: 1;box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.1);}
#header.fixed{position: fixed;top: 0;margin-top: 0;height: 90px;transition: top 0.6s ease-in;-webkit-transition: top 0.6s ease-in;-moz-transition: top 0.6s ease-in;}
#header .wrap{text-align:left;}	
#header h1{padding-top:10px;}
#header h1 img{width:387px;}
#header .head_contact{position:absolute;right:110px;top: 50%;transform: translateY(-50%);display:inline-block;background-image: linear-gradient(90deg, rgba(180, 232, 183, 1) 5%, rgba(248, 249, 106, 1) 23%, rgba(254, 227, 177, 1) 57%, rgba(248, 163, 213, 1) 92%);text-align:center;}
#header .head_contact a{display:block;padding:15px 30px;color:#555;font-family: "Noto Serif JP";font-size:90%;font-weight:600;}
#header .head_contact a:hover{text-decoration:none;}
#header .head_contact a img{margin-right:5px;}
#header .head_contact:hover{opacity:0.8;}


/* FOOT */
#footer{background:#333;text-align:center;padding:20px 0;}
#footer p{color:#FFF;font-size:0.85em;}



/* NAVI ミーンメニュー */
#SPmenu nav{text-indent: -9999em;}/* 一瞬表示されるメニューリストの非表示 */

.mean-container p{
display:inline-block;
position:absolute;left:0;top:15px;
font-family: "Noto Serif JP";
font-size:0.75em !important;}

.mean-container .mean-bar {
position:absolute;right:0;top:0;
height:100%;
z-index: 99999;
}

/* メニュー三本線ボタン */
.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 30px;
	padding:10px 0 10px 55px;
	display:inline-block;
	position: absolute;right:0;top:0;bottom:0;margin:auto 0;
	cursor: pointer;
	color:  #333;
	font-weight:200;
	font-size:20px;
}
.mean-container a:hover.meanmenu-reveal{
text-decoration:none;}

/* メニュー三本線ボタン */
.mean-container a.meanmenu-reveal span {
	display: block;
	background: #333;
	height: 1px;
	margin-top:6px;
}


.mean-container .mean-nav {margin-top: 70px;}
.mean-container .mean-nav ul {width: 100%;max-width:150px;list-style-type: none;}
.mean-container .mean-nav ul li {position: relative;width: 100%;float: left;}
.mean-container .mean-nav ul li a {
	display: block;
	width: 80%;
	padding: 12px 10%;
	margin: 0;
	text-align:right;
	color: #FFF;background-color: #0099CC;
	font-weight:300;
	border-top: 1px dotted #eee;
	text-decoration: none;
	text-transform: uppercase;
}
.mean-container .mean-nav ul li a:hover{background-color:#51A8D2;}

.mean-container .mean-push {float: left;width: 100%;padding: 0;margin: 0;clear: both;}



/*PAGE UP
------------------------------------------------------------ */
#page-top a{display:block;width:100px;height:60px;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;background:#5CADD6 url(../img/icon_totop.png) no-repeat center center;display:block;text-indent:-9999px;position:fixed;bottom:64px;right:0;}
#page-top a:hover{filter:alpha(opacity=90);-moz-opacity: 0.9;opacity: 0.9;}




@media only screen and (max-width:960px) {
/*スマホ・タブレット用のcssを記述*/

/* COMMON */
.wrap{width:96%;max-width:960px;}
}



@media only screen and (max-width:720px) {
/*ヘッド用のcssを記述*/

/* COMMON */
.wrap{max-width:720px;}

/* HEAD */
#header h1 img{width:60%;max-width:387px;}

#header .head_contact{right:100px;}
#header .head_contact a{padding:12px 10px;}
#header .head_contact a img{margin:0;width:75%;}
#header .head_contact a span{width:0;height:0;visibility:hidden;display:none;}
}



@media only screen and (max-width:559px) {
/*ヘッド用のcssを記述*/

/* COMMON */
.wrap{width:96%;max-width:559px;}

/* HEAD */
#header{height:80px;top:-80px;margin-top:80px;}
#header.fixed{height:80px;}
#header h1{padding-top:15px;}
}




@media only screen and (max-width:428px) {
/*スマホ・タブレット用のcssを記述*/

/* COMMON */
.wrap{max-width:428px;}

/* HEAD */
#header h1{padding-top:18px;}
#header .head_contact{right:88px;}
#header .head_contact a{padding:8px 6px;}
#header .head_contact a img{width:70%;}
}