:root { --point_clr: #95591c; --main_clr: #693; }/* var(--point_clr) */ /* html5doctor.com Reset Stylesheet v1.6.1 */ html, body, div, span, object, iframe,h1, 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,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; padding:0; border:0; outline:0; background:transparent;font-size: 100%;}body { line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}nav ul { list-style:none;}blockquote, q { quotes:none;}blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;}a { margin:0; padding:0; vertical-align:baseline; background:transparent;}/* change colours to suit your needs */ins { background-color:#ff9; color:#000; text-decoration:none;}/* change colours to suit your needs */mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}del { text-decoration: line-through;}abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}table { border-collapse:collapse; border-spacing:0;}/* change border colour to suit your needs */hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}input, select {/* vertical-align:middle;*/} html{scroll-padding-top:90px}/* ページ内リンク時のヘッダ分のズレ補正*/ *{box-sizing: border-box;font-weight: normal;} body{text-align: center; background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, #e2e9e1) ;min-height: 100vh;font-family: "Zen Kaku Gothic New", sans-serif; } div,p,h1,h2,h3,h4,h5,dl,ul,ol{margin-bottom:1em;} h1,h2,h3,h4,h5{font-size:1rem} img{max-width:100%;height: inherit;} strong{font-weight:bold} a{text-decoration: none;color: #8A381F;} a:hover{opacity: .8;} td,th{border: 1px solid #ccc;} .box{margin-bottom:50px} .cont ul,.cont ol{margin-left: 1em;} .telnum_img{vertical-align: bottom;} .hd{ position: sticky;top: 0;margin-bottom: 0;z-index: 1; background-color: #fff;} .container{margin: 0 2%;background-color: #fff;text-align: left;border-width: 1px;border-style: none solid solid ;border-color:#aaa;} .hd .sitename{padding:10px;} .hd div{margin-bottom:0} .cont { text-align: left;line-height: 1.5;display: flex;} .ft{ background-color: #fff;padding: 30px; border-top: 1px solid #aaa;font-size: .9rem;text-align:right;} .cont.page404{text-align: center; margin-top: 20px;} .cont.page404 .page404coffee img{width: 50%;opacity: .3;} /* ======================================= ナビゲーション ======================================= */ #menu-btn-check {display: none;} #navigation {background-color: #693;} #navigation ul{display: flex;list-style: none;margin-bottom: 0;} #navigation ul li {flex:1 0 auto; font-size: clamp(11px, 1.5vw, 16px);border-right: 1px solid #fff;display: flex; align-items: center; justify-content: center;text-align: center;} #navigation ul li:last-child{ border-right:none; } #navigation ul li.current {background-color:#933;} #navigation ul a{color:#fff;padding: 10px 2px; display: block;} /* スマホ */ @media screen and (max-width: 428px) { #navigation {width: 50%;height: 100%;position: fixed;top: 0;left: 100%; /*leftの値を変更してメニューを画面外へ */z-index: 80;overflow: auto; transition: all 0.5s; /*アニメーション設定*/} #navigation ul a {color: #ffffff;margin-right:unset;} #navigation ul {display: block;margin: 60px auto auto;} #navigation ul li {padding: 5px;border-bottom: solid 1px #ffffff;display: block;font-size: 1rem;border-right: none;} /*MENUが☓に変化*/ .menu-btn {position: fixed;top: 0px;right:5px;height: 50px;width: 50px;z-index: 90;} .menu-btn span,.menu-btn span:before,.menu-btn span:after {content: '';display: block;height: 5px;width: 50px;border-radius: 3px;background-color: var(--main_clr);position: absolute;top: 22px;} .menu-btn span:before {bottom: 16px;top: unset;} .menu-btn span:after {top: 16px;} /* ---　ボタンをクリックした時の動作 --- */ #menu-btn-check:checked ~ #navigation {left: 50%; /*メニューを画面内へ*/} #menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/} #menu-btn-check:checked ~ .menu-btn span::before {bottom: 0;transform: rotate(45deg);background-color: #fff;} #menu-btn-check:checked ~ .menu-btn span::after {top: 0; transform: rotate(-45deg);background-color: #fff;} } /* --top-- */ .top.cont{padding-top:0px} .top .cont_main {margin: 0 2% 30px} .top .cont_main h1{margin-bottom:inherit} .top .cont_side{margin-right: 2%;} .top_shop_info { border: 1px solid #ddd; padding: 1em; font-size: .9rem;} .top_shop_info .shopname { font-weight: bold;} .top_bnr { text-align: center;} .top_bnr a { display: block;} .cont_side img{width: 100%;} /* ---カレンダー--- */ .biz_calendar{--closed_clr: #e8d2b5;;} .biz_calendar_inner { display: flex;font-size:.9rem;justify-content: space-between; align-items: flex-start;} .biz_calendar table{flex-grow: 1;margin-right: 10px;font-size: .8rem;} .biz_calendar thead { background-color: #efefef;} .biz_calendar td,.biz_calendar th{text-align:center;font-weight: normal;} .biz_calendar td.closed{background-color:var(--closed_clr);} .biz_calendar td.sat{color:#44f;;} .biz_calendar td.sun,.biz_calendar td.holiday{color:#f00;} .crrnt_month { font-weight: bold;} .biz_calendar p{text-align:right;font-size: .9rem;} .biz_calendar span.closed{ color: var(--closed_clr);} /* --pages-- */ .cont{} .cont_side{width: 200px;} .cont_main {flex: 1;margin: 30px 2% 30px;} .cont_main h1{border-left: 5px solid #CCCCCC;padding-left: 10px;font-family: "Zen Old Mincho", serif;font-size: 1.2rem;margin-bottom: 3em;font-weight: bold;color: #333;} .cont_main h1 span{font-size:1rem;font-family: initial;} .cont_main h2{font-size: 1.15rem; color: var(--point_clr); border-bottom: 1px dotted var(--point_clr); background-image: url(/files/imgs/cup_illust.gif); padding-left:34px;line-height:30px; background-repeat: no-repeat;background-position: left center;font-weight: bold;} .cont_main h3 { font-size: 1.15rem;padding: 2px 8px; color: #FFFFFF; background-color: #993333;border-radius: 5px;} .cont_main h4{font-weight:bold;font-size: 1.1rem;} .cont_main h5 { font-weight: bold;} .bordered{border-bottom:3px dotted #e3ceb9} .signature{text-align: right;} img.pagettl{width:100%;margin-bottom:20px} .notice { color: #f00; font-weight: bold;} .cont_side{background-position: left top;background-repeat: no-repeat; background-size: 100% auto;} .about .cont_side{background-image: url("/about/side.jpg");} .coffee .cont_side{background-image: url("/coffee/side.jpg");} .shop_coffee2 .cont_side{background-image: url("/shop/coffee2_side.jpg");} .contact .cont_side{background-image: url("/contact/toiawase_side.jpg");} .link .cont_side{background-image: url("/link/green_back.jpg");} dt{font-weight: bold;} dt::before{content:'●';color:var(--point_clr);margin-right: .2em;} dd{margin-bottom:.5em;margin-left:1.2em;} .cont_main a::after{content:"▶︎";margin-left:.2em} /* --about-- */ .about .history th{min-width: 4em;vertical-align: top;} .about .history td, .about .history th { padding-bottom: .5em; border-style: none;} /* --coffee-- */ .umami dl > div{padding:15px} .umami dl > div:nth-child(1){background-color:#DFE9F8;} .umami dl > div:nth-child(2){background-color:#F9E7DF;} .umami dl > div:nth-child(3){background-color:#DECFC7;} .umami dt{display:block;font-weight:bold} /* --contact-- */ .contact iframe{width: 100%; height: 30vh;} /* --shop-- */ .shop .cont_side ul{list-style-type: square;} .shop .cont_side{padding: 30px 0 0 1%;font-size: .9rem;} .shop .cont_side ol, .shop .cont_side ul { margin-bottom: 2em;} .shop .cont_side li { margin-bottom: .5em;} .steps li::after{content:"↓";display:block;} .steps li:last-child::after{content:"";} .clickpost_fee caption{text-align:left} .clickpost_fee{width:100%} .clickpost_fee td,.clickpost_fee th{text-align:center;border-color:var(--point_clr)} .clickpost_fee td{background-color:#f3e9b8} .products_box{border: 2px dotted #999999;padding: 1em;overflow: hidden;} .products_box img{float:right;max-width: 25%;} .products_box h2{background: unset;border: unset;padding-left: 0;margin-bottom: .1em;line-height: unset;} .products_box h2 span{color:#000} .products_box h2.organic{color:#090} .drip>div{display:flex;align-items: flex-start;} .drip div{margin-bottom: 0;} .drip img { margin-right: 20px; margin-bottom: 1em;} .hikikata label{display:block} .shop.form table{width:100%;margin-bottom: 30px;} .shop.form table span{display:block;font-size:.8rem;color:#999} .shop.form td,.shop form th{border-style:none ;padding:6px 0 6px 3px;} .shop.form td{vertical-align: middle;} .shop.form .user_info tr{border-bottom:1px solid #666} .shop.form caption{text-align:left;font-weight:bold} .shop form th{white-space: nowrap;} .shop form thead{background-color: #666;color: #fff;} .shop form .products tbody tr:nth-child(odd){background-color: #FFF3E1;} .shop form .products tbody tr:nth-child(even){background-color: #f0f0f0;} .shop form textarea{margin-bottom:1em} .shop form .submit{text-align:center;} .shop.form input[type='submit'],.shop.form input[type='button']{border-radius:5px;padding: 5px 1em; background-color: #444; color: #fff; font-weight: bold;} .shop.form .error_messe{color: #f00; margin-bottom: .1em;} .shop.form input[type="number"]{width: 5em;} .shop.form .noshi label{display: inline-block;} .shop.form form th:has(+ td input:required)::before {color: #fff; content: "必須"; font-size: .7em; background-color: #d00; padding: 0 4px; border-radius: 6px; margin-right: 5px;} .shop .gift_box dt::before{content:unset;} .shop .gift_box dt{color:var(--point_clr);} .shop.form .giftto { background-color: #eee;} .products_gift tr td:last-child{white-space: nowrap;} .shop.form .products td,.shop.form .products th{padding: 6px;} .specified_commercial_transactions td,.specified_commercial_transactions th{padding:5px} /* form reset */ input:not([type="checkbox"]):not([type="radio"]):not([type="date"]),button,select,textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #aaa; border-radius: 0; outline: none;} input:not([type="number"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),textarea{width: 100%;} textarea { resize: vertical;} input[type='submit'],input[type='button'],label,button,select { cursor: pointer;} select::-ms-expand { display: none;} input,textarea{font-size: 16px;} @media screen and (max-width: 640px) { .pc{display:none} .container{margin: 0;border-style: none;} .cont{display: block;} .cont_main{margin-top:10px} .top .cont_side{width: unset;margin-left: 2%;} .cont:not(.top):not(.shop) .cont_side{display:none} .top_bnr {display: flex;} .top_bnr a{width: 50%;} .top_shop_info{display: flex; justify-content: space-between;} .top_shop_info img{width: 30%;} .shop .cont_side{width: unset; padding-top:5px;padding-left: 0;} .shop .shop_side_tel{display:none;} .shop .cont_side ol, .shop .cont_side ul{display: flex; flex-wrap: wrap;margin-bottom: 0;list-style-position: inside;margin-left: unset;} .shop .cont_side li{display: block;flex: 1 0 auto;margin: 1px;} .shop .cont_side li a{ letter-spacing: -1px;border: 1px solid #aaa;padding: 3px;display: block;font-family: initial;text-align: center;} } @media screen and (max-width: 428px) { html { font-size: 13px;} a{letter-spacing: -.5px;} .cont_main a::after {margin-left:unset;} .hd{border-bottom: 1px solid var(--main_clr);} .top_shop_info{display: block;text-align: center;} .top_shop_info img{width: 50%;} .cont_main h1{margin-bottom: 1em;} img.pagettl{margin-bottom: 10px;} .shop.form td, .shop form th {display: block;padding: 1px 0;} .shop.form table span{display: unset;} .shop.form .user_info tr{border-bottom: none;} .shop.form .products tr td:nth-child(-n+2),.shop.form .products tr th:nth-child(-n+2){display:inline-block;padding-bottom: 0;} .shop.form .products tr th br{display:none} }