@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_mobile.css
 Style Info:     森永製菓 おかしプリント スマホ版
----------------------------------------------------------- */

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


	#main.okashiprint .catch {
		margin: 0 0 0 -5.5% !important;
		padding: 0 0 3vw;
		width: 111% !important;
		background-color: #fef5e1;
		position: relative;
		box-sizing: border-box;
	}
	#main.okashiprint .catch img {
		display: block;
		margin: 0 auto;
		width: 100%;
		aspect-ratio: 689 / 137;
	}
	#main.okashiprint .catch h2 {
		width: 100%;
		color: #fff;
		font-size: 3.2vw !important;
		text-align: center;
		position: absolute;
		top: -1vw;
		left: 0;
	}
	#main.okashiprint .catch span.caption {
		display: block;
		margin-top: -2vw;
		color: #b50029;
		text-align: center;
	}

	#main.okashiprint .bnrblock {
		margin-bottom: 6vw;
		padding: 6vw 0 0 0;
		overflow: hidden;
		potision: relative;
		box-sizing: border-box;
	}
	#main.okashiprint .bnrblock.hichew {
		background-color: #e0ccf5;
	}
	#main.okashiprint .bnrblock.caramel {
		background-color: #f5dba0;
	}
	#main.okashiprint .bnrblock h3 {
		margin: 0;
		padding: 1.4vw 0 0 21vw;
		font-size: 4.4vw !important;
		position: relative;
		box-sizing: border-box;
	}
	#main.okashiprint .bnrblock.hichew h3 {
		color: #c12175;
	}
	#main.okashiprint .bnrblock.caramel h3 {
		color: #f4a000;
	}
	#main.okashiprint .bnrblock h3 strong {
		display: block;
		margin-top: 0;
		color: #602812;
		font-size: 6.8vw;
	}
	#main.okashiprint .bnrblock h3::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 18vw;
		height: 18vw;
	}
	#main.okashiprint .bnrblock.hichew h3::before {
		background: url("../img/ic_hichew.webp") no-repeat center / contain;
	}
	#main.okashiprint .bnrblock.caramel h3::before {
		background: url("../img/ic_caramel.webp") no-repeat center / contain;
	}
	#main.okashiprint .bnrblock img {
		display: block;
	}
	#main.okashiprint .bnrblock img.sp {
		margin: 6vw 0 0 -100%;
		width: 200%;
	}

	#main.okashiprint .bnrblock .text_photo {
		margin: 0 0 0 5vw;
		padding: 0;
	}
	#main.okashiprint .bnrblock .text_photo p {
		margin: 3vw 0 0 0;
		color:#602812;
		font-size: 3.6vw;
		line-height: 1.6;
	}
	#main.okashiprint .bnrblock .text_photo a.button {
		display: block;
		margin: 2vw 0 0 40vw;
		width: 40vw;
		aspect-ratio: 21 / 6;
	}
	#main.okashiprint .bnrblock .text_photo a.button img {
		width: 100%;
		aspect-ratio: 21 / 6;
	}


	#main.okashiprint section.atten {
		margin: 10vw auto;
		width: 92vw;
	}
	#main.okashiprint section.atten h3 {
		padding: 1.2vw 0;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size: 3.6vw !important;
		font-weight: 600;
		background-color: #808080;
		border-radius: 1.2vw;
		box-sizing: border-box;
	}
	#main.okashiprint section.atten ul.image {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		margin: 3vw auto 0;
		width: 90%;
	}
	#main.okashiprint section.atten ul.image li {
		margin: 0 2% 1.8vw 0;
		width: 49%;
	}
	#main.okashiprint section.atten ul.image li:nth-child(2n) {
		margin-right: 0;
	}
	#main.okashiprint section.atten ul.image li img {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
	}
	#main.okashiprint section.atten ul.text {
		margin-top: 3vw;
	}
	#main.okashiprint section.atten ul.text li {
		margin-left: 8.4vw;
		text-indent: -11vw;
	}
	#main.okashiprint section.atten ul.text li:nth-child(1),
	#main.okashiprint section.atten ul.text li:nth-child(2),
	#main.okashiprint section.atten ul.text li:nth-child(3),
	#main.okashiprint section.atten ul.text li:nth-child(4),
	#main.okashiprint section.atten ul.text li:nth-child(5),
	#main.okashiprint section.atten ul.text li:nth-child(6),
	#main.okashiprint section.atten ul.text li:nth-child(7),
	#main.okashiprint section.atten ul.text li:nth-child(8),
	#main.okashiprint section.atten ul.text li:nth-child(9) {
		text-indent: -9vw;
	}


	#main.okashiprint .listblock {
		margin-top: 6vw;
	}
	#main.okashiprint .listblock img.ti_morinaga {
		display: block;
		margin: 0 auto !important;
		width: 80%;
	}
	#main.okashiprint .listblock .title {
		margin-top: 2vw;
		position: relative;
	}
	#main.okashiprint .listblock .title h2 {
		display: block;
		margin: 0.8vw 0 0 !important;
		width: 100% !important;
		color: #3a2508;
		text-align: center !important;
		font-size: 7vw !important;
		font-weight: 800;
		position: absolute;
		top: -5vw;
		left: 0;
	}
	#main.okashiprint .listblock .title img.img_pht {
		display: block;
		margin: 6vw auto 0;
		width: 80%;
		aspect-ratio: 1 / 1;
	}

	#main.okashiprint .listblock .list_wrapper {
		margin-top: 4vw;
		padding-bottom: 2.4vw;
		border-radius: 0.8vw;
	}
	#main.okashiprint .listblock .list_wrapper.grape {
		background-color: #f2ebfc;
	}
	#main.okashiprint .listblock .list_wrapper.straw {
		background-color: #fff3f5;
	}
	#main.okashiprint .listblock .list_wrapper.lemon {
		background-color: #feffdc;
	}
	#main.okashiprint .listblock .list_wrapper.caramel {
		background-color: #fff6de;
	}
	#main.okashiprint .listblock .list_wrapper h3 {
		margin: 0 auto 1.6vw;
		padding-top: 2vw;
		width: 100%;
		color: #fff;
		font-size: 3.6vw !important;
		text-align: center;
		aspect-ratio: 411 / 46;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	#main.okashiprint .listblock .list_wrapper h3 strong {
		font-size: 4.2vw;
	}
	#main.okashiprint .listblock .list_wrapper.grape h3 {
		background-image: url("../img/bt_bg_grape.webp");
	}
	#main.okashiprint .listblock .list_wrapper.straw h3 {
		background-image: url("../img/bt_bg_strb.webp");
	}
	#main.okashiprint .listblock .list_wrapper.lemon h3 {
		background-image: url("../img/bt_bg_lemon.webp");
	}
	#main.okashiprint .listblock .list_wrapper.caramel h3 {
		color: #543004;
		background-image: url("../img/bt_bg_caramel.webp");
	}
	#main.okashiprint .listblock .list_wrapper ul.list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 0 auto;
		width: 97%;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li {
		margin: 0 2% 4vw 0;
		width: 49%;
		text-align: center;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li:nth-child(2n) {
		margin-right: 0;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li img {
		display: block;
		margin-bottom: 2vw;
		width: 100%;
		border: 1vw solid #fff;
		box-sizing: border-box;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li a.txtlink14 {
		width: 100%;
		padding: 1.2vw 1.6vw;
		color: #fff;
	}

}