@charset "UTF-8";

html, body {
max-width: 100%;
overflow-x: hidden;
}
/* ============================================
 ベースCSS部分 - vwとclampを使用したフレキシブルなタイポグラフィ
 ============================================ */

:root {
/* カラーパレット */
--color-primary: #00a48d;
--color-secondary: #4ab6ac;
--color-tertiary: #00756a;
--color-accent: #00897b;
--color-notice: #ff5b72;
--color-important: #f3b034;
--color-line01: #d2691e;
--color-text: #333333;
--color-text-heading: #2c3e50;
--color-background: #fbfafa;
--color-border: #dddddd;
--color-gray: #888;
--color-orange: #ffa500;
--color-darkgray: #666;
--color-green: #85b600; 
--color-blue: #00bcd4;
--color-lightblue: #e0f7fa;
--color-pink: #e91e63;
--color-red: #c2185b;
--color-lightred: #fce4ec;
--color-lightgreen: #deedc9;
--color-brown: #894b13;
--color-marin: #16b4be;
--color-sakura: #dd6f9f;

/* スペーシング */
--space-xs: clamp(0.5rem, 0.5rem + 0.1vw, 0.7rem);
--space-sm: clamp(1rem, 1rem + 0.2vw, 1.4rem);
--space-md: clamp(1.5rem, 1.5rem + 0.5vw, 2.4rem);
--space-lg: clamp(2.4rem, 2.4rem + 1vw, 4rem);
--space-xl: clamp(3.2rem, 3.2rem + 1.5vw, 6.4rem);
--space-2xl: clamp(6.0rem, 6.0rem + 2vw, 8.4rem);


/* ボーダーラディウス */
--radius-sm: 0.4rem;
--radius-md: 0.8rem;
--radius-lg: 1.6rem;
--radius-xl: 2.2rem;

/* シャドウ */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-md-under: 0 4px 7px rgba(0, 0, 0, 0.1);

/* フォントサイズ */
--size-xs: clamp(1.2rem, 1.2rem + 0.2vw, 1.3rem);
--size-sm: clamp(1.4rem, 1.4rem + 0.2vw, 1.6rem);
--size-md: clamp(1.6rem, 1.6rem + 0.2vw, 2.0rem);
--size-lg: clamp(1.8rem, 1.8rem + 0.2vw, 2.2rem);
--size-xl: clamp(2.0rem, 2.2rem + 0.2vw, 2.6rem);
}

/* ベースとなるテキストスタイル */
body {
font-family: 'ZenKakuGothicAntique-Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: var(--color-background);
color: var(--color-text);
font-weight: 400;
}

/* pタグは最小値12px、最大値14px */
p {
/*font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem);*/
font-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.4rem);
margin-bottom: var(--space-xs);
}

/* h1は26px、32px */
h1 {
font-size: clamp(2.6rem, 2.3rem + 0.6vw, 3.2rem);
line-height: 1.2;
margin-bottom: var(--space-md);
font-weight: 700;
}

/* h2は18px、22px */
h2 {
font-size: clamp(1.8rem, 1.6rem + 0.6vw, 2.2rem); 
line-height: 1.3;
margin-bottom: var(--space-sm);
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-style: normal;
color: var(--color-secondary);
}

/* h3は16px、20px */
h3 {
font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2.0rem); 
line-height: 1.3;
margin-bottom: var(--space-sm);
font-weight: 600;
}

/* h4は16px、18px */
h4 {
font-size: clamp(1.4rem, 1.3rem + 0.5vw, 1.8rem);
line-height: 1.4;
margin-bottom: var(--space-xs);
font-weight: 600;
}

/* リンクスタイル */
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
text-decoration: underline;
}

a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

em {
font-style: normal;
}

small {
font-size: 70%;
}

/*画像*/
img {
max-width: 100%;
height: auto;
}

/* コンテナ */
.container {
width: 100%;
max-width: 120rem;
margin: 0 auto;
padding: 0 var(--space-sm);
}

