@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header
	main
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1260px;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1206px;
	margin:0 auto;
}

a img, .fade, .fades a{ transition-duration:0.2s; }
a:hover img, .fade:hover, .fades a:hover{ opacity:0.8; }
.fade:hover img, .fades a:hover img{ opacity:1; }
}

@media screen and (max-width:767px){
body{
	min-width:320px;
}

.pc{
	display:none;
}

.inner{
	position:relative;
	padding:0 20px;
}
}


/* ========================================================================
	header
======================================================================== */
header .fix,
header .scroll{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-width:1260px;
	z-index:10;
}

header .scroll{
	display:none;
	position:fixed;
	background:#000000;
}

@media screen and (max-width:767px){
header .fix{
	min-width:auto;
}

header .scroll{
	display:none !important;
}
}


/* ----------------------------------------
	logo
---------------------------------------- */
header .logo,
header .logo_stihl{
	display:flex;
	justify-content:center;
	align-items:center;
	width:250px;
	height:75px;
	background:#000000;
}

header .logo_stihl{
	position:absolute;
	top:0;
	left:250px;
	background:#F37A1F;
}

@media screen and (max-width:767px){
header .logo,
header .logo_stihl{
	width:140px;
	height:50px;
}
header .logo_stihl{ left:140px; }
header .logo img{ width:100px; }
header .logo_stihl img{ width:80px; }
}


/* ----------------------------------------
	menu
---------------------------------------- */
header .menu .btn{
	display:none;
}

header .menu ul{
	display:flex;
	justify-content:center;
	gap:0 30px;
	position:absolute;
	top:21px;
	right:80px;
}

header .menu a{
	display:block;
	position:relative;
	padding:0 0 0 15px;
	background:url(../../img/arrow_01.png) no-repeat left center;
	background-size:10px 9px;
	font-weight:900;
	color:#FFFFFF;
	line-height:3.0rem;
	text-decoration:none;
}

header .menu a::before{
	content:"";
	position:absolute;
	bottom:-2px;
	left:15px;
	width:calc(100% - 15px);
	height:2px;
	background:#FFFFFF;
	transition-duration:0.2s;
}
header .menu a:hover::before{ background:transparent; }

@media screen and (max-width:767px){
header .menu .btn{
	display:block;
	position:fixed;
	top:20px;
	right:20px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.05);
	cursor:pointer;
	z-index:20;
}

header .menu .gnavi{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:0 20px;
	background:rgba(0,0,0,0.8);
	text-align:center;
	z-index:10;
}

header .menu ul{
	position:static;
	height:100%;
	flex-direction:column;
	gap:20px 0;
}

header .menu a{
	display:inline-block;
}
}


/* ========================================================================
	main
======================================================================== */
main{
	overflow:hidden;
}


/* ----------------------------------------
	btn
---------------------------------------- */
main .btn{
	display:flex;
	justify-content:center;
}

main .btn a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:278px;
	height:70px;
	background:linear-gradient(135deg, #f3991f 0%, #f37a1f 52.22%, #f3681f 100%);
	border-radius:35px;
	vertical-align:bottom;
	font-weight:700;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
}

main .btn a::after{
	content:"";
	width:10px;
	height:9px;
	margin:2px 0 0 10px;
	background:url(../../img/arrow_01.png) no-repeat center;
	background-size:10px 9px;
}

@media screen and (max-width:767px){
main .btn a{
	height:60px;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#hero{
	overflow:hidden;
	position:relative;
	height:812px;
	background:url(../../img/bg_hero.jpg) no-repeat center;
	background-size:cover;
	text-align:center;
	color:#FFFFFF;
}

#hero::before,
#hero::after{
	content:"";
	position:absolute;
	bottom:0;
	left:-13px;
	width:50%;
	height:44px;
	background:linear-gradient(90deg, #F3991F 0%, #F3881F 100%);
	transform:skewX(30deg);
}
#hero::after{
	left:auto;
	right:-13px;
	background:linear-gradient(90deg, #F3881F 0%, #F3791F 100%);
	transform:skewX(-30deg);
}

#hero h1{
	padding:284px 0 0 0;
	font-size:3.2rem;
	font-weight:700;
	line-height:1;
}

#hero h1 > span{
	display:block;
	margin:0 0 4px 0;
	font-size:10.5rem;
}
#hero h1 span span{ font-size:9.0rem; }

