@charset "UTF-8";

/* //////////////////////////////////////////////////
[LAYOUT]
////////////////////////////////////////////////// */

body , #container, #pageLoader {
    background-color: #f9dcc7;
} 
#container {
	min-width: initial !important;
}
#containerWrap {
	min-width: initial !important;
}
.w100 {
	width: 100%; height: auto;
}

/* --------------------------------------------------
    #pageHeader
-------------------------------------------------- */ 

#pageHeader {
	padding: 20px 0 20px;
	margin-bottom: 40px;
} 
#pageHeader .border {
	border-top: 3px solid #e85518;
	border-bottom: 3px solid #e85518;
	padding: 18px 0 8px;
	margin-bottom: 25px;
	position: relative;
}
#pageHeader h2{
	position: absolute;
	top: 50%; left: 20px;
	transform: translateY(-50%);
}
#pageHeader h1 {
	text-align: center;
}
#pageHeader h1 img.abc {
	max-width: 500px;
	width: 100%; height: auto;
}

/* --------------------------------------------------
    content
-------------------------------------------------- */ 
#content {
    padding: 1px 0 80px;
    background-color: #f9dcc7;
}
.contentSection {
	max-width: 1100px;
	margin: 50px auto; 
	padding: 30px 20px;
}
section#blockA, section#blockC,
section#blockD, section#blockF {
	border: solid 2px #219d8b;
	border-radius: 50px;
	background-color: #fff;
}
.contentSection h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.contentSection h2 .nSP {
	position: absolute;
	left: 0;
}
.contentSection h2.R .nSP {
	left: initial;
	right: 0px;
}
img.max356 {
	max-width: 356px;
	width: 100%;height: auto;
}
img.max400 {
	max-width: 400px;
	width: 100%;height: auto;
}
#content .illustrator {
	border-top: solid 3px #e85518;
	margin-top: 70px;
	padding-top: 30px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
#content .illustrator span {
    font-weight: 500;
}

/* --------------------------------------------------
    #thmMovieLink
-------------------------------------------------- */ 
#thmMovieLink {
    width: 630px;
    margin: 95px auto;
}
#thmMovieLink a {
    display: block;
    width: 630px;
    height: 355px;
    text-indent: -99999px;
    background-image: url(../../img/abc/sp/thm_movie.png);
    background-repeat: no-repeat;
    background-size: 630px auto;
}

/* --------------------------------------------------
    .unitStep
-------------------------------------------------- */ 
.unitStep {
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.unitStep .ph {
	width: 55%;
	padding-right: 50px;
}
.unitStep .caption {
	width: 45%;
	position: relative;
}
section#blockA .unitStep .caption {
	width: 47%;
}
section#blockA .unitStep .ph {
	width: 53%;
}


.unitStep .caption h3 {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 17px;
}
.unitStep .caption .sentence p {
	font-size: 16px;
	line-height: 2.2;
}
.unitStep .caption .sup {
    margin-top: 32px;
    background-color: #ececec;
    padding: 17px 25px 17px;
}
.unitStep .caption .sup h4 {
    letter-spacing: 0.08em;
    font-size: 17px;
    margin-bottom: 10px;
}
.unitStep .caption .sup p {
    line-height: 1.7;
}
.unitStep03 {
	margin-top: 10px;
}

.bgOrange {
    background: #f9dcc7;
}
.bgWhite {
    background: #fff;
}

.bgWhite {
    background: #fff;
}

