/* ======================================================================
CSS information
file name  : 　.css
style info :  LP
admin info :  日本ドライスキン研究所
====================================================================== */
/* ====================汎用==================== */
body {
	margin:0;
	padding:0;
	background-color:#FFFFFF; /* 余白の色 */
	font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica','Arial',sans-serif;
}
a {
	text-decoration:none;
	color:#000;
}
a:hover {
	color:#0091db;
}
a img:hover {
	opacity: 0.8;
}
img {
	margin:0;
	padding:0;
	vertical-align:bottom;
	width:100%;
	display:block;
}
p {
	margin:0;
	padding:0;
}

/*追加アニメーション*/
@media screen and (min-width: 640px) {
.cp_slide_item {
display: block;
width: 640px;
height: 663px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 640px;
height: 663px;
}
.cp_slidewrapper {
display: block;
width: 640px;
height: 663px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 639px) {
.cp_slide_item {
display: block;
width: 640px;
height: 663px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 640px;
height: 663px;
}
.cp_slidewrapper {
display: block;
width: 640px;
height: 663px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 621px) {
.cp_slide_item {
display: block;
width: 621px;
height: 643px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 621px;
height: 643px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 621px;
height: 643px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 562px) {
.cp_slide_item {
display: block;
width: 562px;
height: 582px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 562px;
height: 582px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 562px;
height: 582px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 540px) {
.cp_slide_item {
display: block;
width: 540px;
height: 559px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 540px;
height: 559px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 540px;
height: 559px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 414px) {
.cp_slide_item {
display: block;
width: 414px;
height: 429px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 414px;
height: 429px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 414px;
height: 429px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 411px) {
.cp_slide_item {
display: block;
width: 411px;
height: 426px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 411px;
height: 426px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 411px;
height: 426px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 375px) {
.cp_slide_item {
display: block;
width: 375px;
height: 388px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 375px;
height: 388px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 375px;
height: 388px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 360px) {
.cp_slide_item {
display: block;
width: 360px;
height: 373px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 360px;
height: 373px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 360px;
height: 373px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
@media screen and (max-width: 320px) {
.cp_slide_item {
display: block;
width: 320px;
height: 332px;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.cp_slide_item img{
width: 320px;
height: 332px;
}
.cp_slidewrapper {
display: block;
margin: auto;
width: 320px;
height: 332px;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index:-1;
}
}
.stage_01 {
animation: slider2 4s infinite cubic-bezier(.09,.48,.32,.98);
z-index:1;
animation-delay: 2s;
}

.stage_02 {
animation: slider2 4s infinite cubic-bezier(.09,.48,.32,.98);
z-index:2;
}
@keyframes slider1 {
0% {
width:0;
z-index:3;
}
25%{
width:100%;
z-index:3;
}
50%{
width:100%;
z-index:3;
}
100% {
width:0;
z-index:1;
}
}
@keyframes slider2 {
0% {
width:0;
}
25%{
width:100%;
}
50%{
width:100%;
z-index:2;
}
53%{
width:100%;
z-index:1;
}

99%{
width:100%;
}

100% {
width:0;
}
}

/* ========== 動く系 ========== */
.anim-img {
	position:relative;
}
.fv-gif {
position: absolute;
    right: 1%;
    bottom: -18.5%;
    width: 43% !important;
}
.fv-gif-YDN {
position: absolute;
    right: 1%;
    bottom: 35px;
    width: 43% !important;
}
.dokuhon {
    animation: swing 2s linear infinite;
    position: absolute;
    width: 37% !important;
    right: 6%;
    bottom: 6%;
}
.offer-button {
    animation: bounce 2s linear infinite;
    position: absolute;
    width: 88% !important;
    left: 6%;
    bottom: 10%;
}
.sns-nuri {
    position: absolute;
    right: 4.1%;
    top: 16.2%;
	width: 47% !important;
}
.sns-furi {
    position: absolute;
    left: 0;
    bottom: 7%;
    width: 47% !important;
}
.sns-furi-YDN {
    position: absolute;
    right: 4.1%;
    top: 22.2%;
	width: 47% !important;
}
.gif-waku {
	padding: 10px 5%;
	border: solid 1px #e5e5e5;
	margin:0 auto;
}

/* ========== info ========== */
#info {
    margin: 0 auto;
	padding:0 1.5em;
	font-size: 11pt;
	line-height: 1.6em;
	text-align:left;
}
#info p {
	margin-top:20px;
}
#info ul {
	margin: 0;
    line-height: 1;
}
#info li {
    line-height: 1.2;
}

/* ========== アコーディオン ========== */
/*ボックス全体*/
.accbox , .accbox-henkin{
	margin-top:0;
	margin-bottom:2em;
    padding: 0;
    max-width: 640px;/*最大幅*/
	text-align:left;
}
/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #fff;
    font-weight: bold;
    background: #5c96df;
    cursor :pointer;
	font-size:20px;
}
.accbox-henkin label {
    display: block;
    margin: 30px 0 0 0;
    padding: 14px 0 10px;
    color: #fff;
    font-weight: bold;
    background: #ff6666;
    cursor: pointer;
	text-align: center;
	font-size: 20px !important;
}
/*アイコンを表示*/
.accbox label:before {
    content: '＋';
    padding-right: 8px;
}
.accbox-henkin label:after {
	font-family: "Font Awesome 5 Free";
    content: '\f150';
	font-weight: 900;
	padding-left: 10px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#55c6ff;
}
.accbox-henkin label:hover {
    background :#ff8a8a;
}

/*チェックは隠す*/
.accbox input , .accbox-henkin input {
    display: none;
}

/*中身を非表示にしておく*/
@media screen and (min-width: 640px){
.accbox .accshow_first{
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
}
}
.accbox .accshow ,.accbox-henkin .accshow-henkin {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}
/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #efefef;
    opacity: 1;
	font-size:18px;
}
.cssacc-henkin:checked + label + .accshow-henkin {
    height: auto;
    padding: 0 15px;
    background: #fff;
    opacity: 1;
    border: 2px solid #ff6666;
}

@media screen and (min-width: 640px){
.cssacc_first:checked + label + .accshow_first {
    height: auto;
    padding: 5px;
    background: #efefef;
    opacity: 1;
	font-size:18px;
}
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before
{
    content: '－';
}
.cssacc-henkin:checked + label:after {
	font-family: "Font Awesome 5 Free";
    content: '\f151';
	padding-left: 10px;
	font-weight: 400;
}
.accbox .accshow p {
    margin: 15px 10px
}

@media screen and (min-width: 640px){
	.cssacc_first:checked + label:before
	{
	    content: '－';
	}
	.accbox .accshow_first p {
	    margin: 15px 10px
	}
}

/*　アコーディオン_sp 一番上のラベルを表示　*/
@media screen and (max-width: 639px){
	.accshow_first{
	font-size: 15px;
	height: auto;
    padding: 5px;
    background: #efefef;
    opacity: 1;
	}

	.accshow_first p{
		margin: 15px 10px;
	}

	.lavel_open{
		background: #55c6ff !important;
	}

	.accbox .lavel_open:before {
    content: '－';
		padding-right: 8px;
	}
}

/* ========== 返金 ========== */
.accbox-henkin .accshow-henkin {font-size:0.95rem; }
.accbox-henkin .accshow-henkin h3 {
	margin-top: 30px;
	font-weight: bold;
	color:#ff8a8a;
	font-size: 1.1rem;
	border-bottom: 1px solid;
	border-top: 1px solid;
	padding: 10px 0;
}
.accbox-henkin .accshow-henkin ol {
	margin: 10px 0 40px 0;
}
.accbox-henkin .accshow-henkin ol li.line-first {
	text-decoration: underline;
	margin: 0;
}
.accbox-henkin .accshow-henkin ol li.line {
	text-decoration: underline;
	margin: 20px 0 10px 0;
}
.accbox-henkin .accshow-henkin ul li {margin-bottom: 5px;}
.accbox-henkin .accshow-henkin p {margin: 0 20px;}
.accbox-henkin .accshow-henkin div {padding: 20px; background-color: #eeeeee}
.kome {font-size: 0.8rem;}
hr {border: 1px dashed #cccccc; margin: 20px 10px;}

/* ========== QAnotアコーディオン ========== */
.qabox {text-align: left;}
.qa_q {
font-size: 18px;
display: block;
margin: 1.5px 0;
padding: 13px 12px;
color: #fff;
font-weight: bold;
background: #5c96df;
}
.qa_a {
font-size: 16px;
height: auto;
padding: 5px;
background: #efefef;
}
.qa_a p {margin: 15px 10px;}
@media screen and (max-width: 639px) {
.qa_q {font-size: 16px;}
.qa_a {font-size: 14px;}
.qa_a p {margin: 10px;}
}


/* ========== 特典詳細 ========== */
.tokuten { position: relative; }
.henkin-minibtn {
position: absolute;
top: 48.5%;
left: 8.5%;
max-width: 100%;
width: 37%;
}

/* ========== footer ========== */
nav ul {
    padding: 0;
    position: relative;
    line-height: 0;
}
nav ul li {
    margin-bottom: 3px;
    line-height: 1.5;
    padding: 0.5em;
    list-style-type: none!important;
}
address {
	font-size:12px;
	text-align:center;
}

/* ========== 追従バナー ========== */

#fixed-banner{
    display: none;
    position: fixed;
    bottom: 0;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    z-index: 10;
}
#fixed-banner img {
	width: 90%;
    margin: 10px auto;
}

/* PC通常表示 */
@media screen and (min-width: 640px) {
/* ========== #wrapper ========== */
#wrapper {
	width:640px;
	text-align:center;
	margin:0 auto;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}

/* ========== アコーディオン ========== */
.accbox label {
	font-size:18px;
}
.cssacc:checked + label + .accshow {
	font-size:16px;
}
.cssacc_first:checked + label + .accshow_first{
	font-size:16px;
}

/* ========== footer ========== */
footer {
    padding-bottom: 8em;
}
nav ul {
    background: #f1f8ff;
    font-size: 13px;
    border-top: solid 4px #286ad2;
}
nav ul li {
    display: inline-block;
}
}



/* タブレット、スマートフォン用表示 */
@media screen and (max-width: 639px) {
/* ========== #wrapper ========== */
#wrapper {
	width:100%;
	font-size: 0.95rem !important;
}

/* ========== アコーディオン ========== */
.accbox label {
	font-size:16px;
}
.cssacc:checked + label + .accshow {
	font-size:15px;
}

/* ========== footer ========== */
footer {
    padding-bottom: 5em;
}
nav ul li {
  color: #286ad2;
  border-left: solid 10px #286ad2;/*左側の線*/
  background: #f1f8ff;/*背景色*/
}
}

/* ========== New オファー 9/4 ========== */
.offerflex{
	width: 100%;
	display: flex;
	justify-content: center;
}