@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@600&display=swap');

body {
  background-color: #ffffff;
	font-family: "游ゴシック",YuGothic,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
p, li{font-size: 1.6rem;}

.br-pc{display: inline !important}
.br-sp{display: none !important}
.img-pc{display: block !important}
.img-sp{display: none !important}
@media screen and (max-width: 680px) {
.br-pc{display: none !important}
.br-sp{display: inline !important}	
.img-pc{display: none !important}
.img-sp{display: block !important}	
}

.width5em { width: 5em !important; }
.width10em { width: 10em !important; }
.width15em { width: 15em !important; }
.width50em { width: 50em !important; }
.width15per { width: 15% !important; }
.width35per { width: 35% !important; }
.width50per { width: 50% !important; }
.width80per { width: 80% !important; }
.width90per { width: 90% !important; }
.width100per { width: 99% !important; }
.width-auto { width: auto !important; }


/*ヘッダー*/
.header-top{
    align-items: flex-start;
    height: 40px;
}
h1.header-top__title a{
    margin-top: 0px;
    display: flex;
    align-items: flex-end;
	flex-wrap: wrap;
    width: 400px;
    margin-left: 10px;
}
h1.header-top__title a span#h1-logo{width: 200px}
h1.header-top__title a span#h1-copy{
    font-size: 14px;
    font-weight: bold;
	display: block;
	margin-left: 15px
}

.header-bottom{
    background-color: #ffffff;
    border-top: 1px solid #0c7061;
	border-bottom: 1px solid #0c7061;
	height: 92px
}
.header-bottom .gnav{
    justify-content: space-between;
    width: 1000px;
    margin: auto;
}
.header-bottom .gnav__item--01,
.header-bottom .gnav__item--02,
.header-bottom .gnav__item--03,
.header-bottom .gnav__item--04,
.header-bottom .gnav__item--05,
.header-bottom .gnav__item--06,
.header-bottom .gnav__item--07{
  max-width: 20%
}
.header-bottom .gnav__item a{
    color: #0c7061;
    padding-top: 10px;
	height: 90px;
}
.header-bottom .gnav__item a.current{
	background-color: #0c7061 !important;
	color: #ffffff !important
}
.header-bottom .gnav__item a.current,
.header-bottom .gnav__item a.current .gnav__item-icon:before,
.header-bottom .gnav__item a:hover .gnav__item-icon:before,
.header-bottom .gnav__item a.current .gnav__item-icon:before{
    color: #ffffff;
}
.header-bottom .gnav__item-inner{
	font-weight: normal;
	font-weight: bold}