/* GreenSnap */
.GreenSnap {
	max-width: 1000px;
	margin: 70px auto 70px;
	padding: 0px 20px 0;
}
.GreenSnap .red{
	color: #f00;
	text-align: right;
	font-size: 16px;
	font-weight: 500;
	margin: 0px 10px 0;
}
.GreenSnap .inline a.r {
	color: #f00;
	font-weight: 500;
}
.GreenSnap .inline{
	max-width: 680px;
	margin: 0px auto 0;
	border: solid 1px #fff;
	padding: 10px;
}
.f16 {
  font-size: 16px;
  line-height: 1.8;
}
/* shop */
.shop {
	max-width: 1000px;
	margin: 0px auto 0;
	padding: 0px 20px 0;
}
.shop .inline {
	max-width: 680px;
	margin: 0px auto 0;
	text-align: center;
}
.shop ul.sh{
	display: flex;
	align-items: center;
	border: solid 1px #fff;padding: 10px;
	margin-bottom: 30px;
	position: relative;
}
.shop ul.sh::after{
	content: '';
	position: absolute;
	top: 50%; right: 15px;
	transform: translateY(-50%);
	width: 20px; height: 37px;
	background-image: url(../img/btn_next.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.shop ul.sh .l {
	width: 140px;
	padding-right: 35px;
}
.shop ul.sh .l img {
	border: solid 5px #fff;
}
.shop ul.sh .r {
	width: calc(100% - 180px);
	text-align: left;
}
img.svg{
	margin-left: -10px;
}
.shop ul.sh .gr {
	font-size: 28px;
	font-weight: 700;
	color: #3eaa85;
	line-height: 1;
	padding-bottom: 12px;
}
.shop ul.sh .gr span{
	font-size: 20px;
	color: #ff0000;
}
.shop ul.sh .r p {
	font-size: 18px;
	line-height: 1.5;
}

.whats{
	margin: 80px auto 30px;
	text-align: center;
}
.max360{
	max-width: 360px;
	width: 100%; height: auto;
}
.max420{
	max-width: 420px;
}
.max438{
	max-width: 438px;
}
.max465{
	max-width: 465px;
}
.max500{
	max-width: 500px;
	width: 100%; height: auto;
}
.max502{
	max-width: 502px;
	width: 100%; height: auto;
}
.max550{
	max-width: 550px;
}
.max579{
	max-width: 579px;
}
.max580{
	max-width: 580px;
}

ul.bc {
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.bc .l {
	padding-right: 40px;
}
ul.bc .l .pad{
	background: #fff;
	padding: 8px;
}
ul.bc .r .pad{
	background: #fff;
	padding: 15px 25px;
}
ul.bc .r .pad img{
	min-width: 300px;
}
.planning {
	text-align: center;
	margin: 30px auto 30px;
}
.planning h4.po {
	font-size: 20px !important;
	margin-bottom: 10px;
}
.shop .inline2{
	text-align: center;
	margin: 80px auto 50px;
}
.shop .inline2 .bar{
	background: #b3d465;
	padding: 10px 10px 0;
	display: block;
}
img.max436 {
    max-width: 436px;
    width: 100%;
    height: auto;
	padding-bottom: 10px;
}
img.max456 {
    max-width: 456px;
    width: 100%;
    height: auto;
}

/* pdf */
#pageHeader.center {
	margin-bottom: 0px;
}
.center{
	text-align: center;
}
header .gr {
	font-size: 32px;
	font-weight: 700;
	color: #3eaa85;
}
header .gr span{
	font-size: 24px;
	color: #ff0000;
}
header p.des {
	padding: 30px 0 0;
	font-size: 16px;
}
ul.pd {
	display: flex;
	border-bottom: 3px solid #e85518;
	padding: 0px 0 20px
}
ul.pd.p1 .l {
	width: 250px;
	padding-right: 50px;
}
ul.pd.p1 .l img {
	border: solid 5px #fff;
}
ul.pd.p1 .r {
	width: calc(100% - 300px);
}
ul.pd.p2 {
	margin-top: 50px;
}
ul.pd.p2 .l {
	width: calc(100% - 300px);
}
ul.pd.p2 .r {
	padding-left: 50px;
	width: 300px;
}
/*ul.pd.p2 .r.SP {display: none;}*/

ul.pd h3 {
	font-size: 24px;
}
ul.pd .des {
	font-size: 16px;
	padding-top: 10px;
}
.max300{
	max-width: 300px;
	width: 100%; height: auto;
}
.max602{
	max-width: 602px;
	width: 100%; height: auto;
}
.f14{font-size: 14px;}
a.dwBut {
	display: inline-block;
	background: #3eaa85;
	border-radius: 8px;
	padding: 6px 20px;
	border: 1px solid #e85518;
	margin: 30px auto 0;
	max-width: 70%; 
}
a.dwBut p {
	color: #fff;
	font-size: 16px;font-weight: 500;
	text-align: center;
	position: relative;
}
a.dwBut::after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	top: 50%;
	right: 0;
	margin-top: -5px;
}

/* shop */
table.tbl1{
	width: 100%; table-layout: fixed;
	border-collapse: collapse;
	box-sizing: border-box;
	margin-bottom: 20px;
	background: #fff;
}
table.tbl1 tr {
	border-bottom: 1px solid #666;
}
table.tbl1 td {
	font-size: 15px;
	display: flex;
}
table.tbl1 td p {
	padding: 5px;
	line-height: 1;
}
.nowrap {
	white-space: nowrap;
}
table.tbl1 td:nth-child(5), table.tbl1 td:nth-child(6) {font-size: 13px;}
table.tbl1 tr.PC{display: none;}
table.tbl1 td .SP{
	/*display: inline-block;*/
	background: #3eaa85;
	text-align: right;
	color: #fff; width: 80px; 
	font-weight: 500;
}
table.tbl1 td .s2{width: calc(100% - 80px); }
/* shop2 */
.preparing {
	font-size: 18px;font-weight: 500;
	text-align: center; margin: 50px 0;
}


/* footer */
#footerImage {
    min-width: initial !important;
}
#footerImage.pdf {display: none;}
#footerImagePDF {
	background-image: url(../../img/all/sp/pic_footer.jpg);
	position: relative;
	z-index: 0;
	width: 100%;
	height: 400px;
	background-size: 100% 200%;
	background-repeat: no-repeat;
	background-position: 50% 82%;
}


