@charset "UTF-8";
/*------------------------
タイトル
------------------------*/
/*--------共通--------*/
.page-ttl .num {
	display: inline-block;
	background: var(--accentcolor);
	text-align: center;
	line-height: 1;
	position: relative;
}
.page-ttl .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 7px 8px;
	border-color: transparent transparent #e2edf1 transparent;
}
.page-ttl .story .item {
	background: rgba(255,255,255,.8);
	border-radius: 4px;
}
.page-ttl .story .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-ttl .story .item .txt {
	flex: 1;
}
.page-ttl .story .item .txt h2 {
	font-weight: bold;
}
.page-ttl .story .item .txt p {
	text-align: justify;
	line-height: 1.3;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.page-ttl .num {
		font-size: 1.6rem;
		padding: 10px;
	}
	.page-ttl h1 {
		margin-bottom: 20px;
	}
	.page-ttl .story .head {
		display: block;
		font-size: 1.8rem;
		margin-bottom: 6px;
	}
	.page-ttl .story .item {
		width: 360px;
	}
	.page-ttl .story .item a {
		padding: 15px;
		position:relative;
	}
	.page-ttl .story .item a::before ,
	.page-ttl .story .item a::after {
		content: '';
		position: absolute;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		opacity: 0;
		transition:width .3s, height .3s, opacity .3s;
	}
	.page-ttl .story .item a::before {
		top: 0;
		left: 0;
		border-top: 2px solid var(--btncolor);
		border-left: 2px solid var(--btncolor);
	}
	.page-ttl .story .item a::after {
		right: 0;
		bottom: 0;
		border-right: 2px solid var(--btncolor);
		border-bottom: 2px solid var(--btncolor);
	}
	.page-ttl .story .item a:hover::before,
	.page-ttl .story .item a:hover::after {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
	.page-ttl .story .item .img {
		width: 80px;
		height: 75px;
		margin-right: 15px;
		overflow: hidden;
	}
	.page-ttl .story .item .img img {
		transition: all .3s ease 0s;
	}
	.page-ttl .story .item .txt p {
		font-size: 1.4rem;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.page-ttl .num {
		font-size: 3.47vw;
		padding: 1.5% 3%;
		margin-bottom: 1%;
	}
	.page-ttl h1 {
		margin-bottom: 4.5%;
	}
	.page-ttl .story .head {
		display: block;
		font-size: 3.74vw;
		margin-bottom: 1%;
	}
	.page-ttl .story .item {
		position: relative;
		z-index: 1;
	}
	.page-ttl .story .item  a {
		padding: 3%;
	}
	.page-ttl .story .item .img {
		width: 28%;
		height: 20vw;
		margin-right: 3%;
	}
	.page-ttl .story .item .txt h2 {
		font-size: 3.74vw;
	}
	.page-ttl .story .item .txt p {
		font-size: 3.2vw;
	}
}
/*------------------------
column
------------------------*/
/*--------共通--------*/
.column .lead {
	text-align: justify;
}
.column .block:not(:last-of-type)::after {
	content: '';
	display: block;
	width: 100%;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/border_triangle.svg) 100%;
}
.column .block h2 {
	display: flex;
	align-items: center;
	font-weight: bold;
	line-height: 1.3;
}
.column .block h2::before {
	content: '';
	display: inline-block;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/icn_head.png) no-repeat center;
}
.column .block .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.column .block .item .txt {
	line-height: 1.8;
	text-align: justify;
}
/*おさらい*/
.column .block .plates {
	background: var(--bgcolor) url(/customhome/html/user_data/assets/img/rdb/common/bg_texture25.png);
	position: relative;
}
.column .block .plates::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #f4d8ba transparent transparent transparent;
}
.column .block .plates::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
}
.column .block .plates .head {
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/underline.png) no-repeat left bottom;
	position: relative;
}
.column .block .plates .head::before {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/img_mai.png) no-repeat 100%/contain;
	transform: rotate(-5deg);
}
.column .block .plates .head::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/ashi_megaphone.svg) no-repeat 100%/contain;
}
.column .block .plates .txt {
	text-align: justify;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.column {
		width: 800px;
		margin: 80px auto;
	}
	.column .lead {
		font-size: 1.8rem;
		line-height: 1.8;
		margin-bottom: 50px;
	}
	.column .block:not(:last-of-type) {
		margin-bottom: 60px;
	}
	.column .block::after {
		height: 12px;
	}
	.column .block h2 {
		font-size: 2.6rem;
		margin-bottom: 20px;
	}
	.column .block h2::before {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}
	.column .block .item {
		overflow: hidden;
		margin-bottom: 10px;
	}
	.column .block .item .img {
		float: right;
		width: 276px;
		height: 224px;
		margin: 0 0 20px 30px;
	}
	.column .block .item .txt {
		font-size: 1.8rem;
	}
	.column .block .item .txt p {
		margin-bottom: 30px;
	}
	/*おさらい*/
	.column .block .plates {
		padding: 30px;
		margin-bottom: 60px;
	}
	.column .block .plates::before {
		border-width: 17px 17px 0 0;
	}
	.column .block .plates::after {
		border-width: 0 0 17px 17px;
	}
	.column .block .plates .head {
		padding: 0 32px 4px 10px;
		margin: 0 0 12px 10px;
		font-size: 2.1rem;
	}
	.column .block .plates .head::before {
		bottom: -2px;
		left: -58px;
		width: 66px;
		height: 77px;
	}
	.column .block .plates .head::after {
		bottom: 0;
		right: 0;
		width: 38px;
		height: 41px;
	}
	.column .block .plates .txt p {
		margin-bottom: 10px;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.column {
		padding: 8% 4.5% 8%;
	}
	.column .block:not(:last-of-type) {
		margin-bottom: 6%;
	}
	.column .block::after {
		height: 2vw;
	}
	.column .block h2 {
		font-size: 5.07vw;
		text-align: justify;
		margin-bottom: 4.5%;
	}
	.column .block h2::before {
		width: 10vw;
		height: 10vw;
		margin-right: 3%;
	}
	.column .block .item {
		margin-bottom: 6%;
	}
	.column .block .item .img {
		width: 100%;
		height: 60vw;
		margin-bottom: 4.5%;
	}
	.column .block .item .txt p {
		margin-bottom: 3.5%;
	}
	/*おさらい*/
	.column .block .plates {
		padding: 6%;
		margin-bottom: 9%;
	}
	.column .block .plates::before {
		border-width: 10px 10px 0 0;
	}
	.column .block .plates::after {
		border-width: 0 0 10px 10px;
	}
	.column .block .plates .head {
		padding: 0 10% 1% 3%;
		margin-bottom: 3%;
		font-size: 5.07vw;
	}
	.column .block .plates .head::before {
		bottom: -2vw;
		left: -14%;
		width: 10vw;
		height: 12vw;
	}
	.column .block .plates .head::after {
		bottom: 0;
		right: 0;
		width: 8vw;
		height: 9vw;
	}
	.column .block .plates .txt p {
		margin-bottom: 2%;
	}
}
/*------------------------
習得度テスト
------------------------*/
/*--------共通--------*/
.test-area {
	background: url(/customhome/html/user_data/assets/img/rdb/recipe/bg_test.jpg);
}
.test-area .point-area {
	text-align: center;
}
.test-area .point-area .point {
	position: relative;
}
.test-area .point-area .point h2 {
	line-height: 1;
	background: #f4f0ec;
	border-radius: 50vw;
	box-shadow: 2px 6px 6px rgba(0,0,0,.1);
}
.test-area .point-area .point h2 strong {
	background: linear-gradient(transparent 68%, #fff0a1 68%);
}
.test-area .point-area .point .ashi {
	position: absolute;
}
.test-area .point-area .point::before {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/ashi_kirakira.png) no-repeat 100%/contain;
	transform: scale(-1, 1);
	animation: kirakira1 2s -.2s infinite alternate linear backwards;
}
.test-area .point-area .point::after {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/ashi_kirakira.png) no-repeat 100%/contain;
	animation: kirakira2 2s .1s infinite alternate linear backwards;
}
.test-area .inner {
	background: #fff;
}
.test-area .inner .ttl .num {
	background: var(--accentcolor);
	text-align: center;
	line-height: 1;
	position: relative;
}
.test-area .inner .ttl .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 7px 6px;
	border-color: transparent transparent #fff transparent;
}
.test-area .inner h2 {
	font-weight: bold;
	line-height: 1;
}
.test-area .inner .item .q-box span {
	display: block;
	background: #8b5d44;
	color: #fff;
	line-height: 1;
}
.test-area .inner .item .q-box p {
	flex: 1;
}
.test-area .inner .item .a-box label {
	display: flex;
	align-items: flex-start;
}
.test-area .inner .item .a-box label span {
	flex: 1;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.test-area {
		padding: 80px 0;
	}
	.test-area .point-area {
		text-align: center;
	}
	.test-area .point-area .point {
		display: inline-block;
	}
	.test-area .point-area .point h2 {
		padding: 10px 30px 15px;
	}
	.test-area .point-area .point h2 strong {
		font-size: 2.6rem;
	}
	.test-area .point-area .point .ashi {
		top: -56px;
		right: 30px;
		width: 50px;
		height: 56px;
	}
	.test-area .point-area .point::before {
		top: -10px;
		left: -2px;
		width: 30px;
		height: 33px;
	}
	.test-area .point-area .point::after {
		top: 0;
		right: -8px;
		width: 30px;
		height: 33px;
	}
	@keyframes kirakira1 {
		0% {
			transform: rotateY(0);
		}
		90% {
			opacity: .9;
		}
		100% {
			top: 0;
			transform: rotateY(480deg);
			opacity: 0;
		}
	}
	@keyframes kirakira2 {
		0% {
			transform: rotateY(0);
		}
		90% {
			opacity: .9;
		}
		100% {
			top: 10px;
			transform: rotateY(-480deg);
			opacity: 0;
		}
	}
	.test-area .inner {
		width: 800px;
		margin: -20px auto 0;
		padding: 60px 40px 40px;
	}
	.test-area .inner .ttl {
		align-items: center;
		margin-bottom: 13px;
	}
	.test-area .inner .ttl .num {
		font-size: 1.4rem;
		padding: 10px;
		margin-right: 10px;
	}
	.test-area .inner .ttl h3 {
		font-size: 2.1rem;
		font-weight: bold;
	}
	.test-area .inner h2 {
		font-size: 2.6rem;
		margin-bottom: 25px;
	}
	.test-area .inner .item {
		margin-bottom: 30px;
	}
	.test-area .inner .item .q-box {
		margin-bottom: 13px;
	}
	.test-area .inner .item .q-box span {
		padding: 5px 10px;
		font-size: 1.4rem;
		margin-right: 10px;
	}
	.test-area .inner .item .a-box label {
		margin-bottom: 5px;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.test-area {
		padding: 8% 4.5%;
	}
	.test-area .point-area .point h2 {
		font-size: 3.47vw;
		padding: .8em 1em 1em;
		position: relative;
		z-index: 1;
	}
	.test-area .point-area .point h2 strong {
		font-size: 5.07vw;
	}
	.test-area .point-area .point::before {
		top: -18%;
		left: -1%;
		width: 7vw;
		height: 7vw;
		z-index: 2;
	}
	.test-area .point-area .point::after {
		top: 0;
		right: -2%;
		width: 7vw;
		height: 7vw;
		z-index: 2;
	}
	@keyframes kirakira1 {
		0% {
			transform: rotateY(0);
		}
		90% {
			opacity: .9;
		}
		100% {
			top: -10%;
			transform: rotateY(480deg);
			opacity: 0;
		}
	}
	@keyframes kirakira2 {
		0% {
			transform: rotateY(0);
		}
		90% {
			opacity: .9;
		}
		100% {
			top: 8%;
			transform: rotateY(-480deg);
			opacity: 0;
		}
	}
	.test-area .point-area .point .ashi {
		top: -12vw;
		right: 9%;
		width: 11vw;
		height: 12vw;
	}
	.test-area .inner {
		margin-top: -2vw;
		padding: 10% 4.5% 4.5%;
	}
	.test-area .inner .ttl {
		flex-direction: column;
		margin-bottom: 2%;
	}
	.test-area .inner .ttl .num {
		font-size: 2.94vw;
		padding: 2% 3%;
		margin-bottom: 1%;
	}
	.test-area .inner h2 {
		font-size: 5.87vw;
		margin-bottom: 4.5%;
	}
	.test-area .inner .item {
		margin-bottom: 6%;
	}
	.test-area .inner .item .q-box {
		margin-bottom: 3%;
	}
	.test-area .inner .item .q-box span {
		padding: 2%;
		font-size: 3.2vw;
		margin-right: 2%;
	}
	.test-area .inner .item .q-box p {
		text-align: justify;
		font-size: 3.74vw;
	}
	.test-area .inner .item .a-box label {
		font-size: 3.74vw;
		margin-bottom: 1.5%;
	}
}
/*------------------------
その他
------------------------*/
/*--------共通--------*/
.others {
	background: url(/customhome/html/user_data/assets/img/rdb/common/bg_grain.jpg);
}
.others .block h3 {
	font-weight: bold;
	line-height: 1;
	position: relative;
}
.others .block h3::before {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/img_mai.png) no-repeat 100%/contain;
	transform: rotate(-5deg);
}
.others .block h3::after {
	content: '';
	position: absolute;
	background: url(/customhome/html/user_data/assets/img/rdb/common/ashi_Inspiration.png) no-repeat 100%/contain;
	transform: scale(-1, 1);
}
/*関連コラム*/
.others .connection ul li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.others .connection ul li .ttl .num {
	display: inline-block;
	background: var(--accentcolor);
	text-align: center;
	line-height: 1;
	position: relative;
}
.others .connection ul li .ttl .num::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 7px 6px;
	border-color: transparent transparent #fbfaf9 transparent;
}
.others .connection ul li .read {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--mygray);
	line-height: 1;
}
/*コラム一覧*/
.others .column-list .inner {
	background: #f4f0ec;
}
/*ログイン前*/
.others .column-list.logout  .inner .item ul li {
	display: flex;
	align-items: center;
}
.others .column-list.logout  .inner .item ul li span {
	display: flex;
}
/*ログイン後*/
.others .column-list .inner .item ul li.done::before {
	content: '済';
	display: inline-block;
	color: #ff0000;
	line-height: 1;
	border: 1px solid #ff0000;
	border-radius: 50vw;
}
.others .column-list .inner .item ul li.still::before {
	content: '未';
	display: inline-block;
	color: #4d888e;
	line-height: 1;
	border: 1px solid #4d888e;
	border-radius: 50vw;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	.others {
		padding: 80px 0;
		margin-bottom: 160px;
	}
	.others .block {
		width: 1000px;
		margin: 0 auto 80px;
	}
	.others .block:last-of-type {
		margin: auto;
	}
	.others .block h3 {
		font-size: 2.1rem;
		padding: 0 0 20px 50px;
	}
	.others .block h3::before {
		content: '';
		position: absolute;
		bottom: 10px;
		left: 0;
		width: 34px;
		height: 42px;
		background: url(/customhome/html/user_data/assets/img/rdb/common/img_mai.png) no-repeat 100%/contain;
		transform: rotate(-5deg);
	}
	.others .block h3::after {
		content: '';
		position: absolute;
		top: -20px;
		left: 30px;
		width: 12px;
		height: 14px;
		background: url(/customhome/html/user_data/assets/img/rdb/common/ashi_Inspiration.png) no-repeat 100%/contain;
		transform: scale(-1, 1);
	}
	/*関連コラム*/
	.others .connection ul li {
		width: 312px;
		position: relative;
	}
	.others .connection ul li:not(:last-of-type) {
		margin-right: 30px;
	}
	.others .connection ul li .img {
	height: 206px;
	margin-bottom: 10px;
	overflow: hidden;
	}
	.others .connection ul li .img img {
		transition: filter .2s;
	}
	.others .connection ul li a:hover .img img {
		filter: blur(1px);
	}
	.others .connection ul li .read {
		font-size: 1.5rem;
		padding: 6px 10px;
	}
	.others .connection ul li .ttl .num {
		font-size: 1.2rem;
		padding: 7px;
		margin-bottom: 6px;
	}
	.others .connection ul li .ttl h4 {
		transition: all .3s ease 0s;
	}
	.others .connection ul li a:hover .ttl h4 {
		color: #4d888e;
	}
	/*要望探しのコンテンツ*/
	.others .bnr-area ul li {
		width: 184px;
	}
	.others .bnr-area ul li:not(:last-of-type) {
		margin-right: 20px;
	}
	.others .bnr-area ul li a {
		display: block;
	}
	.others .bnr-area ul li a:hover {
		box-shadow: 2px 2px 8px rgba(0, 0, 0, .1);
		transform:translate(0, -1px);
	}
	/*コラム一覧*/
	.others .column-list .inner {
		padding: 20px;
	}
	.others .column-list .inner .item {
		width: 33%;
	}
	.others .column-list .inner .item h4 {
		font-size: 1.8rem;
		font-weight: bold;
		color: var(--mybrown);
		line-height: 1;
		margin-bottom: 10px;
	}
	.others .column-list .inner .item ul li {
		margin-bottom: 4px;
	}
	/*ログイン前*/
	.others .column-list.logout  .inner .item ul li span {
		width: 10px;
		margin-left: 8px;
	}
	/*ログイン後*/
	.others .column-list .inner .item ul li a:hover {
		opacity: .6;
	}
	.others .column-list .inner .item ul li.done::before ,
	.others .column-list .inner .item ul li.still::before {
		width: 14px;
		height: 14px;
		font-size: 1.2rem;
		padding: 3px 2px 2px 3px;
		margin-right: 5px;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	.others {
		padding: 8% 4.5% 8%;
		margin-bottom: 12%;
	}
	.others .block {
		margin-bottom: 6%;
	}
	.others .block h3 {
		font-size: 4.8vw;
		padding: 0 0 6% 9%;
	}
	.others .block h3::before {
		bottom: 3.5vw;
		left: -3%;
		width: 8vw;
		height: 9vw;
	}
	.others .block h3::after {
		top: -4.2vw;
		left: 4vw;
		width: 2vw;
		height: 2vw;
	}
	/*関連コラム*/
	.others .connection ul {
		flex-direction: column;
	}
	.others .connection ul li {
		width: 100%;
		margin-bottom: 3%;
	}
	.others .connection ul li a {
		display: flex;
		position: relative;
	}
	.others .connection ul li .img {
		width: 30%;
		height: 24vw;
		margin-right: 3%;
	}
	.others .connection ul li .read {
		position: absolute;
		top: 0;
		left: 0;
		padding: 1.5% 2%;
		font-size: 3.47vw;
	}
	.others .connection ul li .ttl .num {
		font-size: 2.67vw;
		padding: 4%;
		margin-bottom: 1%;
	}
	.others .connection ul li .ttl h4 {
		font-size: 3.74vw;
	}
	/*要望探しのコンテンツ*/
	.others .bnr-area ul {
		flex-direction: column;
	}
	.others .bnr-area ul li {
		margin-bottom: 3%;
	}
	/*コラム一覧*/
	.others .column-list .inner {
		flex-direction: column;
		padding: 4.5%;
	}
	.others .column-list .inner .item {
		width: 100%;
		margin-bottom: 4%;
	}
	.others .column-list .inner .item h4 {
		font-weight: bold;
		line-height: 1;
		margin-bottom: 3%;
	}
	.others .column-list .inner .item ul li {
		margin-bottom: 1.5%;
		font-size: 3.74vw;
	}
	/*ログイン前*/
	.others .column-list.logout  .inner .item ul li span {
		width: 2.2vw;
		margin-left: 2%;
	}
	/*ログイン後*/
	.others .column-list .inner .item ul li.done::before ,
	.others .column-list .inner .item ul li.still::before {
		width: 3vw;
		height: 3vw;
		font-size: 2.94vw;
		padding: 1%;
		margin-right: 1.5%;
	}

}