.enFont, nav .nav__btn, footer .footer__copy {
    font-family: "Karla", serif;
    font-weight: 400
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 500
}
address, em {
    font-style: normal
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
th {
    font-weight: normal;
    text-align: left
}
legend {
    display: none
}
img, fieldset {
    border: 0
}
li {
    list-style-type: none
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
    display: block;
    margin: 0;
    padding: 0
}
html {
    overflow-y: scroll
    scroll-behavior: smooth;
}

body, button, input, select, textarea {
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 1.6rem
}
button, input, select, textarea {
    outline: none;
    -webkit-appearance: none;
    appearance: none
}
object, embed {
    vertical-align: top
}
img {
    max-width: 100%;
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
    -webkit-backface-visibility: hidden
}
a {
    color: #040D14;
    text-decoration: underline;
    transition-duration: .3s
}
a:hover {
    color: #fff;
    text-decoration: none
}
a>img {
    transition: opacity .3s ease-out
}
a>img:hover {
    opacity: .6
}
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 28px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
#loader {
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0
}
#loader div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
.loaderIcon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
    position: relative;
    text-indent: -9999em;
    border-top: 1px solid #674498;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 2s infinite linear;
    animation: load8 2s infinite linear
}
.loaderIcon::after {
    border-radius: 50%;
    width: 30px;
    height: 30px
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
* {
    box-sizing: border-box;
    word-break: break-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
html {
    font-size: 62.5%
}
body {
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    color: #040D14;
    text-align: justify;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
/*
header {
    padding: 24px 2.1vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition-duration: .6s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
header .logo {
    margin-right: auto
}
header .logo a {
    color: #040D14;
    text-decoration: none;
    transition-duration: .6s
}
header .logo a:hover {
    opacity: .6
}
header.scroll {
    background: #fff;
    box-shadow: 0px 16px 40px 40px rgba(177, 139, 229, 0.1);
    padding: 8px 2.1vw
}
header.scroll .logo img {
    width: 80%
}
header.scroll nav .nav__link {
    padding-left: 0;
    box-shadow: none
}
*/
#menuBtn {
    display: none
}
nav {
    gap: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
nav .nav__link {
    height: 60px;
    margin-bottom: 0 !important;
    gap: 0 32px;
    margin-bottom: 0;
    transition-duration: .6s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
nav .nav__item.hasChild {
    position: relative;
    gap: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
nav .nav__item.hasChild::after {
    content: "";
    width: 10px;
    height: 6px;
    background: url("../img/i_arrow-nav.svg") no-repeat center center/cover;
    display: inline-block
}
nav .nav__item.hasChild:hover .subMenu {
    visibility: visible;
    opacity: 1
}
nav .nav__item a {
    font-weight: 600;
    color: #040D14;
    padding: 8px 3px;
    display: inline-block;
    text-decoration: none;
    transition-duration: .3s;
    position: relative;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    letter-spacing:-0.05em;
}
nav .nav__item a::before {
    content: "";
    background: url(../img/nav_ac.svg) no-repeat center center/contain;
    width: 56px;
    height: 56px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s
}
nav .nav__item a:hover::before {
    opacity: 1
}
nav .nav__item.ac>a {
    color: #fff
}
nav .nav__btn {
    font-size: 16px;
    color: #fff;
    padding: 10px 32px;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-block
}
nav .nav__btn:hover {
    opacity: .6
}
nav .nav__btn.entry {
    background: #B18BE5;
    font-family: "Karla", serif;
    font-weight: 800;
    position: relative;
    overflow: hidden;
    background-image: url("../img/btn_bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center
}
nav .subMenu {
    width: max-content;
    background: #fff;
    padding: 8px 24px;
    border-radius: 0 0 8px 8px;
    position: absolute;
    top: 100%;
    left: 50%;
    box-shadow: 0px 16px 40px 0px #ECF0F0;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    transition-duration: .3s;
    transform: translateX(-50%)
}
nav .subMenu ul li {
    text-align: center
}
nav .subMenu ul li:not(:last-of-type) {
    border-bottom: 1px dotted #e5e5e5
}
nav .subMenu ul li a {
    font-weight: 400;
    padding: 8px 0;
    text-decoration: none;
    transition-duration: .3s
}
nav .hasChild {
    position: relative
}
nav .hasChild:hover .subMenu {
    visibility: visible;
    opacity: 1
}
footer {
    color: #333;
    padding: 0;
    text-align: center
}

.above{
    color: #fff;
    background: #1e2341;
    padding: 0;
    text-align: center
}

.foot-wrap {
    color: #fff;
    text-align: center;
}

.foot-wrap .menu-left, .menu-center_l, .menu-center_r, .menu-right {
    display: inline-block;
    vertical-align: top;
    text-align:left;
    width: 20%;
    height:350px;
    margin: 0 auto;
    padding:40px 0 40px 20px;
    border-right: 1px solid #494949;
    
}

.menu-right {
    border-right: none;
    
}

.menu-right>li::before{
    content: "";
    display: block;
    height: 10px;
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.menu-right>li:first-of-type::before{
    content: none;
}

.foot-wrap ul {
    list-style: none;
    padding: 0;
}

.foot-wrap h3 {
    padding: 0 10px 10px 0;
    font-weight:bold;
    line-height:40px;
}

.foot-wrap a {
    font-size:80%;
    text-decoration: none;
    color: #cbcacf;
}

.foot-wrap a:hover {
    color: #333;
}

.foot-wrap .cmark {
    display: block;
    padding: 10px;
    border-top: 1px solid gray;
    width: 80%;
    margin: 0 auto;
    color: gray;
}


@media screen and (max-width: 900px) {
    .foot-wrap .menu-left, .menu-center_l, .menu-center_r, .menu-right {
        display: block;
        vertical-align: top;
        text-align:left;
        width: 100%;
        height:auto;
        border-right: none;
        margin:0 auto;
        padding:40px 40px 0 130px;
    }
    
    .menu-right{
        padding-bottom:60px;
    }

    .foot-wrap .cpr {
        display: inline;
    }
    
}






footer .footer__txt {
    margin-right: auto
}
footer .footer__txt .logo {
    margin-bottom: 40px
}
footer .footer__txt p {
    font-size: 1.4rem
}
footer .footer__txt .name {
    font-size: 2.4rem;
    font-weight: 600
}
footer .footer__txt .outLink {
    color: #fff;
    display: inline-block;
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 8px
}
footer .footer__txt .outLink::after {
    content: "";
    width: 16px;
    height: 13px;
    background: url(../img/i_outlink-wt.svg) no-repeat center center/contain;
    margin-left: 10px;
    display: inline-block;
    position: relative;
    top: 1px
}
footer .footer__txt .outLink:hover {
    opacity: .6
}
footer .footer__link {
    padding-top: 20px;
    gap: 0 4.16vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
footer .footer__link__box>*:not(:first-child):not(ul) {
    margin-top: 40px
}
footer .footer__link__box a {
    color: #fff;
    text-decoration: none;
    transition: opacity .3s
}
footer .footer__link__box a:hover {
    opacity: .6
}
footer .footer__link__box p {
    margin-bottom: 0 !important
}
footer .footer__link__box ul {
    padding-left: 24px;
    margin-top: 24px;
    position: relative
}
footer .footer__link__box ul::before {
    content: "";
    width: 1px;
    background: #CCC;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}
footer .footer__link__box ul li {
    font-size: 1.4rem
}
footer .footer__link__box ul li:not(:last-of-type) {
    margin-bottom: 8px
}
footer .footer__link__box ul .outLink::after {
    background: url(../img/i_outlink-wt.svg) no-repeat center center/contain
}
footer .footer__copy {
    font-size: 1.4rem;
    width: 100%;
    padding: 24px;
    margin-top: 30px;
    text-align: center;
    position: relative;
    letter-spacing: .05em;
    font-family: "Karla", serif;
    border-top: 1px solid #ccc;
}


@media screen and (max-width: 1366px) {
    html {
        font-size: 56%
    }
}
@media screen and (max-width: 834px) {
    html {
        font-size: 58%;
        min-width: inherit;
        height: -webkit-fill-available
    }
    header {
        height: 60px;
        background: #fff;
        padding: 0 0 0 5vw;
        align-items: center
    }
    header .logo a {
        height: 40px;
        gap: 16px
    }
    header .logo a figure {
        height: 100%
    }
    header .logo a figure img {
        width: 100%;
        /*height: 100%*/
        height: 40px
    }
    header .logo a img {
        height: 40px
    }
    header .logo__txt {
        font-size: 1.2rem;
        padding-left: 16px
    }
    header.scroll {
        height: 60px
    }
    header.scroll .logo a img {
        height: auto
    }
    #menuBtn {
        width: 60px;
        height: 60px;
        background: #000;
        padding: 20px 11px 19px;
        display: block;
        cursor: pointer;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000;
        transition: .3s
    }
    #menuBtn>span {
        width: 30px;
        height: 2px;
        background: #fff;
        display: inline-block;
        position: absolute;
        right: calc(50% - 15px);
        transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s, width 0.3s cubic-bezier(0.65, 0, 0.35, 1), background 0.3s
    }
    #menuBtn>span:nth-of-type(1) {
        top: calc(50% - 9px)
    }
    #menuBtn>span:nth-of-type(2) {
        top: 50%
    }
    #menuBtn>span:nth-of-type(3) {
        top: calc(50% + 9px)
    }
    #menuBtn.ac>span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg)
    }
    #menuBtn.ac>span:nth-of-type(2) {
        width: 0
    }
    #menuBtn.ac>span:nth-of-type(3) {
        -webkit-transform: translateY(-9px) rotate(45deg);
        transform: translateY(-9px) rotate(45deg)
    }
    nav {
        height: calc(100% - 60px);
        background: #fff;
        padding: 5vh 10vw;
        gap: 24px;
        flex-direction: column;
        opacity: 0;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        pointer-events: none;
        transition: opacity .5s linear .1s
    }
    nav .nav__link {
        width: 100%;
        height: auto;
        padding: 0;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid #CCC;
        border-radius: 0;
        box-shadow: none
    }
    nav .nav__link li {
        width: 100%;
        border-top: 1px solid #CCC;
        flex-direction: column
    }
    nav .nav__link li a {
        font-size: 1.6rem;
        font-weight: 500;
        height: 60px;
        color: #111;
        padding: 0;
        display: flex;
        align-items: center;
        width: 100%
    }
    nav .nav__link2 {
        width: 100%;
        height: auto;
        padding: 0;
        flex-direction: column;
        gap: 0;

        border-radius: 0;
        box-shadow: none
    }
    nav .nav__link2 li {
        width: 100%;

        flex-direction: column
    }
    nav .nav__link2 li a {
        font-size: 1.5rem;
        font-weight: 500;
        height: 50px;
        color: #111;
        padding: 0;
        display: flex;
        align-items: center;
        width: 100%
    }

    
    nav .nav__item a:hover:before {
        display: none
    }
    nav .nav__btn {
        font-size: 1.8rem;
        width: 100%;
        height: auto;
        padding: 16px 5vw;
        justify-content: center
    }
    nav .subMenu {
        width: 100%;
        height: 0;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
        visibility: visible !important;
        opacity: 1 !important;
        position: static;
        box-shadow: none;
        transform: none
    }
    nav .subMenu ul li {
        text-align: left
    }
    nav .subMenu ul li:not(:last-of-type) {
        border-bottom: none
    }
    nav .subMenu ul li a {
        font-size: 1.4rem;
        height: auto;
        padding: 12px 24px;
        text-decoration: none;
        transition-duration: .3s
    }
    nav>ul>li.hasChild {
        position: relative;
        gap: 0 !important
    }
    nav>ul>li.hasChild:hover {
        box-shadow: none
    }
    nav>ul>li.hasChild:hover .subMenu {
        visibility: hidden;
        opacity: 0
    }
    nav>ul>li.hasChild::after {
        content: none !important
    }
    nav>ul>li.hasChild .nav__arrow {
        width: 40px;
        height: 60px;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px dotted #ddd;
        position: absolute;
        top: 0;
        right: 0
    }
    nav>ul>li.hasChild .nav__arrow::after {
        content: "";
        width: 6px;
        height: 6px;
        border-left: 1px solid;
        border-top: 1px solid;
        display: inline-block;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        transition-duration: .3s
    }
    nav>ul>li.hasChild .nav__arrow.ac::after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    nav>ul>li.hasChild .nav__arrow.ac~.subMenu {
        height: auto
    }
    nav.ac {
        opacity: 1;
        pointer-events: auto;
        overflow-y: scroll
    }
    footer {
        padding: 40px 0 80px 0;
        gap: 40px
    }
    footer .footer__txt {
        width: 100%;
        text-align: center
    }
    footer .footer__txt .logo {
        margin-bottom: 24px
    }
    footer .footer__link {
        padding-top: 0;
        gap: 16px;
        flex-wrap: wrap
    }
    footer .footer__link__box {
        width: 100%;
        font-size: 1.4rem
    }
    footer .footer__link__box>*:not(:first-child):not(ul) {
        margin-top: 16px
    }
    footer .footer__link__box ul {
        padding-left: 24px;
        margin-top: 16px
    }
    footer .footer__link__box ul li:not(:last-of-type) {
        margin-bottom: 8px
    }
    footer .footer__copy {
        padding: 16px;
        margin-top: 0
    }
}
@media screen and (max-width: 600px) {
    * {
        -webkit-appearance: none
    }
    body {
        line-height: 1.6
    }
    header .logo a img {
        height: 30px
    }
}
p:not(:last-child):not(.ttl__top), ul:not(:last-child), ol:not(:last-child), figure:not(:last-child), table:not(:last-child) {
    margin-bottom: 0
}
.inner {
    max-width: calc(1200px + 10vw);
    width: 100%;
    padding: 0 5vw;
    margin: auto
}
.inner2 {
    max-width: calc(1200px + 10vw);
    width: 100%;
    padding: 0;
    margin: auto
}
.inner__l {
    max-width: 100%;
    width: 100%;
    padding: 0 2.1vw
}
.inner__m {
    max-width: calc(1000px + 10vw);
    width: 100%;
    padding: 0 5vw;
    margin: auto
}
.inner__s {
    max-width: calc(800px + 10vw);
    width: 100%;
    padding: 0 5vw;
    margin: auto
}
ol {
    padding-left: 1em
}
ol>li {
    list-style-type: disc
}
ol.decimal>li {
    list-style-type: decimal
}
ol.space>li:not(:last-of-type) {
    margin-bottom: 24px
}
.mb__0 {
    margin-bottom: 0 !important
}
.mb__s {
    margin-bottom: 32px !important
}
.mb__m {
    margin-bottom: 40px !important
}
.mt__s {
    margin-top: 32px
}
.mt80 {
    margin-top: 80px
}
.mt20 {
    margin-top: 20px
}
.x2 {
    gap: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center
}
.x2>* {
    width: calc((100% - 40px) / 2)
}
@media screen and (max-width: 834px) {
    .x2 {
        gap: 24px
    }
    .x2>* {
        width: 100%
    }
}
.x3 {
    gap: 80px 4.17vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.x3>* {
    width: calc((100% - 8.34vw) / 3)
}
@media screen and (max-width: 834px) {
    .x3 {
        gap: 24px
    }
    .x3>* {
        width: 100%
    }
}
.btn__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
.btn__more, .btn__entry {
    font-size: 2.4rem;
    background: #B18BE5;
    font-family: "Karla", serif;
    font-weight: 800;
    padding: 16px 40px;
    padding: 20px 40px 20px 56px;
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background-image: url(../img/under__btn_bg.png);
    color: #fff;
    z-index: 1;
    transition-duration: .3s;
    gap: 24px;
    border: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
.btn__more::after, .btn__entry::after {
    content: "";
    width: 52px;
    height: 12px;
    background: url("../img/i_arrow-wt.svg") no-repeat center center/cover;
    display: block;
    z-index: 1
}
.btn__more:hover, .btn__entry:hover {
    opacity: .6;
    cursor: pointer
}
.btn__more:hover::before, .btn__entry:hover::before {
    width: 0
}
.fx {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    gap: 80px;
    justify-content: center
}
.btnArrow {
    display: inline-block;
    border: 1px solid #040D14;
    color: #040D14;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 12px 24px
}
.btnArrow::after {
    content: "";
    width: 51px;
    height: 15px;
    background: url(../img/i_arrow-bk.svg) no-repeat center center/cover;
    display: inline-block;
    margin-left: 24px
}
.btnArrow:hover {
    opacity: .6;
    color: #040D14
}
.kv {
    position: relative
}
.kv .wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between
}
.kv .wrap__left {
    width: 48%;
    position: relative;
    margin-top: 104px
}
.kv .wrap__right {
    width: 52%;
    position: relative
}
.kv .wrap__right .img01 {
    position: absolute;
    right: 0;
    width: 65%;
    top: 0;
    z-index: -1
}
.kv .wrap__right .catch {
    position: absolute;
    top: 30%;
    width: 80%;
    padding-left: 16px
}
.kv .wrap__right .img02 {
    position: absolute;
    bottom: -40px;
    width: 35vw;
    left: -180px;
    z-index: -1
}
.kv .entry {
    position: fixed;
    width: 13vw;
    height: 13vw;
    border-radius: 240px;
    background: #B18BE5;
    right: 2.1vw;
    bottom: 2%;
    font-family: "Karla", serif;
    font-size: 3.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/btn_bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: .3s;
    z-index: 100
}
.kv .entry a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    text-align-last: center;
    justify-content: center
}
.kv .entry a span {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center
}
.kv .entry:hover {
    opacity: .6
}
.kv .scrollTxt span {
    font-size: 1.4rem;
    font-family: "Karla", serif;
    display: inline-block;
    position: absolute;
    right: 32px;
    top: 50%;
    z-index: 100;
    padding: 0 0 80px;
    overflow: hidden;
    line-height: 1;
    text-decoration: none;
    writing-mode: vertical-lr;
    color: #674498;
    letter-spacing: 0.08em
}
.kv .scrollTxt span::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 6px;
    width: 1px;
    height: 72px;
    background: #674498;
    animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite
}
@keyframes sdl {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0
    }
    35% {
        transform: scale(1, 1);
        transform-origin: 0 0
    }
    35.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%
    }
    70%, 100% {
        transform: scale(1, 0);
        transform-origin: 0 100%
    }
}
.remodal-wrapper {
    padding: 40px 10px 0 !important
}
.remodal-wrapper .remodal {
    min-width: 1000px !important;
    text-align: center;
    padding: 0
}
.remodal-wrapper .remodal .remodal-cancel {
    background: #674498;
    color: #fff;
    font-family: "Karla", serif;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 40px;
    transition: opacity 0.3s ease
}
.remodal-wrapper .remodal .remodal-cancel:hover {
    opacity: .6
}
.remodal-wrapper .remodal .remodal-close {
    color: #fff !important;
    top: -42px !important;
    left: 95% !important
}
.remodal-wrapper .remodal .remodal-close::before {
    display: block;
    content: " ";
    position: absolute;
    top: 10px;
    left: 24px;
    width: 1px;
    height: 32px;
    background: #fff;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
    webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
.remodal-wrapper .remodal .remodal-close::after {
    display: block;
    content: " ";
    position: absolute;
    top: 10px;
    left: 24px;
    width: 1px;
    height: 32px;
    background: #fff;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
    webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}
.remodal-wrapper .remodal .btn {
    cursor: pointer
}
.message {
    /*max-width: calc(840px + 10vw);*/
    width: 100%;
    padding: 0 ;
    margin: auto;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.6;
    padding: 50px 0 0;
    text-align: center
}


.message_left{
    width: 60%;
}

.message_right{
    width: 40%;
}

.message .ttl {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 2px
}
.message .ttl .bg_b {
    color: #fff;
    background: #040D14;
    font-size: 3.2rem;
    padding: 1px 8px 3px;
    margin: 0 4px
}
.message .ttl .pro {
    color: #674498;
    font-size: 3.2rem;
    position: relative
}
.message .ttl .pro::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background-image: url("../img/underline.svg");
    background-size: cover;
    background-repeat: no-repeat
}
.message .catch {
    font-size: 2.4rem;
    font-weight: 600;
    color: #674498;
    display: inline-block;
    position: relative
}
.message .catch span {
    display: inline-block;
    position: relative
}
.message .catch span::after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(103, 68, 152, 0.24)
}
.message .catch span:not(:last-child) {
    margin-right: 20px
}
.message .img01 {
    position: absolute;
    top: 13%;
    right: -16%;
    z-index: -1;
    width: calc(290 / 1920* 100vw)
}
.message .img02 {
    position: absolute;
    bottom: -13%;
    left: -20%;
    z-index: 1;
    width: calc(344 / 1920* 100vw)
}



