@charset "UTF-8";

.comment {margin-bottom: 14vw;}
.comment .left {margin-bottom: 10vw;position: relative;}
.comment .left-in-img img.main{width: 100%;}

.comment .text{margin: -6vw 0 0;}
.comment .text img{width: 100% ;margin-bottom: 4vw;}
.comment .text .read{font-family: var(--mincho);font-size: 5vw;line-height: 1.5;font-weight: 600;margin-bottom: 3vw;}
.comment .text .sub{font-weight: bold;margin-bottom: 1vw;color: var(--blue);font-size: 4vw;}
.comment .text .name{font-weight: bold;}

.vision{margin-bottom: 12vw;}
.vision li{padding: 5%;background: var(--bluebg);margin-bottom: 2vw;}
.vision li .big{text-align: center;margin-bottom: 2vw;color: var(--blue);font-family: "Marcellus";font-weight: 400;font-size: 6.6vw;line-height: 1.3;letter-spacing: 0.08em;}
.vision li .big span{font-family: var(--gothic);font-size: 3.6vw;font-weight: bold;display: block;letter-spacing: 0.04em;}
.vision li .mini{text-align: center;margin-bottom: 0;}

.flow ul{position: relative;}
.flow li{padding: 5%;border: 1px solid #ddd;margin-bottom: 8vw;background: #fff;position: relative;}
.flow li:after{content: "";width: 10px;height: 10vw;position: absolute;bottom: -9vw;left: 50%;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);background: #d4eeef;z-index: -1;}
.flow li:last-child:after{content: none;}
.flow li:last-child{margin-bottom: 0;}
.flow li img{width: 100%;margin-bottom: 4vw;}
.flow li p.read{font-weight: bold;color: var(--gold);font-size: 4vw;margin-bottom: 2vw;line-height: 1.6;}
.flow li p.read span{background: var(--blue);font-size: 70%;padding: 1% 3%;color: #fff;border-radius: 30px;margin-right: 2%;vertical-align: text-top;font-family: "Marcellus";font-weight: 400;}
.flow li p:last-child{margin-bottom: 0;}

.flow li .tel{font-size: 6vw;font-family: lato;font-weight: 400;letter-spacing: .04em;display: table;}
.flow li .tel:before {content: 'TEL.';font-size: 5.26vw;display: inline-block;}

.flow-link a{width: 60vw;padding: 2.2vw 0 2.5vw;margin: auto;color: #fff;font-size: 3.6vw;font-family: lato;font-weight: 400;text-align: center;letter-spacing: 0.2vw;background: #baad8e;-moz-border-radius: 10vw;-webkit-border-radius: 10vw;border-radius: 10vw;position: relative;margin-bottom: 2vw;}
.flow-link a:after {content: '\f105';font-family: 'icon';position: absolute;top: 50%;right: 4vw;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}



/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {

.wrapper-first{overflow: visible;}
    
.comment{display: grid;grid-gap: 4rem;grid-template-columns: 1fr 48%;}
.comment .left{margin-bottom: 0;}
.comment .left-in{position: sticky;top: 60px;}
.comment .left-in-img{position: relative;}

.comment .text{position: relative;border-left: 1px solid #bfbfbf;padding-left: 4.2vw;margin: 0;}
.comment .text .flex{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;margin-bottom: 46px;}
.comment .text img{width: 50%;margin-bottom: 0;}
.comment .text .read{font-size: clamp(1.25rem, 0.862rem + 0.85vw, 1.5rem);margin-bottom: 10px;}
.comment .text .sub{font-size: 17px;margin-bottom: 10px;}

.vision{margin-bottom: 100px;}
.vision ul{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
.vision li{padding: 50px 30px;margin-bottom: 0;width: 32.5%;}
.vision li .big{margin-bottom: 20px;font-size: 32px;line-height: 1.4;}
.vision li .big span{font-size: 15px;}
.vision li .mini{text-align: center;margin-bottom: 0;}

.flow ul{position: relative;}
.flow li{padding: 40px;margin-bottom: 40px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.flow li:after{content: "";width: 10px;height: 10vw;position: absolute;bottom: -9vw;left: 50%;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);background: #d4eeef;z-index: -1;}
.flow li:last-child:after{content: none;}
.flow li img{width: 320px;margin: 0 0 0 30px;order: 2;}
.flow li p.read{font-size: 20px;margin-bottom: 14px;}
.flow li p.read span{padding: 6px 12px;margin-right: 10px;}
.flow li .tel{font-size: 28px;}
.flow li .tel:before {font-size: 20px;}

.flow-link{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.flow-link a{width: 48%;padding: 16px 0 18px;font-size: 15px;letter-spacing: .04em;margin-bottom: 20px;}
.flow-link a:after {right: 20px;}


}

@media screen and (min-width: 1000px) {
.comment{grid-template-columns: 1fr 60%;margin-bottom: 100px;}
}