@charset "utf-8";

/* ======================================
   全体設定
====================================== */
body{
    background: #fbf9cc url(../images/bg.png) repeat-x;
    font-family: "Yu Gothic", "ヒラギノ角ゴ ProN", sans-serif;
    margin: 0;
}

/* リンク色 */
a{
    color: #df4839;
}
a:hover{
    color:#ff705b;
    text-decoration: none;
}

/* ヘッダー・ナビ・フッター */
header,
nav,
footer{
    text-align: center;
}

/* ======================================
   ナビゲーション
====================================== */
.menu{
    padding: 0;
}
.menu li{
    list-style: none;
    display: inline-block;
    width: 180px;
    margin: 0 10px;
}
.menu a{
    display: block;
    padding: 10px;
    background-color: #6fbb9a;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
}
.menu a:hover{
    background-color: #90ddbb;
}

/* ======================================
   ページタイトル
====================================== */
h1{
    width: 300px;
    margin: 40px auto;
    padding: 30px;
    border: 5px solid #95dbbd;
    background: linear-gradient(to bottom,#6fbb9a,#4a9d79);
    color: #fff;
    font-size: 300%;
    line-height: 1;
    border-radius: 50%;
    text-shadow: 1px 1px 2px #307657;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    font-family: "Limelight", sans-serif;
}

/* ======================================
   見出し
====================================== */
.h{
    padding: 10px;
    margin-bottom: 30px;
    border: 1px dotted #94c8b1;
    border-left: 10px solid #d0e35b;
    color: #6fbb9a;
    border-radius: 5px 0 0 5px;
}

.h-sub{
    padding: 10px;
    background-color: #fbf9cc;
    color: #ff705b;
    border-radius: 10px;
    box-shadow: 0 0 5px 2px #ffd0ad inset;
}
.h-sub span{
    font-weight: normal;
}

/* ======================================
   コンテンツ枠
====================================== */
#contents{
    max-width: 800px;
    width: 90%;
    margin: 40px auto;
    padding: 40px 80px;
    border: 1px solid #f6bb9e;
    background-color: #fff;
}

/* セクション間隔 */
#contents > section + section{
    margin-top: 80px;
}

/* ======================================
   画像
====================================== */
.imgL{
    float: left;
    margin-right: 20px;
}
.imgR{
    float: right;
    margin-left: 20px;
}
.img-round{
    border-radius: 50%;
}

/* clearfix */
.clear{
    clear: both;
}
.clearfix::after{
    content:"";
    display:block;
    clear: both;
}

/* ======================================
   「もっと見る」
====================================== */
.more{
    text-align: right;
}
.more::before{
    content: url(../images/ico_arrow.png);
    margin-left: 3px;
    vertical-align: middle;
}

/* 外部リンク・メール */
a[target="_blank"]::after,
a[href^="mailto:"]::after{
    content: url(../images/ico_blank.png);
    margin-left: 5px;
    vertical-align: middle;
}

/* ======================================
   フォーム・表組み
====================================== */
.entryTable{
    width: 100%;
    margin-bottom: 30px;
    border: 2px solid #f6bb9e;
    border-collapse: collapse;
}
.entryTable th,
.entryTable td{
    padding: 10px 20px;
    border: 1px solid #f6bb9e;
}
.entryTable th{
    width: 10em;
    background-color: #ffeeee;
    text-align: left;
}

.entryTable input[type="text"],
.entryTable input[type="email"],
.entryTable textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
}
.entryTable input:focus,
.entryTable textarea:focus{
    background-color: #ffffee;
    outline: none;
    border-left: 5px solid #ffa700;
}

/* カーソル */
label,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="reset"],
select{
    cursor: pointer;
}

/* ボタン */
.entryBtns{
    text-align: center;
}
.entryBtns input{
    width: 200px;
    margin: 0 10px;
    padding: 10px;
    background: #fff;
    border: 2px solid #f6bb9e;
    border-radius: 10px;
    font-size: 1em;
    -webkit-appearance: none;
}
.entryBtns input[type="submit"]{
    background-color: #fadccc;
}
.entryBtns input:hover{
    opacity: 0.7;
}

/* ======================================
   スマホ用（レスポンシブ）
====================================== */
@media screen and (max-width: 768px){

    h1{
        width: 200px;
        font-size: 200%;
        padding: 20px;
    }

    .menu li{
        width: 100%;
        margin: 5px 0;
    }

    #contents{
        padding: 20px;
    }

    .imgL,
    .imgR{
        float: none;
        margin: 0 0 20px 0;
        display: block;
    }

    .entryTable th{
        width: auto;
        display: block;
    }
    .entryTable td{
        display: block;
    }

    .entryBtns input{
        width: 100%;
        margin: 10px 0;
    }

    img {
    max-width: 100%;
    height: auto;
}
}