@charset "utf-8";

/**
 *
 * style.css
 *
 */

/*====================================================================
   // リセット＆タグ設定
====================================================================*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}
body,div,dl,dt,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td,article,aside,details,figcaption,footer,header,hgroup,menu,nav,section,summary {
	margin:0;
	padding:0;
	line-height:1.32; 
}
li {
	margin:0;
/* 	padding:0.1em 0; */
	line-height:1.2;
	list-style-type:none;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
}
caption,th {
	text-align:left;
}
q:before,q:after {
	content:'';
}
hr,legend {
	display:none;
}
img,abbr,acronym,fieldset {
	border:0;
}
html {
/* 	overflow-y:scroll; */
	font-size:10px; /* 基準サイズ（IE8以下を除き,これは全体に影響する） */
}
h1    { font-size:2.6rem; font-weight:bold; margin:0.8em 0 0.2em; }
h2    { font-size:2.4rem; font-weight:bold; margin:0.8em 0 0.2em; }
h3    { font-size:2.0rem; font-weight:bold; margin:0.8em 0 0.2em; }
h4    { font-size:1.8rem; font-weight:bold; margin:0.8em 0 0.2em; }
h5,h6 { font-size:1.6rem; font-weight:bold; margin:0.8em 0 0.2em; }

table {
	font-size:inherit;
	table-layout:fixed;
	border-collapse:collapse;
	border-spacing:0;
}
table th {
	background-color:#ddd;
	padding:1px;
	border:1px solid #888;
	text-align:center;
}
table td {
	border:1px solid #aaa;
	padding:1px;
}
pre,code,kbd,samp,tt {
	font-family:monospace;
	line-height:1.1;
}
select,input,button,textarea {
	font:99% arial,helvetica,clean,sans-serif;
}
body {
	font-family:"メイリオ", Meiryo, verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size:1.4rem;
/* 	background-color:#FFFACF; */
	color:#000;
	-webkit-text-size-adjust:100%;  /* スマートフォンの表示崩れ対策 */
}
a {
	text-decoration:none;
	overflow:hidden;
/* 	color:#001ea1; */
	color:#336699;
	color:#000;
}
a:hover {
/* 	text-decoration:underline; */
/* 	color:#3300CC; */
	opacity:0.7;
}

header,footer {
	text-align:center;
}

/*====================================================================
   // 基本設定・共有設定
====================================================================*/
.error {
	color:red;
}
.button,
input[type="submit"],
input[type="button"] {
	display:inline-block;  /* .button用 */
	margin-bottom:-0.5em;
	padding:0.5em 1em 0.25em;
	border:none;
	border-radius:0.3em;
	box-shadow:0 0.25em 0 0 rgba(100,100,100,1.0);
	background-color:#ccc;
	line-height:1.0;
	text-align:center;
}
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	opacity:0.8;
}
.hid {
	display:none;
}
.h-indent-1 {
	margin-left:1em;
	text-indent:-1em;
}

/*====================================================================
   // ページ設定
====================================================================*/

/*全体 -------------------------------------------------------*/
html{
	overflow-x: hidden;
	height: 100%;
	width: 100%;
}
body{
	overflow-x: hidden;
}
section{
	max-width: 880px;
	min-width: 320px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}
section h2{
	font-size: 3.6rem;
	font-weight: bold;
	color: #009F3C;
	margin: 0;
	padding: 40px 0 20px;
}
section h3{
	font-size: 2.0rem;
	font-weight: normal;
	line-height: 40px;
	border-bottom: solid 1px #959595;
}
section h4{
	font-size: 1.8rem;
	line-height: 26px;
	font-weight: bold;
}
section p{
	font-size: 1.6rem;
	padding: 0 0 16px;
}

/*ヘッダー -------------------------------------------------------*/

