/* Scss Document */

$breakpoint: 768px;
$breakpoint-md: 960px;
$blue: #0087B2;
$gray: #F7F7F7;
$bgaqua: #EEFFFF;
$sky: #00B9DC;
$lightgray: #AFC8C8;
$yellow: #FFFF00;
$orange: #FFA01E;

@mixin mq {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin mq-md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
	width: 100%;
    overflow-x: hidden;
}

a{
	color: inherit;
}

img{
	width: 100%;
}

html,body{
	font-family: 'Oswald','Noto Sans Japanese',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sp{
	display: none;
	@include mq{
		display: block;
	}
}

.pc{
	display: block;
	@include mq{
		display: none;
	}
}

footer{
	background: #000;
	color: #fff;
	padding: 10px 0;
	font-size: 1.4rem;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 10000000;
	@include mq{
		font-size: 1rem;
	}
}

.content{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	color: #333333;
	line-height: 1.75;
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
	@include mq{
		font-size: 1.4rem;
	}
}

dl{
	&.headline{
		text-align: center;
		dt{
			font-size: 1.4rem;
			color: #fff;
			margin-bottom: 20px;
			font-style: italic;
			@include mq{
				font-size: 1.2rem;
				margin-bottom: 15px;
			}
			&.sky{
				color: $sky;
			}
		}
		dd{
			font-size: 3rem;
			font-weight: 500;
			@include mq{
				font-size: 2rem;
			}
			&.white{
				color: #fff;
			}
		}
	}
}
p{
	&.headline_add{
		margin: 20px auto 0;
		text-align: center;
		max-width: 800px;
		@include mq{
			margin: 15px auto 0;
		}
	}
}

#fixed_contact{
	animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
	position: fixed;
	top: 40px;
	right: 40px;
	z-index: 999;
	@include mq{
		right: 5%;
	}
	a{
		&.top_contact{
			font-size: 1.8rem;
			color: #fff;
			text-align: center;
			padding: 15px 30px;
			background: $blue;
			margin: 0 auto;
			font-weight: 500;
			border-radius: 10000px;
			box-sizing: border-box;
			@include mq{
				font-size: 1.4rem;
				padding: 10px 20px;
			}
			&:hover{
				transition: 1s;
				background: $yellow;
				color: $blue;
			}
			&.sns{
				color: $blue;
				background: $yellow;
				&:hover{
					transition: 1s;
					background: $blue;
					color: $yellow;
				}
			}
		}
	}
}

#fixed_logo{
	animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	a{
		&:hover{
			transition: 1s;
			opacity: 0.7;
		}
		img{
			max-width: 100%;
		}
	}
}

//アニメーション
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

//cm
main{
	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
		background: url(../img/cm_img_main.jpg) center no-repeat;
		background-size: cover;
		height: 750px;
		position: relative;
	@include mq{
		height: 500px;
	}
		h1{
			max-width: 1100px;
			width: 90%;
			display: block;
			margin: 0 auto;
			img{
				width: 455px;
				height: auto;
				position: absolute;
				transform: translate(0%,-50%);
				top: 50%;
				@include mq{
					width: 60%;
					max-width: 455px;
				}
				&.img_sns{
					transform: translate(-50%,-50%);
					top: 50%;
					left: 50%;
				}
			}
		}
}

#cm_intro{
	background: $bgaqua;
	padding: 80px 0 60px;
	@include mq{
		padding: 40px 0;
	}
	.content{
		ul{
			&.cm_intro_voice{
				padding: 30px 0 0;
				li{
					background: $lightgray;
					width: 49%;
					float: left;
					margin-right: 2%;
					border-radius: 1000px;
					color: #fff;
					text-align: center;
					font-weight: 500;
					line-height: 1.5;
					padding: 15px 0;
					position: relative;
					margin-bottom: 30px;
					@include mq{
						width: 100%;
						margin-bottom: 20px;
						padding: 10px 15px;
						box-sizing: border-box;
					}
					&:nth-child(2n){
						margin-right: 0;
					}
					&::before{
						content: '';
						position: absolute;
						display: block;
						width: 0;
						height: 0;
						left: 0;
						right: 0;
						bottom: -15px;
						margin: 0 auto;
						border-top: 15px solid $lightgray;
						border-right: 15px solid transparent;
						border-left: 15px solid transparent;
					}
				}
				
			}
		}
	}
}

