/* 共通スタイル */
body, html { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6;}
.container { margin: 0 auto; max-width: 1200px; padding: 20px; overflow: hidden;}
h1,h2,h3,h4,h5{display: inline-block;}
/** 共通スタイルPC **/
@media screen and (min-width: 768px) {
}


/* ヘッダー */
header { background: #b22; color: #ffffff; padding: 1rem 0; text-align: center;}
.header-container{ padding: 0;}
header nav ul { padding: 0; list-style: none;}
header nav ul li { display: inline; margin-right: 20px;}
header nav ul li a { color: #ffffff; text-decoration: none; font-weight: bold;}
/** ヘッダーPC **/
@media screen and (min-width: 768px) {
    header nav ul li { margin-right: 40px;}
}


/* ヒーローセクション */
.hero { background: url('images/main_visual01.jpg') no-repeat center center/cover; text-align: center; color: #ffffff; text-shadow: 1px 2px 3px #808080; height: 100vh;}
.hero-container { display: table-cell; height: 100vh; vertical-align: middle; text-align: center;}
.hero p { font-size: 1.2rem;}
.hero-wrapper{ position: relative;}
.hero-wrapper::before{ content: ''; background-color: rgba(0, 0, 0, .4); position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.hero-container{ position: relative;} 
.strike-through{ text-decoration: line-through;}
.cta-button { display: inline-block; text-decoration: none; background: #b22; color: #ffffff; padding: 1rem 2rem; font-size: 1.2rem; border: none; cursor: pointer; margin-top: 2rem;}
/** ヒーローセクションPC **/
@media screen and (min-width: 768px) {
    .hero { height: inherit; padding: 13rem 0;}
    .hero-container { display: block; height: inherit;}
    .hero h1 { font-size: 4rem; margin-top: 0;}
}


/* サービスセクション */
.services { padding: 4rem 0; text-align: center;}
.features { list-style: none; padding: 0;}
.features li { font-size: 1.3rem; margin-bottom: 1rem;}
/** サービスセクションPC **/
@media screen and (min-width: 768px) {
    .flex { display: flex; justify-content: space-evenly;}
    .feature { width: 50%;}
}


/* 料金セクション */
.pricing { padding: 4rem 0; text-align: center;}
.pricing h2 { margin-bottom: 2rem;}
.table-wrapper { overflow-x: auto;}
.table-wrapper table { width: 100%;}
.table-wrapper th, .table-wrapper td { white-space: nowrap;} 
/** 料金セクションPC **/
@media screen and (min-width: 768px) {
}


/* FAQセクション */
.faq { padding: 4rem 0; text-align: center;}
.faq h2 { margin-bottom: 2rem;}
/** FAQセクションPC **/
@media screen and (min-width: 768px) {
}


/* お客様の声セクション */
.reviews { padding: 4rem 0; text-align: center;}
.reviews h2 { margin-bottom: 2rem;} 
/** お客様の声セクションPC **/
@media screen and (min-width: 768px) {
    .contact form input,
    .contact form textarea { width: 70%;}
}


/* お問い合わせセクション */
.contact { background: #f4f4f4; padding: 4rem 0; text-align: center;}
.contact h2 { margin-bottom: 2rem;}
.contact form input,
.contact form textarea { width: 100%; padding: 1rem; margin-bottom: 1rem;}
.contact form input[type="submit"] { background: #b22; color: #ffffff; border: none; cursor: pointer;}
/** お問い合わせセクションPC **/
@media screen and (min-width: 768px) {
    .contact form input,
    .contact form textarea { width: 70%;}
}


/* 会社情報セクション */
.about { padding: 4rem 0; text-align: center;}
.about h2 { margin-bottom: 2rem;}
/** 会社情報セクションPC **/
@media screen and (min-width: 768px) {
}


/* フッター */
footer { background: #b22; color: #ffffff; text-align: center; padding: 1rem 0;}
/** フッターPC **/
@media screen and (min-width: 768px) {
}