@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('http://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%; border-top:50px solid #001966; } #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('http://www.ciao-net.jp/fonts/GenShinGothic-Normal.ttf'); } @font-face { font-family: 'medium'; src: url('http://www.ciao-net.jp/fonts/GenShinGothic-Medium.ttf'); } @font-face { font-family: 'bold'; src: url('http://www.ciao-net.jp/fonts/GenShinGothic-Bold.ttf'); } @font-face { font-family: 'APJ'; src: url('http://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; }
/* menu trigger */ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; top: 11px; left: 3px; width: 30px; height: 21px; margin:0 10px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff; } .menu-trigger::after { position: absolute; left: -1px; bottom: -20px; content: 'MENU'; display: block; width: 100%; color: #fff; font-size: 11px; text-decoration: none; text-align: center; transition: all .4s; } .menu-trigger.active::after { content: 'CLOSE'; bottom: -20px; left: -3px; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 9px; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-315deg); transform: translateY(9px) rotate(-315deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(315deg); transform: translateY(-9px) rotate(315deg); }
/* 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:16.5%; 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; }
/* FOOTER : フッター */ .foot { width:100%; background-color:#D90000; position:relative; bottom:0; } .section .foot { width:100%; background-color:#D90000; bottom:0; } .foot, .foot a { color:white; text-decoration:none; } .foot a:hover { padding-bottom:5px; border-bottom:4px solid white; } .foot .link { max-width:1200px; padding:8px 0; font-size:90%; } 
.copyright { border-top:1px solid white; font-size:80%; padding:5px 0; } 
.foot .pagetop { position:fixed; bottom:20%; right:-1px; width: 40px; height: 40px; background-color: rgba(51,51,51,1); border-radius: 8px 0 0 8px; color: #fff; font-size: 100%; text-decoration: none; line-height: 40px; padding-right:10px; } .foot .pagetop:hover { background-color: rgba(51,51,51,0.5); z-index:99; }
/* fullpage : フルページ */ #fullpage .section {  } .non_section { width:100%; height:100%; border-top:50px solid #001966; 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:3vw; } ul.g_menu li a img { width:13%; max-width:40px; float:left; } .menu { height:100%; }
/* 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%;}