@charset 'UTF-8';

#hero, .card_col3 .img_area, .hero_img {
	position: relative
}

#hero, .hero_img {
	overflow: hidden;
	width: 100%;
	height: 100vh;
	margin: 0 auto
}

#hero {
	box-sizing: border-box
}

.hero_img {
	z-index: 2;
	display: table;
	background: url(../../img/top/index_main_04-05.jpg) center center no-repeat;
	background-size: cover
}

.hero_ttl {
	display: table-cell;
	vertical-align: middle
}

.hero_ttl .inner {
	max-width: 360px;
	margin: 10% auto 0;
	padding: 30px 0;
	background: rgba(255, 255, 255, .8)
}

.hero_ttl a {
	display: block;
	width: 80%;
	margin: 30px auto 0;
	padding: 18px 0;
	text-align: center;
	border: 1px solid #00335b
}

@media screen and (max-width:640px) {
	#hero, .hero_img {
		min-height: 500px
	}

	.hero_ttl .inner {
		max-width: 280px;
		padding: 20px 0
	}

	.hero_ttl .inner+img {
		width: calc(100%/2)
	}

}

.card_col3 .img_area span {
	line-height: 100px;
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: -22%;
	left: 0;
	max-width: 100px;
	height: 100px;
	margin: auto;
	border-radius: 50%;
	background: #fff
}

.card_col3 .img_area span img {
	width: 50%;
	max-width: 100%;
	padding-top: 12px
}

.card_col3 .img_area .flag-open {
	line-height: 30px;
	position: absolute;
	z-index: 2;
	top: 25px;
	left: 0;
	padding: 0 25px;
	color: #fff;
	background: #00b9e7
}

.card_col3 .post_area h3 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 600;
	position: relative;
	z-index: 3;
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
	color: #00335b
}

#carelabo .btn_default {
	margin: 20px auto 0
}

#carelabo .card_wrap .img_area {
	overflow: visible
}

#footerimg .Bgimg, #social .column3nows .img_area, a.brand_btn {
	overflow: hidden
}

#carelabo .card_wrap .img_area img {
	-webkit-transition: .3s;
	transition: .3s
}

#carelabo .card_wrap .img_area img:hover {
	-webkit-transform: inherit;
	-ms-transform: inherit;
	transform: inherit
}

#carelabo .column1 li {
	width: 98%;
	margin: 0 1%
}

@media screen and (max-width:640px) {
	#carelabo li {
		width: 100%;
		margin: 0 0 30px
	}

	.card_col3 .img_area span {
		bottom: -50px
	}

}

.ie .card_col3 .img_area span {
	left: 35%
}

.readmore {
	color: #fff
}

.column1 {
	display: block
}

.column1 li {
	width: 100%
}

.column2 {
	margin-right: -2%
}

.column2 li {
	margin-top: 2%
}

@media screen and (max-width:640px) {
	.column2, .column2 li {
		margin-right: 0
	}

	.column2 li {
		float: none;
		width: 100%
	}

	.bnr_col2 li {
		margin-top: 4%
	}

}

.column4 {
	margin-right: -2.59%
}

@media screen and (max-width:768px) {
	.column4 {
		margin-right: -4%
	}

	.column4 li {
		float: left;
		width: 46%;
		margin-right: 4%;
		margin-bottom: 4%
	}

}

.default_slick_container {
	position: relative;
	margin-top: 50px
}

.card_wrap {
	position: relative
}

.card_wrap .post_new {
	font-size: 12px;
	font-size: 1.2rem;
	position: absolute;
	z-index: 2;
	display: block;
	width: 50px;
	height: 50px;
	color: #fff;
	border-bottom-right-radius: 50px;
	background: #ffa302
}

.card_wrap .post_new span {
	line-height: 42px;
	display: block;
	padding-left: 7px
}

.column3nows {
	display: table;
	width: 100%;
	table-layout: fixed
}

.column3nows li {
	display: table-cell
}

.column3nows .img_area {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 300px;
	margin: 0 auto
}

@media screen and (max-width:768px) {
	.column3nows li {
		display: block
	}

}

#social .column3nows .wrapleft {
	background: url(../../img/top/social.jpg) center center no-repeat;
	background-size: cover
}

#social .column3nows .wrapcenter {
	background: url(../../img/top/social2.jpg) center center no-repeat;
	background-size: cover
}
#social .column3nows .wrapcenter2 {
	background: url(../../img/top/social2-1.jpg) center center no-repeat;
	background-size: cover
}

#social .column3nows .wrapright {
	background: url(../../img/top/social3.jpg) center center no-repeat;
	background-size: cover
}

#social .column3nows .wrapright .post_area {
	border-right: none
}

