

/*==================================================================
	1. wrap_head
===================================================================*/

@media only screen and (min-width:768px) {
    .pc { display: block !important; }
    .sp { display: none !important; }
}

#wrap_head {
 max-width: 1000px;
 margin: 0 auto;
}

.logo {
 margin: 1rem;
 width: 15rem;
}

/* VI変更 */
.pc_header_logo {
  width: 10rem !important;
 }


/*==================================================================
	2. wrap_top
===================================================================*/

#wrap_top {
 height: 80%;
 background-color: #FFFFFF;
 max-width: 1000px;
 margin: 0 auto;
}

h1 {
 text-align: center;
 color:#9C004E;
 font-size: 3rem;
 font-weight: 100;
 line-height: 4rem;
 margin: 5rem 5rem 3rem;
}

.head-lead {
 color:#707070;
 font-size: 1.8rem;
 font-weight: 100;
 line-height: 2.4rem;
 margin: 2rem 2rem 1rem 15% ;
}

.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%;
}

.head-lead2 {
 color:#002895;
 font-size: 1.2rem;
 font-weight: 100;
 line-height: 2.0rem;
 white-space: nowrap;
 margin: 20% 0rem 0rem ;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
}

.head-lead2sub {
 font-size: 1.0rem;
}


/*==================================================================
	3. wrap_01
===================================================================*/

#wrap_01 {
 background-image: url(../img/wrap_01-bk-img.png);
 background-repeat: no-repeat;
 background-size: cover;
 padding: 45px;
 clear: none;
 max-width: 1000px;
 margin: 0 auto;
}

.area-w01 {
 background-color: #FFF;
 border-radius: 10px;
 padding: 10px 60px;
 text-align: center;
}

.w01text_01head {
 color:#001365;
 margin: 10rem 0 3rem 0;
}

.w01text_02head {
 color:#9C004E;
 margin: 1rem 0 0.5rem 0;
}

.area-text_03 {
 background-image: url(../img/wrap_01-ribbon-img.png);
 background-position: left;
 background-repeat: no-repeat;
 background-size: 100%;
 text-align: center;
 margin: 3rem 0rem 0rem -45px;
 padding: 2rem;
 width: 100%;
}

.w01text_03head {
 color:#fff;
 font-size: 200%;
 font-weight: 800;
 margin: 0;
}

.w01text_03 {
 color:#fff;
 font-size: 120%;
 margin: 0 2rem;
}

.img-text-box {
 position:relative;
 min-height:280px;
 padding: 0;
}

.w01area-img {
 position:absolute;
 width: 35%;
 margin-left: 5rem;
}

.w01area-text {
 text-align: center;
 margin-left: 20rem;
 color: #707070;
}

.area-3point-img {
 margin: 5rem 0 0 -105px;
 width: auto;
}

.kome {
 color:#707070;
 font-size: 100%;
 margin: 0;
}

td {
 vertical-align: middle;
 text-align: left;
 padding: 5px
}

.w100 {
 width: 100%;
}

.open-img {
 width: 80%;
}

.open-text {
 color:#707070;
 font-size: 120%;
 line-height: 140%;
}


/*==================================================================
	4. wrap_02
===================================================================*/

#wrap_02 {
 background-color: #6A5458;
 padding: 45px 25px 45px;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

.w02text_01head {
 color:#FFFFFF;
 font-size: 170%;
 font-weight: 100;
 text-align: center;
 margin: 3rem 0 5rem 0;
}

.w02_circle {
 width: 26%;
 text-align: center;
 display: inline-block;
 padding: 5rem 0;
 margin: 0 2rem;
 background-image: url(../img/wrap_02-circle-img_pc.png);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 100%;
}

.w02text_02head {
 color:#FFFFFF;
 font-size: 120%;
 font-weight: 100;
 text-align: center;
}

.w02-blue {
 color: #62FFFB;
}


/*==================================================================
	5. wrap_03
===================================================================*/

#wrap_03 {
 background-color: #6A5458;
 padding: 45px;
 width: auto;
 max-width: 1000px;
 margin: 0 auto;
}

.table {
 background-image: url(../img/wrap_02-headbk-img.png);
}

.td {
 display: table-cell;
 vertical-align: top; 
}

.tdR {
 display: table-cell;
 vertical-align: top; 
 width: 60%;
}

.w03area-text_h2 {
 padding: 0 0 0 3rem;
 margin-right: 0;
 background-image: url(../img/wrap_02-headbk-img.png);
 width: 100%; 
}

.w03area-text_h2-right {
 padding: 3rem 0 0 3rem;
 margin-right: 0;
 background-color: #fff;
 width: 100%;
}

.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 2rem 2rem;
 vertical-align: top;
}

.w03area-text {
 color:#707070;
 font-size: 120%;
 line-height: 120%;
 margin: 0 2rem 0 0;
}

.w03-blue {
 color: #3AD7DC;
}

.w03area-text_bottom {
 color: #fff;
 font-size: 140%;
 line-height: 160%;
 font-weight: 800;
 text-align: center;
 margin: 2rem 3rem 0rem;
}

.w03text_03 {
 color:#707070;
 font-size: 100%;
 line-height: 100%;
 margin: 0 2rem 0 0;
}

.w03area-text_link {
 color:#707070;
 font-size: 90%;
 line-height: 100%;
 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 45px 0;
 width: auto;
 max-width: 1000px;
 margin: 0 auto;
}

