@charset "utf-8";


/* ----------------------------------------------
	共通
---------------------------------------------- */
html{
	height:100%;
	font-size:10px;	/* 1rem = 10px */
}
body{
	height:100%;
	font-size:1.4rem;
	color:#231815;
}

a{
	color:#00A3D9;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
.rollover:hover {
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha( opacity=80 );
	opacity: 0.8;
}

button,input,textarea , body{
	font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

i{
	display:inline-block;
	font-family:FontAwesome;
	font-style:normal;
	font-weight:normal;
}

img {
	max-width:100%;
}
/* -------------------------------------
	各要素の初期設定
---------------------------------------- */
input{
	vertical-align:middle;
}
.ja{
	ime-mode:active;
}
.en{
	ime-mode:inactive;
}
.bold,
em,
strong{
	font-weight:700;
}
.del,
del{
	text-decoration:line-through;
}
.underline{
	text-decoration:underline;
}

.fr {
	float:right;
}

.fl {
	float:left;
}

/* -------------------------------------
	form初期設定
---------------------------------------- */
input[type="checkbox"],
input[type="radio"]{
	display:inline-block;
	margin:0 3px 0 0;
	vertical-align:baseline;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="password"]{
	border:1px solid #ccc;
	line-height:1.5;
	margin:0 0 3px 0;
	padding:5px 8px;
	width:80%;
}

input.half {
	width:40%;
}

input.mini {
	width:20%;
}


label{
	display:inline-block;
	vertical-align:middle;
}
textarea,
select{
	border:1px solid #ccc;
	line-height:1.5;
	margin:0 0 3px 0;
	padding:5px 8px;
}
textarea{
	resize:vertical;
	width:80%;
}

*:disabled,
.disabled{
	background:#eee;
	color:#555;	
}

/* -------------------------------------
	汎用パーツ
---------------------------------------- */
.pc{
	display:block!important;
}
.pc_inline{
	display:inline!important;
}
.pc_inline_block{
	display:inline-block!important;
}
.sp{
	display:none!important;
}
.sp_inline{
	display:none!important;
}
.sp_inline_block{
	display:none!important;
}

.fc_pink{
	color:#F79291;
}

.fc_green {
	color:#94C900;
}

.fc_blue {
	color:#00A4E0
}

.tar {
	text-align: right;
}

.tac {
	text-align: center;
}

.tal {
	text-align: left;
}



/* -------------------------------------
	レイアウト初期設定
---------------------------------------- */
.container{
	min-height:100%;
	position:relative;
	padding:0 0 100px;
}

.header_inner,
.footer_inner{
	margin:auto;
	width:1024px;
}



.content_inner{
	margin:auto;
	width:1024px;
}

.inner {
	margin:auto;
	width:1024px;
}

.inner.company {
	width:800px;
}

/* -------------------------------------
	header
---------------------------------------- */

.header{
	margin:0 0 0px 0;
}

.header_inner{
	overflow:hidden;
}

.header_inner h1 {
	font-weight: normal;
	font-size:1.2rem;
}

.logo {
	font-size:5rem;
	color:#00a3d9;
	float:left;
	margin:20px 0 0 0;
}

.header_address {
	text-align: right;
	float:right;

}

.header_address p {
	font-size:1.6rem;
	
}

.header_address p.tel {
	font-size:2.6rem;
	text-align: right;
}



.header_nav {
	margin:20px 40px 0 0 ;
}

.header_nav li {
	float:left;
	font-size:1.2rem;
	font-weight: bold;
	border-right:solid 1px #231815;
	padding:5px 0px ;
}
.header_nav li:first-child {
	border-left:solid 1px #231815;
}

.header_nav li a {
	padding:0 12px ;
	color:#231815;
}

.header_nav li a:hover {
	text-decoration: underline;
}




.top_header_nav {
	position: absolute;
	top:130px;
	left:380px;

}

.top_header_nav li {
	float:left;
	font-size:1.1rem;
	border-right:solid 1px #231815;
	padding:5px 0px ;
}
.top_header_nav li:first-child {
	border-left:solid 1px #231815;
}

.top_header_nav li a {
	padding:0 12px ;
	color:#231815;
}

.top_header_nav li a:hover {
	text-decoration: underline;
}



/* -------------------------------------
	footer
---------------------------------------- */
.footer{
	position:absolute;
	bottom:0;
	left:0;
	height:100px;
	width:100%;
	text-align: center;
	margin:12.5% 0 0 0 ;
	border-top:solid 1px #231815;
}


.footer_inner {
	padding:0 45px;
}


.footer_address {
	text-align: right;
	float:right;
	margin:10px 0 ;
}


.footer_address p {
	font-size:1.2rem;
	color:#231815;
}

.footer_nav {
	padding:40px 0 0 0;
	width:500px;

}

.footer_nav li {
	float:left;
	width:240px;
	text-align: left;
	margin:0 0 10px 0;
}



.footer_nav a {
	color:#231815;
}

.footer_nav {
	
}

.copyright {
	text-align: right;
	display: block;
	clear: both;
	margin:30px 0 20px 0;
}


/* -------------------------------------
	item
---------------------------------------- */

.section {
	position: relative;
}

.main_title {
	font-size: 4rem;
	margin:30px 0 ;
	font-weight: normal;
}

.main_title + p {
	margin:30px 0;
}

.sub_title {
	font-size: 2.8rem;
	margin:20px 0;
	clear:both;
	text-align: center;
}

.sub_title span {
	font-size:1.6rem;
}

.detail_title {
	font-size:2.4rem;
	margin:20px 0 5px 0;
}

.border_title {
	font-size: 2.8rem;
	margin:0px auto 20px auto ;
	padding:0 0 10px 0;
	font-weight: normal;
	text-align:center;
}

.border_title span {
	display: inline-block;
	border-bottom:dashed 2px #231815;
	padding:0 40px;
}

.box_title_wrap {
	margin:40px auto;
	text-align: center;
}

.box_title {
	display: inline-block;
	text-align: center;
	padding:10px 20px;
	font-size:2.4rem;
	border:solid 2px #231815 ;
}

.note {
	font-size:1.2rem;
	color:#666666;
}

.explain {
	font-size : 1.7rem;
	line-height : 35px;
}



.base_btn {
	display: inline-block;
	background: transparent;
	position: relative;
	min-width:130px;
	height:30px;
	line-height:1;
	padding:0 10px;
	color:#231815;
	font-size:2rem;
	text-align: center;
	cursor:pointer;
	border:solid 2px #231815;
	transition: .3s;
	-webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
	transition: .3s;

}


.base_btn::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  background: rgba(0,0,0,.2);
	transition: .3s;
	-webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
	transition: .3s;
}

.base_btn:hover::after {
  width: 100%;
  height: 100%;
}



.inline_btn {
	display: inline-block;
	width:auto;
	height:auto;
	line-height:1;
	background:#00a4df;
	padding: 5px 10px;
	color:#fff;
	box-shadow: 0px 3px 0px #0b6788;
	border-radius:4px;

}

.inline_btn:hover {
	filter: alpha( opacity=80 );
	opacity: 0.8;

}


 .btn_area {
 	margin:60px auto;
 	text-align: center;
 }


.base_table {
	width:100%;
	border-top:solid 1px #231815;
}
.base_table th {
	width:20%;
	border-bottom:solid 1px #231815;
	padding:10px;
}

.base_table td {
	width:80%;
	border-bottom:solid 1px #231815;
	padding:10px;
}
.base_table p {
	margin:0 0 10px 0;
}



.hr_table {
	width:100%;
	border-top:solid 1px #231815;
	border-left:solid 1px #231815;
}
.hr_table th {
	background:#9FD8F5;
	border-right:solid 1px #231815;
	border-bottom:solid 1px #231815;
	padding:10px 0;
	text-align: center;
}

.hr_table td {
	border-right:solid 1px #231815;
	border-bottom:solid 1px #231815;
	padding:10px 0;
	text-align: center;
}
.hr_table p {
	margin:0 0 10px 0;
}

.hr_table.column02 th {
	width:33.3333%;
}
.hr_table.column02 td {
	width:33.3333%;

}

.hr_table.column03 th {
	width:50%;
}

.hr_table.column03 td {
	width:50%;

}



.numbering_list {
	
}

.numbering_list dt {
	font-size:2rem;
	background:#9ED8F5;
}

.numbering_list dt span {
	display: inline-block;
	font-size:2.4rem;
	width:40px;
	height:40px;
	color:#fff;
	background:#231815;
	text-align: center;
	margin:0 20px 0 0;
}

.numbering_list dd {
	margin:20px 0;
	line-height:1.8;
}


.point_list {
	
}

.point_list dt {
	font-size:2rem;
	background:#FFE33F;
	border-left : #231815 15px solid;
	height : 40px;
	line-height : 40px;
	padding : 0 20px 0 10px;
}

.point_list dt span {
	display: inline-block;
	font-size:2.4rem;
	width:40px;
	height:40px;
	color:#fff;
	background:#231815;
	text-align: center;
	margin:0 20px 0 20px;
}

.point_list dd {
	margin:20px 0;
	line-height:1.8;
}


.form_btn {
	display : block;
	background : #231815;
	color : #fff;
	width : 410px;
	height : 40px;
	text-align : center;
	padding : 0 10px;
	font-size : 20px;
	line-height : 40px;
	margin : auto auto 60px auto;
}
.form_btn:hover{
	opacity : 0.7;
}


/*======================================= 

お問合せ

======================================= */
.form_wrapp {
	border:1px solid #CCCCCC;
	padding:20px;
	margin-top:20px;
	padding-top:0;
}

#contactform {
	width:100%;
}

