@charset "utf-8";

.aboutArea { background: #fff; padding: 100px 0;}
.aboutArea .inner { width: 100%;}
.aboutArea section { background: #f7f7f7; margin-bottom: 50px;}
.aboutArea .tab { padding-bottom: 50px;}
.aboutArea .tab ul { text-align: center; letter-spacing: -0.4em;}
.aboutArea .tab li { cursor: pointer; position: relative; display: inline-block; letter-spacing: normal; color: #fff; text-align: center; line-height: 1; width: 150px; margin: 0 10px;}
.aboutArea .tab li a { transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; display: block; color: #fff; text-decoration: none; background: #212430; padding: 10px 0;}
.aboutArea .tab li:after { display: block; content: ""; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 50%; right: 10px; transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); margin-top: -4px;}
.aboutArea .tab li a:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

.aboutArea .box { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0;}
.aboutArea .box .boxL { display: table-cell; vertical-align: middle; text-align: center;}
.aboutArea .box .boxL dl { display: inline-block; text-align: left;}
.aboutArea .box .boxL dl dt { margin-bottom: 30px; text-align: left; font-size: 24px; font-weight: normal;}
.aboutArea .box .boxL dl dt:after { content: ""; display: block; width: 30px; height: 1px; background-color: #a18553; margin: 10px 0 0 0;}
.aboutArea .box .boxL dl dd { text-align: left;}
.aboutArea .box .boxL dl dd p { text-align: left; font-size: 13px;}
.aboutArea .box .boxL dl dd p.ttl { font-size: 18px; margin-bottom: 15px;}
.aboutArea .box .boxL dl dd p.ttl span { display: block; font-size: 13px;}
.aboutArea .box .boxL dl dd p.caution { font-size: 11px; margin-top: 15px;}
.aboutArea .box .boxR { display: table-cell; vertical-align: middle; text-align: center;}

.aboutArea .btn { width: 300px; margin: 0 auto 0;}
.aboutArea .btn a { line-height: 1; letter-spacing: 0.1em; display: block; color: #fff; background-color: #a18553; text-align: center; padding: 15px 0; text-decoration: none; font-size: 14px; width: 100%;}


@media(max-width: 768px){

    .pagetitle { font-size: 21px;}

    .aboutArea { padding: 68px 0 0;}
    .aboutArea .inner { box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box;}
    .aboutArea section { margin-bottom: 30px;}

    .aboutArea .tab { padding-bottom: 30px; max-width: 287px; margin: 0 auto;}
    .aboutArea .tab li { width: 100%; margin: 0 0 10px 0;}

    .aboutArea .box { display: block;}
    .aboutArea .box .boxL { display: block; padding: 30px;}
    .aboutArea .box .boxL dl { display: block;}
    .aboutArea .box .boxL dl dt { line-height: 1.5; margin-bottom: 30px; font-size: 18px; text-align: center;}
    .aboutArea .box .boxL dl dt:after { margin: 10px auto 0;}
    .aboutArea .box .boxL dl dd p.ttl { font-size: 16px;}
    .aboutArea .box .boxL dl dd p { font-size: 13px; line-height: 1.5;}
    .aboutArea .box .boxL dl dd p.caution { font-size: 10px; line-height: 1.5;}
    .aboutArea .box .boxR { display: block;}

    .aboutArea .btn { width: 250px;}
    .aboutArea .btn a { font-size: 13px;}
}

.mainTtl { margin-bottom: 68px;}