@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;
	line-height: 1.5em;
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	text-align: center;
}
.redText {color: #ff0004;}
.bkgWhite {background-color: #fff;}

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

/* madeinJp
---------------------------------------- */
#madeinJp h2 {
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
}

/* pointWrap
---------------------------------------- */
#pointWrap {background-color: #eaf5fc;}
#pointWrap section {
	position: relative;
	background-color: #fff;
}
#pointWrap 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 #p04:after {background-image: url("../../img/name_print/p04.png");}
#pointWrap h3 {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	color: #0052a4;
}
#pointWrap .textBox .blueBtn a {margin: inherit;}
.blueBtn #arrowIcon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.7em;
	vertical-align: -0.15em;
	fill: #0052a4;
}
#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 .flexImg ul li {
		margin-bottom: 1em;
	}

.blueBtn a:hover #arrowIcon {fill: #fff;}

#pointWrap .flexBox section {display: block!important;}

/* layoutWrap
---------------------------------------- */
#layoutWrap h3 {
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
}
#layoutWrap section .layoutText {
		text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
		margin-bottom: 2em;
}
#layoutWrap .borderBox {
	border-top: #ddd 2px solid;
	border-bottom: #ddd 2px solid;
}
#layoutWrap .flexBox p {text-align: center;}
#layoutWrap .flexBox .img {margin: 0 auto;}

/* 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: bold;
	text-align: center;
	vertical-align: middle;
}
.tellBox a {
	color: #d83e08;
	text-decoration: none;
	display: inline-block;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
}
.tellBox a .number {font-family: "Oswald", sans-serif;}
.tellBox p {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	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;
}

/* 名入れ可能なスペースについて(代表例)
---------------------------------------- */
#spaceWrap h2 {
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	text-align: center;
}
#spaceWrap #exampleBox .example h3 {
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	text-align: center;
}

/* 名入れテントセット(料金例)
---------------------------------------- */
#tentsetWrap h2 {
	color: #0052a4;
	/* font-family: "ゴシックMB101 DB"; */
	font-weight: bold;
	text-align: center;
}
#tentsetWrap #tentsetBox section a {
	text-decoration: none;
}
#tentsetWrap #tentsetBox section a .tentsetImage {
	margin-bottom: 1em;
}
#tentsetWrap #tentsetBox section a .label {
	display: inline-block;
	color: #fff;
	background-color: #F08300;
	padding: 0.2em 0.5em;
	margin-bottom: 0.7em;
}
#tentsetWrap #tentsetBox section a h3 {
	color: #0052a4;
	font-size: 1.14em;
	font-weight: bold;
	margin-bottom: 0.7em;
}
#tentsetWrap #tentsetBox section a .tentsetPrice {
	color: #DC2424;
	font-size: 1.14em;
	font-weight: bold;
	text-align: right;
}
#tentsetWrap #tentsetBox section a:hover .label,
#tentsetWrap #tentsetBox section a:hover h3,
#tentsetWrap #tentsetBox section a:hover .tentsetPrice {
	opacity: 0.8;
}

/* optionWrap
---------------------------------------- */
#optionWrap .option01 {background-color: #fff336;}
#optionWrap .option02 {background-color: #9efff9;}
#optionWrap h3 {/* font-family: "ゴシックMB101 DB"; */ font-weight: bold;}
#optionWrap section .inner {position: relative;}
#optionWrap section .inner:before {
	width: 6em;
	height: 3.5em;
	display: block;
	position: absolute;
	content: "";
	background: url("../../img/name_print/checkit.png") no-repeat center center / contain;
	left: 0;
}

