@charset "utf-8";

/*----------------------------------------------------
	リセット
----------------------------------------------------*/
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
http://honekin.jp
*/
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-size: 100%;
    font: inherit;
    vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
    }
	body {
    line-height: 1;
    }
ol, ul {
    list-style: none;
    }
blockquote, q {
	quotes: none;
    }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
    }
table {
	border-collapse: collapse;
    border-spacing: 0;
    }

/*--- default */
body {
	background-repeat: repeat-x;
	background-position: center top;
	background-color: #FFF;
	background-image: url(../image/bg2.gif);
	line-height: 1.5;
	font-size: 100%;
	color: rgb(51,51,51);
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
input,select,option,textarea {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
	
/* clearfix */
.cf:after {
	content: "."; display:block; clear:both; height:0; visibility:hidden;
	}
.cf {
	min-height:1px;
	}
* html .cf {
	height:1px; /*\*//*/ height: auto; overflow: hidden; /**/
	}
	
/*----------------------------------------------------
	初期設定
----------------------------------------------------*/

.wrap {
	margin: 0 auto;	
	max-width: 900px;
    padding: 0 20px;
}
.area {
	width: 90%;
	margin:0 auto;
}
a {
	text-decoration:underline;
	color:#999999;
}
img {
	max-width: 100%;
    height: auto;
}

@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 767px){
    
}
@media screen and (max-width: 599px){
    
}


/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/

.head {
	display: flex;
    justify-content: space-between;
    align-items: center;
	max-width: 850px;
	margin:0 auto;
}
.head a {
    max-width: 45%;
}
.head h1 {
	color: #999;
	font-size: 13px;
    max-width: 55%;
    margin-top: 10px;
}
.head_main {
	max-width: 850px;
	margin: 2px auto;
}

@media screen and (max-width: 599px){
    
    .head h1 {
        font-size: 3vw;
        margin-top: 1.2vw;
    }
    .head_main {
        margin: 0 -20px;
    }

}


/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.contents {
	max-width: 800px;
	margin:0 auto;
}
.buy_button {
	width:600px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 40px;
}
.buy_button2 {
	width:550px;
	background-color: #FFF;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
.buy_button2 td {
	padding: 18px;
}
.buy_button3 {
	width:750px;
	margin:0 auto;
	padding-top: 20px;
	padding-bottom: 40px;
}
.tx-area {
	width: 740px;
	background-color: #f9f9f9;
	margin:0 auto;
	padding: 30px;
}
.check {
	max-width: 734px;
	margin:0 auto;
	padding: 30px;
	border:3px solid #f4f4f4;
}
.check ul{
	text-align: left;
}
.check li{
	list-style: none;
	background-image: url(../image/bullet1.gif);
	background-repeat: no-repeat;
	border-bottom:1px dotted #999;
	margin-right: 10px;
	padding-left: 30px;
	padding-top: 6px;
	padding-bottom: 4px;
	background-position: 0% 40%;
}

/*----------------------------------------------------
	プロフィールの設定
----------------------------------------------------*/
.profile {
	max-width: 750px;
	margin: 0 auto;
	background-color: #f9f9f9;
	padding: 21px;
	border: 4px solid #eaeaea;
}
.profile-glid {
	width: 92%;
	margin:0 auto;
	padding: 4%;
	border: 1px solid #ccc;
	background-color: #fff;
}
.img-profile {
	width: 40%;
	height: auto;
	margin:0 auto;
    padding: 0 0 15px 15px;
	max-width: 220px;
	float: right;
}

.img-profile02 {
	width: 95%;
	height: auto;
	margin:0 auto;
}
.img-profile03 {
	width: 40%;
	height: auto;
	margin:0 auto;
	max-width: 200px;
	margin-right:20px;
	float: left;
}
.img-profile04 {
	width: 40%;
	height: auto;
	margin:0 auto;
	max-width: 150px;
	margin-right:20px;
	float: left;
}

@media screen and (max-width: 599px){
    
    .profile {
        padding: 15px 12px;
    }
    
}

/*----------------------------------------------------
	申込みフォーム
----------------------------------------------------*/
.cts-button {
	width: 70%;
	margin:0 auto;
	padding: 0.5em 0;
	background-image: url(../image/form-button.png);
	background-repeat: repeat-x;
	background-position: left center;
	font-weight: bold;
	color: #ffffff;
	border-radius: 0.5em;
	position: relative;
	border: 2px solid rgb(204, 0, 0);
	font-size: 28px;
	cursor: pointer;
	text-align: center;
}
.cts-button a {
	color: #FFF;
	text-decoration: none;
	}
/*----------------------------------------------------
	申込みフォーム
----------------------------------------------------*/
.tx-deco02 {
	background-image: url(../image/sub-icon01.gif);
	background-position: 0% 5%;
	padding:10px 0 10px 50px;
	background-repeat: no-repeat;
}
.form-wrap {
	padding: 15px;
	border-radius: 6px;
	box-shadow: 1px 2px 15px rgb(0, 0, 0);
	position: relative;
	background-color: #FBD489;
}
.form-wrap {
	margin-right: 50px;
	margin-left: 430px;
	margin-top: 10px;
}
.form-wrap {
	color: #000;
	text-align: center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-weight: bold;
	font-size: 170%;
	line-height: 1.3;
}
.form-area {
	background-color: rgb(255, 255, 255);
	box-shadow: 1px 1px 3px rgb(153, 153, 153) inset;
	position: relative; padding: 5px;
}
.form-wrap-inner {
	margin: 50px 50px 2em;
	box-shadow: 1px 2px 10px rgb(153, 153, 153);
}
.form-wrap .form-arrow {
	padding: 0px;
	position: absolute;
	left: 50%;
	top: -110px;
	margin: 0px 0px 0px -200px;
}
.form-wrap .form-arrow02 {
	padding: 0px;
	position: absolute;
	left: 50%;
	top: -130px;
	margin: 0px 0px 0px -480px;
}

.form-wrap .form-attention {
	font-size: 40%;
	color: #666;
	font-weight: normal;
	text-align: left;
	margin: 20px 0;
	padding: 0 30px 0 180px;
	background-image: url(../image/attention-logo.png);
	background-repeat: no-repeat;
	background-position: 130px top;
	line-height: 1.5;
}
.form-glid {
	padding:0 8%;
}
.form-glid dt {
	font-weight: normal;
	float: left;
	font-size: 80%;
	padding-top: 0.3em;
	padding-left: 0.5em;
	padding-bottom: 1.5em;
	color: #000;
}

.form-tx input {
	padding: 5px 10px 5px 35px;
	border: 3px solid #999;
	font-size: 16px;
	background-image: url(../image/mail-logo.png);
	background-repeat: no-repeat;
	background-position: 5px center;
}
.form-button input {
	width: 90%;
	padding: 0.5em 0;
	background-image: url(../image/form-button.png);
	background-repeat: repeat-x;
	background-position: left center;
	font-weight: bold;
	color: #ffffff;
	border-radius: 0.5em;
	position: relative;
	border: 2px solid rgb(204, 0, 0);
	font-size: 70%;
	cursor: pointer;
}
.bg02 {background-color:#FFFF99 !important;}

/* LINE */
.form-wrap.line_area {
	background-color: #cfc;
}
.line_area_btn {
    padding-bottom: 20px;
}
.line_area_btn a {
    padding: 15px 45px;
    background: #06c655;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}
.line_area_btn a:hover {
    opacity: .7;
}

@media screen and (max-width: 1024px){
    
    .form-wrap-inner {
        margin: 30px 0;
    }
    .line_area_btn a {
        padding: 1.5vw 4.5vw;
        font-size: 3vw;
    }

}
@media screen and (max-width: 767px){

    .form-wrap .form-attention {
        font-size: 40%;
        margin: 20px 0;
        padding: 0 30px 0 60px;
        background-position: 20px top;
        line-height: 1.5;
    }
    
}
@media screen and (max-width: 599px){
    
    .line_area_btn a {
        padding: 3vw;
        font-size: 3.6vw;
    }


}


/*----------------------------------------------------
	主なサービス
----------------------------------------------------*/

.service-area {
	width: 800px;
	height: 600px;
	margin: 0 auto;
	background-image: url(../image/image05a.gif);
	text-align: right;
}
.service-area-link02 {
	font-size: 12px;
	padding-top: 315px;
	padding-right: 30px;
	font-weight: bold;	
}
.service-area-link02 a {
	color: #000;
	text-decoration: underline;
}
.service_sp {
    display: none;
}

@media screen and (max-width: 899px){
    
    .service-area {
        display: none;
    }
    .service_sp {
        display: block;
        margin-bottom: 60px;
    }
    .service_sp table {
        margin: 20px auto;
        width: 100%;
        max-width: 360px;
        text-align: center;
    }
    .service_sp table th {
        border: 3px solid #d87c64;
        background: #d87c64;
        color: #fff;
    }
    .service_sp table td {
        border: 3px solid #d87c64;
    }
    .service_sp table td p a {
        display: block;
        padding: 5px 0 15px;
        color: #333;
    }
    
    
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
#footer {
	border-top: 2px solid #ccc;
	font-size: 13px;
}

#footer dl#foot_main {
	max-width:900px;
	margin:0 auto;
	text-align:center;
	padding:14px 0 14px 0;
}

#footer dl#foot_main dd {
	display:inline;
}

#footer p {
	max-width:900px;
	margin:0 auto;
	text-align:center;
}
.footer-navi {
}
.footer-navi ul {
}
.footer-navi li {
	float:left;
	width:266px;
	text-align:center;
	font-size:14px;
}
.footer-navi li a {
	background:#fff; 
	display:block; 
	padding:10px 0; 
	text-decoration:none;
}
.footer-navi li a:hover {
	background:#F8F5EE;
}

@media screen and (max-width: 600px){
    
    #footer dl#foot_main dd {
        display: block;
        margin: 20px 0;
    }

}


