@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap&family=Saira:ital,wght@1,600&display=swap');
:root{/*viewport:320px-1000px*/
	--fontSz30-46:clamp(1.875rem, 1.404rem + 2.35vw, 2.875rem);
	--fontSz24-34:clamp(1.5rem, 1.206rem + 1.47vw, 2.125rem);
	--fontSz22-32:clamp(1.375rem, 1.081rem + 1.47vw, 2rem);
	--fontSz20-30:clamp(1.25rem, 0.956rem + 1.47vw, 1.875rem);
	--fontSz20-26:clamp(1.25rem, 1.074rem + 0.88vw, 1.625rem);
	--fontSz18-24:clamp(1.125rem, 0.949rem + 0.88vw, 1.5rem);
	--fontSz16-18:clamp(1rem, 0.941rem + 0.29vw, 1.125rem);
	--fontSz14-16:clamp(0.875rem, 0.816rem + 0.29vw, 1rem);
	--fontSz12-14:clamp(0.75rem, 0.691rem + 0.29vw, 0.875rem);
	--fontSz10-12:clamp(0.625rem, 0.566rem + 0.29vw, 0.75rem);
}/*var()*/

/*reset--------------------------------------------*/
*{margin:0;padding:0;min-width:0;min-height:0;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,address,em,img,s,small,strong,tt,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,thead,tbody,tfoot,tr,th,td,footer,header,nav,section,summary,article,time,mark{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body{width:100%;height:100%;box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}
footer,header,nav,section{display:block;}
body{line-height:1;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
hr{height:0;margin:0;padding:0;border:0;}
img{vertical-align:middle;border-style:none;border:none;}
svg:not(:root){overflow:hidden;}
[hidden]{display:none!important;}
/*bace--------------------------------------------*/
html{width:100%;height:100%;}
body{position:relative;color:#312b31;font-size:var(--fontSz16-18);font-weight:400;text-align:center;line-height:1.6;font-family:'Noto Sans JP',sans-serif;}
img{max-width:100%;vertical-align:middle;border-style:none;border:none;-ms-interpolation-mode:lighten;}
svg:not(:root){overflow:hidden;max-width:100%;}
[hidden]{display:none!important;}
h1,h2,h3,h4{line-height:1.4;}
p{display:inline-block;margin:1rem auto;text-align:left;}
small,aside{color:#999;font-size:var(--fontSz12-14);line-height:1.4;}
em{font-weight:700;}
strong{font-weight:700;}
i{color:#002b7f;font-style:normal;}
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a.imghover{overflow:hidden;}
a.imghover img{text-decoration:none;position:relative;transition:transform 0.6s ease;}
a.imghover img:hover{transform:scale(1.1);}
a.arrow{position:relative;display:inline-block;padding:0 20px 0 15px;color:#312b31;font-family:'Saira',sans-serif;text-decoration:none;outline:none;}
a.arrow::before{content:'';position:absolute;bottom:-1px;left:15%;width:85%;height:1px;background:#312b31;transition:all 0.3s;}
a.arrow::after{content:'';position:absolute;bottom:4px;right:0;width:15px;height:1px;background:#312b31;transform:rotate(35deg);transition:all 0.3s;}
a.arrow:hover::before{left:25%;}
a.arrow:hover::after{right:-10%;}
.err{margin:30px;padding:20px 30px;text-align:center;border:1px solid #e73a37;background:#fff;}
.err b{color:#e73a37;}
.is-empty{visibility:hidden;}
.scrollBox{margin:30px 0;padding-bottom:6px;-webkit-overflow-scrolling:touch;overflow-x:auto;}
.scrollBox::-webkit-scrollbar{height:4px;}
.scrollBox::-webkit-scrollbar-track{background:#eee;}
.scrollBox::-webkit-scrollbar-thumb{background:#aaa;border:none;}
.scrollBox::-webkit-scrollbar-thumb:hover{background:#999;}
.scrollBox img{min-width:680px;}
.scrollBox table{width:auto;margin:0 !important;white-space:nowrap;overflow:auto;}
.scrollBox table th,.scrollBox table td{padding:5px !important;}

/*左揃え+上揃え*/
.flex_lft{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;}
/*左揃え+上下中央*/
.flex_lftmdl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;}
/*中央揃え+上揃え*/
.flex_cnt{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;}
/*中央揃え+上下中央*/
.flex_cntmdl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
/*中央揃え+下揃え*/
.flex_cntbtm{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;}
/*右揃え+上揃え*/
.flex_end{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;}
/*右揃え+上下中央*/
.flex_endmdl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
/*両端1/2&均等+上揃え*/
.flex_ard{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-around;}
/*両端1/2&均等+上下中央*/
.flex_ardmdl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;}
/*両端1/2&均等+下揃え*/
.flex_ardbtm{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-around;}
/*両端揃え+上揃え*/
.flex_btw{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;}
/*両端揃え+上下中央*/
.flex_btwmdl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
/*両端揃え+下揃え*/
.flex_btwbtm{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;}
/*両端揃え+均等+ストレッチ*/
.flex_strc{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;}
/*縦並び中央寄せ*/
.column_cntmdl{display:flex;align-items:center;justify-content:center;}

/*contents--------------------------------------------*/
main{position:relative;width:100%;height:auto;margin:0;padding:0;}
.container{position:relative;width:calc(100% - 40px);max-width:1000px;margin:30px auto;padding:0;text-align:center;}
section{position:relative;width:100%;margin:0;padding:50px 0;text-align:center;}
section.wht{background:#fff;}
section.blu{background:#f5faff;}
section.works{position:relative;background-image:url('../images/back01.jpg');background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;height:50%;}
section.ph::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%; background:linear-gradient(0deg,rgb(0,44,128),rgb(0,172,235));opacity:0.4;}

/*H*/
.basic{font-size:var(--fontSz20-30);font-family:'Saira',sans-serif;text-align:center;}
.basic span{color:#002c80;}
.typo{position:relative;width:100%;height:auto;margin:0 0 20px 0;padding:0;text-align:left;color:rgba(0,172,235,0.2);font-size:clamp(2.5rem, 0.625rem + 10vw, 6.875rem);font-family:'Saira',sans-serif;line-height:1.2;border-bottom:1px solid rgba(0,172,235,0.2);}
.typo span{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);display:block;width:auto;height:auto;margin:auto;padding:0;color:#312b31;text-align:center;font-size:var(--fontSz20-30);font-weight:700;font-family:'Noto Sans JP',sans-serif;line-height:1;}
.call{text-align:center;font-size:var(--fontSz20-26);font-weight:700;margin:50px auto 0 auto;}
.call span{color:#00aceb;font-size:var(--fontSz30-46);}
.call::before{content:'＼';display:inline-block;margin-right:10px;}
.call::after{content:'／';display:inline-block;margin-left:10px;}
.square{font-size:var(--fontSz20-26);font-weight:700;text-align:left;}
.square::before{content:'■';display:inline-block;margin:10px 5px 0 0;color:#00aceb;}

/*table*/
table{border-collapse:collapse;border-spacing:0;margin:20px auto;}
table tbody th{padding:20px;text-align:left;border-bottom:1px solid #eee;white-space:nowrap;}
table tbody td{padding:20px;text-align:left;border-bottom:1px solid #eee;}

/*header*/
#header{position:fixed;width:100%;height:40px;left:0;top:0;z-index:1000;}
#header::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:none;box-shadow:none;transition:all 0.5s ease 0s;}
#header.not_top::before{transform:translateY(0);background:#fff;box-shadow:0 1px 5px rgba(0,0,0,0.3);}
#headerWarp{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:0;}
#header .logo{position:absolute;top:10px;left:10px;display:inline-block;width:180px;height:auto;}
#header .logo img{position:absolute;top:0;left:0;transition:all 0.5s ease 0s;}
#header.not_top .logoW{opacity:0;}
#header.not_top .logoB{opacity:1;}
#header a.arrow{position:absolute;top:5px;right:10px;color:#fff;}
#header a.arrow::before{background:#fff;}
#header a.arrow::after{background:#fff;}
#header.not_top a.arrow{color:#312b31;}
#header.not_top a.arrow::before{background:#312b31;}
#header.not_top a.arrow::after{background:#312b31;}
@media(min-width:440px){
	#header{height:60px;}
	#header .logo{top:12px;left:10px;width:320px;height:36px;}
	#header a.arrow{top:15px;right:10px;}
}
/*footer*/
footer{width:100%;height:30px;color:#fff;font-size:var(--fontSz12-14);text-align:center;line-height:30px;background:#312b31;}

/*TOP--------------------------------------------*/
/*topWarp*/
#topWarp{position:fixed;width:100%;height:100vh;overflow:hidden;z-index:-1;}
#topSlide{position:fixed;top:0;bottom:0;left:0;right:0;width:auto;width:100%;height:100%;margin:auto;}
#topSlide li{width:100vw;height:100vh;background-repeat:no-repeat;background-size:cover;background-position:center center;background-attachment:fixed;}
#topSlide li:nth-child(1){background-image:url('../images/topSlide/01.jpg');}
#topSlide li:nth-child(2){background-image:url('../images/topSlide/02.jpg');}
#topSlide li:nth-child(3){background-image:url('../images/topSlide/03.jpg');}
#topSlide li:nth-child(4){background-image:url('../images/topSlide/04.jpg');}
#topSlide li:nth-child(5){background-image:url('../images/topSlide/05.jpg');}
#topSlide li:nth-child(6){background-image:url('../images/topSlide/06.jpg');}
#topSlide li img{visibility:hidden;}
#bg{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,172,235,0.4), rgba(0,44,128,0.4), rgba(255,255,255,0.4));background-size:400% 400%;animation:topWave 10s ease infinite;}
#canvasOverlay{position:fixed;top:0;left:0;background:#000;width:100%;height:100%;mix-blend-mode:overlay;}

/*topArea*/
#topArea{position:relative;height:100vh;margin:0;padding:0;}
.circle_warp{position:absolute;top:50%;left:15%;transform:translateY(-50%);width:250px;height:250px;opacity:0.8;}
.circle{position:absolute;top:25px;left:25px;width:200px;height:200px;border-radius:50%;border:solid 1px #fff;}
.dotted{position:absolute;top:122px;left:122px;width:6px;height:6px;border-radius:50%;background:#fff;transform:translateX(-100px);animation:dittedMove 5s linear infinite;}
#welcome{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);width:fit-content;margin:0 auto;color:#fff;font-size:var(--fontSz24-34);font-family:'Saira',sans-serif;text-align:left;white-space:pre-wrap;}
@media(min-width:430px){
	#welcome{white-space:pre;}
}

/*scrolldown*/
.scrolldown{position:absolute;left:50%;bottom:10px;height:50px;}
.scrolldown a{position:absolute;display:inline-block;left:-20px;top:-15px;color:#fff;font-size:var(--fontSz12-14);letter-spacing:0.05rem;text-shadow:0 0 3px #000;text-decoration:none;}
.scrolldown::after{content:"";position:absolute;top:0;width:1px;height:30px;background:#fff;box-shadow:0 0 3px #000;animation:pathmove 1.4s ease-in-out infinite;opacity:0;}

/*topWorks*/
.topWorks li{width:100%;max-width:320px;margin:10px auto;padding:50px 20px;background:rgba(255,255,255,0.8);z-index:2;}
.topWorks li h3{display:block;width:100%;position:relative;margin:0 auto 30px auto;font-size:var(--fontSz20-30);font-family:'Saira',sans-serif;}
.topWorks li h3::after{content:"";position:absolute;bottom:-10px;left:0;right:0;display:block;width:30px;height:2px;margin:0 auto;background:#002c80;}
.topWorks li h4{display:block;width:100%;font-weight:700;margin:0 auto 30px auto;}
.topWorks li img{margin:0 auto 30px auto;}

/*WORKS--------------------------------------------*/
.subTop{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100vh;max-height:500px;color:#fff;text-align:center;}
.subTop:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(0deg,transparent calc(100% - 1px),rgba(255,255,255,0.1) calc(100% - 1px)),linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,0.1) calc(100% - 1px));background-size:16px 16px;background-repeat:repeat;background-position:center center;z-index:1;}
.subTop:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,0.3);}
.subTop img{width:50px;height:40px;margin:0 auto 10px auto;filter:drop-shadow(0 0 3px rgba(0,0,0,0.3));z-index:2;}
.subTop p{display:block;margin:0 auto;font-size:var(--fontSz20-30);font-weight:700;text-shadow:0 0 3px rgba(0,0,0,0.6);z-index:2;}
.subTop span{display:block;font-size:var(--fontSz16-18);text-shadow:0 0 3px rgba(0,0,0,0.6);font-family:'Saira',sans-serif;margin:0 auto;z-index:2;}
.subTop#works{background:url('../images/back01.jpg') no-repeat center center;background-size:cover;}
.worksPh{width:280px;height:auto;margin:0 auto 20px auto;}
.worksAbout{width:calc(100% - 300px);min-width:300px;margin:0 auto 20px auto;}
.point{display:inline-block;list-style:decimal;counter-reset:number;list-style-position:inside;margin:20px auto;}
.point li{margin:0 auto;text-align:left;}
.point li::marker{color:#00aceb;font-size:var(--fontSz30-46);font-family:'Saira',sans-serif;line-height:1.4;}
/*Animation--------------------------------------------*/
@keyframes topWave{
	0%{background-position:50% 0;}
	50%{background-position:50% 100%;}
	100%{background-position:50% 0;}
}
@keyframes dittedMove {
	0%{transform:rotate(0deg) translateX(-100px) rotate(0deg);}
	100%{transform:rotate(360deg) translateX(-100px) rotate(-360deg);}
}
.fade_zoom{animation:fadezoom 15s 0s forwards;}
@keyframes fadezoom {
	0%{transform:scale(1);}
	100%{transform:scale(1.3);}
}
.drawText span{opacity:0;}
.drawText.typing span{animation:opacity 1s ease-out forwards;}
@keyframes opacity{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes pathmove{
	00%{height:0;top:0;opacity:0;}
	30%{height:30px;opacity:1;}
	100%{height:0;top:50px;opacity:0;}
}
.bound{-webkit-animation:bound 0.5s ease infinite alternate;animation:bound 0.5s ease infinite alternate;}
@keyframes bound{
	0%{transform:translateY(0px);}
	100%{transform:translateY(-10px);}
}
.swing{animation:swing linear 2s;animation-iteration-count:infinite;}
@keyframes swing{
	0%{transform:rotate(0deg);}
	3%{transform:rotate(5deg);}
	6%{transform:rotate(-8deg);}
	9%{transform:rotate(3deg);}
	12%{transform:rotate(-4deg);}
	15%{transform:rotate(0deg);}
	100%{transform:rotate(0deg);}
}
.beat{animation:beat 3s reverse infinite;}
@keyframes beat{
	0%{transform:scale(1);}
	60%{transform:scale(1);}
	70%{transform:scale(1.3);}
	80%{transform:scale(1);}
	90%{transform:scale(1.3);}
	100%{transform:scale(1);}
}
.shake img:hover{animation:shake 0.12s linear 3;}
@keyframes shake{
	0%{transform:skew(0deg,0deg);}
	10%{transform:skew(2deg,2deg);}
	75%{transform:skew(-2deg,-2deg);}
	100%{transform:skew(0deg,0deg);}
}

.slide_up,.slide_left,.slide_right{transition:opacity 0.7s;transition:transform 0.7s;}
/*media print--------------------------------------------*/
@media print{
	header,footer,#drawer{display:none;}
	body{zoom:0.6;}
	*,::after,::before{text-shadow:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;}
	a,a:visited{text-decoration:underline;}
	abbr[title]::after{content:" (" attr(title) ")";}
	pre{white-space:pre-wrap!important;}
	blockquote,pre{border:1px solid #999;page-break-inside:avoid;}
	thead{display:table-header-group;}
	img,tr{page-break-inside:avoid;}
	h2,h3,p{orphans:3;widows:3;}
	h2,h3{page-break-after:avoid;}
}