/*=================================
  TOPイメージ
=================================*/
.top_message{
    display: flex;
    padding:0 0 50px 0;
}

.top_message_kv{
    width:100%;
    padding:0 0 50px 0;
    text-align:centar;
}

.top_message_left{
    z-index: 1;
}

.top_message_right{
  height:300px;
  background-color:#fff;
  margin:80px 0 0 -80px;
  padding:0 30px 500px 100px;
  z-index: 2;
}

.top_message_right_txt{
  width:450px;
  text-align:left;
  font-size:80%;
}

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

.top_message_left{
    z-index: 1;
}

.top_message_right{
  height:300px;
  background-color:#fff;
  margin:40px 0 0 -40px;
  padding:0 30px 500px 100px;
  z-index: 2;
}

.top_message_right img{
  width:80%;
}

.top_message_right_txt{
  width:450px;
  text-align:left;
  font-size:90%;
}

}

@media screen and (max-width: 834px) {
  .top_message {
    display: block;
  }
  
  .top_message_left{
    z-index: none;
  }

.top_message_right{
  height:300px;
  background-color:#fff;
  margin:40px 0;
  padding:0;
  z-index: none;
} 

.top_message_right img{
  width:60%;
}

.top_message_right_txt{
  width:100%;
  text-align:left;
}
}

