@charset "utf-8";
/********************************************************
	
	flex-grid:| sm  | md  | lg  |  xl  |
	min-width:| 576 | 768 | 992 | 1200 |
	max-width:| 575 | 767 | 991 | 1199 |

********************************************************/
/* ======================================================

	上書き設定

====================================================== */
.c-page{
	background-color: #d10f41;
	color: #ffffff;
}
section .c-container{
	padding-top: 50px;
	padding-bottom: 50px;
}
.hero__name{
	margin-bottom: 10px;
}
.hero__catch{
	margin-bottom: 0.9em;
}
.p-movie__title{
	color: #000000;
}
/* ======================================================

	共通タイトル

====================================================== */
.title-wrap{
	text-align: center;
}
.title-wrap__mastercam{
	max-width: 534px;
	margin: 0 auto .1em;

	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
}
.title-wrap__name{
	margin: 0 auto .1em;
}
.title-wrap__name--shadow{
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.title-wrap__copy{
	margin-bottom: .5em;
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.47;
}
.title-wrap__copy--s{
	font-size: 3.2rem;
}
.title-wrap__lead{
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.47;
}
@media screen and (max-width: 767px) {
	.title-wrap__lead{
		font-size: 2.4rem;
	}
}
/* ======================================================

	カスタマイズ | アンカー

====================================================== */
.p-anchor__item a{
	color: #d10f41;
}
.p-anchor__item a::before{
	background-color: #e0c2ca;
	box-shadow: 0 6px 0 0 rgba(0,0,0,.3),
				0px 6px 0px 0px #f4c3d0 inset;
}
.p-anchor__item a:hover::before{
	background-color: #e36d8b;
}

/* ======================================================

	 Multi Axis

====================================================== */
.sec-maxis .hero{ margin-bottom: -3%; }
.sec-maxis .hero .c-row{ align-items: center; }
.sec-maxis .hero__fig img{ max-width: 440px; width: 100%; }

@media screen and (max-width: 767px) {
	.sec-maxis .hero{ margin-bottom: 0; }
	.sec-maxis .hero__name{ text-align: center; }
	.sec-maxis .hero__catch{ text-align: center; }
	.sec-maxis .hero__fig{ margin-bottom: 10px; }
}
/* ======================================================

	 Port Expert & Blade Expert

====================================================== */
.sec-portblade .hero{ margin-bottom: -3%; }
.sec-portblade .hero .c-row{ align-items: center; }
.sec-portblade .hero__figs figure:nth-child(1) img{ max-width: 410px; }
.sec-portblade .hero__figs figure:nth-child(2) img{ max-width: 290px; }

.hero__center{
	position: relative;
	padding-bottom: 17%;
}
.hero__figs figure:nth-child(1),
.hero__figs figure:nth-child(2){
	position: absolute;
	height: auto;
	bottom: 0;
}
.sec-portblade .hero__figs figure:nth-child(1){ width: calc(410 / 1000* 100%); left: 0; }
.sec-portblade .hero__figs figure:nth-child(2){ width: calc(290 / 1000* 100%); right: 0; }

@media screen and (max-width: 767px) {
	.sec-portblade .hero{ margin-bottom: 0; }
	.sec-portblade .hero__name{ text-align: center; }
	.sec-portblade .hero__catch{ text-align: center; }

	.sec-portblade .hero__center{
		padding-bottom: 0;
	}
	.sec-portblade .hero__figs figure:nth-child(1),
	.sec-portblade .hero__figs figure:nth-child(2){
		position: relative;
		width: auto;
		text-align: center;
	}
	.sec-portblade .hero__figs{ margin-bottom: 10px; }
	.sec-portblade .hero__lead{ text-align: left; }
}
/* ======================================================

	 PRO-Drill

====================================================== */
.sec-prodrill .hero{ margin-bottom: 0; }
.sec-prodrill .hero .c-row{ align-items: center; }
.sec-prodrill .hero__fig img{ max-width: 430px; width: 100%; }

@media screen and (max-width: 767px) {
	.sec-prodrill .hero{ margin-bottom: 0; }
	.sec-prodrill .hero__name{ text-align: center; }
	.sec-prodrill .hero__catch{ text-align: center; }
	.sec-prodrill .hero__fig{ margin-bottom: 10px; }
}
/* ======================================================

	 Art

====================================================== */
.sec-art .hero{ margin-bottom: -3%; }
.sec-art .hero .c-row{ align-items: center; }
.sec-art .hero__fig img{ max-width: 400px; width: 100%;}
@media screen and (max-width: 767px) {
	.sec-art .hero{ margin-bottom: 0; }
	.sec-art .hero__name{ text-align: center; }
	.sec-art .hero__catch{ text-align: center; }
	.sec-art.hero__fig{ margin-bottom: 10px; }
}