@charset "utf-8";
/* CSS Document */

kyotsu_memo {
    /***** フォント *****/
    font-family: "Cambria", "Georgia", sans-serif;
    /*--日本語--*/
    /*--セクションtitle--*/
    /***** カラー *****/
    color: #625a9e;
    color: #54348a;
    /*--ベースフォントカラー--*/
    /*--button、hover後のtext--*/
    background-color: #f8f5f3;
    /*--pickupアイテムの背景色--*/
    background-color: #dfddf0;
    /***** 背景色 *****/
    /*--nav背景--*/
    background-color: #d2bea0bf;
    /* footer前の余白　id:padding-bottom: 150px; */
}

/* ---------------共通 ---------------*/
a:link {
    text-decoration: none;
    color: #625a9e;
}

a:visited {
    color: #625a9e;

    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #857bd5;
    transition: .3s;
    cursor: pointer;
}

/*  */
a:active {
    text-decoration: none;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    color: #625a9e;
    font-size: 16px;
    font-family:"游明朝", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    overflow-wrap: break-word;
    overflow: hidden;
    background-image: url(../img/bg/bg_white.png);
}

li {
    text-decoration: none;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* font */
h1 {
    font-size: 1.8rem;
}

/*section-title*/
h2 {
    font-size: 40px;
    font-family: "Cambria", "Georgia", sans-serif;
}

/*title*/
h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

p {
    font-size: 1rem;
}

.br-sp {
    display: none;
}


/****** 背景色 ******/
.background {
    width: 100%;
    background-image: url(../img/bg/bg_white02.png);
    background-color: rgba(255, 255, 255, 0.3);
    background-blend-mode: lighten;
}

/******  ******/
.section-title {
    text-align: center;
    margin-bottom: 100px;
}

/******下層背景  ******/
.bg {
    padding: 200px 0 300px;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/****** ボタン ******/
.more ,
.button {
    font-size: 18px;
    width: 250px;
    height: 50px;
    border: 1px solid #625a9e;
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    display: block;
    transition: .3s;
}

.more:hover,
.button:hover {
    border: 1px solid #625a9e;
    background-color: rgb(211, 207, 241, 0.5);
    color: #54348a;
    cursor: pointer;
}

/* 白button */
.more-white {
    font-size: 18px;
    color: #f3f3f3 !important;
    width: 250px;
    height: 50px;
    border: 1px solid #f3f3f3;
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    display: block;
    transition: .3s;
    cursor: pointer;
}

.more-white:hover {
    background-color: rgb(211, 207, 241, 0.5);
    color: #f3f3f3;
    cursor: pointer;
}

.button {
    color: #efe9e9;
    width: 300px;
    height: 50px;
    background-color: #dfddf0;
    display: block;
}

/*-------------------------header-------------------------*/
.sp-header {
    display: none;
}

.pc-header {
    width: 100%;
    height: 70px;
    background-color: rgb(210, 190, 160, 0.9);
    padding: 0 3%;
    font-family: "Cambria", "Georgia", sans-serif;
    /* navi固定 */
    position: fixed;
    z-index: 10001;
    top: 0;
}

.pc-header .logo {
    font-size: 26px;
    font-weight: bold;
    /* font-family: Cambria; */
    font-family: "Cambria", "Georgia", sans-serif;
}

.pc-header .nav {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    text-align: right;
    align-items: center;
    gap: 20px;
    color: #625a9e;
}

/************/
.menu-list {
  display: flex;
  justify-content: center; /* メニューアイテムを中央揃えに */
}
/* navメニュー枠 */
.menu-item {
  position: relative;
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
/* menu背景*/
.menu-item:hover {
    background-color: rgba(197, 177, 148, 0.95);
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  transform: scaleY(1); /* ドロップダウンメニューの表示 */
}
.menu-item:hover {
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.drop-menu-item:hover {
  /* opacity: .8; */
   /* ドロップダウンメニューアイテムのホバー時の不透明度 */
  transition: opacity .3s; 
  /* 不透明度の変化をアニメーション化 */
}

.menu-item a {
  align-items: center;
  display: flex;
  height: 70px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width:80px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
  left: 0;
  position: absolute;
  top: 100%;
  transform: scaleY(0); /* ドロップダウンメニューの非表示 */
  transform-origin: center top; /* 変形を適応する基準を設定 */
  transition: transform .3s; /* 表示の変化をアニメーション化 */
  width: max-content;
  z-index: 1;
}
.drop-menu-item {
    font-size: 15px;
  background-color: rgba(248, 239, 226, 0.95); /* ドロップダウンメニューの背景色 */

  /* transition: opacity .3s; */
   /* 不透明度の変化をアニメーション化 */
}
.drop-menu-item :hover{
background-color: rgba(240, 231, 219, 0.95); /* ドロップダウンメニューの背景色 */
}

/************/

.nav-btn {
    width: 95px;
    text-align: center;
    background-color: rgba(248, 239, 226, 0.75);
    border-radius: 1px;
    padding: 10px 10px;
    display: block;
    transition: .5s;
    margin-left: 20px;
}

.nav-btn:hover {
    background-color: rgba(248, 239, 226, 0.5);
    color: #54348a;
    cursor: pointer;
}

.pc-header .nav-shop {
    padding: 10px 20px;
}


/*-------------------------footer-------------------------*/
.footer-sp {
    display: none;
}

.footer {
    background-color: #e4e3e3;
    width: 100%;
    margin: 0 auto;
}

.footer .inner {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 80px 200px 50px;
    /* border: 1px solid #000; */
}

.footer .logo-box {
    margin-bottom: 80px;
    text-align: center;
}

.footer .shop_logo {
    font-family: Cambria;
    font-size: 40px;
    color: #625a9e;
    margin-bottom: 20px;
}

.footer .box_iccon {
    display: flex;
    justify-content: center;
    align-items: center;

}

.footer .iccon,
.iccon02 {
    text-align: center;
    width: 25px;
    color: #625a9e;
    opacity: .7;
    display: block;
}

.footer .iccon:hover,
.iccon02:hover {
    opacity: .6;
    transition: .5;
}

.footer .iccon {
    margin-right: 30px;
}

/* menu */
.footer .menu-content {
    gap: 10%;
}

.footer .box {
    /* border: 1px solid #000; */
}

.footer .ttl {
    margin-bottom: 10px;
    font-family: Cambria, "Georgia", sans-serif;
    font-size: 20px;
    color: #625a9e;
}

.footer li {
    margin-bottom: 10px;
}

.footer p {
    line-height: 35px;
    font-size: 14px;
    color: #625a9e;
}

#footer .footer-pc .menu-content .box .footer-item  a {
    display: inline-block;
    position: relative;
    line-height: 2;
}
.footer .sub {
    line-height: 20px;
    margin-bottom: 0%;
    font-size: 13px;
    color: #625a9e;
}

.footer .sub-bottom{
    margin-bottom: 10px;
}
/***** ホバーで下線出現 *****/
#footer .footer-pc .menu-content .box .footer-item a:hover::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #625a9e;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: center top;
    /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
    transition: transform 0.3s;
    /*変形の時間*/
}
#footer .footer-pc .menu-content .box .footer-item a:hover::after {
    transform: scale(1, 1);
    /*ホバー後、x軸方向に1（相対値）伸長*/
}

/* コピーライト */
.footer .copy {
    padding: 10px 0 ;
    font-size: 10px;
    color: #625a9e;
    text-align: center;
}

/**************animation*******************/

/* 左→右 */
.lr-100 {
    animation-name: lr-100;
    animation-duration: 2s;
    animation-timing-function: ease;
}

@keyframes lr-100 {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 右→左 */
.rl-100 {
    animation-name: rl-100;
    animation-duration: 2.5s;
    animation-timing-function: ease;
}

@keyframes rl-100 {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/********************************  */

/******上→下******/
/* 500 */
/* 現れる */
.opacity-02 {
    animation: opacity 2s linear;
    animation-range: cover 0% cover 100%;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.opacity-03 {
    animation: opacity-03 3s linear alternate;
    animation-range: cover 0% cover 100%;
}

@keyframes opacity-03 {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.opacity-04 {
    animation: opacity 4s linear alternate;
    animation-range: cover 0% cover 100%;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
        transform: scale(.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ************************************************* */
/* パララックスanimetion */
.para-up-30 {
    animation: para-up-30 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-up-30 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30px);
    }
}

.para-up-40 {
    animation: para-up-40 ease-in forwards;
    animation-range: cover 0% cover 100%;
}

@keyframes para-up-40 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-40px);
    }
}

.para-up-50 {
    animation: para-up-50 ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes para-up-50 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50px);
    }
}

