@charset "UTF-8";
/* common---------------- */
html, body { overflow-x: clip; color: var(--text-main); font-family: var(--font-jp); letter-spacing: 0.05em; font-weight: 300; }
a { color: inherit; transition: all .3s; }
a:hover { text-decoration: none; opacity: 0.75; }
.p-product-block ul.__product li.__item a:hover > .__title { text-decoration: none; opacity: 0.8; }
::placeholder { color: var(--text-muted); font-family: var(--font-jp); font-weight: 300; }
img { vertical-align: top; }
h1,h2,h3 { font-weight: 300; }
.wrapper { overflow: hidden; }
.c-button:active, .c-button-submit:active { box-shadow:none; }
ul li::marker { color: var(--accent-orange); }
.__en { font-family: var(--font-en); }
.bg-beige { background-color: var(--bg-light); }

/* button -----------------*/
.button-arrow a { max-width: 130px; display: block; margin: 0 0  0 auto; font-size: 13px; background-color: var(--text-main); color: var(--white); line-height: 40px; text-align: center; }
.button-arrow a span { position: relative; }
.button-arrow a span::after { content: '\e5cc'; display: inline-block; font-family: var(--font-icon); font-size: 1.54em; line-height: 1; vertical-align: text-top; width: 1rem; }

/* title ------*/
.top-h { margin: 0 0 clamp(0.77rem, calc(0.133rem + 1.333vw), 1.2rem); font-size: clamp(2.466rem, calc(1.6rem + 1.333vw), 2.667rem); /* min: 32px, max: 40px */ font-family: var(--font-en); color: var(--primary-color); letter-spacing: 0; line-height: 1.45; font-weight: 400; }

/* __block--recommend ----------------*/
.p-product-block ul.__product { padding: 0; }
.p-product-block ul.__product li.__item { padding-left: 0.39rem; padding-right: 0.39rem; }
.p-product-block ul.__product li.__item a { letter-spacing: 0.05em; }
/* __photo */
.p-product-block ul.__product li.__item a .__photo { margin-bottom: 1rem; aspect-ratio: 1 / 1; }
.p-product-block ul.__product li.__item a .__photo img { object-fit: contain; aspect-ratio: 1; max-height: unset; width: 100%; }
.p-product-block .c-more { display: none; }
/* __title */
.p-product-block ul.__product li.__item a .__title { margin-bottom: 0; font-size: 1rem; line-height: 1.4; }

/* header -------------------------------------------*/
.header { z-index: 10; position: sticky; top: 0; margin: auto; margin-bottom: clamp(0.333rem, calc(-0.667rem + 2.5vw), 1.333rem); /* min: 5px, max: 20px */ }
.header .__banner .__wrap a.__logo::after { content: '出会う人 すべての人を KIZUNAでつなぐ'; display: block; letter-spacing: 0; font-size: clamp(0.62rem, calc(0.267rem + 0.667vw), 0.8rem); /* min: 8px, max: 12px */ }
/* __login-form */
.header .__banner .__wrap .__login.__is-guest .__block .__body .__login-form { padding-bottom: 0; }
.header .__banner .__wrap .__login.__is-guest .__block .__body .__login-form form,
.__login.__is-guest .__block .__body .__login-form form { display: flex; gap: 5px; }
.header .__banner .__wrap .__login.__is-guest .__block .__body .__login-form form .__submit .__button,
.__login.__is-guest .__block .__body .__login-form form .__submit .__button { border-radius: 0; background-color: #27211E; font-weight: inherit; color: #fff; }
.header .__banner .__wrap .__login .__block .__body ul.__menu { padding-top: 0; }
.header .__banner .__wrap .__login .__block .__body ul.__menu li.__regist,
.__login .__block .__body ul.__menu li.__regist { display: none; }
.header .__banner .__wrap .__login .__block .__body ul.__menu li a:before,
.__login .__block .__body ul.__menu li a:before { content: '\e5cc'; display: inline-block; font-family: var(--font-icon); font-size: 1.333em; line-height: 1; vertical-align: text-bottom; width: 1rem; font-weight: inherit; }
.__login.__is-guest .__block .__body .__login-form form dl { display: inline-block; margin: 0; }
.__login.__is-guest .__block .__body .__login-form form dl dt { display: none; }
.__login.__is-guest .__block .__body .__login-form form dl dd { margin-left: 0; }
.__login.__is-guest .__block .__body .__login-form .__submit { display: inline-block; }
/* __is-member */
.body-mypage .__login.__is-member .__body { display: none; }
.aside section.__block.__block--login .__body,
.__login.__is-member .__body { padding: 1rem; border: 1px solid var(--border-color); }
.aside section.__block.__block--login.__is-member .__body .__menu,
.__login.__is-member .__body .__menu { display: none; }


/* gnav-pc ---------------------*/
.gnav-pc { background-color: var(--bg-light); }
.gnav-pc .__menu.__menu--default ul li a, .gnav-pc .__menu.__menu--custom ul li a { line-height: 2.5; }
.gnav-pc .__menu.__menu--default ul li a, .gnav-pc .__menu.__menu--custom ul li a { position: relative; }
.gnav-pc .__menu.__menu--default ul li a::before, .gnav-pc .__menu.__menu--custom ul li a::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 28px; background: var(--border-color); }
.gnav-pc .__menu.__menu--default ul li:last-of-type a::after, .gnav-pc .__menu.__menu--custom ul li:last-of-type a::after { position: absolute; content: ""; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 28px; background: var(--border-color); }

