// Scss Document
/*--------------------
共通設定
----------------------*/
$base-color:#fff;
$bg-color:#f5f5f5;
$eng:'Cinzel', serif;
$font-size:16px;
$small:75%;
$ja: kozuka-mincho-pr6n, serif;
$color:#444444;
$spring:#ded799;
$summer:#8da3c4;
$autumn:#d4987e;
$winter:#8f85af;

$breakpoint-tablet: 1024px; 
$breakpoint-mobile: 640px;
@mixin max-screen($break-point) { 
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) { 
  @media screen and (min-width: $break-point) {
    @content;
  }
}
@mixin screen($break-point-min, $break-point-max) { 
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 1px;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	color: #444444;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
}
.pc {
  display: block;
  @include max-screen($breakpoint-mobile) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-mobile) {
    display: block;
  }
}
body {
	background: $bg-color;
}
/*--------------------------------------------*/
.lp_wrapper {
	width: 100%;
	max-width: 1000px;
	background: #fff;
	margin: 0 auto;
	@include max-screen($breakpoint-mobile) {
      background: #f5f5f5;
    }
}

//監修
.supervision {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 7% 3%;
	@include max-screen($breakpoint-mobile) {
		padding: 10% 0;
	}
	& h1 {
		font-family: $eng;
		position: relative;
		z-index: 2;
		font-size: 3.5em;
		text-align: center;
		letter-spacing: .2em;
		display: inline-block;
		background: linear-gradient(180deg, #8795ae 0%,#c5b074  70%, #c5b074  100%);
		-webkit-background-clip: text;
		color: transparent;
		& span {
			font-size: 0%;
			font-weight: 100;
			color: #f1f1f1;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 2.0em;
			letter-spacing: .1em;
			padding-top: 20%;
		  }
	}
	& .box {
		background:  $bg-color;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 5% 4% 4%;
		border-radius: 20px;
		border: 1px solid #f5f5f5;
		text-align: left;
		@include max-screen($breakpoint-mobile) {
			display: none;
		  }
		& div {
			& h4 {
				font-size: 16px;
				font-weight: 400;
				line-height: 1.2;
				letter-spacing: 2px;
				color: $color;
				& span {
					font-size: $small;
					letter-spacing: 1px;
				}
			}
			& p {
				font-size: 0.7em;
				line-height: 1.8;
				margin: 5% auto 0;
				color: $color;
			}
			& img {
				max-width: 212px;
				padding-left: 2%;
			}
			& a {
				font-size: 0.7em;
				color: #afafaf;
				text-decoration: underline;
			}
			&:nth-child(1) {
				width: 60%;
			}
			
		}
		
	}& .box_sp {
			display: none;
			@include max-screen($breakpoint-mobile) {
				display: block;
				background: #fff;
				border: 1px solid #f3f3f3;
				border-radius: 8px;
				position: relative;
				width: 85%;
				margin: -1.5em auto 0;
				padding: 10%;
				@include max-screen($breakpoint-mobile) {
					margin-top: -3.0em;
				}
		  }
			& div {
				&:nth-child(1) {
					width: 100%;
					& div {
						& h4 {
							text-align: center;
							font-size: 14px;
							font-weight: 400;
							line-height: 1.5;
							letter-spacing: .2em;
							color: $color;
							& span {
								font-size: $small;
								letter-spacing: .15em;
							}
						}& img {
							padding: 5%;
							max-width: 170px;
						}
					}
				}
				
			}& .txt {
						text-align: left;
						& p {
							font-size: 0.6em;
							line-height: 2.2;
							letter-spacing: .1em;
							margin: 0 auto;
							color: $color;
						}
						& a {
							font-size: 0.7em;
							color: #afafaf;
							text-decoration: underline;
						}
					}
	}
	& .main_txt {
		margin: 10% auto;
		max-width: 500px;
		width: 60%;
		@include max-screen($breakpoint-mobile) {
			width: 85%;
		}
		& h2 {
			color: #aaaaaa;
			font-family: $ja;
			font-size: 2.0em;
			letter-spacing: 0.1em;
			margin-bottom: 5%;
			@include max-screen($breakpoint-mobile) {
				font-size: 1.2em;
			}
		}
		& p {
			font-size: 0.8em;
			line-height: 2.0;
			text-align: left;
			& span {
				@include max-screen($breakpoint-mobile) {
					font-size: 1.1em;
				}
			}
			& .yellow {
				color: #c6b175;
			}
			& .blue {
				color: #8da3c4;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				line-height: 2.2;
			}
		}
	}
	& .all-type {
		width: 80%;
		margin: 10% auto;
		@include max-screen($breakpoint-mobile) {
			width: 100%;
		}
		& h2 {
			font-size: 1.0em;
			position: relative;
			display: inline-block;
			color: #565656;
			margin-bottom: 5%;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				line-height: 2.2;
			}
			&::before, &::after {
				content: "";
                position: absolute;
                left: 52%;
                margin-left: -15px;
				width: 10px;
				height: 10px;
                border-bottom: 1px solid #565656;
                border-right: 1px solid #565656;
				transform: rotate(45deg);
				@include max-screen($breakpoint-mobile) {
					width: 7px;
					height: 7px;
				}
				}
			&::before {
                bottom: -20px;
				@include max-screen($breakpoint-mobile) {
					bottom: -10px;
				}
			}
			&::after {
                bottom: -15px;
				@include max-screen($breakpoint-mobile) {
					bottom: -5px;
				}
			}

		}
		& div {
			display: flex;
			justify-content: center;
			align-items: center;
			& a {
				padding: 1%;
				@include max-screen($breakpoint-mobile) {
					padding: 0.5%;
				}
				&:hover {
					transition: .4s;
					opacity: 0.7;
				}
			}
		}
	}
	& .merit {
		width: 70%;
		margin: 10% auto;
		background: #efe9e7;
		padding: 5%;
		@include max-screen($breakpoint-mobile) {
			width: 92%;
			padding: 7% 3%;
		}
		& h2 {
			font-size: 1.3em;
			line-height: 1.6;
			color: #565656;
			font-family: $ja;
			margin-bottom: 5%;
			@include max-screen($breakpoint-mobile) {
				font-size: .9em;
			}
		}
		& ol {
			list-style-type: none;
			font-size: 0.8em;
			line-height: 2.0;
			display: inline-block;
			text-align: center;
			& li {
				position: relative;
				padding-left: 25px;
				color: $color;
				text-align: left;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
				&::before {
					content: "";
					position: absolute;
					width: 7px;
					height: 12px;
					top: 0.1em;
					left: 2px;
					-webkit-transform: rotate(43deg);
                    -ms-transform: rotate(43deg);
                    transform: rotate(43deg);
                    border-right: 1px solid #cf7047;
                    border-bottom: 1px solid #cf7047;
					@include max-screen($breakpoint-mobile) {
						top: 0;
					}
				}
				&::after {
					content: "";
                    position: absolute;
                    top: .5em;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    border: 1px solid #cf7047;
				}
			}
		}
	}
	& .yourType {
		width: 70%;
		margin: 10% auto 0;
		@include max-screen($breakpoint-mobile) {
			width: 85%;
		}
		& h2 {
			font-size: 1.1em;
			color: #565656;
			font-family: $ja;
			margin-bottom: 3%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			@include max-screen($breakpoint-mobile) {
				font-size: .8em;
			}
			&::before, &::after {
				content: '';
				width: 1px;
				height: 40px;
				background-color: #565656;
				@include max-screen($breakpoint-mobile) {
					height: 25px;
				}
			}
			&::before {
				margin-right: 20px;
				transform: rotate(-30deg)
			}
			&::after {
				margin-left: 20px;
				transform: rotate(30deg)
			}
		}
		& a {
			font-size: 0.9em;
			padding: 20px;
			color: #fff;
			background: #363636;
			border: 1px solid transparent;
			border-radius: 50vh;
			display: block;
			letter-spacing: 2px;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
			}
			&:hover {
				transition: .4s;
				background: #8a8a8a;
			}
		}
	}
}
section {
	margin: 15% auto;
	@include max-screen($breakpoint-mobile) {
		background: #fff;
		padding-top: 20%;
		margin: 15% auto 0;
	}
	&#spring,&#summer,&#autumn,&#winter {
		padding-top: 70px;
	}
	& .smoothText {
		overflow: hidden;
		display: block;
	}
	& .smoothTextTrigger{
		transition: 1.0s ease-in-out;
		transform: translate3d(0,100%,0) skewY(12deg);
		transform-origin: left;
		display: block;
	}
	& .smoothTextTrigger.smoothTextAppear{
		transform: translate3d(0,0,0) skewY(0);
	}
	& .anime-ttl_box {
		margin-left: 5%;
	}
	& h3 {
		line-height: 1.0;
		& span {
			font-family: $eng;
			font-size: 6.0em;
			letter-spacing: .1em;
			@include max-screen($breakpoint-mobile) {
				font-size: 3.0em;
			}
		}
	}
	& h4 {
		font-size: 1.2em;
		color: #444444;
		font-family: $ja;
	}
	& .box {
		display: flex;
		width: 90%;
		margin: 5% auto;
		justify-content: center;
		align-items: flex-start;
		& div {
			width: 50%;
			@include max-screen($breakpoint-mobile) {
				padding: 0;
			}
			&:nth-child(1) {
				padding-right: 5%;
				@include max-screen($breakpoint-mobile) {
					padding-right: 2%;
				}
			}
			& p {
				margin: 10% auto;
				font-size: 0.9em;
				line-height: 2.2;
				@include max-screen($breakpoint-mobile) {
					margin: 5% auto;
					font-size: 0.6em;
				}
			}
			& h4 {
				& span {
				margin-top: 25%;
				color: #c1b9b6;
				font-family: $eng;
				font-size: 2.2em;
				letter-spacing: .1em;
				@include max-screen($breakpoint-mobile) {
					font-size: 1.1em;
				}}
			}
			& .border span {
				border-bottom: 4px solid #d7d7d7;
				@include max-screen($breakpoint-mobile) {
					border-bottom-width: 2px;
					font-size: 1.0em;
				}
			}
		}
	}
}

