@charset "UTF-8";
body {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    
    background-color: #fff;
    margin: 0;
    position: relative;
}
body.bgblue,
body.load {
    /* background-color: #489EE4; */
}
body::before {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #489EE4;
    pointer-events: all;
    will-change: filter;
    transition: height .75s ease;
    z-index: 999;
}
body.load::before {
    height: 100lvh;
}
body.toup::before {
    top: 0;
}
main {
    background-color: #fff;
}
h1,h2,h3,h4,h5,h6,p {
    margin: 0;
}
img {
    vertical-align: top;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent; /* 強調をなくす */
    color: #fff;
}
a:hover {
    /* opacity: .75; */
    cursor: pointer;
}
a.underbar {
    position: relative;
}
a.underbar:after {
	content: '';
	background: #fff;
	position: absolute;
	bottom: -1px;
	left: 0;
	opacity: 0;
    transform-origin: left;
	/* transform: translateY(.25em) scale(0); */
	transform: scaleX(0);
	transition: opacity .4s ease, transform .4s ease;
	height: 1px;
	width: 100%;
}
a.underbar:hover:after {
	opacity: 1;
	/* transform: translateY(0) scale(1); */
	transform: scaleX(1);
}
ul,tr,th,td {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
    margin-bottom: 1em;
}
ul.disc {
    padding-left: 1em;
}
ul.disc li {
    list-style-type: "・";
    padding-left: .5em;
    line-height: 1.75em;
}
span {
    display: inline-block;
}
.no_scroll {
	overflow: hidden;
}
.btn {
    cursor: pointer;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
}
/* reCAPTCHA */
.grecaptcha-badge { visibility: hidden; }

/*--------------------------------------------
ヘッダー
--------------------------------------------*/
header {
    width: 85%;
    padding: 0 7.5%;
    margin: 0 auto;
    z-index: 100;
    pointer-events: none;
    position: absolute;
    height: 100svh;
}
header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #489EE4;
    pointer-events: all;
    will-change: filter;
    transition: height .75s ease;
}
header.fixed {
    position: fixed;
}
header.active::before {
    height: 100%;
}
header .logo_area {
    display: flex;
    align-items: center;
    flex-direction: column;
    pointer-events: all;
    width: max(120px, 7vw);
    height: max-content;
    position: absolute;
    /* transform: translate(0, 0); */
    /* background-color: antiquewhite; */
    margin-top: max(64px, 4.25vw);
    right: 7.5%;
    z-index: 1;
    transition: all .75s ease;
}
header .logo_area .logo {
    width: 100%;
    fill: #489EE4;
    position: relative;
    aspect-ratio: 1 / 1.168;
    mask-image:
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))
    ;
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-position: top center, bottom center, center;
    mask-size: 100% 65%, 100% 0%, 100% 100%;
    transition: mask-size 0s ease, fill .2s .375s linear;
}
header .logo_area .logo::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34%;
    background-color: #fff;
    opacity: 1;
    transition: opacity 1.5s ease;
}
header .logo_area .logo.show {
    mask-size: 100% 65%, 100% 35%;
}
header .logo_area .logo.show::before {
    opacity: 0;
}
header .logo_area .logo svg {
    width: 100%;
    height: 100%;
}
header .logo_area .logo.active {
    fill: #fff;
    transition: fill .2s 0s linear;
}
header .logo_area .hamburger {
    width: 87px;
    margin-top: 75px;
    -webkit-tap-highlight-color: transparent; /* 強調をなくす */
}
header nav {
    display: flex;
    flex-direction: column;
    margin-top: max(205px, 12.5vw);
    margin-left: max(98px, 5.15vw);
    user-select: none;
}
header.active nav {
    pointer-events: all;
}
header nav a {
    /* font-size: max(22px, 1.15vw) !important; */
    /* font-size: max(22px, 1.725vw) !important; */
    font-size: max(23px, 1.5vw) !important;
    font-weight: 200 !important;
    letter-spacing: .15em !important;
    width: max-content !important;
    /* color: #000 !important; */
}
header nav > *:not(:last-child) {
    margin-bottom: max(44px, 2.4vw);
}
header nav > *:last-child a {
    /* font-size: max(15px, .5vw) !important; */
    font-size: max(15px, 1vw) !important;
}
header .bottom {
    width: 100%;
    font-size: max(12px, .6vw);
    display: flex;
    justify-content: flex-end;
    font-weight: 200;
    letter-spacing: .075em;
    position: fixed;
    bottom: max(48px, 3.25vw);
    right: 7.5%;
    color: #fff;
    opacity: 0;
    transition: opacity 0s 0s;
}
header.active .bottom {
    opacity: 1;
    transition: opacity .5s .5s;
}
header .bottom p {
    display: inline-block;
    margin-left: 40px;
}

