/*====================================================================================================
  TOPPAGE 
====================================================================================================*/
#toppage {}
#toppage .box_main { max-width:1000px; margin:0 auto; clear:both; }
#toppage .box_main::after { display:block; clear:both; content:""; }

/* SLICK BOX */
#toppage .slick-box { width:100%; margin:auto auto 90px; position:relative; }
#toppage .slick-box img { width:100%;  height:auto;}
#toppage .slick-box::after {
	content:"";
	border:6px solid #fff;
	border-radius:20px;
	position:absolute;
	top:25px;
	bottom:25px;
	left:25px;
	right:25px;
	z-index:1;
}
#toppage .slick-box .box1 { 
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	margin:auto;
	padding-top: 100px;
	height:300px;
}
#toppage .slick-box .box1 h2 { 
	font-size:282%; 
	font-family:Noto Serif JP;
	color:#fff; 
	line-height:130%; 
	font-weight:400; 
	text-align:center; 
	margin-bottom:30px;
	text-shadow:0 0 4px rgba(0, 0, 0, 0.4);
}
#toppage .slick-box .box1 p.b_more { 
	width:400px; 
	height:60px; 
	border:5px solid rgba(255,255,255,.5);
	margin:auto;
	border-radius:50px;
	position:relative;
	z-index:999;
}
#toppage .slick-box .box1 p.b_more a {
	display:block; 
	text-decoration:none;  
	background:#fff; 
	font-family:Noto Sans JP; 
	border-radius:50px;
	padding:10px 15px 11px;
}
#toppage .slick-box .box1 p.b_more a small { 
	background:#97c159; 
	font-size:107%; 
	color:#fff;
	padding:2px 15px 3px;
	border-radius:50px;
	margin-right:13px;
}
#toppage .slick-box .box1 p.b_more a b { font-size:119%; color:#54b270; }
/*#toppage .slick-box .box1 p.b_more a:hover { opacity:0.7; }*/


/* NEWS */
#toppage .news { width:100%;}
#toppage .news::after { clear:both; content:""; display:block; }
#toppage .news h3 { float:left;}
#toppage .news h3 b { font-size:163%; color:#212a37; letter-spacing:0.3em; font-weight: 500; }
#toppage .news h3 small { font-size:82%; color:#7abf91; font-weight:400; position:relative; top:-5px; }
#toppage .news p.b_more {
	float:right; 
	background:#7abf91; 
	width:115px; 
	height:30px; 
	border-radius:50px; 
	margin-bottom:30px;
}
#toppage .news p.b_more a { 
	font-size:88%; 
	text-decoration:none; 
	color:#fff; 
	background:url(../image/arrow_right-wh.png) no-repeat 90%;
	background-size:7px 12px;
	display:block;
	padding:0 0 2px 20px;
}
#toppage .news p.b_more:hover { opacity:0.7; }
#toppage .news ul { width:100%; clear:both; padding:15px 8px 15px 15px; display:none; }
#toppage .news ul::after { clear:both; content:""; display:block; }
#toppage .news ul:nth-child(odd) { background:rgba(122,191,145,.05); }
#toppage .news ul li { float:left; }
#toppage .news ul li:first-child { width:25%; background:url(../image/arrow_right-grn.png) no-repeat 90%; }
#toppage .news ul li:last-child { width:75%; }
#toppage .news ul li a { text-decoration:none; color:#000; display:block; }
#toppage .news ul:nth-child(1),
#toppage .news ul:nth-child(2),
#toppage .news ul:nth-child(3),
#toppage .news ul:nth-child(4),
#toppage .news ul:nth-child(5) { display:block; }
#toppage .news ul li a:hover { text-decoration:underline; }



