@charset "UTF-8";
/* CSS Document */

html {
    font-size:62.5%
}

body {
    font-family: "Noto Sans JP", sans-serif
}

a {
    color:#4169e1
}

a:hover {
    color:#1a3ca2
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom:40px
}

h1 {
    font-size: 4rem;
    line-height:5rem
}

h2 {
    font-size: 3rem;
    line-height:4rem
}

h3 {
    font-size: 2rem;
    line-height:2.8rem
}

h4 {
    font-size: 1.8rem;
    line-height:2.6rem
}

h5 {
    font-size: 1.6rem;
    line-height:2.4rem
}

h6 {
    font-size: 1.4rem;
    line-height:2.2rem
}

p, ul, ol, dl, table {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom:40px
}

figcaption {
    font-size: 1.4rem;
    line-height:2.2rem
}

table th {
    font-weight:normal
}

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

label, input, textarea, select, button {
    color: #333;
    font-size: 1.6rem;
    line-height:2.6rem
}

input[type=button], button {
    cursor:pointer
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border:0
}

legend {
    width: 100%;
    max-width: 100%;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: inherit;
    line-height: inherit;
    white-space: normal;
    padding: 0;
    margin-bottom: 1rem;
    display:block
}

hr {
    border: none;
    margin: 0 auto;
    clear:both
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 3rem;
        line-height:3.8rem
    }

    h2 {
        font-size: 2.4rem;
        line-height:3.2rem
    }

    h3 {
        font-size: 2rem;
        line-height:2.8rem
    }

    h4 {
        font-size: 1.8rem;
        line-height:2.6rem
    }

    h5 {
        font-size: 1.6rem;
        line-height:2.4rem
    }

    h6 {
        font-size: 1.6rem;
        line-height:2.4rem
    }
}

.headline {
    font-weight:600;
	border-bottom: 2px solid #333;
}
.headline-large {
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #eee;
    position: sticky;
    left: 0;
    top: 0;
    z-index:9999
}

.header * {
    box-sizing:border-box
}

.header a {
    color:#00008b
}

.header a:hover {
    color:#00008b
}

.header .header-logo .logo {
    width: 220px;
    height: 80px;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent no-repeat center center;
    background-image:url(../images/logo.png);
    background-size: 180px auto;
    display: block;
    transition:opacity 200ms ease 0ms
}

.header .header-nav {
    flex: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 2.2rem;
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin:0
}

.header .header-nav li a {
    color: #00008b;
    text-decoration:none
}

.header .header-nav li a:hover {
    text-decoration:underline
}

.header .header-language {
    position:relative
}

.header .header-language-open, .header .header-language-close {
    width: 80px;
    height: 80px;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer
}

.header .header-language-open {
    color: #00008b;
    background:rgba(255, 255, 255, 0.9)
}

.header .header-language-close {
    position: absolute;
    right: 0;
    top:0
}

.header .header-language-panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    color: #fff;
    background: rgba(0, 0, 139, 0.9);
    padding: 100px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    display:none
}

.header .header-language-panel h2 {
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
    margin:50px auto
}

.header .header-language-panel ul {
    font-size: 2.8rem;
    line-height: 3.8rem;
    text-align: center;
    list-style: none;
    padding: 0;
    margin:50px auto
}

.header .header-language-panel ul li {
    margin:20px auto
}

.header .header-language-panel ul li a.here {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    cursor:default
}

.header .header-language-panel a {
    color:#fff
}

.header .header-menu {
    position:relative
}

.header .header-menu-open, .header .header-menu-close {
    width: 80px;
    height: 80px;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer
}

.header .header-menu-open {
    color: #fff;
    background:rgba(0, 0, 139, 0.9)
}

.header .header-menu-close {
    position: fixed;
    right: 0;
    top:0
}

.header .header-menu-panel {
    width: 100%;
    height: 100%;
    padding: 100px;
    color: #fff;
    background: rgba(0, 0, 139, 0.9);
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    display:none
}

.header .header-menu-panel a {
    color: #fff;
    text-decoration:underline
}

.header .header-menu-panel .menu-columns {
    max-width: 960px;
    margin:0 auto
}

.header .header-menu-panel .menu-column {
    padding: 40px 0;
    border-top:1px solid rgba(255, 255, 255, 0.4)
}

.header .header-menu-panel .menu-column ul {
    list-style: none;
    padding: 0;
    margin:0 auto 40px
}

.header .header-menu-panel .menu-column ul:last-child {
    margin-bottom:0
}

.header .header-menu-panel .menu-column ul.primary {
    font-size: 2.2rem;
    line-height:3.2rem
}

.header .header-menu-panel .menu-column ul.primary li {
    margin:10px 0
}

.header .header-menu-panel .menu-column ul.primary li:first-child {
    margin-top:0
}

.header .header-menu-panel .menu-column ul.primary li:last-child {
    margin-bottom:0
}

.header .header-menu-panel .menu-column ul.secondary {
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin:20px auto 0
}

.header .header-menu-panel .menu-column ul.secondary li {
    margin:5px 0
}

.header .header-menu-panel .menu-column ul.secondary li:first-child {
    margin-top:0
}

.header .header-menu-panel .menu-column ul.secondary li:last-child {
    margin-bottom:0
}

.header .header-menu-panel .menu-column ul.language h2 {
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-bottom:10px
}

