img{ border:none; vertical-align:bottom; image-rendering: -webkit-optimize-contrast;} .clear{ clear:both; height:0;} .center{ text-align:center;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0;} html{ overflow: auto;} body{ min-width: 1200px; overflow: hidden; margin:0 auto; padding:0; font-family: "Noto Sans Japanese"; text-transform: none !important;} a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all .5s; outline: none;} /* IE8+, Chrome */ a{ outline: 0;} /* Firefox */ a::-moz-focus-inner, a::-moz-focus-inner { border: 0;} #container{ width: 100%; min-width: 1200px; margin: 0 auto; color: #333; font-size: 16px;} /*--- top pages ---*/ #mainArea{ width: 100%; padding-top: 120px; margin-bottom: 80px;} #mainArea img{ width: 100%;} #topContents{ width: 100%;} #topContents h2 img{ width: 310px;} #topContents h2 span{ font-size: 24px; display: block; margin-top: 10px;} #topContents .inner{ width: 1000px; margin: 0 auto;} #topContents p{ line-height: 200%;} #topContents a.btnBL{ width: 380px; height: 70px; line-height: 65px; background: #0080c7; border: #0080c7 solid 2px; display: block; text-align: center; text-decoration: none; margin: 0 auto; font-size: 20px; position: relative; color: #FFF; transition: all .5s; box-sizing: border-box;} #topContents a.btnBL::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnBL:hover{ background: transparent; color: #0080c7; transition: all .5s;} #topContents a.btnBL:hover::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #0080c7; border-right: 2px solid #0080c7; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnWt{ width: 380px; height: 70px; line-height: 65px; background: #FFF; border: #0080c7 solid 2px; display: block; text-align: center; text-decoration: none; margin: 0 auto 80px; font-size: 20px; position: relative; color: #0080c7; transition: all .5s; box-sizing: border-box;} #topContents a.btnWt::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #0080c7; border-right: 2px solid #0080c7; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnWt:hover{ background: #0080c7; color: #FFF; transition: all .5s;} #topContents a.btnWt:hover::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg); margin-top: -5px;} #news{ width: 1000px; margin: 0 auto 80px;} #news .newsArea table{ width: 100%; margin-bottom: 40px; border-top: solid 1px #9CDEF6; border-collapse:collapse; box-sizing: border-box;} #news .newsArea th{ width: 176px; font-weight: normal; text-align: left; padding: 31px 0 33px 10px; border-bottom: solid 1px #9CDEF6;} #topContents h2{ margin: 0 0 40px; font-weight: normal; text-align: center;} #news .newsArea td{ padding: 31px 0 33px; border-bottom: solid 1px #9CDEF6;} #news .newsArea a{ color:#0080c7; text-decoration: none;} #news .newsArea a:hover{ text-decoration: underline;} #service{ width: 100%; background: #E2F7FC; padding: 80px 0; text-align: center;} #service .serviceWrap{ width: 1000px; margin: 40px auto; text-align: left;} #service .serviceWrap ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #service .serviceWrap li{ width: 236px; height: 46px; line-height: 40px; box-sizing: border-box; border: #9ddcf7 1px solid; background-size: 30px !important; border-radius: 5px; padding-left: 50px; margin-bottom: 20px;} #service .serviceWrap li.icon01{ background: url("../img/top/icon-service01.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon02{ background: url("../img/top/icon-service02.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon03{ background: url("../img/top/icon-service03.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon04{ background: url("../img/top/icon-service04.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon05{ background: url("../img/top/icon-service05.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon06{ background: url("../img/top/icon-service06.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon07{ background: url("../img/top/icon-service07.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon08{ background: url("../img/top/icon-service08.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon09{ background: url("../img/top/icon-service09.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon10{ background: url("../img/top/icon-service10.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon11{ background: url("../img/top/icon-service11.png") no-repeat 10px center #FFF;} #service .serviceWrap li.icon12{ background: url("../img/top/icon-service12.png") no-repeat 10px center #FFF;} /* 4列リストの一番左下にある要素 */ #service .serviceWrap li:nth-child(4n+1):nth-last-child(-n+4), /* 4列リストの一番左下にある要素以降にあるliすべて */ #service .serviceWrap li:nth-child(4n+1):nth-last-child(-n+4) ~ li { margin-bottom: 0;} #company{ width: 100%; padding: 70px 0 122px; background: url("../img/common/bg-town.png") repeat-x center bottom 40px , url("../img/common/bg-dots.gif") repeat; text-align: center;} #company h2.company{ font-size: 30px; color:#0080c7; font-weight: bold; line-height: 200%; background: linear-gradient(transparent 70%, #F9E479 0%); display: inline; padding-bottom: 2px;} #company p.lead{ font-size: 18px; line-height: 200%; margin: 40px 0;} #company .inner{ position: relative;} #company .lCloud{ position: absolute; top: 80px; left: -100px;} #company .rCloud{ position: absolute; top: 80px; right: -100px;} #works{ width: 100%; padding: 80px 0 0; text-align: center;} #works .slider{ margin: 30px 0 80px;} #works .slider li{ width: 20%; margin: 0 15px; box-sizing: border-box;} #works .slider li img{ width: 100%;} .footTop{ width: 100%; height: 320px; padding: 80px 0 0; background: url("../img/top/footer-illust.png") no-repeat center bottom , url("../img/common/bg-dots.gif") repeat;} .footTop p{ text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; font-size: 0;} /* seccond contents */ #secContents{ width: 100%;} #secImage{ width: 100%; height: 95px; padding: 150px 0 172px; background: url("../img/common/bg-town.png") repeat-x center bottom 20px , url("../img/common/bg-dots.gif") repeat; box-sizing: border-box;} #secImage h2{ text-align: center; font-size: 28px; font-weight: normal; margin: 0; /*text-shadow:3px 3px 3px #000;*/} #secContents h3{ margin: 0 0 70px; font-weight: normal; text-align: center;} #secContents h3 img{ width: 310px;} #secContents h3 span{ font-size: 24px; display: block; margin-top: 10px;} #secContents .pankuzu{ width: 100%; margin: 0 auto 80px; font-size: 12px; background: #E2F7FC; padding: 15px 0;} #secContents .pankuzu p{ width: 1000px; margin: 0 auto;} #secContents .pankuzu a{ color: #333; text-decoration: none;} #secContents .pankuzu a:hover{ text-decoration: underline;} #secContents .bgGray{ width: 100%; background: #ECECEC; padding: 80px 0;} #secContents .secInner{ width: 1000px; margin: 0 auto; font-size: 16px;} #secContents .secInner.pb80{ padding-bottom: 80px;} #secContents .secInner p{ line-height: 180%;} #secContents .secInner p.mt30{ margin-top: 30px;} /* news page */ #newsWrap{ width: 1000px; margin: 0 auto 80px;} #newsWrap h4{ color: #007FC5; text-align: center; font-size: 22px; margin: 0 0 30px; font-weight: normal; line-height: 180%;} #newsWrap p.lead{ margin-bottom: 50px; line-height: 180%;} #newsWrap .oneImg{ width: 1000px; margin: 0 auto;} #newsWrap .twoImg{ width: 1000px; margin: 0 auto;} #newsWrap .twoImg ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;} #newsWrap .twoImg li{ width: 475px;} #newsWrap .twoImg li img{ width: 475px} #newsWrap .mb50{ margin-bottom: 50px;} /* service */ .svWrap{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 80px;} .svWrap_rev{ flex-direction: row-reverse; margin-bottom: 80px;} .svImg{ width: 460px; z-index: 10;} .svImg img{ width: 460px;} .svTxt{ width: 900px; padding: 40px 40px 50px; box-sizing: border-box; margin-top: -308px;} .svTxt.blue{ background: #E2F7FC; margin-left: 100px;} .svTxt.dot{ background: url("../img/common/bg-dots.gif") repeat; margin-right: 100px;} .svTxtArea{ width: 460px;} .svTxtArea p .f14{ font-size: 14px;} .svTxt.blue .svTxtArea{ margin-left: 360px;} .svTxt h5{ margin: 0; font-size: 22px; position: relative; text-align: center;} .svTxt h5::before{ content: ""; display: block; width: 60px; height: 60px; background-size: 60px !important; margin: 0 auto 10px;} .svTxt h5.sv01::before{ background: url("../img/top/icon-service01.png") no-repeat center top;} .svTxt h5.sv02::before{ background: url("../img/top/icon-service02.png") no-repeat center top;} .svTxt h5.sv03::before{ background: url("../img/top/icon-service03.png") no-repeat center top;} .svTxt h5.sv04::before{ background: url("../img/top/icon-service04.png") no-repeat center top;} .svTxt h5.sv05::before{ background: url("../img/top/icon-service05.png") no-repeat center top;} .svTxt h5.sv06::before{ background: url("../img/top/icon-service06.png") no-repeat center top;} .svTxt h5.sv07::before{ background: url("../img/top/icon-service07.png") no-repeat center top;} .svTxt h5.sv08::before{ background: url("../img/top/icon-service08.png") no-repeat center top;} .svTxt h5.sv09::before{ background: url("../img/top/icon-service09.png") no-repeat center top;} .svTxt h5.sv10::before{ background: url("../img/top/icon-service10.png") no-repeat center top;} .svTxt h5.sv11::before{ background: url("../img/top/icon-service11.png") no-repeat center top;} .svTxt h5.sv12::before{ background: url("../img/top/icon-service12.png") no-repeat center top;} .svTxt h5::after{ background: #00A0E8; content: ''; display: block; height: 1px; margin: 15px auto; width: 50px} .svTxt p{ line-height: 200%;} /* flow */ .flowArea{ width: 1000px; margin: 0 auto;} .step{ width: 1000px; margin: 0 auto 80px; text-align: center;} .step .ttlStep{ display: flex; /*align-items: center;*/} .step .ttlStep:before, .step .ttlStep:after{ border-top: 1px solid #0080C7; content: ""; flex-grow: 1; margin-top: 22px;} .step .ttlStep:before{ margin-right: 30px;} .step .ttlStep:after{ margin-left: 30px;} .step .ttlStep img{ width: 60px; margin: 0 auto 15px;} .step h5{ font-size: 24px; color:#0080c7; line-height: 200%; background: linear-gradient(transparent 70%, #F9E479 0%); display: inline; padding-bottom: 2px; margin: 0;} .step .flowImg{ width: 300px; margin: 40px auto;} .step .flowImg img{ width: 300px;} .step p{ line-height: 200%;} /* works */ .worksWrap{ width: 1000px; margin: 0 auto;} .worksWrap h4{ text-align: center; font-size: 26px; margin: 0 0 60px; font-weight: normal; display: flex; align-items: center;} .worksWrap h4:before, .worksWrap h4:after{content: ""; height: 2px; flex-grow: 1; background-color: #7FBFE3;} .worksWrap h4:before{ margin-right: 40px;} .worksWrap h4:after{ margin-left: 24px;} .worksWrap ul{ display: flex; flex-wrap: wrap; justify-content: start; align-items: top;} .worksWrap li{ width: 300px; box-sizing: border-box; overflow: hidden; margin: 0 50px 80px 0;} .worksWrap li:nth-child(3n){ margin: 0 0 80px;} .worksWrap li a{ display: block;} .worksWrap li img{ width: 300px; transition:1s all;} .worksWrap li a img:hover{ transition:1s all;} .worksWrap li .worksttl{ font-size: 18px; color: #007FC5; font-weight: bold; margin: 10px 0 5px;} .worksWrap li .worksTxt{ line-height: 180%;} .worksWrap h5{ text-align: center; font-size: 22px; margin: 0 0 30px; font-weight: normal;} .worksTable{ width: 1000px; margin: 0 0 80px;} .worksTable .spSlide{ display: none;} .worksTable table{ width: 100%; border-collapse: collapse; box-sizing: border-box; border-top: #9CDCF7 solid 1px;} .worksTable table tr:nth-child(even){ background: #F6FBFF;} .worksTable table th{ border-bottom: #9CDCF7 solid 1px; color: #007FC5; text-align: left; padding: 20px; width: 50%;} .worksTable table td{ border-bottom: #9CDCF7 solid 1px; padding: 20px;} /* company */ .greeting{ width: 100%; background: url("../img/common/bg-dots.gif") repeat; padding: 80px 0; margin-bottom: 80px;} .greeting h4{ text-align: center; font-size: 26px; margin: 0 0 30px; font-weight: normal;} .greeting h4.blue{ color: #007FC5; text-align: center; font-size: 22px; margin: 0 0 30px; font-weight: normal; line-height: 180%;} .greeting h5{ color: #007FC5; text-align: center; font-size: 22px; margin: 0 0 30px; font-weight: normal;} .greeting .greetingTxt{ text-align: center; line-height: 200%;} .comArea{ width: 1000px; margin: 0 auto 80px;} .comArea h4{ text-align: center; font-size: 26px; margin: 0 0 30px; font-weight: normal;} .comArea table{ width: 100%; margin-bottom: 80px; border-top: solid 1px #9CDEF6; border-collapse:collapse; box-sizing: border-box;} .comArea table.mb00{ margin-bottom: 0;} .comArea th{ width: 310px; font-weight: normal; text-align: left; padding: 31px 0 33px 10px; border-bottom: solid 1px #9CDEF6; vertical-align: top;} .comArea td{ padding: 31px 0 33px; border-bottom: solid 1px #9CDEF6;} .comArea td a{ color: #007FC5; text-decoration: underline;} .comArea td a:hover{ text-decoration: none;} .comArea .bnr-company::after{ content: ""; display: block; clear: both;} .comArea .bnr-company .bcL{ width: 470px; float: left;} .comArea .bnr-company .bcR{ width: 470px; float: right;} .comArea .bnr-company .bcL img, .comArea .bnr-company .bcR img{ width: 470px;} /* staff */ .staffArea{ width: 1000px; margin: 0 auto 80px; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} .staffArea_rev{ flex-direction: row-reverse; margin-bottom: 80px;} .staffImg{ width: 460px;} .staffImg img{ width: 460px;} .staffEx{ width: 500px;} .staffEx table{ width: 100%;} .staffEx table td{ border-bottom: #9DDDF8 solid 1px; padding: 27px 10px 30px; line-height: 190%;} .staffEx table td.name{ font-size: 30px; font-weight: bold; padding: 0 10px 17px;} .staffEx table td.name span{ display: inline-block; font-size: 18px; color: #51BCF0; margin-left: 30px;} .staffEx table td span{ display: block; color: #0080C7; font-weight: bold;} .gmap{ margin-bottom: 80px;} .gmap iframe{ width: 1000px; height: 500px; margin: 0 auto;} /* privacy */ #secContents .secInner ol{ margin: 50px 0 0;} #secContents .secInner ol li{ font-size: 16px; margin: 0 0 20px; color: #007FC5;} #secContents .secInner ol li:last-of-type{ margin: 0;} #secContents .secInner ol li p{ font-size: 14px; margin-top: 5px; color: #333;} /* contact */ #secContents .secInner p.number{ margin: 20px 0 80px; padding-bottom: 80px; text-align: center; border-bottom: #007FC5 solid 1px;} #secContents .secInner p.number img{ width: 300px;} #secContents .secInner p.recTel{ width: 480px; margin: 0 auto 80px;} #secContents .secInner p.recTel img{ width: 480px;} #secContents .secInner h4{ color: #007FC5; text-align: center; font-size: 22px; margin: 0 0 30px;} #secContents .secInner .formTxt{ margin: 0 0 30px; font-size: 14px;} #secContents .secInner .formTxt li{ margin-bottom: 8px; position: relative; padding-left: 20px;} #secContents .secInner .formTxt li::before{ background: #FF921F; border-radius: 50%; content: ""; position: absolute; top: 4px; left: 0; width: 14px; height: 14px;} #secContents .secInner .formTxt li:last-child{ margin-bottom: 0;} #secContents .secInner p.rLink{ text-align: right; margin: 0 2px 5px;} #secContents .secInner p.rLink a{ color: #007FC5; text-decoration: none;} #secContents .secInner p.rLink a:hover{ text-decoration: underline;} #secContents .secInner .formArea p{ margin-bottom: 40px;} #secContents .secInner .formArea p:last-of-type{ margin-bottom: 0;} #secContents .secInner .formArea p.formCau{ width: 1000px; background: #FEF0E7; text-align: center; padding: 30px 0;} #secContents .secInner .formArea table{ width: 100%; margin-bottom: 40px; border-top: #9CDEF6 solid 1px; box-sizing: border-box;} #secContents .secInner .formArea th{ width: 280px; padding: 30px 0 28px 10px; font-weight: normal; text-align: left; border-bottom: #9CDEF6 solid 1px; position: relative;} #secContents .secInner .formArea th span{ width: 32px; color: #FFF; background: #FF921F; padding: 0 5px 2px 5px; margin-right: 12px; display: block; position: absolute; top: 37px; right: 0;} #secContents .secInner .formArea td{ padding: 30px 0 28px; border-bottom: #9CDEF6 solid 1px;} select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; height: 30px; position: relative; z-index: 1; padding: 0 40px 0 10px; background: #F5F5F5; border: #F5F5F5 solid 1px; border-radius: 5px; font-family: "Noto Sans Japanese"; } select::-ms-expand { display: none; } .selectWrap{ position: relative; display: inline-block; } .selectWrap::before{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; background: #FFF; height: 100%; width: 30px; } .selectWrap::after{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto 0; right: 9px; width: 0; height: 0; background: #F5F5F5; border-radius: 5px; } input[type="text"], .input textarea { outline: none; background: #F5F5F5; border: #F5F5F5 solid 1px; border-radius: 5px; -webkit-transition: all .3s; transition: all .3s; padding: 10px; font-family: "Noto Sans Japanese"; } .input input[type="text"]:focus, .input textarea:focus { box-shadow: 0 0 7px #FF921F; border: 1px solid #FF921F; } textarea { resize: vertical; } input[type="submit"] { display: block; width: 375px; height: 70px; padding: 0; margin: 40px auto 0; background: #FFF; color: #007FC5; border: #007FC5 solid 2px; font-size: 20px; cursor: pointer; outline: none; font-family: "Noto Sans Japanese"; transition: all .5s; } input[type="button"] { display: inline-block; width: 170px; height: 26px; padding: 0; margin: 0 0 0 10px; background: #0080c7; border: none; color: #FFF; font-size: 14px; cursor: pointer; outline: none; font-family: "Noto Sans Japanese"; } input[type="submit"]:hover, input[type="button"]:hover { background: #0080c7; color: #FFF; transition: all .5s; } input[type="submit"]:active, input[type="button"]:active { background: #FFF; } label.radio { margin: 0 15px 8px 0; display: inline-block; white-space: nowrap; padding: 7px 0 0 3px; } input[type="radio"] { width: 20px; height: 20px; margin: 3px 0 5px 15px; vertical-align: top; } .thanks_info{ border: #E7443D solid 1px; padding: 20px; margin: 60px 0 0;} .thanks_info p{ padding: 0; margin: 15px 0 0; line-height: 180%;} .thanks_info p.ttl{ font-size: 16px; font-weight: bold; margin: 0;} .thanks_info p span.red{ color: #E7443D;} #page-top{ margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 10px; z-index: 100;} #page-top #move-page-top{ width: 50px; display: block; cursor: pointer;} #page-top #move-page-top img{ width: 50px;} footer{ width: 100%;} footer .footBnr{ width: 100%; background: #0080C7; padding: 40px 0;} footer .footBnr ul{ width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} footer .footBnr li{ width: 480px;} footer .footBnr li a img{ width: 480px; display: block;} footer .footArea{ width: 1000px; margin: 0 auto; padding: 80px 0;} footer .footArea::after{ content:""; display:block; clear:both;} footer .footAdd{ width: 435px; float: left;} footer .footAdd .logo{ margin-bottom: 15px;} footer .footAdd .logo img{ width: 330px; margin-top: 10px;} footer .footAdd .address p.name{ font-size: 14px; margin-bottom: 15px; line-height: 180%;} footer .footAdd .address p.name a{ color:#0080c7; text-decoration: none;} footer .footAdd .address p.name a:hover{ text-decoration: underline;} footer .footAdd .address p.tel{ color:#0080c7; font-size: 20px; margin-bottom: 20px;} footer .footAdd .address p.tel span{ font-size: 22px; font-weight: bold;} footer .footAdd .address p.tel a{ font-size: 22px; font-weight: bold; color:#0080c7; text-decoration: none;} footer .footAdd .address .btnWeb{ width: 234px; margin-bottom: 30px;} footer .footAdd .address .btnWeb img{ width: 234px;} footer .footC{ float: left;} footer .footC p.ttl-area{ color:#0080c7; margin-bottom: 25px; line-height: 140%;} footer .footC h3{ font-weight: 500; font-size: 16px; margin: 0 0 5px !important; text-align: left !important;} footer .footC p{ line-height: 170%;} footer .footR{ width: 280px; float: right;} footer .footR img{ width: 280px;} footer .footLink{ width: 100%; background: #E2F7FC; padding: 25px 0;} footer .footLink ul{ width: 1000px; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} footer .footLink li{ font-size: 14px; } /*footer .footLink li{ font-size: 14px; border-left: 1px solid #0080c7; border-right: 1px solid #0080c7; padding: 0 10px 0 0; box-sizing: border-box;} footer .footLink li+ li{ border-left: 0; border-right: 1px solid #0080c7;}*/ footer .footLink li a{ position: relative; color: #0080c7; text-decoration: none;} footer .footLink li a::before{ content:""; display:inline-block; width: 1px; height: 20px; background: #0080c7; position: absolute; top: 50%; transform: translateY(-50%); left: -33px;} footer .footLink li.nob a::after{ content:""; display:inline-block; width: 1px; height: 20px; background: #0080c7; position: absolute; top: 50%; transform: translateY(-50%); right: -33px;} footer .footLink li a:hover{ text-decoration: underline;} footer .copy{ background: #0080C7; text-align: center; font-size: 12px; padding: 10px 0; color: #FFF;} .ml16{ margin-left: 16px;} .mb25{ margin-bottom: 25px;} .mb35{ margin-bottom: 35px;} .fs12{ font-size: 12px;} .fs14{ font-size: 14px;} .pc{ display:inline !important;} .sp{ display:none !important;} @media screen and (max-width: 767px){ html {-webkit-text-size-adjust:none; margin:0 auto; padding:0;} body{ min-width: 100%; margin:0 auto; font-family: "Noto Sans Japanese";} img{ width:100%; height:auto; vertical-align:bottom; -webkit-backface-visibility: hidden;} a img:hover{ opacity:1; filter:alpha(opacity=100); transition: all 0;} .clear{ clear:both; height:0;} .center{ text-align:center;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0;} #container{ width: 100%; min-width: 100%; margin: 0 auto; color: #333; font-size: 14px;} /*--- top pages ---*/ #mainArea{ width: 100%; margin-bottom: 10%; padding-top: 60px;} #mainArea img{ width: 100%;} #topContents{ width: 100%;} #topContents h2{ width: 75%; margin: 0 auto 5%; font-weight: normal; text-align: center;} #topContents h2 img{ width: 100%;} #topContents h2 span{ font-size: 16px; display: block; margin-top: 1%;} #topContents .inner{ width: auto; margin: 0 auto;} #topContents p{ line-height: 160%;} #topContents a.btnBL{ width: 200px; height: 50px; line-height: 45px; background: #0080c7; border: #0080c7 solid 2px; display: block; text-align: center; text-decoration: none; margin: 0 auto; font-size: 15px; position: relative; color: #FFF; transition: all .5s; box-sizing: border-box;} #topContents a.btnBL::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnBL:hover{ background: transparent; color: #0080c7; transition: all .5s;} #topContents a.btnBL:hover::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #0080c7; border-right: 2px solid #0080c7; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnWt{ width: 200px; height: 50px; line-height: 45px; background: #FFF; border: #0080c7 solid 2px; display: block; text-align: center; text-decoration: none; margin: 0 auto 10%; font-size: 15px; position: relative; color: #0080c7; transition: all .5s; box-sizing: border-box;} #topContents a.btnWt::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #0080c7; border-right: 2px solid #0080c7; transform: rotate(45deg); margin-top: -5px;} #topContents a.btnWt:hover{ background: #0080c7; color: #FFF; transition: all .5s;} #topContents a.btnWt:hover::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg); margin-top: -5px;} #news{ width: auto; margin: 0 5% 10%;} #news .newsArea table{ width: 100%; margin-bottom: 8%; border-top: solid 1px #9CDEF6; border-collapse:collapse; box-sizing: border-box;} #news .newsArea th{ width: 100%; font-weight: normal; text-align: left; padding: 5% 0 0 0; border-bottom: none; display: block;} #news .newsArea td{ padding: 0 0 5%; border-bottom: solid 1px #9CDEF6; display: block;} #news .newsArea a{ color:#0080c7; text-decoration: none;} #news .newsArea a:hover{ text-decoration: underline;} #service{ width: auto; background: #E2F7FC; padding: 10% 5%; text-align: center;} #service .serviceWrap{ width: auto; margin: 5% auto; text-align: left;} #service .serviceWrap ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 2.9vw;} #service .serviceWrap li{ width: 49%; height: 46px; line-height: 44px; box-sizing: border-box; border: #9ddcf7 1px solid; background-size: 22px !important; border-radius: 5px; padding-left: 36px; margin-bottom: 2%;} #service .serviceWrap li.icon01{ background: url("../img/top/icon-service01.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon02{ background: url("../img/top/icon-service02.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon03{ background: url("../img/top/icon-service03.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon04{ background: url("../img/top/icon-service04.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon05{ background: url("../img/top/icon-service05.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon06{ background: url("../img/top/icon-service06.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon07{ background: url("../img/top/icon-service07.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon08{ background: url("../img/top/icon-service08.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon09{ background: url("../img/top/icon-service09.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon10{ background: url("../img/top/icon-service10.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon11{ background: url("../img/top/icon-service11.png") no-repeat 7px center #FFF;} #service .serviceWrap li.icon12{ background: url("../img/top/icon-service12.png") no-repeat 7px center #FFF;} /* 4列リストの一番左下にある要素 */ #service .serviceWrap li:nth-child(4n+1):nth-last-child(-n+4), /* 4列リストの一番左下にある要素以降にあるliすべて */ #service .serviceWrap li:nth-child(4n+1):nth-last-child(-n+4) ~ li { margin-bottom: 2%;} #company{ width: auto; padding: 10% 5% 10%; background: url("../img/common/bg-town.png") repeat-x center bottom 10px / 100%, url("../img/common/bg-dots.gif") repeat; text-align: center;} #company h2.company{ font-size: 16px; color:#0080c7; font-weight: bold; line-height: 180%; background: linear-gradient(transparent 70%, #F9E479 0%); display: inline; padding-bottom: 2px;} #company p.lead{ font-size: 14px; line-height: 180%; margin: 8% 0; position: relative; z-index: 10;} #company .inner{ position: relative;} #company .lCloud{ position: absolute; top: 80px; left: -100px;} #company .rCloud{ position: absolute; top: 80px; right: -100px;} #company .lCloud img, #company .rCloud img{ width: 50%;} #works{ width: auto; padding: 10% 5% 0; text-align: center;} #works p{ line-height: 2em !important;} #works .slider{ margin: 8% 0;} #works .slider li{ width: 20%; margin: 0 3px; box-sizing: border-box;} #works .slider li img{ width: 100%;} .footTop{ width: 100%; height: 0; margin-top: 15%; padding: 10% 0 41.891891%; background: url("../img/top/footer-illust-sp.png") no-repeat center bottom / 100%, url("../img/common/bg-dots.gif") repeat;} .footTop p{ text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; font-size: 0;} /* seccond contents */ #secContents{ width: 100%; padding-top: 60px;} #secImage{ width: 100%; height: auto; padding: 5% 5% 15%; background: url("../img/common/bg-town.png") repeat-x center bottom 10px / 100% , url("../img/common/bg-dots.gif") repeat; box-sizing: border-box;} #secImage h2{ text-align: center; font-size: 16px; font-weight: normal; margin: 0;} #secContents h3{ width: 75%; margin: 0 auto 10%; font-weight: normal; text-align: center;} #secContents h3 img{ width: 100%;} #secContents h3 span{ font-size: 16px; display: block; margin-top: 1%;} #secContents .pankuzu{ width: auto; margin: 0 auto 10%; font-size: 2.5vw; background: #E2F7FC; padding: 10px 5%;} #secContents .pankuzu p{ width: auto; margin: 0 auto;} #secContents .pankuzu a{ color: #333; text-decoration: none;} #secContents .pankuzu a:hover{ text-decoration: underline;} #secContents .bgGray{ width: 100%; background: #ECECEC; padding: 10% 0;} #secContents .secInner{ width: auto; margin: 0 5%; font-size: 14px;} #secContents .secInner.pb80{ padding-bottom: 10%;} #secContents .secInner p{ line-height: 170%;} #secContents .secInner p.mt30{ margin-top: 10%;} /* news */ .secNewsArea{ width: auto;} .secNewsArea table{ width: 100%; border-top: none; border-collapse:collapse;} .secNewsArea tr{ border-bottom: dashed 1px #393939;} .secNewsArea th{ width: auto; font-weight: normal; text-align: left; padding: 16px 0 5px 0; display: block;} .secNewsArea td{ padding: 0 0 20px;display: block;} .secNewsArea td span{ display: block; background: #393939; color: #FFF; margin-right: 0; font-size: 13px; width: 80px; text-align: center; margin-bottom: 5px;} .secNewsArea a{ color: #393939; text-decoration: none;} .secNewsArea a:hover{ color: #393939; text-decoration: underline;} /* news page */ #newsWrap{ width: auto; margin: 0 0 10%;} #newsWrap h4{ color: #007FC5; text-align: left; font-size: 16px; margin: 0 0 5%; font-weight: normal; line-height: 170%;} #newsWrap p.lead{ margin-bottom: 5%; line-height: 160%;} #newsWrap .oneImg{ width: auto; margin: 0 auto;} #newsWrap .twoImg{ width: auto; margin: 0 auto;} #newsWrap .twoImg ul{ display: block; flex-wrap: wrap; justify-content: space-between; align-items: top;} #newsWrap .twoImg li{ width: auto; margin-bottom: 5%;} #newsWrap .twoImg li:last-child{ margin-bottom: 0;} #newsWrap .oneImg li img, #newsWrap .twoImg li img{ width: 100%;} #newsWrap .mb50{ margin-bottom: 5%;} /* service */ .svWrap{ display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 10%;} .svWrap_rev{ flex-direction: row-reverse; margin-bottom: 10%;} .svImg{ width: auto; z-index: 10;} .svImg img{ width: 100%;} .svTxt{ width: auto; padding: 5%; box-sizing: border-box; margin-top: 0;} .svTxt.blue{ background: #E2F7FC; margin-left: 0;} .svTxt.dot{ background: url("../img/common/bg-dots.gif") repeat; margin-right: 0;} .svTxtArea{ width: auto;} .svTxtArea p .f14{ font-size: 12px;} .svTxt.blue .svTxtArea{ margin-left: 0;} .svTxt h5{ margin: 0; font-size: 16px; position: relative; text-align: center;} .svTxt h5::before{ content: ""; display: block; width: 40px; height: 40px; background-size: 40px !important; margin: 0 auto 10px;} .svTxt h5.sv01::before{ background: url("../img/top/icon-service01.png") no-repeat center top;} .svTxt h5.sv02::before{ background: url("../img/top/icon-service02.png") no-repeat center top;} .svTxt h5.sv03::before{ background: url("../img/top/icon-service03.png") no-repeat center top;} .svTxt h5.sv04::before{ background: url("../img/top/icon-service04.png") no-repeat center top;} .svTxt h5.sv05::before{ background: url("../img/top/icon-service05.png") no-repeat center top;} .svTxt h5.sv06::before{ background: url("../img/top/icon-service06.png") no-repeat center top;} .svTxt h5.sv07::before{ background: url("../img/top/icon-service07.png") no-repeat center top;} .svTxt h5.sv08::before{ background: url("../img/top/icon-service08.png") no-repeat center top;} .svTxt h5.sv09::before{ background: url("../img/top/icon-service09.png") no-repeat center top;} .svTxt h5.sv10::before{ background: url("../img/top/icon-service10.png") no-repeat center top;} .svTxt h5.sv11::before{ background: url("../img/top/icon-service11.png") no-repeat center top;} .svTxt h5.sv12::before{ background: url("../img/top/icon-service12.png") no-repeat center top;} .svTxt h5::after{ background: #00A0E8; content: ''; display: block; height: 1px; margin: 15px auto; width: 50px;} .svTxt p{ line-height: 160%;} /* flow */ .flowArea{ width: auto; margin: 0 5%;} .step{ width: auto; margin: 0 auto 10%; text-align: center;} .step .ttlStep{ display: flex; /*align-items: center;*/} .step .ttlStep:before, .step .ttlStep:after{ border-top: 1px solid #0080C7; content: ""; flex-grow: 1; margin-top: 12px;} .step .ttlStep:before{ margin-right: 30px;} .step .ttlStep:after{ margin-left: 30px;} .step .ttlStep img{ width: 34px; margin: 0 auto 3%;} .step h5{ font-size: 16px; color:#0080c7; line-height: 180%; background: linear-gradient(transparent 70%, #F9E479 0%); display: inline; padding-bottom: 2px;} .step .flowImg{ width: 70%; margin: 10% auto 6%;} .step .flowImg img{ width: 100%;} .step p{ line-height: 2em; text-align: left;} /* works */ .worksWrap{ width: auto; margin: 0 5% 5%;} .worksWrap h4{ text-align: center; font-size: 16px; margin: 0 0 5%; font-weight: normal; display: flex; align-items: center;} .worksWrap h4:before, .worksWrap h4:after{content: ""; height: 2px; flex-grow: 1; background-color: #7FBFE3;} .worksWrap h4:before{ margin-right: 30px;} .worksWrap h4:after{ margin-left: 14px;} .worksWrap ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;} .worksWrap li{ width: 48%; box-sizing: border-box; position: relative; overflow: hidden; margin: 0 0 5%;} .worksWrap li:nth-child(3n){ margin: 0 0 5%;} .worksWrap li a{ display: block;} .worksWrap li img{ width: 100%; transition: none;} .worksWrap li a img:hover{ transform: none; transition: none;} .worksWrap li .worksttl{ font-size: 14px; color: #007FC5; font-weight: bold; margin: 7px 0 2px;} .worksWrap li .worksTxt{ line-height: 1.8em;} .worksWrap h5{ text-align: center; font-size: 16px; margin: 8% 0 5%; font-weight: normal;} .worksTable{ width: auto; margin: 0 0 10%;} .worksTable .spSlide{ display: inherit; font-size: 12px; margin-bottom: 5px; text-align: right; color: #C10508;} .worksTable .scroll{ width: 100%; overflow-x: scroll;} .worksTable table{ width: 100%; min-width: 850px; border-collapse: collapse; box-sizing: border-box; border-top: #9CDCF7 solid 1px;} .worksTable table tr:nth-child(even){ background: #F6FBFF;} .worksTable table th{ border-bottom: #9CDCF7 solid 1px; color: #007FC5; text-align: left; padding: 2% 1%; width: 50%;} .worksTable table td{ border-bottom: #9CDCF7 solid 1px; padding: 2% 1%;} /* company */ .greeting{ width: auto; background: url("../img/common/bg-dots.gif") repeat; padding: 10% 5%; margin-bottom: 10%;} .greeting h4{ text-align: center; font-size: 16px; margin: 0 0 5%; font-weight: normal;} .greeting h4.blue{ color: #007FC5; text-align: left; font-size: 16px; margin: 0 0 5%; font-weight: normal; line-height: 2em;} .greeting h5{ color: #007FC5; text-align: left; font-size: 15px; margin: 0 0 5%; font-weight: normal;} .greeting .greetingTxt{ text-align: left; line-height: 2em;} .comArea{ width: auto; margin: 0 5% 10%;} .comArea h4{ text-align: center; font-size: 16px; margin: 0 0 5%; font-weight: normal;} .comArea table{ width: 100%; margin-bottom: 8%; border-top: solid 1px #9CDEF6; border-collapse:collapse; box-sizing: border-box;} .comArea table.mb00{ margin-bottom: 0;} .comArea th{ width: 100%; font-weight: 500; text-align: left; padding: 5% 0 1% 0; border-bottom: none; display: block;} .comArea td{ padding: 0 0 5%; border-bottom: solid 1px #9CDEF6; display: block;} .comArea td a{ color: #007FC5; text-decoration: underline;} .comArea td a:hover{ text-decoration: none;} .comArea .bnr-company::after{ content: ""; display: block; clear: both;} .comArea .bnr-company .bcL{ width: auto; float: none; margin-bottom: 5%;} .comArea .bnr-company .bcR{ width: auto; float: none;} .comArea .bnr-company .bcL img, .comArea .bnr-company .bcR img{ width: 100%;} /* staff */ .staffArea{ width: auto; margin: 0 5% 10%; display: block; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;} .staffArea_rev{ flex-direction: row-reverse; margin-bottom: 10%;} .staffImg{ width: auto;} .staffImg img{ width: 100%;} .staffEx{ width: auto;} .staffEx table{ width: 100%;} .staffEx table td{ border-bottom: #9DDDF8 solid 1px; padding: 5% 3%; line-height: 180%;} .staffEx table td.name{ font-size: 20px; font-weight: bold; padding: 5% 3% 3%;} .staffEx table td.name span{ display: inline-block; font-size: 14px; color: #51BCF0; margin-left: 30px;} .staffEx table td span{ display: block; color: #0080C7; font-weight: bold;} .gmap{ margin-bottom: 8%;} .gmap iframe{ width: 100%; height: 100%; margin: 0 auto;} /* privacy */ #secContents .secInner ol{ margin: 0; padding: 0 8%;} #secContents .secInner ol li{ font-size: 14px; margin: 10% 0 0; color: #007FC5;} #secContents .secInner ol li:last-of-type{ margin: 0;} #secContents .secInner ol li p{ font-size: 14px; margin-top: 1%; color: #333;} /* contact */ #secContents .secInner p.number{ width: 70%; margin: 5% auto 10%; padding-bottom: 10%; text-align: center; border-bottom: #007FC5 solid 1px;} #secContents .secInner p.number img{ width: 100%;} #secContents .secInner p.recTel{ width: auto; margin: 0 auto 15%;} #secContents .secInner p.recTel img{ width: 100%} #secContents .secInner h4{ color: #007FC5; text-align: center; font-size: 18px; margin: 0 0 5%;} #secContents .secInner .formTxt{ margin: 0 0 10%; font-size: 14px;} #secContents .secInner .formTxt li{ margin-bottom: 8px; position: relative; padding-left: 15px;} #secContents .secInner .formTxt li::before{ background: #FF921F; border-radius: 50%; content: ""; position: absolute; top: 6px; left: 0; width: 10px; height: 10px;} #secContents .secInner .formTxt li:last-child{ margin-bottom: 0;} #secContents .secInner p.rLink{ text-align: right; margin: 0 0 5px;} #secContents .secInner p.rLink a{ color: #007FC5; text-decoration: none;} #secContents .secInner p.rLink a:hover{ text-decoration: underline;} #secContents .secInner .formArea{ width: auto;} #secContents .secInner .formArea p{ margin-bottom: 40px;} #secContents .secInner .formArea p:last-of-type{ margin-bottom: 0;} #secContents .secInner .formArea p.formCau{ width: auto; background: #FEF0E7; text-align: left; padding: 5%;} #secContents .secInner .formArea table{ width: 100%; margin-bottom: 5%; border-top: #9CDEF6 solid 1px; box-sizing: border-box; table-layout: fixed;} #secContents .secInner .formArea th{ width: auto; display: block; padding: 3% 2% 0; font-weight: normal; text-align: left; border-bottom: none; position: relative;} #secContents .secInner .formArea th span{ width: 28px; color: #FFF; background: #FF921F; padding: 0 5px 2px 5px; margin-right: 10px; font-size: 12px; display: block; position: absolute; top: 10px; right: 0;} #secContents .secInner .formArea td{ width: auto; display: block; padding: 2% 2% 3%; border-bottom: #9CDEF6 solid 1px;} #secContents .secInner .formArea .formWidth{ max-width: 93.5% !important;} select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; height: 30px; position: relative; z-index: 1; padding: 0 10% 0 5%; background: #F5F5F5; border: #F5F5F5 solid 1px; font-family: "Noto Sans Japanese"; } select::-ms-expand { display: none; } .selectWrap{ position: relative; display: inline-block; } .selectWrap::before{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; background: #FFF; height: 100%; width: 30px; } .selectWrap::after{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto 0; right: 9px; width: 0; height: 0; background: #F5F5F5; border: #F5F5F5 solid 1px; } input[type="text"], .input textarea { /*width:90% !important; margin-top: 3% !important;*/ outline: none; background: #F5F5F5; border: #F5F5F5 solid 1px; -webkit-transition: all .3s; transition: all .3s; padding: 3%; font-family: "Noto Sans Japanese"; } .input input[type="text"]:focus, .input textarea:focus { box-shadow: 0 0 7px #FF921F; border: 1px solid #FF921F; } textarea { resize: vertical; } input[type="submit"] { display: block; width: 80%; height: 50px; padding: 0; margin: 5% auto 0; background: #FFF; color: #007FC5; border: #007FC5 solid 2px; font-size: 16px; cursor: pointer; outline: none; font-family: "Noto Sans Japanese"; transition: all .5s; -webkit-appearance: none; border-radius: 0; } input[type="button"] { display: inline-block; width: 120px; height: 30px; padding: 0; margin: 0 0 0 10px; background: #0080c7; border: none; color: #FFF; font-size: 2.6vw; cursor: pointer; outline: none; font-family: "Noto Sans Japanese"; } input[type="submit"]:hover, input[type="button"]:hover { background: #0080c7; color: #FFF; transition: all .5s; } input[type="submit"]:active, input[type="button"]:active { background: #FFF; } label.radio { margin: 0 15px 8px 0; display: inline-block; white-space: nowrap; padding: 7px 0 0 0; } input[type="radio"] { width: 20px; height: 20px; margin: 0 0 5px 15px; vertical-align: top; } .thanks_info{ width:100%; border: #E7443D solid 1px; padding: 5%; margin: 10% auto 0; box-sizing: border-box;} .thanks_info p{ padding: 0; margin: 5% 0 0; line-height: 160%;} .thanks_info p.ttl{ font-size: 14px; font-weight: bold; margin: 0;} .thanks_info p span.red{ color: #E7443D;} #page-top { margin: 0; padding: 0; display: none; position: fixed; right: 10px; bottom: 40px; z-index: 50;} #page-top #move-page-top{ width: 40px; display: block; cursor: pointer;} #page-top #move-page-top img{ width: 40px;} footer{ width: 100%;} footer .footBnr{ width: auto; background: #0080C7; padding: 5%;} footer .footBnr ul{ width: auto; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} footer .footBnr li{ width: auto;} footer .footBnr li:last-child{ margin-top: 5%;} footer .footBnr li a img{ width: 100%; display: block;} footer .footArea{ width: auto; margin: 0 5%; padding: 5% 0;} footer .footArea::after{ content:""; display:block; clear:both;} footer .footAdd{ width: auto; float: none; margin-bottom: 5%;} footer .footAdd .logo{ width: auto; margin-bottom: 10px;} footer .footAdd .logo img{ width: 200px; margin-top: 5%;} footer .footAdd .address p.name{ font-size: 14px; margin-bottom: 10px; line-height: 180%;} footer .footAdd .address p.name a{ color:#0080c7; text-decoration: none;} footer .footAdd .address p.name a:hover{ text-decoration: underline;} footer .footAdd .address p.tel{ color:#0080c7; font-size: 20px; margin-bottom: 20px;} footer .footAdd .address p.tel span{ font-size: 22px; font-weight: bold;} footer .footAdd .address p.tel a{ font-size: 22px; font-weight: bold; color:#0080c7; text-decoration: none;} footer .footAdd .address .btnWeb{ width: 234px; margin-bottom: 5%;} footer .footAdd .address .btnWeb img{ width: 234px;} footer .footC{ float: none;} footer .footC p.ttl-area{ color:#0080c7; margin-bottom: 10px; line-height: 140%;} footer .footC h3{ font-weight: 500; font-size: 14px; margin: 0 0 5px;} footer .footC p{ line-height: 170%;} footer .footR{ display: none;} footer .footLink{ display: none;} footer .footLink li a:hover{ text-decoration: underline;} footer .copy{ background: #0080C7; text-align: center; font-size: 12px; padding: 10px 0; color: #FFF;} .ml16{ margin-left: 14px;} .mb25{ margin-bottom: 5%;} .mb35{ margin-bottom: 7%;} .fs12{ font-size: 12px;} .fs14{ font-size: 14px;} .pc{ display:none !important;} .sp{ display:inherit !important;} }