/* INDEX ============================= */
/* html,bodyタグの設定================== */
/* ヘッダーの固定======================== */
/* ボディの定義======================== */
/* アンカー対策======================== */
/* レスポンシブ タブレット＆PC=========== */
/* レスポンシブ スマホ================== */
/* 書籍表紙============================== */
/* メイン ============================== */
/* 見出し============================== */
/* 小見出し============================ */
/* 見出しの中 お知らせ================ */
/* 見出しの中 お知らせ１） 個別======== */
/* 見出しの中 概要 ================ */
/* 見出しの中 お問合せ ========== */
/* フッター============================= */
/* html,bodyタグの設定
========================================================================== */
html, body{
margin: 0; /* 余白の削除 */
padding: 0; /* 余白の削除 */
width:100%;
height:100%;
top: 0px;
left: 0px;
background-color:#FFFFFF;
color: #707070 ;
font-family:Osaka, Arial, Helvetica, sans-serif;
overflow-x:hidden; /* 横スクロール禁止 */
}
a{
text-decoration: none; /* リンク文字装飾なし */
}
#wrapper{
width: 100%;
margin: 0 auto;
}
/* ヘッダーの固定
========================================================================== */
div#header-fixed
{
position: fixed; /* ヘッダーの固定 */
top: 0px; /* 位置(上0px) */
left: 0px; /* 位置(右0px) */
width: 100%; /* 横幅100% */
height: 140px; /* 縦幅140px */
}
div#header-bk {
background-color:#001e5a; /* 背景色(コーポレートカラー) */
padding:10px 10px 20px; /* 上右10px、下20pxをあける */
height:60px; /* 縦の高さ60px */
width:100%; /* 横の幅を100% */
}
div#header {
height: 100%; /* 縦の表示領域はheader-bkと同じ */
width:100%; /* 横の幅を100% */
margin: auto; /* 中央揃え */
}
h1 {
display: block; /* サイズ指定ブロック */
width: 264px; /* 画像横の幅264px */
height: 50px; /* 画像縦の高さ504px */
font-size: 0; /* タイトルのフォント非表示のためサイズ０ */
background: url(./pix/Logo.png) left top/264px auto no-repeat; /* ロゴ背景に指定 */
}
nav{
float: right; /* 右寄せ */
margin: 0; /* 外余白無し */
padding: 0 5% 0 0; /* 内余白おしり5％空ける */
font-size: 100%; /* フォントサイズ標準 */
width: 100%; /* 横の幅を100% */
background-color:#001e5a; /* 背景色（コーポレートカラー） */
color:#FFFFFF; /* 文字色白 */
text-align:right; /* 文字右寄せ */
}
nav a{
color:#FFFFFF; /* 文字色白 */
text-decoration: none; /* 文字装飾なし */
}
nav a:hover{color: #FFF800;} /* リンク文字色 */
/* ボディの定義
========================================================================== */
div#body-bk{
padding:100px 0 0 0; /* 上に100pxを余白を取る */
}
div#body{
width: 100%; /* 横幅100% */
margin: 0 auto;
}
/* アンカーズレ対策
========================================================================== */
a.anchor{ /* リンク先に指定 */
display: block;
padding-top: 100px;
margin-top: -100px;
}
/* タブレット＆パソコン版の記述 画面サイズが421px以上の場合
========================================================================== */
@media screen and (min-width:481px) {
.Facebook {
width: 480px;
}
.team723 {
width: 480px;
}
}
/* スマホ用 画面サイズが480px以下の場合
========================================================================== */
@media screen and (max-width:480px) {
img.smart { /* 俳優一覧写真サイズ小さめ */
width: 56px;
height: 70px;
}
img.smartrakuda { /* ラクダロゴ サイズ小さめ */
width: 60px;
height: 60px;
}
.movie-wrap { /* YouTubeレスポンシブ */
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.movie-wrap iframe { /* YouTubeレスポンシブ */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* 書籍表紙
========================================================================== */
.bookcover {
border-bottom:solid; /* テキスト下線 */
border-color:#FFFFFF; /* 線色(白)必要になればコーポレートカラー使用する */
border-width:10px; /*下線太さ10px */
font-size: 1.5em; /*文字サイズ1.5倍*/
}
/* メイン
========================================================================== */
#main{
text-align: center; /* 一覧全体を中央に配置 */
margin-bottom: 500px;
}
.bookcover p{
display:inline-block;
vertical-align:middle; /*縦方向中央揃え*/
}
/* 見出し
========================================================================== */
h2 {
margin-left: auto;
margin-right: auto;
width: 80%; /* 横幅80% */
padding:10px;
color:#001e5a; /* 文字色白 */
text-align:center; /* 文字を中央に配置 */
background-color:#FFFFFF; /* 背景色 */
border: solid 3px #001e5a; /*線(コーポレートカラー)*/
border-radius: 10px; /*角の丸み*/
/* letter-spacing:0.5em; /* 文字間 */
}
/* 小見出し
========================================================================== */
h3 {
margin-left: auto;
margin-right: auto;
padding:10px 0; /* 内余白上下10px */
color:#FFFFFF; /* 文字色白 */
width: 70%; /* 横幅 70% */
background-color:#001e5a; /* 背景色(コーポレートカラー) */
text-align: center; /* 文字を中央に配置 */
}
/* 見出しの中 お知らせ
========================================================================== */
.news {
width: 90%; /* 横幅 90% */
margin-left: auto;
margin-right: auto;
text-align: center; /* 中央寄せ */
overflow:hidden;
height:100%;
}
.shop {
margin: 2em auto;
padding: 1em;
width: 30%;
border: 1px solid #ccc; /* 枠線 */
background-color: #fff; /* 背景色 */
box-shadow: 1px 1px 2px #ccc;
}
/* １） お知らせ個別 */
.news1 {
width: 270px;
height: 250px;
margin: 10px;
border:solid 1px; /* 枠線太さ1px */
border-color:#001e5a; /* 背景色(コーポレートカラー) */
padding:15px;
margin-bottom: 500px;
}
/* 見出しの中 概要
========================================================================== */
/* １）概要 */
#synopsis {
left: 0px;
width: 75%; /* 横幅 75% */
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
margin-top:0px;
border: 1px solid #ccc; /* 枠線 */
background-color: #fff; /* 背景色 */
box-shadow: 1px 1px 2px #ccc;
padding:20px;
margin-bottom: 500px;
}
.synopic {
margin:0 20px 20px 0;
}
/* 見出しの中 お問合せ
========================================================================== */
#contact {
text-align:center; /* 中央寄せ */
margin: 2em auto;
padding: 1em;
width: 75%;
}
/* フッター
========================================================================== */
footer:before{
content: "";
display: table;
clear: both;
}
footer p{
background: #001e5a; /* 背景色(コーポレートカラー) */
width: 200px;
margin: 50px auto 20px;
padding: 5px;
text-align: center;
font-size: 75%;
}
footer p small{
color: #fff;
border: 1px #fff solid;
padding: 10px;
display: block;
}
footer a{color: #fff}