/*=================================
  clearfix
=================================*/
.u-clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

/*=================================
  arrow
=================================*/
.u-textLink--arrow {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-bottom: 7.5px;
  border-radius: 9999px;
  background-color: #130e1c;
  margin-left: 9px;
}

.u-textLink--arrow2 {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-bottom: 7.5px;
  border-radius: 9999px;
  background-color: #7a66ae;
  margin-left: 9px;
}

@media screen and (min-width: 0) and (max-width: 768px) {
  .u-textLink--arrow {
    width: 20px;
  }
}
.u-textLink--arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 14px;
  height: 1px;
  border-radius: 9999px;
  background-color: #130e1c;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  -webkit-transform-origin: calc(100% - 0.5px) 50%;
          transform-origin: calc(100% - 0.5px) 50%;
}
.u-textLink--arrow2::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 14px;
  height: 1px;
  border-radius: 9999px;
  background-color: #130e1c;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  -webkit-transform-origin: calc(100% - 0.5px) 50%;
          transform-origin: calc(100% - 0.5px) 50%;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .u-textLink--arrow::before {
    width: 10px;
  }
}
.u-textLink--arrow-op {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-bottom: 7.5px;
  border-radius: 9999px;
  background-color: #130e1c;
  margin-right: 9px;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .u-textLink--arrow-op {
    width: 20px;
  }
}
.u-textLink--arrow-op::before {
  content: "";
  position: absolute;
  top: calc(50% + 1px);
  left: 0;
  width: 14px;
  height: 1px;
  border-radius: 9999px;
  background-color: #000000;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transform-origin: 2px 50%;
          transform-origin: 2px 50%;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .u-textLink--arrow-op::before {
    width: 10px;
  }
}

.link_btn{
    margin:50px 0 0 0;
    text-align: left;
}

.link_btn a {
  text-decoration: none;
}

.link_btn a:hover{
  color:#ccc;
}



/*=================================
  Sustainability News
=================================*/

.sustainan_news{
  padding: 50px 0 150px 0;
}

.sustainan_news h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#1e2341;
}

.linklist_btn{
    margin:50px 0 0 0;
    text-align: right;
}

.linklist_btn a {
  text-decoration: none;
}

.linklist_btn a:hover{
  color:#ccc;
}


@media screen and (min-width: 0) and (max-width: 768px) {
.sustainan_news h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
}
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
	margin-left:20px;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 2px;		/*角を丸くする指定*/
	margin:0 0 20px 0;
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 16rem;			/*幅。8文字分。*/
	transform: scale(0.85);	/*85%のサイズに縮小*/
	border: 1px solid #777;	/*枠線の幅、線種、色*/
	background-color:#53409;
	
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-sustaina {
	border-color: transparent;	/*枠線を透明に*/
	background: #53409a;		/*背景色*/
	color: #fff;				/*文字色*/
	margin-right:10px;
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
	border-color: transparent;				/*枠線を透明に*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}


.new dd a{
	  text-decoration: none;
	  color:#7a66ad;
}

.new dd a:hover{
  color:#ccc;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*=================================
  Top Commitment
=================================*/

.top_commitment{
  padding: 50px;
}
.top_commitment h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#1e2341;
    margin:0 0 40px 0;
}

.top_commitment_area{
  margin:0 0 50px 0;
  padding:50px;
  background-color:#f6f4f9;
}

.top_comment{
    display: flex;
    padding:0 0 20px 0;
}
.top_comment_img{
  width:40%;
  text-align:left;
}

.top_comment_txt{
  width:60%;
  padding:0 0 0 60px;
}

.top_comment_txt h3{
  font-size:160%;
  margin:0 0 20px 0;
}

.top_comment_text_r{
  text-align:right;
  margin:20px 0 0 0;
}

@media screen and (max-width: 834px) {
.top_commitment{
  padding: 10px;
}

.top_commitment h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3.5rem;
    font-weight: 400;
    color:#1e2341;
    padding:10px 0;
}

  .top_comment {
    display: block;
  }
  
  .top_commitment_area{
    padding:20px;
  }
  
.top_comment_img{
  width:100%;
  text-align:center;
}

.top_comment_txt{
  width:100%;
  padding:0;
}

.top_comment_txt h3{
  font-size:120%;
  margin:20px 0 20px 0;
}

.top_comment_text_r{
  text-align:right;
  margin:20px 0 0 0;
}
}


@media screen and (min-width: 0) and (max-width: 768px) {
.sustainan_news h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
}
}



/*=================================
  ｂ-ｅｘがめざす4つのbe
=================================*/

.bex_be{
  padding: 50px;
}
.bex_be h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#583985;
    margin:0 0 40px 0;
}

.bex_be_area{
    display: flex;
    padding:0 0 20px 0;
}

.bex_be_left{
    margin-left:20px;
}

.bex_be_right{
    margin-left:20px;
}


.bex_be_btn{
    margin:50px 0;
    text-align: left;
    font-weight:bold;
}

.bex_be_btn a {
  text-decoration: none;
}

.bex_be a:hover{
  color:#ccc;
}

@media screen and (max-width: 834px) {
.bex_be{
  padding: 20px;
}
.bex_be_area{
    display: block;
}

.bex_be h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#583985;
    margin:0 0 40px 0;
    text-align:center;
}

.bex_be_left{
    margin-left:0;
    text-align:center;
}

.bex_be_right{
    margin-left:0;
}
}

/*=================================
  Human Rights Policy
=================================*/

.humanrights{
  margin:0 0 60px 0;
  padding: 50px 0 0 0;
  background-color:#e9eaec;
}
.humanrights h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#1e2341;
    margin:0 0 40px 0;
}
.humanrights_img{
   text-align:left;
}

.humanrights_area{
    display: flex;
    align-items: flex-end;
    padding:0;
}
.humanrights_left{
    width:40%;
    margin:0 0 60px 100px;
}

.humanrights_right{
    width:60%;
    margin-left:30px;
    padding:0;
    text-align:right;
}
.humanrights_right img{
}

.humanrights_btn{
    margin:50px 0;
    text-align: left;
    font-weight:bold;
}

.humanrights_btn a {
    text-decoration: none;
    color:#826fb1;
}

.humanrights_btn a:hover {
    color:#ccc;
}


@media screen and (max-width: 834px) {
.humanrights{
  padding: 20px 0 0 0;
}
.humanrights_area{
    display: block;
}

.humanrights h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#583985;
    margin:0 0 40px 0;
    text-align:center;
}
.humanrights_img{
   text-align:center;
}
.humanrights_left{
    width:100%;
    margin:0 0 60px 0;
    padding:20px;

}
.humanrights_left p{
   text-align:left;
}
.humanrights_right{
    width:100%;
    margin-left:0;
    padding:0;
    vertical-align: bottom;
}
}


/*=================================
  SDGs report
=================================*/
.sdgs_report{
  padding: 50px 0 150px 0;
}

.sdgs_report h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#1e2341;
}

.sdgs_report_area {
  display: flex;
  ustify-content:
  flex-start; 
  justify-content: space-around;
  margin:40px 0 0 0;
}

.sdgs_box {
  text-align: center;
  width: 30%;
}
.sdgs_box p {
  text-align: left;
}
.sdgs_report_day, .sdgs_report_pdf {
  display: inline-block;
}

.sdgs_report_day {
  margin-right: auto;
  font-weight:bold;
}

.sdgs_report_info{
  display: flex;
  font-weight:bold;
}
.sdgs_report_tit{
  text-align: left;

}

a[download] {
	padding: 7px 20px 7px 0;
	background: url(../img/ico_pdf.png) right center/15px auto no-repeat;
}

.sdgs_report_tit a {
  text-decoration: none;
  color:#664797;
}

.sdgs_report_tit a:hover{
  color:#ccc;
}


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

.sdgs_report_area {
    display: block;
}
.sdgs_box {
  margin:0 0 40px 0;
  text-align: center;
  width: 100%;
}
.sdgs_report_info{
  width:300px;
  margin:0 auto;
  padding:10px 0;
}
.sdgs_report_tit{
  width:300px;
  margin:0 auto;
  padding:0;
}
}

/*=================================
  b-exの人権方針
=================================*/

.top_human_img{
   margin:0;
   width:100%;
   text-align:center;
}

.top_bex_human{
    max-width: calc(1200px + 10vw);
    padding: 0;
    margin: 0 auto;
}

.top_bex_human_txt h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0;
}

