/* seisaku 2023.2.   alank  kinoshita tsubasa , katayama tomoya */

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');

@font-face {
  font-family: "myfont"; /*任意のフォントファミリー名でOK*/
  src: url("./Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf") format("truetype"); /*fontがあるパスを書いて、formatを指定*/
  font-display: swap; /*ダウンロード状況に応じてフォントの表示を変える
(「swap」はWebフォントが読み込まれるまでフォールバックフォントで表示し、読み込まれた時点で置き換えます。)*/
}
/* リセットcss */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
* { box-sizing: border-box; }
a { text-decoration:none; }
li { list-style: none; }
html { font-size:62.5%; }
body{ background:#ffffff; width:100%; height:auto; font-family: "myfont",sans-serif;}
.rel{position:relative;}
.ab{position:absolute;}
.d-f{display:flex;justify-content:center;align-items:center;}
.d-b{display:block;}
.d-i{display:inline-block;}
.f-b{font-weight:bold;}
.max-w11{max-width:1100px;margin:0 auto;}
h1,h2,h3{font-size:24px;}
h4,h5,h6{font-size:20px;}
p,th,td,li{font-size:18px;}
@media screen and (max-width:1200px){
  p,th,td,li{font-size:16px;}
}
@media screen and (max-width:950px){
  p,th,td,li{font-size:14px;}
}
@media screen and (max-width:700px){
  p,th,td,li{font-size:13px;}
}

/* aホバー下線 */
.a-hov,.a-hov-b,.a-hov-bb{position:relative;}
.a-hov::after{position:absolute;left:10%;content:'';width:80%;height:2px;background:#1D60B1;bottom:-10px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}
.a-hov:hover::after,.a-hov-b:hover::after,.a-hov-bb:hover::after{transform:scale(1, 1);}
.a-hov-b::after{position:absolute;left:0%;content:'';width:100%;height:2px;background:#1D60B1;bottom:-2px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}
.a-hov-bb::after{position:absolute;left:10%;content:'';width:80%;height:2px;background:#fcfcfc;bottom:-10px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}

/* ハンバーガー */
.hum{position:relative;z-index:9999;display:none;}
@media screen and (max-width:1200px){
  .hum{display:block;}
  .header{display:none;}
}

/* Hamburger menu */
.nav-trigger{position:fixed;z-index:4;top:4rem;right:30px;width:44px;height:44px;overflow:hidden;color:transparent;white-space:nowrap;text-indent:100%;}
.nav-trigger span{position:relative;}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after{position:absolute;width:40px;height:1.5px;background:#094D8D;z-index:999;}
.nav-trigger span{top:calc(50% - 2px);left:calc(50% - 18px);transition:background .3s;}
.nav-trigger span::before,
.nav-trigger span::after{content:'';top:0;left:0;transition:background .3s, transform .3s;}
.nav-trigger span::before{transform:translateY(-12px);}
.nav-trigger span::after{transform:translateY(12px);}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after{background-color:rgb(255, 255, 255)}
.nav-open .nav-trigger span{background:transparent;}
.nav-open .nav-trigger span::before{transform:rotate(-45deg);top:0;}
.nav-open .nav-trigger span::after{transform:rotate(45deg);top:0;}
/* ナビ内 */
/* ナビ表示幅 */

.hov-op:hover{opacity:.6;}
.nav-container{position:fixed;z-index:3;width:40%;top:0;right:0;overflow:hidden;transform:translateZ(0);transform:translateX(100%);}
.nav-open .nav-container{transform:translateX(0);}
.nav-all{overflow:auto;height:100vh;background:linear-gradient(to right, #146ec3, #1f2830);}
.nav{padding:0;color:#fff;padding:25% 0 15%;}
.nav li{position:relative;border-bottom:1px solid #fff;}
.nav a{display:flex;font-weight:bold;justify-content:space-between;align-items:baseline;padding:3rem 0 .8rem 6%;color:#f6f8f8;transform:translateZ(0);width:95%;letter-spacing:.2rem;}
.nav a:hover{transition:all .1s;opacity:.6;}
.nav a h1{letter-spacing:.1rem;font-size:25px;position:absolute;opacity:.3;}
.nav1 p{display:flex;justify-content: right;width: 100%;}
.nav-opa{opacity:.4;display:block;position:relative;}
.nav-opa::after{background-color:#fff;top:50%;left:30%;content:'';display:block;height:1px;position:absolute;width:30%;}
.nav-under{width:100%;position:absolute;bottom:0;left:0;display:flex;justify-content:left;flex-wrap:wrap;background:linear-gradient(to right,rgba(255, 255, 255, 1),rgba(132, 132, 132, 1));}
.nav-under li{padding:1rem 0 .5rem 6%;width:60px;}
.nav-under li a{display:inline-block;color:#fff;}
.nav-under li a:hover{transition:all .1s;opacity:.8;}
.nav-under li img{width:100%;}
.nav-open .nav-all{animation:slide-links .5s .2s backwards;}
@keyframes slide-links{
  0%{opacity:0;transform:translateX(100%);}
  100%{opacity:1;transform:translateX(0);}
}
/* .nav1{display:block;position:relative;}
.nav1::after{background-color:#fff;top:50%;left:30%;content:'';display:block;height:1px;position:absolute;transition:.5s all;width:0%;}
.nav1:hover::after{width:40%;} */

@media screen and (max-width:1100px){
  .nav-trigger a h6{width:120px;}
  .nav-trigger a h5{font-size:85%;right:72px;}
  .nav-trigger span,
  .nav-trigger span::before,
  .nav-trigger span::after{width:36px;}
  .nav-trigger span::before{top:2px;}
  .nav-trigger span::after{top:-2px;}
}
@media screen and (max-width:950px){
  .nav-container{width:50%;}
  .nav-trigger a h6{width:100px;height:4.5rem;}
  .nav-trigger a h5{top:3rem;right:61px;}
}
@media screen and (max-width:900px){
  .nav-trigger a h5{top:2.7rem;right:63px;}
}
@media screen and (max-width:800px){
  .nav-container{width:50%;}
  .nav-img3 a{width:15%;margin:4% 2%;}
  .nav a h1{font-size:18px;}
  .nav a p{font-size:13px;}
  .nav-under li{width:50px;}
}
@media screen and (max-width:700px){
  .nav-trigger{top:2.5rem;right:20px;}
  .nav-container{width:60%;}
  .nav a{padding:2rem 0 .8rem 0%;}
  .nav-container{width:60%;}
  .nav li{padding:.5rem 0 0 6%;}
  .nav-trigger a h5{right:62px;}
}
@media screen and (max-width:600px){
  .nav a{display:block;}
  .nav a p{text-align:right;}
}
@media screen and (max-width:500px){
  .nav-container{width:100%;}
  .nav li{padding:1rem 0 0 6%;}
  .nav-trigger{right:16px;}
  .nav-trigger a h6{width:90px;height:4rem;}
  .nav-trigger a h5{top:2.6rem;right:57px;}
  .nav1::after{left:45%;}
  .nav a h1{font-size:17px;}
  .nav-under li{width:60px;}
	.nav a p{font-size:17px;}
}
@media screen and (max-width:430px){
  .nav-under li{width:55px;}
}



.top-main{width:100%;background-image:url(./img/top.jpg);background-size:cover;background-color:rgba(255,255,255,0.8);
  background-blend-mode:lighten;}
/* ヘッダー */
header{width:100%;margin:0 auto;height:100px;border-top:15px solid #094D8D;display:fixed;}
header nav,header nav ul{display:flex;flex-wrap:wrap;justify-content:space-between;}
header nav{margin:20px auto 15px;max-width:1200px;}
.top-main-tel{margin-top:5px;}
.top-time{font-size:24px;font-weight:bold;}
.top-eigyo{font-size:14px;font-weight:bold;margin-top:5px;}
header nav ul{gap:0 40px;margin-top:5px;}
header nav ul li{text-align:center;}
header nav ul li a span{font-size:14px;color:#1D60B1;font-weight:bold;}
header nav ul li a p{font-size:16px;color:#080808;font-weight:bold;}
header h1 img{width:240px;}

@media screen and (max-width:1200px){
	header nav{margin:15px auto;justify-content:left;}
	header nav h1{margin:0 2% 0;}
	header nav ul{display:none;}
}
@media screen and (max-width:1110px){
  .top-main nav h1{margin-left:2%;}
  .top-main-tel{margin-right:2%;}
  header nav ul{margin-left:3%;}
}
@media screen and (max-width:950px){
	.top-time{font-size:20px;}
	.top-eigyo{margin-top:2px;}
}
@media screen and (max-width:700px){
	header nav{margin:5px auto;}
	.top-time{font-size:18px;}
	.top-eigyo{font-size:12px;margin-top:1px;}
	header h1 img{width:200px;}
}
@media screen and (max-width:500px){
	.top-main-tel{width:100%;margin-left:3%;}
	.top-time{font-size:15px;}
}

/* 共通 */
.main-box{width:100%;margin:0 auto;overflow:hidden;}
.inner-box{width:85%;height:500px;margin:3% auto;max-width:1100px;display:flex;background-image:url(./img/top.jpg);background-size:70%;background-position:right;position:relative;}
.inner-box-font{position:absolute;left:-2%;bottom:7%;z-index:9;}
.inner-box-font h5{color:rgba(128, 128, 128, 1);}
.inner-box-font h2{font-size:112px;margin-top:-18px;background:linear-gradient(90deg, rgba(5, 55, 116, 1) 0%, rgba(0, 178, 255, 1) 90%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.inner-box-font h3{font-size:50px;background:linear-gradient(90deg, rgba(5, 55, 116, 1) 0%, rgba(0, 178, 255, 1) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.top-img-3kan{display:flex;justify-content:center;width:40%;position:absolute;bottom:5%;right:4%;}
.top-img-3kan img{width:33%;margin:0 1%;}
.inner-box-left{position:absolute;top:0;left:0;width:50%;clip-path:polygon(0 0, 100% 0, 80% 100%, 0% 100%);}
.inner-box-left img{width:100%;height:500px;}
.inner-box-border{width:100%;display:flex;align-items:center;justify-items:center;z-index:9;position:absolute;top:55%;right:-104%;}
.inner-box-border p{writing-mode:vertical-rl;margin-top:-8%;margin-right:-.8%;font-size:13px;}
.scrolldown1{z-index:5;transform:translate(-50%,-50%);z-index:9;}
.scrolldown1::before{content:"";position:absolute;left:0%;top:0%;width:.5px;background:#8d8d8d;animation:pathmove 2s ease-in-out infinite;opacity:0;}
@keyframes pathmove{
  0%{height:0;top:0;opacity:0;}
  20%{height:130px;opacity:1;}
  100%{height:0;top:190px;opacity:0;}
}

@media screen and (max-width:1110px){
  .main-box{margin:0 auto;}
  .inner-box{height:450px;}
  .inner-box-font h3{font-size:40px;}
}
@media screen and (max-width:1000px){
  .inner-box{height:400px;}
}
@media screen and (max-width:950px){
	.inner-box{background-size:cover;}
  .inner-box,.inner-box-left img{height:430px;}
  .inner-box-font{bottom:15%;}
  .inner-box-font h2{font-size:70px;}
  .inner-box-font h3{font-size:28px;}
	.top-img-3kan{bottom:9%;}
	.inner-box-border{display:none;}
}
@media screen and (max-width:700px){
	.inner-box-left{width:35%;}
	.inner-box-font{bottom:unset;top:10%;}
  .inner-box-font h2{font-size:60px;}
  .inner-box-font h3{font-size:20px;}
	.top-img-3kan{width:50%;bottom:5%;right:5%;}
}
@media screen and (max-width:500px){
	.inner-box{width:100%;margin:10% auto;}
	.inner-box-font{top:5%;left:3%;}
	.inner-box-font h5{font-size:15px;margin-bottom:5px;}
  .inner-box-font h2{font-size:50px;}
  .inner-box-font h3{font-size:18px;}
	.top-img-3kan{width:75%;bottom:2%;right:unset;left:5%;z-index:9;}
}



/* メニュー */
.nav-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:1300px;margin:0 auto;padding-bottom:3%;}
.nav-item,.nav-item-ye{width:20%;box-shadow:3px 3px 5px rgb(138, 138, 138);}
.nav-item a,.nav-item-ye a{display:block;font-size:14px;text-align:center;padding:15px 0;font-weight:bold;transition:all 0.2s ease;outline-offset:-5px;}
.nav-item a{background-color:#0056d2;color:#fff;border:2px solid #0056d2;outline :1px solid #FFFFFF;}
.nav-item-ye a{background-color:rgba(250, 218, 36, 1);color:#000;border:2px solid rgba(250, 218, 36, 1);outline :1px solid rgba(76, 76, 76, 1);}
.nav-item a:hover{background-color:#fff;color:#0056d2;border-color:#ffffff;outline :1px solid #0056d2;}
.nav-item-ye a:hover{background-color:#fff;color:rgb(226, 192, 0);border-color:#ffffff;outline :1px solid rgba(250, 218, 36, 1);}

@media screen and (max-width:950px){
  .nav-item, .nav-item-ye{width:27%;}
}
@media screen and (max-width:700px){
	.nav-item, .nav-item-ye{width:40%;}
}
@media screen and (max-width:500px){
	.nav-item, .nav-item-ye{width:43%;}
	.nav-item a,.nav-item-ye a{font-size:13px;}
}
@media screen and (max-width:430px){
	.nav-item, .nav-item-ye{width:45%;}
}

/* セクションALL */
.section-all{width:100%;margin:0 auto;overflow:hidden;}
/* 背景図形1 */
.section-back1{width:1800px;height:1800px;position:absolute;top:0;left:50%;transform:rotateZ(45deg) translate(-57%,52%);z-index:-1;background-attachment:fixed;}
.top-back-all1,.top-back-all2{display:flex;width:100%;height:50%;margin:2%;}
.back1,.back4,.back2,.back3{margin:1%;}
.back1,.back4{width:50%;height:100%;background:rgba(227, 227, 227, 1);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}
.back2,.back3{width:50%;height:100%;background:rgb(9 108 230);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}
/* 背景図形2 */
.section-back2{width:1800px;height:1800px;position:absolute;top:1900px;left:50%;transform:rotateZ(45deg) translate(-16%,23%);z-index:-1;background-attachment:fixed;}
.top-back-all11,.top-back-all22{display:flex;width:100%;height:50%;margin:2%;}
.back11,.back44,.back22,.back33{margin:1%;}
.back22,.back33{width:50%;height:100%;background:rgba(227, 227, 227, 1);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}
.back11,.back44{width:50%;height:100%;background:rgb(9 108 230);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}
/* 背景図形3 */
.section-back3{width:1800px;height:1800px;position:absolute;top:4300px;left:50%;transform:rotateZ(45deg) translate(-57%,52%);z-index:-1;background-attachment:fixed;}
.top-back-all111,.top-back-all222{display:flex;width:100%;height:50%;margin:2%;}
.back111,.back444,.back222,.back333{margin:1%;}
.back222,.back333{width:50%;height:100%;background:rgba(227, 227, 227, 1);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}
.back111,.back444{width:50%;height:100%;background:rgb(9 108 230);border-radius:10rem;box-shadow: inset 5px 5px 10px rgba(0,0,0,.5);}

@media screen and (max-width:950px){
  .section-back1,.section-back2,.section-back3{width:1500px;height:1500px;}
}

/* -------------- allタイトル集 ---------------------------- */
.top-about h3{font-size:120px;color:rgba(0, 89, 198, 1);margin-left:-3%;position:relative;z-index:9;}
.top-topics h3{font-size:120px;color:#fff;margin-right:12%;text-align:right;line-height:95%;}
.top-work h3{font-size:120px;color:#0056d2;line-height:95%;}
.top-construction-all h6{position:absolute;top:-40%;left:-7%;font-size:120px;writing-mode:sideways-lr;color:rgba(199, 199, 199, 1);z-index:-1;}
.top-construction-all h5{position:absolute;top:-10%;right:-2%;font-size:120px;color:rgba(26, 113, 213, 0.1);z-index:-1;}
.top-flow-all h5,.top-flow-all h6{position:absolute;font-size:130px;opacity:.2;z-index:1;}
.top-flow-all h5{top:15%;left:-12%;transform:rotateZ(-90deg);}
.top-flow-all h6{bottom:15%;right:-12%;transform:rotateZ(90deg);}
.top-estimate-all h6{position:absolute;top:-10%;right:-7%;font-size:120px;writing-mode:vertical-lr;color:#fff;}
.top-estimate-all h5{position:absolute;font-size:130px;color:rgba(0, 0, 0, 0.05);z-index:1;top:0;left:-5%;}
.top-automatic-all h5{position:absolute;top:-10%;right:-2%;font-size:120px;color:rgba(26, 113, 213, 0.1);z-index:9;}
.top-instagram-all h5{position:absolute;bottom:-5%;right:-5%;font-size:130px;color:rgba(86, 86, 86, 0.2);z-index:1;}
.top-review-all h5{position:absolute;top:0;left:-3%;font-size:130px;color:rgba(86, 86, 86, 0.2);z-index:1;}
.top-contact-all h5{position:absolute;top:0;left:-3%;font-size:120px;color:rgba(39, 39, 39, 1);z-index:1;writing-mode:sideways-lr;}

@media screen and (max-width:1200px){
  .top-about-miya1,.top-about h3{font-size:100px;}
  .top-about-miya1{right:-130px;}
  .top-topics h3{font-size:100px;}
  .top-work h3{font-size:100px;}
  .top-construction-all h6,.top-construction-all h5{font-size:100px;}
  .top-flow-all h5,.top-flow-all h6{font-size:110px;}
  .top-estimate-all h6{font-size:100px;}
  .top-estimate-all h5{font-size:110px;}
  .top-automatic-all h5{font-size:100px;}
  .top-instagram-all h5{font-size:110px;}
  .top-review-all h5{font-size:110px;}
  .top-contact-all h5{font-size:100px;top:5%;}
}
@media screen and (max-width:1150px){
  .top-about-miya1,.top-about h3{font-size:90px;}
  .top-topics h3{font-size:90px;}
  .top-work h3{font-size:90px;}
  .top-construction-all h6,.top-construction-all h5{font-size:90px;}
  .top-flow-all h5,.top-flow-all h6{font-size:100px;}
  .top-flow-all h5{left:-11%;}
  .top-flow-all h6{right:-11%;}
  .top-estimate-all h6{font-size:90px;}
  .top-estimate-all h5{font-size:100px;}
  .top-automatic-all h5{font-size:90px;}
  .top-instagram-all h5{font-size:100px;}
  .top-review-all h5{font-size:100px;}
  .top-contact-all h5{font-size:90px;}
}
@media screen and (max-width:1100px){
  .top-contact-all h5{left:-8%;}
}
@media screen and (max-width:1050px){
  .top-topics h3{margin-right:9%;}
}
@media screen and (max-width:1000px){
  .top-topics h3{margin-right:7%;}
}
@media screen and (max-width:950px){
  .top-about-miya1,.top-about h3{font-size:70px;}
  .top-topics h3,.top-work h3{font-size:70px;}
  .top-construction-all h6,.top-construction-all h5{font-size:70px;}
  .top-flow-all h5,.top-flow-all h6{font-size:80px;}
  .top-flow-all h5{left:-11%;}
  .top-flow-all h6{right:-11%;}
  .top-estimate-all h6{font-size:70px;}
  .top-estimate-all h5{font-size:80px;}
  .top-automatic-all h5{font-size:70px;}
  .top-instagram-all h5{font-size:80px;}
  .top-review-all h5{font-size:80px;}
  .top-contact-all h5{font-size:70px;}
}
@media screen and (max-width:700px){
  .top-about-miya1,.top-about h3{font-size:60px;}
  .top-topics h3,.top-work h3{font-size:60px;}
  .top-construction-all h6,.top-construction-all h5{font-size:60px;}
  .top-construction-all h5 {display:none;}
  .top-flow-all h5,.top-flow-all h6{font-size:80px;}
  .top-flow-all h5{left:-11%;}
  .top-flow-all h6{right:-11%;}
  .top-estimate-all h6{font-size:60px;}
  .top-estimate-all h5{font-size:70px;}
  .top-automatic-all h5{font-size:60px;}
  .top-instagram-all h5{font-size:70px;}
  .top-review-all h5{font-size:70px;}
  .top-contact-all h5{font-size:60px;}
}
@media screen and (max-width:500px){
	.top-about-miya1, .top-about h3,.top-review-all h5{opacity:.2;}
  .top-estimate-all h5{font-size:50px;}
	.top-topics h3, .top-work h3{font-size:40px;}
}


/*  */

/* about */
.top-about{width:80%;margin:5% auto 0;}
.top-about-miya1{writing-mode:vertical-rl;position:absolute;top:-2%;right:-150px;font-size:120px;color:rgba(227, 227, 227, 1);z-index:1;}
.top-about p{font-weight:bold;margin:3% auto 1%;position:relative;z-index:9;line-height:2.0em;}
.top-about-a{position:absolute;bottom:25%;right:5%;z-index:9;}
/* VIEW MORE ALL */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background-color:#0056d2;color:#fff;border:none;padding:12px 24px;border-radius:9999px;font-weight:bold;font-size:16px;cursor:pointer;transition:all 0.2s ease;border:2px solid #0056d2;}
.btn:hover{background-color:#fff;color:#0056d2;border:2px solid #0056d2;}
.btn .icon{display:flex;align-items:center;justify-content:center;background-color:#000;color:#fff;width:24px;height:24px;border-radius:50%;font-size:16px;font-weight:bold;transition:all 0.2s ease;padding-bottom:2%;}
.btn:hover .icon{background-color:#0056d2;color:#fff;}

@media screen and (max-width:950px){
	.top-about-a{bottom:20%;}
	.btn{font-size:15px;padding:9px 23px;}
}
@media screen and (max-width:700px){
	.top-about{width:90%;}
	.btn{font-size:15px;padding: 6px 20px;}
}
@media screen and (max-width:500px){
	.btn{font-size:14px;}
}
@media screen and (max-width:700px){
	.top-about{margin:7% auto;}
	.top-about h2{font-size:20px;}
	.top-about-a{bottom:10%;right:0;}
}
@media screen and (max-width:500px){
	.top-about{margin:10% auto;}
	.top-about h2{font-size:18px;}
}

/* TOPICS */
.top-topics{width:80%;margin:0 auto 3%;}
.top-topics-title{margin:3% auto;}
.top-topics h2{text-align:right;margin:0 26% 2% 0%;color:#fff;letter-spacing:.2rem;}
.top-topics-a{text-align:right;margin-top:5%;}
.top-topics-news a{display:flex;color:#000;background:#fff;padding:15px 20px;font-weight:bold;margin:1.5% auto;width:90%;box-shadow:2px 4px 4px rgb(107, 107, 107);}
.top-topics-news a span{padding-right:50px;}
.top-topics-news a:hover{transition:all .1s;box-shadow:none;color:rgba(0, 0, 0, 0.645);}
.news-contents{display:flex;width:100%;}
.news-title{margin-left:10%;}

@media screen and (max-width:700px){
	.top-topics{width:90%;margin:0 auto 5%;}
	.top-topics h2{font-size:20px;margin:0 15% 2% 0%;}
}
@media screen and (max-width:600px){
	.top-topics{width:100%;}
	.top-topics h2{margin:0 17% 2% 0%;}
	.news-title{margin-left:5%;}
}
@media screen and (max-width:500px){
	.news-contents{display:block;}
	.top-topics h2{font-size:18px;margin:0 9% 2% 0%;}
	.news-title{margin:2% auto 0;}
	.top-topics-news a{padding:10px;margin:3% auto;}
	.top-topics-a{margin-top:10%;margin-right:5%;}
}


/* WORK */
.top-work{width:80%;margin:0 auto;}
.top-work-title{display:flex;align-items:end;}
.top-work h2{color:rgba(215, 215, 215, 1);margin-left:3%;letter-spacing:.2rem;}
.top-work-contens{margin:7% auto 10%;}
.work-contents{width:95%;margin:0 auto;padding:2rem 1rem;}
.work-contents:hover{opacity:.8;}
.work-contents img{width:100%;object-fit:cover;}


.work-contents h4{font-size:12px;color:rgb(36 36 36);margin-top:3px;font-weight:bold;}
.work-contents p{font-size:20px;margin:2% auto;color:#000;}
@media screen and (max-width:1200px){
	.work-contents p{padding:5px 0 0;}
}
@media screen and (max-width:600px){
	.work-contents p{font-size:13px;}
}
/*====================================================================
slick
====================================================================*/
.sliderArea{max-width:100%;margin:0 auto;padding:0 25px;}
.sliderArea.w300{max-width:300px;}
.slick-slide{margin:0 5px;}
.slick-slide img{width:100%;height:auto;}
.slick-prev,.slick-next{z-index:1;}
.slick-prev:before,.slick-next:before{color:#000;}
.slick-slide{transition:all ease-in-out .3s;opacity:.2;}
.slick-active{opacity:1;}
.slick-current{opacity:1;}
.thumb{margin:20px 0 0;}
.thumb .slick-slide{cursor:pointer;}
.thumb .slick-slide:hover{opacity:.7;}

/*====================================================================
補足
====================================================================*/
.slick-prev:before, .slick-next:before{display:none;}
.slider-contents{width:100px;}
.slider-contents a:hover{transition:all .1s;opacity:.7;}
.slider-contents h4{font-size:13px;color:rgba(105, 105, 105, 1);margin:6% auto 3%;}
.slider-contents p{color:#000;width:90%;}
.top-work-a{text-align:center;}
.res-slider{display:none;}

@media screen and (max-width:700px){
	.top-work h2{font-size:20px;}
	.top-work{width:90%;}
	.sliderArea{padding:0 10px;}
}
@media screen and (max-width:600px){
	html body div .slider-contents{width:200px;}
}
@media screen and (max-width:500px){
	.top-work h2{font-size:18px;}
	.sliderArea{display:none;}
	.res-slider{display:flex;flex-wrap:wrap;justify-content:space-around;}
	.works-card{width:45%;margin:3% 0;}
	.works-card img{width:100%;}
	.works-card h4{font-size: 12px; color: rgba(105, 105, 105, 1);}
	.works-card p{color:#000;}
}

/* 対応工事内容 */
.top-construction-all{width:90%;margin:5% auto;background:#fff;border-radius:2rem;max-width:1300px;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);}
.const-container{width:85%;margin:40px auto;text-align:center;z-index:8;padding-bottom:20px;}
.const-container h1{font-weight:bold;margin:0 0 40px -25px;display:inline-block;padding-top:40px;}
.const-flex{display:flex;justify-content:space-between;flex-wrap:wrap;}
.const-flex-block{width:30%;margin:0 1.6%;}
.const-flex-block img{width:70%;}
.const-flex-block h3{text-align:center;font-size:18px;}
.const-flex-block h3 a{color:#000;}
.const-flex-block h3 a:hover{transition:all .4s;color:rgba(0, 89, 198, 1);}
.top-construction-a{text-align:center;margin-top:5%;}

@media screen and (max-width:950px){
	.top-construction-all{margin:8% auto;}
}
@media screen and (max-width:800px){
	.const-container{width:95%;}
	.const-flex-block img{width:90%;}
}
@media screen and (max-width:700px){
	.const-container h1{font-size:20px;}
	.const-flex-block h3{font-size:15px;}
}
@media screen and (max-width:600px){
	.const-flex-block{width:40%;margin:0 auto;}
	.top-construction-a{margin:10% auto 5%;}
}
@media screen and (max-width:500px){
	.top-work-title{justify-content:space-between;}
	.const-container h1{font-size:18px;margin-bottom:20px;}
	.const-flex-block{width:48%;margin:3% auto;}
}


/* 解体までの流れ */
.top-flow-all{width:90%;margin:0 auto;background-color:rgba(0, 89, 198, 1);color:#fff;border-radius:2rem;max-width:1300px;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);}
.flow-container{width:85%;margin:40px auto;padding:20px;text-align:center;z-index:8;}
.flow-container h1{text-align:left;font-weight:bold;margin-bottom:40px;margin-left:-25px;}
/* Flow Grid Layout */
.flow-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:30px;margin-bottom:40px;position:relative;}
/* Connectors (Simulated with margins and pseudo-elements for a simple design) */
.flow-grid .flow-step:not(:last-child)::after{position:absolute;content:'';right:-7%;top:40%;width:0px;height:0px;border-style:solid;border-color:transparent transparent #ffffff transparent;border-width:17px 0px 30px 30px;transform:rotate(-45deg);}
.flow-grid.second-row{direction:ltr;}
/* Flow Step Card */
.flow-step{background-color:#fff;color:#333;padding:20px 15px;border-radius:8px;box-shadow:0 4px 15px rgba(0, 0, 0, 0.1);position:relative;text-align:left;min-height:200px;display:flex;flex-direction:column;}
.step-number{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background-color:rgba(98, 168, 255, 1);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:17px;font-weight:bold;z-index:5;}
.step-title{display:flex;justify-content:center;align-items:center;height:80px;font-size:20px;text-align:center;font-weight:bold;border-bottom:2px solid #eee;}
.step-description{font-size:14px;margin:0;padding:20px 0;font-weight:bold;}
/* Contact Button (Step 1 specific) */
.btn-contact{font-size:14px;font-weight:bold;position:absolute;bottom:0;left:0;width:100%;display:block;background-color:#FFC000;color:#333;padding:8px 15px;text-align:center;border-radius:0 0 .8rem .8rem;}
.btn-contact:hover{transition:all.1s;background-color:#e0ac00;}
/* Timeline Note (Min. Days) */
.timeline-note{font-weight:bold;background-color:rgba(0, 53, 119, 1);padding:10px 0;margin:20px 0;border-radius:5px;}
.timeline-note span{font-size:11px;}
.top-note{margin-bottom:60px;}
/* Footer Note (The very bottom explanatory text) */
.flow-note{text-align:left;margin-top:40px;padding-top:10px;border-top:1px solid rgba(255, 255, 255, 0.5);font-size:12px;}

@media screen and (max-width:1200px){
  .flow-container{width:90%;}
}
@media screen and (max-width:1150px){
  .flow-container{width:97%;}
}
@media screen and (max-width:950px){
	.flow-step{padding:10px;}
	.step-title{font-size:16px;}
	.step-description{font-size:12px;}
	.flow-grid .flow-step:not(:last-child)::after{right:-9%;}
}
@media screen and (max-width:800px){
  .flow-grid{grid-template-columns:1fr;gap:40px;}
  .flow-step{min-height:auto;}
  .flow-step:not(:last-child)::after{content:'▼';position:absolute;bottom:-30px;top:auto;left:50%;right:auto;transform:translateX(-50%);width:auto;height:auto;background-color:transparent;color:#fff;z-index:10;display:block;}
  .flow-step:nth-child(4)::after{display:none;}
	.flow-grid .flow-step:not(:last-child)::after{display:none;}
}
@media screen and (max-width:700px){
	.flow-container h1{font-size:20px;margin-left:0;}
	.top-flow-all h5{left:-90px;}
	.top-flow-all h6{right:-90px;}
	.step-description{display:flex;justify-content:center;align-items:center;height:120px;width:90%;margin:0 auto;font-size:15px;}
	.step-description1{padding-top:0;}
}
@media screen and (max-width:500px){
	.step-title{height:60px;}
	.flow-container h1{font-size:18px;}
	.step-description{font-size:13px;}
}

/* 解体見積もりシミュレーター */
.top-estimate-all{width:90%;margin:0% auto;padding:6% 0 0 0;max-width:1300px;}
.estimate-container{width:90%;margin:0 auto;z-index:8;}
.estimate-container p{font-weight:bold;margin-top:15px;}
.estimate-main{width:95%;margin:0 auto 7%;text-align:center;}
.estimate-main img{width:90%;margin:5% auto 2%;}
.estimate-main p{text-align:left;width:90%;margin:0 auto;}


@media screen and (max-width:700px){
	.estimate-main,.estimate-main img,.estimate-main p{width:100%;}
	.estimate-main p{margin:3% auto;}
	.estimate-container h1{font-size:20px;}
}
@media screen and (max-width:500px){
	.estimate-container h1{font-size:18px;}
}


/* 平米数・坪数を自動計算！ */
.top-automatic-all{width:90%;margin:5% auto;max-width:1300px;}
.top-automatic-all h1{text-align:left;font-weight:bold;margin-left:3%;}
.auto-container{width:100%;margin:20px auto 0;padding:20px;z-index:8;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);border-radius:1rem;background:#fff;}
.auto-container h4{position:absolute; top:0;right:0;width:100%;height:100%;clip-path:polygon(60% 0, 100% 0, 100% 100%, 50% 100%);background:rgba(0, 89, 198, 1);z-index:1;border-radius:1rem;}
.auto-container p{position:relative;z-index:9;text-align:left;}

@media screen and (max-width:700px){
	.top-automatic-all h1{font-size:20px;}
}
@media screen and (max-width:500px){
	.top-automatic-all h1{font-size:18px;}
}



/* Instagram */
.top-instagram-all{width:90%;margin:0 auto;max-width:1300px;}
.top-instagram-all h1{text-align:center;font-weight:bold;margin-bottom:40px;font-size:35px;}
.inst-container{display:flex;justify-content:left;flex-wrap:wrap;}
.inst-main{width:20%;margin:2% 2%;border-radius:0 1rem 1rem 0;box-shadow:0 4px 4px rgba(0, 0, 0, 0.25);position:relative;z-index:9;background:#fff;}
.inst-main a{display:flex;}
.inst-main:hover{transform:translateY(4px);box-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.inst-main h3{writing-mode:vertical-lr;background:linear-gradient(60deg,rgba(37, 171, 255, 1) 0%,rgba(5, 55, 116, 1) 90%);color:#fff;font-size:16px;padding:1rem .5rem;clip-path:polygon(0% 0, 100% 0%, 100% 80%, 0% 95%);width:15%;letter-spacing:.1rem;}
.inst-contents{width:95%;margin:0 auto;padding:2rem 1rem;}
.inst-contents img{width:100%;object-fit:cover;}
.inst-contents h4{font-size:12px;color:rgba(105, 105, 105, 1);}
.inst-contents p{font-size:14px;margin:2% auto;color:#000;}
.top-instagram-a{text-align:center;margin-top:3%;position:relative;z-index:9;}


@media screen and (max-width:1200px){
	.inst-main{width:28%;}
	.inst-contents{padding:0 0 1rem 0;}
	.inst-contents p{padding:5px 0 0;}
}
@media screen and (max-width:1100px){
	.inst-contents img{height:140px;}
}
@media screen and (max-width:950px){
	.top-instagram-all h1{font-size:28px;}
	.inst-contents img{height:120px;}
}
@media screen and (max-width:700px){
	.top-instagram-all{margin:8% auto 5%;}
	.top-instagram-all h1{font-size:20px;margin-bottom:20px;}
	.top-instagram-all h5{bottom:2%;right:0%;font-size:80px;}
	.inst-main h3{font-size:13px;width:16%;}
	.inst-main{width:30%;margin:2% 1%;}
}
@media screen and (max-width:600px){
	.top-instagram-all{width:95%;}
	.inst-contents img{height:90px;}
	.inst-contents p{font-size:13px;}
}
@media screen and (max-width:500px){
	.top-instagram-all h5{bottom:0%;font-size:60px;}
    .top-instagram-all h1{font-size:18px;}
	.inst-main{width:47%;margin:2% auto;}
	.top-instagram-a{margin-top:10%;}
}

/* お客様の実際の声 */
.top-review-all{width:90%;margin:0 auto;padding:6% 0 0 0;max-width:1300px;}
.top-review-title{font-weight:bold;color:#fff;text-shadow:1px 1px 2px #000;margin-left:3%;}
.top-review-title h1{text-align:left;font-size:35px;}
.top-review-title h1,.top-review-title p{position:relative;z-index:9;}
.review-container{display:flex;justify-content:left;flex-wrap:wrap;margin:3% auto;}
.review-contents{width:20%;box-shadow:0 4px 4px rgba(0, 0, 0, 0.25);border-radius:1rem;margin:0 2.5%;padding:2rem;background:#fff;}
.review-img{text-align:center;}
.review-img img{width:50%;}
.review-img h6{color:rgba(132, 132, 132, 1);font-size:12px;margin:10px 0 25px 0;}
.review-contents p{margin:2% auto;color:rgba(55, 55, 55, 1);font-weight:bold;font-size:15px;}

@media (max-width:1100px){
  .review-contents{width:23%;margin:0 1%;}
}
@media (max-width:950px){
	.top-review-all{margin:7% auto 0;}
	.top-review-title h1{font-size:30px;}
  .review-contents{width:40%;margin:2% 5%;}
}
@media (max-width:700px){
	.top-review-all{margin:7% auto 0;}
	.top-review-title h1{font-size:25px;}
	.review-container{margin:6% auto;}
}
@media (max-width:500px){
	.top-review-all{width:95%;}
	.review-contents{width:46%;margin:2% auto;padding:1rem;}
	.review-contents p{font-size:13px;}
	.top-review-title h1{font-size:20px;}
}


/* お問い合わせ */
.top-contact-all{width:90%;margin:0 auto;padding:6% 0 10%;max-width:1300px;}
/* 背景CONTACT */
.contact-container{width:90%;margin:3% 0 3% 10%;padding:3%;background-image:url(./img/top.jpg);border-radius:1rem;}
/* 背景カラー */
.contact-container h6{background:rgba(250, 218, 36, 0.9);position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:1rem;}
.top-contact-title{text-align:center;position:relative;z-index:9;}
.top-contact-title h1{display:inline-block;background:rgba(55, 55, 55, 1);color:#fff;padding:.5rem 5rem;border-radius:2rem;box-shadow:0 2px 2px rgba(0, 0, 0, 0.25);}
.top-contact-title p{font-weight:bold;margin:3% auto;}
.top-contact-main{display:flex;}
.top-cont-contents{z-index:9;width:30%;text-align:center;margin:0 3.3%;padding-top:3%;}
/* コンテンツ間縦線 */
.top-cont-contents::before{content:"";position:absolute;top:0;right:-15%;width:2px;height:100%;background:#fff;}
.top-cont-contents:last-child::before{display:none;}
.top-cont-contents img{width:40%;padding:1rem;background:rgba(67, 67, 67, 0.9);border-radius:50%;}
.top-cont-contents p{font-size:13px;font-weight:bold;margin:14% auto 5%;}
/* a要素関係 */
.top-cont-contents a{font-size:16px;display:inline-block;border-radius:5px;box-shadow:0 4px 4px rgba(0, 0, 0, 0.25);}
.t-cont-a1,.t-cont-a3{background:#fff;color:#fff;position:relative;padding:.8rem 2rem;color:#000;font-weight:bold;border:2px solid #fff;}
.t-cont-a1 span,.t-cont-a3 span{color:rgba(255, 136, 0, 1);}
.t-cont-a2{background:#fff;color:#fff;position:relative;padding:.8rem 2rem;color:#000;font-weight:bold;}
.t-cont-a2 span{font-size:20px;}
/* a要素-ホバー関係 */
.t-cont-a1:hover,.t-cont-a1:hover span,.t-cont-a3:hover,.t-cont-a3:hover span{transition:all .1s;background:rgba(255, 136, 0, 1);color:#fff;}
.t-cont-a2:hover{transition:all .1s;background:rgba(255, 136, 0, 1);color:#fff;box-shadow:0 1px 1px rgba(0, 0, 0, 0.25);transform:translateY(2px);}
/* a要素-allホバー */
.t-cont-a1:hover,.t-cont-a3:hover{box-shadow:0 1px 1px rgba(0, 0, 0, 0.25);border:2px solid rgba(255, 136, 0, 1);transform:translateY(2px);}

@media (max-width:1200px){
  .t-cont-a2 span{font-size:19px;}
  .t-cont-a1, .t-cont-a3{padding:.8rem 1rem;}
}
@media (max-width:1100px){
  .contact-container{width:100%;margin:3% auto;}
  .top-cont-contents{width:32%;margin:0 auto;}
  .top-cont-contents::before{right:-3%;}
}
@media (max-width:800px){
	.top-contact-title h1{font-size:20px;}
	.contact-container{padding:3% 2%;}
	.top-cont-contents p{font-size:12px;}
	.top-cont-contents a{font-size:13px;}
	.t-cont-a2 span{font-size:15px;}
}
@media (max-width:700px){
	.top-contact-title h1{font-size:18px;}
	.top-contact-main{flex-wrap:wrap;justify-content:space-between;width:90%;margin:0 auto;}
	.top-cont-contents{width:45%;margin:3% 0;}
	.top-cont-contents::before{display:none;}
}
@media (max-width:600px){
	.top-contact-main{width:95%;}
	.top-cont-contents{width:48%;}
}
@media (max-width:500px){
	.top-contact-title{margin:10% auto 5%;}
	.top-cont-contents{width:100%;}
	.top-cont-contents p{margin:4% auto 5%;}
	.top-cont-contents a{width:80%;font-size:14px;}
}

/* フッター */
footer{width:100%;margin:0% auto;overflow:hidden;}
.footer-all{display:flex;justify-content:center;width:90%;margin:5% auto 0;max-width:1300px;}
.foo-left{width:40%;}
.foo-left img{width:70%;}
.foo-left-tel a{display:inline-flex;align-items:center;justify-content:space-between;color:#fff;background:rgba(0, 68, 151, 1);padding:.8rem 3rem;font-size:25px;font-weight:bold;letter-spacing:.1rem;border:2px solid rgba(0, 68, 151, 1);width:auto;border-radius:.5rem;}
.foo-left-tel a span{writing-mode:sideways-lr;font-size:13px;font-weight:bold;}
.foo-left-tel a:hover{transition:all .1s;color:rgba(0, 68, 151, 1);background:#fff;}
.foo-left-access{display:flex;margin:3% auto;}
.foo-left-access a{width:8%;object-fit:contain;margin-left:5%;display:inline-block;}
.foo-left-access a img{width:100%;}
.foo-left-access a img:hover{transition:al .1s;opacity:.7;}
.foo-center,.foo-right{width:30%;}
.foo-center h2,.foo-right h2{color:rgba(0, 117, 212, 1);position:relative;}
.foo-center h2::before,.foo-right h2::before{content:"";position:absolute;width:80%;height:2px;bottom:-5px;left:0;background:rgb(143, 143, 143);}
.foo-center ul,.foo-right ul{margin-top:4%;}
.foo-center li a,.foo-right li a{margin-top:1%;display:block;color:rgba(69, 69, 69, 1);width:80%;}

.footer-bottom{width:100%;margin:3% auto 0;background:rgba(0, 89, 198, 1);padding:3% 0 1%;}
.foo-bo-top{display:flex;justify-content:center;}
.foo-bo-top h4{margin:0 2%;font-size:15px;}
.foo-bo-top h4 a{color:#fff;}
.footer-bottom p{text-align:center;margin:2% auto 0;color:#fff;}

@media screen and (max-width:1000px){
  .footer-all{width:95%;margin:5% auto 0;}
}
@media screen and (max-width:950px){
	.foo-left-tel a{font-size:20px;padding:.5rem 2rem;}
}
@media screen and (max-width:800px){
	.foo-left-tel a{font-size:18px;padding:.3rem 1.5rem;}
	.foo-left-access p{font-size:12px;}
	.foo-center, .foo-right {width:35%;}
	.foo-center h2, .foo-right h2{font-size:20px;}
	.foo-center li a, .foo-right li a{width:90%;}
}
@media screen and (max-width:700px){
	.footer-all{flex-wrap:wrap;}
	.foo-left{width:90%;}
	.foo-left-access{align-items:flex-end;}
	.foo-left-access a{width:5%;}
	.foo-center, .foo-right{width:45%;}
}
@media screen and (max-width:500px){
	.foo-left{width:95%;}
	.foo-left-access a{width:9%;}
	.foo-center, .foo-right{width:47%;}	
	.foo-center h2::before, .foo-right h2::before{width:90%;}
	.foo-center li a, .foo-right li a{width:95%;}
	.foo-bo-top h4{font-size:13px;}
}