@charset "utf-8";

/*--------------------------------------------------
  全体レイアウト
--------------------------------------------------*/
/* common */
.is-rohtoday_2026 .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* main */
.is-rohtoday_2026 .main-contents {
	background: #005bac;
}
.is-rohtoday_2026 .main-contents::before {
		content: "";
		display: block;
		width: 100%;
		height: 90px;
		background: #d1f0ff;
		position: fixed;
		top: 0;
}

/*--------------------------------------------------
  全体レイアウト（PC・タブレット共通）
--------------------------------------------------*/
@media screen and (min-width: 769px) {
	.is-rohtoday_2026 .main-contents::after {
		content: "";
		display: block;
		width: 100%;
		height: 90px;
		background: #005bac;
	}
	.is-rohtoday_2026 .pc-bg-layer {
		position: sticky;
		top: 60px;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw; 
		height: 690px;
		background: #d1f0ff;
		z-index: 1;
		margin-right: -100vw;
	}
	.is-rohtoday_2026 .pc-view {
		margin: 0 auto;
		display: flex;
		position: relative;
		z-index: 0;
	}
	.is-rohtoday_2026 .sp-view {
		height: auto;
		margin: 20px auto;
		z-index: 3;
		flex-shrink: 0;
	}

	/* sp-view frame */
	.is-rohtoday_2026 .sp-view .sp-mask {
		width: 100%;
		height: auto;
		overflow: hidden;
		border-radius: 40px;
		border: solid 5px #005bac;
		box-sizing: border-box;
		position: relative;
	}
	/* inner */
	.is-rohtoday_2026 .sp-view .inner {
		width: 100%;
		height: auto;
		overflow-y: scroll;
		overflow-x: hidden;
		padding: 0;
		box-sizing: border-box;
		text-align: justify;
		position: relative;
	}
	/* custom scrollbar */
	.is-rohtoday_2026 .sp-view .inner.smooth-scroll {
		scroll-behavior: smooth;
	}
	.is-rohtoday_2026 .sp-view .inner::-webkit-scrollbar {
		display: none;
	}
	.is-rohtoday_2026 .sp-view .inner {
		scrollbar-width: none; /* Firefox */
	}
	.is-rohtoday_2026 .custom-scrollbar {
		position: absolute;
		top: 30px;
		bottom: 30px;
		right: 6px;
		width: 6px;
		z-index: 20;
		background: transparent;
		display: none !important;
	}
	.is-rohtoday_2026 .custom-bar-thumb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 3px;
		cursor: pointer;

		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	.is-rohtoday_2026 .sp-view .sp-mask:hover .custom-bar-thumb {
		opacity: 1;
		pointer-events: auto;
	}
	.is-rohtoday_2026 .side-area {
		width: 255px;
		position: sticky;
		top: 60px;
		height: max-content; 
		z-index: 2;
	}
}

/*--------------------------------------------------
  全体レイアウト（PC）
--------------------------------------------------*/
@media screen and (min-width: 900px) {
	.is-rohtoday_2026 .pc-view {
		width: 900px;
		height: auto;
	}
	.is-rohtoday_2026 .sp-view {
		width: 390px;
	}
	.is-rohtoday_2026 .side-area {
		width: 255px;
		height: 690px;
	}
}

/*--------------------------------------------------
  全体レイアウト（タブレット）
--------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 899px) {
	.is-rohtoday_2026 .pc-view {
		width: 100%;
		justify-content: center;
	}
	.is-rohtoday_2026 .left-area {
		transform-origin: right bottom;
	}
	.is-rohtoday_2026 .right-area {
		transform-origin: left bottom;
	}
	.is-rohtoday_2026 .side-area {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		overflow: hidden;
		position: sticky;
		top: 60px;
		height: 690px;
	}
}

/*--------------------------------------------------
  全体レイアウト（スマホ）
--------------------------------------------------*/
@media screen and (max-width: 768px) {
	.is-rohtoday_2026 .pc-view {
		width: 100vw;
		display: block;
	}
	.is-rohtoday_2026 .sp-view {
		width: 100%;
		height: auto;
		background: #b4e6ff;
		border-radius: 0;
	}

	/* inner */
	.is-rohtoday_2026 .sp-view .inner {
		width: 100%;
		height: auto;
		padding: 0;
		box-sizing: border-box;
		text-align: justify;
		background: #b4e6ff;
	}
	.is-rohtoday_2026 .sp-view .page-title,
	.is-rohtoday_2026 .sp-view .inner-content {
		margin: 0;
		padding: 2.56vw 7.69vw;
	}
	.is-rohtoday_2026 .sp-view .custom-scrollbar {
		display: none;
	}
	.is-rohtoday_2026 .left-area,
	.is-rohtoday_2026 .right-area {
		display: none;
	}
}