#contactform th {
	border-bottom:1px solid #CCCCCC;
	padding:20px;
	width:30%;
	text-align:left;
	vertical-align:middle;
}

#contactform td {
	border-bottom:1px solid #CCCCCC;
	padding:20px;
}

#contactform tr.last th,
#contactform tr.last td { /*border:0;*/
}

#contactform input[type="text"],
#contactform textarea {
	padding:0.5em;
	width:100%;
}

#contactform textarea {
	width:100%;
}

#contactform input.namae {
	width:40%;
}

#contactform input.yubin {
	width:20%;
	margin-right:1em;
}

#yubinbtn {
	border:0;
	background:#888888;
	color:#fff;
	cursor:pointer;
	padding:10px;
	font-size:80%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#yubinbtn:hover {
	background:#3E3E3E;
}

.hissu {
	color:#C14646;
	font-size:130%;
}

#submit_btn {
	width:400px;
	height : 40px;
	padding:0 15px;
	border:0;
	color:#fff;
	background : #231815;
	
}

#submit_btn:hover {
	opacity : 0.7;
}

#contactform .last th,
#contactform .last td {
	border:0;
}


.err {
	padding : 10px 0;
	color : #ff0000;
}
.attention {
	padding : 10px 0 2px 0;
	color : #ff0000;
}
p.thanks {
	padding : 20px 0 0;
	line-height : 1.5;
}

