@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&family=Kaisei+HarunoUmi:wght@700&display=swap');

body {
	background: #f9f9f9;
	/* background: url(../../parts/img/memo/memo_pattern.png) center repeat; */
}
#wrapper {
    overflow:inherit;
}
p {
	color: #222;
}
aside {
	padding-top: 60px;
}
.under_wrap {
	background: #282828;
    overflow: hidden;
    position: relative;
}

/* --------------------------------------
	main
-------------------------------------- */
/* main {
	width: 100%;
	margin: 0 auto;
	position: relative;
    padding-top:117px;
    display: block;
}
h1 {
	padding-top: 66px;
	background: url(../../parts/img/memo/memo.png) top center no-repeat;
	text-align: center;
	position: relative;
	z-index: 10;
} */
article{}
.memo-list {
	width: 84vw;
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 120px;
}
.box-read {
	width: 88vw;
    max-width: 920px;
    margin: -1vw auto;
    position: relative;
	display: grid;
	gap: 2.4em;
	grid-template-columns: auto 72%;
	box-sizing: border-box;
	align-items: center;
	margin-bottom: -2vw;
	@media(max-width: 1120px) {
		grid-template-columns: auto 60%;
		width: 84vw;
		margin-bottom: -3vw;		
	}	
	@media(max-width: 600px) {
		padding: 16vw 0;
		gap: 1.2em;
		grid-template-columns: auto;
	}	
	p {
		font-size: 18px;
		line-height: 1.9;
		*+& {
			margin: 1em 0;	
		}
		@media(max-width: 1120px) {
			font-size: 16px;
			line-height: 1.7;
			br {
				display: none;
			}			
		}
	}
}
.box-read .img-yasuka {
	img {
		width: 100%;
		height: auto;
	}
	@media(max-width: 600px) {
		width: 34vw;
		box-sizing:border-box;
		background:#fff;
		padding-top: 10px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		overflow: clip;
		position: relative;
		margin: -18vw auto 0;
		top: 0;
		border: 6px solid #444;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center top;
		}
	}	
}
.memo-list li{
    position: relative;
    padding-bottom: 100px;
}
.memo-list li:last-child{
    padding-bottom: 0;
}

.wrap-memo {
     opacity: 0;    
}
.wrap-memo.show {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    animation-name: bounceInUp;
	box-shadow: 8px 8px 32px rgba(0,0,0,.1); 
}
.wrap-memo.show {
    opacity: 1;
    transition: 1s ease-in-out;
}
.memo-body{
    display: block;
    position: relative;
}
.memo-body.sp{
    display: none;
    
}
.arida{
    display: block;
    position: relative;
    z-index: 20;
    margin: -1em auto 0;
    opacity: 0
}
.arida.show {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    animation-name: tada;
}
.arida.show {
    opacity: 1;
    transition: .3s ease-in-out;
}

.link-btn{
    position: absolute;
    z-index: 10;
    top:50px;
    right:-50px; 
    
}
.link-btn:before{
    content: '';
    display: block;
    background: url(../../parts/img/top/ic_button.png) 0 0 no-repeat;
    width: 60px;
    height: 48px;
    position: absolute;
    left: -25px;
    top: 50%;
    margin-top:-24px;
}
.link-btn:hover:before{
    transition: .3s all ease;
    transform: scale(1.1)
}

.status{
    position: fixed;
    right: 24px;
    z-index: 200;
    top: 40%;
}
.status li+li{
    margin-top:10px;
}
.status li a{
    display:block;
    width: 16px;
    height: 16px;
    background: #ddd;
    border-radius: 50%;
}
.status li.current a{
    background: #dd3233;
}



