@charset "UTF-8";


/*メインイメージ
---------------------------------------------------------*/
#pagebody {
	padding-bottom: 0;
}
.h_trimming {
	background-image: url(../images/trimming/m_img@2x.jpg);
}
.h_trimming .top_over .abs_img1 {
	position: absolute;
	right: 16%;
	top: -25px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.h_trimming .top_over .abs_img1 {
	right: 13%;
	top: auto;
    bottom: -20px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.h_trimming .top_over .abs_img1 {
	width: 15%;
	right: 8%;
	top: auto;
    bottom: -15px;
}
}




/*　lead
---------------------------------------------------------*/
.txt_lead {
    margin-bottom: 50px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.txt_lead {
	margin-bottom: 40px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.txt_lead {
    margin-bottom: 8%;
}
}







/* トリミング 3つの安心
---------------------------------------------------------*/
.anshin_box {
	margin-bottom: 60px;
}
.anshin_box ul {
	max-width: 786px;
	margin: 0 auto;
}
.anshin_box li {
	float: left;
	width: 29.333%;
    height: 100%;
	margin-right: 6%;
    background: url(../images/trimming/anshin_bg.png) no-repeat top 40px center;
    background-size:100% auto;
    padding-bottom: 30px;
}
.anshin_box li:last-child{
	margin-right:0;
}
.anshin_box dt {
	padding-top: 30px;
	color: #605541;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: .2em;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 10px;
}
.anshin_box dt p:first-child{
    margin-bottom: 10px;
}
.anshin_box dd {
	padding: 0 10px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.anshin_box {
	margin-bottom: 10%;
}
.anshin_box li {
	width: 30%;
	margin-right: 5%;
    padding-bottom: 1em;
    background-size:80% auto;
}
.anshin_box dt {
	padding-top: 1em;
	font-size: 150%;
	letter-spacing: .15em;
	line-height: 1.4em;
	margin-bottom: .5em;
}
.anshin_box dt p:first-child{
    margin-bottom: .8em;
}
.anshin_box dd {
	padding: 0;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.anshin_box {
	margin-bottom: 10%;
}
.anshin_box li {
	float: none;
	width: 100%;
	margin-right: 0;
    background-size:30% auto;
    background-position: top 1em center;
    padding-bottom: 5%;
}
.anshin_box li:last-child{
	padding-bottom:0;
}
.anshin_box dt {
	padding-top: 1em;
	font-size: 4.8vw;
    line-height: 1.5em;
    letter-spacing: normal;
    margin-bottom: .3em;
}
.anshin_box dt p:first-child{
    margin-bottom: 3%;
}
.anshin_box dd {
	padding: 0;
}
}



/* トリミングの流れ
---------------------------------------------------------*/
.flow_box ul {
	margin-bottom: 100px;
}
.flow_box ul li{
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 15px;
}
.flow_box ul li:last-child{
    padding-bottom: 0;
    margin-bottom: 0;
}
.flow_box ul li::before{
    position: absolute;
    display: block;
    content: "";
    background: url(../images/trimming/flow_arrow.png)no-repeat bottom left;
    background-size:100% auto;
    width: 32px;
    height: 32px;
    bottom: 0;
    left: 30%;
}
.flow_box ul li:last-child::before{
    background: none;
}

.flow_box ul .txtbox{
    float: left;
    width: 60%;
    overflow: hidden;
}
.flow_box ul .no{
    float: left;
    width: 14%;
}
.flow_box ul .tit,
.flow_box ul .txt,
.flow_box ul .bg_box{
    float: right;
	width:85%;
}
.flow_box ul li:last-child{
	margin-bottom: 0;
}
.flow_box ul .tit {
    position: relative;
	font-size: 160%;
	font-weight: bold;
	letter-spacing: .18em;
    line-height: 1.4em;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-bottom: 20px;
    color: #605541;
}
.flow_box ul .tit::before{
    position: absolute;
    display: block;
    content: "";
    background:url(../images/trimming/line.png) no-repeat left bottom;
    background-size:100% auto;
    width: 100%;
    height: 8px;
    bottom: 0;
    left: 0;
}
.flow_box ul .bg_box {
	margin-top: 20px;
	background: #F1F1E9;
	padding: 10px 15px;
	border-radius: 10px;
	font-weight: bold;
    box-sizing: border-box;
}

.flow_box ul .img {
    float: right;
    width: 35%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.flow_box ul {
	margin-bottom: 8%;
}
.flow_box ul li{
    padding-bottom: 5%;
    margin-bottom: 5%;
}
    
.flow_box ul .txtbox{
    width: 60%;
}
.flow_box ul .no{
    width: 14%;
}
.flow_box ul .tit,
.flow_box ul .txt,
.flow_box ul .bg_box{
	width:85%;
}
.flow_box ul .tit {
	font-size: 150%;
	letter-spacing: normal;
    line-height: 1.4em;
	padding-top: 0;
	padding-bottom: 3%;
	margin-bottom: 3%;
}
.flow_box ul .img {
    width:32%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.flow_box ul {
	margin-bottom: 10%;
}
.flow_box ul li{
    padding-bottom: 13%;
    margin-bottom: 4%;
}
.flow_box ul li::before{
    background-size:100% auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
.flow_box ul .txtbox{
    float: none;
    width: 100%;
}
.flow_box ul .no{
    width: 12%;
}
.flow_box ul .tit{
	width: 86%;
}
.flow_box ul .txt,
.flow_box ul .bg_box{
	width: 100%;
}
.flow_box ul li:last-child{
	margin-bottom: 0;
}
.flow_box ul .tit {
    font-size: 5vw;
    line-height: 1.5em;
    letter-spacing: normal;
	padding-top: .1em;
	padding-bottom: 4%;
	margin-bottom: 3%;
}
.flow_box ul .bg_box {
	margin-top: 3%;
	padding:3% 4%;
}
.flow_box ul .img {
    float: none;
    width: 70%;
    margin: 4% auto 0;
    text-align: center;
}
}




/* トリミングをご利用されるにあたって
---------------------------------------------------------*/
.con_attention {
	margin-bottom: 100px;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
.con_attention {
	margin-bottom: 5%;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.con_attention {
	margin-bottom: 6%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.con_attention {
	margin-bottom: 10%;
}
}





/* bnr_friend
---------------------------------------------------------*/
.bnr_friend .w970{
    position: relative;
}
.bnr_friend .w970::before{
    position: absolute;
    display: block;
    content: "";
    background: url(../images/trimming/friend_deco2.png) no-repeat top right;
    background-size:100% auto;
    width: 138px;
    height: 119px;
    top: -5px;
    right: 3%;
}
.bnr_friend .flt_l {
    width: 46%;
    margin-bottom: -15px;
    position: relative;
    z-index: 1;
}
.bnr_friend .flt_r{
    width: 53.5%;
	font-size: 95%;
	line-height: 1.5em;
	letter-spacing: .1em;
	color: #605541;
	font-weight: bold;
    padding-top: 30px;
}

.bnr_friend .img_list{
    width: 120%;
    margin: 0 -10%;
    text-align: center;
}
.bnr_friend ul{
    width: cover;
    margin: 0 auto 0;
}
.bnr_friend li{
    float: left;
    width: 14.285%;
}
.bnr_friend li img{
    width: 100%;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
.bnr_friend .w970::before{
    background-size:70% auto;
    top: 15px;
    right: 2%;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.bnr_friend .blocklink_out{
    position: relative;
 }
.bnr_friend .blocklink_out::before{
    position: absolute;
    display: block;
    content: "";
    background: url(../images/trimming/friend_deco2.png) no-repeat bottom right;
    background-size:70% auto;
    width: 138px;
    height: 119px;
    bottom: -20px;
    right: 3%;
}
.bnr_friend .w970::before{
    background: none;
}
.bnr_friend .flt_l {
    width: 46%;
    margin-bottom: -5px;
}
.bnr_friend .flt_r{
    width: 51%;
    padding-top: 1.5em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.bnr_friend .blocklink_out{
    position: relative;
 }
.bnr_friend .blocklink_out::before{
    position: absolute;
    display: block;
    content: "";
    background: url(../images/trimming/friend_deco2.png) no-repeat bottom right;
    background-size:70% auto;
    width: 138px;
    height: 119px;
    bottom: -20px;
    right: 3%;
}
.bnr_friend .w970::before{
    background: none;
}
.bnr_friend .flt_l {
    width: 100%;
    float: none;
    margin-bottom: -1em;
}
.bnr_friend .flt_r{
    width: 100%;
    float: none;
	font-size: 100%;
	line-height: 1.8em;
	letter-spacing: normal;
    padding-top: 5%;
}
.bnr_friend .img_list{
    width: 100%;
    margin: 0 auto;
}
.bnr_friend ul{
    width: 100%;
    margin: 2% auto 0;
}
.bnr_friend li{
    width:33.333%;
}
}