@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    color: #333;
}
/*リンク基本色*/
a { color: #b7a077; }
/*訪問済みリンク*/
a:visited { color: #a8a8a8; }
/*マウスポインタを乗せたときの色を決める*/
a:hover {
    color: #988564;
    font-weight: bold;
    text-decoration: none;
}
/*画像リンクにアニメーションを設定*/
a img { transition: opacity 0.2s linear; }
/*要素を半透明にする opacity:0～1の数値で指定*/
a:hover img { opacity: 0.7; }
/*見出しのマージンを0にする*/
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
/*p要素　段落の初期間マージンと行間を調整する*/
p {
    margin-top: 0;
    line-height:  1.6;
}
/*  */
.sign {text-align: right;}
/*画像の初期の縦位置を調整するbottom（行の下端揃え）*/
img { vertical-align: bottom; }
/*子孫セレクタでメインコンテンツだけに限定する*/
#main h1 {
/*    background-image: url(../images/header_bg.jpg);*/
    padding: 30px 30px 30px 20px;
    font-size: 26px;
    border-bottom: solid 1px #8b7348;
}
#main h2 {
    font-size: 22px;
    border: 1px solid #b7a077;
    padding: 11px 22px;
    border-radius: 5px;
}
#main h3 {
    font-size: 18px;
    border-left: solid 3px #b7a077;
    padding: 4px 9px 4px 14px;
}
/*ヘッダーの幅を決める*/
header {
    width: 980px;
    margin: 0 auto;
}
/*サイトのロゴを左に配置する*/
header h1 {
    float: left;
    margin: 5px 0 10px;
}
/*お問い合わせボタンを右端に配置する*/
header #header_contact {
    float: right;
    margin: 35px 0 0.5;
}
/*ナビゲーションの基本枠*/
#global_navi {
    width: 980px;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
/*リストの先頭アイコンを外す*/
#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*リストを横並びにする
    980px÷4=245px
    右マージン1px
*/
#global_navi ul li {
/*    width: 244px;*/

    width: 244px;
    float: left;
    margin-right: 1px;
    margin-bottom: 1px;
    text-align: center;
}
/*ナビゲーションのデザインを整える*/
#global_navi ul li a {
    display: block;
/*    padding: 16px;*/
/*    background-color: #352b23;*/
/*    color: #fff;*/
    background-color: #1e5799;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s linear;
}
/*現在地の部分の色を変える*/
#global_navi ul li.current a {
    background-color: #b7a077;
}
/*マウスポインタを乗せたときに色が変わるようにする*/
#gloval_navi ul li a:hover {
    background-color: #8c7a5b;
}
/*全体の基本枠*/
#wrapper {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
/*コンテンツエリアとサイドバーの横幅を指定
floatプロパティで左に浮動*/
#main {
    width: 730px;
    float: left;
}
/*floatプロパティで右に浮動*/
#sidebar {
    width: 220px;
    float: right;
}
/*IPAロゴ*/
#side_ipa {
    border: 1px solid #b7a077;
    color: #7f7259;
    text-align: center;
    margin: 0;
    padding: 0px 35px;
    object-fit: contain;
}

/*バナーエリアに下マージンを設定*/
#side_banner { margin-bottom: 30px; }

#side_banner {
    border: 1px solid #b7a077;
    color: #7f7259;
    text-align: center;
    margin: 0;
    padding: 0px 35px;
    object-fit: contain;
}