/*--------------------------------------------------
  sp-view
--------------------------------------------------*/
/* sp-view base */
.is-rohtoday_2026 .sp-view .page-title {
	width: 100%;
	box-sizing: border-box;
	background: #fcc;
}
.is-rohtoday_2026 .sp-view .inner-content {
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

/*--------------------------------------------------
  各コンテンツの背景パターン（PC表示）
--------------------------------------------------*/
/* background pattern */
.is-rohtoday_2026 .sp-view #rohtoday {
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp01_bg.png?$staticlink$") center top no-repeat;
	background-size: 390px;
	padding: 5px 0 60px;
	z-index: 15;
}
.is-rohtoday_2026 .sp-view #campaign {
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp02_bg.png?$staticlink$") center top no-repeat;
	background-size: 390px;
	margin-top: -100px;
	padding: 100px 0 140px;
	z-index: 14;
	position: relative;
}
.is-rohtoday_2026 .sp-view #notebook {
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp03_bg.png?$staticlink$") center top no-repeat;
	background-size: 390px;
	margin-top: -130px;
	padding: 110px 0 110px;
	z-index: 13;
}
.is-rohtoday_2026 .sp-view #rohtocampaign {
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp04_bg.png?$staticlink$") center top no-repeat;
	background-size: 390px;
	margin-top: -120px;
	padding: 100px 0 130px;
	z-index: 12;
}
.is-rohtoday_2026 .sp-view #slogan {
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp05_bg.png?$staticlink$") center top no-repeat;
	background-size: 390px;
	margin-top: -100px;
	padding: 130px 0 50px;
	z-index: 11;
}

/*--------------------------------------------------
  各コンテンツの背景パターン（768px以下）
--------------------------------------------------*/
/* background pattern (sp) */
@media screen and (max-width: 768px) {
	.is-rohtoday_2026 .sp-view #rohtoday {
		background-size: 100%;
		padding: 2.56vw 0 15.38vw;
	}
	.is-rohtoday_2026 .sp-view #campaign {
		background-size: 100%;
		margin-top: -25.64vw;
		padding: 25.64vw 0 35.90vw;
	}
	.is-rohtoday_2026 .sp-view #notebook {
		background-size: 100%;
		margin-top: -33.33vw;
		padding: 28.21vw 0 28.21vw;
	}
	.is-rohtoday_2026 .sp-view #rohtocampaign {
		background-size: 100%;
		margin-top: -30.77vw;
		padding: 25.64vw 0 30.77vw;
	}
	.is-rohtoday_2026 .sp-view #slogan {
		background-size: 100%;
		margin-top: -25.64vw;
		padding: 33.33vw 0 13.50vw;
	}
}

/*--------------------------------------------------
  各コンテンツの画像幅（PC）
--------------------------------------------------*/
@media screen and (min-width: 769px) {
	.is-rohtoday_2026 #rohtoday img,
	.is-rohtoday_2026 #campaign img,
	.is-rohtoday_2026 #notebook img,
	.is-rohtoday_2026 #rohtocampaign img,
	.is-rohtoday_2026 #slogan img {
		width: 390px;
		height: auto;
		object-fit: cover;
		margin-left: -5px;
		margin-right: -5px;
	}
}

/*--------------------------------------------------
  各コンテンツの画像幅（SP）
--------------------------------------------------*/
@media screen and (max-width: 768px) {
	.is-rohtoday_2026 #rohtoday img,
	.is-rohtoday_2026 #campaign img,
	.is-rohtoday_2026 #notebook img,
	.is-rohtoday_2026 #rohtocampaign img,
	.is-rohtoday_2026 #slogan img {
		width: 100vw;
	}
}

/*-------------------------
  #campaign
-------------------------*/
.is-rohtoday_2026 #campaign .campaign_item {
	position: relative;
	min-height: 535px;
}
.is-rohtoday_2026 #campaign .title_img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
.is-rohtoday_2026 #campaign .type-frameA {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.is-rohtoday_2026 #campaign #svg-mask-b1 {
	top: -10px;
}
.is-rohtoday_2026 #campaign #svg-mask-b2 {
	top: -5px;
}
.is-rohtoday_2026 #campaign .item_img {
	z-index: 1;
}

