/* ==========================================================================
   Splink Corporate Site - Common Theme CSS
   共通テーマCSS - 全ページで使用される基盤スタイル
   ========================================================================== */

/* CSS Variables - 全ページ共通の変数定義 */
:root {
    --swl-fz--content: 4vw;
    --swl-font_family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --swl-font_weight: 500;
    --color_main: #04384c;
    --color_text: #333;
    --color_link: #1176d4;
    --color_htag: #04384c;
    --color_bg: #fdfdfd;
    --color_gradient1: #d8ffff;
    --color_gradient2: #87e7ff;
    --color_main_thin: rgba(5, 70, 95, 0.05);
    --color_main_dark: rgba(3, 42, 57, 1);
    --color_list_check: #04384c;
    --color_list_num: #04384c;
    --color_list_good: #86dd7b;
    --color_list_triangle: #f4e03a;
    --color_list_bad: #f36060;
    --color_faq_q: #d55656;
    --color_faq_a: #6599b7;
    --color_icon_good: #3cd250;
    --color_icon_good_bg: #ecffe9;
    --color_icon_bad: #4b73eb;
    --color_icon_bad_bg: #eafaff;
    --color_icon_info: #f578b4;
    --color_icon_info_bg: #fff0fa;
    --color_icon_announce: #ffa537;
    --color_icon_announce_bg: #fff5f0;
    --color_icon_pen: #7a7a7a;
    --color_icon_pen_bg: #f7f7f7;
    --color_icon_book: #787364;
    --color_icon_book_bg: #f8f6ef;
    --color_icon_point: #ffa639;
    --color_icon_check: #86d67c;
    --color_icon_batsu: #f36060;
    --color_icon_hatena: #5295cc;
    --color_icon_caution: #f7da38;
    --color_icon_memo: #84878a;
    --color_deep01: #e44141;
    --color_deep02: #3d79d5;
    --color_deep03: #63a84d;
    --color_deep04: #f09f4d;
    --color_pale01: #fff2f0;
    --color_pale02: #f3f8fd;
    --color_pale03: #f1f9ee;
    --color_pale04: #fdf9ee;
    --color_mark_blue: #b7e3ff;
    --color_mark_green: #bdf9c3;
    --color_mark_yellow: #fcf69f;
    --color_mark_orange: #ffddbc;
    --border01: solid 1px var(--color_main);
    --border02: double 4px var(--color_main);
    --border03: dashed 2px var(--color_border);
    --border04: solid 4px var(--color_gray);
    --card_posts_thumb_ratio: 56.25%;
    --list_posts_thumb_ratio: 61.805%;
    --big_posts_thumb_ratio: 56.25%;
    --thumb_posts_thumb_ratio: 61.805%;
    --blogcard_thumb_ratio: 56.25%;
    --color_header_bg: #fdfdfd;
    --color_header_text: #333;
    --color_footer_bg: #fdfdfd;
    --color_footer_text: #333;
    --container_size: 1200px;
    --article_size: 900px;
    --logo_size_sp: 48px;
    --logo_size_pc: 40px;
    --logo_size_pcfix: 32px;
    --swl-radius--2: 2px;
    --swl-radius--4: 4px;
    --swl-radius--8: 8px;
    --color_content_bg: var(--color_bg);
}

/* Icon Color Variables */
.swl-cell-bg[data-icon="doubleCircle"] {
    --cell-icon-color: #ffc977;
}

.swl-cell-bg[data-icon="circle"] {
    --cell-icon-color: #94e29c;
}

.swl-cell-bg[data-icon="triangle"] {
    --cell-icon-color: #eeda2f;
}

.swl-cell-bg[data-icon="close"] {
    --cell-icon-color: #ec9191;
}

.swl-cell-bg[data-icon="hatena"] {
    --cell-icon-color: #93c9da;
}

.swl-cell-bg[data-icon="check"] {
    --cell-icon-color: #94e29c;
}

