@charset "UTF-8";

:root {
  --viewport: 750;
  --gorillaGold: #BBA170;
  --blue: #3054E0;
}

.txt_right {
	text-align:right;
}
.bold {
	font-weight:bold;
}
.inline {
	display:inline;
}
.cmnMore01 {
	display:none;
}
.font_blue {
  color: var(--blue);
}
.bold {
  font-weight: bold;
}
.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

#contents p {
    font-size: 18px;
	line-height: 1.66667;
}
@media screen and (max-width: 767px) {
	#contents p {
        font-size: calc(100vw / var(--viewport) * 22);
		line-height: 1.6;
	}
}

article h2 {
	margin-top:69px;
}
.article01 h2 {
    margin: 39px 0 0;
}
article h2.flex {
    justify-content: flex-start;
	align-items: flex-start;
}
article h2 .figure {
	margin-right:10px;
}
article h2 span {
	font-size:34px;
	font-weight:bold;
	border-bottom:1px solid #707070;
	padding-top:16px;
	padding-bottom:12px;
}


.box img,
.box div {
	width:565px;
	float:left;
}
.box div {
	color:#000;
	font-weight:bold;
	text-align:center;
	height:250px;
	background:#EFEFEF;
	display:table;
}
#contents .box div p {
	font-size:28px;
	display:table-cell;
	vertical-align:middle;
	line-height: 1.4;
}
#contents .box div p span {
	font-size:43px;
    line-height:1.6;
	display: block;
}
#contents .box div p span:after {
    content: "";
	display: block;
    width: 202px; 
    height: 1px;
    margin: 0 auto 20px;
    background: #000;
}

#contents p.read {
    color: var(--blue);
	font-size:30px;
	font-weight:bold;
	text-align:center;
	margin:50px 0;
}

.box2 {
	margin-top:35px;
}
.box2 > .flex {
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.box2 .txtArea {
	width:529px;
}
.box2 img {
	width:565px;
}
.box2 div .txt_right {
	margin-top:0.5em;
}
#contents .box2 div p {
	font-size:18px;
}
#contents .box2 div p.h3 {
	color: var(--gorillaGold);
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
	line-height: 1.41;
}

@media screen and (max-width: 767px) {
	article h2 {
		margin: calc(100vw / var(--viewport) * 70) 0 0;
	}
	.article01 h2 {
		margin: calc(100vw / var(--viewport) * 33) 0 0;
	}
	article h2 .figure {
        margin-right: calc(100vw / var(--viewport) * 10);
	}
	article h2 span {
		font-size: calc(100vw / var(--viewport) * 34);
		border-bottom:calc(100vw / var(--viewport) * 2) solid #707070;
		padding-top:3%;
		padding-bottom: calc(100vw / var(--viewport) * 10);
	}
	
	#contents p.read {
		font-size: calc(100vw / var(--viewport) * 27);
		line-height:1.6;
		margin: calc(100vw / var(--viewport) * 29) 0;
	}
	.box img,
	.box div {
		width:unset;
		float:none;
	}
	.box div {
		width:100%;
		height: calc(100vw / var(--viewport) * 195); 
	}
	.box2 {
		margin-top:5%;
	}
	.box2 img {
		width:unset;
		float:none;
	}
	.spWrap .box2:nth-child(even) .txtArea, .spWrap .box2:nth-child(even) img {
		margin: calc(100vw / var(--viewport) * 29) 0 0;
	}
	#contents .box div p {
		font-size: calc(100vw / var(--viewport) * 28);
		padding: calc(100vw / var(--viewport) * 22) 0;
		box-sizing: border-box;
	}
	#contents .box div p span {
		font-size: calc(100vw / var(--viewport) * 43);
		line-height:1.6;
	}
	#contents .box div p span:after {
		width: calc(100vw / var(--viewport) * 202); 
		height: calc(100vw / var(--viewport) * 1);
		margin: 0 auto calc(100vw / var(--viewport) * 15); 
	}
	#contents .box2 div p {
		font-size: calc(100vw / var(--viewport) * 18);
	}
	#contents .box2 div p.h3 {
		font-size: calc(100vw / var(--viewport) * 26);
		line-height:1.6;
		margin-bottom: calc(100vw / var(--viewport) * 14); 
	}
}


/*renewal*/
#contents .pageTtl{
  background: var(--blue);
  margin-top: calc(100vw / var(--viewport) * 18);
  padding: 15px 0;
  font-size: 1.8rem;
  text-align: center;
}
#conts .spWrap {
  padding: 0 calc(100vw / var(--viewport) * 22);
  background: #fff;
}
.mainVisual{
  padding-top: calc(100vw / var(--viewport) * 38);
}
#conts .read{
  font-size: calc(100vw / var(--viewport) * 22); 
  margin-top: calc(100vw / var(--viewport) * 34);
  line-height: 1.4545;
}
#contents .headLine02 {
  background: var(--blue);
  margin-top: calc(100vw / var(--viewport) * 60);
}
#conts .contsInner {
  font-size: calc(100vw / var(--viewport) * 22);
  line-height: 1.45;
  padding: calc(100vw / var(--viewport) * 55) 0 calc(100vw / var(--viewport) * 60);
}
article h2 .figure {
  font-size: calc(100vw / var(--viewport) * 104);
}

.button a {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 25);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #777;
  width: calc(100vw / var(--viewport) * 500);
  height: calc(100vw / var(--viewport) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(100vw / var(--viewport) * 60) auto 0;
}
.button a:hover {
  opacity: 0.6;
}
.button a span {
  font-size: calc(100vw / var(--viewport) * 18);
  margin-left: 0.5em;
  vertical-align: middle;
}
@media screen and (min-width: 767px) {
  #breadCrumb{
      width: 1130px;
  }
  #contents .pageTtl{
    width: 1130px;
    margin: 13px auto 0;
    padding: 25px 0 22px;
    font-size: 34px;
  }
  #contents .pageTtl span{
    font-size: 34px;
  }
  #conts .spWrap {
    width: 1130px;
    padding: 0;
    margin: 0 auto;
  }
  .mainVisual{
    padding-top: 50px;
  }
  #conts .read{
    font-size: 18px; 
    margin-top: 48.5px;
    line-height: 1.6666;
  }
  #contents .headLine02 {
    font-size: 34px;
    margin-top: 80px;
  }
  #conts .contsInner {
    font-size: 18px;
    width: 1130px;
    padding: 72px 0 80px;
    position: relative;
  }
  #caselist .box {
      margin-left: auto;
      margin-right: auto;
  }
  article h2 .figure {
    font-size: 104px;
  }
	
  .button a {
    font-size: 25px;
    width: 500px;
    height: 100px;
    margin: 66px auto 0;
  }
  .button a span {
    font-size: 18px;
  }
}