@charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*全体の設定
---------------------------------------------------------------------------*/

body,
html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    color: #d0d2db;
    /*全体の文字色*/
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /*フォント種類*/
    font-size: 15px;
    /*文字サイズ*/
    line-height: 2.2;
    /*行間*/
    background: #27292e;
    /*背景色*/
    -webkit-text-size-adjust: none;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
form {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
}

ul {
    list-style-type: none;
}


/*マーカーは表示されません。*/

ol {
    padding-left: 40px;
    padding-bottom: 15px;
}


/*要素のパディング領域における左側の高さを40px;要素のパディング領域における下側の高さを15pxに設定*/

img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    font-size: 100%;
    border-spacing: 0;
}

iframe {
    width: 100%;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/

a {
    color: #555ff0;
    /*リンクテキストの色*/
    transition: 0.4s;
    /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}

a:hover {
    color: #6983a9;
    /*マウスオン時の文字色*/
    text-decoration: none;
    /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*ヘッダー。最初に出てくるアニメーションのメニューブロック。
---------------------------------------------------------------------------*/

header {
    width: 100%;
    height: 110%;
    overflow: hidden;
    position: relative;
    background: #27292e url(../images/bg.jpg) no-repeat center center;
    /*背景画像の設定（古いブラウザ用）*/
    background: #27292e url(../images/bg.jpg) no-repeat center center / cover;
    /*背景画像の設定*/
}


/*h1タグ*/

header h1 {
    position: absolute;
    top: 0px;
    /*上から0pxの場所に配置*/
    width: 100%;
    /*幅*/
    text-align: center;
    /*テキストをセンタリング*/
    background: #99918b;
    /*背景色（古いブラウザ用）*/
    background: rgba(0, 0, 0, 0.7);
    /*背景色。0,0,0は黒の事で、最後の0.7は色が70%ついた状態。*/
    color: #d0d2db;
    /*文字色*/
    font-weight: normal;
    /*hタグのデフォルトの太字を標準に*/
    letter-spacing: 0.2em;
    /*文字間隔を少し広くとる設定*/
    font-size: 12px;
    /*文字サイズ*/
    z-index: 10;
    /*重なりの順番。数字が大きい方が上に配置されます。*/
}

.cover {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
}

.centerBox {
    position: absolute;
    top: 50px;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    /* width: 50%; */
    /* height: 50px; */
    text-align: center;
}

.container::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 15px 15px gray;
}

.image {
    width: 100%;
    height: 100%;
}

.section1 {
    /* background: url(.//images/img1.jpg) no-repeat fixed;
    background-size: cover; */
    width: 100%;
    margin-bottom: 30px;
}

.section2 {
    height: 100%;
    background: #fff;
    color: #009688;
}

.section3 {
    height: 100vh;
    background: url(./images/bg6.jpg);
    background-size: cover;
}

.section4 {
    height: 100%;
    background: #009688;
}

.section5 {
    height: 100%;
    background: url(./images/bbg5.jpg) no-repeat fixed;
    background-size: cover;
}


/*inner
---------------------------------------------------------------------------*/

.inner {
    /* margin: 0 auto; */
    overflow: hidden;
    /* max-width: 1400px; */
    /*コンテンツの最大幅*/
    padding: 50px 10%;
    /*上下、左右へのボックス内の余白*/
}

.innerw1 {
    margin: 0 auto;
    min-height: 400px;
    overflow: hidden;
    max-width: 1400px;
    /*コンテンツの最大幅*/
    padding: 50px 10%;
    /*上下、左右へのボックス内の余白*/
}


/* 重ねるボックスの設定 */

.innerw1-in {
    /* ボックス配置指定 */
    position: absolute;
}


/* みずどりの基本設定 */

.innerw1-img {
    width: 150px;
    height: auto;
    margin-left: auto;
    transform: rotate(-30deg);
}

.innerw2 {
    margin: 0 auto;
    min-height: 400px;
    /* overflow: hidden; */
    max-width: 1400px;
    /*コンテンツの最大幅*/
    padding: 50px 10%;
    /*上下、左右へのボックス内の余白*/
    /* border: solid 3px #000 */
    overflow: hidden;
    border: solid 3px #47897B;
}

#covbox-a {
    float: left;
    width: auto;
    height: 600px;
}