.swl-cell-bg[data-icon="line"] {
    --cell-icon-color: #9b9b9b;
}

/* Cap Box Color Variables */
.cap_box[data-colset="col1"] {
    --capbox-color: #f59b5f;
    --capbox-color--bg: #fff8eb;
}

.cap_box[data-colset="col2"] {
    --capbox-color: #5fb9f5;
    --capbox-color--bg: #edf5ff;
}

.cap_box[data-colset="col3"] {
    --capbox-color: #2fcd90;
    --capbox-color--bg: #eafaf2;
}

/* Button Color Variables */
.red_ {
    --the-btn-color: #f74a4a;
    --the-btn-color2: #ffbc49;
    --the-solid-shadow: rgba(185, 56, 56, 1);
}

.blue_ {
    --the-btn-color: #338df4;
    --the-btn-color2: #35eaff;
    --the-solid-shadow: rgba(38, 106, 183, 1);
}

.green_ {
    --the-btn-color: #62d847;
    --the-btn-color2: #7bf7bd;
    --the-solid-shadow: rgba(74, 162, 53, 1);
}

/* Button Radius Variables */
.is-style-btn_normal {
    --the-btn-radius: 80px;
}

.is-style-btn_solid {
    --the-btn-radius: 80px;
}

.is-style-btn_shiny {
    --the-btn-radius: 80px;
}

.is-style-btn_line {
    --the-btn-radius: 80px;
}

/* Content Styles */
.post_content blockquote {
    padding: 1.5em 2em 1.5em 3em;
}

.post_content blockquote::before {
    content: "";
    display: block;
    width: 5px;
    height: calc(100% - 3em);
    top: 1.5em;
    left: 1.5em;
    border-left: solid 1px rgba(180, 180, 180, .75);
    border-right: solid 1px rgba(180, 180, 180, .75);
}

/* Mark Styles */
.mark_blue {
    background: -webkit-linear-gradient(transparent 64%, var(--color_mark_blue) 0%);
    background: linear-gradient(transparent 64%, var(--color_mark_blue) 0%);
}

.mark_green {
    background: -webkit-linear-gradient(transparent 64%, var(--color_mark_green) 0%);
    background: linear-gradient(transparent 64%, var(--color_mark_green) 0%);
}

.mark_yellow {
    background: -webkit-linear-gradient(transparent 64%, var(--color_mark_yellow) 0%);
    background: linear-gradient(transparent 64%, var(--color_mark_yellow) 0%);
}

.mark_orange {
    background: -webkit-linear-gradient(transparent 64%, var(--color_mark_orange) 0%);
    background: linear-gradient(transparent 64%, var(--color_mark_orange) 0%);
}

/* Icon Styles */
[class*="is-style-icon_"] {
    color: #333;
    border-width: 0;
}

[class*="is-style-big_icon_"] {
    border-width: 2px;
    border-style: solid;
}

/* Balloon Styles */
[data-col="gray"] .c-balloon__text {
    background: #f7f7f7;
    border-color: #ccc;
}

[data-col="gray"] .c-balloon__before {
    border-right-color: #f7f7f7;
}

[data-col="green"] .c-balloon__text {
    background: #d1f8c2;
    border-color: #9ddd93;
}

[data-col="green"] .c-balloon__before {
    border-right-color: #d1f8c2;
}

[data-col="blue"] .c-balloon__text {
    background: #e2f6ff;
    border-color: #93d2f0;
}

[data-col="blue"] .c-balloon__before {
    border-right-color: #e2f6ff;
}

[data-col="red"] .c-balloon__text {
    background: #ffebeb;
    border-color: #f48789;
}

[data-col="red"] .c-balloon__before {
    border-right-color: #ffebeb;
}

[data-col="yellow"] .c-balloon__text {
    background: #f9f7d2;
    border-color: #fbe593;
}

[data-col="yellow"] .c-balloon__before {
    border-right-color: #f9f7d2;
}

