@charset "utf-8";

/*共通設定==================================================================*/
html {
    font-size: 100%;
    font-family: "Noto Sans JP", serif;
    scroll-behavior: smooth;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

ul,ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.partition {
    font-family: "Rubik Dirt", serif;
    font-family: "Yusei Magic", serif;
    background-image: url(./../images/red-bg.png);
    background-size: cover;
    height: 240px;
    font-size: 6vw;
    letter-spacing: 6px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}


/*header=========================================================-*/

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;            /* ヘッダーを画面幅いっぱいに */
    height: 60px;           /* ヘッダーの高さを指定 */
    display: flex;          /* Flexboxを有効化 */
    justify-content: start; /* 水平方向中央揃え */
    align-items: center;    /* 垂直方向中央揃え */
    z-index: 10;          /* ヘッダーを他の要素より前面に表示 */
}

.header__logo {
    width: 120px;
    position: absolute;
    top: 4px;
    left: 4px;
}

/*hero========================================*/
.hero {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background: #F1F1F1;
    position: relative;
}

.hero__title {
    position: absolute;
    width: 320px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.hero__item {
    width: calc(1/5*100vw);
    height: 100vh;
}

.hero__text {
    background-color: #DB2B2B;
    color: #fefefe;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    font-size: calc(40/16*1rem);
    letter-spacing: 8px;
    justify-content: end;
    padding-top: 160px;
    padding-bottom: 12px;
    font-family: "Yusei Magic", serif;
}

.hero__item__img {
    height: 100%;
}

/*about==========================================================*/

.about {
    background-image: url(./../images/muni.png),url(./../images/common-bg.jpg);
    background-size: 36%,cover;
    background-repeat: no-repeat,no-repeat;
    background-position: right bottom, 0 0;
}

.about__box {
    max-width: 900px;
    padding: 80px 40px;
    margin: 0 auto;
    font-size: calc(24/16*1rem);
}

.about__text {
    margin-bottom: 1em;
    line-height: 1.8;
}

/*chara===================================*/

.chara {
    background-image:url(./../images/common-bg.jpg);
    background-size: cover;
}

.character-slider {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  
  .swiper-wrapper {
    display: flex;
  }
  
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 20px 60px 20px;
    box-sizing: border-box;
    width: 100%;
    /* height: 96vh; */
  }

  .character-content {
    display: flex;
    /* flex-direction: column; */
    justify-content: flex-start;
    align-items: center;
  }

  .character-image {
    position: relative;
    overflow: visible;
  }
  
  .character-image img {
    position: relative;
    width: 380px;
    height: 560px;
    opacity: 0;
    object-fit: cover;
    overflow: visible;
    transform: translateX(100%); /* 右から出てくる */
    transition: all 0.5s ease-out;
  }

  .character-text {
    margin-top: 20px;
    text-align: right;
    transform: translatex(100%); /* 下から出てくる */
    opacity: 0;
    transition: all 0.5s ease-out;
  }
  
  .character-text h2 {
    font-size: calc(38/16*1rem);
    font-family: "Yusei Magic", serif;
    margin: 160px 0 16px;
  }
  
  .character-text p {
    font-size: calc(18/16*1rem);
    margin-bottom: 8px;
  }

  .character-bg {
    position: absolute;
    right: 10%;
    top: 0%;
    transform: translateY(100%); /* 下から出てくる */
    opacity: 0;
    transition: all 0.5s ease-out;
    width: 40%;
  }

  .info-list {
    position: absolute;
    bottom: 40px;
    right: 16%;
    z-index: 10;
  }

  .info {
    display: inline-block;
    text-decoration: none;
    color: #fefefe;
    padding: 10px 40px;
    border: #dedede 4px solid;
    background-color: #DB2B2B;
    border-radius: 30px;
    transition: ease 0.4s;
    font-family: "Yusei Magic", serif;
    font-weight: normal;
  }

  .info:hover {
    background-color: #333;
    color: #fefefe;
    transition: ease 0.4s;
  }


  /*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 20;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
  

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 88%; /*下に配置 */
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
  }
  
  .swiper-button-prev {
    left: 16%; /* 左端 */
    transition: ease 0.3s;
  }
  
  .swiper-button-next {
    right: 16%; /* 右端 */
    transition: ease 0.3s;
  }

  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    color: #DB2B2B;
    transition: ease 0.3s;
  }
  
  .swiper-slide-active .current-character-images img {
    opacity: 1;
  }

  .swiperThumbnail {
    width: 70%;
    /* height: 90px; */
    background-color: #333 ;
    border-radius: 50px;
    margin-bottom: 80px;
    padding: 4px 56px;
  }

  .swiperThumbnail .swiper-slide {
    padding: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: #fefefe 1px solid;
    cursor: pointer;
    transform: skewX(-10deg);
    overflow: hidden;
    transition: ease 0.3s;
    background-color: #666;
  }

  .swiperThumbnail .swiper-slide:hover {
    transition: ease 0.3s;
    border: #DB2B2B 3px solid;
  }
 

  .swiperThumbnail .swiper-slide img {
    width: 80px;
    height: 72px;
    overflow: hidden;
    transition: transform 0.3s ease; /* アニメーション */
    transform: skewX(10deg);
  }

  .swiperThumbnail .swiper-slide img:hover {
    transform: scale(1.1) translateY(-4px) skewX(10deg);
  }

  /*goods=======================================*/

  .goods__container {
    background-image: url(./../images/common-bg.jpg);
    background-size: cover;
    padding: 80px 20px;
  }

  .goods__box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
  }

  .goods__img {
    width: 54%;
    border-radius: 20px;
  }

  .goods__img img {
    border-radius: 20px;
    border: burlywood 2px solid;
  }


  .goods__desc {
    width: 46%;
  }

  .goods__desc__title {
    font-family: "Yusei Magic", serif;
    font-size: 4vw;
    font-weight: normal;
  }

  .goods__desc__text {
    margin-top: 10px;
  }

  .goods__notes {
    text-align: right;
    padding-top: 20px;
  }

  /*contact================================================*/

  .contact__container {
    padding: 40px 20px;
  }

  .profile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 40px;
  }

  .profile__img {
    text-align: center;
    width: 50%;
  }
  .profile__img img {
    width: 60%;
  }

  .pofile__box {
    width: 50%;
  }

  .profile__title {
    font-size: calc(24/16*1rem);
    margin-bottom: 20px;
  }

  .contact__box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 60%;
    margin: 0 auto;
  }

  .web__box {
    display: flex;
    justify-content: center;
    padding: 10px ;
    background-color:#dedede;
    font-size: calc(12/16*1rem);
  }
  .web__box a {
    color: #333;
    margin-left: 1rem;
    border-bottom: #666 1px solid;
  }

