﻿@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
}
.contents {
    margin: 0;
}
.contents_inner {
    padding: 0;
}
.contents_inner img {
    width: 100%;
}
ul, li, ol {
    list-style: none;
}
#ctl00_BodyHeaderMain_upUpdatePanel2, footer, .header {
    display: none;
}
.fadeInUp {
  opacity : 0;
  transform: translateY(60px);
  transition: 1.5s;
}
.br {display: inline-block;}
.blinking{
    -webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

@-moz-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

.fullpage-wrapper {
    font-family: 'Muli', dnp-shuei-gothic-gin-std, sans-serif;
    overflow: hidden;
    letter-spacing: 0.05em;
    background: #fff;
    color: #505050;
    margin: 120px 0 0 0;
}

.page-contents .first {
    text-align: center;
    margin-bottom: 180px;
}

.page-contents .first .logo {
    width: 140px;
    display: block;
    margin: 0 auto;
}

.page-contents .first h2 {
    font-size: 30px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin: 10px 0 60px;
}

.page-contents .first h2:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #5f5f5f;
    margin: 30px auto 0;
}

.page-contents .first p {
    font-size: 14px;
    line-height: 2.4;
}

.page-contents .first .item-wrap .item-area {
    align-items: center;
    display: flex;
}
.page-contents .first .item-wrap .fdrr {
    flex-direction: row-reverse;
}
.page-contents .first li {
    max-width: 1000px;
    margin: 0 auto 140px;
    text-align: left;
    width: 100%;
}
/*.page-contents .first .item-wrap li .item-img {
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}*/

.page-contents .first .item-wrap li:nth-child(1) .item-img {
    width: 195px;
    margin: 0 160px;
    height: auto;
}
.page-contents .first .item-wrap li:nth-child(2) .item-img {
    width: 230px;
    margin: 0 150px;
    height: auto;
}
.page-contents .first .item-wrap li:nth-child(3) .item-img {
    width: 270px;
    margin: 0 140px;
    height: auto;
}

.page-contents .first .item-wrap li .item-description {
    width: 460px;
}

/*.page-contents .first .item-wrap li:nth-child(1) {
    height: 500px;
}
.page-contents .first .item-wrap li:nth-child(2) {
    height: 740px;
}
.page-contents .first .item-wrap li:nth-child(3) {
    height: 480px;
}*/


.page-contents .first .item-wrap li .ingredient-img {
    max-width: 110px;
    max-height: 110px;
}

.page-contents .first .item-wrap li .item-description h3 {
    font-size: 24px;
    font-weight: 400;
}

.page-contents .first .item-wrap li .item-description .item-txt {
    padding: 20px 0;
}

.page-contents .first .item-wrap li .item-ingredient {
display: flex;
    align-items: center;
    margin-top: 40px;
}

.page-contents .first .item-wrap li .item-ingredient dl {
    font-size: 12px;
    margin-left: 20px;
	max-width: 870px;
	line-height: 1.8;
}
.page-contents .first .item-wrap li .item-ingredient dd span {
    display: block;
	font-size: 11px;
}

.page-contents .second {
    background: url(../../../../Page/pressrelease/2020calming/image/product/bg_glass.png) no-repeat;
    background-size: cover;
    background-position: center center;
    /* padding: 120px 0; */
    height: 630px;
    margin-bottom: 200px;
    position: relative;
}

.page-contents .second .inner {
    max-width: 1000px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
}

.page-contents .second .inner h3 img {
    width: 370px;
}

.page-contents .second .inner h3 span {
    display: block;
    font-size: 24px;
    font-weight: 200;
    padding: 20px 0 10px;
	line-height: 2.6;
}

.page-contents .second .inner p {
    font-size: 14px;
    line-height: 2.6;
}
.page-contents .first .item-wrap li .item-ingredient dt {font-size: 14px;}
.page-contents .third {
    background: url(../../../../Page/pressrelease/2020calming/image/product/bg_ingredients.png) no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 130px 0;
    margin-bottom: 100px;
    text-align: center;
    width: 100%;
}
.fullpage-wrapper .sub-txt {
    font-size: 12px;
    text-align: center;
    margin-bottom: 140px;
}
.page-contents .third h4 {font-size: 24px;font-weight: 200; letter-spacing: 0.1em;}

.page-contents .third h4:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #5f5f5f;
    margin: 30px auto;
}

.page-contents .third a {
	color: #5f5f5f;
    text-decoration: none;
    padding: 10px 0;
    width: 200px;
    border: 1px solid #5f5f5f;
    display: inline-block;
    margin: 0 auto;
}
.page-contents .third a:hover {
    background: #5f5f5f;
    color: #fff;
}
/* PCデバイス */
@media only screen and (min-width: 1025px) {
.sp {
	display: none !important;
}
}

/* タブレット */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.sp {
	display: none !important;
}
.page-contents .first .item-wrap li:nth-child(1) .item-img {
    width: calc(195 * (100vw / 1024));
    margin: 0 calc(160 * (100vw / 1024));
}
.page-contents .first .item-wrap li:nth-child(2) .item-img {
    width: calc(230 * (100vw / 1024));
    margin: 0 calc(150 * (100vw / 1024));
}
.page-contents .first .item-wrap li:nth-child(3) .item-img {
    width: calc(270 * (100vw / 1024));
    margin: 0 calc(140 * (100vw / 1024));
}

