@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

///*---------- 固定色 ----------*/
//↓修正がありオレンジからグリーンになりました-*/
$color-orange: #00bfac;
$gray-dark: #727171;
$gray-light: #e6e6e6;


///*------------- 背景 -------------*/
article{
	background-image: url(../img/logo.svg);
    background-attachment: fixed;
    background-size: 400px;
    background-position: right 5% top 20%;
    background-repeat: no-repeat;
	@include sm {
		 background-size: 300px;
	}
	@include xs {
		background: none;
	}
}

///*--------- header ---------*/
header{
	nav:not(.drawer__nav){
		li:last-child{
			a{
				padding-right: 2.5rem;
				&::before{
					display: none!important;
				}
				&::after{
					display: none!important;
				}
				&:hover{
					background: $gray-light!important;
					color: #000!important;
				}
				&:hover::after{
					opacity: 0!important;
				}
			}
		}
	}
}

///*--------- 料金について ---------*/
#terms-of-service{
	padding: 8rem 0 0;
	@include xs {
		padding: 5rem 0 0;
	}
	dl{
		margin-top: 4rem;
		dt{
			font-size: 2rem;
			margin-bottom: 1rem;
			color: $color-orange;
		}
		dd{
			text-align: justify;
			ul{
				li{
					line-height: normal;
					text-indent: -1em;
					padding-left: 1em;
					margin-bottom: 1rem;
					&::before{
						content: '・';
					}
				}
			}
			.attention{
				padding: 2rem;
				text-indent: 0em;
				border: 1px solid $color-orange;
				margin-top: 2rem;
				@include xs {
					margin-left: -1.5rem;
				}
				h4{
					font-size: 18px;
					font-size: 1.8rem;
					margin-bottom: 1rem;
					@include xs {
						font-size: 16px;
						font-size: 1.6rem;
						line-height: 1.5;
					}
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
}

///*--------- 申込みボタン ---------*/
#link-button{
	    text-align: center;
		padding: 5rem 0 10rem;
		@include xs {
			padding: 3rem 0 5rem;
		}
	a{
		display: inline-block;
		background-color: white;
		border-radius: 1rem;
		font-size: 27px;
		font-size: 2.7rem;
		color: #000;
		padding: 2rem 8rem;
		font-weight: 500;
		border: 2px solid #000;
		letter-spacing: 2px;
		@include xs {
			font-size: 20px;
			font-size: 2rem;
			padding: 1rem 5rem;
		}
		&:hover{
			border: 2px solid $color-orange;
			background-color: $color-orange;
			color: white;
		}
	}
}