@charset "utf-8";

/* リセット
---------------------------------------------------------------------------- */
html {
	width: 100%;
	height:100%;
}
h1, h2, h3, h4, h5, h6, p, div,address,
dl, dt, dd, a,
table, caption, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	list-style-type: none;
	zoom:1;
	line-height: 1.0;
}
ul,li,ol {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	list-style-type: none;
	text-align: left;
}
img {
	max-width: 100%;
	vertical-align: bottom;
	line-height:1.0;
}
table {
	border-collapse: collapse;
}

/* Body
---------------------------------------------------------------------------- */
body {
	width: 100%;
	height:100%;
	margin: 0;
	border: 0;
	background: #FFF;
	line-height: 1.6;
	font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic" , "游ゴシック体", YuGothic,  "メイリオ", Meiryo,sans-serif;
	color: #111;
	letter-spacing: 0.1em;
	font-size: 14px;
	-webkit-text-size-adjust: 100%;
	overflow-x:hidden 
}
*::selection {
	background: #FCE9EE;
	color: #000 !important;
}
@media screen and (min-width:768px){
	.sp_only {
		display: none !important;
	}
}
@media screen and (max-width:767px){
	body {
		font-size: 14px;
		letter-spacing: 0.1em;
		-webkit-text-size-adjust: 100%;
	}
	.pc_only {
		display: none !important;
	}
	.sp_br {
		display: block;
	}
}
.r_only {
	width: 0;
	height: 0;
	display: block;
	clip: rect(0, 0, 0, 0);
}
a {
	color: #1C4B9D;
	text-decoration: underline;
	outline: none;
	transition: 0.3s;
}
a:hover {
	color: #1C4B9D;
	text-decoration: none;
}
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
.hidden {
	overflow: hidden;
}
.fixed {
	overflow: hidden;
	position: fixed;
}
p {
	line-height: 2.0;
	margin: 0 0 20px 0;
}

#loading{
	width: 100%;
	height: 100%;
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

/* ヘッダ
---------------------------------------------------------------------------- */
#header {
	width: 100%;
	height: 95px;
	position: relative;
}
#header_logo {
	width: 140px;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width:767px){
	#header {
		height: 55px;
	}
	#header_logo {
		width: auto;
		margin: 0 auto;
		text-align: center;
	}
	#header_logo img {
		height: 50px;
	}
}


/* フッター
---------------------------------------------------------------------------- */
#footer {
	width: 100%;
	padding: 60px 0 10px 0;
	background: #FFF;
	text-align: center;
}
#footer_logo {
	margin: 0 auto 40px auto;
	text-align: center;
}
#copyright {
	text-align: center;
	font-size: 13px;
	margin: 0;
}
@media screen and (max-width:767px){
	#footer {
		width: 100%;
		padding: 30px 0 0 0;
	}
	#footer_logo {
		width: 140px;
		margin: 0 auto 20px auto;
		text-align: center;
	}
	#copyright {
		text-align: center;
		font-size: 10px;
	}
}

/* wrap,背景
---------------------------------------------------------------------------- */
#wrap {
	width: 100%;
	min-width: 1020px;
	margin: 0 auto;
}
.sec_wrap {
	width: 1020px;
	margin: 0 auto;
	padding: 40px 0;
	position: relative;
}
.sec_wrap::after {
	content: "";
	display: block;
	clear: both;
}
@media screen and (max-width:767px){
	#wrap {
		min-width: auto;
		overflow: hidden;
	}
	.sec_wrap {
		width: auto;
		margin: 0 15px;
		padding: 30px 0;
	}
}

/* ボックス
---------------------------------------------------------------------------- */
.image_left {
	width: 600px;
	float: left;
	position: relative;
	left: -60px;
	z-index: 5;
}
.image_right {
	width: 600px;
	float: right;
	position: relative;
	right: -60px;
	z-index: 5;
}
.image_right.image500 {
	width: 500px;	
	right: -60px;
}