/*--------------------------------------------
トップページ
--------------------------------------------*/
section {
    width: 85%;
    margin: 0 auto;
    position: relative;
}

.title h2 {
    /* font-size: 17px; */
    font-size: max(17px, .925vw);
    font-weight: 500;
    line-height: 1;
    /* margin-top: 28px; */
    margin-top: 1.55em;
}
.icons {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    /* width: 90.5%; */
    width: 94%;
    /* margin-top: 88px; */
    /* margin-top: max(88px, 6vw); */
    margin-top: max(68px, 6vw);
    overflow: hidden;
}
/* .icons > * { */
.icons .anime {
    max-width: 600px !important;
    width: 26%;
    position: relative;
    overflow: hidden;
}
.animation_container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.1;
}
.canvas {
    width: 100% !important;
    height: 100% !important;
}
#canvas1 {
    transform: rotate(-4deg);
    animation: anime_drill 3s infinite;
}
@keyframes anime_drill {
    0% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(-4deg);
    }
}

#omoi {
    /* padding: max(64px, 4.25vw) 0 max(128px, 8.5vw); */
    padding: max(64px, 4.25vw) 0;
    color: #489EE4;
}
#omoi .title h1 {
    font-size: max(76px, 5vw);
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: .05em;
    margin-top: -.25em;
    margin-bottom: .3em;
} 
#omoi .title .container {
    display: flex;
    justify-content: space-between;
    font-size: max(22px, 1.25vw);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .1em;
    max-width: max(550px, 30vw);
}
#omoi .title .container span {
    border-top: 1px solid #489EE4;
    width: 16%;
    margin-top: .6em;
}
#omoi .scroll_down {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25px;
    writing-mode: vertical-rl;
    color: #489EE4;
    font-size: max(12px, .8vw);
    z-index: 1;
}
#omoi .scroll_down:hover {
    /* opacity: .75 !important; */
}
#omoi .scroll_down span.blue_bar {
    border-left: 1px solid #489EE4;
    /* height: 80px; */
    height: max(80px, 5.5vw);
    margin-top: .65em;
    margin-left: -2px;
    mask-image: url("../img/mask.png");
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: 100% 0%;
    animation: anime_scroll_bar 3s 3s forwards infinite linear;
}
#omoi .scroll_down span.white_bar {
    position: relative;
    width: 25px;
    /* height: 80px;
    margin-bottom: -80px; */
    height: max(80px, 5.5vw);
    margin-bottom: min(-80px, -5.5vw);
    mask-image: url("../img/mask.png");
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: 100% 0%;
    animation: anime_scroll_bar 3s 3.75s forwards infinite linear;
}
#omoi .scroll_down span.white_bar::after {
    content: "";
    position: absolute;
    border-left: 1px solid #fff;
    top: 0;
    left: 11px;
    width: 100%;
    height: 100%;
}