.para-up-80 {
    animation: para-up-80 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-up-80 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-80px);
    }
}

.para-up-100 {
    animation: para-up-100 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-up-100 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100px);
    }
}

.para-up-150 {
    animation: para-up-150 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-up-150 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-150px);
    }
}

.para-down-30 {
    animation: para-down-30 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-down-30 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(30px);
    }
}

.para-down-50 {
    animation: para-down-50 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% entry 100%;
}

@keyframes para-down-50 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50px);
    }
}

.para-down-100 {
    animation: para-down-100 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% entry 100%;
}

@keyframes para-down-100 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100px);
    }
}

.para-down-150 {
    animation: para-down-150 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% entry 100%;
}

@keyframes para-down-150 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(150px);
    }
}

/* ******************************* */

/* pickup03 */
/* text */
.para-slowup-50 {
    animation: para-slowup-50 ease-in forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes para-slowup-50 {
    0% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(-300);
    }
}

/********** service **********/
/* box01-画像 */
.para-updown-50 {
    animation: para-updown-50 ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes para-updown-50 {
    0% {
        transform: translateY(-80px);
    }

    100% {
        transform: translateY(0px);
    }
}

.para-downup-50 {
    animation: para-downup-50 ease-in forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

@keyframes para-downup-50 {
    0% {
        transform: translateY(80px);
    }

    100% {
        transform: translateY(0px);
    }
}

/**************kv*******************/
#kv .land01 {
    max-width: 1400px;
    width: 100%;
    height: 70%;
    bottom: -70%;
    left: -3%;
    position: absolute;
    z-index: 70;
/* ドロップシャドウ上だけ */
    filter: drop-shadow(0 -5px 5px rgba(21, 22, 22, 0.2));
}
#kv .land01 img{
width: 100%;
height: 320px;
}
/* right */
#kv .land02 {
    max-width: 1400px;
    width: 100%;
    height: 60%;
    bottom: -50%;
    right:-3%;
        position: absolute;
    z-index: 60;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
/* right */
#kv .land03 {
    max-width: 1400px;
    width: 100%;
    height: 60%;
    bottom: -40%;
    right: -3%;
    position: absolute;
    z-index: 50;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
/* bule */
#kv .land04 {
    max-width: 1400px;
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: -40%;
    left: -3%;
    z-index: 40;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}

#kv .land05 {
    max-width: 1400px;
    width: 95%;
    height: 60%;
    position: absolute;
    bottom: -38%;
    left: -5%;
    z-index: 30;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}

/*********** 木 ***********/
  /***** left *****/
  /* blue-big */
#kv .tree01 {
min-width: 450px;
    width:36%;
    bottom: -25%;
    left: -8%;

    position: absolute;
    z-index: 51;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
  /* blue-small */
#kv .tree02 {
min-width: 150px;
    width:14%;
    bottom: 0px;
    left: 3%;
    position: absolute;
    z-index: 21;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
  /* white-small */
#kv .tree03 {
    min-width: 150px;
    width: 13%;
    bottom: -5%;
    left: 10%;
    position: absolute;
    z-index: -100;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.3));
}

  /* white-big*/
#kv .tree04 {
    min-width: 390px;
    width: 33%;
    bottom: -90px;
    bottom: -100px;
    left: 10%;
    z-index: 51;
    position: absolute;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}

/*** right ***/
/* white-big */
#kv .tree05 {
    min-width: 350px;
    width: 30%;
    bottom: -150px;
    right: 12%;
    
    position: absolute;
    z-index: 51;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
/* white-small */
#kv .tree06 {
        min-width: 130px;

    width: 11%;
    position: absolute;
    bottom: 0px;
    right: 7%;
    z-index: 1;
    transform: rotate(-3deg);
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
/* orange */
#kv .tree07 {
        min-width: 100px;
    width: 10%;
    bottom: -10%;
    right: 3%;
    position: absolute;
    z-index: 51;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}
/* blue-big */
#kv .tree08 {
    min-width: 270px;
    width: 26%;
    bottom: -20%;
    right: -3%;

    z-index: 1;
    position: absolute;
    filter: drop-shadow(0 -5px 5px rgba(37, 82, 95, 0.2));
}

/* *********************** */
#kv {
    width: 100%;
    height: 800px;
    margin-bottom: 10%;
/* border: 3px solid #000; */
}
/*********kv素材枠***********/
#kv .kv-inner {
    width: 100%;
    height: 600px;
    position: relative;
    /* border: 3px solid #646363; */
}
/***** 背景ストーンテクスチャ―高さ *****/
#kv .kv-bg {
    width: 100%;
    height: 800px;
    top: 40%;
    left: 50%;

    position: absolute;
    z-index: -100;
    transform: translate(-50%, -50%);
    opacity: .5;
    /* border: 3px solid rgb(193, 191, 190); */
}
      .kv-bg img {
        width: 100%;
    height: 100%;
        /* border: 1px solid #da128a; */
      }

/* 背景グラデアニメーション */
#kv .bg-anime {
    width: 100%;
    height: 800px;
    top: 40%;
    left: 50%;

    position: absolute;
    transform: translate(-50%, -50%);
    z-index: -1000;
    overflow: hidden;
    /* border: 3px solid rgb(121, 120, 120); */
}

/* ******************************* */

#kv .sp {
    display: none;
}

