* {-webkit-box-sizing: border-box; box-sizing: border-box;}
 
 /* 見出し01 */
.idx01 {position: relative; margin-left: .2em; padding: 0.2em 0 0 1.2em; line-height: 1.8em;}
.idx01.red, .idx01.blue, .idx01.green, .idx01.pink, .idx01.brown, .idx01.purple, .idx01.grey {color: #333;}
.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; line-height: 1.8em; background: #F2F2F2; border-radius: .2em; display: block} 
.idx02.red, .idx02.blue, .idx02.green, .idx02.pink, .idx02.brown, .idx02.purple, .idx02.grey {color: #333;}
.idx02:before {position: absolute; left: .5em; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f138';}
.idx02.red:before {color: #ED8C97;}
.idx02.blue:before {color: #99E5FF;}
.idx02.green:before {color: #BFDF9F;}
.idx02.pink:before {color: #FF99CC;}
.idx02.brown:before {color: #FFB45E;}
.idx02.purple:before {color: #D2A6CA;}
.idx02.grey:before {color: #CCC;}

/* 見出し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;}

/* 整列用 */
.btn-align {margin: 10px 0; letter-spacing: -.4em;}
.btn-align .item {display: inline-block; vertical-align: top; width: 33.33%; margin: 0; padding: 5px 2px; text-align: center; letter-spacing: 0; overflow: hidden;}

@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;}
}