#covbox-b {
    float: right;
    width: 25%;
}

.box {
    max-width: 1400px;
}

.img-right {
    display: inline-block;
    width: 20%;
    float: right;
    margin: 0px 9px 0px;
}

.img-right img {
    transform: rotate(-20deg);
}


/*背景色のスタイルです。contentsとセットで使います。
---------------------------------------------------------------------------*/


/*bg1*/

.bg1 {
    background: #18191c;
    /*背景色のみ*/
}


/*bg2（Contactブロックで使用）*/

.bg2 {
    /* 教室について似て使用 */
    background: #fff url(../images/B-beige.jpg);
    /*背景画像の読み込み*/
    color: #000;
    /*文字色*/
    position: relative;
}

.bg3 {
    /* What's New  にて使用 */
    background: #000 url(../images/B-pink.jpg);
    /*背景画像の読み込み*/
    color: #000 !important;
    /*文字色*/
    position: relative;
}

.bg4 {
    /* Linkにて使用 */
    background: #000 url(../images/B-pink.jpg);
    /*背景画像の読み込み*/
    color: #000 !important;
    /*文字色*/
    position: relative;
}

.bg5 {
    /* accessにて使用 */
    background: #000 url(../images/bg2.jpg) no-repeat center center / cover;
    /*背景画像の読み込み*/
    color: #fff;
    /* 文字の色 */
}

.bg6 {
    background: #000 url(../images/bbg5.jpg) no-repeat center center / cover;
    /*背景画像の読み込み*/
    color: #000 !important;
    /*文字色*/
}

.bg7 a {
    color: #fff !important;
    /*リンクテキストの文字色*/
}


/*contents
---------------------------------------------------------------------------*/


/*h2見出し*/

.contents h2 {
    clear: both;
    margin-bottom: 30px;
    /*下に空けるスペース*/
    font-size: 40px;
    /*文字サイズ*/
    text-align: center;
    /*文字をセンタリング*/
    letter-spacing: 0.2em;
    /*文字間隔を少し広くとる設定*/
    line-height: 1.5;
    /*行間をデフォルトから少し狭くする*/
}


/*h2見出し内のspanタグ。小文字表記部分。*/

.contents h2 span {
    display: block;
    font-size: 12px;
    /*文字サイズ*/
}


/*h3見出し*/

.contents h3 {
    clear: both;
    margin-bottom: 20px;
    /*下に空けるスペース*/
    font-size: 20px;
    /*文字サイズ*/
    background: url(../images/line1.png) no-repeat center bottom;
    /*背景画像（下線）の読み込み（古いブラウザ用）*/
    background: url(../images/line1.png) no-repeat center bottom / 100% 2px;
    /*背景画像（下線）の読み込み。幅は100%、高さを2pxにする。*/
    padding: 0 10px;
    /*上下、左右へのブロック内の余白*/
}

.contents h3 span {
    display: block;
    font-size: 12px;
    /*文字サイズ*/
}

.contents h4 {
    clear: both;
    margin-bottom: 20px;
    /*下に空けるスペース*/
    font-size: 20px;
    /*文字サイズ*/
    background: url(../images/line1.png) no-repeat center bottom;
    /*背景画像（下線）の読み込み（古いブラウザ用）*/
    background: url(../images/line1.png) no-repeat center bottom / 100% 2px;
    /*背景画像（下線）の読み込み。幅は100%、高さを2pxにする。*/
    padding: 0 10px;
    /*上下、左右へのブロック内の余白*/
}

