@charset "UTF-8";

h1 {margin: 0; line-height: 1.5;}
dl {font-size: 13px; margin: 0;}
dt {font-weight: bold;}
dd {margin: 0 0 5px 0;}

.mobileOnly {display: none;}
.pcOnly {display: block;}
@media only screen and (max-width : 767px){
	.mobileOnly {display: block;}
	.pcOnly {display: none;}
}
article {margin: 0 auto 60px; max-width: 1024px;}
article section {margin: 0 auto 40px; max-width: 700px; padding: 0 20px;}
article h1 {font-size: 1.5em; margin-top: 40px;}
article h2 {font-size: 1.2em;}
article p,
article dl {margin-bottom: 10px; line-height: 1.8;}
@media only screen and (max-width : 480px){
    article h1 {font-size: 1.3em;}
    article h2 {font-size: 1.1em;}
}
article footer {margin: 0 auto 40px; border-top: 1px solid #eee; color: #666; max-width: 700px; padding: 20px;}
article footer li {width: 100%;}
article footer h1 {margin-top: 0;}
article footer img.portrait {width: 15%; margin-right: 20px; float: left;}
@media only screen and (max-width : 480px){
	article footer img.portrait {width: 20%;}
}
small {vertical-align: top; color: #999;}

/* column */
article.column header img {width: 100%;}

blockquote {margin: 40px 0; font-family: serif; font-size: 2em; color: #999; line-height: 1.6;}
blockquote p {line-height: 1.5;}

article section p img {width: 50%; float: left; margin: 0 20px 0 0;}
article section:after {content: ""; clear: both; display: block;}

article.column header {position: relative;}
article.column header .columnTitle {position: absolute; top: 40px; right: 40px; font-size: 16px;}
article.column header .columnTitle.white {color: #fff;}
article.column header .columnTitle.black {color: #000;}
article.column header .columnTitle h1 {font-size: 3em; margin: 0 0 10px;}
article.column header .columnTitle h2 {margin-left: 10px; font-size: 16px; display: block; margin: 10px 0 0 0;}
article.column header .columnTitle .sub {margin-left: 10px; font-size: 13px;}
article.column a {text-decoration: underline;}

#column003 article.column header .columnTitle {top: 40px; left: 40px;}

@media only screen and (max-width : 480px){
    article.column header .columnTitle {top: 20px; right: 20px;}
    article.column header .columnTitle h1 {font-size: 1.45em; margin: 0 0 10px;}
    blockquote {font-size: 1.5em;}
    article section p img {width: 100%; margin: 0 0 20px 0;}
    #column003 article.column header .columnTitle {bottom: 20px; left: 20px; top: auto; right: auto;}
}


/* case */
article.column.case .columnTitle {margin-bottom: 20px;}
article.column.case .columnTitle h1 {font-size: 2.2em; margin: 0 20px 10px;}
article.column.case .columnTitle h1 .caseTitle {color: #999; margin-right: 10px; font-size: 1.1em; font-family: serif;}
article.column.case .columnTitle h2 {margin-left: 20px;}
@media only screen and (max-width : 767px){
	article.column.case .columnTitle h1 .caseTitle {line-height: 1.2;}
	/*article.column.case .columnTitle h1 {margin: 0 0 0 20px;}*/
}
@media only screen and (max-width : 480px){
    article.column.case .columnTitle h1 {font-size: 1.3em; padding-right: 20px;}
    article.column.case .columnTitle h2 {font-size: 1.1em;}
}
.case .title {font-weight: bold;}
.case figure p.title {font-weight: bold; margin: 10px 0; font-size: 11px;}
/*.case section ul {margin-bottom: 20px;}
.case section li {list-style-type: disc; margin: 0 0 5px 20px;}
*/

.case section.list ul {padding: 0;}
.case section.list ul:after {content: ''; clear: both; display: block;}
.case section.list ul {
    margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 3%;}
.case section.list li {width: 49%; max-width: 501px; height: auto; list-style: none; margin: 20px 2% 0 0;}
.case section.list li:nth-child(2n) {margin-right: 0;}
@media only screen and (max-width : 480px){
    .case section.list li {width: 100%; margin-right: 0;}
    .case section.list li:first-child {margin-top: 0;}
}

.case figure {margin: 0; width: 50%; display: inline-block; /*margin: 3% 3% 0 0;*/ vertical-align: top;}
.case figure:nth-child(2n) {margin-right: 0;}
.case .annotation {color: #999; font-size: 11px;}
.case .cap {display: block; max-width: 700px; margin: 20px 0; font-size: 13px;}

@media only screen and (max-width : 480px){
	.case figure {width: 100%; display: block; margin: 20px 0 0 0;}
	.case .annotation {font-size: 10px;}
}
.case dl {font-size: 11px; overflow: hidden;}
.case figure img,
.case img {width: 100%;}
.case figcaption {font-size: 11px; margin-top: 10px;}
.case .intro {margin-bottom: 40px;}
.case section.list a img:hover {opacity: .8;}
.case section.list a {text-decoration: none; color: #333;}


article {margin: 0 auto 60px; max-width: 1024px;}
article section {margin: 0 auto 40px; max-width: 800px; padding: 0 3%;}
article.case.top section {padding: 40px 5% 0; margin-bottom: 0;}

article h1 {font-size: 1.5em; margin-top: 40px;}
article h2 {font-size: 1.2em;}
article p,
article dl {margin-top: 10px; line-height: 1.6;}　/*margin-top: 5px; →　margin-top: 10px;*/
article dt {font-size: 13px; line-height: 1.6;}
article figure {margin: 0 0 40px 0;}
article .column2 {margin-bottom: 40px;}
article .column2 dl {float: left; width: 47%; margin: 0 3% 0 0;}
article .column2 img {width: 50%; float: right;}

article img + p {margin-top: 10px;}
article .wrap p {font-size: 11px;}
article .wrap figure p {margin-bottom: 20px;}

@media only screen and (max-width : 480px){
    article .column2 dl {float: none; width: 100%; margin: 0 0 20px 0;}
    article .column2 img {float: none; width: 100%;}
}

article img + img {margin-top: 20px;
}
article .column2-2,
article .column3 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
article .column2-2 figure,
article .column2-2 li {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  margin-right: 3%;
  /*max-width: 48.5%;*/
}
article .column3 figure {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  margin-right: 5%;
  max-width: 30%;
}
article .column2-2 figure:last-child,
article .column3 figure:last-child {margin-right: 0;}
/*article .column2-2 dl,
article .column3 dl {margin-top: 0;}*/
/*article .column2-2 img,
article .column3 img {margin-bottom: 5px;}*/

@media only screen and (max-width : 480px){
    article .column2-2,
    article .column3 {display: block;}
    article .column2-2 figure,
    article .column3 figure {display: block; max-width: 100%; margin-right: 0;}
}

article section#intro .wrap:after,
#intro:after,
.column1:after,
.column2:after,
.column2-2:after,
.column3:after,
.point:after {content: ""; clear: both; display: block;}


#advisor {
    max-width: 760px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

@media only screen and (max-width : 759px) {
  #advisor {width: 90%;}
}

article #advisor h1 {margin: 0 0 20px 0; font-size: 1em; line-height: 1;}
#advisor .intro {width: 100px; float: left; margin: 0 20px 0 0;}
.case #advisor figure {width: 100%; margin: 0;}
article #advisor p {margin-top: 0; font-size: 13px; overflow: hidden;}
article #advisor p:last-child {margin-bottom: 0;}
article #advisor p.name {font-size: 12px; font-weight: bold;}
.itemList {font-size: 11px; list-style: none; margin: 5px 0 20px;}

section.column2-3 p {width: 60%; float: left;}
section.column2-3 .before {float: right; width: 35%;}
.case .column2-3 figure {width: 100%;}

@media only screen and (max-width : 480px) {
  article #advisor p {overflow: inherit;}
  section.column2-3 p,
  section.column2-3 .before {width: 100%; float: none;}
}


/*160915_新規追加分*/
div.col {margin-bottom: 20px;}
div.col .cap2 {width: 63%; float: left;}
div.col .before {float: right; width: 35%; margin-top: 10px;}
div.col .before figure {width: 100%;}
div.col:after {content: ""; clear: both; display: block;}

.column2-2 figure.before {float: right; width: 75%; margin:-5px 0 0 0;}

@media only screen and (max-width : 499px){
  div.col .cap2 {width: 100%; float: none;}
    div.col .before {float: none; width: 100%; margin-top: 10px;}
    .column2-2 figure.before {float: none; width: 100%; margin: 0;}
}
/*20201217_新規追加分*/
.flex_wrap {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.service .side_2{
	width:calc(100% / 2 - 30px);
	margin: 15px;
}
.side_2 img{
	width: 100%!important;
}
.side_2 h3{
	text-align: left;
	padding: 0 12px;
}
.side_2 p{
	padding: 2px 12px;
	margin: 0;
	text-align: right;
}
.side_2  .cont{
	text-align: left;
	margin-bottom: 30px;
}
@media only screen and (max-width : 499px){
	.service .side_2{
		width:calc(100%);
		margin: 0px;
	}
	.side_2 h3{
		padding: 0px 4px;
	}
	.side_2 p{
		padding: 0 4px;
	}
}