@charset "UTF-8";



/* スマホ用 */
@media screen and (max-width:999px) {
    


/* スマホ用ランキング部分 */
.shareydva_ranking {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin: auto;
}
	

	
/*パーセント位置*/
	.officon{
		width: 18%; position: absolute; top: 7px; left: 7px;
	}

	
	.shareydva_ranking {
		display: flex;
		flex-wrap: wrap;
		margin: -20px auto 15px auto;
	}
	
	.shareydva_ranking a{
		font-size: 12px;
	}
    
	
.shareydva_ranking img{
	padding: 3px;
	margin-top: 10px;
		margin-bottom: 5px;
	}
    

.shareydva_ranking_midashi {
	width: 250px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}    

.shareydva_ranking_midashi div {
    width: 100%;
    text-align: center;
	border: solid 1px #000000;
	padding: 5px 5px;
    font-size: 18px;
    margin: 0 0 5px 0;
	color: #000000;
} 
    
.shareydva_ranking_newmidashi {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}    

.shareydva_ranking_newmidashi div {
    width: 32%;
    text-align: center;
	border: solid 1px #000000;
	padding: 5px 5px;
    font-size: 25px;
    margin: 0 0 5px 0;
	color: #000000;
} 

  
.shareydva_ranking_midashiblack {
	width: 50%;
    margin: auto;
}  
    
.shareydva_ranking_midashiblack div {
    width: 40%;
    text-align: center;
	border: solid 1px #000000;
    background-color: #474a4d;
	padding: 5px 5px;
    font-size: 25px;
	color: #ffffff;
}
	
	
.tab-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 子要素を中央寄せ */
  gap: 5px;
}

.tab-2 > label {
  width: 250px;
  text-align: center;
  background: #fff;
  color: #4B4B4B;
  padding: .5em 1em;
  cursor: pointer;
  opacity: .5;
	border: solid 1px #4B4B4B;
	font-weight: normal;
	font-size: 18px;
}

/* ラベル3つを上段に固定（orderで並び替え） */
.tab-2 > label:nth-of-type(1) { order: 1; }
.tab-2 > label:nth-of-type(2) { order: 2; }
.tab-2 > label:nth-of-type(3) { order: 3; }

/* 中身(div)はその下に来るように order を大きくする */
.tab-2 > div { 
  order: 10; 
  width: 100%; 
  display: none;
  padding: 1.5em 0;
  background: #fff;
	
}

.tab-2 > label:hover {
    opacity: .8;
	background-color: #F0F0F0;
	
}

.tab-2 input {
    display: none;
}


.tab-2 label:has(:checked) {
    opacity: 1;
	font-weight: normal;
}

.tab-2 label:has(:checked) + div {
    display: block;
	
}	
	
	
/*パーセント位置*/
.officon{
		width: 20%; 
		position: absolute; 
		top: 7px; 
		left: 7px;
	}	

	
.rankingbox{	
	width: 50%;
	position: relative;
    margin: 0 auto 15px auto;
	text-align: center;
	line-height: 15px;
		
	}
	
	.shareydva_ranking a{
		font-size: 12px;
	}
	
.shareydva_ranking img{
	padding: 3px;
	margin-bottom: 5px;
	text-align: center;
	}	
	
    


    
/* スマホ用コンセプト部分 */
    
.shareydva_concept_container {
  display: flex;
    margin: auto;
}
    
.shareydva_concept_img{
        width: 70%;
    margin-left:auto
    }
    
.shareydva_concept_text {
    position: absolute;
width: 85%;
  margin-left: 30px;
  padding-top: 15px;
}
.shareydva_concept_text_p {
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  margin-bottom: 20px;
 font-size: 18px;
margin-left: -20px;
}
.shareydva_concept_text_h1 {
  font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
font-weight:bold;
  color: #554738;
  font-size: 40px;
  text-transform: uppercase;
  margin-left: -20px;
  margin-bottom: 5px;
}
    
/* スマホ用ブランドプロミス部分 */
    
.shareydva_brandpromise_container {
  display: flex;
    margin: auto;
}
    
