@charset "UTF-8";
/* ---------------------------------------
全デバイス共通
--------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html {
line-height: 1;
}
body {
font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
color: #333333;
background-color: #ececec;
letter-spacing: .05em;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
p {
line-height: 2.6rem;
}
.fw_b {
font-weight: normal;
}
.fc_red {
color: #CC0000;
}
/* img要素
-------------------------------------- */
img {border-radius: 4px;}
img.aligncenter {
display: block;
margin: 16px auto
}
img.alignleft {
display: block;
float: left;
margin-right: 16px;
margin-bottom: 16px;
}
img.alignright {
display: block;
float: right;
margin-left: 16px;
margin-bottom: 16px;
}
/* clearfix要素
-------------------------------------- */
.clearfix::after, .clearfix::before {
content: ".";
display: block;
clear: both;
height: 0;
font-size: 0.1em;
line-height: 0;
visibility: hidden;
overflow: hidden;
}
.clearfix {
min-height: 1px;
}
/* br要素
-------------------------------------- */
br.sp490, br.sp640 {
display: none;
}
/*注釈*/
.chu {
font-size: 88%;
color: #c12a2a;
line-height: 1.2rem;
display: inline-block;
}
/*背景色あり*/
.bg {
background: #faedf3;
}
/* ul要素
-------------------------------------- */
ul.check {
list-style: none;
padding: 0 20px;
}
ul.check li {
position: relative;
border-bottom: #000 1px dotted;
margin: 20px 0;
font-weight: bold;
}
ul.check.wh li {
border-bottom: #fff 1px dotted;
}
ul.check li span.txt {
font-size: 113%;
color: #000;
line-height: 1.6rem;
padding: 16px 0;
margin-left: 36px;
display: block;
}
ul.check.wh li span.txt {
color: #fff;
}
ul.check li span.txt::before {
position: absolute;
content: '';
background: url("../images/icon_check.svg");
width: 30px;
height: 30px;
top: 50%;
left: 0;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
ul.check.wh li span.txt::before {
background: url("../images/icon_check_wh.svg");
}
/* エフェクト設定
-------------------------------------- */
.fade-up {
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: transform 0.7s;
-moz-transition: transform 0.7s;
-webkit-transition: transform 0.7s;
-o-transition: transform 0.7s;
}
.fade-in {
transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
}
/* ---------------------------------------
追従サイドバー
--------------------------------------- */
.followbox_sp {display: none;}
.followbox {
font-weight: bold;
overflow: visible;
z-index: 1;
margin-right: 10px;
margin-top: 4px;
right: 0;
top: 8px;
}
.orderBox a.order {
position: relative;
background: #ec4747;
border-radius: 6px;
color: #fff;
padding: 0 24px;
height: 60px;
margin: 0 auto;
display: block;
text-decoration: none;
text-align: center;
line-height: 60px;
-webkit-box-shadow: 0 0 10px rgba(4, 4, 41, 0.25);
box-shadow: 0 0 10px rgba(4, 4, 41, 0.25);
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
}
.orderBox a.order i {
padding-left: 2px;
font-size: 113%;
}
/* ---------------------------------------
ヘッダー
--------------------------------------- */
header {
background: #fff;
border-top: #333 3px solid;
}
header .logo {
margin: 12px auto;
text-align: center;
}
header .logo img {
width: 100%;
max-width: 280px;}
header h1 {
padding: 20px 0 0 0px;
font-weight: normal;
text-align: right;
font-size: 13px;
color: #666666;
margin-bottom: 0;
margin-left: 0;
margin-top: 10px;
margin-right: 10px;
}
.topimg {
position: relative;
padding: 1em 0 0;
background: #fff;
background: url(../images/topimg_bg.jpg) no-repeat center center;
background-size: cover;
border-top: #dd6f9f 4px solid;
}
.topimg img.copy {
max-width: 860px;
margin: 0 auto;
width: 100%;
display: block;
opacity: .92;
}
.topimg .copy02 {
background: #dd6f9f;
text-align: center;
padding: 12px 0;
position: relative;
}
.topimg .copy02 img {max-width: 960px;}
.topimg .copy02::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top: 15px solid #dd6f9f;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
z-index: 999;
}
/* ---------------------------------------
メイン
--------------------------------------- */
#main {
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #ffffff;
box-shadow: 0px 6px 12px 6px #e0e0e0;
}
/* ---------------------------------------
コンテンツ
--------------------------------------- */
section {width: 100%;}
section .wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
position: relative;
padding: 40px 0;
}
.titBlock {
position: absolute;
top: -45px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #ec0808;
width: 100%;
border: #f99999 6px solid;
border-radius: 60px;
max-width: 490px;
}
.titBlock p {
font-size: 200%;
text-align: center;
color: #fff;
padding: 20px 0;
text-shadow: #d60e0e 0px 0px 7px;
letter-spacing: -0.02em;
font-weight: bold;
line-height: 2.4rem;
}
h2 {
font-size: 225%;
text-align: center;
font-weight: bold;
padding: 24px 0 12px;
position: relative;
display: block;
margin-bottom: 80px;
line-height: 2.6rem;
}
h2:before {
content: '';
position: absolute;
bottom: -24px;
display: inline-block;
width: 60px;
height: 1px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #000;
border-radius: 2px;
}
p.lead {
text-align: center;
font-weight: bold;
font-size: 150%;
padding: 0 0 20px;
line-height: 2.0rem;
}
p.lead img {max-width: 768px;}
.txtBlock {
margin: 20px auto;
}
.txtBlock p {
line-height: 2.2rem;
}
img.meo_img {width: 360px;}

