html {
	font-size: 62.5%;
}

/*=========================================
*Font
===========================================*/
@font-face {
  font-family: 'NotoSansJP';
	font-style: normal;
  src: url('/wp-content/themes/tsukubaai/fonts/NotoSansCJKjp-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Iceland';
	font-style: normal;
  src: url('/wp-content/themes/tsukubaai/fonts/Iceland-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Arial';
	font-style: bold;
  src: url('/wp-content/themes/tsukubaai/fonts/arial_rounded_mt_bold_gras.woff2') format('woff2');
  font-display: swap;
}


code {
	white-space: break-spaces;
}

/*=========================================
*Body
===========================================*/
body {
	font-family: 'NotoSansJp',sans-serif;
	color: #000;
	font-size: 1.6rem;
}

a {
	transition: opacity .3s ease-in;
}
a:hover {
	opacity: .6;
}

img {
	max-width: 100%;
}

i {
	font-style: normal;
}

.pc {display: block;}
.sp {display: none;}

@media screen and (max-width: 800px) {
	.pc {display: none;}
.sp {display: block;}

}

main {
	background: linear-gradient(0deg, #DFEFF4 0%, #EBF2DA 100%);
	padding: 0 0 140px;
}

/*=========================================
*Header
===========================================*/
/* header全体：3カラムGrid（中央を本当の中央にするため） */
header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

header > article {
	display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 20px;
}

/* 下層：h1は左 */
header > article > h1{
  grid-column: 1;
  justify-self: start;
  margin: 0;
  text-align: left;
}

/* TOP：divは真ん中（header全体の中央） */
header > article > div{
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

header > article > div a {
	display: block;
	max-width: 800px;
	background: #F9E443 url(/wp-content/themes/tsukubaai/img/top/icon_emergency.svg) 16px center no-repeat;
	background-size: 30px;
	padding: 10px 36px 10px 60px;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	border-radius: 50px;
	position: relative;
}

header > article > div a:after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 12px;
	position: absolute;
	right: 19px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	margin: auto 0;
}

/* 右側：操作群（常に右） */
header > article > section{
  grid-column: 3;
  justify-self: end;

  display: flex;            /* 横並びはFlex */
  justify-content: flex-end;
  align-items: center;
  gap: 10px;

  margin: 0;                /* articleのデフォルト余白を消す */
}

header > article > section > div {
	cursor: pointer;
}

header > article > section > div:nth-of-type(1) {
	width: 63px;
	height: 63px;
	border-radius: 100%;
	border: 4px solid #184C71;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5.3rem;
	font-family: 'Iceland', cursive;
	background: #fff;
}

header > article > section > div:nth-of-type(2) {
    background: #184C71;
    border-radius: 10px;
    width: 60px;
    height: 60px;
    padding: 17px;
    position: relative;
}

header > article > section > div:nth-of-type(2) em {
    display: block;
    width: 60%;
    background: #D9D9D9;
    height: 3px;
    border-radius: 10px;
    transition: all .5s;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

header > article > section > div:nth-of-type(2) em:nth-of-type(1) {
    top: 17px;
}

header > article > section > div:nth-of-type(2) em:nth-of-type(2) {
    top: 30px;
}

header > article > section > div:nth-of-type(2) em:nth-of-type(3) {
    top: 43px;
}

header > article > section > div:nth-of-type(2).open em:nth-of-type(1) {
    top: 17px;
		-webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}

header > article > section > div:nth-of-type(2).open em:nth-of-type(2) {
    top: 30px;
		-webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}

header > article > section > div:nth-of-type(2).open em:nth-of-type(3) {
    top: 43px;
		opacity: 0;
}

/*====
*
*font-family: 'Iceland', cursive;
*
===*/

/*=========================================
*Title Set
===========================================*/

h2 {
	text-align: center;
	margin: 0 0 30px;
}

h2 p {
	font-family: 'Iceland', cursive;
	font-size: 13rem;
	color: rgba(24, 76, 113, 0.15);
}

h2 span {
	font-size: 2.4rem;
	color: #184C71;
	margin: -50px 0 0 0;
	display: block;
	font-weight: bold;
}

/* =========================
   Footer layout (PC first)
========================= */
footer {
  width: 100%;
	color: #184C71;
}

/* 全体の箱 */
footer #footerBox {
  max-width: 1186px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 24px 18px;
  box-sizing: border-box;

  /* ロゴ（左）＋リンク3列（右） */
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  column-gap: 48px;
  row-gap: 24px;
  align-items: start;
}

/* ロゴブロック */
footer #footerBox .footerLogo {
  grid-column: 1;
}

footer #footerBox .footerLogo > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

footer #footerBox .footerLogo img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

footer #footerBox .footerLogo p {
  margin: 0;
}

/* お問い合わせボタン */
footer #footerBox .footerLogo > div:last-child {
  margin-top: 16px;
}

footer #footerBox .footerLogo > div:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 27px 22px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    background: #184c71;
    width: 100%;
}

/* 右側リンク群 */
footer #footerBox .footerLink {
  grid-column: 2;
}

/* 要件：.footerLink内の<div>を横並び */
footer #footerBox .footerLink {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

footer #footerBox .footerLink > div {
  min-width: 0;
}

/* リスト共通 */
footer #footerBox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer #footerBox li {
  margin: 0 0 10px;
}

/* infoLink の2つ目ulは少し上を空ける */
footer #footerBox .infoLink ul + ul {
  margin-top: 14px;
}

/* コピーライト（要件：max-width 1186px / font-size 1.2rem固定） */
footer .copy {
    max-width: 1186px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 16px 18px;
    box-sizing: border-box;
}

footer .copy p {
  margin: 0;
  font-size: 1.2rem; /* PC/SPどちらも */
}


/* =========================
   Responsive (<=800px)
========================= */
@media (max-width: 800px) {
  footer #footerBox {
    padding: 22px 16px 14px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;

    /* 要件：SP時フォントサイズ（PCは指定しない） */
    font-size: 1.3rem;
  }

  /* ロゴ・リンクを縦積み */
  footer #footerBox .footerLogo,
  footer #footerBox .footerLink {
    grid-column: 1;
  }



  /* リンク3ブロックはSPで縦並び */
  footer #footerBox .footerLink {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* categoryLink：SP時 2列 */
  footer #footerBox .categoryLink ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }

  footer #footerBox .categoryLink li {
    margin: 0;
    font-size: 1.2rem; /* 要件：categoryLinkは1.2rem */
  }

  /* dataLink：SP時 縦並び（明示） */
  footer #footerBox .dataLink ul {
    display: block;
  }

  /* infoLink：1つ目ulは縦（デフォルトだが明示OK） */
  footer #footerBox .infoLink ul:first-of-type {
    display: block;
  }

  /* infoLink：2つ目ulは横並び */
  footer #footerBox .infoLink ul:last-of-type {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
  }

  footer #footerBox .infoLink ul:last-of-type li {
    margin: 0;
    font-size: 1.2rem; /* 要件：infoLinkの2番目ul内liは1.2rem */
  }
}