@charset "utf-8";

/* body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
} */


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff
}

h1 {
  width: 320px;
  text-align: left;
  /* padding: 15px 15px 0px 15px; */
  font-size: 2.0rem;
  color: #000;
  /* margin-bottom: 10px; */
}

h2 {
  margin-bottom: 50px;
  font-size: 4.0rem;
  text-align: center;
}

h2.footer_logo {
  width: 250px;
  text-align: left;
  margin: auto 0;

}

h3 {
  margin-bottom: 10px;
  font-size: 1.9rem;
}

p,
figcaption {
  font-size: 1.6rem;
  /* text-align: justify; */
}

/*固定用css*/
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

/*==ナビゲーション全体の設定*/
nav.search_nav{
	width: 100%;
	max-width: 1200px;
	/* background:#333; */
	color:#fff;
	text-align: center;
	padding-left: 50px;
	margin: 0 auto;
}
/*ナビゲーションを横並びに*/
nav.search_nav ul{
	list-style: none;
	display: flex;
	/* justify-content: center; */
}
/*2階層目以降は横並びにしない*/
nav.search_nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav.search_nav ul li{
	position: relative;
}

/*ナビゲーションのリンク設定*/
nav.search_nav ul li a{
	display: block;
	text-decoration: none;
	color: #999;
	padding:20px 0px;
  padding-right: 35px;
	transition:all .3s;
}

nav.search_nav ul li li a{
	padding:10px 35px;
}

na.search_nav ul li a:hover{
	color:#fff;	
}

.lineup img{
    opacity: 1;
}

.lineup img:hover{
  opacity: 0.5;
  transition: .7s;
}

