@charset "utf-8";
/* CSS Document */

#hirayanomachi_logo{
  stroke-width:1px; 
  fill:transparent; 
  stroke-dasharray:1425px; 
  stroke-dashoffset:1425px; 
  animation:anim 10s ease-in 0s forwards;
}
@keyframes anim{
  0%{stroke-dashoffset:1425px;}
  30%{fill:transparent;}
  60%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:0; fill:#000000;}
}

/*
#page_main{
  position: relative;
}
*/




.style_maincontents img:after{
  content: "";

}


#slide_wrapp{
  overflow: hidden;
}
.slide_item{
  opacity: 0;
  transform: scale(1);
  transition: opacity 2s linear, transform 7.5s linear; 
  position: relative;
  z-index: 1;
}

.slide_item:not(:first-child){
  position: absolute;
  top: 0;
  left : 0;
}

.show_{
  opacity: 1;
}
.zoom_{
  transform: scale(1.1);
}
img{
  display: block;
}
.wrapper{
	display: flex;
}
.corporate_logo {
  padding: 2%;
}
#slide_wrapp{
  width: 100%;
  z-index: -1;
  position:relative;
  color: #fff;
}

/*
#message-white, #message-black {
    position: absolute;
    left: 7%;
    top: 43%;
    font-size: 80px;
    font-family: serif;
    width: 100%;
    margin: 0;
    padding: 0;
}
*/
/*
#message-black {
    width: 15.6%;
    z-index: 5;
    overflow: hidden;
    white-space: nowrap;
}

#message-white span {
    z-index: 1;
    position: absolute;
    /* width: 700px; */
    /* height: 200px; */
    /*overflow: hidden;
    color: #fff;
}
*/
p.top_text {
    background-color: #fff;
    display: inline-block;
    position: absolute;
    bottom: 35%;
    left: 4%;
    font-size: 48px;
    padding: 3px;
    text-align: center;
    font-weight: 500;
}

.top_catch {
    text-align: center;
    padding-top: 20px;
    font-weight:300 ;
    /* margin: 0 auto; */
}

.top_catch img{
  width: 220px;
  margin-bottom: 10px;
}

.top_catch p {
    text-align: left;
    margin: 0 auto;
    line-height: 2em;
    letter-spacing: 4px;
    font-size: 16px;
    font-weight: 500;
}
.top_catch p:first-of-type{
  margin-bottom: 2%;
}

.title h2 {
    font-weight: 400;
    font-size: 5.5em;
    letter-spacing: .08em;
    color: #111;
    font-family: 'Roboto', sans-serif;
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
}


.title h2:before {
    content: "";
    display: block;
    width: 80px;
    border: 4px solid #111;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
}


.title p.title {
    color: #111;
    font-weight: 400;
    letter-spacing: .2em;
    margin-top: 28px;
    font-size: 15px;
}

