@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
*/



/* ========================================
   「この記事を書いた人」セクションを完全削除
   ======================================== */


section.l-articleBottom__section.-author {
    display: none;
}
.p-authorBox,
.c-authorBox,
.author-box,
.entry-author-info {
    display: none !important;
}

/* アバター画像も削除 */
.author-avatar,
.p-authorBox__avatar {
    display: none !important;
}

/* 投稿者名も削除 */
.p-authorBox__name,
.entry-author-name {
    display: none !important;
}

/* ========================================
   スライダー専用CSS
   ======================================== */

.temp-section {
    padding: 40px 20px;
    margin: 20px 0;
    border: 2px dashed #ccc;
    background: #f9f9f9;
    text-align: center;
    border-radius: 8px;
}

.temp-section h2 {
    color: #666;
    margin: 0 0 10px 0;
    font-size: 18px;
}

.temp-section p {
    color: #888;
    margin: 0;
    font-size: 14px;
}

.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 40px;
}

.hero-section h1 {
    font-size: 48px;
    margin: 0 0 20px 0;
    font-weight: bold;
}

.hero-section p {
    font-size: 20px;
    margin: 0;
    opacity: 0.9;
}

.custom-content-section {
    background: #fff;
    padding: 60px 20px;
    border-left: 4px solid #667eea;
    margin: 40px 0;
}

.ad-banner-section {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
    padding: 40px 20px;
    text-align: center;
    border-radius: 12px;
    margin: 40px 0;
}

.special-section {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    padding: 50px 20px;
    text-align: center;
    border-radius: 15px;
    margin: 40px 0;
}

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 32px;
    }
    
    .hero-section p {
        font-size: 16px;
    }
    
    .temp-section,
    .custom-content-section,
    .ad-banner-section,
    .special-section {
        padding: 30px 15px;
        margin: 20px 10px;
    }
}

/* ピックアップ記事＋スライダー用CSS - style.css に追加 */

/* =================================
   ピックアップセクション全体
================================= */

.pickup-slide-section {
    margin-bottom: 60px;
    padding: 0 20px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.section-count {
    background: #f0f0f0;
    color: #666;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* =================================
   ピックアップ記事部分
================================= */

.pickup-article-wrapper {
    margin-bottom: 40px;
}

.pickup-article {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pickup-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.pickup-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.pickup-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pickup-article:hover .pickup-thumbnail {
    transform: scale(1.05);
}

.pickup-no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
    font-weight: bold;
}

/* =================================
   オーバーレイテキスト
================================= */

.pickup-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 40px 30px 30px 30px;
}

.pickup-category-label {
    background: #ff6b6b;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.pickup-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 15px 0;
}

.pickup-title a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pickup-title a:hover {
    color: #ff6b6b;
}

.pickup-excerpt {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.9;
}

.pickup-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.pickup-date {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.pickup-read-more {
    background: #ff6b6b;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pickup-read-more:hover {
    background: #ff5252;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* =================================
   関連記事スライダー部分
================================= */

.related-slides-wrapper {
    margin-top: 40px;
}

.related-slides-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #ff6b6b;
}

.related-swiper {
    margin-bottom: 30px;
}

.related-card {
    border: 1px solid #e0e0e0;
    background: #fff;
}

.related-card:hover {
    border-color: #ff6b6b;
}

/* =================================
   レスポンシブ対応
================================= */

@media (max-width: 768px) {
    .pickup-slide-section {
        padding: 0 15px;
        margin-bottom: 50px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .pickup-image {
        height: 280px;
    }
    
    .pickup-overlay {
        padding: 25px 20px 20px 20px;
    }
    
    .pickup-title {
        font-size: 20px;
    }
    
    .pickup-excerpt {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .pickup-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .pickup-read-more {
        align-self: stretch;
        text-align: center;
    }
    
    .related-slides-title {
        font-size: 18px;
    }
}

/* =================================
   カテゴリー別カラーカスタマイズ
================================= */

/* 例：グルメカテゴリー */
.pickup-slide-section.category-gourmet .pickup-category-label,
.pickup-slide-section.category-グルメ .pickup-category-label {
    background: #4CAF50;
}

.pickup-slide-section.category-gourmet .pickup-read-more,
.pickup-slide-section.category-グルメ .pickup-read-more {
    background: #4CAF50;
}

.pickup-slide-section.category-gourmet .pickup-read-more:hover,
.pickup-slide-section.category-グルメ .pickup-read-more:hover {
    background: #45a049;
}

.pickup-slide-section.category-gourmet .related-slides-title,
.pickup-slide-section.category-グルメ .related-slides-title {
    border-left-color: #4CAF50;
}

/* 例：ライフスタイルカテゴリー */
.pickup-slide-section.category-lifestyle .pickup-category-label,
.pickup-slide-section.category-ライフスタイル .pickup-category-label {
    background: #E91E63;
}

.pickup-slide-section.category-lifestyle .pickup-read-more,
.pickup-slide-section.category-ライフスタイル .pickup-read-more {
    background: #E91E63;
}

.pickup-slide-section.category-lifestyle .pickup-read-more:hover,
.pickup-slide-section.category-ライフスタイル .pickup-read-more:hover {
    background: #C2185B;
}

.pickup-slide-section.category-lifestyle .related-slides-title,
.pickup-slide-section.category-ライフスタイル .related-slides-title {
    border-left-color: #E91E63;
}


/* =================================
   ピックアップ記事部分
================================= */

/* スクエア画像表示用CSS - style.css に追加または既存CSSと置き換え */

/* =================================
   スクエア画像設定
================================= */

/* 通常のスライドカード画像をスクエアに */
.card-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1:1のアスペクト比（正方形） */
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.slide-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を切り抜いて正方形にフィット */
    transition: transform 0.3s ease;
}

.no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    font-weight: bold;
}

/* ピックアップ記事の画像もスクエアに */
.pickup-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 正方形 */
    overflow: hidden;
    border-radius: 15px;
}

.pickup-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pickup-no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
    font-weight: bold;
}

