@charset "UTF-8";

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

body , #container, #pageLoader {
    background-color: #fbe7dd;
} 
#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: #fbe7dd;
}
.contentSection {
    max-width: 1000px;
    margin: 0 auto; 
    padding: 58px 20px;
}
.contentSection:first-child {
    /*border: none;*/
}
.contentSection h2.num {
	border-top: solid 3px #e85518;
	display: block;
}
.contentSection h2.num.g {
	border-top: solid 3px #219d8b;
}



#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: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.unitStep .ph {
	width: 55%;
	padding-right: 60px;
}
.unitStep .caption {
	width: 45%;
	position: relative;
}
.unitStep .caption:not(.nota)::before {
	position: absolute;
	top: -30px; left: -30px;
	content: '';
	width: 125px;height: 117px;
	background-image: url(../img/a.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
.unitStep .caption h3.a {
	padding-left: 80px;
}
.unitStep .caption h3 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 17px;
}

.unitStep .caption .sentence {
    /*width: 500px;*/
}

.unitStep .caption .sentence p {
    font-size: 16px;
    line-height: 1.8;
}

.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, .unitStep05 {
	margin-bottom: 100px;
}

.bgWhite {
    background: #fff;
}

/* shop */
.shop {
	max-width: 1000px;
	margin: 0px auto 0;
	padding: 0px 20px 0;
	
}
.shop .inline{
	/*display: inline-block;*/
	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 .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;
}
.shop ul.sh .gr span{
	font-size: 20px;
	color: #ff0000;
}
.shop ul.sh .r p {
	font-size: 18px;
}

.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;
}
.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 .r {
	width: calc(100% - 300px);
}
ul.pd.p2 {
	margin-top: 50px;
}
ul.pd.p2 .l {
	width: calc(100% - 602px);
}
ul.pd.p2 .r {
	padding-left: 50px;
	width: 552px;
}
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;
	/*background: linear-gradient(90deg, #3eaa85 0%, #3eaa85 10%, transparent 10%, transparent 100%);*/
}
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-image: url(../../img/all/pc/pic_footer.jpg);*/
	background-size: 100% 200%;
	background-repeat: no-repeat;
	background-position: 50% 82%;
}


	.unitStep {margin-top: 58px;display: block;}
	.unitStep .ph {width: auto;padding-right: 0px;margin-bottom: 30px;text-align: center;}
	.unitStep .ph img.w100 {max-width: 630px;}
	.unitStep .caption {width: auto;}
	.contentSection h2.num .nSP {width: 100px; height: auto;padding-right: 15px;}
	.contentSection h2.num .tiSP {width: 100%; height: auto;}


@media only screen and (max-width: 768px) {
	ul.pd {display: block;padding: 0px 0 20px}
	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;}
	ul.pd.p2 .l {width: auto;}
	ul.pd.p2 .r {padding-left: 0px;width: auto;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;}
}
@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: 30px 10px;}
	.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;}
}
@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: 30px 0px;}
	.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;}
}