@charset "utf-8";

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

a {
  text-decoration: none;
}

br.pc {
  display: none;
}

/* ---------------------トップページ----------------------- */


@media screen and (max-width:430px) {
  #slider_pc{
    display: none;
  }
  #slider_mo {
    display: block;
  }
  #slider_pc img,
  #slider_pc video,  
  #slider_mo img,
  #slider_mo video {
    width: 100%;
  }
  #slider_pc,
  #slider_mo {
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #000;
  }
  .blog .visual img#pc {
    display: none;
  }
  .ending section {
    font-size: 1.2rem;
  }

  .ending .review p {
    margin-bottom: 15px;
    }

}

/* ---------nav---------- */
nav {
  display: none;
}

  /* ---------visual--------
  -------------------------- */

  #slider_pc img,  
  #slider_pc video,  
  #slider_mo img,
  #slider_mo video {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    padding: 0;
  }

div.visual_main {
    text-align: center;
    background-color: #000;
  }

  #slider_pc,
  #slider_mo {
    background-color: #fff;
  }


  /* ---------introduction--------
  -------------------------- */

  h1 {
    text-align: center;
    margin: 35px auto 40px auto;
    line-height: 1.5;
    width: 95%;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6rem;
  }

  h1 span.copy {
    color: #AD6E98;
    font-weight: 600;
    font-size: 1.7rem;
  }

  h1 span.copy span {
    color: #C8C2C6;
  }

  #introduction p {
    font-family: serif;
    width: 93%;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
  }

    /* ---------store_box--------
  -------------------------- */

  h2 {
    text-align: center;
    padding: 80px 0 20px 0;
    text-transform: uppercase;
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: 700;
  }

  .store_box img {
    margin: 0 auto;
    width: 80%;
    box-shadow: 5px 5px 5px #aaa;
  }


  /* ---------information--------
-------------------------- */

  ul.info {
    font-family: serif;
    list-style-type: none;
    text-align: start;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
  
  ul.info li {
    border: 1px solid #C8C2C6;
    padding: 20px;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  ul.info span {
    font-weight: bold;
  }

  ul.info a {
    display: block;
    text-decoration: none;
  }

  ul.info li:hover {
    background-color: #C8C2C6;
    color: #fff;
  }

  /* featherlight */

  .featherlight-sample {
    display: none;
  }

  .featherlight-sample img {
    margin: 0 auto;
    width: 90%;
  }

  .featherlight-sample h3 {
    font-family: serif;
    text-align: start;
    padding-bottom: 10px;
    border-bottom: 1px solid #AD6E98;
  }

  .featherlight-sample p {
    font-family: serif;
    padding-top: 30px;
  }

  .featherlight-sample a {
    font-size: 1.15rem;
    font-weight: bold;
    color: #AD6E98;
    text-decoration: underline;
  }

      /* ---------blog--------
  -------------------------- */

  #blog img {
    margin: 0 auto;
    width: 80%;
    box-shadow: 5px 5px 5px #aaa;
  }
  #blog {
    text-align: center;
  }
  #blog p {
    
    text-align: center;
    padding: 10px;
    font-size: 1rem;
    font-family: "Shippori Mincho", serif;
  }

    /* ---------contact--------
  -------------------------- */

  #blog img {
    margin: 0 auto;
  }
  .contact {
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    text-decoration: none;
  }

  .contact_address {
    width: 85%;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-top: 10px;
    font-family: serif;
    font-size: 1rem;
  }

  .twitter-timeline {
    width: 90%;
    margin: 0 auto;
  }

  .contact .greeting {
    font-family: "Shippori Mincho", serif;
    font-size: 1.4rem;
    margin: 0 auto;
    text-align: center;
    padding: 100px 0 70px 0;
    white-space: nowrap;
  }

  .contact .greeting a {
    text-decoration: none;
  }

  .schedule {
    margin: 0 auto;
    max-width: 500px;
    font-family: "Noto Sans JP", serif;
    padding-bottom: 20px;
    font-size: 1.2rem;
  }

  h4 {
    font-size: 1.3rem;
    font-family: "Noto Sans JP", serif;
  }
    
  .contact span {
      color:#AD6E98;
      font-weight: 600;
    }

    .contact a {
      display: block;
    }

    .contact .form {
      background-color: #000;
      width: 250px;
      line-height: 2.7;
      font-size: 1.2rem;
      color: #fff;
      margin: 0 auto;
    }

    .contact .twitter-follow-button {
      display: block;
      margin: 0 auto;
      margin-top: 20px;
    }

