@charset "UTF-8";
/* family.css */



/*------------ pc  ------------*/	
@media screen and (min-width: 501px) {
/*ここにpc用スタイルを記述*/
	

/*------------  BACKGROUND ------------*/	


#background_top {
	width: 100%;
	background-image: url(../images/family_bg01.webp), linear-gradient(#242424, 65%, #221b1b);
	background-repeat: no-repeat;
	background-size:contain;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}



/*------------  MAIN ------------*/	

.flex {
	display: flex;
}


#wrap_box_w01 {
	width: 	90%;
	position: relative;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
	box-sizing: border-box;
}

#wrap_title {
	width: 10%;
	position: relative;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	box-sizing: border-box;	
}

#wrap_title h2 {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #ffffff;
	top: 0;
	font-size: 3.0em;
	padding: 20% 0 0 30%;
	position: relative;
	font-display: swap;
}


h4.font_family01 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	color: #ffffff;
	top: 0;
	font-size: 4.6em;
	letter-spacing: 0.06em;
	padding: 70% 0 10% 11%;
	transform: scale(1.1, 1);
	z-index: 200;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

.font_family02 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 1.35em;
	letter-spacing: 0.1em;
	padding: 0 0 3% 8%;
	line-height: 2.2em;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

#wrap_box_w01 .pad_pro01 {
	width: 63%;
	text-align: center;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	padding: 4% 0 0 0;
}

#wrap_box_w01 .pad_pro02 {
	width: 41%;
	margin-left: 62%;
	margin-top: -15%;
	margin-bottom: -0.0em;
	position: relative;
	padding: 0 0 0 0;
	z-index: 100;
}

#wrap_box_w01 .pad_pro03 {
	width: 36%;
	text-align: center;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	padding: 2% 0 0 0;
	z-index: 10;
}


#wrap_box_w01 .font_proname01 {
	text-align: center;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 1.1em;
	letter-spacing: 0.1em;
	padding: 0 0 7% 0;
	margin-top: -4%;
	margin-bottom: -0.0em;
}

#wrap_box_w01 .font_proname02 {
	text-align: right;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 1.1em;
	letter-spacing: 0.1em;
	padding: 0 6% 7% 0;
	margin-top: -1%;
	margin-bottom: -0.0em;
	z-index: 100;
}


#wrap_box_w01 .font_proname03 {
	text-align: center;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 1.1em;
	letter-spacing: 0.1em;
	padding: 0 0 11% 0;
	margin-top: -6%;
	margin-bottom: -0.0em;
	margin-left: -2%;
	z-index: 100;
}






/*------------  BACKGROUND (代々) ------------*/	


#background_family02 {
	width: 100%;
	background-image: url(../images/family_bg02.webp);
	background-repeat: no-repeat;
	background-size:cover;
	background-color: #ffffff;
	padding: 1.5px 0 0 0;
	top:0;
	margin-top: 1.5px;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}


h4.font_family02 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	color: #ffffff;
	top: 0;
	font-size: 4.6em;
	letter-spacing: 0.06em;
	padding: 7% 0 28% 11%;
	transform: scale(1.1, 1);
	z-index: 200;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}




#wrap_daidai {
	width: 100%;
	display: flex;
	margin-top: -7%;
}


#wrap_daidai .pad_left {
	width: 10%;
}

#wrap_daidai .pad_right {
	width: 90%;
	position: relative;
	padding: 16% 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-left: 1.5px #323232 solid;
	box-sizing: border-box;
	margin-left: -0.0em;
	z-index: 40;
}


#wrap_daidai .pad_left h3.daidai {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 3.0em;
	padding: 0 0 0 2%;
	margin-top: -6%;
	position: relative;
	z-index: 90;
}

#wrap_daidai .pad_left h3.daidai span {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 0.8em;
	padding: 0 0 0 3%;
	margin-top: -0.0em;
	position: relative;
}



/*------------  代々 タイトル ------------*/	


.flex {
	display: flex;
}


#house_left {
	width: 24%;
	padding: 0 0 0 7%;
	margin-top: -0.0em;
	margin-bottom: 3%;
	border-right: 3.5px #323232 solid;
	box-sizing: border-box;
	position: relative;
}

