@charset "utf-8";
/*-------------------
#under-mvリセット
---------------------*/
#create-about #under-mv{ min-height: 300px;}
#create-about #under-mv .inner-wrap { padding: 20vh 3% 50px;}
#create-about #under-mv .inner-wrap .txt{ }
#create-about #under-mv .inner-wrap .txt span { margin-top: 20px;}
#create-about #under-mv #page-main{ padding-top: 30px;}

/*-------------------
#info #info-1
---------------------*/
/**/
#info { padding: 40px 4%; display: flex; flex-direction: row; justify-content: space-between; }
#info .title{ margin-right: 50px;}
#info .title h3{ display: flex; flex-direction: column; }
#info .title h3 *{ font-size: 20px;}
#info .title h3 .ml{ margin-left: 0.5em;}
#info .title h3 .txtIn::after{ color: #000 !important;}
#info .title h4 { margin-left: 12px;}
#info .title h4 *{}
#info p{ flex: 1; display: flex; flex-direction: column;}
#info p span{ display: block; margin-bottom: 20px;}

@media screen and (max-width: 800px){
#info { flex-direction: column;}
#info .title{ width: 100%;}
#info .title h3{ flex-direction: row; margin: 0px 0 15px;}
#info .title h3 .ml{ margin-left: 0em;}
#info .title h4 *{ font-size: 20px;}
#info p{ width: 100%; padding:0 15px;}
}
@media screen and (max-width: 600px){
#info { padding:30px 12px; box-shadow:0 4px 22px rgba(0,0,0,.2); border-radius: 2px;}
#info .title h3{ flex-direction: column;}
#info .title h3 .ml{ margin-left: 0.5em;}
#info .title h3 *{ font-size: 6.8vw; letter-spacing: 1px;}
#info .title h4 *{ font-size: 5.8vw; font-size: 200;}
}


/*-----------------
strengths 当社の強みと選ばれる理由
-----------------------*/
#strengths { padding: 80px 0 0;}
#strengths .titArea{ padding:0 5% 15px 2%; align-items: center;}
#strengths .titArea h2{ font-weight: 500; margin: 0;}
#strengths .titArea .pagettl{ font-size: 14px; color: #555;}

.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 0;}
#strengths .colum4 h3 br{ display: none;}
#strengths .colum4 p.txt{ width: 100%; display: flex; justify-content: center; align-items: center; padding:10px 5% 20px;}
#strengths .colum4 p.txt span{ display: block; font-size: 13px;}

#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: row; align-items: flex-start; margin-bottom: 10px;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl > * { display: flex; font-size: 12px; line-height: 1.2em;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dt{ width: 140px; font-weight: bold; white-space: nowrap; justify-content: space-between;}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dt::after{ content: "：";}
.inner-wrap #strengths.create-contents .colum4 .site-setting dl dd{ flex: 1; padding-left: 5px; font-weight: 400;}
@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: 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 { width: 100%; display: flex; flex-direction: column; align-items: center;}
.inner-wrap #strengths.create-contents .colum4.itemList .item{ width: auto; margin: 0 3% 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;}
}

/*--------------*/
#info-3{ width: 98%; display: flex; flex-direction: column; padding: 0 1% 40px; }
#info-3 .itemBox{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;} 
#info-3 .itemBox .item{ width: 25%; padding: 20px 10px; border-right: solid 1px #ccc; display: flex; flex-direction: column; align-items: center;} 
#info-3 .itemBox .item:last-child{ border-right: none;}
#info-3 .itemBox .item h4{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
#info-3 .itemBox .item h4 .eng, 
#info-3 .itemBox .item h4 .eng *{ font-weight: 500; font-size: 20px; color: #000; line-height: 1em;}
#info-3 .itemBox .item h4 .jpn, 
#info-3 .itemBox .item h4 .jpn *{ font-weight:500; font-size: 13px; color: #555; line-height: 1.8em;}
#info-3 .itemBox .item p{ display: flex; flex-direction: column; font-size: 13px; margin-bottom: 15px;}


#info-3 .itemBox .item ul{ width: 100%; border: solid 1px #999; padding: 6px; border-radius: 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
#info-3 .itemBox .item ul li{ display: block; padding-left: 1em; font-size: 12px; letter-spacing: 0; line-height: 1.2em; margin: 6px 0;}
#info-3 .itemBox .item ul li::before{ margin-left: -1em; content: "・";}