.header .header-menu-panel .menu-column ul.language .here {
    text-decoration: none;
    opacity: .4;
    pointer-events:none
}

.header .header-menu-panel .menu-info h2, .header .header-menu-panel .menu-info h3, .header .header-menu-panel .menu-info h4 {
    font-weight: normal;
    font-size: 2.2rem;
    line-height: 3.2rem;
    margin-bottom:10px
}

.header .header-menu-panel .menu-info p, .header .header-menu-panel .menu-info ul, .header .header-menu-panel .menu-info ol, .header .header-menu-panel .menu-info dl {
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-bottom:10px
}

.header .header-menu-panel .menu-info .sns {
    font-size: 2.4rem;
    line-height: 2.4rem;
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    margin:20px auto
}

.header .header-menu-panel .menu-flex {
    display: flex;
    gap:40px
}

.header .header-menu-panel .menu-flex > * {
    flex:1
}

@media screen and (max-width: 768px) {

	.header .header-logo .logo{width:200px;height:60px;background-position:center;background-size:auto 50px}
	
    .header .header-nav {
        display:none
    }

    .header .header-menu-open, .header .header-menu-close {
        width: 60px;
        height: 60px;
        font-size:2rem
    }

    .header .header-menu-panel {
        padding:80px 40px
    }

    .header .header-menu-panel .menu-column ul.primary {
        font-size: 1.8rem;
        line-height:2.6rem
    }

    .header .header-menu-panel .menu-column ul.primary li {
        margin:5px 0
    }

    .header .header-menu-panel .menu-column ul.primary li:first-child {
        margin-top:0
    }

    .header .header-menu-panel .menu-column ul.primary li:last-child {
        margin-bottom:0
    }

    .header .header-menu-panel .menu-column ul.secondary {
        font-size: 1.4rem;
        line-height: 2.4rem;
        margin:10px auto 0
    }

    .header .header-menu-panel .menu-column ul.secondary li {
        margin:0
    }

    .header .header-menu-panel .menu-info h2, .header .header-menu-panel .menu-info h3, .header .header-menu-panel .menu-info h4 {
        font-size: 1.8rem;
        line-height:2.6rem
    }

    .header .header-menu-panel .menu-flex {
        flex-direction: column;
        row-gap:20px
    }
}

.footer-2022 {
    color: #fff;
    background: #00008b;
    padding:40px
}

.footer-2022 * {
    box-sizing:border-box
}

.footer-2022 a, .footer-2022 a:hover {
    color: #fff;
    text-decoration:underline
}

.footer-2022 .footer-flex {
    max-width: 1140px;
    display: flex;
    column-gap: 40px;
    margin:0 auto
}

.footer-2022 .footer-sitemap {
    flex: 1;
    display: flex;
    column-gap:40px
}

.footer-2022 .footer-sitemap ul {
    flex: 1;
    font-size: 1.6rem;
    line-height: 2rem;
    list-style: none;
    padding: 0;
    margin-bottom:10px
}

.footer-2022 .footer-sitemap ul > li {
    padding-left: 2rem;
    text-indent: -2rem;
    margin:5px auto
}

.footer-2022 .footer-sitemap ul > li:first-child {
    margin-top:0
}

.footer-2022 .footer-sitemap ul > li:last-child {
    margin-bottom:0
}

.footer-2022 .footer-info h2 {
    font-size: 2.2rem;
    line-height: 2.4rem;
    margin-bottom:20px
}

.footer-2022 .footer-info p, .footer-2022 .footer-info ul, .footer-2022 .footer-info ol, .footer-2022 .footer-info dl, .footer-2022 .footer-info table {
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-bottom:20px
}

.footer-2022 .footer-info .sns {
    font-size: 2.6rem;
    display: flex;
    gap: 5px;
    list-style: none;
    padding:0
}

.footer-2022 .footer-info .sns li a {
    transition:opacity 200ms ease 0ms
}

.footer-2022 .footer-info .sns li a:hover {
    opacity:.6
}

.footer-2022 .footer-return {
    position: fixed;
    right: 20px;
    bottom:20px
}

.footer-2022 .footer-return a {
    width: 60px;
    line-height: 60px;
    font-size: 1.8rem;
    color: #fff;
    background-color: rgba(0, 0, 139, 0.2);
    text-align: center;
    display: block;
    border-radius: 999px;
    transition:background-color 200ms ease 0ms
}

.footer-2022 .footer-return a:hover {
    background-color:#00008b
}

@media screen and (max-width: 768px) {
    .footer-2022 {
        padding:40px 20px 80px
    }

    .footer-2022 .footer-flex {
        flex-direction: column;
        row-gap:40px
    }

    .footer-2022 .footer-sitemap {
        flex-direction: column;
        row-gap:20px
    }

    .footer-2022 .footer-sitemap ul {
        font-size: 1.4rem;
        line-height: 2rem;
        display: flex;
        flex-wrap:wrap
    }

    .footer-2022 .footer-sitemap ul li {
        width: 50%;
        padding: 4px 0;
        text-indent: 0;
        margin:0
    }

    .footer-2022 .footer-sitemap ul li.smp-full {
        width:100%
    }

    .footer-2022 .footer-info {
        width: 100%;
        text-align: center;
        padding: 0;
        border:none
    }

    .footer-2022 .footer-info h2 {
        font-size: 1.8rem;
        line-height:2.8rem
    }

    .footer-2022 .footer-info p, .footer-2022 .footer-info ul, .footer-2022 .footer-info ol, .footer-2022 .footer-info dl, .footer-2022 .footer-info table {
        font-size: 1.4rem;
        line-height: 2.2rem;
        margin-bottom:20px
    }

    .footer-2022 .footer-info .sns {
        font-size: 2.2rem;
        justify-content: center;
        gap:10px
    }

    .footer-2022 .footer-return {
        right: 10px;
        bottom:10px
    }

    .footer-2022 .footer-return a {
        width: 40px;
        line-height: 40px;
        font-size: 1.6rem
    }
}