/* ---------footer-------- */

  footer {
    background-color: #C8C2C6;
    padding: 30px;
    position: relative;
  }

  ul.link {
    list-style-type: none;
    padding: 0;
  }

  .link li {
    font-family:serif;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .link a {
    text-decoration: none
  }

  small {
    display: block;
    text-align: center;
    font-size: 0.6rem;
    color: #fff;
  }

  #cup {
    position: absolute;
    bottom: 235px;
    right: 20px;
  }


  /* @@@@@@@@@@@------------MediaQuery--------@@@@@@@@@@@@@@@ */

@media screen and (min-width:431px) {

  br.sp {
    display: none;
  }

  body.cosmic div.linkbox {
    display: flex;
    justify-content: center;
  }

  .cosmic .linkbox img:nth-child(1) {
    margin-bottom: 0;
    margin-right: 30px;
  }
      /* ---------header--------
  -------------------------- */

  nav {
    display: block;
  }
  nav ul {
    background-color: #000;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: space-evenly;
  }
  nav li {
    list-style-type: none;
    color: #fff;
  }
  nav a {
    display: block;
    text-decoration: none;
    line-height: 60px;
    font-family: "Shippori Mincho", serif;;
  }

  nav a:hover {
    color: #C8C2C6;
  }

  #slider_mo{
    display: none;
  }

  #slider_pc,
  #slider_mo {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .twitter-follow-button {
    margin-top: 20px;
  }

      /* ---------introduction--------
  -------------------------- */

  h1 {
    margin: 0 auto 70px;
    font-size: 2.3rem;
  }

  h1 span.copy {
    color: #AD6E98;
    font-weight: 600;
    font-size: 2.3rem;
  }

  #introduction p {
    width: 75%;
    font-size: 1.3rem;
    line-height: 1.8;
  }

        /* ---------store_box--------
  -------------------------- */

  .store_box img {
    width: 400px;
  }

      /* ---------information--------
  -------------------------- */

  h2 {
    padding: 100px 0 20px 0;
    font-size: 2rem;
  }

  ul.info {
    padding: 0;
    margin: 0 auto;
  }

      /* ---------blog--------
  -------------------------- */

  #blog img {
    width: 400px;
  }

  #blog p {
    font-size: 1.3rem;
    color: #000;
  }

    /* ---------contact--------
  -------------------------- */

  .twitter-timeline {
    width: 60%;
  }

  .contact .greeting {
    text-align: center;
    font-size: 1.8rem;
    margin: 70px 0 50px 0;

  }

  .contact .greeting a {
    text-decoration: none;

  }

  .contact_address {
    font-size: 1.3rem;
  }

  .blog .visual img#mo {
    display: none;
  }
  
  .blog .visual img {
    width: 100%;
  }

  body.ending section {
    font-size: 1.3rem;
  }

  body.cosmic section {
    font-size: 1.3rem;
  }

  body.ending video,
  body.cosmic video {
    width: 80% !important;
  }

  #close-video {
    font-size: 5rem;
    top: -60px;
    right: 30px;
  }

body.sos figure img {
  max-width: 1000px;
  height: auto;
  margin: 50px 0 0 30px;
}

body.sos figcaption {
  padding-left: 30px;
}

br.pc {
  display: block;
}

.message{
  padding: 50px 30px 10px 30px;
}

}

@media screen and (min-width:1100px) {
  h1 {
    margin-top: 100px;
  }

}


/* ---------------------ブログ----------------------- */

/* -----モーダル----- */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  position: fixed;
  top: 10%; 
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
  text-align: center;
}
.modal h3 {
  font-weight: normal;
  font-size: 1rem;
  margin-bottom: 5px;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: normal;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* ----記事本体----- */

.toTop {
  display: block;
  margin: 0 auto;
  background-color: #301813;
  max-width: 300px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}

.blog .visual img {
  width: 100%;
}

.blog .visual {
  margin-bottom: 30px;
}

.blog article {
  border: 1px solid #C8C2C6;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 10px 10px 10px;
  margin-top: 30px;
}

.blog article img {
  width: 100%;
  margin-top: 30px;
}

.blog h1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin:0;
  text-align: start;
  font-weight: bold;
  width: 100%;
  font-size: 1.5rem;
  white-space: nowrap
}

