@import url("css2.css");
@import url("all.css");

.pcOnly {
    display: block
}

.pcTabOnly {
    display: block
}

.tabSpOnly {
    display: none
}

.tabOnly {
    display: none
}

.spOnly {
    display: none
}

@media only screen and (max-width: 768px) {
    .pcOnly {
        display: none
    }

    .pcTabOnly {
        display: block
    }

    .tabSpOnly {
        display: block
    }

    .tabOnly {
        display: block
    }

    .spOnly {
        display: none
    }
}

@media only screen and (max-width: 480px) {
    .pcOnly {
        display: none
    }

    .pcTabOnly {
        display: none
    }

    .tabSpOnly {
        display: block
    }

    .tabOnly {
        display: none
    }

    .spOnly {
        display: block
    }
}

@keyframes loader {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes gnaviAnime {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes downAnime {
    from {
        transform: translateY(-100px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes upAnime {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100px)
    }
}

@keyframes linkhover {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    55% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes linkhover2 {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    55% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes linkhover3 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    55% {
        opacity: 0.1;
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 0 1px #ec6f22
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
        box-shadow: 0 0 0 10px #ec6f22
    }
}

@keyframes ripple2 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 0 1px #0032a6
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
        box-shadow: 0 0 0 10px #0032a6
    }
}

@keyframes PageAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0)
    }

    50% {
        transform-origin: left;
        transform: scaleX(1)
    }

    50.001% {
        transform-origin: right
    }

    100% {
        transform-origin: right;
        transform: scaleX(0)
    }
}

@keyframes PageAnimeAppear {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes rotate {
    0% {
        transform: rotate(-100deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes rotate2 {
    0% {
        opacity: 0;
        transform: rotate(60deg)
    }

    100% {
        opacity: 1;
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes figureLeftToRight {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(100%)
    }
}

body {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75)
}

body.show {
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75)
}

.is-fade-element {
    transition: opacity 0.8s, transform 0.8s
}

.is-fade-standby {
    opacity: 0;
    transform: translate(0, 100px);
    transition: none
}

@media only screen and (max-width: 768px) {
    .is-fade-standby {
        transform: translate(0, 80px)
    }
}

html,
body {
    font-family: YakuHanJP, 'Noto Sans JP', 'Noto Sans', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1;
    font-weight: 400;
    font-size: 13px;
    overflow-x: hidden;
    width: 100%
}

html a,
body a {
    color: #000000;
    cursor: pointer;
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media only screen and (min-width: 769px) {

    html a:hover,
    body a:hover {
        opacity: 0.8;
        transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1)
    }
}

html a.disable,
body a.disable {
    pointer-events: none
}

html h3,
body h3 {
    letter-spacing: 0.05em
}

html h4,
body h4 {
    letter-spacing: 0.05em
}

html p,
body p {
    letter-spacing: 0.05em
}

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

    html,
    body {
        font-size: 3.49333vw
    }
}

.font-eng {
    font-family: 'Noto Sans', 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif
}

.colorW {
    fill: #ffffff
}

img[src$=".svg"] {
    width: 100%;
    height: auto
}

header {
    width: 100%;
    position: fixed;
    background: #ffffff;
    z-index: 9999;
    top: 0;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 36px 0
}

header .inner {
    margin: 0 auto;
    width: 90%
}

header .inner .logo {
    max-width: 410px;
    width: 100%;
    margin-bottom: 18px;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header .inner .logo img {
    max-width: 410px;
    width: 100%;
    height: auto
}

@media only screen and (max-width: 768px) {
    header .inner .logo {
        max-width: 410px
    }
}

@media only screen and (max-width: 480px) {
    header .inner .logo {
        max-width: 100%
    }

    header .inner .logo img {
        max-width: 100%
    }
}

header .inner dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0 12px;
    border-bottom: 1px solid #000000;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header .inner dl dt {
    width: 152px;
    height: auto
}

header .inner dl dt img {
    height: 14px;
    width: auto
}

header .inner dl dd div.openbtn {
    overflow: hidden;
    width: 47px
}

header .inner dl dd div.openbtn span {
    display: inline-block;
    width: auto;
    height: 15px
}

@media only screen and (max-width: 768px) {
    header .inner dl dd div.openbtn span {
        height: 14px
    }
}

header .inner dl dd div.openbtn span img {
    height: 100%;
    width: auto
}

header .inner dl dd div.openbtn:hover span {
    animation: linkhover2 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

header .inner dl dd div.openbtn:hover span:nth-of-type(2) {
    animation-delay: 0.1s
}

header .inner dl dd div.openbtn:hover span:nth-of-type(3) {
    animation-delay: 0.2s
}

header .inner dl dd div.openbtn:hover span:nth-of-type(4) {
    animation-delay: 0.3s
}

@media only screen and (max-width: 768px) {
    header .inner {
        width: 90%
    }
}

header.active {
    position: fixed;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: rgba(255, 255, 255, 0.5)
}

header.active .inner .logo {
    max-width: 246px
}

header.active .inner .logo {
    max-width: 0;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

@media only screen and (max-width: 480px) {
    header.active #g-nav #g-nav-list ul {
        top: 50% !important;
        transform: translate(-50%, -50%) !important
    }
}

@media only screen and (min-width: 769px) {
    header.active #g-nav #g-nav-list ul {
        transition: top 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    header.active #g-nav #g-nav-list ul.groupPos {
        top: 100px !important
    }

    header.active #g-nav #g-nav-list ul.otherPos {
        top: 126px !important
    }
}

header #g-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: #767676;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header #g-nav.panelactive {
    right: 0
}