.recommend-color {
	background: #fff;
	width: 100%;
	padding: 10% 0;
	margin: 10% auto;

	& p {
          font-size: 0.8em;
          line-height: 2.2;
          margin: 7% auto;
          width: 90%;
		text-align: justify;
		@include max-screen($breakpoint-mobile) {
			font-size: .7em;
			margin: 10% auto;
		}
      }
	& .pick-color {
		text-align: center;
		& h5 {
			font-size: 1.0em;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #9c9c9c;
			@include max-screen($breakpoint-mobile) {
				font-size: .7em;
			}
			&::before {
				content: '';
				display: inline-block;
				width: 40%;
				height: 1px;
				background-color: #9c9c9c;
				@include max-screen($breakpoint-mobile) {
					width: 35%;
				}
			}
			&::after {
				content: '';
				display: inline-block;
				width: 40%;
				height: 1px;
				background-color: #9c9c9c;
				@include max-screen($breakpoint-mobile) {
					width: 35%;
				}
			}
		}
		& img {
			max-width: 550px;
			margin: 5% auto;
			width: 80%;
			@include max-screen($breakpoint-mobile) {
				width: 80%;
			}
		}
		& p {
			border-top: 1px solid #9c9c9c;
			padding-top: 5%;
			font-size: 0.8em;
			text-align: center;
			margin-bottom: 3%;
			width: 100%;
			margin-top: 0;
			@include max-screen($breakpoint-mobile) {
				line-height: 1.1;
				padding: 5%;
				text-align: left;
			}
			& span {
				font-size: 1.0em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
			}
		}
		
	}
}
	.ttl {
		text-align: left;
		width: 90%;
		margin: 0 auto;
		& h2 {
			font-size: 1.2em;
			letter-spacing: .2em;
			color: #afafaf;
			margin-bottom: 5px;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				margin-bottom: 3px;
			}
			
		}
		& h4 {
			position: relative;
			font-family: $eng;
			font-size: 2.3em;
			@include max-screen($breakpoint-mobile) {
				font-size: 1.4em;
			}&::after {
				content: "";
				border-bottom: 1px solid #444444;
				width: 0px;
				position: absolute;
				bottom: -60%;
				left: 0;
				@include max-screen($breakpoint-mobile) {
					bottom: -50%;
				}
				
			}&.isActive::after {
				width: 150px;
				transition: .7s;
				@include max-screen($breakpoint-mobile) {
					width: 100px;
				}
			}
			}
		}
