@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/

.tit {
	line-height: 1.5em;
	font-family: "Oswald", sans-serif;
	text-align: center;
}
.tit span {color: #0052a4;}
.subTit {
	font-size: 1.5em; font-weight: 600;
	line-height: 1.5em;
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	text-align: center;
}
.redText {color: #ff0004;}
.bkgWhite {background-color: #fff;}

/* ボタン */
.blueBtn a:hover #arrowIcon {fill: #fff;}
.blueBtn #arrowIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.7em;
	vertical-align: -0.15em;
	fill: #0052a4;
}

/* mainImage
---------------------------------------- */
#mainImage {
	background-repeat: no-repeat;
	background-position:center center;
	background-size: cover;
}
#mainImage section h1 {
	color: #fff336;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
}
#mainImage section h1 span {font-size: 0.7em;}
#mainImage section .deliveryDate {
	color: #fff;
	background-color: #d83e08;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
}
#mainImage section .whiteText {color: #fff;}

/* firstWrap
---------------------------------------- */
#firstWrap section {
	background-color: rgba(245,245,245,0.80);
}
#firstWrap h2 {
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	position: relative;
	display: inline;
}
#firstWrap h2 {line-height: 1.5em;}

/* pointWrap
---------------------------------------- */
#pointWrap {background-color: #eaf5fc;}
#pointWrap .textL {
	width: 100%;
	background-color: #fff336;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	text-align: center;
}
#pointWrap .flexWrap section {
	position: relative;
	background-color: #fff;
}
#pointWrap .flexWrap section:after {
	content: "";
	position: absolute;
	display: block;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
	top: 0;
	left: 0;
}
#pointWrap #p01:after {background-image: url("../../img/name_print/p01.png");}
#pointWrap #p02:after {background-image: url("../../img/name_print/p02.png");}
#pointWrap #p03:after {background-image: url("../../img/name_print/p03.png");}
#pointWrap h3 {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	color: #0052a4;
}
#pointWrap .textBox .blueBtn a {margin: inherit;}
#pointWrap #p01 .flexImg ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#pointWrap #p01 .flexImg ul li {
	width: 48%;
	display: block;
}
#pointWrap #p01 li img {max-height: 11em;}
#pointWrap #p01 .flexImg ul li {
		margin-bottom: 1em;
	}

/* pointSecondWrap */
#pointSecondWrap h3 {
	background-color: #000;
	color: #fff;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	text-align: center;
}
#pointSecondWrap .flexBox {
	border: #000 2px solid;
}
#pointSecondWrap .flexBox p {
	background-color: #000;
	color: #fff;
	font-size: 1.07em;
	padding: 0.5em;
	text-align: center;
}
#pointSecondWrap .flexBox {background-color: #fff;}
#pointWrap section:last-child {margin-bottom: 0;}

/* contactWrap */
.contactWrap {border: #d83e08 2px solid;}
.contactWrap header {
	background-color: #d83e08;
	color: #fff;
	padding: 1em 0;
}
.contactWrap header h4 {
	color: #fff;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}
.tellBox a {
	color: #d83e08;
	text-decoration: none;
	display: inline-block;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
}
.tellBox a .number {font-family: "Oswald", sans-serif;}
.tellBox p {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	background-color: #e7e7e7;
	text-align: center;
	font-size: 0.9em;
}
.contactWrap .orangeBtn2 a {
	color: #d83e08;
	border: #d83e08 1px solid;
}
.contactWrap .orangeBtn2 #arrowIcon {
	fill: #d83e08;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.7em;
	vertical-align: -0.15em;
}
.contactWrap .orangeBtn2 a:hover {
	background-color: #d83e08;
	color: #fff;
}
.contactWrap .orangeBtn2 a:hover #arrowIcon {
	fill: #fff;
}

/* detailWrap
---------------------------------------- */
#detailWrap div {width: 100%;}

/* optionWrap
---------------------------------------- */
#optionWrap h3 {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	border: #ddd 2px solid;
	background-color: #f9f9f9;
}

/* orderWrap
---------------------------------------- */
#orderWrap {background-color: #f3f3f3;}
#orderWrap h3 {
	background-color: #0052a4;
	color: #fff;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: 600;
	text-align: center;
}
#orderWrap h3 span {color: #fff336;}
#orderWrap .flexBox {
	background-color: #fff;
}

/* contactInner */
.contactInner .contactWrap header {position: relative;}
.contactInner .contactWrap header:before {
	width: 13em;
	height: 3em;
	content: "";
	position: absolute;
	display: block;
	background: url("../../img/name_print/contact.png") no-repeat top left / contain;
	top: -2em;
	left: 0;
}

/*===============================================
●画面の横幅が729px以下
===============================================*/
@media screen and (max-width: 729px) {

	.tit {
		font-size: 2.14em;
		margin-bottom: 0.3em;
	}
	.subTit {font-size: 1.5em;}
	#pointWrap, #optionWrap,
	#orderWrap, #linkBanner ul {
		padding: 3.5em 0;
	}

	/* mainImage
	---------------------------------------- */
	#mainImage div {width: 100%;}
	#mainImage {
		background-image:url("../../img/whole_print/mainImg_sp.jpg");
		padding: 5% 0 60%;
		position: relative;
	}
	#mainImage .imgTit {width: 45%;}
	#mainImage .imgTit img {width: 100%;}
	#mainImage section h1 {
		font-size: 3.42em;
		margin-top: 0.3em;
	}
	#mainImage .mainIcon {padding-top: 3em;}
	#mainImage .deliveryDate {
		width: 6em;
		padding: 5px 0 7px;
		font-size: 1.2em;
		text-align: center;
		line-height: 1em;
		margin: 1.5em 0 0.6em;
	}
	#mainImage .whiteText {line-height: 1.5em;}
	#mainImage #tentImg {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/* firstWrap
	---------------------------------------- */
	#firstWrap {padding: 2.5em 0 3.5em;}
	#firstWrap h2 {
		font-size: 1.28em;
		background: linear-gradient(transparent 70%, #fff336 30%);
	}
	#firstWrap p {padding-top: 1em;}
	#firstWrap .inner div.pcNone {
		width: 60%;
		margin-top: 1em;
		margin-left: 40%;
	}
	#firstWrap section {
		width: 100%;
		padding: 2em 1em;
		margin-top: -1em;
	}

	/* pointWrap
	---------------------------------------- */
	#pointWrap {
		padding: 3.5em 0;
	}
	#pointWrap h2 {
		margin-bottom: 1em;
	}
	#pointWrap .leftB h3 {
		font-size: 1.07em;
		padding-left: 2em;
		margin-bottom: 1em;
	}
	#pointWrap .flexWrap section:after {
		width: 4.5em;
		height: 4.5em;
	}
	#pointWrap .flexWrap.inner {padding: 0;}
	#pointWrap h3 span {font-size: 0.8em;}
	#pointWrap .img {padding-top: 1em;}
	#pointWrap .leftB section {
		margin-bottom: 1.5em;
		padding: 2em 1em;
	}
	#pointWrap .textL {
		font-size: 1.35em;
		line-height: 1.5em;
		padding: 1em 0;
		margin-bottom: 1em
	}
	#pointWrap .rightB img {width: 100%;}
	#pointWrap .flexWrap .leftB,
	#pointWrap .flexWrap .rightB {
		width: 100%;
		margin-bottom: 2em;
	}
	#pointWrap .flexWrap .leftB {padding: 0 1em;}
	#pointWrap .flexWrap .leftB section:last-child {margin-bottom: 0;}

	/* pointSecondWrap */
	#pointSecondWrap h3 {
		font-size: 1.14em;
		padding: 1em 0;
	}
	#pointSecondWrap .flexBox {padding: 1em;}
	#pointSecondWrap .flexBox img {width: 100%;}
	#pointSecondWrap .mb1 {margin-bottom: 1em;}

	/*detailWrap
	---------------------------------------- */
	#detailWrap ul li {margin-bottom: 1.5em;}
	#detailWrap ul li h3 {
		/* font-family: "ゴシックMB101 DB"; */
		font-weight: 600;
		font-size: 1.2em;
		background-color: #fff336;
	}
	#detailWrap ul li h3 span {
		background-color: #000;
		color: #fff;
		font-family: "Oswald", sans-serif;
		padding: 0.5em;
		margin-right: 0.5em;
		display: inline-block
	}
	#detailWrap ul li p {
		background-color: #f3f3f3;
		padding: 1em;
		text-align: left;
	}
	#detailWrap ul li p .img {
		padding-top: 1em;
		display: block;
	}
	#detailWrap ul li .h3Second {
		padding: 0 0 0.5em 2em;}

	#detailWrap section {padding-top: 3em;}
	/*optionWrap
	---------------------------------------- */
	#optionWrap h2 {
		font-size: 1.3em;
		margin-bottom: 0.5em;
	}
	#optionWrap h2 span {font-size: 0.7em;}
	#optionWrap h3 {
		padding: 1em;
		margin-bottom: 2em;
	}
	#optionWrap .optionInner .img {padding: 2em 0;}

	/* orderWrap
	---------------------------------------- */
	#orderWrap h3 {
		font-size: 1.07em;
		line-height: 1.2em;
		padding: 0.8em 0;
		margin-top: 1em;
	}
	#orderWrap h3 span {
		font-size: 1.5em;
		line-height: 1.2em;
	}
	#orderWrap .flexBox {padding: 1.5em;}
	#orderWrap .flexBox .img {margin-bottom: 1em;}
	#orderWrap .flexBox img {width: 100%;}
	#orderWrap .flexBox p {
		line-height: 1.5em;
		margin-bottom: 1em;
	}

	/* ボタン */
	#orderWrap .btn a {
		position: relative;
		line-height: 1.5em;
	}
	#orderWrap .btn a #arrowIcon {
		position: absolute;
		top: 50%;
		margin-top: -0.5em;
		left: 1em;
	}
	#orderWrap .btn a span {font-size: 0.8em;}

	/* contactWrap */
	.contactInner {
		padding-top: 3.5em !important;
	}
	.contactInner header {position: relative;}
	.contactInner h4 .leftBkg {
		position: absolute;
		top: 25%;
		left: 1.3em;
	}
	.contactInner h4 .rightBkg {
		position: absolute;
		top: 25%;
		right: 1.3em;
	}
	.contactWrap header h4 {
		font-size: 1.21em;
	}
	.contactWrap .tellBox {
		text-align: center;
		padding-top: 1em;
	}
	.contactWrap .tellBox p {
		width: 90%;
		margin: 0 auto;
	}
	.contactWrap .free {
		font-size: 1.07em;
		display: block;
		margin-bottom: 0.5em;
	}
	.contactWrap .number {
		font-size: 2.7em;
		display: block;
		margin-bottom: 0.5em;
	}
	.contactWrap .orangeBtn2 {padding: 1.5em 1em !important;}
	.contactWrap header span {
		width: 1.5em;
		display: inline-block;
	}
	.contactWrap header .leftBkg {padding-right: 0.5em;}
	.contactWrap header .rightBkg {padding-left: 0.5em;}
	.contactCover {
		padding-top: 3.5em !important;
		margin-bottom: 3.5em !important;
	}
	.contactInner.margin4{margin-bottom: 1em!important;}
	/*linkBanner
	---------------------------------------- */
	#linkBanner li {margin-bottom: 2em;}
	#linkBanner li:last-child {margin-bottom: 0;}
}

