@charset "utf-8";

/* Desktop向けスタイル(1200px以上) */

footer {
    background-color: transparent;
    margin-top: 60px;
    padding: 20px 0 40px;
    width: 100vw;
    border-top: 1px solid #cdcdcd;
}

footer ul{
	list-style: none;
}

footer a{
    color: #10218b;
}

/* 2022 Footer-Style */
footer ul.footer_link{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    /* 追加 */
    flex-wrap: wrap;
    /* row-gap: 10px; */
}

footer ul.footer_link li{
    margin-bottom: 10px;
    font-size: 14px;
}

footer ul.footer_link li+li{
    position: relative;
}

/* リスト間区切り線 */
footer ul.footer_link li+li::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    border-left: 1px solid #10218b;
    /* border-left: 1px solid #f5f5f5; */
}

/* RTL beforeスタイル打ち消し */
html[dir="rtl"] footer ul.footer_link li+li::before{
    display: none;
}

html[dir="rtl"] footer ul.footer_link li+li::after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    border-right: 1px solid #10218b;
}

footer ul.footer_link li a{
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    color: #10218b;
    /* color: #f5f5f5; */
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
}

footer ul.footer_link li a:hover{
    color: #23527c;
    /* color: #fff; */
    /* opacity: 0.7; */
    text-decoration: underline;
}

/* Copyright領域 */
footer ul.footer_copyright{
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    list-style: none;
    padding: 0;
}

footer ul.footer_copyright div#copyright{
    color: #5a5a5a;
    /* color: #f5f5f5; */
    font-size: 12px;
}

/* 言語モーダル本体スタイル */
div#languageModal > .language-modal{
    /* width: 680px; */
    width: 750px;
    margin: 30px auto;
}

div#languageModal p.close_modal_button{
    font-size: 28px;
    margin: 0;
    padding-top: 5px;
}

div#languageModal .LanguageList{
	padding: 20px;
}

div#languageModal li{
	font-size: 14px;
	margin-bottom: 15px;
}

/* 選択済み言語チェックマーク */
div#languageModal li.selected::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 9px;
	height: 14px;
	border-right: 2px solid #228b22;
	border-bottom: 2px solid #228b22;
}

div#languageModal li>a:hover {
	opacity: 0.7;
}

/* RTL 選択済み言語チェックマーク before削除*/
html[dir="rtl"] div#languageModal li.selected::before {
    display: none;
}

/* RTL RTL 選択済み言語チェックマーク after追加 */
html[dir="rtl"] div#languageModal li.selected::after {
    content: "";
	position: absolute;
	top: 0;
	right: -3px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 9px;
	height: 14px;
	border-right: 2px solid #228b22;
	border-bottom: 2px solid #228b22;
}

/* scroll フロートボックス表示 */
.scrolldown{
    display: none;
}

.scrolldown span{
    display: none;
}

.scrolldown::after{
    display: none;
}

/* スクロールダウンアニメーション */
@keyframes pathmove{
    0%{
        height: 0;
        top: 10px;
        opacity: 0;
    }

    30%{
        height: 50px;
        opacity: 1;
    }

    100%{
        height: 0;
        top: 130px;
        opacity: 0;
    }
}

@keyframes float{
    0%{
        opacity: 0;
    }

    30%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

/* OS選択モーダル本体 */

div#osModal > .os-modal{
    /* width: 680px; */
    /* width: 750px; */
    margin: 30px auto;
}

div#osModal p.close_modal_button{
    font-size: 28px;
    margin: 0;
    padding-top: 5px;
}

div#osModal li{
    margin-bottom: 15px;
}

/* 選択済み言語チェックマーク */
div#osModal li.selected::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 9px;
	height: 14px;
	border-right: 2px solid #228b22;
	border-bottom: 2px solid #228b22;
}

div#osModal li>a:hover {
	opacity: 0.7;
}

/* RTL 選択済み言語チェックマーク before削除*/
html[dir="rtl"] div#osModal li.selected::before {
    display: none;
}

/* RTL 選択済み言語チェックマーク after追加 */
html[dir="rtl"] div#osModal li.selected::after {
    content: "";
	position: absolute;
	top: 0;
	right: -3px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 9px;
	height: 14px;
	border-right: 2px solid #228b22;
	border-bottom: 2px solid #228b22;
}


/* end */

