@charset "utf-8";
/* CSS Document */


/* 固定 */
html { font-size: 62.5%; } 
html { scroll-behavior: smooth;}
body {
  margin: 0;
  padding: 0;
  position: relative;
-webkit-text-size-adjust: 100%; 
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.emoji-font {
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  display: inline-block;
  vertical-align: middle;
}


header{
    display:flex;
	height: 50px;
	width: 100%;
}
 
header div{
    display:flex;
	margin: 0 auto;
}
 
header div img{
    width: 50px;
	padding: 15px;
	margin-right: 10px;
	box-sizing: content-box;
}

		#main_wrap{
			width: 100%;
		}
		
		.cp{
			margin-top: 100px;
			font-size: 10px;
			color: #A2A2A2;
}
		.smp_haikei{
			display: none;
		}

.pagetop a {
  color: #333;
  position: fixed;
  bottom: 24px;
  right: 80px;
  text-decoration: none;
  display: block;
  width: 100px;
  padding: 16px 20px;
  text-align: right;
  transform: rotate(90deg);
  transform-origin: bottom right;
	font-size: 15px;
}

.pagetop .arrow1 {
width: 48px;
height: 1px;
background: #333;
position: absolute;
top: 50%;
right: 62px;
}

.pagetop .arrow2 {
width: 1px;
height: 12px;
background: #333;
position: absolute;
top: calc(50% + 1px);
right: 109px;
transform: rotate(-130deg);
transform-origin: top left;
}


/* 固定 */




/* ここから編集 */
.mv_item{
			width: 100%;
			position: relative;
			z-index: -9999;
		}

.haikei img{
	width: 100%;
	height: 100%;
}

		.mv_item_maintitle{
			position: absolute;
			top: 15%;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 999;
		}
		
		.mv_item_maintitle img{
			width: 50%;
		}

	.item_area{
		height: 100%;
		display: block;
		margin: 0 auto;
		max-width: 800px;
		}

		/*.item_area img{
			display: block;
			width: 100%;
		}*/


		.mv_item_text_2{
			text-align: center;
			color: #2F2F2F;
  			font-size: 2rem;
  			font-weight: 600;
  			line-height: 2em;
		}

.center_item{
	text-align: center;
}
		.item_center{
		position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
		}



	.pc_none{
		display: none;
	}
	.pc_block{
	display: block;
	}


/* --------------------------
スマホ
---------------------------- */