.header-bottom .gnav__item-inner:after {display: none}
.header-bottom .gnav__item-inner.gnav__item-inner--last:after {content: none}
.header-bottom .gnav__item a:hover .gnav__item-icon:before {color: #ffffff}
.header-bottom .gnav__item a:hover .gnav__item-icon:before{
	top: 40%;
	transition: all 0.3s linear;
}
.ico-07:before {
	font-family: 'FontAwesome';
    content: "\f15c";
}

.header-top-area-list__item a{color: #0c7061}
.header-top-area-list__item a:before{
	font-family: 'FontAwesome';
	margin-right: 5px;
	color: #0c7061;
}
.header-top-area-list__item.header-top-area-list__item--01 a:before{content: "\f015"}
.header-top-area-list__item.header-top-area-list__item--02 a:before{content: "\f08e"}
.header-top-area-list__item.header-top-area-list__item--03 a:before{content: "\f0e8"}
.header-top-area-list__item.header-top-area-list__item--04 a:before{
	font-family: 'jabank' !important;
	content: "\e90b";
	font-size: 10px;
}

/*スクロール固定*/
.header-bottom.scrolled {
    position: fixed;
	top: 0;
    width: 100%;
    transition: all .3s;
	border-top: none;
	height: 73px;
	border-bottom: 3px solid #0c7061;
	box-shadow: 0 6px 5px -3px rgba(0,0,0,.3);
}
.header-bottom.scrolled .gnav{height: 70px}
.header-bottom.scrolled .gnav__item a{
	padding-top: 0;
	padding-bottom: 0;
	height: 70px;
}
.header-bottom.scrolled .gnav__item-inner{
	height: 70px;
	line-height: 1}
body>.wrapper.scrolled{
	position: fixed;
    max-width: 1000px;
    z-index: 2;
    margin: auto;
    left: 0;
    right: 0;
    top: 70px;
}
body>.wrapper.scrolled .login{
	position: absolute;
    top: 0;
    right: 0;
}

/*ログインボタン*/
.header-top-area{
    justify-content: flex-end;
    height: 40px;
}
.header-top-area-login a{
    height: 40px;
	line-height: 40px;
    font-size: 17px;
    background-color: #ff8000;
    color: #ffffff;
    padding: 0px 15px;
    display: block;
}
.header-top-area-login a:after {
    font-family: 'jabank' !important;
    content: "\e90c";
    margin-left: 5px;
}
@media screen and (max-width: 960px) {
.header-bottom .gnav{width: 100%;}
}
@media screen and (max-width: 768px) {
.header{height: 65px}	
h1.header-top__title a{width: 300px}
h1.header-top__title a span#h1-copy{
	margin-left: 0;
	margin-top: 10px
}	
.header-top {
    height: 65px;
    align-items: center;
	position: fixed;
	top: 0;
    background-color: #ffffff;
    width: 100%;
	border-bottom: 1px solid #0c7061;
}	
}

/*ぱんくず*/
.breadcrumbs {
    background-color: #0c7061;
	border-bottom: 1px dotted #0c7061;
}
.breadcrumbs__list-item {color: #ffffff;}
.breadcrumbs__list{font-size: 1.3rem}
.breadcrumbs__list-item>a{color: #ffffff;}

/*見出し*/
.wrapper > section:first-child h2.heading-page{margin-top: 0px;}
.heading-page__icon {
    margin: auto;
    display: block;
	padding-bottom: 10px;
}
.h3-heading-page{
    font-size: 2.5em;
    color: #007463;
    font-weight: bold;
    border-top: 1px solid #007463;
    border-bottom: 1px solid #007463;
    margin-bottom: 30px;
    padding: 10px;
    line-height: 1.4;
}
span.heading-icon{
    width: 30px;
    display: inline-block;
	vertical-align: text-bottom;
	margin-right: 5px
}
h3.heading-pg {
    font-size: 2.5em;
    letter-spacing: 0;
    padding-bottom: 0px;
    color: #007463;
    font-weight: bold;
    line-height: 1.4;
    position: relative;
    padding-left: 30px
}
h3.heading-pg:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
    width: 20px;
    height: 1px;
    background-color: #0c7061;
}
.txt-bold {font-weight: bold;}
.title__naname-up {
    color: #007463;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: .07em;
    line-height: 1.6;
}
.title__naname-up:after {
    content: "";
    display: block;
    border-bottom: 3px double #007463
}
.txt-center{text-align: center!important}
.txt-right{text-align: right!important}
.txt-small{font-size: 14px !important}
@media screen and (max-width: 768px) {
.heading-page {
	font-size: 2.2rem;
	margin-bottom: 1em
}
.h3-heading-page{font-size: 2em;}	
}
@media screen and (max-width: 768px) {
#ja-mark{
    width: 200px;
    margin: auto auto 20px;
}
.title__naname-up {}	
}

/*カラム*/
.container-flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
.container-flex-left {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap
}
.container-flex-center {
	display: flex;
	justify-content: center;
	flex-wrap: wrap
}
.block-wide {width: 85% !important}
.block-half {width: 48.5% !important}
.block-medium {width: 65% !important}
.block-small {width: 30% !important}
.block-15pre {width: 15% !important}
.block-80pre {width: 80% !important}
.block-100pre {width: 100% !important}
.margin-auto{
	margin-left: auto;
	margin-right: auto;
}
.flex-all{flex: 1 0 100%}
.box-gray{
    padding: 20px;
    background-color: #F0F0F0;
    margin: 0 auto;
    font-size: 1.3rem
}
.inline-block{display: inline-block !important}
.bg-green {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e4f3e9;
    padding: 1.5rem;
}
@media screen and (max-width: 680px){
.block-wide,	
.block-half,
.block-medium,
.block-80pre {width: 100% !important}
.block-small,
.block-15pr{width: 50% !important}
}

/*テーブル*/
.table th {
    background-color: #fffef0;
	text-align: center
}
.table td, .table th {border: 1px solid #D5D5D5;}

/*ボタン*/
.btn-container{
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	display: block
}
.btn-container li{margin: 0;}
a.btn-basic{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #007463;
    display: inline-block;
    min-width: 300px;
    padding: 10px 15px;
    line-height: 1.6;
}
a.btn-basic:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 5px -3px rgba(0,0,0,.3);
}
a.btn-arrow:before{
	font-family: 'FontAwesome';
    content: "\f138";
    color: #ffffff;
    margin-right: 5px;
	display: inline-block
}
a.btn-external-link:after{
	font-family: 'FontAwesome';
    content: "\f08e";
    color: #ffffff;
    margin-left: 5px;
	display: inline-block
}
/*アイコン*/
a.icon_pdf:after{
	font-family: 'FontAwesome';
	content: " \f1c1";
	color: #0c7061;
	background: none;
	line-height: 1;
	text-decoration: none !important;
}
a.icon-external-link:after{
    font-family: 'FontAwesome';
    content: " \f08e";
    color: #0c7061;
    background: none;
    line-height: 1;
    text-decoration: none !important;
}
.icon-tel{
	width: 30px;
	display: inline-block;
	vertical-align: text-bottom;
}

/*リンクパネル*/
.link-list {
    display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: 1.6rem
}
.link-list > li {
	width: 100%;
	margin: 20px 1.5%;
    background: #e4f3e9;
    box-shadow: 0px 0px 0px 10px #e4f3e9;
    border: dashed 2px #ffffff;
    position: relative;
    line-height: 1.5;
	transition: transform .3s;
}
.link-list > li a{
    padding: 15px;
    display: flex;
	
}
.link-list--two > li{width: 47%;}
.link-list--tree > li{width: 30%;}
.link-list__noflex > li a{display: block}

a.link-panel-01{
	display: flex;
    align-items: center;
	height: 100%;
}
a.link-panel--h100{height: 100px}
.link-list > li:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #ffffff transparent;
    position: absolute;
    right: -2px;
    bottom: -2px;
}
.link-list > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 5px -3px rgba(0,0,0,.3);
	transition: transform .3s;
}
a.icon_pdf__head:before,
a.icon_pdf__head__wh:before{
    font-family: 'FontAwesome';
    content: "\f1c1";
    color: #0c7061;
    background: none;
    line-height: 1;
    margin-right: 0.6em;
}
a.icon_pdf__head__wh:before{color: #ffffff;}
a.icon_arrow__head:before,
a.icon_arrow__head__wh:before{
    display: inline-block;
    font-family: 'FontAwesome';
    content: "\f138";
    color: #007463;
    margin-right: 5px;
}
a.icon-external-link__head:before,
.icon-external-link__head:before,
a.icon-external-link__head__wh:before{
    display: inline-block;
    font-family: 'FontAwesome';
    content: "\f08e";
    color: #007463;
    margin-right: 8px;
}
a.icon_arrow__head__wh:before,
a.icon-external-link__head__wh:before{color: #ffffff;}
a.link-txt-gr{
	font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #007463;
}
@media screen and (max-width: 768px) {
.link-list--tree > li{width: 50%;}	
}
@media screen and (max-width: 480px) {
.link-list--two > li,	
.link-list--tree > li{width: 100%;}	
}

/*テキストリンク*/
.link-list--txt__20per{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
	flex-wrap: wrap
}
.link-list--txt__20per li{width: 20%}
.link-list--txt li a{
    color: #0c7061;
    text-decoration: underline;
    padding: 1rem 0 1rem 1em;
    display: block;
    line-height: 1.5;
    text-indent: -0.5em;
}
.link-list--txt li > a:before {
    font-family: 'FontAwesome';
    content: "\f105";
    display: inline-block;
    position: relative;
    top: 0.2rem;
    margin-right: 5px;
}
@media screen and (max-width: 768px) {
.link-list--txt__20per li{width: 33%;}	
}
@media screen and (max-width: 480px) {
.link-list--txt__20per li{width: 50%;}	
}

/*リスト*/
p.txt-indent,
.txt-indent li{
	padding-left: 1em;
	text-indent: -1em
}
.txt-indent li{
	margin-top: 10px;
	margin-bottom: 10px
}

/*アンカー*/
.li-anchor{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px dotted #0c7061;
    border-bottom: 1px dotted #0c7061;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.li-anchor li{margin-right: 3%;}
.li-anchor li a{
    display: block;
    color: #0c7061;
	padding-top: 0.7rem;
    padding-bottom: 0.7rem;
	font-size: 1.5rem
}
.li-anchor li a:before{
	font-family: 'FontAwesome';
	content: "\f103";
	margin-right: 5px
}

/*フッターバナー*/
.footer-banner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-banner li a{
	display: block;
	margin-bottom: 20px;
}
.footer-banner li.page-link{
    width: 32%
}
.footer-banner li.page-link a{
    border: 1px solid #007463;
    width: 100%;
    height: 80px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007463;
	line-height: 1.3
}
.footer-banner li.page-link a:after{
	font-family: 'FontAwesome';
	content: "\f105";
	font-weight: normal;
	padding-left: 20px
}
.footer-banner li.page-link a:before {
    font-family: 'FontAwesome';
    content: "\f138";
    color: #ffffff;
    padding-right: 5px;
}
.footer-banner li.page-link a:after {display: none}
.footer-banner li a:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 5px -3px rgba(0,0,0,.3);
}
.footer-main li.footer-container-box__list-item__title a{
	font-weight: bold;
	font-size: 120%;
}
#footer-banner-outer{
    background-color: #fffef0;
    padding-top: 50px;
    padding-bottom: 30px;
}
.footer-bottom{
	background-color: #ffffff;
    border-top: 1px solid #D5D5D5;
    padding-top: 15px;
}
.footer-bottom__list-item {
    float: none;
    display: inline-block;	
}
.footer-bottom .copyright {
    float: none;
    margin-top: 5px;
}
@media screen and (max-width: 768px) {
.footer-banner li.page-link{width: 45%}	
#footer-banner-outer{padding-bottom: 0px;}	
}
@media screen and (max-width: 680px) {
.footer-banner{justify-content: center}	
.footer-banner li.page-link{width: 300px}	
.footer-banner li.page-link a{
    height: 70px;
	font-size: 15px;}	
}

/* ページトップ */
.pagetop a{
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 50px;
	height: 50px;
	color: #ffffff;
	background-color: #0c7061;
	line-height: 45px;	
	font-size: 3em;
	text-align: center;
	display: block;
	z-index: 2;
	transition: opacity 1s;
}
.pagetop a:after {
	font-family: 'FontAwesome';
	content: "\f106"
}
@media screen and (max-width: 768px) {
.pagetop a{
	left: auto;
	right: 0px;
	bottom: 75px !important;
}	
}

/*フォーム*/
.mfp_buttons button {
    background: #0c7061;
    color: #ffffff;
    font-size: 20px;
    width: 200px;
    height: 60px;
    border: none;
    text-shadow: none;
    margin-top: 60px;
	border-radius: 0
}
.mfp_buttons button:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 5px -3px rgba(0,0,0,.3);
}
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date {
    box-shadow: none !important;
}
#mailformpro input,
#mailformpro select{border: solid 1px #CCC;}
#mailformpro .form-mail {width: 60% !important}
div#mfp_phase_confirm h4 {
	font-size: 25px !important;
	font-weight: bold;
	margin-bottom: 10px
}
div#mfp_phase_confirm div#mfp_phase_confirm_inner {
	background-color: #fafafa;
}
table#mfp_confirm_table{
	width: 95% !important;
	margin: auto !important
}
table#mfp_confirm_table tr.mfp_achroma { background-color: #fffef0 !important;}
table#mfp_confirm_table tr.mfp_colored {background-color: #ffffff !important;}
table#mfp_confirm_table tr th, table#mfp_confirm_table tr td{font-size: 16px !important}
@media screen and (max-width: 680px) {
#mailformpro .form-mail {width: 100% !important}	
div#mfp_phase_confirm h4 {font-size: 18px !important;}	
}

