@charset "UTF-8";
/* CSS Document */
body {
    font-size: 3.88vw;
    line-height: 150%;
    font-weight: 400;
    /*font-size: 14px;
    line-height: 150%;*/
}
html{
    scroll-padding-top:calc( 100vw * ( 60 / 360));
}
/*ヘッダー*/
br.Port, br.Land, br.PC {
    display: none;
}
br.SP {
    display: block;
}
body {
    
}
#PageBG {
    width: 100%;
    max-width: 100%;
    background: url("../images/global/pagebg_SP_2025.png") no-repeat center top;
    background-size: 100% auto;
}
/*ヘッダー*/
#Header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100vw * (60 / 360));
    max-height: auto;
    width: 100%;
    aspect-ratio: auto;
    font-size: 100%;
    line-height: 150%;
}
#Header #HeaderBlock {
    width: calc(100% * (328 / 360));
    height: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    z-index: 0;
}
#HeaderMenuBtn {
    order: 3;
    display: block;
    height: calc(100% * (44 / 60));
    width: auto;
    aspect-ratio: 1/1;
}
#HeaderMenuBtn a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/global/icn_menu_2025.png") no-repeat center center;
    background-color: var(--color-Blue);
    background-size: contain;
    border-radius: 50%;
    text-indent: -999em;
}
#HeaderLogo {
    order: 1;
    width: calc(100vw * (63 / 360));
    height: auto;
    aspect-ratio: 102/64;
}
#UserArea {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    list-style: none;
    gap: 1em;
    position: inherit;
    top: 0;
    z-index: 100000;
}
ul#UserData {
    display: none;
}
ul#LoginBtn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    list-style: none;
    gap: 0.5em;
    height: 100%;
}
ul#LoginBtn li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    white-space: nowrap;
}
ul#LoginBtn li.Registration a {
    background-color: var(--color-Blue);
    color: var(--color-white);
    height: 2.5em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
}
ul#LoginBtn li.Registration a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_registration_2025.png") no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
ul#LoginBtn li.Login a {
    color: var(--color-Blue);
    height: 2.5em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
    border: solid 2px var(--color-Blue);
}
ul#LoginBtn li.Login a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_login_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
ul#LoginBtn li.Logout a {
    color: var(--color-Blue);
    height: 2.5em;
    padding-left: calc(0.5em + 1.5em);
    padding-right: 0.5em;
    border-radius: 1.5em;
    border: solid 2px var(--color-Blue);
}
ul#LoginBtn li.Logout a::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url("../images/global/icn_logout_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
/*ハンバーガーメニュー*/
#HeaderMenu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;
    background-color: var(--color-BrownMask);
    width: 100%;
    height: 100dvh;
    z-index: 0;
    padding: 0;
    margin: 0;
}
#HeaderMenu .Wrap {
    display: block;
    width: 100%;
    margin-left: auto;
    padding-top: calc(100vw * (60 / 360) + 1em);
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 1.5em;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}
#HeaderMenu .Wrap::before {
    content: '';
    display: block;
    height: calc(100% * (44 / 60));
    width: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: url("../images/global/icn_close_2025.png") no-repeat center center;
    background-color: var(--color-Blue);
    background-size: contain;
    position: fixed;
    top: 2vw;
    right: calc(100% * (16 / 360));
    z-index: 100000;
}
#HeaderMenu .Wrap::after {
    content: '';
    display: block;
    height: calc(100vw * (60 / 360));
    max-height: auto;
    width: 100%;
    background-color: var(--color-white);
    position: fixed;
    top: 0;
    left: 0;
    border-bottom-left-radius: 4.44vw;
    border-bottom-right-radius: 4.44vw;
}
ul#GlobalNav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    width: 100%;
    margin: 0 auto;
}
ul#GlobalNav li {
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    width: 100%;
    line-height: 150%;
    position: relative;
    background-color: var(--color-white);
    padding: 0 2em;
}
ul#GlobalNav > li:first-of-type {
    border-top-left-radius: 4.4vw;
    border-top-right-radius: 4.4vw;
    padding-top: 2em;
}
ul#GlobalNav > li:last-of-type {
    border-bottom-left-radius: 4.4vw;
    border-bottom-right-radius: 4.4vw;
    padding-bottom: 2em !important;
}
ul#GlobalNav > li:last-of-type::after {
    display: none !important;
}
ul#GlobalNav li.SP {
    display: flex;
}
ul#GlobalNav li.Point.SP, ul#GlobalNav li.Setting.SP{
    background-color: var(--color-PaleBrown);
}
ul#GlobalNav li.Point.SP a, ul#GlobalNav li.Setting.SP a {
    border-top: none;
    padding-left: 2em;
}
ul#GlobalNav li.Point.SP a::before {
    content: '';
    display: block;
    width: 1.75em;
    height: 1.75em;
    background: url("../images/global/icn_point_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul#GlobalNav li.Setting.SP a::before {
    content: '';
    display: block;
    width: 1.75em;
    height: 1.75em;
    background: url("../images/global/icn_setting_2025.png") no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul#GlobalNav li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    border-bottom: solid 2px var(--color-PaleBrown);
    padding: 0;
    padding-top: calc( 100vw * ( 10 / 360));
    padding-bottom: calc( 100vw * ( 10 / 360));
}
ul#GlobalNav li.Point.SP a, ul#GlobalNav li.Setting.SP a {
    border: none;
}
ul#GlobalNav li a::after {
    content: '';
    display: block;
    width: 4vw;
    height: 8vw;
    background: url("../images/global/icn_arrow_r_bl_2025.png") no-repeat center center;
    background-size:cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul#GlobalNav li.Submenu{
    padding-top: calc( 100vw * ( 10 / 360));
    padding-bottom: calc( 100vw * ( 10 / 360));
    border: none;
}
ul#GlobalNav > li.Submenu::after{
    content: '';
    width: calc( 100% - 4em);
    height: 2px;
    background-color: var(--color-PaleBrown);
    position: absolute;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
}
ul#GlobalNav li.Select ul {
    display: flex;
    position: inherit;
    top: 0;
    left: 0;
    transform: translateX(0);
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    list-style: none;
    box-shadow: none;
    padding: 0em 0em 0em 1em;
    border-radius: 0;
    width: 100%;
    background-color: var(--color-white);
}
ul#GlobalNav li.Select ul li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    position: relative;
    font-size: 100%;
    line-height: 150%;
    font-weight: 400;
    border: none !important;
    padding: 0;
}
ul#GlobalNav li.Select ul li a {
    border: none;
    padding: 0;
    padding-top: calc( 100vw * ( 7 / 360));
    padding-bottom: calc( 100vw * ( 7 / 360));
}
/*フッター*/
#Footer {
    font-size: 100%;
    line-height: 150%;
    padding-bottom: env(safe-area-inset-bottom);
}
#Footer #FooterBlock {
    width: 100%;
    height: 100%;
    padding: 2em 1.5em 1em;
}
#Footer #FooterBlock #FooterLogo {
    display: block;
    height: calc(100vw * (30 / 360));
    width: auto;
    aspect-ratio: 200/40;
}
ul#FooterNav {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    gap: 1.5em;
}
ul#FooterNav li {
    width: calc(100%/2 - (1.5em / 2))
}
ul#FooterNav li a {
    display: flex;
    justify-content: center;
    align-items: center;
}
#Footer p, #Footer #Copyright {
    font-size: 70%;
    line-height: 150%;
    text-align: center;
    margin-top: 2em;
}
#GotoTop {
    padding-bottom: env(safe-area-inset-bottom);
}
#GotoTop a {
    display: block;
    width: 10vw;
    max-width: 10vw;
    height: auto;
    aspect-ratio: 1/1;
}
/*ボタンパーツ*/
a.BlueBtn{
    font-size: 100%;
    line-height: 125%;
}
a.RedBtn{
    font-size: 100%;
    line-height: 125%;
}
a.LtBrown{
    font-size: 100%;
    line-height: 125%;
}
/*Slickパーツ*/
.Pager li {
    width: calc( 100vw * ( 13 / 360));
    height: calc( 100vw * ( 13 / 360));
}
.Pager li .CenterDot {
    width: calc( 100vw * ( 11 / 360));
    height: calc( 100vw * ( 11 / 360));
}
/*ページコンテンツ*/
#PageContents{
    padding-top: calc(100vw * (60 / 360));
}
#PageContents h1 {
    font-size: 170%;
    line-height: 125%;
}
#PageContents h2 {
    font-size: 157%;
    line-height: 125%;
    display: block;
    border: none;
    width: 100%;
}
#PageContents .ContentsBlock{
    width: calc( 100vw * (320 / 360));
    max-width: calc( 100vw * (320 / 360));
}
/*白バック*/

