$wrapsize: 1200px;
$innersize: 930px;
$spsize: 767.88px;
$mbsize: 500.88px;
$maincol: #3E3A39;
$minFont: 14px;
$baseFont: 16px;
$middFont: 20px;
$maxFont: 24px;

/* ブレイクポイント SP */
@mixin mediaSP {
	@media screen and (max-width: $spsize) {
		@content;
	}
}
/* ブレイクポイント MB */
@mixin mediaMB {
	@media screen and (max-width: $mbsize) {
		@content;
	}
}
/* 最大サイズ */
@mixin wrapper {
	max-width: $wrapsize;
	width: 100%;
	margin: 0 auto;
}
/* インナーサイズ */
@mixin inner {
	max-width: $innersize;
	width: 100%;
	margin: 0 auto;
	@include mediaSP {
		width: auto;
	}
}

/* =========================================
	基本
========================================= */
body {
	margin: 0;
	padding: 0;
	font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
	font-size: $baseFont;
	line-height: 1.8;
	box-sizing: border-box;
	background-color: #FBF9F8;
	@include mediaSP {
		font-size: $minFont;
	}
	h1,h2,h3,h4,p,ul,li,dl,dt,dd {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: $baseFont;
		font-weight: normal;
		@include mediaSP {
			font-size: $minFont;
		}
	}
	img {
		max-width: 100%;
		width: 100%;
		line-height: 0;
	}
	a {
		color: $maincol;
		text-decoration: none;
		transition: 0.4s;
	}
	.bs {
		h1,h2,h3,h4,p,ul,li,dl,dt,dd {
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: $baseFont;
			font-weight: normal;
			@include mediaSP {
				font-size: $minFont;
			}
		}
		img {
			max-width: 100%;
			line-height: 0;
			transition: 0.4s;
		}
		a {
			color: $maincol;
			text-decoration: none;
			transition: 0.4s;
		}
		/* .rowの調整 */
		.row.row-box {
			margin-right: 0 !important;
			margin-left: 0 !important;
		}
	}

	/* ブレイクポイントで切り替え */
	.pcnone {
		display: none;
		@include mediaSP { display: block;}
	}
	.spnone {
		display: block;
		@include mediaSP { display: none;}
	}
	.mbnone {
		display: block;
		@include mediaMB { display: none;}
	}
	.mbblock {
		display: none;
		@include mediaMB { display: block;}
	}
}


