@charset "utf-8";

/*** header ********************************************************************/
header { background: #6f5435; padding: 0; margin: 0; }
header .mainBox { z-index: 2; overflow: hidden; position: relative; background-color: #6F5435; }
header .mainBox #topImg {
	position: relative;
	width: 100%;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding: 0; margin:0;
	background-image: url(../images/dobox/topImg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #6F5435;
	background-blend-mode: lighten;
	background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
header .mainBox #topImg div p {	position: absolute; top: 40%; left: 0; right: 0; text-align: center; margin: auto; }
header .mainBox #topImg div p img { max-width: 50%; width: initial !important; width: auto !important; /* 初期状態にリセット */ }
header.mail { text-align: center; background: #5B777D; padding: 2.5em 0; margin-bottom: 4em; }
header.mail img { max-width: 400px; width: 50%; }
/*** menu ********************************************************************/
h1 { /* ヘッダーロゴ */
	width: 35%;
	background: url(../images/dobox/DoBox_W.png) no-repeat left center;
	background-size: contain;
	margin: .5em 0 0 2.5%; }
#logo { width: 200x; height: 58px; }
/* SP navToggle ===========================*/
.navToggle { width: 47px; height: 47px; background: #6f5435; border: 2px #fff solid; }
.navToggle span { width: 29px; left: 7px; }
.navToggle span:nth-child(1) { top: 10px; }
.navToggle span:nth-child(2) { top: 20px; }
.navToggle span:nth-child(3) { top: 30px; }
.navToggle.active span:nth-child(1) { top: 20px; left: 7px; }
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) { top: 20px; }
@media screen and (max-width: 1023px) { /* SP表示 */
  header nav.active { background-color: #6f5435; }
  header nav.active a { color: #fff; }
  header nav ul li a:hover{ color: #000; background:rgba(255,255,255,0.7); }
}
/* PC =====================================*/
@media print, screen and (min-width: 1024px) { /* PC表示 */
  h1 { max-width: 300px !important; width: 25% !important; height: 73px !important; margin-top: 1.5em !important; }
  header #Top nav { background: transparent; }
  header #Top nav ul li a:hover:after,
  header #Top.fixed nav ul li a:hover:after { background: none; } /* Title下線sub */
  header nav ul { margin-top: 1em; }
  header nav ul li a:before { content: "▼"; }
  header nav ul li a { position: relative; color: #fff !important; }
  /* 上部固定 */
  header #Top.fixed nav { background:rgba(255,255,255,0.85); }
  header #Top.fixed nav ul { margin-top: 0em; }
  header #Top.fixed nav ul li a { position: relative; color: #000 !important; }
}
/*** footer ********************************************************************/
footer { text-align: center; color: #666; background: #fff; padding: 5em 0; margin: 0; }
footer img { margin-bottom: 1.5em; }
footer p { margin: 0; }
/*** contents ******************************************************************/
body { background-color: transparent; }
.wrapper { /* background-color: transparent; */ padding-top: 4em; padding-bottom: 4em; }
.List img { padding: 0 !important; margin: 0 !important; vertical-align: bottom !important; }
.List.center { justify-content: center; }
.List.center .third { margin-top: 1.3em; }
.List.center .third img { border: 1px #ccc solid; }
.back_sand { background: url(../images/dobox/back_flow_con.jpg) top center; }
.back_blue { background: #5B777D; }
.Yellow { background: #ff9; padding: .5em 0; }
.List .title { text-align: center; padding: 0 15%; margin: 1em 0; }
.List .caption { font-weight: bold; text-align: center; line-height: 1.7em; }
.linkWhite { display: block; position: relative; top: -4em; } /*ページ内リンクの位置調整*/
@media screen and (max-width: 767px) { dl.form dt { padding-left: 15px; } }
/**************************************************************/
.concept { text-align: center; background: #fff; padding: 3em 3em 7em; margin-bottom: 2em; outline: 2px #000 solid; outline-offset: -1em; }
.concept .title { padding: 0 18%; }
.concept .price { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 70%; }
.concept p { margin: 0; }
/**************************************************************/
.border_blue { overflow: hidden; display: block; width: 100%; border: 2px #5B777D solid; padding: 1em 1em; margin: 4em auto 0em; }
.border_blue p { margin: 0; }
.border_blue .circleImg { float: left; max-width: 180px; width: 30%; margin: 0 1em .5em 0; }
.border_blue .catch { font-size: 1.7em; font-weight: bold; text-align: center; margin-bottom: .3em; }
.border_blue .element { clear: both; font-size: .9em; padding: 1em; margin:.5em 0 0; }
@media print, screen and (max-width: 600px) { .border_blue p { clear: both; } }
@media print, screen and (min-width: 600px) {
  .border_blue .circleImg { margin: 0 2em 1em 1em; }
  .border_blue .catch { text-align: left; }
  .border_blue .catch br { display: none; }
}
/**************************************************************/
ul.pointBox { position: relative; width: 100%; padding: 0; margin: 0;
	      display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex;
	      -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
/* 1列 */
ul.pointBox li { display: block; overflow: hidden; position:relative; width: 100%; font-size: .9em; background: url(../images/dobox/pointBox.jpg) top center no-repeat; padding: 1.5em; margin: 1em 0; }
ul.pointBox li p { padding: 0; margin: 0; }
ul.pointBox li p img { padding-top: 1em !important; }
ul.pointBox li .caption { font-size: 1.15em; text-align: left; border-bottom: 2px #000 solid; padding: .5em 0 .8em 3em; margin-bottom: 1em; }
ul.pointBox li .caption.ptzero { padding-top: 0; padding-bottom: .4em;}
ul.pointBox li .point { position: relative; float: left; display: inline-block; width: 1.3em; height: 1.8em; line-height: 1.8em; font-size: 1.5em;font-weight: bold; text-align: center; background-color: #fff; }
ul.pointBox li .point:before,
ul.pointBox li .point:after {
    position: absolute; top: 0;
    width: 0; height: 0; content: '';
    border: .9em solid transparent;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent; }
ul.pointBox li .point:before {right: 100%; border-right-color: #fff;}
ul.pointBox li .point:after { left: 100%;  border-left-color: #fff; }
@media print, screen and (min-width: 768px) { /* 2列 */
  ul.pointBox li { display: inline-block; width: 48%; margin-right: 4%; padding-bottom: 26%; }
  ul.pointBox li:nth-of-type(even) { margin-right: 0; }
  ul.pointBox li .under { position: absolute; bottom: 1.5em; left: 1.5em; right: 1.5em; }
}
@media print, screen and (min-width: 1300px) { /* 3列 */
  ul.pointBox li { width: 31%; margin-right: 3.5%; padding-bottom: 200px; }
  ul.pointBox li:nth-of-type(even) { margin-right: 3.5%; }
  ul.pointBox li:nth-of-type(3n) { margin-right: 0; }
}
/**************************************************************/
.flowBox { position: relative; width: 100%;
           border: 2px #5b777d solid; background: #fff; padding: 0 2em 2em; margin: 2em 0 2.5em;
           display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex;
           -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.flowBox:last-of-type { margin-bottom: 0; }
.flowBox .block { display: block; overflow: hidden; width: 100%; font-size: .9em; margin-top: 2em; }
.flowBox .block p { padding: 0; margin: 0; }
.flowBox .block ol { padding: 0 0 0 1.8em; margin: 0; }
.flowBox .block .caption { font-size: 1.2em; text-align: left; border-bottom: 2px #5b777d solid; padding: 1em 0 1em 4.5em; margin-bottom: 1em; }
.flowBox .block .caption.ptzero { padding-top: 0; padding-bottom: .4em;}
.flowBox .block .step {	position: relative; float: left; display: inline-block; width: 4em; height: 4em; color: #fff; border-radius: 50%; background: #5B777D; }
.flowBox .block .step span { display: inline-block; position: absolute; left: 0; top: 50%; width : 4em; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.flowBox .block .step span p { line-height: 1.2em; font-weight: bold; }
.flowBox .block .step span p:nth-of-type(2) { font-size: 1.5em; }
.flowBox:not(:last-of-type):after {
	position: absolute; left: 0; right: 0; bottom: -45px;
	content: ""; width: 0; height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #5b777d transparent transparent transparent;
	border-width: 30px 70px 0 70px; }
@media print, screen and (min-width: 940px) {
  .flowBox { margin-bottom: 1.5em; }
  .flowBox .block { display: inline-block; }
  .flowBox .block:nth-of-type(odd) {  width: 40%; margin-right: 4%; }
  .flowBox .block:nth-of-type(even) { width: 56%; display: flex; align-items: flex-end; }
}
/**************************************************************/
.one-third, .two-thirds { display: block; overflow: hidden; width: 100%; }
.one-third { text-align: center; }
.two-thirds p { margin: 0; }
.two-thirds p:first-of-type { font-size: 1.2em; text-align: center; color: #5B777D; font-weight: bold; border-bottom: 2px #000 solid; padding: .5em 0; margin-bottom: 1em; }
@media print, screen and (max-width: 767px) {
  .one-third img { max-width: 60%; }
  .two-thirds { margin-bottom: 4em; }
}
@media print, screen and (min-width: 768px) {
  .one-third, .two-thirds { display: inline-block; margin-bottom: 2em; }
  .one-third { width: 30%; }
  .two-thirds {width: 70%; }
  .two-thirds p:first-of-type { font-size: 1.5em;  text-align: left; padding: .5em 1.7em; }
  .two-thirds p:nth-of-type(n+2) { margin-left: 2em; }
}
/**************************************************************/
.circleBox {
	overflow: hidden; display: block; width: 100%; text-align: center; padding: .5em 1em; margin: 0 auto 1em;
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 20px;   /* Firefox用 */  }
.circleBox.border { border: 2px #000 solid; }
.circleBox.blue { color: #fff; background: #5B777D; }
.circleBox.white { max-width: 1000px; background: #fff; }
.circleBox .Yellow { font-size: 1.2em; font-weight: bold; }
.circleBox .second { margin-top: 0;  margin-bottom: 1em; }
.circleBox .second.outer .inner { margin-top: .5em; }
@media print, screen and (min-width: 768px) {
  .circleBox .second { margin-top: 1em;  margin-bottom: 1em; }
  .circleBox .second.outer { position: relative; }
  .circleBox .second.outer .inner { position: absolute; width: 100%; top: 50%; left: 0; text-align: center;
	-webkit-transform : translateY(-50%); transform : translateY(-50%); margin-top: 0; }
}
/**************************************************************/
.List .second.Absolutely { display: inline-block; width: 48%; max-width: 600px; margin-right: 4%; }
.List .second.Absolutely:nth-of-type(even) { margin-right: 0;}
.contact dl.form { background: #fff; margin-top: 3em; margin-bottom: 0; }
.contact .sendto { margin-top: 2em; margin-bottom: 3em;}

/*******************************************************************************/
/*** header ********************************************************************/
.DoBoxPlan header { text-align: center; background: #5B777D; padding: 2.5em 0; }
.DoBoxPlan header img { max-width: 425px; width: 75%; }
/*** contents ******************************************************************/
.DoBoxPlan .back_plan_sand { width: 100%; background: url(../images/dobox/back_flow_con.jpg) top center; padding: 2em 5%; margin: 2em 0 0; }
.DoBoxPlan .smart { margin-bottom: 5em; }
/**************************************************************/
[class^="loha-stage"], [class^="sensie"] { display:inline-block; color:#fff; padding: .5em 1em; margin: 1em 0 0; }
[class^="loha-stage"] { background: #A36944; }
[class^="sensie"] { background: #5BB8BD; }
.List .plan img { width: 100% !important; }
.List .plan { display: block; overflow: hidden; width: 100%; }
.List .plan dl { position: relative; padding: 0; margin: 0; }
.List .plan dl dt, .plan dl dd { padding: .3em 0 0;  }
.List .plan dl dt { width: 35%; float:left; clear:both; }
.List .plan dl dd { margin-left: 35%; }
@media print, screen and (min-width: 768px) {
  [class^="loha-stage"], [class^="sensie"] { margin: 0 0 1em; }
  .List .plan { display: inline-block; width: 48%; max-width: 600px; margin-right: 4%; }
  .List .plan:nth-of-type(even) { margin-right: 0; }
}
@media print, screen and (min-width: 1024px) {
  .List .plan:nth-of-type(odd) { width: 43%; }
  .List .plan:nth-of-type(even) { width: 53%; }
}
/**************************************************************/
.planImg { text-align: center; padding: 0; margin: 2em auto 0; }
.planImg img { max-width: 100%; width: initial !important; /* 初期状態にリセット */ }
@media print, screen and (min-width: 768px) {
  .planImg img { max-width: 50%; }
}
/**************************************************************/
.appearance { width: 100%; text-align: center; background: url(../images/dobox/back_flow_con.jpg) top center; padding: 0 1em 1em; margin: 2em 0 0; }
.List .half { display: block; position: relative; width: 100%; background-color: #fff; padding: 3em 2em 2em; margin: 2em 0 0; }
.List .half .floor {
	position: absolute; width: 40%; top: 0; left: 0; right: 0;
	text-align: center; font-weight: bold; color: #fff; background-color: #000; padding: .5em 0; margin: -1em auto 0; }
@media print, screen and (min-width: 768px) {
  .List .half { display: inline-block; width: 50%; max-width: 600px; margin-top: 1em; }
}