.wrapper {
  /* max-width: 1366px; */
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.first_view {
  width: 100%;
  height: 500px;
  margin-top: 100px;
  border: 1px solid #000;
}

/* header */
header .header_w {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* border-bottom: 1px solid #000; */
}

h1.header1 {
  /* width: 50%; */
  background-image: url(../images/icon1.png);
  background-repeat: no-repeat;
  background-size: 55px;
  background-position: top 1px right 16px;
}


h1.header2 {
  /* width: 50%; */
  /* background-image: url(../images/icon2.png);
  background-repeat: no-repeat;
  background-size: 55px;
  background-position: top 1px right 16px; */
}

header {
  /* background: #5280dd; */
  background: #fff;
  letter-spacing: 1px;
}

.scrolldown {
  box-shadow: 0px 4px 4px -5px rgba(0, 0, 0, .2);
  background: rgba(255, 255, 255, .8);
}

header h1 a {
  /* max-width: 130px;
  width: 20%; */
  width: auto;
  color: #000;
  font-family: Nikukyu;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  /* padding-left:55px ; */

}

header h1 span,
.first_view_header h1 span {
  width: 260px;
  /* max-width: 160px; */
  display: block;
  /* border: 1px solid; */
  margin-top: auto;
  line-height: 2.3;
  font-size: 1.0rem;
  /* padding-left:55px ; */
}

header .nav {
  display: flex;
  margin-left: auto;
}

header nav.global_01,
.first_view_header nav.global_01 {
  width: auto;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  /* background-color: #fff; */
}


header nav.global_01 ul,
.first_view_header nav.global_01 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* header nav.global_01 ul.ttt::after,
.first_view_header nav.global_01 ul.ttt::after {
  content: "";
  width: 1px;
  height: 1.5rem;
  background-color: currentColor;
} */

header nav.global_01 ul,
.first_view_header nav.global_01 ul {
  width: auto;
}

header nav.global_01 ul li a,
.first_view_header nav.global_01 ul li a {
  color: #000;
  text-align: center;
  font-family: Niramit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0;
}

header nav.global_02 {
  width: 20%;
}

header nav.global_02 ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

header nav.global_02 ul li {
  width: auto;
}

header nav.global_02 ul li a {
  color: #000;
  text-align: center;
  font-family: Niramit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

header ul.set {
  min-width: 115px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

header ul.set li a {
  color: #000;
  text-align: center;
  font-family: Niramit;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0;
}

/* header */

.content {
  padding: 0 100px;
}

section.novel {
  width: calc(100% - 150px - 20px - 20px - 150px);
  order: 1;
}

section.novel p {
  margin-top: 10px;
  text-indent: 1.6rem;
}

section.profile {
  width: 150px;
  order: 2;
}

section.books {
  width: 150px;
  order: 0;
}

.layout_01 {
  margin-top: 150px;
}

.product_view {
  width: 100%;
  max-width: 1200px;
  /* display: flex;
  justify-content: center;
  /* align-content: center; */
  /* gap: 5vw; */
  /* flex-wrap: wrap; */
  /* margin-top: 75px; */
  margin: 0 auto;
  padding: 0 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.first_view_index {
  /* width: 100%;
  height: 700px;
  background-image: url(../images/fast.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top 30px right;
  background-color: #ccc; */
  margin-top: 50px;
}

.first_view_index p {
  color: #fff;
  font-size: 4rem;
  text-align: right;
  padding-top: 200px;
  padding-right: 5%;
}

.first_view_all {
  margin-top: 150px;
}

.first_view_all h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.first_view_all h2 .title_1 {
  font-size: 4rem;
  font-weight: 600;
}

.first_view_all h2 .title_2 {
  font-size: 1.5rem;
  font-weight: 100;
}

.product_single {
  /* width: calc((100%/4) - 90px);  */
}

.product_img {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 25px;
}

.product_img span {
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(-100%);
  transform-origin: top;
}

.product_img p img {
  /* max-width: 260px; */
  /* width: 17vw; */
  height: auto;
  /* height: 360px; */
  box-shadow: 6px 10px 10px #666666;
}

.product_detail {
  margin-bottom: 25px;
}

.product_detail p {
  text-align: center;
  line-height: 1.5;
}


/* ボタン */
p.btn_01 a {
  margin: 10px auto;
  margin-bottom: 100px;
  /* padding: 10px 0; */
  width: 300px;
  height: 50px;
  text-align: center;
   /* border: 1.5px solid #000; */
  border-radius: 20px;
  line-height: 3;
  background-color: #5280DD;
}

p.btn_02 a {
  margin: 0 auto;
  padding: 10px 0;
  width: 161px;
  height: 42px;
  text-align: center;
  border: 1.5px solid #000;
  border-radius: 20px;
  line-height: 1;
}

p.btn_03 a {
  margin-top: 75px;
  text-align: center;
}

.D {
  display: inline-block;
  background: #b6beff;
  padding: 5px 10px;
  cursor: pointer;
}

.E {
  background: #ffaf74;
  height: 100px;
}



.info {
  width: 80%;
  margin: 50px auto;
  font-size: 1.6rem;
}

.info .info_article {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 50px;
  border-bottom: 1px solid #bfbbbb;
}

.info .info_article p {
  width: 30%;
}

.info .info_article p img {
  width: 50%;
}

.info .info_article div {
  width: 70%;
}

.info .info_article div dt {
  padding: 0 10px;
}

.info .info_article div dd {
  padding: 0 10px;
}

.info .info_article div dd section p {
  width: 100%;
}

/* .info div {
  border-bottom: 2px solid #bfbbbb;
} */

.info div dt {
  padding: 10px;
}

.info div dd {
  padding: 10px 10px;
}

section.concept {
  margin: 0 auto;
  margin-top: 100px;
}

section.concept p {
  text-align: center;
}

section.concept p img {
  width: 50vw;
  height: 50vw;
  margin: 0 auto;
}

section.concept p.str {
  padding: 30px;
  font-size: 2.3rem;
}

ul.etc {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 150px auto;
}

ul.etc li {
  width: calc(100% / 4);
  border: 1px solid #000;
  border-right: none;
}

ul.etc li:last-child {
  border-right: 1px solid #000;
}

ul.etc li a span {
  width: auto;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

p.test-slick__item {
  width: auto;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 2rem;
}

/* bxSlider */
/* .bx-wrapper {
  width: 100%;
  height: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  box-shadow: none;
} */

/* bxSlider */
/* .iteme_detail .bx-wrapper {
  width: 50%;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  box-shadow: none;
} */

/* 枠線の削除 */
.bx-wrapper {
  /* max-width: 50%; */
  background-color: transparent;
  /* margin: 0px auto; */
  border: none;
  box-shadow: none;
}

.bx-wrapper img {
  display: block;
  margin: 0px auto;
}

.slider div img {
  width: 100%;
  /* height: 590px; */
}

/* 枠線の削除 */
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto;
  border: none;
  box-shadow: none;
}

.bx-wrapper img {
  display: block;
  margin: 0px auto;
}


.bx-wrapper .bx-viewport {
  height: 600px;
}

/* item_detail */
.item {
  width: 100%;
  display: flex;
  gap: 20px;
  margin-top: 150px;
  /* margin-left: auto;
  margin-right: auto; */
}

.item ul.bxslider {
  width: 50%;
  /* border: 1px solid #000; */
}

.item ul.bxslider li p img {
  /* min-width: 500px; */
  /* width: 40vw; */
  /* width: 25vw; */
  width: 30vw;
  height: auto;
  margin: auto auto;
}

.item p.item_img {
  width: 100%;
  /* border: 1px solid #000; */
}

.item p.item_img img {
  width: 100vw;
  margin: auto auto;
}

.item .item_detail {
  width: 50%;
}

.detail_01 {
  display: flex;
  gap: 30px;
}

.item_detail ul {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */

}

.item_detail ul li p {
  color: #000;
  text-align: left;
  font-variant-numeric: ordinal;
  /* font-feature-settings: 'fwid' on, 'subs' on; */
  font-family: "Abhaya Libre Medium";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.item_detail ul li.detail_01 {
  /* margin-bottom: 10px; */
}

.item_detail ul li.detail_01 p a img {
  width: 20px;
  height: 20px;
}

.item_detail ul li.detail_02 {
  /* margin-bottom: 20px; */
}

.item_detail ul li.detail_02 p {
  font-size: 50px;
}

.item_detail ul li.detail_03 p {
  font-size: 30px;

}

/* .item_detail_01 div {
  display: flex;
}

.item_detail_01 div p {
  padding: 10px;
  text-align: center;
}

.item_detail_01 div p a img {
  width: 20px;
  height: 20px;
} */


dl.item_detail_02 {
  margin-top: 20px;
}

dl.item_detail_02 dd {
  width: 100%;
  height: 40px;
  color: #000;
  font-family: Nokora;
  font-size: 26px;
  font-style: normal;
  font-weight: 100;
  line-height: normal;
}

dl.item_detail_02 dt {
  margin-top: 10px;
  width: 100%;
  height: auto;
}


p.btn_04 {
  width: 26vw;
  height: 50px;
  margin: 0 auto;
  /* margin-top: 25px; */
  border-radius: 3px;
  border: 1px solid #000;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item_detail p.btn_04 {
  margin: 50px auto;
}


p.btn_04 a {
  width: 100%;
  color: #FFF;
  text-align: center;
  font-family: Nokora;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}


/* lineup.html */
.search_function {
  width: 90%;
  margin: 0 auto;
  /* max-width: 1266px; */
  height: 50px;
  display: flex;
  justify-content: center;
  border: 1px solid #000;
  margin-bottom: 150px;
}

.search_function form {
  width: 50%;
  /* border: 1px solid #000; */
  margin: auto auto;
  flex-shrink: 0;
}

.search_function form input.search_inp {
  width: 100%;
  height: 48px;
  display: block;
  margin: 0 auto;
  background-image: url(/images/search.png);
  background-position: top 13px left 5px;
  background-size: 20px;
  background-repeat: no-repeat;
  border: none;
}

/* .search_function form input.search_inp:hover {
  background-image:none
}  */
/* ::placeholder {
  padding-left: 30px;

} */

.search_function form input.search_img {
  width: 20px;
  height: 20px;
}

.search_function p {
  width: 30%;
  border: 1px solid #000;
  text-align: center;
  margin: auto auto;
}

.page_button {
  width: 80%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  gap: 100px;
  margin: 0 auto;
  margin-top: 75px;
}

.page_button p {
  color: #000;
  text-align: center;
  font-family: Nokora;
  font-size: 23.659px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 3.549px;
  margin: 0 auto;
}

.page_button ol {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.page_button ol li {
  width: 44px;
  height: 44px;
  border-radius: 44px;
  border: 1px solid #000;
  background-color: #000;
  margin: auto auto;
}

.page_button ol li:hover {
  border: 1px solid #999;
  background-color: #999;
}

.page_button ol li a {
  color: #fff;
  text-align: center;
  font-family: Nokora;
  font-size: 23.659px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}





/* cart.html */
.cart .content .cart_view {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.cart h2.cart_h2 {
  margin-top: 100px;
}

.cart_view_1 {
  /* width: 60%; */
  width: 70vw;
}

.cart_view_1 p.sum_prc {
  width: 100%;
  padding-top: 10px;
  text-align: right;
  font-size: 2.5vw;
}

.cart_view_1 p.bnr {
  height: 50px;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.cart_view_2 {
  /* width: 70%; */
  width: 40vw;
  /* border: 1px solid #000; */
}

.cart_view_2 section {
  /* height: 30vw; */
  /* margin-bottom: 30px; */
  padding: 0 20px;
  text-align: center;
  /* border: 1px solid #000; */
}

.cart_view_2 section h3 {
  /* margin-top: 30px; */
}

.cart_view_2 .login {
  margin-bottom: 50px;
  border: 0.1px solid #f6f6f6;
  border-radius: 6px;
  box-shadow: 1px 0 5px 4px rgba(69, 145, 175, 0.60);
  background: #f6f6f6;
}

.cart_view_2 .login p {
  /* width: 100%; */
  text-align: center;
}

.cart_view_2 .login p.shop_str {
  margin-bottom: 20px;
}

.cart_view_2 .login p.shop_str a {
  color: blue;
  font-size: 1.4rem;
}

.cart_view_2 section.gift {
  padding: 20px;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
}

.cart_view_2 section.gift h3 {}

.cart_view_2 section.gift h3 p {
  padding-left: 22px;
  font-weight: normal;
  font-size: 1.5vw;
  text-align: left;
  background-image: url(../images/gift.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center left;
}

.cart_view_2 section.gift p.gift_str {
  text-align: left;
  max-width: 321px;
  padding-top: 10px;
  font-size: 1.0rem;
}

.cart_view_2 section.gift p.gift_str a {
  color: blue;
  display: contents;
}

.cart_view_2 section.login_01 {
  padding: 20px;
  padding-bottom: 20px;
  /* height: 20vw; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  /* border: 1px solid #000; */
}

.cart_view_2 section.login_02 {
  padding-bottom: 20px;
  /* height: 30vw; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  /* border: 1px solid #000; */
}

.cart_view_2 section.login_02 ul.tab_wrap {
  width: 26vw;
  margin: 0 auto;
  margin-bottom: 15px;
  /* border: 1px solid #000; */
}

.cart_view_2 section.login_02 ul.tab_wrap li {
  text-align: left;
  line-height: 2;
  font-size: 1.6vw;
  border: 1px solid #D9D9D9;
  border-bottom: none;
  padding-left: 6px;
}

.cart_view_2 section.login_02 ul.tab_wrap li:last-child {
  border-bottom: 1px solid #D9D9D9;
}

.cart_view_2 section.login_02 ul.tab_wrap li span {
  font-size: 1.0vw;
}

section.cart_item_1 {
  width: 100%;
  margin-top: 50px;
}

section.cart_item_1 h3 {
  /* margin-bottom: 0; */
}

section.cart_item_1 ul {
  border-top: 2px solid #D9D9D9;
  border-bottom: 2px solid #D9D9D9;
  display: flex;
  /* margin: 20px; */
  padding: 20px;
  gap: 20px;
}

section.cart_item_1 ul li.cart_item1_1 {
  width: 50%;
}

section.cart_item_1 ul li.cart_item1_1 p {
  width: 100%;
  margin: 20px 0;
  font-size: 2.0vw;
  font-weight: 100;
  text-align: left;
}

section.cart_item_1 ul li.cart_item1_1 .field {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

section.cart_item_1 ul li.cart_item1_1 .field div {
  display: flex;
  align-items: center;
}

section.cart_item_1 ul li.cart_item1_1 .field p {
  margin: 0;
  font-size: 1.2vw;
}

section.cart_item_1 ul li p.item_img {
  width: 100%;
  /* border: 1px solid #000; */
}

section.cart_item_1 ul li p.item_img img {
  width: 25vw;
  /* margin: 20px; */
}

section.cart_item_1 ul li span {
  font-size: 1.57vw;
}

.ai_support {
  width: 30vw;
  padding: 5px;
  border: 1px solid #000;
  position: fixed;
  top: 700px;
  right: 0px;
  z-index: 9998;
}

.ai_support p {
  font-size: 1.2vw;
}


/* .cart_item {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  padding: 30px;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}
.cart_item p.item_img {
  width: 30%;
  border: 1px solid #000;
}
.cart_item ul {
  width: 70%;
  border: 1px solid #000;
}
.cart_item ul li p {
  margin-bottom: 30px;
  color: #000;
  font-family: "Noto Music";
  font-size: 52.174px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
} */
/* p.sum {
  width: 100%;
  height: 50px;
  text-align: right;
  color: #000;
  font-family: "Noto Music";
  font-size: 40.58px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
} */

.bxslider_img {
  width: 50%;
}


/* フッターのCSS */
footer {
  width: 100%;
  /* height: 350px; */
  text-align: center;
  /* background-color: #c9dee2; */
  /* background-color: #5280dd; */
  /* padding: 20px;
  padding-bottom: 0; */
  margin: 30px auto;
}

footer .map_list {
  width: 70vw;
  /* height: 100px; */
  /* padding: 50px 50px 200px 50px; */
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 auto;
}

footer .map_list ul {
  /* width: calc(100% / 5); */
}

footer .map_list ul li {
  text-align: left;
  line-height: 2;
  font-size: 1.2rem;
}

.footer_detail_2 {
  width: 70vw;
  margin: 20px auto;
  /* margin-top: 20px; */
  /* padding: 50px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}

.footer_detail_2 .sns_img {
  /* padding: 50px 0; */
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.footer_detail_2 .sns_img p img {
  width: 50px;
  height: 50px;
}

footer small {
  font-size: 1.6rem;
  line-height: normal;
  color: #5a5a5a;
  font-size: 1rem;
}




ul.bx-pager {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 50px;
  border: 3px double #D9D9D9;
}

ul.bx-pager li {
  width: 20%;
}


.bx-pager a {
  margin: 0 3px;
}

.bx-pager a img {
  padding: 3px;
  /* border: solid #ccc 5px */
}

.bx-pager a.active img {
  border: solid #5280DD 5px;
}

/* ul.bxslider{
  width: 500px;
} */

.container {
  /* width: 300px;
  margin: 200px auto 0; */
}








.inputtext {
  width: 35px;
  height: 35px;
  color: rgba(43, 32, 32, 0.76);
  font-size: 20px;
  border-left: 0;
  border-right: 0;

  line-height: 3rem;
  text-align: center;
  border: 1px solid #D7DBDD;
  border-right: none;
  /* padding: 0 10px; */
}

.button {
  width: 35px;
  height: 35px;
  color: rgba(43, 32, 32, 0.76);
  font-size: 18px;
  cursor: pointer;
  /* padding: 5px 25px; */
  background-color: white;
  border: 1px solid #D7DBDD;
  border-radius: 0;
  outline: 0;
  border-right: none;
}

.button_lst {
  border-right: 1px solid #D7DBDD;
}


.resetbtn {
  margin: 20px 0 0 65px;
}

.cart_item_2 {
  width: 100%;
  margin-top: 50px;
}

section.cart_item_2 ul {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  gap: 2vw 2vw;
  border: 1px solid #000;
  padding: 20px;
}

section.cart_item_2 ul li {
  width: auto;
}

section.cart_item_2 ul li p {
  width: 100%;
  font-size: 1.2vw;
  text-align: left;
}

section.cart_item_2 ul li p img {
  width: 14.26vw;
}


.test-slick2 div img {
  margin: 10px;
}

.container {
  /* max-width: 1366px; */
  width: 70vw;
  margin: 100px auto;
  display: grid;
  grid-template-columns: 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw;
  grid-template-rows: 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". N1 N1 N1 N1 . N2 N2 N2 . "
    ". N1 N1 N1 N1 . N2 N2 N2 . "
    ". N1 N1 N1 N1 . N2 N2 N2 . "
    ". N1 N1 N1 N1 . . . . . "
    ". . . . . . . . . . "
    "N3 N3 N3 N3 N3 N3 . N4 N4 N4 "
    "N3 N3 N3 N3 N3 N3 . N4 N4 N4 "
    "N3 N3 N3 N3 N3 N3 . N4 N4 N4 "
    "N3 N3 N3 N3 N3 N3 . N4 N4 N4 "
    "N3 N3 N3 N3 N3 N3 . N4 N4 N4 "
    "N3 N3 N3 N3 N3 N3 . . . . "
    ". . . . . . . . . . "
    "N5 N5 N5 N5 . N6 N6 N6 N6 N6 "
    "N5 N5 N5 N5 . N6 N6 N6 N6 N6 "
    "N5 N5 N5 N5 . N6 N6 N6 N6 N6 "
    ". . . . . N6 N6 N6 N6 N6 "
    ". . . . . N6 N6 N6 N6 N6 "
    ". . . . . . . . . . "
    ". N7 N7 N7 . N9 N9 N9 N9 . "
    ". N7 N7 N7 . N9 N9 N9 N9 . "
    ". N7 N7 N7 . N9 N9 N9 N9 . "
    ". N7 N7 N7 . N9 N9 N9 N9 . "
    ". . . . . N9 N9 N9 N9 . "
    ". N8 N8 N8 . N9 N9 N9 N9 . "
    ". N8 N8 N8 . N9 N9 N9 N9 . "
    ". N8 N8 N8 . N9 N9 N9 N9. "
    ". . . . . . . . . . "
    "N10 N10 N10  . N11 N11 N11 N11 N11 N11 "
    "N10 N10 N10 . N11 N11 N11 N11 N11 N11 "
    "N10 N10 N10 . N11 N11 N11 N11 N11 N11 "
    "N10 N10 N10 . N11 N11 N11 N11 N11 N11 "
    "N10 N10 N10 . N11 N11 N11 N11 N11 N11 ";
}

.N1 {
  grid-area: N1;
  width: calc(7vw * 4);
  /* height: calc(7vw * 4);
  border: 1px solid #000;
  background-color: #999; */
}

.N2 {
  grid-area: N2;
  width: calc(7vw * 3);
  /* height: calc(7vw * 3);
  border: 1px solid #000;
  background-color: #999; */
}

.N3 {
  grid-area: N3;
  width: calc(7vw * 6);
  /* height: calc(7vw * 6);
  border: 1px solid #000;
  background-color: #999; */
}

.N4 {
  grid-area: N4;
  width: calc(7vw * 3);
  /* height: calc(7vw * 5);
  border: 1px solid #000;
  background-color: #999; */
}

.N5 {
  grid-area: N5;
  width: calc(7vw * 4);
  /* height: calc(7vw * 4);
  border: 1px solid #000;
  background-color: #999; */

}

.N6 {
  grid-area: N6;
  width: calc(7vw * 5);
  /* height: calc(7vw * 5); */
  /* border: 1px solid #000;
  background-color: #999; */
}

.N7 {
  grid-area: N7;
  width: calc(7vw * 3);
  /* height: calc(7vw * 4); */
  /* border: 1px solid #000;
  background-color: #999; */
}

.N8 {
  grid-area: N8;
  width: calc(7vw * 3);
  /* height: calc(7vw * 3); */
  /* border: 1px solid #000;
  background-color: #999; */
}

.N9 {
  grid-area: N9;
  width: calc(7vw * 4);
  /* height: calc(7vw * 6); */
  /* border: 1px solid #000;
  background-color: #999; */
}

.N10 {
  grid-area: N10;
  width: calc(7vw * 3);
  /* height: calc(7vw * 5); */
  /* border: 1px solid #000;
  background-color: #999; */
}

.N10 img {
  height: 100%;
}


.N11 {
  grid-area: N11;
  width: calc(7vw * 6);
  /* height: calc(7vw * 6); */
  /* border: 1px solid #000;
  background-color: #999; */
}



.profile_set {
  margin-bottom: 100px;
  font-size: 1vw;
  font-family: -apple-system, YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Noto Sans CJK JP", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Emoji";

}

.profile_set ul {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 0 auto;
}

.profile_set ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.profile_set ul li.profile_img p {
 font-size: 2.0rem
}
.profile_set ul li p img {
  border-radius: 50%;
  width: 30vw;
}

.profile_set ul li p {
  margin-bottom: 15px;
}

ul.profile_set2 li {
  display: flex;
}

ul.profile_set2 li div {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

ul.profile_set2 li div p {
  width: 100%;
}

ul.profile_set2 li div p.str1 {
  font-weight: 500;
  font-size: 2.5vw;
  letter-spacing: 0.1rem;
  text-align: left;
  margin-bottom: 2vw;
  font-family: -apple-system, YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Noto Sans CJK JP", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Emoji";

}

ul.profile_set2 li div p.str2 {
  font-weight: 500;
  font-size: 1.2vw;
  letter-spacing: 0.1rem;
  text-align: left;
  margin-bottom: 30px;
  font-family: -apple-system, YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Noto Sans CJK JP", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}

ul.profile_set2 li p {
  width: 50%;
}

ul.profile_set2 li:nth-child(odd) {
  flex-direction: row-reverse;
}



form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

form .form__item {
  display: flex;
  flex-direction: column;
  gap: 20px
}

form .form__item .form__label {
  -webkit-font-smoothing: antialiased;
  font-family: dnp-shuei-gothic-gin-std, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: normal;
}

form .form__item .form__label::after {
  color: red;
  content: "*";
  margin-left: 0.5rem;
}


form .form__textarea {
  width: auto;
  height: 300px;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: inherit;
  vertical-align: middle
}

form .form__input,
form .form__select,
form .form__textarea {
  -webkit-font-smoothing: antialiased;
  background: #faffff;
  border: 1px solid #eef5fa;
  border-radius: 4px;
  font-family: dnp-shuei-gothic-gin-std, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: normal;
  min-height: 28px;
  padding: 13px 26px 14px;
}

form .form__submit {
  /* -webkit-font-smoothing: antialiased; */
  /* align-items: center; */
  /* display: flex; */
  /* flex-direction: row; */
  /* gap: 12rem; */
  /* height: fit-content; */
  /* width: fit-content */

  font-family: dnp-shuei-gothic-gin-std, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: normal;
  /* margin-left: auto;
  margin-right: auto;
  margin-top: 20px; */
  margin: 20px auto;

}

p.required_item {
  margin: 0 auto;
}

p.required_item span {
  color: #ff0000;
}

*:focus {
  outline: none;
}



/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.gnavi li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover {
  color: #0481A2;
}

.gnavi li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background: #0481A2;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: left top;
  /*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}












@media (hover:hover) {
  header nav ul li a:hover {
    /* background-color: #cec595; */
  }
}

@media screen and (max-width:430px) {
  /* 共通 */
  .first_view_all {
    margin-top: 100px;
  }

  /* index.html */
  .container {
    display: block;
    margin: 50px auto;

  }

  .N1,
  .N2,
  .N3,
  .N4,
  .N5,
  .N6,
  .N7,
  .N8,
  .N9,
  .N10,
  .N11 {
    width: 100%;
    margin-bottom: 50px;
  }
  /* about.html */
  section.profile_set {
    margin-bottom: 50px;
  }

  section.profile_set ul {
    display: block;
  }
  section.profile_set ul li p img {
    width: 50vw;
  }

  ul.profile_set2 {
    width: 100%;
    margin: 0 auto;
  }

  ul.profile_set2 li {  
    display: block;
  }

  ul.profile_set2 li div,
  ul.profile_set2 li p {
    width: 100%;
  }

  ul.profile_set2 li div p.str1 {
    font-size: 3.5vw;
  }

  ul.profile_set2 li div p.str2 {
    font-size: 2.2vw;
  }

  nav.search_nav{
    padding-left: 10px;
  }
  .product_view{
    padding: 0 10px;
  }

  /* news.html */
  .layout_01 {
    margin-top: 50px;
  }
  .info {
    width: 100%;
  }
  .info .info_article p img {
    width: 100%;
  }


}

@media screen and (max-width:860px) {

  .content {
    padding: 0 15px;
  }

  h2 {
    font-size: 2.4rem;
  }

  header .nav {
    /* margin-right: 50px; */
    margin-left: 0;
  }

  header nav.global_01 ul.ttt::after {
    content: "";
    width: 0;
  }

  header .header_w {
    width: 90%;
  }

  header h1 a {
    width: 124px;
    font-size: 1.5rem;
  }

  header h1 span,
  .first_view_header h1 span {
    font-size: 0.5rem;
  }

  h1.header1 {
    width: 130px;
    background-size: 33px;
    background-position: top 1px right 7px;
  }

  h1.header2 {
    width: 130px;
    background-size: 33px;
    background-position: top 1px right 7px;
  }

  header ul.set {
    width: 27vw;
    margin-left: 0px;
    justify-content: flex-end;
    /* gap: 10px; */
  }

  p.test-slick__item {
    font-size: 4vw;
  }

  p.btn_01 a {
    margin: 50px auto;
  }

  section.concept p img {
    width: 50vw;
    height: 50vw;
  }

  .info {
    font-size: 3.7vw;
  }

  .info div dd {
    padding: 10px 20px;
  }

  section.concept p.str {
    padding: 20px;
    font-size: 2rem;
  }

  /* ul.product_view li {
    width: calc((100% / 2) - 25px);
  } */

  /* .product_single {
    width: calc((100% / 2) - 25px);
  } */

  /* .product_img p img {
    width: 31vw;
  } */

  p.btn_02 a {
    width: 34.66vw;
  }

  .product_detail p {
    font-size: 2.7vw;
  }

  footer .map_list {
    width: 90vw;
  }

  /* nav.search_nav {
    width: 50%;
    padding: 0 50px;
    background: #333;
  }     */



  nav.search_nav ul li.has-child {
    width: 50%;
  }

  nav.search_nav ul li.has-child ul {
    width: 100%;
  }

  nav.search_nav ul li li a {
    padding: 10px;

  }

  /* nav.search_nav {
    width: 50%;
  } */


  nav li.has-child ul li a {
    font-size: 1.7vw;
  }

  .bx-wrapper .bx-prev {
    left: -10px;
  }

  .bx-wrapper .bx-next {
    right: -10px;
  }

  /* item_detail */
  .item {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-top: 50px;
    flex-direction: column;
  }

  .bxslider_img {
    width: 100%;
  }

  .item .item_detail {
    width: 100%;
  }

  .detail_01 {
    gap: 20px;
  }

  .item_detail ul li.detail_02 p {
    font-size: 10vw;
  }

  dl.item_detail_02 dd {
    font-size: 6vw;
  }

  dl.item_detail_02 dt {
    margin-top: 5vw;
  }

  .item_detail p.btn_04 {
    width: 90vw;
  }

  /* cart.html */
  .cart .content .cart_view {
    flex-direction: column;
  }

  .cart_view_1 {
    width: 90vw;
  }

  .cart_view_2 {
    width: 90vw;
  }

  p.btn_04 {
    width: 80vw;
  }

  .cart_view_2 section.gift h3 p {
    font-size: 1.4rem;
    /* text-align: center; */
  }

  ul.etc {
    flex-wrap: wrap;
    margin: 50px auto;
    /* border: 1px solid #000; */
  }

  ul.etc li {
    width: calc(100% / 2);
    height: 50vw;
  }

  ul.etc li:nth-child(1) {
    border-right: none;
    border-bottom: none;
  }

  ul.etc li:nth-child(2) {
    border-right: 1px solid #000;
    border-bottom: none;
  }

  ul.etc li a span {
    /* width: 50vw; */
    height: 50vw;
  }


  section.cart_item_1 ul li.cart_item1_1 p {
    font-size: 4vw;
  }

  section.cart_item_1 ul li.cart_item1_1 .field p a {
    width: 10vw;
    font-size: 2.5vw;
  }

  .cart_view_2 section.gift p.gift_str {
    font-size: 3vw;
  }

  .cart_view_2 section.login_02 ul.tab_wrap {
    width: 80vw;
  }

  .cart_view_2 section.login_02 ul.tab_wrap li {
    font-size: 5vw;
  }

  .cart_view_2 section.login_02 ul.tab_wrap li span {
    font-size: 2.5vw;
  }

  footer .map_list ul li {
    font-size: 2.0vw;
  }

  .footer_detail_2 {
    width: 90vw;
  }

  .footer_detail_2 .sns_img {
    gap: 7vw;
  }

  .footer_detail_2 .sns_img p img {
    width: 7vw;
    height: 7vw;
  }



  header nav ul {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }

  header nav ul li a {
    border-right: none;
    line-height: 70px;
    font-size: 2rem;
  }

  section.novel,
  section.profile {
    width: 100%;
  }

  section.profile div {
    max-width: 150px;
    margin: 0 auto 10px;
  }


  header nav.global_01 ul li a,
.first_view_header nav.global_01 ul li a {
  color: #000;
  text-align: center;
  font-family: Niramit;
  font-size: 10vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0;
}

  /*========= ナビゲーションのためのCSS ===============*/

  #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    /*ナビの高さ*/
    background: #fff;
    /*動き*/
    transition: all 0.6s;
  }

  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive {
    right: 0;
  }

  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*ナビゲーション*/
  #g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /*リストのレイアウト設定*/

  #g-nav li {
    list-style: none;
    text-align: center;
  }

  #g-nav li a {
    color: #333;
    text-decoration: none;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
  }

  /*========= ボタンのためのCSS ===============*/
  .openbtn {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 11px;
    right: 5px;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  /*×に変化*/
  .openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #666;
    width: 45%;
  }

  .openbtn span:nth-of-type(1) {
    top: 15px;
  }

  .openbtn span:nth-of-type(2) {
    top: 23px;
  }

  .openbtn span:nth-of-type(3) {
    top: 31px;
  }

  .openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }
}