/* 中サイズDesktop向けスタイル(1200px未満-992px) */
@media screen and (max-width: 1199px){

}

/* 小サイズDesktop/タブレット向けスタイル(992px未満-768px) */
@media screen and (max-width: 991px){
    div#languageModal > .language-modal{
        width: 680px;
    }

    div#osModal > .os-modal{
        width: 680px;
        /* width: 750px; */
        /* margin: 30px auto; */
    }
}

/* タブレット向けスタイル(768px未満-480px) */
@media screen and (max-width: 767px){

    div#languageModal .LanguageList{
        padding: 0 30px;
    }

    /* 言語モーダル本体スタイル */
	div#languageModal>.language-modal {
		width: 420px;
		margin: 30px auto;
	}

	div#languageModal>.language-modal .modal-content {
		max-height: 480px;
	}

	div#languageModal>.language-modal .modal-body {
		/* max-height: 400px; */
		max-height: 380px;
		overflow-y: scroll;
	}

	div#languageModal li{
		font-size: 18px;
		margin-top: 6px;
	}

	div#languageModal li.selected::before {
		top: -1px;
		left: -7px;
		width: 12px;
		height: 17px;
	}

    
    /* スクロールダウンスタイル */
    .scrolldown{
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }
    
    /* rtl用 */
    html[dir="rtl"] .scrolldown{
        left: 25%;
        /* right位置リセット */
        right: auto;
    }
    
    .scrolldown span{
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing :0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }
    
    
    .scrolldown::after{
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }

    div#osModal > .os-modal{
        width: 420px;
    }

}

/* スマホ向けスタイル(480px以下) */
@media screen and (max-width: 480px){
    div#languageModal>.language-modal {
		width: 360px;
		margin: 40px auto;
	}

	div#languageModal li.selected::before {
		left: -16px;
	}

    div#osModal > .os-modal{
        width: 360px;
        margin: 40px auto;
    }
}

/* 縦長スマホ向けスタイル (幅480px以下、高さ560px以上) */
@media (max-width: 480px) and (min-height: 560px){
	div#languageModal>.language-modal .modal-content {
		max-height: 550px;
	}

	div#languageModal>.language-modal .modal-body {
		max-height: 450px;
	}

}

/* 縦長スマホ向けスタイル (幅480px以下、高さ560px以上) */
@media (max-width: 480px) and (min-height: 700px){
	div#languageModal>.language-modal .modal-content {
		max-height: 670px;
	}

	div#languageModal>.language-modal .modal-body {
		max-height: 570px;
	}

}

/* 小スマホ向けスタイル(320px以下) */
@media screen and (max-width: 320px){
    div#languageModal>.language-modal {
		width: 250px;
		margin: 40px auto;
	}

    div#osModal > .os-modal{
        width: 250px;
        margin: 40px auto;
    }
}


/* デバイス横向き時の設定 */
@media screen and (orientation: landscape) {

    div#languageModal > .language-modal{
        /* width: 680px; */
        width: 750px;
        margin: 10px auto;
    }

    /* div#languageModal>.language-modal .modal-content {
		max-height: 670px;
	} */
}


@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 600px){

    div#languageModal > .language-modal{
        width: 680px;
        /* max-height: 400px; */
        /* margin: 30px auto; */
    }

}

@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 420px){
    
    div#languageModal > .language-modal{
        /* width: 700px; */
        width: 520px;
        max-height: 380px;
        margin: 10px auto;
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 360px;
	}

    div#languageModal>.language-modal .modal-body{
        max-height: 300px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}

@media screen and (orientation: landscape) and (max-width: 767px) and (max-height: 380px){
    div#languageModal > .language-modal{
        /* width: 700px; */
        width: 520px;
        max-height: 360px;
        /* margin: 30px auto; */
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 320px;
	}

    div#languageModal>.language-modal .modal-body{
        max-height: 260px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}

@media screen and (orientation: landscape) and (max-width: 767px) and (max-height: 320px){
    div#languageModal > .language-modal{
        /* width: 520px; */
        max-height: 300px;
        margin: 10px auto;
        overflow-y: hidden;
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 260px;
	}

    div#languageModal>.language-modal div.modal-header{
        padding: 10px;
    }

    div.modal-header h3.modal-title{
        font-size: 20px;
    }

    div#languageModal>.language-modal .modal-body{
        max-height: 240px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}