/*-------------------------------------------------
  共通(PC・スマホ）
-------------------------------------------------*/

/*-------------------------------------------------
  PC（画面サイズ641px以上用）
-------------------------------------------------*/
@media all and (min-width:641px) {
	#contents {
		width:1024px;
		margin:0px auto;
		min-height:100%;
		background-color:#fff;
/*		border:1px solid #999;*/
		display:flex;
	}
	#contents .harf-box_menu {
		width:420px;
		z-index: 8;
		margin-bottom: 0;
		margin-right:30px;
/*		border-right:3px solid #f5f5f5;
		border:1px solid #999;*/
	}
	#contents .harf-box_menu  .menu{
		background-color:#fff;
		position: sticky;
		top:0px;
		left:0px;
		width:100%;
		margin:0px 0px 0px auto;
	}
	#contents .harf-box_menu .menu .main_menu {
		padding-top:15px;
		padding-bottom:5px;
		margin:0px 0px;
		display: flex;
/*		border-bottom:1px solid #cacaca;
		border:1px solid #999;*/
	}
	#contents .harf-box_menu .menu .main_menu .logo {
		width:32%;
		text-align:center;
	}
	#contents .harf-box_menu .menu .main_menu .menu_list {
		width:70%;
		margin:5px 0px 0px auto;
	}
	#contents .harf-box_menu .menu .main_menu .menu_list ul {
		width:100%;
		font-size:0;
/*		border:1px solid #999;*/
	}
	#contents .harf-box_menu .menu .main_menu .menu_list ul li {
		border-bottom:1px solid #eee;
		width:31%;
		margin:0% 1%; 
		padding:4px 0px 4px 0px;
		list-style: none;
		text-align:right;
		font-size:0.9rem;
		font-weight:bold;
		display: inline-block;
		vertical-align: top;
	}
	#contents .harf-box_menu .menu p.ca_title {
/*		font-weight:bold;*/
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
		margin-top:150px;
		font-size:1.8rem;
		text-align:center;
	}
	#contents .harf-box_menu .menu p.cn_title {
		font-weight:bold;
		font-size:3.2rem;
		text-align:center;
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
		margin-top:60px;
		margin-bottom:200px;
		/*border:1px solid #999;*/
	}
	#contents .harf-box_menu .menu ul.bottom_menu {
/*		width:100%;
		margin:0px 0px 20px 0px;
		font-size:0;*/
		width:400px;
/*		position: fixed;*/
		padding:0px;
		bottom:180px;
		height:80px;
		font-size:0;
/*		background-color:#828;*/
	}	
	#contents .harf-box_menu .menu ul.bottom_menu li {
		list-style: none;
		text-align:center;
		font-size:0.85rem;
		display: inline-block;
		width:33%;
		height:30px;
		font-weight:bold;
		vertical-align: middle;
		line-height:1.2em;
/*		border:1px solid #999;*/
	}	
	
	#contents .harf-box_menu #menu_footer_left {
/*		border:1px solid #999;*/
		width:465px;
		padding:0px;
		position: fixed;
		bottom:0;
		height:30px;
/*		background-color:#888;*/
		background: linear-gradient(to right, #fff, #888);
		text-align:right;
	}
	#contents .harf-box_content #menu_footer p {
		color:#eee;
		font-size:0.8rem;
		padding-top:10px;
		padding-right:10px;
	}	
	
	#contents .harf-box_content {
		width:560px;
		z-index: 8;
		margin-bottom: 0;
		margin-left: 14px;
/*		border-right:3px solid #f5f5f5;
		border:1px solid #999;*/
	}


	#contents .harf-box_content .detail{
		width:91%;
		min-height:85vh;
		display: flex;
		/*position: fixed;*/
    --bg-gradient: linear-gradient(#ccc 0 100%);
    margin: 1.5rem 0rem 1.5rem 0rem;
    padding: 1.5rem;
    background-image:
        var(--bg-gradient),
        var(--bg-gradient),
        var(--bg-gradient),
        var(--bg-gradient);
    background-repeat: no-repeat;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-position: left top 15px, right 15px top, left bottom 15px, left 15px top;

	}

	#contents .harf-box_content .detail .detail_cont{
		width:560px;
		padding:0px 30px;
		margin:10px 0px 20px 0px;
		/*height:100%;*/
		line-height:1.7em;
/*		border:1px solid #999;

		display: flex;
		justify-content: center;*/
		align-items: center;
	}


	#contents .harf-box_content #menu_footer {
