@charset "utf-8";

/********************************************************
	
	flex-grid:| sm  | md  | lg  |  xl  |
	min-width:| 576 | 768 | 992 | 1200 |
	max-width:| 575 | 767 | 991 | 1199 |

********************************************************/

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

	education 共通

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

.sp{
	display:none;
}

.pc{
	display:block;
}

.clearfix:after{
	content: ".";
	font-size: 0.1em;
	line-height: 0;
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

.clearfix{
    min-height: 1%;
    _height: 1%;
}

.c_both{
	clear:both;
}


/* ======================================================
	space
====================================================== */
.pb10{
	padding-bottom:10px;
}

.pb20{
	padding-bottom:20px;
}

.pb30{
	padding-bottom:30px;
}

.pb40{
	padding-bottom:40px;
}

.pb50{
	padding-bottom:50px;
}

.pb60{
	padding-bottom:60px;
}

.pb70{
	padding-bottom:70px;
}

.pb80{
	padding-bottom:80px;
}

.pb90{
	padding-bottom:90px;
}

.pb100{
	padding-bottom:100px;
}

.pt10{
	padding-top:10px;
}

.pt20{
	padding-top:20px;
}

.pt30{
	padding-top:30px;
}

.pt40{
	padding-top:40px;
}

.pt50{
	padding-top:50px;
}

.pt60{
	padding-top:60px;
}

.pt70{
	padding-top:70px;
}

.pt80{
	padding-top:80px;
}

.pt90{
	padding-top:90px;
}

.pt100{
	padding-top:100px;
}

.mt10{
	margin-top:10px;
}

.mt20{
	margin-top:20px;
}

.mt30{
	margin-top:30px;
}

.mt40{
	margin-top:40px;
}

.mt50{
	margin-top:50px;
}

.mt60{
	margin-top:60px;
}

.mt70{
	margin-top:70px;
}

.mt80{
	margin-top:80px;
}

.mt90{
	margin-top:90px;
}

.mt100{
	margin-top:100px;
}

.mb10{
	margin-bottom:10px;
}

.mb20{
	margin-bottom:20px;
}

.mb30{
	margin-bottom:30px;
}

.mb40{
	margin-bottom:40px;
}

.mb50{
	margin-bottom:50px;
}

.mb60{
	margin-bottom:60px;
}

.mb70{
	margin-bottom:70px;
}

.mb80{
	margin-bottom:80px;
}

.mb90{
	margin-bottom:90px;
}

.mb100{
	margin-bottom:100px;
}

@media screen and (max-width: 767px) {
	.mt100{
		margin-top:55px;
	}

	.pb100{
		padding-bottom:50px;
	}

	.pt100{
		padding-top:50px;
	}

	.pt90{
		padding-top:45px;
	}

	.pt70{
		padding-top:35px;
	}
}


/* ======================================================
	font
====================================================== */
.education{
	font-size: 1.7rem;
}

.education a{
	color:#295ca0;
	text-decoration:underline;
}

.font_s{
	font-size: 1.4rem;
	line-height: 24px;
}

.font_b{
	font-size: 1.8rem;
	line-height: 26px;
}

.section_title{
	font-family: serif;
	clear:both;
	max-width:1000px;
	margin:0 auto;
	font-weight:bold;
	font-size: 4.8rem;
	line-height:70px;
	text-align:center;
}

.lead{
	text-align:center;
}

@media screen and (max-width: 767px){
	.education{
		font-size: 1.4rem;
	}

	.section_title{
		font-size: 7vw;
		line-height: 8vw;
	}

	.lead{
		width:96%;
		margin:0 auto;
		text-align:left;
		padding-bottom:10%;
	}

}

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

	header

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

.hd-navi-util {
  position: absolute;
  width: 100%;
	top:0;
}

.hd-left {
  display: flex;
  height: inherit;
	width:100%;
}

.hd-left nav {
  height: inherit;
  display: block;
	width:100%;
}

.sublink{
  position: absolute;
	right:220px;
	top:8px;
  height: 20px;
	z-index:100;
	font-weight:normal;
  font-size: 1.4rem;
}

.sublink a {
  position: relative;
  display: block;
  padding-left: 1em;
}

.sublink a::before {
  position: absolute;
  display: block;
  content: '\e906';
  font-size: 1em;
  top: 0.3em;
  left: 0;
  color: #319041;
}

.is-min .sublink {
	top:2px;
  font-size: 1.0rem;
}

.hd-form-wrap div{
	text-align:center;
  position: relative;
	margin:0 auto 20px;
  font-size: 1.4rem;
}

.hd-form-wrap div p{
	display: inline-block;
}

.hd-form-wrap div p a{
  position: relative;
  display: block;
  padding-left: 1em;
}

.hd-form-wrap div p a::before {
  position: absolute;
  display: block;
  content: '\e906';
  font-size: 1em;
  top: 0.3em;
  left: 0;
  color: #319041;
}
/*
.hd-left nav {
  height: inherit;
  display: block;
	width:100%;
}
*/


@media screen and (max-width: 767px) {
  .hd-navi-util {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column-reverse;
  }

  .hd-left nav {
    display: none;
  }
}


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

	mainvisual

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


.main{
	width:100%;
	background: #59aca7 url(images/mainvisual.png) center 100px no-repeat;
}

.container{
	max-width:1000px;
	margin:0 auto;
	position:relative;
}

.main .container .main_catch{
	width:66px;
	height:273px;
	margin-left:82%;
	padding-top:170px;
}

.main .container h2{
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size: 2.8rem;
	line-height: 42px;
	padding-top:350px;
	padding-bottom:40px;
	max-width:1000px;
}


@media screen and (max-width: 767px) {
	.container{
		width:98%;
	}

	.main{
		width:100%;
		height: auto;
		background: #59aca7 url(images/mainvisual.png) 0 100px no-repeat;
		background-size: 100% auto;
	}

	.main .container .main_catch{
		width:10%;
		height:auto;
		margin-left:5%;
		padding-top:60px;
	}

	.main .container h2{
		color:#fff;
		text-align:center;
		font-weight:bold;
		font-size: 4.6vw;
		line-height: 6vw;
		padding-top:55%;
		width:100%;
	}

	.sp{
		display:block;
	}

}



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

	block1

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

.block1_img{
	width:640px;
	margin:0 auto;
}

.block2 h3{
	color:#004887;
	text-align:center;
	font-size: 2.4rem;
	line-height: 36px;
}

.list_title{
	background-color:#808080;
	color:#fff;
	padding:0 0 0 10px;
}

.block2 img{
	width:100%;
}

.block2 p{
	text-align:left !important;
}

@media screen and (max-width: 767px) {
/*
	.block1{
		padding-top:10%;
	}
*/
	.block1_img{
		width:94%;
		margin:0 auto;
		padding:5% 0;
	}

	.block2 h3{
		color:#004887;
		text-align:center;
		font-size: 2.0rem;
		line-height: 26px;
		padding-bottom:10px;
		border-top:1px solid #d9d9d9;
		margin-top:3%;
		padding-top:3%;
	}

	.pc{
		display:none;
	}

}


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

	block3

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

.block3{
	clear:both;
	width:100%;
	background-color:#d6d5cf;
}


@media screen and (max-width: 767px) {
/*
	.block3{
		padding-top:40px;
	}
*/
}


/********************************************************
	.product-category
********************************************************/
.product-category{
	max-width:1000px;
	margin:0 auto;
	display: flex;
	text-align:center;
	font-size: 2.0rem;
}

.product-category a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration:none;
}

