@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: fff;
}
body{
	width:100%;
	margin:0 auto 0px auto;
	padding:0;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color:#fff9ef;
}

/* ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ共通ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ */
span.t_red{
	color:#D60300;
}
.content div,table,tr,td,th,.table li,ul,li{
	box-sizing:border-box;
}
table,.table{
	border-collapse:collapse;
	border-spacing: 0;
}
.table{
	display:table;
}
.cell ,.table li{
	display:table-cell;
	vertical-align:top;
}
img{
	width:100%;
	margin:0 auto;
	display:block;
}
ul,li{	
	text-decoration:none;
	list-style:none;
}
a,a:hover,a:visited{
	color:#427AD1;
	text-decoration:underline;
	font-weight:bold;
}

.pc {
	display: none;
}

.sp {
	display: block;
}

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

.sp {
	display: none;
}
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰヘッダーｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
header{
	background-color:#427ad1;
}
.maincontainer{
	margin:0 auto 20px auto;
    width:100%;
	background-color:#fff;
	padding:20px 4% 0px 4%;
	box-sizing:border-box;
}

@media screen and (min-width: 768px) {
header{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.maincontainer{
	margin:0 auto;
    width:980px;
	background-image:url(../img/bg.jpg);
	background-repeat:repeat-y;
	padding:30px 150px 120px 150px;
	box-sizing:border-box;
    overflow: hidden;
	position:relative;
}
}
/* ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰコンテンツｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ */
.maincontainer .top{
	padding:0 0 10% 0;
	margin: 0 0 20px 0;
}
.maincontainer .top h2{
	margin:0;
}
.maincontainer .top p{
	padding: 10px 0px 0 0px;
}
.maincontainer .top ,.main_rank{
	background:url(../img/s_con_line.jpg) left bottom repeat-x ;
    background-size: contain;
}
/*-- 身長計算 --*/
.heightCalc {
	margin: 20px auto;
  }
  
   .heightCalcList {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
  }
  
   .heightCalcList__title {
	width: 50%;
	margin-bottom: .25em;
	padding-right: .5em;
	text-align: right;
	box-sizing: border-box;
  }
  
   .heightCalcList__form {
	width: 50%;
	margin-bottom: .25em;
	box-sizing: border-box;
  }
  
   .executeCalc {
	margin: 1em auto;
	text-align: center;
  }
  
   .heightCalc__result {
	margin: .5em auto 0;
	border: 1px solid #ccc;
  }
  
   .heightCalc__result th {
	padding: .25em .5em;
	border: 1px solid #ccc;
	background-color: #f3f3f3;
	font-weight: bold;
	text-align: center;
  }
  
   .heightCalc__result td {
	padding: .25em .5em;
	border: 1px solid #ccc;
	text-align: right;
  }
  
/* 商品名以下 */
.main_rank{
	margin:0 0 30px 0;
	padding:0 0 5% 0;
}
/* 評価 */
.app{
	font-weight:bold;
}
.app .pre_img{
	width:185px;
	margin: 10px 0;
	vertical-align: middle;
}
.app p{
	color:#D60300;
	font-weight:normal;
	margin:30px 0 10px 0;
	line-height:160%;
}
.app.table{
	margin:10px 0 20px 0;
}
.app.table .cell{
	width:50%;
}
.app.table .cell a{
	display:block;
	font-size:18px;
	margin: 0 0 10px 0;
}
table.point{
	width:100%;
	border:none;
	border:1px solid #b2b2b2;
	margin-bottom:20px;
}
table.point td{
	vertical-align:middle;
	padding:6px 0;
}
table.point th.sub{
	padding:3px;
	font-size:14px;
	background-color:#ffffcd;
	border-bottom:1px solid #b2b2b2;
	border-top:1px solid #b2b2b2;
	color:#000;
	width:100%;
	display:block;
	text-align:center;
}
table.point tr:first-child th.sub{
	border-top:none;
}
table.point td.st{
	width:70%;
	display:inline-block;
	padding:2% 3% 2% 10%;
}
table.point td.point{
	width:30%;
	display:inline-block;
}
table.point td.point .red{
	font-size:16px;
	color:#D60300;
	font-weight:bold;
}
table.point td.point .red:after{
	content:"/10点";
	color:#000;
	width:10px;
	font-weight:normal;
}

/* 商品の特長 テキスト */
.text{
	font-size:14px;
	line-height:160%;
	margin: 20px 0;
}
.text span.t_red{
	background-color:#FFFF00;
}
/* 比較・一覧 */
.comp,.list{
	border:1px solid #b2b2b2;
	width:100%;
	margin: 0 0 15px 0;
}
table.comp,ul.list{
	line-height:140%;
}
table.comp .item {
  width: 30%;
}
table.comp .val {
  width: 70%;
}
.comp th,.comp td{
	padding:5px 0;
}
.comp td.item{
	border-right:1px solid #b2b2b2;
}
.comp th,.comp td,.list li{
	text-align:center;
	vertical-align:middle;
}
.comp td.item,.list li{
	background-color:#e4f1f9;
	font-weight:bold;
}
.comp td.item ,.comp td.val{
	border-bottom:1px solid #b2b2b2;
}
.list li{
	border-bottom:1px solid #b2b2b2;
	padding: 8px;
}
.list li.list_t{
	background-color:#fff;
	text-align:left;
	font-weight:normal;
	padding:8px 15px 8px 15px;
}
.list .list_t{
	border-bottom:none;
}
.c_rank05 .list .list_t{
	text-align:center;
}
.main_rank.c_rank05{
	background-image:none;
	margin-bottom:0px;
	padding:0;
}
/* 商品リンク */
.pre_link ,.pre_link a{
	display:block;
	width:90%;
	margin:50px auto;
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰランキング調査詳細情報ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.info{
	width:100%;
	line-height:160%;
}
.info_con{
	margin: 0 0 30px 0; 
}
.info h3{
	background-color:#427AD1;
	padding:10px;
	margin:0 0 0 0;
	font-size:18px;
	color:#fff;
}
.info h4{
	position:relative;
	color:#427AD1;
	font-size:16px;
	padding: 0 0 0 16px;
	margin:0;
}
.info h4:before{
	content:"";
	background-color:#427AD1;
	width:14px;
	height:14px;
	position:absolute;
	top:12%;
	left:0;
}
.info h5{
	margin:0 0 25px 0;
	font-size:16px;
}
.info p{
	margin: 15px 0 15px 0;
}
.info .ul_text{
	margin:20px 0;
}
.info .ul_text li{
	margin:0;
	padding-left:16px;
	position:relative;
}
.info .ul_text li:before{
	position:absolute;
	content:"";
	top:15%;
	left:0;
	background-color:#000;
	width:13px;
	height:13px;
}
.info li{
	margin:20px 0 30px 0;
}
.info li p{
	margin: 10px 0 10px 0;
}
.text_bg{
	background-color:#FFF9EF;
	padding:8px;
	box-sizing:border-box;
}
.info table{
	font-size:10px;
	line-height:120%;
}
.info table th:nth-child(3),.info table th:nth-child(5){
	width:15%;
}
.info table td,.info table th{
	padding:8px 0;
	text-align:center;
	vertical-align:middle;
	border:1px solid #b2b2b2;
}
.info table th,.info table{
	background-color:#e4f1f9;
	line-height:100%;
}
.info table td{
	background-color:#fff;
}
.info table td{
	padding:auto 0% auto 2px;
}
.info table.point td:first-child,.info table.point th{
	background-color:#f6f6f6;
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ運営者情報ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.info.comp{
	border:none;
}
.info.comp table{
	margin: 20px 0;
	font-size:12px;
	width:100%;
}
.comp.info table td:first-child{
	background-color:#f6f6f6;
}
.comp.info table td:last-child{
	background-color:#fff;
	border:1px solid #b2b2b2;
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰナビｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
ul.navi li{
 display:inline-block;
 padding:0 25px 0 0px ;
 line-height:100%;
 color:#000;
 margin: 30px 0 0 0;
}
ul.navi li:last-child{
	padding:0;
}
ul.navi{
	width:100%;
	text-align:center;
	margin: 0 auto 0 auto; 
}
ul.navi li a,ul.navi li a:visited{
	font-weight:normal;
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰフッターｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
footer{
 background-color:#427ad1;
 padding: 15px 0;
 color:#fff;
 text-align:center;
 width:100%;
 margin:0;
}
/*ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰaccordionｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/

#accordion {
	max-width:90%;
	margin: 1.5em auto;
}

.accordion-container {
  position: relative;
  width: 100%;
  border-top: none;
  outline: 0;
  cursor: pointer
}

.accordion-container .accordion-title {
  display: block;
  position: relative;
  width: 190px;
  margin: 0 auto;
  padding: 0.2em 0;
border: 2px solid #B8B8B8;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  background: #f5f5f5;
  cursor: pointer;
  text-align: center;
}

.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #f5f5f5;
  color: #000000;
　border: 2px solid #B8B8B8;
}

.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
  position: absolute;
}

.accordion-title{
  position: relative;
}

.accordion-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 22%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #000000;
  border-right: solid 2px #000000;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-content {
  display: none;
}

/*------比較表ココから------*/
.rank {
  margin: 15% 0 0 0;
}
.rank-table {
  box-sizing: border-box;
  position: relative;
  margin: 1% auto 1% auto;
  border-collapse: collapse;
  width:640px;
}

.rank-table th {
  background-color: #ffeddc;
  width: 6.2em;
  box-sizing: border-box;
  padding: .2em .2em;
  line-height: 1.2em;
  border: 1px solid #ccc;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

.rank-table td{
  box-sizing: border-box;
  padding:.5rem .1rem .2rem .1rem;
  line-height: 1.5em;
  border: 1px solid #ccc;
  font-size: 13px;
  text-align:center;
}

.rank-table_02 td{
  box-sizing: border-box;
  padding:15px 5px 5px ;
  line-height: 1.3em;
  border: 1px solid #ccc;
  font-size: 16px;
}

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

.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: 95%;
  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: 16px;
  
}
.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:13px;
    color:#000;
    line-height: 0.2;
}

.hyou_m2 {
    font-size: 40px; 
    color:red;
}

.hyou_m {
    font-size: 40px; 
    color:#ffc65e;
}

.hyou_sa {
    font-size: 40px; 
    color:gray;
}

th {
  vertical-align: middle;
  text-align:center;
}

td {
  vertical-align: middle;
}

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

.tall_calculation_ttl {
	font-weight: bold;
	font-size: 1.5em;
	margin: 1.5em 0 1.5em;
	line-height: 1.5;
}
.tall_calculation_ttl2 {
	font-weight: bold;
	font-size: 1.2em;
	margin: 1.5em 0 1.5em;
	line-height: 1.5;
	color: #000;
	padding: 8px 0;
}
.blue {
	color: #427AD1;
}
.blue_line {
	border-bottom: solid 2px #427AD1;
}
.mark_y {
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.nayami_img {
	margin-bottom: 30px;
	width: 100%;
}
.ta_c {
	text-align: center;
}
.fw_b {
	font-weight: bold;
}
.mb30 {
	margin-bottom: 30px;
}
.mt50 {
	margin-top: 50px;
}
.mt20 {
	margin-top: 20px;
}
.mt80 {
	margin-top: 80px;
}
.mt100 {
	margin-top: 100px;
}
.text01 {
	font-size: 14px;
    line-height: 160%;
    margin: 30px 0 10px;
}
.doi_bg img{
	width: 100%;
}
.doi_bg {
	margin-top: 35px;
	position: relative;
}
.po_r {
	position: relative;
}
.po_a {
	position: absolute;
	bottom: 20px;
	left: 15px;
}
.video {
    width: 95.5%;
    z-index: 100;
}
.tyusyaku {
	font-size: 12px !important;
	color: rgb(146, 146, 146);
	margin-bottom: 30px;
	text-align: left;
}
.sli_ttl{
	margin: 60px 0 0;
}
.voice_ttl {
	font-weight: bold;
    font-size: 1.4em;
    margin: 0 0 -30px;
}
.voice_icon {
	max-width: 60px;
	margin: 30px auto 20px;
}

@media screen and (min-width: 768px) {
.tall_calculation_ttl2 {
	font-size: 2.0em;
}
.text01 {
	font-size: 18px;
}
.ta_c {
	font-size: 24px;
}
}

/*===========スライダー============*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 100%;
    margin:25px auto 0;
}

.slider .slick-slide {
    transform: scale(0.8);/*左右の画像のサイズを80%に*/
    transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0;/*透過50%*/
}

.slider .slick-slide.slick-center{
    transform: scale(1);/*中央の画像のサイズだけ等倍に*/
    opacity: 1;/*透過なし*/
}

.slick-list {
    overflow: inherit;
}

/*矢印の設定*/
.slick-prev {/*戻る矢印の位置と形状*/
    left: 0px !important;
	top: 55% !important;
    z-index: 999;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 15px !important;
	top: 55% !important;
    z-index: 999;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-next:before {
    content: '▶';
}
.slick-prev:before {
    content: '◀';
}
.voice-contents ul {
    padding-inline-start: 0px;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 40px !important;
    line-height: 1;
    opacity: 1!important;
    color: #767676 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
    opacity: .75!important;
    color: #383838!important;
}
.sli_ttl{
	max-width: 82%;
	margin: 40px auto 10px;
}
/*li.slide_contents2 div{
    padding: 3%;
}*/
li.slide_contents img{
    width: 50%;
}
li.slide_contents2 img{
    width: 60%;
}
li.slide_contents .slide_txt2{
    text-align: right;
    font-weight: bold;
    padding: 1% 0 0;
}
li.slide_contents2 .slide_txt2{
    text-align: right;
    font-weight: bold;
    padding: 1% 0 0;
}

@media screen and (min-width: 768px) {
li.slide_contents img{
    width: 86%;
}
li.slide_contents2 img{
    width: 95%;
}
}

/*----テキスト装飾----*/
.t_red {
	color: #ea0000;
	font-weight: bold;
}

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

.t_big {
	font-size: 26px;
}

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

/*----ランキングコンテンツ----*/
.rank_ttl a {
    background-color: #ffff93;
    display: block;
    padding: 8px 0 8px 80px;
    font-size: 20px;
    position: relative;
    margin-bottom: 15px;
}

.rank_ttl a::before {
    content: "";
    display: block;
    background-image: url(../img/top_ra_icon01.png);
    width: 100%;
    height: 80px;
    position: absolute;
    background-repeat: no-repeat;
    left: -10px;
    top: -19px;
}

.ttl_02 a::before {
    content: "";
    display: block;
    background-image: url(../img/top_ra_icon02.png);
    width: 100%;
    height: 80px;
    position: absolute;
    background-repeat: no-repeat;
    left: -10px;
    top: -19px;
}

.ttl_03 a::before {
    content: "";
    display: block;
    background-image: url(../img/top_ra_icon03.png);
    width: 100%;
    height: 80px;
    position: absolute;
    background-repeat: no-repeat;
    left: -10px;
    top: -19px;
}

.rank_contents h3 {
    background: #0694FF;
    color: #ffffff;
    padding: 10px;
    font-size: 22px;
    text-align: center;
    margin-bottom: 15px;
}

.rank_contents img {
    margin: 20px 0;
}

.rank_wrap {
    margin: 70px 0 30px 0;
}

.rank_contents_box p {
    font-size: 18px;
    line-height: 1.8;
}


@media screen and (min-width: 768px) {
.rank_ttl a {
    padding: 12px 0 12px 100px;
    font-size: 28px;
    margin-bottom: 25px;
}

.rank_ttl a::before {
    height: 110px;
    top: -28px;
    background-size: 14%;
}

.rank_contents h3 {
    font-size: 28px;
    margin-bottom: 30px;
}

.rank_contents img {
    margin: 35px 0;
}

.rank_contents_box p {
    font-size: 18px;
    line-height: 2;
}
}

/*----動画----*/
video {
	width: 100%;
	margin: 20px 0;
}

@media screen and (min-width: 768px) {
	video {
	margin: 40px 0;
}
}

/*2022/10/07追加*/
 .img_box {
 	margin: 20px 0;
 }

 @media screen and (min-width: 768px) {
 .img_box {
 	margin: 40px 0;
 }
}

/*----y用身長計算----*/
form {
	margin: 0 auto;
	width: 30%;
	font-size: 20px;
}
.sintyou_box {
	margin-bottom: 20px;
}

.select_box {
	display: flex;
	margin-top: 10px;
}

.select_box p {
	padding-right: 10px;
}

ul.sintyou {
	display: flex;
}

.sintyou li {
	display: flex;
}

.select_area {
	text-align: center;
}

.select_area p {
	background: #f3f3f3;
	margin-top: 20px;
	border: 1px solid #ccc;
}

.select_area select {
	padding: 3px 20px;
	font-size: 18px;
}

.select_area_sintyou {
	margin-top: 25px;
}

.select_area_sintyou select {
	appearance: none;
	width: 100%;
	padding: 10px;
	font-size: 18px;
	border: 1px solid #ccc;
	text-align: center;
}

.select_area_sintyou p {
    background: #f3f3f3;
    border: 1px solid #ccc;
    text-align: center;
}

@media screen and (max-width: 768px) {
form {
	width: 55%;
}
}