.siteseal {
	text-align : center;
	padding : 10px;
}


/* -------------------------------------
	column
---------------------------------------- */
.col_block {
    overflow: hidden;
    letter-spacing: -1em;
    font-size:0;
}

.col_block .item {
    display: inline-block;
    text-align: center;
    letter-spacing: normal;
    font-size:14px;
    vertical-align: top;
    margin-bottom:60px;
}


.col_block .item .caption {
    text-align: center;
}

.col02 {
    margin-left:-4%;
}

.col03 {
    margin-left:-2%;
}

.col02 .item {
    width:46%;
    margin-left:4%;
}

.col03 .item {
    width:31.3333333333%;
    margin-left:2%;
}


.col_img_block {
	
}

.col_img_block .img_box {
	width:385px;
}

.col_img_block .text_box {
	width:555px;
}
.col_img_block .text_box .sub_title {
	margin:0 0 20px 0;
}

.col_img_block .left {
	float:left;
}

.col_img_block .right {
	float:right;
	
}


/* -------------------------------------
	ページトップ
---------------------------------------- */
.pagetop{
	display:none;
	position:fixed;
	right:50px;
	bottom:50px;	
	z-index:5;
}


/* -------------------------------------
	visual
---------------------------------------- */
.main_visual {
	position: relative;
		margin:0 0 100px;
}

