@charset "utf-8";

/* ===============================================

* Target user-agent
  - Desktop
    - IE 9, 11
    - Firefox (Latest)
    - Chrome (Latest)
  - Smart Device
    - Mobile Safari (iOS 8.4.1)
    - Android Chrome (Android 5.1.1)

----------------------------------------------- */

/* =====================================
reset
------------------------------------- */
* {
margin: 0;
border: 0;
padding: 0;
}

/* =====================================
base
------------------------------------- */
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
line-height: 1.73333;
background-color: #fff;
color: #000;
font-size: 10px;
letter-spacing: -.00001em;
word-break: break-all;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
input,
button,
textarea,
option {
font-family: Arial, "\30d2\30e9\30ae\30ce\89d2\30b4 ProN W3", "Hiragino Kaku Gothic ProN", "\30e1\30a4\30ea\30aa", Meiryo, sans-serif;
}
a,
a::before,
a::after,
button,
button::before,
button::after,
input,
input::before,
input::after {
-webkit-transition: 400ms;
transition: 400ms;
}
a,
a:link,
a:visited,
a strong,
a:link strong,
a:visited strong {
color: #005172;
text-decoration: none;
}
a:visited,
a:visited strong {
color: #639;
}
a:active,
a:hover,
a:focus,
a:active strong,
a:hover strong,
a:focus strong {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"],
button,
select,
option,
label {
cursor: pointer;
}
table {
border-collapse: collapse;
}
th,
td {
text-align: left;
vertical-align: middle;
}
th,
dt {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
border: 0;
}
button img {
position: relative;
}
table img {
max-width: inherit;
}
strong,
em,
b,
i {
font-style: normal;
}
strong,
em,
b {
font-weight: bold;
}
strong {
color: #aa272f;
}
small {
font-size: 100%;
}
section,
article,
figcaption,
figure,
header,
footer,
aside,
nav,
main {
display: block;
}

/* =====================================
header
------------------------------------- */
#header {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
border-bottom: 1px solid #d7d7d7;
background-color: #fff;
}
#tg #header,
.touchdevice #header {
position: absolute;
}
#header > .inner {
position: relative;
max-width: 960px;
height: 69px;
margin: 0 auto;
padding: 0 20px;
}
#header .logo {
position: absolute;
top: 18px;
left: 0;
}
#tg #header .logo {
top: 9px;
}
#header .logo a {
display: block;
}
#header .logo a img {
-webkit-transition: 400ms;
transition: 400ms;
}
#header .logo a:hover img,
#header .logo a:focus img,
#header .logo a:active img {
opacity: .5;
}
#header .nav {
position: absolute;
top: 5px;
right: 0;
*zoom: 1;
}
#header .nav::after {
content: "";
clear: both;
display: block;
}
#header .nav > li {
float: left;
margin-left: 40px;
}
#header .nav > li a {
display: block;
border-bottom: 4px solid #fff;
-webkit-transition: 400ms;
transition: 400ms;
}
#header .nav > li a:hover,
#header .nav > li a:focus,
#header .nav > li a:active,
#header .nav > li a.active {
border-bottom-color: #232323;
}

