@charset "utf-8";
/* CSS Document */
body { margin: 0; color: #555; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; line-height: 2;}

/* 全体設定 */
main { padding-top: 80px; }

/* tab_linkアニメーション */
.tab_link { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link img { width: 100%; }
.tab_link p { width: 60px; height: 60px; margin: 10px auto 0; padding: 22px; background-color: #e7f2fc; border-radius: 50%; display: inline-block; }
.tab_link a { display: block; width: 76%; margin: 0 auto; padding: 0; font-size: 14px; line-height: 1.5; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* tab_link_newsアニメーション */
.tab_link_news { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link_news:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link_news a { display: block; width: 80%; margin: 0 0 0 4%; padding: 0; font-size: 13px; line-height: 1.4; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* 緊急情報表示設定 */
#insert_erea { width: 96%; max-width: 1200px; margin: 20px auto 40px; padding: 0;}
#insert_erea ul { width: 100%; margin: 0 auto; padding: 0;}
#insert_erea ul li:first-child { width: 97%; margin: 0 auto; padding: 1.6% 1.5% 1.4%; background-color: #ff0000; font-size: 15px; line-height: 1; color: #FFF; font-weight: bold; text-align: center; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); border: solid 1px #ff0000;}
#insert_erea ul li:last-child { width: 96%; margin: 0 auto; padding: 1.25% 2% 1.5%; background-color: #FFF; font-size: 13.5px; line-height: 1.5; font-weight: normal; text-align: left; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); border: solid 1px #dcdcdc; }
#insert_erea ul a { color: #ff0000; font-weight: bold; text-decoration: none;}

/* エリア1表示設定 */
#erea_01 { width: 96%; max-width: 1200px; margin: 45px auto 0;}

#erea_01 ul { width: 100%; margin: 0 auto; padding: 0; display: flex;}
#erea_01 ul li:first-child { width: 49%;}
#erea_01 ul li:last-child { width: 49%; margin-left: 2%;}

#erea_01 .business_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #F8FDFF; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .business_pt:before,.business_pt:after { position: absolute; content: ''; }
#erea_01 .business_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #F8FDFF; }
#erea_01 .business_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #F8FDFF; }
#erea_01 .business_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease; }
#erea_01 .business_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #246fe0; }
#erea_01 .business_pt span { width: 100%; background: #246fe0; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #F8FDFF;  position: relative; z-index: 1; display: block; }

#erea_01 .business_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt a { font-size: 15px; font-weight: bold; color: #0040B1; text-decoration: none; line-height: 1; }
#erea_01 .business_pt a:hover { color: #FF0000; }

#erea_01 .consumer_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #fffdf8; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .consumer_pt:before,.consumer_pt:after { position: absolute; content: ''; }
#erea_01 .consumer_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #fffdf8; }
#erea_01 .consumer_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #fffdf8; }
#erea_01 .consumer_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease;}
#erea_01 .consumer_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #FF9600; }
#erea_01 .consumer_pt span { width: 100%; background: #FF9600; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #fffdf8; position: relative; z-index: 1; display: block; }
#erea_01 .consumer_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt a { font-size: 15px; font-weight: bold; color: #E58418; text-decoration: none; line-height: 1; }
#erea_01 .consumer_pt a:hover { color: #FF0000; }

/* エリア2表示設定 */
#erea_02 { width: 100%; margin: 30px auto 0; padding: 0; background-color: #f5f7fa; background: #FFF url("../img/top/erea2.png") no-repeat bottom center/cover;}
#erea_02 h1 { font-size: 24px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_02 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_02 h2 { margin: 16px 0 10px; font-size: 18px; font-weight: bold; color: #000000;}

#erea_02 ul { width: 96%; max-width: 1200px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_02 ul li { padding: 1% 1% 2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_02 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_02 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_02 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_02 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_02 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_02 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_02 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }

/* エリア3表示設定 */
#erea_03 { width: 100%; margin: 10px auto 0; background-color: #FFF;}
#erea_03 h1 { font-size: 24px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_03 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_03 h2 { margin: 16px 0 10px; font-size: 18px; font-weight: bold; color: #000000;}

#erea_03 ul { width: 96%; max-width: 1200px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_03 ul li { padding: 1% 1% 2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_03 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_03 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_03 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_03 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_03 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_03 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_03 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }

/* エリア4表示設定 */
#erea_04 { width: 100%; margin: 10px auto 0; padding: 4px 0 0; background-color: #f5f7fa;}
#erea_04 h1 { font-size: 24px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_04 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_04 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_04 ul { width: 96%; max-width: 1200px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_04 ul li { padding: 1% 1% 1.2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: left; }
#erea_04 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_04 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_04 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_04 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_04 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_04 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_04 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }

@media screen and (max-width: 1100px) {

/* tab_linkアニメーション */
.tab_link { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link img { width: 100%; }
.tab_link p { width: 60px; height: 60px; margin: 10px auto 0; padding: 22px; background-color: #e7f2fc; border-radius: 50%; display: inline-block; }
.tab_link a { display: block; width: 76%; margin: 0 auto; padding: 0; font-size: 12px; line-height: 1.5; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* tab_link_newsアニメーション */
.tab_link_news { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link_news:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link_news a { display: block; width: 80%; margin: 0 0 0 4%; padding: 0; font-size: 12px; line-height: 1.4; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* エリア1表示設定 */
#erea_01 { width: 92%; max-width: 1000px; margin: 45px auto 0;}

#erea_01 ul { width: 100%; margin: 0 auto; padding: 0; display: flex;}
#erea_01 ul li:first-child { width: 49%;}
#erea_01 ul li:last-child { width: 49%; margin-left: 2%;}

#erea_01 .business_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #F8FDFF; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .business_pt:before,.business_pt:after { position: absolute; content: ''; }
#erea_01 .business_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #F8FDFF; }
#erea_01 .business_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #F8FDFF; }
#erea_01 .business_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease; }
#erea_01 .business_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #246fe0; }
#erea_01 .business_pt span { width: 100%; background: #246fe0; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #F8FDFF;  position: relative; z-index: 1; display: block; }

#erea_01 .business_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt a { font-size: 15px; font-weight: bold; color: #0040B1; text-decoration: none; line-height: 1; }
#erea_01 .business_pt a:hover { color: #FF0000; }

#erea_01 .consumer_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #fffdf8; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .consumer_pt:before,.consumer_pt:after { position: absolute; content: ''; }
#erea_01 .consumer_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #fffdf8; }
#erea_01 .consumer_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #fffdf8; }
#erea_01 .consumer_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease;}
#erea_01 .consumer_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #FF9600; }
#erea_01 .consumer_pt span { width: 100%; background: #FF9600; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #fffdf8; position: relative; z-index: 1; display: block; }
#erea_01 .consumer_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt a { font-size: 15px; font-weight: bold; color: #E58418; text-decoration: none; line-height: 1; }
#erea_01 .consumer_pt a:hover { color: #FF0000; }

/* エリア2表示設定 */
#erea_02 { width: 100%; margin: 30px auto 0; padding: 0; background-color: #f5f7fa; background: #FFF url("../img/top/erea2.png") no-repeat bottom center/cover;}
#erea_02 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_02 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_02 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_02 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_02 ul li { padding: 2% 1% 3%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_02 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_02 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_02 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_02 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_02 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_02 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_02 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }

/* エリア3表示設定 */
#erea_03 { width: 100%; margin: 10px auto 0; background-color: #FFF;}
#erea_03 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_03 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_03 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_03 ul li { padding: 2% 1% 3%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_03 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_03 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_03 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_03 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_03 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_03 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_03 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }

/* エリア4表示設定 */
#erea_04 { width: 100%; margin: 10px auto 0; padding: 4px 0 0; background-color: #f5f7fa;}
#erea_04 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_04 h2 { margin: 16px 0 10px; font-size: 14px; font-weight: bold; color: #000000;}

#erea_04 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_04 ul li { padding: 1% 1% 1.2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: left; }
#erea_04 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_04 ul li:nth-child(1) { width: 30%; margin: 2% 1% 1% 0; }
#erea_04 ul li:nth-child(2) { width: 30%; margin: 2% 1% 1%; }
#erea_04 ul li:nth-child(3) { width: 30%; margin: 2% 0 1% 1%; }
#erea_04 ul li:nth-child(4) { width: 30%; margin: 1% 1% 2% 0; }
#erea_04 ul li:nth-child(5) { width: 30%; margin: 1% 1% 2%; }
#erea_04 ul li:nth-child(6) { width: 30%; margin: 1% 0 2% 1%; }
}

@media screen and (max-width: 768px) {
/* tab_linkアニメーション */
.tab_link { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link img { width: 100%; }
.tab_link p { width: 60px; height: 60px; margin: 10px auto 0; padding: 22px; background-color: #e7f2fc; border-radius: 50%; display: inline-block; }
.tab_link a { display: block; width: 76%; margin: 0 auto; padding: 0; font-size: 14px; line-height: 1.5; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* tab_link_newsアニメーション */
.tab_link_news { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link_news:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link_news a { display: block; width: 80%; margin: 0 0 0 4%; padding: 0; font-size: 13px; line-height: 1.4; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* エリア1表示設定 */
#erea_01 { width: 92%; max-width: 1000px; margin: 45px auto 0;}

#erea_01 ul { width: 100%; margin: 0 auto; padding: 0; display: block;}
#erea_01 ul li:first-child { width: 100%;}
#erea_01 ul li:last-child { width: 100%; margin: 60px 0 0;}

#erea_01 .business_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #F8FDFF; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .business_pt:before,.business_pt:after { position: absolute; content: ''; }
#erea_01 .business_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #F8FDFF; }
#erea_01 .business_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #F8FDFF; }
#erea_01 .business_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease; }
#erea_01 .business_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #246fe0; }
#erea_01 .business_pt span { width: 100%; background: #246fe0; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #F8FDFF;  position: relative; z-index: 1; display: block; }

#erea_01 .business_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt a { font-size: 15px; font-weight: bold; color: #0040B1; text-decoration: none; line-height: 1; }
#erea_01 .business_pt a:hover { color: #FF0000; }

#erea_01 .consumer_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #fffdf8; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .consumer_pt:before,.consumer_pt:after { position: absolute; content: ''; }
#erea_01 .consumer_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #fffdf8; }
#erea_01 .consumer_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #fffdf8; }
#erea_01 .consumer_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease;}
#erea_01 .consumer_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #FF9600; }
#erea_01 .consumer_pt span { width: 100%; background: #FF9600; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #fffdf8; position: relative; z-index: 1; display: block; }
#erea_01 .consumer_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt a { font-size: 15px; font-weight: bold; color: #E58418; text-decoration: none; line-height: 1; }
#erea_01 .consumer_pt a:hover { color: #FF0000; }

/* エリア2表示設定 */
#erea_02 { width: 100%; margin: 30px auto 0; padding: 0; background-color: #f5f7fa; background: #FFF url("../img/top/erea2.png") no-repeat bottom center/cover;}
#erea_02 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_02 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_02 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_02 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_02 ul li { padding: 2% 1% 3%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_02 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_02 ul li:nth-child(1) { width: 47%; margin: 2% 1% 1% 0; }
#erea_02 ul li:nth-child(2) { width: 47%; margin: 2% 0 1% 1%; }
#erea_02 ul li:nth-child(3) { width: 47%; margin: 1% 1% 1% 0; }
#erea_02 ul li:nth-child(4) { width: 47%; margin: 1% 0 1% 1%; }
#erea_02 ul li:nth-child(5) { width: 47%; margin: 1% 1% 1% 0; }
#erea_02 ul li:nth-child(6) { width: 47%; margin: 1% 0 1% 1%; }

/* エリア3表示設定 */
#erea_03 { width: 100%; margin: 10px auto 0; background-color: #FFF;}
#erea_03 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_03 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_03 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_03 ul li { padding: 2% 1% 3%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_03 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_03 ul li:nth-child(1) { width: 47%; margin: 2% 1% 1% 0; }
#erea_03 ul li:nth-child(2) { width: 47%; margin: 2% 0 1% 1%; }
#erea_03 ul li:nth-child(3) { width: 47%; margin: 1% 1% 1% 0; }
#erea_03 ul li:nth-child(4) { width: 47%; margin: 1% 0 1% 1%; }

/* エリア4表示設定 */
#erea_04 { width: 100%; margin: 10px auto 0; padding: 4px 0 0; background-color: #f5f7fa;}
#erea_04 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_04 h2 { margin: 16px 0 10px; font-size: 14px; font-weight: bold; color: #000000;}

#erea_04 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: flex; flex-wrap: wrap; }
#erea_04 ul li { padding: 1% 1% 1.2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: left; }
#erea_04 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_04 ul li:nth-child(1) { width: 47%; margin: 2% 1% 1% 0; }
#erea_04 ul li:nth-child(2) { width: 47%; margin: 2% 0 1% 1%; }
#erea_04 ul li:nth-child(3) { width: 47%; margin: 2% 1% 1% 0; }
#erea_04 ul li:nth-child(4) { width: 47%; margin: 2% 0 1% 1%; }
#erea_04 ul li:nth-child(5) { width: 47%; margin: 1% 1% 1% 0; }
#erea_04 ul li:nth-child(6) { width: 47%; margin: 1% 0 1% 1%; }
}

@media screen and (max-width: 568px) {
/* tab_linkアニメーション */
.tab_link { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link img { width: 100%; }
.tab_link p { width: 60px; height: 60px; margin: 10px auto 0; padding: 22px; background-color: #e7f2fc; border-radius: 50%; display: inline-block; }
.tab_link a { display: block; width: 76%; margin: 0 auto; padding: 0; font-size: 14px; line-height: 1.5; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* tab_link_newsアニメーション */
.tab_link_news { background: #FFF url(../img/icon/ic_arrow_right.svg) no-repeat center right 15px; background-size: 9px 15px; }
.tab_link_news:hover { background-position: center right 10px; transition: background-position .2s, box-shadow .2s; }
.tab_link_news a { display: block; width: 80%; margin: 0 0 0 4%; padding: 0; font-size: 13px; line-height: 1.4; font-weight: bold; color: #5B5B5B; text-decoration: none;  }

/* エリア1表示設定 */
#erea_01 { width: 92%; max-width: 1000px; margin: 45px auto 0;}

#erea_01 ul { width: 100%; margin: 0 auto; padding: 0; display: block;}
#erea_01 ul li:first-child { width: 93%; margin: 0 auto 0;}
#erea_01 ul li:last-child { width: 93%; margin: 60px auto 0;}

#erea_01 .business_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #F8FDFF; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .business_pt:before,.business_pt:after { position: absolute; content: ''; }
#erea_01 .business_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #F8FDFF; }
#erea_01 .business_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #F8FDFF; }
#erea_01 .business_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease; }
#erea_01 .business_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #246fe0; }
#erea_01 .business_pt span { width: 100%; background: #246fe0; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #F8FDFF;  position: relative; z-index: 1; display: block; }

#erea_01 .business_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .business_pt a { font-size: 15px; font-weight: bold; color: #0040B1; text-decoration: none; line-height: 1; }
#erea_01 .business_pt a:hover { color: #FF0000; }

#erea_01 .consumer_pt { position: relative; padding: 1.5rem 1.5rem 1.0rem; text-align: center; background: #fffdf8; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); z-index: 0; }
#erea_01 .consumer_pt:before,.consumer_pt:after { position: absolute; content: ''; }
#erea_01 .consumer_pt:before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: #fffdf8; }
#erea_01 .consumer_pt:after { top: 0; left: 0; width: 100%; height: 100%; background: #fffdf8; }
#erea_01 .consumer_pt:hover { box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.3); transition: all 0.5s ease;}
#erea_01 .consumer_pt .i_title { font-size: 35px; line-height: 60px; position: absolute; z-index: 1; top: -30px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; color: #FF9600; }
#erea_01 .consumer_pt span { width: 100%; background: #FF9600; margin: 8px auto 0; padding: 0.3rem 0 0.2rem; border-radius: 4px; font-size: 16px; color: #fffdf8; position: relative; z-index: 1; display: block; }
#erea_01 .consumer_pt .erea_1_link_first { background: none; margin: 1% 0; padding: 2% 0 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt .erea_1_link { background: none; margin: 1% 0; padding: 0; text-align: left; display: block; z-index: 1; }
#erea_01 .consumer_pt a { font-size: 15px; font-weight: bold; color: #E58418; text-decoration: none; line-height: 1; }
#erea_01 .consumer_pt a:hover { color: #FF0000; }

/* エリア2表示設定 */
#erea_02 { width: 100%; margin: 30px auto 0; padding: 0; background-color: #f5f7fa; background: #FFF url("../img/top/erea2.png") no-repeat bottom center/cover;}
#erea_02 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_02 h1:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: #0072bc; }
#erea_02 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_02 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: block; flex-wrap: wrap; }
#erea_02 ul li { padding: 4% 1% 6%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_02 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_02 ul li:nth-child(1) { width: 91%; margin: 8% auto 5% auto; }
#erea_02 ul li:nth-child(2) { width: 91%; margin: 3% auto 5% auto; }
#erea_02 ul li:nth-child(3) { width: 91%; margin: 3% auto 5% auto; }
#erea_02 ul li:nth-child(4) { width: 91%; margin: 3% auto 5% auto; }
#erea_02 ul li:nth-child(5) { width: 91%; margin: 3% auto 5% auto; }
#erea_02 ul li:nth-child(6) { width: 91%; margin: 3% auto 5% auto; }

/* エリア3表示設定 */
#erea_03 { width: 100%; margin: 10px auto 0; background-color: #FFF;}
#erea_03 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_03 h2 { margin: 16px 0 10px; font-size: 16px; font-weight: bold; color: #000000;}

#erea_03 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: block; flex-wrap: wrap; }
#erea_03 ul li { padding: 4% 1% 6%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: center; }
#erea_03 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_03 ul li:nth-child(1) { width: 91%; margin: 8% auto 5% auto; }
#erea_03 ul li:nth-child(2) { width: 91%; margin: 3% auto 5% auto; }
#erea_03 ul li:nth-child(3) { width: 91%; margin: 3% auto 5% auto; }
#erea_03 ul li:nth-child(4) { width: 91%; margin: 3% auto 5% auto; }

/* エリア4表示設定 */
#erea_04 { width: 100%; margin: 10px auto 0; padding: 4px 0 0; background-color: #f5f7fa;}
#erea_04 h1 { font-size: 22px; font-weight: bold; color: #000000; text-align: center; position: relative; padding: 1.5rem 0  1.0rem; }
#erea_04 h2 { margin: 16px 0 10px; font-size: 14px; font-weight: bold; color: #000000;}

#erea_04 ul { width: 92%; max-width: 1000px; margin: 0 auto; padding: 0 0 30px; display: block; flex-wrap: wrap; }
#erea_04 ul li { padding: 1% 1% 1.2%; background-color: #FFFFFF; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1); text-align: left; }
#erea_04 ul li:hover { box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease;}

#erea_04 ul li:nth-child(1) { width: 91%; margin: 8% auto 1% auto; }
#erea_04 ul li:nth-child(2) { width: 91%; margin: 3% auto 1% auto; }
#erea_04 ul li:nth-child(3) { width: 91%; margin: 3% auto 1% auto; }
#erea_04 ul li:nth-child(4) { width: 91%; margin: 3% auto 1% auto; }
#erea_04 ul li:nth-child(5) { width: 91%; margin: 3% auto 1% auto; }
#erea_04 ul li:nth-child(6) { width: 91%; margin: 3% auto 1% auto; }
}

/*==================================================
スライダーのためのcss
===================================*/
/*横幅94%で左右に余白を持たせて中央寄せ*/
.slider { width:94%; margin:0 auto; }

/*スライダー内画像*/
.slider img { width:94vw; max-width: 1400px; height:auto; }

/*左右画像*/
.slider .slick-slide { transform: scale(1.00); transition: all .5s; opacity: 0.6; }

/*中央画像サイズ*/
.slider .slick-slide.slick-center{ transform: scale(1); opacity: 1; }

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #0072bc;/*矢印の色*/
    border-right: 2px solid #0072bc;/*矢印の色*/
    height: 15px;
    width: 15px;
}

/*戻る矢印の位置と形状*/
.slick-prev { left: -2.0%; transform: rotate(-135deg); }

/*次へ矢印の位置と形状*/
.slick-next { right: -2.0%; transform: rotate(45deg); }

/*ドットナビゲーションの設定*/
.slick-dots { text-align:center; margin: 0; padding-top: 10px; }
.slick-dots li { display:inline-block; margin:0 5px; }
.slick-dots button { color: transparent; outline: none; width:5px; height:5px; display:block; border: none; cursor: pointer; border-radius: 4px; background:#fff;/*ドットボタンの色*/}

/*ドットボタンの現在地表示の色*/
.slick-dots .slick-active button{ background:#0052a3; }

@media screen and (max-width: 1080px) {
/*横幅92%で左右に余白を持たせて中央寄せ*/
.slider { width:92%; margin:0 auto; }

/*スライダー内画像*/
.slider img { width: 84vw; max-width: 580px; }

/*戻る矢印の位置と形状*/
.slick-prev { left: -3.0%; }

/*次へ矢印の位置と形状*/
.slick-next { right: -3.0%; }

}

@media screen and (max-width: 720px) {
/*横幅90%で左右に余白を持たせて中央寄せ*/
.slider { width:86%; margin:0 auto; }

/*スライダー内画像*/
.slider img { width: 86vw; }

/*戻る矢印の位置と形状*/
.slick-prev { left: -5.0%; }

/*次へ矢印の位置と形状*/
.slick-next { right: -5.0%; }
}

@media screen and (max-width: 420px) {
/*スライダー内画像*/
.slider img { }
}

/****** 20251001追記 アイキャッチ表示設定 ******/
/* アイキャッチ表示設定 */
#eye_catch { width: 100%; margin: 0 auto; background: linear-gradient(to top, #a7d4ff, #ffffff);}
#eye_catch center { padding: 5px 3% 18px;}
#eye_catch center .img_01 { width: 92%; max-width: 340px; padding: 0 10px; }
#eye_catch center .img_02 { width: 92%; max-width: 340px; padding: 0 10px; }
#eye_catch center .img_03 { width: 92%; max-width: 340px; padding: 0 10px; }

/* 導入企業スライド設定 */
.company { background: #e0f0ff; text-align: center; box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.1); margin-bottom: 60px;}
.company-inner { padding: 25px 0 0; }
.company-inner center { padding: 0 5% 0;}
.company-inner .img_01 { height: 70%; max-height: 85px; padding: 5px 20px; }
.company-inner .img_02 { height: 70%; max-height: 85px; padding: 5px 20px; }
.company-inner .img_03 { height: 70%; max-height: 85px; padding: 5px 20px; }
.company h1 { margin: 0; padding: 0 0 26px; font-size: 16px; font-weight: bold; line-height: 1; color: #626262;}
.company-loop { overflow: hidden; padding: 6px 0 16px; background:#fff; }

.company-loop__box {
  display: flex;
  width: max-content;
  animation: scrollLoop 10s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.company-loop__box img{
  display:block;
  height:64px;
  width:auto;
  flex-shrink:0;
}

@keyframes scrollLoop{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@media screen and (max-width: 1020px) {
/* 導入企業スライド設定 */
.company h1 { padding: 0 0 26px; font-size: 16px; line-height: 1.4; }
}

@media screen and (max-width: 800px) {
/* 導入企業スライド設定 */
.company-inner .img_01 { height: 70%; max-height: 75px; padding: 5px 10px; }
.company-inner .img_02 { height: 70%; max-height: 75px; padding: 5px 10px; }
.company-inner .img_03 { height: 70%; max-height: 75px; padding: 5px 10px; }
}