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

* {
	margin:0;
	padding:0;
  /*outline: 1px solid #eb5757;*/
}



body {
  font-family: noto-sans-cjk-jp, sans-serif;
  color: #2B2B2B;
  background-image: url(../image/back.jpg);
  background-size: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.back {
  position:fixed;
  width:100vw;
  height:100vh;
  object-fit: cover;
  z-index: -1;
}

/* --------------- main --------------- */
.main {
  position: relative;
  width:100%;
}

.main-img-1 {
  width:100%;
  height:860px;
  object-fit: cover;
}
@media screen and (max-width:1000px) {
	.main-img-1 { display:none; }
}

.main-img-1-sp {
  display:none;
}
@media screen and (max-width:1000px) {
	.main-img-1-sp { 
    display:block;
    width:100%;
    height:1000px;
    object-fit: cover;
    object-position: 50% top;
   }
}
@media screen and (max-width:757px) {
	.main-img-1-sp { 
    display:block;
    width:100%;
    height:750px;
    object-fit: cover;
    object-position: 50% top;
   }
}

.main-img-2 {
  width:100%;
  height:600px;
  object-fit: cover;
}
@media screen and (max-width:1030px) {
	.main-img-2 { display:none; }
}

.main-img-2-sp {
  display:none;
}
@media screen and (max-width:1030px) {
	.main-img-2-sp {
    display:block; 
    width:100%;
    height:700px;
    object-fit: cover;
    object-position: right top;
   }
}
@media screen and (max-width:757px) {
	.main-img-2-sp {
    display:block; 
    width:100%;
    height:300px;
    object-fit: cover;
    object-position: 50% 50%;
   }
}

.main-img-3 {
  width:100%;
  height:600px;
  object-fit: cover;
}
@media screen and (max-width:1000px) {
	.main-img-3 { display:none; }
}

.main-img-3-sp {
  display:none;
}
@media screen and (max-width:1000px) {
	.main-img-3-sp { 
    display:block;
    width:100%;
    height:600px;
    object-fit: cover;
    object-position: left 50%;
   }
}
@media screen and (max-width:757px) {
	.main-img-3-sp { 
    display:block;
    width:100%;
    height:400px;
    object-fit: cover;
    object-position: 50% 50%;
   }
}


.main-copy {
  position:absolute;
  top:220px;
  right:70%;
  left:0;
  margin:auto;
}
@media screen and (max-width:1000px) {
	.main-copy { top:580px; right:70%; }
}
@media screen and (max-width:757px) {
	.main-copy { top:450px; right:0; }
}

.main-copy-moji {
  color:#BC3610;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:59px;
  line-height: 100px;
  letter-spacing: 8px;
  height:1000px;
  font-weight: bold;

  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  right:0;
  left:0;
  margin:auto;
}
@media screen and (max-width:1000px) {
	.main-copy-moji { font-size:45px; line-height:80px; letter-spacing:0px; }
}
@media screen and (max-width:757px) {
	.main-copy-moji { height:auto; width:100%; writing-mode:lr-tb; text-align: center; font-size:30px; line-height:50px; letter-spacing:0px; }
}

.kaigyou {
  display: block;
  margin-top:44%;
}
@media screen and (max-width:1000px) {
	.kaigyou { margin-top:28.5%; }
}
@media screen and (max-width:757px) {
	.kaigyou { margin-top:0; }
}

.iro {
  color: #fff;
}
@media screen and (max-width:1000px) {
	.iro { margin-top:5px; }
}
@media screen and (max-width:757px) {
	.iro { color:#BC3610; }
}


.main-point {
  position:absolute;
  top:35%;
  right:0;
  left:80%;
  margin:auto;
}
@media screen and (max-width:1000px) {
	.main-point { top:40%; left:auto; right:30px; }
}
@media screen and (max-width:757px) {
	.main-point { top:54%; left:0; right:0; margin:auto; text-align: center; width:130px; }
}


.main-point-moji {
  color:#BC3610;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:27px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-bottom:15px;
  border-bottom: solid 2px #BC3610;
  padding-bottom:15px;
  padding-left:10px;
  width:200px;
}
@media screen and (max-width:757px) {
	.main-point-moji { text-align: center; border-bottom: solid 1.5px #BC3610; font-size:16px; width:auto; padding-left:0px; margin-bottom:5px; padding-bottom:5px; }
}

.main-message {
  position:absolute;
  top:20%;
  right:0;
  left:0;
  margin:auto;
  z-index: 1;
}

.main-message-moji {
  color:#fff;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:30px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-bottom:15px;
  text-align: center;
  line-height: 90px;
}
@media screen and (max-width:757px) {
	.main-message-moji { font-size:20px; letter-spacing:1px; line-height:60px; }
}




/* --------------- point --------------- */
.point {
  position: relative;
  background-color: #f0eeeb;
  margin:0;
  padding-top:80px;
  padding-bottom:80px;
}
@media screen and (max-width:757px) {
	.point { padding-top:10px; padding-bottom:100px; }
}

.container {
  width: 80%;
  margin: 0 auto;
}

.flex {
  display: flex;
  align-items: center;
  margin-top:50px;
  margin-bottom:100px;
}
@media screen and (max-width:1000px) {
	.flex { display:block; margin-top:30px; margin-bottom:50px; }
}
@media screen and (max-width:757px) {
	.flex { display:block; margin-top:80px; margin-bottom:50px; }
}

.flex:nth-child(odd) {
  flex-flow: row-reverse;
}

.flex:nth-child(odd) .img-area {
  margin-right: calc(50% - 50vw);
  margin-left: 5vw;
}
@media screen and (max-width:1000px) {
	.flex:nth-child(odd) .img-area { margin-left: 0vw; }
}
@media screen and (max-width:757px) {
	.flex:nth-child(odd) .img-area { margin-left: 0vw; }
}

.flex:nth-child(even) .img-area {
  margin-left: calc(50% - 50vw);
  margin-right: 5vw;
}
@media screen and (max-width:1000px) {
	.flex:nth-child(even) .img-area { margin-right: 0vw; }
}
@media screen and (max-width:757px) {
	.flex:nth-child(even) .img-area { margin-right: 0vw; }
}

.flex:nth-child(odd) .img-area img {
  border-radius: 999px 0 0 999px;
}

.flex:nth-child(even) .img-area img {
  border-radius: 0 999px 999px 0;
}

.img-area {
  width: 55vw;
  z-index: 2;
}
@media screen and (max-width:1000px) {
	.img-area { width: 90vw; margin-bottom:30px; }
}
@media screen and (max-width:757px) {
	.img-area { width: 90vw; margin-bottom:20px; }
}


.img-area img {
  height:500px;
  width:100%;
  object-fit: cover;
}
@media screen and (max-width:1000px) {
	.img-area img { height:300px; }
}
@media screen and (max-width:757px) {
	.img-area img { height:200px; }
}


.text-area {
  flex: 1;
  width: 35vw;
  min-width: 480px;
}
@media screen and (max-width:1000px) {
	.text-area { width: 100%; min-width:100%; }
}
@media screen and (max-width:757px) {
	.text-area { width: 100%; min-width:100%; margin-top:-40px; }
}

.text-area img {
  display: inline-block;
  width:110px;
  margin-right:5px;
  margin-left:5px;
}
@media screen and (max-width:757px) {
	.text-area img { width:70px; }
}

.point-moji-1 {
  display: inline-block;
  color:#BC3610;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:41px;
  letter-spacing: 3px;
  line-height: 60px;
  font-weight: bold;
  margin-bottom:30px;
}
@media screen and (max-width:757px) {
	.point-moji-1 { font-size:25px; line-height:40px; margin-bottom:20px; }
}

.point-moji-2 {
  color:#BC3610;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  line-height: 36px;
}
@media screen and (max-width:757px) {
	.point-moji-2 { font-size:15px; line-height: 32px; }
}

.point-kona-1 {
  position: absolute;
  top: -5%;
  right:0;
  left:0;
  margin:auto;
  width:500px;
  mix-blend-mode:multiply;
  transform: rotate(-30deg);
}
@media screen and (max-width:1030px) {
	.point-kona-1 { width:250px; top:-3%; }
}
_::-webkit-full-page-media, _:future, :root .point-kona-1 {
	display:none;
}

.point-kona-2 {
  position: absolute;
  top: 20%;
  right:0;
  left:150px;
  margin:auto;
  width:500px;
  mix-blend-mode:multiply;
  transform: rotate(30deg);
}
@media screen and (max-width:1030px) {
	.point-kona-2 { display: none; }
}

.point-kona-3 {
  position: absolute;
  top: 43%;
  right:150px;
  left:0;
  margin:auto;
  width:500px;
  mix-blend-mode:multiply;
  transform: rotate(-30deg);
}
@media screen and (max-width:1030px) {
	.point-kona-3 { display: none; }
}

.point-kona-4 {
  position: absolute;
  top: 65%;
  right:0;
  left:150px;
  margin:auto;
  width:500px;
  mix-blend-mode:multiply;
  transform: rotate(30deg);
}
@media screen and (max-width:1030px) {
	.point-kona-4 { display: none; }
}

.point-kona-5 {
  position: absolute;
  top:89%;
  right:150px;
  left:0;
  margin:auto;
  width:500px;
  mix-blend-mode:multiply;
  transform: rotate(-30deg);
}
@media screen and (max-width:1030px) {
	.point-kona-5 { width:250px;  right:0px; top:95%; }
}


/* --------------- slide --------------- */
.slide {
  background-color: #f0eeeb;
  margin:0;
  padding-bottom:80px;
}
@media screen and (max-width:757px) {
	.slide { padding-bottom:50px; }
}

.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}



/* --------------- shop --------------- */
.shop {
  background-color: #f0eeeb;
  margin:0;
  padding-top:100px;
  padding-bottom:150px;
  text-align: center;
}
@media screen and (max-width:757px) {
	.shop { padding-top:50px; padding-bottom:80px; }
}

.shop-moji-1 {
  color:#BC3610;
  font-family: poppins, sans-serif;
  font-size:68px;
  letter-spacing: 3px;
  font-weight: bold;
  text-align: center;
  margin-bottom:30px;
}
@media screen and (max-width:757px) {
	.shop-moji-1 { font-size:50px; margin-bottom:0px; }
}

.shop-hako {
  display: inline-block;
  width:380px;
  text-align: justify;
  margin:40px;
}
@media screen and (max-width:1030px) {
	.shop-hako { width:38%; margin:3%; }
}
@media screen and (max-width:757px) {
	.shop-hako { width:80%; margin:10%; }
}

.shop-img {
  width:100%;
}

.shop-moji-2 {
  color:#BC3610;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:25px;
  line-height: 36px;
  font-weight: bold;
  margin-top:30px;
  margin-bottom:10px;
}
@media screen and (max-width:757px) {
	.shop-moji-2 { font-size:22px; margin-top:20px; margin-bottom:5px; }
}

.shop-moji-3 {
  color:#BC3610;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  line-height: 32px;
}
@media screen and (max-width:757px) {
	.shop-moji-3 { font-size:15px; line-height: 32px; }
}

.shop-moji-4 {
  color:#BC3610;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:28px;
  font-weight: bold;
  margin-top:10px;
}
@media screen and (max-width:757px) {
	.shop-moji-4 { margin-top:5px; font-size:24px; }
}
.shop-moji-4 span {
  font-size:13px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: normal;
  margin-left: 5px;
}

/* ---ボタン-----  */
.policy-btn {
  margin-top:30px;
}

.sample_button12 {
  display: inline-block;
  width: 100%;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:17px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  border:solid 1px #BC3610;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #BC3610;
}
.sample_button12:hover,
.sample_button12:hover span {
  color:#fff;
}
.sample_button12:hover::before {
  transform: scale(1) translate(-50%,-50%);
  color:#fff;
}
.sample_button12::before {
  content: '';
  width: 120%;
  padding-top: 120%;
  border-radius: 100%;
  background-color:#BC3610;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform-origin: top left;
  transform: scale(0) translate(-50%,-50%);
  transition: inherit;
}




/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}