.footer-2022 {
    display:none
}

.footer {
    width: 100%;
    color: #fff;
    background: #00008b;
    padding: 40px;
    margin: 0;
    overflow: hidden;
    box-sizing:border-box
}

.footer a, .footer a:hover {
    color:#fff!important
}

.footer ul, .footer ol {
    list-style: none;
    padding:0
}

.footer .footer-inner {
    max-width: 1080px;
    display: flex;
    gap: 40px;
    margin:0 auto
}

.footer .footer-sitemap {
    flex: 1;
    display: flex;
    gap:20px
}

.footer .footer-sitemap ul {
    flex: 1;
    margin:0
}

.footer .footer-sitemap ul li {
    text-indent: -2rem;
    padding-left: 2rem;
    margin-bottom:2px
}

.footer .footer-sitemap ul li:last-child {
    margin-bottom:0
}

.footer .footer-sitemap ul li.head {
    text-indent: 0;
    padding-left: 0;
    margin:20px 0 5px
}

.footer .footer-sitemap ul li.head:first-child {
    margin-top:0
}

.footer .footer-info {
    max-width:380px
}

.footer .footer-info > * {
    margin-bottom:20px
}

.footer .footer-info > * :last-child {
    margin-bottom:0
}

.footer .footer-info h2, .footer .footer-info h3, .footer .footer-info h4 {
    font-size: 2rem;
    line-height:2.6rem
}

.footer .footer-info p, .footer .footer-info ul, .footer .footer-info ol, .footer .footer-info dl, .footer .footer-info table {
    font-size: 1.5rem;
    line-height:2.4rem
}

.footer .footer-info .sns-list {
    font-size: 2.4rem;
    display: flex;
    gap:5px
}

.footer .footer-return {
    position: fixed;
    right: 10px;
    bottom:10px
}

.footer .footer-return a {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
    color: #fff;
    background-color: #00008b;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    opacity: .12;
    transition:opacity 200ms ease 0ms
}

.footer .footer-return a:hover {
    opacity:.8
}

@media screen and (max-width: 768px) {
    .footer {
        padding:40px 20px 80px
    }

    .footer .footer-inner {
        flex-direction: column;
        row-gap:40px
    }

    .footer .footer-sitemap {
        flex: none;
        flex-direction: column;
        row-gap:20px
    }

    .footer .footer-sitemap ul {
        flex:none
    }

    .footer .footer-info {
        max-width: unset;
        text-align:center
    }

    .footer .footer-info h2, .footer .footer-info h3, .footer .footer-info h4 {
        font-size: 1.6rem;
        line-height:2.4rem
    }

    .footer .footer-info p, .footer .footer-info ul, .footer .footer-info ol, .footer .footer-info dl, .footer .footer-info table {
        font-size: 1.4rem;
        line-height:2.2rem
    }

    .footer .footer-info .sns-list {
        justify-content:center
    }

    .footer .footer-return a {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
        opacity: .8;
        transition:none
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight:600
}

h2 {
    font-size: 2.6rem;
    line-height:3.6rem
}

.header .header-menu-panel {
    background:rgba(0, 0, 139, .96)
}

@media screen and (max-width: 768px) {
    .breadcrumb {
        display: block;
        line-height:2rem
    }

    .breadcrumb > li {
        display:inline
    }

    .breadcrumb > li::before {
        margin:0 5px
    }
}

.breadcrumbs {
    font-size: 0;
    list-style: none;
    padding: 0;
    margin:20px
}

.breadcrumbs > li {
    font-size: 1.5rem;
    display:inline-block
}

.breadcrumbs > li::before {
    content: "/";
    display: inline-block;
    margin:0 5px
}

.breadcrumbs > li:first-child::before {
    display:none
}

@media screen and (max-width: 768px) {
    .breadcrumbs {
        margin:10px
    }

    .breadcrumbs > li {
        font-size:1.4rem
    }
}

.main-reset .contents {
    width: auto;
    max-width: unset;
    margin:0
}

@media screen and (max-width: 768px) {
    .main-reset .contents {
        padding:0
    }

    .main-flex {
        padding: 20px;
        flex-direction: column-reverse;
        row-gap: 60px;
        margin:40px auto
    }

    .main-flex .aside {
        width: 100% !important;
        position:static
    }
}

.nav-anchor ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top:2px solid #000
}

.nav-anchor ul > li {
    border: 1px solid #ccc;
    border-width: 0 0 1px;
    position:relative
}

.nav-anchor ul > li:first-child {
    border-width:0 0 1px 0
}

.nav-anchor ul > li a {
    padding: 10px 0 10px 20px;
    display:block
}

.nav-anchor ul > li svg {
    position: absolute;
    left: 0;
    top: 50%;
    transform:translate(0, -50%)
}