/* campaign btn (共通) */
.is-rohtoday_2026 .inner .campaignBtn {
	position: absolute;
	bottom: 35px;
	right: 45px;
	z-index: 5;
}
.is-rohtoday_2026 .campaign_item:nth-of-type(1) .campaignBtn {
	bottom: 45px;
}
.is-rohtoday_2026 .campaign_item:nth-of-type(2) .campaignBtn {
	bottom: 42px;
}
.is-rohtoday_2026 #rohtocampaign .campaignBtn {
	bottom: 80px;
	right: 30px;
}
.is-rohtoday_2026 .inner .campaignBtn a {
	display: block;
	width: 190px;
	height: 45px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp02_btn.png?$staticlink$") 0 0 no-repeat;
	background-size: 100%;
	text-indent: -99999px;
	position: relative;
	overflow: hidden;
}
.is-rohtoday_2026 .inner .campaignBtn a::before {
	content: "";
	display: block;
	width: 190px;
	height: 45px;
	position: absolute;
	top: 0;
	left: 0;
	inset: 0;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_sp02_btn.png?$staticlink$") 0 -50px no-repeat;
	background-size: 100%;
	opacity: 0;
	transition: 0.5s;
}
.is-rohtoday_2026 .inner .campaignBtn a:hover::before {
	opacity: 1.0;
}

@media screen and (max-width: 768px) {
	.is-rohtoday_2026 #campaign .campaign_item {
		min-height: 137.18vw;
	}
	.is-rohtoday_2026 .inner .campaignBtn {
		bottom: 8.5vw;
		right: 11.54vw;
	}
	.is-rohtoday_2026 .inner .campaignBtn a,
	.is-rohtoday_2026 .inner .campaignBtn a::before {
		width: 48.71vw;
		height: 11.54vw;
	}
}

/*-------------------------
  #slogan
-------------------------*/
.is-rohtoday_2026 .sp-view #slogan .slogan_copy {
	position: relative;
}
.is-rohtoday_2026 .sp-view #slogan .type-frameB {
	position: absolute;
	top: 0;
	left: auto;
	right: auto;
}

@media screen and (max-width: 768px) {
	.is-rohtoday_2026 #campaign .type-frameA {
		margin: 0;
	}
	.is-rohtoday_2026 .sp-view #slogan .type-frameB {
		left: 0;
		right: 0;
	}
	.is-rohtoday_2026 #rohtocampaign .campaignBtn {
		bottom: 18.51vw;
		right: 7.69vw;
	}
}


/*--------------------------------------------------
  左右エリア（PCのみ）
--------------------------------------------------*/
/*-------------------------
  side-area
-------------------------*/
/* animation */
.is-rohtoday_2026 .cloud01 {
	width: 120px;
	height: auto;
	position: absolute;
	top: 60px;
	left: 20px;
}
.is-rohtoday_2026 .cloud02 {
	width: 130px;
	height: auto;
	position: absolute;
	top: 170px;
	left: 105px;
}
.is-rohtoday_2026 .cloud03 {
	width: 115px;
	height: auto;
	position: absolute;
	top: 20px;
	left: 30px;
}
.is-rohtoday_2026 .cloud04 {
	width: 110px;
	height: auto;
	position: absolute;
	top: 390px;
	left: -40px;
}
.is-rohtoday_2026 .poppo {
	width: 71px;
	height: auto;
	position: absolute;
	top: 320px;
	left: 100px;
}
.is-rohtoday_2026 .rotta {
	width: 235px;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 15px;
}
.is-rohtoday_2026 .rocchi {
	width: 118px;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 13px;
}
.is-rohtoday_2026 .fluffy01 {
	animation: fluffy01 8s infinite;
}
@keyframes fluffy01 {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-15px); }
	80% { transform: translateY(15px); }
}
.is-rohtoday_2026 .fluffy02 {
	animation: fluffy02 8s infinite;
}
@keyframes fluffy02 {
	0%, 100% { transform: translateY(0); }
	20% { transform: translateY(15px); }
	70% { transform: translateY(-15px); }
}