@media screen and (max-width: 640px) {

			.haikei{
				display: none;
			}
	.smp_none{
		display: none;
	}
	.smp_block{
	display: block;
	}
			.smp_haikei{
				display: block;
				width: 100%;
			}
			
			.smp_haikei img{
				display: block;
				width: 100%;
			}



	.mv_item_maintitle {
			top: 20%;
			}
			
	.mv_item_maintitle img {
		width: 100vw;
			}
		
	.cosme_icon{
		display: block;
		width: 80%;
		position: absolute;
		top: 60%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	.cosme_icon img{
	width: 80vw;
}

		.mv_item_text_2{
  			font-size: 1.6rem;
  			font-weight: 600;
  			line-height: 2em;
		}

		.item_area_wrap{
		margin-top: 30px;
		}
				
}




/* 年間ランキング用追記 */

.content_title {
text-align: center;
  font-size: 22px;
  position: relative;
  margin-top: 50px;
  letter-spacing: 1px; }
  .content_title img {
    max-width: 22px;
    margin-left: 15px; }
  .content_title small {
    position: relative;
    font-size: 14px;
    line-height: 30px; }
    .content_title small:before {
      position: absolute;
      content: '';
      left: -15px;
      top: 45%;
      content: 0;
      display: block;
      height: 1px;
      width: 8px;
      background: #000; }
    .content_title small:after {
      position: absolute;
      content: '';
      right: -15px;
      top: 45%;
      content: 0;
      display: block;
      height: 1px;
      width: 8px;
      background: #000; }
  .content_title #date {
    font-weight: 400;
    position: absolute;
    top: 60px;
    right: 2%;
    display: inline-block;
    color: #fff;
    background: #418586;
    font-size: 10px;
    border-radius: 20px;
    line-height: 30px;
    padding: 0 20px;
    margin-bottom: 5px; }
  .content_title + p {
	font-size: 18px;
	margin: 50px auto 80px;
		text-align: center;
	}
@media screen and (max-width: 640px) {
  .content_title + p {
	font-size: 14px;
	}
}


/* ナビゲーション用CSS */
/* ナビ全体：上部に固定される設定 */
.ranking-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

/* --- リストの基本（PC・広い画面） --- */
.nav-list {
  display: flex;
  justify-content: center; /* PCは中央寄せ */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* PCはゆったりした隙間 */
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  min-width: 80px; /* PCはある程度の幅を確保 */
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nav-item .icon { font-size: 20px; margin-bottom: 4px; }
.nav-item .text { font-size: 12px; font-weight: bold; color: #999; }

/* --- スマホ用の設定（画面幅767px以下） --- */
@media (max-width: 767px) {
  .nav-list {
    display: flex; /* 念のため再宣言 */
    gap: 0; /* 均等割りの時はgapを0にするか、含めて計算させる */
    padding: 0 5px;
  }
	  /* 【重要】直系の子要素である li に flex: 1 をかける */
  .nav-list li {
    flex: 1;
    min-width: 0; /* はみ出し防止 */
  }

  .nav-item {
    /* aタグの方は flex: 1 を外すか、幅100%にする */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    padding: 6px 0;
    min-width: 0; /* aタグのmin-width: 80pxを上書きして解除 */
  }

  .nav-item .icon { font-size: 18px; }
  .nav-item .text { 
    font-size: 9px; 
    transform: scale(0.85);
    white-space: nowrap;
    text-align: center;
  }
}
@media (hover: hover) {
  .nav-item:hover {
    background-color: rgba(0, 0, 0, 0.05); /* グレーのホバー */
  }
}
/* --- アクティブ時・ホバー時のカラー設定 --- */

/* 新人賞: #ffa700 */
.nav-item[href="#section-rookie"].active { background: #ffa7001a!important; text-decoration: none; }
.nav-item[href="#section-rookie"].active .text { color: #ffa700!important; }

/* コスメ: #ed6e8c */
.nav-item[href="#section-cosme"].active { background: #ed6e8c1a!important; text-decoration: none; }
.nav-item[href="#section-cosme"].active .text { color: #ed6e8c!important; }

/* ヘアケア: #007bff */
.nav-item[href="#section-haircare"].active { background: #007bff1a!important; text-decoration: none; }
.nav-item[href="#section-haircare"].active .text { color: #007bff!important; }

/* ボディケア: #55b9af */
.nav-item[href="#section-bodycare"].active { background: #55b9af1a!important; text-decoration: none; }
.nav-item[href="#section-bodycare"].active .text { color: #55b9af!important; }

/* ツール: #a1a1a1 */
.nav-item[href="#section-maketools"].active { background: #a1a1a11a!important; text-decoration: none; }
.nav-item[href="#section-maketools"].active .text { color: #a1a1a1!important; }

/* デンタル:  (#88cb7f) */
.nav-item[href="#section-dental"].active { background: #88cb7f1a!important; text-decoration: none; }
.nav-item[href="#section-dental"].active .text { color: #88cb7f!important; }

a:hover{text-decoration: none;}
/* アンカーリンクの着地地点を調整 */
section[id], div[id] {
  scroll-margin-top: 100px; /* ナビの高さ（約80px）+ 少しの余裕（20px） */
}




/* ランキングエリア */
 /* --- 全体デザインベース --- */
        body { margin: 0; padding: 0; background-color: #fff; color: #333; line-height: 1.6; }
        #ranking-app { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

        /* 部門ごとのセクション容器 */
        .category-section { padding: 60px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

        /* 部門見出し */
        .cat-header { text-align: center; margin-bottom: 40px; padding: 0 15px; }
        .cat-title { font-family: "Times New Roman", serif; font-size: 32px; letter-spacing: 0.15em; margin-bottom: 15px; position: relative; display: inline-block; padding-bottom: 10px; font-weight: bold; }
        .cat-title::after { content: ''; position: absolute; bottom: 0; left: 25%; width: 50%; height: 1px; background: currentColor; }
        .cat-desc { font-size: 13px; line-height: 1.8; max-width: 750px; margin: 0 auto; color: #555; letter-spacing: 0.05em; }

        /* 商品カード一覧の枠 */
        .ranking-wrapper { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 15px; max-width: 1200px; margin: 0 auto; justify-content: center; }

        /* 商品カード基本設計 */
        .product-rank { 
            box-sizing: border-box; background: #fff; display: flex; overflow: hidden; 
            border: none; border-top: 4px solid; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; 
        }
        .product-rank:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

        /* 左側（画像エリア） */
        .p-left-box { padding: 25px; text-align: center; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
        .r-badge { margin-bottom: 15px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
        .p-img-box { width: 100%; display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; background: #ffffff; overflow: hidden; }
        .p-img-box img { width: 100%; height: auto; max-width: 300px; display: block; border: 0;  width: 100%; height: 100%; object-fit: cover; /* 画像を枠に合わせる */ }

        /* 右側（情報エリア） */
        .p-right-box { flex-grow: 1; padding: 30px; display: flex; flex-direction: column; min-width: 0; background: #fff; }
        .p-info-inner { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
        .p-copy { font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.05em; font-style: italic; }
        .p-name { font-size: 16px; color: #111; line-height: 1.6; font-weight: bold; margin-bottom: 5px; }
        .p-cat { font-size: 11px; color: #999; letter-spacing: 0.05em; margin-bottom: 20px; }

        /* ブランドをチェックボタン */
				.brand-btn { 
						text-decoration: none; font-size: 11px; padding: 14px; border-radius: 2px; 
						display: block; text-align: center; width: 100%; box-sizing: border-box; 
						margin-top: auto; font-weight: bold; letter-spacing: 0.15em; text-transform: uppercase;
						transition: all 0.3s ease; border: 1px solid transparent; 
						/* color: #fff !important; を削除し、以下に変更 */
						color: #ffffff; 
				}

				/* ホバー時の挙動（背景を白、枠線を部門の色に） */
				.brand-btn:hover { 
						text-decoration: none;
						background: #ffffff !important; 
						border-color: currentColor !important;
				}

        /* --- PC版レイアウト (768px以上) --- */
        @media screen and (min-width: 768px) {
            .rank-1 { width: 100%; flex-direction: row; }
            .rank-1 .p-left-box { width: 50%; padding: 30px; }
            .rank-1 .p-right-box { padding: 30px; text-align: left; }
            .rank-1 .p-name { font-size: 20px; }
            
            .rank-top { width: calc(50% - 10px); flex-direction: column; text-align: center; }
            .rank-others { width: calc(33.33% - 14px); flex-direction: column; text-align: center; }
            
            .rank-top .p-left-box, .rank-others .p-left-box{padding-bottom: 0;}
						.rank-top .p-left-box, .rank-top .p-right-box, 
            .rank-others .p-left-box, .rank-others .p-right-box { width: 100%; align-items: center; }
        }

        /* --- スマホ版レイアウト (767px以下) --- */
        @media screen and (max-width: 767px) {
        		.ranking-wrapper { gap: 10px;}
            .rank-1, .rank-top { width: 100%!important; flex-direction: row!important; display: flex!important;}
            .rank-1 .p-left-box, .rank-top .p-left-box { width: 50%!important; padding: 15px!important; flex-shrink:0!important; }
            .rank-1 .p-right-box, .rank-top .p-right-box { width: 50% !important; padding: 15px 15px 15px 0; text-align: left; display: flex;}

        		.p-copy { font-size: 11px;}

            .rank-others { width: calc(50% - 5px); flex-direction: column; text-align: center; }
            .rank-others .p-left-box, .rank-others .p-right-box { width: 100%; padding: 10px; }
            .p-name { font-size: 12px; }
            .brand-btn { padding: 10px; font-size: 10px; }
        }




/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time01{
animation-delay: 0.5s;
}

.delay-time02{
animation-delay: 1s;
}

.delay-time03{
animation-delay: 1.5s;
}

.delay-time04{
animation-delay: 2s;
}

.delay-time05{
animation-delay: 2.5s;
}

.delay-time06{
animation-delay: 3s;
}



/*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeDown {
animation-name:fadeDownAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(0px);
  }

  to {
    opacity: 1;
	transform: translateY(-100px);
  }
}