/* Post List Styles */
.-type-list2 .p-postList__body::after,
.-type-big .p-postList__body::after {
    content: "READ MORE »";
}

/* Post Thumbnail Category */
.c-postThumb__cat {
    background-color: #04384c;
    color: #fff;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 6px, transparent 6px, transparent 12px);
}

/* Heading Styles */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    background: var(--color_htag);
    padding: .75em 1em;
    color: #fff;
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    position: absolute;
    display: block;
    pointer-events: none;
    content: "";
    top: -4px;
    left: 0;
    width: 100%;
    height: calc(100% + 4px);
    box-sizing: content-box;
    border-top: solid 2px var(--color_htag);
    border-bottom: solid 2px var(--color_htag);
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    padding: 0 .5em .5em;
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color_htag) 0%, var(--color_htag) 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%);
}

.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    padding: 0 0 0 16px;
    border-left: solid 2px var(--color_htag);
}

/* Header Styles */
.l-header {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.c-gnav a::after {
    background: var(--color_main);
    width: 100%;
    height: 2px;
    transform: scaleX(0);
}

.p-spHeadMenu .menu-item.-current {
    border-bottom-color: var(--color_main);
}

.c-gnav > li:hover > a::after,
.c-gnav > .-current > a::after {
    transform: scaleX(1);
}

.c-gnav .sub-menu {
    color: #333;
    background: #fff;
}

.l-fixHeader::before {
    opacity: 1;
}

#pagetop {
    border-radius: 50%;
}

/* Widget Styles */
.c-widget__title.-spmenu {
    padding: .5em .75em;
    border-radius: var(--swl-radius--2, 0px);
    background: var(--color_main);
    color: #fff;
}

.c-widget__title.-footer {
    padding: .5em;
}

.c-widget__title.-footer::before {
    content: "";
    bottom: 0;
    left: 0;
    width: 40%;
    z-index: 1;
    background: var(--color_main);
}

.c-widget__title.-footer::after {
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color_border);
}

.c-widget__title.-side {
    padding: .5em;
}

.c-widget__title.-side::before {
    content: "";
    bottom: 0;
    left: 0;
    width: 40%;
    z-index: 1;
    background: var(--color_main);
}

.c-widget__title.-side::after {
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color_border);
}

/* Section Title */
.c-secTitle {
    border-left: solid 2px var(--color_main);
    padding: 0em .75em;
}

/* SP Menu Styles */
.p-spMenu {
    color: #ffffff;
}

.p-spMenu__inner::before {
    background: #001050;
    opacity: 1;
}

.p-spMenu__overlay {
    background: #000;
    opacity: 0.6;
}

/* Pagination */
[class*="page-numbers"] {
    color: #fff;
    background-color: #dedede;
}

/* Links */
a {
    text-decoration: none;
}

/* Title Area */
.l-topTitleArea.c-filterLayer::before {
    background-color: #000;
    opacity: 0.2;
    content: "";
}

/* Border Radius Styles */
.c-categoryList__link,
.c-tagList__link,
.tag-cloud-link {
    border-radius: 16px;
    padding: 6px 10px;
}

.-related .p-postList__thumb,
.is-style-bg_gray,
.is-style-bg_main,
.is-style-bg_main_thin,
.is-style-bg_stripe,
.is-style-border_dg,
.is-style-border_dm,
.is-style-border_sg,
.is-style-border_sm,
.is-style-dent_box,
.is-style-note_box,
.is-style-stitch,
[class*=is-style-big_icon_],
input[type=number],
input[type=text],
textarea {
    border-radius: 4px;
}

.-ps-style-img .p-postList__link,
.-type-thumb .p-postList__link,
.p-postList__thumb {
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
}

.c-widget .-type-list.-w-ranking .p-postList__item:before {
    border-radius: 16px;
    left: 2px;
    top: 2px;
}

.c-widget .-type-card.-w-ranking .p-postList__item:before {
    border-radius: 0 0 4px 4px;
}

