@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  GRM Base CSS
  Author : Hirohisa Kambe
  Date : 2026.04.13
  Version : 1.0
  基準：16px = 1rem
  Copyright(C)HARD DISK. All rights reserved.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* =========================
   Root（最重要）
========================= */
html{
	font-size:100%; /* 16px */
}

body{
	font-size:1rem;
	line-height:1.8;
	color:#000;
	background:#fff;
	-webkit-text-size-adjust:100%;
}

/* =========================
   Box sizing
========================= */
*,
*::before,
*::after{
	box-sizing:border-box;
}

/* =========================
   Typography
========================= */
h1,h2,h3,h4,h5,h6{
	font-weight:700;
	line-height:1.4;
	margin:0 0 1rem;
}

h1{ font-size:2rem; }      /* 32px */
h2{ font-size:1.75rem; }   /* 28px */
h3{ font-size:1.5rem; }    /* 24px */
h4{ font-size:1.25rem; }   /* 20px */
h5{ font-size:1.125rem; }  /* 18px */
h6{ font-size:1rem; }      /* 16px */

p{
	margin:0 0 1rem;
}

/* =========================
   Responsive
========================= */
@media (max-width:768px){

	h1{ font-size:1.5rem; }
	h2{ font-size:1.375rem; }
	h3{ font-size:1.25rem; }

	body{
		line-height:1.8;
	}
}

/* =========================
   Link
========================= */
a{
	color:inherit;
	text-decoration:none;
	transition:0.3s;
}

a:hover{
	opacity:0.7;
}

/* =========================
   List
========================= */
ul,ol{
	margin:0;
	padding:0;
	list-style:none;
}

/* =========================
   Image
========================= */
img.img-full {
	width:100%;
	height:auto;
	display:block;
}

.img-cover img{
	width:100%;
	height:100%;
	object-fit:cover;
}

/* =========================
   Ratio（比率クラス）
========================= */

[class*="ratio-"]{
	overflow:hidden;
}

[class*="ratio-"] img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* 正方形 */
.ratio-square{
	aspect-ratio:1 / 1;
}

/* 縦長（3:4） */
.ratio-portrait{
	aspect-ratio:3 / 4;
}

/* 横長（4:3） */
.ratio-landscape{
	aspect-ratio:4 / 3;
}

/* =========================
   Table
========================= */
table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
}

/* =========================
   Form
========================= */
input,
textarea,
select,
button{
	font-size:1rem;
	font-family:inherit;
	border:none;
	outline:none;
}

button{
	cursor:pointer;
	background:none;
}

/* =========================
   Spacing Utility
========================= */

/* margin */
.mt-00{ margin-top:0 !important; }
.mt-10{ margin-top:0.625rem !important; }
.mt-20{ margin-top:1.25rem !important; }
.mt-30{ margin-top:1.875rem !important; }

.mb-00{ margin-bottom:0 !important; }
.mb-10{ margin-bottom:0.625rem !important; }
.mb-20{ margin-bottom:1.25rem !important; }
.mb-30{ margin-bottom:1.875rem !important; }

.ml-00{ margin-left:0 !important; }
.ml-10{ margin-left:0.625rem !important; }
.ml-20{ margin-left:1.25rem !important; }
.ml-30{ margin-left:1.875rem !important; }

.mr-00{ margin-right:0 !important; }
.mr-10{ margin-right:0.625rem !important; }
.mr-20{ margin-right:1.25rem !important; }
.mr-30{ margin-right:1.875rem !important; }

/* padding */
.pt-00{ padding-top:0 !important; }
.pt-10{ padding-top:0.625rem !important; }
.pt-20{ padding-top:1.25rem !important; }
.pt-30{ padding-top:1.875rem !important; }

.pb-00{ padding-bottom:0 !important; }
.pb-10{ padding-bottom:0.625rem !important; }
.pb-20{ padding-bottom:1.25rem !important; }
.pb-30{ padding-bottom:1.875rem !important; }

.pl-00{ padding-left:0 !important; }
.pl-10{ padding-left:0.625rem !important; }
.pl-20{ padding-left:1.25rem !important; }
.pl-30{ padding-left:1.875rem !important; }

.pr-00{ padding-right:0 !important; }
.pr-10{ padding-right:0.625rem !important; }
.pr-20{ padding-right:1.25rem !important; }
.pr-30{ padding-right:1.875rem !important; }

/* text */
.text-center{ text-align:center !important; }
.text-left{ text-align:left !important; }
.text-right{ text-align:right !important; }

/* display */
.d-block{ display:block !important; }
.d-flex{ display:flex !important; }
.d-none{ display:none !important; }

/* flex */
.flex-center{
	display:flex;
	align-items:center;
	justify-content:center;
}

.flex-between{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

/* =========================
   Container
========================= */
.grm-container{
	width:100%;
	margin:0 auto;
	padding:0 1rem;
	max-width:1200px;
}