@charset "utf-8";



/* --------------------------------------------------------------------------------
essential
-------------------------------------------------------------------------------- */

body {
	font-size: 0.875rem;
	line-height: 1.75rem;
}
p.note {
	font-size: 0.6875rem;
	line-height: 1.375rem;
}



/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

br.large {
	display: none;
}
br.small {
	display: inline;
}



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

header#header {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	left: auto;
	top: auto;
	padding: 0px;
	background-color: transparent;
  transform: none;
}
header#header.scroll {
  transform: none;
}
header#header h1,
header#header p#button-menu {
	position: fixed;
}
header#header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
	width: 100%;
  height: 50px;
  left: 0px;
  top: 0px;
  z-index: 20;
  padding: 5px 0px 10px 15px;
  background-color: #ffffff;
	transition: 0.375s transform ease;
	transform: translateY(-50px);
}
header#header.scroll h1 {
	transform: translateY(0px);
}
header#header h1 img {
  width: auto;
  height: 25px;
}
header#header p#button-menu {
  width: 50px;
  height: 50px;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 40;
}
header#header p#button-menu i {
  display: block;
  position: absolute;
  background-color: #000000;
  width: 20px;
  height: 1px;
  left: 15px;
  top: 24px;
  transform-origin: 50% 50%;
  transition: 0.375s background-color ease;
}
header#header.menu p#button-menu i {
  background-color: #ffffff;
}
header#header p#button-menu i:nth-child(1) {
	transform: translateY(-5px) rotate(0deg);
}
header#header p#button-menu i:nth-child(2) {
	transform: translateY(5px) rotate(0deg);
}
header#header.menu p#button-menu i:nth-child(1) {
  animation: button-menu-row-01 0.375s 1 forwards;
}
header#header.close p#button-menu i:nth-child(1) {
  animation: button-menu-row-01-close 0.375s 1 forwards;
}
header#header.menu p#button-menu i:nth-child(2) {
  animation: button-menu-row-02 0.375s 1 forwards;
}
header#header.close p#button-menu i:nth-child(2) {
  animation: button-menu-row-02-close 0.375s 1 forwards;
}
@keyframes button-menu-row-01 {
	0% { transform: translateY(-5px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(-45deg); }
}
@keyframes button-menu-row-01-close {
	0% { transform: translateY(0px) rotate(-45deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(-5px) rotate(0deg); }
}
@keyframes button-menu-row-02 {
	0% { transform: translateY(5px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(45deg); }
}
@keyframes button-menu-row-02-close {
	0% { transform: translateY(0px) rotate(45deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(5px) rotate(0deg); }
}
header#header div#menu {
  position: fixed;
  box-sizing: border-box;
	width: 240px;
	height: 100%;
	right: 0px;
	top: 0px;
  overflow: auto;
	z-index: 30;
  color: #ffffff;
	background-color: #000000;
	transform: translateX(240px);
	transition: 0.375s transform ease;
	-webkit-overflow-scrolling: touch;
}
header#header.menu div#menu {
	transform: translateX(0px);
}
header#header div#menu div.inner-menu {
  padding: 70px 40px 40px 40px;
}
header#header nav#navi {
	display: block;
  margin-bottom: 50px;
}
header#header nav#navi ul {
	display: block;
  margin: 0px 0px 40px 0px;
}
header#header nav#navi ul li {
	font-size: 1.875rem;
}
header#header nav#navi ul li:not(:last-child) {
  margin: 0px 0px 30px 0px;
}
header#header nav#navi p.button a {
	width: auto;
  height: 45px;
  border-color: #ffffff;
}
header#header div.misc {
	display: block;
}
header#header div.misc div.links {
  margin-bottom: 20px;
}
header#header div.misc div.links ul li {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
	font-size: 0.75rem;
}
header#header div.misc div.sns ul {
  display: flex;
  flex-wrap: wrap;
}
header#header div.misc div.sns ul li {
	font-size: 1.5rem;
}
header#header div.misc div.sns ul li:not(:last-child) {
	margin-right: 10px;
}
header#header div#background-menu {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 25;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.375);
	opacity: 0;
	transition: 0.25s opacity ease;
}
header#header.menu div#background-menu {
	pointer-events: auto;
	opacity: 1;
}



/* --------------------------------------------------------------------------------
cover
-------------------------------------------------------------------------------- */

div#cover div.image p.row {
  width: 300%;
}
div#cover div.image p.row span {
	background-position: left center;
	animation-duration: 35s;
}
@keyframes slide-image {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-67.5%); }
}
div#cover nav#navi-cover {
  display: none;
}



/* --------------------------------------------------------------------------------
content
-------------------------------------------------------------------------------- */

