@charset "UTF-8";

/*
スマートフォン用の上書き（全ページ共通）
読み込み: <link rel="stylesheet" href="asset/css/sp.css" media="screen and (max-width: 767px)">
他の CSS より後に読み込む
*/

/* -------------------------------------------
Base
*/
body {
	min-width: auto;
	font-size: 1.4rem;
}

a {
	&:visited { color: #2b2b2b; }
	/* タッチ端末ではホバーが残るため影を付けない */
	&:hover { filter: none; }
}

.pc_none,
.pc_pd_none {
	display: revert;
}

.sp_none,
.sp_pd_none {
	display: none;
}

/* -------------------------------------------
Layout
*/
/* 固定したヘッダーの高さ分 */
main {
	padding-top: 56px;
}

.container {
	padding: 0 20px;

	&.container--narrow {
		padding: 0 20px;
	}
}

.section, .footer {
	padding: 100px 0;
}

/* -------------------------------------------
Header
*/
.header {
	height: 56px;
	align-items: center;
	padding: 0 20px;
}

/* SP ではスクロールしてもロゴを縮めない */
.header__logo a img,
.header--shrink .header__logo a img {
	height: 18px;
}

.header__nav {
	display: none;
}

.header__menu-button {
	display: block;
}

/* -------------------------------------------
Main
*/
.page-title {
	margin-bottom: 36px;
}

.half-content {
	width: auto;
}

/* セキュリティアクション：マークを上の中央、文章をその下に置く */
.security-action {
	padding: 20px;
	grid-template-columns: 1fr;
	gap: 16px;
}

.security-action__mark {
	justify-self: center;
	width: 100px;
}

.security-action__text h5 {
	text-align: center;
}

/* -------------------------------------------
Home: Hero
*/
/* 高さはヘッダーを除いた画面の高さ（アドレスバー表示時の高さ） */
.hero,
.hero__slide-img,
.hero__overlay {
	height: calc(100svh - 56px);
}

/* 矢印は小さく押しにくいので、スワイプとドットで送る */
.hero__slider {
	--swiper-pagination-bottom: 20px;

	& .swiper-button-prev,
	& .swiper-button-next {
		display: none;
	}
	& .swiper-pagination {
		right: 20px;
	}
}

.hero__sns {
	top: 20px;
	right: 20px;
}

.hero__title {
	font-size: 4rem;
	padding: 0 20px;
}

/* -------------------------------------------
Home: Information
*/
.info {
	display: block;
}

.info__heading-bg {
	width: auto;
	justify-content: flex-start;
	padding: 60px 20px;
}

.info__heading {
	font-size: 1.8rem;
}

.info__contents {
	display: block;
	width: auto;
	padding: 50px 20px 50px;
}

.info__list {
	width: auto;
}

.info__link {
	display: block;

	&::after {
		top: auto;
		bottom: 15px;
		transform: none;
	}
}

.info__title {
	width: auto;
}

/* -------------------------------------------
Home: Service
*/
.service__container {
	margin: 0 auto 50px;
}

.service__catch-text {
	font-size: 1.3rem;
	line-height: 2.4;
	letter-spacing: 0.05em;
}

.service__body {
	display: block;
}

.service__logo {
	margin: 80px auto 130px;
}

.service__logo-img {
	max-width: 160px;
	height: fit-content;
}

.service__groups {
	grid-template-rows: none;
	gap: 40px;
}

.service__heading {
	font-size: 1.8rem;
	margin-bottom: 20px;
}

/* 線は Information の一覧（.info__item）と同じ */
.service__item {
	margin-bottom: 0;
	padding: 12px 0;
	border-bottom: 1px dotted #d4d4d4;
}

.service__term {
	display: block;
}

/* -------------------------------------------
Home: Company
*/
.company__inner {
	display: block;
}

.company__heading {
	font-size: 1.8rem;
}

.company__intro {
	margin-bottom: 40px;
}

.company__photos {
	display: none;
}

.company__info {
	margin-bottom: 40px;
}

/* 長い住所が項目名の下に回り込まないよう横に並べる */
.company__info-item {
	display: flex;
}

.company__info-term {
	flex-shrink: 0;
	width: 64px;
}

.company__info-desc {
	letter-spacing: 0;
}

.front-page .security-action__mark{
	margin-top: 10px;
}

/* -------------------------------------------
Home: Map
*/
.map__canvas {
	height: 300px;
}

/* -------------------------------------------
Information（一覧・詳細）
*/
.info-list__link {
	display: block;

	&::after {
		top: auto;
		bottom: 25px;
		transform: none;
	}
}

.info-list__title {
	width: auto;
}

.post__nav {
	font-size: 1.2rem;
}

.post__title {
	font-size: 1.8rem;
	margin-bottom: 30px;
}

.post__content {
	font-size: 1.4rem;

	& p {
		margin-bottom: 26px;
	}
}

.info_ul01 {
	display: block;

	& li {
		width: auto;
		margin-bottom: 12px;
	}
	& li a {
		font-size: 1.6rem;
	}
}

/* -------------------------------------------
Security Policy
*/
.security-policy{
	& .policy.section {
		padding: 50px 0 0 ;
	}
	& .page-title-en{
		font-size: 28px;
	}
}

/* -------------------------------------------
Inquiry
*/

.form_item {
	display: block;

	& dt {
		width: 100%;
		margin-bottom: 4px;
	}
	& dd {
		width: 100%;
	}
}

input[type="checkbox"] {
	width: 24px;
}

/* -------------------------------------------
Outher
*/
main > .section{
	padding-top: 50px;
}