@charset "utf-8";
#breadcrumbs::before, 
main::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 10000; background: #fff; transition: 1.0s; pointer-events: none;}
.opBody1 #breadcrumbs::before, 
.opBody1 main::before{ width: 0;}

/*----------------------------------
mv
-----------------------------------*/
#ser-mv{ border-bottom: solid 1px #000; overflow: hidden; padding: 20px 3%; background: #fff; }
#ser-mv .inner{ max-width: 1000px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height:40vh; min-height: 400px; position: relative; z-index: 1; background: #fff;}
#ser-mv.ser-top .inner{ min-height: 200px; height: 200px;}
#ser-mv .inner .tit{ padding-top: 50px; width: 100%;}
#ser-mv .inner .tit h1{ display: flex; flex-direction: column; }
#ser-mv .inner .tit h1 .jp, 
#ser-mv .inner .tit h1 .jp *{ font-size: 34px; letter-spacing: 5px; line-height: 1.2em;}
#ser-mv.ser-top .inner .tit h1 .jp *{ font-size:24px;}
#ser-mv.ser-top .inner .tit h1 .jp br{ display: none;}
#ser-mv .inner .tit h1 .eng2, 
#ser-mv .inner .tit h1 .eng2 *{ font-size: 20px; padding-bottom: 5px; color: #777; line-height: 1em;}
.opBody1 #ser-mv .inner .tit h1 * { opacity: 1; transition: 1.8s;}
#ser-mv .inner .tit p{ margin-top: 100px; padding-right: 30%; line-height: 2.2em; opacity: 0;}
.opBody1 #ser-mv .inner .tit p { animation: ser-mv-p 1.2s 1.2s ease-in 1 forwards;}
@keyframes ser-mv-p {
0% {  opacity: 0.1;}
100% {  opacity: 1;}
}
/*svg*/
#ser-mv .s-line{ height: 110%; position: absolute; right: -1%; bottom: -5%; z-index: 20; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; opacity: 1; mix-blend-mode: difference;}
#ser-mv .s-line svg{ width: 100%; height: 100%;}
#ser-mv .s-line .s-lineimg{ width: 100%; height: auto; max-height: 110vh; fill: none; stroke: #fff; stroke-width: 180px; fill-rule: evenodd; stroke-dasharray: 4000px; stroke-dashoffset: 4000px;}
.opBody1 #ser-mv .s-line .s-lineimg{ animation: s-line-svg-anime 6s forwards, stroke-color 30.0s ease-in infinite forwards;}
@keyframes s-line-svg-anime {
0% { stroke-dasharray: 4000px; stroke-dashoffset: 4000px;}
100% { stroke-dashoffset: 0;}
}
@media screen and (max-width: 800px) {
#ser-mv .inner{ height:96vh; min-height: 0;}
#ser-mv .s-line{ right: -21vw;bottom: -21vh;}
}
@media screen and (max-width: 700px) {
#ser-mv .inner .tit h1 .jp, 
#ser-mv .inner .tit h1 .jp *{ font-size: 6.5vw; letter-spacing: 0.1em;}
#ser-mv .inner .tit h1 .eng2, 
#ser-mv .inner .tit h1 .eng2 *{ font-size: 5.2vw;}
#ser-mv .inner .tit p{ margin-top: 20vh; padding-right: 10vw; font-size: 13px; line-height: 1.8em;}
}

