@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: rgb(255, 255, 255);
	line-height: 1.6;
	font-size: 81.25%;
	color: #414141;
}

html {
	overflow-y: scroll;
}

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

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;
-webkit-transition: all 0.35s ease;
  transition: all 0.35s ease-out;
}

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

div#Main h2 {
	font-size: 105%;
	font-weight: bold;
	color: #504946;
}

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

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

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

div#Main table {
	width: 80%;
	margin: 10px auto 20px auto;
	border-collapse: collapse;
	border: 0 none;
}

div#Main table tr th {
	width: 25%;
	padding: 5px 10px;
	background: rgb(234, 234, 234);
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
	color: #2f2f2f;
}

div#Main table tr td {
	width: 75%;
	padding: 5px 10px;
	border: 1px solid #504946;
	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;
}

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

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

/* 各ページのタイトルだけを丸ゴシックにする */
h2 {
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 300;
}

/* --- スライドショー専用：見た目 --- */
.presentation-container {
  position: relative;
  width: 100%; 
  max-width: 900px; 
  margin: 40px auto;
  /* 上下左右に余白を作り、影が切れないようにする */
  padding: 30px 50px; 
  box-sizing: border-box;
}

/* 画像を囲む枠（ここで比率を制御） */
.slides {
  position: relative;
  width: 100%;
  /* 影を表示させるために「はみ出し」を許可 */
  overflow: visible; 
}

.slide {
  display: none; 
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 影の設定（少し広めに、柔らかく） */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* 資料の端を少しだけ丸くして上品に */
}

.slide.active {
  display: block; 
}

/* --- サイズ別の切り替え設定 --- */

/* 課題1：Full HD (16:9) */
.hd-size .slides {
  aspect-ratio: 16 / 9;
}

/* 課題2：A4 (1.414 : 1) */
.a4-size .slides {
  aspect-ratio: 1.414 / 1;
}

/* --- 矢印ボタンの設定 --- */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15); 
  color: white; 
  font-size: 20px;
  padding: 15px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

/* ボタンを影の邪魔にならない位置に配置 */
.prev { left: 0px; }
.next { right: 0px; }

.prev:hover, .next:hover {
  background: rgba(0, 0, 0, 0.5);
}