@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;
}

.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: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; /*#ffcd8b49*/
}

.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;
	 }
}


/*-------------↓Swiper関係↓-------------------*/
#swiper_block{
	display: block;
	height: auto;
	background-color: #000000;
}

#swiper_inner{
	width:100%;
	height:100%;
}
.swiper{
	width: 100%;
}
.swiper-wrapper{
	width: 100%;
	height: 100%;
}

.swiper .swiper-pagination-bullet{/* ページネーションのサイズと色 */
	height: 10px;
	width: 10px;
	background-color: #ff9000; /*#0000ff*/
	outline: 1px solid #9e9e9e;
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
	/*height: 200px;
	width: 100px;
	top: 100px;*/
	height: 16vw;
	width: 8vw;
	/*　ボタンを中心にするための計算　calc(余白を抜いた画像幅/画像枚数*画像縦横比/2-ボタン縦幅の半分)*/
	margin-top: calc(100% / 3 * 0.36 / 2 - 12vw);
}

.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {/* 前へ次への矢印カスタマイズ */
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	margin: auto;
	width: 100%;
}

.swiper-button-prev::after {/* 前への矢印カスタマイズ */
	background-image: url(swiper/img/left_arrow.png);
	opacity: 0.5;
}

.swiper-button-next::after {/* 次への矢印カスタマイズ */
	background-image: url(swiper/img/right_arrow.png);
	opacity: 0.5;
}

.swiper-button-prev:hover:after {/* 前への矢印HOVERカスタマイズ */
	opacity: 1.0;
}
.swiper-button-next:hover:after {/* 次への矢印HOVERカスタマイズ */
	opacity: 1.0;
}

.swiper-slide{
	display: flex;
	justify-content: center; /* 左右の中央揃え */
}

.swiper-slide img {/* 画像サイズ調整 */
	align-self: center; /* 上下の中央揃え */
	max-height: 100%;
	max-width: 100%;
	width: auto;
/*	pointer-events: none;*/
}

.swiper-slide video {/* 動画サイズ調整 */
	align-self: center; /* 上下の中央揃え */
	max-height: 100%;
	max-width: 100%;
	width: auto;
}

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


@media screen and (max-width: 830px) {
	#topi_bt_container{
		width: 100%;
	}
	#main_inner{
		display: block;
	}
	#twitter_container{
		width: 100%;
	}
}

@media screen and (min-width: 831px) {
	#topi_bt_container{
		width: 70%;
	}
	
	#twitter_container{
		width: 30%;
	}
}

/*=====topics=====*/
#topics_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; /*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: 20px; /*10px*/
	height: 20px; /*30px*/
	margin-top: 9px; /*8px*/
	margin-right: 15px;
	margin-left: 10px;
	transform: rotate(45deg);
	background-color: #fea803;
}

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

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

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

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

.topics_headline{
	font-size: 1.2rem;
	padding-left: 2px;;
}

.topics_date{
	font-size: 0.9rem;
	color: #838383;
}

.topics_main{
	font-size: 0.9rem;
}

@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));
	}
}

#BNbutton_box{
	width: 100%;
	text-align: right;
}

#BNbutton{
	width: 130px;
	height: 30px;
	margin-right: 0;
 	margin-left: auto;
	background-color: #fea803;
	white-space:nowrap;
	/*box-shadow: 2px 4px 0	0#ff9000;*/
	color: #ffffff;
}

#BNbutton:hover{
	width: 130px;
	height: 30px;
	margin-right: 0;
 	margin-left: auto;
	background-color: #ffdd00;
	white-space:nowrap;
	/*box-shadow: 2px 4px 0	0#ff9000;*/
	color: #ffffff;
}

#BNbutton p{
	margin-top: 5px; /*7px*/
	margin-bottom: 5px;
	margin-right: 15px;  /*10px*/
	margin-left: 5px;
	/*font-family: 'Roboto', sans-serif;*/
}

#BNbutton a{
	padding-top: 0.5px;
	display: block;
}

/*押しボタン式*/
.BNbutton{
	width: 130px;
	height: 30px;
	margin-right: 0;
 	margin-left: auto;
	display: inline-block;
	padding-top: 0.3em;
	padding-left: 1em;
	padding-right: 1em;
	text-decoration: none;
	border-radius: 4px;
	color: #ffffff;
	background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	border-bottom: solid 3px #c58668;
	font-size: 1.0rem;
}

.BNbutton:active {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	border-bottom: none;
}

/*=====button=====*/
#button_container{
	width: 94%;
	margin-top: 40px;
	margin-bottom: 20px;
	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;
}

#button_title{
	width: 100%;
	padding-top: 15px;
	padding-bottom: 5px;
	letter-spacing: 2px;
	display: flex;
}

#button_tit_mark{
	width: 20px; /*10px*/
	height: 20px; /*30px*/
	margin-top: 9px; /*5px*/
	margin-right: 15px;
	margin-left: 10px;
	transform: rotate(45deg);
	background-color: #fea803;
}

#button_title h2{
	font-size: 2rem;
	font-weight: bold;
	/*font-family: 'Marcellus SC', serif;*/
	font-family: 'Roboto', sans-serif;
	color: #000000;
	padding-bottom: 30px;
}

#button_contents{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.button{
	width: 45%;
	margin-bottom: 3%;
	text-align: center;
	position: relative;
	overflow: visible;
}