/*----------------------------------------------------
	カスタム
----------------------------------------------------*/
.red{color:#ff4040;}       /* 赤色薄 */
.red02{color:#c00000;}     /* 赤色濃 */
.blue{color:#09c;}         /* 青色 */
.brown{color:#803000;}     /* 茶色 */
.green{color:#008000;}     /* 緑色 */
.orange{color:#FF6600;}    /* 橙色 */
.yellow{color:#fff000;}    /* 黄色 */
.purple{color:#800080;}    /* 紫色 */
.pink{color:#EC5E78;}      /* ピンク */
.silver{color:#808080;}    /* 灰色薄 */
.gray{color:#333;}         /* 灰色濃 */
.black{color:#000;}         /* 黒 */

.text70{font-size:70%;}
.text80{font-size:80%;}
.text90{font-size:90%;}
.text110{font-size:110%;}
.text120{font-size:120%;}
.text130{font-size:130%;}
.text140{font-size:140%;}
.text150{font-size:150%;}
.text160{font-size:160%;}
.text170{font-size:170%;}
.text180{font-size:180%;}

.b{font-weight: bold;	}

.tx-c {text-align: center;}

.dot{border-bottom:1px dotted #999;}
.solid{border-bottom:1px solid #ccc;}

.r-flo{float:right;}
.l-flo{float:left;}
.f-clear{clear:both;}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}

.mt20{margin-top:20px !important;}
.ml20{margin-left:10px !important;}

@media screen and (max-width: 1024px){
    
    .mb10{margin-bottom:1vw !important;}
    .mb20{margin-bottom:2vw !important;}
    .mb30{margin-bottom:3vw !important;}
    .mb40{margin-bottom:4vw !important;}

}

/*--180827追加↓--*/
#top{color: #000;}

#top .head{width: 100%; max-width: 850px; margin-left:auto; margin-right: auto;}
#top .head_main{width: 100%; max-width: 900px; margin-left:auto; margin-right: auto;}

#top .contents{width: 100%; max-width: 800px; margin-left:auto; margin-right: auto;}

#top .form-wrap .form-attention{font-size: 50%; padding-left: 160px; background-position: 110px top;}
#top .profile{font-size: 18px;}

#top .service-area{width: 100%; max-width: 800px; margin-left:auto; margin-right: auto; background-image: none;}
#top .service-area h3{text-align: center; font-size: 1.5rem; font-weight: bold; border:4px solid #fdd985; border-radius: 7px;width: 75%; margin: 0 auto; padding:0.5rem 0;}
#top .service-area table{background-color: #d87c64; width: 100%; font-weight: bold; margin-bottom: 60px;text-align: initial;}
#top .service-area table th{color: #fff;border: 4px solid #d87c64; padding:3px;}
#top .service-area table td{background-color: #fff; border: 4px solid #d87c64; padding:5px;}
#top .service-area table img{min-width: 290px; margin-top: 5px;}
#top .service-area table a{color: #000;}

#top .check{width: auto;font-size: 18px;}

#top .form-button button {
	width: 90%;
	padding: 0.5em 0;
	background-image: url(../image/form-button.png);
	background-repeat: repeat-x;
	background-position: left center;
	font-weight: bold;
	color: #ffffff;
	border-radius: 0.5em;
	position: relative;
	border: 2px solid rgb(204, 0, 0);
	font-size: 70%;
	cursor: pointer;
}

#top #footer dl#foot_main, #top #footer p{width: 100%; max-width: 900px; margin-left:auto; margin-right: auto;}

#top h2{
	text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  border-bottom: 1px solid #999;
}

#top img.responsive{width: 100%;}
#top .for_sp{display: none;}

/*900px以下タブレット*/
@media screen and (max-width: 900px){
	#top .form-wrap-inner{margin-right: 0; margin-left: 0;}
	#top .profile{width: 90%; max-width: 750px;}
}

/*600px以下スマホ*/
@media screen and (max-width: 600px){s
	#top .head{margin-top: -15px;}
	#top .head h1{position: initial; text-align: right; margin-top: -12px;}
	#top .check{padding:12px;font-size: 16px;}
	#top .check li{background-position: 0% 15%}

	#top .form-wrap-inner{margin-top: 40px; margin-bottom: 40px;}
	#top .form-wrap{padding: 10px;}
	#top .form-glid dt{padding-bottom: 0.5em;}
	#top dd.form-button button{margin-top: 10px; width: 100%;font-size: 60%;}
	#top .form-wrap .form-attention{font-size: 45%; padding-left: 60px; background-position: 18px top;}

	#top .profile{padding: 15px 10px; margin:0 auto;}
	#top .img-profile, #top .img-profile03, #top .img-profile04{width: 100%; max-width: 100%; float:none;}

	#top .service-area {height: auto;}
	#top .service-area h3{font-size: 1.2rem; width: 85%;}
	#top .service-area table{margin-bottom: 20px;}
	#top .service-area table td.list{width: 40%;}
	#top .service-area table img{min-width: auto;}

	#top #footer p{padding: 0;}

	#top h2{font-size: 1.8rem;}
	#top p{padding: 0 0.5rem;}
	#top .mb40{margin-bottom: 30px!important;}
	#top .for_sp{display: inline;}
}


/*--180827追加↓--*/