/* ============================================================
   style.css - Tokyo Life 周年記念フィーチャーページ
   ============================================================ */

/* ============================================================
   [1] Normalize CSS v3.0.1
   ブラウザのデフォルトスタイル差異をリセット
   ============================================================ */

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%}
body {
  margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
  display:block}
audio,canvas,progress,video {
  display:inline-block;
  vertical-align:baseline}
audio:not([controls]) {
  display:none;
  height:0}
[hidden],template {
  display:none}
a {
  background:0 0}
a:active,a:hover {
  outline:0}
abbr[title] {
  border-bottom:1px dotted}
b,strong {
  font-weight:700}
dfn {
  font-style:italic}
h1 {
  font-size:2em;
  margin:.67em 0}
mark {
  background:#ff0;
  color:#000}
small {
  font-size:80%}
sub,sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline}
sup {
  top:-.5em}
sub {
  bottom:-.25em}
img {
  border:0}
svg:not(:root) {
  overflow:hidden}
figure {
  margin:1em 40px}
hr {
  box-sizing:content-box}
pre {
  overflow:auto}
code,kbd,pre,samp {
  font-family:monospace,monospace;
  font-size:1em}
button,input,optgroup,select,textarea {
  color:inherit;
  font:inherit;
  margin:0}
button {
  overflow:visible}
button,select {
  text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance:button;
  cursor:pointer}
button[disabled],html input[disabled] {
  cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner {
  border:0;
  padding:0}
input {
  line-height:normal}
input[type="checkbox"],input[type="radio"] {
  box-sizing:border-box;
  padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
  height:auto}
input[type="search"] {
  -webkit-appearance:textfield;
  box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
  -webkit-appearance:none}
fieldset {
  border:1px solid silver;
  margin:0 2px;
  padding:.35em .625em .75em}
legend {
  border:0;
  padding:0}
textarea {
  overflow:auto}
optgroup {
  font-weight:700}
table {
  border-collapse:collapse;
  border-spacing:0}
td,th {
  padding:0}
html {
  box-sizing:border-box}
*,*:before,*:after {
  box-sizing:inherit}
section {
  max-width:68em;
  margin-left:auto;
  margin-right:auto}
section:after {
  content:"";
  display:table;
  clear:both}
section aside {
  float:left;
  display:block;
  margin-right:2.35765%;
  width:23.23176%;
  background-color:#f8f8f8}
section aside:last-child {
  margin-right:0}
section article {
  float:left;
  display:block;
  margin-right:2.35765%;
  width:74.41059%;
  background-color:#932953}
section article:last-child {
  margin-right:0}

/* ============================================================
   [2] 余白ユーティリティクラス
   .mt/.mb/.mr/.ml = margin  .pt/.pb/.pr/.pl = padding
   t=上 b=下 r=右 l=左  数字: 0〜50px
   ============================================================ */

.mt0 {
  margin-top:0!important}
.mb0 {
  margin-bottom:0!important}
.mr0 {
  margin-right:0!important}
.ml0 {
  margin-left:0!important}
.pt0 {
  padding-top:0!important}
.pb0 {
  padding-bottom:0!important}
.pr0 {
  padding-right:0!important}
.pl0 {
  padding-left:0!important}
.mt5 {
  margin-top:5px!important}
.mb5 {
  margin-bottom:5px!important}
.mr5 {
  margin-right:5px!important}
.ml5 {
  margin-left:5px!important}
.pt5 {
  padding-top:5px!important}
.pb5 {
  padding-bottom:5px!important}
.pr5 {
  padding-right:5px!important}
.pl5 {
  padding-left:5px!important}
.mt10 {
  margin-top:10px!important}
.mb10 {
  margin-bottom:10px!important}
.mr10 {
  margin-right:10px!important}
.ml10 {
  margin-left:10px!important}
.pt10 {
  padding-top:10px!important}
.pb10 {
  padding-bottom:10px!important}
.pr10 {
  padding-right:10px!important}
.pl10 {
  padding-left:10px!important}
.mt15 {
  margin-top:15px!important}
.mb15 {
  margin-bottom:15px!important}
.mr15 {
  margin-right:15px!important}
.ml15 {
  margin-left:15px!important}
.pt15 {
  padding-top:15px!important}
.pb15 {
  padding-bottom:15px!important}
.pr15 {
  padding-right:15px!important}
.pl15 {
  padding-left:15px!important}
.mt20 {
  margin-top:20px!important}
.mb20 {
  margin-bottom:20px!important}
.mr20 {
  margin-right:20px!important}
.ml20 {
  margin-left:20px!important}
.pt20 {
  padding-top:20px!important}
.pb20 {
  padding-bottom:20px!important}
.pr20 {
  padding-right:20px!important}
.pl20 {
  padding-left:20px!important}
.mt25 {
  margin-top:25px!important}
.mb25 {
  margin-bottom:25px!important}
.mr25 {
  margin-right:25px!important}
.ml25 {
  margin-left:25px!important}
.pt25 {
  padding-top:25px!important}
.pb25 {
  padding-bottom:25px!important}
.pr25 {
  padding-right:25px!important}
.pl25 {
  padding-left:25px!important}
.mt30 {
  margin-top:30px!important}
.mb30 {
  margin-bottom:30px!important}
.mr30 {
  margin-right:30px!important}
.ml30 {
  margin-left:30px!important}
.pt30 {
  padding-top:30px!important}
.pb30 {
  padding-bottom:30px!important}
.pr30 {
  padding-right:30px!important}
.pl30 {
  padding-left:30px!important}
.mt35 {
  margin-top:35px!important}
.mb35 {
  margin-bottom:35px!important}
.mr35 {
  margin-right:35px!important}
.ml35 {
  margin-left:35px!important}
.pt35 {
  padding-top:35px!important}
.pb35 {
  padding-bottom:35px!important}
.pr35 {
  padding-right:35px!important}
.pl35 {
  padding-left:35px!important}
.mt40 {
  margin-top:40px!important}
.mb40 {
  margin-bottom:40px!important}
.mr40 {
  margin-right:40px!important}
.ml40 {
  margin-left:40px!important}
.pt40 {
  padding-top:40px!important}
.pb40 {
  padding-bottom:40px!important}
.pr40 {
  padding-right:40px!important}
.pl40 {
  padding-left:40px!important}
.mt45 {
  margin-top:45px!important}
.mb45 {
  margin-bottom:45px!important}
.mr45 {
  margin-right:45px!important}
.ml45 {
  margin-left:45px!important}
.pt45 {
  padding-top:45px!important}
.pb45 {
  padding-bottom:45px!important}
.pr45 {
  padding-right:45px!important}
.pl45 {
  padding-left:45px!important}
.mt50 {
  margin-top:50px!important}
.mb50 {
  margin-bottom:50px!important}
.mr50 {
  margin-right:50px!important}
.ml50 {
  margin-left:50px!important}
.pt50 {
  padding-top:50px!important}
.pb50 {
  padding-bottom:50px!important}
.pr50 {
  padding-right:50px!important}
.pl50 {
  padding-left:50px!important}

/* ============================================================
   [3] スプライト画像クラス (.spimg)
   ボタン・ロゴ用スプライト画像の座標指定
   ============================================================ */

.spimg {
  display:inline-block}
.spimg.btn1 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  background-position:0 -288px;
  width:386px;
  height:87px;
  background-size:1073px 651px}
.spimg.btn2 {
  background-position:0 -472px;
  width:386px;
  height:87px}
.spimg.btn2,.spimg.h2_1 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  background-size:1073px 651px}
.spimg.h2_1 {
  background-position:-695px 0;
  width:378px;
  height:67px}
.spimg.h2_2 {
  background-position:-374px 0;
  width:316px;
  height:88px}
.spimg.h2_2,.spimg.logo1 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  background-size:1073px 651px}
.spimg.logo1 {
  background-position:-187px 0;
  width:182px;
  height:91px}
.spimg.logo2 {
  background-position:0 0}
.spimg.logo2,.spimg.logo3 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  width:182px;
  height:91px;
  background-size:1073px 651px}
.spimg.logo3 {
  background-position:0 -96px}
.spimg.logo4 {
  background-position:-187px -96px}
.spimg.logo4,.spimg.logo5 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  width:182px;
  height:91px;
  background-size:1073px 651px}
