@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
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; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:18px;
text-align:left;
color:#333;
min-width:750px;
}
#wrapper{ width: 750px; margin: 0 auto; box-shadow:rgba(0, 0, 0, 0.1) 0 0 10px 5px;}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*ヘッダー*/
#header{ background: url("../images/mv_bg.jpg") center top no-repeat; border-top: 8px solid #e74b87; border-bottom: 8px solid #ee7da8; padding: 190px 0 60px; text-align: center; position: relative;}
#header span.ico{ position: absolute; top: 44px; right: 55px;}
#header h1{ margin-bottom: 10px;}
#header ul{ margin-top: 40px;}
#header ul li{ margin-top: 10px;}

/*フッター*/
#footer{ padding-bottom: 115px}
p.copyright{ text-align:center; margin:40px auto; font-size:20px;}
#fixed{ position: fixed; left: 0; right: 0; bottom: 0; margin: auto; width: 750px;}
#fixed ul{ background: #ffd0e0; padding: 20px; letter-spacing: -1em; text-align: center;}
#fixed ul li{ display: inline-block; vertical-align: top; letter-spacing: 0; margin:0 10px;}

/*メイン*/
#content{ overflow:hidden;}
section { width:100%; background:#fff; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:690px;}

/*point*/
#recom{ background: url("../images/recom_bg.png"); overflow: hidden;}
#recom_tit{ text-align: center; background: #fff; padding: 50px 0;}
#recom_tit h2{ margin-bottom: 30px; position: relative;}
#recom_tit h2:before{ content: ""; width: 73px; height: 101px; background: url("../images/recom_tit_ico.png"); background-size: cover; position: absolute; left: 90px; top: -10px;}
#recom_tit h2:after{ content: ""; width: 73px; height: 101px; background: url("../images/recom_tit_ico.png"); background-size: cover; position: absolute; right: 90px; top: -10px;}
#recom ul li{ margin: 20px auto; background: #fceee2; border-radius: 20px; padding: 30px; text-align: center;position: relative;}
#recom ul li span.ico{ position: absolute;}
#recom ul li.point01 span.ico{ top: 25px; right: 30px;}
#recom ul li.point02 span.ico{ top: 25px; left: 50px;}
#recom ul li.point03 span.ico{ top: 40px; right: 40px;}
#recom ul li h3{ margin-bottom: 20px;}

/*premium*/
#premium{ background: #e95585; padding: 40px 0;}
#premium .maincontent{ background: #fff; border-radius: 20px; padding: 30px 0 45px; text-align: center;}
#premium h2{ margin-bottom: 30px;}
#premium h2 span{ display: block; margin-bottom: 30px;}
#premium ul{ letter-spacing: -1em;}
#premium ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 10px;}

/*movie*/
#movie{ padding: 50px 0 75px;}
/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}