/* kvテキスト */
#kv .text-box {
    /* border: 2px solid #f01414; */
    display: flex;
    flex-direction: column;
    align-items: center;

    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #38225f;
    opacity: 0;

    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    animation: opacity-03 4s linear;
    animation-fill-mode: forwards;
    /* border: 1px solid #000; */
}

@keyframes opacity-03 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#kv .kv-ring {
    width: 30%;
    align-items: center;
    /* border: 2px solid #000; */
}

#kv .title {
    margin-bottom: 2%;
}

/***** 背景グラデ *****/
.bg-gradation:nth-child(2) {
    /*2層目　色相変換*/
    box-shadow: 0 0 20vmax 20vmax rgb(167, 4, 182);
    animation: hue 10s 0s linear infinite,
        move1 19s 0s linear infinite;
}

.bg-gradation:nth-child(3) {
    /*3層目　位置調整*/
    box-shadow: 0 0 30vmax 30vmax rgba(233, 236, 236, 0.8);
    animation: hue 15s 0s linear infinite,
        move2 25s 0s linear infinite;
}

.bg-gradation:nth-child(4) {
    /*4層目　位置調整を時間差で*/
    box-shadow: 0 0 30vmax 30vmax rgb(2, 54, 150);
    animation: hue 20s 0s linear infinite,
        move3 15s 0s linear infinite;
    opacity: .2;
}

@keyframes hue {

    /*色相変換アニメーション*/
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes move1 {

    /*位置調整アニメーション*/
    0% {
        top: 0vh;
        left: 50vw;
    }

    25% {
        left: 0vw;
    }

    50% {
        top: 100vh;
    }

    75% {
        left: 100vw;
    }

    100% {
        top: 0vh;
        left: 50vw;
    }
}

@keyframes move2 {

    /*位置調整アニメーションその2*/
    0% {
        top: 50vh;
        left: 100vw;
    }

    25% {
        top: 100vh;
    }

    50% {
        left: 0vw;
    }

    75% {
        top: 0vh;
    }

    100% {
        top: 50vh;
        left: 100vw;
    }
}

@keyframes move3 {
    0% {
        top: 100vh;
        left: 50vw;
    }

    25% {
        left: 100vw;
    }

    50% {
        top: 0vh;
    }

    75% {
        left: 0vw;
    }

    100% {
        top: 100vh;
        left: 50vw;
    }
}

/* *************************************** */
/*--------------------top-about--------------------*/
#top-about .explain .sp{
  display: none;
}  

#top-about {
    padding: 150px 0 ;
    margin-top: 100px;
}
#top-about .wrapper{
    padding: 5%;
    width: 80%;
    /* height: 400px; */
    position: relative;
}
#top-about .section-title {

margin-bottom: 5%;
}
#top-about .explain {
    line-height:300%;
    color: #625a9e;
    font-size: 20px;
    margin-bottom: 8%;
    text-align: center;
}

#top-about .explain span{
    font-size: 24px;
}

/*************** ストーンあしらい ***************/
/* green-square */
#top-about .about-figuer01{
    width: 3%;
    min-width: 30px;
    position: absolute;
    top: -15%;
    left: 13%;
    transform: rotate(-150deg);
}
/* clear-pink */
#top-about .about-figuer02{
    width:4%;
    min-width: 40px;
    position: absolute;
    top: 2%;
    left: 0%;
    transform: rotate(-20deg);
}
/* clear-blue */
#top-about .about-figuer03{
    width: 5%;
    min-width: 45px;
    position: absolute;
    top: -15%;
    left: 4%;
    transform: rotate(10deg);
}
/* green-circle */
#top-about .about-figuer04{
    width: 3%;
    min-width: 25px;
    position: absolute;
    top: -5%;
    left: -5%;
    transform: rotate(-5deg);
}
/* blue-square */
#top-about .about-figuer05{
    width: 4%;
    min-width: 30px;
    position: absolute;
    top: 18%;
    left: -3%;
transform: rotate(-5deg);
}
/* gold-square */
#top-about .about-figuer05-2{
    width: 3%;
    min-width: 30px;
    position: absolute;
    top: 35%;
    left: -5%;
    transform: rotate(-15deg);
}
/* gold-circle */
#top-about .about-figuer05-3{
    width: 4%;
    min-width: 35px;
    position: absolute;
    top: 45%;
    left: -2%;
transform: rotate(-15deg);
}

/********** bottom **********/
/* clear-pink */
#top-about .about-figuer06{
    width: 5%;
    min-width: 40px;
    position: absolute;
    bottom: 15%;
    right: 5%;
transform: rotate(10deg);
}
/* clear-white-black */
#top-about .about-figuer07{
    width: 5%;
    min-width: 40px;
    position: absolute;
    bottom: -3%;
    right: 5%;
    transform: rotate(-20deg);
}
/* green-square */
#top-about .about-figuer08{
    width: 3%;
    min-width: 30px;
    position: absolute;
    bottom: 35%;
    right: 0%;
    transform: rotate(-30deg);
}
/* green-circle */
#top-about .about-figuer09{
    width: 3%;
    min-width: 25px;
    position: absolute;
    bottom: 50%;
    right: -2%;
    transform: rotate(-30deg);
}
/* green-crystal */
#top-about .about-figuer10{
    width: 5%;
    min-width: 35px;
    position: absolute;
    bottom: -0%;
    right: 13%;
transform: rotate(-10deg);
}
/* gold-square */
#top-about .about-figuer11{
    width: 3%;
    min-width: 30px;
    position: absolute;
    bottom: -8%;
    right: 20%;
    transform: rotate(10deg);
}
/* marble-gold-circle */
#top-about .about-figuer12{
    width: 3%;
    min-width: 30px;
    position: absolute;
    bottom: 20%;
    right: 0%;
transform: rotate(-30deg);
}



/*-------------------------top-pickup-------------------------*/
/***** 共通 *****/
#pick-up {
    padding: 100px 0;
    /* background-color: #efe7f7; */
}

#pick-up .ring-content {
}

#pick-up .text-content {
    text-align: center;
    /* border: 1px solid #5b0cbc; */
}

#pick-up .text-content .text {
    text-align: left;
}

#pick-up .more {
    width: 100%;
}
/* text-box内 */
#pick-up h3 {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 500;
    margin-bottom: 10px;
}
#pick-up .material {
    margin-bottom: 10px;
}
#pick-up .text {
    font-size: 0.9rem;
}
/**********/
/*****pick up01*****/
#pick-up .text-content{
    width: 33%;
}

.pick-up01 {
    margin-bottom: 100px;
}

.pickup01-inner {
    margin-bottom: 100px;
    position: relative;
}

.pickup01-inner .text-content {
    position: relative;
    z-index: 10;
    /* border: 1px solid #6b04ba; */
}

/* リング01 */
.pick-up01 .ring-content {
    position: absolute;
    position: relative;
    width: 400px;
    height: 400px;
    /* border: 3px solid #0adf43; */
}

