@charset "utf-8";

/*-------------------------------------
css初期化
--------------------------------------*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	font-size: 100%;
}

div:after {
	content: "";
	display: block;
	clear: both;
}

/*-------------------------------------
タグの基本設定
--------------------------------------*/
body {
    background-image: url('../img/bg-autumn.png'); /* 画像を背景に指定 */
    background-repeat: no-repeat;                 /* 繰り返しを防止 */
    background-position: center top;              /* 常に画面の真ん中基準で配置 */
    background-size: cover;                       /* 画面いっぱいにフィットさせる */
    background-attachment: fixed;                 /* スクロールしても落ち葉を固定する */
    line-height: 1.6;
    font-size: 81.25%;
    color: #7a2e00;
}

html {
	overflow-y: scroll;
}

a {
	text-decoration: none;
	outline: none;
	color: #7a2e00;
}

a:hover{
	text-decoration: underline;
	color: #666666;
}

a:hover img{
	opacity: 0.80;
}

/*--------------------------------------------------------------------
Container
--------------------------------------------------------------------*/
div#Container {
	width: 944px;
	padding: 10px 0;
	margin: 0 auto;
	background: #fff;
}

/*--------------------------------------------------------------------
h1
--------------------------------------------------------------------*/
h1 {
	padding: 10px 0;
	text-align: center;
}

/*--------------------------------------------------------------------
Contents
--------------------------------------------------------------------*/
div#Contents {
	width: 944px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}

div#Contents:after {
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	content: "";
}

/*--------------------------------------------------------------------
Nav
--------------------------------------------------------------------*/
nav {
	width: 944px;
	margin: 0 auto;
}

nav ul li {
	list-style: none;
	width: 236px;
	margin: 0 0 20px 0;
	float: left;
}

nav ul li a {
	display: block;
	width: 236px;
	height: 0px;
	padding-top:50px;
	overflow: hidden;
}

nav ul li#nav01 a {
  background-image: url(../img/button01.png);
}

nav ul li#nav02 a {
  background-image: url(../img/button02.png);
}

nav ul li#nav03 a {
  background-image: url(../img/button03.png);
}

nav ul li#nav04 a {
  background-image: url(../img/button04.png);
}

nav ul li a:hover,
	nav ul#index li#nav01 a,
	nav ul#kadai01 li#nav02 a,
	nav ul#kadai02 li#nav03 a,
	nav ul#kadai03 li#nav04 a{
	background-position: 0 -50px;
}

/*--------------------------------------------------------------------
Main
--------------------------------------------------------------------*/
div#Main {
	width: 700px;
	margin: 0 auto;
}

div#Main h2 {
	font-size: 18px;
	font-weight: bold;
	color: #504946;
	 margin-top: 60px !important;    /* 🌟全ページ共通でメニューバーの下にきれいに並べます */
     margin-bottom: 30px !important; /* 🌟全ページ共通で作品との間隔を一定にします */
}

div#Main div#TopImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

div#Main div#PortImg, div#Main .PortImgSub {
    margin: 10px auto 0 auto;
    text-align: center;
}

div#PortImg img {
  /* 濃いめのブラウンの影 ＋ 引き締める黒い影の2重技 */
  box-shadow: 0 15px 35px rgba(100, 80, 60, 0.35), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.PortImgSub {
  /* 濃いめのブラウンの影 ＋ 引き締める黒い影の2重技 */
  box-shadow: 0 15px 35px rgba(100, 80, 60, 0.35), 0 5px 15px rgba(0, 0, 0, 0.1);
}


/* ★ここに、今コピーしてくれたスマホ風のCSSをそのまま貼り付けます★ */
div#Main .PortVideo {
    width: 300px;                /* 横幅はそのまま */
    height: 528px;               /* 縦幅もそのまま */
    margin: 40px auto;           /* 上下の隙間を少し広げて、傾けたときに見やすくします */
    background-color: #000;      /* スマホの黒フチ */
    padding: 6px;                /* ★ここを「12px」から「6px」にしてフチを細くしました！ */
    border-radius: 36px;         /* 角丸 */
    box-shadow: -10px 15px 30px rgba(0,0,0,0.2); /* ★影の位置を調整して、斜めの立体感を出しました */
    box-sizing: border-box;      

    /* ★ここを追加して、スマホ全体を右に少し傾けています！ */
    transform: rotate(5deg);     
}
/* ☕ コーヒーのページ専用：2本の動画を横並びにする */
div#Main .CoffeeVideo {
    display: flex;            /* 2本を横に並べます */
    justify-content: center;  /* 2本の動画を真ん中寄せにします */
    gap: 50px;                /* 動画と動画の間に50pxの隙間を作ります */
    margin: 40px auto;        /* 全体の中央寄せと上下の余白 */
    position: relative;
    left: 35px;              /* 40px右に動かす→リールが中央に */
}

