@charset "UTF-8";

/* =========================================
   そらいろラボ｜PRICE GUIDE
   トップ・WORKS・CONTACT とデザイン統一
========================================= */

:root{
  --blue:#4d93d8;
  --dark-blue:#214a78;
  --text:#333b47;
  --muted:#687383;
  --line:#e1e7ee;
  --pale:#f4f9ff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ヘッダー：トップページと統一 */
.site-header{
  position:static;
  height:88px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(77,147,216,.16);
  background:rgba(255,255,255,.97);
}
.site-logo{
  display:block;
  width:180px;
  margin-right:auto;
}
.site-logo img{
  width:100%;
  height:auto;
}
.nav{
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:600;
}
.nav a{
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  color:#4f5d6c;
}
.nav a:hover,
.nav a.current{
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.menu-btn{
  display:none;
  background:none;
  border:1px solid #b8cfe4;
  color:#4f6680;
  padding:8px 12px;
  border-radius:6px;
  font:inherit;
}


/* ---------- ヒーロー：WORKSと完全統一 ---------- */

/* ページ上部 */
.pricing-hero{
  padding:70px 20px 55px;
  background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%);
}
.section-heading{
  text-align:center;
  margin-bottom:0;
}
.heading-deco{
  color:#a9cfee;
  letter-spacing:15px;
  font-size:22px;
}
.section-heading h1{
  margin:0;
  color:#263f60;
  font-size:34px;
  letter-spacing:.12em;
  font-weight:600;
}
.section-heading p{
  margin:5px 0 0;
  color:#606b78;
  font-size:13px;
}
/* ---------- 共通 ---------- */

.section{
  width:min(1180px,92%);
  margin:0 auto;
  padding:75px 0;
}

.section-heading{
  text-align:center;
  margin-bottom:40px;
}

.heading-deco{
  color:#a9cfee;
  letter-spacing:15px;
  font-size:22px;
}

.section-heading h2{
  margin:0;
  color:#263f60;
  font-size:30px;
  letter-spacing:.12em;
}

.section-heading p{
  margin:4px 0 0;
  color:#606b78;
  font-size:13px;
}
.pricing-intro{
  max-width:680px;
  margin:25px auto 0;
  padding:17px 25px;
  border:1px solid #dcebf8;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  text-align:center;
  color:#667d91;
  font-size:12px;
  line-height:1.8;
}
/* ---------- 料金カード ---------- */

.pricing-section{
  padding-top:55px;
}

.price-summary{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:-12px auto 32px;
}

.price-summary a{
  border:1px solid #d8e6f2;
  border-radius:999px;
  padding:5px 13px;
  font-size:11px;
  color:#5786ae;
  background:#fff;
  transition:.2s;
}

.price-summary a:hover{
  background:#f2f8fd;
  transform:translateY(-1px);
}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.price-card{
  border:1px solid #e1e7ee;
  border-radius:15px;
  padding:26px 25px 25px;
  background:#fff;
  box-shadow:0 6px 22px rgba(40,80,120,.05);
  position:relative;
}

.price-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:5px;
  border-radius:15px 15px 0 0;
  background:#4d93d8;
}

