@charset "UTF-8";
/* 設定 */
/* 汎用 */
.clearfix:after, footer:after, ul.cancel-fee-list:after, ul.cancel-fee-list li:after, ul.weather-fee-list:after, ul.price-flow-list:after, .case-list-w dd:after, .case-list dd:after, .case-list-w:after, .case_still ul:after, .case_data ul:after, .case_edit ul:after, .toiawase-form nav ul:after, nav.inpage ul:after { content: ""; display: table; clear: both; }

.fontm { font-size: 0.88em; line-height: 1.57; }

.headerbar h1 a, .headerbar h5 a, .footerbar h1 a, .footerbar h5 a, .headerbar .facebookbtn a, .headerbar .twitterbtn a, .footerbar .facebookbtn a, .footerbar .twitterbtn a { display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; }

html { font-size: 16px; }

body { color: #4D4D4D; font-family: 'Helvetica Neue',Helvetica,Arial,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; background-color: #FFF; font-size: 1rem; }

a { color: #656565; text-decoration: none; }

a img { border: 0; }

.mt30 { margin-top: 30px; }

h1, h2, h3, h4, h5, p, body, ul, li, dl, dt, dd { margin: 0; padding: 0; display: block; }

/* 共通 */
header { width: 100%; z-index: 3; position: fixed; background-color: rgba(255, 255, 255, 0.8); }

.headerbar, .footerbar { height: 90px; }
.headerbar h1, .headerbar h5, .footerbar h1, .footerbar h5 { padding: 20px 0 0 0; color: #fff; float: left; width: 147px; }
.headerbar h1 a, .headerbar h5 a, .footerbar h1 a, .footerbar h5 a { width: 147px; height: 61px; background: url(../images/logo.svg) 0 0 no-repeat; background-size: 147px 61px; }
.headerbar a:hover, .footerbar a:hover { opacity: 0.8; }
.headerbar nav, .footerbar nav { text-align: right; padding: 30px 0 0 0; }
.headerbar nav a, .footerbar nav a { color: #666; }
.headerbar ul, .headerbar li, .footerbar ul, .footerbar li { display: inline-block; margin-left: 1.8em; vertical-align: middle; line-height: 20px; font-size: 0.88em; }
.headerbar .nav-main .sub, .headerbar .contactbtn, .footerbar .nav-main .sub, .footerbar .contactbtn { display: none; }
.headerbar .facebookbtn, .headerbar .twitterbtn, .footerbar .facebookbtn, .footerbar .twitterbtn { color: #666; display: inline-block; margin-left: 0.8em; }
.headerbar .facebookbtn a, .headerbar .twitterbtn a, .footerbar .facebookbtn a, .footerbar .twitterbtn a { width: 26px; height: 26px; background: url(../images/icon_facebook.svg) 0 0 no-repeat; background-size: 26px 26px; }
.headerbar .twitterbtn a, .footerbar .twitterbtn a { background-image: url(../images/icon_twitter.svg); }

section { margin-bottom: 90px; padding-top: 90px; }

article, .headerbar, .footer-inner, nav.inpage { width: 1000px; margin: 0 auto; }

.mainvisual { background: url(../images/bg_sky.jpg) center center no-repeat; background-size: cover; text-align: center; }

article { margin-bottom: 60px; }

h2.mainvisual { height: 60px; text-align: center; line-height: 60px; font-size: 50px; color: #FFF; padding: 120px 0; font-weight: normal; margin-bottom: 40px; }

h3 { font-size: 40px; font-weight: normal; margin-bottom: 0.25em; color: #4D4D4D; }

h4 { font-size: 1.5em; font-weight: normal; margin-bottom: 1em; border-bottom: 1px solid #B2B2B2; position: relative; }
h4 span { color: red; position: absolute; right: 0; top: 2px; font-size: 0.83em; }
h4.noline { border-bottom: 0 none; margin-bottom: 0; }

.waterbtn { background-color: #61CDFF; color: #FFF; text-align: center; margin: 0 auto; display: block; border-radius: 10px; }
.waterbtn:hover { background-color: #7bd5ff; }

.contactbtn a { background-color: #61CDFF; line-height: 1.375; font-size: 1em; position: relative; padding: 17px 0 13px; }
.contactbtn a strong { display: block; font-size: 2em; font-weight: normal; }
.contactbtn a::before, .contactbtn a::after { content: ""; display: block; width: 20px; height: 4px; background: #fff; position: absolute; transform: rotate(0deg); border-radius: 4px; right: 75px; top: 38px; }
.contactbtn a::before { transform: rotate(45deg); }
.contactbtn a::after { transform: rotate(-45deg); top: 50px; }

footer { background-color: #F1F1F1; text-align: center; padding-bottom: 26px; color: #666; }
footer small, footer .nav-sub { font-size: 0.75em; line-height: 4; }
footer small { float: left; }
footer .nav-sub { text-align: right; }
footer .nav-sub li { display: inline-block; margin-left: 1em; }
footer .nav-sub a:hover { opacity: 0.8; }
footer .footerbar { padding-top: 5px; }
footer .certification { height: 34px; line-height: 34px; font-weight: bold; font-size: 0.88em; border-top: 1px solid #B2B2B2; border-bottom: 1px solid #B2B2B2; text-align: left; }
footer .certification li { margin-right: 10px; display: inline; }

.privacypolicy > p { margin-bottom: 1.5em; }
.privacypolicy dt { margin-bottom: 1em; }
.privacypolicy dd { margin-bottom: 3em; margin-left: 1em; }
.privacypolicy dd ul, .privacypolicy dd ol { margin: 0.5em 0; padding-left: 2em; }
.privacypolicy dd li { display: list-item; padding-bottom: 0.5em; padding-left: 0.5em; }
.privacypolicy dd li ul { margin: 0.5em 0 0 1em; }

.about table { border-bottom: 1px solid #CCC; width: 100%; border-collapse: collapse; }
.about table th, .about table td { border-top: 1px solid #CCC; padding: 31px 34px; font-size: 1.13em; }
.about table th { background-color: #F1F1F1; text-align: left; font-weight: normal; }
.about table td li { padding-left: 1em; position: relative; }
.about table td li:before { content: ''; border: 1px solid #4D4D4D; width: 10px; height: 10px; position: absolute; left: 0; top: 7px; }

@media (max-width: 768px) { .onlypc { display: none; }
  .headerbar { height: 45px; }
  .headerbar h1, .headerbar h5 { padding: 10px 0 0 9px; width: 73px; }
  .headerbar h1 a, .headerbar h5 a { width: 73px; height: 30px; background-size: 73px 30px; }
  .headerbar .gnav { text-align: center; padding-top: 0; position: absolute; width: 100%; top: 0; right: 0; z-index: 2; overflow: hidden; display: block; }
  .headerbar .gnav-inner { overflow: hidden; width: 100%; height: 0; transition: all 0.3s; }
  .headerbar .gnav-inner.on { height: 100%; }
  .headerbar ul.nav-main { padding-top: 48px; display: block; margin-left: 0; }
  .headerbar ul.nav-main li { display: block; margin-left: 0; font-size: 0.94rem; line-height: 38px; border-bottom: 2px solid #FFF; background-color: #F2F2F2; }
  .headerbar ul.nav-main li a { display: block; padding: 0; text-align: left; text-indent: 1.8em; }
  .headerbar ul.nav-main .sub, .headerbar .contactbtn { display: block; }
  .headerbar ul.nav-main .sp { display: none; }
  .headerbar .contactbtn { margin: 15px 15px 0; }
  .headerbar .contactbtn a { color: #FFF; }
  .headerbar ul.nav-sns { text-align: center; padding: 20px 0; margin-left: -2em; }
  .headerbar .facebookbtn, .headerbar .twitterbtn { margin-left: 2em; }
  .headerbar .facebookbtn a, .headerbar .twitterbtn a { width: 28px; height: 28px; background-size: 28px 28px; }
  .footerbar { height: 60px; }
  .footerbar h1, .footerbar h5 { padding: 12px 0 0 0; width: 89px; }
  .footerbar h1 a, .footerbar h5 a { width: 89px; height: 37px; background-size: 89px 37px; }
  .footerbar nav.gnav { padding-top: 0; }
  .footerbar ul.nav-sns { padding: 15px 0; }
  .footerbar .facebookbtn a, .footerbar .twitterbtn a { width: 22px; height: 22px; background-size: 22px 22px; }
  header { transition: 1.5s top; }
  section { margin-bottom: 0; padding-top: 45px; }
  article, .headerbar, .footer-inner, nav.inpage { width: auto; margin: 0; }
  article { margin: 0 15px 35px; }
  h3 { font-size: 1rem; text-align: center; }
  h4 { font-size: 0.94rem; margin-bottom: 15px; }
  h4 span { font-size: 0.75rem; }
  #cover { background: #FFF; width: 100%; height: 0; display: block; position: fixed; top: 0; z-index: 1; }
  .humbergerbtn { width: 35px; height: 30px; display: block; position: absolute; right: 10px; top: 7px; z-index: 5; }
  .humbergerbtn span { display: block; width: 25px; height: 2px; background: #666; transition: all 0.3s; position: relative; left: 5px; top: 14px; }
  .humbergerbtn span:before, .humbergerbtn span:after { content: ""; display: block; width: 25px; height: 2px; background: #666; position: absolute; transform: rotate(0deg); transition: all 0.3s; }
  .humbergerbtn span:before { transform: translateY(9px); }
  .humbergerbtn span:after { transform: translateY(-9px); }
  .humbergerbtn.on span { background: rgba(255, 255, 255, 0); }
  .humbergerbtn.on span:after { transform: translateY(0px) rotate(-45deg); }
  .humbergerbtn.on span:before { transform: translateY(0px) rotate(45deg); }
  .mainvisual { width: 100%; height: 75px; margin-left: 0; margin-right: 0; }
  h2.mainvisual { height: 25px; padding: 25px 0; font-size: 1.25rem; line-height: 25px; margin-bottom: 15px; }
  footer { padding: 0 15px; }
  footer small { font-size: 0.63rem; }
  footer a.totop { margin-bottom: 36px; }
  footer img { width: 157px; height: 79px; margin-bottom: 18px; }
  footer .nav-main, footer .nav-sub { display: none; }
  footer .certification { height: auto; line-height: 20px; font-size: 0.75rem; font-weight: normal; padding: 10px 0; }
  footer .certification li { display: block; margin: 0; }
  .contactbtn a { background-color: #61CDFF; line-height: 14px; font-size: 0.75rem; position: relative; padding: 10px 0; }
  .contactbtn a strong { font-size: 1.13em; line-height: 20px; }
  .contactbtn a::before, .contactbtn a::after { width: 10px; height: 2px; border-radius: 2px; right: 18px; top: 21px; }
  .contactbtn a::after { top: 27px; }
  .warranty { font-size: 0.75rem; }
  .privacypolicy { font-size: 0.75rem; }
  .privacypolicy dt { margin-bottom: 0.5em; }
  .privacypolicy dd { margin-left: 0; }
  .privacypolicy dd ul, .privacypolicy dd ol { padding-left: 1.5em; }
  .privacypolicy dd li ul { margin: 0.5em 0 0 0; }
  .about table { border-bottom: 0 none; }
  .about table th, .about table td { padding: 10px 15px; font-size: 0.75rem; display: block; }
  .about table td { padding-bottom: 2em; }
  .about table td img { max-width: 230px; width: 100%; height: auto; } }
/* トップ */
#toppage .mainvisual { width: 100%; height: 670px; padding-top: 50px; font-size: 1.88rem; line-height: 1.567; color: #FFF; font-weight: bold; }
#toppage .mainvisual p { margin: 0 0 24px; }
#toppage .mainvisual .logo { width: 247px; height: auto; }
#toppage .topwhatsnew #whatsnew { width: 475px; float: left; }
#toppage .topwhatsnew h5 { font-size: 1.13em; background-color: #61CDFF; line-height: 44px; font-weight: normal; text-indent: 16px; color: #FFF; border-radius: 10px 10px 0 0; }
#toppage .topwhatsnew dl { width: 425px; height: 206px; float: left; padding: 15px; overflow: auto; border: 10px solid #F1F1F1; border-radius: 0 0 10px 10px; }
#toppage .topwhatsnew dt { float: left; }
#toppage .topwhatsnew dd { margin-left: 88px; margin-bottom: 10px; }
#toppage .topwhatsnew dd a { text-decoration: underline; }
#toppage .topwhatsnew img { width: 475px; height: 300px; border-radius: 10px; float: right; }

#drone { width: 466px; height: auto; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
#drone.fadeinfly { visibility: visible !important; }

@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(120px); }
  70% { opacity: 1; -webkit-transform: translateY(-20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(120px); transform: translateY(120px); }
  70% { opacity: 1; -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
.topnav ul { margin-right: -26px; }
.topnav li { float: left; width: 230px; margin-right: 26px; text-align: right; font-size: 0.88em; line-height: 1.333; }
.topnav li > p { text-align: left; margin-bottom: 5px; }
.topnav li a.skybtn { display: block; background: url(../images/bg_btn.jpg) center center no-repeat; width: 230px; height: 167px; padding-top: 23px; text-align: center; border-radius: 10px; margin-bottom: 20px; background-size: 100% 100%; transition: background-size 0.8s; /*transitionは通常時にセット*/ -webkit-transition: background-size 0.8s ease-in-out; }
.topnav li a.skybtn p { font-size: 1.4em; line-height: 28px; margin: 13px 0 0; }
.topnav li a.skybtn img { width: 80px; height: 80px; vertical-align: bottom; }
.topnav li a.skybtn:hover { background-size: 120% 120%; }

.top-pricebtn { text-align: center; padding-top: 10px; }
.top-pricebtn a { color: #FF7070; }
.top-pricebtn .waterbtn { color: #FFF; width: 475px; line-height: 51px; font-size: 1.25em; margin-bottom: 15px; }

.whatsnew-detail { border: 1px solid #B2B2B2; }
.whatsnew-detail h5, .whatsnew-detail p, .whatsnew-detail ul { margin: 0; padding: 15px; }
.whatsnew-detail h5 { border-bottom: 1px solid #B2B2B2; font-weight: normal; font-size: 1.5em; }
.whatsnew-detail p.date { border-bottom: 1px solid #B2B2B2; }
.whatsnew-detail p.lead { padding-bottom: 0; font-size: 1.13em; }
.whatsnew-detail ul { padding-left: 30px; padding-top: 0; }
.whatsnew-detail li { padding: 3px 0 3px 14px; text-indent: -14px; font-size: 0.88em; }
.whatsnew-detail a { text-decoration: underline; }

@media (max-width: 768px) { #toppage .mainvisual { height: 168px; padding-top: 12px; font-size: 0.69rem; line-height: 1.4; margin-bottom: 1px; }
  #toppage .mainvisual p { margin: 0 0 8px; }
  #toppage .mainvisual .logo { width: 90px; }
  #toppage .topwhatsnew #whatsnew { width: auto; float: none; margin-top: 15px; }
  #toppage .topwhatsnew h5 { height: 25px; padding: 5px 10px; line-height: 25px; font-size: 0.94rem; text-align: center; }
  #toppage .topwhatsnew dl { width: 100%; height: auto; font-size: 0.75rem; box-sizing: border-box; }
  #toppage .topwhatsnew dd:last-child { margin-bottom: 0; }
  #toppage .topwhatsnew img { display: none; }
  #drone { width: 116px; }
  .topnav ul { margin-right: 0; }
  .topnav li { width: 50%; margin-right: 0; margin-bottom: 16px; font-size: 0.75rem; box-sizing: border-box; }
  .topnav li:nth-child(odd) { padding-right: 7px; clear: both; }
  .topnav li:nth-child(even) { padding-left: 7px; }
  .topnav li a.skybtn { width: 100%; height: 100px; padding-top: 14px; margin-bottom: 10px; }
  .topnav li a.skybtn p { font-size: 0.75rem; line-height: 1.33; margin: 10px 0 0; }
  .topnav li a.skybtn img { width: 48px; height: 48px; }
  .top-pricebtn { text-align: center; padding-top: 10px; }
  .top-pricebtn a { color: #FF7070; font-size: 0.75rem; }
  .top-pricebtn .waterbtn { width: 100%; line-height: 31px; font-size: 0.75rem; margin-bottom: 8px; }
  .whatsnew-detail h5, .whatsnew-detail p, .whatsnew-detail ul { padding: 7px; }
  .whatsnew-detail h5 { font-size: 0.94rem; }
  .whatsnew-detail p { font-size: 0.75rem; }
  .whatsnew-detail p.date { font-size: 0.75rem; }
  .whatsnew-detail p.lead { font-size: 0.81rem; }
  .whatsnew-detail ul { padding-left: 15px; }
  .whatsnew-detail li { padding: 1px 0 1px 10px; text-indent: -10px; font-size: 0.63rem; } }
/* 料金案内 */
.price-lead { margin-bottom: 40px; }
.price-lead > p { font-size: 24px; margin-bottom: 15px; text-align: center; }
.price-lead ul { margin-right: -20px; }
.price-lead li { width: 320px; float: left; margin-right: 20px; margin-bottom: 20px; background-color: #F1F1F1; border-radius: 10px; }
.price-lead li h5 { height: 50px; padding: 15px; background-color: #61CDFF; color: #FFF; line-height: 25px; font-size: 20px; text-align: center; border-radius: 10px 10px 0 0; }
.price-lead li > div { padding: 15px 20px; min-height: 190px; }
.price-lead li:nth-of-type(2) h5 { line-height: 60px; }

.price-plan ul { margin-right: -20px; }
.price-plan li { width: 490px; float: left; margin-right: 20px; margin-bottom: 20px; background-color: #F1F1F1; border-radius: 10px; }
.price-plan li h5 { font-family: din-condensed,Oswald; height: 50px; padding: 5px 15px; background-color: #61CDFF; color: #FFF; line-height: 50px; font-size: 44px; text-align: right; border-radius: 10px 10px 0 0; }
.price-plan li h5 span { font-size: 21px; float: left; }
.price-plan li h5 strong { float: left; text-align: left; font-weight: normal; }
.price-plan li h5 em { font-size: 17px; float: left; margin-left: 5px; font-style: normal; }
.price-plan li > div { padding: 15px 20px; }
.price-plan li h6 { font-size: 20px; color: #61CDFF; margin: 0 0 5px; }
.price-plan li ul { margin: 0; display: flex; justify-content: flex-end; }
.price-plan li li { display: block; margin: 0 0 0 46px; position: relative; }
.price-plan li li::before, .price-plan li li::after { content: ""; display: block; width: 28px; height: 8px; background: #61CDFF; position: absolute; transform: rotate(0deg); left: -37px; top: 28px; }
.price-plan li li::after { transform: rotate(90deg); }
.price-plan li li:first-child::before, .price-plan li li:first-child::after { display: none; }
.price-plan li .drone { width: 148px; height: 69px; border-radius: 10px; background: #61CDFF url(../images/drone.svg) 11px 5px no-repeat; background-size: 94px 52px; position: relative; }
.price-plan li .drone p { position: absolute; right: 10px; bottom: 0; text-align: right; font-size: 21px; color: #FFF; }
.price-plan li .drone span { font-size: 36px; }
.price-plan li .peoplex2, .price-plan li .peoplex3 { width: 50px; height: 69px; position: relative; }
.price-plan li .peoplex2 span, .price-plan li .peoplex3 span { width: 30px; height: 69px; display: inline-block; position: relative; }
.price-plan li .peoplex2 span::before, .price-plan li .peoplex2 span::after, .price-plan li .peoplex3 span::before, .price-plan li .peoplex3 span::after { content: ""; display: block; width: 20px; background: #61CDFF; position: absolute; left: 0; }
.price-plan li .peoplex2 span::before, .price-plan li .peoplex3 span::before { height: 20px; border-radius: 10px; top: 0; }
.price-plan li .peoplex2 span::after, .price-plan li .peoplex3 span::after { height: 46px; border-radius: 10px 10px 0 0; bottom: 0; }
.price-plan li .peoplex2 span:last-child, .price-plan li .peoplex3 span:last-child { width: 20px; }
.price-plan li .peoplex3 { width: 80px; }
.price-plan li .special { width: 18px; padding: 10px 20px; height: 49px; line-height: 24px; color: #FFF; text-align: center; font-weight: bold; border-radius: 10px; background-color: #61CDFF; }
.price-plan li .special span { display: block; margin-top: 0.5px; }
.price-plan li.red h5 { background-color: #FF7070; }
.price-plan li.red h6 { color: #F00; }
.price-plan li.red .drone { background-color: #FF7070; }
.price-plan li.red li::before, .price-plan li.red li::after { background: #FF7070; }
.price-plan li.red .peoplex2 span::before, .price-plan li.red .peoplex2 span::after, .price-plan li.red .peoplex3 span::before, .price-plan li.red .peoplex3 span::after { background: #FF7070; }
.price-plan a { color: #FF7070; text-decoration: underline; }

.trialplan { background-color: #F1F1F1; border-radius: 10px; }
.trialplan h5 { height: 50px; padding: 5px 15px; background-color: #FF7070; color: #FFF; line-height: 50px; text-align: center; border-radius: 10px 10px 0 0; font-family: din-condensed,Oswald; font-size: 44px; text-align: right; }
.trialplan h5 span { font-size: 24px; float: left; }
.trialplan > div { padding: 15px 20px; }
.trialplan h6 { font-size: 20px; color: #FF7070; margin: 0 0 5px; }

.price-cancel > p { margin-bottom: 15px; }
.price-cancel > p strong { color: red; font-size: 120%; margin-right: 5px; }

ul.cancel-fee-list { margin-right: -28px; margin-bottom: 50px; }
ul.cancel-fee-list li { margin-right: 28px; float: left; width: 209px; background-color: rgba(178, 178, 178, 0.3); padding: 10px; border-radius: 10px; }
ul.cancel-fee-list li h5 { background-color: rgba(178, 178, 178, 0.3); border-radius: 10px; text-align: center; line-height: 60px; height: 60px; color: #FFF; font-size: 1.25em; margin: 0 0 15px; }
ul.cancel-fee-list figure { float: left; }
ul.cancel-fee-list p { font-weight: bold; line-height: 1; padding-top: 5px; float: right; color: #666; }
ul.cancel-fee-list p strong { font-weight: normal; display: block; font-size: 70px; font-family: din-condensed,Oswald; font-weight: 400; letter-spacing: -4px; color: #61CDFF; }
ul.cancel-fee-list p span { font-size: 50px; font-family: din-condensed,Monaco,Courier, monospace; font-weight: bold; margin-left: 4px; }
ul.cancel-fee-list li.blue { background-color: rgba(0, 160, 233, 0.3); }
ul.cancel-fee-list li.blue h5 { background-color: rgba(0, 160, 233, 0.3); }
ul.cancel-fee-list li.red { background-color: rgba(255, 112, 112, 0.3); }
ul.cancel-fee-list li.red h5 { background-color: rgba(255, 112, 112, 0.3); }
ul.cancel-fee-list li.red p strong { color: #FF7070; }
ul.cancel-fee-list li.red figure.pie { background-image: linear-gradient(to right, transparent 50%, #FF7070 0); }
ul.cancel-fee-list li.red figure.pie.per60::before { background-color: #FF7070; }
ul.cancel-fee-list li.red figure.pie.per70::before { background-color: #FF7070; }
ul.cancel-fee-list li.red figure.pie.per80::before { background-color: #FF7070; }
ul.cancel-fee-list li.red figure.pie.per90::before { background-color: #FF7070; }
ul.cancel-fee-list li.red figure.pie.per100::before { background-color: #FF7070; }
ul.cancel-fee-list li.addmemo { position: relative; }
ul.cancel-fee-list li.addmemo::before { content: '（AM6：00を目処）'; width: 100%; position: absolute; bottom: -1.4em; text-align: center; font-size: 18px; letter-spacing: 2px; line-height: 1; }
ul.cancel-fee-list.inaddmemo { margin-bottom: 80px; }

ul.weather-fee-list { margin-right: -27px; margin-bottom: 70px; }
ul.weather-fee-list li { margin-right: 27px; float: left; width: 178px; text-align: center; }
ul.weather-fee-list li figure { background: rgba(128, 128, 128, 0.3) none center center no-repeat; height: 140px; width: 100%; background-size: 120px auto; margin: 0; position: relative; border-radius: 10px; margin-bottom: 8px; }
ul.weather-fee-list li figure::before, ul.weather-fee-list li figure::after { content: ""; display: block; width: 118px; height: 6px; border-radius: 3px; background-color: #61CDFF; position: absolute; left: 33px; top: 65px; }
ul.weather-fee-list li figure:before { transform: rotate(45deg); }
ul.weather-fee-list li figure::after { transform: rotate(-45deg); }
ul.weather-fee-list li:nth-child(1) figure { background-image: url(../images/weather_rain.svg); }
ul.weather-fee-list li:nth-child(2) figure { background-image: url(../images/weather_thunder.svg); }
ul.weather-fee-list li:nth-child(3) figure { background-image: url(../images/weather_wind.svg); background-size: 146px auto; }
ul.weather-fee-list li:nth-child(4) figure { background-image: url(../images/weather_snow.svg); }
ul.weather-fee-list li:nth-child(5) figure { background-image: url(../images/weather_typhoon.svg); background-size: 198px auto; background-position: 5px center; }

ul.price-flow-list li { width: 229px; margin-right: 28px; margin-bottom: 28px; float: left; position: relative; }
ul.price-flow-list li img { width: 100%; height: auto; }
ul.price-flow-list li p { font-size: 0.75em; padding-top: 10px; }
ul.price-flow-list li p.link { text-align: right; font-size: 0.88em; }
ul.price-flow-list li p.link a { color: red; }
ul.price-flow-list li::after { content: ""; display: block; width: 0; height: 0; border: 0 transparent solid; border-left: 10px #B2B2B2 solid; border-top-width: 15px; border-bottom-width: 15px; position: absolute; right: -17px; top: 52px; }
ul.price-flow-list li:nth-child(4n) { margin-right: 0; }
ul.price-flow-list li:nth-child(4n)::after { display: none; }

.cancel-job { border: 1px solid #FF7070; padding: 15px 20px; font-size: 1.25em; position: relative; }
.cancel-job dl { color: #FF7070; padding-bottom: 50px; }
.cancel-job dl dd { margin-bottom: 1em; }
.cancel-job .cancelbtn { position: absolute; bottom: 10px; right: 350px; width: 304px; height: 58px; line-height: 58px; background-color: #FF7070; font-size: 26px; color: #FFF; text-align: center; text-indent: -1em; border-radius: 10px; }
.cancel-job .cancelbtn::before, .cancel-job .cancelbtn::after { content: ""; display: block; width: 14px; height: 4px; background: #fff; position: absolute; transform: rotate(0deg); border-radius: 4px; right: 20px; top: 22px; }
.cancel-job .cancelbtn::before { transform: rotate(45deg); }
.cancel-job .cancelbtn::after { transform: rotate(-45deg); top: 30px; }
.cancel-job .cancelbtn:hover { background-color: #ff8a8a; }

figure.pie { margin: 0; width: 86px; height: 86px; border-radius: 50%; background-color: #FFF; background-image: linear-gradient(to right, transparent 50%, #61CDFF 0); }
figure.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; }
figure.pie.per10::before { transform: rotate(36deg); }
figure.pie.per20::before { transform: rotate(72deg); }
figure.pie.per30::before { transform: rotate(108deg); }
figure.pie.per40::before { transform: rotate(144deg); }
figure.pie.per50::before { transform: rotate(180deg); }
figure.pie.per60::before { transform: rotate(36deg); background-color: #61CDFF; }
figure.pie.per70::before { transform: rotate(72deg); background-color: #61CDFF; }
figure.pie.per80::before { transform: rotate(108deg); background-color: #61CDFF; }
figure.pie.per90::before { transform: rotate(144deg); background-color: #61CDFF; }
figure.pie.per100::before { transform: rotate(180deg); background-color: #61CDFF; }

#samplebox { margin-top: 10px; }
#samplebox a { color: #FF7070; text-decoration: underline; }

#popup { display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 100; text-align: center; display: flex; justify-content: center; align-items: center; }
#popup img { width: 100%; max-width: 800px; }

@media (min-width: 769px) { .price-plan #planc ul { margin-top: -64px; }
  ul.price-flow-list li:nth-child(4n)::after { display: none; } }
@media (max-width: 768px) { .price-plan #planc ul { margin-top: -40px; }
  .price-lead { margin-bottom: 20px; }
  .price-lead > p { font-size: 0.81rem; margin-bottom: 15px; text-align: left; }
  .price-lead ul { margin-right: 0; }
  .price-lead li { width: 100%; margin-right: 0; float: none; margin-bottom: 15px; background-color: #F1F1F1; }
  .price-lead li h5 { height: auto; padding: 5px 10px; line-height: 1.3; font-size: 0.94rem; }
  .price-lead li > div { padding: 10px 14px; min-height: auto; }
  .price-lead li > div p { font-size: 0.75rem; }
  .price-lead li:nth-of-type(2) h5 { line-height: 1.3; }
  .price-plan { font-size: 0.75rem; }
  .price-plan ul { margin-right: 0; }
  .price-plan li { width: 100%; margin-right: 0; float: none; margin-bottom: 15px; }
  .price-plan li h5 { height: 25px; padding: 5px 10px; line-height: 25px; font-size: 1.63rem; }
  .price-plan li h5 span { font-size: 0.81rem; }
  .price-plan li h5 em { font-size: 0.69rem; }
  .price-plan li > div { padding: 10px 14px; }
  .price-plan li h6 { font-size: 0.75rem; margin: 0 0 3px; }
  .price-plan li li { margin: 0 0 0 26px; }
  .price-plan li li::before, .price-plan li li::after { width: 16px; height: 5px; left: -23px; top: 18px; }
  .price-plan li .drone { width: 88px; height: 40px; border-radius: 5px; background-position: 7px 3px; background-size: 53px 28px; }
  .price-plan li .drone p { right: 5px; font-size: 0.81rem; }
  .price-plan li .drone span { font-size: 1.38rem; }
  .price-plan li .peoplex2, .price-plan li .peoplex3 { width: 30px; height: 40px; position: relative; }
  .price-plan li .peoplex2 span, .price-plan li .peoplex3 span { width: 17px; height: 40px; }
  .price-plan li .peoplex2 span::before, .price-plan li .peoplex2 span::after, .price-plan li .peoplex3 span::before, .price-plan li .peoplex3 span::after { width: 12px; }
  .price-plan li .peoplex2 span::before, .price-plan li .peoplex3 span::before { height: 12px; border-radius: 10px; top: 0; }
  .price-plan li .peoplex2 span::after, .price-plan li .peoplex3 span::after { height: 27px; border-radius: 6px 6px 0 0; }
  .price-plan li .peoplex2 span:last-child, .price-plan li .peoplex3 span:last-child { width: 12px; }
  .price-plan li .peoplex3 { width: 47px; }
  .price-plan li .special { width: 14px; padding: 5px 10px; height: 30px; line-height: 12px; font-size: 0.69rem; border-radius: 5px; }
  .price-plan li .special span { margin-top: 3px; }
  .trialplan { font-size: 0.75rem; }
  .trialplan h5 { height: 25px; padding: 5px 10px; line-height: 25px; font-size: 0.94rem; }
  .trialplan > div { padding: 10px 14px; }
  .trialplan h6 { font-size: 0.75rem; margin: 0 0 3px; }
  .price-cancel h4 { border-bottom: 0 none; }
  .price-cancel h4 span { padding-top: 7px; border-top: 1px solid #B2B2B2; position: static; display: block; }
  .price-cancel > p { margin-bottom: 10px; font-size: 0.75rem; }
  ul.cancel-fee-list { margin-bottom: 0; margin-right: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
  ul.cancel-fee-list::after { display: none; }
  ul.cancel-fee-list li { width: 138px; float: none; margin-right: 0; margin-bottom: 16px; font-size: 0.75rem; box-sizing: border-box; padding: 6px; border-radius: 6px; }
  ul.cancel-fee-list li h5 { border-radius: 6px; line-height: 35px; height: 35px; font-size: 0.75rem; margin: 0 0 9px; }
  ul.cancel-fee-list p { padding-top: 2px; }
  ul.cancel-fee-list p strong { font-size: 2.62rem; letter-spacing: -2px; }
  ul.cancel-fee-list p span { font-size: 1.88rem; margin-left: 2px; }
  ul.cancel-fee-list li.addmemo::before { font-size: 12px; letter-spacing: 0; }
  ul.cancel-fee-list.inaddmemo { margin-bottom: 30px; }
  ul.weather-fee-list { margin-left: -6px; margin-right: -6px; margin-bottom: 15px; }
  ul.weather-fee-list li { margin-left: 6px; margin-right: 6px; margin-bottom: 10px; width: 88px; font-size: 0.75rem; }
  ul.weather-fee-list li figure { height: 69px; background-size: 60px auto; border-radius: 5px; margin-bottom: 4px; }
  ul.weather-fee-list li figure::before, ul.weather-fee-list li figure::after { width: 58px; height: 4px; border-radius: 2px; left: 16px; top: 33px; }
  ul.weather-fee-list li:nth-child(3) figure { background-size: 72px auto; }
  ul.weather-fee-list li:nth-child(5) figure { background-size: 95px auto; background-position: 3px center; }
  ul.price-flow-list li { width: 136px; margin-right: 18px; margin-bottom: 18px; }
  ul.price-flow-list li p { font-size: 0.69rem; padding-top: 6px; }
  ul.price-flow-list li p.link { font-size: 0.69rem; }
  ul.price-flow-list li::after { border-left: 6px #B2B2B2 solid; border-top-width: 9px; border-bottom-width: 9px; right: -12px; top: 31px; }
  ul.price-flow-list li:nth-child(odd) { clear: both; }
  ul.price-flow-list li:nth-child(even) { margin-right: 0; }
  ul.price-flow-list li:nth-child(even)::after { display: none; }
  .cancel-job { border: 0 none; padding: 0; font-size: 0.75rem; }
  .cancel-job dl { padding: 5px 0; border-top: 1px solid #FF7070; }
  .cancel-job dd { margin-left: 1em; text-indent: -1em; }
  .cancel-job .cancelbtn { position: relative; bottom: 0; right: 0; width: 100%; display: block; height: auto; line-height: 31px; font-size: 0.75rem; text-indent: -1em; border-radius: 5px; }
  .cancel-job .cancelbtn::before, .cancel-job .cancelbtn::after { width: 10px; height: 2px; border-radius: 2px; right: 18px; top: 11px; }
  .cancel-job .cancelbtn::after { top: 17px; }
  figure.pie { margin: 0; width: 50px; height: 50px; }
  #pricepage section .contactbtn { display: none; } }
@media (min-width: 375px) and (max-width: 413px) { ul.cancel-fee-list li { width: 168px; }
  ul.price-flow-list li { width: 163px; }
  ul.price-flow-list li::after { top: 40px; } }
@media (min-width: 414px) and (max-width: 609px) { ul.cancel-fee-list li { width: 185px; }
  ul.price-flow-list li { width: 183px; }
  ul.price-flow-list li::after { top: 48px; }
  ul.weather-fee-list { margin-left: -5px; margin-right: -5px; }
  ul.weather-fee-list li { margin-left: 5px; margin-right: 5px; } }
@media (min-width: 610px) and (max-width: 768px) { ul.price-flow-list li:nth-child(odd) { clear: none; }
  ul.price-flow-list li:nth-child(even) { margin-right: 18px; }
  ul.price-flow-list li:nth-child(even)::after { display: block; }
  ul.price-flow-list li:nth-child(4n)::after { display: none; } }
/* 業務事例 */
.case-list-w dt, .case-list dt { font-size: 1.5em; line-height: 36px; font-weight: normal; padding-bottom: 9px; margin-bottom: 1em; border-bottom: 1px solid #B2B2B2; text-indent: 50px; background: url(../images/icon_drone.svg) 0 0 no-repeat; background-size: 36px 36px; }
.case-list-w h5, .case-list h5 { font-size: 1em; margin-bottom: 5px; }
.case-list-w dd, .case-list dd { font-size: 0.88em; margin-bottom: 40px; }
.case-list-w img, .case-list img { float: left; width: 280px; height: auto; }
.case-list-w p, .case-list p { margin-left: 290px; }

.case-list-w dd { float: left; width: 480px; }
.case-list-w dd:nth-of-type(2n) { margin-left: 40px; }

.case-list { float: left; width: 480px; }
.case-list:nth-of-type(2n) { margin-left: 40px; }

.case_still h4, .case_data h4, .case_edit h4 { line-height: 36px; text-indent: 50px; padding-bottom: 9px; background: url(../images/still.svg) 0 0 no-repeat; background-size: 36px 36px; }
.case_still ul, .case_data ul, .case_edit ul { margin-right: -50px; }
.case_still li, .case_data li, .case_edit li { width: 300px; float: left; margin-right: 50px; }
.case_still li h5, .case_data li h5, .case_edit li h5 { font-size: 1em; }
.case_still li p, .case_data li p, .case_edit li p { font-size: 0.75em; }

.case_data h4 { background-image: url(../images/data.svg); }
.case_data ul { margin-right: -40px; }
.case_data li { width: 480px; margin-right: 40px; }

.case_edit h4 { background-image: url(../images/edit.svg); }

.case_prise strong { font-weight: normal; display: block; font-size: 3.12em; font-family: Oswald; color: #B2B2B2; line-height: 1.1; margin-bottom: 15px; }

@media (max-width: 768px) { .case-list-w dt, .case-list dt { font-size: 0.94rem; line-height: 20px; padding-bottom: 4px; text-indent: 26px; background-size: 20px 20px; }
  .case-list-w h5, .case-list h5 { font-size: 0.81rem; margin-bottom: 3px; }
  .case-list-w dd, .case-list dd { font-size: 0.75rem; margin-bottom: 20px; }
  .case-list-w img, .case-list img { float: none; width: 100%; height: auto; }
  .case-list-w p, .case-list p { margin-left: 0; }
  .case-list-w dd { float: none; width: auto; }
  .case-list-w dd:nth-of-type(2n) { margin-left: 0; }
  .case-list { float: none; width: auto; }
  .case-list:nth-of-type(2n) { margin-left: 0; }
  .case_still h4, .case_data h4, .case_edit h4 { line-height: 20px; text-indent: 25px; padding-bottom: 4px; background-size: 20px 20px; }
  .case_still ul, .case_data ul, .case_edit ul { margin-right: 0; }
  .case_still li, .case_data li, .case_edit li { width: auto; float: none; margin-right: 0; margin-bottom: 25px; }
  .case_still li h5, .case_data li h5, .case_edit li h5 { font-size: 0.81rem; }
  .case_still li p, .case_data li p, .case_edit li p { font-size: 0.75rem; }
  .case_still img, .case_data img, .case_edit img { width: 100%; height: auto; }
  .case_prise { font-size: 0.75rem; }
  .case_prise strong { font-weight: normal; display: block; font-size: 1.56rem; font-family: Oswald; color: #B2B2B2; line-height: 1.1; margin-bottom: 15px; } }
/* お問い合わせ */
.toiawase-lead p { text-align: center; }

.toiawase-form nav li { width: 485px; height: 80px; float: left; }
.toiawase-form nav li:last-child { float: right; }
.toiawase-form nav a, .toiawase-form nav span { display: block; line-height: 80px; text-align: center; background-color: #B2E2F8; border-radius: 10px 10px 0 0; }
.toiawase-form nav li:last-child a, .toiawase-form nav li:last-child span { background-color: #FFD4D4; }
.toiawase-form h4 { display: none; }
.toiawase-form form { background-color: #F1F1F1; padding: 60px 85px 40px; border: 15px solid #CCC; }
.toiawase-form input[type="text"], .toiawase-form textarea, .toiawase-form input[type="submit"], .toiawase-form #thanks a { -webkit-appearance: none; box-sizing: border-box; width: 100%; border-radius: 10px; padding: 15px; font-size: 1em; border: 2px solid #B2B2B2; }
.toiawase-form input[type="submit"], .toiawase-form #thanks a { background-color: #B2B2B2; color: #FFF; font-size: 1.25em; transition: background-color 0.2s; -webkit-transition: background-color 0.2s ease-in-out; }
.toiawase-form input[type="submit"]:hover, .toiawase-form #thanks a:hover { background-color: #999; }
.toiawase-form dt { margin-bottom: 10px; }
.toiawase-form dd { margin-bottom: 30px; }
.toiawase-form dd.comment { text-align: center; }
.toiawase-form .red { color: #FF7070; }

#toiawasepage .toiawase-form form { border-color: #B2E2F8; }

#askpage .toiawase-form form { border-color: #FFD4D4; }

#confirm h4, #thanks h4 { margin-bottom: 25px; }
#confirm p, #thanks p { font-size: 0.88em; }
#confirm a, #thanks a { width: 33%; margin: 50px auto 0; font-size: 16px; border-radius: 10px; padding: 10px; background-color: #61CDFF; display: block; color: #FFF; text-align: center; }

@media (max-width: 768px) { .toiawase-lead p { font-size: 0.75rem; }
  .toiawase-form nav li { width: auto; height: auto; float: none; }
  .toiawase-form nav li:last-child { float: none; }
  .toiawase-form nav a, .toiawase-form nav span { font-size: 0.75rem; padding-top: 10px; padding-bottom: 10px; line-height: 20px; border-radius: 5px; background-color: #61CDFF; color: #FFF; }
  .toiawase-form nav span { display: none; }
  .toiawase-form h4 { margin-top: 2em; display: block; position: relative; border-bottom: 0 none; text-align: center; margin-bottom: 2em; }
  .toiawase-form h4::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; margin: 0 auto; text-align: center; background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent); background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent); background-position: center; background-repeat: no-repeat; }
  .toiawase-form form { background-color: #FFF; padding: 10px 0 10px; font-size: 0.75rem; }
  .toiawase-form input[type="text"], .toiawase-form textarea, .toiawase-form input[type="submit"] { -webkit-appearance: none; border-radius: 5px; padding: 5px; font-size: 0.88rem; border: 1px solid #B2B2B2; }
  .toiawase-form input[type="submit"] { font-size: 0.88rem; }
  .toiawase-form dt { margin-bottom: 5px; }
  .toiawase-form dd { margin-bottom: 20px; }
  .toiawase-form dd.comment { text-align: left; }
  .toiawase-form td { display: block; }
  #confirm h4, #thanks h4 { margin-bottom: 15px; }
  #confirm p, #thanks p { font-size: 0.75rem; }
  #confirm a, #thanks a { width: 50%; margin: 35px auto 0; border-radius: 5px; padding: 5px; font-size: 0.88rem; } }
/* お問い合わせ */
nav.inpage ul { margin-right: -20px; }
nav.inpage li { width: 320px; margin-right: 20px; margin-bottom: 20px; float: left; }
nav.inpage a { display: block; height: 80px; line-height: 80px; text-align: center; background-color: #F1F1F1; }
nav.inpage a:hover, nav.inpage a.now { background-color: #E5E5E5; }

.faqs { background-color: #F1F1F1; padding: 0 100px 100px; box-sizing: border-box; }
.faqs h3 { text-align: center; color: #4D4D4D; font-size: 1.25em; margin: 0; padding: 32px 0 27px; }
.faqs dl { background-color: #fff; padding: 20px; }
.faqs dt { margin-bottom: 14px; position: relative; text-indent: 1.3em; line-height: 1.4; }
.faqs dt::before { content: ""; display: block; width: 16px; height: 16px; position: absolute; box-sizing: border-box; border: 1px solid #666; border-radius: 16px; left: 0; top: 3px; }
.faqs dt::after { content: ""; display: block; width: 10px; height: 10px; position: absolute; box-sizing: border-box; border: 1px solid #666; border-radius: 10px; left: 3px; top: 6px; }
.faqs dd { margin-bottom: 28px; margin-left: 17px; position: relative; text-indent: 1.3em; line-height: 1.4; }
.faqs dd::before { content: ""; display: block; width: 16px; height: 16px; position: absolute; box-sizing: border-box; border: 1px solid #666; border-radius: 16px; left: 0; top: 3px; }
.faqs dd a { text-decoration: underline; }

@media (max-width: 768px) { nav.inpage ul { margin-right: 0; margin-bottom: 50px; }
  nav.inpage li { width: 240px; margin: 0 auto 1px; float: none; }
  nav.inpage a { height: auto; line-height: 3; font-size: 0.75rem; }
  .faqs { background-color: #FFF; padding: 0; }
  .faqs h3 { text-align: center; color: #4D4D4D; font-size: 1rem; padding: 15px 0 5px; margin-bottom: 35px; position: relative; }
  .faqs h3::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; margin: 0 auto; text-align: center; background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent); background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent); background-position: center; background-repeat: no-repeat; }
  .faqs dl { padding: 0; }
  .faqs dt { line-height: 1.4; font-size: 0.88rem; }
  .faqs dt::before { width: 12px; height: 12px; border-radius: 12px; }
  .faqs dt::after { width: 8px; height: 8px; border-radius: 8px; left: 2px; top: 5px; }
  .faqs dd { margin-left: 0; font-size: 0.88rem; }
  .faqs dd::before { width: 12px; height: 12px; border-radius: 12px; } }