@charset "utf-8";

/* menu 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */

/* メニュー全体のスタイル */
.global_menu { width: 100%; position: relative; }
.global_menu li { display: inline-block; }
 
/* 各項目のスタイル */
.global_menu a {  display: block; color: #111; }
 
.menu:hover > a { background: #F2FAFF; opacity: 0.6; }



/* 子項目のスタイル */
.child_menu > li > a { color: #111; }
.child_menu > li > a:hover { opacity: 0.6; }
 
.child_menu { /* 下層メニューのスタイル */
width: 100%;
max-width: 1200px;
position: absolute;
top: 100%; /* 親項目の直下に配置 */
left: 0;
padding: 30px 0;
color: #111; /* 文字色 */
background: #F2FAFF; /* 背景色 */
visibility: hidden; /* 下層メニューを非表示 */
height: 0;	
opacity: 0; /* 不透明度を最小に */
transition: 0.5s opacity; /* アニメーション設定 */
}

.child_menu li { width: 19%; margin-left: 1%; }
.child_menu li:last-child { margin-right: 1%; }



/* 下層メニューのスタイル（親項目ホバー時） */
.menu:hover .child_menu { 
visibility: visible; /* 下層メニューを表示 */
display: flex;
align-items: center;
height: 120px;	
opacity: 1; /* 不透明度を最大に */
}

/* スマホ閲覧時のハンバーガーメニュー　チェックボックスを非表示 */
#hanburger { display: none; }



.mb_title { display: none; }

.mb_box { display: flex; align-items: flex-end; justify-content: space-between; }

.pc_title { padding: 5px 30px; }

.line_l { border-left: 1px solid #111; }
.line_r { border-right: 1px solid #111; }

.phot { display: flex; align-items: center; }
.phot img:nth-child(1) { margin-right: 10px; }
.phot img:nth-child(2) { margin-right: 5px; }

.text { display: flex; align-items: center; }
.text img { margin-right: 5px; }



@media screen and (max-width: 1000px) {

/* ボタンのスタイル */
.menu_button { 
width: 50px;
height: 50px;
position: fixed;
top: 20px;
right: 20px;
background: #fff;
z-index: 9999;
}

/* アイコンのスタイル　アイコン「３本線」 */
.menu_button::before { 
content: url(../images/menu/menu_01.svg);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
}

.menu_button:hover { cursor: pointer; }

/* アイコンのスタイル（チェック済み）アイコン「×印」 */
#hanburger:checked + .menu_button::before { 
content: url(../images/menu/menu_02.svg);
width: 50px;
height: 50px;
}

/* メニュー全体のスタイル　メニューを非表示 */
.global_menu { 
visibility: hidden;
opacity: 0;
transition : all 0.5s;
width: 100%;
max-width: 1000px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
color: #111;
background: #F2FAFF;
overflow-y: scroll;
text-align: center;
z-index: 999;
}

/* メニュー全体のスタイル（チェック済）メニューを表示 */
#hanburger:checked ~ .global_menu { visibility: visible; opacity: 1;}

/* メニュー全体のスタイル */
.global_menu { display: block; margin-top: 0; }
.global_menu li { display: block; }
    
.menu:hover > a { background: #0066CC!important; }


	
.child_menu_mb li {
width: 100%;
max-width: 350px;
margin: 0 auto 15px auto;
padding-bottom: 15px;
border-bottom: 1px solid #111;
}
.child_menu_mb li:last-child {
margin: 0 auto 30px auto;
}	

.mb_box {
display: block;
height: 100vh;
margin-top: 80px;
padding: 0 15px;
}
	
.mb_box .top {
display: block;
max-width: 350px;
margin: 0 auto 30px auto;
}

.pc_title {
width: 100%;
max-width: 350px;
font-size: 24px;
line-height: 2.5em;
margin: 0 auto 20px auto;
padding: 0;
text-align: center;
color: #fff!important;
background: #0066CC;
border-radius: 30px;
}

.mb_title { display: block; margin-bottom: 15px; }
.mb_title a {
display: flex;
text-align: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.mb_title img { width: 20px; margin-right: 10px; }

.line_l { border: none; }
.line_r { border: none; }

.phot { font-size: 16px; }
.text { font-size: 16px; line-height: 2em; }
}





/* 折りたたみメニュー 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
.mb_menu { display: none; }

@media screen and (max-width: 1000px) {
.pc_menu { display: none; }	

.mb_menu { display: block; }

.mb_menu input { display: none; }

.mb_menu input {
position: absolute;
z-index: -1;
opacity: 0;
}

.mb_menu label {
display: block;
width: 100%;
max-width: 350px;
font-size: 24px;
line-height: 2.5em;
margin: 0 auto 20px auto;
padding: 0;
text-align: center;
color: #fff!important;
background: #0066CC;
border-radius: 30px;
}

.mb_menu label:hover { cursor: pointer; }

.mb_menu .mb_menu-content {
overflow: hidden;
max-height: 0;
opacity: 0;
}

.mb_menu input:checked ~ .mb_menu-content {
max-height: 100%;
padding: 5px;
opacity: 1;
}
}