#cm_solution{
	background: url(../img/cm_bg_solution.png) center no-repeat, $sky;
	background-size: contain;
	padding: 40px 0;
	@include mq{
		padding: 30px 0;
	}
	.content{
		h2{
			font-size: 2.4rem;
			line-height: 1.75;
			text-align: center;
			font-weight: 500;
			color: #fff;
			@include mq{
				font-size: 1.8rem;
			}
			span{
				color: $yellow;
				font-weight: bold;
			}
		}
	}
}

#cm_value{
	padding: 120px 0;
	background: url(../img/cm_bg_left_bottom.png) left bottom no-repeat, url(../img/cm_bg_left_top.png) left top no-repeat, url(../img/cm_bg_line.png) center top no-repeat, url(../img/cm_bg_right_bottom.png) right bottom no-repeat, url(../img/cm_bg_right_top.png) right top no-repeat;
	@include mq{
		padding: 60px 0;
		background: url(../img/cm_bg_left_bottom.png) left bottom no-repeat, url(../img/cm_bg_left_top.png) left top no-repeat, url(../img/cm_bg_right_bottom.png) right bottom no-repeat, url(../img/cm_bg_right_top.png) right top no-repeat;
		background-size: 15%;
	}
	.content{
		ul{
			&.value_point{
				padding: 10px 0 0;
				li{
					position: relative;
					margin-top: 60px;
					@include mq{
						margin-top: 30px;
					}
					img{
						max-width: 470px;
						width: auto;
						z-index: 100;
						position: absolute;
						left: 0;
						bottom: 0;
						float: left;
						@include mq{
							width: 100%;
							margin: 0 auto;
							float: none;
							max-width: none;
							position: relative;
							left: 50%;
							transform: translate(-50%,0%);
						}
					}
					.value_point_txt{
						background: $sky;
						color: #fff;
						position: relative;
						left: 360px;
						padding: 50px 0 50px 160px;
						@include mq{
							left: auto;
							position: static;
							padding: 30px;
						}
						.value_point_txtInner{
							max-width: 560px;
							width: calc(100% - 360px);
							@include mq{
								max-width: 100%;
								width: 100%;
							}
							dl{
								position: relative;
								margin-bottom: 30px;
								dt{
									font-size: 4.8rem;
									position: absolute;
									transform: translate(0%,-50%);
									top: 50%;
									@include mq{
										font-size: 2.4rem;
									}
								}
								dd{
									border-left: 2px solid #fff;
									margin-left: 75px;
									padding-left: 25px;
									font-size: 2.8rem;
									font-weight: 500;
									@include mq{
										font-size: 1.8rem;
										margin-left: 50px;
									}
								}
							}
						}
					}
					&:nth-child(2n){
						img{
							right: 0;
							float: right;
							left: auto;
							@include mq{
								width: 100%;
								margin: 0 auto;
								float: none;
								max-width: none;
								position: relative;
								left: 50%;
								transform: translate(-50%,0%);
							}
						}
						.value_point_txt{
							background: $orange;
							right: 360px;
							left: auto;
							padding: 50px 160px 50px 0;
							@include mq{
								right: auto;
								position: static;
								padding: 30px;
							}
							.value_point_txtInner{
								position: relative;
								left: 360px;
								@include mq{
									left: auto;
								}
							}
						}
					}
				}
			}
		}
	}
}

