@charset "utf-8";
/* CSS Document */


/*----------------------
	common
----------------------*/
#order_contents{
    max-width: 1100px;
    padding: 0 10px;
    margin: 0 auto;
}

#seal,
.cont01,
.cont02,
.cont03,
.cont04{
	margin: -100px 0 80px 0;
    padding: 100px 0 0 0;
}




.mb10{margin: 0 0 10px 0;}
.mb20{margin: 0 0 20px 0;}


#content.cmn_wrapper01 p{
	margin:0 0 10px 0;
}

#order_contents h3{
	display:flex;
	margin: 0 0 15px 0;
	padding: 5px 0 4px 5px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}

#order_contents h4{
	font-size: 36px;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#order_contents h4 img{
	width: 48px;
	margin: 0 5px 0 0;
}

#order_contents h4 span{
	font-size: 26px;
}

#order_contents h5{
	padding: 0 0 2px 10px;
    margin: 0 0 15px 0;
    color: #f78c96;
    font-size: 24px;
    font-weight: bold;
    border-left: 14px solid #f78c96;
    border-bottom: 4px solid #f78c96;
}

#order_contents h5 span{
    margin: 0 0 0 10px;
    font-size: 17px;
    color: #7b7b7b;
}

#order_contents h6{
    margin: 0 0 5px 0;
	font-size: 19px;
	font-weight: bold;
}

#order_contents .wrapper{
	max-width:980px;
	width: 98%;
	margin: 0 auto;
}

#order_contents section{
	margin: 0 0 40px 0;
}

.icon{
    margin: 0 5px 0 0;
}

/* --- notes --- */
ul.notes li{
    margin: 0 0 0 16px;
    position: relative;
}

ul.notes li:before{
	content: "※";
    position: absolute;
    left: -15px;
}

.method ul.notes{
	padding: 0;
}

.method ul.notes li{
	width: 96%;
}

.method ul.notes li:first-child,
.method ul.notes li:last-child{
	float: none;
	width: 96%;
	margin: 0 0 0 16px;
}


/* --- btn --- */
#content.cmn_wrapper01 p.btn a:link{
	text-decoration: none;
}

#content.cmn_wrapper01 p.btn a:hover{
	-ms-filter: "alpha(opacity=80)"; /* IE 8,9 */
	-moz-opacity:0.8; /* FF , Netscape */
	-khtml-opacity: 0.8; /* Safari 1.x */
	opacity:0.8;
	zoom:1; /*IE*/
}

#content.cmn_wrapper01 p.btn{
	width: 45%;
	margin: 0 auto 10px;
	
}

#content.cmn_wrapper01 p.btn a{
	display: block;
	padding: 10px 10px 8px;
	color: #333;
	font-size: 21px;
	font-weight: bold;
	/*text-align: center;*/
	background-image: url(../img/arrow_01.jpg);
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: 98% center;
	background-color: #8dcef8;
	
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/* --- tree_box_01 --- */
ul.tree_box_01{
	overflow: hidden;
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 16px;
}

ul.tree_box_01 li{
	float: left;
	max-width: 320px;
    width: 32.6%;
    margin: 0 1% 0 0;
}

ul.tree_box_01 li:last-child{
	margin: 0 ;
}

/* --- tree_box_02 --- */
.tree_box_02{
	overflow: hidden;
	margin: 15px 0 0 0;
}

.tree_box_02 dl{
	float: left;
	max-width: 320px;
    width: 32.6%;
    margin: 0 1% 0 0;
}

.tree_box_02 dl.last,
.tree_box_02 dl:nth-child(3n){
	margin: 0;
}

.tree_box_02 dl dt{
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: bold;
}

.tree_box_02 dl dt img{
	margin: 5px 0 0 0;
}

.tree_box_02 dl dd{
	margin: 0 0 10px 0;
}

.line{
	margin: 0 0 20px 0;
    padding: 0 0 15px 0;
    border-bottom: 2px solid #ccc;
}

.tree_box_02 dl dd p{
	font-size: 18px;
	font-weight: bold;
	
	display:inline-block;
	vertical-align:middle;
}

.tree_box_02 dl dd p span{
	font-size: 26px;
}

/* --- two_box_01 --- */
ul.two_box_01{
	overflow:hidden;
	margin: 0 0 1% 0;
}

ul.two_box_01 li{
	float: left;
}

ul.two_box_01 li:first-child{
	max-width: 460px;
	width: 46%;
    margin: 0 2.5% 0 0;
}

/* --- two_box_02 --- */
.two_box_02{
	overflow:hidden;
}

.two_box_02 ul li{
	float: left;
	max-width:  490px;
	width: 49%;
	
	font-size: 16px;
	font-weight: bold;
}

.two_box_02 ul li:first-child{
	margin: 0 2% 0 0;
}


.cont01 .two_box_02 ul li img{
    border-top: 2px solid #000;
}



/* --- お申込み方法 --- */
.method{
	padding:15px;
	background: #e5e5e5;
}

.method ul{
	overflow: hidden;
	padding:15px;
	
	background:#fff;
}