.product-category__other{ 
	display: flex; 
	flex: 0 0 100%; 
}

.product-category__other a{ 
	flex: 0 0 24.6%; 
	height: 110px; 
	margin:0 2px;
	border-bottom:4px solid #d6d5cf;
	background-color:#fff;
	color: #000;
	line-height:30px;
}

.product-category__other a.active:nth-of-type(1) {
	border-bottom:4px solid #51aa9b !important;
	color:#fff;
	background-color:#51aa9b;
}

.product-category__other a.active:nth-of-type(2) {
	border-bottom:4px solid #7160a3 !important;
	color:#fff;
	background-color:#7160a3;
}

.product-category__other a.active:nth-of-type(3) {
	border-bottom:4px solid #e47771 !important;
	color:#fff;
	background-color:#e47771;
}

.product-category__other a.active:nth-of-type(4) {
	border-bottom:4px solid #d98e4a !important;
	color:#fff;
	background-color:#d98e4a;
}



#tab{
	background-color:#fff;
}

#tab img{
	width:100%;
}

.tab_inn{
	width:750px;
	margin:0 auto;
}

/********************************************************
	tab1
********************************************************/

.block3_tab1_catch1{
	width:430px;
	height:86px;
	margin:0 auto;
	background: url(images/block3_icon1.svg) left center no-repeat;
	padding-left:100px;
}

