@charset "utf-8";

/*@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}*/
@keyframes delayAnimeA{0%{opacity:0;transform:translateY(50px);}100%{opacity:1;transform:translateY(0);}}
@keyframes delayAnimeB{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}}

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:30px/1.75 "source-han-sans-japanese","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; color:#000;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt";font-weight: 500; letter-spacing: 0.3rem;overflow-x: hidden; }
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#000;}
a:hover,a:active{color:#ff8645;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}
.tabDisp{display:none;}
div.drawer,div.fixedMenu{display:none;}

/* ヘッダー
------------------------------------------------------------*/
header{position: fixed; top: 0; left: 0; z-index: 100; width: 100%;}
header h1{ margin: 15px 30px; float: left; width: 62px; height: 78px; display: block;}
header h1 a{width: 62px; height: 78px; display: block;}
.webp header h1 { background: url("images/webp/logo1.webp") no-repeat; }
.no-webp header h1 { background: url("images/logo1.png") no-repeat; }
.webp header.isActive h1 { background: url("images/webp/logo3.webp") no-repeat; }
.no-webp header.isActive h1 { background: url("images/logo3.png") no-repeat; }

.webp .inpage header h1 { background: url("images/webp/logo3.webp") no-repeat; }
.no-webp .inpage header h1 { background: url("images/logo3.png") no-repeat; }

/* グローバルナビゲーション
*****************************************************/
nav#mainNav{ float: right; width:45%; margin-top: 30px; margin-right: 30px;}
nav#mainNav ul{display:flex;}
nav#mainNav li{width:100%;text-align:center;box-sizing:border-box;}
nav#mainNav li a{margin:0 auto;padding:7px 0;font-size:14px;font-weight:200;color:#fff;display:block;box-sizing:border-box; letter-spacing: 0.1rem; line-height: 1;}
nav#mainNav li a:hover{animation:fadeIn 1s ease 0s 1 normal;}
nav#mainNav li a:hover{color:#ff8645;}
nav#mainNav li:last-child a{ background:#ff8645; color: #fff; transition: 0.3s; position: relative; overflow: hidden;}
/*nav#mainNav li:last-child a:hover{background:#fff; color: #ff8645; }*/
nav#mainNav li:last-child a::before {content: '';position: absolute;top: 0;left: -75%; width: 50%;height: 100%;	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform: skewX(-25deg);}
nav#mainNav li:last-child a:hover::before {animation: shinehin 0.7s;}
@keyframes shinehin {
100% {left: 125%;}
}
nav#mainNav.isActive li a{color: #000;}
nav#mainNav.isActive li a:hover{color:#ff8645;}
nav#mainNav.isActive li:last-child a{ color: #fff; position: relative; overflow: hidden;}
/*nav#mainNav.isActive li:last-child a:hover{background:#fff; color: #ff8645; }*/
nav#mainNav.isActive li:last-child a::before {content: '';position: absolute;top: 0;left: -75%; width: 50%;height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform: skewX(-25deg);}
nav#mainNav.isActive li:last-child a:hover::before {animation: shinehi 0.7s;}
@keyframes shinehi {
100% {left: 125%;}
}
.inpage nav#mainNav li a{color: #000;}
.inpage nav#mainNav li a:hover{color:#ff8645;}
.inpage nav#mainNav li:last-child a{ color: #fff; position: relative; overflow: hidden;}
/*.inpage nav#mainNav li:last-child a:hover{background:#fff; color: #ff8645; }*/
.inpage nav#mainNav li:last-child a::before {content: '';position: absolute;top: 0;	left: -75%; width: 50%;	height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform: skewX(-25deg);}
.inpage nav#mainNav li:last-child a:hover::before {animation: shineh 0.7s;}
@keyframes shineh {
100% {left: 125%;}
}

@media only screen and (max-width:1130px){
nav#mainNav{ width:75%;}
}


/* メイン画像
*****************************************************/
section#kv{ position: relative; margin-bottom: 30px;  height: 100vh; overflow: hidden; width: 100vw;}

#kv .txt{position: absolute; top: 35%; left: 5%; color: #fff;}
#kv .titbox{ margin-bottom: 50px; position: relative; padding-top: 95px;}
#kv .titbox::after{ display: block; clear: both; content: '';}
#kv .tit{ font-size: 95px;font-weight: 700; line-height: 1; padding-left:270px; box-sizing: border-box; padding-bottom: 35px;text-shadow: 2px 0px 5px black; animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
@keyframes kvtitfade {
0% {transform: translateX(-300px);opacity: 0;}
80% {opacity: 1;}
100% {opacity: 1;transform: translateX(0);}
}
#kv .tit .sho{ font-size: 220px; position: absolute; top: -150px; left: 50px;}
#kv .tit:before{position: absolute; top: -150px; left: 0; content: ''; width: 85px; height: 145px; background-image: linear-gradient(00deg, white, white),    linear-gradient(00deg, white, white); background-repeat: no-repeat; background-size: 2px 100%, 100% 2px;background-position: left bottom, left top;animation: square_anim 0.5s linear 2s 1 forwards; opacity: 0;}
#kv .tit:after{position: absolute; bottom: 0; right: 50px; content: ''; width: 85px; height: 145px; background-image: linear-gradient(00deg, white, white),    linear-gradient(00deg, white, white); background-repeat: no-repeat; background-size: 2px 100%, 100% 2px;background-position: right top, right bottom; animation: square_anim 0.5s linear 2s 1 forwards; opacity: 0;}
@keyframes square_anim{
00%{ background-size: 2px 0, 0 2px; opacity: 0; }
50%{ background-size: 2px 100%, 0 2px; opacity: 1;}
100%{ background-size: 2px 100%, 100% 2px; opacity: 1; }
}
#kv .copy{ font-size: 33px; font-weight: 700;text-shadow: 1px 0px 3px black; animation: kvcopyfade 2s ease-in-out 3s 1  forwards; opacity: 0;}
@keyframes kvcopyfade {
0% {transform: translateY(-30px);opacity: 0;}
80% {opacity: 1;}
100% {opacity: 1;transform: translateY(0);}
}
#kv .en{ font-size: 25px; font-weight: 200; letter-spacing: 0.1rem;}
#kv .universe{z-index: -100; width: 100vw; overflow: hidden; height: 100vh;}
.webp #kv .universe { background-image: url("images/webp/universe.webp"); height: 100vh; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; }
.no-webp #kv .universe { background-image: url("images/universe.jpg"); height: 100vh; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; }
.universe {animation: universe 20s ease 0s infinite alternate forwards;}
@keyframes universe {
0% {opacity: 0.95;background-size: 100% 100%;}
50% {opacity: 1;background-size: 105% 105%;}
100% {opacity: 0.95;background-size: 100% 100%;}
}
#kv .motor{ position: absolute; top: 10%; right: 0; width: 682px; height: 541px; }
.webp #kv .motor { background: url("images/webp/motor.webp") no-repeat right top; }
.no-webp #kv .motor { background: url("images/motor.png") no-repeat right top; }



@media only screen and (max-width:800px){
#kv .copy{ font-size: 30px; font-weight: 700;}
#kv .en{ font-size: 24px; font-weight: 200; letter-spacing: 0.1rem;}
.universe {animation: universe_tab 20s ease 0s infinite alternate forwards;}
#kv .txt { top: 30%;}
.webp #kv .motor { background: url("images/webp/motor.webp") no-repeat right -240px top; }
.no-webp #kv .motor { background: url("images/motor.png") no-repeat right -240px top; }
}
@keyframes universe_tab {
0% {opacity: 0.95;background-size: auto 100%;}
50% {opacity: 1;background-size: auto 100%;}
100% {opacity: 0.95;background-size: auto 100%;}
}

@media only screen and (max-width:644px){
#kv .txt{top: auto; bottom: 20px;}
#kv .tit .sho { font-size: 100px; top: -50px; left: 10px;}
#kv .tit:before { top: -60px; width: 35px; height: 95px;}
#kv .tit:after{bottom: 0; right: 50px; width: 35px; height: 95px;}
#kv .tit { font-size: 40px; padding-left: 115px; padding-bottom: 20px;}
#kv .titbox { margin-bottom: 20px; padding-top: 25px;}
#kv .copy { font-size: 22px;font-size: 26px !important;}
#kv .en { font-size: 20px;}
.universe {animation: universe_sp 20s ease 0s infinite alternate forwards;}
#kv .motor{ width: 80%;}
.webp #kv .motor { background: url("images/webp/motor.webp") no-repeat right top; background-size: 100% auto; }
.no-webp #kv .motor { background: url("images/motor.png") no-repeat right 0 top; background-size: 100% auto; }
}
@keyframes universe_sp {
0% {opacity: 0.95;background-size: auto;}
50% {opacity: 1;background-size: auto;}
100% {opacity: 0.95;background-size: auto;}
}


/* コンテンツ
*****************************************************/
#iabout .tit::after,#iabout .mainbox::after{ display: block; clear: both; content: '';}
#iabout .tit{ margin-bottom: 30px; position: relative;}
#iabout .tit h2{ font-size: 240px; font-weight: 700; line-height: 1; margin-left: 20px;}
#iabout .tit .btn{ position: absolute; bottom: 0; right: 0;}
#iabout .mainbox{position: relative; padding-top: 40px; padding-left: 20px; box-sizing: border-box; line-height: 1.2;}
#iabout .mainbox .img{ position: absolute; top: 0; right: 0; z-index: -10;}
#iabout .mainbox:before{ position: absolute; top: 0; left: 20px; content: ''; background: #000; width: 85px; height: 2px;}
#iabout .mainbox:after{ position: absolute; top: 10px; left: 20px; content: ''; background: #000; width: 55px; height: 2px;}
#iabout .mainbox .copy{ font-size: 95px; font-weight: 700; margin-bottom: 50px;}
#iabout .mainbox .jp{ font-size: 33px; margin-bottom: 30px;}
#iabout .mainbox .en{ font-size: 24px; font-weight: 200;}

#itec{ position: relative; padding-bottom: 100px; padding-top: 100px;}
.webp #itec { background: url("images/webp/technology.webp") no-repeat top 200px left; background-size: 100% auto; }
.no-webp #itec { background:url(images/technology.jpg) no-repeat top 200px left; background-size: 100% auto;}
#itec .tit{ background: #aabdcb; width: 45vw; height:45vw; padding:70px 40px; box-sizing: border-box; margin-left: 20px;}
#itec .tit h2{ font-size: 90px; font-weight: 700; padding-bottom: 40px;  line-height: 1; margin-bottom: 80px; position: relative;}
#itec .tit h2:before{ position: absolute; bottom: 10px; left: 0; content: ''; background: #000; width: 85px; height: 2px;}
#itec .tit h2:after{ position: absolute; bottom: 0; left: 0; content: ''; background: #000; width: 55px; height: 2px;}
#itec .tit p{ font-size: 30px; margin-bottom: 60px;letter-spacing: 0.1rem;}

#idev .tit h2{margin-bottom: 50px;font-size: 90px; font-weight: 700;  line-height: 1; margin-left: 20px;}
#idev .tit h2 span{ position: relative;}
#idev .tit h2 span:before{ position: absolute; bottom: 40px; right: -100px; content: ''; background: #000; width: 85px; height: 2px;}
#idev .tit h2 span:after{ position: absolute; bottom: 30px; right: -70px; content: ''; background: #000; width: 55px; height: 2px;}
#idev .mainbox::after{ display: block; clear: both; content: '';}
#idev .mainbox .img{ float: left; width: 60%;}
#idev .mainbox .img img{ width: 100%;}
#idev .mainbox .txt{ float: right; width: 40%; padding-top: 160px; padding-left: 40px; box-sizing: border-box;}
#idev .mainbox .txt p{ margin-bottom: 30px;letter-spacing: 0.1rem;}

#inews::after{ display: block; clear: both; content: '';}
#inews .tit{ width: 25%; float: left; padding-left: 20px; box-sizing: border-box;}
#inews .tit h2{ font-size: 90px; font-weight: 700; padding-bottom: 40px;  line-height: 1; margin-bottom: 80px; position: relative;}
#inews .tit h2:before{ position: absolute; bottom: 10px; left: 0; content: ''; background: #000; width: 85px; height: 2px;}
#inews .tit h2:after{ position: absolute; bottom: 0; left: 0; content: ''; background: #000; width: 55px; height: 2px;}
#inews ul{width: 75%; float: left; margin-top: 80px;}
#inews ul li{ margin-bottom:30px; }

@media only screen and (max-width:1110px){
#iabout .tit h2 { font-size: 150px;}
#iabout .mainbox .copy {font-size: 55px;}
#itec .tit h2,#idev .tit h2,#inews .tit h2 {font-size: 60px;}
#idev .mainbox .txt { padding-top: 10px;}
}

@media only screen and (max-width:800px){
section#iabout{ margin-bottom: 0;}
#iabout .mainbox .img { width: 40%;}
#iabout .tit h2 { font-size: 115px;}
#itec { padding-bottom: 0;}
#itec .tit { width: 75vw; height: 75vw;}
}

@media only screen and (max-width:644px){
#iabout .tit h2 {font-size: 80px;}
#iabout .mainbox .img { width: 100%;}
#iabout .mainbox .copy{ font-size: 55px; padding-top: 390px;}
#iabout .mainbox .jp { font-size: 25px;}
#iabout .mainbox .en{ font-size: 20px;}
#itec { padding-top: 50px;}
#itec .tit { width: 85vw; height: 85vw; padding: 20px 20px;}
#itec .tit h2 { font-size: 40px; margin-bottom: 10px;}
#itec .tit p{ font-size: 25px;}
#itec .btn{ margin-left: 20px;}
.webp #itec { background-size: auto; }
.no-webp #itec { background-size:auto;}
#idev .tit h2 { font-size: 40px; }
#idev .tit h2 span:before{ right: 0; bottom: -10px;}
#idev .tit h2 span:after{ right: 30px; bottom: -20px;}
#idev .mainbox .img{ float: none; width: 100%;}
#idev .mainbox .txt{ float: none; width: 100%; padding-top: 40px; padding-left: 20px;}
#idev .mainbox .txt p { font-size: 25px;}
#inews .tit{ width: 100%; float: none;}
#inews .tit h2 { font-size: 40px;margin-bottom: 40px;}
#inews ul{width: 90%; float: none; margin: 0 auto;}
#inews ul li{ font-size: 20px;}
}

/* 技術紹介technology*/
section#kvtec{  position: relative; margin-bottom: 30px; padding: 180px 30px 120px;}
.webp #kvtec { background-image: url("images/webp/technology/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvtec { background-image: url("images/technology/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvtec .copy{ font-size: 64px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
#kvtec .sub{ font-size: 28px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 1.2s ease-in-out 1s 1  forwards; opacity: 0;}
#tectop{ position: relative;}
#tectop:after{ position: absolute; width: 50vw; height: 50vw; content: ''; top: 100px; left: 0; background: #aabdcb; z-index: -10;}
#tectop .tit h2{margin-bottom: 50px;font-size: 125px; font-weight: 700;  line-height: 1; margin-left: 20px; }
#tectop .tit h2 span{ position: relative;}
#tectop .tit h2 span:before{ position: absolute; bottom: 40px; right: -100px; content: '技術紹介'; width: 85px; border-bottom: 2px solid #000; font-size: 14px; font-weight: 200; padding-bottom: 5px;}
#tectop .tit h2 span:after{ position: absolute; bottom: 30px; right: -70px; content: ''; background: #000; width: 55px; height: 2px;}
#tectop .noboxold{ position: relative; padding: 0 20px; box-sizing: border-box;}
#tectop .noboxold h3{ font-size: 50px; font-weight: bold;  position: absolute; top: 170px; left: 0;-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;white-space: nowrap; font-family: "游ゴシック体", YuGothic; }
#tectop .noboxold h3:before{ position: absolute; content:''; left: 80px; top: 0; border-right: 2px solid #000; height: 600px;}
#tectop .noboxold h3:after{ position: absolute; content:''; left: 90px; top: 545px; border-right: 2px solid #000; height: 60px;transform: rotate(20deg);}
#tectop .noboxold ul li{ margin-bottom: 70px; letter-spacing: 0.1rem;}
#tectop .noboxold ul li:nth-child(2){ margin-left: 150px;}
#tectop .noboxold ul li:nth-child(3){ margin-left: 300px;}
#tectop .noboxold ul li:before{ font-weight: 700; opacity: 0.2; font-size: 138px; line-height: 1; float: left; margin-bottom: 100px; margin-right: 20px;}
#tectop .noboxold ul li:first-child:before{ content: '01';}
#tectop .noboxold ul li:nth-child(2):before{ content: '02';}
#tectop .noboxold ul li:nth-child(3):before{ content: '03';}
#tectop .noboxold ul li h4{ font-size: 36px; font-weight: 700; padding-top: 30px;}
#tectop .noboxnew h3{ color: #fff; font-size: 50px; font-weight: 700; width: 70%; padding-left: 10%; position: relative; height: 100px; line-height: 100px; margin-bottom: 50px;}
.webp #tectop .noboxnew h3 { background: url("images/webp/logo3.webp") no-repeat left 30px center #ff8645;}
.no-webp #tectop .noboxnew h3 { background: url("images/logo3.png") no-repeat left 30px center #ff8645; }
#tectop .noboxnew h3:after { content:'';display: inline-block; width: 100px; border-bottom: 100px solid #ff8645; border-right: 100px solid transparent; position: absolute; top: 0; left: 100%;}
#tectop .noboxnew ul{ position: relative; padding: 0 20px; box-sizing: border-box;}
#tectop .noboxnew ul li{ margin-bottom: 70px; letter-spacing: 0.1rem;}
#tectop .noboxnew ul li:nth-child(2){ margin-left: 150px;}
#tectop .noboxnew ul li:nth-child(3){ margin-left: 300px;}
#tectop .noboxnew ul li:before{ font-weight: 700; opacity: 0.2; font-size: 138px; line-height: 1; float: left; margin-right: 20px;}
#tectop .noboxnew ul li:first-child:before{ content: '01';}
#tectop .noboxnew ul li:nth-child(2):before{ content: '02';}
#tectop .noboxnew ul li:nth-child(3):before{ content: '03';}
#tectop .noboxnew ul li h4{ font-size: 36px; font-weight: 700; color: #ff8645; padding-top: 80px;}
#tectop .noboxnew ul li p{ padding-top: 50px; position: relative;}
#tectop .noboxnew ul li p:before{ content: ''; height: 50px; width: 1px; border-left: dotted 2px #000; position: absolute; left: 80px; top: 0;display: block;}

section#tecabout{ margin-bottom: 50px;}
#tecabout{padding: 50px 0; border-top: 1px dotted #ccc;border-bottom: 1px dotted #ccc;}
#tecabout h2{ text-align: center; font-size: 27px; font-weight: 700; color: #ff8645; margin-bottom: 35px;}
#tecabout h2 span{ font-size: 14px; color: #000; font-weight: 200;}
#tecabout .mainbox::after{ display: block; clear: both; content: '';}
#tecabout .mainbox .lft{ width: 50%; float: left; font-size: 230px;font-weight: 700; color: #ff8645; position: relative; padding-left: 20px; box-sizing: border-box;line-height: 1;}
#tecabout .mainbox .jp{ position: absolute; bottom: 15px; right: 0; font-size: 54px; color: #000;}
#tecabout .mainbox .rgt{ width: 47%; float: right;padding-top: 60px; padding-right: 20px; box-sizing: border-box; letter-spacing: 0.1rem;}

#tecmain h2{ font-size: 78px; font-weight: 700; color: #ff8645; width: 30%; margin-left: 70%; padding-bottom: 50px; box-sizing: border-box;line-height: 0.7;}
#tecmain h2 span{ font-size: 40px; color: #000; font-weight: 200;}
#tecmain h2::after{ display: block; clear: both; content: '';}
.tab{display: flex; width: 100%;}
.tab li{ width: 100%;}
.tab li a{display: block;background:#fff;padding:5px 20px; text-align: center; font-size: 45px; font-weight: 700; border: dotted 1px #ccc; position: relative;}
.tab li a:hover{background:#ff8645; color: #fff;}
.tab li.active a{background:#ff8645; color: #fff;}
.tab li a:after{ position: absolute; bottom: 0; right: 0; content: ''; display: inline-block; border-bottom: 20px solid #ff8645; border-left: 20px solid transparent;}
.tab li a .no{ position: absolute; top: 10px; left: 10px; content: ''; font-size: 14px; font-weight: 200; letter-spacing: 0.01rem;}
.tab li.active a .no{ color: #fff;}
.area {	display: none;opacity: 0;background: #fff; margin-bottom: 50px;}
.area.is-active { display: block;animation-name: displayAnime;animation-duration: 2s; animation-fill-mode: forwards;}
@keyframes displayAnime{ from {opacity: 0;}	to {opacity: 1;	}}

#tecmain .topbox{ margin-bottom: 100px;}
#tecmain .topbox::after{ display: block; clear: both; content: '';}
#tecmain .topbox .img{ width: 45%; float: left;}
#tecmain .topbox .img img{ width: 100%;}
#tecmain .topbox .txt{ width: 50%; float: right; padding-top: 20px;}
#tecmain .topbox .txt .jyurai,#tecmain .topbox .txt .kaiketsu{ margin-bottom: 40px;}
#tecmain .topbox .txt .jyurai h3{ font-size: 25px; font-weight: 700; border-left: 5px solid #000; padding-left: 10px; margin-bottom: 20px;}
#tecmain .topbox .txt .kaiketsu h3{ font-size: 25px; font-weight: 700; border-left: 5px solid #ff8645;color: #ff8645; padding-left: 10px; margin-bottom: 20px;}
#tecmain .topbox .txt .jyurai p,#tecmain .topbox .txt .kaiketsu p{ font-size: 20px; font-weight: 200; letter-spacing: 0.02rem;}
#tecmain .topbox .txt .jyurai ul li,#tecmain .topbox .txt .kaiketsu ul li{ font-size: 20px; font-weight: 200; letter-spacing: 0.02rem; list-style-type: disc; margin-left: 20px;}
#tecmain .topbox .txt .kaiketsu p span,#tecmain .topbox .txt .kaiketsu ul li span{ font-weight: 500; border-bottom: 2px solid #ff8645;}
#tecmain .topbox .txt .youto::after{ display: block; clear: both; content: '';}
#tecmain .topbox .txt .youto ul li{ padding: 5px 15px; margin: 0 5px; border: dotted #ccc 1px; float: left; font-size: 14px; font-weight: 200;}
#tecmain .topbox .txt .youto ul li:first-child{ padding: 5px 0 5px 0; border: none; margin-left: 0;}
#tecmain .inner{ max-width: 1200px; width: 96%; margin: 0 auto;}
#tecmain .babox{ margin-bottom: 100px;}
#tecmain .babox::after{ display: block; clear: both; content: '';}
.webp #tecmain .babox { background: url("images/webp/icon5.webp") no-repeat center center; }
.no-webp #tecmain .babox { background:url(images/icon5.png) no-repeat center center;}
#tecmain .babox .lft{ width: 40%; float: left; border: 1px dotted #ccc;}
#tecmain .babox .rgt{ width: 40%; float: right; border: 1px dotted #ff8645;}
#tecmain .babox .lft h3{ text-align: center; font-size: 25px; background: #000; color: #fff;}
#tecmain .babox .rgt h3{ text-align: center; font-size: 25px; background: #ff8645; color: #fff;}
#tecmain .babox .lftbox::after,#tecmain .babox .rgtbox::after{ display: block; clear: both; content: '';}
#tecmain .babox .lft1,#tecmain .babox .rgt1{ width: 55%; float: left; text-align: center; font-size: 20px;}
#tecmain .babox .lft2,#tecmain .babox .rgt2{ width: 40%; float: left; text-align: center; font-size: 20px;}
#tecmain .babox p{ text-align: center; font-size: 20px; font-weight: 200; }
#tecmain .babox .img{ text-align: center; margin-top: 20px; }
#tecmain .babox p{ margin-top: 30px; margin-bottom: 30px;font-weight: 200;}
#tecmain .babox .coilbox::after{ display: block; clear: both; content: '';}
#tecmain .tablel{ margin-bottom: 100px;}
#tecmain .tablel table{ width: 100%; border-right: #8695a1 1px solid;border-left: #8695a1 1px solid;}
#tecmain .tablel table th,#tecmain .tablel table td{ padding: 20px 0; text-align: center; font-size: 20px;border-bottom: #8695a1 1px solid;font-weight: 200;}
#tecmain .tablel table th{ background: #8695a1; color: #fff;}
#tecmain .tablel .kome{ text-align: right; font-size: 16px; margin-bottom: 50px;font-weight: 200;}
#tecmain .tablel .btm ul li{ list-style-type: disc; margin-left: 20px; font-size: 20px; font-weight: 200;}
#tecmain .lrbox{ font-size: 20px; font-weight: 200;}
#tecmain .lrbox::after{ display: block; clear: both; content: '';}
#tecmain .lrbox .lft{ width: 48%; float: left; border: 1px dotted #ccc;}
#tecmain .lrbox .rgt{ width: 48%; float: right; border: 1px dotted #ccc;}
#tecmain .lrbox h3{ text-align: center; font-size: 25px; background: #000; color: #fff;}
#tecmain .lrbox .img{ text-align: center; margin-top: 20px; padding: 20px; padding-bottom: 0;}
#tecmain .lrbox .img img{ width: 100%;}
#tecmain .lrbox p{ padding: 20px; font-size: 16px; }
#tecmain .tables{ padding: 20px;}
#tecmain .tables table{ width: 100%; border-right: #8695a1 1px solid;border-left: #8695a1 1px solid;}
#tecmain .tables table th,#tecmain .tables table td{ padding: 20px 0; text-align: center; font-size: 16px;border-bottom: #8695a1 1px solid;font-weight: 200;}
#tecmain .tables table th{ background: #8695a1; color: #fff;}

#tecmain .coilno1::after,#tecmain .coilno2::after{ display: block; clear: both; content: '';}
#tecmain .coilno1,#tecmain .coilno2{ margin-bottom: 100px;}
#tecmain .coilno1 h3,#tecmain .coilno2 h3,#tecmain .coilno3 h3{font-size: 25px; font-weight: 700; border-left: 5px solid #000; padding-left: 10px; margin-bottom: 20px;}
#tecmain .coilno1 .box::after{ display: block; clear: both; content: '';}
#tecmain .coilno1 .box{ border: 1px #ccc dotted; width: 40%; float: left; box-sizing: border-box; padding: 20px;}
#tecmain .coilno1 .box .lft{ width: 48%; float: left; text-align: center; font-size: 20px; font-weight: 200;}
#tecmain .coilno1 .box .rgt{ width: 48%; float: right; text-align: center; font-size: 20px; font-weight: 200;}
#tecmain .coilno1 .box p{ margin-top: 30px;margin-bottom: 10px;}
#tecmain .coilno1 .txt{width: 55%; float: right; font-size: 20px; font-weight: 200; padding-top: 50px;}
#tecmain .coilno2 .box::after{ display: block; clear: both; content: '';}
#tecmain .coilno2 .box{ border: 1px #ccc dotted; width: 60%; float: left; box-sizing: border-box; padding: 20px;}
#tecmain .coilno2 .box .lft{ width: 30%; float: left; text-align: center; font-size: 20px; font-weight: 200;}
#tecmain .coilno2 .box .rgt{ width: 68%; float: right; text-align: center; font-size: 20px; font-weight: 200;padding: 0;}
#tecmain .coilno2 .txt{width: 35%; float: right; font-size: 20px; font-weight: 200; padding-top: 50px;}
#tecmain .coilno3{ position: relative;}
#tecmain .coilno3:before{ position: absolute; left: 0; right: 0; top: 350px; content: 'モータに搭載'; text-align: center;font-size: 20px; font-weight: 200;}
#tecmain .coilno3::after{ display: block; clear: both; content: '';}
.webp #tecmain .coilno3 { background: url("images/webp/icon5.webp") no-repeat center center; }
.no-webp #tecmain .coilno3 { background:url(images/icon5.png) no-repeat center center;}
#tecmain .coilno3 .lft{ width: 40%; float: left; }
#tecmain .coilno3 .rgt{ width: 40%; float: right;}
#tecmain .coilno3 .img{ border: dotted 1px #ccc; padding: 20px; margin-bottom: 30px;}
#tecmain .coilno3 .img img{ width: 100%;}
#tecmain .coilno3 p{ font-size: 20px; font-weight: 200;}
#tecmain .contbtm{ margin-bottom: 30px;}
#tecmain .contbtm::after{ display: block; clear: both; content: '';}
#tecmain .contbtm .lft{ width: 50%; float: left;font-size: 20px;  font-weight: 200;}
#tecmain .contbtm .rgt{ width: 50%; float: right;font-size: 20px;  font-weight: 200;}
#tecmain .contbtm .lft span,#tecmain .contbtm .rgt span{ font-weight: 500; border-bottom: 2px solid #ff8645;}
#tecmain .contbtmimg{ text-align: center;}
#tecmain #appli .topbox .txt{ padding-top: 50px;}
#tecmain #appli p{font-size: 20px;  font-weight: 200;}

@media only screen and (max-width:1000px){
.tab li a { font-size: 23px;}
}

@media only screen and (max-width:800px){
.webp #kvtec { background-image: url("images/webp/technology/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
.no-webp #kvtec { background-image: url("images/technology/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
#tectop .tit h2 { font-size: 100px;}
#tectop .noboxnew h3{  font-size: 48px; width: 85%; padding-left: 20%; position: relative; height: 150px; line-height: 56px; margin-bottom: 0; padding-top: 22px; box-sizing: border-box; letter-spacing: 0.02rem;}
.webp #tectop .noboxnew h3 { background: url("images/webp/logo3.webp") no-repeat left 14px center #ff8645; background-size: 13% auto;}
.no-webp #tectop .noboxnew h3 { background: url("images/logo3.png") no-repeat left 14px center #ff8645; background-size: 13% auto; }
#tectop .noboxnew h3:after { border-bottom: 150px solid #ff8645; width: 0;}
#tecabout .mainbox .lft { font-size: 200px;}
#tecabout .mainbox .jp { font-size: 37px;}
#tecmain h2 {    font-size: 70px; width: 50%; margin-left: 50%;}
}

@media only screen and (max-width:644px){
section#kvtec{ padding: 350px 20px 120px;}
.webp #kvtec { background-image: url("images/webp/technology/sp_kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvtec { background-image: url("images/technology/sp_kv.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvtec .copy {font-size: 34px;}
#kvtec .sub{ font-size: 20px;}
#tectop .tit h2{font-size: 125px;}
#tectop .tit h2 {margin-bottom: 0px; font-size: 25px;}
#tectop .tit h2 span:before { bottom: 10px;}
#tectop .tit h2 span:after { bottom: 0px;}
#tectop .noboxold ul li:before { font-size: 70px;}
#tectop .noboxold ul li h4 { font-size: 25px;}
#tectop .noboxold ul li{ font-size: 18px;}
#tectop .noboxold h3 { font-size: 30px; top: 90px;}
#tectop .noboxold h3:before { left: 50px; height: 370px;}
#tectop .noboxold ul li { margin-bottom: 20px;}
#tectop .noboxold ul li:nth-child(2) { margin-left: 40px;}
#tectop .noboxold ul li:nth-child(3) { margin-left: 0;}
#tectop:after { width: 80vw; height: 80vw; top: 60px;}
#tectop .noboxold ul li:first-child:before { margin-bottom: 130px; margin-right: 0;}
#tectop .noboxold ul li:nth-child(2):before { margin-bottom:250px; margin-right: 0;}
#tectop .noboxold ul li:nth-child(3):before { margin-bottom: 210px; margin-right: 0;}
#tectop .noboxold h3:after { left: 60px; top: 313px;}
#tectop .noboxnew h3{  font-size: 20px; width: 70%; padding-left: 20%; position: relative; height: 100px; line-height: 30px; margin-bottom: 0; padding-top: 22px; box-sizing: border-box; letter-spacing: 0.02rem;}
.webp #tectop .noboxnew h3 { background: url("images/webp/logo3.webp") no-repeat left 14px center #ff8645; background-size: 17% auto;}
.no-webp #tectop .noboxnew h3 { background: url("images/logo3.png") no-repeat left 14px center #ff8645; background-size: 17% auto; }
#tectop .noboxnew h3:after { width: 0px;}
#tectop .noboxnew ul li:before { font-size: 70px;}
#tectop .noboxnew ul li h4 { font-size: 25px;}
#tectop .noboxnew ul li p { font-size: 20px;}
#tectop .noboxnew ul li { margin-bottom: 30px;}
#tectop .noboxnew ul li:nth-child(2),#tectop .noboxnew ul li:nth-child(3) { margin-left: 0;}
#tecabout .mainbox .lft { width: 100%; float: none; font-size: 160px;}
#tecabout .mainbox .jp {font-size: 37px;}
#tecabout .mainbox .rgt { width: 96%; float: none; padding-right: 0; margin: 0 auto; font-size: 20px;}
#tecmain h2 { font-size: 70px; width: 100%; margin-left: 0%;}
.tab { display: block;}
.tab li a { font-size: 20px;}
#tecmain .topbox .img,#tecmain .topbox .txt{ width: 100%;float: none;}
#tecmain .topbox .txt{ width: 96%; margin: 0 auto;}
#tecmain .topbox { margin-bottom: 50px;}
#tecmain .topbox .txt .youto ul li{ margin-bottom: 10px;}
#tecmain .babox{ margin-bottom: 50px;}
#tecmain .babox .lft,#tecmain .babox .rgt{width: 100%; float: none; }
.webp #tecmain .babox { background: url("images/webp/icon6.webp") no-repeat center center; background-size: 5% auto; }
.no-webp #tecmain .babox { background:url(images/icon6.png) no-repeat center center; background-size: 5% auto; }
#tecmain .babox .lft{ margin-bottom: 200px;}
#tecmain .tablel table th, #tecmain .tablel table td { font-size: 15px;}
#tecmain .tablel .kome { font-size: 14px; margin-bottom: 30px;}
#tecmain .tablel .btm ul li { font-size: 16px;}
#tecmain .lrbox .lft,#tecmain .lrbox .rgt{ width: 100%; float: none;}
#tecmain .lrbox .lft{ margin-bottom: 20px;}
#tecmain .tables table th, #tecmain .tables table td { font-size: 14px;}
#tecmain .coilno1 .box,#tecmain .coilno1 .txt,#tecmain .coilno2 .box,#tecmain .coilno2 .txt{ width: 100%; float: none;}
#tecmain .coilno1 .box,#tecmain .coilno2 .box{ margin-bottom: 20px;}
#tecmain .coilno1 .txt,#tecmain .coilno2 .txt{ padding-top: 0;}
#tecmain .coilno1, #tecmain .coilno2 { margin-bottom: 50px;}
#tecmain .coilno3 .lft,#tecmain .coilno3 .rgt{ width: 100%; float: none;}
#tecmain .coilno3 .lft{ margin-bottom: 200px;}
.webp #tecmain .coilno3 { background: url("images/webp/icon6.webp") no-repeat center top 730px; background-size: 5% auto; }
.no-webp #tecmain .coilno3 { background:url(images/icon6.png) no-repeat center center; background-size: 5% auto; }
#tecmain .contbtm .lft,#tecmain .contbtm .rgt { font-size: 14px;}
#tecmain #appli p,#tecmain .coilno1 p,#tecmain .coilno2 p,#tecmain .coilno3 p { font-size: 18px;}
}

/* 会社紹介about us*/
section#kvabo{  position: relative; margin-bottom: 30px; padding: 180px 30px 120px;}
.webp #kvabo { background-image: url("images/webp/about/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvabo { background-image: url("images/about/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvabo .copy{ font-size: 64px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
#kvabo .sub{ font-size: 28px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 1.2s ease-in-out 1s 1  forwards; opacity: 0;}
section#abotop{ position: relative; margin-bottom: 50px;}
#abotop:after{ position: absolute; width: 50vw; height: 50vw; content: ''; top: 100px; left: 0; background: #aabdcb; z-index: -10;}
#abotop .tit h2{margin-bottom: 50px;font-size: 125px; font-weight: 700;  line-height: 1; margin-left: 20px; }
#abotop .tit h2 span{ position: relative;}
#abotop .tit h2 span:before{ position: absolute; bottom: 40px; right: -100px; content: '会社紹介'; width: 85px; border-bottom: 2px solid #000; font-size: 14px; font-weight: 200; padding-bottom: 5px;}
#abotop .tit h2 span:after{ position: absolute; bottom: 30px; right: -70px; content: ''; background: #000; width: 55px; height: 2px;}
section#abomessage{ margin-bottom: 0;}
#abomessage{padding: 0 0 50px;border-bottom: 1px dotted #ccc;}
#abomessage h2{ text-align: center; font-size: 100px; font-weight: 700;  margin-bottom: 35px; line-height: 1;}
#abomessage h2 span{ font-size: 14px;  font-weight: 200;}
#abomessage p{ font-weight: 200; font-size: 20px; margin-bottom: 20px;}
#abomessage p span{ font-weight: 700; border-bottom: 2px solid #ff8645;}

@media only screen and (max-width:800px){
.webp #kvabo { background-image: url("images/webp/about/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
.no-webp #kvabo { background-image: url("images/about/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
#kvabo .copy{ line-height: 1.2; margin-bottom: 20px;}
}

@media only screen and (max-width:644px){
section#kvabo{ padding: 350px 20px 120px;}
.webp #kvabo { background-image: url("images/webp/about/sp_kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvabo { background-image: url("images/about/sp_kv.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvabo .copy {font-size: 34px;}
#kvabo .sub{ font-size: 20px;}
#abotop .tit h2{font-size: 125px;}
#abotop .tit h2 {margin-bottom: 0px; font-size: 25px;}
#abotop .tit h2 span:before { bottom: 10px;}
#abotop .tit h2 span:after { bottom: 0px;}
#abomessage h2 { font-size: 40px;}
#abomessage p{ font-size: 16px;}
}

/* アクセスaccess*/
section#kvacc{  position: relative; margin-bottom: 30px; padding: 180px 30px 120px;}
.webp #kvacc { background-image: url("images/webp/access/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvacc { background-image: url("images/access/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvacc .copy{ font-size: 64px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
#kvacc .sub{ font-size: 14px;font-weight: 200;letter-spacing: 0.1rem;animation: kvtitfade 1.2s ease-in-out 1s 1  forwards; opacity: 0;}
#accmap{padding: 0 0 50px;border-bottom: 1px dotted #ccc; position: relative;}
#accmap:after{ position: absolute; width: 50vw; height: 50vw; content: ''; top: 100px; left: 0; background: #aabdcb; z-index: -10;}
#accmap h2{ text-align: center; font-size: 100px; font-weight: 700;  margin-bottom: 35px; line-height: 1;}
#accmap h2 span{ font-size: 14px;  font-weight: 200;}
#accmap iframe{  width: 100%; height: 600px; margin-bottom: 50px;}
#accmap .inner{ text-align: center;}
#accmap h3{font-weight: 700; font-size: 25px;}
#accmap h4 span{ font-size: 20px; color: #fff; padding: 5px 50px; background: #000;}
#accmap p{ margin-bottom: 50px;}

@media only screen and (max-width:644px){
section#kvacc{ padding: 350px 20px 120px;}
.webp #kvacc { background-image: url("images/webp/access/sp_kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvacc { background-image: url("images/access/sp_kv.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvacc .copy {font-size: 34px;}
#kvacc .sub{ font-size: 20px;}
#accmap h2 { font-size: 40px;}
#accmap p{ font-size: 20px;}
}

/* 開発実績development*/
section#kvdev{  position: relative; margin-bottom: 30px; padding: 180px 30px 120px;}
.webp #kvdev { background-image: url("images/webp/development/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvdev { background-image: url("images/development/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvdev .copy{ font-size: 64px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
#kvdev .sub{ font-size: 28px;font-weight: 700;letter-spacing: 0.1rem;animation: kvtitfade 1.2s ease-in-out 1s 1  forwards; opacity: 0;}
#devtop{ position: relative;}
#devtop:after{ position: absolute; width: 50vw; height: 20vw; content: ''; top: 100px; left: 0; background: #aabdcb; z-index: -10;}
#devtop .tit h2{margin-bottom: 50px;font-size: 125px; font-weight: 700;  line-height: 1; margin-left: 20px; }
#devtop .tit h2 span{ position: relative;}
#devtop .tit h2 span:before{ position: absolute; bottom: 40px; right: -100px; content: '開発実績'; width: 85px; border-bottom: 2px solid #000; font-size: 14px; font-weight: 200; padding-bottom: 5px;}
#devtop .tit h2 span:after{ position: absolute; bottom: 30px; right: -70px; content: ''; background: #000; width: 55px; height: 2px;}
#devtop ul{ margin-bottom: 50px;}
#devtop ul::after{ display: block; clear: both; content: '';}
#devtop ul li{ width: 32%; margin-right: 2%; float: left;}
#devtop ul li:last-child{ margin-right: 0;}
#devtop ul li h3{ margin-bottom: 20px; font-size: 25px;}
#devtop ul li .img{ margin-bottom: 20px;}
#devtop ul li .detail{ font-size: 14px; border: 1px dotted #ccc; padding: 20px; background: #fff; font-weight: 200;}

@media only screen and (max-width:800px){
.webp #kvdev { background-image: url("images/webp/development/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
.no-webp #kvdev { background-image: url("images/development/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: right -260px center; }
#devtop .tit h2{ font-size: 80px;}

}

@media only screen and (max-width:644px){
section#kvdev{ padding: 170px 20px 310px;}
.webp #kvdev { background-image: url("images/webp/development/sp_kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvdev { background-image: url("images/development/sp_kv.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvdev .copy {font-size: 34px;}
#kvdev .sub{ font-size: 20px;}
#devtop .tit h2{font-size: 125px;}
#devtop .tit h2 {margin-bottom: 0px; font-size: 25px;}
#devtop .tit h2 span:before { bottom: 10px;}
#devtop .tit h2 span:after { bottom: 0px;}
#devtop ul li{ width: 100%; float: none; margin-bottom: 30px; margin-right: 0;}
#devtop:after { height: 80vw;top: 10px;}
}

/* お問い合わせcontact */
section#kvcon{  position: relative; margin-bottom: 30px; padding: 180px 30px 120px;}
.webp #kvcon { background-image: url("images/webp/contact/kv.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.no-webp #kvcon { background-image: url("images/contact/kv.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; }
#kvcon .copy{ font-size: 64px;font-weight: 700;letter-spacing: 0.1rem; color: #fff;animation: kvtitfade 0.8s ease-in-out 1s 1  forwards; opacity: 0;}
#kvcon .sub{ font-size: 14px;font-weight: 200;letter-spacing: 0.1rem; color: #fff;animation: kvtitfade 1.2s ease-in-out 1s 1  forwards; opacity: 0;}
#formbox th span{ color: #fff; background: #ff8645; padding: 5px 10px; margin-left: 10px; font-size: 14px;}
#formbox th{ width: 42%; vertical-align: top; text-align: left; padding-left: 100px;}
#formbox input{ width: 80%; height: 30px;}
#formbox select{ width: 50%; font-size: 25px; font-weight: 500; height: 40px;}
#formbox textarea{ width: 80%!important; height: 200px!important;}
#formbox .btn{ clear:both; width:100%; text-align:center;}
#formbox button{border:none; background:none;}
.tableset .formend{max-width:1000px; width:100%; margin:100px auto; text-align: center; font-size: 20px;}
.tableset .formend h2{ font-size: 30px; margin-bottom: 50px;}

@media only screen and (max-width:800px){
#formbox th{padding-left: 20px; padding-right: 20px;}
#formbox select { width: 80%;}
}

@media only screen and (max-width:644px){
section#kvcon{ padding: 85px 20px 70px;}
.webp #kvcon { background-image: url("images/webp/contact/sp_kv.webp"); background-repeat: no-repeat; background-size: 100% auto;}
.no-webp #kvcon { background-image: url("images/contact/sp_kv.jpg"); background-repeat: no-repeat; background-size: 100% auto; }
#kvcon .copy {font-size: 34px;}
#kvcon .sub{ font-size: 20px;}
#formbox th{ width: 100%;  padding-left: 0px;}
#formbox input{ height: 40px;}
#formbox input,#formbox select,#formbox textarea{ width: 100%;box-sizing: border-box;}
.tableset .formend{max-width:1000px; width:100%; margin:100px auto; text-align: center; font-size: 16px;}
.tableset .formend h2{ font-size: 20px; margin-bottom: 50px;}
}


/* 共通エリア
*****************************************************/
main::after,section::after{ display: block; clear: both; content: '';}
section{ margin-bottom: 100px; }
.inner{ max-width: 1200px; width: 96%; margin: 0 auto;}
.btn a{ color: #fff;transition: 0.3s; padding: 15px 110px 15px 30px; font-size: 14px; font-weight: 200; box-sizing: border-box; position: relative; overflow: hidden;display:inline-block;}
.btn a::before {content: '';position: absolute;	top: 0;	left: -75%; width: 50%;	height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);	transform: skewX(-25deg);}
.btn a:hover::before {animation: shine 0.7s;}
@keyframes shine {
100% {left: 125%;}
}
.webp .btn a { background: url("images/webp/icon1.webp") no-repeat right 30px center #ff8645; }
.no-webp .btn a { background:url(images/icon1.png) no-repeat right 30px center #ff8645;}
.webp .btn a:hover { background: url("images/webp/icon1.webp") no-repeat right 25px center #ff8645; }
.no-webp .btn a:hover { background:url(images/icon1.png) no-repeat right 25px center #ff8645;}

section.tableset{ margin-bottom: 0;}
.tableset{padding-bottom: 50px;}
.tableset h2{ text-align: center; font-size: 100px; font-weight: 700;  margin-bottom: 35px; line-height: 1;}
.tableset h2 span{ font-size: 14px;  font-weight: 200;}
.tableset table{ width: 100%;}
.tableset table th,.tableset table td{ padding: 20px 0; font-size: 20px; border-bottom: #ccc 1px solid; font-weight: 200;}
.tableset table th{ width: 30%; font-weight: 700; text-align: right; padding-right: 100px; box-sizing: border-box;}
.tableset .btn{ margin-top: 20px; margin-bottom: 15px;}

@media only screen and (max-width:800px){
.tableset table th{ width: 40%;}
}


@media only screen and (max-width:644px){
main section{width: 100vw; overflow-x: hidden; box-sizing: border-box;}
section{ margin-bottom: 50px;}
.tableset h2{ font-size: 40px;}
.tableset table th,.tableset table td{ width: 100%; display: block;}
.tableset table th{ border-bottom: none; padding-bottom: 0; padding-right: 0; text-align: left;}
}


/* フッター
*****************************************************/
footer{ background: #aabdcb; padding: 50px 20px 30px; letter-spacing: 0.1rem;}
footer #top::after,footer #btm::after{ display: block; clear: both; content: '';}
footer #top .txt{ width: 45%; float: left; font-size: 25px;}
footer #top .btn{ width: 23%; float: left; padding: 0 20px; box-sizing: border-box;}
footer #top .tel{ float: right; width: 32%; font-size: 50px; padding-left: 50px; box-sizing: border-box; font-weight: 700;}
.webp footer #top .tel { background: url("images/webp/icon3.webp") no-repeat center left; }
.no-webp footer #top .tel { background:url("images/icon3.png") no-repeat center left;}
footer section#top{ margin-bottom: 50px;}
footer section#btm{ margin-bottom: 0;}
footer #btm .logo{ float: left;}
footer #btm .links{ float: left; margin-left: 50px; margin-top: 80px;}
footer #btm .links a{ font-size: 16px; font-weight: normal;margin-right: 20px;}
footer #btm address{ float: right; font-size: 20px; padding-top: 100px; margin-right: 50px;}

@media only screen and (max-width:1300px){
footer #top .tel { font-size: 40px;}
footer #top .txt{ width: 30%;}
footer #top .btn{ width: 35%;}
footer #top .tel{ width: 35%;}
}

@media only screen and (max-width:1000px){
footer #top .txt{ width: 100%; float: none;}
footer #top .btn{ width: 50%; padding-left: 0; padding-top: 20px;}
footer #top .tel{ width: 50%;}
}


@media only screen and (max-width:644px){
footer{ padding: 20px;}
footer #top .txt,footer #top .btn,footer #top .tel,footer #btm .logo,footer #btm address{ width: 100%; float: none;}
footer #top .txt{ font-size: 20px; margin-bottom: 20px;}
footer #top .btn{ padding: 0; width:70%;margin:0 auto 20px;}
footer #top .btn a{ width: 100%;display: block;}
footer #top .tel { font-size: 35px;}
.webp footer #top .tel { background: url("images/webp/icon3.webp") no-repeat center left; background-size: 10% auto; }
.no-webp footer #top .tel { background:url("images/icon3.png") no-repeat center left; background-size: 10% auto;}
footer #btm .logo{ text-align: center;}
footer #btm .links{ float: none; margin-left: 0; margin-top: 20px; width: 100%; text-align: center;}
footer #btm address{font-size: 16px; padding-top: 50px; text-align: center; margin-right: 0; margin-bottom: 50px;}
}


/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
.fixedMenu .spMenuCenter{display:block;}
div.drawer{display:block;}
nav#mainNav{display:none;}
}
@media only screen and (max-width:800px){
.tabDisp{display:block;}
}

/* 動き
------------------------------------------------------------*/
/*タイピング文字*/
.TextTyping span {display: none;}
.TextTyping::after { content: "|";	animation: typinganime .8s ease 5s 1 infinite;}
@keyframes typinganime{
00%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}

/*白く光る文字*/
.glowAnime span{opacity: 0;}
.glowAnime.glow span{ animation:glow_anime_on 5s ease-out forwards; }
@keyframes glow_anime_on{
0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

/*scroll_up ｜下から上へ出現*/
.scroll_up { transition: 0.8s ease-in-out; transform: translateY(300px); opacity: 0;}
.scroll_up.on { transform: translateY(0);  opacity: 1.0;}

/*scroll_left ｜左から出現*/
.scroll_left { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(-300px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
.scroll_left.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0);}

/*scroll_right ｜右から出現*/
.scroll_right { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;transform: translateX(300px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
.scroll_right.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0);}

/*251005pagetop追記*/
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
a.pagetop {position: fixed; right: 0; bottom: -2px; width: 52px; height: 54px; background: #ff8645; color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; z-index: 9999; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;}
a.pagetop::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg);  margin-top: 2px;}
a.pagetop:hover { transform: translateY(-2px);background: #ff7a33;}
a.pagetop:active {transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,.18);}
a.pagetop:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255,134,69,.6), 0 6px 18px rgba(0,0,0,.18);}
@media (max-width: 480px) {
a.pagetop { width: 46px; height: 46px; }
}