@charset "utf-8";
/* section--------------*/
#contents section{margin-top:100px;}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  #contents section{margin-top:50px;}
}
#header>.boxContents{border-bottom: none;}
#header.line>.boxContents{    border-bottom: 1px solid #c4c4c4;}
/* anim --------------*/
.item.animin{
	opacity:0;
}
.item.anim{
	-webkit-animation:	slideinBtoT 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal forwards;
	animation:			slideinBtoT 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 normal forwards;
}
.item.anim:nth-of-type(2){
	-webkit-animation-delay:0.2s;
	animation-delay:0.2s;
}
.item.anim:nth-of-type(3){
	-webkit-animation-delay:0.4s;
	animation-delay:0.4s;
}
/* slideinBtoT */
@-webkit-keyframes slideinBtoT{
	from{	-webkit-transform:translateY(100px); opacity:0;}
	to{		-webkit-transform:translateY(0); opacity:1;}
}
@keyframes slideinBtoT{
	from{	transform:translateY(100px); opacity:0;}
	to{		transform:translateY(0); opacity:1;}
}
.swiper-button-pause{position: absolute; bottom:-15px; right: 15px; text-indent: -10000px; width:30px; height:30px; background:#666 url(/img/ico_pause.png) 0 0 no-repeat; border-radius: 15px;}
.swiper-button-pause:hover{cursor: pointer; background-color: #ca004c;}
.swiper-button-pause.pause{background-image: url(/img/ico_play.png);}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  .swiper-button-pause{bottom:-35px;}
}
/* h2 heading--------------*/
#contents section h2{ position: relative;   font-size: 38px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0 0 60px;
    padding-top:20px;
    padding-bottom: 30px;
    text-align: center;
}
#contents .pickup h2{text-align: left;}
#contents .ir h2{text-align: right;}
#contents section h2::before{ content: ''; display: block; position: absolute; bottom:0; left:calc( 50% - 32px); width:64px; height: 10px; background: url(../shared/img/ttl_under.png) no-repeat left bottom;}
#contents .ir h2::before{left: inherit; right:0;}
#contents h2::after{display: block; margin-top:12px; font-size: 16px; letter-spacing: 0.05em;}
#contents .business h2::after{content: "Business Segments";}
#contents .topics h2::after{content: "News And Topics";}
#contents .pickup h2::after{content: "Pick Up";}
#contents .ir h2::after{content: "Investor Relations";}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  #contents section h2{font-size:24px;margin-bottom: 30px;padding-top: 50px;}
  #contents h2::after{font-size:10px; margin-top: 4px;}
}
/*triangle*/
.triangles1,.triangles2,.triangles3{/*zoom:.7; */position: relative;-webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;}
.triangles1 img[class^="s"] ,.triangles2 img[class^="s"],.triangles3 img[class^="s"]{width:18px; height: 18px;}
.triangles1 img[class^="m"] ,.triangles2 img[class^="m"],.triangles3 img[class^="m"]{width:26px; height: 26px;    }
.triangles1 img[class^="l"] ,.triangles2 img[class^="l"],.triangles3 img[class^="l"]{width:50px; height: 50px;}
.s_o, .m_p, .m_b, .l_p, .l_b{position: absolute;    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s ease;
    transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s ease;}