/* aside------------------ */
.aside .__menu .__custom li { margin-bottom: 1.33rem; }
/* heading */
.aside section.__block .__heading.__heading--default,
.aside section.__block .__heading.__heading--custom { padding: 0.6rem; font-size: 1.2rem; color: var(--text-main); background-color: var(--bg-light); font-weight: 300; text-align: center; }
/* category */
.aside section.__block.__block--category { margin-bottom: 3.33rem; }
.aside section.__block.__block--category .__body ul.__tree > li.__item:last-child { border-bottom: 1px solid var(--border-color); }
.aside section.__block.__block--category .__body ul.__tree li.__item:not(.__item--has-children) > a:after { color: var(--text-main); font-family: var(--font-icon); content: '\e5cc'; font-size: 1.4666em; font-weight: 300; right: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; line-height: 1; position: absolute; top: 50%; margin-top: -.5em; }
.aside section.__block.__block--category .__body ul.__tree > li.__item.__item--has-children > ul { display: none; }
.aside section.__block.__block--category .__body ul.__tree li.__item.__item--has-children:not(:has(a + .__js-toggle)) > a:after { content: none; }
.aside section.__block.__block--category .__body ul.__tree li.__item.__item--has-children a + .__js-toggle { display: block; height: 100%; }
.aside section.__block.__block--category .__body ul.__tree li.__item.__item--has-children a + .__js-toggle::before { content: '\e313'; position: absolute; font-family: var(--font-icon); font-size: 1.4666em; font-weight: 300; color: var(--text-main); right: 0px; top: 0.7rem; }
/* __item */
.aside section.__block.__block--category .__body ul.__tree>li.__item a { padding: 0.89em 1.5em 0.89em 0; font-feature-settings: 'palt'; }
/* calendar */
.aside section.__block.__block--calendar strong { font-weight: 600; }

/* __info--banner */
.__info--banner { display: grid; gap: var(--space-sm); }
/* __info--banner-item-------------------- */
.__info--banner .__info--banner-item { container-type: inline-size; }
.__info--banner .__info--banner-item a { font-size: 5cqw; display: grid; grid-template-columns: 18.9cqw auto 9.45cqw; align-items: center; height: 60px;
border: 1px solid var(--accent-orange); letter-spacing: 0;  }
.__info--banner .__info--banner-item a::before { display: inline-block; content: ''; width: 14.3cqw; height: 7.9cqw; margin: auto; }
.__info--banner .__info--banner-item a::after { content: '\e5cc'; font-family: var(--font-icon); font-size: 1.55em; line-height: 1; color: var(--accent-orange); }
/* faq */
.__info--banner .__info--banner-item.__info--banner-faq a::before { background: url(../img/common/icon-faq.png) no-repeat center/ contain; }
/* guide */
.__info--banner .__info--banner-item.__info--banner-guide a::before { background: url(../img/common/icon-guide.png) no-repeat center/ contain; }
/* archive */
.__info--banner .__info--banner-item.__info--banner-archive a::before { background: url(../img/common/icon-archive.png) no-repeat center/ contain; }
/* schedule */
.__info--banner .__info--banner-item.__info--banner-schedule a { line-height: 1.3125; font-size: 4.45cqw; }
.__info--banner .__info--banner-item.__info--banner-schedule a::before { background: url(../img/common/icon-schedule.png) no-repeat center/ contain; }

/* footer---------------------------- */
.c-pagetop { z-index: 9; }
.c-pagetop span:before { background-color: var(--text-main); border: 1px solid var(--white); }
.footer { margin-top: 4rem; background-color: var(--white); border-top: 1px solid var(--border-color); }
.footer nav.__nav { background: var(--white); max-width: 100%; }
.footer nav.__nav ul { padding: 1.4rem 0; }
.footer nav.__nav ul li { padding: 0; line-height: 2; }
.footer nav.__nav ul li a { border-right: none; }
.footer .__copyright { max-width: 100%; background-color: var(--text-main); color: var(--white); font-size: .8em; padding: 1.04em; }
.footer .__copyright a { color: var(--white); }

@media screen and (max-width: 1279px) {
    .header .__banner { max-width: 1240px; padding-right: 3%; padding-left: 3%; }
    .wrapper .__inner { max-width: 1240px; width: 94%; margin-right: 3%; margin-left: 3%; }
    .footer .__inner { max-width: 1240px; width: 94%; margin-right: 3%; margin-left: 3%; }
}

@media screen and (max-width: 1023px) {
   
}

@media screen and (max-width: 959px) and (min-width: 600px) {
    .header .__banner .__wrap .__view-cart { padding-top: 0.6rem; }
    .header .__banner .__wrap .__login .__block .__body ul.__menu li.__password span { font-size: 0.866rem; }
}

