img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
html{ overflow: auto;}
body{ min-width: 1280px; overflow: hidden; margin:0 auto; padding:0; font-family: "Noto Sans Japanese"; text-transform: none !important;}
a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all .5s; outline: none;}

/* IE8+, Chrome */
a{ outline: 0;}

/* Firefox */
a::-moz-focus-inner,
a::-moz-focus-inner { border: 0;}

#container{ width: 100%; min-width: 1280px; margin: 0 auto; color: #3E3A39; font-size: 16px;}
#container .btn-shop{ position: fixed; top: 120px; right: 0;}
#container .btn-shop img{ width: 150px;}

/*--- top pages ---*/
#mainArea{ width: 100%; margin-bottom: 90px;}
#mainArea img{ width: 100%;}
#topContents{ width: 100%;}
#topContents h2{ margin: 0 0 30px; font-size: 22px; font-weight: normal;}
#topContents h2:first-letter{ font-size: 34px; font-weight: bold;}
#topContents h2 span{ font-size: 14px; display: inline-block; margin-left: 15px;}
#news{ width: 1000px; margin: 0 auto 100px; position: relative;}
#news table{ width: 100%; border-top: solid 1px #DADADA;}
#news th{ font-weight: normal; text-align: left; padding: 30px 185px 26px 0; border-bottom: solid 1px #DADADA;}
#news td{ padding: 30px 0 26px; border-bottom: solid 1px #DADADA;}
#news a{ color: #3E3A39; text-decoration: none;}
#news a:hover{ color: #439DB9; text-decoration: none;}
#news p.btn{ position: absolute; width: 150px; top: 0; right: 0; /*margin: 30px auto 0;*/}
#news p.btn img{ width: 150px;}
#concept{ width: 100%; background: #F1F0EE; padding: 70px 0;}
#concept .conceptArea{ width: 900px; margin: 0 auto; background: #FFF; padding: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#concept .conceptArea .lCon{ width: 477px;}
#concept .conceptArea .lCon p{ line-height: 180%;}
#concept .conceptArea .lCon p.btn{ margin-top: 30px;}
#concept .conceptArea .lCon p.btn img{ width: 150px;}
#concept .conceptArea .rCon{ width: 388px;}
#concept .conceptArea .rCon img{width: 388px;}
#works{ width: 100%; padding: 100px 0;}
#works .inner{ width: 1000px; margin: 0 auto 45px;}
#works .inner p{ line-height: 180%;}
#works .loop li{ width: 25%;}
#works .loop li img{ width: 100%;}


/*--- second pages ---*/
#secContents{ width: 100%;}
#secContents h2{ margin: 0 0 20px; font-size: 22px; font-weight: normal; line-height: 120px; border-top: #ECECEC solid 2px; box-sizing: border-box; border-bottom: #CBE6ED solid 7px; text-align: center;}
#secContents h2:first-letter{ font-size: 34px; font-weight: bold;}
#secContents h2 span{ font-size: 14px; display: inline-block; margin-left: 15px;}
#secContents .pankuzu{ width: 1000px; margin: 0 auto 70px; font-size: 14px;}
#secContents .pankuzu a{ color: #3E3A39; text-decoration: none;}
#secContents .pankuzu a:hover{ color: #3E3A39; text-decoration: underline;}

#wrapper{ width: 1000px; margin: 0 auto;}
#wrapper h3{ margin: 0 0 30px;}
#wrapper h3 p{ line-height: 180%;}
#wrapper p.lead{ margin-bottom: 50px; line-height: 180%;}
#wrapper p.lead span.right{ display: block; text-align: right;}
#wrapper p.lead a{ color: #3E3A39; text-decoration: underline;}
#wrapper p.lead a:hover{ color: #439DB9; text-decoration: none;}

/* news */
#newsWrap{ width: 1000px; margin: 0 auto 100px;}
#newsWrap h3{ margin: 0 0 30px;}
#newsWrap p.lead{ margin-bottom: 50px; line-height: 180%;}
#newsWrap .oneImg{ width: 1000px; margin: 0 auto;}
#newsWrap .twoImg{ width: 1000px; margin: 0 auto;}
#newsWrap .twoImg ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#newsWrap .twoImg li{ width: 475px;}
#newsWrap .twoImg li img{ width: 475px}
#newsWrap .mb50{ margin-bottom: 50px;}

