/*-------------------------- 釧路フィッシャーマンズワーフMOO moo946.com 2021-06-16 update 2012-06-05 origin ----------------------------*/ @charset "UTF-8"; /*------------------------ A Modern CSS Reset ------------------------*/ /* Box sizingの定義 */ *, *::before, *::after { box-sizing: border-box; } /* デフォルトのpaddingを削除 */ ul[class], ol[class] { padding: 0; } /* デフォルトのmarginを削除 */ body, h1, h2, h3, h4, h5, h6, ul[class], ol[class], li, figure, figcaption, blockquote, dl { margin: 0; } /* bodyのデフォルトを定義 */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.6; } /* class属性を持つul、ol要素のリストスタイルを削除 */ ul[class], ol[class] { list-style: none; } /* classを持たない要素はデフォルトのスタイルを取得 */ a:not([class]) { text-decoration-skip-ink: auto; } /* img要素の扱いを簡単にする img { display: block; max-width: 100%; margin: auto; } */ img { max-width: 100%; margin: auto; } /* iframe iframe { max-width: 100%; } */ iframe { display: block; } /* Natural flow and rhythm in articles by default */ /* article要素内の要素に自然な流れとリズムを定義 article > * + * { margin-top: 1em; } */ /* inputやbuttonなどのフォントは継承を定義 */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ /* 見たくない人用に、すべてのアニメーションとトランジションを削除 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /*---------------------- Inview ----------------------*/ /* .effect { overflow: hidden; } */ .ef-fade, .ef-fade01, .ef-zoom, .ef-rotate { transition: .6s; } .ef-fade:nth-child(even) { transition: .9s; } .ef-fade:nth-child(3) { transition: 1.2s; } .ef-fade { opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); } .fade { opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); } .ef-fade01 { opacity: 0; } .fade01 { opacity: 1; } .ef-zoom { transform: scale(0, 0); -webkit-transform: scale(0, 0); } .zoom { transform: scale(1, 1); -webkit-transform: scale(1, 1); } .ef-rotate { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .rotate { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); } /*---------------------- Customize --------------------- */ html { scroll-behavior: smooth; } body { color: #334; font-size: .9em; font-family: sans-serif; -webkit-text-size-adjust: 100%; /* mobile safariの自動文字サイズ調整をoffにする */ -webkit-tap-highlight-color: transparent; /* モバイルでタッチ時のハイライトカラーを消す */ -webkit-font-smoothing: antialiased; /* 文字のアンチエイリアスをきれいに表示 */ -moz-osx-font-smoothing: grayscale; } body { background: #0e1e4a url(bg-sky.png) repeat-x center top / 150px; } /* bg01.jpg 1200x900 */ .bg01 { background-color: #0e1e4a; } section:not([class]) { background-color: rgba(255,255,255,1); } section:not([class]):nth-child(odd) { background-color: rgba(255,248,230,1); } h1 {} h2 { color: #933; } h3 { color: #333; padding: 12px 0; text-align: center; border-bottom: 5px solid #696; } h4 { color: #333; } h5 { color: #333; font-size: 1.2em; } h3 span { display: inline-block; } a { color:#36c; text-decoration:none; } a:link { color:#36c; } a:visited { color:#468; } a:active { color:#93c; } a:hover { color:#93c; text-decoration: underline; } /*---------------------- 共通要素 --------------------- */ .inner { max-width: 1120px; margin: auto; padding: 3em 1em; } .inner > * + h3 { margin-top: 4rem; } .inner > h3 + * { margin-top: 2rem; } .inner > * + h4 { margin-top: 3rem; } .inner > h4 + * { margin-top: 1rem; } .inner > * + h5 { margin-top: 2rem; } .inner > h5 + * { margin-top: 1rem; } /* OLD CSS */ /* h1, h2, h3, h4, h5 { clear:left; margin:10px; color:#222; line-height:1.5; text-align:left; } h2 { color:#933; font-size:21pt; } */ /* moo946.com - Kushiro Fisherman's Wharf MOO */ .grid { margin: 0; padding: 0; display: grid; grid-gap: 1.5rem; align-items: stretch; } .grid+.grid { margin-top: 1.5rem; } .grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grid.x2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .grid.x4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid h4 { margin-bottom: 8px; padding-bottom: 4px; font-size: 1.1em; text-align: center; border-bottom: 3px solid #61AFA0; } .grid > * { list-style-type: none; position: relative; padding: 1rem; background-color: rgba(255,255,255,1); border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); } .grid > *.plain { background: none; box-shadow: none; } .grid .none { padding: 0; background: none; box-shadow: none; } /* for Index */ /* .grid.index { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } */ .grid.index h4 { margin-bottom: 0; padding-bottom: 0; font-size: 1.4em; text-align: left; border: none; } .grid.index > * { background: none; box-shadow: none; } .grid.fade > * { max-height: 380px; overflow: hidden; } .grid.fade > *:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; background: linear-gradient(0deg,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); pointer-events: none; z-index: 1; } .nodeco { background: none !important; box-shadow: none !important; } .mbo { display: initial; } .pco { display: none; } .ph { position:relative; margin:9px; color:#999; background-color:#fff; border:1px solid #ddd; } .ph a, .ph a:hover { text-decoration:none; } .ph img { margin:5px; border:none; } .ph .cap { position:absolute; width:200px; bottom:0px; right:0px; margin:5px; padding:5px; color:#fff; background-color:#222; opacity: 0.7; filter: alpha(opacity=70); zoom:1; } .indent { padding:10px; } .indent2 { padding:20px; } .clr, .clear { clear:both; } .dummy { height:30em; } .sep { clear: both; margin:40px 0px 0px; padding:40px 0px 0px; color:#333; font-size:13pt; background:transparent url(./bg_hr.png) no-repeat 50% 0%; } .aqua { margin:10px 0; padding:5px 10px; color:#fff; border:none; background-color:#0099CC; } .sky { margin:10px 0; padding:5px 10px; color:#fff; border:none; background-color:#0F72C6; } .oge { margin:10px; padding:5px 10px; color:#fff; border:none; background-color:#f92; } .ylw { padding:10px 13px; color:#333; background-color:#f4eabf; } .bgb { margin:1em 0; padding:3px 9px; color:#fff; background-color:#1e90ff; border:0; border-radius: 10px; } .bg_dark { background:transparent url(./bg_k30.png); color:#fff; } .bg_dark2 { background:transparent url(./bg_k50.png); color:#fff; } .bg_light { background:transparent url(./bg_w50.png); } .bg_light2 { background:transparent url(./bg_w75.png); } .bg_half { background:transparent url(./bg_g50.png); } .gbox { padding: 1em; background-color: #f8f8f8; } .grbox { padding: 1em; background-color: #f0f8e9; } .gr2box { padding: 1em; background-color: #d7e3d1; } .ybox { padding: 1em; background-color: #f4eabf; } .gbox h3, .grbox h3, .ybox h3 { font-size: 1.3em; border-width: 3px; } .gbox p, .grbox p, .ybox p { margin:10px; } .gbox ul, .grbox ul, .ybox ul { margin:10px; padding:0 10px; } .gbox li, .grbox li, .ybox li { margin:5px; } .gbox .num, .grbox .num, .ybox .num { float:left; margin:10px 10px 0; padding:0 12px; font-size:50px; font-family:Arial; line-height:1.0; } .gbox .num { color:#f8f8f8; background-color:#bbb; } .grbox .num { color:#f0f8e9; background-color:#9b9; } .gr2box .num{ color:#d7e3d1; background-color:#8a8; } .ybox .num { color:#f4eabf; background-color:#da7; } .splt { margin-top: 1rem; border-top: 1px dotted #ddd; } .cbox { height:100px; margin-bottom:20px; padding:9px; border:1px solid #ccc; } .cbox span { font-size:0.8em; } .faq ul { margin: 0; padding: 0; list-style-image: url(q.png); } .faq li { margin: 1em 2em; } .faq .answer { margin-top: 1em; padding: 1em; color: #743; background-color: #f4eabf; border-radius: .5em; } .faq .answer { display: none; opacity: 0; } .faq .visible { display: block; opacity: 1; animation: fadeIn 0.5s; } /* .faq .visible { display: block; opacity: 1; animation-name: fadeIn; animation-duration: 0.5s; } .faq .visible { display: block; opacity: 1; animation: fadeIn 0.2s ease 0.3s 1 normal; } */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .b { font-weight: bold; } .bb { color: #000; font-size:1.2em; font-weight: bold; } .xs { font-size: 0.6em; } .s { font-size: 0.8em; } .m { font-size: 0.9em; } .lg { font-size: 1.2em; } .xl { font-size: 1.5em; } .l { text-align:left; } .r { text-align:right; } .c { text-align:center; } .vt { vertical-align: top; } .fl { float: left; } .fr { float: right; } .bltitle { color:#039; font-size:2.4em; font-weight:bold; } .bmtitle { color:#039; font-size:1.2em; font-weight:bold; } .bstitle { color:#039; font-size:1.0em; font-weight:bold; } .topimage { clear:both; text-align:center; } .top_msg { margin:0; padding:10px 20px; background:#ffe url(./bg_main.gif) no-repeat center bottom; } .top_msg h2 { padding:0; color:#600; background-color:transparent; } .information{ clear:both; height:200px; margin:20px 0; border:1px solid #ccc; background-color:#f8f8f8; } .banner { clear:both; height:140px; margin:0; text-align:center; border:1px solid #ccc; background-color:#f8f8f8; } .link { padding: 4px 0px 4px 30px; background: url(./btn_arrow_r.gif) no-repeat 0% 50%; } .caution { color:#c00; font-size:12px; } .red { color:#c00; } .cred { color:#e00; } .price { margin:0 10px; color:#c33; font-weight:bold; text-align:right; } /*---------------------- レスポンシブ対応（横スクロール）
〜
----------------------*/ .scroll-table { overflow: auto; white-space: nowrap; } /*--------*/ table.solid { border-collapse: collapse; } table.solid th, table.solid td { padding: .5em .8em; border: 1px solid rgba(0, 0, 0, .3); } table.solid td { background-color: rgba(255, 255, 255, .5); overflow-wrap: break-word; } table.solid th { color:#333; background-color: #eee; } table.solid .ng { color:#666; text-decoration:line-through; background-color:#f8f8f8; } table.solid .ec { white-space:nowrap; text-align:center; background-color:#f0f0f0; } table.solid .dc { white-space:nowrap; text-align:center; background-color:#ddd; } table.solid .e { white-space:nowrap; background-color:#cde; color:#000; } table.solid .d { white-space:nowrap; background-color:#eee; } table.noline { border-collapse:collapse; } table.noline th { padding: .5em .8em; border: none; } table.noline td { padding: .5em .8em; border: none; } table.noline .e { white-space:nowrap; background-color:#cde; color:#000; } table.noline .d { white-space:nowrap; background-color:#eee; } /*-- Photo Box --*/ .phbox { position: relative; padding: 1rem; background-color: rgba(255,255,255,1); border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); } .phbox.fr { margin: 1rem; } .phbox.fl { margin: 1rem; } .phbox_r, .phbox_nr, .phbox_l, .phbox_nl, .phbox_c, .phbox_nc { padding:4px; text-align:center; color:#666; font-size:0.8em; line-height:1.6; } .phbox_r, .phbox_nr { float:right; margin:6px; } .phbox_l, .phbox_nl { float:left; margin:6px; } .phbox_c, .phbox_nc { margin:20px 0; } .phbox_r, .phbox_l, .phbox_c { background-color:#fff; border:2px solid #ddd; } .phbox_r img, .phbox_l img, .phbox_c img { border:0px solid #ccc; } .phbox_nr img, .phbox_nl img, .phbox_nc img { border:0px solid #ccc; } .arrow { padding-left:20px; background:transparent url(./arrow.gif) no-repeat 0% 50%; } .pdf { padding-left:20px; padding-bottom:3px; background:transparent url(./pdf.gif) no-repeat left 0; } .pdfb { padding-right:20px; padding-bottom:3px; background:transparent url(./pdf.gif) no-repeat right 0; } .gmap { padding-left:24px; padding-bottom:3px; background:url(./gmap20.gif) no-repeat 0% 0%; } .date { color:#090; } .url { color:#090; } .arrow_t { padding:15px; background:transparent url(./arrow_t.png) no-repeat 50% 0%; } .arrow_b { padding:15px; background:transparent url(./arrow_b.png) no-repeat 50% 100%; } .arrow_l { padding:15px; background:transparent url(./arrow_l.png) no-repeat 0% 50%; } .arrow_r { padding:15px; background:transparent url(./arrow_r.png) no-repeat 100% 50%; } .grad { background-image:-moz-linear-gradient(top, #FAD502, #E89502); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502)); } .radius { border-radius: 10px; } .radius20 { border-radius: 20px; } /*---------------------- SNS Icon ----------------------*/ .sns { display: flex; justify-content: center; grid-gap: 1rem; } .sns a { display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; font-size: 36px; color: #fff; background-color: rgba(0,0,0,.2); border-radius: 50px; transition: .2s; } .sns a:hover { transform: scale(1.2); text-decoration: none; } .sns i { display: none; } .sns .instagram { background-image: url(gradient-768x768.jpg); background-size: cover; } .sns .facebook { background-color: #1977f1; } .sns .youtube { background-color: #f00; } .sns .twitter { background-color: #1DA1F2; } .sns .envelope { background-color: #6c9; } .sns .website { background-color: #f90; } .sns .website2 { background-color: #f60; } .sns .instagram:before { content: '\f16d'; font-family: fontAwesome; } .sns .facebook:before { content: '\f09a'; font-family: fontAwesome; } .sns .youtube:before { content: '\f16a'; font-family: fontAwesome; } .sns .twitter:before { content: '\f099'; font-family: fontAwesome; } /* CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法 http://www.css-lecture.com/ a[href$=".pdf"] { padding: 4px 20px 4px 0; background: url(icon/pdf.gif) no-repeat 100% 50%; } a[href$=".docx"], a[href$=".doc"] { padding: 4px 20px 4px 0; background: url(icon/doc.gif) no-repeat 100% 50%; } a[href$=".xlsx"], a[href$=".xls"] { padding: 4px 20px 4px 0; background: url(icon/xls.gif) no-repeat 100% 50%; } a[href$=".zip"] { padding: 4px 20px 4px 0; background: url(icon/zip.gif) no-repeat 100% 50%; } a[href ^="mailto:"] { padding: 4px 20px 4px 0; background: url(icon/mailto.gif) no-repeat 100% 50%; } a[href^="http"] { padding: 4px 20px 4px 0; background: url(icon/external.gif) no-repeat 100% 50%; } */ /* use this class to make sure that images won't get iconized .imageLink { padding-right: 0px !important; background: none !important; } */ /* アイコン付加 */ a[href$=".pdf"]:after { content: '\f1c1'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } a[href$=".docx"]:after, a[href$=".doc"]:after { content: '\f1c2'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } a[href$=".xlsx"]:after, a[href$=".xls"]:after { content: '\f1c3'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } a[href$=".zip"]:after { content: '\f1c6'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } a[href^="http"]:after { content: '\f08e'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } a[href^="mailto:"]:after{ content: '\f0e0'; font-family: fontAwesome; margin-left: .5em; opacity: .7; } /* No Icon */ .imageLink, .no_icon:after { content: '' !important; margin-left: 0 !important; } /*---------------------- Pankz ----------------------*/ /* .pankz { max-width: 1000px; margin: auto; padding: 2em; color: #ccc; font-size: .8em; } .pankz a { color: #fff; } */ #pankz, .pankz { position: relative; background-color: #f0f0f8; box-shadow: 0px 3px 3px rgba(0, 0, 0, .1); } #pankz > *, .pankz > * { max-width: 1000px; margin: auto; padding: 1em; color: #778; } /*---------------------- Section Title ----------------------*/ /* .title { background-color: rgba(0, 32, 96, .8); } .title { background-color: #cb9; } .title { border-top: 1px solid rgba(255, 255, 255, .6); border-bottom: 8px solid #cdd3e1; } */ .title { border-bottom: 8px solid #cdd3e1; } .title h1 { /* bg-title.png 1100 x 220 (5:1) */ margin: auto; padding-bottom: 100px; color: #fff; text-align: center; font-size: 1.8em; text-shadow: 0px 3px 8px rgba(0, 0, 0, .4); background: url(bg-title.png) no-repeat 50% 100% / 400px; } .headline { margin:0; padding:10px; } .headline h3, .headline h4 { margin:0; } .headline ul { margin:0; padding:0; } .headline li { list-style-type:none; } .headline li { margin:0; text-align:left; height: 4em; line-height: 4; overflow:hidden; } .headline li:nth-child(odd) { background-color: rgba(128, 128, 128, .1); } .headline .date { display: inline-block; width: 8em; text-align: center; color: #393; } .headline .ctg { float: right; padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; text-align:right; } .headline .ttl { padding-right: 1em; color: #036; font-weight: bold; } .headline .cmt { display: inline; font-size: .9em; opacity: .7; } /*---------------------- Information CGI ----------------------*/ .info hr { height: 2px; background-color: #eee; border: none; } .info .oview { padding: 1rem; } .info .lead { display: block; font-weight: bold; } .info .text { display: block; max-height: 4.5em; overflow: hidden; font-size: .9em; } .info .ctg { display: inline-block; color: #678; margin-left: 1em; } .info .ctg:before { margin-right: .5em; font-family: fontawesome; content: '\f114'; } .info .date { display: inline-block; color: #678; } .info .date:before { margin-right: .5em; font-family: fontawesome; content: '\f073'; } .info .thumb { position: relative; height: 200px; background: #ccc url(base16x9.jpg) no-repeat 50% 50% / cover; } .info .thumb:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; background: linear-gradient(0deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; } .info .more { max-width: 290px; margin: 2rem auto; } .info .more a { display: block; padding: 1.25rem; border-radius: .3em; transition: .3s; } .info .more a { font-size: 1rem; color: #fff !important; background-color: #26c; } .info .more a:hover { background-color: #06f; } /*---------------------- Information CGI List ----------------------*/ .info.list {} .info.list a { display: block; color: inherit; text-decoration: none; } .info.list hr { height: 3px; background-color: #696; border: none; } .info.list ul { margin: 0; padding: 0; } .info.list ul { display: flex; justify-content: space-around; flex-wrap: wrap; grid-gap: 2em; } .info.list li { flex: 1 1 30%; min-width: 300px; background-color: rgba(255,255,255,1); border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); list-style-type: none; transition: .2s; } .info.list li:hover { box-shadow: 0 0 18px rgba(0,0,0,.3); } .info.list h3 { margin: 0; padding: 0; font-size: 1.1em; text-align: left; border: none; } .info.list h3+* { margin-top: .5rem; } /*---------------------- Information CGI Data ----------------------*/ .info.data { max-width: 1000px; margin: auto; padding: 3em 1em; } .info.data .phbox { margin-top: 2em; } /* .info { margin:0; padding:10px; } .info h3, .info h4 { margin:0; } .info ul { margin:0; padding:0; list-style-type:none; } .info li { margin:0; padding:20px 0 20px; padding-left:24px; text-align:left; border-top:1px dotted #789; background:transparent url(./arrow13.png) no-repeat left 24px; } .info .date { color:#090; font-size:13px; font-weight:normal; font-family:Arial; } .info .ctg { float:right; padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; } .info .ttl { margin:0; padding:0; color:#036; font-size:1.0em; font-weight:bold; } .info .cmt { display:inline; font-size:1.0em; } .info .cmt img { margin:1em 0; border-width:0; } */ /*--------*/ .pagelink { margin: 3em auto; padding:24px 6px; font-size:14px; line-height:1.0; text-align:center; } .pagelink .blank, .pagelink .self, .pagelink a.plink { display: inline-block; margin: 0 3px; padding: 3px 6px; text-decoration: none; border: 1px solid #ccc; background-color: #fff; } .pagelink .blank { color:#999; } .pagelink .self { color:#c00; font-weight:bold; padding:4px 6px; } .pagelink a.plink:visited { color:#00f; text-decoration:none; } .pagelink a.plink:hover { color:#fff; background-color:#36c; } /*---------------------- Shop CGI List ----------------------*/ .shop_list {} .shop_list a { display: block; color: inherit; text-decoration: none; } .shop_list ul { margin: 0; padding: 0; } .shop_list ul { display: flex; justify-content: space-around; flex-wrap: wrap; grid-gap: 2em; } .shop_list li { flex: 1 1 30%; min-width: 300px; background-color: rgba(255,255,255,1); border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); list-style-type: none; transition: .2s; } .shop_list li:hover { box-shadow: 0 0 18px rgba(0,0,0,.3); } .shop_list h3 { margin: 0; padding: 0 0 .5rem; font-size: 1.35em; border: none; } .shop_list hr { height: 3px; background-color: #696; border: none; } .shop_list .thumb { position: relative; height: 230px; background: #ccc url(base16x9.jpg) no-repeat 50% 50% / cover; } .shop_list .thumb:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; background: linear-gradient(0deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; } .shop_list .oview { padding: 1rem; } .shop_list .lead { display: block; font-weight: bold; } .shop_list .text { display: block; max-height: 4.8em; overflow: hidden; } .shop_list .place { display: inline-block; } .shop_list .phone { display: inline-block; float: right; } .shop_list .ctg, .shop_list .date { display: inline-block; color: #999; margin-left: 1em; } .shop_list .place:before { margin-right: .5em; font-family: fontawesome; content: '\f276'; } .shop_list .phone:before { margin-right: .5em; font-family: fontawesome; content: '\f095'; } .shop_list .ctg:before { margin-right: .5em; font-family: fontawesome; content: '\f114'; } .shop_list .date:before { margin-right: .5em; font-family: fontawesome; content: '\f073'; } /*---------------------- Shop CGI View ----------------------*/ /*-- 吹き出し dl,dt,dd --*/ .shop_view .staff { margin: 2em auto; padding: 0; text-align: left; } .shop_view .staff dt, .shop_view .staff dd { position: relative; padding: .5em 2em; color: #fff; border-radius: 1em; } .shop_view .staff dt { margin: 1em 3em 1em 5em; background-color: #e79; display: inline-block; } .shop_view .staff dd { margin: 1em 5em 3em 8em; background-color: #69c; display: block; } .shop_view .staff dt:before, .shop_view .staff dd:before { content: ''; position: absolute; top: 20%; width: 4em; height: 4em; background-image: url(men.png); background-size: cover; opacity: .2; } .shop_view .staff dt:before { left: 0%; margin-left: -5em; background-image: url(wmn.png); } .shop_view .staff dd:before { right: 0%; margin-right: -5em; } .shop_view .staff dt:after, .shop_view .staff dd:after { content: ""; position: absolute; top: 30%; border: 10px solid transparent; } .shop_view .staff dt:after { left: 0%; margin-left: -17.5px; border-right: 10px solid #e79; } .shop_view .staff dd:after { right: 0%; margin-right: -17.5px; border-left: 10px solid #69c; } .shop_view .items > * { margin: 0 auto; max-width: 530px; } .shop_view .items h3 { margin: 0; padding: 0 0 .5rem; font-size: 1.35em; border-width: 3px; } .shop_view .ctg, .shop_view .date { display: inline-block; color: #999; } .shop_view .ctg:before { margin-right: .5em; font-family: fontawesome; content: '\f114'; } .shop_view .date:before { margin-right: .5em; font-family: fontawesome; content: '\f073'; } .shop_view .editor { margin-top: 3rem; padding-top: .5rem; text-align: right; border-top: 1px dotted #333; } /*---------------------- Shop Editor ----------------------*/ a.delete { display: inline-block; margin-bottom: .5em; padding: .2em 1em; border-radius: .3em; transition: .3s; } a.delete { color: #fff !important; background-color: #26c; } a.delete:hover { background-color: #06f; text-decoration: none; } /*---------------------- Search Form ----------------------*/ .hsearch { position: relative; display: inline-block; margin: auto; padding: .75rem 1.5rem; padding-right: 3rem; background-color: rgba(255,255,255,1); border-radius: 9999px; box-shadow: 0 0 12px rgba(0,0,0,.1); } .hsearch select { padding: 5px; border-color: rgba(0,0,0,.1); } .hkwd { margin: 0; padding: 5px; line-height: 1.15; overflow: visible; border-width: 0; transition: all .1s ease-in-out; } .hsubmit { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: block; margin: 0; padding: 0; background: rgba(0,0,0,0); border: none; cursor: pointer; line-height: 1.15; text-transform: none; overflow: visible; transition: all .1s ease-in; opacity: .3; -webkit-appearance: button; } .hsubmit:hover { opacity: .6; } /*----------*/ #search { float:left; margin-bottom:15px; padding:5px; border:1px solid #abc; } #search form { margin:0; padding:0; } .searchField { margin:0; padding:0; width:280px; height:30px; font-size:18px; border:none; } .searchButton { margin:0; padding:0; vertical-align:bottom; } /*---------------------- Header ----------------------*/ #header { position: relative; max-width: 1020px; margin: auto; } #header a { transition: .3s; } #header a:hover { text-decoration: none; } #header .logo { padding: 10vw 2em; } #header .logo a { display: block; margin: 0; width: 35.4vw; height: 15vw; max-width: 283px; max-height: 120px; text-indent: -9999px; background: url(parts/logo@2x.png) no-repeat 0% 0% / contain; z-index: 2; } #header .inquiry a { display:block; float:right; width:250px; height:60px; margin:0px; padding:0px; text-indent:-9999px; background:url(inquiry.jpg) no-repeat 0% 0%; } /*---------------------- PC Navigation ----------------------*/ #header .nav-pc { display: none; } #header .nav-pc { position: relative; padding: .5em; z-index: 2; border: 1px solid rgba(255, 255, 255, .6); border-radius: 2em; } #header .nav-pc ul { margin: 0 auto; padding: 0; max-width: 1000px; display: flex; justify-content: space-around; } #header .nav-pc li { list-style-type: none; flex: 1; border-right: 1px solid rgba(255, 255, 255, .7); /* font-size: .8em; background-color: #2d6ac6; border-right: 1px solid #fff; */ } #header .nav-pc li:last-child { border-right: none; } #header .nav-pc a { display: block; padding: .5em; text-align: center; } #header .nav-pc a { color: #fff; } #header .nav-pc a:hover { background-color: #e83; } #header .nav-pc .fa { display: block; margin: .1em; font-size: 2.2em; opacity: .8; } /*---------------------- Drawer 共通 ----------------------*/ /* ドロワーボタン */ .dr_open { position: absolute; top: 12vw; right: 1rem; display: block; width: 15vw; height: 15vw; max-width: 70px; max-height: 70px; text-indent: -9999px; background: url(parts/menu@2x.png) no-repeat 50% 50% / contain; border-radius: 3px; z-index: 2; } .dr_open:hover { background-color: #36b; } /* ドロワーコンテンツ（最前面） */ .dr_content { overflow: auto; position: fixed; width: 100%; height: 100%; background-color: #36b; transition: .3s ease-in-out; z-index: 9999; /* top: 0; left: 0; transform: translateX(-105%); /* 左に隠しておく */ /* top: 0; right: 0; transform: translateX(105%); /* 右に隠しておく */ } /* 閉じる用の薄黒カバー（全体） */ .dr_close { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; transition: .3s ease-in-out; z-index: 99; opacity: 0; } .dr_close { display: none; } /* 初期は非表示 */ .dr_unshown { display: none; } /* チェックボックス等は非表示に */ /*---------------------- NavigationDrawer ----------------------*/ #nav-drawer {} #nav-drawer .dr_open {} #nav-drawer .dr_content { width: 80%; max-width: 480px; top: 0; right: 0; transform: translateX(105%); /* 右に隠しておく */ } #nav-drawer .dr_content label { display: block; padding: 1em; color: #fff; cursor :pointer; } /* 下階層 */ #nav-drawer .dr_content ul { margin: 0; padding: 0; display: block; } #nav-drawer .dr_content ul { background-color: rgba(0, 0, 0, .1); border-bottom: thin solid rgba(255,255,255,.3); } #nav-drawer .dr_content li { padding-left: 2em; line-height: 1.0; list-style-type: none; } #nav-drawer .dr_content li { height: 0; overflow: hidden; transition: .4s; } #acc_info:checked ~ #sub_info li, #acc_eat:checked ~ #sub_eat li, #acc_buy:checked ~ #sub_buy li, #acc_pub:checked ~ #sub_pub li, #acc_about:checked ~ #sub_about li, #acc_access:checked ~ #sub_access li, #acc_area:checked ~ #sub_area li { height: 3em; opacity: 1; } #nav-drawer .dr_content .accordion { display: none; } #nav-drawer .dr_content a { display: block; padding: 1em; color: #fff; } /**/ #nav-input:checked ~ .dr_close { display: block; opacity: .7; } /* チェック→カバー表示 */ #nav-input:checked ~ .dr_content { transform: translateX(0%); box-shadow: -6px 0 25px rgba(0,0,0,.5); } /* チェック→メニュー表示（スライド） */ /*---------------------- Language Drawer ----------------------*/ #lang-drawer {} #lang-drawer .dr_open { margin-right: 12vw; background-image: url(parts/lang@2x.png); } #lang-drawer .dr_content { height: auto; max-height: 480px; top: 0; left: 0; transform: translateY(-105%); /* 上に隠しておく */ } #lang-drawer .dr_content ul { margin: 0; padding: 0; display: flex; justify-content: space-around; } #lang-drawer .dr_content li { flex: 1; border-left: thin solid rgba(255,255,255,.3); list-style-type: none; } #lang-drawer .dr_content li:first-child { border-left: none; } #lang-drawer .dr_content a { display: block; padding: 1em; color: #fff; font-size: 1em; text-align: center; } #lang-input:checked ~ .dr_close { display: block; opacity: .7; } /* チェック→カバー表示 */ #lang-input:checked ~ .dr_content { transform: translateY(0%); box-shadow: -6px 0 25px rgba(0,0,0,.5); } /* チェック→メニュー表示（スライド） */ /*---------------------- Find Drawer ----------------------*/ #find-drawer {} #find-drawer .dr_open { margin-right: 24vw; background-image: url(parts/find@2x.png); } #find-drawer .dr_content { height: auto; max-height: 480px; top: 0; left: 0; transform: translateY(-105%); /* 上に隠しておく */ } #find-drawer .dr_content { padding: 2em 1em; color: #fff; font-size: 1em; text-align: center; } #find-input:checked ~ .dr_close { display: block; opacity: .7; } /* チェック→カバー表示 */ #find-input:checked ~ .dr_content { transform: translateY(0%); box-shadow: -6px 0 25px rgba(0,0,0,.5); } /* チェック→メニュー表示（スライド） */ /*---------------------- SNS Icons ----------------------*/ #sns-icon { position: absolute; top: 1vw; right: 3rem; } #sns-icon { top: 3vw; right: 1rem; } #sns-icon { margin-right: 3vw; } #sns-icon .sns a { min-width: 20px; min-height: 20px; width: 4vw; height: 4vw; font-size: 15px; } /*---------------------- Footer ----------------------*/ #footer { color: #674530; background-color: #bfb899; background-color: #d8cdae; } #footer .sitemap { margin: auto; padding: 1em; max-width: 1200px; font-size: .8rem; } #footer .sitemap { display: flex; flex-wrap: wrap; grid-gap: 1em; } #footer .sitemap a { padding: 0px !important; color: #674530; background: none; } /* #footer .sitemap > *{ flex: 1; margin: 0; padding:0; } */ #footer .sitemap ul { margin: 0; padding: 0; } #footer .sitemap li { margin: 0; padding: 0; list-style-type: none; } #footer .sitemap ul ul { margin: 0 0 1em 1.5em; padding: 0; font-size: .9em; } #footer .sitemap ul ul { display: flex; flex-wrap: wrap; grid-gap: 0 3em; } #footer .sitemap ul ul li { margin: 0; padding: 0; list-style-type: disc; } #footer .sitemap ul ul li { } #footer .sitemap table.solid { margin: 10px 0; } #footer .sitemap table.solid { font-family: initial; } #footer .sitemap table.solid td { vertical-align: middle; border: 1px solid #977560; } #footer .copyright { padding: 1em; color: rgba(255, 255, 255, .8); background-color: #674530; } #footer .copyright { font-size: .8rem; text-align: center; font-family: arial; } #footer .copyright a{ color: #fff; } /*-------------- Scroll Button --------------*/ #pagetop { position: fixed; bottom: 2rem; right: 2rem; width: 4rem; height: 4rem; padding: .5em; font-size: 13px; line-height: 2; border-radius: 3em; text-align: center; color: white; background-color: orange; z-index: 999; } #pagetop { opacity: .6; } #pagetop:hover { opacity: 1; } #pagetop i { display: block; font-size: 1.4rem; } #pagetop a { display: block; font-size: .7rem; color: inherit; padding: 0; } #pagetop a:hover { color: inherit; text-decoration: none; } /* for SmartPhone Landscape (横) */ @media screen and (min-width:480px) { /* #control .fa { display: inline; } */ .title h1 { font-size: 2.4rem; } #header .logo { padding: 8vw 2em; } .dr_open { top: 10vw; } #footer .sitemap { padding: 2em 1em; } #footer .sitemap ul ul { display: block; } #footer .sitemap ul ul li { margin-right: 0; } } /* for Tablet */ @media screen and (min-width:768px) { /* and ( max-width:1024px) { */ /* .inner { padding: 5em 0; } .title { font-size: 4vw; } */ h2 { font-size: 2.0rem; } h3 { font-size: 2.0rem; } h4 { font-size: 1.6rem; } h5 { font-size: 1.2rem; } section:not([class]) { min-height: 320px; } .mbo { display: none; } .pco { display: initial; } .solid .d { white-space: nowrap; } .title h1 { font-size: 3rem; } .subtitle { font-size: 3vw; } .summary { font-size: 1.2em; line-height: 1.8; letter-spacing: .1em; } .summary h3 { font-size: 2.4rem; } #ctrl { display: block; } #header { min-height: 90px; } #header .logo { padding: 40px 2em; } #header .logo a { margin: auto; } /* #header .logo a { width: 42vw; height: 6vw; } #header .logo p { display: inline; } */ .dr_open { top: 9vw; } #lang-drawer .dr_open { margin-right: 60px; } #find-drawer .dr_open { margin-right: 120px; } #sns-icon { margin-right: 32px; } #sns-icon .sns a { width: 30px; height: 30px; font-size: 20px; } #top_image .msg { bottom: 80px; } #top_image .msg img { width: 30%; } #top_btn ul { margin-top: -40px; } #tab_box ul { display: flex; } #top_btn ul { grid-gap: 2rem; } #foot_link ul { grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 2rem; } #foot_link2 ul { grid-gap: 3rem; } #profile { padding: 2em; } #profile .inner { flex-wrap: nowrap; } #profile .pc1 { display: block; } #profile .pc2 { display: block; } #profile .exlink{ flex-wrap: nowrap; } #profile .exlink > * { flex: 0 1 auto; } #intro .main { left: 10%; right: 10%; bottom: 5%; } #intro .catch { font-family: serif; font-size: 3.2em; } #intro .read { font-family: serif; font-size: 1.4em; line-height: 1.8; } #control { padding-right: 20px; } #about .profile { max-width: 96%; padding: 2%; } #facility li { margin: 1%; padding: 1%; flex: 1 0 25%; } #facility li:nth-child(1), #facility li:nth-child(2) { flex: 1 0 35%; } #contact .inquiry { margin: 3em 1em 0; max-width: 980px; } #contact .inquiry dt{ width: 25%; text-align: right; } #contact .inquiry dd{ margin-top: -2.3em; padding-left: 27%; } } /* for PC */ @media screen and (min-width:1000px) { .title h1 { padding-top: 50px; padding-bottom: 110px; } #header .nav-pc { display: block; } .dr_open { top: 80px; right: 1rem; } #sns-icon { top: 20px; right: 3rem; margin-right: 0; } #footer .sitemap { padding: 3em 1em; justify-content: space-around; } } /*---------------------- for Information Headline ----------------------*/ #HL4, #HL5, #HL6 { display: none; } @media screen and (min-width:657px) { #HL4 { display: block; } } @media screen and (min-width:987px) { #HL5, #HL6 { display: block; } }