@charset "UTF-8";
/* ----------------------------------------------------------------------
ひらいだしくんの機能一覧
---------------------------------------------------------------------- */
:root {
  --red: #CC2222;
  --blue-nav: #1565C0;
  --blue-btn: #1976D2;
  --blue-cta1: #1E88E5;
  --blue-cta2: #1565C0;
  --blue-badge: #2196F3;
  --text-dark: #222222;
  --text-body: #444444;
  --text-muted: #666666;
  --text-light: #999999;
  --bg-hero: #EEF2F7;
  --bg-page: #ffffff;
  --bg-section: #F0F4F8;
  --white: #ffffff;
  --blue: #1565C0;
  --blue-mid: #1976D2;
  --blue-light: #2196F3;
  --blue-badge: #2196F3;
  --blue-bg: #E3F2FD;
  --blue-accent: #1E88E5;
  --red: #CC2222;
  --text-dark: #1a1a1a;
  --text-body: #444;
  --text-muted: #666;
  --text-light: #999;
  --bg-white: #fff;
  --bg-section: #F0F4F8;
  --bg-gray: #f5f5f5;
  --border: #e0e0e0;
  --img-placeholder: #cccccc;
}

/* ===== FEATURE INTRO ===== */
.feature-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
	flex-wrap:wrap;
  margin-bottom: 8rem;
}
.feature-images{
	width: 41%;
}
.feature-text {
  width: 54%;
  padding-top: 30px;
}
.feature-text .h2-line1 {
  font-size: 3.2rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.6;
  letter-spacing: 0.1em;
  display: block;
}

.feature-text .h2-line2 {
  font-size: 3.2rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.6;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 14px;
}

.feature-text .lead {
  font-size: 1.8rem;
  color: #000;
  line-height: 1.85;
}

.feature-text .lead .kagi {
  color: #222;
}

/* ===== CTA CARDS ===== */
.feature-intro .cta-card {
  height: 20rem;
  padding: 2rem 0;
}

.feature-intro .cta-card-title {
  margin-bottom: 2rem;
  margin-top: 3rem;
}

/* ===== FUNCTION SECTION ===== */
.function-section {
  margin-top: 14rem;
  margin-bottom: 18rem;
}

.function-title {
  text-align: center;
  font-size: 4rem;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  font-weight: bold;
  margin-bottom: 2.5rem;
}

.function-layout {
  display: flex;
  justify-content:space-between;
	flex-wrap:wrap;
}

.hub-area {
  margin-bottom: 25px; width:52%;
}
.func-desc {
 width: 42%;
}
.func-desc h3 {
  font-size: 2.4rem; font-weight:700;
  color: #1a1a1a;
  line-height: 1.6;
  margin-top: 3rem;
  margin-bottom: 5px;
}

.func-desc p {
  font-size: 1.8rem;
  color: #000;
  line-height: 1.9;
}

/* セクションバッジ（青い小ラベル） */
.sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue-badge);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 0px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}

/* セクション大見出し */
.sec-title {
	font-weight:bold;
  font-size: 3.2rem;
  color: var(--text-dark);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* サブカラー見出し（青） */
.sec-subtitle-blue {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blue-mid);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 本文 */
.sec-body {
  font-size: 1.8rem;
  line-height: 1.85;
}

/* 画像プレースホルダー */
.img-ph {
  background: var(--img-placeholder);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 3.3rem;
  letter-spacing: 0.05em;
}

/* 機能カード（画像左・テキスト右 flex横並び） */
.func-card {
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  background: #fff;
  border-radius: 10px;
  padding: 3rem;
	align-items:center;
}

.func-card .thumb {
  flex: 0 0 200px;
  aspect-ratio: 1/1;
  background: var(--img-placeholder);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 2.8rem;
}
.func-card .card-image {
  width:44%;
}
.func-card .card-text {
  width:52%;
}

.func-card .card-title {
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 6px;
}

.func-card .card-desc {
  font-size: 1.6rem;
  color: #000;
  line-height: 1.75;
}

/* セクション全体の余白 */
.feature-section {
  margin-bottom: 12rem;
}

.feature-section:last-of-type {
  border-bottom: none;
}

/* セクションごとの薄い青ボックス */
.feature-section .section-wrap {
  background: rgba(64, 169, 255, 0.05);
  border-radius: 16px;
  padding: 5.5rem 6rem 6rem;
}

/* メインコンテンツ＋右画像 2カラム */
.two-col {
  display: grid;
  grid-template-columns: 1fr minmax(0, 512px);
  gap: 50px;
  margin-bottom: 6rem;
  align-items: start;
}

.two-col .main-img {
  aspect-ratio: 512/320;
  width: 100%;
}

.video_wrapper video{
	width:100%;
}

/* 機能カードグリッド（1列） */
.card-grid-2 {
  display: grid;
  grid-template-columns:1fr 1fr;
  gap: 2rem;
}

/* ========================================
   1. CADからの平面図作成
======================================== */
#section-cad {
  background: #fff;
}