#form_area.bg {padding: 24px 0 40px;}
#form_area.bg .wrapper {background: #fff;}
/*さらに登録者限定で
-------------------------------------- */
section.epubArea .wrapper {padding: 40px 0 0;}
.epubArea h2 {margin-bottom: 24px;}
.epubArea h2:before {
background: none;
}
.epubBlock {
position: relative;
padding: 4em 0;
background: #fff;
background: url(../images/epubBlock_bg.jpg) no-repeat center center;
background-size: cover;
}
.epubBlock img.copy {
max-width: 960px;
margin: 0 auto;
width: 100%;
display: block;
}
a.btn_form {
text-align: center;
display: block;
margin: 0 auto;
-webkit-transition: all .2s;
transition: all .2s;
}
a.btn_form img {
width: 100%;
max-width: 860px;
}
a.btn_form:hover {opacity: .6;}
/*クライアントの声
-------------------------------------- */
.voiceBlock {
width: 98%;
-js-display: flex;
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
flex-wrap: wrap;
margin: 36px auto 0;
}
.v_wrapper {
width: 48%;
}
.vTit {
font-size: 113%;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: #e4651a 2px solid;
color: #e4651a;
background: #fff2ea;
padding: 12px;
}
img.vTit_img {width: 100%;}
.voice {
-js-display: flex;
display: flex;
flex-direction: column;
margin: 0 0 30px;
padding-bottom: 30px;
background: #fef9fc;
border-radius: 8px;
}
.voice img {border-radius: 8px 8px 0 0;}
.voice .koe {
width: 100%;
padding: 0 24px;
}
.voice .koe p {
padding: 0;
font-weight: normal;
margin: 16px auto 0;
line-height: 1.8rem;
}
.voice .koe p span.name {
display: inline-block;
margin-top: 6px;
padding: 1px 8px;
border-radius: 4px;
font-size: 88%;
border: #9a9a9a 1px solid;
}
span.menseki {
font-size: 76%;
color: #797979;
display: inline-block;
padding-top: 8px;
line-height: 1.0rem;
letter-spacing: -0.01em;
}
/*サービス一覧
-------------------------------------- */
.service_list h2 + p {
text-align: center;
}
.serviceBlock {
-js-display: flex;
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
margin: 40px auto;
}
.serviceBlock .service_wrapper {
width: 32%;
padding: 24px 32px;
background: #f4f8ff;
border-radius: 6px;
}
.serviceBlock p.ser_tit {
font-size: 113%;
font-weight: bold;
color: #3a5a94;
}
.serviceBlock p.ser_price {
font-size: 163%;
padding: 12px 0;
font-weight: bold;
}
.serviceBlock p.setsu_txt {
color: #296ce6;
line-height: 1.6rem;
padding: 12px 0;
}
.serviceBlock ul li {
list-style: none;
padding: 12px 0;
line-height: 1.4rem;
position: relative;
margin-left: 1rem;
font-weight: normal;
}
.serviceBlock ul li::before {
font-family: "Font Awesome 5 Free";
content: "\f058";
position: absolute;
top: 50%;
left: -1rem;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.serviceBlock ul li.last::before {content: none;}
/*あいさつ
-------------------------------------- */
.katagakiBlock {
-js-display: flex;
display: flex;
-webkit-justify-content: center; /* Safari */
justify-content: center;
flex-direction: column;
align-items: center;
}
.katagakiBlock .imgBlock {padding: 12px;}
.katagaki {
-js-display: flex;
display: flex;
align-items: center;
}
.katagaki p {
padding: 20px 40px;
font-size: 113%;
line-height: 2.4rem;
border: #a5456e 1px solid;
}
.bg h2:before {background-color: #fff;}
/*「今すぐ読む」ボタン
-------------------------------------- */
.btn_order a {
width: 96%;
display: block;
font-weight: bold;
text-align: center;
padding: 40px 0;
margin: 40px auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font-size: 150%;
background-color: #f1d300;
border: none;
border-radius: 4px;
-webkit-transition: all .2s;
transition: all .2s;
position: relative;
text-decoration: none;
}
.btn_order a::after {
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
top: 50%;
right: 20px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.btn_order a:hover {
background : #e43636;
color: #fff;
}

/* ---------------------------------------
オレンジフォーム
--------------------------------------- */
.orangeformBlock {
margin: 0 auto;
max-width: 860px;
width: 96%;
}
.orangeformBlock table {
width: 100%;
margin: 0 auto;
}
.orangeformBlock table th {font-weight: bold;font-size: 113%;color: #fff;}
.orangeformBlock table th span {
color: #fff;
background: #e43636;
font-weight: normal;
font-size: 75%;
padding: 7px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
}
.orangeformBlock table span.chu {
margin-top: 8px;
margin-bottom: 8px;
color: #000;
}
.orangeformBlock input {box-sizing: border-box;}
.orangeformBlock input[type="text"] {
border-color: #EEEEEE;
height: 4.6em;
border: 6px solid #2389c4;
border-radius: 3px;
background: #fff;
font-size: 125%;
padding: 0 0 0 10px;
width: 100%;
}
.orangeformBlock input[type="button"], button {
width: 96%;
display: block;
font-weight: bold;
padding: 40px 0;
margin: 40px auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font-size: 175%;
background-color: #f1d300;
border: none;
border-radius: 4px;
-webkit-transition: all .2s;
transition: all .2s;
}
.orangeformBlock input[type="button"]:hover, button:hover {
cursor : pointer;
background : #e43636;
color: #fff;
}
.button_wrap input[type=image]{
width: 100%;
-webkit-transition: all .2s;
transition: all .2s;
padding: 12px 0;
}
.button_wrap img {
width: 100%;
-webkit-transition: all .2s;
transition: all .2s;
}
.button_wrap img:hover {opacity: .6;}
.button_wrap input[type=image]:hover {opacity: .6;}
/**.button_wrap {
position: relative;
}
.button_wrap::after {
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
font-weight: 600;
top: 50%;
right: 40px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 150%;
}
.button_wrap:hover {
color: #fff;
}**/

/* トップへ戻る
-------------------------------------- */
#page-top {
position: fixed;
bottom: 2%;
right: 2%;
}
#page-top a {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 100%;
color: #fff;
font-weight: bold;
background-color: #dd6f9f;
border: #fff 1px solid;
text-align: center;
display: block;
text-decoration: none;
}
#page-top a i {
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
/* ---------------------------------------
フッター
--------------------------------------- */
footer {
width: 100%;
padding: 20px 0;
text-align: center;
background: #f4efe5;
color: #714f2d;
font-size: 75%;
}
footer a {
color: #714f2d;
text-decoration: none;
}
.copyright {
margin-top: 10px;
}
/* ---------------------------------------
規約
--------------------------------------- */
.kiyaku {padding: 20px 0;}
.scroll {
margin: 0 auto;
background: url(none) repeat scroll;
border: 1px solid #000;
border-radius: 4px;
box-sizing: border-box;
font-size: 88%;
height: 180px;
overflow-y: scroll;
padding: 20px;
width: 800px;
background: #fff;
line-height: 1.4rem;
}
/* ---------------------------------------
プライバシーポリシー
--------------------------------------- */
.privacy .container {
width: 1000px;
background: #fff;
margin: 0 auto;
padding: 0;
}
.privacy h2 {
font-size: 150%;
line-height: 2.4rem;
}
.privacy .titBlock {
margin: 20px auto;
position: relative;
top: initial;
left: inherit;
text-align: center;
background: no-repeat;
border: none;
max-width: initial;
transform: none;
}
.privacy .txtBlock {padding: 0 40px;}
.privacy p {
font-size: 100%;
line-height: 1.6rem;
}
/* ---------------------------------------

--------------------------------------- */
#btn_animation a img {
animation: btn_animation 2s infinite;
}

@keyframes btn_animation {
0% {
transform: translate(4px, 0px);
}
5% {
transform: translate(-4px, 0px);
}
10% {
transform: translate(4px, 0px);
}
15% {
transform: translate(-4px, 0px);
}
20% {
transform: translate(4px, 0px);
}
25% {
transform: translate(-4px, 0px);
}
30% {
transform: translate(0px, 0px);
}
}