/* =====================================
main
------------------------------------- */
#tg #main {
position: relative;
z-index: 2;
padding: 135px 0 60px 0;
background: #f5f5f5 url(/hitotoki/sp/kitta/takagigakuen/images/bg-main.png) repeat 50% 50%;
}
#hero-image {
position: relative;
z-index: 5;
height: 666px;
overflow: hidden;
margin-top: 70px;
}
.static #hero-image {
background-image: url(/hitotoki/sp/kitta/images/hero-image-01.png), url(/hitotoki/sp/kitta/images/hero-image-02.png), url(/hitotoki/sp/kitta/images/hero-image-03.png);
background-position: 50% 50%, 50% 50%, 50% 50%;
background-repeat: no-repeat, no-repeat, no-repeat;
}
#hero-image > .inner {
position: relative;
z-index: 100;
max-width: 1000px;
margin: 0 auto;
}
#hero-image .logo {
position: absolute;
top: 270px;
left: 370px;
width: 260px;
opacity: 0;
-webkit-will-change: top, left, width, opacity;
will-change: top, left, width, opacity;
}
.static #hero-image .logo {
opacity: 1;
}
#hero-image .sns {
position: absolute;
top: -53px;
right: 40px;
-webkit-will-change: top;
will-change: top;
*zoom: 1;
}
#hero-image .sns::after {
content: "";
clear: both;
display: block;
}
#hero-image .sns > li {
float: left;
width: 53px;
height: 53px;
margin-left: 16px;
}
#hero-image .sns > li a {
display: block;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#hero-image .sns > li a:hover,
#hero-image .sns > li a:focus,
#hero-image .sns > li a:active {
opacity: .5
}
#hero-image .layer-01,
#hero-image .layer-02,
#hero-image .layer-03,
#hero-image .layer-04,
#hero-image .layer-05 {
position: absolute;
opacity: 0;
-webkit-will-change: opacity;
will-change: opacity;
}
#hero-image .layer-01,
#hero-image .layer-02,
#hero-image .layer-03 {
top: 0;
left: 50%;
bottom: 0;
width: 1200px;
margin-left: -600px;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#hero-image .layer-01 {
background-image: url(/hitotoki/sp/kitta/images/hero-image-01.png);
}
#hero-image .layer-02 {
background-image: url(/hitotoki/sp/kitta/images/hero-image-02.png);
}
#hero-image .layer-03 {
background-image: url(/hitotoki/sp/kitta/images/hero-image-03.png);
}
#hero-image .layer-04,
#hero-image .layer-05 {
left: 0;
right: 0;
}
#hero-image .layer-04 {
top: 180px;
bottom: 0;
background: transparent url(/hitotoki/sp/kitta/images/hero-image-04.png) repeat-x 0 0;
}
#hero-image .layer-05 {
top: 189px;
height: 350px;
background: transparent url(/hitotoki/sp/kitta/images/hero-image-05.png) repeat-x 0 0;
-webkit-will-change: background-position;
will-change: background-position;
}

.section {
position: relative;
margin-top: -70px;
padding-top: 70px;
}
.section > .hdg {
width: 960px;
margin: 0 auto;
text-align: center;
}

#about {
z-index: 4;
}
#about > .hdg {
padding: 50px 0 75px 0;
}
#about > .reason {
position: relative;
z-index: 3;
background-color: #fff;
}
#about > .reason > .inner {
position: relative;
width: 920px;
height: 580px;
margin: 0 auto;
}
#about > .reason > .inner p {
position: absolute;
top: 0;
}
#about > .reason > .inner p:nth-child(1) {
left: 0;
}
#about > .reason > .inner p:nth-child(2) {
right: 0;
}
#about > .feature {
position: relative;
margin-top: -70px;
padding-top: 70px;
background: #c48954 url(/hitotoki/sp/kitta/images/bg-feature.png) no-repeat 50% 70px;
}
#about > .feature::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
display: block;
height: 70px;
background-color: #fff;
}
#about > .feature > .inner {
width: 960px;
height: 630px;
margin: 0 auto;
}
#about > .feature > .inner p {
padding-top: 52px;
padding-left: 432px;
}
#about > .howto {
background-color: #fff;
}
#about > .howto > .inner {
position: relative;
width: 960px;
height: 333px;
margin: 0 auto;
}
#about > .howto > .inner ul {
position: absolute;
top: 50px;
}
#about > .howto > .inner ul::after {
content: "";
clear: both;
display: block;
}
#about > .howto > .inner ul li {
float: left;
}