/* orderWrap
---------------------------------------- */
.grayBg {background-color: #f3f3f3;}
.grayBorder{
	border-bottom:  1px solid #ccc;
	border-right:  1px solid #ccc;
	border-left:  1px solid #ccc;
}

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

/* 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;
}
.orderWrap .blueBtn a span {font-size: 0.8em;}
.orderWrap .subTit {margin-bottom: 1em;}

/*===============================================
●画面の横幅が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/name_print/mainImage_sp.jpg");
		padding: 5% 0 60%;
		position: relative;
	}
	#mainImage section img {width: 100%;}
	#mainImage section h1 {
		font-size: 3.42em;
		margin-top: 0.3em;
		line-height: 1em;
	}
	#mainImage section h1 span {display: inline-block;}
	#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 #tentImg {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/* madeinJp
	---------------------------------------- */
	#madeinJp {padding: 2.5em 0;}
	#madeinJp img {width: 100%;}
	#madeinJp h2 {
		padding: 1em 0;
		font-size: 1.28em;
	}

	/* pointWrap
	---------------------------------------- */
	#pointWrap {padding: 3.5em 1em;}
	#pointWrap h2 {margin-bottom: 2em;}
	#pointWrap h3 {
		font-size: 1.07em;
		margin-bottom: 1em;
		padding-left: 2em;
	}
	#pointWrap section:after {
		width: 4.5em;
		height: 4.5em;
	}
	#pointWrap h3 span {font-size: 1.4em;}
	#pointWrap .img {padding-top: 1em;}
	#pointWrap .textBox p {margin-bottom: 1em;}
	#pointWrap section {
		margin-bottom: 2em;
		padding: 2em 1em;
	}
	#pointWrap #p02 img,
	#pointWrap #p04 img {width: 100%;}

	/* layoutWrap
	---------------------------------------- */
	#layoutWrap {padding: 3.5em 0;}
	#layoutWrap h3 span {
		font-size: 2.3em;
	}
	#layoutWrap .boxL {margin: 1em 0 2em;}
	#layoutWrap .boxL .img,
	#layoutWrap .boxR .img {
		width: 100%;
	}
	#layoutWrap h3 {
		font-size: 0.9em;
		text-align: center;
		margin-bottom: 1.5em;
		line-height: 1.8em;
	}
	#layoutWrap .flexBox p {padding: 1em 0;}
	#layoutWrap .borderBox {margin-bottom: 1.5em;}
	#layoutWrap .borderBox {
		border: #ddd 2px solid;
		margin: 0 auto;
		padding: 0 1em;
	}
	#layoutWrap .borderBox img {width: 100%;}

	/* print02
	---------------------------------------- */
	#print02 .printBox {margin-bottom:1.5em;}
	#print02 .printBox:last-child {margin-bottom:0;}

	/*optionWrap
	---------------------------------------- */
	#optionWrap h3 {
		font-size: 1.38em;
		margin-bottom: 0.5em;
	}
	#optionWrap .subTit {padding-bottom: 1em;}
	#optionWrap h3 span {font-size: 1.28em;}
	#optionWrap section .inner {position: relative;}
	#optionWrap section .inner:before {
		top: 0;
	}
	#optionWrap h3 {
		font-size: 1.8em;
		padding-top: 1em;
	}
	#optionWrap h3 span {font-size: 0.7em}
	#optionWrap .text {padding-top: 1.5em;}
	#optionWrap .img img {width: 100%;}

	/* orderWrap
	---------------------------------------- */
	.orderWrap section {margin-bottom: 1em;}
	.orderWrap section:last-child {margin-bottom: 0;}
	.orderWrap .flexBox {
		display: block;
		margin-top: 1em !important;
	}
	.orderWrap .flexBox .boxL,
	.orderWrap .flexBox .boxR {
		width: 100%;
	}
	.orderWrap .flexBox section h3 {
		font-size: 1.07em;
		padding: 0.5em 0;
		line-height: 1.5em;
	}
	.orderWrap .flexBox section h3 span {font-size: 1.6em;}
	.orderWrap .bkgWhite {padding: 1em;}
	.orderWrap .blueBtn a span {font-size: 0.8em;}
	.orderWrap .btn a {line-height: 1.3em;}
	.orderWrap .bkgWhite p {margin-bottom: 1em;}

	/* ボタン */
	.orderWrap .btn a {position: relative;}
	.orderWrap .btn a #arrowIcon {
		position: absolute;
		top: 50%;
		margin-top: -0.5em;
		left: 1em;
	}
	.orderWrap .form a #arrowIcon {left: 0.5em;}

	/* contactWrap */
	.contactInner {padding-top: 3.5em !important;}
	.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;}

	/* 名入れ可能なスペースについて(代表例)
	---------------------------------------- */
	#spaceWrap {
		margin-bottom: 3.5em;
	}
	#spaceWrap h2 {
		padding: 1em 0;
		font-size: 1.5em;
		line-height: 1.3;
	}
	#spaceWrap p {
		margin-bottom: 2em;
	}
	#spaceWrap #exampleBox {
		margin-bottom: 3em;
	}
	#spaceWrap #exampleBox .example:not(:last-child) {
		margin-bottom: 4em;
	}
	#spaceWrap #exampleBox .example h3 {
		font-size: 1.28em;
	}
	#spaceWrap #exampleBox .example img {
		width: 100%;
	}
	#spaceWrap .telBannerWrap img {
		width: 100%
	}

	/* 名入れテントセット(料金例)
	---------------------------------------- */
	#tentsetWrap {
		margin-bottom: 3.5em;
	}
	#tentsetWrap h2 {
		padding: 1em 0;
		font-size: 1.5em;
		line-height: 1.3;
	}
	#tentsetWrap #tentsetBox section:not(:last-child) {
		margin-bottom: 4em;
	}
	#tentsetWrap #tentsetBox section a .tentsetImage img {
		width: 100%;
	}

	/*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;}

	/* mainImage
	---------------------------------------- */
	#mainImage {
		background-image:url("../../img/name_print/mainImage.jpg");
		padding: 3% 0;
		position: relative;
	}
	/* #mainImage section.inner {
		max-width: 940px;
	} */
	#mainImage section h1 {
		font-size: 5em;
		line-height: 1.25em;
		margin-bottom: 0.25em;
	}
	#mainImage div {width: 40%;}
	#mainImage .deliveryDate {
		width: 6em;
		padding: 5px 0 7px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1em;
		margin-bottom: 1em;
	}
	#mainImage .whiteText {
		max-width: 400px;
		line-height: 1.8em;
	}
	#mainImage #tentImg {
		width: 50%;
		max-width: 800px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#mainImage #tentImg img {width: 100%;}

	/* madeinJp
	---------------------------------------- */
	#madeinJp, #pointWrap, #layoutWrap {
		padding: 4.3em 1em;
	}
	#madeinJp {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#madeinJp div,
	#madeinJp section {width: 48%;}
	#madeinJp h2 {
		font-size: 1.8em;
		line-height: 1.3em;
		margin-bottom: 1em;
	}
	#madeinJp p {line-height: 1.8em;}

	/* pointWrap
	---------------------------------------- */
	#pointWrap section {
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		padding: 2em 4em;
		margin-bottom: 2em;
	}
	#pointWrap section:after {
		width: 6em;
		height: 6em;
	}
	#pointWrap section#p03 {display: block;}
	#pointWrap section#p03 .img,
	#pointWrap section#p03 .textBox {
		width: 100%;
	}

	#pointWrap .textBox,
	#pointWrap .img {
		width:47%;
	}
	#pointWrap h3 {
		font-size: 1.7em;
		line-height: 1.7em;
	}
	#pointWrap h3 span {font-size: 1.5em;}
	#pointWrap .textBox p {
		line-height: 1.8em;
		padding: 2em 0;
	}
	#pointWrap .blueBtn {width: 90%;}
	#pointWrap .orderWrap {
		margin: 0!important;
		padding-top: 0!important;
	}
	#pointWrap #p01 li img {max-height: 11em;}
	#pointWrap .orderWrap .flexBox {padding: 0!important;}


	/* layoutWrap
	---------------------------------------- */
	#layoutWrap #layoutInner {
		background: url("../../img/name_print/layoutWrap.png") no-repeat bottom right / contain;
		padding-top: 3em;
	}
	#layoutWrap h3 {
		font-size: 2em;
		line-height: 2em;
		margin-bottom: 1em;
	}
	#layoutWrap h3 span {font-size: 1.85em;}
	#layoutWrap section p {
		line-height: 1.8em;
	}
	#layoutWrap .flexBox {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.5em 0;
	}
	#layoutWrap .flexBox .boxL,
	#layoutWrap .flexBox .boxR {
		width: 50%;
	}
	#layoutWrap .boxL .img {width: 60%;}
	#layoutWrap .boxR .img {width: 85%;}
	#layoutWrap .redText {padding-top: 1em;}

	/* 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;
	}

	/* 名入れ可能なスペースについて(代表例)
	---------------------------------------- */
	#spaceWrap {
		margin-bottom: 5em;
	}
	#spaceWrap h2 {
		font-size: 1.8em;
		line-height: 1.3em;
		margin-bottom: 1em;
	}
	#spaceWrap p {
		margin-bottom: 3em;
		line-height: 1.8;
		text-align: center;
	}
	#spaceWrap #exampleBox {
		display: flex;
		margin-bottom: 3em;
	}
	#spaceWrap #exampleBox .example {
		width: 30%;
	}
	#spaceWrap #exampleBox .example:not(:last-child) {
		margin-right: 5%;
	}
	#spaceWrap #exampleBox .example h3 {
		font-size: 1.4em;
		margin-bottom: 1em;
	}

	/* 名入れテントセット(料金例)
	---------------------------------------- */
	#tentsetWrap {
		margin-bottom: 5em;
	}
	#tentsetWrap h2 {
		font-size: 1.8em;
		line-height: 1.3em;
		margin-bottom: 1em;
	}
	#tentsetWrap #tentsetBox {
		display: flex;
	}
	#tentsetWrap #tentsetBox section {
		width: 30%;
	}
	#tentsetWrap #tentsetBox section:not(:last-child) {
		margin-right: 5%;
	}

	/* optionWrap
	---------------------------------------- */
	#optionWrap {margin-bottom: 5em;}
	#optionWrap h3 {
		font-size: 2.5em;
		line-height: 0.8em;
		margin-bottom: 0.5em;
	}
	#optionWrap .subTit {padding-left: 1em;}
	#optionWrap section {padding-top: 2em;}
	#optionWrap section .inner:before {
		top: -1em;
	}
	#optionWrap section.option02 .inner:before {
		left: 50%;
	}
	#optionWrap section.option01 .img {margin-top: -3em;}
	#optionWrap section.option02 .img {margin-top: -2em;}
	#optionWrap h3 span {font-size: 0.6em;}
	#optionWrap .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#optionWrap .option02 .inner {flex-direction: row-reverse;}
	#optionWrap .option01 .inner div.text {padding-left:2em;}
	#optionWrap .option02 .inner div.text {margin-top:-2em;}
	#optionWrap .inner div.text {width: 47%;}
	#optionWrap .option01 div.img {width: 58%;}
	#optionWrap .option02 div.img {width: 50%;}

	/* orderWrap
	---------------------------------------- */
	.orderWrap {padding-top: 4.3em;}
	.orderWrap .flexBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		justify-content: center;
		padding: 4.3em 0 !important;
	}
	.orderWrap .flexBox section {
		width: 47%;
	}
	.orderWrap .flexBox section h3 {
		font-size: 1.28em!important;
		line-height: 1.8em!important;
		padding: 0.5em 0!important;
	}
	.orderWrap .flexBox section h3 span {
		font-size: 1.7em!important;
	}
	.orderWrap .flexBox section p {padding: 0 1em 1em;}
	.orderWrap .bkgWhite {
		height: 13.5em;
	}
	.orderWrap .textCenter {
		text-align: center;
		line-height: 1.8em;
	}
	.orderWrap .blueBtn {
		width: 90%;
		margin: 0 auto;
	}

	/* 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;}

}