@charset "UTF-8";
/*==========================
リセット
==========================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-area.lp * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-area.lp table {
  border-spacing: 0;
  border-collapse: collapse;
}

.main-area.lp * html table {
  border-collapse: collapse;
}

.main-area.lp *:first-child + html table {
  border-collapse: collapse;
}

.main-area.lp caption, th {
  text-align: left;
  font-weight: normal;
}

.main-area.lp table, th, td, img {
  border: 0;
}

.main-area.lp input {
  vertical-align: middle;
  outline: none;
}

.main-area.lp q:before, q:after {
  content: "";
}

.main-area.lp ul {
  list-style: none;
}

.main-area.lp hr,
.main-area.lp legend,
.main-area.lp caption {
  display: none;
}

.main-area.lp img {
  border: 0;
  vertical-align: bottom;
}

.main-area.lp a:focus {
  outline: none;
}

/* aタグ設定
------------------------------------- */
.alpha a:hover {
	opacity:0.75;
}
.main-area.lp a {
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	transition-delay: 0s;
	text-decoration: none;
}
/* 基本設定
------------------------------------- */
html { font-size: 62.5%; } 
body .main-area.lp {
	-webkit-text-size-adjust: 100%;
	font-size: 1.4rem;/* =14px */
  font-family: 'Josefin Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background-color: #F0F0EB;
  color: #3C3C3C;
}
.main-area.lp ul {
	list-style: none;
}
.main-area.lp .font-white {
  color: #fff;
}
.main-area.lp h2 {
  font-size: 7.8rem;
  font-weight: 500;
}
/*rugiada
-------------------------------------*/
.main-area.lp #fv {
  min-width: 1366px;
  width: 100%;
  height: auto;
  font-weight: 100;
}
.main-area.lp #fv p:first-of-type {
  font-weight: 500;
}
.main-area.lp .fv-area {
  position: relative;
}
.main-area.lp .logo-area {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main-area.lp .logo-area p:first-of-type {
  font-size: 6.0rem;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-area.lp .logo-area p:last-of-type {
  font-size: 3.0rem;
  letter-spacing: 0.05em;
}

.main-area.lp .section {
  margin: 0 auto;
  padding: 95px 10px 88px;
  max-width: 1290px;
}
.main-area.lp .section-inner {
  display: flex;
  padding-left: 70px;
}
.main-area.lp .left-area {
  display: none;
  width: calc(50% - 570px);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  flex: 0 0 auto;
}
@media screen and (max-width:1270px) {
  .main-area.lp .left-area {
    width: 44px;
    left: 10px;
  }
}
.main-area.lp .left-area p {
  font-weight: 500;
  writing-mode: vertical-lr;
  font-size: 4.0rem;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 30px);

}
.main-area.lp .left-area > a {
  z-index: 16;
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 20px;
  left: calc(50% - 17px);
  bottom: 20px;
}
.main-area.lp .right-area {
    margin: 0 auto;
}
.main-area.lp .tittle-area p:first-of-type {
  font-size: 1.1rem;
  padding-bottom: 17px;
}
.main-area.lp .tittle-area span {
  content: "";
  display: block;
  background-color: #000;
  height: 1px;
  width: 100%;
  margin-bottom: 16px;
}
.main-area.lp .tittle-area p:last-of-type {
  font-size: 2.2rem;
  padding-bottom: 48px;
}
.main-area.lp .sub-tittle {
  font-size: 1.1rem;
}
.main-area.lp .wayaku {
  font-size: 2.2rem;
}
.main-area.lp .goods-area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1200px;
  margin-bottom: 56px;
}
.main-area.lp .goods-area li {
  width: 380px;
  color: #3C3C3C;
  margin-bottom: 36px;
}
.main-area.lp .goods-img {
  width: 380px;
  height: 380px;
  position: relative;
  overflow: hidden;
}
.main-area.lp .goods-img img {
  object-fit: cover;
  height: 100%;
  width: auto;
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translate(0 ,-50%);
  transition: .3s ease-in-out;
}
.main-area.lp .goods-img.goods-logo img {
  transform: translate(0 ,-50%);
}
.main-area.lp .logo-order {
  order: 0;
}
.main-area.lp .text-area a {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  color: #3C3C3C;
}
.main-area.lp .text-area a:visited {
  color: #3C3C3C;
}
.main-area.lp .text-area p:first-of-type{
  font-size: 1.4rem;
}
.main-area.lp .text-area p span {
  font-size: 1.1rem;
}
.main-area.lp .text-area p {
  font-weight: 400;
}
.main-area.lp .bottom-area {
  position: relative;
  margin-top: 12px;
}
.main-area.lp .bottom-area > div {
  background-color: #3C3C3C;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  right: 0;
}
.main-area.lp .bottom-area img {
  position: absolute;
  top: -12px;
  left: 0;
  width: 12px;
  height: 12px;
}
.main-area.lp .bottom-area p {
  text-align: right;
  padding-top: 16px;
}
.main-area.lp .bottom-area p a {
  text-decoration: none;
  color: #3C3C3C;
}
.main-area.lp .bottom-area p a:visited {
  color: #3C3C3C;
}

