diff --git a/jpf/base/logo.png b/jpf/base/logo.png new file mode 100644 index 0000000000..f5b9bd0eee Binary files /dev/null and b/jpf/base/logo.png differ diff --git a/jpf/css/inview.css b/jpf/css/inview.css new file mode 100644 index 0000000000..2fc1ecca56 --- /dev/null +++ b/jpf/css/inview.css @@ -0,0 +1,55 @@ +@charset "utf-8"; + + +/*inviewのスタイル +---------------------------------------------------------------------------*/ +/*共通設定（待機中）*/ +.up, .left, .right, .transform1, .transform2 { + opacity: 0; /*透明度（透明の状態）*/ + position: relative; +} +/*共通設定（要素が見えたら実行するアクション）*/ +.upstyle, .leftstyle, .rightstyle, .transform1style, .transform2style { + opacity: 1; /*透明度（色が100%出た状態）*/ + transition: 0.5s 1s; /*0.5sはアニメーションの実行時間0.5秒。1sは1秒遅れてスタートする指定。*/ +} +/*upスタイル。下から上にフェードインしてくるスタイル（待機中）*/ +.up { + bottom: -50px; /*基準値の下50pxの場所からスタート*/ +} +/*要素が見えたら実行するアクション*/ +.upstyle { + bottom: 0px; /*基準値まで戻す*/ +} +/*leftスタイル。左からフェードインしてくるスタイル（待機中）*/ +.left { + left: -100px; /*基準値より左に100pxの場所からスタート*/ +} +/*要素が見えたら実行するアクション*/ +.leftstyle { + left: 0px; /*基準値まで戻す*/ +} +/*rightスタイル。右からフェードインしてくるスタイル（待機中）*/ +.right { + right: -100px; /*基準値より右に100pxの場所からスタート*/ +} +/*要素が見えたら実行するアクション*/ +.rightstyle { + right: 0px; /*基準値まで戻す*/ +} +/*transform1スタイル。その場で回転するスタイル（待機中）*/ +.transform1 { + transform: scaleX(0); /*幅を0%でスタート*/ +} +/*要素が見えたら実行するアクション*/ +.transform1style { + transform: scaleX(1); /*幅を100%に戻す*/ +} +/*transform2スタイル。倒れた状態から起き上がるスタイル（待機中）*/ +.transform2 { + transform: perspective(400px) rotateX(100deg); +} +/*要素が見えたら実行するアクション*/ +.transform2style { + transform: perspective(0px) rotateX(0deg); +} diff --git a/jpf/css/slide.css b/jpf/css/slide.css new file mode 100644 index 0000000000..07c2e496ba --- /dev/null +++ b/jpf/css/slide.css @@ -0,0 +1,80 @@ +@charset "utf-8"; + + + +/*CSSスライドショーアニメーション設定 +---------------------------------------------------------------------------*/ +/*1枚目*/ +@keyframes slide1 { + 0% {left: 110%;} + 3% {left: 0%;} + 20% {left: 0%;} + 23% {left: -110%;} + 100% {left: -110%;} +} +/*2枚目*/ +@keyframes slide2 { + 0% {left: 110%;} + 33% {left: 110%;} + 36% {left: 0%;} + 53% {left: 0%;} + 56% {left: -110%;} + 100% {left: -110%;} +} +/*3枚目*/ +@keyframes slide3 { + 0% {left: 110%;} + 66% {left: 110%;} + 69% {left: 0%;} + 86% {left: 0%;} + 89% {left: -110%;} + 100% {left: -110%;} +} + +/*mainimg +---------------------------------------------------------------------------*/ +/*画像ブロック*/ +#mainimg { + clear: left; + position: relative; + width: 100%; + height: 100%; /*高さ*/ + z-index: 1; + /*background: #000; 背景色*/ + /*overflow: hidden;*/ +} +/*３枚画像の共通設定*/ +.slide1,.slide2,.slide3 { + position: absolute;left:0px;top:0px;width: 100%;height: 100%; + animation-duration: 15s; /*実行する時間。「s」は秒の事。*/ + animation-iteration-count:infinite; /*実行する回数。「infinite」は無限に繰り返す意味。*/ + animation-delay: 4s; /*アニメーションを遅れて開始させる。「s」は秒の事。*/ + animation-fill-mode: both; /*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/ +} +/*メッセージ欄*/ +#mainimg p { + position: absolute;z-index: 1; + left: 0px; /*左から0pxの場所にブロックを配置*/ + bottom: 30px; /*下から30pxの場所にブロックを配置*/ + width: 90%; /*幅。下のpaddingと合計して100になるように。*/ + padding: 10px 5% !important; /*上下、左右へのボックス内の余白。*/ + background: #000; /*背景色（古いブラウザ用）*/ + background: rgba(0,0,0,0.8); /*背景色。0,0,0は黒の事で0.8は80%色がついた状態の事。*/ + color: #fff; /*文字色*/ +} +/*1枚目*/ +.slide1 { + background: url(../images/1.jpg) no-repeat center center/cover; /*1.jpg画像の読み込み*/ + animation-name: slide1; /*上で設定しているキーフレーム（keyframes）の名前*/ +} +/*2枚目*/ +.slide2 { + background: url(../images/2.jpg) no-repeat center center/cover; /*2.jpg画像の読み込み*/ + animation-name: slide2; /*上で設定しているキーフレーム（keyframes）の名前*/ +} +/*3枚目*/ +.slide3 { + background: url(../images/3.jpg) no-repeat center center/cover; /*3.jpg画像の読み込み*/ + animation-name: slide3; /*上で設定しているキーフレーム（keyframes）の名前*/ +} + diff --git a/jpf/css/style.css b/jpf/css/style.css new file mode 100644 index 0000000000..d799bdc056 --- /dev/null +++ b/jpf/css/style.css @@ -0,0 +1,745 @@ +@charset "utf-8"; + + +/*slide.cssの読み込み*/ +@import url(slide.css); + +/*inview.cssの読み込み*/ +@import url(inview.css); + + +/*全端末（PC・タブレット・スマホ）共通設定 +------------------------------------------------------------------------------------------------------------------------------------------------------*/ + +/*全体の設定 +---------------------------------------------------------------------------*/ +body,html {width: 100%;height: 100%;} +body { + margin: 0px; + padding: 0px; + color: #000; /*全体の文字色*/ + font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/ + font-size: 12px; /*文字サイズ*/ + line-height: 2; /*行間*/ + background: #fff; /*背景色*/ + -webkit-text-size-adjust: none; +} +h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;} +ul {list-style-type: none;} +img {border: none;max-width: 100%;height: auto;vertical-align: middle;} +table {border-collapse:collapse;font-size: 100%;border-spacing: 0;} +iframe {width: 100%;} + +/*リンク（全般）設定 +---------------------------------------------------------------------------*/ +a { + color: #000; /*リンクテキストの色*/ + transition: 0.4s; /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/ +} +a:hover { + color: #29acef; /*マウスオン時の文字色*/ + text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/ +} + +/*トップページのcontainerとcontentsとmain +---------------------------------------------------------------------------*/ +.home #container,.home #contents,.home #main{ + height: 100%; +} + +/*container。サイト全体を囲むブロック +---------------------------------------------------------------------------*/ +#container { + max-width: 1600px; /*最大幅。これ以上幅が広くならないように。*/ + margin: 0 auto; +} + +/*トップページのSVGロゴアニメーション設定 +---------------------------------------------------------------------------*/ +#svg-logo { + fill: transparent; /*初期の色。透明。*/ + stroke: #000; /*フチ取りの色*/ + stroke-width: 1; /*フチ取りの幅*/ + width: 40%; /*画像の幅*/ + height: 30%; /*画像の高さ*/ + position: absolute; + left: 30%; /*左から30%の場所に配置*/ + bottom: 35%; /*下から35%の場所に配置*/ +} + +/*header +「top: -80px」の「80」の数字は、headerのheight(高さ)に合わせる。 +---------------------------------------------------------------------------*/ +/*アニメーションフレーム*/ +@keyframes header { +0% {opacity: 0;top: -80px;} +100% {opacity: 1;top: 0px;} +} +/*headerブロック*/ +header { + position: fixed; /*固定表示*/ + left: 0px;top: 0px; + z-index: 2; + width: 100%; /*幅*/ + height: 80px; /*高さ*/ + background: #fff; /*背景色*/ + box-shadow: 0px 0px 30px 30px #fff; +} +/*headerブロック（トップページへの追加設定）*/ +.home header { + animation-name: header; /*上で設定しているキーフレーム（keyframes）の名前*/ + animation-delay: 5s; /*アニメーションを遅れて開始させる。「s」は秒の事。*/ + animation-duration: 0.2s; /*アニメーションの実行時間。「s」は秒の事。*/ + animation-fill-mode: both; /*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/ + animation-timing-function: ease-in-out; + background: #fff; /*背景色（古いブラウザ用）*/ + background: rgba(255,255,255,0.9); /*背景色。255,255,255は白の事で0.9は色が90%出た状態の事。*/ + box-shadow: none; +} +/*ロゴ画像*/ +header #logo img { + width: 180px; /*画像の幅*/ + position: absolute; + left: 3%; /*ヘッダーブロックに対して左から3%の場所に配置*/ + bottom: 10px; /*ヘッダーブロックに対して下から10pxの場所に配置*/ +} + +/*headerアイコン（facebookやtwitterなどのアイコンブロック） +---------------------------------------------------------------------------*/ +/*アイコンを囲むブロック全体の設定*/ +header .icon { + position: absolute; + right: 3%; /*ヘッダーブロックに対して右から3%の場所に配置*/ + bottom: 10px; /*ヘッダーブロックに対して下から10pxの場所に配置*/ +} +/*アイコン１個あたりの設定*/ +header .icon li { + display: inline; /*横並びにさせる指定*/ +} +/*アイコン画像の設定*/ +header .icon img { + width: 30px; /*画像の幅*/ + margin-left: 5px; /*画像同士の余白*/ +} + +/*メインメニュー +---------------------------------------------------------------------------*/ +/*メニューブロック*/ +#menubar { + overflow: hidden;clear: both; + position: absolute; + left: 250px; /*ヘッダーブロックに対して左から300pxの場所に配置*/ + bottom: 10px; /*ヘッダーブロックに対して下から10pxの場所に配置*/ +} +/*メニュー１個あたりの設定*/ +#menubar li { + overflow: hidden; + float: left; /*左に回り込み*/ + text-align: center; /*文字をセンタリング*/ + padding: 0px 10px; /*上下、左右へのメニュー内の余白*/ +} +#menubar li a { + display: block;text-decoration: none; + padding-top: 3px; /*下のブロックの「border-bottom」と「bottom」の数字と合わせる。*/ +} +/*下線のアニメーション設定*/ +#menubar li::after { + transition: 0.3s; /*0.3秒かけてアニメーションを実行する。*/ + content: ""; + display: block; + border-bottom: 3px solid #000; /*下線の幅、線種、色。上のブロックの「padding-top」と、下の行の「bottom」の数字と合わせる。*/ + position: relative;left: 0px;bottom: -3px; /*bottomの数字は上のブロックの「padding-top」と、上の行の「border-bottom」の数字と合わせる。※マイナス記号は残したまま。*/ +} +/*マウスオン時、現在表示中(current)、共通設定*/ +#menubar li:hover::after,#menubar li.current::after { + bottom: 0px; +} +/*スマホ用メニューを表示させない*/ +#menubar-s {display: none;} +/*３本バーアイコンを表示させない*/ +#menubar_hdr {display: none;} + +/*contentsブロック。mainとsubを囲むブロック。 +---------------------------------------------------------------------------*/ +#contents { + padding: 150px 3% 0; /*上、左右、下へのコンテンツ内の余白*/ +} +/*トップページのcontentsへの追加指定。余白をリセット。*/ +.home #contents { + padding: 0; +} + +/*mainブロック +---------------------------------------------------------------------------*/ +/*mainブロック*/ +#main { + overflow: hidden; + width: 75%; /*幅*/ + float: right; /*右に回り込み*/ +} +/*トップページのmainブロックの指定*/ +.home #main { + width: 100%; + float: none; +} +/*１カラム時のmainブロックの指定*/ +.c1 #main { + width: 100%; + float: none; +} +/*h2タグ*/ +#main h2 { + clear: both; + margin-bottom: 30px; + font-size: 48px; /*文字サイズ*/ + border-bottom: 1px solid #000; /*下線の幅、線種、色*/ + padding: 0 20px 10px; /*上、左右、下へのタグ内の余白*/ + line-height: 1.2; /*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/ +} +/*h2タグ内のspanタグ（小文字）*/ +#main h2 span { + display: block; + font-size: 10px; /*文字サイズ*/ + letter-spacing: 0.2em; /*文字間隔を少し広くとる指定*/ + padding-left: 3px; /*左に空ける余白*/ + padding-bottom: 10px; /*下に空ける余白*/ +} +/*h3タグ*/ +#main h3 { + clear: both; + margin-bottom: 15px; + padding-left: 7px; /*左に空ける余白*/ + font-size: 16px; /*文字サイズ*/ +} +/*h3タグの左のアクセントライン*/ +#main h3::first-letter { + border-left: 3px solid #000; /*左側の線の幅、線種、色*/ + padding-left: 10px; /*ラインと文字との間の余白*/ +} +/*段落(p)タグ*/ +#main p { + padding: 0 20px 20px; /*上、左右、下への余白*/ +} +/*他。微調整。*/ +#main p + p { + margin-top: -5px; +} +#main h2 + p, +#main h3 + p { + margin-top: -10px; +} +#main section + section { + clear: both; + padding-top: 40px; +} +.fl + .fr { + clear: none !important; + padding-top: 0 !important; +} + +/*subブロック +---------------------------------------------------------------------------*/ +/*subブロック*/ +#sub { + width: 20%; /*幅*/ + float: left; /*左に回り込み*/ +} +/*１カラム時のsubブロック。非表示にする指定。*/ +.c1 #sub { + display: none; +} +/*h2タグ*/ +#sub h2 { + border: 1px solid #000; /*枠線の幅、線種、色*/ + text-align: center; /*文字をセンタリング*/ +} + +/*サブメニュー +---------------------------------------------------------------------------*/ +/*メニュー全体のブロック*/ +.submenu { + margin-bottom: 20px; /*下に空けるスペース*/ +} +/*メニュー１個あたりの指定*/ +.submenu a { + display: block;text-decoration: none; + text-align: center; /*文字をセンタリング*/ + padding: 5px; /*メニュー内の余白*/ + border-bottom: 1px solid #000; /*下線の幅、線種、色*/ +} + +/*footerブロック +---------------------------------------------------------------------------*/ +/*footerブロック*/ +footer { + clear: both; + text-align: center; + padding-top: 40px; +} +footer a {text-decoration: none;} +footer .pr {display: block;} +/*トップページのfooterブロック*/ +.home footer { + position: absolute; + bottom: 0px; + width: 100%; +} + +/*listブロック（index2.htmlで使用） +---------------------------------------------------------------------------*/ +/*listブロック*/ +.list { + overflow: hidden; + padding: 10px 20px; /*上下、左右へのブロック内の余白*/ + border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/ +} +/*画像*/ +.list figure img { + float: left; /*左に回り込み*/ + width: 15%; /*画像の幅*/ + border-radius: 50%; /*丸くする指定。10pxなどにすると角が丸い四角形になります。完全な四角形がいいならこの１行削除。*/ +} +/*画像にtextブロックが続いた場合*/ +figure + .text { + float: right; /*textブロックを右に回り込み*/ + width: 83%; /*ブロック幅*/ +} +/*h4見出し*/ +.list h4 { + font-size: 16px; /*文字サイズを少し大きく*/ +} +/*段落(p)タグ*/ +.list p { + padding: 0 !important; + line-height: 1.5; /*行間を少し狭く*/ +} + +/*NEWSブロック +---------------------------------------------------------------------------*/ +/*日付設定*/ +.news dt { + clear: both; + letter-spacing: 0.1em; /*文字間隔を少し広くとる指定*/ + font-weight: bold; /*太字にする*/ + padding: 10px 20px 0px; /*上、左右、下への余白*/ +} +/*記事設定*/ +.news dd { + overflow: hidden; + border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/ + padding: 0px 20px 10px; /*上、左右、下への余白*/ +} +/*右に回り込みの小さな画像*/ +.news dd .img { + width: 100px; /*画像の幅*/ + float: right; /*右に回り込み*/ +} + +/*NEWSブロック内のアイコン（INFORMATION,EVENT,MEDIAなどのアイコン） +---------------------------------------------------------------------------*/ +/*アイコン共通*/ +.news .icon { + display: inline-block; + background: #eee; /*背景色*/ + border: 1px solid #ccc; /*枠線の幅、線種、色*/ + font-size: 10px; /*文字サイズ*/ + padding: 0px 10px; /*上下、左右へのアイコン内の余白*/ + margin-left: 10px; /*左に空けるスペース。日付との間の余白です。*/ +} +/*リンク設定した場合*/ +.news .icon a { + text-decoration: none;display: block; + color: #000; /*文字色*/ +} +/*EVENT*/ +.news .icon.event { + border: none; /*枠線を消す設定*/ + background: #ff0000; /*背景色*/ + color: #fff; /*文字色*/ +} +/*MEDIA*/ +.news .icon.media { + border: none; /*枠線を消す設定*/ + background: #1908ff; /*背景色*/ + color: #fff; /*文字色*/ +} +/*EVENT、NEWSをリンク設定した場合*/ +.news .icon.event a, .news .icon.media a { + color: #fff; /*文字色*/ +} + +/*テーブル +---------------------------------------------------------------------------*/ +/*テーブル１行目に入った見出し部分（※caption）*/ +.ta1 caption { + border: 1px solid #000; /*テーブルの枠線の幅、線種、色*/ + border-bottom: none; /*下線だけ消す*/ + text-align: left; /*文字を左寄せ*/ + font-weight: bold; /*太字に*/ + padding: 10px; /*ボックス内の余白*/ + background: #eee; /*背景色*/ +} +/*テーブルの見出し（※tamidashi）*/ +.ta1 th.tamidashi { + width: auto; + text-align: left; /*左よせ*/ + background: #eee; /*背景色*/ +} +/*ta1設定*/ +.ta1 { + table-layout: fixed; + width: 100%; + margin: 0 auto 30px; +} +.ta1, .ta1 td, .ta1 th { + word-break: break-all; + border: 1px solid #000; /*テーブルの枠線の幅、線種、色*/ + padding: 10px; /*ボックス内の余白*/ +} +/*ta1の左側ボックス*/ +.ta1 th { + width: 140px; /*幅*/ + text-align: center; /*センタリング*/ +} + +/*フォーム関連 +---------------------------------------------------------------------------*/ +/*ボタン（btn）*/ +input[type="submit"].btn, +input[type="button"].btn, +input[type="reset"].btn { + padding: 5px 20px; /*上下、左右へのボックス内の余白*/ + border-radius: 3px; /*角丸のサイズ*/ + background: #eee; /*背景色（古いブラウザ用）*/ + background: linear-gradient(#fff, #eee);/*背景グラデーション*/ +} +/*マウスオン時のボタン（btn）設定*/ +input[type="submit"].btn:hover, +input[type="button"].btn:hover, +input[type="reset"].btn:hover { + background: #fff; /*背景色*/ +} +/*input,textarea共通*/ +input,textarea { + outline: none;background: transparent; + border: 1px solid #999; /*枠線の幅、線種、色*/ +} +/*input,textareaのフォーカス時*/ +input:focus,textarea:focus { + border: 1px solid #000; /*枠線の幅、線種、色*/ +} + +/*checkブロック。赤い注意書きブロックです。 +---------------------------------------------------------------------------*/ +p.check { + background: #ff0000; + color:#fff; + padding: 10px 25px !important; + margin-bottom: 20px; +} +p.check a {color: #fff;} + +/*PAGE TOP（↑）設定 +---------------------------------------------------------------------------*/ +@keyframes scroll { +0% {opacity: 0;} +100% {opacity: 1;} +} +/*通常時のボタンは非表示*/ +body .nav-fix-pos-pagetop a { + display: none; +} +/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/ +body.is-fixed-pagetop .nav-fix-pos-pagetop a { + display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;animation-name: scroll;animation-duration: 1s;animation-fill-mode: forwards; + width: 40px; /*ボタンの幅*/ + line-height: 40px; /*ボタンの高さ*/ + bottom: 20px; /*ウィンドウの下から20pxの場所に配置*/ + right: 3%; /*ウィンドウの右から3%の場所に配置*/ + background: #555; /*背景色*/ + color: #fff; /*文字色*/ + border-radius: 50%; /*円形にする指定*/ +} +/*マウスオン時の背景色*/ +body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover { + background: #999; +} + +/*トップページのNEWアイコン +---------------------------------------------------------------------------*/ +.newicon { + background: #F00; /*背景色*/ + color: #FFF; /*文字色*/ + font-size: 70%; /*文字サイズ*/ + line-height: 1.5; + padding: 2px 5px; + border-radius: 2px; + margin: 0px 5px; + vertical-align: text-top; +} + +/*ul.disc,olタグ +---------------------------------------------------------------------------*/ +ul.disc { + list-style: disc; + padding: 0 20px 20px 45px; +} +ol { + padding: 0 20px 20px 45px; +} + +/*その他 +---------------------------------------------------------------------------*/ +.look {background: #222;padding: 5px 10px;border-radius: 4px;border: 1px solid #333;color: #fff;} +.mb15,.mb1em {margin-bottom: 15px !important;} +.mb30 {margin-bottom: 30px !important;} +.mb50 {margin-bottom: 50px !important;} +.p0 {padding:0 !important;} +.clear {clear: both;} +.color1, .color1 a {color: #29acef !important;} +.pr {font-size: 10px;} +.wl {width: 96%;} +.ws {width: 50%;} +.c {text-align: center;} +.r {text-align: right;} +.l {text-align: left;} +.fl {float: left;} +.fr {float: right;} +.w25 {width: 25%;} +.w70 {width: 70%;} +.w48 {width: 48%;} +.big1 {font-size: 50px;} +.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;} +.dn {display: none;} +.sh {display: none;} +.border1 {border: 1px solid #000;} +#sh-sub {display: none;} + + + +/*画面を横向きにした場合の高さが500px以下の場合の設定。 +※小さな端末用メニューを２列にします。 +------------------------------------------------------------------------------------------------------------------------------------------------------*/ +@media screen and (orientation: landscape) and (max-height:500px){ + +/*メインメニュー +---------------------------------------------------------------------------*/ +/*メニュー１個あたりの設定*/ +#menubar-s li a { + float: left; /*左に回り込み*/ + width: 44%; /*幅*/ + line-height: 1.2; /*行間*/ +} + +} + + + +/*画面幅900px以下の設定 +------------------------------------------------------------------------------------------------------------------------------------------------------*/ +@media screen and (max-width:900px){ + +/*header +---------------------------------------------------------------------------*/ +header { + border-bottom: 1px solid #000; /*下線の幅、線種、色*/ + box-shadow: none; +} +/*ロゴ画像*/ +header #logo img { + top: 10px; /*ヘッダーブロックに対して上から10pxの場所に配置*/ + left: 10px; /*ヘッダーブロックに対して左から10pxの場所に配置*/ +} + +/*headerアイコン（facebookやtwitterなどのアイコンブロック） +---------------------------------------------------------------------------*/ +/*アイコンを囲むブロック全体の設定*/ +header .icon { + right: auto; + left: 0px; /*ヘッダーブロックに対して左から0pxの場所に配置*/ + bottom: 0px; /*ヘッダーブロックに対して下から0pxの場所に配置*/ +} + +/*メインメニュー +---------------------------------------------------------------------------*/ +/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。 +透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/ +@keyframes menubar { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +/*スマホ用メニューブロック*/ +#menubar-s { + display: block;overflow: hidden; + position: fixed; + z-index: 3; + top: 81px; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.8); /*背景色*/ + animation-name: menubar; /*上のkeyframesの名前*/ + animation-duration: 0.5s; /*アニメーションの実行時間。0.5秒。*/ + animation-fill-mode: both; /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/ +} +/*メニュー１個あたりの設定*/ +#menubar-s li a { + display: block;text-decoration: none; + padding: 10px 3%; /*メニュー内の余白。上下、左右。*/ + border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/ + color: #fff; /*文字色*/ + font-size: 16px; /*文字サイズ*/ +} +/*説明表記（飾り文字）*/ +#menubar-s li a span { + display: block; + font-size: 10px;/*文字サイズ*/ +} +/*PC用メニューを非表示にする*/ +#menubar {display: none;} + +/*３本バーアイコン設定 +---------------------------------------------------------------------------*/ +/*３本バーブロック*/ +#menubar_hdr { + display: block; + position: fixed;z-index: 50; + top: 13px; /*上から10pxの場所に配置*/ + right: 10px; /*右から10pxの場所に配置*/ +} +/*アイコン共通設定*/ +#menubar_hdr.close, +#menubar_hdr.open { + width: 50px; /*幅*/ + height: 50px; /*高さ*/ +} +/*三本バーアイコン*/ +#menubar_hdr.close { + background: url(../images/icon_menu.png) no-repeat center top/50px; /*背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/ +} +/*閉じるアイコン*/ +#menubar_hdr.open { + background: url(../images/icon_menu.png) no-repeat center bottom/50px; /*背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/ +} + +/*contentsブロック。mainとsubを囲むブロック。 +---------------------------------------------------------------------------*/ +#contents { + padding: 100px 3% 0; /*上、左右、下へのコンテンツ内の余白*/ +} + +/*main,subコンテンツ +---------------------------------------------------------------------------*/ +#main, #sub { + float: none; + width: auto; + clear: both; +} +#main { + padding-bottom: 20px; +} + +/*listブロック（index2.htmlで使用） +---------------------------------------------------------------------------*/ +.fl.w48, .fr.w48 { + float: none; + width: auto; +} +.fl + .fr { + padding-top: 30px !important; +} + +/*その他 +---------------------------------------------------------------------------*/ +body.s-n #sub,body.s-n #footermenu,.m-n {display: none;} +.big1 {font-size: 24px;} +.sh {display:block;} +.pc {display:none;} + +} + + + +/*画面幅480px以下の設定 +------------------------------------------------------------------------------------------------------------------------------------------------------*/ +@media screen and (max-width:480px){ + +/*全体の設定 +---------------------------------------------------------------------------*/ +body { + font-size: 11px; /*文字サイズ*/ + line-height: 1.5; /*行間*/ +} + +/*トップページのSVGロゴアニメーション設定 +---------------------------------------------------------------------------*/ +#svg-logo { + width: 80%; /*画像の幅*/ + left: 10%; /*左から10%の場所に配置*/ +} + +/*mainブロック +---------------------------------------------------------------------------*/ +/*h2タグ*/ +#main h2 { + font-size: 24px; + margin-bottom: 20px; + padding: 0 10px 5px; +} +/*h3タグ*/ +#main h3 { + font-size: 14px; +} +/*段落(p)タグ*/ +#main p { + padding: 0 10px 20px; /*上、左右、下への余白*/ +} +/*他。微調整。*/ +#main section + section { + padding-top: 20px; +} + +/*NEWSブロック +---------------------------------------------------------------------------*/ +/*右に回り込みの小さな画像*/ +.news dd .img { + width: 50px; /*画像の幅*/ +} + +/*listブロック（index2.htmlで使用） +---------------------------------------------------------------------------*/ +/*listブロック*/ +.list { + padding: 10px; /*ブロック内の余白*/ +} + +/*テーブル（ta1） +---------------------------------------------------------------------------*/ +/*テーブル１行目に入った見出し部分（※caption）*/ +.ta1 caption { + padding: 5px; /*ボックス内の余白*/ +} +/*ta1設定*/ +.ta1, .ta1 td, .ta1 th { + padding: 5px; /*ボックス内の余白*/ +} +/*ta1の左側ボックス*/ +.ta1 th { + width: 100px; +} + +/*ul.disc,olタグ +---------------------------------------------------------------------------*/ +ul.disc { + list-style: disc; + padding: 0 10px 20px 30px; +} +ol { + padding: 0 10px 20px 30px; +} + +/*その他 +---------------------------------------------------------------------------*/ +.ws,.wl {width: 94%;} +.big1 {font-size: 16px;} + +} \ No newline at end of file diff --git a/jpf/images/1.jpg b/jpf/images/1.jpg new file mode 100644 index 0000000000..5db9bbe2b5 Binary files /dev/null and b/jpf/images/1.jpg differ diff --git a/jpf/images/1_index2.jpg b/jpf/images/1_index2.jpg new file mode 100644 index 0000000000..3b9eafb00f Binary files /dev/null and b/jpf/images/1_index2.jpg differ diff --git a/jpf/images/2.jpg b/jpf/images/2.jpg new file mode 100644 index 0000000000..7fd9a211d8 Binary files /dev/null and b/jpf/images/2.jpg differ diff --git a/jpf/images/3.jpg b/jpf/images/3.jpg new file mode 100644 index 0000000000..afcffe7439 Binary files /dev/null and b/jpf/images/3.jpg differ diff --git a/jpf/images/icon_menu.png b/jpf/images/icon_menu.png new file mode 100644 index 0000000000..30ae315324 Binary files /dev/null and b/jpf/images/icon_menu.png differ diff --git a/jpf/images/icon_youtube.png b/jpf/images/icon_youtube.png new file mode 100644 index 0000000000..3931d8c971 Binary files /dev/null and b/jpf/images/icon_youtube.png differ diff --git a/jpf/images/index2.jpg b/jpf/images/index2.jpg new file mode 100644 index 0000000000..d02715e898 Binary files /dev/null and b/jpf/images/index2.jpg differ diff --git a/jpf/images/logo.png b/jpf/images/logo.png new file mode 100644 index 0000000000..a690093123 Binary files /dev/null and b/jpf/images/logo.png differ diff --git a/jpf/images/photo1.jpg b/jpf/images/photo1.jpg new file mode 100644 index 0000000000..ad7b6114d9 Binary files /dev/null and b/jpf/images/photo1.jpg differ diff --git a/jpf/images/sample1_mini.jpg b/jpf/images/sample1_mini.jpg new file mode 100644 index 0000000000..cd8c92a718 Binary files /dev/null and b/jpf/images/sample1_mini.jpg differ diff --git a/jpf/index.html b/jpf/index.html new file mode 100644 index 0000000000..10b4cf7f72 --- /dev/null +++ b/jpf/index.html @@ -0,0 +1,136 @@ + + + + + +JPF - jazz + + + + + + + + + + + + + +
+ + + +
+

