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

#title-area { width: 100%; height: 400px; margin: 0; clear: both; text-align: center; }

#page-concept #title-area { background:url("../images/title_concept.jpg") no-repeat center top; background-size:100% auto;}
.page-gallery #title-area,
.page-gallery_list #title-area { background:url("../images/title_gallery.jpg") no-repeat center top; background-size:100% auto; }
#page-office #title-area { background:url("../images/title_office.jpg") no-repeat center top; background-size: 100% auto; }
#page-reform #title-area { background:url("../images/title_reform.jpg") no-repeat center top; background-size: 100% auto; }
#page-spec #title-area { background:url("../images/title_spec.jpg") no-repeat center top; background-size: 100% auto; }
#page-order #title-area { background:url("../images/title_order.jpg") no-repeat center top; background-size: 100% auto; }
#page-event #title-area { background:url("../images/title_event.jpg") no-repeat center top; background-size: 100% auto;}
#page-voice #title-area { background:url("../images/title_voice.jpg") no-repeat center top; background-size: 100% auto; }
#page-privacy #title-area { background:url("../images/title_privacy.jpg") no-repeat center top; background-size: 100% auto; }

#title { width: 94%; max-width:1400px; height: 100%; margin: 0 auto; position: relative;}
#title h2 { padding-right: 2.2em; font-size: 51px; font-weight: bold; text-align: left; text-shadow: 1px 1px 2px #201211; color:#201211; border-bottom: 1px solid #C2B8AF; letter-spacing: 0.1em; position: absolute; top: 40%; left: 0;}

@media only screen and (max-width: 1700px) {
    #title-area { width: 100%; height: 354px; }
}

@media only screen and (max-width: 1400px) {
    #title-area { width: 100%; height: 292px; }
}

@media only screen and (max-width: 1200px) {
    #title-area { width: 100%; height: 250px; }
    #title h2 { width: 100%; font-size: 31px; }
}

@media only screen and (max-width: 960px) {
    #title-area { width: 100%; height: 200px; }
    #title h2 { width: 100%; font-size: 26px; }
}

@media only screen and (max-width: 820px) {
    #title-area { height: 170px; }
}

@media only screen and (max-width: 640px) {
    #title-area { height: 133px; }
    #title h2 { font-size: 22px; }
}

@media only screen and (max-width: 480px) {
    #title-area { height: 100px; }
    #title h2 { font-size: 18px; }
}

