@charset "utf-8";

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

body {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
	font-size: 100%;
}

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

/*-------------------------------------
タグの基本設定
--------------------------------------*/
body {
    /* 青灰色に淡い光・グリッド・パステルカラーの曲線を重ねた背景 */
    min-height: 100vh;
    background-color: #edf1f5;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221000%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.35%22%3E%3Cpath%20stroke%3D%22%2383b8cf%22%20d%3D%22M-120%20360%20C100%2060%20270%2080%20440%20-100%22%2F%3E%3Cpath%20stroke%3D%22%23b4a3d6%22%20d%3D%22M-120%20425%20C150%20100%20310%20145%20520%20-100%22%2F%3E%3Cpath%20stroke%3D%22%23d4a3b8%22%20d%3D%22M1140%20-100%20C1280%20170%201510%2070%201730%20340%22%2F%3E%3Cpath%20stroke%3D%22%238cbfb8%22%20d%3D%22M1730%20610%20C1440%20500%201510%20930%201110%201100%22%2F%3E%3Cpath%20stroke%3D%22%23d0b382%22%20d%3D%22M1730%20675%20C1490%20570%201555%20970%201220%201100%22%2F%3E%3Cpath%20stroke%3D%22%23a6afd3%22%20d%3D%22M-130%20740%20C110%20630%20170%20980%20480%201100%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        radial-gradient(ellipse at 8% 5%, rgba(144, 216, 230, 0.22), transparent 55%),
        radial-gradient(ellipse at 95% 85%, rgba(175, 181, 224, 0.18), transparent 55%),
        linear-gradient(rgba(72, 100, 125, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 100, 125, 0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 80px 80px, 80px 80px;
    background-attachment: fixed;
	line-height: 1.6;
	font-size: 121.875%;
	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: 945px;
	padding: 10px 0;
	margin: 0 auto;
	background: transparent;
}

/*-------------------------------------
h1　大見出し（タイトル）
--------------------------------------*/
h1 {
	padding: 10px;
	text-align: center;
	font-size: 200%;
	font-weight: bold;
	color: #504946;
}

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

/*-------------------------------------
Nav　グローバルナビゲーション
--------------------------------------*/
nav {
	width: 945px;
	margin: 0 auto;
}

nav ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav ul li {
	list-style: none;
	width: auto;
	font-size: 1.2em;
	margin: 0 0 20px 0;
	float: none;
}

/*通常時時*/
nav ul li a {
	display: block;
	padding: 15px 8px;
	white-space: nowrap;
	background: transparent;
	text-align: center;
	text-decoration: none;
	color: #414141;
	overflow: hidden;
}

/*マウスをリンクの上に置いた時*/
nav ul li a:hover {
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	color: #504946;
}

/*リンクが有効になった時*/
nav ul li.active a {
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	color: #504946;
}

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

/*-------------------------------------
Main_h2　小見出し
--------------------------------------*/
div#Main h2 {
	font-size: 105%;
	font-weight: bold;
	color: #504946;
	padding-bottom: 5px;
}

/*-------------------------------------
Main_TopImg　トップページの画像
--------------------------------------*/
div#Main div#TopImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_PortImg　課題ページの画像
--------------------------------------*/
div#Main div#PortImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_p　学校生活での感想 / 課題の感想
--------------------------------------*/
div#Main p {
	color: #504946;
	margin-top: 10px;
}

/*-------------------------------------
Main_table　課題ページの表
--------------------------------------*/
div#Main table {
    width: 100%;
    margin: 16px auto 20px;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.30));
    box-shadow: 0 8px 28px rgba(66, 91, 121, 0.05);
}

div#Main table tr th {
    width: 25%;
    padding: 12px 16px;
    background: rgba(225, 234, 243, 0.28);
    border: 0;
    border-bottom: 1px solid rgba(103, 130, 157, 0.12);
    text-align: left;
    vertical-align: top;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.88;
    letter-spacing: 0.05em;
    color: #52687c;
}

div#Main table tr td {
    width: 75%;
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid rgba(103, 130, 157, 0.12);
    text-align: left;
    vertical-align: top;
    color: #3f4c5a;
}

div#Main table tr:last-child th,
div#Main table tr:last-child td {
    border-bottom: 0;
}

div#Main table tr th:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 0.8em;
    margin-right: 8px;
    border-radius: 4px;
    background: #90b7cb;
}

div#Main table tr:nth-child(2) th:before {
    background: #b2a5ce;
}

div#Main table tr:nth-child(3) th:before {
    background: #86b7af;
}

div#Main table tr:nth-child(4) th:before {
    background: #c7a4b4;
}

div#Main table tr:first-child td {
    font-weight: 600;
    color: #344b62;
}
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　ページトップへ移動
--------------------------------------*/
p.pagetop{
	text-align: right;
}

/*-------------------------------------
address　コピーライトマーク
--------------------------------------*/
address {
	clear: both;
	text-align: center;
	color: #504946;
}

/* 課題3・4：左に動画、右に課題の詳細 */
div#Main.project-side-by-side {
    width: 905px;
    clear: both;
}

div#Main.project-side-by-side .project-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    margin-top: 10px;
}

div#Main.project-side-by-side .project-layout:after {
    content: none;
}

div#Main.project-side-by-side div#PortImg {
    margin: 0;
    text-align: left;
}

div#Main.project-side-by-side table {
    width: 100%;
    margin: 0;
}

div#Main.project-side-by-side table tr th {
    width: 6.5em;
    white-space: nowrap;
}

div#Main.project-side-by-side table tr td {
    width: auto;
    overflow-wrap: anywhere;
}

/* HOME：紹介文とイラスト */
.home-page div#Container {
    width: calc(100% - 40px);
    max-width: 945px;
}

.home-page div#Contents,
.home-page nav {
    width: 100%;
}

div#Main.home-hero {
    width: calc(100% - 40px);
    max-width: 905px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: center;
    padding: 28px 0 60px;
}

div#Main.home-hero:after,
.home-copy:after,
div#Main .home-visual:after {
    content: none;
}

.home-copy {
    position: relative;
    min-width: 0;
    padding: 8px 0 8px 30px;
}

.home-curve {
    position: absolute;
    top: 12px;
    left: 0;
    width: 22px;
    height: calc(100% - 24px);
    opacity: 0.65;
    pointer-events: none;
}

div#Main h2.home-headline {
    padding: 0;
    margin: 0 0 28px;
    font-weight: 500;
    line-height: 1.5;
}

.home-headline-lead {
    display: block;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #536575;
}

.home-headline-focus {
    display: block;
    margin-top: 8px;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #446c83;
}

div#Main .home-copy p {
    margin-top: 0;
    font-size: 17px;
    line-height: 2.1;
    letter-spacing: 0.025em;
    color: #53616d;
    overflow-wrap: anywhere;
}

div#Main div#TopImg.home-visual {
    min-width: 0;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(77, 105, 135, 0.09);
}

.home-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
}

@media (max-width: 960px) {
    .home-page nav ul {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 12px;
    }

    .home-page nav ul li {
        font-size: 1em;
        margin-bottom: 8px;
    }
}

@media (max-width: 760px) {
    div#Main.home-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 24px 0 44px;
    }

    .home-headline-focus {
        font-size: clamp(30px, 7vw, 44px);
    }

    .home-headline-lead {
        font-size: 19px;
    }
}

/* HOMEイラストのクレジット */
.home-figure {
    min-width: 0;
    margin: 0;
}

.home-image-credit {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #687887;
    text-align: right;
}