@charset "UTF-8"; /*================================================ * CSSリセット ================================================*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} /*================================================ * 一般・共通設定 ================================================*/ body { width:700px; margin:0 auto; font-size:14px; color:#382400; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; line-height:1.6;background:#FAE0DF; -webkit-text-size-adjust: none; } #main { float:left; width:65.625%; } #sub { float:right; width:31.25%; } #subnav { display:none; } a { color:#9b2f3d; } a:hover { color:#c04d5c; } h1 { color:#000000; font-size:12px; line-height:1.2; } h1 a { color:#85d1c6; text-decoration:none; } h1 a:hover { color:#85d1c6; text-decoration:underline; } h2 { margin-bottom:0.5em; font-size:18px; color:#9b2f3d; border-bottom:3px solid #808080; } h3 { margin-bottom:0.25em; padding:2px 5px; color:#000; font-size:16px; background:#F8DAF6; } h4 { margin-bottom:0.25em; font-size:16px; color:#382400; } h4:before { content:"\002665"; color:#9b2f3d; } h5 { margin-bottom:0.25em; padding:2px; color:#382400; font-size:16px; border-top:1px dotted #382400; border-bottom:1px dotted #382400; background:#b7af9c; } h6 { margin-bottom:0.25em; color:#382400; font-size:14px; font-weight:bold; } p { margin:0 0 1em 0; } img { vertical-align:bottom; } em { font-weight:bold; } strong { font-weight:bold; color:#000000; } pre { margin:1em 0; padding:1em; } blockquote { margin-bottom:1em; padding:1em; border:1px dotted #ddd; border-left:5px solid #ddd; } ul,ol,dl { margin:0 0 1em 0; } ul li { list-style:disc; } ol li { list-style:decimal; } li { margin-left:2em; } dt { margin-bottom:0.5em; border-bottom:1px dotted #ddd; } dt:before { content:"\0025a0"; } dd { margin-bottom:1em; } table { width:100%; margin-bottom:1em; border-collapse:collapse; border:1px solid #ddd; } th { padding:10px; text-align:center; vertical-align:middle; border:1px solid #ddd; background:#eebfb9; } td { padding:10px; text-align:left; border:1px solid #ddd; } img { vertical-align:bottom; } /*================================================ * ヘッダー ================================================*/ header { position:relative; margin:10px 0; } header h1 { margin-bottom:20px; } .tel { position:absolute; top:0; right:0; vertical-align:top; } .tel span { color:#705c0b; font-family:Century, "MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif; font-size:28px; font-weight:bold; vertical-align:middle; } /*================================================ * グローバルナビゲーション ================================================*/ nav { margin-bottom:20px; padding:5px 0; background:#be993e; overflow:hidden; } nav ul { margin-left:10px; padding:0; } nav li { float:left; list-style:none; margin:0; padding-right:20px; } nav li a { color:#fff; text-decoration:none; } nav li a:hover { color:#fff; text-decoration:underline;; } /*================================================ * サブコンテンツ ================================================*/ .submenu li { margin:0; padding:0; list-style:none; } .submenu li a:before { content:"\0025a0"; color:#5b4111; } .submenu li a { display:block; padding:5px 2px; border-bottom:1px dotted #ddd; text-decoration:none; } .submenu li a:hover { background:#f7d0cb; } .bnr { overflow:hidden; } .bnr ul { overflow:hidden; } .bnr li { margin:0 0 10px 0; padding:0; list-style:none; } .bnr li a:hover { opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha( opacity=80 )"; } .bnr img { width:100%; } /*================================================ * フッター ================================================*/ footer { clear:both; } .footmenu { width:100%; padding:20px 0; overflow:hidden; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; } .footmenu ul { position:relative; float:left; left:50%; margin:0; } .footmenu li { position:relative; left:-50%; float:left; list-style:none; margin:0; padding:0 20px; font-size:12px; text-align:center; } .copyright { clear:both; padding:20px 0; font-size:11px; text-align:center; } /*================================================ * ページトップへの戻り ================================================*/ .totop { position:fixed; bottom:15px; right:15px; } .totop a { display:block; text-decoration:none; } .totop img { background:#7dbdb4; } .totop img:hover { background:#85d1c6; } /*================================================ * クラス ================================================*/ .textL { text-align:left; } .textR { text-align:right; } .list { padding:0 0 0 2em; } .list li { margin:0; padding:0; list-style:none; text-indent:-1.3em; } .list li:before { content:"\002618\00a0"; color:#9b2f3d; } .temp { clear:both; overflow:hidden; margin-bottom:50px; } .img { float:left; width:300px; } .text { float:right; width:450px; } .photo { margin:20px 0; padding:10px; box-shadow:rgba(113, 135, 164, 0.8) 0 3px 15px 0; background:#fff; } .info dt { border-bottom:none; } .info dd { padding-bottom:1em; border-bottom:1px solid #ddd; } .catalog { overflow:hidden; } .catalog ul { overflow:hidden; margin-top:1.587%; margin-right:-1.587%; } .catalog li { list-style:none; float:left; width:18.412%; margin:0 1.587% 1.587% 0; } .catalog li img { width:100%; } /*================================================ * スライドショー ================================================*/ .slide { width:100%; overflow:hidden; position:relative; margin-bottom:20px; } .slideInner { list-style:none; margin:0 0 5px 0; padding:0; } .slideInner li { position:absolute; width:100%; background:#fff; margin:0; padding:0; } .slideInner li img { width:100%; height:auto; } .slidePrev { position:absolute; width:50px; height:60px; left:0; cursor:pointer; z-index:100; } .slideNext { position:absolute; display:block; width:50px; height:60px; right:0; cursor:pointer; z-index:100; } .controlNav { position:relative; float:left; left:50%; } .controlNav span { position:relative; left:-50%; float:left; margin:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:10px; height:10px; overflow:hidden; -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset; background:#eee; text-indent:-9999px; vertical-align:middle; } .controlNav span:hover { background:#ccc; cursor:pointer; } .controlNav span.current { -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5); -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5); box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5); background:#85d1c6; } /*================================================ * タブレット向けデザイン ================================================*/ /* スクロールバーを考慮して20px大きいサイズで切り替え */ @media screen and (max-width:979px) { body { box-sizing: border-box; width:100%; padding:0 10px; } header h1 { margin-bottom:0; } .tel { position:relative; text-align:right; } .catalog li { width:23.412%; } } /*================================================ * スマートフォン向けデザイン ================================================*/ @media screen and (max-width:767px) { #main { float:none; width:100%; } #sub { float:none; width:100%; } .bnr ul { overflow:hidden; margin-right:-2%; } .bnr li { float:left; width:48%; margin:0 2% 2% 0; } /* 下層サブメニュー */ #subnav { display:block; position:relative; margin-bottom:10px; } #subnav h3 { cursor:pointer; background:#85d1c6; } #subnav h3:after { position:absolute; content:"\0025bc"; top:3px; right:5px; } #subnav h3.menuOpen:after { position:absolute; content:"\0025b2"; top:3px; right:5px; } #subnav li { margin:0; padding:0; list-style:none; } #subnav li a:before { content:"\0025a0"; color:#5b4111; } #subnav li a { display:block; padding:5px 2px; border-bottom:1px dotted #ddd; text-decoration:none; } #subnav li a:hover { background:#f7d0cb; } } /*文字装飾*/ /*文字色指定*/ .red { color: #DD2353; } .blue { color: #0000cc; } .brown { color: #C0504D; } .pink { color: #FE00FE; } .black { color: #000000; } .green { color: #4CAF50; } .orange { color: #FF9819; } /*文字装飾*/ .yellow { background: #FFE566; } /*太文字指定*/ .b { font-weight: bold; } /*メイン記事指定*/ h2{ height: 45px; background: url(img/h2.gif); line-height: 45px; font-size: 20px; font-weight:bold; clear:both; color: #000000; text-indent: 1.5em; margin-top: 1px; margin-right: 1px; margin-bottom: 20px; margin-left: 1px; text-align: left; } h3{ height: 30px; line-height: 30px; font-size: 16px; font-weight:bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #316AC5; margin-top: 10px; margin-bottom: 10px; padding-right: 15px; padding-left: 15px; } #content{ width:760px; margin: 0px auto; padding-top: 0px 20px; text-align: left; } #content .inner p { background-image: url(img/p_bg3.gif); } .inner{ margin: 10px 15px 20px 15px; border: 1px solid #C1C1C1; padding: 1px 1px 10px 1px ; } .inner p{ background: url(img/p_bg.gif) left bottom; margin:0 15px 15px; font-size: 16px; line-height: 25px; text-align:justify; } /* 角丸 */ .rnd1{ padding: 15px; margin: 15px auto 15px auto; } .rnd1{ position:relative; z-index:1; padding: 15px; margin: 15px auto 15px auto; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .rootoo1 { background-color: #F1F5FF; border: 1px solid #d7d7d7; } .rootoo2 { background-color: #FFF; border: 2px solid #FAC090; } .rootoo3 { background-color: #FFF; } .rootoo4 { background-color: #F5F5F5; }.rootoo5 { background-color: #FFF; border: 2px solid #00FF00; }.rootoo6 { background-color: #FFF; border: 2px solid #FF843F; } .cubettl{ border-style: solid; border-width: 1px; border-color: #000000; color:#000000; } /*Safariのみ見え方が異なるため、ハックで調整*/ body:last-child:not(:root:root) .cubettl { padding-top:0px; padding-bottom:1px; } 
img { 
    max-width: 100%; 
    height:auto;
}


/*-------------------- 吹き出しを作る --------------------*/ .balloon { margin-bottom: 2em; position: relative; } .balloon:before,.balloon:after { clear: both; content: ""; display: block; } .balloon figure { width: 60px; height: 60px; } .balloon-image-left { float: left; margin-right: 20px; } .balloon-image-right { float: right; margin-left: 20px; } .balloon figure img { width: 100%; height: 100%; border: 1px solid #aaa; border-radius: 50%; margin: 0; } .balloon-image-description { padding: 5px 0 0; font-size: 10px; text-align: center; } .balloon-text-right,.balloon-text-left { position: relative; padding: 10px; border: 1px solid; border-radius: 10px; max-width: -webkit-calc(100% - 120px); max-width: calc(100% - 120px); display: inline-block; } .balloon-text-right { border-color: #aaa; } .balloon-text-left { border-color: #aaa; } .balloon-text-right { float: left; } .balloon-text-left { float: right; } .balloon p { margin: 0 0 20px; } .balloon p:last-child { margin-bottom: 0; } /* 三角部分 */ .balloon-text-right:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #aaa; top: 15px; left: -20px; } .balloon-text-right:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 15px; left: -19px; } .balloon-text-left:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #aaa; top: 15px; right: -20px; } .balloon-text-left:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 15px; right: -19px; }


/*------------------------------ 画像付き吹き出し(会話) ------------------------------*/ /* 吹き出し 全体*/ .talking { margin-bottom:2em; position:relative; } .talking:before , .talking:after { clear:both; content:""; display:block; } /*アイコン*/ .talking figure { width:60px; /*アイコンの横幅*/ height:60px; /*アイコンの縦幅*/ } .talking-left_icon { float:left; margin-right:20px; /*アイコンの右の余白(左の吹き出し)*/ } .talking-right_icon { float:right; margin-left:20px; /*アイコンの左の余白(右の吹き出し)*/ } .talking figure img { width:100%; height:100%; margin:0; border:2px solid #aaa; border-radius:50%; /*アイコンの角丸*/ } /*アイコンの下の名前*/ .talking-left_icon figcaption , .talking-right_icon figcaption { padding:2px 0 0; font-size:12px; text-align:center; } /*吹き出しのセリフ部分*/ .talking-left , .talking-right { position:relative; padding:10px; border-style:solid; /*枠線の線種*/ border-radius:10px; /*セリフを入れる部分の角丸*/ max-width: calc(100% - 80px); } .talking p { margin:0; } .talking p :last-child { margin:0; } /*---左の吹き出し---*/ .talking-left { float:left; border-width:2px; /*枠線の太さ*/ border-color:lightpink; /*枠線の色*/ background:lightpink; /*背景色*/ } /*左の吹き出し 三角*/ .talking-left:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid lightpink; /*三角の線になる部分*/ top: 15px; left: -22px; } .talking-left:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid lightpink; top: 15px; left: -19px; } /*---右の吹き出し---*/ .talking-right { float:right; border-width:2px; /*枠線の太さ*/ border-color:khaki; /*枠線の色*/ background:khaki; /*背景色*/ } /*右の吹き出し 三角*/ .talking-right:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid khaki; /*三角の線になる部分*/ top: 15px; right: -22px; } .talking-right:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid khaki; top: 15px; right: -19px; }



/*全体*/ .hidden_box { margin: 2em 0;/*前後の余白*/ padding: 0; } /*ボタン装飾*/ .hidden_box label { padding: 15px; font-weight: bold; border: solid 2px black; cursor :pointer; } /*ボタンホバー時*/ .hidden_box label:hover { background: #efefef; } /*チェックは見えなくする*/ .hidden_box input { display: none; } /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding: 10px 0; height: auto; opacity: 1; }

<p style="text-align: right">
  この文字は右寄せされます！
</p>