#lineup {
z-index: 3;
background: #f5f5f5;
}
#lineup > .hdg {
padding: 50px 0 40px 0;
}
#lineup > .type > .inner {
width: 960px;
margin: 0 auto;
}
#lineup > .type > .inner ul::after {
content: "";
clear: both;
display: block;
}
#lineup > .type > .inner ul li {
font-size: 170%;
}
#lineup > .type > .inner ul li:nth-child(odd) {
float: left;
}
#lineup > .type > .inner ul li:nth-child(even) {
float: right;
}
#lineup > .type > .inner ul li p {
margin-top: 25px;
}
#lineup > .type > .inner .nav {
margin-top: 40px;
}
#lineup > .type > .inner .nav li {
width: 50%;
background: #fff;
text-align: center;
}
#lineup > .type > .inner .nav li > a {
display: block;
opacity: 1;
width: 100%;
padding: 15px 0;
background: #fff;
border: 1px solid #000;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#lineup > .type > .inner .nav li > a:hover,
#lineup > .type > .inner .nav li > a:focus,
#lineup > .type > .inner .nav li > a:active {
opacity: .5;
}
#lineup > .type > .inner .nav li:nth-child(even) > a {
margin-left: -1px;
}
#lineup > .type > .inner .nav li > a img {
vertical-align: middle;
}
#lineup > .item > .inner {
width: 960px;
margin: 0 auto;
padding: 30px 0 25px 0;
}
#lineup > .item > .inner > .date {
width: 920px;
margin: 0 auto -75px;
font-size: 140%;
}
#lineup > .item > .inner > .date strong {
font-weight: normal;
}
#lineup > .item > .inner > .hdg {
padding: 80px 0 20px;
margin-top: -70px;
}
#lineup > .item .nav {
width: 920px;
margin: 0 auto;
}
#lineup > .item .nav > ul {
margin-left: -48px;
*zoom: 1;
}
#lineup > .item .nav > ul::after {
content: "";
clear: both;
display: block;
}
#lineup > .item .nav > ul li {
float: left;
padding: 0 0 24px 48px;
}
#lineup > .item .nav > ul li a {
display: block;
text-decoration: none;
}
#lineup > .item .nav > ul li a img {
opacity: 1;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#lineup > .item .nav > ul li a:hover img,
#lineup > .item .nav > ul li a.active img {
opacity: .5;
}
#lineup > .item .nav > ul li a p {
color: #000;
font-size: 150%;
margin-top: 3px;
text-align: center;
}
#lineup > .item .nav > .new {
color: #aa272f;
font-size: 120%;
font-weight: bold;
line-height: 1.2;
margin-bottom: 20px;
border-bottom: 1px solid #aa272f;
}
#lineup > .item .modal {
display: none;
}
.static #lineup > .item .modal {
display: block;
}
.static #lineup > .item .modal li {
width: 610px;
height: 616px;
margin: 0 auto 32px;
padding-top: 9px;
text-align: center;
background: url(/hitotoki/sp/kitta/images/bg-modal.png) no-repeat 0 0;
}

#gallery {
z-index: 2;
background: #fff;
}
#gallery > .hdg {
padding: 50px 0 40px 0;
}
#gallery > .example > .inner {
position: relative;
width: 960px;
margin: 0 auto;
}
#gallery > .example > .inner .images {
position: relative;
height: 590px;
margin-bottom: 25px;
overflow: hidden;
}
#gallery > .example > .inner .images li {
font-size: 160%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
text-align: center;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#gallery > .example > .inner .images li.active {
z-index: 3;
opacity: 1;
}
#gallery > .example > .inner .images li p {
margin-top: 3px;
}
.static #gallery > .example > .inner .images {
height: auto;
}
.static #gallery > .example > .inner .images li {
position: static;
margin-bottom: 32px;
opacity: 1;
}
#gallery > .example > .inner .nav {
*zoom: 1;
}
#gallery > .example > .inner .nav::after {
content: "";
clear: both;
display: block;
}
#gallery > .example > .inner .nav li {
float: left;
}
#gallery > .example > .inner .detail-pager,
#gallery > .example > .inner .nav li a {
display: block;
opacity: 1;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#gallery > .example > .inner .detail-pager:hover,
#gallery > .example > .inner .detail-pager:focus,
#gallery > .example > .inner .detail-pager:active,
#gallery > .example > .inner .nav li a:hover,
#gallery > .example > .inner .nav li a:focus,
#gallery > .example > .inner .nav li a:active,
#gallery > .example > .inner .nav li a.active {
opacity: .5;
}

#modal-content {
min-height: 616px;
padding: 9px;
text-align: center;
background: url(/hitotoki/sp/kitta/images/bg-modal.png) no-repeat 0 0;
-webkit-background-size: 610px 100%;
background-size: 610px 100%;
}
#modal-content .modal-img {
opacity: 0;
}
#modal-content .modal-pager {
display: block;
opacity: 1;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#modal-content .modal-pager:hover,
#modal-content .modal-pager:focus,
#modal-content .modal-pager:active {
opacity: .5;
}