.shareydva_brandpromise_img{
    position: relative;
        width: 30%;
    opacity: 40%;
    }
    
.shareydva_brandpromise_text {
position: absolute;
width: 85%;
  margin-left: 30px;
  padding-top: 15px;
}
.shareydva_brandpromise_text_p {
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  margin-bottom: 20px;
 font-size: 15px;
margin-left: 5px;
}
.shareydva_brandpromise_text_h1 {
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
    font-weight:bold;
  color: #554738;
  font-size: 40px;
  text-transform: uppercase;
  margin-left: 5px;
  margin-bottom: 10px;
}


}


/* PC用 */
@media print, screen and (min-width:1000px) {
    

  
/* PC用ランキング部分 */
	
	.rankingbox{	
	width: 16%;
	position: relative;
    margin: 0 auto 15px auto;
		text-align: center;
		line-height: 15px;
		
		
	}
	
/*パーセント位置*/
	.officon{
		width: 18%; position: absolute; top: 7px; left: 7px;
	}

	
	.shareydva_ranking {
		display: flex;
		flex-wrap: wrap;
		margin: -20px auto 15px auto;
	}
	
	.shareydva_ranking a{
		font-size: 12px;
	}
    
	
.shareydva_ranking img{
	padding: 3px;
	margin-top: 10px;
		margin-bottom: 5px;
	}
    
.shareydva_ranking_midashi div {
    width: 250px;
  text-align: center;
  background: #fff;
  color: #4B4B4B;
  padding: .5em 1em;
  cursor: pointer;
	border: solid 1px #4B4B4B;
	font-weight: normal;
	font-size: 18px;
}

	
	
.tab-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 子要素を中央寄せ */
  gap: 10px;
}

.tab-2 > label {
  width: 250px;
  text-align: center;
  background: #fff;
  color: #4B4B4B;
  padding: .5em 1em;
  cursor: pointer;
  opacity: .5;
	border: solid 1px #4B4B4B;
	font-weight: normal;
	font-size: 18px;
}

/* ラベル3つを上段に固定（orderで並び替え） */
.tab-2 > label:nth-of-type(1) { order: 1; }
.tab-2 > label:nth-of-type(2) { order: 2; }
.tab-2 > label:nth-of-type(3) { order: 3; }

/* 中身(div)はその下に来るように order を大きくする */
.tab-2 > div { 
  order: 10; 
  width: 100%; 
  display: none;
  padding: 1.5em 0;
  background: #fff;
	
}

.tab-2 > label:hover {
    opacity: .8;
	background-color: #F0F0F0;
	
}

.tab-2 input {
    display: none;
}


.tab-2 label:has(:checked) {
    opacity: 1;
	font-weight: normal;
}

.tab-2 label:has(:checked) + div {
    display: block;
	
}
    
    
/* PC用コンセプト部分 */
    
.shareydva_concept_container {
  display: flex;
    margin: auto;
}
    
.shareydva_concept_img{
        width: 60%;
   margin-left:auto;
    }
    
.shareydva_concept_text {
    position: absolute;
width: 90%;
  margin-left: 30px;
  padding-top: 30px;
}
.shareydva_concept_text_p {
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  margin-bottom: 20px;
 font-size: 30px;
}
.shareydva_concept_text_h1 {
  color: #554738;
  font-size: 85px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
    
    
/* PC用ブランドプロミス部分 */
    
.shareydva_brandpromise_container {
  display: flex;
    margin: auto;
}
    
.shareydva_brandpromise_img{
    position: relative;
        width: 20%;
    }
    
.shareydva_brandpromise_text {
    position: absolute;
width: 78%;
  margin-left: 30px;
  padding-top: 30px;
}
.shareydva_brandpromise_text_p {
font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  margin-bottom: 20px;
 font-size: 30px;
    margin-left: 250px;
}
.shareydva_brandpromise_text_h1 {
  color: #554738;
  font-size: 85px;
  text-transform: uppercase;
  margin-left: 150px;
  margin-bottom: 20px;
}
    

	
}