@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_tablet.css
 Style Info:     ロールフォーチュンクッキー タブレット版
----------------------------------------------------------- */

@media screen and (min-width: 600px) and (max-width: 959px) {
	.rollftck .rollftck_inner {
		background-color: #fff3bd !important;
		color: #604215;
	}
	.rollftck .mainimage {
		margin: 0 !important;
		width: 100%;
		position: relative;
	}
	.rollftck .mainimage .image {
		width: 100%;
		height: auto;
		aspect-ratio: 760 / 508;
		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: 3vw 0 4vw;
		text-align: center;
		position: relative;
	}
	.rollftck .mainimage .textblock img.twinkle00 {
		width: 90%;
		position: absolute;
		top: 6.8vw;
		left: 5%;
	}
	.rollftck .mainimage .textblock strong.orange {
		display: block;
		margin: 0 auto;
		padding: 0.6vw 1.6vw;
		width: 70%;
		color: #fff;
		font-size: 2.2vw;
		font-weight: 600;
		background-color: #fc8f00;
		border-radius: 2vw;
		box-sizing: border-box;
	}
	.rollftck .mainimage .textblock h2 {
		margin: 2vw 0 !important;
		font-size: 3.8vw !important;
		line-height: 1.4;
	}
	.rollftck .mainimage .textblock p {
		margin: 0 auto 1.6vw;
		width: 80%;
		font-size: 2vw;
		font-weight: 600;
	}
	.rollftck .mainimage .textblock p strong {
		background-color: #fff;
	}


	.rollftck .buttonblock {
		display: block;
		margin: 4vw auto 4vw;
		width: 90%;
	}
	.rollftck .buttonblock a {
		display: block;
		margin: 2vw 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: 4vw;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.4vw;
	}
	.rollftck .buttonblock .heading::before,
	.rollftck .buttonblock .heading::after {
		border-radius: 0.5vw; /* 線の両端を丸く */
		content: "";
		height: 0.3vw; /* 線の高さ */
		width: 6vw; /* 線の長さ */
	}
	.rollftck .buttonblock .heading::before {
		margin-right: 1vw; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck .buttonblock .heading::after {
		margin-left: 1vw; /* 文字との余白 */
		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: 2vw auto 0 !important;
		width: 80%;
	}


	.rollftck section {
		display: block;
		margin: 14.3vw auto 0;
		padding-top: 10vw !important;
		padding-bottom: 4vw;
		width: 90%;
		background-color: #fff;
		border-radius: 2vw;
		position: relative;
		box-sizing: border-box;
	}
	.rollftck section .titleblock {
		display: block !important;
		margin: 0 auto 0;
		padding-top: 3.6vw;
		width: 61.2vw;
		height: 16.6vw;
		line-height: 1.2;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: -8.3vw;
		left: 3.8vw;
		box-sizing: border-box;
	}
	.rollftck section h2 {
		display: block;
		margin: 0.8vw 0 0 !important;
		font-size: 2.2vw !important;
		line-height: 1.6;
		text-align: center;
	}
	.rollftck section p {
		font-size: 1.4vw;
	}


	/* ロールフォーチュンクッキーとは */
	.rollftck section.about .titleblock {
		font-size: 4vw;
		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 {
		width: 90%;
		position: absolute;
		top: 9vw;
		left: 5%;
	}
	.rollftck section.about img.fukusuke {
		display: block;
		margin: 3vw auto 1.6vw;
		width: 53vw;
		height: 53vw;
		aspect-ratio: 1 / 1;
	}
	.rollftck section.about p {
		margin: 0 auto;
		width: 53vw;
		font-size: 1.6vw;
		text-align: center;
	}
	.rollftck section.about ul.photolist {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;

		margin: 1.6vw auto;
		width: 48vw;
	}
	.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: 4vw;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.8vw;
	}
	.rollftck section.about .heading::before,
	.rollftck section.about .heading::after {
		border-radius: 0.5vw; /* 線の両端を丸く */
		content: "";
		height: 0.3vw; /* 線の高さ */
		width: 4vw; /* 線の長さ */
		background-color: #604215; /* 線の色 */
	}
	.rollftck section.about .heading::before {
		margin-right: 1vw; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck section.about .heading::after {
		margin-left: 1vw; /* 文字との余白 */
		transform: rotate(-60deg); /* 傾ける */
	}

	/* こんなふうに届くよ */
	.rollftck section.about.todoku {
		margin-top: 4vw;
		padding-bottom: 6vw;
		padding-top: 0.8vw !important;
	}
	.rollftck section.about.todoku img.twinkle {
		position: absolute;
		top: 7vw;
	}
	.rollftck section.about.todoku h2 {
		font-size: 4vw !important;
		line-height: 1.4;
	}

	.rollftck section.about.todoku .illustblock {
		margin: 3vw auto 0;
		padding: 2vw 1.8vw;
		width: 82%;
		background-color: #f2f2f2;
		border-radius: 2vw;
		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: 19vw;
		height: auto;
		aspect-ratio: 197 / 192;
		color: #fff;
		font-size: 3vw;
		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: -8vw;
		left: -3vw;
		z-index: 1 !important;
		box-sizing: border-box;
	}
	.rollftck section.about.todoku .illustblock h3 {
		margin-top: -3vw;
		font-size: 2vw !important;
	}
	.rollftck section.about.todoku .illustblock img {
		display: block;
		margin: 2vw auto;
		width: 72%;
		z-index: 100 !important;
	}
	.rollftck section.about.todoku ul.photolist {
		margin: 1.6vw 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: -1.6vw !important;
		font-size: 1.4vw;
	}

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

	/* もっと知りたい */
	.rollftck section.about.motto {
		margin: 9vw auto 9vw;
		padding-bottom: 6vw;
		padding-top: 0.8vw !important;
	}
	.rollftck section.about.motto img.twinkle {
		position: absolute;
		top: 7vw;
	}
	.rollftck section.about.motto h2 {
		font-size: 4vw !important;
		line-height: 1.4;
	}
	.rollftck section.about.motto ul.photolist {
		margin: 1.6vw auto;
		width: 84%;
	}
	.rollftck section.about.motto ul.photolist li {
		margin: 3vw 4% 1.6vw 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.8vw !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.4vw;
		text-align: left;
	}
	.rollftck section.about.motto ul.photolist li .ic_point {
		display: block;
		padding-top: 2vw;
		width: 9.5vw;
		height: 9.5vw;
		font-size: 1.8vw;
		font-weight: 600;
		text-align: center;
		background-color: #ffff06;
		border-radius: 50%;
		position: absolute;
		top: -3vw;
		left: 0;
		box-sizing: border-box;
	}
	.rollftck section.about.motto ul.photolist li .ic_point span.num {
		display: block;
		margin-top: -0.4vw;
		font-size: 3vw;
		font-weight: 800;
	}


/* セミオーダー／オリジナル共通 */
	hr {
		display: block;
		margin: 0 auto;
		width: 90%;
		border: 0.1vw dotted #ccc;
	}
	.rollftck section.common {
		margin-top: 16vw;
	}
	.rollftck section.common strong.heading {
		display: block;
		margin: -23vw 0 0 -16vw;
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		font-size: 2.4vw;
	}
	.rollftck section.common .heading::before,
	.rollftck section.common .heading::after {
		border-radius: 0.5vw; /* 線の両端を丸く */
		content: "";
		height: 0.2vw; /* 線の高さ */
		width: 4vw; /* 線の長さ */
	}
	.rollftck section.common .heading::before {
		margin-right: 1vw; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	.rollftck section.common .heading::after {
		margin-left: 1vw; /* 文字との余白 */
		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 5vw;
		color: #fff;
		font-size: 4vw;
		font-weight: 800;
	}
	.rollftck section.common .titleblock strong {
		margin-top: 3.8vw;
		display: block;
		width: 70%;
	}
	.rollftck section.common img.twinkle {
		width: 90%;
		position: absolute;
		top: 6vw;
		left: 5%;
	}
	.rollftck section.common h2 {
		margin-top: 15vw !important;
		font-size: 2.6vw !important;
		line-height: 1.2;
	}
	.rollftck section.common span.caption {
		display: block;
		margin: 4vw auto 0 !important;
		color: #e73736;
		font-size: 1.4vw;
		text-align: center;
	}

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

	.rollftck section.common .checklist_wrap {
		margin: 0 auto;
		padding: 0 5%;
		width: 90%;
		background-size: 55vw;
		background-repeat: no-repeat;
		background-position: center bottom 4vw;
		box-sizing: border-box;
	}
	.rollftck section.common .checklist {
		margin: 0 auto;
		width: 70%;
	}
	.rollftck section.common .checklist li {
		padding: 0.9vw 0 0.9vw 5vw;
		font-size: 2.2vw;
		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: 3.8vw;
		background-repeat: no-repeat;
		box-sizing: border-box;
	}
	.rollftck section.common .checklist_wrap .checklist li span {
		margin-left: 0.6vw;
		color: #e73736;
		font-size: 1.4vw;
	}

	.rollftck section.common .descrip {
		margin: 6vw 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: -2vw auto 3vw;
		padding: 0;
		color: #fff;
		font-size: 2.4vw;
		font-weight: 600;
		border-radius: 2vw;
	}
	.rollftck section.common .descrip h3 {
		margin: -1.2vw 0 2vw 0;
		font-size: 3vw !important;
		text-align: center;
		line-height: 1.2;
	}
	.rollftck section.common .descrip.size h3 {
		margin-bottom: -2vw !important;
	}
	.rollftck section.common .descrip.type h3 {
		color: #e73736;
	}
	.rollftck section.common .descrip.type h3 strong {
		font-size: 3.2vw;
	}
	.rollftck section.common .descrip.type h3 strong.num {
		font-size: 4vw;
	}
	.rollftck section.common .descrip.type h4 {
		margin: -1.6vw 0 2vw 0;
		font-size: 2vw;
		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: 1.6vw;
		font-size: 1.4vw;
		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: 1.2vw 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: 3vw;
	}
	.rollftck section.semi .titleblock img {
		display: block;
		margin: -12vw 0 0 40vw;
		width: 12.4vw;
		height: auto;
		aspect-ratio: 124 / 169;
	}
	.rollftck section.semi .imageblock img.semi_img01 {
		margin-left: 0 !important;
		width: calc(60.3vw * 0.9);
		aspect-ratio: 603 / 414;
	}
	.rollftck section.semi .imageblock img.semi_img02 {
		margin-left: -1.6vw !important;
		width: calc(59.8vw * 0.9);
		aspect-ratio: 598 / 424;
	}
	.rollftck section.semi .imageblock img.semi_img03 {
		margin-left: 2.2vw !important;
		width: calc(52.6vw * 0.9);
		aspect-ratio: 526 / 484;
	}
	.rollftck section.semi .imageblock img.semi_img04 {
		margin-left: 5vw !important;
		width: calc(48.4vw * 0.9);
		aspect-ratio: 484 / 324;
	}

	.rollftck section.semi .descrip .title {
		border-top: 0.1vw 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: 3.6vw;
		padding: 1.6vw 7vw 1.2vw 0.8vw;
		color: #000;
		font-size: 2vw;
		font-weight: 600;
		text-align: center;
		background-color: #f9dee3;
		position: relative;
	}
	.rollftck section.semi .descrip.type .title_exam span {
		color: #ff0000;
	}
	.rollftck section.semi .descrip.type .title_exam::before {
		content: '';
		width: 12vw;
		height: auto;
		aspect-ratio: 135 / 33;
		background-size: 100%;
		position: absolute;
		top: -1.6vw;
		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: 6vw;
		height: 6vw;
		background-size: 100%;
		position: absolute;
		top: -0.6vw;
		right: 0.8vw;
	}
	.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: 6vw;
		color: #000;
	}
	.rollftck section.semi .descrip.type .answer img.operator {
		width: 6vw;
		height: 6vw;
	}
	.rollftck section.semi .descrip.type .answer p {
		width: calc(100% - 9vw);
		font-size: 1.6vw;
		font-weight: 600;
		text-align: left;
	}

	.rollftck section.semi .descrip.type .imageblock {
		margin: 0.8vw auto;
		width: 90%;
		color: #000;
	}
	.rollftck section.semi .descrip.type .imageblock span.text_red {
		display: block;
		color: #e73736;
		font-size: 1.7vw;
	}
	.rollftck section.semi .descrip.type .imageblock .omikuji {
		display: block;
		margin-top: 2vw;
	}
	.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 0 0 -5%;
		width: 110%;
	}

	.rollftck section.semi .descrip.type .imageblock .descrip_form .img_form {
		margin: 1.6vw 1.6vw 0 0;
		width: 50%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form .img_form img {
		display: block;
		margin-top: 0.8vw;
		width: 100%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p {
		margin-top: 4vw;
		width: calc(50% - 1.6vw);
		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: 0.8vw;
		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: 1.6vw;
		width: 80%;
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a {
		color: #000;
		font-size: 1.1vw;
	}
	.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 1.5vw 0 0;
		width: calc(100% - 12vw);
	}
	.rollftck section.semi .descrip.type .imageblock .descrip_form p a.txtlink14 {
		display: block;
		margin: 0 !important;
		width: 8.6vw;
		color: #fff;
	}




	/* オリジナル */
	.rollftck section.ori {
		border: 1.2vw 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: -11.5vw 0 0 34vw;
		width: 19.4vw;
		height: auto;
		aspect-ratio: 194 / 161;
	}
	.rollftck section.ori .imageblock img.ori_img01 {
		margin-left: -3.4vw !important;
		width: calc(66.5vw * 0.9);
		aspect-ratio: 665 / 372;
	}
	.rollftck section.ori .imageblock img.ori_img02 {
		margin-left: 3.6vw !important;
		width: calc(53.9vw * 0.9);
		aspect-ratio: 539 / 398;
	}
	.rollftck section.ori .imageblock img.ori_img03 {
		margin-left: -0.8vw !important;
		width: calc(60vw * 0.9);
		aspect-ratio: 600 / 500;
	}
	.rollftck section.ori .imageblock img.ori_img04 {
		margin-left: auto !important;
		width: calc(40vw * 0.9);
		aspect-ratio: 490 / 324;
	}

	.rollftck section.ori .descrip .title {
		border-top: 0.1vw 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: 2vw;
	}
	.rollftck section.ori .descrip.type p.thin {
		margin-top: 2vw;
		font-size: 1.8vw;
		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: 12vw;
		height: auto;
		aspect-ratio: 135 / 33;
		background-size: 100%;
		position: absolute;
		top: -1.6vw;
		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: 3.6vw auto 0;
		width: 90% !important;
	}
	.rollftck ul.itemlist li {
		margin: 0 4% 4vw 0;
		padding: 0;
		width: 48% !important;
		font-size: 1.4vw;
		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: 1.6vw;
		width:100%;
		border: 0.1vw solid #ddd;
	}
	.rollftck ul.itemlist li a.txtlink14 {
		display: block;
		margin: 0.8vw auto 0;
		width: 70%;
		color: #fff;
		font-size: 1.4vw;
		font-weight: 600;
	}


/* 商品一覧 */
	.rollftck .catalog_box {
		margin-top: 4vw;
		padding: 2vw 0 3vw !important;
		background-color: #fffbe9;
	}
	.rollftck .catalog_box h2 {
		margin: 2vw auto 2vw !important;
		padding: 0.8vw;
		width: 82%;
		color: #fff;
		font-size: 2vw;
		text-align: center;
		border-radius: 1.2vw !important;
		/* background-color: #29abe2; */
		background-color: #666;
	}
	.rollftck .catalog_box .item {
		margin: 4vw auto 2vw;
		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: 1.6vw;
		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: 2vw;
		width: 68%;
		float: left;
		box-sizing: border-box;
		position: relative;
	}
	.rollftck .catalog_box .item .text h3 {
		padding-top: 0.8vw;
		font-size: 1.4vw !important;
	}
	.rollftck .catalog_box .item .text p {
		font-size: 1.4vw;
	}
	.rollftck .catalog_box .item .text .txtlink14 {
		margin-top: 1.6vw;
		width: 20vw;
		color: #fff;
	}
	.rollftck .catalog_box .item .text p.price {
		font-weight: bold;
		font-size: 1.4vw;
	}



}