:root {
    --color-primary: #B3907A;
    --color-secondary: #F0E7DA;
    --color-b: #E1DACA; 
    --color-text-main: #333333;
    --color-bg-light: #F8F8F8;
    --font-family-base: "Noto Sans JP", sans-serif;
    --font-size-base: 1.6rem;
    --spacing-xs: 0.8rem;
    --spacing-md: 2.4rem;
    --spacing-lg: 4.8rem;
    --spacing-xl: 7.2rem;
    --section-padding-pc: 120px; 
    --section-padding-sp: 40px;
}
html {
    font-size: 62.5%; 
    scroll-behavior: smooth;
}
body {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text-main);
    line-height: 1.7;
    background-color: #ffffff;
}
a{
    color:var(--color-text-main) ;
    text-decoration: none;
}
ul,
li{
    list-style: none;
    padding: 0;
    margin: 0;
}
span.ib{
    display: inline-block;
}
br.pc_none{
    display: none;
}

.open-window {
    display: inline-flex; 
    align-items: center;
    border: solid #60473a 1px;
    padding: 1px 6px;
    margin: 0 0 0 8px;
    font-size: 1.2rem;
    border-radius: 2px;
}
.open-window::after {
    content: url('../img/icon-open-window.svg');
    margin-left: 0.4em;
    min-width: 1.5rem;
    transform: translateY(2px);
}
@media (max-width: 768px) {
    br.pc_none{
    display: block;
}
br.sp_none{
    display: none;
}
}
.container {
    max-width: 1200px; 
    margin: 0 auto;
}
.button {
    display: inline-block;
    padding: 1.2rem 3.2rem;
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.4s;
    position: relative;
}
.button:before{
    content: "";
    width: 60px;
    height: 20px;
    background-image: url(../img/btn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: -30px;
    bottom:4px;
    background-size: contain;
    transition: right 0.4s;
}
.button:hover{
    opacity: 0.7;
}
.button:hover:before{
    right: -35px;
}
.ir-image-replace {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%; 
    height: 120px; 
}
@media ( max-width : 768px ){
    .ir-image-replace {
    background-position: center;
}
}

/*- - - - - - - - - - - - - - - */
/*
/* cta
/*
/*- - - - - - - - - - - - - - - */
.cta{
    background-color: #CFBFB1;
    background-image: url(../img/top/cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cta p{
    margin: 0 0 var(--spacing-lg);;
}
.cta .u-background-box{
    background-color: #f7f6f5
}
.cta__title {
    background-image: url('../img/top/ttl-cta.svg'); 
    margin: 0 auto var(--spacing-lg);
    background-position: center;
}
/*- - - - - - - - - - - - - - - */
/*
/* animation
/*
/*- - - - - - - - - - - - - - - */

.anim-fadeInUp {
    opacity: 0;
    transform: translateY(10px);
    transition-property: opacity, transform;
    transition-duration: 1.3s;
    transition-timing-function: ease-out;
    transition-delay: 0s; 
    pointer-events: none; 
}
.anim-fadeInUp.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sequence-text {
    opacity: 1; 
}

.sequence-text .char-anim {
    display: inline-block; 
    opacity: 0;
    transform: translateY(10px);
    transition-property: opacity, transform;
    transition-duration: 0.9s;
    transition-timing-function: ease-out;
}

.sequence-text.is-visible .char-anim {
    opacity: 1;
    transform: translateY(0);
}
/****/
.anm__fadein {
    opacity: 0;
    transition-property: opacity, transform; 
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 0s; 
    pointer-events: none; 
    transform: translateY(10px);
}

.anm__fadein.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/****/
.pagination {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:20px;
	width:100%

}.pagination .nav-links{
	display:flex;
	gap:10px;
	font-size:1.3rem
}
.pagination .nav-links a,
.pagination .nav-links span{
	border:solid 1px var(--color-primary);
	min-width:40px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	line-height:40px;
	border-radius:20px;
	color: var(--color-primary);
	transition: ease .3s
}
.pagination .nav-links span{
	background-color:var(--color-primary);
	color:#fff;
}
.pagination .nav-links a:hover{
	background-color:var(--color-primary);
	color: #fff;
}