@charset "utf-8";
.backgroundimage{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; z-index: -1; background:#000;}
.backgroundimage span{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; transition: 0;}
.backgroundimage span.z10{ z-index: -1; display: block;}
.backgroundimage span.z1{ z-index: -10; display: none; opacity: 0;}
.scroll3 .backgroundimage span.z10{ display: none;}
.scroll3 .backgroundimage span.z1{ display: block !important;}


/*--------------
MV下のテキスト
----------------*/
.c-tag{ width: 100%; height: 1px; display: block;}
#mv-message{ padding:100px 0;}
#mv-message .inner1100{ padding: 0 2%; align-items: flex-start; flex-direction: row;}
#mv-message .inner1100 > *{ clip-path:inset(0 100% 0 0); transition: 1.4s 0.2s;}
#mv-message .inner1100.setView > h2{ transition: 1.0s;}
#mv-message .inner1100.setView > *{ clip-path:inset(0 0% 0 0);}
/**/
#mv-message .inner1100 h2{ display: flex; flex-direction: column; margin-top: 10px;}
#mv-message .inner1100 h2 .eng{ color: #fff; display: block; font-weight: 500; font-size: 32px; white-space: nowrap; position: relative; z-index: 10;}
#mv-message .inner1100 h2 .eng::before{ width: 100%; height: 100%; content: ""; display: block; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.3); mix-blend-mode: multiply; z-index: -1;}
#mv-message .inner1100 h2 .jp{ display: block; font-size: 12px; letter-spacing: 2px; white-space: nowrap; color: #fff; font-weight: 500;}
#mv-message .inner1100 .ms_txt{ flex: 1; display: flex; flex-direction: column; padding:5px 0 10px 50px;}
#mv-message .inner1100 .ms_txt p{ display: block; font-size: 14px; line-height: 1.8em; font-weight: 400; color: #fff;}
#mv-message .inner1100 .ms_txt dl{ display: flex; flex-direction: row; flex-wrap: wrap; padding:3px 6px; background: rgba(255,255,255,.4); border-radius: 4px; margin-top: 15px;}
#mv-message .inner1100 .ms_txt dl dt{ width: 100%; font-size: 11px; padding: 0 4px;}
#mv-message .inner1100 .ms_txt dl dd{ display: flex; align-items: stretch; margin: 0 5px 5px 0;}
#mv-message .inner1100 .ms_txt dl dd a{ display: flex; align-items: center; justify-content: center; padding: 4px 8px; border: solid 1px #999; background: rgba(255,255,255,.6); font-size: 11px; line-height: 1.4em; border-radius: 3px;}
#mv-message .inner1100 .ms_txt dl dd a:hover{ background: rgba(255,255,255,1); box-shadow: 0 4px 6px rgba(0,0,0,.1);}
@media screen and (max-width: 1100px) {
#mv-message .inner1100{ padding: 0 3%;}
#mv-message .inner1100 h2 .eng{ font-size: 28px;}
}
@media screen and (max-width: 800px) {
#mv-message{ padding:70px 0;}
#mv-message .inner1100{ flex-direction: column;}
#mv-message .inner1100 .ms_txt{ padding:20px 0;}
#mv-message .inner1100 .ms_txt dl{ justify-content: space-between;}
#mv-message .inner1100 .ms_txt dl dd{ width:calc(50% - 5px); margin: 0 0 5px;}
#mv-message .inner1100 .ms_txt dl dd a{ width: 100%; height: 34px;}
}
@media screen and (max-width: 800px) {
#mv-message .inner1100 .ms_txt dl dd a{ background: rgba(255,255,255,.8);}
}

/*===========================
#page-main 左右
============================*/
#page-main{ width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content:center; position: relative; background: #fff; padding-top: 50px;}
#page-main #page-main-inner{ width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content:center; }
#page-main #page-main-inner .page-left-wrap{ width: 155px; height: 100%; position: absolute; left: 35px; top: 0; padding-bottom: 40vh; padding-top: 100px;}
#page-main #page-main-inner .page-left-wrap ul{ width: 100%; display: flex; flex-direction: column; position: sticky; top: 160px; left: 0;}
#page-main #page-main-inner .page-left-wrap ul li{ width: 100%; display: block;}
#page-main #page-main-inner .page-left-wrap ul li.ttl{}
#page-main #page-main-inner .page-left-wrap ul li.ttl span{ font-size: 12px; font-weight: 500;}
#page-main #page-main-inner .page-left-wrap ul li a{ font-size: 12px; line-height: 1.2em; padding: 2px 8px 4px; border-radius: 3px; color: #777;}
#page-main #page-main-inner .page-left-wrap ul li a:hover{ color: #222;}
/**/
#page-main #page-main-inner .page-left-wrap ul.tag1 li.t1 a, 
#page-main #page-main-inner .page-left-wrap ul.tag2 li.t2 a, 
#page-main #page-main-inner .page-left-wrap ul.tag3 li.t3 a, 
#page-main #page-main-inner .page-left-wrap ul.tag4 li.t4 a, 
#page-main #page-main-inner .page-left-wrap ul.tag5 li.t5 a, 
#page-main #page-main-inner .page-left-wrap ul.tag6 li.t6 a, 
#page-main #page-main-inner .page-left-wrap ul.tag7 li.t7 a, 
#page-main #page-main-inner .page-left-wrap ul.tag8 li.t8 a, 
#page-main #page-main-inner .page-left-wrap ul.tag9 li.t9 a, 
#page-main #page-main-inner .page-left-wrap ul.tag10 li.t10 a { background: var(--create-color); color: #000;}
/**/
#page-main #page-main-inner .page-right-wrap{ width: 100%; max-width: 1600px; padding: 0 180px;}
@media screen and (min-width: 1400px) and (max-width: 1600px) {
#page-main #page-main-inner .page-right-wrap{ padding: 0 60px 0 180px;}
}
@media screen and (min-width: 800px) and (max-width: 1400px) {
#page-main #page-main-inner .page-left-wrap{ height: 100%; position: absolute; left: 15px; top: 0;}
#page-main #page-main-inner .page-right-wrap{ padding: 0 30px 0 180px;}
}
@media screen and (max-width: 800px) {
#page-main{ padding-top: 0px;}
#page-main #page-main-inner{ flex-direction: column;}
#page-main #page-main-inner .page-left-wrap{ display: none;}
#page-main #page-main-inner .page-right-wrap{ padding: 0;}
}

/*===========================
create-list
============================*/
#create-list{ }
#create-list .inner-wrap{ display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; position: relative;}
#create-list .inner-wrap .c-tag{ width: 100%; height: 20px; display: flex;}
/**/
#create-list .inner-wrap .create-contents{ width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 40px 0; border-radius: 16px; background: #fff; position: relative;}

#create-list .inner-wrap .create-contents.fileBox{ min-height: 300px; max-height: calc(100vh - 140px); position: sticky; top: 60px; left: 0; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: 1.2s; padding: 20px 2% 50px;}
#create-list .inner-wrap .create-contents.fileBox.hFull{ height: calc(100vh - 140px);}

#create-list .inner-wrap .create-contents.fileBox.used{ box-shadow: 0 6px 12px rgba(0,0,0,0);}
#create-list .inner-wrap .create-contents.fileBox:nth-child(1).used a.page-move{ background: #f6f6f6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(2).used a.page-move{ background: #efefef;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(3).used a.page-move{ background: #e6e6e6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(4).used a.page-move{ background: #dfdfdf;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(5).used a.page-move{ background: #d6d6d6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(6).used a.page-move{ background: #cfcfcf;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(7).used a.page-move{ background: #c6c6c6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(8).used a.page-move{ background: #bfbfbf;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(9).used a.page-move{ background: #b6b6b6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(10).used a.page-move{ background: #afafaf;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(11).used a.page-move{ background: #a6a6a6;}
#create-list .inner-wrap .create-contents.fileBox:nth-child(12).used a.page-move{ background: #9f9f9f;}
#create-list .inner-wrap .create-contents a.page-move{ display: none;}
#create-list .inner-wrap .create-contents.fileBox a.page-move{ width: 100%; height: 30px; display: block; position: absolute; left: 0; top: 0; z-index: 10; display: none; border-radius: 20px 20px 0 0; transition: 0.3s;}
#create-list .inner-wrap .create-contents.fileBox.used a.page-move{ display: block;}
#create-list .inner-wrap .create-contents.fileBox.used:hover a.page-move{}
#create-list .inner-wrap .create-contents.fileBox.used:hover a.page-move{ background:#555;}
@media screen and (max-width: 980px){
#create-list .inner-wrap .create-contents.fileBox{ padding: 20px 3%;}
}
@media screen and (max-width: 800px) {
#create-list .inner-wrap .c-tag{ height: 1px;}
#create-list .inner-wrap .create-contents{ padding: 20px 0;}
}

/*===========================
create-list 共通タイトル：contTtl
============================*/
#create-list .inner-wrap .contTtl{ width: 100%; display: flex; align-items: center; padding: 20px 0 40px;}
#create-list .inner-wrap .contTtl .ttl{ display: block; padding-left: 8px; font-size: 22px; font-weight: 300; line-height: 1.2em; color: #000;}
#create-list .inner-wrap .contTtl .checkIcon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-top: 5px;}
#create-list .inner-wrap .contTtl .checkIcon svg { width: 22px; height: 22px; stroke: #000; stroke-dasharray: 40; stroke-dashoffset: 40;}
#create-list .inner-wrap .contTtl .checkIcon.setView svg { animation: checkIconSVG 0.8s ease 0.2s forwards;}
@keyframes checkIconSVG {
  0% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@media screen and (max-width: 800px) {
#create-list .inner-wrap .contTtl{ padding: 20px 0;}
#create-list .inner-wrap .contTtl .ttl{ font-size: 18px; font-weight: bold;}
#create-list .inner-wrap .contTtl .checkIcon { width: 18px; height: 18px; margin-top: 4px;}
#create-list .inner-wrap .contTtl .checkIcon svg { width: 18px; height: 18px;}
}

/*================================
共通タイトル（下層用）.titArea
===================================*/
.titArea{ width: 100%; display: flex; flex-direction: column;}
.titArea .pagettl{ font-size: 11px; font-weight: 300; display: flex; color: #555; align-items: baseline; margin-bottom: 5px;}
.titArea .pagettl .eng{ margin: 0 10px; font-size: 11px; color: #777;}
.titArea .pagettl .eng::before{ content: "ー ";}
.titArea h2{ font-size: 22px; letter-spacing: 0.1em; font-weight: 500; display: flex; flex-direction: column; position: relative; margin-bottom: 10px;}
.titArea h2.row{ flex-direction: row; align-items: baseline;}
.titArea h2 .eng{ font-size: 18px; font-weight: 400; padding-right: 10px; letter-spacing: 0.2em;}
.titArea h2 br{ display: none;}
.titArea p{ font-size: 14px;}
/*
.titArea p{ font-size: 12px; padding: 10px 0; color: #444; font-weight: 500;}
*/
@media screen and (max-width: 700px){
#page-links .titArea { padding: 0 !important;}
#page-links .titArea h2{ display: flex; text-indent: 0em; justify-content: space-between;}
#page-links .titArea h2 .eng{ flex: 1; display: flex; justify-content: flex-start; align-items: center;}
#page-links .titArea h2 span{ }
}
@media screen and (max-width: 600px){
.titArea h2.indent{ text-indent: -0.8em;}
.titArea h2 br{ display: block;}
}

/*===========================
create-list 共通
colum1 colum2 colum3 colum4
============================*/
#create-list .inner-wrap .create-contents .colum1{ width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 40px;}
#create-list .inner-wrap .create-contents .colum2, 
#create-list .inner-wrap .create-contents .colum3, 
#create-list .inner-wrap .create-contents .colum4{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 40px;}

/*===========================
create-list 共通
.itemListと.item
============================*/
#create-list .inner-wrap .create-contents .itemList .subttl{ width: 100%; display: flex; justify-content: flex-start;}
#create-list .inner-wrap .create-contents .itemList .subttl .eng{ font-size: 14px; font-weight: 500; letter-spacing: 3px; line-height: 1em;}
#create-list .inner-wrap .create-contents .itemList .subttl .jp{ font-size: 12px; letter-spacing: 3px; line-height: 1em;}
#create-list .inner-wrap .create-contents .itemList .item{ display: flex; flex-direction: column; align-items: flex-start; margin: 5px 3%; padding-bottom: 20px;}
#create-list .inner-wrap .create-contents .colum2.itemList .item{ width: 44%;}
#create-list .inner-wrap .create-contents .colum3.itemList .item{ width: 30%; margin: 5px 5% 5px 0;}
#create-list .inner-wrap .create-contents .colum3.itemList .item.n3{ margin: 5px 0;}
#create-list .inner-wrap .create-contents .colum4.itemList .item{ width: 19%;}
#create-list .inner-wrap .create-contents .itemList .item h3, 
#create-list .inner-wrap .create-contents .itemList .item h4{ width: 100%; display: flex; flex-direction: column;}
#create-list .inner-wrap .create-contents .itemList .item h3 .num, 
#create-list .inner-wrap .create-contents .itemList .item h4 .num{ width: 100%; display: flex; flex-direction: column; padding-bottom: 5px; margin-bottom: 15px; border-bottom: solid 1px #333; font-size: 20px; font-weight: 600; font-family: 'Ebrima', sans-serif; letter-spacing: 0;}
#create-list .inner-wrap .create-contents .itemList .item h3 b, 
#create-list .inner-wrap .create-contents .itemList .item h4 b{ width: 100%; display: block; font-size: 16px; font-weight: 400; line-height: 1.2em; margin-bottom: 15px;}
#create-list .inner-wrap .create-contents .itemList .item p{ color: #111; font-size: 13px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; line-height: 1.2em;}
#create-list .inner-wrap .create-contents .itemList .item p a{ display: inline-block; font-size: 11px; line-height: 1em; padding: 4px 10px; border: solid 1px #eee; color: #555; border-radius: 3px; margin: 10px 0;}
#create-list .inner-wrap .create-contents .itemList .item p a:hover{ background: #777; color: #fff; border: solid 1px #777;}
/*#siteType*/
#create-list .inner-wrap .create-contents#siteType .colum3{ margin-bottom: 0;}
#create-list .inner-wrap .create-contents#siteType .itemList .item h3 .num{ font-size: 14px;}
#create-list .inner-wrap .create-contents#siteType .itemList .item p{ line-height: 1.8em;}
@media screen and (max-width: 800px) {
#create-list .inner-wrap .create-contents#siteType{ padding: 20px 5%;}
}
@media screen and (max-width: 700px) {
#create-list .inner-wrap .create-contents .colum3.itemList { justify-content: space-between;}
#create-list .inner-wrap .create-contents .colum3.itemList .item, 
#create-list .inner-wrap .create-contents .colum3.itemList .item.n3{ width: 100%; margin: 5px 0; padding: 10px 10px 20px; box-shadow: 0 4px 8px rgba(0,0,0,.2); border: solid 1px #ddd;}
#create-list .inner-wrap .create-contents .itemList .item h3 { margin-bottom: 10px;}
#create-list .inner-wrap .create-contents .itemList .item h4{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: solid 1px #ddd; margin-bottom: 10px; padding:0 10px 5px; letter-spacing: 0;}

#create-list .inner-wrap .create-contents .itemList .item h4 .num{ display: block; width: auto; padding: 0px 10px 0 0; margin: 0; border-bottom: none; font-weight: 200; font-size: 20px;}
#create-list .inner-wrap .create-contents .itemList .item h3 b, 
#create-list .inner-wrap .create-contents .itemList .item h4 b{ width: auto; font-weight: 500; margin-bottom: 8px; padding: 0; margin: 0;}
}

/*--------------
category-links
---------------*/
.category-links{ width: 96%; display: flex; justify-content: flex-start; align-items: center; justify-content: center; margin: 50px 2% 150px; border: solid 1px #ccc; border-radius: 10px; border-radius: 6px; padding: 5px 15px;}
.category-links p{ font-size: 12px; font-weight: 500;}
.category-links ul{ display: flex; margin-left: 20px; flex-wrap: wrap;}
.category-links ul li{ display: block; margin: 5px 10px 5px 0;}
.category-links ul li a{ display: flex; align-items: center; height: 30px; line-height: 1em; padding: 0 10px; border-radius: 4px; background: #fff; font-size: 12px; color: #111; font-weight: 400; border: solid 1px #444;}
.category-links ul li a:hover{ background: var(--create-color);}
.category-links ul li a.contact:hover{ background: var(--color-contact); border: solid 1px var(--color-contact); color: #fff;}
@media screen and (max-width: 600px) {
.category-links{ flex-direction: column; margin: 50px 2%; padding: 10px; border: solid 1px #ccc;}
.category-links ul { margin: 0;}
.category-links ul li{ width: 50%; margin: 0; padding:4px;}
.category-links ul li a{ width: 100%; height: 40px; align-items: center; justify-content: center;} 
}









/*-----------------------------------------------------
一覧
---------------*/
#page-servicelist #under-mv { min-height: 30vh;}
#page-servicelist #under-mv .inner-wrap { padding: 20vh 10% 50px;position: relative;}
#page-servicelist #under-mv .inner-wrap .txt span{ margin-top: 0;}

/**/
#page-servicelist #serList { margin: 30vh 0 0; padding:20px 0; background: #fff; }
#page-servicelist #serList .wrap{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;}
#page-servicelist #serList .item{ width: 44%; margin: 50px 3%; display: block;}
#page-servicelist #serList .item a { width: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);}
#page-servicelist #serList .item a:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.8);}
#page-servicelist #serList .item a .img{ width: 100%; height: auto; display: block;}
#page-servicelist #serList .item a:hover .img img{ opacity: 0.7;}
#page-servicelist #serList .item a .text{ padding: 20px 20px 0;}
#page-servicelist #serList .item a .text, 
#page-servicelist #serList .item a .text > *{ display: block; width: 100%;}
#page-servicelist #serList .item a .text h2{ font-size: 16px; font-weight: bold; margin-bottom: 15px;}
#page-servicelist #serList .item a .text p{ height: 80px; font-size: 14px; color: #666; line-height: 1.3em;}


@media screen and (max-width: 800px) {
#page-servicelist #serList .wrap{ flex-direction: column; justify-content: center; align-items: center;}
#page-servicelist #serList .item{ width: 90%; margin: 40px 5%; max-width: 450px;}
#page-servicelist #serList .item a .text{ padding: 20px 20px 40px;}
#page-servicelist #serList .item a .text p{ height: auto;}

}

@media screen and (max-width: 600px) {
#page-servicelist #serList .item a .text h2{ font-size: 15px;}
#page-servicelist #serList .item a .text p{ font-size: 13px;}

}