@charset "utf-8";

:root {
    --century: 'century-gothic', sans-serif;
    --notosans: YakuHanJPs, 'Noto Sans JP', sans-serif;
    --main-blue: #005ead;
    --main-green: #00ada5;
    --main-black: #1a1a1c;
    --color-perlGray: #f8f8f8;
    --inner-width: 90%;
    --sectionPB-sp: 65px;
    --sectionPT: 120px;
    --sectionPB-pc: 120px;
}

* {
    font-family: var(--notosans);
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none;
}
/*Google Chrome、Safariへの対応*/
*::-webkit-scrollbar {
    display: none;
}

html {
    font-size: 10px;
    overflow: scroll;
    text-align: justify;
    font-feature-settings: 'palt';
}
body {
    color: var(--main-black);
    font-size: 1.6rem;
    width: 100dvw;
    background: var(--color-perlGray);
}
body.js-fixed {
    height: 100%;
    inset: 0px;
    position: fixed;
    width: 100%;
}
li {
    list-style: none;
}
a {
    color: var(--main-black);
    text-decoration: none;
}
p {
    line-height: 1.76;
}
img {
    width: 100%;
    height: auto;
}
.-inner {
    width: var(--inner-width);
    max-width: 1024px;
    margin: auto;
}
.pin-spacer{
    list-style-type: none;
}
.end-content{
    padding-bottom: 65px;
}
@media screen and (min-width: 600px) {
    .end-content{
        padding-bottom: 105px;
    }
}

.lh-2{
    line-height: 2em;
}

.noLink{
    opacity: .5;
    pointer-events: none;
}
/*---------------------------

loading

---------------------------*/
@keyframes rotation {
    0% {
        transform: rotate(0) scale(1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}
.cls-1 {
    fill: #0060b3;
    stroke-width: 0px;
}
.b-loading {
    align-items: center;
    background-color: #fff;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    position: fixed;
    z-index: 99999;
    opacity: 1;
    top: 0;
}
.b-loading #logo {
    animation: 2s linear infinite rotation;
    overflow: visible;
    transform-origin: 40% 60%;
    -webkit-backface-visibility: hidden;
}
.b-loading #offside-logo {
    height: 140px;
    overflow: visible;
    width: 140px;
    transform: translate(15px, -15px);
}
.loaded.b-loading,
.loaded.b-loading #logo {
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.loaded.b-loading {
    animation-name: loaded-bg;
    animation-delay: 0.3s;
    animation-duration: 0.65s;
    pointer-events: none;
}
.loaded.b-loading #logo {
    animation-name: loaded;
    animation-duration: 0.65s;
}
@keyframes loaded {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(40);
    }
}
@keyframes loaded-bg {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

/*---------------------------

cursor

---------------------------*/

@media screen and (min-width: 600px) {
    .e-cursor {
        border-radius: 50%;
        pointer-events: none;
        background-color: var(--main-blue);
        height: 8px;
        width: 8px;
        margin: -4px 0 0 -4px;
        z-index: 10001;
        transform: scale(1);
        position: fixed;
    }
    .e-cursor.active {
        background-color: rgba(0, 94, 173, 0.15);
        animation: 0.3s ease-out forwards curser;
    }
}

@keyframes curser {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(5);
    }
}


/*---------------------------

fix-copy

---------------------------*/
.b-fix-copy {
  bottom: 40px;
  left: 40px;
  position: fixed;
  width: 105px;
  z-index: 1;
    text-align: left;
    opacity: 1;
    transition: .3s all;
}
.b-fix-copy * {
  color: #626264;
  font-weight: 400;
  line-height: 1.5;
}
.b-fix-copy .e-head {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.b-fix-copy .e-caption {
  font-size: 1rem;
  letter-spacing: 1px;
}
@media screen and (max-width: 1360px) {
    .b-fix-copy {
        opacity: 0;
    }
}

/*---------------------------

heading

---------------------------*/
.e-head.-ja {
    font-family: var(--notosans);
    font-weight: 700;
}
.e-head.-en {
    font-family: var(--century);
    font-weight: 700;
}

.e-head.-top {
    font-size: 65px;
    margin-bottom: 64px;
}
.e-head.-top.m-sub {
    font-size: 40px;
    position: relative;
    z-index: 1;
}
.e-head.-top span {
    color: #626264;
    display: block;
    font-size: 16px;
    margin-top: 1em;
}
.e-btn {
    max-width: 320px;
}
main .e-head.-top {
    margin-left: 0;
    text-align: left;
}
@media screen and (min-width: 600px) {
    .e-head.-top {
        font-size: 80px;
    }
}

/*---------------------------

link

---------------------------*/
.e-link::before,
.e-link::after {
    content: '';
}
.e-link {
    text-decoration: none;
    transition: 0.3s;
}
.e-link.-border {
    text-decoration: underline;
}
.e-link.-en {
    font-family: var(--century);
    font-weight: 700;
}

/* dot-link */
.e-link.-dot {
    display: block;
    position: relative;
    width: 100%;
}
.e-link.-dot::before {
    bottom: -3px;
    height: 1px;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}
.e-link.-dot::after {
    border-radius: 50%;
    display: block;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    transition: 0.3s all;
    right: 1em;
    width: 5px;
}

.e-link.-dot.m-blue:before,
.e-link.-dot.m-blue:after {
    background-color: var(--main-blue);
}
a:hover .e-link.-dot.m-blue,
.e-link.-dot.m-blue:hover {
    color: var(--main-blue);
}

.e-link.-dot.m-white:before,
.e-link.-dot.m-white:after {
    background-color: #fff;
}
@media screen and (min-width: 600px) {
    a:hover .e-link.-dot::before,
    .e-link.-dot:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }
    a:hover .e-link.-dot::after,
    .e-link.-dot:hover::after {
        transform: translate(5px, -50%);
    }
}

