このホームページを安心してご覧いただけるよう、サーバーのしくみ（PHP）を、ふだんから新しい状態に更新しています。これからも、安全で見やすいサイトづくりを続けてまいります。
【各教室共通】サーバーの安全対策について
お知らせ非公開: 【控え】テーマファイル 2026-11-07 変更前（page-top-page.php）
未分類<?php
/*
Template Name: カスタムトップページ
*/
get_header( 'new' );
?>
<!------------▼▼▼▼ トップイメージ ▼▼▼▼------------>
<div id="topimg">
<div class="inner">
<div class="flex-box">
<div class="txt-wrap">
<h1 class="image"><img src="<?php echo $theme_url; ?>/img/h1.svg" alt="みんなおいでよ！わくわく好奇心を伸ばせ！"></h1>
<p class="textarea">楽しくロボットを作りながら、<br>創造力と考える力をぐんぐん育てよう。<br>ものづくりの仕組みと活用まで学び、<br>将来の夢をカタチにできるチカラも手に入れよう！</p>
</div>
<div class="image main-img">
<img src="<?php echo $theme_url; ?>/img/main-img.png" alt="[教室風景]">
</div>
</div><!--/.flex-box-->
<div class="btn-wrap">
<div class="btn image">
<a href="/23-2/" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/btn_entry.png" alt="＼まずは体験会で空気感をチェック！／無料体験会に申し込む"></a>
</div>
<div class="btn image">
<a href="/category/イベント/" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/btn_event.png" alt="＼イベントも開催中／イベント・大会一覧"></a>
</div>
</div>
<style>
#topimg .donate-wrap{text-align:center;margin:18px 0 0;position:relative;z-index:2}
#topimg .donate-btn{display:inline-flex;align-items:center;gap:12px;background:#fff;border:4px solid #ff6632;color:#ff6632;font-weight:900;font-size:20px;line-height:1.3;text-decoration:none;border-radius:999px;padding:12px 34px;box-shadow:0 5px 0 #d9521f;transition:all .2s}
#topimg .donate-btn:hover{background:#ff6632;color:#fff;transform:translateY(2px);box-shadow:0 3px 0 #d9521f}
#topimg .donate-btn small{display:block;font-size:13px;font-weight:700}
#topimg .donate-btn .heart{font-size:28px}
@media screen and (max-width:767px){#topimg .donate-btn{font-size:4.4vw;padding:2.5vw 6vw;gap:2vw}#topimg .donate-btn small{font-size:3vw}}
</style>
<div class="donate-wrap">
<a class="donate-btn" href="/donation/"><span class="heart">♡</span><span><small>＼子どもたちの「やってみたい！」を応援／</small>ご寄付・年会費で応援する</span></a>
</div>
<div class="robot"><img src="<?php echo $theme_url; ?>/img/fv_robot.png" alt="イラスト"></div>
</div><!--/.inner-->
</div>
<!------------▲▲▲▲ トップイメージ ▲▲▲▲------------>
<main id="main">
<!------------▼▼▼▼ クラフティティ ▼▼▼▼------------>
<style>
.kobekatsu.craftyty a{display:flex;align-items:center;gap:20px;padding-right:56px}
.kobekatsu.craftyty .bee{flex:none;width:96px;height:auto}
.kobekatsu.craftyty .body{min-width:0}
@media screen and (max-width:767px){.kobekatsu.craftyty a{gap:3vw;padding-right:10vw}.kobekatsu.craftyty .bee{width:16vw}}
</style>
<div class="kobekatsu craftyty">
<a href="https://craftyty.koberobot.com/" target="_blank" rel="noopener">
<img class="bee" src="https://craftyty.koberobot.com/wp-content/uploads/2026/10/craftyty-bee.png" alt="クラフティティのキャラクター" width="700" height="642" loading="lazy">
<div class="body">
<div class="ttl">クリエイティブエデュケーション「クラフティティ」</div>
<p class="txt">モノづくりで、未来をつくる力を育てる。<br class="sp">神戸ロボットクラブの新しい教室です。</p>
</div>
</a>
</div>
<!------------▼▼▼▼ ご寄付のお願い ▼▼▼▼------------>
<style>
.kobekatsu.donation{margin-top:16px}
.kobekatsu.donation a{display:flex;align-items:center;gap:20px;padding-right:56px}
.kobekatsu.donation .robo{flex:none;width:90px;height:auto}
.kobekatsu.donation .body{min-width:0}
@media screen and (max-width:767px){.kobekatsu.donation a{gap:3vw;padding-right:10vw}.kobekatsu.donation .robo{width:15vw}}
</style>
<div class="kobekatsu donation">
<a href="/donation/">
<img class="robo" src="<?php echo $theme_url; ?>/img/fv_robot.png" alt="神戸ロボットクラブのロボット" loading="lazy">
<div class="body">
<div class="ttl">ご寄付・年会費のお願い</div>
<p class="txt">子どもたちの「やってみたい！」を、いっしょに育てませんか。<br class="sp">1,000円から応援いただけます。</p>
</div>
</a>
</div>
<!------------▼▼▼▼ お知らせ ▼▼▼▼------------>
<section id="news" class="fadein">
<div class="inner">
<div class="left">
<div class="ttl-wrap">
<h2 class="image">
<img src="<?php echo $theme_url; ?>/img/ttl_news.svg" alt="お知らせ NEWS" class="pc">
<img src="<?php echo $theme_url; ?>/img/sp_ttl_news.png" alt="お知らせ NEWS" class="sp">
</h2>
</div><!--/.ttl-wrap-->
<div class="btn pc"><a href="/news/">新着情報一覧</a></div>
</div><!--/.left-->
<ul>
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'category_name' => 'お知らせ' // ここにカテゴリースラッグ（日本語ではなくスラッグ名）を入れる
);
$loop = new WP_Query( $args );
while($loop->have_posts()):$loop->the_post();
?>
<li>
<a href="<?php the_permalink(); ?>">
<div class="tag-wrap">
<span class="day wf"><?php the_time('Y.m.d'); ?></span>
<p class="tag">
<?php
$terms = get_the_terms( get_the_ID(), 'category' );
if ( $terms && ! is_wp_error( $terms ) ) {
$term = array_shift( $terms ); // 先頭のタームを取得
echo esc_html( $term->name ); // ターム名を安全に出力
}
?>
</p>
</div>
<p class="ttl"><?php the_title(); ?></p>
</a>
</li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
<div class="btn sp"><a href="/category/お知らせ/">お知らせ一覧</a></div>
</div>
</section><!-- /.news -->
<!------------▲▲▲▲ お知らせ ▲▲▲▲------------>
<!------------▼▼▼▼ 神戸ロボットクラブってどんな教室？ ▼▼▼▼------------>
<section id="about" class="fadein">
<div class="inner">
<div class="ttl-wrap">
<h2 class="image"><img src="<?php echo $theme_url; ?>/img/ttl_about.svg" alt="神戸ロボットクラブってどんな教室？ ABOUT"></h2>
<p class="sub-text">ロボットだけじゃない！<br class="sp">未来を生き抜く力を<br class="sp">総合的に学べる教室です</p>
</div>
<ul class="card-list">
<li class="card">
<a href="/category/プログラミング/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon01.png" alt="[プログラミング アイコン]">
</div>
<p class="ttl">プログラミング</p>
<p class="textarea">Scratch や Python でキャラやロボを動かそう！楽しみながら論理的思考力が身につく！</p>
</a>
</li>
<li class="card">
<a href="/category/電子工作/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon02.png" alt="[電子工作 アイコン]">
</div>
<p class="ttl">電子工作</p>
<p class="textarea">LED とセンサーを組み合わせてオリジナル機器を制作！試行錯誤でものづくり力が伸びる！</p>
</a>
</li>
<li class="card">
<a href="/category/ドローン（無人航空機）/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon03.png" alt="[ドローン アイコン]">
</div>
<p class="ttl">ドローン</p>
<p class="textarea">手動操縦＋自動飛行プログラムに挑戦！空間認識とプログラミング応用力がアップ！</p>
</a>
</li>
<li class="card">
<a href="/category/３d/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon04.png" alt="[3Dプリンタ アイコン]">
</div>
<p class="ttl">3Dプリンタ</p>
<p class="textarea">自分で設計→出力！形になる感動で創造力がぐんとアップ！</p>
</a>
</li>
<li class="card">
<a href="/category/スマホ/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon05.png" alt="[スマホ撮影 アイコン]">
</div>
<p class="ttl">スマホ</p>
<p class="textarea">撮影・編集・発信をスマホ一本で実践！表現力と情報発信スキルが高まる！</p>
</a>
</li>
<li class="card">
<a href="/category/ネットリテラシー/">
<div class="icon image">
<img src="<?php echo $theme_url; ?>/img/about_icon06.png" alt="[ネットリテラシー アイコン]">
</div>
<p class="ttl">ネットリテラシー</p>
<p class="textarea">ルールとマナー＋生成AI の使い方を学習！デジタル社会を安全に楽しむ力を習得しよう！</p>
</a>
</li>
</ul><!--/.card-list-->
<div class="image deco-robot">
<img src="<?php echo $theme_url; ?>/img/about_robot.png" alt="[ロボットのイラスト]">
</div>
</div><!-- /.inner -->
</section>
<!------------▲▲▲▲ 神戸ロボットクラブってどんな教室？ ▲▲▲▲------------>
<!------------▼▼▼▼ 特長 ▼▼▼▼------------>
<section id="features" class="fadein">
<div class="inner">
<div class="ttl-wrap">
<h2><img src="<?php echo $theme_url; ?>/img/ttl_feature.svg" alt="教室の4つの特長 FEATURES"></h2>
</div>
<ul class="feature-list">
<!-- POINT 01 -->
<li class="feature">
<div class="txt-wrap">
<h3 class="point"><span class="num"><img src="<?php echo $theme_url; ?>/img/txt_point01.svg" alt="POINT01"></span><span class="pc">｜</span>専門家監修の理工系カリキュラム</h3>
<p class="desc">
現役エンジニアが監修し、Scratch・Python から電子工作・3Dプリンターまで幅広く幅広く網羅。<br>
「わかったつもり」で終わらず、仕組みを自分の言葉で説明できるまで伴走します。
</p>
<div class="btn"><a href="/category/お知らせ/">新着情報一覧</a></div>
</div>
<div class="image">
<img src="<?php echo $theme_url; ?>/img/feature_point01.jpg" alt="[専門家監修の理工系カリキュラム イメージ]">
</div>
</li>
<!-- POINT 02 -->
<li class="feature">
<div class="txt-wrap">
<h3 class="point"><span class="num"><img src="<?php echo $theme_url; ?>/img/txt_point02.svg" alt="POINT02"></span><span class="pc">｜</span>アウトプット重視のイチ推しイベント</h3>
<p class="desc">
ドローンレース、ロボット競技会、3Dプリント作品展など、“作って終わり”ではない発表の場を毎月用意。<br>
大会受賞も多数で、挑戦するたびに自信とプレゼン力が育ちます。
</p>
<div class="btn">
<a href="/category/イベント/">イベント一覧を見る</a>
</div>
</div>
<div class="image">
<img src="<?php echo $theme_url; ?>/img/feature_point02.jpg" alt="[アウトプット重視のイチ推しイベント イメージ]">
</div>
</li>
<!-- POINT 03 -->
<li class="feature">
<div class="txt-wrap">
<h3 class="point"><span class="num"><img src="<?php echo $theme_url; ?>/img/txt_point03.svg" alt="POINT03"></span><span class="pc">｜</span>AI・最新テクノロジーをいち早く体験</h3>
<p class="desc">
ChatGPT や画像生成 AI を授業に取り入れ、「ツールをどう使いこなすか」を実践的に指導。<br>
未来の仕事で必須となるリテラシーを、小学生のうちから楽しみながら学べます。
</p>
<div class="btn">
<a href="/category/ai/">AI 授業例をしくみ見る</a>
</div>
</div>
<div class="image">
<img src="<?php echo $theme_url; ?>/img/feature_point03.jpg" alt="[AI・最新テクノロジー体験 イメージ]">
</div>
</li>
<!-- POINT 04 -->
<li class="feature">
<div class="txt-wrap">
<h3 class="point"><span class="num"><img src="<?php echo $theme_url; ?>/img/txt_point04.svg" alt="POINT04"></span><span class="pc">｜</span>地域密着のコミュニティ&手厚いサポート</h3>
<p class="desc">
神戸・西宮・垂水ほか駅近に複数拠点を展開し、曜日振替やオンライン質問対応も完備。<br>
小学生からシニアまでが集う多世代イベントで、学びと交流の輪が広がります。
</p>
<div class="btn">
<a href="/category/教室案内/">教室案内を見る</a>
</div>
</div>
<div class="image">
<img src="<?php echo $theme_url; ?>/img/feature_point04.jpg" alt="[地域密着サポート イメージ]">
</div>
</li>
</ul>
<!-- ── CTA ボタン ─────────────────────────────── -->
<div class="btn-wrap">
<div class="btn image">
<a href="/23-2/" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/btn_entry.png" alt="＼まずは体験会で空気感をチェック！／無料体験会に申し込む"></a>
</div>
<div class="btn image">
<a href="/category/イベント/" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/btn_event.png" alt="＼イベントも開催中／イベント・大会一覧"></a>
</div>
</div>
<!-- ── 装飾イラスト ─────────────────────────── -->
<div class="image robot"><img src="<?php echo $theme_url; ?>/img/feature_robot.png" alt="[ロボットのイラスト]"></div>
</div><!-- /.inner -->
</section>
<!------------▲▲▲▲ 特長 ▲▲▲▲------------>
<!------------▼▼▼▼ 次の教室 ▼▼▼▼------------>
<section id="next-class">
<div class="inner" style="max-width:760px;margin:0 auto;padding:40px 20px;">
<div class="krc-cal" data-mode="next"></div>
<style>
.krc-cal{margin:1.5em 0;font-size:15px}
.krc-cal .nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6em}
.krc-cal .nav button{border:0;background:#1e88e5;color:#fff;border-radius:999px;padding:.4em 1em;cursor:pointer;font-size:14px}
.krc-cal .ttl{font-weight:bold;font-size:1.2em}
.krc-cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.krc-cal th{padding:.3em;background:#f3f7fb;font-size:13px}
.krc-cal th:first-child{color:#e53935}.krc-cal th:last-child{color:#1e88e5}
.krc-cal td{vertical-align:top;height:6.5em;border:1px solid #e2e8f0;padding:2px}
.krc-cal td.o{background:#fafafa;color:#bbb}.krc-cal td.t{background:#fffbe6}
.krc-cal .d{font-size:12px;font-weight:bold}
.krc-cal a.e{display:block;margin:2px 0;padding:1px 4px;border-radius:4px;color:#fff;font-size:11px;line-height:1.35;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.krc-cal ul{list-style:none;padding:0;margin:0}
.krc-cal li{display:flex;gap:.6em;align-items:center;padding:.55em .2em;border-bottom:1px solid #e2e8f0}
.krc-cal li .dt{flex:0 0 6.2em;font-weight:bold}
.krc-cal li .bar{flex:0 0 6px;align-self:stretch;border-radius:3px}
.krc-cal li a{color:#333;text-decoration:none}
.krc-cal li small{color:#777}
.krc-cal .more{display:block;text-align:center;margin-top:1em;padding:.7em;border-radius:999px;background:#1e88e5;color:#fff;text-decoration:none;font-weight:bold}
.krc-cal .grid{display:block}.krc-cal .list{display:none}
@media(max-width:700px){.krc-cal .grid{display:none}.krc-cal .list{display:block}}
</style>
<script>
(function(){
var U={"viscuit":"https://koberobot.com/2026/11/06/post-594/","scratch":"https://koberobot.com/2026/11/06/post-595/","drone":"https://koberobot.com/2026/11/06/post-596/","d3":"https://koberobot.com/2026/11/06/post-597/","pc":"https://koberobot.com/2026/11/06/post-598/","english":"https://koberobot.com/2026/11/06/post-599/","craftyty":"https://koberobot.com/2026/11/06/post-600/","winter":"https://koberobot.com/2026/11/06/post-601/","takaha":"https://koberobot.com/2026/11/06/post-602/","mikage":"https://koberobot.com/2026/10/26/post-538/","wada":"https://koberobot.com/2026/10/26/post-539/","kiten":"https://koberobot.com/2026/10/17/scratchjr-kiten/","schedule":"https://koberobot.com/schedule/"};
var R=[
{n:'ビスケット',w:6,nth:[2,4],t:'10:00',p:'Kobe Future Lab',u:U.viscuit,c:'#fb8c00'},
{n:'スクラッチ',w:6,nth:[2,4],t:'11:00',p:'Kobe Future Lab',u:U.scratch,c:'#f4511e'},
{n:'ドローン',w:6,nth:[2,4],t:'13:00',p:'Kobe Future Lab',u:U.drone,c:'#00acc1'},
{n:'3Dプリンター',w:6,nth:[2],t:'14:00',p:'Kobe Future Lab',u:U.d3,c:'#3949ab'},
{n:'パソコン入門',w:6,nth:[1,3],t:'13:00',p:'Kobe Future Lab',u:U.pc,c:'#546e7a'},
{n:'英会話',w:6,nth:[1,3],t:'15:00',p:'Kobe Future Lab',u:U.english,c:'#00897b'},
{n:'デジタル入門',w:2,t:'18:00',p:'Kobe Future Lab',u:U.craftyty+'#tue',c:'#1e88e5'},
{n:'アートを作る',w:3,t:'18:00',p:'Kobe Future Lab',u:U.craftyty+'#wed',c:'#e91e63'},
{n:'ヴァーチャル',w:4,t:'18:00',p:'Kobe Future Lab',u:U.craftyty+'#thu',c:'#8e24aa'},
{n:'ロボット・電子工作',w:5,t:'18:00',p:'Kobe Future Lab',u:U.craftyty+'#fri',c:'#43a047'},
{n:'御影教室',w:4,nth:[2,4],t:'16:30',p:'阪神御影駅',u:U.mikage,c:'#ef6c00'},
{n:'和田岬教室',w:2,nth:[3],t:'15:45',p:'地下鉄和田岬駅',u:U.wada,c:'#d84315'},
{n:'kiten教室',w:5,nth:[4],t:'16:00',p:'阪神大石駅',u:U.kiten,c:'#f9a825',to:'2027-02-28'}
];
var S=[];
['2026-12-25','2026-12-26','2026-12-27','2026-12-28','2026-12-29','2026-12-30'].forEach(function(d){
S.push({d:d,n:'冬休み企画',t:'10:30',p:'Kobe Future Lab',u:U.winter,c:'#c62828'});
S.push({d:d,n:'冬休み企画',t:'14:00',p:'Kobe Future Lab',u:U.winter,c:'#c62828'});
});
function ymd(x){return x.getFullYear()+'-'+('0'+(x.getMonth()+1)).slice(-2)+'-'+('0'+x.getDate()).slice(-2)}
function ev(x){var k=ymd(x),nth=Math.ceil(x.getDate()/7),o=[];
R.forEach(function(r){if(r.w!==x.getDay())return;if(r.nth?r.nth.indexOf(nth)<0:false)return;if(r.to?k>r.to:false)return;o.push(r)});
S.forEach(function(s){if(s.d===k)o.push(s)});
return o.sort(function(a,b){return a.t<b.t?-1:1})}
var W='日月火水木金土';
function grid(y,m){var f=new Date(y,m,1),s=new Date(y,m,1-f.getDay()),h='<table><tr>';
for(var i=0;i<7;i++)h+='<th>'+W[i]+'</th>';h+='</tr>';var today=ymd(new Date());
for(var r=0;r<6;r++){h+='<tr>';for(var c=0;c<7;c++){var d=new Date(s.getFullYear(),s.getMonth(),s.getDate()+r*7+c);
h+='<td class="'+(d.getMonth()!==m?'o':'')+(ymd(d)===today?' t':'')+'"><div class="d">'+d.getDate()+'</div>';
if(d.getMonth()===m)ev(d).forEach(function(e){h+='<a class="e" style="background:'+e.c+'" href="'+e.u+'" title="'+e.t+' '+e.n+'">'+e.t+' '+e.n+'</a>'});
h+='</td>'}h+='</tr>';if(new Date(s.getFullYear(),s.getMonth(),s.getDate()+(r+1)*7).getMonth()!==m)break}
return h+'</table>'}
function list(from,to,max){var h='<ul>',n=0;for(var d=new Date(from);(d<=to?n<max:false);d.setDate(d.getDate()+1)){
ev(d).forEach(function(e){if(n>=max)return;n++;h+='<li><span class="bar" style="background:'+e.c+'"></span><span class="dt">'+(d.getMonth()+1)+'/'+d.getDate()+'（'+W[d.getDay()]+'）</span><a href="'+e.u+'">'+e.t+' '+e.n+'<br><small>'+e.p+'</small></a></li>'})}
return h+'</ul>'}
document.querySelectorAll('.krc-cal').forEach(function(box){
var t=new Date();t.setHours(0,0,0,0);
if(box.dataset.mode==='next'){
box.innerHTML='<div class="ttl">📅 次の教室</div>'+list(t,new Date(t.getFullYear(),t.getMonth()+2,0),5)+'<a class="more" href="'+U.schedule+'">教室スケジュールをすべて見る →</a>';return}
var y=t.getFullYear(),m=t.getMonth();
function draw(){var end=new Date(y,m+1,0),st=new Date(y,m,1);if(st<t)st=t;
box.innerHTML='<div class="nav"><button data-k="-1">← 前の月</button><span class="ttl">'+y+'年'+(m+1)+'月</span><button data-k="1">次の月 →</button></div><div class="grid">'+grid(y,m)+'</div><div class="list">'+list(st,end,200)+'</div>';
box.querySelectorAll('button').forEach(function(b){b.onclick=function(){m+=+b.dataset.k;if(m<0){m=11;y--}if(m>11){m=0;y++}draw()}})}
draw()});
})();
</script>
</div><!-- /.inner -->
</section>
<!------------▲▲▲▲ 次の教室 ▲▲▲▲------------>
<!------------▲▲▲▲ イベント ▲▲▲▲------------>
<section id="event-info">
<div class="inner" class="fadein">
<div class="ttl-wrap">
<h2 class="image"><img src="<?php echo $theme_url; ?>/img/ttl_event.svg" alt="イベント・大会情報 EVENT CONVENTION"></h2>
<p class="sub-text">神戸ロボットクラブは<br class="sp">SNSでのリアルタイム発信で<br class="sp">“学びのクワクク”を共有しています。</p>
</div>
<ul class="event-list">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array('イベント', '大会'),
),
),
);
$loop = new WP_Query( $args );
while($loop->have_posts()):$loop->the_post();
$Img01 = get_field('メイン画像');
$default_img = 'https://koberobot.com/wp-content/uploads/2025/03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2025-03-14-21.32.05.png';
$Day = get_field('開催日時');
if ( !empty($Img01) && !empty($Img01['url']) ) {
$img_url = $Img01['url'];
} elseif ( has_post_thumbnail() ) {
$img_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
} else {
$img_url = $default_img;
}
?>
<!-- イベント 1 -->
<li class="event">
<a href="<?php the_permalink(); ?>">
<div class="image-wrap">
<div class="image">
<img src="<?php echo esc_url($img_url); ?>" alt="<?php the_title(); ?>">
</div>
<p class="cat"><?php echo has_category('大会') ? '大会' : 'イベント'; ?></p>
</div>
<div class="txt-wrap">
<p class="ttl"><?php the_title() ?></p>
<p class="textarea">
<?php
$num = 40;
$content = get_the_content(); // the_content() だと echo されてしまうので注意
$content = strip_tags(strip_shortcodes($content)); // タグとショートコードを除去
$content = preg_replace('/( |\r|\n|\t)/u', '', $content); // 全角空白・改行を除去（英単語の間の半角スペースは残す）
$content = preg_replace('/ {2,}/', ' ', trim($content)); // 連続する半角スペースは1つに
// 文字数で判定して出力
if (mb_strlen($content, 'UTF-8') > $num) {
echo mb_substr($content, 0, $num, 'UTF-8') . '...';
} else {
echo $content;
}
?>
</p>
<?php if ( !empty($Day) ) : ?>
<p class="date">開催日時：<?php echo esc_html($Day); ?></p>
<?php endif; ?>
</div>
</a>
</li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
<!-- ── CTA ボタン ─────────────────────────────── -->
<div class="btn-wrap">
<div class="btn">
<a href="/category/イベント/"><img src="<?php echo $theme_url; ?>/img/btn_event_line.png" alt="＼イベントも開催中／イベント・大会一覧"></a>
</div>
<div class="btn">
<a href="https://www.instagram.com/koberobotclub/" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/btn_insta.png" alt="Instagramで最新情報を更新中"></a>
</div>
</div>
</div><!-- /.inner -->
</section>
<!------------▲▲▲▲ イベント ▲▲▲▲------------>
<!------------▼▼▼▼ 出前授業・講演会 ▼▼▼▼------------>
<?php
$demae = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 3,
'category_name' => 'demae',
) );
if ( $demae->have_posts() ) :
?>
<style>
#outreach{background:#fdfaf5}
#outreach .ttl-wrap{text-align:center}
#outreach .ttl-wrap .en{display:block;color:var(--orange);font-weight:bold;letter-spacing:.15em}
#outreach .ttl-wrap h2{font-weight:900;color:#333;line-height:1.3}
#outreach .sub-text{text-align:center;font-weight:500;color:#444}
#outreach .event-list .event{background:#fff;height:auto;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
#outreach .event-list .event a{color:inherit;text-decoration:none}
#outreach .event-list .event .image-wrap{position:relative}
#outreach .event-list .event .image img{width:100%;height:100%;border-radius:12px 12px 0 0;object-fit:cover;object-position:center top}
#outreach .event-list .event .cat{background:var(--green);color:#fff;font-weight:bold;display:inline-flex;align-items:center;line-height:1;position:absolute;bottom:0;left:0;border-radius:0 5px 0 0}
#outreach .event-list .event .txt-wrap .ttl{font-weight:bold;line-height:1.3}
#outreach .event-list .event .txt-wrap .day{color:#888;font-weight:500}
#outreach .btn{text-align:center}
#outreach .btn a{display:inline-block;background:var(--orange);color:#fff;font-weight:bold;border-radius:999px;text-decoration:none}
@media screen and (min-width:768px){
#outreach .inner{padding:70px 0 80px}
#outreach .ttl-wrap{margin-bottom:30px}
#outreach .ttl-wrap .en{font-size:16px;margin-bottom:6px}
#outreach .ttl-wrap h2{font-size:34px;margin-bottom:16px}
#outreach .sub-text{font-size:18px}
#outreach .event-list{display:flex;align-items:stretch;justify-content:center;margin-block:40px}
#outreach .event-list .event{width:380px;margin-right:30px}
#outreach .event-list .event:last-child{margin-right:0}
#outreach .event-list .event .image{height:253px}
#outreach .event-list .event .cat{font-size:16px;height:30px;padding:0 12px}
#outreach .event-list .event .txt-wrap{padding:20px}
#outreach .event-list .event .txt-wrap .ttl{font-size:20px;margin-bottom:8px}
#outreach .event-list .event .txt-wrap .day{font-size:14px}
#outreach .btn a{font-size:18px;padding:16px 48px}
}
@media screen and (max-width:767px){
#outreach .inner{padding:12vw 0}
#outreach .ttl-wrap{margin-bottom:4vw}
#outreach .ttl-wrap .en{font-size:3.2vw;margin-bottom:1.5vw}
#outreach .ttl-wrap h2{font-size:6.4vw;margin-bottom:3vw}
#outreach .sub-text{font-size:4vw}
#outreach .event-list{margin-block:6vw}
#outreach .event-list .event{width:100%;margin-bottom:4vw}
#outreach .event-list .event .image{height:61.33vw}
#outreach .event-list .event .cat{font-size:3.2vw;height:6vw;padding:0 2.67vw}
#outreach .event-list .event .txt-wrap{padding:4vw}
#outreach .event-list .event .txt-wrap .ttl{font-size:4.27vw;margin-bottom:2vw}
#outreach .event-list .event .txt-wrap .day{font-size:3.2vw}
#outreach .btn a{font-size:4vw;padding:4vw 10vw}
}
</style>
<section id="outreach">
<div class="inner">
<div class="ttl-wrap">
<span class="en">OUTREACH</span>
<h2>出前授業・講演会</h2>
<p class="sub-text">学校・地域・各団体へ出向いて、<br class="sp">プログラミングやネットリテラシーの<br class="sp">授業・講演をしています。</p>
</div>
<ul class="event-list">
<?php while ( $demae->have_posts() ) : $demae->the_post();
$o_img = has_post_thumbnail() ? get_the_post_thumbnail_url( get_the_ID(), 'large' ) : 'https://koberobot.com/wp-content/uploads/2025/03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2025-03-14-21.32.05.png';
?>
<li class="event">
<a href="<?php the_permalink(); ?>">
<div class="image-wrap">
<div class="image"><img src="<?php echo esc_url( $o_img ); ?>" alt="<?php the_title_attribute(); ?>" loading="lazy"></div>
<p class="cat">出前授業・講演会</p>
</div>
<div class="txt-wrap">
<p class="ttl"><?php the_title(); ?></p>
<p class="day"><?php the_time('Y.m.d'); ?></p>
</div>
</a>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
<div class="btn"><a href="/category/demae/">もっと見る</a></div>
</div>
</section>
<?php endif; ?>
<!------------▲▲▲▲ 出前授業・講演会 ▲▲▲▲------------>
<!------------▲▲▲▲ 教室案内 ▲▲▲▲------------>
<section id="access">
<div class="inner">
<div class="ttl-wrap">
<h2 class="image"><img src="<?php echo $theme_url; ?>/img/ttl_access.svg" alt="教室案内 ACCESS"></h2>
</div>
<?php
$loop = new WP_Query( array( 'post_type' => 'access', 'posts_per_page' => -1 ) );
$main = array();
$other = array();
foreach ( $loop->posts as $p ) {
if ( strpos( $p->post_name, 'other-' ) === 0 ) {
$other[] = $p;
} else {
$main[] = $p;
}
}
$render_facilities = function( $list ) {
foreach ( $list as $p ) {
$Station = get_field( '最寄り駅', $p->ID );
$Img01 = get_field( '教室画像', $p->ID );
?>
<li class="facility">
<a class="facility-link" href="<?php echo esc_url( get_permalink( $p ) ); ?>" aria-label="<?php echo esc_attr( get_the_title( $p ) ); ?>"></a>
<div class="txt-wrap">
<p class="name"><?php echo esc_html( get_the_title( $p ) ); ?></p>
<p class="station"><span>最寄り駅</span> <?php echo esc_html( $Station ); ?></p>
</div>
<?php if ( is_array( $Img01 ) && ! empty( $Img01['url'] ) ) : ?>
<div class="image">
<img src="<?php echo esc_url( $Img01['url'] ); ?>" alt="<?php echo esc_attr( get_the_title( $p ) ); ?>">
</div>
<?php endif; ?>
</li>
<?php
}
};
?>
<?php if ( $main ) : ?>
<div class="facilities">
<h3>施設</h3>
<ul class="facility-list">
<?php $render_facilities( $main ); ?>
</ul>
</div>
<?php endif; ?>
<?php if ( $other ) : ?>
<div class="facilities facilities-other">
<h3>その他の教室</h3>
<ul class="facility-list">
<?php $render_facilities( $other ); ?>
</ul>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<!-- 補足テキスト -->
<p class="note">
そのほかにも、不定期でさまざまな場所にて教室を開催しています。<br>
お近くで開催の際は、ぜひお気軽にご参加ください！
</p>
<!-- CTA -->
<div class="btn">
<a href="/category/教室案内/">教室案内を見る</a>
</div>
</div>
</section>
<!------------▲▲▲▲ 教室案内 ▲▲▲▲------------>
<!------------▲▲▲▲ お問い合わせ ▲▲▲▲------------>
<section id="contact">
<div class="inner">
<div class="ttl-wrap">
<h2 class="image"><img src="<?php echo $theme_url; ?>/img/ttl_contact.svg" alt="お問い合わせ CONTACT"></h2>
</div>
<!-- お問い合わせエリア（Flex） -->
<div class="contact-wrap">
<!-- ── メール問い合わせ ───────────────────── -->
<div class="mail-block block">
<p>メールでお問い合わせ・お申込みはこちら</p>
<div class="btn">
<a href="/23-2/"><img src="<?php echo $theme_url; ?>/img/contact_mail.png" alt="お問い合わせ・お申込み"></a>
</div>
</div>
<!-- ── LINE 問い合わせ ─────────────────── -->
<div class="line-block block">
<p>LINEで様々な情報配信中！</p>
<div class="btn">
<a href="https://line.me/R/ti/p/@561qhegf" target="_blank" rel="noopener"><img src="<?php echo $theme_url; ?>/img/contact_line.png" alt="LINEお友達登録"></a>
</div>
<div class="image qr">
<img src="https://koberobot.com/wp-content/uploads/2026/10/contact_qr_line_561qhegf.png" alt="LINE友だち追加用QRコード（NPO法人神戸ロボットクラブ）">
</div>
</div>
</div>
<!-- ── Googleの口コミ ─────────────────── -->
<div class="review-block" style="margin:40px auto 0;max-width:820px;padding:24px;border:2px dashed #2b9fd8;border-radius:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 32px;text-align:center;">
<div style="flex:1 1 280px;">
<p style="font-weight:bold;font-size:20px;line-height:1.5;margin:0 0 10px;">みなさんの声をお聞かせください</p>
<p style="font-size:15px;line-height:1.8;margin:0 0 16px;">体験や教室の感想を、Googleの口コミで教えていただけるとうれしいです。<br>いただいた声は、これからの活動の大きな励みになります。</p>
<a href="https://g.page/r/CTGQANT_JS6rEBM/review" target="_blank" rel="noopener" style="display:inline-block;background:#2b9fd8;color:#fff;font-weight:bold;padding:12px 32px;border-radius:999px;text-decoration:none;">口コミを書く</a>
</div>
<div style="flex:0 0 auto;">
<img src="https://koberobot.com/wp-content/uploads/2026/10/koberobot-review-qr.png" alt="Googleの口コミ投稿用QRコード" width="130" height="130" style="display:block;width:130px;height:130px;">
<p style="font-size:12px;margin:6px 0 0;">スマホで読み取れます</p>
</div>
</div>
</div>
</section>
<!------------▲▲▲▲ 問い合わせ ▲▲▲▲------------>
</main>
<?php get_footer('new'); ?>
