@charset "UTF-8";

/* ======================================================

   common-Setting

========================================================= */
html {}
body {color:#5f1a3d;-webkit-text-size-adjust:100%;font-family:"游ゴシック体","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;letter-spacing:1px;position:relative;}
h1,h2,h3,h4,h5,h6,input,button,textarea,select,p,blockquote,table,pre,address,ul,ol,dl {font-size:160%;font-weight:normal;text-align:left;line-height:1.8;}
h1,h2,h3,h4,h5,h6 {line-height:1.4;}
img {width:100%;height:auto;vertical-align:bottom;}
li {list-style:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
a:link {color:#e3acae;text-decoration:underline;}
a:visited {color:#e3acae;text-decoration:underline;}
a:hover {color:#e3acae;text-decoration:none;}
a:active {outline:none;}
.fadein {opacity: 0; transform : translate(0, 50px); transition : all 1500ms;}
.fadein.scrollin {opacity: 1; transform: translate(0, 0);}

/* ======================================================

   header

========================================================= */
#outer_header {width:100%;background:rgba(249,249,249,0.5);padding:15px 0;position:absolute;top:0;left:0;}
#header {width:90%;max-width:1024px;margin:0 auto;}
#header h1 {line-height:40px;font-size:20px;font-family:'Oswald',sans-serif;font-weight:400;}

/* ======================================================

   contents

========================================================= */
#main_img {width:100%;height:100vh;background:#fffdfe url("../images/main.png") center no-repeat;background-size:auto 95%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;}
#main_txt {width:90%;max-width:1024px;margin:0 auto;}
#main_txt p {text-align:center;font-size:42px;font-family:'Oswald',sans-serif;font-weight:200;letter-spacing:2px;margin-bottom:5px;}
#main_txt img {display:block;width:70px;margin:0 auto;}

#about {margin:50px 0 40px;}
#about .img ,#about .img img {position:relative;}
#about .img img {display:block;width:90%;max-width:1024px;margin:0 auto;}
#about .img::before {content:'';width:100%;height:50%;background:#f4f4f4;position:absolute;left:0;bottom:0;}
#about .txt {background:#f4f4f4;padding:40px 0 60px;}
#about .inner {width:90%;max-width:900px;margin:0 auto;}
#about h2,#about p {text-align:center;}
#about h2 {font-size:28px;font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:2px;margin-bottom:10px;}
#about p {margin-bottom:1em;}
#about p:last-child {margin-bottom:0;}

#img_right_wrap {background:#c5d9de;/*margin-bottom:30px;*/}
#img_left_wrap {background:#e2d8d8;}
#img_right_wrap h3,#img_right_wrap p,#img_right_wrap li,#img_left_wrap h3,#img_left_wrap p,#img_left_wrap li {color:#FFF;}
#img_right_wrap h3,#img_left_wrap h3 {font-size:28px;font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:2px;margin-bottom:5px;}
#img_right_wrap .txt,#img_left_wrap .txt {padding:50px 5%;}
#img_right_wrap ul {margin-bottom:1em;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
#img_right_wrap li {width:48%;padding:30px 20px;margin-bottom:4%;border:#FFF 2px solid;box-sizing:border-box;text-align:center;line-height:1.4;}
#img_right_wrap li i {display:block;font-size:46px;margin-bottom:10px;}

#works_con {width:90%;max-width:1024px;margin:0 auto;padding:50px 0;}
#works_con h4,#works_con p {text-align:center;}
#works h4 {font-size:14px;font-weight:bold;margin-bottom:20px;}
#works h4 span {font-size:28px;font-family:'Oswald',sans-serif;font-weight:400;display:block;letter-spacing:2px;}
#works p {max-width:900px;margin:0 auto;margin-bottom:1em;}
#works p:last-child {margin-bottom:0;}
#works ul {margin-bottom:10px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
#works li {width:32%;max-width:300px;margin-bottom:20px;}

#company_con {background:#d3d5c8;padding:50px 0;}
#company_inner {width:90%;max-width:1024px;margin:0 auto;}
#company h5 {text-align:center;font-size:14px;font-weight:bold;color:#FFF;margin-bottom:20px;}
#company h5 span {font-size:28px;font-family:'Oswald',sans-serif;font-weight:400;display:block;letter-spacing:2px;margin-bottom:5px;}
#company table {width:100%;border:#e8e8e8 solid 1px;}
#company table tr {border-bottom:#e8e8e8 solid 1px;}
#company table th,#company table td {width:100%;display:block;box-sizing:border-box;color:#FFF;line-height:1.4;padding:20px 20px 5px;}
#company table td {padding:0 20px 20px;}
#company .txt_sp {max-width:277px;}
#company .txt_pc {display:none;}

#works_main {padding:120px 0 50px;}
#works_main h2 {font-size:14px;font-weight:bold;text-align:center;margin-bottom:20px;}
#works_main h2 span {font-size:28px;font-family:'Oswald',sans-serif;font-weight:400;display:block;letter-spacing:2px;}
#works_main ul {width:90%;max-width:1024px;margin:0 auto 70px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
#works_main ul:last-child {margin:0 auto 0;}
#works_main ul li {width:47.5%;font-family:'Oswald',sans-serif;font-size:14px;word-break:break-all;margin-right:5%;margin-bottom:30px;}
#works_main ul li:nth-child(2n) {margin-right:0;}
#works_main ul li .img {margin-bottom:20px;}
#works_main ul li span {font-size:16px;}

/* ======================================================

   footer

========================================================= */
#outer_footer {background:#f4f4f4;}
#footer {width:90%;max-width:1024px;margin:0 auto;}
.copy {font-size:13px;line-height:1.2;text-align:center;padding:30px 0;}




/******************************** タブレット ********************************/
@media screen and (min-width:560px) {
/*-------------------------------
 
   contents
 
-------------------------------*/
#main_txt p {font-size:66px;margin-bottom:5px;}
#main_txt img {width:80px;}

#company .address {padding:20px 20px 10px;}
#company .txt_sp {display:none;}
#company .txt_pc {display:block;max-width:473px;}

#works_main ul li {width:31%;}
#works_main ul li,#works_main ul li:nth-child(2n) {margin-right:3.5%;}
#works_main ul li:nth-child(3n) {margin-right:0;}
}




/******************************** PC ********************************/
@media screen and (min-width: 960px) {
/*-------------------------------
 
   header
 
-------------------------------*/
#outer_header {padding:25px 0 30px;}
#header h1 {font-size:24px;}

/*-------------------------------
 
   contents
 
-------------------------------*/
#main_img {background:#fffdfe url("../images/main.png") center no-repeat;background-size:1200px auto;}
#main_txt p {font-size:80px;}
#main_txt img {width:100px;}

#about {margin:100px 0 80px;}
#about .txt {background:#f4f4f4;padding:70px 0 100px;}
#about h2 {font-size:36px;}

#img_right_wrap,#img_left_wrap {position:relative;overflow:hidden;}
#img_right_wrap {display:-webkit-flex;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;}
#img_left_wrap {display:-webkit-flex;display:flex;}
#img_right_wrap .img,#img_left_wrap .img {width:80%;max-width:1200px;}
#img_right_wrap h3,#img_left_wrap h3 {font-size:36px;margin-bottom:20px;}
#img_right_wrap .txt,#img_left_wrap .txt {width:90%;max-width:900px;padding:80px 0 0;position:absolute;}
#img_right_wrap .txt {left:5%;top:0;}
#img_left_wrap .txt {right:5%;top:0;}
#img_left_wrap .txt h3,#img_left_wrap .txt p {text-align:right;}
#img_right_wrap ul {margin-bottom:30px;}
#img_right_wrap li {width:24%;padding:50px 20px;margin-bottom:0;font-size:18px;}
#img_right_wrap li i {font-size:52px;margin-bottom:20px;}

#works_con,#company_con {padding:110px 0;}
#works h4,#company h5 {margin-bottom:30px;}
#works h4 span,#company h5 span {font-size:36px;}
#works li {margin-bottom:40px;}

#company table th,#company .address,#company table td {display:table-cell;padding:30px;vertical-align:middle;}
#company table th {width:22%;}
#company table td {padding:30px 20px 30px 0;}

#works_main {padding:180px 0 100px;}
#works_main h2 {margin-bottom:30px;}
#works_main h2 span {font-size:36px;}
#works_main ul li {margin-bottom:50px;}
#works_main ul li .img {transition-duration:0.3s;}
#works_main ul li .img:hover {transition-duration:0.3s;opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha(opacity=80)";}

/*-------------------------------
 
   footer
 
-------------------------------*/
.copy {padding:50px 0;}

}