@charset "utf-8";


@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: 500;
}

.yu{
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, MS PGothic, sans-serif;
}

#pc_menu ul .menu6:before{
	color:#ec6d56;
	}
	
#hasei_main{
	padding-top:320px;
	padding-bottom:80px;
	}
	

#hasei_main .hasei_image{
	background:url(../image/if_main.jpg) center center;
	background-size:cover;
	}


#hasei_main .hasei_image h1{
	width:180px;
	}
	
	
.if_txt{
	width:calc(100% - 30px);
	max-width:1000px;
	margin:0 auto;
	position:relative;
	text-align:center;
	}
.if_txt h1{
	width:505px;
	margin:0 auto 20px;
	}

.if_txt p{
	line-height:32px;
	letter-spacing:0.08em;
	text-align:center;
	}




.if_wrap{
	width:100%;
	margin:45px auto 0;
	background:url(../../image/works_bg.jpg) left top;
	padding:68px 0 128px;
	}
	
.if_con{
	display:block;
	margin:0 auto;
	width:calc(100% - 30px);
	max-width:1000px;
	padding-left:20px;
	box-sizing:border-box;
	position:relative;
	}

.if_con:hover{

filter: alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
.if_con .moshimo{
	display:block;
	color:#2eb7cb;
	font-size:16px;
	font-style:italic;
	padding-left:38px;
	position:relative;
	}

.if_con .moshimo:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	width:23px;
	height:18px;
	background:url(../../image/moshimo_icon.png);
	background-size:cover;
	}
.if_con h2{
	width:260px;
	margin:50px 0 8px;
	}
.if_con h3{
	width:380px;
	margin:0 0 58px;
	}
.if_con .link_btn{
	margin:0;
	
	}
	
.if_con:hover .link_btn{
	color:#dd4d3a;
	background:#fff;
	border:2px dotted #dd4d3a;
	}
.if_con:hover .link_btn:before{
	right:26px;
	background:url(../../image/btn_ar_af.png);
	}
.if_con .moshimo_img{
	width:656px;
	position:absolute;
	right:20px;
	top:-20px;
	z-index:-1;
	}
	

.if_con .moshimo_img:after{
	content:"";
	display:block;
	position:absolute;
	width:144px;
	height:240px;
	right:18px;
	bottom:-10px;
	background:url(../image/moshimo_illust.png);
	background-size:cover;
	-webkit-transition: right 0.4s ease;
    -moz-transition: right 0.4s ease;
    -o-transition: right 0.4s ease;
    transition: right 0.4s ease;
	}
.if_con:hover .moshimo_img:after{
	right:50px;
	}
	
	
	
.moshimo_2{
	width:calc(100% - 30px);
	max-width:1000px;
	margin:55px auto 0;
	}


	
@media screen and ( max-width: 780px ) {
	
	
#hasei_main{
	padding-top:0px;
    padding-bottom: 60px;
	}

#hasei_main .hasei_image h1{
	width:100px;
	}
		
#hasei_main .hasei_image{
	margin:0 auto 35px;
	}
	
	
.if_txt{
	width:calc(100% - 30px);
	}
.if_txt h1{
	width:196px;
	margin-bottom:15px;
	margin:0 auto 15px;
	}
.if_txt p{
	font-size:12px;
	line-height:1.75em;
	width:100%;
	margin:15px 0 35px;
	}
	
	


.if_wrap{
	margin:20px auto 0;
	padding:30px 0 45px;
	}
	
.if_con{
	padding-left:0px;
	}

.if_con .moshimo{
	display:block;
	width:195px;
	box-sizing:border-box;
	color:#2eb7cb;
	text-align:center;
	margin:0 auto;
	font-size:14px;
	padding-left:34px;
	}
.Android .if_con .moshimo,
.iPhone .if_con .moshimo{
	
	width:175px;
	}

.if_con .moshimo:before{
	width:21px;
	height:17px;
	}

.if_con h2{
	width:240px;
	margin:20px auto 0px;
	}
.if_con h3{
	width:100%;
	max-width:350px;
	margin:0 auto 25px;
	}
.if_con .link_btn{
	margin:0;
	
	}
	
.if_con:hover .link_btn{
	color:#dd4d3a;
	background:#fff;
	border:2px dotted #dd4d3a;
	}
.if_con:hover .link_btn:before{
	right:26px;
	background:url(../../image/btn_ar_af.png);
	}
.if_con .moshimo_img{
	width:100%;
	position:relative;
	right:auto;
	top:auto;
	z-index:-1;
	margin-bottom:40px;
	}
	

.if_con .moshimo_img:after{
	content:"";
	display:block;
	position:absolute;
	width:108px;
	height:180px;
	right:0;
	bottom:-15px;
	}
.if_con:hover .moshimo_img:after{
	right:20px;
	}		
.moshimo_2{
	width:calc(100% - 30px);
	max-width:1000px;
	margin:35px auto 0;
	}
	}
	
	
	
	
