/*
THEME NAME: coatolie
THEME URI: http://www.coatolie.com
DESCRIPTION:
VERSION: 1.0
*/

/*reset*/
* {margin: 0;padding: 0;}
a {text-decoration : none}
ul, ol {list-style : none}
img {vertical-align : middle}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 1em;}
div{-webkit-box-sizing:border-box;box-sizing:border-box;}
/*common class*/
.bold {font-weight: bold;}
.underline{border-bottom:1px solid #000;padding-bottom:8px;}
.small2 {font-size: 0.8rem !important;}
.small {font-size: 0.9rem !important;}
.large1 {font-size: 1rem !important;}
.large11 {font-size: 1.1rem !important;}
.large12 {font-size: 1.2rem !important;}
.large13 {font-size: 1.33rem !important;}
.large15 {font-size: 1.5rem !important;}
.large2 {font-size: 2rem !important;}
.large25 {font-size: 2.5rem !important;}
.large3 {font-size: 3rem !important;}
.large4 {font-size: 4rem !important;}
.large5 {font-size: 5rem !important;}
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.mb12 {margin-bottom:12px !important;}
.mb25 {margin-bottom:25px !important;}
.mb50 {margin-bottom:50px !important;}
.mb100{margin-bottom:100px !important;}
.mb200{margin-bottom:200px !important;}

.cb{clear:both;}
.pr{position:relative;}
.w100p{width:100%;}
.w960{max-width:960px;}
.w640{max-width:640px;}
.bc{margin-left:auto; margin-right:auto;}
.pc_show{display:block;}
.sp_show{display:none;}
.cf:after {
    content:" ";
    display:block;
    clear:both;
}


.aligncenter{
display:block;
margin:0 auto 25px auto;
}
.alignleft{
float:left;
margin:0 25px 25px 0;
}
.alignright{
float:right;
margin:0 0px 25px 25px;
}

/*my class*/
.wrapper{padding:0px 5%;}
.serif{font-family: "貂ｸ譏取悃", YuMincho, "繝偵Λ繧ｮ繝取�譛� ProN W3", "Hiragino Mincho ProN", "HG譏取悃E", "�ｭ�ｳ �ｰ譏取悃", "�ｭ�ｳ 譏取悃", serif;}
.gray{color:#999;}
.btn{
color:#000;
text-align:center;
background:#fff;
padding:12px;
border:1px solid #1d2a56;
width:250px;
display:block;
	margin:0 auto;
font-family: "貂ｸ譏取悃", YuMincho, "繝偵Λ繧ｮ繝取�譛� ProN W3", "Hiragino Mincho ProN", "HG譏取悃E", "�ｭ�ｳ �ｰ譏取悃", "�ｭ�ｳ 譏取悃", serif;
font-size:1.5rem;
}
.btn:hover{
background:#1d2a56;
color:#fff;
text-decoration:none;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.btns{text-align:center;}
.btns li{
display:inline-block;
margin:0px 12px 25px 15px;
}
.htitle{margin-bottom:50px;}


/*tag*/
html {
font-family: "繝｡繧､繝ｪ繧ｪ", Meiryo, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
font-size : 12px;
line-height : 1.8;
letter-spacing: 0.1em;
color: #000;
}
section{
margin:0 auto;
padding:0px;
margin-bottom:100px;
-webkit-box-sizing:border-box;
        box-sizing:border-box;
}
a{color:#000;}
a:hover{text-decoration:underline;}
#content{
font-size:1.2rem;
padding-top:87px;
}

/*blog*/
#bloglist li{
	width:30%;
	margin:0px 1.5% 25px 1.5%;
	float:left;
}
#bloglist li img{
	width:100%;
}
#single p{
	margin-bottom:1em;
}
#single img{
	width:100%;
}

/*mv*/

#blog #mv{
background:url(../demo_img/blog_mv.jpg) center top no-repeat;
}
#contact #mv{
background:url(../demo_img/contact_mv.jpg) center top no-repeat;
}
#order #mv{
background:url(../demo_img/order_mv.jpg) center top no-repeat;
}
#service #mv{
background:url(../demo_img/service_mv.jpg) center top no-repeat;
}
#about #mv{
background:url(../demo_img/about_mv.jpg) center top no-repeat;
}
#linepay #mv{
	background:url(../demo_img/about_mv.jpg) center top no-repeat;
}
#dress-remake #mv {
	background:url(../demo_img/hp-dress.png) center top no-repeat;
}

.linepay {
	display: block;
	width: 100%;
	margin: 60px auto;
	padding: 30px 10px;
	background: #1E2B56;
	color: #FFF;
	font-size: 16px;
	text-align: center;
}

#mv{
background-size:cover !important;
height:640px;
}