#spring {
	& h3 {
		& span {color: $spring;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $spring 100%);
		border-image-slice: 1;
	}
}
#summer {
	& h3 {
		& span {color: $summer;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $summer 100%);
		border-image-slice: 1;
	}
}
#autumn {
	& h3 {
		& span {color: $autumn;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $autumn 100%);
		border-image-slice: 1;
	}
}
#winter {
	& h3 {
		& span {color: $winter;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $winter 100%);
		border-image-slice: 1;
	}
}
.coordinate {
	text-align: center;
	& img {
		max-width: 750px;
		margin: 10% auto 5%;
		width: 90%;
	}
	& p {
		font-size: 0.8em;
		line-height: 2.2;
		max-width: 750px;
		text-align: justify;
		margin: 0 auto;
		@include max-screen($breakpoint-mobile) {
			width: 90%;
			font-size: .7em;
		}
	}
}
.recommend-item {
	margin: 20% auto 10%;
	text-align: center;
	padding-bottom: 10%;
	@include max-screen($breakpoint-mobile) {
		margin: 20% auto 0;
	}
	& .itemList-show {
		margin-top: 5%;
	}
	& .itemList {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		width: 100%;
		padding: 0 5%;
		margin: 5% auto 0;
		flex-wrap: wrap;
		@include max-screen($breakpoint-mobile) {
			padding: 0;
			width: 94%;
		}
		& div {
			width: 33.3%;
			padding: 1.5%;
			@include max-screen($breakpoint-mobile) {
				padding: 1% 2%;
				margin-top: 5%;
				width: 50%;
			}
			& img {
				padding: 0;
				vertical-align: bottom;
			}
			& dl {
				text-align: left;
				font-size: 0.7em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.6em;
					padding: 0 2%;
				}
				& dt {
                  width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1.0em;
				}
				& dd {
					font-size: 1.0em;
				}
			}
		}
		& .checkBtn {
			width: 50%;
			margin: 2% auto 5%;
			@include max-screen($breakpoint-mobile) {
				width: 100%;
			}
			& a {
				border: 1px solid #363636;
				font-size: 0.8em;
				color: #fff;
				display: block;
				background: #363636;
				padding: 3px 10px;
				@include max-screen($breakpoint-mobile) {
					font-size: .6em;
					padding: 2px 10px;
				}
				&:hover {
					transition: .4s;
					background: #8a8a8a;
					border: 1px solid #8a8a8a;
			}
		}
	}
	
	}& .itemList-hide_spring, & .itemList-hide_summer,& .itemList-hide_autumn ,& .itemList-hide_winter {
		display: none;
	}
	& button.moreBtn {
		font-size: 0.8em;
		letter-spacing: 2px;
		color: #444444;
		padding: 10px;
		background: #fff;
		border: 1px solid #363636;
		display: block;
		max-width: 300px;
		width: 60%;
		margin: 5% auto;
		&:hover {
			color: #fff;
			background: #8a8a8a;
			border-color: #8a8a8a;
			transition: .2s;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 0.6em;
			padding: 7px;
		}
		&::after {
			content: "MORE";
			transition: .2s;
			-erbkit-transition: .2s;
		}
		&.on-click::after{
			content: "CLOSE";
		} 
	}


}
#contents {
	
	@include max-screen($breakpoint-mobile) {
	padding-bottom: 10%;
		background: #f5f5f5;
		}