.mastercam{
	width:286px;
	margin:0 auto;
}

#tab p{
	text-align:left;
	padding:0;
}

.waku{
	width:750px;
	border:1px solid #bfbfbf;
	margin-top:15px;
	padding-bottom:15px;
}

.waku p{
	padding:15px 0 0 20px !important;
	/*font-size: 1.6rem;*/
}


#tab2,
#tab3,
#tab4 {
  display: none;
}


#tab1 .waku{
	background: url(images/tab1_img1.jpg) right top no-repeat;
}

.tab_img{
	display:none;
}

.btnblock{
	width:750px;
	margin:0 auto;
	font-size: 1.6rem;
	line-height:25px;
	margin-top:20px;
	padding-bottom:40px;
}

.tab_underline{
	border-bottom:2px solid #dfdfdf;
}

.btnblock_inn{
	float:left;
	width:530px;
}

.btnblock_img{ 
	float:right;
	width:196px;
}

.product_btn{
	clear:both;
	width:100%;
	padding:10px 0 20px;
}

.product_btn a{
	text-decoration:none !important;
}

.product_btn ul li{
	float:left;
	margin-right:10px;
}

.c-link{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 50px 5px 30px;
	margin: 0 auto;
	background-color: #80af26;
	font-size: 1.4rem;
	color: #ffffff !important;
}

.c-link:before{
	position: absolute;
	display: block;
	content: "\e902";
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 1.8rem;
}

.block3_tab1_catch2{
	width:430px;
	height:86px;
	margin:50px auto 0;
	background: url(images/block3_icon1.svg) left center no-repeat;
	padding-left:100px;
}

.henshuuchou{
	width:180px;
	margin:0 auto;
}

.henshuuchou_cap{
	display: flex;
	max-width:800px;
	margin:30px auto;
}

.henshuuchou_cap p{ 
	margin:0 6px;
}

.henshuuchou_cap span{ 
	display:block;
	text-align:center;
	font-size: 1.2rem;
}

.acrobat{
	display: flex;
	width:450px;
	margin:0 auto;
	padding:30px 0 60px;
}

.acrobat .btn_acrobat{ 
	flex: 0 0 25%; 
}

.acrobat p{ 
	flex: 0 0 75%; 
	font-size: 1.2rem;
	line-height:15px;
	text-align:left;
	padding:0 0 0 5px;
}

