@charset "utf-8";
/* CSS Document */

/* 基本設定 */
a[href$=".pdf"]:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/common/icon_pdf.png) no-repeat;
}
.wrapper {
    height: 100%;
}
.page_title .small{
    font-size: 1.4rem;
    font-weight: normal;
    padding-left: 20px;
    vertical-align: middle;
}
.indent {
    text-indent: 1em;
}
.to_top{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0;
    font-size: 50px;
    font-weight: bold;
    background: none;
    cursor: pointer;
    z-index: 99;
}
@media screen and (max-width:768px) {
    .page_title .small{
        display: block;
        padding: 0;
    }
}

/* ブランドロゴ */
.brand_img {
    width: 90px;
    height: 25px;
    position: absolute;
    left: 20px;
    top: 17px;
    z-index: 9998;
}

/* ハンバーガーメニュー */
.menu {
    height: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    z-index: 9999;
}
.menu_line {
    background: #fff;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu_line_center {
    top: 9px;
}
.menu_line_bottom {
    bottom: 0;
}
.menu_line_top.active {
    top: 8px;
    transform: rotate(45deg);
}
.menu_line_center.active {
    transform:scaleX(0);
}
.menu_line_bottom.active {
    bottom: 10px;
    transform: rotate(135deg);
}

/* フルスクリーンナビゲーション */
.gnav2 {
    background: rgba(44,169,225,.9);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9998;
}
.gnav_wrap{
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav_menu_item {
    position: relative;
    margin: 30px 0;
}
.gnav_menu_item a {
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    padding: 30px;
    text-decoration: none;
    transition: .5s;
}

/* ヒーローイメージ・カルーセル */
.carousel {
    position: relative;
    height: 100%;
}
.carousel::before {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    z-index: 998;
}
.carousel .title_img {
    top: 40%;
    left: 50%;
    width: 500px;
    height: 120px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
    /* pointer-events: none; */
}
.carousel .subtitle {
    color: #ffffff;
    font-size: 1.1em;
    top: 55%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
}
.carousel .readmore {
    top: 91%;
    left: 50%;
    width: 150px;
    height: 60px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
    pointer-events: none;
}
.carousel .swipeup {
    top: 91%;
    left: 50%;
    width: 120px;
    height: 50px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
    pointer-events: none;
}
.carousel .message {
    width: 100vw;
    overflow: hidden;
    height: auto;
    min-height: 100vh !important;
}
.carousel .message1 {
	background: url(../img/fullsteri/purenature_hero1.jpg) no-repeat center center;
}
.carousel .message2 {
	background: url(../img/fullsteri/purenature_hero2.jpg) no-repeat center center;
}
.carousel .message3 {
	background: url(../img/fullsteri/purenature_hero3.jpg) no-repeat center center;
}

.carousel .bx-wrapper {
    background-color: transparent;
    margin: 0px auto;
    border: none;
    box-shadow: none;
}
.carousel .bx-wrapper img {
    display: block;
    margin: 0px auto;
}
.carousel .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
	bottom: 40px;
}
.carousel .bx-wrapper .bx-pager.bx-default-pager a {
    display: none;
    background: #2ca9e1;
    width: 40px;
    height: 6px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.carousel .bx-wrapper .bx-pager.bx-default-pager a:hover {
	opacity: 1;
}
.carousel .bx-wrapper .bx-pager.bx-default-pager a:hover,
.carousel .bx-wrapper .bx-pager.bx-default-pager a.active,
.carousel .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #e7609e;
}
@media screen and (max-width:768px) {
	.carousel .title_img {
        width: 350px;
        height: 80px;
    }
    .carousel .subtitle {
        font-size: 1em;
    }
    .carousel .bx-wrapper img {
        display: none!important;
    }
}