JPF

+ + + +
+ +
+ +
+ +
+ +

お知らせ

+ +

20xx/xx/xx…NEW

 +

20xx/xx/xx…

 +

 + +
+ +
+ + +
+ + + + +
+ + + + + + +

↑

+ + + + + + + + + + + + + diff --git a/jpf/js/fixmenu_pagetop.js b/jpf/js/fixmenu_pagetop.js new file mode 100644 index 0000000000..75fcd2ac46 --- /dev/null +++ b/jpf/js/fixmenu_pagetop.js @@ -0,0 +1,42 @@ +/* + fix menu + 2017/01/26 crytus corporation. +*/ +function fm_hasClass(e, c) +{ + var classes = e.className; + if (!classes) return false; + if (classes === c) return true; + return classes.search("\\b" + c + "\\b") != -1; +} +function fm_addClass(e, c) +{ + if (fm_hasClass(e, c)) return; + var classes = e.className; + if (classes && classes[classes.length-1] != " ") + c = " " + c; + e.className += c; +} +function fm_removeClass(e, c) +{ + var pattern = new RegExp("\\b" + c + "\\b\\s*", "g"); + e.className = e.className.replace(pattern, ""); +} +function fm_addEvent(elm,listener,fn){ + try{ + elm.addEventListener(listener,fn,false); + }catch(e){ + elm.attachEvent("on"+listener,fn); + } +} +fm_addEvent(window, 'load', function() { + var offsettop; + offsettop = 350; + fm_addEvent(window, 'scroll', function() { + if (offsettop < Math.max(document.body.scrollTop,document.documentElement.scrollTop)) { + fm_addClass(document.body, 'is-fixed-pagetop'); + } if ((offsettop - 50) > Math.max(document.body.scrollTop,document.documentElement.scrollTop)) { + fm_removeClass(document.body, 'is-fixed-pagetop'); + } + }); +}); \ No newline at end of file diff --git a/jpf/js/jquery.inview_set.js b/jpf/js/jquery.inview_set.js new file mode 100644 index 0000000000..a3d27574d7 --- /dev/null +++ b/jpf/js/jquery.inview_set.js @@ -0,0 +1,24 @@ +//upスタイルが画面内にきたら、スタイルupstyleを適用する +$('.up').on('inview', function() { + $(this).addClass('upstyle'); +}); + +//leftスタイルが画面内にきたら、スタイルleftstyleを適用する +$('.left').on('inview', function() { + $(this).addClass('leftstyle'); +}); + +//rightスタイルが画面内にきたら、スタイルrightstyleを適用する +$('.right').on('inview', function() { + $(this).addClass('rightstyle'); +}); + +//transform1スタイルが画面内にきたら、スタイルtransform1styleを適用する +$('.transform1').on('inview', function() { + $(this).addClass('transform1style'); +}); + +//transform2スタイルが画面内にきたら、スタイルtransform2styleを適用する +$('.transform2').on('inview', function() { + $(this).addClass('transform2style'); +}); diff --git a/jpf/js/openclose.js b/jpf/js/openclose.js new file mode 100644 index 0000000000..1c64cd7272 --- /dev/null +++ b/jpf/js/openclose.js @@ -0,0 +1,127 @@ +/* + * ubNJ + * 2015/12/21 {^摜̔\sȂ + */ +/* + * Return the classList property of e, if it has one. + * Otherwise, return an object that simulates the DOMTokenList API for e. + * The returned object has contains(), add(), remove(), toggle() and toString() + * methods for testing and altering the set of classes of the element e. + * If the classList property is natively supported, the returned object is + * array-like and has length and array index properties. The simulated + * DOMTokenList is not array-like, but has a toArray() method that returns + * a true-array snapshot of the element's class names. + */ + +function classList(e) { + if (e.classList) return e.classList; // Return e.classList if it exists + else return new CSSClassList(e); // Otherwise try to fake it +} + +// CSSClassList is a JavaScript class that simulates DOMTokenList +function CSSClassList(e) { this.e = e; } + +// Return true if e.className contains the class c, false otherwise +CSSClassList.prototype.contains = function(c) { + // Check that c is a valid class name + if (c.length === 0 || c.indexOf(" ") != -1) + throw new Error("Invalid class name: '" + c + "'"); + // Check common cases first + var classes = this.e.className; + if (!classes) return false; // e has no classes at all + if (classes === c) return true; // e has one class that matches exactly + + // Otherwise, use a RegExp to search for c as a word by itself + // \b in a regular expression requires a match at a word boundary. + return classes.search("\\b" + c + "\\b") != -1; +}; + +// Add c to the e.className if it is not already present +CSSClassList.prototype.add = function(c) { + if (this.contains(c)) return; // Do nothing if already present + var classes = this.e.className; + if (classes && classes[classes.length-1] != " ") + c = " " + c; // Add a space if we need one + this.e.className += c; // Add c to the className +}; + +// Remove all occurrences of c from e.className +CSSClassList.prototype.remove = function(c) { + // Make sure c is a valid class name + if (c.length === 0 || c.indexOf(" ") != -1) + throw new Error("Invalid class name: '" + c + "'"); + // Remove all occurances of c as a word, plus any trailing space + var pattern = new RegExp("\\b" + c + "\\b\\s*", "g"); + this.e.className = this.e.className.replace(pattern, ""); +}; + +// Add c to e.className if it is not already present and return true. +// Otherwise, remove all occurrences of c from e.className and return false. +CSSClassList.prototype.toggle = function(c) { + if (this.contains(c)) { // If e.className contains c + this.remove(c); // then remove it. + return false; + } + else { // Otherwise: + this.add(c); // add it. + return true; + } +}; + +// Return e.className itself +CSSClassList.prototype.toString = function() { return this.e.className; }; + +// Return of the names in e.className +CSSClassList.prototype.toArray = function() { + return this.e.className.match(/\b\w+\b/g) || []; +}; +function do_onoff(hdr, item) +{ + var e = document.getElementById(hdr); + var e2 = document.getElementById(item); + if (e2.style.display == 'none') { + e2.style.display = ''; + classList(e).remove('close'); + classList(e).add('open'); + } else { + e2.style.display = 'none'; + classList(e).remove('open'); + classList(e).add('close'); + } +} +function open_close(hdr, item) +{ + var e = document.getElementById(hdr); + var e2 = document.getElementById(item); + e.addEventListener("click", function() { do_onoff(hdr, item); }, false); + + classList(e).remove('open'); + classList(e).add('close'); + if (classList(e).contains('open')) { +// e.style.display = ''; + e2.style.display = ''; + } + if (classList(e).contains('close')) { +// e.style.display = ''; + e2.style.display = 'none'; + } + +} +function OCisSmartPhone() +{ + return ( + (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || + navigator.userAgent.indexOf('iPod') > 0 || + navigator.userAgent.indexOf('Android') > 0); +} +function OCdisplayWidth() +{ + return window.parent.screen.width; +} +function OCwindowWidth() +{ + if (window.screen.width < window.innerWidth) { + return window.screen.width; + } + return window.innerWidth; +} diff --git a/jpf/news.html b/jpf/news.html new file mode 100644 index 0000000000..c7f8e93b63 --- /dev/null +++ b/jpf/news.html @@ -0,0 +1,133 @@ + + + + + +NEWS - JPF + + + + + + + + + + + +
+ +
+

