@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
 File name:    style_tablet.css
 Style Info:     森永製菓 おかしプリント タブレット版
----------------------------------------------------------- */

@media screen and (min-width: 600px) and (max-width: 959px) {

	#main.okashiprint .sp {
		display: none !important;
	}

	#main.okashiprint .mainimage {
		margin: 0 !important;
		width: 100%;
		position: relative;
	}
	#main.okashiprint .mainimage .image {
		width: 100%;
		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.okashiprint .catch {
		padding: 0 0 3vw;
		background-color: #fef5e1;
		position: relative;
		box-sizing: border-box;
	}
	#main.okashiprint .catch img {
		display: block;
		margin: 0 auto;
		width: 90%;
		aspect-ratio: 689 / 137;
	}
	#main.okashiprint .catch h2 {
		width: 100%;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 1.2vw;
		left: 0;
	}
	#main.okashiprint .catch span.caption {
		display: block;
		margin-top: -2vw;
		color: #b50029;
		text-align: center;
	}

	#main.okashiprint .bnrblock {
		padding: 3.6vw 0 0 5vw;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 34vw;
		potision: relative;
		box-sizing: border-box;
	}
	#main.okashiprint .bnrblock.hichew {
		background-image: -webkit-image-set(url('../img/bnr_pht_hichew.webp') 1x, url('../img/bnr_pht_hichew@2x.webp') 2x);
		background-image: image-set(url('../img/bnr_pht_hichew.webp') 1x, url('../img/bnr_pht_hichew@2x.webp') 2x);
	}
	#main.okashiprint .bnrblock.caramel {
		background-image: -webkit-image-set(url('../img/bnr_pht_caramel.webp') 1x, url('../img/bnr_pht_caramel@2x.webp') 2x);
		background-image: image-set(url('../img/bnr_pht_caramel.webp') 1x, url('../img/bnr_pht_caramel@2x.webp') 2x);
	}
	#main.okashiprint .bnrblock h3 {
		margin: 0;
		padding: 0.8vw 0 0 9.2vw;
		font-size: 1.8vw !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: 3.4vw;
	}
	#main.okashiprint .bnrblock h3::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 8.6vw;
		height: 8.6vw;
	}
	#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 .text_photo {

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


	#main.okashiprint section.atten {
		margin: 4vw auto;
		width: 63vw;
	}
	#main.okashiprint section.atten h3 {
		padding: 1.2vw 0;
		color: #fff;
		text-align: center;
		font-size: 1.8vw !important;
		font-weight: 600;
		background-color: #808080;
		border-radius: 0.6vw;
	}
	#main.okashiprint section.atten ul.image {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 3vw;
	}
	#main.okashiprint section.atten ul.image li {
		margin-right: 1%;
		width: 24.25%;
	}
	#main.okashiprint section.atten ul.image li:last-child {
		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: 4.2vw;
		text-indent: -4.2vw;
	}
	#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: -3.6vw;
	}


	#main.okashiprint .listblock {
		margin-top: 6vw;
	}
	#main.okashiprint .listblock img.ti_morinaga {
		display: block;
		margin: 0 auto !important;
		width: 50%;
	}
	#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: 4.8vw !important;
		font-weight: 800;
		position: absolute;
		top: -3.2vw;
		left: 0;
	}
	#main.okashiprint .listblock .title img.img_pht {
		display: block;
		margin: 3vw auto 0;
		width: 47.5%;
		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: 1vw;
		width: 65%;
		color: #fff;
		font-size: 1.8vw !important;
		text-align: center;
		aspect-ratio: 411 / 46;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	#main.okashiprint .listblock .list_wrapper h3 strong {
		font-size: 2.4vw;
	}
	#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-right: 2%;
		width: 23.5%;
		text-align: center;
	}
	#main.okashiprint .listblock .list_wrapper.caramel ul.list {
		width: 80%;
	}
	#main.okashiprint .listblock .list_wrapper.caramel ul.list li {
		width: 30%;
		margin-right: 5%;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li:last-child {
		margin-right: 0;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li img {
		display: block;
		margin-bottom: 0.8vw;
		width: 100%;
		border: 0.4vw solid #fff;
		box-sizing: border-box;
	}
	#main.okashiprint .listblock .list_wrapper ul.list li a.txtlink14 {
		padding: 0.6vw 0.8vw;
		color: #fff;
	}

}