.method ul li:first-child{
    float: right;
    width: 48%;
    margin: 10% 0 0 0;
}

.method ul li:first-child p.step{
	width: 118px;
	margin: 0 0 5px 0 !important;
    padding: 2px 10px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

.method ul li:first-child p.step_l{
	margin: 0 0 5px 0;
	font-size: 21px;
	font-weight: bold;
}

.method ul li:last-child{
    width: 470px;
    padding: 0 20px 0 0;
}

#content.cmn_wrapper01 p.arrow{
	text-align: center;
	margin:0 0 10px 0;
}

#content.cmn_wrapper01 p.arrow img{
	max-width: 45px;
}


/* --- ネーム刺しゅうカラー/20181109修正箇所 --- */
#content.cmn_wrapper01 .item_list02_wide .col{
    margin: 0 10px 16px 0;
}
#content.cmn_wrapper01 .item_list02_wide .col .detail{
	font-size: 18px;
    text-align: center;
}


/*----------------------
	nav
----------------------*/
ul.nav{
	overflow: hidden;
	margin: 0 0 30px 0;
}

ul.nav li:first-child{
	border-left: 1px solid #bebebe;
}

ul.nav li{
	float: left;
	width: 19.8%;
	height: 150px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	border-right: 1px solid #bebebe;
	
	background: url(../img/arrow_02.jpg) no-repeat bottom center
}

ul.nav li img{
	max-width: 170px;
	height: auto;
}

#content.cmn_wrapper01 li p{
	margin: 0;
}

ul.nav li p span{
	display: block;
	color: #959595;
	font-size: 12px;
	font-weight: normal;
	margin: 0 0 5px 0;
}

ul.nav li:first-child a{
	padding: 15px 0 10px;
	color: #e82541 !important;
}
ul.nav li:nth-child(2) a{
	padding: 15px 0 10px;
	color: #347cc7 !important;
}

ul.nav li:nth-child(3) a{
	color: #fc6d7a !important;
}
ul.nav li:nth-child(4) a{
	color: #ec9130 !important;
}
ul.nav li:last-child a{
	padding: 10px 0;
	color: #5da94c!important;
}

ul.nav li a{
	display: block;
	text-decoration: none !important;
}

/*----------------------
	cont01（ネーム刺しゅう）
----------------------*/
#order_contents .cont01 h3{
	background: #347cc7;
}

#order_contents .cont01 p.step{
	background: #347cc7;
}

/*----------------------
	cont02（ネーム・メッセージ刻印）
----------------------*/
#order_contents .cont02 h3{
	background: #f78c96;
}

#content.cmn_wrapper01 .two_box_02 p.btn{
	width: 100%;
}

#order_contents .cont02 .wrapper dl dd p img{
	display:inline-block;
	vertical-align:middle;
	max-width: 48px;
}

#order_contents .cont02 .wrapper dl dd p{
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#order_contents .cont02 .wrapper dl dd p span{
	font-size: 26px;
}

#order_contents .cont02 p.step{
	background: #f78c96;
}


/*----------------------
	cont03（マルチネーム刺しゅう）
----------------------*/
#order_contents .cont03 h3{
	background: #ffa749;
}

#order_contents .cont03 .wrapper dl dd p img{
	display:inline-block;
	vertical-align:middle;
	max-width: 48px;
}

#order_contents .cont03 .wrapper dl dd p,
#order_contents .cont03 .wrapper p.text span{
	font-size: 26px;
	font-weight: bold;
}

#order_contents .cont03 .wrapper p.text{
	font-size: 18px;
}

#order_contents .cont03 p.step{
	background: #ffa749;
}


/*----------------------
	cont04（パンツすそ上げ）
----------------------*/
#order_contents .cont04 h3{
	background: #60bd4c;
}

#order_contents .cont04 p.step{
	background: #60bd4c;
}

dl.caution{
	padding: 15px;
	margin: 0 0 20px 0;
	border: 2px solid #e95383;
}

dl.caution dt{
	margin: 0 0 10px 0;
	font-size: 21px;
	font-weight: bold;
}

/*----------------------
	seal（印鑑）
----------------------*/
#order_contents #seal h3{
	background: #e7273e;
}




/*-------------------------------------------
	677px 以下の画面サイズ
-------------------------------------------*/
@media screen and (max-width: 677px) {
/*----------------------
	common
----------------------*/
.pc{display: none;}
.sp{display: block;}

#order_contents h3{
	font-size: 21px;
	margin: 0 0 10px 0;
}

#order_contents h4{
	font-size: 24px;
}
#order_contents h4 span {
    font-size: 16px;
}
#order_contents h4 img {
    width: 35px;
}

#content.cmn_wrapper01 p.btn{
    width: 90%;
    max-width: 410px;
}
#content.cmn_wrapper01 p.btn a{
	font-size: 18px;
}

/* --- two_box_01 --- */
ul.two_box_01{
	margin: 0 0 1% 0;
}

ul.two_box_01 li{
	float: left;
	width: 49.5%;
}

/* --- two_box_02 --- */
.two_box_02 ul li{
	float: none;
    max-width: none;
	width: 100%;
}

