@charset "UTF-8";

.prFlWrap .artclInfo .con-top {padding-bottom: 20px;}
.prFlWrap .artclInfo .con-top .prFl-name {font-size: 30px; letter-spacing: -.05em; line-height: 1.5;}
.prFlWrap .artclInfo .con-top .prFl-rank {font-size: 16px; color: #15a5bc; line-height: 1.5; font-weight: 500;}
.prFlWrap .artclInfo .con-top .prFl-name,
.prFlWrap .artclInfo .con-top .prFl-rank {word-break: break-word;}

@media screen and (max-width: 768px) {
	.prFlWrap .artclInfo .con-top .prFl-name,
	.prFlWrap .artclInfo .con-top .prFl-rank {text-align: center;}
}

/* list */
ul._prFlList {margin-top: 20px; display: flex; flex-wrap: wrap;}
ul._prFlList li._prFlLi {font-size: 16px; width: 32.33%; margin: 0 0.5% 20px 0.5%;}

._prFlList ._prFlLi .wrap {position: relative; box-sizing: border-box; display: table; width: 100%; height: 100%; border: 1px solid #DDD; padding: 20px; background:#FFF; box-shadow: 0 0 5px #DDD;}
._prFlList ._prFlLi .wrap:before {display: block; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #222; position: absolute; left: 0; top: 0; background:rgba( 0,0,0,0.3 ) url(/sites/guide/images/plus_4_w.png) no-repeat center; filter: alpha(opacity=0); opacity: 0;}
._prFlList ._prFlLi .wrap .thumbnail,
._prFlList ._prFlLi .wrap .artclInfo {display: table-cell; vertical-align: top; isolation: isolate;}
._prFlList ._prFlLi .wrap .thumbnail {width: 120px; height: 150px; overflow: hidden;}
._prFlList ._prFlLi .wrap .thumbnail img {display: block; width: calc(100% - 6px); max-height: 100%; box-shadow: 5px 5px 0 #DDD;}
._prFlList ._prFlLi .wrap .artclInfo {position: relative; width: calc(100% - 120px); padding-left: 20px;}
._prFlList ._prFlLi .wrap .artclInfo::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: url(../images/inPreparation_icon.png) no-repeat center; background-size: 80px; filter: alpha(opacity=10); opacity: 0.1;}
._prFlList ._prFlLi .wrap .artclInfo dl {width: 100%; font-size: 0; padding: 2px 0; line-height: 1.5;}
._prFlList ._prFlLi .wrap .artclInfo dl dt,
._prFlList ._prFlLi .wrap .artclInfo dl dd {display: inline-block; vertical-align: top; font-size: 15px; word-break: break-word; box-sizing: border-box;}
._prFlList ._prFlLi .wrap .artclInfo dl dt {width: 80px; font-weight: 500;}
._prFlList ._prFlLi .wrap .artclInfo dl dt:after {content: ":"; display: inline-block; float: right; margin-right: 10px;}
._prFlList ._prFlLi .wrap .artclInfo dl dd {width: calc(100% - 80px);}
._prFlList .gotoDetail {display: block; width: 40px; height: 40px; background: url(/sites/guide/images/plus_1.png) no-repeat center; position: absolute; top: 15px; right: 15px; border: 1px solid transparent;}
._prFlList .gotoDetail:hover {border-color:#666;}

._prFlList .btn {margin-top: 25px;}
._prFlList .btn button {position: relative; display: flex; align-items: center; flex-wrap: wrap; color: #929292; font-size: 16px; font-weight: 500; text-align: center; background: #fff; border: 1px solid #BBBBBB; box-sizing: border-box; border-radius: 30px; padding: 10px 25px; cursor: pointer;}
._prFlList .btn button::after {content: ''; display: inline-block; width: 15px; height: 15px; background: url(../images/view_btn_icon.png) no-repeat center / cover; margin-left: 5px; transition: all 0.4s cubic-bezier(0.5, 0, 0.3, 1);}
._prFlList .btn button:hover {color: #fff; background: #004d41; border: 1px solid #004d41;}
._prFlList .btn button:hover::after {background: url(../images/view_btn_icon_hover.png) no-repeat center / cover;}

@media screen and (max-width: 1024px) {
	ul._prFlList li._prFlLi {width: 48.5%;}
}
@media screen and (max-width: 768px) {
	ul._prFlList li._prFlLi {width: 100%; margin: 0 0 20px 0;}
	._prFlList ._prFlLi .wrap {padding: 30px 20px;}
	._prFlList ._prFlLi .wrap .thumbnail {width: 140px; height: 170px;}
	._prFlList ._prFlLi .wrap .thumbnail,
	._prFlList ._prFlLi .wrap .artclInfo {display: block;}
	._prFlList ._prFlLi .wrap .thumbnail {margin: 0 auto;}
	._prFlList ._prFlLi .wrap .thumbnail img {box-shadow: none;}
	._prFlList ._prFlLi .wrap .artclInfo {padding-left: 0; width: 100%;}
	._prFlList .btn button {display: block; width: 100%; margin: 0 auto;}
	._prFlList .btn button::after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); margin-left: 0;}
}

/* detView */
._prFlView {background: #FFF; border: 1px solid #eaeaea; border-top: 3px solid #1a222a;}
._prFlView .view-info {padding: 40px;}
._prFlView .view-info .box {display: table; width: 100%;}
._prFlView .view-info .thumbnail {display: table-cell; vertical-align: top; width: 120px; height: 150px; overflow: hidden;}
._prFlView .view-info .thumbnail img {display: block; width: calc(100% - 6px); max-height: 100%; box-shadow: 5px 5px 0 #DDD;}

._prFlView .artclInfo {display: table-cell; vertical-align: top; width: calc(100% - 120px); padding-left: 30px; overflow: hidden;}
._prFlView .artclInfo dl {clear: both;}
._prFlView .artclInfo dl dt {position: relative; float: left; display: inline-block; width: 100px; color: #222; font-size: 16px; font-weight: 500; letter-spacing: -.05em; padding-left: 15px; word-break: break-word; box-sizing: border-box;}
._prFlView .artclInfo dl dt::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #B6C0DA; position: absolute; top: 15px; left: 0;}
._prFlView .artclInfo dl dd {float: left; display: inline-block; width: calc(100% - 100px); font-size: 16px; padding-left: 15px; word-break: break-word; box-sizing: border-box;}

._prFlView .view-detail {padding: 0 40px; border-top: 1px solid #eaeaea; overflow: hidden;}
._prFlView .view-detail dl {width: calc(100% - 20px); padding: 30px 10px; border-bottom: 1px solid #eaeaea; overflow: hidden; clear: both;}
._prFlView .view-detail dl:last-child {border-bottom: 0;}
._prFlView .view-detail dl dt {position: relative; float: left; display: inline-block; width: 155px; color: #222; font-size: 22px; font-weight: 500; letter-spacing: -.05em; padding-left: 15px; box-sizing: border-box;}
._prFlView .view-detail dl dt::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #01A0C7; position: absolute; top: 22px; left: 0;}
._prFlView .view-detail dl dd {float: left; display: inline-block; width: calc(100% - 155px); font-size: 16px; padding-left: 10px; box-sizing: border-box;}

@media screen and (max-width: 768px) {
	._prFlView .view-info {padding: 30px 20px;}
	._prFlView .view-info .thumbnail {display: block; margin: 0 auto; width: 140px; height: 170px;}

	._prFlView .artclInfo {display: block; width: 100%; padding-left: 0; margin-top: 15px;}

	._prFlView .view-detail {padding: 0 10px;}
	._prFlView .view-detail dl {padding: 20px 10px;}
	._prFlView .view-detail dl dt,
	._prFlView .view-detail dl dd {width: 100%;}
	._prFlView .view-detail dl dd {padding-left: 0; margin-top: 15px;}
}

/* proflDetailUpdtView */
._prFlUpdtView {position: relative; max-width: 1400px; margin: 0 auto; background: #FFF; border-top: 3px solid #1a222a;}
._prFlUpdtView .apply-form {position: relative; border-bottom: 1px solid #e1e1e1; box-sizing: border-box;}
._prFlUpdtView .apply-form .row {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between; min-height: 60px;}
._prFlUpdtView .apply-form .row .title {position: relative; width: 200px; font-size: 22px; color: #222; font-weight: 500; padding: 15px 20px; box-sizing: border-box;}
._prFlUpdtView .apply-form .row .title::after {content: ''; position: absolute; right: 0; top: 32px; width: 1px; height: 15px; background: #c4c4c4;}
._prFlUpdtView .apply-form .row .insert-box {width: calc(100% - 200px); padding: 20px; font-size: 16px; color: #333; box-sizing: border-box;}
._prFlUpdtView .apply-form .row .insert-box ul.chkList {}
._prFlUpdtView .apply-form .row .insert-box ul.chkList li {display: inline-block;}
._prFlUpdtView .apply-form .row .insert-box ul.chkList li:not(:last-child) {margin-right: 15px;}
._prFlUpdtView .apply-form .row ul.chkList label,
._prFlUpdtView .apply-form .row ul.chkList input[type="radio"] {display: inline-block; cursor: pointer;}
._prFlUpdtView .apply-form .row ul.chkList input[type="radio"] {margin: 0 5px;}
._prFlUpdtView .apply-form .row input[type="text"] {height: 40px; line-height: 40px; color: #333; font-size: 16px; padding: 0 15px; border: 1px solid #c4c4c4; box-sizing: border-box; border-radius: 5px;}
._prFlUpdtView .apply-form .row input[type="text"]:focus,
._prFlUpdtView .apply-form .row input[type="text"]:focus-visible {border-color: #009df5;}
._prFlUpdtView .apply-form .row .editBox {margin-top: 20px;}

@media screen and (max-width: 768px) {
	._prFlUpdtView .apply-form .row {display: block; padding: 16px 20px;}
	._prFlUpdtView .apply-form .row .title {display: block; width: 100%; padding: 0; padding-left: 20px;}
	._prFlUpdtView .apply-form .row .title::after {top: 22px; left: 3px; width: 4px; height: 4px; background: #01A0C7; border-radius: 50%;}
	._prFlUpdtView .apply-form .row .insert-box {width: 100%; padding: 0; margin-top: 16px;}
	._prFlUpdtView .apply-form .row .insert-box .insert {width: 100%;}
	._prFlUpdtView .apply-form .row .insert-box ul.chkList li {display: block;}
	._prFlUpdtView .apply-form .row .insert-box ul.chkList li:not(:last-child) {margin-right: 0; margin-bottom: 10px;}
	._prFlUpdtView .apply-form .row input[type="text"] {width: 100%;}
}

/* button */
.prFlWrap .btn-control{overflow: hidden; padding: 50px 0; text-align: center;}
.prFlWrap .btn-control .btn-deco {display: inline-block; color: #FFF; font-size: 16px; font-weight: 500; border: 3px solid transparent; border-radius: 30px; padding: 10px 25px; margin: 0 5px; cursor: pointer; transition: all 0.2s cubic-bezier(0.3, 0, 0.3, 1);}

.prFlWrap .btn-control .btn-deco.color1 {background: #858585;}
.prFlWrap .btn-control .btn-deco.color2 {background: #004d41;}
.prFlWrap .btn-control .btn-deco.color1:hover {background: #FFF; border-color: #858585; color: #858585;}
.prFlWrap .btn-control .btn-deco.color2:hover {background: #FFF; border-color: #004d41; color: #004d41;}

@media screen and (max-width: 768px) {
	.prFlWrap .btn-control {padding: 30px 0;}
	.prFlWrap .btn-control .btn-deco {display: block; width: 90%; padding: 10px 0; margin: 0 auto 10px;}
}

/* no data */
.prFlWrap .no-data {}
._prFlView .no-data {padding: 30px 10px;}

@media screen and (max-width: 768px) {
	._prFlView .no-data {text-align: center;}
}