/*footer=================================*/
  footer {
    padding: 20px;
    background-color: #333;
    text-align: center;
  }
  footer small {
    color: #fefefe;
  }

  footer small span {
    display: inline-block;
  }


/*767以下レスポンシブ==========================================*/
@media (max-width: 767px) {

  /*共通設定=================================*/
  .partition {
    height: 120px;
    font-size: 5vw;
}

  /*hero========================================*/
.hero {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: #F1F1F1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.hero__title {
  position: absolute;
  width: 240px;
  display: flex;
  justify-content: center;
  z-index: 1;
  left: 50%; /* 親要素の幅の50% */
  transform: translateX(-50%) translateY(-30%); /* 自分の幅の50%だけ左にずらす */
  top: 30%;

}

.hero__item {
  width: 50vw;
  height: 42vh;
}

.hero__text {
  writing-mode:  horizontal-tb;
  background-color: #DB2B2B;
  width: 100%;
  height: 16vh;
  color: #fefefe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7vw;
  font-family: "Yusei Magic", serif;
  grid-column: 1 / span 2;
  padding: 0;
}

.hero__item__img {
  height: 100%;
}

/*about==========================================================*/

.about {
  background-image: url(./../images/muni.png),url(./../images/common-bg.jpg);
  background-size: 38%,cover;
  background-repeat: no-repeat,no-repeat;
  background-position: right bottom, 0 0;
}

.about__box {
  max-width: 900px;
  padding: 56px 24px;
  margin: 0 auto;
  font-size: calc(16/16*1rem);
}

.about__text {
  margin-bottom: 1em;
  line-height: 1.8;
}


/*chara===================================*/

.swiper-slide {
  width: 100%;
  /* height: 80vh; */
}

.character-content {
  display: flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  align-items: center;
}

.character-image {
  width: 30%;
}

.character-image img {
  width: 274px;
  height: 403px;
}

.character-text {
  width: 70%;
}

.character-text h2 {
  font-size: calc(24/16*1rem);
}

.character-text p {
  font-size: calc(14/16*1rem);
}

.character-bg {
  top: 4%;
}

.info-list {
  bottom: 40px;
  right: 10%;
}

.info {
  padding: 10px 32px;
}

.swiper-button-prev,
  .swiper-button-next {
    top: 86%; /*下に配置 */
  }
  
  .swiper-button-prev {
    left: 11%; /* 左端 */
  }
  
  .swiper-button-next {
    right: 11%; /* 右端 */
  }

  .swiperThumbnail {
    width: 80%;
    border: #333 4px solid;
    padding: 0px 40px;
    overflow: hidden;
  }

   /*goods=======================================*/

   .goods__container {
    padding: 64px 20px 40px 20px;
  }

  .goods__box {
    width: 100%;
  }

  .goods__img {
    width: 50%;
  }
  .goods__desc {
    width: 50%;
  }

  .goods__desc__title {
    font-size: 5vw;
  }

  .goods__desc__text {
    font-size: calc(14/16*1rem);
    margin-left: 4px;
  }

  .goods__notes {
    font-size: calc(14/16*1rem);
  }

  .goods__notes span {
    display: inline-block;
  }


   /*contact================================================*/

  .profile {
    width: 100%;
    flex-direction: column;
  }

  .profile__img {
    margin-right: 20px;
    width: 40%;
    margin-bottom: 16px;
  }

  .profile__img img {
    width: 80%;
  }

  .profile__title {
    font-size: calc(24/16*1rem);
    margin-bottom: 16px;
  }

  .contact__box {
    width: 90%;
  }

  /* ボタン共通設定 */
.btn04 {
  padding: 10px 10px;
  font-size: calc(14/16*1rem);
}


/*footer====================================================*/

footer {
  padding: 16px 64px;
}

#page-top a{
	width: 50px;
	height: 50px;
}

}

