/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box}
article,aside,footer,header,nav,section,textarea{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
.if-container{display:inline-block;margin:0 auto;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.ifrm{border:none;display:block;height:100%;width:100%}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}
/* この上はいじらないほうがいいです */

html{
font-size:62.5%;
height:100%
}
body{
background:#fff;/* インラインフレーム内背景色 */
color:#000;/* インラインフレーム内文字色 */
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1.1em;
letter-spacing:.1em;
line-height:1.5;
padding:20px 20px 70px;
text-align:left
}
a{
background:url("image/back02.gif");
border-radius:3px;
color:#000;
display:inline-block;
margin:5px 5px 5px 0
}
a img{
vertical-align:middle
}
/*--------------------------------------------------------
インラインフレーム外設定
--------------------------------------------------------*/
#page{
background:#fff;
color:#000;
padding:20px;
text-align:center;
height:100%
}
#page a{
background:none;
border-radius:0;
margin:0
}
#wrapper{
margin:0 auto;
height:100%;
width:880px; /* 大きさはここで変更 変更した場合は下の方のmax-width: 920pxの値も変更 */
}
header{
text-align:left;
padding-bottom:20px
}
/* 左側のwidth＋右側のwidthが全体の幅を超えないように */
#leftcolumn{
float:left;
margin:0 auto;
text-align:center;
width:300px
}
#rightcolumn{
background:#fff;
border:1px solid #000;
box-shadow:5px 5px 5px #ccc;
float:right;
padding:20px 10px;
width:550px
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
display:block;
text-align:center
}
nav li a,nav li span{
color:#000;/* メニューの文字色 */
display:block;
letter-spacing:.1em;
padding:5px 0;/* 一列の高さはここで調節 */
position:relative
}
#menu nav li a:hover,nav li span:hover{
background:url("image/back02.gif");
border-radius:20px;
transition:.6s
}
.sub-menu{
display:none;
overflow:hidden
}
.sub-menu li{
background:rgba(255,255,255,.6)
}
.sub-menu li a:after{
display:none
}
nav li span:after{
border-top:solid 1px #000; /* メニュー「>」の色 */
border-right:solid 1px #000; /* メニュー「>」の色 */
content:"";
display:block;
margin-top:-5px;
position:absolute;
top:50%;right:10px;
height:5px;width:5px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transition:.2s ease-in-out
}
nav li span.open:after{
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg)
}
.menus01{
background:url("image/ue.gif") no-repeat;
margin:0 auto;padding:0 10px;
height:45px;width:250px
}
.menus02{
background:url("image/naka.gif") repeat-y;
margin:0 auto;padding:0 10px;
width:250px
}
.menus03{
background:url("image/tunagi.gif") no-repeat;
margin:0 auto;padding:0 10px;
height:45px;width:250px
}
.menus04{
background:url("image/sita.gif") no-repeat;
margin:0 auto;padding:0 10px;
height:30px;width:250px
}
#open{display:none}
/*--------------------------------------------------------
index
--------------------------------------------------------*/
.index-wrapper{
margin:20px auto;
width:600px;
text-align:center
}
/*--------------------------------------------------------
ページ上部へのリンク、著作権表示
--------------------------------------------------------*/
#pagetop{
background:rgba(102,102,102,.7);/* 背景 */
color:#fff;/* 色 */
border-radius:10px;
box-sizing:border-box;
display:block;
padding:10px;
position:fixed;
text-align:center;
z-index:10
}
#pagetop:hover{
background:rgba(102,102,102,.9)
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1{
font-size:1.7em;
letter-spacing:.2em;
margin-bottom:.3em
}
h2,.h2{
border-bottom:solid 1px #000;
font-size:1.1em;
font-weight:700;
padding:.2em;
margin:20px 0
}
.h2:first-letter{
font-size:1.5em
}
h3,.h3{
background:#ddd;
border-radius:3px;
font-size:1em;
font-weight:700;
margin:20px 0
}
dt{
font-weight:700;
margin:0px 0px 5px
}
dd{
border-bottom:1px solid #ccc;
margin:0px 0px 5px 2em
}
em{
background:#ffe796; /* Ie9 */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.49, #fff), color-stop(0.5, #ffe796), color-stop(1, #ffe796));
background:-webkit-linear-gradient(transparent 50%, #ffe796 0%);
background:linear-gradient(transparent 50%, #ffe796 0%);
font-weight:700
}
input,textarea{
background:#fff;
border:1px solid #000;
color:#333;
margin:3px 0;
width:200px
}
textarea{
height:50px
}
hr{
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker{
background:#ccdcbd;
padding:1px 5px
}
.ln01{
border-left:8px solid #d2d2d2;
margin:5px 0;
padding:3px
}
.ln02{
border-left:8px solid #000;
margin:5px 0;
padding:3px
}
.textbox{
border:1px dotted #000;
font-size:0.9em;
padding-left:1em;
text-align:center
}
.title{
color:#999;
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:right
}
.txt{
border-left:1px solid #999;
color:#999;
margin:1em;
padding:0 0 0 1em
}
.frame{
background:#fff;
border:6px solid #fff;
border-radius:3px;
box-shadow:4px 4px 5px #ccc;
-webkit-box-shadow:4px 4px 5px #ccc
}
/*--------------------------------------------------------
横幅920pxで切り替え
920px = #pageの(paddingx2=40)+#wrapperのwidth
--------------------------------------------------------*/
@media screen and (max-width: 920px){
#wrapper{width:600px}
#rightcolumn{width:300px}
}
/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 600px){
body{font-size:1.3em;padding:10px 10px 70px}
#wrapper{width:100%;position:relative}
#page header{padding-right:60px} /* メニューボタン分空ける */
#contents{width:100%}
#leftcolumn{float:none}
#rightcolumn{float:none;width:100%}
.index-wrapper{width:auto}
img{max-width:100%;height:auto} /* 画像の縮小表示 */

/* スライド */
#leftcolumn{
background:rgba(0,0,0,.6); /* 背景色 */
padding:100px 0 20px; /* メニューボタン分上を空ける */
height:100%;width:300px; /* (*1)同じにする */
transition:all .3s;
transform:translate(300px); /* (*1)同じにする */
-ms-transform:translate(300px); /* (*1)同じにする */
-webkit-transform:translate(300px); /* (*1)同じにする */



position:fixed;
top:0;right:0;
z-index:1000
}
#leftcolumn.open{
transform:translate(0);
-ms-transform:translate(0);
-webkit-transform:translate(0)
}
aside{
height:100%;
overflow:auto;
-webkit-overflow-scrolling:touch
}

/* メニューを開くボタン */
#open{
color:#000;
display:inline-block;
position:absolute;
text-align:center;
height:60px;width:60px;/* 大きさ */
top:0;right:0;/* #wrapperを基準にした位置 */
z-index:1001
}
.open-text{position:absolute;bottom:0;left:0;width:100%}
#open .close + .open-text{color:#fff}/* 開いた時の文字色 */
#open-icon,#open-icon:before,#open-icon:after{background:#000; /* 線の色 */}
#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:#fff}/* 開いた時の線の色 */
#open .close:after{-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);background:#fff}/* 開いた時の線の色 */
}