div#content section div.inner-section {
	width: auto;
  padding: 0px 25px;
}
div#content h2.headline {
	font-size: 2.5rem;
	line-height: 2.25rem;
}

/* concept
-------------------------------------------------------------------------------- */

div#content section#concept div.inner-section {
	padding: 55px 25px 130px 25px;
}
div#content section#concept div.image-text {
	display: block;
	margin-bottom: 80px;
}
div#content section#concept div.image-text p.image {
	width: calc(100% + 25px);
  margin-right: -25px;
}
div#content section#concept div.image-text div.text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  position: relative;
	width: auto;
  height: 160px;
}
div#content section#concept div.image-text div.text h2 {
  position: absolute;
  left: 35px;
  top: -130px;
	margin-bottom: 0px;
}
div#content section#concept div.image-text div.text h2 img {
	height: 180px;
}
div#content section#concept div.image-text div.text p.description {
  font-size: 1rem;
  line-height: 2rem;
  padding-left: 25px;
}
div#content section#concept div.campaign {
	display: block;
	padding: 0px;
}
div#content section#concept div.campaign div.main {
	width: auto;
	margin-right: 0px;
	padding: 35px;
}
div#content section#concept div.campaign div.main h3 {
	font-size: 1.1875rem;
}
div#content section#concept div.campaign div.main p.description {
	font-size: 0.8125rem;
	line-height: 1.5rem;
}
div#content section#concept div.campaign div.sub {
	width: auto;
	padding: 35px;
	background-color: #f5f3f0;
}
div#content section#concept div.campaign div.sub h3 {
	font-size: 1.125rem;
}

/* about
-------------------------------------------------------------------------------- */

div#content section#about {
	margin-bottom: 100px;
}
div#content section#about div.inner-section {
	width: auto;
  padding: 0px;
}
div#content section#about h2.headline {
  display: none;
}
div#content section#about h2.headline-small {
	display: block;
  margin-bottom: 30px;
  padding-left: 25px;
}
div#content section#about div.block div.inner-block {
	width: auto;
  padding: 0px 25px;
}
div#content section#about div.block div.text {
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
}
div#content section#about div.block div.text h3 {
	font-size: 1.375rem;
	line-height: 2.125rem;
	margin-bottom: 20px;
}
div#content section#about div.block div.text h3 span.num {
	left: -15px;
	top: -70px;
}
div#content section#about div.block div.text h3 span.num-02,
div#content section#about div.block div.text h3 span.num-04 {
	left: auto;
	right: 20px;
	top: -35px;
}
div#content section#about div.block-01 {
	margin-bottom: 230px;
}
div#content section#about div.block-01 div.inner-block {
	display: block;
}
div#content section#about div.block-01 p.image {
	width: calc(100% + 50px);
  margin: 0px -25px;
}
div#content section#about div.block-01 div.text {
  margin-top: -100px;
	padding: 35px 35px 0px 35px;
  background-color: rgba(255, 255, 255, 0.85);
}
div#content section#about div.block-01 div.text h3 {
  text-align: center;
  margin-bottom: 40px;
}
div#content section#about div.block-02 {
  margin-bottom: 300px;
}
div#content section#about div.block-02 div.hanabi-01 {
	width: calc(100vw - 15px);
	max-width: 480px;
	height: calc(564px * 0.65);
	right: 0px;
	top: -200px;
}
div#content section#about div.block-02 div.hanabi-02 {
	width: calc(100vw - 80px);
	max-width: 320px;
	height: calc(708px * 0.65);
	top: auto;
	bottom: -460px;
}
div#content section#about div.block-02 div.text {
	margin-bottom: 50px;
}
div#content section#about div.block-02 div.video {
	width: auto;
	margin: 0px 0px 25px 0px;
}
div#content section#about div.block-02 div.video div.image p.button {
	width: 44px;
	height: 80px;
	background-image: url(../../images/button-play-small.svg);
	background-size: auto 62px;
}
div#content section#about div.block-02 p.image-02 {
	width: auto;
	margin: 0px;
}
div#content section#about div.block-03 {
	margin: 0px 0px 260px 0px;
}
div#content section#about div.block-03 div.hanabi {
	width: calc(100vw - 80px);
	max-width: 460px;
	height: calc(1070px * 0.45);
	top: auto;
	bottom: -480px;
}
div#content section#about div.block-03 div.text {
	margin-bottom: 50px;
}
div#content section#about div.block-03 p.image {
	width: auto;
}
div#content section#about div.block-03 p.image-01 {
	width: auto;
	margin-bottom: 25px;
}
div#content section#about div.block-04 {
	margin-bottom: 260px;
}
div#content section#about div.block-04 div.hanabi {
  display: none;
}
div#content section#about div.block-04 div.text,
div#content section#about div.block-05 div.text {
	width: auto;
	margin: 0px 0px 50px 0px;
}
div#content section#about div.block-04 p.image-01,
div#content section#about div.block-05 p.image-01 {
	width: auto;
	margin: 0px 0px 25px 0px;
}
div#content section#about div.block-04 p.image-02,
div#content section#about div.block-05 p.image-02 {
	width: auto;
}
div#content section#about div.block-05 div.hanabi {
	width: calc(100vw - 80px);
	max-width: 340px;
	height: calc(508px * 0.6);
	top: -200px;
}
div#content section#about div.block-05 div.text p.description {
	margin-bottom: 10px;
}
div#content section#about div.block-05 div.text p.note {
	margin-right: 0px;
}

