@charset "UTF-8";

/* ==============================================================

 cup-soup top page
 PC / TB / SP 共通

==============================================================*/

/* スライド共通 */
.slick-slide { outline:none; /*overflow: hidden;*/ }
.slick-track { width: 100%; }

/* スライド1 */
.un_slideArea01 { width: 100%; padding-left: 0; margin-bottom: 22px; /*overflow: hidden;*/ opacity: 0;}
.un_slideArea01 .un_slider01Img,
.un_slideArea01 .un_slider01TxtArea { max-width: 500px; display: inline-block; vertical-align: top; }
.un_slideArea01 .un_slider01TxtArea { padding-top: 20px; }
.un_slideArea01 .un_slider01TxtArea .un_slider01Ttl { font-size: 30px; color: #0f872a; font-weight: bold; margin-bottom: 24px; letter-spacing: 1.8px; }
.un_slideArea01 .un_slider01TxtArea .un_slider01Ttl span  { vertical-align: top; position: relative; top: -0.2em; }
.un_slideArea01 .un_slider01TxtArea .un_slider01Txt { font-size: 14px; color: #252525; font-weight: bold; letter-spacing: 0.8px; line-height: 1.7; margin-bottom: 27px; }
.un_slideArea01 .un_slider01TxtArea .un_sliderBtn { display: inline-block; padding: 11px 47px 10px 28px; background: #0f872a; color: #fff !important; border-radius: 4px; position: relative; letter-spacing: 0.5px; transition: all 0.3s; }
.un_slideArea01 .un_slider01TxtArea .un_sliderBtn::after { content: ""; width: 8px; height: 8px; margin-top: -5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; top: 50%; right: 14px; right: 17px; }
.un_slideArea01 .un_slider01TxtArea .un_sliderBtn:hover { opacity: 0.7; }
.un_slider01 { /*width: 790px;*/ width: 880px; margin: 0 auto; }
.un_slider01 .slick-prev,
.un_slider01 .slick-next { width: 65px; height: 65px; }
.un_slider01 .slick-prev { left: -80px; }
.un_slider01 .slick-next { right: -76px; }
.un_slider01 .slick-prev:before,
.un_slider01 .slick-next:before { font-size: 0; color: transparent; opacity: 1.0; width: 100%; height: 100%; display: block; }
.un_slider01 .slick-prev:before { content: ''; background: url(https://www.ajinomoto.co.jp/knorr/img/cup-soup/un_slider01_left.png) no-repeat; background-size: cover; }
.un_slider01 .slick-next:before { content: ''; background: url(https://www.ajinomoto.co.jp/knorr/img/cup-soup/un_slider01_right.png) no-repeat; background-size: cover; }

/* スライド2 */
.un_slideArea02 { max-width: 1300px; margin: 0 auto; margin-bottom: 16px; overflow: hidden; opacity: 0;}
.un_slideArea02 .slick-slider { overflow: hidden; }
.un_slideArea02 .slick-prev,
.un_slideArea02 .slick-next { display: none !important; }
.un_slideArea02 .slick-slide { overflow: visible; padding: 64px 35px; }
.un_slideArea02 .slick-slide img {  transform: scale(1.0); transition: all 0.25s; box-shadow: 13px 13px 33px 7px #dbd8d8; }
.un_slideArea02 .slick-slide.un_center img { transform: scale(1.2); transition: all 0.25s;  }

/* スライド3 */
.un_slider03 { max-width: 745px; margin: 0 auto; }
.un_slider03 .slick-slide img { max-width: 97% !important; }
.un_slider03 .slick-prev,
.un_slider03 .slick-next { width: 59px; height: 59px; }
.un_slider03 .slick-prev { left: -80px; }
.un_slider03 .slick-next { right: -76px; }
.un_slider03 .slick-prev:before,
.un_slider03 .slick-next:before { font-size: 0; color: transparent; opacity: 1.0; width: 100%; height: 100%; display: block; }
.un_slider03 .slick-prev:before { content: ''; background: url(https://www.ajinomoto.co.jp/knorr/img/cup-soup/un_slider03_left.png) no-repeat; background-size: cover; }
.un_slider03 .slick-next:before { content: ''; background: url(https://www.ajinomoto.co.jp/knorr/img/cup-soup/un_slider03_right.png) no-repeat; background-size: cover; }
.un_slider03 .slick-dots { bottom: -36px; }
.un_slider03 .slick-dots li { margin: 0; }
.un_slider03 .slick-dots li button:before { font-size: 12px; }
.un_slider03 .js-modal-btn { background: none; border: none; outline: 0; }
.un_slider03 .js-modal-btn a { display: block; }
.modal-video { background-color: rgba(0,0,0,0.7); }
.modal-video-body { max-width: 864px; }
.modal-video-close-btn { display: none; }

/* スライド4 */
.un_slider04 .slick-prev,
.un_slider04 .slick-next { display: none !important; }
.slick-dots li button::before { color: #e0dbc4; opacity: 1.0; }
.slick-dots li.slick-active button:before { opacity: 1.0; color: #0f872a; }

/* ==============================================================

 PC Only

==============================================================*/
@media screen and (min-width: 1100px) {
}/* @media */
/* ==============================================================

 TB Only

==============================================================*/
@media screen and (max-width: 1149px) and (min-width: 501px) {
	/* スライド3 */
	.un_slider03 .slick-prev { left: -3.5%; z-index: 1; }
	.un_slider03 .slick-next { right: -2%; }
}/* @media */

@media screen and (max-width: 1099px) and (min-width: 501px) {

	/* スライド1 */
	/* .un_slideArea01 .un_slider01Img,
	.un_slideArea01 .un_slider01TxtArea { display:block; } */
	.un_slideArea01 { padding-left: 0; }
	.un_slider01 .slick-prev { left: -7%; z-index: 1; }
	.un_slider01 .slick-next { right: -7%; }
}/* @media */


@media screen and (max-width: 870px) and (min-width: 501px) {
	.un_mainvisArea { margin-bottom: 10px; }

	/* スライド1 */
	.un_slideArea01 { width: 100%; padding-left: 20px; }
	.un_slideArea01 .un_slider01Img,
	.un_slideArea01 .un_slider01TxtArea { display: block; margin: 0 auto; width: 420px; }
	.un_slideArea01 .un_slider01Img { margin-bottom: -48px; }
	.un_slideArea01 .un_slider01Img img { width: 70%; margin: 0 auto; }
	.un_slideArea01 .un_slider01TxtArea { padding-left: 40px; z-index: 10000; }
	.un_slideArea01 .un_slider01TxtArea .un_slider01Ttl { font-size: 25px; margin-bottom: 14px; }
	.un_slider01 { width: 100%; }
	.un_slider01 .slick-prev { left: -1%;; z-index: 1; }
	.un_slider01 .slick-next { right: 4%; }

	/* スライド2 */
	.un_slideArea02 .slick-slide { overflow: visible; padding: 64px 5px; }
	.un_slideArea02 .slick-slide img { max-width: 124% !important; }
}/* @media */
@media screen and (max-width: 790px) and (min-width: 501px) {
	/* スライド2 */
	.un_slideArea02 .slick-slide { padding: 10px 0 30px; }
	.un_slideArea02 .slick-slide img { max-width: 100% !important; transform: scale(0.8); }
	.un_slideArea02 .slick-slide.un_center img { transform: scale(0.9); }
}/* @media */
@media screen and (max-width: 650px) and (min-width: 501px) {
	/* スライド2 */
	.un_slideArea02 .slick-slide { padding: 10px 0 30px; }
	.un_slideArea02 .slick-slide img { max-width: 100% !important; transform: scale(0.8); margin: 0 auto; }
	.un_slideArea02 .slick-slide.un_center img { transform: scale(0.9); }
}/* @media */
/* ==============================================================

 SP Only

==============================================================*/
@media screen and (max-width: 500px) {
	/* スライド1 */
	.un_slideArea01 { width: 100%; padding-left: 0; }
	.un_slideArea01 .un_slider01Img,
	.un_slideArea01 .un_slider01TxtArea { display: block; margin: 0 auto; }
	.un_slideArea01 .un_slider01Img { width: 58%; padding-left: 20px; margin-bottom: -15px; }
	.un_slideArea01 .un_slider01TxtArea { padding-top: 0; width: 88%; }
	.un_slideArea01 .un_slider01TxtArea .un_slider01Ttl { font-size: 16px; margin-bottom: 2px; letter-spacing: 0.6px; }
	.un_slideArea01 .un_slider01TxtArea .un_slider01Txt { font-size: 10px; letter-spacing: 0.3px; margin-bottom: 11px; }
	.un_slideArea01 .un_slider01TxtArea .un_sliderBtn { font-size: 11px; padding: 9px 28px 8px 16px; letter-spacing: 0.5px; }
	.un_slideArea01 .un_slider01TxtArea .un_sliderBtn::after { width: 6px; height: 6px; }
	.un_slider01 { width: 100%; }
	.un_slider01 .slick-prev,
	.un_slider01 .slick-next { top: 36.5%; width: 43px; height: 43px; }
	.un_slider01 .slick-prev { left: 0.4%; z-index: 1; }
	.un_slider01 .slick-next { right: 0.4%; }

	/* スライド2 */
	.un_slideArea02 .slick-slide { padding: 10px 0 30px; }
	.un_slideArea02 .slick-slide img { max-width: 100% !important; transform: scale(0.7); }
	.un_slideArea02 .slick-slide.un_center img { transform: scale(0.86); }


	/* スライド3 */
	.un_slider03 .slick-prev ,
	.un_slider03 .slick-next { width: 27px; height: 27px; }
	.un_slider03 .slick-prev { left: -5%; z-index: 1; }
	.un_slider03 .slick-next { right: -3%; }
	.un_slider03 .slick-dots { bottom: -29px; }
	.un_slider03 .slick-dots li button:before { font-size: 10px; }
	.un_slider03.slick-dotted.slick-slider { margin-bottom: 48px; }
}/* @media */


body.is-pageLoaded .un_slideArea01,
body.is-pageLoaded .un_slideArea02 { opacity: 1; }