/*===============================================
●画面の横幅が730px以上
===============================================*/
@media screen and (min-width: 730px) {

	.tit {font-size: 3.2em;}
	.subTit {
		font-size: 2.14em;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	.bkgWhite {padding: 1.8em 0;}

	/* コンテンツ間隔 */
	#firstWrap, #pointWrap, #detailWrap,
	#optionWrap, #orderWrap, .contactCover {
		padding: 4.3em 1em !important;
	}

	/* mainImage
	---------------------------------------- */
	#mainImage {
		background-image:url("../../img/whole_print/mainImg.jpg");
		padding: 3% 0;
		position: relative;
	}
	#mainImage section.inner {
		width: 940px;
	}
	#mainImage section h1 {
		font-size: 5em;
		line-height: 1em;
		margin-bottom: 0.3em;
	}
	#mainImage div.imgTit {width: 16%;}
	#mainImage .deliveryDate {
		width: 6em;
		padding: 5px 0 7px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1em;
		margin: 1em 0;
	}
	#mainImage .whiteText {
		max-width: 364px;
		line-height: 1.8em;
	}
	#mainImage #tentImg {
		width: 50%;
		max-width: 740px;
		position: absolute;
		bottom: 0;
		left: 50%;
	}
	#mainImage .mainIcon img {
		width: 40%;
		display: block;
		}

	/* firstWrap
	---------------------------------------- */
	#firstWrap {
		max-width: 1440px;
		margin: 0 auto;
		position: relative;
	}
	#firstWrap section:after {
		background: url("../../img/whole_print/leftTent.png") no-repeat left center / contain;		width: 60%;
		height: 460px;
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		z-index: -1;
	}
	#firstWrap section:before {
		background: url("../../img/whole_print/rightTent.jpg") no-repeat right center / contain;
		width: 25%;
		height: 400px;
		position: absolute;
		content: "";
		top: 10%;
		right: 10%;
		z-index: 10;
	}
	#firstWrap section {
		width: 70%;
		margin: 0 auto;
		padding: 1em;
		margin-top: 23em;
	}
	#firstWrap h2 {
		font-size: 1.8em;
		background: linear-gradient(transparent 85%, #fff336 50%);
	}
	#firstWrap p {
		line-height: 1.8em;
		padding-top: 1.5em;
	}

	/* pointWrap
	---------------------------------------- */
	#pointWrap .textL {
		font-size: 1.85em;
		padding: 0.7em 0 0.5em;
		margin-bottom: 1em;
	}
	#pointWrap .flexWrap {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		width: 100%;
		margin-bottom: 4.3em;
	}
	#pointWrap .flexWrap .leftB,
	#pointWrap .flexWrap .rightB{
		width: 48%;
	}
	#pointWrap section:after {
		width: 6em;
		height: 6em;
	}
	#pointWrap .flexWrap #p01,
	#pointWrap .flexWrap #p02 {
		margin-bottom: 1em;
	}
	#pointWrap section#p03 {display: block;}
	#pointWrap section#p03 .img,
	#pointWrap section#p03 .textBox {
		width: 100%;
	}

	#pointWrap h3 {
		padding-left: 3.5em;
		padding-top: 0.5em;
		font-size: 1.7em;
		line-height: 1.7em;
	}
	#pointWrap h3 span {font-size: 1.5em;}
	#pointWrap .textBox p {
		line-height: 1.8em;
		padding: 1em 2em 1em;
	}

	/* pointSecondWrap */
	#pointSecondWrap h3 {
		font-size: 1.85em;
		padding: 0.2em 0;
	}
	#pointSecondWrap h3 span {font-size: 0.76em;}
	#pointSecondWrap .flexBox {
		display: flex;
		justify-content: space-around;
		padding: 1.5em 1em;
	}
	#pointSecondWrap .flexBox div {width: 46%;}

	/* contactWrap */
	.contactWrap header h4 {font-size: 1.7em;}
	.contactWrap header span {
		width: 2em;
		display: inline-block;
	}
	.contactWrap header .leftBkg {padding-right: 1em;}
	.contactWrap header .rightBkg {padding-left: 1em;}
	.contactWrap .flexBox {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 2.5em 0;
	}
	.contactWrap .tellBox {margin-right: 4em;}
	.tellBox a {
		display: flex;
		align-items: center;
		margin-bottom: 2em;
	}
	.tellBox a span {display: block;}
	.tellBox a .free{
		font-size: 1.2em;
		padding-right: 1em;
	}
	.tellBox a .number {
		font-size: 2.7em;
	}
	.tellBox p {padding: 5px 0;}
	.contactWrap .orangeBtn2 a:hover {
		background-color: #d83e08;
		color: #fff;
	}
	.orangeBtn2 {width: 30%;}
	.orangeBtn2 a {
		width: 100%;
		margin: 0 auto;
	}

	/* optionWrap
	---------------------------------------- */
	#optionWrap {padding-bottom: 13.5em !important;}
	#optionWrap .subTit span {font-size: 0.66em;}
	#optionWrap h3 {
		padding: 1em 0;
		line-height: 1.5em;
		text-align: center;
		margin-bottom: 5em;
	}
	.optionInner {
		max-width: 1440px;
		display: flex;
		margin: 0 auto;
		position: relative;
	}
	.optionInner div {
		width: 50%;
		margin-left: 5%;
	}
	.optionInner .img {
		position: absolute;
		display: block;
		width: 50%;
		bottom: -20%;
		right: 50%;
		margin-right: -45%;
	}
	/* orderWrap
	---------------------------------------- */
	#orderWrap h3 {
		font-size: 1.28em;
		line-height: 1.8em;
		padding: 0.5em 0;
	}
	#orderWrap h3 span {
		font-size: 1.7em;
	}
	#orderWrap .flexBox {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		padding: 1.5em 1.5em 0 1.5em;
	}
	#orderWrap .flexBox p {
		line-height: 1.5em;
		margin-bottom: 2em;
	}
	#orderWrap .flexBox .text {width: 50%;}
	#orderWrap .flexBox .img {width: 47%;}

	/* contactInner */
	.contactInner {padding-top: 4.3em !important;}
	.contactInner .contactWrap header:before {
		width: 15em;
		height: 4em;
	}

	/* linkBanner
	---------------------------------------- */
	#linkBanner ul {padding: 3em 0 5em;}
	#linkBanner ul li {margin-bottom: 3em;}

}