@charset "utf-8"; /* ▼ まず始めに 1. カラー変更以下の初期色をサイトに合わせて変更しよう！ローカルサイト全体を「#xxx」＆「xx,xx,xx」で「検索・置換」してOK！（#付で検索必須！） #555 （85,85,85）　　　⇒ 基本的な文字色 #333（51,51,51）　　⇒ 見出しの色 #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: #555; font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif; font-size: 1.5rem; } /*----------------------------------------*---------------------------------------- header ----------------------------------------*----------------------------------------*/ #header { position: relative; } #header .container { position: relative; } @media all and (max-width: 767px) { #header { height: 80px;} } @media screen and (min-width: 768px) { #header { height: 80px; } } /*---------------------------------------- logo ----------------------------------------*/ #header .logo { position: absolute; background: url(../img/logo.png) no-repeat left center; background-size: contain; } @media all and (max-width: 767px) { #header .logo { top: 0; left: 0; right: 0; margin: auto; height: 80px; width: 240px; } #header .logo a { height: 80px; } } @media screen and (min-width: 768px) { #header .logo { top: 0; left: 10px; height: 80px; width: 240px; } #header .logo a { height: 80px; } } /*---------------------------------------- yoyaku ----------------------------------------*/ #header .yoyaku { position: absolute; z-index: 999; top: 0; right: 0; height: 80px; width: 200px; } @media all and (max-width: 767px) { #header .yoyaku { display: none; } } @media screen and (min-width: 768px) { #header .yoyaku a { height: 80px; width: 200px; border: none; cursor: pointer; display: block; text-decoration: none; vertical-align: baseline; position: relative; background: rgba(0,160,233,1); color: #fff; line-height: 80px; font-size: 1.8rem; transition: all .2s linear; font-family: 'Noto Sans Japanese', sans-serif; font-weight: 600; } #header .yoyaku a:hover, #header .yoyaku a:active { text-decoration: none; background: rgba(0,160,233,.75); color: #fff; } #header .yoyaku a:before { position: absolute; top: 50%; right: 15px; margin-top: -.5em; font-family: "FontAwesome"; content: "\f105"; line-height: 1; } } /*----------------------------------------*---------------------------------------- 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 #333; } #globalNav .menu--primary > a { color: #fff; background: #555; } #globalNav .menu--primary.dropdown:not(.dropdown-pc) > a:before { background: #333; } /* dropdown */ #globalNav .dropdownNav { display: none; } #globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; } #globalNav .menu--secondary a { background: #fff; color: #555; } #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 #333; } } @media screen and (min-width: 768px) { .globalNav { background: #f00; width: 960px; margin: auto; position: relative; } .globalNav .container { position: absolute; top: -80px; left: 240px; } .globalNav ul { background: url(../img/globalNav.png) no-repeat bottom left; } /* menu--primary */ .globalNav .menu--primary { float: left; } .globalNav .menu--primary > a { background: url(../img/globalNav.png) no-repeat top left; } .globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active > a { background: none; } .globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active-news > a { background: none; } /* dropdown */ .globalNav .dropdown { position: relative; z-index: 10; font-size: 1.4rem; } .globalNav .dropdownNav { display: none; position: absolute; top: 50px; left: 0; background: #fff; width: 200px; 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: #555; } .globalNav .menu--secondary a:hover, .globalNav .menu--secondary.menu--active a { background: #f2f2f2; } .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--news { width: 79px; } #globalNav .menu--about { width: 169px; } #globalNav .menu--menu { width: 120px; } #globalNav .menu--gallery { width: 93px; } #globalNav .menu--blog { width: 79px; } /* a */ #globalNav .menu--primary > a { height: 80px; } #globalNav .menu--news > a { background-position: 0 0; } #globalNav .menu--about > a { background-position: -79px 0; } #globalNav .menu--menu > a { background-position: -248px 0; } #globalNav .menu--gallery > a { background-position: -368px 0; } #globalNav .menu--blog > a { background-position: -461px 0; } /*---------------------------------------- globalNavSticky ----------------------------------------*/ #globalNavSticky .menu--home { width: 160px; } #globalNavSticky .menu--xxxx1 { width: 156px; } #globalNavSticky .menu--xxxx2 { width: 156px; } #globalNavSticky .menu--xxxx3 { width: 156px; } #globalNavSticky .menu--xxxx4 { width: 156px; } #globalNavSticky .menu--xxxx5 { width: 156px; } #globalNavSticky .menu--xxxx5 { width: 156px; } /* a */ #globalNavSticky .menu--primary > a { height: 40px; } #globalNavSticky .menu--xxxx1 > a { background-position: 0 center; } #globalNavSticky .menu--xxxx2 > a { background-position: -160px center; } #globalNavSticky .menu--xxxx3 > a { background-position: -320px center; } #globalNavSticky .menu--xxxx4 > a { background-position: -480px center; } #globalNavSticky .menu--xxxx5 > a { background-position: -540px center; } #globalNavSticky .menu--xxxx6 > a { background-position: -700px center; } } /*----------------------------------------*---------------------------------------- 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: #00A0E9; 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: #555; 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 { font-size: 1.3rem; text-align: left; } #footerNav .menu { border-top: 1px solid #333; } #footerNav .menu:first-child { border-top: none; } #footerNav .menu--col6-sp:nth-child(even) { border-left: 1px solid #333; } #footerNav a { color: #fff; background: #555; text-decoration: none; display: block; 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; } } @media print, screen and (min-width: 768px) { #footerNav { background: #f2f2f2; font-size: 1.2rem; padding: 15px 0; } #footerNav ul { letter-spacing: -.4em; } #footerNav li { display: inline; letter-spacing: normal; } #footerNav li + li { margin-left: 1em; padding-left: 1em; border-left: 1px solid #ccc; } #footerNav a { color: #555; text-decoration: none; } #footerNav a:hover, #footerNav .menu--active a { text-decoration: underline; } } #footer .line_icon { width: 26px; padding-bottom: 4px; } /*----------------------------------------*---------------------------------------- footer ----------------------------------------*----------------------------------------*/ /* #footer { background: url(../img/bg_foot.gif); } */ #footer a { color: #555; } @media all and (max-width: 767px) { #footer { padding: 20px 0 1px; } .line_icon{ width: 24px;} #footer .nav--inline .menu:last-child{display: block; margin-top: 15px;} #footer .container { text-align: center; } } @media screen and (min-width: 768px) { #footer { padding: 40px 0 20px; } } /*----------------------------------------* footer_info ----------------------------------------*/ #footer .logo { margin-bottom: 20px; } #footer .logo a { background: url(../img/logo_foot.png) no-repeat left center; background-size: contain; width: 240px; height: 47px; } #footer .nav--inline .menu { margin-right: 20px; } @media screen and (max-width: 767px) { #footer address { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 20px; } #footer .logo a { margin-left: auto; margin-right: auto; } } @media print, screen and (min-width: 768px) { #footer .info { text-align: left; margin-bottom: 20px; } #footer address { font-size: 1.3rem; } } /*----------------------------------------* contact ----------------------------------------*/ #footer .tel { line-height: 1; margin-bottom: 5px; font-weight: 600; } #footer .help { margin-bottom: 10px; font-size: 1.3rem; } @media screen and (max-width: 767px) { #footer .tel_head { font-size: 1.7rem; } #footer .tel_number { font-size: 3.4rem; } #footer .mail_btn { text-align: left; } } @media print, screen and (min-width: 768px) { #footer .tel, #footer .help { text-align: right; } #footer .tel_head { font-size: 2rem; } #footer .tel_number { font-size: 4rem; } } /*----------------------------------------*---------------------------------------- copyright ----------------------------------------*----------------------------------------*/ #copyright { font-size: 1.3rem; } @media screen { #copyright { padding: 15px 0 0; border-top: 1px #a8a7a7 solid; } } /*----------------------------------------*---------------------------------------- pageTop ----------------------------------------*----------------------------------------*/ #pageTop { position: fixed; text-decoration: none; color: #fff; background: rgba(0,0,0, .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; } } /*----------------------------------------*---------------------------------------- pageHeader ----------------------------------------*----------------------------------------*/ #pageHeader { background: url(../img/bg_bl.gif); } #pageHeader h1 { margin-bottom: 0; } @media screen and (max-width: 767px) { #pageHeader { padding: 30px 0; margin-bottom: 20px; } #pageHeader h1 { } #pageHeader + #contents { margin-top: 20px; } } @media print, screen and (min-width: 768px) { #pageHeader { padding: 40px 0; } #pageHeader h1 { color: #555; font-size: 2.4rem; line-height: 1; font-weight: normal; font-family: "Noto Sans Japanese"; } #pageHeader h1 span { } #pageHeader + #shortcut { margin-top: 20px; } #pageHeader + #contents { margin-top: 60px; } } @media print { #pageHeader { background: none; padding: 0; margin-bottom: 40px; } #pageHeader h1 { color: #333; } } /*----------------------------------------*---------------------------------------- shortcut ----------------------------------------*----------------------------------------*/ #shortcut { font-size: 1.3rem; } #shortcut a { color: #555; 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.2rem; padding: 5px 0; background: #fafafa; margin-bottom: 40px; } #breadcrumb .container { text-align: left; } #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: #555; text-decoration: none; } #breadcrumb a:hover, #breadcrumb a:active { text-decoration: underline; } } /*20220321追加*/ #header .inner { width: 100%; margin: 0 auto; position: relative; } #global-nav { position: absolute; right: 0; top: 0; left:0; } #global-nav ul { list-style: none; font-size: 14px; display: inline-flex; } #global-nav ul li { padding: 38px 12px 10px; } #global-nav ul li:hover{ border-bottom:4px #00a0e9 solid ; padding-bottom: 6px; } #global-nav ul li a { text-decoration: none; font-size: 13px; color: #333; display: block; font-weight: 600; } #global-nav ul li.current{ border-bottom:4px #00a0e9 solid ; padding-bottom: 6px; } #global-nav ul li a span{ display: block; color: #00a0e9; } #nav-toggle { display: none; } #nav-toggle { display: none; position: absolute; left: 15px; top: 12px; width: 30px; height: 36px; cursor: pointer; z-index: 101; } .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } .open #global-nav { /* #global-nav top + #mobile-head height */ -moz-transform: translateY(1060px); -webkit-transform: translateY(1060px); transform: translateY(1060px); background: rgba(255, 255, 255, 0.9); z-index: 1; } #header .logo{ height: 60px; width: 40%; min-width: 100px; } #header .logo a{ height:60px; } #header .logo.header_logo { height: 80px; width: auto; background: none; z-index: 1; } #header .logo.header_logo a { height: 80px; } #header .logo.header_logo a img{ height:100%; width:auto; } @media (max-width: 1300px) { #header #mobile-head .yoyaku { width: 150px; } #header #mobile-head .yoyaku a { width: 150px; font-size: 1.6rem; } #global-nav{ padding-left: 70px; } } @media (max-width: 1200px) { #header { height: 60px; } #mobile-head { width: 100%; height: 60px; z-index: 999; position: relative; } #header .logo.header_logo{ right: 0; height: 60px; } #nav-toggle { display: block; } #nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; } #nav-toggle div { position: relative; } #global-nav { position: absolute; top: -1000px; background: rgba(255, 255, 255, 0.95); width: 100%; text-align: center; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; padding-left: 0; } #global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; margin-top: 0; margin-right: 0; display: block; margin-bottom: 20px; } #head_wrap #global-nav ul li a, #head_wrap.fixed #global-nav ul li a { width: 100%; display: block; padding: 5px 0; } #global-nav ul li a { padding: 0 5px; transition: all .6s ease 0s; box-sizing: border-box; font-weight: bold; } #header #mobile-head .yoyaku { display: block; width: 100px; line-height: 60px; height:60px; } #header #mobile-head .yoyaku a{ background: rgba(0,160,233,1); display: block; color: #fff; text-decoration: none; font-size:12px; width: 100px; height:60px; line-height: 60px; } #global-nav ul li.current{ border-bottom:none ; padding-bottom: 10px; } #global-nav ul li:hover{ border-bottom:none ; } #global-nav ul li { padding: 5px 0 5px; } } @media (max-width: 767px) { #header #mobile-head .yoyaku { width: 60px; } #header #mobile-head .yoyaku a{ width: 60px; } }