@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;
  margin: 54px 0 29px;
}
#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"] .block-event-page--header-freespace {
  margin-bottom: 100px;
}
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-inner {
  margin: 0;
  position: relative;
  z-index: 1;
  background: #a0846c;
  width: 100%;
}
html[data-browse-mode="P"] #jr-worktote .h1-inner .figure img {
  width: 100%;
}
html[data-browse-mode="P"] #jr-worktote .forwork {
  position: absolute;
  width: 480px;
  height: 156px;
  top: 130px;
  right: -140px;
}
html[data-browse-mode="S"] #jr-worktote .forwork {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 62px;
  left: 10px;
}
html[data-browse-mode="P"] #jr-worktote .h1-main {
  position: absolute;
  top: 314px;
  left: calc(140 / 1920 * 100vw);
  z-index: 1;
}
html[data-browse-mode="P"] #jr-worktote .h1-main h1 {
  margin: 0;
  padding: 0;
}
html[data-browse-mode="P"] #jr-worktote .subtitle {
  position: absolute;
  left: calc(140 / 1920 * 100vw);
  bottom: 75px;
  display: none;
}
.slick div {
  line-height: 1;
  display: block;
  vertical-align: bottom;
}
.slick div img{
  vertical-align: bottom;
}
html[data-browse-mode="P"] #jr-worktote .item { padding: 140px 0; background: #F1ECD4;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) { background: #E9E4DF;}
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: 526px; padding: 0 0 0 0; position: relative; box-sizing: border-box;

}
.slick > div:nth-child(2) {
  display: none;
}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .img { padding: 0;} 
html[data-browse-mode="P"] #jr-worktote .item .img > img { width: 526px;}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(odd) .num {
  position: absolute;
  bottom: 35px;
  left: 31px;
  z-index: 1;
}
html[data-browse-mode="P"] #jr-worktote .item .brand {
  position: absolute;
  right: 28px;
  bottom: 34px;
}
html[data-browse-mode="P"] #jr-worktote .item:nth-child(even) .num {
  position: absolute;
  bottom: 35px;
  left: 37px;
  z-index: 1;
}
.img-inner {
  position: relative;
}
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: 600px;
	padding: 55px 0 0 0;
	box-sizing: border-box;
}
html[data-browse-mode="P"] #jr-worktote .item h2 { 
  margin: 39px auto 0;
  width: max-content;
}
html[data-browse-mode="P"] #jr-worktote .item h2 img {
  vertical-align: bottom; 
}
html[data-browse-mode="P"] #jr-worktote .item h3 { 
  margin: 0 auto 15px;
  width: max-content;
  font-size: 31px;
  padding: 0 0 13px;
  border-bottom: 1px solid #5D4B41;
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
  font-style: normal;
  color: #5D4B41;
}
html[data-browse-mode="P"] #jr-worktote .item .comment {
  width: 600px;
  color: #5D4B41;
  margin: 0 0 0;
  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: 527px; display: block; margin: 0 auto;}

/* ==========================
   SP
========================== */
html[data-browse-mode="S"] #jr-worktote .pc { display: none;}

html[data-browse-mode="S"] #jr-worktote .h1-inner {
  position: relative;
}
html[data-browse-mode="S"] #jr-worktote .h1-main { 
  position: absolute;
  top: 167px;
  left: 25px;
  padding: 0;
}
html[data-browse-mode="S"] #jr-worktote .subtitle {
  position: absolute;
  bottom: 24px;
  left:25px;
  display: none;
}
html[data-browse-mode="S"] #jr-worktote .subtitle img {
  height: 25px;
}
html[data-browse-mode="S"] #jr-worktote .h1-main h1 {
  padding: 0; 
}
html[data-browse-mode="S"] #jr-worktote .h1-main h1 img {
  width: calc(100% - 25px);
}
html[data-browse-mode="S"] #jr-worktote h1 img { width: 100%;}
html[data-browse-mode="S"] #jr-worktote .item { padding: 60px 24px 60px; background: #FFF;}
html[data-browse-mode="S"] #jr-worktote .item:nth-child(odd) { background: #F1ECD4;}
html[data-browse-mode="S"] #jr-worktote .item:nth-child(even) { background: #E9E4DF;}
html[data-browse-mode="S"] #jr-worktote .item .img02 {padding: 0 24px;}
html[data-browse-mode="S"] #jr-worktote .item .img { padding: 0 24px; margin: 0; position: relative;}
html[data-browse-mode="S"] #jr-worktote .item .img .img-inner .num {
  position: absolute;
  bottom: 18px;
  left: 18px;
  height: max-content;
  width: unset;
  top: unset;
  z-index: 1;
}
html[data-browse-mode="S"] #jr-worktote .item .img .img-inner .num img {
  height: 45px;
}
html[data-browse-mode="S"] #jr-worktote .item .img .img-inner .brand {
  position: absolute;
  right: 14px;
  bottom: 20px;
}
html[data-browse-mode="S"] #jr-worktote .item .img .img-inner .brand img {
  width: 12px;
}
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 {
	box-sizing: border-box;
}
html[data-browse-mode="S"] #jr-worktote .item h2 { padding: 20px 0 0; margin: 0 auto 30px; width: 100%;text-align: center;}
html[data-browse-mode="S"] #jr-worktote .item h2 a {
  display: block;
  text-align: center;
}
html[data-browse-mode="S"] #jr-worktote .item h2 img { width: unset;max-width: 100%;}
html[data-browse-mode="S"] #jr-worktote .item h2 img {
  height: 71px;
}
html[data-browse-mode="S"] #jr-worktote .item h3 {
  padding: 0 0 10px;
  margin: 22px 0 20px;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #5D4B41;
  font-family: "Zen Old Mincho", serif;
  color: #5D4B41;
}
html[data-browse-mode="S"] #jr-worktote .item .comment { 
  margin: 0 0 0;
  font-size: 13px;
  line-height: 2;
  color: #5D4B41;
}
html[data-browse-mode="S"] #jr-worktote .item .img02 a { display: block;}