/* セクション */
section {
margin-bottom: var(--space-xl);
}

/* リスト */
/*ul, ol {
padding-left: var(--space-md);
margin-bottom: var(--space-md);
}*/

ul {
list-style-type: disc;
}

ol {
list-style-type: decimal;
}

li {
/*font-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.4rem);*/
font-size: clamp(1rem, 1rem + 0.5vw, 1.4rem);
margin-bottom: var(--space-xs);
}

dt, dd {
/*font-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.4rem);*/
font-size: clamp(1rem, 1rem + 0.5vw, 1.4rem);
}

/* figure*/
figcaption {
    font-size: var(--size-xs);
    text-align: center;
}

/* フォーム要素 */
form {
margin-bottom: var(--space-md);
}

label {
display: block;
font-size: clamp(1.4rem, 1.4rem + 0.1vw, 1.5rem);
margin-bottom: var(--space-xs);
font-weight: 500;
}

input,
textarea,
select {
width: 100%;
padding: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-background);
}

button,
.button {
display: inline-block;
padding: var(--space-xs) var(--space-md);
background-color: var(--color-primary);
color: white;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: clamp(1.4rem, 1.4rem + 0.1vw, 1.5rem);
font-weight: 500;
text-align: center;
transition: background-color 0.3s ease;
}

button a, .button a {
color: white;
}

button:hover,
.button:hover {
background-color: var(--color-secondary);
}

/* グリッドシステム */
.grid {
display: grid;
gap: var(--space-md);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
}

.grid-two {
display: grid;
grid-template-columns: repeat(1, 1fr);
/* 1列 */
gap: var(--space-md);
}

.grid-three {
display: grid;
grid-template-columns: repeat(1, 1fr);
/* 3列 */
gap: var(--space-md);
}

.grid-four {
display: grid;
grid-template-columns: repeat(2 1fr);
/* 4列 */
gap: var(--space-md);
}

/* カード */
.card {
background-color: var(--color-background);
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}

/* コンテナクエリのサポート */
@supports (container-type: inline-size) {

main,
section,
article {
container-type: inline-size;
}
}

/* ビュートランジションAPIのサポート */
@supports (view-transition-name: none) {
:root {
view-transition-name: root;
}

main {
view-transition-name: main;
}
}

/* ユーティリティクラス */
.text-primary {
color: var(--color-primary);
}

.text-secondary {
color: var(--color-secondary);
}

.text-accent {
color: var(--color-accent);
}

.text-background {
color: var(--color-background);
}

.text-sm {
font-size: var(--size-sm);
}

.text-xs {
font-size: var(--size-xs);
}

.text-md {
font-size: var(--size-md);
}

.text-lg {
font-size: var(--size-lg);
}

.text-xl {
font-size: var(--size-xl);
}


.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-left {
text-align: left;
}

.ind-1 {
text-indent: -1em;
padding-left: 1em;
}

.ind-2 {
text-indent: -2em;
padding-left: 2em;
}

.mb-xs {
margin-bottom: var(--space-xs);
}

.mb-sm {
margin-bottom: var(--space-sm);
}

.mb-md {
margin-bottom: var(--space-md);
}

.mb-lg {
margin-bottom: var(--space-lg);
}

.mb-xl {
margin-bottom: var(--space-xl);
}

.mb-2xl {
margin-bottom: var(--space-2xl);
}

.mt0 {
margin-top: 0;
}
.mt-xs {
margin-top: var(--space-xs);
}

.mt-sm {
margin-top: var(--space-sm);
}

.mt-md {
margin-top: var(--space-md);
}

.mt-lg {
margin-top: var(--space-lg);
}

.mt-xl {
margin-top: var(--space-xl);
}

.mr-xs {
margin-right: var(--space-xs);
}

.ml-xs {
margin-left: var(--space-xs);
}

.pd-sm {
padding: var(--space-sm)
}
.pt-xs {
padding-top: var(--space-xs);
}

