@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_mobile.css
 Style Info:     森永製菓 ミルクキャラメル スマホ版
----------------------------------------------------------- */

@media screen and (max-width: 599px){
	#main.caramel .mainimage {
		margin: 0 0 6vw !important;
		width: 100%;
		position: relative;
	}
	#main.caramel .mainimage .image {
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	#main.caramel .mainimage img.img_main {
		display: block;
		margin: 0 0 0 -5.5% !important;
		width: 111% !important;
		aspect-ratio: 1 / 1;
	}


	#main.caramel .wrapper {
		margin: 0 0 0 !important;
		padding: 2vw 4vw 6vw;
		margin: 0 0 0 -5.5% !important;
		width: 111% !important;
		background-image: url(../img/bg_pattern.png);
		background-size: 16.66%;
		box-sizing: border-box;
	}

	#main.caramel h2 {
		margin: 0;
		padding: 0;
		color: #7b1a3b;
		font-size: 6.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: 100%;
		aspect-ratio: 1163 / 592;
	}
	#main.caramel h3 {
		margin-top: 4vw;
		color: #7b1a3b;
		font-size: 6.4vw !important;
		text-align: center;
		line-height: 1.2;
		-webkit-text-stroke: 2vw #fff;
		paint-order: stroke;
	}

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

	#main.caramel section.description .contents .contentsbox_y {
		margin-top: 6vw;
		padding-bottom: 4vw;
		border: 0.4vw solid #ffd966;
		border-radius: 2vw;
		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: 4vw 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: 6vw;
		aspect-ratio: 739 / 522;
	}

	#main.caramel section.description .contents .arwbox {
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	#main.caramel section.description .contents .arwbox img {
		display: block;
		margin: 6vw 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: 4.6vw;
		font-weight: 600;
	}



	#main.caramel section.atten {
		margin-top: 20vw;
		padding: 4vw 0 6vw;
		background-color: #fff;
		border-radius: 3.2vw;
		position: relative;
	}
	#main.caramel section.atten span.title {
		display: block !important;
		margin: 0 auto 8vw;
		width: 80%;
		position: absolute;
		top: -4vw;
		left: 10%;
	}
	#main.caramel section.atten span.title img {
		display: block !important;
		margin-top: 0;
		width: 100%;
	}
	#main.caramel section.atten strong {
		display: block;
		margin-top: 6vw;
		color: #f42758;
		text-align: center;
		font-size: 3.6vw;
	}
	#main.caramel section.atten ul.image {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		margin: 4vw 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: 4vw auto;
		width: 90%;
	}
	#main.caramel section.atten ul.text li {
		margin-left: 8.4vw;
		text-indent: -11vw;
	}
	#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: -9vw;
	}
	#main.caramel section.atten .b {
		display: block;
		margin: 0 auto;
		padding: 1.2vw 0;
		width: 92%;
		color: #f3ff00;
		text-align: center;
		font-size: 3.2vw;
		font-weight: 600;
		background-color: #f42758;
		border-radius: 6vw;
		box-sizing: border-box;
	}
	#main.caramel section.atten ul.order {
		margin: 8vw auto 0;
		width: 40%;
	}
	#main.caramel section.atten ul.order li::after {
		content: '▼';
		display: block;
		margin: 0 0 3.2vw;
		color:  rgba(123,26,59,0.3);
		font-size: 8vw;
		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: 3.2vw 0 0;
		color: #7b1a3b;
		text-align: center;
		font-size: 1.6vw;
	}


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

	#main.caramel section.itemlist .contentsbox {
		margin-top: 3.2vw;
		padding: 4vw 0 6vw;
		border-radius: 3.2vw;
		background-color: #ffeda1;
	}
	#main.caramel section.itemlist .contentsbox strong {
		display: block;
		color: #ad0047;
		text-align: center;
		font-size: 6vw;
	}
	#main.caramel section.itemlist .contentsbox ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 4vw 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;
	}

}