@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* 既存css設定の修正 */
#content{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}
#main_content{
  width:100%;
  max-width:100%;
}



/* ページ基本レイアウト */
.web-production{
  padding-bottom:100px;
  font-family: "Noto Sans JP", sans-serif;
  font-size:min(1.6vw,16px);
  font-weight:normal;
  color:#222;
  font-feature-settings: "palt";
}
.web-production .inner{
  width:min(94%,1120px);
  margin:auto;
}

@media screen and (max-width:750px){
  .web-production{
    padding-bottom:15%;
    font-size:3.7vw;
  }
  .web-production .inner{
    width:90%;
  }
}

.only_sp,
.only_sp_i,
.only_sp_f{
	display:none !important;
}

@media screen and (max-width:750px){
	.only_pc{
		display:none !important;
	}
	.only_sp{
		display:block !important;
	}
	.only_sp_i{
		display:inline-block !important;
	}
	.only_sp_f{
		display: -webkit-flex !important;
		display: flex !important;
	}
}


/* 色関係 */
.bg_sky{
  background-color:#f0f6fa;
}


/* 書式 */
.en{
  font-family: "Outfit", sans-serif;
}
.text_left{
	text-align:left !important;
}
.text_right{
	text-align:right !important;
}
.text_center{
	text-align:center !important;
}

.bold{
	font-weight:bold;
}
.heavy{
	font-weight:900;
}

.blc{
	display:block;
}


/* #mv */
#mv{
  max-height:400px;
  background:url(../img/web-production/mv_bg.webp)no-repeat center center;
  background-size:cover;
}
#mv .cont_wrapper{
  aspect-ratio:1120 / 400;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#mv .cont_wrapper .sec{
  color:#fff;
}
#mv .cont_wrapper .sec h1 .en{
  display:block;
  font-size:min(5vw,50px);
  letter-spacing:0.06em;
}
#mv .cont_wrapper .sec h1 .jp{
  display:block;
  font-size:min(1.8vw,18px);
  letter-spacing:0.08em;
}
#mv .cont_wrapper .sec p{
  margin-top:2em;
  white-space:nowrap;
  font-feature-settings: normal;
}
#mv .cont_wrapper .fig{
  width:min(45%,502px);
}

@media screen and (max-width:750px){
  #mv{
    max-height:none;
    aspect-ratio:750 / 860;
    background:url(../img/web-production/mv_bg_s.webp)no-repeat center top;
    background-size:cover;
  }
  #mv .cont_wrapper{
    aspect-ratio:auto;
    display:block;
    padding-top:11%;
  }
  #mv .cont_wrapper .sec h1{
    text-align:center;
  }
  #mv .cont_wrapper .sec h1 .en{
    font-size:10vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
  #mv .cont_wrapper .sec h1 .jp{
    font-size:4vw;
    letter-spacing:0.08em;
    text-indent:0.08em;
  }
  #mv .cont_wrapper .sec p{
    white-space:normal;
  }
  #mv .cont_wrapper .fig{
    width:auto;
    padding:5% 5% 0;
  }
}


/* .cont */
.cont{
  padding:min(9%,90px) 0;
}
.cont .head_wrapper{
  display:flex;
}
.cont .head_wrapper .tit{
  width:min(48%,540px);
}
.cont .head_wrapper .lead{
  width:min(52%,580px);
  line-height:2;
  letter-spacing:0.08em;
}

.cont .tit{
  font-size:min(3.5vw,40px);
  letter-spacing:0.06em;
}
.cont .tit .en{
  line-height:1.3;
  display:block;
  color:#9dc3d1;
}
.cont .tit .jp{
  line-height:1.6;
  display:block;
  margin-top:0.3em;
}

