@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* common
-------------------------------------------------- */
html {
  font-size: .625rem;
}

body {
  background-color: #fff3eb;
  color: #333;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
  word-break: break-all;
}

a {
  color: #1a9ec9;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

img {
  display: block;
  max-width: 75%;
  margin: 20px auto 10px auto;
}

.img_area {
  display: block;
  margin-right: auto;
}

section {
  margin: 0px 0;
}

.video {
  max-width: 60%;
  margin: 0 auto;
}

.video2 {
  max-width: 40%;
  margin: 0 auto;
}

video {
  max-width: 100%;
}

/*
.container{
  max-width: 680px;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
}
*/

.container h1 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

/*
.container h2 {
  margin: 45px 0 5px 0;
  padding: 8px 10px 10px;
  border-top: 1.5px solid #1a9ec9;
  border-bottom: 1.5px solid #1a9ec9;
  color: #1a9ec9;
  background-color: #f2ffff;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1.5;
}*/

.container h2 {
    margin: 40px 0 5px 0;
    width: 95%;
    padding: 9px 10px 12px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: 1.5;
}

.container h3 {
    margin: 45px 0 20px 0;
    color: #ff747c;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    padding: 0 0 5px 0px;
    /* border-left: 5px solid #ff747c; */
    border-bottom: 2px solid #ff747c;
}

.container h4 {
  margin: 30px 0 -5px 0;
  color: #ff747c;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
  padding: 10px 0;
}

h5 {
  margin: 40px 0 10px 0;
  color: #1a9ec9;
  font-weight: 600;
  font-size: 20px;
  /* border-bottom: 3px solid #1a9ec9; */
  background: #ffffff;
  line-height: 60px;
  padding-left: 70px;
  background: url(../img/crown1.png) no-repeat left top;
  background-size: contain;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


.ranking_title1 {
  margin: 40px 0 10px 0;
  color: #dbb96f;
  font-weight: 600;
  font-size: 22px;
  /* border-bottom: 3px solid #1a9ec9; */
  line-height: 60px;
}

.ranking_title1:before {
  content: url("../img/crown1_s.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 20px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.ranking_title1_2 {
  margin: 20px 0 -5px 0;
  color: #bf9d4d;
  font-weight: bold;
  font-size: 22px;
  /* border-bottom: 3px solid #1a9ec9; */
  line-height: 60px;
  padding-left: 50px;
  background: url(../img/crown1_s.png) no-repeat left top;
}

.ranking_title2 {
  margin: 20px 0 -5px 0;
  color: #808580;
  font-weight: bold;
  font-size: 22px;
  /* border-bottom: 3px solid #1a9ec9; */
  line-height: 60px;
  padding-left: 50px;
  background: url(../img/crown2_s.png) no-repeat left top;
}

.ranking_title3 {
  margin: 20px 0 -5px 0;
  color: #b18066;
  font-weight: bold;
  font-size: 22px;
  /* border-bottom: 3px solid #1a9ec9; */
  line-height: 60px;
  padding-left: 50px;
  background: url(../img/crown3_s.png) no-repeat left top;
}




.txtBox {
  font-size: 16px;
  margin: 17px 0 22px 0;
  letter-spacing: 1.2px;
  font-weight: 500;
}


.txtBox img {
  width: 500px;
}

.txtBox2 {
  font-size: 16px;
  margin: 0px 0 20px 0;
  letter-spacing: 1.2px;
  font-weight: 600;
}

.caption {
    font-size: 1.3rem;
    color: #000;
    text-align: center;
    margin-top: 5px;
}

.container em {
  font-weight: 600;
}

.imgBox {
  margin: 0;
}

.imgBox-top {
  margin: 28px 0 10px 0;
  text-align: center;
}

.imgBox-space {
  margin: 20px 0 20px 0;
}

.btn-space {
  margin: 20px 0 40px 0;
}

.btnBox {
  margin: 28px -16px;
  text-align: center;
}

.quote {
  margin: 28px 0;
  padding: 20px 24px;
  background-color: #f8f5ef;
  border-radius: 6px;
}

.quote li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.7;
}

.quote dt {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 2rem;
}

.review {
	max-width: 65%;
	border:3px solid #ffe4e6;
	padding:16px;
	margin:20px auto;
	border-radius:10px;
	background-color:#fff;
}

.review-name {
	margin:0px 0 7px 0;
	font-weight:bold;
	font-size: 18px;
	color: #ff747c;
}

.review-img{
	margin:0;
}


.review-txt {
	margin:0;
	font-size: 16px;
	font-weight: 500;
}

.review-caution {
	font-size: 12px;
    color: #919191;
    text-align: right;
}

.summary {
  font-size: 16px;
  margin: 20px 0;
  padding: 10px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  font-weight: 600;
}

.summary li {
  position: relative;
  padding-left: 26px;
  margin: 4px 0;
}

.summary li::after {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 15px;
  height: 5px;
  border-left: 2px solid #1a9ec9;
  border-bottom: 2px solid #1a9ec9;
  transform: rotate(-45deg);
  font-size: 0;
}

.Checkitem {
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  padding: 16px 0px;
  font-weight: 600;
}

.Checkitem li {
  font-size: 16px;
  position: relative;
  padding-left: 26px;
  margin: 4px 0;
}

.Checkitem li::after {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 15px;
  height: 5px;
  border-left: 2px solid #ff0000;
  border-bottom: 2px solid #ff0000;
  transform: rotate(-45deg);
}

.sp {
  display: none;
}

.list {
  background-color: #f2f2f2;
  padding: 10px;
}

.list-w {
  padding: 0px 0 10px 0;
  font-size: 16px;
  line-height: 30px;
}

.list-b {
  background-color: #dcf7ff;
  padding: 10px;
}

.list-y {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
    background-color: #fffcd0;
    padding: 10px;
}
 
.list-yt:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #ff9411;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
}

.friend {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 15px 15px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 2rem;
  background: #FFF;
  border: solid 1px #555;
  box-sizing: border-box;
  border-radius: 15px;
}



header,
footer {
  width: 100%;
  background-color: #d5d5d5;
}

header p {
  color: #5c5c5c;
  padding: 3px;
  margin: 0;
  text-align: center;
}

footer p {
  padding: 10px;
  margin: 0;
  text-align: center;
}

footer p a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

h1 .tRed {
  font-size: 2rem;
}

h1 .undl {
  font-size: 2rem;
  background: linear-gradient(transparent 65%, #fff583 65%);
  font-weight: 600;
}

.mb0 {
  margin-bottom: 5px;
}





.marker {
  background: linear-gradient(rgba(255, 255, 255, 0) 40%, #ffff99 40%);
  font-weight: bold;
}

.markerS {
  background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff583 40%);
}

.tRed {
  color: #eb175e;
  font-weight: bold;
}

.tBlue {
  color: #0000ff;
  font-weight: bold;
}

.tPink {
  color: #eb175e;
  font-weight: bold;
}

.tBrack {
  font-weight: bold;
}

.b {
  font-weight: bold;
}

.small {
  font-size: 12px;
  color: #000;
}

.dokidoki {
  animation: dokidoki 1s infinite;
  width: 90%;
}

.btn_bottom {
  margin-bottom: 40px;	
}

th {
  vertical-align: middle;
}

td {
  vertical-align: middle;
}

@keyframes dokidoki {
  0% {
    transform: scale(1.05)
  }

  50% {
    transform: scale(1.2)
  }

  100% {
    -webkit-transform: scale(1.05)
  }
}

.date {
  font-size: 2rem;
}

.caution {
  font-size: 12px;
  color: #919191;
  text-align: right;
  max-width: 60%;
  margin: 0 auto;
}

.review-caution {
  font-size: 12px;
  color: #919191;
  text-align: right;
}


/*------比較表ココから------*/
.rank {
  margin: 6% auto;
}
.rank-table {
  box-sizing: border-box;
  position: relative;
  margin: 1% auto 1% auto;
  border-collapse: collapse;
}
.rank-table th {
  background-color: #CAECFF;
  width: 6.2em;
  box-sizing: border-box;
  padding: .2em .2em;
  line-height: 1.2em;
  border: 1px solid #ccc;
  font-size: .6em;
  font-weight: bold;
  white-space: nowrap;
}

.rank-table td{
  box-sizing: border-box;
  padding:.1rem .1rem .2rem .1rem;
  line-height: 1.5em;
  border: 1px solid #ccc;
  font-size: .8em;
  font-weight: bold;
}

.rank-table_02 td{
  box-sizing: border-box;
  padding:.8rem .1rem .2rem .1rem;
  line-height: 1.3em;
  border: 1px solid #ccc;
  font-size: .8em;
  font-weight: bold;
}

.rank-table tr td:nth-of-type(1) {
    border-left: 3px solid #F95032;
    border-right: 3px solid #F95032;
  }

.rank-table tr:first-of-type td:nth-of-type(1) {
    border-top: 3px solid #F95032;
  }
 .rank-table tr:last-of-type td:nth-of-type(1) {
    border-bottom: 3px solid #F95032;
  }


.rank-table-num td {
  padding: .4rem;
  vertical-align: bottom;
}


.rank-table-num td img {
  width: 70%;
  margin: 0 auto;
  display: block;
}
.pop-icon td {
  padding: .4rem;
}
.pop-icon td img{
  width: 5rem;
  display: block;
  margin: 0 auto;
}
.rank-table-name {
  font-weight: bold;
  text-align: center;
  margin: 0 auto 0.2em;
  display: block;
}

.rank-other-img1 .rank-table-name {
  margin: 0 auto 2em;
}


.rank-table-age td{
  text-align: center;
}
.rank-table-cb td img {
   width: 5rem;
  display: block;
  margin: 0 auto;
}
.rank-table-power td {
  text-align: center;
  font-size: 1.2em;
  
}
.rank-table-user td {
  text-align: center;
}
.rank-table-star td {
  text-align: center;
  padding: .4rem;
}
.rank-table-star td img {
  width: 70%;
  margin: 0 auto;
  display: block;
}
.rank-table-saport td {
  text-align: center;
  padding: .5rem .3rem;
}
.index-list li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: .4em;
}
.index-list li:last-child{
  margin-bottom: 0;
}

.hyou {
    font-size:1.3rem;
    color:#000;
    font-weight: bold;
    line-height: 0.5;
}

.hyou_m2 {
    font-size: 4rem; 
    font-weight: bold; 
    color:red;
}

.hyou_m {
    font-size: 4rem; 
    font-weight: normal; 
    color:#ffc65e;
}

.hyou_sa {
    font-size: 4rem; 
    font-weight: bold; 
    color:gray;
}

th {
  vertical-align: middle;
}

td {
  vertical-align: middle;
}

/*------比較表ココまで------*/

/*** SP ***/
@media screen and (max-width: 500px) {
  .rank-table {
	width: 500px;
  }
}

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }

  img {
    max-width: 100%;
  }

  .video {
    max-width: 100%;
  }

  .video2 {
    max-width: 70%;
  }

  .review {
    max-width: 100%;
  }

  .caution {
    max-width: 100%;
  }
}