@media only screen and (max-width: 768px) {
	.unitStep {display: block;}
	.unitStep .ph {width: 100%;padding-right: 0px;}
	.unitStep .caption {width: 100%;}
	section#blockA .unitStep .caption {width: 100%;}
	section#blockA .unitStep .ph {width: 100%;}
	.unitStep .caption h3 {text-align: center;
	font-size: 20px; margin-bottom: 0; margin: 50px 0 30px;}
	section#blockA .unitStep {margin-top: 80px;}
	section#blockD .unitStep {margin-top: 80px;}
	section#blockA, section#blockC,
	section#blockD, section#blockF {border-radius: 30px;}
	.contentSection h2 .nSP {position: unset; display: block; margin: 0 auto 10px;}
	.contentSection h2 {
	flex-wrap: wrap; flex-direction: column;position: unset;text-align: center;}
	.contentSection {padding: 10px 10px 30px;}
	section#blockB h2, section#blockD h2, section#blockF h2 {flex-direction: column-reverse;}
	.contentSection h2.R .nSP {right: initial;}
	ul.pd {padding: 0px 0 20px;}
	ul.pd.p1 {display: block;}
	ul.pd.p1 .l {width: auto;padding-right: 0px;text-align: center;padding-bottom: 20px;}
	ul.pd.p1 .r {width: auto;}
	ul.pd.p2 {margin-top: 50px;flex-direction: column-reverse;}
	ul.pd.p2 .l {width: auto;}
	ul.pd.p2 .r {width: auto;padding-left: 0px;text-align: center;padding-bottom: 20px;}
	/*ul.pd.p2 .r.PC {display: none;}
	ul.pd.p2 .r.SP {display: block;}*/
	a.dwBut {display: block;}
	#content {padding: 1px 20px 50px;}
	#blockShare .shareBtns {width: 100%;}
	#blockShare .shareBtns li {margin: 0 15px;}
	body.idgAbcTop #blockFooterBnr {padding: 0px 20px;}
	#blockFooterBnr .bnrList li a img {width: 100%;}
	.shop {padding: 0px 0px 0;}
	.GreenSnap {padding: 0px 0px 0;margin: 50px auto 50px;}
}
@media only screen and (max-width: 640px) {
	#pageHeader {padding: 20px 0 20px;margin-bottom: 30px;} 
	#pageHeader .border {
	border-top: 2px solid #e85518;border-bottom: 2px solid #e85518;
	padding: 18px 0 8px;margin-bottom: 30px;}
	#pageHeader h2{left: 20px;}
	#pageHeader h2 a img[alt=HOME] {width: 50px; height: 50px;}
	#pageHeader h1 img.abc {width: 60%;}
	header .gr span {display: block;}
	header p.des {padding: 30px 20px 0;}
	#content {padding: 1px 10px 50px;}
	.contentSection {padding: 10px 10px 30px;}
	.unitStep .caption:not(.nota)::before {top: -30px;left: -10px;width: 93px;height: 87px;}
	.shop ul.sh .gr span {display: block;}
	.shop ul.sh .r {text-align: center;}
	.GreenSnap .red{margin: 0px 10px 0;}
}
@media only screen and (max-width: 540px) {
	#pageHeader {padding: 20px 0 20px;margin-bottom: 0px;}
	#pageHeader h2{left: 10px;}
	#pageHeader h2 a img[alt=HOME] {width: 40px; height: 40px;}
	header p.des {padding: 30px 10px 0;}
	.contentSection {padding: 10px 10px 30px;}
	.unitStep .caption h3 {text-align: center;font-size: 18px; }
	.shop ul.sh {display: block;}
	.shop ul.sh .l {width: 100px;padding-right: 0px;margin: 0 auto 20px;}
	.shop ul.sh .r {width: auto;}
	ul.bc {display: block;}
	ul.bc .l {padding-right: 0px;}
	body.idgAbcTop #blockFooterBnr {padding: 0px 10px;}
	#blockShare .shareBtns li {margin: 0 10px;}
	#blockShare .shareBtns li a img {width: 80px; height: 80px;}
	#pageHeader.center .pad10{padding: 0px 10px 0;}
	#pageHeader.center .svg.max360 {width: 94%;}
	img.svg{margin-left: -14px;}
}
@media only screen and (max-width: 450px) {
	.unitStep .caption h3 {font-size: 24px !important;}
	.unitStep .caption .sentence p {font-size: 20px !important;}
}