/* concept */
.conceptImg{ width: 100%; background: #F1F0EE; text-align: center; margin: 0 auto 100px; padding: 70px 0;}
.conceptImg img{ width: 1000px;}

/* shop */
#wrapper .shop{ margin: 0 auto 100px;}
#wrapper .shop ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#wrapper .shop li{ width: 300px; margin-bottom: 50px;}
/* 3列リストの一番左下にある要素 */
#wrapper .shop li:nth-child(3n+1):nth-last-child(-n+3),
/* 3列リストの一番左下にある要素以降にあるliすべて */
#wrapper .shop li:nth-child(3n+1):nth-last-child(-n+3) ~ li{ margin: 0;}
#wrapper .shop li a{ display: block;}
#wrapper .shop li img{ width: 300px;}
#wrapper .shop li p{ font-size: 14px; margin: 10px 0 0; line-height: 180%;}
#wrapper .shop li p.shopTtl{ font-weight: bold;}


/* works */
#wrapper .worksTop{ margin: 0 auto 100px;}
#wrapper .worksTop ul{ display: flex; flex-wrap: wrap; justify-content: start; align-items: top; width: 1050px; box-sizing: border-box; overflow: hidden;}
#wrapper .worksTop li{ width: 300px; margin: 50px 50px 0 0; vertical-align: middle;}
#wrapper .worksTop li:nth-child(1),
#wrapper .worksTop li:nth-child(2),
#wrapper .worksTop li:nth-child(3){ margin-top: 0;}
#wrapper .worksTop li a{ display: block;}
#wrapper .worksTop li img{ width: 300px;}
#wrapper .worksTop li p{ margin: 20px 0 0; font-weight: bold; line-height: 30px;}
#wrapper .worksTop li p span{ display: inline-block; line-height: 30px; color: #FFF; background: #8CC4D5; margin-right: 10px; padding: 0 10px; box-sizing: border-box;}

/* works-ex */
#wrapper .worksWrap{ margin: 0 auto 100px;}
#wrapper .worksWrap .worksV{ margin: 0 0 60px;}
#wrapper .worksWrap h3{ margin: 0 0 40px; font-weight: bold; line-height: 30px;}
#wrapper .worksWrap h3 span{ display: inline-block; line-height: 30px; color: #FFF; background: #8CC4D5; margin-right: 15px; padding: 0 20px; box-sizing: border-box;}
#wrapper .worksWrap p.place{ margin: 0 0 40px; padding: 0 0 40px; border-bottom: #EEEEEE solid 1px; line-height: 180%;}
#wrapper .worksWrap p.ex{ margin: 0 0 50px; padding: 0 0 40px; border-bottom: #EEEEEE solid 1px; line-height: 180%;}

#wrapper .worksWrap .parent-container{ width: 100%; margin: 0 auto 100px;}
#wrapper .worksWrap .parent-container ul{ margin: 0 auto;}
#wrapper .worksWrap .parent-container li{ width: 244px; margin-bottom: 6px;}
#wrapper .worksWrap .parent-container li img{ width: 100%;}

/* procedure */
#procedure{ width: 100%; background: #F1F0EE;}
#procedure .pdWrap{ width: 1000px; margin: 0 auto; padding: 80px 0 100px;}
#procedure .pdWrap ul{ width: 100%;}
#procedure .pdWrap li{ width: 100%; height: 180px; padding: 35px 55px 35px 275px; display: block; background: #FFF; margin-bottom: 60px; position: relative; box-sizing: border-box;}
#procedure .pdWrap li::before{ content: ''; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); border-top: 40px solid #FFF; border-right: 55px solid transparent; border-left: 55px solid transparent;}
#procedure .pdWrap li h4{ margin: 0 0 20px; font-size: 20px;}
#procedure .pdWrap li p{ line-height: 200%;}
#procedure .pdWrap li p a{ color: #3E3A39; text-decoration: none;}
#procedure .pdWrap li p a:hover{ color: #3E3A39; text-decoration: none;}
#procedure .pdWrap li.pd01{ background: url("../img/procedure/icon01.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd02{ background: url("../img/procedure/icon02.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd03{ background: url("../img/procedure/icon03.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd04{ background: url("../img/procedure/icon04.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd05{ background: url("../img/procedure/icon05.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd06{ background: url("../img/procedure/icon06.png") no-repeat 55px 35px #FFF; background-size: 140px 110px;}
#procedure .pdWrap li.pd07{ background: url("../img/procedure/icon07.png") no-repeat 55px 35px #FFF; background-size: 140px 110px; margin-bottom: 0;}
#procedure .pdWrap li.pd07::before{ content: none;}


/* office */
#office{ width: 100%; background: #F1F0EE; padding: 70px 0;}
#office .officeWrap{ width: 1000px; margin: 0 auto;}
#office .officeWrap h3{ margin: 0 0 30px;}
#office .officeTable{ width: 700px; margin: 0 auto; box-sizing: border-box;}
#office .officeTable table{ width: 100%; border-top: solid 1px #DADADA; box-sizing: border-box;}
#office .officeTable table th{ width: 40%; padding: 15px 0 15px 40px; font-weight: normal; text-align: left; vertical-align: top; border-bottom: solid 1px #DADADA;}
#office .officeTable table td{ padding: 15px 0 15px 0; border-bottom: solid 1px #DADADA;}
#access{ width: 1000px; margin: 90px auto 100px;}
#access h3{ margin: 0 0 30px;}
#access iframe{ width: 1000px; height: 450px; margin: 0 auto;}

.parent-container.office{ width: 1000px; margin: 0 auto 70px;}
.parent-container.office ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.parent-container.office li{ width: 300px;}
.parent-container.office li img{ width: 300px;}
.parent-container.office li a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all  0.3s ease;}