#hero p{
	position:absolute;
	bottom:74px;
	left:50%;
	transform:translateX(-50%);
	font-size:2.0rem;
	font-weight:700;
	line-height:3.0rem;
}

#hero .bnr{
	position:absolute;
	bottom:73px;
	right:30px;
}

@media print, screen and (min-width:768px) and (max-width:1500px){
#hero::before{ background:linear-gradient(90deg, #F3991F 0%, #F38A1F 100%); }
#hero::after{ background:linear-gradient(90deg, #F38A1F 0%, #F37C1F 100%); }
}

@media screen and (max-width:767px){
#hero{
	height:auto;
	padding:110px 0 40px 0;
}

#hero::before,
#hero::after{
	left:-6px;
	height:20px;
	background:linear-gradient(90deg, #F3991F 0%, #F3901F 100%);
}
#hero::after{
	left:auto;
	right:-6px;
	background:linear-gradient(90deg, #F3901F 0%, #F3881F 100%);
}

#hero h1{
	padding:0 20px 20px;
	font-size:2.4rem;
	line-height:4.4rem;
}

#hero h1 > span{
	margin:0 0 10px 0;
	font-size:6.0rem;
	line-height:1;
}
#hero h1 span span{ font-size:5.0rem; }

#hero p{
	position:static;
	transform:none;
	font-size:1.8rem;
	line-height:2.8rem;
}

#hero .bnr{
	position:static;
	margin:0 10px 10px 0;
	text-align:right;
}

#hero .bnr img{
	width:150px;
}
}

@media screen and (max-width:500px){
#hero::before{ background:linear-gradient(90deg, #F3991F 0%, #F3951F 100%); }
#hero::after{ background:linear-gradient(90deg, #F3951F 0%, #F3911F 100%); }
}


/* ----------------------------------------
	feature
---------------------------------------- */
#feature{
	padding:134px 0 90px 0;
	background:linear-gradient(135deg, #F3991F 0%, #F37A1F 50.25%, #F3681F 100%);
}

#feature h2{
	margin:0 0 60px 0;
	text-align:center;
}

#feature .inner > p{
	position:relative;
	text-align:center;
	color:#FFFFFF;
	line-height:3.8rem;
	z-index:1;
}

#feature p.lead{
	margin:0 0 44px 0;
	font-size:3.2rem;
	font-weight:700;
	line-height:1;
}

@media screen and (max-width:767px){
#feature{
	padding:60px 0;
}

#feature h2{
	margin:0 0 40px 0;
}

#feature p.lead{
	margin:0 0 30px 0;
	font-size:2.4rem;
	line-height:4.4rem;
}
}


/* list_01
---------------------------------------- */
#feature .list_01{
	position:relative;
	height:633px;
	margin:-71px 0 30px 0;
	background:url(../../img/bg_feature.png) no-repeat center;
	background-size:633px;
}

#feature .list_01 li{
	position:absolute;
	top:158px;
	left:164px;
	padding:40px 54px 40px 120px;
	background:#FFFFFF;
	border-radius:20px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.05);
	font-size:2.4rem;
	font-weight:700;
	line-height:4.0rem;
}
#feature .list_01 li:nth-child(2){
	top:130px;
	left:635px;
}
#feature .list_01 li:nth-child(3){
	padding:30px 44px 30px 120px;
	top:404px;
	left:149px;
}
#feature .list_01 li:nth-child(4){
	top:360px;
	left:666px;
}

#feature .list_01 li span{
	position:absolute;
	top:50%;
	left:20px;
	transform:translateY(-50%);
	font-size:5.5rem;
	color:#F37A1F;
}

@media screen and (max-width:767px){
#feature .list_01{
	height:auto;
	margin:0 0 60px 0;
	padding:160px 0 0 0;
	background:none;
}

#feature .list_01::before{
	content:"";
	position:absolute;
	top:-120px;
	left:50%;
	transform:translateX(-50%);
	width:400px;
	height:400px;
	background:url(../../img/bg_feature.png) no-repeat center;
	background-size:400px;
}

#feature .list_01 li{
	position:relative;
	margin:0 0 10px 0;
	border-radius:10px;
	font-size:2.0rem;
	line-height:3.0rem;
}
#feature .list_01 li:nth-child(1),
#feature .list_01 li:nth-child(2),
#feature .list_01 li:nth-child(3),
#feature .list_01 li:nth-child(4){
	top:auto;
	left:auto;
	padding:20px 20px 20px 80px;
}