.spimg.logo5 {
  background-position:0 -192px}
.spimg.sp_btn1 {
  background-position:0 -380px}
.spimg.sp_btn1,.spimg.sp_btn2 {
  background-image:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/spimg.png);
  background-repeat:no-repeat;
  width:386px;
  height:87px;
  background-size:1073px 651px}
.spimg.sp_btn2 {
  background-position:0 -564px}

/* ============================================================
   [4] 基本レイアウト・文字スタイル
   ============================================================ */

#main_content {
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%;
  text-rendering:auto;
  font-size:16px;
  color:#333;
  background-color:#fff;
  word-wrap:break-word}
.clearfix {
  *zoom:1}
.clearfix:before,.clearfix:after {
  content:" ";
  display:table}
.clearfix:after {
  clear:both}
p {
  font-size:16px}
.left {
  float:left}
.right {
  float:right}
#content_outer {
  background-color:#efefef;
  margin-top:-15px}
#main_content {
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:0}
#main_content:after {
  content:"";
  display:table;
  clear:both}
@media screen and (max-width:500px) {
  #main_content {
    padding-top:100px  }
}
#main_content .container {
  padding:0 65px 48px}
@media screen and (max-width:500px) {
  #main_content .container {
    padding:0 10px 20px  }
}
a img {
  transition:all .2s ease-in-out}
a img:hover {
  opacity:.8;
  filter:alpha(opacity=80)}
img {
  max-width:100%}

/* ============================================================
   [5] ヘッダー - 周年記念メイン画像
   PC: 高さ900px / cover で全面表示
   SP: contain + padding-bottom でアスペクト比維持
   ★修正: background-size:contain / padding-bottom:103%
   ============================================================ */

header .anniversary {
  background-image:url(https://www.tokyolife.co.jp/feature/2026/anniversary/images/header_pc260220.jpg);
  background-size:cover;
  width:100%;
  height:900px}
@media screen and (max-width:500px) {
  header .anniversary {
    width:100%;
    max-width:100%;
    background-image:url(https://www.tokyolife.co.jp/feature/2026/anniversary/images/header_sp260220.jpg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center top;
    height:0;
    padding-top:0;
    padding-bottom:103%  }
}

/* ============================================================
   [6] ヘッダー内テキスト・リンク
   ============================================================ */

header p.mb_text {
  padding:0 10px;
  font-size:20px;
  font-weight:700;
  text-align:center}
@media screen and (min-width:501px) {
  header p.mb_text {
    display:none  }
}
header p {
  font-size:16px;
  margin-top:10px}
@media screen and (max-width:500px) {
  header p {
    font-size:11px  }
}
header p a {
  color:#FE0132;
  text-decoration:underline}

/* ============================================================
   [7] Hello セクション
   ============================================================ */

#hello p {
  margin-bottom:1em}
#hello p:last-child {
  margin-bottom:0}
@media screen and (max-width:500px) {
  #hello p {
    font-size:18px  }
}

/* ============================================================
   [8] ボタングループ (.btn_group)
   ============================================================ */

.btn_group {
  margin:60px 0 0}
@media screen and (max-width:500px) {
  .btn_group {
    margin:40px 0 0  }
}
.btn_group:after {
  content:"";
  display:table;
  clear:both}
.btn_group .btn1 {
  float:left;
  display:block;
  margin-right:2.35765%;
  width:48.82117%}
.btn_group .btn1:last-child {
  margin-right:0}
.btn_group .btn1 a {
  float:left}
.btn_group .btn2 {
  float:left;
  display:block;
  margin-right:2.35765%;
  width:48.82117%}
.btn_group .btn2:last-child {
  margin-right:0}
.btn_group .btn2 a {
  float:right}

/* ============================================================
   [9] 見出し (h2) と区切り線 (hr)
   ============================================================ */

h2 {
  text-align:center;
  margin:30px 0 20px}
@media screen and (max-width:500px) {
  h2 {
    margin:20px 0 30px  }
}
h2 img {
  display:inline-block;
  padding:0 16px;
  background-color:#fff;
  position:relative;
  top:-14px;
  width:28%}
