/*==================================================================
	1. wrap_head
===================================================================*/

@media only screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.logo {
 margin: 1rem;
 width: 5rem;
}

/* VI変更 */
.sp_header_logo {
  margin: 5px !important;
  width: 8rem !important;
 }
/*==================================================================
	2. wrap_top
===================================================================*/

#wrap_top {
 height: 700px;
 background-color: #FFFFFF;
 max-width: 1000px;
 margin: 0 auto;
}

h1 {
 text-align: center;
 color:#9C004E;
 font-size: 2.6rem;
 font-weight: 100;
 line-height: 3.2rem;
 margin: 5rem 5rem 3rem;
}

.head-lead {
 color:#707070;
 font-size: 1.8rem;
 font-weight: 100;
 line-height: 2.6rem;
 margin: 2rem 2rem 1rem 4rem ;
}

.item-stack_relative {
 position: relative;
 z-index: 0;
}

.item-stack_absolute1 {
 position: absolute;
 z-index: 1;
}

.item-stack_absolute2 {
 position: absolute;
 z-index: 2;
}

.building {
 width: 100%;
}

.text-box {
 text-align: center;
 width: 100%;
 padding: 4rem;
}

.leftMV {
 margin-left: -2rem;
 margin-right: 2rem;
}

.head-lead2 {
 color:#002895;
 font-size: 1.2rem;
 font-weight: 100;
 line-height: 1.6rem;
 margin-top: 34%;
}

.head-lead2sub {
 color:#002895;
 font-size: 1.0rem;
 font-weight: 100;
 line-height: 1.0rem;
}

@media only screen and (max-width: 560px) {
 .head-lead2 {
  font-size: 1.0rem;
  line-height: 1.2rem;
  margin-top: 32%;
 }
 .head-lead2sub {
  font-size: 0.8rem;
  line-height: 0.8rem;
 }
}

/*==================================================================
	3. wrap_01
===================================================================*/

#wrap_01 {
 background-image: url(../img/wrap_01-bk-img.png);
 padding: 45px 25px 45px;
 clear: none;
 width: auto;
}

.area-w01 {
 background-color: #FFF;
 border-radius: 10px;
 padding: 10px 60px;
 text-align: center;
 margin-top: 28rem;
 width: auto;
}

.w01text_01head {
 color:#001365;
 font-weight: 100;
 margin: 3rem 0 5rem 0;
}

.w01text_02head {
 color:#9C004E;
 margin: 15rem 0 0.5rem 0;
}

.area-text_03 {
 background-color: #FFF;
 text-align: center;
 margin: 5rem -2rem -3.5rem;
 padding: 2rem;
}

.w01text_03head {
 color:#83D5D8;
 font-size: 300%;
 font-weight: 800;
 margin: 2rem;
}

.w01text_03 {
 color:#83D5D8;
 font-size: 160%;
 margin: 2rem;
}

.img-text-box {
 position: relative;
 min-height: 50%;
 padding: 0;
}

.w01area-img {
 position:absolute;
 width: 45%;
 margin-top: 6rem;
 margin-left: -1rem;
}

.w01area-text {
 text-align: center;
 font-size: 180%;
 margin-top: -6rem;
 margin-left: 45%;
 color: #707070;
}

@media only screen and (max-width: 640px) {
 .w01area-text {
 font-size: 150%;
 }
}

@media only screen and (max-width: 540px) {
 .w01area-text {
 font-size: 120%;
 }
}

@media only screen and (max-width: 420px) {
 .w01area-text {
 font-size: 100%;
 }
}

.area-3point-img {
 position:absolute;
 margin-top: -16rem;
 margin-left: -85px;
 width: 100%;
}

.kome {
 color:#707070;
 font-size: 8px;
 margin: 0;
}

td {
 vertical-align: middle;
 text-align: left;
 padding: 5px
}

.w100 {
 width: 100%;
}

.open-img {
 width: 100px;
}

