@CHARSET "UTF-8";

/* header */
header {
	position: absolute;
	background-color: rgba(0, 0, 0, 0);
	top: 0;
	width: 100%;
}

.headerTitle {
	font-size: 28px;
	letter-spacing: 0.05em;
	color: white;
}

.headerWrapepr {
	padding: 13px 27px 15px 27px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.headerTel {
	display: flex;
	align-items: center;
}

.telNumber {
	font-size: 30px;
	letter-spacing: 0.1em;
	color: white;
}

.contact {
	padding: 20px 26px 18px 15px;
	background-color: #6b7d5d;
}

.contactText {
	font-size: 18px;
	letter-spacing: 0.1em;
	color: white;
	text-align: center;
}

/* top */
.topArea {
	background: url(../img/topBg.png);
	height: 600px;
	margin-bottom: 80px;
}

.topText {
	font-size: 30px;
	letter-spacing: 0.1em;
	color: white;
	text-shadow: -2px 0px 7px rgba(0, 0, 0, 0.86);
}

.topTitle>h1 {
	transform: translateX(-47px);
	font-size: 70px;
	letter-spacing: -0.05em;
	color: white;
	font-family: 'はんなり明朝';
	text-shadow: -2px 0px 7px rgba(0, 0, 0, 0.86);
}

.topTextArea {
	padding-left: 52px;
	position: absolute;
	top: 30%;
}

.container {
	width: 1000px;
	margin: 0 auto;
	max-width: 100%;
}

.memorialWrapper {
	position: relative;
	margin-bottom: 167px;
}

.memorialTitle {
	margin-bottom: 49px;
}

.memorialContent {
	display: flex;
	justify-content: space-beteen;
}

.contentTitle>h2 {
	font-size: 36px;
	letter-spacing: 0.05em;
	text-align: center;
}

.memorialText {
	display: flex;
	align-items: center;
	font-size: 24px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding-right: 40px;
}

.UnhappyWrapper {
	margin-bottom: 165px;
}

.unhappyTitle {
	padding-bottom: 85px;
}

.unhappyImg img {
	margin: 0 auto;
}

.fireContainer {
	width: 1200px;
	margin: 0 auto;
	max-width: 100%;
}

.fireBoxWrapper {
	display: flex;
	justify-content: space-between;
}

.firebox {
	border: 5px solid #6b7d5d;
	border-radius: 15px;
	flex-basis: 32%;
	padding-top: 20px;
	padding-left: 45px;
	padding-right: 45px;
	padding-bottom: 20px;
}

.fireWrapper {
	margin-bottom: 154px;
}

.firebox h3 {
	font-size: 30px;
	letter-spacing: 0.05em;
	margin-bottom: 35px;
	text-align: center;
}

.firebox p {
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.firebox img {
	margin: 0 auto;
}

.noukotuText {
	padding-bottom: 55px;
}

.goudou {
	padding-bottom: 25px;
}

.kozinText {
	padding-bottom: 65px;
}

.funeralContainer {
	width: 1000px;
	margin: 0 auto;
	max-width: 100%;
}

.funeralTable {
	margin-bottom: 20px;
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #cccccc;
	    max-width: 100%;
}

.funeralTable tr th {
	color: #363636;
	border: 1px solid #cccccc;
	text-align: center;
	padding: 20px 0px;
	width: 24%;
	background-color: #f9f9f9;
	font-size: 16px;
	letter-spacing: 0.1em;
	vertical-align: middle;
}

.funeralTable  tr  td {
	color: #363636;
	vertical-align: middle;
	width: 38%;
	text-align: center;
	padding: 20px 0px;
	border: 1px solid #cccccc;
	font-size: 16px;
}

.funeralText {
	padding-left: 75px;
	color: #363636;
	font-size: 16px;
	letter-spacing: 0.1em;
}

.funeralWrapper {
	margin-bottom: 135px;
}

.kobetuWrapper {
	margin-bottom: 166px;
}

.goudouText {
	text-align: center;
	color: #363636;
	font-size: 24px;
	letter-spacing: 0.1em;
}

.goudouWrapper {
	margin-bottom: 210px;
}

.mapContent {
	display: flex;
	justify-content: space-between;
}

.mapTextTitle {
	padding-bottom: 40px;
	font-size: 32px;
	letter-spacing: 0.05em;
}

.mapText {
	font-size: 21px;
	letter-spacing: 0.2em;
	line-height: 1.2;
}

.mapTextArea {
	padding-top: 119px;
}

.mapWrapper {
	margin-bottom: 100px;
}

.map {
	width: 100%;
	height: 700px;
	margin-bottom: 85px;
}

footer {
	background: #6b7d5d;
	padding-bottom: 20px;
	padding-top: 55px;
}

.storeTitle {
	font-size: 36px;
	letter-spacing: 0.1em;
	padding-bottom: 50px;
	color: white;
}

.address {
	font-size: 24px;
	letter-spacing: 0.1em;
	/*padding-bottom: 23px;*/
	color: white;
}

.footerTel {
	display: flex;
	align-items: center;
	padding-bottom: 86px;
}

.copyright {
	letter-spacing: 0.1em;
	font-size: 18px;
	color: white;
	text-align: center;
}

.footerWrapper {
	padding-left: 105px;
}

.spBlock {
	display: none;
}

.scroll {
	/* tableをスクロール可能にする */
	overflow: auto;
	/* tableセル内文字の折り返しを禁止 */
	white-space: nowrap;
}
/* ↓tableにスクロールバーを追加 ここから */
.scroll::-webkit-scrollbar {
	height: 5px;
}

.scroll::-webkit-scrollbar-track {
	/* スクロールバーのスクロール範囲の色 */
	background: #F6F6F6;
}

.scroll::-webkit-scrollbar-thumb {
	/* スクロールバーのツマミの色 */
	background: #C2C2C2;
}
/* tableにスクロールバーを追加 ここまで↑ */
.scroll table {
	/* tableの幅を100%に */
	width: 100%;
}

.back-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 2;
    display: none;
}
.back-to-top:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #59493F;
}
.back-to-top:after {
    content: "↑";
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}