/* =================================
   カード全体の高さ調整
================================= */

/* スクエア画像に合わせてカードの高さを調整 */
.slide-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto; /* 高さを自動調整 */
    display: flex;
    flex-direction: column;
}

.slide-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.slide-card:hover .slide-thumbnail {
    transform: scale(1.05);
}

/* カードコンテンツ部分 */
.card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 8px 0;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-date {
    color: #888;
    font-size: 12px;
    margin-top: auto;
}

/* =================================
   レスポンシブ対応
================================= */

/* PC表示 */
@media (min-width: 1024px) {
    .card-image {
        border-radius: 8px 8px 0 0;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .card-title {
        font-size: 14px;
    }
}

/* タブレット表示 */
@media (min-width: 768px) and (max-width: 1023px) {
    .card-content {
        padding: 12px;
    }
    
    .card-title {
        font-size: 13px;
    }
    
    .card-date {
        font-size: 11px;
    }
}

/* スマホ表示 */
@media (max-width: 767px) {
    .card-image {
        border-radius: 8px 8px 0 0;
    }
    
    .card-content {
        padding: 12px;
    }
    
    .card-title {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .card-date {
        font-size: 11px;
    }
    
    /* スマホではピックアップ画像も少し小さく */
    .pickup-image {
        border-radius: 12px;
    }
}

/* =================================
   画像の切り抜き位置調整（オプション）
================================= */

/* 画像の切り抜き位置を調整したい場合 */
.slide-thumbnail {
    object-position: center center; /* 中央切り抜き（デフォルト） */
    /* object-position: center top; */ /* 上部を優先 */
    /* object-position: center bottom; */ /* 下部を優先 */
}

.pickup-thumbnail {
    object-position: center center;
}

/* =================================
   アスペクト比のバリエーション（必要に応じて使用）
================================= */

/* 正方形以外のアスペクト比を使いたい場合 */

/* 4:3の比率 */
.card-image.aspect-4-3 {
    padding-bottom: 75%; /* 4:3 */
}

/* 3:2の比率 */
.card-image.aspect-3-2 {
    padding-bottom: 66.67%; /* 3:2 */
}

/* 16:9の比率 */
.card-image.aspect-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
}

/* =================================
   スクエア画像専用の装飾（オプション）
================================= */

/* スクエア画像に枠線を追加 */
.card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

.slide-card:hover .card-image::after {
    border-color: rgba(255, 107, 107, 0.3);
}

/* スクエア画像に影を追加 */
.card-image {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* =================================
   カテゴリー別のスクエア画像カスタマイズ
================================= */

/* 例：特定のカテゴリーは円形に */
.category-profile .card-image,
.category-プロフィール .card-image {
    border-radius: 50%;
}

.category-profile .slide-thumbnail,
.category-プロフィール .slide-thumbnail {
    border-radius: 50%;
}

/* 例：特定のカテゴリーは角を丸く */
.category-lifestyle .card-image,
.category-ライフスタイル .card-image {
    border-radius: 15px 15px 0 0;
}

/* 例：特定のカテゴリーは枠線付き */
.category-business .card-image,
.category-ビジネス .card-image {
    border: 3px solid #4CAF50;
}

/* =================================
   ピックアップブログ
================================= */

/* Swiper Base Styles */
@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1
}

.swiper-container-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/44*27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1*var(--swiper-navigation-size)/2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next:after,.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial
}

