ブログサンプル4

サンプルテキスト。サンプルテキスト。

.table.CF7_table{ width:80%; margin:0 auto; border: 3px solid #e5e5e5; } .table.CF7_table tr{ border-top: 1px solid #e5e5e5; } /*入力欄*/ .CF7_table input, .CF7_table textarea { border: 1px solid #d8d8d8; } .CF7_table ::placeholder { color:#797979; } /*「必須」文字*/ .CF7_req{ font-size:.9em; padding: 5px; background: #f47a44; color: #fff; border-radius: 3px; margin-right:1em; } /*「任意」文字*/ .CF7_unreq{ font-size:.9em; padding: 5px; background: #bdbdbd;/*グレー*/ color: #fff; border-radius: 3px; margin-right:1em; } /* タイトル列 */ @media screen and (min-width: 768px){ .CF7_table th{ width:30%;/*横幅*/ background-color:#ffece2; text-align:left; } } /* レスポンシブ */ @media screen and (max-width: 768px){ table.CF7_table{ width:95%; } .CF7_table tr, .CF7_table td, .CF7_table th{ display: block; width: 100%; line-height:2.5em; } .CF7_table th{ background-color:#ebedf5; } } /* 「送信する」ボタン */ .wpcf7 input.wpcf7-submit { background-color:#f47a44; border:0; color:#fff; font-size:1.2em; font-weight:bold; margin:0 auto; } .CF7_btn{ text-align:center; margin-top:20px; } .wpcf7-spinner{ width:0; margin:0; } .accordion-01 { max-width: 100%; margin-bottom: 7px; border-bottom: 2px solid #d0d0d0; } .accordion-01 summary { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em; color: #333333; font-weight: 600; cursor: pointer; } .accordion-01 summary::-webkit-details-marker { display: none; } .accordion-01 summary::after { transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #333333b3; border-right: 3px solid #333333b3; content: ”; transition: transform .3s; } .accordion-01[open] summary::after { transform: rotate(225deg); } .accordion-01 p { transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 2em 1.5em; color: #333333; transition: transform .5s, opacity .5s; } .accordion-01[open] p { transform: none; opacity: 1; }