@media screen and (max-width: 767px) {

	.product-category{
		width:98%;
		margin-bottom: 0.5%;
		font-size: 1.8rem;
		line-height:26px;
	}
	.product-category__other{ flex-wrap: wrap; flex: 0 0 100%; }
	.product-category__other a{ flex: 0 0 49%; 	margin:0 0.5%;}

	#tab{
		width:97%;
		margin:0 auto;
		background-color:#fff;
	}

	.pc{
		display:none;
	}

	.block3_tab1_catch1{
		width:80%;
		margin:0 auto;
		background:none;
		padding-left:0;
		height:auto;
	}

	.block3_tab1_catch2{
		width:80%;
		margin:50px auto 0;
		background:none;
		padding-left:0;
		height:auto;
	}

	.tab_inn{
		width:100%;
		margin:0 auto;
	}

	.mastercam{
		width:70%;
		margin:0 auto;
	}

	#tab p{
		width:90%;
		margin:0 auto;
	}

	.tab_img{
		display:block;
		width:40%;
		margin:0 auto;
		padding-top:3%;
	}

	.waku{
		width:94%;
		margin:0 auto;
		border:1px solid #bfbfbf;
		margin-top:15px;
		padding-bottom:15px;
	}

	.waku p{
		padding:5px 0 0 0 !important;
		/*font-size: 1.4rem;*/
	}

	#tab1 .waku{
		background: none;
	}

	.btnblock{
		width:94%;
		margin:0 auto;
		font-size: 1.6rem;
		line-height:25px;
		margin-top:20px;
		padding-bottom:40px;
	}

	.btnblock_inn{
		clear:both;
		width:100%;
	}

	.btnblock_img{ 
		float:none;
		width:60%;
		margin:0 auto;
	}

	.c-link{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 70px 10px 10px;
		margin: 0 auto;
		background-color: #80af26;
		font-size: 1.8rem;
		color: #ffffff !important;
	}

	.product_btn .sp{
		display:block !important;
		margin-bottom:3%;
	}

	.henshuuchou{
		width:40%;
		margin:0 auto;
	}

	.henshuuchou_cap{
		flex-wrap: wrap; 
		flex: 0 0 100%;
		width:90%;
	}

	.henshuuchou_cap p{ 
		flex: 0 0 48%; 
		margin:0 2% 3% 0 !important;
	}

	.henshuuchou_cap p img{ 
		width:100%;
	}

	.henshuuchou_cap span{ 
		font-size: 1.4rem;
	}

	.acrobat{
		display: block;
		width:100%;
		margin:0 auto;
		padding:30px 0 60px;
	}

	.acrobat img{
		width:100%;
	}

	.acrobat .btn_acrobat{ 
		width:40%;
		margin:0 auto;
		padding-bottom:3%;
	}

	.acrobat p{ 
		width:94%;
		margin:0 auto; 
		font-size: 1.4rem;
		line-height:20px;
		text-align:center;
		padding:0;
	}
}

/********************************************************
	tab2
********************************************************/
.block3_tab2_catch1{
	width:400px;
	height:86px;
	margin:0 auto;
	background: url(images/block3_icon2.svg) left center no-repeat;
	padding-left:80px;
}

.octopus{
	width:380px;
	margin:0 auto;
}

.tab2_inn{
  justify-content: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width:750px;
	margin:0 auto;
	/*font-size: 1.4rem;*/
}

.tab2_inn .box1{
	width:510px;
	margin-right:30px;
}

.tab2_inn .box2{
	width:210px;
}

@media screen and (max-width: 767px) {
	.block3_tab2_catch1{
		width:80%;
		margin:0 auto;
		background:none;
		padding-left:0;
		height:auto;
	}

	.octopus{
		width:70%;
		margin:0 auto;
	}

	.tab2_inn{
		/*font-size: 1.4rem;*/
		display:block;
		width:92%;
		margin:0 auto;
	}

	.tab2_inn .box1{
		width:100%;
		margin-right:0;
	}

	.tab2_inn .box2{
		width:60%;
		margin:4% auto 0;
	}

}

/********************************************************
	tab3
********************************************************/
.block3_tab3_catch1{
	width:430px;
	height:86px;
	margin:0 auto;
	background: url(images/block3_icon3.svg) left center no-repeat;
	padding-left:100px;
}

.verisurf{
	width:260px;
	margin:0 auto;
}

.block3_tab3_catch2{
	width:430px;
	height:86px;
	margin:50px auto 0;
	background: url(images/block3_icon3.svg) left center no-repeat;
	padding-left:100px;
}

.master3dgage{
	width:340px;
	margin:0 auto;
}

@media screen and (max-width: 767px) {
	.block3_tab3_catch1{
		width:80%;
		margin:0 auto;
		background:none;
		padding-left:0;
		height:auto;
	}

	.verisurf{
		width:60%;
		margin:0 auto;
	}

	.block3_tab3_catch2{
		width:80%;
		margin:50px auto 0;
		background:none;
		padding-left:0;
		height:auto;
	}

	.master3dgage{
		width:70%;
		margin:0 auto;
	}
}

/********************************************************
	tab4
********************************************************/
.block3_tab4_catch1{
	width:420px;
	height:86px;
	margin:0 auto;
	background: url(images/block3_icon4.svg) left center no-repeat;
	padding-left:90px;
}

.cubicon{
	width:260px;
	margin:0 auto;
}