/* 窓枠 */
.ring-content .arch-bg {
    position: absolute;
    z-index: 1;
    bottom: -10px;
    left: 20px;
    background-color: #d2bba0bf;
    border-radius: 200px 200px 0px 0px;
    width: 350px;
    height: 400px;
}

.pick-up01 .deer {
    width: 250px;
    position: absolute;
    z-index: 2;
    bottom: 25px;
    right: 25px;
}

.pick-up01 .flower {
    position: absolute;
    z-index: 3;
    width: 180px;
    bottom: -45px;
    right: 25px;
}
.pick-up01 .ring {
    position: absolute;
    z-index: 4;
    width: 150px;
    bottom: 0;
    left: 45px;
}

/**********pick up02**********/
.pick-up02 {
    margin-bottom: 50px;
}

.pickup02-inner {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
}

.ring-content02 {
    height: 500px;
    /* border: 1px solid #000; */
}

.flower02 {
    position: relative;
    width: 90%;
    margin-left: 20px;
}

.ring02 {
    position: absolute;
    z-index: 2;
    width: 160px;
    top: 35%;
    left: 30%;
}

/* button */
.more_pk3 a:link {
    text-decoration: none;
    color: #f7f6f8;
}

.more_pk3 a:visited {
    text-decoration: none;
    color: #625a9e;
}

.more_pk3 a:hover {
    text-decoration: underline;
    color: #9385f8;
    cursor: pointer;
}

.more_pk3 a:active {
    text-decoration: underline;
    color: #625a9e;
}

/**********pick up03**********/
.pick-up03 {
    /* border: 1px solid #000; */
}

/* pick-up03背景 */
.pick-up03 .pickup03-inner {
    background-image: url(../img/【top】pickup-夜空_03.png);
    box-shadow: 0 0 5px#333;
    width: 65%;
    height: 350px;
    margin-left: 30%;
}

#pick-up .pick-up03 .text-content {
    width: 40%;
    color: #f0f0f0;
}

.ring03 {
    width: 150px;
}

/* button */
.pickup03 .more {
    color: #f0f0f0;
}
#pick-up .pick-up03 .text-content .more {
    color: #f0f0f0;
    border-color: #f0f0f0;
}

@media screen and (max-width:1000px) {
    #pick-up .pick-up03 .pickup03-inner {
        /* width: 75%;
        margin-left: 20%; */
    }
}

/*-------------------------Ranking-------------------------*/

#ranking {
    padding: 100px 0;
    /* border: 1px solid #350ad2; */
}

/* ranking外枠 */
#ranking .ranking-content {
    display: grid;
    /* justify-items: center; */
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(4, minmax(0%, 23%));
    /* grid-template-columns: repeat(4, 1fr); */
    margin-bottom: 8%;
    gap: 0% 2%;
    /* border: 1px solid #000; */
}

/* ranking-box */
#ranking .box {
    position: relative;
    /* border: 1px solid #000; */
}

#ranking .box:hover {
    opacity: 0.7;
    transition: 0.5s;
    cursor: pointer;
}

/*** ranking内 ***/
#ranking .img-wrapper {
    width: 100%;
}

#ranking img {
    width: 100%;
    margin-bottom: 10px;
}

#ranking .box p {
    font-size: 14px
}

/* number */
.ranking-no {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.ring-name {
    font-size: 13px;
    margin-bottom: 5px;
}
.price{
    font-size: 12px;
}


#ranking .n1 {
    background-color: #b29d3d;
}

#ranking .n2 {
    background-color: #38225f;
}

#ranking .n3 {
    background-color: #ad4c34;
}

#ranking .n4 {
    background-color: #b8aca9;
}

/*-------------------------top-item-------------------------*/
#item {
    padding: 100px 0;
}

#item .inner {
    width: 80%;
    margin: 0 auto 50px;
    padding: 5% 8% 10%;
    border: 1.8px solid #54348a;
    border: 1.8px solid #998a45;
}

#item .content {
    display: flex;
    justify-content: space-between;
    gap: 2%;
    /* border: 2px solid #97bd0e; */
}

#item .n1 {
    /* padding: 0 3%; */
}

#item .content:not(:last-child) {
    margin-bottom: 6%;
}
  #item .n2 {
    padding: 0 3%;
  }

#item .sub-title {
    width: 100px;
    line-height: 50px;
    margin-bottom: 0%;
    /* border-bottom: 1px solid #54348a; */
}

/* color */
#item .content .color {
    /* width: 100px; */
    text-align: center;
    /* border: 1px solid #000; */
}

#item .content .color-maru {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 30px;
    margin-bottom: 5px;
}

#item .content .maru01 {
    background-color: #441ed9;
}

#item .content .maru02 {
    background-color: #f07b0e;
}

#item .content .maru03 {
    background-color: #f3d322;
}

#item .content .maru04 {
    background-color: #e4e3e8;
}

#item .content .maru05 {
    background: radial-gradient(at 0 0, #faef92 0, transparent 50%),
    radial-gradient(at 70% 30%, #9579fc 0, transparent 40%),
    radial-gradient(at 70% 50%, #ea99cb), radial-gradient(at 90% 20%, #49024f 0, transparent 40%);
}
/* Category */
#item .item_btn {
    display: block;
}

/* storne */
#item .content .storn {
    text-align: center;
    /* border: 1px solid #3107da; */
}

#item .storn img {
    width: 30px;
}

#item .content h4 a,
#item .content .color a,
#item .content .storn a {
    display: inline-block;
    position: relative;
    line-height: 2;
}

/***** ホバーで下線出現 *****/
#item .content h4 a::after,
#item .content .color a::after,
#item .content .storn a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #625a9e;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: center top;
    /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
    transition: transform 0.3s;
    /*変形の時間*/
}

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

/*-------------------------top-collection-------------------------*/
#collection {
    padding: 100px 0;
}

#collection .content {
    width: 350px;
    height: 400px;
    margin-right: 50px;
    background-size: cover;
    transition: 0.5s;
}

#collection .content:hover {
    opacity: 0.8;
    transition: 0.5s;
    cursor: pointer;
}

#collection li a {
    display: block;
}

#collection .n1 {
    background-image: url(../img/top/collection/【top】collection07_ring_three.png);
}

#collection .n1 .text-box {
    text-align: center;
    margin-top: 270px;

}

#collection .n1 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n1 .text02 {
    font-size: 35px;
    text-shadow: 2px 0px 2px #ffffff;
}

#collection .n2 {
    background-image: url(../img/top/collection/【top】collection01_ring_book.png);
}

#collection .n2 .text-box {
    text-align: center;
    margin-top: 270px;
    color: #f2f2f2;
}

#collection .n2 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n2 .text02 {
    font-size: 35px;
    text-shadow: 3px 0px 3px #333;
}

#collection .n3 {
    background-image: url(../img/top/collection/【top】collection02_necklace.png);
}

#collection .n3 .text-box {
    text-align: center;
    margin-top: 270px;
    color: #f2f2f2;
}

#collection .n3 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n3 .text02 {
    font-size: 35px;
    text-shadow: 3px 0px 3px #333;
}

