/*  TOPページ改修_20250819 */
/* スライダー */
@media screen and (max-width: 767px) {
    .index_main{
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }
}
/* ランキング */

.heading_03{
    font-size: 2rem;
    text-align: center;
        position: relative;
    padding: .5em .7em;
    background-color: #fc5d2e;
    width: 950px;
    margin: auto;
    color: #fff;
}

.heading_03::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #cd461e;
    content: '';
}

.heading_text{
    text-align: center;
    margin: 10px 0 20px 0;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .heading_text {
        font-size: 16px;
    }
}

.category-ranking__wrap {
    margin-bottom: 30px;
    padding: 10px;
    border-radius: 5px;
}

@media screen and (min-width: 768px) {
    .category-ranking__wrap {
        padding: 15px;
    }
}

.category-ranking__wrap {
    margin-bottom: 50px !important;
}

@media screen and (max-width: 767px) {
    .heading_03 { 
        max-width: 100%;
        /* overflow: hidden; */
        height: auto;
        font-size: 1.2rem;
    }
}

.pc {
    display: none;
}

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

.icon-crown {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    background-image: url(/html/user_data/assets/img/common/icon_crown.svg);
}

.ranking-list_inr {
    overflow-x: scroll;
}

@media screen and (min-width: 768px) {
    .ranking-list_inr {
        overflow-x: auto;
    }
}

.ranking-list_inr ul {
    display: flex;
    width: max-content;
    background: #fff;
}

@media screen and (min-width: 768px) {
    .ranking-list_inr ul {
        width: 100%;
    }
}

.ranking-list_inr li {
    width: 120px;
}

@media screen and (min-width: 768px) {
    .ranking-list_inr li {
        width: calc((100% - 120px) / 5);
    }
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
}

.ranking-list_inr a {
    display: flex;
    padding: 0 10px;
    flex-direction: column;
    transition: all 0.2s;
        text-decoration: none !important;
    color: inherit; /* 青文字も消したい場合 */
}

.ranking-list_inr .ranking_num {
    position: initial;
    background: none;
    margin-bottom: 5px;
    padding: 0;
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    color: #555;
    line-height: 1.2;
    background-image: url(/html/user_data/assets/img/common/icon_rank-back.webp);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: 2px;
    font-size: 1.3rem;
}

.ranking-list_inr li .ranking_num:before {
    font-size: 2rem;
    font-weight: bold;
}

.ranking-list_inr ul {
    counter-reset: rank;
    gap: 30px;
}

.ranking-list_inr li .ranking_num:before {
  counter-increment: rank;
  content: counter(rank);
  font-size: 2rem;
  font-weight: bold;
}

