@charset "utf-8";

@import "compass/reset";
@import "setting";

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

:root{
	--headerHeight: 100px;
}

// template css

// PC

.grecaptcha-badge { visibility: hidden; }

html,body{
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
}

html{
	font-size:$base-font-size+px;
	line-height:$base-line-height;
}

body {
	@include dff;
	color: #333;
	background-color: #fff;
}

a{
	color: inherit;
	text-decoration: none;
	@include tr;
	
	&:hover{
		@include opacity(.5);
	}
	
}

img{
	max-width: 100%;
	height: auto;
}

figure{
	line-height: 0;
	
	img{
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: center center;
	}
}

// form reset for iOS	
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
	padding-right: 1em !important;
    background: url("../images/selectArrow.svg") right .5em center no-repeat;
	background-size: .5em auto;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

#preloader{
	position: fixed;
	width: 100%; height: 100%;
	top: 0; left: 0; background-color: #fff;
	z-index: 9999;
}

.container{
	width: 84%;
	padding: 0;
}

#mainHeader{
	position: fixed;
	width: 100%;
	height: var(--headerHeight);
	z-index: 99;
    @include background-image(linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 50%));

	
	h1{
		position: absolute;
		top: calc(var(--headerHeight)*.4); left: calc(var(--headerHeight)*.4);
		line-height: 0;
		vertical-align: bottom;
		z-index: 101;
		
		img{
			width: calc(var(--headerHeight)*1.6);
		}
	}
	
	nav{
		position: absolute;
		@include fs(14,1,.05);
		font-weight: 500;
		bottom: 43px; right: 3em;
		z-index: 100;
		color: #222;
		
		ul{
			li{
				display: inline-block;
				margin-left: 3em;
				
				a{
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}
		}
	}
}

#mainContent{
	padding-top: var(--headerHeight);
}
	
section{
	margin: calc(var(--headerHeight) * 1.2) 0;
}

hgroup.title{
	text-align: center;
	margin-bottom: var(--headerHeight);
	
	i{
		display: inline-block;
		height: 24px;
		width: 87px;
		background: url("../images/ico_h.svg") center center no-repeat;
		background-size: contain;
	}

	h2{
		@include fs(42,1.5,.2);
		text-indent: .2em;
		margin: .5em auto;
		font-weight: 700;
	}
	
	h6{
		@include pp(6);
		@include fs(18,1.2,0);
	}

	&+p{
		@include fs(16,2.5,.2);
		text-align: center;
		text-indent: .2em;
		margin: 0 auto 5em;
		max-width: 770px;
	}
}

#mainFooter{
	background-color: #f8f8f8;
	text-align: center;
	padding: 60px 0 30px;
	
	a.logo{
		
		img{
			width: calc(var(--headerHeight)*1.4);
		}
	}
	
	p#copy{
		@include pp(3);
		@include fs(12,1.2,.1);
		text-indent: .1em;
		margin-top: 6em;
	}
}

#banner{
    position: fixed;
    bottom: 80px; right: 0;
    line-height: 0;
    z-index: 90;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	
	a{
		img{
			width: 220px; height: auto;
		}
	}
}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
	
.container{
	max-height:100%;
}

body{
	-webkit-text-size-adjust: 100%;
	max-height:100%;
}
	
// form reset for iOS	
input[type="submit"],input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
} */

button,input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

:root{
	--headerHeight: 64px;
}

#mainHeader{
    background: none;
	
	h1{
		top: calc(var(--headerHeight)*.5); left: calc(var(--headerHeight)*.5);
		
		img{
			width: var(--headerHeight);
			filter: invert(0);
		}
	}
	
	#menu_btn{
		display: block;
		width: 64px; height: 64px; line-height: 0;
		position: absolute;
		top: 0;right: 0;
		z-index: 101;
		
		i{
			display: block;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0; margin: auto;
			width: 32px; height: 16px;
			border-top: solid 2px #000;
			border-bottom: solid 2px #000;
			@include transition(all .4s ease 0s);
			
			&:before,&:after{
				content: "";
				display: block;
				width: 100%; height: 2px;
				background-color: #000;
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0; margin: auto;
				@include transition(all .4s ease 0s);
			}
		}
		
		&.close{
			i{
				border-color: transparent;
				
				&:before{
					background-color: #fff;
					@include rotate(-135deg);
				}
				&:after{
					background-color: #fff;
					@include rotate(-225deg);
				}
			}
		}
	}
	
	nav{
		position: fixed;
		bottom: auto; top: 0; right: -330px;
		background-color: #fff;
		width: 320px;
		height: 100vh;
		@include box-shadow(0 0 3px rgba(#000,.6));
		@include transition(all .4s ease 0s);
		color: #000;
		
		&:before{
			content: "MENU";
			display: block;
			@include pp(6);
			@include fs(18,64px,.2);
			padding-left: 1em;
			background-color: #000;
			color: #fff;
		}
		
		ul{
			@include fs(16,1,.05);
			margin: 20px;
			li{
				display: block;
				margin-left: 0;
				border-bottom: solid 1px #ccc;
				
				a{
					display: block;
					padding: 1em .5em;
				}
			}
		}
		
		&.open{
			right: 0;
		}
	}
}

#mainContent{
	padding-top: var(--headerHeight);
}
	
section{
	margin: calc(var(--headerHeight) * 1.2) 0;
}

#mainFooter{
	padding: 30px 0;
	
	p#copy{
		@include pp(3);
		@include fs(12,1.2,.1);
		text-indent: .1em;
	}
}
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

#mainHeader{
	
	h1{
		top: calc(var(--headerHeight)*.25); left: calc(var(--headerHeight)*.25);
		
		img{
			width: calc(var(--headerHeight));
		}
	}
	
	#menu_btn{
		&.close{
			i{
				&:before{
					background-color: #000;
				}
				&:after{
					background-color: #000;
				}
			}
		}
	}
	
	nav{
		width: 100vw;
		right: -105vw;
		&:before{
			content: "　";
			line-height: calc(var(--headerHeight)*1.5);
			background-color: transparent;
		}
	}
}

#mainContent{
}

hgroup.title{
	
	i{
		height: 18px;
		width: 66px;
	}

	h2{
		@include fs(32,1.4,.15);
		text-indent: .15em;
	}
	
	h6{
		@include fs(14,1.2,0);
	}

	&+p{
		@include fs(16,2,.15);
		text-indent: .15em;
	}
}
	
	#mainFooter{
		padding-bottom: 40vw;
	}

    #banner{
        position: fixed;
        bottom: -1vw; left: 0; right: auto;
		flex-direction: row;
		row-gap: 0;
		z-index: 102;
		
		a{
			flex-basis: 50%;

			img{
				width: 100%; height: auto;
			}
		}
    }
	
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}