@charset "utf-8";
/* CSS Document */
html {
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
a {
        color: #fff;
}
.wrap {
        width: 100%;
        overflow: hidden;
}
.en-text {
        color: #7bf1db;
}
/* ------------------------------ */
footer {
        background-color: #002E62;
        color: #fff;
}
/**/
.mv-box {
        display: block;
        padding-left: 20%;
        position: relative;
}
.img-mv {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        padding: 0;
        margin: 0;
}
.img-heis-mv {
                height: auto;
                width: 50%;/**/
                margin: auto;
                margin-top: 0;/**/
                margin-bottom: 0;/**/
        }
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        .mv-box {
                display: block;
                padding-left: 0;
                position: relative;
        }
        .img-mv {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
                padding: 0;
                margin: 0;
        }
        .img-mv-text {
                width: 60%;
                position: absolute;
                top: 46%;
                left: 50%;
                -ms-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                margin: 0;
                padding: 0;
        }
}
/* ------------------------------ */
/**/
h2 {
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
}

/**********************************************************************************************/
.yellow {
        color: #F1E07B;
}
.line-solid-yellow {
        color: #F1E07B;
        width: 40%;
        margin: auto;
}
/***********************************************セクション***********************************************/
.section-big-box {
        width: 100%;
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 20%;
}
.section-big-box:first-child {
        width: 100%;
        margin: 0;
        padding-top: 0;
        padding-bottom: 60px;
}
.section-mini-box {
        display: block;
}
.id-img {
        height: 100px;
        width: auto;
        margin: auto;
        margin-top: 60px;
        margin-bottom: 38px;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        .section-big-box {
                width: 100%;
                padding-top: 60px;
                padding-bottom: 60px;
                padding-left: 0;
                padding-right: 0;
        }
        .id-img {
                height: auto;
                width: 90%;
                margin: auto;
                margin-top: 60px;
                margin-bottom: 38px;
        }
}
/* ------------------------------ */
/***********************************************サイドメニュー***********************************************/
.menu {
        color: #fff;
        display: block;
        width: 16%;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 4%;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        .menu {
                display: none;
        }
}
/* ------------------------------ */
.menu ul {
        width: 100%;
        margin: 90px auto 0 auto;
}
.menu ul a {
        color: #fff;
}
.menu ul a:hover {
        text-decoration: underline;
}
.menu ul li {
        line-height: 200%;
        font-size: 1.1rem;
}
.line-solid-yellow1 {
        color: #F1E07B;
        width: 60%;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
}
.line-solid-yellow2 {
        color: #F1E07B;
        width: 30%;
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
}
/***********************************************ニュース***********************************************/
#news .charity-info-box p {
        color: #F1E07B;
}
#news .section-left-box {
        width: 40%;
}
#news .section-right-box {
        width: 50%;
        margin-right: 6%;
}
/************/
.news-one {
        margin-top: 30px;
        margin-bottom: 30px;
}
.news-one .bold {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 20px;
}
#news .line-leaf {
        width: 20%;
        padding: 0;
        margin: 0;
}
#news summary {
        color: #F1E07B;
        font-size: 1.1rem;
        text-decoration: underline;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        #news .charity-info-box {
                color: #F1E07B;
                display: block;
                width: 90%;
                margin: auto;
        }
        #news .flex-between {
                display: flex;
                width: 90%;
                margin: 0;
                margin: auto;
        }
        #news .section-left-box {
                width: 50%;
                margin: 0;
                padding: 0;
        }
        #news .section-right-box {
                width: 50%;
                margin: 0;
                padding: 0;
        }
        #news .line-leaf {
                width: 20%;
                padding: 0;
                margin: 0;
        }
}
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
        #news .charity-info-box {
                color: #F1E07B;
                display: block;
                width: 90%;
                margin: auto;
                padding-top: 10px;
                padding-bottom: 30px;
        }
        #news .flex-between {
                display: block;
                width: 90%;
                margin: auto;
        }
        #news .section-left-box {
                font-size: 11px;
                width: 100%;
                margin: 0;
                padding: 0;
        }
        .news-one .bold {
                font-size: 14px;
        }
        #news .section-right-box {
                width: 80%;
                margin: 90px auto 0 auto;
                padding: 0;
        }
        #news .line-leaf {
                width: 20%;
                padding: 0;
                margin: 0;
        }
        .twitter-timeline {
                width: 100%;
        }
}
/* ------------------------------ */
/***********************************************アバウト***********************************************/
.yellow-big {
        font-size: 1.1rem;
}
.center-box {
        width: 36%;
        margin: 0 auto;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        #about p {
                width: 90%;
                margin: 0 auto;
        }
}
/* ------------------------------ */
/***********************************************ギャラリー***********************************************/
.to-id {
    color: #fff;
        text-align: end;
        text-decoration: underline;
}
.img-gallery-one-main {
        width: 320px;
        height: auto;
        margin: 0;
        padding: 0;
}
.img-gallery-one-mini {
        width: 180px;
        height: 180px;
        object-fit: cover;
}
.grid-container-5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
.grid-container-5 .grid_item {
        width: 16%;
        padding: 0;
        margin-right: 10px;
        margin-bottom: 10px;
}
.grid-container-5 .grid_item:last-child {
        width: 16%;
        padding: 0;
        margin-right: 0;
        margin-bottom: 10px;
}
.grid-container-3 {
        display: flex;
        flex-wrap: wrap;
}
.grid_item img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        padding-right: 10px;
        padding-bottom: 10px;
}
/**/
#gallery .gallery-one-out {
        background: #00489A;
        background: -moz-linear-gradient(#00234A 0%, #00489A 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(#00234A), to(#00489A));
        background: -webkit-linear-gradient(#00234A 0%, #00489A 100%);
        background: -o-linear-gradient(#00234A 0%, #00489A 100%);
        background: -ms-linear-gradient(#00234A 0%, #00489A 100%);
        background: linear-gradient(#00234A 0%, #00489A 100%);
        padding: 32px;
        margin: 60px auto;
        margin-right: 6%;
}
#heis .gallery-one-out {
    background-image: linear-gradient(#1F7990, #3CB0CD);
        padding: 32px;
        margin: 60px auto;
        margin-right: 6%;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        #gallery .gallery-one-out {
                width: 90%;
                background: #00489A;
                background: -moz-linear-gradient(#00234A 0%, #00489A 100%);
                background: -webkit-gradient(linear, left top, left bottom, from(#00234A), to(#00489A));
                background: -webkit-linear-gradient(#00234A 0%, #00489A 100%);
                background: -o-linear-gradient(#00234A 0%, #00489A 100%);
                background: -ms-linear-gradient(#00234A 0%, #00489A 100%);
                background: linear-gradient(#00234A 0%, #00489A 100%);
                padding: 16px;
                margin-right: 0;
                margin: 60px auto;
        }
    #heis .gallery-one-out {
                width: 90%;
                background-image: linear-gradient(#1F7990, #3CB0CD);
                padding: 16px;
                margin-right: 0;
                margin: 60px auto;
        }
        .img-gallery-one-main {
                width: 300px;
                height: auto;
                margin: 0;
                padding: 0;
        }
        .img-gallery-one-mini {
                width: 100px;
                height: 100px;
                object-fit: cover;
        }
}
/* ------------------------------ */
/**/
.one-flex {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #fff;
        padding: 10%;
        margin-left: auto;
}
/* ------------------------------ */
.one-left {
        display: block;
        width: 50%;
}
.one-right {
        display: block;
        width: 50%;
        border-left: 1px solid #fff;
        padding-left: 10%;
}
/* ------------------------------ */
.one-right-img {
        width: 160px;
        height: auto;
        margin: 0;
        padding: 0;
}
@media only screen and (max-width: 1180px) { /* タブレットサイズでの指定 */
        .one-flex {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                border: 1px solid #fff;
                padding: 30px;
                margin-left: auto;
        }
        .img-gallery-one-main {
                width: 300px;
                height: auto;
                margin: 0;
                padding: 0;
        }
        .one-right {
                display: block;
                width: 50%;
                border-left: 1px solid #fff;
                padding-left: 20px;
                font-size: 11px;
        }
}
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
        .grid-container-5 .grid_item img {
                width: 50px;
                height: 100px;
                object-fit: cover;
                padding: 0;
                margin-right: 10px;
                margin-bottom: 10px;
        }
        .one-flex {
                width: 100%;
                display: block;
                flex-wrap: wrap;
                border: 1px solid #fff;
                padding: 10px;
                margin: auto;
        }
        .one-left {
                display: block;
                width: 100%;
                margin: 0;
                padding: 0;
        }
        .one-right {
                display: block;
                width: 100%;
                padding: 0;
                margin: 0;
                border-left: 1px dashed #F1E07B;
                margin-top: 32px;
        }
        .one-right p {
                font-size: 12px;
                padding-left: 6px;
        }
        .img-gallery-one-main {
                width: 200px;
                height: auto;
                margin: 0;
                padding: 0;
        }
        .grid_item img {
                width: 100px;
                height: 100px;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                padding-right: 10px;
                padding-bottom: 10px;
        }
}
/**/
/**/
/***********************************************セール***********************************************/
#online-shop {
    background-color: #C8AE6A;
    color: #000;
}
#online-shop a {
    color: #000;
}
.sales-list {
    display: flex;
    flex-wrap: wrap;
    
}
.sale-item-img {
    width: 200px;
                height: 200px;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
}
.dl-sale {
    width: 46%;
    display: flex;
    margin-top: 32px;
    margin-bottom: 32px;
    margin-right: 32px;
    color: #000;
    background-color: #fff;/*#927E47*/
    padding: 20px;
}
.dl-sale dt {
    font-weight: normal;
    width: 200px;
    margin-right: 20px;
}

#online-shop .dl-sale a {
    color: #675DD5;
}

.dl-sale dd {
    width: 100%;
    padding-left: 20px;
}
.sale-button {
    width: 50%;
    font-size: 18px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    display: block;
    color: #fff;
    background-color: #5E5990;
    text-align: center;
    padding: 8px 0;
    border-radius: 10px;
    margin-top: 20px;
}
/**/
/**/
/***********************************************リンク***********************************************/
#link .section-left-box {
        width: 20%;
}
#link .section-right-box {
        width: 70%;
        margin-right: 6%;
}
#link .id-img {
        height: auto;
        width: 200px;
        margin: auto;
}
.link-one {
        background-color: #fff;
        color: #002E62;
        width: 30%;
        min-height: 550px;
        padding: 10px;
        border-top-right-radius: 20px;
        margin: 10px;
}
.link-one-inbox2 {
        width: 90%;
        border-radius: 20px;
        border: 1px solid #002E62;
        background-color: #fff;
        color: #002E62;
        margin: auto;
        padding: 6px;
        text-align: center;
        cursor: pointer;
}
.link-one-inbox3 {
        width: 90%;
        margin: auto;
        text-align: left;
}
.link-one-inbox3 a {
        color: #fff;
}
.link-img {
        width: 90%;
        height: 160px;
        object-fit: cover;
        margin: 20px auto 0 auto;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 **********************/
        #link .flex-between {
                width: 90%;
                margin-right: 0;
                margin: 60px auto;
        }
        #link .section-left-box {
                width: 10%;
                font-size: 0.8rem;
        }
        #link .section-left-box p {
                font-size: 11px;
        }
        #link .section-right-box {
                width: 90%;
                margin: 0;
                margin-right: 0;
                padding: 0;
        }
        #link .section-right-box .flex-between {
                width: 100%;
                flex-wrap: wrap;
                justify-content: flex-start;
                margin: 0;
                padding: 0;
        }
        #link .id-img {
                height: auto;
                width: 100px;
                margin: auto;
        }
        .link-one {
                background-color: #fff;
                color: #002E62;
                width: 100%;
                padding: 10px 4px;
                border-top-right-radius: 20px;
                margin: 4px;
                min-height: 660px;
        }
        .link-img {
                width: 90%;
                height: 400px;
                object-fit: cover;
                margin: 20px auto 0 auto;
        }
}
/* ------------------------------ */
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 *********************/
        #link .flex-between {
                display: block;
                width: 90%;
                margin-right: 0;
                margin: 0 auto;
        }
        #link .section-left-box {
                width: 100%;
                font-size: 0.8rem;
                margin-bottom: 32px;
        }
        #link .section-left-box p {
                font-size: 11px;
        }
        #link .section-right-box {
                width: 100%;
                margin: 0;
                margin-right: 0;
                padding: 0;
        }
        #link .section-right-box .flex-between {
                flex-wrap: wrap;
                justify-content: flex-start;
                margin: 0;
                padding: 0;
        }
        #link .id-img {
                height: auto;
                width: 100px;
                margin: auto;
        }
        .link-one {
                background-color: #fff;
                color: #002E62;
                width: 100%;
                padding: 10px;
                border-top-right-radius: 20px;
                margin: 0;
                margin-bottom: 10px;
                font-size: 11px;
                min-height: 400px;
        }
        .link-img {
                width: 90%;
                height: 160px;
                object-fit: cover;
                margin: 20px auto 0 auto;
        }
}
/* ------------------------------ */
/***********************************************コンタクト***********************************************/
#contact a {
        color: #F1E07B;
        text-decoration: underline;
}
#contact .section-left-box {
        width: 16%;
}
#contact .section-right-box {
        width: 40%;
        margin-left: 10%;
}
#contact .id-img {
        height: auto;
        width: 200px;
        margin: auto;
}
.usagi-img {
        width: 300px;
        display: block;
        margin-left: 10%;
}
#contact .line-leaf {
        width: 40%;
        padding: 0;
        margin: 0;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        #contact .flex-start {
                width: 90%;
                margin: auto;
        }
}
/* ------------------------------ */
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
        .flex-start {
                display: block;
        }
        #contact .section-left-box {
                width: 100%;
        }
        #contact .section-right-box {
                width: 100%;
                margin-left: 0;
        }
        #contact a {
                font-size: 11px;
        }
        #contact .id-img {
                height: auto;
                width: 100px;
                margin: auto;
        }
        .usagi-img {
                width: 200px;
                display: block;
                margin-left: auto;
        }
}
/* ------------------------------ */
/**/
/***********************************************アニメーション***********************************************/
/* スクロールCSS */
.fade-in {
        opacity: 0;
        transition-duration: 300ms;
        transition-property: opacity, transform;
}
.fade-in-up {
        transform: translate(0, 50px);
}
.fade-in-down {
        transform: translate(0, -50px);
}
.fade-in-left {
        transform: translate(-50px, 0);
}
.fade-in-right {
        transform: translate(50px, 0);
}
.scroll-in {
        opacity: 1;
        transform: translate(0, 0);
}
/*スリック*/
/*==================================================
スライダーのためのcss
===================================*/
.exhibition-slider {
        width: 80%;
        margin: auto;
}
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
        width: 94%;
        margin: 0 auto;
}
.slider img {
        width: 40vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
        height: auto;
}
.slider .slick-slide {
        transform: scale(0.8); /*左右の画像のサイズを80%に*/
        transition: all .5s; /*拡大や透過のアニメーションを0.5秒で行う*/
        opacity: 0.5; /*透過50%*/
}
.slider .slick-slide.slick-center {
        transform: scale(1); /*中央の画像のサイズだけ等倍に*/
        opacity: 1; /*透過なし*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
        position: absolute; /*絶対配置にする*/
        top: 42%;
        cursor: pointer; /*マウスカーソルを指マークに*/
        outline: none; /*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #fff; /*矢印の色*/
        border-right: 2px solid #fff; /*矢印の色*/
        height: 15px;
        width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
        left: -1.5%;
        transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
        right: -1.5%;
        transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
        text-align: center;
        margin: 20px 0 0 0;
}
.slick-dots li {
        display: inline-block;
        margin: 0 5px;
}
.slick-dots button {
        color: transparent;
        outline: none;
        width: 8px; /*ドットボタンのサイズ*/
        height: 8px; /*ドットボタンのサイズ*/
        display: block;
        border-radius: 50%;
        background: #fff; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
        background: #F1E07B; /*ドットボタンの現在地表示の色*/
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        .exhibition-slider {
                width: 90%;
                margin: auto;
        }
        .slider img {
                width: 60vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
                height: auto;
        }
}
/* ------------------------------ */
/*==================================================
スライダーのためのcss
===================================*/
.painting-slider {
        width: 50%;
        margin: auto;
}
/*画像の横幅を100%にしてレスポンシブ化*/
.gallery img {
        width: 100%;
        height: auto;
        vertical-align: bottom; /*画像の下にできる余白を削除*/
}
/*メイン画像下に余白をつける*/
.gallery {
        margin: 0 0 10px 0;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
        position: absolute; /*絶対配置にする*/
        z-index: 3;
        top: 42%;
        cursor: pointer; /*マウスカーソルを指マークに*/
        outline: none; /*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #fff; /*矢印の色*/
        border-right: 2px solid #fff; /*矢印の色*/
        height: 25px;
        width: 25px;
}
.slick-prev { /*戻る矢印の位置と形状*/
        left: 2.5%;
        transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
        right: 2.5%;
        transform: rotate(45deg);
}
/*選択するサムネイル画像の設定*/
.choice-btn li {
        cursor: pointer;
        outline: none;
}
.choice-btn li img {
        opacity: 0.4; /*選択されていないものは透過40%*/
}
.choice-btn li.slick-current img {
        opacity: 1; /*選択されているものは透過しない*/
}
@media only screen and (max-width: 770px) { /* タブレットサイズでの指定 ******************/
        .painting-slider {
                width: 90%;
                margin: auto;
                font-size: 12px;
        }
}
/* ------------------------------ */
/***************************************************************/
/** タブ **/
.tab-wrapper {
        width: 100%;
        margin: auto;
}
.tab-menu {
        display: flex;
        list-style: none;
}
.tab-menu:nth-of-type(2) {
        margin-top: 0;
}
.tab-menu li {
        flex-grow: 1;
        padding: 10px;
        cursor: pointer;
        color: #7bf1db;
}
.tab-menu li:first-child {
        border-left: none;
}
.tab-menu li.active {
        opacity: 0;
}
.tab-menu:nth-of-type(2) li.active {
        color: #7bf1db;
}
.tab-one {
        display: none;
        width: 100%;
        padding: 10px;
        margin: auto;
}
.tab-contents:nth-of-type(2) .tab-one {}
.tab-one.active {
        display: block;
}
.kakomi {
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #000;
        background-color: black;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        .kakomi {
                color: #002E62;
                font-size: 9px;
                padding: 4px 10px;
                border-radius: 10px;
                background-color: #F1E07B;
        }
}
/***************************************************************/ /**/
.blue {
        background-color: #002e62;
        padding: 0 10px;
}