.content {
    margin-left: auto;
    margin-right:auto
}

.content-small {
    max-width:540px
}

.content-medium {
    max-width:720px
}

.content-large {
    max-width:960px
}

.content-xlarge {
    max-width:1140px
}

.content-xxlarge {
    max-width:1320px
}

.contents {
    max-width: 960px;
    margin:60px auto
}

.contents-fluid {
    max-width: none;
    max-width:initial
}

.text-align-left {
    text-align:left
}

.text-align-center {
    text-align:center
}

.text-align-right {
    text-align:right
}

.list-style-none {
    list-style:none
}

.list-style-decimal {
    list-style:decimal
}

.list-style-disc {
    list-style:disc
}

[class * =list-style] {
    padding-left:0
}

.hover-fade {
    transition:opacity 200ms ease 0ms
}

.hover-fade:hover {
    opacity:.8
}

p.larger {
    font-size: 1.8rem;
    line-height:2.8rem
}

@media screen and (max-width: 768px) {
    p.larger {
        font-size: 1.6rem;
        line-height:2.6rem
    }
}

.btn {
    text-decoration: none;
    display: inline-block;
    position:relative
}

.btn-small {
    color: #fff;
    background: #f63;
    padding: 10px 30px;
    border-radius: 999px;
    transition:opacity 200ms ease 0ms
}

.btn-small:hover {
    color: #fff;
    opacity:.8
}

.btn-more {
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #fff;
    background: #00008b;
    padding: 10px 30px 10px 20px;
    border-radius: 5px;
    position:relative
}

.btn-more:hover {
    color: #fff;
    opacity:.8
}

.btn-more-orange {
    background:#f63
}

.btn-more svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform:translateY(-50%)
}

.btn-large {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.6rem;
    color: #fff;
    text-align: center;
    background: tomato;
    padding: 20px 50px;
    border-radius:999px
}

.btn-large:hover {
    color: #fff;
    opacity:.8
}

.btn-large svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform:translateY(-50%)
}

.btns-align-center {
    text-align:center
}

.btns-flex {
    display: flex;
    gap:20px
}

.btns-flex-center {
    justify-content:center
}

@media screen and (max-width: 768px) {
    .btns-flex {
        flex-direction: column;
        row-gap:10px
    }
}

.heading {
    margin-bottom:40px
}

.heading-medium {
    padding: 3px 0 3px 20px;
    border-left:7px solid #00008b
}

.heading-large {
    font-size: 3.6rem;
    line-height:4.8rem
}

@media screen and (max-width: 768px) {
    .heading-medium {
        font-size: 2.2rem;
        line-height: 2.6rem;
        padding:2px 0 2px 15px
    }

    .heading-large {
        font-size: 2.8rem;
        line-height: 3.8rem;
        margin-bottom:40px
    }
}

.features-list {
    list-style: none;
    padding:0
}

.features-list > li {
    position: relative;
    padding: 0 0 0 45px;
    margin-bottom:20px
}

.features-list > li h3, .features-list > li h4 {
    font-size: 1.8rem;
    margin:0px
}

.features-list > li::before {
    content: "a";
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    background: #00008b;
    border-radius: 999px;
    display: block;
    float: left;
    position: absolute;
    left: 0;
    top:0
}

.features-list > li:nth-child(1)::before {
    content: "1"
}

.features-list > li:nth-child(2)::before {
    content: "2"
}

.features-list > li:nth-child(3)::before {
    content: "3"
}

.features-list > li:nth-child(4)::before {
    content: "4"
}

.features-list > li:nth-child(5)::before {
    content: "5"
}

.features-list > li:nth-child(6)::before {
    content: "6"
}

.features-list > li:nth-child(7)::before {
    content: "7"
}

.features-list > li:nth-child(8)::before {
    content: "8"
}

.features-list > li:nth-child(9)::before {
    content: "9"
}

.features-list > li:nth-child(10)::before {
    content: "10"
}

.features-list > li:nth-child(11)::before {
    content: "11"
}

.features-list > li:nth-child(12)::before {
    content: "12"
}

.features-list > li:nth-child(13)::before {
    content: "13"
}

.features-list > li:nth-child(14)::before {
    content: "14"
}

.features-list > li:nth-child(15)::before {
    content: "15"
}

.features-list > li:nth-child(16)::before {
    content: "16"
}

.features-list > li:nth-child(17)::before {
    content: "17"
}

.features-list > li:nth-child(18)::before {
    content: "18"
}

.features-list > li:nth-child(19)::before {
    content: "19"
}

.features-list > li:nth-child(20)::before {
    content: "20"
}

.table-overview {
    width: 100%;
    overflow-y: visible;
    overflow-x: auto;
    margin-bottom:40px
}

.table-overview table {
    font-size: 1.6rem;
    line-height: 2.4rem;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom:0
}

.table-overview table.table-layout-fixed {
    width: 100%;
    box-sizing: border-box;
    table-layout:fixed
}

.table-overview table th, .table-overview table td {
    padding:20px
}

.table-overview table th.text-align-left, .table-overview table td.text-align-left {
    text-align:left
}

.table-overview table th.text-align-center, .table-overview table td.text-align-center {
    text-align:center
}

.table-overview table th.text-align-right, .table-overview table td.text-align-right {
    text-align:right
}