.blog .title{
  margin: 30px 0 10px 0;
  border-bottom: 2px solid #AD6E98;
}

.blog section {
  text-align: start;
  margin-top: 30px;
  font-size: 1.1rem;
}

.blog .bold {
  font-weight: bold;
}

.link_box_1 .back {
  display: none;
}

.link_box a,
.link_box_1 a {
  display: block;
}

.link_box {
  padding: 50px 60px;
  margin-bottom: 100px;
  text-align: end;
  display: flex;
  justify-content: space-between;
}

.link_box_1 {
  padding: 50px 60px;
  margin-bottom: 100px;
  display: flex;
  justify-content: flex-end;
}

/* ------blog_442------ */

.blog_442 {
  background-color: #000;
  color: #fff;
}

.blog_442 article,
.blog_442 h1 {
  background-color: #000;
}

.blog_442 section span {
  text-decoration: underline;
  font-weight: bold;
}

/* ------blog_4425------ */

.blog_4425 {
  background-color: #3e3e3e;
}

.blog_4425 article,
.blog_4425 h1{
  background-color: #3e3e3e;
}


/* ----policy----- */

.policy h1 {
  margin-top: 70px;
  margin-bottom: 50px;
  padding: 0;
  font-size: 1.9rem;
  border-bottom: 1px solid #000;
}
.policy p {
  margin: 0 auto;
}
.policy h2 {
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0;
  text-align: start;
  width: 100%;
}

.policy article {
  padding: 20px;
  word-break: break-all;
}

.policy section {
  text-align: justify;
}

.policy footer {
  margin-top: 80px;
}

/* -------message------- */

.message {
  background-image: linear-gradient(90deg, rgba(253, 219, 146, 0.4), rgba(209, 253, 254, 0.4));
  padding:0;
  font-family: serif;
}

.message h1 {
  font-size: 2rem;
  color:rgb(33, 121, 108);
}

.message h2 {
  text-align: start;
  margin: 0;
  padding:0;
  font-size: 1.4rem;
  font-weight: normal;
}

.message time {
  text-align: start;
  font-size: 0.8rem;
  font-family: serif;
}

.message section {
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 50px;
  font-size: 1rem;
  }

  .message a {
    text-decoration: none;
  }

  .message footer {
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  
  .message small {
    color:rgba(60, 89, 83, 0.5);
  }

  /* --yuina-- */

.t .title,
.t h2 {
    text-align: center;
  }

.t .title {
  margin: 40px 0 20px 0;
}

.t a,
.message a.top {
  color:rgba(60, 89, 83, 0.7);
  font-size: 1.1rem;
  font-family: serif;
  display: block;
  text-align: center;
  margin: 10px;
}

a.thanks {
  text-align: start;
  margin: 0;
  padding-top: 20px;
  color:rgba(255, 81, 0, 0.6);
  font-size: 1.5rem;
  text-decoration: underline;
}

a.thanks:hover {
  color:rgba(255, 0, 102, 0.7);
}

/* --cosmicmagic--- */

body.cosmic .linkbox {
  display: block;
  margin-top: 20px;
}

body.cosmic .linkbox img {
  max-width: 250px;
  height:auto;
}
body.cosmic .linkbox img:nth-child(1) {
  margin-bottom: 15px;
}


body.cosmic div.linkbox2 {
  display: flex;
  margin-top: 160px;
}

body.cosmic div.linkbox2 img {
  margin-right: 20px;
}

body.cosmic .linkbox2 a.homelink img {
  max-width: 180px;
  height: auto;
}

body.cosmic .linkbox2 a.line img {
  max-width: 50px;
  height: auto;
  padding-top: 30px;

}

body.cosmic .linkbox2 a.x img {
  max-width: 30px;
  height: auto;
  padding-top: 40px;
}


.cosmic {
  background-color: #0C295B;
}

.cosmic h1 {
  color: rgb(255, 248, 231);
  font-family: "Orbitron", serif;
  font-size: 2.2rem;
  margin: 0 auto;
  padding: 100px 0 50px 0;
}

.cosmic section {
  margin: 0 auto;
  text-align: center;
  color: rgb(255, 248, 231);
  width: 95%;
  font-family: serif;
  font-size: 1rem;
  padding: 20px;
  padding-top: 60px;
}

.cosmic section p.cafe{
  font-size: 1rem;
  padding-top: 70px;
}

.cosmic small {
  color: rgba(255, 248, 231, 0.7);
}

.cosmic img {
  margin: 0 auto;
}

.cosmic footer {
  background-color: #0C295B;
}
.cosmic footer p {
  font-family: "Shippori Mincho", serif;
  font-size: 0.7rem;
  color: rgba(255, 248, 231, 0.7);
  text-align: center;
}

.cosmic .top {
  text-align: center;
  padding-top: 10px;
}

.top a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 248, 231, 0.7);

}