.text_left {
	width: 410px;
	min-height: 400px;
	float: left;
	padding-left: 10px;
	position: relative;
	z-index: 10;
}
.text_right {
	width: 410px;
	min-height: 400px;
	float: right;
	padding-right: 10px;
	position: relative;
	z-index: 10;
}
.text_left.text360 {
	width: 360px;
}
.vm {
	position: absolute;
	top: 20%;
	bottom: 0;
	margin: auto;
	z-index: 10;
}
@media screen and (max-width:767px){
	.image_left {
		width: 100%;
		float: none;
		position: relative;
		left: 0;
		margin: 0 0 30px 0;
	}
	.image_right {
		width: 100%;
		float: none;
		position: relative;
		right: 0;
		margin: 0 0 30px 0;
	}
	.image_right.image500 {
		width: 100%;
		float: none;
		position: relative;
		right: 0;
	}
	.text_left {
		width: 100%;
		min-height: 100px;
		float: none;
		padding: 0;
		position: relative;
		z-index: 10;
	}
	.text_right {
		width: 100%;
		min-height: 100px;
		float: none;
		padding: 0;
		position: relative;
		z-index: 10;
	}
	.text_left.text360 {
		width: 100%;
	}
	.vm {
		position: relative;
		top: 0;
		bottom: 0;
	}

}

/* 見出し等
---------------------------------------------------------------------------- */
h2 {
	margin: 0 0 30px 0;
	text-align: left;
	line-height: 1.8;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.15em;
}
.prayer {
	margin: 0 0 30px 0;
	text-align: center;
	line-height: 1.8;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.15em;
}
@media screen and (max-width:767px){
	h2 {
		margin: 0 0 30px 0;
		font-size: 18px;
	}
	.prayer {
		font-size: 15px;
		text-align: left;
	}
}

.kids_text {
	padding: 0 0 10px 22px;
	margin: 0 0 20px 0;
}
.kids_text.red {
	background: url(img/kids_red.png) no-repeat 0 8px;
}
.kids_text.red .line {
	display: inline-block;
	background: url(img/kids_line_red.png) repeat-x 0 bottom;
}
.kids_text.green {
	background: url(img/kids_green.png) no-repeat 0 8px;
}
.kids_text.green .line {
	display: inline-block;
	background: url(img/kids_line_green.png) repeat-x 0 bottom;
}
.kids_text.yellow {
	background: url(img/kids_yellow.png) no-repeat 0 8px;
}
.kids_text.yellow .line {
	display: inline-block;
	background: url(img/kids_line_yellow.png) repeat-x 0 bottom;
}
.kids_text.pink {
	background: url(img/kids_pink.png) no-repeat 0 8px;
}
.kids_text.pink .line {
	display: inline-block;
	background: url(img/kids_line_pink.png) repeat-x 0 bottom;
}

.dads_text {
	padding: 0 0 10px 26px;
	margin: 0 0 20px 0;
}
.dads_text.tea {
	background: url(img/dads_tea.png) no-repeat 0 5px;
}
.dads_text.tea .line {
	display: inline-block;
	background: url(img/dads_line_tea.png) repeat-x 0 bottom;
}
.dads_text.green {
	background: url(img/dads_green.png) no-repeat 0 5px;
}
.dads_text.green .line {
	display: inline-block;
	background: url(img/dads_line_green.png) repeat-x 0 bottom;
}
.dads_text.blue {
	background: url(img/dads_blue.png) no-repeat 0 5px;
}
.dads_text.blue .line {
	display: inline-block;
	background: url(img/dads_line_blue.png) repeat-x 0 bottom;
}
.dads_text.purple {
	background: url(img/dads_purple.png) no-repeat 0 5px;
}
.dads_text.purple .line {
	display: inline-block;
	background: url(img/dads_line_purple.png) repeat-x 0 bottom;
}


