@charset "utf-8";
#under-mv { overflow: hidden;}
/*===========================
#worries　お悩み
============================*/
#create-list .inner-wrap #worries.create-contents { align-items: center; justify-content: center;}
#create-list .inner-wrap #worries.create-contents .colum1{ width: 80%; padding: 20px 60px 30px 40px; border-radius: 20px; border: solid 1px #aaa; margin-bottom: 0;}
#create-list .inner-wrap #worries.create-contents .colum1 h2{ padding: 0 0 20px;}
#create-list .inner-wrap #worries.create-contents .colum1 ul{ width: 99%; display: flex; flex-direction: column; margin-left: 1%;}
#create-list .inner-wrap #worries.create-contents .colum1 ul li{ padding-left: 1em; display: flex; line-height: 1.2em; margin-bottom:15px;}
#create-list .inner-wrap #worries.create-contents .colum1 ul li::before{ width: 12px; content: "●"; font-size: 6px; margin-left: -16px; text-align: left;}
#create-list .inner-wrap #worries.create-contents .colum1 p.end{ display: block; font-weight: 500;}
@media screen and (max-width: 800px) {
#create-list .inner-wrap #worries.create-contents .colum1{ width: 90%; padding: 20px 15px 30px; margin: 20px 5% 0;}
}
@media screen and (max-width: 600px) {
#create-list .inner-wrap #worries.create-contents .colum1 ul li{ margin-bottom:8px;}
#create-list .inner-wrap #worries.create-contents .colum1 p.end{ margin-top: 15px; font-weight: bold;}
}

