/*  header
=============================================== */

#header { margin-bottom:250px; padding-top:250px; }

#hd-logo { width:700px; margin:0 auto 30px auto; }
#hd-logo h1 { position:relative; width:100%; height:0; padding-top:9.53579%; }
#hd-logo h1 span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img2024/common/logo.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

#hd-txt { width:700px; margin:0 auto 40px auto; font-size:110%; line-height:170%; }
#hd-btnlink-notice { margin-bottom:0.5em; line-height:160%; }
#hd-btnlink { display:flex; justify-content:center; }
#hd-btnlink li { margin:0 0.25em; }
#hd-btnlink li a { display:block; width:100%; height:100%; box-sizing:border-box; border-radius:0.5em; font-size:130%; font-weight:500; color:#fff; text-decoration:none; box-shadow:0px 2px 3px rgba(0,0,0,0.4); /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #hd-btnlink li a:hover { opacity:0.5; text-decoration:none; } }
#hd-btn-dl a { background-color:var(--cl-black); padding:1.2em 2.0em; }
#hd-btn-inqr a { background-color:var(--cl-blue); padding:1.2em 3.0em; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#header { margin-bottom:20.0vw; padding-top:22.0vw; }
#hd-logo { width:70%; margin:0 15% 5.0vw 15%; }

#hd-txt { width:60%; margin:0 20% 6.0vw 20%; font-size:3.4vw; }

#hd-btnlink-notice { font-size:80%; }
#hd-btnlink li a { font-size:100%; }
#hd-btn-dl a,
#hd-btn-inqr a { padding:1.2em 2.0em; }

}



/*  problem
=============================================== */

#problem .box { width:980px; margin:0 auto; padding-bottom:40px; }
#problem .ttl { margin-bottom:70px; font-size:200%; }

#prb-case { display:flex; justify-content:center; margin-bottom:40px; }
#prb-case dl { width:250px; margin:0 38px; }
#prb-case dt { position:relative; margin-bottom:30px; line-height:130%; }
#prb-case dt::after { position:absolute; z-index:10; bottom:-48px; left:122px; display:block; content:""; width:7px; height:41px; background:url(../img2024/problem/problem_line.png) center center no-repeat; background-size:cover; }
#prb-case dd { position:relative; }
#prb-case dd::before { position:absolute; z-index:0; left:20px; display:block; content:""; width:210px; height:210px; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#prb-case dl:nth-child(1) dd::before { background-image:url(../img2024/problem/problem_p1.png); }
#prb-case dl:nth-child(2) dd::before { background-image:url(../img2024/problem/problem_p2.png); }
#prb-case dl:nth-child(3) dd::before { background-image:url(../img2024/problem/problem_p3.png); }
#prb-case dd ul { padding-top:230px; text-align:left; line-height:170%; }
#prb-case dd ul li { padding:0 0 1.0em 1.5em; text-indent:-0.9em; }
#prb-case dd ul li::before { display:inline-block; position:relative; top:0.1em; left:-0.5em; vertical-align:baseline; content:""; width:0.8em; height:0.8em; background:url(../img2024/problem/problem_dot.png) center center no-repeat; background-size:cover; }
#prb-case dl:nth-child(3) dd ul li { padding:0 0 1.0em 4.5em; }

#prb-arrow { margin:auto; width:66px; height:66px; background:url(../img2024/problem/problem_arrow.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#problem .box { width:90%; margin:0 5%; }
#problem .ttl { margin-bottom:50px; font-size:150%; }

#prb-case { display:block; }
#prb-case dl { width:auto; margin:0 0 10px 0; }
#prb-case dt { width:135px; font-size:90%; }
#prb-case dt::after { left:67px; }
#prb-case dd::before { left:0; width:135px; height:135px; background-size:130%; }
#prb-case dd ul { padding:0 0 0 145px; font-size:90%; }
#prb-case dl:nth-child(3) dd ul li { padding:3.0em 0 1.0em 1.5em; }

}



/*  solution
=============================================== */

#solution { padding:40px 0 150px 0; background-image:url(../img2024/solution/solution_bg.png); background-position:right 0 top -100px; background-repeat:no-repeat; background-size:180px auto; }

