@charset "UTF-8";
/* ------------------------------------------------
                    共通css
--------------------------------------------------- */
/*---------- header ----------*/
header {
    width: 100%;
}
.factory header,
.school header {
	background: var(--col-white);
}
header .header-inn {
    width: 93%;
    max-width: 1340px;
	height:60px;
    margin: 0 auto;
    display: flex;
	align-items: center;
	justify-content: space-between;
}

/*ロゴ*/
header .header-logo {
    width: 180px;
    display: block;
}
header .header-logo a{
	font-size:2.0rem;
	letter-spacing: 0.1em;
	color:var(--col-navy);
}
header .gnav-wrap {
    width: calc(100% - 180px);
}
header .gnav-wrap ul#gnav {
    width: 100%;
    display: flex;
	align-items: center;
	justify-content: flex-end;
	gap:1em
}
header .gnav-wrap ul#gnav li {
	display: block;
}
header .gnav-wrap ul#gnav li:first-child{
	margin-right: 1em
}
header .gnav-wrap ul#gnav li a {
    display: block;
    font-size: 1.6rem;
    font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 0.45em 0 0.5em;
}

@media (min-width: 769px) {
}
@media (max-width: 768px) {
    header {
        width: 100%;
        background: var(--col-white);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    header .header-inn {
        width: 94%;
        max-width: 1024px;
        margin: 0 auto;
		height:14vw;
	}

    /*ロゴ*/
    header .header-logo {
        width: calc(100% - 16vw);
        display: block;
    }
	header .header-logo a{
		font-size:5vw;
	}
    header .gnav-wrap {
        width: 100%;
        height: calc(100% - 14vw);
		display: none;
        padding: 10vw 0 0;
        background: rgba(255,255,255,0.90);
        position: fixed;
        top: 14vw;
        left: 0;
        z-index: 998;
    }
    header .gnav-wrap ul#gnav {
        width: 100%;
        padding:0 10vw;
        display: block;
        position: relative;
    }
	header .gnav-wrap ul#gnav li{
		width:100%;
		text-align: center;
		margin-bottom: 5vw
	}
	header .gnav-wrap ul#gnav li:first-child{
		margin-right: 0
	}
    header .gnav-wrap ul#gnav li a {
        font-size: 3.8vw;
    }
	
	/* 開閉ボタン */
	.sp-menu-trigger {
		width: 12vw;
		max-width: 60px;
		height: 12vw;
		max-height: 60px;
		border-radius: 50%;
		z-index: 2001;
		background:var(--col-blue_green);
		border: none;
	}
	.sp-menu-btn {
		width: 60%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.sp-menu-btn span{
		display: block;
		height: 2px;
		background: #fff;
		position:absolute;
		width: 100%;
		left: 0;
		transition: 0.5s ease-in-out;	
	}
	.sp-menu-btn span:nth-child(1){
		top: calc(50% - 15%);
	}
	.sp-menu-btn span:nth-child(2){
		top: calc(50%);
	}
	.sp-menu-btn span:nth-child(3){
		top: calc(50% + 15%);
	}

	
	/*開閉ボタンopen時*/
	.is-open .sp-menu-btn span:nth-child(1) {
		top: 50%;
		transform: rotate(45deg);
		background: #fff;
	}
	.is-open .sp-menu-btn span:nth-child(2) {
		opacity: 0;
	}
	.is-open .sp-menu-btn span:nth-child(3) {
		top: 50%;
		transform: rotate(-45deg);
		background: #fff;
	}

}


/*---------- footer ----------*/

/* pagetop */
.pagetop {
    width: 60px;
    height: 60px;
    margin-bottom: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #3b393a;
    cursor: pointer;
    text-align: center;
    color: #000;
    font-size: 1.0rem;
    font-weight: 500;
    line-height: 1;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9996;
}
@media (max-width: 768px) {
    .pagetop {
        width: 12vw;
        height: 12vw;
        margin-bottom: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #3b393a;
        cursor: pointer;
        text-align: center;
        color: #000;
        font-size: 2.2vw;
        font-weight: 500;
        line-height: 1;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 9996;
    }
    
}