#note {
position: relative;
width: 970px;
min-height: 3000px;
margin: 25px auto 92px auto;
padding: 0 36px 0 64px;
background: transparent url(/hitotoki/sp/kitta/takagigakuen/images/bg-note-01.png) repeat-y 50% 0;
}
#note::before,
#note::after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
background-repeat: no-repeat;
}
#note::before {
top: -25px;
height: 25px;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/bg-note-02.png);
background-position: 50% 100%;
}
#note::after {
bottom: -42px;
height: 42px;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/bg-note-03.png);
background-position: 50% 0;
}
#note .lead-01 {
margin: 0 -14px 80px -17px;
}
#note .lead-02 {
position: relative;
margin: 30px 0;
padding: 0 36px;
background: transparent url(/hitotoki/sp/kitta/takagigakuen/images/bg-lead-01.png) repeat-y 50% 0;
font-size: 150%;
}
#note .lead-02::before,
#note .lead-02::after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 30px;
background-repeat: no-repeat;
}
#note .lead-02::before {
top: -30px;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/bg-lead-02.png);
}
#note .lead-02::after {
bottom: -30px;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/bg-lead-03.png);
}

#making {
padding: 50px 0 10px 0;
}
#making > .hdg {
margin: 30px 0 5px 0;
}
#making > ol > li {
margin-top: 36px;
padding-top: 40px;
background: transparent url(/hitotoki/sp/kitta/takagigakuen/images/making-dot.png) repeat-x 50% 0;
}
#making > ol > li:first-child {
margin-top: 0;
padding-top: 36px;
background: none;
}
#making > ol > li::after {
content: "";
clear: both;
display: block;
}
#making > ol > li > .col-01 {
float: left;
width: 490px;
padding: 0 10px;
}
#making > ol > li.no-img > .col-01 {
float: none;
width: auto;
}
#making > ol > li > .col-01 .hdg {
position: relative;
padding-left: 80px;
}
#making > ol > li > .col-01 .hdg > .accent img {
position: absolute;
top: 0;
left: 0;
margin-top: -5px;
-webkit-will-change: -webkit-transform, opacity;
will-change: transform, opacity;
}
#making > ol > li > .col-01 .hdg > .accent.walk img {
-webkit-animation: walk 3000ms infinite;
-ms-animation: walk 3000ms infinite;
animation: walk 3000ms infinite;
}
@-webkit-keyframes walk {
  0%   { -webkit-transform: rotate(0deg);   }
  8%   { -webkit-transform: rotate(-10deg); }
  24%  { -webkit-transform: rotate(10deg);  }
  40%  { -webkit-transform: rotate(-10deg); }
  56%  { -webkit-transform: rotate(10deg);  }
  64%  { -webkit-transform: rotate(0deg);   }
  100% { -webkit-transform: rotate(0deg);   }
}
@-ms-keyframes walk {
  0%   { -ms-transform: rotate(0deg);   }
  8%   { -ms-transform: rotate(-10deg); }
  24%  { -ms-transform: rotate(10deg);  }
  40%  { -ms-transform: rotate(-10deg); }
  56%  { -ms-transform: rotate(10deg);  }
  64%  { -ms-transform: rotate(0deg);   }
  100% { -ms-transform: rotate(0deg);   }
}
@keyframes walk {
  0%   { transform: rotate(0deg);   }
  8%   { transform: rotate(-10deg); }
  24%  { transform: rotate(10deg);  }
  40%  { transform: rotate(-10deg); }
  56%  { transform: rotate(10deg);  }
  64%  { transform: rotate(0deg);   }
  100% { transform: rotate(0deg);   }
}
#making > ol > li > .col-01 .hdg > .accent.shake img {
margin-top: 12px;
-webkit-animation: shake 3000ms infinite;
-ms-animation: shake 3000ms infinite;
animation: shake 3000ms infinite;
}
@-webkit-keyframes shake {
  0%   { -webkit-transform: translateX(0);    }
  3%   { -webkit-transform: translateX(-3px); }
  9%   { -webkit-transform: translateX(3px);  }
  15%  { -webkit-transform: translateX(-3px); }
  21%  { -webkit-transform: translateX(3px);  }
  27%  { -webkit-transform: translateX(-3px); }
  33%  { -webkit-transform: translateX(3px);  }
  39%  { -webkit-transform: translateX(-3px); }
  45%  { -webkit-transform: translateX(3px);  }
  48%  { -webkit-transform: translateX(0);    }
  100% { -webkit-transform: translateX(0);    }
}
@-ms-keyframes shake {
  0%   { -ms-transform: translateX(0);    }
  3%   { -ms-transform: translateX(-3px); }
  9%   { -ms-transform: translateX(3px);  }
  15%  { -ms-transform: translateX(-3px); }
  21%  { -ms-transform: translateX(3px);  }
  27%  { -ms-transform: translateX(-3px); }
  33%  { -ms-transform: translateX(3px);  }
  39%  { -ms-transform: translateX(-3px); }
  45%  { -ms-transform: translateX(3px);  }
  48%  { -ms-transform: translateX(0);    }
  100% { -ms-transform: translateX(0);    }
}
@keyframes shake {
  0%   { transform: translateX(0);    }
  3%   { transform: translateX(-3px); }
  9%   { transform: translateX(3px);  }
  15%  { transform: translateX(-3px); }
  21%  { transform: translateX(3px);  }
  27%  { transform: translateX(-3px); }
  33%  { transform: translateX(3px);  }
  39%  { transform: translateX(-3px); }
  45%  { transform: translateX(3px);  }
  48%  { transform: translateX(0);    }
  100% { transform: translateX(0);    }
}
#making > ol > li > .col-01 .hdg > .accent.hop img {
-webkit-animation: hop 3000ms infinite;
-ms-animation: hop 3000ms infinite;
animation: hop 3000ms infinite;
}
@-webkit-keyframes hop {
  0%   { -webkit-transform: translateY(0);     }
  15%  { -webkit-transform: translateY(-10px); }
  25%  { -webkit-transform: translateY(0);     }
  40%  { -webkit-transform: translateY(-10px); }
  50%  { -webkit-transform: translateY(0);     }
  100% { -webkit-transform: translateY(0);     }
}
@keyframes hop {
  0%   { -ms-transform: translateY(0);     }
  15%  { -ms-transform: translateY(-10px); }
  25%  { -ms-transform: translateY(0);     }
  40%  { -ms-transform: translateY(-10px); }
  50%  { -ms-transform: translateY(0);     }
  100% { -ms-transform: translateY(0);     }
}
@keyframes hop {
  0%   { transform: translateY(0);     }
  15%  { transform: translateY(-10px); }
  25%  { transform: translateY(0);     }
  40%  { transform: translateY(-10px); }
  50%  { transform: translateY(0);     }
  100% { transform: translateY(0);     }
}
#making > ol > li > .col-01 .hdg > .accent.bloom img {
-webkit-animation: bloom 3000ms infinite;
-ms-animation: bloom 3000ms infinite;
animation: bloom 3000ms infinite;
}
@-webkit-keyframes bloom {
  0%   { -webkit-transform: scale(1);   opacity: 1; }
  10%  { -webkit-transform: scale(1);   opacity: 0; }
  15%  { -webkit-transform: scale(.1);  opacity: 0; }
  50%  { -webkit-transform: scale(1.2); opacity: 1; }
  70%  { -webkit-transform: scale(1);   opacity: 1; }
  100% { -webkit-transform: scale(1);   opacity: 1; }
}
@-ms-keyframes bloom {
  0%   { -ms-transform: scale(1);   opacity: 1; }
  10%  { -ms-transform: scale(1);   opacity: 0; }
  15%  { -ms-transform: scale(.1);  opacity: 0; }
  50%  { -ms-transform: scale(1.2); opacity: 1; }
  70%  { -ms-transform: scale(1);   opacity: 1; }
  100% { -ms-transform: scale(1);   opacity: 1; }
}
@keyframes bloom {
  0%   { transform: scale(1);   opacity: 1; }
  10%  { transform: scale(1);   opacity: 0; }
  15%  { transform: scale(.1);  opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
#making > ol > li > .col-01 .hdg > .accent.delay-01 img {
-webkit-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
#making > ol > li > .col-01 .hdg > .accent.delay-02 img {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
#making > ol > li > .col-01 .hdg > .accent.delay-03 img {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#making > ol > li > .col-01 .hdg > .accent.delay-04 img {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#making > ol > li > .col-01 p {
margin-top: 25px;
font-size: 150%;
}
#making > ol > li > .col-01 p + p {
margin-top: .5em;
}
#making > ol > li > .col-01 ul {
margin-top: 40px;
}
#making > ol > li > .col-01 ul::after {
content: "";
clear: both;
display: block;
}
#making > ol > li > .col-01 ul > li {
float: left;
width: 33.33333%;
}
#making > ol > li > .col-02 {
float: right;
width: 380px;
padding-top: 5px;
text-align: center;
}

