@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 円グラフ */
.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #FFF1B7;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #FFBD59;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 20px); /* バーの太さを80pxに設定 */
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 120px, 200px, 0); /* バーの太さを80pxに設定 */
  background: #FFBD59;
  transform: rotate(0deg); /* 初期状態を0度に設定 */
  transition: transform 1s ease-in-out; /* トランジションプロパティを追加 */
}

.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #FFF1B7;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.9130434783px/2);
  top: calc(50% - 173.9130434783px/2);
  width: 173.9130434783px;
  height: 173.9130434783px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #FF3131;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

body {
  font-family: Arial;
  background: #f7f7f7;
}

.progress-pie-chart {
  margin: 50px auto 0;
}

.score-label {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px; /* 数値との間隔を調整 */
}

/* カテゴリ一覧をグリッド形式に */
.category-list-with-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PCでは強制的に5列 */
    gap: 15px; /* アイテム間の余白 */
    padding: 15px; /* 全体の余白 */
    max-width: 1200px; /* サイトの最大幅 */
    margin: 0 auto; /* 中央揃え */
    width: 100%; /* コンテナを画面幅に合わせる */
}

/* カテゴリ名のスタイルを調整 */
.category-name {
    display: block;
    margin-top: 5px !important; /* 現在の1pxから5pxに増やして隙間を追加（調整可能） */
    margin-bottom: 10px; /* 下部に余白を維持（必要に応じて調整） */
    font-size: 14px; /* 文字サイズ（必要に応じて維持） */
    color: #007bff; /* 藍色（必要に応じて維持） */
    font-weight: bold; /* 太字（必要に応じて維持） */
    text-decoration: none; /* リンクの下線を消す（必要に応じて維持） */
    line-height: 1; /* 行の高さを最小限に */
    padding-top: 0; /* 上部の余分なパディングを削除 */
}

/* 親要素（.category-item）の調整 */
.category-item {
    text-align: center; /* 中央揃えを維持 */
    padding: 0; /* 余分なパディングを削除 */
    margin: 0; /* 余分なマージンを削除 */
}

/* 画像の調整 */
.category-item img {
    max-width: 100%; /* コンテナ幅にフィット */
    height: auto; /* 縦横比を維持 */
    border-radius: 8px; /* 角を維持 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を維持 */
    display: block; /* 画像をブロック要素にして、余計な隙間を防ぐ */
    margin: 0 auto; /* 中央揃え */
    vertical-align: top; /* 画像の上部を基準に配置 */
}

/* リンク全体のホバーエフェクト */
.category-item a:hover img {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* レスポンシブ対応: タブレット（768px以下） - 5列 */
@media (max-width: 768px) {
    .category-list-with-thumbnails {
        grid-template-columns: repeat(5, 1fr); /* 5列固定 */
    }
}

/* レスポンシブ対応: スマホ（480px以下） - 3列 */
@media (max-width: 480px) {
    .category-list-with-thumbnails {
        grid-template-columns: repeat(3, 1fr); /* 3列固定 */
        gap: 10px; /* 余白を小さく */
        padding: 10px;
    }

    .category-item img {
        border-radius: 6px; /* 角を小さく */
    }

    .category-name {
        font-size: 12px; /* 文字サイズを小さく */
    }
}

/* カテゴリランキング10件表示 */
.random-image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PCで5列 */
    gap: 10px;
}

.random-image-grid figure {
    margin: 0;
    position: relative; /* ランキングラベルを絶対配置するために必要 */
}

.random-image-grid .ranking-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.8), rgba(255, 165, 0, 0.8)); /* 赤からオレンジのグラデーション */
    color: #fff; /* 文字色を白に */
    padding: 5px 10px;
    border-radius: 5px; /* ラベルの角を丸める */
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
    animation: glow 1.5s infinite; /* ラベルに光るエフェクトを適用 */
}

/* アニメーション効果: ラベルが光るように */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 69, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 165, 0, 1); /* オレンジの強調 */
    }
}

.random-image-grid img {
    border-radius: 10px; /* 画像の角を丸める */
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .random-image-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホで2列 */
    }
}

/* 新人デビュー */
.new-box {
    position: relative;
    float: left;

    width: 100%;
    height: auto;
    overflow: hidden;
}

.new-icon {
    position: absolute;
    top: 8px;
    left: -33%;
    transform: rotate(-35deg);
    width: 100%;
    padding: 3px 5% 2px 5%;
    color: #F12C47;
    background-color: #F93550;
    font-size: 1rem;
    line-height: 1;
    font-weight: bold;
    z-index: 9;
    color: #FFF;
    text-align: center;
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.6);
}

.new-pic {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 3px;
    overflow: hidden;
}

.new-debut {
    position: absolute;
    bottom: 5px;
    width: 100%;
    padding: 2px 0 1px 0;
    color: #F12C47;
    background-color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
}

.new-name {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    line-height: 0.8;
    margin: 0;
    padding: 0;
    position: relative;
    top: -2px;
}

@media screen and (max-width: 768px) {
    .new-icon {
    position: absolute;
    top: 8px;
    left: -20%;
    transform: rotate(-35deg);
    width: 100%;
    padding: 3px 5% 2px 5%;
    color: #F12C47;
    background-color: #F93550;
    font-size: 1rem;
    line-height: 1;
    font-weight: bold;
    z-index: 9;
    color: #FFF;
    text-align: center;
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.6);
}
}

@media screen and (max-width: 768px) {
  .new-name {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 0.625rem;
    line-height: 0.8;
    margin: 0;
    padding: 0;
    position: relative;
    top: -2px;
}
}
/* 新人デビュー */

/* グラデーション */
.cp_box1 {
  position: relative;
}
.cp_box1 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label {
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
  overflow: hidden;
  height: 250px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label:after {
  z-index: 2;
  bottom: 20px;
  width: 13em;
  content: '続きをよむ';
  color: #ffffff;
  background: #1b2538;
  border-radius: 20px;
}
.cp_box1 label::before {
  position: absolute;
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

/*コメント欄の送信ボタンを右側に*/
.form-submit {
    text-align: right;
}
/*コメント欄のh3を非表示*/
.p-commentArea__title{
	display: none;
}