/*contact*/
#form dt{
	float:left;
	width:200px;
	text-align:right;
	font-size:1.3rem;
}
#form dd{
margin-left:220px;
	margin-bottom:25px;
	max-width:500px;
}
#form dd input,#form dd textarea{
	padding:10px;
	width:100%;
	border:1px solid #aaa;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
}
#form input[type='submit']{
	display:block;
	padding:12px;
	border:1px solid #aaa;
	background:#fff;
	font-size:1.3rem;
	max-width:300px;
	margin:0 auto;
}
#form input[type='submit']:hover{
background:#1d2a56;
color:#fff;
text-decoration:none;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

/*order*/
#howtoorder li{
	position:relative;
	padding-top:1px;
}
#howtoorder li .num{
	width:100px;
	float:left;

}
#howtoorder li .box{
margin-top:50px;
margin-left:50px;
	margin-bottom:50px;
background:#eee;
	padding:25px 75px;
}

/*service*/

.pricelist{
text-align:center;
border-collapse: collapse;
	width:100%;
}
.pricelist th{
font-size:1.3rem;
border-bottom:3px solid #000;
padding:10px 50px;
}
.pricelist td{
font-size:1.3rem;
border-bottom:1px solid #000;
padding:10px 0px;
}
.pricelist td:nth-child(3n-2){text-align:left;}
.pricelist td:nth-child(3n-1){text-align:right;}
.pricelist td:nth-child(3n){text-align:center;}
.sample li{
width:48%;
border:1px solid #1d2a56;
margin-bottom:25px;
}
.sample li:nth-child(odd){float:left;}
.sample li:nth-child(even){float:right;}
.sample h3{
background:#1d2a56;
padding:10px 0px;
color:#fff;
text-align:center;
}
.sample p{
padding:25px;
}
/*about*/

#about #mv .text{
float:left;
width:60%;
background:#1d2a56;
margin-left:20%;
margin-right:20%;
margin-top:500px;
margin-bottom:100px;
padding:50px;
color:#fff;
text-align:center;
}
#about #mv .text .text01{
	font-size:2.5rem;
	margin-bottom:50px;
}
#about #mv .text .text02 p{
	font-size:1.2rem;
	margin-bottom:1em;
}
#about #associates .text{
float:left;
width:45%;
}
#about #associates .photo{
float:right;
width:50%;
}
#about #associates li{
width:46%;
margin-bottom:50px;
border:2px solid #eee;
background:#eee;
}
#about #associates li:nth-child(odd){
float:left;
}
#about #associates li:nth-child(even){
float:right;
}
#about #associates li .logo{
float:left;
width:209px;
}
#about #associates li .shop{
margin-left:234px;
padding-top:25px;
padding-right:25px;
}
#about #access iframe{
display: block;
width: 960px;
height:400px;
margin: 30px auto auto;
}
#about #access .photo{
max-width:400px;
float:left;
}
#about #access .text{
margin-left:425px;
padding-top:25px;
}
/*home*/
#home_mv .bg{
	background:url(../demo_img/home_mv_bg.jpg) no-repeat right top;
	height:600px;
	background-size:cover;
}
#home_mv .photo{
width:70%;
float:right;
}
#home_mv .text{
position:absolute;
top:50px;
/* right:63%; */
left:0%;
z-index:2;
padding-left:5%;
}
#home #about .text{
float:left;
width:45%;
}
#home #about .photo{
float:right;
width:50%;
}
#home #info .text{
float:left;
width:25%;
}
#home #info .news{
float:right;
width:65%;
padding-top:30px;
}
#home #info .news dt{
float:left;
width:80px;
}
#home #info .news dd{
margin-left:100px;
}
#home #s01, #home #s02, #home #s03{
	margin-bottom:100px;
}
#home #s01 .photo,#home #s03 .photo{
width:55%;
float:right;
}
#home #s01 .text,#home #s03 .text{
width:45%;
float:left;
padding:0px 5%;
}
#home #s02 .photo{
width:55%;
float:left;
}
#home #s02 .text{
width:45%;
float:right;
padding:0px 5%;
}


/*header footer*/
header{
background:#fff;
padding:15px 0px;
position:fixed;
width:100%;
height:87px;
-webkit-box-sizing:border-box;
        box-sizing:border-box;
z-index:20;
}
h1{
float:left;
width:172px;
}
nav li{
display:inline-block;
margin-left:18px;
font-size:1.33rem;
padding-top:25px;
line-height:1;
}
.sp_open, .sp_close{
display:none;
position:absolute;
top:20px;
right:25px;
font-size:2rem;
}

footer{
background:#1d2a56;
padding:50px 5%;
color:#fff;
}
footer .left{
	float:left;
	width:45%;
	margin-right:5%;
	text-align:right;
}
footer .right{
	float:right;
	width:45%;
	margin-left:5%;
	text-align:left;
}
footer a{color:#fff;}
@media screen and (max-width : 800px) {
html{font-size:10px;}
.pc_show{display:none;}
.sp_show{display:block;}
section{margin-bottom:50px;}
#content{
padding-top:71px;
}
header{
height:71px;
}
h1{
float:none;
width:94px;
margin:12px auto;
}
.htitle{margin-bottom:25px;}
.sp_open{display:block;}
nav{
display:none;
position:fixed;
top:71px;
left:0;
width:100%;
background:#fff;
z-index:100;
border-top:1px solid #ccc;
}
nav li{
display:block;
margin-left:0px;
font-size:1.33rem;
padding-top:0px;
line-height:1;
}
nav li a{
display:block;
padding:25px;
border-bottom:1px solid #ccc;
text-align:center;
}
footer .left, footer .right{
	float:none;
	width:100%;
	margin:25px 0;
	text-align:center;
}


	/*blog*/
#bloglist li{
	width:300px;
	float:none;
}

