/* -------------------------------- 1. Auto-Hiding Navigation - Simple -------------------------------- */ .cd-auto-hide-header{display: none;} /*=============================================== ●タブレット.css 画面の横幅が768pxまで ===============================================*/ @media screen and (max-width: 768px){ .cd-auto-hide-header{display: block;} .cd-auto-hide-header { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 62px; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; border-bottom: 1px solid rgba(120,85,28,0.1); background-image: url(../images/sp-header-bk.jpg); background-repeat: repeat; background-size: auto 120px; } .cd-auto-hide-header::after { clear: both; content: ""; display: block; } .cd-auto-hide-header.is-hidden { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } /* メニューボタン開始 */ .cd-auto-hide-header .nav-trigger { display: table; height: 100%; padding: 0 10px; font-size: 12px; text-transform: uppercase; color: #78551c; font-weight: bold; right: 0; border-left: 1px solid rgba(120,85,28,0.3); letter-spacing: 0px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .cd-auto-hide-header .nav-trigger span { /* vertically align inside parent element */ display: table-cell; vertical-align: middle; } .cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before { /* this is the menu icon */ display: block; position: relative; height: 3px; width: 22px; background-color: #78551c; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-auto-hide-header .nav-trigger em { /* this is the menu central line */ margin: 10px auto 10px; -webkit-transition: background-color .2s; transition: background-color .2s; } .cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after { position: absolute; content: ''; left: 0; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .cd-auto-hide-header .nav-trigger em::before { /* this is the menu icon top line */ -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .cd-auto-hide-header .nav-trigger em::after { /* this is the menu icon bottom line */ -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); } .cd-primary-nav { display: inline-block; float: right; height: 100%; padding-right: 5%; } .cd-primary-nav > ul { position: absolute; z-index: 2; top: 62px; left: 0; width: 100%; background-color: #ffffff; display: none; box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(120,85,28,0.1); font-size: 0; } .cd-primary-nav li{ border-bottom: 2px dotted #91bc09; padding: 0 2.5%; width: 44%; display: inline-block; vertical-align: top; } .cd-primary-nav li:nth-child(odd){ border-right: 2px dotted #91bc09;} .cd-primary-nav li:last-child{ } .cd-primary-nav > ul a { /* target primary-nav links */ display: block; height: 50px; line-height: 50px; padding-left: 15px; color: #78551c; font-size: 16px; background-image: url(../images/sankaku.jpg); background-repeat: no-repeat; background-position: left 1.5% center; background-size: auto 11px; letter-spacing: 0; } .sp_bana{border-bottom: none !important;} .left_b{ border-right: none !important; } .sp_bana a{ padding: 20px 0 90px !important; width: 100%; background:none !important; } .sp_bana img{ width: 100%; max-width: 100%; height: auto; } .cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active { color: #8F3985; } .nav-open .cd-primary-nav ul, .cd-primary-nav ul:target { /* show primary nav - mobile only :target is used to show navigation on no-js devices */ display: block; } .nav-open .cd-primary-nav ul, .cd-primary-nav ul:target { display: table-cell; } } @media only screen and (min-width: 1024px) { .cd-auto-hide-header { height: 80px; } } .cd-auto-hide-header .logo, .cd-auto-hide-header .nav-trigger { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .cd-auto-hide-header .logo { left: 5%; } .cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img { display: block; } @media only screen and (min-width: 1024px) { .cd-auto-hide-header .nav-trigger { display: none; } } .cd-auto-hide-header.nav-open .nav-trigger em { /* transform menu icon into a 'X' icon */ background-color: rgba(255, 255, 255, 0); } .cd-auto-hide-header.nav-open .nav-trigger em::before { /* rotate top line */ -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .cd-auto-hide-header.nav-open .nav-trigger em::after { /* rotate bottom line */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (min-width: 1024px) { .cd-primary-nav { /* vertically align its content */ display: table; } .cd-primary-nav > ul { /* vertically align inside parent element */ display: table-cell; vertical-align: middle; /* reset mobile style */ position: relative; width: auto; top: 0; padding: 0; background-color: transparent; box-shadow: none; } .cd-primary-nav > ul::after { clear: both; content: ""; display: block; } .cd-primary-nav > ul li { display: inline-block; float: left; margin-right: 1.5em; } .cd-primary-nav > ul li:last-of-type { margin-right: 0; } .cd-primary-nav > ul a { /* reset mobile style */ height: auto; line-height: normal; padding: 0; border: none; } } /*=============================================== ●smart.css 画面の横幅が640pxまで ===============================================*/ @media screen and (max-width:640px){ .cd-primary-nav > ul a { font-size: 15px; } .sp_bana a{ padding: 20px 0 50px !important; } }