@charset "utf-8"; /* CSS Document */
/*--------------------------------------
　Main Index
---------------------------------------*/
#contents { width: 100%; }
/*--------------------------------------
　visArea
---------------------------------------*/
#visArea .mainArea {
 background: url("img/mv.jpg") center top no-repeat;
 background-size: cover;
 display: block;
 height: auto;
 
 text-align: center;
}
#visArea .mainArea .mainAreaInner {
 width: 570px;
 min-height: 535px;
 margin: 0 auto;
 display: block;
 padding: 4.5rem 5rem 3rem;
 background-color: #fff;
}
#visArea .mainArea .mainTxtBox {
 margin: 4rem 0 0;
}
#visArea .mainArea .mainTxtBox .catch01 {
 font-size: 1.8rem;
 font-weight: 700;
 line-height: 1.4;
 color: #000000;
}
#visArea .mainArea .mainTxtBox .catch02 {
 margin: 1rem 0 0;
 color: #e02838;
 font-size: 2.2rem;
 line-height: 1.2;
 font-weight: 700;
}
#visArea .mainArea .mainTxtBox .catch02 .bg {
 display: inline-block;
 color: #fff;
 font-size: 3.5rem;
 background-color: #e02838;
 padding: 0 0.2em;
 margin-top: 0.5rem;
}
#visArea .mainArea .mainTxtBox .txtArea {
 margin: 3rem 0;
 text-align: left;
 font-size: 1.6rem;
}
/*--------------------------------------
オリジナル
---------------------------------------*/
/***** ttl *****/
.ttl_area_wrap {
 background: linear-gradient(to bottom, #295180 0%, #081c40 100%);
 position: relative;
 margin: 0 0 4rem -100%;
 padding: 4rem 3rem 4rem 100%;
}
.ttl_area {
 margin: 0 auto;
 position: relative;
 display: table;
 width: 100%;
}
.ttl_area::before {
 content: "";
 width: 100%;
 height: 30px;
 background: url("img/ttl_area_en_list.png") no-repeat left top / auto 100%;
 position: absolute;
 top: -4rem;
 left: 0;
}
.ttl_area_wrap .ttl {
 display: table-cell;
 width: 49%;
 vertical-align: middle;
 text-align: left;
 padding: 1rem 3rem 1rem 0;
 position: relative;
 font-size: 3rem;
 letter-spacing: 0.1rem; 
}
.ttl_area_wrap .ttl a {
 width: 100%;
 position: relative;
 padding: 0 9rem 0 0;
 background: url("img/arrow01_white.png") no-repeat right center;
 background-size: 25px auto;
 color: #fff;
 display: inline-block;
}
.ttl_area_wrap .ttl::after {
 content: "";
 display: block;
 width: 1px;
 height: calc(100% + 4rem);
 background: #fff;
 position: absolute; 
 right: 0;
 top: 50%;
 transform: translateY(-50%);
}
.ttl_area .lead {
 display: table-cell;
 vertical-align: middle;
 text-align: left;
 padding:0 0 0 3rem;
 color: #fff;
}
.ttl_area .lead p { margin: 0; }
/***** addParts02 *****/
.addParts02 { background: url("img/addParts02_bg.jpg") repeat-y left 50% top 60% / 100% auto; }
#index .addParts02 .addInner > .ttl {
 font-size: 4rem;
 line-height: 1.4;
 text-align: center;
 margin: 0 0 14rem;
}
#index .addParts02 .addInner > .ttl .small {
 font-size: 3.2rem;
 color: #295180;
}
.addParts02 .block {
 background-color: #fff;
 margin: 4.6rem 0 10rem;
 position: relative;
}
.addParts02 .block:last-child { margin-bottom: 0; }
.addParts02 .price_area {
 color: #fff;
 font-size: 3.3rem;
 font-weight: 700;
 line-height: 1.4;
 padding: 3rem 2rem;
 background: linear-gradient(to bottom, #0080c6 0%, #0054a6 100%);
 background-size: 79px auto;
 width: 370px;
 position: absolute;
 z-index: 2;
 top: -4.6rem;
 left: -3.2rem;
 text-align: center;
}
.addParts02 .price_area > div {
 display: inline-block;
 text-align: left;
}
.addParts02 .price_area .small { font-size: 2.6rem; }
.addParts02 .blockTitArea {
 text-align: left;
 padding: 4.2rem 10rem 4.2rem 20rem;
 margin: 0 0 5rem 20.6rem;
 background: linear-gradient(to bottom, #295180 0%, #081c40 100%);
 color: #fff;
}
.addParts02 .blockTitArea .blockTit {
 display: inline-block;
 font-size: 4.2rem;
 font-weight: 700;
 line-height: 1.2;
 text-align: center;
 color: #fff;
}
.addParts02 .block .inner { padding: 0 4rem 4rem; }
.addParts02 .block .title-wrap {
 position: relative;
 margin: 6rem 0 4rem;
 text-align: center; 
}
.addParts02 .block .title-wrap .title {
 display: inline-block;
 font-size: 2.8rem;
 line-height: 1.4;
 text-align: center;
 position: relative;
 z-index: 1;
 padding: 0 6.7rem;
 background: url("img/title_bg02.png") no-repeat left 50% / 57px auto;
}
.addParts02 .addParts02_01 .box-ttl {
 text-align: center;
 font-size: 2.4rem;
 font-weight: 700;
 line-height: 1.4;
 color: #0055a7;
 margin: 4rem 0 5.3rem;
 background: #f3f4f6;
 padding: 1rem 0rem;
}
.addParts02 .addParts02_01 .box-wrap {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 22px;
 background: url("img/addParts02_arrow.png") no-repeat center 50% / 41px auto;
}
.addParts02 .addParts02_01 .box {
 width: calc((100% - 8rem) / 2);
 margin: 0;
 padding: 4rem 2rem 2rem;
 border: 1px solid #646464;
 position: relative;
}
.addParts02 .addParts02_01 .box .catch {
 width: 80%;
 margin: 0 auto;
 background-color: #646464;
 color: #fff;
 font-size: 2.4rem;
 font-weight: bold;
 line-height: 44px;
 text-align: center;
 position: absolute;
 top: -22px;
 left: 50%;
 transform: translateX(-50%);
}
.addParts02 .addParts02_01 .box-wrap .box:last-child { border-color: #0055a7; }
.addParts02 .addParts02_01 .box-wrap .box:last-child .catch { background-color: #1977e5; }
.addParts02 .addParts02_01 .box .ttl {
 text-align: center;
 margin: 0 0 2rem;
 color: #0055a7;
 font-size: 2.2rem;
 line-height: 1.4;
 font-weight: 700;
}
.addParts02 .addParts02_01 .caption { text-align: center; }
.addParts02 .addParts02_02 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 4.4rem;
}
.addParts02 .addParts02_02 .box + .box {
 position: relative;
}
.addParts02 .addParts02_02 .box + .box::before {
 content: "";
 display: block;
 height: 100%;
 width: 1px;
 background-color: #0055a7;
 position: absolute;
 left: -2.2rem;
 top: 0;
}
.addParts02 .addParts02_02 .box .ttl {
 color: #0055a7;
 font-weight: 700;
 font-size: 2.2rem;
 line-height: 1.4;
 margin: 0 0 2rem;
}
.addParts02 .addParts02_04 {
 background-color: #eef3f9;
 padding: 2.7rem 3rem;
}
.addParts02 .addParts02_04 .ttl {
 color: #0055a7;
 font-weight: 700;
 font-size: 2.6rem;
 line-height: 1.4;
 margin: 0 0 2rem;
 text-align: center;
}
.addParts02 .addParts02_03_wrap table { margin-bottom: 0; }
/***** addParts03 *****/
/***** addParts04 *****/
.addParts04 .ttl_area::before { background-image: url("img/ttl_area_en_example.png"); }
.addParts04 { background: #f3f4f6; }
.addParts04 .frame-wrap .frame { box-shadow: 9px 10px 0px 0px #fff; }
.addParts04 .frame-wrap .frame .frame-head {
 background: url("img/icon_frame.png") no-repeat left 50% / 55px auto;
 padding-left: 6rem;
}
/***** addParts05 *****/
.addParts05 .ttl_area::before { background-image: url("img/ttl_area_en_whatis.png"); }
/***** addParts06 *****/
.addParts05 .host { margin-top: 10rem; }

@media screen and (max-width: 480px) {
 #contents { width: 100%; }
 /*--------------------------------------
　visArea
 ---------------------------------------*/
 #visArea .mainArea {
  background: none;
  height: auto;
  min-height: auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
 }
 #visArea .mainArea .mainAreaInner {
  width: 100%;
  min-height: auto;
  padding: 0;
 }
 #visArea .mainArea .siteNameArea {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1477 / 606;
  background: url("img/mv.jpg") no-repeat center top / 100% auto;
  padding: 0 4%;
 }
 #visArea .mainArea .siteNameAreaInner {
  width: 40%;
  height: 100%;
  padding: 0 1rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 #visArea .mainArea .mainTxtBox {
  width: 100%;
  margin: 2rem 0 0;
  padding: 0 4%;
 }
 #visArea .mainArea .mainTxtBox .catch01 { font-size: 4.2vw; }
 #visArea .mainArea .mainTxtBox .catch02 { font-size: 5.2vw; }
 #visArea .mainArea .mainTxtBox .catch02 .bg { font-size: 7.3vw; }
 /*--------------------------------------
 オリジナル
 ---------------------------------------*/
 /***** ttl *****/
 .ttl_area_wrap {
  margin-bottom: 2rem;
  padding: 3rem 2rem 2rem 100%;
 }
 .ttl_area::before {
  height: 24px;
  top: -3rem;
 }
 .ttl_area_wrap .ttl::after { content: none; }
 .ttl_area { display: block; }
 #index .ttl_area_wrap .ttl {
  display: block;
  width: 100%;
  margin: 0 0 1.6rem 0;
  padding: 0;
  font-size: 2.4rem;
 }
 #index .ttl_area_wrap .ttl a {
  background-size: 20px;
  padding-right: 3rem;
 } 
 .ttl_area .lead {
  display: block;
  margin: 2rem 0 0 0;  
  padding: 1rem 0 0 0;
  border-top: 1px solid #fff;
  position: relative;
  font-weight: normal;
 }
 /***** addParts02 *****/
 #index .addParts02 .addInner > .ttl {
  font-size: 2.5rem;
  margin: 0 0 2rem;
 }
 #index .addParts02 .addInner > .ttl .small { font-size: 1.6rem; }
 .addParts02 .block { margin-bottom: 0; }
 .addParts02 .block .price_area {
  width: auto;
  display: inline-block;
  font-size: 2.1rem; 
  z-index: 2;
  position: relative;
  top: -1rem;
  left: 0;
  padding: 2rem;
 }
 .addParts02 .price_area .small { font-size: 1.8rem; }
 .addParts02 .blockTitArea {
  text-align: center;
  padding: 1.4rem;
  margin: 0 0 2.4rem;
 }
 #index .addParts02 .blockTit { font-size: 2.4rem; }
 .addParts02 .block .inner { padding: 0 1.6rem 4rem; }
 .addParts02 .block .title-wrap { margin: 5rem 0 2rem; }
 .addParts02 .block .title-wrap .title {
  font-size: 2rem;
  background-size: 40px auto;
  padding: 0 1rem 0 5rem;
 }
 .addParts02 .addParts02_01 .box-wrap {
  display: block;
  margin-top: 16px;
  background: none;
 }
 .addParts02 .addParts02_01 .box {
  width: 100%;
  padding: 1.6rem;
  padding-top: 3rem;
 }
 .addParts02 .addParts02_01 .box .catch {
  font-size: 1.8rem;
  line-height: 32px;
  top: -16px;
 }
 .addParts02 .addParts02_01 .box .ttl { font-size: 1.8rem; }
 .addParts02 .addParts02_01 .box-wrap .box:last-child {
  margin-top: 6rem;
  position: relative;
 }
 .addParts02 .addParts02_01 .box-wrap .box:last-child::before {
  content: "";
  width: 28px;
  aspect-ratio: 82 / 70;
  background: url("img/addParts02_arrow.png") no-repeat top left / 100% auto;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
 }
 .addParts02 .addParts02_02 { display: block; }
 .addParts02 .addParts02_02 .box { padding: 2rem 0 0.2rem; }
 .addParts02 .addParts02_02 .box .ttl { font-size: 1.8rem; }
 .addParts02 .addParts02_02 .box + .box { border-top: solid 1px #0055a7; }
 .addParts02 .addParts02_02 .box + .box::before { content: none; }
 .addParts02 .addParts02_04 .ttl { font-size: 1.6rem; }
 .addParts02 .addParts02_01 .box-ttl {
  margin: 3rem 0;
  font-size: 1.8rem;
 }
 .addParts02 .addParts02_03_wrap table th { width: 11rem; }
 /***** addParts03 *****/
 /***** addParts04 *****/
 .addParts04 .frame-wrap .frame .frame-head {
  background-size: 36px auto;
  padding-left: 4.2rem;
 }
 /***** addParts05 *****/
 /***** addParts06 *****/
}
/* SP_End */