@charset "UTF-8";
/* CSS Document */
* {margin:0 auto;padding:0;text-align:center;} html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0 auto; padding:0; border:0; outline:0; font-size:1rem; font-size:100%; vertical-align:baseline; background:transparent; font-family: 'normal';} body { width:100%; background-image:url('https://www.ciao-net.jp/images/bg_sec2.gif'); } .left { float:left; } .right { float:right; } .clear { clear:both; } .smt { display:none; } .controlArrow.prev { left: 50px; } .controlArrow.next{ right: 50px; } .section { width:100%; height:100%; margin:0 auto; padding:0; position:relative; text-align:center; font-size:100%; } #wrapper { width:100%; } #content { position:relative; width:90%; margin:1% auto; max-width:1200px; overflow:hidden; }.pankuzu {width:98%;position:relative;top:0;left:0;padding:1%;text-align:left;z-index:5;font-size:80%;}
/* font */ @font-face { font-family: 'normal'; src: url('https://www.ciao-net.jp/fonts/GenShinGothic-Normal.ttf'); } @font-face { font-family: 'medium'; src: url('https://www.ciao-net.jp/fonts/GenShinGothic-Medium.ttf'); } @font-face { font-family: 'bold'; src: url('https://www.ciao-net.jp/fonts/GenShinGothic-Bold.ttf'); } @font-face { font-family: 'APJ'; src: url('https://www.ciao-net.jp/fonts/APJapanesefontF.ttf'); } @font-face {font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;font-family:'mincho';}h1 { position:fixed;top:-20px;font-size:0; } h1 br {display:none;}
/* HEADER : ヘッダー */ #header { position:fixed; top:0; width: 100%; height: 50px; display:block; z-index:999; text-align:center; padding: 0; margin:0 auto; color:white; transition: all .4s; } #header:hover { background-color:rgba(0,25,102,1); } #header .ecolaundry { height:100%; max-width:140px; } #header .mammaciao { height:100%; max-width:210px; } #header .head { position:absolute; top:10px; right:10px; } #header .head ul { list-style:none; margin:0 auto; } #header .head ul li { float:left; margin-left:20px; } #header .head ul li a { text-decoration:none; color:white; font-size:80%; font-family: 'medium'; } #header .head ul li a:hover { text-decoration:underline; }
/* groval menu  */ .menu { display:none; position:fixed; top:0; width:100%; height:17%; background-color:rgba(0,25,102,1); z-index:3; padding-top:3%; z-index:6; } ul.g_menu { width:100%; max-width:1200px; margin:0 auto; list-style-type:none; position:relative; top:18%; } ul.g_menu li { float:left; width:14.285%; padding:0; } ul.g_menu li a { margin:0 auto; color:white; text-decoration:none; font-size:1vw; } ul.g_menu li:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } ul.g_menu li a img { width:100%; max-width:45px; }
header {
	background-color: #001966;
	position: fixed;
	-webkit-position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 51px;
	padding: 0;
	margin: 0 auto;
	z-index: 999;
}
header .menu-trigger {
	float: left;
	width: 6%;
	padding: 0.5em;
	text-align: center;
	color: white;
	font-size: 60%;
	text-decoration: none;
}
header .menu-trigger i {
	display: block;
	font-size: 250%;
	margin-bottom: .1em;
}
header .logo {
	float: left;
	width: auto;
	height: 50px;
	max-width: 200px;
	background-color: white;
}
header .logo img {
	width: auto;
	max-height: 40px;
	margin-top: 5px;
}
header a.chain {
	float: left;
	background-color: crimson;
	color: white;
	height: calc(50px - 0.9em);
	font-size: 90%;
	text-decoration: none;
	text-align: center;
	padding: .9em 1em 0 1em;
}
header .chain i {
	margin-right: .3em;
}

header .spchain {
	display: none;
}

