@charset "utf-8";

/* -------------------------------------------
Auther: design studio tom'sOne
        Tommy Tsutsui
        http://toms1.net/
Last modefied: 31/Aug/2017
------------------------------------------- */

/* -------------------------------------------
 Reset
------------------------------------------- */
html{font-size:62.5%;}body,a,address,header,html,iframe,nav{padding:0;margin:0}address,header,html,iframe,nav{border:0;outline:0}abbr,article,aside,audio,b,canvas,cite,code,del,details,dfn,em,fieldset,figcaption,figure,form,hgroup,i,img,ins,kbd,label,legend,mark,menu,object,pblockquote,pre,q,samp,span,strong,sub,summary,sup,time,var,video{background:0 0;margin:0;padding:0;border:0;outline:0}footer,h1,h2,h3,h4,h5,h6,p,section,small{border:0;outline:0}address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a img,figure{vertical-align:top}abbr[title],dfn[title]{cursor:help}input,select{vertical-align:middle}noscript{margin:0}

/* Desktop Hide Items */
#trigger-overlay, #globalNav .GNHome, #spSTel, .spIM { display: none !important; }

/* -------------------------------------------
 Fonts
------------------------------------------- */
.LB02, .LB03, .TTA-article h4, #NC-list h4,
#books-message h3, #BD-data h1, #sales-type01 h3, .sales-type02 h3, #invitation h2, #tradeTerms,
#handled-shop h2, #about-books h2 span, #our-mission dt, #contact h1 em, #contact-completion h2,
#magazine-tit em, #news-tit em, #MagCategory-title, #privacy h1 em, #privacy h2, #MCNavi h5 {
 font-family: '游明朝', 'Yu Mincho', YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif, "HG明朝E", serif; }

.min, #about-books h2 span, #our-mission dt, #contact h1 em, #contact-completion h2,
#news-tit em, #magazine-tit em, #MagCategory-title, #privacy h1 em, #privacy h2, #tradeTerms {
 font-family: "source-han-serif-japanese"; }

@font-face { font-family: 'hypatia'; src: url('Hypatia-Sans-Pro.woff') format('woff'), url('Hypatia-Sans-Pro.ttf') format('truetype'); }
.hypatia, footer h4, footer small, #returnBT p, .LB01, .LB04, .books-list a:after, #NC-list #NCMagazine,
#our-mission h2, #company-info h2, #about-books h2 em, #compMessa { font-family: 'hypatia'; }

@font-face { font-family: 'hypatia-sm'; src: url('Hypatia-Sans-Pro-Semibold.woff') format('woff'), url('Hypatia-Sans-Pro-Semibold.ttf') format('truetype'); }

.hypatia-sm, #globalNav, footer nav, #global-top h2, #global-top h3, .tp-book-name:after, #global-top #top-magazine h2, #next-contents h3, #bookList h1, #books-message h2, #shop-invitation h2, #BDContents h2,
.digi-book em, #invitation h1, #handled-shop h2 em, #bmSign, #aboutTit, #contact h1,
#news-tit, #news-toplist small, #news-toplist time, #newsHead small, #newsHead time,
#magazine-tit, #magazineList time, #magazineHead time, #magazineHead .ind, #MCNInner h4, #privacy h1 {
 font-family: 'hypatia-sm'; }

#top-magazine h2, #books-message, #next-contents, #handled-shop h2, .HS-Guide, #about h1,
#company-info, .inp01, #mailformpro select, #mailformpro textarea, #MCNInner, #site-policy {
 text-shadow: rgba(255,255,255,1) 1px 1px 0; }

#handled-shop h2 em { text-shadow: none; }

/* -------------------------------------------
 Common Animation
------------------------------------------- */
#homeLogo:after, #globalNav a, #globalNav li:after {
  -webkit-transition: all .6s cubic-bezier(.075, .82, .165, 1); transition: all .6s cubic-bezier(.075, .82, .165, 1); }

#returnBT a, #returnBT a:after, .bottom-sns a,
a .TTAA time, a .TTAA p, a .TBLA p, a .TBLA time, a .TBLA h4, #PageNavi a {
 -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

footer li a, .books-list a:before, .TTAA p span:after, .TBLA h4 span:after, .link-bt a, .link-bt a:before,
#purchase-area p a, .invitationGuide a, .HS-Guide a, #HS-List a, #HS-List a:after,
#newsBody p a, #magazineList a h3, #magazineHead h2 a, #magazineHead h2 a:after,
#magazineBody p a, .categoryLink a, .categoryLink a:after, #contactGuide a, #MCNavi a,
#mailformpro .TFSend input, #mailformpro .TFReset input {
 -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