/* ==========================================================================
	01.php
========================================================================== */

#if_main{
	width:100%;
	position:relative;
	background:#f6f6f6;
	margin:70px auto 0;
	padding-top:84px;
	}

#if_main .if_main_stit{
	width:397px;
	position:absolute;
	left:0;
	right:0;
	top:-30px;
	margin:auto;
	}

#if_main h1{
	margin:0 auto;
	}
#if_main.no01 h1{
	width:441px;
	}
#if_main .main_txt{
	text-align:center;
	line-height:32px;
	letter-spacing:0.08em;
	margin:30px 0 40px;
	}
	
#if_main .if_box{
	width:calc(100% - 30px);
	max-width:1000px;
	margin:0 auto;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	background:#fff;
	-webkit-box-shadow: 0px 2px 1px 1px rgba(175,175,175,0.8);
-moz-box-shadow: 0px 2px 1px 1px rgb(175,175,175,0.8);
box-shadow: 0px 2px 1px 1px rgba(175,175,175,0.8);	
	position:relative;
	}
	
#if_main .if_box:before{
	content:"";
	display:block;
	width:21px;
	height:56px;
	position:absolute;
	left:71px;
	top:-16px;
	background:url(../image/clip.png);
	background-size:cover;
	}
#if_main .box1{
	padding:60px 0 70px;
	}
#if_main .if_box .box_inr{
	width:calc(100% - 30px);
	max-width:806px;
	margin:0 auto;
	}

#if_main .if_box .box_inr ul{
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;	
			margin-bottom:40px;
	}
#if_main .if_box .box_inr ul li{
	width:calc(100% - 240px);
	}
#if_main .if_box .box_inr ul li:first-child{
	width:200px;
	height:200px;
	background-size:cover;
	border-radius: 200px;        /* CSS3草案 */  
    -webkit-border-radius: 200px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 200px;   /* Firefox用 */
	}

#if_main .if_box .box_inr ul li h2{
	width:140px;
	height:30px;
	text-align:center;
	background:#d8573f;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	letter-spacing:0.08em;
	box-sizing:border-box;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	margin-top:10px;
	}

#if_main .if_box .box_inr ul li h3{
	font-size:18px;
	line-height:1.5em;
	color:#000;
	margin:17px 0;
	letter-spacing:0.08em;
	}
#if_main .if_box .box_inr ul li h3 span{
	font-size:12px;
	color:#9b9b9b;
	display:inline-block;
	padding-left:20px;
	}
#if_main .if_box .box_inr ul li .textarea{
	padding:13px 20px 16px 20px;
	background:#f6f6f6;
	font-size:12px;
	line-height:26px;
	color:#000;
	}
	


#if_main .box2{
	width:100%;
	background:#fff;
	position:relative;
	margin:225px 0 0;
	padding:65px 0 135px;	}
#if_main .box2 .arrow_01{
    display: block;
	position: absolute;
	top: -90px;
	left: 0;
	width: 0;
	z-index:100;
	box-sizing:border-box;
	border-top: 90px solid transparent;
	border-bottom: 0px solid transparent;
}
#if_main .box2 .tensaku_text{
    display: block;
	position: absolute;
	top: -160px;
	left: 0;
	right:0;
	width: 130px;
	margin:auto;

	}
#if_main .box2 .tensaku_illust{
	width:151px;
	position:absolute;
	left: 0;
	right:0;
	margin:auto;
	top:-125px;
	z-index:9997;
	transition: 1.2s;
	
	}

#if_main .box2 .letter_af{
	
	width:calc(100% - 30px);
	max-width:806px;
	margin:0 auto 0;
	}
	
	
.list-mv1{
	opacity: 0;
}
.mv1{
	opacity: 1.0;
}
	



#if_main #box3{
	width:100%;
	background:#f6f6f6;
	position:relative;
	margin:0 auto;
	padding:60px 0 80px;
	}
.arrow_02{
    display: block;
	position: absolute;
	top: -90px;
	left: 0;
	width: 0;
	z-index:100;
	box-sizing:border-box;
	border-top: 90px solid transparent;
	border-bottom: 0px solid transparent;
}
	
#if_main .box3{
	padding:80px 0 ;
	}
#if_main .box3 h2{
	width:372px;
	margin:0 auto 50px;
	}

#if_main .box3 .point{
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	border:2px solid #ec6d56;
	position:relative;
	padding:45px 15px 42px;
	box-sizing:border-box;
	text-align:center;
	margin-top:50px;
	}

#if_main .box3 .point h3{
	position:absolute;
	top:-11px;
	left:0;
	right:0;
	margin:auto;
	width:280px;
	background:#fff;
	}
#if_main .box3 .point h3 img{
	width:181px;
	}
#if_main .box3 .point h4{
	font-size:22px;
	font-weight:bold;
	color:#000000;
	margin-bottom:22px;
	}
