****************************************************************************************/ /** Mobile基準でPCsizeを上書きするスタイル **/ /*!============================================================*\ Base [ Mobile Standerd ] \*!============================================================*/ .drawer-open { overflow: hidden !important; } /** h1 **/ h1 a.drawer-brand { color: #222; font-size: 1.5rem; font-weight: bold; text-decoration: none; padding-top: 0.4rem; display: block; } /*================================================== DropDownMenu ==================================================*/ /** nav **/ .drawer-nav { position: fixed; z-index: 101; top: 0; overflow: hidden; width: 100%; /*width: 16.25rem; height: 100%;*/ color: #222; /*background-color: #FFF; border: thin dashed #0CF;*/ margin: 0; padding: 0; } /** ul **/ .drawer-menu { margin: 0; margin-top: -2em; padding: 0; padding-top: 10%; list-style: none; /*color: #FFF; background-color: rgba(0, 0, 0, .5); border: thin dashed #C09;*/ } /** li > a **/ .drawer-menu-item { font-size: 1rem; display: block; padding: .75rem; text-decoration: none; color: #222; /*color: #FFF;*/ text-align: left; } .drawer-menu-item:hover { text-decoration: underline; /*color: #555;*/ color: #CCC; background-color: transparent; } /*! overlay */ .drawer-overlay { position: fixed; /*100*/z-index: 1; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); } /*open時*/ .drawer-open .drawer-overlay { display: block; } /*========================================================== /* ●Base [ PC size ] ============================================================*/ @media (min-width: 64em) { /*======================================= MainMenu ========================================*/ /** nav **/ nav.drawer-nav { /*width: 5rem;*/ height: 100%; color: #222; background-color: #fff; position: fixed; z-index: 101; top: 0; right: 0; /*overflow: hidden;*/ overflow: auto;/*スクロール対策*/ /*border: thin dashed #63C;*/ } /** ul **/ ul.drawer-menu { width: 37rem; color: #FFF; text-align: right; list-style: none; margin: 0; padding: 0; } ul.drawer-menu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /** li > a **/ .drawer-menu-item { font-size: 0.8rem; letter-spacing: 2px; display: block; padding: .75rem; text-decoration: none; color: #222; /*color: #FFF;*/ } .drawer-menu-item:hover { text-decoration: underline; color: #555; /*color: #CCC;*/ background-color: transparent; } /*! overlay .drawer-overlay { position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); }*/ } /*!===========================================================================*\ Top \*!============================================================================*/ /** nav **/ .drawer--top .drawer-nav { top: -100%; left: 0; width: 100%; height: auto; max-height: 100%; -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } /** open時 nav **/ .drawer--top.drawer-open .drawer-nav { top: 0; } .drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger { right: 0; } /*!------------------------------------*\ Leftスライドの場合 \*!------------------------------------ .drawer--left .drawer-nav { left: -16.25rem; -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger { left: 0; } .drawer--left.drawer-open .drawer-hamburger { left: 16.25rem; }*/ /*!------------------------------------*\ Rightスライドの場合 \*!------------------------------------ .drawer--right .drawer-nav { right: -16.25rem; -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0; } .drawer--right.drawer-open .drawer-hamburger { right: 16.25rem; }*/ /*\================================================================================== Hamburger Button ボタン制御 =====================================================================================*/ /** MenuButton **/ button.drawer-hamburger { width: 2rem; box-sizing: content-box; /*box-sizing: border-box;*/ border: 0; outline: 0; /**/background-color: transparent; /*background-color: #9C0;*/ overflow: auto;/*スクロール対策*/ display: block; /*position: fixed;*/ position: absolute; z-index: 104; top: 0; padding: 0; padding-top: 18px; padding-right: .75rem; padding-bottom: 30px; padding-left: .75rem; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } button.drawer-hamburger:hover { cursor: pointer; background-color: transparent; } span.drawer-hamburger-icon { position: relative; display: block; margin-top: 10px; } .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 100%; height: 2px; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); background-color: #630;/*#222*/ } .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; top: -10px; left: 0; content: ' '; } .drawer-hamburger-icon:after { top: 10px; } /** open時 **/ .drawer-open .drawer-hamburger-icon { background-color: transparent; } .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0; } .drawer-open .drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .drawer-open .drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /** MENU **/ button.drawer-hamburger > span:nth-child(3) { color: #FFF; font-size: 0.7rem; position: absolute; left: 12px; bottom: 3px; } /*!-----------------------------------------------*\ accessibility \*!-----------------------------------------------*/ /*! * Only display content to screen readers [スクリーンリーダーにのみコンテンツを表示する] * See: http://a11yproject.com/posts/how-to-hide-content */ .sr-only { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); /*クリッピングマスク*/ width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; } /*! * Use in conjunction with .sr-only to only display content when it's focused. [.sr-onlyと組み合わせて使用すると、コンテンツがフォーカスされている場合にのみ表示されます。] * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 「メインコンテンツへのスキップ」リンクに役立ちます。 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1をご覧ください。 * Credit: HTML5 Boilerplate [クレジット：HTML5のボイラープレート] */ .sr-only-focusable:active, .sr-only-focusable:focus { position: static; overflow: visible; clip: auto; width: auto; height: auto; margin: 0; } /*!------------------------------------*\ Sidebar \*!------------------------------------*/ /* .drawer--sidebar { background-color: #fff; } .drawer--sidebar .drawer-contents { background-color: #fff; } @media (min-width: 64em) { .drawer--sidebar .drawer-hamburger { display: none; visibility: hidden; } .drawer--sidebar .drawer-nav { display: block; -webkit-transform: none; transform: none; position: fixed; width: 12.5rem; height: 100%; border: thin dashed #000; }*/ /*! Left */ /*.drawer--sidebar.drawer--left .drawer-nav { left: 0; border-right: 1px solid #ddd; } .drawer--sidebar.drawer--left .drawer-contents { margin-left: 12.5rem; }*/ /*! Right */ /*.drawer--sidebar.drawer--right .drawer-nav { right: 0; border-left: 1px solid #ddd; } .drawer--sidebar.drawer--right .drawer-contents { margin-right: 12.5rem; }*/ /*! container */ .drawer--sidebar .drawer-container { max-width: 48rem; } /*}*/ /*==================================================================/ ●PC最大size ====================================================================*/ @media (min-width: 75em) { .drawer--sidebar .drawer-nav { width: 16.25rem; } .drawer--sidebar.drawer--left .drawer-contents { margin-left: 16.25rem; } .drawer--sidebar.drawer--right .drawer-contents { margin-right: 16.25rem; } /*! container */ .drawer--sidebar .drawer-container { max-width: 60rem; } } /*========================================================================== Navbar [ MobileSize ] mainMenu ==========================================================================*/ section.drawer-navbar { width: 100%; /*background-color: #699;*/ } /*

*/ .drawer--navbarTopGutter { padding-top: 3.75rem; } /*----------------------------------------- Navi Header バー ------------------------------------------/ /** section **/ section.drawer-navbar { width: 100%; /*background-color: #699;*/ margin: 0; padding: 0; position: fixed; /*position: static;*/ z-index: 104; top: 0; /*z-index: 102; top: 0;*/ border-bottom: 2px solid #FFF } /*! .drawer-navbar modifier 修飾*/ .drawer-navbar--fixed { position: fixed; } /*------------------------------------------------ h1/button Wrapper --------------------------------------------------*/ section.drawer-navbar div.drawer-navbar-header { width:100%; /*height: 3.75rem; 3.75rem:60px*/ text-align: center; border-bottom: 2px solid #ddd; /**/background: #FFF; box-sizing: border-box; padding: 0 .75rem; position: relative; z-index: 102; /*background-color: #fff;*/ /*border: thin dashed #F66;*/ } /** h1 **/ .drawer-navbar .drawer-navbar-header > h1 { width: 15rem; margin: 0; padding: 0; padding-left: 10%; /*padding-top: 2%; border: thin dashed #F00;*/ display: inline-block; visibility: visible; vertical-align: middle; } /** drawer-navbar-header > h1 a **/ .drawer-navbar a.drawer-brand { line-height: 3.75rem; /*display: inline-block;*/ margin: 0; padding-top: 0; /*padding-bottom: 0;*/ text-decoration: none; /*background-color: #CCC;*/ } /* h1 > a.drawer-brond */ .drawer-navbar .drawer-brand > img { /*border: thin dashed #096;*/ margin: 0; padding: 0; vertical-align: middle; } .drawer-navbar .drawer-brand:hover { /*background-color: transparent;*/ } /*---------------------------------------- nav ----------------------------------------*/ .drawer-navbar .drawer-nav { /*padding-top: 3.75rem;*/ padding-top: 3.3rem; /*border: 2px dashed #F00;*/ } /** ul **/ .drawer-navbar .drawer-menu { /* padding-bottom: 7.5rem; border: thin dashed #9C3;*/ background: #FFF; } /** li **/ .drawer-navbar ul.drawer-menu li { border-bottom: thin dashed #CCC; } /** a **/ .drawer-navbar ul.drawer-menu li a { width: 100%; box-sizing: border-box; padding-left: 6%; display: -webkit-box; display: -ms-flexbox; display: flex; /*-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;*/ -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #FFF; position: relative; } .drawer-navbar ul.drawer-menu li a:hover { /**/background: #F3E6D0; } .drawer-navbar ul.drawer-menu li a:active { background: #F3E6D0;/*#EBDCBD*/ border-top: 2px solid #CCC; border-left:2px solid #CCC; } /*------------------------- 画像 -------------------------*/ .drawer-navbar ul.drawer-menu li a picture:first-child { width: 3rem; margin-right: 5%; } /*------------------------- 保護者・保育士の声 --------------------------*/ .drawer-navbar ul.drawer-menu li:nth-child(4) a picture:first-child { width: 3rem; } .drawer-navbar ul.drawer-menu li:nth-child(4) a picture:last-child { width: 13rem; } /*------------- 主な行事 --------------*/ .drawer-navbar ul.drawer-menu li:nth-child(5) a picture:first-child { width: 4rem; margin-right: 2%; } .drawer-navbar ul.drawer-menu li:nth-child(5) a picture:last-child { width: 8rem; } /*------------- アクセス --------------*/ .drawer-navbar ul.drawer-menu li:nth-child(6) a picture:first-child { width: 4rem; } .drawer-navbar ul.drawer-menu li:nth-child(6) a picture:last-child { width: 7rem; } /*--------------------------------------------- icon span ----------------------------------------------- .drawer-navbar ul.drawer-menu li a span:first-child { width: 3rem; } /** 主な行事 ** .drawer-navbar ul.drawer-menu li:nth-child(5) a span:first-child { width: 4rem; } /** お問い合わせ ** .drawer-navbar ul.drawer-menu li:nth-child(7) a span:first-child { width: 4rem; }*/ /*---------------------------------------------- 英文span ----------------------------------------------- .drawer-navbar ul.drawer-menu li a span:nth-child(2) { /*background: #CC3;* color: #C96; position: absolute; top: 1rem; left: 4rem; } /** 主な行事 ** .drawer-navbar ul.drawer-menu li:nth-child(5) a span:nth-child(2) { left: 5rem; } /** お問い合わせ ** .drawer-navbar ul.drawer-menu li:nth-child(7) a span:nth-child(2) { left: 5rem; }*/ /*------------------------------------------------- 文字画像span -------------------------------------------------- .drawer-navbar ul.drawer-menu li a span:nth-child(3) { width: 30%; margin: 1rem 0 0 2%; } /** Home ** .drawer-navbar ul.drawer-menu li:first-child a span:nth-child(3) { width: 6rem; margin-top: 1.5rem; } /** 入園要項 ** .drawer-navbar ul.drawer-menu li:nth-child(2) a span:nth-child(3) { width: 7rem; } /** 園の一日 ** .drawer-navbar ul.drawer-menu li:nth-child(3) a span:nth-child(3) { width: 6.5rem; } /** 保護者・保育士の声 ** .drawer-navbar ul.drawer-menu li:nth-child(4) a span:nth-child(3) { width: 13rem; } /** 主な行事 ** .drawer-navbar ul.drawer-menu li:nth-child(5) a span:nth-child(3) { width: 6rem; } /** アクセス ** .drawer-navbar ul.drawer-menu li:nth-child(6) a span:nth-child(3) { width: 6rem; } /** お問い合わせ ** .drawer-navbar ul.drawer-menu li:nth-child(7) a span:nth-child(3) { width: 10rem; margin-top: 1.5rem; }*/ /*================================================================== Container ===================================================================*/ /** header > div **/ .drawer-container { margin-right: auto; margin-left: auto; } /** PC size **/ @media (min-width: 64em) { .drawer-container { max-width: 60rem; /*border: thin dashed #F00;*/ } } /** 最大size **/ @media (min-width: 75em) { .drawer-container { max-width: 70rem; } } /*======================================================== iphone SE size [ width:340pxまで ] =========================================================*/ @media screen and (max-width: 340px) { /** a **/ .drawer-navbar ul.drawer-menu li a { height: 2.9rem; /*background: #CC6;*/ } } /*================================================================= PC size [ widht: 64em以上 ] ==================================================================*/ @media (min-width: 1024px) { /*-------------------------------------- section ---------------------------------------*/ header section.drawer-navbar { width: 100%; height: 6rem; /*height: 3.75rem; border-bottom: 1px solid #ddd;*/ background-image: url(../img/menu_back_1200.png); background-repeat: no-repeat; background-position: center; background-size: contain; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: static; /*background: transparent; background-color: #FFF;*/ /*z-index: 104; top: 0; border: thin dashed #9C3;*/ } /** RetinaDisplay対応 **/ @media only screen and (-webkit-min-device-pixel-ratio: 2) { header section.drawer-navbar { height: 6rem; background-image: url(../img/menu_back_2400.png); background-size: 100%; } } /*-------------------------------------- Drawer Contener ---------------------------------------*/ div.drawer-container { width: 100%; max-width: 1020px; margin: 0;/*IE11bug justify-contentの子要素にmarginを指定すると崩れる*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*background: #9C9;*/ } /*--------------------------------- h1 button Wrapper ---------------------------------*/ section.drawer-navbar div.drawer-navbar-header { /*width: 36%;*/ width: 0; position: relative; padding: 0; border: 0; /*background-color: #EFEFEF;*/ /** PCsize時、非表示 * visibility: hidden;*/ display: none; border: thin dashed #FFF; } /** h1 **/ section.drawer-navbar div.drawer-navbar-header > h1 { /*width: 17rem;*/ border: thin dashed #FFF; } /*.drawer-navbar .drawer-menu--right { float: right; }*/ /** button **/ section.drawer-navbar .drawer-hamburger { display: none; } /*======================================= Main Menu link ========================================*/ /** nav **/ section.drawer-navbar nav.drawer-nav { width: 100%; background: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; left: 0; /**/overflow: visible; /*width: auto;*/ height: 3.75rem; padding-top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /*background: #CC6; border: thin dashed #F39;*/ } /** ul **/ section.drawer-navbar ul.drawer-menu { width: 100%; max-width: 900px; background-color: transparent; margin: 0 auto; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -webkit-box-pack: distribute; -ms-flex-pack: distribute; justify-content: space-around; /*-webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;*/ /*border: thin dashed #09C; background: #EFEFEF;*/ } /** ul li **/ section.drawer-navbar ul.drawer-menu li { /** Mobile相殺 **/border-bottom: none; width: 14%; margin: 0; padding: 3px; position: relative; /*display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;*/ /*background: #0CF; border: thin dashed #F6C;*/ } /** li a **/ section.drawer-navbar li a.drawer-menu-item { /** Mobile相殺 **/border: none; /*background: #F39;*/ /*width: 4rem; line-height: 3.75rem; padding-top: 0; padding-bottom: 0;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: ceneter; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*display: block;*/ position: absolute; top: -3rem; /*left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);*/ /*background-color: #FFF; border: thin dashed #0C9;*/ /*---------------------------------------------- hover bob -------------------------------------------------*/ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .drawer-navbar ul.drawer-menu li a:hover { /**Mobile相殺**/background: transparent; /*background: #F36;*/ /*padding-bottom: 2rem;*/ transition: .3s; /*animations*/ -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /** animation @key-frameは、＠media外に設置 **/ /*.hvr-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; }*/ /*------------------------------------------ icon画像 ------------------------------------------*/ /*------------------------------------------------------------------- IE11but flex-directionの子要素に画像がある場合、下に空白が付く ---------------------------------------------------------------------*/ ul.drawer-menu li a.drawer-menu-item picture:first-child { min-height: 0%;/*IE11 bug 子要素全てにmin-height:0%;*/ margin: 0 auto; } ul.drawer-menu li a.drawer-menu-item picture:last-child { min-height: 0%;/*IE11 bug 子要素全てにmin-height:0%;*/ margin: 0 auto; } /*------------ Home ------------*/ ul.drawer-menu li:first-child a.drawer-menu-item picture:first-child { width: 50%; } ul.drawer-menu li:first-child a.drawer-menu-item picture:last-child { width: 55%; margin-top: 4%; } /*-------------- 入園要項 ---------------*/ ul.drawer-menu li:nth-child(2) a.drawer-menu-item picture:first-child { width: 48%; } ul.drawer-menu li:nth-child(2) a.drawer-menu-item picture:last-child { width: 65%; margin-top: 4%; } /*---------------- 園の一日 -----------------*/ ul.drawer-menu li:nth-child(3) a.drawer-menu-item picture:first-child { width: 55%; } ul.drawer-menu li:nth-child(3) a.drawer-menu-item picture:last-child { width: 65%; margin-top: 6%; } /*------------------------ 保護者・保育士の声 -------------------------*/ ul.drawer-menu li:nth-child(4) a.drawer-menu-item picture:first-child { width: 50%; } ul.drawer-menu li:nth-child(4) a.drawer-menu-item picture:last-child { width: 100%; margin-top: 6%; } /*---------------- 主な行事 -----------------*/ ul.drawer-menu li:nth-child(5) a.drawer-menu-item picture:first-child { width: 70%; margin-right: auto; } ul.drawer-menu li:nth-child(5) a.drawer-menu-item picture:last-child { width: 75%; margin-top: 6%; } /*---------------- アクセス -----------------*/ ul.drawer-menu li:nth-child(6) a.drawer-menu-item picture:first-child { width: 60%; } ul.drawer-menu li:nth-child(6) a.drawer-menu-item picture:last-child { /*width: 60%;*/ width: 60px; margin-top: 6%; } /*---------------- お問合せ -----------------*/ ul.drawer-menu li:last-child a.drawer-menu-item picture:first-child { width: 55%; } ul.drawer-menu li:last-child a.drawer-menu-item picture:last-child { width: 80%; margin-top: 8%; } /*=============================================== MenuScroll .fix [ Top-fixed ] ================================================*/ /** li a **/ section.drawer-navbar.fix a.drawer-menu-item { /*vertical-align: middle;*/ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } /** li a **/ section.drawer-navbar.fix a.drawer-menu-item:hover, section.drawer-navbar.fix a.drawer-menu-item:focus, section.drawer-navbar.fix a.drawer-menu-item:active { /** animation **/ -webkit-animation-name: hvr-hang-sink, hvr-hang; animation-name: hvr-hang-sink, hvr-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /** animation @key-frameは、＠media外に設置 **/ .drawer-navbar ul.drawer-menu li a:active { /**Mobile相殺**/background:transparent; border:none; } /*! dropdown*/ .drawer-navbar .drawer-dropdown-menu { position: absolute; width: 16.25rem; /*border: 1px solid #ddd;*/ } .drawer-navbar .drawer-dropdown-menu-item { padding-left: .75rem; } } /*----------------------------------------------------- animation Bob [IE11 Bugの為、media外に設置] ------------------------------------------------------*/ @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } /*--------------------------------------------------- animation Hang　[IE11 Bugの為、media外に設置] ----------------------------------------------------*/ @-webkit-keyframes hvr-hang { 0% { -webkit-transform: translateY(28px); transform: translateY(28px); } 50% { -webkit-transform: translateY(24px); transform: translateY(24px); } 100% { -webkit-transform: translateY(28px); transform: translateY(28px); } } @keyframes hvr-hang { 0% { -webkit-transform: translateY(28px); transform: translateY(28px); } 50% { -webkit-transform: translateY(24px); transform: translateY(24px); } 100% { -webkit-transform: translateY(28px); transform: translateY(28px); } } @-webkit-keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(28px); transform: translateY(28px); } } @keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(28px); transform: translateY(28px); } } /*!------------------------------------*\ Dropdown 子MENU DrillDown \*!------------------------------------*/ /*.drawer-dropdown-menu { display: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0; background-color: rgba(50, 50, 50, .5); } .drawer-dropdown-menu > li { width: 100%; list-style: none; } .drawer-dropdown-menu-item { line-height: 3.75rem; display: block; padding: 0; padding-right: .75rem; padding-left: 1.5rem; text-decoration: none; color: #FFF; } .drawer-dropdown-menu-item:hover { text-decoration: underline; color: #CCC; background-color: transparent; } *! open * .drawer-dropdown.open > .drawer-dropdown-menu { display: block; } ** ! drawer-caret ** .drawer-dropdown .drawer-caret { display: inline-block; width: 0; height: 0; margin-left: 4px; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, opacity .2s ease; transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } ** ! open ** .drawer-dropdown.open .drawer-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); }*/ /*================================================ a LinkAction ================================================ h1 a { position: relative; display: inline-block; transition: .3s; } h1 a::after { position: absolute; bottom: 0; left: 50%; content: ''; width: 0; height: 1px; background-color: #02ecc71; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } h1 a:hover { width: 100%; }*/