@charset "UTF-8";

/* ===========================================================
    辞書（Dictionary）用CSS（湯ーとぴあ様風・表形式レイアウト）
   =========================================================== */

/* -----------------------------------------------------------
    全体レイアウト（2カラム）
----------------------------------------------------------- */
.dictionary-container {
    display: flex;
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 80px;
    align-items: flex-start;
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

#main.l-main {
    width: 100% !important;
    float: none !important;
}

.dictionary-main {
    flex: 1;
    min-width: 0;
}

.dictionary-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* -----------------------------------------------------------
    大見出し：用語集
----------------------------------------------------------- */
.dictionary-main .dc-ttl {
    text-align: center;
    font-size: 26px !important;
    font-weight: bold !important;
    color: #ff5000 !important;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
    letter-spacing: 0.05em;
}

.dictionary-main .dc-ttl::before {
    content: "DICTIONARY" !important;
    color: #111 !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 5px;
}

.dictionary-main .dc-ttl::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #ff5000 !important;
}

/* -----------------------------------------------------------
    アーカイブページ (一覧) - 表形式（リストのグリッド化）
----------------------------------------------------------- */
/* 五十音の見出し（あ行、か行など） */
.dic-row-head {
    margin: 40px 0 0;
    border-bottom: 2px solid #ddd;
}

.dic-row-head span {
    display: inline-block;
    padding: 8px 25px;
    background: #ff5000;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
}

/* リスト全体を表のような枠で囲む */
.dic-row-body {
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
    background: #fff;
    /* グリッドレイアウトで列を作る（PCは3列） */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important; /* 隙間をなくす */
}

/* 各単語のリンク（セルの役割） */
.dic-item {
    display: block !important;
    padding: 15px 20px !important;
    color: #111 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box;
    position: relative;
    padding-left: 30px !important; /* アイコン用の余白 */
}

/* 矢印アイコンの追加 */
.dic-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #ff5000;
    border-right: 2px solid #ff5000;
}

.dic-item:hover {
    background: #fdf5f0 !important; /* ホバー時の背景色 */
    color: #ff5000 !important;
}


/* -----------------------------------------------------------
    個別ページ (single-dictionary.php)
----------------------------------------------------------- */
.p-dictionary-single__header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ff5000;
}

.p-dictionary-single__reading {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    display: block;
}

.p-dictionary-single__title {
    font-size: 28px;
    font-weight: bold;
    color: #111;
    margin: 0;
    line-height: 1.4;
}

.p-dictionary-single__content {
    line-height: 1.8;
}

/* 本文内の自動リンク装飾 */
a.dictionary-auto-link {
    color: #ff5000 !important;
    font-weight: bold;
    text-decoration: underline !important;
}

a.dictionary-auto-link:hover {
    color: #ea5504 !important;
    text-decoration: none !important;
}

/* -----------------------------------------------------------
    関連記事 (single-dictionary.php 下部)
----------------------------------------------------------- */
.p-related {
    margin-top: 60px;
}

.p-related__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.p-related__item {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

.p-related__item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
}

.p-related__link {
    display: block !important;
    text-decoration: none !important;
    color: #111 !important;
}

.p-related__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f8f8fa;
}

.p-related__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.p-related__item:hover .p-related__thumb img {
    transform: scale(1.05);
}

.p-related__cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: #ff5000;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px;
    z-index: 2;
    border: 1px solid #ff5000;
}

.p-related__date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #ff5000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.1;
    z-index: 2;
}

.p-related__date span {
    display: block;
}

.p-related__date .m { font-size: 12px; }
.p-related__date .d { font-size: 18px; font-weight: bold; margin: 2px 0; }
.p-related__date .y { font-size: 10px; opacity: 0.9; }

.p-related__body {
    padding: 15px 20px !important;
}

.p-related__title {
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* -----------------------------------------------------------
    サイドバーの幅調整
----------------------------------------------------------- */
.dictionary-sidebar #side {
    width: 100% !important;
    padding-bottom: 0 !important;
}

.dictionary-sidebar #side img {
    width: 100% !important;
    height: auto !important;
}

/* -----------------------------------------------------------
    SP（スマホ）用レイアウト調整（768px以下）
----------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .dictionary-container {
        flex-direction: column;
        padding-top: 30px;
        gap: 40px;
    }
    .dictionary-sidebar {
        width: 100%;
    }
    
    /* スマホでは表を1列にする */
    .dic-row-body {
        grid-template-columns: 1fr !important;
    }
    
    .dictionary-main .dc-ttl {
        font-size: 22px !important;
    }
    .p-dictionary-single__title {
        font-size: 22px;
    }
    .p-related__list {
        grid-template-columns: 1fr !important;
    }
}


/*-- ranking box --*/	
.dic2-ranking {
	list-style: none;
	padding-left: 0; 
	margin: 0;
	}

.dic2-ranking__link { 
	display:flex; 
	gap: 4px; 
	align-items: center; 
	text-decoration:none;
    font-weight: 700;
}
.dic2-ranking__rank { 
	font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 5px;
	}
