@charset "utf-8";

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

  story.css

======================================================================== 
*/
#story main hr { display:none; }
/************************************************************************
  #main-image
************************************************************************/
#main-image { background-color:#bfe2f7; position:relative; display:flex; justify-content:center; align-items:center; }
#main-image::before,
#main-image::after { content:''; background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; bottom:0; }

#main-image::before { width:calc(78/1280*100vw); height:calc(110/1280*100vw); background-image:url('../images/logilogi.svg'); left:calc(135/1280*100vw); }
#main-image::after { width:calc(235/1280*100vw); height:calc(283/1280*100vw); background-image:url('../images/rei.svg'); right:calc(50/1280*100vw); }

#main-image h2 { margin:auto; padding:0; width:calc(1280/1280*100vw); height:calc(513/1280*100vw); background:url('../images/title.svg') no-repeat; background-size:100% auto; display:block; }
#main-image h2,
#main-image h3 { font-size:0; }
/* ============ smart phone ============ */
@media (max-width:768px){
#main-image { padding-top:53px; padding-bottom:calc(235/768*100vw); }
#main-image h2 { margin-top:calc(30/768*100vw); width:calc(655/768*100vw); height:calc(453/768*100vw); background-image:url('../images/title_sp.svg'); }
#main-image::before { width:calc(78/768*100vw); height:calc(110/768*100vw); bottom:calc(-5/768*100vw); left:calc(103/768*100vw); }
#main-image::after { width:calc(235/768*100vw); height:calc(283/768*100vw); bottom:calc(-5/768*100vw); right:calc(57/768*100vw); }
}
/************************************************************************
  #character-introduction
************************************************************************/
#character-introduction { background-color:#0068b7; color:#ffffff; position:relative; }
#character-introduction::after { content:''; margin:auto; width:calc(36/1280*100vw); height:calc(25/1280*100vw); background:url('../images/scroll.svg') no-repeat; background-size:100% auto; display:block; position:absolute; bottom:calc(110/1280*100vw); right:0; left:0; } 
#character-introduction .contents { margin:auto; padding:calc(20/1280*100vw) 0 calc(120/1280*100vw); width:calc(1050/1280*100vw); display:flex; justify-content:space-between; }
#character-introduction .contents h3 { margin:0 0 0.2em; line-height:1; font-size:calc(24/1280*100vw); }
#character-introduction .contents p.txt { line-height:calc(22/14); font-size:calc(14/1280*100vw); }
#character-introduction .contents .rei { order:2; }
#character-introduction .contents .logilogi { order:1; }
/* ============ smart phone ============ */
@media (max-width:768px){
#character-introduction .contents { padding:calc(25/768*100vw) 0 calc(120/768*100vw); }
#character-introduction::after { width:calc(63/768*100vw); height:calc(43/768*100vw); bottom:calc(80/768*100vw); } 
#character-introduction .contents h3 { font-size:calc(24/768*100vw); }
#character-introduction .contents p.txt { font-size:calc(14/768*100vw) }
}
/************************************************************************
  main 
************************************************************************/
#story main { padding-top:0; }
/************************************************************************
  nav.tab
************************************************************************/
nav.tab { margin:0 0 max(calc(-70/1280*100vw), -70px); position:relative; top:max(calc(-70/1280*100vw), -70px); }
nav.tab ul { margin:auto; max-width:1055px; display:flex; justify-content:space-between; }
nav.tab ul li a { width:min(calc(480/1280*100vw), 480px); height:min(calc(70/1280*100vw), 70px); background-color:#ffffff; border-radius:min(calc(16/1280*100vw), 16px) min(calc(16/1280*100vw), 16px) 0 0; display:flex; justify-content:center; align-items:center; font-size:0; cursor:pointer; }
nav.tab ul li.company.active a { background-color:#e7e8ec; }
nav.tab ul li.servise.active a { background-color:#bfe2f7; }
nav.tab ul li a span { background-repeat:no-repeat; background-size:100% auto; transition:0.5s; }
/* company */
nav.tab ul li.company a span { width:min(calc(169/1280*100vw), 169px); height:min(calc(26/1280*100vw), 26px); background-image:url('../images/company_off.svg'); }
nav.tab ul li.company.active a span { width:min(calc(175/1280*100vw), 175px); height:min(calc(32/1280*100vw), 32px); background-image:url('../images/company_on.svg'); }
/* servise */
nav.tab ul li.servise a span { width:min(calc(144/1280*100vw), 144px); height:min(calc(26/1280*100vw), 26px); background-image:url('../images/servise_off.svg'); }
nav.tab ul li.servise.active a span { width:min(calc(150/1280*100vw), 150px); height:min(calc(32/1280*100vw), 32px); background-image:url('../images/servise_on.svg'); }
/* ============ smart phone ============ */
@media (max-width:768px){
nav.tab { margin-bottom:calc(-55/768*100vw); top:calc(-55/768*100vw); }
nav.tab ul {  width:calc(695/768*100vw); }
nav.tab ul li a { width:calc(300/768*100vw); height:calc(55/768*100vw); border-radius:calc(14/768*100vw) calc(14/768*100vw) 0 0; }
/* company */
nav.tab ul li.company a span { width:calc(136/768*100vw); height:calc(21/768*100vw); }
nav.tab ul li.company.active a span { width:calc(142/768*100vw); height:calc(25/768*100vw); }
/* servise */
nav.tab ul li.servise a span { width:calc(104/768*100vw); height:calc(19/768*100vw); }
nav.tab ul li.servise.active a span { width:calc(109/768*100vw); height:calc(24/768*100vw); }
}
/************************************************************************
  main section.box
************************************************************************/
main section.box { height:0; transition:0.5s; opacity:0; overflow:hidden; position:relative; z-index:0; }
main section.box.active { padding:min(calc(90/1280*100vw), 90px) 0 min(calc(220/1280*100vw), 220px); height:auto; opacity:1; z-index:1; }

main section#company.active { background-color:#e7e8ec; }
main section#servise.active { background-color:#bfe2f7; }
/* ============ smart phone ============ */
@media (max-width:768px){
main section.box.active { padding:calc(75/768*100vw) 0 calc(230/768*100vw); }
}
/************************************************************************
  main section.box article
************************************************************************/
main section.box article { margin:auto auto min(calc(120/1280*100vw), 120px); text-align:center; }
main section.box article:last-of-type { margin-bottom:0; }
main section.box article .contents { margin:auto; max-width:645px; text-align:left; position:relative; }

#story main section.box article .contents h2 { color:#6b7795; letter-spacing:0.01em; font-size:min(calc(38/1280*100vw), 38px); line-height: 1.447; margin-bottom: 50px;}
#story main section.box article .contents h3 { letter-spacing:0.01em; font-size:min(calc(24/1280*100vw), 24px); }
#story main section.box article .contents p { margin:auto; color:#6b7795; line-height:calc(37/22); letter-spacing:0.01em; font-size:min(calc(22/1280*100vw), 22px); }
main section.box article .contents p.img { margin:auto; text-align:center; font-size:0; }
main section.box article .contents::after { content:''; background-repeat:no-repeat; background-size:100% auto; display:none; position:absolute; pointer-events:none; }
#tv-cm .contents::after { width:min(calc(123/1280*100vw), 123px); height:min(calc(152/1280*100vw), 152px); background-image:url('../images/on_air.svg'); display:block; top:max(calc(-82/1280*100vw), -82px); right:min(calc(10/1280*100vw), 10px); }

/* illust */
#anniversary-video .contents::after { width:min(calc(228/1280*100vw), 228px); height:min(calc(213/1280*100vw), 213px); background-image:url('../images/anniversary.svg'); display:block; top:max(calc(-63/1280*100vw), -63px); left:max(calc(-220/1280*100vw), -220px); }
#dx .contents::after { width:min(calc(110/1280*100vw), 110px); height:min(calc(153/1280*100vw), 153px); background-image:url('../images/dx.svg'); display:block; top:min(calc(57/1280*100vw), 57px); right:max(calc(-178/1280*100vw), -178px); }
#in-1-minute .contents::after { width:min(calc(174/1280*100vw), 174px); height:min(calc(139/1280*100vw), 139px); background-image:url('../images/recommend.svg'); display:block; top:min(calc(125/1280*100vw), 125px); left:max(calc(-230/1280*100vw), -230px); }
#magazine .contents::after { width:min(calc(195/1280*100vw), 195px); height:min(calc(218/1280*100vw), 218px); background-image:url('../images/graphic_gallery.svg'); display:block; top:min(calc(48/1280*100vw), 48px); right:max(calc(-224/1280*100vw), -224px); }
#company-profile .contents::after { width:min(calc(223/1280*100vw), 223px); height:min(calc(267/1280*100vw), 267px); background-image:url('../images/corporate-profile.svg'); display:block; top:min(calc(57/1280*100vw), 57px); left:max(calc(-132/1280*100vw), -132px); }
#genealogy-chronology .contents::after { width:min(calc(374/1280*100vw), 374px); height:min(calc(288/1280*100vw), 288px); background-image:url('../images/development.svg'); display:block; top:max(calc(-220/1280*100vw), -220px); right:max(calc(-227/1280*100vw), -227px); }
#SULS .contents::after { width:min(calc(195/1280*100vw), 195px); height:min(calc(108/1280*100vw), 108px); background-image:url('../images/cold_express.svg'); display:block; bottom:max(calc(-20/1280*100vw), -20px); right:max(calc(-215/1280*100vw), -215px); }
#new-system .contents::after { width:min(calc(148/1280*100vw), 148px); height:min(calc(172/1280*100vw), 172px); background-image:url('../images/new_system.svg'); display:block; top:min(calc(160/1280*100vw), 160px); left:max(calc(-193/1280*100vw), -193px); }

/* ============ smart phone ============ */
@media (max-width:768px){
main section.box article .contents { max-width:calc(640/768*100vw); }
#story main section.box article .contents h2 { margin-bottom:calc(60/768*100vw); font-size:calc(38/768*100vw); line-height:calc(50/38); }
#story main section.box article .contents h3 { font-size:calc(24/768*100vw); }
#story main section.box article .contents p { font-size:calc(22/768*100vw); }
/* illust */
#tv-cm .contents::after { width:calc(98/768*100vw); height:calc(122/768*100vw); top:calc(-32/768*100vw); right:calc(20/768*100vw); }
#anniversary-video .contents::after { width:calc(183/768*100vw); height:calc(171/768*100vw); top:calc(-15/768*100vw); left:calc(-45/768*100vw); }
#dx .contents::after { width:calc(88/768*100vw); height:calc(123/768*100vw); top:calc(-145/768*100vw); right:calc(10/768*100vw); }
#in-1-minute .contents { padding-top:calc(120/768*100vw); }
#in-1-minute .contents::after { margin:auto; width:calc(139/768*100vw); height:calc(112/768*100vw); top:0; right:0; left:0; }
#magazine .contents { padding-top:calc(60/768*100vw); }
#magazine .contents::after { width:calc(156/768*100vw); height:calc(176/768*100vw); top:calc(-30/768*100vw); right:calc(-38/768*100vw); }
#company-profile .contents { padding-top:calc(60/768*100vw); }
#genealogy-chronology .contents { padding-bottom:calc(250/768*100vw); }
#company-profile .contents::after { width:calc(179/768*100vw); height:calc(214/768*100vw); top:0; left:0; }
#genealogy-chronology .contents::after { width:calc(376/768*100vw); height:calc(290/768*100vw); top:auto; bottom:0; right:calc(-20/768*100vw); }

#SULS .contents { padding-top:calc(60/768*100vw); }
#SULS .contents::after { width:calc(156/768*100vw); height:calc(86/768*100vw); bottom:0; right:calc(-20/768*100vw); }
#new-system .contents { padding-bottom:calc(180/768*100vw); }
#new-system .contents::after { margin:auto; width:calc(118/768*100vw); height:calc(138/768*100vw); top:auto; bottom:0; left:0; right:0; }
}
/************************************************************************
  #magazine
************************************************************************/
main section.box article#magazine ul { display:flex; justify-content:space-between; }
main section.box article#magazine ul li { display:flex; flex-direction:column; justify-content:center; }
main section.box article#magazine ul li h3 { order:2; width:auto; text-align:center; display:inline-block; align-self:center; }
main section.box article#magazine ul li p.img { order:1; }

a.data-lity { display:inline-block; position:relative; }
a.data-lity::before { content:''; width:min(calc(32/1280*100vw), 32px); height:min(calc(32/1280*100vw), 32px); background:url('../images/arrow.svg') no-repeat; background-size:100% auto; display:block; position:absolute; top:0;right:0; }

/************************************************************************
  ul.thumb-list
************************************************************************/
ul.thumb-list { margin:auto; display:flex; justify-content:space-between; }
ul.thumb-list.jc-center { justify-content:center; }
ul.thumb-list li p.img { margin-bottom:min(calc(20/1280*100vw), 20px) !important; }
/* ============ smart phone ============ */
@media (max-width:768px){
ul.thumb-list li { width:calc(255/768*100vw); }
ul.thumb-list li p.img { margin-bottom:calc(35/768*100vw) !important; }
}
/************************************************************************
  .lity
************************************************************************/
.lity { background-color:rgba(217,238,251,0.8); }
.lity-content:after { box-shadow:none;  }
.lity-container img { max-width:90vw !important; max-height:90vh !important; border:5px solid #ffffff; }
.lity-close { width:50px; height:50px; background-color:#64b4e1; text-shadow:none; font-size:60px; }
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { width:50px; height:50px; background-color:#64b4e1; text-shadow:none; font-size:60px; }
/************************************************************************
  #book
************************************************************************/
#book { width:90vw; max-width:90vw !important; height:90vh; max-height:90vh !important; }
#book iframe { width:100%; height:100%; }

a.btn { margin:auto; padding:0.5em 2em 0.5em 1em; border-radius:25px; background-color:#ffffff; color:#018ce1; border:2px solid #018ce1; font-size:min(calc(14/1280*100vw), 14px); display:inline-block; }
p.link { text-align:center; }
p.link a::after { right:0.8em; }
/* ============ smart phone ============ */
@media (max-width:768px){
a.btn { border-radius:calc(30/768*100vw); border-width:calc(2/768*100vw); font-size:calc(14/768*100vw); }
p.link a { font-size:calc(14/768*100vw); }
}
/************************************************************************
  #genealogy-chronology
************************************************************************/
#genealogy-chronology ul.thumb-list li { width:calc(305/768*100vw); }
/************************************************************************
  #new-system
************************************************************************/
#new-system ul.thumb-list li { width:calc(305/768*100vw); }
/************************************************************************
  .modal-video-close-btn
************************************************************************/
.modal-video-inner { display:flex; align-items:center; position:static; }
.modal-video-close-btn { width:50px; height:50px; border-radius:0; top:0; right:0; left:auto;     position: fixed; }
/************************************************************************
  .horizontal-scrolling
************************************************************************/
.horizontal-scrolling { width:90vw; height:90vh; overflow:scroll; }
.horizontal-scrolling p.img { margin:auto; width:100%; height:100%; text-align:center; }
.horizontal-scrolling img { width:auto; max-width:initial !important; height:100%; max-height:initial !important; }

.lity-opened .horizontal-scrolling { display:flex; justify-content:center; align-items:center; }
/************************************************************************
  .vertical-scrolling
************************************************************************/
.vertical-scrolling { width:90vw; height:90vh; overflow:scroll; }
.vertical-scrolling p.img { margin:auto; width:100%; height:100%; }
.vertical-scrolling img { width:100%; max-width:initial !important; height:auto; max-height:initial !important; }

.lity-opened .vertical-scrolling { display:flex; justify-content:center; align-items:center; }