@media(max-width: 768px) {

	/* --------------------------------------
		main
	-------------------------------------- */
    .memo-list{
        width: 96%;
        margin: 0 auto;
        padding-bottom:100px;
    }

	.memo-list li{
        position: relative;
        height: auto;
        padding-bottom:60px;
    }
    .arida{
        display: block;
        position: relative;
        z-index: 20;
        margin: 10px auto 0;
        opacity: 0
    }
    .arida.show {
        -webkit-animation-duration: 0.6s;
        animation-duration: 0.6s;
        animation-name: tada;
    }
    .arida.show {
        opacity: 1;
        transition: .3s ease-in-out;
    }

    .link-btn{
        position: absolute;
        z-index: 10;
        top:50px;
        right:-50px;
        display: none

    }
    .link-btn:before{
        content: '';
        display: block;
        background: url(../../parts/img/top/ic_button.png) 0 0 no-repeat;
        width: 60px;
        height: 48px;
        position: absolute;
        left: -25px;
        top: 50%;
        margin-top:-24px;
    }
    .link-btn:hover:before{
        transition: .3s all ease;
        transform: scale(1.1)
    }
    .status{
        position: fixed;
        right: 3%;
    }
    .status li+li{
        margin-top: .5em;
    }
    .status li a{
        width: 12px;
        height: 12px;
    }
}

