* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p {
    padding: 0;
    margin: 0
}

body {
    font-family: "Helvetica", "Arial", YuGothic, "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.4;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    background: #fff;
	font-size: 20px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
html{
	font-size: 62.5%;	
}
p {
    line-height: 1.6;
    margin-bottom: 30px;
}

@media screen and (max-width:767px) {
	html{
		font-size: 37.5%;	
	}
	p {
		line-height: 1.6;
		margin-bottom: 15px;
	}
}
.mb10 {
    margin-bottom: 10px;
}

.fontS12 {
    font-size: 12px;
}

.fontS17 {
    font-size: 17px;
}

.fontS19 {
    font-size: 19px;
}

.fontS21 {
    font-size: 21px;
}

.fontS23 {
    font-size: 23px;
}

.fontS25 {
    font-size: 25px;
}

.fontS27 {
    font-size: 27px;
}

.fontS32 {
    font-size: 32px;
}

.fontWeight {
    font-weight: 700;
}

.f_r {
    float: right;
}

.f_l {
    float: left;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.color_red {
    color: red;
}

.color_pink {
    color: #ff00ff;
}

.color_orange {
    color: #f06666;
}

.color_blue {
    color: #3366ff;
}

.color_skyblue {
    color: #66a3e0;
}

.color_black {
    color: #000;
}

.color_gray {
    color: #888;
}

video {
    max-width: 100%;
}

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

a {
    text-decoration: underline;
/*    color: #4682b4;*/
	font-weight: bold;
}

.txt-highlight {
    background-color: #fff000;
}

.txt-highlight-marker {
    background: linear-gradient(transparent 65%, #ffff66 65%);
}

.txt-highlight-blue {
    background: linear-gradient(transparent 60%, #c1e0ff 40%);
}

.txt-highlight-pink {
    background-color: rgb(250, 225, 240);
}

.txt-highlight-marker-pink {
    background: linear-gradient(transparent 60%, #ffe0ef 40%);
}

.txt-highlight-yellow {
    background: #ffebcc;
}

.txt-highlight-purple {
    background: linear-gradient(transparent 60%, rgb(234, 214, 255) 0%);
}

.content {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
}

@media screen and (min-width: 920px) {
    .content {
        width: 620px;
        margin: 0 auto;
    }
}

.article {
    padding: 15px 20px;
    overflow: hidden;
    padding-top: 0;
}

.article h1 {
    padding-bottom: 20px;
    margin: 15px 0 20px;
    font-size: 21px;
    font-weight: bold;
    border-bottom: 2px solid #CC3300;
}

.article h2 {
    position: relative;
    line-height: 1.5;
    padding-bottom: 15px;
}

.article h3 {
    font-size: 22px;
    padding: 12px 20px;
}

.a-btn img {
    width: 500px;
}

.thanks_box {
    position: relative;
    margin-bottom: 20px;
}

.thanks_text {
    padding: 10px 24px;
    font-size: 24px;
    line-height: 38px;
    background: url(../images/thanks_02.png) center;
    background-size: 100%;
}

.thanks_text p {
    margin-bottom: 0;
}

.thanks_text .date {
    font-weight: bold;
}

.thanks_text .amount {
    font-weight: bold;
    color: red;
    font-size: 60px;
    text-align: center;
    padding: 20px 0;
    text-decoration: underline;
}

@media screen and (max-width:620px) {
    .thanks_text {
        padding: 10px 20px;
        font-size: 22px;
        line-height: 36px;
    }
    .thanks_text .amount {
        font-size: 42px;
        padding: 0px 0 20px;
    }
}

@media screen and (max-width:412px) {
    .thanks_text {
        font-size: 18px;
        line-height: 30px;
    }
    .thanks_text .amount {
        font-size: 32px;
        padding: 12px 0 20px;
    }
}

@media screen and (max-width:320px) {
    .thanks_text {
        font-size: 16px;
    }
}

.slide_Box {
    margin: 0 20px 20px;
}

.jssora106 {
    display: block;
    position: absolute;
    cursor: pointer
}

.jssora106 .c {
    fill: #fff;
    opacity: .3
}

.jssora106 .a {
    fill: none;
    stroke: #000;
    stroke-width: 350;
    stroke-miterlimit: 10
}

.jssora106:hover .c {
    opacity: .5
}

.jssora106:hover .a {
    opacity: .8
}

.jssora106.jssora106dn .c {
    opacity: .2
}

.jssora106.jssora106dn .a {
    opacity: 1
}

.jssora106.jssora106ds {
    opacity: .3;
    pointer-events: none
}

.jssort101 .p {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    background: #000
}

.jssort101 .p .cv {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    box-sizing: border-box;
    z-index: 1
}

.jssort101 .a {
    fill: none;
    stroke: #fff;
    stroke-width: 400;
    stroke-miterlimit: 10;
    visibility: hidden
}

.jssort101 .p:hover .cv,
.jssort101 .p.pdn .cv {
    border: none;
    border-color: transparent
}

.jssort101 .p:hover {
    padding: 2px
}

.jssort101 .p:hover .cv {
    background-color: rgba(0, 0, 0, 6);
    opacity: .35
}

.jssort101 .p:hover.pdn {
    padding: 0
}

.jssort101 .p:hover.pdn .cv {
    border: 2px solid #fff;
    background: none;
    opacity: .35
}

.jssort101 .pav .cv {
    border-color: #fff;
    opacity: .35
}

.jssort101 .pav .a,
.jssort101 .p:hover .a {
    visibility: visible
}

.jssort101 .t {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: .6
}

.jssort101 .pav .t,
.jssort101 .p:hover .t {
    opacity: 1
}

/* COMMET CSS */
.comment-section {
  padding:10px 10px;
  border:5px solid #dde4fe;	
}
.align-items-start {
  align-items: flex-start !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.comment-section{
	margin-bottom:20px;	
}
.comment-section .comment{
	border-bottom:1px solid #ccc;	
	margin-bottom:10px;
	padding-bottom:10px;
}
.comment-section .comment:last-child{
	border:none;
	margin:0;	
}
.comment-section .comment-img {
  margin-right: 15px;
  width:54px;
  height:54px;
}
.comment-section .comment-img img{
	border-radius:100%;
	width:54px;	
}
.comment-section .comment .comment-info{
	display: inline-block;
    /*padding: 1em;
    background: #fff7f2;
    -webkit-border-radius: 0.85714286em;
    -moz-border-radius: .85714286em;
    border-radius: 0.85714286em;
    margin-bottom: 0.42857143em;
	position:relative;*/
}
.comment-section .comment .comment-info:after{
	position: absolute;
	top: 19px;
	left: -13px;
	content: '';
	border-top: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px solid #fff7f2;
	border-bottom: 8px solid transparent;	
}
.comment-section .comment h5{
	margin:0;
  padding:0;
 
}
.comment-section .comment .comment-author-name {
  font-size: 22px;
  line-height:24px;
  font-style:italic;
}

.comment-section .comment-time span {
  font-size: 15px;
  text-transform: uppercase;
  color: #fc5dbe;
  font-weight:bold;
  text-decoration:underline;
}
.comment-section .comment-text{
	font-weight:bold;
	margin:5px 0 0 0;	
}
.comment-section .comment-text p{
	margin-bottom:10px;	
}
.comment-section .comment-back{
	text-align:right;
}

.comment-section .comment-back .comment-btn{
	background:url(../images/comment-icon.jpg) no-repeat left 50%;
	background-size:20px auto;
	padding-left:25px;
	color:#333;
	font-size:14px;
	text-decoration:none;
}
.sp {
    display: none;
}
.div_title_blue h2 {
    font-size: 20px;
	position:relative;
  	font-weight:700;
  	text-align:center;
  	margin:40px 0;
  	padding:15px;
  	color:#fff;
  	background:#f00;
}

.div_title_blue h2:before {
	content:'▲';
  	color:#f00;
  	position:absolute;
  	top:-21px;
  	left:calc(50% - 40px);
}

.buruburu {
    -webkit-animation: buruburu 2s infinite linear alternate;
    animation: buruburu 2s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

@keyframes buruburu {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.animationPulse {
    width: 100%;
    animation: pulse 0.8s ease-in-out 0s infinite alternate forwards;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}

/*
element.style {
    font-size: 24px;
    background-color: #ff0000;
    color: #ffffff;
}*/
.blinking{
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
  -moz-animation:blink 0.5s ease-in-out infinite alternate;
  animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}



.anchorbox {
  position:relative;
  text-align:center;
  margin-bottom:30px;
}
.anchorbox a.an1 {
  position:absolute;
  top:55%;
  right:4%;
  left:4%;
}
.anchorbox a.an2 {
 
  position:absolute;
  top:85%;
  right:4%;
  left:4%;
}

.has-vivid-red-color.has-vivid-red-color {
    color: #cf2e2e;
}

.bottom_info{
	margin-top: 20px;
	background-color:#333;
	color:#fff;
	padding:10px;
	text-align:center;
	font-weight:bold;
}
.bottom_info .number{
	color:#98df00;	
	font-size:19px;
}





element.style {
    font-weight: normal;
}

.article h2 {
  position: relative;
  background: #ffefff;
  border-left: solid 7px #ff8495 !important;
/*  border-bottom: solid 3px #ff82ff;*/
  color: #393939;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  padding: 0.5em;
  margin-bottom: 10px;
/*  text-align:center;*/
}


.grid_box{
	display:flex;
	grid-column-gap: 10px
}
.grid_box div.grid_coloum{
	padding:10px 0;
	width:50%;	
	
	/*font-weight:bold;*/
}
.grid_box .grid_img_box{
	position:relative;	
}
.grid_box .grid_img_box h5{
	text-align:center;
	margin:0;	
	font-size:18px;
	position:absolute;
	bottom:10px;
	width:100%;
	background-color:rgba(0,0,0,0.3);
	padding:3px;
	color:#fff;
}
.grid_box .grid_img_box img{
	margin:0px 0px 10px;	
}
.blue_box{
	border:2px solid #a2dad9;
	padding:10px;
	text-align:center;	
	margin-bottom:30px;
	width:100%;
}
.mall_details_box {
    position: fixed;
    top: 0;
	left:0;
	width:100%;
	height:100%;
    font-size: 16px;
    text-align: center;
    z-index: 55;
	padding-top: 25px;
	background: rgba(0,0,0,.5);
}
.mall_details_box .mall_details_content {
    position: relative;
    background: #fff;
    z-index: 99999999999;
    opacity: 1;
    width: 440px;
	padding:0;
    margin: auto;
}

.grid_box .blue_box h3 {
   position: relative;
   background: #ffefff;
   color: #393939;
   font-size: 20px;
   line-height: 32px;
   font-weight: 700;
   padding: 0.5em;
   margin-bottom: 10px;
}



.balloon__contener {
    margin: 40px 32px 50px 0;
}

.balloon__contener .balloon__left {
    width: 100%;
    position: relative;
    display: block;
    max-width: 80%;
    clear: both;
}

.balloon__contener figure {
    width: 60px;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0;
}

.balloon__contener figure img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: solid 3px #d7ebfe;
}

.balloon__contener figure figcaption {
    color: #555555;
    font-weight: bold;
    width: 60px;
    position: absolute;
    top: 70px;
    text-align: center;
    font-size: 45%;
    line-height: 100%;
}

.balloon__contener .balloon__left .balloon__text {
	font-weight: bold;
    font-size: 17px;
    margin-left: 80px;
    position: relative;
    padding: 20px;
    border-radius: 10px;
    background-color: #d7ebfe;
    line-height: 1.7em;
    letter-spacing: 0.01em;
}

.balloon__contener .balloon__left .balloon__text::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -10px;
    top: 12px;
    border-right: 15px solid #d7ebfe;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}


.userRevew{
	border:2px solid #f48d91;
	padding:10px;
	margin-bottom:20px;
}
.userRevew .skin_type{
	border:1px solid #999;
	padding:5px 30px;
	border-radius:5px;
	font-weight:bold;
}
.userRevew .review_num{
	position:absolute;
	right:0;
	top:0;
	border:1px solid #d538ab;
	padding:2px 10px;
	border-radius:5px;
	font-weight:bold;
	font-size:12px;
	color:#d538ab;
	background-color:#ffe6f8;
}
.userRevew .old{
	position:absolute;
	right:10px;
	bottom:10px;
	display:inline-block;
	width:76px;
	height:76px;
	text-align:center;
	line-height:76px;
	border-radius:100%;
	font-weight:bold;
	font-size:34px;
	color:#fff;
	background-color:#e113a9;
}
.userRevew .old em{
	font-size:14px;	
}
.userRevew .b_a_txt{
	font-size:2.2rem;
	font-weight:bold;
	margin-top:10px;
	margin-bottom:10px;
}
.userRevew .tip{
	font-size:8px;	
	margin:0;
	text-align:right;
	line-height: 10px;
}
.buruburu {
    -webkit-animation: buruburu 2s infinite linear alternate;
    animation: buruburu 2s infinite linear alternate;
}

.gray {
    color: #2A2A2A;
}

.fontS10 {
    font-size: 12px;
}
/* ループ　矢印  -------------------------------------------------------------　　*/
.cp_arrows {
 position: relative;
 /*widget自体の高さ*/
 height: 50px;
 /*widgetの上余白*/
 margin-top: 1em;
 /*widgetの下余白*/
 margin-bottom: 1em;
}
/*一個目の矢印*/
.cp_arrows .cp_arrowfirst {
 /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
 animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
 /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
 animation: arrow-move08 2s 1s ease-in-out infinite;
}
/*共通設定*/
.cp_arrows .cp_arrow {
 position: absolute;
 /*矢印の到着位置　（縦位置）*/
 top: 100%;
 /*矢印の到着位置　（横位置）*/
 left: 45%;
 transform: translate(-50%, -50%);
 transform-origin: 50% 50%;
 /*透明度（0=透明、1=不透明）*/
 opacity: 0;
}
@keyframes arrow-move08 {
 /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
 0% {
  top: 40%;
  opacity: 0;
 }
 /*2sの70％（1.7秒）時に不透明になる*/
 70% {
  opacity: 1;
 }
 /*2s（2秒）時に透明になる*/
 100% {
  opacity: 0;
 }
}
.cp_arrows .cp_arrow::before {
 /*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
 transform: rotate(30deg) translateX(-39%);
 /*矢印左の棒の起点。（top left=左上）*/
 transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
 /*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
 transform: rotate(-30deg) translateX(39%);
 /*矢印右の棒の起点。（top right=右上）*/
 transform-origin: top right;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow::after {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 /*矢印の棒の横の長さ*/
 width: 40px;
 /*矢印の棒の縦の長さ*/
 height: 3px;
 content: '';
 /*矢印の色*/
 background: #E91E63;
}
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
 box-sizing: border-box;
}

.col-xs-12{
	text-align: center;
}
a {
	color: rgb(51, 122, 183);
  }