@charset "utf-8";

@font-face {
  font-family: 'MPLUS-Rg';
  src: url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'MPLUS-Md';
  src: url('../fonts/MPLUSRounded1c-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'MPLUS-Bk';
  src: url('../fonts/MPLUSRounded1c-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'MPLUS-Bd';
  src: url('../fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'MPLUS-Eb';
  src: url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
}


:root{
    --font-size: 10px;
    --transition-theme: 0.75s;
}
@media (max-width: 1024px) {
    :root{
        --font-size: calc(10 / 750 * 100vw);
    }
}

.grecaptcha-badge { visibility: hidden; }

html{
    font-family: MPLUS-Rg, Sans-Serif;
    font-size: var(--font-size);
}
body{
	-webkit-tap-highlight-color: transparent;
    overflow: hidden;
    min-height: auto;
    opacity: 0;
    transition: 0.5s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#top, #page{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

html, body, #wrapper, #contents, #top, .top-wrap{
    height: 100%;
}

*:focus { outline: none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
a, .no-highlight{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:pointer;
	outline: none;
}

img{
    width: 100%;
}
.theme-light #wrapper, .theme-light #page{ background: #eee2c2; }
.theme-dark #wrapper, .theme-dark #page{ background: #8797ab; }
#contents{
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
}
.content{
    width: 100%;
    max-width: 120rem;
    padding: 0 1rem;
    margin: 0 auto 0;
    position: relative;
}
.inner_content{
    width: 100%;
    padding: 0 5rem 0;
}
.inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.flex{
    display: flex;
}
.sp{
    display: none;
}
.theme-light, .theme-dark{
    opacity: 1;
}
.view-light, .view-dark{
    display: none;
}
.theme-light .view-light, .theme-dark .view-dark{
    display: block;
}


/****************************************
font-size
****************************************/
.fs-base{ font-size: 1.6rem; }
.fs-small{ font-size: 1.2rem; }

/****************************************
line-height
****************************************/
.lh-15{ line-height: 1.5; }


/****************************************
テーマセレクトボタン
****************************************/
.theme .content{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 5;
}
.theme-wrap{
    width: 8.6rem;
    height: 3.8rem;
    position: absolute;
    top: 2rem;
    right: 2%;
    z-index: 10;
    border: solid 0.4rem #fff;
    border-radius: 2rem;
    cursor: pointer;
    box-shadow: 0 0.3rem 0.7rem 0 rgba(0, 0, 0, 0.15);
}
.theme-light .theme-wrap{ background: #eee2c2; }
.theme-dark .theme-wrap{ background: #8797ab; }
.theme-wrap:before{
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 0;
}
.theme-light .theme-wrap:before{ left: 0; background: url("../images/ic-theme-light.png") no-repeat center bottom / 100% auto; }
.theme-dark .theme-wrap:before{ right: 0; background: url("../images/ic-theme-dark.png") no-repeat center bottom / 100% auto; }

@media (max-width: 1024px) {
    .theme-wrap{
        width: 12.4rem;
        height: 5.4rem;
        border: solid 0.6rem #fff;
        border-radius: 2.7rem;
        top: 3rem;
        right: 2.5rem;
    }
    .--pc .theme-wrap{ right: 3.5rem; }
    .theme-wrap:before{
        width: 4.2rem;
        height: 4.2rem;
    }
}


/****************************************
フッター
****************************************/
footer{
    position: relative;
    color: #fff;
    width: 100%;
    max-width: 192rem;
    margin: auto;
}
.theme-light footer{
    background: #99783F;
    background: linear-gradient(90deg,rgba(153, 120, 63, 1) 0%, rgba(147, 102, 64, 1) 100%);
    border-top: solid 0.3rem #fff0c7;
}
.theme-dark footer{
    background: #6D79B5;
    background: linear-gradient(90deg,rgba(109, 121, 181, 1) 0%, rgba(96, 108, 168, 1) 100%);
    border-top: solid 0.3rem #edf0ff;
}
footer .content{
    padding-top: 3.5rem;
    padding-bottom:3.5rem;
    display: flex;
}
/* 左側 */
.footer-company{
    width: 48%;
    display: flex;
    flex-wrap: wrap;
}
.footer-company-logo{
    width: 6.2rem;
}
.company-logo span{
    display: none;
}
.theme-light .logo-light, .theme-dark .logo-dark{
    display: block;
}
.footer-company-info{
    width: calc(100% - 8rem);
    margin-left: 1.8rem;
}
.footer-company-info > span{
    display: block;
    opacity: 0.5;
    transform: rotate(0.03deg);
    margin-bottom: 1.2rem;
}
.company-name{
    font-size: 1.8rem;
}
.company-addreess, .company-copyright{
    font-size: 1.2rem;
}
/* 右側 */
.footer-sitemap{
    width: 52%;
    font-size: 1.4rem;
}
.footer-sitemap-row{
    width: 70%;
}
.footer-sitemap-row a{
    display: inline-block;
    transform: rotate(0.03deg);
    opacity: 0.5;
    margin-right: 1.8rem;
    margin-bottom: 1.6rem;
}
.footer-sitemap-row a:last-child{
    margin-right: 0;
}
.footer-recruit{
    position: absolute;
    width: 18.2rem;
    top: -8.2rem;
    right: 0.5rem;
}

@media (max-width: 1024px) {
    footer .content{
        padding: 4.5rem;
        flex-direction: column-reverse;
    }
    .footer-sitemap, .footer-company{
        width: 100%;
    }
    .footer-company{
        margin-top: 1.5rem;
    }
    .footer-sitemap{
        font-size: 2.2rem;
    }
    .footer-recruit{
        width: 21rem;
    }
    .footer-sitemap-row a{
        margin-right: 2.5rem;
        margin-bottom: 3rem;
    }

    .footer-company-logo{
        width: 19.6rem;
    }
    .footer-company-info{
        width: 100%;
        margin-left: 0;
        margin-top: 2.5rem;
    }
    .footer-company-info span{
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }
    .footer-company-info span.company-addreess{
        margin-bottom: 4.5rem;
    }
}




/****************************************
下層ページ
****************************************/
#page{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100%;
    overflow-y: scroll;
}

#page .page-wrap{
    width: 100%;
    max-width: 192rem;
    min-height: 100vh;
    margin: auto;
}
.theme-light #page .page-wrap{ background-color: #ffffff; }
.theme-dark #page .page-wrap{ background-color: #324862; }

#page article{
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 26rem);
}

.page-inner{
    transform: translate(0, 0);
    /* margin-top: -9rem; */
}

/* ヘッダー */
#page header{
    width: 100vw;
    max-width: 192rem;
    height: 9rem;
    line-height: 9rem;
    background: rgba(234, 234, 234, 0.3);
    box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}
