@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_pc.css
 Style Info:     ロールフォーチュンクッキー PC版
----------------------------------------------------------- */

@media screen and (min-width: 960px){
	.rollftck .rollftck_inner {
		background-color: #fff3bd !important;
		color: #604215;
	}
	.rollftck .mainimage {
		margin: 0 !important;
		width: 100%;
		position: relative;
	}
	.rollftck .mainimage .image {
		width: 760px;
		height: 508px;
		background-image: -webkit-image-set(url('../img/img_main.webp') 1x, url('../img/img_main@2x.webp') 2x);
		background-image: image-set(url('../img/img_main.webp') 1x, url('../img/img_main@2x.webp') 2x);

		background-size: 100%;
	}
    .rollftck .mainimage .image img.img_main.sp {
		display: none !important;
	}

	.rollftck .mainimage .textblock {
		margin: 30px 0 40px;
		text-align: center;
		position: relative;
	}
	.rollftck .mainimage .textblock img.twinkle00 {
		position: absolute;
		top: 68px;
		left: 44px;
	}
	.rollftck .mainimage .textblock strong.orange {
		display: block;
		margin: 0 auto;
		padding: 6px 16px;
		width: 70%;
		color: #fff;
		font-size: 2.2rem;
		font-weight: 600;
		background-color: #fc8f00;
		border-radius: 20px;
		box-sizing: border-box;
	}
	.rollftck .mainimage .textblock h2 {
		margin: 20px 0 !important;
		font-size: 3.8rem !important;
		line-height: 1.4;
	}
	.rollftck .mainimage .textblock p {
		margin: 0 auto 16px;
		width: 80%;
		font-size: 2rem;
		font-weight: 600;
	}
	.rollftck .mainimage .textblock p strong {
		background-color: #fff;
	}


	.rollftck .buttonblock {
		display: block;
		margin: 40px auto 60px;
		width: 90%;
	}
	.rollftck .buttonblock a {
		display: block;
		margin: 20px auto;
		width: 68%;
	}
	.rollftck .buttonblock a:hover {
		opacity: 0.7;
	}
	.rollftck .buttonblock a img {
		width: 100%;
		height: auto;
		aspect-ratio: 556 / 105;
	}

	.rollftck .buttonblock strong.heading {
		display: block;
		margin-top: 40px;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.4rem;
	}
	.rollftck .buttonblock .heading::before,
	.rollftck .buttonblock .heading::after {
		border-radius: 5px; /* 線の両端を丸く */
		content: "";
		height: 3px; /* 線の高さ */
		width: 60px; /* 線の長さ */
	}
	.rollftck .buttonblock .heading::before {
		margin-right: 10px; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck .buttonblock .heading::after {
		margin-left: 10px; /* 文字との余白 */
		transform: rotate(-60deg); /* 傾ける */
	}
	.rollftck .buttonblock .heading.semi {
		color: #9abf00;
	}
	.rollftck .buttonblock .heading.semi::before,
	.rollftck .buttonblock .heading.semi::after {
		background-color: #9abf00; /* 線の色 */
	}
	.rollftck .buttonblock .heading.ori {
		color: #00a9d6;
	}
	.rollftck .buttonblock .heading.ori::before,
	.rollftck .buttonblock .heading.ori::after {
		background-color: #00a9d6; /* 線の色 */
	}

	.rollftck span.caption {
		display: block;
		margin: 20px auto 0 !important;
		width: 80%;
	}


	.rollftck section {
		display: block;
		margin: 143px auto 0;
		padding-top: 100px !important;
		padding-bottom: 40px;
		width: 90%;
		background-color: #fff;
		border-radius: 20px;
		position: relative;
		box-sizing: border-box;
	}
	.rollftck section .titleblock {
		display: block;
		margin: 0 auto 0;
		padding-top: 36px;
		width: 612px;
		height: 166px;
		line-height: 1.2;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: -83px;
		left: 38px;
		box-sizing: border-box;
	}
	.rollftck section h2 {
		display: block;
		margin: 8px 0 0 !important;
		font-size: 2.2rem !important;
		line-height: 1.6;
		text-align: center;
	}
	.rollftck section p {
		font-size: 1.4rem;
	}
	.rollftck section img.radius {
		border-radius: 20px;
	}


	/* ロールフォーチュンクッキーとは */
	.rollftck section.about .titleblock {
		font-size: 4rem;
		text-align: center;
		background-image: -webkit-image-set(url('../img/toha_ti_bg.webp') 1x, url('../img/toha_ti_bg@2x.webp') 2x);
		background-image: image-set(url('../img/toha_ti_bg.webp') 1x, url('../img/toha_ti_bg@2x.webp') 2x);
	}
	.rollftck section.about img.twinkle {
		position: absolute;
		top: 90px;
		left: 44px;
	}
	.rollftck section.about img.fukusuke {
		display: block;
		margin: 30px auto 16px;
		width: 530px;
		height: 530px;
		aspect-ratio: 1 / 1;
	}
	.rollftck section.about p {
		margin: 0 auto;
		width: 530px;
		font-size: 1.6rem;
		text-align: center;
	}
	.rollftck section.about ul.photolist {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;

		margin: 16px auto;
		width: 480px;
	}
	.rollftck section.about ul.photolist li {
		margin: 0 3% 0 0;
		width: 48.5%;
	}
	.rollftck section.about ul.photolist li:nth-child(2n) {
		margin-right: 0;
	}

	.rollftck section.about strong.heading {
		display: block;
		margin-top: 40px;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.8rem;
	}
	.rollftck section.about .heading::before,
	.rollftck section.about .heading::after {
		border-radius: 5px; /* 線の両端を丸く */
		content: "";
		height: 3px; /* 線の高さ */
		width: 40px; /* 線の長さ */
		background-color: #604215; /* 線の色 */
	}
	.rollftck section.about .heading::before {
		margin-right: 10px; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck section.about .heading::after {
		margin-left: 10px; /* 文字との余白 */
		transform: rotate(-60deg); /* 傾ける */
	}

	/* こんなふうに届くよ */
	.rollftck section.about.todoku {
		margin-top: 40px;
		padding-bottom: 60px;
		padding-top: 8px !important;
	}
	.rollftck section.about.todoku img.twinkle {
		position: absolute;
		top: 70px;
	}
	.rollftck section.about.todoku h2 {
		font-size: 4rem !important;
		line-height: 1.4;
	}

	.rollftck section.about.todoku .illustblock {
		margin: 30px auto 0;
		padding: 20px 18px;
		width: 82%;
		background-color: #f2f2f2;
		border-radius: 20px;
		text-align: center;
		position: relative;
	}
	.rollftck section.about.todoku .illustblock .ic_bomb {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;

		width: 190px;
		height: auto;
		aspect-ratio: 197 / 192;
		color: #fff;
		font-size: 3rem;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		background-image: -webkit-image-set(url('../img/ic_bomb.webp') 1x, url('../img/ic_bomb@2x.webp') 2x);
		background-image: image-set(url('../img/ic_bomb.webp') 1x, url('../img/ic_bomb@2x.webp') 2x);
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: -80px;
		left: -30px;
		z-index: 1 !important;
		box-sizing: border-box;
	}
	.rollftck section.about.todoku .illustblock h3 {
		margin-top: -30px;
		font-size: 2rem !important;
	}
	.rollftck section.about.todoku .illustblock img {
		display: block;
		margin: 20px auto;
		width: 72%;
		z-index: 100 !important;
	}
	.rollftck section.about.todoku ul.photolist {
		margin: 16px auto;
		width: 100%;
	}
	.rollftck section.about.todoku ul.photolist li img {
		width: 100%;
	}
	.rollftck section.about.todoku ul.photolist li span {
		display: block;
		margin-top: -16px !important;
		font-size: 1.4rem;
	}

	.rollftck section.about img.illust_rlfck {
		display: block;
		width: 33%;
		height: auto;
		aspect-ratio: 233 / 123;
		position: absolute;
		bottom: -60px;
		left: 33.5%;
	}
	.rollftck section.about img.illust_rlfck.inv {
		bottom: -70px;
	}

	/* もっと知りたい */
	.rollftck section.about.motto {
		margin: 90px auto 90px;
		padding-bottom: 60px;
		padding-top: 8px !important;
	}
	.rollftck section.about.motto img.twinkle {
		position: absolute;
		top: 70px;
	}
	.rollftck section.about.motto h2 {
		font-size: 4rem !important;
		line-height: 1.4;
	}
	.rollftck section.about.motto ul.photolist {
		margin: 16px auto;
		width: 84%;
	}
	.rollftck section.about.motto ul.photolist li {
		margin: 30px 4% 16px 0;
		width: 48%;
		position: relative;
	}
	.rollftck section.about.motto ul.photolist li:nth-child(2n) {
		margin-right: 0;
	}
	.rollftck section.about.motto ul.photolist li img {
		width: 100%;
		height: auto;
		aspect-ratio: 278 / 237;
	}
	.rollftck section.about.motto ul.photolist li h3 {
		font-size: 1.8rem !important;
		text-align: center;
	}
	.rollftck section.about.motto ul.photolist li h3 strong {
		color: #ff8500;
	}
	.rollftck section.about.motto ul.photolist li p {
		width: 100%;
		font-size: 1.4rem;
		text-align: left;
	}
	.rollftck section.about.motto ul.photolist li .ic_point {
		display: block;
		padding-top: 20px;
		width: 95px;
		height: 95px;
		font-size: 1.8rem;
		font-weight: 600;
		text-align: center;
		background-color: #ffff06;
		border-radius: 50%;
		position: absolute;
		top: -30px;
		left: 0;
		box-sizing: border-box;
	}
	.rollftck section.about.motto ul.photolist li .ic_point span.num {
		display: block;
		margin-top: -4px;
		font-size: 3rem;
		font-weight: 800;
	}

	/* セミオーダー／オリジナル共通 */
	hr {
		display: block;
		margin: 0 auto;
		width: 90%;
		border: 1px dotted #ccc;
	}
	.rollftck section.common {
		margin-top: 160px;
	}
	.rollftck section.common strong.heading {
		display: block;
		margin: -230px 0 0 -160px;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.4rem;
	}
	.rollftck section.common .heading::before,
	.rollftck section.common .heading::after {
		border-radius: 5px; /* 線の両端を丸く */
		content: "";
		height: 2px; /* 線の高さ */
		width: 40px; /* 線の長さ */
	}
	.rollftck section.common .heading::before {
		margin-right: 10px; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck section.common .heading::after {
		margin-left: 10px; /* 文字との余白 */
		transform: rotate(-60deg); /* 傾ける */
	}
	.rollftck section.common .titleblock {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 0 0 50px;
		color: #fff;
		font-size: 4rem;
		font-weight: 800;
	}
	.rollftck section.common .titleblock strong {
		margin-top: -44px;
		display: block;
	}
	.rollftck section.common img.twinkle {
		width: 90%;
		position: absolute;
		top: 60px;
		left: 5%;
	}
	.rollftck section.common h2 {
		margin-top: 150px !important;
		font-size: 2.6rem !important;
		line-height: 1.2;
	}
	.rollftck section.common span.caption {
		display: block;
		margin: 40px auto 0 !important;
		color: #e73736;
		font-size: 1.4rem;
		text-align: center;
	}

	.rollftck section.common .imageblock {
		margin: 30px auto 0;
		width: 80%;
	}
	.rollftck section.common .imageblock img {
		display: block;
		margin: 0 auto 30px;
		width: 100%;
		height: auto;
	}

	.rollftck section.common .checklist_wrap {
		margin: 0 auto;
		padding: 0 5%;
		width: 90%;
		background-size: 550px;
		background-repeat: no-repeat;
		background-position: center bottom 40px;
		box-sizing: border-box;
	}
	.rollftck section.common .checklist {
		margin: 0 auto;
		width: 70%;
	}
	.rollftck section.common .checklist li {
		padding: 9px 0 9px 50px;
		font-size: 2.2rem;
		font-weight: 600;
		background-image: -webkit-image-set(url('../img/ic_check.webp') 1x, url('../img/ic_check@2x.webp') 2x);
		background-image: image-set(url('../img/ic_check.webp') 1x, url('../img/ic_check@2x.webp') 2x);
		background-size: 38px;
		background-repeat: no-repeat;
		box-sizing: border-box;
	}
	.rollftck section.common .checklist_wrap .checklist li span {
		margin-left: 6px;
		color: #e73736;
		font-size: 1.4rem;
	}

	.rollftck section.common .descrip {
		margin: 60px auto 0;
		width: 90%;
	}
	.rollftck section.common .descrip .title {
		display: block;
		text-align: center;
	}
	.rollftck section.common .descrip .title strong {
		display: block;
		width: 50%;
		margin: -20px auto 30px;
		padding: 0;
		color: #fff;
		font-size: 2.4rem;
		font-weight: 600;
		border-radius: 20px;
	}
	.rollftck section.common .descrip h3 {
		margin: -12px 0 20px 0;
		font-size: 3rem !important;
		text-align: center;
		line-height: 1.2;
	}
	.rollftck section.common .descrip.size h3 {
		margin-bottom: -20px !important;
	}
	.rollftck section.common .descrip.type h3 {
		color: #e73736;
	}
	.rollftck section.common .descrip.type h3 strong {
		font-size: 3.2rem;
	}
	.rollftck section.common .descrip.type h3 strong.num {
		font-size: 4rem;
	}
	.rollftck section.common .descrip.type h4 {
		margin: -16px 0 20px 0;
		font-size: 2rem;
		text-align: center;
		line-height: 1.4;
	}
	.rollftck section.common .descrip img {
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	.rollftck section.common .descrip p {
		margin-top: 16px;
		font-size: 1.4rem;
		font-weight: 600;
		text-align: center;
	}

	.rollftck section.common .descrip.attention ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}
	.rollftck section.common .descrip.attention ul li {
		margin-right: 2%;
		width: 23.5%;
	}
	.rollftck section.common .descrip.attention ul li:last-child {
		margin-right: 0;
	}
	.rollftck section.common .descrip.attention ul li img {
		width: 100%;
	}


	/* セミオーダー */
	.rollftck section.semi {
		border: 12px solid #d6f2d6;
	}
	.rollftck section.semi .heading {
		color: #9abf00;
	}
	.rollftck section.semi .heading::before,
	.rollftck section.semi .heading::after {
		background-color: #9abf00; /* 線の色 */
	}
	.rollftck section.semi .titleblock {
		background-image: -webkit-image-set(url('../img/semi_ti_bg.webp') 1x, url('../img/semi_ti_bg@2x.webp') 2x);
		background-image: image-set(url('../img/semi_ti_bg.webp') 1x, url('../img/semi_ti_bg@2x.webp') 2x);
		left: 30px;
	}
	.rollftck section.semi .titleblock img {
		display: block;
		margin: -70px 0 0 50px;
		width: 124px;
		height: auto;
		aspect-ratio: 124 / 169;
	}
	.rollftck section.semi .imageblock img.semi_img01 {
		margin-left: 0 !important;
		width: calc(603px * 0.9);
		aspect-ratio: 603 / 414;
	}
	.rollftck section.semi .imageblock img.semi_img02 {
		margin-left: -16px !important;
		width: calc(598px * 0.9);
		aspect-ratio: 598 / 424;
	}
	.rollftck section.semi .imageblock img.semi_img03 {
		margin-left: 22px !important;
		width: calc(526px * 0.9);
		aspect-ratio: 526 / 484;
	}
	.rollftck section.semi .imageblock img.semi_img04 {
		margin-left: 50px !important;
		width: calc(484px * 0.9);
		aspect-ratio: 484 / 324;
	}

	.rollftck section.semi .descrip .title {
		border-top: 1px dotted #9abf00;
	}
	.rollftck section.semi .descrip .title strong {
		background-color: #9abf00;
	}

	.rollftck section.semi .checklist_wrap {
		background-image: -webkit-image-set(url('../img/semi_img_twkl02.webp') 1x, url('../img/semi_img_twkl02@2x.webp') 2x);
		background-image: image-set(url('../img/semi_img_twkl02.webp') 1x, url('../img/semi_img_twkl02@2x.webp') 2x);
	}

	.rollftck section.semi .descrip.type .title_exam {
		margin-top: 36px;
		padding: 16px 70px 12px 8px;
		color: #000;
		font-size: 2rem;
		font-weight: 600;
		text-align: center;
		background-color: #f9dee3;
		/* background-size: 67px;
		background-position: right 8px bottom 12px;
		background-repeat: no-repeat; */
		position: relative;
	}
	.rollftck section.semi .descrip.type .title_exam span {
		color: #ff0000;
	}
	.rollftck section.semi .descrip.type .title_exam::before {
		content: '';
		width: 120px;
		height: auto;
		aspect-ratio: 135 / 33;
		background-size: 100%;
		position: absolute;
		top: -16px;
		left: 0;
	}
	.rollftck section.semi .descrip.type .title_exam.ex01::before {
		background-image: -webkit-image-set(url('../img/ic_exam01.webp') 1x, url('../img/ic_exam01@2x.webp') 2x);
background-image: image-set(url('../img/ic_exam01.webp') 1x, url('../img/ic_exam01@2x.webp') 2x);
	}
	.rollftck section.semi .descrip.type .title_exam.ex02::before {
		background-image: -webkit-image-set(url('../img/ic_exam02.webp') 1x, url('../img/ic_exam02@2x.webp') 2x);
background-image: image-set(url('../img/ic_exam02.webp') 1x, url('../img/ic_exam02@2x.webp') 2x);
	}
	.rollftck section.semi .descrip.type .title_exam::after {
		content: '';
		width: 60px;
		height: 60px;
		background-size: 100%;
		position: absolute;
		top: -6px;
		right: 8px;
	}
	.rollftck section.semi .descrip.type .title_exam.ex01::after {
		content: '';
		background-image: -webkit-image-set(url('../img/semi_ic_man.webp') 1x, url('../img/semi_ic_man@2x.webp') 2x);
background-image: image-set(url('../img/semi_ic_man.webp') 1x, url('../img/semi_ic_man@2x.webp') 2x);
	}
		.rollftck section.semi .descrip .title_exam.ex02::after {
		content: '';
		background-image: -webkit-image-set(url('../img/semi_ic_woman.webp') 1x, url('../img/semi_ic_woman@2x.webp') 2x);
		background-image: image-set(url('../img/semi_ic_woman.webp') 1x, url('../img/semi_ic_woman@2x.webp') 2x);
	}

	.rollftck section.semi .descrip.type .answer {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0;
		min-height: 60px;
		color: #000;
	}
	.rollftck section.semi .descrip.type .answer img.operator {
		width: 60px;
		height: 60px;
	}
	.rollftck section.semi .descrip.type .answer p {
		width: calc(100% - 90px);
		font-size: 1.6rem;
		font-weight: 600;
		text-align: left;
	}

	.rollftck section.semi .descrip.type .imageblock {
		margin: 8px auto;
		width: 90%;
		color: #000;
	}
	.rollftck section.semi .descrip.type .imageblock span.text_red {
		display: block;
		color: #e73736;
		font-size: 1.7rem;
	}
	.rollftck section.semi .descrip.type .imageblock .omikuji {
		display: block;
		margin-top: 20px;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 0 auto 0;
		width: 100%;
	}

	.rollftck section.semi .descrip.type .imageblock .descrip_form .img_form {
		margin: 16px 16px 0 0;
		width: 50%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form .img_form img {
		display: block;
		margin-top: 8px;
		width: 100%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p {
		margin-top: 40px;
		width: calc(50% - 16px);
		font-weight: 300;
		text-align: left;
		line-height: 1.6;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p span.title {
		display: block;
		margin-bottom: 8px;
		font-weight: 600;
		text-align: left;
		border: none;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p strong {
		font-size: 110%;
		font-weight: 600;
		text-decoration: underline;
	}

	.rollftck section.semi .descrip.type .imageblock .descrip_form p .linkblock {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p img.thumbnail {
		margin-top: 16px;
		width: 80%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a {
		color: #000;
		font-size: 1.1rem;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a:hover {
		opacity: 0.7;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a.linktxt {
		margin: 0;
		width: calc(100% - 100px);
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a.txtlink14 {
		display: block;
		margin: 0 auto !important;
		width: 86px;
		color: #fff;
	}




	/* オリジナル */
	.rollftck section.ori {
		border: 12px solid #c3f3f4;
	}
	.rollftck section.ori .heading {
		color: #00a9d6;
	}
	.rollftck section.ori .heading::before,
	.rollftck section.ori .heading::after {
		background-color: #00a9d6; /* 線の色 */
	}
	.rollftck section.ori .titleblock {
		background-image: -webkit-image-set(url('../img/ori_ti_bg.webp') 1x, url('../img/ori_ti_bg@2x.webp') 2x);
		background-image: image-set(url('../img/ori_ti_bg.webp') 1x, url('../img/ori_ti_bg@2x.webp') 2x);
		left: 30px;
	}
	.rollftck section.ori .titleblock img {
		display: block;
		margin: -70px 0 0 20px;
		width: 194px;
		height: auto;
		aspect-ratio: 194 / 161;
	}
	.rollftck section.ori .imageblock img.ori_img01 {
		margin-left: -34px !important;
		width: calc(665px * 0.9);
		aspect-ratio: 665 / 372;
	}
	.rollftck section.ori .imageblock img.ori_img02 {
		margin-left: 36px !important;
		width: calc(539px * 0.9);
		aspect-ratio: 539 / 398;
	}
	.rollftck section.ori .imageblock img.ori_img03 {
		margin-left: -8px !important;
		width: calc(600px * 0.9);
		aspect-ratio: 600 / 500;
	}
	.rollftck section.ori .imageblock img.ori_img04 {
		margin-left: auto !important;
		width: calc(490px * 0.9);
		aspect-ratio: 490 / 324;
	}

	.rollftck section.ori .descrip .title {
		border-top: 1px dotted #00a9d6;
	}
	.rollftck section.ori .descrip .title strong {
		background-color: #00a9d6;
	}

	.rollftck section.ori .checklist_wrap {
		background-image: -webkit-image-set(url('../img/ori_img_twkl02.webp') 1x, url('../img/ori_img_twkl02@2x.webp') 2x);
		background-image: image-set(url('../img/ori_img_twkl02.webp') 1x, url('../img/ori_img_twkl02@2x.webp') 2x);
	}

	.rollftck section.ori .descrip.type h4 {
		margin-top: 20px;
	}
	.rollftck section.ori .descrip.type p.thin {
		margin-top: 20px;
		font-size: 1.8rem;
		font-weight: 300;
		text-align: center
	}

	.rollftck section.ori .descrip.type .imageblock.img_num_exam {
		display: block;
		width: 100%;
		position: relative;
	}
	.rollftck section.ori .descrip.type .imageblock.img_num_exam::before {
		content: '';
		width: 120px;
		height: auto;
		aspect-ratio: 135 / 33;
		background-size: 100%;
		position: absolute;
		top: -16px;
		left: 5%;
	}
	.rollftck section.ori .descrip.type .imageblock.img_num_exam.ex04::before {
		background-image: -webkit-image-set(url('../img/ic_exam04.webp') 1x, url('../img/ic_exam04@2x.webp') 2x);
background-image: image-set(url('../img/ic_exam04.webp') 1x, url('../img/ic_exam04@2x.webp') 2x);
	}
	.rollftck section.ori .descrip.type .imageblock.img_num_exam.ex05::before {
		background-image: -webkit-image-set(url('../img/ic_exam05.webp') 1x, url('../img/ic_exam05@2x.webp') 2x);
background-image: image-set(url('../img/ic_exam05.webp') 1x, url('../img/ic_exam05@2x.webp') 2x);
	}



	.rollftck ul.itemlist {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 36px auto 0;
		width: 90% !important;
	}
	.rollftck ul.itemlist li {
		margin: 0 4% 40px 0;
		padding: 0;
		width: 48% !important;
		font-size: 1.4rem;
		font-weight: 600;
		text-align: center;
	}
	.rollftck ul.itemlist li:nth-child(2n) {
		margin-right: 0;
	}
	.rollftck ul.itemlist li img {
		display: block;
		margin-bottom: 16px;
		width:100%;
		border: 1px solid #ddd;
	}
	.rollftck ul.itemlist li a.txtlink14 {
		display: block;
		margin: 8px auto 0;
		width: 70%;
		color: #fff;
		font-size: 1.4rem;
		font-weight: 600;
	}




/* 商品一覧 */
	.rollftck .catalog_box {
		margin-top: 40px;
		padding: 20px 0 30px !important;
		background-color: #fffbe9;
	}
	.rollftck .catalog_box h2 {
		margin: 20px auto 20px !important;
		padding: 8px;
		width: 82%;
		color: #fff;
		font-size: 2rem;
		text-align: center;
		border-radius: 12px !important;
		/* background-color: #29abe2; */
		background-color: #666;
	}
	.rollftck .catalog_box .item {
		margin: 40px auto 20px;
		padding: 0 !important;
		width: 95%;
	}
	.rollftck .catalog_box .item:hover {
		opacity: initial;
		cursor: initial;
	}
	.rollftck .catalog_box .item a:hover {
		opacity: 0.6;
	}
	.rollftck .catalog_box .item img {
		display: block;
		margin-bottom: 0 !important;
		margin-right: 3%;
		padding: 0;
		width:  29%;
		border-radius: 16px;
		float: left;
		box-sizing: border-box;
	}
	/* .rollftck .catalog_box .item .photo img {
		width: 100%;
	} */
	.rollftck .catalog_box .item .text {
		margin-bottom: 0 !important;
		padding-bottom: 20px;
		width: 68%;
		float: left;
		box-sizing: border-box;
		position: relative;
	}
	.rollftck .catalog_box .item .text h3 {
		padding-top: 8px;
		font-size: 1.4rem !important;
	}
	.rollftck .catalog_box .item .text p {
		font-size: 1.4rem;
	}
	.rollftck .catalog_box .item .text .txtlink14 {
		margin-top: 16px;
		width: 200px;
		color: #fff;
	}
	.rollftck .catalog_box .item .text p.price {
		font-weight: bold;
		font-size: 1.4rem;
	}



}