@charset "UTF-8";

html{	
}

h1{
	font-weight: bold;
	box-sizing: border-box;
}

h2{
	font-weight: bold;
}

p{
	font-size:16px;
}

img{
	
}

ul{
  height: 24px;         /* 任意の高さに調整 */
  line-height: 24px;    /* テキストを中央揃え */
  box-sizing: border-box;
}

li{
	list-style:none
}

body {
	font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
	background-color: #fff;
	color: #33333;
}
/* TOP固定リンク */
.fixed-top-link {
    position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
    bottom: 24px;        /* 画面下から24pxに固定 */
    right: 24px;         /* 画面右から24pxに固定 */
    z-index: 1000;    /* メニューや他要素の上にくるように */
	width: 72px;         /* 正方形にするため幅 */
	height: 72px;        /* 正方形にするため高さ */
	border-radius: 50%;        /* 完全な円にする */
    background: rgba(255,255,255,0.8);
    color: #111;
    padding: 10px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-size: 16px;
    text-decoration: none;
    letter-spacing: 1px;
    transition: background 0.2s;
}

.fixed-top-link:hover {
    background: #f0f0f0;
}
/*アニメーションfadein-img*/
.fadein-img {
  opacity: 0;
  transform: translateY(50px); /* 下から50pxずらしておく */
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.fadein-img.is-show {
  opacity: 1;
  transform: translateY(0);
}

/*========================header========================*/

header{
	max-width: 960px;
	display: flex;
	align-items: center;         /* 縦方向の中央揃え */
	justify-content: space-between; /* h1を左、navを右に配置 */
	margin: 0 auto;              /* 中央寄せしたい場合 */
	padding: 8px 16px 8px 16px; /* 上下の余白 */
}

.header img{
  vertical-align: middle; 
  height: 1em;            /* アイコンサイズをテキストに合わせる */
  width: auto;
}

.global-nav ul{
	margin: 0;
	padding: 32px 0 64px 0; /* 上下の余白 */
	display: flex;
	gap: 24px; /* li同士の間隔を調整 */
}

@media screen and (max-width: 760px) {
.global-nav ul {
		display: none;
	}
}

/*== スマホ用メニュー(ハンバーガーメニュー)==*/
/* PC版では非表示、ブレイクポイント(今回は760px)以下で表示 */
div.hamburgerMenu {
	display: none;
}
@media screen and (max-width: 760px) {
	div.hamburgerMenu {
		display: block;
	}
}

/* 三ボタンの領域を右上に作成、背景色設定、top/rightでボタンの位置を調整、z-indexで最前面に*/
div.hamburgerMenu .menuBtn {			
	width: 60px;
	height: 60px;
	background-color: #fff;/* 正方形メニューの背景*/
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 90;
	cursor: pointer;
}

/* ボタンの3本線を作成、線の幅、線の太さ、線の色を設定 */
div.hamburgerMenu .menuBtn span,
div.hamburgerMenu .menuBtn span:before,
div.hamburgerMenu .menuBtn span:after {
	content: '';
	width:35px;
	height: 3px;
	border-radius: 3px;
	background-color: #333;
	display: block;
	position: absolute;
}

/* 上の線は上方向に10pxずらす */
div.hamburgerMenu .menuBtn span:before {
	bottom: 10px;
}

/* 下の線は下方向に10pxずらす */
div.hamburgerMenu .menuBtn span:after {
	top: 10px;
}

/* ボタンクリック時：真ん中の線は透明に */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span {
	background-color: rgba(255, 255, 255, 0);
}

/* ボタンクリック時：上の線を斜めに（／） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::before {
	bottom: 0;
	transform: rotate(45deg);
}

/* ボタンクリック時：下の線を斜めに（＼） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* メニューの状態を保持するチェックボックスは非表示 */
div.hamburgerMenu #menuBtnCheck {
	display: none;
}

/* メニューの領域を作成、背景の大きさ、背景色、表示位置、アニメーション（スピードの調整） */
div.hamburgerMenu .menuContent {
	width: 220px;            /* 好みの幅に揃える */
	left: calc(100% - 220px);/* 開いた時の位置もwidthに合わせて調整 */
	width: 100%;
	height: auto;/* ★100%にするとコンテンツ領域をウィンドウの下までに */
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 80;
	transition: all 0.5s;
}

