@charset "utf-8"; *{ margin: 0; padding: 0; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }/*オーディオ・図形描画・ビデオ　clearを使用しないで回り込みを防ぐ*/ audio:not([controls]) { display: none; } [hidden] { display: none; } article, aside, figure, figcaption, footer, header, nav, section { display: block; } html { font-size: 62.5%; }/*"viewportの文字大きさ固定*/ body { width: 100%; height:100%; font-family: 'times new roman',georgia, Meiryo,'Hiragino Kaku Gothic ProN', sans-serif; font-size:10px;/* font-size 1rem = 10px */ font-size:1.0rem; text-align:center; background:#FFFFFF; color:#222222; } img { border:none;} h1{} /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 0; padding: 0 0 0 0; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } div, span, figure, img, fieldset, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre, small, strong, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:0; border:none; outline:none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; } .fluid ul li{list-style:none;} .fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } a { color: #2E929B; text-decoration:none; } a:hover { color: #FF9900; text-decoration:none; } a:active { color: #FF9900; text-decoration:none; } .blue {color: #a0d8e5; }/*コンセプトカラー1*/ .brown {color: #917864; }/*コンセプトカラー2*/ .aTxt {color: #222222; } /* ============================================================================= sliderの指定 ========================================================================== #wide { width:1140px;} jquery.sliderPro.js に指定　高さは比率 .slider-pro{} .sp-slides{} .sp-image{} */ /* ============================================================================= clear ========================================================================== */ .cl {clear:both;} .cl_contentsTitle {clear:both; height:14px;} /* ＝＝＝＝＝ TOPへ戻る ＝＝＝＝＝＝　*/ #back-to_wp { width:100%; margin-left:auto; margin-right:auto; } #back-top { position: fixed; bottom: 30px; margin-left:5px; } #back-top a { width: 30px; display: block; text-align:center; color:#FF9900; } #back-top span { width: 35px; height: 38px; display: block; margin-bottom: 7px; background: url(../img/pleaseToTop.png) no-repeat center center; padding: 0 0 80px 0; } /******************************************************************/ /******************************************************************/ #contents { } #column { width: 100%; } .columnItem { } #grandMenu { } #symbolImg { clear:both; margin: 0 auto;} #symbolImg img {width:100%; height:100%;} #footer { background-color:#a0d8e5; margin:0px; line-height:1.5em; font-size:0.8em; padding:5px; color:#FFFFFF; width:100%; } .a { } .zeroMargin_mobile { margin-left: 0; } .hide_mobile { display: none; } /*memoをaccordionに変化 /*-------------------------------------------*/ .accordion { display:block; width:90%; margin: 0% 2% 5% 3% ; padding:15px; border:1px dotted #3FCFD5; border-radius: 5px; } .accordion { float: right\9; width: 85%\9;} .accordion .accordion_head{ display:block; background:url(../img/accordion/accordion_a.jpg) no-repeat left; text-shadow:none; box-shadow: none; position: relative; clear:both; font-size:16px;margin:0 0 10px; padding:8px 8px 8px 40px; border: 0px ; background-color:#72bbfa; color:#FFF; border-radius: 5px; cursor:pointer; } .accordion .accordion_head:hover{ display:block; background:url(../img/accordion/accordion_b.jpg) no-repeat left; text-shadow:none; box-shadow: none; position: relative; clear:both; font-size:16px;margin:0 0 10px; padding:8px 8px 8px 40px; border: 0px ; background-color:#72bbfa; color:#FFF; border-radius: 5px; } .column {font-size:0.8em; line-height:1.5em;} /************************************************* 本文 *************************************************/ #header_wrap{ clear:both; width:100%; margin:0 auto; background-color:#a0d8e5; } #header_wrap:before, #header_wrap:after{ content:""; display: table; } #header_wrap:after{ clear:both; } /*IE6,7対策 （haslayout対策）*/ #header_wrap{ *zoom:1; } #switch{ width:100%; margin: 0 auto; font-size:14px; font-family: Meiryo,'Hiragino Kaku Gothic ProN', sans-serif;} #switch .child{ width:50%; margin:0 auto; float:left;} #switch .child .jp{ width:100%; display:block; text-align:center; background-color:#0d5b8d; color:#FFFFFF;} #switch .child .jp a { width:100%; display:block; background:#D7D7D7;} #switch .child .en{ width:100%; display:block; text-align:center; background-color:#0d5b8d; color:#FFFFFF;} #switch .child .en a { width:100%; display:block; background:#D7D7D7;} #header{ clear:both; width:98%; margin:0 auto; background-color:#a0d8e5; } #header{ font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; letter-spacing:-0.1rem; font-weight: lighter; } /* =14px */ #header:before, #header:after{ content:""; display: table; } #header:after{ clear:both; } /*IE6,7対策 （haslayout対策）*/ #header{ *zoom:1; } #logo {margin: 0 auto;} #wrap { clear:both; width:100%; margin:0 auto; background-color:#a0d8e5; } #wrap:before, #wrap:after{ content:""; display: table; } #wrap:after{ clear:both; } /*IE6,7対策 （haslayout対策）*/ #wrap{ *zoom:1; } #wrapContents { font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; letter-spacing:-0.1rem; font-weight: lighter; } /* =14px */ #wrapContents { width:98%; margin:0 auto; background-color:#a0d8e5; } #wrapContents:before, #wrapContents:after{ content:""; display: table; } #wrapContents:after{ clear:both; } /*IE6,7対策 （haslayout対策）*/ #wrapContents{ *zoom:1; } #main { clear:both; width:100%; margin:0 auto; background-color:#FFFFFF; } #main:before, #main:after{ content:""; display: table; } #main:after{ clear:both; } /*IE6,7対策 （haslayout対策）*/ #main{ *zoom:1; } /************************************ English　フォントサイズ変更********* /************************************/ #mainContents { font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; /* letter-spacing:-0.1rem;*/ font-weight: lighter; } /* =14px */ #mainContents { clear:both; width:98%; margin: 0 auto; background-color:#FFFFFF;} #mainContents .concept { clear:both; width:100%; padding-top:45px; } #mainContents .concept div {} /*TOPconcept指定*/ #imgTxt {color: #917864; font-size:26px; font-size:2.6rem; line-height:38px; line-height:3.8rem;} #breweryTitle_01 {color: #917864; font-size:26px; font-size:2.6rem; line-height:38px; line-height:3.8rem;} #beer_kitchenTitle_01 {color: #917864; font-size:26px; font-size:2.6rem; line-height:38px; line-height:3.8rem;} #mainContents .concept p { line-height:28px;} /*TOP PDF リンク指定*/ #menuArea { margin-top:50px; width:100%;} #menuArea .menuAreaBox { width:100%;} #menuArea .menuAreaBo img {display:inline;} /*#menuArea img { margin: 0 20px;} */ /*information指定*/ .information img { text-align:center;} .information {margin-top:8%;} .informationMc {margin-top:1%;} .informationMc table {margin: 0 auto;} .informationMc table td {padding:3px 5px; text-align:left;} /*各ページcontents指定*/ #mainContents .contents { clear:both; display:block; width:100%; margin-top:20px;} #mainContents .contents p { line-height:28px;} /*画像gallery*/ .contentsBoxSecond { clear:both; display:block; width:90.6%; margin:0 4.5% 0 4.9%;} .contentsBoxSecond ul{} .contentsBoxSecond li { display:block; float:left;width:16.5%; margin-left:0.1%; } .contentsBoxSecond li img { width:100%; height:100%; } /* access左右にスペースをとる*/ #mainContents .container { clear:both; width:100%; margin: 0 auto; padding-top:45px;} #mainContents .container .containerTop_margin { display:block;width:100%; margin-top:8%;} .containerBoxL {width:56%; float:left; text-align:right;}/*529pxのとき非表示*/ .containerBoxL .containerBoxL_mc { width:379px; text-align:left; float:right; font-size:14px; line-height:18px;} /*529pxのとき非表示*/ .containerBoxL .containerBoxL_mc img {width:100%; height:100%;}/*529pxのとき非表示*/ .containerBox {width:44%; float:left; text-align:left;} .containerBox .containerBox_mc { width:300px; text-align:center;} .openingHours { display:inline-block;} .openingHours td { text-align:left; padding-left:10px; line-height:16px;} .containerBox .map {display:none;} #sns { clear:both; display:block; width:99.5%; overflow: hidden; position: relative;} #sns ul { list-style: none outside none; float: left; margin: 0 0 0 0; padding: 0; position: relative; left: 50%; } #sns ul li { float: left; margin-right: 5px; padding: 5px; position: relative; left: -50%; } /*ボタンの指定*/ .button a { color:#917864; padding: 2px 10px; background-color:#FFFFFF; border: 1px solid #917864; -webkit-border-radius: 5px 5px; border-radius: 5px 5px; font-size:14px; } .button a:hover{ color:#ffffff; padding: 2px 10px; background-color:#917864; border: 1px solid #917864; -webkit-border-radius: 5px 5px; border-radius: 5px 5px; font-size:14px; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.14), 0 1px 9px 0 rgba(0,0,0,0.12), 0 5px 2px -1px rgba(0,0,0,0.2); } } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (max-width: 480px) { #header h1{ width:30% !important; margin: 0 auto;} #header h1 img { width:100%; height:100%;} /*grandMenuここから*/ .gridContainer { width: 90%; padding-left: 1.5%; padding-right: 1.5%; clear: none; float: none; margin-left: auto; background-color:#a0d8e5; /*border-left: 2px #ededef solid; border-right: 2px #ededef solid;*/ } #grandMenu{background-color:#a0d8e5;} #grandMenu a { color:#FFFFFF; background-color:#a0d8e5; letter-spacing:0.1em; letter-spacing:0.1rem; } nav#mainNav{ clear:both; width:100%; margin:0 auto; padding:0; border:1px solid #e4e4e4; } nav#mainNav a.menu{ width:100%; display:block; height:40px; line-height:40px; font-weight: bold; text-align:left; } nav#mainNav a#menu span{padding-left:10px;} nav#mainNav > a span:before{content: "▼ ";} nav#mainNav a.menuOpen span:before{content: "▼ ";} nav#mainNav a#menu:hover{cursor:pointer;} nav .panel{ display: none; width:100%; position: relative; right: 0; top:0; z-index: 1; } nav#mainNav ul li{ float: none; clear:both; width:100%; height:auto; line-height:1rem; /*background:url(../img/bg.png);*/ } nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{ display: block; padding:15px 10px; text-align:left; border-bottom:1px dashed #ccc; } nav#mainNav ul li a span{padding-left:10px;} nav#mainNav ul li:first-child a{ border-top:1px solid #e4e4e4; } nav#mainNav ul li:last-child a{border:0;} nav#mainNav ul li.active a{ color:#708c0c;} nav div.panel{float:none;} nav#mainNav li a:hover{ color:#a0d8e5; background-position:0 -60px; padding-top:15px; background:#a0d8e5; background: -webkit-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -moz-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -o-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -ms-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); } /*grandMenuここまで*/ #mainContents { width:100%; } #mainContents .concept { } #mainContents .concept div {} /*TOPconcept指定*/ #imgTxt {} /*information指定1*/ #informationTitle_01 {} /*information指定2*/ #informationTitle_02 img { display:none;} #informationTitle_02 { width:100%; margin:0 auto; padding-top: 6.22%;/*画像の縦÷横×100*/ background:url(../img/other/infoTitle_02sp.png) center no-repeat; background-size: 100%; } /*1F指定*/ #breweryTitle_01 {} /*7F指定*/ #beer_kitchenTitle_01 {} #mainContents .concept p {} .contentsBoxSecond { clear:both; display:block; width:99.5%; margin:0 2.5%;} .contentsBoxSecond ul{} .contentsBoxSecond li { display:block; float:left;width:31%; margin-left:0.5%; } .contentsBoxSecond li img { width:100%; height:100%; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .a{} .zeroMargin_desktop{margin-left: 0;} .hide_desktop{display: none;} } @media only screen and (max-width: 529px) { /* access*/ .containerBox { width:100%; float:none; margin: 0 auto; text-align:center;} .containerBox .containerBox_mc { width:100%;} .containerBox .map {display:inherit; width:100%; margin: 0 auto; text-align:left; font-size:14px; line-height:18px;} .containerBox .map img {width:95%; height:95%;} .containerBoxL {display:none;} #switch{} #switch .child{ line-height:26px; line-height:2.6rem; } } @media only screen and (max-width: 640px) { #mainContents .concept div {} /*TOPconcept指定*/ #imgTxt { font-size:22px;} #informationTitle_01 img { width:94%;} #informationTitle_02 img { width:94%;} #breweryTitle_01 { font-size:22px;} #beer_kitchenTitle_01 { font-size:22px;} #mainContents .concept p{} } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 760px) { #header h1{ width:20% ; margin: 0 auto;} #header h1 img { width:100%; height:100%;} #mainContents .concept { clear:both; width:100%; padding-top:45px; } #menuArea {} #menuArea .menuAreaBox { width:33%; float:left;} } @media only screen and (max-width: 812px) { /* access*/ .containerBoxL .containerBoxL_mc { width:100%;} .containerBoxL .containerBoxL_mc img {width:100%; height:100%;} } @media only screen and (max-width:959px){ #wrapContents{ width:770px;} #wrapContents{ width:99%;} #symbolImg { width:99%;} #header h1{ width:18% ; margin: 0 auto;} #header h1 img { width:100%; height:100%;} /*grandMenuここから*/ #grandMenu{background-color:#a0d8e5;} #grandMenu a { color:#FFFFFF; background-color:#a0d8e5; letter-spacing:0.1em; letter-spacing:0.1rem; } nav#mainNav{ clear:both; width:100%; margin:0 auto; padding:0; border:1px solid #e4e4e4; } nav#mainNav a.menu{ width:100%; display:block; height:40px; line-height:40px; font-weight: bold; text-align:left; } nav#mainNav a#menu span{padding-left:10px;} nav#mainNav > a span:before{content: "▼ ";} nav#mainNav a.menuOpen span:before{content: "▼ ";} nav#mainNav a#menu:hover{cursor:pointer;} nav .panel{ display: none; width:100%; position: relative; right: 0; top:0; z-index: 1; } nav#mainNav ul li{ float: none; clear:both; width:100%; height:auto; line-height:1rem; /*background:url(../img/bg.png);*/ } nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{ display: block; padding:10px 15px; text-align:left; border-bottom:1px dashed #ccc; } nav#mainNav ul li a span{padding-left:10px;} nav#mainNav ul li:first-child a{ border-top:1px solid #e4e4e4; } nav#mainNav ul li:last-child a{border:0;} nav#mainNav ul li.active a{ color:#708c0c;} nav div.panel{float:none;} nav#mainNav li a:hover{ color:#a0d8e5; background-position:0 -60px; /*padding-top:10px;*/ background:#a0d8e5; background: -webkit-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -moz-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -o-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -ms-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); } /*grandMenuここまで*/ } @media only screen and (min-width: 960px) { #wrapContents{ width:940px; width:94.0rem; } #mainContents { width:940px; width:94.0rem; } #symbolImg { width: 940px; width:94.0rem; margin-bottom:5px;} /*grandMenuここから*/ .gridContainer { width: 88.5%; max-width: 1232px; padding-left: 0.75%; padding-right: 0.75%; margin:0 auto; } .gridContainer{ margin-top:-9px;} #grandMenu { background-color:#a0d8e5;} nav#mainNav{ padding:0 14px; clear:both; overflow:hidden; width:95%; margin: 0 auto; /*background:url(../img/topnavBg.png);*/ } nav#mainNav ul { width:100%; margin: 0 auto; text-align: center;} nav#mainNav ul li{ display:inline-table; } nav#mainNav ul li{font-family:Courier, 'Courier New', monospace;} /*横並びメニューのみフォント指定*/ nav#mainNav li.last{border-right:1px solid #ebebeb;} nav#mainNav ul li a{ display: block; text-align: center; _float:left; font-size:18px; font-size:1.8rem; letter-spacing:0.5px; height:auto; padding:10px 15px; color:#FFFFFF; /* background:url(../img/topnavSep.png); */ background-color:#a0d8e5; border-left:1px solid #ebebeb; } .sakai {border-right:1px solid #ebebeb;} nav#mainNav ul li a span,nav#mainNav ul li a strong{ display:block; } nav#mainNav ul li a strong {font-weight:normal; } nav#mainNav ul li a span{ overflow:hidden; height:0px; /*color:#FFFFFF; text-shadow:; font-size:10px; text-shadow: 2px 2px 2px #A8A8A8;*/ } nav div.panel{ display:block !important; } a#menu{display:none;} nav#mainNav li.active a{color:#a0d8e5; background-position:0 -60px; /*padding-top:10px;*/ background:#a0d8e5; background: -webkit-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -moz-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -o-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -ms-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); } nav#mainNav li a:hover{ color:#a0d8e5; background-position:0 -60px; /*padding-top:10px;*/ background:#a0d8e5; background: -webkit-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -moz-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -o-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: -ms-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); background: linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); } /*grandMenuここまで*/ #contents { } #column { width:77%; } .columnItem { width:98%;} .tokutoku p:before{content: "■"; color:#333333; padding:0 8px 0 0;} #footer { } .zeroMargin_desktop { margin-left: 0; } .hide_desktop { display: none; } /* ＝＝＝＝＝ TOPへ戻る ＝＝＝＝＝＝　*/ #back-to_wp { } #back-top { } #back-top a { } #back-top span { padding: 0 0 40px 0; } .tableAll {font-size:1em;} .tableAll th,td {} .tableS {font-size:0.8em;} .tableS th,td { } .tableMini {} } @media only screen and (min-width: 1200px) { #switch { width:1240px; width:124.0rem; } #symbolImg { clear:both; width: 1097px; margin: 0 auto; margin-bottom:5px;} #wrapContents{ width:1240px; width:124.0rem; } #mainContents { width:1240px; width:124.0rem; } #logo { width:1240px; width:124.0rem; } #logo h1{ width:15% ; margin: 0 auto;} #logo h1 img { width:100%; height:100%;} }