footer {
    width: 100%;
	background: var(--col-footer_bg);
	padding: 60px 0 0;
}
footer .footer-inn {
    width: 93%;
    max-width: 1340px;
    margin: 0 auto 80px;
    display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap:wrap
}
/*ロゴ*/
footer .footer-logo {
    width: 180px;
    display: block;
	margin-bottom: 1em
}
footer .footer-logo a{
	font-size:2.0rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color:var(--col-white);
}
footer .f-gnav-wrap {
    width: calc(100% - 180px);
	min-width: 660px
}
footer .f-gnav-wrap ul {
    width: 100%;
    display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap:1em
}
footer .f-gnav-wrap ul li {
	display: block;
	color:var(--col-white);
}
footer .f-gnav-wrap ul li:nth-child(-n+2){
	margin-right: 2em
}
footer .f-gnav-wrap ul li a {
    display: block;
	letter-spacing: 0.1em;
	line-height: 1;
	color:var(--col-white);
	padding: 0.45em 0 0.5em;
}
footer .f-gnav-wrap ul li a.child{
	font-size: 0.875em;
	padding-left: 2em
}

footer .copyright {
    width: 100%;
    padding: 15px 0 ;
    text-align: center;
	color:var(--col-white);
    font-size: 1.0rem;
}

@media (max-width: 768px) {
    footer {
       padding: 6vw 0 0;
    }
	footer .footer-inn {
		width: 94%;
        max-width: 1024px;
		 margin: 0 auto 4vw;
	}
	/*ロゴ*/
	footer .footer-logo {
		width: 100%;
	}
	footer .footer-logo a{
		font-size:4vw;
	}
	footer .f-gnav-wrap {
		width: 90%;
		margin: 0 auto;
		min-width: inherit
	}
	footer .f-gnav-wrap ul{
		flex-wrap: wrap;
		justify-content: space-between;
		gap:1em 0
	}
	footer .f-gnav-wrap ul li:nth-child(-n+2){
		margin-right: 0
	}
	footer .f-gnav-wrap ul li:nth-child(1){order:1}
	footer .f-gnav-wrap ul li:nth-child(2){order:3}
	footer .f-gnav-wrap ul li:nth-child(3){order:2}
	footer .f-gnav-wrap ul li:nth-child(4){order:4}
	
	footer .f-gnav-wrap ul li.f-txt{
		width:40%;
	}
	footer .f-gnav-wrap ul li.f-btn{
		width:55%;
		text-align: center
	}
	footer .f-gnav-wrap ul li a.child{
		font-size: 0.875em;
		padding-left: 1em
	}
    footer .copyright {
        width: 100%;
        font-size: 2.6vw;
    }
}


/*---------- コンテンツ レイアウト ----------*/
.cont-inn {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}


@media (max-width: 768px) {
    .cont-inn {
        width: 90%;
        max-width: initial;
        margin: 0 auto;
        position: relative;
    }
}