.contents h4 span {
    display: block;
    font-size: 12px;
    /*文字サイズ*/
}


/*段落タグ*/

.contents p {
    padding: 0px 10px 30px;
    /*上、左右、下への余白*/
}


/*段落タグが続いた場合の設定*/

.contents p+p {
    margin-top: -10px;
}


/*setionが続いた場合の２つ目のsectionへの設定*/

.contents section+section {
    margin-top: 50px;
    /*上に空けるスペース*/
}


/*Galleryページの各ボックス
---------------------------------------------------------------------------*/

.list {
    width: 33%;
    /*幅。今は３列ですが、25%に変更すれば4列になります。*/
    float: left;
    /*左に回り込み*/
    background: #000;
    /*背景色。下の設定で透明度を半分にしているので、その際に出てくる色です。白にしておけば白っぽく表示されます。*/
}


/*画像の設定*/

.list a img {
    opacity: 0.5;
    /*透明度50%。*/
}


/*マウスオン時の画像の設定*/

.list a:hover img {
    opacity: 1;
    /*色が100%ついた状態*/
}


/*footerブロック
---------------------------------------------------------------------------*/

footer {
    clear: both;
    text-align: center;
    /*センタリング*/
    background: #222;
    /*背景色*/
    color: #fff;
    /*文字色*/
    padding: 10px 0;
    /*上下、左右へのボックス内の余白*/
}

footer a {
    text-decoration: none;
    color: #fff;
}

footer .pr {
    display: block;
    font-size: 12px;
}


/*「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/


/*見出しを含まないお知らせブロック*/

#new dl {
    padding: 0 10px;
    /*上下、左右へのボックス内の余白*/
}


/*日付設定*/

#new dt {
    float: left;
    /*左に回り込み*/
    width: auto;
    /* width: 9em; */
    /*幅*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くとる設定*/
}


/*記事設定*/

#new dd {
    padding-left: 9em;
    /*左に空ける余白*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/


/*ta1設定*/

.ta1 {
    width: 100%;
    margin: 0 auto 30px;
    /*上、左右、下へのテーブルの外側へとるスペース*/
    background: rgba(49, 126, 113, 0.452)
}

.ta1,
.ta1 td,
.ta1 th {
    border: 1px solid #d0d2db;
    /*テーブルの枠線の幅、線種、色*/
    padding: 10px 15px;
    /*ボックス内の余白*/
    word-break: break-all;
}


/*テーブル１行目に入った見出し部分（※caption）*/

.ta1 caption {
    border: 1px solid #d0d2db;
    /*テーブルの枠線の幅、線種、色*/
    border-bottom: none;
    /*上のborderの指定から下線だけ消す設定*/
    padding: 10px 15px;
    /*上下、左右へのボックス内の余白*/
    background: rgba(255, 255, 255, 0.1);
    /*背景色。255,255,255は白で、0.1は10%色がついた状態。古いブラウザでは適用されないので、必要ならこの上の行に通常のbackground指定を加えて下さい。*/
    text-align: left;
    /*文字を左寄せ*/
}


/*ta1の左側ボックス*/

