@charset "utf-8"; /* -----reset css------ */ html,body,address,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,div,p,pre,blockquote,hr,bdo,span,a,em,br,del,ins,abbr,dfn,sub,sup,q,cite,code,var,kbd,samp,map,area,iframe,img,form,label,fieldset,legend,input,textarea,select,option,optgroup,button,command,details,menu,summary,article,aside,header,footer,nav,section,figcaption,figure,main,mark,rp,rt,ruby,time,wbr,audio,canvas,embed,object,param,source,video,datalist,keygen,meter,output,progress{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;list-style-type:none;background:transparent;box-sizing:border-box;}html,body{height:100%;}embed,iframe,img,table,textarea{max-width:100%;}table{border-collapse:collapse;border-spacing:0;}a,a:link,a:visited{color:#333;text-decoration:none;}a:hover,a:active{color:#777;}article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;} /* ---reset css end----2019/06/17更新 */ html,body{ width:100%; min-height:100%; } html{ font-size:85%; /* フォントサイズは1em(16px)の85% */ overflow-x:hidden; } body{ background-color:#fcfff2; /* 背景色 */ font-size:1.0em; color:#000; /* 基本文字色 */ line-height: 1.8; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Verdana,sans-serif; word-wrap: break-word; overflow-wrap: break-word; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-overflow-scrolling:touch !important; animation:fadeIn 0.5s ease 0s 1 normal; } @keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} } #wrapper{ width:100%; min-height:100%; text-align:center; position:relative; overflow:hidden; } body > #wrapper{ height:auto; } a, a:link, a:visited{ color:#753a06; text-decoration:none; } a:hover{ color:#e747b3; text-decoration:none; } img { opacity: 1; animation:fadeIn 0.8s ease 0s 1 normal; vertical-align:bottom; border:none; max-width:100%; height:auto; } img[data-src] { opacity: 0; display:none; } .emoji{ margin:0; vertical-align:middle; } hr{ border-top:solid 1px #777; height:1px; } .hr1{ border-top:dashed 1px #333; height:1px; padding-bottom:10px; margin:0 -15px; } .hr2{ border-top:dotted 1px #ccc; height:1px; } blockquote{ padding:10px 15px; margin:10px; border:solid 1px #ccc; border-radius: 5px; } /* トップ画像 */ .topimg{ height:auto; position:relative; overflow:hidden; padding-top:46.67%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 ,高さを下げたい場合は数値を下げる */ background:url('https://blog-imgs-128.fc2.com/s/o/r/sorauta1/cf-img2.jpg'); /* 表示したい画像URL */ background-position:center center; /* 表示する位置 中央寄せ */ background-repeat:no-repeat; background-size:cover; } /* ヘッダー部分 */ header{ width:870px; top:35px; position:absolute; text-align:left; z-index:1; } /* ブログタイトル */ header a, header a:link, header a:visited{ color:#753a06; /* ブログタイトルの文字色 */ font-size:2.0em; text-shadow:0 2px 2px rgba(0,0,0,.25); } h1{ top:0; padding:0 40px; line-height:1.5; } /* ブログ説明部分 */ .introduction{ padding:0 40px; } /* 管理リンク・パンくず表示部分 */ .pan_box{ display:-webkit-flex; display:flex; } .pan{ -webkit-flex:1; flex:1; text-align:left; } .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* 管理ページ部分 */ .adm{ padding:0 20px; } .adm2{ display:none; /* メニューカラムの管理リンク、2カラム時非表示 */ } ul.admin{ margin:0; list-style-type:none; text-align:right; } ul.admin li{ display:inline; margin:0; } ul.admin li:before{ content:none; } /* メインカラム部分 */ .blog-con{ position:relative; margin:10px 0 35px; padding:20px 10px 20px 25px; border:1px solid rgba(0,0,0,.3); box-shadow:0 5px 6px -3px rgba(0,0,0,.3); background-color:#fff; background:-webkit-radial-gradient(#e5e5e5 35%, transparent 40%); background:radial-gradient(#e5e5e5 35%, transparent 40%); background-size:23px 23px; background-position:left; background-repeat:repeat-y; } .tape { position:absolute; top:-10px; right:10px; margin-left:25px; background-color:rgba(255,255,255,.5); border-left:2px dotted rgba(0,0,0,.1); border-right:2px dotted rgba(0,0,0,.1); box-shadow:0 0 3px rgba(0,0,0,.4); padding:0.25em 1.0em; } .pen-link{ font-size:1.5em; color:#000; margin-left:2px; line-height:1; vertical-align:middle; transform:rotate(110deg); display:inline-block; } .con_body{ margin:15px 25px 0; } .pd-plus{ padding:10px 0 25px; } .entry_footer{ padding:15px 10px 0; font-size:0.8em; text-align:right; } .topentry_comment_body{ padding:0 25px; } #tools_container{ margin-top:5px; } /* メニュー部分 */ .entry_title h2, .menu_title{ margin:10px 10px 0; padding:0px 10px 8px; color:#000; font-weight:bold; line-height:1.5em; background-image:url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/crayon-gr.png); background-position:bottom; background-repeat:repeat-x; } .archive h2, .menu3 h2, h3.entry_title{ padding: 0.4em 1.0em; color:#753a06; font-weight:bold; line-height:1.5em; } .entry_title h2 a{ font-size:1em; font-weight:bold; } /* プラグインリストマークが不要の場合はここから */ nav ul li, .menu3 ul li{ list-style:none; /* リストマークを消す */ margin:0; padding:0; text-indent:-1em; /* 2行目字下げ */ margin-left:1em; } nav ul li:before, .menu3 ul li:before{ content:""; width:4px; height:4px; display:inline-block; background-color:#fff; /* 丸の中の色 */ border:1px solid #999; /* 丸線の色 */ border-radius:100%; position:relative; top:-1px; margin-right:8px; } nav ul li ul li:before, .menu3 ul li ul li:before{ content:""; display:inline-block; width:0; height:0; top:0; margin-right:3px; margin-left:4px; border:transparent solid 4px; border-left-color:#bbb; /* 三角の色 */ } /* リストマーク不要の場合はここまで削除 */ /* 2カラム+ベース部分 */ #box{ width:1140px; height:100%; margin:0 auto; text-align:left; background-color:#fff; } #content{ width:870px; float:left; padding:10px 10px 0 20px; } .title_list{ padding:0 15px; } #right-box{ float:left; width:270px; padding:0 10px 20px; } .menu-box{ padding:10px 17px 50px; overflow:hidden; } .menu_block{ padding-top:25px; } #footer{ width:1140px; margin:0 auto; padding:20px 10px 10px; height:auto; color:#000; background-color:#fff; /* フッター背景色 */ text-align:center; line-height:1.5; } #btn1, #btn2{ display:none; /* ドロワーメニューボタン、2カラム時非表示 */ } .kiji1{ display:none; /* 記事表示時要約非表示 */ } .kiji2{ display:block; /* 要約表示時記事非表示 */ } /* 簡易表示トップページエントリー */ .kiji1{ overflow: hidden; margin:0; } .left{ float:left; width:35%; /* サムネイル画像の幅 */ height:auto; max-height:150px; margin-right:20px; text-align:center; position: relative; overflow:hidden; } .left img{ width:100%; height:auto; max-height:140px; -o-object-fit: cover; /* 古いopera用ベンダー */ font-family:'object-fit:cover;'; /* IE対策 */ object-fit:cover; border:1px solid #ccc; /* 枠線不要ならborder:none;に */ vertical-align:middle; } .left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"], .left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{ display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */ } .moji-c{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; /* 表示したい行数(3行表示で末尾に3点リーダー表示、webkit系のみ) */ max-height:5.4em; /* IE,Firefox対策(4行は7.2em、5行は9.0em)はみ出しはこの数値で調整 */ } p.right-txt{ text-align:right; margin-right:20px; } .clearLeft{ clear:left; } /* 記事ページ追記ボタン */ .hidden_box label{ padding:0 10px; border:solid 1px #666; /* ボタン枠 */ cursor:pointer; } .hidden_box label:hover{ background:#eee; /* ホバー時ボタン背景色 */ color:#333; } .hidden_box input{ display:none; } .hidden_box .hidden_show{ height:0; padding:0; overflow:hidden; opacity:0; /*中身を非表示にしておく*/ } .hidden_box input:checked ~ .hidden_show{ padding:10px 0; height:auto; opacity:1; /*クリックで中身表示*/ } /*コメントリスト*/ .sidehide{ display:none; padding:15px 0; text-align:left; } /*プロフィール画像の余白・表示位置 */ .plugin-myimage{ margin:0 auto 15px; text-align:center !important; border:none; } /* 記事ページ移動 */ .page_navi{ padding:10px; text-align:center; margin:0px auto; } /* ページネーション */ #pagenavi{ line-height:2.5; font-size:0.9em; text-align:center; } #pagenavi a,#pagenavi span{ width:45px; height:35px; margin:2px; padding:2px 0; background:#fff; border:1px solid #666; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:3px; text-decoration:none; transition:all 0.3s; display:inline-block; } #pagenavi span{ font-weight:bold; background:#eee; } #pagenavi a.dot{ text-decoration:none; border:1px solid #666; } #pagenavi a:hover{ border-color:#000; background:#ccc; color:#000; font-weight:bold; } .pagenation{ overflow:hidden; margin:5px; } .pagenation ul{ text-align:center; position:relative; list-style:none; padding-left:0; } .pagenation li{ position:relative; display:inline-block; } .pagenation_prev,.pagenation_next{ margin:10px; font-size:1.0em; } /* ページトップ・ボトムボタン */ #pagetop{ bottom:100px; } #pagebottom{ bottom:55px; } #pagetop,#pagebottom{ display:none; position:fixed; right:30px; background-color:rgba(255,255,255,0.5); border:1px solid #999; text-align:center; color:#000; font-size:23px; text-decoration:none; padding:0 8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:3px; z-index:4; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #pagetop:hover,#pagebottom:hover{ background-color:rgba(255,182,193,0.5); } /* カレンダー */ table.calender{ width: 100%; } .calender caption{ font-size:1.0em; border-bottom:1px solid #bbb; } .calender th{ font-weight:normal; text-align:center; border-bottom:1px solid #bbb; } .calender td{ text-align:center; border-bottom:1px dotted #ddd; } .calender td a:link,.calender td a:visited{ color:#a52a2a; text-shadow:0px 0px 12px #f00; } .calender td a:hover{ color:#e747b3; text-decoration:none; } th#sun{ color:#da0b00; } th#sat{ color:#1e90ff; } /* 全記事表示 */ .all_body{ margin:10px; border-bottom:1px dotted #ccc; } .all_day{ padding:0; margin:0; } /* コメント部分 */ .com_block{ margin:10px 0 30px; padding:10px 35px; border:1px dotted #999; border-radius:7px; } .com_title{ margin: 10px 0 15px; color:#753a06; font-weight:bold; border-bottom:1px dotted #ccc; } .com_state{ margin-top:10px; text-align:right; } input[type=text], input[type=password], select, textarea{ font-size:1.0em; font-family:sans-serif; color:#000; border:1px solid #aaa; padding:2px; width:100%; margin-bottom:5px; } nav input[type=text], nav input[type=password], nav select, nav textarea{ width:100% !important; } input[type=submit], input[type=reset], input[type=button], input[type=image], button{ color:#000; border:1px solid #aaa; padding:2px 4px; } input[type=checkbox], input[type=radio]{ margin:5px; vertical-align:middle; } /* 2カラム */ @media only screen and (min-width:770px) and (max-width:1197px) { #box{ max-width:95%; } header { width: auto; top:20px; left:0; margin-right:300px; padding-left:40px; } #content { width:100%; margin-right:-270px; padding-right:270px; } .menu-box{ padding:10px 17px 30px; overflow:hidden; } #footer{ width:95%; } } @media only screen and (min-width:1000px) { /* 2カラム時入力フォーム2列 */ .form-left{ width:50%; text-align:left; padding-right:10px; float: left; } .form-right{ width:50%; text-align:left; padding:0 0 10px 10px; float: left; } } /* 1カラム */ @media only screen and (max-width:769px) { body::-webkit-scrollbar{ display:none; } body{ -ms-overflow-style:none; } #box { width:100%; } #content{ width:100%; float:none; margin:0; padding:0 15px; } header{ width:100%; top:0; left:0; overflow:hidden; height:auto; margin:0; padding:0; text-align:left; position:absolute; } h1{ padding-top:5px; line-height:1.3; } .adm{ display:none; /* 上部管理リンク、1カラム時非表示 */ } .adm2{ display:block; /* ドロワーメニュー下の管理リンク表示 */ margin:0 20px 50px; } ul.admin { text-align:right; } #footer{ width:100%; } #right-box{ float:none; width:100%; margin-left:0; padding:0 5px 10px; } .menu-box{ padding:10px 17px 30px; overflow:hidden; } .menu_title{ cursor:pointer; } .menu_block { padding:0 0 5px; } /* ドロワーメニュー部分 */ #btn1, #btn2{ display:block; /* ドロワーメニューボタン表示 */ } #btn1{ overflow:hidden; height:27px; top:0; right:0; width:45px; position:absolute; } #btn2{ background-color:#fcfff2; } #nav_open { margin:0 13px; position:fixed !important; cursor:pointer; width:17px; height:26px; z-index:3; } #nav_open span, #nav_open span:before, #nav_open span:after{ position:absolute; bottom:18px; right:0; height:2px; /* ハンバーガーボタン 線の太さ */ width:17px; /* ハンバーガーボタン 線の長さ */ background:#333; display:block; content: ''; transform: translate3d(0,0,0); } #nav_open span:before{ bottom:-6px; } #nav_open span:after{ bottom:-12px; } #btn2{ overflow:hidden; top:0; width:270px; height:29px; z-index:3 !important; } #nav_close{ cursor:pointer; position:relative; padding-left:215px; } #nav_wrap{ display:none; } .css-cancel{ display:inline-block; position:relative; margin:3px 12px 0 20px; padding:0; width:2px; /* キャンセルボタン 線の太さ */ height:20px; /* キャンセルボタン 線の長さ */ background:#333; /* 線の色 */ transform:rotate(45deg); } .css-cancel:before{ display:block; content:""; position:absolute; top:50%; left:-9px; /* 左からの位置 */ width:20px; /* キャンセルボタン 線の長さ */ height:2px; /* キャンセルボタン 線の太さ */ margin-top:-1px; /* 上からの位置 */ background:#333; /* 線の色 */ } nav{ position:fixed; top:0; bottom:0; height:100vh; width:270px; right:-270px; padding-bottom:50px; background:#fff; border-left:1px solid #666; z-index:5; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } .tree-m{ display:none; /* メニューを閉じて表示 */ } /* ページトップ・ボトムボタン */ #pagetop{ bottom:150px; } #pagebottom{ bottom:110px; } #pagetop,#pagebottom{ right:10px; font-size:20px; } } @media only screen and (min-width:690px) and (max-width:770px) { /* 1カラム時入力フォーム2列 */ .form-left{ width:50%; text-align:left; padding-right:10px; float: left; } .form-right{ width:50%; text-align:left; padding:0 0 10px 10px; float: left; } } @media only screen and (max-width:600px) { .introduction{ display:none; /* 600pxまで非表示 */ } .pan_box{ display:none; /* 1カラム時非表示 */ } .blog-con2{ margin:2.0em 0; } /* モバイル入力時フォントサイズ(これより小さいとiOSで画面が勝手に拡大される) */ input[type="password"],input[type="text"],textarea,select{ font-size:16px; font-family:sans-serif; } } @media only screen and (max-width:420px) { #box { width:100%; } #content { padding:0 10px; } header{ width:100%; } header a, header a:link, header a:visited{ font-size:1.4em; } h1{ margin:5px 0; padding:0 35px 0 15px; } .title_list{ padding:0 5px; } .con_body{ margin:15px; } .com_block{ padding:10px 25px; } .topentry_comment_body { padding:0 10px; } .kiji1{ display:block; /* 1カラム時要約表示 */ } .kiji2{ display:none; /* 1カラム時記事非表示 */ } .left{ float:none; width:100%; } .right { padding-top:10px; } .sidehide { padding:15px 0; } #footer{ width:100%; padding:10px 8px; font-size:0.9em; } /* ページネーション */ #pagenavi{ line-height:1.8; font-size:0.8em; } #pagenavi a,#pagenavi span{ width:37px; height:23px; } .pagenation{ margin-bottom:20px; } .pagenation_prev,.pagenation_next{ margin:5px; font-size:0.8em; } #pagetop{ bottom:180px; } #pagebottom{ bottom:150px; } #pagetop,#pagebottom{ right:10px; font-size:14px; padding:0 6px; } } /* その他、表示幅で変更 */ @media only screen and (max-width: 960px) { /* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */ /* 960pxまでは埋め込みコード560×315で表示 */ .player{ position:relative; height:0; padding-bottom:56.25%; /* アスペクト比16:9の場合 */ overflow: hidden; } .player iframe{ position:absolute; width:100%; height:100%; top:0; left:0; } } /* 管理者コメントの背景に色を付ける(日本語可・記号等は文字の前にバックスラッシュを入れる) バックスラッシュは日本語表示用フォントで円記号に見えますが問題ありません */ .コメント入力時の管理者名 { background-color:#fcfff2; }