@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
.pageBlock{
margin-top: 100px;
}
@media screen and (max-width:767px){
.pageBlock{
margin-top: 70px;
}
}
.btn a{
width: 100%;
max-width: 375px;
height: 72px;
line-height: 72px;
border: 1px solid #ED6D16;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
.btn a{
height:55px;
line-height:55px;
}
}
.btn a:hover{
background: #fff;
}
/*model*/
.model .keyVisual{
max-width: 1050px;
margin-top: 40px;
}
@media screen and (max-width:1120px){
.model .keyVisual{
margin-right: 5%;
}
}
@media screen and (max-width:980px){
.model .keyVisual{
margin-right: 0%;
}
}
@media screen and (max-width:767px){
.model .keyVisual{
margin-top: 40px;
margin-bottom: calc(100px + 15vw)
}
}
.model .keyVisual .circle01{
top: 120px;
right: calc(50% + 250px);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.model .keyVisual .circle01{
right: calc(50% + 150px);
}
}
@media screen and (max-width:767px){
.model .keyVisual .circle01{
top: 70px;
right:auto;
left: -30px;
}
}
.model .keyVisual.animation  .circle01{
opacity: 1;
}
.model .keyVisual .circle01 .pallaIn{
transform: matrix(1, 0, 0, 1, 0, -121.366);
}
.model .keyVisual .circle02{
top: 170px;
right: 0;
transform: translate(25%,0);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.model .keyVisual .circle02{
top: 230px;
left: calc(50% + 100px);
}
}
@media screen and (max-width:767px){
.model .keyVisual .circle02{
left: auto;
right:-15px;
}
}
.model .keyVisual.animation  .circle02{
opacity: 1;
}
.model .keyVisual .circle02 .pallaIn{
transform: matrix(1, 0, 0, 1, 0, 86.0283);
}
.model .keyVisual .img{
width: 77%;
margin-left: 19%;
}
@media screen and (max-width:980px){
.model .keyVisual .img{
width: 91%;
margin-left: 7%;
}
}
.model .keyVisual .txt01{
top:10%;
left: 0;
z-index: 10;
}
@media screen and (max-width:1120px){
.model .keyVisual .txt01{
left:2%;
right: auto;
}
}
@media screen and (max-width:980px){
.model .keyVisual .txt01{
position: relative;
display: inline-block;
transform: translate(0, -50%);
}
}
.model .keyVisual .txt01 .imgOuter{
z-index: 10;
top: 0;
left: 0;
}
.model .keyVisual .txt01 .imgOuter img{
width: 458px;
max-width: none;
}
@media screen and (max-width:980px){
.model .keyVisual .txt01 .imgOuter img{
width: 366px;
}
}
@media screen and (max-width:767px){
.model .keyVisual .txt01 .imgOuter img{
width: 229px;
}
}
.model .keyVisual .txt01 .line{
left: 0;
width:0;
background: #fff;
}
.model .keyVisual .txt01 .line01{
top: 0;
height: 49px;
transition: width 0.5s ease 2.9s;
}
@media screen and (max-width:980px){
.model .keyVisual .txt01 .line01{
height: 39px;
}
}
@media screen and (max-width:767px){
.model .keyVisual .txt01 .line01{
height: 24px;
}
}
.model .keyVisual.animation .txt01 .line01{
width: 37.4323%;
}
.model .keyVisual .txt01 .line02{
top: 68px;
height: 87px;
transition: width 0.5s ease 1.2s;
}
@media screen and (max-width:980px){
.model .keyVisual .txt01 .line02{
top: 54px;
height: 70px;
}
}
@media screen and (max-width:767px){
.model .keyVisual .txt01 .line02{
top: 34px;
height: 44px;
}
}
.model .keyVisual.animation .txt01 .line02{
width: 100%;
}
.model .keyVisual .txt01 .line03{
top:160px;
height: 87px;
transition: width 0.5s ease 1.4s;
}
@media screen and (max-width:980px){
.model .keyVisual .txt01 .line03{
top:128px;
height: 70px;
}
}
@media screen and (max-width:767px){
.model .keyVisual .txt01 .line03{
top: 80px;
height: 44px;
}
}
.model .keyVisual.animation .txt01 .line03{
width: 64.192%;
}
.model .keyVisual .txt01 .line04{
bottom:0;
height: 87px;
transition: width 0.5s ease 1.6s;
}
@media screen and (max-width:980px){
.model .keyVisual .txt01 .line04{
height: 70px;
}
}
@media screen and (max-width:767px){
.model .keyVisual .txt01 .line04{
height: 44px;
}
}
.model .keyVisual.animation .txt01 .line04{
width: 76.419%;
}
.model .keyVisual .imgOuter{
width: 0;
}
.model .keyVisual.animation .imgOuter{
width: 100%;
}
.model .keyVisual .txt01 .imgOuter:first-child{
transition: width 1.5s ease 2.3s;
}
.model .keyVisual .txt01 .imgOuter:nth-child(2){
transition: width 1s ease 0.5s;
}
.model .keyVisual .txt01 .imgOuter:nth-child(3){
transition: width 1s ease 0.7s;
}
.model .keyVisual .txt01 .imgOuter:nth-child(4){
transition: width 1s ease 0.9s;
}
.model .keyVisual .img01{
width: 19.047%;
bottom: 8%;
right: -1.5%;
}
@media screen and (max-width:980px){
.model .keyVisual .img01{
bottom:10%;
right: 14.5%;
width: 24.047%;
}
}
@media screen and (max-width:767px){
.model .keyVisual .img01{
bottom:1%;
right: 1.5%;
    width: 35.047%;
}
}
.model .keyVisual .img02{
width: 21.619%;
bottom:-5%;
right: 10.9%;
}
@media screen and (max-width:980px){
.model .keyVisual .img02{
bottom:0%;
right: 31.9%;
width: 26.619%;
}
}
@media screen and (max-width:767px){
.model .keyVisual .img02{
bottom: -15%;
    right: 20.9%;
    width: 45.619%;
}
}
.model .keyVisual .img03{
width: 17.23%;
bottom: 52%;
right: -5.5%;
}
@media screen and (max-width:980px){
.model .keyVisual .img03{
bottom: 33%;
right: 8.5%;
width: 22.23%;
}
}
@media screen and (max-width:767px){
.model .keyVisual .img03{
bottom: 30%;
right: 1.5%;
    width: 29.23%;
}
}
.movieArea{
max-width: 800px;
}
.movieArea .txtOuter{
height: 34px;
}
.movieArea .ttl02 .txtOuter{
height: 37px;
}
@media only screen and (max-width:767px){
.movieArea .txtOuter{
height: 20px;
}
.movieArea .ttl02 .txtOuter{
height: 25px;
}
}
.movieArea .icon-movie{
font-size: 34px !important;
}
@media only screen and (max-width:767px){
.movieArea .icon-movie{
font-size: 20px !important;
}
}
.movieArea .icon-gallery{
font-size: 37px !important;
}
@media only screen and (max-width:767px){
.movieArea .icon-gallery{
font-size: 25px !important;
}
}
.movieArea .navi{
margin-right: 3em;
text-decoration: underline;
transition: all 0.6s ease;
margin-bottom: 3px;
}
@media only screen and (max-width:767px){
.movieArea .navi{
margin-right: 1.5em;
font-size: 1.3rem;
}
}
.movieArea .navi:hover{
color: #ed6d16;
text-decoration: none;
}