/* intro
---------------------------------------------------------------------------- */
#visual {
	width: 100%;
	position: relative;
}
#visual_image {
	width: 100%;
	max-height: 750px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	text-align: center;
}
#visual_image img {
	width: 100%;
}
#visual_text {
	width: 1010px;
	padding: 50px 0 0 10px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	color: #FFF;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	position: absolute;
	z-index: 5;
}
#visual_text h1 {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	text-align: left;
	font-size: 36px;
	line-height: 1.6;
	letter-spacing: 0.25em;
	color: #FFF;
	font-weight: bold;
}
@media screen and (max-width:767px){
	#visual {
		width: 100%;
		height: auto;
		position: relative;
	}
	#visual_text {
		width: auto;
		padding: 20px 0 0 0;
		margin: 0 15px;
		color: #000;
		font-size: 14px;
		line-height: 1.6;
		text-align: left;
		position: relative;
		z-index: 5;
	}
	#visual_text h1 {
		margin: 0;
		padding: 0;
		font-size: 22px;
		letter-spacing: 0.2em;
		color: #000;
	}
	#visual_image {
		width: 100%;
		height: auto;
		position: relative;
	}

}

#intro {
	width: 1000px;
	margin: 0 auto;
	padding: 60px 10px;
	position: relative;
	overflow: hidden;
}
#intro_head {
	width: 360px;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.25em;
	color: #000;
	font-weight: bold;
	background: url(img/shabon00.jpg) no-repeat right bottom;
}
#intro_head p {
	color: #000;
	line-height: 1.8;
	font-weight: bold;
}
#intro_text {
	width: 600px;
	float: right;
}
@media screen and (max-width:767px){
	#intro {
		width: auto;
		margin: 0 15px;
		padding: 0;
	}
	#intro_head {
		width: 100%;
		float: none;
		margin: 0 0 10px 0;
		text-align: left;
		font-size: 16px;
		letter-spacing: 0.2em;
		background: url(img/shabon00.jpg) no-repeat right bottom;
	}
	#intro_head p {
		color: #000;
		line-height: 1.8;
		font-weight: bold;
	}
	#intro_text {
		width: 100%;
		float: none;
	}

}

/* 制作風景
---------------------------------------------------------------------------- */
#making {
	width: 100%;
	padding: 50px 0 0 0;
	background: url(img/bg_making.jpg) no-repeat center 0;
	background-size: cover;
}
.kids_voice {
	width: 980px;
	margin: 0 auto;
	padding: 60px 0 0 0;
	position: relative;
}
.voice_left {
	text-align: left;
	margin: -20px 0 0 0;
}
.voice_right {
	text-align: right;
	margin: -20px 0 0 0;
}
.voice {
	display: inline-block;
	padding: 10px 15px;
	background: #FFF;
	border-radius: 10px;
	position: relative;
}
.voice_left .voice::after {
	content: "";
	display: block;
	width: 17px;
	height: 14px;
	background: url(img/tip_left.png) no-repeat 0;
	position: absolute;
	bottom: -14px;
	right: 15px;
}
.voice_right .voice::after {
	content: "";
	display: block;
	width: 17px;
	height: 14px;
	background: url(img/tip_right.png) no-repeat 0;
	position: absolute;
	bottom: -14px;
	left: 10px;
}
.voice p:last-child {
	margin: 0;
}
@media screen and (max-width:767px){
	#making {
		width: 100%;
		padding: 0 0 10px 0;
		background: #F3F0EB url(img/bg_making.jpg) no-repeat center 0;
		background-size: 300%;
	}
	.kids_voice {
		width: auto;
		margin: 0 15px;
		padding: 0;
		position: relative;
	}
	.voice_left {
		text-align: right;
		margin: 0 0 30px 0;
	}
	.voice_right {
		text-align: left;
		margin: 0 0 30px 0;
	}
	.voice {
		width: 70%;
		text-align: left;
		margin: 0 !important;
	}
}


.wide_image {
	width: 100%;
	min-width: 1020px;
	margin: 100px auto;
}
@media screen and (max-width: 1019px) {
	.scroll_box {
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		margin: 0 auto 60px auto;
	}
	.wide_image {
		width: 1240px;
		margin: 0 auto;
	}
}
@media screen and (max-width:767px){
	.wide_image {
		width: 100%;
		margin: 0 auto;
	}

}

