@charset "utf-8"; /* ▼ まず始めに 1. カラー変更以下の初期色をサイトに合わせて変更しよう！ローカルサイト全体を「#xxx」＆「xx,xx,xx」で「検索・置換」してOK！（#付で検索必須！） #333 （51,51,51）　　　⇒ 基本的な文字色 #1a1a1a（26,26,26）　　⇒ 見出しの色 #ccc（204,204,204）　　⇒ ボーダー色 #f2f2f2（242,242,242） ⇒ ボーダー色より薄い背景に使用する色 #f00（255,0,0）　　　　⇒ メインカラー 2. 角丸の値角丸の値を3pxで統一しているので、もっと丸くしたい場合はこのCSS内で「radius」で「検索」し、好きな値に変更しよう。 3. グリッドの余白 .container = 960pxの余白20pxで作ってあるので、 .container = 972pxの余白30pxに変更する場合は、 Templates.dwtののclassを .grid-960 ⇒ .grid-972 に変更しよう。 */ /*----------------------------------------*---------------------------------------- composition ----------------------------------------*----------------------------------------*/ html { font-size: 10px; } body { color: #454545; font-family: 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1.5rem; font-weight:500; line-height: 1.5; } /*----------------------------------------*---------------------------------------- common ----------------------------------------*----------------------------------------*/ @media all and (max-width: 767px) { #contents h1{ color:#0077c5; } #contents h1 span{ color:#ee6f04; font-size:1.6rem; } } @media screen and (min-width: 768px) { #contents h1{ color:#0077c5; font-size:3.2rem; font-family:'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight:600; line-height:2.6rem!important; margin-bottom:40px; text-align:center; } #contents h1 span{ color:#ee6f04; font-size:1.6rem; font-weight:600; font-family: 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-style: normal; padding:0 !important; } #contents h2{ text-align:center; font-weight:600; } } /*----------------------------------------*---------------------------------------- header ----------------------------------------*----------------------------------------*/ #header .container { position: relative; } @media all and (max-width: 767px) { #header { padding-bottom: 10px; } #header .container { padding-top: 10px; } } @media screen and (min-width: 768px) { #header { display:block; position:absolute; top:16px; left:50px; } } /*---------------------------------------- logo ----------------------------------------*/ .logo { display:block; background: url(../img/logo.gif) no-repeat left center; background-size: contain; } @media all and (max-width: 1280px) { .logo { position: relative; width: 141px; height: 38px; top:5px; margin:8px auto 20px auto ; } .logo a { height: 38px; } } @media screen and (min-width: 1281px) { .logo { position:absolute; width: 141px; height: 38px; margin-top:15px; margin-left:20px; } .logo a { height: 38px; } } /*---------------------------------------- googleTranslate ----------------------------------------*/ .googleTranslate { display:block; width:auto; background: rgba(242,242,242,.75); padding: 5px 10px; display: table; z-index: 99; } .googleTranslate i { background: #0077c5; width: 17px; height: 17px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; line-height: 17px; margin-right: 5px; color: #fff; } .googleTranslate i:before { line-height: 1; } .googleTranslate_title { padding-right: 10px; font-size: 1.2rem; line-height: 1; } .googleTranslate_title, #google_translate_element { display: table-cell; vertical-align: middle; } @media all and (max-width: 767px) { .googleTranslate { position:relative; width:100%; } } @media all and (min-width: 768px) and (max-width: 1280px) { .googleTranslate { position:relative; width:100%; } } @media screen and (min-width: 1281px) { .googleTranslate { position: absolute; top: 10px; right:20px; } } /*---------------------------------------- toggleBtn ----------------------------------------*/ @media all and (max-width: 767px) { #header .toggleBtn { position: absolute; display: table; color: #fff; background: #c00; } #header .toggleBtn span { display: table-cell; vertical-align: middle; text-align: center; font-size: 1rem; } #header .toggleBtn i { display: block; } #header .toggleBtn--open i:before { content: "\f0c9"; } #header .toggleBtn--opened i:before { content: "\f00d"; } /* large */ #header .toggleBtn--large { top: 0; right: 0; width: 60px; height: 60px; } #header .toggleBtn--large i:before { font-size: 3rem; } /* small */ #header .toggleBtn--small { top: 10px; right: 10px; width: 40px; height: 40px; } #header .toggleBtn--small i:before { font-size: 1.7rem; } } @media screen and (min-width: 768px) { #header .toggleBtn { display: none; } } /*----------------------------------------*---------------------------------------- globalNav スタイルが複雑なのでPCとスマホを完全に分けています。 #globalNav = 通常のグローバルナビ #globalNavSticky = 固定表示を使用する場合の固定表示されたグローバルナビ .globalNav = #globalNav,#globalNavSticky共通のスタイル ----------------------------------------*----------------------------------------*/ .globalNav a { display: block; text-decoration: none; transition: all .2s linear; color:#ee6f04; } /*---------------------------------------- common ----------------------------------------*/ @media all and (max-width: 767px) { #globalNav .container { padding: 0; } #globalNav a { padding: 10px; position: relative; } #globalNav a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #globalNav .menu--active > a { text-decoration: none; font-weight:bold; } #globalNav .dropdown:not(.dropdown-pc) > a:before { color: #FFF; content: "\f107"; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; } /* menu--primary */ #globalNav .menu--primary + .menu--primary { border-top: 1px solid #dddddd; } #globalNav .menu--primary > a { color: #ee6f04; background: #FFF; } #globalNav .menu--primary.dropdown:not(.dropdown-pc) > a:before { background: #e53327 } .globalNav .menu--primary a span{ font-size:1.2rem; font-weight:normal !important; padding-left:10px; color:#454545; } /* dropdown */ #globalNav .dropdownNav { display: none; } #globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; } #globalNav .menu--secondary a { background: #fff; color: #333; font-size:1.2rem; } #globalNav .menu--secondary.dropdown:not(.dropdown-pc) > a:before { background: #ccc; } #globalNav ul.clearfix .dropdown > a.menu--opened:before { content: "\f106"; } #globalNav .dropdownNav .dropdownNav a { background: #FFF; } /* col */ #globalNav .menu--col6-sp:nth-child(2) { border-top: none; } #globalNav .menu--col6-sp:nth-child(2n), #globalNav .menu--col6-sp + .menu--col6-sp, #globalNav .menu--col4-sp + .menu--col4-sp, #globalNav .menu--col3-sp + .menu--col3-sp, #globalNav .menu--col8-sp + .menu--col4-sp, #globalNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #1a1a1a; } } @media screen and (min-width: 768px) { .globalNav { background: #FFF; margin-top:-1px; } /* menu--primary */ .globalNav .menu--primary { float: left; } .globalNav .menu--primary > a { text-align:center; padding:10px 0; font-family:"Arial Black", 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size:2.0rem; font-style:italic; } .globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active > a { background:#ee6f04; color:#FFF; } .globalNav .menu--primary > a:hover span, .globalNav .menu--primary.menu--active > a span { color:#656565; } .globalNav .menu--primary a span{ display:block; color:#999999; font-family:'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif i; font-size:1.3rem !important; font-style:normal !important; } /* dropdown */ .globalNav .dropdown { position: relative; z-index: 10; font-size: 1.3rem; } .globalNav .dropdownNav { display: none; position: absolute; top: 70px; left: 0; background: #f2f2f2; width: 235px; z-index: 11; } .globalNav .menu--primary:last-child .dropdownNav { left: auto; right: 0; } .globalNav .dropdown:hover > .dropdownNav { display: block; } .globalNav .menu--secondary.dropdown > a:before { background: #ccc; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; margin-top: -10px; } .globalNav .dropdownNav .dropdownNav { top: 0; left: 200px; z-index: 12; } /* menu--secondary */ .globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; } .globalNav .menu--secondary a { position: relative; padding: 10px; transition: all .2s linear; color: #333; } .globalNav .menu--secondary a:hover, .globalNav{ background: #FFF; } .globalNav .menu--secondary a:before { font-family: "FontAwesome"; content: "\f105"; position: absolute; top: 50%; right: 15px; margin-top: -.5em; line-height: 1; } /*---------------------------------------- globalNav ----------------------------------------*/ #globalNav .menu--company { width: 235px; } #globalNav .menu--about { width: 235px; } #globalNav .menu--products { width: 235px; } #globalNav .menu--contact{ width: 235px; } /* a */ #globalNav .menu--primary > a { height: 70px; } } /*----------------------------------------*---------------------------------------- toggleNav ----------------------------------------*----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .toggleNav_contents { display: none; } #toggleNav .toggleNav_block { padding: 10px; background: #fff; } #toggleNav .toggleNav_block + .toggleNav_block { border-top: 1px solid #ccc; } #toggleNav .menu { text-align: left; } } /*---------------------------------------- toggleNav_btn ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .toggleNav_btn { background: #ee6f04; color: #fff; position: relative; padding: 10px; } #toggleNav .toggleNav_btn:before, #toggleNav .toggleNav_btn:after { font-family: "FontAwesome"; line-height: 1; } #toggleNav .toggleNav_btn--open:before { margin-right: 1em; content: "\f0c9"; } #toggleNav .toggleNav_btn--close:after { content: "\f00d"; margin-left: 1em; } #toggleNav .toggleNav_btn--opened:before { content: "\f00d"; margin-right: 1em; } } @media screen and (min-width: 768px) { #toggleNav .toggleNav_btn { display: none; } } /*---------------------------------------- subNav ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .subNav .menu + .menu { border-top: 1px solid #ccc; } #toggleNav .subNav a { display: block; text-decoration: none; background: #f2f2f2; position: relative; padding: 10px; color: #333; font-size: 1.4rem; } #toggleNav .subNav a:before { position: absolute; top: 50%; right: 15px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #toggleNav .subNav .menu--active a { text-decoration: underline; } /* col */ #toggleNav .subNav .menu--col6-sp:nth-child(2) { border-top: none; } #toggleNav .subNav .menu--col6-sp:nth-child(2n), #toggleNav .subNav .menu--col6-sp + .menu--col6-sp, #toggleNav .subNav .menu--col4-sp + .menu--col4-sp, #toggleNav .subNav .menu--col3-sp + .menu--col3-sp, #toggleNav .subNav .menu--col8-sp + .menu--col4-sp, #toggleNav .subNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #ccc; } } /*---------------------------------------- info ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .shop + .shop { border-top: 1px dotted #ccc; margin-top: 10px; padding-top: 10px; } #toggleNav .shop_tel { font-weight: bold; line-height: 1; } #toggleNav .phone-sp { font-size: 3.5rem; } #toggleNav .shop_help { border-top: 1px dotted #ccc; margin-top: 5px; padding-top: 5px; } } /*---------------------------------------- social ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .socialArea, #toggleNav .socialArea .container { text-align: center; } #toggleNav .socialArea { border-bottom: 1px solid #ccc; } } /*----------------------------------------*---------------------------------------- side ----------------------------------------*----------------------------------------*/ #side { } /* side_nav_common */ .side_nav { margin-bottom: 20px; } .side_nav dt { } .side_nav dd { } .side_nav li { } .side_nav ul ul { margin-left: 20px; } .side_nav li li { } .side_nav a { } .side_nav a:hover { } .side_nav .on { } .side_nav strong { } /* side_nav */ #side_nav { } #side_nav dt { } #side_nav dd { } #side_nav li { } #side_nav li:first-child { } #side_nav a { } #side_nav a:hover { } #side_nav .on { } #side_nav strong { } /* side_bnr */ #side_bnr { } #side_bnr li { margin-bottom: 20px; } #side_bnr li:first-child { } /* cms */ #side .current-cat > a { color: #f00; } /*----------------------------------------*---------------------------------------- footerNav ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { #footerNav { position:relative; font-size: 1.3rem; text-align: left; } } @media print, screen and (min-width: 768px) { #footerNav { border-bottom:#cccccc 1px solid; } #footerNav ul { letter-spacing: -.4em; } #footerNav li { display: inline; float:left; width:235px; text-align:center; letter-spacing: normal; padding-top:15px!important; } #footerNav a { color:#ee6f04; text-decoration: none; font-family:"Arial Black", 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size:2.0rem; font-style:italic; } #footerNav a span{ display:block; color:#999999; font-family:'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif i; font-size:1.3rem !important; font-style:normal !important; padding-bottom: 15px; } #footerNav li:hover{ background:#ee6f04; } #footerNav li:hover > a { color:#FFF; } #footerNav li:hover > a span { color:#656565; } } /*----------------------------------------* footerNav logo ----------------------------------------*/ @media screen and (max-width: 767px) { #footerNav .logo { position: relative; display:block; text-align:center; margin:15px auto 0 auto !important; background: url(../img/logo.gif) no-repeat center center; background-size: contain; width: 100px; height: 26px; } #footerNav .logo a { width: 100px; height: 26px; } } @media screen and (min-width: 768px) and (max-width: 1280px) { #footerNav .logo { position: relative; display:block; text-align:center; margin:15px auto 20px auto !important; background: url(../img/logo.gif) no-repeat center center; background-size: contain; width: 100px; height: 26px; } #footerNav .logo a { width: 100px; height: 26px; } } @media print, screen and (min-width: 1281px) { #footerNav .logo { display:block!important; position:absolute!important; left:20px; width: 141px!important; height: 38px!important; margin:20px 0; } #footerNav .logo a { background: url(../img/logo.gif) no-repeat left center; background-size: contain!important; width: 141px; height: 38px; } } /*----------------------------------------* footer_bg ----------------------------------------*/ @media screen and (max-width: 767px) { #footer_bg{ background:url(../img/footer_bg.gif) center bottom repeat-x; background-size: contain; height:70px; } } @media print, screen and (min-width: 768px) { #footer_bg{ background:url(../img/footer_bg.gif) center bottom repeat-x; height:175px; } } /*----------------------------------------*---------------------------------------- copyright ----------------------------------------*----------------------------------------*/ #copyright { color:#454545; font-size: 1.2rem; padding: 15px 0; } /*----------------------------------------*---------------------------------------- pageTop ----------------------------------------*----------------------------------------*/ #pageTop { text-decoration: none; color: #ee6f04; text-align: center; } @media screen and (max-width: 1280px) { /* #pageTopを使う場合 */ body { padding-bottom: 5px; } #page_top{ width: 100%; border-top:#CCC 1px solid; } #pageTop { display:block; width: 100%; height: 40px; line-height: 40px; bottom: 0; left: 0; } } @media print, screen and (min-width: 1281px) { #pageTop { display:block; position: absolute; right: 40px; width: 180px; height: 35px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 1.5rem; padding:7px 10px 7px 0; margin-top:-163px; background: #FFF; } #pageTop:before { position: absolute; top: 50%; right: 15px; font-size: 1.4rem; margin-top: -.4em; font-family: "FontAwesome"; content: "\f062"; line-height: 1; } #pageTop:hover{ color:#fec89b; transition: all .2s linear; } } /*----------------------------------------*---------------------------------------- pageHeader ----------------------------------------*----------------------------------------*/ #pageHeader {background: #a3e5fe; } #pageHeader h1 { margin-bottom: 0; } @media screen and (max-width: 767px) { #pageHeader { padding: 10px 0; margin-bottom:40px; } #pageHeader h1 { color:#FFF; font-size:3.0rem; font-weight: bold; line-height:2.6rem; padding-top:5px; } #pageHeader h1 span{ color:#ee6f04; font-size:1.6rem; font-size:1.8rem; font-weight: bold; } #pageHeader + #contents { margin-top: 20px; } } @media print, screen and (min-width: 768px) { #pageHeader { height:200px; padding:75px 0 0 0; margin-bottom:80px !important; background:url(../img/pageHeader_bg.gif) center center no-repeat; } #pageHeader h1{ color:#FFF; font-size:4.2rem; font-family:"Arial Black", "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-style:italic; line-height:3.2rem!important; margin-bottom:40px; } #pageHeader h1 span{ color:#ee6f04; font-size:1.8rem; font-weight:600; font-family: 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-style: normal; } #pageHeader + #shortcut { margin-top: 20px; } #pageHeader + #contents { margin-top: 60px; } } /*----------------------------------------*---------------------------------------- shortcut ----------------------------------------*----------------------------------------*/ #shortcut { font-size: 1.3rem; } #shortcut a { color: #333; text-decoration: none; transition: all .2s linear; position: relative; } #shortcut a:before { font-family: "FontAwesome"; content: "\f107"; } @media all and (max-width: 767px) { #shortcut { text-align: left; margin-bottom: 20px; } #shortcut li + li { border-top: 1px solid #ccc; } #shortcut a { display: block; padding: 10px 15px; background: #f2f2f2; } #shortcut a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; line-height: 1; } #shortcut + #contents { margin-top: 20px; } } @media screen and (min-width: 768px) { #shortcut { margin-bottom: 40px; } #shortcut ul { letter-spacing: -.4em; } #shortcut li { display: inline; position: relative; letter-spacing: normal; } #shortcut li + li { margin-left: 20px; } #shortcut a:before { margin-right: 10px; } #shortcut a:hover { color: #f00; } #shortcut + #contents { margin-top: 60px; } } /*----------------------------------------*---------------------------------------- breadcrumb ----------------------------------------*----------------------------------------*/ @media all and (max-width: 767px) { #breadcrumb { display: none; } } @media screen and (min-width: 768px) { #breadcrumb { letter-spacing: -.4em; font-size: 1.3rem; margin-bottom: 40px; } #breadcrumb li { letter-spacing: normal; display: inline; } #breadcrumb li:before { font-family: "FontAwesome"; content: "\f105"; margin: 0 10px; } #breadcrumb li:first-child:before { content: ""; margin: 0; } #breadcrumb a { color: #333; text-decoration: none; } #breadcrumb a:hover, #breadcrumb a:active { text-decoration: underline; } }