@media screen and (max-width:750px){
  .cont{
    padding:12% 0 15%;
  }
  .cont .head_wrapper{
    display:block;
  }
  .cont .head_wrapper .tit{
    width:auto;
    text-align:center;
  }
  .cont .head_wrapper .lead{
    width:auto;
    line-height:1.7;
    letter-spacing:0.08em;
    margin-top:5%;
  }

  .cont .tit{
    font-size:7vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
  .cont .tit .en{
    font-size:6vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
  .cont .tit .jp{
    line-height:1.4;
  }
}


/* .cta */
.cta{
  max-height:390px;
  padding:0;
  background:url(../img/web-production/cta_bg.webp)no-repeat center center;
  background-size:cover;
}
.cta .cont_wrapper{
  aspect-ratio:1120 / 390;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  color:#fff;
}
.cta .cont_wrapper .tit .en{
  color:rgba(211,236,255,0.4);
}
.cta .cont_wrapper p{
  width:min(58%,580px);
  line-height:2;
  letter-spacing:0.06em;
}
.cta .cont_wrapper .cta_btn{
  width:min(56%,560px);
  aspect-ratio:560 / 116;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:min(2.2vw,22px);
  font-weight:bold;
  letter-spacing:0.06em;
  color:#fff;
  background-color:#111;
  border:1px solid;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);
  -webkit-transition : color 0.4s, background-color 0.4s;
  transition : color 0.4s, background-color 0.4s;
}
.cta .cont_wrapper .cta_btn:hover{
  color:#111;
  background-color:#fff;
}
.cta .cont_wrapper .cta_btn svg{
  width:1.5em;
  margin-right:1em;
}
.cta .cont_wrapper .cta_btn:hover svg .cls-1{
  stroke: #111;
}
.cta .cont_wrapper .cta_btn:hover svg .cls-2{
  fill: #111;
}

@media screen and (max-width:750px){
  .cta{
    max-height:none;
    aspect-ratio:750 / 663;
    padding:15% 0 0;
    background:url(../img/web-production/cta_bg_s.webp)no-repeat center center;
    background-size:cover;
    position:relative;
  }
  .cta .cont_wrapper{
    aspect-ratio:none;
    display:block;
    position:static;
  }
  .cta .cont_wrapper .tit{
    text-align:center;
  }
  .cta .cont_wrapper p{
    width:auto;
    margin-top:5%;
    line-height:1.7;
  }
  .cta .cont_wrapper .cta_btn{
    width:90%;
    aspect-ratio:670 / 130;
    font-size:4.2vw;
  }
  .cta .cont_wrapper .cta_btn:hover{
    color:#fff;
    background-color:#111;
  }
  .cta .cont_wrapper .cta_btn:hover svg .cls-1{
    stroke: #fff;
  }
  .cta .cont_wrapper .cta_btn:hover svg .cls-2{
    fill: #fff;
  }
}


/* #cont1 */
#cont1{
}
#cont1 .tit{
  position:relative;
}
#cont1 .tit img{
  width:5.5em;
  position:absolute;
  right:0.3em;
  top:50%;
  transform:translateY(-50%);
}
#cont1 .needs{
  display:flex;
  flex-wrap:wrap;
}
#cont1 .needs li{
  width:25%;
  line-height:2;
  margin-top:min(4%,40px);
  padding-bottom:1em;
  font-weight:bold;
  letter-spacing:0.06em;
  padding-left:0.06em;
  text-align:center;
  position:relative;
}
#cont1 .needs li:before{
  content:'';
  display:block;
  width:1.5em;
  height:2.5em;
  margin:auto;
  background:url(../img/web-production/cont1_check.svg)no-repeat center top;
  background-size:100% auto;
}
#cont1 .needs li:after{
  content:'';
  display:block;
  width:1px;
  height:100%;
  background-color:#ddd;
  position:absolute;
  left:100%;
  top:0;
}
#cont1 .needs li:nth-child(4n+4):after{
  content:none;
}

@media screen and (max-width:750px){
  #cont1 .tit{
    position:static;
  }
  #cont1 .tit img{
    width:6em;
    position:static;
    right:auto;
    top:auto;
    transform:none;
    margin-top:5%;
  }
  
  #cont1 .needs li{
    width:50%;
    line-height:1.5;
    margin-top:9%;
    padding-bottom:1.5em;
  }
  #cont1 .needs li:before{
    content:'';
    display:block;
    width:1.2em;
    height:2em;
    margin:auto;
    background:url(../img/web-production/cont1_check.svg)no-repeat center top;
    background-size:100% auto;
  }
  #cont1 .needs li:after{
    content:'';
    display:block;
    width:1px;
    height:100%;
    background-color:#ddd;
    position:absolute;
    left:100%;
    top:0;
  }
  #cont1 .needs li:nth-child(4n+4):after{
    content:'';
    background-color:#ddd;
  }
  #cont1 .needs li:nth-child(2n+2):after{
    content:none;
  }
}