header h1{
	margin: 0 auto;
	padding: 0;
	max-width: 1340px;
	height: 340px;
	line-height: 0;
	text-indent: -9999px;
	background: url(/scn/img/title_img.png) no-repeat;
	background-position: center ;
	background-size:cover;
}
header p{
	max-width: 900px;
	font-size: 2.2rem;
	line-height: 3.4rem;
	margin: 40px auto 40px;
	padding: 0 52px;
}
header .attention{
  color: red;
  border: 3px solid red;
  border-radius: 6px;
  max-width: 840px;
  margin: 0 auto 80px;
  padding: 32px;
}
header .attention h3{
  border: 0;
  margin: 0;
  font-size: 2.4rem;
  font-weight: bold;
}
header .attention p{
  margin: 0;
  padding: 12px 24px 0;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: left;
  color: #000;
}
#forR a{
	background-color: #0075bd;
	margin: 32px auto 8px;
	padding: 16px 12px;
	color: #FFF;
	border-radius: 4px;
	font-size: 2.0rem;
	position: relative;
	display: block;
	width: 460px;
}
#forR a::after{
	content: '›';
	font-size: 3.0rem;
	position: absolute;
	top: 9px;
	right: 12px;
}

header .attention .asterisk{
  font-size: 1.4rem;
}
/*ナビ -------------------------------------------------------*/

nav{
	clear: both;
	height: 60px;
	background-color: #009F3C;
}
#main_nav.fxd {
	position:fixed;
	top:0;
	width:100%;
}
#main_nav.fxd + p { 
	margin-top: 100px;
}
#main_nav h2 {
	display:none;  /* モバイルのみで使用⇒PC/モバイル表示判定にも使用 */
}
#main_nav #mn_list {
	max-width:960px;
	min-width: 767px;
	margin:0 auto;
/* 	transition:transform .2s; */
	display: flex;
	justify-content: space-around;
}
#main_nav #mn_list li {
	font-size: 1.8rem;
	font-weight: bold;
}
#main_nav #mn_list a {
	display:block;
	line-height:60px;
/* 	background-color:#666; */
	color:#fff;
/*	border-right:0.5px solid #444;*/
}
#main_nav #mn_list a:hover {
	opacity:0.8;
	text-decoration-line: none;
}

/*モニタリング -------------------------------------------------------*/

#moni{
	background-color: #EFEFEF;
	margin:0 -200%;
	padding:0 200% 40px;
}
#moni img{
	width: 100%;
	max-width: 796px;
	margin: 10px 0 24px;
}
/*#moni p .comments{
	font-size: 1.0rem;
}*/
#manu_cont{
	display: flex;
	justify-content: center;
	padding: 20px;
}

#manu_cont a{
	display: block;
	margin: 0 10px; 
	padding:60px 20px 16px;
	border: solid 4px #C7C7C7;
	border-radius: 10px;
	font-size: 2.0rem;
	font-weight: bold;
	background: url(/scn/img/ico_pdf.png) no-repeat;
	background-position: center 8px;
	background-color: #FFF;
}
#manu_cont span{
	font-weight: normal;
}
.asterisk a{
	border-bottom: solid 1px #336699;
	color: #336699;
}

/*地震あんしんカルテ -------------------------------------------------------*/

#karte{
	background-color: #FFF;
	margin:0 -200%;
	padding:0 200% 40px;
}
#karte img{
	display: inline-block;
	max-width: 300px;
	margin: 4px 10px 24px;
}
#karte_cont{
	display: flex;
	flex-wrap: wrap;
}
#karte_cont li{
	width: 50%;
}
#karte_cont a{
	display: block;
	margin: 20px 3.5% 0;
	padding:4px 16px 12px;
	border: solid 4px #C7C7C7;
	border-radius: 10px;
}
#karte_cont h4{
	font-size: 1.9rem;
}
#karte_cont p{
	padding: 0;
}
#karte .asterisk{
	margin-top: 20px;
}
.cont_link{
	margin-top: 8px;
	padding: 0;
	line-height: 40px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #009F3C;
	background-color: #E5F9DB;
}