#collection .n4 {
    background-image: url(../img/top/collection/【top】collection03_earing.png);
}

#collection .n4 .text-box {
    text-align: center;
    margin-top: 270px;
}

#collection .n4 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n4 .text02 {
    font-size: 35px;
    text-shadow: 2px 0px 2px #ffffff;
}

#collection .n5 {
    background-image: url(../img/top/collection/【top】collection05_ring_three.png);
}

#collection .n5 .text-box {
    text-align: center;
    margin-top: 270px;
    color: #f2f2f2;
}

#collection .n5 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n5 .text02 {
    font-size: 35px;
    text-shadow: 3px 0px 3px #333;
}

#collection .n6 {
    background-image: url(../img/top/collection/【top】collection06_ring_flowerpink.png);
}

#collection .n6 .text-box {
    text-align: center;
    margin-top: 270px;
    color: #f2f2f2;
}

#collection .n6 .text {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#collection .n6 .text02 {
    font-size: 35px;
    text-shadow: 3px 0px 3px #333;
}

/* スライドの枠 */
#collection .wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 340px;
    margin-bottom: 100px;
}

/* アニメーション */
#collection .slideshow {
    display: flex;
    -webkit-animation: loop-slide 70s infinite linear 1s both;
    animation: loop-slide 70s infinite linear 1s both;
}

/* webkit */
@-webkit-keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
} 

@keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
} 

/* ホバー時にstop */
#collection .slide-paused:hover .slideshow {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}






/*-------------------------top-shop-------------------------*/
#shop {
    width: 100%;
    background-image: url(../img/【top】shop.png);
    background-repeat: no-repeat;
    height: 500px;
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    background-attachment: fixed;
}

#shop .shop-cover {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51, 0.5);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}


#shop .section-title {
    color: #f8f8fb;
    text-shadow: 0 0 3px #333;
}

#shop .shop-more {
    text-shadow: 0 0 3px #333;
    box-shadow: 0 0 3px #333;
}

/*-------------------------After service-------------------------*/
#after-service {
    padding: 150px 0;
}

#after-service .wrapper {}

/* 親 */
#after-service .content {
    height: 450px;
    margin: 0 auto;
    position: relative;
}

#after-service .box01 {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 45%;
    text-align: center;
    object-fit: cover;
    z-index: 1;
}

/*  */
#after-service .box02 {
    padding: 10%;
    position: absolute;
    top: 5%;
    right: 0%;
    width: 55%;
    text-align: center;
    background-color: rgb(210, 190, 160, 0.7);
}

#after-service .bonx02-inner {
    align-items: center;
}

#after-service .sub-title {
    font-family: "Cambria", "Georgia", sans-serif;
    font-size: 30px;
    margin-bottom: 15px;
}

#after-service .sub-title span {
    font-size: 25px;
}

#after-service .box02 .ruby {
    margin-bottom: 30px;
}

#after-service .box02 .text {
    margin-bottom: 50px;
}

/****** ボタン ******/
#after-service .box02 .more-btn {
    font-family: "Cambria", "Georgia", sans-serif;
    font-size: 18px;
    width: 250px;
    height: 50px;
    border: 1px solid #625a9e;
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    display: block;
    transition: .3s;
}

#after-service .box02 .more-btn:hover {
    border: 1px solid #625a9e;
    background-color: rgb(211, 207, 241, 0.5);
    color: #54348a;
    cursor: pointer;
}

/*-------------------------news-------------------------*/
#news .sp{
display: none;
}
#news {
    padding: 100px 0 200px;
}

/* news枠 */
#news .news-content {
    /* width: %; */
    background-color: rgb(211, 207, 241, 0.5);
    margin: 0 auto;
    padding: 4% 8% 5%;
}

#news .news-title {
    width: 90%;
    margin: 0 auto;
}

#news .inner {
    margin: 0 auto;
    padding: 30px 30px;
    font-weight: 1000;
}

#news .kiji:first-child {
    border-top: 1px solid #625a9e;
}

#news .kiji {
    border-bottom: 1px solid #625a9e;
}

#news .kiji p {
    font-size: 16px;
}


#news .kiji-inner {
    /* 記事箱 */
    color: #625a9e;
    height: 100px;
    padding: 20px;
    display: flex;
    /* 箱内 */
    align-items: center;
    gap: 25px;
}

#news .kiji-inner:hover {
    opacity: 0.7;
    transition: 0.5s;
    cursor: pointer;
}


#news span {
    background-color: #625a9e;
    border-radius: 1px;
    padding: 3px 5px;
}


/* ---------------下層ページ共通---------------
 ----------------------------------------------*/
.bg {
    padding: 200px 0 300px;
    width: 100%;
    background-color: #a8a7aa;
}

.sec-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* margin-top */
.mt1 {
    margin-top: 10px;
}

.mt2 {
    margin-top: 20px;
}

.mt8 {
    margin-top: 8px;
}

.mt10 {
    margin-top: 100px;
}

/* margin-bottom */
.mb1 {
    margin-bottom: 10px;
}

.mb2 {
    margin-bottom: 20px;
}

.mb3 {
    margin-bottom: 30px;
}

.mb5 {
    margin-bottom: 50px;
}

.mb10 {
    margin-bottom: 100px;
}


/**********  **********/
/***** オブジェクト *****/
/*  背景円形グラデ */
section {
    width: 100%;
    padding-top: 0;
}

.section-title {
    color: #625a9e;
    text-shadow: 1px 1px 2px rgba(233, 232, 232, 0.7);
}

/* nav下余白200px */
.mtb10 {
    margin: 200px auto 100px;
}

/***** 背景画像 *****/
.visual {
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
    margin: 0px auto 10%;
    padding: 100px 0;
    /* border: 2px solid #d10b0b; */
}

.section-title-visual {
    text-align: center;
    color: #625a9e;
    text-shadow: 1px 1px 2px rgba(252, 251, 251, 0.7);
/* border: 1px solid #000; */
}

/* 背景画像なし */
.visual02 {
    padding-top: 250px;
}

.sect-lead {
    margin: 0 auto 10%;
    width: 80%;
    text-align: center;
    line-height: 30px;
}
/* ---------------about --------------- 
 ---------------------------------------*/
#about-page {
    padding-bottom: 25%;
}

#about-page .visual {
    position: relative;
    background: radial-gradient(#ebe5de, #e0cfb4);
    overflow: hidden;
}

#about-page .visual-inner {
    position: absolute;
    bottom: 0;
    left: 10%;
    z-index: 0;
}

#about-page .visual-inner img {
    width: 80%;
}

#about-page .section-title-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
}

/***** 01 *****/
#about-page .container {
    margin-bottom: 0;
}

/* R */
#about-page .right {
    width: 50%;
    padding: 5%;
    /* border: 3px solid #000; */
}

#about-page .right h1 {
    font-size: 50px;
    margin-bottom: 3%;
}

#about-page .right h3 {
    font-weight: bold;
    margin-bottom: 3%;
}

