@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');


html, body {height:100%;}
/* always force a scrollbar in non-IE: */
html { overflow-y: scroll; }
.detail { overflow-y:auto; }
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }


/**** Base ****/
body {
	font-family: 'Shippori Mincho', serif;
	font-weight:400;
	color:#333333;
	min-width:1200px;
}
@media only screen and (max-width: 768px){
	body {}
}
.csstransforms #wrap {height:100%; width:100%; position:fixed;}
.csstransforms #offset {height:50%; width:100%;}
#container {margin:0 auto; width:1180px; padding:0 120px 0 260px;}
.csstransforms #container {position:relative; height:540px; top:-330px;/*  top -330<- -270 by HPicon   background:hsla( 0, 100%, 50%, 0.3 );*/}
.csstransforms #content {position:absolute; width:100%; height:100%;}


/***************** No Transforms *****************/
/*.no-csstransforms #container,
.no-js #container {margin-top:60px; position:relative;}
.no-csstransforms #content section,
.no-js #content section {width:100%; height:540px; margin-bottom:100px; position:relative;}*/
/***************** Transforms  *****************/

.csstransforms #content section {
  width: 100%;
  height: 100%;
  position: absolute;
}

.csstransforms #content.transitions-on {
  -webkit-transition: -webkit-all 0.5s ease-out;
     -moz-transition:    -moz-all 0.5s ease-out;
      -ms-transition:     -ms-all 0.5s ease-out;
       -o-transition:      -o-all 0.5s ease-out;
          transition:         all 0.5s ease-out;
}
/***************** Faux 3d  *****************/
.faux3d #content section,
.faux3d #content,
.faux3d #environment {
  -webkit-transform-origin: center 450px;
     -moz-transform-origin: center 450px;
      -ms-transform-origin: center 450px;
       -o-transform-origin: center 450px;
          transform-origin: center 450px;
}
.faux3d #heian-early {
  -webkit-transform: scale(0.3333);
     -moz-transform: scale(0.3333);
      -ms-transform: scale(0.3333);
       -o-transform: scale(0.3333);
          transform: scale(0.3333);
}
.faux3d #heian-middle {
  -webkit-transform: scale(0.1111);
     -moz-transform: scale(0.1111);
      -ms-transform: scale(0.1111);
       -o-transform: scale(0.1111);
          transform: scale(0.1111);
}
.faux3d #inseiki {
  -webkit-transform: scale(0.037);
     -moz-transform: scale(0.037);
      -ms-transform: scale(0.037);
       -o-transform: scale(0.037);
          transform: scale(0.037);
}
.faux3d #kamakura-nanboku {
  -webkit-transform: scale(0.01234);
     -moz-transform: scale(0.01234);
      -ms-transform: scale(0.01234);
       -o-transform: scale(0.01234);
          transform: scale(0.01234);
}
.faux3d #muromachi-azuchi {
  -webkit-transform: scale(0.0041133333);
     -moz-transform: scale(0.0041133333);
      -ms-transform: scale(0.0041133333);
       -o-transform: scale(0.0041133333);
          transform: scale(0.0041133333);
}
.faux3d #edo-early {
  -webkit-transform: scale(0.0013717421124828531);
     -moz-transform: scale(0.0013717421124828531);
      -ms-transform: scale(0.0013717421124828531);
       -o-transform: scale(0.0013717421124828531);
          transform: scale(0.0013717421124828531);
}
.faux3d #edo-latter {
  -webkit-transform: scale(0.0013717421124828531);
     -moz-transform: scale(0.0013717421124828531);
      -ms-transform: scale(0.0013717421124828531);
       -o-transform: scale(0.0013717421124828531);
          transform: scale(0.0013717421124828531);
}
.faux3d #meiji-early {
  -webkit-transform: scale(0.0013717421124828531);
     -moz-transform: scale(0.0013717421124828531);
      -ms-transform: scale(0.0013717421124828531);
       -o-transform: scale(0.0013717421124828531);
          transform: scale(0.0013717421124828531);
}
/***************** True 3d  *****************/
.csstransforms3d #environment {
  width: 100%;
  height: 540px;
  -webkit-perspective: 500px;
     -moz-perspective: 500px;
      -ms-perspective: 500px;
       -o-perspective: 500px;
          perspective: 500px;
  -webkit-perspective-origin: center 450px;
     -moz-perspective-origin: center 450px;
      -ms-perspective-origin: center 450px;
       -o-perspective-origin: center 450px;
          perspective-origin: center 450px;
}
.csstransforms3d #content {
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.csstransforms3d #heian-early {
  -webkit-transform: translate3d( 0, 0, -1000px );
     -moz-transform: translate3d( 0, 0, -1000px );
      -ms-transform: translate3d( 0, 0, -1000px );
       -o-transform: translate3d( 0, 0, -1000px );
          transform: translate3d( 0, 0, -1000px );
}
.csstransforms3d #heian-middle {
  -webkit-transform: translate3d( 0, 0, -2000px );
     -moz-transform: translate3d( 0, 0, -2000px );
      -ms-transform: translate3d( 0, 0, -2000px );
       -o-transform: translate3d( 0, 0, -2000px );
          transform: translate3d( 0, 0, -2000px );
}
.csstransforms3d #inseiki {
  -webkit-transform: translate3d( 0, 0, -3000px );
     -moz-transform: translate3d( 0, 0, -3000px );
      -ms-transform: translate3d( 0, 0, -3000px );
       -o-transform: translate3d( 0, 0, -3000px );
          transform: translate3d( 0, 0, -3000px );
}
.csstransforms3d #kamakura-nanboku {
  -webkit-transform: translate3d( 0, 0, -4000px );
     -moz-transform: translate3d( 0, 0, -4000px );
      -ms-transform: translate3d( 0, 0, -4000px );
       -o-transform: translate3d( 0, 0, -4000px );
          transform: translate3d( 0, 0, -4000px );
}
.csstransforms3d #muromachi-azuchi {
  -webkit-transform: translate3d( 0, 0, -5000px );
     -moz-transform: translate3d( 0, 0, -5000px );
      -ms-transform: translate3d( 0, 0, -5000px );
       -o-transform: translate3d( 0, 0, -5000px );
          transform: translate3d( 0, 0, -5000px );
}
.csstransforms3d #edo-early {
  -webkit-transform: translate3d( 0, 0, -6000px );
     -moz-transform: translate3d( 0, 0, -6000px );
      -ms-transform: translate3d( 0, 0, -6000px );
       -o-transform: translate3d( 0, 0, -6000px );
          transform: translate3d( 0, 0, -6000px );
}
.csstransforms3d #edo-middle {
  -webkit-transform: translate3d( 0, 0, -7000px );
     -moz-transform: translate3d( 0, 0, -7000px );
      -ms-transform: translate3d( 0, 0, -7000px );
       -o-transform: translate3d( 0, 0, -7000px );
          transform: translate3d( 0, 0, -7000px );
}
.csstransforms3d #edo-latter {
  -webkit-transform: translate3d( 0, 0, -8000px );
     -moz-transform: translate3d( 0, 0, -8000px );
      -ms-transform: translate3d( 0, 0, -8000px );
       -o-transform: translate3d( 0, 0, -8000px );
          transform: translate3d( 0, 0, -8000px );
}
.csstransforms3d #meiji-early {
  -webkit-transform: translate3d( 0, 0, -9000px );
     -moz-transform: translate3d( 0, 0, -9000px );
      -ms-transform: translate3d( 0, 0, -9000px );
       -o-transform: translate3d( 0, 0, -9000px );
          transform: translate3d( 0, 0, -9000px );
}
/***************** Scroll Proxy  *****************/
.csstransforms.no-touch #scroll-proxy {/*height:5400px;*/ height:9000px;}
.csstransforms.no-touch .sign-up #scroll-proxy { height:0; }
.csstransforms.touch #scroll-proxy {height:9000px;}