#social .column3nows .post_area {
	padding: 30px 0;
	border-right: 1px solid #dcdcdc;
	background: #fff;
	min-height: 180px/*20190801追加*/
}
/*@media screen and (max-width:1140px) {
	#social .column3nows .post_area {
		min-height: 180px
	}
}*/
#social .column3nows .post_area h3 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 150%;
	text-align: center;
	color: #00335b
}

#social .column3nows .post_area h3:before {
	display: block;
	width: 80px;
	height: 32px;
	margin: 0 auto 10px;
	content: '';
	background: url(../../img/common/ttl-logo-icon_small.png) center center no-repeat;
	background-size: contain
}

#social .column3nows .img_area img {
	-webkit-transition: .3s;
	transition: .3s
}

#social .column3nows .img_area img:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1)
}

.linkareahover {
	position: relative;
	cursor: pointer
}

.linkareahover .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	opacity: 0;
	background-color: rgba(0, 0, 0, .3)
}

.linkareahover .caption {
	position: absolute;
	top: 50%;
	width: 100%;
	margin: auto;
	text-align: center;
	letter-spacing: .1em;
	color: #fff
}

.linkareahover:hover .mask {
	opacity: 1
}

@media screen and (max-width:640px) {
	.column3nows .img_area {
		min-height: 200px
	}

}

.news_tab {
	display: table;
	width: auto;
	margin: 0 auto
}

.news_tab li {
	position: relative;
	margin: 20px auto;
	padding: 0 0 0 25px;
	cursor: pointer;
	opacity: 1;
	outline: 0;
	filter: alpha(opacity=1)
}

.news_tab li:before {
	line-height: 10px;
	position: absolute;
	top: -3px;
	left: 0;
	display: inline-block;
	width: 10px;
	height: 10px;
	content: '';
	border: 2px solid #00335b
}

#footerimg .Bgimg, .card_wrap .img_area {
	position: relative
}

.news_tab a {
	font-weight: 600;
	padding-left: 25px;
	color: #00335b
}

li.slick-slide.slick-current.slick-active:before {
	background-color: #00335b
}

.news_panel {
	margin-top: 20px
}

.news_panel .post_news {
	display: table;
	width: 100%;
	min-height: 60px;
	padding: 5px 0;
	cursor: pointer;
	border-bottom: 1px dotted #dcdcdc
}

.news_panel .post_news .text_area, .news_panel .post_news a {
	display: table-cell;
	padding-left: 15px;
	vertical-align: middle
}

.news_panel .post_news a {
	line-height: 1.75em;
	text-decoration: none;
	color: #434343;
	outline: 0
}

.news_panel .post_news:hover {
	-webkit-transition: .8s;
	transition: .8s;
	background: #edf7f9
}

.news_panel .post_news .img_area {
	display: table-cell;
	width: 60px
}

.news_panel .inner {
	display: table
}

.news_panel .cat, .news_panel .date {
	display: table-cell;
	vertical-align: middle
}

.news_panel .date {
	font-size: 12px;
	font-size: 1.2rem;
	padding-right: 15px;
	color: #434343
}

.news_panel .catin {
	font-size: 10px;
	font-size: 1rem;
	line-height: 24px;
	padding: 5px 15px;
	color: #00335b;
	border: 1px solid #00335b;
	border-radius: 24px
}

.news_panel .slick-slide {
	padding: 0
}

@media screen and (max-width:768px) {
	.news_panel .post_news a {
		display: block
	}

}

@media screen and (max-width:640px) {
	.news_panel {
		margin-top: 0
	}

	.news_panel .post_news {
		padding: 10px 0
	}

	.news_panel .post_news .img_area {
		display: block;
		width: 50px
	}

	.news_panel .post_news .text_area {
		width: 100%;
		padding-left: 15px
	}

	.news_panel .post_news a {
		padding-top: 5px;
		padding-left: 0
	}

	.news_panel .inner {
		display: block
	}

	.news_panel .catin {
		padding: 3px 10px;
		border-radius: 24px
	}

}

#footerimg .Bgimg {
	display: table;
	width: 100%;
	min-height: 380px;
	margin: 0 auto;
	background: url(../../img/top/top_footer_img.jpg) center center no-repeat;
	background-size: cover
}

#footerimg .Bgimg .inner {
	display: table-cell;
	vertical-align: middle
}

.column2, .column3, .column4 {
	display: block
}

#footerimg .Bgimg .inner h3 {
	font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', HGS明朝E, メイリオ, Meiryo, serif;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 100;
	padding-bottom: 10px;
	text-align: center;
	color: #fff
}

.firefox #footerimg .Bgimg {
	height: 380px
}

.column2 {
	margin: 0
}

.column2 li {
	float: left;
	width: 48%;
	margin-right: 1%;
	margin-left: 1%
}

@media screen and (max-width:640px) {
	#footerimg .Bgimg {
		min-height: 250px
	}

	.firefox #footerimg .Bgimg {
		height: 250px
	}

	.column2 {
		margin: 0
	}

	.column2 li {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-left: 0
	}

}

.column3 {
	margin: 0
}

.column3 li {
	float: left;
	width: 30.724%;
	margin-right: 1.3%;
	margin-bottom: 2.6%;
	margin-left: 1.3%
}

@media screen and (max-width:768px) {
	.column3 {
		margin: 0
	}

	.column3 li {
		float: left;
		width: 46%;
		margin-right: 2%;
		margin-bottom: 4%;
		margin-left: 2%
	}

}

@media screen and (max-width:640px) {
	.spcol1, .spcol1 li {
		margin-right: 0;
		margin-left: 0
	}

	.spcol1 li {
		float: none;
		width: 100%;
		margin-bottom: 30px
	}

}

.column4 {
	margin: 0
}

.column4 li {
	float: left;
	width: 22.4%;
	margin-right: 1.3%;
	margin-left: 1.3%
}

@media screen and (max-width:768px) {
	.column4 {
		margin: 0
	}

	.column4 li {
		float: left;
		width: 46%;
		margin-right: 2%;
		margin-bottom: 4%;
		margin-left: 2%
	}

}

.card_col4 .img_area img, .dt_half {
	width: 100%
}

.card_wrap .img_area img {
	width: 100%;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px
}

.card_wrap .post_area {
	padding: 20px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	background: #fff;
	box-shadow: 0 2px 5px #ececec
}

.card_wrap a {
	color: #434343
}

@media screen and (max-width:640px) {
	.card_wrap .post_area {
		padding: 20px 10px
	}

}

.card_col4 .post_area h3 {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 600;
	padding-bottom: 20px;
	color: #00335b
}

.card_col4 .post_area .area {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 150%;
	position: relative;
	display: inline-block;
	padding: 5px 15px;
	text-align: left;
	color: #00b9e7;
	border: 1px solid #00b9e7;
	border-radius: 50px
}

.card_col4 .post_area .area:before {
	font-family: FontAwesome;
	font-size: 16px;
	font-size: 1.6rem;
	position: absolute;
	left: 10px;
	display: inline-block;
	content: '\f041'
}

.card_col4 .post_area .area span {
	padding-left: 10px
}

.card_col4 .post_area .date {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 100%;
	padding-top: 20px;
	text-align: right
}

@media screen and (max-width:640px) {
	.card_col4 .post_area .area {
		font-size: 10px;
		font-size: 1rem
	}

}

.dt_half {
	display: table;
	table-layout: fixed
}

.dt_half>li {
	display: table-cell;
	vertical-align: middle
}

@media screen and (max-width:768px) {
	.dt_half>li {
		display: block
	}

	.dt_half>li:first-child {
		margin-bottom: 20px
	}

}

.togglemenu dd {
	display: none
}

.hero_ttl .inner {
	position: relative
}

.hero_ttl .inner a.hero_btn {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	border: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0
}

.brandbtn {
	width: 80%;
	margin: 30px auto 0
}

a.brand_btn {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "メイリオ", Meiryo, "ＭＳ 明朝", serif;
	padding: 1.3em .3em;
	position: relative;
	display: inline-block;
	color: #00335b;
	font-size: 18px;
	font-size: 1.8rem;
	margin: 0;
	text-align: center;
	text-decoration: none;
	outline: 0;
	width: 100%
}

a.brand_btn::after {
	position: absolute;
	top: 0;
	right: 100%;
	z-index: 2;
	display: block;
	content: attr(data-hover);
	width: 100%;
	height: 100%;
	padding: 1.3em .3em;
	background-color: #00335b;
	color: #fff;
	transition: all .3s;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.eff, .sec_nav li a {
	transition: all .5s ease
}

a.brand_btn:hover::after {
	top: 0;
	right: 0;
	background-color: #00335b;
	color: #fff
}

a.brand_btn:hover span {
	color: #fff
}

.card_col3 .post_area .area {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 150%;
	position: relative;
	display: inline-block;
	margin-top: 20px;
	padding: 5px 15px;
	text-align: left;
	color: #00b9e7;
	border: 1px solid #00b9e7;
	border-radius: 50px
}

.sec_nav li a, .sec_nav li:hover a i.fa {
	color: #04355a
}

.card_col3 .post_area .area span {
	padding-left: 10px
}

.card_col3 .post_area .area:before {
	font-family: FontAwesome;
	font-size: 16px;
	font-size: 1.6rem;
	position: absolute;
	left: 10px;
	display: inline-block;
	content: '\f041'
}

.post_news {
	position: relative
}

.post_news a.post_linkG {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999
}

.sec_nav li, .sec_nav li a {
	position: relative;
	overflow: hidden
}

@media screen and (min-width:1025px) {
	#secondNav {
		display: none
	}

}