/*mv*/
#mv{
height:200px;
}
#blog #mv{
background:url(../demo_img/blog_mv_s.jpg) center top no-repeat;
}
#contact #mv{
background:url(../demo_img/contact_mv_s.jpg) center top no-repeat;
}
#order #mv{
background:url(../demo_img/order_mv_s.jpg) center top no-repeat;
}
#service #mv{
background:url(../demo_img/service_mv_s.jpg) center top no-repeat;
}
#about #mv{
background:url(../demo_img/about_mv_s.jpg) center top no-repeat;
}

	/*contact*/
	#form dt{
	float:none;
	width:100%;
	text-align:left;
}
#form dd{
margin-left:0px;
	margin-bottom:25px;
}
	/*order*/
#order li .num{
	width:50px;
}
#order li .box{
margin-top:25px;
margin-left:25px;
	margin-bottom:25px;
background:#eee;
	padding:25px 25px;
}

/*service*/
.pricelist th{
font-size:1.2rem;
padding:10px 10px;
	vertical-align:bottom;
}
.sample li{
width:100%;
max-width:450px;

float:none !important;
}
/*about*/

#about #mv .text{
width:100%;
margin-left:0%;
margin-right:0%;
margin-top:200px;
margin-bottom:100px;
padding:50px 25px;
color:#fff;
text-align:center;
}
#about #mv .text .text01{
	font-size:1.5rem;
	margin-bottom:25px;
}
#about #mv .text .text02 p{
text-align:left;
}
#about #associates .text{

float:none;
width:100%;
}
#about #associates .photo{
float:none;
width:100%;
margin-bottom:50px;
}
#about #associates li{
width:100%;
}
#about #associates li:nth-child(odd),#about #associates li:nth-child(even){
float:none;
}

#about #access .photo{
max-width:400px;
float:none;
margin:0px auto 50px auto;
}
#about #access .text{
margin-left:0px;
padding-top:0px;
}

	/*home*/
#home_mv .bg{
	background:url(../demo_img/home_mv_bg_s.jpg) no-repeat right top;
	height:200px;
	background-size:cover;
	margin-bottom:50px;
}

/*home
#home_mv .photo{
display:none;
}
#home_mv{
background:url(images/home_mv_p01.jpg) no-repeat right top;
background-size: cover;
height:400px;
}
#home_mv .text{
position:absolute;
top:180px;
left:0%;
z-index:2;
padding-left:5%;
}*/
#home #about .text{
float:none;
width:100%;
}
#home #about .photo{
float:none;
width:100%;
margin-bottom:50px;
}
#home #info .text{
float:none;
width:100%;
}
#home #info .news{
float:none;
width:100%;
	padding-top:0px;
}
#home #info .news dt{
float:none;
width:100%
}
#home #info .news dd{
margin-left:0px;
}
#home #s01 .photo,#home #s03 .photo{
float:none;
width:100%;
padding:0px 0px 0px 5%;
}
#home #s01 .text,#home #s03 .text{
float:none;
width:100%;
padding:0px 5%;
}
#home #s02 .photo{
float:none;
width:100%;
padding:0px 5% 0px 0px;
}
#home #s02 .text{
float:none;
width:100%;;
padding:0px 5%;
}
#about #associates li .logo{
float:none;
width:209px;
margin:0 auto;
padding-top:25px;
}
#about #associates li .shop{
margin-left:0px;
padding:25px;
}
}

/* 2020.10霑ｽ蜉�蛻� **************************/

.f-wrap {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.f-logo {
	margin-right: auto;
}

.f-coatolie1 {
	margin-right: auto;
}

.f-coatolie2 {}

.mapline {
	width: 100%;
	max-width: 960px;
	margin: 80px auto;
	border: 1px dashed #ccc;
}

.bnr-line {
	margin-bottom: 150px;
	text-align: center;
}

.bnr-line img {
	max-width: 100%;
	height: auto;
}

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

	.f-wrap {
		width: 100%;
		max-width: 1000px;
		margin: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
			-ms-flex-pack: center;
				justify-content: center;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
	}

	.f-logo {
		margin-right: 0;
		margin-bottom: 30px;
		text-align: center;
	}

	.f-coatolie1 {
		margin-right: 0;
		text-align: center;
	}

	.f-coatolie2 {
		text-align: center;
	}

	#about #access iframe{
		display: block;
		width: 100%;
		height:400px;
		margin: 30px auto auto;
	}

	.bnr-line {
		margin-bottom: 60px;
		padding: 0 5%;
		text-align: center;
	}

}