/* 740 1000 */
html, body
{
height: 100%; margin: 0;
color: #333333;
}
/* タブレット（横長）に適用するCSS */
@media only screen and ( min-width:740px )
{
html, body
{
}
}
/* タブレット（縦長）に適用するCSS */
@media screen and ( min-width:740px ) and (orientation:portrait)
{
body
{
}
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
body
{
}
}
/* ■ wrapper */
.wrapper
{
}
/* タブレット（横長）に適用するCSS */
@media only screen and ( min-width:740px )
{
.wrapper
{
}
}
/* タブレット（縦長）に適用するCSS */
@media screen and ( min-width:740px ) and (orientation:portrait)
{
.wrapper
{
}
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.wrapper
{
}
}
/* ■ サイトタイトル */
.site-title
{
}
/* ■上部メニュー */
ul.pc-navi
{
border-top: 5px solid #888888; /* 枠線 上 */
margin: 10px 0px 10px 0px; /* マージン（上、右、下、左） */
padding: 7px 5px; /* パディング（上下、左右） */
background-color: #F9F9F9; /* 背景色 */
list-style-type: none; /* リストマーク非表示 */
font-size: 1.25em; /* 文字サイズ */
text-align: center; /* 中央寄せ */
}
/* リスト項目 */
ul.pc-navi li
{
padding-left: 5px; /* 左パディング */
display: inline-block; /* 項目を横並び */
text-align: center; /* 中央寄せ */
display: inline-block; /* 横並びに */
}
/* リスト項目（最初の項目） */
ul.pc-navi li.first
{
padding-left: 25px; /* 左パディング */
display: inline-block; /* 横並びに */
}
/* リンクエリア */
ul.pc-navi li a
{
color: #000000;
display: inline-block;
text-decoration: none; /* リンク中の下線削除 */
padding-top: 5px; /* 上パディング */
padding-bottom: 5px; /* 下パディング */
padding-left: 20px; /* 左パディング */
padding-right: 20px; /* 右パディング */
}
ul.pc-navi a:hover
{
color: #000000;
background-color: #73CE91;
transition: color 0.5s; /* リンク色（マウスオーバー時）が変わる速さ */
transition: background-color 3.0s; /* リンク背景色（オウスオーバー時）が変わる速さ */
}
.main-navi
{
margin: 0 auto;
}
/* ■ 各種見出し */
h1,h2,h3,h4,h5,h6
{
font-size: 1.25em;
overflow: hidden;
font-weight: normal;
margin: 0 auto;
padding: 15px 20px; /* パディング（上下、左右） */
text-align: center /* テキスト中央寄せ */
}
/* ■ コンテンツ各ブロック */
.topimg
{
min-height: 500px; /* 最小の高さ */
width: auto; /* 横幅 */
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.topimg
{
min-height: 500px; /* 最小の高さ */
margin: 0 auto;
padding: 30px 30%; /* パディング（上下、左右） */
}
}
.info
{
min-height: 500px; /* 最小の高さ */
width: auto; /* 横幅 */
padding: 10px 50px; /* パディング（上下、左右） */
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.info
{
min-height: 500px; /* 最小の高さ */
margin: 0 auto;
padding: 30px 30%; /* パディング（上下、左右） */
}
}
.sample
{
min-height: 500px; /* 最小の高さ */
width: auto; /* 横幅 */
padding: 10px 50px; /* パディング（上下、左右） */
background-color: #FCEABB; /* 背景色 */
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.sample
{
min-height: 500px; /* 最小の高さ */
margin: 0 auto;
padding: 30px 30%; /* パディング（上下、左右） */
}
}
.profile
{
min-height: 500px; /* 最小の高さ */
width: auto; /* 横幅 */
padding: 10px 50px; /* パディング（上下、左右） */
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.profile
{
min-height: 500px; /* 最小の高さ */
margin: 0 auto;
padding: 30px 30%; /* パディング（上下、左右） */
}
}
.works
{
min-height: 500px; /* 最小の高さ */
width: auto; /* 横幅 */
padding: 10px 50px; /* パディング（上下、左右） */
background-color: #FCEABB; /* 背景色 */
}
/* PCに適用するCSS */
@media screen and ( min-width:1000px )
{
.works
{
min-height: 500px; /* 最小の高さ */
margin: 0 auto;
padding: 30px 30%; /* パディング（上下左右） */
}
}
/* ■ */
audio
{
width: 100%; /* 横幅 */
}
/* ■上へ戻る矢印 */
.up-arrow
{
font-size: 3.5em;
position: fixed;
display: inline-block;
bottom: 25px;
right: 25px;
}
.up-arrow a:hover
{
color: #73ce91;
}
/* ■▼ タイトル画像にテキストを重ねる https://saruwakakun.com/html-css/reference/image-text */
.example
{
position: relative;
}
.example p
{
position: absolute;
top: 0; /* 画像の左上に配置 */
left: 0;
margin: 0; /* 余計な隙間を除く */
color: #FFFFFF; /* 文字を白に */
background: #A0D8EF; /* 背景色 */
font-weight: bold; /* 太字に */
font-size: 2em; /* サイズ2倍 */
padding: 5px 10px; /* 文字周りの余白 */
}
.example img
{
width: 100%;
}
/* ■▼ ハンバーガーメニュー https://rui-log.com/css-hamburger-menu/ */
.header
{
padding:10px;
background: rgba(0,0,0,.0);
position: fixed;
z-index: 9999;
}
.nav-drawer
{
position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown
{
display: none;
}
/*アイコンのスペース*/
#nav-open
{
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after
{
position: absolute;
height: 3px; /* 線の太さ */
width: 25px; /* 長さ */
border-radius: 3px;
background: #555555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before
{
bottom: -8px;
}
#nav-open span:after
{
bottom: -16px;
}
/*閉じる用の薄黒箇所*/
#nav-close
{
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.999); /* 背景色調整予定black */
opacity: 0;
transition: .3s ease-in-out;
}
/*メニューの中身*/
#nav-content
{
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px; /* 最大幅 */
height: 100%;
background: #FFFFFF;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close
{
display: block;
opacity: .5;
}
#nav-input:checked ~ #nav-content
{
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,1);
}
.header-logo-menu
{
display: flex;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-moz-flex-direction: row;
-o-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
}
/* ハンバーガー中身 */
ul.sp-navi
{
z-index: 9999;
list-style: none;
margin: 0px;
padding: 0px;
}
li.sp-navi
{
z-index: 9999;
background-color: #99CCFF;
border-bottom: solid 1px #59ACFF;
height: 44px;
line-height: 44px;
margin-bottom: 1px;
position: relative;
}
li:first-child
{
border-top: 0px;
}
li:last-child
{
border-bottom: 0px;
}
li.sp-navi a
{
color: #FFFFFF;
display: block;
padding: 0 0 0 16px;
}
.arrow
{
background-image: url("arrow-r.png");
background-size: 17px 26px;
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
width: 17px;
height: 26px;
top: 8px;
right: 16px;
}