/* #region */
/* =========================================================
   BBB Global Stylesheet (mobile-first)
   ---------------------------------------------------------
   1. Root & Basic Elements
   2. Font & Typography Classes
   3. Color Classes
   4. Header & Navigation
   5. Layout & Basic Components  
   6. Page-specific Styles (TOP/WEB/PRINT/BRANDING/MOTION)
   7. Footer
   8. Media Queries (768px / 992px / 1200px / 1400px)
   ========================================================= */



/* ---------- 1. Root & Basic Elements ---------- */
:root {
  --bbb-text: #000;
  --bbb-gray: #121212;
  --bbb-brand: #66CC33;
  --bs-primary: var(--bbb-brand);
}
/* Global box-sizing reset (safe, widely used) */
*, *::before, *::after { box-sizing: border-box; }
body {font-family: 'Noto Sans JP', sans-serif, "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial; font-weight: 300; margin: 0; }
body.contact-page {
    background-color: var(--bbb-brand); /* 既存の緑色を使用（contactのみ） */
}
html {scroll-behavior: smooth;}
html, body { overflow-x: hidden; }

a { color: #000; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
a:hover { color : #000; text-decoration:none;}
a.anchor {display: block; padding-top:0px; margin-top:0px;}

/* Basic elements */
img {border: 0; max-width: 100%; height: auto; display: block;}
p {margin:0; padding:0; color:#000; font-size:18px; font-weight:500;}
h1,h2,h3,h4,h5,h6 {font-family:'Noto Sans JP',sans-serif; font-weight:500;}



/* ---------- 2. Font & Typography Classes ---------- */
.gfont {font-family: 'Staatliches', cursive;}
.gfont-zen { font-family: "Zen Kaku Gothic New", sans-serif!important; font-weight: 400!important; font-style: normal!important; }



/* ---------- 3. Color Classes ---------- */
.gray {color: var(--bbb-gray);} .gray {color:#777777;} .green {color: var(--bbb-brand);} .greenw {color:#aaef64;} 
.white {color:#FFF;} .red {color: var(--bbb-red, #F00);} 
.bg-green {background-color: var(--bbb-brand);}


/* Typography sizes */
.bold {font-weight:bold;} 
.big50 {font-size:50px!important; line-height:0.9;}
.big100 {font-size:100px!important; line-height:0.9!important;}
.big20 {font-size:20px; padding:0;}
.big33 {font-size:33px; padding:0;}
.small10 {font-size:10px; padding:0;}
.small12 {font-size:12px; padding:0;}
.small15 {font-size:15px; padding:0;}
.text14 {font-size:14px;}
.text18 {font-size:18px;}

/* Layout utilities */
.img-center {display:block; margin:0 auto;}
.center {text-align:center;}
.center-l {text-align:left;}
.left {text-align:left;}
.full {width:100%;}
.py100 {padding-top:180px!important;}
.mt-n5 {margin-top: 0px!important;}

/* Display utilities */
.mobileon {display:block!important;} 
.mobileoff {display:none!important;}
.hr-bbb {width:100%; height:1px; margin:100px 0; padding:0 20px;}



/* ---------- 4. Header & Navigation ---------- */
.header {width:100%; height:100px; top:0;}
.logo {display:block; position:absolute; width:88px; margin:20px 0 0 17px; padding:0; z-index:100;}

/* Hamburger menu */
#hamburger {display:none;}
.menubar { width: 100%; height: auto; margin: 0; padding: 0; position: sticky; top: 0; z-index: 102; } 
.menu-trigger, .menu-trigger span { display: inline-block; transition: all 100s; box-sizing: border-box; position: relative; z-index: 101; } 
.menu-trigger { position: relative; width: 45px; height: 36px; background: none; border: none; appearance: none; cursor: pointer; } 
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background: black; border-radius: 1px; box-shadow: 2px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.2); transform: rotate(calc(var(--angle, 0) * 1deg)); transition: transform 0.06s ease, opacity 0.06s ease; }
/* Icon angles */
.menu-trigger span:nth-child(1) { top: 0; --angle: 2; }
.menu-trigger span:nth-child(2) { top: 13px; --angle: -1; }
.menu-trigger span:nth-child(3) { top: 26px; --angle: 1.5; }
.bbb-menu {width:auto; height:50px; margin:10px 0 0 10px;}
/* Hamburger animation states */
#hamburger:checked + label span:nth-of-type(1) {transform: translateY(13px) rotate(-45deg); background-color:#000000;}
#hamburger:checked + label span:nth-of-type(2) {opacity: 0;}
#hamburger:checked + label span:nth-of-type(3) {transform: translateY(130px) rotate(175deg); background-color:#000000;}
/* Checked State Styles */
#hamburger:checked + label span:nth-child(1) { transform: translateY(13px) rotate(45deg); } 
#hamburger:checked + label span:nth-child(2) { opacity: 0; } 
#hamburger:checked + label span:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }
/* Menu positioning */
#menu01 { display: block; position: absolute; top: 30px; right: 20px; cursor: pointer; background-color: transparent; z-index: 103; }
/* Global navigation menu */
.global_menu {visibility:hidden; width:100%; height:100%; position:fixed; top:20px; right:0; padding:30px; background:#FFF; overflow-y:auto; text-align:center; opacity:0; transition: top .2s, opacity .3s; z-index:100;}
#hamburger:checked ~ .global_menu
{visibility:visible; width:100%; height:100%; right:0; top:0; padding:90px 20px; opacity:1; z-index:99;}
.global_menu a {display:block; width:100%; height:80px; border-bottom:0.1px solid #000000;}
.global_menu a:hover {background:#F7F7F7;}
.global_menu ul { font-size: 30px; list-style: none; padding: 0; margin: 0; display: block; }
.global_menu li { position: relative; padding: 0 10px; }
.global_menu li:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.nav-item > a {text-align:left; font-weight:bold; margin:0; padding:20px 0 0 20px; text-decoration:none;}
.lang {width:50px; display:block; position:absolute; top:90px; right:18px;}


/* ---------- 5. Layout & Basic Components ---------- */
/* p5.js canvas backgrounds */
#p5js-top {position:absolute; top:0; left:0; z-index:-100; will-change: transform, opacity; transition: transform 0.12s linear, opacity 0.12s linear;}
#p5js {position:absolute; top:-100px; left:0; z-index:-100;}

/* ボックス全体のホバーアニメーション */
.box-hover { text-decoration: none; color: inherit; border: 3px solid var(--bbb-gray); padding: 20px; position: relative; overflow: hidden; transition: ease .1s; display: block; }
.box-hover:hover { border-color: var(--bbb-brand); }
.box-hover:before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; background: var(--bbb-brand); width: 100%; height: 100%; transition: transform .18s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; }
.box-hover:hover:before { transform-origin: left top; transform: scale(1, 1); }
.box-hover img { position: relative; z-index: 3; }
.box-hover h2 { position: relative; z-index: 3; }
.box-hover span { position: relative; z-index: 3; }
.box-hover:hover h2 { color: #FFF; }
.box-hover:hover span, .box-hover:hover p { color: #FFF; }
/* 画像もボタンホバーで白反転 */
.box-hover:hover img.top-btn-pic { filter: brightness(0) invert(1); }
/* キーボードフォーカスの可視化 */
.box-hover:focus { outline: 3px solid #66CC33; outline-offset: 3px; }
.box-hover:focus-visible { outline: 3px solid #66CC33; outline-offset: 3px; }

/* btn独自仕様 */
.btn-bbb { --bs-btn-color: #fff; --bs-btn-bg: var(--bbb-brand); --bs-btn-border-color: var(--bbb-brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--bbb-brand) 90%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--bbb-brand) 85%, #fff); --bs-btn-focus-shadow-rgb: 102,204,51; --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--bbb-brand) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bbb-brand) 75%, #000); }
.btn-bbb-form { --bs-btn-color: #fff; --bs-btn-bg: var(--bbb-brand); --bs-btn-border-color: var(--bbb-brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--bbb-brand) 90%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--bbb-brand) 85%, #fff); --bs-btn-focus-shadow-rgb: 102,204,51; --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--bbb-brand) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bbb-brand) 75%, #000); }
.btn-bbb-white { --bs-btn-color: var(--bbb-brand); --bs-btn-bg: #FFF; --bs-btn-border-color: #FFF; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, #FFF 90%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, #FFF 85%, #fff); --bs-btn-focus-shadow-rgb: 102,204,51; --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, #FFF 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, #FFF 75%, #000); }
.btn-bbb:hover, .btn-bbb-white:hover { color: var(--bbb-brand); transform: translateY(1px); }
.btn-bbb-form:hover { color: #fff; transform: translateY(1px); }
.btn.btn-bbb.btn-bbb-form:hover { color: #fff !important; }
.btn-success { border-color: var(--bbb-brand); color: var(--bbb-brand); border:1px solid var(--bbb-brand); padding:3px 4px; border-radius:4px; display: inline-block; margin: 5px 0 0 0; }
.btn-gray { border-color: var(--bbb-gray); color: var(--bbb-gray); border:1px solid var(--bbb-gray); padding:5px 9px; border-radius:2px; display: inline-block; margin: 5px 0 0 0; }



/* 料金カード */
.price-card { border: 3px solid var(--bbb-gray); padding: 20px; height: 100%; background-color:#FFF; }



/* ---------- 6. Footer ---------- */
.footer {width:100%; height:660px; margin-top:200px; padding:70px 20px; background-color:#000; border-bottom:1px solid #66CC00; line-height:30px; font-size:12px;}
.logo-footer {width:80px; margin:36px 0 0 0;}
.footer1 {width:100%; height:auto; margin:0; padding:0;}
.footer2 {width: 100%; height: auto; margin: 200px 0 0 0; padding: 0;}
.footer2 .logo-footer, .footer2 .copyright {margin-left: 10px;}
.footer a { color:#CCCCCC; text-decoration:none; }
.footer a:hover { color:#FFF; text-decoration:none; }
.footer .nav-link { display: inline; padding: 0; }



/* ---------- 7. Page-specific Styles ---------- */
/* TOP page */
.top-h1 {font-size:20px; margin:200px 0 0 22px; z-index:4;}
.top-h2 {font-size:24px; margin:40px 0 20px 0; z-index:4;}
.top-p {font-size:69px; line-height:60px; margin:10px 0 0 20px; z-index:4;}

.parallax-container {position: relative; height: 560px; overflow: hidden; margin-top: -100px;}
.parallax-layer {position:absolute; top:0; left:0; width:100%; height:120%;}

.arrow {width:30px; height:auto; margin: 35px auto 0;}
.pc_a {width:400px; height:auto; margin:100px auto 0;}

.top-btn-pic {width:30%; height:auto;}




/* WEB page */
.feature-list { list-style: none; padding-left: 24px; margin: 0; }
.feature-list li { position: relative; margin-bottom: 8px; font-size: 16px; }
.feature-list li:before { content: "•"; position: absolute; left: -13px; color: inherit; }
.icon-sns {width:40px; height:auto; border-radius:3px;}
.va-3 { vertical-align: -3px; }
.va-2 { vertical-align: 2px; }
.sen1 { margin:16px 0; border:0; border-top:1px solid var(--bbb-gray); opacity:1; }
.top-contents { width: 100%; height: 100vh;}
.h1-top {margin-top: 0;}
.web-ojisan {width:100%; height:auto; position: relative; z-index:-10;}



/* PRINT page */
.card .table { margin-bottom: 0; }
.card .table td,
.card .table th { padding: 12px 16px; vertical-align: middle; }
.card .table td:first-child,
.card .table th:first-child { padding-left: 18px; white-space: nowrap; text-align: left; }
.card .table td:not(:first-child),
.card .table th:not(:first-child) { text-align: center; }
.green.small10 { display: inline-block; margin-top: -5px; margin-right: 5px; vertical-align: middle; }
.icon-color {width:40px; height:auto; padding:0; margin:0 auto;}


.backloop {position:absolute; top:0; width:120%; height:auto; z-index:-10;}
.circle-wrap {width:300px;}



/* bbb page */
.akitech-me {width:300px; margin:0 auto; position:relative;}
.akipic {width:100px; height:auto; border-radius:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2;}
.akipictama {width:180px; height:auto; display:block;}

.senga-bbb {width:500px; height:auto; margin:0 auto;}
.icons {width:100%; height:auto; margin:10px 0 20px 0;}
.iconadobe {width:40px;}
.logo-ai {width:auto; height:30px;}

.table.table-bordered > :not(caption) > * > * { border-left-width: 0; border-right-width: 0; }
.table a { color: #000; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.table a:hover { color: var(--bbb-brand); text-underline-offset: 2px; }
.bbb-table th { font-weight: normal; width: 100px; }
.bbb-table th, .bbb-table td { background-color: #FFF; }
.table.bg-green, .table.bg-green th, .table.bg-green td { background-color: var(--bbb-brand) !important; color: white; }
.table.bg-green { width: 100%; height: 274px; }
.bbb-logo-w {width:100px; height:auto; margin:80px auto 0;}

/* BRANDING page */
.senga-ken {width:500px; height:auto; margin:0 auto; position:relative; z-index:-10;}


/* CONTACT page */
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check .form-check-input { margin: 0; flex-shrink: 0; }
.form-check p { margin: 0; line-height: 1; }
.scrollable-container { width: 100%; max-height: 150px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; }
.contact-page .scrollable-container { background-color: #ffffff; color: #111; }
.thanks-text { margin:200px auto 0; text-align:center;}
.form-check { padding: 0; display: flex; align-items: center; justify-content: flex-start; margin-left: 0!important; }

.contact-page main {color: #ffffff!important;}

/* OTHER pages */
.page404 {width:50%; display:block; margin:0 auto;}



/* ---------- 7.5. Bootstrap Icons Animation ---------- */
.bi-plus-circle-fill { transition: transform 0.3s ease; color: #66CC33 !important; }
.btn-link { color: #000 !important; text-decoration: underline; text-underline-offset: 5px; }
.btn-link:hover { color: #66CC33 !important; text-decoration: underline; text-underline-offset: 3px; transform: translateY(-1px); }

/* ---------- 8. Media Queries ---------- */

/* Tablet and above (md: 768px+) */
@media screen and (min-width: 768px) {
.mobileon {display:none!important;}
.mobileoff {display:block!important;}
.hr-bbb {padding:0 200px;}
.center-l {text-align:center;}

#menu01 {top:60px; right:50px;}
.global_menu li {font-size:50px;}
.nav-item > a {padding:8px 0 0 20px;}
#hamburger:checked ~ .global_menu
{visibility:visible; width:100%; height:100%; right:0; top:0; padding:180px 90px; opacity:1; z-index:99;}

.mt-n5 {margin-top: -150px!important;}

.top-h1 {font-size:30px; margin:220px 0 0 50px;}
.top-p {font-size:120px; line-height:100px; margin:10px 0 0 50px; z-index:4;}
.top-btn-pic {width:120px; height:auto;}


.lang {top:110px; right:48px;}

.print-h1 {left:20px;}
.branding-h1 {left:20px;}
.web-h1 {left:20px;}

.top-contents-img { position: absolute; top: 270px; right: 0px; width: 400px; }

.footer {padding:70px 50px;}


/* =aki */	
.aki-table {border-collapse:collapse; width:660px; margin:auto;}
.aki-table-1 {width:70px; display:table-cell;}
.aki-table-2 {width:590px; display:table-cell;}
.aki-table-3 {width:100px; display:table-cell;}
.aki-table-4 {width:560px; display:table-cell;}
	
.motion-middle {width:300px; height:auto; margin:0;}
}

/* Desktop (992px+) */
@media screen and (min-width: 992px) {
.logo {width:100px; margin:40px 0 0 50px;}
.logo-ai {width:auto; height:40px;}
.top-contents-img { top: 30px; right: 70px; width: 700px; }
.top-contents { height: calc(100vh - 100px); display: flex; align-items: center; }
.top-contents .row { align-items: center; }
.top-contents .col-lg-6.d-flex { justify-content: center; }
.bg-white { background-color: transparent !important; }
}

/* Large desktop (lg: 1200px+) */
@media screen and (min-width: 1200px) {
.top-p {font-size:160px; line-height:150px;}
}

/* Extra large desktop (xl: 1400px+) */
@media screen and (min-width: 1400px) {
.top-p {font-size:180px; line-height:150px;}
}
/* #endregion */