/* -------------------------------------
	top
---------------------------------------- */

.top_section01 {
	background: url("../images/top_section01_bg.png") scroll no-repeat center 35px;
	min-height:540px;
	padding:30px 0;
}


.top_section01 .item_block {
	margin:180px 0 0 60px 
}

.top_section01 .item {
	float:left;
	text-align: left;
	margin: 0 20px;
	width:260px;
}

.top_section01 .title{
	font-size:2rem;
	text-align: center;
	margin:0 0 10px 0;
}

.top_section01 .text{
	font-size:1.4rem;
}





.top_section02 {
	background: url("../images/top_section02_bg.png") no-repeat left top;
}

.top_section03 {
	background: url("../images/top_section03_bg.png") no-repeat left top;
}

.top_section04 {
	background: url("../images/top_section04_bg.png") no-repeat left top;
}

.top_section05 {
	background: url("../images/top_section05_bg.png") no-repeat left top;
}

.top_section  {
	padding:80px 0 40px 0;
}

.top_section.top_section02 {
	padding:40px 0;

}

.top_section .content_area {
	width:450px;
	margin:0px 0 0 500px;
	padding:50px 0 0 0;
	text-align: center;
}



.top_section .title {
	font-size:2.6rem;
	margin:30px 0 20px 0;
	font-weight: normal;
}

.top_section .text_height{
	line-height : 26px;
}


.top_section .btn_area {
	margin:30px 0 20px 0;
}

.top_card_list .title {
	font-size:2rem;
	font-weight: bold;
	margin:20px 0;
}	

.top_section06 {
	background:#fff8d8;
	padding:60px 0 180px 0;
	position: relative;
}

.top_section06_wrap {
	width:80%;
	margin:0 auto;
}

.top_section07 {
	background: url("../images/top_card_info.png") no-repeat left top;
	padding:60px 0 0 0;
	position: relative;
	min-height: 1200px;
}


.content_box {
	position: absolute;

}

.content_box .title {
	font-size:2.2rem;
	font-weight: bold;
	margin:10px 0;
	width:200px;
}


.content_box .text {
	margin:10px 0;
	font-size:1.7rem;
}

.content_box.box01 {
	top:340px;
	left:100px;
}

.content_box.box02 {
	top:608px;
	left:100px;
}

.content_box.box03 {
	top:875px;
	left:100px;
}

.content_box.box04 {
	top:450px;
	right:60px;
}

.content_box.box05 {
	top:715px;
	right:60px;
}

.content_box.box06 {
	top:985px;
	right:60px;
}

.chara {
	position: absolute;
	z-index:9;
}

.chara01 {
	bottom:-130px;
	right:30px;
}
.chara02 {
	bottom:-20px;
	left:20px;
}

.chara03 {
	top:100px;
	right:0px;
}

.chara04 {
	bottom:0;
	left:40px;

}



/* -------------------------------------
	gaiyo
---------------------------------------- */

