@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） ⇒ ボーダー色より薄い背景に使用する色 #e62e2e（230,46,46）　　　　⇒ メインカラー 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: #554632; font-family: "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1.5rem; line-height: 1.5; } /*----------------------------------------*---------------------------------------- header ----------------------------------------*----------------------------------------*/ #header { background: url(../img/bg_garland.gif) top left repeat-x; } #header .container { position: relative; } @media all and (max-width: 767px) { #header { padding:20px 0; } #header .container { padding-top: 10px; } } @media screen and (min-width: 768px) { #header { height:180px; } #header .container { padding-top: 64px; } } /*---------------------------------------- logo ----------------------------------------*/ #header .logo { background: url(../img/logo.gif) no-repeat center center; background-size: contain; } @media all and (max-width: 767px) { #header .logo { display: block; margin:auto; height: 73px; width: 280px; } #header .logo a { height: 73px; } } @media screen and (min-width: 768px) { #header .logo { display: block; margin:auto; height: 78px; width: 300px; } #header .logo a { height: 78px; } } /*---------------------------------------- description ----------------------------------------*/ @media all and (max-width: 767px) { #header .description { display: none; } } @media screen and (min-width: 768px) { #header .description { font-size: 1.2rem; } #header .description--full { background: #f2f2f2; padding: 1px 0; } #header .description--inline { margin-top: 5px; } } /*---------------------------------------- nav ----------------------------------------*/ @media all and (max-width: 767px) { #header .nav { display: none; } } @media screen and (min-width: 768px) { #header .nav { float: right; font-size: 1.3rem; position: absolute; top: 32px; } #header .nav a{ font-family: 'Noto Sans Japanese', sans-serif; font-weight: 500; color:#fff; text-decoration:none; width:130px; height:35px; background:#808080; border:#CCC 1px solid; padding:6px 0 6px 10px; } #header .nav a:hover{ opacity:0.8; transition: all .2s linear; } .grid-960 #header .nav { right: 10px; } .grid-972 #header .nav { right: 15px; } #header .nav .menu, #header .nav .btn { float: left; } #header .nav_mail:after{ position: relative; top:0; font-family: "FontAwesome"; content:"\f003"; font-size:1.4rem; color:#fff; line-height:1; padding-left:15px; } #header .nav_news:after{ position: relative; top:0; font-family: "FontAwesome"; content:"\f028"; font-size:1.4rem; color:#fff; line-height:1; padding-left:35px; } /* nav--inline */ #header .nav--inline .menu + .menu { margin-left: 15px; padding-left: 15px; } #header .menu--active { text-decoration: underline; } /* nav--inline--social */ #header .nav--inline--social .menu { text-decoration: none; } /* nav--btn */ #header .nav--btn .btn + .btn { margin-left: 10px; } } /*---------------------------------------- contact ----------------------------------------*/ @media all and (max-width: 767px) { #header .contact { display: none; } } @media screen and (min-width: 768px) { #header .contact { position: absolute; top: 40px; text-align:center; margin-right:350px; font-family: 'Noto Sans Japanese', sans-serif; font-weight: 500; line-height:1.7rem; } .grid-960 #header .contact { right: 10px; } .grid-972 #header .contact { right: 15px; } #header .contact .tel{ font-size:2.4rem; padding-left:25px; } #header .contact .open{ display:block; font-size:1.1rem; text-align:center; margin-left:23px; } #header .contact .tel:before{ position: absolute; top: 12px; left: 0; margin-top: -.5em; font-family: "FontAwesome"; content:"\f095"; color:#e62e2e; line-height:1; } } /*---------------------------------------- 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; } /*---------------------------------------- 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: underline; } #globalNav .dropdown:not(.dropdown-pc) > a:before { 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 #cccccc; } #globalNav .menu--primary > a { color:#222222; background: #ebe4cf; } #globalNav .menu .menu--primary a{ color:#fff; } #globalNav .menu--primary.dropdown:not(.dropdown-pc) > a:before { background: #999999; } /* dropdown */ #globalNav .dropdownNav { display: none; } #globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; } #globalNav .menu--secondary a { background: #959595; color: #FFF; } #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: #f2f2f2; } /* 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 .container ul:not(.dropdownNav){ background: url(../img/globalNavi.gif) left -60px no-repeat; } /* menu--primary */ .globalNav .menu--primary { float: left; } .globalNav .menu--primary > a { background: url(../img/globalNavi.gif) left top no-repeat; } .globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active > a { background:none;} /* dropdown */ .globalNav .dropdown { position: relative; z-index: 10; font-size: 1.4rem; } .globalNav .dropdownNav { display: none; position: absolute; top: 60px; left: 0; background: #666666; width: 200px; z-index: 11; } .globalNav .dropdownNav a{ background:none; } .globalNav .menu--primary:last-child .dropdownNav { left: auto; right: 0; } .globalNav .dropdown:hover > .dropdownNav { display: block; } /* menu--secondary */ .globalNav .menu--secondary{ height:50px; } .globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; } .globalNav .menu--secondary a { position: relative; padding: 15px 10px; transition: all .2s linear; color: #FFF; height:50px; } .globalNav .menu--secondary a:hover, .globalNav .menu--secondary.menu--active a { background: #959595; } .globalNav .menu--secondary a:before { font-family: "FontAwesome"; content: "\f105"; position: absolute; top: 50%; right: 10px; margin-top: -.5em; line-height: 1; } /*---------------------------------------- globalNav ----------------------------------------*/ #globalNav .menu--home { width: 188px; } #globalNav .menu--shop { width: 188px; } #globalNav .menu--menu { width: 188px; } #globalNav .menu--topics { width: 188px; } #globalNav .menu--contact { width: 188px; } /* a */ #globalNav .menu--home > a { } #globalNav .menu--shop > a { background-position: -188px top; } #globalNav .menu--menu > a { background-position: -376px top; } #globalNav .menu--topics > a { background-position: -564px top; } #globalNav .menu--contact > a { background-position: -752px top; } /* a */ .globalNav a { height: 60px; transition: none; } #globalNav .menu--primary > a:hover { background:none; } } /*----------------------------------------*---------------------------------------- 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: #3b2918; 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: #e62e2e; } /*----------------------------------------*---------------------------------------- footerNav ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { #footerNav_sp { font-size: 1.3rem; text-align: left; } #footerNav_sp .menu { border-top: 1px solid #a12020; } #footerNav_sp .menu:first-child { border-top: none; } #footerNav_sp .menu--col6-sp:nth-child(even) { border-left: 1px solid #a12020; } #footerNav_sp a { color: #fff; text-decoration: none; display: block; padding: 10px; position: relative; } #footerNav_sp a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #footerNav_sp .menu--active a { text-decoration: underline; } #footerNav_sp ul ul{ margin-top:-5px; padding-bottom:5px; margin-left:5px; } #footerNav_sp ul ul li{ margin-top:0; margin-bottom:0px; padding-left:10px; border:none; line-height:.2rem; } } @media print, screen and (min-width: 768px) { #footerNav .container { padding: 0; } #footerNav a { padding: 10px; position: relative; } #footerNav a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #footerNav .menu--active > a { text-decoration: underline; } #footerNav .menu--home { width: 188px; } #footerNav .menu--shop { width: 188px; } #footerNav .menu--menu { width: 188px; } #footerNav .menu--topics { width: 188px; } #footerNav .menu--contact { width: 188px; } /* a */ #footerNav .menu--home > a { } #footerNav .menu--shop > a { background-position: -188px top; } #footerNav .menu--menu > a { background-position: -376px top; } #footerNav .menu--topics > a { background-position: -564px top; } #footerNav .menu--contact > a { background-position: -752px top; } #footerNav .menu--primary > a:hover { background:none; } } #footer #globalNav{ border-bottom:#CCC dotted 1px; margin-bottom:30px; } /*----------------------------------------*---------------------------------------- footer ----------------------------------------*----------------------------------------*/ #footer { background: url(../img/bg_garland.gif) top left repeat-x; padding-bottom:0; } #footer a{ color: #222222; } #footer #info{ padding:30px 0 5px 0; font-size:1.8rem; } @media all and (max-width: 767px) { #footer { padding: 20px 0 1px; } #footer .container { text-align: center; } } @media screen and (min-width: 768px) { #footer { padding: 0 } } /*----------------------------------------* footer_info ----------------------------------------*/ #footer .logo { margin: auto; background: url(../img/logo.gif) no-repeat center center; background-size: contain; } #footer .info{ text-align: center; margin:20px 0; } #footer .info a{ color:#fff; } #footer .info a:visited, #footer .info a:active,{ color:#fff; } @media screen and (max-width: 767px) { #footer .logo { display: block; margin:auto; height: 73px; width: 280px; } #header .logo a { height: 73px; } #footer .info{ font-size:1.4rem; } #footer address { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 20px; } } @media print, screen and (min-width: 768px) { #footer .logo { height: 78px; width: 300px; } #footer address { font-size: 1.5rem; line-height:3.8rem; } } /*----------------------------------------* contact ----------------------------------------*/ #footer .tel { font-size:3.2rem; line-height: 1; font-weight: 600; } @media screen and (max-width: 767px) { #footer .tel_head { font-size: 1.7rem; } #footer .tel { color:#5b524a;} } @media print, screen and (min-width: 768px) { #footer .tel{ text-align: right; } #footer .tel_head { font-size: 2rem; } #footer .tel_number { font-size: 4rem; } } /*----------------------------------------*---------------------------------------- copyright ----------------------------------------*----------------------------------------*/ #copyright { background: #efede9; font-size: 1.3rem; padding: 15px 0; } /*----------------------------------------*---------------------------------------- pageTop ----------------------------------------*----------------------------------------*/ #pageTop { position: fixed; text-decoration: none; color: #fff; background: rgba(85,70,50, .8); text-align: center; display: block; } @media screen and (max-width: 767px) { /* #pageTopを使う場合 */ body { padding-bottom: 40px; } #pageTop { width: 100%; height: 40px; line-height: 40px; bottom: 0; left: 0; } } @media print, screen and (min-width: 768px) { #pageTop { bottom: 20px; right: 20px; width: 100px; height: 100px; border-radius: 50%; line-height: 100px; font-size: 1.3rem; } } /*----------------------------------------*---------------------------------------- page_navi ----------------------------------------*----------------------------------------*/ #page_navi{ width:100%; border:#CCC solid 1px; font-size:1.4rem; padding-bottom:15px; } #page_navi .title{ text-align:center; color:#FFF; background:#808080; padding:10px 0; margin-bottom:20px; } #page_navi ul{ margin-left:10px; } #page_navi ul li{ margin-bottom:10px; } #page_navi li a{ color: #222222; text-decoration:none; } #page_navi li:before { width:15px; height:15px; font-family: "FontAwesome"; content: "\f105"; line-height:1; margin: 5px 5px; } #page_navi ul li ul{ margin-top:5px; padding-bottom:5px; } #page_navi ul li ul li{ margin-top:5px; margin-bottom:0; } #page_navi ul li a:hover, #page_navi .is-active, #page_navi .is-active a{ color:#ba2222; text-decoration:underline; } #page_navi .is-active a:before{ color:#ba2222; } #page_navi .search { padding:0 10px 10px 10px; } #page_navi .search table{ margin-bottom:10px; } #page_navi .search table th{ display:block; margin:0 0 5px 0; } #page_navi .search table td{ display:block; padding:0 10px 10px 10px; } #page_navi .search select{ width:100%; } #page_navi .search .btn{ display:block; margin:auto; width:70%; color:#FFF; padding:5px 0; cursor: pointer; transition: all .2s linear; } /*----------------------------------------*---------------------------------------- pageHeader ----------------------------------------*----------------------------------------*/ #pageHeader h1 { margin-bottom: 0; } @media screen and (max-width: 767px) { #pageHeader { padding:10px 0 20px 0; background:#685b4f; margin-bottom:40px; } #pageHeader h1 { text-align:center; font-size: 2.6rem; margin-top:10px; } #pageHeader h1 img{height:50px;} #pageHeader + #contents { margin-top: 0px; } } @media print, screen and (min-width: 768px) { #pageHeader { padding: 40px 0 30px 0; margin-top:20px; margin-bottom:0px; background:#685b4f; } #pageHeader h1 { text-align: center; color: #000; font-size: 3.0rem; line-height: 0.8; font-weight: normal; font-family: 'Noto Sans Japanese', sans-serif; } #pageHeader h1 span{ color: #c80303; font-size: 1.2rem; font-weight: 600; } #pageHeader + #contents { margin-top: 80px; } } /*----------------------------------------*---------------------------------------- shortcut ----------------------------------------*----------------------------------------*/ #shortcut { font-size: 1.5rem; } #shortcut a { color: #333; text-decoration: none; position: relative; } @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 li:after { 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-top:20px; margin-bottom: 0px; } #shortcut ul { letter-spacing: -.4em; } #shortcut li { display: inline; position: relative; letter-spacing: normal; } #shortcut li + li { margin-left: 20px; } #shortcut li:not(:last-child):after { content: "｜"; } #shortcut li:after { margin-left: 20px; } #shortcut a:hover, #shortcut .on { color: #313884; border-bottom:#313884 3px solid; } #shortcut + #contents { margin-top: 80px; } } /*----------------------------------------*---------------------------------------- breadcrumb ----------------------------------------*----------------------------------------*/ @media all and (max-width: 767px) { #breadcrumb { display: none; } } @media screen and (min-width: 768px) { #breadcrumb { text-align: left; letter-spacing: -.4em; font-size: 1.3rem; margin-top:15px; margin-bottom: 15px; } #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; } }