@charset "UTF-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('reset.css');
@import url('basic.css');
/* ========================================================================

  /csr/css/style.css

======================================================================== */
body { color:#232323; letter-spacing:0.05em; font-family:'Noto Sans JP', sans-serif; }
hr { display:none; }
ul { list-style:none; }
p { margin-bottom:1.5em; line-height:calc(13/8); }
p:last-child { margin-bottom:0; }
* { box-sizing:border-box; }
a { color:#232323; text-decoration:none; }

.photo p { font-size:0; }

span.super { font-size:1.2rem; }
p.note { font-size:1.4rem; }

/************************************************************************
  header
************************************************************************/
header { padding:0; width:100%; height:100vh; position:relative; }
/* 202602変更 | header::before */
.h1-title_MainV { padding:calc(122/1440*100vw) 0 0; width:calc(568/1440*100vw); background:url('../images/main_image_text.svg') no-repeat; background-size:100% auto; display:block; position:fixed; bottom:calc(170/1440*100%); left:calc(170/1440*100%); z-index: 1; overflow: hidden; text-indent: 100%; white-space: nowrap; }
header::after { content:''; padding:0; width:calc(1360/1440*100%); height:100vh; background:url('../images/main_image.jpg') no-repeat; background-size:cover; position:fixed; top:0; right:0; display:block; z-index:0; }
header .contents { max-width:initial; }

/* h1 */
/* 202602変更 | header h1 */
header .p-title_header { padding:calc(100/1440*100%) 0 0; width:calc(430/1440*100%); height:0; background:url('../images/logo.png') no-repeat; background-size:100% auto; font-size:0; position:absolute; top:0; left:0; z-index:1; }
/* 202602変更 | header h1 a */
header .p-title_header a { margin:auto; width:100%; height:100%; display:block; position:absolute; top:0; bottom:0; }
/* 202602変更 | body#index header h1 a */
body#index header .p-title_header a { pointer-events:none; }

/* ============ tablet ============ */
@media(max-width:768px){
header { padding-top:0; width:100%; min-height:100vh; min-height:calc(var(--vh2, 1vh) * 100); }
/* 202602変更 | header::before */
.h1-title_MainV { padding-top:0; width:calc(459/768*100vw); height:calc(252/768*100vw); background-image:url('../images/main_image_text_sp.svg'); top:auto; bottom:calc(50/1024*100vh); left:calc(40/768*100vw); }
header::after { padding-top:0; width:100%; height:100%; background-image:url('../images/main_image_sp.jpg'); background-position:center; }
header::after { padding-top:0; width:100%; min-height:100vh; min-height:calc(var(--vh2, 1vh) * 100); background-image:url('../images/main_image_sp.jpg'); background-position:center; }
}
/* ============ smart phone ============ */
@media(max-width:750px){
header { padding-top:0; width:100%; min-height:100vh; min-height:calc(var(--vh2, 1vh) * 100); }
/* 202602変更 | header::before */
.h1-title_MainV { padding-top:0; width:calc(621/750*100vw); height:calc(340/750*100vw); background-image:url('../images/main_image_text_sp.svg'); top:auto; bottom:calc(155/1200*100vh); left:calc(40/750*100vw); }
header::after { padding-top:0; width:100%; min-height:100vh; min-height:calc(var(--vh2, 1vh) * 100); background-image:url('../images/main_image_sp.jpg'); background-position:center; }
/* 202602変更 | header h1 */
header .p-title_header { padding-top:0; width:calc(430/750*100vw); height:calc(100/750*100vw); background-color:#ffffff; }
}
/************************************************************************
  .scrolldown
************************************************************************/
.scrolldown { width:11px; height:152px; position:absolute; bottom:-75px; left:calc(35/1440*100%); }
.scrolldown span { width:12px; height:96px; background:url('../images/scroll_down.svg') no-repeat; font-size:0; display:block; position:absolute; top:-96px; }
.scrolldown::after{ content:''; margin:auto; width:4px; height:45px; background:url('../images/down_arrow.svg') no-repeat; position:absolute; right:0; left:4px; animation:pathmove 1.4s ease-in-out infinite; opacity:0; }

@keyframes pathmove{
  0% { height:0; top:0; opacity:0; }
 30% { height:45px; opacity:1; }
100% { height:0; top:65px; opacity:0; }
}
/************************************************************************
  #nav-drawer
************************************************************************/
#nav-drawer { position:absolute; top:calc(45/1440*100%); right:calc(80/1440*100%); z-index:10; }
.nav-unshown { display:none; }

/* #nav-input ================== */
#nav-input:checked ~ #nav-open { display:flex; justify-content:center; align-items:center; position:fixed; right:0; z-index:9990; transition:1s ease-in-out; }
#nav-input:checked ~ #nav-open span { width:calc(30/750*100vw); height:calc(30/750*100vw); background:url('../images/btn_close.svg') no-repeat; background-size:100% auto; display:block; }
#nav-input:checked ~ #nav-open img { display:none; }

/* チェックが入ったら表示 ================== */
#nav-input:checked ~ #nav-close { display:block; opacity:.5; }
#nav-input:checked ~ #nav-content { -webkit-transform:translateY(0%); transform:translateY(0%); }

/* #nav-open ================== */
#nav-open { background-color:rgba(0,0,0,0.8); display:none; }
#nav-open img { display:none; }

/* #nav-close ================== */
#nav-close { display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:10; opacity:0; transition:.3s ease-in-out; }

/* ============ smart phone ============ */
@media screen and (max-width:768px){

#nav-drawer { width:100%; position:absolute; top:0; right:0; }

/* #nav-open ================== */
#nav-open { margin:0; padding:0; width:calc(88/750*100vw); height:calc(88/750*100vw); font-size:0; position:fixed; top:0; right:0; display:flex; justify-content:center; align-items:center; z-index:9990; }
#nav-open:hover { cursor:pointer; }
#nav-open:hover { cursor:pointer; }
#nav-open img { width:calc(38/750*100vw); height:auto; display:inline; cursor:pointer; }
}
/************************************************************************
  #nav-content
************************************************************************/
ul#nav-content  { display:flex; }
ul#nav-content li { margin-right:2em; font-size:1.6rem; }
ul#nav-content li:last-child { margin-right:0; }
ul#nav-content li a { color:#ffffff; text-decoration:none; }

/* current */
body#index #nav-content .nav-home a { text-decoration:underline; pointer-events:none; }
body.ability #nav-content .nav-ability a { text-decoration:underline !important; pointer-events:none; }
body#example #nav-content .nav-example a { text-decoration:underline !important; pointer-events:none; }
body.example #nav-content .nav-example a { text-decoration:underline !important; }


/* ============ tablet ============ */
@media screen and (max-width:768px){
#nav-drawer { top:calc(25/1440*100%); }
ul#nav-content li { font-size:1.4rem; }
}

/* ============ smart phone ============ */
@media screen and (max-width:768px){
ul#nav-content { margin:0; padding-top:calc(125/750*100vw); width:100%; height:100vh;  background-color:rgba(12,96,60,0.9); display:block !important; position:fixed; top:0; right:0; z-index:100; transition:.3s ease-in-out; transform:translateY(-105%); flex-direction:column; overflow:hidden; }
ul#nav-content li { width:100%; height:calc(85/750*100vw); }
ul#nav-content li a { padding:0 calc(30/750*100vw); display:flex; align-items:center; }
ul#nav-content img { display:none; }
}
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; padding:calc(120/1440*100%) 0; width:auto; max-width:1280px; }
/* ============ smart phone ============ */
@media(max-width:750px){
.contents { padding:calc(120/750*100vw) 0; }
}
/************************************************************************
  main
************************************************************************/
main { position:relative; z-index:1; background:#ffffff; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
main { /*overflow:hidden;*/ }
}
/************************************************************************
  section
************************************************************************/
main section {  }
main section h2 { margin:0 auto calc(65/1280*100%); }
main section h3 { font-size:1.6rem; }
main section h4 { font-size:1.6rem; }
main section h2 span { display:none; }
main section p { font-size:1.6rem; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
main section h3 { font-size:calc(28/750*100vw); }
main section p { font-size:calc(24/750*100vw); }
}
/************************************************************************
  #about-index
************************************************************************/
#about-index .contents { display:flex; /*justify-content:space-between;*/ }
/* 202602変更 | #about-index h2 */
#about-index .h2-title_about { margin:0; padding:calc(463/1280*100%) 0 0; width:calc(80/1280*100%); background:url('../images/h2_about_index.svg') no-repeat; background-size:100% auto; position:relative; left:calc(260/1280*100%); }
/* 202602変更 | #about-index h2::after */
#about-index .h2-title_about::after { content:''; padding-top:calc(222/80*100%); width:calc(682/80*100%); background:url('../images/h2_about_index_after.svg') no-repeat; background-size:100% auto; display:block; position:absolute; bottom:calc(140/1280*100%); left:calc(-200/80*100%); z-index:-1; }
/* 202602変更 | #about-index h3 */
#about-index .h3-title_about { margin-bottom:20px; line-height:calc(18/8); }
#about-index p { font-feature-settings:'palt'; line-height:calc(16/7); font-size:1.4rem; }
#about-index .text { padding:calc(200/1280*100%) 0 0; width:calc(360/1280*100%); left:calc(350/1440*100%); position:relative; }

#about-index p.ditail { margin-top:70px; }
#about-index a.link { width:calc(315/350*100%); font-feature-settings:'initial'; }

/* ============ tablet ============ */
@media screen and (max-width:768px){
/* 202602変更 | #about-index h2 */
#about-index .h2-title_about { left:calc(100/1280*100%); }
/* 202602変更 | #about-index h2::after */
#about-index .h2-title_about::after { left:calc(-40/80*100%); z-index:-1; }
#about-index .text { width:calc(440/1280*100%); left:calc(180/1440*100%); }
}

/* ============ smart phone ============ */
@media(max-width:750px){
#about-index .contents { width:calc(670/750*100vw); flex-direction:column; }
/* 202602変更 | #about-index h2 */
#about-index .h2-title_about { margin:calc((410 - 120)/750*100vw) auto calc(110/750*100vw) 0; padding-top:0; width:calc(520/750*100vw); height:calc(257/750*100vw); background-image:url('../images/h2_about_index_sp.svg'); left:0; }
/* 202602変更 | #about-index h2::after */
#about-index .h2-title_about::after { padding-top:0; width:calc(608/750*100vw); height:calc(579/750*100vw); background-image:url('../images/h2_about_index_after_sp.svg'); bottom:calc(-140/750*100vw); left:0; } 
/* 202602変更 | #about-index h3 */
#about-index .h3-title_about  { margin-bottom:calc(20/490*100%); line-height:calc(30/15); font-size:calc(30/750*100vw); }
#about-index .text { margin-bottom:calc(120/750*100vw); padding:0; width:100%; left:0; }
#about-index #slider {  }
#about-index p { line-height:calc(30/15); font-size:calc(30/750*100vw); }
#about-index p.ditail { margin-top:calc(50/750*100vw) }
#about-index a.link { width:calc(315/350*100%); font-size:calc(30/750*100vw); font-feature-settings:'initial'; }
}
/************************************************************************
  a.link
************************************************************************/
a.link { padding:20px 25px; color:#232323; text-decoration:none; line-height:1; display:flex; align-items:center; justify-content:space-between; font-size:1.6rem;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x; }
a.link::after { content:''; width:45px; height:4px; background:url('../images/icon_link.svg') no-repeat; background-size:100% auto; display:inline-block; }
a.link.pe-none::after { opacity:0.2; }
a.link:hover::after { transform:translate(5px,0); }
/* ============ smart phone ============ */
@media(max-width:750px){
a.link { font-size:calc(24/750*100vw); }
}
/************************************************************************
  #slider
************************************************************************/
#slider { margin:calc(35/1280*100%) 40px 0 auto; width:calc(490/1280*100%); }
#slider ul li { margin-right:10px; }
#slider ul li:last-child { margin-right:0; }

.slick-arrow { margin:auto; padding:calc(67/490*100%) 0 0; width:calc(35/490*100%); height:0; position:absolute; cursor:pointer; }
.slick-arrow img { margin:auto; width:100%; height:auto; position:absolute; top:0; bottom:0; }
.slick-next { top:calc(190/490*100%); right:calc(-40/490*100%); }
.slick-prev { top:calc(190/490*100%); left:calc(-50/490*100%); }
.slick-disabled { display:none !important; }

/* ============ smart phone ============ */
@media(max-width:750px){
#slider { margin:0 auto calc(40/490*100%); width:calc(670/750*100vw); text-align:center; }
#slider ul li { margin-right:calc(20/750*100vw); margin-left:auto; }
#slider ul li img { margin:auto; width:calc(325/750*100vw); }

.slick-arrow { padding-top:0; width:calc(35/750*100vw); height:calc(67/750*100vw); bottom:0; }
.slick-arrow img { position:static; }
.slick-next { top:0; right:calc(-20/750*100vw); }
.slick-prev { top:0; left:calc(-20/750*100vw); }
}
/************************************************************************
  .bg-gray
************************************************************************/
.bg-gray { background-color:#f5f5f5; }
/************************************************************************
  #works-index
************************************************************************/
/* 202602変更 | #works-index h2 */
#works-index .h2-title_works { margin-bottom:calc(20/1280*100%); padding:calc(58/1280*100%) 0 0; width:calc(217/1280*100%); background:url('../images/h2_works_index.svg') no-repeat; background-size:100% auto; }
/* 202602変更 | #works-index h3 */
#works-index .h3-title_works { margin-bottom:calc(60/1280*100%); text-align:center; } 
#works-index div.photo { position:relative; }
#works-index div.photo::before { content:''; width:calc(31/400*100%); background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; top:calc(35/400*100%); left:calc(-15/400*100%); }
#works-index a.link { padding:30px 25px; }

.photo { font-size:0; }

/* #detached-house ====== */
#detached-house { margin-bottom:calc(80/1280*100%); display:flex; justify-content:space-between; align-items:center; }
#detached-house div.photo { margin:0 0 0 calc(200/1280*100%); width:calc(400/1280*100%); }
#detached-house div.photo::before { padding:calc(98/400*100%) 0 0; width:calc(31/400*100%); background-image:url('../images/detached_house.svg'); }
#detached-house nav { width:calc(620/1280*100%); }
#detached-house nav ul { width:calc(430/620*100%);
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left top;
background-repeat:repeat-x;
}
/* #works-index .col2 ====== */
#works-index .col2 { margin:0 calc(200/1280*100%); justify-content:space-between; }
#works-index .col2 .item { width:calc(400/(1280 - 400)*100%); }

#apartment div.photo::before { padding:calc(141/400*100%) 0 0; background-image:url('../images/apartment.svg'); }
#old-house div.photo::before { padding:calc(166/400*100%) 0 0; background-image:url('../images/old_house.svg'); }

/* ============ smart phone ============ */
@media(max-width:750px){
#works-index .contents { padding-bottom:calc(40/750*100vw); }
/* 202602変更 | #works-index h2 */
#works-index .h2-title_works { padding-top:0; width:calc(217/750*100vw); height:calc(58/750*100vw); }
#works-index div.photo::before { width:calc((31*2)/750*100vw); background-size:100% auto; top:calc(35/750*100vw); left:0; }

/* #detached-house ====== */
#detached-house { margin-bottom:calc(80/750*100vw); flex-direction:column; }
#detached-house div.photo { margin:0; width:100%; }
#detached-house div.photo::before { padding:calc((98*2)/750*100vw) 0 0; width:calc((31*2)/750*100vw); }
#detached-house nav { width:90%; }
#detached-house nav ul { width:100%; background-image:none; }
#detached-house nav ul li { justify-content:flex-start; }
#works-index a.link { padding-left:1em; }

/* #works-index .col2 ====== */
#works-index .col2 { margin:0; }
#works-index .col2 .item { margin-bottom:calc(80/750*100vw); width:100% }

#apartment div.photo::before { padding:0; height:calc((141*2)/750*100vw); }
#old-house div.photo::before { padding:0; height:calc((166*2)/750*100vw); }
}
/************************************************************************
  .openable
************************************************************************/
.openable { margin:auto; width:calc(880/1280*100%); background-color:#ffffff; list-style-position:inside;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left top;
background-repeat:repeat-x;
}
.openable > li { padding:45px 60px 45px 20px; position:relative; z-index:0; cursor:pointer;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
.openable > li::after { content:''; margin:auto; width:20px; height:20px; background:url('../images/icon_plus.svg') no-repeat; display:inline-block; position:absolute; top:50px; right:20px; }
.openable > li.active::after { background-image:url('../images/icon_minus.svg'); top:60px; }
/* 202602変更 | .openable > li p.text */
.openable > li .h4-title_pointOpen { margin:-1.5em 0 0 1.3em; padding-right:50px; line-height:1.5; font-weight: normal; }

/* .box */
.openable .box { margin-top:50px; padding:40px 40px 20px; display:none; }
.openable > li.active .box { display:block; }
/* ============ smart phone ============ */
@media(max-width:750px){
.openable { width:100%; }
.openable > li { padding-left:1.3em; font-size:calc(28/750*100vw); }
.openable > li::marker { line-height:1.5; font-size:calc(24/750*100vw); }
.openable > li::after { margin:auto; width:calc((20*1.5)/750*100vw); height:calc((20*1.5)/750*100vw); background-size:100% auto; top:0; bottom:0; right:calc(40/720*100vw); }
/* 202602変更 | .openable > li p.text */
.openable > li .h4-title_pointOpen { margin:0 0 0 1.3em; padding-right:calc(100/750*100vw); line-height:1.5; display:inline-block; position:relative; top:-1.6em; }
.openable > li > p.text { margin-bottom:0; }
/* .box */
.openable .box { margin-top:calc(50/750*100vw); padding:calc(40/750*100vw); padding-left:0; display:none; }
}
/************************************************************************
  #point
************************************************************************/
#point { background:url('../images/bg_point.jpg') no-repeat top center; background-size:100% auto; }
/* 202602変更 | #point h2 */
#point .h2-title_point { margin-left:0; margin-bottom:calc(50/1280*100%); padding:calc(58/1280*100%) 0 0; width:calc(181/1280*100%); background:url('../images/h2_point.svg') no-repeat; height:0; background-size:100% auto; }
/* 202602変更 | #point h3 */
#point .h3-title_point { margin-bottom:calc(50/1280*100%); line-height:calc(21/12); font-size:24px; }

#point ol.openable > li { padding:45px 0 45px 150px; }
#point ol > li::before { content:''; margin:auto; width:120px; height:120px; background-repeat:
no-repeat; background-size:100% auto; display:inline-block; position:absolute; top:0; left:0; }

#point ol > li:nth-child(1)::before { background-image:url('../images/point_001.jpg'); }
#point ol > li:nth-child(2)::before { background-image:url('../images/point_002.jpg'); }
#point ol > li:nth-child(3)::before { background-image:url('../images/point_003.jpg'); }
#point ol > li:nth-child(4)::before { background-image:url('../images/point_004.jpg'); }

/* table */
#point table { margin-bottom:calc(35/1280*100%); width:100%; font-size:1.4rem; }
#point table th { padding:20px 0; width:180px; background-color:#888888; color:#ffffff; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; text-align:center; font-weight:normal; vertical-align:middle; font-feature-settings:'palt' 1; }
#point table tr:nth-child(1) th { padding:10px 0; width:300px; }
#point table th.none { width:180px !important; background-color:transparent; }
#point table td { padding:17px 0 15px; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; text-align:center; vertical-align:middle; }
#point table tr:nth-child(2n) td { background-color:#f6f6f6; }
#point table tr:nth-child(2n-1) td { background-color:#f1f2f4; }
#point table td ul.disc { margin:0 15px; text-align:left; }

/* 202602変更 | #point ol > li h4 */
#point ol > li .p-title_point { margin-bottom:1em; font-weight: bold; font-size:1.6rem; }
#point ol > li ol { margin-left:1.2em; }
#point ol > li ol li { margin-bottom:1.5em; text-indent:-1.2em; }
#point ol > li ol li::before { display:none; }
#point ol > li ol li strong { margin-left:2rem; margin-bottom:0.8em; display:inline-block; }
#point ol > li ol li p { text-indent:0; }
/* dl */
#point ol > li dl { margin-bottom:30px; font-size:1.4rem; }
#point ol > li dl dt { padding:10px 30px; background-color:#888888; color:#ffffff; line-height:1; }
#point ol > li dl dd { margin-bottom:20px; padding:20px 30px; background-color:#ffffff; color:#232323; line-height:calc(11.5/6.5); }

/* 202602変更 | #point ol > li h4 + ul li */
#point ol > li .p-title_point + ul li { margin-bottom:1.5em; }

/* .col2 */
#point ol > li .col2 { justify-content:space-between; }
#point ol > li .col2 p.pict { width:48%; }
#point ol > li .col2 p.txt { width:50%; }

/* .note */
#point p.note { padding-top:1em; font-size:1.4rem; }


/* ============ tablet ============ */
@media screen and (max-width:768px){
/* 202602変更 | #point h2 */
#point .h2-title_point { margin-left:40px; }
/* 202602変更 | #point h3 */
#point .h3-title_point { margin-left:40px; }

#point ol > li .col2 { flex-direction:column; }
#point ol > li .col2 p.pict { width:100%; }
#point ol > li .col2 p.txt { width:100%; }
#point ol > li ol li strong { margin-top:-1.5em; margin-left:0; text-indent:0; }

#point .openable .box { margin-top:0; }

#point-pict-001 { margin-bottom:40px; }
}

/* ============ smart phone ============ */
@media(max-width:750px){
#point { background-image:none; position:relative; }
#point::before { content:''; margin:auto; width:100%; height:100%; background:url('../images/bg_point_sp.jpg') no-repeat center; background-size:100% auto; position:absolute; display:block; z-index:-1; opacity:0.4 }

/* 202602変更 | #point h2 */
#point .h2-title_point { margin:auto auto calc(40/750*100vw); padding-top:0; width:calc(181/750*100vw); height:calc(58/750*100vw); }
/* 202602変更 | #point h3 */
#point .h3-title_point { margin-bottom:calc(40/750*100vw); text-align:center; }
#point ol.openable { counter-reset:num; list-style-type:none!important; }
#point ol.openable > li { padding:0 0 0 calc(150/750*100vw); height:auto; /* height:calc(120/750*100vw); max-height:calc(120/750*100vw);*/ line-height:1.5; }
/*#point ol.openable > li.active { height:auto; max-height:initial; }*/
/* 202602変更 | #point ol.openable > li > p.text */
#point ol.openable > li > .h4-title_pointOpen { margin-top:0; padding:calc(15/750*100vw) calc(100/750*100vw)0 0; height:calc(120/750*100vw); top:0; font-size:calc(28/750*100vw); text-indent:0; }
/* 202602変更 | #point ol.openable > li > p.text::before */
#point ol.openable > li > .h4-title_pointOpen::before { content:counter(num)'. '; counter-increment:num; margin-left:-1.2em; }

#point ol > li::before { width:calc(120/750*100vw); height:calc(120/750*100vw); }
#point ol > li ol li strong { margin-top:-1.5em; margin-left:0; text-indent:0; }
#point ol > li p { font-size:calc(28/750*100vw); text-indent:0; }

#point ol > li .col2 p.pict { width:100%; }
#point ol > li .col2 p.txt { width:100%; }

}
/************************************************************************
  #faq
************************************************************************/
#faq {  }
#faq .contents { position:relative; }
/* 202602変更 | #faq h2 */
#faq .h2-title_faq { padding-top:calc(107/1280*100%); width:calc(68/1280*100%); background:url('../images/h2_faq.svg') no-repeat; background-size:100% auto; position:absolute; left:calc(200/1280*100%); }
/* 202602変更 | #faq h3 */
#faq .h3-title_faq { margin:0 calc(200/1280*100%) calc(40/1280*100%) calc(340/1280*100%); font-size:2rem; }

/* ul */
#faq ul.openable { margin-left:calc(340/1280*100%); margin-right:calc(200/1280*100%); width:auto; background-color:transparent; }
#faq ul.openable > li { padding-left:2em; text-indent:-1.2em; list-style:none; }

#faq ul.openable > li::before { content:''; margin-left:-1.3em; margin-right:0.5em; padding-top:15px; width:12px; background:url('../images/icon_q.svg') no-repeat; background-size:100% auto; text-indent:1.3em; display:inline-block; vertical-align:middle; }

#faq ul.openable > li .box { margin-top:0; margin-left:-20px; padding-top:10px; padding-right:0; padding-left:0; text-indent:0; }
#faq ul.openable > li .box::before { content:''; margin-right:0.2em; margin-left:-1.3em; width:12px; height:12px; background:url('../images/icon_a.svg') no-repeat; text-indent:1.3em; display:inline-block; }
#faq ul.openable > li .box p:first-child { margin-top:-1.5em; }

/* .vertical-writing */
.vertical-writing { -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }

ol.vertical-writing { list-style:none; display:flex; flex-direction:column; flex-direction:column-reverse; overflow:hidden; }
ol.vertical-writing li { padding:30px 0 0; width:60px; height:320px; background:#ffffff; border-right:1px solid #eeeeee; display:flex; align-items:center; position:relative; font-size:1.4rem; }
ol.vertical-writing li::before { content:''; margin-bottom:20px; width:25px; height:48px; background-repeat:no-repeat; background-size:100% auto; }
ol.vertical-writing li::after { content:''; width:60px; height:1px; background-color:#0c603c; position:absolute; top:73px; left:30px; z-index:1; }
ol.vertical-writing li:last-child::after { display:none; }

ol.vertical-writing li:nth-child(1)::before { background-image:url('../images/step_01.svg'); }
ol.vertical-writing li:nth-child(2)::before { background-image:url('../images/step_02.svg'); }
ol.vertical-writing li:nth-child(3)::before { background-image:url('../images/step_03.svg'); }
ol.vertical-writing li:nth-child(4)::before { background-image:url('../images/step_04.svg'); }
ol.vertical-writing li:nth-child(5)::before { background-image:url('../images/step_05.svg'); }
ol.vertical-writing li:nth-child(6)::before { background-image:url('../images/step_06.svg'); }
ol.vertical-writing li:nth-child(7)::before { background-image:url('../images/step_07.svg'); }
ol.vertical-writing li:nth-child(8)::before { background-image:url('../images/step_08.svg'); }
ol.vertical-writing li:nth-child(9)::before { background-image:url('../images/step_09.svg'); }
ol.vertical-writing li:nth-child(10)::before { background-image:url('../images/step_10.svg'); }
ol.vertical-writing li:nth-child(11)::before { background-image:url('../images/step_11.svg'); }

/* dl */
#faq dl { margin-bottom:30px; font-size:1.4rem; }
#faq dl dt { padding:10px 30px; background-color:#888888; color:#ffffff; line-height:1; }
#faq dl dd { margin-bottom:20px; padding:20px 30px; background-color:#ffffff; color:#232323; line-height:calc(11.5/6.5); }

/* ============ tablet ============ */
@media screen and (max-width:768px){
#faq ul.openable > li { padding:calc(40/750*100vw) calc(100/750*100vw) calc(40/750*100vw) calc(60/750*100vw); text-indent:-1.3em; }
.openable > li.active::after { top:calc(80/750*100vw); bottom:auto; }
#faq ul.openable > li .box { margin-left:0; padding-right:0; padding-left:0; text-indent:0; }

#faq ol.vertical-writing { -ms-writing-mode:horizontal-tb; writing-mode:horizontal-tb; }

/* .vertical-writing */
ol.vertical-writing { flex-direction:column; }
ol.vertical-writing li { padding:0; width:100%; height:calc(100/750*100vw); border-bottom:1px solid #eeeeee; border-right:0;  }
ol.vertical-writing li::before { margin:0 calc(20/750*100vw); padding-top:0; width:calc((46*2)/750*100vw); height:calc((29*2)/750*100vw); /*top:0; bottom:0;*/ left:calc(20/750*100vw) }
ol.vertical-writing li::after { width:1px; height:calc(100/750*100vw); top:calc(50/750*100vw); left:calc(103/750*100vw); }

ol.vertical-writing li:nth-child(1)::before { background-image:url('../images/step_01_sp.svg'); }
ol.vertical-writing li:nth-child(2)::before { background-image:url('../images/step_02_sp.svg'); }
ol.vertical-writing li:nth-child(3)::before { background-image:url('../images/step_03_sp.svg'); }
ol.vertical-writing li:nth-child(4)::before { background-image:url('../images/step_04_sp.svg'); }
ol.vertical-writing li:nth-child(5)::before { background-image:url('../images/step_05_sp.svg'); }
ol.vertical-writing li:nth-child(6)::before { background-image:url('../images/step_06_sp.svg'); }
ol.vertical-writing li:nth-child(7)::before { background-image:url('../images/step_07_sp.svg'); }
ol.vertical-writing li:nth-child(8)::before { background-image:url('../images/step_08_sp.svg'); }
ol.vertical-writing li:nth-child(9)::before { background-image:url('../images/step_09_sp.svg'); }
ol.vertical-writing li:nth-child(10)::before { background-image:url('../images/step_10_sp.svg'); }
ol.vertical-writing li:nth-child(11)::before { background-image:url('../images/step_11_sp.svg'); }

}

/* ============ smart phone ============ */
@media(max-width:750px){
/* 202602変更 | #faq h2 */
#faq .h2-title_faq { margin:auto; padding-top:0; width:calc(68/750*100vw); height:calc(107/750*100vw); top:calc(80/750*100vw); left:calc(100/750*100vw); position:static; transform:rotate(-90deg); }
/* 202602変更 | #faq h3 */
#faq .h3-title_faq { margin:0 auto calc(40/750*100vw); text-align:center; }

#faq ul.openable { margin:0; }
#faq ul.openable > li { padding:calc(40/750*100vw) calc(100/750*100vw) calc(40/750*100vw) calc(60/750*100vw); text-indent:-1.3em; }
.openable > li.active::after { top:calc(80/750*100vw); bottom:auto; }
#faq ul.openable > li .box { margin-left:0; padding-right:0; padding-left:0; text-indent:0; }
#faq ol.vertical-writing { -ms-writing-mode:horizontal-tb; writing-mode:horizontal-tb; }

/* .vertical-writing */
ol.vertical-writing { flex-direction:column; }
ol.vertical-writing li { padding:0; width:100%; height:calc(100/750*100vw); border-bottom:1px solid #eeeeee; border-right:0;  }
ol.vertical-writing li::before { margin:0 calc(20/750*100vw); padding-top:0; width:calc((46*2)/750*100vw); height:calc((29*2)/750*100vw); /*top:0; bottom:0;*/ left:calc(20/750*100vw) }
ol.vertical-writing li::after { width:1px; height:calc(100/750*100vw); top:calc(50/750*100vw); left:calc(103/750*100vw); }

ol.vertical-writing li:nth-child(1)::before { background-image:url('../images/step_01_sp.svg'); }
ol.vertical-writing li:nth-child(2)::before { background-image:url('../images/step_02_sp.svg'); }
ol.vertical-writing li:nth-child(3)::before { background-image:url('../images/step_03_sp.svg'); }
ol.vertical-writing li:nth-child(4)::before { background-image:url('../images/step_04_sp.svg'); }
ol.vertical-writing li:nth-child(5)::before { background-image:url('../images/step_05_sp.svg'); }
ol.vertical-writing li:nth-child(6)::before { background-image:url('../images/step_06_sp.svg'); }
ol.vertical-writing li:nth-child(7)::before { background-image:url('../images/step_07_sp.svg'); }
ol.vertical-writing li:nth-child(8)::before { background-image:url('../images/step_08_sp.svg'); }
ol.vertical-writing li:nth-child(9)::before { background-image:url('../images/step_09_sp.svg'); }
ol.vertical-writing li:nth-child(10)::before { background-image:url('../images/step_10_sp.svg'); }
ol.vertical-writing li:nth-child(11)::before { background-image:url('../images/step_11_sp.svg'); }

/* dl */
#faq dl { margin-bottom:calc(30/750*100vw); font-size:1.4rem; }
#faq dl dt { padding:calc(10/750*100vw) calc(30/750*100vw); }
#faq dl dd { margin-bottom:calc(20/750*100vw); padding:calc(20/750*100vw) calc(30/750*100vw); }
}
/************************************************************************
  #contact-entrance
************************************************************************/
#contact-entrance {  }
/* 202602変更 | #contact-entrance h2 */
#contact-entrance .h2-title_contact { margin-bottom:calc(15/1280*100%); padding-top:calc(56/1280*100%); width:calc(270/1280*100%); background:url('../images/h2_contact.svg') no-repeat; background-size:100% auto; }
/* 202602変更 | #contact-entrance h3 */
#contact-entrance .h3-title_contact { margin-bottom:calc(70/1280*100%); text-align:center; }

/* ul */
#contact-entrance ul { margin:auto; width:calc(880/1280*100%); display:flex; align-items:flex-start;
background-image:linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 8px);
background-size:1px 8px;
background-position:left top;
background-repeat:repeat-y;
}
#contact-entrance ul li { margin:auto; padding:calc(45/1280*100%) 0; width:calc(100% / 3); height:340px; text-align:center; line-height:calc(11/7); font-size:1.4rem; position:relative;
background-image:linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 8px);
background-size:1px 8px;
background-position:right top;
background-repeat:repeat-y;
transition:all 1s ease-out;
}
#contact-entrance ul li:hover {  }

#contact-entrance ul li::before { content:''; margin:auto; /*padding-top:calc(99/(880 / 3)*100%); width:calc(99/(880 / 3)*100%);*/ width:99px; height:99px; background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; top:-40px; bottom:0; right:0; left:0; }
#contact-entrance ul li.web::before { background-image:url('../images/icon_web.svg'); }
#contact-entrance ul li.catalog::before { background-image:url('../images/icon_catalog.svg'); }
#contact-entrance ul li.tel::before { background-image:url('../images/icon_tel.svg'); }

#contact-entrance ul li.web:hover::before { background-image:url('../images/icon_web_on.svg'); }
#contact-entrance ul li.catalog:hover::before { background-image:url('../images/icon_catalog_on.svg'); }
#contact-entrance ul li.tel:hover::before { background-image:url('../images/icon_tel_on.svg'); }
/* a.link */
#contact-entrance a { padding-bottom:calc(190/(880/3)*100%); width:100%; background-image:none; line-height:1; justify-content:center; position:relative; display:flex; font-size:1.6rem; }
#contact-entrance a.link { padding-top:0; padding-bottom:calc(240/(880/3)*100%); }
#contact-entrance a.link::after { margin:auto; background-image:url('../images/icon_arrow_green.svg'); position:absolute; bottom:0; right:0; left:0; }
#contact-entrance ul li.tel a { pointer-events:none; }



span.tel-no { margin:0 auto calc(15/(880/3)*100%); width:191px; height:20px; background:url('../images/tel_no.svg') no-repeat; background-size:100% auto; color:#ffffff; font-size:0; display:inline-block; }
/* ============ smart phone ============ */
@media(max-width:768px){
/* 202602変更 | #contact-entrance h2 */
#contact-entrance .h2-title_contact { margin-bottom:calc(15/750*100vw); padding-top:0; width:calc(270/750*100vw); height:calc(56/750*100vw); }

/* ul */
#contact-entrance ul { flex-direction:column; background-image:none; }
#contact-entrance ul li { padding:calc(50/750*100vw) 0; width:100%; height:auto;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
#contact-entrance ul li::before { width:calc((90*2)/750*100vw); height:calc((90*2)/750*100vw); top:0; }
#contact-entrance a { padding-bottom:calc(230/750*100vw); width:100%; font-size:1.6rem; }
#contact-entrance a.link { padding-bottom:calc(280/750*100vw); }
#contact-entrance ul li.tel::before { top:calc(120/750*100vw); bottom:auto; }

span.tel-no a[href^="tel:"] { color:inherit; text-decoration:none; pointer-events:none; font-size:0 !important; display:none; }
}
/************************************************************************
  #limited-site
************************************************************************/
#limited-site { text-align:center; }
#limited-site .contents { padding-bottom:calc(60/1280*100%); position:relative; z-index:0; }
/* 202602変更 | #limited-site h2 */
#limited-site .h2-title_limited { margin-bottom:calc(30/1280*100%); line-height:calc(26/16); font-size:3.2rem; }
/* 202602変更 | #limited-site h2::after */
#limited-site .h2-title_limited::after { content:''; margin:calc(25/1280*100%) auto 0; padding-top:20px; width:35px; background:url('../images/icon_limited_site.svg') no-repeat; display:block; }
/* 202602変更 | #limited-site h3 */
#limited-site .h3-title_limited { margin:0 0 calc(15/470*100%); }
/* 202602変更 | #limited-site h3 span */
#limited-site .h3-title_limited span { padding:0 0.5em; background:linear-gradient(transparent 0%, #fff000 0%); display:inline-block; }

#limited-site article { padding:calc(30/470*100%) calc(15/470*100%); text-align:left;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
#limited-site .col2 { margin:calc(-50/1280*100%) calc(90/1280*100%) 0 calc(55/1280*100%); justify-content:space-between; align-items:center; }
#limited-site .item:nth-child(1) { width:calc(633/(1280 - 90 - 55)*100%); }
#limited-site .item:nth-child(1) img { width:100%; position:relative; z-index:-1; }
#limited-site .item:nth-child(2) { width:calc(470/(1280 - 90 - 55)*100%);
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left top;
background-repeat:repeat-x;
}

/* ============ tablet ============ */
@media(max-width:768px){
#limited-site .col2 { margin-top:0; }
}
/* ============ smart phone ============ */
@media(max-width:750px){
#limited-site .contents { padding-bottom:calc(60/750*100vw); }

/* 202602変更 | #limited-site h2 */
#limited-site .h2-title_limited { margin-bottom:calc(40/750*100vw); line-height:calc(26/16); font-size:calc(40/750*100vw); }
/* 202602変更 | #limited-site h3 */
#limited-site .h3-title_limited { margin-bottom:calc(20/750*100vw); font-size:calc(28/750*100vw); }
/* 202602変更 | #limited-site h3 span */
#limited-site .h3-title_limited span { background:linear-gradient(transparent 60%, #fff000 60%); display:inline; }
#limited-site p.lead { margin-bottom:calc(60/750*100vw); }
#limited-site p { font-size:calc(28/750*100vw); }
#limited-site p span { display:block; }

#limited-site .col2 { margin:0; justify-content:space-between; align-items:center; }
#limited-site .item { width:100% !important; }
#limited-site .item:nth-child(1) { margin-bottom:calc(40/750*100vw) }
#limited-site .item:nth-child(1) img { width:calc(580/750*100vw); }
}
/************************************************************************
  footer
************************************************************************/
footer { background-color:#ffffff; text-align:center; position:relative; z-index:1; }
footer .contents { padding:calc(60/1280*100%) 0; }
/*
footer p.logo { margin:auto auto calc(40/1280*100%); padding-top:calc(29/1280*100%); width:calc(351/1280*100%); background:url('../images/logo_footer.png') no-repeat; background-size:100% auto; font-size:0; }
footer p.logo span { display:none; }
*/
footer p.copyright { font-size:1.2rem; }

/* ============ smart phone ============ */
@media(max-width:768px){
footer .contents { padding:calc(60/750*100vw) 0 calc(140/750*100vw); }
footer p.logo { margin:auto auto calc(40/750*100vw); padding-top:0; width:calc((351*1.5)/750*100vw); height:calc((29*1.5)/750*100vw); }
footer p.copyright { font-size:calc(18/750*100vw); }
}
/************************************************************************
  #side-bana
************************************************************************/
#side-bana { position:fixed; right:0; top:400px; z-index:15; font-size:0; visibility:hidden; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
-ms-filter:"alpha( opacity=$number*100 )";
filter:alpha(opacity=0);
opacity:0;
}
#side-bana.fixed { -ms-filter:"alpha( opacity=$number*100 )"; filter:alpha(opacity=100); opacity:1; visibility:visible; }

#side-bana ul {  }
#side-bana ul li {  }
#side-bana ul li a { width:240px; height:80px; background-repeat:no-repeat; background-size:100% auto; font-size:0; display:block; }
#side-bana ul li a:hover { transition:0.5s; transform:translate(10px,0); }
#side-bana ul li.btn-catalog a { background-image:url('../images/btn_catalog.svg'); }
#side-bana ul li.btn-contact a { background-image:url('../images/btn_contact.svg'); }
#side-bana ul li.btn-case-study a { background-image:url('../images/btn_case_study.svg'); }

body#index .btn-case-study { display:none; }
body.ability .btn-case-study {  }
body.example .btn-case-study {  }


/* ============ smart phone ============ */
@media(max-width:768px){
#side-bana { margin:0px; width:100%; position:fixed; right:auto; top:auto; left:0; bottom:0; }
#side-bana ul { width:100%; display:flex; }
#side-bana ul li { width:50%; }
#side-bana ul li a { width:100%; height:calc(83/750*100vw); }
#side-bana ul li a:hover { transform:translate(0,0); }
#side-bana ul li.btn-catalog a {  }
#side-bana ul li.btn-contact a {  }

body#index #side-bana ul li a { height:calc(125/750*100vw); }

}
/************************************************************************
  #voice
************************************************************************/
#voice { text-align:center; }
#column #voice h3 { margin-bottom:calc(40/880*100%); height:auto; line-height:1; font-size:2.4rem; }
#column #voice h3 span { display:inline; }
#voice p { text-align:left; }

/* ul */
#voice nav ul { display:flex; justify-content:space-between; flex-wrap:wrap; }
#voice nav ul li { margin-bottom:calc(20/880*100%); width:calc(400/880*100%); }



/* ============ smart phone ============ */
@media(max-width:750px){
#column #voice h3 { margin-bottom:calc(40/880*100%); line-height:1.5; font-size:calc(44/750*100vw); }
#column #voice h3 span { display:block; }
#voice p { text-align:left; }
/* ul */
#voice nav ul { flex-direction:column; }
#voice nav ul li { margin-bottom:calc(20/750*100vw); width:100%; }
}