.bg {background: #F3F2F1; padding-top: 60px; padding-bottom: 60px;}

/* ===================================================================
 main
=================================================================== */
#main { clear: both; width: 100%;}

/* コンセプト
=================================================================== */
#concept { text-align:center;}
#concept section { width: 94%; max-width: 1400px; margin: 0 auto; text-align: center;}

#concept-catch{ padding:90px 0 110px; text-align: center; position: relative; }
#concept-catch:after { }
#concept-catch h3{ margin:0 auto 2.3em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#concept-catch h3:after{ content: ''; position: absolute; bottom: -0.8em; display: inline-block; width: 280px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#concept-catch p { font-size: 19px;}
#concept-catch section { }
#concept-catch img { position: absolute; bottom: -70px; right: 0;}

@media only screen and (max-width: 719px) {
    #concept-catch h3{ font-size: 25px;}
	#concept-catch p { font-size: 16px;}
    #concept-catch img { bottom: -40px;}
}

#concept-flow { background: #F3F2F1; margin-top: -30px; padding:100px 0 60px 0; }
#concept-flow h3{ width: 94%; max-width: 1400px; margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#concept-flow h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#concept-flow section.con-list { padding:5% 5% 1.5% 5%; background: #FFF;}

.con-list .item { margin-bottom: 20px;}

@media only screen and (min-width: 720px) {
	.con-list {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; align-items: flex-start;}
	.con-list .item { width:30%; margin-right:1.6%; margin-left:1.6%; -webkit-flex-direction: row; flex-direction: row;}
	.con-list::after{ content:""; display: block; width:30%; margin-right:1.6%; margin-left:1.6%;}
}

@media only screen and (max-width: 719px) {
    #concept-flow h3{ font-size: 25px;}
	.con-list .item { max-width:380px; margin: 0 auto 20px auto;}
}

.con-list .item h4{ clear: both; font-size: 23px; font-weight: bold; color:#000; margin: 0 auto 0.5em auto; text-align: center; position: relative; display: inline-block; padding: 0 70px; line-height: 1.2;}
.con-list .item h4:before, .con-list .item h4:after { content: ''; position: absolute; top: 50%; display: inline-block; width:50px; height: 5px; border-top: solid 2px #C2B8AF; border-bottom: solid 2px #C2B8AF;}
.con-list .item h4:before {left:0;}
.con-list .item h4:after {right:0;}
.con-list .item p { text-align: left;}
.con-list .item img { margin-bottom:10px;}
.con-list .item ul { margin: 0 auto; max-width: 300px; }
.con-list .item ul li { list-style:disc; text-align: left;}
.con-list .item ul li:last-child { list-style:none; text-align: right;}
.con-list .item p { margin: 0 auto; max-width: 300px; }

@media only screen and (max-width: 1199px) {
    .con-list .item h4{ padding: 0 45px;}
    .con-list .item h4:before, .con-list .item h4:after { width:35px;}
}

@media only screen and (max-width: 640px) {
    .con-list .item h4{ font-size: 19px;}
}

#concept section.con-box { width: 94%; max-width: 1400px; margin: 0 auto 40px auto; padding:60px 5% 3% 5%; background: #fff; text-align: center; position: relative;}
.con-box:after { content:" "; display:block; clear:both; position: absolute; top: -120px; left: 0; right:0; font-family: "Font Awesome 6 Free"; content: "\f0dd"; font-size:120px; font-weight: 900; color: #F7D622;}
.con-box.flex { align-items: flex-start;}
.con-box .txt { width: 57%;}
.con-box .photo { width:38.5%;}
.con-box .txt h4 { margin-bottom: 1em; font-size: 23px; font-weight: bold; text-align: left; color: #5A0023;}
.con-box .txt h4:first-letter { color: #fff; font-size: 1.3em; padding: .1em .25em; margin-right:8px; background-color:#82264E; border-radius: 50%;}
.con-box .txt p{ text-align: left;}

@media only screen and (max-width:720px) {
    .con-box:after { top: -85px; font-size:100px;}
    .con-box .txt { width: 100%;}
    .con-box .photo { width:100%; margin-bottom: 20px;}
    .con-box .txt h4 { font-size: 21px;}
    .con-box .txt h4:first-letter { font-size: 1.1em;}
}

/* 性能･仕様
=================================================================== */
#spec { text-align: center;}
#spec:after { content:" "; display:block; clear:both;}
#spec h3{ width: 94%; max-width: 1400px; margin:60px auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#spec h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#spec .bg { background: #F3F2F1; padding: 60px 0;}
#spec .flex { align-items:stretch;}
#spec section { width:90%; max-width:1400px; margin:0 auto 30px; text-align: center;}
.spec-box{ width: 48%; max-width: 672px; background: #FFF; padding:51px; margin-bottom: 30px;  text-align: left;}
.spec-box2 { width: 100%; max-width:1400px; background: #FFF; padding:51px 6%; margin:0 auto 30px auto; text-align: left;}
#spec h4 { margin:0 0 2em 0; padding:0; font-size:19px; font-weight: bold; text-align: left; position: relative; display: inline-block;}
#spec h4:after{ content: ''; position: absolute; bottom: -0.5em; display: inline-block; width: 60px; height: 1px; left: 0; background-color:#C2B8AF;}
.spec-box2 .photo { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center; }
.spec-box2 .photo img { max-width: 48%;}
#spec img { margin-bottom: 20px;}

@media only screen and (max-width:720px) {
    #spec h4{ margin-bottom: 1.5em;}
    .spec-box,
    .spec-box2 { width: 100%; padding:30px; }
}

/* 会社概要
=================================================================== */
#message { }
#message:after { content:" "; display:block; clear:both;}
#message section { width: 94%; max-width: 1400px; margin: 0 auto; padding: 60px 0;}
#message h3{ margin:0 0 2.5em 0; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#message h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#message .photo { margin: 0; width:30%;}
#message .txt { width:63%; margin:0; text-align: left;}

@media only screen and (max-width: 1200px) {
	#message .photo { margin: 0 auto 20px auto; width:100%; text-align: center;}
    #message .txt { margin: 0 auto; width:100%;}
}

@media only screen and (max-width: 640px) {
	#message h3{font-size: 25px;}
}

/* 健康経営
=================================================================== */
#kenko-keiei {background:#F3F2F1;}
#kenko-keiei section { width: 94%; max-width: 1400px; margin: 0 auto; padding: 60px 0;}
#kenko-keiei h3{ margin:0 0 2.5em 0; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#kenko-keiei h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#kenko-keiei .photo { margin: 0 0 30px 0;}
#kenko-keiei .photo img { width: 100%; }

@media only screen and (max-width:1400px) {
	#kenko-keiei h3{font-size: 25px;}
    #kenko-keiei .photo img { margin-bottom: 10px;}
}

@media only screen and (max-width: 640px) {
    #kenko-keiei .photo img { width: 70%;}
}

/* 社会課題を考える
=================================================================== */
#social {background:#FFF;}
#social section { width: 94%; max-width: 1400px; margin: 0 auto; padding: 60px 0;}
#social h3{ margin:0 0 2.5em 0; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#social h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#social .photo { margin: 0 0 30px 0;}
#social .photo img { width: 31%; }

@media only screen and (max-width:1400px) {
	#social h3{font-size: 25px;}
    #social .photo { width: 100%;}
    #social .photo img { margin-bottom: 10px;}
}

@media only screen and (min-width: 641px) {
	#social .photo { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
}

@media only screen and (max-width: 640px) {
	#social h3{font-size: 25px;}
    #social .photo { text-align: center;}
    #social .photo img { width: 100%; max-width: 434px; margin-bottom:10px;}
}

/* 会社概要
=================================================================== */
#office {background:#F3F2F1;}
#office section { width: 94%; max-width: 1400px; margin: 0 auto; padding: 60px 0;}
#office h3{ margin:0 0 2.5em 0; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#office h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#office .photo { width: 35%; max-width: 400px;}
#office .photo img { margin-bottom: 10px;}
#office .txt { width: 60%;}
#office dl { clear:both; width:100%; text-align:left; border-bottom:1px solid #AAA;}
#office dl dt { padding:16px 0 9px 14px; clear:left; float:left; width:10em; border-top:1px solid #AAA; color:#777;}
#office dl dd { padding:16px 0 9px 14px; margin-left:10em; border-top:1px solid #AAA;}
#office dl:after,#office dl dt:after,#office dl dd:after { content:" "; display:block; clear:both;}

@media only screen and (max-width:1400px) {
	#office dl dt { width:7em;}
	#office dl dd { margin-left:7em;}
}

@media only screen and (max-width: 640px) {
    #office h3{ font-size: 25px;}
    #office .photo { width: 100%; margin: 0 auto; text-align: center; }
    #office .txt { width:100%; margin-bottom: 20px;}
	#office dl dt { clear: both; float: none; width: 100%; padding-bottom:0;}
	#office dl dd { margin-left:0; border-top:none; padding-top:8px;}
}

#access {background:#FFF;}
#access section { width:90%; max-width: 1400px; text-align: center; margin: 0 auto; padding: 90px 0;}
#access h3{ margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align:center; color: #5A0023; position: relative; display: inline-block;}
#access h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 20px; right: 0; background-color:#C2B8AF;}
#access p{ font-size: 17px; margin-bottom:2em;}
#access .map{ position:relative; width:100%; height:420px; margin: 0 auto;}
#access .map iframe { position:absolute; top:0; left:0; width:100%; height: 100%;}

@media only screen and (max-width:640px) {
    #access section { padding: 50px 0;}
    #access h3 {font-size: 25px;}
    #access .map{ width:100%; }
}


/* 建築実例一覧 
=================================================================== */
#gallery-list { text-align: center;}
#gallery-list h3{ margin:60px auto 1em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#gallery-list h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#gal-list { clear:both; width:94%; max-width:1400px; margin:0 auto; padding:0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:flex-start;}
.gal-box { margin-bottom:40px; padding:0; text-align: center; }
.gal-box img { width: 100%; margin-bottom: 16px;}
.gal-box .data { text-align: left; font-size: 14px; margin:0 1px 0 3px; padding-left: 0.6em; border-left: 1px solid #888; line-height: 1;}
.gal-box a h4 { margin:0 0 0.3em 0; padding:0; font-size:21px; font-weight: bold; text-align:left; color:#590022;}
.gal-box a h4:hover { text-decoration:underline; }
.gal-box img { margin-bottom:10px; width:;}

@media only screen and (min-width: 641px) {
	#gal-list { width:100%; max-width:1400px; 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; }
	.gal-box { width:29%; margin-right:2.1%; margin-left:2.1%; }
	#gal-list::after{ content:""; display: block; width:29%; margin-right:2.1%; margin-left:2.1%; }
}

@media only screen and (max-width: 640px) {
    #gallery-list h3 {font-size: 25px;}
	.gal-box { width:48%; margin-right:1%; margin-left:1%; }
}

@media only screen and (max-width: 480px) {
	.gal-box { width:100%; max-width: 320px; margin-right:auto; margin-left:auto; }
}


/* 建築実例詳細 
=================================================================== */
#gallery { clear:both; width:94%; max-width:1400px; margin:0 auto; background: #F3F2F1; padding:50px 5%; text-align: center;}
#gallery h3{ margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#gallery h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}

#gallery-album { margin: 0 auto 50px auto; padding:0; width: 100%; column-count: 3; column-gap: 0;}
#gallery-album a { margin:5px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; display: inline-block;}

@media only screen and (max-width: 640px) {
    #gallery-album { column-count: 2;}
    #gallery h3{ font-size: 25px;}
}

#gallery-data.flex { align-items:flex-start;}
#gallery-data { width:100%; background: #FFF; padding:3% 3% 2% 3%;}
#gallery-data .gal-txt { width:calc(100% - 460px); margin-bottom: 30px; text-align: left;}
#gallery-data .gal-data { width:400px; padding:0 30px 10px 30px; text-align: left; border-left:1px dotted #AAA;}
.gal-data { padding:0;}
.gal-data dl { margin:0; border-bottom:1px dotted #AAA;}
.gal-data dt { clear: left; float:left; width:80px; padding:6px 0 6px 5px; border-top:1px dotted #AAA; font-weight: normal; color:#777;}
.gal-data dd { margin-left:80px; padding:6px 0 6px 20px; border-top:1px dotted #AAA;}
.gal-data dt:first-child{ border:none;}
.gal-data dt:first-child + dd{ border:none;}

@media only screen and (max-width:959px) {
    #gallery-data .gal-txt { width:100%; margin: 0 30px; text-align: left;}
    #gallery-data .gal-data { width:100%; border-left:none;}
}

/* リフォーム･特注家具
=================================================================== */
#reform-order { text-align:center;}
#reform-order section { width: 94%; max-width: 1400px; margin: 0 auto; padding: 60px 0;}
#reform-order h3{ margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#reform-order h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#reform-order .order-pict{ margin-bottom: 30px;}
#reform-order .order-pict img{ width: 32%;}
#reform-order .flex .txt { width: 70%; text-align: left;}
#reform-order .flex .txt h4 { margin-bottom: 1em; font-size:25px; font-weight: bold; color: #333; line-height: 1.8;}
#reform-order .flex .photo { width:25.8%;}
#reform-order .flex .photo img { margin: 0 0 10px 0;}
#reform-order a.btn { position: relative; width: 260px; max-width: 90%; margin:30px auto 0 auto; padding: 20px 0 19px 0; font-size: 16px; background:#1F1211; color: #FFF; text-align: center; line-height: 1; display: block; text-decoration: none; border-radius: 50vh;}
#reform-order a.btn:after { position: absolute; right: 30px; top: 40%; content: "→"; color: #fff;}

@media only screen and (max-width:640px) {
	#reform-order h3{ font-size: 25px;}
    #reform-order .order-pict img { width: 100%; margin-bottom:10px; text-align: center;}
    #reform-order .flex .txt { width: 100%;}
    #reform-order .flex .photo { width:100%;}
    #reform-order a.btn { margin-bottom: 30px;}
}

#reform { text-align:center; background: #F3F2F1; padding: 60px 0; }
#reform section { width: 94%; max-width: 1400px; margin: 0 auto 40px auto; padding:60px 5% 3% 5%; background: #fff; text-align: center; }
#reform h3{ margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#reform h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}

@media only screen and (max-width:640px) {
	#reform h3{ font-size: 25px;}
}

#reform .reform-catch { width: 94%; max-width: 1400px; margin: 0 auto 40px auto; padding:0; text-align: center; }
#reform .reform-catch .photo { width:40%;}
#reform .reform-catch .txt { width:50%; max-width: 480px; margin:0 auto; padding:100px 0 180px 0; text-align: left;}
#reform .reform-catch .txt h4 { margin-bottom: 1em; font-size:25px; font-weight: bold; color: #333; line-height: 1.8;}

@media only screen and (max-width:640px) {
	#reform .reform-catch .photo { width:100%;}
    #reform .reform-catch .txt { width:100%; padding:30px 0 30px 0;}
}

#reform section h4 { font-size: 29px; font-weight: bold; position: relative; display: inline-block; margin-bottom: 1.7em; color: #5A0023;}
#reform section h4:after { content: '／／／／／／／／　'; position: absolute; bottom: -17px; display: inline-block; font-size: 9px; font-weight: normal; left:0; right: 0; color:#C2B8AF; letter-spacing: 0;}
#reform section p { text-align: left; margin-right:1.6%; margin-left:1.6%;}
#reform .reform-pict { margin: 0 auto;}
#reform .reform-pict img { margin-bottom: 20px;}

@media only screen and (min-width: 641px) {
	.reform-pict {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; align-items: flex-start;}
	.reform-pict img { width:30%; margin-right:1.6%; margin-left:1.6%; -webkit-flex-direction: row; flex-direction: row;}
	.reform-pict::after{ content:""; display: block; width:30%; margin-right:1.6%; margin-left:1.6%;}
}

@media only screen and (min-width: 641px) {
	.reform-pict4 {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; align-items: flex-start;}
	.reform-pict4 img { width:23%; margin-right:1%; margin-left:1%; -webkit-flex-direction: row; flex-direction: row;}
	.reform-pict4::after{ content:""; display: block; width:23%; margin-right:1%; margin-left:1%;}
}

@media only screen and (max-width:640px) {
    #reform section h4 { font-size: 23px;}
    #reform .reform-pict {width: 100%; text-align: center;}
	.reform-pict img { width: 100%; max-width:380px; margin: 0 auto 20px auto;}

    #reform .reform-pict4 img {width:48%; margin: 0 1% 10px 1%;}

}

/* 納品事例
=================================================================== */
#order {text-align: center;}
#order h3{ margin:60px auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#order h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#order .bg { padding-bottom:20px;}
#order-list { clear:both; width:94%; max-width:1400px; margin:0 auto; background: #F3F2F1; padding:0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:flex-start;}
.order-box { margin-bottom:40px; padding:0; text-align: center; }
.order-box img { width: 100%; margin-bottom: 16px;}
.order-box .data { text-align: left; font-size: 14px; margin:0 1px 0 3px; padding-left: 0.6em; border-left: 1px solid #888; line-height: 1;}
.order-box h4 { margin:0 0 0.3em 0; padding:0; font-size:21px; font-weight: bold; text-align:left; color: #5A0023;}

@media only screen and (min-width: 641px) {
	#order-list { width:100%; max-width:1400px; 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; }
	.order-box { width:29%; margin-right:2.1%; margin-left:2.1%; }
	#order-list::after{ content:""; display: block; width:29%; margin-right:2.1%; margin-left:2.1%; }
}

@media only screen and (max-width: 640px) {
	.order-box { width:48%; margin-right:1%; margin-left:1%; }
    #order h3 {font-size: 25px;}
    .order-box .data { margin:0 1px 0 3px; line-height: 1;}
    .order-box h4 { font-size:17px;}
}

/* お知らせ
=================================================================== */
#event-list { clear:both; width:94%; max-width:1400px; margin:0 auto; background: #F3F2F1; padding:3% 5%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:flex-start;}

.event-box { width:100%; margin:15px auto; padding:3% 3% 1.5% 3%; background: #fff; text-align: center; }
.event-box:after { content:" "; display:block; clear:both;}
.event-box .day { text-align: left; font-size: 14px; color: #555; margin-bottom: 5px;}
.event-box h3 { margin:0 0 1em 0; padding:0; font-size:21px; font-weight: bold; text-align: left; color: #5A0023;}
.event-box img { float: left; margin: 0 3.5% 15px 0;}
.event-box p { text-align: left;}

@media only screen and (max-width: 720px) {
    .event-box { padding:5% 5% 1.5% 5%; }
    .event-box img { float:none; margin: 0 auto 15px auto; }
}

/* お客様の声 
=================================================================== */
#voice-list { clear:both; width:94%; max-width:1400px; margin:0 auto; background: #F3F2F1; padding:3% 5%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:flex-start;}

.voice-box { width:100%; margin:15px auto; padding:3% 3% 1.5% 3%; background: #fff; text-align: center; }
.voice-box:after { content:" "; display:block; clear:both;}
.voice-box .day { text-align: left; font-size: 14px; color: #555; margin-bottom: 5px;}
.voice-box h3 { margin:0 0 1em 0; padding:0; font-size:21px; font-weight: bold; text-align: left; color: #5A0023;}
.voice-box img { float: left; margin: 0 3.5% 15px 0;}
.voice-box p { text-align: left;}

@media only screen and (max-width: 720px) {
    .voice-box { padding:5% 5% 1.5% 5%; }
    .voice-box img { float:none; margin: 0 auto 15px auto; }
}

/*ＣＭＳ-----------------------------------------------------------------------------*/
.nxt-prv-list { clear:both; width:94%; max-width: 1400px; margin: 30px auto; padding:5px; text-align:right; font-size:13px;}
.nxt-prv-box { clear:both; width:94%; max-width: 1400px; margin:30px auto; padding:5px;}
.go-list { float:left; width:45%; margin:0; font-size:13px; padding:5px; }
.nxt-prv { float:right; width:45%; margin:0; text-align:right; font-size:13px; padding:5px; }
.nxt-prv ul,.nxt-prv li { list-style:none;}
.nxt-prv li { float:right; margin-left:15px;}
.nxt-prv-list a,
.nxt-prv-box a{ text-decoration:underline; }
.nxt-prv-list:after,
.nxt-prv-box:after { content:" "; display:block; clear:both;}

/* 個人情報保護方針
=================================================================== */
#privacy { text-align: center; padding: 60px 0;}
#privacy .bg { background: #F3F2F1; padding: 60px 0;}
#privacy section { width: 94%; max-width: 1400px; margin:15px auto; padding:60px 5% 3% 5%; background: #fff; text-align: center;}
#privacy h3{ margin:0 auto 2.5em auto; padding:0; font-size: 31px; font-weight: bold; text-align: center; color: #5A0023; position: relative; display: inline-block;}
#privacy h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#C2B8AF;}
#privacy h4{ margin:1.5em auto 0.5em auto; padding:0; font-size:19px; font-weight: bold; text-align: left; color: #5A0023; }
#privacy p { text-align: left;}
#privacy p.sign { margin-top: 1.5em; text-align: right;}