html[data-browse-mode="S"] #jr-worktote {
  margin-bottom: 60px;
  overflow-x: hidden;
}

.fadeUp {
  
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-filter 2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-filter 2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-filter 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fadeUp.active {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/* 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%;}
}
@keyframes FromBlur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
#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;
}


/* .item アニメーション */


html[data-browse-mode="P"] #jr-worktote .item.will-animate .inner::before {
  opacity: 0;
}
/*
html[data-browse-mode="P"] #jr-worktote .item.will-animate .img-inner  {
  filter: blur(15px);
}*/
html[data-browse-mode="P"] #jr-worktote .item.will-animate h2 {
  opacity: 0;
}
html[data-browse-mode="P"] #jr-worktote .item.will-animate .img02 {
  opacity: 0;
}
html[data-browse-mode="P"] #jr-worktote .item.will-animate h3 {
  opacity: 0;
}
html[data-browse-mode="P"] #jr-worktote .item.will-animate .comment {
  opacity: 0;
}

html[data-browse-mode="P"] #jr-worktote .item.animation-start .inner::before {
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
/*
html[data-browse-mode="P"] #jr-worktote .item.animation-start .img-inner {
  filter: blur(0);
  animation-delay: .8s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: FromBlur;
}*/
html[data-browse-mode="P"] #jr-worktote .item.animation-start h2 {
  animation-delay: 1.0s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: FromBlur;
}
html[data-browse-mode="P"] #jr-worktote .item.animation-start .img02 {
  animation-delay: 1.8s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
html[data-browse-mode="P"] #jr-worktote .item.animation-start h3 {
  animation-delay: 2.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
html[data-browse-mode="P"] #jr-worktote .item.animation-start .comment {
  animation-delay: 2.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}





html[data-browse-mode="S"] #jr-worktote .item.will-animate .inner::before {
  opacity: 0;
}
html[data-browse-mode="S"] #jr-worktote .item.will-animate .img-inner {
  filter: blur(15px);
  opacity: 0;
}
html[data-browse-mode="S"] #jr-worktote .item.will-animate h2{
  opacity: 0;
}
html[data-browse-mode="S"] #jr-worktote .item.will-animate .img02 {
  opacity: 0;
}
html[data-browse-mode="S"] #jr-worktote .item.will-animate h3 {
  opacity: 0;
}
html[data-browse-mode="S"] #jr-worktote .item.will-animate .comment {
  opacity: 0;
}

html[data-browse-mode="S"] #jr-worktote .item.animation-start .inner::before {
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
html[data-browse-mode="S"] #jr-worktote .item.animation-start .img-inner {
  animation-delay: .8s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: FromBlur;
}
html[data-browse-mode="S"] #jr-worktote .item.animation-start h2 {
  animation-delay: 1.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: FromBlur;
}
html[data-browse-mode="S"] #jr-worktote .item.animation-start .img02 {
  animation-delay: 1.8s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
html[data-browse-mode="S"] #jr-worktote .item.animation-start h3 {
  animation-delay: 2.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}
html[data-browse-mode="S"] #jr-worktote .item.animation-start .comment {
  animation-delay: 2.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-name: BottomIn;
}


#text {
  mask: url(#mask);
  /*transform: scale(7.4)*/
  transform: scale(1);
  transform-origin: center;
}
html[data-browse-mode="P"] .handwriting {
  width: 480px;
  height: 156px;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;  
}
html[data-browse-mode="S"] .handwriting {
  width: 209px;
  height: 68px;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.start-animation {
  opacity: 1 !important;
}
/* --- ベースのテキスト設定 --- */
.handwriting_text {
  fill: #fff;
  -webkit-mask: url(#mask);
  mask: url(#mask);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* --- SVG全体の表示制御 --- */
html[data-browse-mode="P"] .handwriting { width: 480px; height: 156px; display: block; opacity: 0; transition: opacity 0.3s ease; }
html[data-browse-mode="S"] .handwriting { width: 209px; height: 68px; display: block; opacity: 0; transition: opacity 0.3s ease; }

/* クラスがついたらSVGを表示 */
.start-animation {
  opacity: 1 !important;
}

/* --- マスクの線（アニメーションの本体） --- */
.handwriting_mask_line {
  fill: none;
  stroke: #fff;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  /* 重要：初期状態は「2000」で固定し、アニメーションは書かない */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  
  will-change: stroke-dashoffset, transform;
}

/* クラスがついた瞬間にはじめてアニメーションを適用する */
.start-animation .handwriting_mask_line {
  animation: writing 3s ease-in-out forwards;
}

/* アニメーション定義（ひとつに絞る） */
@keyframes writing {
  0% {
    stroke-dashoffset: 2000; /* kから書き始めるスタート地点 */
  }
  100% {
    stroke-dashoffset: 4000; /* 描き切ったゴール地点 */
    transform: translateZ(0) scale(1.01);
  }
}