/*		border:1px solid #999;*/
		width:560px;
		padding:0px;
		position: fixed;
		bottom:0;
		height:30px;
		background-color:#888;
		text-align:right;
	}
	#contents .harf-box_content #menu_footer p {
		color:#eee;
		font-size:0.8rem;
		padding-top:10px;
		padding-right:10px;
	}
	#contents .harf-box_content #menu_footer p a {
		color:#fff;
	}
	#contents .harf-box_content #menu_footer p a:hover {
		color:#333;
	}
}
/*-------------------------------------------------
 スマホ（画面サイズ640px以下用）
-------------------------------------------------*/
@media all and (max-width: 640px) {

	div#header .logo {
		vertical-align:top;
		display: inline-block;
		width:30%;
/*		border:1px solid #999;*/
	}


/** ハンバーガーメニュー関連 **/
	div#main_menu_mob {
		display:inline-block;
		vertical-align:top;
		text-align:right;
		padding:0px;
		width:68%;
/*		border:1px solid #999;*/
	}
	div#main_menu_mob div.menu-btn {
		display:inline-block;
		vertical-align:middle;
	}

	#contents {
		width:90%;
		margin:0px auto;
/*		background-color:#999;*/
	}

	#contents .harf-box_menu {
		width:100%;
	}
	#contents .harf-box_menu .menu {
/*		display: inline-block;*/
	}
	#contents .harf-box_menu .menu p.ca_title {
/*		font-weight:bold;*/
		display: inline-block;
		width:25%;
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
		margin-top:20px;
		font-size:1rem;
		text-align:right;
		vertical-align:top;
/*		border:1px solid #999;*/
	}
		#contents .harf-box_menu .menu p.ca_title:after{
		content:" > ";
	}
	#contents .harf-box_menu .menu p.cn_title {
		display: inline-block;
		width:70%;
		font-weight:bold;
		font-size:1.2rem;
/*		text-align:center;*/
/*		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;*/
		margin-top:16px;
		margin-bottom:10px;
		vertical-align:bottom;
/*		border:1px solid #999;*/
		line-height:1.2em;
	}

	#contents .harf-box_content ul.bottom_menu {
		width:80%;
		padding:0px;
		font-size:0;
		margin-bottom:40px;
		margin-left:30px;
/*		background-color:#828;*/
	}	
	#contents .harf-box_content ul.bottom_menu li {
		list-style: none;
		font-size:0.85rem;
		line-height:1.6em;
		border-bottom:1px dotted #555;
/*		border:1px solid #999;*/
	}	
	#contents .harf-box_content ul.bottom_menu li .arrow {
		color:#333;
		position:relative;
		padding-left:10px;
		margin-right:15px;
	}
	#contents .harf-box_content ul.bottom_menu li .arrow:before {
		position:absolute;
		content:'';
		width:0;
		heigt:0;
		border-top:solid 5px transparent;
		border-left:solid 7px #333;
		border-bottom:solid 5px transparent;
		top:50%;
		left:-5px;
		margin-top:-6px;
		}	

	
	
	#contents .harf-box_content {
		width:100%;
	}


	#contents .harf-box_content .detail{
	flex-direction: column-reverse;
/*		width:91%;
		min-height:85vh;*/
		display: flex;
		/*position: fixed;*/
    --bg-gradient: linear-gradient(#ccc 0 100%);
    margin: 1.5rem 0rem 1.5rem 0rem;
    padding: 1.5rem;
    background-image:
        var(--bg-gradient),
        var(--bg-gradient),
        var(--bg-gradient),
        var(--bg-gradient);
    background-repeat: no-repeat;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-position: left top 5px, right 5px top, left bottom 5px, left 5px top;

	}

	#contents .harf-box_content .detail .detail_cont{
/*		width:560px;*/
		padding:0px 0px;
		margin:10px 0px 20px 0px;
		/*height:100%;*/
		line-height:1.7em;
/*		border:1px solid #999;

		display: flex;
		justify-content: center;*/
		align-items: center;
	}


	#contents .harf-box_content #menu_footer {
/*		border:1px solid #999;*/
		width:105%;
		padding:0px;
		position: fixed;
		bottom:0;
		left:-5%;
		height:30px;
		background-color:#888;
		text-align:right;
	}
	#contents .harf-box_content #menu_footer p {
		color:#eee;
		font-size:0.8rem;
		padding-top:10px;
		padding-right:10px;
	}
	#contents .harf-box_content #menu_footer p a {
		color:#fff;
	}
	#contents .harf-box_content #menu_footer p a:hover {
		color:#333;
	}

}