/* photogenic
-------------------------------------------------------------------------------- */

div#content section#photogenic {
	/* color: #ffffff; */
	margin-bottom: 150px;
	background-color: transparent;
}
div#content section#photogenic div.inner-section {
	padding: 0px;
}
div#content section#photogenic p.image {
	position: static;
	width: auto;
	right: auto;
	bottom: auto;
}
div#content section#photogenic div.text {
	/* position: relative;
	z-index: 1; */
	padding: 35px 40px 40px 40px;
	background-color: #02456c;
}
div#content section#photogenic div.text h2.headline {
	/* position: relative; */
	font-size: 1.875rem;
	margin-bottom: 10px;
}
div#content section#photogenic div.text h2.headline::before {
	/* position: absolute; */
	width: 20px;
	height: 20px;
	left: 155px;
	top: -5px;
	/* background: url(../../images/icon-photogenic.svg) no-repeat center;
	background-size: auto 100%; */
	/* content: ""; */
}
div#content section#photogenic div.text p.description {
	width: auto;
	line-height: 1.5rem;
}

/* design
-------------------------------------------------------------------------------- */

div#content section#design {
	position: relative;
	margin-bottom: 150px;
}
div#content section#design::before {
	height: 480px;
  top: 180px;
	bottom: auto;
}
div#content section#design div.inner-section {
	padding-bottom: 0px;
}
div#content section#design h2.headline-small {
	display: block;
  margin-bottom: 30px;
}
div#content section#design header {
	margin-bottom: 35px;
}
div#content section#design header h2 {
  display: none;
}
div#content section#design div.summary {
	display: block;
	margin-bottom: 50px;
	padding: 0px 15px;
}
div#content section#design div.summary h3 {
	width: auto;
	font-size: 1.375rem;
	line-height: 2.125rem;
  margin-bottom: 20px;
}
div#content section#design div.summary p.description {
	width: auto;
}
div#content section#design div.list {
	display: block;
}
div#content section#design div.list div.row {
	width: auto;
}
div#content section#design div.list div.row:not(:last-child) {
  margin-bottom: 50px;
}
div#content section#design div.list div.row p.image {
	margin-bottom: 20px;
}
div#content section#design div.list div.row div.text {
	padding: 0px 15px;
}

/* product
-------------------------------------------------------------------------------- */

div#content section#product {
	margin-bottom: 130px;
}
div#content section#product header {
  margin: 0px -25px 80px -25px;
}
div#content section#product header h2 {
	left: 25px;
	bottom: 20px;
}
div#content section#product header p.image img.large {
	display: none;
}
div#content section#product header p.image img.small {
	display: block;
}
div#content section#product div.list,
div#content section#product div.banner {
	width: auto;
}
div#content section#product div.list {
	margin-bottom: 100px;
}
div#content section#product div.list div.row:not(:last-child) {
	margin-bottom: 100px;
}
div#content section#product div.list div.row div.inner-row {
	padding-top: 0px;
}
div#content section#product div.list div.row div.inner-row::before {
  display: none;
}
div#content section#product div.list div.row h3,
div#content section#product div.list div.row p.description {
  padding-left: 15px;
}
div#content section#product div.list div.row h3 {
	font-size: 1.375rem;
	margin-bottom: 10px;
}
div#content section#product div.list div.row p.description {
	margin-bottom: 20px;
}
div#content section#product div.list div.row div.image-text {
	display: block;
}
div#content section#product div.list div.row div.image-text p.image {
	width: auto;
}
div#content section#product div.banner div.image-text p.image img.large {
	display: none;
}
div#content section#product div.banner div.image-text p.image img.small {
	display: block;
}
div#content section#product div.list div.row div.image-text div.text {
	width: calc(100% - 30px);
  margin: -20px auto 0px auto;
	padding: 30px 35px;
}
div#content section#product div.list div.row:nth-child(2n+1) div.image-text div.text {
	padding-left: 35px;
}
div#content section#product div.list div.row:nth-child(2n) div.image-text div.text {
	padding-right: 35px;
}
div#content section#product div.list div.row div.image-text div.text::before {
	width: 100%;
}
div#content section#product div.list div.row div.image-text div.text h4 {
	margin-bottom: 15px;
}
div#content section#product div.list div.row div.image-text div.text p.price-fixed {
	margin-bottom: 15px;
}
div#content section#product div.list div.row div.image-text div.text p.price {
	font-size: 2rem;
	margin-bottom: 15px;
}
div#content section#product div.list div.row div.image-text div.text p.price span.tax {
	font-size: 0.8125rem;
}
div#content section#product div.list div.row div.image-text div.text p.button {
	font-size: 0.9375rem;
}
div#content section#product div.list div.row div.image-text div.text p.button a {
	height: 60px;
}
div#content section#product div.list div.row div.image-text div.text p.button i.icon {
	font-size: 1.125rem;
}
div#content section#product div.banner div.image-text {
	display: block;
}
div#content section#product div.banner div.image-text p.image {
	width: auto;
}
div#content section#product div.banner div.image-text p.image img.large {
	display: none;
}
div#content section#product div.banner div.image-text p.image img.small {
	display: block;
}
div#content section#product div.banner div.image-text div.text {
	display: block;
  position: relative;
	width: auto;
	padding: 65px 35px 35px 35px;
}
div#content section#product div.banner div.image-text div.text h2 {
  position: absolute;
	width: 85px;
  right: 35px;
  top: -119px;
	margin-right: 0px;
}
div#content section#product div.banner div.image-text div.text div.group {
	width: auto;
}
div#content section#product div.banner div.image-text div.text div.group p.description {
  text-align: center;
	font-size: 1rem;
	line-height: 1.875rem;
}