/* ========================================
   2. 躯体勾配・3D表示・確認
======================================== */
#section-3d {
  background: #fff;
}

/* ========================================
   3. 型枠加工図機能
======================================== */
#section-formwork {
  background: #fff;
}

/* ========================================
   4. 型枠数量の算出
======================================== */
#section-quantity {
  background: #fff;
}

/* ========================================
   5. 型枠材料の拾い出し
======================================== */
#section-material {
  background: #fff;
}

/* ========================================
   6. CAD・Excelへの連携
======================================== */
#section-excel {
  background: #fff;
}

.excel-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  margin-top: 24px;
}

.excel-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}

.excel-card .thumb {
  width: 100%;
  aspect-ratio: 3/2;
  background: #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.excel-card .card-label {
  background: #fff;
  padding: 12px 14px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.4;
}

/* ========================================
   保守・サポート
======================================== */
.support-section {
  padding: 60px 0;
  background: #fff;
}

.support-title {
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}

.support-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #cccccc;
  border-radius: 10px;
  overflow: hidden;
}

.support-card .sup-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 24px;
}

.support-card .sup-img {
  width: 100%;
}

.support-card .sup-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

.support-card .sup-body {
  font-size: 16px;
  color: #000;
  line-height: 1.8;
}

.support-card .sup-note {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1.7;
}

/* ========================================
   導入事例
======================================== */
.case-section {
  padding: 14rem 0 6rem;
  background: transparent;
}