.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px
}

/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    min-height: 100%;
    width: 100%;
    font-size: 62.5%
}

html,body {
    position: relative
}

body {
    width: 100%;
    margin: 0;
    padding: 0
}

img {
    border: none
}

ol,ul {
    list-style: none
}

p,dt,dd,li {
    font-size: 1.6rem;
    line-height: 2
}

em {
    font-weight: inherit
}

picture {
    display: block
}

:root {
    --main-color: #5cc7c2;
    --main-light-color: #e4f8f7;
    --accent-color: #fafa92;
    --accent-light-color: #ffffd3
}

body {
    font-family: "游ゴシック","游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
    text-justify: inter-ideograph;
    word-wrap: break-word;
    color: #000;
    line-break: strict;
    overflow-wrap: break-word;
    letter-spacing: .06em;
    -webkit-text-size-adjust: 100%
}

@media all and (-ms-high-contrast: none) {
    body {
        font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif
    }
}

a {
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    color: inherit
}

a:hover {
    text-decoration: none
}

.inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
    word-wrap: break-word;
    word-break: break-all
}

span {
    font-size: inherit;
    font-weight: inherit
}

.img {
    line-height: 0
}

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

.en {
    font-family: "Barlow Condensed",sans-serif;
    letter-spacing: .04em
}

.swiper-wrapper {
    padding-bottom: 27px
}

.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: 0
}

.swiper-button-prev:after,.swiper-button-next:after {
    content: none
}

.swiper-pagination-bullet {
    margin: 0 2.5px;
    width: 10px;
    height: 10px;
    background: #000;
    opacity: 1
}

@media(min-width: 769px) {
    .swiper-pagination-bullet {
        margin:0 5px;
        width: 15px;
        height: 15px
    }
}

.swiper-pagination-bullet-active {
    background: var(--main-color)
}

@media(min-width: 768px) {
    .inner {
        padding:0 40px
    }
}

@media(min-width: 769px) {
    .inner {
        padding:0 20px
    }
}

@media(max-width: 750px) {
    body,html {
        min-width:375px
    }

    .inner {
        max-width: 100%;
        margin: 0;
        padding: 0 4%
    }

    p,dt,dd,li {
        font-size: 1.4rem
    }

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

    html {
        margin-top: 0 !important
    }
}

.btn-01 a,.btn-01 .btn-01-button {
    border: 1px solid #000;
    border-bottom: 3px solid #000;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    display: block;
    width: 100%;
    max-width: 455px;
    margin: 0 auto;
    padding: 1.6rem 2rem 1.6rem 2rem;
    transition: all .2s;
    text-align: center;
    position: relative;
    background: #fff;
    letter-spacing: .04em;
    color: #000
}

.btn-01 a:before,.btn-01 .btn-01-button:before {
    content: "";
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center center;
    font-size: 3rem;
    right: 2rem
}

@media(min-width: 768px) {
    .btn-01 a,.btn-01 .btn-01-button {
        max-width:330px
    }
}

@media(min-width: 769px) {
    .btn-01 a,.btn-01 .btn-01-button {
        font-size:1.8rem;
        padding: 2.3rem 3rem 2.3rem 0;
        max-width: 455px
    }

    .btn-01 a:before,.btn-01 .btn-01-button:before {
        right: 4rem
    }

    .btn-01 a:hover,.btn-01 .btn-01-button:hover {
        background: #000;
        color: #fff
    }
}

.btn-02 a,.btn-02 .btn-02-a {
    border: 1px solid #000;
    border-bottom: 3px solid #000;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    display: block;
    width: 100%;
    min-width: 205px;
    margin: 0 auto;
    padding: 1.6rem 0;
    transition: all .2s;
    text-align: center;
    position: relative;
    background: #fff;
    color: #000
}

@media(min-width: 768px) {
    .btn-02 a,.btn-02 .btn-02-a {
        width:330px
    }
}