/*モニター参加 -------------------------------------------------------*/

#join{
	background-color: #EFEFEF;
	margin:0 -200%;
	padding:0 200% 40px;
}
#join .attention{
  color: red;
  font-weight: bold;
/*  border: 3px solid red;
  border-radius: 4px;*/
  margin: -10px auto 32px;
  width: 300px;
}
#moni_flow{
	text-indent: -9999px;
	background: url(/scn/img/flow_img.png) no-repeat;
	background-size: contain;
	background-position: center;
	height: 100%;
	font-size: 1.8rem;
	margin: 4px 0;
	padding: 0;
}
.flex{
	display: flex;
	justify-content: center;
	margin: 52px 0 64px;
}
.flex li{
	width: 310px;
	height: 67px;
	font-size: 2.4rem ;
	font-weight: bold;
	line-height: 72px;
}
.flex li:hover{
	opacity: 0.8;
}
.flex li:first-child:hover{
	opacity: 1;
}
.flex a{
	display: block;
}
.flex li:first-child a{
	display: inline;
}
.flex li:first-child a:hover{
	opacity: 1;
}
.flex p{
	font-weight: normal;
	font-size: 1.4rem;
}
#link_join{
	background:url(/scn/img/btn_green.png) no-repeat;
	margin-right: 24px;
}
#link_join a{
	color: #FFF;
}
#link_cancel{
	background:url(/scn/img/btn_white.png) no-repeat;
	margin-left: 24px;
}
#link_cancel a{
	color: #323232;
}
#continue{
	display: flex;
	text-align: left;
	padding: 0 ;
}
.left{
	width: 68%;
	margin:0 1% 0 1%;
}
#continue h3{
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 2.6rem;
	border: hidden;
}
#continue .left p{
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 2.4rem;
}
#continue_link{
	font-size: 2.0rem;
	font-weight: bold;
	margin: auto ;
	line-height: 0.4rem;
}
#continue_link a{
	border-bottom: solid 2px #336699;
	padding: 0 6px;
	color: #336699;
}

/*Qmagazine -------------------------------------------------------*/

#qmaga{
	background-color: #FFF;
	margin:0 -200%;
	padding:0 200% 40px;
}
#qmaga h2{
	padding-bottom: 36px;
	line-height: 3.4rem;
}
#qmaga span{
	font-size: 1.6rem;
	line-height: 0.6rem;
}
#qmaga_cont{
	display: flex;
	flex-wrap: wrap;
	padding: 20px 0;
}
#qmaga_cont li{
	margin: 0 20px 20px 0;
	width: 280px;
}
#qmaga_cont li:nth-child(3),#qmaga_cont li:nth-child(6){
	margin-right: 0;
}
#qmaga_cont li a{
	display: block;
}
#qmaga_cont h4{
	font-size: 1.6rem;
	font-weight: normal;
	margin: 2px 0;
}
#qmaga_cont p{
	margin: 0;
	font-size: 2.0rem;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*フッター -------------------------------------------------------*/

.overwidth_gray{
	margin:0 -200%;
	padding:68px 200% 40px;
	background-color: #EFEFEF;
	text-align: center;
}
.overwidth_gray p{
	font-size: 2.4rem;
}
footer a{
	color: #323232;
	display: block;
	width:100%;
	height:100%;
	position:relative;
}
footer a:hover{
	text-decoration-line: none;
}
footer ul {
	max-width: 920px;
	margin:1.5rem  auto 0;
	text-align:center;
}
footer ul li {
	display:inline-block;
	font-size:1.1rem;
	padding:0 5px;
}
#copyright{
	font-size: 1.2rem;
	max-width: 920px;
	line-height: 35px;
	border-top: 1px solid #323232;
	margin: 1px auto 20px;
}
#inquiry a{
	margin:0 auto 6px;
	width: 600px;
	height: 60px;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 62px;
	background-image: url(/scn/img/mail_aicon.svg);
	background-repeat: no-repeat;
	background-size: auto 26px;
	background-position: 200px 17px;
	background-color: #FFF;
}
#inquiry a:hover{
    opacity:0.8;
}
#inquiry p{

}
#name{
	font-size: 20px;
	font-weight: bold;
}
.overwidth_gray  .asterisk{
	font-size: 1.4rem;
}
#white{
	padding:0 20px;
}
#h_logo{
	text-indent: -9999px;
}
#h_logo_w{
	width: 152px;
	margin: 0 auto;
}