& h2.Contents-ttl {
		  font-size: 33px;
		  font-weight: 400;
		  line-height: 1.0;
		  text-align: center;
		  margin-bottom: 6%;
		  color: #3e3a39;
			& span {
			  font-size: 43%;
			  font-weight: 400;
			  color: #3e3a39;
			}
		}
	& .contents a {
	  display: block;
	  flex-wrap: nowrap;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	}
& .newsList {
	& ul {
		max-width: 1000px;
		margin: 5% auto 0;
	& li {
		width: 22%;
	  margin-bottom: 2%;
	  margin-right: 0.5%;
		@include max-screen($breakpoint-mobile) {
			 width: 44%;
		}
		& dl {
	  margin-top: 3%;
	  margin-left: 1%;
		& dt {
		  font-size: 12px;
		}
		& dd {
		  font-size: 11px;
		}
	}
		 & a {
		  display: block;
		  flex-wrap: nowrap;
		  width: 100%;
		  justify-content: center;
		  align-items: center;
		}
	} 
	}
}
.frametype {
	width: 70%;
	margin: 0 auto;
	max-width: 990px;
	padding-bottom: 10%;
	@include max-screen($breakpoint-mobile) {
		width: 85%;
		margin: 15% auto 0;
	}
	& .btn {
		max-width: 300px;
		margin: 5% auto;
		@include max-screen($breakpoint-mobile) {
			max-width: 250px;
		}
		& a {
		text-align: center;
		font-size: 0.9em;
		padding: 20px;
		color: #fff;
		background: #363636;
		border: 1px solid transparent;
		border-radius: 50vh;
		display: block;
		letter-spacing: 2px;
		@include max-screen($breakpoint-mobile) {
			font-size: 0.7em;
			padding: 15px;
		}
		&:hover {
			transition: .4s;
			background: #8a8a8a;
		}
	}
	}
}