@charset "UTF-8";

/* 全体レイアウト */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN";
}
a {
    text-decoration: none;
}
.container {
    max-width: 1170px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}
/* トップカバー */
.top {
    padding: 180px 0 100px 0;
    background-image: url(./img/top.jpg);
    /* メインイメージ */
    background-size: cover;
    color: hsl(0, 0%, 100%);
    text-align: center;
}
.top h1 {
    font-size: 45px;
    letter-spacing: 5px;
}
/* メインコンテンツ */
.heading {
    padding-top: 30px;
    padding-bottom: 15px;
    color: hsl(280, 2%, 37%);
    text-align: center;
}
.heading h2 {
    font-weight: normal;
}
.heading h3 {
    font-weight: normal;
}
.main .main2 {
    padding-bottom: 10px;
}
/* about */
.about {
    padding-bottom: 120px;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: hsl(0, 0%, 97%);
    text-align: center;
}
.about-text {
    width: 80%;
    display: inline-block;
    margin-top: 15px;
    font-size: 13px;
    color: hsl(0, 0%, 19%);
}
/* discoursen */
.discoursen {
    padding-bottom: 180px;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: hsl(0, 0%, 97%);
}
.discon {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.discon-photo {
    max-width: 400px;
    margin-top: 5px;
    padding-left: 5%;
}
.discon-text {
    max-width: 400px;
    margin-top: 5px;
    padding-left: 2%;
    font-size: 13px;
    color: #313131;
}
/* products */
.products {
    padding-bottom: 80px;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: hsl(0, 0%, 97%);
    text-align: center;
    clear: left;
}
.product {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}
.product-icon {
    margin-top: 5px;
    float: center;
}
.products-text {
    width: 400px;
    display: inline-block;
    margin-top: 15px;
    font-size: 13px;
    color: hsl(0, 0%, 19%);
    text-align: left;
}
/* history */
.historys {
    padding-top: 10px;
    border-bottom: 1px solid hsl(0, 0%, 93%);
    padding-bottom: 80px;
    background-color: hsl(144, 51%, 58%);
    text-align: center;
    clear: both;
}
.history {
    display: -webkit-flex;
    display: flex;
    flex-shrink: 5;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
.history-text {
    max-width: 380px;
    padding: 15px 40px;
    text-align: left;
}
.history-photo {
    max-width: 380px;
    padding: 15px 40px;
    text-align: center;
}
.contact-text {
    max-width: 380px;
    padding: 15px 40px;
    text-align: center;
}
/* form */
form {
    /* フォームエリア */
    margin: 0 auto;
    /* フォーム飾り */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
form div + div {
    margin-top: 1em;
}
label {
    /* 項目名 */
    display: inline-block;
    text-align: right;
}
input,
textarea {
    /* 入力エリアフォント */
    font: 1em sans-serif;
    /* 入力エリアサイズ */
    box-sizing: border-box;
    /* 入力エリア飾り */
    border: 1px solid #999;
}
input:focus,
textarea:focus {
    /* 入力フォーカスカラー */
    border-color: hsl(0, 0%, 0%);
}
textarea {
    /* 入力エリア内レイアウト */
    vertical-align: top;
    /* 入力エリア内レイアウト */
    height: 5em;
}
.button {
    /* ボタンレイアウト */
    padding-left: 90px;
}
button {
    /* ボタンレイアウト */
    margin-left: .5em;
}
/* フッター */
footer {
    padding-top: 30px;
    padding-bottom: 20px;
    width: 100%;
    background-color: hsl(0, 100%, 2%);
    clear: left;
}
footer p {
    color: azure;
    font-size: 12px;
    text-align: center;
}
.botom a p {
    color: hsl(0, 100%, 1%);
    /*background-color: hsl(75, 95%, 15%)*/
}
.clear {
    clear: left;
}