/* SET */

@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo-Regular.ttf') format('truetype');
}


:root {
    --color-primary: #372576;
    --color-secondary: #b493d0;
    --color-base: #555665;
    --color-mute: #f7f7f4;
    --color-dark: #323232;
    --color-light: #fff;
    --color-red: #c71133;
    --color-black: #111;
    --color-gray: #d2d2d2;
    --color-gold: #b78c1f;

    --bg-gradient-primary: linear-gradient(135deg, #6b4394 0%, #c4a3f5 100%);
    --bg-gradient-secondary: linear-gradient(180deg, rgba(243, 244, 249, 1), rgba(234, 253, 253, 1) 25%, rgba(249, 242, 254, 1) 50%, rgba(255, 246, 228, 1) 75%, rgba(249, 237, 205, 1));
    --bg-gradient-gold: linear-gradient(135deg, #b78c1f 0%, #e1b536 100%);
    --bg-gradient-dark: linear-gradient(135deg, #2d2d2d 0%, #383838 100%);

    --font-gothic: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, Meiryo, sans-serif;
    --font-mincho: 'Cardo', yu-mincho-pr6n, 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', 'Times New Roman', serif;

}


/* BASE */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-mincho);
    color: var(--color-base);
    font-size: clamp(15px, 2vw, 16px);
    line-height: 2em;
    background: #fff;
    font-weight: nomal;
    font-feature-settings: "palt", 1;
    letter-spacing: 0.06em;
}

.font-wide {
    letter-spacing: 0.15em;
}

.font-gothic {
    font-family: var(--font-gothic) !important;
}

.font-mincho {
    font-family: var(--font-mincho) !important;
}


p, hr {
    margin: 0 0 1.2em 0;
}

section {
    padding: 3em 0 2em;
}

.section-s {
    padding: 2em 0;
}

.section-header {
    padding: 1em 0 1em;
}

.section-header picture img {
    vertical-align: bottom;
}

.section-top {
    padding: .5em .5em 0;
}

.container {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 1016px;
}

.container-s {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 800px;
}

.container-xs {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 675px;
}

@media screen and (min-width: 48em) {

    section {
        padding: 5em 0 3em;
    }

    .section-s {
        padding: 3em 0 1.5em;
    }

    .section-top {
        padding: 0.5em 0 0;
    }

}


/* HEADING */



h2, .h2, h3, .h3 {
    line-height: 1.4em;
    font-weight: 400;
}

h2, .h2 {
    font-size: clamp(1.188rem, 1.028rem + 0.8vw, 1.625rem);
    margin-bottom: 2em;
}

h3, .h3 {
    font-size: clamp(1.063rem, 0.994rem + 0.34vw, 1.25rem);
    margin-bottom: 1.6em;
}

h4, .h4 {
    font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
    margin-bottom: 1.4em;
}

.h-catch, .h-tit {
    font-family: var(--font-mincho);
}

.h-catch {
    color: var(--color-red);
    font-size: 12px;
    letter-spacing: 0.15em;
}

.h-tit {
    font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
    margin-bottom: 5em;
    position: relative;
}

.h-tit::before {
    background-color: var(--color-dark);
    /* 線の色 */
    bottom: -2em;
    /* 線の位置 */
    content: "";
    height: 1px;
    /* 線の高さ */
    left: 0;
    /* 線の中央寄せ */
    position: absolute;
    width: 20px;
    /* 線の長さ */
}

.h-point {
    font-size: 12px;
    letter-spacing: 0.15em;
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 1em;

}

.h-point::before {
    position: absolute;
    content: "●";
    color: var(--color-red);
    left: 0;
}

/* TEXT */

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-gold {
    color: var(--color-gold);
}

.text-dark {
    color: var(--color-dark);
}

.text-light {
    color: var(--color-light);
}

.text-bg-primary {
    display: inline;
    padding: 0.2em;
    line-height: 2em;
    background: var(--bg-gradient-primary);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--color-light);
}

.text-bg-dark {
    display: inline;
    padding: 0.2em;
    line-height: 2em;
    background: var(--bg-gradient-dark);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--color-light);
}

.text-bg-light {
    display: inline;
    padding: 0.2em;
    line-height: 2em;
    background: var(--color-light);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--color-dark);
}

.text-bg-gold {
    display: inline;
    padding: 0.2em;
    line-height: 2em;
    background: var(--bg-gradient-gold);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--color-light);
}

.text-itaric {
    font-style: italic;
}

.text-underline {
    text-decoration: underline;
}