header #g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 300px;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header #g-nav.panelactive #g-nav-list ul li a {
    transform: translateY(0);
    overflow: hidden;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header #g-nav ul {
    position: absolute;
    z-index: 999;
    transition: top 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    left: 52%;
    transform: translateX(-50%);
    width: 74%
}

header #g-nav ul li {
    list-style: none;
    text-align: center;
    padding: 18px 0;
    overflow: hidden
}

header #g-nav ul li a {
    color: #333;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    transform: translateY(200px);
    transition: 0.8s 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
}

header #g-nav ul li a img {
    width: 246px;
    height: auto
}

header #g-nav ul li a svg {
    width: 246px;
    height: auto
}

header #g-nav ul li a svg path {
    fill: #ffffff
}

header #g-nav ul li.sub-nav {
    padding: 8px 0
}

header #g-nav ul li.sub-nav:nth-of-type(3) {
    padding: 0 0 8px
}

header #g-nav ul li.sub-nav:nth-of-type(5) {
    padding: 8px 0 18px
}

header #g-nav ul li.sub-nav a {
    padding-left: 13px;
    margin-left: 5px;
    position: relative
}

header #g-nav ul li.sub-nav a:before {
    content: "";
    height: 1px;
    width: 8px;
    background: #ffffff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

header #g-nav ul li.sub-nav a img {
    width: auto;
    height: 18px
}

header #g-nav ul li:nth-last-of-type(2) {
    padding-bottom: 36px
}

header #g-nav ul li:last-of-type {
    padding-top: 0
}

header #g-nav ul li:last-of-type a {
    padding-top: 36px;
    border-top: 1px solid #ffffff
}

header .overlay {
    position: fixed;
    z-index: 998;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    background: transparent;
    transition: all 0.1s
}

header .overlay.open {
    right: 0
}

header .openbtn {
    cursor: pointer
}

header .closebtn {
    pointer-events: none;
    opacity: 0;
    cursor: pointer;
    transition: all 0.8s;
    position: fixed;
    z-index: 10001;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px
}

header .closebtn span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    right: 10px;
    height: 2px;
    border-radius: 1px;
    background-color: #ffffff
}

header .closebtn span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%
}

header .closebtn span:nth-of-type(2) {
    opacity: 0
}

header .closebtn span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%
}

header .closebtn.active {
    opacity: 1;
    pointer-events: auto
}

header {
    transition: right 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    right: 0
}

header.moveLeft {
    transition: right 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    right: 300px
}

.contWrap {
    transition: right 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    right: 0
}

.contWrap.moveLeft {
    transition: right 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    right: 300px
}

.contWrap {
    position: relative;
    overflow-x: hidden
}

.contWrap .inner {
    max-width: 750px;
    width: 90%;
    margin: 0 auto;
    padding: 144px 0;
    text-align: justify
}

@media only screen and (max-width: 768px) {
    .contWrap .inner {
        padding: 72px 0
    }
}

.contWrap section.inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 750px
}

.contWrap section.inner h2 {
    font-size: 1.7rem;
    margin-bottom: 36px
}

