@charset "utf-8";

#scroll { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; z-index: 2;}
#scroll a { display: inline-block; *display: inline; *zoom: 1; }
#scroll p { font-family: 'Lora-Regular'; color: #fff; letter-spacing: 4px; padding: 0 0 5px;}
#scroll .stick { background: #fff; height: 70px; width: 1px; margin: 0 auto;}
.scroll_point{ position:absolute;left:50%;margin-left:-3.5px;width:7px;height:7px;}

     
    @-webkit-keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}
    @keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}

    @-webkit-keyframes scroll-point-sp{0%{bottom:7.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}
    @keyframes scroll-point-sp{0%{bottom:7.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}
    }
 
    @-webkit-keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}
    @keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}

    @-webkit-keyframes scroll-point-sp{0%{bottom:7.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}
    @keyframes scroll-point-sp{0%{bottom:7.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}

	    
		    
	
	
@media screen and (min-width:769px){
	.scroll_point{bottom:6.5rem;-webkit-animation:scroll-point 2.6s ease-out infinite;animation:scroll-point 2.6s ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
	}
@media screen and (max-width:768px){
	.scroll_point{bottom:7.5em;-webkit-animation:scroll-point-sp 2.6s ease-out infinite;animation:scroll-point-sp 2.6s ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
	}
	.scroll_point:after,.scroll_point:before{position:absolute;top:20px;left:0;width:100%;height:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#fff;content:"";-ms-border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
	.scroll_point:before{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-ms-border-radius:50%}
/*
@media screen and (min-width:769px){
	.scrollIcn__point:before{z-index:0;background:rgba(0,0,0,.08);-webkit-animation:scroll-point-zoom 2.6s ease-out infinite;animation:scroll-point-zoom 2.6s ease-out infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both; height: 80px; background: #fff;}
	}
*/
@media screen and (max-width:768px){
	.scroll_point:before{top:50%;left:50%;z-index:-1;width:35px;height:35px;background:#e8f6ff;opacity:0;-webkit-transform:scale(.2) translateY(-50%) translateX(-50%);-moz-transform:scale(.2) translateY(-50%) translateX(-50%);-ms-transform:scale(.2) translateY(-50%) translateX(-50%);-o-transform:scale(.2) translateY(-50%) translateX(-50%);transform:scale(.2) translateY(-50%) translateX(-50%);-webkit-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;transform-origin:top left;}}
	
	

	
/* ------------------------------------------------------------ common */

.list_con li div h5 { font-size: 18px; text-align: left; font-weight: bold;}
.list_con li div h5 span { display: block; color: #969696; font-size: 16px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}

/* ------------------------------------------------------------  */

#arrows_logo { position: absolute; width: 200px; text-align: center; top: 0; left: 0; z-index: 3;}
#arrows_logo a { display: block; background: #00245e; padding: 35px 0;}
#arrows_logo img { padding: 0 0 10px;}
#arrows_logo h1 { color: #fff; font-size: 18px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; line-height: 130%; }

#firstview { margin: 0 100px; position: relative; text-align: center; min-height: inherit; z-index: 1;}
#firstview ul { z-index: 2;}
#firstview ul.SP { display: none;}
#firstview ul li { text-align: center; }
#firstview ul li img { margin: 0 auto;}
#firstview .slick-dots { top: 40%; left: -60px; width: 15px;}
#firstview .slick-dots li { width: 15px; height: 15px; margin: 10px 0;}
#firstview .slick-dots li button { padding: 0; width: 15px; height: 15px; border: 1px solid #d2d2d2; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#firstview .slick-dots li button::before { width: 15px; height: 15px; top: 3px; left: 3px; }
#firstview .slick-dots li.slick-active { left: -2px; width: 19px; height: 19px;}
#firstview .slick-dots li.slick-active button { width: 19px; height: 19px;}
#firstview .slick-dots li.slick-active button::before { background: #00245e; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; width: 13px; height: 13px; }
.slick-dotted.slick-slider { margin: 0;}


#intro { text-align: center; padding: 150px 0 80px; position: relative; background:url(../images/index/bg_02.png) center 100px no-repeat;}
#intro::before { content:""; width: ; position: absolute; width: 80%; background: url(../images/index/bg_01.gif); left: 0; top: -150px; height: 700px; z-index: -1;}
#intro h3 { font-size: 50px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 0 0 40px; line-height: 130%;}
#intro h3 span { font-size: 60px; line-height: 130%;}
#intro p { font-size: 18px;}
#intro p span { display: block; font-size: 13px; padding: 30px 0 0;}

#intro2 { padding: 100px 0 120px; text-align: center;}
#intro2 h3 { font-size: 34px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 0 0 45px;}
#intro2 h3 span { text-emphasis-style:dot filled;-webkit-text-emphasis-style:dot filled;}

#point { text-align: center; background: url(../images/index/bg_01.gif); text-align: center; padding: 0 0 110px;}
#point h3 { font-size: 40px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; margin: 40px 0 40px;}
#point h3 span { background: url(../images/index/line.gif) left bottom repeat-x; background-size: auto 20px;}
#point div { background: #fff; width: 800px; padding: 30px 25px; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 55px auto 0; text-align: left;}
#point div h4 { font-size: 18px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; border-bottom: 1px solid #e1dede; font-weight: bold; padding: 0 0 10px; margin: 0 0 20px;}
#point div p { font-size: 14px; line-height: 26px;}


#insurance { padding: 80px 0 120px; text-align: center; }
#insurance h3 { font-size: 40px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 20px 0 0; }
#insurance h3.h3 { font-size: 16px; padding: 0 0 20px; }

#company { background: url(../images/index/bg_01.gif); padding: 90px 0 75px; } 
#company h3 { font-size: 40px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 0 0 30px; text-align: center; }
#company ul li { float: left; width: 350px; margin: 0 0 30px 25px; } 
#company ul li:nth-child(3n+1) { clear: both; margin: 0 auto 30px; }
#company ul li p { font-size: 13px; line-height: 19px; padding: 15px 0 0; }

#online { padding: 80px 0 65px; text-align: center;}
#online h3 { font-size: 40px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
#online ul.several { margin: 20px 0 0 -18px;}

#arrows { text-align: center; padding: 75px 0 60px;}
#arrows h3 { margin: 0 0 30px;}
#arrows h3 span { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 45px; background: url(../images/index/line.gif) left bottom repeat-x; display: inline-block; *display: inline; *zoom: 1; }

#connect_smiles { position: relative; background: url(../images/index/bg_03.jpg) center top no-repeat; padding: 375px 0 250px; }
#connect_smiles::after { content: ""; background: url(../images/index/bg_01.gif); position: absolute; right: 0; top: 650px; height: 615px; width: 60%; z-index: -1;}
#connect_smiles h3 { position: absolute; top: 50px; left: 0; right: 0; margin: 0 auto; width: 860px;}
#connect_smiles img.img { float: left;}
#connect_smiles .box { float: right; width: 550px; padding: 380px 0 0; }
#connect_smiles .box h4 { font-size: 50px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; line-height: 66px; padding: 0 0 40px;}
#connect_smiles .box p { font-size: 18px;}
#connect_smiles a.btn { background: #00245e; color: #fff; font-size: 20px; font-family: 'Lora-Regular'; letter-spacing: 3px;}

#howto { text-align: center; background: #f1f6fa; padding: 110px 0 140px; margin: 0 0 10px;}
#howto p { font-size: 18px; padding: 0 0 75px;}
#howto .box { float: left; width: 545px; background: url(../images/index/bg_04.gif) center top no-repeat #fff; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0 30px 65px; box-sizing: border-box; -webkit-box-sizing: border-box;}
#howto .box.personal { margin: 0 10px 0 0;}
#howto .box h4 { font-size: 32px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 50px 0 0;}
#howto .box .list_con li { padding: 30px 0; border-top: 1px solid #e5e5e5;}
#howto .box .list_con li:first-child { border: none;}
#howto .box .list_con li div { padding: 30px 0 0; }
#howto .box .list_con li img { float: left; width: 200px; height: auto;
	border-radius: 6px; 
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
}
#howto .box .list_con li div { float: right; width: 250px;}
#howto .box .list_con li.top img { float: none; width: 100%; height: auto; 
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}
#howto .box .list_con li.top div { float: none; width: 100%;}
#howto .box a.btn { background: #00245e; color: #fff; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }

#news { background: #f1f6fa; padding: 110px 0 130px; text-align: center;}
#news p { font-size: 18px; padding: 0 0 60px; }
#news .fb-page { float: left; width: 500px;}
#news .news_box { float: right; width: 555px;}
#news ul li { margin: 0 0 30px;}
#news ul li img { float: left; 
	border-radius: 6px; 
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
}
#news ul li div { float: right; width: 285px;}
#news .news_box a.btn { background: #00245e; color: #fff; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; margin: 10px 0 0;}

#entrance { padding: 0 0 110px;}
#entrance .group { float: left; width: 33%; text-align: center; color: #fff; padding: 125px 0 100px;}
#entrance .group h4 { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
#entrance .group h4 span { font-size: 46px; font-family: 'Lora-Regular'; display: block; letter-spacing: 3px;}
#entrance .group a.btn { color: #fff; font-family: 'Lora-Regular'; letter-spacing: 3px; border: 1px solid #fff; width: 200px; height: 60px; line-height: 60px;}
#entrance .group.company { margin: 0; background: url(../images/index/pic_12.jpg) center center no-repeat; background-size: cover;}
#entrance .group.policy { background: url(../images/index/pic_13.jpg) center center no-repeat; background-size: cover; border-left: 2px solid #fff; border-right: 2px solid #fff; box-sizing: border-box; -webkit-box-sizing: border-box; width: 34%;}
#entrance .group.staff { background: url(../images/index/pic_14.jpg) center center no-repeat; background-size: cover;}


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
/* ------------------------------------------------------------ common */

.list_con li div h5 { font-size: 14px; text-align: left; font-weight: bold;}
.list_con li div h5 span { display: block; font-size: 12px; }

/* ------------------------------------------------------------  */

#arrows_logo { position: absolute; width: 100px; text-align: center; top: 0; left: 0; z-index: 3; }
#arrows_logo a { display: block; background: #00245e; padding: 15px 5px;}
#arrows_logo img { padding: 0 0 5px; width: 70%; height: auto;}
#arrows_logo h1 { color: #fff; font-size: 11px; line-height: 130%; }

#firstview { margin: 0 4%; position: relative; text-align: center; padding: 55px 0 0; min-height: 250px;}
#firstview ul { z-index: 2;}
#firstview ul.SP { display: block;}
#firstview ul.PC { display: none;}
#firstview ul li { text-align: center; }
#firstview ul li img { margin: 0 auto; width: 70%; height: auto;}
#firstview a { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
#firstview .slick-dots { top: inherit; left: 0; width: 150px; right: 0; margin: 0 auto; bottom: -40px;}
#firstview .slick-dots li { width: 15px; height: 15px; margin: 0 10px;}
#firstview .slick-dots li button { padding: 0; width: 15px; height: 15px; border: 1px solid #d2d2d2; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#firstview .slick-dots li button::before { width: 15px; height: 15px; top: 3px; left: 3px; }
#firstview .slick-dots li.slick-active button { width: 19px; height: 19px;}
#firstview .slick-dots li.slick-active button::before { background: #00245e; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; width: 13px; height: 13px; }
.slick-dotted.slick-slider { margin: 0;}


#intro { text-align: center; padding: 70px 0 40px; background: url(../images/index/bg_02.png) center 100px no-repeat; background-size: 90px auto; }
#intro::before { content:""; width: ; position: absolute; width: 100%; background: url(../images/index/bg_01.gif); left: 0; top: -150px; height: 600px; z-index: -1;}
#intro h3 { font-size: 26px; padding: 0 0 40px;}
#intro h3 span { font-size: 30px; line-height: 130%;}
#intro p { font-size: 18px;}
#intro p span { display: block; font-size: 13px; padding: 30px 0 0;}

#intro2 { padding: 70px 4% 40px; text-align: center;}
#intro2 h3 { font-size: 22px; padding: 0 0 20px;}
#intro2 img { width: 100%; height: auto;}

#point { text-align: center; background: url(../images/index/bg_01.gif); text-align: center; padding: 0 0 55px;}
#point img.arw { width: 85px; height: auto;}
#point img.img { width: 94%; height: auto;}
#point h3 { font-size: 26px; margin: 40px 0 20px;}
#point h3 span { background: url(../images/index/line.gif) left bottom repeat-x; background-size: auto 10px;}
#point div { background: #fff; width: 92%; padding: 30px 4%; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 25px auto 0; text-align: left;}
#point div h4 { font-size: 18px; border-bottom: 1px solid #e1dede; font-weight: bold; padding: 0 0 10px; margin: 0 0 20px;}
#point div p { font-size: 12px; line-height: 26px;}

#insurance { padding: 80px 0 30px; text-align: center; }
#insurance h3 { font-size: 30px;}

#company { padding: 40px 0 20px; } 
#company h3 { font-size: 30px; padding: 0 0 20px; }
#company ul li { width: 48%; margin: 0 0 30px 4%; } 
#company ul li:nth-child(3n+1) { clear: inherit; margin: 0 0 30px 4%; }
#company ul li:nth-child(2n+1) { clear: both; margin: 0 auto 30px; }
#company ul li img { width: 100%; height: auto; }
#company ul li p { font-size: 13px; line-height: 19px; padding: 10px 0 0; }

#online { padding: 40px 0 0; text-align: center;}
#online h3 { font-size: 30px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; padding: 0 0 40px; line-height: 110%;}
#online ul.several { margin: 20px 0 0 -2%;}

#arrows { text-align: center; padding: 30px 0 30px;}
#arrows h3 { margin: 0 0 20px; line-height: 130%;}
#arrows h3 span { font-size: 30px; background: url(../images/index/line.gif) left bottom repeat-x; display: inline; line-height: 130%; background-size: auto 14px;}
#arrows img { width: 280px; height: auto;}

#connect_smiles { position: relative; background: url(../images/index/bg_03_sp.jpg) center top no-repeat; padding: 52% 0 100px; margin: 0; background-size: 100% auto; text-align: center;}
#connect_smiles::after { content: ""; background: url(../images/index/bg_01.gif); position: absolute; left: 0; top: 30%; height: 66%; width: 66%; z-index: -1;}
#connect_smiles h3 { position: absolute; top: 1%; left: 0; right: 0; margin: 0 auto; width: 90%;}
#connect_smiles h3 img { width: 90%; height: auto;}
#connect_smiles img.img { float: none; width: 80%; height: auto; margin: 0 auto;}
#connect_smiles .box { float: none; width: 100%; padding: 30px 0 0; }
#connect_smiles .box h4 { font-size: 26px; line-height: 40px; padding: 0 0 20px;}
#connect_smiles .box p { font-size: 14px;}
#connect_smiles a.btn { background: #00245e; color: #fff; font-size: 14px; font-family: 'Lora-Regular'; letter-spacing: 3px;}

#howto { text-align: center; padding: 50px 0 70px; margin: 0 0 10px;}
#howto p { font-size: 14px; padding: 0 0 35px;}
#howto .box { float: none; width: 100%; background: url(../images/index/bg_04.gif) center top no-repeat #fff; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0 3% 30px; box-sizing: border-box; -webkit-box-sizing: border-box; background-size: 200px auto;}
#howto .box.personal { margin: 0 0 40px;}
#howto .box h4 { font-size: 24px; padding: 15px 0 0;}
#howto .box .list_con li { padding: 15px 0; border-top: none; width: 260px; margin: 0 17px;}
#howto .box .list_con li:first-child { border: none;}
#howto .box .list_con li div { padding: 15px 0 0; }
#howto .box .list_con li img { float: none; width: 100%; height: auto;}
#howto .box .list_con li div { float: none; width: 100%;}
#howto .box .list_con li.top img { float: none; width: 100%; height: auto;}
#howto .box .list_con li.top div { float: none; width: 100%;}
#howto .slick-prev { content:''; background:url(../images/index/arw_left.png) center center no-repeat; left : -8px; z-index: 2; background-size: 12px auto; top: 40%;} 
#howto .slick-next { content:''; background:url(../images/index/arw_right.png) center center no-repeat; right: -8px; z-index: 2; background-size: 12px auto; top: 40%;}

#news { padding: 50px 0 60px; text-align: center;}
#news p { font-size: 14px; padding: 0 0 30px; }
#news .fb-page { float: none; width: 100%; margin: 0 0 10px;}
#news .fb-page iframe { width: 100% !important; height: 500px !important;}
#news .news_box { float: none; width: 100%;}
#news ul li { width: 260px; margin: 0 17px; padding: 15px 0;}
#news ul li img { float: none; width: 100%; height: auto;}
#news ul li div.box { float: none; width: 100%; padding: 15px 0 0;}
#news .news_box a.btn { margin: 10px 0 0;}
#news .slick-prev { content:''; background:url(../images/index/arw_left.png) center center no-repeat; left : -8px; z-index: 2; background-size: 12px auto; top: 40%;} 
#news .slick-next { content:''; background:url(../images/index/arw_right.png) center center no-repeat; right: -8px; z-index: 2; background-size: 12px auto; top: 40%;}

#entrance { padding: 0 0 50px;}
#entrance .group { float: none; width: 100%; padding: 60px 0 50px;}
#entrance .group h4 span { font-size: 36px; display: block; letter-spacing: 2px;}
#entrance .group a.btn { letter-spacing: 3px; border: 1px solid #fff; width: 260px; height: 60px; line-height: 60px; font-size: 16px;}
#entrance .group.company { margin: 0; background: url(../images/index/pic_12.jpg) center center no-repeat; background-size: cover;}
#entrance .group.policy { background: url(../images/index/pic_13.jpg) center center no-repeat; background-size: cover; border-left: none; border-right: none; border-top: 2px solid #fff; border-bottom: 2px solid #fff; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%;}
#entrance .group.staff { background: url(../images/index/pic_14.jpg) center center no-repeat; background-size: cover;}


}