@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html, body{
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 100%;
	max-width: 100%;
}
html{
	font-size: 62.5%;
}
body{
	color: #404040;
	font:400 1.6rem/1.9 'Noto Sans Japanese', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
body.fixed{position:relative;}
p,ul,li{
	margin:0;
	padding:0;
}
.align-r{text-align:right;}
.min{font-size:1.2rem;}
.indent{
	padding-left:1em;
	text-indent:-1em;
}
div.area p + p.indent,
div.area p + p.min,
div.area p + p.align-r{margin-top:0.5em;}
img.f_img{
	display:block;
	max-width:100%;
	margin:0 auto;
	padding:0;
}
div.area p + img{margin-top:40px;}

#wrapper{
	position:relative;
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
}
li {list-style: none;}
div.flex{display:flex;}

/********ヘッダー********/
header{
	position:relative;
	max-width:100%;
	padding:0;
	background:#fff;
	border-top:5px solid #F3B7BE;
	box-shadow:0 4px 4px rgba(0,0,0,0.1);
	z-index:200;
}
header div#header{
	max-width:1500px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:10px 20px;
	margin:0 auto;
}

/*****2020.07.23 追加　審J番号追記*****/
header div#header div.flex{
	display:flex;
	align-items:flex-end;
}

header div#header div.flex p.j_num{
	font-size:1.3rem;
	line-height:1;
	margin-left:1em;
}

header div#header a#logo{
	color:#222;
	line-height:1;
	text-decoration:none;
	transition:0.3s ease;
}
header div#header a#logo:hover{
	opacity:0.35;
	-ms-filter:"alpha(opacity35)";
}
header div#header a#logo img{
	max-width:100%;
	display:block;
	margin-bottom:10px;
}

/********共通リンク********/
ul.sub {
	display:flex;
	justify-content: flex-end;
	align-items:center;
	max-width:485px;
	margin:0;
	padding:0;
}
ul.sub li {
	margin:0 0 0 5px;
	padding:0;
	background:#fff;
}
ul.sub li:first-child{margin-left:0;}

ul.sub li a{
	display:flex;
	align-items:center;
	padding:5px 8px;
	transition:0.3s ease;
	box-shadow:0 0 4px rgba(0,0,0,0.1);

}
ul.sub li a:hover{
	opacity:0.35;
	-ms-filter:"alpha(opacity=0.35)";
}
ul.sub li:first-child a img{width:60px;}
ul.sub li:nth-child(2) a img{width:80px;}
ul.sub li:nth-child(3) a img{width:70px;}
ul.sub li:last-child a img{width:170px;}

ul.sub li a img{
	display:block;
	max-width:100%;
}

/********ナビゲーション********/
aside{
	position:relative;
	top:0;
	background:#fff;
	box-shadow:0 0 4px rgba(0,0,0,0.1);	
	width:300px;
	margin:0;
	padding:0;
	z-index:4;
}
aside.fixed{
	position:fixed;
	top:20px;
}
aside h2{
	position:relative;
	font-size:3rem;
	font-weight:500;
	line-height:1;
	background:#fafafa;
	padding:24px 20px 20px;
	margin:0 auto;
}
aside h2::before{
	position:absolute;
	content:"";
	top:0;
	left:0;
	display:inline-block;
	width:45px;
	height:4px;
	background:#06A3A2;
}
aside nav ul li{background:url("../img/n_line.png") left bottom -1px/22px repeat-x;}
aside nav ul li a{
	position:relative;
	display:block;
	color:#222;
	letter-spacing: 0;
	text-decoration:none;
	padding:14px 5px 17px 40px;
	margin:0 auto;
	transition:0.3s ease;
}
aside nav ul li a::before{
    position: absolute;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 6px;
    border-left: 6px solid rgba(0,0,0,0.5);
    left: 20px;
    top: 50%;
	margin-top:-6.5px;
}
nav ul li.current a,
aside nav ul li a:hover{background:rgba(6,163,162,0.15);}
aside nav ul li:last-child{background-image:none;}


/********コンテンツエリア********/
section.sec {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
section.sec.bk01 {
	width: 100%;
	margin: 0 auto;
	padding:50px 0 150px;
	background:url("../img/bk01.png") left top/40px repeat,#FFF2EB;
}
section.sec div.contents {
	max-width:1500px;
	margin: 0 auto;
	padding:0 20px;
}
div.area div.bk.gry{
	padding:80px 45px;
	margin:0 -45px;
	background:rgba(240,243,245,0.44);
	overflow:hidden;
}

section.sec div.flex_box{
	display:flex;
	justify-content:space-between;
	flex-direction:row-reverse;
	max-width:100%;
	margin:0 auto;
	padding:0;
}
section.sec div.flex_box > div:last-child{
	flex:300px;
	max-width:300px;
	margin-right:50px;
}
section.sec div.flex_box > div.main{
	flex:calc(100% - 350px);
	max-width:calc(100% - 350px);
	margin:0;
}

div.area{
	padding:55px 45px;
	margin:0 auto;
	background:#fff;
	border-radius:8px;
	box-shadow:0 0 4px rgba(0,0,0,0.1);
}
div.area p + p{margin-top:1.8em;}

div.area section + section{margin-top:80px;}

div.area h1{
	position:relative;
	font-size:2.8rem;
	font-weight:500;
	color:#212121;
	line-height:1.1;
	margin:0 auto;
	padding:0;
}
div.area h1 + p,
div.area h2 + h3{margin-top:40px;}
div.area h2 + p,
div.area h3 + p{margin-top:20px;}
div.area p + h2{margin-top:60px;}
div.area .l_p46{padding-left:46px;}

div.area h2{
	position:relative;
	font-size:2.4rem;
	color:#404040;
	font-weight:500;
	line-height:1;
	margin:0 auto;
	padding:0 0 0 1em;
}
div.area h2::before{
	position:absolute;
	content:"●";
	left:0;
	display:inline-block;
	color:#06a3a2;
}

/*ハートアイコン*/
div.area h2.h_icon{
	line-height:35px;
	padding:0 0 0 46px;
	height:35px;
}
div.area h2.h_icon::before{
	position:absolute;
	display:inline-block;
	content:"";
	left:0;
	top:6px;
	width:38px;
	height:100%;
	background:url("../img/about/heart_icon.png") left center no-repeat;
}
/*ボーダー*/
div.area h2.line{
	display:table;
	font-size:2.8rem;
	margin:0 auto;
	padding:0 0 20px;
}
div.area h2.line::before{
	position:absolute;
	display:inline-block;
	content:"";
	left:-2%;
	right:0;
	bottom:0;
	width:104%;
	height:100%;
	background:url("../img/h2_line.svg") left bottom repeat-x;
}
div.area h2.line.mw267::before{min-width:267px;}

div.area h3{
	color:#06a3a2;
	font-size:2.2rem;
	line-height:1.4;
	font-weight:500;
	margin:0 auto;
	padding:0;
}

/*チェックリスト*/
div.area ul.check_list{
	position:relative;
	margin:20px auto 0;
	padding-bottom:80px;
	padding-right:240px;
}
div.area ul.check_list.illust01::after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	display:inline-block;
	width:100%;
	height:100%;
	background:url("../img/about/illust01.png") top right/263.2px no-repeat;
}
div.area ul.check_list li{
	line-height:1.4;
	color:#404040;
	padding:4px 0 6px 36px;
	background:url("../img/about/check_icon.png") left center no-repeat;
}
div.area ul.check_list li + li{margin-top:15px;}