#house_right {
	width: 70%;
	padding: 0 0 0 7%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}

#house_left h5 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 2em;
	transform: scale(1.1, 1);
	letter-spacing: 0.05em;
	padding: 4% 0 0 0;
	margin-top: -0.0em;
	margin-left:-27%;
	margin-bottom: -0.0em;
	position: relative;
} 

#house_left h4 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 4.1em;
	transform: scale(1.1, 1);
	letter-spacing: 0.1em;
	padding: 35% 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	margin-left: -20%;
	position: relative;
	white-space: nowrap;
} 

#house_left h4 span {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 0.72em;
	transform: scale(1.1, 1);
	letter-spacing: 0.1em;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: 3%;
	margin-left: -20%;
	position: relative;
} 

#house_left h6 {
	text-align: left;
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: 300;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 1.7em;
	transform: scale(1.1, 1);
	letter-spacing: 0.2em;
	padding: 62% 0 0 0;
	margin-left: 6%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
} 

#house_left h6 span.since {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	font-weight: 300;
	color: #9e6850;
	top: 0;
	font-size: 0.7em;
} 

#house_left h6 span.year {
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	writing-mode: horizontal-tb;
	-ms-writing-mode: rl-tb;
	font-weight: 300;
	color: #9e6850;
	top: 0;
	font-size: 0.7em;
	letter-spacing: 0.07em;
	display: contents;
	position: absolute;
} 


/*------------  代 々 ------------*/

#house_right .font_house01 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #323232;
	top: 0;
	font-size: 1.35em;
	letter-spacing: 0.1em;
	padding: 8% 0 3% 0;
	line-height: 2.2em;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

.font_name01 {
	text-align: left;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #212121;
	top: 0;
	font-size: 1.1em;
	letter-spacing: 0.1em;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	z-index: 100;
}
	

.pad_ryozen {
	height:560px;	
}	
	
	
}




/*------------ smartPhone  ------------*/	
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/
	
	
/*------------  BACKGROUND ------------*/	


#background_top {
	width: 100%;
	background-image: url(../images/family_bg01_smp.webp), linear-gradient(#242424, 65%, #221b1b);
	background-repeat: no-repeat;
	background-size:contain;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}


/*------------  MAIN ------------*/	

.flex {
	display: flex;
}


#wrap_box_w01 {
	width: 	82%;
	position: relative;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
	box-sizing: border-box;
}

#wrap_title {
	width: 18%;
	position: relative;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	box-sizing: border-box;	
}

#wrap_title h2 {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #ffffff;
	top: 0;
	font-size: 1.9rem;
	letter-spacing: 0.06em;
	line-height: 1.4rem;
	padding: 90% 0 0 30%;
	position: relative;
	font-display: swap;
}


h4.font_family01 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	color: #ffffff;
	top: 0;
	font-size: 1.8rem;
	padding: 90% 0 10% 9%;
	transform: scale(1.1, 1);
	z-index: 200;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

.font_family02 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 0.8rem;
	letter-spacing: 0.06rem;
	line-height: 1.5rem;
	padding: 0 3% 6% 6.5%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

#wrap_box_w01 .pad_pro01 {
	width: 79%;
	text-align: center;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	padding: 4% 0 0 0;
}

#wrap_box_w01 .pad_pro02 {
	position: absolute;
	width: 64%;
	margin-top: -28%;
	margin-bottom: -0.0em;
	position: relative;
	padding: 0 0 0 47%;
	z-index: 100;
}

#wrap_box_w01 .pad_pro03 {
	width: 41%;
	text-align: center;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	padding: 2% 0 0 0;
	z-index: 10;
}


#wrap_box_w01 .font_proname01 {
	text-align: center;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 0.66rem;
	letter-spacing: 0.06rem;
	padding: 0 0 7% 0;
	margin-top: -7%;
	margin-bottom: -0.0em;
}

#wrap_box_w01 .font_proname02 {
	text-align: center;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 0.66rem;
	letter-spacing: 0.06rem;
	line-height: 1.0rem;
	padding: 0 6% 16% 65%;
	margin-top: -3%;
	margin-bottom: -0.0em;
	z-index: 100;
}