/* 詳細ヘディング */
.heading {
    width: 100%;
    height: 40vh;
    position: relative;
    background: url(../img/fullsteri/purenature_heading_pc.jpg) no-repeat center center;
    margin-bottom: 20px;
}
.heading::before {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    z-index: 998;
}
.heading .title_img {
    top: 50%;
    left: 30%;
    width: 365px;
    height: 90px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
    /* pointer-events: none; */
}
@media screen and (max-width:768px) {
    .heading {
        background: url(../img/fullsteri/purenature_heading_sp.jpg) no-repeat center center;
        background-size: cover;
    }
	.heading .title_img {
        left: 50%;
        width: 250px;
        height: 60px;
    }
}

/* コンテンツ一覧 */
.product_detail {
	margin-top: 50px;
}
.product_detail p {
	padding: 0;
}
.product_detail .story,.product_detail .product,
.product_detail .order,.product_detail .review {
	float: left;
	width: 25%;
}
.product_detail .story a,.product_detail .product a,
.product_detail .order a,.product_detail .review a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 5% 5%;
	min-height: 290px;
	font-size: 2.1rem;
	color: #000000;
}
.product_detail .story a .small,.product_detail .product a .small,
.product_detail .order a .small,.product_detail .review a .small {
	font-size: 1.6rem;
	padding-left: 15px;
    display: inline-block;
}
.product_detail .story a {
	background: url(../img/fullsteri/purenature_ctg1.jpg) no-repeat;
	background-size: contain;
}
.product_detail .product a {
	background: url(../img/fullsteri/purenature_ctg2.jpg) no-repeat;
	background-size: contain;
}
.product_detail .review a {
	background: url(../img/fullsteri/purenature_ctg3.jpg) no-repeat;
	background-size: contain;
}
.product_detail .order a {
	background: url(../img/fullsteri/purenature_ctg4.jpg) no-repeat;
	background-size: contain;
}
@media screen and (max-width:768px) {
	/* .product_detail .story, .product_detail .product,
    .product_detail .order, .product_detail .review{
		float: none;
		width: 100%;
	} */
    .product_detail .story,.product_detail .product,
    .product_detail .order,.product_detail .review {
        float: left;
        width: 50%;
    }
	.product_detail .story a, .product_detail .product a,
    .product_detail .order a, .product_detail .review a {
		padding: 5% 5% 24%;
		min-height: 240px;
	}
    .product_detail .detail_block {
        display: block;
        min-height: 240px;
    }
}

/* 新着・TwitterPublish・InstaWindow */
.left_box_half {
	float: left;
	width: 23%;
}
.right_box_half {
	float: right;
	width: 23%;
}
.information {
	margin-top: 50px;
}
.information p {
	padding: 0 22px 0 22px;
}
.information .whatsnew {
	float: left;
	width: 50%;
}
.information .twi,.information .insta {
	float: left;
	width: 25%;
}
.information.twi a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 5% 5%;
	min-height: 270px;
	font-size: 2.1rem;
	color: #000000;
}
@media screen and (max-width:768px) {
	.information .whatsnew, .information .twi,
    .information .insta {
		float: none;
		width: 100%;
	}
    .information p {
	    padding: 0;
    }
}
#index .whatsnew h4,#index .twi h4,#index .insta h4 {
	color: #213349;
	padding: 0 10px 0 0;
	border-bottom: 3px solid #e0e0e0;
	margin-bottom: 15px;
	margin-top: 0;
	clear: both;
}
#index .whatsnew h4,#index .twi h4,#index .insta h4 {
    background: #ffffff;
	font-size: 2rem;
	padding: 0 0 2% 0;
    text-align: center;
}
#index .whatsnew h4 .small,#index .twi h4 .small,
#index .insta h4 .small {
	font-size: 1.6rem;
	padding-left: 15px;
}
#index .whatsnew_list {
	padding: 0px 20px;
}
#index .whatsnew_list ul {
	margin-bottom: 15px;
}
#index .whatsnew_list ul li .date { width: 25%; }
#index .whatsnew_list ul li .title { width: 70%; }
#index .whatsnew_list ul li .whatsnew {
	vertical-align: middle;
	background: #e7609e;
	font-size: 70%;
	width: 40px;
	color: #ffffff;
	padding: 0 3px;
	margin: 0 3px 0 0;
}
@media screen and (max-width:768px) {
	#index .whatsnew_list ul li .date { width: 100%; }
	#index .whatsnew_list ul li .title { width: 100%; }
}