/*ポイント*/
div.area div.point{
	max-width:80%;
	padding:30px 35px;
	margin:0 auto;
	background:#fff;
	border:6px solid #f0f3f5;
}
div.area div.point{color:#3b4043;}

/*血が止まる仕組み*/
div.area div.flow{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content: center;
	max-width:936px;
	margin:60px auto 0;
	padding:0;
	overflow:hidden;
}
div.area div.flow div{position:relative;}
div.area div.flow > div{
	flex:31%;
	max-width:31%;
	margin-right:4%;
}
div.area div.flow > div:nth-child(2){
	flex:65%;
	max-width:65%;
	margin-right:0;
}

div.area div.flow > div > div{
	display:flex;
	justify-content: space-between;
}
div.area div.flow > div > div > div{margin-right:5%;}
div.area div.flow > div > div > div:last-child{margin-right:0;}

div.area div.flow > div img{
	position:relative;
	width:100%;
	max-width:276px;
	border:2px solid #98a6b5;
	box-sizing:border-box;
	vertical-align: bottom;
}
div.area div.flow > div:nth-child(3),
div.area div.flow > div:last-child{margin-top:40px;}


div.area div.flow > div::after{
    position: absolute;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border: 24px solid transparent;
	border-left-color: transparent;
	border-left-style: solid;
    border-left-width: 12px;
    border-left: 12px solid #3db7b6;
    left: 100%;
    top: 50%;
	margin-top:-12px;
	margin-left:6px;
}
div.area div.flow > div:nth-child(2)::after{left:48%;}
div.area div.flow > div:last-child::after{display:none;}
div.area div.flow > div > span{
	position:relative;
	display:table;
	color:#98a6b5;
	font-weight:500;
	margin:0 auto 5px;
	padding:0 0 0 25px;
}


/* ハート型 */
.heart-solid.icon {
	color:#98a6b5;
	position: absolute;
	left:0;
	top:0;
	margin-top: 11px;
	width: 9px;
	height: 9px;
	border-left: solid 1px currentColor;
	border-bottom: solid 1px currentColor;
	background-color: currentColor;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.heart-solid.icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -1px;
  width: 8px;
  height: 5px;
  border-radius: 5px 5px 0 0;
  border-top: solid 1px currentColor;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
  background-color: currentColor;
}
.heart-solid.icon:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-radius: 0 5px 5px 0;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  background-color: currentColor;
}

/*テーブルボックス*/
img.pc_img{
	display:block;
	width:100%;
	max-width:971px;
	margin:60px auto 0;
}
img.sp_img{display:none;}

div.td_box{
	max-width:768px;
	margin:20px auto 40px;
	padding:0;
}
div.area table{
	width:100%;
	margin:0 auto;
	padding:0;
	border:1px solid #ccc;
	border-collapse: collapse;
	box-sizing:border-box;
}
div.area table tr th,
div.area table tr td{
	text-align:center;
	padding:10px 12px;
	border:1px solid #ccc;
}
div.area table tr th{
	font-weight:500;
	background:#fff2eb;
}

/*どんな検査？*/
div.area p.read{
	font-size:1.8rem;
	font-weight:500;
}
div.flex.inspection{
	display:flex;
	justify-content: space-between;
	margin:20px auto 40px;
}
div.flex.inspection > div{
	display:flex;
	align-items:center;
	text-align:center;
	flex:25%;
	max-width:25%;
	height:10vw;
	padding:10px 40px;
	box-sizing:border-box;
}

div.flex.inspection.no01 > div{background:url("../img/inspection/gradient.png") center/cover no-repeat;}
div.flex.inspection.no02 > div{background:url("../img/inspection/gradient02.png") center/cover no-repeat;}

div.flex.inspection > div p{
	width:100%;
	color:#666;
	font-size:1.4rem;
	font-weight:500;
	line-height:1.6;
}
div.flex.inspection > div p span{
	display:block;
	font-size:1.2rem;
}

div.area p.illust{
	position:relative;
	padding-right:374px;
	min-height:227px;
}
div.area p.illust::after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	display:inline-block;
	width:100%;
	height:100%;
	z-index:0;
	background:url("../img/inspection/illust.png") right top 0.5em no-repeat;
}