/* 2本の動画それぞれの箱のサイズ（2本綺麗に並ぶように少しスリムなサイズです） */
div#Main .CoffeeVideo > div {
    width: 240px;             /* 横並び用に240pxに調整（お好みに合わせて変えてOK） */
    height: 422px;            /* 横幅に合わせた縦幅（比率キープ） */
    border-radius: 16px;      /* 緩やかな角丸 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 柔らかい影 */
    overflow: hidden;         /* 角丸からはみ出さない設定 */
    background-color: #000;
}

/* 中の動画をぴったり収める設定 */
div#Main .CoffeeVideo video {
    width: 100%;
    height: 100%;
    object-fit: contain;      
}


/* ==========================================
   新しいデザイン：左右黒・W700用の追加コード 
   ========================================== */

/* 1. 外枠（課題指定：W700 × H850） */
div#Main .PortVideo-wide {
  width: 700px;
  height: 850px;
  background-color: #ffffff; /* サイト全体の白背景に馴染ませる */
  padding: 30px;            /* 上下左右に30pxの余白を確実に作る */
  margin: 40px auto;        /* 画面中央に配置 */
  box-sizing: border-box;    /* サイズをW700×H850に固定 */
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. 内側の動画エリア（ここに綺麗な黒サイドを作ります） */
div#Main #movie-wide {
  width: 100%;
  height: 100%;
  background-color: #111111; /* ★動画の左右をしっかりと締める黒 */
  border-radius: 12px;       /* 角丸 */
  overflow: hidden;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. 動画自体のサイズ微調整 */
div#Main #movie-wide video {
  width: auto;               /* 横幅は動画の縦長比率をそのままキープ（左右に黒帯が出る） */
  height: 100%;              /* 縦幅を内枠の高さ（820px）にぴったり合わせる */
  max-width: 100%;           
  object-fit: contain;       /* 比率を絶対に崩さずに枠内に収める */
}

div#Main .PortVideo video {
    width: 100%;                 /* 横幅いっぱい */
    height: 100%;                /* 縦幅もいっぱい（これで縦長にフィットします） */
    object-fit: cover;           /* 動画が枠内に綺麗に収まるようにトリミングする設定 */
    display: block;
    border-radius: 26px;         /* 動画の角丸 */
}

div#Main p {
	color: #7a2e00;
	margin-top: 10px;
}

/* ☕ コーヒーページの見出し文字のデザイン（修正版） */
div#Main .video-title {
    font-size: 20px;          /* 文字の大きさ */
    color: #7a2e00;           /* 表と同じ茶色 */
    text-align: left;         /* 🌟 「center」から「left」に変えて左詰めにします */
    margin-top: 40px;         /* 🌟 新しく追加：上の要素（白いボックス）との隙間をしっかり空けます */
    margin-bottom: 15px;      /* 動画との間の隙間 */
    font-weight: bold;        /* 文字を太字にします */
}

/* 🛠️ 修正後：表の上の隙間を「30px」に広げます */
div#Main table {
	width: 80%;
	margin: 30px auto 20px auto;
	border-collapse: collapse;
	border: 0 none;
}

div#Main table tr th {
	width: 25%;
	padding: 5px 10px;
	background: #fd873d;
	border: 1px solid #7A2E00;
	text-align: left;
	vertical-align: top;
	color: #fff;
}

div#Main table tr td {
	width: 75%;
	padding: 5px 10px;
	border: 1px solid #7A2E00;
	text-align: left;
	vertical-align: top;
}

div#Main table tr td ul {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

div#Main table tr td ol {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}
/*--------------------------------------------------------------------
以下自分ポスター用に挿入
--------------------------------------------------------------------*/
#Main h3 {
  margin-top: 40px;
  margin-bottom: 15px;
  text-align: center;
}

#MindMap {
  text-align: center;
  margin-bottom: 30px;
}

/*--------------------------------------------------------------------
pagetop
--------------------------------------------------------------------*/
.pagetop {
	text-align: right;
}

/*--------------------------------------------------------------------
address
--------------------------------------------------------------------*/
address {
	clear: both;
	text-align: center;
	color: #504946;
}