#page header .content{
    width: 100%;
    max-width: 120rem;
    padding: 0 1rem;
}
#page header nav{
    display: flex;
    flex-wrap: wrap;
    width: 86%;
}
#page .company-logo{
    width: 11.1rem;
    margin-right: 0.5rem;
    box-shadow: 0px 0.3rem 0.7rem 0rem rgba(0, 0, 0, 0.15);
    border-radius: 0 0 1rem 1rem;
}
#page .company-logo a{
    position: static;
    width: auto;
}
#page .header-nav, #page .theme{
    display: flex;
    flex-wrap: wrap;
    height: 9rem;
    align-items: center;
}
#page .header-nav{
    width: calc(100% - 11.6rem);
}
#page .header-nav a.active:after{
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.5rem;
    position: absolute;
    top: 1.6rem;
    left: 8%;
}
.theme-light #page .header-nav a.active:after{ background: url("../images/ic-nav-light.png") center bottom / 100% auto; }
.theme-light #page .header-nav .--recruit a.active:after,
.theme-dark #page .header-nav a.active:after{ 
    background: url("../images/ic-nav-dark.png") center bottom / 100% auto; 
}

/* メニュー */
#page .header-nav div{
    width: 18.4%;
    height: 4.5rem;
    margin: 0 0.5%;
    overflow: hidden;
}
#page .header-nav div a{
    width: 100%;
    height: 100%;
    border-radius: 2.3rem;
    overflow: hidden;
    position: relative;
}
.theme-light .btn a{ box-shadow: 0px 0.8rem 1.5rem 0rem rgba(144, 64, 0, 0.4); }
.theme-dark .btn a{ box-shadow: 0px 0.8rem 1.5rem 0rem rgba(17, 40, 67, 0.4); }
#page .header-nav a span, .btn a span{
    display: block;
    width: 100%;
    height: 4rem;
    font-family: MPLUS-Md;
    line-height: 4.6rem;
    border-radius: 2.3rem;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    transform: rotate(0.03deg);
}
#page .header-nav div:first-child{
    margin-left: 2%;
}
#page .header-nav a, .btn a,
#page .header-nav a span, .btn a span{
    display: block;
}
.btn a{
    width: 100%;
    height: 100%;
    border-radius: 2.3rem;
    overflow: hidden;
}
.btn a span{
    width: 100%;
    height: calc(100% - 0.4rem);
}
/* メニュー > ライトテーマ */
.theme-light #page .header-nav div a, .theme-light .btn a{
    background: #D25E16;
    background: linear-gradient(90deg,rgba(210, 94, 22, 1) 0%, rgba(198, 68, 11, 1) 100%);
}
.theme-light #page .header-nav a span, .theme-light .btn a span{
    background: #EA630F;
    background: linear-gradient(90deg,rgba(234, 99, 15, 1) 0%, rgba(219, 76, 12, 1) 100%);
}
/* ダークテーマ > menu */
.theme-dark #page .header-nav div a, .theme-dark .btn a{
    background: #21438B;
    background: linear-gradient(90deg,rgba(33, 67, 139, 1) 0%, rgba(102, 66, 173, 1) 100%);
}
.theme-dark #page .header-nav a span, .theme-dark .btn a span{
    background: #224B9A;
    background: linear-gradient(90deg,rgba(34, 75, 154, 1) 0%, rgba(115, 73, 194, 1) 100%);
}
/* リンクルート（共通） */
#page .header-nav div.--recruit a{
    background: #41B3A0 !important;
    background: linear-gradient(90deg,rgba(65, 179, 160, 1) 0%, rgba(77, 140, 184, 1) 100%) !important;
}
#page .header-nav div.--recruit a span{
    background: #47C4B0;
    background: linear-gradient(90deg,rgba(71, 196, 176, 1) 0%, rgba(85, 154, 206, 1) 100%);
}
/* 戻るボタン */
.theme-light .form-back .btn a{
    background: #9A795B;
    background: linear-gradient(90deg,rgba(154, 121, 91, 1) 0%, rgba(126, 93, 63, 1) 100%);
}
.theme-dark .form-back .btn a{
    background: #214A7B;
    background: linear-gradient(90deg,rgba(33, 74, 123, 1) 0%, rgba(55, 96, 145, 1) 100%);
}
.theme-light .form-back .btn a > *{
    background: #9D7C5E;
    background: linear-gradient(90deg,rgba(157, 124, 94, 1) 0%, rgba(137, 104, 74, 1) 100%);
}
.theme-dark .form-back .btn a > *{
    background: #254E7F;
    background: linear-gradient(90deg,rgba(37, 78, 127, 1) 0%, rgba(65, 106, 155, 1) 100%);
}


