@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


@media screen and (max-width: 767px) {
	body { background: url(/user_data/packages/ravijour/feature/happypantiesday/images/ribbon_sp.png) no-repeat bottom; background-size: cover}
  #undercolumn_blog　{ width: 100% !important}
  .only_pc { display: none}
	.PageWrapper { font-family: 'Noto Sans JP', sans-serif; width: 100%; margin: 0 auto; padding-bottom: 60px; color: #f18697; font-size: 10px; line-height: 1.4em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased}
	.mainVisual { opacity: 0; margin: 0 auto}
	.mainVisual img { max-width: 100%; height: auto}
	.mainVisual { animation: fadein 1.5s ease 0.5s 1 forwards}
	.mainVisual .pic { margin: 0 auto 25px}
	.mainVisual h1 { border: 2px solid #f18697; border-radius: 15px; color: #f18697; font-weight: 600; font-size: 20px; letter-spacing: .14em; line-height: 1.7; margin: 0 auto 25px; padding: 15px 0 20px; text-align: center; width: 88%}
	.mainVisual h1 span { display: inline-block; font-weight: 500; font-size: 12px}
	.mainVisual .novelty { margin: 0 auto 40px; background: #f18697; color: #fff; font-size: 15px; letter-spacing: .14em; font-weight: 600; text-align: center; padding: 8px 0 10px; width: 76%}
	@-webkit-keyframes fadein {
		100% { opacity: 1}
	}   
	@keyframes fadein {
		100% { opacity: 1}
	}
	.section { margin: 0 auto; box-sizing: border-box}
	.section .pic { margin: 0 auto 70px; text-align: center; width: 92%}
	.section .text { margin: 0 auto 15px; font-size: 11px; text-align: center; letter-spacing: .16em; line-height: 1.7}
	.section .title { margin: 0 auto 30px; text-align: center; width: 86.5%; }
	.section img { width: 100%; height: auto; }
	.PageWrapper p.check { margin: 0 auto; text-align: center}
	.PageWrapper p.check a { background: #f18697; color: #fff; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: 0.15em; padding: 5%; position: relative; text-decoration: none; box-sizing: border-box; width: 65.8%}
	.PageWrapper p.check a:after { position: absolute; top: 0; bottom: 0; left: 87%; margin: auto; content: ""; vertical-align: middle; width: 10px; height: 10px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(45deg) skew(-14deg, -14deg); transition: all .4s}
}

@media screen and (min-width: 768px) {
	body { background: url(/user_data/packages/ravijour/feature/happypantiesday/images/ribbon.png) no-repeat top; background-size: cover}
 	.only_sp { display: none}
	.wrapper { background: transparent; position: relative; font-family: 'Noto Sans JP', sans-serif; color: #fff; font-size: 10px; line-height: 1.8; margin: 0 auto; padding-bottom: 10px; width: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased}
	.section { position: relative; background: url(../images/ribbon.png) no-repeat top; background-size: cover; margin: 0 auto; padding-bottom: 100px}
	.section .pic { margin: 0 auto 40px; text-align: center; max-width: 915px; width: 90%}
	.section .text { color: #f18697; font-weight: 600; font-size: 18px; line-height: 1.8; margin: 0 auto 60px; text-align: center; letter-spacing: .12em}
	.section .title { margin: 0 auto 100px; text-align: center; max-width: 745px; width: 90%}
	.section img { width: 100%; height: auto}
	.wrapper p.check { margin: 0 auto; text-align: center}
	.wrapper p.check a { background: #f18697; color: #fff; display: inline-block; font-size: 22px; font-weight: bold; letter-spacing: 0.15em; padding: 1.8%; position: relative; text-decoration: none; box-sizing: border-box; width: 465px}
	.wrapper p.check a:after { position: absolute; top: 0; bottom: 0; left: 90%; margin: auto; content: ""; vertical-align: middle; width: 12px; height: 12px; border: 2px solid; border-color: #fff #fff transparent transparent; transform: rotate(45deg) skew(-14deg, -14deg); transition: all .4s}
	.mainVisual { opacity: 0; animation: fadein-main 2.5s ease 0.5s 1 forwards}
	.mainVisual { position: relative; max-width: 965px; width: 100%; margin: 0 auto; text-align :center}
	.mainVisual .pic { margin: 0 auto 35px}
	.mainVisual h1 { border: 4px solid #f18697; border-radius: 15px; color: #f18697; font-weight: 600; font-size: 29px; letter-spacing: .18em; line-height: 1.8; margin: 0 auto 35px; padding: 25px 0 30px; text-align: center; width: 630px}
	.mainVisual h1 span { display: inline-block; font-weight: 500; font-size: 18px}
	.mainVisual .novelty { margin: 0 auto 55px; background: #f18697; color: #fff; display: inline-block; font-size: 24px; letter-spacing: .18em; font-weight: 600; text-align: center; padding: 6px 40px}
	.mainVisual img { width: 100%; height: auto}

	@-webkit-keyframes fadein-main {
		100%  { opacity: 1}
	}

	@keyframes fadein-main {
		100%  { opacity: 1}
	}
}