@charset "UTF-8";

/* ----------------------------------------------------
basic style of NewLifeSupport
author: HPG_ogiwara
version: September 2022
----------------------------------------------------- */


/** ************************************* **

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. top_btnmenu
		03. 囲み文字の基本形
		04. 追加　背景
		05. CHARACTOR
		06. トップの大画像
		07. top_button
		08. ドロワーメニュー
	---------------------------

** ************************************* **/



/** 01. Web fonts
 **************************************************************** **/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap');




/** 01. Globals
**************************************************************** **/
body {
	background-color: #FFFFFF;
}

#pagebody {
		margin-bottom: 20px;
}



@media (min-width: 576px) {
	.container {
		width:auto;
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.container {
		width:auto;
		max-width: 720px;
	}
	#content {
		width: 100%;
		padding: 0px;
		float: left;
	}

}
@media (min-width: 992px) {
	.container {
		width:auto;
		max-width: 960px;
	}

	#content {
	width: 750px;
	float: left;
	}

}
@media (min-width: 1200px) {
	.container {
		width:auto;
		max-width: 1140px;
	}

	#content {
	width: 920px;
	float: left;
	}

}

@media (max-width: 991px) {
	#rightside {
	padding: 15px;
	width: 100%;
	float:none;
	}
}

#header {
	background-color: transparent;
}

#content {
	width: 80%;
}
#content a {
	text-decoration: none;
}
#rightside {
	width: 20%;
}
@media (max-width: 991px) {
	#content {
		width: 100%;
	}
	#rightside {
		display: none;
	}
}
@media (max-width: 768px) {
	#content {
		float: none;
		width: 100%;
	}
}

.badge {
white-space: normal;
}

/* カラー
---------------------------------------------------- */
.brown, .brown a { color: #A58376; }








#header h1 { /* ヘッダー画像貼り替え */
		display: block;
		text-indent: -9999px;
		background: url(/ipu/images/common/logo_newlife@2x.svg) no-repeat 0 0;
		background-position: left 0 top 0;
		background-size: 320px 40px;
		width: 320px;
		height: 40px;
		top: 18px;
}


#container {
	padding-top: 70px;
}



#overheader {
		display: none;
}
#tabsubarea {
		display: none;
}
@media (max-width: 768px) {
		/*#header {
				overflow: hidden;
		}*/
		#header h1 { /* ヘッダー画像貼り替え */
				background: url(/ipu/images/common/logo_newlife@2x.svg) no-repeat 0 0;
				background-position: left 0 top 0;
				background-size: 250px 40px;
				width: 250px;
				height: 40px;
				top: 15px;
		}
		#header h1 a { /* ヘッダー画像貼り替え */
				display: block;
				text-indent: -9999px;
				width: 250px;
				height: 60px;
		}
		#global_tab {
				width: 100%;
				background: #FFFFFF;
				height: auto;
				max-height: 2000px;
				float: none;
		}
		#overheader {
				display: block;
		}
		#overheader .flexnav li a {
				/*	background-color: #3498db;*/
		}
		#container {
				margin: 0 auto;
				/*	padding: 0;*/
		}
		.menu-button {
				position: absolute;
				right: 0px;
				top: 0px;
		}
}
@media (max-width: 480px) {
		#header h1 {
				background-size: auto 30px;
				top: 15px;
		}
		#header h1 a {
				width: 250px;
				height: 30px;
		}
		#container {
				padding-top: 55px;
		}
}
.content_inner h5 {
		font-size: 1.1em;
		padding: 0.7em 0 0 0;
		border-left: 0px solid #217dbb;
		line-height: 2.0;
}
.content_inner {
		padding: 0 15px;
}
.marker.yellow.thin {
		color: inherit;
		background: linear-gradient(transparent 50%, #ffff66 50%);
}
#content h2.top_space {
		margin-top: 30px;
}
.top_space2 {
		margin-top: 20px;
}
@media (max-width: 768px) {
		.contact {
				border: solid #D6DBDF 2px;
				padding: 0.8em 0.5em;
				margin: 0.8em 0 1em;
				font-weight: normal;
				color: #333333;
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
		}
}



/* -------------------------------------------------- *
 * 追加　画像ホバー
 * -------------------------------------------------- */
.alpha a:hover img {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
}