#onestop {
    background-color: #489EE4;
    border-radius: 16px;
    color: #fff;
    /* padding: max(64px, 4.25vw) max(72px, 4.78125vw) max(128px, 8.5vw); */
    /* padding: max(64px, 4.25vw) max(72px, 4.78125vw) max(96px, 6.5vw); */
    /* padding: 4.25vw 4.78125vw 6.5vw; */
    padding: max(64px, 4.25vw) 4.78125vw max(84px, 6.5vw);
}
#onestop .title h1 {
    font-size: max(64px, 4.3vw);
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: .05em;
} 
#onestop .title h1 span.space {
    letter-spacing: -.3em;
}
#onestop .icons {
    /* width: 82%; */
}
#onestop .icons img {
    /* max-width: 15%; */
}

#takumi {
    /* background-color: #c89090; */
    color: #489EE4;
    position: relative;
    /*  */
}
#takumi > div {
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    
    /* 199px =  680 - 481 */
    /* 1.414 =  680 / 481 */
    /* 38.178vw = 27vw * 1.414 */
    /* 縦方向余白高さ : 99.5 = (680 - 481) / 2 */
    /* scale : calc(40.77vw / 595) */
    
    padding: max(calc(100px - calc(calc(40.77vw / 595) * 99.5)), calc(9.5vw - calc(calc(40.77vw / 595) * 99.5))) 0;
    /* padding: calc(9.5vw - calc(calc(40.77vw / 595) * 99.5)) 0; */
    /* padding: max(160px, 9.5vw) 0; */
}
#takumi .title h1 {
    font-size: max(64px, 4.3vw);
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: .05em;
} 
#takumi .play_canvas7 {
    position: relative !important;
    overflow: hidden !important;
    /* 1.51 =  595 / 394 */
    /* 40.77vw = 27vw * 1.51 */
    /* 100.5 = (595 - 394) / 2 */
    width: 40.77vw !important;
    margin-left: calc(13.1vw - calc(calc(40.77vw / 595) * 100.5));
    aspect-ratio: 1 / 1.143;
}
#takumi img {
    width: 27vw;
    margin-left: 13.1vw;
}

/*--------------------------------------------
サブページ
--------------------------------------------*/

#subpage {
    padding: max(64px, 4.25vw) 0 max(72px, 4.25vw);
    color: #489EE4;
    min-height: 650px;
}
#subpage h3 {
    font-weight: 500;
}
#subpage .title {
    margin-top: max(90px, 5.25vw);
}
#subpage .title h1 {
    font-size: max(54px, 3.3vw);
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: .05em;
}
#subpage dl dt,
#subpage dl dd {
    font-size: max(17px, .925vw);
    font-weight: 500;
    line-height: 2em;
}
#subpage dl dd a {
    color: #489EE4;
    text-decoration: underline;
}
#subpage dl.base {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: max(200px, 9.5vw);
}
#subpage dl.base > dt {
    /* font-size: 22px; */
    font-size: max(22px, 1.25vw);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.5em;
    /* max-width: 390px; */
    max-width: 500px;
    width: 30%;
    margin: 0;
    position: 0;
    /* background-color: aqua; */
}
#subpage dl.base > dd {
    width: 70%;
    margin: 0;
    position: 0;
    margin-bottom: max(95px, 5.5vw);
}
#subpage dl.base > dd p {
    text-align: justify;
}
#subpage dl.base > dd > #slider {
    border-radius: 16px;
    width: 100%;
    margin-top: min(10vw, 55px);
    display: block;
    overflow: hidden;
}
#subpage dl.base > dd > #slider .item {
    margin: 0 8px;
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
#subpage dl.base > dd > #slider .item img {
    width: 100%;
}

/* section.banner #slider {
	max-width: 950px;
	width: 90%;
	margin: 0 auto;
}
section.banner #slider .item a {
	margin: 0 8px;
	display: block;
	border-radius: 8px;
	overflow: hidden;
} */