/* privacy */
#privacy{ width: 1000px; margin: 0 auto 100px;}
#privacy ul.privacyList li::before{ content: ""; width: 16px; height: 16px; background: #CBE6ED; margin-right: 8px; vertical-align: -2px; display: inline-block;}
#privacy ul.privacyList li{ font-size: 16px; font-weight: bold; line-hright: 140%; margin-bottom: 30px;}
#privacy ul.privacyList li:last-child{ margin-bottom: 0;}
#privacy ul.privacyList li p{ font-size: 16px; font-weight: normal; margin-top: 10px;}

/* contact */
.formArea{ width: 100%; background: #F1F0EE; padding: 70px 0;}
.formArea form{ width: 900px; margin: 0 auto; background: #FFF; padding: 45px 50px;}
.formArea p{ margin-bottom: 40px; line-height: 180%;}
.formArea p span{ color: #E7443D;}
.formArea p.rLink{ width: 1000px; text-align: right; margin: 0 auto 5px; font-size: 14px;}
.formArea p.rLink a{ color: #3E3A39; text-decoration: none;}
.formArea p.rLink a:hover{ text-decoration: underline;}
.fromTel{ text-align: center; width: 400px; margin: 70px auto; padding: 20px 0; font-size: 20px; border: #3E3A39 solid 1px;}
.fromTel span{ font-size: 30px; font-weight: bold;}
.fromTel a{ color: #3E3A39; text-decoration: none;}
.fromTel a:hover{ color: #3E3A39; text-decoration: none;}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    height: 30px;
    background: #FFF;
    position: relative;
    z-index: 1;
    padding: 0 40px 0 10px;
    border: #9C9C9C solid 2px;
	font-family: "Noto Sans Japanese";
}
select::-ms-expand {
    display: none;
}
.selectWrap{
    position: relative;
    display: inline-block;
}
.selectWrap::before{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    background: #FFF;
    height: 100%;
    width: 30px;
}
.selectWrap::after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 9px;
    width: 0;
    height: 0;
    border: #9C9C9C solid 2px !important; 
}
input[type="text"],
.input textarea {
	outline: none;
	border: #9C9C9C solid 2px;
	-webkit-transition: all .3s;
	transition: all .3s;
	padding: 10px;
	font-family: "Noto Sans Japanese";
}
.input input[type="text"]:focus,
.input textarea:focus {
	box-shadow: 0 0 7px #8CC4D5;
	border: 2px solid #8CC4D5;
}
textarea {
  resize: vertical;
}
input[type="submit"] {
  display: block;
  width: 250px;
  height: 75px;
  padding: 0;
  margin: 30px 0 0;
  background: #8CC4D5;
  border: none;
  color: #FFF;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  font-family: "Noto Sans Japanese";
}
input[type="button"] {
  display: inline-block;
  width: 170px;
  height: 26px;
  padding: 0;
  margin: 0;
  background: #8CC4D5;
  border: none;
  color: #FFF;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  font-family: "Noto Sans Japanese";
}
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #A9D3E0;
}
input[type="submit"]:active,
input[type="button"]:active {
  background: #A9D3E0;
}

.thanks_info{ border: #E7443D solid 1px; padding: 20px; margin: 60px 0 100px;}
.thanks_info p{ padding: 0; margin: 15px 0 0; line-height: 180%;}
.thanks_info p.ttl{ font-size: 16px; font-weight: bold; margin: 0;}
.thanks_info p span.red{ color: #E7443D;}

#page-top{ margin: 0; padding: 0; display: none; position: fixed; right: 2%; bottom: 7px; z-index: 100;}
#page-top #move-page-top{ width: 50px; display: block; cursor: pointer;}
#page-top #move-page-top img{ width: 50px;}

footer{ width: 100%; background: #8CC4D5; color: #FFF;}
footer .footArea{ width: 1000px; margin: 0 auto; padding: 60px 0;}
footer .footArea::after{ content:""; display:block; clear:both;}
footer .footAdd{ width: 500px; float: left; display: flex; flex-wrap: wrap; justify-content: start; align-items: center;}
footer .footAdd .logo{ width: 103px; margin-right: 30px;}
footer .footAdd .logo img{ width: 103px;}
footer .footAdd .address p.name{ font-size: 16px; border-bottom: #FFF solid 1px; padding-bottom: 10px;}
footer .footAdd .address p.name strong{ font-size: 30px; display: block;}
footer .footAdd .address p.tel{ margin: 2px 0 0;}
footer .footAdd .address p.tel span{ margin-left: 15px; display: inline-block;}
footer .footAdd .address p.tel a{ color: #FFF; text-decoration: none; font-weight: bold; font-size: 24px;}
footer .footAdd .foottxt{ margin-top: 40px;}
footer .footAdd .foottxt h4{ font-size: 18px; margin: 0 0 5px;}
footer .footAdd .foottxt p{ font-size: 14px; line-height: 160%;}
footer .footArea .footLink{ width: 400px; float: right; padding: 0;}
footer .footArea .footLink:after{ content:""; display:block; clear:both;}
footer .footArea .footLink ul{ display: inline-block;}
footer .footArea .footLink ul:first-child{ margin-right: 70px;}
footer .footArea .footLink li{ margin: 0 0 30px; font-size: 16px;}
footer .footArea .footLink li a{ color: #FFF; text-decoration: none;}
footer .footArea .footLink li a:hover{ color: #439DB9; text-decoration: none;}
footer .copy{ background: #6AB1C5; text-align: center; font-size: 12px; padding: 24px 0;}

.pc{ display:inline !important;}
.sp{ display:none !important;}


@media screen and (max-width: 767px){
html {-webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ min-width: 100%; margin:0 auto; font-family: "Noto Sans Japanese";}
img{ width:100%; height:auto; vertical-align:bottom; -webkit-backface-visibility: hidden;}
a img:hover{ opacity:1; filter:alpha(opacity=100); transition: all 0;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
	
#container{ width: 100%; min-width: 100%; margin: 0 auto; color: #3E3A39; font-size: 14px;}
#container .btn-shop{ position: fixed; top: 150px; right: 0;}
#container .btn-shop img{ width: 40px;}
	
/*--- top pages ---*/
#mainArea{ width: 100%; margin-bottom: 15%; padding-top: 73px;}
#mainArea img{ width: 100%;}
#topContents{ width: 100%;}
#topContents h2{ margin: 0 0 5%; font-size: 16px; font-weight: normal;}
#topContents h2:first-letter{ font-size: 30px; font-weight: bold;}
#topContents h2 span{ font-size: 14px; display: inline-block; margin-left: 15px;}
#news{ width: auto; margin: 0 5% 10%; position: relative;}
#news table{ width: 100%; border-top: solid 1px #DADADA;}
#news th{ font-weight: normal; text-align: left; padding: 10px 0 0; border-bottom: none; display: block;}
#news td{ padding: 5px 0 10px; border-bottom: solid 1px #DADADA; display: block;}
#news a{ color: #3E3A39; text-decoration: none;}
#news a:hover{ color: #439DB9; text-decoration: none;}
#news p.btn{ position: absolute; width: 90px; top: 3%; right: 0;}
#news p.btn img{ width: 90px;}
#concept{ width: auto; background: #F1F0EE; padding: 10% 5%;}
#concept .conceptArea{ width: auto; margin: 0 auto; background: #FFF; padding: 5%; display: block; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#concept .conceptArea .lCon{ width: auto;}
#concept .conceptArea .lCon p{ line-height: 180%;}
#concept .conceptArea .lCon p.btn{ margin: 5% 0 8%; text-align: center;}
#concept .conceptArea .lCon p.btn img{ width: 120px;}
#concept .conceptArea .rCon{ width: auto;}
#concept .conceptArea .rCon img{ width: 100%;}
#works{ width: 100%; padding: 10% 0;}
#works .inner{ width: auto; margin: 0 5% 5%;}
#works .inner p{ line-height: 180%;}
#works .loop li{ width: 50%;}
#works .loop li img{ width: 100%;}
	
	
/*--- second pages ---*/
#secContents{ width: 100%; padding-top: 73px;}
#secContents h2{ margin: 0 0 5%; font-size: 16px; font-weight: normal; border-top: #ECECEC solid 2px; line-height: 70px; box-sizing: border-box; border-bottom: #CBE6ED solid 7px; text-align: center;}
#secContents h2:first-letter{ font-size: 30px; font-weight: bold;}
#secContents h2 span{ font-size: 14px; display: inline-block; margin-left: 15px;}	
#secContents .pankuzu{ width: auto; margin: 0 5% 10%; font-size: 12px;}
#secContents .pankuzu a{ color: #3E3A39; text-decoration: none;}
#secContents .pankuzu a:hover{ color: #3E3A39; text-decoration: underline;}

#wrapper{ width: auto; margin: 0 5%;}
#wrapper h3{ margin: 0 0 5%;}
#wrapper h3 p{ line-height: 180%;}
#wrapper p.lead{ margin-bottom: 10%; line-height: 160%;}
#wrapper p.lead span.right{ display: block; text-align: right; margin-top: 8%;}
#wrapper p.lead a{ color: #3E3A39; text-decoration: underline;}
#wrapper p.lead a:hover{ color: #439DB9; text-decoration: none;}	
	
/* news */
#newsWrap{ width: auto; margin: 0 5% 10%;}
#newsWrap h3{ margin: 0 0 5%;}
#newsWrap p.lead{ margin-bottom: 5%; line-height: 160%;}
#newsWrap .oneImg{ width: auto; margin: 0 auto;}
#newsWrap .twoImg{ width: auto; margin: 0 auto;}
#newsWrap .twoImg ul{ display: block; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#newsWrap .twoImg li{ width: auto; margin-bottom: 5%;}
#newsWrap .twoImg li:last-child{ margin-bottom: 0;}
#newsWrap .oneImg li img,
#newsWrap .twoImg li img{ width: 100%;}
#newsWrap .mb50{ margin-bottom: 5%;}
	
/* concept */
.conceptImg{ width: 100%; background: #F1F0EE; text-align: center; margin: 0 auto 10%; padding: 0;}
.conceptImg img{ width: 100%;}
	
/* shop */
#wrapper .shop{ margin: 0 auto 10%;}
#wrapper .shop ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top;}
#wrapper .shop li{ width: 48%; margin-bottom: 5% !important;}
/* 2列リストの一番左下にある要素 */
#wrapper .shop li:nth-child(2n+1):nth-last-child(-n+2),
/* 2列リストの一番左下にある要素以降にあるliすべて */
#wrapper .shop li:nth-child(2n+1):nth-last-child(-n+2) ~ li{ margin: 0;}
#wrapper .shop li a{ display: block;}
#wrapper .shop li img{ width: 100%;}
#wrapper .shop li p{ font-size: 12px; margin: 10px 0 0; line-height: 160%;}
#wrapper .shop li p.shopTtl{ font-weight: bold;}
	
/* works */
#wrapper .worksTop{ margin: 0 auto 10%;}
#wrapper .worksTop ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: top; width: auto; box-sizing: border-box; overflow: hidden;}
#wrapper .worksTop li{ width: 48%; margin: 5% 0 0; vertical-align: middle;}
#wrapper .worksTop li:nth-child(1),
#wrapper .worksTop li:nth-child(2){ margin-top: 0;}
#wrapper .worksTop li:nth-child(3){ margin-top: 5%;}
#wrapper .worksTop li a{ display: block;}
#wrapper .worksTop li img{ width: 100%;}
#wrapper .worksTop li p{ margin: 10px 0 0; font-weight: normal; line-height: 18px; font-size: 12px;}
#wrapper .worksTop li p span{ display: block; line-height: 18px; color: #FFF; background: #8CC4D5; margin-right: 10px; padding: 0 5px; box-sizing: border-box; font-size: 12px; width: 52px;}
	
/* works-ex */
#wrapper .worksWrap{ margin: 0 auto 10%;}
#wrapper .worksWrap .worksV{ margin: 0 0 5%;}
#wrapper .worksWrap h3{ margin: 0 0 5%; font-weight: normal; line-height: 18px; font-size: 12px;}
#wrapper .worksWrap h3 span{ display: inline-block; line-height: 18px; color: #FFF; background: #8CC4D5; margin-right: 10px; padding: 0 5px; box-sizing: border-box; font-size: 12px; width: 52px;}
#wrapper .worksWrap p.place{ margin: 0 0 5%; padding: 0 0 5%; border-bottom: #EEEEEE solid 1px; line-height: 180%;}
#wrapper .worksWrap p.ex{ margin: 0 0 6%; padding: 0 0 5%; border-bottom: #EEEEEE solid 1px; line-height: 180%;}

#wrapper .worksWrap .parent-container{ width: 100%; margin: 0 auto 10%;}
#wrapper .worksWrap .parent-container ul{ width: 100% !important; margin: 0 auto; box-sizing: border-box;}
#wrapper .worksWrap .parent-container li{ /*width: 49%;*/ margin-bottom: 6px; -webkit-width:calc(98% / 2); width: calc(98% / 2);}
#wrapper .worksWrap .parent-container li img{ width: 100%;}
	
/* procedure */
#procedure{ width: 100%; background: #F1F0EE;}
#procedure .pdWrap{ width: auto; margin: 0 auto; padding: 10% 5%;}
#procedure .pdWrap ul{ width: 100%;}
#procedure .pdWrap li{ width: 100%; height: auto; padding: 15px; display: block; background: #FFF; margin-bottom: 10%; position: relative; box-sizing: border-box;}
#procedure .pdWrap li::before{ content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); border-top: 20px solid #FFF; border-right: 20px solid transparent; border-left: 20px solid transparent;}
#procedure .pdWrap li h4{ margin: 5px 0 5%; font-size: 16px; padding-left: 20%;}
#procedure .pdWrap li p{ line-height: 160%;}
#procedure .pdWrap li p a{ color: #3E3A39; text-decoration: none;}
#procedure .pdWrap li p a:hover{ color: #3E3A39; text-decoration: none;}
#procedure .pdWrap li.pd01{ background: url("../img/procedure/icon01.png") no-repeat 5% 10% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd02{ background: url("../img/procedure/icon02.png") no-repeat 5% 10% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd03{ background: url("../img/procedure/icon03.png") no-repeat 5% 12% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd04{ background: url("../img/procedure/icon04.png") no-repeat 5% 14% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd05{ background: url("../img/procedure/icon05.png") no-repeat 5% 12% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd06{ background: url("../img/procedure/icon06.png") no-repeat 5% 16% #FFF; background-size: 50px 39px;}
#procedure .pdWrap li.pd07{ background: url("../img/procedure/icon07.png") no-repeat 5% 10% #FFF; background-size: 50px 39px; margin-bottom: 0;}
#procedure .pdWrap li.pd07::before{ content: none;}
	
/* office */
#office{ width: auto; background: #F1F0EE; padding: 10% 5%;}
#office .officeWrap{ width: auto; margin: 0 auto;}
#office .officeWrap h3{ margin: 0 0 5%;}
#office .officeTable{ width: auto; margin: 0 auto; box-sizing: border-box;}
#office .officeTable table{ width: 100%; border-top: solid 1px #DADADA; box-sizing: border-box;}
#office .officeTable table th{ width: 30%; padding: 5% 0; font-weight: normal; text-align: left; vertical-align: top; border-bottom: solid 1px #DADADA;}
#office .officeTable table td{ padding: 5% 0; border-bottom: solid 1px #DADADA;}
#access{ width: auto; margin: 10% 5%;}
#access h3{ margin: 0 0 5%;}
#access iframe{ width: 100%; height: 100%; margin: 0 auto;}
	
.parent-container.office{ width: 100%; margin: 0 auto 10%;}
.parent-container.office ul{ width: 100% !important; margin: 0 auto; box-sizing: border-box;}
.parent-container.office li{ /*width: 49%;*/ margin-bottom: 4%; -webkit-width:calc(98% / 2); width: calc(98% / 2);}
.parent-container.office li img{ width: 100%;}
	
/* privacy */
#privacy{ width: 100%; margin: 0 auto 10%;}
#privacy p.lead{ margin-bottom: 5%;}
#privacy ul.privacyList{ width: auto; margin: 0 0 10%;}
#privacy ul.privacyList li::before{ content:""; width: 14px; height: 14px; background: #CBE6ED; margin-right: 2%; vertical-align: -2px; display: inline-block;}
#privacy ul.privacyList li{ font-size: 14px; font-weight: bold; line-hright: 140%; margin-bottom: 5%;}
#privacy ul.privacyList li:last-child{ margin-bottom: 0 !important;}
#privacy ul.privacyList li p{ font-size: 14px; font-weight: normal; margin: 2% 0 0;}
	
/* contact */
.formArea{ width: 90% !important; margin: 0 auto; background: #F1F0EE; padding: 10% 5%;}
.formArea form{ width: auto; margin: 0 auto; background: #FFF; padding: 5% 5% 10%;}
.formArea p{ margin-bottom: 10%; line-height: 160%;}
.formArea p:last-of-type{ margin-bottom: 0;}
.formArea p span{ color: #E7443D;}
.formArea p.rLink{ width: auto; text-align: right; margin: 0 auto 5px; font-size: 12px;}
.formArea p.rLink a{ color: #3E3A39; text-decoration: none;}
.formArea p.rLink a:hover{ text-decoration: underline;}
.fromTel{ text-align: center; width: 70%; margin: 10% auto; padding: 5% 0; font-size: 16px; border: #3E3A39 solid 1px;}
.fromTel span{ font-size: 18px;}
.fromTel a{ color: #3E3A39; text-decoration: none;}
.fromTel a:hover{ color: #3E3A39; text-decoration: none;}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    height: 30px;
    background: #FFF;
    position: relative;
    z-index: 1;
    padding: 0 10% 0 5%;
    border: #9C9C9C solid 2px;
	font-family: "Noto Sans Japanese";
}
select::-ms-expand {
    display: none;
}
.selectWrap{
    position: relative;
    display: inline-block;
}
.selectWrap::before{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    background: #FFF;
    height: 100%;
    width: 30px;
}
.selectWrap::after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 9px;
    width: 0;
    height: 0;
    border: #9C9C9C solid 2px !important; 
}
	
input[type="text"],
.input textarea {
	width:90% !important; margin-top: 3% !important;
	outline: none;
	border: #9C9C9C solid 2px;
	-webkit-transition: all .3s;
	transition: all .3s;
	padding: 3%;
	font-family: "Noto Sans Japanese";
}
.input input[type="text"]:focus,
.input textarea:focus {
	box-shadow: 0 0 7px #8CC4D5;
	border: 2px solid #8CC4D5;
}
textarea {
  resize: vertical;
}
input[type="submit"] {
  display: block;
  width: 80%;
  height: 50px;
  padding: 0;
  margin: 5% auto 0;
  background: #8CC4D5;
  border: none;
  color: #FFF;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  font-family: "Noto Sans Japanese";
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="button"] {
  display: inline-block;
  width: 80%;
  height: 40px;
  padding: 0;
  margin: 0;
  background: #8CC4D5;
  border: none;
  color: #FFF;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  font-family: "Noto Sans Japanese";
}
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #A9D3E0;
}
input[type="submit"]:active,
input[type="button"]:active {
  background: #A9D3E0;
}
	
.thanks_info{ width:75%; border: #E7443D solid 1px; padding: 7%; margin: 5% auto 20%;}
.thanks_info p{ padding: 0; margin: 5% 0 0; line-height: 160%;}
.thanks_info p.ttl{ font-size: 16px; font-weight: bold; margin: 0;}
.thanks_info p span.red{ color: #E7443D;}
	
#page-top { margin: 0; padding: 0; display: none; position: fixed; right: 0; bottom: 36px; z-index: 50;}
#page-top #move-page-top{ width: 40px; display: block; cursor: pointer;}
#page-top #move-page-top img{ width: 40px;}

footer{ width: 100%; background: #8CC4D5; color: #FFF;}
footer .footArea{ width: auto; margin: 0 5%; padding: 10% 0;}
footer .footArea::after{ content:""; display:block; clear:both;}
footer .footAdd{ width: auto; float: none; display: block; flex-wrap: wrap; justify-content: start; align-items: center;}
footer .footAdd .logo{ width: 50px; margin: 0 auto;}
footer .footAdd .logo img{ width: 50px;}
footer .footAdd .address p.name{ font-size: 14px; border-bottom: #FFF solid 1px; padding-bottom: 10px; text-align: center;}
footer .footAdd .address p.name strong{ font-size: 16px; font-weight: normal; display: block; margin-bottom: 10px;}
footer .footAdd .address p.tel{ margin: 2px 0 0; text-align: center;}
footer .footAdd .address p.tel span{ margin-left: 15px; display: inline-block;}
footer .footAdd .address p.tel a{ color: #FFF; text-decoration: none; font-weight: bold; font-size: 16px;}
footer .footAdd .foottxt{ margin: 5% 0 8%;}
footer .footAdd .foottxt h4{ font-size: 12px; margin: 0 0 5px;}
footer .footAdd .foottxt p{ font-size: 12px; line-height: 150%;}
footer .footArea .footLink{ width: auto; float: none; padding: 0;}
footer .footArea .footLink:after{ content:""; display:block; clear:both;}
footer .footArea .footLink ul{ display: inline-block; width: 46%;}
footer .footArea .footLink ul:first-child{ margin-right: 2%;}
footer .footArea .footLink li{ margin: 0 0 5%; font-size: 12px;}
footer .footArea .footLink li a{ color: #FFF; text-decoration: none;}
footer .footArea .footLink li a:hover{ color: #439DB9; text-decoration: none;}
footer .copy{ background: #6AB1C5; text-align: center; font-size: 11px; padding: 10px 0;}


.pc{ display:none !important;}
.sp{ display:inherit !important;}


}