#example {
width: 960px;
margin: 0 auto 60px auto;
border: 1px solid #040000;
padding: 22px 35px 34px 36px;
background: #e1cda2 url(/hitotoki/sp/kitta/takagigakuen/images/bg-cork.png) repeat-y 0 0;
}
#example .hdg {
margin-bottom: 25px;
text-align: center;
}
#example ul {
display: table;
table-layout: fixed;
width: 100%;
}
#example ul > li {
display: table-cell;
}
#example ul > li:nth-child(1) {
text-align: left;
}
#example ul > li:nth-child(2) {
text-align: center;
}
#example ul > li:nth-child(3) {
text-align: right;
}

.product {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.product > a {
display: block;
width: 470px;
height: 66px;
margin: 0 auto;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/btn-product.png);
}
.product > a > span {
display: block;
width: 470px;
height: 66px;
background-image: url(/hitotoki/sp/kitta/takagigakuen/images/btn-product_o.png);
opacity: 0;
-webkit-transition: 400ms;
transition: 400ms;
will-change: opacity;
}
.product > a:hover > span,
.product > a:focus > span,
.product > a:active > span {
opacity: 1;
}

/* =====================================
footer
------------------------------------- */
#footer {
position: relative;
z-index: 1;
margin-top: -70px;
padding-top: 70px;
background-color: #f5f5f5;
}
#tg #footer {
z-index: 1;
background-color: #fff;
}
#footer > .takagigakuen {
background-color: #fff;
}
#footer > .takagigakuen > .inner {
width: 920px;
margin: 0 auto;
padding: 50px 0 30px 0;
}
#footer > .takagigakuen .collaboration {
display: table;
width: 100%;
border: 2px solid #040000;
padding: 11px 27px;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#footer > .takagigakuen .collaboration:hover,
#footer > .takagigakuen .collaboration:focus,
#footer > .takagigakuen .collaboration:active {
opacity: .5;
}
#footer > .takagigakuen .collaboration .logo,
#footer > .takagigakuen .collaboration .btn {
display: table-cell;
vertical-align: middle;
}
#footer > .takagigakuen .collaboration .logo {
width: 306px;
}
#footer > .takagigakuen .notice {
margin-top: 30px;
font-size: 140%;
}
#footer > .inner {
position: relative;
width: 920px;
margin: 0 auto;
}
#footer > .inner .logo,
#footer > .inner .pagetop {
position: absolute;
top: 50%;
}
#footer > .inner .logo {
left: 50%;
width: 136px;
margin: -28px 0 0 -68px;
}
#tg #footer > .inner .logo {
width: 217px;
margin-top: -17px;
}
#footer > .inner .pagetop {
right: 10px;
margin-top: -16px;
}
#footer > .inner .logo a,
#footer > .inner .pagetop a {
display: block;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-will-change: opacity;
will-change: opacity;
}
#footer > .inner .logo a:hover,
#footer > .inner .logo a:focus,
#footer > .inner .logo a:active,
#footer > .inner .pagetop a:hover,
#footer > .inner .pagetop a:focus,
#footer > .inner .pagetop a:active {
opacity: .5;
}
#footer > .inner .copyright {
padding: 64px 0 52px 0;
color: #000;
font-size: 120%;
}