#feature .list_01 li span{
	font-size:4.0rem;
}
}


/* list_02
---------------------------------------- */
#feature .list_02{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px;
}

#feature .list_02 li{
	overflow:hidden;
	width:259px;
	background:#FFFFFF;
	border:5px solid #F3991F;
	border-radius:20px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.05);
}

#feature .list_02 li > img{
	width:100%;
	margin:0 0 14px 0;
}

#feature .list_02 h3{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:60px;
	margin:0 0 12px 0;
	font-size:1.8rem;
	font-weight:700;
	line-height:3.0rem;
}

#feature .list_02 p{
	margin:0 18px 34px;
	font-size:1.5rem;
}

@media screen and (max-width:640px){
#feature .list_02 li{
	width:100%;
}

#feature .list_02 h3{
	min-height:auto;
}
}


/* ----------------------------------------
	tool
---------------------------------------- */
#tool{
	padding:180px 0 100px 0;
	background:url(../../img/bg_tool.png) no-repeat center 80px;
}

#tool h2{
	margin:0 0 18px 0;
	text-align:center;
	font-size:3.2rem;
	font-weight:700;
}

#tool .inner > p{
	margin:0 0 130px 0;
	text-align:center;
	line-height:3.8rem;
}

@media screen and (max-width:767px){
#tool{
	padding:80px 0 30px 0;
	background:url(../../img/bg_tool.png) no-repeat center 60px;
	background-size:calc(100% - 20px);
}

#tool h2{
	margin:0 0 20px 0;
	font-size:2.4rem;
	line-height:4.4rem;
}

#tool .inner > p{
	margin:0 0 40px 0;
}
}


/* tab
---------------------------------------- */
#tool .tab{
	display:flex;
	padding:0 1px;
	border-bottom:3px solid #F37A1F;
}

#tool .tab li{
	width:164px;
	margin:0 4px;
}

#tool .tab a{
	overflow:hidden;
	display:block;
	position:relative;
	height:57px;
	font-weight:700;
	text-decoration:none;
}

#tool .tab a::before,
#tool .tab a::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(135deg, #f3991f 0%, #f37a1f 52.22%, #f3681f 100%);
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	transition-duration:0.2s
}
#tool .tab a::after{
	width:calc(100% - 4px);
	background:#FFFFFF;
	border:2px solid #F37A1F;
	border-bottom:none;
}

#tool .tab a:hover,
#tool .tab a.selected{
	color:#FFFFFF;
}
#tool .tab a:hover::after,
#tool .tab a.selected::after{
	opacity:0;
}

#tool .tab a span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:100%;
	padding:2px 0 0 0;
	z-index:1;
}

@media screen and (max-width:767px){
#tool .tab{
	flex-wrap:wrap;
	padding:0;
	border:none;
}

#tool .tab li{
	width:50%;
	margin:0 0 10px 0;
	padding:0 5px;
	border-bottom:3px solid #F37A1F;
}

#tool .tab a{
	height:50px;
}
}


/* tool
---------------------------------------- */
#tool .tool{
	padding:46px 50px 60px;
}

@media screen and (max-width:767px){
#tool .tool{
	padding:20px 0 30px 0;
}
}


/* ---------- block ---------- */
#tool .block{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin:0 0 62px 0;
}

#tool .block h3{
	width:50%;
	position:relative;
	padding:5px 0 23px 0;
	font-size:2.5rem;
	font-weight:700;
	line-height:3.5rem;
}

#tool .block h3::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:120px;
	height:8px;
	background:#F37A1F;
	transform:skewX(-20deg);
}

#tool .block p{
	width:473px;
	font-size:1.5rem;
}

@media screen and (max-width:767px){
#tool .block{
	display:block;
	margin:0 0 30px 0;
}

#tool .block h3{
	width:auto;
	margin:0 0 20px 0;
	padding:0 0 15px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}

#tool .block h3::before{
	width:70px;
	height:5px;
}

#tool .block p{
	width:auto;
}
}


/* ---------- list ---------- */
#tool .list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:45px 40px;
	margin:0 0 70px 0;
}

#tool .list li{
	width:326px;
	padding:20px 13px 26px;
	border:1px solid #000000;
	border-radius:20px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.05);
	font-size:1.5rem;
}