#solution .box { width:980px; margin:auto; }
#solution .ttl { margin-bottom:70px; font-size:200%; }
.sl-logo { display:inline-block; margin-right:0.5em; width:400px; height:38px; background:url(../img2024/common/logo.png) center center no-repeat; background-size:100% auto; text-indent:-9999px; }
.sl-chpt { margin-bottom:80px; text-align:left; }
.sl-chpt:after {content:"";clear:both;display:block;}
.sl-chpt-t { width:490px; }
.sl-chpt .subttl { margin-bottom:1.0em; font-size:200%; line-height:120%; }
.sl-chpt .subttl .nm { display:block; color:var(--cl-blue); font-size:60%; }
.sl-chpt .txt { line-height:170%; }
.sl-chpt .pic { width:450px; }
.sl-chpt .pic p { position:relative; width:100%; height:0; padding-top:60.198%; }
.sl-chpt .pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:20px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; box-shadow:8px 8px 8px rgba(0,0,0,0.1); }
#sl-chpt1 .pic p span { background-image:url(../img2024/solution/solution_p1.png); }
#sl-chpt2 .pic p span { background-image:url(../img2024/solution/solution_p2.png); }
#sl-chpt3 .pic p span { background-image:url(../img2024/solution/solution_p3.png); }
#sl-chpt1 .sl-chpt-t { float:left; }
#sl-chpt1 .pic { float:right; }
#sl-chpt2 .sl-chpt-t { float:right; }
#sl-chpt2 .pic { float:left; }
#sl-chpt3 .sl-chpt-t { float:left; }
#sl-chpt3 .pic { float:right; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#solution { padding-bottom:0; background-image:url(../img2024/solution/solution_bg_smp.png); background-position:right 0 top 0; background-repeat:no-repeat; background-size:130px auto; }

#solution .box { width:90%; margin:0 5% 40px 5%; }
#solution .ttl { margin-bottom:30px; font-size:130%; }
.sl-logo { display:block; margin:0 auto 0.3em auto; width:300px; height:29px; }

.sl-chpt { margin-bottom:40px; }
.sl-chpt-t { width:auto; }
.sl-chpt .subttl { font-size:130%; }
.sl-chpt .txt { font-size:90%; }
.sl-chpt .pic { display:none; }

}



/*  result
=============================================== */

#result { margin-bottom:50px; background:linear-gradient(90deg, rgba(220,208,208,1) 0%, rgba(199,206,221,1) 100%);  }
#result .box { width:980px; margin:auto; padding:50px; }
#result .ttl { margin-bottom:0.7em; font-size:200%; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.4); }
#rs-txt { margin-bottom:1.0em; color:#fff; font-weight:500; line-height:130%; text-shadow:0 2px 4px rgba(0,0,0,0.4); }

#rs-cmpn-list { padding:50px; border-radius:10px; background-color:#fff; }
#rs-cmpn-list ul { display:flex; justify-content:center; align-items:center; }
#rs-cmpn-list ul li { margin:0 40px 0 0; display:flex; justify-content:center; align-items:center; }
#rs-cmpn-list ul li p { position:relative; width:100%; height:0; }
#rs-cmpn-list ul li p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#rs-cmpn-jt { width:75px; }
#rs-cmpn-house { width:260px; }
#rs-cmpn-other { width:2.0em; height:5.0em; }
#rs-cmpn-jt p { padding-top:85.3333333333333%; }
#rs-cmpn-house p { padding-top:25.7692307692308%; }
#rs-cmpn-jt p span { background-image:url(../img2024/result/logo_jt.png); }
#rs-cmpn-house p span { background-image:url(../img2024/result/logo_house.png); }
#rs-cmpn-other p { margin-top:-0.5em; height:100%!important; }
#rs-cmpn-other p span { display:flex!important; justify-content:center; align-items:end; text-indent:0px!important; font-size:150%; font-weight:500; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#result .box { width:auto; padding:40px 20px 80px 20px; }
#result .ttl { font-size:140%; }
#rs-txt { font-size:90%; }

#rs-cmpn-list { position:relative; padding:30px 15px; }
#rs-cmpn-list ul li { margin:0 30px; }
#rs-cmpn-jt { width:56px; margin-right:0!important; }
#rs-cmpn-house { width:134px; }
#rs-cmpn-jeki { width:89px; }
#rs-cmpn-other { display:none!important; }
#rs-cmpn-list::after { position:absolute; display:block; bottom:-2.0em; left:calc(50% - 0.5em); content:"他"; font-weight:500; }

}