.triangles1 .s_o{top:0; left:0;    -webkit-transform: translate3d(0,0,-400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,-400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;}
.triangles1 .m_b{top: -15px;
    left: 34px; z-index: 1;-webkit-transform: translate3d(0,0,-400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,-400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;}
.triangles1 .l_p{top: 3px;
    left: 25px;-webkit-transform: translate3d(0,0,-400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    transform: translate3d(0,0,-400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;}
.triangles2 .s_o{top:0; left:0;    -webkit-transform: translate3d(0,0,400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;}
.triangles2 .m_p{top: -15px;
    left: 34px; z-index: 1;-webkit-transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;}
.triangles2 .l_b{top: 3px;
    left: 25px;-webkit-transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;}
.triangles3{margin-top:60px;}
.triangles3 .s_o{top: 35px;
    left: 0;    -webkit-transform: translate3d(0,0,400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,400px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;}
.triangles3 .m_p{top: 0;
    left: 13px; z-index: 1;-webkit-transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(360deg);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;}
.triangles3 .l_b{top: 34px;
    left: 33px;-webkit-transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    transform: translate3d(0,0,400px) rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;}

.triangles1.anim img,.triangles2.anim img,.triangles3.anim img{    opacity: 1;
    -webkit-transform: translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) !important;
    transform: translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) !important;}
.business .triangles1{left:36%;}
.topics .triangles2{left:77%;}
.pickup .triangles1{left:30%;}
.ir .triangles2{left:60%;}
.banner .triangles3{left:77%;}
.stories .triangles2{left: 72%;}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
.triangles1 img[class^="s"] ,.triangles2 img[class^="s"],.triangles3 img[class^="s"]{width:13px; height: 13px;}
.triangles1 img[class^="m"] ,.triangles2 img[class^="m"],.triangles3 img[class^="m"]{width:19px; height: 19px;    }
.triangles1 img[class^="l"] ,.triangles2 img[class^="l"],.triangles3 img[class^="l"]{width:36px; height: 36px;}
  .triangles1 .s_o, .triangles2 .s_o{top:0; left:0;}
  .triangles1 .m_b,.triangles2 .m_p{    top: -9px;
    left: 23px;}
  .triangles1 .l_p,.triangles2 .l_b{top: 4.5px;
    left: 17px;}
  .business .triangles1{left:18%;}
  .topics .triangles2{left:-2%;}
  .pickup .triangles1{left:55%;}
  .ir .triangles2{left:28%;}
  .stories .triangles2{left: 84%;top: 14px;}
}

/* Business Segments --------------*/

.business ul{width:100%; height: 530px; display: flex;  justify-content: space-between;}
.business ul li{width:calc(90% / 3); padding:2%;}
.business .tab{
  display: none;
}
.business dl{width:100%; display: flex;  flex-wrap: wrap; justify-content: space-between;}
.business dt{position: relative; width:100%;}
.business dt:before {
    position: absolute;
    content: "";
    border: 20px solid transparent;
    border-top: 20px solid #055cac;
    border-left: 20px solid #055cac;
    top: 0;
    left: 0;
    z-index: 2;
}
.business li:nth-child(3) dt:before {    border-top: 20px solid #fb6694; border-left: 20px solid #fb6694;}
.business li:nth-child(2) dt:before {    border-top: 20px solid #ff7700; border-left: 20px solid #ff7700;}
.business dt a{
  display: block; position: relative; width:100%; height: 126px; padding-top:45px; background: #fff; text-align: center; text-decoration: none; font-size:16px; font-weight: bold;
}
.business li dt a{color:#333;}
.business dt a:after{content: "";
width: 18px;
height: 18px;
position: absolute;
top: calc(50% - 10px);
right: 26px;
background: url(../shared/img/icn_arw.png) no-repeat center center;
background-size: contain;}
.business dt a:before{display:block; font-size:28px; font-weight: 700;}
.business li:nth-child(1) dt a:before{content:"Fashion"; color:#055cac;}
.business li:nth-child(3) dt a:before{content:"Bridal"; color:#fb6694;}
.business li:nth-child(2) dt a:before{content:"Entertainment"; color:#ff7700;}
.business dt+dd a::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    right: 26px;
    background: url(../shared/img/icn_arw.png) no-repeat center center;
    background-size: contain;
}
.business li dd:nth-child(n+2){width:46%;}
.business li.fashion dd:nth-child(4)/*,
.business li.entertainment dd:nth-child(4)*/{margin-left:25%; margin-right: 25%;}
.business li:nth-child(3) dd:nth-child(n+2){width:100%;}
.business li dd:nth-child(n+2) a{    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255,255,255,.85);
    height: 56px;
    margin-top: 29px;
    text-align: center;
    padding: 22px 44px;}
.business li dd:nth-child(n+2) a img{ margin: 0 auto;
    width: auto;
    max-height: 100%;}
.business li.bridal dd:nth-child(n+2) img{max-width: 60%;}
.business li dd:nth-child(n+2) a::after {content: "";
    width: 17px;
    position: absolute;
    right: 17px;
      height: 12px;
      top: calc(50% - 6px);
      background: url(../shared/img/icn_blank.png) no-repeat center center;
      background-size: 100% 100%;
    }
.business .panel{position:relative;}

@media only screen and (min-width: 768px), only screen and (mix-device-width: 768px){
  /* Only PC */
  .business li dd{display: none;}
  .business .non-active{opacity: 0.5;}
  .business .bg-group{position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 530px; z-index: -1;}
  .business .bg-group div.default{opacity: 1;}
  .business .bg-group div{opacity: 0;
      position: absolute;
      z-index: -2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover; background-size: cover;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      transition: opacity 0.3s, -webkit-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);}
  .business .bg-group div.show{opacity: 1; z-index: -1; -webkit-transition: opacity 0.3s, -webkit-transform 20s linear;
    transition: opacity 0.3s, -webkit-transform 20s linear;
    transition: opacity 0.3s, transform 20s linear;
    transition: opacity 0.3s, transform 20s linear, -webkit-transform 20s linear;
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);}
  .business .bg-group .default{  background-image: url(../img/top_business_slide00.jpg);}
  .business .bg-group .fashion00{  background-image: url(../img/top_business_slide01.jpg);}
  .business .bg-group .fashion01{  background-image: url(../img/top_business_slide01-1.jpg);}
  .business .bg-group .fashion02{  background-image: url(../img/top_business_slide01-2.jpg);}
  .business .bg-group .fashion03{  background-image: url(../img/top_business_slide01-3.jpg);}
  .business .bg-group .fashion04{  background-image: url(../img/top_business_slide01-4.jpg);}
  .business .bg-group .bridal00{  background-image: url(../img/top_business_slide02.jpg);}
  .business .bg-group .bridal01{  background-image: url(../img/top_business_slide02-1.jpg);}
  .business .bg-group .bridal02{  background-image: url(../img/top_business_slide02-2.jpg);}
  .business .bg-group .entertainment00{  background-image: url(../img/top_business_slide03.jpg);}
  .business .bg-group .entertainment01{  background-image: url(../img/top_business_slide03-1.jpg);}
  .business .bg-group .entertainment02{  background-image: url(../img/top_business_slide03-2.jpg);}
  .business .bg-group .entertainment03{  background-image: url(../img/top_business_slide03-3.jpg);}
  .business .bg-group .entertainment04{  background-image: url(../img/top_business_slide03-4.jpg);}
}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  .business li dd{display: block !important; opacity:1;}
  #contents .business h2{margin-bottom:150px;}
  .business ul{display: block; width: calc(100% - 30px); height: 300px; padding:65px 15px; }
  .business ul li{width:calc(100% - 30px); margin:0; position: absolute; padding: 0; }
  .business .tab{
    display: table; text-align: center; position: absolute; top: -184px; left:-15px;
    width: calc((100% + 30px) / 3); height: 120px; background-color:#d9e7f3; font-size: 3.3vw; letter-spacing: 0.01em;
  }
  .business .tab::before{    position: absolute;
    content: "";
    border: 20px solid transparent;
    border-top: 20px solid #fff;
    border-left: 20px solid #fff;
    top: 0;
    left: 0;
    z-index: 2;}
  .business li:nth-child(1) .tab{ }
  .business li:nth-child(3) .tab{left: 68%; background-color:#fee8ef;}
  .business li:nth-child(2) .tab{left: 32%; background-color:#ffebd9;}
  .business li.act:nth-child(1) .tab{background-color:#055cac;}
  .business li.act:nth-child(3) .tab{background-color:#fb6694;}
  .business li.act:nth-child(2) .tab{background-color:#ff7700;}
  .business .tab a:before{display:block; font-size: 2.5vw; font-weight: 700;}
  .business li .tab a{text-decoration: none; display: table-cell; padding-top:2vh; line-height: 1.5; width: 100%; height: 100%; vertical-align: middle;}
  .business li.act .tab a{color:#fff !important;}
  .business li:nth-child(1) .tab a{color:#055cac;}
  .business li:nth-child(3) .tab a{color:#ca004c;}
  .business li:nth-child(2) .tab a{color:#be4416;}
  .business li:nth-child(1) .tab a:before{content:"Fashion";}
  .business li:nth-child(3) .tab a:before{content:"Bridal";}
  .business li:nth-child(2) .tab a:before{content:"Entertainment";}
  .business ul li dl{display: none;}
  .business ul li.act dl{display:flex;}
  .business dt {display: table;}
  .business dt .sp-dsp-block{display: inline-block;}
  .business dt a{background:rgba(255,255,255,.85); height:80px; padding-top: 0; font-size:14px;display: table-cell; vertical-align: middle;}
  .business dt a:before{display: none;}
  .business li dd:nth-child(n+2) a{height: 39px;
    padding: 15px 44px;}
  .business .bg-group{position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 400px; z-index: -1;}
  .business .bg-group div{opacity: 0; width: 100%;
    height: 100%;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    z-index: -2;-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}
  .business .bg-group div.show{opacity: 1; z-index: -1;}
  .business .bg-group .fashion00{background-image:url(../img/top_business_panel01.jpg)}
  .business .bg-group .bridal00{background-image:url(../img/top_business_panel02.jpg)}
  .business .bg-group .entertainment00{background-image:url(../img/top_business_panel03.jpg)}

}
/* News & Topics --------------*/
.topics h3{font-size: 18px; padding-bottom: 6px; border-bottom:solid 1px #c2c2c2;}
.topics .box{position: relative; flex-basis: auto; width:438px;}
.topics .box-clm2>*:nth-child(even){margin-left:122px}
.topics .rss{position: absolute;
    top:2px;
    right: 0;
    letter-spacing: 0em;
    font-size: 12px;
    line-height: 19px;
    font-weight: bold;
    font-style: normal;
    white-space: nowrap;
    background-color: #ca004c;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 60px;
    height: 20px;
    font-weight: 400;}
.topics .rss a{display: block; color:#fff; text-decoration: none;}
.topics iframe{height: 690px; width: 100%;}
.topics .btn{margin-top:20px;}
.topics .btn a{position: relative; display: block; padding:26px; border:solid 1px #c2c2c2; text-align: center; font-size: 16px; color:#ca004c; text-decoration: none;}
.topics .btn a::after{content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    right: 26px;
    background: url(../shared/img/icn_arw.png) no-repeat center center;
    background-size: contain;}
.topics .btn a:hover{text-decoration: underline;}
@media only screen and (min-width: 768px), only screen and (mix-device-width: 768px){
  /* Only PC */
  .topics h3+.accordion{display: block !important;}
}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  .topics h3{position: relative; background:#eaeaea; border:none; padding:24px;}
  .topics h3:hover{ cursor: pointer;}
  .topics h3::after{content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    right: 26px;
    background: url(../shared/img/icn_plus.png) no-repeat center center;
    background-size: cover;}
  .topics h3.open::after{background: url(../shared/img/icn_minus.png) no-repeat center center; background-size: cover;}
  .topics h3.open+.accordion{display: block;}
  .topics .box,.topics .box-clm2>*:nth-child(even){width:auto; margin-left: 0; margin-bottom:25px;}
  .topics .rss{top:88px;}
  .topics .accordion{padding-top:13px;}
}

/* Pick Up --------------*/
.pickup{position: relative; padding-bottom: 100px;}
.pickup::after{content:""; display: block; position: absolute; top:40px; right: 0; z-index: 0; width:75%; height: 472px; background: url(../img/top_bg_gray.png); background-size: 2.5%;}
.pickup > *{position: relative; z-index: 1;}
.pickup h2{padding-left:8%; text-align: left;}
#contents .pickup h2::before{left:8%;}
.pickup .link-Category{margin-top:70px;}
.pickup .link-Category .box{flex-basis: auto;}
.pickup .link-Category .box figure { width:286px; height: 240px; margin-left:26px; overflow: hidden;}
.pickup .link-Category .box figure img{height: 100%; width: auto; max-width: inherit; margin-left: -70px;}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  .pickup{padding-bottom: 100px;}
  .pickup::after{width: 60%; height: 756px; top: 42px; background-size:5%;}
  .pickup .link-Category .box {margin-top:42px;}
  .pickup .link-Category .box figure{width:calc(100% - 26px); margin-left:13px;
    height: auto;}
  .pickup .link-Category .box figure img{margin-left:0; width: auto !important; height: auto; max-width: 100%;}
  .pickup .link-Category>.box a{background: none;}
  .pickup .link-Category>.box a:before{border-width:80px;}
  .pickup .link-Category>.box a dt{width:102px;}
  .pickup .link-Category>.box a:after{left:150px;}
}

/* IR --------------*/
.ir{position: relative; padding-bottom: 100px;}
.ir::after{content:""; display: block; position: absolute; top:40px; left: 0; z-index: 0; width:75%; height: 472px; background: url(../img/top_bg_pink.png); background-size: 2.5%;}
.ir > *{position: relative; z-index: 1;}
.ir h2{padding-right:8%;text-align: right;}
#contents .ir h2::before{left: 87%; }
.ir .box{flex-basis:inherit; width:260px; margin-top: 50px; margin-left: -50px;}
.ir .box a{width:247px; height:207px; text-align: center;}
.ir .link-Category{margin-top:-130px;}
.ir .link-Category>.box a:before{left:-12px; border-width:30px;}
.ir .link-Category>.box a:after{left:38px; }
.ir .box a span{position: relative; display: block; width:100%; height: calc(100% - 30px); padding-top:30px; font-size: 20px; line-height: 1.2; color:#ca004c;}
.ir .box a span::after{position: absolute; bottom:25px; display: block; left:44%;-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;-moz-transform: scale(0.8);
    -webkit-transform: scale(0.8) translateY(-12%) translateX(-42%);
    -ms-transform: scale(0.8) translateY(-12%) translateX(-42%);
    transform: scale(0.8) translateY(-12%) translateX(-42%);}
.ir .box:nth-child(1) a span::after{ content:url(../img/top_ir_img01.png);}
.ir .box:nth-child(2) a span::after{ content:url(../img/top_ir_img02.png);}
.ir .box:nth-child(3) a span::after{ content:url(../img/top_ir_img03.png);}
.ir .box:nth-child(4) a span::after{ content:url(../img/top_ir_img04.png);}
.ir .box:nth-child(5) a span::after{ content:url(../img/top_ir_img05.png);}
.ir .box:nth-child(6) a span::after{ content:url(../img/top_ir_img06.png);}
.ir .box a:hover span::after{-moz-transform: scale(1);
    -webkit-transform: scale(1) translateY(-9%) translateX(-33%);
    -ms-transform: scale(1) translateY(-9%) translateX(-33%);
    transform: scale(1) translateY(-9%) translateX(-33%);}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
    #contents .ir h2::before{left: 75%; }
  .ir:after{width: 60%; height: 500px; top: -20px; background-size:5%;}
  .ir .box{width: 100%; margin: 0;}
  .ir .link-Category>.box+.box{margin-top:0;}
  .ir .link-Category{margin-top: 0; padding:20px; background-color: #f2f2f2;}
  .ir .link-Category::before{position: absolute;
    content: "";
    border: 30px solid transparent;
    border-top: 30px solid #ca004c;
    border-left: 30px solid #ca004c;
    top: -10px;
    left: -10px;
    z-index: 2;
    transition: all 0.5s ease 0s;}
  .ir .link-Category::after{    position: absolute;
    content: "";
    border: 5px solid transparent;
    border-bottom: 5px solid #81001b;
    border-right: 5px solid #81001b;
    top: -10px;
    left: 40px;
    z-index: 2;
    transition: all 0.5s ease 0s;}
  .ir .box a{width:auto; height: auto;  margin: 24px; text-align: left; font-weight: bold;}
  .ir .link-Category>.box a:before,.ir .link-Category>.box a:after{display: none;}
  .ir .box a span{padding-top: 0; padding-left:30px; color:#333; font-size: 16px;}
  .ir .box a span::after{display: none;}
  .ir .box a span::before{content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    left:0;
    background: url(../shared/img/icn_arw.png) no-repeat center center;
    background-size: contain;}
}
/* banner --------------*/
.banner .link-Category>.box{flex-basis: calc((100% - 164px) / 2);}
.banner .link-Category>.box a figure{height: 265px; margin-left: 20px; overflow: hidden;}
.banner .link-Category>.box a figure img{width:100%;}
.banner .link-Category>.box:not(:nth-child(3n+1)){margin-left:70px;}
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
  .banner .link-Category{margin-top:0;}
  .banner .link-Category>.box+.box{margin-top:42px;}
  .banner .link-Category>.box a{background:none;}
  .banner .link-Category>.box a:before{border-width:80px;}
  .banner .link-Category>.box a:after{left:150px;}
  .banner .link-Category>.box a figure{margin-left:13px; height:auto; max-height: 265px;}
  .banner .link-Category>.box:not(:nth-child(3n+1)){margin-left: 0;}
  .banner .link-Category>.box a dt{width:102px;}
}
/* stories --------------*/
.stories .btn{
    margin:20px auto 0 auto;
    width: 50%;
}
.stories .btn a{
    position: relative;
    display: block;
    padding:26px;
    border:solid 1px #c2c2c2;
    text-align: center;
    font-size: 16px;
    color:#ca004c;
    text-decoration: none;
    background: #fff;
}
.stories .btn a::after{
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    right: 26px;
    background: url(../shared/img/icn_arw.png) no-repeat center center;
    background-size: contain;
}
.stories .btn a:hover{text-decoration: underline;}

.storiesBox{
    background: url("/img/top_stories_bg.png") no-repeat;
    width: 964px;
    height: 550px;
    margin: 0 auto;
    padding: 50px 118px;
}
.storiesBox .storiesBoxInner {
/*    border: 2px solid #0f0;*/
}
.storiesBox .storiesBoxInner p.catch{
    font-size: 18px;
    font-weight: bold;
    color: #ca004c;
    text-align: center;
    margin-bottom: 1em;
}
.storiesBox .storiesBoxInner ul{
    display: flex;
    justify-content: space-between;
    gap: 2%;
    margin-bottom: 20px;
}
.storiesBox .storiesBoxInner ul li{
    display: flex;
}
.storiesBox .storiesBoxInner ul li a{
    display: flex;
    flex-direction: column;
}
.storiesBox .storiesBoxInner ul li a p.btn{
    position: relative;
    display: block;
    padding: 20px 46px 20px 26px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    /*color: #ca004c;*/
    color: #000;
    text-decoration: none;
    background: #fff;
    flex-grow: 1;
    width: calc(100% - 72px);
    border: none;
    text-align: left;
    margin-top: 10px;
}
.storiesBox .storiesBoxInner ul li a p.btn::after{
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% - 10px);
    right: 20px;
    background: url(../shared/img/icn_arw.png) no-repeat center center;
    background-size: contain;
}
.storiesBox .storiesBoxInner ul li a p.btn:hover{text-decoration: underline;}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px){
    .storiesBox{
        background-size: cover;
        transform: scale(1, -1);
        width: auto;
        height: auto;
        padding: 40px 20px;
    }
    .storiesBox .storiesBoxInner{
        transform: scale(1, -1);
        margin: 0 auto;
    }
    .storiesBox .storiesBoxInner ul{
        display: block;
        margin: 0 auto;
    }
    .storiesBox .storiesBoxInner ul li{
        margin-bottom: 30px;
    }
    .storiesBox .storiesBoxInner ul li a {
        display: block;
    }
    .storiesBox .storiesBoxInner ul li a p.btn{
        margin-top: 10px;
        width: auto;
    }
    .stories .btn{
        width: 100%;
    }
}