/********フッター********/
section.sec.pagetop div.contents{position:relative;}
a#pagetop {
	position:absolute;
	display:block;
	right:20px;
	width: 195px;
	text-align:center;
	color:#fff;
	line-height:1;
	text-decoration:none;
	background:#06a3a2;
	border-radius:6px 6px 0 0;
	transition:0.3s ease;
	z-index:50;
}
a#pagetop span{
	position:relative;
	display:table;
	margin:0 auto;
	padding:15px 30px 16px 0;
	background:url(../img/pagetop@2x.png) right center/20px no-repeat;
}
a#pagetop:hover{
	opacity:0.35;
	-ms-filter:"alpha(opacity35)";
}

/********共通リンク********/
footer ul.sub {
	position:absolute;
	max-width:400px;
	left:20px;
	z-index:50;
}

footer{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:10px 0;
	text-align:center;
}
footer a{
	display:table;
	margin:0 auto;
	padding:0;
}
footer a img{
	display:block;
	width:100%;
	}
footer p{
	color:#666;
	text-align:center;
	line-height:1em;
}

div.mb_-55{margin-bottom:-55px !important;}
br.pc{display:inline;}
br.sp{display:none;}

@media screen and (max-width: 1380px) {
	
/*血が止まる仕組み*/
div.area div.flow > div::after{margin-left:0.8vw;}
div.area div.flow > div:nth-child(2)::after{margin-left:0.4vw;}
	
}

@media screen and  (min-width: 1025px) and (max-width: 1280px) {
/*どんな検査？*/
div.flex.inspection > div{
	height:8vw;
	padding:10px;
	}	
div.flex.inspection > div p{
	font-size:1vw;
}
div.flex.inspection > div p span{
	font-size:1rem;
}	
	
}

@media screen and (max-width: 1112px) {
	
/*どんな検査？*/
div.area p.illust{
	padding-right:307px;
	min-height:182px;
}
div.area p.illust::after{background:url("../img/inspection/illust.png") right top 0.5em/267.2px no-repeat;}	
	
}

/* TB & SP */
@media screen and (max-width: 1024px) {
body.fixed{position:fixed;}	
/********ヘッダー********/		
header div#header{
	height:100px;
	padding:0 20px;
	}
#header ul.sub{display:none;}

/********ナビゲーション********/	
aside,
aside.fixed{
	display:block;
	position:relative;
	width:100%;
	top:0;
	margin-top:0;
}
aside#sp_menu.open h2{display:none;}
aside#sp_menu.open{
	display:block;
	position: fixed;
	top: 105px;
	left:0;
	right:0;
	background: #fff;
	height:100%;
	margin: 0;
	padding: 0;
	width: 100%;
	z-index: 10;
}
	

/********コンテンツエリア********/
section.sec.bk01 {padding-bottom:80px;}	
section.sec div.flex_box{display:block;}
section.sec div.flex_box > div:last-child{
	flex:100%;
	max-width:100%;
	margin:40px auto 0;
}
section.sec div.flex_box > div.main{
	flex:100%;
	max-width:100%;
	margin:0 auto;
}
div.area{padding:35px;}
div.area section + section{margin-top:60px;}	
div.area p + p{margin-top:1.5em;}	
div.area div.bk.gry{
	padding:50px 35px;
	margin:0 -35px;
}	
	
/*血が止まる仕組み*/	
div.area div.flow > div::after{margin-left:1vw;}

/*どんな検査？*/
div.flex.inspection > div{
	height:13vw;
	padding:10px 30px;
}
	
div.mb_-55{margin-bottom:-35px !important;}
	
/*フッター*/
a#pagetop {width: 120px;}
a#pagetop span{
	font-size:1.4rem;
	padding:12px 20px 13px 0;
	background:url(../img/pagetop@2x.png) right center/14.1px no-repeat;
}	
/********共通リンク********/
ul.sub li:first-child a img{width:42px;}
ul.sub li:nth-child(2) a img{width:56px;}
ul.sub li:nth-child(3) a img{width:49px;}
ul.sub li:last-child a img{width:119px;}
		
	
}

@media screen and (max-width: 767px) {

/*****2020.07.23 追加　審J番号追記*****/
header div#header div.flex p.j_num{
	font-size:1.4rem;
	margin-left:0.5em;
}
	
