/* 用途別開発商品ページ専用スタイル */ /* ======================================== index.html 専用スタイル ======================================== */ #dev-index .lineup-section{background:#ffd600;} #dev-index .lineup-section .inner{margin:0 auto;max-width:1000px;padding:30px 50px 100px;} #dev-index .lineup-section .purpose-head{padding:0 20px 40px;} #dev-index .lineup-section .purpose-head .en-label{font-size:16px;font-weight:700;letter-spacing:.12em;margin-bottom:10px;color:#fff;} #dev-index .lineup-section .purpose-head h2{font-size:26px;font-weight:700;margin:0;line-height:1.5;} /* お客様アンケート */ #dev-index .questionnaire .purpose-head{padding:0 20px 50px;} #dev-index .questionnaire{background:#F8F3E0;} #dev-index .questionnaire .inner{margin:0 auto;max-width:1000px;padding:80px 50px 100px;} #dev-index .questionnaire .en-label{color:#791218;} #dev-index .q-box{max-width:900px;margin:0 auto;background:#FFF;border:15px solid #ec931a;border-radius:40px;padding:50px 40px 0;box-sizing:border-box;} #dev-index .q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 50px;text-align:center;margin-bottom:80px;} #dev-index .q-item{display:flex;flex-direction:column;align-items:center;} #dev-index .q-label-top{font-size:15px;font-weight:700;color:#a2755b;margin:0 0 10px;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;} #dev-index .q-illust{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;} #dev-index .q-illust img{max-width:100%;max-height:100%;object-fit:contain;} #dev-index .q-badge{position:absolute;top:0;left:0;font-size:12px;font-weight:700;color:#fff;padding:3px 10px;border-radius:20px;line-height:1.4;} #dev-index .q-badge--orange { background: #F0963C; } #dev-index .q-badge--green { background: #8BC34A; } #dev-index .q-badge--blue { background: #64B5F6; } #dev-index .q-label{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:16px;font-weight:700;color:#a2755b;margin:10px 0;line-height:1.5;} #dev-index .q-label .q-orange{color:#ed733d;} #dev-index .q-number{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:28px;font-weight:700;margin:0 0 8px;line-height:1.3;} #dev-index .q-number--orange{color:#F0963C;font-size:26px;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;} #dev-index .q-number--brown { color: #791218; } #dev-index .q-desc{font-size:11px;line-height:1.7;color:#730200;margin:å0;font-weight:600;} #dev-index .questionnaire .purpose-head .en-label{font-size:16px;font-weight:700;letter-spacing:.12em;margin-bottom:10px;color:#730200;} #dev-index .questionnaire h2{font-size:24px;font-weight:700;margin:0;line-height:1.3;} /* CTA */ #dev-index .q-cta{display:block;margin:80px auto 0;max-width:800px;padding:32px 20px;background:linear-gradient(to right,#f4c620,#eb8423);border-radius:100px;text-align:center;text-decoration:none;color:#fff;transition:opacity .25s;position:relative;} #dev-index .q-cta:hover { opacity: .9; } #dev-index .q-cta-chara{position:absolute;right:-20px;bottom:-10px;width:130px;height:auto;pointer-events:none;opacity:0;transform:translateY(20px);} #dev-index .q-cta-chara.is-visible{opacity:1;transform:translateY(0);animation:charaBounce 0.6s ease 0.3s;} @keyframes charaBounce{0%{transform:translateY(0);}30%{transform:translateY(-20px);}50%{transform:translateY(0);}70%{transform:translateY(-10px);}100%{transform:translateY(0);}} #dev-index .q-cta-sub{font-size:13px;margin:0 0 12px;font-weight:500;color:rgba(255,255,255,0.9);letter-spacing:0.05em;} #dev-index .q-cta-main{font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-size:26px;font-weight:500;margin:0 0 16px;color:#fff;letter-spacing:0.08em;} #dev-index .q-cta-link{font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:600;color:#eb8423;background:#fff;padding:10px 32px;border-radius:50px;display:inline-block;} #dev-index .q-grid .q-item:nth-child(1),#dev-index .q-grid .q-item:nth-child(2){align-self:end;} #dev-index .q-grid .q-item:nth-child(1) .q-illust{width:144px;height:144px;} #dev-index .q-grid .q-item:nth-child(2) .q-illust{width:160px;height:160px;} #dev-index .q-grid .q-item:nth-child(4) .q-illust{width:150px;height:150px;} #dev-index .q-grid .q-item:nth-child(5) .q-illust{width:160px;height:160px;} /* 2段目を2列中央寄せ */ #dev-index .q-grid .q-item:nth-child(4){grid-column:1 / 2;justify-self:center;} #dev-index .q-grid .q-item:nth-child(5){grid-column:2 / 3;justify-self:center;} /* ======================================== 用途別開発商品　-　第三階層 専用スタイル ======================================== */ #dev-detail .story {background:#ffd600;} #dev-detail .story .inner{margin:0 auto;max-width:1000px;padding:30px 50px 180px;} #dev-detail .purpose-head{padding:0;} #dev-detail .purpose-head .en-label{font-size:16px;font-weight:700;letter-spacing:.12em;margin-bottom:10px;color:#fff;} #dev-detail .purpose-head h2{font-size:24px;font-weight:700;margin:0;line-height:1.3;} #dev-detail .story .lead-sub{font-size:16px;color:#791218;font-weight:normal;} /* 商品画像 */ #dev-detail .product-image{max-width:1000px;margin:35px auto 75px;padding:0 50px;} #dev-detail .product-image img{width:100%;aspect-ratio:2.427/1;object-fit:cover;object-position:center 80%;display:block;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);} /* 用途別リンクリスト（2列・アイコン付き） */ #dev-index .dev-link-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto;} #dev-index .dev-link-item{display:flex;align-items:center;gap:16px;background:#fff;border-radius:12px;padding:18px 20px;text-decoration:none;color:#791218;transition:transform .2s ease,box-shadow .2s ease;} #dev-index .dev-link-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);} #dev-index .dev-link-icon{width:50px;height:50px;flex-shrink:0;border-radius:50%;background:#ed733d;display:flex;align-items:center;justify-content:center;overflow:hidden;} #dev-index .dev-link-icon img{width:24px;height:24px;object-fit:contain;} #dev-index .dev-link-text{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:15px;font-weight:700;color:#791218;line-height:1.4;} /* 開発ストーリー */ #dev-detail .develop-story{background:#fff;border-radius:16px;padding:40px 50px;margin-top:80px;} #dev-detail .develop-story h3{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:24px;font-weight:700;color:#791218;margin:0 0 12px;} #dev-detail .develop-story .sub-title{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:18px;font-weight:600;color:#791218;margin:0 0 20px;} #dev-detail .develop-story hr{border:none;border-top:3px solid #ffd301;margin:20px 0;} #dev-detail .develop-story p{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;font-size:16px;font-weight:normal;color:#791218;line-height:1.8;margin:0 0 16px;} #dev-detail .develop-story li{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;font-size:15px;font-weight:600;color:#ed733d;line-height:1.7;} /* 世界観を大切にした商品作り */ #dev-detail .policy{background:#faebbf;position:relative;z-index:2;} #dev-detail .policy::before{content:'';position:absolute;top:-79px;left:0;width:100%;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1212.41 111.62' preserveAspectRatio='none'%3E%3Cpath d='M1212.41,0c0,179.38,0-103.47,0,75.9-5.11,3.76-43.81,31.31-102.23,27.83-45.61-2.71-73.85-22.59-80.87-27.83-3.52,3.29-36.87,33.4-95,33.25-57.61-.15-90.54-29.88-94.14-33.25-11.63,7.53-54.37,33.39-120.2,35.57-77.1,2.55-128.42-29.27-138.18-35.57-7.16,4.86-48.28,31.84-111.34,30.15-55.73-1.49-91.28-24.38-99.76-30.15-6.6,4.18-48.7,29.93-107.99,24.74-39.2-3.43-64.97-18.55-74.45-24.74-8.41,5.56-38.86,24.34-86.03,26.29C44.92,104.56,6.67,80.29,0,75.9,0-103.47,0,179.38,0,0' fill='%23faebbf'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform:scaleY(-1);} #dev-detail .policy::after{content:'';position:absolute;bottom:-79px;left:0;width:100%;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1212.41 111.62' preserveAspectRatio='none'%3E%3Cpath d='M1212.41,0c0,179.38,0-103.47,0,75.9-5.11,3.76-43.81,31.31-102.23,27.83-45.61-2.71-73.85-22.59-80.87-27.83-3.52,3.29-36.87,33.4-95,33.25-57.61-.15-90.54-29.88-94.14-33.25-11.63,7.53-54.37,33.39-120.2,35.57-77.1,2.55-128.42-29.27-138.18-35.57-7.16,4.86-48.28,31.84-111.34,30.15-55.73-1.49-91.28-24.38-99.76-30.15-6.6,4.18-48.7,29.93-107.99,24.74-39.2-3.43-64.97-18.55-74.45-24.74-8.41,5.56-38.86,24.34-86.03,26.29C44.92,104.56,6.67,80.29,0,75.9,0-103.47,0,179.38,0,0' fill='%23faebbf'/%3E%3C/svg%3E") center/100% 100% no-repeat;z-index:2;} #dev-detail .policy .en-label{font-size:16px;font-weight:700;letter-spacing:.12em;margin-bottom:10px;color:#791218;} #dev-detail .policy .inner{margin:0 auto;max-width:1000px;padding:80px 50px;} #dev-detail .policy-list{margin-top:30px;} #dev-detail .policy-item{margin-bottom:40px;} #dev-detail .policy-body{position:relative;background:#fff;padding:40px 30px 30px;border-radius:20px;} #dev-detail .policy-number{position:absolute;top:-22px;left:20px;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:20px;font-weight:700;color:#fff;background:#ffd600;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;} #dev-detail .policy-body h3{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:18px;font-weight:700;color:#791218;margin:0 0 12px;padding:0 0 10px;border-bottom:3px solid #ffd600;} #dev-detail .policy-body p{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;font-size:14px;font-weight:normal;color:#791218;line-height:1.8;margin:0;} #dev-detail .policy-list hr{border:none;border-top:3px solid #ffd301;margin:25px 0;} /* 商品画像（3枚横並び） */ #dev-detail .product-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px;width:100vw;margin-left:calc(50% - 50vw);padding:0 5vw;box-sizing:border-box;} #dev-detail .product-photos img{width:100%;aspect-ratio:1.618/1;object-fit:cover;display:block;border-radius:10px;} /* お客様の声 */ #dev-detail .voice{background:#ffd600;} #dev-detail .voice .inner{margin:0 auto;max-width:1000px;padding:160px 50px 100px;} #dev-detail .voice .en-label{color:#791218;} #dev-detail .voice-cards{display:flex;flex-direction:column;gap:30px;margin-top:50px;} #dev-detail .voice-card{background:#fff;border-radius:16px;padding:30px;display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;gap:0 10px;} #dev-detail .voice-card-title{grid-column:1 / -1;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:18px;font-weight:700;color:#791218;margin:0 0 16px;padding:0 10px 20px 10px;border-bottom:3px solid #ffd301;} #dev-detail .voice-card-illust{grid-row:2;grid-column:1;align-self:center;width:120px;height:120px;} #dev-detail .voice-card-illust img{width:100%;height:100%;object-fit:contain;} #dev-detail .voice-card-body{grid-row:2;grid-column:2;background:var(--light-yellow);border-radius:10px;padding:24px;margin-top:0;} #dev-detail .voice-card-body p{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;font-size:15px;font-weight:normal;color:#791218;line-height:1.85;margin:0 0 14px;} #dev-detail .voice-card-body p:last-child{margin-bottom:0;} @media (max-width: 960px) { /* ======================================== index.html 専用スタイル ======================================== */ #dev-index .q-grid{grid-template-columns:repeat(2,1fr);gap:50px;} #dev-index .q-grid .q-item:nth-child(4),#dev-index .q-grid .q-item:nth-child(5){grid-column:auto;justify-self:auto;} #dev-detail .product-photos{gap:10px} } @media (max-width: 767px) { /* ======================================== index.html 専用スタイル ======================================== */ #dev-index .lineup-section .purpose-head h2{font-size:22px;font-weight:700;} #dev-index .lineup-section .purpose-head .en-label{font-size:13px;} #dev-index .lineup-section .purpose-head{padding:0 10px 20px;} #dev-detail .story .lead-sub{font-size:14px} #dev-index .lineup-section .inner{padding:40px 10px 50px;} /* index.html お客様アンケート */ #dev-index .questionnaire .inner{padding:80px 30px} #dev-index .q-box{padding:30px 20px 0;border-width:8px;border-radius:16px} #dev-index .q-grid{grid-template-columns:repeat(2,1fr);gap:80px 30px} #dev-index .q-grid .q-item:nth-child(4),#dev-index .q-grid .q-item:nth-child(5){grid-column:auto;justify-self:auto} #dev-index .q-illust{width:100px;height:100px} #dev-index .q-number{font-size:22px} #dev-index .q-cta{margin:30px 16px 0;padding:24px 16px;border-radius:80px} #dev-index .q-cta-main{font-size:20px;margin:0 0 12px;font-weight:500;} #dev-index .q-cta-sub{font-size:11px;margin-bottom:8px;font-weight:500;} #dev-index .q-cta-chara{width:90px;right:-10px;bottom:-8px;} #dev-index .q-cta-link{font-size:12px;padding:8px 24px;} #dev-index .dev-link-list{grid-template-columns:1fr;gap:12px;} #dev-index .dev-link-item{padding:14px 16px;} #dev-index .dev-link-icon{width:42px;height:42px;} #dev-index .dev-link-icon img{width:26px;height:26px;} #dev-index .dev-link-text{font-size:14px;} #dev-index .purpose-head h2{font-size:22px;} #dev-index .purpose-head .en-label{font-size:13px;} #dev-index .product-image{padding:0;width:90%;} #dev-detail .purpose-head h2{font-size:18px;} #dev-detail .purpose-head .en-label{font-size:13px;} #dev-detail .product-image{padding:0;width:100%;} #dev-detail .story .inner {padding:30px 10px 80px;} #dev-detail .story h3{font-size:18px;} #dev-detail .story .sub-title{font-size:16px;} #dev-detail .story p{font-size:14px;} #dev-detail .story li{font-size:14px;} #dev-detail .product-photos{gap:8px;margin-top:30px;} /* voice レスポンシブ */ #dev-detail .voice .inner{padding:50px 10px 70px} #dev-detail .voice-card{padding:24px 20px;display:flex;flex-direction:column;align-items:center;} #dev-detail .voice-card-illust{width:100px;height:100px;} #dev-detail .voice-card-title{margin-top:12px;} #dev-detail .voice-card-body{padding:20px 16px} /* policy レスポンシブ */ #dev-detail .policy::before, #dev-detail .policy::after{display:none;} #dev-detail .policy .inner{padding:50px 10px} #dev-detail .policy-item{margin-bottom:30px} #dev-detail .policy-body{padding:24px 20px} #dev-detail .policy-number{margin:0;left:10px;} #dev-detail .policy-body h3{font-size:16px} #dev-detail .policy-body p{font-size:14px;text-align:left} #dev-detail .voice-card-title{font-size:16px} #dev-detail .voice-card-body p{font-size:14px;line-height:1.6} #dev-detail .product-photos{display:block;position:relative;width:calc(100% - 40px);margin:30px auto 0;padding:0;aspect-ratio:1.618/1;overflow:hidden;border-radius:10px;} #dev-detail .product-photos img{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;object-fit:cover;opacity:0;transition:opacity 2s ease;border-radius:10px;} #dev-detail .product-photos img.active{opacity:1;} } @media (max-width: 600px) { #dev-detail .theme-park .inner{padding:80px 10px} #dev-detail .policy .inner{padding:50px 10px 60px} #dev-detail .policy-body{padding:20px 16px} #dev-detail .develop-story {padding:40px 16px;} } @media (max-width: 540px) { /* ======================================== index.html 専用スタイル ======================================== */ #dev-index .q-grid{grid-template-columns:1fr;gap:50px;} #dev-index .q-cta-main{font-size:18px;margin:0 0 12px;font-weight:500;} #dev-index .q-cta-sub{font-size:11px;margin-bottom:8px;font-weight:500;} #dev-index .q-cta-chara{width:70px;right:-5px;bottom:-5px;} #dev-index .q-cta-link{font-size:11px;padding:8px 20px;} #dev-index .lineup-section .inner{padding:30px 10px 50px;} #dev-index .questionnaire .inner{padding:50px 20px 70px;} } @media (max-width: 420px) { /* ======================================== index.html 専用スタイル ======================================== */ #dev-index .purpose-head .en-label{font-size:14px} #dev-index .purpose-head h2{font-size:17px;} #dev-index .voice-card-title{font-size:16px} #dev-detail .product-photos{width:100%;} #dev-detail .develop-story{margin-top:50px;} #dev-detail .story .inner{padding-bottom:50px;} #dev-detail .story h3{font-size:20px;} #dev-detail .story .sub-title{font-size:16px;} #dev-detail .story p{font-size:14px;line-height:1.6;} #dev-detail .story li{font-size:16px;} #dev-detail .policy-item{margin-bottom:24px} #dev-detail .policy-body{padding:30px;border-radius:16px} #dev-detail .policy-body h3{font-size:15px} #dev-detail .policy-body p{font-size:12px;line-height:1.7} #dev-detail .policy-list hr{margin:16px 0} }