@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Josefin+Sans); /* MENU */ menu { padding-bottom: 0; } menu ul { margin: 0 auto; overflow:hidden; } menu ul li { letter-spacing: 0em; list-style-type: none; float: left; width:19.36%; margin: 0 .8% .8% .8%; font-family: 'Josefin Sans', sans-serif !important; font-size: .7em; text-align:center; line-height:100%; } menu ul li span { letter-spacing: .2em; font-weight:normal; } menu ul li:nth-child(1n) { margin-left: 0; } menu ul li:nth-child(5n) { margin-right: 0; } menu ul li a:nth-child(4n) { letter-spacing: -0.1em; } menu ul li a { width:100％; height:auto; text-decoration:none; color: rgba(38, 83, 18, 1); text-transform: uppercase; background-color: #f7f7f7; padding: .5em 0 .5em 0; display:block; border-radius: 2px; max-width:100%; width: auto\9; behavior: url('../PIE-1.0beta3/PIE.htc'); /* CSS3 PIE */ } menu ul li a:hover { color: #666 !important; background-color: #dddddd; text-decoration: none !important; } menu ul li a:hover, menu a:active, menu a:visited { text-decoration: none !important; } menu .current { color:#666666; background: #efefef; font-weight:bold; } @media only screen and (max-width: 767px) { menu { margin: .5em; padding-bottom: 1%; } menu ul li { letter-spacing: 0em; list-style-type: none; float: left; width:49.55%; margin: 0 .8% .8% .8%; font-size: 1em; text-align:center; line-height:100%; } menu ul li:nth-child(1) { margin: 0 0 1% 0; width:100%; } menu ul li:nth-child(3) { margin: 0 0 1% 0 !important; } menu ul li:nth-child(5) { margin: 0 0 1% 0; } menu ul li span{ letter-spacing: .1em; font-size: .8em !important; } } @media only screen and (max-width: 480px) { menu ul li:nth-child(1) { margin: 0 0 1% 0; width:100%; } menu ul li, menu ul li a { letter-spacing: -0.05em; font-size: .95em !important; } } menu * { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } /* Breadcrumb */ .breadcrumb li { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !important; } @media only screen and (min-width: 581px) and (max-width: 660px){ .reco_menu ul li { font-size: .8em !important; } } @media only screen and (max-width: 580px) { .reco_menu { margin-top: 0; padding: 0; } .reco_menu ul li { letter-spacing: .1em; width:99%; font-size: .9em; text-align:center; line-height:100%; margin: 0 .4% 1% .4%; } .reco_menu ul li:nth-child(1) { margin: 0 .4% 1% .4%; }.reco_menu ul li:nth-child(3n) { margin: 0 .4% 0 .4%; } } /***** サブ・メニュー *****/ .subnav { letter-spacing: -.40em; padding: 0; margin: 0em 0 1em 0; } .subnav li { list-style-type: none; letter-spacing: normal; display: inline-block; vertical-align: top; line-height: auto; *display: inline; *zoom: 1; width:100%; text-align:left; font-size: 95%; } .subnav li a { width: 100%; display:block; padding: 2% 0 2% 0 ; margin: 0; text-decoration: none; height:auto; text-decoration:none; color: #2B5616; background: #fff; border-bottom: 1px solid #eeeeee; } .subnav li:nth-child(1) { border-top: 1px solid #eeeeee; } .subnav li a:hover { color: #2B5616; background: #f2f2f2; } .subnav li a.current { color: #2B5616; background: #f7f7f7; } @media only screen and (min-width: 481px) and (max-width: 767px){ .subnav li { width:33%;font-size: 90%; } .subnav li:nth-child(1),.subnav li:nth-child(2),.subnav li:nth-child(3) { border-top: 1px solid #f7f7f7 !important; } } @media only screen and (max-width: 480px){ .subnav { margin: 0em 0 1em 0 !important; } .subnav li { width: 50%; } .subnav li:nth-child(1),.subnav li:nth-child(2) { border-top: 1px solid #f7f7f7 !important; } .subnav li:nth-child(3) { border-top: 0px solid #fff !important; } } /***** フォトアルバム・メニュー *****/ .album { letter-spacing: -.40em; padding: 0; margin: 0em 0 1em 0; } .album li { list-style-type: none; letter-spacing: normal; display: inline-block; vertical-align: top; line-height: auto; *display: inline; *zoom: 1; width:14.25%; text-align:center; font-size: 80%; border-bottom: 1px solid #f7f7f7; } .album li a { width: 100%; display:block; padding: 0; margin: 0; text-decoration: none; width:100％; height:auto; text-decoration:none; color: #2B5616; background: #fff; } .album li:nth-child(1n) { border-top: 1px solid #f7f7f7; border-left: 1px solid #f7f7f7; } .album li:nth-child(7n), .album li:nth-child(14n) { border-right: 1px solid #f7f7f7; } .album li:nth-child(n+8) { border-top: 0px solid #f7f7f7; } .album li:last-child { border-right: 1px solid #f7f7f7; } .album li a:hover { color: #2B5616; background: #F2E4E8; } .album li a.current { color: #48CFAD; } .album li a.current2 { color: #F235D9; } @media only screen and (min-width: 481px) and (max-width: 767px){ .album li { width:20%;font-size: 70%; } .album li:nth-child(5) { border-top: 1px solid #f7f7f7 !important; } .album li:nth-child(5n) { border-right: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7; } .album li:nth-child(n+5) { border-top: 0px solid #f7f7f7; } } @media only screen and (max-width: 480px){ .album { margin: 0em 0 1em 0 !important; } .album li { width: 50%; } .album li:nth-child(-n+2) { border-bottom: 0px solid #f7f7f7 !important; } .album li:nth-child(odd) { border-top: 1px solid #f7f7f7; border-left: 1px solid #f7f7f7; border-bottom: 0px solid #f7f7f7 !important; } .album li:nth-child(even) { border-top: 1px solid #f7f7f7; border-right: 1px solid #f7f7f7; border-bottom: 0px solid #f7f7f7 !important; } .album li:nth-last-child(2), .album li:nth-last-child(3) { border-bottom: 1px solid #f7f7f7 !important; } .album li:last-child { border-bottom: 1px solid #f7f7f7 !important; border-top: 0px solid #f7f7f7 !important; } } /* */