.open-text {
 color:#707070;
 font-size: 12px;
}


/*==================================================================
	4. wrap_02
===================================================================*/

#wrap_02 {
 background-color: #6A5458;
 padding: 45px 25px 45px;
 width: auto;
 position: relative;
}

.w02text_01head {
 color:#FFFFFF;
 font-size: 280%;
 font-weight: 100;
 text-align: center;
 margin: 3rem 0 5rem 0;
}

.w02_circle {
 width: 100%;
 text-align: center;
 display: table;
 padding: 15rem 0;
 background-image: url(../img/wrap_02-circle-img.png);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}

.w02text_02head {
 color:#FFFFFF;
 font-size: 200%;
 font-weight: 100;
 text-align: center;
}

@media only screen and (max-width: 600px) {
 .w02text_02head {
 font-size: 160%;
}
}

.w02-blue {
 color: #62FFFB;
}


/*==================================================================
	5. wrap_03
===================================================================*/

#wrap_03 {
 background-color: #FFFFFF;
 padding: 0;
 width: auto;
}

.w03area-text_h2 {
 padding: 3rem 0 0 3rem;
 background-image: url(../img/wrap_02-headbk-img.png);
}

.w03text_h2box {
 border-left: 8px solid #707070;
 margin: 0 3rem 0 0;
}

.w03text_h2 {
 color:#707070;
 font-size: 200%;
 font-weight: 100;
 margin: 2rem 0 8rem 2rem;
 vertical-align: top;
}

.w03area-text {
 color:#707070;
 font-size: 140%;
 line-height: 200%;
 margin: 0 2rem 0 5rem;
}

.w03-blue {
 color: #3AD7DC;
}

.w03area-text_bottom {
 font-size: 140%;
 line-height: 160%;
 font-weight: 800;
 text-align: center;
 margin: 10rem 3rem 5rem;
}

.w03text_03 {
 color:#707070;
 font-size: 110%;
 line-height: 140%;
 text-indent: -1em;
 margin: 0 2rem 0 6rem;
}

.w03area-text_link {
 color:#707070;
 font-size: 120%;
 line-height: 160%;
 text-decoration: none;
 margin: 0 2rem 0 5rem;
}

.w03area-text_link:before {
    content:  ""; 
    width:  16px;   
    height:  16px; 
    display:  inline-block; 
    background-color: #C9C9C9; 
    border-radius:  50%;
    position:  relative;
    top: 3px;
    margin-right: 5px; 
}


/*==================================================================
	6. wrap_04
===================================================================*/

#wrap_04 {
 background-color: #6A5458;
 padding: 45px;
 width: auto;
}

.w04area-text_h2 {
 padding: 3rem 1rem;
}

.w04text_h2 {
 font-size: 260%;
 font-weight: 800;
 margin: 1rem 1rem;
 text-align: center;
}

.w04text_h3 {
 color: white;
 font-size: 180%;
 line-height: 120%;
 font-weight: 100;
 text-align: center;
 margin: 1rem;
}

.w04area-box {
 background-color: white;
 padding: 3rem;
 width: auto;
}

.w04text_h4 {
 color: #E2AA2D;
 font-size: 180%;
 line-height: 120%;
 text-align: center;
 margin: 1rem;
}

.phone {
 color: #707070;
}

.w800 {
 font-weight: 800;
}

.w04area-text {
 color:#707070;
 font-size: 140%;
 line-height: 140%;
 margin: 0;
 text-align: center;
}

.w04-blue {
 color: #62FFFB;
}

.w04text_03 {
 color:#707070;
 font-size: 110%;
 line-height: 140%;
 text-indent: -1em;
 margin: 0 2rem 0 6rem;
}

.w04area-text_link {
 color:#707070;
 font-size: 180%;
 line-height: 150%;
 text-align: center;
 margin: 2rem 1rem;
}

.w04area-text_linkURL {
 color: #E2AA2D;
 font-size: 100%;
 line-height: 120%;
 text-align: center;
 text-decoration: none;
 margin: 2rem 1rem;
}