.books-list a:after {
 -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

.animated { -webkit-animation-fill-mode:both; animation-fill-mode:both; }
.animated.infinite { -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.fadeIn { -webkit-animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out .2s;
-webkit-animation-fill-mode:both; animation-fill-mode:both; }

@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
.fadeOut { -webkit-animation: fadeOut .6s ease-in-out; animation: fadeOut .6s ease-in-out;
-webkit-animation-fill-mode:both; animation-fill-mode:both; }

@-webkit-keyframes StStDraw {
	0% { -webkit-transform: scale(0,1); } 40% { -webkit-transform: scale(1,1); }
	55% { -webkit-transform: scale(1,1); } 100% { -webkit-transform: scale(1,0); } }
@keyframes StStDraw {
	0% { transform: scale(0,1); } 40% { transform: scale(1,1); }
	55% { transform: scale(1,1); } 100% { transform: scale(1,0); } }
	
@-webkit-keyframes StLetterIn { 50% { -webkit-transform: scaleX(1); } 100% { -webkit-transform: scaleX(0); } }
@keyframes StLetterIn { 50% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

@-webkit-keyframes textBlur01 {
 0% { -webkit-filter: blur(20px); -webkit-transform: scale(.8); opacity: 0; }
 100% { -webkit-filter: blur(0); -webkit-transform: scale(1); opacity: 1; } }
@keyframes textBlur01 {
 0% { filter: blur(20px); transform: scale(.8); opacity: 0; }
 100% { filter: blur(0); transform: scale(1); opacity: 1; } }
	
@-webkit-keyframes textIn01 { 20% { -webkit-transform: scaleX(1); } 100% { -webkit-transform: scaleX(0); } }
@keyframes textIn01 { 20% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

@-webkit-keyframes texLink01 { 0% { -webkit-transform: scale(0,1); } 100% { -webkit-transform: scale(1,1); } }
@keyframes texLink01 { 0% { transform: scale(0,1); } 100% { transform: scale(1,1); } }

@-webkit-keyframes slideIn01 {
	0% { -webkit-transform: translateX(-450px); } 100% { -webkit-transform: translateX(0); } }
@keyframes slideIn01 { 0% { transform: translateX(-450px); } 100% { transform: translateX(0); } }

@-webkit-keyframes ImIn {
 0% { -webkit-transform: scale(0,1); } 40% { -webkit-transform: scale(1,1); }
 60% { -webkit-transform: scale(1,1); } 100% { -webkit-transform: scale(0,1); } }
@keyframes ImIn {
 0% { transform: scale(0,1); } 40% { transform: scale(1,1); }
 60% { transform: scale(1,1); } 100% { transform: scale(0,1); } }

@-webkit-keyframes ImOut {
 0% { -webkit-transform: scale(0,1); } 30% { -webkit-transform: scale(1,1) }
 65% { -webkit-transform: scale(1,1); } 100% { -webkit-transform: scale(0,1); } }
@keyframes ImOut {
 0% { transform: scale(0,1); } 30% { transform: scale(1,1); }
 65% { transform: scale(1,1); } 100% { transform: scale(0,1); } }

/* Box Slide */
@-webkit-keyframes slideLeft {
 0% { -webkit-transform: translate3d(-50px,0,0); opacity: 0; } 100% { -webkit-transform:none; opacity: 1; } }
@keyframes slideLeft {
 0% { transform: translate3d(-50px,0,0); opacity: 0; } 100% { transform:none; opacity: 1; } }
.slideLeft { -webkit-animation: slideLeft .75s ease-in-out; animation: slideLeft .75s ease-in-out; }

@-webkit-keyframes slideRight {
 0% { -webkit-transform: translate3d(50px,0,0); opacity: 0; } 100% { -webkit-transform:none; opacity: 1; } }
@keyframes slideRight {
 0% { transform: translate3d(50px,0,0); opacity: 0; } 100% { transform:none; opacity: 1; } }
.slideRight { -webkit-animation: slideRight .75s ease-in-out; animation: slideRight .75s ease-in-out; }

/* Title Anim */
.st-st01, .st-st02, .st-st03 {
 position: absolute; left: 0; bottom: 0;
 background: #333; width: 100%; height: 100%; display: inline-block; z-index: 10;
 -webkit-animation: StStDraw 1s cubic-bezier(.075, .82, .165, 1) 0s;
 animation: StStDraw 1s cubic-bezier(.075, .82, .165, 1) 0s;
 -webkit-transform-origin: left bottom; transform-origin: left bottom;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.st-st03 { background: #ccc; }

.stInBlock, .stInBlock02, .stInBlock03 { display: inline-block; position: relative; }
.stInBlock { padding: 0 4px 7px 8px; }
.ie .stInBlock { padding: 3px 4px 5px 8px; }

.stInBlock:after, .stInBlock03:after {
 content: ''; position: absolute; bottom: 0; left: 0;
 background: #ccc; width: 100%; height: 3px; display: block; z-index: 5;
 -webkit-animation: texLink01 1s cubic-bezier(.075, .82, .165, 1) .1s;
 animation: texLink01 1s cubic-bezier(.075, .82, .165, 1) .1s;
 -webkit-transform-origin: left; transform-origin: left;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.stInBlock03 { padding-bottom: 9px; }
.stInBlock03:after { background: #494949; }

.st-letter-in { display: block; position: relative; }
.ie .st-letter-in { padding-top: 3px; }

.ie .stInBlock02 { padding-top: 8px; }

.st-letter-in {
 position: absolute; top: 0; right: 0; bottom: 0; background: #fff; width: 100%; height: 100%; z-index: 7; }
.st-letter-in.sl-gray { background: #f0f0f0; }
.st-letter-in.sl-f5 { background: #f5f5f5; }
.st-letter-in.sl-beige { background: #f9f7f4; }
.st-letter-in.beigeTit { background: #f5f2ec; }
.st-letter-in.sl-black { background: #000; }

.st-letter-in {
 transform: scaleX(1); -webkit-transform: scaleX(1);
 -webkit-animation: StLetterIn .5s cubic-bezier(.075, .82, .165, 1);
 animation: StLetterIn .5s cubic-bezier(.075, .82, .165, 1);
 -webkit-transform-origin: right; transform-origin: right;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

/* Text Blur Anim */
.tex-blur01 {
  -webkit-animation: textBlur01 1s cubic-bezier(.075, .82, .165, 1);
  animation: textBlur01 1s cubic-bezier(.075, .82, .165, 1);
  -webkit-transform-origin: center; transform-origin: center;
  -webkit-animation-fill-mode: both; animation-fill-mode: both; }

/* Text Slide Anim */
.texin-wh, .texin-f0, .texin-f5, .texin-beige, .texin-black:after {
 width: 100%; display: block; position: relative; }

.texin-wh:after, .texin-f0:after, .texin-f5:after, .texin-beige:after, .texin-black:after {
 content: ''; position: absolute; top: -1px; left: 0; z-index: 10;
 background: #fff; width: 100%; height: 100%; display: block;
 -webkit-animation: textIn01 1s ease-in-out .1s;
 animation: textIn01 1s ease-in-out .1s;
 -webkit-transform-origin: right; transform-origin: right;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.texin-f0:after { background: #f0f0f0; }
.texin-f5:after { background: #f5f5f5; }
.texin-beige:after { background: #f9f7f4; }
.texin-black:after { background: #000; }

/* Link Button Anim */
.link-bt { text-align: center; margin: 50px 0 0; position: relative; }

.link-bt-in { display: block; position: relative; }

.link-bt-in:after {
 content: ''; position: absolute; top: 0; left: 0; z-index: 30;
 background: #fff; width: 100%; height: 100%; display: block;
 -webkit-animation: StLetterIn 1s cubic-bezier(.075, .82, .165, 1);
 animation: StLetterIn 1s cubic-bezier(.075, .82, .165, 1);
 -webkit-transform-origin: right; transform-origin: right;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.LB04.link-bt-in:after { background: #f0f0f0; }

.link-bt a { color: #fff; text-decoration: none; background: #666; display: inline-block; position: relative; }
.link-bt a.LB03 { background: #999; }

.link-bt a:before {
 content: ''; position: absolute; top: 5%; left: .8%;
 background: #fff; width: 0; height: 90%; display: block;
 -webkit-animation: texLink01 1s cubic-bezier(.075, .82, .165, 1);
 animation: texLink01 1s cubic-bezier(.075, .82, .165, 1);
 -webkit-transform-origin: left; transform-origin: left;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.link-bt a:hover:before { width: 98.5%; }

.link-bt a span { z-index: 20; position: relative; }

.LB01, .LB02, .LB03, .LB04 {
 font-size: 2rem; letter-spacing: .2em;
 min-width: 250px; padding: .5em .75em; }
.LB02 { letter-spacing: .05em; }
.LB01, .LB04 { letter-spacing: .1em; padding: .6em .75em .4em; }

.ie .LB02, .ie .LB03, .edge .LB02, .edge .LB03 { padding: .45em .75em .55em; }
.ie .LB01, .ie .LB04 { padding: .725em .75em .275em; }
.edge .LB01, .edge .LB04 { padding: .625em .75em .375em; }
.win.firefox .LB01, .win.firefox .LB04 { padding: .475em .75em .525em; }
.win.firefox .LB02, .win.firefox .LB03 { padding: .46em .75em .54em; }

.link-bt a:hover { color: #333; }

.link-double { width: 620px; margin: 0 auto; }

/* Image Anim */
.image-slide {
 position: relative; display: inline-block; z-index: 5;
 -webkit-animation: slideIn01 .9s cubic-bezier(.075, .82, .165, 1) .25s;
 animation: slideIn01 .9s cubic-bezier(.075, .82, .165, 1) .25s;
 -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; }

a .TTAA img, a .TBLA img {
 -webkit-transform: scale(1); transform: scale(1);
 -webkit-transition: all 1.5s cubic-bezier(.075, .82, .165, 1); transition: all 1.5s cubic-bezier(.075, .82, .165, 1); }
a:hover .TTAA img, a:hover .TBLA img { -webkit-transform: scale(1.16); transform: scale(1.16); }

.im-in01, .im-out01 {
 position: absolute; top: 0; left: 0; background: #3e3e3e; width: 100%; height: 100%; display: block; }

.im-in01 {
 z-index: 1;
 -webkit-animation: ImIn .7s cubic-bezier(.075, .82, .165, 1);
 animation: ImIn .7s cubic-bezier(.075, .82, .165, 1);
 -webkit-transform-origin: top left; transform-origin: top left;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.im-out01 {
 z-index: 1;
 -webkit-animation: ImOut 1s cubic-bezier(.075, .82, .165, 1) .1s;
 animation: ImOut 1s cubic-bezier(.075, .82, .165, 1) .1s;
 -webkit-transform-origin: top right; transform-origin: top right;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.TTABG {
 position: absolute; top: 0; left: 0; z-index: 0;
 background: #fff; width: 440px; height: 290px; display: block; }

/* -------------------------------------------
 Common
------------------------------------------- */
body {
 position: relative; color: #333; background: #fff; -webkit-text-size-adjust: 100%; font-size: 1em;
 font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
 line-height: 1; width: 100%; min-width: 1000px; z-index: 1; }

.stage, #GHead, footer, #topBanner, #eyecatch { width: 100%; margin: 0; }

.homeLink:after {
 background-image: url(../common_im/site-logo.png);
 background-repeat: no-repeat; background-size: 480px auto; }

.bottom-sns span {
 background-image: url(../common_im/common@2x.png);
 background-repeat: no-repeat; background-size: 138px auto; }
 
.bg-beige { background: #f9f7f4; }

/* Contents Head */
.contents-head { margin-top: -50px; position: relative; }

.contents-head:before, .contents-head:after { content: ''; position: absolute; display: block; }
.contents-head:before { top: 0; left: 0; background: #f5f2ec; width: 100%; height: 150px; z-index: -1; }
.contents-head:after {
 top: 20px; left: 50%; background: #fff; width: 90%; height: 130px; margin-left: -45%; z-index: 1; }

.contents-st { font-size: 2.5rem; text-align: center; letter-spacing: .1em; margin: 0; position: relative; }
.contents-st .st-letter { margin-right: -.1em; }

.page-contents { position: relative; z-index: 5; }

/* Next Contents */
#next-contents { background: #f5f5f5; margin-top: 2px; padding: 44px 0 50px; }

#next-contents h3 { color: #555; font-size: 2.8rem; text-align: center; letter-spacing: .1em; margin: 0; }

#NC-list h4 { font-size: 2rem; font-weight: normal; letter-spacing: 0; }
#NC-list #NCMagazine { font-size: 2.2rem; letter-spacing: .1em; margin-bottom: -.15em; }
#NC-list #books-bn { letter-spacing: .2em; }
#NC-list #NCMagazine span:after { bottom: 4px; }
#NC-list h4 span { padding-bottom: 1px; }
#NC-list a small { color: #777; font-size: 1.4rem; letter-spacing: .075em; margin-top: .5em; display: block; }
#NC-list img { z-index: 1; }

/* page SNS Area */
.books-sns { text-align: right; margin-top: 10px; }

.twitter-share-button, .fb-share-button, .line-it-button {
 padding-left: 10px; vertical-align: top; display: inline-block; }

.news-sns { float: right; text-align: right; margin: 0; }

.magazine-sns { position: absolute; top: 0; right: 0; text-align: right; }

/* Flex Box */
.link-double, .books-list, #top-today-list, .top-blog-list, #all-books-list, #NC-list, #HS-List,
#magazineList, #news-toplist {
 display: flex; justify-content: space-between; flex-flow: row wrap; }

/* Title Image */
.titleImage { position: relative; width: 100%; margin: 0; padding-top: 65px; z-index: 5; }
.titleImage figure { width: 80%; max-width: 1100px; margin: 0 auto; position: relative; }
.titleImage img { width: 100%; height: auto; vertical-align: top; }

.titleImage:before {
 content: ''; position: absolute; top: 60%; left: 50%; margin-left: -45%;
 background: #f5f2ec; width: 90%; height: 62%; display: block; z-index: -2; }
.titleImage:after {
 content: ''; position: absolute; top: 60%; left: 50%; margin-left: -45%; z-index: -1;
 background: #fff; width: 90%; height: 62%; display: block;
 -webkit-animation: StLetterIn 1s cubic-bezier(.075, .82, .165, 1);
 animation: StLetterIn 1s cubic-bezier(.075, .82, .165, 1);
 -webkit-transform-origin: right; transform-origin: right;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

/* Other */
figure { overflow: hidden; } a img { vertical-align: top; }

.fLeft { float: left; } .fRight { float: right; }

.ls-30 { letter-spacing: -.3em; }
.ls05 { letter-spacing: .05em; }

/* Common Header
------------------------------------------- */
#GHead { overflow: hidden; position: relative; z-index: 200; }

#GHInner { min-width: 1000px; max-width: 1280px; height: 150px; margin: 0 auto; position: relative; }

#homeLogo {
 position: absolute; top: 0; left: 6%;
 width: 130px; height: 150px; margin: 0; position: relative; }
#global-top #homeLogo, #legal  #homeLogo { background: #4e351e; }
#books #homeLogo { background: #f97e00; }
#C-Magazine #homeLogo { background: #d91e80; }
#C-News #homeLogo { background: #d50e00; }
#about #homeLogo { background: #223ee5; }
#C-Contact #homeLogo { background: #007fe7; }
#Film #homeLogo { background: #22c700; }
#Sounds #homeLogo { background: #f7f700; }
#Shop #homeLogo { background: #8219e9; }
#Blog #homeLogo { background: #d91ee5; }

#homeLogo:after {
 content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #333;
 -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; }

#homeLogo:hover:after { transform: scaleY(1); }

.homeLink { position: relative; width: 100%; height: 100%; z-index: 10; }

.homeLink:after {
 content: ''; position: absolute; top: 25px; left: 27px; width: 76px; height: 100px; display: block; z-index: 10; }
#global-top .homeLink:after, #legal .homeLink:after { background-position: 0 0; }
#books .homeLink:after { background-position: -100px 0; }
#C-Magazine .homeLink:after { background-position: -200px 0; }
#C-News .homeLink:after { background-position: -300px 0; }
#about .homeLink:after { background-position: -400px 0; }
#C-Contact .homeLink:after { background-position: 0 -120px; }
#Film .homeLink:after { background-position: -100px -120px; }
#Sounds .homeLink:after { background-position: -200px -120px; }
#Shop .homeLink:after { background-position: -300px -120px; }
#Blog .homeLink:after { background-position: -400px -120px; }

/* Global nav */
#nav-wrapp { position: absolute; top: 43px; right: 40px; margin: 0; }
.ie #nav-wrapp, .edge #nav-wrapp { top: 44px; }

#globalNav { display: flex; justify-content: space-between; flex-flow: row wrap; margin: 0; padding: 0; }
 
#globalNav li { font-size: 1.7rem; letter-spacing: .12em; white-space: nowrap; margin: 0 1.5rem; position: relative; }

#globalNav li:after {
 content: ''; position: absolute; bottom: -8px; left: 0;
 background: #f5a737; width: 0; height: 2px; display: block; }
#globalNav li:hover:after { width: 100%; }

#globalNav .current:after { background: #79bbcc; width: 100%; }

#globalNav a:link, #globalNav a:visited { color: #222; text-decoration: none; }
#globalNav a:hover { color: #09b; }

#globalNav .current { color: #888; }

/* Return Button
------------------------------------------- */
#returnBT { position: fixed; bottom: 30px; right: 30px; margin: 0; z-index: 100; }

#returnBT p { margin: 0; position: relative; }

#returnBT a {
 color: #fff; background: rgba(0,0,0,.6); width: 70px; height: 70px; margin: 0;
 text-indent: -9999px; -webkit-border-radius: 50%; border-radius: 50%; position: relative; }
#returnBT:hover a { background: #3eb5cc; }

#returnBT p:after {
 content: 'TOP'; position: absolute; bottom: 22px; left: 0; display: block; cursor: pointer; z-index: 1000;
 color: #fff; font-size: 11px; text-align: center; text-indent: .1em; letter-spacing: .1em; width: 100%; }

#returnBT a:after {
 content: ''; position: absolute; top: 24px; left: 50%; cursor: pointer;
 width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; margin-left: -4px;
 -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#returnBT:hover a:after { top: 21px; }

/* Common Footer
------------------------------------------- */
footer { background: #444; height: 280px; }

.bottom-sns, footer ul { display: flex; justify-content: space-between; flex-flow: row wrap; margin: 0 auto; }

/* #3-icon#  .bottom-sns { width: 180px; } */
.bottom-sns { width: 120px; height: 32px; padding-top: 30px; }

.bottom-sns a { background: inherit; width: 42px; height: 42px; position: relative; }

.bottom-sns span { position: absolute; display: block; }

#BSFB span { top: 6px; left: 13px; background-position: -100px 0; width: 16px; height: 30px; }
#BSTW span { top: 8px; left: 2px; background-position: -100px -40px; width: 38px; height: 27px; }
#BSLI span { top: 6px; left: 5px; background-position: -100px -80px; width: 32px; height: 30px; }

#BSFB a:hover { background: #3a5897; }
#BSTW a:hover { background: #389ec5; }
#BSLI a:hover { background: #00b932; }

footer nav { padding-top: 6px; }

footer ul { margin: 0 auto; width: 460px; padding: 0; }

footer li { font-size: 1.4rem; letter-spacing: .075em; margin: 24px 20px 0; }
footer li.FNL { margin: 24px 10px 0; }

footer li a:link, footer li a:visited { color: #ccc; text-decoration: none; }
footer li a:hover { color: #7ee2ff; }

footer li a { padding-bottom: 4px; display: inline-block; position: relative; }

footer h4 {
 position: absolute; bottom: 65px; left: 0;
 font-size: 2.5rem; text-align: center; letter-spacing: .1em;
 width: 100%; margin: 0; }

footer h4 em {
 color: #fff; background: #222; font-style: normal; padding: 11px 10px 4px 12px; display: inline-block; }
.ie footer h4 em { padding: 13px 10px 2px 12px; }
.win.firefox footer h4 em { padding: 7px 10px 8px 12px; }

footer small {
 position: absolute; bottom: 40px; left: 0; color: #ccc;
 font-size: 1.1rem; text-align: center; letter-spacing: .06em;
 width: 100%; margin: 0; padding-top: 5px; }

/* -------------------------------------------
 Loader
------------------------------------------- */
#tp-loader {
 position: absolute; top: 0; left: 0; background: #ddd; 
 width: 100%; height: 520px; z-index: 100; }
 
#loader {
 position: absolute; top: 50%; left: 50%; color: #fff; text-align: center;
 width: 500px; margin-left: -250px; z-index: 101; }

@-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.loader {
 width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; display: inline-block; vertical-align: middle;
 border: solid .25rem #f5f5f5; border-top-color: #ff6347; border-left-color: #ff6347;
 -webkit-border-radius: 50%; border-radius: 50%;
 -webkit-animation: loader 750ms linear infinite; animation: loader 750ms linear infinite; }

/* -------------------------------------------
 Top Page
------------------------------------------- */
/* Top Banner */
#topBanner { background: #ddd; margin-top: -50px; position: relative; z-index: 20; }

#topEyecatch { width: 100%; max-width: 1280px; height: 520px; margin: 0 auto; overflow: hidden; position: relative; z-index: 1; }

/* Top Contents */
#global-top section { width: 100%; margin: 0 auto; padding: 44px 0; }
#global-top #top-news { padding-bottom: 50px; }

#top-recommended, #top-invitation { min-width: 1000px; max-width: 1280px; }

/* SubTitle */
#global-top h2, #global-top h3 {
 color: #444; font-size: 3rem; letter-spacing: .1em; text-align: center; width: 100%; margin: 0; position: relative; }

#global-top h2 .st-letter, #global-top h3 .st-letter { text-indent: .1em; }

/* Books List */
.books-list { max-width: 980px; margin: 30px auto 0; padding: 0 50px; }

.books-list li { text-align: center; width: 22%; margin: 0; }

.books-list figure { width: 146px; min-height: 200px; margin: 0 auto 12px; position: relative; overflow: hidden; }

.books-list figure img { width: 100%; height: auto; position: relative; }

.books-list small { font-size: 1.2rem; display: inline-block; -webkit-border-radius: 3px; border-radius: 3px; }

.p-book { background: #55bb4e; letter-spacing: .5em; padding: .5em .3em .35em .75em; }
.d-book { background: #f79533; letter-spacing: .1em; padding: .5em .65em .35em .75em;  }

.books-list a { color: #333; text-decoration: none; padding: 10px 0; position: relative; z-index: 1; }
#all-bookList a { padding: 15px 0; }

.books-list a small { color: #fff; }

.books-list a:before {
 content: ''; position: absolute; top: 0; left: 0; background: rgba(175,230,255,.3);
 width: 100%; height: 100%; display: block; opacity: 0; z-index: 2;
 -webkit-transform: scale(1,0); transform: scale(1,0);
 -webkit-transform-origin: top; transform-origin: top;
 -webkit-border-radius: 5px; border-radius: 5px; }
.books-list a:hover:before { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); }

.books-list a:after {
 content: 'Detail'; position: absolute; top: 50%; left: 50%;
 color: #fff; background: rgba(05,130,170,.9); font-size: 1.8rem; letter-spacing: .1em;
 margin: -1em 0 0 -2em; padding: .5em .4em .3em .5em; opacity: 0; z-index: 5;
 -webkit-border-radius: 4px; border-radius: 4px;  }
.books-list a:hover:after { opacity: 1; }

.books-list p { font-size: 1.4rem; letter-spacing: .05em; margin: .75em 0 0; }
.books-list p span { margin-top: .5em; display: block; }

.books-list a p span { color: #777; }

#all-bookList a p { color: #1e7200; font-weight: bold; }
#all-bookList a p span { color: #555; font-weight: normal; }
#all-bookList a em {
 color: #777; font-size: 1.3rem; font-style: normal; font-weight: normal; margin: 0; padding-top: .5em; display: block; }

/* Top Invitation */
#top-invitation { border-top: 1px solid #e5e5e5; }
#ti-guide { font-size: 1.5rem; text-align: center; letter-spacing: .075em; margin: 45px 0 10px; }

/* Top Magazine */
#top-magazine { background: #f0f0f0; }

#top-today-list, .top-blog-list, #NC-list, #news-toplist, #magazineList, #magazine-categoryNavi {
 max-width: 1000px; margin: 0 auto; padding: 30px 50px 0; }

.top-blog-list:after, #news-toplist:after, #magazineList:after {
 content: ''; width: 30%; max-width: 290px; display: block; }

.TTA-article { width: 45%; max-width: 440px; }

.TTA-article h4 { font-size: 1.6rem; text-align: center; letter-spacing: .1em; margin: 0; position: relative; }
.ie .TTA-article .texin-f0, .edge .TTA-article .texin-f0, .firefox .TTA-article .texin-f0 { padding-bottom: .1em; }

.TTAA figure, .TBLA figure { width: 100%; position: relative; overflow: hidden; }
.TTAA figure { text-align: center; height: 290px; margin: 15px 0; }
.TBLA figure { height: 190px; margin: 0; }

.TTAA img, .TBLA img { width: auto; max-width: 100%; height: auto; z-index: 1; }

.TTAA time, .TBLA time { font-size: 1.4rem; letter-spacing: .07em; }

.TTAA p { font-size: 1.6rem; line-height: 1.5; letter-spacing: .05em; margin: .5em 0 0; }

.TBL-article { width: 30%; max-width: 290px; }

.TBLA p { font-size: 1.4rem; margin: 15px 0 8px; letter-spacing: .05em; }
.TBLA p span { margin: .35em 0 0 .5em; display: inline-block; }

.TBLA time { padding-left: 12px; }
.TBLA h4 { font-size: 1.6rem; font-weight: normal; line-height: 1.5; letter-spacing: .05em; margin: 5px 0 0; }

#tn-list { padding-top: 40px; }

#tn-list figure, #NC-list figure { margin-bottom: 15px; }
#tn-list small { font-size: 1.4rem; }
#tn-list small:after { content: " / "; }
#tn-list time { padding: 0; }

.TTAA time:before, .TBLA p:before, #tn-list small:before { content: "- "; }

a .TBLA p { color: #727272; }

.TTAA p span, .TBLA h4 span { padding-bottom: 4px; display: inline-block; position: relative; }
.TTAA p span:after, .TBLA h4 span:after {
 content: ''; position: absolute; bottom: 0; left: 0;
 background: #f5a737; width: 0; height: 2px; display: block; }

.TTA-article a, .TBL-article a { text-decoration: none; }

a .TTAA time, a .TBLA time, #tn-list a small { color: #888; }
a .TTAA p, a .TBLA h4 { color: #444; }
a:hover .TTAA p, a:hover .TBLA h4, a:hover .TBLA p { color: #3ac; }

/* -------------------------------------------
 Slider Revolution
------------------------------------------- */
.tp-static-layers{position:absolute;z-index:505;top:0;left:0}.tp-caption.tp-hidden-caption,.tp-hide-revslider{visibility:hidden!important;display:none!important}.tp-caption{z-index:1;white-space:nowrap}.tp-caption-demo .tp-caption{position:relative!important;display:inline-block;margin-bottom:10px;margin-right:20px!important}.tp-simpleresponsive .caption,.tp-simpleresponsive .tp-caption{position:absolute;visibility:hidden;-webkit-font-smoothing:antialiased!important}.tp-simpleresponsive img{max-width:none}.tpclear{clear:both}.tp-bullets{z-index:1000;position:absolute;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;-webkit-transform:translateZ(5px)}.tp-bullets.hidebullets{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0}.tp-bullets.simplebullets.round{height:21px}.tp-bullets.simplebullets.round .bullet{cursor:pointer;position:relative!important;background:rgba(0,0,0,.5)!important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;width:5px!important;height:5px!important;border:8px solid transparent!important;display:inline-block;margin-right:5px!important;margin-bottom:0!important;-webkit-transition:background-color .2s,border-color .2s;-moz-transition:background-color .2s,border-color .2s;-o-transition:background-color .2s,border-color .2s;-ms-transition:background-color .2s,border-color .2s;transition:background-color .2s,border-color .2s;float:none!important;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}.tp-bullets.simplebullets.round .bullet.last{margin-right:0}.tp-bullets.simplebullets.round .bullet.selected,.tp-bullets.simplebullets.round .bullet:hover{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:#666!important;width:5px!important;height:5px!important;border:8px solid rgba(255,255,255,1)!important}.tparrows{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;-webkit-transform:translateZ(5000px);-webkit-transform-style:flat;-webkit-backface-visibility:hidden;z-index:600;position:relative}.tp-leftarrow.default,.tp-rightarrow.default{z-index:100;cursor:pointer;position:relative;width:40px;height:40px}.tparrows.hidearrows{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0}.tp-leftarrow.default{background:url(assets/large_left.png)}.tp-rightarrow.default{background:url(assets/large_right.png)}.tp-leftarrow:hover,.tp-rightarrow:hover{background-position:bottom left}.tp-bannertimer{width:100%;height:5px;background:url(assets/timer.png);position:absolute;z-index:200;top:0}.tp-bannertimer.tp-bottom{bottom:0;height:5px;top:auto}@media only screen and (min-width:0px) and (max-width:479px){.responsive .tp-bullets,.responsive .tparrows{display:none}}.tp-loader{top:50%;left:50%;z-index:10000;position:absolute}.tp-loader.spinner3{margin:-9px 0 0 -35px;width:70px;text-align:center}.tp-loader.spinner3 .bounce1,.tp-loader.spinner3 .bounce2,.tp-loader.spinner3 .bounce3{width:18px;height:18px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);border-radius:100%;display:inline-block;-webkit-animation:tp-bouncedelay 1.4s infinite ease-in-out;animation:tp-bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.tp-loader.spinner3 .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.tp-loader.spinner3 .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes tp-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes tp-bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}


/* BANNER CONTAINERS */
.tp-banner-container, .tp-banner { width:100%; height: 100%; position:relative; }

.tp-banner-container, .tp-banner-fullscreen-container { padding:0; }

.tp-banner ul { margin: 0; padding: 0; }

/* Banner Contents */
.tp-books { position: absolute; width: 100%; height: 100%; }

.tp-books img { width: 100%; height: 100%; }

.tp-book-name {
 position: absolute; top: 100px; left: 50%;
 background-image: url(../top_im/top_im@2x.png);
 background-repeat: no-repeat; background-size: 346px auto; }

#gita-name { background-position: 0 0; width: 268px; height: 80px; }
#hawaii-name { background-position: 0 -100px; width: 310px; height: 86px; }
#goku-name { background-position: 0 -200px; width: 346px; height: 80px; }

.tp-book-cover {
 position: absolute; right: 58%;
 -webkit-transform-origin: center; transform-origin: center;
 -webkit-box-shadow: 0 0 5px 4px rgba(255,255,255,.7);
 box-shadow: 0 0 5px 4px rgba(255,255,255,.7); }

.tp-book-cover img { width: 100%; height: auto; }
#tp-hawaii .tp-book-cover { top: 66px; width: 260px; height: 400px; }
#tp-gita .tp-book-cover, #tp-goku .tp-book-cover { top: 62px; width: 270px; height: 405px; }

.tp-books p { color: #333; font-size: 1.6rem; line-height: 1.5; letter-spacing: .075em; margin: 0; }
.tp-books p span {
 background: rgba(255,255,255,.75); margin: .1em 0; padding: .1em .5em 0 .75em; display: inline-block; }
.tp-books .spBlock { padding: 0; background: none; margin: 0; }

.tp-books .dBlock { margin-top: .75em; }
.tp-books .pad05 { padding-left: .5em; }
.tp-books .ml-01 { margin-left: -1em; padding-left: 0; }

.tp-copy { position: absolute; left: 50%; }
#tp-hawaii .tp-copy { top: 42%; }
#tp-gita .tp-copy { top: 50%; }
#tp-goku .tp-copy { top: 50%; }

/* -------------------------------------------
 Books Top
------------------------------------------- */
#bookList { padding: 65px 0 35px; }

#bookList h1 {
 color: #333; font-size: 3.5rem; font-weight: normal; text-align: center; letter-spacing: .15em; margin: 0; }

#bookList h1 em {
 color: #fff; background: #d2c2ae; font-size: 1.4rem; font-style: normal; font-weight: normal;
 width: 200px; margin: 6px auto 0; padding: .2em 0 .3em; display: block; }

#bookList h1 .st-letter { text-indent: .15em; }

#purchaseGuide { font-size: 1.6rem; text-align: center; letter-spacing: .12em; margin: 40px 0 0; }

/* Books Message */
#books-message { padding: 44px 0 50px; }

#books-message h3 {
 font-size: 4rem; font-weight: normal; text-align: center; letter-spacing: .1em; margin: 40px 0 35px; }
#books-message h3 span { margin-right: -.1em; display: inline-block; }

#books-message p {
 font-size: 1.6rem; line-height: 1.8; text-align: center; letter-spacing: .1em; margin: .75em 0 0; }

#books-message p#bmSign { font-size: 1.8rem; width: 41em; text-align: right; margin: 0 auto; }

/* Books Invitation */
#shop-invitation { padding: 44px 0 50px; }

#shop-invitation h2 {
 color: #555; font-size: 2.8rem; font-weight: normal; text-align: center;
 letter-spacing: .1em; margin: 0; position: relative; }

/* -------------------------------------------
 Books Detail
------------------------------------------- */
#booksDetail { padding-top: 70px; }

#BDContents h2 {
 color: #fff; font-size: 1.8rem; text-align: center; letter-spacing: .25em; margin: 0; position: relative; }
#BDContents h2 .stInBlock02 { background: #d2c2ae; width: 196px; padding: .75em 0 .5em .2em; }
.ie #BDContents h2 .sstInBlock02 { padding: .85em 0 .4em .2em; }
.edge #BDContents h2 .stInBlock02 { padding: .75em 0 .45em .2em; }

#BDC-inner { width: 960px; margin: 60px auto 0; padding-bottom: 60px; position: relative; }

#BD-data { float: right; width: 490px; }

.BD-type01 { padding-top: 0; }
.BD-type02 { padding-top: 20px; }

#BD-data h1 {
 color: #1e7200; font-size: 3.5rem; font-weight: normal; letter-spacing: .1em;
 margin: 0 0 20px; display: inline-block; position: relative; }

#BD-data h1 small { color: #3e3e3e; font-size: 2.8rem; letter-spacing: .05em; vertical-align: .05em; }
#BD-data h1 .st-st02 { padding: 0; }
#BD-data h1 .pad { padding-bottom: .2em; }

#BD-data h1 #bdh-block { font-size: 2.2rem; margin-top: .5em; display: block; }

#BD-data p { font-size: 1.6rem; line-height: 1.8; letter-spacing: .075em; margin: 20px 0 0; }

#book-data { margin-top: 30px; position: relative; }
#digi-book-data { margin-top: 20px; position: relative; }

#book-data ul, #digi-book-data ul { width: 250px; margin: 0; padding: 0; }
#digi-book-data ul { padding-bottom: 20px; }

#book-data li, #digi-book-data li { font-size: 1.4rem; line-height: 2; letter-spacing: .075em; }

#purchase-area { position: absolute; top: 0; right: 0; width: 210px; }

#purchase-area p { font-size: 1.5rem; line-height: 1; letter-spacing: .075em; margin: 10px 0 15px; }
#digi-book-data p { margin: .5em 0 0; position: relative; }

#purchase-area p a:link, #purchase-area p a:visited { color: #09b; text-decoration: none; }
#purchase-area p a { opacity: 1; }
#purchase-area p a:hover { opacity: .7; }
#purchase-area p .bccks-bt:hover { opacity: 1; }
.texLink a { padding: 2px 0 3px; display: inline-block; position: relative; }

.book-cover { float: left; }
.book-cover img { width: 100%; height: auto; vertical-align: top; }

#BC270 { width: 270px; margin-left: 110px; }
#BC300 { width: 300px; margin-left: 90px; }
#BC320 { width: 320px; margin-left: 70px; }

#sales-type01, .sales-type02, .BD-list-link, .digi-list-link, .digi-list-link02 {
 width: 960px; margin: -25px auto 40px; padding-top: 40px; border-top: 1px solid #f2e4cc; }
.sales-type02, .BD-list-link { margin-top: 0; }
.BD-list-link, .digi-list-link, .digi-list-link02 { padding-top: 5px; }
.digi-list-link { margin-top: -30px; }
.digi-list-link02 { margin-top: -10px; }

#sales-type01 h3, .sales-type02 h3 {
 font-size: 2rem; text-align: center; letter-spacing: .1em; margin: 0 0 25px; }
#sales-type01 p, .sales-type02 p, .digi-book-guide p {
 font-size: 1.6rem; line-height: 1.8; letter-spacing: .075em; width: 45.5em; margin: .7em auto 0; }

#sales-type01 .sec, .sales-type02 .sec { margin-top: 2.5em; }

.sales-type02 a { position: relative; }

#sales-type01 .center, .sales-type02 .center { text-align: center; }

#SThanks { margin: 0 auto; padding: 1.5em 8em 0; }
#SThanks li {
 font-size: 1.5rem; line-height: 2.2; white-space: nowrap; margin: 0; padding: 0 .75em; display: inline-block; }

.digi-book { font-size: 1.4rem; letter-spacing: .1em; margin: 0 0 12px; }

.digi-sign {
 color: #fff; background: #f79533; margin-right: .75em; padding: .6em .6em .3em .7em; display: inline-block; }
.digi-book em { color: #666; font-size: 1.8rem; vertical-align: -.1em; }

.digi-book-guide { margin-top: -30px; padding-bottom: 45px; }

.bccks-bt {
 color: #333; background: #ffc977; font-size: 16px; font-weight: bold; letter-spacing: .075em;
 padding: .5em .6em .3em .75em;  }

.bccks-bt:link, .bccks-bt:visited { color: #333; text-decoration: none; }
.bccks-bt:hover { color: #fff; background: #7ec7dd; }

/* -------------------------------------------
 Invitation
------------------------------------------- */
#invitation { padding: 65px 0 50px; }

#invitation h1, #invitation h2, #tradeTerms, #handled-shop h2 {
 color: #333; font-size: 3.5rem; text-align: center; letter-spacing: .1em; margin: 0; position: relative; }
#invitation h1 b { margin-left: .1em; }

#invitation h1 em, #handled-shop h2 em {
 color: #fff; background: #d2c2ae; font-size: 1.4rem; font-style: normal; font-weight: bold;
 letter-spacing: .15em; width: 230px; margin: 4px auto 0; padding: 2px 0 4px; display: block; }
#invitation h1 em span { letter-spacing: 0; }
#handled-shop h2 em { width: 200px; margin-top: 12px; padding: 4px 0 0; }

#invitation h1 { font-weight: normal; }
#invitation h2 { font-size: 2.5rem; letter-spacing: .1em; margin-top: 50px; }

.invitationGuide { margin: 35px auto 0; }

.invitationGuide p, .invitationGuide dl, .HS-Guide {
 font-size: 1.6rem; line-height: 2; letter-spacing: .12em; max-width: 42em; margin: 1em auto 0; }

.invitationGuide  p.IGPad { max-width: 38em; }
.IGPad span { color: #7e4400; }

#tradeTerms { color: #663500; font-size: 2.2rem; margin-top: 1.5em; }

.invitationGuide dl { padding: .25em 0 0 6em; }

.invitationGuide dt { float: left; color: #7e4e00; width: 7em; }

#handled-shop { padding: 50px 0; }

#handled-shop h2 { font-weight: normal; margin-bottom: 40px; }

.HS-Guide { width: 41em; }

.invitationGuide a, .HS-Guide a, #HS-List a {
 text-decoration: none; display: inline-block; position: relative; }

#HS-List { max-width: 1000px; margin: 15px auto 0; padding: 0 50px; }

#HS-List div {
 background: #fff; color: #4e4e4e; letter-spacing: .075em;
 width: 42%; margin: 25px 0 0; padding: 25px 30px; border: 1px solid #ddd;
 -webkit-border-radius: 6px; border-radius: 6px; }

#HS-List h3 { font-size: 1.8rem; line-height: 1.5; margin: 0; }

#HS-List p { font-size: 1.5rem; line-height: 1.6; margin: .4em 0 0; }

#HS-List .telNum { line-height: 1; margin-top: .2em; }

#HS-List a { padding-right: 12px; }

.invitationGuide a:link, .invitationGuide a:visited,
.HS-Guide a:link, .HS-Guide a:visited,
#HS-List a:link, #HS-List a:visited { color: #08a; }

.invitationGuide a:hover, .HS-Guide a:hover, #HS-List a:hover { color: #3eb5cc; }

#HS-List a:after {
 content: ''; position: absolute; top: 9px; right: 0;
 width: 5px; height: 5px; display: block;
 border-top: 2px solid #79a5b5; border-right: 2px solid #79a5b5;
 -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#HS-List a:hover:after { right: -5px; border-color: #f5a737; }

#HS-List #in-preparation {
 background: #fff; font-size: 1.6rem; line-height: 1; text-align: center; letter-spacing: .1em;
 width: 800px; margin: 30px auto 0; padding: 2em 0;
 -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #ddd; }

/* -------------------------------------------
 ABOUT
------------------------------------------- */
#about { position: relative; z-index: 5; }

#aboutTit, #about-books h2, #company-info h2, #our-mission h2 {
 color: #333; text-align: center; letter-spacing: .1em; margin: 0; }

#aboutTit { font-size: 4.2rem; font-weight: normal; margin-top: 2.5%; z-index: 10; position: relative; }
#aboutTit .st-letter { text-indent: .1em; }

#aboutTIcap {
 position: absolute; bottom: 15px; left: 15px; z-index: 10; text-shadow: rgba(0,0,0,.8) 0 0 3px;
 color: #fff; font-size: 1.2rem; letter-spacing: .075em; margin: 0; }

#our-mission {
 background: #000; margin-top: -30px; padding: 120px 0 70px; position: relative;
 border-bottom: 1px solid #fff; overflow: hidden; }

#our-mission h2 { color: #ccc; z-index: 5; position: relative; }
#our-mission dl {
 color: #d2d2d2; letter-spacing: .15em; width: auto;
 margin-top: 50px; padding-left: 48%; position: relative; z-index: 1; }
#our-mission dt { font-size: 2.2rem; margin: 0; }
#our-mission dd { font-size: 1.6rem; margin: 0; padding: 1em 0 2.2em 1.8em; }

#our-mission .texin-black:after { height: 95%; overflow: hidden; }

#our-mission figure { position: absolute; top: 140px; right: 58%; width: 350px; height: 350px; z-index: 1; }
#our-mission img { width: 100%; height: auto; }

#company-info, #about-books { padding: 70px 0 65px; }

#company-info h2, #our-mission h2 { font-size: 3.5rem; letter-spacing: .1em; }
#company-info h2 .st-letter, #our-mission h2 .st-letter { text-indent: .1em; }

#company-info .stInBlock { padding-bottom: 12px; }

#compLogo {
 background: url(../about/images/logo02.png) no-repeat center top;
 background-size: 240px auto; width: 240px; height: 210px; margin: 50px auto 0; }

#compMessa { color: #69523e; font-size: 2.8rem; text-align: center; letter-spacing: .1em; margin: 36px auto 0; }

#company-info dl {
 font-size: 1.6rem; line-height: 2; letter-spacing: .1em; width: 39.5em; margin: 24px auto 0; }
#company-info dt { float: left; margin: 0; padding-top: 1em; }
#company-info dd { margin: 0; padding: 1em 0 0 7em; }
#company-info small { font-size: 1.3rem; }

#about-books h2 em { font-size: 3.3rem; font-style: normal; letter-spacing: .1em; }
#about-books h2 span { font-size: 3.1rem;  letter-spacing: 0; }

#aboutGuide { margin: 40px auto 0; }
#aboutGuide p { font-size: 1.6rem; text-align: center; line-height: 2.5; letter-spacing: .12em; margin: 0 auto; }

/* -------------------------------------------
 Contact
------------------------------------------- */
#contact { padding: 80px 0 60px; }

#contact h1 {
 color: #333; font-size: 4rem; font-weight: normal; text-align: center; letter-spacing: .15em;
 margin: 0; position: relative; }

#contact h1 em {
 color: #fff; background: #d2c2ae; font-size: 1.4rem; font-style: normal; font-weight: normal;
 letter-spacing: .1em; width: 236px; margin: 6px auto 0; padding: .2em 0 .3em; display: block; }

#contact h1 .st-letter { text-indent: .1em; }

#contactGuide { font-size: 1.6rem; text-align: center; line-height: 2; letter-spacing: .1em; margin: 40px 0 0; }

#contactGuide a { text-decoration: none; display: inline-block; position: relative; }

#contact-form { width: 720px; margin: 40px auto 0; }

#form-caution { padding: 1em 0 .75em; border-top: 2px solid #eee; border-bottom: 2px solid #eee; }

#CFRequiredGuide, #CFOptionalGuide {
 font-size: 1.5rem; letter-spacing: .1em; margin: 1.5em 0; padding-left: 37px; position: relative; }

#CFOptionalGuide small { color: #895222; font-size: 1.4rem; }

/* Form */
#mailformpro { padding-top: 5px; }

#mailformpro p {
 font-size: 1.8rem; letter-spacing: .1em; margin: 0; padding: 30px 15px; position: relative; }

#mailformpro p.MFCaution { padding-bottom: 0; }

#mailformpro label span { padding: 1em 0 0 22px; display: inline-block; }

#mailformpro .required:after, #mailformpro .optional:after,
#CFRequiredGuide:after, #CFOptionalGuide:after {
 content: '';  position: absolute; top: 2.85em; left: 15px; display: block;
 -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#CFRequiredGuide:after, #CFOptionalGuide:after { top: .185em; }

#mailformpro .required:after, #CFRequiredGuide:after {
 width: 11px; height: 5px; border-left: 2px solid #f02e00; border-bottom: 2px solid #f02e00; }

#mailformpro .optional:after, #CFOptionalGuide:after { width: 8px; height: 8px; background-color: #44b73e; }

.inp01, #mailformpro select, #mailformpro textarea {
 color: #079; background: #eee; font-size: 100%; letter-spacing: .1em;
 margin: 0; padding: 15px 10px; border: none; outline: none; -webkit-border-radius: 5px; border-radius: 5px; }

.inp01, textarea { float: right; width: 450px !important; }
#mailformpro select { float: right; width: 470px; height: 2.84em; }

#mailformpro small {
 color: #895222; font-size: 1.4rem; letter-spacing: .05em; padding: 30px 0 0 220px; display: block; }
#mailformpro small span { color: #f02e00; font-size: 129%; margin-right: 4px; vertical-align: top; }
#mailformpro textarea { height: 12em !important; }

#MF-BTArea { width: 470px; padding: 0 15px 0 235px; }

#mailformpro p.TFSend, #mailformpro p.TFReset { background: transparent; padding: 0; }

#mailformpro .TFSend input, #mailformpro .TFReset input {
 color: #fff; font-size: 1.8rem; line-height: 2; font-weight: bold; letter-spacing: .1em;
 width: 45%; text-transform: uppercase; margin-top: 45px; padding: .5em 0 .5em .1em;
 border: none; outline: none; cursor: pointer;
 -webkit-appearance: none; -webkit-border-radius: 5px; border-radius: 5px; }

#mailformpro .TFSend input { float: left; background-color: #27a2d2; }
#mailformpro .TFSend input:hover { background-color: #f46000; }

#mailformpro .TFReset input { float: right; background-color: #999; }
#mailformpro .TFReset input:hover { background-color: #777; }

/* Completion */
#contact-completion { width: 776px; margin: 0 auto; padding-bottom: 20px; }

#contact-completion h2 { font-size: 3rem; text-align: center; letter-spacing: .12em; margin: 60px 0 50px; }
#contact-completion p { font-size: 1.6rem; line-height: 2; letter-spacing: .12em; margin: 1.5em 0 0; }
#contact-completion b { color: #c04e00; font-weight: normal; }

/* Mail Form */
div#mfp_hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0}div#mfp_hidden input{margin:10px}div.mfp_thanks{padding:30px}div.mfp_thanks p{line-height:1.7em}div.mfp_thanks ul.mfp_caution{margin:0;padding:0}div.mfp_thanks ul.mfp_caution li{display:block;color:#C00;margin:0;padding:5px 0}div#mfp_thanks{text-align:center;font-size:18px;padding:20px 0}div#mfp_thanks strong{color:#C00;font-size:24px}div#mfp_loading_screen{z-index:20000;opacity:.8;display:none;background-color:#000;position:absolute}div#mfp_loading{z-index:20001;position:absolute;display:none;width:40px;height:40px;background-image:url(../contact/images/mfp_loading.gif)}div.mfp_buttons{clear:both;padding:16px 0;text-align:center}div.mfp_buttons button#mfp_button_cancel,div.mfp_buttons button#mfp_button_send{color:#fff;font-size:1.8rem;background-color:#0e99c2;line-height:2;letter-spacing:.15em;font-weight:700;text-transform:uppercase;margin:.5em 15px;padding:2px 12px 2px 15px;border:none;-webkit-border-radius:4px;border-radius:4px;cursor:pointer}div.mfp_buttons button#mfp_button_send:hover{background-color: #00ae1e}div.mfp_buttons button#mfp_button_cancel{letter-spacing:0;background-color:#777}div.mfp_buttons button#mfp_button_cancel:hover{color:#333;background-color:#e5e5e5}div.mfp_buttons button.imagebutton{margin:0;padding:0;border:none;outline:0;background:0 0}div#mfp_warning{background-color:#FEE;border:1px solid red;padding:10px;display:none}div#mfp_warning p{padding:0;margin:0;font-size:14px;text-align:center}div#mfp_warning p strong{font-size:18px;color:red}button.mfp_next,button.mfp_prev{font-size:18px;margin:10px;padding:5px 10px}button.mfp_next{float:right}button.mfp_prev{float:left}ul#mfp_phase_stat{padding:10px}ul#mfp_phase_stat li{float:left;padding:8px 15px;border-radius:3px;margin:5px;list-style:none;font-size:14px}ul#mfp_phase_stat li.mfp_phase_arrow{box-shadow:none;padding:8px 5px}ul#mfp_phase_stat li.mfp_active_phase{background-color:#E8EEF9;box-shadow:0 0 5px #000}ul#mfp_phase_stat li.mfp_inactive_phase{background-color:#CCC;color:#666;box-shadow:0 0 5px #CCC}div.mfp_err{float: right;width: 460px;background:url(../contact/images/mfp_error.gif) no-repeat 0 1px;color:#d73300;font-size:1.4rem;letter-spacing:.075em;margin: 12px 0 0 0;padding:2px 0 0 20px;display:none}.problem,#mailformpro textarea.problem{background-color:#fcc;}.mfp_parent_error{border:2px solid red}div#mfp_error{background-color:#FEE;border:1px solid red;padding:10px;display:none}div#mfp_error p{padding:0;margin:0;font-size:14px;text-align:center}div#mfp_error p strong{font-size:18px;color:red}table#mfp_confirm_table{border-spacing:0;border-collapse:collapse;width:100%}table#mfp_confirm_table tr.mfp_colored{background-color:#F6F7F9}div#mfp_overlay_inner,table#mfp_confirm_table tr.mfp_achroma{background-color:#FFF}table#mfp_confirm_table tr td,table#mfp_confirm_table tr th{text-align:left;font-size:1.6rem;letter-spacing:.1em;border-top:solid 1px #CCC;padding:10px 12px}table#mfp_confirm_table tr th{white-space:nowrap;width:200px}table#mfp_confirm_table tr td{line-height:1.5em;word-break:break-all}div#mfp_phase_confirm{clear:both}div#mfp_phase_confirm h4{font-size:36px;padding:10px 0 0;text-align:center}div#mfp_overlay{position:absolute;display:none;z-index:10001}div#mfp_overlay_inner{color:#333;padding:15px;margin:10% auto 0;border-radius:5px;box-shadow:0 0 10px #000;width:640px}div#mfp_overlay_inner h4{color:#d23900;font-size:2rem;letter-spacing:.1em;text-align: center}div#mfp_overlay_background{background-color:#000;position:absolute;display:none;z-index:10000}.mfp_ok {display:none}

/* -------------------------------------------
 Magazine & News
------------------------------------------- */
#magazine, #news { padding: 80px 0 60px; }

#magazine-tit, #news-tit {
 color: #333; font-size: 4rem; font-weight: normal; text-align: center; letter-spacing: .1em; margin: 0; }

#magazine-tit em, #news-tit em {
 color: #fff; background: #d2c2ae; font-size: 1.4rem; font-style: normal; font-weight: normal;
 width: 240px; margin: 6px auto 0; padding: .2em 0 .3em; display: block; }
#news-tit em { letter-spacing: 0; width: 336px; }

#magazine-tit .st-letter { text-indent: .12em; }
#news-tit .st-letter { text-indent: .035em; }

/* Magazine Top */
.ML-article , .NT-article { width: 30%; max-width: 290px; margin-top: 30px; }
.ML-article a, .NT-article a { text-decoration: none; }

#magazineList figure, #news-toplist figure { margin-bottom: 15px; }
#magazineList small, #magazineHead small {
 font-size: 1.4rem; letter-spacing: .2em; padding: .4em .4em .1em .5em; display: inline-block; }

#magazineList h3, #magazineHead h2 {
 font-size: 1.6rem; line-height: 1.4; letter-spacing: .05em; width: auto; margin: 0; padding: .1em 0 0 3.5em; }

#magazineList a h3 { color: #666; }
#magazineList a:hover h3 { color: #3eb5cc; }

#magazineList time { font-size: 1.5rem; padding: 10px 0 0; display: block; }

#magazineList p { font-size: 1.6rem; line-height: 1.6; margin: 5px 0 0; }
#magazineList p:before { content: ''; }

#magazineList a p { color: #444; }

a .seriesSign, #magazineHead .seriesSign { float: left; background: #f78962; color: #fff; }
a .shotSign, #magazineHead .shotSign { background: #fef579; color: #8c7e00; }
#magazineHead .shotSign.ind { float: left; letter-spacing: .1em; }

#news-toplist time, #newsHead time { font-size: 1.6rem; margin-left: .5em; padding: 0; }

a #magazineList time, a #news-toplist time { color: #888; }

#magazineList p span { position: relative; padding-bottom: 2px; }

#magazineList p span:after, .categoryLink a:before {
 content: ''; position: absolute; bottom: 0; left: 0;
 background: #f5a737; width: 0; height: 2px; display: block; }

/* Category Navi */
#MCNInner { background: #f9f7f4; padding: 40px 50px 30px; -webkit-border-radius: 6px; border-radius: 6px; }

#MCNInner h4 { font-size: 2.6rem; text-align: center; letter-spacing: .1em; margin: 0; position: relative; }

#MCNavi ul { display: flex; justify-content: center; flex-flow: row wrap; margin: 0; padding: 20px 0 0; }

#MCNavi li {
 font-size: 1.6rem; letter-spacing: .1em; margin: 0 1em 0 .9em; padding: .75em 0 .5em;
 white-space: nowrap; display: inline-block; }

#MCNavi li span { font-size: 1.2rem; letter-spacing: 0; vertical-align: .1em; }

#MCNavi a { text-decoration: none; position: relative; }
#MCNavi a:link, #MCNavi a:visited { color: #753700; }
#MCNavi a:link span, #MCNavi a:visited span { color: #888; }

.CNHusSub { background: #fff; margin: 15px 0 0; -webkit-border-radius: 6px; border-radius: 6px; }

.CNHusSub p { font-size: 1.6rem; text-align: center; letter-spacing: .1em; margin: 0; padding-top: 1em; }

#MCNavi .CNSubCat { padding: .5em 0; }
#MCNavi .CNSubCat li { padding: .4em 0; }

.catLDQ, .catRDQ { font-size: 1.8rem; }
.catLDQ { margin-right: 3px; }

#MCNavi p a:link, #MCNavi p a:visited { color: #777; }

#MCNavi ul.texin-beige:after { padding-bottom: 4px; }

/* CML List Page Navi */
#PageNavi { max-width: 1000px; margin: 0 auto; padding: 25px 0 15px; }
#C-News #PageNavi { padding: 30px 0 0; }

#PageNavi ul { text-align: center; margin: 0; padding: 0; }
#PageNavi li { font-size: 1.6rem; margin: 9px 0 0 9px; display: inline-block; }

#PageNavi a, .current_page {
 background: #fff; padding: .5em .65em; border: 2px solid #66b7d2;
 display: inline-block; cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; }

#PageNavi a:link, #PageNavi a:visited { color: #0097b7; text-decoration: none; }
#PageNavi a:hover { color: #fff; background: #0097b7; border-color: #0097b7; }

.current_page { color: #f9f9f9; background: #b7c2cc; border-color: #b7c2cc; display: inline-block; }

/* News Top */
#news-toplist { padding-top: 30px; }

#newsHead small, .NT-article small{
 font-size: 1.6rem; letter-spacing: .05em; padding: .4em .45em .1em .5em; display: inline-block; }

.newsSign { background: #d5eef9; }
a .newsSign, #newsHead .newsSign { color: #0072bb; }
.eventSign { background: #fef579; }
a .eventSign, #newsHead .eventSign { color: #8c7e00; }

/* Individual */
#magazineAsset, #newsAsset { width: 800px; margin: 0 auto; }

#magazineHead, #newsHead { margin: 40px 0 0; position: relative; }

#magazineHead h1, #newsHead h1 { font-size: 2.5rem; line-height: 1.4; letter-spacing: .06em; margin: .4em 0 0; }
#newsHead h1 { margin-top: 1em; }

#magazineHead h2 a { text-decoration: none; padding-right: 15px; display: inline-block; position: relative; }
#magazineHead h2 a:after, .categoryLink a:after {
 content: ''; position: absolute; top: .375em; right: 3px; width: 5px; height: 5px;
 border-top: 2px solid #07b; border-right: 2px solid #07b;
 -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#magazineHead h2 a:hover:after { right: 0; border-color: #f72c1e; }

#magazineHead time, #newsHead time { letter-spacing: .1em; color: #888; }
#magazineHead time { font-size: 1.6rem; padding: 1.2em 0 0; display: block; }

#magazineBody, #newsBody { margin-top: 3.2rem; }
#magazineBody p, #newsBody p { font-size: 1.5rem; line-height: 2; letter-spacing: .1em; margin: 1.5em 0 0; }
#magazineBody p a, #newsBody p a { position: relative; text-decoration: none; }
#magazineBody img, #newsBody img { vertical-align: top; }
#magazineBody .texin-wh, #newsBody .texin-wh { padding-bottom: 1px; }

.categoryLink {
 font-size: 1.6rem; font-weight: bold; letter-spacing: .1em; white-space: nowrap;
 margin: 1.5em 0 -30px; padding-top: 2em; border-top: 1px solid #ddd; }
.categoryLink a { padding: 0 15px 4px 0; display: inline-block; position: relative; }

.categoryLink a:after { top: .25em; }
.categoryLink a:hover:after { right: 0; border-color: #f72c1e; }

/* Category */
#MagCategory-title {
 color: #773e00; font-size: 3.5rem; font-weight: bold; text-align: center;
 letter-spacing: .1em; margin: 45px 0 0; }

.MCTopCatname {
 font-size: 3rem; font-style: normal; letter-spacing: .035em; padding-bottom: .5em; display: inline-block; }
.MCTopCatname:before { content: '- '; }
.MCTopCatname:after { content: ' -'; }

#MagCategory-title span { color: #333; font-size: 2.5rem; letter-spacing: 0; margin-left: .2em; vertical-align: .1em; }

/* -------------------------------------------
Privacy Policy
------------------------------------------- */
#privacy { letter-spacing: .1em; padding-top: 65px; }

#privacy h1, #privacy h2 {
 color: #333; font-size: 3.5rem; font-weight: normal; text-align: center; margin: 0; }

#privacy h1 em {
 color: #fff; background: #d2c2ae; font-size: 1.4rem; font-style: normal; font-weight: bold;
 letter-spacing: 0; width: 308px; margin: 4px auto 0; padding: 2px 0 4px; display: block; }

#privacy h1 .st-letter { text-indent: .1em; }

#privacy-policy { padding: 50px 0 60px; }
#site-policy { padding: 60px 0; }

#privacy h2 { font-size: 2.5rem; }
#privacy h2 .stInBlock { text-indent: .1em; padding: 0 4px 13px 8px; }

#privacy dl { width: 800px; margin: 36px auto 0; }
#privacy dt { font-size: 1.6rem; font-weight: bold; margin: 3rem 0 0; }
#privacy dd { font-size: 1.5rem; line-height: 1.8; margin: 0; padding: 1rem 0 0 1.6rem; }
#privacy dd a { display: inline-block; position: relative; }

#privacy ul { margin: 0; padding: 1rem 0 0 3.2rem; list-style-type: circle; }

.legalSign, .policySign {
 font-size: 1.5rem; text-align: center; width: 800px;
 margin: 2rem auto 0; padding-top: 2rem; border-top: 2px solid #e5e5e5; }

/* -------------------------------------------
 Link Hover
------------------------------------------- */
#privacy dd a,#contactGuide a:link, #contactGuide a:visited,
#magazineBody p a:link, #magazineBody p a:visited, #magazineHead h2 a:link, #magazineHead h2 a:visited,
#newsBody p a:link, #newsBody p a:visited, .categoryLink a:link, .categoryLink a:visited,
.sales-type02 a:link, .sales-type02 a:visited {
 color: #07b; text-decoration: none; }

#privacy dd a:hover, #contactGuide a:hover, #magazineBody p a:hover, #magazineHead h2 a:hover,
#newsBody p a:hover, .categoryLink a:hover, #MCNavi a:hover, #MCNavi p a:hover, .sales-type02 a:hover {
 color: #3eb5cc; }


footer li a:after, .texLink a:before, .TTAA p span:after, .TBLA h4 span:after,
.invitationGuide a:before, .HS-Guide a:before, #HS-List a:before, #contactGuide a:before,
#privacy dd a:before, #magazineList p span:after,#magazineHead h2 a:before, #magazineBody p a:before,
#newsBody p a:before, .categoryLink a:before, #MCNavi a:before, .sales-type02 a:after {
 content: ''; position: absolute; bottom: 0; left: -1px;
 background: #f5a737; width: 0; height: 2px; display: block;
 -webkit-transition: all .5s cubic-bezier(.075, .82, .165, 1);
 transition: all .5s cubic-bezier(.075, .82, .165, 1); }

.invitationGuide a:before, .HS-Guide a:before, #HS-List a:before,  #contactGuide a:before,
#privacy dd a:before, #newsBody p a:before, .sales-type02 a:after { width: 20px; height: 1px; }
.invitationGuide a:hover:before, .HS-Guide a:hover:before, #HS-List a:hover:before, #contactGuide a:hover:before,
#privacy dd a:hover:before, #newsBody p a:hover:before, .sales-type02 a:hover:after { height: 2px; }

footer li a:hover:after, .texLink a:hover:before, a:hover .TTAA p span:after, a:hover .TBLA h4 span:after,
#magazineList a:hover p span:after, #magazineHead h2 a:hover:before, #magazineBody p a:hover:before,
.invitationGuide a:hover:before, .HS-Guide a:hover:before, #HS-List a:hover:before, #privacy dd a:hover:before,
#contactGuide a:hover:before, #newsBody p a:hover:before, .categoryLink a:hover:before,
#MCNavi a:hover:before, .sales-type02 a:hover:after { width: 100%; }

/* -------------------------------------------
 Displey Setting
------------------------------------------- */
#homeLogo, .tp-book-name { text-indent: 100%; white-space: nowrap; overflow: hidden; }

#homeLogo, .homeLink, .bottom-sns a, #returnBT a,
.books-list a, #top-today-list a, .top-blog-list a, .bccks-bt a {
 text-decoration: none; display: block; cursor: pointer; overflow: hidden; }

.bottom-sns a, .bccks-bt { -webkit-border-radius: 5px; border-radius: 5px; }

/* -------------------------------------------
 Clearfix
------------------------------------------- */
.clearfix:after, #BDC-inner:after, #MF-BTArea:after, #magazineHead:after, #newsHead:after {
 content: ""; clear: both; display: block; height: 0; }