@charset "utf-8";
/* -------------------------------------------
  Auther: designstudio tom'sOne
          Tommy Tsutsui
          https://toms1.net/
  Last modefied: 20/Nov/2025
------------------------------------------- */

/* -------------------------------------------
  SD Series
------------------------------------------- */
/* Fonts */
#SDStage  {
  font-family: -apple-system, "Noto Sans JP", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-optical-sizing: auto; font-style: normal}

.figtree, .FI400, .FI500, .FI600, .FI700 { font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-style: normal}

.mont600, .mont700, .mont800 { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal}

.NS400, .FI400 { font-weight: 400}
.NS500, .FI500, .SDPNItem { font-weight: 500}
.NS600, .FI600, .mont600, .SDItemInfo, .sdCustInfoList, .SDUsesInfo, .sdInstInfo { font-weight: 600}
.NS700, .FI700, .mont700, .SDINum { font-weight: 700}
.FI800, .mont800 { font-weight: 800}

/* Images */
#sdTitle, .sdTitEN, .sdIco { background: url(../sd/images/sd02.svg) no-repeat 0 0 / 420px 300px}

@media (max-width: 767px) { #sdTitle, .sdTitEN { background: none} }

/* Flex Box */
.flexC {
  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-flex-flow: row wrap; flex-flow: row wrap}

/* Containers */
#SDStage { border-bottom: 5px solid #999}

#SDHead, .SDPNList, .SDWInner, .SDUInner { max-width: calc(1600px - 12vw); margin: 0 auto; padding: 0 6vw}

.sdWrapp { position: relative}

.sdBlack { background: #000}
.sdGray { background: #ddd}

/* Sub Title and Text */
.sdST { color: #333; font-size: 40px; letter-spacing: .04em; margin: 0; position: relative; z-index: 5}

.SDItemST { font-size: 24px; text-align: left; letter-spacing: .06em; width: 100%; margin: 0}

.sdItemNum, .sdUsesItemNum {
  position: absolute; top: -17px; left: -8px; color: #999;
  font-size: 30px; margin: 0; -webkit-transform: scaleX(.9); transform: scaleX(.9); z-index: 5}
.sdUsesItemNum { top: 4px; left: 3px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.5)}

.SDINum { font-size: 32px}

.SDItemInfo, .SDUsesInfo { font-size: 18px; line-height: 1.6; letter-spacing: .075em; margin: 0}
.SDUsesInfo { margin-top: 8px}

@media (max-width: 767px) { .sdST { font-size: 35px} }

@media (max-width: 767px) and (min-width: 481px) {
  .sdUsesItemNum { font-size: 24px} .SDINum { font-size: 26px; vertical-align: -.65px} }

@media (max-width: 480px) {
  .sdST { font-size: 32px} .sdItemNum { top: -15px; font-size: 26px} .sdUsesItemNum { top: 5px; font-size: 26px}
  .SDINum { font-size: 28px; vertical-align: -1px} .SDItemInfo, .SDUsesInfo { font-size: 16px} }

/* Contents Icon */
.sdIco { position: absolute; top: 0; left: 0; display: block; z-index: 1}

.sdFeatureIco { background-position: 0 -150px; width: 92px; height: 150px}
.sdCustomizeIco { background-position: -100px -160px; width: 110px; height: 120px}
.sdUsesIco { top: 20px; background-position: -200px -160px; width: 100px; height: 114px}
.sdInstallIco { top: 25px; background-position: -300px -160px; width: 110px; height: 110px}
.sdIntroIco { top: 30px; background: url(../sd/images/intro_ico.svg) no-repeat 0 0; width: 100px; height: 100px}

@media (min-width: 768px) and (max-width: 1280px) {
  .sdCustomizeIco { left: -25px} .sdInstallIco { left: -15px}
  .sdUsesIco { top: 20px; left: -5px; -webkit-transform: scale(.9); transform: scale(.9)} }

@media (max-width: 1480px) { .sdCustomizeIco { left: -15px} }

@media (max-width: 1500px) { .sdInstallIco { left: -10px} }

@media (max-width: 767px) {
  .sdIco { background: url(../sd/images/sd.svg) no-repeat 0 0 / 346px 247px}
  .sdFeatureIco { background-position: 0 -123px; width: 76px; height: 124px}
  .sdCustomizeIco { background-position: -82px -137px; width: 86px; height: 104px}
  .sdUsesIco { top: 5px; background-position: -174px -139px; width: 83px; height: 93px}
  .sdInstallIco { top: 15px; background-position: -256px -139px; width: 88px; height: 94px}
  .sdIntroIco { top: 15px; background: url(../sd/images/intro_ico.svg) no-repeat 0 0 / 70px; width: 70px; height: 70px} }

@media (max-width: 480px) {
  .sdIco { background: url(../sd/images/sd.svg) no-repeat 0 0 / 256px auto}
  .sdFeatureIco { background-position: 0 -91px; width: 56px; height: 94px}
  .sdCustomizeIco { background-position: -60px -103px; width: 67px; height: 80px}
  .sdUsesIco { top: 10px; background-position: -129px -103px; width: 62px; height: 69px}
  .sdInstallIco { top: 20px; background-position: -181px -102px; width: 76px; height: 74px}
  .sdIntroIco { top: 25px; background: url(../sd/images/intro_ico.svg) no-repeat 0 0 / 58px; width: 58px; height: 58px} }

/* Eyecatch */
#SDEyecatch { background: #000; border-top: 5px solid #999}

#SDEInner { width: 100%; height: calc(100vh - 105px); min-height: 860px; position: relative}

#SDEVideo {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden}

#sdVideo {
  position: absolute; top: 50%; left: 50%; min-width: 100%; height: 100%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1}

@media (min-width: 768px) and (orientation:portrait) { #SDEInner, #sdVideo { height: 700px; min-height: auto}}

@media (max-width: 767px) { #SDEInner, #sdVideo { height: 432px; min-height: auto} }

@media (max-width: 670px) { #SDEInner, #sdVideo { height: 380px; min-height: auto} }

/* SD Head */
#SDHead { position: relative; height: 100%; z-index: 5}

#sdTitle, .sdTitEN { position: absolute; left: 6vw}
#sdTitle { top: calc(7.5vw + 40px); background-position: 0 -26px; width: 420px; height: 122px; margin: 0}

.sdTitEN { top: 7.5vw; width: 348px; height: 26px; margin: 0}

.sdSubCatch {
  position: absolute; bottom: 6vw; right: 6vw;
  color: #fff; font-size: 2rem; line-height: 1.6; letter-spacing: .06em; margin: 0}

@media (max-width: 767px) {
  #sdTitle, .sdTitEN { width: auto; height: auto; color: #fff}
  #sdTitle { top: 78px; font-size: 30px; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,.7)}
  #sdSeriesTit { font-size: 40px; font-style: normal; margin-top: 5px; display: block}
  .SSTSD { font-size: 44px; vertical-align: -2px}
  .sdTitEN { top: 45px; font-size: 18px; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,.5)}
  .sdTitNew {
    position: absolute; bottom: 9px; left: 225px; background: #e12e12; font-size: 3vw; font-weight: 800; text-shadow: none;
    padding: 3px 4px 4px; display: inline-block}
  .sdSubCatch { left: 5vw; right: inherit; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,.5)}
}

@media (max-width: 369px) { .sdSubCatch { font-size: 17px;}}

/* SD Page Navi */
#SDPNavi { background: #ddd; width: 100%; padding: 8px 0}

.SDPNInner { background: #666; font-size: 100%; width: calc(100% - 12vw); padding: 8px 6vw} 

.SDPNList { padding: 0; position: relative}

.SDPNItem { font-size: 18px; text-align: center; letter-spacing: .1em; width: 25%; margin: 0; display: block}

.SDPLink { color: #fff; text-decoration: none; padding: 18px 0 20px; display: block; position: relative}

.SDPLink::before, .SDPNList::after {
  content: ''; position: absolute; top: 10px; left: 0;
  background: #bbb; width: 2px; height: calc(100% - 20px)}
.SDPNList::after { left: inherit; right: 0}

@media (max-width: 767px) {
  #SDPNavi { padding: 5px 0} .SDPNInner { width: 100%; padding: 5px 0}
  .SDPNItem { font-size: 15px; letter-spacing: .05em; text-indent: .04em; width: 24%} .SDPNItem:nth-of-type(2) { letter-spacing: 0; width: 28%}
  .SDPNItem:nth-of-type(1) .SDPLink::before, .SDPNList::after { display: none} .SDPLink { padding: 12px 0 14px} }

@media (max-width: 379px) { .SDPNItem { font-size: 14px} }

  /* Basic Specifications */
.sdSpecWrapp { border-top: 8px solid #666}
#sdSpec { align-items: center; max-width: calc(1340px - 12vw); margin: 0 auto; padding: 0 6vw}

.operationAnim { height: 480px}
#OAnimMov { width: auto; height: 480px; margin: 0}

.specData { color: #d5d5d5; width: 390px; padding: 50px; border: #bbb solid 1px}

.specST { font-size: 28px; text-align: center; letter-spacing: .1em; margin: 0}

.specList01, .specList02 { font-size: 18px; letter-spacing: .075em; margin: 23px 0 0}
.specList01 dt, .specList01 dd { margin: 12px 0 0; display: inline-block}
.specList01 dt { width: 6em}
.specList01 dd { width: calc(100% - 6em)}
.specList02 dd { margin: 12px 0 0; padding-left: 1em}
.pad05 { padding-left: .5em}

.specList01 dd::before { content: "："}

@media (max-width: 1080px) {
  #operationAnim { height: 450px} #OAnimMov { width: auto; height: 450px; margin: 0} .specData { width: 380px; padding: 40px} }

@media (max-width: 767px) {
  .sdSpecWrapp { padding-bottom: 50px;} .operationAnim { width: 100%; height: auto}
  #OAnimMov { width: 100%; max-width: 360px; height: auto; margin: 0 auto; display: block}
  .specData { width: 340px; margin: 0 auto} .specST { font-size: 22px} .specList01, .specList02 { font-size: 16px} }

@media (max-width: 479px) {
  .specData { width: 330px; padding: 30px} .specList01 dt { width: 5.6em} .specList01 dd { width: calc(100% - 5.6em)} }

@media (max-width: 450px) {
  .specData { width: auto} .specList01 dt { width: 100%; margin: 18px 0 0; display: block}
  .specList01 dd { width: calc(100% - 1em); padding-left: 1em; display: block}
  .specList01 dd::before { display: none} .specList01 dt::after { content: "："} }

/* -------------------------------------------
  SD Feature
------------------------------------------- */
.sdFeature { padding: 60px 6vw}

.SDFLItem {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  background: #f8f8f8; width: calc(50% - 130px); margin: 80px 0 0; padding: 45px; position: relative}

.SDFLItemWide { background: #f8f8f8; margin: 80px 0 0; width: 100%; position: relative}

.SDCustomizeItem { background: #eee; margin: 60px 0 0; padding: 60px; position: relative}

#SDInner05 { align-items: center; width: calc(100% - 20vw); max-width: calc(1280px - 20vw); margin: 0 auto; padding: 45px 10vw}

@media (max-width: 1399px) { #SDInner05 {width: calc(100% - 16vw); padding: 45px 8vw} }
@media (max-width: 1299px) { #SDInner05 {width: calc(100% - 12vw); padding: 45px 6vw} }
@media (max-width: 1199px) { #SDInner05 {width: calc(100% - 90px); padding: 45px} }

.sdFIImage { text-align: center}

#SDFI01 { width: 240px; height: 270px; margin: 0 40px 0 0}
#SDFI02 { width: 330px; height: 274px; margin: 20px 20px 5px 0}
#SDFI03 { width: 320px; height: 309px; margin: 0 20px 0 0}
#SDFI04 { width: 366px; height: 253px; margin: 0}

@media (max-width: 1180px) { #SDFI04 { width: 100%; height: auto}}

.SDItem05 { width: calc(100% - 545px)}

.sdFIImage02 { width: 500px; height: 370px}

.SDLastInfo { margin-top: 80px}

.SDFlastIM01 {
  background: #eaeaea url(../sd/images/feature05.png) no-repeat 130px 5px;
  width: 145px; height: 365px; padding-left: 130px; position: relative}

.SDFlastIM02 {
  background: #eaeaea url(../sd/images/feature05.png) no-repeat -175px 5px;
  width: 195px; height: 222px; position: relative}

.SDFLCap01, .SDFLCap02 { position: absolute; top: 50%; font-size: 18px}
.SDFLCap01 { left: 10px; margin-top: -10px}
.SDFLCap02 { right: 12px; text-align: center; line-height: 1.4; margin-top: -25px}

@media (max-width: 767px) {
  .sdFeature { padding: 45px 6vw 60px} .SDFLItem, .SDItem05, #sdFIImage05 { width: 100%}
  .SDFLItem, .SDFLItemWide { margin-top: 60px;} #SDFI01 { max-width: 210px; height: auto; margin: 15px 0 15px}
  #SDFI02 { max-width: 312px; height: auto; margin: 10px 0} #SDFI03 { margin: 0} #SDFI04 { margin: 15px 0 -5px}
  #SDInner05 { width: auto} .sdFIImage02 { display: none} #sdFIImage05 { max-width: 430px; margin: 35px auto 0}
  #sdFIm05 { width: 100%; height: auto} .SDLastInfo { margin-top: 15px} .SDCustomizeItem { padding: 45px}
}

@media (max-width: 480px) {
  .SDFLItem, #SDInner05, .SDCustomizeItem { padding: 40px 6vw 30px}
  .sdFIImage { width: 100%} #SDFI02, #SDFI03, #SDFI04 { width: 100%; height: auto} #SDFI02 { margin-top: 22px} }

/* -------------------------------------------
  SD Customize
------------------------------------------- */
.sdCustomize { padding: 60px 6vw}

#customizeTit { letter-spacing: -.04em}

#CustomInner01, #CustomInner02 { align-items: center; max-width: 920px; margin: 0 auto}
#CustomInner02 { max-width: 720px}
.sdCustInfo { width: 280px}

.sdCustInfoList { font-size: 18px; line-height: 1.8; margin: 50px 0 0; padding: 0}

.sdCustInfoList li { letter-spacing: .06em; margin: 0; padding-left: 22px; display: block; position: relative}

.sdCustInfoList li::before {
  content: ''; position: absolute; top: 12px; left: 0; width: 12px; height: 5px;
  border-left: 4px solid #0dac67; border-bottom: 3px solid #0dac67; display: block;
  -webkit-transform: rotate(-50deg); transform: rotate(-50deg)}

#SDCustIM01 { width: calc(100% - 370px); max-width: 547px}
#SDCustIM01 { width: calc(100% - 373px)}

#SDCI01 { width: 100%; height: auto}

@media (max-width: 767px) {
  .sdCustomize { padding: 45px 6vw 60px} .sdCustInfo { width: 100%} #SDCustIM01 { order: 2}
  #SDCustIM01 { width: 100%; max-width: 500px; margin: 0 auto} #SDCustIM02 { max-width: 350px; margin: 0 auto} #SDCI02 { width: 100%; height: auto;}
  .sdCustInfoList { font-size: 16px; margin-top: 35px} .sdCustInfoList li { padding-left: 19px}
  .sdCustInfoList li::before { top: 10px; left: 1px; width: 10px; height: 4px; border-left: 3px solid #0dac67}

}


/* -------------------------------------------
  SD Uses
------------------------------------------- */
.sdUses { padding: 60px 6vw}

.sdUsesList, .sdInstList { max-width: 1120px; margin: 0 auto; position: relative}

.sdULItem, .sdInstItem { width: calc(50% - 40px); max-width: 520px; margin: 60px 0 0; position: relative; z-index: 1}

.sdULIM, .sdInstIM { width: 100%; height: auto}

@media (max-width: 767px) {
  .sdUses { padding: 45px 6vw 60px} .sdULItem, .sdInstItem { width: calc(50% - 15px); max-width: 310px; margin-top: 45px}
  .sdULItem:nth-of-type(n+3) { margin-top: 30px} .sdULItem > .SDUsesInfo { font-size: 15px; line-height: 1.4} }

@media (max-width: 660px) { .sdInstItem { width: calc(50% - 10px)} }

@media (max-width: 645px) { .sdUses { padding-bottom: 50px} .sdULItem:nth-of-type(n+3) { margin-top: 25px}}

@media (max-width:  500px) {
  .sdUsesList, .sdULItem, .sdInstItem { width: 100%; max-width: 400px} .sdInstItem { margin: 40px auto 0}
  .sdULItem:nth-of-type(2), .sdULItem:nth-of-type(n+3) { margin-top: 30px} }

/* -------------------------------------------
  SD Installation
------------------------------------------- */
.sdInstall { padding: 60px 6vw 80px}

.sdInstList:nth-of-type(2) { padding-top: 10px}

#SDInst03 { order: 2} #SDInst04 { order: 1}

.sdInstInfo {
  position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,.5);
  color: #fff; font-size: 18px; text-align: center; letter-spacing: .06em; width: 100%; margin: 0; padding: 11px 0 15px; z-index: 5}

.sdInstSign01, .sdInstSign02, .sdInstSign03 {
  content: ''; position: absolute; background: #79cca2; width: 56px; height: 50px;
  clip-path: polygon(0 0, 0% 100%, 75% 50%); display: block; z-index: 5;}

.sdInstSign01, .sdInstSign03 { top: 50%; left: 50%; margin: 5px 0 0 -20px}
.sdInstSign02 { top: 19px; right: 21%; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.sdInstSign03 { margin-left: -36px; -webkit-transform: rotate(180deg); transform: rotate(180deg)}

@-webkit-keyframes SDIS01 {
 0% { -webkit-transform: rotate(-180deg)} 100% { -webkit-transform: rotate(0)} }
@keyframes SDIS01 {
 0% { transform: rotate(-180deg)} 100% { transform: rotate(0)} }
.SDIS01 { -webkit-animation: SDIS01 .6s ease-in-out; animation: SDIS01 .6s ease-in-out}

@-webkit-keyframes SDIS02 {
 0% { -webkit-transform: rotate(-90deg)} 100% { -webkit-transform: rotate(90deg)} }
@keyframes SDIS02 {
 0% { transform: rotate(-90deg)} 100% { transform: rotate(90deg)} }
.SDIS02 { -webkit-animation: SDIS02 .6s ease-in-out; animation: SDIS02 .6s ease-in-out}

@-webkit-keyframes SDIS03 {
 0% { -webkit-transform: rotate(0)} 100% { -webkit-transform: rotate(180deg)} }
@keyframes SDIS03 {
 0% { transform: rotate(0)} 100% { transform: rotate(180deg)} }
.SDIS03 { -webkit-animation: SDIS03 .6s ease-in-out; animation: SDIS03 .6s ease-in-out}

@media (max-width: 767px) {
  .sdInstall { padding: 45px 6vw 60px} .sdInstInfo { font-size: 15px; padding: 8px 0 11px}
  #SDInst03, #SDInst04 { margin-top: 10px} .sdInstSign01, .sdInstSign02, .sdInstSign03 { width: 46px; height: 40px}
  .sdInstSign01 { margin-left: -16px} .sdInstSign02{top: -3px} .sdInstSign03 { margin: -15px 0 0 -30px}
}

@media (max-width:  500px) {
  #SDInst03 { order: 1; margin-top: 30px} #SDInst04 { order: 2; margin-top: 40px}
  .sdInstSign01, .sdInstSign02, .sdInstSign03 { width: 40px; height: 34px}
  .sdInstSign01, .sdInstSign03 { -webkit-transform: rotate(90deg); transform: rotate(90deg)}
  .sdInstSign01 {margin: 9px 0 0 -19px}
  .sdInstSign02{top: 9px; right: inherit; left: calc(50% - 19px)} .sdInstSign03 { margin: 9px 0 0 -19px}
}

/* -------------------------------------------
  SD Introduction
------------------------------------------- */
.sdIntro { padding: 60px 6vw 70px}

.sdIntroInfo { font-size: 20px; text-align: center; line-height: 1.8; margin: 50px auto 0; z-index: 5}

.sdIIInner { text-align: left; display: inline-block}

.sdIntroST { font-size: 42px; display: inline-block; -webkit-transform: translateY(1px); transform: translateY(1px)}
.sdlsM10 { letter-spacing: -.1em} .sdls0 { letter-spacing: 0;}

#SDInquiry { font-size: 20px; text-align: center; margin: 35px auto 0}

#SDILink { display: inline-block}

#SDILink a { padding: 14px 23px 15px 25px}

@media (max-width: 767px) {
  .sdIntro { padding: 35px 6vw 60px} .sdIntroST { font-size: 39px; -webkit-transform: translateY(2px); transform: translateY(2px)}
  .sdIntroInfo { font-size: 17px; margin: 30px auto 0} .sdIntroInfo br{ display: none} #SDInquiry { font-size: 17px} }

/* -------------------------------------------
  Animations
------------------------------------------- */
.sdTitAni02 { -webkit-animation: SXH01 .6s ease-in-out; animation: SXH01 .6s ease-in-out}
.sdTitAni01 { -webkit-animation: SXH01 1s ease-in-out; animation: SXH01 1s ease-in-out}

/* -------------------------------------------
  Displey Setting
------------------------------------------- */
@media (min-width: 768px) {
#sdTitle, .sdTitEN { text-indent: 400%; white-space: nowrap; overflow: hidden} }

.homeLink { text-decoration: none; display: block; cursor: pointer; overflow: hidden}