@charset "utf-8";

/* @group Reset */

* {
    margin: 0;
    padding: 0
}

a {
    text-decoration: underline;
}

/* @end */


/* @group Fluid-img */

img {
    max-width: 100%
}

/* @end */


/* @group HTML */

html {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.0em;
    line-height: 1.5em;
    background-color: white;
}

/* @end */

/*===================================
見出しのCSS
===================================*/

/*見出しH1*/
h1 {
    font: bolder 1.6em sans-serif;
    line-height: 1.5em;
    letter-spacing: 0.01em;
    color: red;
    margin: 20px 0px;
}

/*見出しH2*/
h2 {
    font: bold 1.3em sans-serif;
    line-height: 1.5em;
    letter-spacing: 0.01em;
    color: navy;
    margin: 20px 0px;
    display: block;
    border: 3px solid navy;
    padding: 15px 10px;
    border-radius: 10px;
}

/*見出しH3 動画作例*/
h3 {
    font: normal 1.3em sans-serif;
    line-height: 1.5em;
    display: block;
    background-color: antiquewhite;
    padding: 15px 0px;
    letter-spacing: 0.01em;
    color: navy;
    margin: 20px 0px;
    border-radius: 10px;
}


/*===================================
ヘッダーのCSS
===================================*/

header {
    text-align: center;
    margin-bottom: -6px;
}


/*===================================
グローバルナビnavのCSS
===================================*/

.global_menu {
    /* メニュー全体のスタイル */
    width: 100%;
    position: relative;
    color: #222;
    /* 文字色 */
    background-color: #202f55;
    /* 背景色 */
    text-align: center;
    box-shadow: 0px 5px 5px peru;
}

.global_menu li {
    display: inline-block;
}

.global_menu a {
    /* 各項目のスタイル */
    display: block;
    padding: 25px 8px;
    font: 400 1.0em sans-serif;
    color: blanchedalmond;
}

.menu:hover > a {
    background: wheat;
    color: gray;
}

.child_menu > li > a {
    /* 子項目のスタイル */
    font-size: 1.0em;
    padding: 10px;
    color: navy;
}

.child_menu > li > a:hover {
    /* 子項目のスタイル（ホバー時） */
    background: wheat;
    color: blueviolet;
}

.child_menu {
    /* 下層メニューのスタイル */
    width: 100%;
    position: absolute;
    top: 100%;
    /* 親項目の直下に配置 */
    left: 0;
    padding: 15px;
    /* 文字色 */
    background-color: wheat;
    /* 背景色 */
    visibility: hidden;
    /* 下層メニューを非表示 */
    background-image: url(url);
}

.menu:hover .child_menu {
    /* 下層メニューのスタイル（親項目ホバー時） */
    visibility: visible;
    /* 下層メニューを表示 */
}

.child_menu a:hover {
    color: wheat;
}

/*===================================
お問合せフォームのテーブル装飾
===================================*/

table {
    width: 100%;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid navy;
    padding: 1px;
}

/* @end */

dl {
    overflow: hidden;
}

dt {
    float: left;
    font-weight: bold;
    text-align: left;
    margin-bottom: 5px;
}

dd {
    margin: 0 0 1em 0;
    text-align: left;
}


/*===================================
記事article本体部分のCSS
===================================*/

article {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

/*記事本体のフォントの調整*/
article p {
    margin: 5px 0px;
    font-size: 1.05em;
    line-height: 1.55em;
    text-align: left;
    margin-bottom: 20px;
}

article ol li {
    text-align: left;
    line-height: 1.6em;
    font-weight: bold;
    list-style: none;

}

article ul li {
    text-align: left;
    line-height: 1.6em;
    font-weight: bold;
    list-style: none;

}

/*===================================
footerのCSS
===================================*/
footer {
    font-size: 1.0em;
    font-style: normal;
    line-height: 1.5em;
    color: black;
    text-align: center;
    padding: 15px 0px;
    background: #eedcb3;
}

/*===================================
文字の装飾のためのcss
===================================*/


/*動画のキャプション*/
.text-kyakuchu2 {
    display: block;
    clear: both;
    margin: 15px auto;
    font-size: 0.85em;
    font-weight: bold;
    color: red;
    line-height: 1.5em;
}

/*写真のキャプション*/
.text-kyakuchu {
    font-size: 0.9em;
    color: #001e43;
    line-height: 1.5em;
}

address {
    font-style: normal;
    font-size: 1.0em;
    line-height: 1.5em;
}

/*仕切り罫線のデザイン*/
.line {
    border: 1px solid lightsteelblue;
    margin-bottom: 5px;
}

hr {
    border: 1px solid navy;
    height: 1px;
    margin: 30px 0px;
}

/*写真のキャプション*/
figcaption {
    margin: 2px auto;
    font-size: 0.8em;
    color: darkblue;
    line-height: 1.5em;
}

/*===================================
ボタンのためのcss
===================================*/
/*== グラデーション線から塗に変化する */

.botan {
    /*ボタンの形状*/
    display: inline-block;
    font-size: 1.5em;
    font-weight: bolder;
    padding: 25px 65px;
    margin: 5px 0px 30px 0px;
    border-radius: 50px;
    text-decoration: none;
    background: midnightblue;
    color: white;
    outline: none;
    /*アニメーションの指定*/
    transition: all 0.4s ease-out;
    box-shadow: 0px 4px 5px #888;
}

/*hoverした際、グラデーションと影を付ける*/
.botan:hover {
    /*ボタンの形状*/
    border-color: transparent;
    color: #222;
    /*背景の色と形状*/
    background: linear-gradient(270deg, dodgerblue 0%, skyblue 50%, dodgerblue 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/
    box-shadow: 0px 4px 5px #888;
}


video {
    display: inline-block;
    border-radius: 5px;
    background: white;
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/
    box-shadow: 0px 6px 6px #333;

}

/*===================================
レスポンシブ　1024px〜
===================================*/

@media screen and (min-width: 1080px) {
    article {
        overflow: hidden;
        width: 1080px;
    }

    footer {
        overflow: hidden;
        width: 1080px;
        margin: 0px auto;
    }
}

padding: 30px 60px;
}