.page-contents .first .item-wrap li .item-description {
    padding-right: 40px;
    width: 60%;
}
.page-contents .first .item-wrap li:nth-child(2) .item-description {
    padding-left: 40px;
    width: 60%;
}
.page-contents .first .item-wrap li .item-ingredient {
	padding: 0 40px;
}
.page-contents .second {
    padding: calc(160 * (100vw / 1024)) 0 calc(160 * (100vw / 1024)) 40px;
}
.fullpage-wrapper .sub-txt {
    padding: 0 20px;
	text-align: left;
}
}

/* SPデバイス */
@media only screen and (max-width: 768px) {
.pc {
	display: none !important;
}
.sp {
    display: block;
}
.page-contents .first h2 {
    font-size: calc(36 * (100vw / 750));
    margin: 0 0 calc(100 * (100vw / 750));
}

.page-contents .first h2:after {
    width: calc(50 * (100vw / 750));
    height: calc(2 * (100vw / 750));
    margin: calc(40 * (100vw / 750)) auto 0;
}

.page-contents .first p {
    font-size: calc(22 * (100vw / 750));
    line-height: 2;
}
.fullpage-wrapper {
    margin: calc(100 * (100vw / 750)) 0 0;
}
.page-contents .first ul {
    padding: 0 calc(20 * (100vw / 750));
}
.page-contents .first .item-wrap .item-area {
    display: block;
}

.page-contents .first ul {
    padding: 0 calc(20 * (100vw / 750));
	max-width: none;
}

.page-contents .first .item-wrap li:nth-child(1) .item-img {
    width: calc(195 * (100vw / 750));
    margin: 0 auto;
}
.page-contents .first .item-wrap li:nth-child(2) .item-img {
    width: calc(230 * (100vw / 750));
    margin: 0 auto;
}
.page-contents .first .item-wrap li:nth-child(3) .item-img {
    width: calc(270 * (100vw / 750));
    margin: 0 auto;
}
.page-contents .first .item-wrap li .item-description {
    width: 100%;
	margin-top: calc(40 * (100vw / 750));
}

.page-contents .first .item-wrap li .item-ingredient {
    margin-top: calc(50 * (100vw / 750));
}

.page-contents .first .item-wrap li .item-description h3 {
    font-size: calc(30 * (100vw / 750));
}

.page-contents .first .item-wrap li .item-description .item-price {
    font-size: calc(20 * (100vw / 750));
}

.page-contents .first .item-wrap li .item-description .item-txt {
    padding: calc(40 * (100vw / 750)) 0;
}

.page-contents .first .item-wrap li .ingredient-img {
    max-width: calc(155 * (100vw / 750));
    max-height: calc(155 * (100vw / 750));
}

.page-contents .section.first .item-wrap li .item-ingredient dl {
    font-size: calc(22 * (100vw / 750));
	font-size: calc(22 * (100vw / 750));
    max-width: calc(535 * (100vw / 750));
    margin-left: calc(20 * (100vw / 750));
}

.page-contents .section.first .item-wrap li .item-ingredient dd span {
    font-size: calc(20 * (100vw / 750));
}
.page-contents .first .item-wrap li .item-ingredient dt {
    font-size: calc(26 * (100vw / 750));
}
.page-contents .first li {
    margin: 0 auto calc(140 * (100vw / 750));
}

.page-contents .second {
    background: url(../../../../Page/pressrelease/2020calming/image/product/sp_bg_glass.png) no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: calc(180 * (100vw / 750));
    height: calc(800 * (100vw / 750));
}

.page-contents .second .inner {
    max-width: none;
    width: 100%;
    left: calc(20 * (100vw / 750));
    top: 50%;
    transform: translate(0, -50%);
}

.page-contents .second .inner h3 img {
    width: calc(390 * (100vw / 750));
}

.page-contents .second .inner p {
    font-size: calc(22 * (100vw / 750));
	line-height: 2.4;
}

.page-contents .second .inner h3 span {
    font-size: calc(26 * (100vw / 750));
    padding: calc(10 * (100vw / 750)) 0 calc(30 * (100vw / 750));
}
.page-contents .first {
    margin-bottom: calc(140 * (100vw / 750));
}
.page-contents .third {
    background: url(../../../../Page/pressrelease/2020calming/image/product/sp_bg_ingredients.png) no-repeat;
    background-size: cover;
    background-position: center center;
    padding: calc(120 * (100vw / 750)) 0;
    margin-bottom: calc(100 * (100vw / 750));
}
.page-contents .third h4 {
    font-size: calc(30 * (100vw / 750));
}

.page-contents .third h4:after {
    width: calc(50 * (100vw / 750));
    height: calc(2 * (100vw / 750));
    margin: calc(40 * (100vw / 750)) auto;
}

.page-contents .third p {
    font-size: calc(26 * (100vw / 750));
    border: calc(2 * (100vw / 750)) solid #5f5f5f;
    width: calc(280 * (100vw / 750));
    padding: calc(20 * (100vw / 750));
}
	
.fullpage-wrapper .sub-txt {
    font-size: calc(20 * (100vw / 750));
    margin-bottom: calc(140 * (100vw / 750));
	padding: 0 calc(20 * (100vw / 750));
	text-align: left;
}
}