.top_bex_human_area{
    max-width: calc(1000px + 10vw);
    padding: 0 50px;
    margin: 0 auto;
    padding:30px 0 0 0 ;
}

.top_bex_human_area p{
  line-height: 2;
  letter-spacing:0.05em;
}

.top_bex_human_txt{
    max-width: calc(1000px + 10vw);
    padding: 0;
    margin: 0 auto;
}

.top_bex_human_txt ul li{
  list-style-position: outside;
  list-style-type: disc;
  margin-left:20px;
}

.top_bex_human_txt h3{
   margin:60px 0 40px 0;
   padding:10px 15px;
   width:100%;
  font-size: 2rem;
   color:#fff;
   background-color:#1e2341;
   
}
.top_bex_human_txt p{
  line-height: 2;
  letter-spacing:0.05em;
}


@media screen and (max-width: 834px) {
.top_bex_human{
  padding: 10px;
}
}


@media screen and (min-width: 0) and (max-width: 768px) {
.top_bex_human h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: 400;
        padding: 0 30px;
}

.top_bex_human{
    padding: 0;
}

.top_bex_human_area{
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}

.top_bex_human_txt{
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}
}

/*=================================
  b-ex SDGs宣言
=================================*/
.top_sdgs {
    max-width: calc(1200px);
    width: 100%;
    padding: 0 ;
    margin: auto;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.6;
    padding: 50px 0 0 0;
    text-align: center
}
.top_sdgs_message{
    display: flex;
    padding:0 0 50px 0;
}

.top_sdgs_message_left{
  width:60%;
  margin:0;
  padding:0 10px 0 0;
  text-align:left;
}

.top_sdgs_message_left img{
  margin:0 0 40px 0;
}

.top_sdgs_message_left p{
  text-align:left;
}

.top_sdgs_message_right{
}



@media screen and (max-width: 834px) {
.top_sdgs {
    width: 100%;
    margin: 10px
    padding: 10px

}
.top_sdgs_message_left img{
  margin:0 0 40px 0;
}

.top_sdgs_message_left p{
  text-align:left;
}

  .top_sdgs_message{
    display: block;
  }
  
.top_sdgs_message_left{
  width:100%;
  margin:0;
  padding:20px;
}

.top_sdgs_message_left img{
  margin:0 0 40px 0;
  text-align:center;
}

.top_sdgs_message_left p{
  text-align:left;
}

.top_sdgs_message_right{
  margin:40px 0;
  text-align:center;
}
}

/*=================================
  SDGs menu
=================================*/

.bex_sdgs_menu{
  max-width: 1200px;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
}

.bex_sdgs_menu > * {
  flex: 1 1 300px;
}
.bex_sdgs_menu div{
    width: 50%;
    margin: 10px;
    padding: 0px;
}

@media screen and (max-width: 834px) {
  .bex_sdgs_menu{
    display: block;
  }
  
  .bex_sdgs_menu{
  width: 100%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  }

  .bex_sdgs_menu > * {
  flex: 1 1 160px;
  }
  .bex_sdgs_menu div{
    width: 100%;
    margin: 10px;
    padding: 0px;
  }
}

.materiality_pdf{
  max-width: 1200px;
  margin:0 auto;
   padding:40px 0;
   background-color:#f5f3f8;
   text-align:center;
}
.materiality_pdf_tit{
   margin:20px 0;
   font-size:120%;
   color:#7a66ad;
}

.materiality_pdf_tit a{
   color:#7a66ad;
   text-decoration: none;
}
.materiality_pdf_tit a:hover{
   color:#ccc;
   text-decoration: none;
}
.materiality_pdf_lastday{
   font-size:80%;
}


/*=================================
  b-exが目指す4つのbe
=================================*/

.bex_4be{
    max-width: calc(1200px);
    padding: 0;
    margin: 150px auto;
}

.bex_4be h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 5rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0;
    letter-spacing: 0.01em;
}
.bex_4be p{
    margin:0 0 20px 0;
    letter-spacing: 0.1em;
}
.bex_4be img{
    max-width:1200px;
    width:100%;
}

@media screen and (max-width: 834px) {
.bex_4be{
    max-width: calc(800px + 10vw);
    padding: 0;
    margin: 20px auto;
}
.bex_4be h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#1e2341;
    margin:60px 20px 20px 20px;
    letter-spacing: 0.1em;
}
.bex_4be p{
    margin:20px;
}

.bex_4be img{
    width:100%;
    padding:0 20px ;
}
}


/*=================================
  マテリアリティ　重要課題
=================================*/

.materiality{
    max-width: calc(1200px + 10vw);
    padding: 0;
    margin: 150px auto;
}

.materiality h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 5rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0;
    letter-spacing: 0.01em;
}

.materiality h2 span{
    font-family: sans-serif;
    font-size: 1.5rem;
    color:#1e2341;
    margin:40px 0 40px 20px;
}
.materiality p{
    margin:0 0 20px 0;
    letter-spacing: 0.1em;
}
.materiality img{
    max-width:1200px;
    width:100%;
}

/* 8つの目標　ボタン*/
.kind8 a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin:20px auto;
	width: 450px;
	height: 60px;
	color: #7a66ad;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}

.kind8 a:hover {
	color: #f2f2f2;
}

.kind8_btn a {
	background-color: #fff;
	border: 1px solid #7a66ad;
}

.kind8_btn a:hover {
	background-color: #f6f4f9;
	border: 1px solid #7a66ad;
	color: #7a66ad;
}

.kind8_btn a:hover::before {
	background-color: #7a66ad;
	color: #f2f2f2;
}

.kind8_btn a:hover::after {
	color: #f2f2f2;
}

.kind8_arrow {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 1px;
  border-radius: 9999px;
  background-color: #7a66ad;
}

.kind8_arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 20px;
  height: 1px;
  border-radius: 9999px;
  background-color: #7a66ad;
  transform: rotate(-30deg);
  transform-origin: calc(100% - 0.5px) 50%;
}

@media screen and (max-width: 834px) {
.kind8 a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin:40px auto;
	width: 300px;
	height: 60px;
	color: #7a66ad;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}
.kind8_arrow {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 1px;
  border-radius: 9999px;
  background-color: #7a66ad;
}
}

/* 8つの目標　ボタン　ここまで*/

.materiality_area{
    max-width:1200px;
    margin:60px auto;
}
.materiality_tit{
    width:100%;
    margin:0 0 30px 0;
}

.materiality_list{
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/** kind **/
.materiality_list_kind{
    width: 32%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #87c28a;
}

.materiality_list::after {
display: block;
content:"";
width: 32%;
}

.materiality_icon{
    text-align:center;
}

.materiality_icon img{
    width:30%;
    height:auto;
}

.materiality_seika_kind{
    color:#87c28a;
    text-align:left;
}
.materiality_seika_tit{
    font-size:130%;
    color:#333333;
    font-weight:bold;
    margin:0 0 20px 0;
}

.materiality_list_kind_list ul li{
    font-size:90%;
    list-style-position: inside;
    margin:10px 0 0 0;
    padding: 0 0 10px 20px;
    line-height: 1.3em;
    background: url(../img/disc_kind.png) left 0px top 5px no-repeat;
    background-size: 15px auto;
}
.materiality_list_kind_list p{
    font-size:80%;
    letter-spacing: 0.01em;
    text-indent: -2.0em;
    padding-left: 2.0em;
}


/** borderless **/
.materiality_list_borderless{
    width: 32%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #ec9eab;
}


.materiality_list_borderless::after {
display: block;
content:"";
width: 32%;
}

.materiality_icon{
    text-align:center;
}

.materiality_seika_borderless{
    color:#ec9eab;
    text-align:left;
}

.materiality_list_borderless_list ul li{
    font-size:90%;
    list-style-position: inside;
    margin:10px 0 0 0;
    padding: 0 0 10px 20px;
    line-height: 1.3em;
    background: url(../img/disc_borderless.png) left 0px top 5px no-repeat;
    background-size: 15px auto;
}
.materiality_list_borderless_list p{
    font-size:80%;
    letter-spacing: 0.01em;
    text-indent: -2.0em;
    padding-left: 2.0em;
}
.materiality_list_borderless_list ul li sup{
    line-height: 3px;
}

/** healthy **/
.materiality_list_healthy{
    width: 32%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #76afda;
}

.materiality_list_healthy::after {
display: block;
content:"";
width: 32%;
}

.materiality_seika_healthy{
    color:#76afda;
    text-align:left;
}
.materiality_list_healthy_list ul li{
    font-size:90%;
    list-style-position: inside;
    margin:10px 0 0 0;
    padding: 0 0 10px 20px;
    line-height: 1.3em;
    background: url(../img/disc_healthy.png) left 0px top 5px no-repeat;
    background-size: 15px auto;
}
.materiality_list_healthy_list p{
    font-size:80%;
    letter-spacing: 0.01em;
    text-indent: -2.0em;
    padding-left: 2.0em;
}


/** smart **/
.materiality_list_smart{
    width: 32%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #e8a666;
}

.materiality_list_smart::after {
display: block;
content:"";
width: 32%;
}

.materiality_seika_smart{
    color:#e8a666;
    text-align:left;
}
.materiality_list_smart_list ul li{
    font-size:90%;
    list-style-position: inside;
    margin:10px 0 0 0;
    padding: 0 0 10px 20px;
    line-height: 1.3em;
    background: url(../img/disc_smart.png) left 0px top 5px no-repeat;
    background-size: 15px auto;
}
.materiality_list_smart_list p{
    font-size:80%;
    letter-spacing: 0.01em;
    text-indent: -2.0em;
    padding-left: 2.0em;
}





@media screen and (max-width: 834px) {
.materiality{
    width: 100%;
    padding: 0;
    margin: 10px auto;
}

.materiality_area{
    width: 100%;
    margin:20px auto;
    padding:0 20px;
}

.materiality h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0 20px 0;
    letter-spacing: 0.01em;
}

.materiality h2 span{
    font-family: sans-serif;
    font-size: 1.5rem;
    color:#1e2341;
    margin:40px 0 40px 20px;
}

.materiality_tit{
    width:100%;
    margin:0 ;
}

.materiality_list_kind{
    display: block;
}
.materiality_list_kind{
    padding: 20px;
    border: 1px solid #87c28a;
}


.materiality_icon img{
    width:35%;
    height:auto;
}


.materiality_img {
    width: 100%; 
    height: auto;
    margin:10px 0 40px 0;
}

.materiality_list{
    display: block;
}

.materiality_list_kind{
    width: 100%; 
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #87c28a;
}

.materiality_list_borderless{
    width: 100%;
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #ec9eab;
}

.materiality_list_healthy{
    width: 100%; 
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #76afda;
}

.materiality_list_smart{
    width: 100%;
    height: auto;
    margin:10px 0 40px 0;
    padding: 20px;
    border: 1px solid #e8a666;
}

}

