@charset "utf-8";

.common-mv.design::before{background-color:#CBE2E9;}

.parts-ttl{font-size:4.8rem;font-weight:bold;text-align:center;letter-spacing:0.1em;line-height:1.7;margin-bottom:80px;}
.parts-ttl .small{font-size:2.4rem;letter-spacing:0;color:#0390B8;display:block;}
.parts-ttl .num{font-size:3.6rem;font-weight:900;letter-spacing:0;background:#0390B8;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:100%;width:82px;height:82px;margin:-38px auto 20px;}

/* -------------------------------------------------- */
/* #block-intro */
/* -------------------------------------------------- */
#block-intro .container{max-width:1200px;padding-top:60px;padding-bottom:110px;}
#block-intro .intro{display:flex;gap:83px;margin-bottom:80px;align-items:center;}
#block-intro .lead{flex:1;line-height:2;}
#block-intro .left{text-align:center;max-width:49%;}
#block-intro .ttl{font-size:4rem;font-weight:bold;line-height:1.7;display:inline-block;text-align:left;}
#block-intro p{letter-spacing:0;}
#block-intro p + p{margin-top:2em;}
#block-intro .img{margin-top:64px;}

/* -------------------------------------------------- */
/* #block-point01 */
/* -------------------------------------------------- */
#block-point01{background:#F0FCFF;letter-spacing:0;}
#block-point01 .container{padding-top:1px;padding-bottom:80px;}
#block-point01 .box{display:flex;gap:100px;flex-direction:row-reverse;}
#block-point01 .inner{flex:1;text-align:center;}
#block-point01 .ttl{display:inline-block;font-size:3.6rem;font-weight:bold;text-align:left;line-height:1.3;margin-bottom:70px;letter-spacing:0;}
#block-point01 .txt{display:inline-block;text-align:left;line-height:2;}
#block-point01 .txt p + p{margin-top:2em;}
#block-point01 .img{position:relative;max-width:39%;}
#block-point01 .img img{position:relative;z-index:1;}
#block-point01 .img::before{content:"";display:block;background:#0390B8;width:75%;height:0;padding-bottom:75%;opacity:0.15;position:absolute;z-index:0;right:-25%;top:-8%;}
#block-point01 .slide-gallery{margin-top:60px;}
#block-point01 .slide-gallery .item{width:240px;padding:0 12px;box-sizing:border-box;}
#block-point01 .sub-ttl-box{text-align:center;margin-top:60px;position:relative;}
#block-point01 .sub-ttl-box::before{content:"";display:block;width: 0;height: 0;border-style: solid;border-width: 30px 30px 0px 30px;border-color: #000 transparent transparent transparent;position:absolute;left:50%;top:100%;margin-left:-30px;z-index:1;}
#block-point01 .sub-ttl-box::after{content:"";display:block;width: 0;height: 0;border-style: solid;border-width: 30px 30px 0px 30px;border-color: #fff transparent transparent transparent;position:absolute;left:50%;top:calc(100% - 1px);margin-left:-30px;z-index:2;}
#block-point01 .sub-ttl-box .inner{display:inline-block;background:#fff;border:1px solid #000;padding:30px 60px 25px;min-width:640px;position:relative;}
#block-point01 .sub-ttl-box .inner::before{content:"";display:block;width:149px;height:204px;background:url(/img/design/block01_img01.png) no-repeat center bottom;background-size:contain;position:absolute;left:92%;bottom:-10%;}
#block-point01 .sub-ttl-box .sub-ttl{font-size:3.6rem;font-weight:bold;margin-bottom:20px;line-height:1.2;}
#block-point01 .sub-ttl-box .sub-ttl span{font-size:4.8rem;color:#0390B8;margin-left:5px;vertical-align:-0.1em;}
#block-point01 .sub-ttl-box p{line-height:2;}

#block-point01 .case-ttl{font-size:2.8rem;font-weight:bold;border-bottom:1px solid #000;margin-top:60px;margin-bottom:42px;display:flex;align-items:center;gap:80px;line-height:1.35;padding-bottom:10px;}
#block-point01 .case-ttl .en{font-size:2.4rem;color:#0390B8;flex:none;height:auto;display:flex;align-items:center;justify-content:flex-start;gap:15px;position:relative;}
#block-point01 .case-ttl .en::after{content:"";display:block;width:1px;height:80%;background:#000;position:absolute;right:-40px;top:10%;}
#block-point01 .case-ttl .en > span{font-size:6rem;line-height:1;padding-bottom:0.1em;}
#block-point01 .case-ttl > span{flex:1;}
#block-point01 .case-box{display:flex;flex-direction:row-reverse;gap:160px;align-items:flex-start;}
#block-point01 .case-box .case-inner{flex:1;}
#block-point01 .case-box .case-img{max-width:49%;position:relative;}
#block-point01 .case-box .case-img::before{content:"";display:block;position:absolute;background:no-repeat center bottom;background-size:contain;z-index:2;}
#block-point01 .case01 .case-box .case-img::before{width:162px;height:233px;background-image:url(/img/design/case01_img02.png);bottom:-6%;left:-22%;max-width:27%;}
#block-point01 .case02 .case-box .case-img::before{width:106px;height:202px;background-image:url(/img/design/case02_img02.png);bottom:-6%;right:-16%;max-width:18%;}
#block-point01 .case03 .case-box .case-img::before{width:192px;height:226px;background-image:url(/img/design/case03_img02.png);bottom:-6%;left:-20%;max-width:32%;}
#block-point01 .case-box .case-img img{display:block;position:relative;z-index:1;}
#block-point01 .case-box p{line-height:2;}
#block-point01 .case-box p + p{margin-top:2em;}
#block-point01 .case-box .view{margin-top:36px;}
#block-point01 .case-box .view .modal-link{position:relative;display:block;}
#block-point01 .case-box .view .modal-link::before{content:"";display:block;width:64px;height:64px;background:url(/img/design/view_icon.png) no-repeat;background-size:contain;position:absolute;right:16px;bottom:16px;}
#block-point01 .case-box.reverse{flex-direction:row;}

/* -------------------------------------------------- */
/* #block-point02 */
/* -------------------------------------------------- */
#block-point02{letter-spacing:0;}
#block-point02 .img img{width:100%;}
#block-point02 .container{padding-bottom:80px;}
#block-point02 .sub-ttl{font-size:3.6rem;font-weight:bold;text-align:center;margin-bottom:58px;line-height:1.3;margin-top:-20px;}
#block-point02 .lead{position:relative;text-align:center;}
#block-point02 .lead::before,#block-point02 .lead::after{content:"";position:absolute;top:45%;background:no-repeat center top;background-size:contain;transform:translateY(-50%);}
#block-point02 .lead::before{left:0;width:272px;height:270px;background-image:url(/img/design/sanin_pict01.png);max-width:22%;}
#block-point02 .lead::after{right:0;width:252px;height:266px;background-image:url(/img/design/sanin_pict02.png);max-width:21%;}
#block-point02 .lead p{line-height:2;}
#block-point02 .lead p + p{margin-top:2em;}
#block-point02 .gallery{display:flex;gap:24px;margin-top:65px;}
#block-point02 .gallery > li{width:calc((100% - 48px) / 3);}

/* -------------------------------------------------- */
/* #block-joint */
/* -------------------------------------------------- */
#block-joint{letter-spacing:0;}
#block-joint .container{padding-bottom:80px;}
#block-joint .container02{padding:60px;border:2px solid #000;}
#block-joint .joint_img{display:flex;justify-content:center;align-items:center;gap:0 200px;}
#block-joint .joint_img .img{position:relative;width:280px;}
#block-joint .joint_img .img + .img{position:relative;}
#block-joint .joint_img .img + .img::before{content:"";position:absolute;left:-160px;top:50%;width:120px;height:120px;background:url(/img/design/joint_multiply.png) left top / 100% auto no-repeat;transform:translateY(-50%);}
#block-joint .joint_img .img figcaption{position:absolute;left:50%;bottom:-8px;padding:8px 30px;color:#fff;font-size:2.4rem;line-height:1;border-radius:99px;white-space:nowrap;transform:translateX(-50%);}
#block-joint .joint_img .img-01 figcaption{background-color:#B81B22;}
#block-joint .joint_img .img-02 figcaption{background-color:#686D71;}
#block-joint .joint_txt{margin-top:60px;text-align:center;}
#block-joint .joint_txt p{line-height:2;}

/* -------------------------------------------------- */
/* #block-point */
/* -------------------------------------------------- */
#block-point{letter-spacing:0;}
#block-point .point_lead p{line-height:2;}
#block-point .point_list{display:flex;flex-wrap:wrap;gap:50px 40px;margin-top:40px;counter-reset:point;}
#block-point .point_list > li{width:calc(50% - 20px);}
#block-point .point_list > li .img{position:relative;display:flex;justify-content:center;align-items:center;width:200px;height:200px;margin:0 auto 24px;border-radius:50%;background-color:#F0FCFF;}
#block-point .point_list > li .img::before,#block-point .point_list > li .img::after{position:absolute;color:#0390B8;font-family:"Urbanist", sans-serif;}
#block-point .point_list > li .img::before{content:"POINT";top:0;left:-30px;font-size:1.2rem;font-weight:700;}
#block-point .point_list > li .img::after{top:20px;left:-50px;content:"0"counter(point);counter-increment:point;display:block;font-size:6.4rem;font-weight:900;line-height:1;}
#block-point .point_list > li .heading{font-size:2.2rem;font-weight:700;text-align:center;}
#block-point .point_list > li p{margin-top:1em;font-size:1.4rem;line-height:2;}

/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:999px){
  .parts-ttl{margin-bottom:60px;}

  /* -------------------------------------------------- */
  /* #block-intro */
  /* -------------------------------------------------- */
  #block-intro .container{padding-top:40px;padding-bottom:70px;}
  #block-intro .intro{display:block;margin-bottom:50px;}
  #block-intro .left{max-width:100%;}
  #block-intro .lead{text-align:center;margin-top:40px;}
  #block-intro .img{margin-top:25px;}

  /* -------------------------------------------------- */
  /* #block-point01 */
  /* -------------------------------------------------- */
  #block-point01 .box{display:block;}
  #block-point01 .img{text-align:center;margin:auto;max-width:50%;}
  #block-point01 .inner{margin-top:60px;}
  #block-point01 .sub-ttl-box .inner{min-width:1px;max-width:90%;}
  #block-point01 .sub-ttl-box .inner::before{max-width:15vw;}
  #block-point01 .case-box{display:block;}
  #block-point01 .case-box .case-img{max-width:90%;margin:auto;}
  #block-point01 .case-box .case-inner{margin-top:30px;}
  #block-point01 .case-box .view{max-width:80%;margin:35px auto 0;}
  #block-point01 .case01 .case-box .case-img::before{left:-10%;}
  #block-point01 .case02 .case-box .case-img::before{right:-10%;}
  #block-point01 .case03 .case-box .case-img::before{left:-10%;}

  /* -------------------------------------------------- */
  /* #block-joint */
  /* -------------------------------------------------- */
  #block-joint .joint_img{gap:0 13.9vw;}
  #block-joint .joint_img .img{width:19.4vw;}
  #block-joint .joint_img .img + .img::before{left:-11.1vw;width:8.3vw;height:8.3vw;}
  #block-joint .joint_img .img figcaption{padding:8px 15px;font-size:1.8rem;}
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:622px){
  .common-mv.design{background-image:url(/img/mv-design_sp.jpg);}

  .parts-ttl{font-size:3.6rem;margin-bottom:40px;}
  .parts-ttl .small{font-size:2rem;}
  .parts-ttl .num{font-size:3rem;width:60px;height:60px;margin:-30px auto 20px;}
  
  /* -------------------------------------------------- */
  /* #block-intro */
  /* -------------------------------------------------- */
  #block-intro .ttl{font-size:3.6rem;}

  /* -------------------------------------------------- */
  /* #block-point01 */
  /* -------------------------------------------------- */
  #block-point01 .container{padding-bottom:60px;}
  #block-point01 .ttl{font-size:2.4rem;margin-bottom:30px;}
  #block-point01 .inner{margin-top:40px;}
  #block-point01 .img{max-width:70%;}
  #block-point01 .slide-gallery{margin-top:40px;}
  #block-point01 .slide-gallery .item{width:30vw;padding:0 4px;}
  #block-point01 .sub-ttl-box .sub-ttl{margin-bottom:10px;font-size:3rem;}
  #block-point01 .sub-ttl-box .sub-ttl span{font-size:4rem;}
  #block-point01 .sub-ttl-box{margin-top:0;}
  #block-point01 .sub-ttl-box .inner{max-width:100%;padding:30px 25px 25px;width:100%;}
  #block-point01 .sub-ttl-box .inner::before{left:88%;}
  #block-point01 .case-ttl{display:block;font-size:2.4rem;margin-bottom:25px;margin-top:40px;}
  #block-point01 .case-ttl .en{font-size:2rem;gap:8px;}
  #block-point01 .case-ttl .en > span{font-size:4.2rem;}
  #block-point01 .case-box .view{max-width:100%;margin:25px auto 0;}
  #block-point01 .case-box .view .modal-link::before{width:40px;height:40px;}

  /* -------------------------------------------------- */
  /* #block-point02 */
  /* -------------------------------------------------- */
  #block-point02 .container{padding-bottom:60px;}
  #block-point02 .sub-ttl{font-size:2.4rem;margin:-10px auto 30px;}
  #block-point02 .lead{padding-bottom:40vw;}
  #block-point02 .lead::before{top:auto;bottom:0;left:8%;width:32vw;height:32vw;transform:none;background-position:left bottom;max-width:100%;}
  #block-point02 .lead::after{top:auto;bottom:0;right:8%;width:30vw;height:30vw;transform:none;background-position:right bottom;max-width:100%;}
  #block-point02 .gallery{gap:12px;margin-top:30px;}
  #block-point02 .gallery > li{width:calc((100% - 24px) / 3);}

  /* -------------------------------------------------- */
  /* #block-joint */
  /* -------------------------------------------------- */
  #block-joint .container{padding-bottom:60px;}
  #block-joint .container02{padding:30px 20px;}
  #block-joint .joint_img .img{flex:1;width:auto;}
  #block-joint .joint_img .img figcaption{font-size:1.2rem;}
  #block-joint .joint_txt{margin-top:30px;text-align:left;}

  /* -------------------------------------------------- */
  /* #block-point */
  /* -------------------------------------------------- */
  #block-point .point_list > li{width:100%;}
}