@charset "utf-8";

/* default */

body {
  font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #333;
  font-size: 16px;
  line-height: 1.5em;
  background-color: #fff;
  word-break: break-all;
}

.mincho {
  font-family: "ryo-display-plusn", 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
  font-size: 2.2rem;
  line-height: 1em;
}
.naname {
  font-style: oblique;
}
p {
  line-height: 180%;
  padding:3%;
}
p.desc {
  line-height: 200%;
}
h1.lp03top {
  border-top:none;
  background:none;
}

pad1 {padding:10px 0}
pad2 {padding:20px 0}
pad3 {padding:30px 0}
mar0 {margin:0 !important;}
mar0b {margin-bottom:0 !important;}
mar1 {margin:10px 0}
mar2 {margin:20px 0}
mar3 {margin:30px 0}

.lh1-5 {line-height: 150%}
.lh2 {line-height: 200%}
.lh2-5 {line-height: 250%}
.lh3 {line-height: 300%}
.lh3-5 {line-height: 350%}
.lh4 {line-height: 400%}
.red {color:#f0506e !important;}
.red2 {color:#dc143c !important;}
.red3 {color:#FF0000 !important;}
.pnk {color: #FF3265 !important;}
.bl  {color: #1e87f0 !important;}
.bl2 {color: #153084 !important;}
.ye  {color: #faa05a !important;}
.ye2 {color: #FCF000 !important;}
.gr  {color: #32d296 !important;}
.or  {color: #F7A069 !important;}
.brw  {color: #8b4513 !important;}
.black {color: #222 !important;}
.ccc {color: #ccc !important;}
.fff {color: #fff !important;}
.b {font-weight: bold}
.n {font-weight: normal}
.b2 {font-weight: bold;font-size:1.2em;}
.b3 {font-weight: bold;font-size:1.3em;}
.b4 {font-weight: bold;font-size:1.4em;}
.b5 {font-weight: bold;font-size:1.5em;}
.b6 {font-weight: bold;font-size:1.6em;}
.b7 {font-weight: bold;font-size:1.7em;}
.b8 {font-weight: bold;font-size:1.8em;}
.b9 {font-weight: bold;font-size:1.9em;}
.b10 {font-weight: bold;font-size:2em;}
.b11 {font-weight: bold;font-size:2.1em;}
.b12 {font-weight: bold;font-size:2.2em;}
.b13 {font-weight: bold;font-size:2.3em;}
.b14 {font-weight: bold;font-size:2.4em;}
.b15 {font-weight: bold;font-size:2.5em;}
.b16 {font-weight: bold;font-size:2.6em;}
.b17 {font-weight: bold;font-size:2.7em;}
.b18 {font-weight: bold;font-size:2.8em;}
.b19 {font-weight: bold;font-size:2.9em;}
.b20 {font-weight: bold;font-size:3em;}
.f8 {font-size:8px;}
.f9 {font-size:9px;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.underline {
  text-decoration-line: underline;
}
.under-r {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
  padding-bottom:2px;
}
.under-y {
  background: linear-gradient(transparent 70%, #ffff00 70%);
  padding-bottom:2px;
}
.under-b {
  background: linear-gradient(transparent 60%,#CCF2FF 60%);
}
.under-r2 {
  background: linear-gradient(transparent 60%,#ffd0d1 60%);
}
.under-r3 {
  background: linear-gradient(transparent 10%,#ffd0d1 10%);
}
.under-y2 {
  background: linear-gradient(transparent 60%,#ff9 60%);
}
.under-y3 {
  background: linear-gradient(transparent 10%,#ff9 10%);
}
.under-y4 {
background: repeating-linear-gradient(-45deg,#fcf69f,#fcf69f 2px,transparent 2px,transparent 4px) no-repeat 0 .75em;
display: inline;
padding: 2px;
}


.syasen {
  text-decoration: line-through;
}

.blink {
	-webkit-animation: blink 1s ease infinite;
	animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.blinks15 {
	-webkit-animation: blink 1s ease infinite;
	animation: blink 1.5s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.blinks3 {
	-webkit-animation: blink 0.3s ease infinite;
	animation: blink 0.31s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.txt-center {display:block;text-align:center;}
.txt-left {display:block;text-align:left;}
.txt-right {display:block;text-align:right;}
.kadomaru-5 {border-radius: 5px;}
.kadomaru-10 {border-radius: 5px;}
.redbox {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#ffe5e5;
  display: block;
}
.redboxin {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#ffe5e5;
  display: inline-block;
}
.greenbox {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#efffef;
  display: block;
}
.greenboxin {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#efffef;
  display: inline-block;
}
.yellowbox {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#ffffea;
  display: block;
}
.yellowboxin {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#ffffea;
  display: inline-block;
}
.bluebox {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#e5ffff;
  display: block;
}
.blueboxin {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#e5ffff;
  display: inline-block;
}
.graybox {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#f3f3f3;
  display: block;
}
.grayboxin {
  font-size:12px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  background:#f3f3f3;
  display: inline-block;
}
.redbox2 {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  color:#F76735;
  border:2px solid #F76735;
  display: block;
  background:#fff;
}
.redbox2in {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  color:#F76735;
  border:2px solid #F76735;
  background:#fff;
}
.greenbox2 {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  color:#2FB6A9;
  border:2px solid #2FB6A9;
  display: block;
  background:#fff;
}
.greenbox2in {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  color:#2FB6A9;
  border:2px solid #2FB6A9;
  background:#fff;
  display: inline-block;
}
.yellowbox2 {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #D7B43D;
  color:#D7B43D;
  display: block;
  background:#fff;
}
.yellowbox2in {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #D7B43D;
  color:#D7B43D;
  background:#fff;
  display: inline-block;
}
.bluebox2 {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #2B5E8E;
  color:#2B5E8E;
  display: block;
  background:#fff;
}
.bluebox2in {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #2B5E8E;
  color:#2B5E8E;
  background:#fff;
  display: inline-block;
}
.graybox2 {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #333;
  color:#333;
  display: block;
  background:#fff;
}
.graybox2in {
  font-size:10px;
  font-weight:bold;
  border-radius:8px;
  padding:2px 4px;
  margin:2px;
  border:2px solid #333;
  color:#333;
  background:#fff;
  display: inline-block;
}

.bg-green {
  background: #D4EDDA;
  color: #145724;
  padding: 20px;
}
.bg-red {
  background: #FFE4E1;
  color: #FF4F50;
  padding: 20px;
}
.bg-gray {
  background: #ccc;
  color: #666;
  padding: 20px;
}
.bg-blue {
  background: #CFE1E9;
  color: #095765;
  padding: 20px;
}
.bg-yellow {
  background: #FFF3CD;
  color: #856403;
  padding: 20px;
}

a {
  color: #3273dc;
}

a:hover {
  color: #dc1d1d;
}
.has-text-primary{
  color: #d3182b!important;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a, a:visited, a:hover, a:active {
  text-decoration: none;
}

::selection {
  color: #fff;
  background: #d3182b;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.slider-area li:before {
  content: none;
}

h2 {
  position: relative;
  background-color: #F25757;
  border-left: 5px solid #ffe4e1;
  color: #fff;
  overflow: hidden;
  padding: .8rem 1rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight:bold;
  line-height: 120%;
}

h3 {
  position: relative;
  font-size: 1.3rem;
  overflow: hidden;
  padding: .5rem 0;
  margin-bottom: 1rem;
}

h3::before, h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left:0;
}

h3:before {
  border-bottom: 4px solid #F25757;
  width: 5em;
  z-index:10;
}

h3:after {
  border-bottom: 4px solid #e6e6e6;
  width: 100%;
  display:block;
}

h4 {
  font-size: 1.2rem;
  border-left: 5px solid #d3182b;
  padding-left: 10px;
  margin-bottom: .5rem;
}

h5 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #0c1454;
  margin-bottom: .5rem;
}

h6 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: .5rem;
}

ul {
  padding-left: 1.5em;
  margin: 1em 0 2em;
}

ul.inline li {
  display: inline-block;
  margin-right: 2.5em;
}

p, dd {
  margin: 0;
}

strong {
  font-size: 1.1em;
  font-weight: bold;
  color: #54a3d6;
}

hr {
  clear: both;
  margin: 4em 0;
}

table {
  max-width: 640px;
  width: 100%;
  table-layout: fixed;
  margin: 1em 0;
  vertical-align: middle;
  font-size: .9rem;
}

table th {
  text-align: center;
  width: 30%;
  background-color: #d3182b;
  vertical-align: middle;
  padding: 1em;
  color: #fff;
  border: 1px solid #f9f9f9;
}

table td {
  vertical-align: middle;
  padding: 1rem;
  border: 1px solid #f9f9f9;
  line-height: 1.5;
  background-color: #fff;
}

.table td, .table th {
  padding: 1rem;
  vertical-align: middle;
}

@media (max-width: 640px) {
  table.sp-block, table.sp-block thead, table.sp-block tbody, table.sp-block tr, table.sp-block th, table.sp-block td {
    display: block;
    width: auto!important;
  }
  table.sp-block th {
    border-bottom: none;
    padding: .4em 0;
  }
  table.sp-block td {
    border-bottom: none;
  }
  table.sp-block {
    border-bottom: 1px solid #ddd;
  }
}

table ul {
  padding: 0;
}


/* header */

header {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.08);
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 100;
  top: 0;
  left: 0;
}

header .navbar-brand {
  display: block;
}

header .navbar-item {
  display: block;
}

header .navbar-item span.is-size-7 {
  font-size: .8rem;
  color: #d3182b;
  display: block;
}

header nav {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  align-items: center;
}

header nav .logo {
  padding-left: 1rem;
}


/* end/header */


/* hero */

.hero {
  margin-top: 72px;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .hero {
    margin-top: 50px;
  }
}

.hero h1 {
  position: absolute;
  top: 14%;
  left: 9%;
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
}

.hero .sub h1 {
  top: 50%;
  margin-top: -1em;
}

.hero .main_img img {
  width: 100%;
}

@media screen and (min-width: 1600px) {
  .hero h1 {
    font-size: 66px;
  }
}


/* end/hero */


/* main */

main {
  position: relative;
  max-width: 700px;
  margin: 2rem auto 0;
  background: #fff;
  width: 100%;
}

.main {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
}

.main .main_col {
  width: 62%;

}

main h2.rank_title {
  font-size: 2.1vw;
  font-weight: bold;
  margin: 0;
  background: none;
  color: #333;
  padding: 0;
  display:block;
  background: linear-gradient(transparent 80%, #ffdfb8 20%) left -.7em;
}
main h2.rank_title:after{
  display:block;
  content:"";
  widht:100%;
  height:1.5rem;
}

main h2.rank_title:before {
  content: none;
}

main h2.rank_title svg {
  color: #fff40e;
  font-size: 3vw;
}

@media screen and (min-width: 800px) {
  .main .main_col h2 {
    font-size: 26px;
  }
  main h2.rank_title svg{
    color: #fff40e;
    font-size: 50px;
  }
}

.main .side_col {
  width: 38%;
  padding: .8rem;
  margin-left:.2rem;
}


/* rank_area */

.rank {
  background-color: #f8f8f8;
  position: relative;
  margin-bottom: 3rem;
}

.rank_number {
  position: absolute;
  top: -6px;
  left: 25px;
  width: 60px;
  padding: 10px 0;
  text-align: center;
  text-align: center;
  border-top-left-radius: 3px;
  color: #ffffff;
  background: #d3182b;
}

.rank_number svg {
  color: #fff40e;
  font-size: 27px;
  display: block;
  margin: 0 auto;
}

.rank_number:before {
  top: 0.1px;
  right: -6px;
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #133246;
}

.rank_number:before, .rank_number:after {
  position: absolute;
  content: '';
}

.rank_number:after {
  bottom: -28.5px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 30px solid #d3182b;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #d3182b;
}

.rank h3.rtit {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: bold;
  padding: 1rem 0 1.5rem 100px;
  margin: 0;
}

.rank h3.rtit:before, .rank h3.rtit:after {
  content: none;
}

.rank_middle {
  margin: .6rem 0 1rem 0;
  padding: 0 1rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
}

.rank_middle .rank_img {
  /*width: 48%;*/
  width: 96%;
  margin: 0 auto;
}

.rank_middle .rank_lead {
  width: 48%;
}

.rank_bottom {
  margin: 1rem 0;
  padding: 0 1.5rem 1.5rem;
}

.rank_bottom th {
  width: 10em;
}

.search .more {
  display: inline-block;
}

.search .more:focus {
  outline: none;
}


.more, .site, .site2, .site3 {
  display: block;
  text-align: center;
  background-color: #d4182b;
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  border-bottom: 4px solid #2c867b;
  transition: .4s;
}

.site {
  background-color: #FF9800;
  border-bottom: 4px solid #c17300;
}

.site2 {
  background-color: #F76C68;
  border-bottom: 4px solid #c14646;
}
.site3 {
  background-color: #0095D9;
  border-bottom: 4px solid #4285AB;
}

.more:active, .site:active {
  transform: translateY(4px);
  border-bottom: none;
}

.more:hover {
  background-color: #2c867b;
  color: #fff;
}

.site:hover {
  background-color: #ff7600;
  color: #fff;
}


/*光る演出*/

.site,.site2,.site3 {
  position: relative;
  overflow: hidden;
  max-width: 340px;
  margin:0 auto;
}

.site:after {
  content: '';
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 3s ease-in-out infinite;
}

@-webkit-keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.btn_area {
  min-height: 5rem;
}

.rank .table {
  border: 1px solid #ddd;
}

.rank .table th {
  width:9.2em;
  background-color:#eee;
  text-align:center;
  padding:1rem .5em;
  line-height:1.5;
}
.rank .table td {
  padding:1rem .5em;
}
.rank .table .is-selected {
  font-size: 1.4rem;
  text-align:center;
  background-color: #fff1d6;
  color: #d3182b;
  font-weight: bold;
}

.rank .table strong {
  color: #d3182b;
  font-size: 1.2rem;
}
@media screen and (max-width: 640px) {
  .rank .table {
    font-size:.8em;
  }
  .rank .table th {
    width:6em;
    background-color:#eee;
    text-align:center;
    padding:1rem .3em;
  }
  .rank .table td {
    padding:1rem .3em;
  }
  .rank .table strong {
    color: #d3182b;
    font-size: .8rem;
  }
  .rank .table .is-selected strong{
    font-size:1.4rem;
  }
}


/* end/rank_area */


/* osusume */

.cp_point, .list01 {
  position: relative;
  margin: 2rem 0;
  padding: 2rem 1.5rem 1.5rem;
  border: 3px double #da3c41;
  background-color: #fffafa;
  border-radius: 10px;
}

.cp_point li, .list01 li {
  position: relative;
  padding: 0 0 0 .2em;
  margin-bottom: 1em;
  list-style-type: none;
  font-weight: bold;
}

.cp_point li svg, .list01 li svg {
  color: #da3c41;
  position: absolute;
  top: .4em;
  left: 0;
}

ul.list01 li:before{
  /*font-family: "Font Awesome 5 Free";*/
  content: "▶︎";
  color:#f0506e;
  padding-right: 5px;
  font-size:0.5em;
}


.list02 {
    padding: 1em;
    margin: 0px;
    list-style: none;
    border: 2px solid #EF9A9A;
    border-radius: 4px;
    background: #FFEBEE;
}
.list02 > li {
    font-size:1.1em;
    position: relative;
    padding: 5px 0px 10px 2em;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px dashed #bbb;
}
.list02 > li::before, .list02 > li::after {
    position: absolute;
    top: 50%;
    height: 1.3em !important;
    content: "";
}
.list02 > li::before {
    left: 0px;
    transform: translateY(-50%);
    width: 1.3em;
    border: 2px solid #bbb;
}
.list02 > li::after {
    left: 0.5em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.6em;
    border-bottom: 3px solid #FF0202;
    border-right: 3px solid #FF0202;
}

.list03 {
    padding: 1em;
    margin: 0px;
    list-style: none;
    border: 2px solid #D1A49A;
    border-radius: 4px;
    background: #FDFCFC;
}
.list03 > li {
    font-size:1.1em;
    position: relative;
    padding: 5px 0px 10px 2em;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px dashed #D1A49A;
}
.list03 > li::before, .list03 > li::after {
    position: absolute;
    top: 50%;
    height: 1.3em !important;
    content: "";
}
.list03 > li::before {
    left: 0px;
    transform: translateY(-50%);
    width: 1.3em;
    border: 2px solid #bbb;
}
.list03 > li::after {
    left: 0.5em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.6em;
    border-bottom: 3px solid #FF0202;
    border-right: 3px solid #FF0202;
}

.list04 {
    padding: 1em;
    margin: 0px;
    list-style: none;
    border: 2px solid #EF9A9A;
    border-radius: 4px;
    background: #FFEBEE;
}
.list04 > li {
    font-size:1.1em;
    position: relative;
    padding: 5px 0px 10px 2em;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px dashed #bbb;
}
.list04 > li::before,
.list04 > li::after {
    position: absolute;
    top: 50%;
    height: 1.3em !important;
    content: "";
}
.list04 > li::before {
    left: 0px;
    transform: translateY(-50%);
    width: 1.3em;
    border: 2px solid #bbb;
}
.list04 > li::after {
    left: 0.5em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.6em;
    border-bottom: 3px solid #FF0202;
    border-right: 3px solid #FF0202;
}



.osusume {
  position: relative;
  margin-top:20px;
}

.osusume h4 {
  display: inline-block;
  position: absolute;
  top: -1em;
  left: 1rem;
  z-index: 10;
  color: #fff;
  background-color: #da3c41;
  border-radius: 20px;
  padding: .2em 1em .3em 2.5em;
  overflow: hidden;
  border-left: none;
}

.osusume h4 span {
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  width: 1.8em;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}

.maker {
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  background: linear-gradient(transparent 60%, #ffff66 60%);
  background-size: 100% 50%;
  background-position: left .5em;
  background-repeat: no-repeat;
}


/* end/osusume */


/* voice */


/*クリップメモ*/

.clip-memobox {
  display: table;
  background: #f3f3f3;
  border-radius: 3px;
  margin-bottom: 1rem;
  padding: 1rem .5rem;
}

.clip-fonticon, .clip-memotext {
  display: table-cell;
  vertical-align: middle;
}

.clip-fonticon {
  padding: 0 .8rem 0 .5rem;
  text-align: center;
}

.clip-memotext p:last-child {
  margin-bottom: 0;
}

.clip-memotext p {
  margin-bottom: 1rem;
}

.clip-memotext {
  padding-left: .8rem;
  border-left: 1px solid #E0E0E0;
  width: 100%;
  box-sizing: border-box;
}


/*ミニふきだし*/

.post .st-minihukidashi, .st-minihukidashi {
  font-size: 100%;
  display: inline-block;
  position: relative;
  background: #f3f3f3;
  line-height: 1.4;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 2;
}

.post .st-minihukidashi span, .st-minihukidashi span {
  content: '';
  position: absolute;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #f3f3f3;
  top: 100%;
  left: 40px;
}

.st-minihukidashi .fa {
  margin-right: 5px;
}

.voice_men .st-minihukidashi {
  background: #74b4e2;
  color: #fff;
  font-size: .8rem;
  margin: 0 0 0 -9px;
}

.voice_men .st-minihukidashi span {
  border-top-color: #74b4e2;
}

.voice_men .clip-memobox {
  background-color: #E3F2FD;
}

.voice_men .clip-fonticon {
  color: #74b4e2;
  font-size: 2rem;
}

.voice_men .clip-memotext {
  border-color: #74b4e2;
}



.voice_none .st-minihukidashi {
  background: #949494;
  color: #fff;
  font-size: .8rem;
  margin: 0 0 0 -9px;
}

.voice_none .st-minihukidashi span {
  border-top-color: #949494;
}

.voice_none .clip-memobox {
  background-color: #ececec;
}

.voice_none .clip-fonticon {
  color: #949494;
  font-size: 2rem;
}

.voice_none .clip-memotext {
  border-color: #949494;
}


.voice_women .st-minihukidashi {
  background: #fc9d9d;
  color: #fff;
  font-size: .8rem;
  margin: 0 0 0 -9px;
}

.voice_women .st-minihukidashi span {
  border-top-color: #fc9d9d;
}

.voice_women .clip-memobox {
  background-color: #FCE4EC;
}

.voice_women .clip-fonticon {
  color: #fc9d9d;
  font-size: 2rem;
}

.voice_women .clip-memotext {
  border-color: #fc9d9d;
}


/* end/voice */


/* end/main */


/* search */

.search {
  background-color: #d3182b;
  padding: 0;
  transition: .4s;
}

.search.open {
  padding: 0 0 2rem;
}

.search h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  margin: 0;
  padding: 2rem 1.5rem;
  cursor: pointer;
  transition: .4s;
}

.search h2:hover {
  background-color: #d3182b;
}

.search h2 .plus {
  float: right;
  transition: .2s;
}

.search h2.open .plus {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.search h2:before {
  content: none;
}

.search_area {
  background-color: #fff;
  padding: 1rem;
  margin: 0 1.5rem;
}


/* end/search */


/* side_rank */

.side_col .rank_img a {
  color:#333;
}

.side_col .rank_img a svg {
  color: #fff40e;
}

.side_rank h3 {
  margin: 0;
}

.side_rank {
  border-top: 1px dotted #cacaca;
  margin-top: 2rem;
  padding-top: 2rem;
}

.side_rank ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side_rank ul li a {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #e6e6e6;
  color:#333;
  transition: .4s;
}

.side_rank ul li a:hover {
  background-color: #dcdcdc;
}

.side_rank ul li .tmb {
  width: 20%;
}

.side_rank ul li .tmb img {
  height:50px;
}

.side_rank ul li h4 {
  width: 78%;
  border: none;
  font-size: 1.1rem;
}

.side_rank ul li h4 span {
  font-size: 1rem;
  display: block;
  font-weight: bold;
  color: #d3182b;
}


/* side_rank */


/* side_list */

.side_list {
  margin-top: 2rem;
}

.side_list h3 {
  margin: 0;
}

.side_list ul {
  padding: 0;
  margin: 0;
}

.side_list ul li a {
  display: block;
  padding: 1rem 2rem 1rem .5rem;
  position: relative;
  border-bottom: 1px solid #ececec;
  color: #333;
  transition: .4s;
}

.side_list ul li a svg {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  right: .5rem;
  color: #d3182b;
}

.side_list ul li a:hover {
  background-color: #eef9ff;
}


/* side_list */


/* footer */

.footer {
  text-align: center;
  background-color: #fff0f5;
  color: #666;
  margin-top: 5rem;
}

.footer ul {
  margin: 0;
  padding: 0;
}

.footer ul li {
  display: inline-block;
  margin: 1rem;
}

.footer ul li a {
  color: #333;
}


/* end/footer */


/* sub_page */

.list_item {
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid #f3e5e5;
}

.list_item .tmb {
  margin-bottom: 1rem;
}

.flex{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items:center;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
.flex .tmb{
  width:40%;
  border:1px solid #eee;
}
.flex .text{
  width:58%;
}


@media screen and (max-width: 640px) {
  .flex .tmb{
    width:60%;
    margin:0 auto;
    border:1px solid #eee;
  }
  .flex .text{
    width:100%;
  }
}

.detail .main_col {
  padding: 0;
}

.detail .main_col .main_inner {
  padding: 1.5rem;
}


/* end/sub_page */


/* smartphone */

.cp_fullscreenmenu input {
  display: none;
}
.cp_fullscreenmenu ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
}
.cp_fullscreenmenu ul li a {
  padding: 1.5rem 1rem;
  transition: .4s;
}
.cp_fullscreenmenu ul li a:hover {
  background-color: #00d1b2;
  color: #fff;
}
.menu .rank_menu a {
  color: #fff;
  background-color: #ff9800;
}
.menu .point a {
  color: #fff;
  background-color: #00d1b2;
}
.menu .support a {
  color: #fff;
  background-color: #d3182b;
}
.menu .rank_menu a:hover {
  background-color: #ff6a00;
}
.menu .support a:hover {
  background-color: #00b1ff;
}
.menu .point a:hover {
  background-color: #9FE390;
}
@media screen and (min-width: 681px) {
  .sp-only {
    display: none;
  }
}
@media screen and (max-width: 680px) {
  .pc-only {
    display: none;
  }
  .main {
    display: block;
  }
  .main .main_col {
    width: 100%;
    border-right: none;
    padding:0 .5em;
  }
  .main .side_col {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .logo .is-size-4 {
    font-size: 3.4vw!important;
  }
}

@media screen and (max-width: 640px) {
  .logo .is-size-4 {
    font-size: 3.4vw!important;
  }
  header nav .logo{
    padding-left:.5rem;
  }
  .logo .has-text-primary{
    font-size:2.1vw;
  }
  .cp_fullscreenmenu ul li a{
    font-size:2.5vw;
    padding: .5rem;
    line-height:1;
  }
  .cp_fullscreenmenu ul li a svg{
    display:block;
    font-size: 1.5em;
    margin:0 auto .5rem;
  }
  .search h2 {
    font-size: 4.6vw;
    padding: 1rem 1.5rem;
  }
  main h2.rank_title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
  main h2.rank_title svg {
    font-size: 2rem;
  }
  .main .main_col, .main .side_col {
    /*padding: 1.5rem 1rem;*/
    padding:0;
  }
  .detail .main_col {
    padding: 0;
  }
  .detail .main_col .main_inner {
    /*padding: 1.5rem 1rem;*/
  }
  .rank_number {
    left: 15px;
  }
  .rank h3.rtit {
    padding-left: 88px;
  }
  .rank_middle {
    padding: 0 0.5rem;
  }
  .rank_bottom {
    padding: 0 .5rem 1.5rem;
  }
  .rank_middle .rank_img {
    width: 100%;
  }
  .rank_middle .rank_lead {
    width: 100%;
    margin-top: .5em;
    line-height: 180%;
  }
  .rank h3.rtit {
    font-size: 1.8rem;
  }
  .footer {
    padding: 0 0 2rem;
  }
  .footer ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  .footer ul li {
    width: 50%;
    margin: 0;
  }
  .footer ul li a {
    display: block;
    padding: 1em 0;
    border-top:1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #FC9D9D;
    color: #fff!important;
  }
  .table.is-striped th {
    background: none;
    text-align: center;
    width: 9em;
    padding: .5rem;
  }
  .table.is-striped td {
    padding: .5rem;
  }
  .table.is-striped .is-selected {
    font-size: 1.3rem;
  }
  .more, .site {
    padding: 1rem .5rem;
  }
  .cp_point, .list01 {
    padding: 1rem 1rem 0rem;
  }
  .detail .main_col .main_inner {
    padding: 1.5rem 1rem;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 16px;
  }
  .section {
    padding: 0;
  }

  .main .main_col, .main .side_col {
    /*padding: 1.5rem .6rem;*/
  }
  .search_area {
    margin: 0 1rem;
    padding: .5rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  .detail .main_col {
    padding: 0;
  }
  .detail .main_col .main_inner {
    padding: 1.5rem .5rem;
  }
}

.hikaku{
  overflow-x:scroll;
  margin-bottom:2rem;
}
.hikaku table{
  table-layout:auto;
  width: 760px;
  font-size: 0.8rem;
}
.hikaku table th{
  width: 10em;
  color:#333;
  font-weight:normal;
  padding:1rem .5rem;
  background-color:#f3f3f3;
}
.hikaku table td{
  max-width: 8em;
  padding:1rem 5px;
  text-align:center;
}
.hikaku table td span.rbig{
  font-size:1.1rem;
  font-weight:bold;
  color:#d3182b;
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

.hikaku table tr:nth-of-type(1) td{
  font-size:1rem;
  color:#d3182b;
  font-weight:bold;
}
.hikaku table tr:nth-of-type(1) td svg{
  display:block;
  margin:0 auto;
  font-size:1.5rem;
  color:#fff40e;
}
.hikaku table tr td:nth-of-type(1) {
    border-left: 3px solid #dc143c;
    border-right: 3px solid #dc143c;
}
.hikaku table tr:first-of-type td:nth-of-type(1) {
    border-top: 3px solid #dc143c;
}
.hikaku table tr:last-of-type td:nth-of-type(1) {
    border-bottom: 3px solid #dc143c;
}

.hikaku table td .site{
  font-size:.8rem;
  padding:1rem 0.2rem;
}
/*
.hikaku table tr:nth-of-type(3) td:nth-of-type(1){
  background-color:#ffd7d7;
}
*/
.hikaku table tr:nth-of-type(1) td:nth-of-type(1) svg{
  font-size: 3rem;
  color:#dcc64f;
}
.hikaku table tr:nth-of-type(1) td:nth-of-type(2) svg{
  font-size: 2.4rem;
  color:#bdbdbd;
}
.hikaku table tr:nth-of-type(1) td:nth-of-type(3) svg{
  font-size: 1.8rem;
  color:#d08446;
}

@media screen and (max-width: 640px) {
.hikaku table{
  table-layout:fixed;
  min-width: 500px;
  width:auto;
  font-size: .8rem;
}
.hikaku table th{
  width: 4em;
  color:#333;
  padding:.5rem .2em;
  font-weight: bold;
}
.hikaku table td{
  width:4em;
  padding:.5rem .2em;
}
.hikaku table tr:nth-of-type(3) td:nth-of-type(1) span.star5_rating{
  font-size:1rem;
}
}
.sort{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
  margin-bottom:1.5rem;
}
.sort span{
  display:block;
  width: 33%;
  text-align:center;
  border:1px solid #ddd;
  border-left:none;
}
.sort span:first-child{
  border-left:1px solid #ddd;
}
.sort span a{
  display:block;
  padding:1rem .5rem;
  transition:.4s;
}
.sort span a:hover{
  background-color:#d3182b;
  color:#fff;
}

.search_area .has-text-centered span{
  display:block;
}
.select select{
  width:18em;
}
.logo a{
  color:#333;
}
.logo .sub_title{
  color:#517D99;
}
.logo .diet{
  color:#d3182b;
}
.rank_btn{
  margin-bottom:1rem;
}
.visual{
  margin-bottom:2rem;
}

.text_rating{
  display: block;
  font-size:1.7rem;
  font-weight:bold;
  color:#333 !important;
}

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC !important; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

.vgood, .good, .lbad, .bad {
  font-size:2rem;
  font-weight: bold;
}
.vgood {color:#ff7f7f;}
.good  {color:#7fbfff;}
.lbad  {color:#ffbf7f;}
.bad   {color:#666;}


/**
 * Q & A
 */
 dl.faq dt{
  font-weight:bold;
  font-size:18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #c80021;
}
  
dl.faq dt::before{
  content:"Q";
  color: #c80021;
  font-weight:normal;
  font-size: 1.7em;
  margin-right: .3em;
}
dl.faq dd::before{
  content:"A";
  color: #0085C8;
  font-size: 2em;
  margin-right: .5em;
}

dl.faq dd{
  padding:15px 5px;
  margin-left: 0;
  line-height:180%;
}






/**
 * 吹き出し
--------------------*/
.balloon {
padding: 0;
margin: 2em 0;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 12%;
height: 12%;
}
.balloon-image-left {
float: left;
margin-right: 3%;
margin-left: 2%;
}
.balloon-image-right {
float: right;
margin-left: 3%;
margin-right: 2%;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 2px solid #f3f3f3;
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-radius: 10px;
max-width: -webkit-calc(100% - 20%);
max-width: calc(100% - 20%);
display: inline-block;
}
.balloon-text-right {
background-color: #f9f9f9;
}
.balloon-text-left {
background-color: #f9f9f9;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
line-height: 170%;
padding: 5px;
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 #f9f9f9;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #f9f9f9;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #f9f9f9;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #f9f9f9;
top: 15px;
right: -19px;
}

.blue >.balloon-text-right {background-color: #b0c4de !important;}
.blue >.balloon-text-left {background-color: #b0c4de !important;}
.blue >.balloon-text-right:before,
.blue >.balloon-text-right:after
{
border-right: 10px solid #b0c4de !important;
}
.blue >.balloon-text-left:before,
.blue >.balloon-text-left:after
{
border-left: 10px solid #b0c4de !important;
}
.skyblue >.balloon-text-right {background-color: #DBFFF5 !important;}
.skyblue >.balloon-text-left {background-color: #DBFFF5 !important;}
.skyblue >.balloon-text-right:before,
.skyblue >.balloon-text-right:after
{
border-right: 10px solid #DBFFF5 !important;
}
.skyblue >.balloon-text-left:before,
.skyblue >.balloon-text-left:after
{
border-left: 10px solid #DBFFF5 !important;
}
.pink >.balloon-text-left {background-color: #FEF6F8 !important;}
.pink >.balloon-text-right {background-color: #FEF6F8 !important;}
.pink >.balloon-text-left:before,
.pink >.balloon-text-left:after
{
border-left: 10px solid #FEF6F8 !important;
}
.pink >.balloon-text-right:before,
.pink >.balloon-text-right:after
{
border-right: 10px solid #FEF6F8 !important;
}
.yellow >.balloon-text-left {background-color: #FEFECD !important;}
.yellow >.balloon-text-right {background-color: #FEFECD !important;}
.yellow >.balloon-text-left:before,
.yellow >.balloon-text-left:after
{
border-left: 10px solid #FEFECD !important;
}
.yellow >.balloon-text-right:before,
.yellow >.balloon-text-right:after
{
border-right: 10px solid #FEFECD !important;
}
.brown >.balloon-text-left {background-color: #F5F0E9 !important;}
.brown >.balloon-text-right {background-color: #F5F0E9 !important;}
.brown >.balloon-text-left:before,
.brown >.balloon-text-left:after
{
border-left: 10px solid #F5F0E9 !important;
}
.brown >.balloon-text-right:before,
.brown >.balloon-text-right:after
{
border-right: 10px solid #F5F0E9 !important;
}


/*
.skyblue >.balloon-text-right {background-color: #B6E5E8 !important;}
.skyblue >.balloon-text-left {background-color: #B6E5E8 !important;}
.skyblue >.balloon-text-right:before,
.skyblue >.balloon-text-right:after
{
border-right: 10px solid #B6E5E8 !important;
}
.skyblue >.balloon-text-left:before,
.skyblue >.balloon-text-left:after
{
border-left: 10px solid #B6E5E8 !important;
}
.pink >.balloon-text-left {background-color: #FEBDA4 !important;}
.pink >.balloon-text-right {background-color: #FEBDA4 !important;}
.pink >.balloon-text-left:before,
.pink >.balloon-text-left:after
{
border-left: 10px solid #FEBDA4 !important;
}
.pink >.balloon-text-right:before,
.pink >.balloon-text-right:after
{
border-right: 10px solid #FEBDA4 !important;
}
*/
.lime >.balloon-text-left {background-color: #C6E6B0 !important;}
.lime >.balloon-text-right {background-color: #C6E6B0 !important;}
.lime >.balloon-text-left:before,
.lime >.balloon-text-left:after
{
border-left: 10px solid #C6E6B0 !important;
}
.lime >.balloon-text-right:before,
.lime >.balloon-text-right:after
{
border-right: 10px solid #C6E6B0 !important;
}

/**
 * 吹き出し2 口コミ
--------------------*/
.balloon2 {
padding: 0;
margin: 2em 0;
position: relative;
}
.balloon2:before,.balloon2:after {
clear: both;
content: "";
display: block;
}
.balloon2 figure {
width: 50px;
height: 50px;
}
.balloon2-image-left {
float: left;
margin-right: 10px;
}
.balloon2-image-right {
float: right;
margin-left: 10px;
}
.balloon2 figure img {
width: 100%;
height: 100%;
border: 2px solid #f9f9f9;
border-radius: 50%;
margin: 0;
}
.balloon2-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon2-text-right,.balloon2-text-left {
position: relative;
padding: 10px;
border-radius: 10px;
max-width: -webkit-calc(100% - 100px);
max-width: calc(100% - 60px);
display: inline-block;
}
.balloon2-text-right {
background-color: #f9f9f9;
}
.balloon2-text-left {
background-color: #f9f9f9;
}
.balloon2-text-right {
float: left;
}
.balloon2-text-left {
float: right;
}
.balloon2 p {
line-height: 170%;
padding: 5px;
margin: 0 0 20px;
}
.balloon2 p:last-child {
margin-bottom: 0;
}

/* 三角部分 
.balloon2-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -20px;
}
.balloon2-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -19px;
}
.balloon2-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #eee;
top: 15px;
right: -20px;
}
.balloon2-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #eee;
top: 15px;
right: -19px;
}*/

.blue >.balloon2-text-right {background-color: #b0c4de !important;}
.blue >.balloon2-text-left {background-color: #b0c4de !important;}
.blue >.balloon2-text-right:before,
.blue >.balloon2-text-right:after
{
border-right: 10px solid #b0c4de !important;
}
.blue >.balloon2-text-left:before,
.blue >.balloon2-text-left:after
{
border-left: 10px solid #b0c4de !important;
}

.skyblue >.balloon2-text-right {background-color: #DBFFF5 !important;}
.skyblue >.balloon2-text-left {background-color: #DBFFF5 !important;}
.skyblue >.balloon2-text-right:before,
.skyblue >.balloon2-text-right:after
{
border-right: 10px solid #DBFFF5 !important;
}
.skyblue >.balloon2-text-left:before,
.skyblue >.balloon2-text-left:after
{
border-left: 10px solid #DBFFF5 !important;
}
.pink >.balloon2-text-left {background-color: #FEF6F8 !important;}
.pink >.balloon2-text-right {background-color: #FEF6F8 !important;}
.pink >.balloon2-text-left:before,
.pink >.balloon2-text-left:after
{
border-left: 10px solid #FEF6F8 !important;
}
.pink >.balloon2-text-right:before,
.pink >.balloon2-text-right:after
{
border-right: 10px solid #FEF6F8 !important;
}
.yellow >.balloon2-text-left {background-color: #FEFECD !important;}
.yellow >.balloon2-text-right {background-color: #FEFECD !important;}
.yellow >.balloon2-text-left:before,
.yellow >.balloon2-text-left:after
{
border-left: 10px solid #FEFECD !important;
}
.yellow >.balloon2-text-right:before,
.yellow >.balloon2-text-right:after
{
border-right: 10px solid #FEFECD !important;
}
.brown >.balloon2-text-left {background-color: #F5F0E9 !important;}
.brown >.balloon2-text-right {background-color: #F5F0E9 !important;}
.brown >.balloon2-text-left:before,
.brown >.balloon2-text-left:after
{
border-left: 10px solid #F5F0E9 !important;
}
.brown >.balloon2-text-right:before,
.brown >.balloon2-text-right:after
{
border-right: 10px solid #F5F0E9 !important;
}
.lime >.balloon2-text-left {background-color: #C6E6B0 !important;}
.lime >.balloon2-text-right {background-color: #C6E6B0 !important;}
.lime >.balloon2-text-left:before,
.lime >.balloon2-text-left:after
{
border-left: 10px solid #C6E6B0 !important;
}
.lime >.balloon2-text-right:before,
.lime >.balloon2-text-right:after
{
border-right: 10px solid #C6E6B0 !important;
}


/**
 * 口コミの開閉用ボタン
 */
.kutimore,.kutimore2 {
  text-align:center;
  margin:0 20%;
  padding:5px;
  border:2px solid #888;
  border-radius:10px;
  font-size:12px
}



/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  max-width:760px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 1em;
  letter-spacing: 1px;
  margin: 0;
  font-size: 1.3em;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  background:#f8f9fb;
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width: calc(100% / 3);
}
.comparison-table table thead th{
  background : #d1d1d1;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
  position: relative;
}
.comparison-table table tbody th{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  font-size: 14px;
  line-height: 1.3;
  vertical-align: bottom;
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:.6em;
  color: #555;
  line-height: 1.8;
  text-align:center;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#33ccff;
  font-size: 16px;
  margin-bottom:7px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
    vertical-align: bottom;
  }
}

.rk1,.rk2,.rk3 {
  text-align: center;
  font-weight: bold;
  vertical-align: bottom;
  position: absolute;
  top: 2px;
  left: 2px;
  color: #333;
  font-size: 11px;
}
.comparison-table table thead .rk1 svg{
  font-size: 1.5rem;
  color:#dcc64f;
}
.comparison-table table thead .rk2 svg{
  font-size: 1.4rem;
  color:#bdbdbd;
}
.comparison-table table thead .rk3 svg{
  font-size: 1.3rem;
  color:#d08446;
}


/************************************
** スマホ特化比較表(ピンク)
************************************/
/* 大見出し背景 */
.comparison-table-pink .comparison-table-title{
  background:#f7bcbc!important;
}
/* 中見出し背景 */
.comparison-table-pink .comparison-table table tbody th{
  background:#f7bcbc!important;
}
/* 強調文字 */
.comparison-table-pink .comparison-table table tbody td .td-h{
  color:#f7bcbc!important;
  font-size: 12px;
}
/* 全体背景 */
.comparison-table-pink .comparison-table{
background:#fdf1f1!important;
}
/* 比較名背景 */
.comparison-table-pink .comparison-table table thead th{
  background:#fdf1f1!important;
}
/************************************
** スマホで見やすい比較表(イエロー)
************************************/
/* 大見出し背景 */
.comparison-table-yellow .comparison-table-title{
  background:#fdc44f !important;
}
/* 中見出し背景 */
.comparison-table-yellow .comparison-table table tbody th{
  background:#fdc44f !important;
}
/* 強調文字 */
.comparison-table-yellow .comparison-table table tbody td .td-h{
  color:#fdc44f !important;
  font-size: 12px;
}
/* 全体背景 */
.comparison-table-yellow .comparison-table{
background:#fef9ed!important;
}
/* 比較名背景 */
.comparison-table-yellow .comparison-table table thead th{
  background:#fef9ed !important;
}
/************************************
** スマホで見やすい比較表(グリーン)
************************************/
/* 大見出し背景 */
.comparison-table-green .comparison-table-title{
  background:#2fcdb4 !important;
}
/* 中見出し背景 */
.comparison-table-green .comparison-table table tbody th{
  background:#2fcdb4 !important;
}
/* 強調文字 */
.comparison-table-green .comparison-table table tbody td .td-h{
  color:#2fcdb4 !important;
  font-size: 12px;
}
/* 全体背景 */
.comparison-table-green .comparison-table{
background:#eafaf7 !important;
}
/* 比較名背景 */
.comparison-table-green .comparison-table table thead th{
  background:#eafaf7 !important;
}
/************************************
** スマホで見やすい比較表(シンプル)
************************************/
/* 大見出し背景 */
.comparison-table-simple .comparison-table-title{
  box-shadow:none !important;
}
/* 中見出し背景 */
.comparison-table-simple .comparison-table table tbody th{
  box-shadow:none !important;
}
/* 全体背景 */
.comparison-table-simple .comparison-table{
  background:none !important;
}
/* 比較名背景 */
.comparison-table-simple .comparison-table table thead th{
  box-shadow:none !important;
}
/* コンテンツ背景 */
.comparison-table-simple .comparison-table table tbody td{
  box-shadow:none !important;
  padding: 0.5em 1em;
}
/************************************
** スマホで見やすい比較表(画像比較)
************************************/
/* 比較名背景 */
.comparison-table-img .comparison-table table thead th{
  box-shadow:none !important;
  padding:3px 0;
  margin:0;
}
.comparison-table-img .comparison-table table thead tr{
  background:none !important;
}
.comparison-table-img .comparison-table table thead th img{
  display:block;
  width: 30%;
}
.comparison-table table thead th p{
  margin:0;
}
/* 画像タイトル */
.comparison-table-img .comparison-table table thead th .th-h{
  color:#333;
  padding-top:5px;
  margin-bottom:5px;
  font-size:14px;
  text-align: center;
}
/************************************
** スマホで見やすい比較表(固定追尾なし)
************************************/
@media screen and (max-width: 768px){
  .no-sticky .comparison-table table thead th{
    position:static;
  }
  .comparison-table-img .comparison-table table thead th .th-h{
    color:#fff;
    font-size:9px;
    position: absolute;
    left: 5px;
    bottom: 20px;
    text-shadow    : 
       1px  1px 0px #999999,
      -1px  1px 0px #999999,
       1px -1px 0px #999999,
      -1px -1px 0px #999999,
       1px  0px 0px #999999,
       0px  2px 0px #999999,
      -1px  0px 0px #999999,
       0px -1px 0px #999999;
  }
}



/* yurabutton2 */
.yurabutton2 {
    display: block;
    width: 90%;
    margin: 20px auto;
    border-bottom: 8px solid #900;
    border-radius: 10px;
    font-weight:bold;
 
    background: #cb60b3;
    background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
    background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
    background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); 
 
    color: #ffffff;
    padding: 30px 5px;
    font-size:26px;
    text-align: center;
    text-decoration: none;
 
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: yurabutton2;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurabutton2 {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  88% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  90%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  92%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  94%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  96%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  98%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media only screen and (max-width: 480px) {
.yurabutton2{
    width: 90%;
    font-size:18px;
    }
}
.yurearrow1{
    color:yellow;
    display: inline-block;
    padding-right:10px;
    position: relative;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: yurearrow1;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurearrow1{
        0% { left: 0px;}
        25% { left: 5px; }
        50% { left: 0px; }
        75% { left: 5px; }
        100% { left: 0px;}
}

/* yurabutton3 */
.yurabutton3 {
    display: block;
    width: 90%;
    margin: 20px auto;
    border-bottom: 8px solid #900;
    border-radius: 10px;
    font-weight:bold;
    background: #f85032;
    background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
    background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
 
    color: #ffffff;
    padding: 30px 5px;
    font-size:26px;
    text-align: center;
    text-decoration: none;
 
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: yurabutton3;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurabutton3 {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  88% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  90%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  92%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  94%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  96%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  98%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media only screen and (max-width: 480px) {
.yurabutton3{
    width: 90%;
    font-size:18px;
    }
}
.yurearrow1{
    color:yellow;
    display: inline-block;
    padding-right:10px;
    position: relative;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: yurearrow1;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurearrow1{
        0% { left: 0px;}
        25% { left: 5px; }
        50% { left: 0px; }
        75% { left: 5px; }
        100% { left: 0px;}
}

.yurabutton4 {
    display: block;
    width: 90%;
    margin: 30px auto;
    border-bottom: 8px solid #53A006;
    border-radius: 10px;
    font-weight:bold;
    
    background: #bfd255;
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
    background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
 
    color: #ffffff;
    padding: 30px 5px;
    font-size:28px;
    text-align: center;
    text-decoration: none;
 
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: yurabutton4;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurabutton4 {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  88% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  90%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  92%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  94%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  96%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  98%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media only screen and (max-width: 480px) {
.yurabutton4{
    width: 90%;
    font-size:18px;
    }
}
.yurearrow1{
    color:yellow;
    display: inline-block;
    padding-right:10px;
    position: relative;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: yurearrow1;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurearrow1{
        0% { left: 0px;}
        25% { left: 5px; }
        50% { left: 0px; }
        75% { left: 5px; }
        100% { left: 0px;}
}

/*汎用ボックス*/
.cmnbox {
  margin-right: 10px;
  margin-left: 10px;
  background-color: #FFFBFB;
  padding: 10px;
  border: 1px solid #E5D5D5;
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 5px;
}
.cmnbox > p {
  margin-bottom:0;
}

.arrow_box {
	position: relative;
	background: #ffffff;
	border: 2px solid #000000;
	border-radius: 3px;
	padding:10px;
	font-size:1.4em;
	font-weight:bold;
	color:#000;
	margin-bottom:30px;
	line-height: 140%;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 14px;
	margin-left: -14px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 17px;
	margin-left: -17px;
}

/**
 * テーブル
 */
.table1 {
  border: 1px solid #ddd;
}

.table1 th {
  width:30%;
  background-color:#eee;
  text-align:center;
  padding:7px;
  line-height:1.2;
}
.table1 td {
  padding:7px;
  background-color:#f9f9f9;
}
.table1 .is-selected {
  font-size: 1.4rem;
  text-align:center;
  background-color: #fff1d6;
  color: #d3182b;
  font-weight: bold;
}

.table1 strong {
  color: #d3182b;
  font-size: 1.2rem;
}
@media screen and (max-width: 780px) {
  .table1 {
    font-size:.8em;
    width:100%;
  }
  .table1 th {
    width:6em;
    background-color:#eee;
    text-align:center;
    /*padding:1rem .3em;*/
  }
  .table1 td {
    /*padding:1rem .3em;*/
  }
  .table1 strong {
    color: #d3182b;
    font-size: .8rem;
  }
  .table1 .is-selected strong{
    font-size:1.4rem;
  }
}


.table2 {
  width:100%;
}
.table2 th {
  background-color:#fff;
  text-align:center;
  padding:7px;
  line-height:1.2;
}
.table2 td {
  width:25%;
  padding:7px;
  background-color:#fff;
  text-align:center;
  font-size:1.2em;
  position:relative;
}
.table2 td > img{
width:80%;
}
div.sname {
 position:absolute;
bottom:2px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
 font-size:14px;
 font-weight:bold;
 color: #fff;
 text-shadow: 1px 0 0 #333, 0 1px 0 #333, -1px 0 0 #333, 0 -1px 0 #333;
 width:90%;
}

@media screen and (max-width: 780px) {
  .table2 {
    font-size:.8em;
    width:100%;
  }
  .table2 th {
    width:6em;
    text-align:center;
    /*padding:1rem .3em;*/
  }
  .table2 td {
    /*padding:1rem .3em;*/
  }
  .table2 strong {
    color: #d3182b;
    font-size: .8rem;
  }
}