/*=================================
  マテリアリティ策定の経緯
=================================*/

.materiality_back{
    max-width: calc(1200px);
    padding: 0;
    margin: 150px auto;
}

.materiality_back h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 5rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0;
    letter-spacing: 0.01em;
}
.materiality_back p{
    margin:0 0 20px 0;
    letter-spacing: 0.1em;
}
.materiality_back img{
    max-width:1200px;
    width:100%;
}

.materiality_back_list{
    display: flex;
    justify-content:space-between;
}

.materiality_back_point{
    width: 30%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:40px 0;
    padding:40px 40px 10px 40px;
    background-color:#f5f3f8;
}

.materiality_back_tit{
   margin:-63px 0 20px 0;
   color:#553984;
   font-weihgt:bold;
   font-size:160%;
   text-align:center;
   
}
.materiality_back_txt{
   paddign:0;
   font-size:90%;
}

.materiality_back_pdf{
   margin:20px 0 30px 0;
   text-align:center;
}

.materiality_back_pdf a{
   color:#7a66ad;
   text-decoration: none;
}
.materiality_back_pdf a:hover{
   color:#ccc;
   text-decoration: none;
}

@media screen and (max-width: 834px) {
.materiality_back{
    max-width: calc(800px + 10vw);
    padding: 0;
    margin: 20px auto;
}
.materiality_back h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing:0.001em;
    color:#1e2341;
    margin:60px 20px 20px 20px;
}


.materiality_back p{
    margin:20px;
}

.materiality_back img{
    width:100%;
    padding:0 20px ;
}

.materiality_back_list{
    display: block;
  }
  
.materiality_back_point{
    width: 100%; 
    margin:40px 0 40px 0;
  }
  
.materiality_pdf{
    padding:30px;
}

.materiality_back_pdf{
   margin:20px 0 30px 0;
   text-align:center;
   font-size:120%;
}

.materiality_back_pdf a{
   color:#7a66ad;
   text-decoration: none;
}
.materiality_back_pdf a:hover{
   color:#ccc;
   text-decoration: none;
}

.materiality_back_pdf span{
   font-size:70%;
}
}

/*=================================
  プロジェクト
=================================*/

.project{
    max-width: calc(1200px);
    padding: 0;
    margin: 150px auto;
}

.project h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 5rem;
    font-weight: 400;
    color:#1e2341;
    margin:40px 0;
    letter-spacing: 0.01em;
}
.project p{
    margin:0 0 20px 0;
    letter-spacing: 0.1em;
}
.project img{
    max-width:1200px;
    width:100%;
}


.project_img{
    display: flex;
    justify-content:space-between;
}

.project_list{
    width: 50%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:40px 0;
    padding:0;
}

@media screen and (max-width: 834px) {
.project{
    max-width: calc(800px + 10vw);
    padding: 0;
    margin: 20px auto;
}
.project h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#1e2341;
    margin:60px 20px 20px 20px;
}

.project p{
    margin:20px 20px 0 20px;
}
.project_img{
    display: block;
    margin:20px 20px 0 20px;
  }
  
.project_list{
    width: 100%; 
    padding:0;
}
}

/*=================================
  SDGs方針に沿ったアクションのご紹介
=================================*/
.action{
   max-width: 1200px;
   margin:0 auto;
   padding:40px;
   background-color:#f5f3f8;
   text-align:left;
}


.action h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 4rem;
    font-weight: bold;
    color:#1e2341;
    margin:40px 0;
    letter-spacing: 0.01em;
}
.action p{
    margin:0 0 20px 0;
    letter-spacing: 0.1em;
}
.action img{
    max-width:1200px;
    width:100%;
}

.action_img{
    display: flex;
    justify-content:space-between;
}

.action_list{
    width: 30%; /* 画像が3つ並ぶように設定 */
    height: auto;
    margin:40px 0;
    padding:20px 0;
    color:#8977b5;
    font-weight:bold;
}
.action_list img{
    padding:10px 0 ;
}

.action_list a{
   color:#7a66ad;
   text-decoration: none;
}
.action_list a:hover{
   color:#ccc;
   text-decoration: none;
}

@media screen and (max-width: 834px) {
.action{
    max-width: calc(800px + 10vw);
    padding: 0;
    margin: 20px auto;
}
.action h2{
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", 
      "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3rem;
    font-weight: 400;
    color:#1e2341;
    margin:60px 20px 20px 20px;
    padding:40px 0 0 0;
}

.action_img{
    display: block;
    margin:20px 20px 0 20px;
  }
  
.action_list{
    width: 100%; 
    padding:0 0 40px 0;
    color:#8977b5;
    font-weight:bold;
}
}



/*=================================
  footer link
=================================*/
.footer_link{
  padding: 50px 0 150px 0;
}
.footer_link_area {
  display: flex;
  ustify-content:
  flex-start; 
  justify-content: space-around;
  margin:40px 0 0 0;
}
.footer_link_box {
  text-align: center;
  width: 30%;
}

.footer_link_tit{
  text-align: left;
}

.footer_link_txt{
  text-align: left;
}

.footer_link_tit{
  color:#674496;
  font-weight:bold;
  margin-left:20px;
}
.footer_link_tit span{
  font-size:70%;
  color:#ccc;
  padding:0 0 0 20px;
}
.footer_link_txt{
  color:#a0a0a0;
  font-weight:bold;
  font-size:75%;
  margin-left:20px;
}


@media screen and (max-width: 834px) {
.footer_link{
  padding: 0 0 20px 0;
}

.sdgs_report_area {
    display: block;
}
.sdgs_box {
  margin:0 0 40px 0;
  text-align: center;
  width: 100%;
}
.sdgs_report_info{
  width:300px;
  margin:0 auto;
  padding:10px 0;
}
.sdgs_report_tit{
  width:300px;
  margin:0 auto;
  padding:0;
  text-align:center;
}
.footer_link_tit,.footer_link_txt{
  text-align:center;
  margin:10px 0;
}
.footer_link_tit span{
  font-size:80%;
  color:#ccc;
}

.footer_link_area{
    display: block;
}

.footer_link_box {
  text-align: center;
  width: 100%;
  margin:0 0 0 0;
}
}

/*=================================
  footer nav
=================================*/
.footer_nav{
  display: flex;
}
.footer_nav_logo{
  margin:20px 5% 20px 20px;
  width:120px;
}
.footer_nav_link{
  white-space: nowrap;
}
.footer_nav ul{
  margin:0;
}
.footer_nav ul li{
  display: inline-block;
  list-style: none;
  text-align:left;
  margin:30px 0 0 0;
  padding:0 15px;
  font-size:90%;
}
.footer_nav ul li a {
  text-decoration: none;
  color:#a6a6a6;
}
.footer_nav ul li a:hover {
  text-decoration: none;
  color:#ededed;
}

.footer_sns{
     width:250px;
     margin:0 20px 0 0;
     margin-left: auto;
}

.footer_sns>div:last-of-type{
    margin-left: auto;
}

.footer_sns ul li{
  width:20px;
  display: inline-block;
  list-style: none;
  text-align:right;
  margin:20px 10px;
  padding:0 ;
}


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

  .footer_nav_logo{
    display: none;
  }
  .footer_nav_link{
    display: none;
  }
  .footer_sns{
     width:300px;
     margin:0 auto 30px auto;
  }
  .footer_nav ul{
  margin:0;
  }

}


.top_bg {
    position: relative
}
.top_bg #about {
    text-align: center;
    padding: 64px 0;
    position: relative;
    background: url(../img/bg_about.png);
    z-index: -1
}
.top_bg #about .inner {
    margin-top: -100px
}
.top_bg #about h1 {
    font-size: 4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 32px
}
.top_bg #about h1 .sub {
    font-family: "Karla", serif;
    font-size: 1.8rem;
    background: #040D14;
    color: #fff;
    margin: 0 auto;
    padding: 2px 8px
}
.top_bg #about .subTtl {
    font-weight: 600;
    line-height: 2.6
}
.top_bg #about .x2 {
    gap: 0
}
.top_bg #about .x2 .box {
    width: 50%;
    background: #fff;
    padding: 20px 36px 36px
}
.top_bg #about .x2 .box .ttl {
    margin-bottom: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}
