@charset "utf-8";
/*font*/
/*
font-family: 'Varela Round', sans-serif;
font-family: 'Bellota', cursive;
font-family: 'BIZ UDGothic', sans-serif;
font-family: 'M PLUS 1 Code', sans-serif;
*/
/*ALL*/
html{
	width: 100%;
}

body{
	/*グリッドデザイン*/
	/*width: 100%;
	background-color: #ffffff;
	background-image: repeating-linear-gradient( 0deg, #ffffff00, #ffffff00 30px, #fffaea 30px, #fffaea 32px),
	repeating-linear-gradient( 90deg, #ffffff00, #ffffff00 30px, #fffaea 30px, #fffaea 32px);*/
	
	/*水玉デザイン*/
	width: 100%;
    background-color: #f0f0f0; /*#ffffff*/
    background-image: radial-gradient(#eaeaea 2px, transparent 3px);
    background-size: 20px 20px;
}

/*フッター下部固定用調整*/
body{
	display:flex;
	 flex-direction:column;
	min-height: 100vh;
}
#main_block{
		flex: 1;
}


.inner{
	width: 100%;
	min-width: 320px;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	display: flex;
}

a{
	width: 100%;
	height: 100%;
}

/*---------------↓header関係↓--------------*/
header{
	display: block;
	height: 80px;
	background-color: #ff9000;
}

#logo_container{
	height: 100%;
	width: 30%;
	padding-left: max(min(100px, calc(5% - 20px)), 5px);
	display: flex;
	align-items: center;
}

#h_nav{
	display: flex;
	align-items: center;
	width: 70%;
}


#LOGO{
	height: 70px;
	position: relative;
	z-index: 101;
}

.menu{
	width: 100%;
	display: flex;
	margin-top: 3px;
	justify-content: right;
}

.h_top_li{
	color: #ffffff;
	white-space: nowrap;
	font-size: 1.0rem;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}



#contact_li{
	margin-left: 15px;
	margin-right: 15px;
}

#contact_box{
	margin-top: 9px;
}

#contact{
	background-color: #ffffff;
	border-radius: 20px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #ff9000;
	white-space: nowrap;
	font-weight: bold;
	box-shadow: 0 3px 0 0 #ad7758;
	font-size: 1rem;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#contact:hover{
	color: #ff9100a8;
}


/*---------------プルダウン用-----------------*/
.menu {
	list-style-type:none;
}
.menu > li:not(:last-child) {
	display:inline-block;
	position:relative;
}
.menu > li > ul {
	display:none;
}

.menu p{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.h_top_li:nth-child(3){
	margin-right: 13px;
}

.h_top_li:nth-child(2){
	margin-right: -5px;
}
.h_top_li:nth-child(1){
	margin-right: -25px;
}


.h_top_li:nth-child( -n + 2 ) p{
	padding-left: 30px;
	padding-right: 30px;
}

/* .h_top_li:nth-child( -n + 2 ):hover{
	border-radius: 20px 20px 0px 0px;
	background-color: #ff9f23;
} */


.h_top_li:hover ul {
	display:block;
	position:absolute; 
	padding-top: 21px; /*30px*/
	z-index: 49;
	top: 2.3em;
	list-style-type:none;
	background-color: #ff9000;
}

.child_li a{
	display: block;
}

.child_li:hover{
	background-color: #ffbb00;
}

.htop_p::after {
	background-color: #ff9000; /* 線の色 */
	border-radius: 5px; /* 線の両端を丸く */
	bottom: 0px; /* 線の位置 */
	content: "";
	height: 3px; /* 線の高さ */
	left: 50%; /* 線の中央寄せ */
	position: absolute;
	transform: translateX(-50%); /* 線の中央寄せ */
	width: 30px; /* 線の長さ */
}

.htop_p:hover::after {
	background-color: #ffffff; /* 線の色 */
	border-radius: 5px; /* 線の両端を丸く */
	bottom: 0px; /* 線の位置 */
	content: "";
	height: 3px; /* 線の高さ */
	left: 50%; /* 線の中央寄せ */
	position: absolute;
	z-index: 50;
	transform: translateX(-50%); /* 線の中央寄せ */
	width: 30px; /* 線の長さ */
}

/*------------共通メニュー設定項-----------*/
@media screen and (max-width: 830px) {
	#h_nav{
		display: none;
	}
}