.movieArea .img .play-button {
width: 65px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.movieArea .img .play-button {
width: 50px;
}
}
.movieArea .img .play-button .icon.on{
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
}
.movieArea .img .link:hover .play-button .icon.on{
opacity: 1;
}
.movieArea .img .play-button .icon.off{
transition: all 0.3s ease;
}
.movieArea .img .link:hover .play-button .icon.off{
opacity: 0;
}
/*動画ポップアップ*/
.mfp-content{
width: 90%;
max-width: 800px;
}
.movie-wrap{
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.movie-wrap iframe{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgb(0 0 0 / 60%);
background: #000;
}
.galleryArea .txtOuter{
height: 34px;
}
.galleryArea .ttl02 .txtOuter{
height: 37px;
}
@media only screen and (max-width:767px){
.galleryArea .txtOuter{
height: 20px;
}
.galleryArea .ttl02 .txtOuter{
height: 25px;
}
}
.galleryArea .icon-photo{
font-size: 34px !important;
}
@media only screen and (max-width:767px){
.galleryArea .icon-photo{
font-size: 20px !important;
}
}
.galleryArea .icon-gallery{
font-size: 37px !important;
}
@media only screen and (max-width:767px){
.galleryArea .icon-gallery{
font-size: 25px !important;
}
}
.galleryArea .circle01{
top:0%;
left:-80px;
}
@media only screen and (max-width:767px){
.galleryArea .circle01{
top:5%;
left:-40px;
}
}
.galleryArea .circle02{
top: 3%;
right:-80px;
}
@media only screen and (max-width:767px){
.galleryArea .circle02{
top:15%;
right:-50px;
}
}
.galleryArea .circle03{
top:13%;
left: -290px;
}
@media only screen and (max-width:767px){
.galleryArea .circle03{
top: 35%;
left: -90px;
}
}
.galleryArea .circle04{
top: 47%;
right: -140px;
}
@media only screen and (max-width:767px){
.galleryArea .circle04{
top: 55%;
right: -140px;
}
.galleryArea .circle05{
top: 75%;
left: -60px;
}
.galleryArea .circle06{
top: 37%;
right: -100px;
}
}
.galleryArea .circle07{
top: 90%;
left: -100px;
}
/* galleryArea */
@media only screen and (max-width:767px){
.gallerySlide .mainWrap{
margin-bottom: 20px;
}
}
.gallerySlide .mainWrap .bx-prev .icon-arrow{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-20%,-50%);
background: url("../images/model/arrow-prev.svg") center no-repeat;
background-size: contain;
}
@media only screen and (max-width:767px){
.gallerySlide .mainWrap .bx-prev .icon-arrow{
width: 30px;
height: 30px;
}
}
.gallerySlide .mainWrap .bx-next .icon-arrow{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translate(20%,-50%);
background: url("../images/model/arrow-next.svg") center no-repeat;
background-size: contain;
}
@media only screen and (max-width:767px){
.gallerySlide .mainWrap .bx-next .icon-arrow{
width: 30px;
height: 30px;
}
}
@media only screen and (max-width:767px){
.gallerySlide .controlWrap{
width: 100%;
}
}
.gallerySlide .controlWrap li{
width: 7.5%;
margin-right: 2.777777%;
float: left;
margin-bottom: 20px;
}
@media only screen and (max-width:767px){
.gallerySlide .controlWrap li{
width: 9%;
margin-right: 1.111111%;
margin-bottom: 10px;
}
}
.gallerySlide .controlWrap li:nth-child(10n){
margin-right: 0;
}
.galleryArea .zumen .imgBox{
width: 52.5%;
}
.galleryArea .zumen .txtBox{
width: 37.5%;
}
@media screen and (max-width:767px){
.galleryArea .zumen .imgBox{
width: 80%;
margin: 0 10% 30px;
}
}
@media screen and (max-width:980px){
.galleryArea .zumen .txtBox{
display: flex;
width: 100%;
}
.galleryArea .zumen .txtBox .nameBox{
width: 50%;
}
.galleryArea .zumen .txtBox .movieBox{
width: 50%;
}
}
@media screen and (max-width:767px){
.galleryArea .zumen .txtBox{
display: block;
}
.galleryArea .zumen .txtBox .nameBox{
width: 100%;
}
.galleryArea .zumen .txtBox .movieBox{
width: 100%;
}
}
.galleryArea .zumen .logo {
max-width: 200px;
}
@media screen and (max-width:767px){
.galleryArea .zumen .logo {
max-width: 100px;
}
}
.galleryArea .zumen .logo:hover {
opacity: 0.8;
transition: ease 0.6s ease;
}

