/* ////////////////////////////////////////////////////////////// */
.Form {
width: 70%;
margin-top: 40px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
max-width: 95%;
padding: 10px;
}
@media screen and (max-width: 768px) {
.Form {
width: 95%;
margin-top: 20px;
}
}

/* 項目＋入力フィールド */
.Form-Item {
border-top: 1px solid #ccc;
padding-top: 10px;
padding-bottom: 10px;
width: 90%;
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.Form-Item {
padding-left: 14px;
padding-right: 14px;
padding-top: 16px;
padding-bottom: 16px;
flex-wrap: wrap;
}
}

/* 項目 */
.Form-Item-Label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-size: 16px;
text-align: left;
}
@media screen and (max-width: 768px) {
.Form-Item-Label {
max-width: inherit;
display: flex;
align-items: center;
font-size: 15px;
}
}
/* お問合せ内容 */
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
@media screen and (max-width: 768px) {
.Form-Item-Label.isMsg {
margin-top: 0;
}
}

/* 必須マーク */
.Form-Item-Label-Required {
border-radius: 6px;
margin-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
width: 48px;
display: inline-block;
text-align: center;
background: #77b3d9;
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.Form-Item-Label-Required {
border-radius: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 32px;
font-size: 10px;
}
}

/* テキストフィールド */
.Form-Item-Input {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 16px;
}
@media screen and (max-width: 768px) {
.Form-Item-Input {
margin-left: 0;
margin-top: 18px;
height: 40px;
flex: inherit;
font-size: 15px;
}
}

/* テキストエリア */
.Form-Item-Textarea {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
height: 216px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 14px;
font-weight: 600;
color: #333333;
}
@media screen and (max-width: 768px) {
.Form-Item-Textarea {
margin-top: 18px;
margin-left: 0;
height: 200px;
flex: inherit;
font-size: 15px;
}
}

.btn_a{
width:50%;
height: 200px;
}
@media screen and (max-width: 768px) {
.btn_a{
text-align: center;
width:90%;
height: 150px;
}
}

/* Formボタン */
.Form-Btn {
border-radius: 4px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-bottom: 14px;
width: 125px;
letter-spacing: 0.05em;
background: #166ab5;
color: #fff;
font-weight: bold;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.Form-Btn {
margin-top: 24px;
padding-top: 8px;
padding-bottom: 8px;
width: 110px;
font-size: 12px;
}
}

/* Form上部送信チュートリアル3カラム */
*, *:before, *:after {
box-sizing: border-box;
}
.col_3{
width: 85%;
display: flex;
margin:auto;
flex-wrap: wrap;
background: #eaedf2;
}
.col_3 > *{
width: calc( 33.33333% - 8px ) ;
margin-right: 12px;
margin-bottom: 4px;
}
.col_3 > *:nth-child(3n){
margin-right: auto;
}
.col_3 > * > *{
background: #ff0000;
height: 120px;
position: relative;
overflow: hidden
}
.col_color{
width: 85%;
display: flex;
flex-wrap: wrap;
margin:auto;
margin-bottom: 20px;
}
.col_color > *{
width: calc( 33.33333% - 8px ) ;
margin-right: 12px;
margin-bottom: 6px;
height: 10px;
}
.col_color > *:nth-child(3n){
margin-right: auto;
}
.col_color > * > *{
background: #ff0000;
height: 120px;
position: relative;
overflow: hidden
}
.active{
background: #77b3d9;
}
/* ////////////////////////////////////////////////////////////// */