#if_main .box3 .point p{
	font-size:14px;
	line-height:28px;
	}
@media screen and ( max-width: 780px ) {
#if_main{
	width:100%;
	position:relative;
	background:#f6f6f6;
	margin:0px auto 0;
	padding-top:60px;
	}

#if_main .if_main_stit{
	width:297px;
	position:relative;
	left:0;
	right:0;
	top:auto;
	margin:0 auto 20px;
	}

#if_main h1{
	margin:0 auto;
	}
#if_main.no01 h1{
	width:95%;
	max-width:330px;
	}
#if_main .main_txt{
	font-size:12px;
	line-height:1.75em;
	width:100%;
	margin:15px auto 35px;
	width:calc(100% - 30px);
	}
	
	

#if_main .if_box{
	-webkit-box-shadow: 0px 2px 1px 1px rgba(175,175,175,0.6);
-moz-box-shadow: 0px 2px 1px 1px rgb(175,175,175,0.6);
box-shadow: 0px 2px 1px 1px rgba(175,175,175,0.6);	
	}
	
#if_main .if_box:before{
	width:16px;
	height:43px;
	left:20px;
	top:-12px;
	}
#if_main .box1{
	padding:35px 0 40px;
	}
#if_main .if_box .box_inr ul{
	margin-bottom:25px;
	}
#if_main .if_box .box_inr ul li{
	width:100%;
	}
#if_main .if_box .box_inr ul li:first-child{
	margin:0 auto;
	width:200px;
	height:200px;
	background-size:cover;
	border-radius: 200px;        /* CSS3草案 */  
    -webkit-border-radius: 200px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 200px;   /* Firefox用 */
	}

#if_main .if_box .box_inr ul li h2{
	width:130px;
	height:32px;
	text-align:center;
	background:#d8573f;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	padding-top:9px;
	letter-spacing:0.08em;
	box-sizing:border-box;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	margin:20px auto 10px;
	}
.Android #if_main .if_box .box_inr ul li h2,
.iPhone #if_main .if_box .box_inr ul li h2{
	padding-top:11px;
	}

#if_main .if_box .box_inr ul li h3{
	font-size:16px;
	line-height:1.5em;
	color:#000;
	margin:0;
	letter-spacing:0.08em;
	}
#if_main .if_box .box_inr ul li h3 span{
	font-size:10px;
	color:#9b9b9b;
	display:block;
	padding-left:0;
	}
#if_main .if_box .box_inr ul li .textarea{
	padding:13px 20px 16px 20px;
	background:#f6f6f6;
	font-size:11px;
	line-height:20px;
	color:#000;
	margin-top:15px;
	}
	
	
	

#if_main .box2{
	width:100%;
	background:#fff;
	position:relative;
	margin:168px 0 0;
	padding:48px 0 70px;
	}
#if_main .box2 .arrow_01{
    display: block;
	position: absolute;
	top: -65px;
	left: 0;
	width: 0;
	z-index:100;
	box-sizing:border-box;
	border-top: 65px solid transparent;
	border-bottom: 0px solid transparent;
}
#if_main .box2 .tensaku_text{
    display: block;
	position: absolute;
	top: -120px;
	left: 0;
	right:0;
	width: 97px;
	margin:auto;

	}
#if_main .box2 .tensaku_illust{
	width:113px;
	position:absolute;
	left: 0;
	right:0;
	margin:auto;
	top:-95px;
	z-index:9997;
	transition: 1.2s;
	
	}

#if_main .box2 .letter_af{
	
	width:calc(100% - 30px);
	max-width:806px;
	margin:0 auto 0;
	}
	
	
	
	

#if_main #box3{
	padding:45px 0 60px;
	}
#if_main .box3{
	padding:50px 0 40px;
	}
.arrow_02{
    display: block;
	position: absolute;
	top: -30px;
	left: 0;
	width: 0;
	z-index:100;
	box-sizing:border-box;
	border-top: 30px solid transparent;
	border-bottom: 0px solid transparent;
}
	
#if_main .box3 h2{
	width:260px;
	margin:0 auto 20px;
	}

#if_main .box3 .point{
	padding:33px 15px 31px;
	box-sizing:border-box;
	text-align:center;
	margin-top:38px;
	}

#if_main .box3 .point h3{
	position:absolute;
	top:-8px;
	left:0;
	right:0;
	margin:auto;
	width:210px;
	background:#fff;
	}
#if_main .box3 .point h3 img{
	width:135px;
	}
#if_main .box3 .point h4{
	font-size:16px;
	font-weight:bold;
	color:#000000;
	margin-bottom:16px;
	}
#if_main .box3 .point p{
	font-size:12px;
	line-height:20px;
	}
	
#if_main .box2 .arrow_01{
    display: block;
	position: absolute;
	top: -30px;
	left: 0;
	width: 0;
	z-index:100;
	box-sizing:border-box;
	border-top: 30px solid transparent;
	border-bottom: 0px solid transparent;
}
	
	}