@media(min-width: 769px) {
    .btn-02 a,.btn-02 .btn-02-a {
        font-size:1.8rem;
        padding: 2.3rem 0;
        width: 330px
    }

    .btn-02 a:hover,.btn-02 .btn-02-a:hover {
        background: #000;
        color: #fff
    }
}

@media(min-width: 769px) {
    .c-article__list {
        display:-ms-flexbox;
        display: flex;
        flex-wrap: wrap
    }
}

.c-article__item {
    margin-bottom: 3rem
}

@media(min-width: 769px) {
    .c-article__item {
        margin-bottom:4.5rem;
        margin-right: 4rem;
        width: calc((99.9% - 8rem)/3)
    }

    .c-article__item:nth-of-type(3n) {
        margin-right: 0
    }
}

.c-article__item a {
    display: -ms-flexbox;
    display: flex
}

@media(min-width: 769px) {
    .c-article__item a {
        display:-ms-flexbox;
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .c-article__item a:hover .c-article__item__img img {
        opacity: .6
    }
}

.c-article__item__img {
    width: 44%;
    position: relative;
    text-align: center
}

.c-article__item__img img {
    width: 100%;
    height: 100px;
    object-fit: cover
}

@media(min-width: 768px) {
    .c-article__item__img {
        width:22.5%
    }
}

@media(min-width: 769px) {
    .c-article__item__img {
        width:100%;
        margin-bottom: 1rem;
        background: #fff
    }

    .c-article__item__img img {
        transition: all .2s;
        width: 100%;
        height: 257px
    }
}

.c-article__item__txtbox {
    flex: 1;
    padding-left: 1.5rem;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media(min-width: 769px) {
    .c-article__item__txtbox {
        padding-left:0
    }
}

.c-article__item__ttl {
    font-size: 1.2rem;
    font-weight: bold
}

@media(min-width: 768px) {
    .c-article__item__ttl {
        font-size:1.6rem
    }
}

@media(min-width: 769px) {
    .c-article__item__ttl {
        font-size:1.6rem;
        line-height: 2;
        padding-bottom: 1.5rem;
        flex: 1 0 auto
    }
}

.c-article__item--column {
    margin-bottom: 4rem
}

.c-article__item--column a {
    display: block
}

@media(min-width: 769px) {
    .c-article__item--column a {
        display:-ms-flexbox;
        display: flex
    }
}

.c-article__item--column .c-article__item__img {
    width: 100%;
    margin-bottom: 1.4rem
}

.c-article__item--column .c-article__item__img img {
    height: auto
}

@media(min-width: 769px) {
    .c-article__item--column .c-article__item__img {
        margin-bottom:1.5rem
    }

    .c-article__item--column .c-article__item__img img {
        height: 252px
    }
}

.c-article__item--column .c-article__item__txtbox {
    padding-left: 0
}

.c-article__item--column .c-article__item__ttl {
    font-size: 1.5rem;
    padding-bottom: 1.5rem
}

.sec-feature {
	border-top-left-radius: 70px;
    padding: 0rem 0 4rem;
    background: #f7ebdf;
    position: relative
}

@media(min-width: 769px) {
    .sec-feature {
    }
}

@media(min-width: 769px) {
    .sec-feature:before {
        height:34rem
    }
}

.sec-feature .inner {
    position: relative;
}

@media(max-width: 750px) {
    .sec-feature .inner {
        padding:0 4%
    }
}

@media(min-width: 768px) {
    .sec-feature .inner {
        padding:0 3rem
    }
}

@media(min-width: 769px) {
    .sec-feature .inner {
        padding:0 2rem 
    }
}

.sec-feature .feature__heading {
    text-align: center;
    margin-bottom: 3rem
}

@media(min-width: 769px) {
    .sec-feature .feature__heading {
        margin-bottom:8rem
    }
}

.sec-feature .feature__heading__ja {
    margin-bottom: 2px
}

.sec-feature .feature__heading__ja img {
    max-width: 25%;
    margin: 0 auto
}

@media(min-width: 769px) {
    .sec-feature .feature__heading__ja {
        margin-bottom:1rem
    }

    .sec-feature .feature__heading__ja img {
        max-width: 100%
    }
}

.sec-feature .feature__heading__en {
    font-size: 3.8rem;
    font-weight: bold;
    letter-spacing: .12em;
    padding-left: .12em
}

@media(min-width: 769px) {
    .sec-feature .feature__heading__en {
        font-size:6.4rem
    }
}

.sec-feature .feature__main {
    margin-bottom: 2.5rem
}

@media(min-width: 769px) {
    .sec-feature .feature__main {

        margin-bottom: 10rem;
        display: -ms-flexbox;
        display: flex;
        flex-direction: row-reverse
    }
}

.sec-feature .feature__main__img {
    position: relative;
    z-index: 1
}

@media(min-width: 769px) {
    .sec-feature .feature__main__img {
        text-align:right;
        width: 54%;
        margin-bottom: 3.5rem
    }

    .sec-feature .feature__main__img a {
        display: block;
        background: #fff
    }

    .sec-feature .feature__main__img a:hover img {
        opacity: .6
    }

    .sec-feature .feature__main__img img {
        transition: all .2s;
        width: 100%;
        height: 434px;
        object-fit: cover
    }
}

.sec-feature .feature__main__txtbox {
    position: relative;
    top: -4rem;
    background: #fff;
    padding: 6rem 0 3.8rem 3.5rem;
    z-index: 0;
    width: 96%;
    margin: 0 0 0 auto;
	border-radius: 20px;
}

@media(min-width: 769px) {
    .sec-feature .feature__main__txtbox {
        top:auto;
        padding: 6.2rem 3.5rem 9.8rem 6.5rem;
        flex: 1;
        width: auto
		border-radius: 0px;
    }
}

.sec-feature .feature__main__txtbox:before {
    content: "";
    background: #fff;
    width: 4%;
    height: 100%;
    display: block;
    position: absolute;
    right: -4%;
    top: 0
}

@media(min-width: 769px) {
    .sec-feature .feature__main__txtbox:before {
        width:58px;
        right: -58px
    }
}

.sec-feature .feature__main__pickup {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 3rem;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    left: -3rem;
    top: 6.5rem;
    letter-spacing: .1em
}

@media(min-width: 769px) {
    .sec-feature .feature__main__pickup {
        font-size:5rem;
        left: -5rem;
        top: 7rem
    }
}

.sec-feature .feature__main__ttl {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 2rem;
    margin-bottom: 1.2rem;
    background: url(../img/common/ttl_info_bg.svg) no-repeat left bottom;
    background-size: 5rem
}

@media(min-width: 769px) {
    .sec-feature .feature__main__ttl {
        font-size:3rem;
        padding-bottom: 3.4rem;
        margin-bottom: 3.2rem;
        line-height: 1.5
    }
}

@media(min-width: 769px) {
    .sec-feature .feature__main__excerpt {
        font-size:1.8rem
    }
}

.sec-feature .btn-02 {
    position: absolute;
    right: 0;
    bottom: -2.6rem
}

@media(min-width: 769px) {
    .sec-feature .btn-02 {
        right:auto;
        left: 6.5rem;
        bottom: -3.4rem
    }
}

.sec-feature #feature-slider {
    margin-bottom: 3rem
}

@media(min-width: 769px) {
    .sec-feature #feature-slider {
        margin-bottom:0
    }
}