.two_box_02 ul li:first-child{
    margin:0 0 15px 0;
}

.line_sp{
    border-bottom: 1px dashed #ccc;
}


/*----------------------
	nav
----------------------*/
ul.nav li {
	width: 19.6%;
    height: 95px;
    font-size: 13px;
    background:none;
}

ul.nav li img{
    width: 74%;
	height: auto;
}

/*----------------------
	method
----------------------*/
.method img{
	width: 100%;
	height: auto;
}

.method ul li:first-child{
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
}

.method ul li:first-child p.step{
    width: 80px;
	font-size: 20px;
}

.method ul li:first-child p.step_l{
	font-size: 16px;
}

.method ul li:last-child{
	max-width: 470px;
	width: 100%;
	display:block;
	margin: 0;
}

/*----------------------
	cont02（ネーム・メッセージ刻印）
----------------------*/
#order_contents .cont02 .wrapper dl dd p img{
	max-width: 32px;
}

#order_contents .cont02 .wrapper dl dd p{
	font-size: 13px;
	font-weight: bold;
}

#order_contents .cont02 .wrapper dl dd p span{
	font-size: 16px;
}

}



/*-------------------------------------------
	414px 以下の画面サイズ　スマホ
-------------------------------------------*/
@media screen and (max-width: 414px) {
/*----------------------
	common
----------------------*/
#order_contents section {
    margin: 0px 0 20px 0;
}

#seal,
.cont01,
.cont02,
.cont03,
.cont04{
	margin: -100px 0 30px 0;
    padding: 100px 0 0 0;
}

#order_contents h3{
	font-size: 16px;
}

#order_contents h4{
    font-size: 20px;
	margin: 0px 0 6px 0;
}
#order_contents h4 img {
    width: 28px;
}

#order_contents h5{
    font-size: 16px;
    border-left: 10px solid #f78c96;
    border-bottom: 2px solid #f78c96
}
#order_contents h5 span{
    font-size: 13px;
}

#order_contents h6{
    font-size: 14px;
}


/* --- tree_box_01 --- */
ul.tree_box_01 li{
	font-size: 10px;
}


/* --- tree_box_02 --- */
.tree_box_02 dl,
.tree_box_02 dl:nth-child(3n){
	width: 48%;
    margin: 0 2% 10px 0;
}

.tree_box_02 dl dt{
    margin: 0px 0 5px 0;
    font-size: 11px;
}


/* --- two_box_01 --- */
/*ul.two_box_01 li,
ul.two_box_01 li:first-child{
	width: 100%;
	margin: 0 0 5px 0;
}*/


/* --- two_box_02 --- */
.two_box_02 ul li{
	float: none;
	width: 100%;
}

.two_box_02 ul li:first-child{
    margin:0 0 15px 0;
}

.line_sp{
    border-bottom: 1px dashed #ccc;
}



/* --- btn --- */
#content.cmn_wrapper01 p.btn{
	width: 100%;
}

#content.cmn_wrapper01 p.btn a{
    font-size: 14px;
	background-size: 14px;
}




/* --- ネーム刺しゅうカラー/20181109修正箇所 --- */
#content.cmn_wrapper01 .item_list02_wide .col{
	width: 48.5%;
    margin: 0 3% 16px 0;
}

/*----------------------
	nav
----------------------*/
ul.nav li {
    width: 47%;
    height: 120px;
	margin: 0 0 2% 0;
	padding: 5px 0;
    font-size: 14px;
	border: 3px solid #bebebe;
	background: url(../img/arrow_02.jpg) no-repeat center 95%;
	background-size: 15px;
}

ul.nav li:first-child{
	border: 3px solid #bebebe;
}

ul.nav li:nth-child(odd){
	margin: 0 2% 0 0;
}

/*----------------------
	method
----------------------*/
.method{
	padding: 10px;
}

.method ul{
	padding: 10px;
}

#content.cmn_wrapper01 p.arrow img{
    max-width: 32px;
}


/*----------------------
	cont02（ネーム・メッセージ刻印）
----------------------*/
#order_contents .cont02 .wrapper dl dt{
	margin: 0 0 5px 0;
}

#order_contents .cont02 .wrapper dl dd p img{
	 max-width: 30px;
    margin: 0 5px 0 0;
}

#order_contents .cont02 .wrapper dl dd p{
	font-size: 11px;
	font-weight: bold;
}

#order_contents .cont02 .wrapper dl dd p span{
	font-size: 16px;
}


/*----------------------
	cont03（マルチネーム刺しゅう）
----------------------*/
#order_contents .cont03 .wrapper dl dd p img{
	 max-width: 30px;
    margin: 0 5px 0 0;
}

#order_contents .cont03 .wrapper dl dd p,
#order_contents .cont03 .wrapper p.text,
#order_contents .cont03 .wrapper p.text span{
	font-size: 13px;
}

/*----------------------
	cont04（パンツすそ上げ）
----------------------*/
dl.caution dt {
    margin: 0 0 5px 0;
    font-size: 16px;
}


}