#wrap_box_w01 .font_proname03 {
	text-align: center;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #ffffff;
	top: 0;
	font-size: 0.66rem;
	letter-spacing: 0.06rem;
	line-height: 1.0rem;
	padding: 0 0 17% 0;
	margin-top: -8%;
	margin-bottom: -0.0em;
	margin-left: -2%;
	z-index: 100;
}


/*------------  BACKGROUND (代々) ------------*/	


#background_family02 {
	width: 100%;
	height: 100%;
	background-image: url(../images/family_bg02_smp.webp);
	background-repeat: no-repeat;
	background-size:cover;
	background-color: #ffffff;
	padding: 1.5px 0 13% 0;
	top:0;
	margin-top: 1.5px;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}


h4.font_family02 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	color: #ffffff;
	top: 0;
	font-size: 4.6em;
	letter-spacing: 0.06em;
	padding: 7% 0 28% 11%;
	transform: scale(1.1, 1);
	z-index: 200;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}




#wrap_daidai {
	width: 100%;
	display: flex;
	margin-top: -7%;
}


#wrap_daidai .pad_left {
	width: 18%;
}

#wrap_daidai .pad_right {
	width: 82%;
	position: relative;
	padding: 16% 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-left: 1.5px #323232 solid;
	box-sizing: border-box;
	margin-left: -0.0em;
	z-index: 20;
}


#wrap_daidai .pad_left h3.daidai {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 1.9rem;
	letter-spacing: 0.06em;
	line-height: 1.4rem;
	padding: 0 0 0 0;
	margin-top: -6%;
	position: relative;
	z-index: 20;
}

#wrap_daidai .pad_left h3.daidai span {
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 1.4rem;
	padding: 0 0 0 3%;
	margin-top: -0.0em;
	position: relative;
}


/*------------  代々 タイトル ------------*/	


.flex {
	display: flex;
}


#house_left {
	width: 24.5%;
	padding: 0 0 0 7%;
	margin-top: -0.0em;
	margin-bottom: 3%;
	border-right: 2px #323232 solid;
	box-sizing: border-box;
	position: relative;
}

#house_right {
	width: 70%;
	padding: 0 0 0 7%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
}

#house_left h5 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 0.9rem;
	transform: scale(1.1, 1);
	letter-spacing: 0.05em;
	padding: 4% 0 0 0;
	margin-top: -0.0em;
	margin-left:-59%;
	margin-bottom: -0.0em;
	position: relative;
} 

#house_left h4 {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 1.7rem;
	transform: scale(1.1, 1);
	letter-spacing: 0.1em;
	padding: 35% 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	margin-left: -59%;
	position: relative;
	white-space: nowrap;
} 

#house_left h4 span {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 1.5rem;
	transform: scale(1.1, 1);
	letter-spacing: 0.1em;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: 3%;
	margin-left: -50%;
	position: relative;
} 

#house_left h6 {
	text-align: left;
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: 300;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #323232;
	top: 0;
	font-size: 0.86rem;
	transform: scale(1.1, 1);
	letter-spacing: 0.2em;
	padding: 62% 0 0 0;
	margin-left: -30%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
} 

#house_left h6 span.since {
	text-align: left;
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-style: normal;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	font-weight: 300;
	color: #9e6850;
	top: 0;
	font-size: 0.6rem;
} 

#house_left h6 span.year {
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	writing-mode: horizontal-tb;
	-ms-writing-mode: rl-tb;
	font-weight: 300;
	color: #9e6850;
	top: 0;
	font-size: 0.6rem;
	letter-spacing: 0.03rem;
	display: contents;
	position: absolute;
} 


/*------------  代 々 ------------*/

#house_right .font_house01 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #323232;
	top: 0;
	font-size: 0.72rem;
	letter-spacing: 0.06rem;
	line-height: 1.1rem;
	padding: 8% 2% 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	font-display: swap;
}

.font_name01 {
	text-align: left;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #212121;
	top: 0;
	font-size: 0.6rem;
	letter-spacing: 0.03rem;
	line-height: 0.9rem;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	z-index: 100;
}

.pad_ryozen {
	height:330px;	
}		
	
}