/* 完成
---------------------------------------------------------------------------- */
#finish {
	margin: 0 0 80px 0;
}
@media screen and (max-width:767px){
	#finish {
		margin: 0 0 30px 0;
	}

}
/* プレゼント
---------------------------------------------------------------------------- */
#present {
}
#present_head {
	width: 100%;
	min-width: 1020px;
	height: 270px;
	padding: 60px 0 0 0;
	margin: 0 0 60px 0;
	background: url(img/bg_present.jpg) no-repeat center 0;
	background-size: cover;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
@media screen and (max-width:767px){
	#present_head {
		width: 100%;
		min-width: 100px;
		height: 200px;
		padding: 30px 0 0 0;
		margin: 0 0 40px 0;
		background: url(img/bg_present.jpg) no-repeat center 0;
		background-size: cover;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		color: #FFF;
		line-height: 1.6;
		letter-spacing: 0.15em;
	}


}

/* しゃぼん
---------------------------------------------------------------------------- */
.shabon01::after {
	content: "";
	display: block;
	width: 280px;
	height: 240px;
	position: absolute;
	z-index: 1;
	background: url(img/shabon01.jpg) no-repeat 0 0;
	top: 10%;
	left: -110px;
}
.shabon02::after {
	content: "";
	display: block;
	width: 280px;
	height: 240px;
	position: absolute;
	z-index: 1;
	background: url(img/shabon02.jpg) no-repeat 0 0;
	bottom: -40px;
	right: -60px;
}
.shabon03::after {
	content: "";
	display: block;
	width: 280px;
	height: 240px;
	position: absolute;
	z-index: 1;
	background: url(img/shabon03.jpg) no-repeat 0 0;
	top: 10%;
	left: -80px;
}