.cosmic .review p {
  font-size: 0.9rem;
  margin: 90px 0 10px 0;
}
.cosmic .review a {
  font-family: "DotGothic16", sans-serif;
  background-color: #000;
  padding: 15px;
  border: 4px dashed #C8C2C6;
  width: 220px;
  font-size: 1.2rem;
  display: block;
  margin: 0 auto;
}

.cosmic .endcomment {
  margin-bottom: 30px;
}

/* ---share_btn---- */

.twitter-share-button {
  margin: 0 auto;
}

.share_btn a {
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: #FFF8E7;
  margin-bottom: 10px;
}

.share_btn {
  padding: 10px;
  border: 4px dashed #C8C2C6;
  width: 210px;
  background-color: #000;
  margin: 0 auto;
  font-family: "DotGothic16", sans-serif;
}

/* ------ending----------- */

.ending {
  font-family: "Shippori Mincho", serif;
}

.ending .share_btn {
  width: 250px;
  white-space: nowrap;
}

.ending h1 {
  font-size: 2.2rem;
  margin: 60px auto 30px auto;
  font-family: "Orbitron", serif;
}

.ending section {
  text-align: center;
  margin-inline: auto;
  margin: 70px 40px 90px 40px;
  font-size: 1rem;
}

.ending .share_end{
  font-family: "DotGothic16", sans-serif;
  border: 4px dashed #C8C2C6;
  padding: 10px;
}

.ending .review p {
margin-bottom: 15px;
}

.ending .review {
  font-size: 0.9rem;
}

.ending footer {
  background-color: #fff;
}

.ending footer p {
  font-size: 0.7rem;
  text-align: center;
}

.ending footer small {
  color: #000;
}

/* ---ending video---- */

.overlay {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); 
  justify-content: center;
  align-items: center;
  z-index: 1000; 
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.close-btn {
  position: absolute;
  top: -70px;
  right: 5px;
  background-color: transparent;
  color: white;
  font-size: 3rem;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
}

video {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:990px) and (min-width:426px) {
  #close-video {
    font-size: 3.5rem;
    right: 20px;
  }
}

/* ---invideo--- */

.invideo {
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

/* -----------------coupon----------------------- */

body.coupon main {
  width: 90%;
  margin: 0 auto;
}

body.coupon nav ul {
  background-color: #C8C2C6;
}

body.coupon nav  a:hover {
  color: #fff;
}

body.coupon h1 {
  padding: 100px 0 30px 0;
  margin: 0 auto;
  font-size: 2.6rem;
  color: #f80000;
}

body.coupon {
  font-size: 1rem;
  font-family: "Shippori Mincho", serif;
  text-align: center;
}

body.coupon span {
  color: #f80000;
}

body.coupon h4 {
  text-align: center;
  margin: 0;
  font-size: 1.1rem;
  font-family: Arial, Helvetica, sans-serif;
}

body.coupon p {
margin: 0;
font-size: 1.1rem;
}
body.coupon div.coupon p {
margin: 0;
font-size: 3rem;
}

body.coupon a.musubi {
  color: inherit;
  text-decoration: underline;
  font-size: 1.2rem;
  color: #f80000;
}
body.coupon a.musubi:hover {
background-color: #C8C2C6;
}

div.coupon {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4rem;
  border: 1px solid #000;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
}

body.coupon .toTop {
  margin-top: 80px;
  margin-bottom: 80px;
  background-color: #000;
}

/* --------------sos------------------------ */

body.sos {
  background-color: #000;
}

.sos figure img {
  margin: 100px 0 0 0;
}

.sos figcaption {
  color: #fff;
  font-family: serif;
  font-size: 0.8rem;
  text-align: start;
  padding-left: 10px;
}