@charset "UTF-8";
body {
  -webkit-font-smoothing: antialiased;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#pconly { display: block;}
#mbonly { display: none;}

figure {
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin-bottom:0;
}
ul {list-style: none; padding-left: 0;}
img {vertical-align: bottom; /*width:100%;*/}

.advisorHeder {width: 100%; position: relative; margin: 20px auto; padding: 0 20px;}
.advisorHeder h1{line-height: 1; font-size: 16px; display: inline-block; margin: 0; font-size:Arial, Helvetica, awns-serif;}
.main {width: 100%; margin: 4% auto;}
.mainVisual {width: 100%;}
.inner{
  background: url(../img/advisor_main-23.jpg) center center / cover no-repeat;
  width: 100%;
  height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
.wrap {text-align: center; color: #FFF;}
.captionSection,.flowSection {max-width: 1024px; margin: 6% auto; padding: 0 4%; text-align: center; overflow: hidden;}
.caseSection {background: #f8f6f3; text-align: center; margin: 4% 0; overflow: hidden;}

.reserveLink {width: 100%; display: inline-block; margin: 2% 0 12%;}

.button a {
  margin: 10px auto;
  padding: 2% 4%;
  color: #FFF;
  font-weight: bold;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
}
.button a:after {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button a:hover {border-radius: 50px;}
.button a:hover:after {width: 0%;}
.reserveLink-bottom,
.caseLink {width: 350px; display: inline-block; margin: 2% 0 10%;}
.reserveButton a,
.caseButton a {
    margin: 10px auto;
    padding: 8% 20%;
    background: #fff;
    color: #3e3e3e;
    font-weight: bold;
    border: 2px solid #6f6f6f;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s;
}
.reserveButton a:after,.caseButton a:after {
    position: absolute;
    -webkit-transition: .3s;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #dedede;
}
.reserveButton a:hover,.caseButton a:hover {border-radius: 50px;}
.reserveButton a:hover:after,.caseButton a:hover:after {width: 0%;}
.intro figure {margin: 0;}

.fadein.scrollin {opacity : 1; transform : translate(0, 0);}
.fadein {opacity : 0.1; transform : translate(0, 50px); transition : all 600ms;}
    .consulSection:before {
      animation: bg-color 10s infinite;
      -webkit-animation: bg-color 10s infinite;
    z-index: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.05);
    }
    @-webkit-keyframes bg-color {
      0% { background-color:rgba(0,0,0,0.05); }
      20% { background-color:rgba(3, 169, 244, 0.05); }
      40% { background-color:rgba(224, 134, 0, 0.05); }
      60% { background-color:rgba(255, 255, 255, 0.15); }
      80% { background-color:rgba(82, 22, 0, 0.15); }
      100% { background-color:rgba(0,0,0,0.05); }
    }
    @keyframes bg-color {
      0% { background-color:rgba(0,0,0,0.05); }
      20% { background-color:rgba(3, 169, 244, 0.05); }
      40% { background-color:rgba(224, 134, 0, 0.05); }
      60% { background-color:rgba(255, 255, 255, 0.15); }
      80% { background-color:rgba(82, 22, 0, 0.15); }
      100% { background-color:rgba(0,0,0,0.05); }
    }
    .step li {margin: 10% 0;}
    .stepText {width: 50%; margin: 0 auto; text-align: center;}
    .step {padding: 0;}
    .step img {margin: 2% 0 3%;}
    span.title {display: inline-block;}
.title {font-size: 22px;}
.stepTitle {font-size: 15px; font-weight: 600; display: block; text-align: center; width: 50%; margin: 0 auto;}
.faq01 {position: absolute; top: 300px; text-align: center; padding: 0px 2%; width: 240px;}
.intro {width: 100%; margin: 0 0 8%;}
.links {width: 100%; margin: 0 0 6%; display: inline-block;}

aside.share {text-align: center;}
aside.share a {display: inline-block; padding: 5px;}
aside.share span {display: inline-block; color: #999; font-size: 11px; margin-right: 5px;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.tw_btnImg {width: 23px; padding-right: 0;}
aside.share img.fbBtn {width: 19px; padding-right: 0;}

/*footer {background: #fff;}
footer.siteFooter {padding-bottom: 15px;}
footer .backLink svg#title {width: 140px; height: auto; display: inline-block; margin-right: 20px; vertical-align: middle;}
footer .backLink {text-align: center; margin: 40px 0; font-size: 13px;}
footer .copyright {text-align: center; float: none; display: block;}*/

header.siteHeder {position: relative; max-width: 1024px; margin: 20px auto; padding: 0 20px;}
header.siteHeder h1 {line-height: 1; font-size: 16px; display: inline-block; margin: 0;}
header.siteHeder h1 a,
#home a {display: inline-block;}
header.siteHeder h1 svg#title {width: 140px; height: 21px; display: inline-block; margin-right: 20px; vertical-align: middle;}
header.siteHeder h1 .sub {font-size: 12px; font-family: serif; display: inline-block; color: #666;}

header .mainVisual ul {width:800px; height:100px; position:absolute; top:80%; left:0; right:0; bottom:0; margin:0 auto; text-align:center;}
header .mainVisual li {background-color:#fff; opacity:0.5; border-radius:50%; width:120px; height:120px; display:inline-block; text-align:center middle; padding:50px 0; vertical-align:middle; margin:20px;}
header .mainVisual li.fadein {opacity:0.5;}
header .mainVisual li span {color:#000; opacity:1; font-size:15px; font-weight:normal;}

article p {font-size:14px;}
article .lead {font-size:14px; text-align:center; margin-bottom:60px;}
article .lead br {display:none;}
article .title {font-size: 22px; text-align:center; margin-bottom:24px;}
article .title br {display:none;}

#sa_introduction {margin-bottom:30px; width:630px;}
#sa_introduction figure img {width:120px;}
#sa_introduction .icon figure,
#sa_introduction .icon div {display:inline-block; width:120px; margin-right:24px; margin-bottom:0;vertical-align:top;}
#sa_introduction .icon div {width:400px; margin-right:0;}
#sa_introduction .icon div p {margin-top:0;}

#sa_service {background: #f8f6f3; text-align: center; margin: 4% 0 0; overflow: hidden; max-width: initial; padding: 30px; width:100%;}
#sa_service img {width: 80%;}
#sa_service .service {margin-bottom:60px;}
#sa_service .title {margin-bottom:40px;}
#sa_service .title br {display:none;}
#sa_service h3 {font-weight:600; font-size:20px; margin-bottom:10px;}
#sa_service p {line-height:1.8;}
#sa_service1 {text-align: center; margin: 4% 0 0; overflow: hidden; max-width: initial; padding: 30px; width:100%;}
#sa_service1 h3 {font-weight:600; font-size:22px; margin-bottom:10px;}

#sa_activities {
    height: auto;
    overflow: hidden;
    margin-bottom: 40px;}
#sa_activities #report01 {margin-top :-40px;}
#sa_activities figure {
    position: relative;
    max-height: 800px;
    overflow: hidden;
    text-align: center;
    margin: auto;
}
#sa_activities figure figcaption {
    position: absolute;
    left: 0;
    bottom: 50px;
    color: #fff;
    text-shadow: 1px 1px 15px #888;
    font-weight: 600;
    right: 0;
    margin: 0 auto;
    //width: 500px;
    text-align: center;
    font-size: 16px;
}
#sa_activities figure figcaption .pcOnly+span {font-size: 14px; display: block; margin: 30px auto; padding: 10px; border: 1px solid #fff; width: 300px; text-align: center; color: #fff; position:relative;}
#sa_activities figure figcaption .pcOnly+span:after {display: block; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; margin: -4px -5px 0 0; border-top: solid 1px #fff; border-right: solid 1px #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: "";}
#sa_coordinate {background: #fefcfc; text-align: center; margin-top:0; overflow: hidden; max-width: initial; width:100%;}
#sa_coordinate .mainVisual h2 {
  width: auto;
  margin:60px auto 0;
}
#sa_coordinate .coordinateVisual {padding: 0 auto 40px;}
#sa_coordinate #coordinateList {display:flex; width:100%; justify-content: center; flex-wrap:wrap; margin-bottom:40px;}
#sa_coordinate #coordinateList li img {width:100%;}
#sa_coordinate #coordinateList li a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
#sa_coordinate #coordinateList li {width:20%; margin:5px 8px 20px; opacity: 0; line-height:1.6; text-align: left; font-size:12px; position:relative;}
#sa_coordinate #coordinateList li a .sa {color:#333; background: #fff; opacity:0.8; padding:6px 8px; position:absolute; bottom:-2px; left:-3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); display:block;}

#sa_coordinate #coordinateList li:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(4) {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 0.5s ease 2.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(6) {
  -webkit-animation: example 0.5s ease 3s 1 forwards;
  animation: example 0.5s ease 3s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(7) {
  -webkit-animation: example 0.5s ease 3.5s 1 forwards;
  animation: example 0.5s ease 3.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(8) {
  -webkit-animation: example 0.5s ease 4s 1 forwards;
  animation: example 0.5s ease 4s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(9) {
  -webkit-animation: example 0.5s ease 4.5s 1 forwards;
  animation: example 0.5s ease 4.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(10) {
  -webkit-animation: example 0.5s ease 5s 1 forwards;
  animation: example 0.5s ease 5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(11) {
  -webkit-animation: example 0.5s ease 5.5s 1 forwards;
  animation: example 0.5s ease 5.5s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(12) {
  -webkit-animation: example 0.5s ease 6s 1 forwards;
  animation: example 0.5s ease 6s 1 forwards;
}
#sa_coordinate #coordinateList li:nth-child(13) {
  -webkit-animation: example 0.5s ease 6.5s 1 forwards;
  animation: example 0.5s ease 6.5s 1 forwards;
}
@-webkit-keyframes example {
  100% {opacity: 1;}
}
@keyframes example {
  100% {opacity: 1;}
}
.modal-content .coordinateDetail figure .img {width:50%;}
.modal-content .coordinateDetail figure .img,
.modal-content .coordinateDetail figure figcaption {display:inline-block; vertical-align:top;}
.modal-content .coordinateDetail figure figcaption .sa {display:block;}
.modal-content .coordinateDetail figure figcaption {text-align:left; width:40%; background: #fff; opacity:0.85; padding:10px 30px 20px; margin-top:70px; line-height:2;}
.modal-content .coordinateDetail figure figcaption ul {margin-top:40px;}
.modal-content .coordinateDetail figure figcaption li {margin:20px 0 20px; opacity:1;}
.modal-content .coordinateDetail figure figcaption li .thumb {float:left;}
.modal-content .coordinateDetail figure figcaption li .desc {display:inline; margin-left:2px; min-height:50px;font-size:13px;}
.modal-content .coordinateDetail figure figcaption li:after {content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}

/*cross*/
.square {width: 20px; height: 21px; margin: 40px auto; position: relative; background:#999;}
.square.cross {width:1px; left:37.5px;}
.square.cross:before {
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    background:#999;
}
.square.circle:after {
    content:"";
    display:block;
    width:100%;
    height:200%;
  width:4300%;
  border:1px solid #999;
  border-radius:50%;
  position:absolute;
  top:-11px;
  left:-22px;
}
.square.cross.batu {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

#shopInfo {margin-bottom:60px;}
#shopInfo .wrap dt {color:#666;margin-bottom:10px;}
#shopInfo .wrap dd {margin-bottom:36px;}
#shopInfo .wrap dd li {display:inline-block; margin:0 10px;}

#home {line-height: 1; position: absolute; top: 0; right: 20px;}
#home a img {width: 110px; opacity: 0.5;}
#home a img:hover {opacity: 1;}

.related {margin: 20px; text-align: center;}
.related a {display: inline-block; border: 1px solid #eee; padding: 8px 35px 8px 20px; text-decoration: none; color: #888; line-height: 1.5; position: relative; font-size: 13px;}
.related a:hover {border: 1px solid #ccc; transition: 100ms background-color,100ms border-color,100ms color,100ms fill;}
.related a:after {display: block; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; margin: -4px -5px 0 0; border-top: solid 1px #ccc; border-right: solid 1px #ccc; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: "";}

aside.share {text-align: center;}
aside.share a {display: inline-block; padding: 5px;}
aside.share span {display: inline-block; color: #999; font-size: 11px; margin-right: 5px;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.tw_btnImg {width: 23px; padding-right: 0;}
aside.share img.fbBtn {width: 19px; padding-right: 0;}

/* footer {background: #fff;}
footer.siteFooter {padding-bottom: 15px;}
footer .backLink svg#title {width: 140px; height: auto; display: inline-block; margin-right: 20px; vertical-align: middle;}
footer .backLink {text-align: center; margin: 40px 0; font-size: 13px;} */


	
.imsize {
	width: 100%;
	}	
	
.wrapper {
	display: block;
	max-width:1220px;
	margin-top:  20px;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	overflow: hidden;
}


.say50 {
	display: block;
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 30px;
	float: left;
	}	
	
.say50 img {
	width: 100%;
	}	


	


/* media */
@media screen and (max-width: 768px) {
.inner {
    background: url(../img/advisor_main-23.jpg) center center / cover no-repeat;
    display: block;
    width: 100%;
    height: 70vh;
    background-size: 150%;
    position: relative;
  }
#pconly { display: none;}
#mbonly { display: block;}
  
  .related a {font-size: 12px;}
    #home {line-height: 1; position: absolute; top: 3px; right: 20px;}
    #home a img {width: 90px;}
    header .mainVisual ul {width:90%; height:inherit; top:60%;}
    article .lead br {display:block;}
    #sa_service img {width: 100%;}
    #sa_service .service {margin-bottom:30px;}
  .title {font-size: 18px;}
  .captionSection, .flowSection {width: 100%; margin: 10% auto 12%;}
  .consulList li {width: 50%;}
  .reserveLink {width: 100%; display: inline-block; margin: 10% 0 20%;}
  .button a {margin: 10px auto; padding: 6% 14%;}
  .consulList .comment{padding: 20% 2% 20%; height: 380px;}
  .reserveLink-bottom, .caseLink {width: 100%;margin: 6% 0 12%;}
  .reserveButton a, .caseButton a {padding: 5% 16%;}
  #sa_service h3 {font-size:17px; margin-bottom:0;}
  #sa_coordinate {margin-top: -30px; margin-bottom: 40px;}
  #sa_coordinate #coordinateList li {width: 44%;width: margin: 5px 5px 20px !important;}
  #sa_coordinate .coordinateDetail figure .img img {width: 90%;}
  .square.cross {width: 1px; left: 0;}
  .modal-content .coordinateDetail figure .img,
  .modal-content .coordinateDetail figure figcaption {display: block; vertical-align: initial;}
  .modal-content .coordinateDetail figure .img {width: 100%;}
  .modal-content .coordinateDetail figure figcaption {width: 100%; opacity: 1; margin-top: 0; position: relative;}
  .modal-content .coordinateDetail figure figcaption p {width: 100%; opacity: 0.8; margin: 0; padding: 15px 0;}
  #sa_activities figure figcaption {position :absolute; left:0; top:initial; bottom:10px;font-size: 14px;}
  #sa_activities figure figcaption h2 span {font-size:16px;}
  #sa_service1 h3 {font-size:18px; margin-bottom:0; margin-top:15px;}
  
  .say50 {
	display: block;
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
	}	
	
  
}
@media screen and (max-width: 414px){
  .inner {height: 56vh;}
  header .mainVisual ul {top: 40%; height: 200px;}
  header .mainVisual li {width: 100px; height: 100px; padding: 40px 0; margin: 10px;}
  #sa_introduction {width: 100%; padding: 0 30px;}
  article .title {font-size: 15px; margin-bottom: 10px;}
  article #shopList .title {font-size: 18px; margin-bottom: 30px;}
  article .title br {display:block;}
  article .lead {margin-bottom: 30px; margin-top: 30px;}
  #sa_introduction .icon figure {width: 100px; margin-right: 10px;}
  #sa_introduction .icon figure img {width: 100px;}
  #sa_introduction .icon div {width: 230px;}
  #sa_service {margin: 10px 0 0;}
    #sa_service .title br {display: block;}
    #sa_service img {width: 98%;}
    #sa_activities #report01 {margin-top: 0;}
    #sa_activities #report01 a figure {margin:0;}
    #sa_activities figure figcaption {position :absolute; left:0; top:initial; bottom:0;}
    #sa_activities figure figcaption h2 span {font-size:14px;}
    #sa_activities figure figcaption .pcOnly+span {font-size:13px; margin: 0 auto 15px; padding: 5px; width: 50%;}
}
@media screen and (max-width: 375px){
  header .mainVisual li {width: 90px; height: 90px; padding: 34px 0; margin: 5px;}
  #sa_introduction .icon figure,
  #sa_introduction .icon figure img {width: 90px;}
  #sa_introduction .icon div {width: 210px;}
  #sa_service {padding: 20px 10px 10px;}
  #sa_service .title {margin-bottom: 30px;}
    #sa_service img {width: 88%;}
}
@media screen and (max-width: 320px){
  article .lead br {display:none;}
  header .mainVisual li {width: 80px; height: 80px; padding: 30px 0;}
  #sa_introduction .icon figure {margin-right: 6px;}
  #sa_introduction .icon div {width: 186px;}
  #sa_introduction {padding: 0 16px;}
  #sa_coordinate h2.title {font-size:16px;}
}


#project .say50 {
	display: block;
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 30px;
	float: left;
	}
	
.wrapper {
        width: 85%;
    }