/* テーマセレクト */
#page .theme{
    margin: 0 1rem;
}
#page .theme .theme-wrap{
    position: relative;
    top: 0;
    left: 0;
}

/* ボタン */
 :not(.btn) > .a-external:after, .btn .a-external span:after{
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;    
    margin-left: 0.25em;
    transform: translateY(0.1rem);
}
.btn{ position: relative; }
.theme-light :not(.btn) > .a-external:after{ background: url("../images/ic-external-light.png") no-repeat center bottom / 100% auto; }
.theme-dark :not(.btn) >  .a-external:after{ background: url("../images/ic-external-dark.png") no-repeat center bottom / 100% auto; }
.btn .a-external span:after{ background: url("../images/ic-external.png") no-repeat center bottom / 100% auto; }

.a-underline{
    display: inline-block;
    line-height: 1;
}
.theme-light .a-underline{ border-bottom: solid 0.1rem #472608; }
.theme-dark .a-underline{ border-bottom: solid 0.1rem #88a0bc; }

/* sp用のナビ */
#page .sp-menu{
    display: none;
}

.sp-nav{
    width: 100%;
    height: 100%;
    padding-bottom: 7rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    overflow-y: scroll;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s;
}
.sp-nav.--open{
    opacity: 1;
    visibility: visible;
}
.theme-light .sp-nav{ background: #fff; color: #000; }
.theme-dark .sp-nav{ background: #000; color: #fff; }
.sp-nav-head{
    padding: 3rem 0;
}
.theme-light .sp-nav-head{
    background: #99783F;
    background: linear-gradient(90deg,rgba(153, 120, 63, 1) 0%, rgba(147, 102, 64, 1) 100%);
}
.theme-dark .sp-nav-head{
    background: #6D79B5;
    background: linear-gradient(90deg,rgba(109, 121, 181, 1) 0%, rgba(96, 108, 168, 1) 100%);
}
.sp-nav-logo{
    width: 12.6rem;
    margin: auto;
}
.sp-nav :not(.sp-nav-logo) > a{
    font-size: 3.6rem;
    font-family: MPLUS-Eb;
    line-height: 1;
    position: relative;
    display: block;
    width: 100%;
    padding: 4.5rem 5rem;
    border-bottom: solid 0.1rem #c9c9c9;
}
.sp-nav :not(.sp-nav-logo) > a:after{
    content: "";
    display: block;
    width: 1.5rem;
    height: 2.1rem;
    position: absolute;
    top: 50%;
    right: 5rem;
    transform: translate(0, -50%);
}
.theme-light .sp-nav a:after{ background: url("../images/ic-nav-sp-light.png") no-repeat center bottom / 100% auto; }
.theme-dark .sp-nav a:after{ background: url("../images/ic-nav-sp-dark.png") no-repeat center bottom / 100% auto; }
.sp-nav span{
    font-size: 2.4rem;
    color: #b5b5b5;
    font-family: MPLUS-Rg;
    display: block;
    margin-top: 1.5rem;
}
.sp-nav-close{
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    transform: rotate(45deg);
    cursor: pointer;
}
.sp-nav-close:before, .sp-nav-close:after{
    content: "";
    display: block;
    width: 100%;
    height: 0.7rem;
    border-radius: 3.5rem;
    box-shadow: 0 0.3rem 0.7rem 0 rgba(0, 0, 0, 0.15);
    background: #fff;
}
.sp-nav-close:after{
    position: absolute;
    transform: rotate(90deg);
}
#page .sp-nav .theme{
    display: block;
    margin-top: 4rem;
}
#page .sp-nav .theme .theme-wrap{
    margin-left: auto;
    margin-right: 1.5rem;
}

/*
各ページの右上オブジェクト
*/
/* about */
.page-object-desk{
    width: 36.875%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 11rem 3.906% 0 0;
    z-index: -1;
}
/* features */
.page-object-game{
    width: 40.156%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 14rem 0 0 0;
    z-index: -1;
}
/* company */
.page-object-sticker{
    width: 31.145%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 18rem 8.437% 0 0;
    z-index: -1;
}
/* contact */
.page-object-device{
    width: 30.156%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 14rem 10.208% 0 0;
    z-index: -1;
}
/* recruit */
.page-object-recruit{
    width: 27.239%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 13rem 12.8% 0 0;
    z-index: -1;
}
/* policy */
.page-object-policy{
    width: 40.520%;
    position: absolute;
    top: 0;
    right: 0;
    margin: -2rem -4.6% 0 0;
    z-index: -1;
}



.strong{
    display: inline-block;
    line-height: 1.4;
    padding: 0 1.5rem;
    margin: 0 0.5rem;
    color: #ffffff;
    border-radius: 1rem;
}
.theme-light .strong{ 
    background: #E79D00;
    background: linear-gradient(90deg,rgba(231, 157, 0, 1) 0%, rgba(236, 93, 6, 1) 100%);
}
.theme-dark .strong{ 
    background: #4F98DC;
    background: linear-gradient(90deg,rgba(79, 152, 220, 1) 0%, rgba(92, 100, 219, 1) 100%);
}
.strong.--blue{
    background: #2783D2;
    background: linear-gradient(90deg,rgba(39, 131, 210, 1) 0%, rgba(47, 177, 196, 1) 100%);
}

.bg-obj-left{
    position: relative;
}
.bg-obj-left:before{
    content: "";
    display: block;
    width: 106rem;
    height: 109.9rem;
    position: absolute;
    left: 0;
    margin-left: clamp(-108rem, calc(39.0625vw - 155rem), -80rem);
    z-index: 2;
    scale: -1 1;
    pointer-events: none;
}
.theme-light .bg-obj-left:before{ background: url("../images/bg-wave-light.png") no-repeat center bottom / 100% auto; }
.theme-dark .bg-obj-left:before{ background: url("../images/bg-wave-dark.png") no-repeat center bottom / 100% auto; }

.bg-obj-right{
    position: relative;
}
.bg-obj-right:after{
    content: "";
    display: block;
    width: 69.8rem;
    height: 72.4rem;
    position: absolute;
    right: 0;
    margin-right: clamp( -75rem, calc(43.527vw - 1195.71px), -36rem);
    /* margin: -57rem clamp(-53%, calc(-567px + (231 * (100vw - 1024px) / 896)), -336px) 0 0; */
    z-index: 2;
    pointer-events: none;
}
.theme-light .bg-obj-right:after{ background: url("../images/bg-wave-light.png") no-repeat center bottom / 100% auto; }
.theme-dark .bg-obj-right:after{ background: url("../images/bg-wave-dark.png") no-repeat center bottom / 100% auto; }

@media (max-width: 1024px) {
    #page header{
        height: 7.8rem;
    }
    #page header .content{
        padding: 0;
    }
    #page .header-nav, #page .theme, #page .theme{
        display: none;
    }
    #page .theme{
        display: block;
        position: absolute;
        top: 1.2rem;
        right: 10rem;
    }
    #page .sp-menu{
        width: 5.4rem;
        height: 5.8rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        cursor: pointer;
        position: absolute;
        top: 1rem;
        right: 2.5rem;
    }
    @supports (-webkit-appearance:none) and (not (-moz-appearance:none)) {
        #page .sp-menu{
            right: 3.5rem;
        }
        #page .theme{
            right: 11rem;
        }
    }
    #page .sp-menu span{
        display: block;
        width: 100%;
        height: 0.7rem;
        border-radius: 3.5rem;
        box-shadow: 0 0.3rem 0.7rem 0 rgba(0, 0, 0, 0.15);
    }
    .theme-light #page .sp-menu span{ background: #fff; }
    .theme-dark #page .sp-menu span{ background: #000; }
}



