/*
 * style.index.css
 */
body{ background:#00aeeb url("../images/common/bg-dot.gif"); }
@media screen and (max-width:760px){
}
@media screen and (min-width:761px) and (max-width:1160px){
}

/*
 ------------------------------ loader */
#loader-wrap{ position:absolute; width:100%; height:100%; background-color:#fff; z-index:10000; }
#loader-progress{
	width:0;
	height:4px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1df9c2+0,00aeeb+77 */
	background: #1df9c2; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #1df9c2 0%, #00aeeb 77%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #1df9c2 0%,#00aeeb 77%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #1df9c2 0%,#00aeeb 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1df9c2', endColorstr='#00aeeb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#loader-logo{ position:absolute; top:50%; left:50%; margin-top:-104px; margin-left:-200px; width:400px; height:207px; }
#loader-logo img{ width:100%; }
@media screen and (max-width:551px){
	#loader-logo{ margin-top:-52px; margin-left:-100px; width:200px; height:104px; }
}

/*
 ------------------------------ header */
header{ position:fixed; top:0; left:0; width:100%; height:68px; z-index:1000; }
header h1{ position:relative; width:100%; height:68px; background-color:rgba(15,30,34,0.95); }
header h1 a{ position:absolute; top:18px; left:18px; display:inline-block; }
header #header-menu-icon{ display:none; position:absolute; top:0; right:0; width:68px; height:68px; text-align:center; cursor:pointer; }
header #header-menu-icon i{ color:#fff; font-size:200%; line-height:68px; }
header nav{ position:absolute; top:20px; right:10px; }
header nav ul{}
header nav ul li{ float:left; }
header nav ul li.blind{ display:none; }
header nav ul li a{ display:inline-block; height:28px; padding:0 10px; color:#fff; line-height:28px; transition:all 0.6s ease; }
header nav ul li a:hover{ color:#ffea5e; }
header nav ul li a i{ margin-right:5px; }
header nav ul li.current a,
header nav ul li.current a:hover{ color:#5e686b; }
@media screen and (max-width:760px){
	header #header-menu-icon{ display:block; }
	header nav{ display:none; top:68px; left:0; width:100%; height:100vh; background-color:#0f1e22; }
	header nav ul{ padding:12px; }
	header nav ul li{ float:none; padding-bottom:8px; }
	header nav ul li,
	header nav ul li.blind{ display:block; font-size:140%; }
	header nav ul li a{ padding:8px; height:auto; line-height:140%; }
	header nav ul li a i{ width:50px; text-align:center; }
}
@media screen and (min-width:761px) and (max-width:1160px){
}

/*
 ------------------------------ footer */
footer{ position:relative; background-color:#0f1e22; z-index:999; }
footer .inner{ position:relative; margin:0 auto; padding:120px 0 40px; max-width:1100px; }
footer .logo{ position:absolute; width:200px; }
footer .logo img{ width:100%; }
footer .info{ margin-left:262px; border-left:1px solid #2e4247; }
footer .info address{ padding-left:60px; }
footer .info address p{ color:#7a8285; font-size:100%; line-height:140%; }
footer .info .name{ font-size:110%; }
footer .info .add{ padding-top:24px; }
footer .info .time{ padding-top:16px; }
footer .info .time em{ font-size:80%; }
footer .info .tel{ padding:0; }
footer .info .tel span{ display:inline-block; padding-right:16px; }
footer .info .tel span em{ font-size:75%; }
footer nav{ padding:100px 0 0; font-size:100%; line-height:120%; text-align:right; }
footer nav .copy{ color:#8a9092; }
footer nav a{ display:inline-block; padding:0 16px 0 0; color:#5e686b; transition:all 0.4s ease; }
footer nav a:hover{ color:#20353a; }
@media screen and (max-width:760px){
	footer .logo{ position:static; width:140px; }
	footer .info{ margin-left:0; border:none; }
	footer .info address{ padding:20px 0; border-bottom:1px solid #2e4247; }
	footer .info address p{ font-size:96%; }
	footer .info .name{ font-size:100%; }
	footer .inner{ margin:0; padding:40px 20px; }
	footer nav{ padding:20px 0 0; line-height:140%; text-align:center; }
	footer nav span{ display:block; padding-top:12px; }
}
@media screen and (min-width:761px) and (max-width:1160px){
	footer .logo{ position:static; width:760px; margin:0 auto; }
	footer .logo img{ width:140px; }
	footer .info{ margin:-74px auto 0; width:760px; border:none; }
	footer .info address{ margin-left:190px; padding-left:50px; border-left:1px solid #2e4247; }
	footer .inner{ margin:0; padding:60px 20px 40px; }
	footer nav{ padding:50px 0 0; text-align:center; }
	footer nav span{ display:block; padding-top:12px; }
}

/*
 ------------------------------ main */
#index-main{ position:relative; top:0; width:100%; z-index:10; }
#index-main .inner{ position:absolute; top:50%; left:0; width:100%; margin-top:-90px; }
#index-main .inner .img-10th{ margin:0 auto; width:572px; }
#index-main .inner .img-10th img{ width:100%; }
#index-main .inner .txt-10th{ padding:8px 10px 0; color:#fff; font-size:105%; text-align:center; line-height:130%; }
@media screen and (max-width:551px){
	#index-main .inner{ margin-top:-70px; }
	#index-main .inner .img-10th{ width:auto; max-width:300px; }
	#index-main .inner .txt-10th{ padding:8px 30px 0; }
}
@media screen and (min-width:551px) and (max-width:760px){
	#index-main .inner{ margin-top:-70px; }
	#index-main .inner .img-10th{ width:400px; }
}
@media screen and (min-width:761px) and (max-width:1160px){
}

/*
 ------------------------------ greet */
#index-greet{ position:relative; padding:120px 0; background-color:#fff; z-index:11; }
#index-greet #greet{ margin:0 auto; max-width:1100px; }
#index-greet #greet .left,
#index-greet #greet .right{ float:left; }
#index-greet #greet .left{ width:560px; }
#index-greet #greet .left img{ width:100%; }
#index-greet #greet .right{ padding:0 0 0 40px; width:500px; }
#index-greet #greet .right h1{ padding-bottom:20px; color:#00aeeb; font-size:280%; line-height:120%; border-bottom:3px solid #e9e9e9; }
#index-greet #greet .right p{ padding-top:12px; color:#4f4f4f; font-size:90%; line-height:135%; }
#index-greet #philosophy{ margin:0 auto; padding-top:80px; max-width:800px; }
#index-greet #philosophy h2{ position:relative; color:#919191; font-size:160%; text-align:center; }
#index-greet #philosophy h2:before,
#index-greet #philosophy h2:after{ content:''; position:absolute; top:50%; display:inline-block; width:340px; height:1px; background-color:#9f9f9f; }
#index-greet #philosophy h2:before{ left:0; }
#index-greet #philosophy h2:after{ right:0; }
#index-greet #philosophy div{ padding:10px 40px 0; }
#index-greet #philosophy div p{ padding-top:10px; font-size:150%; line-height:120%; }
@media screen and (max-width:760px){
	#index-greet{ padding:40px 0; }
	#index-greet #greet{ margin:0; padding:0 20px; }
	#index-greet #greet .left,
	#index-greet #greet .right{ float:none; }
	#index-greet #greet .left{ width:auto; text-align:center; }
	#index-greet #greet .left img{ max-width:500px; }
	#index-greet #greet .right{ padding:20px 0 0 0; width:auto; }
	#index-greet #greet .right h1{ padding-bottom:10px; font-size:200%; line-height:120%; }
	#index-greet #philosophy{ margin:0; padding:40px 20px 0; }
	#index-greet #philosophy h2{ margin:0 auto 10px; max-width:300px; }
	#index-greet #philosophy h2:before,
	#index-greet #philosophy h2:after{ width:90px; }
	#index-greet #philosophy div{ padding:0; }
	#index-greet #philosophy div p{ font-size:130%; line-height:130%; }
}
@media screen and (min-width:761px) and (max-width:1160px){
	#index-greet{ padding:60px 0; }
	#index-greet #greet{ position:relative; margin:0; padding:0 20px; }
	#index-greet #greet .left,
	#index-greet #greet .right{ float:none; }
	#index-greet #greet .left{ position:absolute; width:250px; }
	#index-greet #greet .right{ padding:0; width:auto; }
	#index-greet #greet .right h1{ margin-left:280px; padding:20px 0 0; width:auto; height:188px; font-size:260%; line-height:160%; border:none; }
	#index-greet #greet .right p{ padding-top:20px; border-top:3px solid #e9e9e9; }
	#index-greet #philosophy{ margin:0 auto; padding-top:50px; max-width:760px; }
	#index-greet #philosophy h2{ margin:0 auto; max-width:720px; }
	#index-greet #philosophy h2:before,
	#index-greet #philosophy h2:after{ width:290px; }
	#index-greet #philosophy div{}
}

/*
 ------------------------------ store */
#index-store-map{ position:fixed; top:50%; left:50%; margin-top:-361px; margin-left:-318px; width:635px; height:722px; z-index:1; }
#index-store-map #map-image{ position:relative; }
#index-store-map #map-image img{ width:100%; }
#index-store-map .ripple{ display:block; position:absolute; top:0; left:0; margin:-3px 0 0 -3px; width:6px; height:6px; background-color:#ace9ff; border-radius:50px; opacity:0; }
#index-store-map .ripple i{ display:block; position:absolute; top:1px; left:1px; margin:-1px 0 0 -1px; width:2px; height:2px; border:2px solid #ace9ff; border-radius:50px; }
#index-store{ position:relative; padding:80px 0; z-index:1; border-top:10px solid rgba(255,255,255,0.2); border-bottom:10px solid rgba(255,255,255,0.2); }
#index-store h2{ position:relative; margin:0 auto; max-width:800px; color:#fff; font-size:160%; text-align:center; }
#index-store h2:before,
#index-store h2:after{ content:''; position:absolute; top:50%; display:inline-block; width:340px; height:1px; background-color:#fff; }
#index-store h2:before{ left:0; }
#index-store h2:after{ right:0; }
#index-store p.description{ padding:16px 0; color:#fff; font-size:110%; line-height:130%; text-align:center; }
#index-store section{ margin:0 auto; max-width:1100px; }
#index-store section #map-fake,
#index-store section #store-list{ float:left; }
#index-store section #map-fake{ width:635px; height:722px; }
#index-store section #store-list{ padding-left:60px; width:405px; }
#index-store section #store-list ul{ padding-left:24px; border-left:1px solid #fff; }
#index-store section #store-list ul li{ font-size:88%; font-weight:bold; line-height:130%; }
#index-store section #store-list ul li:nth-child(even){}
#index-store section #store-list ul li a{ position:relative; display:inline-block; padding:8px; color:#fff; }
#index-store section #store-list ul li a:hover{ color:#ffea5e; }
#index-store section #store-list ul li a i{ position:absolute; top:50%; right:12px; margin-top:-0.5em; }
@media screen and (max-width:551px){
	#index-store-map{ margin-top:-216px; margin-left:-190px; width:380px; height:432px; }
}
@media screen and (min-width:551px) and (max-width:760px){
	#index-store-map{ margin-top:-284px; margin-left:-250px; width:500px; height:568px; }
}
@media screen and (max-width:760px){
	#index-store{ padding:40px 0; }
	#index-store h2{ margin:0 auto; max-width:300px; }
	#index-store h2:before,
	#index-store h2:after{ width:90px; }
	#index-store p.description{ padding:16px 20px; font-size:100%; }
	#index-store section{ position:relative; padding:0 20px; }
	#index-store section #map-fake,
	#index-store section #store-list{ float:none; }
	#index-store section #map-fake{ width:auto; height:auto; }
	#index-store section #store-list{ position:absolute; top:0; left:0; padding:0; width:100%; }
	#index-store section #store-list ul{ padding:0 10px; border:none; }
	#index-store section #store-list ul li{ display:inline; }
	#index-store section #store-list ul li a{ margin-right:2px; margin-bottom:8px; padding:6px 12px; color:#fff; background-color:rgba(22,57,66,0.8); border-radius:30px; }
}
@media screen and (min-width:761px) and (max-width:1160px){
	#index-store{ padding:60px 0; }
	#index-store h2{ margin:0 auto; max-width:720px; }
	#index-store h2:before,
	#index-store h2:after{ width:290px; }
	#index-store p.description{ padding:16px 10px; }
	#index-store section{ position:relative; padding:0 0 0 40px; }
	#index-store section #map-fake,
	#index-store section #store-list{ float:none; }
	#index-store section #map-fake{ position:absolute; width:500px; height:568px; }
	#index-store section #store-list{ margin-left:500px; padding-left:16px; width:auto; min-height:568px; }
	#index-store section #store-list ul{ padding-left:12px; }
}

/*
 ------------------------------ access */
#index-access{ position:relative; padding:120px 0; background-color:#fff; z-index:13; }
#index-access section{ margin:0 auto; max-width:1100px; }
#index-access h2{ position:relative; margin:0 auto 20px; max-width:800px; color:#919191; font-size:160%; text-align:center; }
#index-access h2:before,
#index-access h2:after{ content:''; position:absolute; top:50%; display:inline-block; width:340px; height:1px; background-color:#9f9f9f; }
#index-access h2:before{ left:0; }
#index-access h2:after{ right:0; }
#index-access div.map{ padding:20px 40px; box-shadow:0px 2px 5px rgba(0,0,0,0.3); }
@media screen and (max-width:760px){
	#index-access{ padding:40px 0; }
	#index-access section{ margin:0; padding:0 20px; }
	#index-access h2{ margin:0 auto 10px; max-width:300px; }
	#index-access h2:before,
	#index-access h2:after{ width:90px; }
	#index-access div.map{ padding:10px; }
}
@media screen and (min-width:761px) and (max-width:1160px){
	#index-access{ padding:60px 0; }
	#index-access section{ margin:0; padding:0 20px; }
	#index-access h2{ max-width:720px; }
	#index-access h2:before,
	#index-access h2:after{ width:290px; }
	#index-access div.map{ padding:20px; }
}