@charset "UTF-8";

/* 初期設定リセット */
*{margin: 0;padding: 0}

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

body {
overflow-x: hidden;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
color: #362e2b;
}

/*----------画像センタリング----------*/
.img-center {display: block; margin: 10px auto;}
.text-center {text-align: center !important;}
.img-responsive{
display:block;
max-width:100% !important;
height:auto
}

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

hr {border:none;display:block;height:50px;}

/*----------ヘッダー共通----------*/

#header {
margin: 0 auto;
padding: 30px 1% 0;
background:#7cece3;
height: 960px;
z-index: -1 !important;
}

.hand {padding: 20px 0 0;}

@media screen and (max-width: 640px) {
#header {
margin: 0 auto;
padding: 30px 1% 30px;
background: #7cece3;
z-index: -1 !important;
height: auto;
}
.hand {padding: 20px 75px 0;}
}

.container {
max-width: 840px;
margin: 0 auto;
}

.logo {
width: 100%;
padding: 0;
}

.logo img {max-width: 80px;}

.tshrow {
max-width: 100%;
overflow: hidden;
position: relative;
padding-top: 50px;
margin-top: -50px;
background: #7cece3;
}

.tsh {
background: #fff;
margin: 0;
padding: 30px 0 50px;
text-align: center;
}

.tsh img {margin: 0 auto;}

.tsh:before {
content: '';
display: block;
width: 55%;
height: 50px;
background: #fff;
position: absolute;
top: 0;
left: -5.5%;
border-radius: 0 50px 0 0;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}

.tsh:after {
content: '';
display: block;
width: 55%;
height: 50px;
background: #fff;
position: absolute;
top: 0;
right: -5.5%;
border-radius: 50px 0 0 0;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}

.sh, .container p.sh {
margin: 30px auto;
padding: 30px 10px;
color: #c40000;
font-size: 1.4em;
font-weight: normal;
line-height: 1.5;
text-align: center;
clear: both;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
border-top: 3px dotted #ddd;
border-bottom: 3px dotted #ddd;
}

@media screen and (max-width: 640px) {
.sh br, p br {
display: none;
width: 0;
}
}

.container p.header {
margin: 30px auto;
padding: 15px;
color: #c40000;
font-size: 1.2em;
line-height: 1.25;
text-align: center;
clear: both;
background: #362e2b;
color: #fff;
border-radius: 30px;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}

.box .header,
.box3 .header {margin: 30px;background: #c40000;}

.box2 .header {
margin: 30px;
padding: 10px;
background: none;

}

/*----------ヘッダー、フッター背景色指定----------*/
#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: #fa39f93;
}

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

.sh span, .sh2 span {display: block;}
.sh img, .sh2 img {display: block;}

.pd10 {padding: 10px 0;}

p.right {text-align: right !important;}

