/****************************************************************** Site Name:青年団公式ホームページ Author:saito taku Stylesheet: Main Stylesheet ! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css ******************************************************************/ /* ========================================================================== HTML5用 表示定義 ========================================================================== */ /* * {border: 1px solid #900;} */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block;/* IE6/7/8/9とFF3で定められていない 'block' 表示を修正します. */ } audio,canvas,video { display: inline-block;/* IE6/7/8/9とFF3で定められていない 'inline-block' 表示を修正します。 */ *display: inline; *zoom: 1; } audio:not([controls]) { display: none;/* 最新のブラウザーが規制なしで 'audio' を示すのを防ぎます。 */ height: 0;/* iOS5装置で過剰な高さを取り除きます。 */ } [hidden] { display: none;/* IE7/8/9、FF3、S4に存在しない 'hidden' 属性を定義化。※IE6未対応 */ } /* ========================================================================== 基礎 ========================================================================== */ html { width: 100%; height: 100%; font-size: 100%;/* bodyの 'font-size' が'em'の単位を使って大きさを変更しているIE6/7のテキストを修正します。 */ /* (↓) iOSテキスト・サイズを防ぎます、ユーザー・ズームを抑制することなく、方針変化の後適応します。 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html,button,input,select,textarea { font-family: sans-serif;}/* 'textarea'と他のフォーム要素の 'font-family ' の違いを修正します。 */ body { margin: 0; padding:0; width: 100%; height: 100%; word-wrap:break-word; } /* IE6/7の余白を修正. */ /* ========================================================================== Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted;} /* IE7/8/9, S5, Chrome.で存在しないスタイルを指定 */ mark /*（文書の中でハイライトしたい箇所に使用）*/ { background: #ff0; color: #000;/* IE6/7/8/9で存在しないスタイルを指定 */ } p,pre { margin: 0;/* IE6/7で違いのあるmarginを指定. */ } code,kbd,pre,samp {/* IE6, S4/5, Chromeでの以下の要素のフォントファミリーを修正 */ font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* 全てのブラウザで整形済みテキストの読みやすさを改善します。 */ pre /*（preformatted text:整形済み）*/ { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q /*（Quotation（引用）の略:短い引用）*/ { quotes: none;/* quotesはIE6/7でサポートされていないので非表示。 */ } q:before,q:after {/* 'quotes'属性はS4でサポートされていない。*/ content: ''; content: none; } sub,sup {/* 全てのブラウザで、下付き文字と上付き文字の高さを調整 */ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em;} sub { bottom: -0.25em;} /* ========================================================================== Embedded content (埋め込まれた内容) ========================================================================== */ img { border: 0; /* IE6/7/8/9,FF3で 'a'要素の中にあるとき、境界を取り除く */ -ms-interpolation-mode:; /* bicubic;IE7の画質を改善します */ /* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ } svg:not(:root) { overflow: hidden;/* IE9で奇妙な'overflow'の誤りを修正 */ } /* ========================================================================== フォーム（Forms） ========================================================================== */ form { margin: 0;}/* IE6/7の奇妙なmarginを修正 */ fieldset /* (form中の入力部品をグループ化) */ {/* border, margin, paddingを指定 */ border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend /* (fieldset でグループ化したタイトル) */ { border: 0; padding: 0; /* FF3用 */ white-space: normal; /* FF3用 */ *margin-left: -7px; /* IE6/7ででる不具合を修正 */ } button,input,select,textarea { font-size: 100%; /*全てのブラウザで受け継がれているわけではないフォントサイズを修正 */ margin: 0; /* IE6/7, FF3+, S5, Chromeでそれぞれ違うマージンを調整 */ vertical-align: baseline; *vertical-align: middle; /* 全てのブラウザでの見方を統一させる */ } button,input { line-height: normal; } /* FF3/4用 */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* iOSで'input'タイプをクリックできない個所を修正 */ cursor: pointer; *overflow: visible; /* 通常のテキスト入力に影響を及ぼすことなく、IE7で内部の間隔を取る ※IE6未対応 */ } button[disabled], input[disabled] { cursor: default;/* 無効になっている要素にカーソルのデフォルトを再指定 */ } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* IE8/9用 */ padding: 0; /* IE8/9用 */ *height: 13px; /* IE7用(余分なpaddingを取るためのハック:IE6未対応) */ *width: 13px; /* IE7用(余分なpaddingを取るためのハック:IE6未対応) */ } input[type="search"] { -webkit-appearance: textfield; /* S5, Chrome用 */ -moz-box-sizing: content-box;/* Chrome用 */ -webkit-box-sizing: content-box;/* S5用 */ box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; /*OS Xでの S5,Chromeのpaddingと検索キャンセルボタンを取る */ } button::-moz-focus-inner,i nput::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; /* IE6/7/8/9でのスクロールバーを取り除く */ vertical-align: top; /* 全てのブラウザを調整 */ max-width: 100%; } /****************************************************************** Site Name: Author: Stylesheet: Mixins（関数） & Constants Stylesheet This is where you can take advantage of LESS' great features: Mixins & Constants. I won't go in-depth on how they work exactly, there are a few articles below that will help do that. What I will tell you is that this will help speed up simple changes like changing a color or adding CSS3 techniques like box shadow and border-radius. A WORD OF WARNING: It's very easy to overdo it here. Be careful and remember less is more. ******************************************************************/ /********************* CLEARFIXIN' *********************/ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /********************* TOOLS *********************/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .image-replacement { text-indent: 100%; white-space: nowrap; overflow: hidden; } /********************* COLORS Need help w/ choosing your colors? Try this site out: http://0to255.com/ *********************/ /* Here's a great tutorial on how to use color variables properly: http://sachagreif.com/sass-color-variables/ */ /********************* TYPOGRAPHY *********************/ /* To embed your own fonts, use this syntax and place your fonts inside the library/fonts folder. For more information on embedding fonts, go to: http://www.fontsquirrel.com/ Be sure to remove the comment brackets. */ /* @font-face { font-family: 'Font Name'; src: url('../fonts/font-name.eot'); src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'), url('../fonts/font-name.woff') format('woff'), url('../fonts/font-name.ttf') format('truetype'), url('../fonts/font-name.svg#font-name') format('svg'); font-weight: normal; font-style: normal; } */ /* use the best ampersand http://simplebits.com/notebook/2008/08/14/ampersands-2/ */ span.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; } /* text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .alert { margin: 10px; padding: 5px 18px; border: 1px solid; } .alert-help { margin: 10px; padding: 5px 18px; border: 1px solid; border-color: #e8dc59; background: #ebe16f; } .alert-info { margin: 10px; padding: 5px 18px; border: 1px solid; border-color: #bfe4f4; background: #d5edf8; } .alert-error { margin: 10px; padding: 5px 18px; border: 1px solid; border-color: #f8cdce; background: #fbe3e4; } .alert-success { margin: 10px; padding: 5px 18px; border: 1px solid; border-color: #deeaae; background: #e6efc2; } /********************* BORDER RADIUS *********************/ /* NOTE: For older browser support (and some mobile), don't use the shorthand to define *different* corners. USAGE: .border-radius(4px); */ /********************* TRANISTION *********************/ /* .transition(all,2s); */ /********************* CSS3 GRADIENTS Be careful with these since they can really slow down your CSS. Don't overdo it. *********************/ /* .css-gradient(#dfdfdf,#f8f8f8); */ /********************* BOX SHADOW *********************/ /* .boxShadow(0,0,4px,0,#444); */ /* .boxShadow(none); */ /********************* BUTTONS *********************/ .button, .button:visited { border: 1px solid #be0d37; border-top-color: #db0f3f; border-left-color: #db0f3f; padding: 4px 12px; color: #ffffff; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; margin-bottom: 20px; line-height: 21px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #e40f42; background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42)); background-image: -webkit-linear-gradient(top, #f01d4f, #e40f42); background-image: -moz-linear-gradient(top, #f01d4f, #e40f42); background-image: -o-linear-gradient(top, #f01d4f, #e40f42); background-image: linear-gradient(to bottom, #f01d4f, #e40f42); } .button:hover, .button:visited:hover, .button:focus, .button:visited:focus { color: #ffffff; border: 1px solid #be0d37; border-top-color: #9d0a2d; border-left-color: #9d0a2d; background-color: #cc0e3b; background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#cc0e3b)); background-image: -webkit-linear-gradient(top, #e40f42, #cc0e3b); background-image: -moz-linear-gradient(top, #e40f42, #cc0e3b); background-image: -o-linear-gradient(top, #e40f42, #cc0e3b); background-image: linear-gradient(to bottom, #e40f42, #cc0e3b); } .button:active, .button:visited:active { background-color: #f01d4f; background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#f01d4f)); background-image: -webkit-linear-gradient(top, #e40f42, #f01d4f); background-image: -moz-linear-gradient(top, #e40f42, #f01d4f); background-image: -o-linear-gradient(top, #e40f42, #f01d4f); background-image: linear-gradient(to bottom, #e40f42, #f01d4f); } .blue-button, .blue-button:visited { border-color: #1472ad; text-shadow: 0 1px 1px #1472ad; background-color: #1681c4; background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4)); background-image: -webkit-linear-gradient(top, #1990db, #1681c4); background-image: -moz-linear-gradient(top, #1990db, #1681c4); background-image: -o-linear-gradient(top, #1990db, #1681c4); background-image: linear-gradient(to bottom, #1990db, #1681c4); -webkit-box-shadow: inset 0 0 3px #59b3ec; -moz-box-shadow: inset 0 0 3px #59b3ec; box-shadow: inset 0 0 3px #59b3ec; } .blue-button:hover, .blue-button:visited:hover, .blue-button:focus, .blue-button:visited:focus { border-color: #116396; background-color: #1472ad; background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad)); background-image: -webkit-linear-gradient(top, #1784c9, #1472ad); background-image: -moz-linear-gradient(top, #1784c9, #1472ad); background-image: -o-linear-gradient(top, #1784c9, #1472ad); background-image: linear-gradient(to bottom, #1784c9, #1472ad); } .blue-button:active, .blue-button:visited:active { background-color: #1990db; background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db)); background-image: -webkit-linear-gradient(top, #1681c4, #1990db); background-image: -moz-linear-gradient(top, #1681c4, #1990db); background-image: -o-linear-gradient(top, #1681c4, #1990db); background-image: linear-gradient(to bottom, #1681c4, #1990db); } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ １■BASE (MOBILE) SIZE ここは、人々が携帯でみるモバイル用のスタイルです。 あまり多くの要素を加えないこと。表示速度は重要ですので、常に軽くしてください。 これが主なスタイルシートの最上位で呼ばれて、すべてのビューポートで使われます。 そして、ここのすべてがモバイル機器でロードされる時から、もう一度スタイルを整えないでください。 ０１■ 基本構造（レイアウト、グリッドスタイル） ０２■ フォント設定 ０３■ リンク設定 ０４■ リスト設定 ０５■ テーブル設定 ０６■ ヘッダーの基本設定 ０７■ ナビゲーションの基本設定 ０８■ ポスト及びコメントの基本設定 ０９■ ページナビの基本設定 １０■ コメントの基本設定 １１■ コメントフォームの基本設定 １２■ サイドバーの基本設定 １３■ フッターの基本設定 １４■ 画像設定 １５■ 各ページのクラス設定 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /****************************************** ０１■ 基本構造（レイアウト、グリッドスタイル：MOBILE用） ******************************************/ body { background: url(../images/common/bg01.jpg) top center; } .wrap { width: 100%; margin: 0 auto; } #content { margin: 0 auto; width: 90%; } /* 汎用クラス */ .small {font-size: 0.8em;} /****************************************** ０２■. フォント設定(MOBILE用) ******************************************/ body { font-family:Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","iragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size: 67.5%; color: #565656; } h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; margin: 0; /*もしwebfontsを使うならば、必ずweightをチェック http://css-tricks.com/watch-your-font-weight/ */ } h1 a,.h1 a,h2 a,.h2 a,h3 a,.h3 a,h4 a,.h4 a,h5 a,.h5 a {text-decoration: none;} h1,.h1 { font-size: 2.5em; line-height: 1.2; margin-bottom: 10px;} h2,.h2 { font-size: 1.75em; line-height: 1.2; margin-bottom: 5px;letter-spacing: 0.05em;} h3,.h3 { font-size: 1.4em; line-height: 1.2; margin-bottom: 3px;letter-spacing: 0.04em;} h4,.h4 { font-size: 1.3em; line-height: 1.2; margin-bottom: 3px;letter-spacing: 0.03em;} h5,.h5 { font-size: 1em;line-height: 1.2; margin-bottom: 3px; text-transform: uppercase;letter-spacing: 0.1em;} h6,.h6 { font-size: 0.75em; margin-bottom: 10px;} p {font-size: 1.25em;margin-bottom: 10px; letter-spacing: 0.01em;line-height:1.45; } b,strong,.strong {font-weight: bold; } /* FF3+, S4/5, Chrome.で'bolder'を指定 */ small,.small { font-size: 0.75em; } dfn /* (用語が使用されていることを示す) */,em,.em {font-style: italic;} blockquote { margin: 1em 40px;} /* (引用文) */ blockquote.wp-embedded-content {margin: 0;} blockquote.wp-embedded-content p {margin: 0;} figure { /* (余談:本筋とは直接には関係しない図表やソースコードなどを記述) */ margin: 0;} /* IE6/7/8/9,S5,O11で指定されていないmarginを指定 */ /* ***************************************** ０３■ リンク設定(MOBILE用) ***************************************** */ a { word-wrap:break-word; } a,a:link { color: #4cbacc; text-decoration: none;} a:visited { color: #4cbacc;} a:hover { color: #71c7d5;} a:active { color: #71c7d5;} a:focus { outline: thin dotted;}/* Chromeと他のブラウザーの間の 'outline'の違いを修正 */ a:active, a:hover { outline: 0;} /* 全てのブラウザでマウスオーバーしたときなど、読みやすさを改善 */ a:visited:link {/* iPhones/iPads用のハイライトリンク。 モバイルデバイスで:hover selectorが基本的に働きます。*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);} /****************************************** ０４■ リスト設定(MOBILE用) ******************************************/ menu,ol,ul { margin: 0; padding: 0; list-style: none; } dl { margin: 0; } dd { margin: 0; } nav ul,nav ol { list-style: none; list-style-image: none;} /* IE7でのリストスタイルの違いを修正 */ /****************************************** ０５■ テーブル設定(MOBILE用) ******************************************/ table { border-collapse: collapse; border-spacing: 0; /* cell間のspacingを取る */ } /****************************************** ０６■ ヘッダーの基本設定(MOBILE用) ******************************************/ #container #header { width: 100%; margin-bottom: 15px; } #container #header #inner-header { position: relative; background: url(../images/common/bg_header-left.jpg) repeat-x top center; } #container #header #inner-header #logo { text-align: center; padding-top: 10px; } #container #header #search { visibility: hidden; height: 0; width: 0; } #container #header .langue { position:absolute; right: 10px; top: 10px; overflow:hidden; } #container #header .langue ul { position:relative; left:50%; float:left; } #container #header .langue ul li { position:relative; left:-50%; float:left; padding: 0 5px; line-height: 1; text-shadow: 0px 1px 1px #fff;/*Apple スタイル*/ color: #ccc; font-size: 13px; } #container #header .langue ul li.en { border-left: solid 1px #aaa; border-right: solid 1px #aaa; } /****************************************** ０７■ ナビゲーションの基本設定(MOBILE用) ******************************************* 全てのナビゲーションの要素は、「.nav」クラスを function[wp_menu]で適用してます。 このことによって、簡単にきれいにスタイルを指定できます。 携帯のためにdropdownは使うべきではありません。 メニューを管理する方法は以下で確認できます。 http://www.alistapart.com/articles/organizing-mobile/ */ .nav { position:relative; overflow:hidden; display: block ; width: 100%; margin: 15px auto 0; } .nav ul { position:relative; left:50%; float:left; } .nav ul li { position:relative; left:-50%; float:left; margin: 0 5px 5px; } .nav li a {/* モバイル用のため、:hoverなど指定しません出来るだけこのファイルを小さくします */ display: block; text-decoration: none; padding: 0 15px; height: 30px; color: #fff; font-size: 1.4em; font-weight: 500; line-height: 30px; text-align: center; background-color:#525759; text-shadow: 0px 0px 2px #222;/*テキストシャドー*/ border-radius : 4px; /* CSS3 */ -moz-border-radius : 4px; /* Firefox */ -webkit-border-radius : 4px; /* Safari,Chrome */ } .nav li.nav-news a {background-color: #2769a3;} .nav li.nav-plays a {background-color: #087878;} .nav2 { position:relative; overflow:hidden; display: block ; width: 100%; margin:0 auto; } .nav2 ul { float: none; left: auto; display: inline-block; text-align: center; } .nav2 ul li { float: none; left: auto; display: inline-block; margin: 0 3px 5px; } .nav2 ul li a { /*display: table-cell; table-cellはIE.6,7,FF2以下では未対応 */ display: block; width: 70px; height: 30px; vertical-align: middle; color: #fff; line-height: 30px; overflow: hidden; text-align: center; font-weight: 700; background-color:#525759; text-shadow: 0px 0px 2px #222;/*テキストシャドー*/ border-radius : 4px; /* CSS3 */ -moz-border-radius : 4px; /* Firefox */ -webkit-border-radius : 4px; /* Safari,Chrome */ /* -moz-box-shadow :0px 0px 2px rgba(000,000,000,0.5); -webkit-box-shadow :0px 0px 2px rgba(000,000,000,0.5); box-shadow :0px 0px 2px rgba(000,000,000,0.5); */ } .nav2 ul li a span { white-space: nowrap; } .nav2 ul li.nav-links a { line-height: 1.1; padding-top: 2px;} /****************************************** ０８■ mainColumn(メインコンテンツの基本構造) ***************************************** */ #content #main,#content .main .body { padding:20px; background-color: #fff;} #news #content #main,#play #content #main { position: relative; padding:10px 20px; overflow: hidden; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } .error404 #content #main { margin-bottom: 20px; } #news #content .main.section {margin-bottom: 20px;} #news #content .main.info { overflow: hidden; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #content #main .section { margin:0 auto;} /* タイトル */ h2.bar { margin-bottom: 0; height: 30px; line-height: 30px; color: #fff; font-weight: 300; font-size: 1.5em; letter-spacing: 0.075em; text-shadow: 1px 1px 1px #666;/*テキストシャドー*/ background: url(../images/common/bar_title-stage-bg.png) #087878 repeat-x bottom center; overflow: hidden; border-top-left-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; overflow: hidden; } h2.bar span {padding-left: 20px;} h2.bar span.out {visibility: hidden;} .logged-in h2.bar span.out {visibility: visible;} h2.bar a { float: right; display: block; background: url(../images/common/bar_title-play-toplay-over.png) no-repeat center center;} h2.bar a img.link { float: right;} h2.bar a:hover img.link { visibility: hidden;} #news-lasted h2.bar { background: url(../images/common/bar_title-news-bg.png) #2769a3;} #news-lasted h2.bar a { background-image: url(../images/common/bar_title-news-arrow-over.png);} #news h2.bar { background: url(../images/common/bar_title-news-bg.png) #2769a3;} #news h2.bar a { background-image: url(../images/common/bar_title-news-tolasted-over.png);} #news.tag h2.bar a { background-image: url(../images/common/bar_title-news-tolasted-over.png);} #news .info h2.bar a { background-image: url(../images/common/bar_title-news-togekidan-over.png);} #news .seinendan-info h2.bar a { background-image: url(../images/common/bar_title-news-toseinendan-over.png);} #news .oriza h2.bar a { background-image: url(../images/common/bar_title-news-tooriza-over.png);} #news .members h2.bar a { background-image: url(../images/common/bar_title-news-tomembers-over.png);} #play.next h2.bar a, #play.next h2.bar a { background-image: url(../images/common/bar_title-play-topast-over.png);} #play.single h2.bar a { background-image: url(../images/common/bar_title-play-toplay-over.png);} #about h2.bar { background : url(../images/common/bar_title-about-bg.png) #136c2f;} #about h2.bar a { background-image: url(../images/common/bar_title-about-tooriza-over.png);} #oriza h2.bar { background : url(../images/common/bar_title-oriza-bg.png) #728825;} #oriza h2.bar a { background-image: url(../images/common/bar_title-oriza-tochronologic-over.png);} #oriza.education h2.bar a{ background-image: url(../images/common/bar_title-oriza-tomessage-over.png);} #oriza.message h2.bar a, #oriza.page-template-page-oriza-chronologic h2.bar a, #oriza.chronologic h2.bar a, #oriza.single h2.bar a{ background-image: url(../images/common/bar_title-oriza-tonews-over.png);} #links h2.bar { background : url(../images/common/bar_title-links.png) #9d6b24;} #links h2.bar a { background-image: url(../images/common/bar_title-links-toplay-over.png);} #contact h2.bar { background : url(../images/common/bar_title-contact-bg.png) #991e47;} #contact h2.bar a { background-image: url(../images/common/bar_title-contact-tonews-over.png);} #top.search h2.bar { background: url(../images/common/bar_title-news-bg.png) #2769a3;} #search h2.archive-title { margin-bottom: 0; padding-left: 20px; height: 30px; line-height: 30px; color: #fff; font-weight: 300; font-size: 1.5em; text-shadow: 1px 1px 1px #666;/*テキストシャドー*/ background: url(../images/common/bar_title-stage-bg.png) #087878 repeat-x bottom center; overflow: hidden; border-top-left-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; overflow: hidden; background: url(../images/common/bar_title-news-bg.png) #2769a3; } .footer {margin-bottom: 40px; height: 21px; background: url(../images/common/bar_bottom-news.png) #fff repeat-x bottom center; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; overflow: hidden; } .footer a { float: right; display: block; width: auto; height: 21px; background: url(../images/common/bar_bottom-tolastednewslist-over.png) no-repeat center center;} .footer a:hover img { visibility: hidden;} #top .footer { margin-bottom: 0px;} #stage-schedule .footer { background-image: url(../images/common/bar_bottom-stage.png);} #stage-schedule .footer a { background-image: url(../images/common/bar_bottom-tostage-over.png);} #news-lasted .footer { background-image: url(../images/common/bar_bottom-news.png);} #news-lasted .footer a { background-image: url(../images/common/bar_bottom-tonews-over.png);} #search .footer, #news .footer { background-image: url(../images/common/bar_bottom-news.png);} #news .main .footer { margin-bottom: 0px;} #news .footer a { background-image: url(../images/common/bar_bottom-news-tolasted-over.png);} #news .info .footer a { background-image: url(../images/common/bar_bottom-news-togekidan-over.png);} #news .seinendan-info .footer a { background-image: url(../images/common/bar_bottom-news-toseinendan-over.png);} #news .oriza .footer a { background-image: url(../images/common/bar_bottom-news-tooriza-over.png);} #news .members .footer a { background-image: url(../images/common/bar_bottom-news-togekidanin-over.png);} #next #content .footer { background-image: url(../images/common/bar_bottom.png);} #next #content .footer a { background-image: url(../images/common/bar_bottom-topaststage-over.png);} #play.next .footer a { background-image: url(../images/common/bar_bottom-play-topast-over.png);} #play .footer { background-image: url(../images/common/bar_bottom-play.png);} #play.plays .footer a { background-image: url(../images/common/bar_bottom-tostageinfo-over.png);} #play .footer a { background-image: url(../images/common/bar_bottom-play-toplay-over.png);} #about .footer { background-image: url(../images/common/bar_bottom-about.png);} #about .footer a { background-image: url(../images/common/bar_bottom-about-tooriza-over.png);} #oriza .footer { background-image: url(../images/common/bar_bottom-oriza.png);} #oriza .footer a, #oriza.hirata-oriza .footer a { background-image: url(../images/common/bar_bottom-oriza-tochronologic-over.png);} #oriza.education .footer a{ background-image: url(../images/common/bar_bottom-oriza-tomessage-over.png);} #oriza.message .footer a, #oriza.chronologic .footer a, #oriza.chronologic .footer a, #oriza.single-oriza .footer a{ background-image: url(../images/common/bar_bottom-oriza-tonews-over.png);} #links .footer { background-image: url(../images/common/bar_bottom-links.png);} #links .footer a { background-image: url(../images/common/bar_bottom-links-toplay-over.png);} #contact .footer { background-image: url(../images/common/bar_bottom-contact.png);} #contact .footer a { background-image: url(../images/common/bar_bottom-contact-tonews-over.png);} #top.search .footer a {background-image: url(../images/common/bar_bottom-news.png);} body#top .content-inner h3 a:visited, body#top .content-inner h3 a:link, body#play #main a { color: #087878;} body#top .content-inner h3 a:hover, body#play #main a:hover { color: #71c7d5;} /* body#news #main h2.h2 a { border-bottom: dotted 1px #2769a3;} */ body#news #main a:link,body#news .main a:link { color: #2769a3;} body#news #main a:visited,body#news .main a:visited { color: #2769a3;} body#news #main a:hover { color: #71c7d5;} body#news #main a:active { color: #71c7d5;} body#about #main a { color: #136c2f;} body#about #main a:hover { color: #71c7d5;} body#oriza #main h2 a { border-bottom: dotted 1px #728825;} body#oriza #main a:link { color: #728825;} body#oriza #main a:visited{ color: #728825;} body#oriza #main a:hover { color: #afc168;} body#oriza #main a:active { color: #afc168;} body#links #main h2 a { border-bottom: dotted 1px #739536;} body#links #main a:link { color: #9d6b24;} body#links #main a:visited{ color: #9d6b24;} body#links #main a:hover { color: #d1ac79;} body#links #main a:active { color: #d1ac79;}/* 71c7d5 */ body#top .content-inner .section.young h3 a:visited, body#top .content-inner .section.young h3 a:link, body#top .content-inner .section.link h3 a:visited, body#top .content-inner .section.link h3 a:link { color: #9d6b24;font-weight: 300; } body#play #main .section.young a:visited, body#play #main .section.young a:link, body#play #main .section.link a:visited, body#play #main .section.link a:link { color: #9d6b24;} body#top .content-inner .section.young h3 a:hover, body#top .content-inner .section.young h3 a:active, body#top .content-inner .section.link h3 a:hover, body#top .content-inner .section.link h3 a:active { color: #d1ac79;font-weight: 300;} body#play #main .section.young a:hover, body#play #main .section.young a:active, body#play #main .section.link a:hover, body#play #main .section.link a:active { color: #d1ac79;} /****************************************** ０９■ ページナビの基本設定(MOBILE用) ***************************************** */ .page-navigation, .wp-prev-next { margin: 3.1em 0 2.2em; position:relative; overflow:hidden; } .page-navigation ol { position:relative; left:50%; float:left; } .page-navigation .bones_page_navi li { position:relative; left:-50%; float:left; margin-left: 10px; height: 27px; line-height: 25px; font-size: 1.4em; } .bones_page_navi li a { position: relative; display: block; padding: 0 5px; height: 27px; line-height: 25px;/* 25/px */ text-decoration: none; border: 1px solid #176c9a; } .bones_page_navi li a:link, .bones_page_navi li a:visited { color: #176c9a; } .bones_page_navi li a:hover, .bones_page_navi li a:focus { color: #fff; background-color:#176c9a ; } .bones_page_navi li.bpn-current { padding: 0px 5px; position: relative; color: #fff; border: 1px solid #176c9a; background-color: #176c9a; } .play .bones_page_navi li a, .play.young .bones_page_navi li a { border: 1px solid #087878;} body.play.young .bones_page_navi li.bpn-prev-link a, body.play.young .bones_page_navi li.bpn-next-link a {padding: 0 3px;border: none;} body#play #main .bones_page_navi li a:hover { background-color:#087878 ;color: #fff; } .play .bones_page_navi li.bpn-current, .play.young .bones_page_navi li.bpn-current { border: 1px solid #087878; background-color: #087878;} body#links .bones_page_navi li a, body#links .bones_page_navi li a { border: 1px solid #9d6b24;} body#links .bones_page_navi li.bpn-prev-link a, body#links .bones_page_navi li.bpn-next-link a {padding: 0 3px;border: none;} body#links #main .bones_page_navi li a:hover { background-color:#9d6b24 ;color: #fff; } body#links .bones_page_navi li.bpn-current, body#links .bones_page_navi li.bpn-current { border: 1px solid #9d6b24; background-color: #9d6b24;} .news .bones_page_navi li a { border: 1px solid #2769a3;} body#news #main .bones_page_navi li a:hover { background-color:#2769a3 ;color: #fff; } .news .bones_page_navi li.bpn-current { border: 1px solid #2769a3; background-color: #2769a3;} .message .bones_page_navi li a { border: 1px solid #728825;} body#oriza #main .bones_page_navi li a:hover { background-color:#728825; color: #fff;} .message .bones_page_navi li.bpn-current { border: 1px solid #728825; background-color: #728825;} .page-template-page-links-young-php.young .bones_page_navi li a { border: 1px solid #9d6b24;} body#links #main .bones_page_navi li a:hover { background-color:#9d6b24 ;color: #fff; } .young.page-template-page-links-young-php .bones_page_navi li.bpn-current { border: 1px solid #9d6b24; background-color: #9d6b24;} body .bones_page_navi li.bpn-prev-link, body .bones_page_navi li.bpn-next-link {font-weight: normal;} body .bones_page_navi li.bpn-prev-link a, body .bones_page_navi li.bpn-next-link a {padding: 0 3px;border: none;} .bones_page_navi li.bpn-prev-link a:hover, .bones_page_navi li.bpn-next-link a:hover, .bones_page_navi li.bpn-first-page-link a:hover, .bones_page_navi li.bpn-last-page-link a:hover { } /* end .bones_page_navi */ /* fallback previous & next links */ .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /****************************************** １０■ コメントの基本設定(MOBILE用) ***************************************** */ .commentlist li { position: relative; clear: both; overflow: hidden; list-style-type: none; margin-bottom: 1.5em; padding: 0.7335em 10px; /* end .commentlist li ul.children */ } .commentlist li:last-child { margin-bottom: 0; } .commentlist li ul.children { margin: 0; /* variations */ /* change number for different depth */ } .commentlist li[class*=depth-] { margin-top: 1.1em; } .commentlist li.depth-1 { margin-left: 0; margin-top: 0; } .commentlist li:not(.depth-1) { margin-right: -10px; margin-left: -10px; margin-top: 0; padding-bottom: 0; } .commentlist .odd { background: #eee; } .commentlist .even { background: #fefefe; } .commentlist .vcard { margin-left: 50px; } .commentlist .vcard cite.fn { font-weight: 700; font-style: normal; } .commentlist .vcard time { float: right; } .commentlist .vcard time a { color: #999; text-decoration: none; } .commentlist .vcard time a:hover { text-decoration: underline; } .commentlist .vcard img.avatar { position: absolute; left: 10px; padding: 2px; border: 1px solid #cecece; background: #fff; } .commentlist .comment_content { margin-left: 50px; } .commentlist .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } .commentlist .comment-reply-link { text-decoration: none; float: right; background: #4598bb; padding: 3px 5px; color: #fff; opacity: 0.65; margin-bottom: 10px; font-weight: 700; font-size: 0.9em; } .commentlist .comment-reply-link:hover, .commentlist .comment-reply-link:focus { opacity: 1; } /****************************************** １１■ コメントフォームの基本設定(MOBILE用) ***************************************** */ .respond-form { margin: 1.5em 10px; padding-bottom: 2.2em; } .respond-form form { margin: 0.75em 0; } .respond-form form li { list-style-type: none; clear: both; margin-bottom: 0.7335em; } .respond-form form li label, .respond-form form li small { display: none; } .respond-form form input[type=text], .respond-form form input[type=email], .respond-form form input[type=url], .respond-form form textarea { padding: 3px 6px; background: #efefef; border: 2px solid #cecece; line-height: 1.5em; /* form validation */ } .respond-form form input[type=text]:focus, .respond-form form input[type=email]:focus, .respond-form form input[type=url]:focus, .respond-form form textarea:focus { background: #fff; } .respond-form form input[type=text]:invalid, .respond-form form input[type=email]:invalid, .respond-form form input[type=url]:invalid, .respond-form form textarea:invalid { outline: none; border-color: #fbc2c4; background-color: #f6e7eb; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } .respond-form form input[type=text], .respond-form form input[type=email], .respond-form form input[type=url] { max-width: 400px; min-width: 250px; } .respond-form form textarea { resize: none; width: 97.3%; height: 150px; } /* comment submit button */ /* comment form title */ #comment-form-title { margin: 0 0 1.1em; } /* cancel comment reply link */ /* logged in comments */ /* allowed tags */ #allowed_tags { margin: 1.5em 10px 0.7335em 0; } /* no comments */ .nocomments { margin: 0 20px 1.1em; } /****************************************** １２■ サイドバーの基本設定(MOBILE用) ***************************************** */ #sidebar1 { margin:0 auto; padding: 0; width: 250px; } .widget { padding: 0; margin: 0; } .widget h4.widgettitle, .widget h5.topbannertitle { visibility: hidden; height: 0; width: 0; position: absolute; } .widget_text a { display: block; margin: 0 0 10px; padding: 0; line-height: 0; color: #e9e5da; } .widget_text .textwidget a img { margin: 0; padding: 0; } .widget_text .textwidget a:hover img { opacity: 0.9; } /* twitter */ .sidebar #custom_html-2, .sidebar #custom_html-3 { max-height: 613px; overflow-x: hidden; } /* 主催からの定期便 2022.12.16 */ iframe.mainsitelist { display: block; margin: auto; border: none; background: #fff; } @media screen and (max-width: 699px) { iframe.mainsitelist { margin: 10px auto; /* width: 200px; */ height: 30px; overflow:hidden; } } /*----------------------- ローカルナビ -----------------------*/ .side1 div { position:relative; overflow:hidden; text-align: center; } .side1 div a { border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } ul.menu { text-align: center; } ul.menu li { display: inline-block; margin:0 5px 10px; height: 30px; text-align: center; } ul.menu li a { display: block; padding:0 1em; width: 100%; height: 30px; font-size: 1.2em; line-height: 30px; /*text-shadow: 0px 0px 2px rgba(0,0,0,0.5);テキストシャドー*/ background-color: #fff; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } ul#menu-news li a {color: #2769a3} /* お知らせ */ ul#menu-next-3 li a, ul#menu-playlist li a {color: #087878;} /* 公演案内 */ ul#menu-about li a {color: #0d7b32} /* 青年団とは */ ul#menu-oriza li a {color: #70852e} /* 平田オリザ */ ul#menu-links li a {color: #9D6B24;} /* リンク・若手 */ ul#menu-news li.current-menu-parent a,ul#menu-news-2 li a:hover, ul#menu-news li.current-menu-item a { color: #fff; background-color: #2769a3;} /* お知らせ */ ul#menu-next-3 li a:hover, ul#menu-playlist li a:hover, ul#menu-playlist li.current-menu-item a { color: #fff; background-color: #087878;} /* 公演案内 公演履歴 */ ul#menu-about li a:hover, ul#menu-about li.current-menu-item a { color: #fff; background-color: #0d7b32;} /* 青年団とは */ ul#menu-oriza li a:hover, ul#menu-oriza li.current-menu-item a { color: #fff; background-color: #70852e;} /* 平田オリザ */ ul#menu-links li a:hover, ul#menu-links li.current-menu-item a { color: #fff; background-color: #9D6B24;} /* リンク・若手 */ .paststage { margin: 0 0 10px; } .paststage a { display: block; margin: 0 auto ; min-width: 100px; width: auto; max-width: 150px; height: 25px; font-size: 1.2em; line-height: 25px; /*border-radius : 3px; CSS3 */ /*-moz-border-radius : 3px; Firefox */ /*-webkit-border-radius : 3px; Safari,Chrome */ background: url("../images/common/bar_title-play-bg.png") #087878 center center; } .paststage a:link, .paststage a:visited { color: #fff;} .paststage a:hover { color: #fff; background: url(../images/common/bar_title-play-bg-over.png) #087878 center center repeat-x;} /* 176c9a */ .paststage a:active {color: #176c9a;} .massage {margin-bottom: 10px;} .massage a { display: block; margin: 0 auto; max-width: 250px; width:130px; min-width: 100px; height: 25px; color: #fff; font-size: 1.2em; line-height: 25px; background: url(../images/common/bar_title_bg-oriza.png) #728825 center center repeat-x; } .massage a:hover { background: url(../images/common/bar_title_bg-oriza-over.png) #afc168 center center repeat-x; } body#top .massage { width: 250px; height: 70px; overflow: hidden; } body#top .massage a { width: 250px; height: 70px; background: url(../images/common/banner-teikibin.png) #728825 center center repeat-x; } body#top .massage a:hover { opacity: 0.9; } body#top .massage a span { visibility: hidden; } ul.orizamessage { display: none; visibility: hidden; height: 0; width: 0; } .news.btn a { display: block; margin: 0 auto; padding: 0 1em; max-width: 250px; width:130px; min-width: 100px; height: 30px; color: #fff; font-size: 1.3em; line-height: 30px; background: url(../images/common/bar_title-news-bg.png) #2769a3 center center repeat-x;} .news.btn a:hover { /* ! */ color: #fff; background: url(../images/common/bar_title-news-bg-over.png) #2769a3 center center repeat-x;} .news.btn a:active {color: #2769a3;} .side1 div.yearly { margin-bottom: 10px; padding: 0; /* padding: 5px ; */ background-color: #fff;/* f4f4ef,fcfcf7 */ border: 7px solid #fff; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } div.links.btn a { display: block; margin: 0 auto 10px; width: 200px; height: 25px; color: #fff; font-size: 1.2em; line-height: 25px; background: url("../images/common/bar_title-links-bg.png") #966624 center center repeat-x; } .side1 div.yearly a:visited, .side1 div.yearly a:link { color: #006b6c; } .side1 div.yearly a:hover { color: #71c7d5; } div.links.btn a:hover { background: url("../images/common/bar_title-links-bg-over.png") #966624 center center repeat-x; } .side1 div#online { padding-top: 10px;} #online a { display: block; margin: 0 auto; padding: 0 1em; width: 200px; height: 30px; color: #fff; font-size: 1.3em; line-height: 30px; background: url(../images/common/bar_title_bg-red.png) #cf3331 center center repeat-x; } #online a:hover { background: url(../images/common/bar_title_bg-red-over.png) #cf3331 center center repeat-x; } body.archive.category div.side1 #search.side, div.side1 #search.side { margin-top: 10px; margin-bottom:10px; } #search.side { margin-bottom: 30px;} #search.side #searchform { max-width: 300px;} body div.textwidget .twitter-timeline html body h1.summary a.customisable-highlight { font-size: 0.5em; color: #fff; } h1.summary a.customisable-highlight { font-size: 0.5em; } #wpcf7-f4145-o1, #wpcf7-f89-o1, #wpcf7-f89-o2, #wpcf7-f4145-o2 { position: relative; margin-bottom: 10px; height: 130px; background: url(../images/common/banner-mailmagazine.png) #52BCD3 top center no-repeat; } #wpcf7-f4145-o1 .wpcf7-form, #wpcf7-f89-o1 .wpcf7-form, #wpcf7-f89-o2 .wpcf7-form{ position: absolute; top: 81px; left: 10px; } #wpcf7-f4145-o2 .wpcf7-form { position: absolute; top: 81px; left: 10px; } #wpcf7-f4145-o1 .wpcf7-form .mail, #wpcf7-f89-o1 .wpcf7-form .mail, #wpcf7-f89-o2 .wpcf7-form .mail, #wpcf7-f4145-o2 .wpcf7-form .mail { position: relative; margin: 0; width: 230px; } .wpcf7-form p.nodisplay { margin: 0; display: none; height: 0; } #wpcf7-f4145-o1 .wpcf7-form .mail .wpcf7-text, #wpcf7-f89-o1 .wpcf7-form .mail .wpcf7-text, #wpcf7-f89-o2 .wpcf7-form .mail .wpcf7-text, #wpcf7-f4145-o2 .wpcf7-form .mail .wpcf7-text { border: none; background: none; width: 200px; padding-left: 8px; } #wpcf7-f4145-o1 .wpcf7-form .mail input:-moz-placeholder, #wpcf7-f4145-o1 .wpcf7-form .mail textarea:-moz-placeholder, #wpcf7-f89-o1 .wpcf7-form .mail input:-moz-placeholder, #wpcf7-f89-o1 .wpcf7-form .mail textarea:-moz-placeholder, #wpcf7-f89-o2 .wpcf7-form .mail input:-moz-placeholder, #wpcf7-f89-o2 .wpcf7-form .mail textarea:-moz-placeholder, #wpcf7-f4145-o2 .wpcf7-form .mail input:-moz-placeholder, #wpcf7-f4145-o2 .wpcf7-form .mail textarea:-moz-placeholder { color: #ddd; } #wpcf7-f4145-o1 .wpcf7-form .mail input.wpcf7-submit, #wpcf7-f89-o1 .wpcf7-form .mail input.wpcf7-submit, #wpcf7-f89-o2 .wpcf7-form .mail input.wpcf7-submit, #wpcf7-f4145-o2 .wpcf7-form .mail input.wpcf7-submit { position: absolute; right: 4px; bottom: 2px; } #wpcf7-f4145-o1 .wpcf7-form .mail input.wpcf7-submit:hover, #wpcf7-f89-o1 .wpcf7-form .mail input.wpcf7-submit:hover, #wpcf7-f89-o2 .wpcf7-form .mail input.wpcf7-submit:hover, #wpcf7-f4145-o2 .wpcf7-form .mail input.wpcf7-submit:hover { opacity: 0.8; } #wpcf7-f4145-o1 .wpcf7-form .mail img.ajax-loader, #wpcf7-f89-o1 .wpcf7-form .mail img.ajax-loader, #wpcf7-f89-o2 .wpcf7-form .mail img.ajax-loader, #wpcf7-f4145-o2 .wpcf7-form .mail img.ajax-loader { position: absolute; } #wpcf7-f4145-o1 .wpcf7-form .wpcf7-response-output, #wpcf7-f89-o1 .wpcf7-form .wpcf7-response-output, #wpcf7-f89-o2 .wpcf7-form .wpcf7-response-output, #wpcf7-f4145-o2 .wpcf7-form .wpcf7-response-output { position: absolute; z-index: 100; background-color: #fff; margin: 3px 0 0; } .wpcf7-form-control-wrap-confirm { color: #40b3cc; display: block; padding: 2px 5px; /* border: 1px solid #777; */ margin: 5px 0 0; } .textwidget { position: relative; } .textwidget .release { position: absolute; right: 10px; bottom: 3px; margin: 0; color: #fff; font-size: 10px; line-height: 1.6; } .textwidget .release a { display: inline; margin: 0; } .textwidget .release a:hover { text-decoration: underline; } /****************************************** １３■ フッターの基本設定(MOBILE用) ***************************************** */ #footer { position: relative; margin-top: 60px; padding-bottom: 0px; clear: both; text-align: center; color: #aaa; background: url(../images/common/bg_footer.png) #000 repeat-x bottom center ; } #footer #inner-footer { margin: 0 auto; max-width:98%; } #footer .logo { clear: both; padding-top: 30px; margin-bottom: 5px; } #footer .langue { position:relative; overflow:hidden; padding-bottom: 20px; } #footer .langue ul { position:relative; left:50%; float:left; } #footer .langue ul li { position:relative; left:-50%; float:left; padding: 0 10px; line-height: 1; /* text-shadow: 0px 1px 1px #fff;Apple スタイル*/ font-size: 12px; } #footer .langue ul li.en { border-left: solid 1px #aaa; border-right: solid 1px #aaa; } #footer #agora a { color: #999; transition: all .3s ease; } #footer #agora a:hover { color: #fff;} #footer #ebara a { display: block; margin: 15px auto 30px; width: 70px; height: 70px; font-size: .01em; text-indent: -9999px; background: url(../images/common/logo-ebara_w.svg?) no-repeat center center; background-size: cover; opacity: .45; transition: all .3s ease; } #footer #ebara a:hover { opacity: .75; } #footer .copyright { position: absolute; bottom: 5%; right: 5%; clear: both; color: #666; letter-spacing: 0; text-align: center; margin-bottom: 5px; } img#wpstats { width: 0; height: 0; overflow: hidden; position: absolute; } #footer #adress { padding-bottom: 20px; font-size: 0.9em; letter-spacing: 0.1em; text-shadow: 0px 1px 1px #000;/*Apple スタイル*/ } #footer #adress h3 { font-weight: normal; color: #999; } #footer #adress adress { font-size: 1.2em; color: #666; } #footer #adress p { margin: 0; font-size: 1.2em; letter-spacing: 0.1em; font-weight: normal; color: #666; } /* if you checked out the link above: http://www.alistapart.com/articles/organizing-mobile/ you'll want to style the footer nav a bit more in-depth. Remember to keep it simple because you'll have to override these styles for the desktop view. */ /****************************************** １４■ 画像設定(MOBILE用) ***************************************** */ .imagebox { /* display: inline; */ margin: 0 auto 1.2em; text-align: center; width: 100%; } .imagebox.right { float: right; } .imagebox.left { float: left; } .entry-content .imagebox img {width: 100%;} .entry-content .imagebox img.alignright, .entry-content .imagebox img.alignleft { float: none; display: block; margin: 0; } body#oriza #main .entry-content .imagebox .caption, body#about #main .entry-content .imagebox .caption, body #main .entry-content .imagebox .caption { font-size: 1em; text-align: right; margin: 0; } .full img {width: 100%;} body.news .entry-content .imagebox a img {border: 5px solid #c5bdef; } /* お知らせ */ .page-template-page-about-php .entry-content .imagebox a img {border: 5px solid #75ba89; } /* 青年団とは */ .page-template-page-oriza-php .entry-content .imagebox a img {border: 5px solid #c4d394; } /*平田オリザ */ .theater .entry-content .imagebox a img {border: 5px solid #e0a7a1; } /*劇場 */ body.news .entry-content .imagebox a:hover img, .page-template-page-about-php .entry-content .imagebox a:hover img, .page-template-page-oriza-php .entry-content .imagebox a:hover img {border: 5px solid #71c7d5; }/* 画像hover時 */ #sb-container #sb-body { background: none; border: none; } #sb-container #sb-wrapper-inner { border: none; } #sb-container #sb-body img { border: none; } /* ギャラリー */ .gallery { clear: both; margin: 30px 0;} .gallery ul { margin: 0 auto;} .gallery-columns-1 ul { width: 420px;} .gallery-columns-2 ul { width: 280px;} .gallery-columns-3 ul { width: 420px;} .gallery-columns-4 ul { width: 560px;} .gallery ul li { float: left; margin: 10px; } .gallery ul li a { display: block; line-height: 0; } .gallery ul li a { border: 5px solid #85BCBC;/* e3f7f7 */ } .gallery ul li a:hover { border-color: #71c7d5; } /****************************************** １５■ 各ページの設定(MOBILE用) ***************************************** */ /* ***************** トップページ(MOBILE用) ********************* */ #content #iview { visibility: hidden; display: none; height: 0; width: 0; margin: 0; padding: 0; background-color: #fff; } #content #iview a.link { display: block; width: 100%; height: 100%; } #content #iview a.link:hover { background: #fff; opacity: 0.8; } #top .content-inner, #top .main { background-color: #fff; padding: 10px 20px; margin: 0; } /* --------------------------------------- 公演一覧 --------------------------------------- */ #stage-schedule { clear: both; margin-bottom: 20px; } #play #main .article, .content-inner .article { /* 記事のフレーム */ position: relative; margin-bottom: 0px; padding: 10px 0 7px; border-bottom: 1px dotted #999; } .content-inner .plan .article {/* 今後の予定 */ padding-bottom: 10px; } .article .flyerimage { float: left; /* width: 160px; */ margin-right: 15px; margin-bottom: 0px; text-align: center; } .play #main .article .flyerimage img, .content-inner .flyerimage img { /* 画像設定 */ -moz-box-shadow :0px 0px 3px rgba(000,000,000,0.3); -webkit-box-shadow :0px 0px 3px rgba(000,000,000,0.3); box-shadow :0px 0px 3px rgba(000,000,000,0.3); } .play #main .article .flyerimage a:hover img, .content-inner .flyerimage a:hover img { -moz-box-shadow :0px 0px 3px rgba(000,000,000,0.5); -webkit-box-shadow :0px 0px 3px rgba(000,000,000,0.5); box-shadow :0px 0px 3px rgba(000,000,000,0.5); } #links #main .article .info, #play #main .article .info, .content-inner .article .info { clear: left; /* margin-bottom:25px; */ padding-top: 10px; } #links #main .article .info.bottom25, #play #main .article .info.bottom25, .content-inner .article .info.bottom25 { margin-top: 0; margin-bottom:5px;/* 20px */ } #news-lasted .content-inner .time, #oriza #main .when, #news #main .time, #news .main .time { float: left; font-size: 1.2em; margin-right: 10px; } /* term-name、カテゴリー名 */ .term-name { display: inline-block; margin-bottom: 5px; padding: 3px 5px 2px; color: #FFFFFF; font-size: 0.95em; font-weight: 300; letter-spacing: 0.1em; text-align: center; background-color: #1874a0; line-height: 1; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #play #main .term-name, .content-inner h4.term-name { background-color: #087878;} #oriza #main .term-name { background-color: #728825;} /*平田オリザ */ #top .content-inner .link h4.term-name,#top .content-inner .young h4.term-name, #play #main .link h4.term-name,#play #main .young h4.term-name, #links #main .term-name { background-color: #9d6b24 ;} /*青年団リンク若手自主企画 */ #content #mainColumn #stage-schedule .section .body {padding: 5px 0 0;} #content #mainColumn #stage-schedule .section .body p { font-size: 1.2em; line-height: 1.3; } #content #mainColumn #stage-schedule .section.plan .info .body p {/* 今後の予定 */ margin-bottom: 5px; } #news #main .category ul,#news .main .category ul, #news-lasted .content-inner .category ul { float: left;margin: 0;padding: 0;} #news #main .category ul li,#news .main .category ul li, #news-lasted .content-inner .category ul li { display: inline; margin: 0 auto ; padding: 0; text-align: center; } #news #main .category ul li a,#news .main .category ul li a, #news-lasted .content-inner .category ul li a { display: block; padding: 2px 5px; margin: 0 auto; color: #FFFFFF; width: 120px; font-size: 0.95em; font-weight: 300; line-height: 1; letter-spacing: 0.1em; background-color: #2769a3; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #news-lasted .content-inner .category ul li a { margin-bottom: 2px; } #news-lasted .content-inner .category { float: left; margin-top: 1px; } #news-lasted .content-inner .category a { display: block; padding: 2px 5px; margin: 0 auto; color: #FFFFFF; width: 120px; font-size: 0.95em; font-weight: 300; line-height: 1; letter-spacing: 0.05em; text-align: center; background-color: #2769a3; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } .play #main .period, .content-inner p.period { margin:5px 0 0; color: #222; font-size: 1.3em; /* line-height: 1.2; */ letter-spacing: 0; } #play #main.history .period{ margin: 0; color: #555; font-size: 1.25em; } #play.date #main .period, #links #main .period { margin: 0; color: #555; font-size: 1.15em; } .content-inner h3 a { margin-bottom: 3px; line-height: 1; } .news-lasted .content-inner h3.news-title a { margin-bottom: 3px; line-height: 1; } #links #main .whenwhere, #play #main .whenwhere, .content-inner p.whenwhere { margin: 0; font-size: 1.1em; line-height: 1.2; } #top ul.whenwhere { margin-top: 5px; font-size: 1.1em; } #links #main ul.whenwhere, #play #main ul.whenwhere { margin-top: 5px; font-size: 1.2em; } #play #main ul.whenwhere li { letter-spacing: 0.03em; } .play #main .when { float: left; margin-bottom: 5px;} /* 期間 */ .play #main span.term-name { margin-left: 10px;} /* カテゴリー */ .play #content #main .body { clear: both;} .play #main .company-name,.content-inner p.company-name {/* 公演案内 */ margin:3px 0 0; line-height: 1.25; font-size: 1.1em; letter-spacing: 0; } .content-inner p.company-name { font-size: 1.2em; color: #333; } .play #main .company-name {/* 公演案内シングルページ の 劇団名 */ display: inline; font-size: 1.3em; color: #333; } .play #main .project-name{ display: block; /* margin-left: 10px; */ font-size: 1em; } .play #main .where,.content-inner p.where { margin: 0; font-size: 1.1em; letter-spacing: 0; } .play #main .title,.content-inner h3 { margin: 0 0 3px; padding: 0; line-height: 1.1; letter-spacing: 0.03em; } .play #main .title,.content-inner h3.title { padding: 7px 0 2px; } .play #main .play .name { display: inline; font-weight: 300; color: #444; } .play #main .name,.content-inner h4.name { margin: 0; font-size: 1.2em; line-height: 1.2; font-weight: 300; } .play #main .play .where { font-size: 1.2em; margin: 0; } #play.single #main .introduction .main_text { margin:0 20px 30px; } #play.single #main .introduction,.content-inner p.introduction, .play #main .introduction,.content-inner p.introduction { margin: 10px 0 ; color: #333; font-size: 1.1em; letter-spacing: 0.02em; } #play.single #main .introduction hr, .content-inner .introduction hr, .play #main .introduction hr, .content-inner .introduction hr { border: none; border-bottom: dashed 1px #bbb; margin: 20px 0; } #play.single #main p.toPlayinfo, .play #main p.toPlayinfo, .content-inner p.toPlayinfo { float: right; display: inline-table; bottom: 0; right: 0; margin: 0; padding-bottom: 0px; line-height:1; text-align: right; /* vertical-align: text-top; */ /* background-color: gray; */ } #play.single #main p.toPlayinfo span.selldate, .play #main p.toPlayinfo span.selldate, .content-inner p.toPlayinfo span.selldate { /* background-color: blue; */ display: table-cell; vertical-align: middle; } #play.single #main p.toPlayinfo a,.content-inner p.toPlayinfo a, .play #main p.toPlayinfo a,.content-inner p.toPlayinfo a { display: inline-table; opacity: 1; line-height: 0; margin: 0 0 0 5px; padding: 0; } #play.single #main p.toPlayinfo a:hover,.content-inner p.toPlayinfo a:hover, .play #main p.toPlayinfo a:hover,.content-inner p.toPlayinfo a:hover { opacity: 0.8; } /* ------------------------------- タグ / 検索 -------------------------------*/ h2.bar span { padding-bottom: 2px; vertical-align: middle; line-height: 1em; } h2.bar span small { background-color: #fff; margin-left: 10px; margin-bottom: 4px; padding: 2px 10px; color: #1874a0; font-weight: 600; text-shadow: none;/*テキストシャドー*/ border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #news h2.bar span small { color: #2769a3;} #play h2.bar span small { color: #087878;} #links h2.bar span small { color: #9d6b24;} #news #content #main .article-footer { margin-bottom: 7px; } .tags { float: left; font-size: 0.85em;/* padding-top: 3px; *//* background-color: blue; */} .tags a { margin-bottom: 1px; padding: 1px 5px; color: #fff; border-radius : 2px; /* CSS3 */ -moz-border-radius : 2px; /* Firefox */ -webkit-border-radius : 2px; /* Safari,Chrome */ white-space: nowrap; display: inline-table; vertical-align: middle; line-height: 1.3; } #news #content #main .tags, #news #content .main .tags { float:right;margin-bottom: 0;} #news.single #content #main .tags, #news.single #content .main .tags { padding-top: 30px;} #news #content .main .tags {margin:5px 0 2px; letter-spacing:1;} #news #content #main .tags a, #news #content .main .tags a { background-color: #a0c6e5;}/* お知らせのタグ色 */ body#news #content .main .tags a:link, body#news #content #main .tags a:link, body#news #content .main .tags a:visited, body#news #content #main .tags a:visited {color:#fff;} body#news #content .main .tags a:hover, body#news #content #main .tags a:hover {color:#2769a3;} #top .tags, .play #content #main .tags { float:left; /* position:absolute; bottom: 4px;*/ margin:0 0 3px ; vertical-align: bottom; } #search #content #main footer.article-footer { height: 0;} #search #content #main .tags {margin-top: 5px; display: block;} #search #content #main .tags li, #top #content .content-inner .tags li, .play #content #main .tags li {float:left;margin: 2px 2px 0;text-align: center;/* overflow: hidden; */} #search #content #main .play .tags li a, #top #content .content-inner .tags a, .play #content #main .tags a { background-color: #87c4c4;color: #fff;} #search #content #main .play .tags li a:hover, .play #content #main .tags a:hover {color: #176c9a;} #search #content #main .link .tags li a, .links #content #main .tags a { background-color: #d3b996;color: #fff;} #search #content #main .link .tags li a:hover, .links #content #main .tags a:hover { color: #966624;} #search #content #main .post .tags {margin:5px 0 0;} #search #content #main .post .tags a { background-color: #a0c6e5;color: #fff;} #search #content #main .post .tags a:hover { color: #2769a3; } .page-id-1032 #content #main .article-footer p.tags { float: left;} .page-id-1032 #content #main .article-footer p.tags a { background-color: #dbb785;} /* --------------------------------------- 最新情報 --------------------------------------- */ #news-lasted { margin-bottom: 20px;} #news-lasted .content-inner .news-lasted, #news .main .body .post-content { position: relative; padding: 8px 0 3px; border-bottom: dotted 1px #666; } #news .main .body .post-content .new { line-height: 18px; } #news .main .body .post-content:last-child { border: none; } #news-lasted .content-inner h3.news-title, #news .main .body h3.news-title { clear: both; margin: 0; /* padding-left: 10px; */ font-size: 1.2em; font-weight: 600; } #news .main .body h3.news-title { padding-left: 0; font-size: 1.3em; font-weight: 600; letter-spacing: 0; } #news-lasted .content-inner h3.news-title a:link, #news .main .body h3.news-title a:link { color: #2769a3;} #news-lasted .content-inner h3.news-title a:visited, #news .main .body h3.news-title a:visited { color: #2769a3;} #news-lasted .content-inner h3.news-title a:hover, #news .main .body h3.news-title a:hover { color: #71c7d5;} #news .main .body p { clear: both;} #news .main .body p a.next, body#news #main p a.next{ margin-left: 0px; font-size: 0.8em; } #news .main .body p a.next:hover, body#news #main p a.next:hover { color: #2769a3; border-bottom: 1px dotted #2769a3; } /* ***************** お知らせ,平田オリザ主宰からの定期便ページ ********************* */ #news #main .post, body#oriza #main article.oriza.message { border-bottom: dotted 1px #aaa; margin-bottom: 10px; } #news #main .news-lasted { padding: 8px 0 3px; border-bottom: dotted 1px #666; } #news #main .article-header, body#oriza #main .article-header { margin-bottom: 5px; } body#news #main h2.h2, body#oriza #main h2 { clear: both; margin:10px 0 5px; font-size: 1.8em; font-weight: 400; line-height: 1.5; letter-spacing: 0.05em; } #oriza.education #content #main h3 { border-left: solid 7px #697c2e; margin-bottom: 10px; padding-top: 0; padding-left: 10px; } #about.activity #content #main h3 { border-left: solid 7px #127030; margin-bottom: 10px; padding-top: 0; padding-left: 10px; } body#about #main p, body#oriza #main p /* #news #main .text p */ { margin-bottom: 1em; color: #333; font-size: 1.4em; line-height: 1.65; letter-spacing: 0.03em; } body#oriza #main p.profile { padding: 20px; border: 1px solid #6d812e; font-size: 1.2em; color: #111; } body#oriza.hirata-oriza #main p { font-size: 1.3em; } #news .article-footer { /* margin:0 0 10px; border-bottom: dotted 1px #666; */ } /* ***************** お知らせシングルページ(MOBILE用) ********************* */ #news.single #main .post { margin: 0;border: none; } #main .article-header .single-title { margin: 5px 0 0; font-size: 2em; font-weight: 300; letter-spacing: 0.05em; } #news #main .article-header .single-title { color: #2769a3; border-bottom: dotted #6862a9 1px; } #oriza #main .article-header .single-title { color: #728825; border-bottom: dotted #728825 1px; } body#news #main .article-header .when, body#oriza #main .article-header .when { float: none; display: block; margin: 0; padding: 0; font-size: 1.1em; text-align: right; } body#news #main .entry-content h2 { font-weight: 600; letter-spacing: 0.05em; } body#news #main .entry-content h3 { letter-spacing: 0.04em; font-weight: 600; } body#news #main .entry-content h4 { padding-top: 10px; letter-spacing: 0.03em; font-weight: 300; color: #333; } body#news #main .entry-content h5 { font-weight: 600; } body#news #main .entry-content p { letter-spacing: 0.0em; } body#news #main .entry-content strong { font-weight: 400; color: #222; } body#news #main .article-header { } /* *************************************************** 公演案内ページ(MOBILE用) ******************************************************* */ #content #main .section h2 { color: #4978ab; font-weight: bold; letter-spacing: 0.2em; text-shadow: 0px 0px 1px #ddd;/*テキストシャドー*/ } #content #main .section .article { display: table; width: 100%; clear: both; } #content #main .section .article-header { margin-bottom: 20px; padding: 4px 10px 4px; color: #fff; font-weight: normal; text-shadow: 0px 0px 1px rgba(000,000,000,0.3);/*テキストシャドー*/ background-color: #4978ab; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #content #main .section .article-header h3 { margin: 0; font-size: 1.6em; line-height: 1.2; letter-spacing: 0.1em; text-shadow: 0px 0px 1px rgba(000,000,000,0.3);/*テキストシャドー*/ } #content #main .section .article-header h4 { margin: 3px 0 0; padding-left: 10px; font-size: 1.1em; line-height: 1.2; } #content #main .section .content { } #content #main .section .content a.flyerimage { display: block; text-align: center; } #content #main .section .content a.flyerimage img { border: 5px solid #c5d4e5; } #content #main .section .content a.flyerimage:hover img { border: 5px solid #dda6d7; } #content #main .section .content .period { font-weight: bold; line-height: 1.2; } #content #main .section .content .where { font-weight: bold; margin-bottom: 20px; } #content #main .section .content .copy { display: inline; margin:0 0; padding: 0 0 3px; font-size: 1.4em; font-weight: bold; border-bottom: dashed 1px #4978ab; } #content #main .section .content .introduction { margin-top: 10px; font-size: 1.2em; } #content #main .section .content h4 { display: inline; margin:10px 0 5px; line-height: 1.2; font-weight: bold; border-bottom: dashed 1px #4978ab; } #content #main .section .content p { margin: 3px 10px 0; font-size: 1.25em; } .next #content #main .section .content p { margin: 3px 10px 0; font-size: 1.25em; } .footer-btn { /* background-color: green; */ overflow: hidden; /* position: absolute; bottom: 3px; */ /* right: 0; */ display: table; /* vertical-align: bottom; */ /* margin-top: 10px; */ width: 100%; } /* 公演案内シングルページ */ #play #content #main .entry-content { position: relative; } .play #content #main .article-header { position: relative; margin-bottom: 20px; } #play single #main .article-header h1, .play.news #content #main .article-header h1, .play #content #main .article-header h1 { margin:10px 0 10px; font-weight: 300; color: #333; } #play.single #content #main .article-header h2, .play #content #main .article-header h2 { margin: 0; padding: 0; font-size: 1.3em; color: #333; letter-spacing: 0.1em; line-height: 1.3; font-weight: 300; text-shadow: none; -moz-border-radius : none;/* Firefox */ -webkit-border-radius : none;/* Safari,Chrome */ border-radius : none;/* CSS3 */ } .play #content #main .article-header p.where { margin-bottom: 0; color: #333; font-size: 1.3em; line-height: 1.3; } .play #content #main .article-header p.period { margin:5px 0 0; font-size: 1.3em; line-height: 1.3; color: #333; } .play #content #main p.img { float: right; margin: 0 0 10px 20px; } .play #content #main p.img a img { border:#87c4c4 solid 5px;} .play.links #content #main p.img a img { border:#ddba89 solid 5px;} .play #content #main p.img a:hover img { border:#71c7d5 solid 5px;} #play.single #content #main h3.copy, .play #content #main h3.copy { display: inline; margin-bottom: 10px; color: #111; font-weight: 300; line-height: 1.4; border-bottom: 1px dotted #666; } #play.single #content #main .introduction p, .play #content #main .introduction p { font-size: 1.2em; color: #555; line-height: 1.4; margin: 0; } #play.single #content #main .introduction p.small, .play #content #main .introduction p.small { font-size: 0.9em; } #play.single #content #main .introduction p.marginb20, .play #content #main .introduction p.marginb20 { margin-bottom: 20px; } #play.single #content #main .introduction .double p,/* 二本立て以上の公演の場合 */ .play #content #main .introduction .double p { font-size: 1.1em; color: #555; line-height: 1.4; margin: 0; } #play.single #content #main .introduction h4, .play #content #main .introduction h4 { font-weight: 300; margin-bottom: 10px; color: #333; } #play.single #content #main .introduction p.introduction, .play #content #main .introduction p.introduction {margin: 0 0 10px;} #play.single #content #main .introduction p.introduction.top10, .play #content #main .introduction p.introduction.top10 {margin-top: 14px;} #play.single #content #main .introduction p.sign, .play #content #main .introduction p.sign {margin-top: 6px;font-size: 1.1em;margin-bottom: 10px;color:#333;} #play.single #content #main .introduction small { line-height: 0.8; } #play.single #content #main .introduction small.sign { margin-top: -5px; margin-bottom: 10px; display: block; text-align: right; line-height: 1.1; font-size: 0.9em; } #links #content #main .introduction .imagebox p.caption, #play.single #content #main .introduction p.caption {/* 画像のキャプション */ margin: 2px 0 10px; padding-top: 0; font-size: 0.9em; color: #888; line-height: 1.2; } #play.single #content #main h3.introduction, .play #content #main h3.introduction { color: #222; font-size: 1.4em; font-weight: 300; line-height: 1.2; } #play.single #content #main h4.introduction, .play #content #main h4.introduction { margin: 0 0 3px; color: #333; font-size: 1.3em; font-weight: 300; line-height: 1.2; } #play.single #content #main .profile, .play #content #main .profile { margin-top: 30px; padding: 20px; border: 1px solid #aaa; font-size: 0.9em; clear: both; } .play #content #main .profile h4 { margin-bottom: 5px; font-weight: 300; letter-spacing: 0.05em; color: #333; } .play #content #main .cast h4 {/* 出演 */ margin-top: 6px; font-weight: 300; } /* ---------------------------------- 二本立て公演 ---------------------------------- */ .play #content #main .double { margin-bottom: 30px; padding: 20px; border: 1px solid #666; } .play #content #main .double .double2, .play #content #main .double .double3, .play #content #main .double .double4, .play #content #main .double .double5, .play #content #main .double .double6 { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #666; } .play #content #main .double h2 { margin-bottom: 10px; color: #333; font-weight: 300; } .play #content #main .double div .header { margin-bottom: 20px; padding: 0; border-bottom: 1px dotted #ddd; } .play #content #main .double div h5.staff, .play #content #main .double div h5.cast { margin-top: 20px; /* font-size: 1.1em; */ /* font-weight: 300; */ color: #333; } .play #content #main .double div h4.staff, .play #content #main .double div h4.cast { } #play.single #content #main .introduction .double p.staff, #play.single #content #main .introduction .double p.cast, .play #content #main .double div p.cast { font-size: 1em; padding-left: 0px; margin-bottom: 10px; } .play #content #main .double .undertitleinfo { font-size: 1.2em; padding-bottom: 15px; line-height: 1.3; } #links #content #main .imagebox, .links #content #main .double .imagebox, #play #content #main .imagebox, .play #content #main .double .imagebox { float: right; margin-left: 20px; text-align: right; /* width: 46%; */ } #links #content #main .imagebox.large.left, .links #content #main .double .imagebox.large.left, #play #content #main .imagebox.large.left, .play #content #main .double .imagebox.large.left #links #content #main .imagebox.left, .links #content #main .double .imagebox.left, #play #content #main .imagebox.left, .play #content #main .double .imagebox.left { float: left; margin-left: 0px; margin-right: 20px; text-align: left; width: auto; } #links #content #main .imagebox.left img, .links #content #main .double .imagebox.left img, #play #content #main .imagebox.left img, .play #content #main .double .imagebox.left img { width: auto; /* width: 100%; */ } #links #content #main .imagebox.left.medium img, .links #content #main .double .imagebox.left.medium img, #play #content #main .imagebox.left.medium img, .play #content #main .double .imagebox.left img { width: 100%; } #play #content #main .imagebox.center, #links #content #main .imagebox.center { float: none; margin: 0 auto; text-align: center; overflow: hidden; } #play #content #main .imagebox.center a img, #links #content #main .imagebox.center a img { width: 100%; } /* #play.single #content #main .imagebox { width: 100%; } */ .play #content #main .imagebox .imagebox, .play #content #main .double .imagebox .imagebox { width: 100%; } .play #content #main .imagebox img, .play #content #main .double .imagebox img { width: 100%; height: auto; } .play #content #main .imagebox a { display: block; border: solid 5px #85bcbc; line-height: 0;} .play #content #main .imagebox .caption a {display: inline;border: none;} .links #content #main .imagebox a { display: block; border: solid 5px #c4914a; line-height: 0;} .play #content #main .imagebox a:hover { border: solid 5px #71c7d5;} .links #content #main .imagebox a:hover { border: solid 5px #d1ac79;} .play #content #main .imagebox p, .play #content #main .double .imagebox p { margin: 0; } #play #content #main .imagebox.large, #links #content #main .imagebox.large { width: 140px; margin: 0 10px 0 0; } #play #content #main .imagebox.large a, #links #content #main .imagebox.large a { width: auto; } /* ---------------------------------- ツアー ---------------------------------- */ .play #content #main div.tour { padding-top: 20px; position:relative; overflow:hidden; } .play #content #main div.tour ul { position:relative; left:50%; float:left; } .play #content #main div.tour ul li { position:relative; left:-50%; float:left; padding: 1px 10px ; font-size: 1.5em; border-left: 1px solid #777; } .play #content #main div.tour ul li.first { border: 0; } .play #content #main h2.tour { margin: 0 0 10px; padding: 3px; color: #fff; font-weight: 300; text-align: center; background-color: #037b7c; } #links.play #content #main h2.tour { background-color: #9d6b24; } .play .detail { margin: 20px 0; width: 100%; /* table-layout:fixed; */ word-break:break-all; } .play .detail tr { border-top: dashed 1px #aaa; } .play .detail th { max-width: 110px; letter-spacing: 0.1em; font-size: 1.3em; font-weight: 300; padding: 10px 10px 10px 0; } .play .detail td { padding: 10px 0; } .play .detail td .date { color: #222; font-size: 1.35em; } .play .detail .date td small.br { /* display: block; */ font-size: 0.8em; line-height: 1.2; } .play .detail2 { margin-top: 0; } .play .detail2 tr:first-child { border-top: none; } /* ---------------------------- タイムテーブル0 ------------------------------ */ .play .detail tr td table.timetable, .play .detail tr.date td table {margin: 8px 0 3px;} .play .detail tr td table.timetable tr:hover, .play .detail tr.date td table tr:hover { background-color: #b4f7f7;} .play .detail tr.date td table tr td { border: 1px #cdcdcd solid; padding: 3px 5px; font-size: 1.3em; } .play .detail tr td table.timetable tr td{ border: 1px #cdcdcd solid; padding: 3px 5px; font-size: 1.1em; } .play .detail tr td table tr td.col1, .play .detail tr td table tr td.column-1 { text-align: right; } .play .detail tr td table tr td.col2sat, .play .detail tr td table tr td.col2sun, .play .detail tr td table tr td.col2holy, .play .detail tr td table tr td.col2, .play .detail tr td table tr td.column-2 { font-size: 1.15em; text-align: center; } .play .detail tr td table tr td.col3, .play .detail tr td table tr td.col4, .play .detail tr td table tr td.col5, .play .detail tr td table tr td.col6, .play .detail tr td table tr td.column-3, .play .detail tr td table tr td.column-4, .play .detail tr td table tr td.column-5 .play .detail tr td table tr td.column-6 { max-width: 400px; /* width: 80px; */ min-width: 20px; padding: 0 10px; text-align: center; vertical-align: middle; } .play .detail tr td table tr td.col2sat, .play .detail tr.date td table tr td.sat { background-color: #94eaf7;color:#3b5efe;} .play .detail tr td table tr td.col2sun, .play .detail tr td table tr td.col2holy, .play .detail tr.date td table tr td.sun, .play .detail tr.date td table tr td.holy { background-color: #ffadad;color:#ff2b35;} /* ---------------------------- タイムテーブル ------------------------------ */ .play .detail table.wp-table-reloaded { width: auto; max-width: 100%; margin-bottom: 0; font-size: 1.3em; text-align: center; border-collapse: collapse; border-spacing: 0; } .play .detail tr.date td table.wp-table-reloaded tr td { padding: 2px 0; font-size: 1em; } .play .detail tr.date td table.wp-table-reloaded tr td.col1, .play .detail tr.date td table.wp-table-reloaded tr td.column-1 { padding:3px 5px; min-width: 30px; width: auto; max-width: 100px; text-align: right; vertical-align: middle; } /* .play .detail tr td table tr td.col2sat, .play .detail tr td table tr td.col2sun, */ /* .play .detail tr td table tr td.col2holy, */ .play .detail tr.date td table.wp-table-reloaded tr td.col2, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 { min-width: 20px; width: auto; max-width: 80px; margin:0; padding: 0 5px; font-size: 0.9em; vertical-align: middle; } /* .play .detail tr.date td table.wp-table-reloaded tr td.col3, .play .detail tr.date td table.wp-table-reloaded tr td.col4, .play .detail tr.date td table.wp-table-reloaded tr td.col5, .play .detail tr.date td table.wp-table-reloaded tr td.col6, */ .play .detail tr.date td table.wp-table-reloaded tr td.column-3, .play .detail tr.date td table.wp-table-reloaded tr td.column-4, .play .detail tr.date td table.wp-table-reloaded tr td.column-5, .play .detail tr.date td table.wp-table-reloaded tr td.column-6 { padding: 0 10px; min-width: 20px; max-width: 400px; vertical-align: middle; } .play .detail tr.date td table.wp-table-reloaded tr td.col2 span, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 span { display: block; width: 100%; height: 100%; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } .play .detail tr.date td table.wp-table-reloaded tr td.col2 span.sat, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 span.sat { background-color: #94eaf7;color: blue; } .play .detail tr.date td table.wp-table-reloaded tr td.col2 span.sun, .play .detail tr.date td table.wp-table-reloaded tr td.col2 span.holy, .play .detail tr.date td table.wp-table-reloaded tr td.col2 span.holyday, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 span.sun, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 span.holy, .play .detail tr.date td table.wp-table-reloaded tr td.column-2 span.holyday { background-color: #ffadad;color: red;} .play .detail tr.date td .column3left table tr td.col3, .play .detail tr.date td .column3left table tr td.col4, .play .detail tr.date td .column3left table tr td.col5, .play .detail tr.date td .column3left table tr td.col6, .play .detail .column3left table.wp-table-reloaded tr td.column-3 { padding:3px 5px 3px; text-align: left; } .play .detail td p { margin: 0; font-size: 1.2em; line-height: 1.35; letter-spacing: 0; } .play .detail td p small { font-size: 0.9em; } .play .detail .date .info { margin:5px 0 0 ;line-height: 1.4;font-size: 1.15em;} .play .detail .date .info h4 { font-size: 1em; display: inline;} .play .detail .date .info p { font-size: 1em;} .play .detail .date .info strong {font-weight: 300;color:#333;} .play .detail .place p { letter-spacing: 0.05em; } .play .detail .otherplace td { font-size: 1.2em;} /* その他会場 */ .play .detail .otherplace td h4 {font-size:1.15em;} .play .detail .otherplace td small { font-size: 0.85em;} .play .detail .otherplace td h4 {font-size:1.15em; margin: 0;} .play .detail .price p { color: #333; font-size:1.3em; } /* 料金 */ .play .detail .price small {font-size: 0.85em;} .play .detail .price span.sp { display: block;margin-top: 7px;} /* 料金詳細 */ .play .detail .ticket td { color: #333; } .play .detail .ticket td p { font-size: 1.3em;} .play .detail .noline { /* border: 0; */ } /* 他会場 */ .play .detail2 th, .play .detail2 td { /* border-top: 3px solid #444; */ } .play .detail2 h4 { /* padding-top: 15px; */ color: #222; font-weight: 300; } .play .detail2 h5 { font-size: 1.4em; font-weight: 300; } .play .detail .ticketinfo td {/* チケット取り扱い */ font-size: 1.2em; font-weight: normal; line-height: 1.3; } .play .detail .ticketinfo td h3 { clear: both; display: inline; font-size: 1em; } .play .detail .ticketinfo td h4 { display: inline; font-size: 1em; margin-bottom: 0; color: #222; font-weight: 300; } .play .detail .ticketinfo td br { margin-bottom: 5px; } .play .detail .ticketinfo td a { } .play .detail .ticketinfo td a.online { display: block; margin-top: 5px; max-width: 260px; min-width: 40px; height: auto; } .play .detail .ticketinfo td a.online img{ width: 100%;} .play .detail .ticketinfo td a.online:hover { background:url(../images/common/btn-online-over.jpg) center center; } .play .detail .ticketinfo td a.online:hover img { visibility: hidden; } .play .detail .event td { font-size: 1.2em; line-height: 1.4; } .play .detail .event td h4 { font-size: 1em;} .play .detail .event td p { font-size: 1em;} .play .detail .contact td { font-size: 1.2em;} .play .detail .contact td h4 { display: inline; font-size: 1em; font-weight: 300;color:#222;} .play .detail .web td { font-size: 1.2em;} .play .detail .web td h4 { display: inline; font-size: 1em;} .play .detail .event td iframe { display: block; margin: 20px auto 10px; text-align: center; max-width:100%; overflow: hidden; } .play .detail2 .event td h4 { margin: 0 0 3px; font-size: 1em; } .play .detail2 .noline td p { display: table-cell; font-size: 1em; vertical-align: text-bottom; padding-top: 5px; } /* ***************** 公演履歴ページ(MOBILE用) ********************* */ body.play #content #main .article-header h3 { margin: 4px 0; padding: 0px 0 1px; font-size: 1.6em; text-align: left; line-height: 1.2; border: none; } body.play #content #main .article { /* margin-bottom: 10px; */ position: relative; padding: 10px 0 5px; border-bottom: 1px dashed #444; /* background-color: green; */ } body.play #content #main .plan .article { padding-bottom: 10px; } body.play #content #main .play .when a { color: #565656; } body #content #main a.term-name:hover {background-color:#a54970;} /*hover */ body.play #content #main .play hr { border: none; margin: 2px 0; } body.play #content #main .play .introduction hr { border-bottom: 1px dashed #ddd; margin: 0 50px; } body.play #content #main .play .flyer-image { float: left; clear: both; padding: 0; line-height: 0; margin-top: 10px; margin-right: 25px; margin-bottom: 10px; -moz-box-shadow: 0px 0px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); -webkit-box-shadow: 0px 0px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); box-shadow: 0px 0px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); } body.play #content #main .play .project { /* display: inline; */ margin: 3px 0 0; padding: 5px 0 0px; font-size: 1.15em; letter-spacing: 0.05em; line-height: 1.1; font-weight: normal; } body.play #content #main .play .name span { white-space: nowrap; } /* ***************** 固定ページ(MOBILE用) ********************* */ /* ***************** 主宰の定期便ページ(MOBILE用) ********************* */ body.oriza.message #content #main .message { margin-bottom: 40px; border-bottom: 1px dotted #eee; -moz-box-shadow :0px 20px 15px -25px rgba(000,000,000,0.2); -webkit-box-shadow :0px 20px 15px -25px rgba(000,000,000,0.2); box-shadow :0px 20px 15px -25px rgba(000,000,000,0.2); } body.oriza.message #content #main .article-header { margin-bottom: 20px; } body.oriza.message #content #main .article-header h2 { /*大タイトル */ padding:8px 20px 3px 0; color: #333; font-size: 2em; font-weight: 400; letter-spacing: 0.1em; border-bottom: 1px dashed #888; background: none; text-shadow: none; } body.oriza.message #content #main h2 a { color: #68be8a; } body.oriza.message #content #main .article-footer { margin-top: 30px; } body.oriza.message #content #main .article-footer .sharebutton { margin-bottom: 10px; } /* シングルページ */ body.oriza.single #content #main .article-header { margin-bottom: 20px; } body.oriza.single #content #main h1 { /*大タイトル */ margin: 0; padding:10px 20px 3px 0; color: #333; font-size: 3em; font-weight: 400; letter-spacing: 0.1em; border-bottom: 1px dashed #888; } body.oriza.single #content #main .when { display: block; margin: 0; text-align: right; } /* ***************** 平田オリザ略歴ページ(MOBILE用) ********************* */ table.chronologic tr th { padding-right: 10px; vertical-align: text-top; font-size: 0.9em; font-weight: normal; color: #728825; text-shadow: 1px 1px 2px #999;/*テキストシャドー*/ text-shadow: 1px 1px white, -1px -1px #444;/*ピローエンボス*/ text-shadow: 1px 1px rgba(255, 128, 0, 0.7), 2px 2px rgba(255, 128, 0, 0.7), 3px 3px rgba(255, 128, 0, 0.7), 4px 4px rgba(255, 128, 0, 0.7), 5px 5px rgba(255, 128, 0, 0.7);/*3D テキスト*/ text-shadow: 0px 1px 1px #fff;/*Apple スタイル*/ } table.chronologic tr td { font-size: 0.85em; } table.chronologic tr th p { padding-top: 0.2em; line-height: 1; } table.chronologic tr td p { border-bottom: dashed 1px #888; letter-spacing: 0; } /* ***************** 青年団リンク・若手(MOBILE用) ********************* */ .links #content #main table.links tr td { font-size: 1.3em; color: #444; } /* ***************** お問合せページ(MOBILE用) ********************* */ body.contact #content #main .wpcf7 .wpcf7-form .wpcf7-form-control { margin: 3px auto 10px; padding: 4px 7px; width: 100%; border: none; line-height: 1.5; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ -moz-box-shadow : inset 0px 0px 3px rgba(0,0,0,0.3); -webkit-box-shadow : inset 0px 0px 3px rgba(0,0,0,0.3); box-shadow : inset 0px 0px 3px rgba(0,0,0,0.3); background-color: #f7f5ef; } body.contact #content #main .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-textarea { margin: 0 auto; width: 100%; } /* メールマガジンの登録・解除 */ body.mailmagazine {} .mailmagazine #content #main input { padding: .2em ; max-width: 100%; border: 1px solid #9C304A; border-radius: 3px; } .mailmagazine #content #main .area { margin-bottom: 40px; } .mailmagazine #content #main .area h3 { margin-bottom: 15px; padding-left: 10px; padding-bottom: .2em; color: #7E1C3C; font-size: 1.15rem; border-left: 5px solid #9C304A; border-bottom: 1px solid #9C304A; } .mailmagazine #content #main .area p { margin: .6em 0; } .mailmagazine #content #main .area p.center { text-align: center; } .mailmagazine #content #main .area .submit { margin: 10px auto; padding: .3em 1em; border: none; color: #fff; background-color: #9C304A; } .mailmagazine #content #main .area .submit:hover { opacity: 0.8; } /* ------------最新検索(2013.07.31)------------------ */ body.search #content #main {padding: 0;} body.search #content #main .body {padding: 30px 20px;} body.search #content #main .body .article { margin-bottom: 10px; padding-bottom: 10px; border-bottom: dotted 1px #aaa; } body.search #content #main .body .article.play a {color: #087878;} body.search #content #main .body .article.play a:hover {color: #087878;} body.search #content #main .body .article.link a {color: #9d6b24;} body.search #content #main .body .article.link a:hover {color: #9d6b24;} body.search #content #main .body .article.oriza a {color: #6f832e;} body.search #content #main .body .article.oriza a:hover {color: #6f832e;} body.search #content #main .body .article.post a {color: #1874a0;} body.search #content #main .body .article.post a:hover {color: #1874a0;} body.search #content #main .body .term-name.play { background-color:#087878 ;} body.search #content #main .body .term-name.link { background-color:#9d6b24 ;} body.search #content #main .body .term-name.oriza { background-color:#6f832e ;} body.search #content #main .body .term-name.post { background-color:#1874a0 ;} body.search #content #main .body .article .entry-content { font-size: 1.2em; line-height: 1.4; } body.search #content #main .body .article .when { font-size: 1.2em; margin-left: 5px; vertical-align: bottom; } /* 検索 */ #search { padding: 0;} #search.side { margin: 20px 0 ;} #search.side #searchform {margin:0 auto;} #searchform { position:relative; display: block; height: 30px; width: 240px; margin:0 auto ; overflow: hidden; } #searchform #s{ position: absolute; right: 40px; top: 0; margin: 0; padding: 0; padding-left:10px; width: 80%; height: 30px; background-color: #fff; border-radius : 15px; /* CSS3 */ -moz-border-radius : 15px; /* Firefox */ -webkit-border-radius : 15px; /* Safari,Chrome */ -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); /* background: url(../images/common/bg-search.jpg) no-repeat center center; */ border: none; } #searchform #searchsubmit { position: absolute; right: 0; top: 0; width: 31px; height: 30px; opacity: 0.7; } #searchform #searchsubmit:hover { opacity: 1; } /* googleカスタム検索,窓 */ form#cse-search-box { position:relative; display: block; height: 30px; width: 240px; margin:0 auto 20px; overflow: hidden; } form#cse-search-box #s { position: absolute; right: 40px; top: 0; margin: 0; padding: 0; padding-left:10px; width: 80%; height: 30px; background-position-y: 10px; background-color: #fff; border: none; border-radius : 4px; /* CSS3 */ -moz-border-radius : 4px; /* Firefox */ -webkit-border-radius : 4px; /* Safari,Chrome */ -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); } form#cse-search-box #searchsubmit { position: absolute; right: 0; top: 0; width: 31px; height: 30px; opacity: 0.7; } form#cse-search-box #searchsubmit:hover { opacity: 1; } /* blog template page */ #main #nextinfo li p.cat span:first-child { visibility: hidden; display: block; width: 0; height: 0; } /* ------------googlesearch------------------ */ /* Google カスタム検索 http://www.google.com/cse/manage/all http://www.seotemplate.biz/blog/google-yahoo/7109/ */ body.search #content #main { padding: 0; } body.search #content #main .gsc-input-box { /* position: absolute; right: 40px; top: 0; */ margin: 0; padding:2px 0; width: 100%; height: 32px; vertical-align: middle; background-color: #fff; border-radius : 4px; /* CSS3 */ -moz-border-radius : 4px; /* Firefox */ -webkit-border-radius : 4px; /* Safari,Chrome */ -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); } body.search #content #main .gsc-search-box-tools .gsc-search-box .gsc-input { padding-right: 0px; } body.search #content #main table.gsc-search-box td { padding-top: 0px; vertical-align: middle; background:none; } body.search #content #main table.gsc-search-box td#gs_tti0 { padding: 0px 2px; } body.search #content #main .gcsc-branding-img-noclear, body.search #content #main .gcsc-branding-text { opacity: 0.5; } /* ソート */ body.search #content #main .gsc-selected-option-container { padding: 0 6px; } body.search #content #main .gsc-orderby-label { visibility: hidden; } /* ナビゲーション */ div.gsc-cursor-box { position:relative; overflow:hidden; } div.gsc-cursor-box div.gsc-cursor { position:relative; left:50%; float:left; font-size: 1.1em; height: 27px; line-height: 25px; margin-left: 10px; position: relative; } div.gsc-cursor-box div.gsc-cursor .gsc-cursor-page { position:relative; left:-50%; float:left; color: #71c7d5; display: block; padding: 0 5px; height: 27px; line-height: 25/px; text-decoration: none; border: 1px solid #71c7d5; font-weight: normal; font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif; } div.gsc-cursor-box div.gsc-cursor .gsc-cursor-current-page { text-shadow: none; color: #fff; background-color: #71c7d5; } div.gsc-cursor-box div.gsc-cursor .gsc-cursor-page:hover, div.gsc-cursor-box div.gsc-cursor .gsc-cursor-page:focus { color: #fff; background-color:#71c7d5 ; text-decoration: none; } /* 広告 */ body.search #content #main .gsc-adBlockVertical { visibility: hidden; height: 0; width: 0; } body.search #content #main .gsc-thinWrapper { float: left; overflow: hidden; width: 100%; } body.search #content #main .gsc-wrapper.gsc-thinWrapper { border: 0; } /* body.search #content #main .gcsc-branding-img-noclear, */ body.search #content #main .gcsc-branding-text-name { position: absolute; visibility: hidden; height: 0; width: 0; padding: 0; margin: 0; z-index: -2; } body.search #content #main .gsc-results { margin-top: 0; } body.search #content #main .gsc-above-wrapper-area { padding: 0; border: 0; } body.search #content #main .gsc-orderby-container { padding-right: 4px; } body.search #content #main .gcsc-branding { padding:0; padding-right:0px; } body.search #content #main form.gsc-search-box { margin-bottom: 0px; } body.search #content #main .gs-webResult.gs-result .gs-visibleUrl { color: #aaa; font-weight:normal; letter-spacing: 0.1em; } body.search #content #main .gs-webResult.gs-result a { text-decoration: none; } body.search #content #main .gs-webResult.gs-result a.gs-title:link, body.search #content #main .gs-webResult.gs-result a.gs-title:link b, body.search #content #main .gs-imageResult a.gs-title:link, body.search #content #main .gs-imageResult a.gs-title:link b { color: #087878; font-size: 1em; font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif; text-decoration: none; } body.search #content #main .gs-webResult.gs-result a.gs-title:visited, body.search #content #main .gs-webResult.gs-result a.gs-title:visited b, body.search #content #main .gs-imageResult a.gs-title:visited, body.search #content #main .gs-imageResult a.gs-title:visited b { color: #087878; text-decoration: none; } body.search #content #main .gs-webResult.gs-result a.gs-title:hover, body.search #content #main .gs-webResult.gs-result a.gs-title:hover b, body.search #content #main .gs-imageResult a.gs-title:hover, body.search #content #main .gs-imageResult a.gs-title:hover b { color: #a54970; } body.search #content #main .gsc-result .gs-title { height: auto; text-decoration: none; } /*----------------------------- sharebutton -----------------------------*/ .sharebutton { margin: 20px auto 30px; max-width:100%; } .sharebutton .twitter { padding-left: 20px; } .sharebutton .fb-like { display: block; margin-bottom: 5px; padding-right: 10px; } /* footer */ body #content div.sharedaddy div.sd-block { border: none; } body #content div.sharedaddy .sd-content { float: none; margin: -2px auto; width: 100%; } body #content div.sharedaddy a.sd-button { background: none; border: none !important; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 #FFFFFF inset; color: #000000 !important; display: inline-block; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 1; margin: 0; padding: 0; text-decoration: none; } body #content div.sharedaddy .sd-social-icon a.sd-button > span { width: 24px; height: 24px; padding: 3px; text-indent: -9999px; } body #content div.sharedaddy ul li { margin: 0 5px; width: 24px; height: 24px; margin: 0 0 5px 5px !important; } body #content div.sharedaddy ul li.share-end { width: 0; height: 0; } body #content div.sharedaddy ul li.share-facebook a.sd-button > span { background-image: url("../images/sharedaddy/facebook-teeny.png");} body #content div.sharedaddy ul li.share-tumblr a.sd-button > span { background-image: url("../images/sharedaddy/tumblr-teeny.png");} body #content div.sharedaddy ul li.share-google-plus-1 a.sd-button > span { background-image: url("../images/sharedaddy/googleplus-teeny.png");} body #content div.sharedaddy ul li.share-twitter a.sd-button > span { background-image: url("../images/sharedaddy/twitter-teeny.png");} #oriza.message #main .article-footer { padding: 30px 0 10px; } #oriza.message #main .footer .sharedaddy { } body#news #content div.sd-content { margin-top: 20px; } body #content div.sd-content { position:relative; overflow:hidden; } body #content div.sd-content ul { position:relative; left:50%; float:left; } body #content div.sd-content li { position:relative; left:-50%; float:left; } .sign { margin-top: 15px; margin-bottom: 0; text-align: right; font-weight: 400; } .right { display: block; text-align: right; } .float-right { float: right; } .float-left { float: left; } .big3em { font-size: 1.4em; color: #444; font-weight: normal; letter-spacing: 0.05em; display: block; margin-bottom: 10px; } .big2em { font-size: 1.1em; color: #444; font-weight: normal; } .big { font-size: 1.2em; } .red { color: #e4007f; } .blue { color: #40b0ed; } .green { color: #009900; } .frame1 { padding: 30px; border: 1px solid #444; border-radius : 20px; /* CSS3 */ -moz-border-radius : 20px; /* Firefox */ -webkit-border-radius : 20px; /* Safari,Chrome */ } strong.black333 { font-weight: 300; color: #333; } /* コンタクトフォーム７ */ div.wpcf7-validation-errors { border: 1px solid ; } /* メルマガ、メールマガジン解除 */ #container #main .mail input.wpcf7-text { width: 90%; max-width: 250px; margin-bottom: 10px; border: 1px solid #aaa; position:relative; -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow :0 0 3px rgba(0, 0, 0, 0.2) inset; box-shadow :0 0 3px rgba(0, 0, 0, 0.2) inset; } #container #main input.wpcf7-text { width: 250px; max-width: 100%; margin-bottom: 10px; border: 1px solid #aaa; position:relative; -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow :0 0 3px rgba(0, 0, 0, 0.2) inset; box-shadow :0 0 3px rgba(0, 0, 0, 0.2) inset;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ２■LARGER MOBILE DEVICES（tweeners） Stylesheet: 481px and Up Stylesheet こちらは、iPhoneより大きく、タブレットよりも小さい Galaxy の用なデバイス向けです。 これらをtweenersと呼んでます。 以下のスタイルシートが、(min-width: 481px)なのは、iPhoneが480pxで読み込むためです。 大概は、iPhone用のスタイルでまかなえるので、多く記述することは勧めません。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media screen and (min-width: 481px) { /******************************************* １■ headerの基本設定(min-width: 481px) ******************************************* */ #container #header { display: block; margin: 0 0 20px; padding: 0; height: 100px; overflow: hidden; background: url(../images/common/bg_header2.png) top center repeat-x; /* background-color: #1877A6; */ } #search #container #header, #top #container #header {margin-bottom: 0;} #container #header #inner-header { position: relative; margin: 0; padding: 0; width: auto; height: 100px; background: url(../images/common/bg_header.jpg) top left; background-position: -118px 0; } #play #container #header {background-image: url(../images/common/bg_header-play2.png);} #play #container #header #inner-header { background: url(../images/common/bg_header-play3.png) top left; background-position: -118px 0; } #news #container #header {background-image: url(../images/common/bg_header-news2.png);} #news #container #header #inner-header { background: url(../images/common/bg_header-news.png) top left; background-position: -118px 0; } #about #container #header {background-image: url(../images/common/bg_header-about2.png);} #about #container #header #inner-header { background: url(../images/common/bg_header-about.png) top left; background-position: -118px 0; } #oriza #container #header {background-image: url(../images/common/bg_header-oriza2.png);} #oriza #container #header #inner-header { background: url(../images/common/bg_header-oriza.png) top left; background-position: -118px 0; } #links #container #header {background-image: url(../images/common/bg_header-links2.png);} #links #container #header #inner-header { background: url(../images/common/bg_header-links.png) top left; background-position: -118px 0; } #contact #container #header {background-image: url(../images/common/bg_header-contact2.png);} #contact #container #header #inner-header { background: url(../images/common/bg_header-contact.png) top left; background-position: -118px 0; } #container #header #inner-header #logo { position: absolute; margin-left: 10px; padding:12px 0 0; text-align: left; z-index: 100; } #container #header .langue { visibility: hidden; } /******************************************* １■ ナビゲーションの基本設定(min-width: 481px) ******************************************* */ .nav { position: absolute; margin-top: 40px; margin-left: 159px; height: 35px; width: 355px; overflow: hidden; } .nav ul { display: block; margin: 0; padding: 0; } .nav ul li { float: left; margin:0; } .nav ul li.nav-news a, .nav ul li.nav-plays a { display: block; width: 160px; height: 35px; vertical-align: middle; line-height: 1; text-align: center; font-weight: 700; background: none; background:url(../images/common/btn-nav.png); } .nav ul li.nav-news a { background-position: -520px 0; margin-right: -31px;} .nav ul li.nav-news a:hover { background-position: -520px -40px;} .nav ul li.nav-plays a { background-position: -350px -1px;} .nav ul li.nav-plays a:hover { background-position: -350px -40px;} .nav ul li.current a { background: none; } #news .nav ul li.nav-plays a { background:url(../images/common/btn_nav_play2.png); } #news .nav ul li.nav-plays a:hover { background:url(../images/common/btn_nav_play2-over.png); } .nav2 { position:relative; overflow:hidden; display: block ; width: 100%; height: 40px; margin: 0; } .nav2 ul { position:relative; float: right; display: block; height: 40px; left:auto; } .nav2 ul li { position:relative; left:auto; float:left; margin: 0; } .nav2 ul li a { display: block; width: 80px; height: 40px; vertical-align: middle; line-height: 1; text-align: center; font-weight: 700; background:url(../images/common/btn-nav.png); border-radius : 0px; /* CSS3 */ -moz-border-radius : 0px; /* Firefox */ -webkit-border-radius : 0px; /* Safari,Chrome */ } .nav2 ul li.nav-top a { background-position:-690px 0px ; width: 40px;} .nav2 ul li.nav-top a:hover { background-position:-690px 40px ;} .nav2 ul li.nav-about a { background-position:-20px 0px ;width: 60px;} .nav2 ul li.nav-about a:hover { background-position:-20px 40px ;} .nav2 ul li.nav-oriza a { background-position:-80px 0px ;} .nav2 ul li.nav-oriza a:hover { background-position:-80px 40px ;} .nav2 ul li.nav-links a { background-position:-160px 0px ; width: 90px;} .nav2 ul li.nav-links a:hover { background-position:-160px 40px ;} .nav2 ul li.nav-contact a { background-position:-250px 0px ;width: 90px;} .nav2 ul li.nav-contact a:hover { background-position:-250px 40px ;} .nav ul li a span, .nav2 ul li a span { position: relative; z-index: -2; opacity: 0; } /* ２■ メインピクト(min-width: 481px) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ #content #inner-content{ position: relative; } /* メイン画像 */ #content #inner-content #iview { visibility:visible; float: right; display: block; width:100%; height: auto; max-height: 290px; margin:0 0 20px; overflow: hidden; -webkit-box-shadow : 0 5px 6px -5px rgba(0, 0, 0, 0.3); -moz-box-shadow : 0 5px 6px -5px rgba(0, 0, 0, 0.3); box-shadow : 0 5px 6px -5px rgba(0, 0, 0, 0.3); } #content #inner-content #iview .slick-list { width:100%; height: 100%; max-height: 290px; overflow: hidden; } #content #inner-content #iview .slick-list { float: left; } #content #inner-content #iview img { width: 100%; height: auto; } /* ドット部分 */ #content #inner-content #iview ul.slick-dots { bottom: -5px; } #content #inner-content #iview ul.slick-dots li { margin: 0px; } #content #inner-content #iview ul.slick-dots li.slick-active button::before { color: #2CB5E6; opacity: 0.75; text-shadow: 0 0 2px rgba(255,255,255,1); } /* 矢印部分 */ /* #content #inner-content #iview .slick-prev {left:10px;position: absolute; z-index: 1000;} #content #inner-content #iview .slick-next {right:10px;} #content #inner-content #iview .slick-prev::before, #content #inner-content #iview .slick-next::before { -moz-osx-font-smoothing: grayscale; color: white; font-family: "slick"; font-size: 20px; line-height: 1; text-shadow: 0 0 3px rgba(0,0,0,0.5); z-index: 1000; } #content #inner-content #iview .slick-prev:hover, #content #inner-content #iview .slick-next:hover { opacity: 0.85; } */ /* 検索(min-width: 481px) */ #search { padding: 0;} #searchform { width: 100%;} #searchform #s { width: 80%; max-width: 260px;} /*googleカスタム検索 */ form#cse-search-box { width: 100%;} form#cse-search-box #s { width: 80%;max-width: 260px;} /************************************************** ■ mainColumn（メインコンテンツの構造）(min-width: 481px) ************************************************* */ #content #main { padding: 20px 30px;} #news #content #main,.play #content #main { padding:10px 20px;} #play.single #content #main .article-header, .play.single #content #main .article-header { /*公演案内シングルページのヘッダー */ margin-bottom: 40px; } #play.single #content #main .article-header .company-name, .play.single #content #main .article-header .company-name #play.single #content #main .article-header .project-name, .play.single #content #main .article-header .project-name { padding-right: 135px; } /*----------------------------- sharebutton -----------------------------*/ body #content .article-header div.sharedaddy { position: absolute; right: 0; top:3px; } body #content .article-header div.sharedaddy .sd-sharing { padding: 0; } /* #links.links #content #main { padding: 0;background: none;} #links.links #content #main div.fild {padding: 20px 30px;background-color:#fff;} #links.links #content #main div.fild2 {margin-bottom: 20px;} */ /* ３■ FOOTER STYLES(min-width: 481px) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ /* check your menus here. do they look good? do they need tweaking? */ .footer { letter-spacing: 0.1em; } /* ４■ 画像(min-width: 481px) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ .imagebox { width: auto; margin-bottom: 1em; } .imagebox.medium { max-width: 300px; width: auto; } .entry-content .imagebox img {width: 100%;} .play #content #main .imagebox img, .play #content #main .double .imagebox img { width: 100%; } .play #content #main .main_text .imagebox img { width: 100%;/* auto */ } .play #content #main .main_text .imagebox.left.medium img, .play #content #main .main_text .imagebox.right.medium img { width: 100%; } .imagebox.right { margin-left: 3em; } .imagebox.left { margin-right: 2.5em; } #play #mainColumn .entry-content .double .imagebox.full, #play #mainColumn .entry-content .double .imagebox.medium { max-width: 280px; width: auto; } /* ５■ お知らせページ(min-width: 481px) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ /* ---------- タイトル(min-width: 481px) ------------- */ #news.single #main { padding:20px 20px 0; } #news.single #main .entry-content { padding:0 20px; } #news.single #main .article-footer { padding:0 20px; } /* ***************** 公演案内ページ(min-width: 481px) ********************* */ .article .flyerimage { display:table; vertical-align: middle; clear: left; /* margin:0 0 7px; */ width: 160px; height: 100%; line-height: 135px; margin-right: 0px; } .article .flyerimage a { display:table-cell; vertical-align: middle; height: 100%; } .article .flyerimage img{ vertical-align: middle; } #links.links #main .article .body .info, #play #main .article .info, #links #main .article .info, .content-inner .article .info { clear: none; padding-top: 0px; margin-left: 160px; } #links #main .article .info.bottom25 { margin-top: 8px; } /* 今後の予定 */ #play #stage-schedule .section.plan, #top .content-inner .section.plan { margin: 10px 0; background-color:#087878 ; padding: 0px 10px 0; font-size: 0.9em; } #play #stage-schedule .section.plan .article, #top .content-inner .section.plan .article {border: none;} #play #stage-schedule .section.plan .article h3.plan, #top .content-inner .section.plan .article h3.plan { color: #fff; font-weight: 300;} #play #content #mainColumn #stage-schedule .section.plan .body, #top #content #mainColumn #stage-schedule .section.plan .body { padding: 20px; background-color: #fff; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } #play #content #mainColumn #stage-schedule .section.plan .article .info, #top .content-inner .section.plan .article .info { margin-left: 0; } #play.next #main .plan .article .info, .content-inner .plan .article .info { margin-bottom:0px; } .footer-btn { padding-left: 160px; } #content #main h3 { clear: none;padding-top: 5px;} #content #main .section h2 { color: #4978ab; font-weight: bold; letter-spacing: 0.2em; text-shadow: 0px 0px 1px #ddd;/*テキストシャドー*/ } #content #main .section .content a.flyerimage { margin-right: 20px; float: left; } body.search #content #main { min-height: 400px; } body.play_single #content #main .article-header h1 { /* タイトル */ margin-top: 5px; font-size: 3em; letter-spacing: 0.2em; text-align: center; } body.play_single #content #main .detail-content .detail { display: table; width: 100%; } body.play_single #content #main .detail-content .detail th { display: table-cell; padding: 10px 0; width: 20%; font-size: 1.3em; line-height: 1.2; font-weight: normal; text-align: center; border-bottom: dashed 1px #444; } body.play_single #content #main .detail-content .detail td { padding: 10px 0; display: table-cell; border-bottom: dashed 1px #444; } body.play_single #content #main .detail-content .detail tr:last-child th, body.play_single #content #main .detail-content .detail tr:last-child td, body.play_single #content #main .detail-content .detail tr.noline th, body.play_single #content #main .detail-content .detail tr.noline td { border: none; } body.play_single #content #main .detail-content .detail .wp-table-reloaded { width: auto; } body.play #content #main h1.archive-title, body.date #content #main h1.archive-title { font-size: 5em; opacity: 0.2; } body.parent-pageid-59 #content #main h1.archive-title { font-size: 3.5em; } /* ***************** 青年団とはページ(min-width: 481px) ********************* */ .sharebutton { display: table; vertical-align: middle; margin: 10px auto 20px; padding: 0 0; max-width:300px; } .sharebutton .twitter { display: table-cell; vertical-align: middle; margin: 0px 10px 0px 0px; padding: 0px; } .sharebutton .fb-like { display: table-cell; vertical-align: middle; margin: 0px 10px 0px 0px; padding: 0px 10px; text-align: right; } /* ***************** 平田オリザページ(min-width: 481px) ********************* */ body#oriza #main p.profile { margin-left: 50px; } /* ***************** お問合せページ(min-width: 481px) ********************* */ body.contact #content #main .wpcf7 .wpcf7-form .wpcf7-form-control { margin: 3px 0 10px; width: auto; } body.contact #content #main .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-textarea { width: 80%; } body.contact #content #main .wpcf7 .wpcf7-form .your-name .wpcf7-form-control { width: 200px; } body#contact #content #main .wpcf7 .wpcf7-form .wpcf7-submit { width: 100px; } /* ***************** お問合せページ(min-width: 481px) ********************* */ } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media screen and (min-width: 700px) { /****************************************** ■ 基本構造（レイアウト）(min-width: 700px) ***************************************** */ #content { margin: 0 auto ; width: 95%; } #content #inner-content { float: right; width: 100%; margin-left: -260px; } #content #inner-content #mainColumn { margin-left: 270px; } /****************************************** ■ header（ヘッダー）(min-width: 700px) ***************************************** */ #container #header #inner-header,/* ヘッダーのバックグランドの位置 */ #play #container #header #inner-header, #news #container #header #inner-header, #about #container #header #inner-header, #oriza #container #header #inner-header, #links #container #header #inner-header, #contact #container #header #inner-header {background-position: 0 0;} #container #header #inner-header #logo {margin-left: 50px;} .nav { position: absolute; margin-top: 40px; margin-left: 310px; width: auto; overflow: hidden; } .nav ul { display: block; margin: 0; padding: 0; } /****************************************** ■ mainColumn（メインコンテンツの構造）(min-width: 700px) ***************************************** */ /* .play #content #main .main_text .imagebox img { width: 100%; } */ /****************************************** ■ サイドバーの基本設定(min-width: 700px) ***************************************** */ .sidebar { position:relative; float: left; width: 230px; } #sidebar1 { clear:left; float: left; margin:0 0 20px; padding: 0; width: 250px; } .widgettitle { border-bottom: 2px solid #444; margin-bottom: 0.75em; } div.side1 { position: relative; float: left; padding-bottom: 0px; width: 250px; z-index: 100; } div.side1 div { padding-bottom: 10px; } div.side1 ul.menu { width: 100%; left: 0%; background-position: center bottom; overflow: hidden; border-radius : 3px; /* CSS3 */ -moz-border-radius : 3px; /* Firefox */ -webkit-border-radius : 3px; /* Safari,Chrome */ } ul#menu.menu { background-image: url(../images/common/bar_title_bg-news-lasted.png);} ul#menu-news-2.menu { background-image: url(../images/common/bar_title_bg-news-lasted.png);} ul#menu-next-3.menu { background: url(../images/common/bar_title_bg-stageschedule.png);} ul#menu-oriza-2.menu { background: url(../images/common/bar_title_bg-oriza.png);} div.side1 ul.menu li { margin: 0; width: 100%; left: 0%; height: auto; border-radius : 0px; /* CSS3 */ -moz-border-radius : 0px; /* Firefox */ -webkit-border-radius : 0px; /* Safari,Chrome */ } .side1 ul.menu li a { display: block; font-size: 1.4em; background-color: #fff; letter-spacing: 0.05em; text-align: center; line-height: 30px; height: 30px; border-bottom: 1px dotted #ccc; border-radius : 0px; /* CSS3 */ -moz-border-radius : 0px; /* Firefox */ -webkit-border-radius : 0px; /* Safari,Chrome */ } .side1.link ul.menu li#menu-item-2453 a { background: url(../images/common/bar_title-links.png) #9D6B24 center center repeat-x; color: #fff; } .side1.young ul.menu li#menu-item-2443 a { background: url(../images/common/bar_title-links.png) #9D6B24 center center repeat-x; color: #fff; } .side1 ul#menu-playlist li.menu-item-1511 a, .side1 ul#menu-playlist li.menu-item-6329 a { letter-spacing: 0; font-size: 1.25em; } ul#menu-news li a { color: #2769a3;} /* お知らせ */ ul#menu-news li a:hover, ul#menu-news-2 li.current-menu-item a, ul#menu-news li.current-menu-parent a { color: #fff; background: url(../images/common/bar_title-news-bg.png) #2769a3 center center repeat-x;} ul#menu-next-3 li a,ul#menu-playlist li a { color: #087878 ;} /* 公演案内 公演履歴 */ ul#menu-next-3 li a:hover,ul#menu-next-3 li.current-menu-parent a, ul#menu-playlist li a:hover,ul#menu-playlist li.current-menu-item a, .page-template-page-plays-seinendan .side1 ul#menu-playlist li.menu-item-6287 a, .page-template-page-plays-internationals .side1 ul#menu-playlist li.menu-item-6329 a, .page-template-page-plays-other .side1 ul#menu-playlist li.menu-item-6288 a, .side1.seinendan ul#menu-playlist li.menu-item-6287 a, .side1.project ul#menu-playlist li.menu-item-600 a, .side1.international ul#menu-playlist li.menu-item-1511 a, .side1.link ul#menu-playlist li.menu-item-605 a, .side1.young ul#menu-playlist li.menu-item-606 a, .side1.other ul#menu-playlist li.menu-item-607 a {color: #fff; background: url(../images/common/bar_title-play-bg.png) #087878 center center repeat-x;} ul#menu-playlist-links li a { color: #9d6b24;} ul#menu-playlist-links li a:hover {color: #fff; background: url(../images/common/bar_title-links-bg.png) #9d6b24 center center repeat-x; } ul#menu-about li a { color: #136c2f ;} /* 青年団とは */ ul#menu-about li a:hover, ul#menu-about li.current-menu-item a {color: #fff; background: url(../images/common/bar_title-about-bg.png) #136c2f center center repeat-x;} ul#menu-oriza li a { color: #728825 ;}/* 平田オリザ */ ul#menu-oriza li a:hover, ul#menu-oriza-2 li.current-menu-item a {color: #fff; background: url(../images/common/bar_title-oriza-bg.png) #728825 center center repeat;} body.single-oriza ul#menu-oriza-2 li#menu-item-723 a { color: #fff; background: url(../images/common/bar_title-oriza-bg.png) #728825 center center repeat;} ul#menu-links li a { color: #9d6b24 ;} /* リンク・若手 */ ul#menu-links li a:hover,ul#menu-links li.current-menu-item a { color: #fff; background: url(../images/common/bar_title-links-bg.png) #9d6b24 center center repeat;}/* リンク・若手 */ ul#menu-links li.menu-item-1028 a { letter-spacing: 0; font-size: 1.3em; } /* リンク */ .side1.young ul#menu-links li.menu-item-1035 a { color: #fff; background: url(../images/common/bar_title-links-bg.png) center center repeat;} /* 若手自主企画 */ div.paststage { margin: 0;} div.paststage a { display: block; margin:0; width: 100%; max-width: 100%; height: 30px; font-size: 1.4em; line-height: 30px; background: url(../images/common/bar_title-play-bg.png) #087878 center center repeat-x; } .paststage a:link { color: #fff;} .paststage a:visited { color: #fff;} .paststage a:hover { color: #fff; background-image: url(../images/common/bar_title-play-bg-over.png);} .paststage a:active { color: #fff;} .paststage.links a { background: url(../images/common/bar_title-links-bg.png) center center repeat-x;} .paststage.links a:hover { color: #fff; background-image: url(../images/common/bar_title-links-bg-over.png);} div.side1 div.massage { margin: 0 auto; padding-bottom: 0; } div.massage a { display: block; margin:0 auto; width: 100%; height: 30px; font-size: 1.4em; line-height: 30px; background: url(../images/common/bar_title_bg-oriza.png) center center; border-top-left-radius : 2px; border-top-right-radius : 2px; -moz-top-radius-bottomleft : 2px; -moz-top-radius-bottomright : 2px; -webkit-top-bottom-left-radius : 2px; -webkit-top-bottom-right-radius: 2px; border-bottom-left-radius : 0px; border-bottom-right-radius : 0px; -moz-border-radius-bottomleft : 0px; -moz-border-radius-bottomright : 0px; -webkit-border-bottom-left-radius : 0px; -webkit-border-bottom-right-radius: 0px; } ul.orizamessage { display: block; visibility: visible; height: auto; width: auto; margin-bottom: 10px; background-color: #fff; } ul.orizamessage li { padding: 5px 10px; border-bottom: 1px dotted #ccc; } ul.orizamessage li .time { padding-right: 5px; display: block; } ul.orizamessage li a { font-size: 1.1em; padding-left: 10px; } ul.orizamessage li a:link { color:#728825 ;} ul.orizamessage li a:visited { color:#728825 ;} ul.orizamessage li a:hover {color: #afc168;} ul.orizamessage li a:acitve {color: #afc168;} .massage {margin-bottom: 0px;} .massage a { display: block; margin: 0 auto; max-width: 250px; width:130px; min-width: 100px; height: 25px; color: #fff; font-size: 1.2em; line-height: 25px; background: url(../images/common/bar_title_bg-oriza.png) #728825 center center repeat-x; } .massage a:hover { background: url(../images/common/bar_title_bg-oriza-over.png) #afc168 center center repeat-x; } body#top .massage { width: 250px; height: 30px; overflow: hidden; } body#top .massage a { width: 250px; height: 30px; line-height: 30px; background: url(../images/common/banner-teikibin2.png) #728825 center center repeat-x; } body#top .massage a:hover { opacity: 0.9; } body#top .massage a span { visibility: hidden; } ul.orizamessage { display: block; visibility: visible; height: auto; width: auto; } div.news.btn {margin: 0;} div.news.btn a { display: block; margin:0; width: 100%; height: 30px; font-size: 1.4em; line-height: 30px; background: url(../images/common/bar_title-news-bg.png) center center; } div.links.btn {margin: 0; } div.links.btn a { color:#fff; display: block; margin:0; width: 100%; height: 30px; font-size: 1.4em; line-height: 30px; background: url(../images/common/bar_title-links-bg.png) center center; } div.links.btn a:hover { background: url(../images/common/bar_title-links-bg-over.png) center center; } div#online a { display: block; width: 250px; height: 70px; background: url(../images/common/banner-ticket.png) no-repeat center center; } div#online a:hover { background: url(../images/common/banner-ticket.png) no-repeat center center; opacity: 0.9; } /* div#online a:hover {background: url(../images/common/banner-online-over.png) no-repeat center center;} */ div#online a span{ visibility: hidden;} body.archive.category div.side1 #search.side, div.side1 #search.side { margin:0px auto; padding:10px 0; } .side1 div#online { margin-bottom: 0px; padding: 0 0 10px; /* border-top: dashed 1px #ddd; */ /* border-bottom: dashed 1px #ddd; */ } #sidebar1 ul.banner li a:hover img { opacity: 0.9;} /****************************************** 　フッターの基本設定(min-width: 700px) ***************************************** */ #footer { text-align: left; } #footer #inner-footer { position:relative; width: 1120px; min-height: 300px; margin:0 auto; } #footer .logo { clear: both; padding-top: 30px; padding-left: 50px; } #footer .langue { position:relative; overflow:hidden; width: 120px; margin-left: 50px; } #footer .copyright { text-align: right; margin-bottom: 5px; letter-spacing: 0.25em; } #footer #adress { position: absolute; left: 240px; top: 35px; font-size: 0.9em; padding-left: 20px; border-left: 6px solid #444; padding-bottom: 0; letter-spacing: 0.2em; text-shadow: 0px 1px 1px #000;/*Apple スタイル*/ } #footer #agora { position: absolute; right: 5%; top: 35px; padding-left: 20px; border-left: 6px solid #444; padding-bottom: 100px; letter-spacing: 0.2em; text-shadow: 0px 1px 1px #000;/*Apple スタイル*/ } #footer #agora a { display: block; line-height: 1; color: #94918e; background: url(../images/common/logoAgora-over.png) no-repeat bottom left; } #footer #agora a img { margin-top: 4px;} #footer #agora a:hover img { visibility: hidden;} #footer #ebara { position: absolute; right: calc(5% + 30px); top: 83px; } /* 公演ページ */ .play .detail th { width: 120px; } } /****************************************** ■ 各ページの基本設定(min-width: 700px) ***************************************** */ #news-lasted .content-inner h3.news-title { } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ３■ TABLET & SMALL LAPTOPS Stylesheet: Tablet & Small Desktop Stylesheet このサイズは、ラップトップ、iPad、他のタブレットで機能します。 ここに徹底的に記述してください。 ０１■ 基本構造（レイアウト、グリッドスタイル） ０２■ フォント設定 ０３■ リンク設定 ０４■ リスト設定 ０５■ テーブル設定 ０６■ ヘッダーの基本設定 ０７■ ナビゲーションの基本設定 ０８■ ポスト及びコメントの基本設定 ０９■ ページナビの基本設定 １０■ コメントの基本設定 １１■ コメントフォームの基本設定 １２■ サイドバーの基本設定 １３■ フッターの基本設定 １４■ 各ページのクラス設定 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ @media screen and (min-width: 1050px) { /****************************************** ０１■ 基本構造（レイアウト） ***************************************** */ #content { margin: 0 auto ; width: 1000px; } #content #inner-content { float: right; width: 730px; } #content #inner-content #mainColumn { margin-left: 0; } #links.links #content #main, /*#contact #content #main, #about #content #main, #oriza #content #main,*/ #news #content #main, .play.single #content #main, .play.links #content #main, #play.single #content #main, #play.links #content #main { padding:20px 30px;} #news #content .main .body { padding:10px 20px;} #news #content .main.section2 { float: left; width: 355px; } #news #content .main.section3 { float: right; width: 355px; } #news #content .main.section2 .body h3.news-title, #news #content .main.section3 .body h3.news-title { clear: both; padding: 0; } /****************************************** ０２■. フォント設定(min-width: 1050px) ******************************************/ /****************************************** ０３■ リンク設定(min-width: 1050px) ******************************************/ /****************************************** ０４■ リスト設定(min-width: 1050px) ******************************************/ /****************************************** ０５■ テーブル設定(min-width: 1050px) ******************************************/ /****************************************** ０６■ ヘッダーの基本設定(min-width: 1050px) ******************************************/ #container {margin: 0;padding: 0;} #container #header #inner-header { position:relative; margin: 0 auto; padding: 0; width: 1050px; background: url(../images/common/bg_header.jpg) top left no-repeat; } #container #header #header-left { display: table-cell; margin: 0; padding: 0; height: 80px; background: url(../images/common/bg_header-left.png) top center repeat-x; } /*#container #header #header-right { display: table-cell; margin: 0; padding: 0; height: 80px; background: url(../images/common/bg_header-right.png) top center repeat-x; } */ #container #header #inner-header #logo { float: left; margin: 12px 0 0 50px; padding:0; background: none; line-height: 1; } #container #header #search { display: block; visibility: visible; bottom: 0; height: 30px; width: 300px; margin-top: 10px; margin-left: 720px; } #container #header .langue { visibility: visible; position: absolute; top:15px; left: -50px; right: auto; } #container #header .langue ul li { text-shadow: none;/*Apple スタイル*/ } /****************************************** ０７■ ナビゲーションの基本設定(min-width: 1050px) *******************************************/ /* ========================================================= #toTop / トップへのボタンの設定 ========================================================= */ #toTop { position: fixed; bottom: 180px; right: 20px; } #toTop a { width: 37px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; filter: alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Firefox */ opacity:0.5; /* Opera・Safari */ /* transition */ -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #toTop a:hover { color: #000; filter: alpha(opacity=100); /* IE */ -moz-opacity:1; /* Firefox */ opacity:1; /* Opera・Safari */ } /* arrow icon (span tag) */ #toTop span { width: 37px; height: 37px; display: block; margin-bottom: 7px; background: url(../images/common/btnToTop.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #toTop a:hover span { } /****************************************** １２■ サイドバーの基本設定(min-width: 1050px) ***************************************** */ div.massage a { display: block; margin:0; width: 100%; height: 30px; color: #fff; font-size: 1.4em; line-height: 30px; background: url(../images/common/bar_title_bg-oriza.png) center center; } div#online a { display: block; width: 250px; height: 70px; background: url(../images/common/banner-ticket.png) no-repeat center center; } div#online a:hover { opacity: 0.9; } /* div#online a:hover { background: url(../images/common/banner-online-over.png) no-repeat center center;} */ div#online a span{ visibility: hidden;} body.archive.category div.side1 #search.side, div.side1 #search.side { margin:0px auto 10px; padding:10px 0; /* border-top: 1px #ddd dashed; border-bottom: 1px #ddd dashed; */ } body.error404 div.side1 { visibility: hidden; height: 0; display: none; } .side1 div#online { margin-bottom: 0px; padding: 0 0 10px; /* border-top: dashed 1px #ddd; */ /* border-bottom: dashed 1px #ddd; */ } #sidebar1 ul.banner li a:hover img { opacity: 0.9;} #search div.side1 { display: none; visibility: hidden; height: 0; width: 0; overflow: hidden; } /****************************************** １３■ フッターの基本設定(min-width: 1050px) ***************************************** */ /* you'll probably need to do quite a bit of overriding here if you styled them for mobile. Make sure to double check these! */ .footer #inner-footer { max-width: 1000px; } .footer ul#footerinfo { margin: 0; } .footer ul#footerinfo li { float: left; width: 300px; margin: 0; padding: 20px 0; } .footer ul#footerinfo li#sns { margin: 0 50px; } .footer ul#footerinfo li#mailmagazine { float: right; } .footer ul#footerinfo li .wpcf { width: 300px; } .footer-links ul li { /* be careful with the depth of your menus. it's very rare to have multi-depth menus in the footer. */ } #footer #agora { right: 20%; padding-top: 10px; padding-bottom: 10px; } #footer #ebara { top: 35px; right: calc(5% + 50px); } #footer #ebara a { margin: 0;} /****************************************** １４■ 各ページの設定(min-width: 1050px) ***************************************** */ /* home page */ /*メイン画像*/ #content #inner-content #iview { position: relative; float: right; display: block; margin:0 0 20px; padding: 0; width: 730px; height: 290px; min-height: 290px; /* overflow: hidden; */ } #content #inner-content #iview { } #stage-schedule .content-inner { padding:10px 20px; background-color: #fff; } #stage-schedule .content-inner .articlehalf {/* リンク、若手自主 */ position: relative; /* border: black solid 1px; */ /* float: left; */ clear: right; /* border-bottom: 1px solid red; */ /* width: 50%; */ width: 100%; margin: 10px 0 padding:0 ; /* font-size: 0.9em; */ } #stage-schedule .content-inner .articlehalf p { letter-spacing: 0em; } #news-lasted .content-inner .news-lasted { position: relative;} #news-lasted .content-inner span.new { /* float: right; */ } #news-lasted .content-inner h3.news-title { clear: none; padding-left: 220px; } #news .main .body h3.news-title {/* お知らせトップのニュースタイトル */ clear: none; padding-left: 90px; font-size: 1.3em; } #news .main.info .body h3.news-title { font-size: 1.4em; } /* end home page */ /* .single-play #content #main, .play #content #main { position: relative; width: 100%; min-height: 650px; } */ .news #content #main { position: relative; width: 100%; min-height: 350px; } #explanation { width: 100%; } #explanation li { margin-bottom: 50px; width: 300px; } #explanation li.left { clear: both; float: left; } #explanation li.right { float: right; } /* 更新カラム */ #centerColumn { float: none; padding: 0; position: absolute; left: 350px; width: 300px; } /* 検索(min-width: 481px) */ #centerColumn #latestinfo { padding: 20px; width: 300px; height: 90%; background-color:#b4b4b4; } /* ***************** 第二階層(min-width: 1050px) ********************* */ #inner-content { /* padding-top: 30px; */ /* overflow: hidden; */ } #inner-content p.title { padding-bottom: 20px; } /* ***************** お知らせページ(min-width: 1050px) ********************* */ /* ***************** お知らせ、公演案内ページ(min-width: 1050px) ********************* */ .page-id-154 #content #inner-content #iview { box-shadow: 0 0px 3px 0px rgba(0, 0, 0, 0.5); display: block; margin:20px auto 40px; overflow: hidden; } /* シングルページ */ body.play_single #content #main .article-header { /* 記事のヘッダー */ margin-bottom: 30px; letter-spacing: 0.2em; text-align: left; } body.single.news #content #main .article-header h1, body.play_single #content #main .article-header h1 { /* タイトル */ text-align: left; } body.play_single #content #main .entry-content .img {/* 画像の位置 */ float: right; margin-left: 30px; margin-bottom: 30px; } body.play #content #main h1.archive-title, body.date #content #main h1.archive-title { position: absolute; top:-73px; left: 220px; opacity: 0.2; } body.parent-pageid-59 #content #main h1.archive-title { top: -58px; } body.next #content .other { clear: both; } /* blog template page */ /* archive page */ /* date archive page */ /* replace the number to the corresponding page number */ /* search page */ /* search result page */ /* no results search page */ /* individual paged search (i.e. body.search-paged-3) */ /* 404 page */ /* single post page */ /* individual post page by id (i.e. body.postid-73) */ /* individual paged single (i.e. body.single-paged-3) */ /* attatchment page */ /* individual attatchment page (i.e. body.attachmentid-763) */ /* style mime type pages */ /* author page */ /* user nicename (i.e. body.author-samueladams) */ /* paged author archives (i.e. body.author-paged-4) for page 4 */ /* category page */ /* individual category page (i.e. body.category-6) */ /* replace the number to the corresponding page number */ /* tag page */ /* individual tag page (i.e. body.tag-news) */ /* replace the number to the corresponding page number */ /* custom page template page */ /* individual page template (i.e. body.page-template-contact-php */ /* replace the number to the corresponding page number */ /* parent page template */ /* child page template */ /* replace the number to the corresponding page number */ /* if user is logged in */ /* paged items like search results or archives */ /* individual paged (i.e. body.paged-3) */ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ３■ DESKTOP (min-width: 1030px)が上記の(min-width: 1050px)に限りなく近いのでパス @media only screen and (min-width: 1030px) {} ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ４■ LARGE VIEWING SIZE Stylesheet: Super Large Monitor Stylesheet こちらは、より大きなモニター用です。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media screen and (min-width: 1240px) {} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ５■ RETINA (2x RESOLUTION DEVICES) Stylesheet: Retina Screens & Devices Stylesheet こちらは、RETINA採用のiPhone（4s）、iPad（2,3）や次期高解像度モニター用です。 あなたが望むならば、RETINAや特定のサイズを設定することが出来ます。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* EXAMPLE Let's say you have an image and you need to make sure it looks ok on retina screens. Let's say we have an icon which dimension are 24px x 24px. In your regular stylesheets, it would look something like this: .icon { width: 24px; height: 24px; background: url(img/test.png) no-repeat; } For retina screens, we have to make some adjustments, so that image doesn't look blurry. So, taking into account the image above and the dimensions, this is what we would put in our retina stylesheet: .icon { background: url(img/test@2x.png) no-repeat; background-size: 24px 24px; } So, you would create the same icon, but at double the resolution, meaning it would be 48px x 48px. You'd name it the same, but with a @2x at the end (this is pretty standard practice). Set the background image so it matches the original dimensions and you are good to go. */ } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ６■ iPHONE 5 MEDIA QUERY Want to get fancy for no good reason? Knock yourself out. ??? ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ７■ PRINT STYLESHEET Stylesheet: Print Stylesheet 印刷用のスタイルシートはこちら ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a,a:visited { color: #444 !important; text-decoration: underline; } a:after, a:visited:after { content: " (" attr(href) ")"; } a abbr[title]:after, a:visited abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre,blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr,img {page-break-inside: avoid;} img {max-width: 100% !important;} @page { margin: 0.5cm; } p,h2,h3 { orphans: 3; widows: 3; } h2,h3 { page-break-after: avoid; } .sidebar, .page-navigation, .wp-prev-next, .respond-form, nav { display: none; } }