/*-------------------------------
タブレット用　(画面サイズが768pxまで適用)
--------------------------------*/
/******************************************************
ヘッダー
*******************************************************/
header {
	height: 80px;
	/*padding: 0px 1rem;*/
}

/* ロゴとメニュー */
.logo img {
	max-height: 50px;
}

/* メニューリスト */
.menu-content {
	width: 80%;
}

/* ヘッダーとコンテンツの被り防止 */
main {
	/*margin-top: 80px;*/
	margin-top: 2rem;
}

/******************************************************
フッター
*******************************************************/

footer {
	padding: 3rem 1rem 1rem 1rem;
}

footer nav {
	width: 100%;
}

/******************************************************
トップページ --　　背景動画(#home)
*******************************************************/
.top-lead {
	width: 70%;
	top: 30%;
	left:40%;
	/*bottom: -5%;*/
}
.top-title {
	width: 80%;
	/*top: 55%;*/
	bottom: -5%;
}

/******************************************************
トップページ (#home)
*******************************************************/
/* ヘッダーとコンテンツの被り防止 */
#home {
	width: 100%;
	margin-top: 80px;
}

#home .contents {
	max-width: 85%;
}



/*インタビュー・動画コーナー(#interview・#movie)*/
#home #interview .left,
#home #movie .left {
	text-align: center;
}

#home #interview .left img {
	width: 95%;
	height: unset;
	object-fit: unset;
}

#home #movie .right p {
	text-align: center;
}

#home .movie .wrap {
	flex-direction: column;
}

/*資料請求*/
#home #panf .left,
#home #panf .right {
	width: 100%;
	text-align: center;
}

/*お知らせ(#news)*/
#news .content {
	width: 100%;
	/* 1列にするための幅 */
}

/******************************************************
サブページ　--　共通トップ（.top）
*******************************************************/
/*トップ画像*/
.slideshow.top {
	width: 95%;
	height: 40vh;
	margin: 8rem auto 2rem auto;
}


/*トップタイトル*/
.slide-title {
	bottom: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.slide-title h1 {
	font-size: 1.3rem;
	padding: 0.5rem 1rem;
}


/*タイトル*/
.title-icon {
	width: 90px;
	height: 90px;
}

/******************************************************
サブページ　--　コンテンツ(共通)
*******************************************************/
main {
	width: 85%;
}

.wrap,
.wrap2 {
	flex-direction: column;
}


.left,
.right {
	width: 100%;
}


.red-button,
.blue-button {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*アコーディオンメニュー*/
.qa .left,
.qa .right {
	flex: 0 0 100%;
	max-width: 100%;
}

.qa .right {
	padding-left: 0;
	margin-top: 20px;
}

/*自動スライドショー*/
.auto-slideshow-wrapper img {
	width: 200px;
	height: 200px;
}

.sub-title p {
	font-size: 1.4rem;
}

/******************************************************
SNSアイコン
*******************************************************/
.sns-icons {
	width: 70%;
}

/******************************************************
お問い合わせサブページ(#info-sub)
*******************************************************/
#info-sub .button {
	flex: 90%;
	margin-bottom: 1rem;
	padding: 15px;
}

#info-sub .button h3 {
	font-size: 1rem;
}

.phone-info img {
	/*margin-left: -1rem;*/
	margin-left: unset;
	width: 1.5rem;
}

.phone-info span {
	font-size: 1.2rem;
}

/*#info-sub .button {
	padding: 20px 0 10px 0;
}*/

#info-sub .button-wrap {
	margin-bottom: 1rem;
	margin-top: 2rem;
}

#info-sub .detail-button {
	width: 100%;
	margin: 0 auto;
}

/******************************************************
サブページ　--　警察学校について(#school)
*******************************************************/
/* 年間スケジュールスライドショー */
.event-slide {
	min-width: calc(50% - 10px);
	/* 2つのスライドを表示 */
}

/*授業内容（表）*/
.styled-table {
	width: 100%;
}

.left-column {
	background-color: #4a80bf;
	color: white;
	width: 25%;
}

.styled-table td:not(.left-column) {
	width: 75%;
}

.styled-table tr:hover {
	background-color: unset;
}

/*警察学校の一日*/
.content-grid {
	grid-template-columns: repeat(2, 1fr);
}

/******************************************************
サブページ --警察の仕事について(#work)
*******************************************************/
.content-item img {
	transition: none;
}

#local .local-graph {
	width: 60%;
	margin: 0 auto;
}

/*事務の１日*/
#office .office-schedule {
	width: 80%;
	margin: 0 auto;
}

/******************************************************
サブページ --給与とキャリアアップについて(#career)
*******************************************************/
#career .w50 {
	width: 90%;
}

#career .styled-table {
	width: 100%;
}

#career .content-img img {
	width: 100%;
	border-radius: 10px;
}

/******************************************************
6つのボタンセクション(#section6)
*******************************************************/
#section6 .detail-button {
	width: 90%;
}

#section6 .button-text {
	left: 0.5rem;
	font-size: 1.5rem;
}

#section6 .button-text span {
	font-size: 0.9rem;
}

/******************************************************
お問い合わせトップページ(#info)
*******************************************************/
/*#info .contact-container {
	max-width: 90%;
	flex-direction: column;
}

#info .map {
	flex: unset;
	width: 100%;
}

#info .button-wrap {
	display: block;
	width: 100%;
}

#info .contact-info {
	flex: unset;
	margin-right: unset;
	width: 100%;
}
*/

/******************************************************
ポップアップ(画像拡大)
*******************************************************/
.popup-content {
	width: auto;
	height: 60vh;
	max-width: none;
}

/******************************************************
サブページ --ワーク・ライフ・バランスについて(#work-life)
*******************************************************/
#work-life .w50 {
	width: 90%;
}