/*-----------------*/
.c-tag{ width: 100%; height: 1px; display: block;}
/*-------------------
page_contents
--------------------*/
#page_contents .inner-wap { width: 100%; max-width: 1100px; display: flex; flex-direction: row; justify-content: space-between;}
#page_contents .inner-wap .page-left-wrap{ width: 140px; padding-top: 150px;}
#page_contents .inner-wap .page-right-wrap{ width: calc(100% - 150px); padding-left: 40px; margin-top: 60px;}
#page_contents .inner-wap .page-right-wrap > .section{ padding: 80px 0;}
@media screen and (max-width: 800px){
#page_contents .inner-wap .page-right-wrap > .section{ padding: 50px 0;}
#page_contents .inner-wap .page-left-wrap{ display: none;}
#page_contents .inner-wap .page-right-wrap{ width:100%; padding-left: 0px; margin-top: 0;}
#page_contents .inner-wap .page-right-wrap .titArea{ padding: 0 5% !important;}
}
@media screen and (max-width: 700px){
.titArea{ width: auto; display: flex; justify-content: center;}
}

/*-------------------
#page_contents .inner-wap .page-left-wrap
--------------------*/
#page_contents .inner-wap .page-left-wrap #tag-menu{width: 100%; display: block; position: sticky; left: 0; top: 60px; margin: 0 0 80px; background: #fff;}
#page_contents .inner-wap .page-left-wrap #tag-menu li{ width: 100%; display: block;}
#page_contents .inner-wap .page-left-wrap #tag-menu li span{ display: block; font-size: 11px; font-weight: 400; padding:0 5px; margin-bottom: 4px; }
#page_contents .inner-wap .page-left-wrap #tag-menu li a{ display: block; font-size: 11px; padding:1px 5px; margin: 6px 0; border-radius: 2px; color: #777; font-weight: 300; position: relative;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::before{ content: "・";}
#page_contents .inner-wap .page-left-wrap #tag-menu li a:hover{ color: #111; font-weight: bold;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::after{ width: 0%; height: 100%; position: absolute; left: 0; top: 0; content: ""; background: #eee; transition: 0.4s; z-index: -1; } 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a::after, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a::after{ width: 100%;}
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a,
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a { color: #000; font-weight: bold;}
@media screen and (max-width: 800px){
.left-wrap{ width: 100%; background: rgba(255,255,255,1); border-bottom: solid 1px #aaa; position: sticky; left: 0; top: 0; z-index: 100;}
#page_contents .inner-wap .page-left-wrap #tag-menu{ }
#page_contents .inner-wap .page-left-wrap #tag-menu{  display: flex; flex-direction: row; position: relative; left: auto; top: auto; margin-top: 0; padding:0; border:none; border-radius: 0 0 0 0; box-shadow: 0 0 0 rgba(0,0,0,.2); background: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu li{ width: 16.66%; display: block; margin: 0; }
#page_contents .inner-wap .page-left-wrap #tag-menu li.tit{ display: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a{ display: flex; align-items: center; justify-content: center; height: 30px; font-size: 1.8vw; letter-spacing: 0; padding:0; border-radius: 0; font-weight: 300; margin: 0;}
#page_contents .inner-wap .page-left-wrap #tag-menu li a::before{ content: ""; display: none;}
#page_contents .inner-wap .page-left-wrap #tag-menu.tag1 li.t1 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag2 li.t2 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag3 li.t3 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag4 li.t4 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag5 li.t5 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag6 li.t6 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag7 li.t7 a, 
#page_contents .inner-wap .page-left-wrap #tag-menu.tag8 li.t8 a{ background:#7F8EA7; color: #fff;}
}


/*================================
.titArea
===================================*/
.titArea{ width: 100%; display: flex; flex-direction: column;}
.titArea h2{ width: 100%; display: flex; flex-direction: column-reverse;}
.titArea h2 > span{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
.titArea h2 > span, 
.titArea h2 > span *{ font-size: 26px; line-height: 1.2em; letter-spacing: 0.1em; font-weight: 700;}
.titArea h2 > span br{ display: none;}
/*
.titArea h2 > span{ display: flex; font-size: 11px; font-weight: 300; color: #555; align-items: baseline;}
.titArea h2 > span .eng2{ margin: 0 10px; font-size: 14px; color: #777;}
.titArea h2 > span .eng2::before{ content: "ー ";}
*/
.titArea p{ padding: 20px 0; color: #666;}
@media screen and (max-width: 700px){
#page-links .titArea { padding: 0 !important;}
#page-links .titArea h2 > span{ display: flex; text-indent: 0em; justify-content: space-between;}
}
@media screen and (max-width: 600px){
.titArea h2 b *{ font-size: 5.0vw; letter-spacing: 0.05em;}
.titArea h2 > span, 
.titArea h2 > span *{ font-size: 6.4vw;}

.titArea h2 > span.indent{ text-indent: -0.8em;}
.titArea h2 > span br{ display: block;}
.titArea p{ padding: 30px 0; line-height: 2.0em; letter-spacing: 0.1em;}
}

/*-------------------
common ttl
--------------------*/
.ttl_h3{ width: 100%; display: flex; justify-content: flex-start; padding:12px 0;}
.ttl_h3 b{ background: #fff; position: relative; padding:2px 4px 4px; font-size: 16px; letter-spacing: 0.1em; font-weight: bold;}
.ttl_h3 b::before{ content: ""; width: 100%; height: 100%; position: absolute; right: 0; top: 0; pointer-events: none; background: #fff; mix-blend-mode: difference; z-index: 10;}
.ttl_h3.setView b::before{ animation: width_off 0.4s ease-in 1 forwards;}

@keyframes width_off {
0% { width: 100%;}
100% { width: 0%;}
}















/*-------------------
#カラムレイアウト
--------------------*/
.column2{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;}
.column2 .itemBox{ width: 48%; display: flex; flex-direction: column;　border: solid 1px #aaa; border-radius: 8px;}
/**/
.column3{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;}
.column3 .itemBox{ width: 33.3%; display: flex; flex-direction: column;　border: solid 1px #aaa; border-radius: 2px;}
/**/
.column4{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;}
.column4 .itemBox{ width: 25%; display: flex; flex-direction: column;}
@media screen and (max-width: 1050px){
.column4 .itemBox{ width: 50%;}
}


/**/
.itemBox .ttl{ width: calc(100% - 30px); margin:0 15px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;  border-bottom: dashed 1px #aaa;}
.itemBox .ttl .num{}
.itemBox .ttl.txtleft{ justify-content: flex-start;}
.itemBox .txt{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding:15px; }
.itemBox .txt p{ width: 100%; display: block; font-size: 13px; color: #555; margin-bottom: 15px;}
.itemBox .txt dl{ width: 100%; display: flex; padding: 10px; border-radius: 4px; background: #e5e5e5;}
.itemBox .txt dl dt{ font-weight: bold; font-size: 11px; padding-right: 6px;}
.itemBox .txt dl dt{ flex: 1; font-size: 11px;}
/**/
.itemBox .ttl_info{ width: 100%; padding: 0 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-bottom: dashed 1px #aaa;}
.itemBox .ttl_info h3{ display: flex; flex-direction: column; align-items: center;}
.itemBox .ttl_info h3 .num{ width: 100%; display: flex; justify-content: center; font-size:20px;}
.itemBox .ttl_info h3 b{ width: 100%; padding:5px 0 10px; min-height: 50px; display: flex; justify-content: center; align-items: center; font-size:20px;}
.itemBox .ttl_info h4{ display: flex; line-height: 18px; font-size: 14px; font-weight: bold; min-height: 80px; justify-content: center; text-align: center;}


@media screen and (max-width: 600px){
.itemBox .ttl_info h3 .num{ font-weight: 200; font-size:8.0vw;}
.itemBox .ttl_info h3 b{ font-size:7.8vw;}
.itemBox .ttl_info h4{ font-size:5.0vw; line-height: 1.4em; margin: 10px 0 25px;}

}




/*-------------------
#purpose-info
--------------------*/
#purpose-info .itemBox .ttl{ height: 130px; justify-content: flex-start;}
#purpose-info .ttl_h3{ text-align: center;}
#purpose-info .columnBox { padding: 20px 1%; border-radius: 8px; border: solid 1px #777;}
#purpose-info .columnBox .itemBox { border-right: solid 1px #aaa;}
#purpose-info .columnBox .itemBox:last-child { border-right:none;}
@media screen and (max-width: 1050px){
#purpose-info .columnBox .itemBox:nth-child(even) { border-right: none;}
#purpose-info .columnBox .itemBox { border-top:solid 1px #aaa; padding: 30px 15px;}
#purpose-info .columnBox .itemBox:nth-child(1), 
#purpose-info .columnBox .itemBox:nth-child(2){ border-top:none;}
}

@media screen and (max-width: 800px){
#purpose-info .columnBox{ width: 96%; margin: 0 2%; padding: 0;}
#purpose-info .ttl_h3{ padding: 0 4% 10px; text-align: left;}
}
@media screen and (max-width: 600px){
#purpose-info .columnBox{ flex-direction: column; justify-content: center; align-items: center;}
#purpose-info .columnBox .itemBox { width: 100%; border-bottom: solid 1px #777; border-right:none; border-top: none;}
#purpose-info .columnBox .itemBox:last-child { border-bottom:none;}
#purpose-info .itemBox .ttl{ height:auto; padding: 20px 0; justify-content: flex-start;}
}


/*------------------------------
service-action
-----------------------------*/
#service-action { }
#service-action h3 { padding: 0px; margin-bottom: 10px;}
#service-action h3 b{ display: flex; align-items: center; font-size: 18px; line-height: 1em;}
#service-action h3 b span{ font-size: 30px; padding-right: 10px; line-height: 30px; vertical-align: baseline; display: block; padding-top: 5px;}
#service-action .div_list{ width: 100%; display: block; padding-top: 5px; margin-bottom: 60px;}
#service-action .div_list .box_add{ width: 100%; display: block; border: solid 1px #ddd; transition: 0.4s; border-radius:8px; padding: 10px; margin-bottom: 10px;}
#service-action .div_list .box_add:hover{box-shadow: 0 10px 18px rgba(0,0,0,.1); border: solid 1px #777;}

#service-action .div_list .box_add.open,  
#service-action .div_list .box_add.open:hover{ border: solid 1px #333; box-shadow: none; border-radius: 2px;}


#service-action .div_list .box_add h4{ width: 100%; font-size: 20px; padding: 15px 3%; position: relative; cursor: pointer; color: #000;}
#service-action .div_list .box_add h4::after{ width: 14px; height: 14px; position: absolute; right: 15px; top: 50%; margin-top: -14px; border-right: solid 1px #aaa; border-bottom: solid 1px #aaa; content: "×"; transform: rotate(45deg); transition: 0.4s; color: #fff; font-weight: 200; font-size: 2px;}
#service-action .div_list .box_add.open h4::after{ border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(0); color: #777; font-size: 22px; margin-top: -20px; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 2px;}
#service-action .div_list .box_add.open h4:hover::after{ color: #fff; background: #444;}

#service-action .div_list .box_add p.addBox{ width: 100%; display: flex; flex-direction: column; padding: 15px 3%; line-height: 1.8em; border-top: solid 1px #ddd; display: none; }
#service-action .div_list .box_add p.addBox > span{ display: block; margin-bottom: 20px;}
#service-action .div_list .box_add p.addBox > span.link{ width: 100%; background: #eee; border-radius: 6px; padding: 6px 10px; margin:10px 0 0; display: flex; flex-wrap: wrap;}
#service-action .div_list .box_add p.addBox > span.link span{ width: 100%; display: block; font-size: 12px; font-weight: bold; margin-bottom: 4px;}
#service-action .div_list .box_add p.addBox > span.link a{ font-size: 11px; line-height: 1em; display: inline-block; padding: 6px 15px; border-radius: 2px; border: solid 1px #3367d6; margin: 0 8px 4px 0;}
#service-action .div_list .box_add p.addBox > span.link a:hover{ background: #000; color: #fff; border: solid 1px #000;}
@media screen and (max-width: 820px) {
#service-action .div_list{ width: 94%; margin:0 3% 60px;}
#service-action .div_list .box_add{ block; border: solid 1px #555;}

}
@media screen and (max-width: 600px) {
#service-action .div_list .box_add.open h4::after{ margin-top: -12px;}
#service-action .div_list .box_add h4{ font-size: 14px;}
#service-action .div_list .box_add p.addBox{ font-size: 13px;}
}


























/*-------------------
流れ
--------------------*/
.flow-act{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;}
.flow-act .actBox{ display: flex; flex-direction: column; position: relative;}
.flow-act.flow-column4 .actBox{ width: 22%;}
.flow-act.flow-column4.noarrow .actBox{ width: 24%;}
.flow-act .actBox::after{ content: "▼"; transform: rotate(-90deg); position: absolute; right: -5%; top: 25%;}
.flow-act.noarrow .actBox::after{ content: ""; display: none;}
.flow-act .actBox:last-child::after{ content: ""; display: none;}
.flow-act .actBox .ttlBox{ width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative;}
.flow-act .actBox .ttlBox h3{ width: 100%; display: block; text-align: center; font-size: 18px;}
.flow-act .actBox .ttlBox h3 br{ display: none;}
.flow-act .actBox .ttlBox h4{ width: auto; max-width: 90%; margin: 15px 5%; display: flex; justify-content: center; align-items: center; height: 100px; padding: 5px; border-radius: 6px; font-size: 14px; font-weight: 500; border: solid 1px #222; text-align: center;}
.flow-act .actBox .txtBox{ display: flex; flex-direction: column; justify-content: center;}
.flow-act .actBox .txtBox p{ display: flex; flex-direction: column; justify-content: center;}
.flow-act .actBox .txtBox p img{ width: 100px; height: auto; margin: 0 auto;}
.flow-act .actBox .txtBox p span{ display: block; text-align: center; font-size: 12px; background: #fff;}
@media screen and (max-width: 1200px){
.flow-act .actBox .ttlBox h3 br{ display: block;}
.flow-act.flow-column4 .actBox{ width: 25% !important;}
.flow-act .actBox .ttlBox::after{left: 95%; top: 60%;}
.flow-act .actBox .ttlBox h4{ font-size: 1.32vw; letter-spacing: 0;}
}
@media screen and (max-width: 800px){
.flow-act.flow-column4 { flex-direction: column; }
.flow-act.flow-column4 .actBox{ width: 92% !important; margin: 0 4% 50px; padding:20px 10px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.2); border-radius: 6px;}
.flow-act .actBox .ttlBox { flex-direction: column-reverse;}
.flow-act .actBox .ttlBox h3{ font-size: 18px; margin: 30px 0 10px;}
.flow-act .actBox .ttlBox h3 br{ display: none;}
.flow-act .actBox .ttlBox h4{ width: 100%; max-width: 100%; height: auto; padding: 15px; font-weight: 400; font-size: 16px; position: relative; margin: 0;}
.flow-act .actBox .ttlBox h4::after{ content: "▽"; font-size: 20px; position: absolute; top: 100%; left: 50%; margin-left: -15px; width: 20px; height: 20px; line-height: 20px; color: #222; z-index: 5; display: flex; vertical-align: top; margin-top: -3px;}
.flow-act .actBox .ttlBox h4::before{ width: 18px; height: 2px; position: absolute; content: ""; top: 100%; left: 50%; margin-left: -14px; background: #fff; z-index: 10;}	
.flow-act .actBox .txtBox p span{ background: none;}
.flow-act .actBox::after{ transform: rotate(0deg); position: absolute; right: 50%; top: 100%; margin: -50px -20px 0 0; font-size: 40px; width: 40px; height: 40px; z-index: -1; transition: 1.4s 1.0s;}
.flow-act .actBox.setView::after{ margin: -14px -20px 0 0;}
.flow-act .actBox .txtBox p{ padding: 10px 5px;}
.flow-act .actBox .txtBox p span{ text-align: left;}
.flow-act .actBox .txtBox p span br{ display: none;}
}
/*-------------------
参考
--------------------*/
.lineList{ width: 100%; display: flex; flex-direction: column;}
.lineList .lineItem{ width: 100%; display: flex; flex-direction: row-reverse; margin: 20px 0 90px;}
.lineList .lineItem .contL{ margin:0 0 0 5%; display: flex; flex-direction: row-reverse;}
.lineList .lineItem .contL.w30p{ width: 30%;}
.lineList .lineItem .contL.w35p{ width: 35%;}
.lineList .lineItem .contL.w40p{ width: 40%;}
.lineList .lineItem .contL.w45p{ width: 45%;}
.lineList .lineItem .contL.w50p{ width: 50%;}
/**/
.lineList .lineItem .contL .imageTab{ width: 100%; display: block; position: relative; overflow: hidden; border: solid 1px #ddd;}
.lineList .lineItem .contL .imageTab ul{ position: absolute; bottom: 5px; left: 0; z-index: 100; width: 100%; display: flex; justify-content: center;}
.lineList .lineItem .contL .imageTab ul li{ width: 100px; margin: 0 4px; font-size: 10px; text-align: center; padding: 4px 6px; border: solid 1px #eee; border-radius: 4px; background: #fff; transition: 0.2s; cursor: pointer;}
.lineList .lineItem .contL .imageTab ul li:hover{ background: #ddd; border: solid 1px #777;}
.lineList .lineItem .contL .imageTab ul li.view, 
.lineList .lineItem .contL .imageTab ul li.view:hover{ background: rgba(0,0,0,.75); color: #fff; border: solid 1px rgba(0,0,0,.75); cursor: auto;}
/**/
.lineList .lineItem .contL .imageTab .imgBox{ width: 100%; display: block; position: absolute; z-index: 1; left: 0; top: 0;}
.lineList .lineItem .contL .imageTab .imgBox.view{ position: relative; z-index: 10; left: auto; top: auto;}
.lineList .lineItem .contL .imageTab .imgBox.clipL{ transition: 0.4s; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) !important;}
.lineList .lineItem .contL .imageTab .imgBox.clipR{ transition: 0.4s; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) !important;}
.lineList .lineItem .contL .imageTab .imgBox.view{ clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%) !important;}
/**/
.lineList .lineItem .contR { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.lineList .lineItem .contR .ttl{ display: flex; flex-direction: column; margin-bottom: 20px;}
.lineList .lineItem .contR .ttl .t1{ width: 100%; font-size: 20px; display: block; line-height: 1.6em;}
.lineList .lineItem .contR p{ width: 100%; display: flex; flex-direction: column;}
.lineList .lineItem .contR p span{ width: 100%; display: block; margin-bottom: 15px; color: #555;}
@media screen and (min-width: 800px){
.lineList .lineItem .contL .imageTab .imgBox img{ transition: 0.8s; filter: grayscale(80%);}
.lineList .lineItem .contL .imageTab:hover .imgBox img{ filter: grayscale(0%);}
}
@media screen and (max-width: 1150px){
.lineList .lineItem .contL{ margin:0 2% 0 5%;}
}
@media screen and (max-width: 800px){
.lineList .lineItem{ width: 94%; margin: 20px auto 40px; max-width: 600px; flex-direction: column; box-shadow: 0 4px 10px rgba(0,0,0,.2); background: #fff;}
.lineList .lineItem .contL{ width: 100% !important; margin: 0;}
.lineList .lineItem .contR{ width: 100% !important; margin: 0; padding: 15px;}
.lineList .lineItem .contR .ttl .t1 br{ display: none;}
}