.ta1 th {
    width: 140px;
    /*幅*/
    text-align: center;
    /*センタリング*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/


/*ta1設定*/

.ta2 {
    width: 100%;
    margin: 0 auto 30px;
    /*上、左右、下へのテーブルの外側へとるスペース*/
    background: rgb(0 0 0 / 100%) color #fff !important;
    /*文字色*/
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;
    /* 文字の影 */
}

.ta2,
.ta2 td,
.ta2 th {
    border: 1px solid #d0d2db;
    /*テーブルの枠線の幅、線種、色*/
    padding: 10px 15px;
    /*ボックス内の余白*/
    word-break: break-all;
}


/*テーブル１行目に入った見出し部分（※caption）*/

.ta2 caption {
    border: 1px solid #d0d2db;
    /*テーブルの枠線の幅、線種、色*/
    border-bottom: none;
    /*上のborderの指定から下線だけ消す設定*/
    padding: 10px 15px;
    /*上下、左右へのボックス内の余白*/
    background: rgb(49 126 113 / 88%);
    /*背景色。255,255,255は白で、0.1は10%色がついた状態。古いブラウザでは適用されないので、必要ならこの上の行に通常のbackground指定を加えて下さい。*/
    /*　text-align: left;		/*文字を左寄せ*/
}


/*ta2の左側ボックス*/

.ta2 th {
    width: 140px;
    /*幅*/
    text-align: center;
    /*センタリング*/
}


/*ページの上部に戻る「↑」ボタン
---------------------------------------------------------------------------*/

@keyframes scroll {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*通常時のボタンは非表示*/

body .nav-fix-pos-pagetop a {
    display: none;
}


/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/

body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 50px;
    /*ボタンの幅*/
    line-height: 50px;
    /*ボタンの高さ*/
    z-index: 100;
    position: fixed;
    bottom: 20px;
    /*ウィンドウの下から20pxの場所に配置*/
    right: 1%;
    /*ウィンドウの右から1%の場所に配置*/
    background: #000;
    /*背景色（古いブラウザ用）*/
    background: rgba(0, 0, 0, 0.6);
    /*背景色。0,0,0は黒の事で0.6は60%色がついた状態。*/
    color: #fff;
    /*文字色*/
    border-radius: 50%;
    /*角丸指定。50%にすると円形になる。四角形がいいならこの１行削除。*/
    animation-name: scroll;
    /*上のアニメーションで指定しているkeyframesの名前（scroll）*/
    animation-duration: 1S;
    /*アニメーションの実行時間*/
    animation-fill-mode: forwards;
    /*アニメーションの完了後、最後のキーフレームを維持する*/
}


/*マウスオン時の背景色*/

body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
    background: #999;
}


/*トップページのNEWアイコン
---------------------------------------------------------------------------*/

.newicon {
    background: #F00;
    /*背景色*/
    color: #FFF;
    /*文字色*/
    font-size: 70%;
    /*文字サイズ*/
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align: text-top;
}


/*その他
---------------------------------------------------------------------------*/

.look {
    background: #c3b5a2;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    border-radius: 4px;
}

