@charset "UTF-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Quicksand:wght@300;400;500;600;700&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Roboto Slab', serif;

1024px
767px　(landscape 横向 /portrait 縦向) 
600px
(374px)

*/
body{
	font-size: 100%;
	line-height: 1.75;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	font-feature-settings: "palt";
	letter-spacing: .15em;
	*/
	opacity: 0;
	animation-name: fadein-title;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: 0.15s;
}
@keyframes fadein-title {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
	@media screen and (max-width: 767px) {
		body{
			font-size: 81.25%;
		}
	}


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


/*----------- font -----------*/
.em{
	font-weight: bold;
}
.min{
	font-family: 'Noto Serif JP', serif;
}
.eng{
	font-family: 'Quicksand', sans-serif;
}
.eng-roboto{
	font-family: 'Roboto Slab', serif;
}
.txt-r{
	text-align: right;
}
.txt-c{
	text-align: center;
}

/*----------- flex -----------*/

.flex{
	width: 100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-wrap: wrap;
}
.between{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.center{
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.align-center{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.row-reverse{
	flex-direction: row-reverse;
}


/*----------------------------
header 
---------------------------- */
header{
	z-index: 200;
	line-height: 1.5;
}
#header{
	width: 100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	background-color: #ff99ce;
}
#header nav{
	margin-left: auto;
}

/*sticky*/
.nav-fixed {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
}

#header h1{
	width: 100%;
	font-family: 'Quicksand';
	text-align: center;
	margin-top: 10px;
	color: #fff;
	font-size: 18px;
	font-weight: 0;
}


#header h1 .h1-1{
	font-family: 'Quicksand';
	color: #fff;
	font-size: 16px;
}

#header h1 .h1-2{
	font-family: 'Quicksand';
	color: #fff;
	font-size: 34px;
	margin: 0px 8px 0px 8px;
}


#header nav .navigation ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin-right: 4em;
}

#header nav .navigation ul li a{
	color: #000;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	display: block;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
}	
#header nav .navigation ul li.nav-top a		{padding-left: 1em;}
#header nav .navigation ul li.nav-story a	{padding-left: 2.25em;}
#header nav .navigation ul li.nav-method a	{padding-left: 0;}
#header nav .navigation ul li.nav-cases a	{padding-left: .5em;}
#header nav .navigation ul li.nav-pickup a	{padding-left: .75em;}
#header nav .navigation ul li.nav-qanda a	{padding-left: 1.25em;}
#header nav .navigation ul li.nav-about a	{padding-left: 2.25em;}

#header nav .navigation ul li a span.ja{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 10px;
	font-feature-settings: "palt";
	display: block;
	color: #666;
	opacity: 0;
	transition: .5s;
}
#header nav .navigation ul li a:hover span.ja{
	opacity: 1;
}
.nav-checkbox {
	display: none;
}
	@media screen and (max-width: 1120px) {
		#header nav .navigation ul{
			margin-right: 1.5em;
		}
		#header nav .navigation ul li a{
			font-size: .9375em;
		}
	}

	@media screen and (max-width: 1024px) {
		.scroll-fixed {
			position: fixed;
			z-index: -1;
			width: 100%;
			height: 100%;
		}

		.nav-fixed {
			position: static;
			top: 0;
			left: 0;
			width: 100%;
		}

		#header nav .navigation ul{
			display:block;
			margin-right: 0;
		}
		#header nav .navigation ul li a{
			text-align: left;
			padding: 1em 1.5em!important;
			font-size: 1.0625em;
		}
		#header nav .navigation ul li a span.ja{
			opacity: 1;
			display: inline-block;
			padding-left: 1em;
			font-size: .75em;
		}

		.hamburger {
			display: block;
			position: fixed;
			top: 1.25em;
			right: 1em;
			z-index: 200;
			width: 32px;
			height: 24px;
			cursor: pointer;
		}
		.hamburger::before,
		.hamburger::after {
			content: '';
			transition: .3s;
		}
		.hamburger::before,
		.hamburger::after,
		.hamburger span {
			display: block;
			position: absolute;
			left: 0;
			height: 2px;
			width: 100%;
			margin-top: -1px;
			background-color: #000000;
		}
		.hamburger::before {
			top: 0;
		}
		.hamburger::after {
			bottom: 0;
		}
		.hamburger span {
			top: 50%;
		}
		.nav-checkbox:checked ~ .hamburger::before {
			top: 50%;
			transform: rotate(45deg);
		}
		.nav-checkbox:checked ~ .hamburger::after {
			top: 50%;
			transform: rotate(-45deg);
		}
		.nav-checkbox:checked ~ .hamburger span {
			display: none;
		}
		.navigation {
			position: fixed;
			top: 0;
			right: 0;
			z-index: 150;
			width: 50%;
			height: 100%;
			padding-bottom: 3.5em;
			transform: translateX(100%);
			transition: transform .5s;
			background-color: #fff;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			overflow-scrolling: touch;
		}
		.navigation ul {
			margin: 3.5em 0 0 0;
			padding: 0;
			list-style-type: none;
		}
		.navigation li {
			border-bottom: 1px dotted #ccc;
		}
		.navigation a {
			display: block;
			padding: 1em;
			color: #000000;
			text-decoration: none;
		}
		.nav-checkbox:checked ~ .navigation {
			transform: translateX(0);
		}

		.nav-background {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, .5);
			cursor: pointer;
		}
		.nav-checkbox:checked ~ .nav-background {
			display: block;
		}
	}
	@media screen and (max-width: 600px) {
		.navigation {
			width: 70%;
		}
	}

/*----------------------------
footer
---------------------------- */