#about-page .right p {
    line-height: 30px;
    word-break: break-word;
}

/* L */
#about-page .left {
    width: 50%;
}

#about-page .left img {
    width: 100%;
}

/***** 02 *****/
#about-page .container02 .right {
    width: 50%;
    padding: 50px;
    /* border: 1px solid #000; */
}

#about-page .about_explain {
    margin-bottom: 200px;
}

/***** whats palladiun *****/
.Whats-pd-wrapper {
    padding: 0 2%;
    /* border: 1px solid #000; */
}

.Whats-pd {
    padding: 10% 5%;
    background-color: #dedcf6;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 100%;
    /* border: 1px solid #000; */
}

.Whats-pd .titl {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 30px;
}

.Whats-pd .pd-explain h4 {
    margin-bottom: 5%;
    font-weight: bold;
    /* border: 1px solid #000; */
}

#about-page .pd-explain {
    text-align: center;
}
#about-page .explain {
    text-align: left;
}

#about-page .pd-img {
    width: 450px;
    margin: 50px auto;
    /* border: 5px solid #dd0606; */
}

#about-page .pd-img img {
    margin: 0 auto;
}

/***** 説明 *****/
#about-page .explain-list {
    display: flex;
    justify-content: center;
    align-items: center;
}

#about-page .explain-list li {
    width: 40%;
    height: 220px;
    margin: 2rem 2rem;
    padding: 10px 30px;
    padding: 2% ;
    
    background-color: #f9f9fa;
    border-radius: 10px;
}

/* タイトル */
#about-page .explain-list span {
    font-size: 24px;
    font-weight: 500;
    margin-left: 5px;
}
/* タイトル */
#about-page .explain-list p {
    font-size: 16px;
}

/* No */
#about-page .explain-list li::before {
    content: attr(number);
    font-size: 60px;
    font-family: "Cambria", "Georgia", sans-serif;
    color: #d4d1f4;
    margin: 0 0px 0px 0;
}

/* ---------------item-color --------------- 
 ---------------------------------------------*/
#item-page {
    padding-bottom: 15%;
}

#item-page .color-title {
    text-align: center;
    margin-bottom: 50px;
}

/* サブタイトル */
#item-page .sub_title {
    margin-bottom: 50px;
    border-bottom: 1px solid #625a9e;
    width: 100px;
    line-height: 40px;
}


#item-page .inner {
    margin: 0 auto 50px;
    width: 90%;
}

#item-page .container {
    margin-bottom: 60px;
}

#item-page .content-inner {
    margin-right: 20px;
}

/*  */
#item-page .content {
    width: 50%;
}

#item-page .content:not(:last-child) {
    margin-right: 20px;
}

#item-page.item-photo {
    transition: 0.9s;
}

#item-page .item-photo:hover {
    opacity: 0.7;
    cursor: pointer;
}

#item-page .content img {
    width: 300px;
}


/* ---------------pickup-page --------------- 
 ---------------------------------------------*/
#pickup {
    padding-bottom: 15%;
}

#pickup .container {}

#pickup .container .left {
    /* max-width: 560px; */
    width: 50%;
}

#pickup .container .main-img {
    width: 100%;
    height: auto;
    padding: 100px 50px;
    /* height: 400px; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    /* background-color: rgb(235, 227, 190, .7); */
    background-color: #fffdf4;
}

#pickup .main-img img {
    width: 50%;
}

#pickup .container .thumbnail {
    display: flex;
    align-items: left;
}

#pickup .thumb01,
.thumb02 {
    width: 100px;
    height: 100px;
    padding: 10px;
    /*  */
    background-color: #fffdf4;
}

#pickup .thumb01 {
    margin-right: 20px;
}

#pickup .container .thumbnail img {
    width: auto;
    /* margin-right: 10px; */
}

/***** R *****/
#pickup .container .right {
    /* max-width: 450px; */
    width: 40%;
    margin-left: 50px;
    line-height: 30px;
}

#pickup .container .right .item-name {
    line-height: 38px;
    margin-bottom: 20px;
}

#pickup .container .right p {
    /* font-size: 16px; */
}

/***** price *****/
#pickup .content .item-price01 {
    font-weight: 500;
    font-size: 24px;
}

#pickup .container .right span {
    font-size: 14px;
}

/**********/

#pickup .explain {
    line-height: 20px;
    margin: 40px 0 40px 0;
}

/*****selectbox*****/
.selectbox {
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
}

option {
    text-align: center;
}

/* ▼ */
.selectbox::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #625a9e;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox select {
    appearance: none;
    width: 100%;
    height: 40px;
    padding: 10px;
    border: 1px solid #625a9e;
    border-radius: 1px;
    color: #625a9e;
    font-size: 12px;
    cursor: pointer;
}

select:focus {
    outline: 1px solid #625a9e;
}

/*****在庫状況*****/
#pickup .right .button02 {
    width: 100%;
    height: 60px;
    background-color: #625a9e;
    color: #f0f0f0;
    cursor: pointer;
}

#pickup .right .button02:hover {
    color: #625a9e;
    background-color: rgb(211, 207, 241, 0.5);
    cursor: pointer;
}

/* 素材詳細 */
#pickup .container table {
    width: 100%;
    margin: 60px 0 30px 0;
    font-size: 12px;
    line-height: 48px;
}

#pickup .container tr {
    width: 100%;
    border-bottom: 1px solid #efe9e9;
}

#pickup .container tr:first-child {
    width: 100%;
    border-top: 1px solid #efe9e9;
}

/*-------------------------Ranking-page-------------------------
---------------------------------------------------------------*/
#ranking-page {
    padding-bottom: 15%;
}

#ranking-page .content-inner {
    margin-right: 20px;
}

#ranking-page .content-inner02 {}

/* コンテンツのサイズ設定 */
#ranking-page .box {
    width: 250px;
    position: relative;
}

#ranking-page .box:hover {
    opacity: 0.8;
    cursor: pointer;
}

#ranking-page .box:not(:last-child) {
    margin-right: 20px;
}

#ranking-page .box p {
    font-size: 14px
}

.ranking-no {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

#ranking-page img {
    margin-bottom: 10px;
}

.ring-name {
    margin-bottom: 5px;
}

#ranking-page .price {
    font-size: 10px;
}

#ranking-page .n1 {
    background-color: #b29d3d;
}

#ranking-page .n2 {
    background-color: #38225f;
}

#ranking-page .n3 {
    background-color: #ad4c34;
}

#ranking-page .n4 {
    background-color: #b8aca9;
}

#ranking-page .content {
    padding: 0 20px;
    margin-bottom: 100px;
}

/* ---------------shop-page --------------- 
 ---------------------------------------------*/
#shop-page {
    padding-bottom: 25%;
}
/***** *****/
.section-title-visual {
    text-align: center;
    text-shadow: 1px 1px 2px rgba(252, 251, 251, 0.7);
    /* border: 1px solid #000; */
}