.case-title {
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.case-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.case-card .case-img {
  width: 100%;
  aspect-ratio: 325/180;
  object-fit: cover;
}

.case-img-1 {
  background: linear-gradient(135deg, #c8d0d8 0%, #9aacbc 100%);
}

.case-img-2 {
  background: linear-gradient(135deg, #d0d8c8 0%, #aabca0 100%);
}

.case-img-3 {
  background: linear-gradient(135deg, #d8ccc8 0%, #bcaaaa 100%);
}

.case-img-4 {
  background: linear-gradient(135deg, #c8ccd8 0%, #9aaab8 100%);
}

.case-card .case-body {
  padding: 16px 22px 26px;
}

.case-card .case-tag {
  font-size: 1.2rem;
  color: #000;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.case-card .case-name {
  font-size: 1.4rem;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.4;
}

.case-btn-wrap {
  text-align: center;
}

.case-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37.3rem;
  max-width: 100%;
  height: 70px;
  padding: 0 46px;
  background: #063682;
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background 0.15s;
}

.case-btn:hover {
  background: #0a4499;
}

.case-btn .arr {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   実際の画面・使い方 CTA
======================================== */
.cta-bottom {
  background: transparent;
  padding: 12.5rem 0 5.6rem;
}

.cta-bottom-title {
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 16px;
}

.cta-bottom-sub {
  text-align: center;
  font-size: 1.8rem;
}

.cta-bottom .cta-inner {
  gap: 6rem;
  margin-top: 3rem;
}

.cta-bottom .cta-card {
  height: unset;
  padding: 4rem 0rem;
}

.cta-bottom .cta-card-body {
  width: calc(100% - 32rem);
  padding-right: 6rem;
}

.cta-bottom .cta-card-title {
  font-size: 2rem;
  letter-spacing: 0.15em;
  margin-top: 0;
  margin-bottom: 0;
}

.cta-bottom .cta-card-desc {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.cta-bottom .cta-card a.button {
  font-size: 1.4rem;
}

.cta-bottom .cta-card-img {
  padding-left: 20px;
}

.cta-bottom .cta-card-img img {
  width: 24rem;
}

.cta-bottom .cta-card a.button {
  width: 17rem;
}
.cta-bottom .cta-card.cta-card-right a.button{
	width:30rem;
}

/*-----レスポンシブ調整-----*/
@media screen and (max-width: 1440px) {
	.cta-bottom .cta-card-body {    width: calc(100% - 22rem);}
	.feature-text .h2-line1,.feature-text .h2-line2 {    font-size: 2.8rem;}
}
@media screen and (max-width: 1024px) {
	.function-title {	font-size: 2.8rem;}
	.feature-text .h2-line1,.feature-text .h2-line2 {		font-size: 2.0rem;}
	.feature-text{padding-top:0;}
	.feature-text .lead {		font-size: 1.6rem;}
	.function-layout{align-items:center;}
	.function-section{margin-bottom:10rem;margin-top:10rem;}
	.card-grid-2{grid-template-columns: 1fr;}
	.two-col {	grid-template-columns: 1fr 1fr;}
	.sec-title {	font-size: 2.4rem;}
	.sec-subtitle-blue {	font-size: 1.8rem;}
	.sec-body {		font-size: 1.6rem;}
	.func-card .card-title {		font-size:1.8rem;}
	.feature-section {    margin-bottom: 5rem;}
	.support-title{font-size: 3.2rem;}
	.support-grid { grid-template-columns: 1fr 1fr;}
	.cta-bottom .cta-inner {	gap: 3rem;}
	.cta-bottom .cta-card-img {    padding-left: 0;    width: 100%;}
	.cta-bottom .cta-card-body {   width: 90%;  padding: 0;	margin: 3rem auto 0;}
	.cta-bottom .cta-card-title{text-align:center;}
	.cta-bottom .cta-card a.button {   margin: 0 auto;}
}
@media screen and (max-width: 820px) {
	.func-desc h3 {		font-size: 2.0rem;}
	.func-desc p {  font-size: 1.6rem;  line-height: 1.6;}
	.two-col {  grid-template-columns: 1fr;   gap: 2rem;    }
	.func-card{padding:3rem;}
	.func-card .card-title { font-size: 1.8rem; }
	.func-card .card-desc {  font-size: 1.4rem;}
	.excel-card .card-label{font-size: 1.4rem;}
	.cta-bottom-title {		font-size: 3.2rem;}

}
@media screen and (max-width: 520px) {
	.feature-images {    width: 100%;}
	.feature-text{   width: 100%;margin-top:2.5rem;}
	.feature-text .h2-line1, .feature-text .h2-line2{display:inline;}
	.feature-section .section-wrap {  padding:2rem;}
	.feature-text .lead {   font-size: 1.4rem; margin-top: 1rem;        line-height: 2; }
	.function-title {    font-size: 2.4rem;   }
	.hub-area{width: 100%;}
	.sec-badge{font-size: 12px;padding: 0px 16px;margin-bottom: 6px;}
	.sec-subtitle-blue{margin-bottom:4px;}
	.two-col{margin-bottom:3rem;}
	.func-desc {    width: 100%;}
	.func-desc h3{margin-top:0;}
	.func-card {    padding: 2rem;    flex-wrap: wrap;     gap: 1rem;    }	
	.func-card .card-image {    width: 100%;}
	.func-card .card-text {    width: 100%;}
	.sec-title {        font-size: 2.0rem;    }
	.sec-subtitle-blue {        font-size: 1.6rem;    }
	.sec-body {        font-size: 1.4rem;    }
	.excel-card-grid {	grid-template-columns: repeat(1, 1fr);}
	.support-title {    font-size: 2.4rem;    }
	.support-grid {   grid-template-columns: 1fr;    }
	.cta-bottom .cta-inner {        gap: 2rem;    }
	.cta-bottom .cta-card {    padding: 0rem 0rem 2rem;}
	.cta-bottom .cta-card-body {	width: 86%;}
	.cta-bottom .cta-card-img{position: static; order: 2;width: 86%; margin:0 auto;}
	.cta-bottom .cta-card-img img {    width: 21rem;}
	.cta-bottom .cta-card-img .sp{margin-top:1rem;}
	.cta-bottom .cta-card-title{padding:0;}
	.cta-bottom .cta-card-desc {    font-size: 1.4rem;    margin-bottom: 0.5rem;    margin-top: 1rem;}
	    .cta-bottom .cta-card a.button {
        margin: 3rem auto 0;
        width: 100%;
    }
	.cta-bottom-title {		font-size: 2.4rem;}
	.cta-bottom-sub {    text-align: left;    font-size: 1.6rem;}
}

/*# sourceMappingURL=page-function.css.map */