/*===========================
create-list section-accordion
アコーディオン qa
============================*/
#youbou { padding: 40px 0 !important;}
#youbou .tag-select-wrap{ padding: 0 20px;}
/*絞り込み：tag-select*/
#create-list .inner-wrap .create-contents .tag-div{ width: 100%; display: flex; flex-direction: row; align-items: center;}
#create-list .inner-wrap .create-contents .tag-div p{ display: block; font-size: 10px; font-weight: 500; margin-right: 15px; white-space: nowrap; margin-bottom: 4px;}
/**/
#create-list .inner-wrap .create-contents .tag-div ul.tag-select { width: 100%; display: flex; flex-wrap: wrap;}
#create-list .inner-wrap .create-contents .tag-div ul.tag-select li{ display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 4px 8px; border: solid 1px #aaa; background: #fff; margin: 0 8px 4px 0; border-radius: 3px; cursor: pointer; transition: 0.3s;}
#create-list .inner-wrap .create-contents .tag-div ul.tag-select li.active{ background: #444; border: solid 1px #444; color: #fff; pointer-events: none;}
/*リスト　create-contents　*/
#create-list .inner-wrap .create-contents .colum1, 
#create-list .inner-wrap .create-contents .colum1 dl{ width: 100%; display: flex; flex-direction: column;} 
#create-list .inner-wrap .create-contents .colum1 dl *{ width: 100%; display: flex; flex-direction: row; position: relative;}
#create-list .inner-wrap .create-contents .colum1 dl dd{ display: none;}
#create-list .inner-wrap .create-contents .colum1 dl dd.open{ display: flex;}
/**/
#create-list .inner-wrap .create-contents .colum1.request-contents dl { padding: 5px; margin:8px 0; box-shadow: 0 0 0 1px #ccc; border-radius: 6px; transition: 0.5s; cursor: pointer;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt{ padding: 10px 10px 10px 40px; font-size: 18px; line-height: 1.2em; display: flex;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt::before, 
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt::after{ width: 2px; height: 12px; border-radius: 4px; position: absolute; content: ""; left: 10px; top: 50%; margin-top: -4px; background: #111; transition: 0.4s;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt::before{ transform: rotate(-45deg);}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt::after{ transform: rotate(45deg); margin-left: 8px;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::before, 
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::after{ height: 20px; left: 14px; margin-top: -10px; background: #555;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl:has(.open){ box-shadow: 0 0 0 1px #555;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::after{ height: 20px; left: 14px; margin-top: -10px;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::after{ margin-left: 1px;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dd{ padding: 10px; margin-top: 4px; border-top: solid 1px #aaa;}
@media screen and (min-width: 800px) {
#create-list .inner-wrap .create-contents .tag-div ul.tag-select li:hover{ background: #f5f5f5; border: solid 1px #999;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl:hover { box-shadow: 0 0 0 3px #555;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt:hover::before, 
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt:hover::after{ top: 56%;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open:hover::before, 
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open:hover::after{ top: 50%;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl:has(.open):hover { box-shadow: 0 0 0 1px #ddd;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt:hover.open::before { height: 20px; left: 14px; margin-top: -10px;}
}
@media screen and (max-width: 800px) {
#youbou{ padding: 20px 5% !important;}
#youbou .tag-select-wrap{ padding: 0;}

#create-list .inner-wrap .create-contents .colum1.request-contents dl { padding:10px 5px; box-shadow: 0 2px 6px rgba(0,0,0,.2); border: solid 1px #aaa; border-radius: 2px;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl:has(.open){ box-shadow: 0 0 0 2px #444;  border: solid 1px #444;}
}
@media screen and (max-width: 600px) {
#create-list .inner-wrap .create-contents .tag-div ul.tag-select li{ min-height: 34px; font-size: 11px; font-weight: bold;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::before, 
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt.open::after{ height: 18px; background: #000;}
#create-list .inner-wrap .create-contents .colum1.request-contents dl dt{font-weight: bold; font-size: 16px;}
}

/*-----------------
priceList 料金の目安
-----------------------*/
.priceList{ padding: 15px; border-radius: 6px; border: solid 1px #999; align-items: stretch;}
.priceList h3{ display: flex; flex-direction: column; padding-right: 15px; margin-right: 15px; align-items: flex-start; justify-content: center; border-right: solid 1px #ccc;}
.priceList h3 .b{ font-size: 16px; font-weight: 500; white-space: nowrap;}
.priceList h3 .t{ font-size: 10px; font-weight: 500; white-space: nowrap; color: #444; line-height: 1.2em; margin-top: 4px;}
/**/
.priceList .priceBox{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;} 
.priceList .priceBox .box{ width: 25%; padding: 20px 0; display: flex; flex-direction: column; align-items: center;} 
.priceList .priceBox .box h4{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
.priceList .priceBox .box h4 .eng, 
.priceList .priceBox .box h4 .eng *{ font-weight: 300; font-size: 12px; color: #666; line-height: 1em;}
.priceList .priceBox .box h4 .jpn{ margin-bottom: 5px;}
.priceList .priceBox .box h4 .jpn, 
.priceList .priceBox .box h4 .jpn *{ font-weight:700; font-size: 14px; line-height: 1.8em;}
.priceList .priceBox .box p{ width: 100%; display: flex; flex-direction: row; align-items: baseline; justify-content: center; font-size: 18px; letter-spacing: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 400;}
.priceList .priceBox .box p span{ font-size: 13px; letter-spacing: 0; font-weight: 500;}
.priceList .priceBox p.price-links{ width: 100%; display: flex; flex-direction: row; justify-content: center;}
.priceList .priceBox p.price-links a{ font-size: 12px; display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: solid 1px #ccc; color: #555; border-radius: 3px; margin: 0 5px; line-height: 1em; font-weight: 500;}
.priceList .priceBox p.price-links a:hover{ background: #555; border: solid 1px #555; color: #fff;}
.priceList .priceBox p.price-links a.af:hover{ background: var(--color-contact2);}
.priceList .priceBox p.price-links a.af.form:hover{ background: var(--color-contact);}
@media screen and (max-width: 1000px) {
.priceList{ flex-direction: column; align-items: flex-start; margin: 30px 0 50px;}
.priceList h3{ flex-direction: row; padding-right: 0; margin-right: 0; justify-content: flex-start; align-items: baseline; border-right: none;}
.priceList h3 .b{ padding: 0 5px 0 10%; font-size: 14px;}
.priceList h3 .t br{ display: none;}
}
@media screen and (max-width: 900px) {
.priceList .priceBox .box{ width: 50%;} 
.priceList .priceBox .box:nth-child(1){ border-bottom: solid 1px #aaa; border-right: solid 1px #aaa;}
.priceList .priceBox .box:nth-child(2){ border-bottom: solid 1px #aaa;}
.priceList .priceBox .box:nth-child(3){ border-right: solid 1px #aaa;}
.priceList .priceBox p.price-links{ margin-top: 20px;}
.priceList .priceBox p.price-links a{ height: 44px; line-height: 1em; border: solid 1px #999;}
}
@media screen and (max-width: 800px) {
.priceList h3{ width: 100%; justify-content: center; margin-bottom: 5px;}
}
@media screen and (max-width: 600px) {
.priceList .priceBox .box{ width: 100%; padding: 10px; flex-direction: row; border-right: none !important; border-bottom: solid 1px #aaa;}
.priceList .priceBox .box *{ white-space: nowrap;}
.priceList .priceBox .box h4 { width: 50%; margin-bottom: 0; justify-content: center; align-items: flex-start;}
.priceList .priceBox .box h4 .jpn,
.priceList .priceBox .box h4 .jpn *{ line-height: 1.4em; margin: 0;}
.priceList .priceBox .box p{ width: 50%; font-size: 16px; justify-content: flex-end;}
}

/*-----------------
strengths 当社の強みと選ばれる理由
-----------------------*/
#strengths{}
#strengths .strengthsTxt{ width: 100%; display: flex; flex-direction: column;}
#strengths .strengthsTxt p{ width: 100%; display: flex; font-size: 14px; margin-bottom: 30px;}
.inner-wrap #strengths.create-contents .colum4.itemList{ justify-content: space-between; padding: 15px; flex-wrap: wrap; border: solid 1px #aaa; border-radius: 10px;}
/**/
#strengths .colum4 h3{ width: 100%; text-align: center; font-weight: 500; font-size: 18px; padding: 20px 0;}
#strengths .colum4 h3 br{ display: none;}
#strengths .colum4 .create-strengths{ width: 100%; display: flex; align-items: center; justify-content: center; margin: 10px 0 30px;}
#strengths .colum4 .create-strengths p{ width: 100px; display: flex; flex-direction: column; margin-right: 20px;}
#strengths .colum4 .create-strengths p img{}
#strengths .colum4 .create-strengths p span{ font-size: 12px; text-align: center; font-weight: 500;}
#strengths .colum4 .create-strengths ul{ padding:10px 0px 10px 50px; display: flex; flex-direction: column; background: url(../../img/create/tasu.gif) 0 50% no-repeat; background-size: contain;}
#strengths .colum4 .create-strengths ul li{ display: flex; align-items: center; font-size: 14px; font-weight: 500; margin: 10px 0; line-height: 1em; padding-left: 20px;}
#strengths .colum4 .create-strengths ul li span{ width: 120px; font-size: 14px; font-weight: 500; line-height: 1em; display: flex; justify-content: space-between; letter-spacing: 0;}
#strengths .colum4 .create-strengths ul li span::after{ content: "：";}
#strengths .colum4 .create-strengths ul li::before{ content: "＋"; margin-left: -20px; width: 20px; text-align: left;}
/**/
.inner-wrap #strengths.create-contents .colum4.itemList .item{ width: 21%; margin: 0;}
.inner-wrap #strengths.create-contents .colum4.itemList .item h4{}
.inner-wrap #strengths.create-contents .colum4.itemList .item h4 .eng{ font-size: 13px; color: #666;}
.inner-wrap #strengths.create-contents .colum4.itemList .item h4 b{ border-bottom: solid 1px #555; padding-bottom: 10px; margin-bottom: 10px;}
.inner-wrap #strengths.create-contents .colum4.itemList .item ul{ width: 100%; display: flex; flex-direction: column;}
.inner-wrap #strengths.create-contents .colum4.itemList .item ul li{ width: 100%; padding-left: 12px; font-size: 12px; line-height: 1.2em; margin:3px 0; font-weight: 500;}
.inner-wrap #strengths.create-contents .colum4.itemList .item ul li::before{ content: "・"; width: 12px; text-align: left; margin-left: -12px;}
/**/
.inner-wrap #strengths.create-contents .colum4 .site-setting{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background: var(--create-color); padding:10px 10px 5px; border-radius: 4px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting h5{ display: block; font-size: 12px; font-weight: 400; margin: 5px 0 10px; padding-bottom: 5px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 25px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl > * { width: 100%; display: flex; line-height: 1.2em;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dt{ font-weight: bold; font-size: 14px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dd{ font-weight: 400; font-size: 12px;}
@media screen and (max-width: 1160px) {
.inner-wrap #strengths.create-contents .colum4.itemList{ padding: 15px 5px;}
.inner-wrap #strengths.create-contents .colum4.itemList .item{ width: 44%; margin: 0 3% 20px;}
}
@media screen and (max-width: 1000px) {
.inner-wrap #strengths.create-contents .colum4 .site-setting dl{ flex-direction: column; margin: 5px 0;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dt::after{ display: none;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dt{ width: 100%; padding: 5px 0; font-size:15px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dd{ padding-left: 0; font-weight: 400;}
}
@media screen and (max-width: 800px) {
#strengths{ padding: 20px 5% !important;}
}
@media screen and (max-width: 600px) {
#strengths .colum4 h3{ font-weight: bold;}
#strengths .colum4 h3 br{ display: block;}
#strengths .colum4 .create-strengths p{ width: 22%; margin-right: 2%;}
#strengths .colum4 .create-strengths p span{ font-size: 2.2vw; letter-spacing: 0; font-weight: bold; margin-top: 5px;}
#strengths .colum4 .create-strengths ul{ padding:10px 0px 10px 44px;}
#strengths .colum4 .create-strengths ul li { padding-left: 14px;}
#strengths .colum4 .create-strengths ul li span{ width: auto; padding-left: 5px;}
#strengths .colum4 .create-strengths ul li, 
#strengths .colum4 .create-strengths ul li span{ font-size: 3.6vw; font-weight: bold;}
#strengths .colum4 .create-strengths ul li::before{ margin-left: -14px; width: 14px;}
.inner-wrap #strengths.create-contents .colum4.itemList { flex-direction: column; align-items: center;}
.inner-wrap #strengths.create-contents .colum4.itemList .item{ width: auto; max-width: 100%; margin: 0 auto 20px;}
.inner-wrap #strengths.create-contents .colum4.itemList .item h4 b{ font-size: 22px; font-weight: bold; padding-bottom: 5px; margin-bottom: 5px;}
.inner-wrap #strengths.create-contents .colum4.itemList .item ul li{ margin:2px 0; font-size: 14px;}
}
/*-----------------
service ※w800以上は共通指定
-----------------------*/
@media screen and (max-width: 800px) {
#service{ padding: 20px 5% !important;}
}

/*===========================
 個別.flow-point
制作の流れ
===========================*/
#flow .contTtl{ padding-bottom: 10px !important;}
#flow .pagetxt{ width: 100%; display: block; font-size: 14px; padding: 0 30px 20px;}
.flow-point{ display: flex; flex-direction: column; border-bottom: solid 1px #ddd; margin-top: 15px;}
.flow-point dl{ display: flex; align-items: center; padding: 15px 3%; border-top: solid 1px #ddd;}
.flow-point dl dt{ width: 30%; min-width: 240px; position: relative; font-size: 14px; font-weight: bold; padding-left: 60px;}
.flow-point dl dt span{ width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 50%; margin-top: -17px; border-radius: 100%;  font-size: 14px; letter-spacing: 0; color: #fff; background: #444; }
.flow-point dl dt span.free{ color: #000; background: #ddd; }
.flow-point dl dd{ display: block; flex: 1;}
.flow-point dl dd span{ display: block; font-size: 14px; font-weight: 400; color: #555;}
@media screen and (max-width: 800px){
#flow { margin-bottom: 50px;}
#flow h2{ padding: 0 5% !important;}
}
@media screen and (max-width: 600px){
.flow-point dl{ padding: 20px 20px 35px; flex-direction: column; position: relative; overflow: hidden;}
.flow-point dl dt{ width: 100%; min-width: 100%; font-size: 18px; padding-left: 50px; margin-bottom: 15px;}
.flow-point dl dt span{ width: 60px; height: 60px; left: -30px; top:-30px; margin-top: 0px;}
}


/*===========================
コーポレートサイト制作のポイント
============================*/
#create-list #createPoint .create-contents{ display: flex; flex-direction: row; align-items: center;}
#create-list #createPoint .create-contents .inner-box{ width: 57%; padding-right: 3%; display: flex; flex-direction: column;}
#create-list #createPoint .create-contents .inner-box h3{ display: flex; font-weight: 500; font-size: 18px; padding: 10px 10px 10px 26px; letter-spacing: 2px; position: relative;}
#create-list #createPoint .create-contents .inner-box h3::before{ width: 10px; height: 10px; display: block; position: absolute; left: 0; top: 13px; border: solid 4px #111; border-radius: 100%; content: "";}
#create-list #createPoint .create-contents .inner-box p{ display: block; line-height: 1.8em;}
#create-list #createPoint .create-contents dl{ width: 45%; display: flex; flex-direction: column; padding: 10px; background:var(--create-color); background-size: cover; border-radius: 8px;}
#create-list #createPoint .create-contents dl dt{ display: block; font-size: 12px; font-weight: 500;}
#create-list #createPoint .create-contents dl dd{ display: flex; padding-left: 15px; margin:4px 0 6px; line-height: 1.2em;}
#create-list #createPoint .create-contents dl dd::before{ content: "・"; display: block; margin-left: -15px;}
#create-list #createPoint .create-contents dl dd { font-size: 12px !important;}

@media screen and (max-width: 980px){
#create-list #createPoint .create-contents{ flex-direction: column; align-items: flex-start;}
#create-list #createPoint .create-contents .inner-box h3::before{ top: 8px;}
#create-list #createPoint .create-contents .inner-box p{ margin-top: 5px; line-height: 1.4em;}
#create-list #createPoint .create-contents .inner-box h3{ padding-top: 5px;}
#create-list #createPoint .create-contents .inner-box{ width: 100%; padding-right: 0%;}
#create-list #createPoint .create-contents dl{ width: 100%; margin-top: 20px;}
}
@media screen and (max-width: 800px){
#createPoint { padding: 50px 3% 0;}
#create-list #createPoint .create-contents dl dd{ font-size: 13px;}
}








/*================================
#page-info
===================================*/
#page-info{ padding: 50px 0 80px; position: relative; background: #fff; overflow: hidden;}
#page-info .img-div{ width: 50%; margin: 0 25% 30px; display: flex; justify-content: center; align-items: center;}
/**/
#page-info .point-box{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}
#page-info .point-box .item{ width: 28%; margin:0 2.5% 40px; display: flex; flex-direction: column;}
#page-info .point-box .item h3 { width: 100%; display: flex; justify-content: center; align-items: flex-end;}
#page-info .point-box .item h3 .n{ width: 44px; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #999; line-height: 1em; font-weight: 300; margin-top: 5px;}
#page-info .point-box .item h3 .n span{ font-size: 40px; color: #777; line-height: 1em; font-weight: 200;}
#page-info .point-box .item h3 .txt{ flex: 1; display: flex; flex-direction: column; padding-left: 10px; font-size: 30px; font-weight: 300; line-height: 1.2em; color: #000;}
#page-info .point-box .item h3 .txt span{ font-size: 11px; color: #444; line-height: 1em;}
#page-info .point-box .item p{ display: flex; flex-direction: column; margin: 20px 0;}
#page-info .point-box .item p b{ display: block; line-height: 1.6em; letter-spacing: 0; padding: 15px 0; font-weight: 400;}
@media screen and (max-width: 1100px){
#page-info .point-box .item h3 .n{ width: 40px;}
#page-info .point-box .item h3 .n span{ font-size: 40px;}
#page-info .point-box .item h3 .txt{ font-size: 20px;}
#page-info .point-box .item h3 .txt br{ display: none;}
#page-info .point-box .item p{ margin: 15px 0 30px; line-height:2.0em;}
}
@media screen and (max-width: 950px){
#page-info.page-info1{ padding: 0 5% 80px;}
#page-info .setpoint{ padding:0 4% 0 7%;}
}
@media screen and (max-width: 900px){
#page-info .point-box .item, 
#page-info .point-box.column2 .item, 
#page-info .point-box.column3 .item{ width: 100%; margin:0; padding: 30px 4%; flex-direction: row; justify-content: space-between;}
#page-info .point-box .item h3 { width: 35%;}
#page-info .point-box .item h3 .txt{ font-size: 18px;}
#page-info .point-box .item p{ width: 60%; margin: 0; line-height:1.6em; font-size: 14px; color: #555;}
}
@media screen and (max-width: 800px){
#page-info{ padding: 60px 0 ;}
#page-info.page-info1{ padding: 0 5% 40px;}
#page-info .setpoint{ padding:0 4%;}
#page-info .title h2 { display: inline-block;}
#page-info .title h2 span{ display: inline; font-size: 26px;}
}
@media screen and (max-width: 700px){
#page-info .point-box .item, 
#page-info .point-box.column2 .item, 
#page-info .point-box.column3 .item{ width: 90%; margin:0 5%; flex-direction: column; justify-content: flex-start; position: relative; padding-left: 80px;}
#page-info .point-box .item h3 .n{ margin: -25px 0 0 0; position: absolute; left: 10px; top: 50%;}
#page-info .point-box .item h3 { width: 100%; margin-bottom: 10px;}
#page-info .point-box .item h3 .txt{ padding-left: 0; font-size: 18px; font-weight: 500;}
#page-info .point-box .item p{ width: 100%;}
}
@media screen and (max-width: 600px){
#page-info .title h2 span{ font-weight: bold;}
#page-info .setpoint span{ font-size: 14px;}
#page-info .image{ width: 220%; top: -10%; left:3%;}
#page-info .img-div{ width: 70%; margin: 0 15% 30px;}

}