@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
}
body, main, div {
	-webkit-overflow-scrolling: touch;
}
body {
	background-color: #212529;
	color: #6c757d;
}
* {
    font-family: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	line-height: 1.75em;
}
code.keyword {
    background-color: rgba(0, 0, 0, 0.066);
    color: inherit;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
code[class*=language-], pre[class*=language-] {
    font-size: 0.87rem!important;
}
pre > code * {
    font-family: inherit;
}
input, textarea, select, button, submit {
	font-size: inherit;
}
small {
	font-size: 80%;
}
ul, ol {
    column-gap: 2rem;
    margin: 0;
    padding-inline-start: 1.5rem;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
li {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
label {
    margin-bottom: 0;
}

i {
	position: relative;
}
i.overlay-top-right {
	font-size: 50%;
	position: absolute;
	top: -30%;
	right: -30%;
}
i.overlay-bottom-right {
	font-size: 50%;
	position: absolute;
	bottom: -10%;
	right: -30%;
}

.w-1em {
    width: 1em;
}

.wrapper {
    padding-bottom: 10rem;
}
@media (min-width: 768px) {
    .wrapper {
        padding-bottom: 10rem;
    }
}
header {
    z-index: 20;
}
main {
    z-index: 10;
	color: #333;
}
footer {
    z-index: 0;
}

.fixed-0 {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.absolute-0 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.top-auto {
	top: auto;
}
.bottom-auto {
	bottom: auto;
}
.left-auto {
	left: auto;
}
.right-auto {
	right: auto;
}

.img-logo {
    width: 2.5rem;
    height: auto;
}

.font-weight-middle {
    font-weight: 500;
}

.text-shadow {
	text-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.text-small {
    font-size: 80%;
}
.text-large {
    font-size: 125%;
}
.text-large2 {
    font-size: 150%;
}

.text-black {
    color: #333;
}
.text-black-20 {
    color: rgba(0, 0, 0, .2) !important;
}

.bg-black {
    background-color: rgba(0, 0, 0, 1);
}
.bg-black-1 {
    background-color: rgba(0, 0, 0, .01);
}
.bg-black-5 {
    background-color: rgba(0, 0, 0, .05);
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1);
}
.bg-white-90 {
    background-color: rgba(255, 255, 255, .9);
}
.bg-light-warning {
    background-color: #fffcf5;
}

.line-height-2em {
    line-height: 2em;
}

.border-black-10 {
    border-color: rgba(0, 0, 0, .1);
}

a, a:hover, a:active, a:visited, a:focus, a:hover {
	color: #155ebd;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
footer a, footer a:visited {
	color: #adb5bd;
	text-decoration: none;
}
footer a:hover, footer a:active, footer a:focus, footer a:hover {
	color: #fff;
	text-decoration: none;
}

a.inherit, a.inherit:hover, a.inherit:active, a.inherit:visited, a.inherit:focus, a.inherit:hover {
	color: inherit;
	text-decoration: none;
}

.hover-control:not(:hover) .show-on-hover {
	display: none!important;
}

.x-container-1 {
	max-width: 90vw;
	margin: 0 auto;
}
.x-container-1 .x-col {
	max-width: 100%;
}
@media (max-width: 640px) and (orientation: landscape) {
    .x-container-1 {
    	display: flex;
    }
    .x-container-1 .x-col {
    	flex-basis: 50%;
    	min-height: 16rem;
    }
}
@media (min-width: 641px) {
    .x-container-1 {
    	display: flex;
    }
    .x-container-1 .x-col {
    	flex-basis: 50%;
    	min-height: 20rem;
    }
}
@media (min-width: 768px) and (orientation: landscape) {
    .x-container-1 .x-col {
    	min-height: 26rem;
    }
}
@media (min-width: 1025px) {
    .x-container-1 .x-col {
    	min-height: 35vw;
    }
}

.x-container-2 {
	max-width: 65rem;
	margin: 0 auto;
}

.x-container-3 {
	max-width: 87.5rem;
	margin: 0 auto;
}
.x-container-3-inner {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 87.5rem) {
    .x-container-3-inner {
    	padding-left: 0;
    	padding-right: 0;
    }
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;

    & > [class^="col-"],
    & > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

.title-1 {
	font-size: 1.5rem;
}
@media (min-width: 641px) {
	.title-1 {
		font-size: 3.5vw;
	}
	.desc-1 {
		font-size: 2vw;
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}
@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}
@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

.slidein-bottom-enter-active, .slidein-bottom-leave-active {
	transition: .2s;
}
.slidein-bottom-enter, .slidein-bottom-leave-to {
	transform: translate(0, 100%);
}

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-pointer {
	cursor: pointer;
}

.line-clamp-2 {
	display: -webkit-box;
	display: -moz-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

.text-cp-red {
	color: #db2828;
}
.text-cp-orange{
	color: #f2711c;
}
.text-cp-yellow {
	color: #fbbd08;
}
.text-cp-olive {
	color: #b5cc18;
}
.text-cp-green {
	color: #21ba45;
}
.text-cp-teal {
	color: #00b5ad;
}
.text-cp-blue {
	color: #2185d0;
}
.text-cp-violet {
	color: #6435c9;
}
.text-cp-purple {
	color: #a333c8;
}
.text-cp-pink {
	color: #e03997;
}
.text-cp-brown {
	color: #a5673f;
}
.text-cp-grey {
	color: #767676;
}
.text-cp-black {
	color: #1b1c1d;
}

@media (min-width: 1024px) {
    .h1-lg {
        font-size: 2.5rem;
    }
}

.google-auto-placed {
    margin-bottom: 1.25rem;
}