PageSourceSearch

https://grandblue-anime.com/index.html

html grandblue-anime.com collected 2026-10-02 07:41:05 UTC 78,992 bytes, 1,873 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja" prefix="og: http://ogp.me/ns#">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>TVアニメ「ぐらんぶる」Season 3公式サイト</title>
6<meta name="description" content="7月~Season3絶賛放送中!全裸系青春ダイビングアニメ!今回はコンプライアンスに鑑みて●を5%アップしています。" />
7<meta name="keywords" content="good!アフタヌーン,講談社,井上堅二,吉岡公威,ダイビング,青春,大学生,サークル,高松信司,草間英興,ゼロジー,酒,野球拳,スピリタス, 乾杯,PADI,TUSA,オリンパス,mic21,月刊マリンダイビング,内田雄馬,木村良平,安元洋貴,小西克幸,安済知佳,内田真礼,行成とあ,阿澄佳奈,江口拓也,榎木淳弥,花江夏樹,ロバート・ウォーターマン,福山潤,川田紳司,水樹奈々,湘南乃風,華金ラジオ" />
8<meta name="robots" content="follow,index" />
9<meta http-equiv="Content-Style-Type" content="text/css" />
10<meta http-equiv="Content-Script-Type" content="text/javascript" />
11<meta name="viewport" content="width=device-width">
12<meta name="format-detection" content="telephone=no">
13<meta http-equiv="X-UA-Compatible" content="ie=edge">
14
15<!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 15-16
15
16<script async src="https://www.googletagmanager.com/gtag/js?id=
16G-PRW7GCGDEP
vendor: 13 bytes, line 16
16"></script>
17<script>
18  
vendor: 138 bytes, lines 18-22
18window.dataLayer = window.dataLayer || [];
19  function gtag(){dataLayer.push(arguments);}
20  gtag('js', new Date());
21
22  gtag('config', '
22G-PRW7GCGDEP
vendor: 5 bytes, line 22
22');
23</script>
23
24
25<!-- Google Tag Manager -->
26<script>
vendor: 331 bytes, lines 26-30
26(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
27new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
28j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
29'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
30})(window,document,'script','dataLayer','
30GTM-WQJSBMG4
vendor: 3 bytes, line 30
30');
30</script>
30
31<!-- End Google Tag Manager -->
32<meta property="og:title" content="TVアニメ「ぐらんぶる」Season 3公式サイト">
33<meta property="og:site_name" content="TVアニメ「ぐらんぶる」Season 3公式サイト">
34<meta property="og:description" content="7月~Season3絶賛放送中!全裸系青春ダイビングアニメ!今回はコンプライアンスに鑑みて●を5%アップしています。">
35<meta property="og:type" content="website">
36<meta property="og:url" content="https://grandblue-anime.com/">
37<meta property="og:image" content="https://grandblue-anime.com/core_sys/images/others/ogp-s3.jpg">
38<meta name="twitter:card" content="summary_large_image">
39
40<!-- Web App Manifest -->
41<link rel="manifest" href="core_sys/images/sys/manifest.json">
42
43<!-- Favicon -->
44<link rel="icon" href="core_sys/images/others/favicon/favicon.ico">
45
46<!-- Touch Icon -->
47<link rel="apple-touch-icon" sizes="57x57" href="core_sys/images/others/favicon/apple-touch-icon-57x57.png">
48<link rel="apple-touch-icon" sizes="60x60" href="core_sys/images/others/favicon/apple-touch-icon-60x60.png">
49<link rel="apple-touch-icon" sizes="72x72" href="core_sys/images/others/favicon/apple-touch-icon-72x72.png">
50<link rel="apple-touch-icon" sizes="76x76" href="core_sys/images/others/favicon/apple-touch-icon-76x76.png">
51<link rel="apple-touch-icon" sizes="114x114" href="core_sys/images/others/favicon/apple-touch-icon-114x114.png">
52<link rel="apple-touch-icon" sizes="120x120" href="core_sys/images/others/favicon/apple-touch-icon-120x120.png">
53<link rel="apple-touch-icon" sizes="144x144" href="core_sys/images/others/favicon/apple-touch-icon-144x144.png">
54<link rel="apple-touch-icon" sizes="152x152" href="core_sys/images/others/favicon/apple-touch-icon-180x180.png">
55<link rel="apple-touch-icon" sizes="180x180" href="core_sys/images/others/favicon/apple-touch-icon-180x180.png">
56<link rel="apple-touch-icon" href="core_sys/images/others/favicon/apple-touch-icon.png">
57
58<link rel="icon" type="image/png" sizes="36x36" href="core_sys/images/others/favicon/android-chrome-36x36.png">
59<link rel="icon" type="image/png" sizes="48x48" href="core_sys/images/others/favicon/android-chrome-48x48.png">
60<link rel="icon" type="image/png" sizes="72x72" href="core_sys/images/others/favicon/android-chrome-72x72.png">
61<link rel="icon" type="image/png" sizes="96x96" href="core_sys/images/others/favicon/android-chrome-96x96.png">
62<link rel="icon" type="image/png" sizes="128x128" href="core_sys/images/others/favicon/android-chrome-128x128.png">
63<link rel="icon" type="image/png" sizes="144x144" href="core_sys/images/others/favicon/android-chrome-144x144.png">
64<link rel="icon" type="image/png" sizes="152x152" href="core_sys/images/others/favicon/android-chrome-152x152.png">
65<link rel="icon" type="image/png" sizes="256x256" href="core_sys/images/others/favicon/android-chrome-256x256.png">
66<link rel="icon" type="image/png" sizes="384x384" href="core_sys/images/others/favicon/android-chrome-384x384.png">
67<link rel="icon" type="image/png" sizes="512x512" href="core_sys/images/others/favicon/android-chrome-512x512.png">
68
69<!-- Microsoft Tile -->
70<meta name="msapplication-square70x70logo" content="core_sys/images/others/favicon/site-tile-70x70.png">
71<meta name="msapplication-square150x150logo" content="core_sys/images/others/favicon/site-tile-150x150.png">
72<meta name="msapplication-wide310x150logo" content="core_sys/images/others/favicon/site-tile-310x150.png">
73<meta name="msapplication-square310x310logo" content="core_sys/images/others/favicon/site-tile-310x310.png">
74<meta name="msapplication-TileColor" content="#ffffff">
75<!-- ==========================================
76Web Font
77========================================== -->
78<link rel="dns-prefetch" href="//fonts.googleapis.com">
79<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
80<!-- Google Fonts -->
81<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@700&display=swap" rel="stylesheet">
82
83<!-- YakuHanJPs(約物半角専用のWebフォント ライセンス
83:SIL OFL 1.1) -->
84<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp.css">
85<!-- ==========================================
86Style
87========================================== -->
88<link href="core_sys/images/others/css/sanitize.css" rel="stylesheet">
89<link href="core_sys/images/others/css/magnific-popup-edited.css" rel="stylesheet">
90<!-- CMS挿入 -->
91<link rel="stylesheet" href="core_sys/css/import/top/001/set.css" type="text/css" />
92<link rel="stylesheet" href="core_sys/css/import/top/001/dez_pt.css" type="text/css" />
93<link rel="stylesheet" href="core_sys/css/import/top/001/unit.css" type="text/css" />
94<link rel="stylesheet" href="core_sys/css/fsc/fss.css" type="text/css" />
95<link rel="alternate stylesheet" href="core_sys/css/fsc/fsm.css" type="text/css" title="fsm" />
96<link rel="alternate stylesheet" href="core_sys/css/fsc/fsl.css" type="text/css" title="fsl" />
97<script type="text/javascript" src="core_sys/js/common.js"></script>
vendor: 1 bytes, line 97
97
98<script type="text/javascript" src="core_sys/js/user.js"></script>
98
99<!-- CMS挿入 -->
100<link href="core_sys/images/others/css/coreblo_reset.css" rel="stylesheet">
101<link href="core_sys/images/others/css/utility.css" rel="stylesheet">
102
103<!-- ========================================
104Script
105========================================= -->
106<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
vendor: 2 bytes, line 106
106
107<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
vendor: 2 bytes, line 107
107
108<script src="core_sys/images/others/js/mav.js"></script>
vendor: 2 bytes, line 108
108
109<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
109</head>
110<body id="layout1">
111<!-- Google Tag Manager (noscript) -->
vendor: 69 bytes, lines 111-112
111
112<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
112GTM-WQJSBMG4
vendor: 85 bytes, lines 112-113
112"
113height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
114<!-- End Google Tag Manager (noscript) --><div id="shutter"></div>
115<script>
116function shutterOpen(){
117  document.getElementById('shutter').classList.add('open')
118}
119function shutterClose(url){
120  const shutter = document.getElementById('shutter');
121  shutter.classList.remove('open')
122  shutter.classList.add('close')
123  setTimeout(function(){
124    window.location = url;
125  }, 400);
126}
127const shutterMaxWait = 1000;
128setTimeout(function(){
129  shutterOpen()
130}, shutterMaxWait);
131window.onpageshow = function(){
132  shutterOpen()
133}
134$(function() {
135  $('a:not([href^="#"]):not([target]):not([href^="index.php#"])').on('click', function(e){
136    e.preventDefault();
137    url = $(this).attr('href');
138    if (url !== '') {
139      shutterClose(url)
140    }
141    return false;
142  });
143});
144</script>
144
145<div class="loading">
146  <div class="loading__img">
147    <img src="core_sys/images/main/home/logo3.png">
148  </div>
149</div>
150
151
152<!-- <wrapper>01start -->
153<div id="wrapper">
154<div id="wrapper_inner">
155
156<!-- <container>start -->
157<div id="container">
158<div id="container_inner">
159
160<!-- <header>start -->
161<div id="header">
162<div id="header_inner">
163<div class="header_sa01">
164<div class="header_sa01_c">
165<!-- global link start -->
166	<div id="g_navi">
167<button class="menuButton">
168  <div class="menuIcon">
169    <span class="menuIcon__line"></span>
170    <span class="menuIcon__line"></span>
171    <span class="menuIcon__line"></span>
172  </div>
173</button>
174<div class="snsFixedLink">
175  <a href="https://x.com/gb_anime" target="_blank">
176    <img src="core_sys/images/main/common/icon_x.svg">
177  </a>
178</div>
179<header class="header">
180  <div class="header__inner">
181    <div class="header__close">
182      <button type="button" class="headerCloseBtn"></button>
183    </div>
184    <div class="headerBox">
185      <div class="headerBox__head">
186        <a href="index.html">
187                    <img src="core_sys/images/main/menu/menu.png" alt="menu">
188                    </a>
189        </div>
190      <div class="headerBox__navi">
191
192        <nav class="globalNavi">
193	<ul>
194<li class="gh_item1 gh_lino2"><a href="news/index.html" title="NEWS"><span class="gh_sno2">news</span></a></li><li class="gh_item2 gh_lino22"><a href="onair/03.html" title="ON AIR"><span class="gh_sno22">onair</span></a></li><li class="gh_item3 gh_lino3"><a href="index.php#staff" title="STAFF"><span class="gh_sno3">staff</span></a></li><li class="gh_item4 gh_lino4"><a href="index.php#cast" title="CAST"><span class="gh_sno4">cast</span></a></li><li class="gh_item5 gh_lino21"><a href="story/24.html" title="STORY"><span class="gh_sno21">story</span></a></li><li class="gh_item6 gh_lino6"><a href="index.php#character" title="CHARACTER"><span class="gh_sno6">character</span></a></li><li class="gh_item7 gh_lino17"><a href="music/03.html" title="MUSIC"><span class="gh_sno17">music</span></a></li><li class="gh_item8 gh_lino24"><a href="bd/03-01.html" class="crt" title="Blu-ray"><span class="gh_sno24">bluray</span></a></li><li class="gh_item9 gh_lino20"><a href="goods/index.html" title="GOODS"><span class="gh_sno20">goods</span></a></li><li class="gh_item10 gh_lino7"><a href="index.php#books" title="BOOKS"><span class="gh_sno7">books</span></a></li><li class="gh_item11 gh_lino8"><a href="special/index.html" title="SPECIAL"><span class="gh_sno8">special</span></a></li><li class="gh_item12 gh_lino23"><a href="movie/index.html" title="MOVIE"><span class="gh_sno23">movie</span></a></li></ul>
195</nav>
196      </div>
197    </div><!-- headerBox -->
198  </div><!-- header__inner -->
199</header>
200
201<div class="navOverlay"></div>
202
203<script>
204/* ==========================================
205*  グローバルナビ
206* 2019/04/15 - 10:42
207========================================== */
208$(function(){
209
210  GNAV_SCREENTYPE = null;
211  GNAV_STATE = "close";
212
213  var $menubutton = $(".menuButton"); // トリガーにするボタン
214    $gNavUnit = $("#g_navi"), // classを付け替える要素
215    $gNavLink = $gNavUnit.find("a"), // グローバルナビリンク
216    switchSize = 900, // SP / PC切り替えサイズ
217    locationHref = location.href; // 現在のURL
218    urlHash = location.hash, // 現在のURLハッシュ
219    scrollTime = 1000, // スクロール時間
220    scrollEasing = "swing", // スクロールイージング
221    scrollOffsetYWide = 0; // PCサイズ時のスクロールオフセット値(px)
222    scrollOffsetYNarrow = 0; // SPサイズ時スクロールオフセット値(px)
223
224  // スムーススクロール
225  function scrollToAnker(hash) {
226    var target = $(hash),
227      position = target.offset().top,
228      offset = scrollOffsetYNarrow;
229    if (GNAV_SCREENTYPE === "wide") {
230      var offset = scrollOffsetYWide;
231    }
232    $("html,body").stop().animate({scrollTop: position + offset }, scrollTime, scrollEasing);
233  }
234
235  // Open グローバルナビ
236  function openNav() {
237    GNAV_STATE = "open";
238    $gNavUnit.addClass("is-open");
239    $("body").css('overflow', 'hidden')
240  }
241
242  // Close グローバルナビ
243  function closeNav() {
244    GNAV_STATE = "close";
245    $gNavUnit.removeClass("is-open");
246    $("body").css('overflow', '')
247  }
248
249  // URLハッシュ判定
250  if(urlHash) {
251    if ($(urlHash).length) {
252      $(function() {
253        $("html,body").stop().animate({ scrollTop: 0 }, 0);
254      });
255      setTimeout(function() {
256        scrollToAnker(urlHash);
257      }, 100);
258    }
259  }
260
261  // スクリーンサイズチェック
262  $(window).on("load resize", function() {
263    var wW = $(window).innerWidth();
264    if (wW > switchSize) {
265      if (GNAV_SCREENTYPE === "wide") { return; }
266      GNAV_SCREENTYPE = "wide";
267      //openNav();
268    } else {
269      if (GNAV_SCREENTYPE === "narrow") { return; }
270      GNAV_SCREENTYPE = "narrow";
271      //closeNav();
272    }
273  });
274
275  $menubutton.on("click", function() {
276    if (GNAV_STATE === "close") {
277      openNav();
278    } else {
279      closeNav();
280    }
281    return false;
282  });
283
284  $gNavLink.on("click", function(){
285    var thisHash = this.hash,
286      $target = $(thisHash),
287      thisFilename = locationHref.replace(/#.*$|index.html|index.php/g,""),
288      targetHref = $(this).get(0).href.replace(/#.*$/,"");
289    if ($(this).attr("target")) { return; }
290    if (!$target.length) { return; };
291    if (targetHref.indexOf(thisFilename) < 0){ return; }
292    //if (GNAV_SCREENTYPE === "narrow") { closeNav(); }
293    closeNav();
294    scrollToAnker(thisHash);
295    window.history.pushState(null, null, thisHash);
296    return false;
297  });
298
299  $('.navOverlay, .headerCloseBtn').on("click", function() {
300    if (GNAV_STATE === "open") {
301      closeNav();
302    }
303    return false;
304  });
305  /* ==========================================
306  *
307  *  グローバルナビ差し替え
308  *
309  ========================================== */
310  function naviMaskChange(){
311    const navi = $('.globalNavi a');
312    navi.each(function(){
313      $this = $(this);
314      naviText = $(this).text();
315              const naviImg = '<img src="core_sys/images/main/menu/'+naviText+'.png">';
316            $(this).html(naviImg)
317    })
318  }
319  naviMaskChange()
320});
321
322</script>
322	</div>
323<!-- global link end -->
324</div>
325</div>
326<div class="header_sa02">
327<div class="header_sa02_c">
328<section id="fv" class="fv">
329  <div class="fv__kv">
330    <picture class="fv__kv--a">
331      <source srcset="core_sys/images/main/home/kv04.webp" type="image/webp">
332      <img src="core_sys/images/main/home/kv04.jpg" alt="">
333    </picture>
334    <picture class="fv__kv--b">
335      <source srcset="core_sys/images/main/home/kv04-b.webp" type="image/webp">
336      <img src="core_sys/images/main/home/kv04-b.jpg" alt="">
337    </picture>
338  </div>
339  <div class="fv__logo">
340    <img src="core_sys/images/main/home/logo3.png">
341  </div>
342  <div class="fv__catch">
343    <span class="fv__catch--a"><img src="core_sys/images/main/home/catch04.png" alt="この夏は、パラオのオーシャンでぐらんぶる。"></span>
344    <span class="fv__catch--b"><img src="core_sys/images/main/home/catch04-b.png" alt="この夏は、パラオのオーシャンでぐらんぶる。"></span>
345  </div>
346  <div class="fv__onair">
347    <img src="core_sys/images/main/home/onair02.png" alt="2026年7月より放送開始!TOKYO MX、BS11、MBSにて放送">
348  </div>
349  <div class="fv__bnr">
350    <ul class="fvBnr">
351      <li>
352        <a href="https://grandblue-anime.com/01/" target="_blank" rel="noopener noreferrer">
353          <img src="core_sys/images/main/home/bnr_1st.png">
354        </a>
355      </li>
356      <li>
357        <a href="https://grandblue10th.kodansha.co.jp/" target="_blank" rel="noopener noreferrer">
358          <img src="core_sys/images/main/home/bnr_10th.png">
359        </a>
360      </li>
361      <li>
362        <a href="https://comic-days.com/episode/10834108156628735743" target="_blank" rel="noopener noreferrer">
363          <img src="core_sys/images/main/home/bnr_trial.png">
364        </a>
365      </li>
366    </ul>
367  </div>
368</section>
369<script>
370document.addEventListener('DOMContentLoaded', function(){
371  document.querySelector('.fv__catch').addEventListener('click', function(){
372    document.querySelector('#fv').classList.toggle('side-b')
373  })
374})
375</script>
375</div>
376</div>
377</div>
378</div>
379<!-- <header>end -->
380
381<!-- <ext_area_01>start -->
382<!-- <ext_area_01>end -->
383
384<!-- <contents>start -->
385<div id="contents">
386<div id="contents_inner">
387
388<!-- <contents_main>start -->
389<div id="contents_main">
390<div id="contents_main_inner">
391
392<!-- <main>start -->
393<div id="main">
394<div id="main_inner">
395<div class="main_sa01">
396<div class="main_sa01_c">
397<!-- news list start -->
398	<div id="nwu_001_t">
399<section id="news" class="contBox">
400  <div class="contBox__inner">
401    <div class="contBox__head">
402      <h2 class="sectionHead u-mb-0"><img src="core_sys/images/main/cont/head/news.png" alt="NEWS"></h2>
403    </div>
404    <div class="contBox__body">
405      <!--p class="lineLink">
406        <a href="news/index.html">
407          <img src="core_sys/images/main/cont/more.png" alt="more">
408        </a>
409      </p-->
410      <div class="newsList">
411
412	<table summary="News List">
413	<tr class="bg_a">
414	<td class="day">2026/09/22</td>	<td><div class="title"><a href="news/index01010000.html">Season 4制作決定記念!フォロー&リポストキャンペーン開催決定!</a></div></td>
415	</tr>
416	<tr class="bg_b">
417	<td class="day">2026/09/22</td>	<td><div class="title"><a href="news/index01000000.html">Season 4制作決定!</a></div></td>
418	</tr>
419	<tr class="bg_a">
420	<td class="day">2026/09/22</td>	<td><div class="title"><a href="news/index00990000.html">最終12話放送記念!フォロー&リポストキャンペーン開催決定!</a></div></td>
421	</tr>
422	<tr class="bg_b">
423	<td class="day">2026/09/16</td>	<td><div class="title"><a href="story/24.html">12話あらすじ・場面写真公開!</a></div></td>
424	</tr>
425	<tr class="bg_a">
426	<td class="day">2026/09/15</td>	<td><div class="title"><a href="news/index00970000.html">第11話放送記念!フォロー&リポストキャンペーン開催決定!</a></div></td>
427	</tr>
428	<tr class="bg_b">
429	<td class="day">2026/09/09</td>	<td><div class="title"><a href="story/23.html">11話あらすじ・場面写真公開!</a></div></td>
430	</tr>
431	<tr class="bg_a">
432	<td class="day">2026/09/08</td>	<td><div class="title"><a href="news/index00950000.html">第10話放送記念!フォロー&リポストキャンペーン開催決定!</a></div></td>
433	</tr>
434	<tr class="bg_b">
435	<td class="day">2026/09/02</td>	<td><div class="title"><a href="story/22.html">10話あらすじ・場面写真公開!</a></div></td>
436	</tr>
437	<tr class="bg_a">
438	<td class="day">2026/09/01</td>	<td><div class="title"><a href="news/index00940000.html">第9話放送記念!フォロー&リポストキャンペーン開催決定!</a></div></td>
439	</tr>
440	<tr class="bg_b">
441	<td class="day">2026/08/26</td>	<td><div class="title"><a href="story/21.html">9話あらすじ・場面写真公開!</a></div></td>
442	</tr>
443	</table>
444      </div>
445    </div>
446  </div>
447</section>	</div>
448<!-- news list end -->
449</div>
450</div>
451<div class="main_sa02">
452<div class="main_sa02_c">
453<section id="staff" class="contBox -white">
454  <div class="contBox__inner">
455    <div class="contBox__head">
456      <h2 class="sectionHead"><img src="core_sys/images/main/cont/head/staff.png" alt="STAFF"></h2>
457    </div>
458    <div class="contBox__body">
459
460      <div class="seasonNav">
461        <span data-season="3" class="js-season-btn -crt">SEASON3</span>
462        <span data-season="2" class="js-season-btn">SEASON2</span>
463        <a href="https://grandblue-anime.com/01/staff/index.html" target="_blank" rel="noopener noreferrer">SEASON1</a>
464      </div>
465
466      <div class="intro js-season" data-season="3">
467      <ul class="nameList">
468        <li>
469          <div class="staffBlock">
470            <span class="staffBlock__role">原作</span>
471            <span class="staffBlock__name">井上堅二・吉岡公威
472              <!--span class="-comment">
473                <button class="comBtn" type="button"
474                  data-name='井上堅二'
475                  data-role='原作'
476                  data-comment='六年越しのアニメ二期決定と聞いて、僕はとても驚き、そして歓喜しました。『こんなにも期間が空いても続編を求めて貰えるほどに皆さんダイビングに興味があるのか!』と。なんとも嬉しいお話です。元々この漫画はダイビングというマリンスポーツの啓蒙活動を目的としたものなのですから! 是非アニメ二期を通じて、更に多くの人に海の素晴らしさや友情の育み方、物理実験の難しさや水分補給の大切さを伝えられたら、と思います。'
477                  data-name-2='吉岡公威'
478                  data-role-2='漫画'
479                  data-illust-2='yoshioka_illust.jpg'>
480                  <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
481                </button>
482              </span-->
483            </span>
484            <span class="staffBlock__add">「ぐらんぶる」<br>(講談社「good!アフタヌーン」連載)</span>
485          </div>
486        </li>
487        <li>
488          <div class="staffBlock">
489            <span class="staffBlock__role">監督・音響監督・脚本</span>
490            <span class="staffBlock__name">高松信司
491              <!--span class="-comment">
492                <button class="comBtn" type="button"
493                  data-name='高松信司'
494                  data-role='監督・脚本・音響監督'
495                  data-comment='いえぇぇぇぇぇぇぇぇぇぇ〜い!<br>
496待ちわびること幾年月、<br>
497また、アニメ「ぐらんぶる」の季節が巡ってきました!<br>
498前回の放送での数々のやらかしに、もう2期は無いんじゃ無いかと思っていましたが、「喉元過ぎればなんとやら」というありがたいお言葉をいただいて、再び監督として登板することができました。<br>
499本当に嬉しいかぎりです。<br>
500そして、潜って脱いで飲んで騒いでの狂乱の日々がまたやってきます。<br>
501今からワクワクが止まりません!<br>
502ぜひお楽しみに!'>
503                  <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
504                </button>
505              </span>
506            </span-->
507          </div>
508        </li>
509        <li>
510          <div class="staffBlock">
511            <span class="staffBlock__role">アニメーション制作</span>
512            <span class="staffBlock__name">ゼロジー×セイバーワークス</span>
513          </div>
514        </li>
515      </ul>
516      </div>
517
518      <div class="intro js-season" data-season="2">
519
520      <ul class="nameList">
521        <li>
522          <div class="staffBlock">
523            <span class="staffBlock__role">原作</span>
524            <span class="staffBlock__name">井上堅二・吉岡公威
525              <span class="-comment">
526                <button class="comBtn" type="button" data-name="井上堅二" data-role="原作" data-comment="六年越しのアニメ二期決定と聞いて、僕はとても驚き、そして歓喜しました。『こんなにも期間が空いても続編を求めて貰えるほどに皆さんダイビングに興味があるのか!』と。なんとも嬉しいお話です。元々この漫画はダイビングというマリンスポーツの啓蒙活動を目的としたものなのですから! 是非アニメ二期を通じて、更に多くの人に海の素晴らしさや友情の育み方、物理実験の難しさや水分補給の大切さを伝えられたら、と思います。" data-name-2="吉岡公威" data-role-2="漫画" data-illust-2="yoshioka_illust.jpg">
527                  <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
528                </button>
529              </span>
530            </span>
531            <span class="staffBlock__add">(講談社「good!アフタヌーン」連載)</span>
532          </div>
533        </li>
534        <li>
535          <div class="staffBlock">
536            <span class="staffBlock__role">監督・脚本・音響監督</span>
537            <span class="staffBlock__name">高松信司
538              <span class="-comment">
539                <button class="comBtn" type="button" data-name="高松信司" data-role="監督・脚本・音響監督" data-comment="いえぇぇぇぇぇぇぇぇぇぇ?い!<br>
540待ちわびること幾年月、<br>
541また、アニメ「ぐらんぶる」の季節が巡ってきました!<br>
542前回の放送での数々のやらかしに、もう2期は無いんじゃ無いかと思っていましたが、「喉元過ぎればなんとやら」というありがたいお言葉をいただいて、再び監督として登板することができました。<br>
543本当に嬉しいかぎりです。<br>
544そして、潜って脱いで飲んで騒いでの狂乱の日々がまたやってきます。<br>
545今からワクワクが止まりません!<br>
546ぜひお楽しみに!">
547                  <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
548                </button>
549              </span>
550            </span>
551          </div>
552        </li>
553        <li>
554          <div class="staffBlock">
555            <span class="staffBlock__role c-inlineBlockWrap">
556              <span>キャラクターデザイン・</span><span>総作画監督</span>
557            </span>
558            <span class="staffBlock__name">草間英興
559              <span class="-comment">
560                <button class="comBtn" type="button" data-name="草間英興" data-role="キャラクターデザイン・総作画監督" data-illust="kusama_illust.jpg">
561                  <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
562                </button>
563              </span>
564            </span>
565          </div>
566        </li>
567        <li>
568          <div class="staffBlock">
569            <span class="staffBlock__role">総作画監督</span>
570            <span class="staffBlock__name">植田羊一</span>
571          </div>
572        </li>
573        <li>
574          <div class="staffBlock">
575            <span class="staffBlock__role">美術監督</span>
576            <span class="staffBlock__name">春日礼児</span>
577          </div>
578        </li>
579        <li>
580          <div class="staffBlock">
581            <span class="staffBlock__role">プロップデザイン</span>
582            <span class="staffBlock__name">jimao</span>
583          </div>
584        </li>
585        <li>
586          <div class="staffBlock">
587            <span class="staffBlock__role">色彩設計</span>
588            <span class="staffBlock__name">松山愛子</span>
589          </div>
590        </li>
591        <li>
592          <div class="staffBlock">
593            <span class="staffBlock__role">撮影監督</span>
594            <span class="staffBlock__name">加藤直之</span>
595          </div>
596        </li>
597        <li>
598          <div class="staffBlock">
599            <span class="staffBlock__role">編集</span>
600            <span class="staffBlock__name">徳田俊</span>
601          </div>
602        </li>
603        <li>
604          <div class="staffBlock">
605            <span class="staffBlock__role">音響制作</span>
606            <span class="staffBlock__name">セイバーリンクス</span>
607          </div>
608        </li>
609        <li>
610          <div class="staffBlock">
611            <span class="staffBlock__role">音楽</span>
612            <span class="staffBlock__name">橋本由香利</span>
613          </div>
614        </li>
615        <li>
616          <div class="staffBlock">
617            <span class="staffBlock__role">アニメーション制作</span>
618            <span class="staffBlock__name">ゼロジー×リーベル</span>
619          </div>
620        </li>
621      </ul>
622
623      </div>
624
625
626      <p class="castComInfo">
627        
628        <span class="castComInfo__text"></span>Click to Comment
629        <span class="comBtn" style="pointer-events: none;">
630          <img src="core_sys/images/main/cont/staffcast/comBt_b.png" alt="comment">
631        </span>
632      </p>
633
634    </div>
635  </div>
636</section></div>
637</div>
638<div class="main_sa03">
639<div class="main_sa03_c">
640<section id="cast" class="contBox">
641  <div class="contBox__inner">
642    <div class="contBox__head">
643      <h2 class="sectionHead"><img src="core_sys/images/main/cont/head/cast.png" alt="CAST"></h2>
644    </div>
645    <div class="contBox__body">
646      <ul class="nameList -cast">
647        <li>
648          <div class="castBlock">
649            <span class="castBlock__role">北原伊織:</span>
650            <span class="castBlock__name">内田雄馬</span>
651          </div>
652        </li>
653        <li>
654          <div class="castBlock">
655            <span class="castBlock__role">今村耕平:</span>
656            <span class="castBlock__name">木村良平</span>
657          </div>
658        </li>
659        <li>
660          <div class="castBlock">
661            <span class="castBlock__role">時田信治:</span>
662            <span class="castBlock__name">安元洋貴</span>
663          </div>
664        </li>
665        <li>
666          <div class="castBlock">
667            <span class="castBlock__role">寿竜次郎:</span>
668            <span class="castBlock__name">小西克幸</span>
669          </div>
670        </li>
671        <li>
672          <div class="castBlock">
673            <span class="castBlock__role">古手川千紗:</span>
674            <span class="castBlock__name">安済知佳</span>
675          </div>
676        </li>
677        <li>
678          <div class="castBlock">
679            <span class="castBlock__role">古手川奈々華:</span>
680            <span class="castBlock__name">内田真礼</span>
681          </div>
682        </li>
683        <li>
684          <div class="castBlock">
685            <span class="castBlock__role">浜岡梓:</span>
686            <span class="castBlock__name">行成とあ</span>
687          </div>
688        </li>
689        <li>
690          <div class="castBlock">
691            <span class="castBlock__role">吉原愛菜:</span>
692            <span class="castBlock__name">阿澄佳奈</span>
693          </div>
694        </li>
695       <li>
696          <div class="castBlock">
697            <span class="castBlock__role">毒島桜子:</span>
698            <span class="castBlock__name">山根綺</span>
699          </div>
700        </li>
701      </ul>
702      <ul class="nameList -cast u-mt-40">
703        <li>
704          <div class="castBlock">
705            <span class="castBlock__role">野島元:</span>
706            <span class="castBlock__name">江口拓也</span>
707          </div>
708        </li>
709        <li>
710          <div class="castBlock">
711            <span class="castBlock__role">山本真一郎:</span>
712            <span class="castBlock__name">榎木淳弥</span>
713          </div>
714        </li>
715        <li>
716          <div class="castBlock">
717            <span class="castBlock__role">御手洗優:</span>
718            <span class="castBlock__name">花江夏樹</span>
719          </div>
720        </li>
721        <li>
722          <div class="castBlock">
723            <span class="castBlock__role">藤原健太:</span>
724            <span class="castBlock__name -small">ロバート・ウォーターマン</span>
725          </div>
726        </li>
727        <li>
728          <div class="castBlock">
729            <span class="castBlock__role">工藤会長:</span>
730            <span class="castBlock__name">福山潤</span>
731          </div>
732        </li>
733        
734       <li>
735          <div class="castBlock">
736            <span class="castBlock__role">北原栞:</span>
737            <span class="castBlock__name">諸星すみれ</span>
738          </div>
739        </li>
740
741       <li>
742          <div class="castBlock">
743            <span class="castBlock__role">乙矢尚海:</span>
744            <span class="castBlock__name">青山吉能</span>
745          </div>
746        </li>
747
748        <li>
749          <div class="castBlock">
750            <span class="castBlock__role">古手川登志夫:</span>
751            <span class="castBlock__name">川田紳司</span>
752          </div>
753        </li>
754        <li>
755          <div class="castBlock">
756            <span class="castBlock__role">水樹カヤ:</span>
757            <span class="castBlock__name">水樹奈々</span>
758          </div>
759        </li>
760      </ul>
761
762     <ul class="nameList -cast u-mt-40">
763       <li>
764          <div class="castBlock">
765            <span class="castBlock__role">カリーナ:</span>
766            <span class="castBlock__name">M・A・O</span>
767            <span class="castBlock__comment">
768              <button class="comBtn" type="button"
769                data-name='M・A・O'
770                data-role='カリーナ'
771                data-comment='カリーナ役で出演させていただきます、M・A・Oです。<br>常に笑いの絶えない和やかな現場で、本当に楽しい収録でした!<br>カリーナさんは、見た目の印象と内面の振れ幅が強烈なインパクトを放っていて、とても魅力的なキャラクターだと感じました。健気でお淑やかな雰囲気から溢れ出るパッションをしっかり表現できるよう、精一杯演じさせていただきましたので、ぜひそのギャップも楽しみにしていただけると嬉しいです!どうぞ、よろしくお願いいたします!!'>
772                <img src="core_sys/images/main/cont/staffcast/comBt_w.png" alt="comment">
773              </button>
774            </span>
775          </div>
776        </li>
777       <li>
778          <div class="castBlock">
779            <span class="castBlock__role">古手川紗耶華:</span>
780            <span class="castBlock__name">大原さやか</span>
781            <span class="castBlock__comment">
782              <button class="comBtn" type="button"
783                data-name='大原さやか'
784                data-role='古手川紗耶華'
785                data-comment='古手川紗耶華役を務めさせていただきます、大原さやかです。<br>同じ名前なので親近感を抱きつつ、現場に臨みました。<br>3シーズン目ということで、皆さんの空気感が家族のように濃密であたたかく、リラックスした雰囲気の中でやらせていただけたのがとても嬉しかったです。<br>そしてスタジオロビーのテーブルにぎっしりと並べられていたアルコール類にのけぞりました。<br>懐が深い作品なんだなあと思いました笑 青春バンザイ!'>
786                <img src="core_sys/images/main/cont/staffcast/comBt_w.png" alt="comment">
787              </button>
788            </span>
789          </div>
790        </li>
791       <li>
792          <div class="castBlock">
793            <span class="castBlock__role">チーフ:</span>
794            <span class="castBlock__name">瀬戸麻沙美</span>
795            <span class="castBlock__comment">
796              <button class="comBtn" type="button"
797                data-name='瀬戸麻沙美'
798                data-role='チーフ'
799                data-comment='チーフ役の瀬戸麻沙美です!<br>ダイビングが好きなので、『ぐらんぶる』の世界に参加できてとても嬉しかったです。<br>速い掛け合いのテンポ感やボケの応酬、アドリブなど、レギュラーキャストの皆さんのプロフェッショナルを間近で感じました。笑いをこらえるのが大変で、こんなに大笑いしたアフレコは初めてでした…!ぐらんぶるらしいギャグ全開のシーンはもちろん、美しいパラオの海を舞台に恋愛模様が描かれるキュンとする場面もあります。<br>ぜひ放送を楽しみにしていてください!'>
800                <img src="core_sys/images/main/cont/staffcast/comBt_w.png" alt="comment">
801              </button>
802            </span>
803          </div>
804        </li>
805       <li>
806          <div class="castBlock">
807            <span class="castBlock__role">マキ:</span>
808            <span class="castBlock__name">洲崎綾</span>
809            <span class="castBlock__comment">
810              <button class="comBtn" type="button"
811                data-name='洲崎綾'
812                data-role='マキ'
813                data-comment='マキ役の洲崎綾です!<br>ダイビングの免許、持っててよかった〜!!<br>(そこもキャスティングの決め手だったと伺ったので)<br>マキちゃんは、元気で明るくて少し下ネタが好きで(笑)、演じるのが楽しかったです。<br>アフレコ現場は毎回笑いを堪えるのに必死でした・・・!<br>ロビーには沢山お酒の缶が並んでいて、毎回好きなだけ持ち帰って〜と言われ、ありがたくいただいて帰ってました(笑)<br>完成した映像を見るのが、私も楽しみです!<br>ぜひ放送をお楽しみに!!'>
814                <img src="core_sys/images/main/cont/staffcast/comBt_w.png" alt="comment">
815              </button>
816            </span>
817          </div>
818        </li>
819      </ul>
820
821      <p class="castComInfo">
822        <span class="castComInfo__text"></span>Click to Comment
823        <span class="comBtn" style="pointer-events: none;">
824          <img src="core_sys/images/main/cont/staffcast/comBt_w.png" alt="comment">
825        </span>
826      </p>
827    </div>
828  </div>
829</section></div>
830</div>
831<div class="main_sa04">
832<div class="main_sa04_c">
833<div id="introduction2" data-season="2"></div>
834<section id="introduction" class="contBox -white">
835  <div class="contBox__inner">
836    <div class="contBox__head">
837      <h2 class="sectionHead"><img src="core_sys/images/main/cont/head/introduction.png" alt="INTRUDUCTION"></h2>
838    </div>
839    <div class="contBox__body">
840      <div class="seasonNav">
841        <span data-season="3" class="js-season-btn -crt">SEASON3</span>
842        <span data-season="2" class="js-season-btn">SEASON2</span>
843        <a href="https://grandblue-anime.com/01/story/introduction.html" target="_blank" rel="noopener noreferrer">SEASON1</a>
844      </div>
845      <div class="intro js-season" data-season="3">
846        <h3 class="intro__head">今度はパラオで、ぐらんぶる!</h3>
847        <p>北原伊織が伊豆で大学生活を始めて数か月ー</p>
848
849        <p>居候しているダイビングショップ「グランブルー」ではかわいい従妹の古手川千紗と一つ屋根の下。そこに従姉の古手川奈々華、オトナの色気がたまらない浜岡梓、同級生の吉原愛菜も加わって、順風満帆な青春のキャンパスライフを過ごしていた!</p>
850
851        <p>……というのは一面で、大学生活の大半は全裸野郎どもとの狂乱騒ぎ!</p>
852
853        <p>というのも、伊織が入ったダイビングサークル「Peek a Boo(ピーカブー)」は、ダイビングはそこそこに屈強な男達が全裸になって酒を酌み交わすバカ騒ぎを日常としており、伊織はイケメンだが真性オタクの今村耕平と共に、すっかりサークルに染まっていたのだ。</p>
854
855        <p>そんな中、ダイビングショップ“ドルフィン”がパラオに支店を作ったが人手が足りないので手伝いに来てくれないかと奈々華から頼まれる伊織。しかし耕平はアニメがリアルタイムで見られないので海外には行きたくないと言っていた事を思い出し…</p>
856
857        <p>今夏、初の海外パラオでの“ぐらんぶる”ライフが幕を開ける!</p>
858        <div class="intro__link">
859          <a href="#" class="contButton" id="storyLink">Story</a>
860        </div>
861      </div>
862      <div class="intro js-season" data-season="2">
863        <h3 class="intro__head">俺たちの夏は終わらない! </h3>
864
865        <p>北原伊織が伊豆で大学生活を始めて早三ヶ月ー</p>
866
867        <p>居候しているダイビングショップ「グランブルー」ではかわいい従妹の古手川千紗と一つ屋根の下。そこに従姉の古手川奈々華、オトナの色気がたまらない浜岡梓、同級生の吉原愛菜も加わって、順風満帆な青春のキャンパスライフを過ごしていた!</p>
868
869        <p>……というのは一面で、大学生活の大半は全裸野郎どもとの狂乱騒ぎ!</p>
870
871        <p>というのも、伊織が入ったダイビングサークル「Peek a Boo(ピーカブー)」は、ダイビングはそこそこに屈強な男達が全裸になって酒を酌み交わすバカ騒ぎを日常としており、伊織はイケメンだが真性オタクの今村耕平と共に、すっかりサークルに染まっていたのだ。</p>
872
873        <p>そんな中、沖縄でのダイビングライセンス講習を終え、伊豆へと戻ってきた伊織の元に妹・栞からの手紙が届く……</p>
874
875        <p>妹の襲来、青梅女子大の学園祭、肝試しにデートに無人島キャンプ!</p>
876
877        <p>愛すべき全裸野郎どもに囲まれた伊織の大学生活が再び始まる!!</p>
878        <div class="intro__link">
879          <a href="story/01.html" class="contButton">Story</a>
880        </div>
881      </div>
882    </div>
883  </div>
884</section>
885<script>
886document.addEventListener('DOMContentLoaded', function(){
887  const storyLink = document.querySelector('#storyLink')
888  storyLink.href = document.querySelector('.globalNavi .gh_lino21 a').href
889})
890</script>
890</div>
891</div>
892<div class="main_sa05">
893<div class="main_sa05_c">
894<section id="character" class="contBox">
895  <div class="contBox__bg">
896    <canvas id="bgBubble"></canvas>
897  </div>
898  <div class="contBox__inner">
899    <div class="contBox__head">
900      <h2 class="sectionHead"><img src="core_sys/images/main/cont/head/character.png" alt="CHARACTER"></h2>
901    </div>
902    <div class="contBox__body">
903      <div class="charaArea__body">
904        <transition name="fade" mode="out-in">
905          <component :is="crtViewComponent" :chara="crtViewChara"></component>
906        </transition>
907      </div>
908      <div class="charaArea__navi">
909        <nav class="charaNavi">
910          <span v-for="chara in charaData"
911            :key="chara.name"
912            @mouseover="onHover(chara)" 
913            @mouseleave="onLeave"
914            @click="crtView = chara.name"
915            :class="{'nav-item': true, '-crt': chara.name === crtView}" 
916            >
917            <span class="nav-item__ph">
918              <span>
919                <img :src="charaImageSrc(chara)" :alt="chara.nameChara">
920              </span>
921            </span>
922            <span class="nav-item__cap">
923              {{chara.nameChara}}
924            </span>
925          </span>
926        </nav>
927      </div>
928    </div>
929  </div>
930</section>
931<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
vendor: 2 bytes, line 931
931
932<script>
933const charaData = [
934  {
935    faceImg: true,
936    name: 'iori',
937    nameChara: '北原伊織',
938    nameCharaEn: 'Iori Kitahara',
939    nameCv: '内田雄馬',
940    info: `伊豆大学一年生。入学を機に居候することになった古手川家を訪れた際、おじの経営するダイビングショップ「Grand Blue(グラン ブルー)」で「Peek a Boo(ピーカブー)」メンバーに遭遇。サークルへ勧誘を受ける。水が怖く、泳げない。`,
941  },{
942    faceImg: true,
943    name: 'kohei',
944    nameChara: '今村耕平',
945    nameCharaEn: 'Kohei Imamura',
946    nameCv: '木村良平',
947    info: `伊豆大学一年生。見た目は金髪のイケメンだが中身は真性のオタク。半ば伊織に騙されて「Peek a Boo(ピーカブー)」に加入することに。`,
948  },{
949    faceImg: true,
950    name: 'shinji',
951    nameChara: '時田信治',
952    nameCharaEn: 'Shinji Tokita',
953    nameCv: '安元洋貴',
954    info: `伊豆大学三年生。ダイビングサークル「Peek a Boo(ピーカブー)」の会長。たまたま出会った新一年生の伊織をサークルに誘う。`,
955  },{
956    faceImg: true,
957    name: 'ryujiro',
958    nameChara: '寿竜次郎',
959    nameCharaEn: 'Ryujiro Kotobuki',
960    nameCv: '小西克幸 ',
961    info: `伊豆大学三年生で「Peek a Boo(ピーカブー)」のメンバー。ダイビングのことに関しては非常に真面目で博識。泳げない伊織がダイビングに興味を持つきっかけを作った。`,
962  },{
963    faceImg: true,
964    name: 'chisa',
965    nameChara: '古手川千紗',
966    nameCharaEn: 'Chisa Kotegawa',
967    nameCv: '安済知佳',
968    info: `伊豆大学一年生。伊織のイトコ。実家はダイビングショップで、海をこよなく愛する。将来の夢はダイビングインストラクター。`,
969  },{
970    faceImg: true,
971    name: 'nanaka',
972    nameChara: '古手川奈々華',
973    nameCharaEn: 'Nanaka Kotegawa',
974    nameCv: '内田真礼',
975    info: `ダイビングショップ「Grand Blue(グラン ブルー)」の看板娘兼インストラクター。美人でスタイルが良く性格も優しいが、妹の千紗を溺愛しすぎている。`,
976  },{
977    faceImg: true,
978    name: 'azusa',
979    nameChara: '浜岡梓',
980    nameCharaEn: 'Azusa Hamaoka',
981    nameCv: '行成とあ',
982    info: `青海女子大学三年生。他校ながら「Peek a Boo(ピーカブー)」に加入している。伊織と耕平の関係を勘違いしており、ことあるごとに伊織を応援しようとする。`,
983  },{
984    faceImg: true,
985    name: 'aina',
986    nameChara: '吉原愛菜',
987    nameCharaEn: 'Aina Yoshiwara',
988    nameCv: '阿澄佳奈',
989    info: `青海女子大学一年生。華やかな大学デビューのため、テニスサークル「ティンカーベル」に入るも、空回りして失敗。そんな折に伊織と耕平に出会い…`,
990   },{
991    faceImg: true,
992    name: 'sakurako',
993    nameChara: '毒島桜子',
994    nameCharaEn: 'Sakurako Busujima',
995    nameCv: '山根綺',
996    info: `青海女子大の一年生。仲の良いユキと菜摘と行動していることが多い。ある一件で伊織とは因縁が生まれてしまう。プライドが高いが、実は努力家。 `,
997  },{
998    faceImg: true,
999    name: 'hajime',
1000    nameChara: '野島元',
1001    nameCharaEn: 'Hajime Nojima',
1002    nameCv: '江口拓也',
1003    info: `伊豆大学一年生。黒髪ロン毛に眼鏡というインテリ風ナルシスト。シークレットシューズを履いて身長を嵩増ししている。`,
1004  },{
1005    faceImg: true,
1006    name: 'shinitiro',
1007    nameChara: '山本真一郎',
1008    nameCharaEn: 'Shinitiro Yamamoto',
1009    nameCv: '榎木淳弥',
1010    info: `伊豆大学一年生。童貞。彼女作りに対して並々ならぬハングリー精神を見せる。以前、愛菜たちと行った合コンがトラウマになっている。`,
1011  },{
1012    faceImg: true,
1013    name: 'yu',
1014    nameChara: '御手洗優',
1015    nameCharaEn: 'Yu Mitarai',
1016    nameCv: '花江夏樹',
1017    info: `伊豆大学一年生。イケメンでチャラい言動が目立つが、幼馴染みã
1017®å½¼å¥³ãŒãŠã‚Šã€ã„つも浮気を疑われている。トークは巧みだが詰めが甘い。`,
1018  },{
1019    faceImg: true,
1020    name: 'kenta',
1021    nameChara: '藤原健太',
1022    nameCharaEn: 'Kenta Hujiwara',
1023    nameCv: 'ロバート・ウォーターマン',
1024    info: `伊豆大学一年生。眉毛を全剃りしており、見た目は厳ついのだが影が薄く、存在を忘れられがち。`,
1025  },{
1026    faceImg: true,
1027    name: 'toshio',
1028    nameChara: '古手川登志夫',
1029    nameCharaEn: 'Toshio Kotegawa',
1030    nameCv: '川田紳司',
1031    info: `ダイビングショップ「グランブルー」の店長。伊織のおじで、千紗と奈々華の父。「PaB」のメンバーがどんなにバカ騒ぎをしていても平然としている。`,
1032    },{
1033    faceImg: true,
1034    name: 'shiori',
1035    nameChara: '北原栞',
1036    nameCharaEn: 'Shiori Kitahara',
1037    nameCv: '諸星すみれ',
1038    info: `伊織の妹。淑やかで大人しい、和装が似合う中学三年生。伊織のことを「兄様」と慕い、大学生活を心配しているようだが、実際には裏の目的があるようで… `,
1039    },{
1040    faceImg: true,
1041    name: 'naomi',
1042    nameChara: '乙矢尚海',
1043    nameCharaEn: 'Naomi Otoya',
1044    nameCv: '青山吉能',
1045    info: `伊織のバイト先でキッチン担当をしている高校生。眩しいほどの美少年で、性格も穏やか。高校ではダイビング部の部長をしている。どうやら伊織に憧れを抱いているようで…?`,
1046    },{
1047    faceImg: true,
1048    name: 'karina',
1049    nameChara: 'カリーナ',
1050    nameCharaEn: 'Karina',
1051    nameCv: 'M・A・O',
1052    info: `日本の文化に興味津々なドイツ人。屈強な二人(クーゲルシュライバーとシュトロハイム)とは同好会の友達。`,
1053    },{
1054    faceImg: true,
1055    name: 'maki',
1056    nameChara: 'マキ',
1057    nameCharaEn: 'Maki',
1058    nameCv: '洲崎綾',
1059    info: `「ドルフィン」パラオ店の新米イントラ。まだまだ仕事に慣れていないこともあり、Pabメンバーの奇行に笑わされている。`,
1060    },{
1061    faceImg: true,
1062    name: 'chief',
1063    nameChara: 'チーフ',
1064    nameCharaEn: 'Chief',
1065    nameCv: '瀬戸麻沙美',
1066    info: `「ドルフィン」パラオ店のチーフ。落ち着きのある女性で、お客様にダイビングの楽しい時間を提供することを第一に考えている。`,
1067    },{
1068    faceImg: true,
1069    name: 'sayaka',
1070    nameChara: '古手川紗耶華',
1071    nameCharaEn: 'Sayaka Kotegawa',
1072    nameCv: '大原さやか',
1073    info: `千紗の母。「ドルフィン」パラオ店のオーナー。ドライな性格かつぶっきらぼうな物言いをする。千紗に対しては一際厳しい。`,
1074    }
1075];
1076const components = charaData.reduce((result,chara) => {
1077  result[chara.name] = {
1078    props: ['chara'],
1079    template: `
1080      <div :class="'chara -'+chara.name">
1081        <div class="chara__stand">
1082          <img :src="'core_sys/images/main/cont/chara/'+chara.name+'_stand.png'" :alt="chara.nameChara">
1083        </div>
1084        <div v-if="chara.faceImg" class="chara__face">
1085          <picture>
1086            <source :srcset="'core_sys/images/main/cont/chara/'+chara.name+'_face_sp.png'" media="(max-width: 600px)">
1087            <img :src="'core_sys/images/main/cont/chara/'+chara.name+'_face.png'" :alt="chara.nameChara">
1088          </picture>
1089        </div>
1090        <div class="chara__name">
1091          <div class="charaName">
1092            <div class="charaName__name">
1093              {{chara.nameChara}}
1094            </div>
1095            <div v-if="chara.nameCharaEn" class="charaName__name -en">
1096              {{chara.nameCharaEn}}
1097            </div>
1098            <div class="charaName__cv">
1099              {{ chara.nameCv }}
1100            </div>
1101          </div>
1102        </div>
1103        <div class="chara__info" v-html="chara.info"></div>
1104      </div>
1105    `
1106  };
1107  return result;
1108}, {});
1109new Vue({
1110  el: '#character',
1111  data: {
1112    charaData: charaData,
1113    crtView: 'iori',
1114    hoverChara: null,
1115  },
1116  methods: {
1117    scrollToCharaTop() {
1118      const character = document.getElementById('character');
1119      if (character) {
1120        character.scrollIntoView({ behavior: 'smooth' });
1121      }
1122    },
1123    onHover(chara) {
1124      this.hoverChara = chara.name;
1125    },
1126    onLeave() {
1127      this.hoverChara = null;
1128    },
1129    charaImageSrc(chara) {
1130      if(this.crtView === chara.name || this.hoverChara === chara.name){
1131        return 'core_sys/images/main/cont/chara/' + chara.name + '_icon-crt.png'
1132      }else{
1133        return 'core_sys/images/main/cont/chara/' + chara.name + '_icon.png';
1134      }
1135    }
1136  },
1137  computed: {
1138    crtViewComponent() {
1139      return components[this.crtView];
1140    },
1141    crtViewChara() {
1142      return this.charaData.find(c => c.name === this.crtView);
1143    },
1144  },
1145  watch: {
1146    crtViewComponent() {
1147      this.scrollToCharaTop();
1148    }
1149  }
1150})
1151
1152</script>
vendor: 2 bytes, line 1152
1152
1153<script src="core_sys/images/others/js/createjs.min.js"></script>
vendor: 2 bytes, line 1153
1153
1154<script>
1155const particleImgList = [
1156  {
1157    name: 'bubble',
1158    img: 'core_sys/images/main/cont/chara/bubble.png'
1159  }
1160];
1161</script>
vendor: 2 bytes, line 1161
1161
1162<script src="core_sys/images/others/js/particlejs_images.js"></script>
vendor: 2 bytes, line 1162
1162
1163<script>
1164let imgList = [];
1165for(let i=0;i<particleImgList.length;i++){
1166  imgList.push(particleImgList[i].name);
1167}
1168const canvasInfo = function(){};
1169setCanvasInfoSize(document.getElementById("bgBubble"))
1170function setCanvasInfoSize(canvas){
1171  let x = 1;
1172  canvasInfo.prototype.width = canvas.clientWidth;
1173  canvasInfo.prototype.height = canvas.clientHeight;
1174  canvasInfo.prototype.iconScale = 0.1;
1175  canvasInfo.prototype.iconScaleEnd = 0.2;
1176  canvasInfo.prototype.center = canvasInfo.prototype.width / 2;
1177}
1178window.addEventListener("load", function () {
1179  var container = document.body,
1180    canvas = document.getElementById("bgBubble"),
1181    queue = null,
1182    wait = 300;
1183
1184  // ページ読込時にCanvasサイズ設定 
1185  setCanvasSize();
1186
1187  // リサイズ時にCanvasサイズを再設定 
1188  window.addEventListener("resize", function () {
1189    clearTimeout(queue);
1190    queue = setTimeout(function () {
1191      setCanvasSize();
1192    }, wait);
1193  }, false);
1194
1195  // Canvasサイズをコンテナの100%に 
1196  function setCanvasSize() {
1197    setCanvasInfoSize(canvas);
1198    canvas.width = canvasInfo.prototype.width;
1199    canvas.height = canvasInfo.prototype.height;
1200  }
1201}, false);
1202
1203
1204// Stageオブジェクトを作成します。表示リストのルートになります。
1205stage = new createjs.Stage("bgBubble");
1206
1207// パーティクルシステム作成します。
1208particleSystem = new particlejs.ParticleSystem();
1209
1210// パーティクルシステムの描画コンテナーを表示リストに登録します。
1211stage.addChild(particleSystem.container);
1212
1213const particleSetting = {
1214    "bgColor": "",
1215    "width": canvasInfo.prototype.width,
1216    "height": canvasInfo.prototype.height,
1217    "emitFrequency": 10,
1218    "startX": canvasInfo.prototype.center,
1219    "startXVariance": canvasInfo.prototype.width,
1220    "startY": canvasInfo.prototype.height,
1221    "startYVariance": 0,
1222    "initialDirection": 90,
1223    "initialDirectionVariance": 0,
1224    "initialSpeed": 0,
1225    "initialSpeedVariance": 0,
1226    "friction": 0.1,
1227    "accelerationSpeed": 0.2,
1228    "accelerationDirection": 270,
1229    "startScale": canvasInfo.prototype.iconScale,
1230    "startScaleVariance": 0.2,
1231    "finishScale": canvasInfo.prototype.iconScaleEnd,
1232    "finishScaleVariance": 0.2,
1233    "lifeSpan": canvasInfo.prototype.width/12*10,
1234    "lifeSpanVariance": 0,
1235    "startAlpha": "1",
1236    "startAlphaVariance": "0",
1237    "finishAlpha": "1",
1238    "finishAlphaVariance": "0",
1239    "shapeIdList": imgList,
1240    "blendMode": false,
1241    "alphaCurveType": "0",
1242    "VERSION": "1.0.0"
1243};
1244
1245// Particle Developから保存したパラメーターを反映します。
1246particleSystem.importFromJson(
1247  particleSetting
1248);
1249
1250// フレームレートの設定
1251createjs.Ticker.framerate = 60;
1252// requestAnimationFrameに従った呼び出し
1253createjs.Ticker.timingMode = createjs.Ticker.RAF;
1254// 定期的に呼ばれる関数を登録
1255createjs.Ticker.addEventListener("tick", handleTick);
1256
1257function handleTick() {
1258
1259  // パーティクルの発生・更新
1260  particleSystem.update();
1261
1262  // 描画を更新する
1263  stage.update();
1264}
1265
1266window.addEventListener("load resize", function () {
1267  // パーティクルの発生・更新
1268  particleSystem.update();
1269
1270  // 描画を更新する
1271  stage.update();
1272});
1273
1274</script>
1274
1275</div>
1276</div>
1277<div class="main_sa06">
1278<div class="main_sa06_c">
1279<section id="books" class="contBox -white">
1280  <div class="contBox__inner">
1281    <div class="contBox__head">
1282      <h2 class="sectionHead"><img src="core_sys/images/main/cont/head/books.png" alt="BOOKS"></h2>
1283    </div>
1284    <div class="contBox__body">
1285      <ul class="booksList">
1286        <li><a href="https://www.kodansha.co.jp/comic/products/0000425186" target="_blank"><img src="core_sys/images/main/cont/books/26.jpg" alt="26å·»"></a></li>
1287        <li><a href="https://www.kodansha.co.jp/comic/products/0000418495" target="_blank"><img src="core_sys/images/main/cont/books/25.jpg" alt="25å·»"></a></li>
1288        <li><a href="https://www.kodansha.co.jp/comic/products/0000409748" target="_blank"><img src="core_sys/images/main/cont/books/24.jpg" alt="24å·»"></a></li>
1289        <li><a href="https://kc.kodansha.co.jp/product?item=0000398618" target="_blank"><img src="core_sys/images/main/cont/books/23.jpg" alt="23å·»"></a></li>
1290        <li><a href="https://kc.kodansha.co.jp/product?item=0000386957" target="_blank"><img src="core_sys/images/main/cont/books/22.jpg" alt="22å·»"></a></li>
1291        <li><a href="https://kc.kodansha.co.jp/product?item=0000380795" target="_blank"><img src="core_sys/images/main/cont/books/21.jpg" alt=""></a></li>
1292        <li><a href="https://kc.kodansha.co.jp/product?item=0000375446" target="_blank"><img src="core_sys/images/main/cont/books/20.jpg" alt=""></a></li>
1293        <li><a href="https://kc.kodansha.co.jp/product?item=0000368184" target="_blank"><img src="core_sys/images/main/cont/books/19.jpg" alt=""></a></li>
1294        <li><a href="https://kc.kodansha.co.jp/product?item=0000362349" target="_blank"><img src="core_sys/images/main/cont/books/18.jpg" alt=""></a></li>
1295        <li><a href="https://kc.kodansha.co.jp/product?item=0000354126" target="_blank"><img src="core_sys/images/main/cont/books/17.jpg" alt=""></a></li>
1296        <li><a href="https://kc.kodansha.co.jp/product?item=0000345988" target="_blank"><img src="core_sys/images/main/cont/books/16.jpg" alt=""></a></li>
1297        <li><a href="https://kc.kodansha.co.jp/product?item=0000341485" target="_blank"><img src="core_sys/images/main/cont/books/15.jpg" alt=""></a></li>
1298        <li><a href="https://kc.kodansha.co.jp/product?item=0000325805" target="_blank"><img src="core_sys/images/main/cont/books/14.jpg" alt=""></a></li>
1299        <li><a href="http://kc.kodansha.co.jp/product?item=0000322986" target="_blank"><img src="core_sys/images/main/cont/books/13.jpg" alt=""></a></li>
1300        <li><a href="http://kc.kodansha.co.jp/product?item=0000314563" target="_blank"><img src="core_sys/images/main/cont/books/12.jpg" alt=""></a></li>
1301        <li><a href="http://kc.kodansha.co.jp/product?item=0000311620" target="_blank"><img src="core_sys/images/main/cont/books/11.jpg" alt=""></a></li>
1302        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784065110966" target="_blank"><img src="core_sys/images/main/cont/books/10.jpg" alt=""></a></li>
1303        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063882902" target="_blank"><img src="core_sys/images/main/cont/books/09.jpg" alt=""></a></li>
1304        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063882490" target="_blank"><img src="core_sys/images/main/cont/books/08.jpg" alt=""></a></li>
1305        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063882209" target="_blank"><img src="core_sys/images/main/cont/books/07.jpg" alt=""></a></li>
1306        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063881646" target="_blank"><img src="core_sys/images/main/cont/books/06.jpg" alt=""></a></li>
1307        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063881158" target="_blank"><img src="core_sys/images/main/cont/books/05.jpg" alt=""></a></li>
1308        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063880816" target="_blank"><img src="core_sys/images/main/cont/books/04.jpg" alt=""></a></li>
1309        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063880533" target="_blank"><img src="core_sys/images/main/cont/books/03.jpg" alt=""></a></li>
1310        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063880182" target="_blank"><img src="core_sys/images/main/cont/books/02.jpg" alt=""></a></li>
1311        <li><a href="http://kc.kodansha.co.jp/product?isbn=9784063879902" target="_blank"><img src="core_sys/images/main/cont/books/01.jpg" alt=""></a></li>
1312      </ul>
1313    </div>
1314  </div>
1315</section></div>
1316</div>
1317</div>
1318</div>
1319<!-- <main>end -->
1320
1321</div>
1322</div>
1323<!-- <contents_main>end -->
1324
1325</div>
1326</div>
1327<!-- <contents>end -->
1328
1329<!-- <ext_area_02>start -->
1330<div id="ext_area_02">
1331<div id="ext_area_02_inner">
1332<div class="ext_area_02_sa01">
1333<div class="ext_area_02_sa01_c">
1334<div id="commentModal" class="commentModal -white" style="display: none;">
1335  <div class="commentModal__body">
1336    <div class="commentModal__closeBtn">
1337      <button type="button" class="modalCloseBtn" data-target="commentModal"></button>
1338    </div>
1339    <div class="commentBox">
1340      <div class="commentBox__head">
1341        <h2 class="sectionHead"><img src="core_sys/images/main/cont/staffcast/comment.png" alt="COMMENT"></h2>
1342      </div>
1343      <div class="commentBox__body">
1344        <div class="commentBody"></div>
1345      </div>
1346    </div>
1347  </div>
1348  <div class="commentModal__overlay closeOverlay" data-target="commentModal"></div>
1349</div>
1350<script>
1351$(function(){
1352//comment
1353  const comModalId = 'commentModal',
1354        comModal = $('#'+comModalId),
1355        comBoxBody = comModal.find('.commentBox__body');
1356  const comModalHtml = comModal.html();
1357  $('.comBtn').on('click',function(){
1358    comBoxBody.empty();
1359    const data = [];
1360    data["role"] = $(this).data("role");
1361    data["name"] = $(this).data("name");
1362    data["img"] = $(this).data("img");
1363    data["illust"] = $(this).data("illust");
1364    data["comment"] = $(this).data("comment");
1365
1366    commentTag(data)
1367
1368    if($(this).data("name-2") != undefined){
1369      const data2 = [];
1370      data2["role"] = $(this).data("role-2");
1371      data2["name"] = $(this).data("name-2");
1372      data2["img"] = $(this).data("img-2");
1373      data2["illust"] = $(this).data("illust-2");
1374      data2["comment"] = $(this).data("comment-2");
1375      commentTag(data2)
1376    }
1377    modalOpen(comModalId);
1378  });
1379  $('.modalCloseBtn,.closeOverlay').on('click',function(){
1380    const target = $(this).data('target');
1381    modalClose(target);
1382  })
1383  function commentTag(data){
1384    const comBody = $('<div class="commentBody">');
1385    const comBodyBox = $('<div class="commentBodyBox">');
1386    const roleName = data.role,
1387          nameName = data.name,
1388          commentImg = data.img,
1389          commentIllust = data.illust,
1390          commentImgDir = 'core_sys/images/main/cont/staffcast/',
1391          commentText = data.comment;
1392    if(commentImg != "" && commentImg != undefined){
1393      const comBodyImg = $('<div class="commentBody__img">')
1394      comBodyImg.append($('<img>').attr('src', commentImgDir+commentImg));
1395      comBody.append(comBodyImg);
1396      comBody.addClass('-hasImg')
1397    }
1398
1399    const comBodyName = $('<div class="commentBody__name">'),
1400          nameTag = $('<div class="commentName">'),
1401          nameNameTag = $('<p class="commentName__name">').html(nameName),
1402          nameRoleTag = $('<p class="commentName__role">').html(roleName);
1403    nameTag.append(nameRoleTag);
1404    nameTag.append(nameNameTag);
1405    comBodyName.append(nameTag);
1406    comBody.append(comBodyName)
1407    const commentTag = $('<div class="commentText">');
1408    if(commentIllust != "" && commentIllust != undefined){
1409      const comBodyImg = $('<div class="commentBody__illust">')
1410      comBodyImg.append($('<img>').attr('src', commentImgDir+commentIllust));
1411      comBody.append(comBodyImg);
1412    }
1413
1414    const comBodyText = $('<div class="commentBody__text">').html(commentText);
1415    comBody.append(comBodyText);
1416    comBodyBox.append(comBody)
1417    comBoxBody.append(comBodyBox);
1418  }
1419  function modalOpen(target){
1420    $("body").css('overflow','hidden');
1421    $('#'+target).fadeIn(500);
1422    setTimeout(function(){
1423      $(".commentModal").scrollTop(0);      
1424    },10)
1425  }
1426  function modalClose(target){
1427    $("body").css('overflow','');
1428    $('#'+target).fadeOut(500);
1429  }
1430  $('.comLink').on('click', function(){
1431    $('#'+$(this).data('comment')).trigger('click')
1432    return false;
1433  })
1434  commentHashCheck()
1435  function commentHashCheck(){
1436    const hash = location.hash;
1437    $('.comBtn').each(function(){
1438      if($(this).attr('id') && hash == '#'+$(this).attr('id')){
1439        $(hash).trigger('click')
1440        return false;
1441      }
1442    });
1443  }
1444});
1445</script>
1445
1446</div>
1447</div>
1448</div>
1449</div>
1450<!-- <ext_area_02>end -->
1451
1452<!-- <footer>start -->
1453<div id="footer">
1454<div id="footer_inner">
1455<div class="footer_sa02">
1456<div class="footer_sa02_c">
1457<!-- バナーユニット001ここから -->
1458	<div id="bnu_001_t">
1459	<p><a href="https://x.com/sakazukiwohosu" target="_blank"><img src="core_sys/images/banner/00000007.png?1790865871" alt="" title="" /></a></p>
1460	<p><a href="https://afternoon.kodansha.co.jp/goodafternoon/" target="_blank"><img src="core_sys/images/banner/00000001.png?1790865871" alt="" title="" /></a></p>
1461	<p><a href="https://officeendless.com/sp/grandblue_stage/" target="_blank"><img src="core_sys/images/banner/00000008.jpg?1790865871" alt="" title="" /></a></p>
1462	<p><a href="https://www.padi.co.jp/" target="_blank"><img src="core_sys/images/banner/00000005.png?1790865871" alt="" title="" /></a></p>
1463	<p><a href="https://www.tusa.net/" target="_blank"><img src="core_sys/images/banner/00000006.png?1790865871" alt="" title="" /></a></p>
1464	<p><a href="https://www.mic21.com/" target="_blank"><img src="core_sys/images/banner/00000003.png?1790865871" alt="" title="" /></a></p>
1465	<p><a href="https://marinediving.com/" target="_blank"><img src="core_sys/images/banner/00000002.png?1790865871" alt="" title="" /></a></p>
1466	<p><a href="https://divelife.fun/" target="_blank"><img src="core_sys/images/banner/00000009.png?1790865871" alt="DiveLife" title="DiveLife" /></a></p>
1467	</div>
1468<!-- バナーユニット001ここまで -->
1469
1470<p class="copyright"><small>&copy;井上堅二・吉岡公威・講談社/ぐらんぶる3製作委員会</small></p></div>
1471</div>
1472<div class="footer_sa03">
1473<div class="footer_sa03_l">
1474<script>
1475
1476MAVJS.addUserAgent();
1477
1478$(function(){
1479
1480  // 相対リンクのindex.html削除
1481  MAVJS.removeIndexHtml();
1482
1483  // rel="noopener noreferrer"追加
1484  MAVJS.addRelNoopener();
1485
1486  // カスタムマーカーリスト
1487  MAVJS.customMarkerList();
1488
1489  // スムーススクロール(offsetY, time, easing);
1490  MAVJS.smoothScroll( 0, 1000, "easeInOutQuint" );
1491
1492  // NEWマーク移動(classを付与したいtrまたは、.nwu_boxを指定)
1493  MAVJS.addNewMark("#news_block #list_01 tr, #nwu_001_t tr");
1494
1495  // リストのリンク全体化(リンクにしたいtrまたは、.nwu_boxを指定)
1496//  MAVJS.anchorParentClickable(".c-no9 #list_06 .nwu_box");  
1497
1498  /* ==========================================
1499  ソーシャルシェア設定
1500  #@なし、カンマ区切り、なしの場合空白 ""
1501  ========================================== */
1502  MAVJS.socialShare(
1503    // ツイートハッシュタグ
1504    "",
1505
1506    // ツイートおすすめユーザー  
1507    ""
1508  );
1509
1510  /* ==========================================
1511  モーダル汎用class
1512  ========================================== */
1513  $('.js-modalImgLink').magnificPopup({
1514    disableOn: 0,
1515    mainClass: 'mfp-fade',
1516    removalDelay: 500,
1517    type: 'image',
1518    fixedContentPos: false
1519  });
1520
1521  $('.js-modalMovieLink').magnificPopup({
1522    iframe: {
1523      markup: '<div class="mfp-iframe-scaler">'+
1524                   '<div class="mfp-close"></div>'+
1525                   '<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay *; fullscreen *"></iframe>'+
1526                   '</div>',
1527      patterns: {
1528        youtube: {
1529          src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
1530        }
1531      }
1532    },
1533    disableOn: 0,
1534    type: "iframe",
1535    mainClass: 'mfp-fade',
1536    removalDelay: 500,
1537    preloader: false,
1538    fixedContentPos: false
1539  });
1540  seasonSelect()
1541});
1542
1543</script>
1543
1544<div class="bgArea">
1545  <div class="bgArea__sky">
1546    <img src="core_sys/images/main/common/sky.jpg" alt="">
1547  </div>
1548  <div class="bgArea__beer">
1549    <picture>
1550      <source srcset="core_sys/images/main/common/beer.webp" type="image/webp">
1551      <img src="core_sys/images/main/common/beer.jpg" alt="">
1552    </picture>
1553  </div>
1554</div>
1555<script>
1556$(window).on('load resize', function(){
1557  const windowH = $(window).height();
1558  const body = $('body'),bodyH = Math.floor(body.height());
1559  const bgAreaSky = $('.bgArea__sky');
1560  const bgAreaBeer = $('.bgArea__beer');
1561  bgAreaSky.css('height',"")
1562  bgAreaBeer.css('height',"")
1563  if(bgAreaSky.height() < windowH){
1564    bgAreaSky.css('height',windowH)
1565    bgAreaBeer.css('height',windowH)
1566  }
1567
1568  const bgAreaSkyH = Math.floor(bgAreaSky.height()),
1569        bgAreaSkyScl = bgAreaSkyH - windowH;
1570  const bgAreaBeerH = Math.floor(bgAreaSky.height()),
1571        bgAreaBeerScl = bgAreaBeerH - windowH;
1572
1573  bgScroll(windowH,bodyH,bgAreaBeer,bgAreaBeerScl);
1574  $(window).on('scroll', function(){
1575    bgScroll(windowH,bodyH,bgAreaBeer,bgAreaBeerScl);
1576  })
1577})
1578function bgScroll(windowH,bodyH,bgAreaBeer,bgAreaBeerScl){
1579  const scrollTop = $(window).scrollTop(),
1580        scrollMax = Math.floor(bodyH - windowH);
1581  if(scrollTop > scrollMax * 0.3){
1582    const bgAreaBeerTrans = ((windowH + bgAreaBeerScl) * (scrollTop - ( scrollMax * 0.3 ))) / ( scrollMax * 0.7 );
1583    bgAreaBeer.css('transform', "translateY("+(windowH - bgAreaBeerTrans)+"px)")
1584  }else{
1585    bgAreaBeer.css('transform', "translateY("+windowH+"px)")
1586  }
1587}
1588function seasonSelect(){
1589  const seasonBtns = document.querySelectorAll('.js-season-btn');
1590  if(seasonBtns.length == 0) {
1591    return
1592  }
1593
1594  const seasonBtnCrt = document.querySelector('.js-season-btn.-crt');
1595  seasonSet(seasonBtnCrt.dataset.season)
1596
1597  for(let i = 0; i < seasonBtns.length; i++) {
1598    seasonBtns[i].addEventListener('click', clickSeasonBtn)
1599  }
1600
1601  urlHashCheck();
1602
1603  function clickSeasonBtn(e){
1604    const clickBtn = e.currentTarget;
1605    const selectSeasonNum = clickBtn.dataset.season
1606    seasonSet(selectSeasonNum)
1607    for(let i = 0; i < seasonBtns.length; i++) {
1608      if(seasonBtns[i].dataset.season == selectSeasonNum){
1609        seasonBtns[i].classList.add('-crt')
1610      } else {
1611        seasonBtns[i].classList.remove('-crt')
1612      }
1613    }
1614  }
1615
1616  function seasonSet(season){
1617    document.body.dataset.serectseason = season;
1618  }
1619
1620  function urlHashCheck(){
1621    const urlHash = location.hash;
1622    if(urlHash) {
1623      const urlHashTarget = document.querySelector(urlHash);
1624      if(urlHashTarget.dataset.season == undefined){ return }
1625      const targetSeasonBtn = document.querySelector('.js-season-btn[data-season="'+urlHashTarget.dataset.season+'"]');
1626      if(targetSeasonBtn == null){ return }
1627      targetSeasonBtn.click();
1628    }
1629  }
1630
1631
1632}
1633</script>
1633
1634</div>
1635<div class="footer_sa03_r">
1636<div id="js-autoModal"></div>
1637<script>
1638
1639/* ==========================================
1640*
1641*  Youtube ID
1642*
1643========================================== */
1644
1645const modalOption = {
1646
1647  // モーダル YouTube IDの指定
1648  modalYoutubeID: "KJw6ZZaMOWA",
1649
1650  // 背景動画 YouTube IDの指定(空の場合モーダルと同じID)
1651  bgYoutubeID: "",
1652
1653  // ページ読み込み時、自動でモーダルを表示するか    true or false
1654  autoPopup: true,
1655
1656  // 自動モーダルをYouTubeにするか画像にするか    "youtube" or "img"
1657  type: "youtube",  
1658
1659  // 自動モーダル画像
1660  imgSrc: "core_sys/images/sys/dammy750.png",
1661
1662  // 自動モーダルリンク
1663  imgLink: false,
1664  imgLinkUrl: "index.html"
1665
1666};
1667
1668/* ==========================================
1669*
1670*  埋め込み
1671*
1672========================================== */
1673var youtubeTag = document.createElement('script');
1674youtubeTag.src = "//www.youtube.com/iframe_api";
1675
1676var firstScriptTag = document.getElementsByTagName('script')[0];
1677firstScriptTag.parentNode.insertBefore(youtubeTag , firstScriptTag);
1678
1679var youtubePlayer;
1680
1681
1682if( modalOption["bgYoutubeID"] === "" ) {
1683  modalOption["bgYoutubeID"] = modalOption["modalYoutubeID"];
1684}
1685
1686function onYouTubeIframeAPIReady() {
1687  youtubePlayer = new YT.Player('js-replaceYoutube', {
1688    height: 390,
1689    width: 640,
1690    videoId: modalOption["bgYoutubeID"],
1691    playerVars: {
1692//      playlist: modalOption["youtubeID"],
1693      autoplay: 1,
1694      controls: 0,
1695      fs: 0,
1696      loop: 1,
1697      modestbranding: 1,
1698      rel: 0,
1699      showinfo: 0,
1700      html5: 1
1701    },
1702    events: {
1703      'onReady': onPlayerReady,
1704      'onStateChange': onPlayerStateChange
1705    }
1706  });
1707}
1708
1709function onPlayerReady(event) {
1710  event.target.setVolume(0);
1711  event.target.mute();
1712  event.target.playVideo();
1713}
1714
1715function onPlayerStateChange(event) {
1716  if (event.data == YT.PlayerState.ENDED) {
1717    event.target.seekTo(0,true);
1718    event.target.playVideo();
1719  }
1720}
1721
1722$(function() {
1723/* ==========================================
1724*
1725*  モーダル
1726*
1727========================================== */
1728  const mfpIframeSrc = 'https://www.youtube.com/watch?v=' + modalOption["modalYoutubeID"];
1729
1730  function mfpSetting(element,items,type,callbackOpen,callbackClose) {
1731    $(element).magnificPopup({
1732      items: {
1733        src: items
1734      },
1735      iframe: {
1736        markup: '<div class="mfp-iframe-scaler">'+
1737                     '<div class="mfp-close"></div>'+
1738                     '<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay *; fullscreen *"></iframe>'+
1739                     '</div>',
1740        patterns: {
1741          youtube: {
1742            src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
1743          }
1744        }
1745      },
1746      disableOn: 0,
1747      type: type,
1748      mainClass: 'mfp-fade',
1749      removalDelay: 500,
1750      preloader: false,
1751//      fixedContentPos: false,
1752      callbacks: {
1753        open: function() {
1754          if(callbackOpen){
1755            callbackOpen();
1756          }
1757        },
1758         beforeClose: function() {
1759          if(callbackClose){
1760            callbackClose();
1761          }
1762        }
1763      }
1764    });
1765  }
1766
1767  // ロード時自動モーダル = 画像または動画
1768  if( modalOption["autoPopup"] ) {
1769    if( modalOption["type"] === "youtube" ) {
1770      mfpSetting('#js-autoModal', mfpIframeSrc, 'iframe', "", showCont);
1771    } else if ( modalOption["type"] === "img" ){
1772      mfpSetting('#js-autoModal', modalOption["imgSrc"], 'image', "", showCont);
1773        if(modalOption['imgLink']){
1774          $(document).on('click','.mfp-img',function(){
1775            window.location.href = modalOption['imgLinkUrl'];
1776          })
1777        }
1778    }
1779  }
1780  
1781  // クリックでモーダル = 動画
1782  mfpSetting('.js-clickYouTubeModal', mfpIframeSrc, 'iframe', "", "");
1783
1784/* ==========================================
1785*
1786*  ローディング
1787*
1788========================================== */
1789
1790  // 初期アニメーション時間
1791  let firstAnimationTime = 1200;
1792
1793  // コンテンツ表示
1794  function showCont(){
1795    $("body").addClass("is-loaded");
1796    $(".loading").fadeOut(1000,"easeInOutQuint");
1797  }
1798
1799  // ローディング
1800  function loading(){
1801
1802    if ( MAVJS.checkReferer() ) {    // 同一ドメインからのリンクの場合
1803      showCont();
1804      return;
1805    }
1806
1807    // ダイレクト、または別サイトからの流入の場合
1808    $('body').addClass('is-loading')
1809
1810    function loadingAnimation(){
1811      const windowH = $(window).height();
1812      const fvH = $('.fv').height();
1813      const scrollMax = (fvH * 0.9) - windowH;
1814      const $loadingEle = $('.loading')
1815      if(scrollMax > 300) {
1816        setTimeout(function(){
1817          $('html, body').scrollTop(scrollMax);
1818          $loadingEle.addClass('-open')
1819        }, firstAnimationTime );
1820        firstAnimationTime += 1000
1821        setTimeout(function(){
1822          $('html, body').animate({
1823            scrollTop: 0,
1824          }, 2000, "easeInOutQuint");
1825          $loadingEle.addClass('-scroll')
1826        }, firstAnimationTime );
1827        firstAnimationTime += 2000
1828      }
1829      setTimeout(function(){
1830        showCont();
1831        $('body').removeClass('is-loading')
1832        if( modalOption["autoPopup"] ) { // 自動モーダル設定あり
1833          $('#js-autoModal').trigger("click");
1834        }
1835      }, firstAnimationTime );
1836    }
1837
1838    if($('body').hasClass('on-load')){
1839      loadingAnimation();
1840    } else {
1841      let animationWait = setInterval(() => {
1842        console.log("animationWait")
1843        if($('body').hasClass('on-load')){
1844          loadingAnimation();
1845          clearInterval(animationWait);
1846        }
1847      }, 100);
1848    }
1849  }
1850
1851  loading();
1852  
1853});
1854$(window).on('load', function() {
1855  $('body').addClass('on-load')
1856})
1857</script>
1857</div>
1858</div>
1859</div>
1860</div>
1861<!-- <footer>end -->
1862
1863</div>
1864</div>
1865<!-- <container>end -->
1866
1867</div>
1868</div>
1869<!-- <wrapper>01end -->
1870
1871</body>
1872</html>
1873<!-- InstanceEnd -->

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.