@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
 /*---------------------------------------*/
/* circle */
/*---------------------------------------*/
.circle{
width: 308px;
}
@media screen and (max-width:767px){
.circle{
width: 150px;
}
}
.circle-s{
width:218px;
}
@media screen and (max-width:767px){
.circle-s{
width: 120px;
}
}
.ttlBox{
max-width: 381px;
}
@media screen and (max-width:767px){
.ttlBox{
max-width: 250px;
}
}
.ttlBox .ttl02{
margin-top: -5px;
}
.ttlBox .ttl .txt{
font-size: 48px;
top: 0;
left: 190px;
transform: translate(-50%,0);
}
@media screen and (max-width:767px){
.ttlBox .ttl .txt{
font-size: 32px;
left: 125px;
}
}
.ttlBox .txtOuter{
width: 0;
transition: all 1.5s ease;
}
@media screen and (max-width:767px){
.ttlBox .txtOuter{
width: 100%;
}
}
.ttlBox .ttl02 .txtOuter{
transition: all 1.5s ease 0.3s;
}
.ttlBox .animation .txtOuter{
width: 100%;
height: 48px;
}
@media screen and (max-width:767px){
.ttlBox .animation .txtOuter{
height: 32px;
}
}

.ttlBox .ttlIcon{
z-index: 11;
}
.ttlBox .ttlIcon .icon{
font-size: 32px;
}
.ttlBox.bgTtl{
top: -60px;
margin-bottom: -60px;
padding-bottom: 50px;
}
@media screen and (max-width:767px){
.ttlBox.bgTtl{
top: -39px;
margin-bottom: -39px;
padding-bottom: 30px;
}
}
 /*---------------------------------------*/
/* topArea */
/*---------------------------------------*/
.topArea {
margin-bottom: 330px;
}
@media screen and (max-width:980px){
.topArea{
margin-bottom: 80%;
}
}
@media screen and (max-width:500px){
.topArea{
margin-bottom: 100%;
}
}
.topArea .img{
margin-top: 100px;
width: 80%;
max-width: 600px;
z-index: 10;
opacity: 0;
transition: opacity 0.8s ease 0.3s;
}
@media screen and (max-width:767px){
.topArea .img{
margin-top: 80px;
}
}
.topArea.animation  .img{
opacity: 1;
}
.topArea .img .indicator{
display: none;
}
.topArea .circle01{
top: 120px;
right: calc(50% + 250px);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.topArea .circle01{
right: calc(50% + 150px);
}
}
@media screen and (max-width:767px){
.topArea .circle01{
top: 70px;
right:auto;
left: -30px;
}
}
.topArea.animation  .circle01{
opacity: 1;
}
.topArea .circle02{
top: 170px;
left: calc(50% + 250px);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.topArea .circle02{
top: 230px;
left: calc(50% + 100px);
}
}
@media screen and (max-width:767px){
.topArea .circle02{
left: auto;
right:-15px;
}
}
.topArea.animation  .circle02{
opacity: 1;
}
.topArea .txt01{
top:50%;
right: calc(50% + 175px);
transform: translate(0,-50%);
z-index: 10;
}
@media screen and (max-width:1120px){
.topArea .txt01{
left:2%;
right: auto;
}
}
@media screen and (max-width:980px){
.topArea .txt01{
left:5%;
top: 160%;
}
}
@media screen and (max-width:980px){
.topArea .txt01{
left: 50%;
transform: translate(-50%,0);
}
}
.topArea .txt01 .imgOuter{
z-index: 10;
top: 0;
left: 0;
}
.topArea .txt01 .imgOuter img{
width: 355px;
max-width: none;
}
@media screen and (max-width:767px){
.topArea .txt01 .imgOuter img{
width: 250px;
}
}
.topArea .txt01 .line{
left: 0;
width:0;
height: 16px;
background: #F7AC84;
}
@media screen and (max-width:767px){
.topArea .txt01 .line{
height: 12px;
width: 100%;
}
}
.topArea .txt01 .line02{
left: 15%;
}
@media screen and (max-width:767px){
.topArea .txt01 .line{
width: 70%;
}
}
.topArea .txt01 .line01{
top: 52.5%;
transition: width 0.5s ease 1.9s;
}
.topArea .txt01 .line02{
top:93%;
transition: width 0.5s ease 2.1s;
}
.topArea.animation .txt01 .line{
width: 100%;
}
.topArea.animation .txt01 .line02{
width: 70%;
}
.topArea .txt02{
top: 40%;
left: calc(50% + 234px);
z-index: 10;
}
@media screen and (max-width:1120px){
.topArea .txt02{
left:auto;
right: 5%;
}
}
@media screen and (max-width:980px){
.topArea .txt02{
top: 20%;
right: 3%;
}
}
.topArea .txt02 .imgOuter{
z-index: 10;
top: 0;
left: 0;
}
.topArea .txt02 .imgOuter img{
width: 227px;
max-width: none;
}
@media screen and (max-width:767px){
.topArea .txt02 .imgOuter img{
width: 160px;
}
}
.topArea .imgOuter{
width: 0;
}
@media screen and (max-width:767px){
.topArea .imgOuter{
width: 100%;
}
}
.topArea.animation .imgOuter{
width: 100%;
}
.topArea .txt01 .imgOuter:first-child{
transition: width 1.5s ease 0.6s;
}
.topArea .txt01 .imgOuter:nth-child(2){
transition: width 1s ease 1.3s;
}
.topArea .txt01 .imgOuter:nth-child(3){
transition: width 1s ease 1.6s;
}
.topArea .txt02 .imgOuter:first-child{
transition: width 0.4s ease 2.1s;
}
.topArea .txt02 .imgOuter:nth-child(2){
transition: width 0.4s ease 2.3s;
}
.topArea .enttl {
top: 92%;
z-index: 100;
}
.topArea .enttl img{
width: 100%;
height: auto;
width: 90%;
margin: 0 auto;
max-width: 813px;
}
.topArea .jpttl {
top: 140%;
}
@media screen and (max-width:980px){
.topArea .jpttl {
top: 135%;
}
}
@media screen and (max-width:767px){
.topArea .jpttl {
top: 129%;
}
}
 /*---------------------------------------*/