.mb15,
.mb1em {
    margin-bottom: 15px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.clear {
    clear: both;
}

ul.disc {
    padding: 0em 25px 15px;
    list-style: disc;
}

.color1,
.color1 a {
    color: #b52654 !important;
}

.pr {
    font-size: 10px;
}

.wl {
    width: 96%;
}

.ws {
    width: 50%;
}

.c {
    text-align: center;
}

.r {
    text-align: right;
}

.l {
    text-align: left;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.big1 {
    font-size: 40px;
}

.mini1 {
    font-size: 11px;
    display: inline-block;
    line-height: 1.5;
}

.sh {
    display: none;
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:800px) {
    /*inner
---------------------------------------------------------------------------*/
    .inner {
        padding: 50px 3%;
        /*上下、左右へのボックス内の余白*/
    }
    /*その他
---------------------------------------------------------------------------*/
    body.s-n #sub,
    body.s-n #footermenu,
    .m-n {
        display: none;
    }
    .big1 {
        font-size: 20px;
    }
    .fl {
        float: none;
    }
    .fr {
        float: none;
    }
    .sh {
        display: block;
    }
    .pc {
        display: none;
    }
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:480px) {
    /*全体の設定
---------------------------------------------------------------------------*/
    body {
        font-size: 12px;
        /*文字サイズ*/
        line-height: 1.5;
        /*行間*/
    }
    /*inner
---------------------------------------------------------------------------*/
    .inner {
        padding: 30px 3%;
        /*上下、左右へのボックス内の余白*/
    }
    /*contents
---------------------------------------------------------------------------*/
    /*h2見出し*/
    .contents h2 {
        margin-bottom: 20px;
        /*下に空けるスペース*/
        font-size: 24px;
        /*文字サイズ*/
        letter-spacing: normal;
        /*文字間隔をデフォルトにする*/
    }
    /*h3見出し*/
    .contents h3 {
        margin-bottom: 10px;
        /*下に空けるスペース*/
        font-size: 16px;
        /*文字サイズ*/
        padding-bottom: 5px;
        /*下線と文字が近すぎるので、少し余白を作る*/
    }
    /*段落タグ*/
    .contents p {
        padding: 0px 10px 20px;
        /*上、左右、下への余白*/
    }
    /*setionが続いた場合の２つ目のsectionへの設定*/
    .contents section+section {
        margin-top: 20px;
        /*上に空けるスペース*/
    }
    /*テーブル（ta1）
---------------------------------------------------------------------------*/
    /*ta1設定*/
    .ta1,
    .ta1 td,
    .ta1 th {
        padding: 5px;
        /*ボックス内の余白*/
    }
    /*ta1の左側ボックス*/
    .ta1 th {
        width: 100px;
    }
    /*その他
---------------------------------------------------------------------------*/
    .ws,
    .wl {
        width: 94%;
    }
    .big1 {
        font-size: 16px;
    }
}

.outline {
    display: inline-block;
    color: #ffffff;
    /* 文字の色 */
    font-size: 36pt;
    /* 文字のサイズ */
    letter-spacing: 4px;
    /* 文字間 */
    text-shadow: 2px 2px 1px #003366, -2px 2px 1px #003366, 2px -2px 1px #003366, -2px -2px 1px #003366, 2px 0px 1px #003366, 0px 2px 1px #003366, -2px 0px 1px #003366, 0px -2px 1px #003366;
    /* 文字の影 */
}

.sample1oya {
    background: #ffffff;
    padding: 20px;
}

.sample1 {
    display: inline-block;
    font-size: 160%;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 10px #777, -2px 2px 10px #777, 2px -2px 10px #777, -2px -2px 10px #777;
}

w1 {
    position: relative;
    color: #158b2b;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    margin: 1.5em 0;
}

w1:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 150px;
    height: 58px;
    border-radius: 50%;
    border: 5px solid #a6ddb0;
    border-left-color: transparent;
    border-right-color: transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.main_imgBox {
    margin: 0 auto;
    max-width: 1400px;
    height: 680px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.main_img {
    z-index: 10;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 35s 0s infinite;
    animation: anime 35s 0s infinite;
}

.main_img:nth-of-type(2) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.main_img:nth-of-type(3) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.main_img:nth-of-type(4) {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

.main_img:nth-of-type(5) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

.main_img:nth-of-type(6) {
    -webkit-animation-delay: 25s;
    animation-delay: 25s;
}

.main_img:nth-of-type(7) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

.main_img:nth-of-type(8) {
    -webkit-animation-delay: 35s;
    animation-delay: 35s;
}

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 9;
    }
    100% {
        opacity: 0
    }
}

.sample1 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #f99 url(images/tanuki.jpg) center center no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 500px;
    padding-top: 62.5%;
}

.sample2 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #f99 url(images/tanuki.jpg) center center no-repeat;
    background-size: contain;
    width: 100%;
    min-height: 500px;
    padding-top: 62.5%;
}


/************************
	Clear
************************/


/*clearfix*/

.clear {
    clear: both;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-table;
    min-height: 1%;
    overflow: hidden;
}


/*Hides from MacIE \*/

* html .clearfix {
    zoom: 1;
}

*:first-child+html .clearfix {
    zoom: 1;
}

.clearfix {
    display: block;
}

.dlbox1 {
    display: inline-block;
    margin: -3px;
    width: 75%;
    font-size: 16px;
}


/*Hides from MacIE */