@charset "utf-8";
/* CSS Document */


/*
【ユーザー編集用のスタイルシート】
背景色や文字色など、デザインの変更には、
こちらのスタイルシートを使って調整してください。
*/


/*=============================================

背景色

=============================================*/
/*全体の背景色*/
body {
	background-color: #fff;/*背景色*/
}

/*本文の背景色*/
#main {
	background-color: #fff;/*背景色*/
}


/*=============================================

見出し（文字色・線色）

=============================================*/
h2 {
	color: #fff;/*文字色*/
	background-color: #434343;/*背景色*/
}

h3 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}

h4 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}

h5 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}

h6 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}


/*=============================================

ブレット

=============================================*/
/*ブレット付き見出し*/
h3.brt-title {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}


/*=============================================

テーブル

=============================================*/
/*テーブル ヘッド項目*/
thead th {
    color: #fff;/*文字色*/
    background-color: #434343;/*背景色*/
}

/*テーブル メニュー項目*/
tbody th {
	color: #000;/*文字色*/
    background-color: #ebf3fb;/*背景色*/
}


/*=============================================

囲み枠

=============================================*/
.border {
	border-color: #434343;/*線色*/
}

/*見出し*/
.border h3 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}


/*=============================================

特典用 囲み枠

=============================================*/
.border-benefit {
	border-color: #434343;/*線色*/
}

/*見出し*/
.border-benefit h3 {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}


/*=============================================

メルマガ登録・商品購入 囲み枠

=============================================*/
.border-apply {
	border-color: #434343;/*線色*/
}

/*見出し*/
h3.apply-title {
	color: #000;/*文字色*/
	border-color: #434343;/*線色*/
}

/*メルマガ登録==========================*/
/*確認ボタン*/
.opt-in-form .submit input {
	background-color: #00c104;/*ボタン色*/
	border-bottom: 5px solid #007502;/*ボタン陰影色*/
}

/*確認ボタン：マウスホバー時*/
.opt-in-form .submit input:hover {
	background: #00de05;/*ボタン色*/
}

/*商品購入==========================*/
/*値段*/
p.price {
    color: #FF0004;/*文字色*/
}

/*購入ボタン*/
.service-buy a {
	background-color: #00c104;/*ボタン色*/
	border-bottom: 5px solid #007502;/*ボタン陰影色*/
}

/*購入ボタン：マウスホバー時*/
.service-buy a:hover {
	background: #00de05;/*ボタン色*/
}




/*オレンジメールカスタムデザイン*/

.MF-cntr {
    border-radius: 3px;
    background:#fff;　/*背景の色*/
    width: auto ;
    border-top:2px solid #1e4164;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
    display: block;
    flex-direction: column;
    overflow: hidden;
    height: auto ;
    margin:10px;
}

.MF-inr{
    margin:50px 0;
}

.MF-itm{

display:flex;
justify-content: center;
margin-top:30px;
}

.MF-itm-name{
text-align: center;
}


.MF-fld[type='text'],.MF-fld[type='email']  {
    width:400px;
    height:50px;
    border:1px solid #aaa;
    background-color:#e3f4f9; /*入力欄内側の色*/
    border-radius: 5px;
}

.MF-btn {
    border: solid 1px #e1e3e6; /*ボタンの枠の色*/
    background-color: #1DA1F2 !important; /*ボタンの色*/
    color: #fff; /*ボタン内の文字の色*/
    font-size: large;
    font-style: bold;
    border-radius: 5px;
    width: 400px;
    height:80px;
    display:block;
    margin:20px auto;
}
.MF-btn :hover{
    background: linear-gradient(135deg, #407088, #132743, #407088);
    transition: .2s ease-in-out;
    font-size:15pt;
}
.MF-btn	:active {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
.MF-title {
     display:block;
	text-align:center;
	font-size:14pt;
	font-weight:600;
}

.MF-p{
    text-align: center;
margin:30px auto;
font-size:medium;
}
.MF-itm-name-space{
    margin-right:30px;
}


@media only screen and ( max-width:480px){    
    .MF-fld[type='text'],.MF-fld[type='email']  {
  width:300px;
    }


    .MF-itm-name{

        display:block;
       margin:0 auto;
        }

        .MF-itm-name-space{
            margin-right:0px;
        }

}


@media only screen and ( max-width:900px){
  .MF-fld[type='text'],.MF-fld[type='email']  {
  width:300px;
}

.MF-itm-name{

    display:block;
   margin:0 auto;
    }

    .MF-itm-name-space{
        margin-right:0px;
    }
}