section.bukken,
section.news,
section.no1 {
    text-align: center;
    padding-right: 17%;
    padding-left: 17%;
}
section.hiraya_style{
  text-align: center;
  position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(../img/DSC_0126.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*background-position: bottom;*/
padding-top:60%;
}


section.hiraya_style .title{
position: absolute;
    z-index: 999;
    top: 18%;
    right: 1%;
}

section.hiraya_style .title div{
  margin-top: 10%;
}
section.hiraya_style .title p {
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3em;
    color: #fff;
    margin-bottom: 46px;
}


section.hiraya_style .title h2{
  color: #fff;
}
section.hiraya_style .title h2:before{
  border:4px solid #fff;
}


section.gda{
  text-align: center;
  padding-right:7%;
  padding-left: 7%;
}

section.news .news_contents {
    border-bottom: 1px solid #333;
    display: inline-block;
    width: 80%;
    padding: 20px;
    text-align: left;
    }
.news_contents a{
font-size: 16px;
    font-weight: 400;
  }

  span.news_date{
    margin-right: 8%;
    display: inline-block;
    margin-bottom: 10px;
  }

section.bukken ul.flex_box{
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2%;
}
.title{
  padding-bottom: 3%;
}
section.bukken li.contents {
    width: 42%;
    margin-bottom: 10%;
}
section.bukken li.contents img{
  width: 100%;
}

section.bukken h3 {
    font-weight: 400;
    font-size: 21px;
    letter-spacing: .2em;
    padding-top: 5%;
}

section.bukken h3:after {
    content: '';
    width: 40px;
    height: 3px;
    background-color: #111;
    display: block;
    margin: auto;
    margin-top: 3%;
}



section.bukken .text {
    text-align: center;
    line-height: 3em;
    position: relative;
    background-color: whitesmoke;
    padding: 0 5% 35px 5%;
}
section.bukken .bukken_text_first{
  padding-top: 5%;
}

section.bukken .bukken_text_second{
  padding-top: 11%;
  text-align: left;
  display: inline-block;
}

p.thin{
  font-weight: 300;
}
div.comment{
    padding-top: 10%;
    font-weight: 300;
}

.more {
    font-weight: 300;
    border: 1px solid #333;
    padding: 5px;
    margin-top: 12%;
}


section.bukken .more{
  width: 60%;
  text-align: center;
  background-color: #fff;
}


section.bukken .more i{
    line-height: inherit;
    margin-left: 30%;
}
 
.first{
  margin-bottom: 6%;
  display: inline-block;
}

 

.style_top{
  margin-bottom: 8%;
}

/*
section.hiraya_style .style_maincontents {
    background-color: black;
    position: relative;
}

section.hiraya_style .style_maincontents img {
    opacity: 0.6;
    display: block;
}
*/

.sizew70{
  width: 70%;
}

section.model_plan div,
section.opinion div,
section.introduction div,
section.doboku_pride div,
section.order div{
position: relative;
}

section.model_plan{
  /*position: relative;*/
  display: flex;
  padding-top: 21%;
}
section.opinion,
section.introduction,
section.doboku_pride,
section.order{
  margin-top: 12%;
  /*position: relative;*/
  display: flex;
  padding-top: 0;
}
section.opinion,
section.doboku_pride{
  flex-direction: row-reverse;
}
section.model_plan .section_text,
section.order .section_text,
section.introduction .section_text {
    bottom: 7%;
    position: absolute;
    left: 87%;
    background-color: #fff;
    padding: 2% 3% 3%;
}


section.model_plan,
section.opinion,
section.introduction,
section.order,
section.doboku_pride,
.square_merit .more,
.square_reason .more,
.square_kurasu .more{
  overflow: hidden;
}

section.model_plan div img,
section.model_plan .section_text,
section.opinion div img,
section.opinion .section_text,
section.introduction div img,
section.introduction .section_text,
.square_merit .more,
.square_reason .more,
.square_kurasu .more,
section.doboku_pride div img,
section.doboku_pride .section_text,
section.order div img,
section.order .section_text{
  transition: all 0.5s;
}

section.model_plan div img:hover,
section.model_plan .section_text:hover,
section.opinion div img:hover,
section.opinion .section_text:hover,
section.introduction div img:hover,
section.introduction .section_text:hover,
.square_merit .more,
.square_reason .more,
.square_kurasu .more,
section.order div img:hover,
section.order .section_text:hover,
section.doboku_pride div img:hover,
section.doboku_pride .section_text:hover{
  transform: scale(1.1, 1.1);
}

section.opinion .section_text,
section.doboku_pride .section_text{
    bottom: 7%;
    position: absolute;
    right:87%;
    background-color: #fff;
    padding: 2% 3% 3%;
}

.section_text h4 {
    font-size: 3em;
    font-weight: 100;
    text-align: left;
    font-family: 'Roboto', sans-serif;
}
.section_text p {
    font-weight: 300;
}
.section_text .more {
    display: block;
    margin-top: 31px;
    width: 260px;
    text-align: center;
}
section.contents_block{
  display: flex;
  justify-content: space-between;
}

.square_merit {
    background-image: url(../img/merit_square.jpg);
    position: relative;
    width: 30%;
    height: auto;
    background-size: contain;
}
.square_reason {
    background-image: url(../img/reason_square.jpg);
    position: relative;
    width: 30%;
    height: auto;
    background-size: contain;
}
.square_kurasu {
    background-image: url(../img/kurasu_square.jpg);
    position: relative;
    width: 30%;
    height: auto;
    background-size: contain;
}

.box-1x1:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
.adjust-box p {
    line-height:1.5em;
}

section.contents_block .section_text {
    padding-top: 30%;
    margin-left: 11%;
}
section.contents_block .more {
    display: inline-block;
    background-color: #fff;
}



section.no1 .title img{
  width: 15%;
  margin:0 auto 1%;   
  }

section.no1 .title{
  text-align: center;
}


section.no1  p.font_big {
    margin: 36px;
    font-size: 30px;
    font-weight: 500;
}

section.no1 .flex_box{
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10%;
}

section.gda .gda_text{
  text-align: left;
  font-weight: 100;
}

section.gda .gda_text p{
  margin-bottom: 10%;
}

.w25{
  width: 25%;
}

section.gda .flex_box{
  align-items: center;
}

section.gda .gda_left{
    padding-right: 7%;
    width: 44%;
}

section.gda .gda_text{
  width: 60%;
}

section.gda .hiraya_logo{
width: 40%;
margin-right: 10%;
}

section.gda .gda_logo{
  width: 25%;
}




section.contact{
    background-color: #808080;
    margin-top: 13%;
    padding: 5% 0;
}
section.contact .title {
    padding-bottom: 0;
    display: block;
    margin: 0 auto;
    /* text-align: center; */
    margin-right: auto;
    margin-left: auto;
    max-width: 587px;
}
section.contact .title p.big,
section.contact .title p.title{
  color: #fff;
}
section.contact .title p.big{
    font-weight: 400;
    font-size: 5.5em;
    letter-spacing: .08em;
    font-family: 'Roboto', sans-serif;
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
}
section.contact:hover{
background-color: #000;
transition: 1.0s;
}




/*contactの矢印の動き*/

section.contact #toright{
  stroke-width:1px; 
  fill:transparent; 
  stroke-dasharray:1425px; 
  stroke-dashoffset:1425px; 
  animation-name: toright;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-delay: 0;
margin-bottom: -4%;
}

