@charset “utf-8”;
header {
	width: 100%;
	height: 70px;
	background-color: #FFFFFF;
	position: fixed;
	z-index: 100;
}
.h-contents {
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	position: relative;
	box-shadow: 0px 1px 3px #ccc;
}
.h-contents .header-logo img {
    z-index: 110;
	width: 180px;
	margin-top: 20px;
}
.h-contents .header-logo-naga img {
    z-index: 110;
	width: 200px;
}
@media screen and (max-width: 480px) {
	.h-contents .header-logo img {
		width: 150px;
	}
	.h-contents .header-logo-naga img {
		width: 150px;
	}
}
/*TANOM ROOM*/
header.tr-header {
	position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
	width: 65px;
}
.h-contents-room {
	width: 65px;
    height: 70px;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    position: relative;
    box-shadow: 0px 1px 3px #ccc;
}
.h-contents .header-logo img.tr-logo {
	width: 180px;
    margin-top: 5px;
}
.h-contents-room .drawer_open {
	right: 33px;
}


body {
	width: 100%;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 0.9rem;
	color: #333333;
	line-height: 1.5;
}

/*SECTION*/

.sec-contents {
	width: 1000px;
	margin: 0 auto;
	padding: 70px 0;
}
.sec-title {
	margin-bottom: 70px;
}
@media screen and (max-width: 480px) {
	.sec-contents {
		width: 90%;
		margin: 0 auto;
	}
	.sec-title {
		margin-bottom: 30px;
	}
	.sec-title img {
		height: 50px;
		object-fit: cover;
	}
}

/*COMMON*/
.text-center {
	text-align: center;
}
.dsp-flex {
	display: flex;
}
.jc-sb {
	justify-content: space-between;
}


/* ハンバーガーメニュー*/
  
/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 40px;
    z-index: 210;/* 重なり順を一番上にする */
    cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 30px;
    border-radius: 3px;
    background: #333;
    transition: 0.5s;
    position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
    bottom: 10px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
    top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
	background: #fff;
}

#drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
	background: #fff;
}
  
/* メニューのデザイン*/
.nav_content {
    width: 30%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 200;
    background: rgb(110, 110, 110);
    transition: .5s;
    text-align: left;
    padding-top: 20px;
	padding-left: 20px;
}

.nav_list {
    list-style: none;
}
.nav_list li {
	padding: 10px 0;
}

.nav_item a {
    color: #fff;
    text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
    left: 70%;
}

@media screen and (max-width: 480px) {
	.nav_content {
		width: 100%;}
	#drawer_input:checked ~ .nav_content {
		left: 0;
	}
}