INDIES BAND

+ + + +
+ +
+ +
+ +
+ +

NEWS最新情報のご案内

+ +
+ +
20xx/xx/xx
+
sampleNEW
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
20XX/00/00
+
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
+ +
+ +
+ +
+ + +
+ +

ARCHIVE

+ + +
+ + +
+ + + + +
+ + + + + + +

↑

+ + + + + + + + + diff --git a/jpf/profile.html b/jpf/profile.html new file mode 100644 index 0000000000..4a02cf2fe5 --- /dev/null +++ b/jpf/profile.html @@ -0,0 +1,98 @@ + + + + + +PROFILE - JPF + + + + + + + + + + + +
+ +
+

INDIES BAND

+ + + +
+ +
+ +
+ +
+ + + +
+

PROFILE

+ + +
+

只今準備中です

+ + +
+ +
+ + +
+ + + + +
+ + + + + + +

↑

+ + + + + + + + + + + + + + diff --git a/jpf/readme.html b/jpf/readme.html new file mode 100644 index 0000000000..9cddb1128f --- /dev/null +++ b/jpf/readme.html @@ -0,0 +1,108 @@ + + + + + +INTRODUCTION - JPF + + + + + + + + + + + +
+ +
+

INDIES BAND

+ + +
    +
  • YouTube
    • +
+
+ +
+ +
+ +
+ +

INTRODUCTIONJPFのご紹介

+ +

１９８７年、若い頃に名古屋でJazzピアニストとしていていた時の感動を忘れられず、 + + 愛知県の障がい児教育の音楽教諭に従事しながら、37歳の時に音楽バンドを起ちあげる。バンド名も「JFバンド（ジャズ・フォーク）」としてスタート。 + + 演奏メンバーは、教職に従事する教員やプロのJazzミュージシャンで構成。 + + 主に「障がい児施設」「ライブハウス」などで演奏するのが主流であったが、 + + やがて「大きな会場でのコンサート」までに発展。 + + 歴史とともに、バンド名も「JFバンド（ジャズ・フォーク）から、J＆PF（ジャズ + + ＆ポピュラー・フォーク）→JPF（ジャズ・ポップス・フォーク・フュージョン）と + + 改名。 + + 2023年、JPFライブ35周年に至る。

+ +
+ +
+ + +
+ +
+ + +
+ + + + +
+ + + + + + +

↑

+ + + + + + + + +