/* メニューの領域を作成、横幅を設定。メニューリストの表示位置を×ボタンの大きさぶん下げる */
div.hamburgerMenu .menuContent ul {
	width: 100%;
	padding-top: 80px;
	display: block;
	width: fit-content;   /* 中身の幅にぴったり合わせる */
}

/* メニュー項目間の線を追加 */
div.hamburgerMenu .menuContent ul li {
	width: 100%;
	border-top: solid 1px #fff;
	background-color: #fff;
	margin: 0;               /* 左右のmarginは外す */
	box-sizing: border-box;  /* 余白(padding)を含めて幅計算 */
}

/* ☆最初のメニュー項目の上線なくす */
div.hamburgerMenu .menuContent ul li:first-child {
	border-top: none; 		
}

/* メニューのリンク実体。クリックできる余白を作る、文字色、表示位置 */
div.hamburgerMenu .menuContent ul li a {
	display: block;
	width: 100%;
	font-size: 16px;
	color: #33333;
	text-align: center;
 	box-sizing: border-box;
	padding: 10px 40px;      /* 必要な左右余白をここでつける */
}

/* ボタンクリック時：メニュー領域の引き出し位置 */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuContent {
	left: calc(100% - 200px);/* ★0にすると左端まで */
}
/*==↑↑↑ スマホ用メニュー(ハンバーガーメニュー)↑↑↑==*/

/*========================main========================*/
main {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

#mainvisual p {
	padding-bottom: 88px;
}

#mainvisual img {
	padding-bottom: 88px;
	width: 100%;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#mainvisual img  {
	width: 80%;/* 幅を80%に縮小 */
	height: auto;
	}
}

/*========================coffeetime img========================*/
@media screen and (max-width: 760px) {	/*スマホ表示 */
#coffeetime{
	width: 80%;/* 幅を80%に縮小 */
	height: auto;
	margin: 0 auto;
	text-align: center;
	}
}

#coffeetime h2 {
	padding-bottom: 24px;
}

#coffeetime p {
	padding-bottom: 64px;
}

#coffeetime img {
	padding-bottom: 64px;
	width: 960px; /* 画像サイズは適宜調整 */
	height:576px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#coffeetime img  {
	width: 80%;/* 幅を80%に縮小 */
	height: auto;
	}
}

/*===================flex-container===================*/
#flex-container img {
	width: 960px; /* 画像サイズは適宜調整 */
	height:576px;
}

/*===================item===================*/
.item-flex-container {
	max-width: 960px;
	padding-bottom: 128px;
	display: flex;
	margin: 0 auto;
	justify-content: center;
	gap: 48px; /* 画像とテキストの間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.item-flex-container{
	margin: 0 auto;
	display: block;/* スマホの時だけ縦並びにする */
	width: 80%;/* 幅を80%に縮小 */
	}
}

#item p {
	text-align: left;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#item p {
	text-align: center;
	padding-bottom: 32px;
	}
}

#item img {
	padding-bottom: 16px;
	width: 360px; /* 画像サイズは適宜調整 */
	height:360px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#item img {
	width: 80%;/* 幅を80%に縮小 */
	height: auto;
	}
}

/*===================articles===================*/
.articles-flex-container {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	gap: 48px; /* 画像とテキストの間隔 */
	padding-bottom: 152px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.articles-flex-container {
	margin: 0 auto;
	display: block;/* スマホの時だけ縦並びにする */
	width: 80%;/* 幅を80%に縮小 */
	}
}

#articles h2 {
	padding-bottom: 64px;
}

#articles img {
	width: 480px; /* 画像サイズは適宜調整 */
	height:272px
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#articles img {
	text-align: center;
	padding-bottom: 32px;
	width: 80%;/* 幅を80%に縮小 */
	height: auto;
	}
}

/*===================footer===================*/
footer{
	padding: 128px 64px;/* 上下の余白 */
	background-color: #F4F4F4;
}

.footer-flex-container {
	margin: 0 auto;
	max-width: 960px;
}

.footer-nav ul{
	padding-bottom: 64px;
	display: flex;
	flex-wrap: wrap;       /* 折り返し制御 */
	justify-content: center; /* 中央揃え */
}
.footer-nav ul li {
	margin: 0 16px 12px 16px;      /* 各liの間隔 */
	min-width: 100px;              /* 任意。0だと極小に詰まりすぎる場合があるので推奨 */
}

.footer-copyright{
	margin-top: 128px;
}

footer p{
	text-align: center;
}