@charset "UTF-8";
.case-study .sp_scroll_menu          { width: 100%; position: fixed; left: 0; bottom: -100px; -webkit-transition: .6s; transition: .6s; height: 92px; background-color: #fff; box-shadow: 0px 0px 6px 0px #8e8a8a; -moz-box-shadow: 0px 0px 6px 0px #8e8a8a; -webkit-box-shadow: 0px 0px 6px 0px #8e8a8a; }
.case-study .sp_scroll_menu    > div { position: relative; width: 100%; height: 92px; }
.case-study .sp_scroll_menu    ul    { position: absolute; bottom: 18px; right: 40px; list-style-type: none; overflow: hidden; }
.case-study .sp_scroll_menu    ul li { float: left; height: 56px; width: 70px; border-left: solid 2px #e0e0e0; }
.case-study .sp_scroll_menu ul li a  { display: block; opacity: 1; content: ""; width: 100%; height: 100%; background: url(../img/case-study/circle_link.png) no-repeat; background-size: 20px; background-position: center; }
.case-study .sp_scroll_menu    ul li:nth-last-of-type(1) { border-right: solid 2px #e0e0e0; width: 72px; }
	.case-study .sp_scroll_menu.us       { width: 106px; left: inherit; right: 0; bottom: -500px; height: 336px}
	.case-study .sp_scroll_menu.us > div { height: 328px}
	.case-study .sp_scroll_menu.us ul    { right: 16px}
	.case-study .sp_scroll_menu.us ul li { float: inherit; height: 70px; border-left: none; border-top: solid 2px #e0e0e0; }
	.case-study .sp_scroll_menu.us ul li:nth-last-of-type(1) { border-right: none; border-bottom: solid 2px #e0e0e0}

@media (min-width: 751px) { .case-study .header_nav li.case:before { position: absolute; content: ""; left: 0; right: 0; bottom: 1px; width: calc(100% - 2px); height: 2px; margin: 0 auto; background: #834cb1; } }
@media (max-width: 750px) { .case-study .side_contact_wrap .side_contact { display: none; }
  .case-study body { padding-bottom: 92px; } }
.case-study .main { margin: 180px 0 0; }
@media (max-width: 750px) { .case-study .main { margin: 40px 0 0; } }
.case-study .main .container { overflow: hidden; }
.case-study .main .container_left { width: 970px; float: left; }
@media (max-width: 750px) { .case-study .main .container_left { float: none; width: 100%; } }
.case-study .main .container_left .article { padding-top: 20px; margin-bottom: 60px; position: relative; }
.case-study .main .container_left .article:before { content: "※プロジェクト期間や工期はケースによって異なります。詳しくはお気軽にお問い合わせください。"; position: absolute; top: -9px; left: 9px; font-size: 1.1rem; }
@media (max-width: 750px) { .case-study .main .container_left .article:before { width: 710px; left: 0; right: 0; margin: 0 auto; top: -9px; font-size: 15px; } }

.case-study .main.us .container_left .article:before { content: "Note: Duration of project and/or construction would vary depending on case."; left: inherit; right: 9px}
@media (max-width: 750px) { .case-study .main.us .container_left .article:before { height: 20px; font-size: 18px} }

.case-study .main .container_left #article1 { margin-top: 14px; }
.case-study .main .container_left .title_box { overflow: hidden; border: solid 1px #e3e2d2; /* aguije edit height: 324px;*/ }
@media (max-width: 750px) { .case-study .main .container_left .title_box { width: 718px; height: inherit; border-width: 2px; margin: 0 auto; } }
.case-study .main .container_left .title_box .title_left { float: left; width: 646px; /* aguije edit height: 10000px;*/ padding-top: 7px; text-align: center; /*border: solid 1px #fbfae9;*/ border-right: solid 1px #e3e2d2 }
.case-study .main .container_left .title_box .title_left img { width: 632px; }

.case-study .main.us .container_left .title_box .title_left { float:　right; padding-top: 0; border-right: 0; border-left: solid 1px #e3e2d2 }
.case-study .main.us .container_left .title_box .title_left img { margin-top: 7px }

.case-study .main .container_left .title_box .title_left p { text-align: left; font-size: 1.2rem; width: 580px; margin: 0 auto; padding: 17px 0 /*35px*/; color: #231815; }
.case-study .main .container_left .title_box .title_left p span { display: inline-block; margin: 0 6px; }
@media (max-width: 750px) { .case-study .main .container_left .title_box .title_left { width: 670px; margin: 0 auto; float: none; height: inherit; padding-top: 24px; border-right: none; }
  .case-study .main.us .container_left .title_box .title_left { border-left: none}
  .case-study .main    .container_left .title_box .title_left img { width: 670px; }
  .case-study .main    .container_left .title_box .title_left p { width: 100%; padding: 20px 0; } }
.case-study .main .container_left .title_box .title_right { float: right; width: 322px;/* margin: 1px; */ border-left: solid 1px #fbfae9; border-right: solid 1px #fbfae9; text-align: right; background-color: #e3e2d2; }
.case-study .main .container_left .title_box .title_right h2 { border-top: solid 1px #fbfae9; border-bottom: solid 1px #fbfae9}
.case-study .main .container_left .title_box .title_right img { width: 140px; margin: 8px 9px 10px 0; }

.case-study .main.us .container_left .title_box .title_right { float: left}
.case-study .main.us .container_left .title_box .title_right h2 { border-bottom: none}
.case-study .main.us .container_left .title_box .title_right img { width: 302px}

@media (max-width: 750px) { .case-study .main .container_left .title_box .title_right { width: 100%; margin: 0 auto; float: none; border-width: 2px; text-align: center; position: relative; min-height: 242px !important}
  .case-study .main .container_left .title_box .title_right img { width: 670px; margin: 20px 0; }
  .case-study .main.us .container_left .title_box .title_right img { width: 670px}
  }
.case-study .main .container_left section .point_section { -webkit-transition: .6s; transition: .6s; }
.case-study .main .container_left section:nth-of-type(odd) .point_section { background-color: #f3f2e2; }
.case-study .main .container_left section:nth-of-type(even) .point_section { background-color: #fbfae9; }
.case-study .main .container_left section:hover .point_section { background-color: #fff; }
.case-study .main .container_left .point_section    { padding: 32px 20px 35px 25px; overflow: hidden; border: solid 1px #e3e2d2; }
.case-study .main.us .container_left .point_section { padding: 32px 20px 32px 25px}
@media (max-width: 750px) { .case-study .main .container_left .point_section { padding: 50px 22px; width: 718px; border-top: none; border-width: 2px; margin: 0 auto; } }
.case-study .main .container_left .point_section .point_left { width: 298px; height: 190px; float: left; }
.case-study .main.us .container_left .point_section .point_left { height: 150px; border-right: solid 1px #dddddd}

.case-study .main .container_left .point_section .point_left .number { height: 50px; width: auto; }
.case-study .main .container_left .point_section .point_left .name { margin-top: 18px; font-size: 1.8rem; }
.case-study .main .container_left .point_section .point_left .time { margin-top: 14px; font-size: 1.3rem; }
@media (max-width: 750px) { .case-study .main .container_left .point_section .point_left { width: 670px; float: none; margin: 0 auto; height: inherit; position: relative; padding-bottom: 30px; border-bottom: solid 2px #d3d3c4; }
  .case-study .main.us .container_left .point_section .point_left { border-right: none}
  .case-study .main .container_left .point_section .point_left .number { height: 100px; display: inline-block; }
  .case-study .main .container_left .point_section .point_left .name, .case-study .main .container_left .point_section .point_left .time { margin: 0; line-height: 1; position: absolute; left: 175px; }
  .case-study .main .container_left .point_section .point_left .name { bottom: 31px; }
  .case-study .main .container_left .point_section .point_left .time { top: 77px; margin-left: 3px; } }
.case-study .main .container_left .point_section .point_right { float: right; width: 625px; padding: 0 17px 0 22px; color: #454545; border-left: solid 1px #dddddd; }
.case-study .main .container_left .point_section .point_right .title { margin-top: 1px; font-size: 2rem; line-height: 1; }

.case-study .main.us .container_left .point_section .point_right { border-left: none}
.case-study .main.us .container_left .point_section .point_right .title { font-size: 2.2rem; line-height: 2.4rem}

.case-study .main .container_left .point_section .point_right .title span { font-size: 1.2rem; font-weight: bold; vertical-align: text-bottom; display: inline-block; margin-left: 24px; line-height: 2rem; }
.case-study .main .container_left .point_section .point_right .title_text { margin: 14px 0 21px; font-size: 1.2rem; line-height: 1.8; }
.case-study .main.us .container_left .point_section .point_right .title_text { margin: 14px 0 0; font-size: 1.3rem; line-height: 2.2rem; }

.case-study .main .container_left .point_section .point_right .point { width: 57px; }
.case-study .main .container_left .point_section .point_right .point_text { font-size: 1.2rem; margin-top: 8px; margin-bottom: 6px; line-height: 1.8; }
@media (max-width: 750px) { .case-study .main .container_left .point_section .point_right { float: none; width: 670px; margin: 0 auto; padding: 60px 0 0; border-left: none; }
  .case-study .main .container_left .point_section .point_right .title span { line-height: 1.2; margin-left: 32px; }
  .case-study .main .container_left .point_section .point_right .title_text { margin: 50px 0; }
  .case-study .main .container_left .point_section .point_right .point { width: 114px; }
  .case-study .main .container_left .point_section .point_right .point_text { margin: 15px 0 0; } }
.case-study .main .container_right { width: 170px; float: right; overflow: hidden; }
@media (max-width: 750px) { .case-study .main .container_right { width: 670px; margin: 0 auto 40px; float: none; } }
.case-study .main .container_right .case_right_box { overflow: hidden; position: relative; width: 142px; height: 1000px; float: right; text-align: center; }
@media (max-width: 750px) { .case-study .main .container_right .case_right_box { width: 100%; height: inherit; } }
.case-study .main .container_right .case_right_box > img { width: 96px; margin-bottom: 45px; }
@media (max-width: 750px) { .case-study .main .container_right .case_right_box > img { float: left; width: 190px; margin: 22px 0 0 23px; } }
.case-study .main .container_right .case_right_box ul { position: absolute; right: 1px; top: 120px; writing-mode: vertical-rl; list-style-type: none; border-right: solid 1px #dddccf; }
.case-study .main.us .container_right .case_right_box ul { writing-mode: inherit; border-right: none; border-top: solid 1px #dddccf; }

@media (max-width: 750px) { .case-study .main .container_right .case_right_box ul { position: static; float: right; border-width: 2px; } }
@media (min-width: 751px) { .case-study .main .container_right .case_right_box ul { height: 308px; }
  .case-study .main .container_right .case_right_box ul li { float: left; width: 35px; line-height: 35px; } }
@media (min-width: 751px) { .case-study .main.us .container_right .case_right_box ul { height: 229px; }
  .case-study .main.us .container_right .case_right_box ul li { float: inherit; width: 141px } }

.case-study .main .container_right .case_right_box ul li a { height: 308px; position: relative; display: block; padding-top: 33px; text-decoration: none; width: 35px; line-height: 35px; border-left: solid 1px #dddccf; -webkit-transition: .4s; transition: .4s; color: inherit; }
.case-study .main.us .container_right .case_right_box ul li a { height: 53px; padding-top: 0; padding-left: 20px; width: 141px; border-left: 0; border-bottom: solid 1px #dddccf}
.case-study .main.us .container_right .case_right_box ul li:last-child a { height: 66px}

@media (max-width: 750px) { .case-study .main    .container_right .case_right_box ul li a            { height: 600px; padding-top: 58px; width: 68px; line-height: 68px; border-width: 2px; } }
@media (max-width: 750px) { .case-study .main.us .container_right .case_right_box ul li:last-child a { height: 132px}
  .case-study .main.us .container_right .case_right_box ul li a                                      { height: 106px; padding-top: 0; padding-left: 58px; width: 282px } }
.case-study .main .container_right .case_right_box ul li a:after { -webkit-transition: .3s; transition: .3s; opacity: 1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/case-study/circle_link.png) no-repeat; background-size: 10px; background-position: center 10px; }
.case-study .main.us .container_right .case_right_box ul li a:after { background-position: 3px 12px; }
@media (max-width: 750px) { .case-study .main .container_right .case_right_box ul li a:after { background-size: 20px; background-position: center 18px; } }
@media (max-width: 750px) { .case-study .main.us .container_right .case_right_box ul li a:after { background-position: 6px 24px; } }
.case-study .main .container_right .case_right_box ul li a img { width: 68px; position: absolute; left: 0; top: 33px; -webkit-transition: .5s; transition: .5s; }
.case-study .main.us .container_right .case_right_box ul li a img { width: auto; left: 18px; top: 12px}
@media (max-width: 750px) { .case-study .main    .container_right .case_right_box ul li a img { top: 58px; } }
@media (max-width: 750px) { .case-study .main.us .container_right .case_right_box ul li a img { top: 22px; left: 34px } }
@media (min-width: 751px) { .case-study .main    .container_right .case_right_box ul li a:hover { background-color: #fff; background-image: inherit; padding-top: 12px; opacity: 1; }
  .case-study .main .container_right .case_right_box ul li a:hover:after { opacity: 0; }
  .case-study .main .container_right .case_right_box ul li a:hover img { top: 13px; }
  .case-study .main.us .container_right .case_right_box ul li a:hover img { top: 12px; left: 9px }
  .case-study .main.us .container_right .case_right_box ul li:nth-of-type(1) a img { height: 29px}
  .case-study .main.us .container_right .case_right_box ul li:nth-of-type(2) a img { height: 27px}
  .case-study .main.us .container_right .case_right_box ul li:nth-of-type(3) a img { height: 28px}
  .case-study .main.us .container_right .case_right_box ul li:nth-of-type(4) a img { height: 45px}
  }

ol.accordion      { width: 100%; margin:0 auto; padding: 0px}
ol.accordion span { color: #fff; background: #834cb1; border-radius: 4px}
ol.accordion > li { margin: 0; padding: 0; border: 0; transition: .3s; list-style: none}
ol.accordion > li:hover      { border: 1px solid #000; border: none;}
ol.accordion > li:hover span { background: #000}
ol.accordion p    { text-align: left; font-size: 1.2rem; width: 580px; margin: 0 auto; padding: 17px 0 6px !important; color: #231815}
ol.accordion span { display:block; width: 159px; padding: 1px 0 2px; text-align: center; font-size: 12px}
@media (max-width: 750px) { ol.accordion span { width: 44%; font-size: 1.1rem} }
ol.accordion ul   { display:none;}
ol.accordion > li {}
ol.accordion > li > div  { position: relative; cursor: pointer}
ol.accordion > li > div > span { position: absolute; bottom: 0; right: 32px; transition: .3s;}
@media (max-width: 750px) { ol.accordion > li > div > span { right: 0}
  ol.accordion > li > div > span.us { bottom: -30px} }
ol.accordion > li:hover > div > span { background: #000; opacity: 1}
ol.accordion > li > div > span sep.close { display: none;}
ol.accordion > li > div > span.open {}
ol.accordion > li > div > span.open sep.open { display: none;}
ol.accordion > li > div > span.open sep.close { display: inline}
ol.accordion > li > ul { padding: 20px 0}
ol.accordion > li > ul > li { width: 580px; margin: 0 auto; border: 1px solid rgba(0,0,0,.1); border-radius: 4px; padding: 12px 15px 12px 18px; background: rgba( 153, 153, 153, .1); list-style: none; text-align: left; font-size: 1.2rem; color: #231815}
@media (max-width: 750px) { ol.accordion > li > ul > li { width: 100%; border-radius: 8px; padding: 12px 28px} }

/*# sourceMappingURL=case-study.css.map */