header .head-links {
	float: right;
	width: auto;
	text-align: right;
	padding-top: 1em;
}
header .head-links a {
	color: white;
	font-size: 70%;
	margin: 0 0.5em;
	text-decoration: none;
}
header .head-links a:hover {
	text-decoration: underline;
}
header .menu-list {
	clear: both;
	background-color: rgba(0,25,102,0.8);
	display: none;
	width: 100%;
	position: fixed;
	top: 50px;
}
header .menu-list:after {
	clear: both;
	content: '';
	display: block;
}
header .menu-list li {
	list-style: none;
	width: 14.2857%;
	float: left;
	text-align: center;
	padding: 1em 0;
}
header .menu-list li a {
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 70%;
}
header .menu-list li img {
	width: 100%;
	max-width: 30px;
	display: block;
	margin: 0 auto;
	margin-bottom: .2em;
}
.pc{
	display:block !important;
}
.sp{
	display:none !important;
}
@media screen and (min-width:1080px) {
header .head-links {
	font-size: 15px !important;
}
}
@media screen and (max-width:950px) {
header .menu-list li {
	width: 25%;
}
}
@media screen and (max-width:900px) {
header a.chain {
	display: none;
}

header .sdgsbnr {
	margin-left: 5px;
}

header .spchain {
	display: inline;
	background: linear-gradient(transparent 60%, #3498db 60%);
}

header .head-links {
	width: 100%;
	background-color: crimson;
}
#wrapper, #fullpage {
	/* position:relative; */
	/*top: 3em !important;*/
}
header .head-links {
	position:relative;
	top: 0px;
	padding: 0.5em 0;
	text-align: center;
}
header .menu-list {
	z-index: 999;
}
}
/* FOOTER : フッター */ footer { width:100%; background-color:#D90000; position:relative; bottom:0; } .section footer { width:100%; background-color:#D90000; bottom:0; } footer, footer a { color:white; text-decoration:none; } footer a:hover { padding-bottom:5px; border-bottom:4px solid white; } footer .link { max-width:1200px; padding:8px 0; font-size:90%; }
.copyright { border-top:1px solid white; font-size:80%; padding:5px 0; }
footer .pagetop { position:fixed; bottom:5%; right:-8px; width: 40px; height: 40px; background-color: rgba(51,51,51,1); border-radius: 8px; color: #fff; font-size: 100%; text-decoration: none; line-height: 40px; padding-right:10px; } footer .pagetop:hover { background-color: rgba(51,51,51,0.5); z-index:99; }
/* BADGE */
footer a.badge {border:none;	position:fixed;	right:-450px;	bottom:20%;	width:80%;	max-width:600px;	height:150px;	overflow:hidden;	-webkit-transition: 0.3s ease-in-out;	-moz-transition: 0.3s ease-in-out;	-o-transition: 0.3s ease-in-out;	transition: 0.3s ease-in-out;display:block;border-bottom:1px solid white; z-index:99;
} footer a.badge:hover {right:20px;height:300px;border-bottom:none;}
@media screen and (max-width:780px) {
.pc{
	display:none !important;
}
.sp{
	display:block !important;
}

footer a.badge {
	bottom:0;
	right:-60%;
	z-index:9999;
}
footer a.badge:hover {
right:20px;
width:90%;
border-bottom:none;
}
footer .pagetop {
	width: 10%;
	bottom:0;
	left:0;
	border-radius: 8px 8px 0 0;
	text-align: center;
}
footer a.badge img {
	width: 100%;
}
}

/* fullpage : フルページ */ #fullpage .section {  } .non_section { width:100%; height:100%; position:relative; } .non_section img.title, #wrapper img.title { width:70%; max-width:400px; margin-top:4%; } .non_section p { width:90%; padding:4% 0; white-space:pre; font-size:100%; font-size:1.4vw; } .non_section .wrapper { width:100%; max-width:1000px; margin-bottom:100px; }
/* LIST : リスト */ .list .tab { width:20%; width:10em; height:100%; height:10em; float:left; -moz-border-radius: 50em; -webkit-border-radius: 50em; -o-border-radius: 50em; -ms-border-radius: 50em; background-color:#001966; position:relative; } .list .tab:before { content:""; position:absolute; right:-12%; top:45%; border:10px solid transparent; border-left:10px solid #001966; } .list .tab p { color:white; padding:20% 0; text-align:center; } .list .tab img { position:relative; width:40%; max-width:45px; } .list ul { width:80%; height:100%; list-style:none; float:left; margin-bottom:10px; } .list ul li { width:95%; background-color:white; border-bottom:1px dashed #ccc; cursor:pointer; } .list ul li:before, .list ul div.ko:before { content:''; } .list ul li:before, .list ul div.ko:before { padding-left:1em; } .list ul li, .list ul div.ko { padding:8px 0; text-align:left; padding-left:1em; text-indent:-1em; } .list ul div.ko { width:95%; display:none; background-color:#eee; }
/* Colorbox */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} #cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);} #colorbox{outline:0;} #cboxContent{background:#000; overflow:visible;} .cboxIframe{background:#000;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; position:absolute; bottom:-29px; background:url(../images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious:hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext:hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose:hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;} #cboxTopLeft{width:14px; height:14px; background:url(../images/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(../images/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(../images/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(../images/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(../images/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(../images/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(../images/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(../images/controls.png) repeat-y -211px 0;}
@media screen and (max-width:999px) { .list .tab { float:left; width:10%; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; } .list ul { width:90%; } }
@media screen and (max-width:640px) { /* common */ html { font-size:85.5%; } .smt { display:inline; } .pc { display:none; } .non_section p { font-size:3vw; white-space:normal; text-align:left; }
/* header */ #header { height:10%; } #header .head { display:none; } #header .mammaciao { height:30px; float:right; margin:1% 0; } #header .ecolaundry { width:30%; height:auto; } .menu-trigger { margin:0 1%; } .menu-trigger::after, .menu-trigger.active::after { font-size:2vw; bottom: -15px; } ul.g_menu li { float:left; width:80%; text-align:left; margin:0 0 3% 10%; } ul.g_menu li a { font-size:14px; } ul.g_menu li a img { width:30px; height: auto; max-width:40px; float:left; } .menu { height:100%; }
/* footer */ footer a.badge {border:none;z-index:99;position:fixed;	right:-45%;bottom:10%;	width:60%;}footer a.badge:hover img {width:90%;height:auto;} footer a.badge img {width:100%;height:auto;}
/* list */ .list .tab { width:100%; height:2.5em; float:none; } .list .tab p { padding:6px 0 6px 10%; text-align:left; } .list .tab img { width:auto; height:90%; position:absolute; top:0; left:1%; float:left; } .list .tab:before { display:none; } .list ul { width:100%; } .list ul div br { display:none; } .list ul div br.smt { display:inline; }}
/* shop serch */
.anytimes_ {margin:1em auto;background-color:#BFDFFF;padding:.5em;color:#333;border-radius:5px;}
.anytimes_ b, .anytimes_ a, .anytimes_ img {font-size:120%;display:block;}
.anytimes_ b {text-align:center;font-size:140%;padding:1em 0;border-bottom:3px double #fff;}
.anytimes_ img {width:20%;max-width:200px;margin:2em 0 1em 1em;float:left;}
.anytimes_ a {margin-top:2em;background-color:white;color:#FF0051;font-weight:bold;border-radius:5px;padding:8px;text-align:center;text-decoration:none;}
.anytimes_ a:hover {background-color:#FF0051;color:white;}
.anytimes_ span {width:70%;margin-top:1em;margin-right:1em;float:right;text-align:left;font-size:120%;}


/*================================================
positionfixedによる調整
================================================*/

@media screen and (max-width:900px) {
    .eco_sec1 {
        margin-top: 7rem;
    }
}

/*
@media screen and (max-width:900px) {
    #wrapper, .non_section {
        margin-top: 115px;
    }
}
*/
/*
@media screen and (max-width:999px) {
	#fullpage {
		margin-top: 4vw;
	}
}

@media screen and (max-width:950px) {
	#fullpage {
		margin-top: 2vw;
	}
}

@media screen and (max-width:780px) {
	#fullpage {
		margin-top: 5vw;
	}
}

@media screen and (max-width:770px) {
	#fullpage {
		margin-top: 9vw;
	}
}

@media screen and (max-width:770px) {
	#fullpage {
		margin-top: 9vw;
	}
}

@media screen and (max-width:395px) {
	#fullpage {
		margin-top: 23vw;
	}
}
*/