.contWrap section.inner h2.h2Only {
    margin-bottom: 0
}

.contWrap section.inner h2 span {
    display: block;
    font-size: 1.2rem;
    margin-top: 18px
}

.contWrap section.inner h2+p {
    margin-bottom: 36px
}

.contWrap section.inner h3 {
    font-size: 1.2rem
}

.contWrap section.inner p {
    font-size: 1rem
}

.contWrap section.inner p span {
    margin-top: 36px;
    display: block;
    text-align: right
}

@media only screen and (max-width: 768px) {
    .contWrap section.inner h2 {
        width: 100%;
        text-align: center;
        margin-bottom: 36px
    }

    .contWrap section.inner h3 {
        width: 100%;
        text-align: center
    }

    .contWrap section.inner p span {
        text-align: center
    }
}

.contWrap section.inner.txtWrap h3 {
    line-height: 1.5
}

.contWrap section.inner.txtWrap h3::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 1.5) * .5em);
    content: ""
}

.contWrap section.inner.txtWrap h3::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 1.5) * .5em);
    content: ""
}

.contWrap section.inner.txtWrap p {
    line-height: 2.0
}

.contWrap section.inner.txtWrap p::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 2) * .5em);
    content: ""
}

.contWrap section.inner.txtWrap p::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 2) * .5em);
    content: ""
}

.contWrap section .inner {
    max-width: 750px
}

.contWrap section .inner h2 {
    font-size: 1.7rem;
    margin-bottom: 36px
}

.contWrap section .inner h2.h2Only {
    margin-bottom: 0
}

.contWrap section .inner h2 span {
    display: block;
    font-size: 1.2rem;
    margin-top: 18px
}

.contWrap section .inner h2+p {
    margin-bottom: 36px
}

.contWrap section .inner h3 {
    font-size: 1.2rem
}

.contWrap section .inner p {
    font-size: 1rem
}

.contWrap section .inner p span {
    margin-top: 30px;
    display: block;
    text-align: right
}

@media only screen and (max-width: 768px) {
    .contWrap section .inner h2 {
        text-align: center;
        margin-bottom: 36px
    }

    .contWrap section .inner h3 {
        text-align: center
    }

    .contWrap section .inner p span {
        text-align: center
    }
}

.contWrap section .inner.txtWrap h3 {
    line-height: 1.5
}

.contWrap section .inner.txtWrap h3::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 1.5) * .5em);
    content: ""
}

.contWrap section .inner.txtWrap h3::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 1.5) * .5em);
    content: ""
}

.contWrap section .inner.txtWrap p {
    line-height: 2.0
}

.contWrap section .inner.txtWrap p::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 2) * .5em);
    content: ""
}

.contWrap section .inner.txtWrap p::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 2) * .5em);
    content: ""
}

.contWrap .caption {
    font-size: 0.7rem;
    line-height: 1;
    vertical-align: baseline;
    margin-top: 30px
}

@media only screen and (max-width: 768px) {
    .contWrap .caption {
        margin-top: 5%
    }
}

.contWrap sup {
    vertical-align: super;
    line-height: 1;
    font-size: 0.7rem
}

.contWrap .btnArea {
    margin: 36px auto 0;
    max-width: 350px;
    width: 100%;
    display: flex;
    justify-content: center
}

.contWrap .btnArea.alignLeft {
    margin: 36px 0 0
}

@media only screen and (max-width: 480px) {
    .contWrap .btnArea {
        max-width: 100%
    }
}

.contWrap .btnArea a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
    padding: 18px;
    transition: all 1s cubic-bezier(0, 0.7, 0, 1);
    border: 1px solid #000000
}

.contWrap .btnArea a.btn p {
    letter-spacing: 0;
    text-align: center;
    font-size: 1.2rem
}

.contWrap .btnArea a.btn p span {
    display: block;
    text-align: center;
    margin-top: 10px
}

@media only screen and (min-width: 769px) {
    .contWrap .btnArea a.btn:hover {
        color: #ffffff;
        background: #000000;
        transition: all 1s cubic-bezier(0, 0.7, 0, 1)
    }
}

.contWrap footer {
    background: #d2d2d2;
    width: 100%;
    padding: 36px 0
}