/*関連リンクの見出しを整える*/
#side_banner h2　{
    background-color: #716961;
    color: #fff;
    padding: 7px;
    font-size: 14px;
    text-align: center;
}
/*バナー画像のリストの記号を消す*/
#side_banner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#side_banner ul li { margin-bottom: 10px; }
/*お問い合わせエリアを整える*/
#side_contact { margin-bottom: 30px; }
/*お問い合わせエリアに囲みを付ける*/
#side_contact {
    border: 1px solid #b7a077;
    color: #7f7259;
    text-align: center;
}
/*お知らせエリアの見出しを装飾*/
#side_contact h2 {
    background-color: #b7a077;
    color: #fff;
    padding: 7px;
    font-size: 14px;
}
/*電話番号を目立たせる*/
#side_contact address {
    font-weight: bold;
    font-size: 20px;
    font-style: normal;
}
#side_contact address img {
    vertical-align: middle;
    margin-right: 5px;
}
/*グラデーションを指定にはジェネレーターを使用
オンライン生成ツール
http://www.colorzilla.com/gradient-editor/*/
#side_cotact .contact_button {
    display: inline-block;
    background: #f1ede4;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%, #f1ede4));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1ede4 100%);
    background: line-gradient(to bottom,  #ffffff 0%,#f1ede4 100%);
    color: #b7a077;
    padding:  10px;
    border:  1px solid #b7a077;
    border-radius: 5px;
    text-decoration: none;
}
/*マウスオーバー時にデザインを変える*/
#side_contact .contact_button:hover {
    background: #b7a077;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7a077), color-stop(100%,#e2cda7));
    background: -webkit-linear-gradient(top,  #b7a077 0%,#e2cda7 100%);
    background: linear-gradient(top bottom,  #b7a077 0%,#e2cda7 100%);
    color: #fff;
}
/*フッターの基本枠*/
footer {
    background-color: #352b23;
    text-align: center;
}
/*フッターナビゲーションの背景色と余白*/
footer #footer_nav {
    background-color: #efefef;
    padding: 10px 0;
}
/*リストの行頭アイコンを消す*/
footer #footer_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*リストを横並びにする*/
footer #footer_nav li {
    display: inline;
    border-left: solid 1px #aaa;
    margin-left:  8px;
    padding-left: 8px;
    font-size: smaller;
}
/*最後の項目に右のボーダーを設定*/
footer #footer_nav li:last-child {
    border-right: solid 1px #aaa;
    padding: 0 8px;
}
/*コピーライトを整える*/
footer small {
    display: block;
    padding: 8px 0;
    color: #fff;
}
/*パンくずリスト内の文字を小さくする*/
#breadcrumb { font-size: smaller; }
/*行頭の数値を消す*/
#breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*リスト項目を横並びにする*/
#breadcrumb ol li { display: inline; }
/*テキストの右側に階層を占めす「＞」を付ける
CSSで書いた文字や記号をHTMLに適用
https://css-tricks.com/the-shapes-of-css/*/
#breadcrumb ol li::after {
    content: ">";
    padding-left: 7px;
}
/*最後の項目「＞」を消す*/
#breadcrumb ol li:last-child::after { content: none; }
/*メインビジュアルの表示位置を整える*/
/*#main_visual {*/
/*    width: 980px;*/
/*    height: 440px;*/
/*    margin: 0 auto 48px;*/
/*    overflow: hidden;*/
/*}*/
/*スライダー*/
.photo-show {
    width: 980px;
    height: 440px;
    margin: 30px auto;
    margin-top: 0px;
    max-width: 100%;
    position: relative;
    will-change: transform;
}
.photo-show img {
    animation: show 36s infinite;
    -webkit-animation: show 36s infinite;
    border-radius: 0;
    height: 440px;
    opacity: 0;
    position: absolute;
}
/*アニメーション*/
@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}
@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}
/*各画像のアニメーションの開始時間をずらす*/
.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.photo-show img:nth-of-type(2) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
.photo-show img:nth-of-type(3) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}
.photo-show img:nth-of-type(4) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
}
.photo-show img:nth-of-type(5) {
    animation-delay: 16s;
    -webkit-animation-delay: 16s
}
.photo-show img:nth-of-type(6) {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
}
.photo-show img:nth-of-type(7) {
    animation-delay: 24s;
    -webkit-animation-delay: 24s;
}
.photo-show img:nth-of-type(8) {
    animation-delay: 28s;
    -webkit-animation-delay: 28s;
}
.photo-show img:nth-of-type(9) {
    animation-delay: 32s;
    -webkit-animation-delay: 32s;
}
/*マウスが画像に重なった際、動きを止める*/
.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}
.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
/*point要素の下マージンを設定*/
#point { margin-bottom: 30px; }
#point section {
    margin-bottom: 10px;
    overflow: hidden;
}
/*写真とキャプションをフローとしてテキストを回りこませる*/
#point figure {
    float: right;
    margin: 0 0 0 16px;
}
/*キャプションの書式を整える*/
#point flgcaption {
    font-size: 12px;
    color: #9C9689;
    text-align: center;
}
/*dl要素とdt要素を設定*/
#news dl { overflow: hidden; }
#news dt {
    width: 8em;
    float: left;
    margin-bottom: 10px;
    clear: both;
}
/*dd要素を設定*/
#news dd {
    margin-left: 8em;
    margin-bottom: 10px;
}
/*テーブル要素*/
#company table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
#company th,
#company td{
    border: 1px solid #c7c7c7;
    padding: 8px;
}
#company th {
    background-color: #f1ede4;
    text-align: left;
    width: 10em;
}
#company ul {
    padding-left: 20px;
    margin: 0;
}
/*ギャラリー要素のアイコンを消す*/
#gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*リスト項目を格子状に並べる*/
/*ぼかしの影を付ける*/
#gallery ul li {
    width: 220px;
    margin: 0 30px 30px 0;
    padding: 10px 0;
    border: solid 1px #ccc;
    float: left;
    text-align: center;
    color: #b7a077;
    font-weight: bold;
    box-shadow: 2px 2px 3px rgba(0,0,0,1);
}
/*３の倍数のボックスの右マージンをカット*/
#gallery ul li:nth-child(3n) {
    margin-right: 0;
}
/*dl要素に背景とボーダーを付ける*/
#entry dl {
    background: #f1ede4;
    border: 1px solid #ddd;
    border-top: 0;
}
#entry dl dt,
/*dl dd要素を横並びにする*/
#entry dl dd {
    padding: 10px;
    border-top: 1px solid #ddd;
}
#entry dl dt {
    width: 13em;
    float: left;
    clear: both;
    font-weight: bold;
}
#entry dl dd {
    background-color: #fff;
    border-left: 1px sold #ddd;
    margin-left: 13em;
}
/*入力必須項目の「※」を赤文字にする*/
.must { color: #f00; }
/*「お名前」フィールドを装飾*/
#entry #name {
    width: 15em;
    padding: 3px;
}
/*「メールアドレス」フィールドを装飾*/
#entry #email {
    width: 25em;
    padding: 3px;
}
/*#entry #category2,*/
/*#entry #category3,*/
/*#entry #questionnal2,*/
/*#entry #questionnal3 {*/
/*    margin-left: 15px;*/
/*}*/
/*テキストエリアを装飾*/
#entry #detail {
    width: 36em;
    height: 15em;
}
/*送信ボタンを中央揃えにする*/
#entry #submit_button_cover {
    text-align: center;
}
/*マウスポインタとアニメーションを設定*/
#entry #submit_button {
    background-color: #b7a077;
    border: 1px solid #b7a077;
    padding: 15px 100px;
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.1s linear;
}
/*マウスポインタを乗せたときに表示を変える*/
#entry #submit_button:hover {
    background-color: #c7ae81;
}
@media screen and (max-width : 767px){
    img {
        max-width: 100%;
    }
    header,
    #global_navi,
    #sidebar,
    #wrapper{
        width: 100%;
    }
    header h1 {
        float: none;
        text-align: center;
    }
    header hi img {
        width: 50%;
    }
    header #header_contact {
        display: none;
    }
    #global_navi ul li {
        width: 50%;
        padding: 0.5px;
        margin: 0;
        box-sizing: border-box;
    }
    #global_navi ul li a {
        margin: 0;
    }
    #global navi ul li:last-child {
        width: 100%;
    }
    #main {
        width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
    }
    #main figure {
        text-align: center;
    }
    #main visual {
        width: 100%;
        height: auto;
    }
    #point figure {
        float: none;
        margin: 0 0 11px 0;
    }
    #side_banner ul li {
        text-align: center;
        margin:  11px auto;
    }
    #side_contact address img {
        width: 14px;
        height: 20px;
    }
    #entry dl dt {
        float: none;
        width: 100%;
        box-sizing: border-box;
    }
    #entry dl dd {
        width: 100%;
        margin-left: 0;
        border-left: none;
        box-sizing: border-box;
    }
    #entry #name, #entry #email, #entry #interest {
        max-width: 100%;
    }
    #entry #detail {
        width: 100%;
        box-sizing: border-box;
    }
}