#cm_partoner{
	background: url(../img/cm_bg_comp.jpg) no-repeat top;
	background-size: cover;
	padding: 80px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		.headline_add{
			color: #fff;
		}
		ul{
			background: #fff;
			border: 4px solid $yellow;
			padding: 35px;
			margin-top: 35px;
			box-sizing: border-box;
			display: flex;
  			flex-flow: row wrap;
			justify-content: center;
			@include mq{
				padding: 30px;
			}
			li{
				padding: 1.5%;
				text-align: center;
				width: 30%;
				@include mq{
					width :50%;
					margin-bottom: 10px;
				}
				img{
					width: auto;
					max-width: 100%;
					height: auto;
					position: relative;
					top: 50%;
					transform: translate(0%,-50%);
				}
			}
		}
	}
}

#cm_step{
	padding: 120px 0;
	background: url(../img/cm_bg_line.png) center top no-repeat;
	@include mq{
		padding: 60px 0;
		background: none;
	}
	.content{
		dl{
			&.headline{
				margin-bottom: 40px;
				@include mq{
					margin-bottom: 20px;
				}
			}
			&.cm_step_content{
				margin-top: 20px;
				position: relative;
				&::after{
					position: absolute;
					content: "";
					height: 20px;
					width: 6px;
					top: 100%;
					left: 6%;
					background: $sky;
					@include mq{
						left: 49%;
					}
				}
				&:last-of-type{
					&::after{
						content: none;
					}
				}
				dt{
					width: 13%;
					float: left;
					background: $sky;
					color: #fff;
					font-size: 1.4rem;
					font-style: italic;
					position: relative;
					@include mq{
						width: 100%;
						float: none;
						text-align: center;
						font-size: 1.3rem;
					}
					div{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						@include mq{
							position: static;
							top: auto;
							left: auto;
							transform: none;
						}
					}
					span{
						font-size: 4.2rem;
						@include mq{
							font-size: 2.1rem;
						}
					}
				}
				dd{
					float: left;
					padding: 30px;
					box-sizing: border-box;
					width: 87%;
					background: #EEFFFF;
					@include mq{
						float: none;
						width: 100%;
					}
					h4{
						font-size: 2.1rem;
						margin-bottom: 10px;
						color: $sky;
						@include mq{
							font-size: 1.8rem;
						}
					}
				}
			}
		}
	}
}

#cm_price{
	background: $orange;
	padding: 80px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		ul{
			display: flex;
			justify-content: space-between;
			margin-top: 40px;
			@include mq{
				margin-top: 10px;
				display: block;
			}
			li{
				width: 31%;
				@include mq{
					width: 100%;
					margin-top: 20px;
				}
					&:nth-child(2){
						dl{
						background: $sky;
						}
					}
				dl{
					background: #333;
					padding: 20px 30px 10px;
					color: #fff;
					border-radius: 10px 10px 0 0;
					dt{
						font-size: 1.4rem;
						@include mq{
							font-size: 1.2rem;
						}
					}
					dd{
						font-size: 1.7rem;
						@include mq{
							font-size: 1.6rem;
						}
					}
				}
				p{
					padding: 10px 30px;
					background: #fff;
					font-size: 1.4rem;
					&:nth-child(2n+1){
						background: #EEF1F1;
					}
					&:last-child{
						border-radius: 0 0 10px 10px;
					}
				}
			}
		}
	}
}

#contact{
	padding: 120px 0;
	background: url(../img/cm_bg_contact.jpg) bottom center no-repeat;
	background-size: cover;
	text-align: center;
	@include mq{
		padding: 60px 0;
	}
	&.sns{
		background: url(../img/sns_bg_contact.jpg) bottom center no-repeat;
		background-size: cover;
	}
	.content{
		p{
			&.headline_add{
				color: #fff;
				margin-bottom: 45px;
				@include mq{
					margin-bottom: 30px;
				}
			}
		}
		a{
			&.contact_btn{
				font-size: 1.8rem;
				color: $sky;
				text-align: center;
				padding: 15px 30px;
				background: $yellow;
				margin: 0 auto;
				font-weight: 500;
				border-radius: 10000px;
				box-sizing: border-box;
				@include mq{
					font-size: 1.6rem;
					padding: 10px 20px;
				}
				&:hover{
					transition: 1s;
					background: $sky;
					color: $yellow;
				}
			}
		}
	}
}