.contWrap footer .inner {
    padding: 0;
    margin: 0 auto;
    width: 90%;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.contWrap footer .inner .logo a {
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    max-width: 232px;
    width: 232px;
    aspect-ratio: 232 / 58.42;
    object-fit: contain;
    background: url(../picture/usagi_logo2.png) no-repeat;
    background-size: contain
}

.contWrap footer .inner .logo a:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 25.18103%
}

.contWrap footer .inner .logo a img {
    width: 232px;
    height: auto
}

.contWrap footer .inner .groupList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 660px;
    margin-top: 18px
}

.contWrap footer .inner .groupList li {
    font-size: 0.8rem;
    line-height: 1;
    border-right: 1px solid #767676;
    margin-right: 6px
}

.contWrap footer .inner .groupList li a {
    display: block;
    padding-right: 6px
}

.contWrap footer .inner .groupList li:nth-of-type(n+6) {
    margin-top: 6px
}

.contWrap footer .inner .groupList li:last-of-type {
    margin-right: 0;
    border-right: none
}

.contWrap footer .inner .groupList li:last-of-type a {
    padding-right: 0
}

.contWrap footer .inner address {
    margin-top: 18px;
    font-size: 1rem
}

.contWrap footer .inner nav {
    border-top: 1px solid #000000;
    margin: 18px auto 0;
    padding: 18px 0 36px;
    width: 100%;
    display: flex;
    justify-content: center
}

.contWrap footer .inner nav ul {
    max-width: 340px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-items: flex-start
}

.contWrap footer .inner nav ul li a {
    text-align: center;
    font-size: 0.8rem
}

.contWrap footer .inner #snsArea {
    display: flex;
    flex-direction: column;
    align-items: center
}

.contWrap footer .inner #snsArea p {
    text-align: center;
    font-size: 0.785rem;
    margin-bottom: 12px
}

.contWrap footer .inner #snsArea ol {
    margin-bottom: 36px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-items: flex-start
}

.contWrap footer .inner #snsArea ol li.snsIcon a {
    display: block;
    position: relative;
    width: 20px;
    height: 20px
}

.contWrap footer .inner #snsArea ol li.snsIcon a:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.contWrap footer .inner #snsArea ol li.snsIcon:nth-of-type(n+2) {
    margin-left: 20px
}

.contWrap footer .inner #snsArea ol li.snsIcon.insta a:before {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.44,1.08c-1.17.06-1.97.24-2.67.52-.72.28-1.34.66-1.95,1.27-.61.61-.99,1.23-1.27,1.95-.27.7-.45,1.5-.51,2.67-.05,1.17-.06,1.55-.06,4.53,0,2.99.02,3.36.07,4.54.06,1.17.24,1.97.52,2.67.28.72.66,1.34,1.27,1.95.61.61,1.23.98,1.95,1.26.7.27,1.5.45,2.67.51,1.17.05,1.55.06,4.53.06,2.99,0,3.36-.02,4.54-.07,1.17-.06,1.97-.24,2.67-.52.72-.28,1.34-.66,1.95-1.27.61-.61.98-1.23,1.26-1.95.27-.7.46-1.5.51-2.67.05-1.17.06-1.55.06-4.54,0-2.99-.02-3.36-.07-4.53-.06-1.17-.24-1.97-.52-2.67-.28-.72-.66-1.34-1.27-1.95-.61-.61-1.23-.99-1.95-1.26-.7-.27-1.5-.46-2.67-.51-1.17-.05-1.55-.06-4.54-.06-2.99,0-3.36.02-4.53.07m.13,19.89c-1.07-.05-1.65-.22-2.04-.37-.51-.2-.88-.44-1.27-.82-.39-.38-.62-.75-.83-1.26-.15-.39-.33-.97-.38-2.04-.05-1.16-.07-1.51-.07-4.44,0-2.94,0-3.28.06-4.44.05-1.07.23-1.65.37-2.04.2-.51.44-.88.82-1.27.38-.39.75-.62,1.26-.83.39-.15.97-.33,2.04-.38,1.16-.05,1.51-.07,4.44-.07,2.94,0,3.28,0,4.45.06,1.07.05,1.65.22,2.04.37.51.2.88.44,1.27.82.39.38.62.75.83,1.26.15.39.33.97.38,2.04.06,1.16.07,1.51.07,4.44,0,2.94,0,3.28-.06,4.44-.05,1.07-.22,1.66-.37,2.04-.2.51-.44.88-.82,1.27-.38.38-.75.62-1.26.83-.39.15-.97.33-2.04.38-1.16.05-1.51.07-4.45.07-2.94,0-3.28,0-4.44-.06m8.97-14.84c0,.73.59,1.32,1.32,1.32.73,0,1.32-.59,1.32-1.32,0-.73-.59-1.32-1.32-1.32s-1.32.59-1.32,1.32m-10.19,5.89c0,3.12,2.54,5.64,5.66,5.64,3.12,0,5.64-2.54,5.64-5.66,0-3.12-2.54-5.64-5.66-5.64-3.12,0-5.64,2.54-5.64,5.66m1.98,0c0-2.02,1.64-3.67,3.66-3.67,2.02,0,3.67,1.63,3.67,3.66,0,2.03-1.63,3.67-3.66,3.67-2.02,0-3.67-1.63-3.67-3.66" fill="%23222222"/></svg>')
}