/* #cont2 */
#cont2{
}
#cont2 .works{
  margin-top:min(3%,30px);
  display:flex;
  flex-wrap:wrap;
}
#cont2 .works li{
  width:min(32%,356px);
  margin:min(3%,30px) min(2%,26px) 0 0;
}
#cont2 .works li:nth-child(3n+3){
  margin-right:0;
}
#cont2 .works li figure figcaption{
  margin-top:0.5em;
  line-height:1.8;
  font-size:min(1.7vw,17px);
  font-weight:bold;
  letter-spacing:0.06em;
  text-align:left;
}
#cont2 .works li figure figcaption .company{
  display:block;
  font-size:min(1.4vw,14px);
  font-weight:normal;
  letter-spacing:0.06em;
  color:#666666;
}

@media screen and (max-width:750px){
  #cont2 .works{
    margin-top:-5%;
    display:block;
  }
  #cont2 .works li{
    width:auto;
    margin:12% 0 0;
  }
  #cont2 .works li figure figcaption{
    margin-top:0.5em;
    font-size:4.2vw;
  }
  #cont2 .works li figure figcaption .company{
    font-size:3.4vw;
  }
}


/* #cont3 */
#cont3{
}
#cont3 .features{
  counter-reset: num;
  margin-top:min(5%,50px);
}
#cont3 .features li{
  counter-increment: num;
  margin-top:min(3%,30px);
  padding:min(3%,30px) min(5%,50px) min(4%,40px) min(6%,60px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #ddd;
  box-shadow:0 8px 10px rgba(0,0,0,0.05);
}
#cont3 .features li .sec{
  width:min(55%,550px);
}
#cont3 .features li .sec:before{
  content: "特徴 " counter(num, decimal-leading-zero) ;
  font-size:min(2vw,20px);
  font-weight:bold;
  letter-spacing:0.06em;
  color:#9dc3d1;
}
#cont3 .features li .sec h3{
  line-height:2.5;
  font-size:min(3.3vw,33px);
  letter-spacing:0.06em;
}
#cont3 .features li .sec p{
  line-height:2;
  letter-spacing:0.06em;
}
#cont3 .features li .fig{
  width:min(41%,410px);
}

@media screen and (max-width:750px){
  #cont3 .features{
    margin-top:9%;
  }
  #cont3 .features li{
    margin-top:7%;
    padding:12% 5% 9%;
    display:block;
  }
  #cont3 .features li .sec{
    width:auto;
    text-align:center;
  }
  #cont3 .features li .sec:before{
    font-size:3.7vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
  #cont3 .features li .sec h3{
    line-height:2.5;
    font-size:5.3vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
  #cont3 .features li .sec p{
    margin-top:1em;
    line-height:1.7;
    text-align:left;
  }
  #cont3 .features li .fig{
    width:auto;
    transform:scale(1.05);
    transform-origin:center top;
  }
}


/* #cont4 */
#cont4{
  padding-top:min(15%,150px);
}
#cont4 .service{
  margin-top:min(3%,30px);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
#cont4 .service > div{
  width:min(32%,356px);
  aspect-ratio:356 / 460;
  margin-top:min(3%,30px);
  text-align:left;
  padding:min(4%,40px);
  border:1px solid #ddd;
  box-shadow:0 8px 10px rgba(0,0,0,0.05);
}
#cont4 .service > div dt{
  margin-bottom:9%;
  font-size:min(2vw,20px);
  letter-spacing:0.06em;
  display:flex;
  align-items:center;
}
#cont4 .service > div dt img{
  width:1.4em;
  margin-right:0.5em;
}
#cont4 .service > div dd{
  line-height:2.3;
  font-size:min(1.5vw,15px);
  letter-spacing:0.06em;
  border-top:1px solid #ddd;
}
#cont4 .service > div dd:before{
  content:'・';
}