.table-overview table thead th {
    background: #dadaf2;
    border-bottom:1px solid #b2b2d8
}

.table-overview table tbody th {
    background:#f7f7fc
}

.table-overview table tbody th, .table-overview table tbody td {
    border-bottom:1px solid #b2b2d8
}

.table-overview table tbody td {
    background:#fff
}

.table-overview table tbody .hd th, .table-overview table tbody .hd td {
    background:#eaeaf9
}

.table-overview table tfoot {
    font-size: 1.4rem;
    line-height:2.4rem
}

.table-overview table tfoot th, .table-overview table tfoot td {
    padding: 20px 0 0;
    border:none
}

@media screen and (max-width: 768px) {
    .table-overview table {
        font-size: 1.4rem;
        line-height:2.2rem
    }

    .table-overview table th, .table-overview table td {
        padding:10px
    }
}

.figure {
    margin:0 auto 40px
}

.figure-flexbox {
    display: flex;
    justify-content: center;
    gap:20px
}

.figure-flexbox-wrap {
    flex-wrap:wrap
}

.fig {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom:40px
}

.fig img {
    max-width:100%
}

.fig figcaption {
    font-size: 1.5rem;
    line-height:2.5rem
}

.fig-outline img {
    border:1px solid #ccc
}

.figs-column {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-bottom:40px
}

.figs-column .fig {
    margin-bottom:0
}

.figs-flex {
    display: flex;
    gap: 40px;
    margin-bottom:40px
}

.figs-flex .fig {
    margin-bottom:0
}

.videos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom:40px
}

.videos figcaption {
    font-size: 1.5rem;
    line-height: 2.5rem;
    margin:0
}

.tightly, .compact {
    margin-bottom:40px
}

.tightly > *, .compact > * {
    margin-bottom:20px !important
}

.tightly > * :last-child, .compact > * :last-child {
    margin-bottom:0 !important
}

.spacer {
    overflow: hidden;
    margin-bottom:40px
}

.spacer-20 {
    height:20px
}

.spacer-40 {
    margin-bottom:40px
}

.spacer-60 {
    margin-bottom:60px
}

.spacer-80 {
    margin-bottom:80px
}

.separator {
    width: 100%;
    margin: 0 auto 40px;
    border:1px solid #00008b
}

.inbound-basic-solution {
    padding: 60px;
    background: url(../images/home-inbound-basic-solution-bg.jpg) no-repeat center top;
    background-size: 100% auto;
    margin: 0 auto;
    position:relative
}

.inbound-basic-solution-eng {
    width: fit-content;
    font-weight: 700;
    font-size: 2rem;
    line-height: 4rem;
    color: #fff;
    padding: 0;
    margin: 0 auto;
    border: 2px solid #fff;
    border-width:2px 0
}

.inbound-basic-solution-head {
    color: #fff;
    text-align: center;
    padding:20px 40px
}

.inbound-basic-solution-head h1 {
    font-weight: 600;
    font-size: 4.2rem;
    line-height: 5rem;
    margin-bottom:20px
}

.inbound-basic-solution-head p {
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.4rem;
    margin-bottom:20px
}

.inbound-basic-solution-body {
    max-width: 960px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 60px;
    background: #fff;
    box-shadow:0px 20px 30px 0px rgba(0, 0, 0, .08)
}

.inbound-basic-solution-body .summary {
    max-width: 640px;
    margin:0 auto
}

.inbound-basic-solution-body .summary > * {
    margin-bottom:10px
}

.inbound-basic-solution-body .summary h3 {
    font-size: 2.6rem;
    line-height: 3.8rem;
    margin-bottom:40px
}

.inbound-basic-solution::before {
    content: "";
    display: block;
    width: 100%;
    background: #02a6b7;
    background: linear-gradient(145deg, rgb(2, 166, 183) 60%, rgb(0, 184, 182) 100%);
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1
}

.inbound-basic-solution .cols {
    display: flex;
    gap: 20px;
    margin:80px 0 0
}

.inbound-basic-solution .cols .col {
    flex: 1;
    border: 2px solid #02a6b7;
    padding:0 30px 30px
}

.inbound-basic-solution .cols .col > h3 {
    color:#02a6b7
}

.inbound-basic-solution .cols .col .unit {
    margin-bottom:20px
}

.inbound-basic-solution .cols .col .unit > * {
    margin-bottom:10px
}

.inbound-basic-solution .cols .col .unit > * :last-child {
    margin-bottom:0
}

.inbound-basic-solution .cols .col .illust {
    max-width: 280px;
    text-align: center;
    margin:-40px auto 20px
}

.inbound-basic-solution .cols .col .btns {
    margin:40px auto 0
}

.inbound-basic-solution .cols .col > * {
    margin-bottom:15px
}

.inbound-basic-solution .cols .col > * :last-child {
    margin-bottom:0
}

@media screen and (max-width: 768px) {
    .inbound-basic-solution {
        padding: 40px 20px;
        background: url(../images/home-inbound-basic-solution-bg-smp.jpg) no-repeat center top;
        background-size:100% auto
    }

    .inbound-basic-solution-eng {
        font-size:1.4rem
    }

    .inbound-basic-solution-head {
        padding:20px
    }

    .inbound-basic-solution-head h1, .inbound-basic-solution-head h2 {
        font-size: 3rem;
        line-height:3.8rem
    }

    .inbound-basic-solution-body {
        padding: 40px 20px;
        margin:0 10px
    }

    .inbound-basic-solution-body .summary h3 {
        font-size: 2.2rem;
        line-height:3.2rem
    }

    .inbound-basic-solution .cols {
        flex-direction: column;
        row-gap:80px
    }

    .inbound-basic-solution .cols .col {
        padding:0 20px 20px
    }
}