.cubicon_sub{
	text-align:center;
	font-size: 2.0rem;
	font-weight:bold;
	padding-bottom:20px;
}


.tab4_inn{
  justify-content: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width:750px;
	margin:0 auto;
	/*font-size: 1.4rem;*/
}

.tab4_inn .box1{
	width:470px;
	margin-right:30px;
}

.tab4_inn .box2{
	width:250px;
}

.tab4_inn .box1 .waku{
	width:470px;
	border:1px solid #bfbfbf;
	margin-top:15px;
}

.block3_tab4_catch2{
	width:430px;
	height:86px;
	margin:50px auto 0;
	background: url(images/block3_icon4.svg) left center no-repeat;
	padding-left:90px;
}

.ads{
	width:360px;
	margin:0 auto;
}

@media screen and (max-width: 767px) {
	.block3_tab4_catch1{
		width:80%;
		margin:0 auto;
		background:none;
		padding-left:0;
		height:auto;
	}

	.cubicon{
		width:50%;
		margin:0 auto;
	}

	.cubicon_sub{
		font-size: 1.6rem;
	}

	.tab4_inn{
		/*font-size: 1.4rem;*/
		display:block;
		width:92%;
		margin:0 auto;
	}

	.tab4_inn .box1{
		width:100%;
		margin-right:0;
	}

	.tab4_inn .box2{
		width:60%;
		margin:4% auto 0;
	}

	.tab4_inn .box1 .waku{
		width:100%;
	}

	.block3_tab4_catch2{
		width:80%;
		margin:50px auto 0;
		background:none;
		padding-left:0;
		height:auto;
	}

	.ads{
		width:50%;
		margin:0 auto;
	}
}




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

	block4

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

.month{
	width:100%;
	margin-bottom:40px;
}

.month ul{
	display: flex;
	justify-content: center;
}

.month ul li{
	border-right:2px solid #000;
	padding:0 40px;
	line-height:22px;
}

.month ul li:first-child{
	border-left:2px solid #000;
}

.month ul li a{
	color:#000;
	text-decoration:none;
}

.event{
	max-width:1000px;
	height:800px;
	overflow: auto;
	border:1px solid #bababa;
	box-sizing:border-box;
}
/*
.event img{
	width:100%;
}
*/
.event_innner{
	padding:30px;
}
/*
#event2017 {
  display: none;
}
*/
.event_block{
	clear:both;
}

.event_block .end{
	background-color:#bf545e;
	color:#fff;
	padding:2px 10px;
}

.event_block .title{
	font-weight:bold;
}

.event_block dl {
	width:800px;
}

.event_block dl dt {
	width:auto;
	clear:left;
	float:left;
	white-space: nowrap;
}

.event_block dl dd {
	float:left;
}

.event_block p{
	clear:both;
}

.event .line{
	border-top:1px solid #bfbfbf;
	margin-top:30px;
	padding-top:30px;
}

.event .close_event{
	background-color:#1644A5;
	color:#fff;
	padding:5px 20px;
	font-size: 2.0rem;
	font-weight:bold;
	margin-bottom:20px;
}
/*
.event a{
	color:#295ca0;
}
*/
@media screen and (max-width: 767px) {

	.event_block .c-row{
		display:block;
	}

	.event_block .c-row div{
		width:100% !important;
		margin-bottom:20px;
	}

	.event_block .movie {
		position: relative;
		max-width: 100%;
		padding-top: 56%;
	}

	.event_block .movie iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}

	.event_block dl {
		width:100%;
	}

}

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

	select

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

#new{
	padding-bottom:100px;
}


#new, #finish{
  margin-top: -100px;
	padding-top:100px;
}