#shop-page .visual {
    width: 100%;
    height: 400px;
    margin: 0 auto 15%;

    padding: 18% 0;
    background-image: url(../img/【shop】top_img04.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* border: 3px solid #ce0e0e; */
}

/*****  *****/
#shop-page .wrapper {
    padding: 0 10%;
}

#shop-page h3 {
    font-size: 20px;
}

#shop-page .ttl_sp {
    font-size: 40px;
    color: #625a9e;
    margin: 100px 300px;
    text-align: center;
}

/* -----タイトル下----- */

/* サブタイトル */
#shop-page .shop-subttl {
    font-family:"游明朝", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 50px;
}

/* コンテンツ余白 */
#shop-page .container01:not(:last-child) {
 margin-bottom:15% ;   
}

#shop-page .column01 {
    width: 50%;
    margin-right: 30px;
    overflow: hidden;
}

/* mapの色 */
#shop-page .column01 {
    height: 400px;
}

#shop-page .column01 iframe {
    filter: grayscale(1);
    opacity: 0.7;
    vertical-align: bottom;
}

/**********/

#shop-page .column01 img {
    width: 100%;
}

#shop-page .column02 {
    width: 50%;
    padding: 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#shop-page .item_ttl {
    text-align: center;
    margin-left: 10px;
}

#shop-page .explain {
    color: #625a9e;
    font-weight: bold;
    padding: 16px;
    line-height: 30px;
}

/* ---------------After service-page --------------- 
 ----------------------------------------------------*/
#service-page {
    padding-bottom: 25%;
}

#service-page .visual {
    position: relative;
    background: radial-gradient(#f1f4f5, #ccdadf);
}

#service-page .visual-inner {
    position: absolute;
    top: 0;
    left: 15%;
    z-index: 0;
    /* border: 1px solid #be0b0b; */
}

#service-page .section-title-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    /* border: 2px solid #000000; */
}
/**********  **********/

#service-page .sect-lead {
    margin: 0 auto 150px;
    width: 700px;
    text-align: center;
}

/*  */
#service-page .service01 {
    width: 90%;
    height: 400px;
    background-image: url(../img/【After-service】cleaning.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto 150px;
}

#service-page .service02 {
    width: 90%;
    height: 400px;
    background-image: url(../img/service/【After-service】repaier.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto 150px;
}

#service-page .service01 .inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, transparent 0, #fff 100%);
    padding: 100px 0 0 100px;
}

#service-page .service02 .inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0, #fff 100%);
    text-align: left;
    padding: 10% 5% 10% 0;
}

#service-page .service02 .content {
    text-align: left;
    padding: 0 0 0 60%;
}


/* ご利用方法 */
#service-page .container {
        display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid #000; */
}


#service-page .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid #000; */
}

#service-page .button {
    width: 50%;
}

#service-page .riserve-info {
    width: 100%;
}

#service-page .attention {
    font-size: 12px;
}

/********************/
/*view more */
#service-page .button {
    width: 600px;
}

#service-page .button .riserve-info p {
    width: 600px;
    margin-left: 50px;
}





/* ----------------reserve_page-------------- 
 ---------------------------------------------*/
#reserve-page {
    padding-bottom: 25%;
}

/*問い合わせフォームデザインcss↓*/
.box_con {
    max-width: 900px;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .box_con {
        width: 95%;
    }
}

.box_con form {
    width: 100%;
}

.box_con form table {
    width: 100%;
}

.box_con form table tr {
    position: relative;
}

/* 下点線 */
.box_con form table tr:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    border-bottom: dotted #cdcdcd 1px;
}

/* 入力の箱 */
.box_con form table tr th {
    width: 30%;
    font-weight: normal;
    padding: 1em .5em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    .box_con form table tr th {
        text-align: center;
        width: 100%;
        display: block;
        background: #dfddf0;
        /*問い合わせフォームデザインcss↓*/
        padding: .8em .2em;
        /* color: #625a9e; */
        color: rgb(118, 118, 118);
    }
}

.box_con form table tr th span {
    background: #cd6f55;
    padding: 0 .3em;
    color: #fff;
    margin-left: .5em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.box_con form table tr td {
    padding: 1em .5em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    .box_con form table tr td {
        padding: 1.5em .5em;
        display: block;
        width: 100%;
    }
}

.box_con form table tr .box_br {
    display: block;
}

.box_con form table tr select {
    border: 1px solid rgb(118, 118, 118);
}

.box_con form table tr label input {
    cursor: pointer;
    display: none;
    vertical-align: middle;
}

.box_con form table tr .radio02-input+label {
    padding-left: 23px;
    margin-right: 20px;
    position: relative;
}

.box_con form table tr .radio02-input+label:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box_con form table tr .radio02-input:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #857bd5;
    border-radius: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box_con form table tr select,
.box_con form table tr input,
.box_con form table tr textarea {
    width: 100%;
    height: 3em;
    padding: .5em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.box_con form table tr textarea {
    height: 10em;
}

/*プライバシーのデザインcss↓*/
.con_pri {
    max-width: 700px;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .con_pri {
        width: 95%;
    }
}

.con_pri .box_pri {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #cdcdcd;
    background: #f7f7f7;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px 55px;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri {
        margin-top: 4%;
        padding: 3%;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .con_pri .box_pri {
        padding: 4%;
    }
}

.con_pri .box_pri .box_tori {
    text-align: left;
    margin-top: 40px;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri .box_tori {
        margin-top: 4%;
    }
}

.con_pri .box_pri .box_tori h4 {
    font-weight: normal;
    margin-bottom: 30px;
    font-size: 150%;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri .box_tori h4 {
        margin-bottom: 4%;
    }
}

.con_pri .box_pri .box_tori .txt {
    padding: 0 20px;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri .box_tori .txt {
        padding: 0;
    }
}

.con_pri .box_pri .box_num {
    margin-top: 30px;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri .box_num {
        margin-top: 5%;
    }
}

.con_pri .box_pri .box_num h4 {
    font-weight: normal;
    font-size: 113%;
}

.con_pri .box_pri .box_num .txt {
    padding: 10px 0 0 20px;
}

@media only screen and (max-width: 768px) {
    .con_pri .box_pri .box_num .txt {
        padding: 3% 0 0 3%;
    }
}

.box_check {
    text-align: center;
    margin: 1em auto;
}

.box_check label {
    display: inline-block;
}

.box_check label span {
    margin-left: .3em;
}

.btn {
    text-align: center;
}

.btn input {
    display: inline-block;
    background: #eee;
    padding: .5em 4em;
    color: rgb(118, 118, 118);
    text-decoration: none;
    cursor: pointer;
    border: none;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.btn input:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    cursor: pointer;
}

/* ----------------news-page-------------- 
 -----------------------------------------*/
#news-page {
    padding-bottom: 25%;
}

#news-page .container {
    display: block;
    align-items: center;
    margin-bottom: 0;
    /* -------共通のcontainerのマージンボトムリセット*/

}

.news-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

#news-page .date {
    margin-bottom: 50px;
}

#news-page .news-img {
    margin-bottom: 30px;
}

