/* ▼フォント系 */
:root {
	--color-black: #2d2d2d;         /* 黒 */
	--color-red: #f03333;           /* 赤 */
	--color-lightblack: #6f6f6f;    /* 薄い黒 */
	--color-white: #ffffff;         /* 白 */

    --color-main: #003264;
    --color-light: #7aa2c1;
    --color-dark: #001b36;

    /*
    緑
    --color-main: #a3d529;
    --color-light: #deef97;
    --color-dark: #6f9300;
    青
    --color-main: #003264;
    --color-light: #7aa2c1;
    --color-dark: #001b36;
    オレンジ
    --color-main: #f0693c;
    --color-light: #f8b29b;
    --color-dark: #9c3a1f;
    */

	--color-palegrayline: #e2e2e2;  /* 線用の薄いグレー */
	--color-gray: #939292;          /* 文字色用グレー */
	--color-palegray: #f7f7f7;      /* 背景用薄いグレー */
	--color-darkgray: #bababa;      /* 濃いグレー*/

    --color-category1: #4A90E2;
    --color-category2: #6BBBAE;
    --color-category3: #F0A85C;
    --color-category4: #C48FB3;
    --color-category5: #E57373;

}
*
{
    color: var(--color-black);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}
main .special_contents > span > a,
#AUTHENTICATE_FORM a
{
    text-decoration: underline;
}

header
{
    background-color: var(--color-white);
    padding: 15px;
    border-bottom: 1px var(--color-main) solid;
}
main
{
}
aside
{
}
footer
{
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 20px;
    position: sticky;
    bottom: 0px;
    width: 100%;
}
body
{
    background-color: #f1f1f1;
}
body > div, header > *, footer > *
{
    display: grid;
    max-width: 1200px;
    margin: auto;
}
body > div
{
    grid-template-columns: auto 380px;
    gap: 50px;
    padding: 20px 0px;
}

/* button */
.button_style
{
    overflow: hidden;
    position: relative;
    z-index: 0;
    width: 300px;
    cursor: pointer;
    padding: 10px 0px;
}
.button_style:after
{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.button_style:hover:after
{
	transform: scale(1, 1);
}
.button_dark
{
    background-color: var(--color-dark);
    color: var(--color-white);
    border: 2px solid var(--color-dark);  
}
.button_dark:after
{
	background: var(--color-white);
	color : var(--color-black);
}
.button_dark:hover
{
	color : var(--color-black);
}




/* header */
#LOGO
{
    grid-template-columns: auto auto auto;
    gap: 10px;
}
#LOGO img:nth-last-of-type(1)
{
    margin-right: 10px;
}
header > nav ul
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    margin: 20px 0px 0px 0px;
}
header > nav ul li
{
    border: 1px var(--color-gray) solid;
    padding: 10px;
}
header > div
{
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
}
header > div *
{
    /*color: var(--color-main);*/
}
header > div > div:nth-of-type(1)
{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}
header > div:nth-of-type(1)  img
{
    width: 45px;
}
header > div:nth-of-type(1) > div:nth-of-type(1)
{
    /*color: var(--color-main);*/
    font-size: 1.5rem;
    gap: 20px;
}
header > div > div:nth-of-type(2)
{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    line-height: 1.2rem;
    gap: 10px;
}
header > div > div:nth-of-type(2) > span > span:nth-of-type(1)
{
    font-size: 0.8rem;
}
/* main */
main
{
    margin: 0px auto
}
.section_border
{
    border: 10px var(--color-main) solid;
    padding: 20px 20px 20px 220px;
}
main .special_contents
{
    display: grid;
    align-items: end;
    height: 170px;
    position: relative;
    background: transparent;
    line-height: 1.15rem;
}
main .special_contents::before
{
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: var(--color-dark);
    height: 65%;
    z-index: 0;
}
main .special_contents::after
{
    content: "";
    display: block;
    width: 170px;
    height: 170px;
    background-image: url(../img/image.png);
    background-repeat: no-repeat;
    background-size: 170px;
    background-position: 0% 100%;
    position: absolute;
    bottom: 0px;
}
main .special_contents > span
{
    color: var(--color-white);
    z-index: 0;
    /*padding: 35px 0px 0px 150px;*/
    padding: 20px 0px 15px 150px;
    display: grid;
}
main .special_contents > span > a
{
    font-size: 0.85rem;
    text-align: right;
    margin: 5px 0px 0px 0px;
}
main section
{
    padding: 20px;
    margin-bottom: 20px;
    position: relative;

    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 95% 100%);
}
section h3
{
    font-size: 1.2rem;
    margin-bottom: 10px;
    position: relative;
}
main section:not(#MECLOUD) h3
{
    padding: 0px 0px 0px 15px;
}
main section:not(#MECLOUD) h3::before, section:not(#MECLOUD) h3::after
{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5px;
    margin: auto;
}
main section:not(#MECLOUD) h3::before
{
    height: 80%;
    border-left: 5px solid var(--color-light);
}
main section:not(#MECLOUD) h3::after
{
    border-left: 5px solid var(--color-main);
    height: 40%;
}
.button_section_bottom
{
    display: block;
    margin: 20px auto 0px auto;
    text-align: center;
}
#MECLOUD
{
    background-image: url('/img/bg.jpg');
    background-size: cover;
    background-position: 0% 20%;
}
#MECLOUD a:not([class])
{
    border: 1px var(--color-light) solid;
    padding: 10px 20px;
    display: inline-block;
    background-color: var(--color-white);
}
#MECLOUD a:not([class])::after
{
    content: "≫";
    margin-left: 10px;
    color: var(--color-main);
}
#MECLOUD a svg
{
    height: 30px;
    position: relative;
    margin: 0px 5px -9px 0px;
    fill: var(--color-white);
}
#MECLOUD a:hover svg
{
    fill: var(--color-dark);
}

#INFORMATION > div
{
    display: grid;
    grid-template-columns: 70px 100px auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px var(--color-palegrayline) solid;
    padding: 5px 0px;
}
#INFORMATION > div > span:nth-of-type(1)
{
    color: var(--color-gray);
    font-size: 0.85rem;
}
#INFORMATION > div > a
{
    display: contents;
}
.information_categories
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 0px 0px 20px 0px;
}
.information_category, .information_categories li, #INFORMATION_DETAILS > section > ul > li[class]
{
    text-align: center;
    color: var(--color-white);
    font-size: 0.85rem;
    text-align: center;
}
.information_categories li
{
    padding: 5px;
}
.information_category_color1{border:1px var(--color-category1) solid !important;background-color: var(--color-category1);}
.information_category_color2{border:1px var(--color-category2) solid !important;background-color: var(--color-category2);}
.information_category_color3{border:1px var(--color-category3) solid !important;background-color: var(--color-category3);}
.information_category_color4{border:1px var(--color-category4) solid !important;background-color: var(--color-category4);}
.information_category_color5{border:1px var(--color-category5) solid !important;background-color: var(--color-category5);}

#INFORMATION_DETAILS > section > div > img
{
    width : 60%;
}
#SUPPLY
{
    overflow-x: auto;
    max-width: 720px;
}
#SUPPLY ul, #SUPPLY_LIST ul
{
    /*display: flex;
    flex-wrap: wrap;
    width: 900px;*/
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
#SUPPLY ul li, #SUPPLY_LIST ul li
{
    /*width: 200px;
    margin: 0px 20px 20px 0px;*/
    border: 1px var(--color-palegrayline) solid;
    padding: 20px;
}
#SUPPLY ul li div, #SUPPLY_LIST ul li div
{
    aspect-ratio: 1 / 1;
}
#SUPPLY ul li div img, #SUPPLY_LIST ul li div img
{
    object-fit: cover;
    height: 100%;
}
#SUPPLY ul li span::after, #SUPPLY_LIST ul li span::after
{
    content: "≫";
    float: right;
    color: var(--color-main);
}

/* aside */
aside img, aside iframe
{
    width: 100%;
    margin-bottom: 10px;
}
aside #MEPRIME > div
{
    display: grid;
    grid-template-columns: 25px 1fr 1.2fr 1fr;
    color: var(--color-white);
}
aside #MEPRIME > div > span:nth-last-of-type(1)
{
    text-align: right;
}
aside #MEPRIME > div > span:nth-of-type(3)
{
    font-size: 0.8rem;
}
aside #MEPRIME h3
{
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); 
	-webkit-background-clip: text;
    border-bottom: 1px #585858 solid;
    padding: 0px 0px 10px 0px;
}
aside #MEPRIME svg
{
    height: 23px;
    margin-left: -55px;
    position: relative;
    top: 4px;
}
aside #MEPRIME svg path
{
    fill: #DAAF08;
}
#COMPANY
{
    background-color: var(--color-lightblack);
    padding: 5px;
    margin-bottom: 20px;
}
#COMPANY
{
    padding: 20px;
    margin-bottom: 20px;
    color: var(--color-white);
    background-color: var(--color-dark);
    position: relative;
}
#COMPANY h3 > span
{
    float: right;
}
#COMPANY h3 > span > span
{
    border: 1px var(--color-white) solid;
    font-size: 0.75rem;
    padding: 0px 5px 3px 5px;
    margin-right: 5px;
    position: relative;
    top: -2px;
}
#COMPANY > div > img
{
    min-height: 230px;
    margin-bottom: 0px;
    object-fit: cover;
}
#COMPANY div
{
    position: relative;
    height: 230px;
    overflow: hidden;
}
#COMPANY img.next, #COMPANY img.before
{
    position: absolute;
    top: calc(50% - 20px);
    color: #ffffff;
    font-size: 2rem;
    font-family: "メイリオ";
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    z-index: 100;
    padding: 0px 5px 0px 5px;
    width: auto;
}
#COMPANY img.before
{
    left: 0px;
    transform: rotate(180deg)
}
#COMPANY img.next
{
    right: 0px;
}

/* AWARD_RANKING */
.award_rank_board > div > h3
{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    text-align: center;
    line-height: 0.95em;
    font-weight: bold;
    border-bottom: 1px #585858 solid;
    padding: 0px 0px 10px 0px;
    align-items: center;
    gap: 5px;
    font-size : 1.3rem;
}
aside .award_rank_board h3 img
{
    width : 30px;
    margin : 5px;
}
.award_rank_board > div > h3::before,
.award_rank_board > div > h3::after
{
    content : "";
    background-image : url(../img/award_leaf.png);
    background-size : 25px;
    height : 50px;
    width : 25px;
}
.award_rank_board > div > h3::before
{
    transform : scale(-1, 1);
}

section.award_rank_board:not(#MECLOUD) h3::after
{
    position : relative;
    width: 25px;
}
.award_rank_board > div p
{
    color : var(--color-dark);
    text-align : center;
    font-weight : bold;
}
.award_rank_board
{
    background: linear-gradient(to bottom, #434649, #164c81, #001b36);
    padding: 5px;
    margin-bottom: 20px;
}
.award_rank_board > div
{
    background-color : #ffffff;
    padding : 10px 5px 20px 5px;
    border-radius : 3px;
}
.award_rank
{
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap : 5px 8px;
  align-items: center;
  margin : 5px 15px 5px 5px;
}
.award_rank span
{
  font-size : 12px;
}
.award_rank > div
{
  display: contents;
}

/* 順位 */
.award_rank > div:nth-of-type(-n + 3) > span:nth-of-type(1)
{
    font-size: 0;
}
.award_rank > div:nth-of-type(-n + 3) > span:nth-of-type(1)::before
{  
    content : "";
    display : inline-block;
    background-size : 40px;
    width : 40px;
    height : 40px;
}
/* 1位 */
.award_rank > div:nth-of-type(1) > span:nth-of-type(1)::before
{
    background-image : url(../img/award_no_1.png);
}
/* 2位 */
.award_rank > div:nth-of-type(2) > span:nth-of-type(1)::before
{
    background-image : url(../img/award_no_2.png);
}
/* 3位 */
.award_rank > div:nth-of-type(3) > span:nth-of-type(1)::before
{
    background-image : url(../img/award_no_3.png);
}
.award_rank > div > span:nth-of-type(1)
{
    text-align : center;
}
.award_rank > div > span:nth-of-type(4)
{
    text-align : right;
}
/* 4位以降 */
.award_rank > div:nth-of-type(n + 4) > span:nth-of-type(1)
{
    background-color: #001b36;
    color: #ffffff; 
    font-size : 12px;
    width: 30px;  
    height: 30px;
    line-height: 30px;
    text-align: center; 
    border-radius: 50%;
    margin-left : 5px;
}


.banner_square
{
    width: 80px;
    height: 80px;
    display: grid;
    align-content: center;
    margin-right: 10px;
    border: 1px var(--color-palegrayline) solid;
    padding: 10px;
    background-color: #ffffff;
}
aside .banner_square img
{
    width: auto;
    margin-bottom: unset;
}
aside section:nth-of-type(4) > div
{
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    gap: 10px;
}

footer ul li
{
    color: var(--color-white);
}
footer ul
{
    display: grid;
}
footer ul:nth-of-type(1)
{
    justify-content: center;
    grid-template-columns: repeat(5, auto);
}
footer ul:nth-of-type(1) li
{
    text-align: center;
}
footer ul:nth-of-type(1) li::after
{
    content: "　/　";
}
footer ul:nth-of-type(1) li:nth-last-of-type(1)::after
{
    display: none;
}
footer > span
{
    display: block;
    padding: 50px 0px 0px 0px;
    text-align: center;
}

@media screen and (max-width :1200px)
{
    body > div, body > main section:not(:first-child)
    {
        width: calc(100% - 40px);
    }
}
/*@media screen and (max-width :768px)*/
@media screen and (max-width :900px)
{
    /* header */
    header
    {
        position: fixed;
        width: 100%;
        height: 80px;
        z-index: 1;
    }
    header > nav ul li
    {
        border: none;
    }
    #MENU_BUTTON
    {
		display: block;
		width: 65px;
		height: 80px;
		position: absolute;
		top: 0;
		right: 0;
		margin: auto;
		cursor: pointer;
		font-size: 10px;
		line-height: 1em;
		text-align: center;
		z-index: 1;
	}
	#MENU_BUTTON span
    {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 25px;
		height: 2px;
		background-color: var(--color-main);
	}
	#MENU_BUTTON span:nth-of-type(1)
    {
		top: calc((100% - 1.5em) / 2 - 8px);
	}
	#MENU_BUTTON span:nth-of-type(2)
    {
		top: calc((100% - 1.5em) / 2 + 0px);
	}
	#MENU_BUTTON span:nth-of-type(3)
    {
		top: calc((100% - 1.5em) / 2 + 8px);
	}
	#MENU_SWITCH:checked+#MENU_BUTTON::before
    {
		content: "";
		display: block;
		position: absolute;
		top : 80px;
		width: 100vw;
		right: 0;
		background-color: rgba(0,0,0,0.2);
		z-index: -1;
	}
	#MENU_SWITCH:checked+#MENU_BUTTON span:nth-of-type(1)
    {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#MENU_SWITCH:checked+#MENU_BUTTON span:nth-of-type(2)
    {
		opacity: 0;
	}
	#MENU_SWITCH:checked+#MENU_BUTTON span:nth-of-type(3)
    {
		-webkit-transform: translateY(-8px) rotate(45deg);
		transform: translateY(-8px) rotate(45deg);
	}
	#MENU_BUTTON .pc_hidden
    {
		display: inline;
		display: inline-block;
		margin-top : calc(100% - 1.5em);
	}
	#MENU_SWITCH + #MENU_BUTTON + ul,
    #MENU_SWITCH:checked+#MENU_BUTTON::before
    {
		height: calc(100vh - 80px);
    }
	#MENU_SWITCH + #MENU_BUTTON + ul
    {
		top : 80px;
		display: none;
	}
    #MENU_SWITCH:checked + #MENU_BUTTON + ul
    {
        display: block;
        position: absolute;
        z-index: 100;
        right: 0;
        width: 40%;
        margin: 0px;
        background-color: var(--color-white);
    }
    header > div
    {
        margin-right: 50px;
    }
    header ul a
    {
        display: block;
        width: 100%;
    }
    header ul a:hover
    {
        text-decoration: underline
    }

    /* main */
    body > div, body > main section:not(:first-child)
    {
        width: 90%;
    }
    body > div, body > main
    {
        display: block;
        margin-top: 80px;
    }
    #INFORMATION
    {
        max-height: 400px;
        overflow-y: auto;
        padding: 0px 10px 0px 0px;
    }
    aside img
    {
        margin-bottom: 0px;
    }
    aside section:nth-of-type(3)
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    aside section:nth-of-type(3) > a:nth-of-type(2)
    {
        background-color: #000000;
        height: 100%;
        display: grid;
        place-items: center;
    }
    #SUPPLY ul
    {
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        overflow-x: auto;
    }
    #SUPPLY ul li
    {
        width: 200px;
        margin: 0px 0px 20px 0px;
    }
    /* footer */
    footer ul {
        display: flex;
        flex-wrap: wrap;
    }
}
@media screen and (max-width :650px)
{
    header
    {
        padding: 10px;
        height: 70px;
    }
    #MENU_BUTTON
    {
        height: 70px;
    }
    #MENU_SWITCH + #MENU_BUTTON + ul, #MENU_SWITCH:checked+#MENU_BUTTON::before
    {
        height: calc(100vh - 70px);
    }
    #MENU_SWITCH:checked + #MENU_BUTTON + ul, #MENU_SWITCH:checked+#MENU_BUTTON::before
    {
        top : 70px;
    }
    #LOGO > span > span
    {
        font-size: 0px;
        color: var(--color-main);
    }
    #LOGO > span > span::before
    {
        content: "";
        display: block;
    }
    header > div:nth-of-type(1) > div:nth-of-type(1)
    {
        font-size: 1.3rem;
        line-height: 1.1rem;
    }
    /* main */
    body > div, body > main
    {
        margin-top: 70px;
    }
    #INFORMATION > div
    {
        grid-template-columns: 70px 1fr;
        gap: 0px 20px;
    }
    #INFORMATION > div > a
    {
        grid-column: 1 / 3;
    }
    #INFORMATION > div > span:nth-of-type(2)
    {
        width: 100px;
    }
}
@media screen and (max-width :500px)
{
    aside section:nth-of-type(3)
    {
        grid-template-columns: 1fr;
    }
}