@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: #ddd7fc;
	color: #000000;
}
section .c-container{
	padding-top: 80px;
	padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
	section .c-container{
		padding-top: 50px;
		padding-bottom: 20px;
	}
}
/* ======================================================

	 Port Expert & Blade Expert

====================================================== */
.hero__figs{
	position: relative;
	padding-top: 14.5%;
}
.hero__figs figure:nth-child(1),
.hero__figs figure:nth-child(2){
	position: absolute;
	height: auto;
}
.hero__figs figure:nth-child(1){ top: -60%; left: 0; width: calc(520 / 1000* 100%); }
.hero__figs figure:nth-child(2){ bottom: 0; right: 5%; width: calc(290 / 1000* 100%); }

@media screen and (max-width: 767px) {
	.hero__figs{
		position: relative;
		width: 342px;
		height: 280px;
		margin: -50px auto 0;
		padding-top: 0;
	}
	.hero__figs figure:nth-child(1){ top: auto; bottom: 0; left: 0; width: calc(305 / 342* 100%); }
	.hero__figs figure:nth-child(2){ top: 0; bottom: auto; right: 0; width: calc(142 / 342* 100%); }
}
/* ======================================================

	共通タイトル

====================================================== */
.title-wrap{
	text-align: center;
}
.title-wrap__mastercam{
	margin-bottom: .5em;

	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
}
.title-wrap__mastercam p:nth-child(1){
	max-width: 434px;
	margin: 0 auto 5px;
}
.title-wrap__name{
	/*max-width: 534px;*/
	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__lead{
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.47;
}
@media screen and (max-width: 767px) {
	.title-wrap__copy{
		font-size: 2.1rem;
	}
	.title-wrap__lead{
		font-size: 1.8rem;
		text-align: justify; text-justify: inter-ideograph;
	}
}
/* ======================================================

	アンカーカスタマイズ

====================================================== */
.layout-ex{
	display: flex;
	flex-wrap: wrap;
}
.layout-ex > .blk-fnc{
	width: 100%;
	order: 1;
}
.layout-ex > .c-row{
	width: 100%;
	order: 2;
}
@media screen and (max-width: 767px) {
	.layout-ex > .blk-fnc{
		order: 0;
	}
	.layout-ex > .c-row{
		order: 0;
	}
}
/* ======================================================

	アンカーカスタマイズ

====================================================== */
.p-anchor__item a{
	color: #8927d2;
}
.p-anchor__item a::before{
	background-color: #ffffff;
	box-shadow: 0 6px 0 0 rgba(0,0,0,.3);
}
.p-anchor__item a:hover::before{
	background-color: #bb82e5;
}
@media screen and (max-width: 767px) {
	.p-anchor{
		margin-bottom: 40px;
	}
}
/* ======================================================

	TOP 共通

====================================================== */
.prod-name{
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}
.prod-catch{
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}
.prod-lead{
	position: relative;
	z-index: 1;
	
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.47;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.prod-catch{
		font-size: 2.1rem;
	}
	.prod-lead{
		font-size: 1.8rem;
	}
}
/* ======================================================

	デモンストレーション

====================================================== */
.link-demo{
	position: relative;
	display: block;
	padding: 20px;
	border-radius: 20px;
	background-color: #ffffff;
	box-shadow: 4px 4px 4px 0 rgba(0,0,0,.3);

	text-align: center;
}
.link-demo__prod{
	display: flex;
	max-width: 600px;
	margin: 0 auto 10px;
}
.link-demo__prod figure{
	width: 50%;
}
.link-demo__ttl{
	font-size: 2.4rem;
	font-weight: bold;
}
.link-demo::before {
	position: absolute;
	display: block;
	content: '\e906';
	font-size: 6rem;
	top: 50%;
	right: 15px;
	margin-top: 1px;
	transform: translateY(-50%);
	color: #319041;
}
@media screen and (max-width: 767px) {
	.link-demo{
		padding-bottom: 60px;
	}
	.link-demo::before {
		top: auto;
		bottom: 0;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}
/* ======================================================

	注目ポイント！

====================================================== */
.p-check{ background-color: #ffffff; }
.p-check--merit{ background-color: #295ca0; }
.p-check--merit .p-check__title{ background-color: #ffffff; color:#295ca0;}
.p-check--merit .p-check__list{ color:#ffffff;}

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

	円

====================================================== */
.c-col-36{ width: 36%; }
.c-col-64{ width: 64%; }

.circle{
	position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}
.circle::before{
	content: "";
    display: block;
    padding-top: 100%;
}
.circle__content{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
    background-color: #295c98;
    border-radius: 50%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    color: #ffffff;
}
.circle__inner{
	width: 100%;
}
.circle__icon{
	position: relative;
}
.circle__icon picture{
	display: block;
	width: 78%;
	margin: 0 auto 10px;
}
.circle__title{
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.47;
	color: #009cc0;
}
.circle__text,
.circle__list{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 991px) {
	.circle__icon picture{
		width: 180px;
	}
	.circle__text,
	.circle__list{
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 767px) {
	.circle{
		max-width: 100%;
	}
	.circle__icon picture{
		width: 280px;
	}
	.circle__text,
	.circle__list{
		font-size: 1.7rem;
		text-align: left;
		color: #295c98;
	}
	.circle__list li{
		text-indent: -1em;
		padding-left: 1em;
	}
	.circle::before{
		content: none;
	}
	.circle__content{
		position: relative;
		display: block;
		padding: 10px 0;
	    background-color: transparent;
	    border-radius: 0;
	}
}
/* ======================================================

	レイアウト

====================================================== */
.p-check--circle{
	display: flex;
	align-items: center;
	margin-left: calc( -180 / 640 * 100% );
	padding: 50px 50px 50px calc( 210 / 640 * 100% );
	min-height: 360px;
}
@media screen and (max-width: 767px) {
	.p-check--circle{
		display: block;
		margin-left: 0;
		padding: 0;
		min-height: auto;
	}
}
/* ======================================================

	レイアウト

====================================================== */
.blk-fnc{ margin-bottom: 40px; }

.blk-fnc__lead{
	margin-bottom: .5em;

	font-size: 1.8rem;
	font-weight: bold;
}
.blk-fnc__title{
	margin-bottom: .5em;
	padding: 1px 10px;
	background-color: #8927d2;

	font-size: 2.0rem;
	font-weight: bold;
	color: #ffffff;
}
.blk-fnc__list,
.blk-fnc__text{
	margin-bottom: 1.5em;
}
.blk-fnc__list li{
	margin-bottom: .5em;
}

.layout-ex .blk-fnc{
	position: relative; 
	margin-bottom: -25px;
}
.layout-ex .blk-fnc__inner{
	position: absolute;
	top: 40%;
	width: 59%;
}
.layout-ex .blk-fnc figure{
	position: relative;
	width: 41%;
	margin: 0 0 0 auto;
	z-index: 1;
}
@media screen and (max-width: 767px) {
	.layout-ex .blk-fnc{
		margin-bottom: 0;
	}
	.layout-ex .blk-fnc__inner{
		position: relative;
		top: auto;
		width: auto;
	}
	.layout-ex .blk-fnc figure{
		width: auto;
	}
}
/* ======================================================

	レイアウト

====================================================== */
.aaa{
	position: relative;
}
.aaa .circle{
	margin-bottom: -30px;
}
.aaa .p-check__title,
.aaa .p-check__list,
.aaa .p-check__text{
	width: 60%;
}
.aaa > figure{
	position: absolute;
	top: 50%;
	right: 7%;
	width: 28%;
	transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
	.aaa .circle{
		margin-bottom: 0;
	}
	.aaa .p-check__title,
	.aaa .p-check__list,
	.aaa .p-check__text{
		width: auto;
	}
	.aaa > figure{
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		transform: none;
		max-width: 200px;
		margin-left: auto;
		margin-right: auto;
	}
}
/* ======================================================

	変則レイアウト
	Master3DGage™プローブ

====================================================== */
.blk-m3d-1{
	position: relative;
	padding: 40px;
	background-color: rgba(255,255,255,0.5);
}
.blk-m3d-1__text{
	position: relative;
	width: 36%;
	margin-left: 17%;
	z-index: 1;
}
.blk-m3d-1__text p:nth-child(1){
	margin-bottom: 1em;

	font-size: 1.8rem;
	font-weight: bold;
}
.blk-m3d-1__fig1{
	position: absolute;
	width: 19%;
	bottom: 5%;
	left: 4%;
	max-width: 190px;
}
.blk-m3d-1__fig2{
	position: absolute;
	width: 41%;
	bottom: 5%;
	left: 75%;
	transform: translateX(-50%);
	max-width: 410px;
}
@media screen and (max-width: 767px) {
	.blk-m3d-1{
		padding: 20px 15px;
	}
	.blk-m3d-1__text{
		width: auto;
		margin-left: 0;
		margin-bottom: 20px;
	}
	.blk-m3d-1__fig1{
		position: relative;
		width: auto;
		bottom: auto;
		left: 0;
		max-width: 190px;
	}
	.blk-m3d-1__fig2{
		position: relative;
		width: auto;
		bottom: auto;
		left: 0;
		transform: none;
		max-width: 410px;
	}
}
/* ======================================================

	変則レイアウト
	Master3DgageTM のプロ-ブと交換可能な非接触型レーザースキャナー（オプション）

====================================================== */
.blk-m3d-2{
	position: relative;
	padding: 40px;
	background-color: rgba(255,255,255,0.5);
}
.blk-m3d-2__text{
	width: 50%;
}
.blk-m3d-2__text p:nth-child(1){
	margin-bottom: 1em;

	font-size: 1.8rem;
	font-weight: bold;
}
.blk-m3d-2 figure{
	position: absolute;
	top: 50%;
	left: 75%;
	transform: translate(-50%,-50%);
	max-width: 260px;
}
@media screen and (max-width: 767px) {
	.blk-m3d-2{
		padding: 20px 15px;
	}
	.blk-m3d-2__text{
		width: auto;
		margin-bottom: 20px;
	}
	.blk-m3d-2 figure{
		position: relative;
		top: auto;
		left: auto;
		transform: none;
	}
}
/* ======================================================

	機能説明

====================================================== */
.blk-m3d-3 figure{
	position: relative;
	margin-bottom: 30px;
}
.blk-m3d-3 figure:not(:last-child){
	padding-bottom: 40px;
}
.blk-m3d-3 figure:not(:last-child)::before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 24px 24px 0 24px;
	border-color: #b685b4 transparent transparent transparent;
}
.blk-m3d-3 figcaption{
	padding-top: 0.25em;
	font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
	.p-check{
		padding: 0 15px 15px 15px;
	}
}