#subpage dl.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 17px;
    margin: 0;
}
#subpage dl.list > dt {
    /* width: max(160px, 25%); */
    width: max(190px, 20.5%);
    margin: 0;
    /* background-color: aqua; */
    line-height: 1.5em;
}
#subpage dl.list > dd {
    /* max-width: 590px; */
    /* width: 100%; */
    width: calc(100% - max(190px, 20.5%));
    margin: 0;
    line-height: 1.75em;
    /* background-color: aqua; */
}
#subpage dl.list > dd:not(:last-child) {
    margin-bottom: 2em;
}
#subpage dl.list > dd textarea {
    resize: none;
}
#subpage dl.list > dd input,
#subpage dl.list > dd textarea {
    /* border: 1px solid #489ee4a0; */
    border: 1px solid #489EE4;
    box-sizing: border-box;
    border-radius: 8px;
    padding: .6em;
    color: #489EE4;
    /* background-color: #fff; */
}
#subpage dl.list > dd input:focus,
#subpage dl.list > dd textarea:focus {
    border: 1px solid #177ed3;
    outline: none; /* フォーカス時の枠線を削除 */
    /* box-sizing: content-box; */
}
#subpage dl.list > dd input,
#subpage dl.list > dd textarea,
#subpage dl.list > dd div:has(.btn),
#subpage .note {
    /* font-size: 17px; */
    width: 100%;
    /* max-width: 590px; */
    max-width: 80%;
}
#subpage dl.list > dd:has(textarea) {
    margin-bottom: 29px !important;
}
#subpage dl.list > dd .btn {
    float: right;
    text-decoration: none;
    /* padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none;
    float: right; */
}

#subpage .required {
    font-size: .6em;
    /* color: red; */
    margin-left: .6em;
}
::placeholder {
    color:#cccccc;
}
input[type="submit"] {
    border: 1px solid #489EE4;
    box-sizing: border-box;
    border-radius: 8px;
    padding: .6em;
    color: #489EE4;
    background-color: #489EE4;
    color: #fff !important;
    cursor: pointer;
    width: 100%;
    /* max-width: 590px; */
    max-width: 75%;
}
#subpage .note {
    font-size: .7em;
    margin-top: 4em;
    opacity: .7;
    line-height: 1.75em;
}

#subpage table {
    border-spacing: 0 2em;
    /* max-width: 590px; */
    max-width: 75%;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
#subpage table th,
#subpage table td {
    text-align: left;
    vertical-align: top;
    line-height: 1.75em;
}
#subpage table th {
    min-width: 175px;
    width: auto;
    /* padding-right: 2em; */
}
#subpage table td {
    width: 80%;
}