.mk-yellow {
    background: linear-gradient(transparent 60%, #ffeebd 60%);
    font-weight: bold;
}

.text-b {
    font-weight: bold;
}

.text-red {
    color: var(--color-red);
    font-weight: bold;
}

.text-light {
    color: var(--color-light);
}

.text-dark {
    color: var(--color-dark);
}

.text-l {
    font-size: 120%
}

.text-s {
    font-size: 90%;
    line-height: 1.6em;
}

.text-xs {
    font-size: 60%;
    line-height: 1rem;
}

.text-right {
    display: box;
    text-align: right;
}


/* BACKGROUND */

.bg-header {
    background: url(../images/bg-header-s.webp) center center / cover no-repeat;
}

.bg-cta {
    background: url(../images/bg-cta-s.webp) center center / cover no-repeat;
}

.bg-jbox {
    background: url(../images/bg-jbox-s.webp) center center / cover no-repeat;
}

.bg-luxury {
    background: url(../images/bg-luxury-s.webp) center center / cover no-repeat;

}

.bg-glitter {
    background: url(../images/bg-glitter-s.webp) center center / cover no-repeat;
}

.bg-primary {
    background: var(--bg-gradient-primary);
}

.bg-secondary {
    background: var(--bg-gradient-secondary);
}

.bg-light {
    background: var(--color-light);
}

.bg-dark {
    background: var(--bg-gradient-dark);
}

.bg-mute {
    background: var(--color-mute);
}

.bg-footer {
    background: var(--color-black);
}

@media (min-width: 28em) and (max-width: 48em) {
    .bg-header {
        background: url(../images/bg-header-m.webp) center center / cover no-repeat;

    }
}

@media screen and (min-width: 48em) {
    .bg-header {
        background: url(../images/bg-header-l.webp) center center / cover no-repeat;
    }

    .bg-cta {
        background: url(../images/bg-cta-l.webp) center center / cover no-repeat;
        background-attachment: fixed;
    }

    .bg-jbox {
        background: url(../images/bg-jbox-l.webp) top center / cover no-repeat;
    }

    .bg-luxury {
        background: url(../images/bg-luxury-l.webp) center center / cover no-repeat;
        background-attachment: fixed;
    }

    .bg-glitter {
        background: url(../images/bg-glitter-l.webp) center center / cover no-repeat;
    }

}


/* NAVIGATION */

.logo {
    max-height: 150px;
    display: block;
    margin: 0 auto 1em;
}

@media screen and (min-width: 48em) {
    .logo {
        max-height: 200px;
    }
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 80%;
}

nav a {
    text-decoration: none;
    color: var(--color-dark);
    padding: 0 1em;
}

/* SLIDER */

.img-frame {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

@media screen and (min-width: 48em) {
    .img-frame {
        height: 600px;
    }
}

.img-01, .img-02, .img-03, .img-04 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.img-01 {
    background-image: url('../images/slider-1.webp');
    animation: slide-animation-01 15s infinite;
}

.img-02 {
    background-image: url('../images/slider-2.webp');
    animation: slide-animation-02 15s infinite;
}

.img-03 {
    background-image: url('../images/slider-4.webp');
    animation: slide-animation-03 15s infinite;
}

/* .img-04 {
    background-image: url('../images/slider-4.webp');
    animation: slide-animation-04 20s infinite;
} */

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

.msg {
    color: var(--color-light);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
}

/*  BORDER-BOX */

.border-primary {
    border: 3px solid var(--color-primary);
}

.border-gray {
    border: 1px solid var(--color-gray);
}

.border-inset {
    outline: 1px solid var(--color-gold);
    outline-offset: -0.4em;
}


/* LINE */

.line-gold {
    height: 5px;
    background: var(--bg-gradient-gold);
}

.line-bottom {
    border-bottom: 1px solid var(--color-mute);
}


/* TILE, BOX */

.tile-l {
    padding: 2em 1em 1em 1em;
    margin-bottom: 2em;
}

.tile-m {
    padding: 1em;
    margin-bottom: 2em;
}

.tile-s {
    padding: 0.5em;
    margin-bottom: 1em;
}

.tile-s-overflow {
    margin: 0 auto 2em;
    padding: 2em 1em 1em 1em;
    height: 10em;
    overflow: auto;
    background: #efefef;
    border: 1px solid #eee;
}

@media screen and (min-width: 48em) {
    .tile-l {
        padding: 3em;
    }

    .tile-m {
        padding: 2em;
    }

}

/* FORM */

input[type="text"] {
    width: 100%;
    text-align: center;
    height: 4em;
    border: 1px solid var(--color-base);
    font-weight: bold;
    margin-bottom: 1em;
    background: #fff;
    color: var(--color-black);
    max-width: 672px;
}

label {
    font-weight: 600;
}

/* BUTTON */


/*矢印が縮む*/

.btnarrow6 {
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    background: var(--color-dark);
    padding: 5px 60px 5px 30px;
    display: inline-block;
    text-align: center;
    transition: all .2s linear;
    color: #fff;
    text-decoration: none;
    border: transparent 1px solid;
    outline: none;
}

/*hoverした際のボタンの形状*/
.btnarrow6:hover {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}

/*矢印と線の形状*/

.btnarrow6:before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 50%;
    right: 20px;
    /*線の形状*/
    width: 20px;
    height: 1px;
    background: #fff;
}

.btnarrow6::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 40%;
    right: 12px;
    /*矢印の形状*/
    border: 4px solid transparent;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-color: #fff;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before {
    background: var(--color-dark);
    right: 25px;
}