.c-postThumb__cat {
    border-radius: 16px;
    margin: .5em;
    padding: 0 8px;
}

.cap_box_ttl {
    border-radius: 2px 2px 0 0;
}

.cap_box_content {
    border-radius: 0 0 2px 2px;
}

.cap_box.is-style-small_ttl .cap_box_content {
    border-radius: 0 2px 2px 2px;
}

.cap_box.is-style-inner .cap_box_content,
.cap_box.is-style-onborder_ttl .cap_box_content,
.cap_box.is-style-onborder_ttl2 .cap_box_content,
.cap_box.is-style-onborder_ttl2 .cap_box_ttl,
.cap_box.is-style-shadow {
    border-radius: 2px;
}

.is-style-more_btn a,
.p-postList__body:after,
.submit {
    border-radius: 40px;
}

/* Share Buttons */
.c-shareBtns__item:not(:last-child) {
    margin-right: 4px;
}

.c-shareBtns__btn {
    padding: 8px 0;
}

/* Full Wide Block */
.swell-block-fullWide__inner.l-container {
    --swl-fw_inner_pad: var(--swl-pad_container, 0px);
}

/* Related Posts */
.p-relatedPosts .p-postList__item {
    margin-bottom: 1.5em;
}

.p-relatedPosts .p-postList__times,
.p-relatedPosts .p-postList__times > :last-child {
    margin-right: 0;
}

/* Navigation Menu Styles */
.c-gnav .sub-menu a:before,
.c-listMenu a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: icomoon !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.c-submenuToggleBtn {
    display: none;
}

.c-listMenu a {
    padding: .75em 1em .75em 1.5em;
    transition: padding .25s;
}

.c-listMenu a:hover {
    padding-left: 1.75em;
    padding-right: .75em;
}

.c-gnav .sub-menu a:before,
.c-listMenu a:before {
    color: inherit;
    content: "\e921";
    display: inline-block;
    left: 2px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
}

.widget_categories > ul > .cat-item > a,
.wp-block-categories-list > li > a {
    padding-left: 1.75em;
}

.c-listMenu .children,
.c-listMenu .sub-menu {
    margin: 0;
}

.c-listMenu .children a,
.c-listMenu .sub-menu a {
    font-size: .9em;
    padding-left: 2.5em;
}

.c-listMenu .children a:before,
.c-listMenu .sub-menu a:before {
    left: 1em;
}

.c-listMenu .children a:hover,
.c-listMenu .sub-menu a:hover {
    padding-left: 2.75em;
}

.c-listMenu .children ul a,
.c-listMenu .sub-menu ul a {
    padding-left: 3.25em;
}

.c-listMenu .children ul a:before,
.c-listMenu .sub-menu ul a:before {
    left: 1.75em;
}

.c-listMenu .children ul a:hover,
.c-listMenu .sub-menu ul a:hover {
    padding-left: 3.5em;
}