@media screen and (max-width:750px){
  #cont4{
    padding-top:min(15%,150px);
  }
  #cont4 .service{
    margin-top:min(3%,30px);
  }
  #cont4 .service > div{
    width:49%;
    aspect-ratio:325 / 580;
    margin-top:4%;
    padding:5% 4% 4%;
  }
  #cont4 .service > div dt{
    height:2.6em;
    line-height:1.3;
    margin-bottom:7%;
    font-size:3.7vw;
    align-items:flex-start;
  }
  #cont4 .service > div dt img{
    width:1.4em;
    margin-right:0.3em;
  }
  #cont4 .service > div dd{
    line-height:1.3;
    padding:0.3em 0 0.3em 0.5em;
    text-indent:-0.5em;
    font-size:3.1vw;
    white-space:nowrap;
  }
  #cont4 .service > div dd:before{
    content:'・';
  }
}


/* #cont5 */
#cont5{
}
#cont5 .sec{
  margin-top:min(4%,40px);
  padding:min(6%,60px);
  background-color:#fff;
  box-shadow:0 8px 10px rgba(0,0,0,0.05);
}
#cont5 .sec .fig_logo{
  width:min(14%,142px);
  float:right;
}
#cont5 .sec h3{
  padding-right:min(20%,200px);
  font-size:min(2.4vw,24px);
  letter-spacing:0.06em;
}
#cont5 .sec .lead{
  margin-top:1.5em;
  padding-right:min(20%,200px);
  line-height:2;
  letter-spacing:0.06em;
}
#cont5 .sec .genre{
  margin-top:min(4%,40px);
  display:flex;
  flex-wrap:wrap;
}
#cont5 .sec .genre dt{
  width:100%;
}
#cont5 .sec .genre dd{
  line-height:2.5;
  margin:1em 1em 0 0;
  padding:0 1.5em;
  font-size:min(1.5vw,15px);
  letter-spacing:0.06em;
  text-indent:0.06em;
  border:1px solid;
  border-radius:100px;
}

#cont5 .sec .example{
  margin-top:min(4%,40px);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
#cont5 .sec .example dt{
  width:100%;
}
#cont5 .sec .example dd{
  margin-top:1em;
  width:min(32%,320px);
  text-align:center;
}
#cont5 .sec .example dd a{
  color:#222;
}
#cont5 .sec .example dd a figure figcaption{
  line-height:1.3;
  display:inline-block;
  margin-top:0.5em;
  text-align:left;
  letter-spacing:0.06em;
  text-indent:0.06em;
}

@media screen and (max-width:750px){
  #cont5 .sec{
    margin-top:min(4%,40px);
    padding:9% 5%;
  }
  #cont5 .sec .fig_logo{
    width:19vw;
    float:none;
    margin:auto;
  }
  #cont5 .sec h3{
    margin-top:0.5em;
    padding-right:0;
    font-size:5vw;
    letter-spacing:0.06em;
    text-indent:0.06em;
    text-align:center;
  }
  #cont5 .sec .lead{
    margin-top:1.2em;
    padding-right:0;
    line-height:1.7;
  }
  #cont5 .sec .genre{
    margin-top:9%;
  }
  #cont5 .sec .genre dd{
    line-height:2;
    margin:0.8em 0.5em 0 0;
    padding:0 0.5em;
    font-size:3.3vw;
  }

  #cont5 .sec .example{
    margin-top:9%;
  }
  #cont5 .sec .example dd{
    margin-top:1.2em;
    width:auto;
  }
  #cont5 .sec .example dd a figure figcaption{
    line-height:1.3;
    display:inline-block;
    margin-top:0.5em;
    text-align:left;
    letter-spacing:0.06em;
    text-indent:0.06em;
  }
}


