@charset "UTF-8";



/*lead
---------------------------------------------------------*/
#lead {
	position: relative;
	overflow-x: 1;
}
#lead h2 {
	text-align: center;
	padding-bottom: .7em;
	border-bottom: solid 1px #102e55;
	margin-bottom: min(130px,10%);
}
#lead .flt_box .img_box {
	width: 43%;
	max-width: 548px;
	float: right;
}
#lead .flt_box .txt_l {
	width: 54%;
	max-width: 690px;
	float: left;
}
#lead .flt_box .txt_l .inbox {
	width: 100%;
	max-width: 650px;
	margin-left: auto;
	margin-right: 0;
}
#lead .flt_box .txt_l h3 {
	font-size: min(225%,2.8vw);
	letter-spacing: .06em;
	line-height: 1.4em;
	margin-bottom: .5em;
	white-space: nowrap;
}
#lead .flt_box .txt_l h3 .fukidashi {
	font-size: 167%;
	letter-spacing: normal;
	line-height: 1.4em;
	display: inline-block;
	vertical-align: middle;
	padding: 0 .5em;
	position: relative;
	transform: translateY(-95%);
}
#lead .flt_box .txt_l h3 .fukidashi::before {
	content: "";
	position: absolute;
	width: 110%;
	height: 100%;
	left: 0;
	bottom: -.55em;
	background: url("../images/blooddonation/txt_abs1@2x.png") no-repeat center bottom;
	background-size: contain;
}
#lead .flt_box .txt_l .question {
	display: inline-block;
	vertical-align: middle;
	width: 1.3em;
	height: 1.3em;
	background: url("../images/blooddonation/txt_abs2@2x.png") no-repeat center center;
	background-size: contain;
	transform: translateY(-.2em);
}

#lead .policy {
	width: 100%;
	max-width: 1150px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	padding: 60px 4%;
	text-align: center;
}
#lead .policy h3 {
	font-size: 180%;
	letter-spacing: .06em;
	line-height: 1.5em;
}
#lead .policy h3 + .ft_marce {
	font-size: 120%;
	letter-spacing: .12em;
	line-height: 1.0em;
	margin-top: .8em;
}
#lead .policy .com_checklist1 {
	width: 100%;
	max-width: 920px;
	margin: 35px auto;
	text-align: left;
}
#lead .policy dt {
	padding-bottom: 1.8em;
	position: relative;
	margin-bottom: 1.8em;
}
#lead .policy dt::before {
	content: "";
	position: absolute;
	width: 4em;
	height: 1px;
	background: #102e55;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
}

#lead .bg_area {
	position: relative;
	padding-top: min(300px,24%);
	padding-bottom: min(170px,14%);
}
#lead .bg_area::before {
	content: "";	/*背景*/
	position: absolute;
	z-index: -2;
	width: 100vw;
	height: calc(100% + 60px);
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: url("../images/blooddonation/bg1@2x.jpg") no-repeat center center;
	background-size: cover;
}
#lead .bg_area::after {
	content: "";	/*ハート*/
	position: absolute;
	z-index: -1;
	width: 118vw;
	max-width: 1775px;
	height: 100%;
	left: 50%;
	bottom: 0;
	transform: translateX(-66%);
	background: url("../images/blooddonation/bg2@2x.png") no-repeat top 30% center;
	background-size: contain;
}
#lead .bg_area dt {
	margin-bottom: 1.2em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#lead .flt_box .txt_l h3 {
	font-size: 3.0vw;
	margin-bottom: .2em;
}
#lead .flt_box .txt_l h3 .fukidashi {
	margin-left: -.5em;
	margin-right: -.2em;
}
#lead .flt_box .img_box {
	margin-left: 3%;
	margin-bottom: 1.0em;
}
#lead .flt_box .txt_l {
	width: 100%;
	max-width: 100%;
	float: none;
}
#lead .flt_box .txt_l .inbox {
	max-width: 100%;
}
#lead .policy {
	padding: 5% 4%;
}
#lead .policy .com_checklist1 {
	margin: 4% auto;
}
#lead .policy dt {
	padding-bottom: 1.4em;
	margin-bottom: 1.4em;
}
#lead .bg_area {
	padding-top: 20%;
	padding-bottom: 12%;
}
#lead .bg_area dt {
	margin-bottom: 1.0em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#lead h2 {
	margin-bottom: 8%;
}
#lead .flt_box .img_box {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0 auto .5em;
}
#lead .flt_box .txt_l {
	width: 100%;
	max-width: 100%;
	float: none;
}
#lead .flt_box .txt_l .inbox {
	max-width: 100%;
}
#lead .flt_box .txt_l h3 {
	text-align: center;
	font-size: 155%;
	letter-spacing: .04em;
}
#lead .flt_box .txt_l h3 .fukidashi {
	font-size: 140%;
	display: block;
	width: 2.0em;
	text-align: center;
	transform: none;
	margin-bottom: .5em;
}