.top_bg #about .x2 .box .ttl span {
    font-family: "Hurricane", serif;
    font-weight: 400;
    color: #674498;
    font-size: 7.2rem;
    line-height: 0.7
}
.top_bg #about .x2 .box .ttl img {
    width: 208px;
    margin: 0 auto
}
.top_bg #about .x2 .box .ttl h2 {
    font-size: 2.4rem;
    font-weight: 600
}
.top_bg #about .x2 .box p {
    text-align: left !important
}
.top_bg #about .x2 .box:nth-child(1) {
    border-bottom: solid 4px rgba(0, 0, 0, 0.08)
}
.top_bg #about .x2 .box:nth-child(2) {
    border-left: solid 4px rgba(0, 0, 0, 0.08);
    border-bottom: solid 4px rgba(0, 0, 0, 0.08)
}
.top_bg #about .x2 .box:nth-child(4) {
    border-left: solid 4px rgba(0, 0, 0, 0.08)
}
.top_bg .img {
    position: relative;
    margin: 0 3vw 0
}
.top_bg .img span {
    position: absolute;
    font-family: "Hurricane", serif;
    font-size: 12.5vw;
    top: -50%;
    left: 13%;
    color: #fff;
    transform: rotate(-8deg);
    mix-blend-mode: color-burn;
    z-index: 1
}
.top_bg .img span::before {
    content: "schedule";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Hurricane", serif;
    font-size: 12.5vw;
    color: #674498;
    z-index: 1
}
.top_bg #flow {
    text-align: center;
    margin: 0 auto;
    padding: 64px 0 100px;
    position: relative;
    background: url(../img/bg_flow.png)
}
.top_bg #flow h1 {
    font-size: 4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 32px
}
.top_bg #flow h1 .sub {
    font-family: "Karla", serif;
    font-size: 1.8rem;
    background: #040D14;
    color: #fff;
    margin: 0 auto;
    padding: 2px 8px
}
.top_bg #flow .subTtl {
    font-weight: 600;
    line-height: 2.6
}
.top_bg #flow .schedule {
    background: #fff;
    padding: 64px 0
}
.top_bg #flow .schedule .box {
    text-align: left
}
.top_bg #flow .schedule .box .time {
    font-family: "Hurricane", serif;
    font-size: 4rem;
    color: #674498;
    margin-bottom: 16px
}
.top_bg #flow .schedule .box .time span {
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #040D14;
    background: rgba(103, 68, 152, 0.24);
    padding: 4px 12px;
    margin-left: 24px
}
.top_bg #flow .schedule_01, .top_bg #flow .schedule_02 {
    position: relative;
    width: 50%;
    padding-left: 2vw
}
.top_bg #flow .schedule_01 .box:not(:last-child), .top_bg #flow .schedule_02 .box:not(:last-child) {
    margin-bottom: 48px
}
.top_bg #flow .schedule_01 {
    margin-left: 190px
}
.top_bg #flow .schedule_01::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    width: 8px;
    height: 95%;
    background-image: url(../img/schedule_01.svg);
    background-size: cover;
    background-repeat: no-repeat
}
.top_bg #flow .schedule_02 {
    margin-right: 73px
}
.top_bg #flow .schedule_02::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    width: 2px;
    height: 95%;
    background-image: url(../img/schedule_02.svg);
    background-size: cover;
    background-repeat: no-repeat
}
#voice {
    text-align: center;
    background: #674498;
    color: #fff;
    padding: 80px 0 120px;
    position: relative;
    z-index: 10
}
#voice .en {
    position: absolute;
    font-family: "Hurricane", serif;
    font-size: 10vw;
    top: -6%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    mix-blend-mode: color-burn;
    line-height: 1
}
#voice .en::before {
    content: "Voice";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Hurricane", serif;
    font-size: 10vw;
    color: rgba(103, 68, 152, 0.4)
}
#voice h1 {
    font-size: 4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 32px
}
#voice h1 .sub {
    font-family: "Karla", serif;
    font-size: 1.8rem;
    background: #fff;
    color: #040D14;
    margin: 0 auto;
    padding: 2px 8px
}
#voice .subTtl {
    font-weight: 600;
    line-height: 2.6
}
#voice .x3 {
    text-align: left;
    margin: 0 auto;
    gap: 80px;
    max-width: 1360px
}
#voice .x3 .box {
    width: calc((100% - 160px) / 3)
}
#voice .x3 .box a {
    color: #fff;
    text-decoration: none;
    transition-duration: .3s;
    display: block
}
#voice .x3 .box a:hover {
    opacity: .6
}
#voice .x3 .box a .voice_img {
    margin-bottom: 16px
}
#voice .x3 .box .name {
    font-size: 3.2rem;
    font-family: "Karla", serif;
    font-weight: bold;
    margin: 0;
    line-height: 0.8;
    position: relative;
    display: inline-block;
    margin-bottom: 24px
}
#voice .x3 .box .name::after {
    content: "";
    position: absolute;
    bottom: -27px;
    left: -10%;
    width: 100px;
    height: 22px;
    background-image: url(../img/voice_underline.svg);
    background-size: cover;
    background-repeat: no-repeat
}
#voice .x3 .box .name span {
    font-size: 1.8rem;
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-weight: 600
}
#voice .x3 .box p {
    font-size: 2rem;
    font-weight: 600
}
#voice .x3 .box .btn {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    font-family: "Karla", serif;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}
#voice .x3 .box .btn::after {
    content: "";
    width: 51px;
    height: 15px;
    background: url(../img/i_arrow.svg) no-repeat center center/cover;
    display: block
}
#voice .x3 .box .btn:hover {
    opacity: .6
}
.voice_remodal {
    padding: 0 !important
}
.voice_remodal .voiceKv {
    position: relative
}
.voice_remodal .voiceKv .imgArea {
    position: relative
}
.voice_remodal .voiceKv .imgArea img {
    width: 100%
}
.voice_remodal .voiceKv .catch {
    position: absolute;
    top: 30%;
    left: 10%;
    background: #fff;
    padding: 24px;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: left
}
.voice_remodal .voiceKv .catch .name {
    font-size: 3.2rem;
    font-family: "Karla", serif;
    font-weight: 600;
    margin-bottom: 0
}
.voice_remodal .voiceKv .catch .name span {
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 1.8rem
}
.voice_remodal .voiceKv .catch .en {
    position: absolute;
    font-family: "Hurricane", serif;
    color: #674498;
    font-size: 5.6rem;
    transform: rotate(-8deg);
    font-weight: normal;
    bottom: -4vh;
    right: 1vw
}
.voice_remodal .text {
    padding: 40px;
    text-align: left
}
.voice_remodal .text .ttl {
    font-size: 2.4rem;
    font-weight: 600;
    color: #674498;
    margin-bottom: 12px
}
#environment {
    padding: 140px 0 160px;
    position: relative;
    overflow: hidden
}
#environment_img {
    width: 100%;
    text-align: center
}
#environment .ttl {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    margin-top: 56px
}
#environment .ttl h1 {
    font-size: 4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 32px
}
#environment .ttl h1 .sub {
    font-family: "Karla", serif;
    font-size: 1.8rem;
    background: #040D14;
    color: #fff;
    display: inline-block !important;
    padding: 2px 8px;
    width: 142px
}
#environment .ttl .subTtl {
    font-weight: 600;
    line-height: 2.6
}
#environment .x3 {
    margin-top: 64px
}
#environment .x3 .box {
    text-align: center
}
#environment .x3 .box p {
    font-size: 2.4rem;
    font-weight: 600;
    color: #674498;
    display: inline-block !important;
    padding: 0 20px;
    background: rgba(103, 68, 152, 0.24)
}
#environment .x3 .box ul {
    text-align: left !important
}
#environment .x3 .box ul li {
    list-style-type: disc;
    list-style-position: inside;
    font-size: 2rem;
    font-weight: 600
}
#environment .x3 .box ul li span {
    font-size: 1.4rem
}
#environment .x3 .box ul li:not(:last-child) {
    margin-bottom: 16px
}
#environment::before {
    content: "";
    position: absolute;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1300px + 10vw);
    height: 160px;
    background-image: url(../img/environment_bg_01.png);
    background-size: cover;
    background-repeat: no-repeat
}
#environment::after {
    content: "";
    position: absolute;
    bottom: 7vh;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1300px + 10vw);
    height: 160px;
    background-image: url(../img/environment_bg_02.png);
    background-size: cover;
    background-repeat: no-repeat
}
#information {
    position: relative;
    padding: 80px 0;
    background: url("../img/bg_jobinfo.png");
    background-position: bottom;
    z-index: 1
}
#information .bg_information {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%
}
#information .bg_information img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
#information .en {
    position: absolute;
    font-family: "Hurricane", serif;
    font-size: 8vw;
    top: -4%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    color: #C2B4D6;
    mix-blend-mode: color-burn
}
#information .en::before {
    content: "Job Information";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Hurricane", serif;
    font-size: 8vw
}
#information h1 {
    display: flex;
    justify-content: center;
    margin-bottom: 32px
}
#information h1 .main {
    font-size: 4rem;
    font-weight: 600;
    background: #fff;
    padding: 8px;
    line-height: 1
}
#information::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    content: "";
    width: 100%;
    height: 50vh;
    background: #674498;
    display: inline-block
}
.table__basic {
    width: 100%;
    background: #fff;
    padding: 60px
}
.table__basic.size__s dt, .table__basic.size__s dd {
    padding: 12px 16px
}
.table__basic:not(:last-child) {
    margin-bottom: 64px
}
.table__basic>dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.table__basic>dl>dt, .table__basic>dl>dd {
    padding: 20px 30px;
    border-bottom: 1px solid #D9D9D9
}
.table__basic>dl>dt {
    width: 25%;
    border-bottom-color: #674498;
    font-weight: 600
}
.table__basic>dl>dd {
    width: 75%
}
.table__basic>dl>dd span {
    font-weight: 600
}
.table__basic>dl>dd .row:not(:last-of-type) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #CCC
}
.sp {
    display: none
}
.thanksPage.cont__box {
    padding: 160px 0;
    text-align: center
}
.thanksPage.cont__box h1 {
    font-size: 4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px
}
.thanksPage.cont__box h1 .sub {
    font-family: "Karla", serif;
    font-size: 1.8rem;
    background: #040D14;
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    width: 142px
}
@media screen and (max-width: 1366px) {
    .kv .entry {
        width: 17vw;
        height: 17vw
    }
    .remodal-wrapper .remodal {
        min-width: 80% !important
    }
    .remodal-wrapper .remodal .remodal-close {
        left: 95% !important
    }
    .voice_remodal .voiceKv {
        padding: 0
    }
    .voice_remodal .text {
        padding: 24px
    }
    .voice_remodal .text .ttl {
        font-size: 2rem
    }
    .message .img01 {
        top: 5%;
        right: 0
    }
    .message .img02 {
        bottom: -10%;
        left: 0
    }
    #flow .schedule_01 {
        margin-left: 120px !important
    }
    #voice .en {
        top: -4%
    }
    #voice .x3 {
        max-width: 90vw;
        padding: 0;
        margin: 0 auto
    }
    #environment {
        padding-top: 80px
    }
    #environment .ttl {
        margin-top: 40px;
        display: block;
        text-align: center
    }
    #environment .ttl .sub {
        margin: 0 auto
    }
    #environment::before, #environment::after {
        display: none
    }
    #information .en {
        top: -2%
    }
}
@media screen and (max-width: 834px) {
    p:not(:last-child), ul:not(:last-child), ol:not(:last-child), figure:not(:last-child), table:not(:last-child) {
        margin-bottom: 24px
    }
    img {
        height: auto
    }
    .inner, .inner__l, .inner__s {
        max-width: 90vw;
        padding: 0;
        margin: 0 auto
    }
    .mb__m {
        margin-bottom: 16px !important
    }
    .mt__s {
        margin-top: 16px
    }
    .btn__more, .btn__entry {
        padding: 12px 24px;
        margin: auto;
        justify-content: center
    }
    .btn__more.wt, .btn__entry.wt {
        color: #fff;
        background: #fff
    }
    .btn__more.wt::after, .btn__entry.wt::after {
        background-image: url("../img/i_arrow-wt.svg")
    }
    .kv {
        padding: 30px 2.1vw 100px
    }
    .kv .wrap__left {
        margin-top: 0
    }
    .kv .wrap__right .catch {
        width: 80%;
        padding-left: 16px
    }
    .message {

    }
    .message .catch span {
        margin-right: 0 !important
    }
    .message .img01 {
        width: 25%;
        top: 0;
        right: -5%
    }
    .message .img02 {
        bottom: -15%;
        left: -5%;
        width: 30%
    }
    #flow .schedule {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        gap: 40px;
        justify-content: center
    }
    #flow .schedule_01 {
        width: 40%;
        margin-left: 44px !important;
        padding-left: 4vw !important
    }
    #flow .schedule_02 {
        width: 40%;
        margin-right: 73px;
        padding-left: 4vw !important
    }
    #voice {
        padding: 40px 0
    }
    #voice .en {
        top: -7%;
        font-size: 15vw
    }
    #voice .en::before {
        font-size: 15vw
    }
    #voice .subTtl {
        max-width: 90vw;
        margin: 0 auto 32px
    }
    #voice .x3 {
        max-width: 90vw;
        padding: 0;
        margin: 0 auto
    }
    .voice_remodal .voiceKv {
        padding: 0
    }
    .voice_remodal .catch {
        position: static !important;
        margin: 0;
        font-size: 2rem !important
    }
    .voice_remodal .catch .name {
        font-size: 2.8rem
    }
    .voice_remodal .catch .name span {
        font-size: 1.6rem
    }
    .voice_remodal .catch .en {
        bottom: 0 !important;
        right: 22px !important;
        font-size: 4.2rem !important
    }
    .voice_remodal .text {
        padding: 24px
    }
    .voice_remodal .text .ttl {
        font-size: 2rem
    }
    #information .en {
        z-index: -1
    }
    .pc {
        display: none
    }
    .sp {
        display: block
    }
    .pageTtl {
        height: 160px;
        background: none;
        margin-top: 60px;
        padding: 0
    }
    .pageTtl::before {
        display: none
    }
    .pageTtl__txt {
        padding-top: 0;
        left: 0;
        right: 0;
        gap: 40px;
        align-items: center
    }
    .pageTtl__txt-ttl {
        gap: 0;
        align-items: center
    }
    .pageTtl__txt-ttl .en {
        font-size: 4rem;
        color: #fff
    }
    .pageTtl__txt-ttl .jp svg * {
        fill: #fff
    }
    .pageTtl__img {
        width: 100%;
        height: 100%
    }
    .ttl__top {
        margin-bottom: 24px;
        gap: 8px;
        align-items: center
    }
    .ttl__top span.en {
        letter-spacing: 0
    }
    .ttl__top-lead {
        text-align: center
    }
    .ttl__l {
        margin-bottom: 24px;
        gap: 8px;
        align-items: center
    }
    .ttl__l.left {
        align-items: center
    }
    .ttl__l span.en {
        font-size: 2.8rem;
        letter-spacing: 0
    }
    .ttl__m {
        font-size: 2rem;
        margin: 40px 0 24px
    }
    .wrap__bg {
        padding: 24px;
        border-radius: 12px
    }
    .wrap__line {
        padding: 24px;
        border-radius: 12px
    }
    .multi {
        gap: 40px;
        flex-wrap: wrap
    }
    .multi+.multi {
        margin-top: 40px
    }
    .multi__img {
        max-width: 100%;
        flex-shrink: 1;
        order: 2
    }
    .column__2 {
        gap: 40px;
        flex-wrap: wrap
    }
    .column__2>* {
        width: 100%
    }
    .table__basic.size__s dt, .table__basic.size__s dd {
        padding: 8px 5vw
    }
    .table__basic>dl {
        flex-wrap: wrap
    }
    .table__basic>dl>dt, .table__basic>dl>dd {
        padding: 16px 5vw
    }
    .table__basic>dl>dt {
        font-size: 1.6rem;
        width: 100%;
        padding: 8px;
        border-bottom: none;
        margin-bottom: 4px;
        background: #F6F4F7;
        padding: 16px !important
    }
    .table__basic>dl>dd {
        width: 100%;
        border-bottom-color: #674498
    }
    .table__basic>dl>dd .row:not(:last-of-type) {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #CCC
    }
    .fx {
        display: block
    }
}
@media screen and (max-width: 600px) {
    p:not(:last-child):not(.ttl__top), ul:not(:last-child), ol:not(:last-child), figure:not(:last-child), table:not(:last-child) {
        margin-bottom: 24px
    }
    .kv {
        padding: 60px 0 10px 0;
    }
    .kv .wrap {
        height: auto;
        flex-direction: column;
        justify-content: flex-end
    }
    .kv .wrap__left {
        width: 100%;
        padding: 0 4vw;
        margin-top: 0
    }
    .kv .wrap__right {
        width: 92%;
        margin: 0 auto 24px
    }
    .kv .wrap__right .img01 {
        display: none
    }
    .kv .wrap__right .catch {
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0
    }
    .kv .wrap__right .img02 {
        display: none
    }
    .kv .scrollTxt {
        display: none
    }
    .kv .entry {
        width: 28vw;
        height: 28vw;
        font-size: 2.4rem
    }
    .kv .entry span img {
        width: 70%
    }
    .message {
        max-width: 90vw;
        padding: 30px 0 140px 0;
    }
    .message::after {
        height: 56px;
        bottom: 90px
    }
    .message .ttl {
        font-size: 2rem;
        line-height: 1.8
    }
    .message .ttl .bg_b {
        font-size: 2.8rem
    }
    .message .ttl .pro {
        font-size: 2.8rem
    }
    .message .catch {
        font-size: 2rem
    }
    .message .img01 {
        top: 8%;
        right: 0;
        width: 20%
    }
    .message .img02 {
        bottom: -20px;
        left: 0;
        width: 33%
    }
    .top_bg #about {
        padding: 24px 0 40px
    }
    .top_bg #about .inner {
        margin-top: 0
    }
    .top_bg #about h1 {
        font-size: 3.2rem;
        margin-bottom: 24px
    }
    .top_bg #about h1 .sub {
        font-size: 1.6rem
    }
    .top_bg #about .subTtl {
        text-align: left
    }
    .top_bg #about .x2 {
        display: block
    }
    .top_bg #about .x2 .box {
        width: 100%
    }
    .top_bg #about .x2 .box:nth-child(2), .top_bg #about .x2 .box:nth-child(4) {
        border-left: none
    }
    .top_bg #about .x2 .box:nth-child(3) {
        border-bottom: solid 4px rgba(0, 0, 0, 0.08)
    }
    .top_bg #flow {
        padding: 0 0 40px
    }
    .top_bg #flow .img {
        margin: 0 3vw
    }
    .top_bg #flow .img img {
        height: 15vh;
        object-fit: cover
    }
    .top_bg #flow .img span {
        font-size: 18vw;
        top: -40%;
        left: 0;
        width: 80%
    }
    .top_bg #flow .img span::before {
        font-size: 18vw
    }
    .top_bg #flow h1 {
        font-size: 3.2rem;
        margin-bottom: 24px
    }
    .top_bg #flow h1 .sub {
        font-size: 1.6rem
    }
    .top_bg #flow .subTtl {
        text-align: left
    }
    .top_bg #flow .schedule {
        padding: 0;
        margin: 0;
        display: block
    }
    .top_bg #flow .schedule_01, .top_bg #flow .schedule_02 {
        width: 100%;
        margin: 0;
        padding: 0 !important
    }
    .top_bg #flow .schedule_01::before, .top_bg #flow .schedule_02::before {
        display: none
    }
    .top_bg #flow .schedule_01 .box, .top_bg #flow .schedule_02 .box {
        margin-bottom: 24px !important
    }
    .top_bg #flow .schedule_01 .box .time, .top_bg #flow .schedule_02 .box .time {
        margin-bottom: 4px
    }
    .top_bg #flow .schedule_01 {
        margin-left: 0 !important
    }
    .top_bg #flow .schedule_02:last-child {
        margin-bottom: 0
    }
    #voice {
        padding: 40px 0
    }
    #voice .en {
        top: -4%;
        font-size: 24vw;
        width: 80%
    }
    #voice .en::before {
        font-size: 24vw;
        transform: translateX(-50%);
        left: 50%
    }
    #voice h1 {
        font-size: 3.2rem;
        margin-bottom: 24px
    }
    #voice h1 .sub {
        font-size: 1.6rem
    }
    #voice .subTtl {
        max-width: 90vw;
        padding: 0;
        margin: 0 auto;
        text-align: left
    }
    #voice .x3 {
        flex-wrap: wrap;
        gap: 4%;
        justify-content: center;
        margin-top: 24px
    }
    #voice .x3 .box {
        width: 48%
    }
    #voice .x3 .box .voice_img {
        margin-bottom: 8px !important
    }
    #voice .x3 .box:not(:last-child) {
        margin-bottom: 32px
    }
    #voice .x3 .box .name span {
        margin-top: 8px
    }
    #voice .x3 .box .name::after {
        bottom: -20px
    }
    .remodal-wrapper .remodal {
        min-width: 100% !important;
        margin-top: 40px;
        margin-right: 0;
        width: 100% !important
    }
    .remodal-wrapper .remodal .remodal-close {
        left: 90% !important
    }
    .remodal-wrapper .remodal form {
        width: 100%
    }
    #environment {
        padding: 40px 0
    }
    #environment .ttl {
        margin-top: 24px;
        display: block;
        text-align: center
    }
    #environment .ttl .sub {
        margin: 0 auto
    }
    #environment .subTtl {
        text-align: left
    }
    #information {
        padding: 40px 0
    }
    #information .en {
        font-size: 16vw;
        width: 80%;
        top: -1%
    }
    #information .en::before {
        font-size: 16vw
    }
    .table__basic {
        padding: 40px 20px;
        margin: 0 0 24px 0 !important
    }
    .table__basic>dl>dt {
        font-size: 1.6rem
    }
    .mt80 {
        margin-top: 40px
    }
    .thanksPage.cont__box {
        padding: 80px 0
    }
}
form {
    padding: 56px 80px !important
}
form ul {
    margin-bottom: 0 !important
}
form dl {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    margin-bottom: 24px
}
form dl dt {
    width: 32%;
    padding-right: 24px;
    font-weight: 500;
    color: #040D14;
    min-width: 240px
}
form dl dt .aform-required {
    font-size: 1.2rem;
    color: #fff;
    background: #D23131;
    padding: 2px 8px;
    margin: 0 0 0 12px;
    display: inline-block;
    float: right
}
form dl dt .aform-required.option {
    color: #fff;
    background: #666
}
form dl dd {
    width: 68%;
    font-weight: 500;
    color: #040D14
}
form input:not([type="file"]), form textarea, form select {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ddd
}
form textarea {
    width: 100% !important;
    min-height: 20vh;
    display: block;
    resize: vertical
}
form select {
    background: url("../img/i_select.svg") no-repeat center right 20px #fff
}
form ::-ms-input-placeholder {
    color: #aaa
}
form :-ms-input-placeholder {
    color: #aaa
}
form ::placeholder {
    color: #aaa
}
form .aform-name-ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0
}
form .aform-name-ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
form .aform-name-ul li label {
    margin-right: 8px
}
form .aform-name-ul li:first-child {
    margin-right: 16px;
    padding-left: 0
}
form .aform-radio-ul input[type="radio"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    width: auto
}
form .aform-radio-ul label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block
}
form .aform-radio-ul label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}
form .aform-radio-ul input[type="radio"]:checked+label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    width: 8px;
    height: 8px;
    background-color: #040D14;
    border-radius: 50%
}
form .aform-checkbox-ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
form .aform-checkbox-ul li {
    display: inline-block
}
form .aform-checkbox-ul li:not(:last-child) {
    margin-right: 1vw
}
form .aform-checkbox-ul input[type="checkbox"] {
    display: none
}
form .aform-checkbox-ul label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px
}
form .aform-checkbox-ul label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s
}
form .aform-checkbox-ul input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
    height: 10px;
    border-right: 3px solid #040D14;
    border-bottom: 3px solid #040D14
}
form .aform-button-area {
    position: relative;
    display: inline
}
form .aform-button-area::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 52px;
    height: 12px;
    background: url("../img/i_arrow-wt.svg") no-repeat center center/cover;
    display: block;
    z-index: 2;
    pointer-events: none
}
form .aform-button-area #aform_btn_confirm_1 {
    border: none;
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 2.4rem;
    background: #674498;
    cursor: pointer;
    color: #fff;
    width: auto !important;
    font-weight: 700;
    padding: 20px 96px 20px 32px !important;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    gap: 24px;
    border: none !important;
    position: relative
}
form .aform-button-area #aform_btn_confirm_1:hover {
    opacity: 0.6
}
form .aform-label.privacy_policy a:hover {
    color: #040D14;
    opacity: 1
}
form .aform-label.privacy_policy a img {
    margin-left: 4px
}
form .aform-input-example.privacy_policy {
    margin-bottom: 16px
}
.aform-header {
    display: none
}
.aform-error {
    color: #D23131;
    font-size: 1.4rem
}
.thanksPage form {
    padding: 0 !important
}
.thanksPage form dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0
}
.thanksPage form dl>dt, .thanksPage form dl>dd {
    padding: 20px 30px;
    border-bottom: 1px solid #D9D9D9
}
.thanksPage form dl>dt {
    width: 25%;
    border-bottom-color: #674498;
    font-weight: 600;
    min-width: 270px
}
.thanksPage form dl>dd {
    width: 75%
}
.thanksPage form dl>dd span {
    font-weight: 600
}
.thanksPage form #aform_confirm_msg {
    margin-top: 32px
}
.thanksPage form .aform-button-area {
    background: none;
    cursor: inherit;
    padding: 0;
    gap: 0
}
.thanksPage form .aform-button-area:after {
    content: none
}
.thanksPage form .aform-button-area #aform_btn_submit {
    padding: 20px 32px 20px 32px !important;
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 2.4rem;
    background: #674498;
    cursor: pointer;
    color: #fff;
    width: auto !important;
    font-weight: 700;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    border: none !important;
    position: relative
}
.thanksPage form .aform-button-area #aform_btn_submit:hover {
    opacity: .6
}
.thanksPage form .aform-button-area #aform_btn_back {
    padding: 20px 32px 20px 32px !important;
    font-family: "yu-gothic-pr6n", YuGothic, sans-serif;
    font-size: 2.4rem;
    background: #666;
    cursor: pointer;
    color: #fff;
    width: auto !important;
    font-weight: 700;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    border: none !important;
    position: relative
}
.thanksPage form .aform-button-area #aform_btn_back:hover {
    opacity: .6
}
@media screen and (max-width: 834px) {
    form {
        padding: 36px 20px !important
    }
    form ul {
        margin-bottom: 0 !important
    }
    form dl {
        width: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        text-align: left;
        margin-bottom: 24px;
        font-size: 1.6rem
    }
    form dl dt {
        width: 100%;
        padding-right: 0;
        margin-bottom: 4px;
        background: #F6F4F7;
        padding: 16px !important;
        font-size: 1.6rem
    }
    form dl dt label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        font-size: 1.6rem
    }
    form dl dt span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    form dl dd {
        width: 100%
    }
    form input:not([type="file"]), form textarea, form select {
        padding: 10px
    }
    form .aform-radio-ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    form .aform-radio-ul li {
        font-size: 1.6rem;
        width: 100%
    }
    form .aform-checkbox-ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    form .aform-checkbox-ul li {
        font-size: 1.6rem
    }
    form .aform-checkbox-ul li:not(:last-child) {
        margin-right: 16px
    }
    form .aform-button-area #aform_btn_confirm_1 {
        font-size: 1.8rem
    }
    form .aform-checkbox-ul.privacy_policy li {
        font-size: 1.6rem;
        text-align: center;
        width: 100%
    }
    .thanksPage form {
        padding: 0 !important
    }
    .thanksPage form dl {
        width: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 0
    }
    .thanksPage form dl>dt, .thanksPage form dl>dd {
        padding: 16px !important
    }
    .thanksPage form dl>dt {
        width: 100%
    }
    .thanksPage form dl>dd {
        width: 100%
    }
    .thanksPage form .aform-button-area {
        display: block
    }
    .thanksPage form .aform-button-area #aform_btn_submit {
        font-size: 1.8rem
    }
    .thanksPage form .aform-button-area #aform_btn_back {
        font-size: 1.8rem
    }
}