.dic-ranking2__title { 
	flex: 1; 
    font-size: 16px;
    font-weight: 500;
	}
.dic-ranking2__reading { display:block; font-size: 0.9em; opacity: .8; margin-top: 2px; }
.dic-ranking2__pv { font-size: 0.9em; opacity: .8; white-space: nowrap; }

h3.dictionary2-ttl {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	position: relative;
	margin: 100px auto 20px auto;
}
h3.dictionary2-ttl:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    content: "";
    border: 2px solid #333;
    bottom: -10px;
    display: block;
    width: 100px;
    height: 2px;
}
h3.dictionary2-ttl span {
	font-size: 16px;
	font-weight: normal;
	display: block;
}
h3.dic2-ttl {
	font-weight: 600;
	font-size: 24px;
	margin: 4% 0 2% 0;
	position: relative;
}
.news__single__heading {
    border: none;
}
h4.dic2-ttl2 {
	margin-top: 8%;
	font-size: 14px;
	font-weight: 600;
}
.dictionary2__content {
    margin: 20px auto 50px auto;
	width: 95%;
}
a.dictionary2-link {
	font-size: calc(100% + 1px);
	text-decoration: underline;
	opacity: 0.9;
}
a.btn__dic2 {
	font-size: 18px;
	font-family: "Oswald", sans-serif;
	letter-spacing: 0.01em;
	font-weight: 300;
	width: 170px;
    height: 35px;
    padding-bottom: 5px;
	line-height: 50px;
	text-align: center;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border: 1px solid #222222;
	margin:10% auto 5% auto;
}
a.btn__dic img {
	width: 20px;
	height: auto;
}
    .page::before {
        display: none; 
	}
	
.dic2-ranking__item.is-rank-1 .dic2-ranking__rank {
    font-size: 32px;
    color: #c5b358;
    display: block;
    padding: 0 5px;
	min-width: unset;
	font-family: 'Tangerine' , cursive;
}

.dic2-ranking__item.is-rank-2 .dic2-ranking__rank {
  font-size: 32px;
    color: #666;
    display: block;
    padding: 0 5px;
	min-width: unset;
	font-family: 'Tangerine' , cursive;
}

.dic2-ranking__item.is-rank-3 .dic2-ranking__rank {
  font-size: 32px;
    color: #AF5F39;
    display: block;
    padding: 0 5px;
	min-width: unset;
	font-family: 'Tangerine' , cursive;
}

li.dic2-ranking__item {
    margin: 0 auto 20px auto;
}

span.dic2-ranking__title {
    color: #246C88;
    font-size: 20px;
    border-bottom: #246c82 1px solid;
    display: block;
    width: fit-content;
	line-height: 1;
}
span.dic2-ranking__reading {
    display: block;
    text-decoration: none!important;
    font-size: 12px;
    padding: 2% 0 0 0;
}
.dictionary-rank__content.dictionary__content{
    border: 4px solid #ddd;
    border-left: none;
    border-right: none;
    max-width: 600px;
    margin: 0 auto;
}
.dictionary-rank__content li.dic2-ranking__item {
    border-bottom: 4px solid #ddd;
    margin-bottom: 0;
}
.dictionary-rank__content .dic2-ranking__item.is-rank-1 .dic2-ranking__rank,
.dictionary-rank__content .dic2-ranking__item.is-rank-2 .dic2-ranking__rank,
.dictionary-rank__content .dic2-ranking__item.is-rank-3 .dic2-ranking__rank{
    font-size: 60px;
}
.dictionary-rank__content a.dic2-ranking__link {
    height: 100px;
}
.dictionary-rank__content .pagination {
    margin: 30px auto;
}
.dictionary-rank__content .pagination .page-numbers{
    font-weight: 700;
}
.dictionary-rank__content .pagination span{
    font-size: 18px;
}
.dictionary-rank__content .pagination a{
    font-size: 14px;
}
@media (min-width: 768px){
	.dic-rank-box .dic2-ranking {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}
	.dic-rank-box .is-rank-1,
	.dic-rank-box .is-rank-2,
	.dic-rank-box .is-rank-3 {
    width: fit-content;
		min-width: 30%;
    }
	.dic-rank-box .is-rank-4,
	.dic-rank-box .is-rank-5 {
        width: 49%;
        text-align: center;
    }
    .dic-rank-box .dic2-ranking__link {
        justify-content: center;
    }
     .dictionary-rank__content .pagination {
        margin-top: 40px;
    }
}
	
@media (min-width: 1440px){
	.dic-rank-box .is-rank-4,
	.dic-rank-box .is-rank-5 {
        width: fit-content;
    }
    .dic-rank-box .dic2-ranking__link {
        justify-content: flex-start;
    }
    .dic-rank-box .is-rank-1,
    .dic-rank-box .is-rank-2,
    .dic-rank-box .is-rank-3 {
		min-width: unset;
	}
}
.p-related + .dic-rank-box{
  margin-top: 50px;
}