/* pc menu */
.is-rohtoday_2026 .contents-menu {
	position: absolute;
	top: 100px;
	left: 10px;
}
.is-rohtoday_2026 .contents-menu h3 {
	width: 236px;
	height: auto;
	margin-bottom: 7px;
}
.is-rohtoday_2026 .contents-menu ul li {
	margin-bottom: 10px;
}
.is-rohtoday_2026 .contents-menu ul li a {
	display: block;
	text-indent: -99999px;
	position: relative;
	overflow: hidden;
	transition: 0.5s;
}
.is-rohtoday_2026 .contents-menu ul li a:hover {
	transform: translateY(-2px);
}
.is-rohtoday_2026 .contents-menu ul li a::before {
	content: "";
	display: block;
	opacity: 0;
	transition: 0.3s;
}
.is-rohtoday_2026 .contents-menu ul li a:hover::before {
	opacity: 1.0;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(1) a {
	width: 217px;
	height: 70px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu01.png") 0 0 no-repeat;
	background-size: 100%;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(1) a::before {
	width: 217px;
	height: 70px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu01.png") 0 -100px no-repeat;
	background-size: 100%;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(2) a {
	width: 217px;
	height: 47px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu02.png") 0 0 no-repeat;
	background-size: 100%;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(2) a::before {
	width: 217px;
	height: 47px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu02.png") 0 -100px no-repeat;
	background-size: 100%;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(3) a {
	width: 217px;
	height: 79px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu03.png") 0 0 no-repeat;
	background-size: 100%;
}
.is-rohtoday_2026 .contents-menu ul li:nth-of-type(3) a::before {
	width: 217px;
	height: 79px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu03.png") 0 -100px no-repeat;
	background-size: 100%;
}

.is-rohtoday_2026 .slogan-btn {
	position: absolute;
	bottom: 98px;
	left: 75px;
}
.is-rohtoday_2026 .slogan-btn a {
	display: block;
	width: 166px;
	height: 156px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu04.png") 0 0 no-repeat;
	background-size: 100%;
	text-indent: -99999px;
	position: relative;
	overflow: hidden;
	transition: 0.5s;
}
.is-rohtoday_2026 .slogan-btn a:hover {
	transform: translateY(-5px);
}
.is-rohtoday_2026 .slogan-btn a::before {
	content: "";
	display: block;
	width: 166px;
	height: 156px;
	background: url("../../../images/static/rohtoday_2026/rohtoday_2026_right_menu04.png") 0 -200px no-repeat;
	background-size: 100%;
	opacity: 0;
	transition: 0.3s;
}
.is-rohtoday_2026 .slogan-btn a:hover::before {
	opacity: 1.0;
}

/*--------------------------------------------------
 one stroke animation
--------------------------------------------------*/
.is-rohtoday_2026 .js-scroll-trigger {
	width: 100vw;
	height: auto;
}
.is-rohtoday_2026 .js-scroll-trigger image {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 769px) {
	.is-rohtoday_2026 .js-scroll-trigger {
		width: 390px;
		margin: 0 -5px;
	}
}
/* common */
.is-rohtoday_2026 .mask-line {
	fill: none;
	stroke: #ffffff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
/* typeA ribbon */
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-1-a1,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-1-a2,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-1-a3 {
	stroke-width: 8;
	animation: drawStage 2s linear forwards;
}
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-2-a1,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-2-a2,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-2-a3 {
	stroke-width: 3;
	animation: drawStage 3s linear forwards;
	animation-delay: 0.2s;
}
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-3-a1,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-3-a2,
.is-rohtoday_2026 .type-ribbon.is-animated #mask-path-3-a3 {
	stroke-width: 8;
	animation: drawStage 2s linear forwards;
	animation-delay: 0.3s;
}
/* typeB frameA */
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-1-b1,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-1-b2,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-1-b3,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-1-b4 {
	stroke-width: 9;
	animation: drawStage 1.5s linear forwards;
}
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-2-b1,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-2-b2,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-2-b3,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-2-b4 {
	stroke-width: 9;
	animation: drawStage 0.8s linear forwards;
	animation-delay: 1.4s;
}
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-3-b1,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-3-b2,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-3-b3,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-3-b4 {
	stroke-width: 4;
	animation: drawStage 0.2s linear forwards;
	animation-delay: 1.9s;
}
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-4-b1,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-4-b2,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-4-b3,
.is-rohtoday_2026 .type-frameA.is-animated #mask-path-4-b4 {
	stroke-width: 9;
	animation: drawStage 0.8s linear forwards;
	animation-delay: 2.0s;
}
/* typeC frameB */
.is-rohtoday_2026 .type-frameB.is-animated #mask-path-1-c1 {
	stroke-width: 9;
	animation: drawStage 0.8s linear forwards;
}
.is-rohtoday_2026 .type-frameB.is-animated #mask-path-2-c1{
	stroke-width: 9;
	animation: drawStage 0.8s linear forwards;
	animation-delay: 0.8s;
}
.is-rohtoday_2026 .type-frameB.is-animated #mask-path-3-c1{
	stroke-width: 4;
	animation: drawStage 0.1s linear forwards;
	animation-delay: 1.5s;
}
.is-rohtoday_2026 .type-frameB.is-animated #mask-path-4-c1 {
	stroke-width: 9;
	animation: drawStage 0.8s linear forwards;
	animation-delay: 1.5s;
}
/* keyframes */
@keyframes drawStage {
	to {
		stroke-dashoffset: 0;
	}
}