@media(min-width: 769px) {
    .sec-feature .c-article__list {
        max-width:1260px;
        margin: 0 auto 4.5rem;
        padding: 0
    }
}

.sec-feature .c-article__item {
    margin-bottom: 2rem
}

@media(min-width: 769px) {
    .sec-feature .c-article__item {
        margin-right:0;
        margin-bottom: 4rem
    }
}

.sec-feature .c-article__item a {
    padding: 0 1.5rem
}

@media(min-width: 769px) {
    .sec-feature .c-article__item a {
        padding:0 2rem
    }
}

@media(min-width: 769px) {
    .sec-feature .c-article__item__img {
        margin-bottom:1.5rem
    }
}

.sec-feature .c-article__item__ttl {
    padding-bottom: 0
}

@media(min-width: 769px) {
    .sec-feature .c-article__item__ttl {
        font-size:1.6rem
    }
}

@media(min-width: 769px) {
    .sec-feature .btn-01 {

        bottom: -3.4rem
    }
}

.sec-feature .swiper-button-prev,.sec-feature .swiper-button-next {
    display: none
}

@media(min-width: 769px) {
    .sec-feature .swiper-button-prev,.sec-feature .swiper-button-next {
        width:40px;
        height: 40px;
        top: auto;
        bottom: -0.8rem;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .sec-feature .swiper-button-prev .icon,.sec-feature .swiper-button-next .icon {
        color: #000;
        opacity: .6;
        font-size: 3rem
    }

    .sec-feature .swiper-button-prev {
        z-index: 99;
        left: 35%
    }

    .sec-feature .swiper-button-next {
        z-index: 99;
        right: 35%
    }

    .sec-feature .swiper-button-prev:before,.sec-feature .swiper-button-next:before {
        content: none
    }

    .sec-feature .swiper-button-prev:hover,.sec-feature .swiper-button-prev:focus,.sec-feature .swiper-button-next:hover,.sec-feature .swiper-button-next:focus {
        background: #fff
    }
}

/* =================================
   ピックアップ下部のスクエア画像カスタマイズ
================================= */
/* 特集セクション - スライダー項目の高さ修正 */

.sec-feature .c-article__item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sec-feature .c-article__item a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sec-feature .c-article__item__img {
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sec-feature .c-article__item__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.sec-feature .c-article__item__txtbox {
    flex: 1;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sec-feature .c-article__item__ttl {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Swiperスライドの高さを統一 */
.sec-feature .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

/* 画像のアスペクト比を統一したい場合 */
.sec-feature .c-article__item__img {
    aspect-ratio: 16 / 10; /* お好みのアスペクト比に調整 */
}

.sec-feature .c-article__item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ホバー効果（オプション） */
.sec-feature .c-article__item a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.sec-feature .c-article__item a:hover .c-article__item__ttl {
    color: #0066cc; /* お好みの色に変更 */
    transition: color 0.3s ease;
}

.multiple-swiper {
    padding: 0px !important;
}

a.multiple-swiper-a {
    padding: 0px !important;
}

.multiple-swiper-ttl {
    padding: 0px 5px !important;
}

#content{
	max-width:100%;
	width:100%;
}

.inner_categor {
    padding-top: 0px;
}

@media(min-width: 769px) {
.inner_categor {
    padding-top: 50px;
}
}

/*
 * セクション背景＋カラー
 */

/* === 背景色（セクション全体） === */
.category-instagram-basics        { background-color:; }
.category-instagram-troubleshooting { background-color:; }
.category-customer-voice          { background-color:; }
.category-updates                 { background-color:; }
.category-study-steps             { background-color:; }
.category-gourmet                 { background-color:; } /* 任意 */

/* === 見出しなどテキスト色（必要に応じて調整） === */
.category-instagram-basics .feature__heading__ja,
.category-instagram-basics .feature__heading__en,
.category-instagram-basics .feature__main__ttl a,
.category-instagram-basics .c-article__item__ttl a { color: #0f172a; }

.category-instagram-troubleshooting .feature__heading__ja,
.category-instagram-troubleshooting .feature__heading__en,
.category-instagram-troubleshooting .feature__main__ttl a,
.category-instagram-troubleshooting .c-article__item__ttl a { color: #064e3b; }

.category-customer-voice .feature__heading__ja,
.category-customer-voice .feature__heading__en,
.category-customer-voice .feature__main__ttl a,
.category-customer-voice .c-article__item__ttl a { color: #0f172a; }

.category-updates .feature__heading__ja,
.category-updates .feature__heading__en,
.category-updates .feature__main__ttl a,
.category-updates .c-article__item__ttl a { color: #1f2937; }

.category-study-steps .feature__heading__ja,
.category-study-steps .feature__heading__en,
.category-study-steps .feature__main__ttl a,
.category-study-steps .c-article__item__ttl a { color: #1e1b4b; }

/* ボタンなども必要なら */
.category-instagram-basics .btn-01 a,
.category-instagram-basics .btn-02 a { color: #0f172a; }
/* 他カテゴリも同様に */

    #sidebar {
        margin-top: 0em;
    }

.l-content{
	margin:0px;
}

/* 記事ページ（single）だけ 4% にする */
#body_wrap.single-post #content.l-content.l-container{
  padding: 5%;
}

/* フロント（home/top）は 0 に戻す */
#body_wrap.home #content.l-content.l-container{
  padding: 0 !important;
  margin: 0 !important; /* 枠の余白も消したい場合 */
}

p.copyright {
    display: none;
}

/*投稿ページ 調整*/
.custom-content-class {
    margin: auto;
    max-width: 1200px !important;
    padding: 4% !important;
}

.l-mainContent__inner {
    padding: 0 3%;
}

/*投稿ページ　タグ背景*/
div#breadcrumb {
    box-shadow: inset 0 -1px 8px rgb(0 0 0 / 0%);
    background-color: unset;
}

/*メニュー*/
.-series-right .c-gnavWrap{
	display:none;
}

span.c-pageTitle__inner {
    display: none;
}