: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%;
      --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-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[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
    }

    .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)
    }

    .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
    }

    .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_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%)
    }

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

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

    [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
    }

    .-type-list2 .p-postList__body::after, .-type-big .p-postList__body::after {
      content: "READ MORE »";
    }

    .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)
    }

    .post_content h2 {
      background: #C1AB05;
      padding: .75em 1em;
      color: #fff
    }

    .post_content h2::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 #C1AB05;
      border-bottom: solid 2px #C1AB05
    }

    .post_content h3 {
      padding: 0 .5em .5em
    }

    .post_content h3::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 {
      padding: 0 0 0 16px;
      border-left: solid 2px #C1AB05;
    }

    .l-header {
      box-shadow: 0 1px 4px rgba(0, 0, 0, .12)
    }

    .l-header__bar {
      color: #fff;
      background: var(--color_main)
    }

    .l-header__menuBtn {
      order: 1
    }

    .l-header__customBtn {
      order: 3
    }

    .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%
    }

    .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-secTitle {
      border-left: solid 2px var(--color_main);
      padding: 0em .75em
    }

    .p-spMenu {
      color: #333
    }

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

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

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

    a {
      text-decoration: none
    }

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

    @media screen and (min-width: 960px) {
      :root {}
    }

    @media screen and (max-width: 959px) {
      :root {}
      .l-header__logo {
        order: 2;
        text-align: center
      }
    }

    @media screen and (min-width: 600px) {
      :root {
        --swl-fz--content: 16px;
      }
    }

    @media screen and (max-width: 599px) {
      :root {}
    }

    @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%;
      }
    }

    .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
    }

    .is-style-btn_normal a, .is-style-btn_shiny a {
      box-shadow: var(--swl-btn_shadow)
    }

    .c-shareBtns__btn, .is-style-balloon>.c-tabList .c-tabList__button, .p-snsCta, [class*=page-numbers] {
      box-shadow: var(--swl-box_shadow)
    }

    .p-articleThumb__img, .p-articleThumb__youtube {
      box-shadow: var(--swl-img_shadow)
    }

    .p-pickupBanners__item .c-bannerLink, .p-postList__thumb {
      box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1)
    }

    .p-postList.-w-ranking li:before {
      background-image: repeating-linear-gradient(-45deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 6px, transparent 0, transparent 12px);
      box-shadow: 1px 1px 4px rgba(0, 0, 0, .2)
    }

    .l-header__bar {
      position: relative;
      width: 100%
    }

    .l-header__bar .c-catchphrase {
      color: inherit;
      font-size: 12px;
      letter-spacing: var(--swl-letter_spacing, .2px);
      line-height: 14px;
      margin-right: auto;
      overflow: hidden;
      padding: 4px 0;
      white-space: nowrap;
      width: 50%
    }

    .l-header__bar .c-iconList .c-iconList__link {
      margin: 0;
      padding: 4px 6px
    }

    .l-header__barInner {
      align-items: center;
      display: flex;
      justify-content: flex-end
    }

    @media (min-width:960px) {
      .-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 (min-width:960px) and (min-width:600px) {
      .-series .c-headLogo {
        max-width: 400px
      }
    }

    .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
    }

    .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
    }

    :root {}

    .c-shareBtns__item:not(:last-child) {
      margin-right: 4px
    }

    .c-shareBtns__btn {
      padding: 8px 0
    }

    @media screen and (min-width: 960px) {
      :root {}
    }

    @media screen and (max-width: 959px) {
      :root {}
    }

    @media screen and (min-width: 600px) {
      :root {}
    }

    @media screen and (max-width: 599px) {
      :root {}
    }

    .p-relatedPosts .p-postList__item {
      margin-bottom: 1.5em
    }

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

    @media (min-width:600px) {
      .p-relatedPosts .p-postList__item {
        width: 33.33333%
      }
    }

    @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%
      }
    }

    .-index-off .p-toc, .swell-toc-placeholder:empty {
      display: none
    }

    .p-toc.-modal {
      height: 100%;
      margin: 0;
      overflow-y: auto;
      padding: 0
    }

    #main_content .p-toc {
      border-radius: var(--swl-radius--2, 0);
      margin: 4em auto;
      max-width: 800px
    }

    #sidebar .p-toc {
      margin-top: -.5em
    }

    .p-toc__ttl {
      display: block;
      font-size: 1.2em;
      line-height: 1;
      position: relative;
      text-align: center
    }

    .p-toc__ttl:before {
      content: "\e918";
      display: inline-block;
      font-family: icomoon;
      margin-right: .5em;
      padding-bottom: 2px;
      vertical-align: middle
    }

    #index_modal .p-toc__ttl {
      margin-bottom: .5em
    }

    .p-toc__list li {
      line-height: 1.6
    }

    .p-toc__list>li+li {
      margin-top: .5em
    }

    .p-toc__list li li {
      font-size: .9em
    }

    .p-toc__list ol, .p-toc__list ul {
      padding-left: .5em
    }

    .p-toc__list .mininote {
      display: none
    }

    .post_content .p-toc__list {
      padding-left: 0
    }

    #sidebar .p-toc__list {
      margin-bottom: 0
    }

    #sidebar .p-toc__list ol, #sidebar .p-toc__list ul {
      padding-left: 0
    }

    .p-toc__link {
      color: inherit;
      font-size: inherit;
      text-decoration: none
    }

    .p-toc__link:hover {
      opacity: .8
    }

    .p-toc.-double {
      background: var(--color_gray);
      background: linear-gradient(-45deg, transparent 25%, var(--color_gray) 25%, var(--color_gray) 50%, transparent 50%, transparent 75%, var(--color_gray) 75%, var(--color_gray));
      background-clip: padding-box;
      background-size: 4px 4px;
      border-bottom: 4px double var(--color_border);
      border-top: 4px double var(--color_border);
      padding: 1.5em 1em 1em
    }

    .p-toc.-double .p-toc__ttl {
      margin-bottom: .75em
    }

    @media (min-width:960px) {
      #main_content .p-toc {
        width: 92%
      }
    }

    @media (min-width:600px) {
      .p-toc.-double {
        padding: 2em
      }
    }

    .p-pnLinks {
      align-items: stretch;
      display: flex;
      justify-content: space-between;
      margin: 2em 0
    }

    .p-pnLinks__item {
      font-size: 3vw;
      position: relative;
      width: 49%
    }

    .p-pnLinks__item:before {
      content: "";
      display: block;
      height: .5em;
      pointer-events: none;
      position: absolute;
      top: 50%;
      width: .5em;
      z-index: 1
    }

    .p-pnLinks__item.-prev:before {
      border-bottom: 1px solid;
      border-left: 1px solid;
      left: .35em;
      -webkit-transform: rotate(45deg) translateY(-50%);
      transform: rotate(45deg) translateY(-50%)
    }

    .p-pnLinks__item.-prev .p-pnLinks__thumb {
      margin-right: 8px
    }

    .p-pnLinks__item.-next .p-pnLinks__link {
      justify-content: flex-end
    }

    .p-pnLinks__item.-next:before {
      border-bottom: 1px solid;
      border-right: 1px solid;
      right: .35em;
      -webkit-transform: rotate(-45deg) translateY(-50%);
      transform: rotate(-45deg) translateY(-50%)
    }

    .p-pnLinks__item.-next .p-pnLinks__thumb {
      margin-left: 8px;
      order: 2
    }

    .p-pnLinks__item.-next:first-child {
      margin-left: auto
    }

    .p-pnLinks__link {
      align-items: center;
      border-radius: var(--swl-radius--2, 0);
      color: inherit;
      display: flex;
      height: 100%;
      line-height: 1.4;
      min-height: 4em;
      padding: .6em 1em .5em;
      position: relative;
      text-decoration: none;
      transition: box-shadow .25s;
      width: 100%
    }

    .p-pnLinks__thumb {
      border-radius: var(--swl-radius--4, 0);
      height: 32px;
      -o-object-fit: cover;
      object-fit: cover;
      width: 48px
    }

    .p-pnLinks .-prev .p-pnLinks__link {
      border-left: 1.25em solid var(--color_main)
    }

    .p-pnLinks .-prev:before {
      color: #fff
    }

    .p-pnLinks .-next .p-pnLinks__link {
      border-right: 1.25em solid var(--color_main)
    }

    .p-pnLinks .-next:before {
      color: #fff
    }

    @media (max-width:959px) {
      .p-pnLinks.-thumb-on {
        display: block
      }
      .p-pnLinks.-thumb-on .p-pnLinks__item {
        width: 100%
      }
    }

    @media (min-width:600px) {
      .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)
      }
    }