@charset "utf-8";

/* CSS 基本部分 */
body{
    margin: 0;
}
.link {
    text-decoration: none;
}

@media screen and (max-width: 380px) {
    /* for SmartPhone 縦 */
    /*(768px以下の画面サイズで適用されるスタイル) */
    header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 43px;
        z-index: 15;
        background-color: white;
        min-width: 380px;
    }
    #header_base{
        display: flex;
        align-items: center;
        width: 96%;
        margin: 0 auto;
        margin-top: 4px;
    }
    #header_base div{
        padding-right: 10px;
    }

    /* 上部リンク（PCは非表示） */
    #UpperLinks{
        min-width: 380px;
        text-align: center;
        color: black;
        margin-top: 45px;
        font-style: 12px;
    }

    #MainBase {
        position: relative;
        background-color: white;
        min-width: 380px;
    }

    /* 中央：メインコンテンツのみ表示 */
    #LeftMenu, #RightMenu{
        /* スマホでは左右メニューは非表示 */
        display: none;
    }
    #CenterContents{
        padding-top: 1px;
        padding-bottom: 1px;
        /* background-color: rgb(85, 243, 65); */
    }
    .BaseContainer{
        position: relative;
        margin: 10px auto;
        width: 90%;
        /* background-color: aquamarine; */
    }

    /* footer Contents */
    footer{
        width: 100%;
        margin: 0 auto;
        min-width: 380px;
    }
   #FooterBase{
        width: 100%;
        /* background-color: blueviolet; */
    }
    #footer-menu{
        /* スマフォ縦は専用フッター表示 */
        display: none;
    }
    #footer-menu-small{
        /* スマフォ縦専用フッター */
        width: 340px;
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
   }
    .footer-tate{
        display: flex;
        flex-direction: column;
        width: 260px;
        margin-left: 8px;
    }
    .footer-left-mid{
        display: flex;
        margin: 0 auto;
        margin-bottom: 6px;
    }
    .footer-left{
        width: 80px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-mid{
        width: 80px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-right{
        text-align: right;
        font-size: 9pt;
    }
    .footer-right span{
        font-size: 8pt;
    }

    /* Movie アイコン関連 */
    .MovIconTate{
        display: flex;
        flex-direction: column;
        width: 75px;
    }
    .MovIconBase{
        text-align: center;
        margin-left: 2px;
        font-family: 'Kiwi Maru', serif; /* Kiwi-丸ゴシック*/
        font-size: 8px;
        font-weight: bold;
        padding-top: 3px;
    }
    .MovIcon{
        width: 80%;
        margin: 0 auto;
    }


    /* メニューボタン ここから */
    .Button {
        position: fixed;
        top: 2px;
        right: 4px;
        z-index: 40;
        height: 40px;
        padding-left: 7px;
        padding-right: 7px;
        background-color: orangered;
        border: 0;
        border-radius: 14px;
    }
    .Button-LineTop {
        position: absolute;
        top: 10px;
        width: 35px;
        height: 4px;
        background-color: black;
    }
    .Button-LineMedium {
        width: 35px;
        height: 4px;
        background-color: black;
    }
    .Button-LineBottom {
        position: absolute;
        bottom: 10px;
        width: 35px;
        height: 4px;
        background-color: black;
    }
    /* メニューボタン ここまで */
 
    /* ハンバーガーメニュー ここから */
 
    /* メニューの・を消す */
    ul{
        padding-left:0;
    }
    li{
        list-style:none;
    }

    .Menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 30;
        width: 250px;
        height: 100vh;
        background-color: #fff;
        transform: translateX(100%); /* 画面外へ */
        transition: all 0.3s; /* アニメーション速度 */
        font-family: 'Kiwi Maru', serif; /* Kiwi-丸ゴシック*/
        font-size: 24px;
        line-height: 2.75em;
        /* overflow: scroll; /* はみ出したらスクロール */
    }
    .Menu-Header {
        width: 100%;
        height: 45px;
        background-color: #6ba6e7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 24px;
        color: #fff;
    }
    .Menu-List {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .Menu-List-Item {
        border-bottom: 1px solid #ccc;
        width: 100%;
    }

    .MenuIsOpen {
        /* メニュを出現させる */
        transform: translateX(0);
    }

    /* オーバーレイ */
    .Overlay {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: all 0.3s;
    }
    /* 付け外し用 */
    .OverlayIsOpen {
        visibility: visible;
        opacity: 1;
    }
    /* ハンバーガーメニュー  ここまで */
    



} /* @media screen and (max-width: 388px) End */

@media screen and (min-width: 381px) and (max-width: 768px) {
    /* for SmartPhone & Tablet */
    /*(381～768px以下の画面サイズで適用されるスタイル) */
    header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 43px;
        z-index: 15;
        background-color: white;
        min-width: 640px;
    }
    #header_base{
        display: flex;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        margin-top: 4px;
    }
    #header_base div{
        padding-right: 10px;
    }

    /* 上部リンク（PCは非表示） */
    #UpperLinks{
        width: 100%;
        text-align: center;
        margin-top: 44px;
        font-style: 12px;
        min-width: 640px;
    }

    #MainBase {
        position: relative;
        background-color: white;
        min-height: 500px;
        min-width: 640px;
    }

    /* スマホでは左右メニューは非表示 */
    #LeftMenu, #RightMenu{
        display: none;
    }

    /* 中央：メインコンテンツ */
    #CenterContents{
        width: 90%;
        margin: 0 auto;
        padding-top: 1px;
        padding-bottom: 1px;
        /* background-color: rgb(85, 243, 65); */
    }
    .BaseContainer{
        position: relative;
        margin: 10px auto;
        width: 90%;
        /* background-color: aquamarine; */
    }

    /* footer Contents */
    footer{
        width: 100%;
        margin: 0 auto;
        min-width: 640px;
    }
   #FooterBase{
        width: 95%;
        margin: 0 auto;
        height: 75px;
        /* background-color: blueviolet; */
    }
    #footer-menu{
        display: flex;
        align-items: end;
    }
    #footer-menu-small{
        /* スマフォ縦専用フッターなので非表示 */
        display: none;
    }
    .footer-left{
        width: 80px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-mid{
        width: 80px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-right{
        text-align: right;
        padding-right: 8px;
        width: 680px;
        flex: 1;
        font-size: 9pt;
    }
    .footer-right span{
        font-size: 8pt;
    }

    /* Movie アイコン関連 */
    .MovIconBase{
        width: 70px;
        text-align: center;
        margin-left: 2px;
        font-family: 'Kiwi Maru', serif; /* Kiwi-丸ゴシック*/
        font-size: 8px;
        font-weight: bold;
    }
    .MovIcon{
        width: 80%;
        margin: 0 auto;
    }

    /* メニューボタン ここから */
    .Button {
        position: fixed;
        top: 2px;
        right: 18px;
        z-index: 40;
        height: 40px;
        padding-left: 7px;
        padding-right: 7px;
        background-color: #6ba6e7;
        border: 0;
        border-radius: 16px;
    }
    .Button-LineTop {
        position: absolute;
        top: 10px;
        width: 35px;
        height: 4px;
        background-color: black;
    }
    .Button-LineMedium {
        width: 35px;
        height: 4px;
        background-color: black;
    }
    .Button-LineBottom {
        position: absolute;
        bottom: 10px;
        width: 35px;
        height: 4px;
        background-color: black;
    }
    /* メニューボタン ここまで */

    /* ハンバーガーメニュー ここから */

    /* メニューの・を消す */
    ul{
        padding-left:0;
    }
    li{
        list-style:none;
    }
    .Menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 30;
        width: 300px;
        height: 100vh;
        background-color: #fff;
        transform: translateX(100%); /* 画面外へ */
        transition: all 0.3s; /* アニメーション速度 */
        font-family: 'Kiwi Maru', serif; /* Kiwi-丸ゴシック*/
        font-size: 26px;
        line-height: 2.75em;
        text-align: center;
    }
    .Menu-Header {
        width: 100%;
        height: 45px;
        background-color: #6ba6e7;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        font-size: 32px;
    }
    .Menu-List {
        width: 80%;
        margin: 0 auto;
    }
    .Menu-List-Item {
        border-bottom: 1px solid #ccc;
        width: 100%;
    }
    .MenuIsOpen {
        /* メニューを出現させる */
        transform: translateX(0);
    }
    /* オーバーレイ(ここをクリックしても閉じられる) */
    .Overlay {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: all 0.3s;
    }
    /* 付け外し用 */
    .OverlayIsOpen {
        visibility: visible;
        opacity: 1;
    }
    /* ハンバーガーメニュー  ここまで */

} /* @media screen and (min-width: 381px) and (max-width: 768px) End */