/* アクション
---------------------------------------------------------------------------- */
.act_fadein {
	-webkit-animation: act_fadein 3.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	animation: act_fadein 3.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@-webkit-keyframes act_fadein {
	15% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes act_fadein {
	15% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.gallery_wrap .act_fadein {
	-webkit-animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.act_appear {
	-webkit-transform: translateY(80px);
	transform: translateY(80px); 
	-webkit-animation: act_appear 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	animation: act_appear 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@-webkit-keyframes act_appear {
	0% {
		opacity: 0;
	}
	100% {
		opacity:  1;
		-webkit-transform: translateY(0);
		transform: translateY(0); 
	}
}
@keyframes act_appear {
	0% {
		opacity: 0;
	}
	100% {
		opacity:  1;
		-webkit-transform: translateY(0);
		transform: translateY(0); 
	}
}

.act_voice {
	-webkit-transform: scale(0.2);
	transform: scale(0.2);
	-webkit-animation: act_voice 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	animation: act_voice 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@-webkit-keyframes act_voice {
	0% {
		opacity: 0;
	}
	100% {
		opacity:  1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes act_voice {
	0% {
		opacity: 0;
	}
	100% {
		opacity:  1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@media screen and (max-width:767px){
	.act_fadein {
		-webkit-animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
		animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}
	@-webkit-keyframes act_fadein {
		15% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes act_fadein {
		15% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.wide_image .act_fadein {
		-webkit-animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
		animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}

	.act_appear {
		-webkit-transform: translateY(0);
		transform: translateY(0); 
		-webkit-animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
		animation: act_fadein 2s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}
}


/* SPECIAL THANKS
---------------------------------------------------------------------------- */
#special_thanks {
	padding: 0 0 60px 0;
}
.senzan_image {
	margin: 0 0 40px 0;
	text-align: center;
}
.box {
	width: 740px;
	padding: 30px;
	margin: 0 auto 30px auto;
	background: #F5F5F5;
	border: #95865B 1px dotted;
}
.h_name {
	margin: 0 0 10px 0;
	padding: 0;
	background: none;
	border: none;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-align: left;
}
@media screen and (max-width: 767px) {
	#special_thanks {
		padding: 0 0 30px 0;
	}
	.senzan_image {
		margin: 0 0 20px 0;
		text-align: center;
	}
	.box {
		width: auto;
		padding: 15px;
		margin: 0 auto 30px auto;
		font-size: 13px;
	}
	.h_name {
		font-size: 14px;
	}

}

/* 使用したタオル
---------------------------------------------------------------------------- */
#towel {
	width: 100%;
	background: #F5F5F5;
	padding: 30px 0;
}
#towel h2 {
	font-size: 20px;
	margin: 0 0 20px 0;
}
.towel_image {
	width: 480px;
	float: left;
	text-align: center;
}
.towel_text {
	width: 400px;
	padding: 20px 80px 0 0;
	float: right;
}
.link {
	display: inline-block;
	padding: 10px 25px 10px 20px;
	background: none;
	border: #98895C 1px dotted;
	border-radius: 5px;
	color: #222;
	text-decoration: none;
	position: relative;
}
.link:hover {
	color: #222;
	background: #FFF;
}
.link::after {
	display: block;
	content: "";
	position: absolute;
	right: 10px;
	top: 40%;
	width: 4px;
	height: 4px;
	border-top: 2px solid #C7BEA0;
	border-right: 2px solid #C7BEA0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.3s;
}

@media screen and (max-width: 767px) {
	#towel {
		width: 100%;
		background: #F5F5F5;
		padding: 0;
	}
	#towel h2 {
		font-size: 16px;
		margin: 0 0 10px 0;
	}
	.towel_image {
		width: 100%;
		float: none;
		margin: 0 0 20px 0;
	}
	.towel_text {
		width: 100%;
		float: none;
		padding: 0;
	}
	.link {
		background: #FFF;
	}
}


/* ギャラリー
---------------------------------------------------------------------------- */
.gallery_wrap {
	width: 100%;
	min-width: 1020px;
	margin: 50px auto;
}
#making .gallery_wrap {
	margin: 100px auto;
}
.gallery_wrap .pc_only {
	width: 100%;
}
.gallery_wrap .pc_only img {
	width: 100%;
}
.gallery {
	display: none;
}
.bx-wrapper {
	display: none;
}
#bx-pager {
	display: none;
}
#bx-pager li {
	float: left;
	margin: 0 18px 0 0;
}
#bx-pager li:last-child {
	margin: 0;
}
@media screen and (max-width:767px){
	.gallery_wrap {
		width: auto;
		margin: 30px;
		min-width: 100px;
	}
	#making .gallery_wrap {
		margin: 30px;
	}
	.gallery {
		display: block;
	}
	.gallery li {
		display: block;
	}
	.bx-wrapper {
		display: block;
		margin: 20px 0;
		text-align: center;
	}
	.bx-pager-item {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin: 10px 8px;
		border-radius: 50%;
		overflow: hidden;
	}
	.bx-pager-link {
		display: block;
		overflow: hidden;
		text-indent: -100px;
		background: #DDD;
	}
	.bx-pager-link:hover,
	.bx-pager-link.active {
		background: #ECC7BF;
	}
	#bx-pager img {
		display: none;
	}
	#bx-pager {
		text-align: center;
	}
}


/* 装飾
---------------------------------------------------------------------------- */
.mt0 {
	margin-top: 0px;
}
.mt10 {
	margin-top: 10px;
}
.mt20 {
	margin-top: 20px;
}
.mt30 {
	margin-top: 30px;
}
.mt40 {
	margin-top: 40px;
}
.mt60 {
	margin-top: 60px;
}
.mb0 {
	margin-bottom: 0;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.pl10 {
	padding-left: 10px;
}
.ml10 {
	margin-left: 10px;
}
.ml20 {
	margin-left: 20px;
}
.ml50 {
	margin-left: 50px;
}
.ml100 {
	margin-left: 100px;
}
.mr20 {
	margin-right: 20px;
}
.mr30 {
	margin-right: 30px;
}
.mr50 {
	margin-right: 50px;
}
.mr60 {
	margin-right: 60px;
}
.mr100 {
	margin-right: 100px;
}
.center {
	text-align: center !important;
}
.center p {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

.float_l {
	float: left;
}
.float_r {
	float: right;
}
.bold {
	font-weight: bold;
}
.small_text {
	font-size: 90%;
}