/* prologueArea */
/*---------------------------------------*/
.prologueArea .circle01{
top: 50px;
left: -36px;
}
@media screen and (max-width:980px){
.prologueArea .circle01{
left: -10%;
}
}
@media screen and (max-width:767px){
.prologueArea .circle01{
left: -15%;
}
}

.prologueArea .circle02{
top: 240px;
right: 4px;
}
@media screen and (max-width:980px){
.prologueArea .circle02{
right: -10%;
}
}
@media screen and (max-width:767px){
.prologueArea .circle02{
right: -15%;
}
}

.prologueArea .illust01{
top: 100px;
left: 116px;
width: 88px;
}
@media screen and (max-width:980px){
.prologueArea .illust01{
left: 56px;
width: 78px;
}
}
.prologueArea .illust02{
top: 50px;
right: 73px;
width: 227px;
}
@media screen and (max-width:1120px){
.prologueArea .illust02{
right: 13px;
}
}
@media screen and (max-width:980px){
.prologueArea .illust02{
right: -4%;
width: 200px;
}
}
.prologueArea .note{
z-index: 10;
}
.prologueArea .illust01-s{
width: 90%;
max-width: 300px;
}
/*---------------------------------------*/
/* magagineArea */
/*---------------------------------------*/
.magagineAreaOuter {
background-color: #f4f4f4;
padding-top: 50px;
margin-top: 140px;
}
.magagineArea {
width: 90%;
margin: 0 auto;
position: relative;
max-width: 550px;
z-index: 10;
}
.magagineArea .authorityTtl .note {
display: inline;
}
.magagineArea .authorityTtl .img {
width: 11px;
height: 20px;
}
.magagineArea .authorityTtl .img01{
margin-right: 12px;
}
.magagineArea .authorityTtl .img02{
margin-left: 12px;
}
.magagineArea .authorityTxt {
margin-top: 20px;
margin-bottom: 30px;
line-height: 1.5;
align-items: center;
}
@media screen and (max-width:767px){
.magagineArea .authorityTxt p {
font-size: 1.8rem;
}
}
.magagineArea .authorityImg {
width: 100%;
width: 26px;
height: 62px;
}
/* リフォマガ */
.magagineAreaOuter.refomagaAreaOuter {
margin-top: 0px;
padding-bottom: 50px;
}
.magagineAreaOuter.refomagaAreaOuter .img {
transition: 0.3s ;
}
.magagineAreaOuter.refomagaAreaOuter .img:hover {
opacity: 0.8;
}