.area-w04 {
 background-color: #fff;
 border-radius: 10px 10px 0 0;
 padding: 10px 60px;
 text-align: center;
}

.w04area-text_h2 {
 background-image: url(../img/wrap_02-ribbon-img.png);
 background-position: left;
 background-repeat: no-repeat;
 margin: 5rem -10rem 0;
}

.w04text_h2 {
 font-size: 260%;
 font-weight: 800;
 margin: 1rem 1rem;
 text-align: center;
}

.w04text_h3 {
 color: #707070;
 font-size: 130%;
 line-height: 120%;
 font-weight: 800;
 text-align: center;
 margin: 5rem 0 2rem;
}

.w04area-box {
 padding: 0rem;
 width: auto;
}

.w04text_h4 {
 color: #E2AA2D;
 font-size: 140%;
 line-height: 120%;
 text-align: center;
 margin: 0.3rem;
}

.phone {
 color: wrap_02-ribbon-img.png;
}

.w800 {
 font-weight: 800;
}

.w04area-text {
 color: #E2AA2D;
 font-size: 120%;
 line-height: 120%;
 margin: 0;
 text-align: center;
}

.w04-blue {
 color: #3AD7DC;
}

.w04-gray {
 color: #707070;
}

.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: 130%;
 line-height: 150%;
 text-align: center;
 margin: 4rem 0 1rem;
}

.w04area-text_linkURL {
 color: #E2AA2D;
 font-size: 80%;
 font-weight: 800;
 line-height: 100%;
 text-align: center;
 text-decoration: none;
 margin: 1rem 0 2rem;
}


/*==================================================================
	7. wrap_05
===================================================================*/

#wrap_05 {
 background-color: #fff;
 padding: 45px 45px 0 45px;
 width: auto;
 max-width: 1000px;
 margin: 0 auto;
}

.w05text_h2 {
 font-size: 200%;
 font-weight: 800;
 text-align: center;
 margin: 7rem 0.5rem 1rem;
}

.w05text_h2-2 {
 color: #707070;
 font-size: 200%;
 font-weight: 100;
 text-align: center;
 margin: 4rem 1rem 1rem;
}

.W05-table {
 margin: 2rem;
}

.W05-tdL {
 width: 40%;
 vertical-align: top;
}

.w05text_h3 {
 color: #707070;
 font-size: 130%;
 font-weight: 100;
 margin: 1rem 0;
}

.w05-blue {
 color: #83D5D8;
}

.w05text_01 {
 color: #707070;
 font-size: 120%;
 font-weight: 100;
 margin: 1rem 0;
}

.w05text_02 {
 color: #707070;
 font-size: 120%;
 line-height: 120%;
 font-weight: 100;
 text-indent: -1em;
 margin: 1rem 0 1rem 1rem;
}

.w05text_03 {
 color: #E2AA2D;
 font-size: 150%;
 font-weight: 100;
 line-height: 120%;
 margin: 1rem 0;
}

.w05text_03-2 {
 color: #707070;
 font-size: 120%;
 font-weight: 100;
 line-height: 150%;
 margin: 1rem 0;
}

.w05-la {
 font-size: 120%;
 margin-bottom: 1rem;
}

.w05img_Btm {
 margin-top: 5rem;
 margin: auto;
 width: 100%;
 max-width: 1000px;
}


/*==================================================================
	8. fotter
===================================================================*/

#fotter {
 background-color: #EBFFF7;
 padding: 45px;
 width: auto;
 max-width: 1000px;
 margin: 0 auto;
}

.fotter-text {
 color: #707070;
 font-size: 120%;
 line-height: 180%;
 margin: 5rem 2rem 2rem;
}

.fotter-table {
 margin: auto;
 width: 100%;
}

.fotter-table2 {
 width: 50%;
}

.fotter-td {
 width: 50%;
}


.linkbox {
 position: relative;
 background-image: url(../img/fotter_linkbox.png);
 background-size: 100%;
 background-repeat: no-repeat;
 margin: 0 auto;
 padding: 4rem 1rem;
 width: 90%;
 border: 1px;
}

.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.linkbox-text {
 color: #303030;
 font-size: 90%;
 line-height: 120%;
 font-weight: 800;
 text-align: center;
 margin-top: -3rem;
}

.linkbox_utext {
 color: #707070;
 font-size: 100%;
 text-align: center;
 margin: 0;
}

.fotter-text2 {
 color: #707070;
 font-size: 110%;
 line-height: 140%;
 text-align: center;
 margin: 5rem 2rem 2rem;
}

.fotter-textbox {
 width: 100%;
}

.fotter-logo {
 width: 40%;
 margin: 4rem 0 1rem;
}

.fotter-text3 {
 color: #707070;
 font-size: 140%;
 line-height: 170%;
 margin: 0 0 2rem;
}

.fotter-ja {
 color: #707070;
 font-size: 90%;
 line-height: 100%;
 text-align: center;
 margin-bottom: 2rem;
}

.fotter-linktext {
 color: #707070;
 font-size: 110%;
 line-height: 110%;
 text-align: center;
 margin-bottom: -1rem;
}

.copylight {
 color: #707070;
 font-size: 100%;
 text-align: right;
 margin: 8rem 2rem 0 0;
}




/*スクロール追随するボタン*/
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;
}
