@charset "utf-8"; 

/* ------------------------------
    reset
------------------------------ */

a{
	color:#313131; 
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
} 
html{
	font-size:62.5%;
}

body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	list-style-type: none;
	font-style: normal;
	font-weight: normal;
	font-family : Meiryo, メイリオ, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS PGothic', arial, sans-serif;
	text-align: left;
	color:#221815; 
}

textarea { font-size: 100%; }
img { vertical-align: bottom; }

.mincho{font-family : 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;}


/* ------------------------------
    base
------------------------------ */

body{
	position: relative;
	font-size: 1.0rem;
	min-width: 1065px;
}
p,table,dl,ol,ul li,dl dt,dl dd  {
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: -0.03rem;
}
p+p{
	margin-top: 30px;
}
.x2{
	margin-top: 70px;
}
.ipad body,
.android body,
.iphone body {
    -webkit-text-size-adjust: 100%;
}

.fL{ float: left;}
.fR{ float: right;}

/* ------------------------------
    contents
------------------------------ */

header{
	background: url(../img/bg_fv.jpg) center center no-repeat;
	background-size:cover;
}
header .wrap{
	width: 1065px;
	margin: 0 auto;

}
header .obi{
    padding-top: 25px;
}
header .obi img{
	float: left;
}

header .gnav{
    float: right;
}
header .gnav ul{}
header .gnav li{
    display: inline-block;
    margin-left: 30px;
}
header .gnav li:last-of-type{ margin-right: 0;}
header .gnav li a{
    color: #FFF;
}


header .fv{
    position: relative;
	width: 1065px;
    min-height: 624px;
	margin: 0 auto;
	padding: 0;
    background: url(../img/fv_img.png) right bottom no-repeat;
}
header .fv > img{
	float: right;
	margin-right: 20px;
	padding-top: 60px;
}
header .fv .block{
    position: absolute;
    margin: auto;
    left: 0;
    top: 20%;
    bottom: 0;
	width: 417px;
	padding: 35px 0 0 0;
}

header .fv .block p{
	line-height: 1.0;
	text-align: center;
}
header .fv .block .pre{
	font-size: 3.2rem;
	font-weight: bold;
	margin: 0 0 20px;
}
header .fv .block .red{
	font-size: 2.1rem;
}
header .fv .block .red span{
	font-size: 4.2rem;
	font-weight: bold;
	color: #fd0000;
	margin-left: 20px;
	vertical-align: middle;
}
.sp_toggle{ display: none;}




.wrap{
	width: 1065px;
	margin: 0 auto;
}

h2.ttl_h2{
    margin-bottom: 55px;
	font-size: 4.0rem;
    color: #333;
    text-align: center;
}
h2.ttl_h2 span{
	display: inline-block;
    margin-top: 5px;
    padding: 0 7px;
    box-sizing: border-box;
    font-size: 2.4rem;
    color: #e5371a;
    border-bottom: 5px solid #e5371a;
}

.txt_box h3,
.ttl h3{
    margin-bottom: 15px;
    font-size: 3.6rem;
    color: #e5371a;
    font-family : 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
}
.txt_box h3 span{
    display: block;
    margin-top: 10px;
    font-size: 2.4rem;
}
.ttl h3 span{
    display: inline;
    margin-left: 10px;
    font-size: 2.4rem;
}

/*// プロフィール
_________________________________________*/

.block01{
    padding: 45px 0 0 0;
    box-sizing: border-box;
    background: url(../img/bg_block01.png) left top no-repeat;
}
.block01 .topic01{ margin-bottom: 45px;}
.block01 .topic01 .img_box{
    width: 42%;
    max-width: 442px;
}
.block01 .topic01 .img_box .img01{
    float: right;
    max-width: 366px;
    margin-bottom: 50px;
}
.block01 .topic01 .img_box .img02{
   /*  max-width: 384px;
   margin-left: 25px; */
   max-width: 70%;
   margin-left: 29%;
}

.block01 .topic01 .txt_box{
    width: 55%;
    max-width: 576px;
}
.block01 .txt_box .name h3{
    margin-bottom: 0;
    font-size: 5.3rem;
    color: #000;
    font-family : 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
}
.block01 .txt_box .name h3 span{
    display: inline;
    margin-top: 0;
    margin-left: 14px;
    font-size: 2.4rem;
    color: #333;
    font-family : Meiryo, メイリオ, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS PGothic', arial, sans-serif;
}
.block01 .txt_box .name p{
    color: #000;
    font-size: 3.0rem;
    font-family : 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
    margin-bottom: 15px;
}

.block01 .topic01 ul{ margin-top: 30px;}
.block01 .topic01 ul li{ margin-bottom: 5px;}