/* instagram
-------------------------------------------------------------------------------- */

div#content section#instagram {
	background-color: transparent;
}
div#content section#instagram div.inner-section {
	padding: 0px;
}
div#content section#instagram h2.headline {
	margin-bottom: 30px;
  padding-left: 25px;
}
div#content section#instagram div.image-list {
	display: block;
}
div#content section#instagram div.image-list p.image {
	width: auto;
	margin-right: 0px;
}
div#content section#instagram div.image-list p.image img.large {
	display: none;
}
div#content section#instagram div.image-list p.image img.small {
	display: block;
}
div#content section#instagram div.image-list div.list {
	width: auto;
  padding: 50px 25px;
	background-color: #f5f3f0;
}
div#content section#instagram div.image-list div.list ul {
	margin: 0px -15px 15px 0px;
}
div#content section#instagram div.image-list div.list ul li {
	width: calc(50% - 15px);
	margin: 0px 15px 15px 0px;
}

/* news
-------------------------------------------------------------------------------- */

div#content section#news div.inner-section {
	display: block;
	padding: 80px 25px;
}
div#content section#news div.inner-section h2.headline {
	width: auto;
  margin-bottom: 30px;
}
div#content section#news div.inner-section div.list {
	width: auto;
}
div#content section#news div.inner-section div.list div.row {
	padding: 30px 15px;
}
div#content section#news div.inner-section div.list div.row p.created {
	margin-bottom: 5px;
}
div#content section#news div.inner-section div.list div.row h3 {
	font-size: 1rem;
	padding-right: 30px;
}
div#content section#news div.inner-section div.list div.row h3::before {
	width: 22px;
	height: 12px;
	top: 8px;
  background-image: url(../../images/arrow-collapse-small.svg);
}
div#content section#news div.inner-section div.list div.row div.body p {
	padding-top: 10px;
}



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

footer#footer p#button-page-top {
	right: 10px;
	bottom: 10px;
}
footer#footer p#button-page-top.position {
	top: -50px;
}
footer#footer p#button-page-top a {
	width: 40px;
	height: 40px;
  background-image: url(../../images/arrow-page-top-small.svg);
	background-size: auto 11px;
}
footer#footer div.information {
	display: block;
	width: auto;
	margin: auto;
	padding: 60px 35px 35px 35px;
}
footer#footer div.information h3 {
  position: absolute;
	width: 100px;
  left: 35px;
  top: 87px;
	margin-right: 0px;
}
footer#footer div.information nav#navi-footer {
	width: auto;
  margin-bottom: 30px;
}
footer#footer div.information nav#navi-footer ul {
	display: block;
	flex-wrap: wrap;
	margin-bottom: 35px;
  padding-left: calc(100% - 120px);
}
footer#footer div.information nav#navi-footer ul li {
	width: 120px;
}
footer#footer div.information div.misc {
	margin: 0px;
}
footer#footer div.information div.misc div.links ul li {
	font-size: 0.75rem;
}
footer#footer div.information p.copyright {
	width: auto;
	left: auto;
  right: 35px;
	bottom: 35px;
}