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

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, ul, ol, li, dl, dt, dd, form, fieldset, input, textarea, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, hr, th, td { margin: 0; padding: 0; }
html { height: 100%;}
body,td,th { font-family:'Noto Sans Japanese', sans-serif; font-size: 16px; line-height: 180%;}
body { background-image: url(../img/bg.jpg); background-position: center; background-attachment: fixed; height: 100%; margin: 0;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #C72166; text-decoration: none;}
a:visited { color: #C72166;}
a:hover { color: #069; transition: all .3s;}
a:active { color: #09C;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}
.clearfix{ clear:both;}

header{ padding:3% 0; text-align:center;}
header img{ width:90%; max-width:1100px;}




h1 img{ position: absolute; width: 18%; max-width: 85px; top: 8px;}

.octagon2 { width: 92%; max-width:500px; height: 50px; position: relative; text-align: center; margin: 20px auto 0;}
.octagon2 span{ color:#000; position:relative; z-index:3; font-size:150%; font-weight:700; color:#FFF; line-height:2;}
.octagon2:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 25px solid #C72166; border-left: 20px solid rgba(238, 238, 238, 0); border-right: 20px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}
.octagon2:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 25px solid #C72166; border-left: 20px solid rgba(238, 238, 238, 0); border-right: 20px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}

.news { width: 100%; padding:30px 0 100px ; margin: 0 auto; text-align:center; }
.news h2{ padding-bottom:20px; color: #c72066;}
.news h4{ width:90%; margin:0 auto; font-weight:200; font-size:120%; }
.news .news_title{ margin: 25px auto 0px; display: inline-block; font-size: 260%; border-bottom: solid 1px #000; padding-bottom: 18px; font-weight: 100; line-height:1.3;}
.news ul{ list-style:none; max-width: 1100px; margin: 0 auto; width: 94%; padding-top:40px;　display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;}
.news li{ width: 11%; display:block; padding: 2.5%; margin: 5px; text-align:center; color:#333; float:left; background-color:#FFF; position:relative;}
.news li h3{ line-height:1.3; padding-bottom:15px; color:#C72166;}
.news span{ font-size:90%; color:#ef3d96;}
.new_mark{color: #fff; background-color: #c72066; border: 0 solid;}

.sale { width: 100%; background-color: rgba(255, 255, 255, 0.71); padding:30px 0 ; margin: 0 auto; text-align:center;}
.sale h2{ padding-bottom:20px; color: #c72066;}
.sale h4{ width:90%; margin:0 auto; font-weight:200; font-size:120%; }
.sale .news_title{ margin: 25px auto 50px; display: inline-block; font-size: 260%; border-bottom: solid 1px #000; padding-bottom: 18px; font-weight: 100; line-height:1.3;}
.sale ul{ list-style:none; max-width: 1100px; margin: 0 auto; width: 94%; display: flex; flex-wrap: wrap; padding-top:40px;}
.sale li{ width: 26.6%; display:block; padding: 2.5%; margin: 5px; background:url(../img/news_bg_bottom.jpg) no-repeat left bottom, url(../img/news_bg_top.gif) no-repeat left top; background-size:100%; min-height: 200px; text-align:left; color:#333; float:left; background-color:#FFF; position:relative;}
.sale li h3{ line-height:1.3; color:#C72166;}
.sale li h5{ padding-bottom:15px; font-weight: 200; font-size: 110%;}
.sale li .package{ text-align:center;}
.sale li .btn_get{ display: block; background: rgb(200,25,115);
background: linear-gradient(0deg, rgba(200,25,115,1) 0%, rgba(253,29,114,1) 50%, rgba(252,80,195,1) 100%); padding: 1.2% 5%; border-radius: 20px; margin: 20px auto 0; width: 87px; text-align: center; 
 border: solid 2px #ff99a6; color: #fff; text-shadow: 0 0 5px #000;}
.sale li a:hover .btn_get{ box-shadow: 0 0 8px #f560c0;}

.price{ font-size: 200%; color: #ffffff; font-weight: 700; text-align: center; line-height: 0.6; background-color: #ff0000; display: inline-block; padding: 4.9% 1% 0% 1%; border-radius: 50%; width: 70px; height: 60px; position: absolute; right: 6%; top: 60%;}
.price span{ font-size:60%; color: #ffffff; }


footer{ text-align:center; background-color: rgba(255, 255, 255, 0.71); padding:30px 0; font-size:90%;}
.footer_link a{ text-decoration:none; color:#000; padding:0 5px;}
.footer_link a:hover{ color:#c72066;}
.footer_link{ padding:20px 0; color:#000;}
.footer_copy{ color:#000; font-size:85%;}


@media screen and (min-width: 640px) {
	
body,td,th { font-size: 15px; line-height: 180%;}

.hidesp { display:none;}
.sale li .package img{ max-height:280px;}

.lede { margin: 5%; width: 90%; max-width: 1000px; text-align: left;}
	
}



@media screen and (max-width: 639px) {
	
body,td,th { font-size: 11px; line-height: 150%;}
	
.hidepc { display:none;}
.news li{ width: 86%; padding:6%;}
.sale li{ width: 86%; padding:6%;}
.sale h4{ text-align:left;}
	
.lede { margin: 5%; width: 90%; max-width: 1000px; text-align: left;}

.octagon2 span{ font-size:100%; line-height:3;}
.octagon2:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 25px solid #C72166; border-left: 15px solid rgba(238, 238, 238, 0); border-right: 15px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}
.octagon2:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 25px solid #C72166; border-left: 15px solid rgba(238, 238, 238, 0); border-right: 15px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}
}