/********コンテンツエリア********/
div.area h1{font-size:2.4rem;}
div.area h1 + p,
div.area h2 + h3{margin-top:30px;}
div.area h2{font-size:2rem;}	
div.area h3{font-size:1.8rem;}	
	
/*ハートアイコン*/
div.area h2.h_icon{
	height:30px;
	line-height:30px;
	padding-left:38.4px;
	}
div.area h2.h_icon::before{
	top:4px;
	width:30.4px;
	background:url("../img/about/heart_icon@2x.png") left center/30.4px no-repeat;
}	

/*ボーダー*/	
div.area h2.line{
	font-size:2.4rem;
	padding:0 0 20px;
	}	
div.area h2.line::before{
	width:100%;
	left:0;
	height:7px;
	background:url("../img/h2_line.svg") left bottom/220px no-repeat;
}
	
img.pc_img{display:none;}
img.sp_img{
	display:block;
	width:100%;
	max-width:377px;
	margin:40px auto 0;
	}
	
/*どんな検査？*/
div.area p.read{font-size:1.6rem;}
div.flex.inspection{flex-wrap:wrap;}	
div.flex.inspection > div{
	flex:50%;
	max-width:50%;
	height:199px;
	padding:0 20px;
}
	
div.flex.inspection.no01 > div{background:url("../img/inspection/gradient@2x.png") center/cover no-repeat;}
div.flex.inspection.no02 > div{background:url("../img/inspection/gradient02@2x.png") center/cover no-repeat;}
	
	
div.flex.inspection > div p{font-size:1.6rem;}
div.flex.inspection > div p span{font-size:1.2rem;}
	
	
br.pc{display:none;}
br.sp{display:inline;}
	
}

/* SP */
@media screen and (max-width: 640px) {
/********ヘッダー********/	
header div#header{
	height:80px;
	padding:0 10px;
	}	

/*****2020.07.23 追加　審J番号追記*****/
header div#header div.flex{
	flex-direction: column;
	align-items: flex-start;
	}

header div#header div.flex p.j_num{
	font-size:1.2rem;
	margin:0.5em 0 0;
}	
	
header div#header a#logo{font-size:1.2rem;}	
header div#header a#logo img{
	max-width:90%;
	margin-bottom:6px;
	}	
	
/********ナビゲーション********/	
aside#sp_menu.open{top:85px;}
section.sec div.flex_box > div:last-child{margin-top:20px;}	
	
/********コンテンツエリア********/	
section.sec.bk01 {padding-top:20px;}
section.sec.wap div.contents{padding:0;}		
div.area{
	padding:40px 20px;
	border-radius:0;
	}

div.area div.bk.gry{
	padding:40px 20px;
	margin:0 -20px;
}
div.area p + p{margin-top:1em;}	
div.area h1 + p,
div.area h3 + p{margin-top:20px;}
div.area p + h2{margin-top:40px;}	
	
div.area .l_p46{padding-left:0;}

/*ハートアイコン*/
div.area h2.h_icon{
	display:table;
	margin:0 auto;
	}
	
/*ボーダー*/	
div.area h2.line{
	font-size:2rem;
	padding:0 0 18px;
	}	
div.area h2.line.mw267::before{
	min-width:190px;
	left:-2%;
	}
	
/*チェックリスト*/
div.area ul.check_list{
	padding:0;
	padding-bottom:460px;
}
div.area ul.check_list.illust01::after{background:url("../img/about/illust01@2x.png") bottom 20px center/376px no-repeat;}
div.area ul.check_list li{background:url("../img/about/check_icon@2x.png") left center/26px no-repeat;}
div.area ul.check_list li + li{margin-top:10px;}
/*ポイント*/
div.area div.point{
	max-width:100%;
	padding:20px 25px;
}
div.mb_-55{margin-bottom:-40px !important;}
	
/*血が止まる仕組み*/
div.area div.flow{
	display:block;
	margin:20px auto 0;
	padding:0;
}
div.area div.flow > div,
div.area div.flow > div:nth-child(2){
	max-width:100%;
	margin:0 auto;
}
	
