@charset "utf-8";

/* 基本設定 */
html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}

/*----------画像センタリング----------*/
.img-center {display: block; margin: 10px auto;}
.text-center {text-align: center;}

/*----------ページ最上部h1----------*/
h1 {
  color: #fff;
  font-size: 80%;
  line-height: 1;
  margin: 0;
  padding: 3px 10px;
  font-weight: normal;
  text-align: right;
}

/*----------背景色指定（h1、見出し背景など）----------*/
.bg-red {background: #c60000;} /*--赤--*/
.bg-blue {background: #00468b;} /*--青--*/
.bg-green {background: #00782d;} /*--緑--*/
.bg-orange {background: #fe7816;} /*--オレンジ--*/
.bg-gold {background: #807109;} /*--ゴールド--*/
.bg-black {background: #222;} /*--黒--*/

/*----------ヘッダー共通----------*/
#header {
  margin: 0 auto;
  padding: 0 1%;
  padding: 0px;
}

.sh {
max-width: 720px;
margin: 30px auto;
padding: 50px 0;
color: #c40000;
font-size: 2em !important;
font-weight: normal;
line-height: 1.3 !important;
text-align: center;
clear: both;
border-top: 3px dotted #ccc;
border-bottom: 3px dotted #ccc;
}

.header {
max-width: 720px;
margin: 30px auto;
padding: 10px 0;
font-size: 1.6em;
font-weight: normal;
line-height: 1.25;
clear: both;
}

/*----------ヘッダー、フッター背景色指定----------*/
#header.blue, #foot.blue {background: #d9e7f1;} /*--青--*/
#header.green, #foot.green {background: #a6e9bf;} /*--緑--*/
#header.pink, #foot.pink {background: #ffb0b3;} /*--ピンク--*/
#header.yellow, #foot.yellow {background: #ffcc00;} /*--黄--*/
#header.bage, #foot.bage {background: #faebd7;} /*--ベージュ--*/

/*----------ヘッダー背景画像指定----------*/
#header.photo {color: #fff;}

/*----------ヘッダーキャッチコピー----------*/
#header h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 2em;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.3em;
}

/*----------ヘッダーテキスト----------*/
#header p {
  max-width: 800px;
  padding: 0 1%;
  margin: 0 auto;
}

.head {margin-bottom: 50px;}
.head img {margin: 20px auto;}

.main {padding: 30px 0;}

#logo {
text-align: center;
border-bottom: 1px solid #a69671;
margin: 0;
padding: 1px 0;
background: #a39f93;
}

.logo {
max-width: 300px;
padding: 0;
}

.container {
max-width: 940px;
clear: both;
padding: 0 3%;
margin: 0 2%;
position: relative;
}

.container p {
max-width: 96%;
font-size: 1.2em;
line-height: 1.5;
margin-top: 0;
margin-right: auto;
margin-bottom: 1.5em;
margin-left: auto;
text-align:justify;
}


.arrow::before{
margin: 30px auto -50px;
content: '';
display: block;
box-sizing: border-box;
width: 55px;
height: 55px;
border: 1px solid #999996;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.arrow::after{
margin: 0 auto;
content: '';
display: block;
left: 50%;
width: 30px;
height: 30px;
border-bottom: 1px solid #999996;
border-right: 1px solid #999996;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.sp {display: block;}
.pc {display: none;}

@media screen and (min-width: 768px) {
.sp {display: none;}
.pc {display: block;}
.logo {padding: 10px 0;}
.container {
padding: 30px 20px 50px;
margin: 0 auto;
}
.container p {
max-width: 720px;
font-size: 1.2em;
line-height: 1.75;
margin-top: 0;
margin-right: auto;
margin-bottom: 2em;
margin-left: auto;
text-align:justify;
}

}

.pp p {margin: 10px 0 0;font-size: 10pt;}

.bullet {
    max-width: 700px;
    margin: 30px auto;
    padding: 0px;
    text-align: center;
    border: 5px solid #c3bfae;
    text-align: left;
    font-size: 100%;
    line-height: 1.5;
}

/*----------H3見出しスタイル----------*/
.check, p.check {
background: url(../img/check.png) no-repeat left;
padding: 10px 0 10px 45px;
margin: 0 auto;
line-height: 1.25;
font-size: 1.4em;
}

.square, p.square {
margin: 30px auto;
padding: 10px 0 10px 15px;
font-size: 1.4em;
line-height: 1;
border-left: 40px solid 
}

.label, p.label {
margin: 30px auto;
padding: 10px 0 10px 20px;
font-size: 1.4em;
line-height: 1.5;
background: #fff;
-webkit-box-shadow: 0 0 10px 0 #eee;
box-shadow: 0 0 10px 0 #eee;
border-left: 10px solid 
}

/*----------フッター共通----------*/
#footer {
text-align: center;
padding: 20px 0;
margin: 0 auto;
color: #5b5850;
font-size: 90%;
}

#footer a {color: #63625c;}
#footer div {margin-bottom: 10px; color: #63625c;}

/*----------テキスト装飾----------*/
.white {color: #fff;} /*---太字色 白---*/
.red {color: #c60000;} /*---太字色 赤---*/
.blue {color: #004986;} /*---太字色 青---*/
.green {color: #608c01;} /*---太字色 緑---*/
.orange {color: #eb7a00;} /*---太字色 オレンジ---*/

.b {font-weight: bold;} /*---太字---*/
.bb {font-weight: bold;font-size: 1.2em;} /*---太字大---*/
.line {background: #fce89a;} /*---マーカー---*/
.u {border-bottom: 1px solid;} /*---下線---*/

/*----------見出し共通----------*/
[class*="header-"] {
  padding: 10px 20px;
  color: #fff;
  text-align: center;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/*----------見出し背景----------*/
.header-red {background: #c60000;} /*--赤--*/
.header-blue {background: #004986;} /*--青--*/
.header-green {background: #608c01;} /*--緑--*/
.header-orange {background: #eb7a00;} /*--オレンジ--*/
.header-gold {background: #949061;} /*--ゴールド--*/

/*----------左寄せ、右寄せ----------*/
.pull-left {float:left; margin-right: 15px; margin-bottom: 15px;}
.pull-right {float:right; margin-left: 15px; margin-bottom: 15px;}

/*----------ボタン----------*/
.order {
display: block;
max-width: 96%;
padding: 5px 10px;
text-align: center;
color: #fff;
margin: 50px auto;
-webkit-border-radius: 12px;
border-radius: 12px;
background: #638c0b;
-webkit-box-shadow: 5px 0 15px 0 #C7C7C7;
box-shadow: 5px 0 15px 0 #C7C7C7;
}

.order a {
display: block;
width: 100%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 20px;
border: 2px solid #fff;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #cc0000;
}

.order:hover, .order a:hover {background: #ff9900;}


@media screen and (min-width: 768px) {
.order {max-width: 70%;}
}

p.cap {text-align: center; font-size: 12pt; color: #666;}


#mediaplayerres {
position: relative;
height: 0;
padding: 30px 0 55%;
overflow: hidden;
}
#mediaplayerres iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

div#movie, div#movie2 {
max-width: 680px;
margin: 0px auto;
min-height: 402px;
}

object {
margin: 20px auto 0px;
width: 100%;
max-width: 400px;
display: block;
}


@-webkit-keyframes 'fadeIn' {
0% {
opacity:0;
}
100% {
opacity:1;
}
}

img.fadeIn {
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}

.txt-center {
text-align: center !important;
}

.small {
    font-size: 100% !important;
}

.date {
margin: 50px auto 0;
padding: 15px 0;
font-size: 1.6em;
text-align: center;
color: #fff;
background: #c40000;
clear: both;
}

.date span {
border-bottom: 1px solid;
}

.tt1:before {
content: '特典1';
display: inline-block;
background: #c40000;
color: #fff;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 1em;
float: left;
margin: -35px 10px 0 0;
border-radius: 50px;
}

.tt2:before {
content: '特典2';
display: inline-block;
background: #c40000;
color: #fff;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 1em;
float: left;
margin: -35px 10px 0 0;
border-radius: 50px;
}

ol {
margin: 15px 30px;
font-size: 1.4em;
}

@media screen and (min-width: 768px){
[class*="box"] {
    padding: 30px;
}
}

[class*="box"] {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    font-size: 110%;
    text-align: left;
    border: none;
}

.clear {
    clear: both;
}