@charset "utf-8";

html, body                 {width:100%;margin:0 auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body                       {-webkit-text-size-adjust:100%;}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td, p,
fieldset, form, label, legend, input,
article, aside, canvas, figure, figcaption,
footer, header, nav, section,
b, u, i                    {margin:0;padding:0;list-style:none;font-style:normal;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
main                       {display: block;}
a                          {outline:none;}
img                        {border:0 none;vertical-align:top;max-width:100%;height:auto;}
em                         {font-style:normal;font-weight:bold;}
nav ul, nav li             {list-style:none;}
.h a, .f a,
nav a, nav span            {text-decoration:none;}
table                      {border-collapse:collapse;}
p, li                      {line-height: 1.6;}

/* ----------------------------------------------- font */
@font-face                 {font-family:'Yu Gothic M';src:local("Yu Gothic Medium"),local("Yu Gothic");font-weight:500;}
@font-face                 {font-family:'entypo';src:url('fonts/entypo.eot?ac19je');src:url('fonts/entypo.eot?#iefixac19je') format('embedded-opentype'),url('fonts/entypo.woff?ac19je') format('woff'),url('fonts/entypo.ttf?ac19je') format('truetype'),url('fonts/entypo.svg?ac19je#entypo') format('svg');font-weight: normal;font-style: normal;}
html                       {font-size:62.5%;}
body                       {font-size:16px;font-size:1.6rem;font-family: source-han-sans-japanese, 'Noto Sans JP', "YuGothic M", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}
h1, h2,  h3                {font-weight:normal;}
.mincho                    {font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", Times, serif;}
.en                        {font-family: 'Noto Sans JP', sans-serif;font-weight: 100;}
.en_serif                  {font-family: "Times New Roman", Times, serif;}
.en_impact                 {font-family: 'Anton', sans-serif;}

/* ============================================================== base */
html, body                 {height:100%;}
body                       {background:#eee;color:#333;-webkit-text-size-adjust:100%;}
.bg_fixed                  {background-size:cover;background-repeat:no-repeat;background-position:50% 50%;}
.no-br                     {display:none;}
@media (min-width: 751px){
	a[href*="tel:"]            {pointer-events: none;cursor: default;text-decoration: none;}
}
@media screen and (min-width: 1000px){
	.bg_fixed                  {background-attachment:fixed;background-position:50% 100%;}
	_:-ms-fullscreen, :root .bg_fixed {background-attachment:scroll;}
	.no-br                     {display:inline;}
}
a                          {color:#254d9a;}
a:visited                  {}
a:hover                    {color:#46b;}
a > img                    {vertical-align:top;transition:0.3s;}
a:hover > img              {opacity:0.75;}

/* ============================================================== header */
body:before                {height:0;background:#fff;z-index: 2;content:"";display:block;width:100%;position:relative;}
.anchor                    {margin-top:-20vw;position:absolute;height:0;font-size:0;}
.h                         {border-bottom: 1px solid #eee;position:fixed;z-index:90;width:100%;top:0;transition:0.2s;background-color:rgba(252,252,252,0.96);}
.h_mini .h                 {border-bottom:1px solid #eee;}
.h_inr                     {max-width:1300px;position:relative;margin: 0 auto;}
.h_logo                    {font-size:100%;padding: 4.9vw 3vw 4.9vw 3vw;position: relative;}
.h_logo a                  {display:inline-block;}
.h_logo a:hover img        {opacity: 1;}
.h_logo a img              {height:10vw;}
@media screen and (min-width: 400px){
	body:before                {height:0;}
	.anchor                    {margin-top:-78px;}
	.h_logo                    {padding: 19px 4px 19px 12px;}
	.h_logo a img              {height:40px;}
}
@media screen and (min-width: 1000px){
	.h_logo                    {z-index: 92;max-width: 300px;}
}

/* ----------------------------------------------- hamburger */
.gn_btn                    {font-size:6vw;background:transparent;border:1px solid transparent;width:3em;height:3em;right:0.3em;top:0.2em;position:absolute;line-height:1em;text-align:center;z-index:3;cursor:pointer;}
.gn_btn i                  {position:relative;display:block;text-align:center;vertical-align:bottom;}
.gn_btn:before,
.gn_btn:after,
.gn_btn i:after            {background:#125886;position:absolute;content:"";display:block;width:1.6em;height:2px;left:calc(50% - 0.8em);transition:0.2s;box-shadow: 1px 1px 0 #fff;}
.gn_btn i:after            {top:calc(1.5em - 2px);}
.gn_btn:before             {top:calc(0.8em - 2px);}
.gn_btn:after              {top:calc(2.2em - 2px);}
.gn_show .gn_btn           {border-color:transparent;}
.gn_show .gn_btn:before,
.gn_show .gn_btn:after     {top:1.5em;height:2px;background:#fff;}
.gn_show .gn_btn:before    {transform:rotate(45deg);}
.gn_show .gn_btn:after     {transform:rotate(-45deg);}
.gn_show .gn_btn i:after   {display:none;}
@media screen and (min-width: 400px){
	.gn_btn                    {font-size:24px;}
}
.gn_set                    {transition:1s;opacity:1;position:fixed;top:0;right:0;z-index:91;}
.gn                        {background:#0068B3;width:18em;height:100vh;top:0;right:-18em;position:fixed;z-index:2;overflow:scroll;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:0.2s;}
.gn_bg                     {top:0;left:0;position:fixed;z-index:1;background:rgba(255,255,255,0);width:100%;height:100vh;transition:0.2s;display:none;}
.gn_show                   {overflow-y:hidden;position:fixed;}
.gn_show .c                {-webkit-filter:blur(5px);filter:blur(5px);}
.gn_show .gn_set           {height: 100vh;}
.gn_show .gn               {right:0;box-shadow:-3px 0 3px rgba(0,0,0,0.2);}
.gn_show .gn_bg            {background:rgba(255,255,255,0.8);display:block;}

.gn_lst                    {padding:5em 1em 1em;}
.gn_lst li                 {margin-left:1em;margin-bottom:0.5em;padding-bottom:0.5em;;padding-right:1em;border-bottom:1px solid rgba(255,255,255,0.5);position:relative;}
.gn_lst li:last-child      {border-bottom:0 none;}
.gn_lst li.crt:before      {content: "\25B8";display: block;color: #fff;position: absolute;left: -0.7em;top: 0.5em;}
.gn_lst li a               {color:#fff;position:relative;line-height:1.6em;padding:0.5em;display:flex;justify-content: space-between;white-space:nowrap;}
.gn_lst li a .en           {color:rgba(255,255,255,0.6);}
.gn_lst li a i             {display: block;}

@media screen and (min-width: 1000px){
	.gn_set,
	.gn_show .gn_set           {height: auto;}
	.gn_on .gn_bg,
	.gn_bg,
	.gn_btn                    {display:none;}
	.gn_set                    {width:100%;}
	.gn_on .gn,
	.gn                        {width:auto;max-width: 1300px;height:auto;overflow:visible;overflow-y:visible;position:relative;right:0;top:0;margin: 0 auto;clear:both;background-color:transparent;}
	.gn_lst                    {padding:0.6em 1em;display:flex;justify-content:flex-end;position:relative;margin:0 auto;}
	.gn_lst li                 {margin:0 0 0 1.5em;padding:0 1em;margin:0;border-bottom:0 none;position:relative;z-index:5;}
	.gn_lst li:not(:last-child):after {content:"";display:block;position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);}
	.gn_lst li.crt:before      {content: "\e6ca";font-family:"entypo";color: #0068B3;left: calc(50% - 0.5em);top: -0.5em;}
	.gn_lst li a               {font-size:100%;color:#111;text-align:center;display:block;padding:0.6em 1em;display: block;}
	.gn_lst li a span          {font-weight:200;display: block;line-height: 1.3;}
	.gn_lst li a i             {display: inline-block;}
	.gn_lst li a .en           {font-size:87.5%;color: #ccc;}
	.gn_lst li a:after         {background:#0068B3;position:absolute;content:"";display:block;width:0;height:1px;left:50%;bottom:0.2em;transition:0.2s;}
	.gn_lst li a:hover:after   {width:80%;left:10%;}

}
@media screen and (min-width: 1400px){
	.gn_lst li                 {padding:0 2em;}
}

/* ----------------------------------------------- effect */
.idx .h                    {transform: translate(0, -100px);transition: 0.8s;}
.idx .h.show               {transform: translate(0, 0);}
.idx .gn_set               {top: -100px;transition: 0.8s;}
.idx .gn_set.show          {top: 0;}

/* ============================================================== section */
.sct {
	position: relative;
	font-size: 4vw;
	background: #fff;
	border-top: 1px solid #ddd;
}
.sct.sct_gr {
	background: #f9f9f9;
}
.sct_inr {
	max-width: 1000px;
	margin: 0 auto;
	padding: 2em 1em;
	position: relative;
	z-index: 3;
}
@media screen and (min-width: 500px){
	.sct {
		font-size: 20px;
	}
	.sct_inr {
		padding: 3em 1em;
	}
}
@media screen and (min-width: 1000px){
	.sct_inr {
		padding: 4em 1em;
		min-height: calc(100vh - 80px);
	}
}

.sct_ttl {
	margin-bottom: 1em;
	position: relative;
	text-align: center;
}
.sct_ttl span {
	display: inline-block;
}
.sct_ttl span i {
	display: block;
	position: relative;
	line-height: 1;
}
.sct_ttl .ja {
	font-size: 130%;
	font-weight: 200;
	padding-bottom: 0.5em;
	margin-bottom: 0.3em;
}
.sct_ttl .ja:before {
	content: "";
	display: block;
	position: absolute;
	width: 60%;
	left: 20%;
	height: 1px;
	bottom: 0;
	background: #ccc;
}
.sct_ttl .en {
	color: #999;
	font-size: 75%;
}
@media screen and (min-width: 1000px){
	.sct_ttl {
		margin-bottom: 2em;
	}
}
.sct_fig {
	position: relative;
	padding-top: 56.25vw;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.sct_fig span {
	display: block;
	position: absolute;
	width: 12vw;
	height: 12vw;
	top: calc(50% - 6vw);
	opacity: 0.5;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media screen and (min-width: 750px){
	.sct_fig {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	.sct_fig span {
		display: none;
	}
}
.sct_desc {
	font-family: fot-tsukubrdgothic-std, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

.fadein {
	opacity : 0;
	transform : translate(0, -30px);
	transition : all 0.5s cubic-bezier(.47,1.64,.41,.8);
}
 
.fadein.active{
	opacity : 1;
	transform : translate(0, 0);
}


/* ============================================================== key visual */
.sct_kv {
	padding-top: 20vw;
	min-height: calc(100vh - 26vw);
	min-height: 100vh;
}
.sct_kv .sct_inr {
	border-top: 0 none;
	max-width: 1300px;
	padding: 2em;
}
@media screen and (min-width: 400px){
	.sct_kv {
		padding-top: 80px;
		min-height: 100vh;
	}
}
.sct_kv .sct_inr {
	z-index: 3;
}
.kv_lead {
	font-size: 130%;
	font-family: fot-tsukubrdgothic-std, sans-serif;
	color: #fff;
	margin-bottom: 1.5em;
	color: #037;
	color: #111;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
}
.kv_lead span {
	display: block;
	opacity: 0;
	transform: translate(0, 1vh);
	transition: 2s;
}
.kv_lead span.show {
	opacity: 1;
	transform: translate(0, 0);
}
.kv_lead span i {
	display: inline-block;
}
@media screen and (min-width: 1000px){
	.kv_lead {
		font-size: 200%;
		font-weight: 200;
		margin-left: 0.5em;
		padding-top: 60px;
		line-height: 2;
	}
}
.kv_overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom right, rgba(238,238,238,0.01), rgba(238,238,238,1));
	background: #fff;
	opacity: 1;
	transition: 3s;
}
.kv_overlay.show {
	opacity: 0;
}
.kv_photo {
	position: fixed;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	background-color: #fff;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
}
.kv_photo span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 65% 0;
	background-image: url("../img/kv_photo_2.jpg");
	transition: 0.5s;
}
.kv_photo span.opa {
	opacity: 0.1;
}

/* ============================================================== message */
.sct_msg .sct_inr {
	padding-bottom: 0.5em;
}
.sct_msg .sct_desc p {
	margin-bottom: 1.5em;
}
.sct_msg .sct_desc span {
	display: block;
}
.msg_sign {
	text-align: right;
}
.msg_sign i {
	margin-left: 1em;
}
.sct_msg .sct_fig {
	background-color: #EEF2F4;
	background-position: 100% 0;
	background-image: url("../img/msg_bg.jpg");
}
.sct_msg .sct_fig span {
	left: 15%;
}
@media screen and (min-width: 750px){
	.msg_sign {
		max-width: 60%;
	}
}

/* ============================================================== product */
.sct_prd .sct_inr {
	padding-bottom: 0.5em;
}
.sct_prd .sct_desc {
	font-family: fot-tsukubrdgothic-std, sans-serif;
}
.sct_prd .sct_desc p {
	margin-bottom: 1.5em;
}
.sct_prd .sct_desc span {
	display: block;
}
.prd_sign {
	text-align: right;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
}
.prd_sign i {
	margin-left: 1em;
}
.sct_prd .sct_fig {
	background-color: #EDF8F5;
	background-position: 0 0;
	background-image: url("../img/prd_bg.jpg");
}
.sct_prd .sct_fig span {
	right: 15%;
}
.prd_itms {
	margin-top: 2em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.prd_itms a {
	display: block;
	width: 48%;
	text-align: center;
	text-decoration: none;
}
.prd_itm_fig {
	overflow: hidden;
	border-radius: 50%;
	margin: 0 10% 1em;
}
@media screen and (min-width: 750px){
	.sct_prd .sct_desc {
		padding-left: 40%;
	}
	.prd_itm_fig img {
		display: block;
		transition: 0.3s;
	}
	.prd_itms a:hover .prd_itm_fig img {
		transform: scale(1.1);
	}
}

/* ============================================================== company */

.outline {
	margin-bottom: 2em;
}
.outline dl {
	margin-bottom: 0.5m;
}
.outline dt {
	color: #069;
	border-bottom:1px solid #cde;
	line-height:100%;
	padding:0.5em 0.3em 0.1em;
	margin-bottom:0.3em;
	line-height:160%;
}
.outline dd {
	padding-bottom:1em;
}
.outline dd i {
	display:inline-block;
	margin-right: 1em;
}
@media screen and (min-width: 750px){
	.outline {
	}
	.outline dl {
		border-bottom:1px solid #cde;
		width:100%;
		display:flex;
	}
	.outline dl:last-child {
		border-bottom: 0 none;
	}
	.outline dt,
	.outline dd {
		padding:1em;
		border: 0 none;
	}
	.outline dt {
		margin-bottom:0;
		width:10em;
	}
	.outline dd {
		flex:1;
		background:#fff;
	}
}
.gmap iframe {
	height: 60vw;
	width: 100%;
	border: 0 none;
	vertical-align: top;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
@media screen and (min-width: 700px){
	.gmap iframe {
		height: 420px;
	}
}

/* ============================================================== contact */
.sct_contact .sct_inr {
}
.sct_contact .sct_fig {
	background-color: #f2f2f2;
	background-position: 90% 100%;
	background-size: auto 80%;
	background-image: url("../img/contact_bg.png");
}
.sct_contact .sct_fig span {
	left: 15%;
}

.form_note {
	font-size: 87.5%;
	color: rgba(17,149,156,1);
}

.frm                       {margin: 3em auto 0;}
.frm_ttl                   {margin-top: 2em;margin-bottom: 1em;background: #999;color:#fff;padding: 0.2em 0.5em;}
.frm dl                    {margin:0.8em 0;padding-bottom:0.8em;border-bottom:1px dashed #ccc;}
.frm dt .req               {font-size:67.5%;display:inline-block;margin-left:0.6em;vertical-align:top;line-height:1;padding:0.3em;background:#999;color:#fff;}
.frm_message               {margin-bottom:1em;}
.frm_confirm dt            {color:#999;}
.frm_confirm dd            {border:1px dotted #999;padding:0.5em;background:#fff;}

button::-moz-focus-inner   {border:0;padding:0;margin-top:-2px;}
a.btn, a:link.btn, a:visited.btn,
.btn                       {font-size:16px;padding:0 1.6em;line-height:2.8em;border:0 none;display:inline-block;text-align:center;text-decoration:none;vertical-align:top;cursor:pointer;-webkit-appearance:none;transition:all 0.2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
a.btn_posi, a:link.btn_posi, a:visited.btn_posi,
.btn_posi                  {background-color:#0068B3;color:#fff;}
a.btn_posi:hover, a:link.btn_posi:hover, a:visited.btn_posi:hover,
.btn_posi:hover            {background-color:#28d;}
a.btn_nega, a:link.btn_nega, a:visited.btn_nega,
.btn_nega                  {background-color:#999;color:#fff;}
a.btn_nega:hover, a:link.btn_nega:hover, a:visited.btn_nega:hover,
.btn_nega:hover            {background-color:#aaa;}
.btn_confirm               {padding:0;max-width:320px;width:100%;}

.btns                      {padding:1em 0;clear:both;text-align:center;}
.btns_pair .btn            {min-width: 8em;}

.frm_check label,
.frm_radio label                                  {margin-right: 1em;display: block;}
.frm_check input[type=checkbox]:checked + i:after {border-color:#67CED3;}
.frm_radio input[type=radio]:checked + i:after    {background-color:#67CED3;}

@media screen and (min-width: 750px){
	.sct_contact {
		background-color: #f2f2f2;
		overflow: hidden;
	}
	.sct_contact .sct_fig {
		right: 0;
		left: auto;
		background-position: 98% 100%;
		background-size: 240px auto;
	}
	.frm                       {margin-left :0;max-width: 75%;}
	.doc .frm                  {margin-left :auto;}
	.frm dl                    {display:flex;}
	.frm dt                    {width:7em;text-align: right;margin-right:2em;padding-top: 0.4em;}
	.frm dd                    {flex:1;}
	.frm .btn                  {font-size:120%;}
	.frm_check label,
	.frm_radio label                                  {display: inline-block;}
}
@media screen and (min-width: 1300px){
	.sct_contact .sct_fig {
		background-size: 320px auto;
	}
}


.sct_confirm {
	background-color: #f2f2f2;
}
.doc:before {
	content: "";
	display: block;
	position: relative;
	width: 1px;
	height: 20vw;
}
@media screen and (min-width: 400px){
	.doc:before {
		height: 80px;
	}
}

/* ============================================================== footer */
.f {
	background: #eee;
	border-top: 1px solid #ddd;
	padding: 1em;
	font-size: 4vw;
	position: relative;
	z-index: 2;
	text-align: left;
}
.f_logo {
	margin: 0 auto;
}
.f_logo a {
	display: inline-block;
	max-width: 180px;
	margin: 0 auto 0.5em;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.f .copyright {
	font-size: 75%;
}
.f .copyright i {
	display: inline-block;
}
@media screen and (min-width: 400px){
	.f {
		font-size: 16px;
	}
}
@media screen and (min-width: 750px){
	.f {
		padding: 2em 1em 1.5em;
		text-align: center;
	}
}

.ptop                      {font-size:5vw;box-shadow: 0 0 2px rgba(0,0,0,0.2);background:rgba(255,255,255,0.5);color:#111;width:3em;height:3em;line-height:3em;text-align:center;position:fixed;z-index:99;right:0.3em;bottom:-20px;cursor:pointer;border-radius:0;transition:0.2s;opacity:0;display:block;}
.ptop:before               {color:#999;font-size:150%;content:"\e6d7";font-family:"entypo";display:block;text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff;transition:0.3s;}
.ptop:hover                {box-shadow: 0 0 2px rgba(0,0,0,0.5);background:rgba(255,255,255,0.8);}
.ptop:hover:before         {color: #111;}
.ptop i                    {display:none;}
.scrl_bgn .ptop            {opacity:1;bottom:0.8em;}
@media screen and (min-width: 500px){
	.ptop                      {font-size:25px;}
}