@media screen and (min-width: 831px) {
	#hamburger_box{
		display: none;
	}
}

/*---------------ハンバーガーメニュー-----------------*/
#hamburger_box{
	justify-content: right;
	margin-left: calc( calc( 100% - 80px ) - 30%);
}

/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
}
  
  /* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	height: 80px;
	width: 80px; 
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
}
  
  /* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 4px; /*6px*/
	width: 30px; /*50px*/
	border-radius: 3px;
	background: #ffffff;
	transition: 0.5s;
	position: absolute;
}
  
  /* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 15px;
}
  
  /* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 15px;
}
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
#hamburger_checkbox:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

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

  /* メニューのデザイン*/
.nav_content {
	width: 100%;
	min-width: 320px;
	height: 100%;
	position: fixed;
	top: calc(-100% - 800px);
	left: 0; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #fff;
	transition: .5s;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
@media screen and (max-width: 830px) {
	.fixed {
		width: 100%;
		height: 100%;
		position: fixed;
	}
}

@media screen and (min-width: 831px) {
	.fixed {
		width: 100%;
	}
}


  
/* アイコンがクリックされたらメニューを表示 */
#hamburger_checkbox:checked ~ .nav_content {
	top: 0;/* メニューを画面に入れる */
}

/*ハンバーガーメニュー用アコーディオンメニュー*/
.nav_content{
	background-color: #ff9100e7;
}
.aco_sum{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 30px;
	margin-right: 30px;
	font-size: 1.3rem; /*2.0rem*/
	user-select: none;
	cursor: pointer;
	list-style: none;
	display: flex;
	white-space: nowrap;
}
.aco_sum p{
	height: 100%;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}
.aco_sum:hover{
	background-color: #ffffff36;
}
details{
	list-style: none;
}
summary {
	list-style: none;
}
summary::-webkit-details-marker {/*これでsafari版のリストスタイル消えてくれるか？*/
	display: none;
}

.nav_content summary::after{
	margin: 0 auto;
	content: url(../img/plus2.png);
	width: 30px;
	height: 30px;
	margin-left: max(5px, calc(100vw - 230px));
	display: inline-block;
}
.nav_content details[open] summary::after{
	content: url(../img/minus2.png);
	margin-left: max(5px, calc(100vw - 230px));
}

.aco_li{
	font-size: 1.1rem; /*1.5rem*/
	color: #ffffff;
	padding-top:5px;
	padding-bottom:5px;
	padding-left: 40px;
	user-select: none;
	white-space: nowrap;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}
.aco_li:hover{
	background-color: #ffbb00; /*ffffff36*/
}

#det_1{
	margin-top: 100px;
}

.aco_sum{
	border-top: 2px solid #ffffff;
	color: #ffffff;
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

#last_sum{
	border-bottom: 2px solid #ffffff;
	margin-bottom: 30px;
	font-size: 1.3rem; /*2.0rem*/
}

#det_1,
#det_2{
	height: 60px; /*70px*/
	transition: .6s;
}
#det_1[open] {
	height: 220px;
}
#det_2[open]{
	height: 145px;
}
details{
	overflow: hidden;
}

@keyframes fadeIn {
	0% {
	  opacity: 0;
	  transform: translateY(-10px);
	}
	100% {
	  opacity: 1;
	  transform: none;
	 }
}


/*-------------↓メイン関係↓-------------------*/
#main_block{
	padding-top: 50px;
	padding-bottom: 50px;
	display: block;

}