/* ABOUT */
#toppage .about {
    display: flex; flex-direction: column; gap:100px;
	background:url(../../image/top/about_bg.png) no-repeat bottom;
	background-size:100%;
	padding-bottom:110px;
	margin-top:118px;
}
#toppage .about .about_box {
    position: relative;
    display:flex; 
    margin: auto; width: 90%; max-width: 1000px;
}
#toppage .about .about_box::before {
    position: absolute; top: 240px;
    display: block; clear: both;
    font-family:Noto Serif JP;
    font-size: 84px;
    color: rgba(0,0,0,0.08);
    transform: rotate(90deg);
}
#toppage .about .about_box .photo { position: relative;width: 70%;}
#toppage .about .about_box .photo img {  width: 100%; height:500px; object-fit: cover; border-radius: 20px;}
#toppage .about .about_box .comment { display:flex; flex-direction:column; gap:50px; width: 50%;}
#toppage .about .about_box .mid1 {
    position:relative;
    display:inline-block;
	font-family:Noto Serif JP;
    font-size: 200%;
    color: #7ABF91;
}
#toppage .about .about_box .mid1::before {
    position: absolute; top:15px;
    display: block; clear: both; content:"";
    height: 5px;
    background: #7ABF91;
}
#toppage .about .about_box .mid1 span { position: relative; z-index: 99; padding-right: 20px; background: #fff;}
#toppage .about .about_box .catch {
	font-family:Noto Serif JP;
    font-size: 287.5%;
    line-height: 130%;
}
#toppage .about .about_box .come { line-height: 200%;}
#toppage .about .about_box.message::before { left: -250px; content:"Message";}
#toppage .about .about_box.message { flex-direction: row;}
#toppage .about .about_box.message .photo { right: -10%;}
#toppage .about .about_box.message .mid1::before { width: 320px; left: -340px;}
#toppage .about .about_box.message .mid1 span { display: block;}
#toppage .about .about_box.service::before { right: -250px; content:"Service";}
#toppage .about .about_box.service { flex-direction: row-reverse;}
#toppage .about .about_box.service .photo { left: -10%;}
#toppage .about .about_box.service .photo::before {
    position: absolute; top: 10%; left: 10%;
    display: block; clear: both; content: "";
    width: 299px; height: 96px;
    background: url("../../image/top/about_txt-sm.png") no-repeat;
}
#toppage .about .about_box.service .mid1::before { width: calc(100% + 190px); right: -50%;}
@media only screen and (max-width:700px){
    #toppage .about .about_box { flex-direction: column-reverse !important; gap:100px; width:100%;}
    #toppage .about .about_box::before { top:130px; font-size:40px; display: none !important;}
    #toppage .about .about_box .photo { width:100%;}
    #toppage .about .about_box .photo img { height:300px; border-radius: 0;}
    #toppage .about .about_box .comment { margin: auto; width:90%; gap:30px;}
    #toppage .about .about_box .mid1 { font-size: 150%;}
    #toppage .about .about_box .mid1 span { display:inline-block !important;}
    #toppage .about .about_box .mid1::before {
        right:0 !important; left:inherit !important;
        width:100% !important; height: 3px !important;
        }
    #toppage .about .about_box .catch { font-size: 200%;}
    #toppage .about .about_box .come { width: 100%;}
    #toppage .about .about_box .photo { right:0 !important; left: 0 !important;}
    #toppage .about .about_box.service .photo::before { top:inherit; bottom: 10%; left: 10%; }
}


#toppage .about .box_a { max-width:1055px; margin:0 auto; }
#toppage .about .box_a::after { display:block; clear:both; content:""; }
#toppage .about .box_a .box {
	mawidth:342px;
	background:linear-gradient(to right, #78B97F 0%, #7ABF91 49%, #7DC6A3 100%);
	padding:6px;
	border-radius:30px;
	float:left;
}
#toppage .about .box_a .box a { display:block; text-decoration:none; color:#222; }
#toppage .about .box_a .box:hover a { opacity:0.7; }
#toppage .about .box_a .box a:hover img { opacity:unset; }
#toppage .about .box_a .box+.box { margin-left:14px; }
#toppage .about .box_a .box .box_i { width:100%; background:#FFF; border-radius:24px; box-shadow:1px 1px #EEE; overflow:hidden; } 
#toppage .about .box_a .box .box_i .photo { width:100%; }
#toppage .about .box_a .box .box_i .photo img { width:100%; }
#toppage .about .box_a .box .box_i h3 {
	text-align:center;
	padding:20px 0 15px;
	font-family:"Noto Sans JP";	
	font-size:unset;
	line-height:120%;
}
#toppage .about .box_a .box .box_i h3 b { font-size:125%; font-weight:400; }
#toppage .about .box_a .box .box_i h3 small { display:block; font-weight:400; font-size:82%; color:#7ABF91; }


/* ABOUT DRONE */
#toppage .drone { font-family:"Noto Sans JP"; padding:93px 0 134px; }
#toppage .drone .box_main { clear:both; }
#toppage .drone .box_main .b_more { width:100%; background:#7ABF91; text-align:center; border-radius:50px; }
#toppage .drone .box_main .b_more a {
	display:block;
	text-decoration:none;
	color:#FFF;
	font-size:113%;
	font-weight:500;
	padding:10px 0;
}
#toppage .drone .box_main .b_more:hover { opacity:0.7; }
#toppage .drone .box_main .commen { float:left; width:446px; padding-top:20px; }
#toppage .drone .box_main .commen h3 { font-size:unset; }
#toppage .drone .box_main .commen h3 b { font-size:163%; font-weight:400; color:#212A37; }
#toppage .drone .box_main .commen h3 small { font-size:86%; font-weight:400; color:#7ABF91; margin-left:25px; vertical-align:text-bottom; }
#toppage .drone .box_main .commen .come { color:#000; margin:30px 0 20px; }
#toppage .drone .box_main .youtube { float:right; padding-top:0!important; }
#toppage .drone .box_main .youtube iframe { width:490px; height:275px; border:0; }