.button a{
	display: block;
}

.top_button{
	margin-top: 10px;
	margin-bottom: 10px;
	width: 45%; /*300px*/
	height: auto;
	border: 2px solid; /*none*/
	border-color: #ffffff;
	border-radius: 10px;
	/*background: none;*/
	background-color: #ffdd00;
	cursor: pointer;
	position: relative;
}

.top_button:hover{
	margin-top: 10px;
	margin-bottom: 10px;
	width: 45%; /*300px*/
	height: auto;
	border: 2px solid; /*none*/
	border-color: #ffffff;
	border-radius: 10px;
	/*background: none;*/
	background-color: #ffdd00;
/*	background-image: url("img/TOP_01.png");*/
	cursor: pointer;
	position: relative;
	
	opacity: 0.7;  /*← 画像全体を薄く */
	
	background-size: contain;
}

.top_button img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	opacity: 1;  /*← 画像全体を薄く */
}

.button1:hover{
	background-image: url("img/TOP_01_B.png");
}

.button2:hover{
	background-image: url("img/TOP_02_B.png");
}

.button3:hover{
	background-image: url("img/TOP_03_B.png");
}

.button4:hover{
	background-image: url("img/TOP_04_B.png");
}

/*ボタンの背景を交換する時にフェードアウトするようにする*/
.top_button:hover img {
	opacity: 0;
	transition: 0.3s ease; /* フェードで自然に切り替える場合 */
}

/*.top_button:hover .button_text{
	display: none;
}*/

/*フェードアウト風に文字が消える*/
.top_button:hover .button_text{
	opacity: 0;
}

.ton_button span{
	position: absolute;
	font-size: min(3vw, 36px);
	font-weight: bold;
	text-shadow: 2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000;
	white-space: nowrap;
	color: #ffbb00;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*font-family: 'M PLUS 1 Code', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}


.button_content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*
.top_button2 img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	opacity: 1;  ← 画像全体を薄く 
}
*/

.button_text {
	/*position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffbb00;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 0 6px rgba(0,0,0,0.6);
	pointer-events: none;*/
	
	position: absolute;
	font-size: min(3vw, 36px);
	font-weight: bold;
	text-shadow: 2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000;
	white-space: nowrap;
	color: #ffbb00;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*font-family: 'M PLUS 1 Code', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}


.button_mv{
	width: 100%;
	height: auto;
	border-radius: min(3vw, 15px); /*36px*/
	border: 1vw solid #ff8800;
	box-shadow: inset 3px 3px 0px #fea803,
            	inset -3px -3px 0px #fea803;
}

.button p{
	position: absolute;
	font-size: min(3vw, 36px);
	font-weight: bold;
	text-shadow: 2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000;
	white-space: nowrap;
	color: #FFFFFF;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*font-family: 'M PLUS 1 Code', sans-serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
}

@media screen and (max-width: 830px) {
	.button p{	
		font-size: 4vw;
	}
}
@media screen and (min-width: 831px) {
}

@media screen and ( max-width: 575px ) {
	.top_button{
		width: 90%;
		height: auto;
		margin-bottom: 3%;
		border-radius: 10px;
		text-align: center;
		position: relative;
	}
	
	.top_button:hover{
		width: 90%; /*300px*/
		margin-bottom: 3%;
		height: auto;
		border: none;
		border-radius: 10px;
		/*background: none;*/
		background-color: #ffdd00;
		cursor: pointer;
		text-align: center;
		position: relative;
	}
	
	.button_text{
		position: absolute;
		font-size: max(8vw, 25.6px);
		font-weight: bold;
		text-shadow: 2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000;
		white-space: nowrap;
		color: #ffbb00;
		top: 50%;
		left: 50%;
		/*font-family: 'M PLUS 1 Code', sans-serif;*/
		font-family: 'Noto Sans Japanese', sans-serif;
		transform: translate(-50%, -50%);
	}
	
	.button{
		width: 90%;
		margin-bottom: 3%;
		text-align: center;
		position: relative;
	}
	.button_mv{
		border-radius: max(3vw, 15px); /*6vm, 19.2px*/
		border: max(2vw, 6.4px) solid #ff8800;
		box-shadow: inset 3px 3px 0px #fea803,
					inset -3px -3px 0px #fea803;
	}
	.button p{
		position: absolute;
		font-size: max(8vw, 25.6px);
		font-weight: bold;
		text-shadow: 2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000;
		white-space: nowrap;
		color: #FFFFFF;
		top: 50%;
		left: 50%;
		/*font-family: 'M PLUS 1 Code', sans-serif;*/
		font-family: 'Noto Sans Japanese', sans-serif;
		transform: translate(-50%, -50%);
	}
}

/*======twitter======*/
#twitter_container{
	padding-left: 1%;
	padding-right: 1%;
}

#twitter_box {
	width: 100%;
}

#twitter_box iframe {
	width: 100%;
	height: calc( 400px + calc(25vw * 1.5));
	min-height: 700px;
	max-height: 800px;
}
@media screen and (max-width: 830px) {
	#twitter_box iframe{
		height: 700px;
		min-height: 700px;
	}
	#twitter_container{
		padding-top: 25px;
		padding-bottom: 70px;
		padding-left: 10%;
		padding-right: 10%;
	}
	#twitter_box {
		width: 100%;
	}
}

/*======フッター関係======*/
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;
}
*/