/* CSS Document */

/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border:0;
	outline: 0;
	vertical-align: baseline;
	background:transparent;
}
html {
	overflow: inherit;
	height: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333333;
	font-size:16px;
	line-height: 1.6;
	letter-spacing:0;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, td, th, address {
    font-weight: normal;
}
ol,ul {
	list-style: none;
}

fieldset,img { 
	border: 0;
}
img {
	vertical-align:top;
	width:100%;
}
table {
	width:100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	text-align:left;
	vertical-align:top;
}
caption,th {
	text-align: left;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}
sup {
	font-size:62.5%;
	vertical-align: text-top;
}
/* RESET */

div#container {
	width: 1000px;
	margin: 0 auto;
	padding: 0 !important;
	background-color: #fff;
	text-align: left;
	overflow:hidden;
}
.wrap{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
.key p img{
	vertical-align: top;
}
.key .movie{
	position: relative;
}
.key .movie video{
	width: 100%;
	height: auto;
}
/*.key .movie video{
	margin-bottom: 28.35vw;
}
@media screen and ( max-width:480px) {
	.key .movie video {
		margin-bottom: 41.2vw;
	}
}*/
.key .movie img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.cv{
	position: relative;
}
.cv_btn＿area{
	display: flex;
    position: absolute;
    bottom: 7.2%;
    left: 0;
    right: 0;
    justify-content: center;
    margin: 0 auto;
}
.cv_btn＿area li{
	flex-basis: 43.6%;
}
.user_voice{
	padding: 0 0 60px;
	background-color: #7b675a;
}
@media screen and ( max-width:480px) {
	.user_voice{
		padding: 0 0 30px;
	}
}

.user_voice ul li p{
	padding: 0 5.4%;
	background-color: #7b675a;
	position: relative;
}
.user_voice ul li p video{
	width: 100%;
	height: auto;
}
.user_voice ul li p span{
	position: absolute;
    bottom: 5%;
    right: 9%;
    width: 30%;
}
/*お支払い方法*/
.about_payment{
	padding:5% 3%;
}
.about_payment h2{
	background-color:#a77a56;
	color:#fff;
	padding:1% 3%;
	margin:0 0 3% 0;
	font-size:18px;
}
.about_payment h3{
	margin:0 0 3% 0;
}
.about_payment .payment_box{
	margin:0 0 6% 0;
}
.about_payment .payment_box dt{
	margin:0 0 3% 0;
}
@media screen and ( max-width:750px) {
	.about_payment .payment_box {
		font-size:12px;
	}
}
/*スマートフォン*/
#smp-lpshoppingcolumn dt{
		font-weight: normal !important;
		padding: 0 !important;
		margin:2.5% 0 3% 0;
}

/* フォーム共通設定
----------------------------------------------- */
#lpshoppingcolumn {
	width: 90% !important;
	margin: 30px auto;
	padding: 0 2% 2%;
	font-size: 1.2em;
	border: 2px solid #aaa;
	border-radius: 5px;
	overflow: hidden;
}
#lpshoppingcolumn .lp_submit_area {
	display: block;
	margin: 20px 0;
	max-width:100% !important;
}
#lpshoppingcolumn #regular_cycle_area .cycle_form {
    float: none !important;
    display: block !important;
	width: 100% !important;
}

