@charset "UTF-8";

/* ========================================================================
ResetCss
======================================================================== */
/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

/* 行の高=フォントサイズ */
body {
  line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

/* ulのマーカー非表示 */
ol, ul {
  list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
  quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  outline: none;
  text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
  text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
  border-collapse:collapse;
  border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
  vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
  max-width: 100%;
  height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
  line-height: inherit;
}

/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp-only {display: none !important;}
.pc-only {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 999px) {
  .pc-only {display: none !important;}
  .sp-only {display: block !important;}
}

/*  共通
-------------------------------------------------------------*/
html {
	width: 100%;
	height: 100%;
	font-size: 0.7142857vw;
}

@media screen and (max-width: 1920px) {
	html { font-size: 0.7142857vw; }
}

@media (max-width: 999px) {
	html { font-size: 2.6666667vw; }
}



body{
  font-family: "M PLUS Rounded 1c", sans-serif;
  /* background: #FFBED8; */
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px;
  line-height: normal;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
  counter-reset: number 0;
  line-height: 1.71428571;
}

.en {font-family: "DynaPuff", system-ui; font-weight: 500;}

a {transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; color: #000;}
a:hover {opacity: 0.7; transition:.2s all; text-decoration: none;}
a img {transition:.2s all;}
a img:hover {opacity: 0.7; transition:.2s all;}
button {transition:.2s all;}
button:hover {opacity: 0.7; transition:.2s all;}
form {margin: 0;}

main {position: relative; z-index: 1;}
.inner {width: 100%; max-width: 120rem; margin: 0 auto; position: relative;}
.inner.small {max-width: 1100px;}
.list {display: flex; flex-wrap: wrap;}

@media screen and (max-width: 999px) {
 .list {flex-direction: column;}
}

.contents {width: 100%; padding: 0;}
.contents .main {width: 100%;}

.w-bg {background: #fff;}
.scenery {position: fixed; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: 100%; height: auto; z-index: -1; display: block; margin: auto;}
.scenery img {width: 100%; height: 100vh; object-fit: cover;}
.button {border: 1px solid #000000; display: flex; justify-content: center; align-items: center; width: 28rem; height: 5.5rem; font-size: 1.6rem;}

.image {position: relative;}
.icon-area {display: flex; gap: .4rem; position: absolute; top: 1rem; left: 1rem; z-index: 1;}
.icon {display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border-radius: 100%; color: #fff; font-weight: 700;}
.icon.new {background-color: #D75B2E; font-size: 1.3rem;}
.icon.collaboration {background-color: #000; font-size: 1.1rem;}
.icon.staff {background-color: #A57A43; font-size: .9rem; line-height: 1.1; letter-spacing: -0.1em;}

#gnav {display: none;}
#contents {padding-top: 15.9rem;}
.header_area,
.footer_area {display: none !important;}

#gnav div.cart-nav ul li a:hover, #gnav div.cart-nav ul li a:active, #gnav nav ul li a:hover, #gnav nav ul li a:active, article a:hover p, div.cart-article a:hover p, #sub-column div.snav_mailMag_cont input.submit_mailMag:hover, #Journal a .more:hover, input[type="submit"].btn-confirmPost:hover, input[type="button"].btn-confirmBack:hover, #contact input.btn-confirmNext:hover, #contact .btn-enq input.btn-confirmNext:hover, #contact .mailMF input.btn-confirmNext:hover, #contact .mailMC input.btn-confirmNext:hover, #sub-column .link.keyword nav ul li a:hover, #sub-column div.snav_mailMag_cont input.submit_mailMag:hover {background-color: inherit;}

select:has(option:checked[value=""]) {color: #CCCCCC;}

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

}

/* パンクズ
-------------------------------------------------------------*/
.breadcrumbs {padding-top: 0;}
.breadcrumbs ul {display: flex; align-items: center; gap: 1.1rem;}
.breadcrumbs li {display: flex; align-items: center; gap: 1.1rem; font-size: 1.6rem; font-weight: 700;}
.breadcrumbs li:after {content: url(../img/item_detail/breadcrumbs_arrow.svg); display: block;}
.breadcrumbs li:last-child::after {display: none;}

@media screen and (max-width: 999px) {
  .breadcrumbs {padding-left: 2rem;}
  .breadcrumbs .inner {overflow-x: scroll;}
  .breadcrumbs ul {white-space: nowrap;}
  .breadcrumbs li {font-size: 1.4rem;}
}


/* =================================================================
ヘッダー
=================================================================*/
#header {display: flex; justify-content: space-between; align-items: center; padding: 0 3rem 0 2rem; position: fixed; top: 0; width: 100%; z-index: 9999;}
#header .logo {display: block;}
#header .logo img {height: 15.9rem;}

#header nav {display: flex; gap: 2.2rem;}
#header .cart img {width: 7rem;}
#header .menu-button {display: flex; align-items: center; justify-content: center; font-size: 4rem; line-height: 1; font-weight: 600; color: #fff; width: 14.6rem; height: 7.5rem; background-image: url(../img/common/menu_button_bg.png); background-size: cover;}
#header .menu-button.active {background-image: url(../img/common/menu_button_bg_active.png); color: #2EBBE1;}

#head_submenu {position: fixed; inset: 0; z-index: 10000; background: none; opacity: 0; visibility: hidden; pointer-events: none; display: block; transition: opacity .35s ease, visibility .35s ease; top: 13.9rem;}
#head_submenu.open {opacity: 1; visibility: visible; pointer-events: auto;}
#head_submenu .head {position: absolute; top: 0; right: 1rem; width: 28.2rem; height: 100%; border-radius: 60px; border: 2.4px solid #EE86AF; background: #FFBED8; overflow-y: auto; padding: 6.1rem 0rem 6rem; box-sizing: border-box; transform: translateX(100%); transition: transform .35s ease; height: calc(100vh - 16.9rem); box-shadow: .6rem .6rem 0 0 #5777FF;}
#head_submenu .head .inner {padding: 0 4rem;}
#head_submenu.open .head {transform: translateX(0);}

#head_submenu .header-nav {display: flex; flex-direction: column; gap: 2rem;}
#head_submenu .header-nav .header-category {display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;}
#head_submenu .header-nav .header-category .item {display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; font-weight: 700; width: 20rem; border-bottom: 2px solid #000; padding-bottom: 1.6rem;}
#head_submenu .header-nav .header-category .item:after {content: ""; display: block; width: 3.5rem; height: 2rem; background-image: url(../img/common/link_arrow.svg); background-size: cover;}

#head_submenu .header-nav .header-menu {line-height: 290%;}
#head_submenu .header-nav .header-menu a {display: block; font-size: 1.4rem; font-weight: 700;}

@media screen and (max-width: 1285px) {
  #header {padding: 0 2rem 0 1.5rem;}
  #header .logo img {height: 7.7rem;}
  #header .cart img {width: 4.5rem;}

  #header .menu-button {font-size: 2.4rem; width: 8.76rem; height: 4.5rem;}

  #head_submenu {top: 7.8rem;}
  #head_submenu .head {height: calc(100vh - 9.8rem);}
}


/* =================================================================
フッター
=================================================================*/
#footer {width: 100%; background-image: url(../img/common/footer_bg.png); background-size: 100%; background-position: top center; background-repeat: no-repeat; padding-top: 46.8rem; position: relative; z-index: 100;}
#footer.is_top {margin-top: -43.6rem;}
#footer.is_item_detail {margin-top: 4rem;}
#footer.is_item_detail.has-detail {margin-top: -19.1rem;}


#footer:before {content: ""; width: 100%; height: 45.794rem; display: block; background-image: url(../img/common/footer_bg_top.png); background-size: 100%; background-repeat: no-repeat; position: absolute; left: 0; right: 0; top: 18rem; margin: auto;}
#footer .footer-logo {display: block; width: 26rem; height: auto; margin: auto;}
#footer .footer-logo img {display: block;}

#footer .inner {position: relative; max-width: 140rem;}
#footer .bg_icon {position: absolute; display: block; height: auto;}

#footer .bg_icon.icon1 {width: 6.4rem; left: 25.3rem; bottom: 50.6rem;}
#footer .bg_icon.icon2 {width: 8.2rem; right: 18.2rem; bottom: 45.7rem;}
#footer .bg_icon.icon3 {width: 12.4rem; right: 60rem; bottom: 9.2rem;}
#footer .bg_icon.icon4 {width: 14.9rem; left: 8rem; bottom: 36rem;}

#footer .footer-content {display: flex; justify-content: space-between; max-width: 140rem; margin: -6.3rem auto 0; padding: 0 10.3rem 7.3rem 6.3rem;}
#footer .footer-content .founder {width: 64.3rem; height: 42rem; background-image: url(../img/common/footer_founder_bg.png); background-size: cover; padding: 9.1rem 0 0 7.5rem;}
#footer .footer-content .founder .flex {display: flex; align-items: center;}
#footer .footer-content .founder img {width: 22.3rem; height: auto;}
#footer .footer-content .founder h2 {font-size: 2rem; line-height: 130%; margin-bottom: 2rem;}
#footer .footer-content .founder h2 span {display: block; font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem;}
#footer .footer-content .founder h2 strong {font-weight: 700; border-bottom: .2rem solid #000; display: inline-block; padding-bottom: 1rem;}
#footer .footer-content .founder p {font-size: 1.4rem; font-weight: 700; line-height: 150%;}

#footer .footer-nav {display: flex; gap: 8.8rem; padding-top: 9rem;}
#footer .footer-nav .footer-category {display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;}
#footer .footer-nav .footer-category .item {display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; font-weight: 700; width: 20rem; border-bottom: 2px solid #000; padding-bottom: 1.6rem;}
#footer .footer-nav .footer-category .item:after {content: ""; display: block; width: 3.5rem; height: 2rem; background-image: url(../img/common/link_arrow.svg); background-size: cover;}

#footer .footer-nav .footer-menu {line-height: 290%;}
#footer .footer-nav .footer-menu a {display: block; font-size: 1.6rem; font-weight: 700;}

#footer .footer-inner { background-color: #FFBED8;}
#footer .footer-bottom {width: 100%; height: 6rem; background: #EE86AF; display: flex; justify-content: space-between; align-items: center; padding: 0 10rem;}
#footer .footer-bottom .links {display: flex; align-items: center; gap: 2em; font-size: 1.4rem; font-weight: 700;}
#footer .footer-bottom .copy {font-size: 1.4rem; font-weight: 700;}

@media screen and (max-width: 999px) {
  #footer {height: 79.8rem; background-image: url(../img/common/footer_bg_sp.png); padding-top: 15.2rem;}
  #footer.is_top {margin-top: -8.9rem;}
  #footer.is_item_detail {margin-top: 2rem;}
  #footer.is_item_detail.has-detail {margin-top: -8.9rem;}

  #footer:before {background-image: url(../img/common/footer_bg_top_sp.png); top: 4.5rem;}
  #footer .footer-logo {width: 17.3rem;}
  #footer .footer-logo img {width: 17.3rem;}

  #footer .bg_icon {display: none;}

  #footer .inner {overflow: hidden;}
  #footer .footer-content {flex-direction: column; align-items: center; margin: auto; padding: 0 0 3.5rem;}
  #footer .footer-content .founder {width: 36.5rem; height: auto; background: none; padding: 7rem 0 0 1.36rem;}
  #footer .footer-content .founder .flex {align-items: flex-start;}
  #footer .footer-content .founder img {width: 12.2rem; height: auto;}
  #footer .footer-content .founder .text {padding-top: 1.3rem;}
  #footer .footer-content .founder h2 {font-size: 1.8rem;}
  #footer .footer-content .founder h2 span {font-size: 1.2rem;}
  #footer .footer-content .founder h2 strong {border-bottom: .1rem solid #000;}
  #footer .footer-content .founder p {font-size: 1.3rem;}
  #footer .footer-nav {padding-top: 10.5rem;}
  #footer .footer-nav .footer-category .item {display: none;}
  #footer .footer-nav .footer-menu {display: none;}

  #footer .footer-inner {background: none;}
  #footer .footer-bottom {height: 5rem; justify-content: center;}
  #footer .footer-bottom .links {display: none;}
  #footer .footer-bottom .copy {font-size: 1.2rem;}
}