/*==================================================================
	7. wrap_05
===================================================================*/

#wrap_05 {
 background-color: #FFFFFF;
 padding: 45px;
 width: auto;
}

.w05area-text_h2 {
 padding: 1rem 0 0;
}

.w05text_h2 {
 font-size: 200%;
 font-weight: 800;
 text-align: center;
 margin: 7rem 0.5rem 1rem;
}

.w05text_h2-2 {
 font-size: 200%;
 font-weight: 100;
 text-align: center;
 margin: 4rem 1rem 1rem;
}

.w05text_h3 {
 color: #707070;
 font-size: 140%;
 font-weight: 100;
 margin: 5rem 1rem 0 -4rem;
 border-bottom: 4px solid #83D5D8;
}

.w05-blue {
 color: #83D5D8;
}

.w05text_01 {
 color: #707070;
 font-size: 170%;
 font-weight: 100;
 margin: 1rem 1rem 1rem 2.2rem;
}

.w05text_02 {
 color: #707070;
 font-size: 120%;
 line-height: 120%;
 font-weight: 100;
 text-indent: -1.3rem;
 margin: 0rem 1rem 1rem 2.2em;
}

.w05text_03 {
 color: #E2AA2D;
 font-size: 150%;
 font-weight: 100;
 line-height: 150%;
 margin: 0rem 1rem 1rem 1.6em;
}

.w05text_03-2 {
 color: #707070;
 font-size: 150%;
 font-weight: 100;
 line-height: 150%;
 margin: 0rem 1rem 1rem 1.6em;
}

.w05-la {
 font-size: 120%;
}

.w05img_Btm {
 margin-top: 5rem;
 width: 100%;
}


/*==================================================================
	8. fotter
===================================================================*/

#fotter {
 background-color: #EBFFF7;
 padding: 2rem;
 width: auto;
}

.fotter-text {
 color: #707070;
 font-size: 140%;
 line-height: 180%;
 text-align: center;
 margin: 5rem 2rem 2rem;
}

.linkbox {
 position: relative;
 background-image: url(../img/fotter_linkbox.png);
 background-size: 100%;
 background-repeat: no-repeat;
 margin: 0 auto;
 padding: 4rem 1rem 1rem;
 width: 80%;
 border: 1px;
}

.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.linkbox-text {
 color: #303030;
 font-size: 110%;
 line-height: 130%;
 font-weight: 800;
 text-align: center;
 margin-top: -2rem;
}

@media only screen and (max-width: 540px) {
.linkbox-text {
 color: #303030;
 font-size: 70%;
 line-height: 80%;
 text-align: center;
 margin-top: -2.5rem;
}
}

.linkbox_utext {
 color: #707070;
 font-size: 100%;
 text-align: center;
 margin: 1rem;
}

.fotter-text2 {
 color: #707070;
 font-size: 110%;
 line-height: 140%;
 text-align: center;
 margin: 5rem 2rem 2rem;
}

.fotter-textbox {
 width: 100%;
 text-align: center;
}

.fotter-logo {
 width: 80%;
 margin: 4rem 0 1rem;
}

.fotter-text3 {
 color: #707070;
 font-size: 120%;
 line-height: 140%;
 text-align: center;
 margin: 0 0 2rem;
}

.fotter-ja {
 color: #707070;
 font-size: 90%;
 line-height: 110%;
 text-align: center;
 margin: -1rem 0 2rem;
}

.fotter-textbox2 {
 width: 100%;
}

.fotter-linktext {
 color: #707070;
 font-size: 140%;
 line-height: 140%;
 text-align: center;
 margin-bottom: 2rem 0 -1rem;
}

.copylight {
 color: #707070;
 font-size: 80%;
 text-align: center;
 margin: 8rem 0 1rem;
}




/*スクロール追随するボタン*/
section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}

.button{
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 50px;
  color: #fff;
  background: #000;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}