@charset "UTF-8";
/* CSS Document */


/*--------------------------------------------------------------

 Reset | Made by Elly Loel - https://ellyloel.com/

--------------------------------------------------------------*/

*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){/*cursor:pointer*/;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}@media (prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(.25,0,.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}


/*--------------------------------------------------------------

 1.0 Initial settings

--------------------------------------------------------------*/

html {
	font-size: 62.5%;
	-webkit-overflow-scrolling: touch;
}

body {
	height: 100%;
	font-family: "Noto Sans JP", "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1.4em;
	line-height: 1;
	color: #3d3d3d;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	line-break: strict;
	background-color: var( --color-background );
}

a {
	text-decoration: none;
	color: #3d3d3d;
}

@media screen and (min-width: 1025px) {
	
	body {
        font-size: 1.6em;
	}
	
}


/*--------------------------------------------------------------

 2.0 Common style

--------------------------------------------------------------*/



/*--------------------------------------------------------------

 3.0 Header

--------------------------------------------------------------*/

.header {
	display: none;
    /* position: fixed; */
	position: absolute;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100px;
    padding-inline: 15px;
    align-content: center;
	text-align: center;
}

.header h1.logo {
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 50px;
    font-size: 0;
    background: url("asset/images/bango.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}


@media screen and (min-width: 1025px) {

	.header {
		position: fixed;
		top: 0;
        left: 0;
		width: 50%;	
	}
	
}


/*--------------------------------------------------------------

 4.0 Main

--------------------------------------------------------------*/

.entrance {
	display: block;
    margin: 0 auto 90px;
	padding: 30px;
    width: 100%;
    height: 100vh;
	height: 100dvh;
	height: 100svh;
    /* background: url("asset/images/digi-crane.jpg"); */
	background: linear-gradient(rgba(125,150,125,0.4),rgba(0,0,0,0.6)),url("asset/images/digi-crane.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	align-content: center;
	text-align: center;
	color: #ffffff;
}

.entrance h1 {
	margin-bottom: 10px;
	height: 32px;
	line-height: 32px;
	font-size: 2.0em;
	font-weight: lighter;
	font-family: Helvetica, Arial, "sans-serif";
	letter-spacing: -1%;
}

.entrance .shing02 {
	display: inline-block;
    margin: 0 auto;
    width: 120px;
    height: 32px;
    /* font-size: 0; */
	overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("asset/images/shing02-invert.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.entrance .bango {
	display: inline-block;
    margin: 0 auto;
    width: 100px;
    height: 32px;
    /* font-size: 0; */
	overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("asset/images/bango-invert.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.entrance h2 {
	margin-bottom: 15px;
	font-size: 1.5em;
	font-weight: lighter;
	font-family: Helvetica, Arial, "sans-serif";
	letter-spacing: -1%;
}

.entrance .arrow {
	position: absolute;
	bottom: 10px;
	width: calc( 100% - 60px );
	text-align: center;
}

.entrance .arrow img {
    display: block;
    margin: 0 auto;
    width: 20%;
}

.sec {
	margin-bottom: 60px;
}

.credit {
	padding: 30px 30px 0 30px;
	background:rgba(242,242,242,0.0);
}

.order {
	padding: 30px;
	background:rgba(242,242,242,0.0);
}

.order a {
	display: block;
	padding: 15px;
	border-radius: 5px;
	width: 100%;
	background: #f8f8f8;
	text-align: center;
}

.order a:not(:last-of-type) {
	margin-bottom: 15px;
}


@media screen and (min-width: 1025px) {
	
	.main {
		width: 100%;
        height: 100%;
        /* background: url("asset/images/digi-crane.jpg"); */
        background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("asset/images/digi-crane.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
	}
	
    .entrance {
		position: fixed;
        left: 0;
		width: 50%;
		height: calc( 100% - 81px );
    }
	
	.entrance .arrow {
        display: none;
    }
	
	.sec {
        margin: 0 0 0 auto;
		padding: 60px 60px 0 60px;
        width: 50%;
	}
	
	.main {
        .sec:not(:has(~ .sec)) {
            margin-bottom: 60px;
        }
    }
	
	.credit {
		padding: 30px 0 0 0;
		color: #ffffff;
	}
	
	.order {
		padding: 30px 0 30px 0;
	}
	
}


/*--------------------------------------------------------------

 5.0 Footer

--------------------------------------------------------------*/

.footer {
	padding: 30px;
	text-align: center;
	background: #000000;
	color: #ffffff;
}

.footer h1.logo {
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 21px;
    font-size: 0;
    background: url("asset/images/bango-invert.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@media screen and (min-width: 1025px) {
	
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 50%;
	}
	
}


/*--------------------------------------------------------------

 6.0 inview

--------------------------------------------------------------*/

.fadeIn_up {
    opacity: 0;
    transform: translate(0, 50%);
    transition: 2s;
}
.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}