@charset "UTF-8";
* {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow: auto;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}

@media only screen and (max-width: 750px) {
	.sp_none {
		display:none;
	}
}

@media only screen and (min-width: 751px) {
	.pc_none {
		display:none;
	}
}

body {
/*  font-family: "Noto Sans JP", "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, sans-serif;*/
  font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  width: 100%;
  background: #ffffff;
  margin: 0 auto;
  padding: 0;
  color: #000;
  overflow: hidden;
  position: relative;
  min-width: 1300px; /* スマホ対応まで一時的に */
}

@media only screen and (max-width: 750px) {
  body {
    min-width: 100%;
    font-size: 1.6rem;
  }
}
img {
  max-width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: middle;
}
.center {
	text-align: center;
}
.mv {
	text-align: center;
}
.read_box {
	background: #d70027;
}
.catch_box {
	min-width: 1200px;
	min-height: 170px;
	background: url("../img/bg_catch_box.svg") top center / 100% auto no-repeat #231815;
	padding-top: calc(100vw * 80 / 1200);
	padding-bottom: 40px;
}
.catch_box .ttl {
	color: #fff;
	font-size: 3.8rem;
	font-weight: 700;
}

.introduction{
	background: #e9e5e2;
	padding-bottom: 30px;
}

.book_area {
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0 70px;
}

.book_area .box_a {
	float: left;
	width: 246px;
	margin-left: 177px;
}
.book_area .box_a img {
	width: 100%;
}

.book_area .box_b {
	float: left;
	width: 350px;
	margin-left: 50px;
}

.book_area .box_b .detail {
	margin-top: 80px;
	height: 200px;
}
.book_area .box_b .btn {
}
.btn_book {
	display: block;
	height: 70px;
	line-height: 70px;
	background: url("../img/bg_btn_book.svg") top left / auto 70px no-repeat #4b4b4b;
	padding-left: 100px;
	color: #fff;
	font-size: 2.5rem;
	text-decoration: none;
	transition: all 0.1s;
}
.btn_book:hover {
	opacity: 0.8;
}

.guide_box {
	width: 1000px;
	border: 1px solid #000;
	padding: 30px;
	margin: 0 auto 70px;
	position: relative;
}
.book_content {
}
.title {
	float: left;
	margin-top: -50px;
	margin-left: 20px;
	display: inline-block;
	padding: 0 30px;
	line-height: 40px;
	font-size: 2.4rem;
	font-weight: 700;
	background: #e9e5e2;
}
.book_content .photo {
	width: 280px;
	float: right;
}
.book_content .photo img {
	width: 100%;
}
.book_content .text {
	width: 650px;
	float: left;
}
.book_content .text dl{
  width: 100%;
  overflow: hidden;
}
.book_content .text dt{
  width: 70px;
  float: left;
  padding: 1px;
  box-sizing: border-box;
}
.book_content .text dd{
  margin-left: 70px;
  padding: 1px;
}
.book_content .text dd:after{
  display: block;
  content: "";
  clear: both;
}
.book_content .text.btom {
	bottom: 30px;
	position: absolute;
}

.book_content .text .sub_ttl{
	color: #d70027;
	font-size: 2.4rem;
}

.book_content .text .author {
	font-size: 4.5rem;
}
.book_content .text .author span {
	font-size: 2.7rem;
	padding-left: 15px;
}

.btn_website {
	margin-top: 42px;
	margin-left:45px;
	width: 536px;
	display: block;
	height: 70px;
	line-height: 70px;
	background: url("../img/bg_btn_website.svg") top left / auto 70px no-repeat #4b4b4b;
	padding-left: 100px;
	color: #fff;
	font-size: 2.5rem;
	text-decoration: none;
	transition: all 0.1s;
}
.btn_website:hover {
	opacity: 0.8;
}

