@charset "utf-8";
/* :root{
    --font-color: #333;
    --main-color: #ea5413;
}　↑　共通で変数定義するなら、ここで！ */
*{
    margin: 0;
    padding: 0;
    /* box-sizing: border-box;　normalize.cssでは使いますヨ */
    /* ↓ Safariで　clamp関数等？がレスポンスするようになる （必須じゃん？）*/
    min-height: 0vw
}
html{
    font-size: 62.5%;
}
body{
    width: 100%;
    height: auto;
    color: #333;
    /* color: var(--font-color);　変数利用例です。上と同じ */
    /* Font読み込み　ノトサンズ時（研究中） */
    font-family: 'Noto Sans JP',/*YuGothic,"Yu Gothic Medium","Yu Gothic",*/ sans-serif;
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0;
    padding: 0;
}
a{
    /* color: #333; 最終必須。作業時はこのままで　*/
    text-decoration: none;
}
img{
    vertical-align: bottom;
    width: 100%;
}
ul,ol{
    list-style: none;
}
/* リセットの追記ここまで */
/* 共通部分 */
/* .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
} */
/* ヘッダー */
.header-cont{
    display: flex;
    justify-content: center;
    width: 100%;
    /* margin-top: 5%; */
}
/* h1{
    font-size: 3.4vw;
    font-weight: normal;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
    position: relative;
} */
/* ナビ */
/* キービジュアル */
/* メインコンテンツ */
.info {
    margin: 8%;
    margin-top: min(100px, 8%);
    margin-bottom: min(100px, 8%);
}
h2,h3{
    font-size: 1.4em;
    font-weight: normal;
    text-align: center;
    padding:12px 0 12px 0;
    background-color: #f6d8c5;
    -webkit-border-radius:6px 6px 0px 0px;
    -moz-border-radius:6px 6px 0px 0px;
    border-radius:6px 6px 0px 0px;
    /* background-color:#2ABCA7; */
    background-color:#bf4b2c;
    color:#fafafa;
}
.container {
    max-width:700px;
    margin:0 auto;
    padding-bottom: 1px;
    text-align:center;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    background-color:hsl(0, 0%, 95%);
}
h2 ~ p{
    /* font-size: 2vw; */
    font-weight: normal;
    padding-bottom: 40px;
}
table{
    margin: 35px auto;
}
table td {
    text-align: left;
    padding: 3px 10px;
}
/* お問い合わせフォーム */
.formWrap{
    margin: 8% 8% 0 8%;
    margin-top: min(100px, 8%);
}
.formWrap .container p{
    text-align: left;
    margin-left: 10%;
    margin-bottom: 1%;
}
.container p:first-of-type{
    margin-top: 35px;
}
h4 {
    font-size: 0.78em;
    margin: 0 10%;
    text-align:center;
    padding:10px 0 10px 0;
    font-weight: normal;
}
input {
    margin-bottom:10px;
}
textarea {
    height:200px;
    margin-bottom:10px;
}
input, textarea {
    font-size: 1em;
    padding: 15px 10px 10px;
    border: 1px solid hsl(0, 0%, 71%);
    background: hsl(0, 0%, 70%);
    color:hsl(0, 0%, 98%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 80%;
    max-width: 700px;
}
::-webkit-input-placeholder {
    color: hsl(0, 0%, 98%);opacity: 0.6;
}
:-moz-placeholder {
    color: hsl(0, 0%, 98%);opacity: 0.6;  
}
::-moz-placeholder {
    color: hsl(0, 0%, 98%);opacity: 0.6; 
}
:-ms-input-placeholder {  
    color: hsl(0, 0%, 98%);opacity: 0.6;  
}
button {
    font-size: 1em;
    margin-top:15px;
    margin-bottom:30px;
    background-color:#bf4b2c;
    padding: 12px 45px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #bf4b2c;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
    cursor: pointer;
    width:40%;
    color:hsl(0, 0%, 100%);
}
button:hover, .button:hover {
    background:#eb2a10;
    transform: scale(1.05);
}
button:active, .button:active {
    background:#eb2a10;
    transform: scale(1.05);
}
svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(70px, 20vw, 150px);
}
small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 1vh);
    color: #333;
    font-size: clamp(10px, 1.5vw + 0.4rem, 15px);
    pointer-events: none;
    user-select: none;
    z-index: 10;
    white-space: nowrap;
}
/* サブコンテンツ（バナースペース） */
/* フッター */
footer{
    position: relative;
    z-index: 2;  
    height: clamp(70px, 20vw, 150px);
    overflow: hidden;
}
/* media queries */
@media (max-width: 600px) {
    h2,h3{
        font-size: 1.1em;
        padding:14px 0 14px 0;
    }
    h4{
        margin: 0 6%;
        font-size: 0.62em;
    }
    .formWrap .container p{
    margin-left: 5%;
    margin-bottom: 1%;
    }
    input, textarea {
        width: 90%;
    }
    button {
        width:85%;
    }
    small{
        transform: translate(-50%, 50％);
    }
}
/* スマホ用　max-width: 600px */
@media (max-width: 600px) {
    /* ハンバーガー */
}