/*--------------------------------------------
フッター
--------------------------------------------*/
footer {
    width: 85%;
    margin: 0 auto;
    background-color: #489EE4;
    padding: max(64px, 4.25vw) 7.5%;
    color: #fff;
    position: relative;
}
footer img.logo {
    /* max-height: 66px; */
    /* max-width: max-content; */
    /* max-height: max(66px, 3.5vw); */
    max-width: max(420px, 22vw);
}
footer nav {
    /* font-size: 22px; */
    font-size: max(22px, 1.15vw);
    font-weight: 200;
    letter-spacing: .15em;
    display: flex;
    flex-direction: column;
    margin-top: max(64px, 3.5vw);
    /* margin-left: 98px; */
    margin-left: max(98px, 5.15vw);
}
footer nav a {
    width: max-content;
    user-select: none;
}
footer nav a:last-child {
    /* margin-top: 44px; */
    margin-top: max(44px, 2.4vw);
}
footer .bottom {
    width: 100%;
    /* text-align: right; */
    /* font-size: 12px; */
    font-size: max(12px, .6vw);
    display: flex;
    justify-content: flex-end;
    font-weight: 200;
    letter-spacing: .075em;
    margin-top: max(64px, 4.25vw);
    user-select: none;
}
footer .bottom p {
    display: inline-block;
    margin-left: 40px;
}
footer .scroll_up {
    position: absolute;
    /* top: 0; */
    top: max(80px, 5.5vw);
    right: 7.5%;
    transform: translateY(-100%);
    writing-mode: vertical-rl;
    color: #489EE4;
    /* font-size: 12px; */
    font-size: max(12px, .8vw);
    z-index: 1;
    width: 25px;
}
/* footer .scroll_up:hover {
    opacity: .75 !important;
} */
footer .scroll_up span.blue_bar {
    border-left: 1px solid #489EE4;
    width: 10px;
    /* height: 80px; */
    height: max(80px, 4vw);
    margin-top: .65em;
    position: relative;
    box-sizing: border-box;
    margin-left: 5px;
    mask-image: url("../img/mask.png");
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: 100% 0%;
}
footer .scroll_up.start span.blue_bar {
    animation: 
        anime_scroll_bar 2s .5s forwards linear reverse,
        anime_scroll_bar_up 2s 2.5s forwards linear reverse;
    ;
}
footer .scroll_up span.blue_bar::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    border-top: 1px solid #489EE4;
    /* margin-top: min(80px, 5.5vw); */
    transform: rotate(60deg);
    transform-origin: left top;
}
footer .scroll_up span.white_bar {
    position: relative;
    width: 25px;
    /* height: 80px;
    margin-bottom: -80px; */
    height: max(80px, 5.5vw);
    /* margin-bottom: min(-80px, -5.5vw); */
    mask-image: url("../img/mask.png");
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: 100% 0%;
}
footer .scroll_up.start span.white_bar {
    animation: 
        anime_scroll_bar 2s 0s forwards linear reverse,
        anime_scroll_bar_up 2s 2s forwards linear reverse;
    ;
}
footer .scroll_up span.white_bar::after {
    position: absolute;
    content: "";
    top: 0;
    left: 10px;
    width: 100%;
    height: 100%;
    border-left: 1px solid #fff;
}
@keyframes anime_scroll_bar {
    0% {
        mask-position: top center;
        mask-size: 100% 0%;
    }
    25% {
        mask-position: top center;
        mask-size: 100% 100%;
    }
    50% {
        mask-position: top center;
        mask-size: 100% 100%;
    }
    51% {
        mask-position: bottom center;
        mask-size: 100% 100%;
    }
    75% {
        mask-position: bottom center;
        mask-size: 100% 0%;
    }
    100% {
        mask-position: bottom center;
        mask-size: 100% 0%;
    }
}
@keyframes anime_scroll_bar_up {
    0% {
        mask-position: bottom center;
        mask-size: 100% 100%;
    }
    25% {
        mask-position: bottom center;
        mask-size: 100% 100%;
    }
    50% {
        mask-position: bottom center;
        mask-size: 100% 100%;
    }
    51% {
        mask-position: bottom center;
        mask-size: 100% 100%;
    }
    75% {
        mask-position: bottom center;
        mask-size: 100% 0%;
    }
    100% {
        mask-position: bottom center;
        mask-size: 100% 0%;
    }
}

/*--------------------------------------------
ローディング
--------------------------------------------*/

body.init header > * {
    display: none;
}
body.loading {
    /* background-color: #489EE4; */
}
body.loading header {
    position: fixed;
}
body.loading header::before {
    height: 100svh;
}
body.loading header .logo_area {
    /* margin-top: calc(50svh + 27px); */
    margin-top: calc(50svh - 33px);
    right: 50%;
    transform: translate(50%, 0);
}
body.loading header .logo_area .btn {
    pointer-events: none;
}
body.loading header .logo_area .logo {
    fill: #fff;
}
body.loading header .logo_area .logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 62%;
    opacity: .9;
    background-color: #489EE4;
    transition: height .5s ease;
    /* opacity: .7; */
    /* animation: loading_anime .75s 0s forwards alternate infinite ease; */
}
body.loading header .logo_area .logo.nocache::after {
    height: 0%;
}
@keyframes loading_anime {
    0% { opacity: .7; }
    100% { opacity: .9; }
}
body.loading header .logo_area .hamburger {
    display: none;
}