/*449以下レスポンシブ==========================================*/
@media (max-width: 449px) {

  /*共通設定=================================*/
  .partition {
      height: 80px;
  }
  .header__logo {
    width: 100px;
  }

  /*hero=======================*/
  .hero__title {
    width: 200px;
    top: 34%;
  }
  /*about=============================*/
  .about {
    background-size: 32%,cover;
}

.about__box {
    padding: 40px 8px;
    font-size: calc(14/16*1rem);
}

  /*chara===================================*/

  .swiper-slide {
    padding: 60px 16px 48px 16px;
  }

.character-image {
  width: 24%;
}

.character-image img {
  width: 197px;
  height: 290px;
}

.character-text {
  width: 76%;
  padding-bottom: 16px;
}

.character-text h2 {
  font-size: calc(20/16*1rem);
}

.character-bg {
  top: 8%;
}

.info-list {
  bottom: 12px;
  right: 8%;
}

.info {
  padding: 8px 28px;
  font-size: calc(14/16*1rem);
}

.swiper-button-prev,
  .swiper-button-next {
    top: 82%; /*下に配置 */
  }

  /*goods================*/
  .goods__container {
    padding-top: 48px;
  }
  .goods__box {
    flex-direction: column;
    width: 100%;
    margin-bottom: 48px;
  }

  .goods__box__low {
    flex-direction: column-reverse;
  }

  .goods__img {
    width: 100%;
    margin-bottom: 16px;
  }

  .goods__desc {
    width: 90%;
  }

  .goods__desc__title {
    font-family: "Yusei Magic", serif;
    font-size: 8vw;
    font-weight: normal;
  }

  .goods__desc__text {
    margin-top: 10px;
  }

  .goods__notes {
    text-align: right;
    padding-top: 20px;
  }

  /*contact===========================*/
  .profile {
    width: 100%;
    flex-direction: column;
    margin-bottom: 32px;
  }

  .profile__img {
    margin-right: 20px;
    width: 60%;
    margin-bottom: 16px;
  }

  .profile__title {
    font-size: calc(18/16*1rem);
    margin-bottom: 16px;
  }

  .profile__text {
    font-size: calc(14/16*1rem);
  }

  .contact__box {
    width: 100%;
    flex-direction: column;
  }

  /* ボタン共通設定 */
.btn04 {
  padding: 10px 10px;
  font-size: calc(14/16*1rem);
  margin-bottom: 20px;
}

}


