/*
Theme Name: COOLWEB HTML
Version: 1.0.0
Author: AF-Partner
*/

body, div, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,figure, figcaption {margin: 0;padding: 0;}
table {border-collapse: collapse;border-spacing: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
img, abbr, acronym, fieldset {border: 0;}
img {vertical-align: bottom;-ms-interpolation-mode: bicubic;}
ul li {list-style-type: none;}
 * {-webkit-box-sizing: border-box; box-sizing: border-box;}

/* BODY */
body {font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	color: #000; font-size: 1em; line-height: 1.7em; text-align: left; -webkit-text-size-adjust: 100%;}

/* リンクの属性（未指定の時）*/
a {color: #C00; text-decoration: none;}
a:hover {color: #C00; text-decoration: underline;}

/* 画像属性等 */
img {max-width: 100%; height: auto; -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; vertical-align: bottom;}
.alignleft {float: left;  margin: 5px 10px 5px 0;}
.alignright{float: right; margin: 5px 0 5px 10px;}
.aligncenter{margin: 5px auto;display:block;}
a:hover.link img,a:hover img.link{transform: scale(1.15,1.15); -webkit-transform:scale(1.15,1.15); -moz-transform:scale(1.15,1.15); -ms-transform:scale(1.15,1.15); -o-transform:scale(1.15,1.15);}

#wrapper {width: 100%; min-width: 1000px; border-top: 5px solid #093155; background-color: #EFEFEF;}

/* ヘッダー */
header {height: auto; background-color: #093155;}
#header-inner {width: 1000px; margin: 0 auto;}
h1 {float: left; margin: 0; padding: 10px 0; color: #FFF; font-size: 85%; line-height: 1.0em; font-weight: normal;}
h1 a {color: #FFF; text-decoration: none;}

/* ヘッダー画像 */
#mainvisual {position: relative; width: 100%; height: calc( 800 / 2400 * 100vw ); overflow: hidden; z-index: 10;}

/* コンテンツ */
#containar {max-width: 900px; margin: 0 auto; padding: 15px 0; background-color: #FFF; box-shadow: 0px 0px 6px 2px #CCC; -webkit-box-shadow: 0px 0px 6px 2px #CCC;}
#contents {width: 800px; margin: 0 auto; padding: 0;}

#contents p {padding: 1em;}
h2, h3, h4, h5, h6 {padding: 0 0 0.5em; font-weight: 500; line-height: 1.2em; color: #000;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.2em;}
h6 {font-size: 1.1em;}

/* フッター */
footer {width: 100%; color: #FFF; background-color: #093155;}
#footer-inner {width: 1000px;margin: 0 auto; padding: 10px 0;}
#footer-inner nav{text-align: center;margin: 0; padding: 10px 0 20px;}
#footer-inner nav ul li {display: inline-block;*display: inline;*margin-bottom: 12px;padding: 0 10px 0 15px;line-height: 1.3em;font-size: 92%; color: #FFF;border-left: solid 1px #1473C6;}
#footer-inner nav ul li:first-child {border-left: none;}
footer a {color: #FFF; text-decoration: none; font-weight: 600;}
footer a:hover{color: #FFF; text-decoration: underline;}
#copyright {width: 100%; padding: 10px 0; text-align:center; font-size: 85%; font-weight: 600; color: #FFF; border-style: solid; border-width: 0 0 5px 0; background-color: #093155;}

 /* 見出し01 */
.idx01 {position: relative; margin-left: .2em; padding: 0.2em 0 0 1.2em;}
.idx01.red, .idx01.blue, .idx01.green, .idx01.pink, .idx01.brown, .idx01.purple, .idx01.grey {color: #000;}
.idx01:before {position: absolute; left: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f111';; margin-right: .2em; }
.idx01.red:before {color: #ED8C97;}
.idx01.blue:before {color: #99E5FF;}
.idx01.green:before {color: #BFDF9F;}
.idx01.pink:before {color: #FF99CC;}
.idx01.brown:before {color: #FFB45E;}
.idx01.purple:before {color: #D2A6CA;}
.idx01.grey:before {color: #CCC;}

/* 見出し02 */
.idx02 {position: relative; padding: 0.2em 1em 0.2em 1.8em; background: #F2F2F2; border-radius: .4em; display: block} 
.idx02.red, .idx02.blue, .idx02.green, .idx02.pink, .idx02.brown, .idx02.purple, .idx02.grey {color: #000;}
.idx02:before {position: absolute; left: .5em; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f138';}
.idx02.red {background-color: rgba(255,34,50,0.1);}
.idx02.red:before {color: #FF2232;}
.idx02.blue {background-color: rgba(51,204,255,0.1);}
.idx02.blue:before {color: #3CF;}
.idx02.green {background-color: rgba(0,191,98,0.1);}
.idx02.green:before {color: #00BF62;}
.idx02.pink {background-color: rgba(255,51,153,0.1);}
.idx02.pink:before {color: #F39;}
.idx02.brown {background-color: rgba(237,104,42,0.1);}
.idx02.brown:before {color: #ED682A;}
.idx02.purple {background-color: rgba(129,78,170,0.1);}
.idx02.purple:before {color: #814EAA;}
.idx02.grey:before {color: #333;}

/* 見出し03 */
.idx03{line-height: 1.2em; padding: .3em .5em 0; border-bottom: 5px solid #CCC;}
.idx03.red {border-color: #FF2232; color: #333;}
.idx03.blue {border-color: #3CF; color: #333;}
.idx03.green {border-color: #00BF62; color: #333;}
.idx03.pink {border-color: #F39; color: #333;}
.idx03.brown {border-color: #ED682A; color: #333;}
.idx03.purple {border-color: #814EAA; color: #333;}
.idx03.grey {border-color: #CCC; color: #333;}

/* 見出し04 */
.idx04 {border-style: solid; border-width: 3px ; padding: 0.5em; border-radius: 0.5em;}
.idx04.red {border-color: #FF2232; color: #333;}
.idx04.blue {border-color: #3CF; color: #333;}
.idx04.green {border-color: #00BF62; color: #333;}
.idx04.pink {border-color: #F39; color: #333;}
.idx04.brown {border-color: #ED682A; color: #333;}
.idx04.purple {border-color: #814EAA; color: #333;}
.idx04.grey {border-color: #CCC; color: #333;}

/* 見出し05 */
.idx05 {padding: 0.5em; background: #FFE5E5; border-bottom: solid 3px #C00;}
.idx05.red {color: #333; border-color: #C00; background: rgba(204,0,0,0.06); }
.idx05.blue {color: #333; border-color: #36F; background: rgba(51,102,255,0.08); }
.idx05.green {color: #333; border-color: #005950; background: rgba(0,89,80,0.08); }
.idx05.pink {color: #333; border-color: #C06; background: rgba(204,0,102,0.08); }
.idx05.brown {color: #333; border-color: #CE481F; background: rgba(206,72,31,0.08); }
.idx05.purple {color: #333; border-color: #644388; background: rgba(100,67,136,0.08); }
.idx05.grey {color: #333; border-color: #333; background: rgba(51,51,51,0.08); }

/* 見出し06 */
.idx06 {padding: 0.5em; background: #FFE5E5; border-left: solid 8px #C00;}
.idx06.red {color: #333; border-color: #FF2232; background: rgba(204,0,0,0.08);}
.idx06.blue {color: #333; border-color: #3CF; background: rgba(51,102,255,0.08);}
.idx06.green {color: #333; border-color: #00BF62; background: rgba(0,89,80,0.08);}
.idx06.pink {color: #333; border-color: #F39; background: rgba(204,0,102,0.08);}
.idx06.brown {color: #333; border-color: #ED682A; background: rgba(206,72,31,0.08);}
.idx06.purple {color: #333; border-color: #814EAA; background: rgba(100,67,136,0.08);}
.idx06.grey {color: #333; border-color: #CCC; background: rgba(51,51,51,0.08);}

/* 見出し07 */
.idx07.red {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ffcccc 0%);}
.idx07.blue {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #99ffff 0%);}
.idx07.green {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ccff99 0%);}
.idx07.pink {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ffccff 0%);}
.idx07.yellow {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ffff66 0%);}
.idx07.purple {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ccccff 0%);}
.idx07.grey {color: #333; padding: 0.2em 0.5em; background: linear-gradient(transparent 50%, #ddd 0%);}

/* 見出し08*/
.idx08 {margin: 0 -80px 0 -100px; position: relative; padding: 0.5em 3em;}
.idx08.red {background: #FF6B74; color: #FFF;}
.idx08.blue {background: #3CF; color: #FFF;}
.idx08.green {background: #00BF62; color: #FFF;}
.idx08.pink {background: #FF65B2; color: #FFF;}
.idx08.brown {background: #F08A5A; color: #FFF;}
.idx08.purple {background: #AB75D8; color: #FFF;}
.idx08.grey {background: #AAA; color: #FFF;}
.idx08:before {position: absolute; content: ''; top: 100%; left: 0; border: none; border-bottom: solid 15px transparent; border-right: solid 20px #C00;}
.idx08:after{position: absolute; content: '';top: 0; right: 0; width: 0px;height: 0px;border-width: 30px 15px 30px 0px; border-color: transparent #fff transparent transparent; border-style: solid; z-index: 1;}
.idx08.red:before {border-right: solid 20px #C00;}
.idx08.blue:before {border-right: solid 20px #36F;}
.idx08.green:before {border-right: solid 20px #005950;}
.idx08.pink:before {border-right: solid 20px #C06;}
.idx08.brown:before {border-right: solid 20px #CE481F;}
.idx08.purple:before {border-right: solid 20px #644388;}
.idx08.grey:before {border-right: solid 20px #333;}

/* 見出し09*/
.idx09 {position: relative; margin: 1.5em 0 1em!important; padding: .3em .5em; border-radius: 0 5px 5px 5px;}
.idx09.red {color: #333; background: rgba(204,0,0,0.1);}
.idx09.blue {color: #333; background: rgba(51,204,255,0.1);}
.idx09.green {color: #333; background: rgba(0,89,80,0.1);}
.idx09.pink {color: #333; background: rgba(204,0,102,0.1);}
.idx09.brown {color: #333; background: rgba(206,72,31,0.1);}
.idx09.purple {color: #333; background: rgba(100,67,136,0.1);}
.idx09.grey {color: #333; background: rgba(51,51,51,0.1);}
.idx09:before {position: absolute; left: 0; bottom: 100%; font-family: 'Verdana','Arial',sans-serif; content: 'Check!'; font-style: italic; border-radius: 5px 5px 0 0; padding: 3px 7px 1px; font-size: 12px; line-height: 1em; letter-spacing: .1em;}
.idx09.red:before {background: #FF2232; color: #FFF;}
.idx09.blue:before {background: #3CF; color: #FFF;}
.idx09.green:before {background: #00BF62; color: #FFF;}
.idx09.pink:before {background: #F39; color: #FFF;}
.idx09.brown:before {background: #ED682A; color: #FFF;}
.idx09.purple:before {background: #814EAA; color: #FFF;}
.idx09.grey:before {background: #333; color: #FFF;}

/* 見出し10 */
.idx10 {position: relative; margin: 20px auto; padding: 10px 0; text-align: center; display: inline-block;  z-index: 10;}
.idx10.red, .idx10.blue, .idx10.green, .idx10.pink, .idx10.brown, .idx10.purple, .idx10.grey {color: #666; font-size: 2.5em;}
.idx10:before {content: ""; position: absolute; top: 0; left: -10px; width: 30px; height: 30px; border: 3px solid #CCC; transform: rotate(-10deg); z-index: -1;}
.idx10:after {content: ""; position: absolute; bottom: 0; right: -10px; width: 80px; height: 80px; border: 3px solid #CCC; transform: rotate(10deg); z-index: -1;}
.idx10.red:before, .idx10.red:after {border-color: #ED8C97;}
.idx10.blue:before, .idx10.blue:after {border-color: #99E5FF;}
.idx10.green:before, .idx10.green:after {border-color: #BFDF9F;}
.idx10.pink:before, .idx10.pink:after {border-color: #FF99CC;}
.idx10.brown:before, .idx10.brown:after {border-color: #FFB45E;}
.idx10.purple:before, .idx10.purple:after {border-color: #D2A6CA;}
.idx10.grey:before, .idx10.grey:after {border-color: #CCC;}

/* ボタン01 */
.btn01 {display: inline-block; text-align: center; text-decoration: none;  font-size: 1.2em; line-height: 1.2em; text-decoration: none; padding: 0.8em 2em; border-radius: 8px;}
.btn01::before, .btn01::after {position: absolute; z-index: -1; display: block; content: '';}
.btn01, .btn01::before, .btn01::after { -webkit-transition: all .2s; transition: all .2s;}
.btn01 {position: relative; z-index: 2; background-color: #333; border: 2px solid #333; color: #FFF;}
.btn01:hover {background-color: #FFF;border-color: #333; color: #333;}
.btn01::before, .btn01::after {top: 0; width: 50%; height: 100%;}
.btn01::before {right: 0;}
.btn01::after {left: 0;}
.btn01:hover::before, .btn01:hover::after {width: 0; background-color: #333;}
.btn01.red {background-color: #e95454; border-color: #e95454; color: #FFF;}
.btn01.red:hover {background-color: #FFF; border-color: #e95454; color: #e95454;}
.btn01.red::before, .btn01.red::after {background-color: #e95454;}
.btn01.red:hover::before, .btn01.red:hover::after {background-color: #e95454;}
.btn01.blue {background-color: #33a8df; border-color: #33a8df; color: #FFF;}
.btn01.blue:hover {background-color: #FFF; border-color: #33a8df; color: #33a8df;}
.btn01.blue::before, .btn01.blue::after {background-color: #33a8df;}
.btn01.blue:hover::before, .btn01.blue:hover::after {background-color: #33a8df;}
.btn01.green {background-color: #2daa3f; border-color: #2daa3f; color: #FFF;}
.btn01.green:hover {background-color: #FFF; border-color: #2daa3f; color: #2daa3f;}
.btn01.green::before, .btn01.green::after {background-color: #2daa3f;}
.btn01.green:hover::before, .btn01.green:hover::after {background-color: #2daa3f;}
.btn01.pink {background-color: #cf3371; border-color: #cf3371; color: #FFF;}
.btn01.pink:hover {background-color: #FFF; border-color: #cf3371; color: #cf3371;}
.btn01.pink::before, .btn01.pink::after {background-color: #cf3371;}
.btn01.pink:hover::before, .btn01.pink:hover::after {background-color: #cf3371;}
.btn01.brown {background-color: #f19726; border-color: #f19726; color: #FFF;}
.btn01.brown:hover {background-color: #FFF; border-color: #f19726; color: #f19726;}
.btn01.brown::before, .btn01.brown::after {background-color: #f19726;}
.btn01.brown:hover::before, .btn01.brown:hover::after {background-color: #f19726;}
.btn01.purple {background-color: #8865B2; border-color: #8865B2; color: #FFF;}
.btn01.purple:hover {background-color: #FFF; border-color: #8865B2; color: #8865B2;}
.btn01.purple::before, .btn01.purple::after {background-color: #8865B2;}
.btn01.purple:hover::before, .btn01.purple:hover::after {background-color: #8865B2;}
.btn01.grey {background-color: #888; border-color: #888; color: #FFF;}
.btn01.grey:hover {background-color: #FFF; border-color: #888; color: #888;}
.btn01.grey::before, .btn01.grey::after {background-color: #888;}
.btn01.grey:hover::before, .btn01.grey:hover::after {background-color: #888;}


/* ボタン02 */
.btn02 {display: inline-block; font-size: 1.2em; color: #e95454; text-decoration: none; padding: 0.8em 2em; border: 2px solid #e95454; border-radius: .4em; -webkit-transition: all .3s; transition: all .3s;}
.btn02:hover {border-radius: 2.0em; background-color: transparent; color: #e95454;}
.btn02.red {background-color: #e95454; border-color: #e95454; color: #FFF;}
.btn02.red:hover {background-color: transparent; color: #e95454;}
.btn02.blue {background-color: #33a8df; border-color: #33a8df; color: #FFF;}
.btn02.blue:hover {background-color: transparent; color: #33a8df;}
.btn02.green {background-color: #2daa3f; border-color: #2daa3f; color: #FFF;}
.btn02.green:hover {background-color: transparent; color: #2daa3f;}
.btn02.pink {background-color: #cf3371; border-color: #cf3371; color: #FFF;}
.btn02.pink:hover {background-color: transparent; color: #cf3371;}
.btn02.brown {background-color: #f19726; border-color: #f19726; color: #FFF;}
.btn02.brown:hover {background-color: transparent; color: #f19726;}
.btn02.purple {background-color: #8865B2; border-color: #8865B2; color: #FFF;}
.btn02.purple:hover {background-color: transparent; color: #8865B2;}
.btn02.grey {background-color: #888; border-color: #888; color: #FFF;}
.btn02.grey:hover {background-color: transparent; color: #888;}

/* ボタン03 */
.btn03 {display: inline-block; font-size: 1.2em; color: text-decoration: none; padding: 0.8em 2em; border-radius: .4em;}
.btn03:hover {animation: buruburu .1s  infinite;}
.btn03.red {background-color: #e95454; color: #FFF;}
.btn03.blue {background-color: #33a8df; color: #FFF;}
.btn03.green {background-color: #2daa3f; color: #FFF;}
.btn03.pink {background-color: #cf3371; color: #FFF;}
.btn03.brown {background-color: #f19726; color: #FFF;}
.btn03.purple {background-color: #8865B2; color: #FFF;}
.btn03.grey {background-color: #888; color: #FFF;}
@keyframes buruburu {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)} }

/* ボタン04 */
.btn04 {display: inline-block; padding: 0.8em 2em; font-size: 1.2em; border: 2px solid #e95454; background-color: #e95454; color: #FFF; -webkit-transition: 0.3s; transition: 0.3s; border-radius: .4em;}
.btn04:hover {background-color: #FFF; color: #e95454; padding:1.2em 3em;}
.btn04.red {background-color: #e95454; color: #FFF; }
.btn04.red:hover {background-color: #FFF;  color: #e95454;}
.btn04.blue {border-color: #33a8df; background-color: #33a8df; color: #FFF; }
.btn04.blue:hover {background-color: #FFF;  color: #33a8df;}
.btn04.green {border-color: #2daa3f; background-color: #2daa3f; color: #FFF; }
.btn04.green:hover {background-color: #FFF;  color: #2daa3f;}
.btn04.pink {border-color: #cf3371; background-color: #cf3371; color: #FFF; }
.btn04.pink:hover {background-color: #FFF;  color: #cf3371;}
.btn04.brown {border-color: #f19726; background-color: #f19726; color: #FFF; }
.btn04.brown:hover {background-color: #FFF;  color: #f19726;}
.btn04.purple {border-color: #8865B2; background-color: #8865B2; color: #FFF; }
.btn04.purple:hover {background-color: #FFF;  color: #8865B2;}
.btn04.grey {border-color: #888; background-color: #888; color: #FFF; }
.btn04.grey:hover {background-color: #FFF;  color: #888;}

/* ボタン05 */
.btn05 {display: inline-block; padding: 0.8em 2em; font-size: 1.2em; background-color: #e95454; color: #FFF; border-radius: .4em;}
.btn05:hover{color: #FFF; background-color: #FF2232; animation: yureru 0.5s linear infinite;}
.btn05.red {color: #FFF; background-color: #e95454;}
.btn05.red:hover {background-color: #FF2232;}
.btn05.blue {color: #FFF; background-color: #33a8df;}
.btn05.blue:hover {background-color: #3CF;}
.btn05.green {color: #FFF; background-color: #2daa3f;}
.btn05.green:hover {background-color: #3BDB50;}
.btn05.pink {color: #FFF; background-color: #cf3371;}
.btn05.pink:hover {background-color: #F39;}
.btn05.brown {color: #FFF; background-color: #f19726;}
.btn05.brown:hover {background-color: #FF9626;}
.btn05.purple {color: #FFF; background-color: #8865B2;}
.btn05.purple:hover {background-color: #AD81E2;}
.btn05.grey {color: #FFF; background-color: #666;}
.btn05.grey:hover {background-color: #888;}
@keyframes yureru {
  0%{-webkit-transform: translateY(0);transform: translateY(0);}
  25%{-webkit-transform: translateY(-5px); transform: translateY(-5px);}
  75%{-webkit-transform: translateY(5px); transform: translateY(5px);}
  100%{-webkit-transform: translateX(0); transform: translateX(0);}
}

/* ボタン05 */
.btn06 {display: inline-block; padding: 0.8em 2.5em; font-size: 1.2em; background-color: #e95454; color: #FFF; border-radius: 1.4em; -webkit-transition: 0.3s; transition: 0.3s;}
.btn06.red {color: #FFF; background-color: #e95454;}
.btn06.red:hover {background-color: #FF2232;}
.btn06.blue {color: #FFF; background-color: #33a8df;}
.btn06.blue:hover {background-color: #3CF;}
.btn06.green {color: #FFF; background-color: #2daa3f;}
.btn06.green:hover {background-color: #3BDB50;}
.btn06.pink {color: #FFF; background-color: #cf3371;}
.btn06.pink:hover {background-color: #F39;}
.btn06.brown {color: #FFF; background-color: #f19726;}
.btn06.brown:hover {background-color: #FF9626;}
.btn06.purple {color: #FFF; background-color: #8865B2;}
.btn06.purple:hover {background-color: #AD81E2;}
.btn06.grey {color: #FFF; background-color: #666;}
.btn06.grey:hover {background-color: #888;}

/* ステッチ囲み枠 */
.stitch-text {border: 2px dashed #FFF; border-radius: 8px; margin: 1em 0; padding: 2em;}
.stitch-text.red {color: #FFF; background-color: #900F42; box-shadow: 0 0 0 4px #900F42;}
.stitch-text.blue {color: #FFF; background-color: #435495; box-shadow: 0 0 0 4px #435495;}
.stitch-text.green {color: #FFF; background-color: #556B2F; box-shadow: 0 0 0 4px #556B2F;}
.stitch-text.pink {color: #FFF; background-color: #D95D97; box-shadow: 0 0 0 4px #D95D97;}
.stitch-text.brown {color: #FFF; background-color: #895141; box-shadow: 0 0 0 4px #895141;}
.stitch-text.purple {color: #FFF; background-color: #644a77; box-shadow: 0 0 0 4px #644a77;}
.stitch-text.grey {color: #FFF; background-color: #6D696F; box-shadow: 0 0 0 4px #6D696F;}

/* Youtube */
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

/* 吹き出し */
.balloon {margin-bottom: 0.5em; padding: 0;}
.balloon figure {margin: 0}
.balloon:before,.balloon:after {clear: both; content: "";display: block;}
.balloon .balloon-img-left {float: left; width: 100px; margin-right: 20px;}
.balloon-img-left img {width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%;}
.balloon-img-description{ font-size: .8em; line-height: 1.5em; text-align: center;}
.balloon-txt-left {position: relative; float: left; padding: 1em; line-height: 1.5em; border: 2px solid #CCC; background-color: #D1FFF1; border-radius: 8px; max-width: calc( 100% - 220px ) ;}
.balloon-txt-left:before{position: absolute;content: ''; border: 10px solid transparent; top: 15px;left: -20px;}
.balloon-txt-left:after {position: absolute;content: ''; border: 10px solid transparent; top: 15px; left: -18px;}
.balloon .balloon-img-right {float: right; width: 100px; margin-left: 20px;}
.balloon-img-right img {width: 100px; height: 100px; border: 3px solid #CCC; border-radius: 50%;}
.balloon-txt-right {position: relative; float: right; padding: 1em; line-height: 1.5em; border: 2px solid #CCC; background-color: #FFE5F4; border-radius: 8px; max-width: calc( 100% - 220px ) ;}
.balloon-txt-right:before  {position: absolute;content: ''; border: 10px solid transparent; top: 15px;right: -20px;}
.balloon-txt-right:after {position: absolute;content: ''; border: 10px solid transparent; top: 15px; right: -18px;}
.balloon-img-description.red-waku{color: #C00;}
.balloon-txt-left.red-waku, .balloon-txt-right.red-waku {border-color: #C00; background-color: #fff3f4;}
.balloon-txt-left.red-waku:before {border-right: 10px solid #C00;}
.balloon-txt-left.red-waku:after {border-right: 10px solid #fff3f4;}
.balloon-txt-right.red-waku:before {border-left: 10px solid #C00;}
.balloon-txt-right.red-waku:after {border-left: 10px solid #fff3f4;}
.balloon-img-description.blue-waku{color: #33a8df;}
.balloon-txt-left.blue-waku, .balloon-txt-right.blue-waku {border-color: #33a8df; background-color: #FAFDFE;}
.balloon-txt-left.blue-waku:before {border-right: 10px solid #33a8df;}
.balloon-txt-left.blue-waku:after {border-right: 10px solid #FAFDFE;}
.balloon-txt-right.blue-waku:before {border-left: 10px solid #33a8df;;}
.balloon-txt-right.blue-waku:after {border-left: 10px solid #FAFDFE;}
.balloon-img-description.green-waku {color: #2daa3f;}
.balloon-txt-left.green-waku, .balloon-txt-right.green-waku {border-color: #2daa3f; background-color: #F2FBF4;}
.balloon-txt-left.green-waku:before {border-right: 10px solid #2daa3f;}
.balloon-txt-left.green-waku:after {border-right: 10px solid #F2FBF4;}
.balloon-txt-right.green-waku:before {border-left: 10px solid #2daa3f;}
.balloon-txt-right.green-waku:after {border-left: 10px solid #F2FBF4;}
.balloon-img-description.pink-waku{color: #FF6699;}
.balloon-txt-left.pink-waku, .balloon-txt-right.pink-waku {border-color: #FF6699; background-color: #fff7fa;}
.balloon-txt-left.pink-waku:before {border-right: 10px solid #FF6699;}
.balloon-txt-left.pink-waku:after {border-right: 10px solid #fff7fa;}
.balloon-txt-right.pink-waku:before {border-left: 10px solid #FF6699;}
.balloon-txt-right.pink-waku:after {border-left: 10px solid #fff7fa;}
.balloon-img-description.purple-waku{color: #A757A8;}
.balloon-txt-left.purple-waku, .balloon-txt-right.purple-waku {border-color: #A757A8; background-color: #F6EEF6;}
.balloon-txt-left.purple-waku:before {border-right: 10px solid #A757A8;}
.balloon-txt-left.purple-waku:after {border-right: 10px solid #F6EEF6;}
.balloon-txt-right.purple-waku:before {border-left: 10px solid #A757A8;}
.balloon-txt-right.purple-waku:after {border-left: 10px solid #F6EEF6;}
.balloon-img-description.white-waku{color: #333;}
.balloon-txt-left.white-waku, .balloon-txt-right.white-waku{border-color: #333; background-color: #FCFCFC;}
.balloon-txt-left.white-waku:before {border-right: 10px solid #333;}
.balloon-txt-left.white-waku:after {border-right: 10px solid #FCFCFC;}
.balloon-txt-right.white-waku:before {border-left: 10px solid #333;}
.balloon-txt-right.white-waku:after {border-left: 10px solid #FCFCFC;}

/* 囲み枠 */
.framed-text {position: relative; margin: 1em auto; padding: 1.5em; border: 3px solid #C00; background-color: #fff3f4; border-radius: 8px;  -webkit-box-sizing: border-box; box-sizing: border-box;}
.framed-text.red {color: #222; border-color: #C00; background-color: #fff3f4;}
.framed-text.blue {color: #222; border-color: #33a8df; background-color: #FAFDFE;}
.framed-text.green {color: #222; border-color: #2daa3f; background-color: #F2FBF4;}
.framed-text.pink {color: #222; border-color: #FF6699; background-color: #fff7fa;}
.framed-text.brown {color: #222; border-color: #CB8E33; background-color: #F9F3EA;}
.framed-text.purple {color: #222; border-color: #A757A8; background-color: #F6EEF6;}
.framed-text.grey {color: #222; border-color: #777; background-color: #F5F5F5;}
/* 囲み枠タイトル付き */
.framed-title {position: absolute; padding: .2em 1em; line-height: 1.4em; left: 1em; top: -1em; font-weight: bold;  background-color: #C00; color: #FFF; border-radius: 6px;}
.framed-title.red {background-color: #C00;; color: #FFF;}
.framed-title.blue {background-color: #33a8df; color: #FFF;}
.framed-title.green {background-color: #2daa3f; color: #FFF;}
.framed-title.pink {background-color: #FF6699; color: #FFF;}
.framed-title.brown {background-color: #CB8E33; color: #FFF;}
.framed-title.purple {background-color: #A757A8; color: #FFF;}
.framed-title.grey {background-color: #777; color: #FFF;}
/* 囲み枠タイトル付き(WIDE) */
.framed-widetitle {position: absolute; width: calc(100% + 6px); padding: .5em 1em; left: -3px; top: -1.9em; font-weight: bold; background-color: #C00; font-size: 1.5em; line-height: 1.4em; color: #FFF; text-align: center; border-radius: 6px 6px 0 0;}
.framed-widetitle.red {background-color: #C00;; color: #FFF;}
.framed-widetitle.blue {background-color: #33a8df; color: #FFF;}
.framed-widetitle.green {background-color: #2daa3f; color: #FFF;}
.framed-widetitle.pink {background-color: #FF6699; color: #FFF;}
.framed-widetitle.brown {background-color: #CB8E33; color: #FFF;}
.framed-widetitle.purple {background-color: #A757A8; color: #FFF;}
.framed-widetitle.grey {background-color: #777; color: #FFF;}

/* チェック付きリスト */
ul.check {padding: .5em 1em;}
ul.check li {list-style: none; position: relative; padding: 0.2em 1.2em; font-size: 1.0em; line-height: 1.8em; color: black;}
ul.check li:before {position: absolute; left: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f14a";}
ul.check li.red:before {color: #FF2232;}
ul.check li.blue:before {color: #3CF;}
ul.check li.green:before {color: #00BF62;}
ul.check li.pink:before {color: #F39;}
ul.check li.brown:before {color: #ED682A;}
ul.check li.purple:before {color: #814EAA;}
ul.check li.grey:before {color: #666;}

@media screen and (max-width: 979px) {
  .idx08 {margin: 0 -6% 0 -9%; padding: 0.5em 1em;}
}

@media screen and (max-width: 767px) {
  .idx08 {margin: 0 -12% 0 -12%; padding: 0.5em 1.5em;}
  .idx08:before, .idx08:after {border-width: 0;}
  .idx10.red, .idx10.blue, .idx10.green, .idx10.pink, .idx10.brown, .idx10.purple, .idx10.grey {font-size: 2.0em;}
} 

@media screen and (max-width: 479px) {
  .btn-align .item {width: 100%; padding: 5px 0; text-align: center;}
  .idx08 {margin: 0 -6% 0 -6%; padding: 0.5em 1em;}
  .idx08:before, .idx08:after {border-width: 0;}
  .idx10.red, .idx10.blue, .idx10.green, .idx10.pink, .idx10.brown, .idx10.purple, .idx10.grey {font-size: 1.8em;}
  #contents .doc p {padding: 0;}
  /*  囲み枠  */
  .framed-text {padding: 1.5em 1em;}
  .framed-widetitle { font-size: 1.2em;}
  /* チェック付きリスト */
  ul.check {padding: .5em;}
  /*  バルーン  */
  .balloon .balloon-img-left {width: 60px; margin-right: 8px;}
  .balloon-img-left img {width: 60px; height: 60px;}
  .balloon-txt-left {max-width: calc( 100% - 70px ) ;}
  .balloon .balloon-img-right {width: 60px; margin-left: 8px;}
  .balloon-img-right img {width: 60px; height: 60px;}
  .balloon-txt-right {max-width: calc( 100% - 70px ) ;}
}