.inbound-other-solution {
    margin: 80px auto;
    position:relative
}

.inbound-other-solution-eng {
    width: fit-content;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 30px;
    color: #00008b;
    padding: 0 20px;
    margin: 0 auto;
    background: #fff;
    border-top: 2px solid #00008b;
    transform:translate(0, -20px)
}

.inbound-other-solution-head {
    color: #fff;
    text-align: center;
    padding:20px 0
}

.inbound-other-solution-head h2 {
    font-size: 4rem;
    line-height: 5rem;
    margin-bottom:20px
}

.inbound-other-solution-head p {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 2.4rem;
    margin-bottom:20px
}

.inbound-other-solution-body {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px;
    background: #fff;
    box-shadow:0px 20px 30px 0px rgba(0, 0, 0, .1)
}

.inbound-other-solution-body .summary > * {
    margin-bottom:10px
}

.inbound-other-solution-body .summary h3 {
    font-size: 2.6rem;
    line-height: 3.8rem;
    margin-bottom:40px
}

.inbound-other-solution::before {
    content: "";
    display: block;
    width: 100%;
    background: #00008b;
    background: linear-gradient(145deg, rgb(0, 0, 139) 60%, rgb(50, 114, 172) 100%);
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1
}

.inbound-other-solution .solutions-flex {
    display: flex;
    gap:60px
}

.inbound-other-solution .solutions-flex .solutions-list {
    flex: 1;
    font-size: 1.6rem;
    line-height: 2.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top:3px solid #00008b
}

.inbound-other-solution .solutions-flex .solutions-list-item {
    border-bottom:1px solid #00008b
}

.inbound-other-solution .solutions-flex .solutions-list-item:first-child {
    border-top-width:2px
}

.inbound-other-solution .solutions-flex .solutions-list-item a {
    color: #00008b;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    position:relative
}

.inbound-other-solution .solutions-flex .solutions-list-item a svg {
    position: absolute;
    right: 0;
    top: 50%;
    transform:translate(0, -50%)
}

.inbound-other-solution .solutions-flex .solutions-list-item a:hover {
    color: #00008b;
    text-decoration:underline
}

@media screen and (max-width: 768px) {
    .inbound-other-solution-eng {
        font-size:1.4rem
    }

    .inbound-other-solution-head {
        padding:20px
    }

    .inbound-other-solution-head h2 {
        font-size: 2.4rem;
        line-height:3.2rem
    }

    .inbound-other-solution-head p {
        font-size:1.6rem
    }

    .inbound-other-solution-body {
        padding: 40px 20px;
        margin:0 10px
    }

    .inbound-other-solution-body .summary h3 {
        font-size: 2.2rem;
        line-height:3.2rem
    }

    .inbound-other-solution-body .solutions-flex {
        flex-direction: column;
        gap:40px
    }
}

.youtube {
    background: #000;
    margin-bottom: 40px;
    position:relative
}

.youtube::before {
    content: "";
    display: block;
    padding-top:56.25%
}

.youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0
}

.btn-medium {
    color: #fff;
    background: tomato;
    padding: 15px 30px;
    transition:opacity 200ms ease 0ms
}

.btn-medium:hover {
    color: #fff;
    opacity:.8
}

.heading-fill {
    font-size: 2.2rem;
    line-height: 2.8rem;
    text-align: center;
    color: #fff;
    background: #00008b;
    padding:10px
}

.flexbox {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom:40px
}

.flexbox-item {
    margin:0
}

.flexbox-item-flex {
    flex:1
}

.flexbox-valign-top {
    align-items:flex-start
}

.flexbox-self-start {
    align-self:self-start
}

@media screen and (max-width: 768px) {
    .flexbox {
        flex-direction:column
    }

    .flexbox-item {
        margin:0
    }

    .flexbox-item.tightly > * {
        margin-bottom:20px
    }

    .flexbox-item.tightly > * :last-child {
        margin-bottom:0
    }
}

.web-solution {
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    max-width: 1080px;
    background: #fff;
    padding: 40px;
    margin: 40px auto;
    box-sizing:border-box
}

.web-solution * {
    box-sizing:border-box
}

.web-solution-head-large {
    font-size: 4rem;
    line-height: 5rem;
    margin-bottom:40px
}

.web-solution-head-medium {
    font-size: 3rem;
    line-height: 4rem;
    margin-bottom:40px
}

.web-solution-index {
    list-style: none;
    padding: 0;
	max-width: 800px;
    margin:10px auto 40px;
}

.web-solution-index:last-child {
    margin-bottom:0
}
.web-solution-index h3 {
	margin-bottom: 10px;
}
.web-solution-index li {
    position: relative;
    border:2px solid #00008b;
	margin-bottom: 20px;
}

.web-solution-index li a {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.8rem;
    color: #00008b;
    padding: 30px 30px 30px 100px;
	text-decoration: none;
}
.web-solution-index li a p {
	margin: 0;
}
.web-solution-index li .web-solution-index-icon {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    border:2px solid #fff
}