#news-page .text {
    line-height: 35px;
    margin: 0 auto;
    width: 90%;
    margin-bottom: 50px;
}

/* ----------------cllection-page-------------- 
 -----------------------------------------*/
#collection-page  .sect-lead .sp{
display: none;
}

#collection-page {
    padding-bottom: 25%;
}

#collection-page .visual {
    height: 550px;
    padding: 0 0 1%;
    background: radial-gradient(#9c9c9c, #17151f);
    overflow: hidden;
}

#collection-page .visual-item-wrapper {
    padding: 65px 0 0;
    width: 100%;
    height: 500px;
    margin:0 auto;
    display: grid;
      gap: 3% 2%;
grid-template-columns: repeat(22, 4%);     
grid-template-rows: repeat(16, 4%); 
}
/* dress */
#collection-page .item-01 {
grid-column: 1/ 5;
grid-row: 1 / 12;
/* border: 3px solid #09c528; */
}
/* earring */
#collection-page .item-02 {
grid-column: 6 / 10;
grid-row: 2 / 13;
}
/* pink-flower */
#collection-page .item-03 {
    grid-column: 11 / 14;
    grid-row: 2 / 9;
}
/* book */
#collection-page .item-04 {
    grid-column: 14 / 20;
    grid-row: 4 / 17;
    /* border: 3px solid #e9d30d; */
}
/* flower */
#collection-page .item-05 {
    grid-column: 4 / 8;
    grid-row: 8 / 16;
    /* border: 3px solid #c50909; */
}
/* stone */
#collection-page .item-06 {
grid-column: 10 / 14;
grid-row: 9 / 16;
/* border: 3px solid #e90d95; */
}
/*  */
#collection-page .visual-item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px 8px #292929;
}

#collection-page .visual-item {
width: 100%;
}

/********** section-title ***********/
#collection-page .section-title-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    color: #f0f0f0;
}

#collection-page .sect-lead {
    margin-bottom: 15%;
    /* border: 1px solid #000; */
}

/*************** メイン ****************/
/**************************************/
/* 背景 */
#collection-page .container01-wrapper  {
    height: 90%;
    width: 95%;
    margin-bottom: 25%;
    background-image: url(../img/collection/collection-clistal.jpg);
    position: relative;
    /* border: 10px solid #00ca2c; */
}
/* 02 */
#collection-page .container02-wrapper {
    height: 90%;
    width: 95%;
    background-image: url(../img/collection/collection-mozaiku.jpg);
    margin-left: 5%;
    position: relative;
}

/* 背景高さ */
#collection-page .container01,
#collection-page .container02 {
    height: 700px;
    position: relative;
    display: flex;
    justify-content: space-between;
    /* border: 2px solid #1dc40e; */
}

/* タイトル */
#collection-page .container01-wrapper  .title{
    position: absolute;
    top: -2%;
    left: 5%;
    z-index: 100;
    color: #f2bdbd;
    text-shadow: 2px 2px 5px rgba(252, 251, 251, 0.7);
/* border: 3px solid #ef0b0b; */
}
#collection-page .container02-wrapper  .title{
    position: absolute;
    top: -2%;
    right: 5%;
    z-index: 100;
    color: #000;
    text-shadow: 2px 2px 5px rgba(252, 251, 251, 0.7);
/* border: 3px solid #ef0b0b; */
}

#collection-page .container01-wrapper  .title h2,
#collection-page .container02-wrapper  .title h2{
    font-size: 110px;
    font-family: 'Times New Roman', Times, serif;
}


/*  */
#collection-page .text-visual {
    width: 100%;
    height: 250px;
    margin-bottom: 5%;
    /* border: 1px solid #000; */
}

#collection-page .sub_title {
    font-size: 1.4rem;
    margin-bottom: 3%;
    font-weight: bold;
    /* border: 1px solid #000; */
}

#collection-page p {
    margin-bottom: 3%;
}

#collection-page .button {
    color: #625a9e;
    width: 100%;
}

/*************** 01 ***************/
/* R */
/***** R  text-box *****/
#collection-page .container01 .right {
    position: relative;
    position: absolute;
    top: 30%;
    right: 3%;
    z-index: 1;
    background-color: #faf1ee;
    width: 45%;
    height: 650px;
    padding: 10% 5% 8%;
    box-shadow: 3px 3px 5px #b3b3b3;
    /* border: 2px solid #e4510d; */
}

/* ko01 */
#collection-page .container01 .item-bangle {
    position: absolute;
    width: 70%;
    top: -20%;
    right: 0%;
    z-index: 1;
}

/* ko02 */
#collection-page .container01 .item-ring {
    position: absolute;
    top: -5%;
    left: 8%;
    z-index: 1;
    width: 30%;
}
/***** L *****/
/*　画像枠 */
#collection-page .container01 .left {
    width: 40%;
    position: relative;
    /* border: 2px solid #4e0de4; */
}

/* front */
#collection-page .container01 .item-image {
    position: absolute;
    width: 90%;
    top: 10%;
    left: 30%;
    z-index: 3;
    box-shadow: 2px 2px 4px gray;
}

/* back */
#collection-page .container01 .item-bg {
    position: absolute;
    top: 25%;
    left: 10%;
    z-index: 2;
    opacity: .4;
    box-shadow: 2px 2px 4px gray;
}


/*************** 02 ***************/
/* l */
/* oya  text*/
#collection-page .container02 .left {
    position: relative;
    /* position: absolute; */
    top: 30%;
    left: 3%;
    z-index: 1;
    background-color: #eeedee;
    width: 45%;
    height: 650px;
    padding: 10% 5% 8%;
    box-shadow: 2px 2px 4px gray;
    /* border: 2px solid #e4510d; */
}

/* ko01 */
#collection-page .container02 .item-bangle {
    position: absolute;
    top: -20%;
    left: 10%;
    z-index: 1;
    width: 60%;
}

/***** R *****/
/*　画像枠 */
#collection-page .container02 .right {
    width: 40%;
    position: relative;
    /* border: 2px solid #4e0de4; */
}

/* front */
#collection-page .container02 .item-image {
    position: absolute;
    width: 90%;
    top: 10%;
    right: 18%;
    z-index: 3;
    box-shadow: 2px 2px 4px gray;
}

/* back */
#collection-page .container02 .item-bg {
    position: absolute;
    top: 25%;
    right: 0%;
    z-index: 2;
    opacity: .8;
    box-shadow: 2px 2px 4px gray;
}


/* ----------------privacy-------------- 
 ---------------------------------------------*/
.privacy {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    padding: 150px 50px;
}

.privacy .title_pv {
    font-family: "Cambria", "Georgia", sans-serif;
    color: #625a9e;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin: 150px 0 100px;
}

.privacy .inner_pv {
    background-color: #f0f0f0;
    width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 50px;

}

.privacy .subtitle_pv {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
}

.privacy .explain_pv {
    font-size: 12px;
    margin-bottom: 30px;
}

.privacy .explain_title_pv {
    font-size: 12px;

}