@charset "UTF-8";

/* ====== COMMON ====== */
#lwp { color: #232815;
  font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, sans-serif;
  overflow-x: hidden;}

/* ====== PC ====== */
html[data-browse-mode="P"] .pane-contents .container { width: 100%;}
html[data-browse-mode="P"] .sp { display: none;}
html[data-browse-mode="P"] .mv { margin: 0 0 150px;}
html[data-browse-mode="P"] .mv h1 { margin: 0; line-height: 0;}
html[data-browse-mode="P"] .mv h1 img { width: 100%;}
html[data-browse-mode="P"] .inner,
html[data-browse-mode="P"] .block-pickup-list-p--items { width: 1200px; margin: 0 auto;}

html[data-browse-mode="P"] .intro { margin: 50px 0 150px; text-align: center;}
html[data-browse-mode="P"] .intro .logo { margin: 0 0 40px;}
html[data-browse-mode="P"] .intro .logo img { width: 250px;}
html[data-browse-mode="P"] .intro h2 { margin: 0 0 40px; font-size: 48px; font-weight: bold; line-height: 1.3; letter-spacing: 1px;}
html[data-browse-mode="P"] .intro h2 span { font-size: 34px;}
html[data-browse-mode="P"] .intro .text { padding: 40px 0; background: url(../../img/usr/genre/lwp/img_footprints.png) no-repeat center;}
html[data-browse-mode="P"] .intro .text.more-text { display: none;}
html[data-browse-mode="P"] .intro .text p { font-size: 24px; line-height: 2;}

html[data-browse-mode="P"] .btn-more { width: 435px; padding: 11px 0; margin: 0 auto; border: 2px solid #000; display: block; text-align: center; font-size: 24px; font-weight: bold; cursor: pointer;}
html[data-browse-mode="P"] .btn-more:hover { opacity: .8; text-decoration: none;}
html[data-browse-mode="P"] .intro .btn-more { margin-top: 30px;}

html[data-browse-mode="P"] .contest { margin: 0 0 150px;}
html[data-browse-mode="P"] .contest h2 { font-size: 48px; font-weight: bold; text-align: center; margin: 0 0 30px;}
html[data-browse-mode="P"] .contest .intro-text { font-size: 24px; line-height: 2; text-align: center; margin: 0 0 50px;}
html[data-browse-mode="P"] .contest ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;}
html[data-browse-mode="P"] .contest li { width: 370px;}
html[data-browse-mode="P"] .contest li:first-child { width: 100%; margin: 0 0 10px; display: flex; justify-content: center; align-items: center;}
html[data-browse-mode="P"] .contest li .img { line-height: 0; margin: 0 0 20px;}
html[data-browse-mode="P"] .contest li:first-child .img { width: 450px; margin: 0 50px 0 0;}
html[data-browse-mode="P"] .contest li h3 { margin: 0 0 15px; font-weight: bold;}
html[data-browse-mode="P"] .contest li:first-child h3 { font-size: 28px; margin: 0 0 20px;}
html[data-browse-mode="P"] .contest li .comment { font-size: 20px;}
html[data-browse-mode="P"] .contest .message { margin: 70px 0 0; text-align: center;}
html[data-browse-mode="P"] .contest .message .main { font-size: 30px; font-weight: bold; margin: 0 0 10px;}
html[data-browse-mode="P"] .contest .message p { font-size: 20px; margin: 0 0 20px;}
html[data-browse-mode="P"] .contest .message p:last-child { margin: 0;}

