@charset "UTF-8";


.mvContents{ margin-bottom: clamp(50px, 8.33vw, 100px);}

.viewPoint{ margin-bottom: 10vw;}
.viewPoint .point:not(:last-of-type){ margin-bottom: clamp(4rem, 6.66vw, 8rem);}
.view_tit{ font-size: clamp(18px, 2.08vw, 25px); text-align: center; font-weight: 300; margin-bottom: 1em;}
.viewPoint .txt{ font-size: clamp( 1.6rem , 1.75vw , 2.1rem); text-align: center;}
.viewPoint figure{ position: relative;}
.viewPoint .view_cap01 { bottom: 20px;}
.viewPoint .view_cap02 { bottom: -30px; right: 0;}
.pinchout{ text-align: center; margin-top: 10px;}

.viewPoint .point01 .view_tit{ border-bottom: 1px solid #000; padding-bottom: 0.8em;}
.viewPoint .point02{ position: relative;}
.viewPoint .point02 figure{ width: 78.75%; max-width: 952px; margin-left: 7.25%;}

.viewPoint .color_list { position: absolute; bottom: 0; display: flex; width: 372px; font-size: 1.2rem; margin-left: 7.25%;}
.viewPoint .color_list li{ display: inline-block;  margin-right: 1em;}
.viewPoint .color_list li::before{ content: ""; display: inline-block; width: 2em; height: 1em; margin-right: 0.5em; }
.viewPoint .color_list li.beige::before{ background: #dfd9d4;}
.viewPoint .color_list li.brown::before{ background: #beb1aa;}
.viewPoint .color_list li.orange::before{ background: #d1a590;}
.viewPoint .color_list li.green::before{ background: #c3d7b1;}

@media (max-width: 767px){
.viewPoint .view_cap01 { bottom: 0;}    
.viewPoint .point01 figure{ margin-top: 20px;}
.viewPoint .point02 figure{ width: 100%; margin-left: 0;}
.viewPoint .view_cap02{ bottom: -20px;}
.viewPoint .color_list { position: static; margin: 30px 0 0; width: 100%;}
}