/* 1位 */
.ranking-list_inr li:nth-of-type(1) .ranking_num { color: #dbb20b; }
/* 2位 */
.ranking-list_inr li:nth-of-type(2) .ranking_num { color: #9e9e9e; }
/* 3位 */
.ranking-list_inr li:nth-of-type(3) .ranking_num { color: #cd7f32; }
/* 4位 */
.ranking-list_inr li:nth-of-type(4) .ranking_num { color: #007bff; }
/* 5位 */
.ranking-list_inr li:nth-of-type(5) .ranking_num { color: #28a745; }


.item_info{
    margin-top: 10px;
}

.item_name{
    min-height: 3em;
    line-height: 1.3;
    font-size: 15px;
    font-weight: bold;
}

.item_info .lot {
    color: #8d8d8d;
    line-height: 1.5em;
}

.name_calendar_btn{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 30px;
    border: 2px solid #ccc;
    border-radius: 30px;
    width: 500px;
    margin: 20px auto 0 auto;
    padding: 10px;
}

.name_calendar_btn a{
    position: relative;
    color: #000;
    text-decoration: none;
}

.name_calendar_btn a::after{
    content: "";
    border-bottom: 2px solid #fc5d2e;
    border-right: 2px solid #fc5d2e;
    transform: rotate(-45deg);
    width: 6px;
    height: 6px;
    position: absolute;
    right: -38px;
    top: 9px;
}

@media screen and (max-width: 767px) {
    .name_calendar_btn{
        width: auto;
        font-size: 0.8rem;
    }

    .name_calendar_btn a::after {
        right: -14px;
        top: 5px;
    }
}


.item_info .price {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    margin: 0 auto 10px auto;
}

.price .total_price{
    display: block;
    color: #e50000;
    line-height: 1;
    font-size: 19px;
    font-weight: bold;
}

.price .unit_price{
    display: block;
    line-height: 1;
    font-size: 12px;
}

.price .unit_price::after{
    content: '(税込)';
    padding-left: 5px;
}

/* 名入れプリント・ふるオリジナルデザイン */
.center_parts_sct{
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.pl1p {
    padding-left: 0;
}

.pR1p {
    padding-right: 0;
}

@media screen and (max-width: 767px) {
    .center_parts_sct {
    flex-direction: column;
    }
}

/* 当サイトが選ばれる理由 */
.content_top {
    /* padding-bottom: 70px; */
    margin-top: 50px;
    margin-bottom: 30px;
}

.heading_02 {
    padding-bottom: 30px;
    color: #fc5d2e;
    font-size: 20px;
}

@media (min-width: 768px) {
    .heading_02 {
        font-size: 36px;
    }
}

.flex_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 40px;
}

li {
    list-style: none;
}

li {

    margin: 0;
}

img, abbr, acronym, fieldset {
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}


.flex_wrap li {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .flex_wrap .col_2 {
        width: calc((100% - 40px) / 2);
    }
}


img {
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: bottom;
}

.flex_wrap img {
    margin: 0 auto;
}

.flex_wrap li h3 {
    font-size: 20px;
}

.flex_wrap li p {
    font-size: 14px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .flex_wrap li p {
        font-size: 16px;
        line-height: 1.6;
    }
}

.flex_wrap li span {
    font-size: 12px;
}

.questionnaire_investigation{
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
}

.flex_wrap a{
    font-size: 12px;
    line-height: 1.6;
}



/* カレンダー用デザインテンプレート */

.index_cal_option ul{
    gap: 20px;
    display: flex;
}

/* 名入れカレンダーの販促実績 */
.heading_02_text{
    font-size: 1.1rem;
}

.content_top p{
    margin-bottom: 15px;
}


/* まずはお気軽にご相談ください */
.inquiry_wrap {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}

@media (min-width: 768px) {
    .inquiry_wrap {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

a.btn_inquiry {
    display: block;
    position: relative;
    width: 430px;
    max-width: 100%;
    background: #8ed221;
    color: #fff;
    padding: 15px 15px 15px 35px;
    border-radius: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
}

a.btn_inquiry:link {
    text-decoration: none;
    color: #fff;
}

a.btn_inquiry:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 18px;
    top: 35%;
    left: 34px;
    background-position: center;
    background: no-repeat 0 0 / contain;
    background-image: url(/img/common/icon_mail.svg);
}

.btn_inquiry {
    box-shadow: none;
}



/* よくある質問 */
.faq-container {
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #ccc;
    padding: 1em 0;
    font-size: 15px;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    padding: 0;
    position: relative;


  outline: none;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    font-weight: bold;
    color: #16aae3;

      transition: transform 0.2s;
}

.faq-item.active .faq-question::after {
  content: "-";
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;

      display: none; /* 最初は非表示 */
  margin-top: 10px;
}

.faq-answer.show {
    max-height: max-content;
    opacity: 1;
    margin-top: 0.5em;
}


.faq-item.active .faq-answer {
  max-height: 500px; /* 内容が収まるくらい大きめに */
  padding: 16px;
    display: block; /* activeが付いたときに表示 */
}

/* 関連サイト */
.flex_wrap li .highlight {
    font-size: 16px;
    background: linear-gradient(to top, #fff59d 40%, transparent 40%);
}


/* カレンダーおススメはこちら */
/* .calendar_recommendation{
    margin-top: 30px;
} */