@charset "utf-8";


/* 共通
--------------------------------------------------- */

/* スライド
--------------------------------------------------- */
#slide:focus, #slide, .slide_content:focus { outline:none; }
#slide, .slide_content { width:100%; height:100vh; }
.slick-initialized .slick-slide {
 display:-webkit-flex; display:flex;
 -webkit-flex-wrap:wrap; flex-wrap:wrap;
 -webkit-justify-content:center; justify-content:center;
 -webkit-align-items:center; align-items:center; }
.slide_content { padding-top:80px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.slide_content.slide1 { background-image:url(../img/slide/1.jpg); }
.slide_content.slide2 { background-image:url(../img/slide/2.jpg); }
.slide_content.slide3 { background-image:url(../img/slide/3.jpg); }

.slide_box { width:700px; min-height:500px; text-align:center; }
.slide_box .catch { margin-bottom:40px; }
.slide_box p { color:#333; font-weight:bold; line-height:2.2; }
.slide_box .button { margin-top:50px; }
.slide_box .button a { width:270px; }

.slick-slide img { display:inline; }
.slick-slide { outline:none; }

/* pager */
.slick-dots { position:absolute; bottom:20px; display:block; width:100%; padding:0; margin:0; list-style:none; text-align:center; }
.slick-dots li { position:relative; display:inline-block; width:18px; height:18px; margin:0 2px; padding:0; cursor:pointer; }
.slick-dots li button { font-size:0; line-height:0; display:block; width:8px; height:8px; padding:5px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent; }
.slick-dots li button:hover, .slick-dots li button:focus { outline:none; }
.slick-dots li button:before { content:""; position:absolute; top:0; left:0; font-size:6px; line-height:20px; width:8px; height:8px; margin:5px; text-align:center; border-radius:50%; border:2px solid #707070; box-sizing:border-box; }
.slick-dots li.slick-active button:before { background:#707070; }


/* service
--------------------------------------------------- */
#service { padding-bottom:0; background:url(../img/bg_aqu.jpg); }
#service .heading { color:#fff; }

.svc_list li { width:33.333%; width:calc(100% / 3); text-align:center; background:url(../img/bg_blu.jpg); }
.svc_list a { text-decoration:none; color:#000; }
.svc_list .title { position:relative; width:100%; min-height:315px; overflow:hidden; vertical-align:middle; }
.svc_list h3 { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; display:inline-block; width:100%; height:133px; margin:auto 0; padding:30px; font-size:20px; font-weight:500; }
.svc_list h3 span { display:block; line-height:.8em; font-size:46px; font-weight:100; font-family:'Dosis', sans-serif; border-bottom:1px solid #989898; }
.svc_list .title img { position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; width:100%; min-width:450px; min-height:315px; }
.svc_list .title:before { content:""; opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:rgba(255,255,255,0.5); transition:all .3s; -webkit-transition:all .3s; }
.svc_list a:hover .title:before  { opacity:1; }

.svc_list .detail { padding:40px 30px 46px; color:#fff; }
.svc_list h4 { font-size:20px; }
.svc_list p { margin-bottom:30px; font-size:14px; }
.svc_list .button { position:relative; display:inline-block; width:245px; padding:.4em 2em; color:#0068b7; font-weight:bold;
 border-radius:1.5em; text-decoration:none; background:#fff; border:2px solid #fff;
 transition:all .3s; -webkit-transition:all .3s; }
.svc_list .button:after { content:""; position:absolute; top:0; bottom:0; right:20px; width:5px; height:10px; margin:auto 0; background:url(../img/arrow.svg) no-repeat center -20px; }

.svc_list li.accessory { background:none; }
.svc_list li.accessory .button { color:#09b3ed; }
.svc_list li.accessory .button:after { background-position:center -10px; }

.svc_list a:hover .button, .svc_list li.accessory  a:hover .button { color:#fff; background:transparent; }
.svc_list a:hover .button:after, .svc_list li.accessory a:hover .button:after { background-position:center top; }

/* topics
--------------------------------------------------- */
#topics { background:url(../img/bg_wht.jpg); }
.topic_list { max-height:172px; overflow-x:auto; margin-bottom:26px; }
.topic_list li { padding:8px 20px 8px 8em; text-indent:-7em; background:#fff; }
.topic_list li:nth-child(odd) { background:#cee8f1; }
.topic_list li .date { margin-right:2em; color:#0068b7; font-family:'Dosis', sans-serif; letter-spacing:.15em; }
.topic_list li a { text-decoration:none; }
.topic_list li a:hover { text-decoration:underline; }

.snsArea { max-width:1000px; margin:50px auto 0; }
.snsBox { float:left; width:480px; margin-right:30px; }
.snsBox:last-child { margin-right:0; }
.snsBox h3 { margin-bottom:4px; font-family:'Dosis', sans-serif; font-size:28px; font-weight:lighter; letter-spacing:.1em; color:#00b0ec; text-align:center; }
.snsBox .embed { border:1px solid #ccc; border-radius:5px; }
.snsBox .embed iframe { vertical-align:bottom; }

.lineBox { clear:left; margin-top:20px; padding:30px 46px; border:3px solid #2cbf13; background:#fff; }
.lineBox a { display:block; text-decoration:none; color:#000; }
.lineBox h3 { float:left; margin-right:40px; }
.lineBox p { float:left; margin:.5em 0; }
.lineBox .button { float:right; width:240px; font-family:'Dosis', sans-serif; padding:.5em 2em; color:#fff; text-align:center; letter-spacing:.1em; border-radius:1.5em; border:2px solid #2cbf13; background:#2cbf13;
 transition:all .3s; -webkit-transition:all .3s; }
.lineBox a:hover .button { background:none; color:#2cbf13; }


.youtube_box { position:relative; width:100%; height:0; margin:40px 0 -25px; padding-bottom:56.25%; }
.youtube_box iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

/* voice
--------------------------------------------------- */
#voice { text-align:center; }
#voice_slide { position:relative; margin-top:40px; }
#voice_slide .slick-slide { width:960px; height:403px; padding:38px 0; background:url(../img/top/bg_voice.png) no-repeat center center;
 -webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:.7; transition:all .5s; -webkit-transition:all .5s; }
#voice_slide .slick-slide.slick-active { -webkit-filter:grayscale(0%); filter:grayscale(0%); opacity:1; }
#voice_slide .slick-slide .voice_inner { width:584px; height:328px; padding:158px 30px 30px; font-weight:bold; background:url(../img/top/voice_smile.png) no-repeat center 34px; }

.slick-arrow { position:absolute; top:45%; z-index:1; width:38px; height:38px; font-size:0; color:transparent; background:transparent; border:none; cursor:pointer; }
.slick-arrow:focus { outline:none; }
.slick-prev { left:50%; margin-left:-500px; }
.slick-next { right:50%; margin-right:-500px; }

.slick-arrow:before { content:""; position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%; background:#09b3ed; }
.slick-arrow:after { content:""; position:absolute; top:11px; width:8px; height:16px; background:no-repeat center top / 8px; }

.slick-prev:after { right:16px; background-image:url(../img/arrow.svg); -webkit-transform:rotate(180deg); transform:rotate(180deg); }
.slick-next:after { left:16px; background-image:url(../img/arrow.svg); }

/* sns
--------------------------------------------------- */
.insta ul { width:100%; overflow:hidden; }
.insta ul li { float:left; width:32%; margin:0 2% 2% 0; padding:5px; border-radius:5px; background:#FFF; }
.insta ul li:nth-child(2n) { margin:0 0 2% 0; }
.insta ul li a:hover { opacity:0.6; }

/*----------------------------------------------------
 PC・タブレット
-----------------------------------------------------*/

@media screen and (min-width: 1000px) and (min-height: 1300px) {
	/* スライド
	--------------------------------------------------- */
	#slide, .slide_content { max-height:700px; }

}

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

	/* 共通
	--------------------------------------------------- */
	.heading { font-size:50px; }
	.container { padding:60px 0; }

	/* スライド
	--------------------------------------------------- */

	/* service
	--------------------------------------------------- */
	.svc_list li { overflow:hidden; }
	.svc_list h3 span { font-size:38px; }
	.svc_list h3 { font-size:18px; }

	.svc_list .title img { left:50%; width:450px; height:315px; margin-left:-225px; }
	.svc_list .title:before { opacity:0.7; }


	.svc_list .detail { padding:30px 20px 36px; }
	.svc_list p br { display:none; }
	.svc_list h4 { font-size:18px; }
	.svc_list .button { width:100%; }

	/* voice
	--------------------------------------------------- */
	#voice_slide .slick-slide { width:80vw; height:auto; margin:0 20px; padding:0; border:2px solid #00b0ec; border-radius:5px; background:none; }
	#voice_slide .slick-slide .voice_inner { height:auto; font-weight:normal; }

	.slick-prev { left:5px; margin-left:0; }
	.slick-next { right:5px; margin-right:0; }

}

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/

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


	/* 共通
	--------------------------------------------------- */

	/* スライド
	--------------------------------------------------- */
	.slide_box { width:55%; min-height:initial; }
	.slide_box .catch { margin-bottom:30px; }
	.slide_box .button { margin-top:30px; }
	.slide_box p { font-size:12px; }
	#slide, .slide_content { max-height:540px; min-height:540px; }
	.slick-dots { bottom:10px }


	/* topics
	--------------------------------------------------- */
	.snsArea { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
		-webkit-justify-content:center; justify-content:center;  }
	.snsBox { width:49%; margin-right:auto; margin-bottom:15px; }
	.snsBox iframe { width:100% !important; }

	.lineBox { text-align:center; }
	.lineBox h3 { float:none; display:inline-block; margin-right:0; }
	.lineBox p { float:none; }
	.lineBox .button { float:none; display:inline-block; margin-top:15px; }


}

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

	/* service
	--------------------------------------------------- */
  .svc_list li { width:100%; }
	.svc_list .title { float:left; width:40%; height:100%; min-height:260px; }
	.svc_list .detail { float:right; width:60%; }
	.svc_list .title img { width:auto; height:100%; }
  

}


/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px) {

	/* 共通
	--------------------------------------------------- */
	.heading { font-size:30px; }

	/* スライド
	--------------------------------------------------- */
	#slide { margin-top:65px; }
	#slide, .slide_content { max-height:260px; min-height:260px; }
	.slide_content { padding-top:0; }
	.slide_box { width:60%; }
	.slide_box .button a { width:100%; min-width:initial; font-size:13px; }
	.slide_box p { display:none; }




	/* service
	--------------------------------------------------- */
	.svc_list .title, .svc_list .detail { float:none; width:100%; }
	.svc_list .title { height:200px; }

	/* topics
	--------------------------------------------------- */
	.snsArea  { width:auto; margin-top:30px; }
	.snsBox { width:100%; height:auto; margin:0 auto 20px; }
	.lineBox { padding:30px 20px 24px; }
  
  .youtube_box { margin:40px 0 0; }

	/* voice
	--------------------------------------------------- */
	#voice > p { margin:0 15px; }
	#voice_slide .slick-slide { width:90vw; }
	#voice_slide .slick-slide .voice_inner { padding-top:40%; background-size:80%; }

}