#lead .policy {
	padding: 6% 5% 8%;
}
#lead .policy h3 {
	font-size: 140%;
	letter-spacing: .04em;
}
#lead .policy h3 + .ft_marce {
	font-size: 100%;
}
#lead .policy .com_checklist1 {
	margin: 6% auto;
}
#lead .policy dt {
	padding-bottom: 1.0em;
	margin-bottom: 1.0em;
}

#lead .bg_area {
	padding-top: 25%;
	padding-bottom: 14%;
}
#lead .bg_area::before {
	height: calc(100% + 20vw);	/*背景*/
	background-image: url("../images/blooddonation/bg1_sp@2x.jpg");
	background-position: center top;
	background-size: 100% auto;
}
#lead .bg_area::after {
	background-position:  top 10% center;	/*ハート*/
}
#lead .bg_area dt {
	margin-bottom: .8em;
}
}



/*registration
---------------------------------------------------------*/
#registration .bg {
	background: #e6e6dc;
	position: relative;
}
#registration .bg::before {
	content: "";	/*上影*/
	position: absolute;
	z-index: 0;
	width: 87%;
	height: 8vw;
	max-height: 90px;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	background: url("../images/blooddonation/shadow1@2x.png") no-repeat center top;
	background-size: 100% 100%;
}
#registration .title_box {
	text-align: center;
}
#registration .title_box .com_marce21 {
	margin-bottom: 1.0em;
}
#registration .com_link1_list {
	margin-top: 60px;
}

