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:#523829;/* インラインフレーム内文字色 */ font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; font-size:1.2em;/* 文字の大きさ */ text-align:left; letter-spacing:.1em; line-height:1.5; padding:20px 20px 60px} a{ color:#ff8080; text-decoration:underline} a:hover{ color:#a3a328 } /*-------------------------------------------------------- インラインフレーム外設定 --------------------------------------------------------*/ #page{ background:#f8c8c8 url(image/back01.gif); color:#fff; padding:0; height:100% } #page a{ color:#523829; text-decoration:none } #wrapper{ text-align:left; width:100% } header{ min-height:120px } #header-inner{ padding:5px 10px; text-shadow:1px 0 0 #523829, 1px 1px 0 #523829, 0 1px 0 #523829, -1px 1px 0 #523829, -1px 0 0 #523829, -1px -1px 0 #523829, 0 -1px 0 #523829, 1px -1px 0 #523829 } #contents{ background:#fff } footer{ background:#fff url(image/back05.gif); border-top:1px dotted #523829; border-bottom:1px dotted #523829; text-align:right; width:100% } #footer-inner{ padding:5px 10px } .line02{height:30px;background:#f8c8c8 url(image/back02.gif) repeat-x} .line03{height:15px;background:url(image/back03.gif) repeat-x} .line04{height:30px;background:#f8c8c8 url(image/back04.gif) repeat-x} /*-------------------------------------------------------- index --------------------------------------------------------*/ .indexboxwrap{ padding:20px; width:400px } .indexbox{ background:#fff; border-radius:5px; color:#523829; padding:20px; width:100% } /*-------------------------------------------------------- ページ上部へのリンク --------------------------------------------------------*/ #pagetop{ background-color:rgba(248,200,200,.6); border-radius:30px; height:40px;width:40px; position:fixed; bottom:-100px;right:20px; z-index:50; -webkit-transition:.5s; transition:.5s } .arrow{ border-left:2px solid #523829; border-top:2px solid #523829; position:absolute; top:40%;left:32%; height:12px;width:12px; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg) } #pagetop:hover{ background-color:rgba(222,222,222,.8); transition:.3s } /*-------------------------------------------------------- メニュー --------------------------------------------------------*/ #menu{ background:#fff url(image/back05.gif); border-top:1px dotted #523829; border-bottom:1px dotted #523829; font-weight:700; padding:5px; width:100% } #menu li{ display:inline-block } #menu li a{ color:#523829; display:inline-block; padding:0 10px } #menu li + li{ background:url(image/icon01.gif) no-repeat 0 50%; padding:0 0 0 8px } /*-------------------------------------------------------- 見出し、枠、線 --------------------------------------------------------*/ h1{ font-size:1.6em; margin:0 0 .5em } h2,.h2{ background:#523829; border-radius:6px; color:#fff; font-size:1em; font-weight:700; margin:1em 0; padding:5px 10px } h3,.h3{ border-bottom:1px dashed #523829; background:url(image/icon01.gif) no-repeat 0 50%; font-size:1.1em; font-weight:700; margin:15px 0; padding:5px 10px } dt{ background:#ffd8d5; border-radius:5px; font-weight:700; float:left; margin:0 0 5px; padding:3px; width:10em } dd{ border-bottom:dotted 1px #999; padding:3px; margin:0 0 5px 12em } dl:after{ content:""; clear:both; height:0; display:block; visibility:hidden } em{ font-weight:700 } input, textarea{ background:#523829; border:1px solid #999; color:#fff; 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:#ffe699; padding:1px 5px } .ln01{ border-left:5px solid #523829; margin:5px 0; padding:3px } .ln02{ border-left:5px solid #ff8080; margin:5px 0; padding:3px } .textbox{ border:2px solid #523829; margin:10px 0; padding:3px; text-align:center } .title{ color:#523829; font-size:1.5em; font-weight:700; margin:2em 0; text-align:right } .txt{ border-left:1px dotted #523829; margin:1em; padding:0 0 0 1em } .frame{ background:#c2b089; border-radius:3px; padding:5px } /*-------------------------------------------------------- スマホ、タブレット用 横幅600pxで切り替え --------------------------------------------------------*/ @media screen and (max-width: 600px){ body{font-size:1.3em} #page{height:95%} header{min-height:inherit} #menu{text-align:center} .indexboxwrap{width:100%} dt{float:none;width:auto} dd{margin:0 0 5px 0} }