@media screen and (max-width: 1000px){
#info-3 .itemBox .item ul li{ font-size: 12px; letter-spacing: 0;}
}
@media screen and (max-width: 900px){
#info-3 .itemBox .item{ width: 50%; padding: 30px 10px;}
#info-3 .itemBox .item:nth-child(2){ border-right: none;}
#info-3 .itemBox .item:nth-child(3), 
#info-3 .itemBox .item:nth-child(4){ border-top: solid 1px #ccc;}
#info-3 .itemBox .item ul li{ margin: 2px 0;}
}
@media screen and (max-width: 600px){
#create-list .inner-wrap .create-contents#strengths{ width: 96%; margin: 20px 2%; padding: 30px 2% !important; box-shadow: 0 4px 8px rgba(0,0,0,.1);}
#info-3 .itemBox .item{ width: 100%; padding: 40px 0; border: none; border-bottom: solid 1px #aaa;}
#strengths .titArea{ padding: 20px 0;}
#info-3 .itemBox .item h4 .eng, 
#info-3 .itemBox .item h4 .eng *{ font-size: 5.2vw;}
#info-3 .itemBox .item h4 .jpn, 
#info-3 .itemBox .item h4 .jpn *{ font-size: 3.2vw;}
#info-3 .itemBox .item ul li{ font-size: 2.8vw; letter-spacing: 0;}
}





/*===========================
お悩みや課題にお応えします
#answer
============================*/
#answer { padding-top:40px;}
#answer .answer-wrap { margin: 20px 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;}
#answer .answer-wrap .worryBox{ width: 48%; margin-bottom: 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border: solid 1px #777; border-radius: 10px; overflow: hidden;}
#answer .answer-wrap .worryBox .viewBtn{ width: 100%; height: 100%; display: flex; flex-direction: column; padding: 20px 20px 30px; background: #fff; position: relative; cursor: pointer;}
#answer .answer-wrap .worryBox .viewBtn::after{ content: "詳しく見る"; font-size: 10px; width: 60px; height: 20px; padding-bottom: 2px; border: solid 1px #999; color: #555; background: #fff; border-radius: 2px; position: absolute; left: 20px; bottom: 15px; display: flex; align-items: center; justify-content: center; transition: 0.4s;}
#answer .answer-wrap .worryBox .viewBtn:hover:after{ background: #222; color: #fff; border:solid 1px #222;}
#answer .answer-wrap .worryBox .viewBtn.open:after{ content: "閉じる"; background: #222; color: #fff; border:solid 1px #222;}
#answer .answer-wrap .worryBox .viewBtn.open:hover:after{ background: #ddd; color: #111; border:solid 1px #777;}
#answer .answer-wrap .worryBox .viewBtn h3{ font-size: 18px; letter-spacing: 2px; line-height: 1.2em; padding:0 5px 20px; border-bottom: dashed 1px #aaa; font-weight: 500;}
#answer .answer-wrap .worryBox .viewBtn p{ padding: 15px 0; line-height: 1.4em; font-size: 15px;}
#answer .answer-wrap .worryBox .viewBox{ width: 100%; height: 100%; display: none; flex-direction: column; align-items: flex-start; justify-items: flex-start; padding: 20px; background:var(--create-color); border-top: solid 1px #777;}
#answer .answer-wrap .worryBox .viewBox.open{ display: flex;}
#answer .answer-wrap .worryBox .viewBox h4{ font-weight: 500; padding: 5px 0 15px; font-size: 16px;}
#answer .answer-wrap .worryBox .viewBox p{ font-size: 15px;}
@media screen and (max-width: 800px){
#answer{ padding: 50px 3% 0;}
#answer .answer-wrap { flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#answer .answer-wrap .worryBox{ width: 100%; margin: 10px 0; border: solid 1px #333;}
#answer .answer-wrap .worryBox .viewBtn::after, 
#answer .answer-wrap .worryBox .viewBtn:hover:after{ height: 16px; border: solid 1px #ccc; color: #222; background: #eee; font-weight: 400;}
#answer .answer-wrap .worryBox .viewBtn.open:hover:after{ background: #222; color: #fff; border:solid 1px #222;}
#answer .answer-wrap .worryBox .viewBox{ padding: 10px 15px; }
#answer .answer-wrap .worryBox .viewBox p{ padding-bottom: 20px; line-height: 1.3em; font-size: 13px;}
}


/*-----------------
priceList 料金の目安
-----------------------*/
.priceList{ padding: 15px; border-radius: 6px; border: solid 1px #999; align-items: stretch; margin-top: 30px;}
.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;}
.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;}
}