@charset "UTF-8";

#jr-worktote {
  color: #4B4440;
}

/* animation */
@keyframes BottomIn {
  0%   { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes LeftIn {
  0%   { opacity: 0; transform: translateX(-80px);}
  100% { opacity: 1; transform: translateX(0);}
}
@keyframes RightIn {
  0%   { opacity: 0; transform: translateX(80px);}
  100% { opacity: 1; transform: translateX(0);}
}
@keyframes FadeIn {
	0%   { opacity: 0;}
	100% { opacity: 100%;}
}
#jr-worktote .bottomIn {
  opacity: 0;
  transform: translateY(40px);
}
#jr-worktote .animation-start.bottomIn {
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
#jr-worktote .leftIn {
  opacity: 0;
  transform: translateX(-80px);
}
#jr-worktote .animation-start.leftIn {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: LeftIn;
}
#jr-worktote .rightIn {
  opacity: 0;
  transform: translateX(80px);
}
#jr-worktote .animation-start.rightIn {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: RightIn;
}
#jr-worktote .fadeIn {
  opacity: 0;
}
#jr-worktote .animation-start.fadeIn {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: FadeIn;
}

/* ==========================
   PC
========================== */
html[data-browse-mode="P"] .pane-left-menu { display: none;}
html[data-browse-mode="P"] .pane-contents .container { width: 100%;}
html[data-browse-mode="P"] .pane-main { margin-top: 0;}
html[data-browse-mode="P"] #jr-worktote .sp { display: none;}
html[data-browse-mode="P"] #jr-worktote h1 { margin: 0;}
html[data-browse-mode="P"] #jr-worktote h1 img { width: 100%;}
html[data-browse-mode="P"] #jr-worktote .item { padding: 100px 0; background: #FFF;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) { background: #EFE8E8;}
html[data-browse-mode="P"] #jr-worktote .item .inner { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .inner { flex-direction: row-reverse;}
html[data-browse-mode="P"] #jr-worktote .item .img { width: 613px; padding: 113px 0 0 79px; position: relative; box-sizing: border-box;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .img { padding: 113px 79px 0 0;} 
html[data-browse-mode="P"] #jr-worktote .item .img > img { width: 534px;}
html[data-browse-mode="P"] #jr-worktote .item .num { position: absolute; top: 0; left: 0;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .num { left: -50px;}
html[data-browse-mode="P"] #jr-worktote .item .size { margin: 20px 0 0; text-align: left;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .size { text-align: right;}
html[data-browse-mode="P"] #jr-worktote .item .size img { height: 18px; vertical-align: top;}
html[data-browse-mode="P"] #jr-worktote .item .detail {
	width: 500px;
	padding: 183px 0 0 60px;
	background-image: url(/img/usr/event/jr-worktote/bg_brush_gray.png);
	background-repeat: no-repeat;
	background-position: left 153px;
	box-sizing: border-box;
}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .detail { background-image: url(/img/usr/event/jr-worktote/bg_brush_white.png);}
html[data-browse-mode="P"] #jr-worktote .item h2 { margin: 0 0 25px;}
html[data-browse-mode="P"] #jr-worktote .item h3 { margin: 0 0 15px; font-size: 24px;}
html[data-browse-mode="P"] #jr-worktote .item .comment { width: 420px; margin: 0 0 70px; font-size: 16px; line-height: 1.75;}
html[data-browse-mode="P"] #jr-worktote a:hover { opacity: .8;}
html[data-browse-mode="P"] #jr-worktote .item .img02 a { width: 400px; display: block;}

/* ==========================
   SP
========================== */
html[data-browse-mode="S"] #jr-worktote .pc { display: none;}
html[data-browse-mode="S"] #jr-worktote h1 { padding: 0;}
html[data-browse-mode="S"] #jr-worktote h1 img { width: 100%;}
html[data-browse-mode="S"] #jr-worktote .item { padding: 30px 20px 50px; background: #FFF;}
html[data-browse-mode="S"] #jr-worktote .item:nth-child(even) { background: #EFE8E8;}
html[data-browse-mode="S"] #jr-worktote .item .img { padding: 15vw 12% 0; margin: 0 0 25px; position: relative;}
html[data-browse-mode="S"] #jr-worktote .item .num { width: 38%; position: absolute; top: 0; left: -2%;}
html[data-browse-mode="S"] #jr-worktote .item .size { padding: 5px 0 0; text-align: left; line-height: 0;}
html[data-browse-mode="S"] #jr-worktote .item .size img { width: 92px;}
html[data-browse-mode="S"] #jr-worktote .item .detail {
	background-image: url(/img/usr/event/jr-worktote/bg_brush_gray.png);
	background-repeat: no-repeat;
	-webkit-background-size: 90% auto;
	background-size: 90% auto;
	background-position: center top;
	box-sizing: border-box;
}
html[data-browse-mode="S"] #jr-worktote .item:nth-child(even) .detail { background-image: url(/img/usr/event/jr-worktote/bg_brush_white.png);}
html[data-browse-mode="S"] #jr-worktote .item h2 { padding: 25px 0 0; margin: 0 0 15px;}
html[data-browse-mode="S"] #jr-worktote .item h2 img { width: 100%;}
html[data-browse-mode="S"] #jr-worktote .item h3 { padding: 0; margin: 0 0 5px; font-size: 16px; font-weight: normal;}
html[data-browse-mode="S"] #jr-worktote .item .comment { margin: 0 0 30px; font-size: 13px; line-height: 1.7;}
html[data-browse-mode="S"] #jr-worktote .item .img02 a { width: 80%; margin: 0 auto; display: block;}