@charset "UTF-8";
/* CSS Document */

html {font-size:62.5%;}
body {margin:0;padding:0;font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;background:url(img/bg.png) repeat-y center;background-size:1000px;}
.all {max-width:980px;margin:0 auto;}

h1,h2,h3,h4,h5,h6 {font-size:100%;margin:0;}
img {width:100%;}

.clearfix:after {content: "";clear:both;display:block;}

header {background:#f00;color:#fff;padding:1rem;text-align:center;}
h1 {font-weight:normal;}

/*** title ***/
.title {background:url(img/title.jpg) no-repeat top center;text-align:center;}
.title_logo {}
.title_logo img {width:200px;margin-top:3rem}
.title_logo h2 {display:inline-block;background:#fff;padding:.5rem;}

.title_dlqr {display:table;table-layout:fixed;border-collapse:separate;border-spacing:1rem 0;}
.title_dlqr p {display:table-cell;vertical-align:bottom;text-align:center;}

.title_device {}

/*** benefits ***/
.benefits {display:table;width:100%;}
.benefits p {display:table-cell;background:radial-gradient(ellipse farthest-corner at bottom, #f90, #fc0);border-right:2px #fff solid;padding:2rem 0;color:#fff;font-weight:bold;text-shadow:1px 2px 4px #c90;text-align:center;line-height:3.5rem;}
.benefits p:last-child {border-right:none;}
.benefits i {display:block;}

/*** caption ***/
.caption {display:table;width:100%;}
.caption_tr {display:table-row;background:linear-gradient(to bottom, #fc9, white);}
.caption_tr div {display:table-cell;}
.caption_iphone,.caption_img {position:relative;}
.caption_iphone img,.caption_img img {position:absolute;bottom:0;left:0;right:0;margin:0 auto;width:200px;}
.caption_caption {width:40%;padding:2rem;height:175px;}
.caption_caption h2 {color:#f00;}

/*** lets ***/
.lets_01 {background:#f60;color:#fff;padding:1rem;text-align:center;}
.lets_02 {background:radial-gradient(ellipse farthest-corner at bottom, #f90, #fc0);padding:1rem;color:#fff;text-align:center;}
.lets_dlqr {display:table;border-collapse:separate;border-spacing:1rem 0;width:60%;margin:0 auto;}
.lets_dlqr p {display:table-cell;vertical-align:bottom;text-align:center;}
.lets_02 h3,.lets_03 h3 {font-size:1.0rem;font-weight:normal;}
.lets_03 {background:#fff;padding:1rem;text-align:center;}
.lets_03 h1 {font-size:4rem;font-weight:bold;}
.lets_03 h2 {font-size:2.5rem;}

/*** about,shop ***/
.about,.shop {text-align:center;padding:1.5rem;background-image:url(img/angel_left.png),url(img/angel_right.png);background-position:left,right;background-repeat:no-repeat;background-size:contain;}
.about_img img {width:50%;float:left;}

/*** shop ***/
.shop_img a {color:#fff;background:#f90;text-decoration:none;}
.shop_img a:hover {background:#f60;}
.shop_img div {padding:1rem;}
.shop_img_name {font-size:1.6rem;margin:0;}
.shop_img_name span {font-size:1.0rem;margin-right:0.5rem;padding:2px 8px;display:inline-block;vertical-align: middle;border:#fff solid 1px;border-radius:10px;}

/*** terms ***/
.switch,label {text-align:center;padding:.5rem;background:#f93;font-size:1.6rem;color:#fff;}

/*** footer ***/
footer {background:#000;color:#fff;font-size:1.4rem;text-align:center;padding:1rem;}

@media screen and ( min-width:415px ){
body {font-size:1.6em;}
h1 {font-size:2rem;}
h2 {font-size:1.8rem;}
h1 br,h2 br {display:none;}

/*** title ***/
.title_logo {float:left;width:60%;}
.title_device {float:right;width:40%;}
.title_dlqr {float:left;width:60%;}

/*** benefits ***/
.benefits p br {display:none;}

/*** lets ***/
.lets_01 {width:1000px;margin:0 auto;position:relative;}
.lets_01 img {position:absolute;bottom:-20px;left:0;z-index:-10;}

/*** shop ***/
.shop_img {width:990px;display:flex;flex-wrap:wrap;}
.shop_img a {width:320px;font-size:1.4rem;margin:0 10px 10px 0;}

/*** terms ***/
label {display:none;}
input{display:none;}
.terms {background:#fc3;font-size:1.0rem;padding:1.5rem;}

/*** footer ***/
footer br {display:none}
}

@media screen and (max-width : 414px ){
body {font-size:1.4em;}
header {margin-bottom:-15px;}
.all {width:100%;}

/*** title ***/
.title {background:url(img/title.jpg) no-repeat top -20px center;text-align:center;}
p.title_dlqr_qr {display:none;}

/*** benefits ***/
.benefits i {margin-bottom:1rem;}
.benefits p {line-height:1.8rem;padding:1rem 0;}

/*** caption ***/
.caption_iphone img {width:160px;}
.caption_caption {width:50%;padding:1rem;font-size:1.2rem;}
div.caption_img {display:none;}

/*** lets ***/
.lets_01 img {display:none;}
.lets_dlqr {width:100%;}
.lets_03 h1 {font-size:3rem;font-weight:bold;margin-bottom:-10px;}
.lets_03 h2 {font-size:2rem;}

/*** about ***/
.about p br,.shop p br {display:none;}
.about,.shop {background-size:30%;background-position:top left,bottom right;}
.about a,.shop a {font-size:1.2rem;}
.about_img img {width:100%;}

/*** shop ***/
.shop_img {width:100%;display:flex;flex-wrap:wrap;}
.shop_img a {width:50%;font-size:0.8rem;;background:linear-gradient(to bottom right, #f90 60%, #fc0);}
.shop_img a br {display:none}

.shop_img div {padding:0.5rem;}
.shop_img_name {font-size:1.0rem;}
.shop_img_name span {font-size:0.6rem;margin-right:0.5rem;padding:2px 6px;display:inline-block;vertical-align: middle;border:#fff solid 1px;border-radius:10px;}

/*** terms ***/
.switch {display:none;}
label {display:block;margin:0;cursor:pointer;font-size:1.2rem;}
input[type="checkbox"].bellows{display: none;}
input[type="checkbox"].bellows + .terms{height:0;overflow:hidden;padding:0;}
input[type="checkbox"].bellows:checked + .terms{height:auto;padding:1.5rem;}
.terms {background:#fc3;font-size:1.0rem;}

/*** footer ***/
footer {background:#fff;color:#000;font-size:1.2rem;}
}