/*1550以上レスポンシブ==========================================*/
@media (min-width: 1550px) {

  /*共通==================*/
  .partition {
    height: 280px;
    font-size: 6vw;
}
#g-nav li a{
  font-size: calc(36/16*1rem);
  padding:32px 40px;
  }

  /*hero==========================*/
  .hero__title {
    width: 500px;
}

.hero__text {
    font-size: calc(58/16*1rem);
    padding-bottom: 20px;
}

  /*about==========================*/
  .about {
    background-image:url(./../images/bg-text.png) ,url(./../images/muni.png),url(./../images/common-bg.jpg);
    background-size:12%, 32%,cover;
    background-position:left 5% bottom 4%, right 6% bottom, 0 0;
}

.about__box {
    max-width: 1040px;
    font-size: calc(32/16*1rem);
}

  /*chara===================================*/

.character-image img {
  width: 456px;
  height: 672px;
}

.character-text {
  margin-top: 20px;
}

.character-text h2 {
  font-size: calc(48/16*1rem);
  margin: 240px 0 24px;
}

.character-text p {
  font-size: calc(24/16*1rem);
  margin-bottom: 12px;
}

.info-list {
  bottom: 72px;
  right: 24%;
}

.info {
  font-size: calc(18/16*1rem);
}


.swiper-button-prev,
.swiper-button-next {
  top: 90%; /*下に配置 */
}

.swiperThumbnail {
  width: 70%;
  /* height: 90px; */
  background-color: #333 ;
  border-radius: 50px;
  margin-bottom: 80px;
  padding: 4px 56px;
}

/*goods============*/
.goods__desc__text {
  font-size: calc(24/16*1rem);
}

/*contact=====================*/

.contact__container {
  padding: 100px;
}

.profile {
  margin-bottom: 60px;
}
.profile__img img {
  width: 60%;
}

.profile__title {
  font-size: calc(40/16*1rem);
}

.profile__text {
  font-size: calc(18/16*1rem);
}

.btn04 {
  padding: 20px 60px;
  font-size: calc(24/16*1rem);
}

}


/*about1240=============================================*/
@media (min-width: 1240px) {
  .about {
    background-image:url(./../images/bg-text.png) ,url(./../images/muni.png),url(./../images/common-bg.jpg);
    background-size:12%, 32%,cover;
    background-position:left 5% bottom 4%, right 6% bottom, 0 0;
}
}