@charset "UTF-8";

/*!------------------------------------------------------------------
[service.html]
*/


:root {
--bg-color01: #E2E2E2;/* B 89％ */
--bg-color02: #F0F0F0;/* B 94％ */
}


.w48,.w64,.w768,.w980{display:none}
@media screen and (max-width:1100px){.pconly{display:none}}
@media screen and (max-width:980px){.w980{display:inline}}
@media screen and (max-width:768px){.w768{display:inline}}
@media screen and (max-width:640px){.w64{display:inline}.w64none{display:none}}
@media screen and (max-width:480px){.w48{display:inline}}


.second-service-margin{padding:10px}

/*御社ならではのユニークなホームページをお創りします。*/
.second-service-title{display:block;font-size:3vw;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;letter-spacing:0;color:#121212;text-align:left;margin:1% 0 5%;padding:0}
.second-service-title span{display:block;font-size:3.2vw;padding:0}

@media (max-width: 980px){
.second-service-title{font-size:5vw;}
.second-service-title span{font-size:5.5vw;}
}
@media (max-width: 480px){
.second-service-title,
.second-service-title span{font-size:6.2vw;}
}

/*H2 タイトル*/
.service-subtitle{position:relative;width:calc(100% - 20px);margin: 0 10px 10px 10px;padding: 2% 5%;font-size:3rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;border-radius:10px;overflow:hidden}

.gbg01	{background: var(--bg-color01);}
.gbg02	{background: var(--bg-color02);}

@media (max-width: 640px){
.service-subtitle	{padding: 5%;font-size:5vw;}
}


.service-subtitle	img.forpc	{}
.service-subtitle	img.forsp,.s05 img.forsp	{display: none}

/*OKデザインが得意なホームページ*/
.service-subtitle.s02 img{max-width: 900px;width: 100%;height:auto;}
/*ホームページ制作のご提案*/
.service-subtitle.s03 img{max-width: 675px;width: 100%;height:auto;}
/*ホームページ方針作成*/
.service05-title.s05 img{max-width: 562px;width: 100%;height:auto;}
/*ホームページ素材作成*/
.service-subtitle.s06 img{max-width: 562px;width: 100%;height:auto;}
/*ホームページデザインでの販促物制作*/
.service-subtitle.s07 img{max-width: 619px;width: 100%;height:auto;}
/*ホームページの管理・運用*/
.service-subtitle.s08 img{max-width: 674px;width: 100%;height:auto;}


@media (max-width: 1200px){
/*OKデザインが得意なホームページ*/
.service-subtitle.s02 img{max-width: 611px;width: 100%;height:auto;}
/*ホームページ制作のご提案*/
.service-subtitle.s03 img{max-width: 458px;width: 100%;height:auto;}
/*ホームページ方針作成*/
.service05-title.s05 img{max-width: 381px;width: 100%;height:auto;}
/*ホームページ素材作成*/
.service-subtitle.s06 img{max-width: 381px;width: 100%;height:auto;}
/*ホームページデザインでの販促物制作*/
.service-subtitle.s07 img{max-width: 421px;width: 100%;height:auto;}
/*ホームページの管理・運用*/
.service-subtitle.s08 img{max-width: 459px;width: 100%;height:auto;}
}

@media (max-width: 990px){
.service-subtitle{padding: 5%;text-align: center}
.service-subtitle	img.forpc,.s05 img.forpc	{display: none}
.service-subtitle	img.forsp,.s05 img.forsp	{display: inline}
.service-subtitle.s02 img,
.service-subtitle.s03 img,
.service05-title.s05 img,
.service-subtitle.s06 img,
.service-subtitle.s07 img,
.service-subtitle.s08 img{max-width: 100%;width: 80%;height:auto;}
}
@media (max-width: 499px){
.service-subtitle.s02 img,
.service-subtitle.s03 img,
.service05-title.s05 img,
.service-subtitle.s06 img,
.service-subtitle.s07 img,
.service-subtitle.s08 img{width: 100%;}
}



/*OKデザインが得意なホームページ*/
.service01-area	{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:calc(100% - 20px);margin:10px;color: #121212}
.service01-area-inner-block	{flex-grow:1;padding: 2% 3%;margin-right: 10px;border-radius:10px;background: var(--bg-color02);}
.service01-area-inner-block:last-child	{margin-right: 0;}
.service-subtitle-s	{margin-bottom: 20px;font-size:2.5rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;text-align: center}
.service-01illust{text-align: center}
.service-01illust	img{max-height: 330px;width: auto;}
.service01-text	{margin-bottom: 2rem}

@media (max-width: 1200px){
/*リンクボタン長さ調整*/
.linkbutton-content.goodat	{width: 200px;}
}
@media (max-width: 980px){
.service01-area	{display:block}
.service01-area-inner-block,.service01-area-inner-block:last-child	{margin: 0 0 10px 0;padding: 4% 3% 5% 3%;}

.linkbutton-content.goodat	{width: 290px;}
}



/*ホームページ制作をされたお客様の声はこちら*/
.service02-area	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position:relative;width:calc(100% - 20px);margin: 0 10px 10px 10px;padding: 2% 3%;background: var(--bg-color02);border-radius:10px;color: #121212}

.service02-inner-block	{margin-right: 30px;padding: 10px;background: #fff;border-radius:10px;text-align: center}
.service02-photo	{margin-bottom: 1.3rem;}
.service02-text	{font-size: 1.2rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;}
.service02-inner-block	img{border-radius:7px;}
.service02-inner-block2	{}

/*2行用追記*/
.linkbutton-content.line2{ height:85px;padding: 15px 20px 25px 20px;}
.linkbutton-content.line2	.text	{line-height: 1.5em}

@media (max-width: 1400px){
.service02-inner-block	{margin-right: 15px;}
}

@media (max-width: 1250px){

}

@media (max-width: 1250px){
.service02-area	{-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.service02-inner-block	{-ms-flex-preferred-size: 47%;flex-basis: 47%;margin-bottom: 20px;}
.service02-inner-block2{-ms-flex-preferred-size: 47%;flex-basis: 47%;}
}

@media (max-width: 768px){
.service02-area	{display: block;padding: 4% 3% 6% 3%;}
.service02-inner-block	{margin: 0 0 20px 0}
.linkbutton-content.line2{margin-top: 30px;}
}

/*ホームページ制作料金*/
.service03-area	{position:relative;width:calc(100% - 20px);margin: 0 10px 10px 10px;padding: 2% 3%;background: var(--bg-color02);border-radius:10px;color: #121212}

.service03-title	{padding: 10px 0 20px 0;font-size:3rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;text-align: center}

.service03-lead	{display: block;margin-bottom: 20px;text-align: center}
.service03-lead	span{display: inline-block;margin: 0 auto;text-align: left}

.service03-area-inner	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.service03-pricelist	{-ms-flex-preferred-size: 65%;flex-basis: 65%;}
.service03-illust	{-ms-flex-preferred-size: 30%;flex-basis: 30%;padding: 20px;}

.service03-pricelist	dl	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin:0 0 15px 0;background: #fff;border-radius: 12px;}
.service03-pricelist	dl:last-child	{margin: 0}
.service03-pricelist	dt,.service03-pricelist	dd{padding: 20px;font-size: 2.2rem;line-height: 1em;white-space: nowrap}
.service03-pricelist	dd{padding-left: 0;text-align: right}


/*横長に追記*/
.linkbutton-content.service03-link{ width: 360px;}

@media (max-width: 1024px){
.service03-pricelist	dt,.service03-pricelist	dd{font-size: 2rem;}
}


@media (max-width: 980px){
.service03-area	{padding: 4% 3% 5% 3%;}
.service03-area-inner	{-ms-flex-wrap: wrap;flex-wrap: wrap;}
.service03-pricelist{-ms-flex-preferred-size: 100%;flex-basis: 100%;}
.service03-illust	{-ms-flex-preferred-size: 100%;flex-basis: 100%;padding: 20px;text-align: center}
.service03-illust	img{max-width: 400px;width: 100%;}
}

@media (max-width: 768px){
.service03-area-inner	{display: block}
.service03-pricelist	dl{display: block;width: 100%;}
.service03-pricelist	dt,.service03-pricelist	dd{font-size: 1.8rem;}
.service03-pricelist	dt{padding: 15px 15px;}
.service03-pricelist	dd{padding: 0 15px 15px 15px}
}

@media (max-width: 480px){
.service03-area	{padding: 3% 3% 6% 3%;}
.service03-title	{font-size:6.5vw;}
.linkbutton-content.service03-link	{width: 300px;}
}



/*ホームページ制作のご提案*/
.service04-01-area	{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;width:calc(100% - 20px);margin: 0 10px 0 10px;color: #121212;}
.service04-area-inner-block	{-ms-flex-preferred-size: calc(50% - 5px);flex-basis: calc(50% - 5px);margin: 0 10px 10px 0;padding: 2% 3%;background: var(--bg-color01);border-radius:10px;}
.service04-area-inner-block:nth-child(2n)	{margin: 0 0 10px 0;}

.service04-title	{padding: 10px 0 20px 0;font-size:3rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;text-align: center}
.service04-illust	{text-align: center}
.service04-illust	img{max-width: 300px;width: 100%;}
.service04-text	{}

.service04-02-area{margin: 0 10px 10px 10px;padding: 0.5% 3% 2% 3%;background: var(--bg-color01);border-radius:10px;}

/*横長に変更：追記*/
.linkbutton-content.service04-link{ width: 360px;}

@media (max-width: 980px){
.service04-area-inner-block	{-ms-flex-preferred-size: 100%;flex-basis: 100%;margin: 0 0 10px 0;}


}
@media (max-width: 480px){
.service04-title	{font-size:6.5vw;}
.linkbutton-content.service04-link{ width: 300px;}
}

/*ホームページ方針作成*/
.service05-subtitle	{padding: 10px 0 20px 0;font-size:4rem;font-family:'Noto Sans JP',sans-serif;font-weight:700;line-height:1.4;color: #e60012;}

.service05-area	{position:relative;width:calc(100% - 20px);margin: 0 10px 10px 10px;padding: 3% 3%;background: var(--bg-color02);color: #121212;border-radius:10px;}

.service05-area-inner	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.service05-content	{-ms-flex-preferred-size:50%;flex-basis: 50%;}
.service05-illust	{-ms-flex-preferred-size: 42%;flex-basis: 42%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;text-align: center;margin-right: 8%}


.service05-content	ul{list-style-type:none;margin-bottom: 1em;font-size: 2rem;font-family:'Noto Sans JP',sans-serif;font-weight:500;}
.service05-content	li{margin-left:0;text-indent:-1.1em;padding-left:1em;padding-top:0.3em;padding-bottom:0.3em;line-height:140%;}
.service05-content	li:before{content:"● "}
.service05-content	li	br{display: none}

@media (max-width: 1620px){
.service05-illust	{-ms-flex-preferred-size: 50%;flex-basis: 50%;margin-right: 0}
}

@media (max-width: 1420px){
.service05-content	{-ms-flex-preferred-size:55%;flex-basis: 55%;}
.service05-illust	{-ms-flex-preferred-size: 45%;flex-basis: 45%;}
.service05-illust	img{max-width: 100%;}
.service05-subtitle	{font-size:2.6vw;}
}

@media (max-width: 1200px){
.service05-content,
.service05-illust	{-ms-flex-preferred-size: 100%;flex-basis: 100%;}

.service05-content	{margin-bottom: 30px;}

.service05-subtitle	{font-size:4rem;}
}

@media (max-width: 990px){
.service05-title,.service05-subtitle	{text-align: center}

}

@media (max-width: 480px){
.service05-area	{padding: 3% 3% 6% 3%;}
.service05-subtitle	{font-size:6.5vw;}
.service05-content	li	br{display: inline}
}

/*ホームページ素材作成 / ホームページデザインでの販促物制作*/
.service06-area,.service07-area		{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 10px;}
.service06-content,.service07-content	{-ms-flex-preferred-size: calc(33.333333% - 9px);flex-basis: calc(33.333333% - 9px);}

.service06-content,.service07-content	{position:relative;margin: 0 10px 10px 0;padding: 2% 3%;color: #121212;border-radius:10px;}
.service06-content:nth-child(3n),.service07-content:nth-child(3n)	{margin: 0 0 10px 0;}
.service06-content	{background: var(--bg-color01);}
.service07-content	{background: var(--bg-color02);}

.service06-title,.service07-title  {display: block;font-size: 3rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4;letter-spacing: 0;color: #121212;text-align: center;margin: 0;padding: 0 0 4%;}
.service06-icon,.service07-icon  {display: block;font-size: 5rem;color: #121212;text-align: center;margin: 0;padding: 0 0 4%;}
.service06-text,.service07-text {display: block;width: 100%;font-size: 1.4rem;font-family: 'Noto Sans JP', sans-serif;font-weight: 500;line-height: 1.8;letter-spacing: 0;color: #121212;text-align: left;margin: 0;padding: 0;}

@media (max-width: 980px){
.service06-content	{-ms-flex-preferred-size: calc(50% - 10px);flex-basis: calc(50% - 10px);}
.service06-content:nth-child(3n)	{margin: 0 10px 10px 0;}
.service06-content:nth-child(2n)	{margin: 0 0 10px 0;}

}

@media (max-width: 768px){
.service06-content,.service07-content	{-ms-flex-preferred-size: 100%;flex-basis: 100%;padding: 4% 3%;}
}

@media (max-width: 480px){
.service06-title,.service07-title	{font-size:6.5vw;}
}

/*ホームページの管理・運用*/
.service08-area		{position:relative;width:calc(100% - 20px);margin: 0 10px 10px 10px;padding: 4% 3% 2% 3%;background: var(--bg-color01);color: #121212;border-radius:10px;}

.service08-area-inner	{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.service08-contents	{-ms-flex-preferred-size: 52%;flex-basis: 52%;}
.service08-illust	{-ms-flex-preferred-size: 43%;flex-basis: 43%;}

.service08-title	{margin-bottom: 30px;font-size: 3rem;font-family:'Noto Sans JP',sans-serif;font-weight:600;line-height:1.4}
.service08-text	{}

.service08-illust	{display:-webkit-box;display:-ms-flexbox;display:flex;}

@media (max-width: 980px){
.service08-title	br{display: none}
.service08-area-inner	{display:block}
.service08-contents	{margin-bottom: 20px;}
.service08-illust	p{padding: 0 2%}
}


@media (max-width: 480px){
.service08-area	{padding: 3% 3% 6% 3%;}
.service08-title	{font-size:6.5vw;}
}