/* Theme Name: Works Ver 3.0 Description: オリジナルテーマ　目次・ポイント機能 Author: Works */ /* Unchanged */ @charset "UTF-8"; * html body {background:url(null) fixed;} * { font-style:normal; font-weight:lighter; margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } body {margin-right:auto;margin-left:auto;font-family:var(--font-s);} /*@font-face{font-family:'Harenosora';src:url(font//Harenosora.otf) format('truetype');}*/ #back-ground {clear:both;float:left;width:100%;} html{font-size:6.25%;scroll-behavior: smooth;} body {font-size:18rem;/*font-weight:lighter;*/font-weight:250;letter-spacing:0.05em; line-height:1.75;color:var(--font-color);} a {color:var(--font-color); position: relative;} a img {border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;} a:link,.article_area .table_layout_game .match-index tr td a{text-decoration:none;} a:hover {text-decoration:none;/*position:relative;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;*/} a:visited {text-decoration:none;} img {vertical-align:bottom;max-width:100%;height:auto;} ul {list-style:none;} .sig-link-list li a::after, .navi-box ul a::after, .news-list-tit a::after {position: absolute;bottom: 0;left: 0;content: '';width: 100%;height: 2px;background:var(--main-c);transform: scale(0, 1);transform-origin: left top;transition: transform .3s;} .sig-link-list li a:hover::after, .navi-box ul a:hover::after, .news-list-tit a:hover::after {transform: scale(1, 1);} a:hover img{opacity:0.5;filter:alpha(opacity=50);background:none;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;} .area:nth-child(even) {background-color:var(--bc-color-odd);} .triangle li a:link{text-decoration:none;} .triangle a:link{text-decoration:underline;} .triangle a:hover{opacity:0.5;filter:alpha(opacity=50);} li a::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;background:var(--main-c);transform: scale(0, 1);transform-origin: left top;transition: transform .3s;} li a:hover::after {transform: scale(1, 1);} /*--------フォントサイズ---*/ /*----------------------------------セクション　基本-------------------------------------- ------------------------------------------------------------------------------------------------- */ .sect-set{} .triangle{padding:0;clear:both;float:left;width:100%;border-bottom:solid 1px var(--border);} .triangle .skewed {clear:both;float:left;width:100%;padding:15% 0;overflow-x: hidden;position:relative;background: var(--bc-color-odd);} .triangle .skewed:nth-child(1) {padding:7% 0;} .triangle .skewed.asb-top{padding:0 0;} .triangle .pan-min{padding:0 0 7%;} .triangle:nth-child(odd) .skewed {background: var(--bc-color-odd-even);}　 /* .section1の背景 */ /*.triangle:nth-child(odd) .skewed .content-in-co{background-color:#FFF;padding:8% 0;clear:both;float:left;width:100%;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;}　 .section1の背景 */ .triangle:nth-child(odd){} .triangle:nth-child(even){} .triangle:first-child{} .main-cont-top{clear:both;float:left;width:100%;padding:10% 0;background-size: auto auto; background-color: rgba(255, 255, 255, 1); background-image: repeating-linear-gradient(135deg, transparent, transparent 50px, rgba(255, 240, 0, 0.61) 50px, rgba(255, 240, 0, 0.61) 80px );} .alignleft{float:left;padding:0 2% 0 0;} .alignright{float:right;padding:0 0 0 2%;} /*----------------------------------コンテンツ　基本-------------------------------------- ------------------------------------------------------------------------------------------------- */ .box-in ,.content-in ,#metaslider_12 ,.content-ma-in,.report-sec{max-width:1240px;/*overflow-x: hidden;*/} .content-in,.report-sec {margin:0 auto;width:100%;} .content-in-bc{padding:5%;clear:both;float:left;width:100%;background-color:#FFF;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;} .box85{width:85%;float:left;} .box80{width:80%;float:left;} .box70{width:70%;float:left;} .box60{width:60%;float:left;} .box55{width:55%;float:left;} .box50{width:50%;float:left;} .box45{width:45%;float:left;} .box40{width:40%;float:left;} .box35{width:35%;float:left;} .box33{width:33.33%;float:left;} .box30{width:30%;float:left;} .box25{width:25%;float:left;} .box20{width:20%;float:left;} .box15{width:15%;float:left;} /*----------------------header--ヘッダー------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .to-content{z-index:2;position:relative;} header {padding:0;clear:both;float:left;width:100%;} .gl-navi{clear:both;float:left;width:100%;background:var(--navi);color:var(--navi-font);position:relative;z-index:9999 !important;/*border-bottom: 1px solid #FFF;*/} .gl-navi-in{margin:0 auto;clear:both;padding:0;} .head-cont{margin:0 auto;clear:both;padding:0;max-width:1200px;display:flex;flex-wrap:nowrap;align-items: center;justify-content:space-between;} .navi-logo{width:30%;padding:2% 1%;text-align: center;} .navi-logo img{width:80%;} .navig-cont {margin:0;padding:0 1% 1%;width:70%;max-width:700px;background:var(--main-c);color: #FFF;border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;} .global-conta{clear:both;float:left;width:100%;font-size: 14rem;letter-spacing:-0.001em;} .gc-tit{clear:both;float:left;width:100%;font-size: 16rem;text-align: center;color: #FFF;} .gc-tit span{font-size:24rem;font-weight: bold;} .gc-box{clear:both;float:left;width:100%;display:flex;flex-wrap:nowrap;align-items: center;justify-content:space-between;margin-bottom: 5px;background:#FFF;} .gc-tel{width:40%;} .gc-tel p{clear:both;float:left;width:100%;padding:2% 1%;border-bottom: solid 3px var(--main-c);} .tel-etc{clear:both;float:left;width:100%;padding:1%; mcolor:var(--main-c);font-size: 15rem;display:flex;flex-wrap:nowrap;align-items: center;} .tel-etc span{padding:0 1%;color:var(--main-c);letter-spacing:-0.01em;} .tel-etc .tel-etc-tit{background:var(--main-c);color: #FFF;} .gc-conta{width:60%;background: #FFF;padding:1%;border-left: solid 3px var(--main-c);} .gc-conta .gcc-box{clear:both;float:left;width:100%;display:flex;align-items:center;} .gcc-box div{} .gc-form{width:40%;padding:1%;} .gcc-line{width:60%;background:#3CB056;margin: 0; padding:2%;} .navig-top {margin:0 auto;clear:both;padding:0;max-width:1380px;} .navi-box{} .navig-top ul{margin:0;padding:0;float:right;clear:both;width:100%;display:flex;justify-content:space-between;flex-wrap:nowrap;} .navig-top ul li{width:10%;opacity:0.8;filter:alpha(opacity=80);border-left: 1px solid #FFF;display:flex;align-items:center;} .navig-top ul li:nth-child(2) a{letter-spacing:-0.05em; } .navig-top ul li:hover{opacity:1;filter:alpha(opacity=100);} .navig-top ul li a{clear:both;float:left;width:100%;color:var(--navi-font);padding:40px 0 10px;font-size:16rem;letter-spacing:0.05em;display:flex;flex-direction: column;align-items:center;flex-wrap:nowrap;font-weight: bold;} .navig-top ul li span{width:100%;} .navig-top ul li a span {font-size:12rem;color:var(--navi-subfont);clear:both;float:left;width:100%;} .navig-top ul li .sub-menu li{width:100%;border-left:none;border-right:none;margin:0;border-bottom:dashed 1px var(--main-c);} .navig-top ul li .sub-menu li:last-child{border-bottom:none 1px #FFF;} .navig-top ul li .sub-menu li a{padding:10% 3%;} /* 初期状態でサブメニューを非表示にしておく */ .navig-top .sub-menu {display: none;} /* 子を持つ親メニューにマウスオーバーしたとき、サブメニューを表示する */ .navig-top .menu-item-has-children:hover .sub-menu {display: block;} .navig-top .menu {text-align: center;font-size:0;} /* 親メニューをinline-blockにしてセンターに配置 */ .navig-top .menu > .menu-item {display: inline-block;margin: 0;} /* リストの記号を消去 */ .navig-top .menu-item {list-style-type: none;} /* サブメニューをabsoluteにするため、親メニューをrelativeに */ .navig-top .menu-item-has-children {position: relative;} /* 親メニューにマウスオーバーしたときにカーソルを変更 */ .navig-top .menu-item-has-children:hover {cursor: pointer;opacity:1;filter:alpha(opacity=100);} /* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */ .navig-top .menu-item-has-children:hover .sub-menu {display: block;} /* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */ .navig-top .sub-menu {display: none;position: absolute;top: 100%;left: 0;background: white;} /* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */ .navig-top .sub-menu > .menu-item:not(:last-child) {} /* サブニューのリンクタグをmenu-itemの大きさと合わせ、クリックしやすいようにした */ .navig-top .sub-menu > .menu-item a {display: inline-block;width: 100%;height: 100%;margin-bottom:1px;background-color:var(--navi);} /* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */ .navig-top .sub-menu > .menu-item a:hover {background:var(--navi);color:var(--navi-font);} /* .fixed {clear:both;float:left; position: fixed; width: 100%; top: 0; z-index: 1000 !important; } */ /* snsカラー */ .sns__container {display: flex;} .sns__container a {width: 100%;text-align: center;color: #fff;padding:1% 0;font-size:36rem;} .sns__container a:hover {opacity: 0.6;} .sns__twitter {background: #55acee;} .sns__facebook {background: #3b5998;} .sns__pocket {background: #ef3f56;} .sns__line {background: #1dcd00;} .sns__hatena {background: #00a5de;} /*wp-pagenavi 17*/ .wp-pagenavi { clear: both; text-align:center; } .wp-pagenavi a, .wp-pagenavi span { color:var(--main-c); background-color: #FFFFFF; padding: 8px 15px; margin: 0 2px; white-space: nowrap; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; text-align: center; text-decoration: none; border: thin dotted var(--main-c); } .wp-pagenavi a:hover{ color: #fff; background-color:var(--main-c); } .wp-pagenavi span.current{ color: #fff; background-color:var(--main-c); } .top-ptit,.top-ptit a,.care-tit,.top-tith,.pro-cont-tit, a.btn_15,.aclist-tit a,.foot-cont,.foot-navi-cont ul li a{color:var(--main-c);} .g-box{clear:both;float:left;width:100%;} .top-ptit{clear: both;margin:20px auto;text-align: center;font-size: 32rem;background: no-repeat url(svg/parts-03.png) 40% 50%;background-size: contain;} /*----------------------------------ナビ------------------------------------- ----------------------------------------------------------------------------------------------*/ .navi-top,.smart-navi{display: none;} /*----------------------------------スライダー-------------------------------------- ------------------------------------------------------------------------------------------------- */ #maincon-s {clear:both;float:left;width:100%;height:auto;margin:0;padding:0 0 5%; border-bottom: solid 1px var(--border);/*background:var(--main-c);*/} .wideslider {width:100%;text-align:left;position:relative;overflow:hidden;} .wideslider ul, .wideslider ul li {float:left;display:inline;overflow:hidden;} .wideslider ul li img {width:100%;height:auto;display:none;z-index:1;} .wideslider a:hover img{opacity:0.95;filter:alpha(opacity=95);/*-webkit-transition:all 1s ease;-moz-transition:all 1s ease;*/} .wideslider_base {top:0;position:absolute;} .wideslider_wrap {top:0;position:absolute;overflow:hidden;} .slider_prev,.slider_next {top:0;overflow:hidden;position:absolute;z-index:1;cursor:pointer;} .slider_prev { background:#FFF url(svg/parts-34.svg) no-repeat right center;} .slider_next { background:#FFF url(svg/parts-34.svg) no-repeat left center;} .pagination {bottom:10px;left:0;width:100%;height:25px;text-align:center;position:absolute;z-index:50;} .pagination a {width:10px;height:10px;display:inline-block;overflow:hidden;background:#FFF;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;margin:0 5px;box-shadow:1px 1px 2px 2px rgba(0,0,0,0.2);} .pagination a.active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} /* ======================================= ClearFixElements ======================================= */ .wideslider ul:after {content:".";height:0;clear:both;display:block;visibility:hidden;} .wideslider ul {display:inline-block;overflow:hidden;} .pagenavi-st{clear:both;width:100%;margin:70px auto 0;text-align: center;} /*----------------Instagram-追従バナー--------------------------------- ------------------------------------------------------------------------------------------------- */ .info-box{width:60px;position:fixed;top:400px;right: 0;z-index:9999;} .info-box div{background:rgba(0,0,0,0.50);padding:10px 5px;border: solid 5px #FFF;} .lawe i{font-size: 42rem;} .info-box div span{width:100%;clear:both;float:left;font-weight: bold;} .info-box div a{color:var(--sns-color01);font-size:10rem;} .info-box div img{/*width: 35px;*/} .info-box div a:hover{color:var(--sns-color02);} .info-box div:nth-child(1){background:rgba(99,165,218,0.8);border-bottom:none;} .info-box div:nth-child(2) {background:rgba(0,0,0,0.50);} /*----------------------------------home-------------------------------------- ------------------------------------------------------------------------------------------------- */ /*タイトル見出し*/ .sl-titsl{clear:both;text-align: center;font-size: 32rem;padding:3% 2% 7%;width:80%;max-width:1140px;margin:0 auto;} .sl-tit{text-align: center;font-size: 32rem;padding:3% 2% 7%;width: 80%;max-width:1140px;margin: auto;} .sec-tit{loat:left; clear: both;width: 100%;} .slm-tit{width:50%;margin:0 auto;clear: both;font-size:34rem;font-weight: bold;text-align: center;color: #FFF; padding:5% 5% 4% 1%;background-image: url(svg/parts-07.svg); background-repeat: no-repeat;background-size:contain;background-position:center center;} .slm-com{font-size:21rem;} .top-tit-page02 {display: flex;flex-wrap: wrap;align-items: center;gap: 30px;border: 2px solid var(--main-c);color: var(--font-color);} .top-tit-page02 .m-tit{width: 20%;font-size: 16rem;text-align:center;padding: 1% 5% 1% 3%;background: var(--sub-c);clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);} .more-link{float:right; clear: both;margin:5% 0; padding:10px;width: 20%;background:var(--main-c);display: block;} .more-link img{float:left; clear: both;width: 100%;padding:5% 20%;border: 1px solid #FFF;} .box80 .more-link{margin:1% 0 3%; padding:5px;width:30%;} #menuitems-gallery-service .item{margin:2%;} /*-----施工実績-works----------------------------home--*/ #works{/*background: #000;*/} .top-workslist{clear:both;text-align: center;width: 100%; display: grid;grid-template-columns :25% 25% 25% 25%;border:5px solid #000;} .twl-box:first-child{grid-column: 1 / 3;grid-row: 1 / 3;} .twl-box{border: 10px solid #000;} .twl-box-in{position: relative;} .twl-box-cat{float:left;position: absolute;top:0;left:0;} .twl-box-cat a{float:left;font-size: 14rem;padding:1% 5% 3%;white-space: nowrap;} .twl-item-tit{float:left; clear: both;padding:3% 5%;background:rgba(255,255,255,0.8);position: absolute;bottom:10%;left:0;} .twl-box-tit{font-size: 14rem;float:left; clear: both;width: 100%;} .twl-box-day{font-size: 14rem;float:left;text-align: left;clear: both;width: 100%;} /*-----とは-----------------------------home--*/ .sa-cont{display:flex;flex-direction:row-reverse;justify-content:space-around; background-image: url(svg/parts-07.svg); background-repeat: no-repeat; background-position: bottom right; background-size: auto 50%;} .sa-img{width:35%;} .sa-com{width:60%;font-size: 24rem;line-height: 175%;} .menu-cont{display:flex;justify-content:space-around;} .menu-cont li{width: 33%;} .menu-cont span{width: 100%;float:left; clear: both;} .m-pri{font-size: 32rem;text-align: center;color: #603813;padding:20% 0; background-image: url(svg/parts-10.svg);background-position: center; background-size: contain; vertical-align: middle; background-repeat: no-repeat; } .m-nam{font-size:26rem;text-align: center;padding:5% 0;} .m-nam:before{ content: '';/*何も入れない*/ display: inline-block; width: 30px;/*画像の幅*/ height: 30px;/*画像の高さ*/ background-image: url(svg/parts-09.svg); background-size: contain; vertical-align: middle; background-repeat: no-repeat; } .m-com{padding: 2% 5%;font-size:18rem;} .ab-cont{width:100%;float:left; clear: both;display:flex;flex-direction:row-reverse;justify-content:space-around;} .ab-cont .ab-img{width: 30%;} .ab-cont .ab-com{width: 65%;} .ab-list{width:100%;float:left; clear: both;padding:5% 2%;} .ab-list li{width:100%;float:left; clear: both;padding:3% 0;} .ite-cont{width:100%;float:left; clear: both;display:flex;justify-content:space-around;} .ite-cont .ite-img{width: 40%;} .ite-cont .ite-com{width: 48%;margin-bottom: 10%;} .blog-list{width:100%;float:left; clear: both;padding:0 10% 10%;} .blog-list li{width:100%;float:left; clear: both;padding:5% 0;display:flex;justify-content:space-around;align-items:center;flex-wrap:nowrap;border-bottom: 1px dashed #555;} .blog-list li:last-child{border-bottom: 0px none #555;} .blog-list li span{float:left;} .blist-cat{width:15%;} .blog-list li .blist-cat a{width:100%;padding:5% 2% ;clear: both;float:left;text-align: center;} .blist-data{width:25%;text-align: center;} .blist-tit{width:55%;} .sns-list{width:100%;float:left; clear: both;display:flex;justify-content:space-around;align-items:center;} .sns-list li{width: 275px;max-width: 275px;} .sns-list li a{width:100%;float:left; clear: both;background: #FFF;border: 1px solid #829A5C;} .sns-list li a:hover{background: #E6EBDE;} /*---------------------------------アイキャッチ------------------------------------ ------------------------------------------------------------------------------------------------- */ .ce-img{float:left;clear: both;width: 100%;text-align: center;background-color:var(--bc-color-odd);padding-top:0px;} .ce-img{ background-repeat: no-repeat; background-position:center center; background-size: cover; position: relative; z-index: 0; overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/ } /*:beforeにぼかし効果を設定する*/ .ce-img:before{ content: ''; background: inherit;/*.bgImageで設定した背景画像を継承する*/ -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px) brightness(70%); position: absolute; /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/ top: -15px; left: -15px; right: -15px; bottom: -15px; z-index: -1;/*重なり順序を一番下にしておく*/ } /*---------------------------------ページ--トップタイトル---------------------------------- ------------------------------------------------------------------------------------------------- */ .tit-page{width:100%;float:left; clear: both;color: #FFF;background:var(--main-c) no-repeat center center;background-size:cover;} .f-box{width:100%;float:left; clear: both; background-color: rgba(0,0,0,0.2);display: flex;align-items:stretch;justify-content:center;align-self:center;} .top-tith-f{color: #FFF;font-weight: bold;float:left;width:25%;padding:2% 1%;background-color: rgba(0,0,0,0.2);font-size:32rem;text-align: center;} .top-tith-f span{width:100%;float:left; clear: both;font-size:18rem;} .top-tith-f img {float:left; clear: both;padding:0 15%; } .sub-box{float:left;} /*---------------------------------固定ページ------------------------------------ ------------------------------------------------------------------------------------------------- */ .page-top-img{margin:100px auto 0;width:100%;max-width: 1200px;} .pp-tcom{float:left;clear:both;width:100%;padding:0 2% 5%;} .sec-tit-txt{float:left;clear:both;width:100%;text-align: center;font-size:32rem;border-bottom: solid 10px var(--main-c);position: relative;} .sec-tit-txt:after{position: absolute;content: " ";display: block;border-bottom: solid 10px var(--main-c);bottom: -10px;width: 20%;} .page-com{width:100%;float:left; clear: both;padding:2% 2% 7%;} /*---------------------------------固定ページ--会社概要-about---------------------------------*/ .about-sec .skewed{/*background-size:cover;background-repeat:no-repeat;background-position:center center;*/padding: 0;} .about-sec-back{width:100%;float:left; clear: both;background:rgba(0,0,0,0.4);padding:15% 0;color: #FFF;} .about-sec .skewed.asb-top{background-position:center center;background-repeat:no-repeat;background-attachment: fixed;background-attachment: scroll;background-size: cover;} .c-profile{width:100%;max-width:800px;margin:10% auto;clear: both;padding:3% 0; } .c-profile li{width:100%;float:left;clear: both;display: flex;} .c-profile li:nth-child(even){background:#eaedf2;} .c-profile li span{padding:2% 1%;} .c-profile li span:nth-child(1){width:30%;text-align:center;font-weight: bold;color: #FFF; background:var(--main-c);border-bottom: 1px solid #FFF;} .c-profile li span:nth-child(2){width:70%;border-bottom: 1px solid var(--main-c);} .c-profile li span:last-child{border-bottom:none;} .mp-box{width:100%;float:left; clear: both;display: flex;align-items: center;padding:10% 0; } .mp-tit{width:30%;text-align: center;font-size:24rem;font-weight:bold;} .mp-tit h3 { position: relative; display: inline-block; padding: 1em 3em; } .mp-tit h3::before, .mp-tit h3::after { position: absolute; content: ''; top: calc(50% - 1px); width: 2em; height: 2px; background-color:var(--main-c); } .mp-tit h3::before { left:0; } .mp-tit h3::after { right: 0; } .mp-tit h3:first-letter {font-size: 36rem; color:var(--main-c); } .mp-com{/*font-size:16rem;*/padding:1% 2%; } .heading19 {text-align: center;position: relative;padding-bottom: 10px;padding-top:5%;font-size: 26rem;} .heading19::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 8px;background-image: repeating-linear-gradient(45deg, var(--main-c) 0px, var(--main-c) 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);background-size: 8px 8px;} mark{background: linear-gradient(transparent 70%, yellow 0%);} .pro-cha{width:100%;float:left; clear: both;background-repeat: no-repeat;background-size: cover;background-position: center;} .pro-cha-back{width:100%;float:left; clear: both;background:rgba(0,0,0,0.1);padding:15% 0;} .content-in-cha {width:50%;float:right;margin:0 5%; padding: 5%;background:rgba(255,255,255,0.7);} /*---------------------------------固定ページ--親サービス共通----------------------------------*/ .sev-list{width:100%;float:left;clear: both;display:flex;flex-wrap: wrap;/*justify-content:space-between;*/ } .sev-list li {padding:2% 0 0;width: 32%;} .sev-list li:not(:nth-child(3n+3)) {margin-right: 2%;} .sev-list li:nth-child(n+4) {margin-top:0;} @media not all and (min-width: 768px) { .sev-list li {width: 100%;} .sev-list li:not(:nth-child(3n+3)) { margin-right: 0;} .sev-list li:nth-child(n+2) { margin-top:0;} } /*---------------------------------固定ページ--子サービス共通----------------------------------*/ .seko-img{text-align: center;} .seko-list{width:100%;float:left; clear: both;} .sl-item{width:100%;float:left; clear: both;display:flex;justify-content:space-around;align-items:top;padding:5% 0;} .sl-item-img{width:30%;} .sl-item-cont{width:65%;} .sl-item-contFull{width:100%;} .separator{background: #FFF;width:100%;float:left; clear: both;border-radius:20px;margin-top: 5%;padding:2% 0;} .separator-in{padding:0 2%;width:100%;float:left; clear: both;} .content-in.chill-plan{max-width: 1240px;} .sli-tit {line-height: 130%; font-size:28rem; position: relative; overflow: hidden; padding: 2% 2% 2% 100px; border: 2px solid var(--main-c); } .sli-tit:before { position: absolute; top: -150%; left: -100px; width: 170px; height: 300%; content: ''; -webkit-transform: rotate(25deg); transform: rotate(25deg); background: var(--main-c); } .sli-tit span {line-height: 100%;text-align: center; font-size:32rem; position: absolute; z-index: 1; top: 10%; left: 0; display: block; padding-top: 3px; padding-left: 16px; color: #fff; } .sli-com{width:100%;float:left; clear: both;padding:2%;} #menuitems-gallery-sevchi .item{margin:2%;} /*---------------------------------固定ページ--FAQ----------------------------------*/ .fq-toptit{width:100%;float:left; clear: both;text-align: center;} .fq-toptit h2{border-bottom: solid 10px var(--main-c);position: relative;} .fq-toptit h2:after {position: absolute;content: " ";display: block;border-bottom: solid 10px var(--main-c);bottom: -10px;width: 20%;} .fq-toptit img{width:40%;padding:2%; } .fq-box{width:100%;float:left; clear: both;} .fq-cont{width:100%;float:left; clear: both;background:#FFF;padding:2% 1%;} .fq-cont:nth-child(even){background:#FFFEEE;} .fq-cont-box{width:100%;float:left; clear: both;display: flex;align-items: center;} .fq-cont-box-an{width:100%;float:left; clear: both;display: flex;align-items:flex-start;} .fq-cont-box div{} .fpcb-img{width:10%;padding: 2%;} .fpcb-tit{width:85%;font-size:16rem;border-bottom: solid 3px #5472cd;position: relative;} .tag-item{float:left;padding:3px 5px 10px 0;} /*.fpcb-tit:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #5472cd;bottom: -3px;width: 20%;}*/ .fpcb-com{width:85%;padding:1% 0;font-size:27rem;line-height:135%; } .fpcb-com a:link,.tag-item a:link{text-decoration:none;} .more-faq{padding:5px 5px;background:var(--main-c); color:#FFF;letter-spacing:0em;margin-left:2px;font-size:16rem;} /*---------------------------------固定ページ-料金表-plan---------------------------------*/ .plan-content-in{width:100%;max-width:1420px;clear:both;margin:0 auto;padding:5% 0 15%; } .page-com-plan{width:100%;float:left; clear: both;padding:2% 2% 10%;} .const{width:100%;float:left; clear: both;padding:4%;text-align: center; } .const-tit{font-size: 24rem;margin-bottom:2%;display: flex;justify-content: center;align-items: center;text-align: center;} .const-tit::before,.const-tit::after {content: '';width: 70px;height: 3px;background-color: #e3bf00;} .const-tit::before {margin-right: 20px;} .const-tit::after {margin-left: 20px;} .const ul{display: flex;font-size: 16rem;justify-content:center;flex-wrap: wrap;} .const ul li{padding:1% 2%;margin: 5px;background:var(--main-c);border-radius:10px;color: #FFF;white-space: nowrap} .plan-box{width:100%;float:left; clear: both;} .pricecards{width:100%;float:left; clear: both;display: flex;flex-wrap: wrap;justify-content:center;} .pricecard{width:33.33%;max-width:450px;text-align: center;padding:1%;display: flex;flex-direction:column;} .pricecard .itbr > .fl-gro{flex-grow: 1;width:100%;float:left; clear: both;} .pricecard .itbr > .fl-star{align-self:flex-start;width:100%;float:left; clear: both;min-height:80px;} .pricecard .itbr{flex-grow: 1;display: flex;flex-direction:column;height:auto;align-self:stretch;background:#FFF;width:100%;float:left; clear: both;border: 3px solid #215697;padding-bottom:15px;box-sizing: border-box;margin:0 auto 5%;} /*.pricecard .itbr > div{align-self: stretch;width:100%;float:left; clear: both;}*/ .pricecard .pri-plan-tit{width:100%;float:left; clear: both;display: flex;align-items:center;justify-content:center;background:#215697;color: #fff;padding:10px 2%;margin: 0;font-size:24rem;font-weight:bold;text-shadow:1px 1px 5px #fff;} .pricecard .pri-plan-tit span:nth-child(2){font-weight:bold;} .pricecard .pri-plan-tit .img-item-plan{width:13%;padding: 0 1% 5px;} .pricecard .pri-plan-tit .img-item-plan.img-regular{width:1%;padding: 0 0 5px;} .pricecard .pri-price01{font-family:"Outfit", sans-serif,"Impact","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif; font-size:42rem;font-weight: 900;font-style: normal;margin: 0 auto;padding:50px 0 0;line-height:50px;width:100%;float:left; clear: both;letter-spacing:0.5rem;} .plan-price02{padding:0 0;margin: 0 0 10px;width:100%;float:left; clear: both;} .plan-box-pand{background: #BBB;;display: flex;flex-direction:column;width:100%;float:left; clear: both;padding:20px 4%;} .plan-com{padding:0 4%;width:100%;float:left; clear: both;line-height:135%;} .plan-etc{width:100%;float:left; clear: both;padding:10px 4%;font-size:14rem;color:#555;text-align: left;} .pricecard p{margin: 0;padding:0;text-align: left;} .arrow-item{padding:10px 4%;width:100%;float:left; clear: both;} .arrow_box{margin:5% 4%;position:relative;clear: both;width:92%;background:#FFEB85;padding:2%;text-align:center;font-size:18rem;font-weight:bold;border-radius:10px;} .arrow_box:after{border: solid transparent;content:'';height:0;width:0;pointer-events:none;position:absolute;border-color: rgba(255, 235, 133, 0); border-top-width:15px;border-bottom-width:15px;border-left-width:15px;border-right-width:15px;margin-left: -15px;border-top-color:#FFEB85;top:100%;left:50%;} .plan-com02{font-size:16rem;padding:0 4%;margin: 0; width:100%;float:left; clear: both;text-align: left;} .pricecard .btn {align-self:stretch;margin-top: auto;padding:5% 4% 7%;width:100%;float:left; clear: both;text-align: center;} .pricecard .btn a{padding: 10px 40px;background: #fb5859;color: #fff;text-decoration:underline;border-radius: 3px;display: inline-block;} .img-silver{background:url(svg/parts-34.svg) no-repeat bottom center;} .img-gold{background:url(svg/parts-33.svg) no-repeat bottom center;} /*the_sub_field('flag')---プレミアム-パーフェクトプラン--*/ .pricecard .itbr.item-box-regular{border: 3px solid #63A6DB;} .pricecard.regular .pri-plan-tit{background:linear-gradient(45deg, #63A6DB 0%, #89B7E3 45%, #ABC9EA 60%, #89B7E3 75%, #63A6DB 85% 100%);color: #FFF;text-shadow:1px 1px 5px #63A6DB;} @keyframes regularanm{ 0%{background-position:0px 0px;} 100%{background-position:2000px 0px;} } .pricecard.regular .pri-price01 { filter:drop-shadow(1px 1px 0px #FFF)drop-shadow(-1px 1px 0px #FFF)drop-shadow(1px -1px 0px #FFF)drop-shadow(-1px -1px 0px #FFF)drop-shadow(3px 3px 0px #63A6DB); background-image:linear-gradient(45deg, #63A6DB 0%, #89B7E3 45%, #ABC9EA 60%, #89B7E3 75%, #63A6DB 85% 100%); /*background-image:linear-gradient(45deg, #215697 0%, #3690ff 45%, #85bcff 60%, #317cd9 75%, #215697 85% 100%);*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation:regularanm 10s ease-in-out 0s alternate infinite; } .pricecard .itbr.item-box-silver{border: 3px solid #999;} .pricecard.silver .pri-plan-tit{background: linear-gradient(45deg, #DDD 0%, #9E9E9E 45%, #E8E8E8 60%, #9E9E9E 75%, #999 80% 100%);color: #555;} .pricecard.silver .pri-price01{ filter:drop-shadow(1px 1px 0px #FFF)drop-shadow(-1px 1px 0px #FFF)drop-shadow(1px -1px 0px #FFF)drop-shadow(-1px -1px 0px #FFF)drop-shadow(3px 3px 0px #555); background-image:linear-gradient(45deg, #DDD 0%, #9E9E9E 45%, #E8E8E8 60%, #9E9E9E 75%, #999 80% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation:regularanm 10s ease-in-out 0s alternate infinite; } .pricecard .itbr.item-box-gold{border: 3px solid #B67B03;} .pricecard.gold .pri-plan-tit{background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 60%, #DAAF08 75%, #B67B03 80% 100%);color: #A13D1C;} .pricecard.gold .pri-price01{ filter:drop-shadow(1px 1px 0px #FFF)drop-shadow(-1px 1px 0px #FFF)drop-shadow(1px -1px 0px #FFF)drop-shadow(-1px -1px 0px #FFF)drop-shadow(3px 3px 0px #A13D1C); background-image:linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 60%, #DAAF08 75%, #B67B03 80% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation:regularanm 10s ease-in-out 0s alternate infinite; } .plan-ex{width:100%;float:left; clear: both;} .plan-ex .pricecard{width:320px;padding:1% 0;} .plan-ex .pricecard h3{padding:1% 0;font-size:21rem; } .plan-ex-box{width:100%;float:left; clear: both;padding-top: 2%;} /*---------------------------------施工の流れ-FLOW----------------------------------*/ .flow-box{width:100%;float:left; clear: both;display: flex;align-items:flex-end;} .flow-box div:nth-child(1){width:30%;} .flow-box div:nth-child(1) img{width:70%;} .flow-box div:nth-child(2){width:70%;max-width:780px;} .flow-list{width:100%;float:left; clear: both;display: flex;flex-wrap:wrap;} .flow-list li{width: 50%;padding: 5%;} .flow-list li div{width:100%;float:left; clear: both;padding:0 0 5%;} .flow-list li div:nth-child(1){width:25%;max-width:50px;} .flow-list li div:nth-child(2){font-size:26rem;font-weight:bold;} .flow-list li div:nth-child(3){font-size:14rem;} .pl-box{width:100%;float:left; clear: both;} .pl-list{width:100%;float:left; clear: both;display: flex;align-items:center;padding:5% 0 0; } .pl-list div:nth-child(1){width:25%;text-align: right;padding:0 2%;} .pl-list div:nth-child(2){width:75%;} .pl-list div span{width:100%;float:left; clear: both;padding:0 2% 1%; } .pl-list div span:nth-child(1){font-size:26rem;font-weight:bold;} /*---------------------------------ギャラリー------------------------------------ ------------------------------------------------------------------------------------------------- */ .m-gallery-box{float:left;clear: both;width: 100%;padding:10% 0;} .rep-gallery-box{float:left;clear: both;width: 100%;padding:2% 0;} /*---------------------------------カルーセル-スライダー-------------------------------------- ------------------------------------------------------------------------------------------------- */ .slider{clear: both;width: 100%;padding: 0;text-align: center;margin:0 auto;} .multiple-item5 li{padding:0 2% 5%;} .multiple-item-c li{padding:0 1px;} .owl-carousel {clear: both;float: left;width: 100%;margin: 0 0; } #menuitems-gallery-item .item{padding:0 10px;} .item a .mt-tit{clear: both;float: left;width: 100%;margin:20px 0; text-align: center;} .item .botm-cap{position:relative} .item .botm-cap .gal-cap{float:left;clear: both;position:relative; top:-36px;background:rgba(255,255,255,0.8);padding:3px 3%;font-size:14rem;} /*----プライバシーポリシー----*/ .pp-cont{float:left;clear:both;width:100%;padding:2% 0;} .pp-cont .pp-tit{float:left;clear:both;width:100%;padding:0 2%;border-bottom:1px solid var(--main-c);color: var(--main-c);} .pp-cont .pp-com{float:left;clear:both;width:100%;padding:2%;} /*----------------------------------カテゴリ-blog------------------------------------- ------------------------------------------------------------------------------------------------- */ .sing-top-data{clear: both;float: left;width: 100%;} .sing-toptit{position: relative;padding: 1.5rem 2rem;border-bottom: 3px solid #d8d8d8;background:var(--cat-color);color: var(--cat-font-color); margin:0 0 4rem;} .sing-toptit:before {position: absolute;bottom: -17px;left: 1em;width: 0;height: 0;content: '';border-width: 14px 12px 0 12px;border-style: solid;border-color: #d8d8d8 transparent transparent transparent;} .sing-toptit:after {position: absolute;bottom: -14px;left: 1em;width: 0;height: 0;content: '';border-width: 14px 12px 0 12px;border-style: solid;border-color: var(--cat-color) transparent transparent transparent;} .blog-set {padding:0 0 5px;clear:both;float:left;width:100%;} .single-blog-tit {clear:both;float:left;width:100%;margin-bottom:5px;padding:0 10px 0;border-bottom:1px solid var(--main-c);font-size:21rem;} .single-blog-data {clear:both;float:left;padding:3px 5px;background-color:var(--main-c);color: #FFF;} .blog-cont{clear:both;float:left;width:100%;margin:20px 0 40px;line-height:145%;text-align:justify;} .blog-cont-img{clear:both;float:left;width:100%;margin:20px 0 40px;text-align:center;} .blog-cont img{max-width: 100%;} .blog-data-cat{padding:2% 0;clear:both;float:left;width:100%;} .blog-data-tag{padding:2% 0;clear:both;float:left;width:100%;} .news-list-day{float:left;width:25%; } .cat-list-cat {float:left;width:75%;margin:0 0 10px; } .cat-list-cat a{padding:1% 3%;margin:0 2%;font-size: 10rem;} .news-list-tag{float:left;padding:3% 1%;} .top-cat-list li .news-list-tag {float:left;clear:both;width:100%;padding:2% 0;} .news-list-tag a{font-size:12rem;opacity:0.7;filter:alpha(opacity=70);padding:0;margin:0;} .news-list-tag a:hover{color:#877757;opacity:1.0;filter:alpha(opacity=100);} .news-list-tag a::before {content:"#";} .news-list-cat,.news-list-tag{padding:0;margin:0;line-height:110%;} .cont-box-link a img, .news-next-more a img{width:20%;} .news-list-tag{float:left;clear:both;width:100%;} .single-blog-cat {float:left;} .single-blog-cat a{float:left;padding:3px 5px;margin:0 0 0 3px; } .single-blog-cat a::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;background:var(--main-c);transform: scale(0, 1);transform-origin: left top;transition: transform .3s;} .single-blog-cat a:hover::after {transform: scale(1, 1);} .single-blog-cat a:link{text-decoration: none;} .single-blog-tag {padding:0 2%;} .single-blog-tag a{padding:3px 5px;background-color:var(--sub-c);margin:0 3px; } .single-blog-tag a::before {content:"#";} .single-blog-tag a:hover{background-color:rgba(42,126,155,1.0);-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .cat-box{float:left;clear:both;width:100%;display:flex;flex-direction: row;flex-wrap: wrap;justify-content:space-between;} .c-boxitem{width:30%;margin:5% 0; } .cat-item-img img{border-radius:10px 10px 0 0;} .cat-item-cat a{padding:1% 4%;font-size:14rem; } .cat-item-day{padding:1% 4%;font-size:14rem;color: #555;} .cat-item-tag{padding:0 2%;float:left;clear:both;width:100%;} .cat-item-tag a{padding:1% 2%;font-size:14rem;color: #555;} .cat-item-tag a::before {content:"#";} .cat-item-tag a:hover{background-color:rgba(42,126,155,1.0);-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .cat-item-tit{float:left;clear:both;width:100%;margin:5% 0;color:#555;font-weight:900;line-height:120%;font-size: 14rem;} /*----サイドバー----*/ .page-tit {text-align: center;} .cat-list{padding:40px 15px 40px;clear:both;float:left;width:100%;} .cat-list li{clear:both;float:left;width:100%;margin:0 0 10%;} /*.cat-list li span{padding:0 0;clear:both;float:left;width:100%;}*/ .cat-list-img{clear:both;float:left;width:100%;padding:0;} .cat-list .box80{padding:0 2%;} .cat-list-tit a{font-size:21rem;font-weight:200;border-bottom:1px solid var(--main-c);margin-bottom:8px;width:100%;clear:both;float:left;} .cat-list-data{font-size:12rem;} .cat-list-com{margin:2% 0;clear:both;float:left;width:100%;} .cat-list li .more-txt{float:right;clear:both;width:30%;padding:0;text-align: right;border: solid 1px #829A5C;} .cat-list li .more-txt a{} .cat-list-data{padding:0 0;clear:both;float:left;width:100%;} .cat-list-data span{float:left;padding:0 2% 0 0;} .cat-list-data span a::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;background:var(--main-c);transform: scale(0, 1);transform-origin: left top;transition: transform .3s;} .cat-list-data span a:hover::after {transform: scale(1, 1);} .next-link{text-align: right;padding:10% 5%;clear: both;float: right;} .blog-rg {margin:5% 0;padding-left:30px;clear:both;float:left;width:100%;} .sid-blog-tit {font-size:21rem;border-bottom:1px solid var(--main-c);text-align:center;clear:both;float:left;width:100%;margin-bottom:2px;padding-bottom:5px;} .sid-blog-list {padding:5px 10px 10px;clear:both;float:left;width:100%;} .sid-blog-list li{margin:0 0 5px;padding:0 0 5px;clear:both;float:left;width:100%;border-bottom:0px solid var(--main-c);} .sub-sbl{list-style: inside;padding:0 10px;} .indst,.children{list-style: inside;} .children li{border-top:1px none var(--main-c);border-bottom:0 solid var(--main-c);margin:5px 0 0;padding:0 5%;} .sid-blog-list li .list-date{width:100%;clear:both;float:left;padding:0 10px;font-size:12rem; } .sid-blog-list li .list-tit{width:100%;clear:both;float:left;padding:0 10px;font-size:14rem;} .sbl-cat{font-size:14rem;} .sid-tag-list{display:flex;flex-wrap:wrap;width:100%;clear:both;float:left;padding:5px;} .sid-tag-list li{padding:5px 0 0 5px;} .sid-tag-list li a{padding:5px;font-size:12rem;width:100%;background-color:var(--main-c);color: #FFF;float:left;white-space: nowrap;margin:2%; } .sid-tag-list li a::before {content:"#";} .sid-tag-list li a:hover{background-color:rgba(42,126,155,1.0);-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .aclist-tit{padding:1% 2%;clear:both;float:left;width:100%;} .sid-blog-aclist{display:flex;flex-wrap:wrap;padding:0 5%;clear:both;float:left;width:100%;} .sid-blog-aclist li{border-left:1px dashed #9CD8F6;width:25%;text-align: center;margin:0 0 5%;} .sid-blog-aclist li:nth-child(4n+1){border-left:1px none #9CD8F6;} .sid-blog-aclist li a{font-size:12rem;padding:1% 2%;text-align: center;display: block;} .sid-blog-aclist li a:hover{background-color:var(--main-c);color:#FFF;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;text-decoration: none;} /*----------------------------------カテゴリ-blog--シングル----------------------------------- ------------------------------------------------------------------------------------------------- */ .blog-profile{display: flex;justify-content:space-around;clear:both;float:left;width:100%;border: 1px solid #CCC;padding: 5% 2%;margin: 5% 0;} .blog-profile .bpro-img{width:15%;} .blog-profile .bpro-con{width:70%;} .bpro-img img{border-radius:50%;} .bpro-tit{font-size:16rem;font-weight: bold;margin-bottom: 2%;} .bpro-tit span{font-size:18rem;font-weight: bold;} .bprocom{font-size:16rem;clear:both;float:left;width:100%;} /*----------------------------------施工実績-Works---カテゴリ---------------------------------- ------------------------------------------------------------------------------------------------- */ .wrok-ba{width:100%;float:left; clear: both;padding:2% 0;display: flex;flex-wrap: wrap;justify-content:center;} .wrok-ba-box{width:23%;margin: 0 10px 25px;padding: 0;position: relative;} .ba-cat-list{display:flex;position: absolute;top:-2px;left:0;white-space: nowrap;margin: 0; padding: 0;} .ba-cat-list div{margin: 0; padding: 0;} .ba-cat-list a{font-size: 14rem;padding:5px 15px;} .ba-img-box{display: flex;align-items:stretch;} .ba-img-box div{width:50%;position: relative;min-height: 70px;} .ba-img-box div span:nth-child(2){width: 100%;text-align: center;float:left; clear: both;position: absolute;bottom:0;left:0;} .ba-img-box div:nth-child(1) span:nth-child(2){background:rgba(0,0,0,0.5);color: #FFF;} .ba-img-box div:nth-child(2) span:nth-child(2){background:rgba(255,255,255,0.7);} .ba-info-list{width:100%;float:left; clear: both;} .ba-info-list span{width:100%;float:left; clear: both;} .ba-info-list span:nth-child(1){font-size: 16rem;} .ba-info-list span:nth-child(2){font-size:21rem;line-height: 130%;} .workslist{width:100%;float:left; clear: both;padding:2% 0;display: flex;flex-wrap: wrap;justify-content:center;} .wrok-ba-box a:link,.gallery-works a:link,.wl-box a:link{text-decoration:none;} .wl-box{width:25%;max-width:400px; margin: 0 10px 10px;position: relative;padding: 0;} .wl-item-tit{float:left; clear: both;width: 100%; padding:3% 2% 5%;} .wl-box-tit{font-size:21rem;float:left; clear: both;line-height:120%;} .wl-box-day{font-size: 14rem;float:left; clear: both;} .wl-item-tit.fcw,.wl-item-tit.fcw a{color: #FFF;} .wrok-ba-box.topworks{width:100%;} .wrok-ba-box.topworks a .ba-info-list,.wrok-ba-box.topworks .news-list-tag a{color: #FFF !important;} #menuitems-gallery-works .item,#menuitems-gallery-voice .item{ margin:0 10px;} #menuitems-gallery-works .wl-item-tit,#menuitems-gallery-voice .wl-item-tit,.wl-box-cat{left:10px;} .gall-box-works{clear: both;float: left;width: 100%;position: relative;} div.smart-panbox{padding:7% 0;} .gbw-box{max-width: 1200px;width:100%;margin:0 auto;padding-bottom:6%;} .gbw-box a{clear: both;float: left;width: 100%;} .gbw-tit{clear: both;float: left;width: 100%;display: flex;align-items: flex-end;justify-content:flex-end;} .gbw-tit div{width:40%;float: left;} .gbw-tit div:last-child{width:30%;float: left;color: #FFF;font-size:24rem;padding:0 1%; } .gbw-tit div span{line-height:90%;} .gbw-tit div .ssti-01{font-size:28rem;font-weight: bolder; clear: both;float: left;width: 100%;} .gbw-tit div .ssti-03{font-size:14rem;} .gall-box-voice{clear: both;float: left;width: 100%;padding:4% 0 2%;position: relative;} .gbw-tit-voice{clear: both;float: left;width: 100%;display: flex;align-items: flex-end;flex-direction:row-reverse; } .ssti-box{text-align: right;} /*----------------------------------施工実績-Works--シングル---------------------------------- ------------------------------------------------------------------------- --------------background:rgba(0,0,0,0.5);---------- */ .works-sbox{width:100%;clear:both;} .ws-ba-box{width:100%;clear:both;max-width:1200px;margin:2% auto 0;display: flex;align-items: flex-end;justify-content:center;} .bi-box{width:60%;padding:5% 1%;position: relative;} .bi-box .bi-img{width:100%;clear:both;float:left;} .bi-box .bi-img img{/*transform: rotateZ( 1deg );*/border:20px solid #FFF;box-shadow: 0px 0px 15px -5px #777777;border-radius: 10px;} .bi-box .bi-icon{width:50%;padding:0 0; position: absolute;top:10%;left:1%;transform: rotateZ( -10deg );} .b-ya{width:25%;padding:2% 1%;} .wab-back{width:100%;clear:both;float:left;background:var(--main-c);padding:1%;} .ws-aa-box{width:100%;max-width: 1600px;margin:2% auto;clear:both;display: flex;flex-direction:row-reverse;background:var(--main-c);padding: 3% 0;} .ai-box{width:60%;padding:1% 1%;position: relative;} .ai-box .ai-img{width:100%;clear:both;float:left;} .ai-box .ai-img img{/*transform: rotateZ( -3deg );*/border:20px solid #FFF;box-shadow: 0px 0px 15px -5px #777777;border-radius: 10px;} .ai-box .ai-icon{width:60%;padding:0 0; position: absolute;top:-2%;right:-7%;transform: rotateZ( 7deg );} .ws-com{width:40%;padding:2% 3%;color: #FFF;border:10px dotted #FFF;border-radius: 10px;} .wosing-cont{width:100%;float:left;clear:both;padding:5% 0; } /*.wosing-tit:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #5472cd;bottom: -3px;width: 20%;}*/ .wosing-com{width:100%;float:left;clear:both;padding:0 2%;} /*---------レイアウトテンプレート-------------------------カテゴリ-blog--シングル----------------------------------- ------------------------------------------------------------------------------------------------- */ /*ポイント- 吹き出し本体 */ .subla-point{width:100%;float:left;clear:both;padding:2% 0;} .oneArea { display: flex; flex-wrap: wrap; justify-content: flex-start; width:100%; max-width:1200px; margin:0 auto; padding:5% 5% 10%; } .oneArea .onebox { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; } .oneArea .s-bubble-l { flex-direction: row-reverse; margin-top: 20px; } .oneArea .onebox .imgArea { width: 16%; position: relative; } .imgArea img{border-radius:50%;} .oneArea .s-bubble-r .imgArea img { width: 80%; position: absolute; top: -10px; left: 0; } .oneArea .s-bubble-l .imgArea img { width:80%; position: absolute; top: -10px; left: auto; right: 0; } .oneArea .onebox .fukiArea { width: 63%; } .oneArea .onebox .fukidasi { width: 100%; position: relative; padding: 25px; background-color: #f2f3f7; font-size: 18px; color: #231815; border-radius: 12px; box-sizing: border-box; } .oneArea .onebox .fukidasi::before { content: ''; position: absolute; display: block; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); top: 22px; border-right: 25px solid transparent; border-bottom: 25px solid transparent; } .oneArea .onebox .fukidasi::after { content: ''; position: absolute; display: block; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); top: 40px; border-right: 25px solid transparent; border-bottom: 25px solid transparent; } .oneArea .s-bubble-r .fukidasi::before { left: -15px; border-left: 25px solid #f2f3f7; border-top: 25px solid transparent; } .oneArea .s-bubble-r .fukidasi::after { left: -25px; border-left: 25px solid #ffffff; border-top: 25px solid transparent; } .oneArea .s-bubble-l .fukidasi { background-color: #fde5e5; } .oneArea .s-bubble-l .fukidasi::before { left: auto; right: -15px; border-left: 25px solid transparent; border-top: 25px solid #fde5e5; } .oneArea .s-bubble-l .fukidasi::after { left: auto; right: -25px; border-left: 25px solid transparent; border-top: 25px solid #ffffff; } @media screen and (max-width: 1024px) { .oneArea .s-bubble-r .imgArea img { max-width: 70%; top: 0; } .oneArea .s-bubble-l .imgArea img { max-width: 70%; top: 0; } .oneArea .onebox .fukidasi { padding: 15px; font-size: 14px; } .oneArea .onebox .fukidasi::before { top: 8px; } .oneArea .onebox .fukidasi::after { top: 20px; } } @media screen and (max-width: 420px) { .oneArea { margin: 30px auto; } .oneArea .s-bubble-l { margin-top: 15px; } .oneArea .onebox .imgArea { width: 20%; } .oneArea .onebox .fukidasi { padding: 10px 15px; font-size: 12px; } } .wosing-tit{width:100%;float:left;clear:both;border-bottom: solid 3px #5472cd;position: relative;font-size:24rem;margin:2% 0 3%;padding:0 2% 5px;} h2.main-tit{position: relative;padding:0 2% 1% 5%;margin-bottom:3%;font-size: 26rem;border-bottom:3px solid var(--main-c);} h2.main-tit:before {font-family: "Font Awesome 5 Free";content: "\f303";font-weight: 900;position: absolute;left:1%;top: 0;color: var(--main-c);} h2.sub-tit {width:100%;float:left; clear: both; position: relative; line-height: 1.4; padding: 0.5em 0.5em 0.5em 1.8em; font-size: 26rem;border-bottom:3px solid var(--main-c); } h2.sub-tit:before { font-family: "Font Awesome 5 Free"; content: "\f303";/* "\f14a" */ font-weight: 900; position: absolute; color: var(--main-c); left : 0.5em; /*左端からのアイコンまでの距離*/ } h3.sub-tit {width:100%;float:left; clear: both; position: relative; line-height: 1.4; padding: 0.5em 0.5em 0.5em 1.8em; } h3.sub-tit:before { font-family: "Font Awesome 5 Free"; content: "\f138";/* "\f14a" */ font-weight: 900; position: absolute; color: var(--main-c); left : 0.5em; /*左端からのアイコンまでの距離*/ } h3.sub-tit::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 8px;background-image: repeating-linear-gradient(45deg, var(--main-c) 0px, var(--main-c) 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);background-size: 8px 8px;} .heading-h3 {position: relative;padding:0 2% 2%;margin-bottom:3%;font-size:21rem;} .heading-h3::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 8px;background-image: repeating-linear-gradient(45deg, var(--main-c) 0px, var(--main-c) 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);background-size: 8px 8px;} /* ---目次-ー---------------------------------------------------------------------------------- ----------------------------------------------------------------*/ /*inputを非表示 & 閉じた時の位置調整*/ .open-box{position: relative;margin:7% 0;width:100%;max-width:650px;border:1px solid var(--main-c);width:100%;float:left; clear: both;} input[type="checkbox"].on-off{position: absolute;bottom: 0;display: block;opacity: 0;} /*ラベル（「開く」ボタン）*/ .open-label{margin:0;padding:0.8em 0;display:block;color:#FFF;font-weight: bold;text-align: center;background:var(--main-c);position: relative;} /*ボタンっぽい効果*/ .open-label:active{box-shadow:0;} .open-label:hover{background:#333;color: #FFF;} /*ラベルに表示するテキスト*/ .open-label::after{content:'目次を閉じる ▲';} .on-off:checked ~ .open-label::after{content: '目次を開く ▼';} /*開閉エリア*/ .open{padding:0 0.01% 2%;overflow: hidden;transition: 0.25s;position: relative;height:auto;/*ちらっと見える部分の高さ*/} .on-off:checked ~ .open{padding:0 0.01% 0;height:0;} /*開閉エリアにぼかしを乗せる .open::before{content:'';background: linear-gradient(to bottom, transparent,rgba(255,255,255,1)100%);position: absolute;top:50%;left:0;right:0;bottom:0;z-index: 3;}*/ /*開いたらぼかしを消す*/ .on-off:checked ~ .open::before{background: none;z-index: -1;} .toc-005 {background:#FFF;} .toc-005 div {display: flex;justify-content: center;align-items: center;margin: 0;padding:10px 2% 2%;margin-bottom: 2%; background:var(--main-c);color: #FFF;font-weight: 600;font-size:21rem;} .toc-005 div::before {display: inline-block;width: 1em;height: 1em;margin-right: 5px;color:#FFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%22222'%3E%3C/path%3E%3C/svg%3E"); filter:invert(99%) sepia(0%) saturate(2%) hue-rotate(217deg) brightness(116%) contrast(100%); content: ''; } .toc-005 label::after {margin-left: 7px;font-weight: 500;font-size: .7em;color: #000;content: "[閉じる]";cursor: pointer;} .toc-005:has(:checked) label::after {content: "[開く]";} .toc-005 input {display: none;} .toc-005 ol {list-style-type:none;margin: 0;overflow: hidden;} .toc-005 > ol {height: auto;padding:0 3% 0 2%;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;} .toc-005:has(:checked) > ol {height: 0;padding:0 3%;/*閉じる*/} .toc-005 > ol > li{position: relative;padding:0 2% 0 5%;font-size:18rem;font-weight:700;/*margin-bottom:1%;border-bottom:3px solid var(--main-c);*/} .toc-005 > ol > li:before {font-family: "Font Awesome 5 Free";content: "\f303";position: absolute;left:1%;top: 0;color: var(--main-c);} .toc-005 ol ol {margin-bottom:2px;padding-left:3%;} .toc-005 li {padding:2px 0 0;font-weight:700;} .toc-005 ol ol li {font-weight:700;font-size:16rem;} /*.toc-005 ol ol li span{border:solid 1px #CCC;background:#fcfcfc; font-size:14rem;font-weight:500;margin:1% 0 5%;padding:3% 3%;width:100%;float:left;clear:both;line-height:130%;}*/ .toc-005 a {color:var(--main-c);text-decoration:underline;} .toc-005 a:hover{color:var(--main-c);/*opacity:0.5;filter:alpha(opacity=50);-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;*/} /* マウスオーバー時の変化 */ .toc-005 a:hover {background: var(--main-c);border: var(--main-c);color: #fff;} .toc-005 a:hover:after {border: #fff;right: 15px;} /*----------------------------------お客様の声-voice--シングル---------------------------------- ------------------------------------------------------------------------------------------------- */ .vo-topimg{width:100%;float:left; clear: both;display:flex;} .vti_item01{width:80%;padding-right:0.5%; } .vti_box{width:20%;display:flex;flex-wrap: wrap;align-content:space-between; } .vti_box div{width:100%;float:left;padding:0 1%;} .su-toptit{width:100%;float:left; clear: both;display:flex;align-items:center;} .su-toptit div:last-child{width:60%;padding:0 2%;} .su-toptit h2{text-align: left;font-size:32rem;font-weight: bold;} .survey-t-sbox{width:100%;float:left; clear: both;padding:10% 0; } .surv-box{width:100%;float:left; clear: both;padding:10% 0;} .su-toptit{width:100%;float:left; clear: both;text-align: center;border-bottom: solid 10px var(--main-c);position: relative;} .su-toptit:after {position: absolute;content: " ";display: block;border-bottom: solid 10px var(--main-c);bottom: -10px;width: 20%;} .su-toptit-box{width:40%;float:left; clear: both;display:flex;align-items:center;justify-content:center;padding:1% 2%;} .survey-tit{width:60%;float:left; clear: both;} .su-toptit-box span:last-child{text-align: left;line-height:100%;font-size: 24rem;} /*-----------------アイキャッチ画像ナシ----*/ .survey-tno-sbox{width:100%;float:left; clear: both;padding:0 0 15%;} .survey-tno-sbox .surv-box{width:100%;float:left; clear: both;padding:5% 0 10%;} .thum-cont{width:100%;float:left; clear: both;padding:0 0 15%;display:flex; justify-content:space-between;} .thum-cont .fq-box{width:70%;} .thum-cont .thum-box{width:29%;} .thum-cont .thum-box img{width:100%;} /*-----------------アイキャッチ画像ナシ----*/ #nextback2 {font-size:16rem;text-align:center;clear:both;float:left;width:100%;margin:80px 0 40px;} #nextback2 span{padding:0 2%; } #nextback2 span a{color:var(--main-c);} .star-siz{font-size:32rem;} .star5_rating{font-size:42rem; position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: #CCCCCC; /* グレーカラー 自由に設定化 */ /*font-size: 30px; フォントサイズ 自由に設定化 */ } .star5_rating:before, .star5_rating:after{ content: '★★★★★'; } .star5_rating:after{ position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #ffcf32; /* イエローカラー 自由に設定化 */ } .star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */ .star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */ .star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */ .star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */ .star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */ .star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */ .star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */ .star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */ .star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */ .star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */ .star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */ .imabox{padding:2% 20% 7%;} /*----------------------------------お問い合わせ-------------------------------------- ------------------------------------------------------------------------------------------------- */ .cnta{float:left;clear:both;width:100%;padding:5%;} .sbu-cot{float:left;clear:both;width:100%;padding:5% 0;text-align: center;} .outline-list {padding:0 0;clear:both;float:left;width:100%;} .outline-list li{float:left;clear:both;width:100%;padding:0;border-bottom:1px dashed var(--main-c);display:flex;justify-content:space-around;align-items:center;} .outline-list li p{float:left;clear:both;width:100%;padding:0;display:flex;justify-content:space-around;align-items:center;} .outline-list li:last-child{border-bottom:none;} .outline-list li span{} .outline-list li .outline-name{padding:3% 0;width:35%;text-align:center;} .outline-list li .outline-come{width:65%;padding:3% 0 3% 5%;} .outline-submit {width:30%;clear:both;float:right;padding:0 0;} .outline-submit input[type=submit]{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border:none;width:100%;clear:both;float:right;height:50px;cursor:pointer;font-size:18rem;background:var(--main-c);color:#FFF;} .wpcf7-form input[type=text] {width:100%;border: 1px solid var(--main-c);border-radius: 4px;outline: none;padding: 1%;} .wpcf7-form input[type=email] {width: 100%;border: 1px solid var(--main-c);border-radius: 4px;outline: none;padding: 1%;} .wpcf7-form textarea {width: 100%;border: 1px solid var(--main-c);border-radius: 4px;outline: none;padding:1%;} .wpcf7-form input{width:100% !important;font-size:18rem;} /*名前orメールor題名*/ .wpcf7-form textarea{width:100% !important;font-size:18rem;} /*本文*/ .wpcf7-form .wpcf7-submit{width:100px !important;} /*送信ボタン*/ /*----------------------footer------------------------------------------------- ------------------------------------------------------------------------------------*/ .ins-tit{float:left;clear:both;width: 100%;text-align: center;margin-bottom: 5%;} .ins-tit img{width: 100%; max-width: 250px;} #foot-list{background:var(--foot-back);} .foot-content{float:left;clear:both;width: 100%;display: flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap;padding-bottom: 10%;} .fc-box{width:48%;padding: 2%;border-bottom: 1px solid #666;border-right: 1px solid #999;margin:2% 0; } .fc-box h5{font-weight: bold;font-size: 24rem;padding: 0.8rem 0;margin-bottom: 0.2rem;background-image: linear-gradient(90deg, var(--main-c) 0 20%, var(--sub-c) 20%);background-repeat: no-repeat;background-size: 100% 10%;background-position: bottom;} .foot-list{float:left;clear:both;width: 100%;padding:2% 7%;list-style:disc;word-break: break-all;} .foot-list li a{font-size:14rem;} #foot-list{padding-bottom: 0;} .foco-navi-box{float:left;clear:both;width: 100%;font-size:14rem; } .foco-navi{clear:both;width: 100%;max-width: 1200px;margin:0 auto;} .foco-navi-tit{background:var(--main-c);color: #FFF;float:left;clear:both;padding:2px 1%;} .foco-back{float:left;clear:both;width: 100%;background:var(--main-c);margin-bottom: 1px;} .foco-navi #menu-footer-navi{background:var(--main-c);float:left;clear:both;width: 100%;} .foco-navi #menu-footer-navi li{float:left;padding:10px 0 10px 10px;} .foco-navi #menu-footer-navi li:before {content: "/";color: #FFF;margin-right: 10px;} .foco-navi #menu-footer-navi li:first-child:before {content: "　";} .foco-navi #menu-footer-navi li a{color: #FFF;font-size:16rem;} .foot-cont{margin: 0 auto;clear:both;width:100%;max-width: 1200px; padding:0;} .foot-cont-box{float:left;clear:both;width:100%;padding:0;display:flex;} .foot-logo{float:left;clear:both;width:45%;padding:1% 1%;} .foolo-img{float:left;clear:both;width: 100%;text-align: center} .foolo-img img{height:50px; width:auto;} .foolo-com{float:left;clear:both;width: 100%;color:var(--font-color);font-size: 12rem;letter-spacing:-0.05em;padding:2% 0;} .foot-navi-cont{padding:1% 1% 0;width:60%;background:var(--main-c);} .adfon{float:left;clear:both;width:100%;padding:0;display: flex;align-items: center;} .adfon span{float:left;padding:0 1% 0;color:var(--font-color);} .adfon span:first-child{background:var(--main-c);color: #FFF;padding:2px 1%;font-weight: bold;} .adfon-fax{letter-spacing:normal;} address{float:left;clear:both;width:100%;padding:10px 0;font-size:12rem;text-align: center;font-weight:200;letter-spacing:0.2rem;background:var(--main-c);margin:0 0;color: #FFF;} .bottom-menu{display:none;} /*----------------------------------Map-------------------------------------- ------------------------------------------------------------------------------------------------- */ .map {float:left;width:100%;padding:0;margin:0;} .acf-map {width:100%;clear:both;float:left;height:450px;margin:0;padding:0;} /*----------------------topへ戻る------------------------------------------------- ------------------------------------------------------------------------------------*/ a.gotop{display: block;width: 60px;height: 60px;box-sizing: border-box;background:var(--main-c);/*border: 1px solid var(--sub-c);*/padding-top: 30px;text-align: center;letter-spacing: -1px;font-size: 85%;text-decoration: none;color: #FFF;opacity: 0.5;filter:alpha(opacity=50);position: fixed;bottom: 20px;right: 20px;z-index: 10000;} a.gotop::before{content: "";display: block;border-top: 2px solid #FFF;border-right: 2px solid #FFF;width: 25%;height: 25%;top: 25%;left: 0;right: 0;margin: auto;position: absolute;transform: rotate(-45deg);} a.gotop:hover{opacity: 1;filter:alpha(opacity=100);} /*--アニメーション設定 -------セクション--/js/dtp/effect.js---------------------*/ /*---------------------------- scroll_up ｜下から上へ出現 -------------------------- .scroll_up { transition: 0.8s ease-in-out; transform: translateY(30px); 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(-30px); 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(30px); 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); } /*---effect.js-終了---------*/ /*---.timing02で0.2秒遅れ---------*/ .timing02 {transition-delay: .2s;} .timing03 {transition-delay: .4s;} .timing04 {transition-delay: .6s;} .timing05 {transition-delay: .8s;} /* .sect-set .triangle:nth-child(odd) .slidein, .sect-set .triangle:nth-child(even) .slidein, */ .slidein_up.is-animated {animation: slidein_up 2s ease-in;} .slidein.is-animated {animation: slideinLeft 2s ease-in;} .sect-set .triangle:nth-child(even) .slidein.is-animated{animation:slideinRight 2s ease-in;} .sect-set .triangle .more-link.is-animated{animation: slideinRight 2.5s ease-in;} .sect-set .triangle:nth-child(even) .more-link.is-animated{animation:slideinLeft 2.5s ease-in;} .slideinleft{animation: slideinLeft 2s ease-in;} .slideinright{animation:slideinRight 2s ease-in;} @keyframes slidein_up { 0% {opacity: 0; transform: translateY(30px); } 20% {opacity: 0; } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideinLeft { 0% {opacity: 0; transform: translateX(-1200px); } 20% {opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideinRight{ 0% {opacity: 0; transform: translateX(1200px); } 20% {opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @media only screen and (max-width:1400px) { .lun-box50{width:100%;max-width:1000px;margin:0 auto;float: none;} } @media only screen and (max-width:1680px) { html{font-size:5.50%;} .m-list01 .m-list-box{float:left;padding:2%;width:33.33%;display: table-cell;} } @media only screen and (max-width:800px) { html{font-size:5.50%;} .box70,.box60,.box50,.box40,.box33,.box35,.box30,.box25,.box45,.box55,.box15,.box85,.box80,.box20{width:100%;} .sl-box50,.me-box50,.probox40,.probox60,.me-img .me-logo,.me-img .me-tei,.outline-list li .outline-name,.outline-list li .outline-come{width:100%;} .in-img{display: none;} .triangle .skewed {padding:15% 0;} div.smart-panbox{padding:15% 0 10%;} .gbw-box{padding-bottom:20px;} .gbw-tit{display:flex;flex-wrap:wrap-reverse;justify-content:center;padding-bottom:5%;} .gbw-tit div{width:80%;} .gbw-tit div:last-child{width:80%;} .smart-txt{display:flex;align-items:flex-end;justify-content:center;} .gbw-tit div span{line-height:90%;float: left;font-size:16rem;padding:0 1% 10px;} .gbw-tit div .ssti-01{font-size:20rem;font-weight: bolder;clear:none;width:auto;} .gbw-tit div .ssti-03{font-size:14rem;} /* .gall-box-works{padding:15% 0 0;} .smart-panbox{padding:10% 0 15%;clear:both;float:left;width:100%;} .gbw-box{max-width: 1200px;width:100%;margin:0 auto;} .gbw-tit-voice{clear: both;float: left;width: 100%;display: flex;align-items:center;flex-direction:row; } .ssti-box{text-align:left;} .smart-disp{display: flex;flex-direction:row-reverse;} div.smart-panbox{padding:7% 0;} .gbw-box{max-width: 1200px;width:100%;margin:0 auto;padding-bottom:6%;} .gbw-tit{clear: both;float: left;width: 100%;display: flex;align-items: flex-end;justify-content:flex-end;} .gbw-tit div{width:40%;float: left;} .gbw-tit div:last-child{width:30%;float: left;color: #FFF;font-size:24rem;padding:0 1%; } .gbw-tit div span{line-height:90%;} .gbw-tit div .ssti-01{font-size:28rem;font-weight: bolder; clear: both;float: left;width: 100%;} .gbw-tit div .ssti-03{font-size:14rem;} */ /*.triangle:first-child{border: solid 0 var(--bo-c);background-color:#FFF;border-bottom:none;}*/ .sec-tit-img{padding:0 0;font-size:24rem;letter-spacing:0.1rem;} .me-box50{padding:5% 0;} .info-tit{font-size:24rem;letter-spacing:0;line-height:125%;} .pro-box,.box-tb,.me-img,.me-img span,.outline-list li,.outline-list li span{display:block;} .me-img .me-logo{padding:3% 0;} .prosub-img{float:left;clear:both;width:50%;background-color:var(--main-c);margin:8% 0 2%;} address{font-size:10rem;letter-spacing:0.1rem;} .title {font-size:24rem;} .cs-box{display: block;float:left;clear:both;width:100%;} .cs50{width:100%;height: 50vh;float:left;text-align: center;padding:0 5%;} .top-open{height: 50vh;display: grid;place-items: center;} .fullcs-img{width:100%;padding:5% 15%; text-align: center;float:left;clear:both;} .h-box{padding:0;clear:both;float:left;width:100%;-ms-writing-mode:horizontal-tb;writing-mode:horizontal-tb;} .conce-tit{font-size:18rem;padding:0 5% 0 5%; text-align: center; } .conce-com{font-size:16rem; line-height:125%;padding:5% 5%;letter-spacing:0.25rem; } .sec-tit{float:left;clear:both;width: 100%;padding-left:0; } .sec-tit-txt {font-size:21rem;;} .abcn-box .aox-cont{float:left;clear:both;width:100%;padding:1%; } .ab-staff li span{float:left;clear:both;width:100%;} .st-list-img{float:left;} .st-list-tit{padding:3% 3% 0;font-size:24rem;} .st-list-yomi{padding:0 3%;font-size:24rem;} .st-list-com{padding:2% 3%;} .slider-in{display: none;} .sys-box .sys-cont{float:left;width:100%;padding:0 0 ; } .sys-cont img{clear:both;float:left;width:100%;padding:0 0 15%;} .top-tith{padding:5% 1% 10%;} .top-tith span{float:left;clear: both;width: 100%;} .head-cont .head-cont-com{display:block;vertical-align:middle;} .head-cont .head-cont-com:first-child{width:100%;} .head-cont .head-cont-com:last-child{width:100%;} .header-logo {width:100%;display: none;} .header-logo a{padding:5%;} .header-logo a img{width:70%;} .info-lunch .info-lunch-img{float:left;width:100%;} .info-lunch .info-lunch-box{float:left;width:100%;} .cat-list li .more-txt{idth:50%;padding:0;} .menu-tit-list li {width: 50%; } .menu-tit-list li .mt-tit{font-size:14rem; } .multiple-item5 li{padding:0 1% 5%;} .res-list{overflow: auto;white-space: nowrap;} .res-list li{white-space: nowrap;width:650px;} .res-list li .name{width:40%;} .res-list li .com{width:18%;text-align:center;} .res-list li .data{width:17%;text-align:center;} .res-list li .time{width:25%;} .sl-titsl{float:left;clear:both;padding:3% 5% 7%;width:100%;max-width:100%;margin:0;} .more-link{margin:5% 0; padding:5px;width:30%;background:var(--main-c);display: block;} /*ナビ*/ .navi-top{position:fixed;top: 0;left:0;z-index:10;clear:both;float:left;width: 100%;margin:0 0;background:var(--navi);border-bottom: solid #FFF 1px;display: block;} .navi-top{clear:both;float:left;width:100%;margin:0 0;background-color:#FFF;border-bottom:solid #FFF 1px;display:block;} .header{display:flex;justify-content:center;align-items:center;padding:0 5px;background:var(--navi);position:relative;border-bottom:solid 1px #333;} /*　ハンバーガーメニューボタン　*/ .smart-navi{clear:both;float:left;width:100%;background:var(--navi);display: block;position:fixed;z-index :9999;border-bottom: 1px solid #63A5DA;} #maincon-s{margin-top:88px;}.sect-set{padding-top:88px; } .smart-navi .logo{width:77%;padding:0;} .smna-info{display: flex;flex-wrap: wrap; justify-content:space-around;} .smna-info div{width: 25%; padding:5px 0;text-align: center;border-top: 1px solid #63A5DA;border-right: 1px solid #63A5DA;} .smna-info div a{display: block;} .smna-info div img{height:30px;} .smna-info div:nth-child(1){width:100%;border-top:none;} .smna-info div:nth-child(1) img{/*width:100%;height: auto;*/height:35px;padding: 3px 10%;} .hamburger { display : block; position: fixed; z-index : 3; right : 20px; top : 15px; width : 42px; height: 42px; cursor: pointer; /*text-align: center;*/ } .hamburger span { display : block; position: absolute; width : 30px; height : 2px ; left : 6px; background : #63A5DA; -webkit-transition: 0.3s ease-in-out; -moz-transition : 0.3s ease-in-out; transition : 0.3s ease-in-out; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* スマホメニューを開いてる時のボタン */ .hamburger.active span:nth-child(1) { top : 16px; left: 6px; background :#63A5DA; -webkit-transform: rotate(-45deg); -moz-transform : rotate(-45deg); transform : rotate(-45deg); } .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) { top: 16px; background :#63A5DA; -webkit-transform: rotate(45deg); -moz-transform : rotate(45deg); transform : rotate(45deg); } /* メニュー背景　*/ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color:#FFF; background:rgba(255,255,255,0.95); text-align: center; width: 100%; transform: translateX(100%); transition: all 0.6s; } nav.globalMenuSp ul { margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { list-style-type: none;border-bottom: 1px solid #63A5DA; padding: 0; width: 100%; transition: .4s all; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; } nav.globalMenuSp ul li:hover{ background :var(--main-c); } nav.globalMenuSp ul li a { display: block; color:var(--navi-font); padding: 4% 0; text-decoration :none; font-size: 16rem; } nav.globalMenuSp ul li a:hover{ color:#FFF; } /* クリックでjQueryで追加・削除 */ nav.globalMenuSp.active { opacity: 100; display: block; transform: translateX(0%); } .sa-cont{display:block;flex-direction:row-reverse;justify-content:space-around; background-image: url(svg/parts-19.svg); background-repeat: no-repeat; background-position: bottom right; background-size: auto 50%;} .sa-img{width:100%;} .sa-com{width:100%;font-size:18rem;line-height: 135%;padding:5% 2%;} .menu-cont{display:block;} .menu-cont li{width:100%;clear:both;float:left;padding:5% 2% 10%;} .menu-img{width:40%;float:right; clear: both;padding:1% 2%;} .ab-cont{width:100%;float:left; clear: both;display:block;} .ab-cont .ab-img{width:100%;} .ab-cont .ab-com{width:100%;float:left; clear: both;padding:10% 2%;} .ite-cont{width:100%;float:left; clear: both;display:block;} .ite-cont .ite-img{width: 100%;} .ite-cont .ite-com{width: 100%;margin-bottom: 10%;} .blog-list li{flex-wrap:wrap;padding:5% 0;} .blist-cat{width:30%;} .blog-list li .blist-cat a{width:100%;padding:5% 2% ;clear: both;float:left;text-align: center;} .blist-data{width:70%;text-align: center;} .blist-tit{width:100%;clear: both;float:left;padding:5% 2%;} .outline-list li p{float:left;clear:both;width:100%;padding:0;display:flex;justify-content:space-around;align-items:center;flex-wrap: wrap;} .outline-list li .outline-name{padding:5% 0;width:100%;text-align:center;font-weight:300;} .outline-list li .outline-come{width:100%;padding:0 0 10%;} .sns-list li{width: 275px;max-width:30%;} .cat-list{display:flex;justify-content:space-evenly;flex-direction: row;flex-wrap:wrap;padding:5% 0; } .cat-list li{width:48% !important; } .news-list-day{float:left;width:60%; } .cat-list-cat {float:left;width:35%;} .cat-list-com{line-height: 125%;font-size:14rem;margin-bottom:20px;} .cat-list li .more-txt{width:100%;display: none;} .page-top-img{margin:40px auto 0;width:100%;} .blog-cont{padding:3%; } .foot-logo-img{width:30%;} .foot-logo-tit{width:70%;} .lun-box50{width:100%;clear:both;float:left;padding:0 0 20%;} .etc-com,.sec-com,.sec-tit-sub{padding: 2%;} .list-box{padding:8% 0;} .list-box .box30{width:30%;} .list-box .box70{width:70%;float: right;} .me-tit{font-size:21rem;font-weight:400;} /*#maincon-s {overflow:hidden;}*/ input{-webkit-appearance: none;border-radius: 0;} .news-list-cat{width:40%;} .news-list-data{width:50%;text-align: left;padding:1% 10%;} .news-list-tit{width:100%;clear:both;float:left;padding:3%;} .content-in-bc{padding:5% 1%;} /*home*/ .cont3-box{padding:1% 1%;} .mtit-cont h2{font-size:28rem;} .cont3-box p{font-size:8rem;} .m-tit-com{font-size:18rem;letter-spacing:0.5rem;} .cot2-box{margin:0 0;width:100%;float:left;clear: both;display:block;} .c2b-box{width:100%;margin:0 0 100px;} .page-tit-txt{font-size:28rem;} .page-cont-box .pcb{float:left;clear: both;width:100%; height:auto;padding:5% 0;} .page-cont-box {padding:10% 0;} .m-list01{float:left;clear: both;width: 100%;} .m-list01 .m-list-box{padding:5% 2%;width:50%;} .top-vision-box{width: 33%;padding:0 1%;} .sl-tit{font-size:24rem;padding:10% 1%;width:100%;} .slm-tit{width:100%;font-size:24rem;padding:5% 5% 4% 10%;} /*sns*/ .hdnvpc,.sns-code{display: none;} .f-ban{clear:both;width:100%;display: block;} .f-ban li{float:left;width:50%;padding:1%;} .f-ban li a{float:left;clear:both;width: 100%;background-color:var(--main-c);border: 1px solid var(--main-c);} .shop-tel span:last-child{text-align:left;font-size:42rem;font-weight: bold;} /*menu*/ .menu-cat-list li{float:left;width:100%;text-align: right;margin-bottom:10px;} .sho-top-tit a{display: block;padding:1% 2%;background-color:var(--main-c);} .sho-cont-box li{float:left;width:50%;padding:0 1% 1%;} .lu-box .lu-box-cont {float:left;width:100%;padding:10px 1%;} .bi-box-contL,.bi-box-contR{width:100%;margin-bottom:120px; } .imabox{padding:2% 2% 7%;} /*-----施工実績-works----------------------------home--*/ .workslist{justify-content:space-between;} .wl-box{margin: 0;width:50%;max-width:48%;padding:1% 0 2%;} .top-workslist{clear:both;text-align: center;width: 100%; display: grid;grid-template-columns:50% 50%;border:5px solid #000;} .twl-box:first-child{grid-column: 1 / 3;grid-row: 1 / 3;} .wl-item-tit{padding:3% 3% 10%;} .wl-box-tit,.ba-info-list span:nth-child(2){font-size:14rem;line-height: 110%;} .wl-box-day{font-size:10rem;} #menuitems-gallery-works .item,#menuitems-gallery-voice .item{ margin:0 5px;} #menuitems-gallery-works .wl-item-tit,#menuitems-gallery-voice .wl-item-tit,.wl-box-cat{left:5px;} .top-tith-f{width:40%;font-size:26rem;} /*---------施工実績-Works--一覧----------------- */ .wrok-ba{ justify-content:space-between;} .wrok-ba-box{width:100%;max-width:100%;margin: 0 0 30px;padding: 0 0 30px;border-bottom: dashed 1px #CCC;} .wrok-ba-box.topworks{border-bottom:none;} .ba-info-list{padding:1% 2%;} /*---------施工実績-Works--シングル----------------- */ .bi-box{width:80%;} .bi-box .bi-img img{border:10px solid #FFF;} .b-ya{width:20%;} .wab-back{width:100%;clear:both;float:left;background:var(--main-c);padding:1%;} .ws-aa-box{display: flex;flex-direction:row;flex-wrap: wrap;} .ai-box{width:100%;} .ai-box .ai-img img{border:15px solid #FFF;box-shadow: 0px 0px 15px -5px #222;border-radius: 10px;} .ws-com{width:100%;border:5px dotted #FFF;margin:10% 0; } /*----------お客様の声-voice--シングル-------------*/ .vo-topimg{width:100%;float:left; clear: both;display:block;} .vti_item01{width:100%;padding-right:0.5%; } .vti_box{width:100%;display:flex;flex-wrap: wrap;align-content:space-between;justify-content:space-between;} .vti_box div{width:49%;padding:1% 0;} .su-toptit{width:100%;float:left; clear: both;display:flex;align-items:center;} .su-toptit div:last-child{width:60%;padding:0 2%;} .su-toptit h2{text-align: left;font-size:32rem;font-weight: bold;} .survey-t-sbox{width:100%;float:left; clear: both;padding:10% 0; } .surv-box{width:100%;float:left; clear: both;padding:10% 0; } .su-toptit{width:100%;} .su-toptit-box{width:40%;flex-wrap:wrap-reverse; padding:1% 1%;} .survey-tit{width:100%;} .su-toptit-box span:last-child{font-size:18rem;} /*---------------------------------施工の流れ-FLOW----------------------------------*/ .flow-box{flex-wrap:wrap-reverse; align-items:flex-end;} .flow-box div:nth-child(1){width:100%;} .flow-box div:nth-child(1) img{width:40%;padding: 10% 0;} .flow-box div:nth-child(2){width:100%;} .flow-list{width:100%;float:left; clear: both;display: flex;flex-wrap:wrap;} .flow-list li{width:100%;} .flow-list li span{width:100%;} .pl-box{margin-bottom:15%;} .pl-list{display: flex;align-items:center;flex-wrap:wrap;padding:10% 0 0; } .pl-list div:nth-child(1){width:100%;text-align:center;padding:10% 0 2%;} /*.pl-list div:nth-child(1) img{width:auto;height: 50px;}*/ .pl-list div:nth-child(2){width:100%;} .pl-list div span{width:100%;float:left; clear: both;padding:0 2% 1%;text-align: center;} .pl-list div span:nth-child(1){font-size:21rem;} .pl-list div span:nth-child(2){font-size:14rem;line-height: 120%;} .pricecard{background: #FFF;flex: 0 0 90%;} .plan-price02{padding:0 0;margin: 0 0 1%;} .plan-box-pand{width:100%;float:left; clear: both;padding:2% 4% 5%;} .pricecard.premium .plan-price02{margin:0;} .main-com{width:100%;float:left;clear:both;padding:0 2%;font-size: 14rem;} .fpcb-img{width:15%;padding:2%;} /*.wl-box{width:48%;max-width: 48%;margin: 1%;}*/ .c-boxitem{width:46%;margin:5% 2%; } /*.fq-cont .fpcb-com{line-height:130%;} */ /*-----------------------固定ページ-about--------------------*/ .mp-box{width:100%;float:left; clear: both;display: flex;flex-wrap:wrap;align-items: center;padding:10% 0; } .mp-tit{width:100%;text-align: center;font-size:24rem;font-weight:bold;} .content-in-cha {width:90%;float:right;margin:5%; padding:2%;background:rgba(255,255,255,0.7);} /*---------------------------------固定ページ--親サービス共通----------------------------------*/ .sev-list{width:100%;float:left;clear: both;display: flex;justify-content:center;flex-wrap: wrap;} .sev-list li{width:98%;padding:5% 0 0;} /*------------お客様の声-----アイキャッチ画像ナシ----*/ .thum-cont{flex-wrap: wrap;justify-content:center;} .thum-cont .fq-box{width:100%;} .thum-cont .thum-box{width:50%;} .thum-cont .thum-box img{width:100%; } /*-----------------アイキャッチ画像ナシ----*/ /*------------------サービス-子--------------------*/ .sli-tit {font-size:18rem;padding: 2% 2% 2% 50px;} .sli-tit:before {width: 140px;} .sli-tit span {font-size:24rem;padding-top:1%;padding-left:2%;} /*フッター*/ .fc-box{width:100%;} .foco-navi-box{display: none;} #foot-list{padding-bottom: 0;} .foco-navi-tit{padding:2px 2%;} .foco-navi #menu-footer-navi{display: flex;justify-content:space-around;flex-wrap: wrap;} #menu-footer-navi li{width:25%;text-align: center;font-size:14rem;border-top: 1px solid #FFF;border-right:1px solid #FFF;} #menu-footer-navi li:nth-child(4n){border-right:0 none #FFF;} #menu-footer-navi a{float:left;clear:both;width: 100%;color: #FFF;padding:5px 0;} .foot-cont{float:left;clear:both;width:100%;padding:0 0 0;} .foot-cont-box{float:left;clear:both;width:100%;padding:0;display:flex;flex-wrap: wrap;} .foot-logo{border-bottom:none ;width:100%;} .foolo-com{font-size:14rem;letter-spacing:-0.05em;padding:2% 0;} .foot-navi-cont{padding:1% 1% 0;width:100%} .foot-navi-tit{font-size:16rem;letter-spacing:0.05rem;} .global-conta{clear:both;float:left;width:100%;} .gc-tit{width:100%;font-size:18rem;} .gc-tit span{font-size:28rem;} .gc-box{clear:both;float:left;width:100%;display:flex;flex-wrap:wrap;align-items: center;justify-content:space-between;margin-bottom: 5px;background:#FFF;} .gc-tel{width:100%;text-align: center;} .gc-tel p{clear:both;float:left;width:100%;padding:2% 1%;border-bottom: solid 3px var(--main-c);} .tel-etc{clear:both;float:left;width:100%;padding:1%; mcolor:var(--main-c);font-size:16rem;display:flex;flex-wrap:nowrap;align-items:stretch; justify-content:space-around;} .tel-etc span{padding:0 1%;color:var(--main-c);letter-spacing:-0.01em;align-self: stretch;} .tel-etc .tel-etc-tit{width:35%;background:var(--main-c);color: #FFF;} .gc-conta{width:100%;background: #FFF;padding:1%;border-left: solid 0px var(--main-c);} .gc-conta .gcc-box{clear:both;float:left;width:100%;display:flex;flex-wrap:wrap;align-items:center;} .gc-form{width:100%;padding:10% 10%;} .adfon{float:left;clear:both;width:100%;padding:2% 0;display: flex;align-items: center;flex-wrap:wrap;} .adfon span{float:left;clear:both;width:100%;padding:0 1% 0;color:var(--font-color);line-height:120%;} .adfon span:first-child{text-align: center;} .adfon span:nth-child(2){padding-top:2%;} /* .foot-navi-cont ul{float:left;clear:both;width:100%;padding:0 1%;} .foot-navi-cont ul li{float:left;padding:0 1% 0;} .foot-navi-cont ul li:after {content: "　/"; } .foot-navi-cont ul li:last-child:after {content: ""; } .foot-com{float:left;clear:both;width:100%;padding:2% 2% 0;font-size:16rem;letter-spacing:0.05rem;} .fo-box{float:left;clear:both;width:100%;padding:0;display:block;} .fo-box div:first-child{width:100%;float:left;clear:both;} .fo-box div:last-child{width:100%;float:left;clear:both;} */ address{float:left;clear:both;width:100%;padding:15px 0;font-size:12rem;text-align: center;font-weight:200;letter-spacing:0.05rem;background:var(--main-c);margin:0 0;color: #FFF;} /* .foot-cont{padding:60px 0 40px;} .foot-logo{display: none;} .foot-cont-box{float:left;width:100%;padding:0 5%;} .foot-cont-box .box50{padding:0 0 10%;} .box33{padding:0 0 15%;float:left;clear:both;width:100%;} .ban-list li{float:left;width:50%;padding:3% 2%;} .foot-navi-cont{float:left;width:50%;padding:0 1% 5%;} .more-txt a,.serv-cont .serv-cont-in a,.se-more-txt a,.se-cosec-img,.flow-con-img img,.ban-list li img{padding:2% 5%; } .cont-tit{font-size:48rem;text-align:left;} #brs{float:left;clear:both;width: 100%;display: block;text-align:left;} #brs .tit-b-cont{padding:0 5px;} #brs .cont-tit{font-size:48rem;text-align:left;} } */ footer { position: fixed; bottom: 0; left: 0; overflow: hidden; width: 100%; z-index: 2; } .footer-box{float:left;clear:both;width: 100%;padding:15%;background:var(--main-c);} /*======================== 　smartphone　bottom menu 　========================*/ .mini-text{font-size:10rem;}/*文字大きさ*/ ul.bottom-menu { position: fixed; left:0; bottom:0; width: 100%; /*height:45px;高さ*/ margin:0; padding:0; background-color:#f5f5f5;/*背景色*/ border-top:2px solid #808080;/*バーの上の線*/ border-bottom:2px solid #808080;/*バーの下の線*/ z-index:30;} ul.bottom-menu li { float:left; width:20%; background-color:rgba(255,255,255,0.9);/*背景色*/ list-style-type:none; text-align:center;} .bottom-menu li a { display: block; color:var(--main-c);/*アイコン＆文字の色*/ padding:5% 0; line-height:10px; text-decoration:none;} .bottom-menu li a img{height:auto; width:20%; } .bottom-menu li a:hover { color:#a9a9a9;/*マウスオーバー時の色*/} .bottom-menu i{font-size:28rem;} /* === 展開メニュー === */ ul#menu-smart-footer { visibility: hidden; opacity: 0; z-index:1;} ul#menu-smart-footer li{float:left;clear:both;width: 100%;border-top:1px solid var(--main-c);} ul#menu-smart-footer li a{color:var(--main-c);border-top:1px solid var(--main-c); /*border-top:1px dashed #a9a9a9;*/ font-size:14rem; line-height:10px;text-align:left;padding: 2%; } ul#menu-smart-footer li ul li {float:left;clear:both;width: 100%;padding:0 0 0 2%;} ul#menu-smart-footer li ul li a{border-top:1px dashed var(--main-c);} .menu-width-max .menu li{list-style-type: square !important;} #menu-smart-footer li a:hover { height:100%; background:var(--main-c); color: #FFF;} li.menu-width-max ul#menu-smart-footer { position: absolute; bottom: 47px;/*高さ*/ left: 0; box-sizing: border-box; width: 100%; padding:0;} li.menu-width-max:hover ul#menu-smart-footer { bottom: 47px;/*高さ*/ visibility: visible; opacity: 1;} li.menu-width-max ul#menu-smart-footer li { float: left; width: 100%; border: none;} #footer{margin-bottom:48px;} a.gotop{display: none;} /*PC表示の際はボトムメニューは表示しない*/ @media(min-width: 768px){ .bottom-menu{display:none; } } @media(max-width:750px){ /*.gotop{width: 40px;height: 40px;text-indent: -9999px;opacity: 1;border: none;background: none;bottom: 10px;right: 10px;} .gotop::before{bottom: 0;}*/ } /* 印刷時調整 ------------------------------- */ @media print { header#minHeader, #body p.pagetop {display:none !important;} .header-home {display:none;} }