@charset "UTF-8";
/* CSS Document */


.block_link[rel=dairy] .photo .bg{
	background-image:url(../images/service/photo_link_dairy.jpg);
}
.block_link[rel=training] .photo .bg{
	background-image:url(../images/service/photo_link_training.jpg);
}
.block_link[rel=price] .photo .bg{
	background-image:url(../images/service/photo_link_price.jpg);
}


/*dairy*/
.block_dairy{
	margin-bottom:20px;
}
.block_dairy .head .icon_clock{
	width:50px;
	height:50px;
	display:block;
	margin:20px 0 10px 0;
}

.block_dairy .head .icon_clock[rel="1"]{
	background-image:url(../images/service/clock_01.png);
}

.block_dairy .head .icon_clock[rel="2"]{
	background-image:url(../images/service/clock_02.png);
}

.block_dairy .head .icon_clock[rel="3"]{
	background-image:url(../images/service/clock_03.png);
}

.block_dairy .head .icon_clock[rel="4"]{
	background-image:url(../images/service/clock_04.png);
}

.block_dairy .head .icon_clock[rel="5"]{
	background-image:url(../images/service/clock_05.png);
}

.block_dairy .head .icon_clock[rel="6"]{
	background-image:url(../images/service/clock_06.png);
}

.block_dairy .head .icon_clock[rel="7"]{
	background-image:url(../images/service/clock_07.png);
}

.block_dairy .head .icon_clock[rel="8"]{
	background-image:url(../images/service/clock_08.png);
}

.block_dairy .head .title{
	font-size:21px;
}

.block_dairy .head .title .time{
	margin-right:20px;
}

.block_dairy .photo .img{
	margin:0 auto;
	max-width:640px;
}

.block_dairy .photo .comment{
	width:221px;
	height:88px;
}
.block_dairy[rel="dairy1"] .photo .comment{
	background-image:url(../images/service/comment_dairy_01.png);
	    bottom: auto;
    right: auto;
    top: 60px;
    left: 48%;
    transform: rotate(35deg);
	/*right:auto;
	top:20px;
	left:20px;*/
}
.block_dairy[rel="dairy2"] .photo .comment{
	background-image:url(../images/service/comment_dairy_02.png);
	bottom:64%;
	left:45%;
}
.block_dairy[rel="dairy3"] .photo .comment{
	background-image:url(../images/service/comment_dairy_03.png);
	left:20%;
	bottom:auto;
	top:-20px;
}
.block_dairy[rel="dairy3"] .photo .img{
	max-width:275px;
}
.block_dairy[rel="dairy4"] .photo .comment{
	background-image:url(../images/service/comment_dairy_04.png);
	right:44%;
	bottom:auto;
	top:-20px;
}
.block_dairy[rel="dairy5"] .photo .comment{
	background-image:url(../images/service/comment_dairy_05.png);
	bottom:auto;
	top:-20px;
	left:40%;
}
.block_dairy[rel="dairy6"] .photo .comment{
	background-image:url(../images/service/comment_dairy_06.png);
	left:40%;
	top:20%;
}
.block_dairy[rel="dairy7"] .photo .comment{
	background-image:url(../images/service/comment_dairy_07.png);
	width: 176px;
    height: 61px;
    bottom: 90%;
    left: 120px;
    right: auto;
    transform: rotate(-5deg);
	/*height:61px;
	bottom:50%;*/
}

@media screen and (max-width:767px){
	.block_dairy .head{
		margin-bottom:20px;
	}
	.block_dairy .inner{
		margin-bottom:40px;
	}
}

@media screen and (min-width:768px){
	.block_dairy{
		padding-top:60px;
		padding-bottom:60px;
		margin-bottom:0;
		position:relative;
	}
	.block_dairy .photo{
		position:absolute;
		width:50%;
		top:-20px;
	}
	.block_dairy .inner{
		width:calc( 50% - 80px );
	}
	
	.block_dairy[rel="dairy1"] .photo,
	.block_dairy[rel="dairy3"] .photo,
	.block_dairy[rel="dairy5"] .photo,
	.block_dairy[rel="dairy7"] .photo{
		right:-20px;
	}
	.block_dairy[rel="dairy2"] .photo,
	.block_dairy[rel="dairy4"] .photo,
	.block_dairy[rel="dairy6"] .photo{
		left:-20px;
	}
	
	.block_dairy[rel="dairy5"],
	.block_dairy[rel="dairy6"],
	.block_dairy[rel="dairy7"]{
		padding-top:0px;
	}
}

@media screen and (min-width:769px){
	.block_dairy[rel="dairy1"] .photo,
	.block_dairy[rel="dairy3"] .photo,
	.block_dairy[rel="dairy5"] .photo,
	.block_dairy[rel="dairy7"] .photo{
		right:-40px;
	}
	.block_dairy[rel="dairy2"] .photo,
	.block_dairy[rel="dairy4"] .photo,
	.block_dairy[rel="dairy6"] .photo{
		left:-40px;
	}
	.block_dairy[rel="dairy2"] .inner,
	.block_dairy[rel="dairy4"] .inner,
	.block_dairy[rel="dairy6"] .inner{
		margin-left:calc( 50% + 40px );
	}
}