.example {
	background: #333333;
	padding-bottom: 1px;
}
.example .ttl {
	width: 1000px;
	margin: 0 auto;
	line-height: 180px;
	text-align: center;
	color: #fff;
	font-size: 3.5rem;
}
.example p {
	display: block;
	margin: 0 auto 30px;
	width: 940px;
	height: 60px;
	border: 3px solid #fff;
	line-height: 54px;
	background: url("../img/bg_example_p.svg") top left / auto 54px no-repeat #333;
	padding-left: 82px;
	color: #fff;
	font-size: 2.3rem;
}
.convey_box {
	min-width: 1200px;
	min-height: 170px;
	background: url("../img/bg_convey_box.svg") top center / 100% auto no-repeat #fff;
	padding-top: calc(100vw * 100 / 1200);
	padding-bottom: 100px;
	text-align: center;
}
.convey_box .ttl {
	display: inline;
	background: linear-gradient(transparent 70%,#ffbdd5 70%);
	color: #000;
	font-size: 3.5rem;
	font-weight: 700;
}

.story {
	background: #999;
	padding-bottom: 0px;
}
.story_box {
	width:1000px;
	margin: 0 auto;
}
.story_box .story_txt {
	width: 720px;
	height: 200px;
	padding-top: 70px;
	padding-bottom: 130px;
	font-size: 2.2rem;
	font-weight: 700;
	color: #fff;
	float: left;
}
.story_box .photo {
	width: 280px;
	float: right;
	margin-top: -46px;
}

.plan_box {
	background: #e9e5e2;
	padding-bottom: 100px;
}

.plan_box .ttl {
	line-height: 180px;
	font-size: 3.5rem;
	font-weight: 700;
	color: #000;
}
.plan_box .read_txt {
	width: 1000px;
	margin: 0 auto 40px;
}
.plan_box .menu {
	width: 1000px;
	margin: 0 auto;
	border: 3px solid #000;
	background: #e9e5e2;
	padding-bottom: 45px;
}

.plan_box .menu .ttl {
	line-height: 50px;
	font-size: 2.4rem;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 0 40px;
}

.plan_box .menu .item_group {
	
}
.plan_box .menu .item_group .plan {
	width: 900px;
	margin: 60px auto 0;
	font-size: 2.4rem;
	font-weight: 700;
	background: url("../img/icon_plan.svg") top left / auto 50px no-repeat;
	padding-left: 60px;
	line-height: 50px;
}
.plan_box .menu .item_group .text {
	width: 900px;
	margin: 25px auto 0;
}
.plan_box .menu .item_group .price {
	width: 900px;
	margin: 25px auto 0;
	display: table;
}
.plan_box .menu .item_group .price p {
	display: table-cell;
	vertical-align: middle;
}
.plan_box .menu .item_group .price .kakaku {
	width: 70px;
	padding: 10px 15px;
	background: #000;
	color: #fff;
}
.plan_box .menu .item_group .price .honbun {
	width: auto;
	padding: 10px 15px;
	background: #fff;
	color: #000;
}
footer {
	background: #333;
}
.copy {
	width: 1000px;
	margin: 0 auto;
	line-height: 50px;
	text-align: center;
	font-size: 2rem;
	color: #fff;
}
.form_box {
	background: #333;
}

.form_box .ttl {
	width: 1000px;
	margin: 0 auto;
	line-height: 180px;
	text-align: center;
	color: #fff;
	font-size: 3.5rem;
}

.form_box form {
	width: 1000px;
	margin: 0 auto;
	background: #333;
	color: #fff;
}
.form_box form .colm {
	border: 1px solid #fff;
	padding: 30px 30px 25px;
}
.form_box form .colm p{
	font-size: 2rem;
	font-weight: 700;
	line-height: 30px;
	margin-bottom: 22px;
}
.form_box form .colm span {
	display: inline-block;
	line-height: 26px;
	font-size: 1.8rem;
	font-weight: 700;
	background: #c1272d;
	padding: 0 10px;
	margin-left: 10px;
}

.form_box form input[type=text] {
	background: #b3b3b3;
	width: 100%;
	padding: 10px;
	color: #000;
	font-size: 1.6rem;
	border-radius: 5px;
}
input::placeholder,
.form_box form input:-ms-input-placeholder,
.form_box form input::-ms-input-placeholder {
	color: #666;
}

.form_box form select {
	background: #b3b3b3;
	padding: 10px;
	font-size: 1.6rem;
	border-radius: 5px;
	color: #000;
}

.form_box form label {
	display: block;
	background: #b3b3b3;
	padding: 10px;
	font-size: 1.6rem;
	border-radius: 5px;
	color: #000;
	cursor: pointer;
}
.mt30 { margin-top:30px!important; }
.mr50 { margin-right:50px!important; }
.w150 { width: 150px!important; }
.w220 { width: 220px!important; }
.w250 { width: 250px!important; }
.w450 { width: 450px!important; }
.w550 { width: 550px!important; }
.wmax { width: 100%!important; }

.form_box form .ml {
	margin: 56px auto 20px;
	width: 700px;
}
.form_box form .ml label {
	background: transparent;
	font-size: 1.7rem;
	padding: 10px 0;
	color: #fff;
}
.form_box form .btn_submit {
	padding: 50px 0 100px;
}
.form_box form input[type=submit],
.form_box form input[type=button] {
	display: block;
	width: 250px;
	height: 70px;
	line-height: 70px;
	font-size: 2.5rem;
	background: #fff;
	color: #4b4b4b;
	letter-spacing: 1em;
	text-indent:1em;
	margin: 0 auto;
	transition: all 0.1s;
}
.form_box form input[type=submit]:hover,
.form_box form input[type=button]:hover {
	background: #4b4b4b;
	color: #fff;
}

.privacy_box .ttl {
	width: 1000px;
	margin: 0 auto;
	line-height: 180px;
	text-align: center;
	color: #000;
	font-size: 3.5rem;
}
.privacy_box .btn {
	padding-bottom: 100px;
}
.btn_privacy {
	display: block;
	width: 440px;
	margin: 0 auto;
	height: 70px;
	line-height: 70px;
	background: url("../img/bg_btn_privacy.svg") top left / auto 70px no-repeat #4b4b4b;
	padding-left: 70px;
	color: #fff;
	font-size: 2.5rem;
	text-decoration: none;
	transition: all 0.1s;
}
.btn_privacy:hover {
	opacity: 0.8;
}

.comingsoon {
	width: 1200px;
	margin: 0 auto;
}

@media only screen and (max-width: 750px) {
	.read_box {
		background: transparent;
	}

.catch_box {
	min-width: 100%;
	min-height: 80px;
	background: url("../img/bg_catch_box_sp.svg") top center / 100% auto no-repeat #231815;
	padding-top: calc(100vw * 80 / 750);
	padding-bottom: 20px;
}

.catch_box .ttl {
    font-size: 5vw;
}

.book_area {
    width: 100%;
    padding: 20px 0 70px;
}
.book_area .box_a {
    float: none;
    width: 33%;
    margin: 0 auto;
}

.book_area .box_b {
	float: none;
	width: auto;
	margin: 0 6%;
}

.book_area .box_b .detail {
	margin-top: 15px;
	height: auto;
}
.book_area .box_b .btn {
	display: block;
	width: 270px;
	margin: 20px auto 0;
}
.btn_book {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	background: url("../img/bg_btn_book.svg") top left / auto 50px no-repeat #4b4b4b;
	padding-left: 70px;
	padding-right: 20px;
	color: #fff;
	font-size: 2.0rem;
	text-decoration: none;
	transition: all 0.1s;
}

.guide_box {
	width: 95%;
	border: 1px solid #000;
	padding: 30px 10px;
	margin: 0 auto 70px;
	position: relative;
}
.book_content {
}
.title {
	float: left;
	margin-top: -50px;
	margin-left: 20px;
	display: inline-block;
	padding: 0 30px;
	line-height: 40px;
	font-size: 2.4rem;
	font-weight: 700;
	background: #e9e5e2;
}
.book_content .photo {
	width: 45%;
	float: none;
	margin: 0 auto;
}
.book_content .photo img {
	width: 100%;
}
.book_content .text {
	width: auto;
	float: none;
}
.book_content .text.btom {
	top: 0;
	bottom: 0;
	position: relative;
	margin-bottom: 20px;
}

.book_content .text .sub_ttl{
	color: #d70027;
	font-size: 4vw;
}

.book_content .text .author {
	font-size: 6vw;
	font-weight: 700;
}
.book_content .text .author span {
	font-size: 4.6vw;
	font-weight: 500;
	padding-left: 15px;
}

.btn_website {
	margin-top: 20px;
	margin-left:0;
	width: auto;
	display: block;
	height: 50px;
	line-height: 50px;
	background: url("../img/bg_btn_website.svg") top left / auto 50px no-repeat #4b4b4b;
	padding-left: 60px;
	color: #fff;
	font-size: 4.1vw;
	text-decoration: none;
	transition: all 0.1s;
}
.btn_website:hover {
	opacity: 0.8;
}

.example {
	background: #333333;
	padding-bottom: 1px;
}
.example .ttl {
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	line-height: 1.6;
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
}
.example p {
	display: block;
	margin: 0 auto 30px;
	width: 95%;
	height: auto;
	border: 3px solid #fff;
	line-height: 1.6;
	background: url("../img/bg_example_p.svg") top left / auto 30px no-repeat #333;
	padding-top: 2px;
	padding-left: 40px;
	padding-right: 10px;
	color: #fff;
	font-size: inherit;
}
.convey_box {
	min-width: 100%;
	min-height: 170px;
	background: url("../img/bg_convey_box.svg") top center / 100% auto no-repeat #fff;
	padding-top: calc(100vw * 100 / 1200);
	padding-bottom: 30px;
	text-align: center;
}
.convey_box .ttl {
	display: inline;
	background: linear-gradient(transparent 70%,#ffbdd5 70%);
	color: #000;
	font-size: 4.2vw;
	font-weight: 700;
}

.story {
	background: #999;
	padding-bottom: 0px;
}
.story_box {
	width: 95%;
	margin: 0 auto;
}
.story_box .story_txt {
	width: auto;
	height: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	float: none;
}
.story_box .photo {
	width: 40%;
	float: none;
	margin: 0 auto;
	padding-bottom: 25px;
}

.plan_box {
	background: #e9e5e2;
	padding-bottom: 100px;
}

.plan_box .ttl {
	margin: 0 auto;
	padding: 30px 0;
	line-height: 1.6;
	font-size: 2.5rem;
	font-weight: 700;
	color: #000;
}
.plan_box .read_txt {
	width: 95%;
	margin: 0 auto 20px;
}
.plan_box .menu {
	width: 95%;
	margin: 0 auto;
	border: 3px solid #000;
	background: #e9e5e2;
	padding-bottom: 45px;
}

.plan_box .menu .ttl {
	line-height: 50px;
	font-size: 2.4rem;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 0 40px;
}

.plan_box .menu .item_group {
	
}
.plan_box .menu .item_group .plan {
	width: calc( 100% - 10px);
	margin: 30px auto 0;
	font-size: 1.6rem;
	font-weight: 700;
	background: url("../img/icon_plan.svg") top left / auto 25px no-repeat;
	padding-left: 30px;
	line-height: 25px;
}
.plan_box .menu .item_group .text {
	width: calc( 100% - 10px);
	margin: 10px auto 0;
}
.plan_box .menu .item_group .price {
	width: calc( 100% - 10px);
	margin: 10px auto 0;
	display: table;
}
.plan_box .menu .item_group .price p {
	display: table-cell;
	vertical-align: middle;
}
.plan_box .menu .item_group .price .kakaku {
	width: 70px;
	padding: 10px 15px;
	background: #000;
	color: #fff;
	text-align: center;
}
.plan_box .menu .item_group .price .honbun {
	width: auto;
	padding: 10px 15px;
	background: #fff;
	color: #000;
}
footer {
	background: #333;
}
.copy {
	width: auto;
	margin: 0 auto;
	line-height: 50px;
	text-align: center;
	font-size: 1.4rem;
	color: #fff;
}
.form_box {
	background: #333;
}
.form_box .ttl {
	width: auto;
	margin: 0 auto;
	padding: 30px 0;
	line-height: 1.6;
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
}

.form_box form {
	width: 95%;
	margin: 0 auto;
	background: #333;
	color: #fff;
}
.form_box form .colm {
	border: 1px solid #fff;
	padding: 30px 30px 25px;
}
.form_box form .colm p{
	font-size: 2rem;
	font-weight: 700;
	line-height: 30px;
	margin-bottom: 22px;
}
.form_box form .colm span {
	display: inline-block;
	line-height: 26px;
	font-size: 1.8rem;
	font-weight: 700;
	background: #c1272d;
	padding: 0 10px;
	margin-left: 10px;
}

.form_box form input[type=text] {
	background: #fff;
	width: 100%;
	padding: 10px;
	color: #000;
	font-size: 1.6rem;
	border-radius: 5px;
}

.form_box form select {
	background: #fff;
	padding: 10px;
	font-size: 1.6rem;
	border-radius: 5px;
	color: #000;
}

.form_box form label {
	display: block;
	background: #b3b3b3;
	padding: 10px;
	font-size: 1.6rem;
	border-radius: 5px;
	color: #000;
	cursor: pointer;
}
.mt30 { margin-top:30px!important; }
.mr50 { margin-right:5px!important; }
.w150 { width: 30%!important; }
.w220 { width: 45%!important; }
.w250 { width: 47%!important; }
.w450 { width: 80%!important; }
.w550 { width: 100%!important; }
.wmax { width: 100%!important; }

.form_box form .ml {
	margin: 56px auto 20px;
	width: 95%;
}
.form_box form .ml label {
	background: transparent;
	font-size: 1.7rem;
	padding: 10px 0;
	color: #fff;
}
.form_box form .btn_submit {
	padding: 50px 0 100px;
}
.form_box form input[type=submit],
.form_box form input[type=button] {
	display: block;
	width: 250px;
	height: 70px;
	line-height: 70px;
	font-size: 2.5rem;
	background: #fff;
	color: #4b4b4b;
	letter-spacing: 1em;
	text-indent:1em;
	margin: 0 auto;
	transition: all 0.1s;
}
.form_box form input[type=submit]:hover,
.form_box form input[type=button]:hover {
	background: #4b4b4b;
	color: #fff;
}

.privacy_box .ttl {
	width: auto;
	margin: 0 auto;
	padding: 30px 0;
	line-height: 1.6;
	text-align: center;
	color: #000;
	font-size: 2.5rem;
}
.privacy_box .btn {
	padding-bottom: 100px;
}
.btn_privacy {
	display: block;
	width: 70%;
	margin: 0 auto;
	height: 40px;
	line-height: 40px;
	background: url("../img/bg_btn_privacy.svg") top left / auto 40px no-repeat #4b4b4b;
	padding-left: 40px;
	color: #fff;
	font-size: 1.5rem;
	text-decoration: none;
	transition: all 0.1s;
}
.btn_privacy:hover {
	opacity: 0.8;
}

}

/* フォームエラー画面 */
body.error {
	min-width: auto;
	background: #333;
}
body.error .form_box {
	margin: 0 20px;
}
body.error .form_box .ttl {
	width: auto;
}
body.error .form_box form {
	width: auto;
	max-width: 640px;
	margin: autox;
}

.error_messe {
/*	display: inline-block;*/
	line-height: 26px;
	font-size: 1.8rem;
	font-weight: 700;
	background: #c1272d;
	padding: 0 10px;
	margin-left: 10px;
}

/* フォーム完了画面 */
body.thanks {
	min-width: auto;
	background: #333;
}
body.thanks .plan_box {
	padding-bottom: 0;
}
body.thanks .story_box .story_txt {
	font-size: 2rem;
}