/** 02. top_btnmenu
**************************************************************** **/
.top_btnmenu {
		display: table;
		width: 100%;
}
.top_btnmenu .btn {
		height: 50px;
		padding: 5px;
}
.top_btnmenu .row_center {
		display: table-cell;
		vertical-align: middle;
}
@media (max-width: 768px) {
		.top_btnmenu .btn {
				height: 45px;
		}
}
.btn {
		white-space: normal;
}



/** 03. 囲み文字の基本形
**************************************************************** **/
.maru {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		flex-flow: column;
		vertical-align: top;
}
/* 円の大きさ */
.size_normal {
		width: 120px;
		height: 120px;
}
.square2 {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 25px;
		height: 25px;
		flex-flow: column;
		vertical-align: middle;
}
/* 文字の大きさ */
.letter2 {
		font-size: 1.1em;
		line-height: 1.1em;
}
.letter3 {
		font-size: 1.3em;
		line-height: 1.3em;
}
/* 囲みと文字の色 */
.gray1 {
		color: #5F5F5F;
		border: 1px solid #5F5F5F;
		background: #fff;
}
.yellow1 {
		color: #C7B500;
		border: 1px solid #C7B500;
		background: #fff;
}
.purple1 {
		color: #8a2be2;
		border: 1px solid #8a2be2;
		background: #fff;
}
.blue1 {
		color: #fff;
		border: 1px solid #217dbb;
		background: #217dbb;
}
.pink1 {
		color: #E500B3;
		border: 1px solid #E500B3;
		background: #fff;
}
.green1 {
		color: #fff;
		border: 1px solid #008000;
		background: #008000;
}



/** 04. 追加　背景
**************************************************************** **/

#content .section {
		margin-left: -10px;
		margin-right: -10px;
}



/** 05. CHARACTOR
 **************************************************************** **/
.yakuhanjp {
		font-family: 'YakuHanJP', "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}




/** 06. トップの大画像
 **************************************************************** **/
#container .fullview {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: -42px;
}

#container .fullview2 {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: -72px;
}

.onepage-hero .bg-hero {
	position:absolute;
	height: 500px;
	width: 100%;
	max-height:500px;
	background-position: 50% 50%;
	background-size: cover;
	z-index:0;
}

.onepage-hero .bg-hero-text {
	position: relative;
	color: #FFFFFF;
	z-index: 10;
}

.onepage-hero .bg-hero-text h2 {
	color: #FFFFFF;
	font-size: calc(180% + 0.25vw);
	margin-top: 55px;
	margin-bottom: 3.4vmax;
}

.onepage-hero .bg-hero-text p {
	color: #FFFFFF;
	font-size: calc(90% + 0.15vw);
}

.onepage-hero .bg-hero-text h3 {
	color: #FFFFFF;
	font-size: calc(140% + 0.15vw);
	margin-top: 55px;
	border-bottom: none;
	text-align: center;
}

.onepage-hero2 .bg-hero {
	position:absolute;
	top:50px;
	height: 350px;
	width: 100%;
	max-height:500px;
	background-position: 50% 50%;
	background-size: cover;
	z-index:1;
}

@media (max-width: 768px){
	.onepage-hero2 .bg-hero {
		height: 300px;
	}
}



.bg-dark {
	color:#fff
}

.bg-dark-30:before,.bg-dark-60:before,.bg-dark-90:before,
.bg-purple:before,
.bg-yellow:before,
.bg-pink:before,
.bg-green:before,
.bg-orange:before,
.bg-red:before
 {
	content:" ";left:0
}

.bg-dark-30:before,.bg-dark-60:before,.bg-dark-90:before,.bg-purple:before,
.bg-yellow:before,
.bg-pink:before,
.bg-orange:before,
.bg-green:before,
.bg-red:before {
	position:absolute;height:100%;width:100%;z-index:0;
}

.bg-dark-30:before {
	background-color:rgba(34,34,34,.3);top:0
}

.bg-dark-60:before{
	background:rgba(34,34,34,.6);top:0
}

.bg-dark-90:before{
	background:rgba(34,34,34,.9);top:0
}

.bg-purple:before{
	background:rgba(109,112,213,.8);top:0
}

.bg-yellow:before{
	background:rgba(209,143,4,.8);top:0
}

.bg-red:before{
	background:rgba(223,100,94,.8);top:0
}

.bg-pink:before{
	background:rgba(211,101,169,.8);top:0
}