/* birdeyeviewArea */
.birdeyeviewArea .birdeyeviewContents{
max-width: 960px;
margin: 0 auto;
}
.birdeyeviewArea .floor-1f img{
width: 100%;
margin: 0 auto;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f img,
.birdeyeviewArea .floor-2f img{
width: 160%;
max-width: 160%;
margin-left: -30%;
}
}
.birdeyeviewArea .birdeyeviewContents{
z-index: 10;
}

/* 1ｆ */
/* 玄関足洗い */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon01 a{
top:6.5079365079365%;right:23.8125%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon01 a{
top:6.5079365079365%;right:23.8125%;width:28%;
}
}
/* キャットステップ */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon02 a{
top:23.5%;right:8.2291666666667%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon02 a{
top:20.5%;right:8.2291666666667%;width:28%;
}
}
/* ひのきチップ */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon03 a{
top:56.070661%;right:0%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon03 a{
top:46.070661%;right:4%;width:28%;
}
}
/* ウッドデッキ+外水栓 */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon04 a{
top:83%;left:68%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon04 a{
top:79%;left:68%;width:28%;
}
}
/* Bonito */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon05 a{
top:13.1746031746032%;left:4.0625%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon05 a{
top:14.1746031746032%;left:4.0625%;width:28%;
}
}
/* ドッグスペース */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon06 a{
top:34.333333333333333333%;left:0%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon06 a{
top:35.333333333333333333%;left:6%;width:28%;
}
}
/* ドッグフェンス */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon07 a{
top:59%;left:3.08333333333333333%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon07 a{
top:65%;left:4.08333333333333333%;width:28%;
}
}
/* ワンラブフロア */
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon08 a{
top:74.5%;left:8.39583333333333%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-1f .birdeyeviewContents .popIcon08 a{
top:77.5%;left:11.395833%;width:28%;
}
}
/* ペットドア */
.birdeyeviewArea .birdeyeviewContents .popIcon09 a{
bottom: 0;left:23.2291666666667%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .birdeyeviewContents .popIcon09 a{
bottom: -8px;left:23.38.229167%;width:28%;
}
}

/* 2ｆ */
/* ペットトンネル */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon01 a{
top:0%;left:70.8333333333333%;width:22.91666666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon01 a{
top:12%;left:54.8333333333333%;width:28%;
}
}
/* ニャンネル */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon02 a{
top:15.2073732718894%;left:74.2708333333333%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon02 a{
top:0%;left:62.2708333333333%;width:28%;
}
}
/* キャットステップ */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon03 a{
top:34.7941628264209%;right:0%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon03 a{
top:42.7941628264209%;right:4%;width:28%;
}
}
/* 無添加漆喰 */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon04 a{
top:64.5975422427035%;right:0%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon04 a{
top:66.5975422427035%;right:5%;width:28%;
}
}
/* ウォークインクローゼット */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon05 a{
top:22.695833%;left:0%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon05 a{
top:12.695833%;left:5%;width:28%;
}
}
/* テレワークスペース */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon06 a{
top:45.893241%;left:1.25%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon06 a{
top:54.893241%;left:5%;width:28%;
}
}
/* バルコニー */
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon07 a{
top:85.0276497695853%;left:11.5625%;width:22.9166666666667%;
}
@media screen and (max-width:767px){
.birdeyeviewArea .floor-2f .birdeyeviewContents .popIcon07 a{
top:75.0276497695853%;left:11.5625%;width:28%;
}
}
/* ＋アイコン */
.birdeyeviewArea .popIcon a .plusIcon{
width: 20px;
height: 20px;
line-height: 15px;
top: 50%;
right: 6%;
transform: translate(0%,-50%);
transition: all 0.6s ease;
}
@media screen and (max-width:767px){
.birdeyeviewArea .popIcon  a .plusIcon{
width: 18px;
height: 18px;
line-height: 15px;
font-size: 15px;
right: -20%;
}
}