/* #cont6 */
#cont6{
}
#cont6 .pricing{
  margin-top:min(5%,50px);
  display:flex;
  justify-content:space-between;
}
#cont6 .pricing div{
  width:min(32%,356px);
  text-align:left;
  padding:min(4%,40px);
  border:1px solid #ddd;
  box-shadow:0 8px 10px rgba(0,0,0,0.05);
}
#cont6 .pricing div dt > .en{
  display:block;
  font-size:min(1.1vw,11px);
  letter-spacing:0.06em;
  color:#aaa;
}
#cont6 .pricing div dt .service{
  display:block;
  font-size:min(2vw,23px);
  letter-spacing:0.06em;
  white-space:nowrap;
}
#cont6 .pricing div dt .price{
  display:block;
}
#cont6 .pricing div dt .price .en{
  line-height:1;
  font-size:min(5.9vw,59px);
  letter-spacing:0.06em;
}
#cont6 .pricing div dt .price .small{
  font-size:min(2vw,20px);
  letter-spacing:0.06em;
}
#cont6 .pricing div dd{
  margin-top:1em;
  padding-top:1em;
  line-height:2.3;
  font-size:min(1.5vw,15px);
  letter-spacing:0.06em;
  border-top:1px solid #ddd;
}
#cont6 .caution{
  margin-top:min(5%,50px);
  font-size:min(1.4vw,14px);
  letter-spacing:0.06em;
}

@media screen and (max-width:750px){
  #cont6 .pricing{
    margin-top:min(5%,50px);
    display:block;
  }
  #cont6 .pricing div{
    width:auto;
    margin-top:7%;
    padding:12%;
  }
  #cont6 .pricing div dt > .en{
    font-size:2.5vw;
  }
  #cont6 .pricing div dt .service{
    font-size:5.7vw;
  }
  #cont6 .pricing div dt .price .en{
    font-size:14.6vw;
  }
  #cont6 .pricing div dt .price .small{
    font-size:4.9vw;
  }
  #cont6 .pricing div dd{
    font-size:3.7vw;
  }
  #cont6 .caution{
    margin-top:7%;
    padding-left:1em;
    text-indent:-1em;
    font-size:3.2vw;
  }
}


/* #cont7 */
#cont7{
}
#cont7 .faq{
  margin-top:min(5%,50px);
  padding-right:min(6%,60px);
}
#cont7 .faq div .accordion{
  padding:1.5em 3em 1.5em 0;
  display:flex;
  align-items:flex-start;
  font-weight:bold;
  cursor:pointer;
  border-bottom:1px solid #ddd;
  background:url(../img/web-production/accordion_close.svg)no-repeat right center;
  background-size:2em auto;
}
#cont7 .faq div .accordion.close{
  background:url(../img/web-production/accordion_open.svg)no-repeat right center;
  background-size:2em auto;
}
#cont7 .faq div .accordion:before{
  content:'Q';
  display:block;
  width:1.5em;
  line-height:1.5;
  margin-right:0.5em;
  font-family: "Outfit", sans-serif;
  font-size:min(2vw,20px);
  font-weight:bold;
  text-align:center;
  color:#fff;
  background-color:#222;
  border:1px solid #222;
}
#cont7 .faq div .accordion p{
  flex:1;
  line-height:1.7;
  font-size:min(1.7vw,17px);
}
#cont7 .faq div .accordion_cont{
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
#cont7 .faq div .accordion_cont .accordion_inner{
  padding:1.5em 0;
  display:flex;
  align-items:flex-start;
}
#cont7 .faq div  .accordion_cont .accordion_inner:before{
  content:'A';
  display:block;
  width:1.5em;
  line-height:1.5;
  margin-right:0.5em;
  font-family: "Outfit", sans-serif;
  font-size:min(2vw,20px);
  font-weight:bold;
  text-align:center;
  color:#222;
  background-color:#fff;
  border:1px solid #222;
}

#cont7 .faq div .accordion_cont .accordion_inner p{
  flex:1;
  line-height:1.7;
}

@media screen and (max-width:750px){
  #cont7 .faq{
    margin-top:5%;
    padding-right:0;
  }
  #cont7 .faq div .accordion{
    background-position:right 1.5em;
  }
  #cont7 .faq div .accordion.close{
    background-position:right 1.5em;
  }
  #cont7 .faq div .accordion:before{
    font-size:4.6vw;
  }
  #cont7 .faq div .accordion p{
    font-size:3.7vw;
  }
  #cont7 .faq div  .accordion_cont .accordion_inner:before{
    font-size:4.6vw;
  }
}