@charset "utf-8";
.sub_main {
  height: 372px;
  text-align: center;
}
.sub_main .ttl_box {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}
.sub_main .ttl_box > div {
  color: #FFF;
  text-align: left;
}
.sub_main .ttl_box .ttl {
  margin-bottom: 25px;
}
.sub_main .ttl_box .ttl span {
  display: inline-block;
  letter-spacing: 0.2em;
  vertical-align: middle;
}
.sub_main .ttl_box .ttl span.m {
  margin-right: 40px;
  font-size: 6.0rem;
  font-weight: 500;
}
.sub_main .ttl_box .ttl span.s {
  position: relative;
  top: -5px;
  font-size: 1.8rem;
  font-weight: 500;
}
.sub_main .ttl_box .text {
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

/*　sec1
---------------------------------------------------------*/
.sec1 {
	position: relative;
	padding: 95px 0 50px;
}
.sec1_ttl {
  color: #0056A7;
  margin-bottom: 32px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.sec1 .lead {
  margin-bottom: 70px;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.1em;
}
.sec1_01 {
  margin-bottom: 120px;
}
.sec1_01 figure {
  border-top: 6px solid #0056A7;
  width: 29.07%;
  max-width: 300px;
}
.sec1_01 figcaption {
  display: flex;
  -ms-display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #E8E8E8;
  padding: 5px;
  height: 96px;
  font-size: 1.4rem;
  text-align: center;
  line-height: 2;
  letter-spacing: 0.2em;
}
.sec1_02 {}
.sec1_02 dt {
  display: flex;
  -ms-display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #0056A7;
  color: #FFF;
  width: 32.47%;
  max-width: 335px;
  font-size: 2.0rem;
  letter-spacing: 0.2em;
}
.sec1_02 dd {
  width: 62.5%;
  max-width: 645px;
}
.sec1_02 dd ul {}
.sec1_02 dd ul li {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
}
.sec1_02 dd ul li + li {
  border-top: 1px solid #A1A1A1;
  margin-top: 22px;
  padding-top: 22px;
}

.case_list {
  margin-bottom: -115px;
}
.case_list li {
  width: 44.97%;
  max-width: 464px;
  margin-bottom: 115px;
}
.case_list li a {
  position: relative;
  display: block;
}
.case_list li a:hover {
  opacity: 1;
}
.case_list li figure {
  margin-bottom: 26px;
  overflow: hidden;
}
.case_list li figure img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.case_list li a:hover figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.case_list li figure img,
.case_list li a:hover figure img {
  -webkit-transition: -webkit-transform 5s cubic-bezier(.25,.46,.45,.94) 0s;
  transition: transform 5s cubic-bezier(.25,.46,.45,.94) 0s;
}
.case_list li h3 {
  color: #5a8dc9;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 700;
  
}
.case_list li p.spot {
  position: relative;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 12px auto;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
}
.case_list li div.arw {
  position: absolute;
  bottom: 11px;
  right: 15px;
}
.case_list li div.arw:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1px;
  margin: auto;
  width: 14.5px;
  height: 14.5px;
  border-top: 1px solid #B3B3B3;
  border-right: 1px solid #B3B3B3;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.case_list li a:hover div.arw:before {
  -webkit-transform: rotate(45deg) translate3d(5px,-5px,0);
  transform: rotate(45deg) translate3d(5px,-5px,0);
}
.case_list li div.arw:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 1px solid #B3B3B3;
  margin: auto;
  width: 0;
}
.case_list li a:hover div.arw:after {
  width: 25px;
  -webkit-transform: translate3d(8px,0,0);
  transform: translate3d(8px,0,0);
}
.case_list li div.arw:before,
.case_list a:hover li div.arw:before,
.case_list li div.arw:after,
.case_list li a:hover div.arw:after {
  -webkit-transition: all .45s ease;
  -moz-transition: all .45s ease;
  transition: all .45s ease;
}

@media screen and (max-width: 1032px) {}

/*---------------------------------------------------------
  スマホ
---------------------------------------------------------*/
@media screen and (max-width: 680px) ,screen and (max-width: 737px) and (orientation: landscape) {
  .sub_main {
    height: 263px;
}
	.sub_main .ttl_box {}
	.sub_main .ttl_box > div {}
	.sub_main .ttl_box .ttl {}
	.sub_main .ttl_box .ttl span {}
	.sub_main .ttl_box .ttl span.m {
    margin-right: 20px;
    font-size: 3.0rem;
    display: block;
}
	.sub_main .ttl_box .ttl span.s {
    top: 0px;
    font-size: 1.4rem;
}
	.sub_main .ttl_box .text {
    font-size: 1.0rem;
}
	
	/*　sec1
	---------------------------------------------------------*/
	.sec1 {
    padding: 40px 0 90px;
}
	.sec1_ttl {
    margin-bottom: 16px;
    font-size: 1.2rem;
}
	.sec1 .lead {
    margin-bottom: 35px;
    font-size: 1.0rem;
}
	.sec1_01 {
    margin-bottom: 60px;
}
	.sec1_01 figure {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
    border-width: 3px;
}
	.sec1_01 figcaption {
    padding: 0 2em;
    height: 48px;
    font-size: 1.0rem;
    line-height: 1.5;
}
	.sec1_02 {}
	.sec1_02 dt {
    width: 100%;
    margin-bottom: 13px;
    font-size: 1.2rem;
    line-height: 6.2rem;
}
	.sec1_02 dd {
    width: 100%;
}
	.sec1_02 dd ul {}
	.sec1_02 dd ul li {
    font-size: 1.0rem;
}
	.sec1_02 dd ul li + li {
    margin-top: 11px;
    padding-top: 11px;
}
	
	.case_list {}
	.case_list li {
    width: 100%;
    margin-bottom: 50px;
}
	.case_list li a {}
	.case_list li a:hover {}
	.case_list li figure {}
	.case_list li figure img {}
	.case_list li a:hover figure img {}
	.case_list li figure img,
	.case_list li a:hover figure img {}
	.case_list li h3 {
    font-size: 1.2rem;
}
	.case_list li p.spot {
    background-size: 8px auto;
    padding-left: 13px;
    font-size: 1.0rem;
}
	.case_list li div.arw {}
	.case_list li div.arw:before {
    width: 10.5px;
    height: 10.5px;
}
	.case_list li a:hover div.arw:before {}
	.case_list li div.arw:after {}
	.case_list li a:hover div.arw:after {}
	.case_list li div.arw:before,
	.case_list a:hover li div.arw:before,
	.case_list li div.arw:after,
	.case_list li a:hover div.arw:after {}

}