#flow .tab-menu {
	width: 80%;
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
	text-align: center;
	color: #fff;
	font-size: min(125%,2.2vw);
	font-weight: bold;
	letter-spacing: .26em;
	line-height: 1.4em;
}
#flow .tab-menu li {
	width: 49.5%;
	max-width: 378px;
	box-sizing: border-box;
	padding: 1.2em 1%;
	background: #f39b64;
	border-radius: .8em .8em 0 0;
	cursor: pointer;
}
#flow .tab-menu li p {
	display: inline-block;
	vertical-align: middle;
	padding: 0 1.0em;
	position: relative;
}
#flow .tab-menu li p::before {
	font-family: 'fontello';
	content: '\e800';
	font-size: 60%;
	font-weight: normal;
	position: absolute;
	right: 0;
	top: .4em;
	transform: rotate(90deg);
}
#flow .tab-menu li.active {
	padding: 1.5em 1%;
}
#flow .tab-menu li.active p::before {
	opacity: 0;
}
#flow .tab-box > div {
	background: #fff;
	padding: 90px 3% 40px;
	display: none;	/* 初期表示 */
}
#flow .tab-box > div.active {
  display: block;
}
#flow .tab-box .tab_inbox {
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
#flow .com_flow_list2 > li {
	padding-left: 2.5%;
}
#flow .com_flow_list2 > li::before {
	color: #f39b64;
}
#flow .com_flow_list2 .inbox {
	padding-left: 6%;
	padding-left: 12%;
}
#flow .com_flow_list2 > li:nth-child(odd) .inbox {
	background: rgba(243,155,100,0.07);
}
#flow .com_flow_list2 .flt_box .img_l {
	float: left;
	width: 30.5%;
	max-width: 274px;
}
#flow .com_flow_list2 .flt_box .txt_r {
	float: right;
	width: 65.5%;
}
#flow .com_flow_list2 dt.fs30 {
	letter-spacing: .16em;
}
#flow .com_flow_list2 .tel_item {
	display: flex;
    justify-content: space-between;
    align-items: center;
	font-size: min(110%,1.4vw);
	letter-spacing: .1em;
	line-height: 1.4em;
	margin-bottom: 1.0em;
}
#flow .com_flow_list2 .tel_item dt {
	width: 12em;
	text-align: center;
}
#flow .com_flow_list2 .tel_item dd {
	width: calc(100% - 13em);
}
#flow .com_flow_list2 .txt_bottom {
	text-align: center;
	margin-top: 1.5em;
}
#flow .com_flow_list2 .sub_box {
	margin-top: 40px;
	background: rgba(255,255,255,0.8);
	padding: 30px 0;
	
}
#flow .com_flow_list2 .sub_box .flow_style2 {
	display: flex;
    justify-content: space-between;
    align-items: center;
}
#flow .com_flow_list2 .sub_box .flow_style2 > dt {
	width: 24%;
	box-sizing: border-box;
	padding: 1.0em 1%;
	text-align: center;
	font-size: min(125%,1.9vw);
	letter-spacing: .16em;
	line-height: 1.6em;
}
#flow .com_flow_list2 .sub_box .flow_style2 > dd {
	width: 76%;
	box-sizing: border-box;
	border-left: solid 1px rgba(16,46,85,0.2);
	padding: 0 3%;
}
#flow .com_flow_list2 .sub_box .list1 {
	font-size: 90%;
	letter-spacing: .1em;
	line-height: 1.6em;
}
#flow .com_flow_list2 .sub_box .list1 li {
	padding-left: 1.2em;
	position: relative;
	margin-bottom: .5em;
}
#flow .com_flow_list2 .sub_box .list1 li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
#flow .com_flow_list2 .sub_box .list1 li:last-child {
	margin-bottom: 0;
}
#flow .com_flow_list2 .sub_box .type_flex {
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
	text-align: center;
}
#flow .com_flow_list2 .sub_box .type_flex .type_item {
	width: 50%;
	padding-top: .5em;
}
#flow .com_flow_list2 .sub_box .type_item > dt {
	font-size: 125%;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.0em;
	margin-bottom: 1.0em;
}
#flow .com_flow_list2 .sub_box .type_item > dt span {
	display: inline-block;
	padding-left: 3.0em;
	position: relative;
}
#flow .com_flow_list2 .sub_box .type_item > dt span::before {
	content: "";
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url("../images/icon_dog@2x.png") no-repeat center center;
	background-size: contain;
}
#flow .com_flow_list2 .sub_box .type_item > dd {
	font-size: 90%;
	letter-spacing: .1em;
	line-height: 1.3em;
}
#flow .com_flow_list2 .sub_box .type_item > dd dt {
	width: 90%;
	max-width: 245px;
	background: #102e55;
	color: #fff;
	font-weight: bold;
	padding: .3em 0;
	border-radius: 3.0em;
	margin: .5em auto;
}
#flow .tab-menu li.tab2 {background: #9a8248;}
#flow .tab2 .flow_list > li::before {color: #9a8248;}
#flow .tab2 .flow_list > li:nth-child(odd) .inbox {background: rgba(154,130,72,0.07);}
#flow .com_flow_list2 .sub_box .type_item.cat > dt span::before {background-image: url("../images/icon_cat@2x.png");}

#conditions table {
	width: 100%;
}
#conditions table thead td {
	background: #e6e6dc;
}
#conditions table thead th {
	border-left: solid 2px #e6e6dc;
	border-bottom: solid 2px #e6e6dc;
	background: #d6d5c2;
	padding: 1.2em 0;
	text-align: center;
	vertical-align: middle;
	border-radius: 10px 10px 0 0;
}
#conditions table thead th span {
	display: inline-block;
	padding-left: 1.7em;
	position: relative;
}
#conditions table thead th span::before {
	content: "";
	position: absolute;
	width: 1.4em;
	height: 1.4em;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url("../images/icon_dog@2x.png") no-repeat center center;
	background-size: contain;
}
#conditions table thead th.cat span::before {background-image: url("../images/icon_cat@2x.png");}
#conditions table tbody th {
	width: 25%;
	box-sizing: border-box;
}
#conditions table tbody td {
	width: 37.5%;
	box-sizing: border-box;
}
#conditions table tbody th {
	border-top: solid 2px #e6e6dc;
	background: #102e55;
	text-align: center;
	vertical-align: top;
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	font-size: min(140%,2.0vw);
	letter-spacing: .3em;
	line-height: 1.5em;
	padding: .9em 2%;
}
#conditions table tbody td {
	border-left: solid 2px #e6e6dc;
	background: rgba(255,255,255,0.5);
	text-align: center;
	vertical-align: middle;
	font-size: 105%;
	letter-spacing: .1em;
	line-height: 1.4em;
	padding: 1.0em 3%;
	position: relative;
}
#conditions table tbody td::before {
	content: "";
	position: absolute;
	width: 90%;
	max-width: 360px;
	height: 2px;
	background: #e6e6dc;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
}
#conditions table tbody tr:first-child td::before {
	display: none;
}
#conditions table tbody td ul,
#conditions table tbody td p {
	width: 100%;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#conditions .memo {
	margin-top: 1.0em;
}