/* ==== for PC　==== */
@media screen and (min-width: 769px) {
   /* for PC (769px以上の画面サイズで適用されるスタイル) */

   .Menu, .Button, .Overlay{ 
        /* ハンバーガーメニューはPCでは非表示 */
        display: none;
    } 
    header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 43px;
        z-index: 15;
        background-color: white;
    }
    #header_base{
        display: flex;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        margin-top: 4px;
    }
    #header_base div{
        padding-right: 10px;
    }

    /* 上部リンク（PCは非表示） */
    #UpperLinks{
        display: none;
    }

    /* ３カラム部 Base */
    #MainBase {
        display: flex; 
        align-items: stretch;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        margin-top: 38px;
        background-color: white;
        min-height: 500px;
    }
    /* ３カラム部（左：左メニュー） */
    #LeftMenu{
	    position: sticky;
	    top: 100px;
        align-items: stretch;
        display: flex;
        /* 縦書き＆中央寄せ(親で設定) */
        writing-mode: vertical-rl; 
        align-items: center;
        width: 100px;
        min-width: 100px;
        height: 650px;
        font-size: 16pt;
        /* background-color: rgb(236, 115, 115); */
    }
    #left-navi {
	    /* 縦書き(親で設定) */
	    writing-mode: vertical-rl; 
    }
    #left-navi-menu {
	    color:black;
	    text-align: center;
	    /* Kiwi丸ゴシック */
	    font-family: 'Kiwi Maru', serif;
    }

    /* ３カラム部（中央：メインコンテンツ） */
    #CenterContents{
        flex:  1;
        /* background-color: rgb(85, 243, 65); */
        padding-top: 1px;
        padding-bottom: 1px;
    }
    .BaseContainer{
        position: relative;
        margin: 10px auto;
        width: 90%;
        /* background-color: aquamarine; */
   }

    /* ３カラム部（右：右メニュー） */
    #RightMenu{
	    position: sticky;
        top: 75px;
        align-items: stretch;
        width: 165px;
        min-width: 165px;
        height: 650px;
        align-items: center;
        /* background-color: rgb(117, 115, 236); */
    }
    #right-menu-box{
	    color:black;
	    width: 95%;
        margin: 0 auto;
    }
    #right-menu-logo{
        width: 85%;
        margin: 0 auto;
    }
    #right-menu-mark{
	    width: 100%;
    }
    #right-menu-title{
	    text-align: center;
	    font-size: small;
    }
    #right-menu-title span{
	    text-align: center;
	    font-family: 'Putikuma';
	    font-size: large;
	    font-weight: bold;
    }
    #right-menu-list{
	    text-align: center;
        font-size: 13pt;
        line-height: 2em;
    }
    #right-menu-list ol {
	    list-style-type: none;
	    padding-top: 0px;
	    padding-left: 0px;
    }
    #right-menu-list li {
	    padding-bottom: 10px;
    }

    /* フッター */
    footer{
        max-width: 1000px;
        margin: 0 auto;
    }
   #FooterBase{
        width: 95%;
        margin: 0 auto;
        height: 132px;
        /* background-color: blueviolet; */
    }
    #footer-menu{
        display: flex;
        align-items: flex-end;
        padding-top: 8px;
        height: 60px;
    }
    #footer-menu-small{
        display: none;
    }
   .footer-left{
        width: 100px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-mid{
        width: 100px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .footer-right{
        text-align: right;
        padding-right: 8px;
        width: 680px;
        flex: 1;
        font-size: 11pt;
    }
    .footer-right span{
        font-size: 10pt;
    }

    /* Movie アイコン関連 */
    .MovIconBase{
        width: 70px;
        text-align: center;
        margin-left: 2px;
        font-family: 'Kiwi Maru', serif; /* Kiwi-丸ゴシック*/
        font-size: 8px;
        font-weight: bold;
    }
    .MovIcon{
        width: 80%;
        margin: 0 auto;
    }


}

/* 共通 Style */
.Width60P{
    width: 80%;
}
.Width70P{
    width: 70%;
}
.Width80P{
    width: 80%;
}
.Width85P{
    width: 85%;
}
.Width90P{
    width: 90%;
}
.Width95P{
    width: 95%;
}
.Width100P{
    width: 100%;
}

/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
    padding:0;
}
  
/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
    background:#ccc;  
}
  
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
    background:#666;
}