/* フッター */
footer .footer_menu {
	background: #ffffff;
	color: #000000;
	text-align: center;
	padding: 15px;
}
footer .footer_menu a {
	color: #000000;
}
footer .footer_menu ul {
	margin-bottom: 20px;
}
footer .footer_menu ul li {
	display: inline-block;
	padding: 0 15px;
	font-size: 1.5rem;
}
@media screen and (max-width:768px) {
	footer .footer_menu,footer .footer_menu .inner {
		padding: 0;
	}
	footer .footer_menu ul li {
		display: block;
		width: 50%;
		float: left;
		box-sizing: border-box;
		border-bottom: 1px solid #e0e0e0;
	}
	footer .footer_menu ul li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 15px 0;
	}
	footer .footer_menu ul li:first-of-type,
    footer .footer_menu ul li:nth-child(odd) {
		border-right: 1px solid #e0e0e0;
	}
}
@media screen and (max-width:480px) {
	footer .footer_menu ul li, footer .copy {
		font-size: 1.2rem;
	}
}

/* 詳細 */
.paragraph {
    margin-bottom: 45px;
}
.paragraph h2.page_title {
	color: #2ca9e1;
	font-size: 3rem;
	border-bottom: 3px solid #e7609e;
	padding: 0 0 5px 10px;
	margin-bottom: 15px;
}
.paragraph h2.page_title .small {
    color: #2ca9e1;
    font-size: 1.8rem;
    padding-left: 25px;
    display: inline-block;
}

/* 目次 */
.index_bullets {
    padding: 0;
    position: relative;
    margin-bottom: 20px;
}
.index_bullets li, .index_bullets li {
    border-left: 6px solid #c0c0c0;
    background: #f7f7f7;
    margin-bottom: 3px;
    line-height: 1.5;
    padding: 0.5em;
    list-style-type: none!important;
}

/* ブランドストーリー */
.story_title {
    position: relative;
    margin-bottom: 10px;
}

