a{
border-bottom:0;
margin:0
}
/* ===================================
基本
=================================== */
#wrapper{
padding-bottom:50px;
position:relative;
text-align:left
}
#header-inner{
padding:0 0 20px 0
}
#rightcolumn-wrap{
float:right;
margin-left:-280px; /* (※1)ã¨åŒã˜ã ã‘マイナス */
width:100%
}
#rightcolumn{
margin-left:280px; /* (※1)ã¨åŒã˜ */
padding:20px 20px 20px 35px;
position:relative;
text-shadow:none
}
#leftcolumn-wrap{
float:left;
width:280px; /* å·¦å´ã®å¹…(※1) */
}
#leftcolumn{
padding:20px 0
}
.block{
border:1px solid #fff;
margin:1em 0;
padding:5px
}
/* ===================================
メニュー
=================================== */
#menu{
background:#000 url(image/back01.gif) repeat-y top right;
border:1px solid #fff;
display:block;
padding:5px;
min-height:280px
}
nav li a,nav li span{
display:block;
line-height:2;
padding:5px;
position:relative
}
nav li + li{
border-top:1px dotted #fff
}
.sub-menu{
border-top:1px dotted #fff;
display:none;
margin:0;
overflow:hidden
}
.sub-menu li{
text-indent:1em
}
/* メニューã®ã€Œ>ã€
------------------------------ */
nav li span:after{
border-top:3px solid #fff; /* 色 */
border-right:3px solid #fff; /* 色 */
content:"";
display:block;
margin-top:-5px;
position:absolute;
height:5px;width:5px;
top:50%;right:10px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transition:.5s
}
nav li span.open:after{
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg)
}
/* メニューを開ãボタンéžè¡¨ç¤º
------------------------------ */
#open{display:none}
/* ===================================
ページ上部ã¸ã®ãƒªãƒ³ã‚¯ã€è‘—作権表示
=================================== */
#pagetop{
background:rgba(228,48,132,.8);
border-radius:30px;
box-sizing:border-box;
color:#fff;/* 色 */
display:block;
font-size:13px;
letter-spacing:normal;
line-height:20px;
padding-top:12px;
position:fixed;
text-align:center;
height:40px;width:40px; /* 大ãã• */
bottom:-80px;
z-index:10
}
#pagetop:before{
content:"";
display:block;
border-left:2px solid #fff;
border-top:2px solid #fff;
position:absolute;
top:10px;left:16px;
height:6px;width:6px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
#pagetop:hover{
background:rgba(228,48,132,.5);
}
#fl{
margin-top:40px;
text-align:center
}
/* ===================================
index
=================================== */
#index{
background:#000 url(image/back01.gif) repeat-y 100% 0;
color:#fff;
margin:20px auto;
padding:0 20px;
text-align:center
}
/* ===================================
見出ã—ã€æž ã€ç·š
=================================== */
h1{
font-size:1.3em;
margin:0 0 10px;
text-shadow:5px 5px 1px #666
}
h2{
background:#e13b8b;
color:#000;
margin:20px 0 20px -10px;
padding:0 1em;
position:relative;
text-align:left
}
h2::after{
border-width:0 10px 10px 0;
border-style:solid;
border-color:#000 #000 #fff #fff;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
top:0;right:0;
width:0
}
#rightcolumn h2:first-child{
margin-top:0
}
#leftcolumn h2{
margin:10px 0
}
h3{
font-size:1em;
margin:20px 0
}
h3 span{
background:#f0f0f0;
border-radius:6px;
color:#000;
display:inline-block;
padding:0 1em;
position:relative
}
h3 span::after{
border:8px solid transparent;
border-top:8px solid #f0f0f0;
content:'';
position:absolute;
left:10px;top:100%;
height:0;width:0
}
h2 + h3{
margin-top:0
}
dt{
color:#e1b23b;
clear:both;
font-weight:700;
float:left;
margin:0 0 5px;
width:12em /* æ–‡å—æ•°ã«ã‚ˆã£ã¦ã¯èª¿æ•´ */
}
dd{
border-bottom:dotted 1px #999;
margin:0 0 5px 14em /* dtã®widthã«2足ã—ã¦ã¾ã™ */
}
em{
background:#e13b8b;
border-radius:3px;
color:#000;
font-style:normal;
font-weight:700
}
input,textarea{
background:transparent;
border:1px solid #e13b8b;
margin:3px 0;
width:250px
}
textarea{
height:50px
}
#leftcolumn input,#leftcolumn textarea{
width:100%
}
hr{
border-top:1px solid #e13b8b
}
.marker{
background:#97f1c1;
background:-webkit-linear-gradient(rgba(151,241,193,0) 80%, #97f1c1 0%);
background:linear-gradient(rgba(151,241,193,0) 80%, #97f1c1 0%);
padding:1px 5px
}
.dcline{
border-left:5px solid #e13b8b;
margin:8px 0;
padding:3px 3px 3px 10px
}
.textbox{
border:1px dashed;
margin:10px 0;
padding:3px;
text-align:center
}
.title{
font-size:1.5em;
font-weight:700;
margin:2em 0
}
/* 複数行ã®å³å¯„ã›
------------------------------ */
.r-justified{
text-align:right
}
.r-justified p{
display:inline-block;
text-align:left
}
.inline{
display:inline-block
}
/* æ–‡å—ã®ä¸‹ã®ç·š
------------------------------ */
/* bodyã®font-sizeを変更ã—ãŸã‚‰æ•°å€¤ã‚’変更 */
/* 2.6 = font-size:1.3 x line-height:2 */
.line{
padding-bottom:0.1em;
background-color:#000;
background-image:-webkit-linear-gradient(left, #000 1.1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(top, #666 1.1px, rgba(102,102,102,0) 1px);
background-image:linear-gradient(to right, #000 1.1px, rgba(0,0,0,0) 1px), linear-gradient(to bottom, #666 1.1px, rgba(102,102,102,0) 1px);
background-size:2px 2.6rem;
line-height:2
}
/* ===================================
横幅800pxã§åˆ‡ã‚Šæ›¿ãˆ
=================================== */
@media screen and (max-width: 800px){
dt{float:none;clear:none}
dd{margin-left:20px}
input,textarea{width:100%}
img{max-width:100%;height:auto} /* ç”»åƒã®ç¸®å°è¡¨ç¤º */
}
/* ===================================
スマホã€ã‚¿ãƒ–レット用
横幅600pxã§åˆ‡ã‚Šæ›¿ãˆ
=================================== */
@media screen and (max-width: 600px){
body{
padding:15px;
font-size:1.5em
}
#header-inner{
padding:0;
min-height:60px; /* メニューを開ãボタン分 */
margin-right:60px /* メニューを開ãボタン分 */
}
#rightcolumn{
padding:20px 10px
}
h1{
font-size:1.2em
}
#rightcolumn h2{
margin:20px -10px
}
/* æ–‡å—ã®ä¸‹ã®ç·š
------------------------------ */
/* bodyã®font-sizeを変更ã—ãŸã‚‰æ•°å€¤ã‚’変更 */
/* 3 = font-size:1.5 x line-height:2 */
.line{
background-size:2px 3rem;
line-height:2
}
#rightcolumn-wrap{float:none;margin-left:0}
#rightcolumn{margin-left:0}
#leftcolumn{float:none}
a:hover,nav span:hover,#rightcolumn a:hover{background:none;border-radius:0;color:inherit}
/* ===================================
スマホã€ã‚¿ãƒ–レット用メニュー
=================================== */
/* スライド
------------------------------ */
#leftcolumn-wrap{
background:#000 url(image/back01.gif) repeat-y 100% 0;
line-height:2;
margin:0;
padding:70px 10px 20px; /* メニューボタン分空ã‘ã‚‹ */
position:fixed;
height:100%;width:300px; /* (*1)åŒã˜ã«ã™ã‚‹ */
top:0;right:0;
-ms-transform:translate(300px); /* (*1)åŒã˜ã«ã™ã‚‹ */
-webkit-transform:translate(300px); /* (*1)åŒã˜ã«ã™ã‚‹ */
transform:translate(300px); /* (*1)åŒã˜ã«ã™ã‚‹ */
transition:.3s;
z-index:1000
}
#side-bg{
background:rgba(51,51,51,.5)/* 周りã®èƒŒæ™¯è‰² */
}
#leftcolumn{
background:rgba(0,0,0,.7);
padding:10px
}
/* メニュー
------------------------------ */
#menu{
background:none
}
nav li a,nav li span{
padding:8px 0
}
/* メニューを開ãボタン
------------------------------ */
#open{
background:#000;
border:2px solid #e13b8b;
border-radius:3px;
display:inline-block;
position:absolute;
text-align:center;
height:60px;width:60px; /* 大ãã• */
top:0;right:0;
z-index:1001
}
#leftcolumn{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
#leftcolumn-wrap.open{-ms-transform:translate(0);-webkit-transform:translate(0);transform:translate(0)}
#side-bg{display:none;position:fixed;height:100%;width:100%;top:0;left:0;z-index:999;cursor:pointer}
#open.buttonclose{position:fixed;top:15px;right:15px}
.open-text{position:absolute;bottom:0;left:0;width:100%}
#open-icon,#open-icon:before,#open-icon:after{background:#fff} /* ç·šã®è‰² */
#open-icon{display:block;margin:-1px 0 0 -10px;position:absolute;top:20px;left:50%;height:2px;width:20px}
#open-icon:before,#open-icon:after{content:"";display:block;position:absolute;top:50%;left:0;height:2px;width:20px;transition:.3s}
#open-icon:before{margin-top:-8px}
#open-icon:after{margin-top:6px}
#open .close{background:transparent}
#open .close:before,#open .close:after{margin-top:0}
#open .close:before{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);background:#e13b8b}/* é–‹ã„ãŸæ™‚ã®ç·šã®è‰² */
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);background:#e13b8b}/* é–‹ã„ãŸæ™‚ã®ç·šã®è‰² */
}