@media screen and (max-width:1302px) {
	.container {
		width: 90%;
	}
	.fireContainer {
		width: 87%;
	}
	.funeralContainer {
		width: 85%;
	}
	.topTextArea {
		top: 30%;
	}
}

@media screen and (max-width:991px) {
	.headerTitle {
		font-size: 26px;
	}
	.contactText {
		font-size: 15px;
	}
	.telNumber {
		font-size: 24px;
	}
	.contact {
		padding: 18px 24px 16px 13px;
	}
	.topText {
		font-size: 24px;
	}
	.topTitle>h1 {
		font-size: 56px;
	}
	.topArea {
		margin-bottom: 50px;
	}
	.memorialTitle {
		margin-bottom: 25px;
	}
	.contentTitle>h2 {
		font-size: 30px;
	}
	.memorialText {
		font-size: 20px;
	}
	.memorialWrapper {
		margin-bottom: 80px;
	}
	.unhappyTitle {
		padding-bottom: 53px;
	}
	.UnhappyWrapper {
		margin-bottom: 80px;
	}
	.fireWrapper {
		margin-bottom: 76px;
	}
	.firebox h3 {
		font-size: 24px;
		margin-bottom: 17px;
	}
	.firebox p {
		font-size: 13px;
	}
	.kozinText {
		padding-bottom: 32px;
	}
	.goudou {
		padding-bottom: 50px;
	}
	.funeralWrapper {
		margin-bottom: 68px;
	}
	.kobetuWrapper {
		margin-bottom: 79px;
	}
	.goudouWrapper {
		margin-bottom: 105px;
	}
	.goudouText {
		font-size: 20px;
		text-align: start;
	}
	.mapTextTitle {
		font-size: 26px;
		padding-bottom: 20px;
	}
	.mapText {
		font-size: 18px;
	}
	.mapWrapper {
		margin-bottom: 60px;
	}
	.map {
		margin-bottom: 53px;
		height: 500px;
	}
	footer {
		padding-top: 28px;
		padding-bottom: 10px;
	}
	.footerWrapper {
		padding-left: 62px;
	}
	.storeTitle {
		font-size: 30px;
		padding-bottom: 25px;
	}
	.address {
		font-size: 20px;
		padding-bottom: 14px;
	}
	.footerTel {
		padding-bottom: 52px;
	}
	.copyright {
		font-size: 15px;
	}
	.funeralTable tr th {
		font-size: 13px;
	}
	.funeralTable tr td {
		font-size: 13px;
	}
	.funeralText {
		font-size: 13px;
	}
	.funeralText {
		padding-left: 40px;
	}
}