@media screen and (min-width: 769px) {
	.web-solution-index li a{
		min-height: 160px;
	}
}


@media screen and (max-width: 768px) {
    .web-solution {
        padding:40px 20px
    }

    .web-solution-head-large {
        font-size: 2.8rem;
        line-height:3.8rem
    }

    .web-solution-head-medium {
        font-size: 2rem;
        line-height:3rem
    }

    .web-solution-index {
        width: 80%;
    }

    .web-solution-index li a {
        min-height: 120px;
    }

    .web-solution-index li .web-solution-index-icon {
        width: 80px;
        height: 80px;
    }

    .web-solution-about p {
        font-size: 1.6rem;
        line-height:2.6rem
    }

    .web-solution-offers {
        flex-direction: column;
        row-gap:20px
    }

    .web-solution-offers .web-solution-offer {
        padding: 40px 20px;
        width: auto;
        flex:none
    }

    .web-solution-overlay {
        padding:40px 20px
    }

    .web-solution-framing {
        padding:40px 20px
    }

    .web-solution-results {
        flex-direction: column;
        gap: 0;
        row-gap:10px
    }

    .web-solution-results .web-solution-result {
        width: auto;
        padding: 20px;
        border-width:1px 0 0
    }

    .web-solution-results .web-solution-result:first-child {
        border-top-width:0
    }

    .web-solution-results-corritrips {
        row-gap:10px
    }

    .web-solution-reviews {
        flex-direction:column
    }

    .web-solution-reviews .web-solution-review {
        padding: 20px 0;
        border-width:0 0 1px
    }

    .web-solution-reviews .web-solution-review:first-child {
        padding-top: 0;
        border-left-width: 0;
        border-bottom-width:1px
    }

    .web-solution-reviews .web-solution-review:last-child {
        padding-bottom: 0;
        border-bottom-width:0
    }

    .web-solution-promotion-list {
        text-align:left
    }

    .web-solution-category-illust {
        width: 80px;
        height:80px
    }
}

.advantages-and-disadvantages {
    display: flex;
    gap: 40px;
    margin-bottom:40px
}

.advantages-and-disadvantages h2, .advantages-and-disadvantages h3, .advantages-and-disadvantages h4 {
    font-size: 3rem;
    line-height:4rem
}

.advantages-and-disadvantages ul, .advantages-and-disadvantages ol {
    font-weight: 500;
    font-size: 1.8rem;
    line-height:2.8rem
}

.advantages-and-disadvantages .advantages, .advantages-and-disadvantages .disadvantages {
    color: #00008b;
    flex: 1;
    min-height: 240px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center
}

.advantages-and-disadvantages .advantages > *, .advantages-and-disadvantages .disadvantages > * {
    margin-bottom:20px
}

.advantages-and-disadvantages .advantages > * :last-child, .advantages-and-disadvantages .disadvantages > * :last-child {
    margin-bottom:0
}

.advantages-and-disadvantages .disadvantages {
    color:red
}

@media screen and (max-width: 768px) {
    .advantages-and-disadvantages {
        flex-direction:column
    }
}

.main-one {
    max-width: 960px;
    margin:0 auto
}

.figs {
    display: flex;
    justify-content: center;
    gap:20px
}

.solutions .solution {
    padding:40px
}

.solutions .solution-bg {
    background-color:rgba(0, 0, 139, .05)
}

.solutions .numbers {
    font-size: 2rem;
    line-height: 3rem;
    color: #00008b;
    width: 100%;
    margin:0 auto 40px
}

.solutions .numbers > li {
    padding:2px 0 2px 50px
}

.solutions .promotions {
    max-width: 960px;
    background: rgba(0, 0, 139, .05);
    margin:0 auto 40px
}

.solutions .promotions .promotion {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
    border-bottom:1px solid #fff
}

.solutions .promotions .promotion-text {
    flex: 1;
    margin:0
}

.solutions .promotions .promotion-text h3 a, .solutions .promotions .promotion-text h3 a:hover {
    color:#00008b
}

.solutions .promotions .promotion-text .btns {
    margin:40px auto 0
}

.solutions .promotions .promotion-fig {
    flex: 1;
    margin:0
}

.solutions .framing {
    padding: 40px;
    border: 2px solid #00008b;
    margin-bottom:40px
}

.solutions .point-list {
    list-style: none;
    padding:0
}

.solutions .point-item {
    padding-left: 80px;
    margin-bottom: 40px;
    position:relative
}

.solutions .point-item-no {
    width: 60px;
    position: absolute;
    left: 0;
    top:0
}

.solutions .point-item h2, .solutions .point-item h3, .solutions .point-item h4 {
    font-size: 2.2rem;
    color: #00008b;
    margin-bottom:10px !important
}

.solutions .point-item p, .solutions .point-item ul, .solutions .point-item ol, .solutions .point-item dl, .solutions .point-item table {
    font-size: 1.6rem;
    line-height: 2.6rem;
    margin-bottom:10px !important
}

.solutions .example-list {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap:40px
}

.solutions .example-item > a {
    display:block
}

.solutions .btns {
    display: flex;
    justify-content: center;
    gap:20px
}