.b01 {border-bottom: 1px dotted #ddd;}

@media screen and (min-width: 768px) {
.banner {
margin: 0 auto;
padding: 0 1%;
padding: 30px 0 50px;
}
.sp {display: none;}
.pc {display: block;}

.sh, .container p.sh {
margin: 70px auto;
padding: 50px 10px;
font-size: 2em;
}
.sh span, .sh2 span {display: none;}
.sh img, .sh2 img {display: block;}

.logo {padding: 5px 0 ;}
.logo img {max-width: 110px;}

}

.container p {
max-width: 700px;
font-size: 1.2em;
line-height: 1.75;
margin: 0 auto 1.2em;
text-align:justify;
color: #333;
}

@media screen and (max-width: 767px) {
.container p {
max-width: 700px;
font-size: 1.2em;
line-height: 1.75;
margin: 0 20px 1.2em;
text-align:justify;
color: #333;
}

.box2 .header {
    margin: 30px 0;
}

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

.boxt p {
    clear: both;
}

.boxt img {
    margin: auto;
}

.boxt .pull-right {
    float: none;
}

 [class*="fx-col-"] {
max-width: 100% !important;
}

}


.container ul {
max-width: 640px;
margin: 0 auto;
}

[class*="box"] {
max-width: 800px;
margin: 30px auto;
padding: 10px 20px 10px;
text-align: center;
border: 5px solid #ccc;
text-align: left;
}

.box {border-color:#f5f5f5;}
.box2 {border-color:#7cece3;}
.box3 {border-color:#638c0b}

[class*="box"] p {
max-width: 640px;
margin: 0 auto 20px;
}

.s {
margin-top: -10px;
font-size:1em;
padding-left: 45px;;
}

 [class*="fx-col-"] {
padding: 15px;
height: auto;
margin: 10px auto;
max-width: 85%;
}

 [class*="book"] p {
line-height: 1.2;
font-size: 96%;
}


/*----------H3見出しスタイル----------*/
.check {
background: url(../img/check.png) no-repeat left;
padding: 10px 0 10px 45px;
line-height: 1.25;
font-size: 20px !important;
font-weight: bold;
margin-bottom: 0.2em !important;
}

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

.label {
margin: 30px 0;
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: #5b5850;}

#foot p {max-width: 1000px;margin: 16px auto 0;}


/*----------テキスト装飾----------*/
.white {color: #fff;}
.red {color: #c60000;}
.blue {color: #00468b;}
.green {color: #00782d;}
.orange {color: #fe7816;}
.gold {color: #807109;}

.b {
font-weight: bold;
font-size: 1.2em;
}

.bb {
font-weight: bold;
font-size: 1.4em;
}

.line {background: #fce89a;}
.u {border-bottom: 1px solid;}

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

/*----------見出し背景----------*/
.header-red {background: #c60000;}
.header-blue {background: #00468b;}
.header-green {background: #00782d;}
.header-orange {background: #fe7816;}
.header-gold {background: #807109;}

/*----------コンテンツ枠線共通----------*/
[class*="border-"] {
padding: 10px 30px;
margin-bottom: 30px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

/*----------コンテンツ枠線スタイル----------*/
.border-blue {border: 5px solid #d9e7f1;} /*--青--*/
.border-green {border: 5px solid #a6e9bf;} /*--緑--*/
.border-pink {border: 5px solid #ffb0b3;} /*--ピンク--*/
.border-yellow {border: 5px solid #ffcc00;} /*--黄--*/
.border-bage {border: 5px solid #faebd7;} /*--ベージュ--*/

/*----------コンテンツ枠 破線スタイル----------*/
.border-blue-dot {border: 5px dotted #d9e7f1;} /*--青--*/
.border-green-dot {border: 5px dotted #a6e9bf;} /*--緑--*/
.border-pink-dot {border: 5px dotted #ffb0b3;} /*--ピンク--*/
.border-yellow-dot {border: 5px dotted #ffcc00;} /*--黄--*/
.border-bage-dot {border: 5px dotted #faebd7;} /*--ベージュ--*/

/*----------コンテンツ枠シャドウスタイル----------*/
.shadow
{
padding: 10px 40px;
margin-bottom: 30px;
background: #fff;
-webkit-box-shadow: 0 0 30px 0 #eee;
box-shadow: 0 0 30px 0 #eee;
}

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

.order {
width: auto;
margin: 0 auto 50px;
text-align: center;
}

.cap {
max-width: 700px;
text-align: right;
font-size: 9pt;
color: #999;
margin: -30px auto 0;}


@-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: 1.1em !important;
}

table {
margin: 30px auto;
width: 96%;
border: 1px solid #eee;
}

th, td {
padding: 10px;
font-size: 1.2em;
border: 1px solid #eee;
}

th {
font-weight: normal;
background: #f5f5f5;
text-align: center;
}
td {
text-align: left;
background: #fff;
}

.qaq {
max-width: 740px;
font-size: 1.4em;
font-weight: bold;
margin: 20px auto 10px;
min-height: 70px;
padding-top: 20px;
padding-left: 80px;
background: url(../img/q.png) no-repeat 5px;
}

.qaa {
max-width: 740px;
min-height: 100px;
margin: 10px auto 50px;
padding: 30px 10px 20px 80px;
background: url(../img/a.png) no-repeat 5px;
border-bottom: 3px dotted #eee;
}

.qaa p {margin: 0;}

.voice {
max-width: 720px;
margin: 30px auto;
padding: 10px;
text-align: left;
background: #f5f5f5;
border-radius: 5px;
}

.vinner p {
margin: 0 auto 1em;
}

.vheader {
text-align: center;
font-size: 1.4em;
font-weight: bold;
margin: 0 auto;
padding: 20px 0;
max-width: 880px;
color: #c60000;
}

.vinner img {
max-width: 150px;
padding-top: 30px;
padding-left: 15px;
}

.small {font-size:90% !important}
p.t-title {font-size: 150%;}

ul {
list-style: none;
list-style-position: inside;
padding: 10px 20px;
}
li {font-size:120% !important;}

.ngphoto {
max-width: 720px;
margin: 0 auto 30px;
}

.ngphoto div {padding: 5px;}

.okphoto {
max-width: 700px;
margin: 0 auto 30px;
text-align: center;
}

.okphoto img {margin: 0 auto 30px;}

.beforeafter {
max-width: 720px;
margin: 0 auto 50px;
}

.beforeafter div {position: relative;}
.beforeafter .bg-red, .beforeafter .bg-green {
padding: 5px;
font-size: 120%;
}

.arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 35px 0 35px;
border-color: #ddd transparent transparent transparent;
margin: 30px auto;
}
.arrow span {display: none;}

.arrow-right {
width: 0;
height: 0;
border-style: solid;
border-width: 35px 0 35px 40px;
border-color: transparent transparent transparent #ddd;
margin: 0 auto;
position: absolute;
top: 80px;
left: 5%;
}
.arrow-right span {display: none;}

.caption {
text-align: center;color:#666;
margin: -30px auto 50px !important;
}

.order {
max-width: 760px;
background: #f7f5f3;
padding: 20px;
border-radius: 10px;
border: 2px solid #eee;
}

.order input {
  display: inline-block;
  width: 360px;
  border: 1px solid #9c7e31;
  border-top: 1px solid #a88734;
  border-bottom: 1px solid #846a29;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f7dea1, #f0c24d);
  box-shadow: 0 1px 0 #faecc8 inset;
  text-align: center;
  color: #111;
  font-size: 1.2em;
  line-height: 1;
  padding: 1em;
}

.order input:hover{
  background: linear-gradient(to bottom, #f5d689, #eeba35);
}

.bookcontent [class*="fx-col-"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 15px !important;
}

[class*="book0"] div {
border: 3px solid;
padding: 15px;
height: 100%;
}

p[class*="color0"] {
font-weight: bold;
border-bottom: 1px solid;
font-size: 120% !important;
}

span[class*="color0"] {
font-weight: bold;
border-bottom: none;
font-size: 100% !important;
}

.book01 div {border-color: #00357e;}
.book02 div {border-color: #007d55;}
.book03 div {border-color: #d28300;}
.book04 div {border-color: #ca5381;}
.book05 div {border-color: #c70025;}
.book06 div {border-color: #7d4698;}

p.color01 {color: #00357e;}
p.color02, span.color02{color:#007d55;}
p.color03, span.color03{color:#d28300;}
p.color04, span.color04 {color: #ca5381;}
p.color05, span.color05 {color: #c70025;}
p.color06, span.color06 {color: #7d4698;}