.wrap-memo {
	background: url("../../parts/img/memo/bg_memo.webp");
	border: 1px solid #ccc;
	.inner {
		border: 8px solid #fff;
		padding: min(calc((48 / 1040) * 100vw), 48px);
	}
}
.hl-memo {
	font-size: min(calc((44 / 1040) * 100vw), 40px);
	text-align: center;
	letter-spacing: -.02em;
	& > span {
		display: inline-block;
		padding-bottom: 4px;
		background: linear-gradient(transparent 80%, rgba(243, 218, 49, .75) 20%);
	}
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;	
	line-height: 1.4;
	margin-bottom: 1em;
	.-s {
		font-size: .8em;
	}
	@media(max-width: 1040px) {
		br.-sp {
			display: inherit!important;
		}
	}
	@media(max-width: 600px) {
		font-size: 5.6vw;
	}	
}
.p-grid-memo {
	display: grid;
	grid-template-columns: 44% 1fr;
	gap: 2.4em;
	&.-wide_img {
		grid-template-columns: 32% 1fr;	
	}
	@media(max-width: 1040px) {
		grid-template-columns: auto!important;
	}
}
.p-grid-memo__row.-text {
  background-image: linear-gradient(180deg, #ddd 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 100% 2.4em; /* 行の高さ */
  line-height: 2.4em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
		@media(max-width: 600px) {
		  background-size: 100% 2em; /* 行の高さ */
		  line-height: 2em; /* 文字の高さ */
		}	
	p {
		padding: 0 .25em;
		color: #444;
		@media(max-width: 600px) {
			font-size: 14px;
		}		
	}
}
.p-grid-memo__row.-img {
	text-align: center;
	img {
		width: 100%;
		height: auto;
	}
}

.c-feature {
	background: rgba(255,255,255,.6);
	*+& {
		margin-top: 3.4em;
	}
	border-radius: 5px 5px 0 0;
	border: 1px solid #eee;
	position: relative;
}
.c-feature .c-result {
	background: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .8em 1em 1em;
	line-height: 1;
	font-family: "Zen Kaku Gothic New", sans-serif;
	dt {
		color: #eee;
		font-size: min(calc((20 / 1040) * 100vw), 16px);
	}
	dd {
		font-weight: 600;
		font-size: min(calc((28 / 1040) * 100vw), 22px);
	  font-family: "Zen Kaku Gothic New", sans-serif;
	  font-weight: 700;	
		color: rgba(243, 218, 49, 1);
	}
	@media(max-width: 600px) {
		flex-direction: column;
		dt {font-size: 13px; margin-bottom: 5px;}
		dd {font-size: 17px; text-align: center; line-height: 1.2;}
	}		
	border-radius:  0 0 5px 5px;	
}
.p-list-features {
	padding: 40px min(calc((80 / 1920) * 100vw), 80px);
	
	div {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 1.2em;		
		@media(max-width: 812px) {
			gap: .6em;
		}
		dt {
			font-family: "Zen Kaku Gothic New", sans-serif;
			background: rgba(243, 218, 49, .75);
			font-weight: 600;
			border-radius: 100vmax;
			padding: 4px 1.6em;
			font-size: min(calc((17 / 1040) * 100vw), 16px);
			@media(max-width: 812px) {
				span { display: none; }
				width: 3em;
				aspect-ratio:1/1;
				display: flex;
				justify-content: center;
				align-items:center;
				padding: 0;
				background: #fff url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23f2df61%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleCheckFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zm4.768%209.14a1%201%200%201%200-1.536-1.28l-4.3%205.159-2.225-2.226a1%201%200%200%200-1.414%201.414l3%203a1%201%200%200%200%201.475-.067l5-6z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
				background-size: cover;

			}			
		}
		dd {
			font-size: min(calc((22 / 1040) * 100vw), 18px);
			font-weight: bold;
			color: #333;
			line-height: 1.2;
			@media(max-width: 600px) {
				font-size: 3.4vw;
			}			
		}
		*+& {
			margin-top: 1em;
		}
	}
}
.p-voice-memo {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	@media(max-width: 1240px) {
		width: 90%;
		margin: 0 auto;
	}
	@media(max-width: 600px) {
		gap: .5em;
		width: 92%;
	}	
	.p-voice-memo__row {
		&.-img {
			width: clamp(80px, calc((172 / 1040) * 100vw), 172px);
			aspect-ratio: 1/1;
			overflow: clip;
			border-radius: 50%;
			border: min(calc((8 / 1240) * 100vw), 8px) solid #dd3233;
			img {
				width: 100%;
				height: 100%;
			}
		}
		&.-text {
			font-size: min(calc((30 / 1040) * 100vw), 28px);
			line-height: 1.56;
			  font-family: "Kaisei HarunoUmi", serif;
			  font-weight: 700;
			  font-style: normal;
			u {
				color: #dd3233;
			}
			@media(max-width: 1040px) {
				br { display: none;}
				flex: 1;
			}
			@media(max-width: 600px) {
				font-size: 4.4vw;
			}			
		}
	}
}
.p-sticky_note {
	position: absolute;
    right: -24px;
    top: -16px;
    rotate: 8deg;	
	a {
		color: #fff;
		background: #f29861;
		display: flex;
		align-items: center;
		span {
			padding: 1em 1.6em 1em 0;
		}
		font-size: 15px;
		@media(max-width: 600px) {
			font-size: 13px;
		}			
		font-weight: bold;
        box-shadow: 0 0 4px rgba(0,0,0,0);
        transition: .3s box-shadow;
		&::before {
			content: '';
			display: block;
			background: url("../../parts/img/top/ic_button.png") 50% 50% no-repeat;
			background-size: contain;
			width: 2.4em;
			aspect-ratio: 1/1;
			position: relative;
			left: -.8em;
            transition: .3s translate, .3s background;
		}
		span {
			display: flex;
			align-items: center;
			@media(min-width: 769px) {
				&::before {
					content: 'もっと';
				}
			}			
		}
        @media(hover:hover) {
            &:hover {
                background: #f77e49;
                box-shadow: 0 0 4px rgba(0,0,0,.2);
            }
            &:hover::before {
                translate: .8em 0;
            }
        }
	}
}


.p-list-memo-title {
	*+& {
		margin-top: 3em;
	}
	display: flex;
	flex-wrap: wrap;
	gap: 1em 1.5em;
	font-size: 15px;
	@media(max-width: 600px) {
		font-size: 13px;
		gap: .75em 1.2em;
	}
	a {
		line-height: 1;
		color: currentColor;
		display: flex;
		align-items: center;
		gap:.2em;
		&::before {
			content: '';
			display: block;
			width: 1.6em;
			aspect-ratio: 1/1;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23dd3233%22%3E%3Cpath%20d%3D%22M593.67-461%20461-594l140.33-140-29.66-29.67-229%20229L295.33-582%20520-807q24.67-24.67%2051.83-25%2027.17-.33%2052.5%2025l25%2025L696-828.67Q707.33-840%20722.17-840q14.83%200%2026.16%2011.33L828-749q11.33%2011.33%2011.33%2026.83%200%2015.5-11.33%2026.84L593.67-461Zm-341%20341H120v-132.67l293.33-293.66%20133%20132.66L252.67-120Z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
			background-size: contain;
		}
		span {
			flex: 1;
			padding-top: .2em;
			text-decoration: underline;
		}
	}
}