.feature-wrap{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 80px;
	gap:60px 45px
}
.feature-item{
	width:calc((100% - (45px * 2)) / 3);
	background:var(--col-white);
	border:2px solid var(--col-navy);
	border-radius:40px;
	padding: 30px 20px;
	text-align: center;
	position: relative;
	box-shadow:var(--item_shadow-o);
}
.feature-item .item-name {
	font-weight: 400;
	position: absolute;
	top:-1.2em;
	left:0;
	right:0;
	margin: auto
}
.feature-item h3.item-name {
	font-weight: 400;
}
.feature-item .item-name span{
	background: var(--col-blue_green);
	color:var(--col-white);
	display: inline-block;
	padding: 0.4em 1em;
	border-radius: 2em;
	font-size: 2.4rem;
	line-height: 1
}
.feature-item .item-image{
	width:47%;
	margin: 0 auto;
	background-image: url("../../../../img/products/item01/common/feature-item-cir.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain

}
.feature-item .item-lead{
	display: inline-block;
	font-size:1.8rem;
	padding: 0 0.2em;
	margin-top: 1em;
}

.feature-item .item-txt{
	color:var(--col-text_gray);
	margin-top: 1em
}


@media (max-width: 1200px) {
	.feature-item{
		width:calc((100% - (45px * 2)) / 2);
	}
}

@media (max-width: 768px) {
	.feature-wrap{
		margin-top: 12vw;
		gap:8vw;
	}
	.feature-item{
		width:80%;
		border-radius:5vw;
		padding:6vw 2vw 4vw;
		text-align: center;
		position: relative;
		box-shadow:var(--item_shadow-o_sp);
	}
	.feature-item .item-name{
		position: absolute;
		top:-1.2em;
		left:0;
		right:0;
		margin: auto

	}
	.feature-item .item-name span{
		background: var(--col-blue_green);
		font-size:4.6vw;
	}
	.feature-item .item-lead{
		font-size:3.6vw;
	}

}

/*---------- カラー ----------*/

@media (max-width: 768px) {
}


/*---------- テキスト ----------*/
.sec-ttl{
	text-align: center;
	margin-bottom: 40px;
}
.sec-ttl .en{
	display: block;
	font-size:3.0rem;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	color:var(--col-text_gray-o);
	padding-bottom:1em;
	margin-bottom: 1em;
	position: relative;
}
.sec-ttl .en::after{
	position: absolute;
	content:'';
	width:1.5em;
	height:0.15em;
	background: var(--col-orange);
	left:0;
	right:0;
	bottom:0em;
	margin: auto
}
.sec-ttl .jp{
	display: block;
	font-size:3.6rem;
	font-weight: 700;
	line-height: 1;
}

.mv .lead-txt{
	font-size:1.8rem;
	margin-top: 40px;
}
.note-txt{
	font-size:1.4rem;
	margin-top: 1em
}
.marker{
		background:linear-gradient(transparent 65%, var(--col-yellow-o) 65%);
	padding: 0 0.4em
}
 .nowrap{
	white-space: nowrap
}

@media (max-width: 768px) {
	.sec-ttl{
		margin-bottom: 6vw;
	}
	.sec-ttl .en{
		font-size:4.4vw;
	}
	.sec-ttl .jp{
		display: block;
		font-size:5.8vw;
		font-weight: 700;
		line-height: 1.2;
	}

	.mv .lead-txt{
		font-size:3.6vw;
		margin-top:4vw;
	}
	.note-txt{
		font-size:3.0vw;
	}

}

/*---------- ボタン ----------*/
.btn-dl,
.btn-contact{
	display: block;
	padding: 0.45em 1em 0.5em 2.5em!important;
	border-radius: 2em;
	border:1px solid var(--col-cta_orange);
}
a.btn-dl{
	background: var(--col-cta_orange);
	color:var(--col-white)!important;
}
a.btn-contact{
	color: var(--col-cta_orange)!important;
	background:var(--col-white)
}
a.btn-dl span,
a.btn-contact span{
	position: relative
}
a.btn-dl span::before,
a.btn-contact span::before{
	position: absolute;
	content:'';
	width:1.3em;
	height:1.3em;
	top:0;
	bottom:0;
	left:-1.7em;
	margin: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain
}
a.btn-dl span::before{
	background-image: url("../../../../img/products/item01/common/icon-dl.svg");	
}
a.btn-contact span::before{
	background-image: url("../../../../img/products/item01/common/icon-mail.svg");
}

@media (max-width: 768px) {
}

/*---------- table ----------*/
table{
	border-collapse: collapse; /* 枠線を1本に */
	border-spacing: 0;        /* セルの隙間を0に */
}
.table-wrap{
	width:100%;
	border:2px solid var(--col-navy);
	border-radius: 40px;
	overflow: hidden;
	box-shadow: var(--table_shadow)
}
.table-wrap table{
	width:100%;
}
.table-wrap table th{
	background:  var(--col-navy);
	font-size:2.2rem;
	color:var(--col-white);
	text-align: center;
	padding:  0.5em
}
.table-wrap table tr:not(:first-child){
	border-top:1px solid var(--col-gray);
}
.table-wrap table th:not(:last-child),
.table-wrap table td:not(:last-child){
	border-right:1px solid var(--col-gray);
}
.table-wrap table td{
	text-align: center;
	padding: 1em 0.5em
}
.table-wrap span{
	display: inline-block;
}

@media (max-width: 768px) {
	.table-wrap{
		border-radius: 5vw;
	}
	.table-wrap table{
		width:100%;
		line-height: 1.4
	}
	.table-wrap table th{
		font-size:4.0vw;
	}
}