.footer_lp{
	background-image: url(../img/bg_footer.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size: cover;
	width:100%;
	padding: 40% 0 14%;
}
.footer_lp .footer_navi{
	display: flex; /*ほぼこれが固定値*/
	flex-wrap: nowrap; /* nowrap:折り返さない　wrap:折り返してもよい */
	flex-direction: row; /*ほぼこれが固定値*/
	justify-content: space-between; /*横方法*/
	align-items: flex-start; /*縦方向*/
	align-content: flex-start; /*ほぼこれが固定値*/
	padding:0 17% 0;
	margin:0 0 30px 0;
	width: auto;
}
.footer_lp .footer_navi li a{
	color:#fff;
	text-decoration:none;
}
@media screen and ( max-width:750px) {
	.footer_lp .footer_navi{
	  display: flex; /*ほぼこれが固定値*/
	  flex-wrap: wrap; /* nowrap:折り返さない　wrap:折り返してもよい */
	  align-items: flex-start; /*縦方向*/
	  align-content: center; /*ほぼこれが固定値*/
	  padding:0 16%;
	}
	.footer_lp .footer_navi li{
		margin:0 0 20px 0;
	}
	
}

.info{
	padding:3% 3%;
	margin:8% 0 0;
	border:3px solid #ccc;
}
.info div{
}
.info h2{
	text-align:center;
	margin:0 0 5% 0;
	font-size:24px;
	font-weight:bold;
}
.info h2 br{
	display:none;
}
@media screen and ( max-width:750px) {
	.info{
		padding:10% 5% 5%;
		margin:8% 5% 5%;
	}
	.info h2{
		text-align:center;
		margin:0 0 5% 0;
		font-size:17px;
	}
	.info h2 br{
		display:block;
	}
	
}
.copy{
	text-align:center;
	color:#fff;
	font-size:20px;
	
}
#lpshoppingcolumn .lp_submit_area{
	width: 528px;
	margin:0 auto !important;
	display:block;
}
#lpshoppingcolumn .pdt20 {
    padding: 20px 0 0 0;
    font-size: 17px!important;
}
#lpshoppingcolumn .pdt20 img{
	width:19px;
}
.deliv_s_date > span{
	font-size:15px;
	font-weight:normal;
	
}
/*お届け指定日削除*/
.delivery_request{
	display:none;
}

/*性別非表示*/
.gender{
	display:none;
}
.birthday_point{
	font-size: 14px;
}
/*スマートフォン*/
#smp-lpshoppingcolumn .txt_b span{
    font-weight:normal;
    font-size: 13px;
}

/*購入済ユーザー向け表示*/
.login_info{
	border:3px solid #f00;
	padding:5%;
	margin:10% 0 0 0;
	text-align:center;
}