.pt-sm {
padding-top: var(--space-sm);
}

.pt-md {
padding-top: var(--space-md);
}

.pt-lg {
padding-top: var(--space-lg);
}

.pt-xl {
padding-top: var(--space-xl);
}

.pr-xs {
padding-right: var(--space-xs);
}

.pr-sm {
padding-right: var(--space-sm);
}

.pr-md {
padding-right: var(--space-md);
}

.pr-lg {
padding-right: var(--space-lg);
}

.pr-xl {
padding-right: var(--space-xl);
}

.pl-xs {
padding-left: var(--space-xs);
}

.pl-sm {
padding-left: var(--space-sm);
}

.pl-md {
padding-left: var(--space-md);
}

.pl-lg {
padding-left: var(--space-lg);
}

.pl-xl {
padding-left: var(--space-xl);
}

.pb-xs {
padding-bottom: var(--space-xs);
}

.pb-sm {
padding-bottom: var(--space-sm);
}

.pb-md {
padding-bottom: var(--space-md);
}

.pb-lg {
padding-bottom: var(--space-lg);
}

.pb-xl {
padding-bottom: var(--space-xl);
}

.primary {
color: var(--color-primary);
}

.secondary {
color: var(--color-secondary);
}

.accent {
color: var(--color-accent);
}

.notice {
color: var(--color-notice);
}

.important {
color: var(--color-notice);
}

.green {
    color: var(--color-green);
}
        
.blue {
color: var(--color-blue);
}
        
.pink {
color: var(--color-pink);
}

.or {
color: var(--color-important);
}

.red {
color: var(--color-red);   
}

.orange {
color: var(--color-orange);
}

.brown {
color: var(--color-brown);
}

.marin {
    color: var(--color-marin);
}

.sakura {
    color: var(--color-sakura);
}

.bg-primary {
background: var(--color-primary);
}

.bg-secondary {
background: var(--color-secondary);
}

.bg-accent {
background: var(--color-accent);
}

.bg-notice {
background: var(--color-notice);
}

.bg-back{
background: var(--color-background);
}

.bg-white {
background: #fff;
}


.col-12 {
max-width: 100%;
margin-right: auto;
margin-left: auto;
padding: 0 var(--space-sm);
}

.notice-bg {
display: inline-block;
background: var(--color-notice);
padding: 0.5em 2em;
}

.hidden {
display: none;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}



/* ============================================
 Media Queries Level 4ブレイクポイント
 ============================================ */

/* モバイル（小） - 320px以下 */
@media (width <=320px) {
:root {
--space-xs: 0.4rem;
--space-sm: 0.8rem;
--space-md: 1.2rem;
--space-lg: 2rem;
--space-xl: 2.8rem;
}
}

/* モバイル（標準） - 321px～576px */
@media (321px <=width <=576px) {
:root {
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.4rem;
--space-xl: 3.2rem;
}
}

/* タブレット（縦向き） - 577px～768px */
@media (577px <=width <=768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}

.grid-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2列 */
gap: var(--space-md);
}

.grid-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3列 */
gap: var(--space-md);
}

.grid-four {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2列 */
gap: var(--space-md);
}
}

@media (width >=769px) {

/* グリッドシステム */
.grid-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2列 */
gap: var(--space-md);
}

.grid-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3列 */
gap: var(--space-md);
}

.grid-four {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4列 */
gap: var(--space-md);
}

.col-12 {
max-width: 769px;
}
}

/* タブレット（横向き） - 769px～1024px */
@media (769px <=width <=960px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}

.col-12 {
max-width: 769px;
}
}

@media (961px <=width <=1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}

.col-12 {
max-width: 961px;
}
}

/* デスクトップ - 1025px～1280px */
@media (1025px <=width <=1280px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}

.col-12 {
max-width: 1025px;
}
}

/* 大型デスクトップ - 1201px以上 */
@media (width >=1281px) {

.container {
padding: 0 var(--space-md);
}

.col-12 {
max-width: 1281px;
}
}