.c-gnav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.c-gnav .sub-menu:before {
    background: inherit;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.c-gnav .sub-menu .sub-menu {
    left: 100%;
    top: 0;
    z-index: -1;
}

.c-gnav .sub-menu a {
    padding-left: 2em;
}

.c-gnav .sub-menu a:before {
    left: .5em;
}

.c-gnav .sub-menu a:hover .ttl {
    left: 4px;
}

/* Media Queries - Desktop */
@media screen and (min-width: 960px) {
    :root {
        --swl-fz--content: 16px;
    }
    
    .l-header__logo {
        margin-right: auto;
    }
    
    .l-header__inner {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    
    #sidebar .-type-list .p-postList__thumb {
        border-radius: 8px;
    }
    
    .-sidebar-on .l-content .alignfull,
    .-sidebar-on .l-content .alignwide {
        left: -16px;
        width: calc(100% + 32px);
    }
    
    .swell-block-fullWide__inner.l-article {
        --swl-fw_inner_pad: var(--swl-pad_post_content, 0px);
    }
    
    .-sidebar-on .swell-block-fullWide__inner .alignwide {
        left: 0;
        width: 100%;
    }
    
    .-sidebar-on .swell-block-fullWide__inner .alignfull {
        left: calc(0px - var(--swl-fw_inner_pad, 0)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: calc(100% + var(--swl-fw_inner_pad, 0) * 2) !important;
    }
    
    .p-relatedPosts .p-postList__item {
        width: 33.33333%;
    }
    
    .-series .l-header__inner {
        align-items: stretch;
        display: flex;
    }
    
    .-series .l-header__logo {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        margin-right: 24px;
        padding: 16px 0;
    }
    
    .-series .l-header__logo .c-catchphrase {
        font-size: 13px;
        padding: 4px 0;
    }
    
    .-series .c-headLogo {
        margin-right: 16px;
    }
    
    .-series-right .l-header__inner {
        justify-content: space-between;
    }
    
    .-series-right .c-gnavWrap {
        margin-left: auto;
    }
    
    .-series-right .w-header {
        margin-left: 12px;
    }
    
    .-series-left .w-header {
        margin-left: auto;
    }
}

@media screen and (min-width: 960px) and (min-width: 600px) {
    .-series .c-headLogo {
        max-width: 400px;
    }
}

@media screen and (min-width: 600px) {
    :root {
        --swl-fz--content: 16px;
    }
    
    .p-relatedPosts .p-postList__item {
        width: 33.33333%;
    }
    
    .p-pnLinks__item {
        font-size: 13px;
    }
    
    .p-pnLinks__thumb {
        height: 48px;
        width: 72px;
    }
    
    .p-pnLinks__title {
        transition: -webkit-transform .25s;
        transition: transform .25s;
        transition: transform .25s, -webkit-transform .25s;
    }
    
    .-prev > .p-pnLinks__link:hover .p-pnLinks__title {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    
    .-next > .p-pnLinks__link:hover .p-pnLinks__title {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px);
    }
    
    .p-pnLinks .-prev .p-pnLinks__link:hover {
        box-shadow: 1px 1px 2px var(--swl-color_shadow);
    }
    
    .p-pnLinks .-next .p-pnLinks__link:hover {
        box-shadow: -1px 1px 2px var(--swl-color_shadow);
    }
}

@media screen and (min-width: 600px) and (max-width: 1239px) {
    .p-relatedPosts .p-postList__item:nth-child(7),
    .p-relatedPosts .p-postList__item:nth-child(8) {
        display: none;
    }
}

@media screen and (min-width: 1240px) {
    .p-relatedPosts .p-postList__item {
        width: 25%;
    }
}

@media (min-width: 1108px) {
    .alignwide {
        left: -100px;
        width: calc(100% + 200px);
    }
}

@media (max-width: 1108px) {
    .-sidebar-off .swell-block-fullWide__inner.l-container .alignwide {
        left: 0px;
        width: 100%;
    }
}

@media not all and (min-width: 960px) {
    .-ps-style-img .p-postList__link,
    .-type-thumb .p-postList__link,
    .p-postList__thumb {
        border-radius: 8px;
    }
    
    .p-pnLinks.-thumb-on {
        display: block;
    }
    
    .p-pnLinks.-thumb-on .p-pnLinks__item {
        width: 100%;
    }
}

/* Fixed Header Styles */
.l-fixHeader .l-fixHeader__gnav {
    order: 0;
}

[data-scrolled=true] .l-fixHeader[data-ready] {
    opacity: 1;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    visibility: visible;
}

.-body-solid .l-fixHeader {
    box-shadow: 0 2px 4px var(--swl-color_shadow);
}

.l-fixHeader__inner {
    align-items: stretch;
    color: var(--color_header_text);
    display: flex;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.l-fixHeader__logo {
    align-items: center;
    display: flex;
    line-height: 1;
    margin-right: 24px;
    order: 0;
    padding: 16px 0;
}