@media all and (max-width: 500px) {

#rs-cmpn-jt { width:40px; }
#rs-cmpn-house { width:80px; }
#rs-cmpn-jeki { width:53px; }

}



/*  category
=============================================== */

#category { margin-bottom:50px; }
#category .box { width:980px; margin:auto; }
#category .ttl { margin-bottom:0.5em; font-size:200%; }
#ct-txt { margin-bottom:40px; line-height:130%; }

.ct-list { margin-bottom:30px; }
.ct-list .subttl { margin-bottom:1.0em; text-align:left; line-height:120%; }
.ct-list .subttl::before { display:inline-block; content:""; margin-right:0.5em; width:1.0em; height:1.0em; border-radius:4px; vertical-align:bottom; background-color:#C0C4CE; }
.ct-list ul { display:flex; flex-wrap:wrap; margin:0 -0.5%; }
.ct-list ul li { display:flex; justify-content:center; align-items:center; width:15.6%; min-height:4.0em; margin:0 0.5% 1.0% 0.5%; padding:15px 15px; box-sizing:border-box;  background-color:#fff; border-radius:8px; font-size:90%; line-height:120%; }
.ct-list-other { background-color:transparent!important; font-weight:500; padding-bottom:0!important; }
.ct-rp { padding:15px 5px 15px 40px!important; background-position:5px center; background-repeat:no-repeat; background-size:47px auto; }
#ct-media .ct-rp { background-size:33px auto; }
#ct-lifestyle .ct-rp1 { background-image:url(../img2024/category/lifestyle_icon1.png); }
#ct-lifestyle .ct-rp2 { background-image:url(../img2024/category/lifestyle_icon2.png); }
#ct-lifestyle .ct-rp3 { background-image:url(../img2024/category/lifestyle_icon3.png); }
#ct-lifestyle .ct-rp4 { background-image:url(../img2024/category/lifestyle_icon4.png); }
#ct-lifestyle .ct-rp5 { background-image:url(../img2024/category/lifestyle_icon5.png); }
#ct-lifestyle .ct-rp6 { background-image:url(../img2024/category/lifestyle_icon6.png); }
#ct-facesheet .ct-rp1 { background-image:url(../img2024/category/facesheet_icon1.png); }
#ct-facesheet .ct-rp2 { background-image:url(../img2024/category/facesheet_icon2.png); }
#ct-facesheet .ct-rp3 { background-image:url(../img2024/category/facesheet_icon3.png); }
#ct-facesheet .ct-rp4 { background-image:url(../img2024/category/facesheet_icon4.png); }
#ct-facesheet .ct-rp5 { background-image:url(../img2024/category/facesheet_icon5.png); }
#ct-facesheet .ct-rp6 { background-image:url(../img2024/category/facesheet_icon6.png); }
#ct-media .ct-rp1 { background-image:url(../img2024/category/media_icon1.png); }
#ct-media .ct-rp2 { background-image:url(../img2024/category/media_icon2.png); }
#ct-media .ct-rp3 { background-image:url(../img2024/category/media_icon3.png); }
#ct-media .ct-rp4 { background-image:url(../img2024/category/media_icon4.png); }
#ct-media .ct-rp5 { background-image:url(../img2024/category/media_icon5.png); }
#ct-media .ct-rp6 { background-image:url(../img2024/category/media_icon6.png); }

.more-content { width:100%; display:flex; flex-wrap:wrap; }
.more-button-area { margin:0; padding:0; background-color:transparent!important; width:100%!important; text-align:center; }
.more-button { position:relative; display:block; margin:auto; box-sizing:border-box; text-align:left; line-height:120%; color:var(--cl-blue); }
@media (hover: hover) { .more-button:hover { opacity:0.5; } }
.more-button::after { position:absolute; top:0; right:0; display:block; content:""; width:1.2em; height:1.2em; background:url(../img2024/category/more_arrow.png) center center no-repeat; background-size:100% auto; }
.more-button.close::after { transform:rotate(180deg); }
.more-content .more-button { width:9.0em; padding-right:1.2em; text-align:center; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#category .box { width:92%; margin:0 4%; }
#category .ttl { font-size:150%; }

.ct-list { margin-bottom:15px; }
.ct-list ul li { width:31%; margin:0 1.15% 2.3% 1.15%; padding:10px; font-size:80%; }
.ct-rp { padding:10px 5px 10px 30px!important; background-position:0 center; background-size:35px auto; }
#ct-media .ct-rp { background-size:27px auto; }

}


/* ct-pdf
-------------------------------- */

#ct-pdf .subttl { margin-bottom:20px; font-size:150%; line-height:120%; }
#ct-pdf-btn li { margin-bottom:20px; text-align:left; line-height:140%; }
#ct-pdf-btn li a { position:relative; display:block; width:100%; height:100%; padding:1.0em 1.0em 1.0em 15.0em; box-sizing:border-box; border-radius:7px; text-decoration:none; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #ct-pdf-btn li a:hover { opacity:0.5; text-decoration:none; } }
#ct-pdf-btn1 a { background-color:#e5edff; border:var(--cl-blue) 2px solid; }
#ct-pdf-btn2 a { background-color:#ffefed; border:var(--cl-orange) 2px solid; color:var(--cl-orange); }
#ct-pdf-btn li a::after { position:absolute; display:inline-block; content:""; top:calc(50% - 13px); right:15px; width:17px; height:26px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; }
#ct-pdf-btn1 a::after { background-image:url(../img2024/category/pdf_arrow1.png); }
#ct-pdf-btn2 a::after { background-image:url(../img2024/category/pdf_arrow2.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#ct-pdf .subttl { font-size:120%; }
#ct-pdf-btn li { margin-bottom:10px; font-size:90%; }
#ct-pdf-btn li a { padding:1.0em 3.0em 1.0em 1.0em; }

}


/*  usage_image
=============================================== */

#usage_image { margin-bottom:50px; background:linear-gradient(90deg, rgba(251,233,228,1) 0%, rgba(226,231,245,1) 100%);  }
#usage_image .box { width:980px; margin:auto; padding:50px; }
#usage_image .ttl { margin-bottom:0.7em; font-size:200%; }
#us-txt { margin-bottom:1.5em; line-height:130%; }

#us-dgm { width:900px; margin:auto; }
#us-dgm p { position:relative; width:100%; height:0; padding-top:71.663%; }
#us-dgm p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img2024/usage_image/usage_image_dgm.png?); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#usage_image { margin-bottom:20px; }
#usage_image .box { width:auto; padding:20px; }
#usage_image .ttl { font-size:140%; }
#us-txt { font-size:90%; }

#us-dgm { width:auto; }
#us-dgm p { padding-top:76.7857%; }
#us-dgm p span { background-image:url(../img2024/usage_image/usage_image_dgm_smp.png); }

}



