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

/*maincolor:#fe5d9b; subcolor:#ff87b5;*/

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/

*{box-sizing:border-box;}
body{font-size:16px;color:#524636;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 500;}
body,figure,figucaption{margin:0;padding:0;line-height: 1.6em}
ul,li{list-style:none}
a{text-decoration:none;color:#e74adc;}
a:hover{text-decoration:none;color:#6b5dba;}
a:hover img{opacity:.7}
h1,h2{margin:0;padding:0;}
h2.none{display: none}
img{vertical-align: middle;}

div.text{margin:2em 1em;padding:0;text-align:left;}

/*外枠*/
#container{margin:0 auto;padding:0;text-align:center;width:100%;}

/*header*/
header{margin:0 auto;padding:0;max-width:750px;width:100%;position: relative;}
header h1{position: absolute;margin: auto;top: 0.3em;left: 0;right: 0;}
header h1 img{width:60%;}
header img{width:100%;}

@media screen and (max-width: 749px) {
header h1 img{width:80%;}
}

/*コンテンツ始まり
-------------------*/
main{margin:0 auto;padding: 0 0 2em;text-align: center;width: 100%;max-width:750px;}

/*本当に当たるオススメ占いサイト
-------------------*/
#recommend{margin:0 0 3em}
#recommend h2{margin: 1em 0;color:#524636;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";letter-spacing: 0.1em;}
#recommend h2::before{content:url("img/h2_icon01.jpg");display: block;}
#recommend h2 span{color:#fdaccb;font-size: 0.2em;display: block;letter-spacing: 0.5em;}

#recommend ul{margin:0 auto;padding:0;}
#recommend ul li{margin:0 auto 1em;padding:0;border:3px solid #ffa2c6;background: #ffedf4 url("img/recommend_bg.png") no-repeat top center;position: relative;text-align: left;}
#recommend ul li div.rank_img{position: absolute;top: -0.5em;left: 1em;}
#recommend ul li div.star{margin: 0.5em 0 0;background: #fe5d9b;color: #fff;padding: 0.5em;font-weight: bold;border-radius: 10px;font-size: 1.2em;display: inline-flex;align-items: center;}
#recommend ul li div.star i{margin-left: 0.2em;color: #ffe823;}
#recommend ul li div.star span.evaluation01{margin-left: 0.5em;}
#recommend ul li div.star span.evaluation02{margin-left: 0.3em;color: #ffe823;font-size: 2em;}
#recommend ul li h3{margin: 0.5em 0 0 0;font-size: 1.5em;}
#recommend ul li div.text{margin: 1em 0 0 0;}
#recommend ul li a{background: #ff87b5;display: block;color: #fff;text-align: center;border-radius: 10px;font-size: 1.2em;font-weight: bold;padding: 0.5em;margin: 1em 0 0 0;}
#recommend ul li a:hover{background: #6b5dba;}
#recommend figcaption{margin:1em;}

@media screen and (max-width: 749px) {
#recommend{margin:0 1em 3em;padding:0;}
#recommend h2{font-size: 1.2em;}
#recommend h2 span{font-size: 0.5em;}

#recommend ul li div.rank_img img{width: 65%;}
#recommend ul li h3{font-size: 1.2em;}
#recommend ul li div.star{margin: 1em 0 0 0;width: 100%;justify-content: center;font-size: 1em;}

#recommend figure img{width:100%;}
}

/*初心者ガイド
-------------------*/
#beginner{margin:0 0 3em;}
#beginner h2{margin: 1em 0;color:#524636;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";letter-spacing: 0.1em;}
#beginner h2::before{content:url("img/h2_icon02.jpg");display: block;}
#beginner h2 span{color:#fdaccb;font-size: 0.2em;display: block;letter-spacing: 0.5em;}

#beginner ul{margin:0 auto;padding:0;display: flex;justify-content: space-between;}
#beginner ul li{text-align: left;width:360px;}
#beginner ul li h3{margin:1em 0 0.5em;}
#beginner ul li img{width:100%;}

@media screen and (max-width: 749px) {
#beginner{margin:0;}
#beginner ul{margin:0 1em;flex-wrap: wrap;}
#beginner ul li{width:100%;}
#beginner ul li:first-child{margin:0 0 2em;}
}










/*footer
-------------------*/
footer{margin:0 auto;padding:2em 0;text-align: center;border-top:3px solid #ffa2c6;width: 100%;}
footer img{width: 50%;max-width:236px;}

@media screen and (max-width: 749px) {
footer{padding:1em 0;}
}