/* ----------------------
 レスポンシブ
-------------------------*/
.ie #wrapper{
 z-index: 0;
 width:expression(this.width >= 1000? "1000px" : "auto");
}

@media screen and (min-width: 1000px) {
#wrapper{
 width: 100%;
 margin: 0 auto;
}

#contents {
 width: 100%;
}
}/*  */

.bn_box{
 width: 100%;
}
#thanks #contents{
 height: auto;
}
/*-----------------
 PCまで基本
--------------------*/
@media screen and (min-width: 699px) {
body{
 margin: 0;
 padding: 0;
}
body.home{
 
}
#wrapper{
 height: 100%;
}
#contents{
 height: 100%;
 width: 100%;
 padding-bottom: 50px;
}
#contents p{
 line-height: 1.8;
}

.main .inner{
 max-width: 1100px;
 margin-left: auto;
 margin-right: auto;
}
#header{
}
#main{
}
.pc_none{
 display: none;
}
/* -----------------------
 PC
 ------------------------- */
body,html{  
height: 100%; 
}
#header h1{
 padding: 20px;
}
.btn_buy_2{
 position: absolute;
left: 50%;
width: 80%;
top: 43%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
- moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
#header .img{
 width: 100%;
 float: left;
 line-height: 0.9;
}

.group_6 ul,
.group_5 ul,
.group_4 ul,
.group_3 ul,
.group_2 ul,
.group_1 ul{
 max-width: 1100px;
 margin:70px auto;
}
.group_1 li.left{
 float: left;
 width: 49%;
}
.group_1 li.right{
 width: 49%;
 float: right;
}
.group_2 li.left{
 float: left;
 width: 60%;
}
.group_2 li.right{
 width: 38%;
 float: right;
}
.group_3 li.left{
 float: left;
 width: 38%;
}
.group_3 li.right{
 width: 60%;
 float: right;
}
.group_2{
 background: url(../images/bg-1.jpg) repeat;
 padding: 40px 0;
 position: relative;
}
.group_2 .sub_t{
 position: absolute;
 top: -38px;
 left: 15%;
}

.main h2{
 text-align: center;
 margin-bottom: 30px;
}
.group_4 li.left{
 float: left;
 width: 48%;
 text-align: right; 
}
.group_4 li.right{
 width: 48%;
 float: right;
}
.group_5{
 background: url(../images/bg-1.jpg) repeat;
 padding: 50px 0;
 margin-bottom: 50px;
}
.group_7{
 background: url(../images/g7-bg.png) no-repeat center 40px;
 background-size: auto 100%;
 padding: 0 0 70px 0;
 margin-bottom: 50px;
}
.group_7 ul{
 max-width: 1100px;
 margin:50px auto;
}
.group_7 li.left{
 width: 49%;
 text-align: left;
 padding-left: 5%; 
}
.group_8{
 padding: 70px 0;
 background: url(../images/g8-bg.png) no-repeat right bottom;
 background-size: auto 100%;
}
.group_8 .inner{
 max-width: 1100px;
 margin-left: auto;
 margin-right: auto;
}
.group_9{
 margin-bottom: 50px;
}
.group_9 .text{
 margin-top: 10px;
}
.btn_buy{
 text-align: center;
 margin-bottom: 70px;
 margin-left: auto;
 margin-right: auto;
 margin-top: -40px;
}

.group_10{
 position: relative;
}
.group_10 .bg_box{
 background: url(../images/bg-1.jpg) repeat;
 padding:15% 0 80px 0;
}

.group_10 h2{
 position: absolute; 
 top: 45px;
 left: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
- moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}

.group_11{
 padding: 70px 0;
 background: url(../images/g11-bg.png) no-repeat center bottom;
 background-size: cover;
}
.group_12{
 padding: 35% 0 60px 0;
 background: url(../images/g12-bg.png) no-repeat center top;
 background-size: cover;
}
.group_13{
 padding: 70px 0;

}
.group_13 .size{
 margin-bottom: 70px;

}
}/*PCコンテンツ内 end */

.copy{
 text-align: center;
 padding: 20px 0;
 background-color: #ff7bac;
 color: #fff;
 font-size: 80%; 
}


/* ----------------------
 スマホ時スタイル
------------------------- */
@media screen and (max-width: 698px) {/* 以下 */
body{
 margin: 0;
 padding: 0;
}
#wrapper{
 width: 100%;
 margin: 0 auto;
}
#contents {
 width: 100%;
 margin: 0 auto;
}
#contents p{
 line-height: 1.7;
}
#header {
 display: table;
 text-align: center;
 width: 100%;
 position: relative;
}
#main{
 float: none;
 display: block;
 margin: 0 auto 15px auto;
 width: 100%;
}
/* boxセンター寄せ */
.t_center{
 text-align: center;
}
/* スマホ時隠す */
.sp_none{
 display: none !important;
}
#header h1{
 padding: 20px;
 text-align: center;
}
.group_1{
 margin: 20px 0;
}
.group_2 li{
 text-align: center; 
}
.group_2 li.left{
 background: url(../images/bg-1.jpg) repeat;
}
.group_2 li.right{
 margin-top: -30px;
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
}
.group_3 li{
 text-align: center;
 margin-bottom: 20px;
}

.group_4{
 padding: 40px 0;
}
.group_4 li{
 margin: 20px 0;
}
.group_5{
 padding: 50px 0;
 background: url(../images/bg-1.jpg) repeat;
}
.group_6 h2,
.group_5 h2{
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 30px;
}
.group_6 .t_center{
 margin-bottom: 20px;
}
.group_7{
 margin-bottom: 20px;
}
.group_6{
 padding: 40px 0;
 text-align: center;
}
.group_10,
.group_9{
 padding: 30px 0;
 text-align: center;
}
.group_9 .title{
 margin-bottom: 15px;
}
.group_10 .btn_buy{
 margin-top: 30px;
}
.group_13 h2,
.group_10 h2,
.group_8 h2{
 text-align: center;
 margin-bottom: 20px;
}
.group_10{
  background: url(../images/bg-1.jpg) repeat;
}
.group_11{
 margin-bottom: -2%; 
}
.group_13{
 padding: 30px 0;
}
.group_13 .size{
 margin-bottom: 40px;
}
.group_13 h2{
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
}
.btn_buy{
 max-width: 80%;
 margin:-25px auto 30px auto;
}
.btn_buy_2{
 position: absolute;
left: 50%;
width: 80%;
top: 41%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
- moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
#header .img{
 width: 100%;
 float: left;
 line-height: 0.9;
}
}/* sp_end */


@media screen and (max-width: 500px) {/* ページ設定500以下 */

/* 投稿画像センター寄せ */
.img-center,
.center-img{
 float: none !important;
 display: table !important;
 margin-left: auto !important;
 margin-right: auto !important;
 margin-bottom: 10px !important;
 clear: both;
}

.t_left{
 float: left;
 text-align: left !important;
}
}
@media screen and (max-width: 400px) {/* 400以下 */
body{
 line-height: 150%;
}
#contents{
 font-size: 90%;
}
}