/*--------------------------------------------
アニメーション
--------------------------------------------*/

/* 下から文字が出てくる */
.a_up {
    overflow: hidden;
}
.a_up.start {
    animation: anime_up_reset 0s 1s forwards ease;
}
@keyframes anime_up_reset {
    to { overflow: visible; }
}
.a_up > * {
    /* transform: translateY(calc(100% + 5px)); */
    transform: translateY(calc(100% + 5%));
    display: block;
    transition: transform 1s ease;
}
.a_up.fast > * {
    transition: transform .5s 0s ease !important;
}
.a_up.start > * {
    transform: translateY(0px);
}
/* 透明から表示 */
.a_fade {
    opacity: 0;
}
.a_fade.start {
    animation: anime_fade 1.5s 0s forwards ease;
}
@keyframes anime_fade {
    to {
        opacity: 1;
    }
}
/* 下からふわっと表示 */
.a_up_fade {
	opacity : 0;
	transform : translate(0, 100px);
}
.a_up_fade.start {
    animation: anime_up_fade 1s 0s forwards ease;
}
@keyframes anime_up_fade {
    to {
        opacity : 1;
	    transform : translate(0, 0);
    }
}

/*--------------------------------------------
装飾
--------------------------------------------*/

/* ハンバーガーメニュー */
.hamburger {
    position: relative;
    height: 30px;
    cursor: pointer;
}
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #489EE4;
    border-radius: 1px;
    transition: all .5s ease;
}
.hamburger, .hamburger span {
    display: inline-block;
    box-sizing: border-box;
}
.hamburger span:nth-of-type(1) {
    top: 0;
}
.hamburger span:nth-of-type(2),
.hamburger span:nth-of-type(3) {
    top: 15px;
}
.hamburger span:nth-of-type(4) {
    bottom: 0;
}
.hamburger.active span {
    background-color: #fff;
}
.hamburger.active span:nth-of-type(1) {
    opacity: 0;
    transform: translateY(15px);
}
.hamburger.active span:nth-of-type(2) {
    transform: translateY(0) rotate(30deg);
}
.hamburger.active span:nth-of-type(3) {
    transform: translateY(0) rotate(-30deg);
}
.hamburger.active span:nth-of-type(4) {
    opacity: 0;
    transform: translateY(-15px);
}