.WhBGLeft, .WhBGRight {
    padding-top: calc( 100vw * ( 40 / 360));
    padding-bottom: calc( 100vw * ( 40 / 360));
}
.WhBGLeft::before, .WhBGLeft::after {
    content: '';
    width: calc( 100vw - ( 10 / 360));
    height: 100%;
    position: absolute;
    right: calc( 100vw * ( 10 / 360));
    top: 0;
}
.WhBGRight::before, .WhBGRight::after {
    content: '';
    width: calc( 100vw - ( 10 / 360));
    height: 100%;
    position: absolute;
    left: calc( 100vw * ( 10 / 360));
    top: 0;
}
 
/*404*/
.ContentsBlock_404 {
    width: calc(100% * (280 / 360));
    margin-top: 3em;
    margin-bottom: 3em;
}
.ContentsBlock_404 figure {
    width: calc(100% * (175 / 360));
}
.ContentsBlock_404 p.LargeText {
    font-size: 100%;
    line-height: 125%;
}
.ContentsBlock_404 p.SmallText {
    font-size: 80%;
    line-height: 125%;
}
.ContentsBlock_404 .BtmBtnArea {
    margin: 1em auto;
    align-items: stretch;
    flex-flow: column;
    gap: 1em;
}
.ContentsBlock_404 .BtmBtnArea a.BlueBtn {
    width: calc( 100vw * ( 240 / 360));
    height: calc( 100vw * ( 50 / 360));
}
.ContentsBlock_404 .BtmBtnArea a.RightArrow::after{
    width: calc( 100vw * ( 32 / 360));
    height: calc( 100vw * ( 32 / 360));
}
.CloseCircle {
    width: calc( 100vw * ( 44 / 360));
    height: calc( 100vw * ( 44 / 360));
    right:calc( 100vw * ( 10 / 360));
    top:calc( 100vw * ( 10 / 360));
}
/*ラインワーク*/
.LineWork {
    width: 100%;
    max-width: 100%;
}
#PageContents .LineWork.Top {
    left: 0;
    top:calc(-100vw * (10 / 360));
    transform: translateX(0);
}
#PageContents .LineWork.Bottom {
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
}
@media screen and (max-aspect-ratio: 11/10) {
    /* 縦向きの場合のスタイル */
    br.Port {
        display: block;
    }
    #PageContents h2 span:nth-of-type(1) {
        width: fit-content;
        border-bottom: solid 2px var(--color-Brown);
    }
    #PageContents h2 span:nth-of-type(1)::before {
        width: calc(100vw * (30 / 360));
        height: calc(100vw * (30 / 360));
    }
    #PageContents h2 span:nth-of-type(2){
        width: fit-content;
        font-size: 56% !important;
        line-height: 150% !important;
        border-bottom: solid 2px var(--color-Brown);
        padding-left: 0;
    }
    /*404*/
    .ContentsBlock_404 .BtmBtnArea {
        flex-flow: column;
        width: 80%;
        position: relative;
    }
    .ContentsBlock_404 .BtmBtnArea a {
        width: 100%;
        height: 4em;
    }
}
@media screen and (min-aspect-ratio: 11/10) {
    /* 横向きの場合のスタイル */
    br.Land {
        display: block;
    }
    #PageContents h2 span:nth-of-type(1) {
        width: fit-content;
        border-bottom: solid 2px var(--color-Brown);
    }
    #PageContents h2 span:nth-of-type(1)::before {
        width: calc(100vw * (30 / 360));
        height: calc(100vw * (30 / 360));
    }
    #PageContents h2 span:nth-of-type(2){
        width: fit-content;
        font-size: 56% !important;
        line-height: 150% !important;
        border-bottom: solid 2px var(--color-Brown);
        padding-left: 0;
    }
    #Footer {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    #GotoTop {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

#UserArea{
    font-size: 3.33vw;
}
ul#GlobalNav li.Point.SP{
    padding-top: 1em;
}
ul#GlobalNav li.Setting.SP{
    padding-bottom: 1em;
}
ul#GlobalNav > li.Submenu::before{
    content: '';
    display: block;
    width: 6vw;
    height: 6vw;
    background: url("../images/global/icn_plus_bl_2025.png") no-repeat center center;
    background-size:cover;
    position: absolute;
    right: 1.75em;
    top: calc( 100vw * ( 40 / 360) / 2);
    transform: translateY(-50%);
}
ul#GlobalNav > li.Submenu.Select::before{
    background-image: url("../images/global/icn_minus_bl_2025.png");
}
ul#GlobalNav li.Select ul{
    padding-top: calc( 100vw * ( 7 / 360));
}
#PageContents .LineWork.Top {
    top:0;
}
/*白バック*/
.WhBGLeft::before, .WhBGLeft::after {
    right: auto;
}
.WhBGRight::before, .WhBGRight::after {
    left: auto;
}