@charset "utf-8";

/*
header
*/

header {
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	z-index: 100;
	}
@media screen and (max-width: 900px) {
header {
	height: 54px;
	border-bottom: 4px solid #A72D2A;
	}
	}

header #head {
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
	}
@media screen and (max-width: 900px) {
header #head {
	height: 50px;
	border-bottom: 1px solid #ccc;
	}
	}

header #head .title{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 10px;
	}
@media screen and (max-width: 900px) {
header #head .title{
	height: 70%;
	}
	}

header #head .title img{
	width: 40vw;
	max-width: 600px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	}
@media screen and (max-width: 900px) {
header #head .title img{
	width: 50vw;
	min-width: 200px;
	}
	}

header #head .buttons{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 20px;
	}
@media screen and (max-width: 900px) {
header #head .buttons{
	padding-right: 65px;
	}
	}

header #head .buttons .mypage{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	height: 35px;
	}
@media screen and (max-width: 900px) {
header #head .buttons .mypage{
	margin-right: 0;
	height: 30px;
	}
	}

header #head .buttons .mypage a{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	width: 100%;
	height: 100%;
	background:#A72D2A;
	border-radius: 9999px;
	-webkit-border-radius: 9999px;
	-moz-border-radius: 9999px;
	}
@media screen and (max-width: 900px) {
header #head .buttons .mypage a{
	padding: 0 10px;
	}
	}

header #head .buttons .mypage a:hover{
	background:#8D1916;
	}

header #head .buttons .mypage a p{
	color: #fff;
	padding-left: 30px;
	line-height: 35px;
	background-position: left center;
	background-repeat: no-repeat;
	background-image: url(../images/mypage.svg);
	background-size: 18px;
	}
@media screen and (max-width: 900px) {
header #head .buttons .mypage a p{
	color: #fff;
	font-weight: 700;
	padding-left: 15px;
	line-height: 20px;
	background-size: 10px;
	font-size: 10px;
	}
	}

header #head .buttons .sns{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 5px;
	padding-right: 20px;
	}
@media screen and (max-width: 900px) {
header #head .buttons .sns{
	display: none;
	}
	}

header #head .buttons .lang{
	display: flex;
	align-items: center;
	justify-content: center;
	}
@media screen and (max-width: 900px) {
header #head .buttons .lang{
	display: none;
	}
	}

header #head .buttons .lang a{
	color: #ccc;
	}

header #head .buttons .lang a:hover{
	color: #000;
	}

.langJP header #head .buttons .lang a.jp{
	color: #000;
	font-weight: 700;
	}

.langEN header #head .buttons .lang a.en{
	color: #000;
	font-weight: 700;
	}


/*
navi
*/


#navi {
	height: 50px;
	width: 100%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
@media screen and (max-width: 900px) {
#navi {
	border-top: none;
	margin-top: -50px;
	}
	}

/* チェックボックスを非表示 */
#navi input {
	display: none;
	}

/* 上部メニュー */
#menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
	height: 50px;
	}

#menu li {
	position: relative;
	white-space: nowrap;
	height: 100%;
	}

#menu li a {
	display: block;
	height: 100%;
	}

#menu > li{
	border-right: 1px solid #ccc;
	border-bottom: 4px solid #A72D2A;
	}

#menu > li.nav-media{
	border-right: none;
	}

#menu > li,
#menu > li label span{
	text-align: center;
	font-size: 14px;
	line-height: 1.3em;
	font-weight: 500;
	width: 12.5%;
	}
.langEN #menu > li{
	width: 16.66%;
	}
@media screen and (max-width: 900px) {
#menu > li,
#menu > li label span{
	font-size: 1em;
	}
	}

#menu > li a,
#menu > li label span{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 4px;
	}

/* パソコンでは V を非表示 */
#menu > li .pd {
	display: none;
	}

#menu-navibtn {
	display: none;
	cursor: pointer;
	cursor: hand;
	}





/* スマホ用 */
@media screen and (max-width: 900px) {
/* 基本非表示 */
#menu {
	display: none;
	}
#menu li {
	height: auto;
	width: 100%;
	/*padding: 0px 20px;*/
	border-bottom: 1px solid #DDD;
	white-space: nowrap;
	}