@media print, screen and (min-width: 769px){
	footer .footer_copyright {font-size:10px; display:block; position:absolute; bottom:0; left:0; right:0; width:100%; text-align:center; z-index:9999;}
}
@media only screen and (max-width: 768px){
	footer .footer_copyright {font-size:10px; display:block; position:absolute; bottom:0; left:0; right:0; width:100%; text-align:center; z-index:9999;}
}


	/*フッター*/
	footer {font-size:10px; display:block; position:fixed; bottom:0; left:0; right:0; width:100%; text-align:center; z-index:9999;}
	footer .footer_copyright {font-size:10px; padding-bottom:10px;}



#list_bg_box {
  width:100%;
  height:100%;
  background-color:#e7e7e7;
  background-image:url("../images/bg/list_bg.gif") ;
  background-repeat:no-repeat;
  background-position:center center;
  text-align:center;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
@media print, screen and (min-width:2800px){
  #list_bg_box {
    background-image:url("../images/bg/list_bg.gif") ;
    background-size:cover;
  }
}




/*ナビゲーション*/
#nav_ul {
  list-style: none;
  margin: 0;
  position: absolute;
  z-index: 100;
  top:50%;
  left:0;
  transform:translateY( -50% );
}
#nav_ul:before {content:''; display:block; position:absolute; left:24px; top:5px; width:1px; height:calc(100% - 10px); background-color:#B84751; z-index:1;}

#nav_ul li {
	padding-bottom:20px;
	transition:all 0.2s;
	display:block;
	z-index:2;
}
#nav_ul li:last-child {
	padding-bottom:0;
}
.touch #nav_ul li {font-size:14px;}

#nav_ul li a {
  display:flex;
  align-items:center;
  justify-content:flex-start;
	font-size:14px;
	font-weight:600;
	line-height:1;
	transition:all 0.2s;
	z-index:2;
}
#nav_ul li a span.nav-period-label {
  display:inline-block;
  width:39px;
  height:20px;
  font-size:12px;
  line-height:18px;
  text-align:center;
  color:#333;
  border:1px solid #B84751;
  background-color:#fff;
  border-radius:4px;
  margin:0 10px 0 5px;
  transition:all 0.2s;
  z-index:3;
}