/* メイン */
.page-main{
    padding: 26rem 0 0;
    font-size: 1.6rem;
    margin-top: -9rem;
    position: relative;
    overflow-x: clip;
}
.theme-light .page-main{ color: #472608; }
.theme-dark .page-main{ color: #c2d4ea; }

.theme-light .--thin{ background-color: #fffae9; }
.theme-dark .--thin{ background-color: #e8ebef; }
.theme-light .--thick{ background-color: #f2e2a9; }
.theme-dark .--thick{ background-color: #c1d2e5; }

.box{
    border-radius: 4rem;
    overflow: hidden;
}
.theme-light .box{ box-shadow: 0px 0.8rem 1.5rem 0 rgba(188, 150, 102, 0.4); }
.theme-dark .box{ box-shadow: 0px 0.8rem 1.5rem 0 rgba(17, 38, 63, 0.4); }
.theme-light .box.--thin{ color: #472608;  }
.theme-dark .box.--thin,
.theme-dark .box.--thick{
    color: #253e5b;
}

.page-object-wave{
    width: 119.8rem;
    position: absolute;
    top: 0;
    right: 0;
    margin: -48rem clamp(-53%, calc(-567px + (231 * (100vw - 1024px) / 896)), -336px) 0 0;
    z-index: -1;
}

.theme-light .page-main:after{ background: url("../images/bg-wave-light.png") no-repeat center bottom / 100% auto; }

.page-main p{
    transform: rotate(0.03deg);
}

/* メイン > ページタイトル */
.page-title h2{
    font-family: MPLUS-Bk;
    display: inline-block;
    font-size: 10rem;
}
.theme-light .page-title h2{
    background: linear-gradient(90deg,rgba(209, 126, 71, 1) 0%, rgba(180, 112, 67, 1) 100%);
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.theme-dark .page-title h2{
    background: linear-gradient(90deg,rgba(181, 219, 255, 1) 0%, rgba(208, 211, 255, 1) 100%);
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.page-title span{
    display: block;
    margin-top: 1rem;
    font-family: MPLUS-Bd;
    font-size: 2.8rem;
}
.theme-light .page-title span{
    background: #b67143;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.theme-dark .page-title span{
    background: #6c8baf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* メイン > コンテンツ */
h3{
    font-family: MPLUS-Eb;
    font-size: 5.8rem;
    position: relative;
    padding-top: 3.5rem;
}
.theme-light h3{ color: #e1762e; }
.theme-dark h3{ color: #ced4ff; }

h3:before{
    content: "";
    display: block;
    width: 10.2rem;
    height: 9.4rem;
    position: absolute;
    top: 0;
    left: -5rem;
    z-index: -1;
}
.theme-light h3:before{  background: url("../images/ic-cap-light.png") no-repeat center top / 100% auto; }
.theme-dark h3:before{  background: url("../images/ic-cap-dark.png") no-repeat center top / 100% auto; }

h3 span{
    display: block;
    font-size: 2.2rem;
    margin-top: 1.5rem;
    
}
.theme-light h3 span{ color: #472608; }
.theme-dark h3 span{ color: #c2d4ea; }
/* @supports (item-selector: nth-child(1 of .a)) {
  .theme-light h3 span{
    font-weight: lighter;
  }
} */
_::-webkit-full-page-media, _:future, :root .theme-light h3 span{
    font-weight: lighter;
}
_::-webkit-full-page-media, _:future, :root .theme-dark h3 span{
    font-weight: lighter;
}


.heading{
    font-family: MPLUS-Eb;
    font-size: 2.8rem;
}

.ta-l{ text-align: left; }
.ta-r{ text-align: right; }
.ta-c{ text-align: center; }

#page footer{
    margin-top: 20rem;
    flex: 1;
}
#page footer .content:after{
    content: "";
    display: block;
    width: 24.4rem;
    height: 26.9rem;
    position: absolute;
    top: -17rem;
    left: -9rem;
    z-index: -1;
    transform: rotate(2deg);
    transition: 0s;
}
.theme-light #page footer .content:after{ background: url("../images/chara-light.png") no-repeat center bottom / 100% auto; }
.theme-dark #page footer .content:after{ background: url("../images/chara-dark.png") no-repeat center bottom / 100% auto; }


/* テーブル */
.base-table dl{
    display: flex;
    flex-wrap: wrap;
}
.base-table dt{
    width: 15.5rem;
}
.base-table dd{
    margin-left: 2rem;
    flex: 1;
}
.base-table dt, .base-table dd{
    padding: 4rem 2rem;
    line-height: 2;
    transform: rotate(0.03deg);
}
.theme-light .base-table dt,
.theme-light .base-table dd{
    border-bottom: solid 0.2rem #ececec;
}
.theme-dark .base-table dt,
.theme-dark .base-table dd{
    border-bottom: solid 0.2rem #7f8a98;
}
.base-table .table-row:last-child dt, .base-table .table-row:last-child dd{
    border: none;
}
.theme-light .base-table dt{ color: #de7d11; }
.theme-dark .base-table dt{ color: #ffffff; }
.base-table .noborder-bottom dt,
.base-table .noborder-bottom dd{
    border: none !important;
    padding-bottom: 0 !important;
}
.base-table .nopadding-top dt,
.base-table .nopadding-top dd{
    padding-top: 0 !important;
}

.base-table h4{
    font-family: MPLUS-Eb;
    transform: rotate(0.03deg);
}
.base-table p:not(:last-child){
    margin-bottom: 3rem;
}

/* フォーム */
.form .form-row:not(:last-child){
    margin-bottom: 4rem;
}
.form .form-row dl{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.form .form-row dl dt{
    width: 17rem;
}
.form .form-row dl dt, .form .form-row dl dd.form-label{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-top: 0.8rem;
    line-height: 1.75;
}
.form .form-row dl dd{
    flex: 1;
}
.form .form-row dl dt,
.form .form-row dl dd{
    transform: rotate(0.03deg);
    position: relative;
}
.form .form-row dl dt p{
    font-size: 1.2rem;
    padding-right: 3rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}
.theme-light .form .form-row dl dt p{ color: #de7d11; }
.theme-dark .form .form-row dl dt p{ color: #ca446a; }
.form span.att{
    font-size: 50%;
    margin: 0.2rem 0.4rem 0;
}
.theme-light .form span.att{ color: #de7d11; }
.theme-dark .form span.att{ color: #ca446a; }

.form input, .form select, .form textarea{
    width: 100%;
    padding: 1.2rem 2.5rem;
    font-size: inherit;
    border-radius: 0.5rem;
    color: inherit;
    appearance: none;
    border: none;
    resize: none;
    transform: rotate(0.03deg);
}
.theme-light .form input,
.theme-light .form select,
.theme-light .form textarea{
    background: #fffae9;
}
.theme-dark .form input,
.theme-dark .form select,
.theme-dark .form textarea{
    background: #e7ebef;
}

.theme-light *::placeholder{ color: #bcac74; }
.theme-dark *::placeholder{ color: #9ab1cb; }

.policy-agree{
    margin-top: 5rem;
    text-align: center;
    transform: rotate(0.03deg);
}
.policy-agree input{
    scale: 1.2;
    margin-right: 0.5rem;
    transform: translate(0, 0.1rem);
}

form .err-msg{
    color: #de112c;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: -2.5rem;
}
form .policy-agree .err-msg{
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.form-send .btn, .form-back .btn{
    width: 30rem;
    height: 6rem;
    border-radius: 6rem;
    margin: 5rem auto;
    position: relative;
}
.form-back .btn{
    margin: 5rem auto 0 0;
}
.form-send .btn a, .form-back .btn a{
    border-radius: 6rem;
}
.form-send .btn a span, .form-back .btn a span{
    font-size: 2.2rem;
    line-height: 6rem;
    border-radius: 5.4rem;
    font-family: MPLUS-Eb;
}
.form-send .btn a:after{
    content: "";
    display: inline-block;
    width: 4.6rem;
    height: 1rem;
    background: url("../images/about/arrow.png") no-repeat center bottom / 100% auto;
    position: absolute;
    top: 50%;
    right: 1.8rem;
    transform: translate(0, -50%);
    pointer-events: none;
}
.form-back .btn a:after{
    content: "";
    display: inline-block;
    width: 4.6rem;
    height: 1rem;
    background: url("../images/about/arrow.png") no-repeat center bottom / 100% auto;
    scale: -1 1;
    position: absolute;
    top: 50%;
    left: 1.8rem;
    transform: translate(0, -50%);
    pointer-events: none;
}
.theme-dark :not(.btn) .a-external:after, .theme-dark .btn .a-external span:after{
    background: url("../images/ic-external-thick-dark.png") no-repeat center bottom / 100% auto;
}
.form-send .btn a span, .form-back .btn a span{
    border-radius: 5.4rem;
}

.recaptcha{
    text-align: center;
}

@media (max-width: 1024px) {

    .pc{
        display: none !important;
    }
    .sp{
        display: block !important;
    }

    .content{
        padding: 0 2rem 0;
    }

    .inner_content{
        padding: 0 2rem;
    }


    /****************************************
    font-size
    ****************************************/
    .fs-base{ font-size: 2.8rem; }
    .fs-small{ font-size: 2rem; }

    /****************************************
    line-height
    ****************************************/
    .lh-15{ line-height: 1.75; }

    .page-main{
        padding: 23rem 0 0;
        font-size: 2.8rem;
        margin-top: -7.8rem;
    }
    #page article{
        min-height: calc(100vh - 23rem);
    }
    .page-object-wave{
        width: 68.4rem;
        margin: -19rem -34rem 0 0;
    }
    .page-haeder .content{
        padding: 0 2.5rem 0;
    }
    .page-title h2{
        font-size: 9rem;
    }
    .page-title span{
        font-size: 3.6rem;
    }
    h3{
        font-size: 6.8rem;
        padding-top: 3.5rem;
    }
    h3 span{
        font-size: 3.2rem;
        margin-top: 2rem;
    }
    h3:before{
        width: 13.2rem;
        height: 12.3rem;
        left: -2rem;
    }
    .heading{
        font-size: 4rem;
    }

    #page footer{
        margin-top: 25rem;
    }

    #page footer .content:after{
        top: -19rem;
        left: 0rem;
        transform: rotate(-8deg);
    }

    .recaptcha{
        padding: 0 4rem;
        line-height: 1.75;
        text-align: left;
    }

    /* テーブル */
    .base-table dt, .base-table dd{
        padding: 6rem 1rem;
        line-height: 1.5;
        transform: rotate(0.03deg);
    }

    .base-table .table-row:nth-child(2) dt,
    .base-table .table-row:nth-child(2) dd{
        padding: 6rem 1rem 5.5rem;
    }

    /* フォーム */
        .form .form-row dl dt{
        padding-top: 0;
    }

    .form .form-row dl dd{
        margin-top: 1rem;
    }

    .form .form-row:not(:last-child){
        margin-bottom: 5rem;
    }

    .form input, .form select, .form textarea{
        border-radius: 1rem;
    }

    .form-send .btn, .form-back .btn{
        width: 40.5rem;
        height: 10rem;
        border-radius: 10rem;
        margin: 5rem auto;
    }
    .form-back .btn{
        margin: 10rem 0 0 0;
    }
    .form-send .btn a span, .form-back .btn a span{
        height: 9.6rem;
        font-size: 3.2rem;
        line-height: 10rem;
    }
    .form-send .btn a:after, .form-back .btn a:after{
        width: 5.8rem;
        height: 1.3rem;
        position: absolute;
        top: 50%;
        right: 2rem;
    }
    .form-back .btn a:after{
        left: 3.5rem;
    }

    .form .form-row dl dt, .form .form-row dl dd{
        width: 100%;
    }

    .form .form-row dl dt p{
        width: 100%;
        font-size: 2.4rem;
    }

    .policy-agree{
        margin: 8rem 0 7rem;
    }

    form .err-msg{
        font-size: 2.4rem;
        margin-bottom: -3.5rem;
    }
}