/*  flow
=============================================== */

#flow { margin-bottom:50px;  }
#flow .box { width:980px; margin:auto; padding:50px; }
#flow .ttl { margin-bottom:0.7em; font-size:200%; }
#fl-txt { margin-bottom:1.5em; line-height:150%; }
#fl-txt strong { font-size:150%; color:var(--cl-orange); }

#fl-dgm p { position:relative; width:100%; height:0; padding-top:22.7847682%; }
#fl-dgm p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img2024/flow/flow_dgm.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#flow { margin-bottom:20px;  }
#flow .box { width:auto; padding:20px; }
#flow .ttl { font-size:140%; }
#fl-txt { font-size:90%; }

#fl-dgm { width:325px; margin:0 auto; }
#fl-dgm p { padding-top:213.23%; }
#fl-dgm p span { background-image:url(../img2024/flow/flow_dgm_smp.png); }

}



/* inquiry-c
-------------------------------- */

#inquiry-c { padding:60px 40px 60px 50%; background-image:url(../img2024/inquiry/inquiry_c_bg.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; }
#inquiry-c .ttl { margin-bottom:0.7em; font-size:170%; color:#fff; }
#inqrc-txt { margin-bottom:1.5em; line-height:160%; color:#fff; }

#inqrc-btnlink { display:flex; justify-content:center; }
#inqrc-btnlink li { margin:0 0.25em; }
#inqrc-btnlink li a { display:block; width:100%; height:100%; box-sizing:border-box; border-radius:0.5em; font-size:120%; font-weight:500; text-decoration:none; box-shadow:0px 2px 3px rgba(0,0,0,0.4); /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #inqrc-btnlink li a:hover { opacity:0.5; text-decoration:none; } }
#inqrc-btn-dl a { background-color:var(--cl-black); padding:1.0em 2.0em; color:#fff; }
#inqrc-btn-inqr a { background-color:#fff; padding:1.0em 3.0em; color:var(--cl-black); }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#inquiry-c { margin-bottom:20px; padding:60px 20px; background-image:url(../img2024/inquiry/inquiry_c_bg_smp.jpg); }
#inquiry-c .ttl { font-size:120%; }
#inqrc-txt { font-size:80%; }
#inqrc-btnlink li a { font-size:100%; }
#inqrc-btn-dl a,
#inqrc-btn-inqr a { padding:1.0em 1.5em; }

}