/*=================================
  pageTop
=================================*/
.c-pageTop {
  position: fixed;
  bottom: 20px;
  right: 1vw;
  /*display: none;*/
}
.c-pageTop a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/*=================================
footer
=================================*/
.l-footer {
  background-color: #fff;
  padding-top: 120px;
  letter-spacing: 0;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer {
    padding-top: 60px;
  }
}
.l-footer__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  border-bottom: 2px solid #fff;
}
.l-footer__list > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.l-footer__list > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.l-footer__list > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.l-footer__list > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__list {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
    -ms-grid-rows: 4fr;
    grid-template-rows: 4fr;
  }
  .l-footer__list > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
.l-footer__list--item {
  position: relative;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__list--item {
    margin-left: unset;
  }
}
.l-footer__list--item img {
  width: 100%;
}
.l-footer__list--txt {
  position: absolute;
  color: #fff;
  bottom: 20px;
  left: 20px;
  font-size: 1.6rem;
  padding-top: unset;
  line-height: 1.8;
  text-align:left;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__list--txt {
    font-size: 1.6rem;
    bottom: 16px;
    text-align: left;
    padding-bottom: unset;
    line-height: 2;
    text-align:left;
  }
}
.l-footer__logo {
  background-color: #5A4D7F;
  padding: 60px;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__logo {
    padding: 30px 24px 50px;
  }
}
.l-footer__logo--inner {
  text-align: center;
}
.l-footer__logo--link {
  color: #fff;
  font-size: 2rem;
  display: block;
  text-decoration: none;
}