.birdeyeviewArea .popIcon a:hover .plusIcon{
background: #fff;
}
.birdeyeviewArea .birdeyeviewContents .popIcon a .plusIcon{
border: 1px solid #ed6d16;
}
.birdeyeviewArea .birdeyeviewContents .popIcon a:hover .plusIcon{
color: #ed6d16;
}
.remodal{
max-width: 580px ;
}
.remodal02{
max-width: 980px ;
box-sizing: border-box;
}
.fancybox-content{
padding: 44px 44px 44px;
overflow: visible ;
}
.remodal02.txt.fancybox-content{
padding:100px;
}
@media screen and (max-width:767px){
.fancybox-content{
padding: 10px;
}
.remodal02.txt.fancybox-content{
padding:50px 15px;
}
}
.fancybox-slide--html .fancybox-close-small{
position: absolute;
top: -40px;
right: 0;
padding: 0;
}
.fancybox-button svg path{
color: #fff;
}
.fancybox-navigation .fancybox-button--arrow_left{
left: 10%;
background:#fff;
height: 70px;
opacity: 1 !important;
}
@media screen and (max-width:767px){
.fancybox-navigation .fancybox-button--arrow_left{
left: 0;
width: 20px;
height: 20px;
background:#333;
}
}
.fancybox-navigation .fancybox-button--arrow_left:disabled{
opacity: 0.3!important;
}
.fancybox-navigation .fancybox-button--arrow_right{
right: 10%;
background:#fff;
height: 70px;
opacity: 1 !important;
}
@media screen and (max-width:767px){
.fancybox-navigation .fancybox-button--arrow_right{
right: 0;
width: 20px;
height: 20px;
background:#333;
}
}
.fancybox-navigation .fancybox-button--arrow_right:disabled{
opacity: 0.3 !important;
}
.fancybox-navigation .fancybox-button--arrow_left svg,
.fancybox-navigation .fancybox-button--arrow_right svg{
display: none;
}
.fancybox-navigation .fancybox-button--arrow_left div{
position: absolute;
top:50%;
left: 45%;
width: 15px;
height: 15px;
padding: 0;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(45deg) translate(-50%,-50%);
transform-origin: center;
}
@media screen and (max-width:767px){
.fancybox-navigation .fancybox-button--arrow_left div{
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
}
}
.fancybox-navigation .fancybox-button--arrow_right div{
position: absolute;
top:50%;
right: 45%;
width: 15px;
height: 15px;
padding: 0;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg) translate(-50%,-50%);
transform-origin: center;
}
@media screen and (max-width:767px){
.fancybox-navigation .fancybox-button--arrow_right div{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
}

/*lineコンテンツ*/
.lineContent{
background: #00b900;
padding:50px 0;
}
@media only screen and (max-width:767px){
.lineContent{
padding:30px 0;
}
.lineContent .txt {
font-size: 12pt;
}
}
.lineContent .mark{
width: 34.5%;
box-sizing: border-box;
padding: 0 5%;
}
@media only screen and (max-width:767px){
.lineContent .mark{
width: 100%;
margin-bottom: 20px;
}
}
.lineContent .mark img{
max-width: 135px;
}
@media only screen and (max-width:767px){
.lineContent .mark img{
max-width:70px;
}
}
.lineContent .txtBox{
width: 65.5%;
box-sizing: border-box;
padding-right: 5%;
}
@media only screen and (max-width:767px){
.lineContent .txtBox{
width: 100%;
padding: 0 5%;
text-align: center;
}
}
.lineContent .txtBox .btn.short.lineBtn .btnIn{
border: 2px solid #fff;
}
.lineContent .txtBox .btn.short.lineBtn .btnIn:hover{
border: 2px solid #fff;
}
.lineContent .btn a {
width: auto;
}
.lineContent .btn.short.lineBtn .btnIn {
border: 2px solid #00b900;
color: #00b900;
line-height: 36px;
}
.lineContent .btn.short .btnIn {
height: 40px;
}
.lineContent .btn .btnIn {
height: 55px;
line-height: 53px;
border-radius: 30px;
padding: 0 40px;
box-sizing: border-box;
top: 0;
border: 1px solid #000;
}
.lineContent .btn.short.lineBtn .btnIn{
border: 2px solid #00b900;
color: #00b900;
line-height: 36px;
}
.pcContent .btn.short.lineBtn .btnIn:hover{
color: #fff;
background:  #00b900;
}
.lineContent .lineIcon {
margin-right: 10px;
top: 3px;
}
@media screen and (max-width:767px){
.lineContent .lineIcon {
top: 0px;
}
}
.showroomArea{
border-radius: 20px;
padding-bottom: 90px;
}
@media screen and (max-width:980px){
.showroomArea{
padding-bottom: 60px;
}
}
@media screen and (max-width:767px){
.showroomArea{
padding-bottom: 30px;
}
}
.showroomArea .icon-showroom{
font-size: 56px;
}
.showroomArea .storeBlock .img{
width: 45%;
margin-right: 5%;
}
@media screen and (max-width:980px){
.showroomArea .storeBlock .img{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
}
.showroomArea .storeBlock .txtBox{
width: 50%;
}
@media screen and (max-width:980px){
.showroomArea .storeBlock .txtBox{
width: 100%;
}
}
.showroomArea .txtBox .mapLink .icon{
width: 9px;
margin: 0 5px 0 15px;
}
.showroomArea .information .linkBox{
width: 32.5%;
margin-right: 1.25%;
}
@media screen and (max-width:767px){
.showroomArea .information .linkBox{
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
}
.showroomArea .information .linkBox:last-child{
margin-right: 0;
}
.showroomArea .information .linkBox a{
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid #ed6d16;
background: #ed6d16;
border-radius: 10px;
}
@media screen and (max-width:980px){
.showroomArea .information .linkBox a{
    padding: 20px 10px;
}
}
.showroomArea .information .linkBox a:hover{
background: #fff;
}
.showroomArea .information .linkBox a .plus{
width: 13px;
height: 13px;
}
.showroomArea .information .linkBox a .plus:before,
.showroomArea .information .linkBox a .plus:after{
content: "";
position: absolute;
top: 50%;
left:0;
width: 100%;
height: 2px;
transform: translate(0,-50%);
background: #fff;
transition: background 0.6s ease;
}
.showroomArea .information .linkBox a:hover .plus:before,
.showroomArea .information .linkBox a:hover .plus:after{
background: #ed6d16;
}
.showroomArea .information .linkBox a .plus:after{
transform: translate(0,-50%) rotate(90deg);
}
.showroomArea .information .linkBtn a{
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid #ed6d16;
}
.showroomArea .information .linkBtn a:hover{
background: #fff;
}
.showroomArea .information .linkBtn a .arrow{
top: 50%;
right: 30px;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translate(0,-50%) rotate(45deg);
transition: background 0.6s ease;
}
@media screen and (max-width:767px){
.showroomArea .information .linkBtn a .arrow{
right: 15px;
}
}
.showroomArea .information .linkBtn a:hover .arrow{
border-top: 2px solid #ed6d16;
border-right: 2px solid #ed6d16;
}
.model .contactOuter{
padding: 420px 0 160px;
margin-top: -220px;
}
@media screen and (max-width:767px){
.model .contactOuter{
background-size:50px 50px;
padding: 320px 0 100px;
}
}
.model .contactOuter .telBox .icon{
width: 18px;
top: -8px;
margin-right: 20px;
}
@media screen and (max-width:767px){
.model .contactOuter .telBox .icon{
margin-right: 10px;
}
}
.model .contactOuter .telBox .num{
font-size: 3.5rem;
}
.model .contactOuter .telBox .telinfo{
margin-left:38px;
}
.contactOuter .telBox .icon{
width: 18px;
top: -8px;
margin-right: 20px;
}
@media screen and (max-width:767px){
.contactOuter .telBox .icon{
margin-right: 10px;
}
}
.contactOuter .telBox .num{
font-size: 3.5rem;
}
.contactOuter .telBox .telinfo{
margin-left:38px;
}
/*---------------------------------------*/
/* casestudylist */
/*---------------------------------------*/
.casestudylistOuter {
z-index: 100;
}
.casestudylist:last-child {
margin-bottom: 150px;
}
@media screen and (max-width:767px){
.casestudylist .listBox {
display: block;
}
}
.casestudylist .info {
margin-left: 10px;
}
.casestudylist .listimgBox {
width: 50%;
}
@media screen and (max-width:767px){
.casestudylist .listimgBox {
width: 100%;
}
}
.casestudylist .listinfoBox {
width: 43.8%;
}
@media screen and (max-width:767px){
.casestudylist .listinfoBox {
width: 100%;
}
}
@media screen and (max-width:767px){
.casestudylist .listinfoBox .noteBox{
margin-top: 30px;
}
}
.casestudylist .infoBox .infoTxt{
padding-bottom: 18px;
margin: 0 0 18px;
border-bottom: 1px solid #d8d8d8;
max-width: 330px;
}
.casestudylist .infoBox .infoTxt:last-child{
margin: 0;
}
@media screen and (max-width:767px){
.casestudylist .infoBox .infoTxt,
.casestudylist .infoBox .infoTxt:last-child{
margin: 0 auto 18px;
}
}
.casestudylist .infoBox .ttl{
width: 120px;
}
.casestudylist .infoBox .note{
width: calc(100%-120px);
}
.casestudylist .link  {
transition: 0.3s;
}
.casestudylist .link:hover {
opacity: 0.8;
}
/*---------------------------------------*/
/* casestudy */
/*---------------------------------------*/
.casestudy .keyVisual{
max-width: 1050px;
margin-top: 40px;
}
@media screen and (max-width:1120px){
.casestudy .keyVisual{
margin-right: 5%;
}
}
@media screen and (max-width:980px){
.casestudy .keyVisual{
margin-right: 0%;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual{
margin-bottom: calc(100px + 15vw)
}
}
.casestudy .keyVisual.animation .txt01 .line01{
width: 44.4323%;
}	
.casestudy .keyVisual.animation .txt01 .line03{
width: 55.192%;
}
.casestudy .keyVisual .circle01{
top: 120px;
right: calc(50% + 250px);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .circle01{
right: calc(50% + 150px);
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .circle01{
top: 70px;
right:auto;
left: -30px;
}
}
.casestudy .keyVisual.animation  .circle01{
opacity: 1;
}
.casestudy .keyVisual .circle01 .pallaIn{
transform: matrix(1, 0, 0, 1, 0, -121.366);
}
.casestudy .keyVisual .circle02{
top: 170px;
right: 0;
transform: translate(25%,0);
opacity: 0;
transition: opacity 0.6s ease;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .circle02{
top: 230px;
left: calc(50% + 100px);
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .circle02{
left: auto;
right:-15px;
}
}
.casestudy .keyVisual.animation  .circle02{
opacity: 1;
}
.casestudy .keyVisual .circle02 .pallaIn{
transform: matrix(1, 0, 0, 1, 0, 86.0283);
}
.casestudy .keyVisual .img{
width: 77%;
margin-left: 19%;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .img{
width: 91%;
margin-left: 7%;
}
}
.casestudy .keyVisual .txt01{
top:10%;
left: 0;
z-index: 10;
}
@media screen and (max-width:1120px){
.casestudy .keyVisual .txt01{
left:2%;
right: auto;
}
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01{
position: relative;
display: inline-block;
transform: translate(0, -50%);
}
}
.casestudy .keyVisual .txt01 .imgOuter{
z-index: 10;
top: 0;
left: 0;
}
.casestudy .keyVisual .txt01 .imgOuter img{
width: 458px;
max-width: none;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01 .imgOuter img{
width: 366px;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .txt01 .imgOuter img{
width: 229px;
}
}
.casestudy .keyVisual .txt01 .line{
left: 0;
width:0;
background: #fff;
}
.casestudy .keyVisual .txt01 .line01{
top: 0;
height: 49px;
transition: width 0.5s ease 2.9s;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01 .line01{
height: 39px;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .txt01 .line01{
height: 24px;
}
}
.casestudy .keyVisual.animation .txt01 .line01{
width: 44.4323%;
}
.casestudy .keyVisual .txt01 .line02{
top: 68px;
height: 87px;
transition: width 0.5s ease 1.2s;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01 .line02{
top: 54px;
height: 70px;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .txt01 .line02{
top: 34px;
height: 44px;
}
}
.casestudy .keyVisual.animation .txt01 .line02{
width: 100%;
}
.casestudy .keyVisual .txt01 .line03{
top:160px;
height: 87px;
transition: width 0.5s ease 1.4s;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01 .line03{
top:128px;
height: 70px;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .txt01 .line03{
top: 80px;
height: 44px;
}
}
.casestudy .keyVisual.animation .txt01 .line03{
width: 55.192%;
}
.casestudy .keyVisual .txt01 .line04{
bottom:0;
height: 87px;
transition: width 0.5s ease 1.6s;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .txt01 .line04{
height: 70px;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .txt01 .line04{
height: 44px;
}
}
.casestudy .keyVisual.animation .txt01 .line04{
width: 76.419%;
}
.casestudy .keyVisual .imgOuter{
width: 0;
}
.casestudy .keyVisual.animation .imgOuter{
width: 100%;
}
.casestudy .keyVisual .txt01 .imgOuter:first-child{
transition: width 1.5s ease 2.3s;
}
.casestudy .keyVisual .txt01 .imgOuter:nth-child(2){
transition: width 1s ease 0.5s;
}
.casestudy .keyVisual .txt01 .imgOuter:nth-child(3){
transition: width 1s ease 0.7s;
}
.casestudy .keyVisual .txt01 .imgOuter:nth-child(4){
transition: width 1s ease 0.9s;
}
.casestudy .keyVisual .img01{
width: 19.047%;
bottom: 8%;
right: -1.5%;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .img01{
bottom:10%;
right: 14.5%;
width: 24.047%;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .img01{
bottom:1%;
right: 1.5%;
width: 35.047%;
}
}
.casestudy .keyVisual .img02{
width: 21.619%;
bottom:-5%;
right: 10.9%;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .img02{
bottom:0%;
right: 31.9%;
width: 26.619%;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .img02{
bottom: -15%;
right: 20.9%;
width: 45.619%;
}
}
.casestudy .keyVisual .img03{
width: 17.23%;
bottom: 52%;
right: -5.5%;
}
@media screen and (max-width:980px){
.casestudy .keyVisual .img03{
bottom: 33%;
right: 8.5%;
width: 22.23%;
}
}
@media screen and (max-width:767px){
.casestudy .keyVisual .img03{
bottom: 30%;
right: 1.5%;
width: 29.23%;
}
}
.casestudy .movieAreaOuter {
padding-bottom: 150px;
}
.casestudy .movieAreaOuter .txtOuter{
height: 34px;
}
.casestudy .movieAreaOuter .ttl02 .txtOuter{
height: 37px;
}
@media only screen and (max-width:767px){
.casestudy .movieAreaOuter .txtOuter{
height: 20px;
}
.casestudy .movieAreaOuter .ttl02 .txtOuter{
height: 25px;
}
}
.casestudy .movieAreaOuter .icon-movie{
font-size: 34px !important;
}
@media only screen and (max-width:767px){
.casestudy .movieAreaOuter .icon-movie{
font-size: 20px !important;
}
}
.casestudy .movieAreaOuter .icon-gallery{
font-size: 37px !important;
}
@media only screen and (max-width:767px){
.casestudy .movieAreaOuter .icon-gallery{
font-size: 25px !important;
}
}
.casestudy .movieAreaOuter .navi{
margin-right: 3em;
text-decoration: underline;
transition: all 0.6s ease;
margin-bottom: 3px;
}
@media only screen and (max-width:767px){
.casestudy .movieAreaOuter .navi{
margin-right: 1.5em;
font-size: 1.3rem;
}
}
.casestudy .movieAreaOuter .navi:hover{
color: #ed6d16;
text-decoration: none;
}

.casestudy .movieAreaOuter .img .play-button {
width: 65px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.casestudy .movieAreaOuter .img .play-button {
width: 50px;
}
}
.casestudy .movieAreaOuter .img .play-button .icon.on{
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
}
.casestudy .movieAreaOuter .img .link:hover .play-button .icon.on{
opacity: 1;
}
.casestudy .movieAreaOuter .img .play-button .icon.off{
transition: all 0.3s ease;
}
.casestudy .movieAreaOuter .img .link:hover .play-button .icon.off{
opacity: 0;
}
/*動画ポップアップ*/
.mfp-content{
width: 90%;
max-width: 800px;
}
.movie-wrap{
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.movie-wrap iframe{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgb(0 0 0 / 60%);
background: #000;
}
.casestudy .movieAreaOuter {
border-radius: 20px 20px 0 0;
z-index: 10;
}
.casestudy .galleryArea .txtOuter{
height: 34px;
}
.casestudy .galleryArea {
border-radius: 0 0 20px 20px;
z-index: 10;
}
.casestudy .galleryArea .ttl02 .txtOuter{
height: 37px;
}
@media only screen and (max-width:767px){
.casestudy .galleryArea .txtOuter{
height: 20px;
}
.casestudy .galleryArea .ttl02 .txtOuter{
height: 25px;
}
}
/*
.casestudy .galleryArea .ttlBox .ttl{
margin-top: -4px;
}
*/
.casestudy .galleryCircleArea {
z-index: 1;
}
.casestudy .galleryCircleArea .circle01{
top:235px;
left:-140px;
z-index: 0;
}
@media only screen and (max-width:767px){
.casestudy .galleryCircleArea .circle01{
top:270px;
left:-40px;
}
}
.casestudy .galleryCircleArea .circle02{
top: 130px;
right:-100px;
z-index: 0;
}
@media only screen and (max-width:767px){
.casestudy .galleryCircleArea .circle02{
top:60px;
right:-40px;
}
}
.casestudy .galleryCircleArea .circle03{
top:840px;
left: -273px;
}
@media only screen and (max-width:767px){
.casestudy .galleryCircleArea .circle03{
top: 530px;
left: -50px;
}
}
.casestudy .galleryCircleArea .circle04{
top: 980px;
right: -160px;
}
@media only screen and (max-width:767px){
.casestudy .galleryCircleArea .circle04{
top: 440px;
right: -110px;
}
.casestudy .galleryCircleArea .circle05{
top: 1160px;
left: -110px;
}
.casestudy .galleryCircleArea .circle06{
top: 770px;
right: -70px;
}
}
/* galleryArea */
.casestudy .gallerySlideArea .mainWrap {
margin-bottom: 150px;
}
@media screen and (max-width:980px){
.casestudy .gallerySlideArea .mainWrap {
margin-bottom: 20px;
}
}
@media only screen and (max-width:767px){
.casestudy .gallerySlideArea .mainWrap{
margin-bottom: 20px;
}
}
.casestudy .gallerySlideArea .mainWrap .bx-prev .icon-arrow{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-20%,-50%);
background: url("../images/model/arrow-prev.svg") center no-repeat;
background-size: contain;
}
@media only screen and (max-width:767px){
.casestudy .gallerySlideArea .mainWrap .bx-prev .icon-arrow{
width: 30px;
height: 30px;
}
}
.casestudy .gallerySlideArea .mainWrap .bx-next .icon-arrow{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translate(20%,-50%);
background: url("../images/model/arrow-next.svg") center no-repeat;
background-size: contain;
}
@media only screen and (max-width:767px){
.casestudy .gallerySlideArea .mainWrap .bx-next .icon-arrow{
width: 30px;
height: 30px;
}
}
@media only screen and (max-width:767px){
.casestudy .gallerySlideArea .controlWrap{
width: 100%;
}
}
.casestudy .gallerySlideArea .controlWrap li{
margin-right: 4.5%;
margin-bottom: 20px;
}
@media screen and (max-width:980px){
.casestudy .gallerySlideArea .controlWrap li{
margin-right: 2%;
margin-bottom: 10px;
}
}
/* BEFORE AFTER */
.casestudy .icon-before {
font-size: 37px!important;
}
@media only screen and (max-width:767px){
.casestudy .icon-before{
font-size: 23px!important;
}
}
.casestudy .icon-after {
font-size: 30px!important;
}
@media only screen and (max-width:767px){
.casestudy .icon-after {
font-size: 19px!important;
}
}
.casestudy .beforeContents, 
.casestudy .afterContents{
border-radius: 20px;
}
.casestudy .beforeContents .photoContents .noteBox ul,
.casestudy .afterContents .photoContents .noteBox ul { 
top: 300px;
width: 100%;
}
.casestudy .beforeContents .photoContents .noteBox ul img,
.casestudy .afterContents .photoContents .noteBox ul img{ 
width: 50px;
height: auto;
}
@media screen and (max-width:980px){
.casestudy .beforeContents .photoContents .noteBox ul,
.casestudy .afterContents .photoContents .noteBox ul { 
position: static;
}
}
@media screen and (max-width:980px){
.casestudy .photoContents {
display: block;
}
}
.casestudy .photoContents .sliderBox{
width: 50%;
}
@media screen and (max-width:980px){
.casestudy .photoContents .sliderBox{
width: 100%;
}
}
.casestudy .photoContents .noteBox{
width: 44.5%;
}
@media screen and (max-width:980px){
.casestudy .photoContents .noteBox{
width: 100%;
}
}
.casestudy .photoContents .noteBox .note{
margin-top: 20px;
}
@media screen and (max-width:980px){
.casestudy .photoContents .noteBox .note{
margin: 0 0 40px 0;
}
}
/*---------------------------------------*/
/* detailContents */
/*---------------------------------------*/
.casestudy .icon-aboutof {
font-size: 40px!important;
}
@media only screen and (max-width:767px){
.casestudy .icon-aboutof {
font-size: 27px!important;
}
}
.casestudy .icon-reform {
font-size: 33px!important;
}
@media only screen and (max-width:767px){
.casestudy .icon-reform {
font-size: 22px!important;
}
}
.casestudy  .detailAreaOuter {
width: 100%;
padding: 70px 0;
}
.casestudy .detailContents{
border-radius: 20px;
position: relative;
z-index: 10;
}
.casestudy .detailContents>.areaInner{
width: 90%;
}
.casestudy .detailContents .circle01{
top:25%;
left:-80px;
z-index: 9;
}
@media only screen and (max-width:767px){
.casestudy .detailContents .circle01{
top:5%;
left:-40px;
}
}
.casestudy .detailContents .circle02{
top: 30%;
right:-80px;
z-index: 9;
}
@media only screen and (max-width:767px){
.casestudy .detailContents .circle02{
top:15%;
right:-50px;
}
}
.casestudy .detailContents .circle03{
top: 65%;
left: -290px;
z-index: 9;
}
@media only screen and (max-width:767px){
.casestudy .detailContents .circle03{
top: 35%;
left: -90px;
}
}
.casestudy .detailContents .circle04{
top: 67%;
right: -140px;
z-index: 9;
}
@media only screen and (max-width:767px){
.casestudy .detailContents .circle04{
top: 55%;
right: -140px;
}
.casestudy .detailContents .circle05{
top: 75%;
left: -60px;
z-index: 9;
}
.casestudy .detailContents .circle06{
top: 97%;
right: -100px;
z-index: 9;
}
}
.casestudy .detailContents .circle07{
top: 90%;
left: -100px;
z-index: 9;
}
.casestudy .detailContents .detailList{
z-index: 10;
}
.casestudy .detailContents .detailList .item{
width: 31.25%;
margin-right: 3.125%;
}
@media screen and (max-width:767px){
.casestudy .detailContents .detailList .item{
width: 100%;
margin-right: 0;
margin-bottom: 25px;
}
.casestudy .detailContents .detailList .item:last-child{
margin-bottom: 0;
}
}
.casestudy .detailContents .detailList .item:nth-child(3n){
margin-right: 0;
}
/*---------------------------------------*/
/* plannningArea */
/*---------------------------------------*/
.casestudy .plannningArea{
padding-bottom: 150px;
}
@media screen and (max-width:767px){
.casestudy .plannningArea{
padding-bottom: 90px;
}
}
.casestudy .plannningArea .styleContent,
.casestudy .plannningArea .environmentContent,
.casestudy .plannningArea .tabContet{
max-width: 800px;
}
.casestudy .plannningArea .styleContent .img{
width: 45%;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .styleContent .img{
width: 100%;
margin-bottom: 20px;
}
}
.casestudy .plannningArea .styleContent .txtBox{
width: 50%;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .styleContent .txtBox{
width: 100%;
}
}
.casestudy .plannningArea .environmentContent .environment{
width: 47%;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .environmentContent .environment{
width: 100%;
}
.casestudy .plannningArea .environmentContent .environment:first-child{
margin-bottom: 40px;
}
}
@media screen and (max-width:767px){
.casestudy .plannningArea .tabContet{
width: 100%;
}
.casestudy .plannningArea .tabContet .naviOuter{
overflow-x: scroll;
}
.casestudy .plannningArea .space01Content .navi{
width: 840px;
padding: 0 5% 10px;
}
.casestudy .plannningArea .space02Content .navi{
width: 420px;
padding: 0 5% 10px;
}
}
.casestudy .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){
.casestudy .plannningArea .tabContet .tabBtn{
width: 100px;
margin-right: 5px;
height: 45px;
border-radius: 45px;
margin-bottom: 5px;
}
}
.casestudy .plannningArea .tabContet .tabBtn.active,
.casestudy .plannningArea .tabContet .tabBtn:hover{
background: #ed6d16;
}
.casestudy .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){
.casestudy .plannningArea .tabContet .tabBtn .txt{
font-size: 1.35rem;
}
}
.casestudy .plannningArea .tabContet .tabBtn.active .txt,
.casestudy .plannningArea .tabContet .tabBtn:hover .txt{
color: #fff;
}
.casestudy .plannningArea .tabContet .tabBtn:nth-child(5n){
margin-right:0;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .tabContet .tabBtn:nth-child(5n){
margin-right:5px;
}
}
.casestudy .plannningArea .tabContet .panel {
display:none;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .tabContet .panel {
width: 90%;
margin: 0 auto;
}
}
.casestudy .plannningArea .tabContet .panel.active {
display:block;
}
.casestudy .plannningArea .tabContet .panel  .img{
width: 50%;
}
.casestudy .plannningArea .tabContet .panel  .txtBox{
width: 45%;
}
@media screen and (max-width:767px){
.casestudy .plannningArea .tabContet .panel  .img{
width: 100%;
margin-bottom: 40px;
}
.casestudy .plannningArea .tabContet .panel  .txtBox{
width: 100%;
}
}
@media screen and (max-width:767px){
.casestudy .infoArea {
display: block;
}
}
.casestudy .infoArea .txtBox {
width: 50%;
}
@media screen and (max-width:767px){
.casestudy .infoArea .txtBox {
width: 100%;
margin-left: 0;
margin-bottom: 30px;
}
}
.casestudy .infoArea .infoBox {
width: 41%;
}
@media screen and (max-width:767px){
.casestudy .infoArea .infoBox {
width: 100%;
margin-right: 0;
}
}
.casestudy .infoArea .infoTxt {
padding-bottom: 18px;
margin: 0 auto 18px;
border-bottom: 1px solid #d8d8d8;
max-width: 330px;
}
.casestudy .infoArea .infoBox .ttl{
width: 120px;
}
.casestudy .infoArea .infoBox .note{
width: calc(100%-120px);
}
.casestudy .icon-comment {
font-size: 37px!important;
}
@media screen and (max-width:767px){
.casestudy .icon-comment {
font-size: 25px!important;
}
}
.casestudy .ttlBox .ttl02 {
margin-top: -14px;
}
@media screen and (max-width:767px){
.casestudy .commentArea .commentContents {
display: block;
}
}
.casestudy .commentContents {
padding-bottom: 90px;
}
.casestudy .commentContents .imgBox {
width: 39.5%;
}
.casestudy .commentContents .noteBox {
width: 50%;
}
@media screen and (max-width:767px){
.casestudy .commentContents .imgBox {
width: 100%;
}
}
.casestudy .commentContents .noteBox {
width: 50%;
}
@media screen and (max-width:767px){
.casestudy .commentContents .noteBox {
width: 100%;
}
}
.casestudy .storeOuter {
background: url(../images/bg-stripe.gif) top left;
background-size: 80px 80px;
padding: 220px 0 10px;
}
@media screen and (max-width: 767px) {
.casestudy .storeOuter {
background-size: 50px 50px;
padding: 100px 0 10px;
}
}
.casestudy .storeArea{
border-radius: 20px;
padding-bottom: 90px;
}
@media screen and (max-width:980px){
.casestudy .storeArea{
padding-bottom: 60px;
}
}
@media screen and (max-width:767px){
.casestudy .storeArea{
padding-bottom: 30px;
}
}
.casestudy .storeArea .storeBlock{
max-width: 800px;
}
.casestudy .storeArea .storeBlock .img{
width: 45%;
margin-right: 5%;
}
@media screen and (max-width:980px){
.casestudy .storeArea .storeBlock .img{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
}
.casestudy .storeArea .storeBlock .txtBox{
width: 50%;
}
@media screen and (max-width:980px){
.casestudy .storeArea .storeBlock .txtBox{
width: 100%;
}
}
.casestudy .storeArea .storeBlock .txtBox .mapLink .icon{
width: 9px;
margin: 0 5px 0 15px;
}
.casestudy .storeArea  .linkBtn a{
padding: 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid #fff;
}
.casestudy .storeArea  .linkBtn a:hover{
background: #ed6d16;
}
.casestudy .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){
.casestudy .storeArea  .linkBtn a .arrow{
right: 15px;
}
}
.casestudy .storeArea  .linkBtn a:hover .arrow{
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}