//sns
main#sns{
	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
		background: url(../img/sns_img_main.jpg) center no-repeat;
		background-size: cover;
		height: 750px;
		position: relative;
	@include mq{
		height: 500px;
	}
		h1{
			max-width: 1100px;
			width: 90%;
			display: block;
			margin: 0 auto;
			img{
				width: 510px;
				height: auto;
				position: absolute;
				transform: translate(-50%,-50%);
				top: 60%;
				left: 50%;
				@include mq{
					width: 75%;
				}
			}
		}
}
#sns_intro{
	background: linear-gradient(-45deg, #00B9DC, #00B9DC 50%, #50C2E0 50%, #50C2E0 100%);
	padding: 80px 0 60px;
	@include mq{
		padding: 40px 0 60px;
	}
	.content{
		max-width: 800px;
		ul{
			&.sns_intro_voice{
				padding: 30px 0 0;
				li{
					background: #EEFFFF;
					width: 49%;
					float: left;
					margin-right: 2%;
					border-radius: 1000px;
					color: $blue;
					text-align: center;
					font-weight: 500;
					line-height: 1.5;
					padding: 15px 0;
					position: relative;
					margin-bottom: 30px;
					@include mq{
						width: 100%;
						margin-bottom: 20px;
						padding: 10px 15px;
						box-sizing: border-box;
					}
					&:nth-child(2n){
						margin-right: 0;
					}
					&::before{
						content: '';
						position: absolute;
						display: block;
						width: 0;
						height: 0;
						left: 0;
						right: 0;
						bottom: -15px;
						margin: 0 auto;
						border-top: 15px solid #EEFFFF;
						border-right: 15px solid transparent;
						border-left: 15px solid transparent;
					}
				}
				
			}
		}
	}
}
#sns_introDetail{
	padding: 0 0 80px;
	@include mq{
		padding: 0 0 40px;
	}
	.content{
		width: 90%;
		max-width: 800px;
		h2{
			font-size: 3rem;
			font-weight: 500;
			position: relative;
			margin-top: -50px;
			background: $blue;
			color: #fff;
			padding: 20px;
			text-align: center;
			border-radius: 100px;
			margin-bottom: 40px;
			@include mq{
				font-size: 2rem;
			}
			&::before{
				content: '';
				position: absolute;
				display: block;
				width: 0;
				height: 0;
				left: 0;
				right: 0;
				bottom: -20px;
				margin: 0 auto;
				border-top: 20px solid $blue;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
		}
		figcaption{
			margin-top: 20px;
			font-size: 1.3rem;
		}
		p{
			margin-top: 30px;
			@include mq{
				margin-top: 20px;
			}
		}
	}
}
#sns_value{
	padding: 120px 0 120px;
	background: url(../img/sns_bg_value.jpg) bottom no-repeat,$sky;
	background-size: contain;
	position: relative;
	@include mq{
		padding: 60px 0;
	}
	&::before{
			content: '';
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			left: 0;
			right: 0;
			top: 0;
			margin: 0 auto;
			border-top: 60px solid #fff;
			border-right: 30px solid transparent;
			border-left: 30px solid transparent;
			@include mq{
				border-top: 30px solid #fff;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
		}
	.content{
		width: 90%;
		max-width: 800px;
		ul{
			margin-top: 20px;
			li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30px;
				margin-bottom: 30px;
				border-bottom: 1px solid #fff;
				@include mq{
					display: block;
					padding-bottom: 20px;
					margin-bottom: 20px;
				}
				&:last-child{
					margin-bottom: 0;
					padding-bottom: 0;
					border: none;
				}
				figure{
					width: 23%;
					@include mq{
						width: 30%;
						margin: 0 auto 20px;
					}
				}
				dl{
					width: 72.5%;
					color: #fff;
					@include mq{
						width: 100%;
					}
					dt{
						font-size: 2.4rem;
						margin-bottom: 15px;
						color: $yellow;
						font-weight: 500;
						@include mq{
							font-size: 1.8rem;
							text-align: center;
						}
					}
				}
			}
		}
	}
}
#sns_flow{
	padding: 120px 0 120px;
	position: relative;
	@include mq{
		padding: 60px 0;
	}
	&::before{
			content: '';
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			left: 0;
			right: 0;
			top: 0;
			margin: 0 auto;
			border-top: 60px solid $sky;
			border-right: 30px solid transparent;
			border-left: 30px solid transparent;
			@include mq{
				border-top: 30px solid $sky;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
		}
	.content{
		ul{
			margin-top: 90px;
			display: flex;
			justify-content: space-between;
			@include mq{
				margin-top: 45px;
				display: block;
			}
			li{
				width: 31%;
				border: 4px solid $sky;
				padding: 30px;
				box-sizing: border-box;
				position: relative;
				@include mq{
					width: 100%;
					margin-bottom: 50px;
				}
				&:last-child{
					margin-bottom: 0;
				}
				&::before{
					position: absolute;
					bottom: 98%;
					left: 0;
					font-size: 9rem;
					color: $sky;
					line-height: 1;
					@include mq{
						font-size: 5rem;
						bottom: 99%;
					}
				}
				&::after{
					position: absolute;
					bottom: 98%;
					right: 0;
				}
				&:nth-child(1)::before{
					content: "01";
				}
				&:nth-child(1)::after{
					content: url(../img/sns_img_flow1.png);
				}
				&:nth-child(2)::before{
					content: "02";
				}
				&:nth-child(2)::after{
					content: url(../img/sns_img_flow2.png);
				}
				&:nth-child(3)::before{
					content: "03";
				}
				&:nth-child(3)::after{
					content: url(../img/sns_img_flow3.png);
				}
				h3{
					font-size: 2.4rem;
					text-align: center;
					margin-bottom: 20px;
					@include mq{
						font-size: 1.8rem;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
}
#sns_plan{
	background: #E4F5FF;
	padding: 120px 0 120px;
	position: relative;
	@include mq{
		padding: 60px 0;
	}
	&::before{
			content: '';
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			left: 0;
			right: 0;
			top: 0;
			margin: 0 auto;
			border-top: 60px solid #fff;
			border-right: 30px solid transparent;
			border-left: 30px solid transparent;
		@include mq{
			border-top: 30px solid #fff;
			border-right: 20px solid transparent;
			border-left: 20px solid transparent;
		}
		}
	.content{
		ul{
			display: flex;
			justify-content: space-between;
			margin-top: 40px;
			@include mq{
				display: block;
				margin-top: 30px;
			}
			li{
				width: 31%;
				@include mq{
					width: 100%;
					margin-bottom: 20px;
				}
				&:last-child{
					margin-bottom: 0;
				}
					&:nth-child(2){
						dl{
						background: $sky;
						}
					}
				dl{
					background: #959595;
					padding: 20px 30px 10px;
					color: #fff;
					border-radius: 10px 10px 0 0;
					dt{
						font-size: 1.4rem;
						margin-bottom: -10px;
						@include mq{
							font-size: 1.2rem;
							margin-bottom: 0;
						}
					}
					dd{
						font-size: 3rem;
						@include mq{
							font-size: 1.8rem;
						}
					}
				}
				p{
					padding: 10px 30px;
					background: #fff;
					font-size: 1.4rem;
					&:nth-child(2n+1){
						background: #EEF1F1;
					}
					&:last-child{
						border-radius: 0 0 10px 10px;
					}
				}
			}
		}
	}
}