@media screen and (min-width: 768px) {

  .sp_area{
    display:none;
  }
	
}

/* ------------------------- */
/* -------- 吹き出し -------- */
/* ------------------------- */

.talk {
  margin: 1.5em 0 1.5em 0;
  border: 1px solid #727272;
  font-size: 16px;
  padding: 10px 20px 15px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.talkbold {
  line-height: 2.3em;
  font-size: 16px;
  font-weight: 600;
}

/* 対談ここまで */

.topic {
  padding: 10px 0;
}


.shouhin {
  border: 3px solid #0059AA;
}

.coment img {
  width: 14%;
  margin: 0 0 10px -8px;
}

.coment .mark {
  width: 5%;
  margin: 0 0 5px 0px;
}


.quote {
  margin: 28px 0;
  padding: 15px 24px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

.quote dt {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
}

.quote dd {
  margin-bottom: 12px;
  font-size: 14px;
}

.study {
  font-size: 14px;
  margin: 20px 0;
}

.bold {
  margin: 32px 0;
  font-weight: 600;
  font-size: 2rem;
}

/* -------- 吹き出し -------- */

.coment {
	padding:5px 20px 15px 20px;
	background-color: #FFFFFF;
}

.henshu {
	border: 3px solid #ff7e91;
	border-radius: 15px;
}

.sensei {
	border: 3px solid #1a9ec9;
	border-radius: 15px;
}

.kainushi {
	border: 3px solid #ffac43;
	border-radius: 15px;
}


.shouhin {
	border: 3px solid #0059AA;
}

.coment img {
	width:20%;
	margin: 0 0 10px -8px;
}

.coment .mark {
	width:5%;
	margin:0 0 5px 0px;
} 

.mb20 {
    margin-bottom:20px !important;
}

@media(max-width:767px) {
	.coment img {
		width:30%;
	}
	.coment .mark {
	width:10%;
}
}

/* -------- 吹き出しここまで -------- */


/*** add ***/
.pc {
  display: block;
}

.sp {
  display: none;
}

@media(min-width:767px) {
article {
  max-width: 800px;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px;
}
}

@media(max-width:767px) {
article {
  max-width: 800px;
  background-color: #fff;
  margin: 0 12px;
}

.container {
  padding: 5px 20px 10px 20px;
}


.fv {
  max-width: 100%;
  margin: 0;
}
}

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }

  .pc_area{
    display:none;
  }
	
  .pc {
    display: none;
  }

img{
	max-width: 100%;
  }
}