@media screen and (max-width:500px) {
  h2 img {
    width:54%;
    top:-10px;
    padding:0 10px  }
}
h2,hr {
  background:url(https://www.tokyolife.co.jp/feature/2024/anniversary/images/h2_border.png) 0 0 repeat-x;
  border:none}
hr {
  margin:40px 0 60px;
  height:30px}
@media screen and (max-width:500px) {
  hr {
    margin:20px 0  }
}

/* ============================================================
   [10] 注釈エリア (.note)
   ============================================================ */

.note h3 {
  font-size:18px;   /* サイズ変更16px→18px */
  color:#FE0132;
  margin-bottom:8px;
  margin-left:-.4em}
.note li {
  font-size:16px;   /* サイズ変更14px→16px */
  list-style-type:disc;
  margin-left:1.4em}

/* ============================================================
   [11] チャンネルグリッド
   ============================================================ */

.channel_wrap {
  border:3px solid #ddd;
  padding:8px;
  background-color:#eee}
.channel_wrap .wrap {
  border:1px solid #ccc;
  border-bottom:none;
  border-right:none}
.grid-items-lines {
  position:relative}
.grid-items-lines p {
  line-height:1.5em}
.grid-items-lines a {
  text-decoration:none}
.grid-items-lines:after {
  content:"";
  display:table;
  clear:both}
.grid-items-lines .grid-item {
  transition:all .2s ease-in-out;
  background:#fff;
  border-bottom:1px solid rgba(51,51,51,.2);
  border-right:1px solid rgba(51,51,51,.2);
  cursor:pointer;
  float:left;
  height:244px;
  overflow:hidden;
  outline:none;
  padding:2em;
  width:100%}
@media screen and (min-width:53.75em) {
  .grid-items-lines .grid-item {
    width:33.33333%  }
}
.grid-items-lines .grid-item:focus,.grid-items-lines .grid-item:hover {
  background:rgba(51,51,51,.05)}
@media screen and (min-width:53.75em) {
  .grid-items-lines .grid-item-big {
    width:50%  }
}
@media screen and (min-width:40em) {
  .grid-items-lines .grid-item-big p {
    max-width:60%  }
}
.grid-items-lines .channel {
  width:196px;
  height:180px;
  margin:0 auto}
.grid-items-lines .channel .logo_box {
  width:196px;
  background:#fff;
  height:150px;
  border:1px solid #ccc;
  border-bottom:none;
  display:table-cell;
  text-align:center;
  vertical-align:middle}
.grid-items-lines .channel .logo_box img {
  display:inline}
.grid-items-lines .channel .point {
  width:100%;
  background:#FE0132;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:15px;
  padding:4px 0}
.grid-items-lines .bottom-cover {
  background:#fff;
  bottom:0;
  height:3px;
  position:absolute;
  width:100%}
.grid-items-lines .right-cover {
  background:#fff;
  height:100%;
  position:absolute;
  right:0;
  width:4px}
.note li a {
  text-decoration:underline}

/* ============================================================
   [12] ページトップ・ユーティリティナビゲーション
   ============================================================ */

#pageTop {
  font-size:12px;
  min-width:0;
  margin-top:40px}
#pageTop #pageTopInner {
  min-width:0;
  width:100%}
.topsns {
  float:right;
  margin-top:16px;
  margin-right:16px}
.topsns:after {
  content:"";
  display:table;
  clear:both}
.topsns li {
  float:left}
.topicPath {
  margin-left:10px;
  padding-top:0}
@media screen and (max-width:500px) {
  .topicPath {
    margin-left:10px  }
}
.topicPath li,.mypage {
  font-size:12px}
.mypage {
  position:relative;
  right:36px;
  top:7px}
#utilityHeader {
  display:none}
a.key {
  padding-left:24px;
  background:url(http://www.tokyolife.co.jp/shared/img/hd_ic_key.png) no-repeat left center;
  color:#333}
#utility:after {
  content:"";
  display:table;
  clear:both}
#utility .mypage {
  float:right;
  position:static;
  margin-right:10px;
  margin-top:-33px}
@media screen and (max-width:500px) {
  #utility .mypage {
    display:none  }
}
#commonHeaderInner p {
  font-size:12px}