@keyframes toright{
  0%{stroke-dashoffset:1425px;}
  
  100%{stroke-dashoffset:0; fill:#fff;}
}








.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
  overflow: hidden;
}
  
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #222;
}



.isPlay_reverse {
  animation-name: play_reverse;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
  overflow: hidden;
}
  
.isPlay_reverse:before {
  animation-name: maskOut_reverse;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #222;
}


section .box{
  overflow: hidden;
}

@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}

@keyframes play_reverse {
  from {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut_reverse {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(-100%);
  }
}


.isPlay_hanbai {
  animation-name: play_hanbai;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
  position: relative;
  opacity: 1 !important;
  overflow: hidden;
}
  
.isPlay_hanbai:before {
  animation-name: maskOut_hanbai;
  animation-duration: 3s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) ;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200%;
  height: 100%;
  background-color: #222;
  
}
@keyframes play_hanbai {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(0);
  }
}


@keyframes maskOut_hanbai {
  from {
    transform: skew(-15deg);

  }
  
  to {
    transform: translateX(100%);
  }
}
























/*ここからメディアクエリ*/


@media screen and (max-width: 1280px){
section.bukken,
section.news,
section.no1{
  padding-right:10%;
  padding-left: 10%;
}

section.hiraya_style{
  padding-right: 0;
  padding-left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(../img/sp_hirayastyle.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 120%;
    background-attachment: fixed;
    background-position: bottom;
}
section.hiraya_style .title{
  top: 10%;
  left:8%;
  right: 8%;
}
}




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

section.bukken, section.news, section.no1{
  padding-right:5%;
  padding-left: 5%;
}

  section.bukken ul.flex_box{
    display: block;
    margin-bottom: 35%;
  }
section.bukken li.contents{
  margin: 0 auto 20% auto;
  width: 80%;
}
section.bukken li.contents:last-of-type{
  margin-bottom: 0;
}
section{
  padding-top: 150px;
}
section.hiraya_style .flex_box02{
  margin-top: 100px;
}
section.hiraya_style .style_maincontents p{
  font-size: 16px;
}
section.model_plan img,
section.opinion img,
section.introduction img,
section.doboku_pride img{
  width: 90%;
}

section.opinion img,
section.doboku_pride img{
  margin-left: auto;
}
section.model_plan .section_text, 
section.introduction .section_text{
  left: 66%;
  max-width: 270px;
}
section.opinion .section_text,
section.doboku_pride .section_text{
  right: 0;
  left: 0;
  max-width: 270px;
}

section.model_plan{
padding-top:250px;
}
section.contents_block{
  flex-wrap: wrap;
  justify-content: space-around;
}


section.contents_block .section_text{
  margin-left: 3%;
  }
section.contents_block .square_merit,
section.contents_block .square_reason,
section.contents_block .square_kurasu{
  width: 40%;
}
section.contents_block .square_kurasu{
  margin:0 auto;
  margin-top: 5%;
}


}






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

.news_contents a{
  font-size: 14px;
}


section.bukken li.contents{
  width: 100%;
}

section.hiraya_style .flex_box02,section.hiraya_style .flex_box{
display: block;
}
section.hiraya_style .style_maincontents .style_text{
  width: 100%;
  padding-bottom: 40px;
}
section.hiraya_style .flex_box02{
  margin-top: 40px;
}
section.hiraya_style .style_text p.first_text{
margin-bottom: 40px;
}

section.hiraya_style .right{
  width: 90%;
  margin:0 auto;
}
section.hiraya_style p.bottom{
  text-align: left;
}


section.model_plan, 
section.introduction,
section.opinion,
section.doboku_pride{
  display: block;
}



section.model_plan img,
section.opinion img,
section.introduction img,
section.doboku_pride img{
  width: 100%;
}

section.model_plan .section_text, 
section.introduction .section_text,
section.opinion .section_text,
section.doboku_pride .section_text{
position: initial;
    width: 50%;
    margin: 0 auto;
    text-align: left;
}
section.contents_block{
  display: block;
}

section.contents_block .square_merit, section.contents_block .square_reason, section.contents_block .square_kurasu{
  width: 300px;
  margin: 0 auto;
  margin-top: 5%;
}

section.hiraya_style {
    text-align: center;
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(../img/sp_hirayastyle.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
    padding-top: 147%;
    padding-bottom: 33%;
}
/*
section.hiraya_style .title{
  width: 90%;
  top:5%;
  right: 4%;
}
*/
section.hiraya_style .title h2{
  font-size: 2.5em
}
section.hiraya_style .title h2:before{
      border: 2px solid #fff;
    margin-top: 5%;
}
section.hiraya_style .title p{
  font-size: 14px
}
}





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

section.model_plan .section_text, section.introduction .section_text, section.opinion .section_text,section.doboku_pride .section_text{
  padding:2%;
  width: 85%;
}
.section_text h4{
  font-size: 22px;
}

.section_text .more{
  margin-top: 5%;
}



}