/* レスポンシブ設定
c */
@media screen and (min-width:768px){
	.main-area.lp .sp {
		display: none!important;
	}
  .main-area.lp .goods-img a:hover {
    opacity: 1;
  }
  .main-area.lp .goods-img a:hover img:nth-of-type(2) {
    opacity: 0;
  }
  .main-area.lp .goods-img a:hover img:nth-of-type(1) {
    opacity: 1;
  }
  .main-area.lp .goods-img a img:nth-of-type(1) {
    opacity: 0;
  }
}
@media screen and (max-width:767px){
	.main-area.lp .pc {
		display: none!important;
	}
  
  .main-area.lp h2 {
    font-size: calc(80 / 750 * 100vw);
  }
  .main-area.lp #fv {
    min-width: auto;
    width: auto;
    height: 100%;
  }
  .main-area.lp .logo-area {
    top: calc(860 / 750 *100vw);
    left: 50%;
  }
  .main-area.lp .logo-area p:first-of-type {
    font-size: calc(67 / 750 * 100vw);
    padding-bottom: calc(12 / 750 * 100vw);
  }
  .main-area.lp .logo-area p:last-of-type {
    font-size: calc(34 / 750 * 100vw);
  }
  .main-area.lp .section {
    padding: 16vw 5vw 12vw;
  }
  .main-area.lp .section-inner {
    padding-left: 0;
  }
  .main-area.lp .left-area {
    position: static;
    margin-right: 0;
    width: 0;
    padding-top: 0;
  }
  .main-area.lp .left-area > a {
    margin: 0;
    position: fixed;
    width: calc(36 / 750 * 100vw);
    left: auto;
    right: calc(25 / 750 * 100vw);
    bottom: calc(25 / 750 * 100vw);
  }
  .main-area.lp .right-area {
    max-width: none;
  }
  .main-area.lp .tittle-area p:first-of-type {
    font-size: calc(18 / 750 * 100vw);
    padding-bottom: calc(17 / 750 * 100vw);
  }
  .main-area.lp .tittle-area span {
    margin-bottom: 2.1vw;
  }
  .main-area.lp .tittle-area p:last-of-type {
    font-size: calc(28 / 750 * 100vw);
    padding-bottom: 10.2vw;
  }
  .main-area.lp .goods-area ul {
    width: calc(630/ 750 * 100vw);
    margin-bottom: calc(72/ 750 * 100vw);
  }
  .main-area.lp .goods-area li {
    width: calc(300 / 750 * 100vw);
    margin-bottom: 8vw;
  }
  .main-area.lp .goods-img {
    width: calc(300 / 750 * 100vw);
    height: calc(300 / 750 * 100vw);
  }
  .main-area.lp .goods-img img ,.goods-logo img{
    transform: translate(0% ,-50%);
  }
  .main-area.lp .goods-img.goods-logo img {
    transform: translate(0% ,-50%);
  }
  .main-area.lp .logo-order {
    order: 1;
  }
  .main-area.lp .text-area a {
    display: block;
    padding-top: 1.7vw;
    font-size: calc(20 / 750 * 100vw);
    text-decoration: none;
  }
  .main-area.lp .text-area p:first-of-type , p:last-of-type {
    font-size: calc(20 / 750 * 100vw);
  }
  .main-area.lp .text-area p:last-of-type {
    padding-top: 1.3vw;
  }
  .main-area.lp .text-area p span {
    font-size: calc(18 / 750 * 100vw);
  }
  
  .main-area.lp .bottom-area {
    margin-top: 1.6vw;
  }
  .main-area.lp .bottom-area p {
    padding-top: 2.1vw;
  }
  .main-area.lp .goods-img a.tapped {
    opacity: 1;
  }
  .main-area.lp .goods-img a.tapped img:nth-of-type(2) {
    opacity: 0;
  }
  .main-area.lp .goods-img a.tapped img:nth-of-type(1) {
    opacity: 1;
  }
  .main-area.lp .goods-img a img:nth-of-type(1) {
    opacity: 0;
  }
}


/*元js*/
body{
  opacity:0;
}
.main-area.lp .tittle-area h2{
  overflow:hidden;
}
.main-area.lp .tittle-area h2 span{
  display:inline;
  background:inherit;
  position:relative;
  top:1em;
  opacity:0;
  transition-duration:600ms;
  transition-property:opacity top;
}
.main-area.lp .tittle-area h2.on span{
  opacity:1;
  top:0;
}
.main-area.lp .tittle-area h2.on span:nth-child(2){
  transition-delay:50ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(3){
  transition-delay:100ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(4){
  transition-delay:150ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(5){
  transition-delay:200ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(6){
  transition-delay:250ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(7){
  transition-delay:300ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(8){
  transition-delay:350ms;
}
.main-area.lp .tittle-area h2.on span:nth-child(9){
  transition-delay:400ms;
}

.main-area.lp .tittle-area > span,.main-area.lp .bottom-area > div{
  width:0;
  transition-duration:600ms;
  transition-property:width;
}
.main-area.lp .tittle-area > span.on,	.main-area.lp .bottom-area > div.on{
  width:100%;
}
.main-area.lp .goods-area li{
  opacity:0;
}
.main-area.lp .logo-area{
  opacity:0;
}
/*.main-area.lp {
  cursor:auto!important;
}*/