@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/


#g-nav li a.nav_photo{color: #DB755A;}


#HEADER #HEADER_BOX ul.H_MENU li a.H_PHOTO:link	{ background-color: #fb7c00; color: #fff; text-decoration: none; }
#HEADER #HEADER_BOX ul.H_MENU li a.H_PHOTO:visited { background-color: #fb7c00; color: #fff; text-decoration: none; }

#PAGE #CONTENTS	{ overflow: visible; }

section img { position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-5F0%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;}

.gray-back { width:100vw; background-color: #F4F4F4; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0 0 0px 0;}
.fadein.scrollin { opacity : 1;-webkit-transform : translate(0, 0);transform : translate(0, 0); }

.caption p { width:auto; font-size:20px; font-weight: bold; }
.caption strong { width:auto; font-size:50px; font-family: 'Fjalla One', sans-serif; color:#1D2088; background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #FFE100)); background: linear-gradient(transparent 70%, #FFE100 70%); }

.satueibi { font-size: 12px; margin: 10px 0 0 0;}

.box-garage { width:1080px; height: 720px; position: relative; margin: 50px auto 100px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms; }
.box-garage .caption { width:400px; position: absolute; top: 30px; right: 55px; z-index: 100;}
.box-garage .blue { width:240px; height: 240px; background-color:#0087FC; position: absolute; top: 0; right:280px; opacity:.8;}
.box-garage .photo1 { width:520px; height: 720px; position: absolute; top: 0; left: 0;}
.box-garage .photo2 { width:520px; height: 420px; position: absolute; bottom: 0; right: 0;}

.base-camp { width:1080px; height: 550px; position: relative; margin: 100px auto 100px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms; }
.base-camp .caption { width:400px; position: absolute; top: 0px; left:0px; z-index: 100;}
.base-camp .red { width:240px; height: 240px; background-color:#FF3838; position: absolute; top: 100px; left:170px; opacity:.8;}
.base-camp .photo1 { width:700px; height: 550px; position: absolute; top: 0; right: 0;}
.base-camp .photo2 { width:350px; height: 320px; position: absolute; bottom: 0; left: 0;}

.living { width:1080px; height: 960px; position: relative; margin: 100px auto 100px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.living .caption { width:400px; position: absolute; bottom:0px; left:0px; z-index: 100;}
.living .yellow { width:240px; height: 240px; background-color:#FCC200; position: absolute; top: 500px; right:470px; opacity:.8;}
.living .photo1 { width:800px; height: 560px; position: absolute; top: 0; left: 0;}
.living .photo2 { width:550px; height: 400px; position: absolute; bottom: 0; right: 0;}

.box-terrace { width:1080px; height: 530px; position: relative; margin: 100px auto 100px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.box-terrace .caption { width:400px; position: absolute; bottom: 50px; right: -50px; z-index: 100;}
.box-terrace .purple { width:240px; height: 240px; background-color:#875DB7; position: absolute; top: 100px; right:215px; opacity:.8;}
.box-terrace .photo1 { width:700px; height: 530px; position: absolute; top: 0; left: 0;}

.room { width:1080px; height: 530px; position: relative; margin: 100px auto 100px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.room .caption { width:400px; position: absolute; top: 50px; left:0px; z-index: 100;}
.room .orange { width:240px; height: 240px; background-color:#FF3B00; position: absolute; top: 100px; left:200px; opacity:.8;}
.room .photo1 { width:700px; height: 530px; position: absolute; top: 0; right: 0;}
.room .photo2 { width:360px; height: 275px; position: absolute; bottom: 0; left: 0;}

.mizumawari { width:1080px; height: auto; position: relative; margin: 50px auto 0px auto; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.mizumawari .photo1 { width:340px; height: 530px; margin: 0 30px 0 0; float: left;}
.mizumawari .photo2 { width:340px; height: 530px; margin: 0 30px 0 0; float: left;}
.mizumawari .photo3 { width:340px; height: 530px; float: left; }

.gochi__caption { width:-moz-max-content; width: -webkit-fit-content; text-align: left; font-weight:normal; line-height:1.2em; font-size:23px; color:#000; font-weight:bold; margin: 0px 0 0px 0; padding: 0px 0 0px 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #FFE100)); background: linear-gradient(transparent 70%, #FFE100 70%);}






/* 0707追加 */

#CONTENTS {width: 960px;margin: 0px auto;}
#PAGE .concept {width: 960px;line-height: 2em;}
h3	{ width:960px; height:35px; line-height:35px; float:left; margin:0 0 30px 0; padding:0 20px; color:#36322f; font-size:17px; border-top:1px solid #000; border-bottom:1px solid #000; padding:5px 0; text-align: left;}
span.SPEC  { font-size:11px; float:right; clear:none; margin:0px 0 0 0px; line-height:35px; }

.PHOTO { width:960px; height:auto; margin:0px 0 0px 0; display:flex; justify-content: space-between;align-items: flex-start;}
.PHOTO img { margin:0 20px 20px 0; }
.PHOTO_LEFT { width:auto; height:420px; float:left; clear:none; margin-right:20px; overflow:hidden; }
.PHOTO_LEFT img { width:100%; }
.PHOTO_RIGHT { width:313px; }
.PHOTO_RIGHT img { width:auto; height:200px; margin-bottom:20px; }
.PHOTO_WIDE { width:960px; margin:0 0 20px 0; }
.COMMENT { width:100%; float:left; clear:none; margin:0 0 30px 0; text-align: left;}
.PHOTO_TATE { width:306px; }
.PHOTO_YOKO { width:470px; }


/* 211225書いた */
#PAGE .title{text-align: left;width: 960px;margin: 50px auto 10px;height: auto;}
#PAGE .title h1{font-size: 69px;
line-height: 69px;
color: #DB755A;
font-family: 'Oswald', sans-serif;
margin: 0;}
#PAGE .title h1 em{font-size: 17px;color: #000;}


.button{display: flex;justify-content: center;}
.button li{color: #fff;width: 200px;height: 50px;background: #2F2F2F;margin:10px;margin: 10px 20px;line-height: 50px;text-align: center;}
.button li a{display: block;}
.button li:hover{background: #DB755A;transition: all 0.3s ease 0s;}

.CONTACT_top{width: 600px;
margin: 0px auto 100px;
justify-content: space-around;
display: flex;}

.CONTACT_top li{width: 45%;
justify-content: space-around;
text-align: center;
line-height: 50px;
background: #5AAFA5;
padding: 0px;
margin: 5px;
height: 50px;
font-size: 20px;}
.CONTACT_top li a{color: #fff;display: block;}
.CONTACT_top li a:hover{opacity: 0.5;}
.concept p strong{font-weight: bold;text-decoration: underline;}


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

.sidr ul li a.sidr-class-photo:link { background-color:#fb7c00; color: #000;}
.sidr ul li a.sidr-class-photo:visited { background-color:#fb7c00; color: #000;}

.gray-back { width:100vw; background-color: #F4F4F4; left: 0%; -webkit-transform: translateX(0%); transform: translateX(0%); padding: 0 0 0px 0;}
.fadein.scrollin { opacity : 1;-webkit-transform : translate(0, 0);transform : translate(0, 0); }

.caption p { width:auto; font-size:18px; font-weight: bold; }
.caption strong { width:auto; font-size:50px; font-family: 'Fjalla One', sans-serif; color:#1D2088; background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #FFE100)); background: linear-gradient(transparent 70%, #FFE100 70%); }

.box-garage { width:100%; height: 890px; position: relative; margin: 80px 0 0 0; opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.box-garage .caption { width:95%; position: absolute; top:0px; left:10px; z-index: 100;}
.box-garage .blue { width:150px; height:150px; background-color:#0087FC; position: absolute; top: -35px; left:0px; opacity:.8;}
.box-garage .photo1 { width:100%; position: absolute; top: 40px; left: 0;}
.box-garage .photo2 { width:70%; height: 250px; position: absolute; bottom: 0; right: 0px;}

.base-camp { width:100%; height: 780px; position: relative; margin:80px 0 0 0;opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.base-camp .caption { width:95%; position:absolute; top: 0px; left:10px; z-index: 100;}
.base-camp .red { width:200px; height:200px; background-color:#FF3838; position: absolute; top:50px; right:10px; opacity:.8;}
.base-camp .photo1 { width:100%; height: 550px; position: absolute; top: 70px; right: 0;}
.base-camp .photo2 { width:70%; height: 320px; position: absolute; bottom: 0px; left: 0px;}

.living { width:100%; height: 640px; position: relative; margin: 0px 0 0 0;opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.living .caption { width:95%; position: absolute; bottom:0px; left:10px; z-index: 100;}
.living .yellow { width:200px; height: 200px; background-color:#FCC200; position: absolute; top: 360px; left:25px; opacity:.8;}
.living .photo1 { width:100%; height: 300px; position: absolute; top: 0; left: 0;}
.living .photo2 { width:70%; height: 300px; position: absolute; bottom: 120px; right: 0;}

.box-terrace { width:100%; height: 530px; position: relative; margin: 100px 0 0 0;opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.box-terrace .caption { width:95%; position: absolute; bottom: 50px; left:10px; z-index: 100;}
.box-terrace .purple { width:200px; height: 200px; background-color:#875DB7; position: absolute; top: 300px; right:0px; opacity:.8;}
.box-terrace .photo1 { width:100%; height: 300px; position: absolute; top: 0; left: 0;}

.room { width:100%; height: 650px; position: relative; margin:0px 0 0 0;opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.room .caption { width:95%; position: absolute; top: 50px; left:10px; z-index: 100;}
.room .orange { width:200px; height: 200px; background-color:#FF3B00; position: absolute; top: 320px; left: 135px; opacity:.8;}
.room .photo1 { width:100%; height: 530px; position: absolute; top: 0; right:0;}
.room .photo2 { width:70%; height: 275px; position: absolute; bottom: 0; left:0px;}

.mizumawari { width:100%; height: auto; position: relative; margin:0px 0 0 0;opacity : 0;-webkit-transform : translate(0, 100px);transform : translate(0, 100px);-webkit-transition : all 500ms;transition : all 500ms;}
.mizumawari .photo1 { width:calc(98%/3); height: 250px; margin: 0 1% 0 0; float: left; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mizumawari .photo2 { width:calc(98%/3); height: 250px; margin: 0 1% 0 0; float: left; -webkit-box-sizing: border-box; box-sizing: border-box;}
.mizumawari .photo3 { width:calc(98%/3); height: 250px; float: left; -webkit-box-sizing: border-box; box-sizing: border-box;}

.gochi__caption { text-align: center; margin: 0 auto;}

.CONTACT_top{width: 100%;justify-content: center;}

/* 0707追加 */

#CONTENTS {width: 100%;}
#PAGE .concept {width: 92%;text-align: justify;margin: 0 auto;font-size: 14px;}
h3	{ width:95%; float:left; margin:30px 0 30px 0; padding:0 2.5%; text-align:center; }
span.SPEC  { width:100%; font-size:11px; float:left; clear:none; margin:0px 0 20px 0px; line-height:35px; text-align:center; }

.PHOTO { width:100%; display:block; }
.PHOTO_LEFT { width:100%; height:auto; }
.PHOTO_RIGHT { width:100%; }
.PHOTO_WIDE { width:100%; margin-bottom: 5px;}
.PHOTO_RIGHT img { margin-bottom:5px; }
.PHOTO_RIGHT img { width:100%; height:auto; margin-bottom:5px; }
.PHOTO img { width:100%; margin:0 0px 5px 0; }
.PHOTO_TATE { width:100%; }
.PHOTO_YOKO { width:100%; }

#PAGE .title h1{font-size: 28px;line-height: 36px;}

#PAGE{width: 100%;}
#PAGE .title {height: auto;width: 92%;margin: 30px auto 0;}

}