@media screen and (min-width:1115px){
	.block_dairy[rel="dairy1"] .photo,
	.block_dairy[rel="dairy3"] .photo,
	.block_dairy[rel="dairy5"] .photo,
	.block_dairy[rel="dairy7"] .photo{
		right:calc( ( 1024px - 100vw ) / 2 );
		width:calc( 50vw - 40px );
	}
	.block_dairy[rel="dairy2"] .photo,
	.block_dairy[rel="dairy4"] .photo,
	.block_dairy[rel="dairy6"] .photo{
		left:calc( ( 1024px - 100vw ) / 2 );
		width:calc( 50vw - 40px );
	}
}


/*training*/
#section_service_training h3{
	color:#ff645c;
	line-height:40px;
	height:40px;
	display:inline-block;
	padding:0 20px;
	border:2px solid #ff645c;
	margin-bottom:20px;
}

.block_training .photo{
	margin-bottom:40px;
}

.block_training .photos{
	letter-spacing:-0.4em;
}

.block_training .photos .photo{
	width:50%;
	letter-spacing:normal;
	display:inline-block;
	vertical-align: top;
}

.column_training{
	position:relative;
	margin-bottom:40px;
	padding-bottom:40px;
}

.column_training .arrow{
	width:48px;
	height:32px;
	top:auto;
	bottom:-16px;
	background-image:url(../images/common/arrow_down.png);
}

.column_training .head .num{
	font-size:50px;
	line-height:60px;
	height:60px;
	position:relative;
	margin-bottom:10px;
}

.column_training .head .num:after{
	position:absolute;
	bottom:0;
	width:100%;
	content:" ";
	background:#ff645c;
	height:2px;
	left:0;
}

.column_training .head .title{
	font-size:21px;
}

.column_training .body{
	padding-top:10px;
}
.column_training .body .text{
	font-size:12px;
}

@media screen and (max-width:520px){
	.column5 .column_training{
		width:100%;
		margin-right:0;
	}
}

@media screen and (min-width:521px){
	.column_training{
		padding-bottom:0;
	}
	.column_training .arrow{
		background-image:url(../images/common/arrow_right.png);
		width:32px;
		height:48px;
		top:12px;
		bottom:auto;
		left:auto;
		right:0;
	}
}

@media screen and (min-width:768px){
	.block_training .inner{
		padding-top:60px;
	}
	.block_training .inner{
		width:calc( 50% - 80px );
	}
	
	.block_training[rel=training01] .photo,
	.block_training[rel=training02] .photos{
		width:50%;
		position:absolute;
	}
	
	.block_training[rel=training01] .photo{
		top:-60px;
		right:-40px;
	}
	
	.block_training[rel=training02] .inner{
		margin-left:calc( 50% + 80px );
		padding-top:120px;
	}
	
	.block_training[rel=training02] .photos .photo{
		position:absolute;
		margin:0;
	}
	.block_training[rel=training02] .photos .photo:first-child{
		top:-40px;
	}
	.block_training[rel=training02] .photos .photo:last-child{
		right:-20px;
		top:60px;
	}
}

@media screen and (min-width:961px){
	.column_training .head{
		width:calc( 100% - 60px );
		margin:0 auto;
		text-align:center;
		height:260px;
	}
	
	.column_training .head .num{
		display:block;
		width:50px;
		margin:0 auto 10px auto;
	}
	
	.column_training .head .title{
		display:inline-block;
		text-align:left;
		line-height:1.4em;
		letter-spacing:0.05em;
		-ms-writing-mode: tb-rl; /* for MS IE8+ */
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		vertical-align:middle;
	}
	.column_training .head .title span{
		height:100%;
	}
	
	.column_training .arrow{
		top:108px;
		right:-32px;
	}
}

/*fee*/
#section_service_price .section_title_wrap .title{
	color: #ff645c;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
	margin-bottom:40px;
	text-align:center;
}
table.fee{
	margin:20px auto 40px auto;
}

table.fee th,
table.fee td{
	text-align:center;
}


table.fee th:not(:last-child),
table.fee td:not(:last-child){
	border-right:1px solid #ff645c;
}


@media screen and (max-width:640px){
	table.fee[rel=fee1] thead{
		display:none;
	}
	
	table.fee[rel=fee1] td:before{
		display:inline-block;
		margin-right:10px;
		content:attr(data-title);
		font-size:13px;
		color:#666;
	}
	
	table.fee[rel=fee2] th,
	table.fee[rel=fee2] td{
		display:table-cell;
	}
	table.fee[rel=fee2] tbody th{
		width:60%;
	}
	table.fee th:not(:last-child),
	table.fee td:not(:last-child){
		border-right:none;
	}
}

@media screen and (min-width:641px){
	table.fee[rel=fee2] th{
		width:50%;
	}
}