/* text-only-link */
.e-link.-text {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
.e-link.-text:before,
.e-link.-text:after {
    bottom: 0;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease-in-out;
    transition-delay: 150ms;
    width: 100%;
}
a:hover .e-link.-text::before,
.e-link.-text:hover::before {
    transform-origin: left;
    transform: scaleX(1);
    width: 100%;
}
.e-link.-text:after {
    transform: scaleX(1);
    transform-origin: left;
    transition-delay: unset;
}
a:hover .e-link.-text::after,
.e-link.-text:hover::after {
    transform-origin: right;
    transform: scaleX(0);
    width: 100%;
}

.e-link.-text.m-white::before,
.e-link.-text.m-white::after {
    background-color: #fff;
}

/* external-link */
.e-link.-external {
    display: inline-block;
    padding-right: 10px;
    position: relative;
}
.e-link.-external:after {
    display: block;
    height: 12px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translate(0, calc(-50% + 1px));
    transition: 0.4s;
    width: 12px;
    background: url(../img/icon-blank.png) center center / contain;
}
a:hover .e-link.-external:after,
.e-link.-external:hover:after {
    transform: translate(2px, calc(-50% - 2px));
}

/*---------------------------

button

---------------------------*/
.e-btn::before,
.e-btn::after,
.e-btn *::before,
.e-btn *::after {
    content: '';
}

.e-btn,
.e-btn:before {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 24px 32px;
    text-decoration: none;
    transition: 0.4s;
}
.e-btn {
    border: 1px solid;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.e-btn:before {
    border-radius: 40px;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: transform 0.4s ease-in-out;
    transform: translateX(-100%);
    width: 100%;
    z-index: -1;
}
/* animation - hover / leave  */
.e-btn.--hover::before {
    animation: btHover 0.4s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
.e-btn.--leave::before {
    animation: btLeave 0.4s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
@keyframes btHover {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    1% {
        opacity: 1;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes btLeave {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    99% {
        opacity: 1;
        transform: translateX(100%);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}
/* btn dot */
.e-btn span {
    border-radius: 50%;
    display: block;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    transition: 0.4s;
    right: 37px;
    width: 5px;
}
.e-btn:hover span {
    transform: translate(5px, -50%);
}
/* color setting  */
.e-btn.m-white {
    border-color: var(--main-blue);
    background-color: #fff;
    color: var(--main-blue);
}
.e-btn.m-white span {
    background-color: var(--main-blue);
}
.e-btn.m-white:before {
    background-color: var(--main-blue);
}
.e-btn.m-white:hover,
.e-btn.m-white.-reverse:hover {
    color: #fff;
}
.e-btn.m-white:hover span,
.e-btn.m-white.-reverse:hover span {
    background-color: #fff;
}
.e-btn.m-white.-reverse::before,
.e-btn.m-white.-reverse:hover::before {
    background-color: var(--main-blue);
}
.e-btn.m-blue {
    border-color: var(--main-blue);
    background-color: var(--main-blue);
    color: #fff;
}
.e-btn.m-blue span {
    background-color: #fff;
}
.e-btn.m-blue:before {
    background-color: #fff;
}
.e-btn.m-blue:hover {
    color: var(--main-blue);
}
.e-btn.m-blue:hover span {
    background-color: var(--main-blue);
}
.e-btn.m-green {
    border-color: var(--main-green);
    background-color: var(--main-green);
    color: #fff;
}
.e-btn.m-green span {
    background-color: #fff;
}
.e-btn.m-green:before {
    background-color: #fff;
}
.e-btn.m-green:hover {
    color: var(--main-green);
}
.e-btn.m-green:hover span {
    background-color: var(--main-green);
}

/*---------------------------

block

---------------------------*/
main {
    padding-top: var(--sectionPT);
}
@media screen and (min-width: 600px) {
    main {
        padding-top: 150px;
    }
}

/* topic-path */
.b-topic-path {
    margin-bottom: 64px;
}
.b-topic-path .-list {
    display: flex;
    font-size: 1.2rem;
    line-height: 1;
}
.b-topic-path .e-li + .e-li {
    margin-left: 2em;
    position: relative;
}
.b-topic-path .e-li + .e-li::before {
    background: var(--main-black);
    content: '';
    display: block;
    width: 1px;
    height: 1.1em;
    left: -1.1em;
    position: absolute;
    top: 1px;
    transform: rotate(45deg);
}

/*.b-box .-inner {
    margin: 0 auto;
    width: var(--inner-width);
    max-width: 1024px;
}
*/

.-list .e-img img {
    transform: scale(1);
    transition: 0.6s;
}
.-list .e-child:hover .e-img img {
    transform: scale(1.1);
}

.m-border-effect {
    position: relative;
}
.m-border-effect:after {
    background-color: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: -89px;
    top: 50%;
    transform: translateY(-50%);
    width: 88px;
}
.m-border-effect .-list {
    position: static;
    width: 100%;
}
.m-border-effect.-larger .-list {
    width: calc(100% + 320px);
}
.m-border-effect .-list .e-arrow {
    background-color: #fff;
    border: 1px solid var(--main-blue);
    border-radius: 24px;
    cursor: pointer;
    top: calc(50% - 31px);
    transform: translateY(-50%);
    z-index: 1;
}
.m-border-effect .-list .e-arrow,
.m-border-effect .-list .e-arrow::before{
    width: 48px;
    height: 48px;
    position: absolute;
}
.m-border-effect .-list .e-arrow::before{
    border: 1px solid var(--main-blue);
    background: var(--main-blue);
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(0,0);
    transition: .3s all;
}
.m-border-effect .-list .e-arrow:hover::before{
    transform: scale(1,1);
}
.m-border-effect .-list .e-arrow span {
    border-top: 2px solid var(--main-blue);
    border-right: 2px solid var(--main-blue);
    display: block;
    height: 8px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
}
.m-border-effect .-list .e-arrow:hover span{
    border-color: #fff;
}
.m-border-effect .-list .e-arrow.m-prev {
    left: -24px;
}
.m-border-effect .-list .e-arrow.m-prev span {
    transform: translate(-50%, -50%) rotate(-135deg);
}
.m-border-effect .-list .e-arrow.m-next {
    right: -24px;
}
.m-border-effect .-list .e-arrow.m-next span {
    transform: translate(-50%, -50%) rotate(45deg);
}
.m-border-effect .-list .e-wrap {
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}
.m-border-effect.-larger .-list .e-wrap {
    max-width: 408px;
}
.m-border-effect .-list .e-wrap .-img {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    width: 100%;
}
.m-border-effect .-list .e-item {
    position: relative;
    padding-right: 16px;
    transform: translateX(-65px);
}
.m-border-effect .-list .e-item * {
    transition: 0.6s;
}
.m-border-effect .-list .e-item:hover * {
    color: var(--main-blue);
}
.m-border-effect .-list .e-item:hover .-img {
    transform: scale(1.1);
}
.m-border-effect .-list .e-item:before {
    background-color: var(--main-blue);
    bottom: 0px;
    content: '';
    height: 1px;
    position: absolute;
    transition: 0.6s;
    width: 60px;
    z-index: 1
}
.m-border-effect .-list .e-item:after {
    content: '';display: block;
    width: calc(100% - 16px);
    height: 1px;
    background: #efefef;
    position: absolute;
    bottom: 0px;
}
.m-border-effect .-list .e-item:hover::before {
    width: calc(100% - 16px);
}
.m-border-effect .-list .e-head {
    color: #1a1a1c;
    font-size: 16px;
    margin-top: 16px;
    padding-bottom: 16px;
}

@media screen and (max-width: 599px) {
    .m-border-effect .-list .e-arrow {
        display: none !important;
    }
}
@media screen and (min-width: 600px) {
    .m-border-effect .-list .e-item {
        transform: translateX(-88px);
    }
    
}
.m-border-effect .-list .e-item.none {
    opacity: 0;
    pointer-events: none;
}

/*---------------------------

table

---------------------------*/

.b-table{
    overflow-x: scroll;
}
.b-table table{
    width: 100%;
    min-width: 800px;
    border-bottom: 1px solid #EFEFEF;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 40px;
}
.b-table th{
    font-weight: 400;
    background: #EFEFEF;
    border-right: 1px solid #fff;
}
.b-table th,
.b-table td{
    padding: .6em .8em;
    vertical-align: top;
}
.b-table td{
    border-bottom: 1px solid #EFEFEF;
}

/*---------------------------

header

---------------------------*/
.header {
    align-items: center;
    background: linear-gradient(0, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 100%) 100%);
    display: flex;
    justify-content: space-between;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    width: 100%;
    position: fixed;
    z-index: 90;
}
.header.m-active {
    transform: translateY(0);
}
.header .b-siteLogo,
.b-float-menu .b-siteLogo {
    display: block;
    width: 188px;
    margin: 16px 0 4px 40px;
    position: relative;
    z-index: 1;
}
.header .e-link.-text:before {
    background-color: var(--main-blue);
}
.header .e-link.-text:hover {
    color: var(--main-blue);
}
.header .e-btn,
.header .e-btn:before {
    font-size: 1.2rem;
    font-weight: 400;
    margin-right: 16px;
    padding: 16px 32px;
    text-align: center;
    white-space: nowrap;
}
.header .e-head {
    color: var(--main-black);
}
.header .b-nav,
.header .b-nav .-list {
    align-items: center;
    display: flex;
    position: relative;
    z-index: 1;
}
.header .b-nav .-list .e-li {
    margin-right: 32px;
}
@media screen and (max-width: 735px) {
    .header .b-siteLogo,
    .b-float-menu .b-siteLogo {
        margin-left: 16px;
    }
    .header .b-nav {
        display: none;
    }
}
@media screen and (min-width: 736px) {
    .header .b-siteLogo,
    .b-float-menu .b-siteLogo {
        width: 270px;
    }
}
@media screen and (min-width: 736px) and (max-width: 1170px) {
    .header .b-nav {
        padding-right: 80px;
    }
    .header .b-nav .-list {
        display: none;
    }
}
@media screen and (min-width: 1171px) {
    .header {
        padding-right: 98px;
    }
}

/* float-menu */
.b-float-btn {
    cursor: pointer;
    height: 60px;
    position: fixed;
    right: 20px;
    top: 20px;
    transition: all 0.4s;
    width: 60px;
    z-index: 99;
}
.b-float-btn:before {
    content: '';
    height: 18px;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.4s;
    transform: translate(0);
    right: 0;
    width: 18px;
}
.b-float-btn:hover:before {
    opacity: 1;
    transform: translate(10px, -10px);
}
.b-float-btn,
.b-float-btn:before {
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 33px;
    display: block;
}
.b-float-btn i:before,
.b-float-btn i:after {
    background-color: var(--main-black);
    content: '';
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all 0.4s;
    width: 25px;
}
.b-float-btn i:before {
    top: calc(50% - 4px);
}
.b-float-btn i:after {
    top: calc(50% + 4px);
}
.b-float-btn.m-close {
    height: 66px;
    transform: translate(3px, -3px);
    width: 66px;
}
.b-float-btn.m-close:before {
    opacity: 0;
}
.b-float-btn.m-close i:before,
.b-float-btn.m-close i:after {
    top: 50%;
}
.b-float-btn.m-close i:before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.b-float-btn.m-close i:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.b-float-menu {
    background-color: #efefef;
    height: 100dvh;
    opacity: 1;
    pointer-events: all;
    position: fixed;
    top: 0;
    transition: all 0.4s;
    visibility: visible;
    width: 100vw;
    z-index: 98;
}
.b-float-menu.m-hide {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.b-float-menu .b-siteLogo {
    position: fixed;
    z-index: 5;
}
@media screen and (max-width: 1024px) {
    .b-float-menu {
        overflow-y: scroll;
        padding-bottom: 60px;
    }
    .b-float-menu::before {
        content: '';
        display: block;
        width: 100dvw;
        height: 108px;
        background: rgb(239, 239, 239);
        background: linear-gradient(0deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 1) 55%);
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
    }
    .b-float-menu .-nav {
        margin-top: 110px;
        padding-bottom: 110px;
    }
    .b-float-menu .e-head.-en,
    .b-float-menu .-list .e-li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
    }
    .b-float-menu .e-head.-en {
        border-top: 1px solid #d0d0d0;
        font-size: 20px;
        height: 56px;
    }
    .b-float-menu .-list {
        display: none;
        border-top: 1px solid #d0d0d0;
        padding: 12px 0 20px;
    }
    .b-float-menu .-list .e-li {
        height: 35px;
    }
    .b-float-menu .m-tb .-list {
        display: block;
        padding: 0;
    }
    .b-float-menu .m-tb .e-li {
        height: 56px;
        border-bottom: 1px solid #d0d0d0;
    }
    .b-float-menu .e-head.-en span {
        display: block;
        width: 16px;
        height: 16px;
        position: relative;
        transform-origin: center center;
        transition: 0.3s all;
    }
    .b-float-menu .e-head.-en.m-close span {
        transform: rotate(45deg);
    }
    .b-float-menu .e-head.-en span::before,
    .b-float-menu .e-head.-en span::after {
        content: '';
        display: block;
        width: 16px;
        height: 2px;
        background: var(--main-blue);
        position: absolute;
        z-index: 1;
        top: 50%;
        transform-origin: center center;
    }
    .b-float-menu .e-head.-en span::after {
        transform: rotate(90deg);
    }
    .b-float-menu .e-link {
        font-size: 16px;
    }
    .b-float-menu .e-link.-dot.m-blue:before,
    .b-float-menu .e-link.-dot.m-blue:after {
        display: none;
    }
}
@media screen and (max-width: 599px) {
    .b-float-menu .-nav {
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .b-float-menu .-nav {
        margin-left: 40px;
        margin-right: 40px;
    }
}
@media screen and (min-width: 1025px) {
    .b-float-menu {
        background-color: #f8f8f8;
    }
    .b-float-btn {
        right: 36px;
    }
}

.b-float-menu .-menu-head {
    align-items: center;
    display: flex;
    height: 66px;
    justify-content: space-between;
    margin: 113px auto 40px;
    min-width: 1024px;
    width: calc(100% - 340px);
}
.b-float-menu .-menu-head .e-head {
    font-size: 3rem;
    line-height: 1;
    margin: 0;
}
.b-float-menu .-menu-head .-btn-wrap {
    display: flex;
    justify-content: space-between;
    width: calc(50% - 16px);
}
.b-float-menu .-menu-head .-btn-wrap .e-btn {
    margin-right: 32px;
    max-width: unset;
    width: calc(50% - 16px);
}
.b-float-menu .-menu-head .-btn-wrap .e-btn:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1024px) {
    .b-float-menu .-menu-head {
        display: none;
    }
}
@media screen and (min-width: 1025px) {
    .b-float-menu .b-siteLogo {
        position: absolute;
    }
    .b-float-menu .-nav {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        min-width: 1024px;
        width: calc(100% - 340px);
    }
    .b-float-menu .-list-wrap {
        border-top: 1px solid var(--main-black);
        border-bottom: 1px solid var(--main-black);
        margin-right: 32px;
        max-width: calc(25% - 24px);
        width: 100%;
    }
    .b-float-menu .-row {
        width: calc(25% - 24px);
    }
    .b-float-menu .-row .-list-wrap {
        margin-right: 0;
        max-width: 100%;
    }
    .b-float-menu .-row .-list-wrap:nth-child(n + 2) {
        border-top: 0;
    }

    .b-float-menu .-list {
        display: block !important;
        margin-bottom: 60px;
    }
    .b-float-menu .-row .-list {
        margin-bottom: 40px;
    }
    .b-float-menu .e-head {
        font-size: 2.4rem;
        margin: 24px 0;
        pointer-events: none;
    }
    .b-float-menu .e-li .e-link {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .b-float-menu .-menu-bottom .-btn-wrap {
        display: flex;
        justify-content: space-between;
        margin: 60px auto 0;
        max-width: 672px;
    }
    .b-float-menu .-menu-bottom .-btn-wrap .e-link {
        max-width: 320px;
        text-align: center;
        width: 100%;
    }
}

/*---------------------------

contact

---------------------------*/
.contact {
    background-color: #fff;
    position: relative;
    z-index: 85;
}
.contact .-inner {
    padding: 108px 0 64px;
}
.contact .e-link {
    border-radius: 16px;
    box-shadow: 0px 3px 10px #1a1a1c1a;
    color: var(--main-black);
    display: block;
    margin: auto;
    padding: 77px 1em 55px;
    position: relative;
    text-align: center;
}
.contact .e-link .-icon {
    border-radius: 45px;
    display: block;
    height: 90px;
    left: 50%;
    position: absolute;
    top: -38px;
    transform: translateX(-50%);
    transition: 0.3s;
    width: 90px;
    background-size: cover;
}
.contact .e-link.m-green .-icon {
    background-color: var(--main-green);
}
.contact .e-link.m-blue .-icon {
    background-color: var(--main-blue);
}

.contact .e-link .-head {
    font-size: 24px;
    transition: 0.3s;
}
.contact .e-link .-caption {
    line-height: 1.75;
    margin-top: 18px;
}
@media screen and (max-width: 599px) {
    .contact .e-link.m-blue {
        margin-top: 75px;
    }
}
@media screen and (min-width: 600px) {
    .contact .-inner {
        display: flex;
        justify-content: space-between;
    }
    .contact .e-link {
        width: calc(50% - 16px);
        margin: 0;
    }
    .contact .e-link.m-green:hover .-head {
        color: var(--main-green);
    }
    .contact .e-link.m-blue:hover .-head {
        color: var(--main-blue);
    }
    .contact .e-link:hover .-icon {
        top: -30px;
    }
    .contact .e-link .-caption {
        font-size: min(16px, 2vw);
    }
}

/*---------------------------

footer

---------------------------*/

/* common */
.footer {
    background-color: var(--main-blue);
    padding: 1px 0;
    position: relative;
    z-index: 85;
}
.footer > * {
    color: #fff;
    font-size: 1.2rem;
}
.footer .e-link {
    color: #fff;
}
.footer .e-head {
    font-size: 2rem;
    margin-bottom: 18px;
}

/* block */
.footer .b-inner-wrap {
    display: flex;
    justify-content: space-between;
    margin: 63px auto 39px;
    width: var(--inner-width);
    max-width: 1024px;
}
.footer .-menu {
    width: 100%;
}
.footer .-section {
    border-bottom: 1px solid #508bbc;
    padding: 23px 0 20px;
}
.footer .b-bottom .-section {
    padding: 15px 0 18px;
}
.footer .b-bottom .-section.m-copyright {
    padding-top: 5px;
}
.footer .-section:first-child {
    border-top: 1px solid #508bbc;
}

/* detail */
.footer .-logo {
    margin-right: auto;
    width: 20%;
    max-width: 112px;
}

.footer .-logo .e-caption {
    font-family: var(--century);
    font-size: 1rem;
    font-weight: 400;
}

.footer .-link-list .e-link {
    margin-top: 10px;
}
.footer .-link-list .e-link.-text {
    margin-top: 10px;
}
.footer .-link-list li:first-child .e-link {
    margin-top: 0;
}

.footer .-btn-wrap {
    display: flex;
    margin-bottom: 64px;
}
.footer .-btn-wrap .e-btn {
    margin-right: 32px;
    width: calc(100% / 3 - 21px);
}
.footer .-btn-wrap .e-btn::before {
    background-color: #e7eef4 !important;
}
.footer .-btn-wrap .e-btn:hover {
    color: var(--main-blue);
}
.footer .-btn-wrap .e-btn span {
    background: var(--main-blue) !important;
}

.footer .b-nav {
    display: flex;
    justify-content: space-between;
}
.footer .b-nav .-inner {
    margin-right: 32px;
    width: calc(100% / 3);
    margin-top: 0;
}
.footer .b-nav .-inner:last-child {
    margin-right: 0;
}

.footer .b-nav .e-link.-external {
    font-size: 1.6rem;
    font-weight: 700;
}

.footer .b-bottom {
    margin-top: 40px;
}
.footer .b-bottom .-section:first-child {
    border-top: none;
}
.footer .b-bottom .-section:last-child {
    border: none;
}
.footer .b-bottom * {
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
}
.footer .b-bottom .e-caption,
.footer .b-bottom .e-caption .-external {
    font-size: 12px;
    line-height: 1.5;
}
.footer .e-pagetop,
.footer .e-pagetop span {
    display: block;
}
.footer .e-pagetop {
    width: 75px;
    height: 75px;
    border: 1px solid #fff;
    background: var(--main-blue);
    border-radius: 50%;
    position: absolute;
    transition: 0.3s all;
}
.footer .e-pagetop span {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 16px;
    left: calc(50% + 4px);
    position: absolute;
    top: calc(50% - 4px);
    transform: rotate(-45deg) translate(-50%, -50%);
    width: 16px;
    transition: 0.3s all;
}

@media screen and (max-width: 599px) {
    .footer .b-inner-wrap {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 155px;
    }
    .footer .b-nav {
        flex-wrap: wrap;
    }
    .footer .b-nav .-inner {
        width: 100%;
        margin-right: 0;
    }
    .footer .b-nav .-inner:nth-child(1) {
        border-top: 1px solid #508bbc;
    }
    .footer .b-nav .-inner:nth-child(3) {
        display: flex;
        flex-direction: column;
    }

    .footer .-section {
        padding: 16px 0 18px;
    }
    .footer .-section:first-child {
        border-top: 0 none;
    }
    .footer .e-head.-en {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
    }
    .footer .e-head.-en span {
        display: block;
        width: 16px;
        height: 16px;
        position: relative;
        transform-origin: center center;
        transform: translateY(5px);
        transition: 0.3s all;
    }
    .footer .e-head.-en.m-close span {
        transform: translateY(5px) rotate(45deg);
    }
    .footer .e-head.-en span::before,
    .footer .e-head.-en span::after {
        content: '';
        display: block;
        width: 16px;
        height: 2px;
        background: #96bddd;
        position: absolute;
        z-index: 1;
        top: 50%;
        transform-origin: center center;
    }
    .footer .e-head.-en span::after {
        transform: rotate(90deg);
    }
    .footer .-link-list {
        display: none;
        padding-top: 16px;
        margin-top: 18px;
        border-top: 1px solid #508bbc;
    }
    .footer .e-link {
        font-size: 16px;
    }
    .footer .e-link.-dot.m-blue:before,
    .footer .e-link.-dot.m-white:after {
        display: none;
    }

    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(3) {
        order: 4;
    }
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(3),
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(4) {
        padding: 8px 0 30px;
    }
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(3) .-link-list,
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(4) .-link-list {
        display: block !important;
        border-top: 0 none;
        margin-top: 0;
    }
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(4) .e-link.-text {
        font-size: 12px;
        margin-top: 18px;
    }
    .footer .b-nav .-inner:nth-child(3) .-section:nth-child(4) li:nth-child(1) .e-link.-text {
        margin-top: 0;
    }
    .footer .b-bottom {
        margin-top: 10px;
    }
    .footer .-logo {
        display: block;
        margin: auto;
        width: 140px;
        padding: 55px 0 60px;
        line-height: 1;
    }
    .footer .-logo .e-logo {
        margin-top: 0;
    }
    .footer .b-bottom .-section.m-copyright {
        text-align: center;
        border-top: 1px solid #508bbc;
    }
    .footer .e-pagetop {
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media screen and (min-width: 600px) {
    .footer .-logo.m-tbOver {
        display: flex;
        align-items: center;
    }
    .footer .-logo{
        transform: translateX(8px);
    }
    .footer .-logo .e-logo {
        margin-top: -60px;
    }
    .footer .-menu {
        width: 75%;
        max-width: 760px;
    }
    .footer .e-pagetop:hover {
        background: #024b88;
    }
    .footer .e-pagetop:hover span {
        margin-top: -6%;
    }
    .footer .-link-list {
        display: block !important;
    }
    .footer .e-pagetop {
        width: 90px;
        height: 90px;
        bottom: 40px;
        right: 40px;
    }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .footer {
        padding-bottom: 110px;
    }
    .footer .b-nav {
        flex-wrap: wrap;
    }
    .footer .b-nav .-inner,
    .footer .-btn-wrap .e-btn {
        width: 47%;
        margin-right: auto;
    }
    .footer .b-nav .-inner:nth-child(2),
    .footer .-btn-wrap .e-btn:nth-child(2) {
        margin-right: 0;
    }
    .footer .b-nav .-inner:nth-child(3) {
        margin-top: 40px;
        margin-right: auto;
        margin-left: 0;
    }
}

/*---------------------------

pagenation

---------------------------*/
.b-pagenation .container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1;
  margin-top: 40px;
    
}
.b-pagenation .page-numbers{
  margin: 0 9px 10px;
}
.b-pagenation .page-numbers:not(.prev):not(.next){
  display: flex;
  justify-content: center;
  align-items: center;
  background: #B0C5D6;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.05em;
  text-indent: -.14em;
  position: relative;
    transition: .3s all;
}
.b-pagenation .page-numbers:not(.prev):not(.next):hover{
    background: var(--main-blue);
}
.b-pagenation .page-numbers:not(.prev):not(.next),
.b-pagenation .page-numbers:not(.prev):not(.next)::before{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.b-pagenation .page-numbers:not(.prev):not(.next) span{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.b-pagenation .page-numbers.current{
  background: var(--main-blue) !important;
}

@media screen and (min-width: 600px) {
  .b-pagenation .container{
    margin-top: 95px;
  }
}
@media screen and (min-width: 1025px) {
  .b-pagenation .container{
    justify-content: end;
  }
  .b-pagenation .page-numbers:nth-last-child(2){
    margin-right: 0;
  }
}
  .prev.page-numbers,
  .next.page-numbers{
    display: none;
  }

/*---------------------------

ToggleSlide

---------------------------*/
.js-ToggleTtl{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.js-ToggleTtl span{
    display: block;
    width: 1.2em;
    min-width: 1.2em;
    height: 1.2em;
    margin-left: 15px;
    position: relative;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: .3s all;
    margin-top: .1em;
}
.js-ToggleTtl.open span{
    transform: rotate(0);
}
.js-ToggleTtl span::before,
.js-ToggleTtl span::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--main-blue);
    position: absolute;
    top: 50%;
    transform-origin: center center;
    transform: translateY(-50%);
}
.js-ToggleTtl span::before{
    transform: rotate(45deg)
}
.js-ToggleTtl span::after{
    transform: rotate(-45deg)
}
.js-ToggleCld{
    opacity: 0;
    display: block;
    animation: .3s ease-in forwards reverse toggleSlide;
}
.js-ToggleCld.open{
    animation: .3s ease-in forwards toggleSlide;
}
@keyframes toggleSlide {
    0% {
        opacity: 0;
        display: none;
    }
    1% {
        opacity: 0;
        display: block;
    }
    100% {
        opacity: 1;
        display: block;
    }
}
/*---------------------------

interview

---------------------------*/
.b-interview {
    margin: 120px auto 0;
    position: relative;
    z-index: 1;
}
.b-interview.m-index {
    width: var(--inner-width);
}
.b-interview .-list .e-child {
    display: flex;
    align-items: flex-start;
    margin-bottom: 64px;
}
.b-interview .-list li:last-child .e-child {
    margin-bottom: 0;
}
.b-interview .-list .e-img {
    aspect-ratio: 9 / 5.1;
    overflow: hidden;
}
.b-interview .-list .e-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.b-interview .-article {
    position: relative;
}
.b-interview .-article .e-client,
.b-interview .-article .e-project,
.b-interview .-article .e-title {
    margin-bottom: 16px;
}
.b-interview .-article .e-client {
    font-size: 16px;
    font-weight: 400;
}
.b-interview .js-interview-list .-article .e-client span{
    display: block;
}
.b-interview .-article .e-project,
.b-interview .-article .e-title {
    font-size: 18px;
}
.b-interview .-article .e-title {
    font-weight: 500;
}
.b-interview .js-interview-list .-article .e-title br{
    display: none;
}
.b-interview .-article .-keyword {
    display: flex;
    flex-wrap: wrap;
}
.b-interview .-article .-keyword .e-li {
    border-left: 1px solid #1a1a1c;
    font-size: 12px;
    line-height: 1;
    padding: 0 8px;
    margin-bottom: 2px;
}
.b-interview .-article .-keyword .e-li:last-child {
    border-right: 1px solid #1a1a1c;
}
.b-interview .-article .e-link {
    width: 118px;
    margin-top: 30px;
    margin-left: auto;
}
.b-interview .e-btn {
    margin: 64px 0 0 auto;
    max-width: 320px;
}
@media screen and (max-width: 599px) {
    .b-interview {
        margin-top: 60px;
    }
    .b-interview.m-index {
        padding-bottom: 144px;
    }
    .b-interview .e-head {
        margin-bottom: 40px;
    }
    .b-interview.m-index .-list {
        width: 95vw;
    }
    .b-interview.m-index .-list li {
        padding-right: 16px;
        transform: translateX(-12px);
    }
    .b-interview .-list .e-child {
        flex-direction: column;
        margin-bottom: 0;
    }
    .b-interview:not(.m-index) .-list li+li .e-child {
        margin-top: 50px;
    }
    .b-interview .-article {
        margin-top: 24px;
    }
    .b-interview .-article .e-client {
        margin-bottom: 4px;
    }
    .b-interview .-article .e-link {
        bottom: 0;
        margin: 30px 0 0 auto;
        position: relative;
        right: 0;
    }
    .b-interview .e-btn {
        margin: 72px auto 0;
    }
}
@media screen and (min-width: 600px) {
    .b-interview.m-index {
        max-width: 848px;
        padding-bottom: 144px;
    }
    .b-interview .-list .e-img {
        width: 48.113%;
        min-width: 48.113%;
    }
    .b-interview .-article .e-client {
        font-size: min(1.6rem, 1.8vw);
    }
    .b-interview .-article .e-project,
    .b-interview .-article .e-title {
        font-size: min(1.8rem, 2vw);
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .b-interview .-list .e-img {
        margin-right: 16px;
        width: 40%;
        min-width: 40%;
    }
}
@media screen and (min-width: 1025px) {
    .b-interview .-list .e-img {
        margin-right: 32px;
    }
}

/*---------------------------

common(優先度高)

---------------------------*/
@media screen and (max-width: 599px) {
    .m-pc {
        display: none;
    }
    .m-tbOver {
        display: none !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .m-sp {
        display: none;
    }
    .m-pc {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    .m-sp {
        display: none !important;
    }
    .m-tb {
        display: none;
    }
}