#thanks .item_list {
	width: 85%;
	max-width: 1016px;
	margin-left: auto;
	margin-right: auto;
}
#thanks .item_list > li {
	background: #fff;
	padding: 45px 4%;
	margin-bottom: 80px;
	overflow: visible;
}
#thanks .item_list > li:last-child {
	margin-bottom: 0;
}
#thanks .item_list .tokuten {
	width: 100%;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
#thanks .item_list .tokuten > dt {
	font-size: min(170%,2.6vw);
	letter-spacing: .06em;
	line-height: 1.4em;
	min-height: 2.6em;
	margin-bottom: .8em;
	padding-left: 22%;
	position: relative;
}
#thanks .item_list .tokuten > dt::before {
	content: "";
	position: absolute;
	width: 16%;
	aspect-ratio: 1 / 1;
	left: 0;
	top: 0;
	transform: translateY(-50%);
	background: url("../images/blooddonation/tokuten01@2x.png") no-repeat center center;
	background-size: contain;
}
#thanks .item_list > li:nth-child(2) .tokuten > dt::before {background-image: url("../images/blooddonation/tokuten02@2x.png");}
#thanks .item_list > li:nth-child(3) .tokuten > dt::before {background-image: url("../images/blooddonation/tokuten03@2x.png");}

#update .item_list {
	width: 80%;
	max-width: 847px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
    justify-content: space-between;
}
#update .item_list li {
	width: 32%;
	max-width: 260px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#registration .title_box .com_marce21 {
	margin-bottom: .5em;
}
#registration .com_link1_list {
	margin-top: 6%;
}

#flow .tab-menu {
	letter-spacing: .2em;
}
#flow .tab-box > div {
	padding: 7% 3% 3%;
}
#flow .com_flow_list2 .inbox {
	padding-left: 4%;
	padding-left: 10%;
}
#flow .com_flow_list2 dt.fs30 {
	letter-spacing: .06em;
}
#flow .com_flow_list2 .tel_item {
	font-size: 1.6vw;
	letter-spacing: .05em;
}
#flow .com_flow_list2 .tel_item dt {
	width: 11.5em;
	text-align: left;
}
#flow .com_flow_list2 .tel_item dd {
	width: calc(100% - 11.5em);
}
#flow .com_flow_list2 .sub_box {
	margin-top: 4%;
	padding: 3% 0;
	
}
#flow .com_flow_list2 .sub_box .flow_style2 > dt {
	font-size: 2.2vw;
	letter-spacing: .06em;
}
#flow .com_flow_list2 .sub_box .list1 {
	letter-spacing: .05em;
}
#flow .com_flow_list2 .sub_box .list1 li {
	margin-bottom: .2em;
}

#conditions table tbody th {
	font-size: 2.3vw;
	letter-spacing: .1em;
}
#conditions table tbody td {
	font-size: 100%;
	letter-spacing: .05em;
}

#thanks .item_list {
	width: 85%;
}
#thanks .item_list > li {
	padding: 5% 4%;
	margin-bottom: 8%;
}
#thanks .item_list .tokuten > dt {
	padding-left: 21%;
}
#thanks .item_list .tokuten > dt::before {
	width: 18%;
}

#update .item_list {
	width: 90%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#registration .bg::before {
	width: 100%;	/*上影*/
	height: 12vw;
}
#registration .title_box .com_marce21 {
	margin-bottom: .5em;
}
#registration .com_link1_list {
	margin-top: 10%;
}