.contWrap footer .inner #snsArea ol li.snsIcon.note a:before {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="m5,5.35c5.78,0,13.69-.29,19.37-.15,7.62.19,10.49,3.52,10.58,11.72.1,4.64,0,17.92,0,17.92h-8.25c0-11.62.05-13.54,0-17.2-.1-3.22-1.02-4.76-3.49-5.05-2.62-.29-9.97-.05-9.97-.05v22.3H5V5.35h0Z" fill="%23222222"/></svg>')
}

.contWrap footer .inner small {
    font-size: 0.7rem;
    text-align: center
}

@media only screen and (max-width: 768px) {
    .contWrap footer .inner .groupList {
        max-width: 430px
    }

    .contWrap footer .inner .groupList li:nth-of-type(5) {
        border-right: 1px solid #767676
    }

    .contWrap footer .inner .groupList li:nth-of-type(n+4) {
        margin-top: 6px
    }
}

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

    .contWrap footer .inner .groupList li:nth-of-type(3),
    .contWrap footer .inner .groupList li:nth-of-type(7) {
        border-right: 1px solid #767676
    }

    .contWrap footer .inner .groupList li:nth-of-type(n+3) {
        margin-top: 6px
    }

    .contWrap footer .inner nav ul li a {
        text-align: left
    }

    .contWrap footer .inner nav ul li:nth-last-of-type(-n+2) a {
        padding-bottom: 0
    }
}

#pagetop {
    overflow: hidden;
    width: 50px;
    height: 50px;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    bottom: 18px;
    right: 18px;
    transform: translateY(170%);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#pagetop:before {
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    background: #767676;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#pagetop.active {
    transform: translate(0);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#pagetop.active:hover:before {
    background: #ffffff
}

#pagetop p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%
}

#pagetop p svg.arrow {
    width: 50%;
    transform: rotate(-90deg);
    fill: #ffffff
}

#pagetop svg.roundBtnLine {
    position: absolute;
    z-index: 11;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

#pagetop svg.roundBtnLine rect {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    transform: translate(0.5px, 0.5px);
    fill: none;
    stroke: #000000;
    stroke-width: 1;
    stroke-dasharray: 0, 50;
    stroke-dashoffset: 50;
    transition: all 1s cubic-bezier(0, 0.7, 0, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#pagetop:hover:before {
    background: #ffffff
}

#pagetop:hover p {
    animation: linkhover2 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#pagetop:hover p svg.arrow {
    fill: #000000
}

#pagetop:hover svg.roundBtnLine rect {
    stroke-width: 1;
    stroke-dasharray: 50, 0;
    stroke-dashoffset: 0
}

section .inner dl.accordion {
    margin-top: 36px
}

section .inner dl.accordion:first-of-type {
    margin-top: 0
}

section .inner dl.accordion:first-of-type>dd {
    margin-bottom: 72px
}

section .inner dl.accordion>dt {
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    display: inline-block;
    padding-right: 30px
}

section .inner dl.accordion>dt:after {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M7.5,11.1L0,4.9l1.5,0L8,10.3l6.5-5.4l1.5,0l-7.5,6.2L7.5,11.1z"/></svg>');
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotateX(0deg);
    transition: transform 0.8s
}

section .inner dl.accordion>dt.active:after {
    transform: rotateX(180deg);
    transition: transform 0.8s
}

section .inner dl.accordion>dt.active+dd {
    opacity: 1;
    transform: translateZ(0);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: .8s
}

section .inner dl.accordion>dd {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    display: none
}