.simulator{
	padding:3%;
	margin: 70px 3% 50px;
	background-image: url("../img/bg_simulator.png");
	background-repeat: repeat;
	border-radius: 10px;
	position: relative;
}
.simulator > h2{
	position: absolute;
	top: -3.1%;
	left: 0;
	right: 0;
	margin: auto;
	width: 85.2%;
}
@media screen and (max-width: 480px) {
	.simulator > h2{
		position: absolute;
		top: -1.6%;
	}
}
.img_dog{
	position: absolute;
    bottom: -7%;
    left: -7%;
}
@media screen and (max-width: 480px) {
	.img_dog{
		width: 32%;
		bottom: -6.5%;
		left: -2%;
	}
}
.simulator_frame{
	background-color: #fff;
	padding:33% 8% 8%;
}
@media screen and (max-width: 480px) {
	.simulator_frame{
		padding:30% 7% 8%;
	}
}
.simulator_box{
	align-items: center;
	display: flex;
}
@media screen and (max-width: 480px) {
	.simulator_box{
		flex-wrap: wrap;
	}
}
.simulator_box.even{
	background-color: #fff;
}
.simulator_box ul{
	display: flex;
	font-size: 20px;	
}
@media screen and (max-width: 480px) {
	.simulator_box ul{
		width: 100%;
		flex-wrap: wrap;
	}
	.simulator_box ul li{
		width: 100%;
	}
	.simulator_box ul li label{
		margin: 0 5% 0 0;
	}
}
@media screen and (max-width: 480px) {
	.simulator_box select{
		width: 100%;
		padding: 3%;
		font-size: 18px;
	}
}
@media screen and (max-width: 480px) {
	.simulator_box input[type="number"]{
		padding: 3%;
		margin: 0 6px 0 0;
		font-size: 18px;
	}
}
.simulator_box_sub{
	background: #fff;
	padding: 1em 1em;
}
.simulator_box_sub_txt{
	margin: 0 0 20px 0;
}
.simulator_box_sub ul{
	display: flex;
	flex-wrap: wrap;
}
.simulator_box_sub ul li{
	flex-basis: 20%;
	font-size: 14px;
	margin: 0 0 20px 0;
}
.simulator_box_sub ul li label{
	align-items: center;
	display: flex;
}
.question {
	color: #000;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.25;
	padding: 1em 0;
	width: 40%;
}
@media screen and (max-width: 480px) {
	.question {
		width: 100%;
	}
}
.record {
	background: #ffeee4;
	color: #000;
	font-size: 100%;
	margin: 20px 0 0 0;
	padding: 4% 7% 3.5%;
}
@media screen and (max-width: 480px) {
 .record {
	margin: 30px 0 0 0;
	padding: 4% 5% 3.5%;
	width: 100%;
  }
}
.record_heading{
	color: #4a1e05;
	font-size: 28px;
	font-weight: bold;
	text-align:center;
	margin: 0 0 20px 0;
}
@media screen and (max-width: 480px) {
	.record_heading{
		font-size: 4.8vw;
	}
}
.record_tag {
	background-color: #fff;
	border: 1px solid;
	border-radius: .125em;
	display: inline-block;
	line-height: 1;
	margin: .25em .125em;
	padding: .25em .25em;
	text-align: center;
}
.record table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.25;
  width: 100%;
}
.record table th,
.record table td {
	border-top: 1px dotted #815e4a;
	padding: .75em 0;
	text-align-last: left;
	color: #4a1e05;
	font-size: 20px;
}
@media screen and (max-width: 480px) {
	.record table th,
	.record table td {
		font-size: 18px;
	}
}
.record table th {
  width: 7em;
}

.record table tr:last-child th {
	font-weight: bold;
}
@media screen and (max-width: 480px) {
	.record table tr:last-child th {
		height: 28vw;
	}
}
.record table tr:last-child td {
	color: #e01b01;
	font-weight: bold;
	font-size: 20px;
}
@media screen and (max-width: 480px) {
	.record table tr:last-child td {
		font-size: 16px;
	}
}
/*フローティングバナー*/
.fixed-offer {
	bottom: 0;
	left: 0;
	opacity: 0;
	position: fixed;
	transition: opacity .3s linear 0s;
	width: 100%;
}

.fixed-offer-is-invisible {
	opacity: 0;
}

.fixed-offer-is-invisible.fixed-offer-is-ended {
	left: 100%;
}

.fixed-offer-is-visible {
	opacity: 1 !important;
}

.fixed-offer__close {
	position: absolute;
	right: 9px;
	top: -26px;
	z-index: 100;
}
@media screen and (max-width: 480px) {
	.fixed-offer__close {
		right: 1%;
		top: -10%;
		width: 8%;
	}
}
.fixed-offer__inner{
	position: relative;
	max-width: 750px;
	margin: 0 auto;
}
.fixed-offer__list{
	display: flex;
	position: absolute;
	top: 37%;
	right: 0;
}
@media screen and (max-width: 480px) {
	.fixed-offer__list{
		justify-content: flex-end;
	}
}
.fixed-offer__list li{
	flex-basis: 45%;
}
@media screen and (max-width: 480px) {
	.fixed-offer__list li{
		flex-basis: 25%;
	}
}

.snap_widget_follow{
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.snap_widget_follow a{
	align-items: center;
	display: flex;
    justify-content: center;
}

.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
	position: relative;/*相対配置*/
	display: inline-block;
	width: 50px;/*幅*/
	height: 50px;/*高さ*/
	background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
	overflow: hidden;/*はみ出た部分を隠す*/
	border-radius: 13px;/*角丸に*/
	margin: 0 10px 0 0;
}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}