/* =========================================
	コンテンツ
========================================= */
#diary-lp {
	margin: 1em auto 10em;
	@include mediaMB {
		margin-bottom: 6em;
	}
	.wrapper { @include wrapper();}
	.inner { @include inner();}

	/* リンクボタン 矢印 */
	@mixin btn_arrow {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 8px;
		display: block;
		width: 15px;
		height: 15px;
		margin: auto;
		background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/icon_arrow.svg');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		@include mediaSP {
			width: 10px;
			height: 10px;
			right: 1vw;
			@include mediaMB {
				width: 7px;
				height: 7px;
			}
		}
	}

	/* リンクボタン 基本 */
	.btn_basic {
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60px;
		padding: 0.6em 2em 0.5em 1.4em;
		color: #fff;
		font-size: calc(14px + 0.13vw);
		text-align: center;
		line-height: 1.3;
		border-radius: 6px;
		&:after { @include btn_arrow();}
		@include mediaSP {
			height: 8vw;
			font-size: calc(8px + 1.1vw);
			padding-top: 0.5em;
			padding-left: 0.5em;
			padding-right: 0.8em;
		}
		@include mediaMB {
			height: 53px;
		}
		
		/* ホバーで透明度を上げる */
		&:hover {
			opacity: 0.5;
			text-decoration: none;
		}
		/* 背景色切り替え */
		background-color: #BBACA6;
		&.red { background-color: #CA9E99;}
		&.green { background-color: #8AA7A6;}
		&.yellow { background-color: #D8AE72;}
	}

	/* リンクボタン 円型画像つき */
	.btn_circle {
		display: block;
		width: 100%;
		text-align: center;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		border-radius: 50%;
		overflow: hidden;
		@include mediaSP {
		}
		/* 背景画像切り替え */
		&.fashion { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_fashion_on.png');}
		&.cute { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_cute_on.png');}
		&.zakka { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_zakka_on.png');}
		&.basic { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_basic_on.png');}
		&.work { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_work_on.png');}
		&.multi { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_multi_on.png');}
		&.wrkprv { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_wrkprv_on.png');}
		&.casual { background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/btn_casual_on.png');}
		&:hover > img {
			opacity: 0;
		}
	}

	h1 {
			max-width: 1037px;
			margin: auto;
			@include mediaSP {
				max-width: none;
			}
	}

	h2 {
		margin: 3em auto 8em;
		text-align: center;
		font-size: $middFont;
		@include mediaSP {
			font-size: $baseFont;
		}
		@include mediaMB {
			margin: 1em auto 6em;
		}
	}

	h3 {
		margin: 10em auto 4em;
		text-align: center;
		@include mediaSP {
			margin-bottom: 2em;
		}
		@include mediaMB {
			margin-top: 30vw;
		}
		.heading {
			position: relative;
			margin-bottom: 3em;
			@include mediaSP {
				margin-bottom: 2em;
			}
			@include mediaMB {
				margin-bottom: 1em;
			}
			.main {
				max-width: 650px;
				margin: auto;
				@include mediaMB {
					margin: 0 1em;
				}
			}
			.sub {
				position: absolute;
				max-width: 280px;
				@include mediaSP {
					max-width: 230px;
				}
				@include mediaMB {
					width: 50%;
				}
				/* 各見出しに合わせて配置調整 */
				&.size {
					top: -55px;
					left: 10vw;
					@include mediaSP {
						top: -55px;
					}
					@include mediaMB {
						top: -10vw;
						left: 20px;
					}
				}
				&.format {
					top: -68px;
					left: 4vw;
					@include mediaSP {
						top: -60px;
						left: 0;
					}
					@include mediaMB {
						top: -12vw;
					}
				}
				&.design {
					top: -60px;
					left: 7vw;
					@include mediaSP {
						top: -55px;
						left: 3vw;
					}
					@include mediaMB {
						top: -12vw;
						left: 10px;
					}
				}
				&.lifestyle {
					top: -75px;
					left: 1vw;
					@include mediaSP {
						top: -70px;
						left: 0;
					}
					@include mediaMB {
						top: -15vw;
					}
				}
			}
		}

	}

	/* サイズで選ぶ */
	.cnt-size {
		.row > div {
			max-width: 250px;
			padding: 0;
			flex: 1;
			/* 3カラムの中央で余白調整 */
			&:nth-child(2) {
				margin: 0 1em;
				@include mediaMB {
					margin: 0 0.7em;
				}
			}
		}
		.img {
			margin-bottom: 1em;
			@include mediaSP {
				margin-bottom: 0.4em;
			}
		}
		.memo {
			margin-top: 0.7em;
			text-align: center;
			@include mediaSP {
				font-size: calc(8px + 1.1vw);
			}
		}
		/* ボタンサイズ調整 */
		.btn_basic {
			max-width: 270px;
			margin: auto;
			height: auto;
		}
		/* チャートバー */
		.bar {
			position: relative;
			width: 100%;
			height: 10vw;
			max-height: 35px;
			margin: 1.5em auto 0;
			background-color: #B87C5F;
			@include mediaSP {
				margin-top: 4%;
			}
			@include mediaMB {
				height: 7vw;
			}
			& > span {
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				line-height: normal;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				@include mediaMB {
					font-size: 12px;
				}
				/* arrow */
				&.left:before, &.right:after {
					content: '';
					display: inline-block;
					width: 35px;
					height: 61px;
					background-image: url('https://www.rakuten.ne.jp/gold/labclip/lp/2022diary/images/bg_arrow.png');
					background-repeat: no-repeat;
					background-position: top center;
					background-size: contain;
					@include mediaMB {
						width: 6vw;
						height: 10vw;
					}
				}
				&.left { left: -2px;}
				&.right {
					right: -2px;
					/* arrow */
					&:after { transform: rotate(-180deg);}
				}
			}
		}
	}

	/* フォーマットで選ぶ */
	.cnt-format {
		/* 大枠 */
		& > div {
			margin-bottom: 3em;
			padding: 2em 1em;
			background-color: #fff;
			&.row.row-box {
				justify-content: center;
			}
			@include mediaSP {
				padding: 1.5em 3vw;
				&.row.row-box {
					justify-content: flex-start;
					&.bd-red { justify-content: center !important;}
					& > div {
						margin-bottom: 5%;
						padding: 0 0.5em;
					}
				}
			}
			@include mediaMB {
				margin-bottom: 1em;
				padding: 1em 1.8vw;
			}
		}
		/* 大枠の色 */
		.bd-yellow {border: solid 15px #E3C59A;}
		.bd-green {border: solid 15px #9AB2B7;}
		.bd-red {border: solid 15px #D4B0AA;}
		@include mediaSP {
			.bd-yellow {border: solid 5px #E3C59A;}
			.bd-green {border: solid 5px #9AB2B7;}
			.bd-red {border: solid 5px #D4B0AA;}
		}
		/* 見出し */
		h4 {
			margin-bottom: 0.7em;
			font-size: 28px;
			text-align: center;
			@include mediaSP {
				font-size: $maxFont;
				margin-bottom: 0.5em;
			}
			@include mediaMB {
				font-size: 18px;
			}
			/* 色分け */
			&.yellow { color: #D5A767;}
			&.green { color: #8AA7A6;}
			&.red { color: #CA9E99;}
		}
		/* 始まり月 */
		.icon {
			width: 100px;
			margin: 0 0 0.5em auto;
			padding: 0.3em 0.1em 0.2em;
			font-size: calc(14px + 0.15vw);
			text-align: center;
			line-height: 1.2;
			border-radius: 50px;
			@include mediaSP {
				width: 15vw;
				max-width: 100px;
				font-size: calc(8px + 1vw);
			}
			@include mediaMB {
				width: 20vw;
				max-width: 80px;
			}
			/* 色分け */
			&.octb {
				color: #BE666D;
				border: solid 1px #BE666D;
			}
			&.jnua {
				color: #79B1A2;
				border: solid 1px #79B1A2;
			}
		}
		.img {
			margin-bottom: 1em;
			@include mediaSP {
				margin-bottom: 0.4em;
			}
		}
		.memo {
			margin-top: 0.7em;
			@include mediaSP {
				font-size: calc(8px + 1.1vw);
				line-height: 1.5;
			}
		}
	}

	/* デザインから選ぶ */
	.cnt-design {
		/* 余白調整 */
		justify-content: center;
		padding: 3vw 1.5em;
		border-radius: 20px;
		background-color: #C1A49F;
		@include mediaSP {
			padding: 6vw  2em 2vw;
			& > div {
				max-width: 300px;
				margin-bottom: 5vw;
				padding: 0 5vw;
			}
		}
		@include mediaMB {
			padding: 5vw  1em 2vw;
			& > div {
				max-width: 180px;
				margin-bottom: 1em;
				padding: 0 2vw;
			}
		}
		.btn_circle {
			box-shadow: 3px 3px 13px -5px #545454;
		}
	}

	/* ライフスタイルから選ぶ */
	.cnt-lifestyle {
		& > div {
			padding: 0 1vw;
			@include mediaSP {
				margin-bottom: 5%;
				padding: 0 1.5vw;
			}
		}
		.type {
			margin-top: 0.7em;
			font-size: calc(14px + 0.5vw);
			text-align: center;
			line-height: 1.5;
			@include mediaSP {
				font-size: $middFont;
				margin-bottom: 0.5em;
			}
			@include mediaMB {
				font-size:  calc(10px + 1vw);
			}
			span {
				display: inline;
				padding: 0 0.2em;
				/* 色分け */
				&.work { background: linear-gradient(transparent 70%, #B7D4C3 0%);}
				&.multi { background: linear-gradient(transparent 70%, #EDE7A1 0%);}
				&.wrkprv { background: linear-gradient(transparent 70%, #CF9BB2 0%);}
				&.casual { background: linear-gradient(transparent 70%, #DBD2BC 0%);}
			}
			@include mediaSP {
				margin-top: 0.7em;
				line-height: 1.4;
			}
			@include mediaMB {
				margin-top: 0.4em;
			}
		}
		.memo {
			margin-top: 0.7em;
			text-align: center;
			line-height: 1.4;
			@include mediaSP {
				font-size: calc(8px + 1.1vw);
				line-height: 1.5;
			}
		}
	}

	
  /* =========================================
		IE
	========================================= */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  }
  
}