.btnarrow6:hover::after {
    border-left-color: var(--color-dark);
    right: 20px;
}


/* LINK */

a {
    position: relative;
    text-decoration: none;
    color: var(--color-dark);
    transition: all 0.5s;
}

a.link-op:hover {
    opacity: .5;
}


nav a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--color-dark);
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: center top;
    /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
    transition: transform 0.3s;
    /*変形の時間*/
}

nav a:hover::after {
    transform: scale(1, 1);
    /*ホバー後、x軸方向に1（相対値）伸長*/
}


/* ANIMATION */

img.ani-pop {
    margin: 0 auto;
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
    cursor: pointer;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.92, 0.92);
    }

    to {
        transform: scale(1, 1);
    }
}



/* FADE-IN */

/* .lazyload, .lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity 1.3s;
    transition: opacity 1.3s ease-out;
} */


.slide-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.5s 0.3s ease-out;
}

.slide-bottom-sl {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.5s 0.6s ease-out;
}



/* UTILITY */


.responsive {
    max-width: 100%;
    height: auto;
}

.is-center, .is-center-s {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.is-left {
    text-align: left;
}

.is-right {
    text-align: right;
}

@media screen and (min-width: 48em) {

    .is-center-s {
        text-align: left;
        margin: 0;
    }
}


.mb-l {
    margin-bottom: 5em !important;
}

.mb-m {
    margin-bottom: 3em !important;
}

.mb-s {
    margin-bottom: 1em !important;
}

.mb-0 {
    margin-bottom: 0em !important;
}


/* SHADOW */

.box-shadow-s {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
}

.box-shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
}

.box-shadow-l {
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}

.box-shadow-color {
    box-shadow: 0 5px 15px rgba(113, 126, 244, .17);
}




/* FOOTER */

footer {
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 2em;
    padding: 1em;
}

footer a, footer a:visited {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

footer a:hover {
    color: rgba(255, 255, 255, .7);
    text-decoration: underline;
}



/* LIST */

.list-check, .list-arrow, .list-fusen {
    list-style-type: none;
}

.list-check li {
    position: relative;
    line-height: 1.5em;
    padding-left: 1.5em;
    margin-top: .8em;
    margin-bottom: .8em;
}

.list-check li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0em;
    width: 10px;
    height: 5px;
    border-left: 3px solid var(--color-gold);
    border-bottom: 3px solid var(--color-gold);
    transform: rotate(-45deg);
}

.list-arrow li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: .3em;
    line-height: 1.5em;
}

.list-arrow li::before {
    display: inline-block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}


.list-fusen li {
    margin-bottom: 5px;
    padding: .2em .7em;
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-light);
}


/* PC・スマホ改行切り替え */

/*スマホで改行*/
.br-s {
    display: block;
}

/*PCで改行*/
.br-l {
    display: none;
}

@media screen and (min-width: 48em) {
    .br-s {
        display: none;
    }

    .br-l {
        display: block;
    }
}


/* TABLE */

table {
    border-collapse: separate;
    border-spacing: 5px;
    margin: 0 auto 2em auto;
    padding: 0;
    width: 100%;
}


table th {
    position: relative;
    text-align: left;
    width: 4em;
    background-color: var(--color-primary);
    color: var(--color-light);
    text-align: center;
    padding: 10px 0;
}

table th:after {
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top: calc(50% - 10px);
    right: -10px;
    border-left: 10px solid var(--color-primary);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

table td {
    text-align: left;
    width: 80%;
    text-align: center;
    background: var(--color-light);
    padding: 10px 0;
}


/* ICON */

.icon-s {
    width: 2rem;
    height: 2.5rem;
    margin-right: 0.8rem;
    display: inline-block;
    vertical-align: middle;
}

.icon-xs {
    width: 1rem;
    height: 1.2rem;
    margin-right: 0.3rem;
    display: inline-block;
    vertical-align: middle;
}

/* 動画埋め込み
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
  }
  
  .movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }