

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: https://ogp.me/ns#">


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="年齢認証です。本サイトはお酒に関する情報を含んでいるため、20歳以上のお客様を対象としています。">

<title>年齢確認 | KIRIN - キリンホールディングス株式会社</title>

<meta property="og:title" content="年齢確認 | KIRIN - キリンホールディングス株式会社">
<meta property="og:description" content="年齢認証です。本サイトはお酒に関する情報を含んでいるため、20歳以上のお客様を対象としています。">
<meta property="og:image" content="https://www.kirinholdings.com/assets/images/ogp.jpg">
<meta property="og:url" content="https://www.kirinholdings.com/agechk/template/agechk.php">
<meta property="og:type" content="website">
<meta property="og:site_name" content="KIRIN - キリンホールディングス株式会社">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="年齢確認 | KIRIN - キリンホールディングス株式会社">
<meta name="twitter:description" content="年齢認証です。本サイトはお酒に関する情報を含んでいるため、20歳以上のお客様を対象としています。">
<meta name="twitter:image:src" content="https://www.kirinholdings.com/assets/images/ogp.jpg">

<link rel="canonical" href="https://www.kirinholdings.com/agechk/template/agechk.php">

<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/common/head-style-import.html'); ?>

<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/common/head-icon.html'); ?>

<style>@import url("https://www.kirin.co.jp/assets/css/common.css") layer(import);</style>
<style>@import url("/agechk/css/style.css") layer(import);</style>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/common/head-script.html'); ?>

<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/common/head-ga.html'); ?>

<style>
.mod-text {
  font-size: 14px;
}
.mod-btn__btn {
  font-size: 14px;
}
.mod-list-checkbox__label {
  font-size: 14px;
}
.mod-list-note__item {
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  .mod-text {
    font-size: 16px;
  }
  .mod-btn__btn {
    font-size: 16px;
  }
  .mod-list-checkbox__label {
    font-size: 16px;
  }
}
</style>

<script src="https://www.kirin.co.jp/assets/js/init.js"></script>
<script src="/agechk/js/lib/vue.js" defer></script>
<script src="/agechk/js/lib/moment.min.js" defer></script>
<script src="/agechk/js/agechk.js?20231110" defer></script>
<script>
if(document.cookie.match('agechkunder')){
location.href = '/agechk/under20.html';
};
</script>
</head>




<body id="top">
<div class="l-wrap">
<div id="agechk-app" class="no-script" v-cloak>
<template v-if="selectCountry === 'Japan'">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/jp/header/simple.html'); ?>
</template>
<template v-else>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/en/header/simple.html'); ?>
</template>




<main class="l-content">
<div class="l-content__outer">
<div class="l-content__inner theme-import">

<noscript>
<!-- JavaScript無効の場合 -->
<p class="txt05 align-c">お酒に関する情報が含まれるページを正常に<br>ご利用いただくには、<strong>WebブラウザのJavaScriptを有効にする</strong>必要があります。</p>
<p class="txt05 align-c"><strong>JavaScript must be enabled in your web browser</strong> in order to display pages correctly.</p>
</noscript>

<div id="noCookie" class="no-cookie">
<!-- Cookie無効の場合 -->
<p class="txt06" v-html="contents.txt.noCookie"></p>
</div>

<form name="agechk" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8');?>" method="POST"></form>

<div class="uniq-hdg-lv1">
<h1 class="uniq-hdg-lv1__hdg"><span class="uniq-hdg-lv1__hdg-sub" v-html="getHeadingLv1Text"></span><label for="agecnk-dates-input">{{contents.txt.checkBirthYear}}</label></h1>
<div class="uniq-hdg-lv1__media"><img src="/agechk/images/agechk-icon-kirin-01.svg" width="180" height="92" alt=""></div>
</div><!-- /.uniq-hdg-lv1 -->

<div class="uniq-layout-agechk-year">
<input
    id="agecnk-dates-input"
    type="text"
    placeholder="YYYY"
    class="uniq-layout-agechk-year__field"
    :aria-invalid="(check_age1 !== 'under_age' && check_age1 !== 'over_age') ? 'true' : 'false'"
    v-model="year"
    @change="normalize($event);"
/>
<span class="uniq-layout-agechk-year__text">{{contents.txt.year}}</span>
</div><!-- /.uniq-layout-agechk-input -->

<div aria-live="polite">
<transition name="fade">
<div class="uniq-box-agechk-result" v-if="check_age1 == 'under_age' || check_age1 == 'over_age'">
<p class="mod-text">{{contents.txt.enterLede}}</p>
<div class="mod-btn" v-if="check_age1 == 'under_age'"><a href="#" class="mod-btn__btn mod-btn__btn--btn-red mod-btn__btn--btn-agechk" v-on:click="addCookieUnder" id="js-enter"><span>ENTER</span></a></div>
<div class="mod-btn" v-else-if="check_age1 == 'over_age'"><a href="#" class="mod-btn__btn mod-btn__btn--btn-red mod-btn__btn--btn-agechk" v-on:click="addCookieOver" id="js-enter"><span>ENTER</span></a></div>

<ul class="mod-list-checkbox">
<li class="mod-list-checkbox__item">
<input type="checkbox" id="abridgement" class="mod-list-checkbox__check" name="save" value="180">
<label for="abridgement" class="mod-list-checkbox__label">{{contents.txt.checkboxLabel}}</label>
</li>
</ul><!-- /.mod-list-checkbox -->

<ul class="mod-list-note mod-list-note--list-agechk">
<li class="mod-list-note__item">
<div class="mod-list-note__symbol">※</div>
<div class="mod-list-note__content">{{contents.txt.noteContent}}</div>
</li>
<li class="mod-list-note__item">
<div class="mod-list-note__symbol">※</div>
<div class="mod-list-note__content"  v-html="contents.txt.noteContent02"></div>
</li>
</ul><!-- /.mod-list-note -->
</div><!-- /.uniq-box-agechk-result -->

<div v-else-if="check_age1 == 'check_age'">
<p class="uniq-text" v-html="contents.txt.checkBirthMonthDay"></p>

<div class="uniq-layout-agechk-date">
<div class="uniq-layout-agechk-date__inner">
<div class="uniq-layout-agechk-date__col">
<div class="uniq-layout-agechk-date__select-wrapper">
<select id="agechk-dates-select-month" class="uniq-layout-agechk-date__select" type="number" name="month" v-model="month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<label for="agechk-dates-select-month" class="uniq-layout-agechk-date__text">{{contents.txt.month}}</label>
</div>
<div :class="(month === '') ? 'uniq-layout-agechk-date__col uniq-layout-agechk-date__col--disabled' : 'uniq-layout-agechk-date__col'">
<div class="uniq-layout-agechk-date__select-wrapper">
<select id="agechk-dates-select-day" class="uniq-layout-agechk-date__select" type="number" name="day" v-model="day" :disabled="month === ''">
<option v-for="n in dayOutPut" v-bind:value="n">{{ n }}</option>
</select>
</div>
<label for="agechk-dates-select-day" class="uniq-layout-agechk-date__text">{{contents.txt.day}}</label>
</div>
</div><!-- /.uniq-layout-agechk-date__inner -->
</div><!-- /.uniq-layout-agechk-date -->

<transition name="fade">
<div class="uniq-box-agechk-result" v-if="typeof check_age2 === 'number'">
<div class="mod-btn" v-if="check_age2 <= 0"><a href="#" class="mod-btn__btn mod-btn__btn--btn-red mod-btn__btn--btn-agechk" v-on:click="addCookieOver" id="js-enter"><span>ENTER</span></a></div>
<div class="mod-btn" v-else><a href="#" class="mod-btn__btn mod-btn__btn--btn-red mod-btn__btn--btn-agechk" v-on:click="addCookieUnder" id="js-enter"><span>ENTER</span></a></div>
<ul class="mod-list-checkbox">
<li class="mod-list-checkbox__item" v-if="check_age2 <= 0">
<input type="checkbox" id="abridgement" class="mod-list-checkbox__check" name="save" value="180">
<label for="abridgement" class="mod-list-checkbox__label">{{contents.txt.checkboxLabel}}</label>
</li>
<li class="mod-list-checkbox__item" v-else>
<input type="checkbox" id="abridgement" class="mod-list-checkbox__check" name="save" v-bind="diff" v-bind:value="check_age2">
<label for="abridgement" class="mod-list-checkbox__label">{{contents.txt.checkboxLabel}}</label>
</li>
</ul><!-- /.mod-list-checkbox -->
<ul class="mod-list-note mod-list-note--list-agechk">
<li class="mod-list-note__item">
<div class="mod-list-note__symbol">※</div>
<div class="mod-list-note__content">{{contents.txt.noteContent}}</div>
</li>
<li class="mod-list-note__item">
<div class="mod-list-note__symbol">※</div>
<div class="mod-list-note__content" v-html="contents.txt.noteContent02"></div>
</li>
</ul><!-- /.mod-list-note -->
</div><!-- /.uniq-box-agechk-result -->
</transition>
</div>
<p class="mod-text align-c">
    <strong aria-live="polite">
        <span v-if="check_age1 == 'err_age'">
            {{contents.txt.errorAge}}
        </span>
    </strong>
</p>
</transition>
</div>

<div class="uniq-layout-change-country">
<p class="uniq-layout-change-country__lead">Please provide your country of residence.</p>
<p class="uniq-layout-change-country__text"><label for="agechk-select-country">select of your country</label></p>
<div class="uniq-layout-change-country__select-wrapper">
<select id="agechk-select-country" class="uniq-layout-change-country__select" v-model="selectCountry" @change="changeLang">
<option v-for="item in countries" :key="item.country" :value="item.country">{{item.country.replace(/-/g, ' ')}}</option>
</select>
</div>
</div><!-- /.uniq-layout-change-country -->

</div><!-- /.l-content__inner -->
</div><!-- /.l-content__outer -->
</main><!-- /.l-content -->



<template v-if="selectCountry === 'Japan'">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/jp/footer/simple.html'); ?>
</template>
<template v-else>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/en/footer/simple.html'); ?>
</template>
</div>
</div><!-- /.l-wrap -->




<template v-if="selectCountry === 'Japan'">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/jp/dialog.html'); ?>
</template>
<template v-else>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/en/dialog.html'); ?>
</template>




<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/includes/common/svg.html'); ?>
</body>
</html>