@charset "utf-8";
/* CSS Document */
/***common************************************/
 /***********************************************************/
/* ------------------------------
BASE
------------------------------ */
html {
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: 0.07em;
}
a {
        color: #fff;
}
p {
    line-height: 200%;
}
.wrap {
        width: 100%;
        overflow: hidden;
}
.en-text {
        color: #7bf1db;
}
.border-bottom {
    border-bottom: 1px solid;
}
/* ------------------------------
FOOTER
------------------------------ */
footer {
        background-color: #002E62;
        color: #fff;
}
/* ------------------------------
MV
------------------------------ */
.mv-box {
        display: block;
        padding-left: 20%;
        position: relative;
}
.img-mv {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        padding: 0;
        margin: 0;
}

/* ------------------------------
H2
------------------------------ */
h2 {
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
}
/* ------------------------------
ID
------------------------------ */
#top {
        color: #fff;
        background: #002E62;
        margin: 0;
        padding: 0;
}
#news {
        color: #fff;
        background: #002E62;
}
#about {
        color: #F1E07B;
        background: #000914;
        background: -moz-linear-gradient(#002E62 0%, #000914 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(#002E62), to(#000914));
        background: -webkit-linear-gradient(#002E62 0%, #000914 100%);
        background: -o-linear-gradient(#002E62 0%, #000914 100%);
        background: linear-gradient(#002E62 0%, #000914 100%);
}
#gallery {
        color: #fff;
        background: #002E62;
}
#exhibition {
        color: #fff;
    background-image: linear-gradient(#002E62, #82A7D1);
}
#painting {
    background-image: linear-gradient(#002E62, #0a94b7);
}
#heis {
    background-color: #0a94b7;/*#451EA7*/
   /* background-image: linear-gradient(#002e62, #0a94b7);*/
    color: #fff;
}
#link {
        background-color: #70B6AA;
}
#contact {
        color: #fff;
        background-color: #707070;
}
.id-img {
        height: 100px;
        width: auto;
        margin: auto;
        margin-top: 60px;
        margin-bottom: 38px;
}

/* ------------------------------
YELLOW
------------------------------ */
.yellow {
        color: #F1E07B;
}
.line-solid-yellow {
        color: #F1E07B;
        width: 40%;
        margin: auto;
}
.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;
}
/* ------------------------------
SECTION
------------------------------ */
.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;
}
/* ------------------------------
SIDE MENU
------------------------------ */
.menu {
        color: #fff;
        display: block;
        width: 16%;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 4%;
}
.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;
}
/* ------------------------------
NEWS
------------------------------ */
#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 summary {
        color: #F1E07B;
        font-size: 1.1rem;
        text-decoration: underline;
}
/* ------------------------------
ABOUT
------------------------------ */
.yellow-big {
        font-size: 1.1rem;
}
.center-box {
        width: 36%;
        margin: 0 auto;
}
/* ------------------------------
GALLERY
------------------------------ */
#gallery .to-id {
        text-align: end;
        text-decoration: underline;
}
#gallery .img-gallery-one-main {
        width: 350px;
        height: auto;
        margin: 0;
        padding: 0;
}
#gallery .img-gallery-one-mini {
        width: 200px;
        height: 200px;
        object-fit: cover;
}
#gallery .grid-container-5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
#gallery .grid-container-5 .grid_item {
        width: 16%;
        padding: 0;
        margin-right: 10px;
        margin-bottom: 10px;
}
#gallery .grid-container-5 .grid_item:last-child {
        width: 16%;
        padding: 0;
        margin-right: 0;
        margin-bottom: 10px;
}
#gallery .grid-container-3 {
        display: flex;
        flex-wrap: wrap;
}
#gallery .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%;
}
/* ------------------------------
HE IS
------------------------------ */
#heis .to-id {
        text-align: end;
        text-decoration: underline;
}
#heis .img-gallery-one-main {
        width: 350px;
        height: auto;
        margin: 0;
        padding: 0;
}
#heis .img-gallery-one-mini {
        width: 200px;
        height: 200px;
        object-fit: cover;
}
#heis .grid-container-5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
#heis .grid-container-5 .grid_item {
        width: 16%;
        padding: 0;
        margin-right: 10px;
        margin-bottom: 10px;
}
#heis .grid-container-5 .grid_item:last-child {
        width: 16%;
        padding: 0;
        margin-right: 0;
        margin-bottom: 10px;
}
#heis .grid-container-3 {
        display: flex;
        flex-wrap: wrap;
}
#heis .grid_item img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        padding-right: 10px;
        padding-bottom: 10px;
}
#heis .gallery-one-out {
        background-color: #0A94B7;
        padding: 32px;
        margin: 60px auto;
        margin-right: 6%;
}
#heis .section-big-box {/**/
    padding-top: 0;
}

/* ------------------------------
.ONE-FLEX
------------------------------ */
.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;
}
/* ------------------------------
LINK
------------------------------ */
#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%;
    height: 460px;
        padding: 10px;
        border-top-right-radius: 20px;
        margin: 10px;
}
.link-one-inbox1 {
        height: 100px;
        line-height: 50px;
        vertical-align: middle;
        margin: 30px auto 0 auto;
        text-align: center;
        background-color: #002E62;
        color: #fff;
        box-sizing: border-box;
}
.link-one-inbox2 {
        border-radius: 20px;
        border: 1px solid #002E62;
        background-color: #fff;
        color: #002E62;
        margin: auto;
        text-align: center;
        cursor: pointer;
}
.link-one-inbox3 {
        margin: auto;
        text-align: left;
}
.link-one-inbox3 a {
        color: #fff;
}
/* ------------------------------
CONTACT
------------------------------ */
#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;
}
/* ------------------------------
SCROLL
------------------------------ */
/* スクロール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);
}
/* ------------------------------
SLICK SLIDER
------------------------------ */
.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; /*ドットボタンの現在地表示の色*/
}
/* ------------------------------
PAINTING
------------------------------ */
.painting-slider {
        width: 100%;
        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; /*選択されているものは透過しない*/
}
/* ------------------------------
TAB
------------------------------ */
.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
------------------------------ */
.kakomi {
        padding: 10px 30px;
        border-radius: 20px;
        border: 1px solid #000;
        background-color: black;
}
/***********************************************************/
/***********************************************************/