@media screen and (max-width: 959px) {
    .header { border-bottom: 1px solid var(--bg-light); }
    .aside .__youtube--list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.866rem; }
    .__login.__is-guest .__block .__body .__login-form form { justify-content: center; }
    .__login .__block .__body ul.__menu { text-align: center; padding: 0; margin: 0; list-style-type: none; }

    /* __is-member  */
    .header + .__login,
    .header + .__login.__is-member { margin-bottom: 0.5rem; padding-left: 2%; padding-right: 2%; }
    .__login.__is-member .__body .__point dl { margin: 0; }
    .__login.__is-member .__body .__point dl dt:after { content: ":"; margin-right: 0.3em; }
    .__login.__is-member .__body .__message { display: inline-block; margin-right: 1rem; }
    .__login.__is-member .__body .__point { display: inline-block; }
    .__login.__is-member .__point dl dt,
    .__login.__is-member .__point dl dd { display: inline-block; margin: 0; }

    /* sp menu */
    .gnav-pc { display: none; }
   .gnav-sp { display: block !important; }
   .aside .__menu { display: none; }
   .aside .__block--category { display: none; }
   .header .__banner .__wrap .__login { display: none; }
   .gnav-sp .__drawer .__menu .__content a { padding-right: 3em!important; }
   .gnav-sp .__drawer .__menu .__content .__heading { font-size: 1.15rem; background: var(--bg-light); font-weight: 300; color: inherit; }
   .header { padding: 0; }
   .header .__banner .__wrap { display: flex; justify-content: space-between; align-items: center; height: 60px; }
   .header .__banner .__wrap a.__logo { height: unset; }
   .header .__banner .__wrap a.__logo img { max-height: 1.54em; margin-bottom: 2px; }
   .header .__banner .__wrap a.__logo span { display: block; }
   .header .__banner .__wrap .__view-cart { display: block; position: relative; }
   .header .__banner .__wrap .__view-cart a span.__view-cart-text { display: none; }
   .header .__banner .__wrap .__view-cart a:before { font-size: 2.5em; font-family: var(--font-icon); font-weight: 100; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; content: ""; }
   .header .__banner .__wrap .__view-cart a span.__counter { position: absolute; top: 0; right: 0.5em; padding: 0 0.4em; font-size: .85em; background-color: var(--text-main); color: var(--white); border: 1px solid; border-radius: 2em; }
   /* __toggle--- */
   .header .__banner .__wrap .__toggle-open { display: table-cell; width: 3.5em; }
   .header .__banner .__wrap .__toggle-open label { display: block; text-align: center; width: 3.5em; height: 3.5em;  padding: .2em 0; }
   /* open */
   .header .__banner .__wrap .__toggle-open label span:before { content: '\e5d2'; font-family: var(--font-icon); font-weight: 100; font-size: 3rem; color: var(--text-main); line-height: 1; }
   /* close */
   .gnav-sp .__drawer .__menu .__toggle-close { border: none; }
   .gnav-sp .__drawer .__menu .__toggle-close label span:before { content: '\e5cd'; font-family: var(--font-icon); font-weight: 100; font-size: 3em; color: var(--text-main); }
   .gnav-sp .__drawer .__menu .__toggle-close label { text-align: left; }
   /* search */
   .gnav-sp .__block--search .__body { margin-top: 0; width: 96%; margin-left: 2%; margin-right: 2%; }
   .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li.__block.__block--search { padding: 1em 0; background: var(--bg-light); border-bottom: unset;  }
   .gnav-sp .__drawer .__menu .__content .__search--keyword { display: none; }
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children ul { border-top: 1px solid var(--border-color); }
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree > li.__item.__item--has-children:not(:has(a + .__js-toggle)) > a:after, 
   .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu > li.__item.__item--has-children:not(:has(a + .__js-toggle)) > a:after { content: none; }
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children a + .__js-toggle { right: 0.5em; }
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children a + .__js-toggle::before,
   .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item.__item--has-children a + .__js-toggle::before  { color: var(--text-main); font-family: var(--font-icon); content: '\e313'; font-size: 1.4666em; }
   .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item.__item--has-children ul { border-top: 1px solid var(--border-color); }
   .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item.__item--has-children ul > li:not(:last-of-type) > a { border-bottom: 1px solid var(--border-color); }
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree > li.__item, 
   .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu > li.__item { border-color: var(--border-color); }
   .gnav-sp .__drawer .__menu .__content .__member.__is-guest ul li a:after, 
   .gnav-sp .__drawer .__menu .__content .__search.__search--feature ul li a:after, 
   .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li a:after, 
   .gnav-sp .__drawer .__menu .__content.__content--custom .__page ul li a:after,
   .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item:not(.__item--has-children) > a:after { color: var(--text-main); font-family: var(--font-icon); content: '\e5cc'; font-size: 1.46666rem; font-weight: 300; right: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; line-height: 1; position: absolute; top: 50%; margin-top: -.5em; }

    .gnav-sp .__drawer .__menu .__content .__member.__is-guest ul li, 
    .gnav-sp .__drawer .__menu .__content .__search.__search--feature ul li, 
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li, 
    .gnav-sp .__drawer .__menu .__content.__content--custom .__page ul li { border-color: var(--border-color); }
    .gnav-sp .__drawer .__menu .__content .__member.__is-guest ul li a, 
    .gnav-sp .__drawer .__menu .__content .__search.__search--feature ul li a, 
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li a, 
    .gnav-sp .__drawer .__menu .__content.__content--custom .__page ul li a { color: var(--text-main); }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item a, 
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item a { color: var(--text-main); border: none; }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree > li.__item > ul > li + li { border-top: 1px solid var(--border-color); }
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__message { border-color: var(--border-color); }
    
}