.langEN #menu li{
	width: 100%;
	}
#menu > li {
	margin-right: -20px;
	border-right: none;
	}
/* V を表示 */
#menu > li .pd {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 12px;
        right: 10px;
	}
#menu li a {
	display: inline-block;
	}
#menu li:first-child {
	/*border-top: 1px solid #DDD;*/
	}
#menu li i {
	padding: 0px 6px;
	}
/* メニューを移動させないため */
#menu-navibtn:checked ~ #navi {
	position: fixed;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
	margin-top: 4px;
	background: #fff;
	}
#menu > li a,
#menu > li label span{
	height: 40px;
	padding-bottom: 0;
	display: flex;
	line-height: 1.3em;
	}
	}


  /* 固定ボタンはビューポート基準で最前面に */
  #navibtn{
    display:none;
  }

/* スマホ用 */
@media screen and (max-width: 900px) {

  /* 固定ボタンはビューポート基準で最前面に */
  #navibtn{
    display:block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001; /* headerより上に */
    cursor: pointer;
  }

  /* メニューは画面を覆うスクロール領域 */
  #menu-navibtn:checked ~ #navi{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; /* ＝ height:100% 相当 */
    overflow-y: auto;
    background: #fff;
  }

  /* もしヘッダーを常時表示したいなら top を 54px に */
  #menu-navibtn:checked ~ #navi{ top:50px; } 
	}





/* ドロップダウンメニュー */
#menu li ul {
	position: relative;
	}

/* 子メニュー */
#menu > li > ul li {
	font-size: 13px;
	display: none;
	padding: 0px 0px;
	background-color: #FFF;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #ededed;
	}

#menu li ul li:first-child {
	border-top: 1px solid #ccc;
	}

#menu li ul li:last-child {
	border-bottom: 1px solid #ccc;
	}

#menu li ul li ul {
	top: -1px;
	left: 100%;
	}

#menu li ul li ul li ul,
#menu li:nth-child(n+3) ul li ul {
	left: inherit;
	right: 100%;
	}

#menu > li > ul {
	margin-left: -60px;
	margin-right: -60px;
	width: auto;
	}
@media screen and (max-width: 900px) {
#menu > li > ul {
	margin-left: 0;
	margin-right: 0;
	}
	}

#menu > li.nav-media > ul {
	margin-left: -120px;
	margin-right: 0;
	width: auto;
	}
@media screen and (max-width: 900px) {
#menu > li.nav-media > ul {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	}
	}

@media screen and (min-width: 901px) {
#menu li:hover {
	background: #A72D2A;
	color:#fff;
	}
	}

/* パソコン用 */
@media screen and (min-width: 901px) {
#menu > li:hover > ul > li,
#menu li ul li:hover > ul > li {
	display: block;
	}
/* 階層がある場合の誘導の印 */
#menu li ul li ul:before,
#menu li ul li ul li ul:before,
#menu li:nth-child(n+3) ul li ul:before {
	position: absolute;
	top: 28px;
	content: "";
	border: 5px solid transparent;
	display: block;
	}
/* 通常タイプ */
#menu li ul li ul:before {
	left: -10px;
	border-left-color: #666;
	}
/* 右側タイプ */
#menu li ul li ul li ul:before,
#menu li:nth-child(n+3) ul li ul:before {
	right: -10px;
	border-right-color: #666;
	}
	}

/* スマホ用 */
@media screen and (max-width: 900px) {
/* ハンバーガーメニューがクリックされた時 */
#menu-navibtn:checked ~ * #menu {
	display: block;
	width: 100%;
	}
#menu-navibtn:checked ~ * #menu > li {
	max-height: inherit;
	overflow-y: visible;
	}
#menu > li ul {
	line-height: 50px;
	}
#menu > li > label:hover {
	cursor: pointer;
	/*cursor: hand;*/
	}
#menu li ul {
	position: static;
	}
/* 子メニュー */
#menu > li > ul {
	margin-left: initial;
	position: relative;
	}
#menu li ul li:first-child {
	border-top: 1px solid #DDD;
	}
