@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/*------------------------------
文字設定
------------------------------*/
:root {
  /* フォントウェイト */
  --weight-2: 200;
  --weight-3: 300;
  --weight-4: 400;
  --weight-5: 500;
  --weight-6: 600;
  --weight-7: 700;
  --weight-8: 800;
  --weight-9: 900;

  /* 見出し共通 */
  /* --heading-weight: var(--weight-7);
  --heading-line-height: 1.25;
  --heading-letter-spacing: normal; */

  /* line-height */
  --lh-base: 1.6; /* 本文用（標準） */
  --lh-relaxed: 1.8; /* 記事やリード用（広め） */

  /* border-radius */
  --radius-sm: 8px; /* 小さめの角丸（ボタンやタグなど） */
  --radius-md: 12px; /* 標準的な角丸（カードや入力欄など） */
  --radius-lg: 18px; /* 大きめの角丸（セクション背景や大きなカードなど） */

  /* Font-size 小サイズ */
  --caption: 1.2rem;
  --smallest: 1.1rem;

  /* Font-size ベース（初期SP: 375〜599px） */
  --font-base: 1.6rem; /* 18px */
  --font-small: 1.2rem;
  --font-regular: 1.5rem;
  --font-medium: 1.6rem;
  --font-large: 1.7rem;

  --heading-md: 2.2rem;
  --heading-xl: 2.5rem;
  --heading-lg: 3.8rem;
  /* 
  --heading-sm: 2rem;
  --heading-xs: 1.8rem;
  --heading-xxs: 1.5rem; */

  --heading-sub-heading: 1.7rem; /* サブ見出し */
  --heading-number: 3.4rem; /* 数字強調 */
}

/* PC (1000px〜) */
@media (min-width: 1000px) {
  :root {

  --font-base: 1.8rem; /* 18px */
  --font-small: 1.4rem;
  --font-regular: 1.6rem;
  --font-medium: 1.7rem;
  --font-large: 2rem;

  --heading-md: 2.7rem;
  --heading-xl: 3rem;
  --heading-lg: 5rem;
    
  --heading-sub-heading: 2rem; /* サブ見出し */
  --heading-number: 3.8rem; /* 数字強調 */
  }
}

html {
  scroll-behavior: smooth;
}

/* ベース要素 */
body{
  overflow: hidden;
  background-color: var(--color-yellow1);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--weight-4);
  font-style: normal;
}

p,
a,
li,
th,
td,
dt,
dd,
div,
label {
  font-size: var(--font-base);
  line-height: var(--lh-base);
}
/* 見出し */
h1 { font-size: var(--heading-xl); }
h2 { font-size: var(--heading-lg); }
h3 { font-size: var(--heading-md); }
h4 { font-size: var(--heading-sm); }
h5 { font-size: var(--heading-xs); }
h6 { font-size: var(--heading-xxs); }
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-5);
}

