@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'TWKLausanne';
    src: url('./font/TWKLausanne-350.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TWKLausanne';
    src: url('./font/TWKLausanne-500.woff2') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
html {
    font-size: 62.5%;
	width: 100%;
}
body {
	font: 1rem/1.5 'TWKLausanne', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    font-feature-settings: 'palt';
    color: #282c2e;
	width: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}
caption,th,td {
	font-weight: normal;
	text-align: left;
}
input,textarea,select {
	font-family: 'TWKLausanne', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
ul,ol { list-style: none; }
fieldset,img { border: 0; vertical-align: top; }
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
input{
    color: #282c2e;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
label{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
    text-decoration:none;
    color:inherit;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
    outline:none;
}
select::-ms-expand {
    display: none;
}
img{
    pointer-events: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout;
    background: var(--col-bg);
}
body::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(251,250,247,0.2);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}
body.nav-open::before {
    opacity: 1;
    visibility: visible;
}
:root {
    --col-bg: #fbfaf7;
    --col-bg2: #f0ece4;
    --col-bg3: #333739;
    --col-bg4: #767a7d;
    --col-bg5: #b34347;
    --col-bg6: #af9d7c;
    --col-cat1: #d5897a;
    --col-cat2: #66847e;
    --col-cat3: #cba671;
    --col-cat4: #848394;
    --col-cat5: #658462;
    --mg-xxxl: 16rem;
    --mg-xxl: 12rem;
    --mg-xl: 10rem;
    --mg-l: 8rem;
    --mg-m: 6rem;
    --mg-s: 4.8rem;
    --mg-xs: 4rem;
    --mg-xxs: 3.2rem;
}
@media (max-width: 767px){
    :root {
        --mg-xxxl: 12rem;
        --mg-xxl: 10rem;
        --mg-xl: 8rem;
        --mg-l: 6rem;
        --mg-m: 4.8rem;
        --mg-s: 4rem;
        --mg-xs: 3.2rem;
        --mg-xxs: 2.4rem;
    }
}
@media (max-width: 1200px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 1024px){
    html {
        font-size: 0.87890625vw;
    }
}
@media (max-width: 767px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 430px){
    html {
        font-size: 2.093023vw;
    }
}


/* -- header
-------------------------------------------------------------------------------- */
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
}
header.hide{
    transform: translateY(-100%);
}
header::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--col-bg);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.nav-open header{
    backdrop-filter: blur(0);
}
.nav-open header::before{
    opacity: 0;
}
header .header-inner{
    height: 9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5% 0 3%;
    position: relative;
}
header .logo{
    display: flex;
    align-items: center;
    height: 4.4rem;
}
header .logo svg{
    height: 100%;
    color: #1c3177;
    transform: translateY(0.2em);
}
header .logo svg.sp{
    display: none;
}
header .logo .txt{
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    margin-left: 1.5em;
    padding-left: 1.25em;
    border-left: solid 1px var(--col-bg3);
}
header .nav-wrap{
    display: flex;
    align-items: center;
}
header .nav-wrap .search{
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 2.5rem;
    border: solid 1px var(--col-bg3);
    margin-right: 3.2rem;
    position: relative;
    overflow: hidden;
    transition: width 0.3s ease;
}
header .nav-wrap .search.active{
    width: 26rem;
}
header .nav-wrap .search .input-item{
    display: block;
    width: 100%;
    height: 4.8rem;
    border-radius: 2.5rem 0 0 2.5rem;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
header .nav-wrap .search.active .input-item{
    opacity: 1;
    transition-delay: 0.15s
}
.search input{
    margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
.keyword input[type="text"]{
    font-size: 1.4rem;
    letter-spacing: 0.015em;
    width: 100%;
    padding: 0 4.8rem 0.1rem 2rem;
    height: 4.8rem;
    border-radius: 2.4rem;
    box-sizing: border-box;
}
.keyword input[type="text"]:focus{
}
.keyword input::placeholder{
    color: rgba(0,0,0,0.4);
}
.keyword input[type="text"]:focus::placeholder{
}
.search .search-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    position: absolute;
    top: 0;
    right: 0;
}
.search input[type="submit"]{
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.search svg{
    width: 50%;
    height: 50%;
    fill: none;
    stroke: var(--col-bg3);
    stroke-width: 2.5px;
    stroke-linecap: round;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 0.15s ease;
    pointer-events: none;
}
@media (min-width: 1025px){
    .search .search-btn:hover svg{
        stroke: var(--col-bg6);
    }
}
header .nav-wrap .search .search-btn-sp{
    display: none;
}
header .nav-wrap nav ul{
    display: flex;
    align-items: center;
}
header .nav-wrap nav ul li{
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
header .nav-wrap nav ul li + li{
    margin-left: 3.2rem;
}
header .nav-wrap nav ul li a{
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    header .nav-wrap nav ul li a:hover{
        color: var(--col-bg6);
    }
}
header .nav-wrap .gnav-btn{
    width: 9rem;
    height: 9rem;
    margin-left: 1.6rem;
    position: relative;
    z-index: 1;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
header .nav-wrap .gnav-btn span{
    width: 4rem;
    border-top: solid 0.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.1rem;
    margin-left: -2rem;
    transition: transform 0.3s ease;
}
header .nav-wrap .gnav-btn span.bar-1{
    transform: translateY(-0.45rem);
}
header .nav-wrap .gnav-btn span.bar-2{
    transform: translateY(0.45rem);
}
@media (min-width: 1025px){
    header .nav-wrap .gnav-btn:not(.active,.no-hover):hover span{
        animation: gnav-hover 0.6s;
    }
    header .nav-wrap .gnav-btn:not(.active,.no-hover):hover span.bar-2{
        animation-delay: 0.15s;
    }
}
@keyframes gnav-hover {
    0% {
        left: 50%;
        width: 4rem;
    }
    50% {
        left: 100%;
        width: 0;
    }
    51% {
        left: 50%;
        width: 0;
    }
    100% {
        left: 50%;
        width: 4rem;
    }
}
header .nav-wrap .gnav-btn.active span{
    width: 3.6rem;
    margin-left: -1.8rem;
}
header .nav-wrap .gnav-btn.active span.bar-1{
    transform: translateY(0) rotate(45deg);
}
header .nav-wrap .gnav-btn.active span.bar-2{
    transform: translateY(0) rotate(-45deg);
}
@media (min-width: 1025px){
}
@media (max-width: 767px){
    header .header-inner{
        padding-left: 5%;
        padding-right: 0;
    }
    header .logo svg.pc{
        display: none;
    }
    header .logo svg.sp{
        display: block;
    }
    header .logo .txt {
        font-size: 1.4rem;
        margin-left: 1.25em;
        padding-left: 1em;
    }
    header .nav-wrap .search{
        margin-right: 0;
        transition: none;
        overflow: visible;
    }
    header .nav-wrap .search.active{
        width: 4.8rem;
    }
    header .nav-wrap .search .input-item{
        width: 26rem;
        height: 6rem;
        top: 4.8rem;
        right: -2.4rem;
        background: var(--col-bg);
        border: solid 1px var(--col-bg3);
        border-radius: 3.2rem;
        transition: top 0.15s ease, opacity 0.15s ease;
    }
    header .nav-wrap .search.active .input-item{
        top: 6rem;
        transition-delay: 0s;
    }
    header .nav-wrap .search .search-btn-sp{
        display: block;
        width: 6rem;
        height: 6rem;
        position: absolute;
        top: 0;
        right: 0;
    }
    header .nav-wrap .search .search-btn-sp svg{
        width: 2.4rem;
        height: 2.4rem;
    }
    .keyword input[type="text"] {
        font-size: 1.6rem;
        height: 6rem;
        padding-left: 2.4rem;
        padding-right: 6rem;
        border-radius: 3rem;
    }
    header .nav-wrap > nav{
        display: none;
    }
    header .nav-wrap .gnav-btn{
        margin-left: 0;
    }
    header .nav-wrap .gnav-btn span{
        width: 3.6rem;
        margin-left: -1.8rem;
    }
    header .nav-wrap .gnav-btn.active span{
        width: 3.2rem;
        margin-left: -1.6rem;
    }
}


/* -- gnav
-------------------------------------------------------------------------------- */
.gnav{
    width: 40rem;
    padding: 0 2rem 2rem 0;
    box-sizing: border-box;
    position: absolute;
    top: 9rem;
    right: 0;
    transform: translateY(-4rem);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.nav-open .gnav{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.gnav .gnav-inner{
    padding: 3.2rem 3.2rem;
    box-sizing: border-box;
    background: #4d4d4d;
    border-radius: 2.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gnav .gnav-inner li + li{
    margin-top: 1.6rem;
}
.gnav .gnav-inner li a{
    color: #fff;
    display: flex;
    align-items: center;
}
.gnav .gnav-inner li .ico{
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    background: rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}
@media (min-width: 1025px){
    .gnav .gnav-inner li a:hover .ico{
        transform: scale(1.15);
    }
}
.gnav .gnav-inner li .ico svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gnav .gnav-inner li .ico svg.ico-1 .st0:first-child{
    fill: #b97568;
}
.gnav .gnav-inner li .ico svg.ico-2 path:not(.st1){
    fill: #5d6f6b;
}
.gnav .gnav-inner li .ico svg.ico-3 path{
    fill: #a88e66;
}
.gnav .gnav-inner li .txt{
    flex: 1;
    padding-left: 2rem;
}
.gnav .gnav-inner li span{
    display: block;
}
.gnav .gnav-inner li .ja{
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    line-height: 1.25;
}
.gnav .gnav-inner li .en{
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: 0.015em;
    margin-top: 0.6rem;
}
.gnav .gnav-inner .sub{
    display: flex;
    margin-top: 3.2rem;
    padding-top: 2.4rem;
    border-top: solid 1px rgba(255,255,255,0.1);
}
.gnav .gnav-inner .sub li{
    width: 50%;
    padding-right: 2.4rem;
    box-sizing: border-box;
}
.gnav .gnav-inner .sub li + li{
    margin: 0;
    padding-left: 2rem;
    padding-right: 0;
    border-left: solid 1px rgba(255,255,255,0.1);
}
.gnav .gnav-inner .sub li .txt{
    padding-left: 0;
}
.gnav .gnav-inner .sub li .ja{
    font-size: 1.4rem;
}
.gnav .gnav-inner .gnav-foot{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: var(--mg-s);
}
.gnav .gnav-inner .copyright{
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.5;
}
.gnav .gnav-inner .logo-min{
    height: 4rem;
}
.gnav .gnav-inner .logo-min svg{
    display: block;
    height: 100%;
}
.gnav .gnav-inner .logo-min svg .st0{
    fill: #fff;
}
.gnav .gnav-inner .logo-min svg .st1{
    opacity:0.55;
    fill: #fff;
}


/* -- main
-------------------------------------------------------------------------------- */
main{
    display: block;
    padding-top: 9rem;
}


/* -- mv
-------------------------------------------------------------------------------- */
.mv{
    padding: 0 2rem 2rem;
}
.mv .mv-inner{
    display: flex;
    height: calc(100svh - 9rem - 2rem);
    max-height: 80rem;
    min-height: 54rem;
    position: relative;
}
.mv .main-area{
    width: 50%;
    box-sizing: border-box;
    padding-right: 1rem;
}
.mv .main-area .main-area-inner{
    height: 100%;
    border-radius: 2.4rem;
    overflow: hidden;
    position: relative;
}
.mv .main-area .main-area-inner::before,
.home-history .section-inner .history-item-img::before{
    content: "";
    background: url(../img/spinner.svg) no-repeat center;
    background-size: cover;
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mv .main-area .img{
    width: 100%;
    height: 100%;
    position: relative;
}
.mv .main-area .img span{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.img-switch{
    opacity: 0;
    transition: opacity 0.6s ease;
}
.img-switch.active{
    opacity: 1;
}
.img-switch span{
    transform: scale(1.08);
}
.img-switch.active span.show{
    transform: scale(1);
    transition: transform 4s linear, opacity 0.8s linear;
}
.img-switch span.hide{
    opacity: 0;
}
.mv .main-area .img span img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mv .main-area .ttl{
    box-sizing: border-box;
    padding: 3.2rem 5vw 1.2rem calc(3vw - 2rem);
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--col-bg);
    border-radius: 0 2.4rem 0 0;
}
.mv .main-area .ttl > svg{
    width: 2.4rem;
    position: absolute;
    fill: var(--col-bg);
}
.mv .main-area .ttl .svg-1{
    top: -2.4rem;
    left: 0;
}
.mv .main-area .ttl .svg-2{
    bottom: 0;
    right: -2.4rem;
}
.mv .main-area .ttl .en{
    font-size: 6rem;
    line-height: 1;
    font-weight: normal;
    letter-spacing: 0.015em;
    text-indent: -0.02em;
}
.mv .main-area .ttl .en span{
    display: block;
}
.mv .main-area .ttl .ja{
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin-top: 1.6rem;
}
.mv .main-area .scroll-down{
    display: inline-block;
    margin-top: 2.4rem;
}
.mv .main-area .scroll-down .scroll-down-inner{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.mv .main-area .scroll-down .arrow{
    border: solid 1px var(--col-bg3);
    background: transparent;
}
.mv .main-area .scroll-down .arrow span{
    transform: rotate(90deg);
}
.mv .main-area .scroll-down .arrow svg{
    stroke: var(--col-bg3);
}
@media (min-width: 1025px){
    .mv .main-area .scroll-down:hover .arrow span svg{
        animation: link-hover 0.6s ease;
    }
}
.mv .main-area .scroll-down .txt{
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    margin-left: 1.6rem;
}
.mv .sub-area{
    flex: 1;
    padding-left: 1rem;
}
.mv .sub-area .sub-area-inner{
    height: 100%;
}
.mv .sub-area ul{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: -1rem -1rem;
}
.mv .sub-area li{
    width: 50%;
    height: calc(50% + 1rem);
    box-sizing: border-box;
    padding: 1rem 1rem;
}
.mv .sub-area li a{
    display: block;
    height: 100%;
    border-radius: 2.4rem;
    color: #fff;
}
.mv .sub-area li:nth-child(1) a{
    background: var(--col-cat1);
}
.mv .sub-area li:nth-child(2) a{
    background: var(--col-cat2);
}
.mv .sub-area li:nth-child(3) a{
    background: var(--col-cat3);
}
.mv .sub-area li:nth-child(4) a{
    background: var(--col-cat4);
}
.mv .sub-area li .nav-box{
    height: 100%;
    padding: var(--mg-xxs) var(--mg-xxs);
    box-sizing: border-box;
    position: relative;
}
.mv .sub-area li .nav-box::before{
    content: "Visit";
    position: absolute;
    right: 5.8rem;
    bottom: 0;
    font-size: 1.6rem;
    letter-spacing: 0.015em;
    padding-right: 2rem;
    padding-bottom: 1.2rem;
}
.mv .sub-area li .nav-box .ttl{
    position: relative;
    z-index: 1;
}
.mv .sub-area li .nav-box .ttl .ja{
    display: block;
    font-size: 2rem;
    letter-spacing: 0.15em;
    line-height: 1;
    font-weight: normal;
    white-space: nowrap;
}
.mv .sub-area li .nav-box .ttl .en{
    display: block;
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: 0.015em;
    margin-top: 1.2rem;
}
.mv .sub-area li .nav-box .ico{
    width: 50%;
    padding-top: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mv .sub-area li .nav-box .ico span{
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
    border-radius: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: transform 0.3s ease;
}
.mv .sub-area li .nav-box .ico span svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (min-width: 1025px){
    .mv .sub-area li a:hover .nav-box .ico span{
        transform: translate(-50%,-50%) scale(1.13);
    }
}
.ico span svg path,
.ico span svg line,
.ico span svg circle{
    fill:none;
    stroke:var(--col-bg);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}
svg.ico-1 .st1{
    fill:var(--col-cat1)!important;
}
svg.ico-1 .st2{
    fill:#b57568!important;
}
svg.ico-1 .path-1{
    opacity: 0;
    transform: translateY(10%);
    animation: ico-1-path-1 3s ease infinite;
}
svg.ico-1 .path-2{
    opacity: 0;
    transform: translateY(10%);
    animation: ico-1-path-2 3s ease infinite;
}
svg.ico-1 .path-3{
    opacity: 0;
    transform: translateY(10%);
    animation: ico-1-path-3 3s ease infinite;
}
@keyframes ico-1-path-1 {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    5% {
        opacity: 1;
    }
    20% {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes ico-1-path-2 {
    15% {
        opacity: 0;
        transform: translateY(10%);
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes ico-1-path-3 {
    30% {
        opacity: 0;
        transform: translateY(10%);
    }
    35% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
.ico-2 .st2{
    stroke-width: 0!important;
    fill: var(--col-bg)!important;
}
.ico-2 .st3{
    fill: var(--col-cat2)!important;
}
.ico-2 .path-1{
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(180deg);
    animation: ico-2-path-1 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.ico-2 .path-2{
    stroke-dashoffset: 33;
    stroke-dasharray: 33;
    animation: ico-2-path-2 3s ease infinite;
}
.ico-2 .path-3{
    stroke-dashoffset: 33;
    stroke-dasharray: 33;
    animation: ico-2-path-3 3s ease infinite;
}
@keyframes ico-2-path-1{
    0%{
        transform:rotate(180deg)
    }
    50%{
        transform:rotate(360deg)
    }
    to{
        transform:rotate(360deg)
    }
}
@keyframes ico-2-path-2 {
    5% {
        stroke-dashoffset: 33;
    }
    30% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ico-2-path-3 {
    25% {
        stroke-dashoffset: 33;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.ico-3 .st1{
    fill:var(--col-cat3)!important;
}
.ico-3 .st3{
    stroke-width: 0!important;
    fill:var(--col-bg)!important;
}
.ico-3 .path-1,
.ico-3 .path-2,
.ico-3 .path-3,
.ico-3 .path-4,
.ico-3 .path-5,
.ico-3 .path-6{
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: scale(0) rotate(360deg);
}
.ico-3 .path-7{
    opacity: 0;
}
.ico-3 .path-1{
    animation: ico-3-path-1 3s ease infinite;
}
.ico-3 .path-2{
    animation: ico-3-path-2 3s ease infinite;
}
.ico-3 .path-3{
    animation: ico-3-path-3 3s ease infinite;
}
.ico-3 .path-4{
    animation: ico-3-path-4 3s ease infinite;
}
.ico-3 .path-5{
    animation: ico-3-path-5 3s ease infinite;
}
.ico-3 .path-6{
    animation: ico-3-path-6 3s ease infinite;
}
.ico-3 .path-7{
    animation: ico-3-path-7 3s ease infinite;
}
@keyframes ico-3-path-1 {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-2 {
    5% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    30% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-3 {
    10% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    35% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-4 {
    15% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    40% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-5 {
    20% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    45% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-6 {
    25% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes ico-3-path-7 {
    5% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
.ico-4 .st0{
    fill:var(--col-cat4)!important;
}
.ico-4 .path-1{
    opacity: 0;
    transform: translateY(-20%);
    animation: ico-4-path-1 3s ease infinite;
}
.ico-4 .path-2{
    fill:var(--col-cat4)!important;
    stroke-dashoffset: 98;
    stroke-dasharray: 98;
    animation: ico-4-path-2 3s ease infinite;
}
@keyframes ico-4-path-1 {
    0% {
        opacity: 0;
        transform: translateY(-20%);
    }
    35% {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes ico-4-path-2 {
    25% {
        stroke-dashoffset: 98;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.ico-5 .path-1{
    fill:var(--col-cat5)!important;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: center;
    animation: ico-5-path-1 3s ease infinite;
}
.ico-5 .path-2{
    stroke-dashoffset: 83;
    stroke-dasharray: 83;
    animation: ico-5-path-2 3s ease infinite;
}
.ico-5 .path-3{
    stroke-dashoffset: 17;
    stroke-dasharray: 17;
    animation: ico-5-path-3 3s ease infinite;
}
.ico-5 .path-4{
    stroke-dashoffset: 12;
    stroke-dasharray: 12;
    animation: ico-5-path-4 3s ease infinite;
}
@keyframes ico-5-path-1 {
    20% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes ico-5-path-2 {
    0% {
        stroke-dashoffset: 83;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ico-5-path-3 {
    18% {
        stroke-dashoffset: 17;
    }
    43% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes ico-5-path-4 {
    30% {
        stroke-dashoffset: 12;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.arrow-item{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1rem 0 0 1rem;
    background: var(--col-bg);
    border-radius: 3.2rem 0 0 0;
}
.arrow-item > svg{
    width: 1.6rem;
    position: absolute;
    fill: var(--col-bg);
    transform: scale(-1,1);
}
.arrow-item .svg-1{
    top: -1.6rem;
    right: 0;
}
.arrow-item .svg-2{
    bottom: 0;
    right: 5.8rem;
}
.arrow{
    width: 4.8rem;
    height: 4.8rem;
    background: var(--col-bg3);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.arrow span{
    width: 50%;
    height: 50%;
}
.arrow span svg{
    display: block;
    width: 100%;
    height: 100%;
    position: static;
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
}
@media (min-width: 1025px){
    a:hover .arrow span svg{
        animation: link-hover 0.6s ease;
    }
    a[target="_blank"]:hover .arrow span svg{
        animation: link-hover-blank 0.4s ease;
    }
    a.doc:hover .arrow span svg{
        animation: link-hover-doc 0.6s ease;
    }
}
@keyframes link-hover {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(75%);
        opacity: 0;
    }
    51% {
        transform: translateX(-75%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes link-hover-blank {
    0% {
        transform: rotate();
    }
    100% {
        transform: rotate(180deg);
    }
}
@keyframes link-hover-doc {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-75%);
        opacity: 0;
    }
    51% {
        transform: translateY(75%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@media (max-width: 1024px){
    .mv .mv-inner{
        display: block;
        height: auto;
        max-height: none;
        min-height: auto;
    }
    .mv .main-area{
        width: 100%;
        height: 65svh;
        padding-right: 0;
        position: relative;
    }
    .mv .sub-area{
        margin-top: 2rem;
        padding-left: 0;
    }
    .mv .sub-area li {
        height: 32rem;
    }
    .mv .sub-area li .nav-box .ico {
        width: 20rem;
        padding-top: 20rem;
    }
}
@media (max-width: 767px){
    .mv .main-area{
        height: 75svh;
    }
    .mv .main-area .ttl{
        padding: 2.4rem 3.2rem 0.8rem 0.8rem;
    }
    .mv .main-area .main-area-inner::before{
        top: calc(50% - 12rem);
    }
    .mv .main-area .ttl .en{
        font-size: 4.8rem;
    }
    .mv .main-area .ttl .ja {
        font-size: 1.6rem;
    }
    .mv .sub-area ul {
        margin: -0.5rem -0.5rem;
    }
    .mv .sub-area li {
        height: 30rem;
        padding: 0.5rem 0.5rem;
    }
    .mv .sub-area li .nav-box .ico {
        width: 12rem;
        padding-top: 12rem;
        top: calc(50% + 1.6rem);
    }
    .mv .sub-area li .nav-box .arrow {
        width: 4rem;
        height: 4rem;
    }
    .mv .sub-area li .nav-box .arrow-item {
        padding: 0.8rem 0 0 0.8rem;
        border-radius: 2.8rem 0 0 0;
    }
    .mv .sub-area li .nav-box .arrow-item > svg {
        width: 1.2rem;
    }
    .mv .sub-area li .nav-box .arrow-item .svg-1 {
        top: -1.2rem;
    }
    .mv .sub-area li .nav-box .arrow-item .svg-2 {
        right: 4.8rem;
    }
    .mv .sub-area li .nav-box::before{
        right: 4.8rem;
        font-size: 1.4rem;
        padding-bottom: 1rem;
        padding-right: 1.6rem;
    }
    .mv .sub-area li .nav-box .ttl .ja.min{
        letter-spacing: 0.075em;
    }
}


/* -- section
-------------------------------------------------------------------------------- */
section{
    padding: var(--mg-l) 0;
}
section .section-inner{
    padding: 0 5%;
}
section .section-ttl{
    font-weight: normal;
}
section .section-ttl .en{
    display: block;
    font-size: 4rem;
    letter-spacing: 0.015em;
    text-indent: -0.02em;
    line-height: 1.25;
}
section .section-ttl .ja{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    margin-top: 0.4rem;
}
@media (max-width: 767px){
    section{
        padding: var(--mg-m) 0 var(--mg-l);
    }
    section .section-ttl .en{
        font-size: 3.6rem;
    }
}


/* -- home-news
-------------------------------------------------------------------------------- */
.home-news{
    padding: 0 2rem;
}
.home-news .section-inner{
    display: flex;
    background: var(--col-bg2);
    padding: var(--mg-l) calc(5vw - 2rem);
    border-radius: 2.4rem;
    position: relative;
}
.home-news .section-ttl{
    width: 35%;
    min-height: 15rem;
    margin-bottom: var(--mg-s);
}
.home-news .link-btn{
    position: absolute;
    bottom: var(--mg-l);
}
.news-item{
    flex: 1;
    position: relative;
}
.news-item .limited-note{
    margin-bottom: 2rem;
}
.news-item li + li{
    margin-top: 1rem;
}
.news-item li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    background: var(--col-bg);
    padding: 2rem 2.4rem;
    border-radius: 1.2rem;
}
.news-item li a .en{
    letter-spacing: 0.05em;
}
.news-item li a .news-item-body{
    display: flex;
    flex: 1;
    padding-right: 2rem;
}
.news-item li .date{
    display: block;
    letter-spacing: 0.05em;
    min-width: calc(8rem + 3.2rem);
    color: var(--col-bg4);
}
.news-item li .txt{
    display: block;
}
@media (max-width: 767px){
    .home-news .section-ttl{
        width: 100%;
        min-height: auto;
    }
    .home-news .section-inner {
        display: block;
        padding: var(--mg-m) 2rem var(--mg-l);
    }
    .news-item .limited-note {
        position: absolute;
        right: 0;
        top: -4.4rem;
    }
    .news-item li a .news-item-body{
        display: block;
    }
    .news-item li .date{
        margin-bottom: 0.8rem;
    }
    .home-news .link-btn{
        position: static;
        margin-top: var(--mg-m);
        justify-content: center;
    }
    .news-item .pager {
        padding-bottom: 2rem;
    }
}


/* -- home-pickup
-------------------------------------------------------------------------------- */
.home-pickup .section-inner{
    background: transparent;
    position: relative;
}
.home-pickup .news-item li a{
    background: var(--col-bg2);
}
@media (max-width: 767px){
    .home-pickup .section-ttl{
        text-align: left;
    }
}


/* -- home-procedures
-------------------------------------------------------------------------------- */
.home-procedures{
    padding: 0 2rem;
    margin-top: 2rem;
}
.home-pickup + .home-procedures{
    margin-top: 0;
}
.home-procedures .section-inner{
    padding: var(--mg-l) var(--mg-xxs) var(--mg-xxs);
    background: var(--col-bg2);
    border-radius: 2.4rem;
}
.home-procedures .section-ttl{
    margin-bottom: var(--mg-s);
    text-align: center;
}
.procedures-item ul{
    display: flex;
    flex-wrap: wrap;
    margin: -0.8rem -0.4rem 0;
}
.procedures-item li{
    width: calc(100% / 5);
    padding: 0.8rem 0.4rem 0;
    box-sizing: border-box;
}
@media (max-width: 1600px){
    .procedures-item li{
        width: calc(100% / 4);
    }
}
@media (max-width: 1200px){
    .procedures-item li{
        width: calc(100% / 3);
    }
}
.procedures-item li a{
    display: block;
    background: var(--col-bg);
    padding: 2.4rem 2.4rem calc(3.2rem + 2rem) 2.4rem;
    border-radius: 1.2rem;
    position: relative;
    transition: background 0.3s ease;
}
.procedures-item li a .cat{
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    display: flex;
}
.procedures-item li a .cat span{
    display: block;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: bold;
    padding: 0 1rem;
    border-radius: 1rem;
    color: #fff;
    background: var(--col-cat1);
    transition: color 0.3s ease, background 0.3s ease;
}
.procedures-item li.cat-2 a .cat span,
.procedures-item li.cat-human a .cat span{
    background: var(--col-cat2);
}
.procedures-item li.cat-3 a .cat span,
.procedures-item li.cat-accounting a .cat span{
    background: var(--col-cat3);
}
.procedures-item li.cat-4 a .cat span,
.procedures-item li.cat-education a .cat span{
    background: var(--col-cat4);
}
.procedures-item li a .cat.limited::after{
    content: "学内限定";
    display: block;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: bold;
    padding: 0 1rem;
    border-radius: 1rem;
    color: #fff;
    background: var(--col-bg5);
    margin-left: 0.4rem;
}
.procedures-item li a .ttl{
    display: block;
    font-size: 1.6rem;
    font-weight: normal;
    min-height: calc((1.6rem * 1.5) * 3);
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    .procedures-item li.cat-1 a:hover,
    .procedures-item li.cat-section a:hover{
        background: var(--col-cat1);
    }
    .procedures-item li.cat-1 a:hover .cat span,
    .procedures-item li.cat-section a:hover .cat span{
        color: var(--col-cat1);
    }
    .procedures-item li.cat-2 a:hover,
    .procedures-item li.cat-human a:hover{
        background: var(--col-cat2);
    }
    .procedures-item li.cat-2 a:hover .cat span,
    .procedures-item li.cat-human a:hover .cat span{
        color: var(--col-cat2);
    }
    .procedures-item li.cat-3 a:hover,
    .procedures-item li.cat-accounting a:hover{
        background: var(--col-cat3);
    }
    .procedures-item li.cat-3 a:hover .cat span,
    .procedures-item li.cat-accounting a:hover .cat span{
        color: var(--col-cat3);
    }
    .procedures-item li.cat-4 a:hover,
    .procedures-item li.cat-education a:hover{
        background: var(--col-cat4);
    }
    .procedures-item li.cat-4 a:hover .cat span,
    .procedures-item li.cat-education a:hover .cat span{
        color: var(--col-cat4);
    }
    .procedures-item li a:hover .cat span{
        background: #fff;
    }
    .procedures-item li a:hover .ttl{
        color: #fff;
    }
}
.procedures-item .arrow-item{
    background: var(--col-bg2);
}
.procedures-item .arrow-item > svg{
    width: 0.8rem;
    fill: var(--col-bg2);
}
.procedures-item .arrow-item .svg-1 {
    top: -0.8rem;
}
.procedures-item .arrow-item .svg-2{
    right: 4rem;
}
.procedures-item .arrow-item{
    padding: 0.8rem 0 0 0.8rem;
    border-radius: 2.4rem 0 0 0;
}
.procedures-item .arrow-item .arrow{
    width: 3.2rem;
    height: 3.2rem;
}
@media (min-width: 1025px){
}
@media (max-width: 767px){
    .home-procedures .section-inner{
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: var(--mg-m);
    }
    .home-procedures .section-ttl .en{
        font-size: 3.2rem;
    }
    .procedures-item li {
        width: calc(100% / 2);
    }
    .procedures-item li a {
        padding: 1.6rem 1.6rem 1.2rem 1.2rem;
        height: 100%;
        box-sizing: border-box;
    }
    .procedures-item li a .ttl {
        font-size: 1.4rem;
        min-height: calc((1.4rem * 1.5) * 2);
        padding-left: 0.4rem;
        padding-bottom: calc(2rem + 1.6rem);
    }
}


/* -- home-history
-------------------------------------------------------------------------------- */
.home-history{
    padding: 0 2rem;
}
.home-procedures + .home-history{
    margin-top: 2rem;
}
.home-history .section-inner{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.home-history .section-inner .history-item-ttl{
    width: calc(50% - 1rem);
    background: var(--col-cat5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.4rem;
    position: relative;
}
.home-history .ico-4 .st0 {
    fill: var(--col-cat5) !important;
}
.home-history .section-inner .history-item-ttl::before{
    content: "Visit";
    position: absolute;
    right: 5rem;
    bottom: 0;
    font-size: 1.6rem;
    letter-spacing: 0.015em;
    padding-right: 2rem;
    padding-bottom: 1.2rem;
}
.home-history .section-inner .history-item-ttl .txt-box{
    text-align: center;
        padding: var(--mg-xxl) 0;
}
.home-history .section-inner .history-item-ttl .txt-box .ico{
    width: 20rem;
    height: 20rem;
    margin: var(--mg-xs) auto;
}
.home-history .section-inner .history-item-ttl .txt-box .ico span{
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
    border-radius: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.home-history .section-inner .history-item-ttl .txt-box .ico span svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (min-width: 1025px){
    .home-history .section-inner .history-item-ttl:hover .txt-box .ico span{
        transform: scale(1.13);
    }
}
.home-history .section-inner .history-item-ttl .txt-box .ico span svg path,
.home-history .section-inner .history-item-ttl .txt-box .ico span svg line,
.home-history .section-inner .history-item-ttl .txt-box .ico span svg circle{
    fill:none;
    stroke:var(--col-bg);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}
.home-history .section-inner .history-item-ttl .txt-box p{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2;
}
.home-history .section-inner .history-item-img{
    width: calc(50% - 1rem);
    border-radius: 2.4rem;
    overflow: hidden;
    position: relative;
}
.home-history .section-inner .history-item-img .img-switch{
    width: 100%;
    height: 100%;
}
.home-history .section-inner .history-item-img span{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.home-history .section-inner .history-item-img span img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1024px){
    .home-history .section-inner .history-item-ttl .txt-box{
            padding: var(--mg-l) 0 var(--mg-xl);
    }
}
@media (max-width: 767px){
    .home-history .section-inner {
        display: block;
    }
    .home-history .section-inner .history-item-img {
        width: 100%;
        height: calc((100vw - 4rem) * 0.5625);
        border-radius: 2.4rem 2.4rem 0 0;
    }
    .home-history .section-inner .history-item-ttl{
        width: 100%;
        border-radius: 0 0 2.4rem 2.4rem;
        margin-top: 0;
    }
    .home-history .section-inner .history-item-ttl .txt-box{
        padding-top: var(--mg-s);
        padding-bottom: var(--mg-xl);
    }
    .home-history .section-inner .history-item-ttl .txt-box .ico {
        width: 16rem;
        height: 16rem;
        margin: var(--mg-xxs) auto;
    }
}


/* -- home-ex-links
-------------------------------------------------------------------------------- */
.home-ex-links{
    padding: 2rem 0 0;
}
.home-ex-links .section-inner{
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
}
.home-ex-links .link-box{
    width: calc(50% - 1rem);
    position: relative;
}
.home-ex-links .link-box::before{
    content: "Visit";
    position: absolute;
    right: 5rem;
    bottom: 0;
    font-size: 1.6rem;
    letter-spacing: 0.015em;
    color: var(--col-bg3);
    padding-right: 2rem;
    padding-bottom: 1.2rem;
    z-index: 1;
    pointer-events: none;
    transition: color 0.15s ease;
}
.home-ex-links a{
    display: block;
    padding: var(--mg-xxl) 0;
    text-align: center;
    background: var(--col-bg2);
    border-radius: 2.4rem 2.4rem 0 2.4rem;
    overflow: hidden;
    position: relative;
    transition: color 0.15s ease;
}
.home-ex-links a::before{
    content: "";
    display: block;
    background: url(../img/img_map.jpg) no-repeat center;
    background-size: cover;
    transform: scale(1.04);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.6s ease;
}
.home-ex-links a::after{
    content: "";
    display: block;
    background: var(--col-bg3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.home-ex-links .link-box + .link-box a::before{
    background-image: url(../img/img_access.jpg);
}
@media (min-width: 1025px){
    .home-ex-links .link-box:hover::before{
        color: #fff;
    }
    .home-ex-links a:hover{
        color: #fff;
    }
    .home-ex-links a:hover::before{
        opacity: 1;
        transform: scale(1);
    }
    .home-ex-links a:hover::after{
        opacity: 0.3;
    }
}
.home-ex-links .section-ttl{
    padding: 0 0 0.8rem;
    position: relative;
    z-index: 1;
}
.home-ex-links .section-ttl .en{
    font-size: 3.6rem;
}
.home-ex-links .arrow-item{
    z-index: 1;
}
@media (max-width: 1024px){
    .home-ex-links a {
        padding: var(--mg-xl) 0;
    }
    .home-ex-links .link-box::before{
        color: #fff;
    }
    .home-ex-links a{
        color: #fff;
    }
    .home-ex-links a::before{
        opacity: 1;
        transform: scale(1);
    }
    .home-ex-links a::after{
        opacity: 0.3;
    }
}
@media (max-width: 767px){
    .home-ex-links a {
        padding: var(--mg-l) 0;
    }
    .home-ex-links .section-ttl .en {
        font-size: 3.2rem;
    }
    .home-ex-links .section-inner{
        display: block;
    }
    .home-ex-links .link-box {
        width: 100%;
    }
    .home-ex-links .link-box + .link-box {
        margin-top: 2rem;
    }
}


/* -- home-links
-------------------------------------------------------------------------------- */
.links-item{
    width: calc(50% - 1rem);
    margin-left: auto;
}
.links-item ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: -1.6rem;
}
.links-item ul li{
    width: 50%;
    margin-top: 1.6rem;
}
.links-item ul li a{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}
.links-item ul li a span{
    display: inline-block;
    position: relative;
}
.links-item ul li a span::after{
    content: "";
    display: block;
    width: 0%;
    border-bottom: solid 1px;
    position: absolute;
    left: auto;
    right: 0;
    transition: 0.3s ease;
}
@media (min-width: 1025px){
    .links-item ul li a:hover{
        color: var(--col-bg6);
    }
    .links-item ul li a:hover span::after{
        width: 100%;
        left: 0;
        right: auto;
    }
}
@media (max-width: 767px){
    .home-links .section-inner{
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .links-item {
        width: 100%;
        margin-left: 0;
        margin-top: var(--mg-m);
    }
}


/* -- page
-------------------------------------------------------------------------------- */
.page .head{
    padding: 0 2rem 2rem;
}
.page .head .head-inner{
    background: var(--col-cat1);
    border-radius: 2.4rem;
    height: 32rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.page.page-human .head .head-inner{
    background: var(--col-cat2);
}
.page.page-accounting .head .head-inner{
    background: var(--col-cat3);
}
.page.page-education .head .head-inner{
    background: var(--col-cat4);
}
.page .head .ttl{
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}
.page .head .ttl .ja{
    display: block;
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    line-height: 1;
    font-weight: normal;
}
.page .head .ttl .en{
    display: block;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.015em;
    font-weight: normal;
    margin-top: 1.2rem;
}
.page .head .ico{
    width: 20rem;
    height: 20rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 100%;
    position: absolute;
    right: 4.8rem;
    top: 50%;
    transform: translateY(-50%);
}
.page .head .ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.page .body {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}
.page .body .body-inner {
    padding: 0 2rem;
}
.limited-note {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.limited-note .ico {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_limited.svg) no-repeat center;
    background-size: cover;
    background-color: var(--col-bg5);
    border-radius: 100%;
}
.limited-note .txt {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-left: 1rem;
    transform: translateY(1px);
}
.page .list-item-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: -2rem -1rem 0;
}
.page .list-item {
    width: calc(100% / 3);
    margin-top: 2rem;
    padding: 0 1rem;
    box-sizing: border-box;
}
@media (max-width: 1800px){
    .page .list-item {
        width: 50%;
    }
}
.page .list-item .list-item-inner {
    height: 100%;
    background: var(--col-bg);
    box-sizing: border-box;
    border-radius: 1.6rem;
    position: relative;
}
.page .list-item .list-item-inner figure {
    width: 100%;
    height: 100%;
    border-radius: 1.6rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.page .list-item .list-item-inner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.number-item {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0 1rem 1rem;
    background: var(--col-bg2);
    border-radius: 0 0 0 3.2rem;
}
.number-item .number {
    width: 4.8rem;
    height: 4.8rem;
    background: var(--col-cat1);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page.page-human .number-item .number{
    background: var(--col-cat2);
}
.page.page-accounting .number-item .number{
    background: var(--col-cat3);
}
.page.page-education .number-item .number{
    background: var(--col-cat4);
}
.number-item .number span {
    font-size: 1.4rem;
    letter-spacing: 0.075em;
    font-weight: bold;
    color: #fff;
}
.number-item svg{
    width: 1.6rem;
    position: absolute;
    fill: var(--col-bg2);
    transform: scale(-1,-1);
}
.number-item .svg-1{
    top: 0;
    right: 5.8rem;
}
.number-item .svg-2{
    bottom: -1.6rem;
    right: 0;
}
.page .list-item .list-item-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.page .list-item .ttl {
    font-size: 2rem;
    letter-spacing: 0.15em;
    font-weight: normal;
    padding: var(--mg-xs) calc(var(--mg-xs) + 5.8rem) var(--mg-xs) var(--mg-xs);
    border-bottom: solid 1px rgba(0,0,0,0.1);
}
.page .list-item ul {
    padding: var(--mg-xxs);
}
.page .list-item li {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}
.page .list-item li + li {
    margin-top: 1.2rem;
}
.page .list-item li a {
    display: flex;
    align-items: center;
}
.page .list-item li a .txt {
    margin-right: 2rem;
    flex: 1;
}
.page .list-item li a .arrow,
.news-item li a .arrow {
    width: 3.2rem;
    height: 3.2rem;
    position: relative;
}
.page .list-item li a.limited .arrow::before,
.news-item li a.limited .arrow::before,
.article .links a.limited .arrow::before  {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 100%;
    background: url(../img/ico_limited.svg) no-repeat center;
    background-size: cover;
    background-color: var(--col-bg5);
    position: absolute;
    right: -0.7rem;
    top: -0.7rem;
}
.page .list-item li a .arrow span,
.news-item li a .arrow span {
    transform: none;
}
.page .body .contents {
    background: var(--col-bg);
}
.page .body .contents .contents-inner {
    background: var(--col-bg2);
    padding: var(--mg-xxs);
    border-radius: 2.4rem;
}
.page .body .contents .ttl-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}
.page .body .contents .ttl-wrap .ttl {
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 0.015em;
}
.page .body .contact {
    padding: var(--mg-l) 5vw var(--mg-xl);
}
.page .body .contact .section-ttl .ja{
    font-size: 2.4rem;
    line-height: 1.25;
    letter-spacing: 0.1em;
    margin-top: 0;
}
.page .body .contact .section-ttl .en{
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-top: 0.8rem;
}
.page .body .contact .contact-list {
    margin-top: var(--mg-l);
}
.page .body .contact .contact-list ul {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--mg-xxs)) -1.5vw 0;
}
.page .body .contact .contact-list li {
    width: 50%;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    box-sizing: border-box;
    margin-top: var(--mg-xxs);
}
.page .body .contact .contact-list-item {
    border-bottom: solid 1px var(--col-bg4);
    padding-bottom: 2rem;
}
.page .body .contact .contact-list-item .contact-ttl {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin-bottom: 1.6rem;
}
.page .body .contact .contact-list-item p {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}
.page .body .contact .contact-list-item p + p {
    margin-top: 0.4rem;
}
.page .body .contact .contact-list-item a {
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    .page .body .contact .contact-list-item a:hover {
        color: var(--col-bg6);
    }
}
@media (max-width: 767px){
    .page .head .head-inner {
        height: auto;
        padding: 4rem 3.2rem calc(12.4rem + 2.4rem);
        display: block;
    }
    .page .head .ttl{
        text-align: left;
    }
    .page .head .ttl .ja {
        font-size: 2.8rem;
    }
    .page .head .ttl .en {
        font-size: 1.4rem;
    }
    .page .head .ico {
        width: 10rem;
        height: 10rem;
        right: 2.4rem;
        top: auto;
        bottom: 2.4rem;
        transform: none;
    }
    .page .body .contents .contents-inner {
        padding: 2rem;
    }
    .page .list-item-wrap {
        display: block;
        margin: 0;
    }
    .page .list-item {
        width: 100%;
        padding: 0;
    }
    .page .list-item:first-child{
        margin-top: 0;
    }
    .page .list-item ul {
        padding: 2.4rem;
    }
    .page .list-item li + li {
        margin-top: 2rem;
    }
    .page .body .contact {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .page .body .contact .contact-list {
        margin-top: var(--mg-m);
    }
    .page .body .contact .contact-list ul {
        display: block;
        margin: 0;
    }
    .page .body .contact .contact-list li{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .page .body .contact .contact-list li:first-child{
        margin-top: 0;
    }
}


/* -- breadcrumbs
-------------------------------------------------------------------------------- */
.breadcrumbs{
    background: var(--col-bg);
    border-radius: 0 1.2rem 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
.breadcrumbs svg{
    width: 2rem;
    height: 2rem;
    fill: var(--col-bg);
    position: absolute;
}
.breadcrumbs .svg-1{
    top: -2rem;
    left: 0;
}
.breadcrumbs .svg-2{
    bottom: 0;
    right: -2rem;
}
.breadcrumbs ul{
    padding: 1.2rem 1.2rem 0 0;
    display: flex;
}
.breadcrumbs li + li{
    margin-left: 0.6rem;
}
.breadcrumbs li a,
.breadcrumbs li p{
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    padding: 0.8rem 1.4rem;
    border-radius: 0.6rem;
}
.breadcrumbs li a{
    display: block;
    background: var(--col-bg3);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}
.breadcrumbs li p{
    background: var(--col-bg2);
    color: var(--col-bg4);
    max-width: 25.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}
@media (max-width: 767px){
    .breadcrumbs li a,
    .breadcrumbs li p{
        font-size: 1.11111111rem;
        padding: 0.6rem 1rem;
        border-radius: 0.4rem;
    }
    .breadcrumbs li a {
        max-width: 5.8em;
    }
    .breadcrumbs li p{
        max-width: 10.5em;
    }
}


/* -- page-details
-------------------------------------------------------------------------------- */
.page.page-details .head{
}
.page.page-details .body {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}
.page.page-details .page-ttl-wrap {
    padding: 2.4rem 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page.page-details .page-ttl-wrap .page-ttl {
    font-size: 2rem;
    letter-spacing: 0.1em;
    font-weight: normal;
    line-height: 3.5rem;
}
.page.page-details .content-wrap.flex {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    position: relative;
}
.page.page-details .page-ttl-wrap + .content-wrap {
    margin-top: 0;
}
.page.page-details .sub-area {
    width: 20%;
    min-width: 32rem;
    box-sizing: border-box;
    padding: 0 2rem 2rem;
    border-radius: 0;
    margin-top: 0;
    background: transparent;
    position: sticky;
    top: 11rem;
    transition: top 0.3s ease;
}
header.hide + .page.page-details .sub-area {
    top: 2rem;
}
.page.page-details .sub-area .page-ttl {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin-bottom: 2rem;
    display: none;
}
.page.page-details .sub-area.list-item ul {
    display: block;
    min-height: auto;
    padding: 3.2rem 2.4rem;
    background: var(--col-bg2);
    border-radius: 1.6rem;
}
.page.page-details .sub-area.list-item li + li {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: solid 1px rgba(0,0,0,0.1);
}
.page.page-details .sub-area.list-item li a .txt {
    font-size: 1.3rem;
    text-align: left;
}
.page.page-details .main-area {
    flex: 1;
    position: relative;
}
.page.page-details .main-area .main-area-inner {
    padding: var(--mg-xl) 5vw var(--mg-xxl);
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
.page.page-details .page-ttl-wrap + .content-wrap .main-area .main-area-inner {
    padding-top: calc(var(--mg-xl) - 8.3rem);
}
.page.page-details .content-wrap .main-area .main-area-inner > .limited{
    display: block;
    margin-bottom: 2.4rem;
}
.page.page-details .content-wrap .main-area .main-area-inner > .limited::before{
    content: "学内限定";
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 2.4rem;
    font-weight: bold;
    padding: 0 1.2rem;
    border-radius: 1.2rem;
    color: #fff;
    background: var(--col-bg5);
}
.page.page-details .content-wrap .main-area .main-area-inner.en > .limited::before{
    content: "On-Campus Only";
    letter-spacing: 0;
}
.page.page-details .content-wrap .main-area .main-area-inner > .dete.limited::before{
    margin-right: 1.6rem;
}
.page.page-details .content-wrap .main-area .limited + .ttl{
    margin-top: 0;
}
.page.page-details .link-btn{
    justify-content: center;
    border-top: solid 1px rgba(0,0,0,0.1);
    padding: var(--mg-s) 5vw;
}
.page.page-details .lang{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}
.page.page-details .lang dt{
    font-size: 1.4rem;
    letter-spacing: 0.015em;
    color: var(--col-bg4);
    margin-right: 1.2rem;
}
.page.page-details .lang dd{
    position: relative;
}
.page.page-details .lang dd ul{
    display: flex;
}
.page.page-details .lang dd li + li{
    margin-left: 0.6rem;
}
.page.page-details .lang dd li a,
.page.page-details .lang dd li p{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.015em;
    border: solid 1px var(--col-bg3);
    padding: 0.6rem 0;
    border-radius: 1.8rem;
    text-align: center;
    width: 4.8rem;
    transition: background 0.15s ease;
}
.page.page-details .lang dd li p{
    background: var(--col-bg3);
    color: #fff;
    font-weight: bold;
}
@media (min-width: 1025px) {
    .page.page-details .lang dd li a:hover{
        background: var(--col-bg2);
    }
}
@media (max-width: 767px){
    .page.page-details .page-ttl-wrap{
        padding-left: 5%;
        padding-right: 5%;
    }
    .page.page-details .page-ttl-wrap .page-ttl{
        font-size: 1.8rem;
    }
    .page.page-details .content-wrap.flex {
        display: block;
    }
    .page.page-details .sub-area{
        width: 100%;
        padding: 2.4rem 5%;
        border-top: solid 1px rgba(0, 0, 0, 0.1);
    }
    .page.page-details .sub-area .page-ttl {
        display: block;
    }
    .page.page-details .sub-area.list-item li a .txt {
        font-size: 1.5rem;
    }
    .page.page-details .main-area .main-area-inner {
        padding-top: var(--mg-l);
        padding-bottom: var(--mg-xl);
    }
    .page.page-details .content-wrap .main-area .main-area-inner > .limited {
        margin-bottom: 1.6rem;
    }
    .page.page-details .lang dt {
        display: none;
    }
}


/* -- page-history
-------------------------------------------------------------------------------- */
.page-history .head{
    padding-bottom: 0;
}
.page-history .head .head-inner{
    display: block;
    height: auto;
    background: var(--col-cat5);
    padding: var(--mg-xxxl) 0 0;
}
.page-history .head .section-ttl{
    color: #fff;
    padding: 0 7.5vw;
}
.page-history .head .section-ttl .en{
    font-size: 6rem;
}
.page-history .head .section-ttl .ja{
    font-size: 1.6rem;
}
.page-history .head .ico-wrap{
    position: absolute;
    top: 4.8rem;
    right: 4.8rem;
}
.page-history .head .ico-wrap .ico{
    position: relative;
    width: 12rem;
    height: 12rem;
    top: 0;
    right: 0;
    transform: none;
}
.page-history .head .ico-wrap .ico span{
    display: block;
}
.page-history .head .ico-wrap p{
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
    margin-top: 1.2rem;
}
.page-history .head figure{
    margin-top: var(--mg-l);
    overflow: hidden;
    position: relative;
    border-radius: 0 0 2.4rem 2.4rem;
}
.page-history .head figure .figure-inner{
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.page-history .head figure.active .figure-inner{
    opacity: 1;
}
.page-history .head figure ul{
    display: flex;
    animation: figure-loop 90s linear infinite;
}
@keyframes figure-loop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.page-history .head figure li{
    width: calc(100vw / 4.5);
    padding: 0 1rem;
    box-sizing: border-box;
}
.page-history .head figure li:nth-child(3n){
    width: calc(100vw / 5);
}
.page-history .head figure li:nth-child(even){
    width: calc(100vw / 3.5);
}
.page-history .head figure li span{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 1.6rem 1.6rem 0 0;
}
.page-history .head figure li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-history .body{
    padding-bottom: 2rem;
}
.page-history .article-inner{
    padding: var(--mg-xl) 5vw var(--mg-xl);
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
.history-item{
    background: var(--col-bg2);
    border-radius: 2.4rem;
}
.history-item .history-item-inner{
    padding: var(--mg-l) 5vw var(--mg-xl);
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
.article .history-item dl{
    position: relative;
    padding-bottom: var(--mg-s);
}
.article .history-item dl::before{
    content: "";
    display: block;
    height: calc(100% - 8rem);
    border-left: solid 1px rgba(0,0,0,0.1);
    position: absolute;
    top: 8rem;
    left: 20%;
}
.article .history-item dl .line{
    display: block;
    height: calc(100% - 8rem);
    position: absolute;
    top: 8rem;
    left: 20%;
}
.article .history-item dl .line span{
    display: block;
    height: 0;
    border-left: solid 1px #5a795a;
}
.article .history-item dl::after{
    content: "";
    display: block;
    width: 2rem;
    height: 0.6rem;
    border-top: solid 0.6rem var(--col-bg2);
    border-bottom: solid 0.6rem var(--col-bg2);
    position: absolute;
    bottom: 0.6rem;
    left: calc(20% - 1rem);
}
.article .history-item dl div{
    border-bottom: none;
    position: relative;
    z-index: 1;
}
.article .history-item dl div:first-child{
    border-top: none;
}
.article .history-item dl dt{
    width: 40%;
    padding: 0;
}
.article .history-item dl dt > span{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 16rem;
    height: 16rem;
    border: solid 1px rgba(0,0,0,0.1);
    border-radius: 100%;
    padding: 0;
    margin: 0 auto;
    background: var(--col-bg2);
    position: relative;
}
.article .history-item dl dt .en{
    display: block;
    font-size: 2rem;
    letter-spacing: 0.1em;
    line-height: 1;
    height: calc(2rem * 1);
    overflow: hidden;
    position: relative;
    font-weight: normal;
}
.article .history-item dl dt .en span{
    display: block;
}
.article .history-item dl dt span.show .en span{
    animation: txt-slide 1s ease;
}
@keyframes txt-slide {
    0% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}
.article .history-item dl dt .en sup{
    font-size: 1rem;
}
.article .history-item dl dt .ja{
    display: block;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    font-weight: normal;
    margin-top: 0.4rem;
    color: var(--col-bg3);
}
.article .history-item dl dt svg{
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -1px;
    right: 0;
    bottom: 0;
    transform: rotate(-90deg);
}
.article .history-item dl dt span svg circle{
    fill: none;
    stroke: #5a795a;
    stroke-dashoffset: 506;
    stroke-dasharray: 506;
}
.article .history-item dl dt span.show svg circle{
    animation: path-offset 1s ease forwards;
}
@keyframes path-offset {
    0% {
        stroke-dashoffset: 506;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.article .history-item dl dd{
    display: flex;
    flex-direction: column;
    min-height: calc(16.2rem + 4rem);
    box-sizing: border-box;
    justify-content: center;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    padding: var(--mg-m) 0;
}
.article .history-item dl div:first-child dd{
    border-top: none;
}
.article .history-item dl dd p{
    opacity: 0;
    transform: translateY(4rem);
    transition: 1s ease;
}
.article .history-item dl div.show dd p{
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 767px){
    .page-history .head .head-inner{
        padding-top: var(--mg-xxl);
    }
    .page-history .head .ico-wrap {
        top: 2.4rem;
        right: 2.4rem;
    }
    .page-history .head .ico-wrap .ico {
        width: 8rem;
        height: 8rem;
    }
    .page-history .head .ico-wrap p {
        font-size: 1.2rem;
        margin-top: 0.8rem;
    }
    .page-history .head .section-ttl .en {
        font-size: 5rem;
    }
    .page-history .head figure ul {
        animation-duration: 60s;
    }
    .page-history .head figure li{
        width: calc(200vw / 4.5);
    }
    .page-history .head figure li:nth-child(3n){
        width: calc(200vw / 5);
    }
    .page-history .head figure li:nth-child(even){
        width: calc(200vw / 3.5);
    }
    .page-history .article {
        font-size: 1.5rem;
    }
    .page-history .article-inner {
        padding: var(--mg-l) 2rem;
    }
    .history-item .history-item-inner {
        padding: 2rem 3.2rem var(--mg-m);
    }
    .article .history-item dl {
        padding-bottom: 2rem;
    }
    .article .history-item dl::before {
        left: 6rem;
    }
    .article .history-item dl .line{
        left: 6rem;
    }
    .article .history-item dl::after {
        left: calc(6rem - 1rem);
    }
    .article .history-item dl div {
        display: flex;
    }
    .article .history-item dl dt {
        width: 12rem;
        margin-bottom: 0;
        margin-right: 2.4rem;
    }
    .article .history-item dl dt .en {
        font-size: 1.8rem;
        height: calc(1.8rem * 1);
    }
    .article .history-item dl dt .ja {
        font-size: 1.1rem;
    }
    .article .history-item dl dt > span {
        width: 12rem;
        height: 12rem;
    }
    .article .history-item dl dd {
        padding: var(--mg-xxs) 0;
    }
}


/* -- page-news-index
-------------------------------------------------------------------------------- */
.page-news-index .head .head-inner{
    display: block;
    background: transparent;
    border-radius: 0;
    height: auto;
}
.page-news-index .head .section-ttl{
    text-align: center;
    padding: var(--mg-l) 0 var(--mg-m);
}
.page-news-index .head .section-ttl .en{
    font-size: 4.8rem;
}
.page-news-index .head .section-ttl .ja{
    font-size: 1.6rem;
}
.page-news-index .body{
    padding-bottom: 2.4rem;
}
.page-news-index .news-item-wrap {
    background: var(--col-bg2);
    border-radius: 2.4rem;
}
.page-news-index .news-item .news-item-inner {
    padding: var(--mg-l) 5vw var(--mg-xl);
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px){
    .page-news-index .head .head-inner {
        padding: 0;
    }
    .page-news-index .head .section-ttl {
        padding: var(--mg-s) 0 var(--mg-xl);
    }
    .page-news-index .head .section-ttl .en {
        font-size: 4rem;
    }
    .page-news-index .news-item .limited-note{
        position: static;
    }
    .page-news-index .news-item .news-item-inner {
        padding: 2rem;
    }
}


/* -- pager
-------------------------------------------------------------------------------- */
.pager {
    display: flex;
    justify-content: center;
    margin-top: var(--mg-l);
}
.pager .prev,
.pager .next {
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    transition: 0.15s ease;
}
.pager .prev.hide,
.pager .next.hide {
    opacity: 0;
    visibility: hidden;
}
.pager .prev {
    margin-right: 1rem;
}
.pager .next {
    margin-left: 1rem;
}
.pager a .ico {
    width: 2rem;
    height: 2rem;
}
.pager .arrow{
    background: transparent;
    box-sizing: border-box;
    border: solid 1px var(--col-bg3);
}
.pager .arrow span svg{
    stroke: var(--col-bg3);
}
.pager .prev .arrow{
    transform: scale(-1,1);
}
.pager ul {
    display: flex;
}
.pager ul li {
    font-size: 1.6rem;
}
.pager ul li span{
    display: flex;
    align-items: center;
    height: 100%;
}
.pager ul li + li {
    margin: 0 0 0 1rem;
}
.pager ul li a,
.pager ul li p {
    padding: 0;
    letter-spacing: 0;
    font-size: 1.6rem;
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: solid 1px transparent;
    box-sizing: border-box;
    background: transparent;
}
.pager ul li a {
    transition: 0.15s ease;
}
@media (min-width: 1025px){
    .pager ul li a:hover,
    .pager ul li a:hover {
        border-color: var(--col-bg3);
    }
}
.pager ul li p {
    font-weight: bold;
    background: var(--col-bg6);
    border-color: var(--col-bg6);
    color: #fff;
}
@media (max-width: 767px) {
    .pager {
        margin-top: var(--mg-s);
    }
}



/* -- page-news
-------------------------------------------------------------------------------- */
.page-news .head{
    padding-top: 2rem;
}
.page-news .head .head-inner{
    display: block;
    background: transparent;
    height: auto;
}
.page-news .breadcrumbs{
    position: relative;
}
.page-news .breadcrumbs ul{
    padding: 0;
}
.page-news .dete{
    letter-spacing: 0.05em;
    color: var(--col-bg4);
    margin-bottom: 2.4rem;
}
.page-news .dete span{
    display: inline-block;
    transform: translateY(2px);
}
.page-news .article .dete + .ttl{
    margin-top: 0;
}
@media (max-width: 767px){
    .page-news .head .head-inner {
        padding: 0;
    }
}


/* -- page-search
-------------------------------------------------------------------------------- */
.page-search .head .head-inner{
    background: transparent;
    border-radius: 0;
    height: auto;
}
.page-search .head .section-ttl{
    text-align: center;
    padding: var(--mg-l) 0 var(--mg-m);
}
.page-search .head .section-ttl .en{
    font-size: 4.8rem;
}
.page-search .head .section-ttl .ja{
    font-size: 1.6rem;
}
.page.page-details.page-search .main-area .main-area-inner {
    max-width: 100rem;
}
.page-search .search-item dl{
    display: flex;
    align-items: center;
}
.page-search .search-item dl dt{
    font-size: 1.6rem;
    letter-spacing: 0.015em;
    padding-right: 1.6rem;
}
.page-search .search-item dl dd{
    position: relative;
    flex: 1;
}
.page-search .search-item dl dd .input-item{
    display: block;
}
.page-search .search-item dl dd .input-item input{
    border: solid 1px;
    font-size: 2rem;
    letter-spacing: 0.015em;
    height: 8rem;
    border-radius: 4rem;
    padding-right: calc(8rem + 4rem);
    padding-left: 3.2rem;
}
.page-search .search-item .search .search-btn{
    width: 8rem;
    height: 8rem;
}
.page-search .search-item .search .search-btn svg {
    width: 3.2rem;
    height: 3.2rem;
}
.page-search .search-item .search .reset-btn {
    width: 3.2rem;
    height: 8rem;
    position: absolute;
    top: 50%;
    right: 8rem;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page-search .search-item .search .reset-btn.hide {
    display: none;
}
.page-search .search-item .search .reset-btn::before,
.page-search .search-item .search .reset-btn::after {
    content: "";
    display: block;
    width: 2.8rem;
    border-top: solid 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.page-search .search-item .search .reset-btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
.page-search .search-item .result{
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    border-bottom: solid 1px;
    padding-bottom: 0.4rem;
    margin-top: var(--mg-xl);
}
.page-search .search-item .result span{
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: 0.1em;
}
.page-search .news-item {
    margin-top: var(--mg-s);
}
.page-search .news-item li a {
    background: var(--col-bg2);
}
.page-search .news-item li a .news-item-body{
    display: block;
}
.page-search .news-item li .cat {
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--col-bg4);
    margin-top: 0.8rem;
}
.news-item .note,
.page .body .contents .contents-inner .note {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    color: var(--col-bg4);
}
@media (max-width: 767px){
    .page-search .head .head-inner{
        padding: 0;
    }
    .page-search .head .section-ttl {
        padding: var(--mg-s) 0 var(--mg-xl);
    }
    .page-search .head .section-ttl .en {
        font-size: 4rem;
    }
    .page-search .search-item .result {
        margin-top: var(--mg-l);
    }
    .page-search .search-item dl dd .input-item input {
        font-size: 1.6rem;
        height: 6rem;
        border-radius: 3rem;
        padding-right: calc(6rem + 4rem);
        padding-left: 2.4rem;
    }
    .page-search .search-item .search .search-btn {
        width: 6rem;
        height: 6rem;
    }
    .page-search .search-item .search .reset-btn {
        width: 3.2rem;
        height: 6rem;
        right: 6rem;
    }
    .page-search .search-item .search .reset-btn::before, 
    .page-search .search-item .search .reset-btn::after {
        width: 2.4rem;
    }
    .page-search .search-item .search .search-btn svg {
        width: 2.4rem;
        height: 2.4rem;
    }
}


/* -- link-btn
-------------------------------------------------------------------------------- */
.link-btn{
    display: flex;
    justify-content: flex-start;
}
.link-btn a{
    min-width: 25rem;
    height: 6rem;
    font-size: 1.6rem;
    letter-spacing: 0.015em;
    background: var(--col-bg3);
    color: #fff;
    box-sizing: border-box;
    padding: 0 1rem 0 3.2rem;
    border-radius: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.link-btn a .txt{
    display: block;
    padding-right: 2.4rem;
    padding-bottom: 0.1rem;
}
.link-btn a .arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: var(--col-bg6);
}
.link-btn a .ico{
    display: block;
    width: 2rem;
    height: 2rem;
}
.link-btn a .ico svg{
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    background: #4b4b4b;
    color: #fff;
    padding: var(--mg-s) 0 var(--mg-m);
}
footer .footer-inner{
    padding: 0 3%;
}
footer .body{
    display: flex;
    justify-content: space-between;
}
footer .ttl .en{
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.015em;
    text-indent: -0.02em;
    font-weight: normal;
}
footer .ttl .en span{
    display: block;
}
footer .nav ul{
    display: flex;
}
footer .nav li{
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
footer .nav li + li{
    margin-left: 3.2rem;
}
footer .nav li a{
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    footer .nav li a:hover{
        color: var(--col-bg6);
    }
}
footer .foot{
    margin-top: var(--mg-m);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
footer .address .ja{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    font-weight: normal;
    margin-bottom: 1.6rem;
}
footer .address p{
    font-size: 1.3rem;
    letter-spacing: 0.1em;
}
footer .address p + p{
    margin-top: 0.8rem;
}
footer .address a{
    transition: 0.15s ease;
}
footer .address a:hover{
    color: var(--col-bg6);
}
footer .copyright{
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    opacity: 0.5;
}
@media (min-width: 1025px){
}
@media (max-width: 767px){
    footer .footer-inner {
        padding: 0 5%;
    }
    footer .nav ul{
        display: block;
        text-align: right;
    }
    footer .nav li + li{
        margin-left: 0;
        margin-top: 1.6rem;
    }
    footer .foot{
        display: block;
        margin-top: var(--mg-s);
    }
    footer .copyright{
        margin-top: var(--mg-l);
        text-align: right;
    }
}


/* -- article
-------------------------------------------------------------------------------- */
.article {
    font-size: 1.6rem;
}
.article hr {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.2rem;
    background: rgba(0,0,0,0.1);
    border: none;
    margin-top: var(--mg-l);
    margin-bottom: var(--mg-l);
}
.article .ttl {
    font-size: 2.2rem;
    font-size: 1.375em;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-top: var(--mg-l);
    margin-bottom: var(--mg-xs);
    position: relative;
}
.article .ttl.max {
    font-size: 2.8rem;
    font-size: 1.75em;
    margin-top: var(--mg-l);
    margin-bottom: var(--mg-m);
}
.article .ttl.sub {
    font-size: 1.8rem;
    font-size: 1.125em;
    font-weight: bold;
    margin-top: var(--mg-m);
    margin-bottom: 1.2rem;
    margin-bottom: 0.75em;
    padding-left: 2.4rem;
    position: relative;
}
.article .ttl.sub::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    background: var(--col-bg6);
    position: absolute;
    top: 0.5rem;
    left: 0;
}
.article .ttl.min {
    font-size: 1.6rem;
    font-size: 1em;
    font-weight: bold;
    margin-top: var(--mg-xxs);
    margin-bottom: 1.2rem;
    margin-bottom: 0.75em;
}
.article .lead {
    margin-top: var(--mg-s);
}
.article .lead p {
    font-size: 1.6rem;
    font-size: 1em;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: justify;
}
.article .lead p + p {
    margin-top: 1.5em;
}
.article :not(.links) a {
    border-bottom: solid 1px;
    transition: color 0.1s ease;
}
@media (min-width: 1025px){
    .article :not(.links) a:hover {
        color: var(--col-bg6);
    }
}
.article .group {
    font-size: 1.5rem;
    background: var(--col-bg2);
    padding: var(--mg-m) var(--mg-m);
    border-radius: 1.6rem;
    margin-top: var(--mg-m);
}
.article dl + .group {
    margin-top: var(--mg-l);
}
.article sup {
    line-height: 1;
}
.article .note {
    margin-top: var(--mg-xxs);
}
.article .note p {
    font-size: 1.3rem;
    font-size: 0.8125em;
    letter-spacing: 0.05em;
    text-align: justify;
    color: var(--col-bg4);
    padding-left: 1.05em;
    text-indent: -1.05em;
}
.article .note p::before {
    content: "※";
}
.article .note p + p {
    margin-top: 0.5em;
}
.article .note.info {
    font-size: 1em;
    letter-spacing: 0.1em;
    color: var(--col-bg4);
}
.article .img-wrap {
    margin: var(--mg-l) 0;
}
.article .img-wrap.flex {
    display: flex;
    justify-content: space-between;
}
.article .img-wrap.flex .img-flex-inner {
    width: calc(50% - 2rem);
}
.article .img {
    overflow: hidden;
    border-radius: 1.6rem;
    position: relative;
}
.article .img-wrap.min {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.article .img-wrap.min.max-min {
    width: 30%;
}
.article .img img {
    width: 100%;
}
.article .img-wrap p {
    font-size: 1.3rem;
    font-size: 0.8125em;
    letter-spacing: 0.05em;
    color: var(--col-bg4);
    margin-top: 2.4rem;
}
.article .img-wrap .video {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
.article .img-wrap iframe,
.article .img-wrap video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.article .img-wrap video{
    object-fit: cover;
}
.article .movie {
    overflow: hidden;
    border-radius: 1.6rem;
    position: relative;
    margin: var(--mg-l) 0;
    padding-top: 56.25%;
}
.article .movie iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.article ul {
    margin-top: var(--mg-s);
}
.article ul li {
    font-size: 1em;
    letter-spacing: 0.05em;
    padding-left: 2.6rem;
    margin-top: 1.2rem;
    margin-top: 0.75em;
    position: relative;
}
.article ul li::before {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    background: #999;
    border-radius: 100%;
    position: absolute;
    top: 0.6em;
    left: 0.4rem;
}
.article ul.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -1.2rem!important;
    margin-top: -0.75em!important;
}
.article ul.flex li {
    font-size: 15rem;
    font-size: 0.9375em;
    width: 47.5%;
    box-sizing: border-box;
}
.article dl {
    margin-top: var(--mg-s);
}
.article dl div{
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgba(0,0,0,0.1);
}
.article dl div:first-child {
    border-top: solid 1px rgba(0,0,0,0.1);
}
.article dl dt,
.article dl dd {
    font-size: 15rem;
    font-size: 0.9375em;
    letter-spacing: 0.05em;
    padding: var(--mg-xxs) 0;
}
.article dl dt {
    font-weight: bold;
    width: 30%;
    box-sizing: border-box;
    padding-right: 6rem;
}
.article dl dd {
    flex: 1;
}
.article dl dd p {
    text-align: justify;
}
.article dl dd p + p {
    margin-top: 1.5rem;
    margin-top: 1em;
}
.article dl .note{
    margin-top: 2rem;
}
.article dl .note p + p{
    margin-top: 0.4rem;
}
.article table{
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--mg-s);
}
.article table tr{
    border-bottom: solid 1px rgba(0,0,0,0.1);
}
.article table tr:first-child{
    border-top: solid 1px rgba(0,0,0,0.1);
}
.article table thead tr{
    border-bottom: none;
}
.article table thead th,
.article table thead td{
    font-size: 0.8125em;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 1em 1.25em;
}
.article table thead th{
    background: var(--col-bg2);
    white-space: nowrap;
}
.article table thead th:first-child{
    padding-left: 0;
}
.article table thead th br{
    display: none;
}
.article table tbody th,
.article table tbody td{
    font-size: 0.9375em;
    letter-spacing: 0.05em;
    padding: 1.5em 1.25em;
    background: rgba(255, 255, 255, 0.2);
}
.article table tbody th:first-child,
.article table tbody td:first-child{
    padding-left: 0;
}
.article table .col-1{
    color: var(--col-bg5);
}
.article table .col-2{
    color: var(--col-gray);
}
.article table th{
    font-weight: bold;
}
.article table td{
    text-align: center;
}
.article .links {
    margin-top: var(--mg-s);
}
.article dl + .links {
    margin-top: var(--mg-m);
}
.article .links a {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-size: 0.9375em;
    letter-spacing: 0.05em;
    background: var(--col-bg2);
    padding: 2rem 2.4rem;
    border-radius: 1.2rem;
    position: relative;
    border-bottom: none;
    transition: none;
}
.article .group .links a {
    background: #fff;
}
.article .links a + a {
    margin-top: 1rem;
}
.article .links a .txt {
    flex: 1;
    padding-right: 2rem;
}
.article .links a .arrow {
    width: 3.2rem;
    height: 3.2rem;
    position: relative;
}
.article .ttl:first-child,
.article .lead:first-child,
.article dl:first-child,
.article table:first-child,
.article .img-wrap:first-child,
.article .movie:first-child {
    margin-top: 0!important;
}
.article ul:first-child {
    margin-top: 0;
}
.article .ttl + .lead{
    margin-top: 0!important;
}
.article .ttl + dl,
.article .ttl + ul,
.article .ttl + table,
.article .ttl + .links{
    margin-top: 2rem!important;
}
.article .img-wrap:last-child,
.article .movie:last-child{
    margin-bottom: 0!important;
}
.article.en .ttl {
    letter-spacing: 0.05em;
}
.article.en .lead p,
.article.en .note,
.article.en .img-wrap p,
.article.en ul li,
.article.en dl dt,
.article.en dl dd,
.article.en table thead th,
.article.en table thead td,
.article.en table tbody th,
.article.en table tbody td,
.article.en .links a {
    letter-spacing: 0em;
}
.article.en .lead p,
.article.en .note p,
.article.en dl dd p {
    text-align: left;
}
@media (max-width: 767px){
    .article .ttl.max {
        font-size: 2.6rem;
        font-size: 1.625em;
    }
    .article .lead p{
        font-size: 1.06666667em;
    }
    .article dl div{
        display: block;
    }
    .article dl dt,
    .article dl dd{
        padding: var(--mg-xxs) 0;
    }
    .article dl dt{
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 1.2rem;
    }
    .article dl dd{
        padding-top: 0;
    }
    .article dl ul.flex{
        margin-top: 0!important;
    }
    .article .group {
        padding: var(--mg-xs) var(--mg-xs);
    }
    .article .img-wrap.min {
        width: 75%;
    }
    .article .img-wrap.min.max-min,
    .article .img-wrap.flex.min{
        width: 50%;
    }
    .article .img-wrap.flex {
        display: block;
    }
    .article .img-wrap.flex .img-flex-inner {
        width: 100%;
    }
    .article .img-wrap.flex .img-flex-inner + .img-flex-inner {
        margin-top: var(--mg-l);
    }
    .article table thead th,
    .article table thead td{
        font-size: 0.75em;
    }
    .article table tbody th, 
    .article table tbody td{
        font-size: 0.875em;    
    }
    .article table thead th br{
        display: block;
    }
}