@media screen and (max-width: 830px) {
	#backnumber_container{
		width: 100%;
	}
}

@media screen and (min-width: 831px) {
	#backnumber_container{
		width: 100%;
	}
}

#backnumber_box{
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	border-radius: 10px; /*25px*/
	padding: 2%;
	border: 2px solid #aeaeae;
	/*box-shadow: 5px 10px 0	0#ff9000;*/
	background-color: white;
}

#topics_title{
	width: 100%;
	margin-bottom: 10px;
	display: flex;
}

#topics_title h1{
	font-size: 2rem;
	font-weight: bold;
	/*font-family: 'Marcellus SC', serif;*/
	font-family: 'Roboto', sans-serif;
	color: #000000;
}

#topi_tit_mark{
	width: 30px; /*10px*/
	height: 30px;
	margin-top: 4px; /*8px*/
	margin-right: 15px;
	margin-left: 10px;
	border-radius: 50%;
	background-color: #fea803;
}

#topics_content{
	width: 98%;
	background: #ffffff;
	padding: 1%;
	
}

/* #topics1{
	padding-bottom: 15px;
	border-bottom: 2px #838383 dotted;
}

#topics2{
	padding-top: 10px;
	padding-bottom: 15px;
} */

.topics dd{
	/*font-family: 'M PLUS Rounded 1c', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: bold;
}

.topics{
	border-bottom: 2px #838383 dotted;
}

#bottom_topics{
	border-bottom: none;
}

.topics_date{
	padding-top: 15px;
	font-size: 0.9rem;
	color: #838383;
}

.topics_main{
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 0.9rem;
}

/*@media screen and ( max-width: 830px ) {*/
	@media screen and ( max-width: 575px ) {
	.topics_date{
		display: block;
	}
	.topics_main{
		display: block;
	}
	
}

@media screen and ( min-width: 576px ) {
	.topics{
	display: flex;
	}
	.topics_date{
		font-size: 0.9rem;
		width: min(20%,125px);

	}
	.topics_main{
		width: calc(100% - min(20%,125px));
	}
}

#backbutton_box{
	width: 100%;
	padding-top: 40px;
	padding-bottom: 20px;
	/*text-align: center;*/
}

/*#backbutton{
	width: 100px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 40px;
	background-color: #ff9000;
	border-radius: 8px; 20px
}*/

.backbutton{
	width: 50px; /*110px*/
	height: 50px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 3%;
	
	display: inline-block;
	padding: 0.4em 0.4em; /*0.3em 1em*/
	text-decoration: none;
	color: #ffbb00;
	border: solid 2px #ffbb00;
	border-radius: 50%; /*8px*/
	transition: .4s;
	
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem; /*1.2rem*/
	font-weight: bold;
}

.backbutton:hover{
	/*background-color: #fea803;*/
	background: #ffbb00;
	color: #ffffff;
}

/*#backbutton:hover{
	background-color: #fea803;
}*/

/*#backbutton p{
	font-family: 'Marcellus SC', serif;
	font-family: 'Roboto', sans-serif;
	color: white;
	font-size: 1.5rem;
}*/

/*======フッター関係======*/
footer{
	display: block;
	background-color: #ff9000;
}

#footer_inner{

	padding-top: 20px;
	padding-bottom: 20px;
}

#footer_contents{
	margin: 0 auto;
}

#footer_contents #company_name{
	margin: 5px;
	font-size: 1.5rem;
	font-weight: bold;
	white-space: nowrap;
}

#footer_contents p{
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
	text-align: center;
	color: #ffffff;
}

/*---------------↓デバック用↓-----------------*/
/*全体ゾーン確認用枠
*:not(html){
outline: 2px solid red ;outline-offset: -2px;
}
/**/

/*個別ゾーン確認用枠
#twitter_container{
outline: 5px solid #000000; ;outline-offset: -2px;;
}
/**/

/*個別ゾーン確認用カラー
.inner{
background: #000000;
}
*/