.press-select-box{
    text-align: right;
}
.press-select-box select{
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    padding: 5px 30px 5px 30px;
    border: 1px solid #b3b3b3;

    font-size: 1.6rem;
}
/*IE11*/
.press-select-box select::-ms-expand {
    display: none; 
}
.press-select-box label {
    position: relative;
}
.press-select-box label:after {
    display: block;
    content: '\e900';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 20px;
    height: 20px;
    margin-top: -9px;
    /*background-color: #ff0000;*/
    /*background-size: 20px;*/
    pointer-events: none;

    font-family: 'jbm' !important;
    font-size: 20px;
    color: #545454;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}





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

	block5

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

.block5{
	width:100%;
	background-color:#cfdd9c;
}

.block5_title{
	clear:both;
	width:642px;
	margin:0 auto;
}

.block5_img{
	max-width:705px;
	margin:0 auto;
}

.introduction h3{
	background-color:#fff;
	text-align:center;
	font-weight:bold;
	font-size: 2.2rem;
	padding:5px 0;
}

.introduction .center{
	text-align:center;
	padding:10px 0 30px;
}

.pdf{
	padding:20px 0 30px;
	display: flex;
	justify-content: center;
}

.pdf p{
	margin-right:15px;
}

.introduction ul li{
	float:left;
	margin-bottom:20px;
	line-height:24px;
}

.introduction ul li a{
	color:#000;
	display:block;
	width:490px;
	min-height:80px;
	padding-left:135px;
	text-decoration:none;
}

.introduction ul li a p{
	text-indent : -1em;
  padding-left : 1em;
}

.introduction ul li:nth-child(odd){
	margin-right:20px;
}


.introduction ul li:nth-child(1){
	background: url(images/introduction1.jpg) left top no-repeat;
}

.introduction ul li:nth-child(2){
	background: url(images/introduction2.jpg) left top no-repeat;
}

.introduction ul li:nth-child(3){
	background: url(images/introduction3.jpg) left top no-repeat;
}

.introduction ul li:nth-child(4){
	background: url(images/introduction4.jpg) left top no-repeat;
}

.introduction ul li:nth-child(5){
	background: url(images/introduction5.jpg) left top no-repeat;
}

.introduction ul li:nth-child(6){
	background: url(images/introduction6.jpg) left top no-repeat;
}

.introduction ul li:nth-child(7){
	background: url(images/introduction7.jpg) left top no-repeat;
}

.introduction ul li:nth-child(8){
	background: url(images/introduction8.jpg) left top no-repeat;
}


@media screen and (max-width: 767px) {

	.block5_img{
		width:94%;
		margin:0 auto;
	}

	.introduction ul{
		width:94%;
		margin:0 auto;
	}

	.introduction ul li{
		width:100%;
		float:none;
		margin-bottom:20px;
	}

	.introduction ul li a{
		width:100%;
		min-height:auto;
		padding-left:0;
	}

	.introduction ul li{
		background-image:none !important;
	}
}



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

	block6

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

.block6 .title{
	color:#fff;
	font-size: 2.0rem;
	padding-left:15px;
	line-height:30px;
}

.color1{
	background-color:#51a596;
}

.color2{
	background-color:#d48e67;
}

.color3{
	background-color:#7c6f9e;
}


/* ======================================================
	tutorial1
====================================================== */
ul.asterisk li {
  list-style-type: none;
  text-indent: -1em;
	margin-left:5px;
	padding-bottom:5px;
}

ul.asterisk li:before {
  display: inline;
  content: "※";
}

.tutorial1, .tutorial2{
  justify-content: center;
  /*align-items: center;*/
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	width:1000px;
	margin:0 auto;
	font-size: 1.2rem;
	line-height:18px;
	background-color:#ededed;
	padding:20px;
}

.tutorial1 .box1{
	-webkit-box-ordinal-group:1;
	-ms-flex-order:1;
	-webkit-order:1;
	order:1;
	width:115px;
}

.tutorial1 .box2{
	-webkit-box-ordinal-group:2;
	-ms-flex-order:2;
	-webkit-order:2;
	order:2;
	width:320px;
	margin-left:20px;
	margin-top:0;
}

.tutorial1 .box3{
	-webkit-box-ordinal-group:3;
	-ms-flex-order:3;
	-webkit-order:3;
	order:3;
	width:320px;
	margin-left:20px;
	margin-top:0;
}

.tutorial1 .box4{
	-webkit-box-ordinal-group:4;
	-ms-flex-order:4;
	-webkit-order:4;
	order:4;
	width:115px;
	margin-left:20px;
}

.tutorial1 .box2 ul, .tutorial1 .box3 ul, .tutorial2 .box1 ul, .tutorial2 .box2 ul{
	border-top:1px solid #000;
	box-sizing:border-box;
	padding:5px 0;
	margin-top:5px;
	/*min-height:130px;*/
	padding-left:15px
}

.tutorial1 .box2 ul, .tutorial1 .box3 ul, .tutorial2 .box1 ul, .tutorial2 .box2 ul li{
	list-style-type: decimal;;
}


.tutorial2 .box1{
	-webkit-box-ordinal-group:1;
	-ms-flex-order:1;
	-webkit-order:1;
	order:1;
	width:320px;
	margin-top:0;
}

.tutorial2 .box2{
	-webkit-box-ordinal-group:2;
	-ms-flex-order:2;
	-webkit-order:2;
	order:2;
	width:320px;
	margin-left:20px;
	margin-top:0;
}


@media screen and (max-width: 767px) {

	.tutorial1, .tutorial2{
		justify-content: flex-start;
		align-items: stretch;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		width:100%;
		margin:0 auto;
	}

	.tutorial1 .box1{
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
		width:30%; 
	}

	.tutorial1 .box2{
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
		width:65%;
		margin-left:5%;
	}

	.tutorial1 .box3{
		-webkit-box-ordinal-group:4;
		-ms-flex-order:4;
		-webkit-order:4;
		order:4;
		width:65%;
		margin-left:5%;
		margin-top:3%;
	}

	.tutorial1 .box4{
		-webkit-box-ordinal-group:5;
		-ms-flex-order:5;
		-webkit-order:5;
		order:5;
		width:65%;
		margin-left:35%;
		margin-top:3%;
	}

	.tutorial1 .box5{
		-webkit-box-ordinal-group:3;
		-ms-flex-order:3;
		-webkit-order:3;
		order:3;
		width:30%;
		margin-top:3%;
		margin-left:0;
	}

	.tutorial1 .box3 ul, .tutorial1 .box4 ul{
		min-height:auto;
	}


	.tutorial1 .box1{
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
		width:30%; 
	}

	.tutorial1 .box2{
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
		width:65%;
		margin-left:5%;
	}

	.tutorial1 .box3{
		-webkit-box-ordinal-group:4;
		-ms-flex-order:4;
		-webkit-order:4;
		order:4;
		width:65%;
		margin-left:5%;
		margin-top:3%;
	}

	.tutorial1 .box4{
		-webkit-box-ordinal-group:3;
		-ms-flex-order:3;
		-webkit-order:3;
		order:3;
		width:30%; 
		margin-top:3%;
		margin-left:0;
	}

	.tutorial1 .box2 ul, .tutorial1 .box3 ul, .tutorial2 .box1 ul, .tutorial2 .box2 ul{
		min-height:auto;
	}

	.tutorial2 .box1, .tutorial2 .box2{
		width:100%;
		margin-top:3%;
		margin-left:0;
	}

}


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

	confirm

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

#cont1{
	margin-top:-50px;
 	padding-top:50px;
}