.l-footer__logo--link:active, .l-footer__logo--link:hover, .l-footer__logo--link:visited {
  color: #fff;
  text-decoration: none;
}
.l-footer__logo--link img {
  display: block;
  margin: 20px auto 0;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__logo--link img {
    max-width: 190px;
    text-decoration: none;
  }
}
.l-footer__logo--link a {
  text-decoration: none;
}
.l-footer__nav {
  background-color: #A29CCC;
  padding: 20px;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.l-footer__nav--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__nav--list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-decoration: none;
  }
}
.l-footer__nav--list a{
    text-decoration: none;
}
.l-footer__nav--menu--item {
  display: inline-block;
  margin-left: 30px;
}
.l-footer__nav--menu--item a {
  font-size: 1.4rem;
  color: #fff;
}
.l-footer__nav--menu--item a:active, .l-footer__nav--menu--item a:hover, .l-footer__nav--menu--item a:visited {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__nav--menu {
    display: none;
  }
}
.l-footer__nav--sns--item {
  display: inline-block;
  margin-left: 14px;
  margin: 0 0 0 auto;
}
.l-footer__small {
  padding: 16px 0 20px;
  text-align: center;
  color: #B0B0B0;
  font-size: 1.2rem;
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer__small {
    color: #000;
  }
  .l-footer__small small {
    font-size: 1.2rem !important;
  }
}
@media screen and (min-width: 0) and (max-width: 768px) {
  .l-footer .c-listLink__arrow {
    width: 24px;
    height: 24px;
    bottom: 20px;
    right: 14px;
  }
  .l-footer .c-listLink__arrow::before {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #F6F1F0;
    left: 8px;
  }
}



/*PC/SP切り替え*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}