/*---------------------------------------*/
/* casestudyLinkArea */
/*---------------------------------------*/
.casestudyLinkArea .img {
transition: 0.3s ;
}
.casestudyLinkArea .img:hover {
opacity: 0.8;
}
@media only screen and (max-width:767px){
.casestudyLinkArea .img.sp{
max-width: 90%;
margin: 0 auto;
}
}

/*---------------------------------------*/
/* productArea */
/*---------------------------------------*/
.productArea{
padding-bottom: 200px;
position: relative;
}
@media only screen and (max-width:767px){
.productArea{
padding-bottom: 100px;
}
.productArea>.areaInner{
width: 80%;
}
}
.productArea:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 630px;
background: #f4f4f4;
}
.productArea .circle01{
top:25%;
left:-80px;
z-index: 9;
}
@media only screen and (max-width:767px){
.productArea .circle01{
top:5%;
left:-40px;
}
}
.productArea .circle02{
top: 30%;
right:-80px;
z-index: 9;
}
@media only screen and (max-width:767px){
.productArea .circle02{
top:15%;
right:-50px;
}
}
.productArea .circle03{
top: 65%;
left: -290px;
z-index: 9;
}
@media only screen and (max-width:767px){
.productArea .circle03{
top: 35%;
left: -90px;
}
}
.productArea .circle04{
top: 67%;
right: -140px;
z-index: 9;
}
@media only screen and (max-width:767px){
.productArea .circle04{
top: 55%;
right: -140px;
}
.productArea .circle05{
top: 75%;
left: -60px;
z-index: 9;
}
.productArea .circle06{
top: 97%;
right: -100px;
z-index: 9;
}
}
.productArea .circle07{
top: 90%;
left: -100px;
z-index: 9;
}
/*価格バナー*/
@media screen and (max-width:980px){
.priceBnArea {
display: block;
text-align: center;
}
.priceBn:first-child {
margin-bottom: 20px;
}
}
.productArea .productList{
max-width: 800px;
padding:40px;
border-radius: 20px;
z-index: 10;
}
@media screen and (max-width:980px){
.productArea .productList{
padding:40px 20px;
}
}
@media only screen and (max-width:767px){
.productArea .productList{
padding:20px;
}
}
.productArea .productList .item{
width: 31.25%;
margin-right: 3.125%;
align-items: flex-start;
}
@media screen and (max-width:767px){
.productArea .productList .item{
width: 100%;
margin-right: 0;
margin-bottom: 65px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
}
.productArea .productList .item:nth-child(3n){
margin-right: 0;
}
.productArea .productList .img{
border-radius: 10px;
border: 3px solid #f4f4f4;
transition: border-radius 0.3s ease,opacity 1s ease 0.3s,transform 1s ease 0.3s;
}
@media screen and (max-width:767px){
.productArea .productList .img{
width: 30%;
}
}
.productArea .productList a:hover .img{
border-radius: 50%;
}
@media screen and (max-width:767px){
.productArea .productList .txtArea{
width: 60%;
}
}

/*---------------------------------------*/
/* plannningArea */
/*---------------------------------------*/
.plannningArea{
padding-bottom: 150px;
}
@media screen and (max-width:767px){
.plannningArea{
padding-bottom: 90px;
}
}
.plannningArea .styleContent,
.plannningArea .environmentContent,
.plannningArea .tabContet{
max-width: 800px;
}
.plannningArea .styleContent .img{
width: 45%;
}
@media screen and (max-width:767px){
.plannningArea .styleContent .img{
width: 100%;
margin-bottom: 20px;
}
}
.plannningArea .styleContent .txtBox{
width: 50%;
}
@media screen and (max-width:767px){
.plannningArea .styleContent .txtBox{
width: 100%;
}
}
.plannningArea .environmentContent .environment{
width: 47%;
}
@media screen and (max-width:767px){
.plannningArea .environmentContent .environment{
width: 100%;
}
.plannningArea .environmentContent .environment:first-child{
margin-bottom: 40px;
}
}
@media screen and (max-width:767px){
.plannningArea .tabContet{
width: 100%;
}
.plannningArea .tabContet .naviOuter{
overflow-x: scroll;
}
.plannningArea .space01Content .navi{
width: 840px;
padding: 0 5% 10px;
}
.plannningArea .space02Content .navi{
width: 420px;
padding: 0 5% 10px;
}
}
.plannningArea .tabContet .tabBtn{
width: 19%;
margin-right: 1.25%;
height: 55px;
border-radius: 55px;
border: 1px solid #ed6d16;
box-sizing: border-box;
margin-bottom: 10px;
transition: all 0.6s ease;
}
@media screen and (max-width:767px){
.plannningArea .tabContet .tabBtn{
width: 100px;
margin-right: 5px;
height: 45px;
border-radius: 45px;
margin-bottom: 5px;
}
}
.plannningArea .tabContet .tabBtn.active,
.plannningArea .tabContet .tabBtn:hover{
background: #ed6d16;
}
.plannningArea .tabContet .tabBtn .txt{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
transition: all 0.6s ease;
}
@media screen and (max-width:767px){
.plannningArea .tabContet .tabBtn .txt{
font-size: 1.35rem;
}
}
.plannningArea .tabContet .tabBtn.active .txt,
.plannningArea .tabContet .tabBtn:hover .txt{
color: #fff;
}
.plannningArea .tabContet .tabBtn:nth-child(5n){
margin-right:0;
}
@media screen and (max-width:767px){
.plannningArea .tabContet .tabBtn:nth-child(5n){
margin-right:5px;
}
}
.plannningArea .tabContet .panel {
    display:none;
}
@media screen and (max-width:767px){
.plannningArea .tabContet .panel {
width: 90%;
margin: 0 auto;
}
}
.plannningArea .tabContet .panel.active {
    display:block;
}
.plannningArea .tabContet .panel  .img{
width: 50%;
}
.plannningArea .tabContet .panel  .txtBox{
width: 45%;
}
@media screen and (max-width:767px){
.plannningArea .tabContet .panel  .img{
width: 100%;
margin-bottom: 40px;
}
.plannningArea .tabContet .panel  .txtBox{
width: 100%;
}
}
/*---------------------------------------*/
/* qaArea */
/*---------------------------------------*/
.qaArea .qaContent{
max-width: 800px;
}
.qaArea .qaContent .iconQ{
width: calc(100% - 680px);
top: -5px;
}
@media screen and (max-width:980px){
.qaArea .qaContent .iconQ{
width: 80px;
}
}
@media screen and (max-width:767px){
.qaArea .qaContent .iconQ{
width:30px;
text-align: left;
top:0;
}
}
.qaArea .qaContent .contentIn{
width:680px;
}
@media screen and (max-width:980px){
.qaArea .qaContent .contentIn{
width: calc(100% - 80px);
}
}
@media screen and (max-width:767px){
.qaArea .qaContent .contentIn{
width: calc(100% - 30px);
}
}
/* もっと見るボタン */
.productArea .productList .moreBtn .btnIn{
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid #ed6d16;
transition: all 0.6s ease;
}
.productArea .productList .moreBtn .btnIn:hover{
background: #fff;
color: #ed6d16;
}
.productArea .productList .moreBtn .plus{
width: 15px;
height: 2px;
top: 14px;
margin-left: 20px;
background: #fff;
transition: background 0.6s ease;
}
@media screen and (max-width: 767px){
.productArea .productList .moreBtn .plus{
width: 12px;
top: 9px;
}
}
.productArea .productList .moreBtn .btnIn:hover .plus{
background: #ed6d16;
}
.productArea .productList .moreBtn .plus:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: rotate(90deg);
transition: background 0.6s ease,transform 0.3s ease;
}
.productArea .productList .moreBtn .btnIn:hover .plus:after{
background: #ed6d16;
}
.productArea .productList .moreBtn.open .plus:after{
transform: rotate(0);
}
/*---------------------------------------*/
/* storeArea */
/*---------------------------------------*/
.storeArea{
border-radius: 20px;
padding-bottom: 90px;
}
@media screen and (max-width:980px){
.storeArea{
padding-bottom: 60px;
}
}
@media screen and (max-width:767px){
.storeArea{
padding-bottom: 30px;
}
}
.storeArea .storeBlock{
max-width: 800px;
}
.storeArea .storeBlock .img{
width: 45%;
margin-right: 5%;
}
@media screen and (max-width:980px){
.storeArea .storeBlock .img{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
}
.storeArea .storeBlock .txtBox{
width: 50%;
}
@media screen and (max-width:980px){
.storeArea .storeBlock .txtBox{
width: 100%;
}
}
.storeArea .storeBlock .txtBox .mapLink .icon{
width: 9px;
margin: 0 5px 0 15px;
}
.storeArea  .linkBtn a{
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid #fff;
}
.storeArea  .linkBtn a:hover{
background: #ed6d16;
}
.storeArea  a .arrow{
top: 50%;
right: 30px;
width: 10px;
height: 10px;
border-top: 2px solid #ed6d16;
border-right: 2px solid #ed6d16;
transform: translate(0,-50%) rotate(45deg);
transition: background 0.6s ease;
}
@media screen and (max-width:767px){
.storeArea  .linkBtn a .arrow{
right: 15px;
}
}
.storeArea  .linkBtn a:hover .arrow{
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
/*---------------------------------------*/
/* blogArea */
/*---------------------------------------*/
.blogArea{
padding-bottom: 100px;
}
@media screen and (max-width:767px){
.blogArea{
padding-bottom: 70px;
}
}
.blogArea .blogList{
width: 48.5%;
margin-right: 3%;
}
@media screen and (max-width:980px){
.blogArea .blogList{
width:100%;
margin-right:0;
}
}
.blogArea .blogList:nth-child(2n){
margin-right: 0;
}
.blogArea .blogList .img{
width: 43%;
margin-right: 4%;
border-radius: 5px;
padding-top: 28.666%;
height: 0;
position: relative;
}
@media screen and (max-width:980px){
.blogArea .blogList .img{
width:35%;
padding-top: 23.333333%;
}
}
@media screen and (max-width:767px){
.blogArea .blogList .img{
margin-right: 2.5%;
}
}
.blogArea .blogList .img img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.blogArea .blogList .img a:hover{
opacity: 0.7;
}
.blogArea .blogList .txtBox{
width: 53%;
}
@media screen and (max-width:980px){
.blogArea .blogList .txtBox{
width:61%;
}
}
@media screen and (max-width:767px){
.blogArea .blogList .txtBox{
width:62.5%;
}
}
.blogArea .blogList .txtBox .note{
height: 3.6em;
}
@media screen and (max-width:767px){
.blogArea .blogList .txtBox .note{
height: 3em;
line-height: 1.5;
margin-bottom: 10px;
}
}
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
.contactOuter{
background: url("../images/bg-stripe.gif") top left;
background-size:80px 80px;
padding: 220px 0 160px;
}
@media screen and (max-width:767px){
.contactOuter{
background-size:50px 50px;
padding: 100px 0;
}
}
.contactArea{
border-radius:20px;
}
.contactArea .form{
max-width: 800px;
padding-bottom: 90px;
}
@media screen and (max-width:767px){
.contactArea .form{
padding-bottom: 60px;
}
}