#cont2{
	margin-top:-50px;
 	padding-top:50px;
}

#cont3{
	margin-top:-50px;
 	padding-top:50px;
}

#cont4{
	margin-top:-1px;
 	padding-top:1px;
}

#cont5{
	margin-top:-50px;
 	padding-top:50px;
}

#cont6{
	margin-top:-60px;
 	padding-top:60px;
}

.confirm{
	clear:both;
	width:576px;
	margin:0 auto 0;
}

.confirm h2{
	max-width:1000px;
	margin:0 auto;
	font-weight:bold;
	font-size: 2.3rem;
	text-align:center;
}

.confirm h3{
	background-color:#ca0500;
	color:#FFF;
	text-align:center;
}

.confirm p{
	font-size: 1.4rem;
	padding:10px 20px;
}

.btn_confirm{
	margin-top:10px;
}

#cont6 .center{
	text-align:center;
}

@media screen and (max-width: 767px){
	.confirm{
		clear:both;
		width:94%;
		margin:20px auto 0;
	}

	.confirm h2{
		font-size: 5vw;
		line-height: 7vw;
	}

	.confirm h3{
		font-size: 4vw;
		margin-top:3%;
	}


	#cont6 .center{
		text-align:left;
		padding:0 20px;
	}

	#cont6 .pt20{
		padding-top:0;
	}
}