.bg-orange:before{
	background:rgba(248,132,77,.8);top:0
}

.bg-green:before{
	background:rgba(95,170,113,.8);top:0
}

.bg-white:before{
	background:rgba(255,255,255,0.80);top:0
}

.back-green {
	background-color: #27AE60;
}

.border-green {
	border-color: #27AE60;
}

.bg-green-subtle {
	background-color: #D9F1D2;
}




/* -------------------------------------------------- *
 * header
 * -------------------------------------------------- */
.head_bar { 				/* ヘッダーバー */
	/*display: none;*/
}
#global_header.header-shadow #header {
	background-color: rgba(255,255,255,0.80);
	-webkit-transition: 1.2s;
	-moz-transition: 1.2s;
	-o-transition: 1.2s;
	-ms-transition: 1.2s;
	transition: 1.2s;
}

#global_header.header-shadow {
	-webkit-transition: 1.2s;
	-moz-transition: 1.2s;
	-o-transition: 1.2s;
	-ms-transition: 1.2s;
	transition: 1.2s;
	box-shadow:0 0 5px rgba(0,0,0,.1);
}




/* -------------------------------------------------- *
 * HEADER ICON & hamburger menu
 * -------------------------------------------------- */

#header ul.m-header a {
	color: #306B50;
}

.m-header-link.header-icon1 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_1.svg');
}

.m-header-link.header-icon2 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_2.svg');
}

.m-header-link.header-icon3 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_3.svg');
}

.m-header-link.header-icon4 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_4.svg');
}

.m-header-link.header-icon5 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_5.svg');
}

.m-header-link.header-icon6 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_6.svg');
}

.m-header-link.header-icon7 .m-header-link-icon {
	background-image: url('/ipu/images/icon/icon_7.svg');
}


.menu-trigger {
	background: #306B50;
}

#overheader .flexnav li.header {
	background-color: #306B50;
}




/* -------------------------------------------------- *
 * footer 修正
 * -------------------------------------------------- */
#social_footer {
	width: 100%;
	z-index: 1;
}

#footer {
	background-color: #97B5A7;
}

#global_footer {
	background-color: #97B5A7;
	color: #FFFFFF;
}

#global_footer a {
	color: #FFFFFF;
}

#footer #copyright {
	text-align: right;
	font-size: 12px;
	line-height: 1.5;
}

#footer #footer_coop {
	text-align: left;
	font-size: 12px;
}

#footer #footer_coop a {
	text-decoration: none;
}

#footer #footer_coop a:hover {
	text-decoration: none;
}

@media all and (max-width: 768px) {
	#footer.container{
	width: auto;
	max-width: 100%;
	}
	
	#global_footer #footer_coop a {
		bottom:0;
	}
	
	#global_footer #copyright {
	}
	
	#footer #copyright {
		text-align: center;
		font-size: 11px;
	}
	
	#footer #footer_coop {
		text-align: center;
		font-size: 11px;
	}
}





/** 07. top_button
 **************************************************************** **/
 
.header-nav {
	background: #e1f0fa;
}
#content2 .top_button ul {
	display: -webkit-box;
	display: -moz-box;
	display: flexbox;
	display: flex;
	margin: 0;
	padding: 10px 0 5px;
	list-style: none;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
}
#content2 .top_button a, #content2 .top_button a:link, #content2 .top_button a:visited {
	text-decoration: none;
}
#content2 .top_button a:hover{
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
#content2 .top_button li {
	display: inline-block;
	text-decoration: none;
	color: #000000;
	padding: 5px 3px;
	text-align: center;
	width: 25%;
	-webkit-box-flex: initial;
	-moz-box-flex: initial;
	-ms-flex: initial;
	flex: initial;
}
@media screen and (max-width: 991px){
	#content2 .top_button li {
		width: 33%;
	}
}
@media screen and (max-width: 768px){
	#content2 .top_button li {
		width: 50%;
	}
}
@media screen and (min-width: 481px){
	#content2 .top_button ul {
		display: none;
	}
}
@media screen and (max-width: 480px){
	#content2 .top_button li {
		/*width: 14.2%;*/
		width: auto;
	}
}
#content2 .top_button li a {
	position: relative;
	display: block;
	text-align: center;
	border: 3px solid #3498db;
	padding:2px 5px 12px 5px;
	margin: 0 5px;
	box-sizing: border-box;
	font-weight: 600;
	text-transform: uppercase;
	-webkit-tap-highlight-color: transparent;
	transition: 0s ease-out;
	color: #232323;
	background-color: #fff;
}
#content2 .top_button li a .wrap{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}
#content2 .top_button li a:after {
	font-family: 'Font Awesome 5 Free';
	content: "\f054";
	color: #3498db;
	font-weight: 600;
	font-size: 1.2em;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -12px;
}
#content2 .top_button li a:hover {
	background-color: rgba(52,152,219,0.20);
	border: 3px solid #3498db;
}
#content2 .top_button li a .user_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/01_user.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}
#content2 .top_button li a .user2_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/05_user.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}