#menu ul li:last-child {
	border-bottom: none;
	}
#menu > li > ul li {
	border-left: none;
	border-right: none;
	background-color: #ededed;
	}
#menu li ul li ul {
	top: inherit;
	left: 0;
	}
#menu li ul li:last-child {
	border-bottom: none;
	}
/* 子メニューがクリックされた時 */
#menu input[type="checkbox"]:checked ~ label ~ ul > li {
	max-height: inherit;
	overflow-y: visible;
	display: block;
	}
.angletoggle:before {
	content: "\f107";
	}
#navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before {
	content: "\f106";
	}
	}

#menu > li a:hover{
	color:#fff;
	}

/* ハンバーガー */
#navi #navibtn {
	display: none;
	}
@media screen and (max-width: 900px) {
#navi #navibtn {
	display: block;
 position: fixed; top:0; right:0; z-index:1001; cursor:pointer; }
#navibtn > span{ position: relative; display:block; width:50px; height:50px; background:#000; }

/* 隠しテキスト（そのまま） */
#navibtn > span > span{ display:block; overflow:hidden; width:1px; height:1px; }

/* ── 3本線（付け先を変更） ── */
/* 上：span::before／中：span::after／下：label::after */
#navibtn > span::before,      /* 上 */
#navibtn > span::after,       /* 中 */
#navibtn::after {             /* 下（従来どおり label に） */
  content:"";
  position:absolute;
  left:14px;
  width:24px;
  height:1px;
  background:#fff;
  transition: transform .2s ease, top .2s ease, bottom .2s ease, opacity .2s ease;
}

/* 通常時の位置 */
#navibtn > span::before { top:18px; }   /* 上 */
#navibtn > span::after  { top:25px; }   /* 中 */
#navibtn::after         { bottom:17px; }/* 下 */

/* チェック時の変形（×にする） */
#menu-navibtn:checked ~ #navibtn > span::before {
  top:25px;
  transform: rotate(-45deg);
}
#menu-navibtn:checked ~ #navibtn::after {
  bottom:24px;
  transform: rotate(-135deg);
}
#menu-navibtn:checked ~ #navibtn > span::after {
  opacity:0; /* 中央線を消す */
}
	}

#menu > li.spnavi {
	border-bottom: none;
	}

#menu > li.spnavi:hover {
	background:#fff;
	}

#navi .spnavi{
	display:none;
	}
@media screen and (max-width: 900px) {
#navi .spnavi{
	display:block;
	padding: 30px 0 85px;
	}
	}

#navi .spnavi .buttons{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	}

#navi .spnavi .buttons .sns{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 5px;
	padding-right: 20px;
	}

#navi .spnavi .buttons .lang{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	}

#navi .spnavi .buttons .lang a{
	color: #ccc;
	}

#navi .spnavi .buttons .lang a:hover{
	color: #000;
	}

.langJP #navi .spnavi .buttons .lang a.jp{
	color: #000;
	font-weight: 700;
	}

.langEN #navi .spnavi .buttons .lang a.en{
	color: #000;
	font-weight: 700;
	}


/*
ステイ
*/


@media screen and (min-width: 901px) {
body.pageNEWS nav ul li.pageNEWS a{
	background: #A72D2A;
	color:#fff;
	}
body.pageABOUT nav ul li.pageABOUT label span:first-child{
	background: #A72D2A;
	color:#fff;
	}
body.pageRUNNER nav ul li.pageRUNNER label span:first-child{
	background: #A72D2A;
	color:#fff;
	}
body.pageEVENT nav ul li.pageEVENT label span:first-child{
	background: #A72D2A;
	color:#fff;
	}
body.pageCHARITY nav ul li.pageCHARITY a{
	background: #A72D2A;
	color:#fff;
	}
body.pageMEDIA nav ul li.pageMEDIA label span:first-child{
	background: #A72D2A;
	color:#fff;
	}
body.pageINTERVIEW nav ul li.pageINTERVIEW a{
	background: #A72D2A;
	color:#fff;
	}
	}
body.pageVOLUNTEER nav ul li.pageVOLUNTEER a{
	background: #A72D2A;
	color:#fff;
	}