/*--------------------------------------------
レスポンシブ
--------------------------------------------*/
/* @media screen and (max-width: 1023px) { */
@media screen and (max-width: 1400px) {

    /* .icons > * { */
    .icons .anime {
        width: 30%;
    }

    section {
        width: 90%;
    }

    header {
        width: 90%;
        padding: 0 5%;
    }
    header .logo_area {
        right: 5%;
        width: min(12.5vw, 120px);
    }
    header .logo_area .hamburger {
        /* width: 10vw; */
        margin-top: 50px;
        max-width: 87px;
    }
    header nav {
        margin-left: min(10.5vw, 98px);
    }

    #omoi .title h1 {
        font-size: min(7vw, 76px);
    } 
    #omoi .title .container {
        font-size: min(2.4vw, 22px);
        max-width: min(52vw, 550px);
    }
    #omoi .title .container span {
        width: 11%;
        margin-top: .5em;
    }
    #omoi .title h2 {
        line-height: 1.5;
        margin-top: 1em;
        max-width: 52vw;
        text-align: justify;
    }

    #onestop {
        padding: max(64px, 4.25vw) 3.78125vw max(84px, 6.5vw);
    }
    #onestop .title h1 {
        font-size: min(5.75vw, 64px);
    }
    #onestop .title h2 {
        line-height: 1.5;
        margin-top: 1em;
        /* max-width: 52vw; */
        /* text-align: justify; */
    }

    #takumi > div {
        position: relative;
        /* display: block; */
        justify-content: flex-end;
    }
    #takumi .title {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
    #takumi .title h1 {
        font-size: min(5.75vw, 64px);
    } 
    #takumi .title h2 {
        line-height: 1.5;
        margin-top: 1em;
        max-width: 46vw;
        text-align: justify;
    }
    #takumi .play_canvas7 {
        margin-left: 0 !important;
        margin-right: -3vw;
        width: 45vw !important;
    }

    #subpage .title {
        margin-top: min(9vw, 90px)
    }
    #subpage dl.base {
        padding-top: min(14vw, 200px);
    }
    #subpage dl.list > dd input,
    #subpage dl.list > dd textarea,
    #subpage dl.list > dd div:has(.btn),
    #subpage .note {
        max-width: 100%;
    }
    input[type="submit"] {
        max-width: 100%;
    }
    #subpage table {
        max-width: 100%;
    }

    footer {
        width: 90%;
        padding: max(64px, 4.25vw) 5% max(45px, 4vw);
    }
    footer img.logo {
        max-width: min(45vw, 420px);
    }
    footer nav {
        margin-left: min(10.5vw, 98px);
        font-size: min(2.5vw, 22px);
    }
    footer .scroll_up {
        right: 5%;
        top: min(16vw, 80px);
    }
    footer .scroll_up span.blue_bar {
        height: min(5vw, 80px);
    }
    footer .scroll_up span.white_bar {
        height: min(16vw, 80px);
        /* margin-bottom: max(-16vw, -80px); */
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1023px) {
    header .logo_area .hamburger {
        width: 80%;
        margin-top: 6vw;
    }

    #subpage .title {
        margin-top: min(9vw, 90px);
    }
    #subpage .title h1 {
        font-size: 44px;
    }
    #subpage dl.base {
        display: block;
        padding-top: 25vw;
    }
    #subpage dl.base > dt {
        width: 100%;
    }
    #subpage dl.base > dd {
        width: 100%;
        margin-top: 3em;
        margin-bottom: min(19.5vw, 95px);
    }
}