#flow .tab-menu {
	width: 100%;
	max-width: 100%;
	font-size: 90%;
	letter-spacing: normal;
}
#flow .tab-menu li {
	padding: 1.2em 0;
}
#flow .tab-box > div {
	padding: 10% 3% 4%;
}
#flow .com_flow_list2 .inbox {
	padding-left: 5%;
	padding-right: 5%;
}
#flow .com_flow_list2 .flt_box .img_l {
	float: none;
	width: 70%;
	max-width: 100%;
	margin: 0 auto .8em;
}
#flow .com_flow_list2 .flt_box .txt_r {
	float: none;
	width: 100%;
}
#flow .com_flow_list2 dt.fs30 {
	text-align: center;
	letter-spacing: .04em;
}
#flow .com_flow_list2 .tel_item {
	font-size: 80%;
	letter-spacing: normal;
	line-height: 1.4em;
	margin-bottom: 1.0em;
}
#flow .com_flow_list2 .tel_item dt {
	width: 7em;
	text-align: left;
}
#flow .com_flow_list2 .tel_item dd {
	width: calc(100% - 7em);
}
#flow .com_flow_list2 .com_cont_txt {
	font-size: 80%;
}
#flow .com_flow_list2 .txt_bottom {
	margin-top: 1.0em;
	text-align: left;
}
#flow .com_flow_list2 .sub_box {
	margin-top: 6%;
	padding: 6% 6%;
	
}
#flow .com_flow_list2 .sub_box .flow_style2 {
	display: block;
}
#flow .com_flow_list2 .sub_box .flow_style2 > dt {
	width: 100%;
	padding: 0;
	font-size: 130%;
	letter-spacing: .04em;
	line-height: 1.4em;
}
#flow .com_flow_list2 .sub_box .flow_style2 > dd {
	width: 100%;
	border-left: none;
	border-top: solid 1px rgba(16,46,85,0.2);
	margin-top: .5em;
	padding: 1.0em 0 0;
}
#flow .com_flow_list2 .sub_box .list1 {
	letter-spacing: normal;
}
#flow .com_flow_list2 .sub_box .list1 li {
	margin-bottom: .2em;
}
#flow .com_flow_list2 .sub_box .type_flex {
	display: block;
}
#flow .com_flow_list2 .sub_box .type_flex .type_item {
	width: 100%;
	margin-top: 1.0em;
	border-top: solid 1px #e6e6e6;
	padding-top: 1.2em;
}
#flow .com_flow_list2 .sub_box .type_flex .type_item:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

#conditions .sp_scrol {
	overflow-x: scroll;
}
#conditions table {
	width: 130%;
}
#conditions table thead td,
#conditions table tbody th {
	position: sticky !important;
	z-index: 1;
	left: 0;
}
#conditions table thead th {
	padding: .8em 0;
}
#conditions table tbody th {
	width: 22%;
}
#conditions table tbody td {
	width: 39%;
}
#conditions table tbody th {
	font-size: 110%;
	letter-spacing: .04em;
	padding: .9em 0;
}
#conditions table tbody td {
	font-size: 100%;
	letter-spacing: normal;
}
#conditions table tbody td ul,
#conditions table tbody td p {
	max-width: 100%;
}

#thanks .item_list {
	width: 100%;
}
#thanks .item_list > li {
	padding: 6% 6% 6%;
	margin-bottom: 8%;
}
#thanks .item_list .tokuten > dt {
	font-size: 135%;
	letter-spacing: normal;
	min-height: 2.0em;
	margin-bottom: .5em;
	padding-left: 20%;
}
#thanks .item_list .tokuten > dt::before {
	width: 25%;
	transform: translate(-40%,-50%);
}

#update .item_list {
	width: 100%;
    justify-content: center;
    flex-wrap: wrap;
	column-gap: 4%;
}
#update .item_list li {
	width: 48%;
	max-width: 100%;
}
#update .item_list li:last-child {
	margin-top: -2%;
}
}



/*closing
---------------------------------------------------------*/
#closing .swiper-slide {
	width: 40vw;
	max-width: 550px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#closing .swiper-slide {
	width: 70vw;
	max-width: 100%;
}
}



/*
---------------------------------------------------------*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}