/* 商品紹介 */
.product_property1,.product_property3 {
    position: relative;
    margin-bottom: 15px;
}
.product_property2,.product_property4 {
    position: relative;
    margin-bottom: 15px;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.product_property1 figure,.product_property2 figure,
.product_property3 figure,.product_property4 figure {
    width: 35%;
    text-align: center;
}
.product_property1 .text,.product_property2 .text,
.product_property3 .text,.product_property4 .text {
    margin: 45px 0 0 0;
    width: 60%;
}
@media (max-width: 768px) {
    .product_property1,.product_property2,
    .product_property3,.product_property4 {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }
    .product_property1 figure,.product_property2 figure,
    .product_property3 figure,.product_property4 figure {
        width: 68%;
        margin: 0 auto;
    }
    .product_property1 .text,.product_property2 .text,
    .product_property3 .text,.product_property4 .text {
        min-width: 100%;
        float: none;
        margin: 0;
    }
}

/* SPEC表 */
article.prd_postWrap {
	margin: 0 auto 20px;
}
article.prd_postWrap .prd_itemWrap {
	margin: 20px auto 30px;
}
article.prd_postWrap .prd_itemFA {
	margin: 0 auto 15px;
	width: 100%;
}
article.prd_postWrap .prd_itemFA section table thead th,
.prd_itemclassFAbox section table  thead th {
    color: #ffffff;
    background: #2ca9e1;
}
article.prd_postWrap .prd_itemFA section table tbody th,
.prd_itemclassFAbox section table  tbody th {
    background: #f7f7f7;
}
@media (max-width: 630px) {
    article.prd_postWrap .prd_itemFA section table thead th { display: none; }

    article.prd_postWrap .prd_itemFA section table tbody th {
        background: #f7f7f7;
    }
    article.prd_postWrap .prd_itemFA section table tbody td:before{
        color: #2ca9e1;
    }
}

/* お客様の声 */
@font-face {
    font-family: 'HuiFont29';
    src: url(/fonts/HuiFont29.ttf);
}
.note_paper {
    position: relative;
    height: 420px;
    width: 100%;
    background: rgba(255,255,255,.9);
    top: 50%;
    box-shadow: 0px 0px 1px 0px #888;
    overflow: hidden;
}
.note_paper::before {
    content: '';
    position: absolute;
    left: 45px;
    height: 100%;
    width: 2px;
    background: rgba(231,96,158,.4);
}
.note_lines {
    margin-top: 40px;
    height: calc(100% - 40px);
    width: 100%;
    background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
}
.note_text {
    position: absolute;
    top: 69px;
    left: 55px;
    bottom: 10px;
    right: 10px;
    line-height: 25px;
    font-family: 'HuiFont29';
    overflow: hidden;
    outline: none;
}
.note_holes {
    position: absolute;
    left: 10px;
    height: 25px;
    width: 25px;
    background: lightgoldenrodyellow;
    border-radius: 50%;
    box-shadow: inset 0px 0px 1px 0px #888;
}
.note_hole_top {
    top: 10%;
}
.note_hole_middle {
    top: 50%;
}
.note_hole_bottom {
    bottom: 10%;
}
.close_btn, .more_btn {
    display: block;
    width: 100%;
    padding: 80px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background: -moz-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 60%
    );
    background: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 60%
    );
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 60%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr='#00ffffff',
        endColorstr='#ffffff',
        GradientType=0
    );
}
.close_btn {
    background: none;
}
.slide_up {
    height: 420px;
    padding-bottom: 0;
    overflow: hidden;
}
.slide_down {
    height: 1180px;
    overflow: visible;
    padding-bottom: 50px;
}
.more_btn p {
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    background: #2ca9e1;
    padding: 5px 20px;
    width: 80%;
    border-radius: 20px;
}
.close_btn {
    padding: 0;
}
.close_btn p {
    background: #808080;
}
@media screen and (max-width:768px) {
    .note_paper {
        height: 470px;
    }
    .slide_up {
        height: 470px;
        padding-bottom: 0;
        overflow: hidden;
    }
    .slide_down {
        height: 2050px;
        overflow: visible;
        padding-bottom: 50px;
    }
}

/* 注文 */
.product_order {
    position: relative;
    margin-bottom: 15px;
    box-shadow: 0px 0px 1px 0px #888;
    /* -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    flex-direction: row-reverse; */
}
.product_order figure {
	width: 250px;
    margin-left: 35px;
    text-align: center;
}
.product_order .text {
	margin: 35px 0 0 40px;
	width: 555px;
}
@media screen and (max-width:630px) {
	.product_order .text{
		width: 100%;
		float: none;
		margin: 0;
	}
}
@media (max-width: 768px) {
	.product_order figure {
        width: 30%;
        margin: 25px 20px 20px 20px;
    }
	.product_order .text {
        width: 68%;
        margin: 25px 20px 20px 20px;
    }
}
@media (max-width: 630px) {
	.product_order {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		flex-direction: column;
	}
	.product_order figure {
		margin-bottom: 20px;
		min-width: 100%;
        margin: 25px 0 20px 0;
	}
    .product_order figure img {
        width: 68%;
        margin: 0 auto;
    }
	.product_order .text {
        min-width: 89%;
        margin: 0 20px 20px 20px;
    }
}