@media screen and (max-width:768px) {
	#secondNav {
		display: inherit
	}

}

@media screen and (max-width:640px) {
	#secondNav .contents_inner {
		padding: 0 2px
	}

}

.sec_nav {
	width: 100%;
	display: flex;
	flex-flow: row wrap
}

.sec_nav li {
	width: 50%;
	padding: 2px flex:0 0 50%
}

.sec_nav li a {
	display: block;
	padding: 1.4em 1em;
	margin: 2px;
	font-weight: 600;
	border: 1px solid #04355a;
	font-size: 1.6rem;
	z-index: 2
}

.eff {
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	left: calc(-100% + 4px);
	top: 2px;
	background: #2dbae4;
	position: absolute;
	z-index: 1
}

.sec_nav li:hover .eff {
	left: 2px
}

.sec_nav li a i.fa {
	margin-right: .5em;
	color: #2dbae4
}

@media screen and (max-width:640px) {
	.sec_nav li a {
		font-size: 1.4rem
	}

	.sec_nav li a i.fa {
		font-size: 1.2rem
	}

}

#hero {
	height: 100%
}

.hero_img01 {
	z-index: 2;
	overflow: hidden;
	width: 100%;
	height: calc(100% - 108px);
	margin: 108px  0 auto;
	position: relative
}

.hero_img01 .hero_ttl {
	width: 100%;
	position: absolute;
	z-index: 50;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%)
}

.hero_img01 .hero_ttl .inner {
	position: relative
}

.hero_img01 .hero_ttl .inner {
	max-width: 360px;
	margin: 0 auto 0;
	padding: 30px 0;
	background: rgba(255, 255, 255, .8)
}

@media screen and (max-width:640px) {
	.hero_img01 .hero_ttl .inner {
		max-width: 280px;
		padding: 20px 0
	}

}

.hero_img01 .hero_ttl .inner a.hero_btn {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	border: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0
}

.hero_img01 .hero_ttl a {
	display: block;
	width: 80%;
	margin: 30px auto 0;
	padding: 18px 0;
	text-align: center;
	border: 1px solid #00335b
}

.hero_img01 .hero_ttl a.brand_btn::after {
	padding: 18px 0
}

.hero_img01 {
	width: 100vw;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2
}

.hero_img01 .slideshow {
	position: absolute;
	width: 100vw;
	height: 100%;
	overflow: hidden
}

.hero_img01 .slideshow-image {
	position: absolute;
	width: 100%;
	height: 100%;
	background: no-repeat 50% 50%;
	background-size: cover;
	animation-name: kenburns;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 25s;
	opacity: 1;
	transform: scale(1.08)
}

.hero_img01 .slideshow-image:nth-child(1) {
	-webkit-animation-name: kenburns-1;
	animation-name: kenburns-1;
	z-index: 2
}

.hero_img01 .slideshow-image:nth-child(2) {
	-webkit-animation-name: kenburns-2;
	animation-name: kenburns-2;
	z-index: 1
}

.hero_img01 .slideshow-image:nth-child(3) {
	-webkit-animation-name: kenburns-3;
	animation-name: kenburns-3;
	z-index: 0
}

@-webkit-keyframes kenburns-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	3.3333333333% {
		opacity: 1
	}

	30% {
		opacity: 1
	}

	36.6666666667% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	96.6666666667% {
		opacity: 0;
		-webkit-transform: scale(1.0872727273);
		transform: scale(1.0872727273)
	}

	100% {
		opacity: 1
	}

}

@keyframes kenburns-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	3.3333333333% {
		opacity: 1
	}

	30% {
		opacity: 1
	}

	36.6666666667% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	96.6666666667% {
		opacity: 0;
		-webkit-transform: scale(1.0872727273);
		transform: scale(1.0872727273)
	}

	100% {
		opacity: 1
	}

}

@-webkit-keyframes kenburns-2 {
	30% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	36.6666666667% {
		opacity: 1
	}

	63.3333333333% {
		opacity: 1
	}

	70% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

}

@keyframes kenburns-2 {
	30% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	36.6666666667% {
		opacity: 1
	}

	63.3333333333% {
		opacity: 1
	}

	70% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

}

@-webkit-keyframes kenburns-3 {
	63.3333333333% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	70% {
		opacity: 1
	}

	96.6666666667% {
		opacity: 1
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

}

@keyframes kenburns-3 {
	63.3333333333% {
		opacity: 1;
		-webkit-transform: scale(1.08);
		transform: scale(1.08)
	}

	70% {
		opacity: 1
	}

	96.6666666667% {
		opacity: 1
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

}