/*よりそう*/
#lifeevent{background-color: #f0f8e7}
#lifeevent-visual{
    position: relative;
    max-width: 1300px;
    margin: 0 auto 50px;
}
#visual img{width: 100%}
#h2-lifeevent{
    font-size: 40px;
    color: #0c7061;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
.visual-fukidashi{
	position: absolute;
	bottom: 25px;
	width: 32%
}
#visual-02{
	left: 20%;
	animation: fuwafuwa 2s infinite ease-in-out;
}
#visual-03{
	right: 18%;
	animation: fuwafuwa 2s infinite 1s ease-in-out;
}
@keyframes fuwafuwa {
0% {transform: translate(0, 0);}
50% {transform: translate(0, -5px);}
100% {transform: translate(0, 0);}
}

.box-qa{
    background-color: #ffffff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 80px;
}
.column-q{
	border-bottom: 3px solid #0c7061;
	align-items: center;
	padding-top: 20px;
}
.image-q{
    width: 200px;
	margin-right: 40px
}
.column-q .container-flex-left{width: calc(100% - 250px)}
.column-q dl{
	padding-left: 30px;
	align-items: center
}
.box-qa dt,
.box-qa dd{
	color: #0c7061;
	font-weight: bold
}
.box-qa dt{
	font-size: 60px;
	margin-right: 20px;
	font-family: 'Red Hat Text', sans-serif;
}
 .box-qa dd{
    font-size: 25px;
    line-height: 1.5;
	width: calc(100% - 100px)
}
.box-qa .column-q dd{width: calc(100% - 100px)}
.box-qa .column-a dd{width: calc(100% - 100px)}
.column-a{margin: 30px 50px 50px}
.image-a{
    width: 200px;
    margin: auto
}
.column-a-inner{
	background-color: #ffda2f;
	border-radius: 10px;
	padding: 30px;
}
.column-a dl{
	margin-bottom: 20px;
	align-items: center
}
.column-a p{
	font-size: 18px;
	line-height: 1.8;
	font-weight: bold;
	margin-bottom: 30px
}
.column-a li{
    margin-bottom: 15px;
    text-align: center;
}
#lifeevent a.btn-basic{min-width: 350px}
@media screen and (max-width: 960px) {
#h2-lifeevent{font-size: 34px;}	
}
@media screen and (max-width: 768px) {
#h2-lifeevent{
    font-size: 30px;
    top: 15px;
	padding-bottom: 5px;
}		
.column-q dl{width: 80%}	
.box-qa dt{font-size: 45px;}	
.box-qa dd{
    font-size: 20px;
    line-height: 1.4;
}	
.column-a {margin: 30px}
.column-a p{font-size: 16px;}	
}
@media screen and (max-width: 680px) {
#visual{border-top: 30px solid #c1e6ea}	
.visual-fukidashi{
	bottom: 0px;
	width: 42%
}
#visual-02{left: 9%;}
#visual-03{right: 9%;}
#h2-lifeevent{font-size: 22px;}
.column-a-inner{padding: 20px;}	
.column-q .container-flex-left {width: 100%;}	
.column-q dl{
	width: 80%;
	padding-left: 20px;
	padding-right: 20px;
}
.image-q {
	width: 150px;
    margin-right: 0;
    margin-left: auto;
}	
.image-a {width: 150px;}	
.box-qa dd{font-size: 18px;}
.box-qa .column-q dd,
.box-qa .column-a dd{width: calc(100% - 70px);}	
.column-a {margin: 20px}
.column-a p{font-size: 15px;}	
.column-a li a{min-width: 100% !important}	
#lifeevent a.btn-basic{
	min-width: 310px;
	padding: 10px 5px;
}	
}



/*---------------------------------------------
	新着情報
  ---------------------------------------------*/
.news-list li {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
	border-bottom: 1px dotted #9b9b9b
}
.news-list li a{
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.4;
    width: calc(100% - 250px);
    font-size: 1.6rem;
    color: #007463;
}
.news-list li .category{
    font-size: 1.3rem;
    text-align: center;
    color: #ffffff;
    width: 90px;
    font-weight: bold;
    padding: 3px 0;
    border-radius: 4px;
}
.news-list li .category-news{background-color: #a4d12b}
.news-list li .category-oshirase{background-color: #fd8023}
.news-list li:last-child {
  margin-bottom: 0
}
.news-list li time {
  display: block;
  margin: 0 20px;
  font-size: 1.6rem;
  line-height: 1.6;
  white-space: nowrap
}
.content-image-news{
	margin-top: 10px;
	margin-bottom: 10px
}
.news-ichiran{
	text-align: center;
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px dotted #9b9b9b
}
@media screen and (max-width: 768px) {
.news-list {width: 90%;}
.news-list li{padding-top: 10px}	
.news-list li a{
	width: 100%;
	padding-top: 0
}	
}