#content2 .top_button li a .presen_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/02_presen.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}

#content2 .top_button li a .memo_icon{
	left: -10px;
	position: relative;
}

#content2 .top_button li a .memo_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/03_memo.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}

@media screen and (max-width: 768px){
#content2 .top_button li a .memo_icon{
	left: 0px;
	position: relative;
}

#content2 .top_button li {
	padding-top: 5px;
	margin-top: 0;
}


#content2 .top_button li a .wrap{
  position:relative;
	top:50%;
	  transform:translate(-50%,-50%);
  width:100%;
}
}

#content2 .top_button li a .house_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/04_house.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}

#content2 .top_button li a .cart_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/05_cart.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}

#content2 .top_button li a .document_icon:before {
	position:relative;
	top: 8px;
	right: 3px;
	content: url(/ipu/images/icon/06_document.svg);
	display: inline-block;
	width: 35px;
	height: 35px;
}


#content2 .top_button li a:hover:before{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#content2 .top_button li a:active:before{
	top: 7px;
	reft: -7px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
@media (max-width: 480px) {
	#content2 .top_button ul{
		position: fixed;
		width: 100%;
		bottom:0px;
		left: 0;
		padding: 0px 0 0px;
		z-index: 1000;
		background-color: rgba(255,255,255,0.80);
		box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
	}
	#content2 .top_button li {
		margin: 3px auto;
	}
	#content2 .top_button li a {
		position: relative;
		border: 0px solid #232323;
		padding:0;
		margin: auto;
		box-sizing: border-box;
		font-weight: 600;
		text-transform: uppercase;
		text-decoration: none;
		color: #232323;
		text-align: center;
		line-height: 1.2;
		font-size: 9px;
		background-color: rgba(255,255,255,0.00);
		z-index: 1001;
	}


	#content2 .top_button li a:after {
		display: none;
	}
	#content2 .top_button li a:hover {
		background-color: rgba(255,255,255,0.80);
		border: 0px solid #3498db;
	}
	#content2 .top_button li a .user_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url("/ipu/images/icon/01_user.svg");
		display: block;
		width: 35px;
		height: 35px;
	}
		#content2 .top_button li a .user2_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url("/ipu/images/icon/05_user.svg");
		display: block;
		width: 35px;
		height: 35px;
	}
	#content2 .top_button li a .presen_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url(/ipu/images/icon/02_presen.svg);
		display: block;
		width: 35px;
		height: 35px;
	}
	#content2 .top_button li a .memo_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url(/ipu/images/icon/03_memo.svg);
		display: block;
		width: 35px;
		height: 35px;
	}

	#content2 .top_button li a .house_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url(/ipu/images/icon/04_house.svg);
		display: block;
		width: 35px;
		height: 35px;
	}
	
		#content2 .top_button li a .cart_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url(/ipu/images/icon/05_cart.svg);
		display: block;
		width: 35px;
		height: 35px;
	}
		#content2 .top_button li a .document_icon:before {
		position:relative;
		margin: 0 auto 3px;
		top: 0px;
		right: 0px;
		content: url(/ipu/images/icon/06_document.svg);
		display: block;
		width: 35px;
		height: 35px;
	}


}









/** 08. ドロワーメニュー
**************************************************************** **/
#overheader {
		display: block;
}
#overheader .flexnav li a {
		background-color: #ffffff;
}
nav.globalnav > .globalnav_bg a {
		background-image: url(/ipu/images/common/logo_newlife@2x.svg);
}
@media (max-width: 350px) {
		nav.globalnav > .globalnav_bg a {
				width: 250px;
		}
}