@media screen and (orientation: portrait) and (max-width: 1023px) {
/* @media screen and (max-width: 1023px) { */
    
    body {
         background-color: #fff;
    }

    header {
        width: 84%;
        padding: 0 8%;
    }
    header .logo_area {
        right: 4%;
    }
    /* footer {
        width: 80%;
        padding: max(64px, 4.25vw) 10%;
    } */
    section:not(#subpage) {
        width: 84%;
    }

    .icons {
        width: 108%;
        margin-left: -4%;
        display: block;
        position: relative;
        /* height: calc(70vw * 1.1); */
        height: min(calc(62vw * 1.1), calc(330px * 1.1));
        margin-top: min(1vw, 68px);
    }
    /* .icons > * { */
    .icons .anime {
        position: absolute;
        max-width: auto !important;
        /* width: 70vw !important; */
        width: min(62vw, 330px) !important;
        overflow: visible !important;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
    }

    header .logo_area {
        /* margin-top: min(4.75vw, 64px); */
        margin-top: 31px;
        /* width: min(18vw, 120px); */
        width: min(20vw, 120px);
    }
    header .logo_area .hamburger {
        /* width: 12vw; */
        width: 80%;
        margin-top: 6vw;
    }
    header nav {
        margin-left: 2%;
        margin-top: calc(22vw + 130px);
    }

    #omoi {
        /* padding: 52vw 0 15vw; */
        width: 100% !important;
        /* padding: 53vw 5% 15vw; */
        /* padding: 61vw 5% 15vw; */
        padding: calc(22vw + 130px) 4% 20vw;
        /* overflow: hidden; */
        box-sizing: border-box;
    }
    #omoi .title h1 {
        font-size: min(11vw, 76px);
    }
    #omoi .title .container {
        /* font-size: 4.2vw; */
        /* font-size: 4.5vw; */
        font-size: min(4.5vw, 26px);
        /* max-width: 100%; */
        max-width: min(100%, 555px);
    }
    #omoi .title .container span {
        width: 8%;
        margin-top: .55em;
    }
    #omoi .title h2 {
        font-size: 16px;
        max-width: 100%;
    }
    #omoi .scroll_down {
        /* right: 5%; */
        right: 5%;
        /* background-color: #fff; */
        /* -webkit-text-stroke-width: 3px;
        -webkit-text-stroke-color: #fff; */
        padding-top: .5em;
        /* border-radius: 4px; */
    }
    #omoi .scroll_down span.blue_bar {
        height: max(30px, 5.5vw);
    }
    #omoi .scroll_down span.white_bar {
        height: max(30px, 5.5vw);
    }

    #onestop {
        overflow: hidden;
        /* padding: 13vw 3.78125vw 15vw; */
        padding: 13vw 4vw 15vw;
    }
    #onestop .title h1 {
        font-size: min(9.5vw, 54px);
    }
    #onestop .title h2 {
        text-align: justify;
        padding-right: 4vw;
    }
    #onestop .icons {
        margin-top: 10vw;
    }

    #takumi > div {
        display: block;
        /* padding: max(64px, 4.25vw) 0 15px; */
        padding: 13vw 0 20px;
    }
    #takumi .title {
        position: static;
        transform: none;
        z-index: auto;
    }
    #takumi .title h1 {
        font-size: min(9.5vw, 54px);
    }
    #takumi .title h2 {
        max-width: none;
        text-align: justify;
    }
    #takumi .play_canvas7 {
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        margin-right: 0 !important;
        margin-top: -3vw !important;
        width: min(calc(62vw * 1.4), calc(420px * 1.4)) !important;
    }

    #subpage .title {
        margin-top: min(7.25vw, 90px);
    }

    footer {
        /* padding: max(64px, 4.25vw) 5% 32px; */
    }
    footer img.logo {
        max-width: min(75vw, 420px);
    }
    footer nav {
        margin-left: min(17vw, 100px);
        font-size: max(19px, 2.5vw);
    }
    footer .bottom {
        margin-top: 90px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
    footer .bottom a {
        margin-bottom: 1.5em;
    }
}

@media screen and (max-width: 650px) {
    #subpage {
        padding-top: 22px;
    }
    #subpage .title {
        margin-top: 17vw;
    }
    #subpage .title h1 {
        font-size: min(8.5vw, 42px);
    }

    #subpage dl.list dd {
        word-wrap: break-word;
    }

    #subpage form dl.list {
        display: block;
        /* padding-bottom: 2em; */
    }
    #subpage form dl.list dt {
        margin-bottom: .25em;
    }
    #subpage form dl.list dd {
        margin-bottom: .85em !important;
    }
    #subpage form dl.list dt,
    #subpage form dl.list dd {
        width: 100%;
        max-width: none;
    }

    #subpage table th,
    #subpage table td {
        width: 100%;
        display: block;
    }
    #subpage table th {
        font-size: 1.1em;
    }
    #subpage table td {
        padding-top: .5em;
    }
}

@media screen and (orientation: landscape) and (max-width: 650px) {
    #subpage .title {
        margin-top: 16.5vw;
    }
}

@media screen and (orientation: landscape) and (max-height: 650px) {
    
    header nav {
        margin-top: 100px;
    }
    header .bottom {
        display: none;
    }
    
    /* #omoi .scroll_down span.blue_bar {
        height: max(80px, 5.5vw);
    }
    #omoi .scroll_down span.white_bar {
        height: max(80px, 5.5vw);
    } */
}