#tool .list h4{
	margin:2px 0 20px 0;
	text-align:center;
	line-height:2.2rem;
	font-weight: bold;
}

#tool .list p{
	margin:2px 0 20px 0;
}

#tool .list .level{
	width:122px;
	margin:0 0 0 6px;
	padding:6px 0 7px 0;
	background:#F37A1F;
	border-radius:5px;
	text-align:center;
	font-weight:700;
	color:#FFFFFF;
	line-height:1;
}
#tool .list .level.beginner{
	background:#E3E3E3;
	color:#222222;
}
#tool .list .level.intermediate{
	background:#000000;
}

#tool .list .btn a{
	width:232px;
	height:50px;
	background:#000000;
}

@media screen and (max-width:767px){
#tool .list{
	gap:10px;
	margin:0 0 40px 0;
}

#tool .list li{
	width:calc(50% - 5px);
	padding:20px 10px;
	border-radius:10px;
}

#tool .list .level{
	width:100px;
	margin:0 0 0 5px;
	padding:6px 0;
	font-size:1.4rem;
}

#tool .list .btn a{
	width:100%;
	height:40px;
	font-size:1.4rem;
}

#tool .list .btn a::after{
	margin-left:6px;
}
}


/* ----------------------------------------
	division
---------------------------------------- */
.division{
	display:flex;
	justify-content:center;
}

.division > div{
	display:flex;
	width:100%;
	padding:0 0 0 130px;
	background:#EDEDED;
}

.division .inner{
	display:flex;
	flex-direction:column;
	width:423px;
	margin:0;
	padding:80px 0 60px 0;
}

.division h2{
	position:relative;
	margin:0 0 46px 0;
	padding:0 0 7px 0;
	font-size:2.5rem;
	font-weight:700;
	line-height:4.5rem;
}

.division h2::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:70px;
	height:5px;
	background:#F37A1F;
	transform:skewX(-20deg);
}

.division h2 span{
	display:block;
	margin:0 0 20px 0;
	font-size:4.5rem;
	line-height:1;
}

.division p{
	flex:1;
	margin:0 0 34px 0;
	font-size:1.5rem;
	line-height:2.8rem;
}

@media screen and (max-width:767px){
.division{
	display:block;
}

.division > div{
	display:block;
	width:100%;
	padding:0;
}

.division .inner{
	display:block;
	width:auto;
	padding:60px 20px;
}

.division h2{
	margin:0 0 40px 0;
	padding:0 0 15px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}

.division h2 span{
	font-size:4.0rem;
}

.division p{
	margin:0 0 40px 0;
}
}


/* btn
---------------------------------------- */
.division .btn{
	justify-content:flex-start;
}

.division .btn a{
	width:308px;
	height:60px;
}

@media screen and (max-width:767px){
.division .btn{
	justify-content:center;
}

.division .btn a{
	width:278px;
}
}


/* rental
---------------------------------------- */
#rental{
	justify-content:flex-end;
	padding:0 130px 0 0;
	background:linear-gradient(135deg, #f3991f 0%, #f37a1f 50.25%, #f3681f 100%);
}

#rental h2,
#rental p{
	color:#FFFFFF;
}
#rental h2::before{
	background:#FFFFFF;
}

@media screen and (max-width:767px){
#rental{
	padding:0;
}
}


/* ---------- btn ---------- */
#rental .btn a{
	background:#000000;
}


/* ========================================================================
	footer
======================================================================== */
footer{
	padding:76px 0 16px 0;
}

footer .bnr{
	display:none;
	position:fixed;
	bottom:40px;
	right:30px;
	z-index:10;
}

footer small{
	display:block;
	text-align:center;
	font-size:1.3rem;
	line-height:1;
}

@media screen and (max-width:767px){
footer{
	padding:50px 0 20px 0;
}

footer .bnr{
	display:none !important;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu ul{
	display:flex;
	justify-content:center;
	gap:0 30px;
	margin:0 0 64px 0;
}

footer .menu a{
	display:block;
	padding:0 0 0 15px;
	background:url(../../img/arrow_02.png) no-repeat left center;
	background-size:10px 9px;
	font-weight:700;
	line-height:3.6rem;
	text-decoration:none;
}
footer .menu a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
footer .menu ul{
	flex-wrap:wrap;
	margin:0 0 40px 0;
}

footer .menu a{
	margin:0 0 10px 0;
	font-size:1.4rem;
	line-height:3.4rem;
}
}