@media screen and (max-width: 768px) {
    .solutions .solution {
        padding:40px 0
    }

    .solutions .solution-bg {
        padding:40px 20px
    }

    .solutions .promotions .promotion {
        flex-direction: column;
        padding:40px 20px
    }

    .solutions .promotions .promotion-text, .solutions .promotions .promotion-fig {
        flex:none
    }

    .solutions .framing {
        padding:20px
    }

    .solutions .point-item {
        padding-left:50px
    }

    .solutions .point-item-no {
        width:40px
    }

    .solutions .point-item h2, .solutions .point-item h3, .solutions .point-item h4 {
        font-size: 2rem;
        line-height:2.8rem
    }

    .solutions .example-list {
        flex-direction: column;
        row-gap:20px
    }
}

:root {
    color-scheme: light
}

@media screen and (max-width: 768px) {
    .table_sticky {
        overflow-x: auto;
        max-width: 100%;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }

    .table_sticky table {
        width: 700px;
    }

    .table_sticky th {
        width: 130px !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        white-space: normal !important;
        position: sticky;
        top: 0;
        left: 0;
    }

    .sticky_text {
        display: block;
        text-align: center;
        font-size: 1.2rem !important;
    }
}

.btn-small-blue {
    color: #000;
    background: #e6e6fa;
    padding: 10px 30px;
    border-radius: 999px;
    transition: opacity 200ms ease 0ms;
    text-decoration: underline;
}

.btn-small-blue:hover {
    opacity: .8
}

.box-frame {
    width: 100%;
}

.box-frame .inner {
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
}

.packspecial {
    background: #f1f1f1;
    padding: 20px;
    margin-bottom: 20px;
}

.packspecial .title {
    border-bottom: solid 2px #00008b;
    padding-bottom: 5px;
}

.packspecial .note {
    padding: 0;
}

.packspecial .note li {
    list-style: none;
    padding-left: 1em;
    text-indent: -1em;
    margin: 0;
}

.pack-item {
    background: #00008b;
    color: #fff;
    padding: 20px;
}

.pack-item:first-of-type {
    margin-bottom: 20px;
}

.pack-item h3 {
    background: #fff;
    margin-bottom: 10px;
    padding-left: 20px;
}

.pack-item p {
    margin: 0 0 0 20px;
}

@media screen and (max-width: 768px) {
    .promotion--ex .box-frame {
        order: 2
    }

    .promotion--ex figure {
        order: 3
    }
}




/* News */
#news {
  width: 1080px;
  margin: 40px auto;
}

#news .list {
  list-style: none;
  padding: 0;
}
#news .list li {
  border-top: 1px solid #e5e5e5;
  padding: 15px 0 15px 20px;
  position: relative;
}
#news .list li .update {
  position: absolute;
  left: 0;
  top: 15px;
}
#news .list li  .date {
	display: inline-block;
	width: 7em;
}

@media screen and (max-width: 768px) {
  #news {
    width: 90%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  #news .list li {
    padding: 10px 0;
  }
  #news .list li .update {
    position: static;
    display: block;
    margin-bottom: 5px;
  }
}


/* Track record */
#record {
  width: 1080px;
  margin: 40px auto;
}
#record .list {
  list-style: none;
  padding: 0;
}
#record .list li {
  border-top: 1px solid #e5e5e5;
  padding: 15px 0 15px 20px;
  position: relative;
}
#record .list li .update {
  position: absolute;
  left: 0;
  top: 15px;
}

@media screen and (max-width: 768px) {
  #record {
    width: 90%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  #record .list li {
    padding: 10px 0;
  }
  #record .list li .update {
    position: static;
    display: block;
    margin-bottom: 5px;
  }
}

.single-news main {
	padding: 5% 0 15%
}
.single-news .entry{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.single-news .date {
	font-size: 1.4rem;
}

.page-bottom article,
.archive article{
	max-width: 960px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 60px;
}


.archive .entry h2 {
	margin-bottom: 0px;
}
.archive .entry a {
	color: #333;
	text-decoration: none;
	display: block;
	padding: 20px;
	border-bottom: solid 1px #ccc;
}
.archive .entry a:hover {
	background: #f8f8f8;
}
.archive .entry .date {
	font-size: 1.6rem;
}

.page .btns a {
	font-size: 2rem;
}

.frame-01 {
	padding: 30px;
}
.frame-02 {
	padding: 30px;
	border: solid 2px #01087c;
	border-radius: 5px;
	margin-bottom: 30px;
}
.frame-02:last-of-type {
	margin-bottom: 0;
}

.item-01 {
	border: solid 2px #01087c;
	background: #fff;
	border-radius: 5px;
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 600px;
	padding: 15px
}
.highlighter {
    background:linear-gradient(transparent 60%, #fffe8b 60%);
	display: inline;
}
.page-bottom h1.entry-title {
	font-size: 3rem;
	border-left: solid 10px #010985;
	padding-left: 1em;
}
.page-bottom h2 {
	color: #fff;
	background: #010985;
	padding: 10px;
}
.page-bottom th {
	vertical-align: top;
	font-weight: bold;
}
.page-bottom th,
.page-bottom td {
	border-width: 0 0 1px 0!important;
	padding: 20px 10px!important;
}
.col-3-box .wp-block-column {
	padding: 20px;
}
.col-3-box .wp-block-column h3 {
	margin: 10px;
}
.col-3-box .wp-block-column p {
	background: #dee0ef;
	padding: 20px;
	margin-bottom: 0;
}