/*  download
=============================================== */

#download { padding:50px; background-image:url(../img2024/dl/dl_bg_l.png), url(../img2024/dl/dl_bg_r.png); background-position:0 0, right 0 bottom 0; background-repeat:no-repeat, no-repeat; background-size:350px auto, 200px auto; }
#download .box { width:980px; margin:auto; }
#download .ttl { margin-bottom:1.0em; font-size:200%; }

#dl-btn-all { margin:0 auto 40px auto; }
#dl-btn-all .dl-btn p { width:16.0em; margin:auto; }
#dl-btn-all .dl-btn p a { display:block; width:100%; height:100%; padding:1.0em 0; box-sizing:border-box; border:var(--cl-blue) 2px solid; border-radius:1000px; background-color:#e5edff; color:var(--cl-blue); font-weight:500; text-decoration:none; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #dl-btn-all p a:hover { opacity:0.5; text-decoration:none; } }
#dl-btn-all .dl-btn p a::after { position:relative; top:0.1em; display:inline-block; content:""; margin-left:0.5em; width:1.0em; height:1.0em; background:url(../img2024/dl/dl_all_arrow.png) center center no-repeat; background-size:100% auto; }

.dl-box { margin-bottom:40px; text-align:left; }
.dl-box .subttl { margin-bottom:10px; font-size:150%; line-height:130%; }
.dl-box .txt { margin-bottom:10px; line-height:130%; }
.dl-list { padding-top:10px; }
.dl-list ul { display:flex; flex-wrap:wrap; margin:0 -1.5%; }
.dl-list ul li { position:relative; width:30.3%; margin:0 1.5% 3% 1.5%; padding:15px; box-sizing:border-box; background-color:#fff; border-radius:15px; box-shadow:0px 3px 6px rgba(0,0,0,0.1); }
.dl-new { position:absolute; top:7px; left:7px; z-index:10; padding:0.2em 0.3em 0.3em 0.3em; border-radius:0.2em; background-color:var(--cl-orange); color:#fff; font-weight:500; font-size:90%; }
.dl-list ul li .thumb { position:relative; width:100%; height:0; margin-bottom:15px; padding-top:56.25%; background-color:#efefef; border-radius:10px; }
.dl-list ul li .thumb span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:10px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.dl-list-ttl { margin-bottom:7px; font-size:110%; line-height:120%; }
.dl-list-txt { margin-bottom:10px; line-height:120%; }
.dl-list .dl-btn { text-align:center; }
.dl-list .dl-btn p { width:90%; margin:auto; font-size:90%; }
.dl-list .dl-btn p a { display:block; width:100%; height:100%; padding:0.7em 0; box-sizing:border-box; border:var(--cl-blue) 2px solid; border-radius:1000px; background-color:#fff; color:var(--cl-blue);  font-weight:500; text-decoration:none; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { .dl-list .dl-btn p a:hover { opacity:0.5; text-decoration:none; } }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#download { padding:20px; background:none; }
#download .box { width:auto; }
#download .ttl { font-size:140%; }

#dl-btn-all .dl-btn { font-size:90%; }

.dl-box { margin-bottom:20px; }
.dl-box .subttl { font-size:120%; }
.dl-box .txt { font-size:90%; }
.dl-list ul li { width:47%; margin:0 1.5% 3% 1.5%; padding:0 0 10px 0; border-radius:10px; }
.dl-new { font-size:80%; }
.dl-list ul li .thumb { margin-bottom:10px; border-radius:10px 10px 0 0; }
.dl-list ul li .thumb span { border-radius:10px 10px 0 0; }
.dl-list-ttl { margin:0 10px 7px 10px; font-size:100%; }
.dl-list-txt { margin:0 10px 10px 10px; font-size:90%; }
.dl-list .dl-btn { margin:0 auto 5% auto; font-size:80%; }

}


/*eof*/