/*// サービス一覧
_________________________________________*/
.block02 {
    padding: 60px 0 0 0;
    box-sizing: border-box;
}
.block02 .main_bg img{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 75px;
}

.block02 .ttl p{
    color: #333;
    font-size: 2.0rem;
}
.block02 a.btn{
    float: right;
    margin-top: 15px;
}
.block02 .topic01 a.btn{ margin-top: 45px;}

.block02 .topic01 .img_box{
    width: 44%;
    max-width: 464px;
}
.block02 .topic01 .txt_box{
    width: 53%;
    max-width: 540px;
}

.block02 .topic02{
    padding: 25px 0 35px 0;
    margin: 50px 0;
    box-sizing: border-box;
}
.block02 .topic02:nth-of-type(odd){ background: #fffcfc; }

.block02 .topic02 .img_box{
    position: relative;
    width: 52%;
    max-width: 544px;
}

.block02 .topic02 .img_box img{
    margin-top: 20px;
}
.block02 .topic02 .img_box img.img_position{
    margin-top: 0;
    position: relative;
    top: -10px;
    right: 0;
}
.block02 .topic02 .img_box img.img_position02{
    margin-top: 0;
}

.block02 .topic02 .txt_box{
    width: 47%;
    max-width: 498px;
}
.block02 .topic02 .ttl p{
    font-size: 2.4rem;
    color: #111111;
    margin-bottom: 10px;
}
.block02 p.format{
    font-size: 2.0rem;
    color: #333;
    margin-bottom: 15px;
}
.block02 p.in_preparation{
    font-size: 2.4rem;
}


.pagetop{
    position: relative;
    width: 94%;
    max-width: 1065px;
    margin: 0 auto;
}
.pagetop a{
    display: block;
    position: absolute;
    right: 20px;
}

#spt_footer {
    border-top: 5px solid #e5371a;
	padding: 30px 0;
    margin-top: 120px;
}

#spt_footer .link {
    margin: 0px auto 0;
	line-height: 130%;
}
#spt_footer .link ul{text-align: center; margin-bottom: 10px;}
#spt_footer .link li{
    display: inline-block;
}
#spt_footer .link li:not(:last-of-type):after{
    content: 'ｌ';
    margin: 0 0 0 3px;
}

#spt_footer .link a {
    color: #111;
	font-size: 1.4rem;
	text-decoration: none;
}

#spt_footer .link a:hover {
	text-decoration: underline;
	color: #999;
}
footer .copy p{
    text-align: center;
    color: #111111;
    font-size: 1.4rem;
    margin-bottom: 10px;
}
footer .copy p+p{ margin-top: 0;}



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

	body{min-width:inherit;}
	img{ max-width:100%; height:auto;}
	p+p{
		margin-top: 3%;
	}

	.x2{
		margin-top: 45px;
	}

	header .wrap,.wrap{
		width: 94%;
	}

	header .fv{
		width: 94%;
		padding: 3% 0 5%;
	}

    header .fv .block{
        top: 30%;
    }

	header .fv > img {
		width: 30%;
	    margin-right: 0;
	    max-width: 285px;
	}
	header .fv .block .pre{
		font-size: 2.8rem;
	}
	header .fv .block .red span{
		font-size: 3.5rem;
		margin-left: 2%;
	}
	header .btn01{
		width: 90%;
		margin: 3% auto 2%;
	}
	header .tel .tel-link a,
	header .tel .tel-link span{
		color: #fff;
		text-decoration: none;
	}
	header .tel .tel-link a:hover{
		text-decoration: none;
	}

}
@media screen and (min-width : 768px){
	
	.sp{
		display:none!important;
	}
	.btn a,
	a img{
		text-decoration: none;
	}

}