div.area div.flow > div > div{display:block;}
div.area div.flow > div > div > div,
div.area div.flow > div > div > div:last-child{margin-right:0;}
	
div.area div.flow > div img{
	display:block;
	margin:0 auto;
}
div.area div.flow > div:nth-child(2),	
div.area div.flow > div:nth-child(3),
div.area div.flow > div:last-child,
div.area div.flow > div > div > div:last-child{margin-top:40px;}
	
div.area div.flow > div::after,
div.area div.flow > div > div > div::after{
    position: absolute;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border: 24px solid transparent;
	border-top-color: transparent;
	border-top-style: solid;
    border-top-width: 12px;
    border-top: 12px solid #3db7b6;
    left:50%;
    top:auto;
	bottom:-50px;
	margin:0 0 0 -24px;
}
div.area div.flow > div:nth-child(2)::after{
	left:50%;
	margin:0 0 0 -24px;
	}	
div.area div.flow > div > div > div:last-child::after{display:none;}	
	
/*テーブルボックス*/
div.td_box{margin:10px auto 20px;}
div.area table tr th,
div.area table tr td{padding:6px 8px;}
div.area table tr td:first-child{width:80px;}	
div.area table tr td:last-child{text-align:left;}	
	
div.area p + img{margin-top:20px;}

/*どんな検査？*/
div.flex.inspection{margin:20px auto;}	
div.flex.inspection > div{
	flex:50%;
	max-width:50%;
	height:170px;
	padding:0 40px;
}	
div.flex.inspection > div p{font-size:1.4rem;}
div.flex.inspection > div p span{font-size:1.2rem;}
div.area p.illust{
	padding:0 0 247px 0;
	min-height:auto;
}
div.area p.illust::after{background:url("../img/inspection/illust.png") center bottom no-repeat;}	

/********共通リンク********/
ul.sub li:first-child a img{width:30px;}
ul.sub li:nth-child(2) a img{width:40px;}
ul.sub li:nth-child(3) a img{width:35px;}
ul.sub li:last-child a img{width:85px;}
	
}

/* SP */
@media screen and (max-width: 480px) {
p{font-size:1.4rem;}	
/********ヘッダー********/	
header div#header a#logo img{max-width:324.8px;}	

/********ナビゲーション********/	
aside h2{font-size:2rem;}
aside nav ul li a{font-size:1.4rem;}
		
/********コンテンツエリア********/	
div.area{border-radius:0;}
div.area h1{font-size:2.2rem;}
	
/*チェックリスト*/
div.area ul.check_list{padding-bottom:360px;}
div.area ul.check_list.illust01::after{background:url("../img/about/illust01@2x.png") bottom 10px center/300.8px no-repeat;}
div.area ul.check_list li{
	font-size:1.4rem;
	padding-left:28.8px;	
	background:url("../img/about/check_icon@2x.png") left top 0.5rem/20.8px no-repeat;
	}

/*テーブルボックス*/
div.area table tr th,
div.area table tr td{font-size:1.4rem;}
div.area table tr td:first-child{width:60px;}

/*どんな検査？*/
div.flex.inspection > div{
	height:130px;
	padding:0 30px;
}	
div.flex.inspection > div p{font-size:1.3rem;}
div.flex.inspection > div p span{font-size:1.1rem;}

	
}

@media screen and (max-width: 420px) {
/*どんな検査？*/
div.flex.inspection > div{height:120px;}	
div.flex.inspection > div p{line-height:1.4;}
	
/********共通リンク********/
ul.sub li:first-child a img{width:24px;}
ul.sub li:nth-child(2) a img{width:32px;}
ul.sub li:nth-child(3) a img{width:28px;}
ul.sub li:last-child a img{width:68px;}	
	
}

/* SP */
@media screen and (max-width: 380px) {
/********ヘッダー********/	
header div#header a#logo img{max-width:278.4px;}	
	
		
}