/* フォントファミリー */
.c-font-serif{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: var(--weight-3);
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* フォントサイズ */
.c-sub-heading {
  font-size: var(--heading-sub-heading);
  display: block;
}
.c-caption,
.c-note {
  font-size: var(--caption);
}
.c-smallest {
  font-size: var(--smallest);
}
.c-number {
  font-size: var(--heading-number);
}
/* 本文より少し大きい＆小さい */
.c-font-large {
  font-size: var(--font-large);
}
.c-font-medium {
  font-size: var(--font-medium);
}
.c-font-small {
  font-size: var(--font-small);
}

/* リード文 */
.c-lead {
  font-weight: var(--weight-6);
  margin-bottom: var(--space-5);
}
.c-lead--lg {
  font-size: var(--font-large);
  line-height: var(--lh-relaxed);
}
.c-lead--md {
  font-size: var(--font-medium);
  line-height: var(--lh-base);
}
.c-lead--center {
  text-align: center;
}

/* 汎用 line-height  */
.c-lh-tight {
  line-height: var(--heading-line-height);
}
.c-lh-base {
  line-height: var(--lh-base);
}
.c-lh-relaxed {
  line-height: var(--lh-relaxed);
}

/* weight */
.c-font-weight--200 {
  font-weight: var(--weight-2);
}
.c-font-weight--400 {
  font-weight: var(--weight-4);
}
.c-font-weight--500 {
  font-weight: var(--weight-5);
}
.c-font-weight--600 {
  font-weight: var(--weight-6);
}
.c-font-weight--700 {
  font-weight: var(--weight-7);
}
.c-font-weight--900 {
  font-weight: var(--weight-9);
}

/* 文字の位置 */
.c-text-align-left {
  text-align: left;
}
.c-text-align-center {
  text-align: center;
}
.c-text-align-right {
  text-align: right;
}


/*------------------------------
ボタン
------------------------------*/
/* c-btn-a */
.c-btn-a{
	display: table;
	margin-left: auto;
}
.c-btn-a a {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 50px;
	padding-left: 70px;
  font-size: var(--font-large);
	transition: 0.3s ease-in-out;
}
.c-btn-a a::before,
.c-btn-a a::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
}
.c-btn-a a::before {
  width: 14px;
  height: 14px;
  left: 14px;
  z-index: 2;
  border-top: solid 3px var(--color--wh);
  border-right: solid 3px var(--color--wh);
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.c-btn-a a::after {
  left: 0;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 99999px;
  background: var(--color--bk);
  transform: translateY(-50%);
  transition: all 0.5s;
}
.c-btn-a a span {
  position: relative;
  z-index: 3;
  transition: all 0.3s;
}
@media screen and (min-width: 1000px) {
	.c-btn-a a:hover span {
		color: #fff;
	}
	.c-btn-a a:hover::before {
		left: 1.5em;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
	}
	.c-btn-a a:hover::after {
		right: 0;
		width: 100%;
		background: #333;
	}
}



/*------------------------------
WP投稿共通 ページャー
------------------------------*/
/* 一覧ページャー */
.c-tablenav {
  text-align:right;
  font-size: var(--font-regular);
}
.c-tablenav a.page-numbers, 
.c-tablenav .current {
  padding: 5px 8px;
  border-radius: 4px;
  background-color: var(--color--wh);
  text-decoration:none;
  color: var(--color--bk);
  font-size: var(--font-regular);
  font-weight: 600;
  transition: 0.3s ease-in-out;
}
.c-tablenav a.page-numbers:hover,
.c-tablenav .prev.page-numbers:hover ,
.c-tablenav .next.page-numbers:hover{
  color: var(--color--key);
}
.c-tablenav .current {
  background-color: var(--color--bk);
  color: var(--color--wh);
}
.c-tablenav a.page-numbers.next, 
.c-tablenav a.page-numbers.prev {
  font-size: var(--font-regular);
  background: none;
}

/* 詳細ページャー */
.c-pagenav{
  width: 100%;
  margin: 0 auto 20px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.c-pagenav .prev a,
.c-pagenav .next a{
  display: block;
  width: 115px;
  text-align: center;
  font-size:  var(--font-medium);
  transition: 0.3s ease-in-out;
}
.c-pagenav .next a:link,
.c-pagenav .next a:visited,
.c-pagenav .prev a:link, 
.c-pagenav .prev a:visited {
  color: var(--color--bk);
}
.c-pagenav .next a:hover,
.c-pagenav .next a:active,
.c-pagenav .prev a:hover,
.c-pagenav .prev a:active {
  color: var(--color--key);
}
.c-pagenav .backbtn a{
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #222;
  text-decoration:none;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
}


/*------------------------------
アイコン
------------------------------*/
.c-icon__anchor{
  position: relative;
  display: inline-block;
  border-radius: 9999px;
  background-color: var(--color--key);
  width: 1em;
  height: 1em;
  transform: translateY(0.125em);
}
.c-icon__anchor::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%) rotate(135deg);
  width: 0.4em;
  height: 0.4em;
  border-top: solid 2px var(--color--wh);
  border-right: solid 2px var(--color--wh);
}



/*------------------------------
見出し
------------------------------*/
/*
c-heading-a
セリフ（黒）:明朝（黒）
*/
.c-heading-a{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: var(--weight-3);
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: var(--heading-lg);
}
.c-heading-a span{
  display: block;
  margin-top: 10px;
  font-size: var(--font-large);
}

/*
c-heading-b
セリフ（キーカラー）:ゴシック（黒）
*/
.c-heading-b{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: var(--weight-3);
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: var(--heading-lg);
  color: var(--color--key);
}
.c-heading-b span{
  display: block;
  margin-top: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-large);
  font-weight: var(--weight-5);
  color: var(--color--bk);
}

/*
c-heading-c
サンセリフ（黒）:border:ゴシック（黒）
*/
.c-heading-c{
  font-size: var(--heading-xl);
}
.c-heading-c span{
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color--bk);
  font-size: var(--font-regular);
}

/*
c-heading-d
サンセリフ（黒）:ゴシック（黒）
*/
.c-heading-d{
  font-size: var(--heading-xl);
}
.c-heading-d span{
  display: block;
  margin-top: 17px;
  font-size: var(--font-large);
}


/*------------------------------
hover処理 PCのみ
------------------------------*/
@media screen and (min-width: 1000px) {
  /* 透明 */
  .c-hover__opacity a{
    transition: opacity .5s;
  }
  .c-hover__opacity a:hover{
    opacity: .7;
  }
  
  /* 文字色キーカラー */
  .c-hover__c-key a{
    transition: color .5s;
  }
  .c-hover__c-key a:hover{
    color: var(--color--key);
  }

  /* 下線 */
  .c-hover__line-wh a,
  .c-hover__line-bk a{
    position: relative;
  }
  .c-hover__line-wh a::after,
  .c-hover__line-bk a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    /* z-index: 1; */
    display: block;
    width: 0;
    transition: width .5s;
  }
  .c-hover__line-wh a::after{
    border-bottom: 1px solid var(--color--wh);
  }
  .c-hover__line-bk a::after{
    border-bottom: 1px solid var(--color--bk);
  }
  .c-hover__line-wh a:hover::after,
  .c-hover__line-bk a:hover::after{
    width: 100%;
  }
}

/*  */