@charset "utf-8";
/*-------------------------------------------------
ホームページ制作
-------------------------------------------------*/

/* サービスの概要 */
.heading.summary{font-size: 240%; text-align: center; font-weight: 500; margin-bottom: 3rem;}
.image-text.summary{align-items: center;}
.image-text.summary .image{align-self: flex-start;}
.image-text+.image-text.summary{margin-top: 6em;}
@media screen and (max-width:960px){
.heading.summary{font-size: 160%; text-align: left; margin-bottom: 2rem;}
}

/*アテンドの強み*/
.tuyomi_items{margin: 4em auto; row-gap: 4em; align-items: stretch;}
.tuyomi_items:last-child{margin-bottom: 0;}
.tuyomi_item{display: flex; flex-direction: column; background: #fff; color: #000; padding: 3em 3em 2em; box-shadow: 0 0 1em rgba(0,0,0,0.2); position: relative;}
.tuyomi_item .heading{font-size: min(2.2vw,200%); margin-top: 0; font-feature-settings: "palt"; letter-spacing: 0.05em;}
.tuyomi_item .num{position: absolute; top: -0.5em; left: -0.5em; background: #10aa8f; color: #fff; font-weight: bold; width: 2em; height: 2em; display: inline-flex; align-items: center; justify-content: center; border-radius: 99em; font-size: 140%;}
.tuyomi_item .num:after{content: ""; display: inline-block; background: #10aa8f; width: 0.7em; height: 0.7em; position: absolute; right: 0; bottom: 0; clip-path: polygon(75% 0,100% 100%,0 75%);}
@media screen and (max-width:960px){
.tuyomi_items{margin: 3em auto; row-gap: 3em;}
.tuyomi_item{padding: 2em 1em 1em;}
.tuyomi_item .heading{font-size: 150%; text-align: center;}
.tuyomi_item .num{font-size: 120%; top: -0.8em; left: -0.8em;}
}

/*企業様リンク（カルーセル）*/
.link_company_wrap{}
.link_company{margin: 3em auto;}
.link_company .slick-slide{padding: 20px; display: flex; flex-direction: column; gap:40px;}
.link_company img{width: min(100%,400px); height: auto; aspect-ratio:16/9; object-fit: contain; margin: auto;}
@media screen and (max-width:960px){
.link_company{margin: 2em auto;}
.link_company .slick-slide{gap:20px;}
}

/*制作プランの各項目*/
.plan_wrap{}
.plan_item_wrapper{}

.plan_item_wrap{display: flex; justify-content: center; gap:3em 2px; margin: 6em auto 4em; padding: 0 0 0 4em;}
.plan_item{flex: 1; background: #fff; line-height: 1.6; position: relative;}
.plan_item.osusume{box-shadow: 0 0 0 1px inset #19529f , 0 0 0.7em rgba(43,149,255,0.7); background: #e9f4ff; z-index: 30;}
.plan_item .heading .fix_head{position: absolute; top: -2.8em; font-size: 0.9rem;}

.plan_item>*{padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0,30,90,0.2); position: relative;}
.plan_item>*:last-child{border-bottom: none;}
.plan_item p{margin: 0;}

.plan_image{border-bottom: none; padding-bottom: 0; width: min(300px , 80%); margin: auto;}
.plan_name{line-height: 1.2; text-align: center; font-size: 130%; display: flex; align-items: center; justify-content: center; min-height: 3em; margin: 0 !important; position: static;}
.plan_desc{font-size: 80%;}

.plan_price{font-size: 110%; color: #EF5064; font-weight: bold;}
.plan_price:before{content: "初期費用";}
.plan_page:before{content: "ページ数";}
.plan_design:before{content: "デザイン";}
.plan_cms:before{content: "CMS";}
.plan_photo:before{content: "撮影";}
.plan_time:before{content: "納期";}

.plan_osusume{font-size: 80%; justify-content: flex-start; gap:0.5em;}
.plan_osusume .heading{font-size: 110%;}

.plan_item>*:before{position: absolute; top: 50%; left: 0.5em; transform: translate(-100% , -50%); background: #7C8FA9; color: #fff; font-weight: bold; width: 6em; text-align: center; font-size: 0.9rem; padding: 0.3em 0;}

@media screen and (min-width:961px){
.plan_item{max-width: 75.3%;}
.plan_item.ec_plan{font-size: 120%;}
.plan_item:not(:first-child)>*:before{display: none;}
img.fix_img_plan{position: absolute; top: 3em; right: 0; width: 30%; aspect-ratio:3/2; background: #fff; object-fit: contain;}
}

@media screen and (max-width:960px){
.plan_item_wrap{margin-top: 3em; padding: 0; flex-direction: column;}
.plan_item{box-shadow: 0 0 0.5em rgba(0,30,90,0.2);}

.plan_item.osusume{margin-top: 1em;}

.plan_name{font-size: 160%;}

.plan_desc{font-size: 90%;}

.plan_price,
.plan_page,
.plan_design,
.plan_cms,
.plan_photo,
.plan_time{align-items: flex-start; padding-left: 6rem;}

.plan_osusume{font-size: 90%;}

.plan_item>*:before{font-size: 0.6rem; transform: translate(0 , -50%); color: #7C8FA9; background: #e5ecf4; left: 1rem;}
}
/*付帯するサービスなどを囲む箱*/
.plan_box{background: #fff; padding: 2rem; margin: 2em auto;}
.plan_box.green{background: #F0FFF0; box-shadow: 0 0 0 1px #40BF40 , 0 0 0.7em rgba(0,255,0,0.4);}
.plan_box+.plan_box{margin-top: 4em;}

.plan_box>.heading.style2:first-child{margin: -2rem -2rem 0.7em; background: #f5f5f5;}
.plan_box>.heading.style2:first-child .fix_head{position: absolute; top: -1.5em; left: -1em;}
.plan_box>.heading.style2:first-child:has(.fix_head){padding-top: 0.8em; padding-bottom: 0.8em;}
.plan_box>.heading.style2:first-child:has(.fix_head):before{display: none;}
.plan_box.green>.heading.style2{background: #E1F5E1;}

.heading .registered-trademark{font-size: min(3.2vw,1rem); font-weight: 400; display: inline-block; margin: 0 0 0 1em;}

.plan_plus{text-align: center; font-size: 200%; line-height: 1; margin: 1rem auto; color: #7c8fa9;}
.plan_box+.plan_plus{margin: -1rem auto;}

@media screen and (max-width:960px){
.plan_box{padding: 1rem; font-size: 90%;}
.plan_box>.heading.style2:first-child{margin: -1rem -1rem 0.7em;}
.plan_box>.heading.style2:first-child .fix_head{left: -0.5em;}
.heading .registered-trademark{margin: 0;}
}
/*標準付帯サービス*/
.futai_items{display: flex; gap:1em 2%; flex-wrap: wrap; margin: 1em auto;}
.futai_items>*{width: calc(25% - 1.5%); display: flex; align-items: center; justify-content: flex-start; gap:1em;}
.futai_items .image{width: 4em; align-items: flex-start;}
.futai_items .image img{width: 100%; aspect-ratio:1/1;}
.futai_items .text{flex: 1;}
.futai_items .heading{margin: 0; line-height: 1.2; font-size: 110%;}
@media screen and (max-width:960px){
.futai_items>*{width: 100%;}
}
/*オプション画像*/
.op_images1{display: flex; gap:2em; margin: 2em auto 1em; width: 90%;}
.op_images1>*{flex: 1;}
.op_images1 img{width: 100%; aspect-ratio:3/2; object-fit: cover;}
@media screen and (max-width:960px){
.op_images1{gap:1em; flex-wrap: wrap; width: 100%;}
.op_images1>*{flex:initial; width: calc(50% - 0.5em);}
}