.price-card.ec:before{background:#86d165}
.price-card.image:before{background:#a87ce9}
.price-card.design:before{background:#fcba2e}
.price-card.sns:before{background:#f78aaf}
.price-card.goods:before{background:#6dcebb}

.price-icon{
  width:60px;
  height:60px;
  margin:0 auto 9px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#79b3df;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
}

.ec .price-icon{background:#78b75d}
.image .price-icon{background:#a878c7}
.design .price-icon{background:#f4b83f}
.sns .price-icon{background:#ed8cae}
.goods .price-icon{background:#62bec4}

.price-en{
  display:block;
  text-align:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:#4d93d8;
}

.ec .price-en{color:#86d165}
.image .price-en{color:#a87ce9}
.design .price-en{color:#e6a91e}
.sns .price-en{color:#f078a0}
.goods .price-en{color:#55b5a7}

.price-card h3{
  text-align:center;
  margin:4px 0 8px;
  color:#294b70;
  font-size:17px;
}

.price{
  text-align:center;
  margin:0;
  color:#2f6fa9;
  font-size:30px;
  font-weight:800;
  line-height:1.2;
}

.price span{
  font-size:14px;
  margin-left:2px;
  font-weight:700;
}

.price-note{
  text-align:center;
  color:#7b8794;
  font-size:11px;
  margin:5px 0 17px;
}

.price-card ul{
  list-style:none;
  margin:0;
  padding:14px 0 0;
  border-top:1px solid #edf0f3;
}

.price-card li{
  position:relative;
  padding:3px 0 3px 17px;
  font-size:12px;
  color:#596572;
}

.price-card li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:#73a8d4;
  font-weight:800;
}

/* ---------- 見積り ---------- */

.estimate-box{
  width:min(850px,94%);
  margin:35px auto 0;
  padding:20px 25px;
  border:1px solid #dcebf8;
  border-radius:15px;
  background:linear-gradient(135deg,#f5faff,#fbf9ff);
  display:flex;
  align-items:center;
  gap:16px;
}

.estimate-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  background:#e8f4ff;
  color:#5b9ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.estimate-box h3{
  color:#2d5f91;
  margin:0;
  font-size:15px;
}

.estimate-box p{
  color:#667d91;
  font-size:12px;
  line-height:1.8;
  margin:4px 0 0;
}

/* ---------- 詳しい料金表 ---------- */

.detail-section{
  padding-top:35px;
}

.detail-card{
  border:1px solid #e1e7ee;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 18px rgba(40,80,120,.04);
  margin:0 auto 20px;
  overflow:hidden;
}

.detail-title{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  border-bottom:1px solid #edf0f3;
  background:#fbfdff;
}

.detail-title>span{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
  background:#79b3df;
}

.detail-title small{
  display:block;
  color:#78a8ce;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:800;
}

.detail-title h3{
  margin:1px 0 0;
  color:#294b70;
  font-size:17px;
}

.ec-title>span{background:#78b75d}
.ec-title small{color:#80b66c}
.design-title>span{background:#f4b83f}
.design-title small{color:#d8a72f}
.image-title>span{background:#a878c7}
.image-title small{color:#a878c7}
.sns-title>span{background:#ed8cae}
.sns-title small{color:#ed8cae}
.goods-title>span{background:#62bec4}
.goods-title small{color:#55b5a7}

.detail-card table{
  width:100%;
  border-collapse:collapse;
}

.detail-card th,
.detail-card td{
  padding:11px 20px;
  text-align:left;
  font-size:12px;
  border-bottom:1px solid #eef1f4;
}

.detail-card th{
  background:#f7fafc;
  color:#58718a;
  font-weight:700;
}

.detail-card td:last-child{
  width:28%;
  color:#3977ae;
  font-weight:700;
  text-align:right;
}

.detail-card tr:last-child td{
  border-bottom:0;
}

.price-table-note{
  width:min(900px,94%);
  margin:20px auto 0;
  color:#7b8792;
  font-size:11px;
  line-height:1.9;
  text-align:center;
}

/* ---------- 料金について ---------- */

.pricing-info{
  padding-top:35px;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.info-grid article{
  border:1px solid #e5ebf0;
  border-radius:12px;
  padding:21px 24px;
  background:#fff;
}

.info-grid h3{
  color:#365e86;
  font-size:14px;
  margin:0 0 5px;
}

.info-grid p{
  color:#606c78;
  font-size:12px;
  line-height:1.8;
  margin:0;
}

/* ---------- 対応外業務 ---------- */

.outside{
  padding-top:35px;
}

.outside-box{
  width:min(850px,94%);
  margin:0 auto;
  padding:27px 32px;
  border:1px solid #e6e9ec;
  border-radius:15px;
  background:#fafcfd;
}

.outside-box p{
  font-size:13px;
  color:#55616d;
  margin:0 0 12px;
}

.outside-box ul{
  margin:0 0 15px;
  padding:0;
  list-style:none;
}

.outside-box li{
  position:relative;
  padding:4px 0 4px 20px;
  font-size:12px;
  color:#596572;
}

.outside-box li:before{
  content:"•";
  position:absolute;
  left:3px;
  color:#8aa8c2;
  font-size:18px;
  line-height:1;
}

.outside-box .outside-note{
  padding-top:13px;
  border-top:1px solid #e7ebef;
  color:#7a8590;
  font-size:11px;
  margin:0;
}

/* ---------- 下部お問い合わせ ---------- */

.pricing-contact{
  margin-top:20px;
  padding:70px 6vw;
  text-align:center;
  background:#edf5fc;
}

.pricing-contact>div{
  width:min(850px,92%);
  margin:auto;
}

.pricing-contact>div>span{
  color:#5c91bf;
  font-size:11px;
  letter-spacing:.22em;
  font-weight:800;
}

.pricing-contact h2{
  color:#294f77;
  font-size:25px;
  letter-spacing:.05em;
  margin:5px 0 8px;
}

.pricing-contact p{
  color:#607080;
  font-size:13px;
  margin:0 0 20px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:999px;
  padding:11px 24px;
  font-weight:700;
  font-size:14px;
  transition:.2s;
}

.btn:hover{transform:translateY(-2px)}

.btn-blue{
  background:#438bd3;
  color:#fff;
  box-shadow:0 7px 18px rgba(67,139,211,.2);
}

/* ---------- フッター ---------- */

.footer{
  margin-top:0;
  padding:35px 6vw 20px;
  background:#edf5fc;
  color:#4b79a4;
  text-align:center;
}

.footer-logo img{
  width:180px;
  height:auto;
  display:block;
  margin:0 auto;
}

.footer nav{
  display:flex;
  justify-content:center;
  gap:30px;
  margin:20px 0;
  font-size:12px;
}

.footer p{
  font-size:10px;
  margin:0;
}
/* ---------- 下部メッセージ ---------- */

.works-message{
  width:min(700px,92%);
  margin:0 auto 85px;
  padding:25px 28px 28px;
  border:1px solid #dcebf8;
  border-radius:14px;
  background:linear-gradient(135deg,#f5faff,#fbf9ff);
  text-align:center;
}

.works-message .heading-deco{
  display:block;
  margin-bottom:2px;
}

.works-message h2{
  margin:0;
  color:#2d5f91;
  font-size:20px;
  font-weight:600;
}

.works-message p{
  margin:5px 0 18px;
  color:#667d91;
  font-size:12px;
  line-height:1.8;
}
/* ---------- レスポンシブ ---------- */

@media(max-width:1050px){
  .nav{gap:24px}
  .price-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
	
	
	  .works-message{
    width:92%;
    margin-bottom:60px;
    padding:22px 18px 25px;
  }

  .works-message h2{
    font-size:18px;
  }

  .works-message p{
    font-size:11px;
  }

  .site-header{
    height:74px;
    padding:0 5vw;
  }

  .site-logo{
    width:135px;
  }

  .nav{display:none}

  .menu-btn{
    display:block;
    font-size:11px;
    letter-spacing:.08em;
  }

.pricing-hero{
  padding:55px 18px 42px;
}

  .section-heading h1{
    font-size:30px;
  }

  .section-heading p{
    font-size:12px;
  }

  .pricing-intro{
    margin-top:20px;
    padding:15px 16px;
    font-size:11px;
  }

  .section{
    width:92%;
    padding:55px 0;
  }

  .section-heading h2{
    font-size:27px;
  }

  .price-grid{
    grid-template-columns:1fr;
  }

  .price-card{
    padding:24px 22px;
  }

  .estimate-box{
    align-items:flex-start;
    padding:18px;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .outside-box{
    padding:22px 20px;
  }

  .pricing-contact{
    padding:55px 5vw;
  }

  .pricing-contact h2{
    font-size:21px;
  }

  .detail-title{
    padding:15px 16px;
  }

  .detail-title>span{
    width:50px;
    height:50px;
    font-size:10px;
  }

  .detail-title h3{
    font-size:15px;
  }

  .detail-card th,
  .detail-card td{
    padding:9px 12px;
    font-size:11px;
  }

  .detail-card td:last-child{
    width:38%;
  }

  .price-summary{
    gap:6px;
    margin-bottom:25px;
  }

  .footer{
    padding:30px 5vw 18px;
  }

  .footer-logo img{
    width:150px;
  }

  .footer nav{
    flex-wrap:wrap;
    gap:12px 20px;
  }
}