.ranking {
  float: left;
}


.profile {
  margin: 28px 0;
  padding: 15px 24px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

.profile dt {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
}

.profile dd {
  margin-bottom: 12px;
  font-size: 14px;
}

.box19 {
  position: relative;
  padding: 0.25em 1em;
  display: inline-block;
}

.box19:before,
.box19:after {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.box19:before {
  border-left: solid 1px #333;
  border-top: solid 1px #333;
  top: 0;
  left: 0;
}

.box19:after {
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  bottom: 0;
  right: 0;
}

.box19 p {
  margin: 0;
  padding: 0;
}


.talk2 {
  font-size: 16px;
  font-weight:500;
}

.talk2bold {
  line-height: 2.3em;
  font-size: 16px;
  font-weight: 600;
}


.box27 {
  position: relative;
  margin: 2.5em 0 1.3em 0;
  padding: 0.5em 1em;
  border: solid 3px #1a9ec9;
}

.box27 .box-title {
  position: absolute;
  display: inline-block;
  top: -35px;
  left: -3px;
  padding: 0 15px 5px;
  height: 30px;
  line-height: 36px;
  font-size: 16px;
  background: #1a9ec9;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}

.box27 p {
  font-size: 16px;
  margin: 0;
  padding: 0;
}


/* 絞り込み検索
-------------------------------------------------- */
.searchBox {
  padding: 30px;
  font-size: 1.4rem;
}

.searchBox__title {
  max-width: 315px;
  margin: 0 auto;
  padding: .5em 2em;
  background-color: #dedede;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}

.searchBox__title::before {
  display: inline-block;
  margin-right: .5em;
  transition: transform .2s;
  content: "▽";
}

.searchBox__title.is-open::before {
  transform: rotate(180deg);
}

.searchBox__contents {
  display: none;
  padding-top: 30px;
}

.searchConditions {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  border-collapse: collapse;
}

.searchConditions th {
  width: 30%;
  padding: 1em;
  border: 1px dotted #ccc;
  background-color: #ededed;
  vertical-align: middle;
}

.searchConditions td {
  padding: 1em;
  border: 1px dotted #ccc;
  vertical-align: middle;
}

.searchConditions label {
  display: inline-block;
  margin-right: 1em;
  cursor: pointer;
}

.searchBox__contents button[type="submit"] {
  display: block;
  appearance: none;
  width: 100%;
  max-width: 315px;
  margin: 0 auto;
  padding: .5em 2em .5em 2.5em;
  border: none;
  border-radius: 0;
  background: #1a9ec9;
  color: #fff;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ff747c;
  line-height: 1.5;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ff747c;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  color:#fff;
  font-weight: bold;
  font-size: 18px;
}

.searchBox__contents button[type="submit"]::after {
  display: inline-block;
  margin-left: .5em;
  transform: rotate(90deg);
  transition: transform .2s;
  content: "△";
}

.searchBox__contents button[type="submit"]:hover::after {
  transform: rotate(90deg) translateY(-.25em);
}

/*-- 検索結果 --*/
.resultItem {
  display: none;
}

.resultItem.is-applicable {
  display: block;
}