@media screen and (max-width: 767px) {
.footer nav.__nav ul li {
        width: 100%;
    }
}

@media screen and (max-width: 599px) {
    
    .header .__banner { padding-right: 0; padding-left: 0; }
    .__login.__is-guest .__block .__body .__login-form form .__login-form-list { flex: 1; }
    .__login.__is-guest .__block .__body .__login-form form dl { display: block; margin-bottom: 3px; }
    .__login.__is-guest .__block .__body .__login-form .c-form input[type=text],
    .__login.__is-guest .__block .__body .__login-form .c-form input[type=password] { width: 100%;/* padding: 0.4em 0.5em; */font-size: 14px; }
    .__login.__is-guest .__block .__body .__login-form form .__submit .__button {/* padding: 1.5em 0.7em;*/ padding: 0.45em 0.7em; font-feature-settings: 'palt';}
    .__login .__block .__body ul.__menu { text-align: right; }

    .wrapper .__inner { width: 96%; margin-right: 2%; margin-left: 2%; }
    .footer .__inner { width: 96%; margin-right: 2%; margin-left: 2%; }
    
    .footer .footer--guide { padding: 0; }
    .footer .footer--guide li { padding: 3.5em 0 2.5em; }
    .footer .footer--guide li + li { border-top: 1px solid #ddd; }

    /* aside------------------ */
    .aside section.__block.__block--calendar { font-size: 1.15rem; }
    .aside section.__block.__block--calendar ul li { padding: 0 1.88em; }
}

@media screen and (min-width: 600px) {
    
     .header .__banner .__wrap .__view-cart { width: 3em; }
     .__login.__is-guest .__block .__body .__login-form form { text-align: center; align-items: center; }
     .__login .__block .__body ul.__menu li { font-size: 0.8666rem; }
}

@media screen and (min-width: 768px) {
    .footer .footer--guide .__inner { display: flex; justify-content: space-between; }
    .footer .footer--guide .__inner li { width: calc((100% - 6.25%) /3); }
    .footer nav.__nav ul { text-align: center; }
}

@media (min-width: 960px) {
    .header { height: 150px; }
    .header .__banner { height: 90px; }
    .header .__banner .__wrap a.__logo::after { content: '｜出会う人 すべての人を KIZUNAでつなぐ'; display: inline-block; }
    .header .__banner .__wrap a.__logo img { max-width: 180px; margin-right: 0.8666rem; }
    .header .__banner .__wrap .__login.__is-member .__block .__body .__message { display: none; }
    /* __login------------ */
    .header .__login.__is-member .__body { border: none; padding: 0; }
    .header .__banner .__wrap .__login.__is-guest .__block .__body .__login-form form,
    .__login.__is-guest .__block .__body .__login-form form { justify-content: flex-end; }
    .__login.__is-member .__body .__point dl { margin: 0.32em 0 0; }
    

    /* gnav-pc ------------*/
    .gnav-pc .__menu.__menu--default ul li, .gnav-pc .__menu.__menu--custom ul li { background-color: unset; border: none; }

    .__info--banner .__info--banner-item.__info--banner-archive a { font-feature-settings: 'palt'; }
    .__info--banner .__info--banner-item a { font-size: 5.95cqw; grid-template-columns: 21.85cqw auto 12.4cqw; height: 50px; }
    .__info--banner .__info--banner-item a::before { height: 11.1cqw; }
    .__info--banner .__info--banner-item.__info--banner-schedule a { font-size: 5.58cqw; }
    
    .footer nav.__nav ul li { padding: 0; }
}

@media (min-width: 1024px) {
    
}

@media screen and (min-width: 1280px) {
    .header .__banner { max-width: 1280px; }
    .gnav-pc .__menu { max-width: 1280px; }
    .wrapper.wrapper--column-2 .__inner .main { width: 77.58%; }
}