@media screen and (max-width:787px) {
	.topTextArea {
		padding-left: 10px;
		top: 30%;
	}
	.topTitle>h1 {
		transform: translateX(-15px);
	}
	.headerWrapepr {
		padding: 7px 13px 8px 13px
	}
	.headerTitle {
		font-size: 22px;
	}
	.contactText {
		font-size: 14px;
	}
	.telNumber {
		font-size: 22px;
	}
	.contact {
		padding: 16px 22px 14px 11px;
	}
	.topText {
		font-size: 22px;
	}
	.topTitle>h1 {
		font-size: 40px;
	}
	.topArea {
		margin-bottom: 30px;
		height: 600px;
		background: url(../img/topBgSp.png);
	}
	.memorialTitle {
		margin-bottom: 10px;
	}
	.contentTitle>h2 {
		font-size: 28px;
	}
	.memorialText {
		font-size: 18px;
	}
	.memorialWrapper {
		margin-bottom: 30px;
	}
	.memorialContent {
		flex-direction: column;
	}
	.memorialText {
		width: 100%;
		padding-right: 0;
		text-align: center;
		padding-bottom: 10px;
	}
	.memorialImg {
		width: 100%;
	}
	.memorialImg img {
		margin: 0 auto;
	}
	.unhappyTitle {
		padding-bottom: 24px;
	}
	.UnhappyWrapper {
		margin-bottom: 30px;
	}
	.fireWrapper {
		margin-bottom: 30px;
	}
	.fireBoxWrapper {
		flex-direction: column;
	}
	.firebox {
		flex-basis: 100%;
		margin-bottom: 10px;
	}
	.firebox h3 {
		font-size: 22px;
		margin-bottom: 17px;
	}
	.firebox p {
		font-size: 12px;
	}
	.kozinText {
		padding-bottom: 32px;
	}
	.goudou {
		padding-bottom: 50px;
	}
	.funeralWrapper {
		margin-bottom: 30px;
	}
	.funeralTable tr th {
		font-size: 12px;
	}
	.funeralTable tr td {
		font-size: 12px;
	}
	.funeralText {
		font-size: 12px;
	}
	.kobetuWrapper {
		margin-bottom: 30px;
	}
	.goudouWrapper {
		margin-bottom: 50px;
	}
	.goudouText {
		font-size: 18px;
	}
	.mapContent {
		flex-direction: column;
	}
	.mapTextArea {
		padding-top: 20px;
		order: 2;
	}
	.mapTextTitle {
		font-size: 24px;
		padding-bottom: 10px;
	}
	.memorialImg {
		order: 1;
	}
	.mapText {
		font-size: 16px;
	}
	.mapWrapper {
		margin-bottom: 30px;
	}
	.map {
		margin-bottom: 20px;
		height: 350px;
	}
	footer {
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.footerWrapper {
		padding-left: 30px;
	}
	.storeTitle {
		font-size: 28px;
		padding-bottom: 20px;
	}
	.address {
		font-size: 18px;
		padding-bottom: 10px;
	}
	.footerTel {
		padding-bottom: 25px;
	}
	.copyright {
		font-size: 14px;
	}
}

@media screen and (max-width:500px) {
	.headerWrapepr {
		padding: 20px 13px 8px 13px;
		flex-direction: column;
		align-items: baseline;
	}
	.headerTitle {
		padding-bottom: 20px;
	}
	.topTextArea {
		top: 40%;
	}
	.topArea {
		background-position-x: 44%;
		height: 550px;
	}
	.memorialText {
		text-align: start;
	}
	.spBlock {
		display: block;
	}
	.funeralTable tr td {
		padding: 20px 5px;
		text-align: start;
	}
	.funeralTable tr th {
		padding: 20px 5px;
	}
	.funeralText {
		padding-left: 20px;
		padding-top: 10px;
	}
	.funeralTable{
		margin-bottom: 0;
	}
	.spHidden{
	display : none;
	}
	.back-to-top{
		right : 20px;
	}
}

@media screen and (max-width:360px) {
	.topTitle>h1 {
		font-size: 34px;
	}
}