@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_tablet.css
 Style Info:     森永製菓 ミルクキャラメル タブレット版
----------------------------------------------------------- */

@media screen and (min-width: 600px) and (max-width: 959px) {
	#main.caramel .mainimage {
		margin: 0 !important;
		width: 100%;
		position: relative;
	}
	#main.caramel .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%;
	}
	#main.caramel .mainimage .image img.img_main.sp {
		display: none !important;
	}


	#main.caramel .wrapper {
		margin: 3vw 0 0;
		padding: 1vw 6vw 3vw;
		background-image: url(../img/bg_pattern.png);
		background-size: 16.66%;
		box-sizing: border-box;
	}

	#main.caramel h2 {
		margin: 0;
		color: #7b1a3b;
		font-size: 4vw !important;
		text-align: center;
	}
	#main.caramel h2 span {
		display: block;
		font-size: 60%;
	}
	#main.caramel img.img_itemimage {
		display: block;
		margin: 0 auto;
		width: 58vw;
		aspect-ratio: 1163 / 592;
	}
	#main.caramel h3 {
		margin-top: 2vw;
		color: #7b1a3b;
		font-size: 4vw !important;
		text-align: center;
		line-height: 1.2;
		-webkit-text-stroke: 1vw #fff;
		paint-order: stroke;
	}

	#main.caramel section.description {
		margin-top: 10vw;
		padding: 2vw 0 3vw;
		background-color: #ffeda1;
		border-radius: 1.6vw;
		position: relative;
	}
	#main.caramel section.description span.title {
		display: block !important;
		margin: 0 auto 4vw;
		width: 90%;
		position: absolute;
		top: -6vw;
		left: 5%;
	}
	#main.caramel section.description span.title img {
		display: block !important;
		margin-top: 0;
		width: 100%;
	}
	#main.caramel section.description .contents {
		display: block;
		margin: 11vw auto 0 !important;
		mrgin-top: 3vw;
		padding: 2vw 3vw;
		width: 90%;
		border: 0.2vw solid #7b1a3b;
		border-radius: 2vw;
		box-sizing: border-box;
		position: initial;
	}
	#main.caramel section.description .contents span.ti {
		display: block;
		margin: -5vw auto 4vw;
		color: #7b1a3b;
		text-align: center;
		font-size: 3.6vw;
		font-weight: 600;
		-webkit-text-stroke: 1.6vw #ffeda1;
		paint-order: stroke;
	}
	#main.caramel section.description .contents .contentsbox {
		margin-top: 4vw;
		padding: 2vw 3vw 3vw;
		background-color: #fff;
		border-radius: 2vw;
		box-sizing: border-box;
	}
	#main.caramel section.description .contents .contentsbox h4 {
		margin: -4vw auto 1vw;
		padding: 0.6vw 0;
		width: 90%;
		color: #fff;
		text-align: center;
		font-size: 3vw;
		background-color: #ad0047;
		border-radius: 3vw;
		border: 0.4vw solid #fff;
		box-sizing: border-box;
	}
		/* 左右に斜め */
	#main.caramel section.description .contents .contentsbox p.line {
		align-items: center; /* 線を上下中央 */
		display: flex; /* 文字と線を横並び */
		justify-content: center; /* 文字を中央寄せ */
		margin-top: 2vw;
		color: #7b1a3b;
		font-size: 2vw;
		font-weight: 300;
	}
	#main.caramel section.description .contents .contentsbox p.line::before,
	#main.caramel section.description .contents .contentsbox p.line::after {
		background-color: #7b1a3b; /* 線の色 */
		content: "";
		height: 0.1vw; /* 線の太さ */
		width: 6vw; /* 線の長さ */
	}
	#main.caramel section.description .contents .contentsbox p.line::before {
		margin-right: 0; /* 文字との余白 */
		transform: rotate(60deg); /* 傾ける */
	}
	#main.caramel section.description .contents .contentsbox p.line::after {
		margin-left: 0; /* 文字との余白 */
		transform: rotate(-60deg); /* 傾ける */
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-top: 1vw;
		gap: 0.6vw;
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo .prefix {
		color: #7b1a3b;
		font-size: 1.6vw;
		font-weight: 600;
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo .dim {
		color: #7b1a3b;
		font-size: 1.6vw;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo .dim strong {
		font-size: 3.6vw;
		font-weight: 700;
		line-height: 1;
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo .dim em {
		display: block;
		margin-top: 0.6vw;
		font-size: 1.4vw;
		font-style: normal;
		font-weight: 400;
	}
	#main.caramel section.description .contents .contentsbox .sizeinfo .times {
		color: #7b1a3b;
		font-size: 2.4vw;
		font-weight: 600;
	}
	#main.caramel section.description .contents .contentsbox img {
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	#main.caramel section.description .contents .contentsbox img.img_size {
		aspect-ratio: 802 / 685;
	}
	#main.caramel section.description .contents .contentsbox img.img_photo {
		margin-top: 2vw;
		margin-left: 1.8%;
		width: 100%;
		aspect-ratio: 907 / 537;
	}
	#main.caramel p.caption {
		margin-top: 2vw;
		text-align: center;
		font-size: 1.2vw;
	}
	#main.caramel section.description .contents .contentsbox p.noline {
		margin: 0.8vw auto 0;
		width: 90%;
		color: #7b1a3b;
		text-align: center;
		font-size: 1.8vw;
	}

	#main.caramel section.description .contents .contentsbox_y {
		margin-top: 3vw;
		padding-bottom: 2vw;
		border: 0.2vw solid #ffd966;
		border-radius: 1vw;
		overflow: hidden;
	}
	#main.caramel section.description .contents .contentsbox_y h4 {
		margin-top: 0;
		width: 100%;
		color: #7b1a3b;
		background-color: #ffd966;
		border: none;
		border-radius: 0;
	}
	#main.caramel section.description .contents .contentsbox_y img.img_design {
		display: block;
		margin: 2vw auto 0;
		width: 90%;
	}
	#main.caramel section.description .contents .contentsbox_y img.img_design {
		aspect-ratio: 794 / 585;
	}
	#main.caramel section.description .contents .contentsbox_y img.img_draw {
		margin-top: 3vw;
		aspect-ratio: 739 / 522;
	}

	#main.caramel section.description .contents .arwbox {
		margin: 0 auto;
		width: 95%;
		text-align: center;
	}
	#main.caramel section.description .contents .arwbox img {
		display: block;
		margin: 3vw auto;
	}
	#main.caramel section.description .contents .arwbox img.img_arw {
		width: 30%;
		aspect-ratio: 348 / 192;
	}
	#main.caramel section.description .contents .arwbox img.img_100 {
		width: 90%;
		aspect-ratio: 1026 / 791;
	}
	#main.caramel section.description .contents .arwbox p.last {
		color: #7b1a3b;
		font-size: 2.4vw;
		font-weight: 600;
	}



	#main.caramel section.atten {
		margin-top: 10vw;
		padding: 2vw 0 3vw;
		background-color: #fff;
		border-radius: 1.6vw;
		position: relative;
	}
	#main.caramel section.atten span.title {
		display: block !important;
		margin: 0 auto 4vw;
		width: 70%;
		position: absolute;
		top: -4vw;
		left: 15%;
	}
	#main.caramel section.atten span.title img {
		display: block !important;
		margin-top: 0;
		width: 100%;
	}
	#main.caramel section.atten strong {
		display: block;
		margin-top: 2vw;
		color: #f42758;
		text-align: center;
		font-size: 1.8vw;
	}
	#main.caramel section.atten ul.image {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		margin: 2vw auto 0;
		width: 80%;
	}
	#main.caramel section.atten ul.image li {
		margin-right: 1%;
		width: 49.5%;
	}
	#main.caramel section.atten ul.image li:nth-child(2n) {
		margin-right: 0;
	}
	#main.caramel section.atten ul.image li img {
		width: 100%;
	}
	#main.caramel section.atten ul.text {
		margin: 2vw auto;
		width: 80%;
	}
	#main.caramel section.atten ul.text li {
		margin-left: 4.2vw;
		text-indent: -4.2vw;
	}
	#main.caramel section.atten ul.text li:nth-child(1),
	#main.caramel section.atten ul.text li:nth-child(2),
	#main.caramel section.atten ul.text li:nth-child(3),
	#main.caramel section.atten ul.text li:nth-child(4),
	#main.caramel section.atten ul.text li:nth-child(5),
	#main.caramel section.atten ul.text li:nth-child(6),
	#main.caramel section.atten ul.text li:nth-child(7),
	#main.caramel section.atten ul.text li:nth-child(8),
	#main.caramel section.atten ul.text li:nth-child(9) {
		text-indent: -3.6vw;
	}
	#main.caramel section.atten .b {
		display: block;
		margin: 0 auto;
		padding: 0.6vw 0;
		width: 80%;
		color: #f3ff00;
		text-align: center;
		font-size: 1.6vw;
		font-weight: 600;
		background-color: #f42758;
		border-radius: 3vw;
		box-sizing: border-box;
	}
	#main.caramel section.atten ul.order {
		margin: 4vw auto 0;
		width: 40%;
	}
	#main.caramel section.atten ul.order li::after {
		content: '▼';
		display: block;
		margin: 0 0 1.6vw;
		color:  rgba(123,26,59,0.3);
		font-size: 4vw;
		text-align: center;
	}
	#main.caramel section.atten ul.order li:last-child::after {
		content: '';
		font-size: 0;
	}
	#main.caramel section.atten ul.order li img {
		width: 100%;
	}
	#main.caramel section.atten ul.order li img.illust_pc {
		aspect-ratio: 403 / 242;
	}
	#main.caramel section.atten ul.order li img.illust_arigato {
		aspect-ratio: 533 / 234;
	}
	#main.caramel section.atten ul.order li img.illust_ship {
		aspect-ratio: 399 / 285;
	}
	#main.caramel section.atten ul.order li p {
		margin: 1.6vw 0 0;
		color: #7b1a3b;
		text-align: center;
		font-size: 1.6vw;
	}


	#main.caramel section.itemlist span.title {
		display: block !important;
		margin: 4vw auto 2vw;
		width: 70%;
	}
	#main.caramel section.itemlist span.title img {
		display: block !important;
		margin-top: 0;
		width: 100%;
	}

	#main.caramel section.itemlist .contentsbox {
		margin-top: 1.6vw;
		padding: 2vw 0 3vw;
		border-radius: 1.6vw;
		background-color: #ffeda1;
	}
	#main.caramel section.itemlist .contentsbox strong {
		display: block;
		color: #ad0047;
		text-align: center;
		font-size: 3vw;
	}
	#main.caramel section.itemlist .contentsbox ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 2vw auto 0;
		width: 80%;
	}
	#main.caramel section.itemlist .contentsbox ul li {
		margin: 0 2% 2% 0;
		width: 49%;
	}
	#main.caramel section.itemlist .contentsbox ul li img {
		width: 100%;
	}
	#main.caramel section.itemlist .contentsbox ul li:nth-child(2n) {
		margin-right: 0;
	}

}