.bentonsans-bold {
    font-family: benton-sans, sans-serif;
    font-style: normal;
    font-weight: 700
}

.font-bentonsansExCompReg {
    font-family: benton-sans-extra-compressed, sans-serif;
    font-weight: 500;
    font-style: normal
}

.svgsprite:before {
    display: inline-block;
    background-image: url(../images/sprite.svg);
    background-size: 37.78571em 27.5em
}

.svgsprite:before {
    width: 14.64286em;
    height: 3.785em;
    background-position: -22.85714em -23.42857em;
    content: ''
}


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:hover {
    outline: 0
}

/* hover --------------------------*/
/* a:hover {
    text-decoration: underline;
}
a:hover img {
    opacity: .5;
} */

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 60%;
    line-height: 1
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

html {
    font-size: 15px;
    line-height: 1.6
}

body {
    color: #3e3a39;
    font-family: Noto Sans JP, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    -webkit-font-kerning: normal;
    font-kerning: normal;
    background-color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.4;
    color: inherit
}

h2,
h3 {
    font-size: 32px;
    font-size: 2.13333rem
}

@media screen and (max-width:767px) {
    h2,
    h3 {
        font-size: 18px;
        font-size: 1.2rem
    }
}

h4 {
    font-size: 18px;
    font-size: 1.2rem
}

@media screen and (max-width:767px) {
    h4 {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

ol,
ul {
    padding-left: 1em
}

li>ol,
li>ul {
    margin-bottom: 0
}

dd {
    margin-left: 0
}

table {
    width: 100%
}

th {
    text-align: left
}

a {
    text-decoration: underline;
    color: #00358e
}

a:hover {
    text-decoration: underline;
    /* color: #0052db */
}

a.link-red {
    color: #00358e!important
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle
}

address,
cite,
dfn,
em,
i {
    font-style: normal
}

code,
pre {
    font-family: Consolas, Menlo, Courier, monospace
}

code {
    padding: .2em;
    border-radius: 3px;
    font-size: .8em;
    background-color: rgba(0, 0, 0, .06)
}

pre code {
    padding: 0;
    font-size: .8em;
    background-color: inherit
}

address,
blockquote,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ol,
p,
pre,
table,
ul {
    margin-top: 0;
    margin-bottom: 0
}

html:lang(ja) a,
html:lang(ja) address,
html:lang(ja) blockquote,
html:lang(ja) dd,
html:lang(ja) dt,
html:lang(ja) fieldset,
html:lang(ja) figure,
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) h4,
html:lang(ja) h5,
html:lang(ja) h6,
html:lang(ja) li,
html:lang(ja) p,
html:lang(ja) pre,
html:lang(ja) table {
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .05rem
}

.pc-only{
	display: block;
}
.sp-only{
	display: none;
}
@media screen and (max-width:767px) {
.pc-only{
	display: none;
}
.sp-only{
	display: block;
}
}
/* share button ----------------------------------------*/


.blc-share {
    max-width: 1000px;
    margin: 100px auto 30px;
    text-align: center;
}

@media screen and (max-width:767px) {
    .blc-share {
        margin: 60px auto 120px;
    }
}

ul.share-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 250px;
    margin: 1rem auto ;
    padding:0;
}
@media screen and (max-width:767px) {
    ul.share-btn {

        width: 200px;

    }
}

ul.share-btn li {
    list-style: none;
    font-size: .8rem;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #1C2446;
	margin-bottom: 80px;
}
ul.share-btn li img {
    width: 25px;
}
ul.share-btn li:nth-child(3n){
    margin-right: 0;
}
.share-btn li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}
.share-btn li:hover {
    opacity: .7;
}



/*
.tw {
    border-radius: 4px;
    background-color: #1C2446;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.fb {
    border-radius: 4px;
    background-color: #1C2446;
    text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
.ha {
    border-radius: 4px;
    background-color: #008FDE;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.pk {
    border-radius: 4px;
    background-color: #F03E51;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.ln {
    border-radius: 4px;
    background-color: #1C2446;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
*/



.l-wrapper {
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s
}

.l-wrapper.menu-open {
    width: 100vw;
    height: 100vh;
    position: fixed;
    -webkit-transform: translate(-260px, 0);
    transform: translate(-260px, 0)
}

.l-content {
    padding-top: 65px;
    overflow-x: hidden
}

@media screen and (max-width:767px) {
    .l-content {
        padding-top: 65px
    }
}

@media all and (-ms-high-contrast:none) {
    .l-content {
        overflow-x: hidden
    }
}

@media all and (-ms-high-contrast:none) {
    .l-content,
     ::-ms-backdrop {
        overflow-x: hidden
    }
}

.l-content,
_:-ms-lang(x),
_::-webkit-meter-bar {
    overflow-x: hidden
}

@media screen and (min-width:1120px) {
    .page-main-nomargin {
        margin-right: calc(((100vw - 1080px)/ 2) * -1)
    }
}

@media screen and (max-width:1119px) {
    .page-main-nomargin {
        margin-right: -20px
    }
}

@media all and (-ms-high-contrast:none\0) {
    .page-main-nomargin,
    .page-main-nomargin ::-ms-backdrop {
        margin-right: calc(((100vw - 145%)/ 2) * -1)
    }
}

@media screen and (max-width:767px) {
    .page-main-nomargin {
        margin-left: calc(((100vw - 100%)/ 2) * -1);
        margin-right: calc(((100vw - 100%)/ 2) * -1)
    }
}

.l-section--small {
    padding-right: 10px;
    padding-left: 10px
}

.l-section-top {
    padding-top: 60px;
    padding-bottom: 80px;
    border-bottom: 1px solid #d6d6d6
}

@media screen and (max-width:767px) {
    .l-section-top {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

.l-section-top:last-of-type {
    border-bottom: none
}

@media screen and (max-width:767px) {
    .l-section-top__l h2 {
        text-align: center
    }
    .l-section-top__l h2 img {
        height: 60px
    }
}

.l-section-top__r {
    padding-top: 32px
}

.l-section-top__r__inner {
    padding-left: 40px;
    padding-right: 40px
}

@media screen and (max-width:767px) {
    .l-section-top__r__inner {
        padding-left: 0;
        padding-right: 0
    }
}

.l-section-top__maintext {
    font-size: 16px;
    font-size: 1.06667rem;
    line-height: 2
}

@media screen and (max-width:767px) {
    .l-section-top__maintext {
        font-size: 14px;
        font-size: .93333rem
    }
}

.l-page-section {
    padding-top: 60px;
    padding-bottom: 80px;
    position: relative
}

.l-page-section:first-of-type {
    padding-top: 0
}

@media screen and (max-width:767px) {
    .l-page-section {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

.l-page-section:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #d6d6d6;
    position: absolute;
    left: 0;
    margin-top: 80px
}

@media screen and (min-width:1120px) {
    .l-page-section:after {
        width: calc(100vw - 280px - ((100vw - 1080px)/ 2))
    }
}

@media screen and (max-width:1119px) {
    .l-page-section:after {
        width: calc(100% + 20px)
    }
}

@media screen and (max-width:767px) {
    .l-page-section:after {
        margin-top: 40px
    }
}

.l-page-section:last-of-type::after {
    content: none
}

.l-page-section .title {
    margin-bottom: 2rem
}

html:lang(ja) .l-page-section .title {
    letter-spacing: .1em
}

@media screen and (max-width:767px) {
    .l-page-section .title {
        margin-bottom: 1rem;
        font-size: 18px;
        font-size: 1.2rem
    }
}

.l-page-section .subtitle {
    font-size: 20px;
    font-size: 1.33333rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d6d6d6
}

html:lang(ja) .l-page-section .subtitle {
    letter-spacing: .1em
}

@media screen and (max-width:767px) {
    .l-page-section .subtitle {
        margin-bottom: 1rem;
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.l-page-section .text {
    font-size: 16px;
    font-size: 1.06667rem
}

@media screen and (max-width:767px) {
    .l-page-section .text {
        font-size: 15px;
        font-size: 1rem
    }
}

.svgsprite:before {
    display: inline-block;
    background-image: url(../images/sprite.svg);
    background-size: 37.78571em 27.5em
}

.svgsprite:before {
    width: 14.64286em;
    height: 3.785em;
    background-position: -22.85714em -23.42857em;
    content: ''
}

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide a {
    color: #3e3a39;
    text-decoration: none;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    display: block
}

.slick-slide a:hover {
    opacity: .8
}

.carousel-top--koten .slick-slide {
    margin: 0 20px;
    padding-top: 10px
}

@media screen and (max-width:767px) {
    .carousel-top--koten .slick-slide {
        margin: 0 15px
    }
}

.slick-slide img {
    width: 100%
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

img[data-lazy] {
    width: 0;
    height: 0
}

.slick-loading .slick-list {
    background: #fff url(../images/common/ajax-loader.gif) center center no-repeat
}

.slick-next,
.slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 23px;
    height: 40px;
    padding: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    z-index: 100;
    opacity: .5;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

@media screen and (max-width:999px) {
    .slick-next,
    .slick-prev {
        width: 16px;
        height: 27px
    }
}

@media screen and (max-width:767px) {
    .slick-next,
    .slick-prev {
        display: none
    }
}

.slick-next:hover,
.slick-prev:hover {
    opacity: 1;
    outline: 0
}

.slick-prev {
    left: 20px;
    background: url(../images/common/ar_l.svg) 0 0 no-repeat;
    background-size: contain
}

@media screen and (max-width:767px) {
    .slick-prev {
        left: 10px
    }
}

.slick-next {
    right: 20px;
    background: url(../images/common/ar_r.svg) 0 0 no-repeat;
    background-size: contain
}

@media screen and (max-width:767px) {
    .slick-next {
        right: 10px
    }
}

.carousel-arrow-container {
    position: relative;
    max-width: 1120px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto 20px
}

.carousel-arrow-container:after {
    content: "";
    display: block;
    clear: both
}

@media screen and (max-width:767px) {
    .carousel-arrow-container {
        padding-left: 20px;
        padding-right: 20px
    }
}

.carousel-arrow-container .carousel-arrow {
    display: inline-block;
    cursor: pointer;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.carousel-arrow-container .carousel-arrow:hover {
    opacity: .7
}

.carousel-arrow-container .carousel-prev {
    float: left
}

.carousel-arrow-container .carousel-next {
    float: right
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
/*    position: absolute;*/
    bottom: 25px;
    display: block;
    width: 100%;
    padding: 20px 0 0;
    margin: 0;
    list-style: none;
    text-align: center
}

@media screen and (max-width:767px) {
    .slick-dots {
        bottom: -20px
    }
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer
}

@media screen and (max-width:767px) {
    .slick-dots li {
        padding-left: 0;
        padding-right: 0
    }
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 20px;
    outline: 0;
    opacity: .4;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.slick-dots li button:focus,
.slick-dots li button:hover {
    outline: 0;
    opacity: 1
}

.slick-dots li button:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: #666;
    display: block
}

@media screen and (max-width:767px) {
    .slick-dots li button:before {
        width: 10px;
        height: 10px;
        background: #00358e
    }
}

.slick-dots li.slick-active button {
    opacity: 1
}

.carousel-dots--circle .slick-dots {
    text-align: left;
    margin-left: -8px
}

@media screen and (max-width:767px) {
    .carousel-dots--circle .slick-dots {
        position: relative;
        bottom: 0;
        text-align: center;
        margin-top: 1rem
    }
}

.carousel-dots--circle .slick-dots button {
    background-color: transparent
}

.carousel-dots--circle .slick-dots button:before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00358e
}

@media screen and (max-width:767px) {
    .carousel-dots--circle .slick-dots button:before {
        width: 8px;
        height: 8px
    }
}

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: .86
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: 0!important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045
}

.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none!important
}

.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-ready .mfp-preloader {
    display: none
}

.mfp-s-error .mfp-content {
    display: none
}

button.mfp-arrow,
button.mfp-close {
    overflow: visible;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: 0;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mfp-close {
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 5%;
    top: 5%;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.mfp-close:focus,
.mfp-close:hover {
    opacity: 1
}

.mfp-close-btn-in .mfp-close {
    color: #ccc
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    margin: -55px 0 0;
    top: 50%;
    padding: 0;
    padding: 0;
    height: 110px;
    -webkit-tap-highlight-color: transparent
}

.mfp-arrow:active {
    margin-top: -54px
}

.mfp-arrow:focus,
.mfp-arrow:hover {
    opacity: 1
}

.mfp-arrow:after,
.mfp-arrow:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: .7
}

.mfp-arrow-left {
    left: 0
}

.mfp-arrow-left:after {
    border-right: 17px solid #fff;
    margin-left: 31px
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f
}

.mfp-arrow-right {
    right: 0
}

.mfp-arrow-right:after {
    border-left: 17px solid #fff;
    margin-left: 39px
}

.mfp-arrow-right:before {
    border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px
}

.mfp-iframe-holder .mfp-close {
    top: -40px
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #000
}

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
    margin: 0 auto
}

.mfp-figure {
    line-height: 0
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #444
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-figure figure {
    margin: 0
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-width:800px) and (orientation:landscape),
screen and (max-height:300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0
    }
    .mfp-img-mobile img.mfp-img {
        padding: 0
    }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, .6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        text-align: center;
        padding: 0
    }
}

@media all and (max-width:900px) {
    .mfp-arrow {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0
    }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%
    }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: .86
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0
}

.top-billboard {
    margin-bottom: 15px
}

@media screen and (max-width:767px) {
    .top-billboard__img {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 0;
        padding-top: calc(100vh - 100px)
    }
    .top-billboard__img img {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        max-width: inherit;
        width: auto;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.top-billboard__cont {
    max-width: 860px;
    width: 100%;
    margin: 0 20px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    top: 50px;
    left: 50%;
    text-align: center
}

@media screen and (max-width:767px) {
    .top-billboard__cont {
        width: 86%;
        margin: 0;
        top: 30px;
        padding: 0 15px 20px
    }
}

.top-billboard__logo {
    width: 122px;
    margin: 0 auto 40px
}

@media screen and (max-width:999px) {
    .top-billboard__logo {
        margin-bottom: 40px
    }
}

@media screen and (max-width:767px) {
    .top-billboard__logo {
        width: 70px;
        margin-bottom: 20px
    }
}

.top-billboard__ttl {
    font-size: 22px;
    font-size: 1.46667rem;
    margin-bottom: 1.5rem;
    color: #000;
    font-weight: 700
}

.top-billboard__txt {
    font-size: 18px;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #000
}

@media screen and (max-width:767px) {
    .top-billboard__txt {
        font-size: 13px;
        font-size: .86667rem;
        margin-bottom: 1rem
    }
}

.top-billboard__txten {
    font-size: 16px;
    font-size: 1.06667rem
}

@media screen and (max-width:767px) {
    .top-billboard__txten {
        font-size: 11px;
        font-size: .73333rem
    }
}

.top .slick-slide a {
    width: 100%;
    height: 100%
}

.top .slick-slide a:hover {
    opacity: .9
}

.top .slider {
    visibility: hidden
}

.top .slider.slick-initialized {
    visibility: visible
}

.top .slider .slide {
    position: relative
}

.topics-col.top-news {
    margin: 70px auto;
}

.topics-col.top-news ul {
    width: 100%;
    margin: 0;
}
.topics-col.top-news li{
    width: 100%;
    margin-bottom: .5rem;
}

.top-products {
    margin-top: 80px;
    margin-bottom: 10px
}

.top-history .topcol2__img {
    height: 550px
}

@media screen and (max-width:767px) {
    .top-history .topcol2__img {
        height: 250px;
        background-size: cover
    }
}

.top-organic {
    margin-top: 80px;
    margin-bottom: 10px
}

.top-commitment .topcol2__img {
    /* height: 550px */
}

@media screen and (max-width:767px) {
    .top-commitment .topcol2__img {
        height: 300px;
        background-size: cover
    }
}

.top-commitment .top-commitment__imgbg {
    background-color: #eaecd9;
    width: 54%;
    height: 90%;
    position: absolute;
    top: 100px;
    right: 30px
}

@media screen and (max-width:767px) {
    .top-commitment .top-commitment__imgbg {
        display: none
    }
}

.top-commitment .topcol2__img {
    position: relative
}

.top-commitment .topcol2__img img {
    width: 100%
}

.top-commitment .topcol2__cont {
    padding-bottom: 0
}

.top-commitment .topcol2__cont--ttl {
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .top-commitment .topcol2__cont--ttl {
        margin-top: 10px;
        margin-bottom: 0
    }
}

.top-fairtrade .topcol2__img {
    height: 550px
}

@media screen and (max-width:767px) {
    .top-fairtrade .topcol2__img {
        height: 250px;
        background-size: cover
    }
}

.top-about {
    background: url(../images/common/top-cont-06-bg@2x.png) 0 0 no-repeat
}

@media screen and (max-width:767px) {
    .top-about {
        margin-top: 30px
    }
}

.topcol2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 70px;
    position: relative
}

@media screen and (max-width:767px) {
    .topcol2 {
        display: block;
        margin-bottom: 0
    }
}

.topcol2__rev {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.topcol2__img {
    width: 54%;
    z-index: 10
}

@media screen and (max-width:767px) {
    .topcol2__img {
        width: 54%;
        z-index: 10
    }
}

@media screen and (max-width:767px) {
    .topcol2__img {
        width: 100%;
        position: relative;
        top: 30px;
        z-index: 1;
        opacity: 1;
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: none;
        transition: none
    }
}

.topcol2__world {
    position: absolute;
    width: 48%;
    top: 10%;
    right: 2%
}

.topcol2__cont {
    z-index: 1;
    width: 46%;
    padding: 0 110px 40px 130px
}

@media screen and (max-width:767px) {
    .topcol2__cont {
        z-index: 1;
        width: 46%;
        padding: 0 110px 40px 130px
    }
}

@media screen and (max-width:767px) {
    .topcol2__cont {
        width: inherit;
        padding: 10px 15px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #fff;
        margin: 0 15px;
        position: relative;
        top: -30px
    }
}

.topcol2__cont--ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 40px
}

@media screen and (max-width:767px) {
    .topcol2__cont--ttl {
        text-align: center;
        font-size: 40px;
        font-size: 2.66667rem;
        margin-bottom: 0
    }
}

.topcol2__cont--ttl::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #3e3a39;
    position: absolute;
    top: 100%;
    left: -60%
}

@media screen and (max-width:767px) {
    .topcol2__cont--ttl::before {
        content: none
    }
}

.topcol2__cont--ttl span {
    display: block;
    font-size: 41px;
    font-size: 2.73333rem;
    font-family: benton-sans, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: .6
}

@media screen and (max-width:767px) {
    .topcol2__cont--ttl span {
        font-size: 24px;
        font-size: 1.6rem
    }
}

.topcol2__cont--midashi {
    font-size: 15px;
    font-size: 1rem
}

@media screen and (max-width:767px) {
    .topcol2__cont--midashi {
        text-align: center;
        font-size: 14px;
        font-size: .93333rem
    }
}

.topcol2__cont--txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 1rem
}

.topcol2__cont--txten {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 30px
}

.topcol2__cont--list {
    margin-left: -25%;
    margin-right: -25%;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (max-width:767px) {
    .topcol2__cont--list {
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 15px
    }
}

.topcol2__cont--list li {
    display: inline-block;
    border: 6px solid #8bc400;
    border-radius: 50%;
    width: 31%;
    height: 0;
    position: relative;
    padding-top: 28%;
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .topcol2__cont--list li {
        font-size: 11px;
        font-size: .6rem;
        border-width: 3px
    }
}

.topcol2__cont--list li .topcol2__cont--listinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.topcol2__cont--list li .topcol2__cont--listinner .topcol2__cont--listinnertxt {
    text-align: center
}

.topcol2__cont--list li .topcol2__cont--listinner .topcol2__cont--listinnertxt span {
    font-family: benton-sans, sans-serif;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap
}

.page-billboard {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

@media screen and (max-width:767px) {
    .page-billboard {
        margin-bottom: 30px;
        display: flex;
        align-items: center
    }
    .page-billboard__img img {
        width: 100%;
        object-fit: cover;
        height: 250px
    }
    .post-template-default .page-billboard__img img {
        width: 100%;
        object-fit: cover;
        height: auto
    }
}

.page-billboard__img {
    width: 100%
}

.page-billboard__img img {
    width: 100%
}

.page-billboard__cont {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    color: #1c2546;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

body.certification .page-billboard__cont,
body.commitment .page-billboard__cont,
body.component .page-billboard__cont,
body.fairtrade .page-billboard__cont,
body.history .page-billboard__cont,
body.ourselves .page-billboard__cont {
    color: #fff
}

.page-billboard__ttl {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 55px;
    font-size: 3.66667rem;
    text-align: center;
    line-height: 1;
    margin-bottom: 10px;
    margin-top: 20px
}

.page-billboard__ttl__read {
    font-size: 24px;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1;
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .page-billboard__cont {
        position: absolute;
        width: 100%;
        top: auto;
        left: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    .page-billboard__ttl {
        font-size: 30px;
        font-size: 2rem;
        margin-bottom: 0
    }
}

.page-billboard__txt {
    font-size: 24px;
    font-size: 1.6rem;
    text-align: center
}

@media screen and (max-width:767px) {
    .page-billboard__txt {
        font-size: 15px;
        font-size: 1rem
    }
    .page-billboard__ttl__read {
        font-size: 15px;
        font-size: 1rem;
        margin-bottom: 10px
    }
}

.page-billboard--noimg .page-billboard__cont {
    position: static;
    text-align: center;
    top: 0;
    color: #1c2546;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    padding: 30px 20px
}

.page-ttl {
    padding-top: 60px;
    margin-bottom: 38px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .page-ttl {
      padding-right: 30px;
      padding-left: 30px;
  }
}

@media screen and (max-width:767px) {
    .page-ttl {
        padding: 0 20px
    }
}

.page-ttl h3 {
    text-align: center;
    font-size: 34px;
    font-size: 2.26667rem;
    font-weight: 400;
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .page-ttl h3 {
        font-size: 18px;
        font-size: 1.2rem
    }
}

.page-ttl p {
    text-align: left;
    font-size: 14px;
    font-size: .93333rem
}

.page-ttl small {
    float: right;
    margin-top: 8px;
}

@media screen and (max-width:767px) {
    .page-ttl p {
        font-size: 13px;
        font-size: .86667rem
    }
}

.page-banner {
    margin-bottom: 50px
}

@media screen and (max-width:767px) {
    .page-banner {
        margin-bottom: 30px
    }
}

.page-banner ul {
    list-style: none;
    text-align: center
}

@media screen and (max-width:767px) {
    .page-banner ul {
        padding: 0 20px
    }
}

.page-banner ul li {
    width: 278px;
    display: inline-block;
    margin-right: 26px
}

.page-banner ul li:last-of-type {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .page-banner ul li {
        width: 300px;
        margin-right: 0;
        margin-bottom: 10px
    }
}


.page-banner02 a {
    width: 100%;
	max-width: 800px;
    display: block;
    margin: 0 auto 100px;
}
@media screen and (max-width:767px) {
.page-banner02 a {
    width: 90%;
    display: block;
    margin: 0 5% 50px;
}
}




.page-catmenu {
    text-align: center;
    list-style: none;
    margin-top: 100px;
}

.page-catmenu li {
    display: inline-block;
    line-height: 1;
    padding: 0 30px;
    border-right: 1px solid #3e3a39
}

.page-catmenu li a.is-current {
  font-weight: 700;
  pointer-events: none;
}
@media screen and (max-width:767px) {
    .page-catmenu li {
        padding: 0 20px;
    }
}

.page-catmenu li:first-of-type {
    border-left: 1px solid #3e3a39
}

.page-catmenu li a {
    color: #3e3a39;
    text-decoration: none
}
.page-catmenu li.active a,
.page-catmenu li a:hover {
    border-bottom: solid 1px #1C2446;
    padding: 0 ;
}


.productlist .page-billboard__cont {
    position: absolute;
    width: 100%;
    top: 25%;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    color: #1c2546;
    background: #fff;
    background-color: rgba(255, 255, 255, .5);
    padding: 10px 0
}

hr {
    border: 0;
    width: 100%;
    height: 1px;
    background-color: #d6d6d6;
    margin: 50px auto
}

@media screen and (max-width:767px) {
    hr {
        margin: 20px auto
    }
}

@media screen and (max-width:767px) {
    .btn-area {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-def {
    display: inline-block
}

@media screen and (max-width:767px) {
    .btn-def {
        width: 100%
    }
}

.btn-def a,
.btn-def input {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 70px;
    color: #595757;
    border: 1px solid #595757;
    background-color: #fff;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 21px;
    font-size: 1.4rem;
    letter-spacing: .2rem!important;
    line-height: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.btn-def a:hover,
.btn-def input:hover {
    color: #fff;
    background-color: #3e3a39
}

@media screen and (max-width:767px) {
    .btn-def a {
        font-size: 18px;
        font-size: 1.2rem
    }
}

.btn-def.is-disabled,
.btn-def:disabled {
    opacity: .5;
    pointer-events: none
}

.btn-def.btn-online a {
    padding: 15px 70px 15px 30px;
    letter-spacing: .1rem!important;
    background: url(../images/common/ar-r.svg) right 10px top 50% no-repeat #fff;
    white-space: nowrap
}

.btn-def.btn-online a:hover {
    color: #fff;
    background-color: #595757
}

.btn-def.btn-online a img {
    width: 24px;
    margin-right: 1rem
}

.btn-def--s {
    display: inline-block
}

.btn-def--s a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 20px;
    color: #595757;
    border: 1px solid #595757;
    background-color: #fff;
    font-size: 14px;
    font-size: .93333rem;
    letter-spacing: .2rem!important;
    line-height: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.btn-def--s a:hover {
    color: #fff;
    background-color: #595757
}

.btn-def--s.is-disabled,
.btn-def--s:disabled {
    opacity: .5;
    pointer-events: none
}

.btn-def--s-en a {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    font-size: 1.2rem
}

@media screen and (max-width:767px) {
    .btn-def--s-en a {
        font-size: 14px;
        font-size: .93333rem;
        letter-spacing: .1rem!important
    }
}

.btn-def--ss {
    display: inline-block
}

.btn-def--ss a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-decoration: none;
    padding: 10px 40px 10px 20px;
    color: #595757;
    border: 1px solid #595757;
    font-size: 14px;
    font-size: .93333rem;
    line-height: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background: url(../images/common/ar-r.svg) right 5px top 50% no-repeat #fff
}

.btn-def--ss a:hover {
    color: #fff;
    background-color: #595757
}

.btn-def--ss.is-disabled,
.btn-def--ss:disabled {
    opacity: .5;
    pointer-events: none
}

.btn-def--ss-en a {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 19px;
    font-size: 1.26667rem
}

.normal_letter-spacing {
    letter-spacing: normal
}

.f12 {
    font-size: 12px;
    font-size: .8rem
}

.howto12-col,
.topics-col {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (max-width:767px) {
    .howto12-col,
    .topics-col {
        padding-left: 20px;
        padding-right: 20px
    }
}

.howto12-col.top-topics,
.topics-col.top-topics {
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .howto12-col.top-topics,
    .topics-col.top-topics {
        margin-bottom: 20px
    }
}

.pager {
    text-align: center;
    margin-top: 74px;
    margin-bottom: 146px;
}

@media screen and (max-width: 400px) {
    .pager .page-numbers {
        margin: 0 9px !important;
    }
}

@media screen and (max-width: 359px) {
    .pager .page-numbers {
        margin: 0 7px !important;
    }
}

.howto12-col.page-topics {
    margin-top: 60px
}

.topics-col.page-topics {
    margin-top: 90px;
}

.topics-col.page-topics + .btn-area {
    margin-bottom: 240px;
}
@media screen and (max-width:767px) {
  .topics-col.page-topics + .btn-area {
      margin-bottom: 160px;
  }
}

.category-all-one .topics-col.page-topics,
.category-column .topics-col.page-topics,
.category-topics .topics-col.page-topics,
.page-template-top .topics-col.page-topics {
    margin-top: 60px
}

@media screen and (max-width:767px) {
    .howto12-col.page-topics,
    .topics-col.page-topics {
        margin-top: 30px
    }
}
@media screen and (min-width:767px) and (max-width:1024px) {
  .topics-col.page-topics {
      padding-right: 30px;
      padding-left: 30px;
  }
}

.howto12-col__ttl,
.topics-col__ttl {
    text-align: center;
    font-size: 30px;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 30px
}

.topics-col__ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: var(--font-benton-extra);
    font-weight: 400;
    font-style: normal;
    strong {
      font-weight: 400;
    }
    font {
      font-size: inherit;
    }
}

@media screen and (max-width:767px) {
    .howto12-col__ttl,
    .topics-col__ttl {
        font-size: 40px;
        font-size: 2.66667rem
    }
}

.howto12-col__subttl,
.topics-col__subttl {
    text-align: center;
    font-size: 15px;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 10px
}

.howto12-col ul,
.howto12-col__inner,
.topics-col ul,
.topics-col__inner {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.howto12-col ul::after,
.howto12-col__inner::after,
.topics-col ul::after,
.topics-col__inner::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 18px);
    display: block
}

.howto12-col li,
.howto12-col__item,
.topics-col li,
.topics-col__item {
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 50px);
    margin-top: 50px
}

.howto12-col li:nth-child(1),
.howto12-col__item:nth-child(1),
.topics-col li:nth-child(1),
.topics-col__item:nth-child(1) {
    margin-top: 0
}

.howto12-col li:nth-child(2),
.howto12-col__item:nth-child(2),
.topics-col li:nth-child(2),
.topics-col__item:nth-child(2) {
    margin-top: 0
}

.howto12-col li:nth-child(3),
.howto12-col__item:nth-child(3),
.topics-col li:nth-child(3),
.topics-col__item:nth-child(3) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .howto12-col li,
    .howto12-col__item,
    .topics-col li,
    .topics-col__item {
        width: calc((100% - 20px) / 2);
        margin-top: 20px;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .howto12-col li:nth-child(1),
    .howto12-col__item:nth-child(1),
    .topics-col li:nth-child(1),
    .topics-col__item:nth-child(1) {
        margin-top: 0
    }
    .howto12-col li:nth-child(2),
    .howto12-col__item:nth-child(2),
    .topics-col li:nth-child(2),
    .topics-col__item:nth-child(2) {
        margin-top: 0
    }
}

.howto12-col a,
.topics-col a {
    color: #707372;
    text-decoration: none
}

.topics-col a p:hover {
    text-decoration: underline
}

.howto12-col__cat,
.topics-col__cat {
    margin-top: 18px;
    margin-bottom: 10px
}

.howto12-col__cat span,
.topics-col__cat span {
    font-size: 18px;
    font-size: .93333rem;
    line-height: 1.2;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 600;
    font-style: normal
}
.l-header__navi>ul>li .gnavi-child__inner__r .topics-col__title {
    width: 100%;
}
.l-header__navi>ul>li .gnavi-child__inner__r .topics-col__title span {
	font-size: 16px;
    line-height: 1.2;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 600;
    font-style: normal

}
.l-header__navi>ul>li .gnavi-child__inner__r .topics-col__title span p {
    font-size: 13px;
    font-size: .86667rem;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 30px;
}

@media screen and (max-width:767px) {
    .howto12-col__cat span,
    .topics-col__cat span {
        font-size: 13px;
        font-size: .86667rem
    }
}

.howto12-col__entryttl,
.topics-col__entryttl {
    text-align: left;
    font-size: 18px;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .howto12-col__entryttl,
    .topics-col__entryttl {
        font-size: 14px;
        font-size: .93333rem
    }
}

.howto12-col p,
.topics-col p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0;
}

@media screen and (max-width:767px) {
    .howto12-col p,
    .topics-col p {
        font-size: 12px;
        font-size: .8rem
    }
}

.blc-lineup {
    max-width: 1000px;
    margin: 60px auto 30px;
    text-align: center
}

@media screen and (max-width:767px) {
    .blc-lineup {
        margin-top: 30px
    }
}

.blc-lineup__ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .blc-lineup__ttl {
        font-size: 40px;
        font-size: 2.66667rem
    }
}

.blc-lineup__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
    padding-left: 0
}

@media screen and (max-width:767px) {
    .blc-lineup__list {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 15px;
        padding-right: 15px
    }
}

.blc-lineup__list li {
    width: 14%
}

@media screen and (max-width:767px) {
    .blc-lineup__list li {
        width: 48%
    }
}

.blc-lineup__list li a {
    color: #3e3a39;
    text-decoration: none
}

.blc-lineup__list--img {
    margin-bottom: 10px
}

.blc-lineup__list--nameen {
    font-size: 18px;
    font-size: 1rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    word-wrap: break-word;
    white-space: normal;
}

.blc-lineup__list--name {
    word-wrap: break-word;
    white-space: normal !important;
}

@media screen and (max-width:767px) {
    .blc-lineup__list--nameen {
        font-size: 15px;
        font-size: .7rem
    }
    .blc-lineup__list--name {
      white-space: normal !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .blc-lineup__list--name {
    white-space: normal !important;
  }
}

.blc-lineup__list--name {
    font-size: 14px;
    font-size: .6rem;
}

@media screen and (max-width:767px) {
    .blc-lineup__list--name {
        font-size: .8rem
    }
}

.blc-commitment,
.blc-howto,
.blc-organic {
    position: relative;
    margin-bottom: 20px
}

.blc-commitment__img,
.blc-howto__img,
.blc-organic__img {
    width: 100%
}

.blc-commitment__cont,
.blc-howto__cont {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 450px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.blc-organic__cont {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 550px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media screen and (max-width:767px) {
    .blc-commitment__cont,
    .blc-howto__cont,
    .blc-organic__cont {
        position: static;
        top: auto;
        left: auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        padding: 20px;
        width: 100%
    }
}

@media (min-width:768px) and (max-width:999px) {
    .blc-organic__cont {
        width: 90%;
        left: 50%
    }
}

.blc-commitment__ttl,
.blc-howto__ttl,
.blc-organic__ttl {
    font-size: 50px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .blc-commitment__ttl,
    .blc-howto__ttl,
    .blc-organic__ttl {
        font-size: 40px;
        font-size: 9vmin;
        text-align: center
    }
}

.blc-commitment__ttl span,
.blc-howto__ttl span,
.blc-organic__ttl span {
    display: block;
    line-height: .6
}

.blc-commitment__subttl,
.blc-howto__subttl,
.blc-organic__subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .blc-commitment__subttl,
    .blc-howto__subttl,
    .blc-organic__subttl {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.blc-commitment__txt,
.blc-howto__txt,
.blc-organic__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .blc-commitment__txt,
    .blc-howto__txt,
    .blc-organic__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.blc-organic__img {
    height: 550px;
    background: url(../images/common/img-organic@2x.jpg) no-repeat;
    background-size: cover
}

.blc-commitment__img {
    height: 550px;
    background: url(../images/common/img-commitment@2x.jpg) no-repeat;
    background-size: cover
}

.blc-howto__img {
    height: 550px;
    background: url(../images/common/img-howto@2x.jpg) no-repeat;
    background-size: cover
}

.blc-certification {
    text-align: center;
    padding: 66px 15px;
    background-color: rgba(176, 163, 131, .1)
}

@media screen and (max-width:767px) {
    .blc-certification {
        padding: 30px 20px
    }
}

.blc-certification__midashi {
    font-size: 15px;
    font-size: 1rem
}

@media screen and (max-width:767px) {
    .blc-certification__midashi {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.blc-certification .topcol2__cont--ttl::before {
    display: none
}

.blc-certification .topcol2__cont--ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

.blc-certification__ttl {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 51px;
    font-size: 3.4rem;
    margin-bottom: 30px
}

.blc-certification__ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

@media screen and (max-width:767px) {
    .blc-certification__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-certification__txt,
.blc-certification__txten {
    font-size: 14px;
    font-size: .93333rem;
    max-width: 800px;
    margin: 0 auto 1rem
}

@media screen and (max-width:767px) {
    .blc-certification__txt,
    .blc-certification__txten {
        font-size: 13px;
        font-size: .86667rem
    }
}

.blc-certification__logo {
    margin-bottom: 40px
}

.blc-commitment {
    color: #fff
}

@media screen and (max-width:767px) {
    .blc-commitment {
        color: #3e3a39
    }
}

.blc-commitment__cont {
    left: auto;
    right: 10%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (max-width:767px) {
    .blc-commitment__cont {
        right: auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@media (min-width:768px) and (max-width:999px) {
    .blc-commitment__cont {
        width: 90%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%)
    }
}

.blc-fairtrade {
    text-align: center;
    padding: 100px 15px;
    background-color: rgba(0, 53, 142, .1);
    position: relative;
}

@media screen and (max-width:767px) {
    .blc-fairtrade {
        padding: 30px 20px
    }
}

.blc-fairtrade__img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 90%;
    z-index: -1
}

.blc-fairtrade__img img {
    height: 100%
}

.blc-fairtrade .topcol2__cont--ttl::before {
    display: none
}

.blc-fairtrade .topcol2__cont--ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

.blc-fairtrade__midashi {
    font-size: 15px;
    font-size: 1rem
}

@media screen and (max-width:767px) {
    .blc-fairtrade__midashi {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.blc-fairtrade__ttl {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 51px;
    font-size: 3.4rem;
    margin-bottom: 30px
}

.blc-fairtrade__ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

@media screen and (max-width:767px) {
    .blc-fairtrade__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-fairtrade__txt,
.blc-fairtrade__txten {
    font-size: 14px;
    font-size: .93333rem;
    max-width: 800px;
    margin: 0 auto 1rem
}

@media screen and (max-width:767px) {
    .blc-fairtrade__txt,
    .blc-fairtrade__txten {
        font-size: 13px;
        font-size: .86667rem
    }
}


.blc-ourselves {
    text-align: center;
    padding: 100px 15px;
    background: url(../images/common/top-cont-06-bg@2x.png) 50% 0 no-repeat;
    /*background-color: rgba(0, 53, 142, .1);*/
    position: relative;
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .blc-ourselves {
        padding: 30px 20px;
        background: none;
    }
}

.blc-ourselves__img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 90%;
    z-index: -1
}

.blc-ourselves__img img {
    height: 100%
}

.blc-ourselves .topcol2__cont--ttl::before {
    display: none
}

.blc-ourselves .topcol2__cont--ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

.blc-ourselves__midashi {
    font-size: 15px;
    font-size: 1rem
}

@media screen and (max-width:767px) {
    .blc-ourselves__midashi {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.blc-ourselves__ttl {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 51px;
    font-size: 3.4rem;
    margin-bottom: 30px
}

.blc-ourselves__ttl::after {
    content: "";
    width: 242px;
    height: 1px;
    background-color: #3e3a39;
    display: block;
    margin: 10px auto 0
}

@media screen and (max-width:767px) {
    .blc-ourselves__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-ourselves__txt,
.blc-ourselves__txten {
    font-size: 14px;
    font-size: .93333rem;
    max-width: 800px;
    margin: 0 auto 1rem
}

@media screen and (max-width:767px) {
    .blc-ourselves__txt,
    .blc-ourselves__txten {
        font-size: 13px;
        font-size: .86667rem
    }
}

.blc-history {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 70px;
    position: relative
}

@media screen and (max-width:767px) {
    .blc-history {
        display: block;
        margin-bottom: 0
    }
}

.blc-history__rev {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.blc-history__img {
    width: 54%;
    z-index: 10;
    background-color: #604c3f
}

@media screen and (max-width:767px) {
    .blc-history__img {
        width: 100%
    }
}

.blc-history__cont {
    z-index: 1;
    width: 46%;
    padding: 3% 80px 20px 10%;
    background-color: #604c3f;
    color: #fff
}

@media screen and (max-width:767px) {
    .blc-history__cont {
        padding: 30px 20px;
        width: 100%
    }
}

.blc-history__ttl {
    font-size: 50px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .blc-history__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-history__subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .blc-history__subttl {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.blc-history__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .blc-history__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.productList {
    max-width: 1000px;
    margin: 60px auto 30px
}

@media screen and (max-width:767px) {
    .productList {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 20px
    }
}
.blc-productList__ttl {
    font-size: 50px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
}

@media screen and (max-width:767px) {
    .blc-productList__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-productList__subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    text-align: center;
}

@media screen and (max-width:767px) {
    .blc-productList__subttl {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}
.productList__ttl {
    font-size: 34px;
    font-size: 2.26667rem;
    text-align: center
}

.productList__ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .productList__ttl {
        font-size: 40px;
        font-size: 2.66667rem
    }
}

.productList__txt {
    font-size: 14px;
    font-size: 1.6rem;
    text-align: center
}

.productList-list {
    list-style: none;
    padding-left: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.productList-list::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 80px);
    display: block
}

@media screen and (max-width:767px) {
    .productList-list {
        display: block;
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.all-one-toothpaste .productList-list {
    list-style: none;
    padding-left: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center
}

.productList-item {
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 80px);
    margin-top: 80px;
    margin-top: 40px;
    text-align: center
}

.all-one-toothpaste .productList-item {
    width: 50%
}

@media screen and (max-width:767px) {
    .all-one-toothpaste .productList-item {
        width: 100%
    }
}

.all-one-toothpaste .productList-item .productList-item__cont {
    margin-top: 20px
}

.all-one-toothpaste .productList-list::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 80px);
    display: none
}

.productList-item:nth-child(1) {
    margin-top: 0
}

.productList-item:nth-child(2) {
    margin-top: 0
}

.productList-item:nth-child(3) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .productList-item {
        width: calc(1 / 1 * 100% - (1 - 1 / 1) * 20px);
        margin-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid #595757
    }
    .productList-item:nth-child(1) {
        margin-top: 0
    }
}

.productList-item__img {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px
}

@media screen and (max-width:767px) {
    .productList-item__img {
        width: 30%;
        margin-bottom: 1rem
    }
}

@media screen and (max-width:767px) {
    .productList-item__cont {
        padding-left: 20px;
        width: 70%;
        margin-bottom: 1rem
    }
}

.productList-item__nameen {
    font-size: 22px;
    font-size: 1.46667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .productList-item__nameen {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: left
    }
}

.productList-item__name {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .productList-item__name {
        margin-bottom: 0;
        text-align: left
    }
}

.productList-item__txt {
    padding: 10px;
    font-size: 14px;
    font-size: .93333rem;
    background-color: #f5f2e9;
    margin-bottom: 12px
}

@media screen and (max-width:767px) {
    .productList-item__txt {
        padding: 0;
        background-color: transparent;
        font-size: 13px;
        font-size: .86667rem;
        text-align: left
    }
}

.productList-item__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.productList-item__btns .btn-def--s {
    width: 100%
}

.productList-item__btns .btn-def--s:first-child {
    display: none
}

.productList-item__btns .btn-def--s a {
    padding: 8px 0 6px;
    width: 100%
}

.productList-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .productList-detail {
        display: block;
        margin-bottom: 0
    }
}

.productList-detail__howto {
    width: 100%;
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .productList-detail__howto {
        margin-bottom: 30px
    }
}

.productList-detail__01 {
    width: 40%
}

@media screen and (max-width:767px) {
    .productList-detail__01 {
        width: 100%;
        margin-bottom: 20px
    }
}

.productList-detail__02 {
    width: 30%
}

@media screen and (max-width:767px) {
    .productList-detail__02 {
        width: 100%;
        margin-bottom: 20px
    }
}

.productList-detail__02 p {
    font-size: 16px;
    font-size: 1.06667rem;
    line-height: 2
}

@media screen and (max-width:767px) {
    .productList-detail__02 p {
        font-size: 13px;
        font-size: .86667rem
    }
}

.productList-detail__03 {
    width: 24%
}

.productList-detail__03 small {
    line-height: 1.8;
    display: block;
    margin-bottom: 15px
}

@media screen and (max-width:767px) {
    .productList-detail__03 {
        width: 100%;
        margin-bottom: 20px
    }
}

.productList-detail__ttl {
    font-size: 16px;
    font-size: 1.06667rem;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

@media screen and (max-width:767px) {
    .productList-detail__ttl {
        font-size: 14px;
        font-size: .93333rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

.productList-detail__txt {
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .productList-detail__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.productList-detail__mark {
    margin-bottom: 15px
}

.howtoList {
    max-width: 1000px;
    margin: 60px auto 30px
}

@media screen and (max-width:767px) {
    .howtoList {
        padding: 0 20px;
        margin-top: 30px
    }
}
.blc-howtoList__ttl {
    font-size: 50px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
}

@media screen and (max-width:767px) {
    .blc-howtoList__ttl {
        font-size: 40px;
        font-size: 2.66667rem;
        text-align: center
    }
}

.blc-howtoList__subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    text-align: center;
}

@media screen and (max-width:767px) {
    .blc-howtoList__subttl {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}
.howtoList__ttl {
    font-size: 34px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .howtoList__ttl {
        font-size: 30px;
        font-size: 2rem
    }
}

.howtoList__txt {
    font-size: 14px;
    font-size: 1.6rem;
    text-align: center
}

@media screen and (max-width:767px) {
    .howtoList__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.howtoList-list {
    list-style: none;
    padding-left: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.howtoList-list::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 80px);
    display: block
}

@media screen and (max-width:767px) {
    .howtoList-list {
        margin-top: 30px;
        margin-bottom: 30px;
        display: block
    }
}

.howtoList-item {
    width: calc(1 / 2 * 100% - (1 - 1 / 2) * 80px);
    margin-top: 80px;
    margin-top: 40px;
    text-align: center
}

.howtoList-item:nth-child(1) {
    margin-top: 0
}

.howtoList-item:nth-child(2) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .howtoList-item {
        width: calc(1 / 1 * 100% - (1 - 1 / 1) * 20px);
        margin-top: 20px;
        margin-top: 0;
        margin-bottom: 1rem
    }
    .howtoList-item:nth-child(1) {
        margin-top: 0
    }
}

.howtoList-item__img {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px
}

.howtoList-item__nameen {
    font-size: 22px;
    font-size: 1.46667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

.howtoList-item__name {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 1rem
}

.howtoList-item__txt {
    max-width: 300px;
    float: none;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 12px
}

.column3 ul,
.column3__inner {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.column3 ul::after,
.column3__inner::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 40px);
    display: block
}

.column3 li,
.column3__item {
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 40px);
    margin-top: 40px
}

.column3 li:nth-child(1),
.column3__item:nth-child(1) {
    margin-top: 0
}

.column3 li:nth-child(2),
.column3__item:nth-child(2) {
    margin-top: 0
}

.column3 li:nth-child(3),
.column3__item:nth-child(3) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .column3 li,
    .column3__item {
        width: calc(1 / 2 * 100% - (1 - 1 / 2) * 20px);
        margin-top: 20px;
        margin-top: 0;
        margin-bottom: 1rem
    }
    .column3 li:nth-child(1),
    .column3__item:nth-child(1) {
        margin-top: 0
    }
    .column3 li:nth-child(2),
    .column3__item:nth-child(2) {
        margin-top: 0
    }
}

.column2__inner {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (max-width:767px) {
    .column2__inner {
        display: block
    }
}

.column2__item {
    width: calc(1 / 2 * 100% - (1 - 1 / 2) * 40px);
    margin-top: 40px
}

.column2__item:nth-child(1) {
    margin-top: 0
}

.column2__item:nth-child(2) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .column2__item {
        width: calc(1 / 1 * 100% - (1 - 1 / 1) * 20px);
        margin-top: 20px;
        margin-top: 0;
        margin-bottom: 1rem
    }
    .column2__item:nth-child(1) {
        margin-top: 0
    }
}

.column2 li img,
.column3 li img {
    width: 100%
}

.notes {
    margin-top: 3rem;
    background-color: #f5f5f5;
    padding: 3rem 4rem;
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .notes {
        margin-top: 1rem;
        padding: 2rem
    }
}

.notes h4 {
    font-size: 18px;
    font-size: 1.2rem;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .notes h4 {
        font-size: 15px;
        font-size: 1rem
    }
}

figure {
    display: table;
    text-align: center
}

figure figcaption {
    display: table-caption;
    caption-side: bottom;
    margin-top: .5rem;
    font-size: 13px;
    font-size: .86667rem
}

.gmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

.gmap embed,
.gmap iframe,
.gmap object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.AccContent {
    margin: 2rem 0
}

.spbr {
    display: none
}

@media screen and (max-width:767px) {
    .spbr {
        display: inline
    }
}

.pcbr {
    display: inline
}

@media screen and (max-width:767px) {
    .pcbr {
        display: none
    }
}

.spimg {
    display: none
}

@media screen and (max-width:767px) {
    .spimg {
        display: inline-block
    }
}

.pcimg {
    display: inline-block
}

@media screen and (max-width:767px) {
    .pcimg {
        display: none
    }
}

.spblock {
    display: none
}

@media screen and (max-width:767px) {
    .spblock {
        display: block
    }
}

.pcblock {
    display: block
}

@media screen and (max-width:767px) {
    .pcblock {
        display: none
    }
}

.hide {
    display: none
}

.center {
    text-align: center
}

.commitment-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (max-width:767px) {
    .commitment-cont {
        padding: 0 20px
    }
}

.commitment-cont__ttl {
    display: block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0
}

@media screen and (max-width:767px) {
    .commitment-cont__ttl {
        margin-bottom: 20px
    }
}

.commitment-cont__ttl-r {
    border-left: 1px solid #3e3a39;
    padding-left: 20px;
    margin-left: 0;
    font-size: 12px;
    font-size: .8rem;
    margin: 20px 0
}

.commitment-cont__ttl-r span.en {
    font-size: 30px;
    font-size: 3rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: block;
    white-space: nowrap
}

@media screen and (max-width:767px) {
    .commitment-cont__ttl-r span.en {
        white-space: normal
    }
}

.commitment-cont__ttl-r span.ja {
    display: block;
    display: none
}

.commitment-cont__subttl {
    font-size: 24px;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .commitment-cont__subttl {
        font-size: 18px;
        font-size: 1.2rem
    }
}

.commitment-cont__txt {
    font-size: 14px;
    font-size: .93333rem
}

.commitment-cont .column2__inner {
    margin-bottom: 94px
}

a.anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px
}

@media screen and (max-width:767px) {
    .commitment-cont .column2__inner {
        margin-bottom: 30px
    }
}

.commitment-circle {
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .commitment-circle {
        margin-bottom: 30px
    }
}

.commitment-circle ul {
    list-style: none;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (max-width:767px) {
    .commitment-circle ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.commitment-circle ul li {
    width: 15%
}

@media screen and (max-width:767px) {
    .commitment-circle ul li {
        width: 30%;
        margin-bottom: 10px
    }
}

.fairtrade-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .fairtrade-cont {
      padding: 0 30px
  }
}

@media screen and (max-width:767px) {
    .fairtrade-cont {
        padding: 0 20px
    }
}

.fairtrade-cont__head .column2__inner {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 480px
}

@media screen and (max-width:767px) {
    .fairtrade-cont__head .column2__inner {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
}

.fairtrade-cont__head .column2__inner .column2__item:nth-child(2) {
    width: 60px;
    padding-bottom: 6px
}

.fairtrade-cont__midashi {
    font-size: 16px;
    font-size: 1.06667rem;
    white-space: nowrap
}

@media screen and (max-width:767px) {
    .fairtrade-cont__midashi {
        font-size: 14px;
        font-size: .93333rem;
        line-height: 1.4
    }
}

.fairtrade-cont__ttl {
    font-size: 70px;
    font-size: 4.66667rem;
    font-family: benton-sans-extra-compressed, sans-serif;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap
}

@media screen and (max-width:767px) {
    .fairtrade-cont__ttl {
        font-size: 30px;
        font-size: 2rem
    }
}

@media screen and (max-width:767px) {
    .fairtrade-cont__icon {
        width: 100%;
        text-align: center
    }
}

.fairtrade-cont__icon img {
    width: 60px;
    margin: 0 5px
}

.fairtrade-cont__icon img.ft-coconut {
    width: 70px
}

.fairtrade-cont__icon img.ft-mint {
    width: 61px
}

.fairtrade-cont__icon img.ft-olive {
    width: 61px
}

.fairtrade-cont__icon img.ft-teatree {
    width: 68px
}

.fairtrade-cont__icon img.ft-palmoil {
    width: 66px
}

.fairtrade-cont__icon img.ft-sugar {
    width: 66px
}

.fairtrade-cont__icon img.ft-palmkernel {
    width: 91px
}

.fairtrade-cont__subttl {
    font-size: 20px;
    font-size: 1.33333rem;
    font-weight: 400;
    line-height: 1.3;
    border-left: 4px solid #3e3a39;
    padding-left: 10px;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .fairtrade-cont__subttl {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.fairtrade-cont__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 2rem
}
.fairtrade-cont__txt a {
  text-decoration: underline;
  color: #00358e;
}
.fairtrade-cont__txt a:hover {
  color: #0052db;
}


@media screen and (max-width:767px) {
    .fairtrade-cont__txt {
        font-size: 13px;
        font-size: .86667rem;
        margin-bottom: 1rem
    }
}

.fairtrade-guideline {
    max-width: 870px;
    margin: 0 auto 60px;
    padding: 50px 30px;
    border-radius: 9.3px;
    background-color: #f5f8f1
}

@media screen and (max-width:767px) {
    .fairtrade-guideline {
        padding: 30px 20px
    }
}

.fairtrade-guideline__ttl {
    font-size: 22px;
    font-size: 1.46667rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: center
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__ttl {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.fairtrade-guideline__list {
    list-style: none;
    max-width: 600px;
    margin: 50px auto 0;
    padding-left: 0
}

.fairtrade-guideline__list li {
    padding-left: 100px;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 60px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-color: #c9e3c3;
    background-position: 15px
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li {
        padding-left: 60px;
        margin-bottom: 20px;
        padding-right: 15px
    }
}

.fairtrade-guideline__list li h5 {
    font-size: 22px;
    font-size: 1.46667rem;
    font-weight: 400
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li h5 {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.fairtrade-guideline__list li p {
    font-size: 14px;
    font-size: .93333rem;
    margin-top: 10px
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li p {
        font-size: 13px;
        font-size: .86667rem
    }
}

.fairtrade-guideline__list li.fairtrade-guideline__list1 {
    background-image: url(../images/fairtrade/icon-1.svg)
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li.fairtrade-guideline__list1 {
        background-size: 30px
    }
}

.fairtrade-guideline__list li.fairtrade-guideline__list2 {
    background-image: url(../images/fairtrade/icon-2.svg)
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li.fairtrade-guideline__list2 {
        background-size: 30px
    }
}

.fairtrade-guideline__list li.fairtrade-guideline__list3 {
    background-image: url(../images/fairtrade/icon-3.svg)
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li.fairtrade-guideline__list3 {
        background-size: 30px
    }
}

.fairtrade-guideline__list li.fairtrade-guideline__list4 {
    background-image: url(../images/fairtrade/icon-4.svg)
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li.fairtrade-guideline__list4 {
        background-size: 30px
    }
}

.fairtrade-guideline__list li.fairtrade-guideline__list5 {
    background-image: url(../images/fairtrade/icon-5.svg)
}

@media screen and (max-width:767px) {
    .fairtrade-guideline__list li.fairtrade-guideline__list5 {
        background-size: 30px
    }
}

.fairtrade-map {
    margin-bottom: 60px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .fairtrade-map {
      padding: 0 30px;
  }
}

@media screen and (max-width:767px) {
    .fairtrade-map {
        margin-bottom: 30px
    }
}

.fairtrade-map__img {
  position:relative;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 60px
}

.fairtrade-map__img a:hover {
  opacity: .5 !important;
}

@media screen and (max-width:767px) {
    .fairtrade-map__img {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px
    }
}

.fairtrade-map__img .brazil {
    position: absolute;
    top: 55.5%;
    left: 27.5%;
    width: 17%;
}
.fairtrade-map__img .srilanka {
    position: absolute;
    top: 20%;
    left: 63.5%;
    width: 17%;
}
.fairtrade-map__img .ghana {
    position: absolute;
    top: 24%;
    left: 31%;
    width: 17%;
}
.fairtrade-map__img .ghana02 {
	position: absolute;
    top: 31%;
    left: 33%;
    width: 14%;
}
.fairtrade-map__img .samoa{
    position: absolute;
    top: 31%;
    left: 87%;
    width: 17%;
}
.fairtrade-map__img .india {
    position: absolute;
    top: 40%;
    left: 56%;
    width: 17%;
}
.fairtrade-map__img .palestine {
    position: absolute;
    top: 4%;
    left: 52%;
    width: 17%;
}
.fairtrade-map__img .israel {
    position: absolute;
    top: 4%;
    left: 41.5%;
    width: 17%;
}
.fairtrade-map__img .ecuador {
    position: absolute;
    top: 37.2%;
    left: 9%;
    width: 17%;
}
.fairtrade-map__img .southafrica {
    position: absolute;
    top: 69%;
    left: 43%;
    width: 17%;
}
.fairtrade-map__txt {
  text-align: center
}
.fairtrade-map__txt a {
  text-decoration: underline;
  color: #00358e;
}
.fairtrade-map__txt a:hover {
  color: #0052db;
}

.fairtrade .dashedline-top {
    border-top: 1px dashed #3e3a39
}

.fairtrade .dashedline-top.column2 {
    padding-top: 65px;
    margin-top: 65px;
    margin-bottom: 20px
}

@media screen and (max-width:767px) {
    .fairtrade .dashedline-top.column2 {
        padding-top: 65px;
        margin-top: 65px
    }
}

.ourselves-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .ourselves-cont {
      padding-right: 30px;
      padding-left: 30px;
  }
}

.ourselves-cont__item {
    text-align: center;
    margin-bottom: 130px
}

@media screen and (max-width:767px) {
    .ourselves-cont__item {
        padding: 0 20px;
        margin-bottom: 30px
    }
}

.ourselves-cont__order {
    margin-bottom: 30px
}

.ourselves-cont__order img {
  display: inline;
}

.ourselves-cont__ttl {
    font-size: 40px;
    font-size: 2.66667rem;
    font-weight: 400
}

@media screen and (max-width:767px) {
    .ourselves-cont__ttl {
        font-size: 20px;
        font-size: 1.33333rem
    }
}

.ourselves-cont__ttlen {
    font-family: benton-sans-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 34px;
    font-size: 2.26667rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .ourselves-cont__ttlen {
        font-size: 20px;
        font-size: 1.33333rem
    }
}

.ourselves-cont__txt {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .ourselves-cont__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.ourselves-cont__txten {
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .ourselves-cont__txten {
        font-size: 13px;
        font-size: .86667rem
    }
}

.certification-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .certification-cont {
      padding-right: 30px;
      padding-left: 30px;
  }
}

@media screen and (max-width:767px) {
    .certification-cont {
        padding: 0 20px
    }
}

.certification-cont__ttl {
    font-size: 27px;
    font-size: 1.8rem;
    font-weight: 400;
    border-bottom: 1px solid #3e3a39;
    padding-bottom: 10px;
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .certification-cont__ttl {
        font-size: 18px;
        font-size: 1.2rem;
        margin-bottom: 30px
    }
}

.certification-cont__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 80px
}

@media screen and (max-width:767px) {
    .certification-cont__item {
        display: block;
        margin-bottom: 30px
    }
}

.certification-cont__item--l {
  width: 30%;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center
}
.certification-cont__item--l img {
  display: inline;
}

@media screen and (max-width:767px) {
    .certification-cont__item--l {
        width: 100%;
        margin-bottom: 10px;
        text-align: left
    }
}

.certification-cont__item--r {
    width: 80%
}

@media screen and (max-width:767px) {
    .certification-cont__item--r {
        width: 100%
    }
}

.certification-cont__name {
    font-size: 24px;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 1rem
}

@media screen and (max-width:767px) {
    .certification-cont__name {
        font-size: 16px;
        font-size: 1.06667rem;
        font-weight: 700
    }
}

.certification-cont__txt {
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .certification-cont__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.fragrance-billboard {
    max-width: 1000px;
    margin: 60px auto
}

@media screen and (max-width:767px) {
    .fragrance-billboard {
        margin: 30px auto
    }
}

.fragrance-billboard__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width:767px) {
    .fragrance-billboard__inner {
        display: block
    }
}

.fragrance-billboard__img {
    width: 30%
}

@media screen and (max-width:767px) {
    .fragrance-billboard__img {
        width: 100%;
        padding: 0 20px;
        text-align: center
    }
}

@media screen and (max-width:767px) {
    .fragrance-billboard__img img {
        max-width: 180px
    }
}

.fragrance-billboard__cont {
    width: 70%;
    padding-left: 6%
}

@media screen and (max-width:767px) {
    .fragrance-billboard__cont {
        width: 100%;
        padding: 0 20px
    }
}

.fragrance-billboard__cont--ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    margin-bottom: 0
}

@media screen and (max-width:767px) {
    .fragrance-billboard__cont--ttl {
        font-size: 30px;
        font-size: 2rem;
        text-align: center
    }
}

.fragrance-billboard__cont--subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .fragrance-billboard__cont--subttl {
        font-size: 18px;
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 20px
    }
}

.fragrance-billboard__cont--lead {
    font-size: 21px;
    font-size: 1.4rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .fragrance-billboard__cont--lead {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center;
        margin-bottom: 20px
    }
}

.fragrance-billboard__cont--txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .fragrance-billboard__cont--txt {
        font-size: 13px;
        font-size: .86667rem;
        margin-bottom: 20px
    }
}

.fragrance-recommend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width:767px) {
    .fragrance-recommend {
        display: block
    }
}

.fragrance-recommend__img {
    width: 54%
}

@media screen and (max-width:767px) {
    .fragrance-recommend__img {
        width: 100%
    }
}

.fragrance-recommend__cont {
    width: 46%;
    padding: 20px 20px 20px 40px
}

@media screen and (max-width:767px) {
    .fragrance-recommend__cont {
        width: 100%;
        padding: 20px
    }
}

.fragrance-recommend__cont--midashi {
    font-size: 15px;
    font-size: 1rem;
    margin-bottom: 0
}

.fragrance-recommend__cont--ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .fragrance-recommend__cont--ttl {
        font-size: 30px;
        font-size: 2rem
    }
}

.fragrance-howto {
    padding: 60px 15px;
    background-color: #f6f5f1
}

@media screen and (max-width:767px) {
    .fragrance-howto {
        padding: 20px 0
    }
}

.fragrance-howto .howto12-col__ttl {
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .fragrance-howto .howto12-col__ttl {
        font-size: 30px;
        font-size: 2rem;
        margin-bottom: 20px
    }
}

.fragrance-howto .howto12-colsubttl {
    font-size: 15px;
    font-size: 1rem;
    margin-bottom: 0
}

.fragrance-spec {
    max-width: 1000px;
    padding: 60px 20px;
    margin: 0 auto
}

@media screen and (max-width:767px) {
    .fragrance-spec {
        padding: 30px 20px
    }
}

.fragrance-spec__ttl {
    text-align: center;
    font-size: 55px;
    font-size: 3.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

@media screen and (max-width:767px) {
    .fragrance-spec__ttl {
        font-size: 30px;
        font-size: 2rem
    }
}

.fragrance-spec__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .fragrance-spec__inner {
        display: block
    }
}

.fragrance-spec__img {
    width: 40%
}

@media screen and (max-width:767px) {
    .fragrance-spec__img {
        width: 100%;
        text-align: center;
        margin-bottom: 20px
    }
}

@media screen and (max-width:767px) {
    .fragrance-spec__img img {
        max-width: 180px
    }
}

.fragrance-spec__cont {
    width: 60%;
    padding-left: 6%
}

@media screen and (max-width:767px) {
    .fragrance-spec__cont {
        width: 100%;
        padding: 0
    }
}

.fragrance-spec__cont--size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 80%;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .fragrance-spec__cont--size {
        width: 100%
    }
}

.fragrance-spec__cont--txt {
    margin-bottom: 15px
}

.fragrance-spec hr {
    background-color: #3e3a39;
    margin: 30px 0
}

.history-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .history-cont {
      padding-right: 30px;
      padding-left: 30px;
  }
}

.history-cont .column2 {
    margin-bottom: 60px
}

.history-cont .column2__inner {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: top
}

@media screen and (max-width:767px) {
    .history-cont .column2__inner {
        padding: 0 20px
    }
}

.history-cont__img {
    width: 56%
}

@media screen and (max-width:767px) {
    .history-cont__img {
        width: 100%
    }
}

.history-cont__cont {
    width: 44%;
    padding-left: 6%
}

@media screen and (max-width:767px) {
    .history-cont__cont {
        width: 100%;
        padding: 0
    }
}

.history-cont__year {
    font-size: 60px;
    font-size: 4rem;
    font-family: benton-sans-extra-compressed, sans-serif;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    margin-bottom: 10px
}

.history-cont__year span {
    font-size: 50%
}

@media screen and (max-width:767px) {
    .history-cont__year {
        font-size: 30px;
        font-size: 2rem
    }
}

.history-cont__ttl {
    font-size: 24px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .history-cont__ttl {
        font-size: 18px;
        font-size: 1.2rem
    }
}

.history-cont__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 2rem
}

@media screen and (max-width:767px) {
    .history-cont__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.store-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .store-cont {
      padding: 0 30px
  }
}

@media screen and (max-width:767px) {
    .store-cont {
        padding: 0 20px
    }
}

.store-cont__ttl {
    font-size: 27px;
    font-size: 1.8rem;
    font-weight: 400;
    border-bottom: 1px solid #3e3a39;
    padding-bottom: 10px;
    margin-bottom: 60px
}

@media screen and (max-width:767px) {
    .store-cont__ttl {
        font-size: 18px;
        font-size: 1.2rem;
        margin-bottom: 30px
    }
}

.store-cont__retail {
    max-width: 700px;
    margin: 0 auto 60px
}

@media screen and (max-width:767px) {
    .store-cont__retail {
        margin-bottom: 30px
    }
}

.store .retail__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 30px
}

@media screen and (max-width:767px) {
    .store .retail__items {
        display: block
    }
}

@media screen and (max-width:767px) {
    .store .retail__item {
        margin-bottom: 20px
    }
}

.store .retail__item-sep {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media screen and (max-width:767px) {
    .store .retail__item-sep {
        display: block
    }
}

.store .retail__item-sep .retail__txt {
    width: 60%
}

@media screen and (max-width:767px) {
    .store .retail__item-sep .retail__txt {
        width: 100%
    }
}

.store .retail__name {
    font-size: 18px;
    font-size: 1.2rem;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .store .retail__name {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.store .retail__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .store .retail__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.store-acc {
    text-align: left;
    list-style: none;
    padding-left: 0
}

.store-acc__ttl {
    font-size: 18px;
    font-size: 1.2rem;
    background-color: #d5d5d5;
    cursor: pointer;
    padding: 20px;
    margin-bottom: 1px;
    background: url(../images/common/icon-plus.svg) right 20px top 50% no-repeat #d5d5d5;
}



@media screen and (max-width:767px) {
    .store-acc__ttl {
        font-size: 15px;
        font-size: 1rem;
        padding: 10px
    }
}

.store-acc__inner {
    padding: 20px;
    display: none
}

@media screen and (max-width:767px) {
    .store-acc__inner {
        padding: 10px
    }
}

.columndetail-cont {
    max-width: 870px;
    margin: 60px auto;
    display: block
}

@media screen and (max-width:1001px) {
  .columndetail-cont {
      padding: 0 30px;
  }
}

@media screen and (max-width:767px) {
    .columndetail-cont {
        margin: 30px auto;
        display: block;
        padding: 0;
    }
}

.columndetail-cont__l {
    width: 60%
}

@media screen and (max-width:767px) {
    .columndetail-cont {
        width: 100%;
        padding: 0 20px
    }
}

.columndetail-cont__r {
    width: 36%
}

@media screen and (max-width:767px) {
    .columndetail-cont__r {
        width: 100%;
        padding: 0 20px
    }
}

.columndetail-cont__img {
    margin-bottom: 10px
}

.columndetail-cont__ttl {
    font-size: 24px;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    strong {
      font-weight: 700;
    }
}

@media screen and (max-width:767px) {
    .columndetail-cont__ttl {
        font-size: 18px;
        font-size: 1.2rem
    }
}

.columndetail-cont__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .columndetail-cont__txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.columndetail-cont__cat {
    background-color: #3e3a39;
    color: #fff;
    padding: 4px 10px;
    margin-bottom: 10px
}

.columndetail-cont__side--img {
    margin-bottom: 10px
}

.columndetail-cont__side--ttl {
    font-size: 18px;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .columndetail-cont__side--ttl {
        font-size: 16px;
        font-size: 1.06667rem
    }
}

.columndetail-cont__side--txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 30px
}

@media screen and (max-width:767px) {
    .columndetail-cont__side--txt {
        font-size: 13px;
        font-size: .86667rem
    }
}

.columndetail-cont__side--btn {
    margin: 50px auto
}

.component-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

@media screen and (max-width:767px) {
    .component-cont {
        padding: 0 20px
    }
}

.componentList {
    max-width: 1000px;
    margin: 100px auto 30px
}

@media screen and (max-width:767px) {
    .componentList {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0
    }
}

.componentList-list {
    list-style: none;
    padding-left: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width:767px) {
    .componentList-list {
        display: block;
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.componentList-item {
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 40px);
    margin-top: 40px;
    padding: 0 20px;
    margin-top: 40px;
    position: relative
}

.componentList-item:nth-child(1) {
    margin-top: 0
}

.componentList-item:nth-child(2) {
    margin-top: 0
}

.componentList-item:nth-child(3) {
    margin-top: 0
}

@media screen and (max-width:767px) {
    .componentList-item {
        width: calc(1 / 1 * 100% - (1 - 1 / 1) * 20px);
        margin-top: 20px;
        margin-top: 0;
        padding: 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid #595757
    }
    .componentList-item:nth-child(1) {
        margin-top: 0
    }
}

.componentList-item__img {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    text-align: center
}

@media screen and (max-width:767px) {
    .componentList-item__img {
        width: 100%
    }
}

.componentList-item__icon {
    text-align: center;
    margin-bottom: 10px;
}

.componentList-item__icon img {
    display: inline;
    width: 50px;
    margin: 0 5px
}

@media screen and (max-width:767px) {
    .componentList-item__cont {
        padding-left: 0;
        width: 100%;
        margin-bottom: 12px
    }
}

.componentList-item__nameen {
    font-size: 25px;
    font-size: 1.66667rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

@media screen and (max-width:767px) {
    .componentList-item__nameen {
        font-size: 16px;
        font-size: 1.06667rem;
        text-align: center
    }
}

.componentList-item__name {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 1rem;
    text-align: center
}

@media screen and (max-width:767px) {
    .componentList-item__name {
        margin-bottom: 0;
        text-align: center
    }
}

.componentList-item__lead {
    margin-bottom: 1em;
}

.componentList-item__txt {
    font-size: 14px;
    font-size: .93333rem;
    margin-bottom: 12px
}

@media screen and (max-width:767px) {
    .componentList-item__txt {
        font-size: 13px;
        font-size: .86667rem;
        text-align: left
    }
}

.componentList-item__fair {
    border: 1px solid #2f2c2b;
    padding: 0 10px;
    background-color: #fff;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0
}

.componentList.componentList-s .componentList-item__nameen {
    font-size: 22px;
    font-size: 1.46667rem
}

.componentList.componentList-s .componentList-item__name {
    font-size: 14px;
    font-size: .93333rem
}

.soapmaking__img {
    width: 100%;
    height: 0;
    background: url(../images/magicsoap/soapmaking@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.magicsoap__catch {
    color: #fff
}

@media screen and (max-width:767px) {
    .magicsoap__catch {
        color: #3e3a39
    }
}

.magicsoap__catch__img {
    width: 100%;
    height: 0;
    background: url(../images/magicsoap/catch-magicsoap@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.magicsoap__fairtrade__img {
    width: 100%;
    height: 550px;
    background: url(../images/magicsoap/img-organic.jpg) no-repeat;
    background-size: cover
}

.magicsoapbar__catch {
    color: #fff
}

@media screen and (max-width:767px) {
    .magicsoapbar__catch {
        color: #3e3a39
    }
}

.magicsoapbar__catch__img {
    width: 100%;
    height: 0;
    background: url(../images/magicsoapbar/catch-magicsoapbar@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.magicsoapbar__fairtrade__img {
    width: 100%;
    height: 550px;
    background: url(../images/magicsoapbar/fair_trade-magicsoapbar@2x.jpg) no-repeat;
    background-size: cover
}

.organiclipbalm__catch {
    color: #fff
}

@media screen and (max-width:767px) {
    .organiclipbalm__catch {
        color: #3e3a39
    }
}

.organiclipbalm__catch__img {
    width: 100%;
    height: 0;
    background: url(../images/organiclipbalm/catch-organiclipbalm@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.organiclipbalm__fairtrade__img {
    width: 100%;
    height: 550px;
    background: url(../images/organiclipbalm/fairtrade-organiclipbalm@2x.jpg) no-repeat;
    background-size: cover
}

.organicbalm__catch {
    color: #fff
}

@media screen and (max-width:767px) {
    .organicbalm__catch {
        color: #3e3a39
    }
}

.organicbalm__catch__img {
    width: 100%;
    height: 0;
    background: url(../images/organicbalm/catch-organicbalm@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.organicbalm__fairtrade__img {
    width: 100%;
    height: 550px;
    background: url(../images/organicbalm/fair_trade-organicbalm@2x.jpg) no-repeat;
    background-size: cover
}

.allonetoothpaste__catch {
    color: #fff
}

@media screen and (max-width:767px) {
    .allonetoothpaste__catch {
        color: #3e3a39
    }
}

.allonetoothpaste__catch__img {
    width: 100%;
    height: 0;
    background: url(../images/allonetoothpaste/catch-allonetoothpaste@2x.jpg) no-repeat;
    background-size: cover;
    padding-top: 39.28571428%
}

.allonetoothpaste__fairtrade__img {
    width: 100%;
    height: 550px;
    background: url(../images/allonetoothpaste/fairtrade-allonetoothpaste@2x.jpg) no-repeat;
    background-size: cover
}

.terms-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

.terms-cont__item {
    text-align: left
}

.terms-cont__order {
    margin-bottom: 30px
}

.terms-cont__ttl {
    font-size: 40px;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

.terms-cont__ttlen {
    font-family: benton-sans-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 34px;
    font-size: 2.26667rem;
    margin-bottom: 30px
}

.terms-cont__txt {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 50px
}

.terms-cont__txten {
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .terms-cont {
        padding: 0 20px
    }
}

.privacy-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

.privacy-cont__item {
    text-align: left;
    margin-bottom: 130px
}

.privacy-cont__order {
    margin-bottom: 30px
}

.privacy-cont__ttl {
    font-size: 40px;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

.privacy-cont__ttlen {
    font-family: benton-sans-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 34px;
    font-size: 2.26667rem;
    margin-bottom: 30px
}

.privacy-cont__txt {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 50px
}

.privacy-cont__txten {
    font-size: 14px;
    font-size: .93333rem
}

@media screen and (max-width:767px) {
    .privacy-cont {
        padding: 0 20px
    }
}

.company-cont {
    max-width: 1000px;
    margin: 0 auto 30px
}

.company-cont__item {
    text-align: left;
    margin-bottom: 130px
}

.company-cont__order {
    margin-bottom: 30px
}

.company-cont__ttl {
    font-size: 40px;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

.company-cont__ttlen {
    font-family: benton-sans-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 34px;
    font-size: 2.26667rem;
    margin-bottom: 30px
}

.company-cont__txt {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 50px
}

.company-cont__txten {
    font-size: 14px;
    font-size: .93333rem
}

.company-cont__table h2 {
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 500
}

.company-cont__table dl {
    overflow: hidden
}

.company-cont__table dt {
    float: left;
    width: 150px;
    margin-right: 20px;
    margin-bottom: 50px
}

.company-cont__table dd {
    float: left;
    width: 678px;
    margin-bottom: 50px
}

.company-cont__agent {
    background: #d6d6d6;
    padding: 20px;
    margin-bottom: 30px
}

.company-cont__agent dt {
    margin-bottom: 0;
    width: 100%;
    border-bottom: solid 1px #999;
    padding-bottom: 10px;
    margin-bottom: 10px
}

.company-cont__agent dd {
    margin-bottom: 0;
    width: 100%
}

@media screen and (max-width:767px) {
    .company-cont {
        padding: 0 20px
    }
    .company-cont__table dt {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0
    }
    .company-cont__table dd {
        float: none;
        width: 100%;
        margin-bottom: 7%
    }
    .company-cont__agent dt {
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 10px
    }
}

.contact-cont {
    max-width: 1200px;
    padding: 0 100px;
    margin: 0 auto 30px
}

.contact-cont .dl_table {
    display: table;
    width: 85%;
    margin: 3rem auto
}

.contact-cont__item {
    text-align: left;
    margin-bottom: 130px
}

.contact-cont__order {
    margin-bottom: 30px
}

.contact-cont__ttl {
    font-size: 40px;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

.contact-cont__ttlen {
    font-family: benton-sans-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 34px;
    font-size: 2.26667rem;
    margin-bottom: 30px
}

.contact-cont__txt {
    font-size: 16px;
    font-size: 1.06667rem;
    margin-bottom: 50px
}

.contact-cont__txten {
    font-size: 14px;
    font-size: .93333rem
}

.contact-cont__table {
    margin-bottom: 5rem
}

.contact-cont__table h2 {
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 500
}

.contact-cont__table dl {
    overflow: hidden
}

.contact-cont__table dt:nth-last-child(-n+2) {
    margin-bottom: 0
}

.contact-cont__table dd:nth-last-child(-n+2) {
    margin-bottom: 0
}

.contact-cont__attention {
    background: #d6d6d6;
    padding: 20px;
    margin-bottom: 30px
}

.contact-cont__attention .contact-cont__txt {
  margin-bottom: 0
}
.contact-cont__attention .contact-cont__txt a {
  text-decoration: underline;
  color: #00358e;
}
.contact-cont__attention .contact-cont__txt a:hover {
  color: #0052db;
}


#contact_contents {
    height: 100px
}

.column textarea {
    width: 100%;
    height: 6em
}

label {
    font-weight: 400
}

input:focus,
select:focus {
    outline: 0
}

input[type=number] {
    text-align: right
}

.form-group .errormsg {
    margin-top: 3px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 700
}

dd.form-group .errormsg {
    margin-bottom: 0
}

.form-control {
    border: 1px solid #c4ccce;
    border-radius: 3px!important;
    box-shadow: none;
    height: 40px;
    padding: 6px 12px;
    width: auto;
    line-height: 1.5
}

.form-control:focus {
    border-color: #3c8dbc!important;
    box-shadow: none
}

.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus {
    box-shadow: none;
    background: 0 0
}

.has-success .form-control {
    border-color: #0d8969;
    background: #e7f6f3
}

.has-warning .form-control {
    border-color: #e99133;
    background: #fdf7ed
}

.has-error .form-control {
    border-color: #cf3f34;
    background: #fdf1f0
}

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline {
    color: inherit;
    background: #fdf1f0
}

.form-control::-moz-placeholder {
    color: #bbb;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #bbb
}

.form-control::-webkit-input-placeholder {
    color: #bbb
}

.form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-group .form-control {
    width: 100%
}

.form-inline .form-control {
    width: auto
}

.form-group.lange input[type=text],
.form-group.lange label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: middle
}

.form-group.lange input[type=text] {
    width: 28%
}

.input_tel input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
    max-width: 5em;
    vertical-align: middle;
    width: 30%
}

.form-group.input_tel input:first-child {
    margin-left: 0
}

.form-group.input_name input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 2%;
    vertical-align: middle;
    width: 45%
}

.form-group.input_name input:first-child {
    margin-left: 0
}

.form-group.input_zip input {
    display: inline-block;
    margin-left: 1%;
    margin-right: 1%;
    max-width: 7em;
    vertical-align: middle;
    width: 30%;
    text-align: center
}

.form-group.input_zip .question-circle {
    font-size: 11px;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    background: #525263;
    border-radius: 50%
}

.form-group.input_zip .question-circle .cb-question {
    fill: #fff
}

.form-group .item_price input,
.form-group .item_quantity input {
    margin: 0 1%;
    text-align: right;
    width: 50%
}

.form-inline label {
    margin: 0 10px 0 0
}

.form-inline label:first-child+input,
.form-inline label:first-child+select {
    margin-right: 10px
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top
}

.checkbox-list li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.5em
}

.checkbox-inline,
.radio-inline {
    cursor: pointer;
    margin-left: 20px
}

.checkbox-inline:first-child,
.radio-inline:first-child {
    margin-left: 0
}

span.required {
    color: #de5d50;
    font-weight: 400!important;
    margin-left: 1em
}

.dl_table {
    display: table;
    width: 100%
}

.dl_table dl {
    display: table-row;
    border: 0 none
}

.dl_table dd,
.dl_table dt {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 16px 0;
    vertical-align: middle
}

.dl_table dt {
    width: 30%
}

.dl_table dd {
    padding: 16px
}

.dl_table dd .form-group {
    padding-top: 16px
}

.dl_table .zip-search {
    margin-top: 16px
}

span.wpcf7-not-valid-tip {
    color: #de5d50!important;
    font-size: 1em;
    font-weight: 400;
    width: 15em;
    position: absolute;
    display: block
}

div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    color: #de5d50!important;
    border: none!important
}

div.wpcf7-response-output {
    margin: 0!important;
    padding: 0!important;
    text-align: center
}

div.wpcf7-mail-sent-ok {
    display: none!important
}

.wpcf7 .wpcf7-not-valid {
    background: pink
}

input:-webkit-autofill.wpcf7c-conf {
    -webkit-box-shadow: 0 0 0 1000px #fff inset!important;
    border: none!important;
    background: #fff!important
}

input:-webkit-autofill.wpcf7c-conf:focus {
    border: none!important
}

.wpcf7c-conf {
    background: #fff!important;
    border-color: #fff!important
}

select.wpcf7c-conf {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.wpcf7c-conf:focus {
    border-color: transparent!important
}

.wpcf7c-conf:placeholder-shown {
    color: transparent
}

.wpcf7c-conf::-webkit-input-placeholder {
    color: transparent
}

.wpcf7c-conf::-moz-placeholder {
    color: transparent
}

.wpcf7c-conf:-ms-input-placeholder {
    color: transparent
}

.wpcf7c-conf::-ms-input-placeholder {
    color: transparent
}

div.wpcf7 .ajax-loader {
    display: none!important
}

.mwform-radio-field label,
form-checkbox-field label {
    white-space: nowrap
}

.mw_wp_form .error {
    color: #de5d50!important
}

.mw_wp_form .horizontal-item {
    margin-right: 20px;
    margin-left: 0!important
}
@media screen and (max-width:1023px) {
    .contact-cont {
        padding: 0 50px;
    }
}
@media screen and (max-width:767px) {
    .contact-cont .dl_table {
        display: table;
        width: 100%;
        margin: 3rem auto
    }
    .contact-cont {
        padding: 0 20px
    }
    .contact-cont__table dt {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        display: block;
        border-bottom: none;
        padding: 16px 0 0 0
    }
    .contact-cont__table dd {
        float: none;
        width: 100%;
        display: block;
        margin-bottom: 7%;
        padding: 0 0 16px 0
    }
}

.page-billboard__subtxt {
    margin-top: 30px;
    font-size: 1rem
}

.store-acc {
    margin-bottom: 30px
}

.store-acc__sub {
    font-size: 1rem;
    cursor: pointer;
    border-bottom: 1px solid #333;
    padding: 1rem 0
}

.store-acc__subinner {
    display: none;
    padding: 20px
}

.store-list td,
.store-list th {
    padding: 1rem;
    border-bottom: 1px solid #ccc
}

.store-list__tel {
    white-space: nowrap
}

@media screen and (max-width:767px) {

	.store-acc__sub {
   overflow: hidden;
}
    .store-acc__subinner {
        display: none;
        padding: 0
    }
    .store-list td,
    .store-list th {
        display: block
    }
    .store-list td.store-list__add,
    .store-list td.store-list__name {
        border-bottom: none
    }
    .store-list td.store-list__name {
        font-weight: 700
    }
    .store-list td.store-list__add {
        padding: 0 20px
    }
}



/*!------------------------------------*\
    2019 SUGER SOAP ADD
\*!------------------------------------*/

.sugarsoap{ width: 100%;}
.sugarsoap .fw500{ font-weight: 500;}
.sugarsoap .fw600{ font-weight: 600;}
.sugarsoap small{line-height: 2.5;}
.sugarsoap .mb1{margin-bottom: 1rem;}

.sugarsoap .page-billboard__cont {
    position: absolute;
    width: 100%;
    top: 25%;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    color: #1c2546;
    background: #fff;
    background-color: rgba(255, 255, 255, .5);
    padding: 10px 0
}

.sugarsoap .btn-def--s a,
.sugarsoap .btn-def--ss a,
.sugarsoap .btn-def a,
.sugarsoap .btn-def input {
    height: auto;
}



.productList-wide {
    max-width: 1170px;
    margin: 60px auto;
    padding: 0 25px;
}

.sugarsoap .btn-def--s a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 20px;
    font-size: 14px;
    font-size: .93333rem;
    letter-spacing: .2rem!important;
    line-height: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    color: #fff;
    background-color: #0f2046
}

.sugarsoap .btn-def--s a:hover {
    color: #0f2046;
    border: 1px solid #0f2046;
    background-color: #fff;
}

.sugarsoap .page-ttl h3{margin-bottom: 40px;}
.sugarsoap .page-banner {max-width: 1170px; padding: 0 25px; margin: 0 auto;}
.sugarsoap .page-banner ul{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 50px;}
.sugarsoap .page-banner ul li{width: inherit; margin:0; flex-basis: 23.5%;}

.sugarsoap .ss-recommend{width: 100%; height: auto; background: url(../images/sugarsoap/bg_recommend.jpg) no-repeat; background-size: cover;}
.sugarsoap .ss-recommend .ss-recommend_inner{max-width: 1170px; padding: 100px 25px; margin: 0 auto; text-align: center;}
.sugarsoap .ss-recommend_ttl {font-size: 50px; font-size: 3.33333rem; font-family: benton-sans-compressed, sans-serif; font-weight: 700; font-style: normal}
.sugarsoap .ss-recommend_ttl span {display: block; line-height: .6}
.sugarsoap .ss-recommend_subttl {font-size: 24px; font-size: 1.6rem; margin-bottom: 2rem}

.sugarsoap .ss-recommend h3,
.sugarsoap .ss-recommend h4{color: #fff; text-align: center;}
.sugarsoap .ss-recommend .point-wrap{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 25px;}
.sugarsoap .ss-recommend .point-wrap.left{margin-right: 23%;}
.sugarsoap .ss-recommend .point-wrap.right{margin-left: 23%;}
.sugarsoap .ss-recommend .point-image{flex-basis:32% }
.sugarsoap .ss-recommend .point-cont{flex-basis: 68%; margin-left: 20px;}
.sugarsoap .ss-recommend .point-wrap h4{ font-size: 24px; font-size: 1.6rem; margin-bottom: 1rem; text-align: left;}
.sugarsoap .ss-recommend .point-wrap p{ color: #fff; text-align: left;}


.sugarsoap .productList-s__txt{text-align: center; margin-bottom: 3rem;}
.sugarsoap .fragrance-image{max-width: 700px; margin: 0 auto 5rem;}
.sugarsoap .item-ttl{font-family: benton-sans-compressed, sans-serif; font-weight: 700; font-style: normal; font-size: 28px; text-align: center; margin-bottom: 3.5rem;}
.sugarsoap .item-ttl span{padding-left: 1.5em; font-size: 14px; font-weight: 400; font-family: Noto Sans JP, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.sugarsoap .item-ttl span.sub{font-size: 16px; font-weight: 500;}
.sugarsoap ul.item-list01{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 25px; list-style: none;}
.sugarsoap .item-list01 > li{flex-basis: 18%; text-align: center;}

.sugarsoap .productList-item__txt-ss {font-size: 14px; font-size: .93333rem; margin-bottom: 1rem; text-align: left; }

.sugarsoap .blc-fairtrade { text-align: center; padding: 75px 15px 300px; background-color: rgba(0, 53, 142, .1); position: relative;}
.sugarsoap .blc-fairtrade__img {position: absolute; top: inherit; bottom: 5%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%, 0); z-index: -1; max-width: 800px; height: auto;}
.sugarsoap .blc-fairtrade__img img { height: auto;}
.sugarsoap .usda-logo{max-width: 142px; margin: 0 auto 20px;}
.sugarsoap .howtous,
.sugarsoap .uservoice{max-width: 1170px; padding: 0 25px; margin: 0 auto; text-align: center; padding: 66px 15px;}
.sugarsoap .howtous .howtous_list{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; padding-bottom: 25px; list-style: none; padding-left: 0;}
.sugarsoap .howtous .howtous_list > li{flex-basis: 30.333%;}
.sugarsoap .howtous .blc-organic__subttl{margin-bottom: 3rem;}
.sugarsoap .howtous .how-pic-wrap{margin-bottom: 1rem;}
.sugarsoap .howtous .howtous_list h3{font-family: benton-sans-compressed, sans-serif; font-weight: 700; font-style: normal; font-size: 22px; font-size: 1.46667rem; text-align: center;}
.sugarsoap .howtous .how-subttl{margin-bottom: 1.2rem;}
.sugarsoap .uservoice .uv_list{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; padding-bottom: 25px; list-style: none; padding-left: 0;}
.sugarsoap .uservoice .uv_list > li{flex-basis: 30.333%; padding-bottom: 2rem;}
.sugarsoap .uservoice .uv_list .how-pic-wrap{max-width: 140px; text-align: center; display: inline-block; margin-bottom: 1rem;}
.sugarsoap .uservoice .uv_list p,
.sugarsoap .howtous .howtous_list p{ font-size: 14px; font-size: .93333rem; }
.sugarsoap .uservoice .uv_list .uv-name{text-align: right;}

.balloon2-top { position: relative; display: inline-block; margin: 1.5em 0 0.3em; padding: 1em; min-width: 120px; max-width: 100%; background: #FFF; border: solid 1px #777; box-sizing: border-box; line-height: 2; text-align: justify; text-justify: inter-ideograph;}
.balloon2-top:before { content: ""; position: absolute; top: -27px; left: 50%; margin-left: -15px; border: 14px solid transparent; border-bottom: 14px solid #FFF; z-index: 2;}
.balloon2-top:after { content: ""; position: absolute; top: -30px; left: 50%; margin-left: -16px; border: 15px solid transparent; border-bottom: 15px solid #777; z-index: 1;}
.balloon2-top p { margin: 0; padding: 0;}



@media (max-width: 1024px){
    .sugarsoap .ss-recommend .point-wrap.left{margin-right: 20%;}
    .sugarsoap .ss-recommend .point-wrap.right{margin-left: 20%;}
    .sugarsoap .productList-item__nameen{font-size: 18px;}
}


@media (max-width: 834px){
    .sugarsoap .ss-recommend .point-wrap h4{ font-size: 1.4rem;}
}


@media screen and (max-width:767px) {
    .sugarsoap .page-banner ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 25px;}
    .sugarsoap .page-banner ul li{flex-basis: 48%; margin-bottom: 4%;}
    .sugarsoap .ss-recommend_ttl {font-size: 40px; font-size: 9vmin; text-align: center}
    .sugarsoap .ss-recommend_subttl {font-size: 16px; font-size: 1.06667rem; text-align: center}
    .sugarsoap .ss-recommend .ss-recommend_inner{padding: 25px;}
    .sugarsoap .ss-recommend .point-wrap{flex-wrap: wrap; justify-content: center; align-items: center; padding-bottom: 25px;}
    .sugarsoap .ss-recommend .point-wrap h4{ text-align: center;}
    .sugarsoap .ss-recommend .point-wrap.left{margin-right: 0%;}
    .sugarsoap .ss-recommend .point-wrap.right{margin-left: 0%;}
    .sugarsoap .ss-recommend .point-image{flex-basis:55%; margin-bottom:1rem;}
    .sugarsoap .ss-recommend .point-cont{flex-basis: 95%; margin-left: 0px;}
    .sugarsoap ul.item-list01{display: block; padding-bottom: 25px; padding-left: 0; padding-right: 25px;}
    .sugarsoap .item-wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 2rem;}
    .sugarsoap .item-wrap:last-child{padding-bottom: 0;}
    .sugarsoap .item-wrap .item-image{flex-basis: 30%;}
    .sugarsoap .item-wrap .productList-item__cont{flex-basis: 70%; padding-left: 0}
    .sugarsoap .blc-fairtrade {padding: 20px 15px 38%;}
    .sugarsoap .howtous .howtous_list{flex-wrap: wrap; justify-content: center;}
    .sugarsoap .howtous .howtous_list > li{flex-basis: 90%; margin-bottom: 2em;}
    .sugarsoap .item-ttl{font-weight: 700; font-style: normal; font-size: 28px; text-align: center; margin-bottom: 2rem;}
    .sugarsoap .item-ttl span{display: block; padding-left: 0; font-size: 14px; line-height: 2;}
    .sugarsoap .uv-wrap{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items:flex-start;}
    .sugarsoap .uservoice .uv_list > li{flex-basis: 30.333%; padding-bottom: 2rem;}
    .sugarsoap .uv-wrap .uv_list > li:last-child{padding-bottom:0;}
    .sugarsoap .uservoice .uv_list{display: block;}
    .sugarsoap .uv-wrap .how-pic-wrap{flex-basis: 20%;}
    .sugarsoap .uv-wrap .uv_cont{flex-basis: 80%;}
    .balloon2-top { position: relative; display: inline-block; margin:  0 0 0 1.5em; padding: 1em; min-width: 120px; max-width: 100%; background: #FFF; border: solid 1px #777; box-sizing: border-box; line-height: 2; text-align: justify; text-justify: inter-ideograph;}
    .balloon2-top:before { content: ""; position: absolute; top: 30%; left: -9px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #FFF; z-index: 2;}
    .balloon2-top:after { content: ""; position: absolute; top: 30%; left: -12px; margin-top: -14px; border: 14px solid transparent; border-right: 14px solid #777; z-index: 1;}
    .sugarsoap .howtous,
    .sugarsoap .uservoice{padding: 20px;}
    .productList-wide { margin: 20px auto; padding:0 20px;}
}

@media (max-width: 480px){
    .sugarsoap .page-banner ul{justify-content: center;}
    .sugarsoap .page-banner ul li{flex-basis: 80%;}
}


.blc-lineup__list2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding-left: 0
}

@media screen and (max-width:767px) {
    .blc-lineup__list2 {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 15px;
        padding-right: 15px;
        justify-content:flex-start;
    }
}

.blc-lineup__list2 li {
        width: 22%;
    padding: 0 2%;
}

@media screen and (max-width:767px) {
    .blc-lineup__list2 li {
        width: 48%
    }
}

.blc-lineup__list2 li a {
    color: #3e3a39;
    text-decoration: none
}



/*!------------------------------------*\
    2020 ORGANIC CLEAN SPRAY ADD
\*!------------------------------------*/
.ocs .mob {
    display: none;
}

@media screen and (max-width:767px) {
    .ocs .mob {
        display: block;
    }
}

.ocs .page-billboard__cont {
    position: absolute;
    width: 100%;
    padding: 30px 0;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #1c2546;
    background: #fff;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .5);
}

.ocs .page-billboard__ttl {
    margin-top: 0;
}

.ocs .page-ttl {
    max-width: 1120px;
    padding-top: 74px;
    margin-bottom: 69px;
}

.ocs .page-ttl h3 {
    margin-bottom: 57px;
}

.ocs .page-ttl p {
    max-width: 800px;
    margin: 0 auto;
}

.ocs .page-ttl p.atte {
    margin-top: 40px;
    color: #ce0058;
}

.ocs small {
    font-size: 80%;
    line-height: 1;
    display: block;
    margin-top: 12px;
}

@media screen and (max-width:767px) {
    .ocs .page-ttl {
        padding-top: 0;
        margin-bottom: 33px;
    }
    .ocs .page-ttl h3 {
        margin-bottom: 31px;
        font-size: 1.15rem;
    }
    .ocs small {
        line-height: 1.2;
    }
}

@media screen and (max-width:480px) {
    .page-billboard__txt {
        font-size: 14px;
        font-size: 0.93rem;
        line-height: 1.2;
    }
    .ocs .page-ttl {
        margin-bottom: 2.2rem;
    }
    .ocs .page-ttl h3 {
        margin-bottom: 2.07rem;
    }
}

.ocs .page-banner {
    max-width: 1170px;
    padding: 0 25px;
    margin: 0 auto;
}

.ocs .page-banner ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 50px 0;
}

.ocs .page-banner ul li {
    width: inherit;
    position: relative;
    margin:0;
    flex-basis: 23.5%;
    border: solid 1px #3e3a39;
}

.ocs .page-banner ul li:hover {
    opacity: .5;
}

.ocs .page-banner ul li:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 36px;
    right: 22px;
    margin-top: -11px;
    border-top: 2px solid #3e3a39;
    border-right: 2px solid #3e3a39;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ocs .page-banner ul li a {
    width: 100%;
    padding: 13px 15px;
    color: #3e3a39;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    line-height: 1.2;
    display: block;
}

.ocs .page-banner ul li a span {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
}

@media screen and (max-width:1050px) {
    .ocs .page-banner ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 25px 0;
    }
    .ocs .page-banner ul li{
        flex-basis: 48%;
        margin-bottom: 4%;
    }
}

@media screen and (max-width:767px) {
    .ocs .page-banner {
        width: 92%;
    }
    .ocs .page-banner ul{
        width: 100%;
        justify-content: center;
        padding-bottom: 2rem;
    }
    .ocs .page-banner ul li{
        flex-basis: 100%;
        margin-bottom: 4.5%;
    }
}

.ocs-recommend {
    width: 100%;
    height: auto;
    background: url(../images/organiccleanspray/ocs-bg_recommend@2x.jpg) no-repeat;
    background-size: cover;
}

.ocs-recommend .ocs-recommend_inner {
    max-width: 1170px;
    padding: 75px 25px 43px;
    margin: 0 auto;
    text-align: center;
}

.ocs-recommend_ttl {
    font-size: 50px;
    font-size: 3.33333rem;
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal
}

.ocs-recommend_ttl span {
    display: block;
    line-height: .6
}

.ocs-recommend_subttl {
    font-size: 24px;
    font-size: 1.6rem;
    margin: 0.47rem 0 2rem;
}

@media screen and (max-width:767px) {
    .ocs-recommend .ocs-recommend_inner {
        padding: 28px 20px 6px;
    }
    .ocs-recommend_subttl {
        margin: 7px 0 24px;
    }
}

@media screen and (max-width:480px) {
    .ocs-recommend .ocs-recommend_inner {
        padding: 1.87rem 20px 0.41rem;
    }
    .ocs-recommend_ttl {
        font-size: 2.47rem;
    }
    .ocs-recommend_subttl {
        font-size: 16px;
        font-size: 1.07rem;
        margin: 0.47rem 0 1.6rem;
    }
}

.ocs-recommend h3,
.ocs-recommend h4 {
    text-align: center;
}

.ocs-recommend_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 25px;
}

.ocs-recommend_box {
    max-width: 534px;
    width: 47.68%;
    position: relative;
    padding: 37px 45px;
    background: #fff;
    border-radius: 15px;
}

.ocs-recommend_box:first-of-type {
    max-width: 100%;
    width: 100%;
    margin: 54px 0 92px;
}

.ocs-recommend_box:first-of-type h4 {
    padding-top: 0;
}

.ocs-point {
    max-width: 80px;
    height: auto;
    position: absolute;
    top: -61px;
    left: 0;
    right: 0;
    margin: auto;
}

.ocs-recommend_box h3 {
    padding: 0 0 8px;
    font-size: 24px;
    font-size: 1.6rem;
    font-weight: bold;
}

.ocs-recommend_box h3 small {
    margin-top: 10px;
    font-size: 0.73rem;
    font-weight: normal;
}

.ocs-star {
    max-width: 73.5px;
    height: auto;
    margin-bottom: 20px;
}

.ocs-recommend_box .wrap {
    margin-top: 9px;
    clear: both
}

.ocs-recommend_box h4,
.ocs-recommend_box p {
    text-align: left;
}

.ocs-recommend_box h4 {
    padding: 19px 0 20px;
    font-size: 22px;
    font-size: 1.47rem;
}

.ocs-recommend_box .l {
    width: 530px;
    float: left;
    text-align: left;
}

.ocs-recommend_box .r {
    width: 450px;
    height: auto;
    float: right;
}

.ocs .ocs-recommend ul.item-list01 {
    width: 1120px;
    padding-bottom: 82px;
    margin: 0 auto;
}

@media (max-width: 1170px){
    .ocs-recommend_box .l {
        width: 54%;
    }
    .ocs-recommend_box .r {
        width: 41.7%;
    }
}

@media screen and (max-width:767px) {
    .ocs-recommend_box {
        max-width: 100%;
        width: 100%;
        padding: 37px 20px 34px;
        margin-bottom: 92px;
    }
    .ocs-recommend_box:last-of-type {
        margin-bottom: 0;
    }
    .ocs-recommend_box .wrap {
        margin-top: 4px;
    }
    .ocs-recommend_box h4 {
        padding: 19px 0 20px;
    }
    .ocs-recommend_box p small {
        margin-top: 20px;
    }
    .ocs-recommend_box .l,
    .ocs-recommend_box .r {
        width: 100%;
    }
    .ocs-recommend_box .r {
        margin-top: 36px;
    }
    .ocs .ocs-recommend ul.item-list01 {
        width: 100%;
        padding: 0 20px;
    }
    .ocs-recommend .productList-item__cont {
        padding: 0;
    }
}

@media screen and (max-width:480px) {
    .ocs-recommend_box {
        padding: 2.47rem 20px 2.27rem;
        margin-bottom: 6.13rem;
    }
    .ocs-recommend_box .wrap {
        margin-top: 0.27rem;;
    }
    .ocs-recommend_box h3 {
        font-size: 16px;
        font-size: 1.07rem;
    }
    .ocs-recommend_box h4 {
        padding: 1.27rem 0 1.33rem;;
        font-size: 15px;
        font-size: 1rem;
    }
    .ocs-recommend_box p {
        font-size: 13px;
        font-size: 0.87rem;
    }
    .ocs-recommend_box p small {
        margin-top: 1.33rem;
    }
    .ocs-recommend_box .r {
        margin-top: 2.4rem;
    }
    .ocs .ocs-recommend ul.item-list01 {
        padding: 0 1.33rem;
    }
}

.ocs .howtous {
    width: 100%;
    background: #fbfbfb;
}

.ocs .howtous .wrap {
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
    padding: 66px 15px;
}

.ocs .howtous .howtous_list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    padding-bottom: 25px;
    list-style: none;
    padding-left: 0;
}

.ocs .howtous .howtous_list > li {
    flex-basis: 30.333%;
}

.ocs .howtous .blc-organic__subttl {
    margin-bottom: 3rem;
}

.ocs .howtous .how-pic-wrap {
    margin-bottom: 1rem;
}

.ocs .howtous .how-subttl {
    margin-bottom: 1.2rem;
}

@media screen and (max-width:767px) {
    .ocs .howtous .wrap {
        padding: 29px 20px 47px;
    }
    .ocs .howtous .howtous_list {
        display: block;
        padding-bottom: 0;
    }
    .ocs .howtous .howtous_list > li{
        width: 100%;
        margin-bottom: 42px;
    }
    .ocs .howtous .howtous_list > li:last-child {
        margin-bottom: 0;
    }
    .ocs .blc-organic__ttl {
        font-size: 50px;
        font-size: 3.33333rem;
    }
    .ocs .howtous .blc-organic__subttl{
        margin: 2px 0 22px;
    }
    .ocs .howtous .how-pic-wrap {
        margin-bottom: 10px;
    }
    .ocs .howtous .how-subttl {
        margin-bottom: 6px;
    }
}

@media screen and (max-width:480px) {
    .ocs .howtous .wrap {
        padding: 1.93rem 20px 3.13rem;
    }
    .ocs .howtous .howtous_list > li{
        margin-bottom: 2.8rem;
    }
    .ocs .blc-organic__ttl {
        font-size: 37px;
        font-size: 2.47rem;
    }
    .ocs .howtous .blc-organic__subttl{
        margin: 0.14rem 0 1.47rem;
    }
    .ocs .howtous .how-pic-wrap {
        margin-bottom: 0.67rem;
    }
    .ocs .howtous .how-subttl {
        margin-bottom: 0.4rem;
    }
}

.ocs .howtous .howtous_list h3{font-family: benton-sans-compressed, sans-serif; font-weight: 700; font-style: normal; font-size: 22px; font-size: 1.46667rem; text-align: center;}

.ocs .howtous .howtous_list p{ font-size: 14px; font-size: .93333rem; }

.ocs .productList-s__txt {
    text-align: center;
    margin: 1rem 0 3rem;
}

@media screen and (max-width:767px) {
    .ocs .productList-s__txt {
        padding: 0 20px;
    }
}

#fragrance {
    padding: 60px 25px;
    margin: 0 auto;
}

.ocs .fragrance-image {
    max-width: 700px;
    margin: 0 auto 5rem;
}

.ocs .item-ttl {
    font-family: benton-sans-compressed, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    text-align: center;
    margin-bottom: 2.3rem;
}

.ocs .item-ttl span {
    padding-left: 1.5em;
    font-size: 14px;
    font-weight: 400;
    font-family: Noto Sans JP, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.ocs .item-ttl span.sub {
    font-size: 16px;
    font-weight: 500;
    display: block;
}

@media screen and (max-width:767px) {
    .ocs .item-ttl span {
        padding-top: 8px;
        padding-left: 0;
        display: block;
    }
    .ocs .item-ttl span.sub {
        padding-top: 4px;
    }
}

@media screen and (max-width:480px) {
    .ocs .item-ttl span {
        padding-top: 0.53rem;
    }
    .ocs .item-ttl span.sub {
        padding-top: 0.27rem;
    }
}

.ocs ul.item-list01 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    padding-bottom: 17px;
    list-style: none;
    justify-content: center;
}

.ocs .item-list01 > li {
    flex-basis: 44.64%;
    text-align: center;
}

.ocs .productList-item__cont {
    width: 100%;
    padding-left: 0;
}

.ocs .item-list01 > li img {
    max-width: 220px;
    height: auto;
    margin-bottom: 17px;
}

.ocs .item-list01 .productList-item__btns .btn-def--s:first-child {
    display: block;
}

@media screen and (max-width:767px) {
    #fragrance {
        padding: 39px 0 0;
    }
    #fragrance .productList-s__txt {
        text-align: left;
    }
    #fragrance .productList-item__cont {
        margin-bottom: 0;
    }
    #fragrance ul.item-list01 {
        padding-bottom: 36px;
    }
    .ocs .item-list01 > li {
        flex-basis: 100%;
    }
    .ocs .item-list01 > li img {
        max-width: 169px;
        height: auto;
        margin-bottom: 21px;
    }
    .ocs .productList-item__cont {
        padding: 0 20px;
        margin-bottom: 41px;
    }
    .ocs .productList__txt {
        margin-top: 2px;
    }
    .ocs .productList-s__txt {
        margin: 19px 0 41px;
    }
    .ocs .fragrance-image {
        margin: 0 auto 36px;
    }
}

@media screen and (max-width:480px) {
    #fragrance {
        padding: 2.6rem 0 0;
    }
    #fragrance .productList-s__txt {
        font-size: 13px;
        font-size: 0.87rem;
    }
    #fragrance ul.item-list01 {
        padding-bottom: 2.4rem;
    }
    .ocs .item-list01 > li img {
        margin-bottom: 1.4rem;
    }
    .ocs .productList-item__cont {
        margin-bottom: 2.73rem;
    }
    .ocs .productList__txt {
        margin-top: 0.14rem;
        font-size: 16px;
        font-size: 1.06667rem;
    }
    .ocs .productList-s__txt {
        margin: 1.27rem 0 2.73rem;
    }
    .ocs .fragrance-image {
        margin: 0 auto 2.4rem;
    }
}

.ocs .blc-fairtrade {
    padding: 63px 15px 333px;
}


.ocs .blc-fairtrade__txt {
    margin-bottom: 1.89rem;
}

.ocs .blc-fairtrade__txt small {
    font-size: 80%;
}

.ocs .blc-fairtrade__img {
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    top: auto;
    bottom: 38px;
}

.ocs .blc-fairtrade__img img {
    max-width: 845px;
    height: auto;
}

@media screen and (max-width:767px) {
    .ocs .blc-fairtrade {
        padding: 28px 0 5px;
    }
    .ocs .blc-fairtrade__cont {
        padding: 0 20px;
    }
    .ocs .blc-organic__subttl {
        margin: 0.14rem 0 1.27rem;
        font-size: 16px;
        font-size: 1.06667rem;
    }
    .ocs .blc-fairtrade__img {
        position: relative;
        left: 0;
        bottom: 13px;
        transform: none;
    }
    .ocs .blc-fairtrade__img,
    .ocs .blc-fairtrade__img img {
        width: 100%;
    }
}

.blc-certification__usda {
    max-width: 142px;
    margin: 14px auto 15px;
}

@media screen and (max-width:767px) {
    .ocs .blc-certification {
        padding: 30px 20px 44px;
    }
    .blc-certification__usda {
        margin: 29px auto 27px;
    }
    .ocs .blc-certification__logo {
        margin-bottom: 33px;
    }
}

.ocs .productList-list {
    list-style: none;
    padding-left: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center
}

.ocs .productList-item {
    width: 50%
}

.ocs .productList-item .productList-item__cont {
    margin-top: 20px
}

.ocs .productList-list::after {
    content: '';
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 80px);
    display: none
}

.info-wrap {
    background-color: #e7eef6;
    padding: 25px;
}

@media screen and (max-width:767px) {
    .ocs .productList {
        margin-top: 22px;
    }
    .ocs .productList .productList__ttl {
        font-size: 37px;
        font-size: 2.47rem;
    }
    .ocs .productList-list {
        margin-top: 29px;
        margin-bottom: 39px;
    }
    .ocs .productList-item {
        width: 100%;
        display: block;
    }
    .ocs .productList-item__img {
        width: auto;
    }
    .ocs .productList-item__img img {
        max-width: 169px;
        height: auto;
        margin-bottom: 17px;
    }
    .ocs .productList-item__txt {
        margin-bottom: 28px;
        text-align: center;
    }
    .ocs .productList .productList-item__cont {
        padding: 0;
    }
}

.ocs .btn-def a {
    padding-bottom: 9px;
}

.ocs .btn-def--s a {
    color: #fff;
    border: 1px solid #0f2046;
    background-color: #0f2046;
}

@media screen and (max-width:767px) {
    .ocs .btn-def--s a {
        font-size: 1.2rem;
        padding: 10px 70px;
    }
}

.ocs .btn-def--s a:hover {
    color: #0f2046;
    border: 1px solid #0f2046;
    background-color: #fff;
}

.ocs .productList-detail__03 small {
    font-size: 60%;
}

.productList-detail__usda {
    max-width: 80px;
    margin: 0 auto 15px;
}

@media screen and (max-width:767px) {
    .productList-detail__usda {
        max-width: 142px;
    }
}

/*!------------------------------------*\
    2020 ORGANIC CLEAN SPRAY ADD
\*!------------------------------------*/

.pad-wrap{padding: 0 20px}
.info-wrap {
    background-color: #e7eef6;
    padding: 25px;
    margin: 20px 0;
}
.info-wrap .inner-flex{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.info-wrap .inner-flex div.img-box{
    flex-basis: 23%;
}
.info-wrap .inner-flex div.info-box{
    flex-basis: 70%;
    text-align: left;
}
.info-wrap .inner-flex div.info-box h4{
    text-align: left;
    font-size: 15px;
    margin-bottom: 0.5em;
}
.info-wrap .inner-flex div.info-box p{
    font-size: 13px;
}
.info-wrap .inner-flex div.img-box img{
    max-width: initial;
    width: 106%;
}