@media screen and (max-width : 768px){
    header .fv{
        background-size: 70%;
        background-position: 130% 0;
        min-height: 534px;
    }
    header .fv .block{ width: 48%; padding-top: 0;}

    /*// プロフィール
    _________________________________________*/
    .block01 {
        background-size: 45% auto;
    }
    .block01 .topic01 .img_box img{
        width: 100%;
        height: auto;
        display: block;
    }
    .block01 .topic01 .img_box .img02{
        max-width: 40%;
        margin: 0 auto;
    }
    .block01 .topic01 .img_box .img02{ margin-left: auto;}
    .block01 .topic01 .img_box{ width: 38%;}
    .block01 .topic01 .txt_box{ width: 58%;}

}


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

	.pc{
		display:none !important ;
	}
	.sp{
		display: block!important;
	}
	
	p, table, dl, ol,dl dt,dl dd{font-size:1.4rem;line-height:1.5;}

	.x2{
		margin-top: 6%;	
	}
    img{ width: 100%; height: auto;}
	header .wrap{
		display: table;
	}
	header .obi p.logo{
		display: table-cell;
		vertical-align: middle;
	}
	header .obi img{
		width: 100%;
		display: block;
	    float: none;
		max-width: 160px;
		margin-top: 0;
	}


    header .gnav li{
        margin-left: 6px;
        font-size: 1.5rem;
    }
    
	header .fv{
        width: 100%;
		padding: 7% 0 0 0;
        background-size: 60%;
        min-height: auto;
        background: none;
	}
	header .fv .block{
        position: relative;
		padding-top: 0;
        width: 100%;
	}
    header .fv .block h1{ margin-bottom: 0;}

    h2.ttl_h2{
        margin-bottom: 8%;
        font-size: 2.6rem;
    }
    h2.ttl_h2 span{
        font-size: 1.6rem;
    }

    .txt_box h3,
    .ttl h3{
        font-size: 2.2rem;
    }
    .txt_box h3 span{
        font-size: 1.5rem;
    }
    .ttl h3 span{
        margin-left: 5px;
        font-size: 1.5rem;
        display: block;
    }

    .fL,.fR{ float: none;}

/*// プロフィール
_________________________________________*/

    .block01{
        padding: 7% 0 0 0;
        background: url(../img/bg_block01.png) left top no-repeat;
        background-size: 38% auto;
    }
    .block01 .topic01{ margin-bottom: 7%;}

    .block01 .topic01 .img_box{
        width: 100%;
        max-width: inherit;
        margin-bottom: 5%;
    }
    .block01 .topic01 .img_box .img01{
        float: none;
        width: 60%;
        display: block;
        margin: 0 auto 8% auto;
    }
    .block01 .topic01 .img_box .img02{
        margin-left: auto;
    }

    .block01 .topic01 .txt_box{
        width: 100%;
        max-width: inherit;
    }
    .block01 .txt_box .name h3{
        margin-bottom: 0;
        font-size: 2.6rem;
    }
    .block01 .txt_box .name h3 span{
        margin-left: 5px;
        font-size: 1.6rem;
    }
    .block01 .txt_box .name p{
        font-size: 1.8rem;
    }
    .block01 .topic01 ul{ margin-top: 4%;}
    .block01 .topic01 ul li{ font-size: 1.4rem;}

/*// サービス一覧
_________________________________________*/
    .block02 {
        padding: 9% 0 0 0;
    }
    .block02 .main_bg img{
        margin-bottom: 11%;
    }

    .block02 .ttl p{
        font-size: 1.4rem;
    }
    .block02 a.btn{
        display: block;
        width: 70%;
        float: none;
        margin: 15px auto 0 auto;
        text-align: center;
    }
    .block02 a.btn img{ max-width: 220px;}
    .block02 .topic01 a.btn{ margin-top: 6%;}

    .block02 .topic01 .img_box{
        width: 100%;
        max-width: inherit;
        margin-bottom: 5%
    }
    .block02 .topic01 .img_box img{
        display: block;
        width: 70%;
        margin: 0 auto;
    }
    .block02 .topic01 .txt_box{
        width: 100%;
        max-width: inherit;
    }

    .block02 .topic02{
        padding: 20px 0;
        margin: 30px 0;
    }

    .block02 .topic02 .img_box{
        position: relative;
        width: 100%;
        max-width: inherit;
        margin-bottom: 5%;
    }

    .block02 .topic02 .img_box img{
        margin-top: 0;
    }
    .block02 .topic02 .img_box img.img_position{
        top: 0;
    }
    .block02 .topic02 .txt_box{
        width: 100%;
        max-width: inherit;
    }
    .block02 .topic02 .ttl p{
        font-size: 1.7rem;
    }
    .block02 .topic02 p.format{
        font-size: 1.7rem;
    }
    .block02 p.in_preparation{
        font-size: 1.6rem;
    }

    .pagetop a{
        right: 0;
    }

    #spt_footer {
        padding: 20px 0;
        margin-top: 20%;
    }

    #spt_footer .link a {
        font-size: 1.2rem;
    }
    footer .copy {
        width: 96%;
        margin: 0 auto;
    }
    footer .copy p{
        font-size: 1.2rem;
    }

}


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

    header .obi img{
        max-width: 130px;
        margin-top: -7px;
    }
    header .gnav li{
        font-size: 1.4rem;
    }
}

.clear{
	clear:both;
}
/* ------------------------------
    clearfix
------------------------------ */

.cf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.cf {display: inline-block;} 

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */