/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
 font-family:sans-serif;
 -ms-text-size-adjust:100%;
 -webkit-text-size-adjust:100%;

}
body {
 margin:0;
 min-width: 1180px;
}
.wrap {
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
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:transparent;
 text-decoration: none;
 color: #575757;
}
a:active,
a:hover {
 outline:0
}
abbr[title] {
 border-bottom:1px dotted
}
b,
strong {
 font-weight:bold
}
dfn {
 font-style:italic
}
h1 {
 font-size:2em;
 margin:0.67em 0
}
mark {
 background:#ff0;
 color:#000
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sup {
 top:-0.5em
}
sub {
 bottom:-0.25em
}
img {
 border:0
}
svg:not(:root) {
 overflow:hidden
}
figure {
 margin:1em 40px
}
hr {
 -moz-box-sizing:content-box;
 -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;
 -moz-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;
 -moz-box-sizing:content-box;
 -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 #c0c0c0;
 margin:0 2px;
 padding:0.35em 0.625em 0.75em
}
legend {
 border:0;
 padding:0
}
textarea {
 overflow:auto
}
optgroup {
 font-weight:bold
}
table {
 border-collapse:collapse;
 border-spacing:0
}
td,
th {
 padding:0
}
html {
 background-color:#fff;
 font-family: Quicksand, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
 font-weight: 400;
 color:#1c1c1c
}
input,
button {
 font:14px / 1.7 'Noto Serif JP','Lora', serif;
 -webkit-font-smoothing:antialiased
}
html,
body {
 margin:0;
 padding:0;
 width:100%;
 -webkit-font-smoothing:antialiased
}
#wrap {
 min-width:1180px;
 margin:0 auto;
 padding:0;
 width:100%
}
p {
 margin:0
}
h1 img,
h2 img,
h3 img,
p img {
 display:block
}
ol,
ul,
li {
 padding:0;
 margin:0;
 list-style:none
}
dl,
dt,
dd {
 padding:0;
 margin:0
}
.arrow-link i.icon.link-arrow-bottom {
    border-right: 3px solid #000;
    border-top: 3px solid #000;
    height: 10px;
    margin-top: -5px;
    position: absolute;
    top: 55%;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 10px;
    right: 50%;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

#entryChange1-yellow,#entryChange2-yellow,#entryChange3-yellow,#entryChange4-yellow {display: none;}
/*******************************
header
*******************************/
header nav {
    left: 0;
    right: 0;
    top: 0px;
    min-width: 1180px;
    height: 80px;
    background: rgba(255,255,255,0.9);
    text-align: right;
    z-index: 10;
    margin: 0 0 30px;
}
header nav h1 {
	position: absolute;
	left: 30px;
	top: 22px;
	width: 178px;
	height: 58px;
	margin: 0;
}
header nav li {
    vertical-align: bottom;
    display: inline-block;
    margin: 33px 20px 0 -0.3em;
}
.main-image-body {
	position: relative;
}
.header_contact {margin: 0 0 7px;}
/*******************************
section
*******************************/
.container {text-align: center; margin: 0 0 50px;}
.container h2 {font-family:'Noto Serif JP','Lora', serif;
 font-weight: 500; font-size: 2rem; letter-spacing: 3px; margin: 0 0 10px;}
.container h2 span {font-style: italic; color: #a4925d;}
.font-mo {font-family:'Noto Serif JP','Lora', serif;}
.container h4 {font-family:'Noto Serif JP','Lora', serif;}
h3,dt {line-height: 1.5em;}

/* crown -------------------- */
.hana-crown { padding: 0px 0 100px;}
.crown-list {text-align: center;}
.crown-list p {font-size: 11px;}
.crown-list img {width: 850px;}

/* new cart -------------------- */
.hana-cart-area {border-bottom: 2px solid #fff; background-color: #f5f5f7; padding: 80px 0 100px;z-index: 9999; position: relative;}
.hana-cart-area .container {max-width: 1180px; margin: 0 auto;}
.hana-cart-area h2 {text-align: center; margin: 0 auto 80px; width: 900px;}
.hana-cart-area h2 img {text-align: center; margin: 0 auto; width: 100%;}
.hana-cart-area ul.cart-item {padding: 0 0 0px; display: flex;justify-content:center;flex-wrap:wrap;margin: 0 auto;}
.hana-cart-area ul.cart-item li {width: 450px; padding: 30px 5% 30px 0;}
.hana-cart-area ul.cart-item li:last-child {width: 450px; padding: 0px;}
.hana-cart-area ul.cart-item li img {max-width: 100%; height: auto;}
.cart-campaign {text-align: center; margin: 50px 0 0;}
.cart-campaign-title {width: 400px; margin: 0 auto;}
.cart-campaign-title img{margin: 0px 0 0; width: 100%;}
.cart-campaign-img {text-align: center;border-radius: 20px; background-color: #fff; border:3px solid #eb4d84; width: 1180px; padding: 50px 0 30px; margin: 0 auto;}
.cart-campaign-img img {margin: 0 auto;}

.cart-item-01 {margin: 0 0 15px;}
.color-select-text {margin: 15px 0 10px; font-size: 15px; text-align: left;}
.color-select {margin: 0px auto 15px; display: flex;}
.hana-cart-area ul.cart-item li .color-select li {width: 50%; text-align: left; padding: 0px;}
.hana-cart-area ul.cart-item li .color-select li:last-child {padding:0;}
.color-select input[type="radio"]{display: none;}
.color-select input[type="radio"] + label {
    position: relative;
    margin:0;
    display: inline-block;
    background-image:url("../images/radio_01.png");
    background-repeat: no-repeat;
    background-size:contain;
    width: 220px;
    height:62px;
    cursor: pointer;
    -webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;
}
.color-select input[type="radio"] + label.color-yellow {background-image:url("../images/radio_02.png");}
.color-select input[type="radio"]:checked + label {
    background-image:url("../images/radio_01_on.png");
    background-repeat: no-repeat;
    background-size:contain;
    width: 220px;
    height:62px;
    -webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;
}
.color-select input[type="radio"]:checked + label.color-yellow  {background-image:url("../images/radio_02_on.png");}



/* copy -------------------- */
.hana-copy { padding: 80px 0 0px; min-height: 650px;}
.copy-list .main {display: flex;justify-content:center;flex-wrap:wrap;margin: 0 auto;}
.copy-list .main li {width: 60%;}
.copy-list .main li:last-child {width: 40%; position: relative; padding: 0;}
.copy-list .copy-img {height: 600px;background: url(../images/copy_img_01.jpg) center center no-repeat;background-size: auto;background-size: cover;}
.copy-list .copy-img02 {height: 600px;background: url(../images/copy_img_02.jpg) center center no-repeat;background-size: auto;background-size: cover;}

.copy-list .main li dl {position: absolute;top: 250px; left:-150px; background-color: #fff; padding:100px 0px 100px 80px;}
.copy-list .main li dt {font-size: 1.7rem; margin: 0 0 30px; letter-spacing: 3px;}
.copy-list .main li dd {margin: 0 0 30px;}
.copy-list .main li dd li {display: inline-block; width: auto; position: relative; padding: 0 0 0 40px; margin: 0 20px 10px 0;}
.copy-list .main li dd li:last-child {width: auto;padding: 0 0 0 40px;}
.copy-list .main li dd li:before {content: '✕'; position: absolute; left:5px; top: 0px; padding: 0 7px; color: #000; background-color: #e6e6e6; border-radius: 100px;}

/* description -------------------- */
.hana-description { padding: 160px 0 80px; background-color: #f7f7f0;}
.hana-description .container h2 {color: #a4925d;}
.hana-description .container p {margin: 0 0 20px;}
.description-list {max-width: 1180px; margin: 0 auto;}
.description-list ul {display: flex;-webkit-justify-content: space-between;justify-content:space-between;}
.description-list ul li {width: 48%; }
.description-list ul li dt {font-size: 1.4rem; font-weight: bold; margin: 0 0 30px; line-height: 2em;}


/* trouble -------------------- */
.hana-trouble { padding: 80px 0 40px; }
.hana-trouble .container h2 {}
.hana-trouble .container p {margin: 0 0 20px;}
.trouble-list ul {display: flex;justify-content:center;flex-wrap:wrap; max-width: 1000px; margin: 0 auto;}
.trouble-list ul li {width: 40%; padding: 50px 2%;}
.trouble-list ul li:nth-child(2) img {width: 100%; padding: 80px 0 0}

/* feature -------------------- */
.hana-feature { padding: 80px 0 0px; background-color: #f5f5f7; }
.hana-feature .container {}
.hana-feature .container h2 {}
.hana-feature .container p {margin: 0 0 50px;}

/* point1 */
.point-1 .main {display: flex;justify-content:center;flex-wrap:wrap;max-width: 1180px; margin: 0 auto; padding: 80px 0 150px; position: relative;}
.point-1 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-1 .main li {width: 44%; position: relative; padding: 0 3%;}
.point-1 .point-img img {position: absolute; right: 0; max-width: 800px;}
.point-1 .main .point-copy {font-size: 2rem; margin: 0 0 30px; display: inline-block; color: #a4925d; border-bottom: 1px solid #a4925d;}
.point-1 .main li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-1 .main li dd {margin: 0 0 30px;}
.point-1 .main li dd img {width: 300px;}

.point-1-sub {background-color: #fff; padding: 80px 0 50px;}
.point-1-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 50px;}
.point-1-sub .sub {max-width: 1180px; margin: 0 auto 50px;display: flex;justify-content:center;flex-wrap:wrap;flex-flow: row-reverse;}
.point-1-sub .sub li {width: 44%; position: relative; padding: 0 3%;}
.point-1-sub .sub li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-1-sub .sub li dd {margin: 0 0 30px;}
.point-1-sub .sub li img {width: 100%;}
.point-1-sub .sub li img.point-img {width: 500px;}
.point-1-sub .sub li dd.sub-list {padding: 20px; border:2px solid #e6e6e6;}
.point-1-sub .sub li dd.sub-list ul {margin-left: 10px;}
.point-1-sub .sub li dd.sub-list li {width: 100%;list-style-position: outside; list-style-type: disc; padding:0px;}
/* point2 */
.point-2 .main {flex-direction:row-reverse;display: flex;justify-content:center;flex-wrap:wrap;max-width: 1180px; margin: 0 auto; padding: 100px 0 80px; position: relative;}
.point-2 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-2 .main li {width: 20%; position: relative; padding: 0 3%;}
.point-2 .main li:nth-child(2) {width: 68%;}
.point-2 .point-img img {position: absolute; left: 0; top: -150px;max-width: 800px;}
.point-2 .main .point-copy {font-size: 2rem; margin: 0 0 30px; display: inline-block; color: #a4925d; border-bottom: 1px solid #a4925d;}
.point-2 .main li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-2 .main li dd {margin: 0 0 30px;}
.point-2 .main li dd ul { display: flex;}
.point-2 .main li dd li {width: 30%; padding: 0px; font-size: 12px;}
.point-2 .main li dd li.img {width: 18%; padding: 0 1%;}
.point-2 .main li dd li:nth-child(2) {width: 30%; padding: 0px;}
.point-2 .main li dd li img {width: 100%;}

.point-2-sub {background-color: #fff; padding: 80px 0;}
.point-2-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 50px;}
.point-2-sub .sub {max-width: 1180px; margin: 0 auto 50px;display: flex;justify-content:center;flex-wrap:wrap;flex-flow: row-reverse;}
.point-2-sub .sub li {width: 44%; position: relative; padding: 0 3%;}
.point-2-sub .sub li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-2-sub .sub li dd {margin: 0 0 30px;}
.point-2-sub .sub li img {width: 100%;}
.point-2-sub .sub li dd.sub-list {padding: 20px; border:2px solid #e6e6e6;}

/* point3 */
.point-3 .main {display: flex;justify-content:center;flex-wrap:wrap;max-width: 1180px; margin: 0 auto; padding: 80px 0 240px; position: relative;}
.point-3 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-3 .main li {width: 44%; position: relative; padding: 0 3%;}
.point-3 .point-img img {position: absolute; right: 0; width: 700px;}
.point-3 .main .point-copy {font-size: 2rem; margin: 0 0 30px; display: inline-block; color: #a4925d; border-bottom: 1px solid #a4925d;}
.point-3 .main li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-3 .main li dd {margin: 0 0 30px;}

.point-3-sub {background-color: #fff; padding: 80px 0;}
.point-3-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 50px;}
.point-3-sub .sub {max-width: 1180px; margin: 0 auto 50px;display: flex;justify-content:center;flex-wrap:wrap;flex-flow: row-reverse;}
.point-3-sub .sub li {width: 44%; position: relative; padding: 0 3%;}
.point-3-sub .sub li dt {font-size: 1.4rem; margin: 0 0 30px;}
.point-3-sub .sub li dd {margin: 0 0 30px;}
.point-3-sub .sub li img {width: 100%;}
.point-3-sub .sub li dd.sub-list {padding: 20px; border:2px solid #e6e6e6;}


/* movie -------------------- */
.hana-movie { padding: 80px 0 40px; position: relative;background: linear-gradient(#fff 50%, #f8f7f5 50%);}
.hana-movie .container h2 {color: #a4925d;}
.hana-movie .container p {margin: 0 0 20px;}
.movie-list {text-align: center;}
.movie-list img {-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;cursor: pointer;}
.movie-list img:hover {opacity: 0.7;}

/* voice -------------------- */
.hana-voice { padding: 80px 0 80px; background-color: #e8f1f5;}
.hana-voice .container h2 {color: #a4925d;}
.hana-voice .container p {margin: 0 0 20px;}
.voice-list {max-width: 1180px; margin: 0 auto 50px; min-height: 600px;}
.voice-list ul {display: flex;justify-content:center;flex-wrap:wrap;}
.voice-list ul li {width: 40%; padding: 50px 4%; margin: 0 0 0px; min-height: 200px;}
.voice-list ul li:nth-child(1) {border-right: 1px solid #fff;border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(2) {border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(3) {border-right: 1px solid #fff;}
.voice-list ul li dt {text-align: center; margin: 0 0 10px;}
.voice-list .btn-more {-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;cursor: pointer;width: 60%;color: #a4925d; margin: 20px auto 0; text-align: center; background-color: #fff; padding: 10px 20px; border-radius: 50px;}
.voice-list .btn-more::before {content: '全文読む';}
.voice-list .btn-more.close::before {content: '閉じる';}
.voice-list .dropdown {margin: 15px 0 0; padding: 20px; background-color: #fff; border-radius: 20px;}

/* color -------------------- */
.hana-color { padding: 80px 0 40px; background-color: #f8f7f5;position: relative;}
.hana-color .container h2 {color: #a4925d;}
.hana-color .container p {margin: 0 0 20px;}
.color-list {max-width: 1180px; margin: 0 auto 50px;}
.color-list ul {display: flex;justify-content:center;align-items: center;}
.color-list ul li {width: 24%;text-align: center;}
.color-list ul li:nth-child(2) {width: 10%; color: #a99054; font-size: 3rem;}
.color-list ul li img {width: 100%;}
.color-text {text-align: center; color: #a4925d; z-index: 99; position: relative; font-size: 1.5rem; font-weight: 100;}
.color-voice {max-width: 800px; margin: 0 auto 50px;position: relative;}
.color-voice:before {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -30px;border: 30px solid transparent;border-bottom: 30px solid #fff;z-index: 98;}

.color-voice dl {padding:30px; background-color: #fff;}
.color-voice dt {font-weight: bold; }

/* insta -------------------- */
.hana-insta { padding: 80px 0;}
.hana-insta .container h2 {color: #a4925d;}
.hana-insta .container p {margin: 0 0 20px;}
.insta-list {max-width: 1180px; margin: 0 auto;}
.insta-list ul {display: flex;-webkit-justify-content: space-between;justify-content:space-between; margin: 0 0 20px;}
.insta-list ul li {width: 22%; }
.insta-list ul li img {width: 100%;}
.insta-list ul li p {text-align: center;}
.hana-insta .btn-hash {text-align: center;}
.hana-insta .btn-hash a {margin: 0 auto; padding: 10px 30px; display: inline-block; border-radius: 50px; background-color: #ccbfa1; color: #fff;}

/* media -------------------- */
.hana-media { padding: 80px 0; background-color: #f7f7f0;}
.hana-media .container h2 {color: #a4925d;}
.hana-media .container p {margin: 0 0 20px;}
.media-list {max-width: 1180px; margin: 0 auto;}
.media-list ul {display: flex;-webkit-justify-content: space-between;justify-content:space-between;}
.media-list ul li {width: 22%; }
.media-list ul li img {width: 100%;}
.media-list ul li p {text-align: center;}
.media-list .media-more {text-align: center; font-size: 1.2rem; color: #a4925d;}

/* security -------------------- */
.hana-security {background-color: #f7f7f0;}
.hana-security ul {max-width: 1180px; margin: 0 auto; display: flex;  padding: 100px 0;align-items: center;justify-content: center;}
.hana-security ul li:first-child {font-size: 1.5rem; padding: 0 30px 0 0; width: 30%;color: #a4925d;}
.hana-security ul li:last-child {line-height: 1.5em; border-left: 1px solid #a4925d;padding: 0 0px 0 50px;}

/* qa -------------------- */
.hana-qa { padding: 80px 0;}
.hana-qa .container h2 {color: #a4925d;}
.qa-list {max-width: 1180px; margin: 0 auto;}
.qa-list dl {margin: 0 0 20px;}
.qa-list dt {font-weight: bold;padding: 20px;cursor: pointer;position: relative;background-color: #f5f5f7;}
.qa-list dt .accordion_icon {display: inline-block;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;right: 0px;top: 30%;}
.qa-list dt i.icon.link-arrow-bottom {position: absolute;top: 10px;right: 20px;}
.qa-list dl dd {display: none;border-top: 1px solid #fff; padding: 20px;background-color: #f5f5f7;}
.qa-list .accordion_icon.active i { -webkit-transform: rotate(315deg);-ms-transform: rotate(315deg);transform: rotate(315deg);top: 20px;}
.hana-qa .btn-link {cursor: pointer;width: 400px; margin: 30px auto 0; padding: 40px 0; text-align: center; border: 1px solid #ccc; display: block;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
.hana-qa .btn-link:hover {background-color: #000; color: #fff;}

/* campaign -------------------- */
.hana-campaingn { padding: 80px 0; background-color: #e8f3f7;}
.hana-campaingn .container h2 {color: #e9528e;}
.hana-campaingn .container p {margin: 0 0 20px;}
.campaign-icon {margin: 0 0 80px;}
.campaign-icon li {display: inline-block; padding: 7px 20px; color: #fff; background-color: #94c8de;}
.campaign-icon li:first-child {background-color: #fff; color: #000;}
.campaingn-list {max-width: 1180px; margin: 0 auto;}
.campaingn-list ul {display: flex;flex-wrap:wrap;}
.campaingn-list ul li {width: 31%; margin: 0 1%;}
.campaingn-list ul li.list-li {margin: 0 1% 40px; height: 770px; background-color: #fff;}
.campaingn-list ul li dl {background-color: #e8f3f7; text-align: center;padding: 0 0 20px; position: relative; min-height: 75px;}
.campaingn-list ul li dl:before {content: '＼'; position: absolute;left:10px; top: 30px;color: #94c8de; font-weight: bold; font-size: 2rem;}
.campaingn-list ul li dl:after {content: '／'; position: absolute;right:10px; top: 30px;color: #94c8de; font-weight: bold; font-size: 2rem;}
.campaingn-list ul li dl dt {color: #94c8de; font-size: 1.2rem; font-weight: bold;}
.campaingn-list ul li dl dd {font-size: 0.9rem; line-height: 1.3em;}
.campaingn-list ul li img {width: 100%;}
.campaingn-list ul li div {padding: 10px 40px;background-color: #fff;}
.campaingn-list ul li div h3 {margin: 0 0 0px;}
.campaingn-list ul li div h3 span.font-p {color: #eb73a3; margin: 0 0 0 10px;} 
.campaingn-list ul li div h3 span.font-s {font-size: 0.8rem; font-weight: normal;}
.campaingn-list ul li div h4 {margin: 0 0 15px; font-size: 1.4rem; padding: 0 0 5px; border-bottom: 1px solid #94c8de; line-height: 1.2em;}
.campaingn-list ul li div h4 span.font-p {color: #eb73a3; margin: 0 0 0 10px;}
.campaingn-list ul li div h4 span.font-s {font-size: 0.8rem; font-weight: normal;}
.campaingn-list ul li div h4 span.block {font-size: 0.7rem; font-weight: normal; color: #fff; padding: 5px 10px; background-color: #eb73a3; margin: 0; vertical-align: middle;}
.campaingn-list ul li div h4 span.block.set {background-color:#948160 ;}
.campaingn-list ul li div p {margin: 0 0 15px; font-size: 0.7rem;min-height: 130px;}
.campaingn-list ul li div p.retext1 {min-height: 170px;}
.campaingn-list ul li div p.retext2 {min-height: 100px;}
.campaingn-list ul li div p.retext3 {min-height: 130px;}
.campaingn-list ul li select {width: 100%; margin: 0 0 10px;}
.campaingn-list ul li input {width: 100%;}
.campaingn-list ul li div h4 span.font-b {color: #948160; margin: 0 0 0 10px;}
.campaingn-list ul li div h4 span.block.set2 {color:#948160; border:1px solid #948160; background-color: #fff; padding: 2px 5px;}
.campaingn-list ul li div h4 span.font-b2 {font-size: 1.2rem;}

/* promise -------------------- */
.hana-promise {background-color: #f5f5f7; padding: 80px 0;}
.hana-promise .container h2 {color: #a4925d;}
.promise-list {max-width: 900px; margin: 0 auto; background-color: #fff; border:3px solid #e7e7ec; padding: 80px}
.promise-list ol {margin: 0 0 30px;counter-reset:number;}
.promise-list ol li {margin: 0 0 20px;list-style-position: outside;list-style-type: decimal;}
.promise-list p {font-size: 0.9rem;}

/*******************************
footer
*******************************/
footer {text-align: center;font-size: 1rem; padding: 0px 0 50px;}
.footer-concept {background: url(../images/bg_concept.jpg) no-repeat center center;background-size:cover;padding: 80px 0;margin: 0 0 30px; color: #fff; font-size: 2rem;}
.footer-concept img {width: 200px;}
footer ul {margin: 0 0 30px;}
footer li {display: inline-block; padding: 0 20px ; border-right: 1px solid #e6e6e6;}
footer li:last-child {border-right: none;}

/*******************************
modal
*******************************/
#overlay {display: none;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 999;background-color: rgba(255, 255, 255, .8);}
#modal {display: none;position: fixed;left: 50%;top: 50%;z-index: 9999;transform: translate(-50%, -50%);max-width: 70vw;max-height: 70vh;box-sizing: border-box;padding: 32px;border-radius: 8px; background-color: #fff;}
#modal p {margin: 0 0 20px; width: 800px;}
.active { display: block !important;}
#close {cursor: pointer; text-align: center; padding: 10px; background-color: #e6e6e6; width: 100px; margin: 0 auto;}

#overlay2 {display: none;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 999;background-color: rgba(255, 255, 255, .8);}
#modal2 {display: none;position: fixed;left: 50%;top: 50%;z-index: 9999;transform: translate(-50%, -50%);max-width: 70vw;max-height: 70vh;}
#modal2 p {margin: 0 0 20px;}
#close2 {cursor: pointer; text-align: center; padding: 10px; background-color: #e6e6e6; width: 100px; margin: 0 auto;}


/*******************************
SP
*******************************/
.pc {display: block;}
.sp {display: none;}
@media screen and (max-width: 1024px) {
html,
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	background: #fff;
	color: #000;
	min-width: 100%;
	font-size: 12px;
	line-height: 2.25;
	font-family: Quicksand, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	font-weight: 400;
	-webkit-text-size-adjust: 100%
}
.pc {display: none;}
.sp {display: block;}

/*******************************
header
*******************************/
header nav {min-width: 100%;height: 50px; margin: 0px;}
header nav h1 {top: 10px; left: 10px; width: 20%;}
header nav h1 img {width: 100%;}
header nav ul {margin: 0 0px 0 0;}
header nav li {margin: 15px	 0 0;}
header nav li img {width: 100px;}
header nav li:last-child img {width: 160px; margin: 0 7px;}
.header_contact {margin: 0 0 1px;}
.main-image {width: 100%; margin: 0px;height: 100vh;}
.main-copy {width: 100%;bottom:60px; left:-15px; top: auto;}
.main-copy img {width: 98%; margin: 0 0 0 2%;}
.main-copy-icon {margin: 0px 0 0 20px;}
.main-copy-icon span {padding: 5px 10px; font-size: 11px;}
.main-image .main-icon {left: 5px;top: 20px; left: auto; width: 150px;}


/*******************************
section
*******************************/
.container {text-align: center; margin: 0 0 30px;}
.container h2 {font-family:'Noto Serif JP','Lora', serif;
 font-weight: 500; font-size: 1.2rem; letter-spacing: 3px; margin: 0 0 10px;}
h3 {font-family:'Noto Serif JP','Lora', serif;
 font-weight: 500; font-size: 1.2rem; letter-spacing: 3px; margin: 0 0 10px;}
.container h2 span {font-style: italic; color: #a4925d;}

/* crown -------------------- */
.hana-crown { padding: 40px 0 40px;}
.crown-list {text-align: center; padding: 0 20px;}
.crown-list p {font-size: 9px;}
.crown-list img {width: 100%;}


/* new cart -------------------- */
.hana-cart-area { background-color: #f5f5f7; padding: 50px 0; }
.hana-cart-area .container {max-width: 100%; margin: 0 auto;}
.hana-cart-area h2 {text-align: center; margin: 0 auto 40px; width: auto;}
.hana-cart-area h2 img {text-align: center; margin: 0 auto; width: 80%;}
.hana-cart-area ul.cart-item {display: none;}
.cart-item-sp {width: 94%; padding: 0 3% 20px;}
.cart-item-sp img {max-width: 100%;}
.cart-campaign {text-align: center; margin: 0px 0 0;}
.cart-campaign-title {width: 100%;}
.cart-campaign-title img {margin: 0px 0 0; width: 60%;}
.cart-campaign-img {width: 90%; padding: 0 5%; background-color:transparent; border:none;}
.cart-campaign-img img {width: 100%;}
.cart-send-area {width: 90%; padding: 20px 5% 0;}
.cart-send-area img {width: 100%;}

.cart-item-01 {margin: 0 0 15px;}
.color-select-text {margin: 0px 0 10px; font-size: 15px; text-align: left;}
.color-select {margin: 0px auto 8px; display: flex;justify-content: space-between;}
.hana-cart-area ul.cart-item li .color-select li {width: 48%; text-align: left;}
.hana-cart-area ul.cart-item li .color-select li:last-child {padding:0;}
.color-select input[type="radio"]{display: none;}
.color-select input[type="radio"] + label {
    position: relative;
    margin:0;
    display: inline-block;
    background-image:url("../images/radio_01.png");
    background-repeat: no-repeat;
    background-size:contain;
    width: 160px;
    height:46px;
    cursor: pointer;
    -webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;
}
.color-select input[type="radio"] + label.color-yellow {background-image:url("../images/radio_02.png");}
.color-select input[type="radio"]:checked + label {
    background-image:url("../images/radio_01_on.png");
    background-repeat: no-repeat;
    background-size:contain;
    width: 160px;
    height:46px;
    -webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;
}
.color-select input[type="radio"]:checked + label.color-yellow  {background-image:url("../images/radio_02_on.png");}


/* item -------------------- */
.hana-item {position: relative; }
.hana-item .item-img-body {height: 400px; background: url(../images/bg_item.jpg) center center no-repeat;background-size: auto;background-size: cover;}

.hana-item .container {box-shadow: 0px 10px 25px rgba(0,0,0,.1);position: relative; top: -50px; max-width: 75%; margin: 0 auto;background-color: #fff; padding: 30px 30px;}
.hana-item .container p {font-size: 1rem;color: #a4925d; margin: 0 0 15px;}
.hana-item .container h2 {font-size: 1.2rem; letter-spacing: 5px; margin: 0 0 30px; line-height:1.5em;}
.hana-item .container h2::after {
    content: "";
    height: 1px;
    width: 100px;
    background:#a4925d;
    display: block;
    margin: 20px auto 20px;
}
.item-list .item-icon span {font-size: 10px; margin: 0 5px 5px;}

/* set -------------------- */
.hana-set { padding:0px 0 40px;   position: relative;}
.set-list {max-width: 94%; padding: 0 3%; margin: 0 auto; text-align: center;}
.set-image {margin: 0 0 20px;}
.set-image img {width: 100%;}
.set-list .set-detail span {font-size: 11px; display: block; width: 80px; margin: 0 auto 10px; background-color: #a4925d; padding: 1px 10px; font-weight: bold; color: #fff;}
.hana-set h2 span {display: block; margin: 0 0 20px; position: relative; width: 300px; margin: 0 auto}
.hana-set h3 {font-size: 1.2rem; font-weight: normal; line-height: 1.8em;}



/* copy -------------------- */
.hana-copy { padding: 0px 0 0px; min-height:100%;}
.copy-list .main {display: block;margin: 0 auto; position: relative;}
.copy-list img {width: 100%;}

/* description -------------------- */
.hana-description { padding: 40px 0 40px;}
.description-list {max-width: 100%; margin: 0 auto;}
.description-list ul {display: block;}
.description-list ul li {width: 80%; padding: 0 10%; }
.description-list ul li img {width: 100%; margin: 20px 0 0;}
.description-list ul li dd {line-height: 2em; margin: 0 0 50px;}

/* trouble -------------------- */
.hana-trouble { padding: 40px 0 40px; }
.hana-trouble .container p {margin: 0 0 20px;}
.trouble-list ul {display: flex;justify-content:center;flex-wrap:wrap; max-width: 100%; margin: 0 auto;}
.trouble-list ul li {width: 30%; padding: 0px 2%;text-align: center;}
.trouble-list ul li:nth-child(2) {width: 80%; text-align: center;}
.trouble-list ul li:nth-child(1) img {width: 100%; display: none; }
.trouble-list ul li:nth-child(2) img {width: 90%; padding: 0px 0 0 0;}

/* feature -------------------- */
.hana-feature { padding: 40px 0 0px; background-color: #f5f5f7; }
.hana-feature .container {margin: 0px;}
.hana-feature .container h2 { font-size: 1.8rem; }
.hana-feature .container p {margin: 0 0 70px;}

/* point1 */
.point-1 .main {display: block;max-width: 100%; margin: 0 auto; padding: 0px 0 40px; position: relative;}
.point-1 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-1 .main li {width: 100%; position: relative; padding: 0;}
.point-1 .main li span.sp {position: absolute; top: -60px; right: 10px; font-size: 3rem; color: #fff; background-color: #a4925d; padding: 30px 20px; border-radius: 200px;}
.point-1 .main li:last-child {width: 94%; padding: 10px 3%;}
.point-1 .point-img img {position: static; right: 0; max-width: 100%;}
.point-1 .main .point-copy {display: none;}
.point-1 .main li dt {font-size: 1.4rem; margin: 0 0 15px; line-height: 1.7em; text-align: center;}
.point-1 .main li dd {margin: 0 0 15px;}
.point-1 .main li dd img {width: 100%; margin: 50px 0 0;}

.point-1-sub {background-color: #fff; padding: 60px 0 50px;}
.point-1-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 30px;}
.point-1-sub .sub {max-width: 90%; padding: 0 5%; margin: 0 auto 50px;display: block;}
.point-1-sub .sub li {width: 100%; position: relative; padding: 0;}
.point-1-sub .sub li dt {font-size: 1.4rem; margin: 0 0 20px;line-height: 1.8em;text-align: center;}
.point-1-sub .sub li dd {margin: 0 0 30px;}
.point-1-sub .sub li:first-child {text-align: center;}
.point-1-sub .sub li:first-child img {width: 80%; margin: 0 0 15px;}
.point-1-sub .sub li dd.sub-list li:first-child {text-align: left;}
.point-1-sub .sub li img.point-img {width: 100%;}
.point-1-sub .sub li dd.sub-list {padding: 20px; border:2px solid #e6e6e6;}

/* point2 */
.point-2 .main {display: block;max-width: 100%; margin: 0 auto; padding: 0px 0 40px; position: relative;}
.point-2 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-2 .main li {width: 100%; position: relative; padding: 0;}
.point-2 .main li span.sp {position: absolute; top: -60px; left: 10px; font-size: 3rem; color: #fff; background-color: #a4925d; padding: 30px 20px; border-radius: 200px;}
.point-2 .main li:last-child {width: 94%; padding: 10px 3%;}
.point-2 .point-img img {position: static; right: 0; max-width: 100%;}
.point-2 .main .point-copy {display: none;}
.point-2 .main li dt {font-size: 1.6rem; margin: 0 0 15px; line-height: 1.7em; text-align: center;}
.point-2 .main li dd {margin: 0 0 15px;}
.point-2 .main li dd img {width: 80%;}
.point-2 .main li dd ul { display: flex;flex-wrap:wrap;}
.point-2 .main li dd li {width: 70%; padding: 0px;margin: 0 0 10px; font-size: 10px; line-height: 1.5em;}
.point-2 .main li dd li.img {width: 49%; padding: 0 1% 0 0;}
.point-2 .main li dd .sub-li {margin: 30px 0 0;}
.point-2 .main li dd li:nth-child(2) {width: 48%; padding: 0px;}
.point-2 .main li dd li:last-child {width: 48%; padding: 0px;}
.point-2 .main li dd li img {width: 100%;}

.point-2-sub {background-color: #fff; padding: 60px 0 50px;}
.point-2-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 30px;}
.point-2-sub .sub {max-width: 90%; padding: 0 5%; margin: 0 auto 50px;display: block;}
.point-2-sub .sub li {width: 100%; position: relative; padding: 0;}
.point-2-sub .sub li:first-child {text-align: center;}
.point-2-sub .sub li:first-child img {width: 80%; margin: 0 0 15px;}
.point-2-sub .sub li dt {font-size: 1.4rem; margin: 0 0 20px;line-height: 1.8em;text-align: center;}
.point-2-sub .sub li dd {margin: 0 0 30px;}

/* point3 */
.point-3 .main {display: block;max-width: 100%; margin: 0 auto; padding: 0px 0 40px; position: relative;}
.point-3 .main:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -40px;border: 40px solid transparent;border-top: 40px solid #f5f5f7;z-index: 98;}
.point-3 .main li {width: 100%; position: relative; padding: 0;}
.point-3 .main li span.sp {position: absolute; top: -60px; right: 10px; font-size: 3rem; color: #fff; background-color: #a4925d; padding: 30px 20px; border-radius: 200px;}
.point-3 .main li:last-child {width: 94%; padding: 10px 3%;}
.point-3 .point-img img {position: static; right: 0; max-width: 100%;}
.point-3 .main .point-copy {display: none;}
.point-3 .main li dt {font-size: 1.4rem; margin: 0 0 15px; line-height: 1.7em; text-align: center;}
.point-3 .main li dd {margin: 0 0 15px;}
.point-3 .main li dd img {width: 100%;}

.point-3-sub {background-color: #fff; padding: 60px 0 0px;}
.point-3-sub p {text-align: center; font-size: 2rem; color:#a4925d; margin: 0 0 15px;}
.point-3-sub .sub {max-width: 90%; padding: 0 5%; margin: 0 auto 50px;display: block;}
.point-3-sub .sub li {width: 100%; position: relative; padding: 0;}
.point-3-sub .sub li:first-child {text-align: center;}
.point-3-sub .sub li:first-child img {width: 80%; margin: 0 0 15px;}
.point-3-sub .sub li dt {font-size: 1.4rem; margin: 0 0 15px; line-height: 1.8em;text-align: center;}
.point-3-sub .sub li dd {margin: 0 0 30px;}

/* color -------------------- */
.hana-color { padding: 10px 0 40px; background-color: #f8f7f5;position: relative;}
.hana-color .container h2 {font-size: 2rem;}
.hana-color .container p {margin: 0 0 20px;}
.color-list {max-width: 94%; margin: 0 auto 50px; padding: 0 3%;}
.color-list ul {display: flex;justify-content:center;align-items: center;}
.color-list ul li {width: 45%;text-align: center;}
.color-list ul li:nth-child(2) {width: 10%; color: #a99054; font-size: 3rem;}
.color-list ul li img {width: 100%;}
.color-text {text-align: center; color: #a4925d; z-index: 99; position: relative; font-size: 1.5rem; font-weight: 100;}
.color-voice {max-width: 94%; margin: 0 auto 50px;position: relative;}
.color-voice:before {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -30px;border: 30px solid transparent;border-bottom: 30px solid #fff;z-index: 98;}
.color-voice dl {padding:20px; background-color: #fff;}
.color-voice dt {font-weight: bold; }


/* movie -------------------- */
.hana-movie { padding: 80px 0 40px; position: relative;background: linear-gradient(#fff 50%, #f8f7f5 50%);}
.hana-movie .container h2 {color: #a4925d; font-size: 1.5rem;}
.movie-list-flame{position:relative;width:90%;height:0;padding-top:65%; margin: 0 auto;}
.movie-list-flame iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

/* voice -------------------- */
.hana-voice { padding: 40px 0 30px; background-color: #e8f1f5;}
.hana-voice .container h2 {font-size: 1.5rem;}
.hana-voice .container p {margin: 0 0 20px;}
.voice-list {max-width: 100%; margin: 0 auto 50px;}
.voice-list ul {display: block;}
.voice-list ul li {width: 92%; padding: 30px 4% 30px; margin: 0 0 0px; min-height: 100%;border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(1) {border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(2) {border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(3) {border-bottom: 1px solid #fff;}
.voice-list ul li:nth-child(4) {border:none; padding-bottom: 0px;}
.voice-list ul li dt {font-weight: bold;}

/* insta -------------------- */
.hana-insta { padding:40px 0;}
.hana-insta .container h2 {font-size: 1.5rem;}
.hana-insta .container p {margin: 0 0 20px;}
.insta-list {max-width: 94%; margin: 0 auto; padding: 0 3px;}
.insta-list ul {display: flex;flex;flex-wrap: wrap; width: 90%; margin: 0 auto;}
.insta-list ul li {width: 44%; }

/* media -------------------- */
.hana-media { padding: 40px 0; background-color: #f7f7f0;}
.hana-media .container h2 {font-size: 1.5rem;}
.hana-media .container p {margin: 0 0 20px;}
.media-list {max-width: 94%; margin: 0 auto; padding: 0 3px;}
.media-list ul {display: flex;flex-wrap: wrap; width: 90%; margin: 0 auto;}
.media-list ul li {width: 44%; margin: 0 0 20px;}
.media-list ul li img {width: 100%;}

/* security -------------------- */
.hana-security {background-color: #f7f7f0;}
.hana-security ul {max-width: 90%; margin: 0 auto; display: block;  padding: 50px 5%; text-align: center;}
.hana-security ul li:first-child {font-size: 1.5rem; padding: 0 0px 0 0; width: 100%;color: #a4925d;}
.hana-security ul li:first-child::after {
content: "";
height: 1px;
width: 100px;
background:#a4925d;
display: block;
margin: 20px auto 20px;
}
.hana-security ul li:last-child {border-left: none; padding: 00px; text-align: left;}

/* qa -------------------- */
.hana-qa { padding: 40px 0;}
.hana-qa .container h2 {font-size: 2rem;}
.qa-list {max-width: 94%; margin: 0 auto;}
.hana-qa .btn-link {cursor: pointer;width: 80%; margin: 30px auto 0; padding: 20px 0; text-align: center; border: 1px solid #ccc; display: block;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
.hana-qa .btn-link:hover {background-color: #000; color: #fff;}

/* campaign -------------------- */
.hana-campaingn { padding: 40px 0; background-color: #e8f3f7;}
.hana-campaingn .container h2 {font-size: 2rem;}
.campaign-icon {margin: 0 0 40px;}
.campaign-icon li {display: inline-block; padding: 2px 20px; }
.campaingn-list ul {display: block;flex-wrap:wrap;}
.campaingn-list ul li {width: 100%; margin: 0 0%;}
.campaingn-list ul li.list-li {margin: 0 0px 30px; height: auto; background-color: #fff;}
.campaingn-list {max-width: 94%; margin: 0 auto;}
.campaingn-list ul li dl {text-align: center;margin: 0 0 10px; position: relative; padding: 0 0 10px;}
.campaingn-list ul li dl:before {content: '＼'; position: absolute;left:10px; top: 20px;color: #94c8de; font-weight: bold; font-size: 2rem;}
.campaingn-list ul li dl:after {content: '／'; position: absolute;right:10px; top: 20px;color: #94c8de; font-weight: bold; font-size: 2rem;}
.campaingn-list ul li dl dt {color: #94c8de; font-size: 1.5rem;}
.campaingn-list ul li dl dd {font-size: 1.1rem; line-height: 1.3em;}
.campaingn-list ul li img {width: 65%; margin: 0 auto;}
.campaingn-list ul li div {padding: 0 20px 20px;background-color: #fff; text-align: center;}
.campaingn-list ul li div h3 {line-height: 1.4em; letter-spacing: 0px; font-size: 1.6rem; margin: 0 0 5px; text-align: left;}
.campaingn-list ul li div h3 span.font-s {font-size: 1.2rem;}
.campaingn-list ul li div h3 span.font-p {font-size: 2.5rem;}
.campaingn-list ul li div h3 span {font-size: 0.9rem;}
.campaingn-list ul li div p {min-height: auto; margin: 0 0 15px; font-size: 0.9rem; line-height: 1.4em; text-align: left;}
.campaingn-list ul li div p.retext1 {min-height: auto;}
.campaingn-list ul li div p.retext2 {min-height: auto;}
.campaingn-list ul li div p.retext3 {min-height: auto;}
.campaingn-list ul li select {width: 100%; margin: 0 0 10px;}
.campaingn-list ul li input {width: 100%;border-radius: 0px;}
.campaingn-list ul li img.cp-cart-btn {width: 100%;}

.campaingn-list ul li div h4 { text-align: left;margin: 0 0 15px; font-size: 2rem; padding: 0 0 5px; border-bottom: 1px solid #94c8de; line-height: 1.1em;}
.campaingn-list ul li div h4 span.font-p {color: #eb73a3; margin: 0 0 0 10px;}
.campaingn-list ul li div h4 span.font-b {color: #948160; margin: 0 0 0 10px;}
.campaingn-list ul li div h4 span.font-s {font-size: 1rem; font-weight: normal;}
.campaingn-list ul li div h4 span.block {font-size: 1rem; font-weight: normal; color: #fff; padding: 5px 10px; background-color: #eb73a3; margin: 0; vertical-align: middle;}
.campaingn-list ul li div h4 span.block.set {background-color:#948160 ;}
.campaingn-list ul li div h4 span.block.set2 {color:#948160; border:1px solid #948160; background-color: #fff; padding: 2px 5px;}
.campaingn-list ul li div h4 span.font-b2 {font-size: 1.2rem;}
/* promise -------------------- */
.hana-promise {background-color: #f5f5f7; padding: 40px 0;}
.hana-promise .container h2 {font-size: 1.5rem;}
.promise-list {max-width: 80%; margin: 0 auto; background-color: #fff; border:3px solid #e7e7ec; padding: 5%;}
.promise-list ol {margin: 0 0 30px;counter-reset:number;}
.promise-list ol li {margin: 0 0 15px 15px; line-height: 1.5em;}
.promise-list p {font-size: 0.9rem;}

/*******************************
footer
*******************************/
footer {text-align: center;font-size: 1rem; padding: 0px 0 50px;}
.footer-concept {font-size: 1.5rem;}
.footer-concept img {width: 20%;}
footer ul {margin: 0 0 30px;}
footer li {display: inline-block; padding: 0 10px ; font-size: 10px; border-right: 1px solid #e6e6e6;}
footer li:last-child {border-right: none;}

/*******************************
modal
*******************************/
#modal {max-width: 90vh;}
#modal p {margin: 0 0 20px; width: 320px;font-size: 0.9rem; line-height: 1.5em;}
}

.in01 { top: 150px;right: -100px;}
.in02 { top: 800px; left: -50px;}
.in03 { top: 1450px; right: -150px;}
.in04 { top: 2050px; left: 30px;}
.in05 { top: 3000px; right: 30px;}
.in06 { top: 4050px; right: 0px;}
.in07 { top: 5500px; left: 30px;}
.in08 { top: 6800px; right: -100px;}
.in09 { top: 8800px; left: -50px;}
.in10 { top: 10000px; right: -150px;}
.in11 { top: 12000px; left: -30px;}
.in12 { top: 13300px; left: 200px;}
.ingre { position: absolute; z-index: 99; opacity: 0; transition: opacity 0.8s ease-in-out 0s;}
@media screen and (max-width: 1024px) {
.ingre {display: none;}
}
/* NAVI */
#fix-nav {
display: none;
border-bottom: 1px solid #e7e2de;
box-shadow: 0px 9px 5px -5px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 9px 5px -5px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 9px 5px -5px rgba(0,0,0,0.1);
-webkit-transition: all 1s;
transition: all 1s;

}
#fix-nav ul {
display: flex;
margin: 0px auto;
max-width:1180px;
vertical-align: bottom;
}
#fix-nav li {
font-family: 'Dancing Script', cursive;
list-style: none;
width: 33%;
font-family:'Noto Serif JP','Lora', serif;
 font-weight: 500; letter-spacing: 3px;
text-align: center;
transition: .3s;
font-size: 1rem;
border-right: 1px solid #d0c5a5;
line-height: 1em;
padding: 5px 0 0;
}
#fix-nav li span {display: block; font-size: 12px;}
#fix-nav li:last-child {border-right: none; padding:0px;}
#fix-nav li a {color:#a4925d;}
#fix-nav.fixed {
position: fixed;
top: 0;
width: 100%;
display: block;
z-index: 99999;
background-color: rgba(255,255,255,0.9);
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}
#fix-nav li:last-child a {color:#e9528e; }
#fix-nav.fixed ul {
padding: 20px 0;
}
@media screen and (max-width: 1024px) {
#fix-nav .container {padding: 0px;}
#fix-nav.fixed ul {padding: 10px 0;}
#fix-nav li{ font-size: 1rem; letter-spacing: 0px; }
#fix-nav li span {font-size: 0.8rem;}
}
@keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}
#fixed-btn {
width: 55px;
position: fixed;
right: 0px;
bottom: 10px;
border-radius: 50%;
z-index: 999;
}
@media screen and (max-width: 1024px) {
#fixed-btn {width: 40px;}
}
/* mainimage */
.main-image{
width:100%;
margin:0 auto;
height: 0;
padding-top: 50%;
background: url(../images/main_image_pc.jpg) no-repeat;
background-size: auto;
background-size: cover;
}
.main-image-r{
width:100%;
margin:0 auto 120px;
height: 0;
padding-top: 50%;
background: url(../images/main_image_pc_r.jpg) no-repeat;
background-size: auto;
background-size: cover;
}
.main-image-133{
width:100%;
margin:0 auto 120px;
height: 0;
padding-top: 50%;
background: url(../images/main_image_pc_133.jpg) no-repeat;
background-size: auto;
background-size: cover;
}
@media screen and ( max-width: 1024px ){
.main-image {background: url(../images/main_image_sp.png)0 0 no-repeat; padding-top:150%; height: 0;  background-size:contain;}
.main-image-r {background: url(../images/main_image_sp_r.png)0 0 no-repeat; padding-top:150%; height: 0;  background-size:contain; margin: 0 0 30px;}
.main-image-133 {background: url(../images/main_image_sp_133.png)0 0 no-repeat; padding-top:150%; height: 0;  background-size:contain; margin: 0 0 30px;}

}
.prev-arrow{
position: absolute;
top: 50%;
left:-5px;
z-index:999;
width: 0;
height: 0;
background-color: transparent;
border-left: 0 solid transparent;
border-right: 15px solid #94c8de;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.next-arrow{
position: absolute;
top: 50%;
right:-5px;
z-index:999;
width: 0;
height: 0;
background-color: transparent;
border-right: 0 solid transparent;
border-left: 15px solid #94c8de;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

#entryChange11-yellow,#entryChange22-yellow,#entryChange33-yellow,#entryChange44-yellow {display: none;}

/* cart background */
.bg-cart {background-color: #DCE5E2;}

@media screen and (max-width: 1024px) and (min-width: 481px) and (orientation: portrait) {
.wrap {width: 600px; margin: 0 auto;}
header nav {height: 70px;}
.main-image { background-size: 90% auto;}
#fix-nav.fixed {width: 600px; margin: 0 auto;}
}

.oi-text { background-color: #ea5a8d; color: #fff; padding: 10px 20px; font-size: 1.4rem; font-family:'Noto Serif JP','Lora', serif; text-align: center; letter-spacing: 3px;}
.oi-point { background-color: #ea5a8d; color: #fff; padding: 15px 20px; font-size: 1.4rem; font-family:'Noto Serif JP','Lora', serif; text-align: center; letter-spacing: 3px;}
.oi-caution {text-align: left; line-height: 1.5em; font-size: 12px; margin: 10px 0 0;}

@media screen and (max-width: 1024px) {
.oi-text { padding: 5px 5px; font-size: 1.2rem; letter-spacing: 0px;}
.oi-point {  padding: 5px 5px; font-size: 1.2rem; letter-spacing: 0px;}
.oi-caution {text-align: left; line-height: 1.5em; font-size: 9px; margin: 10px 0 0;}
}


.item-caution {text-align: left; line-height: 1.5em; font-size: 12px; margin: 10px auto 0; max-width: 1180px}
.item-caution.pc {font-size: 13px; margin-top: 20px;}
.item-caution-red {margin: 0 0 7px;}
.item-caution.pc .item-caution-red {margin: 0px;}

@media screen and (max-width: 1024px) {
.item-caution {font-size: 9px;}
}