/* Theme Name:Twenty Thirteen */ * { margin:0 auto;} html,body { height:100%; -webkit-text-size-adjust:100%;} @import url(////fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700); body { font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif ; letter-spacing:0.1em; } body .font-g { font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:normal; font-size:93%; } /** * Basic Structure * ---------------------------------------------------------------------------- */ .site { background-color:#000; margin:0 auto;} .site:after { content:" "; display:block; clear:both;} @media only screen and (max-width:640px) { img { max-width:100%;} } /* グループリンク */ .gr { cursor:pointer; } .gr:hover { opacity:0.8; filter:alpha(opacity=80);} .gr:hover img { opacity:0.8; filter:alpha(opacity=80);} /* ボタン */ .btn { display:inline-block; text-align:center; text-decoration:none; line-height:1; outline:none;} .btn a { text-decoration:none; color:#183169; padding:17px 40px 14px 30px; background:url(images/arrow_03.png) no-repeat right 55%; display:block; letter-spacing:0.1em; } .btn a:hover { text-decoration:none; opacity:1; filter:alpha(opacity=100); } .btn::before, .btn::after { position:absolute; z-index:-1; display:block; content:'';} .btn, .btn::before, .btn::after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all .3s; transition:all .3s;} .btn { border:1px solid #959CAC; background-color:#EEF0F4; background-image:-webkit-linear-gradient(top, #fff, #EEF0F4); background-image:linear-gradient(to bottom, #ffff, #EEF0F4); border-radius:4px; color:#183169; -webkit-transition:none; transition:none; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:normal; } .btn:hover { border:1px solid #959CAC; color:#183169; text-decoration:none; background-color:#E4E8ED; background-image:-webkit-linear-gradient(top, #EEF0F4, #fff); background-image:linear-gradient(to bottom, #EEF0F4, #fff); } .btn:active { background:#E4E8ED; box-shadow:inset 0 3px 5px rgba(0, 0, 0, .2); color:#183169; text-decoration:none;} /* 外部リンク ---------------------------------------------------------------------- */ .url a { color:#fff; text-decoration:none;} .url a:hover { text-decoration:none;} .url { margin-top:15px; position:relative; display:inline-block; padding:12px 50px 9px 30px; width:auto; min-width:115px; color:#F6F6F6; text-align:center; background:#19283C url(images/ico_blank_w.png) no-repeat right 20px top 50%; z-index:0; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:90%; } .url:after { content:""; position:absolute; top:-15px; left:0; margin-left:0; display:block; width:0; height:0; border-style:solid; border-width:0 0 15px 20px; border-color:transparent transparent #19283C transparent; z-index:-1; } /** * Header * ---------------------------------------------------------------------------- */ .site-header { width:100%; position:fixed ; background:rgba(0,0,0,0.8); height:70px; padding-top:7px; z-index:99999 !important; } .site-header #head { width:98%; margin:0 auto; } .site-title { float:left;} .single-author .site-header {} @media only screen and (max-width:1280px) { .site-header { } .site-header #head { width:100%; } .site-title { margin-left:4px; } } /* Navi ---------------------------------------------------------------------- */ #navbar { float:right; width:1000px; margin:0 auto; padding:0; } /* ナビ＆メニュー --- */ #nav-menu { float:right; list-style-type:none; width:965px; margin:17px 0 0 0; padding:0; } #nav-menu li{ font-size:13px; position:relative; float:left; margin:0 0 0 15px; padding:0; text-align:center; color:#FFF; letter-spacing:0; font-weight:bold; } #nav-menu li:lastchild { margin-right:0;} #nav-menu li img { display:block; margin:0 auto;} #nav-menu li a{ height:38px; display:block; margin:0; padding:0; text-decoration:none; color:#FFF; } #nav-menu li:hover > a{ } #nav-menu li.navi-home { background:url(images/navi_home.png) no-repeat left 3px; padding-left:13px;} #nav-menu li.navi-inquiry { background:url(images/navi_inquiry.png) no-repeat left 4px; padding-left:17px;} #nav-menu li.navi-service ul{ list-style:none; position:absolute; top:100%; left:0; margin:0; padding:0; width:190px;} #nav-menu li.navi-service ul li{ overflow:hidden; width:210px; height:0; -moz-transition:.2s; -webkit-transition:.2s; -o-transition:.2s; -ms-transition:.2s; transition:.2s; } #nav-menu li.navi-service ul li a{ width:210px; padding-left:24px; line-height:35px; text-align:left; font-size:12px; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:normal; letter-spacing:0.1em; background:#000 url(images/navi_arrow2.png) no-repeat 9px 46%; border:1px solid #555; border-left:none; border-right:none; text-indent:0;} #nav-menu li.navi-service ul li a:hover { background:#000 url(images/navi_arrow1.png) no-repeat 9px 46%; color:#fff; opacity:1; filter:alpha(opacity=100);} #nav-menu li:hover ul li{ overflow:visible; height:35px;} #nav-menu li:hover ul li:first-child{ border-top:0;} #nav-menu li:hover ul li:last-child{ border-bottom:0;} #nav-menu li.navi-service ul li.spmenu { display:none;} @media only screen and (max-width:999px) { #nav-menu li.navi-service ul li.spmenu { display:block;} } /* コンテンツ ---------------------------------------------------------------------- */ .site-main { margin:0 auto; background:#FFF; color:#000; } .page .site-main .content-area, .error404 .site-main .content-area { max-width:1280px; margin:0 auto; } .site-main .site-content { } .site-main:after, .site-main .content-area:after { content:" "; display:block; clear:both;} .home .site-main { clear:both; background:#000; color:#FFF; } .home .site-main .content-area { float:none; width:100%; } .home .site-main .site-content { clear:both; width:100%; float:none; } .home .site-main .content-area:after, .home .site-main .site-content:after { content:" "; display:block; clear:both;} /* パンくずリスト ------------------ */ .pankuzu { clear:both; max-width:1280px; margin:0 auto 20px auto; padding:5px 0 10px 0; font-size:11px; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight:normal; color:#777; } .pankuzu:after { content:" "; display:block; clear:both;} .pankuzu a { color:#777; text-decoration:underline; } @media only screen and (max-width:640px) { .site-main { clear:both; width:100%; margin-left:auto; margin-right:auto; padding:0; } .site-main .content-area { float:none; width:100%; } .site-main .site-content { float:none; width:98%; margin:0 auto; } .home .site-main { clear:both; padding-top:30px; } a.tel { text-decoration:underline; } } /* サイド ---------------------------------------------------------------------- */ .site-main .sidebar-container { float:right; width:280px; } .site-main .sidebar-container:after { content:" "; display:block; clear:both;} .site-main .widget-area { } .widget { margin:0 0 30px 0; padding:0; font-size:14px; word-wrap:break-word; } .widget .widget-title { font:18px; margin:0 0 20px 0; padding-bottom:15px; text-align:center; font-size:20px; background:url(images/side_widget_h3.png) no-repeat bottom center;} .site-main .widget-area ul { width:100%;} .site-main .widget-area ul li { margin-bottom:7px; padding-left:20px; font-size:14px; background:url(images/widget_li.png) no-repeat left 3px;} .site-main .widget-area ul li a { text-decoration:none; font-weight:bold;} .site-main .widget-area ul li a:hover { text-decoration:underline;} .site-main .widget-area select { display:block; margin:0 auto;} .side-info .side-bld { margin-bottom:6px; } .side-info .side-add { margin:0 auto 15px auto;} .side-info .side-add:after { content:" "; display:block; clear:both;} .side-info .side-add .zip { font-size:14px;} .side-info .side-add .tel { font-size:22px; color:#0059AC;} .side-info em { color:#F00; font-style:normal;} .side-info small { font-size:12px;} .side-info p.f13 { font-size:13px;} .side-info .side-access { font-size:14px; margin-bottom:1em; } .side-info .side-access em { color:#FF0000; font-style:normal;} .side-info .access-bt { margin-bottom:15px; background:#008ADD; } .side-info .access-bt a { display:block; background:#008ADD; } .side-info .side-access dl { width:100%; margin:0 auto; line-height:1.5; overflow:hidden;} .side-info .side-access dl dt { padding:0; font-weight:bold; } .side-info .side-access dl dd { padding:0; margin-bottom:8px; } .side-info .side-calendar { } .side-info .side-bn li { } @media only screen and (max-width:1200px) { .site-main .sidebar-container { float:none; width:100%; padding:20px; } .site-main .widget-area ul { width:80%; margin:0 auto;} } /* TOPメインビジュアル ---------------------------------------------------------------------- */ #movie { position: relative; width:100%; height:auto; margin:0 auto; padding-top: 56.25%; background:#000;} #movie iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;} #movie:after { content:" "; display:block; clear:both;} @media only screen and (max-width:640px) { #movie { clear:both; width:100%; margin:0 auto ; background:#000; } #movie iframe { top:40px;} } /* TOPコンテンツ ---------------------------------------------------------------------- */ .top-about { clear:both; margin-bottom:70px; } .top-about:after { content:" "; display:block; clear:both;} /* 真空調理法の定義 --------- */ .top-aboutL { width:50%; float:left; text-align:center; height:800px; background:url(images/top_aboutL_bg.jpg) no-repeat left top; } .top-aboutL h2 { width:18em; font-size:27px; letter-spacing:0.2em; font-weight:normal; margin:0 auto 35px auto; padding-top:35px; line-height:1.9em; } .top-aboutL img { margin:0 auto 7px auto; } .top-aboutL h3 { font-size:21px; letter-spacing:0.2em; font-weight:normal; max-width:20em; text-align:center; margin:0 auto 0.6em auto; line-height:1.8em; } .top-aboutL p { font-size:16px; letter-spacing:0.15em; font-weight:normal; max-width:33em; text-align:left; margin:0 auto 1em auto; line-height:1.9em; } @media only screen and (max-width:1200px) { .top-aboutL p { max-width:96%; line-height:1.7em; font-size:15px; } } @media only screen and (max-width:640px) { .top-aboutL { width:100%; float:none;} .top-aboutL h2 { font-size:18px; } .top-aboutL img { max-width:35%; } .top-aboutL p { line-height:1.9em; } } .top-aboutR { width:50%; float:right; text-align:center; height:800px; } .top-aboutR:after { content:" "; display:block; clear:both;} .top-aboutR .top-sv { height:400px; background:url(images/top_sv_bg.jpg) repeat left top; } .top-aboutR .top-sv h2 { margin-top:40px; margin-bottom:40px; font-size:22px;} .top-aboutR .top-sv .top-about-txt { height:400px; width:45%; min-width:260px; float:right; padding:15px 0 0 0; background:rgba(0,0,0,0.6) url(images/top_about_arrow.png) no-repeat center bottom 35px; } .top-aboutR .top-sv .top-about-txt p { font-size:15px; letter-spacing:0.05em; } .top-aboutR .top-bdc { height:400px; background:url(images/top_bdc_bg.jpg) repeat left top; } .top-aboutR .top-bdc .top-about-txt { height:400px; width:45%; min-width:260px; float:right; padding:12px 0 0 0; background:rgba(0,0,0,0.6) url(images/top_about_arrow.png) no-repeat center bottom 20px; } .top-aboutR h2 { margin-bottom:12px; } .top-aboutR h3 { font-size:21px; font-weight:bold; margin-bottom:11px; letter-spacing:0.1em; } .top-aboutR p { font-size:15px; font-weight:bold; text-align:left; margin:0 15px 0 16px; letter-spacing:0.03em; } @media only screen and (max-width:1200px) { .top-aboutR p { font-size:14px; } } @media only screen and (max-width:640px) { .top-aboutR { width:100%; float:none;} } /* TOP メリット --------- */ #top-merit { clear:both; min-height:400px; color:#000;} #top-merit h3 { padding-top:60px; padding-bottom:20px; margin-bottom:35px; font-size:20px; background:url(images/top_merit_h3.png) no-repeat center bottom; text-align:center; } #top-merit .merit01 { width:33%; height:400px; float:left; background:url(images/top_merit01.png) no-repeat center top; } #top-merit .merit02 { width:34%; height:400px; float:left; background:url(images/top_merit02.png) no-repeat center top; } #top-merit .merit03 { width:33%; height:400px; float:left; background:url(images/top_merit03.png) no-repeat center top; } #top-merit ul { max-width:420px; width:96%; margin:0 auto 0 auto; padding-left:30px; } #top-merit li { background:url(images/li_01.gif) no-repeat left 8px; padding:0 0 0 10px; font-size:15px; margin-bottom:0.5em; font-weight:bold;} @media only screen and (max-width:640px) { #top-merit .merit01, #top-merit .merit02, #top-merit .merit03 { width:100%; float:none; } } /* TOP GUIDE --------- */ #top-guide { clear:both; text-align:center; min-height:700px; width:100%; background:url(images/top_guide_bg.jpg) center top; color:#000; padding-top:80px;} #top-guide:after { content:" "; display:block; clear:both;} #top-guide h2 { margin-bottom:7px; font-size:45px; font-weight: bold; font-style:italic; text-align:center; letter-spacing:0.1em; } #top-guide h3 { font-size:15px; font-weight:bold; text-align:center; letter-spacing:0.15em; background:url(images/top_guide_h3.png) no-repeat center 50%; margin-bottom:38px;} #top-guide p { font-size:15px; margin-bottom:38px; font-weight:bold;} #top-guide .top-flow { width:33.3333%; float:left; } #top-guide .top-kanri { width:33.3333%; float:left; } #top-guide .top-staff { width:33.3333%; float:left; } #top-guide .top-flow, #top-guide .top-kanri, #top-guide .top-staff { text-align:center; padding-bottom:40px; background: url(images/top_guide_arrow.png) no-repeat center bottom; } #top-guide a { display:block; color:#000; text-decoration:none; } #top-guide .img-box { width:100%; overflow:hidden; position: relative; max-height: 280px; margin-bottom:20px; } #top-guide .img-box img { width:100%;} #top-guide h4 { font-size:18px; font-weight:bold; text-align:center;} @media only screen and (max-width: 640px) { #top-guide { clear:both; text-align:center; height: auto; padding-bottom:20px;} #top-guide .top-flow, #top-guide .top-kanri, #top-guide .top-staff { width:100%; float:none; margin-bottom:20px; background: url(images/top_guide_arrow.png) no-repeat center bottom 10px; } #top-guide .img-box { width:100%; overflow:hidden; position: relative; height:auto; margin-bottom:20px; } #top-guide .img-box img { max-width:100%; position: relative; top: auto; left: auto; height: auto;-webkit-transform: none; -ms-transform: none; transform: none;} } /* TOP NEWS --------- */ #top-menuarea { clear:both; min-height:520px; background:url(images/top_menu_bg.jpg) repeat-x left top; } #top-menu { width:96%; text-align:center; margin-bottom:70px; padding-top:115px;} #top-menu:after { content:" "; display:block; clear:both;} #top-menu .menu-t h2 { font-size:45px; font-weight:bold; font-style:italic; text-align:center; letter-spacing:0.1em; margin-bottom:10px; } #top-menu .menu-t h3 { font-size:15px; font-weight:bold; text-align:center; letter-spacing:0.15em; background:url(images/top_menu_h3.png) no-repeat center 50%; margin-bottom:50px;} #top-menu .menu-t { float:left; width:25%; margin:0 ; padding:0; text-align:center; } #top-menu .menu-t img { max-width:96%; margin:0 auto;} #top-menu .menu { float:left; width:23.4375%; margin:0 0 0 1.5625% ; padding:0; text-align:center; } #top-menu .menu:after { content:" "; display:block; clear:both;} #top-menu .menu .menu-img { width:100%; height:auto; margin:0 auto 8px auto;} #top-menu .menu .menu-img img { width:100%; margin:0 auto;} #top-menu .menu h4 { clear:both; text-align:left;font-size:15px; font-weight:normal; margin:0 0 3px 0; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #top-menu .menu p { clear:both; text-align:left; line-height:135%; margin:0; padding:0;} @media only screen and (max-width:640px) { #top-menu { padding-top:30px;} #top-menu .menu-t { float:none; width:100%; margin:0 auto; padding:0 0 15px 0; text-align:center; } #top-menu .menu-t h2 { } #top-menu .menu-t h3 { margin-bottom:10px; } #top-menu .menu { float:none; width:90%; margin:0 auto 20px auto; padding:0; text-align:center; } } #top-bn { clear:both; background:#fff; color:#000; padding:90px 0; } #top-bn:after { content:" "; display:block; clear:both;} #top-bn ul { max-width:1260px; width:100%; font-size:0; margin:0 auto;} #top-bn li { display:inline-block; font-size:12px; width:31%; margin:0 1%; text-align:center; font-size:14px; vertical-align:top;} #top-bn li img { margin-bottom:5px; max-width:100%;} #top-bn li p a { background:url(images/arrow_05.png) no-repeat left 5px; color:#000; padding-left:10px; text-decoration:underline; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} @media only screen and (max-width:640px) { #top-bn li { width:96%; display:block; } } /* TOP スタッフブログ --------- */ #top-blogarea { clear:both; min-height:520px; background:#000; } #top-blog { width:96%; max-width:1200px; text-align:center; margin-bottom:70px; padding-top:75px;} #top-blog:after { content:" "; display:block; clear:both;} #top-blog h2 { font-size:45px; font-weight:bold; font-style:italic; text-align:center; letter-spacing:0.1em; margin-bottom:10px; } #top-blog h3 { font-size:15px; font-weight:bold; text-align:center; letter-spacing:0em; background:url(images/top_menu_h3.png) no-repeat center 50%; margin-bottom:50px;} #top-blog ul.blog_box { clear:both; margin-bottom:50px; text-align:center; overflow:hidden;} #top-blog ul.blog_box li { display:inline-block; max-width:240px; margin-right:50px; list-style:none; vertical-align:top; } #top-blog ul.blog_box li:last-child { margin-right:0; } #top-blog ul.blog_box li .img_area { width:240px; height:180px; margin-bottom:10px; position:relative; overflow:hidden;} #top-blog ul.blog_box li .img_area img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #top-blog ul.blog_box li h4 { text-align:left;} #top-blog ul.blog_box li h5 { font-size:16px; text-align:left;} #top-blog a.link { display:block; width:240px; padding:10px; font-size:16px; font-weight:bold; background:#FFF; color:#000;} #top-blog a.link img { margin-top:-5px;} @media only screen and (max-width:1200px) { #top-blog ul.blog_box { width:90%; margin:0 auto 50px auto;} #top-blog ul.blog_box li, #top-blog ul.blog_box li:last-child { max-width:240px; margin:0 25px 15px 25px;} } @media only screen and (max-width:640px) { #top-blog ul.blog_box li, #top-blog ul.blog_box li:last-child { width:45%; max-width:100%; margin:0 2% 15px 2%;} } @media only screen and (max-width:480px) { #top-blog ul.blog_box li, #top-blog ul.blog_box li:last-child { width:100%; margin:0 0 15px 0;} #top-blog a.link { width:90%; } } /** * 内部コンテンツ * ---------------------------------------------------------------------------- */ .page .title-bar, .error404 .title-bar { height:390px; text-align:center;} .archive .title-bar, .single .title-bar { height:390px; padding-top:80px; text-align:center;} .page-template-default .title-bar { background:url(images/title_default.jpg) no-repeat center 70px; } #page-sousvide .title-bar { background:url(images/title_sousvide.jpg) no-repeat center 70px; } #page-service .title-bar { background:url(images/title_service.jpg) no-repeat center 70px; } #page-kouken .title-bar { background:url(images/title_kouken.jpg) no-repeat center 70px; } #page-quality .title-bar { background:url(images/title_quality.jpg) no-repeat center 70px; } #page-pioneer .title-bar { background:url(images/title_pioneer.jpg) no-repeat center 70px; } #page-kanri .title-bar { background:url(images/title_kanri.jpg) no-repeat center 70px; } #page-proposal .title-bar { background:url(images/title_proposal.jpg) no-repeat center 70px; } #page-canned .title-bar { background:url(images/title_canned.jpg) no-repeat center 70px; } #page-original .title-bar { background:url(images/title_original.jpg) no-repeat center 70px; } #page-flow .title-bar { background:url(images/title_flow.jpg) no-repeat center 70px; } #page-staff .title-bar { background:url(images/title_staff.jpg) no-repeat center 70px; } .archive .title-bar, .single .title-bar { background:url(images/title_blog.jpg) no-repeat center 70px; } .page h2.page-title, .archive h2.page-title, .single h2.page-title, .error404 h2.page-title { font-size:42px; color:#fff; padding:150px 0 16px 50px; font-style:normal; font-weight:normal; background:url(images/h1_title.png) no-repeat center bottom; } .page h2.page-title sup {} @media only screen and (max-width:640px) { .page h2.page-title, .archive h2.page-title, .single h2.page-title, .error404 h2.page-title { font-size:30px; color:#fff; padding-left:0; font-style:normal; font-weight:normal; } } .page .site-main, .archive .site-main, .single .site-main, .error404 .site-main { max-width:100%; margin:0 auto; background:#F8F8F8;} h2#archive-title { border-bottom:1px solid #CCC; margin:40px 0 15px 0; padding-bottom:18px;} .hentry { padding:0; margin-bottom:30px;} .hentry:after { content:" "; display:block; clear:both;} .entry-header, .entry-content { max-width:100%; margin:20px auto; line-height:180%; } .box { clear:both; margin-bottom:60px; background:#FFF; padding:60px 50px 20px 50px; border:1px solid #F3F3F3;} .box:after { content:" "; display:block; clear:both;} .box p { line-height:1.75;} /* box内のbox */ .inbox { clear:both; margin-bottom:60px;} .inbox:after { content:" "; display:block; clear:both;} /* tateが入る時 */ .boxt { padding-right:15.625%; } .boxt:after{ content:" "; display:block; clear:both;} .boxt .naka { float:right; width:84.375%; } @media only screen and (max-width:1280px) { .box { padding:50px 20px 20px 20px; } .boxt { width:100%; padding-right:1.5625%;} } @media only screen and (min-width:641px) { .boxt .tate { width:15.625%; padding-right:60px; float:left; text-align:top; font-size:25px; line-height:1.6; white-space: nowrap; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; /* 欧文回転 */ -webkit-text-orientation:upright; -ms-text-orientation:upright; text-orientation:upright; } } @media only screen and (max-width:640px) { .box { padding:50px 10px 20px 10px; } .boxt .tate { width:100%; padding-right:0; float:none; text-align:top; font-size:19px; line-height:1.6; text-align:center; } .boxt .naka { width:100%;} } .page .box h3 { padding:0 0 20px 0; margin-bottom:60px; font-size:36px; font-weight:normal; text-align:center; letter-spacing:0.1em; line-height:1.2; background:url(images/h2_bg.png) no-repeat center bottom; } .page .box h3 small { font-size:22px;} .page .box h4 { padding:0 0 20px 0; margin-bottom:30px; color:#183169; font-size:25px; font-weight:normal; letter-spacing:0.1em; line-height:1.2; } @media only screen and (max-width:640px) { .page .box h3 { font-size:24px; } .page .box h4 { font-size:21px; } } .error404 .box h3 { padding:0 0 20px 0; margin-bottom:60px; font-size:26px; font-weight:normal; text-align:center; letter-spacing:0.1em; line-height:1.2; background:url(images/h2_bg.png) no-repeat center bottom; } .error404 .box { text-align:center;} .error404 .box form { margin:30px auto;} /* スービットとは ---------------------------------------------------------------------- */ #sousvide h4 { background:url(images/h3_bg.gif); padding:10px 0 6px 16px; } #sousvide .catch { width:100%; padding:0 40px 0 40px; text-align:center;} #sousvide .catch h5 { text-align:center; font-size:22px; font-style:bold; margin-bottom:1em; } #sousvide .catch img { float:left;} #sousvide .catch p { text-align:left; } #sousvide .catch ul { margin:30px auto; text-align:left; } #sousvide .catch ul li { font-size:18px; background:url(images/li_01.gif) no-repeat left 13px; padding:2px 0 3px 12px;} @media only screen and (max-width:999px) { #sousvide .catch { width:100%; padding:0;} #sousvide .catch h5 { font-size:20px; } #sousvide .catch img { float:none;} } #sousvide .define { width:48%; height:480px; float:left; padding:40px 70px; font-size:16px; border:1px solid #CCC; } #sousvide .process { width:48%; height:480px; float:right; padding:40px; text-align:center; border:1px solid #CCC; } #sousvide .define h4, #sousvide .process h4 { background:url(images/h3_bg2.png) no-repeat center bottom; font-size:23px; color:#000; padding:0 0 15px 0; margin:0 auto 25px auto; text-align:center; } #sousvide .process ol { margin:0 auto 30px auto; font-size:16px;list-style:none; counter-reset:sou;} #sousvide .process ol li { margin:0 ; padding-bottom:18px; background: url(images/sousvide_process.gif) no-repeat center bottom;} #sousvide .process ol li:before { margin-right:5px;counter-increment: sou; content: counter(sou) ".";} #sousvide .process ol li:last-child { margin:0 ; padding-bottom:0; background:none;} @media only screen and (max-width:999px) { #sousvide .define { width:100%; height:auto; float:none; padding:40px; border:1px solid #CCC; margin-bottom:10px; } #sousvide .process { width:100%; height:auto; float:none; padding:40px; text-align:center; border:1px solid #CCC; } #sousvide .define h4, #sousvide .process h4 { font-size:20px;} } #sousvide .dif { width:50%; float:left; padding:0 40px 0 40px; text-align:center; } #sousvide .dif p { text-align:left; } #sousvide .dif img { float:right; } @media only screen and (max-width:999px) { #sousvide .dif { width:50%; float:left; padding:0 20px 0 20px; text-align:center; } #sousvide .dif img { float:none; margin-bottom:15px; } } @media only screen and (max-width:640px) { #sousvide .dif { width:100%; float:none; padding:0; } } #sousvide .merit { padding:0 40px 20px 40px; } #sousvide .merit table { border-top:1px solid #4f4d47; border-right:1px solid #4f4d47; border-spacing:0; margin:0 auto; } #sousvide .merit thead th { text-align:center;} #sousvide .merit th, #sousvide .merit td { border-bottom:1px solid #4f4d47; border-left:1px solid #4f4d47; padding:8px 12px; } #sousvide .merit th { background-color:#EEE; } #sousvide .merit table tbody th { background:#FFF; font-size:16px;} #sousvide .merit table tbody th strong { color:#1853AD; font-size:18px;} #sousvide .merit table tbody td { } #sousvide .merit table tbody td p { display:none; } #sousvide .merit table tbody td strong { color:#EE2828;} #sousvide .merit ul { margin-bottom:0; } #sousvide .merit ul li { background:url(images/ico_cir.png) no-repeat left 9px; padding:2px 0 3px 12px;} @media only screen and (max-width:640px) { #sousvide .merit { width:100%; padding:0; } #sousvide .merit table thead { display:none;} #sousvide .merit table tbody th { display:block; width:100%; font-weight:bold; background:#EEE;} #sousvide .merit table tbody td { display:block; width:100%;} #sousvide .merit table tbody td p{ display:block; width:100px; padding:3px 0 0px 0; font-size:12px; text-align:center; background: url(images/h3_bg.gif); color:#183169; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} } /* シェフの片腕 ---------------------------------------------------------------------- */ #service {} #service ul { margin-top:30px;} #service ul li { width:32.8%; margin:0 0.25% 20px 0.25%; float:left; text-align:center; } #service ul li.serv01 { background:url(images/service_01.jpg) no-repeat center bottom;} #service ul li.serv02 { background:url(images/service_02.jpg) no-repeat center bottom;} #service ul li.serv03 { background:url(images/service_03.jpg) no-repeat center bottom;} #service ul li.serv04 { background:url(images/service_04.jpg) no-repeat center bottom;} #service ul li.serv05 { background:url(images/service_05.jpg) no-repeat center bottom;} #service ul li.serv06 { background:url(images/service_06.jpg) no-repeat center bottom;} #service ul li a { color:#000; display:block; height:300px; font-size:23px; padding-top:76px; background:url(images/arrow_03.png) no-repeat center 115px; text-shadow:0 0 5px #fff; text-decoration:none; opacity:1; filter:alpha(opacity=100);} #service ul li:hover { opacity:0.8; filter:alpha(opacity=80);} @media only screen and (max-width:640px) { #service ul li { width:100%; float:none; text-align:center; } } /* 人手不足に貢献 ---------------------------------------------------------------------- */ #kouken .boxt .tate { padding-right:100px; float:left; text-align:top; font-size:25px; line-height:1.6;} #kouken .boxt h5 { background:url(images/li_01.gif) no-repeat left 9px; padding:0 0 0 12px; font-size:16px; margin:0.5em 0; font-weight:bold;} #kouken .boxt p { margin-bottom:30px; padding:0 0 0 12px;} @media only screen and (max-width:640px) { #kouken .boxt .tate { padding-right:0; text-align:left; } } /* 利用シーン例 --------- */ #kouken .scene { clear:both; min-height:400px; color:#000;} #kouken .scene h4 { padding-top:60px; padding-bottom:20px; margin-bottom:35px; font-size:20px; background:url(images/top_merit_h3.png) no-repeat center bottom; text-align:center; } #kouken .scene .scene01 { width:33%; height:400px; float:left; background:url(images/kouken_scene01.jpg) no-repeat center top; } #kouken .scene .scene02 { width:34%; height:400px; float:left; background:url(images/kouken_scene02.jpg) no-repeat center top; } #kouken .scene .scene03 { width:33%; height:400px; float:left; background:url(images/kouken_scene03.jpg) no-repeat center top; } #kouken .scene ul { max-width:420px; width:96%; margin:0 auto 0 auto; padding-left:30px; } #kouken .scene li { background:url(images/li_01.gif) no-repeat left 8px; padding:0 0 0 10px; font-size:15px; margin-bottom:0.5em; font-weight:bold;} #kouken .scene a { text-decoration:none;} #kouken .scene a:hover { text-decoration:none;} @media only screen and (max-width:640px) { #kouken .scene .scene01, #kouken .scene .scene02, #kouken .scene .scene03 { width:100%; float:none; } } /* メニューの標準化、品質向上 ---------------------------------------------------------------------- */ #quality h4 { background:url(images/h3_bg.gif); padding:10px 0 6px 16px; } #quality .qlt { width:50%; float:left; padding:0 40px 0 40px;} #quality .qltR { border-left:1px dashed #DDD;} #quality h5 { padding:0; font-size:22px; margin:0.5em 0; font-weight:bold;} #quality p { margin-bottom:30px; padding:0 0 0 10px;} @media only screen and (max-width:999px) { #quality .qlt { width:98%; float:none; padding:0; margin:0 auto 20px auto; } #quality .qltR { border-left:none;} } #quality .qlt ul { margin:20px 0 50px 0; background:url(images/arrow_04.gif) no-repeat center bottom; padding-bottom:60px; } #quality .qlt ul li{ display:inline-block; width:30%; margin:0 1%;} #quality .qlt ul li img { max-width:100%; } #quality .qlt ol{ clear:both; margin-left:1.5em;} #quality .qlt ol li{ position:relative; font-size:16px; color:#000; padding:0.5em 0 0.5em 0.5em;} #quality .qlt ol li:before{ } #quality .qlt ul:after, #quality .qlt ol:after { content:" "; display:block; clear:both;} @media only screen and (max-width:640px) { #quality .boxt .tate { padding-right:0; } } @media only screen and (max-width:480px) { #quality .qlt ul li{ display:block; width:100%; margin:0 auto 10px auto; text-align:center;} } #quality ul.problem { text-align:center; margin:20px 0; } #quality ul.problem li { display:inline-block; width:320px; height:80px; margin:0 5px 15px 5px; padding:15px; font-size:16px; border:1px solid #CCC; vertical-align:middle; background:#FDFDFD;} #quality ul.problem li.s { padding-top:25px} #quality .problem_txt { font-size:18px;} @media only screen and (max-width:480px) { #quality ul.problem li { display:inline-block; width:90%; height:auto;} #quality ul.problem li.s { padding:15px;} #quality ul.problem li br { display:none;} } #quality .recipe { border:1px solid #DDD; padding:10px 20px 0 20px; overflow:hidden;} #quality .recipe h5 { padding:0; font-size:22px; margin:0.5em 0 20px 0; padding:0 0 0 15px; font-weight:bold; background:url(images/ico_sq.png) no-repeat left 2px;} #quality .recipe img { margin-bottom:20px; max-width:44%;} #quality .recipe-data { float:right; width:54%;} #quality .recipe-data h6 { margin-bottom:10px; font-size:16px; color:#19283C;} #quality .recipe-data dl { float:left; width:48%; margin:0 4% 40px 0;} #quality .recipe-data dl.ingredients2 { width:48%; margin:0 0 20px 0;} #quality .recipe-data dl.ingredients2:after { display:block; clear:both; height:0px; visibility:hidden; content:".";} #quality .recipe-data dl dt { display: block; width:75%; clear: left; float:left; padding:5px 0 3px 20px; border-bottom:1px solid #DDD; background:url(images/arrow_05.png) no-repeat 5px 11px;} #quality .recipe-data dl dd { display: block; margin-left:75%; padding:5px 5px 3px 0; text-align:right; border-bottom:1px solid #DDD;} #quality .directions { clear:both; display:block;} #quality .directions ol { margin-left:20px;} #quality .directions ol li { margin-bottom:5px;} @media only screen and (max-width:640px) { #quality .recipe img { margin:0 auto 20px ; max-width:100%;} #quality .recipe-data { float:none; width:100%; padding:5px;} #quality .recipe-data dl { float:none; width:100%; margin:0;} #quality .recipe-data dl.ingredients2 { float:none; width:100%; margin:0 0 40px 0;} #quality .directions { margin:25px 0 10px 0;} } /* プロ専門の商品開発 ---------------------------------------------------------------------- */ #pioneer { } #pioneer .inbox{} #pioneer .develop-img { float:left; margin-right:20px;} #pioneer .develop { float:right; width:62.5%;} #pioneer .develop ul { width:100%;} #pioneer .develop ul li { padding:5px 0 5px 12px; background:url(images/ico_cir.png) no-repeat left 12px; border-bottom:1px solid #EEE;} @media only screen and (max-width:999px) { #pioneer .inbox{display:-webkit-box; display: -webkit-flex; display:-ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;} #pioneer .develop-img { float:none; width:100%; margin-right:0; -webkit-box-ordinal-group:2; -ms-flex-order:2; -webkit-order:2; order:2;} #pioneer .develop-img img { display:block; width:60%; margin:0 auto; } #pioneer .develop { float:none; width:100%; margin-bottom:20px; -webkit-box-ordinal-group:1; -ms-flex-order:1; -webkit-order:1; order:1;} } @media only screen and (max-width:640px) { #pioneer .develop-img img { width:100%;} } /* 国内加工による品質管理 ---------------------------------------------------------------------- */ #kanri .process { margin-bottom:60px; text-align:center; } #kanri .process table { border-top:1px solid #4f4d47; border-right:1px solid #4f4d47; border-spacing:0; margin:0 auto; } #kanri .process thead th { text-align:center;} #kanri .process th, #kanri .process td { border-bottom:1px solid #4f4d47; border-left:1px solid #4f4d47; padding:5px; } #kanri .process th { background-color:#EEE; } @media only screen and (max-width:640px) { } #kanri .room { width:25%; float:left; padding:0 30px 0 30px; margin-bottom:20px;} #kanri .room h4 { font-size:19px; margin:10px auto 12px auto; padding:1px 0 1px 15px; background:url(images/state_h3.gif) no-repeat left top;} #kanri .room h4 small { font-size:14px;} @media only screen and (max-width:640px) { #kanri .room { width:98%; float:none; } } #kanri .control { } #kanri .control h4 { background:url(images/h3_bg.gif); padding:10px 0 6px 16px; margin-bottom:15px; } #kanri .control .control_box { width:50%; float:left; padding:0 40px 0 40px; } #kanri .control ul { margin:0 0 30px 5px;} #kanri .control ul li { margin-bottom:5px; background:url(images/ico_cir.png) no-repeat left 9px; padding:2px 0 2px 12px;} #kanri .control .control-img img { display:block; margin:10px auto 30px auto;} @media only screen and (max-width:640px) { #kanri .control .control_box { width:100%; padding:0; float:none;} } #kanri .motto { } #kanri .motto h5 { padding:0; margin-bottom:20px; font-size:32px; font-weight:normal; text-align:center; letter-spacing:0.1em; line-height:1.2; } #kanri .motto img { float:right; max-width:50%; } @media only screen and (max-width:999px) { #kanri .motto h5 { font-size:23px; margin-bottom:18px;} } @media only screen and (max-width:640px) { #kanri .motto img { float:none; margin:0 auto 15px auto; max-width:100%; } } /* お客様目線のメニュー提案 ---------------------------------------------------------------------- */ #proposal .alignleft, #proposal .alignright { width:49%; text-align:center;} #proposal .alignleft img, #proposal .alignright img { margin-bottom:5px;} @media only screen and (max-width:640px) { #proposal .alignleft, #proposal .alignright { width:100%;} } #proposal .recipe { clear:both; } #proposal .recipe ul li { width:30%; margin:0 1.5% 20px 1.5%; float:left; text-align:center; } #proposal .recipe ul li img { margin-bottom:5px; } #proposal .recipe:after, #proposal .recipe ul:after { content:" "; display:block; clear:both;} @media only screen and (max-width:640px) { #proposal .recipe ul li { width:100%; margin:0 auto 20px auto; float:none; text-align:center; } } /* シェフ目線の缶詰開発 ---------------------------------------------------------------------- */ #canned .alignleft, #canned .alignright { width:49%; text-align:center;} #canned .alignleft img, #canned .alignright img { } @media only screen and (max-width:640px) { #canned .alignleft, #canned .alignright { float:none; width:100%; margin-bottom:20px;} } /* オリジナルブランド ---------------------------------------------------------------------- */ #original .naka { text-align:center;} #original .naka img{ margin-bottom:15px;} @media only screen and (max-width:640px) { #original .tate { font-size:19px;} } /* お取引までの流れ ---------------------------------------------------------------------- */ #flow .flowbox { width:100%; text-align:left; margin:8px auto 0 auto; padding:0 70px 32px 70px; background:url(images/flow_arrow.gif) no-repeat 220px bottom;} #flow .flowbox:after { content:" "; display:block; clear:both;} #flow .flowbox .flow_img { float:left; width:36%; padding:0;} #flow .flowbox .flow_img img { max-width:100%;} #flow .flowbox .flow_txt { float:right; width:62%;} #flow .flowbox .flow_txt h4 { background:url(images/h3_bg.gif); padding:10px 0 6px 16px; margin-bottom:15px; } #flow .last { background:none;} @media only screen and (max-width:640px) { #flow .flowbox { width:98%; margin:0 auto 30px auto; padding:0; padding-bottom:32px; background:url(images/flow_arrow.gif) no-repeat center bottom; display:-webkit-box; display: -webkit-flex; display:-ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;} #flow .flowbox .flow_img { float:none; width:100%; padding:0; float:none; -webkit-box-ordinal-group:2; -ms-flex-order:2; -webkit-order:2; order:2;} #flow .flowbox .flow_img img { display:block; width:100%; margin:0 auto 20px auto; } #flow .flowbox .flow_txt { float:none; width:100%; -webkit-box-ordinal-group:1; -ms-flex-order:1; -webkit-order:1; order:1;} #flow .last { background:none;} } /* スタッフ紹介 ---------------------------------------------------------------------- */ #staff .staff-group { margin-bottom:25px;} #staff .staffbox { width:47%; margin:0 0 20px 3%; padding-bottom:20px; float:left; text-align:left; border-bottom:1px dashed #CCCCCC; } #staff .staffbox h4 { margin:0 0 10px 0; padding:0; font-size:21px;} #staff .staffbox img { max-width:28%; float:left; margin-right:2%; } #staff .stafftxt { width:70%; float:right;} #staff dl{ width:100%; text-align:left; font-size:13px; line-height:1.2; } #staff dt{ clear:left; display:block; float:left; width:18%; min-width:50px; padding:4px 0 2px 0; text-align:center; background:#ddd; letter-spacing:0.2em; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:2px solid #fff; dispay:inline-block; position:relative; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:90%; color:#555;} #staff dt:before { content:""; display:inline-block; border:5px solid transparent; border-left-color:#ddd; position:absolute; right:-10px; top:50%; margin-top:-5px;} #staff dd{ display:block; width:82%; float:left; padding:4px 0 0 12px;} #staff .staffbox:after, #staff dl:after { content:" "; display:block; clear:both;} @media only screen and (min-width:641px) { #staff .boxt .tate { width:15.625%; padding-right:90px; float:left; text-align:top; font-size:25px; line-height:1.6; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; -webkit-text-orientation:upright; -ms-text-orientation:upright; text-orientation:upright; } } @media only screen and (max-width:640px) { #staff .staffbox { width:100%; margin:0 auto 20px auto; float:none; } #staff dt{ width:18%; min-width:38px; } #staff dd{ display:block; width:82%; } } /* Entry Header ---------------------------------------------------------------------- */ .post .entry-thumbnail img { display:block; margin:0 auto 10px;} .post .entry-header { margin-bottom:10px;} .post .entry-title { font-size:26px; font-weight:bold; margin:0 0 5px; color:#202020; background:none;} .post .entry-title a { color:#141412;} .post .entry-title a:hover { color:#ea9629;} @media only screen and (max-width:640px) { .post .entry-title { font-size:20px;} } /** * カテゴリー、一覧 * ---------------------------------------------------------------------------- */ .archive-header { width:100%; max-width:950px; margin:0 auto;} .archive-meta { } .archive-header h1.archive-title { margin-bottom: 30px; padding: 10px 20px; color: #183169; font-size: 25px; font-weight: normal; letter-spacing: 0.1em; background: url(images/h3_bg.gif);} .archive-header h1.archive-title a.url { position:static; margin:0; padding:0; background:none; font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif ; letter-spacing:0.1em; } #archive-content { padding:0; margin-bottom:30px;} #archive-content:after { content:" "; display:block; clear:both;} /*　スタッフブログ ---------------------------------------------------------------------- */ #blog { background:#F8F8F8;} #blog #main { clear:both; width:100%; max-width:1280px; margin:0 auto 50px auto;} #blog #main .content-area { float:left; width:100%; max-width:950px; margin:0;} #blog article { width:100%; padding:50px; background:#FFF;} #blog .entry-title { padding: 0 0 20px 0; margin-bottom: 20px; font-size: 36px; font-weight: normal; text-align: center; letter-spacing: 0.1em; line-height: 1.2; background: url(images/h2_bg.png) no-repeat center bottom; border:none;} #blog .entry-title a { text-decoration:none;} #blog .entry-meta { text-align:right;} #blog .entry-meta a { color: #333;} #blog .entry-meta a;hover { text-decoration:underline;} @media only screen and (max-width:1200px) { #blog #main .content-area { float:none; } #blog article { width:100%; padding:50px 20px; background:#FFF;} #blog #main .sidebar-container { width:100%; } } @media only screen and (max-width:1200px) { #blog .entry-content img { float:none !important; display:block; margin:10px auto; } } /* メールフォーム ---------------------------------------------------------------------- */ div.telbox { width:100%; padding:23px 20px 23px 70px; margin:5px auto 40px auto; font-size:16px; line-height:1.1; background:url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/ico_tel.gif) no-repeat 25px center; border:2px solid #005BAC; overflow:hidden;} div.telbox strong { margin-right:12px;} div.telbox span.tel { font-weight:bold; font-size:150%;} @media only screen and (max-width:480px){ div.telbox { padding:15px 5px 15px 45px; margin:15px auto 15px auto; font-size:16px; line-height:1.1; background:url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/ico_tel_sp.gif) no-repeat 7px center; border:2px solid #005BAC; overflow:hidden;} div.telbox strong { display:none;} div.telbox span.tel { font-size:100%; color:#0059BC;} div.telbox span.time { font-size:80%;} div.telbox span.pc-txt { display:none;} } div.mailbox { margin:5px auto 35px auto; padding:0 20px 30px 20px; border:2px solid #005BAC; background:url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/ico_mail.gif) no-repeat 20px 30px;} div.mailbox p { text-align:left; padding:27px 0 0 60px;} div.mailbox p img { margin:2px 5px 0 0;} div.mailbox span.mark-need { width:25px; height:15px; padding-left:3px; padding-right:3px; margin-right:5px; color:#FFF; font-size:11px; background:#D73737;} .mw_wp_form table { width:100%; border-left:none;} .mw_wp_form table th { width:180px; padding:10px; border-right:none; font-weight:bold!important;} .mw_wp_form table th.need { background:#F3F3F3 url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/mark_hissu.gif) no-repeat 95% center;} .mw_wp_form table td { padding:10px 10px 0 10px; border-right:none;} .mw_wp_form table p { margin:0; padding:0 0 10px 0;} .mw_wp_form table input[type=text] { width:500px;} .mw_wp_form table textarea { width:500px;} @media only screen and (max-width:640px){ .mw_wp_form table { width:100%;} .mw_wp_form table th, .mw_wp_form table td { display:list-item; list-style:none;} .mw_wp_form table th { width:100%; border-bottom:none;} .mw_wp_form table td { padding:10px 0 20px 0;} .mw_wp_form table input[type=text] { width:100%;} .mw_wp_form table textarea { width:100%;} } div#policy h3 { padding:30px 0 5px 0; font-size:16px;} div#policy p { padding:10px; border:2px solid #999; background:#FFC;} div#policy_check { text-align:center; font-size:18px;} div#policy_check input { padding:5px;} #confirm-agree { text-align:center;} #confirm-agree p { margin:10px auto; padding:0;} #confirm-agree span.mwform-checkbox-field .mwform-checkbox-field-text { padding-left:10px; font-weight:bold; font-size:16px;} #confirm-btn input[type=submit] { background:#FF7F00 url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/arrow_01.png) no-repeat 30px center; border:1px solid #FF7F00; border-radius:5px; color:#fff; font-size:18px; letter-spacing:5px; font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; margin-top:10px; margin-right:10px; padding:7px 45px 6px 65px; text-decoration:none; text-align:center; } #confirm-btn input[type=submit]:hover { background:#FFA851 url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/arrow_01.png) no-repeat 30px center;} #return-btn input[type=submit] { background:#777 url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/arrow_02.png) no-repeat 20px center; border:1px solid #777; border-radius:5px; color:#fff; font-size:18px; letter-spacing:5px; font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; margin-top:-50px; margin-right:10px; padding:7px 20px 6px 45px; text-decoration:none; text-align:center; } #return-btn input[type=submit]:hover { background:#999 url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/arrow_02.png) no-repeat 20px center; cursor:pointer;} @media only screen and (max-width:480px){ #confirm-btn input[type=submit], #confirm-btn input[type=submit]:hover, #return-btn input[type=submit], #return-btn input[type=submit]:hover { font-size:15px!important; letter-spacing:0!important; margin-right:10px!important; padding:4px 5px 2px 25px!important; background-position:5px center!important;} } /** * 5.2 Entry Meta * ---------------------------------------------------------------------------- */ .hentry h2.entry-title { margin-top:30px; padding:15px 0 10px 0; margin-bottom:20px; font-size:24px; font-weight:bold; letter-spacing:0.05em; line-height:1.2; border-bottom:1px solid #CCC; } .hentry h2.entry-title:after { content:" "; display:block; clear:both;} .entry-meta { clear:both; font-size:14px;} .entry-meta a { color:#bc360a;} .entry-meta a:hover { color:#bc360a;} .entry-meta > span { margin-right:20px;} .entry-meta > span:last-child { margin-right:0;} .featured-post:before { content:"\f308"; margin-right:2px;} .entry-meta .date a:before { content:"\f303";} .comments-link a:before { content:"\f300"; margin-right:2px; position:relative; top:-1px;} .entry-meta .author a:before { content:"\f304"; position:relative; top:-1px;} .categories-links { color:#999;} .categories-links a { color:#999;} .categories-links a:first-child:before { content:"\f301"; color:#999;} .tags-links a:first-child:before { content:"\f302"; position:relative; top:-1px;} .edit-link a:before { content:"\f411"; position:relative; top:-1px;} .single-author .entry-meta .author, .sticky.format-standard .entry-meta .date, .sticky.format-audio .entry-meta .date, .sticky.format-chat .entry-meta .date, .sticky.format-image .entry-meta .date, .sticky.format-gallery .entry-meta .date { display:none;} /** * 5.3 Entry Content * ---------------------------------------------------------------------------- */ .entry-content { -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; word-wrap:break-word;} .entry-content h2 { font-size:20px;} .entry-content a, .comment-content a { } .entry-content a:hover, .comment-content a:hover { } .entry-content blockquote { font-size:24px;} .entry-content blockquote cite, .entry-content blockquote small { font-size:16px;} .entry-content img.alignleft, .entry-content .wp-caption.alignleft { margin-left:0;} .entry-content img.alignright, .entry-content .wp-caption.alignright { margin-right:0;} .entry-content hr { clear:both; height:0;} footer.entry-meta { margin-top:24px;} .format-standard footer.entry-meta { margin-top:0;} /* Page links */ .page-links { clear:both; margin:20px 0; font-size:16px; line-height:2.2; text-transform:uppercase;} .page-links a, .page-links > span { padding:5px 10px; background:#fff; border:1px solid #fff; text-decoration:none;} .format-status .entry-content .page-links a, .format-gallery .entry-content .page-links a, .format-chat .entry-content .page-links a, .format-quote .entry-content .page-links a, .page-links a { background:#e63f2a; border:1px solid #e63f2a; color:#fff;} .format-gallery .entry-content .page-links a:hover, .format-audio .entry-content .page-links a:hover, .format-status .entry-content .page-links a:hover, .format-video .entry-content .page-links a:hover, .format-chat .entry-content .page-links a:hover, .format-quote .entry-content .page-links a:hover, .page-links a:hover { background:#fff; color:#e63f2a;} .format-status .entry-content .page-links > span, .format-quote .entry-content .page-links > span { background:none;} .page-links .page-links-title { margin-right:20px; padding:0; background:transparent; border:none;} /* Mediaelements */ .hentry .mejs-mediaelement, .hentry .mejs-container .mejs-controls { background:#220e10;} .hentry .mejs-controls .mejs-time-rail .mejs-time-loaded, .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background:#fff;} .hentry .mejs-controls .mejs-time-rail .mejs-time-current { background:#ea9629;} .hentry .mejs-controls .mejs-time-rail .mejs-time-total, .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { background:#595959;} .hentry .mejs-controls .mejs-time-rail span, .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { border-radius:0;} /** * 5.5 Post Formats * ---------------------------------------------------------------------------- */ /* Aside */ .format-aside { background-color:#f7f5e7;} .blog .format-aside:first-of-type, .single .format-aside:first-of-type, .format-aside + .format-aside, .format-aside + .format-link, .format-link + .format-aside { box-shadow:inset 0 2px 2px rgba(173, 165, 105, 0.2);} .format-aside .entry-meta { margin-top:0;} .format-aside blockquote { font-size:100%; font-weight:normal;} .format-aside cite { font-size:100%; text-transform:none;} .format-aside cite:before { content:"\2014"; margin-right:5px;} /* Audio */ .format-audio { background-color:#db572f;} .format-audio .entry-title { font-size:28px; font-weight:bold;} .format-audio .entry-content:before { content:"\f109"; float:left; font-size:64px; position:relative; top:4px;} .format-audio .entry-content a, .format-audio .entry-meta a, .format-audio .entry-content a:hover, .format-audio .entry-meta a:hover { color:#fbfaf3;} .format-audio .audio-content { background:url(images/dotted-line.png) repeat-y left top; background-size:4px 4px; float:right; padding-left:35px; width:80%; width:-webkit-calc(100% - 85px); width:calc(100% - 85px); } .format-audio .wp-audio-shortcode { height:30px !important; margin:20px 0; max-width:400px !important;} .format-audio audio { max-width:100% !important; /* Avoid player width overflow. */} /* Chat */ .format-chat { background-color:#eadaa6;} .format-chat .entry-title { font-size:28px; font-weight:bold;} .format-chat .entry-meta a, .format-chat .entry-content a { color:#722d19;} .format-chat .entry-meta .date a:before { content:"\f108"; margin-right:2px;} .format-chat .entry-meta .author { display:none;} .format-chat .chat { margin:0;} .format-chat .chat .chat-timestamp { float:right; margin:5px 10px 0; color:#722d19; font-size:12px; font-weight:normal;} .format-chat .chat .fn { font-style:normal;} /* Gallery */ .format-gallery { background-color:#fbca3c;} .format-gallery .entry-header { margin-bottom:15px;} .format-gallery .entry-title { margin:0; font-size:50px; font-weight:400;} .format-gallery .entry-meta a, .format-gallery .entry-content a { color:#722d19;} /* Image */ .format-image .entry-title { font-size:28px; font-weight:bold;} .format-image .categories-links, .format-image .tags-links { display:none;} /* Link */ .format-link { background-color:#f7f5e7;} .blog .format-link:first-of-type, .single .format-link:first-of-type { box-shadow:inset 0 2px 2px rgba(173, 165, 105, 0.2); } .format-link .entry-header, .format-link .entry-content p:last-child { margin-bottom:0;} .format-link .entry-title { color:#ca3c08; display:inline; font:300 italic 20px "Source Sans Pro", Helvetica, sans-serif; margin-right:20px;} .format-link .entry-title a { color:#bc360a;} .format-link div.entry-meta { display:inline;} /* Quote */ .format-quote { background-color:#210d10;} .format-quote .entry-content, .format-quote .entry-meta { color:#f7f5e7;} .format-quote .entry-content blockquote { font-size:28px; margin:0;} .format-quote .entry-content a, .format-quote .entry-meta a, .format-quote .linked { color:#e63f2a;} .format-quote .entry-content cite a { border-bottom:1px dotted #fff; color:#fff;} .format-quote .entry-content cite a:hover { text-decoration:none;} .format-quote blockquote small, .format-quote blockquote cite { display:block; font-size:16px;} .format-quote blockquote { font-style:italic; font-weight:300; padding-left:75px; position:relative;} .format-quote blockquote:before { position:absolute; padding-right:25px; left:-15px; top:-3px; content:'\201C'; font-size:140px; font-weight:400; line-height:.8;} .format-quote .entry-meta .author { display:none;} /* Status */ .format-status { background-color:#722d19; padding:0;} .format-status .entry-content, .format-status .entry-meta { padding-left:35px; position:relative;} .format-status .entry-content a { color:#eadaa6;} .format-status .entry-meta a { color:#f7f5e7;} .sidebar .format-status .entry-content, .sidebar .format-status .entry-meta { padding-left:95px;} .format-status .entry-content:before, .format-status .entry-meta:before { width:1px; height:100%; left:10px; top:0; background:url(images/dotted-line.png) repeat-y left bottom; background-size:4px 4px; content:""; display:block; position:absolute;} .sidebar .format-status .entry-content:before, .sidebar .format-status .entry-meta:before { left:70px;} .format-status .categories-links, .format-status .tags-links { display:none;} /* Ensures the dots in the dot background are in lockstep. */ .format-status .entry-meta:before { background-position:left top;} .format-status .entry-content { color:#f7f5e7; font-size:24px; padding-bottom:30px; padding-top:40px; position:relative;} .format-status .entry-content p:first-child:before { width:13px; height:3px; margin-top:13px; left:4px; background-color:rgba(0, 0, 0, 0.65); content:""; position:absolute;} .sidebar .format-status .entry-content > p:first-child:before { left:64px;} .format-status .entry-content p:last-child { margin-bottom:0;} .format-status .entry-meta { margin-top:0; padding-bottom:40px;} .format-status .entry-meta .date a:before { content:"\f105";} /* Video */ .format-video { background-color:#db572f;} .format-video .entry-content a, .format-video .entry-meta a, .format-video .entry-content a:hover, .format-video .entry-meta a:hover { color:#fbfaf3;} .format-video .entry-title { font-size:50px; font-weight:400;} .format-video .entry-meta { color:#220e10;} /** * 5.6 Attachments * ---------------------------------------------------------------------------- */ .attachment .hentry { margin:0; padding:0; background-color:#e8e5ce;} .attachment .entry-header { max-width:1040px; padding:30px 0; margin-bottom:0;} .attachment .entry-title { margin:0; float:left; display:inline-block; font:italic 30px "Source Sans Pro", Helvetica, sans-serif;} .attachment .entry-title:before { content:"\f416"; font-size:32px; margin-right:10px;} .attachment .entry-meta { clear:none; float:right; max-width:604px; padding:9px 0 0; color:inherit; text-align:right;} .hentry.attachment:not(.image-attachment) .entry-meta { max-width:104px;} .attachment footer.entry-meta { display:none;} .attachment-meta:before { content:"\f307";} .full-size-link a:before { content:"\f402";} .full-size-link:before { content:none;} .attachment .entry-meta a, .attachment .entry-meta .edit-link:before, .attachment .full-size-link:before { color:#ca3c08;} .attachment .entry-content { background-color:#fff; max-width:100%; padding:40px 0;} .image-navigation { margin:0 auto; max-width:1040px; position:relative;} .image-navigation a:hover { text-decoration:none;} .image-navigation .nav-previous, .image-navigation .nav-next { position:absolute; top:50px;} .image-navigation .nav-previous { left:0;} .image-navigation .nav-next { right:0;} .image-navigation .meta-nav { font-size:32px; font-weight:300; vertical-align:-4px;} .attachment .entry-attachment, .attachment .type-attachment p { margin:0 auto; max-width:724px; text-align:center;} .attachment .entry-attachment .attachment { display:inline-block;} .attachment .entry-caption { text-align:left;} .attachment .entry-description { margin:20px auto 0; max-width:604px;} .attachment .entry-caption p:last-child, .attachment .entry-description p:last-child { margin:0;} .attachment .site-main .sidebar-container { display:none;} .attachment .entry-content .mejs-audio { max-width:400px; margin:0 auto;} .attachment .entry-content .wp-video { margin:0 auto;} .attachment .entry-content .mejs-container { margin-bottom:24px;} /** * 5.7 Post/Paging Navigation * ---------------------------------------------------------------------------- */ .paging-navigation, .post-navigation { clear:both; padding:0 0 50px 0; } .paging-navigation .nav-links, .post-navigation .nav-links { margin:0 auto; width:100%;} .paging-navigation .meta-nav { } .paging-navigation a:hover .meta-nav { } .paging-navigation a[rel="next"], .post-navigation a[rel="next"] { float:right; text-align:right;} .paging-navigation .nav-list, .post-navigation .nav-list{ clear:both; height:24px; text-align:center; background:url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/line-solid.gif) repeat-x center 50%;} .paging-navigation:after, .post-navigation:after { content:" "; display:block; clear:both;} /** * 5.8 Author Bio * ---------------------------------------------------------------------------- */ .author-info { width:100%; margin:0 auto; max-width:604px; padding:30px 0 10px; text-align:left;} .author.sidebar .author-info { max-width:1040px; padding:30px 376px 10px 60px;} .single .author-info { padding:50px 0 0;} .author-avatar .avatar { float:left; margin:0 30px 30px 0;} .single-format-status .author-description { color:#f7f5e7;} .author-description .author-title { clear:none; margin:0 0 8px; font:300 italic 20px "Source Sans Pro", Helvetica, sans-serif;} .author-link { color:#ca3c08; margin-left:2px;} .author.archive .author-link { display:none;} /** * 5.10 Search Results/No posts * ---------------------------------------------------------------------------- */ .page-header { background-color:#e8e5ce;} .page-title { font:italic 30px; width:100%; margin:0 auto; padding:30px 0;} .page-content { width:100%; margin:0 auto; padding:40px 0;} .sidebar .page-content { margin:0 auto; padding:40px 376px 40px 60px;} /** * 5.12 Comments * ---------------------------------------------------------------------------- */ .comments-area { margin:30px auto; width:100%;} .comments-title, .comment-list, .comment-reply-title, .must-log-in, .comment-respond .comment-form, .comment-respond iframe { display:block; width:100%; margin-left:auto; margin-right:auto;} .sidebar .comments-title, .sidebar .comment-list, .sidebar .must-log-in, .sidebar .comment-reply-title, .sidebar .comment-navigation, .sidebar .comment-respond .comment-form { padding-left:30px; padding-right:30px;} .comments-title { font-size:16px; background:url(http://www.bras-de-chef.jp/wp/wp-content/themes/twentythirteen/images/ico_balloon.png) no-repeat left top; padding:3px 0 5px 0; font-weight:normal;} .comment-list, .comment-list .children { list-style-type:none; padding:0;} .comment-list .children { margin-left:20px;} .comment-list > li:after, .comment-list .children > li:before { width:100%; height:1px; display:block; background:url(images/dotted-line.png) repeat left top; background-size:4px 4px; content:"";} .comment-list > li:last-child:after { display:none;} .comment-body { padding:24px 0; position:relative;} .comment-author { float:left; max-width:74px;} .comment-author .avatar { display:block; margin-bottom:10px;} .comment-author .fn { word-wrap:break-word;} .comment-author .fn, .comment-author .url, .comment-reply-link, .comment-reply-login { color:#bc360a; font-size:14px; font-style:normal; font-weight:normal;} .says { display:none;} .no-avatars .comment-author { margin:0 0 5px; max-width:100%; position:relative;} .no-avatars .comment-metadata, .no-avatars .comment-content, .no-avatars .comment-list .reply { width:100%;} .bypostauthor > .comment-body .fn:before { content:"\f408"; vertical-align:text-top;} .comment-list .edit-link { margin-left:20px;} .comment-metadata, .comment-awaiting-moderation, .comment-content, .comment-list .reply { float:right; width:79%; width:-webkit-calc(100% - 124px); width:calc(100% - 124px); word-wrap:break-word;} .comment-meta, .comment-meta a { font-size:13px;} .comment-meta a:hover { } .comment-metadata { margin-bottom:20px;} .ping-meta { color:#a2a2a2; font-size:13px; line-height:2;} .comment-awaiting-moderation { color:#a2a2a2;} .comment-awaiting-moderation:before { content:"\f414"; margin-right:5px; position:relative; top:-2px;} .comment-reply-link:before, .comment-reply-login:before { content:"\f412"; margin-right:3px;} /* Comment form */ .comment-respond { background-color:#F5F3ED; padding:30px 0;} .comment .comment-respond { margin-bottom:20px; padding:0px;} .comment-reply-title { font-size:16px; padding:3px 0 5px 0; } .comment-reply-title small a { width:16px; height:16px; float:right; display:inline-block; overflow:hidden;} .comment-reply-title small a:hover { text-decoration:none;} .comment-reply-title small a:before { content:"\f406"; vertical-align:top;} .sidebar .comment-list .comment-respond .comment-form { padding:0;} .comment-form .comment-notes { margin-bottom:15px;} .comment-form .comment-form-author, .comment-form .comment-form-email, .comment-form .comment-form-url { margin-bottom:8px;} .comment-form [for="author"], .comment-form [for="email"], .comment-form [for="url"], .comment-form [for="comment"] { width:120px; float:left; padding:5px 0;} .comment-form .required { } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { max-width:270px; width:60%;} .comment-form textarea { width:100%;} .form-allowed-tags, .form-allowed-tags code { color:#686758; font-size:12px;} .form-allowed-tags code { font-size:10px; margin-left:3px;} .form-submit { text-align:center;} .comment-list .pingback, .comment-list .trackback { padding-top:24px;} .comment-navigation { width:100%; max-width:604px; margin:0 auto; padding:20px 0 30px; font-size:20px; font-style:italic; } .no-comments { margin:0; padding:40px 0; background-color:#f7f5e7; font-size:20px; font-style:italic; text-align:center;} .sidebar .no-comments { padding-left:60px; padding-right:376px;} /** * 5.13 Multisite * ---------------------------------------------------------------------------- */ .site-main .mu_register { width:100%; max-width:604px; margin:0 auto;} .mu_alert { margin-top:25px;} .site-main .mu_register input[type="submit"], .site-main .mu_register #blog_title, .site-main .mu_register #user_email, .site-main .mu_register #blogname, .site-main .mu_register #user_name { font-size:inherit; width:270px;} .site-main .mu_register input[type="submit"] { width:auto;} /** * Footer * ---------------------------------------------------------------------------- */ .site-footer { clear:both; width:100%; margin:0 auto; padding:70px 0 30px 0; text-align:center; color:#fff; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #blog .site-footer { clear:both; width:100%; margin:0 auto; padding:20px 0; text-align:center; color:#fff; font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background:#000;} .foot { max-width:1280px; margin:0 auto;} .foot a { color:#FFF; text-decoration:none;} .foot a:visited { color:#FFF;} .foot a:focus { outline:none ; } .foot a:hover { text-decoration:underline; opacity:0.8; filter:alpha(opacity=80);} .site-footer .foot-nav1 { width:32.8125%; float:left; } .site-footer .foot-nav2 { width:15.625%; float:left; } .site-footer .foot-nav3 { width:16.40625%; float:left; } .site-footer ul { } .site-footer ul li { text-align:left; font-weight:bold; font-size:13px; background:url(images/foot_li.png) no-repeat left 5px; padding-left:10px; margin:0 0 20px 0; } .site-footer ul li ul li { width:190px; float:left; text-align:left; font-weight:normal; font-size:12px; background:url(images/foot_li_li.png) no-repeat left 8px; margin:10px 0 0 0; } .site-footer a:link, .site-footer a:visited { color:#fff; text-decoration:none; } .site-footer a:hover { text-decoration:underline; } .site-info { width:28.90625%; float:right; text-align:left; letter-spacing:0; } .site-info h3 { font-size:17px; margin-bottom:0.7em; } .site-info p { font-size:12px; } .site-info .copyright { font-size:10px; } .site-footer:after, .site-footer ul:after { content:" "; display:block; clear:both; } @media only screen and (max-width:1279px) { .foot { width:98%; margin:0 auto;} } @media only screen and (max-width:640px) { .foot { width:96%; margin:0 auto;} .site-footer { clear:both; width:100%; margin:0 auto; padding:10px 0 10px 0; } .site-footer ul li { width:100%; text-align:left; font-weight:bold; font-size:13px; background:url(images/foot_li.png) no-repeat 10px 14px; padding-left:23px; margin:0; border-bottom:1px dotted #666; } .site-footer ul li a { padding:10px 0 7px 0; display:block;} .site-footer ul li ul li { width:100%; float:none; border-top:1px dotted #666; border-bottom:none; background:url(images/foot_li_li.png) no-repeat left 14px; margin:0; padding-left:10px; } .site-footer ul li ul li a{ padding:10px 0 7px 0; display:block;} .site-info { width:100%; text-align:center; } .site-footer .foot-nav1 { width:100%; float:none; } .site-footer .foot-nav2 { width:100%; float:none; } .site-footer .foot-nav3 { width:100%; float:none; } .site-info { width:100%; float:none; padding-top:20px; } } /* ページ先頭へ------------------------------------------------ */ #pagetop { position:fixed; bottom:6px; right:6px;} #pagetop a { border:1px solid #888; background-color:rgba(255,255,255,0.2); width:40px; height:40px; text-align:center; display:block; font-size:25px; color:#888; text-decoration:none;} #pagetop a:hover { text-decoration:none; color:#F33; border:1px solid #F33;} @media screen and (max-width:640px){ #pagetop { display:none;} #pagetop a { display:none;} }