#nav_ul li a:hover {
	/*opacity:0.6;*/
}
#nav_ul li a:hover span.nav-period-label {
  color:#FFF;
  background-color:#B84751;
  transition:all 0.2s;
}
#nav_ul li.current {
	transition:all 0.2s;
}

#nav_ul li.current a {
	font-size:20px;
	font-weight:600;
}
#nav_ul li.current a:hover {
	opacity:1;
}
#nav_ul li.current a span.nav-period-label {
  display:inline-block;
  width:49px;
  height:24px;
  font-size:14px;
  line-height:22px;
  text-align:center;
  color:#FFF;
  border:1px solid #B84751;
  background-color:#B84751;
  border-radius:4px;
  margin:0 10px 0 0;
  transition:all 0.2s;
}

#content #nav_ul { display:none; }
.no-csstransforms #nav_ul {position:fixed;top:10px;}



/***********************
一覧
***********************/
#content section {opacity:0.24; transition: opacity 0.5s;}
#content section.current {opacity:1; transition: opacity 0.5s;}

.list-container {width:100%; max-width:1600px; margin:0 auto; display:flex; flex-direction:column;align-content:space-between;}

/*タイトル*/
.list-title-box {text-align:center; height:136px; padding:10px 0 40px 0;}
.list-title-box .list-title {display:inline-block; text-align:center; margin:0 auto; font-size:30px; line-height:1.3; letter-spacing:0.2em;}
.list-title-box .list-title span.list-title-kana {font-size:24px;}
.list-title-box .list-title span.list-title-label {display:block; font-size:18px; font-weight:600; letter-spacing:0.5em; position:relative; overflow:hidden; margin:0 0.5em 0 0.1em;}
.list-title-box .list-title span.list-title-label::before,
.list-title-box .list-title span.list-title-label::after {position:absolute; top:50%; right:50%; transform:translateX(-2em); display:block; content:""; width:50%; max-width:60px; height:1px; background-color:#B84751;}
.list-title-box .list-title span.list-title-label::after {right:auto; left:50%; transform:translateX(1.6em);}
.list-title-box p.com-link-p {padding:10px 0 0 0;}
.list-title-box p.com-link-p a.popup-period {font-size:12px; font-weight:400; position:relative; display:flex; align-items:center; justify-content:center; line-height:1; color:#5D5D5D;}
.list-title-box p.com-link-p a.popup-period:hover {color:#B84751;}
.list-title-box p.com-link-p a.popup-period::after {content: url("../images/icon/icon_link01.svg");width:18px;height:12px; padding:0 0 0 6px; display:inline-block; line-height:1;}
.list-title-box p.com-link-p a.popup-period.svg::after {content: url("../images/icon/list_icon_def.svg");width:18px;height:12px; padding:0 0 0 6px; display:inline-block; line-height:1;}

.list-title-box p.com-link-p a.popup-period___::after {content: url("../images/icon/list_icon_def.svg");width:12px;height:12px; display:block;position:absolute;left:15px;top:50%;transform:translateY(-50%);line-height:1;}
.list-title-box p.com-link-p a.popup-period____::after {content: url("images/icon/icon_btn-person-mypage.png");width:15px;height:12px;display:block;position:absolute;left:15px;top:50%;transform:translateY(-50%);line-height:1;}



/*一覧リスト*/
.list-scrollbox {width:800px; overflow-x:auto; overflow-y:hidden; position: relative; height:380px;}

.list-scrollbox::-webkit-scrollbar {
    width:6px;
    height:6px;
}
.list-scrollbox::-webkit-scrollbar-track {
    background-color:#f4f4f4;
}
.list-scrollbox::-webkit-scrollbar-thumb {
    background-color:#b84751;
    border-radius:5px;
}


.cover-list {height:380px; padding:0; display:flex; position:relative; flex-wrap:wrap; flex-direction:column; align-items:flex-start; justify-content:flex-start; align-content:flex-start;}
.cover-list li {width:160px; height:190px; padding:0 0 24px 0;}
.cover-list li a {display:block; transition: opacity 0.5s; opacity:1; width:100%; height:100%; text-align:center;}
.cover-list li a:hover {opacity:0.6; transition: opacity 0.5s;}

.cover-img-box {width:120px; height:120px; line-height:1; padding:0; margin:0 auto;}
.cover-img-box img {width:100%;line-height:1; padding:0; margin:0;}
.cover-title-box {width:100%; height:46px; display:flex; align-items:center; justify-content:center;}
.cover-title-box h3 {font-size:14px; font-weight:600; line-height:1.3;
	/*box-shadow:0px 0px 5px 5px rgba(255,255,255,1);*/
	text-shadow:0px 2px 2px rgba(255,255,255,0.9);
}

.cover-list.center-layout {flex-direction:row; justify-content:center;}

/* 4(8):640px,5(10):800px,7(14):1120px,8(16):1280px,9(18):1440px*/
#before-nara .cover-list {width:480px; margin:0 auto;}
#heian-early .cover-list {width:480px; margin:0 auto;}
#heian-middle .cover-list {width:1120px; margin:0 auto;}
#inseiki .cover-list {width:640px; margin:0 auto;}
#kamakura-nanboku .cover-list {width:1120px; margin:0 auto;}
#muromachi-azuchi .cover-list {width:1120px; margin:0 auto;}
#edo-early .cover-list {width:1280px; margin:0 auto;}
#edo-middle .cover-list {width:1280px; margin:0 auto;}
#edo-latter .cover-list {width:1120px; margin:0 auto;}
#meiji-early .cover-list {width:480px; margin:0 auto;}
/*#heian-early .cover-list {width:1440px; margin:0;}*/


/*#environment {background-color:#ECECEC;}
.cover-list li a {background-color:#FAFAFA;}
.cover-img-box {background-color:#CCC;}*/



.list-scrollbox.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {background-color:#DEDEDE;}
.list-scrollbox.ps-container:hover > .ps-scrollbar-x-rail > .ps-scrollbar-x {background-color:#B84751;}


/***********************
年代解説
***********************/
.period-magnific.mfp-bg {background:#F8F7F5; padding:0; opacity:0.6; z-index:700; top:0; bottom:0; position:fixed !important;}
.period-magnific.mfp-wrap {z-index:745;}
/*.period-magnific.mfp-wrap {position:fixed !important;}*/

/* モーダルアニメーション */
.period-magnific.mfp-bg { opacity:0; transition: opacity 0.5s;}
.period-magnific.mfp-wrap { opacity:0; transform:scale(0); transition: opacity 0.5s,transform 0.5s;}
.period-magnific.mfp-bg.mfp-ready { opacity:0.6; transition: opacity 0.5s;}
.period-magnific.mfp-wrap.mfp-ready { opacity:1; transform:scale(1.0); transition: opacity 0.5s,transform 0.5s;}
.period-magnific.mfp-bg.mfp-removing { opacity:0; transition: opacity 0.3s;}
.period-magnific.mfp-wrap.mfp-removing { opacity:0; transform:scale(1.0); transition: opacity 0.3s,transform 0.3s;}

.period-magnific .mfp-container {padding:0;}
.touch .period-magnific .mfp-container {overflow-y:scroll;}
.period-magnific .mfp-container article {width:100%;}
.period-magnific .mfp-content {padding:50px 0;}
.period-magnific .close-box {width:80px; height:80px; line-height:1; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity:1; padding:20px; display: block; cursor:pointer; z-index:746;}
.period-magnific .mfp-close {width:40px; height:40px;
	color:#000; font-style: normal; font-size: 28px; display: block; position:relative; opacity:1; padding:0;}
.period-magnific .mfp-close::before,
.period-magnific .mfp-close::after{content:""; display:block; width:100%; height:2px; background:#777777; transform:rotate(45deg); transform-origin:0% 50%; position:absolute; top:calc(14% - 1px); left:14%;}
.period-magnific .mfp-close::after{transform:rotate(-45deg); transform-origin:100% 50%; left:auto; right:14%;}
.period-magnific .mfp-close:hover{opacity:0.6;}

.period-wrap {width:100%; max-width:1050px; margin:0 auto; position:relative; padding-left:30px;}
.period-container {padding:50px 50px 40px 50px; background:#FAFAFA; margin:0; display:flex; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15); background-image:url('../images/bg/bg_tile01.png');background-repeat:repeat; background-size:auto;}
.period-con01 {padding:0 0 36px 0;}
.period-con01 .period-titlebox {padding:0 0 10px 0;}
.period-con01 .period-title {font-size:26px; font-size:2.6rem; font-weight:600; line-height:1.4; letter-spacing:0.2em;/* overflow:hidden; display:flex; align-items:center; white-space:nowrap;*/}
/*.period-con01 .period-title::after{content:""; display:inline-block; width:100%; height:1px; background-color:#B84751;}*/
.period-con01 .period-com {color:#555; font-size:14px; font-size:1.4rem;}
.period-chronology-box {padding-top:20px;}
/*.scrollbox01 {width:100%; overflow-x:hidden;}*/
.scrollbox01 {width:100%; overflow-x:scroll; position: relative; padding-bottom:10px; border-top:1px solid #EAEAEA;}
.scrollbox01 .ps-scrollbar-x-rail {width: 1000px; left: 875px; bottom: 0px; height:6px; opacity:1;}
.scrollbox01 .ps-scrollbar-x {left: 467px; width: 533px;}

.scrollbox01 {width:100%;}
.period-chronology-img {width:1875px;}

.chronology-img-box {width:10378px; padding:30px 0 0 0; display:flex; align-items:flex-start; justify-content:flex-end; flex-direction:row-reverse;}
.period-chronology01-01 {width:436px; height:340px;}
.period-chronology02-01 {width:438px; height:340px;}
.period-chronology02-02 {width:1198px; height:340px;}
.period-chronology02-03 {width:718px; height:340px;}
.period-chronology03-01 {width:1358px; height:340px;}
.period-chronology03-02 {width:1438px; height:340px;}
.period-chronology04-01 {width:1678px; height:340px;}
.period-chronology04-02 {width:1678px; height:340px;}
.period-chronology04-03 {width:878px; height:340px;}
.period-chronology05-01 {width:558px; height:340px;}

.period-chronology-anno {font-size:11px; line-height:1; color:#555; padding-top:8px;}

/***********************
詳細ページ
***********************/
.detail-magnific.mfp-bg {background:#fff; padding:0; z-index:800; background-image:url('../images/bg/bg_tile01.png');background-repeat:repeat; background-size:auto; top:0; bottom:0;}
.detail-magnific.mfp-wrap {z-index:845;}
/*.detail-magnific.mfp-wrap {position:fixed !important;}*/

/* モーダルアニメーション */
.detail-magnific.mfp-bg,
.detail-magnific.mfp-wrap { opacity:0; transform:scale(0); transition: opacity 0.5s,transform 0.5s;}
.detail-magnific.mfp-bg.mfp-ready,
.detail-magnific.mfp-wrap.mfp-ready { opacity:1; transform:scale(1.0); transition: opacity 0.5s,transform 0.5s;}
.detail-magnific.mfp-bg.mfp-removing,
.detail-magnific.mfp-wrap.mfp-removing { opacity:0; transform:scale(1.0); transition: opacity 0.3s,transform 0.3s;}

.detail-magnific .mfp-container {padding:0;}
.detail-magnific .close-box {width:80px; height:80px; line-height:1; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity:1; padding:20px; display: block; cursor:pointer; z-index:846;}
.detail-magnific .mfp-close {width:40px; height:40px;
	color:#000; font-style: normal; font-size: 28px; display: block; position:relative; opacity:1; padding:0;}
.detail-magnific .mfp-close::before,
.detail-magnific .mfp-close::after{content:""; display:block; width:100%; height:2px; background:#777777; transform:rotate(45deg); transform-origin:0% 50%; position:absolute; top:calc(14% - 1px); left:14%;}
.detail-magnific .mfp-close::after{transform:rotate(-45deg); transform-origin:100% 50%; left:auto; right:14%;}
.detail-magnific .mfp-close:hover{opacity:0.6;}

.detail-wrap {width:100%; max-width:1200px; margin:0 auto;}
.detail-container {padding:50px; display:flex; width:100%;}
.detail-imgbox {width:50%; padding:0 70px 0 0;}
.detail-textbox {width:50%;}

.detail-titlebox {display:block; padding:0; margin:0;}
.detail-titlebox h1 {font-size:30px; line-height:1.4;}
.detail-titlebox ruby > rt {font-size:12px; color:#777; padding:0 5px; margin:0; line-height:1;}

.detail-combox {padding:12px 0 0 0; margin:0;}
.detail-combox p {font-size:14px;}

.detail-tablebox {padding:40px 0 0 0; margin:0;}
.detail-table_inner {padding:0 0 0 0; margin:0; height:auto; overflow-y:auto;}
.detail-tablebox table {width:100%; border-top:1px solid #EAEAEA; line-height:1.4; font-size:13px;
border-collapse:collapse;
}
.detail-tablebox table th {border-bottom:1px solid #EAEAEA; width:100px; text-align:center; background-color:#F8F7F5; vertical-align:top; padding:14px 0; letter-spacing:0.8em; font-weight:800;}
.detail-tablebox table td {border-bottom:1px solid #EAEAEA; width:calc(100% - 100px); background-color:#FFF; padding:14px 20px; font-weight:800;}
.detail-tablebox table td ruby > rt {font-size:40%; color:#777; padding:0; margin:0; line-height:1;}
.detail-tablebox table td .detail-genre_com p {font-size:12px; font-weight:400; line-height:1.8; color:#555; padding:10px 0 0 0; letter-spacing:normal;}
.detail-tablebox table td .detail-genre_com a {font-size:12px; font-weight:600; line-height:1; position:relative; display:flex; align-items:center; justify-content:flex-start; line-height:1; color:#B84751; opacity:1; padding:10px 0 0 0; transition: opacity 0.5s;}

.detail-tablebox table td .detail-genre_com a:hover {opacity:0.6; transition: opacity 0.5s;}
.detail-tablebox table td .detail-genre_com a::after {content: url("../images/icon/icon_link01.svg");width:18px;height:12px; padding:0 0 0 6px; display:inline-block; line-height:1;}

.detail-mainslider-box .slick-prev,
.detail-mainslider-box .slick-next {z-index:2; top:160px; width:28px; height:28px;}
.detail-mainslider-box .slick-prev {left:5px;}
.detail-mainslider-box .slick-next {right:5px;}

.detail-mainslider-box .slick-prev:before,
.detail-mainslider-box .slick-next:before {font-size:28px; color:#B84751;}

.detail-mainslider-box .detail-slickslider .slick-prev,
.detail-mainslider-box .detail-slickslider .slick-next {opacity:0; transition: opacity 0.5s;}
.touch .detail-mainslider-box .detail-slickslider .slick-prev,
.touch .detail-mainslider-box .detail-slickslider .slick-next {opacity:1; transition: opacity 0.5s;}

.detail-mainslider-box .detail-slickslider:hover .slick-prev,
.detail-mainslider-box .detail-slickslider:hover .slick-next {opacity:1; transition: opacity 0.5s;}

.detail-slider_thumb-box {padding:24px 0 0 0;}

.detail-thumb-slickslider {margin:0 -6px;}
.detail-thumb-slickslider img {width:100%;}
.detail-thumb-slickslider .slick-track {margin:0; /*transform: unset !important;*/}
.detail-thumb-slickslider .slick-slide {padding:0 6px;}
.detail-thumb-slickslider .slick-slide .detail-thumb-imgbox {border:1px solid #EAEAEA; transition:border 0.5s;}
.detail-thumb-slickslider .slick-slide img {opacity:0.4; transition:opacity 0.5s;}
/*.detail-thumb-slickslider .slick-slide:hover .detail-thumb-imgbox {border:1px solid #B84751;}*/
.detail-thumb-slickslider .slick-slide:hover img {opacity:1; transition:opacity 0.5s; transition:border 0.5s,opacity 0.5s;}
.detail-thumb-slickslider .slick-slide.slick-current .detail-thumb-imgbox {border:1px solid #EAEAEA; transition:border 0.5s;}
.detail-thumb-slickslider .slick-slide.slick-current img {opacity:1; transition:border 0.5s;}


.detail-slidetitle {width:100%; height:40px; display:flex; justify-content:flex-start; align-items:center;}
.detail-slidetitle h2 {font-size:14px; font-weight:600; line-height:1.3; letter-spacing:0.1em;}
.detail-slide-linkbox {width:100%; display:flex; justify-content:space-between; align-items:center;}
.detail-slide-linkbox li { width:calc(50% - 6px); }
.detail-slide-linkbox li a {display:flex; width:100%; height:auto; min-height:40px; align-items:center; justify-content:center; font-size:12px; font-weight:500; border:1px solid #EAEAEA; background-color:#F8F7F5; transition: opacity 0.5s;}
.detail-slide-linkbox li a.normal-spacing {letter-spacing:normal;}
.detail-slide-linkbox li a::after {content: url("../images/icon/icon_link01.svg");width:18px;height:12px; padding:0 0 0 6px; display:inline-block; line-height:1;}
.detail-slide-linkbox li a:hover {opacity:0.6; transition: opacity 0.5s;}

/*スライドしないようにする*/
.detail-thumb-slickslider .slick-track {transform: unset !important;}


/* ページver */
.detail-page {position:relative;}
.detail-page-bg {
  width:100%;
  height:100%;
  background-color:#535c70;
  background-image:url("../images/bg/bg_detail01.jpg") ;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  text-align:center;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
}
.detail-page-wrap {width:100%; min-height:100%; padding:3%; margin:0 auto; position:relative; z-index:1;display:flex; align-items:center;}
.detail-page-wrap .detail-container {display:block; width:100%;padding:0; margin:0 auto; max-width:1880px;}
.detail-page-wrap .detail-container_inner {display:flex; width:100%; min-height:100%; padding:0; margin:0 auto; max-width:1880px;}

.detail-page-wrap .detail-imgbox-bg,
.detail-page-wrap .detail-textbox {
  background-image:url("../images/bg/bg_detail02.gif") ;
  background-repeat:repeat;
  background-color:#FFF;
}
.detail-page-wrap .detail-imgbox-bg {padding:40px 80px; height:100%;}


.detail-page-wrap .detail-imgbox {width:64%; padding-right:50px;}
.detail-page-wrap .detail-textbox {width:36%; padding:40px;}

@media only screen and (max-width:1300px){
  .detail-page-wrap .detail-imgbox {width:calc( 100% - 440px ); padding-right:3%;}
  .detail-page-wrap .detail-textbox {width:440px; padding:40px;}
}
.detail-page-wrap footer {position:absolute;}




.detail-page-wrap .slick-slide img {width:100%;}


.detail-slide-box {width:100%; padding-bottom:58.69%; background-color:#f2f1ec; position:relative; background-image:url("../images/bg/bg_tile02.gif"); background-repeat:repeat;}
.detail-slide-box_inner {position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px;}
.detail-page-wrap .detail-slide-box_inner img {height:100%; width:auto;}
.detail-page-wrap .detail-slide-box_inner img.wide_prio {height:auto; width:100%;}


.detail-thumb-slickslider {display:flex;}
.detail-thumb-slickslider.slick-slider {display:block;}

.detail-page-wrap .detail-thumb-slickslider .slick-slide.slick-current .detail-thumb-imgbox {/*border:1px solid #EAEAEA;*/border:1px solid #B84751; transition:border 0.5s;}

.detail-page-wrap .detail-thumb-slickslider .slick-slide .detail-thumb-imgbox {display:flex; align-items:center; justify-content:center;width:100%; padding-bottom:58.69%; background-color:#f2f1ec; position:relative; background-image:url("../images/bg/bg_tile02.gif"); background-repeat:repeat;}
.detail-page-wrap .detail-thumb-slickslider .slick-slide .detail-thumb-inner {position:absolute; top:0; bottom:0; left:0; right:0; width:calc( 100% - 20px ); height:calc( 100% - 20px ); display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; margin:10px;}
.detail-page-wrap .detail-thumb-slickslider .slick-slide .detail-thumb-imgbox img {display:block;height:100%; width:auto;}


.detail-mainslider-box .slick-prev,
.detail-mainslider-box .slick-next {z-index:2; top:160px; width:28px; height:28px;}
.detail-mainslider-box .slick-prev {left:5px;}
.detail-mainslider-box .slick-next {right:5px;}

.detail-page-wrap .detail-mainslider-box .slick-prev,
.detail-page-wrap .detail-mainslider-box .slick-next {width:30px; height:30px; top:50%; transform:translateY(-55px); background-color:transparent; padding:3px 8px;}
.detail-page-wrap .detail-mainslider-box .slick-prev {left:-50px; right:auto;}
.detail-page-wrap .detail-mainslider-box .slick-next {left:auto; right:-50px;}
.detail-page-wrap .detail-mainslider-box .slick-prev:before,
.detail-page-wrap .detail-mainslider-box .slick-next:before {content:''; display:block; font-size:0px; width:14px; height:24px; background-repeat:no-repeat; background-position:center center; opacity:1;}

.detail-page-wrap .detail-mainslider-box .slick-prev:before {background-image:url("../images/icon/icon-arrow-left.png");}
.detail-page-wrap .detail-mainslider-box .slick-next:before {background-image:url("../images/icon/icon-arrow-right.png");}
.detail-page-wrap .detail-mainslider-box .detail-slickslider .slick-prev,
.detail-page-wrap .detail-mainslider-box .detail-slickslider .slick-next {opacity:1; transition: opacity 0.5s;}
.detail-page-wrap .detail-mainslider-box .detail-slickslider:hover .slick-prev,
.detail-page-wrap .detail-mainslider-box .detail-slickslider:hover .slick-next {opacity:0.7; transition: opacity 0.5s;}

.win-close-btn_box {display:block; text-align:center; padding-top:30px;}
.win-close-btn {display:flex; align-items:center; justify-content:center; width:280px; height:48px; margin:0 auto; background-color:#A44049; color:#FFF; cursor:pointer; transition: opacity 0.5s; background-image:url("../images/bg/bg_red01.png"); background-repeat:no-repeat; background-position:center center;}
.win-close-btn:hover {opacity:0.7; transition: opacity 0.5s;}


/*テスト用背景*/
/*.detail-magnific.mfp-bg {background:#fff; opacity:0.6; background-image:none;}
.detail-container {background:#FAFAFA;}*/

.slider_test {padding-top:50px;}
.slider_test .detail-slider-img {width:480px; height:320px; background-color:#F8F7F5; display:flex; align-items:center; justify-content:center;}

.slider_test .detail-thumb-slickslider .slick-slide .detail-thumb-imgbox {background-color:#F8F7F5; display:flex; align-items:center; justify-content:center;width:100%; height:72px; padding:10px;}
.slider_test .detail-thumb-slickslider .slick-slide .detail-thumb-imgbox02 {display:flex; align-items:center; justify-content:center;width:100%; height:100%;}

.slider_test .detail-thumb-slickslider .slick-slide .detail-thumb-imgbox img {display:block;height:100%; width:auto;}


/***********************
ジャンルモーダル modaal
***********************/
.genre-modaal .modaal-inner-wrapper {padding:50px;}
.genre-modaal .modaal-container {max-width:1100px; background:#FAFAFA; margin:0; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15); background-image:url('../images/bg/bg_tile01.png');background-repeat:repeat; background-size:auto;}
.genre-modaal .modaal-content-container {padding:50px;}

/*closeボタン*/
.genre-modaal .modaal-close {position:absolute; top:20px; right:20px; color:#000; width:40px; height:40px;}
.genre-modaal .modaal-close:focus,
.genre-modaal .modaal-close:hover {background-color:transparent;}
.genre-modaal .modaal-close::before,
.genre-modaal .modaal-close::after{content:""; display:block; width:100%; height:2px; background:#888888; transform:rotate(45deg); transform-origin:0% 50%; position:absolute; top:calc(14% - 1px); left:14%;}
.genre-modaal .modaal-close::after{transform:rotate(-45deg); transform-origin:100% 50%; left:auto; right:14%;}
.genre-modaal .modaal-close:hover{opacity:0.6;}

.genre-modaal .genre-titlebox {margin-bottom:30px;}
.genre-modaal .genre-titlebox h2 {font-size:32px; font-weight:500; margin-bottom:30px;}
.genre-modaal .genre-con01 {margin-bottom:50px;}
.genre-modaal .genre-con01:last-child {margin-bottom:0;}

.genre-modaal .genre-con01 h3 {font-size:24px; font-weight:500; position:relative; margin-bottom:24px; padding-bottom:3px;}
.genre-modaal .genre-con01 h3:after {content:""; display:block; position:absolute; width:40px; height:2px; background-color:#B84751; left:0; bottom:0;}
.genre-modaal .genre-con02 h4 {font-size:16px; font-weight:500; border-bottom:1px solid #EAEAEA; padding-bottom:3px; margin-bottom:12px;}
.genre-modaal .genre-con02 p.genre-com {font-weight:500;margin-bottom:36px;}
.genre-modaal .genre-con02:last-child p.genre-com {margin-bottom:0;}

/*.genre-modaal .modaal-container {height:calc( 100vh - 100px );}
.genre-modaal .genre-conbox {overflow-y:auto; height:calc( 100vh - 260px );}*/


/***********************
ジャンルモーダル magnificPopup
***********************/
.genre-magnific.mfp-bg {background:#F8F7F5; padding:0; opacity:0.6; z-index:700; top:0; bottom:0; overflow:auto;position:fixed !important;}
.genre-magnific.mfp-wrap {z-index:745;}
/*.genre-magnific.mfp-wrap {position:fixed !important;}*/

/* モーダルアニメーション */
.genre-magnific.mfp-bg { opacity:0; transition: opacity 0.5s;}
.genre-magnific.mfp-wrap { opacity:0; transform:scale(0); transition: opacity 0.5s,transform 0.5s;}
.genre-magnific.mfp-bg.mfp-ready { opacity:0.6; transition: opacity 0.5s;}
.genre-magnific.mfp-wrap.mfp-ready { opacity:1; transform:scale(1.0); transition: opacity 0.5s,transform 0.5s;}
.genre-magnific.mfp-bg.mfp-removing { opacity:0; transition: opacity 0.3s;}
.genre-magnific.mfp-wrap.mfp-removing { opacity:0; transform:scale(1.0); transition: opacity 0.3s,transform 0.3s;}

.genre-magnific .mfp-container {padding:0;}
.touch .genre-magnific .mfp-container {overflow-y:scroll;}
.genre-magnific .mfp-container article {width:100%;}
.genre-magnific .mfp-content {padding:50px 0;}
.genre-magnific .close-box {width:80px; height:80px; line-height:1; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity:1; padding:20px; display: block; cursor:pointer; z-index:746;}
.genre-magnific .mfp-close {width:40px; height:40px;
  color:#000; font-style: normal; font-size: 28px; display: block; position:relative; opacity:1; padding:0;}
.genre-magnific .mfp-close::before,
.genre-magnific .mfp-close::after{content:""; display:block; width:100%; height:2px; background:#777777; transform:rotate(45deg); transform-origin:0% 50%; position:absolute; top:calc(14% - 1px); left:14%;}
.genre-magnific .mfp-close::after{transform:rotate(-45deg); transform-origin:100% 50%; left:auto; right:14%;}
.genre-magnific .mfp-close:hover{opacity:0.6;}

.genre-wrap {width:100%; max-width:1100px; margin:0 auto; position:relative;}
.genre-container {padding:50px; background:#FAFAFA; margin:0; display:flex; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15); background-image:url('../images/bg/bg_tile01.png');background-repeat:repeat; background-size:auto;}


.genre-magnific .genre-titlebox {margin-bottom:30px;}
.genre-magnific .genre-titlebox h2 {font-size:32px; font-weight:500; margin-bottom:30px;}
.genre-magnific .genre-con01 {margin-bottom:50px;}
.genre-magnific .genre-con01:last-child {margin-bottom:0;}

.genre-magnific .genre-con01 h3 {font-size:24px; font-weight:500; position:relative; margin-bottom:24px; padding-bottom:3px;}
.genre-magnific .genre-con01 h3:after {content:""; display:block; position:absolute; width:40px; height:2px; background-color:#B84751; left:0; bottom:0;}
.genre-magnific .genre-con02 h4 {font-size:16px; font-weight:500; border-bottom:1px solid #EAEAEA; padding-bottom:3px; margin-bottom:12px;}
.genre-magnific .genre-con02 p.genre-com {font-weight:500;margin-bottom:36px;}
.genre-magnific .genre-con02:last-child p.genre-com {margin-bottom:0;}


#wrap02 {height:100%; width:100%; position:fixed;}
#offset02 {height:50%; width:100%;}
#container02 {margin:0 auto; width:1640px; padding:0;}
#container02 {position:relative; height:740px; top:-370px;/*  background:hsla( 0, 100%, 50%, 0.3 );*/}
#content02 {position:absolute; width:100%; height:100%;}