.kaitei_box {
	width:280px;
	margin:0 0 0 auto;
}

.gaiyo_footer {
	width:100%;
	margin:60px  auto 0 auto;
	background:#E5E5E6;
	overflow: hidden;
	padding:20px 40px;

}


/* -------------------------------------
	solution
---------------------------------------- */
.solution_chara05 {
	position: absolute;
	top:-70px;
	left:0;
}

.solution_quo01 {
	position: absolute;
	top:100px;
	right:0;
}

.solution_quo02 {
	position: absolute;
	bottom:-140px;
	left:120px;
}

.solution_quo03 {
	position: absolute;
	top:65px;
	left:20px;
}

.solution_quo03_plus {
	position : relative;
	top : -30px;
	margin-bottom : -30px;
}


.solution_chara_l {
	position: absolute;
	top:1450px;
	left:0;
}

.solution_chara_r {
	position: absolute;
	top:1400px;
	right:0;
}


/* -------------------------------------
	feature
---------------------------------------- */
.feature_chara06 {
	position: absolute;
	top:-70px;
	right:0;
}

.feature_chara07 {
	position: absolute;
	bottom:-50px;
	right:0;
}

.feature_chara08 {
	position: absolute;
	top:-170px;
	left:30px;
}

.feature_chara09 {
	position: absolute;
	top:0px;
	right:0px;
}

.feature_chara_l {
	position: absolute;
	top:1860px;
	left:0;
}

.feature_chara_r {
	position: absolute;
	top:2450px;
	right:0;
}

.feature_chara_r03 {
	position: absolute;
	top:210px;
	right:-1px;	
}

.feature_chara_l03 {
	position: absolute;
	top:280px;
	left:0px;	
}

.feature_chara_l04 {
	position: absolute;
	top:3410px;
	left:0;
}


/* -------------------------------------
	link
---------------------------------------- */

#link01 , 
#link02 , 
#link03 , 
#link04 , 
#link05 , 
#link06 , 
#link07 {
	padding:30px 0 0 0;
}



/* -------------------------------------
	health
---------------------------------------- */
.health_contents_header {
	text-align : center;
    margin: 60px 0;
    clear: both;
    text-align: center;
}

.health_contents {
	text-align :center;
	font-size : 1.6rem;
	margin : 60px 0;
}



/* -------------------------------------
	ellipsis
---------------------------------------- */
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------
	Jquery
---------------------------------------- */
.hidden_area{
	display:none;
}

.overLayer {
	display:none;
	background:#000;
	opacity:0.7;
	width:100%;
	height:100%;
	z-index:999;
	position:fixed;
	top:0;
	left:0;
}

.modalBox {
	background:#fff;
	padding:30px;
	width:50%;
	height:50%;
	border:solid 5px red;
	overflow:auto;
	z-index:1000;
	position:fixed;
}

.modalBox .close {
	background:#2f2f2f;
	width:30px;
	height:30px;
	line-height:30px;
	color:#fff;
	cursor:pointer;
	text-align:center;
	font-size:200%;
	position:absolute;
	top:0px;
	right:0px;
}






.bx-controls {
	font-family:FontAwesome;
	font-style:normal;
	font-weight:normal;	
	position: absolute;
	top:42%;
	left:0;
}

.bx-prev ,
.bx-next {
	display:inline-block;
	font-size:7rem;
}

.bx-prev {
	position: relative;
	left:-50px;
}

.bx-next {
	position: absolute;
	left:1050px;
}

.bx-pager {
	margin:10px 0 0 0;
}

.bx-pager a {
	display: inline-block;
	margin:0 2px 0 0;
	img {
		aspect-ratio: 100 / 63;
		object-fit: cover;
		width: 96px;
	}
}

/* -------------------------------------
	clearfix
---------------------------------------- */

.cf:before,.cf:after{
	content:"";
	display:table;
}
.cf:after{
	clear:both;
}