/* =================================================================
   表示幅違いに対応するメディアクエリ
==================================================================== */
/* 979px以下用(タブレット用)の記述 ----------------------- */
/* @media screen and (max-width:979px) {
} */
@media screen and (max-width:979px) {

	#qmaga_cont{
		justify-content: space-between;
		margin:0 60px;
		padding: 12px 32px;
	}
	#qmaga_cont li:nth-child(3),#qmaga_cont li:nth-child(6){
		margin-right: 20px;
	}
	}
	
/* 767px以下用(タブレット／スマートフォン用)の記述 -------- */
@media screen and (max-width:767px) {
	
	
	/*全体 -------------------------------------------------------*/
	html{
		overflow-x: hidden;
		height: 100%;
		width: 100%;
	}
	body{
		overflow-x: hidden;
		min-width: calc(320px - 6%);
	}
	
	section {
		max-width:767px;
		min-width: 290px;
		padding: 0 15px;
	}
	section h2{
		font-size: 2.6rem;
		color: #009F3C;
	}
	section h3{
		font-size: 1.6rem;
		line-height: 24px;
		padding: 0 8px 12px;
		border-bottom:none;
	}
	section h4{
		font-size: 1.8rem;
		line-height: 26px;
		font-weight: bold;
	}
	section p{
		font-size: 1.5rem;
		padding: 0 0 16px;
	}
	.asterisk{
		font-size: 1.2rem;
	}
		
	br.valid_mb {
		display:inline-block;
	}
	br.invalid_mb {
		display:none;
	}
	#main_nav::before {
		content:'';
		position:fixed;
		top:0;
		left:0;
		margin:0 auto;
		width:calc(100% - 26px);
		min-width:294px;  /* 320-26 */
		height:19px;
		border:13px solid #323232;
		background:#323232 url(../img/hakusan_logo.svg) no-repeat right;
		background-size:contain;
		z-index:2;
	}
	#main_nav {
		position:fixed;
		top:0;
		width:100%;
		height:45px;
		z-index:2;
		overflow:hidden;
		background-color:transparent;
	}
	
	/* ハンバーガーメニュー --------------- */
	#main_nav h2 {
		display:block;  /* モバイルのみで使用⇒PC/モバイル表示判定にも使用 */
		margin:0;
		position:absolute;
		top:0;
		left:0;
		width:55px;
		height:45px;
		line-height:1.0;
		color:#fff;
		z-index:2;
		text-indent:-9999px;
	}
	#main_nav h2 span {
		display:inline-block;
		position:absolute;
		right:12.5px;
		width:30px;
		height:4px;
		background-color:#fff;
		transition:all .2s;
	}
	#main_nav #br1 {
		top:12px;
	}
	#main_nav #br2 {
		top:21px;
	}
	#main_nav #br3 {
		top:30px;
	}
	#main_nav #mn_list {
		display:block;   
		height:calc(100% - 45px);
		width:90%;
		min-width:288px;
		max-height:100%;
		position:absolute;
		left:-100%;
		padding-top:45px;
		overflow-y:hidden;
		background-color:rgba(50,50,50,0.8);
		transition:left .3s;
	}
	#main_nav #mn_list li {
		float:none;
		width:75%;
		min-width:240px;
		margin:0 auto;
		padding: 10px 0;
		border-bottom:1px solid #c8c8c8;
	}
	#main_nav #mn_list a {
		padding:0 0.5em;
		text-align:left;
		font-size:2.0rem;
		font-weight:bold;
		line-height:40px;
		border-right:none;
	}
	/* 展開されたメインナビ --------------- */
	
	#main_nav.active {
		height:100%;   /* オーバーレイ化する */
	}
	#main_nav.active #mn_list {
		overflow-y:auto;
		left:0;
	}
	#main_nav.active #br1 {
		transform:translateY(9px) rotate(-135deg);
	}
	#main_nav.active #br2 {
		opacity:0;
	}
	#main_nav.active #br3 {
		transform:translateY(-9px) rotate(135deg);
	}
	
	/*ヘッダー -------------------------------------------------------*/
		
	header{
		height: auto;
		margin-top: 45px;
	}
	header h1{
		padding-bottom: 16%;
		max-width: 770px;
		max-height: 220px;
		height:135px;
		background: url(/scn/img/title_img_sm.png) no-repeat;
		background-size:140%;
		background-position: center;
	}
	header p{
		max-width: 767px;
		font-size: 1.9rem;
		color: #FFF;
		line-height:2.9rem;
		margin: 0;
		padding: 32px 8%;
		background-color: #009F3C;
	}
  header .attention{
		margin: 20px 16px;
	}
  header .attention h3{
		font-size: 2.0rem;
    line-height: 1.4;
	}
  header .attention p{
		background-color: #fff;
    padding: 0;
	}

	/*ナビ -------------------------------------------------------*/
		
	/*モニタリング -------------------------------------------------------*/

	#moni h3{
		margin: 0;
		padding: 0;
	}
	#manu_cont{
		display:list-item;
		padding: 0;
		margin: 14px 0;
		text-align: left;
		list-style-type:none;
	}
	#manu_cont li{
		padding: 20px 0 ;
		border-top: solid 1px #C8C8C8;
		border-bottom: solid 1px #C8C8C8;
		margin-top: -1px;
	}
	#manu_cont a{
		display: block;
		margin: 0 10px; 
		padding:0 26px 0 0;
		border: 0;
		border-radius: 0;
		font-size: 1.8rem;
		font-weight: bold;
		background: url(/scn/img/next.png) no-repeat;
		background-size: 16px;
		background-position: right center;
	}
	#manu_cont span{
		font-weight: normal;
		font-size: 1.6rem;
	}
	.asterisk a{
		border-bottom: solid 1px #336699;
		color: #336699;
	}

		
	/*地震あんしんカルテ -------------------------------------------------------*/
	
	#karte img{
		width: 70%;
		margin: 4px 10px ;
	}
	#karte h3{
		margin: 40px auto 0px;
	}	
	#karte_cont{
		display: list-item;
		list-style-type: none;
	}
	#karte_cont li{
		width: 100%;
		text-align: left;
		padding: 6px 0 16px;
		border-top: solid 1px #C8C8C8;
		border-bottom: solid 1px #C8C8C8;
		margin-top: -1px;
		background: url(/scn/img/next.png) no-repeat;
		background-size: 16px;
		background-position: right center;
	}
	#karte_cont a{
		display: block;
		margin: 0;
		padding:0 12px;
		border: 0;
		border-radius: 0;
	}
	#karte_cont h4{
		font-size: 1.8rem;
	}
	#karte_cont p{
		padding: 0;
		font-size: 1.8rem;
	}
	#karte_cont .cont_link{
		display: none;
	}
	#karte .asterisk{
		margin: 12px 10px 0;
	}
	
	/*モニター参加 -------------------------------------------------------*/
	
	#join{
		background-color: #EFEFEF;
		margin:0 -200%;
		padding:0 200% 68px;
	}
	#moni_flow{
		background: url(/scn/img/flow_img_sm.png) no-repeat;
		background-size:contain;
		background-position: center;
		min-width: 280px;
		width: auto;
		margin: 0;
		padding:10% 0;
		background-color: #FFF;
		border-radius: 6px;
	}
	.flex{
		display:list-item;
		justify-content:center;
		list-style-type: none;
		margin: 32px 0 40px;
		padding: 0;
			
	}
	.flex li{
		min-width: 200px;
		min-height: 40px;
		font-size: 2.0rem;
		line-height: 60px;
		margin: 0 auto;
		padding:0;
		width: 100%;
	}
	.flex li:hover{
		opacity: 0.8;
	}
	#link_join{
		margin: 6% 0 3%;
		padding:  0;
		background-size: 280px auto;
		background-position: center;
	}
	#link_cancel{
		margin: 0;
		padding:  0;
		background-size: 280px auto ;
		background-position: center;
	}
	.flex a{
		display:block;
		width: auto;
		line-height: 66px;
	}
	.flex p{
		font-weight: normal;
		font-size: 1.2rem;
	}
	#link_join a{
		color: #FFF;
	
	}
	#link_cancel a{
		color: #323232;
	}
	#continue{
		display:block;
		text-align: left;
		padding:12px 0 0 ;
	}
	.left{
		width: 100%;
		margin:0 ;
	}
	#continue h3{
		font-size: 1.7rem;
		font-weight: bold;
		line-height: 2.3rem;
		text-align: center;
		border: hidden;
		padding:0 0 8px ;
	}
	#continue .left p{
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 2.2rem;
		margin: 0 2% 18px;
		text-align: center;
	}
	#continue_link{
		font-size: 2.0rem;
		font-weight: bold;
		margin: auto ;
		line-height: 0.4rem;
		text-align: center;
	}
	#continue_link a{
		border-bottom: solid 2px #336699;
		padding: 0 6px;
		color: #336699;
	}

	/*Qmagazine -------------------------------------------------------*/
	
	#qmaga{
		padding-bottom: 40px;
	}
	#qmaga h2{
		padding-bottom: 36px;
		line-height: 2.4rem;
	}
	#qmaga span{
		font-size: 1.2rem;
	}
	#qmaga_cont{
		display:block;
		margin: 0;
	}
	#qmaga_cont li{
		margin: -1px auto 0;
		padding: 20px 0;
	}
	#qmaga_cont h4{
		font-size: 2.0rem;
		margin: 0;
		padding: 4px 0;
	}
	#qmaga_cont p{
		margin: 0;
		font-size: 1.6rem;
		padding:  0 ;
	}
	#qmaga_cont a{
		text-align: left;
		margin: 0;
		padding:0;
	}
	#qmaga_cont li:nth-child(3),#qmaga_cont li:nth-child(6){
		margin: 0 auto;
	}
	
	/*フッター -------------------------------------------------------*/

	footer{
		background-color: #EFEFEF;
		padding: 20px 0 0;
	}
	.overwidth_gray{
		padding: 0 0 16px;
		margin: 10px 0 0;
		width: 100%;
		background-color: #EFEFEF;
	}
	.overwidth_gray p{
		font-size: 1.6rem;
		margin: 0;
		padding: 0 ;
		line-height: 22px;
	}
	.overwidth_gray #name{
		font-size: 1.6rem;
		line-height: 22px;
	}
	.overwidth_gray .asterisk{
		font-size: 1.2rem;
		line-height: 16px;
		padding: 10px;
	}
	#white{
		background-color: #FFF;
		padding: 24px 10px 4px;
	}
	#inquiry{
		margin:0 auto;
	}
	#inquiry p{
		font-size: 2.4rem;
		margin: 12px 0;
	}
	#inquiry a{
		width: 290px;
		height: 46px;
		line-height: 46px;
		background-size: auto 23px;
		background-position: 56px 12px;
	}
	#h_logo{
		line-height: 0;
	}
	#copyright{
		font-size: 1.0rem;
		width: auto;
		min-width: 300px;
		margin-bottom:10px;
		text-align: center;
	}
	footer img{
		height: 20px;
	}
	
}