```css
@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はメイン記事指定のセクションに統合 */
/* h3はメイン記事指定のセクションに統合 */
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は末尾に統合 */
em { font-weight:bold; }
strong { font-weight:bold; color:#000000; } /* 重複するfont-weight:bold;を削除し統合 */
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は末尾に統合 */

/*================================================
 * ヘッダー
 *================================================*/
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{ /* 一般・共通設定の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{ /* 一般・共通設定の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の定義 */
img {
    vertical-align: bottom; /* 以前の定義を維持 */
    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; } /* contentを修正 */
/*アイコン*/
.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; }

/* 最終行の無関係なHTML要素とインラインスタイルは削除 */
/* <p style="text-align: right"> この文字は右寄せされます！ </p> */

/* すべての<p>タグの文頭に全角スペースを入れる */
p::before {
    content: "　"; /* 全角スペース */
}







```