@charset "utf-8";
/*
Theme Name:  ISS
Theme URI: http://www.e-soda.jp/
*/

/* Reset default browser CSS.
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; outline: 0; vertical-align: baseline; margin: 0; padding: 0;}
:focus { outline: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ol, ul { list-style: none;}
table { border-collapse: collapse;border-spacing: 0;}
caption, th, td { font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a { margin: 0; padding: 0; outline: 0; vertical-align: baseline; background: transparent;}
a { -webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important; } 
a:active, a:hover { outline: none; outline-width: 0;}
a img { border: 0;}
img { -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;/* Chrome transition Bug Fix */}
html { font-size: 62.5%; /*10px*/ }
body{
	margin: 0 auto;
	padding: 0;
	color: #333;
	font-family: "Noto Sans JP", sans-serif;
	/*font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-size: 1.6rem;
	line-height: 1.6;
	word-wrap: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
/* Layout
------------------------------------------------------------*/
#wrapper {
	width: 100%;
}
.inner {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
	.inner {width: 97%;}
}
@media only screen and (max-width: 767px){
	.inner {width: 95%;}
}
@media only screen and (max-width: 600px){
	.inner {width: 90%;}
}
/* Link
------------------------------------------------------------*/
a {
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	color: #333;
	font-size: 100%;
	text-decoration: none;
	transition: color 0.3s;
}
a:hover, a:active {
	outline: none;
	color: #333;
	text-decoration: none;
}
/* Header
------------------------------------------------------------*/
header#lp {
	width: 100%;
	padding: 1rem 0;
}
header#lp div {
	display: flex;
	justify-content: space-between;
}
header#lp div h1 {
}
header#lp div h1 a img {
	height: auto;
	max-width: 160px;
}
header#lp div p.line {
}
header#lp div p.line a {
	font-weight: 600;
}
header#lp div p.line a img {
	height: auto;
	max-width: 40px;
	margin-right: 5px;
	vertical-align: middle;
}
/* Fixed */
header#lp {
	top: -5rem;
}
header#lp.fixed {
    position: fixed;
    top: 0;
    z-index: 10000;
	background: rgba(255, 255, 255, 0.9);
	transition: 0.3s ease-in-out;
}
@media only screen and (max-width: 600px){
	header#lp div h1 a img {
		max-width: 140px;
	}
	header#lp div p.line a {
		font-size: 14px;
	}
	header#lp div p.line a img {
		max-width: 36px;
	}
}
/* Footer
------------------------------------------------------------*/
footer {
	padding: 6rem 0 2rem;
	text-align: center;
}
footer p {
}
footer p a {
}
footer p a img {
	height: auto;
	width: 34px;
}
footer small {
	font-weight: 600;
}
/* Page Top
------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 99999;
}
#page-top a {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 28px;
	padding: 1rem;
	border-radius: 5px;
	background: #333;
	font-size: 2rem;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}
#page-top a:hover {
	background: #000;
	transition: 0.5s ease-in-out;
	text-decoration: none;
}
/* LP
------------------------------------------------------------*/
/* Main */
section#main {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 0;
}
section#main div {
	align-self: center;
	overflow: hidden;
}
section#main div h2 {
	font-size: 7rem;
	font-weight: 600;
	line-height: 1.2;
}
section#main div h2:last-of-type {
	margin-bottom: 1.5rem;
}
section#main div h3 {
	margin-bottom: 2rem;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.4;
}
section#main div p {
	max-width: 340px;
	margin-left: 1em;
	color: #656565;
	line-height: 1.4;
}
section#main figure {
}
section#main figure img {
	height: auto;
	width: 100%;
	max-width: 440px;
	vertical-align: bottom;
}
@media only screen and (max-width: 999px){
	section#main div h2 {
		font-size: 6rem;
	}
	section#main figure img {
		max-width: 360px;
	}
}
@media only screen and (min-width: 769px){
	section#main div h3 br {
		display: none;
	}
}
@media only screen and (max-width: 768px){
	section#main div h2 {
		font-size: 4rem;
	}
	section#main div h3 {
		margin-bottom: 1.5rem;
		font-size: 2rem;
	}
	section#main div p {
		max-width: 300px;
		margin-left: 0;
	}
	section#main figure img {
		max-width: 300px;
	}
}
@media only screen and (max-width: 600px){
	section#main {
		flex-direction: column;
	}
	section#main div {
		margin-bottom: 2rem;
	}
	section#main div h3 {
	}
	section#main div p {
		font-size: 1.4rem;
	}
	section#main figure {
		text-align: center;
	}
	section#main figure img {
		width: 90%;
		max-width: 440px;
	}
}
/* For */
section#for {
	background: #eef9ff;
}
section#for div {
	padding-top: 9rem;
	text-align: center;
}
section#for div h2 {
	margin-bottom: 6rem;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.2;
}
section#for div p {
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}
section#for div p.mid {
	margin-top: 3rem;
	margin-bottom: 3rem;
}
section#for div h3 {
	margin-top: 4rem;
	margin-bottom: 4rem;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
}
section#for figure {
}
section#for figure img {
	height: auto;
	width: 100%;
	vertical-align: bottom;
}
@media only screen and (min-width: 769px){
	section#for div p br {
		display: none;
	}
	section#for div h3 br {
		display: none;
	}
}
@media only screen and (max-width: 600px){
	section#for div h2 {
		font-size: 2.6rem;
	}
	section#for div p {
		font-size: 1.6rem;
		/*text-align: left;*/
	}
	section#for div h3 {
		font-size: 2.2rem;
	}
}
/* Future */
section#future {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 0;
	padding: 12rem 0;
}
section#future div {
	align-self: center;
	max-width: 440px;
	overflow: hidden;
}
section#future div h2 {
	margin-bottom: 3rem;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.2;
}
section#future div p {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	color: #656565;
}
section#future figure {
	margin-left: 2rem;
}
section#future figure img {
	height: auto;
	width: 100%;
	max-width: 460px;
	vertical-align: bottom;
}
@media only screen and (max-width: 999px){
	section#future div {
		max-width: 320px;
	}
	section#future figure img {
		width: auto;
		max-width: 100%;
	}
}
@media only screen and (max-width: 600px){
	section#future {
		flex-direction: column;
	}
	section#future div {
		width: auto;
		max-width: 100%;
		margin-bottom: 2rem;
	}
	section#future div h2 {
		font-size: 2.6rem;
	}
	section#future div h2 br {
		display: none;
	}
	section#future figure {
		margin-left: 0;
	}
}
/* Native */
section#native {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 0;
	padding-bottom: 16rem;
}
section#native div {
	align-self: center;
	order: 2;
	max-width: 440px;
	overflow: hidden;
}
section#native div h2 {
	margin-bottom: 3rem;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.2;
}
section#native div p {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	color: #656565;
}
section#native figure {
	order: 1;
	margin-right: 2rem;
}
section#native figure img {
	height: auto;
	width: 100%;
	max-width: 460px;
	vertical-align: bottom;
}
@media only screen and (max-width: 999px){
	section#native div {
		max-width: 320px;
	}
	section#native figure img {
		width: auto;
		max-width: 100%;
	}
}
@media only screen and (max-width: 600px){
	section#native {
		flex-direction: column;
		padding-bottom: 12rem;
	}
	section#native div {
		width: auto;
		max-width: 100%;
		margin-bottom: 2rem;
		order: 1;
	}
	section#native div h2 {
		font-size: 2.6rem;
	}
	section#native figure {
		order: 2;
		margin-right: 0;
	}
}
/* Achievement */
section#achievement {
	margin-bottom: 12rem;
	background: #eef9ff;
	text-align: center;
}
section#achievement div {
	padding-top: 9rem;
}
section#achievement div h2 {
	margin-bottom: 3rem;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.2;
}
section#achievement div p {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	color: #656565;
}
section#achievement div p sup {
vertical-align: super;
font-size: 10px;
}
section#achievement div small {
	display: block;
	margin-top: 2rem;
	font-size: 1.4rem;
	line-height: 1.4;
	color: #656565;
	text-align: left;
}
section#achievement div h3 {
	margin-top: 4rem;
	margin-bottom: 4rem;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
}
section#achievement div figure {
}
section#achievement div figure img {
	height: auto;
	width: 100%;
	vertical-align: bottom;
}
@media only screen and (max-width: 600px){
	section#achievement {
		margin-bottom: 9rem;
	}
	section#achievement div h2 {
		font-size: 2.6rem;
		text-align: left;
	}
	section#achievement div h2 br {
		display: none;
	}
	section#achievement div p {
		font-size: 1.6rem;
		text-align: left;
	}
	section#achievement div h3 {
		font-size: 2.2rem;
		text-align: left;
	}
	section#achievement div h3 br {
		display: none;
	}
}
/* Button */
section#to-line {
	margin-bottom: 3rem;
	text-align: center;
}
section#to-line h2 {
	margin-bottom: 3rem;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.2;
}
section#to-line p {
}
section#to-line p a {
	display: inline-block;
	padding: 1.5rem 2rem;
	background: #06C755;
	font-size: 2.6rem;
	font-weight: 700;
	color: #FFF;
	position: relative;
	overflow: hidden;
	transition: 300ms;
}
section#to-line p a::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #BDFDD7;
	transition: 300ms;
	animation: shinyshiny 2.5s ease-in-out infinite;
}
@keyframes shinyshiny {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@media only screen and (max-width: 768px){
	section#to-line h2 {
		font-size: 3.6rem;
		padding-left: 1em;
		padding-right: 1em;
	}
}
@media only screen and (max-width: 600px){
	section#to-line h2 {
		font-size: 2.3rem;
	}
	section#to-line p {
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}
	section#to-line p a {
		font-size: 1.8rem;
	}
}