html[data-browse-mode="P"] .category { margin: 0 0 180px;}
html[data-browse-mode="P"] .category h2 { text-align: center; margin: 0 0 60px;}
html[data-browse-mode="P"] .category ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
html[data-browse-mode="P"] .category li { width: 585px; margin: 0 0 50px;}
html[data-browse-mode="P"] .category li:nth-last-child(-n+2) { margin: 0;}
html[data-browse-mode="P"] .category li a { height: 230px; padding: 0 0 0 50%; position: relative; display: flex; align-items: center;   box-shadow: 2px 2px 4px gray;}
html[data-browse-mode="P"] .category li a:hover { text-decoration: none; opacity: .8;}
html[data-browse-mode="P"] .category li h3 { margin: 0;  font-size: 26px; font-weight: bold; letter-spacing: 1px;}
html[data-browse-mode="P"] .category li h3 span { font-size: 36px;}
html[data-browse-mode="P"] .category li.food .img      { position: absolute;  left: 20px; width: 250px;}
html[data-browse-mode="P"] .category li.exercize .img  { position: absolute;  left: 20px; width: 250px;}
html[data-browse-mode="P"] .category li.bathgoods .img { position: absolute;  left: 20px; width: 250px;}
html[data-browse-mode="P"] .category li.sleeping .img  { position: absolute; top:  10px; left:-15px;}
html[data-browse-mode="P"] .category li.suppli .img    { position: absolute;  left: 20px; width: 250px;}
html[data-browse-mode="P"] .category li.supporter .img { position: absolute; top: -20px; left: 30px; width: 250px;}
html[data-browse-mode="P"] .item { margin: 0 0 200px;}
html[data-browse-mode="P"] .item h2 { text-align: center; margin: 0 0 60px;}
html[data-browse-mode="P"] .item ul { display: flex;}
html[data-browse-mode="P"] .item li { width: 312px; margin: 0 44px 0 0;}
html[data-browse-mode="P"] .item li:last-child { margin: 0;}
html[data-browse-mode="P"] .item li a:hover { opacity: .8; text-decoration: none;}
html[data-browse-mode="P"] .item li .img { display: block; margin: 0 0 12px;}
html[data-browse-mode="P"] .item li .name { font-size: 16px; font-weight: bold;}
html[data-browse-mode="P"] .item li .price { color: #444; font-size: 26px; font-weight: bold;}
html[data-browse-mode="P"] .item li .price span { font-size: 14px;}

html[data-browse-mode="P"] .point { margin: 0 0 200px;}
html[data-browse-mode="P"] .point h2 { text-align: center; margin: 0 0 45px;}
html[data-browse-mode="P"] .point h3 { margin: 0 0 70px; font-size: 32px; font-weight: bold; text-align: center; line-height: 1.7; letter-spacing: 1px;}
html[data-browse-mode="P"] .point li { position: relative; margin: 0 0 100px; z-index: 1;}
html[data-browse-mode="P"] .point li:before { content: ''; width: 100%; height: 100%; border: 1px solid #6fc5c7; position: absolute; top: 20px; left: -20px; z-index: -1;}
html[data-browse-mode="P"] .point li:nth-child(1):after { content: '';
  width: 567px; height: 344px; position: absolute; top: 140px; right: -120px;
  background: url(../../img/usr/genre/lwp/img_point01.png) no-repeat left top;
}
html[data-browse-mode="P"] .point li:nth-child(2):after { content: '';
  width: 559px; height: 363px; position: absolute; top: 130px; left: -110px;
  background: url(../../img/usr/genre/lwp/img_point02.png) no-repeat left top;
}
html[data-browse-mode="P"] .point li:nth-child(3):after { content: '';
  width: 435px; height: 439px; position: absolute; top: 40px; right: -20px;
  background: url(../../img/usr/genre/lwp/img_point03.png) no-repeat left top;
}
html[data-browse-mode="P"] .point li:last-child { margin: 0;}
html[data-browse-mode="P"] .point li .point-item { padding: 80px 90px; background: #e4f3f3;}
html[data-browse-mode="P"] .point li:nth-child(even) .point-item { display: flex; flex-direction: column; align-items: flex-end;}
html[data-browse-mode="P"] .point .point-ttl { width: 780px; margin: 0 0 40px; display: flex; align-items: center;}
html[data-browse-mode="P"] .point .point-ttl .num { margin: 0 35px 0 0;}
html[data-browse-mode="P"] .point .point-ttl h4 { font-size: 30px; font-weight: bold;}
html[data-browse-mode="P"] .point .point-ttl h4 span { font-size: 40px; padding: 0 7px; background: linear-gradient(transparent 65%, #fff100 35%);}
html[data-browse-mode="P"] .point li .text { width: 630px; font-size: 20px; line-height: 2; text-align: justify;}

html[data-browse-mode="P"] .column { margin: 0 0 50px;}
html[data-browse-mode="P"] .column h2 { text-align: center; margin: 0 0 60px;}
html[data-browse-mode="P"] .column ul { display: flex; flex-wrap: wrap;}
html[data-browse-mode="P"] .column li { width: 380px; padding: 25px; margin: 0 30px 30px 0; background: #e4f3f3;}
html[data-browse-mode="P"] .column li:nth-child(3n) { margin-right: 0;}
html[data-browse-mode="P"] .column li a { display: block;}
html[data-browse-mode="P"] .column li a:hover { text-decoration: none; opacity: .8;}
html[data-browse-mode="P"] .column li .img { margin: 0 0 10px;}
html[data-browse-mode="P"] .column li .text { font-size: 16px;}

html[data-browse-mode="P"] .information { margin: 100px 0;}
html[data-browse-mode="P"] .information h2 { margin: 0 0 60px; text-align: center;}
html[data-browse-mode="P"] .information dl { display: flex; justify-content: center; align-items: center;}
html[data-browse-mode="P"] .information dt { margin: 0 60px 0 0; font-size: 34px;}
html[data-browse-mode="P"] .information dd a { width: 510px; height: 87px; padding: 0; margin: 0 auto; border: 2px solid #deebf7; border-radius: 100px; color: #000; font-size: 30px; font-weight: 400; line-height: 86px; text-align: center; text-decoration: none; letter-spacing: 2px; box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.4); background-color: #deebf7; display: block; position: relative; transition: 0.3s;}
html[data-browse-mode="P"] .information dd a:hover { background-color: #fff; color: #3699f5;}

/* event */
html[data-browse-mode="P"] .block-genre-page--event { width: 1380px; margin: 0 auto 50px;}
html[data-browse-mode="P"] .block-top-event--image { text-align: center; margin: 0 0 60px;}

/* ====== SP ====== */
html[data-browse-mode="S"] { font-size: 16px; line-height: 1.8;}
html[data-browse-mode="S"] .pc { display: none;}
html[data-browse-mode="S"] #lwp { padding: 20px 0 0;}
html[data-browse-mode="S"] .mv { margin: 0 0 70px;}
html[data-browse-mode="S"] h1 { padding: 0;}
html[data-browse-mode="S"] .intro { text-align: center; margin: 0 0 70px;}
html[data-browse-mode="S"] .intro .logo { margin: 0 0 25px;}
html[data-browse-mode="S"] .intro .logo img { width: 40%;}
html[data-browse-mode="S"] .inner { padding: 0 20px;}
html[data-browse-mode="S"] h2 { background: 0; padding: 0; font-size: 21px; text-align: center;}
html[data-browse-mode="S"] h2 span { font-size: 18px;}
html[data-browse-mode="S"] .intro h2 { margin: 0 0 25px;}
html[data-browse-mode="S"] .intro .text { background: url(../../img/usr/genre/lwp/img_footprints.png) no-repeat center / 90%;}
html[data-browse-mode="S"] .intro .text.more-text { display: none; margin: 20px 0 0;}
html[data-browse-mode="S"] .intro .text p:not(:last-child) { margin: 0 0 25px;}
html[data-browse-mode="S"] .btn-more { width: 80%; margin: 0 auto; padding: 9px 0; border: 1px solid #000; text-align: center; font-size: 18px; font-weight: bold; display: block;}
html[data-browse-mode="S"] .intro .btn-more { margin-top: 30px;}
html[data-browse-mode="S"] .contest { margin: 0 0 70px;}
html[data-browse-mode="S"] .contest h2 { margin: 0 0 15px;}
html[data-browse-mode="S"] .contest .intro-text { margin: 0 0 25px; text-align: center;}
html[data-browse-mode="S"] .contest li:not(:last-child) { margin: 0 0 25px;}
html[data-browse-mode="S"] .contest li .img { margin: 0 0 15px;}
html[data-browse-mode="S"] .contest li h3 { padding: 0; margin: 0 0 10px;}
html[data-browse-mode="S"] .contest .message { margin: 25px 0 0;}
html[data-browse-mode="S"] .contest .message .main { margin: 0 0 10px; font-size: 20px; font-weight: bold;}
html[data-browse-mode="S"] .contest .message p:not(:last-child) { margin: 0 0 10px;}

html[data-browse-mode="S"] .category { margin: 0 0 80px;}
html[data-browse-mode="S"] .category h2 { margin: 0 0 10px;}
html[data-browse-mode="S"] .category h2 img { width: 38.51%;}
html[data-browse-mode="S"] .category ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
html[data-browse-mode="S"] .category li { width: calc((100% - 20px) / 2); margin: 30px 0 0;}
html[data-browse-mode="S"] .category li a { height: 100%; padding: 58% 13px 13px; position: relative; display: flex; align-items: flex-end;   box-shadow: 2px 2px 4px gray;}
html[data-browse-mode="S"] .category li a:hover { text-decoration: none;}
html[data-browse-mode="S"] .category li.food .img { width: 80%; position: absolute; top: 3%;}
html[data-browse-mode="S"] .category li.exercize .img { width: 80%; position: absolute; top: 3%; }
html[data-browse-mode="S"] .category li.bathgoods .img { width: 80%; position: absolute; top: 3%;}
html[data-browse-mode="S"] .category li.sleeping .img { width: 80%; position: absolute; top: 3%;}
html[data-browse-mode="S"] .category li.suppli .img { width: 80%; position: absolute; top: 3%;}
html[data-browse-mode="S"] .category li.supporter .img { width: 60%; position: absolute; top: -7%; left: 18%;}
html[data-browse-mode="S"] .category li h3 { padding: 0;  font-size: 16px; line-height: 1.5; font-feature-settings: 'palt';}
html[data-browse-mode="S"] .category li h3 span { font-size: 24px;}

html[data-browse-mode="S"] .item { margin: 0 0 80px;}
html[data-browse-mode="S"] .item h2 { margin: 0 0 25px;}
html[data-browse-mode="S"] .item ul { margin: 0 0 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}
html[data-browse-mode="S"] .item li { width: calc((100% - 20px) / 2); margin: 0 0 30px;}
html[data-browse-mode="S"] .item li:nth-last-child(-n+2) { margin: 0;}
html[data-browse-mode="S"] .item li .img { margin: 0 0 8px; display: block;}
html[data-browse-mode="S"] .item li .name { font-size: 14px;}
html[data-browse-mode="S"] .item li .price { font-size: 18px; font-weight: bold; line-height: 1;}
html[data-browse-mode="S"] .item li .price span { font-size: 11px;}

html[data-browse-mode="S"] .point { margin: 0 0 80px;}
html[data-browse-mode="S"] .point h2 { margin: 0 0 25px;}
html[data-browse-mode="S"] .point h2 img { width: 21.345%;}
html[data-browse-mode="S"] .point h3 { padding: 0; margin: 0 0 70px; font-size: 18px; text-align: center;}
html[data-browse-mode="S"] .point li { margin: 0 0 100px; position: relative; z-index: 1;}
html[data-browse-mode="S"] .point li:before { content: ''; width: 100%; height: 100%; border: 1px solid #6fc5c7; position: absolute; top: 8px; left: -8px; z-index: -1;}
html[data-browse-mode="S"] .point li:nth-child(1):after { 
	content: ''; width: 70%; height: 55%; margin: auto; position: absolute; top: -10%; right: 0; left: 0;
  background: url(../../img/usr/genre/lwp/img_point01.png) no-repeat left top / contain;
}
html[data-browse-mode="S"] .point li:nth-child(2):after { 
	content: ''; width: 75%; height: 40%; margin: auto; position: absolute; top: -12%; right: 0; left: 0;
  background: url(../../img/usr/genre/lwp/img_point02.png) no-repeat left top / contain;
}
html[data-browse-mode="S"] .point li:nth-child(3):after { 
	content: ''; width: 44%; height: 45%; margin: auto; position: absolute; top: -14%; right: 0; left: 0;
  background: url(../../img/usr/genre/lwp/img_point03.png) no-repeat left top / contain;
}
html[data-browse-mode="S"] .point li:last-child { margin: 0;}
html[data-browse-mode="S"] .point li .point-item { padding: 34% 15px 28px; background: #e4f3f3;}
html[data-browse-mode="S"] .point li:last-child .point-item { padding-top: 32%;}
html[data-browse-mode="S"] .point .point-ttl { margin: 0 0 15px; display: flex; align-items: flex-start;}
html[data-browse-mode="S"] .point .point-ttl .num { width: 51px; margin: 6px 15px 0 0;}
html[data-browse-mode="S"] .point li:nth-child(1) .point-ttl .num { width: 41px;}
html[data-browse-mode="S"] .point .point-ttl h4 { font-size: 18px; font-weight: bold; line-height: 1.4; flex: 1;}
html[data-browse-mode="S"] .point .point-ttl h4 span { padding: 0 7px; font-size: 22px; background: linear-gradient(transparent 65%, #fff100 35%);}
html[data-browse-mode="S"] .point li .text { font-size: 15px; line-height: 1.7; text-align: justify; font-feature-settings: 'palt';}

html[data-browse-mode="S"] .column { margin: 0 0 50px;}
html[data-browse-mode="S"] .column h2 { margin: 0 0 30px;}
html[data-browse-mode="S"] .column h2 img { width: 30.3%;}
html[data-browse-mode="S"] .column li { padding: 20px; margin: 0 15px 25px; background: #e4f3f3;}
html[data-browse-mode="S"] .column li:last-child { margin-bottom: 0;}
html[data-browse-mode="S"] .column li a { display: block; text-decoration: none;}
html[data-browse-mode="S"] .column li .img { margin: 0 0 12px;}

html[data-browse-mode="S"] .information { margin: 80px 0;}
html[data-browse-mode="S"] .information h2 { margin: 0 0 30px; text-align: center;}
html[data-browse-mode="S"] .information h2 img { width: 60%;}
html[data-browse-mode="S"] .information dl {}
html[data-browse-mode="S"] .information dt { margin: 0 0 20px 0; font-size: 20px; text-align: center;}
html[data-browse-mode="S"] .information dd { margin: 0 15px;}
html[data-browse-mode="S"] .information dd a { width: 100%; height: 57px; padding: 0; margin: 0 auto; border: 2px solid #deebf7; border-radius: 100px; color: #000; font-size: 20px; font-weight: 400; line-height: 55px; text-align: center; text-decoration: none; letter-spacing: 2px; box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.4); background-color: #deebf7; display: block; position: relative; transition: 0.3s;}

/* event */
html[data-browse-mode="S"] .block-genre-page--event { padding: 0 20px; margin: 0 0 80px;}
html[data-browse-mode="S"] .block-top-event--image img { width: 36.42%;}
html[data-browse-mode="S"] .block-pickup-list-p--items { margin-top: 10px;}