@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: #FBFBFA;/* 画面の両端の色 */
	
        background-image:
        url("../img/side-left.png"),
        url("../img/side-right.png");

    background-repeat:
        repeat-y,
        repeat-y;

    background-position:
        left top,
        right top;
    
    
    line-height: 1.6;
	font-size: 14.5px;
	font-weight: bold;
	color: #3a2e2b;
	/* font-family: "Noto Serif JP", serif; */
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 350;
}

html {
	overflow-y: scroll;
}

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

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: #FBFBFA;/* コンテンツ内の背景色 */
}

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

/* 固定追従 */
h1 {
    /* padding: 10px 0; */
    padding: 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1001;
    height: 100px;
    overflow: hidden;
}

h1 img {
    width: 945px;
    height: 100px;
    display: block;
}

/* スクロールしてH1が小さくなったとき */
h1.is-small {
    height: 60px;
}

h1.is-small img {
    width: 945px;
    height: 60px;
}

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

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

/*--------------------------------------------------------------------
Nav
--------------------------------------------------------------------*/
nav {
	width: 945px;
	margin: 0 auto;
	/* position: relative; */
}

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

nav ul li a img:nth-child(2){
	position: absolute;
	margin-left: -189px;
  transition: opacity 1s;
}

nav ul li a:hover img:nth-child(2){
  opacity: 0;
}

/* 固定追従 */

nav {
    position: sticky;
    /* top: 120px; */
    top: 100px;
    z-index: 1000;
    background-color: #FBFBFA;
}

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

/* h1を小さくしたとき */
nav.is-small {
    top: 60px;
}



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

div#Main h2 {
	font-size: 110%;
	font-weight: bold;
	color: #3a2e2b;
    /* margin-top: 20px; */
	margin-bottom: 10px;
    padding-top: 30px;
}

div#Main h3.h3_01 {
    margin-top: 40px;
}

div#Main h3 {
	font-size: 110%;
	font-weight: 400;
	color: #3a2e2b;
    border-bottom: 1px solid #d4b26f;
    padding-bottom: 8px;
    margin-top: 60px;
    margin-bottom: 20px;
}

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

div#Main div.SideBySide {
    display: flex;
    justify-content: space-between;
}


/* ここから動画の設定 */
div#Main div.PortImg {
	/* background-image: url(../img/kadai02_2.jpg); */
	/* background-repeat: no-repeat; */
	/* height: 550px; */
	margin: 5px auto 0 auto;
	text-align: center;
}

div#Main div#PortImg video {
	
	margin: 5px auto 0 auto;
	padding-top: 47px;
	display: block;
	text-align: center;
	width: 228px
}

div#Main div#VideoPhone {
    background-image: url(../img/kadai02_2.jpg);
    background-repeat: no-repeat;
    height: 550px;
    margin: 5px auto 0 auto;
    text-align: center;
}

div#Main div#VideoPhone video {
    margin: 5px auto 0 auto;
    padding-top: 47px;
    display: block;
    text-align: center;
    width: 228px;
}
/* ここまで動画の設定 */

/* 横並びにするセット */
div#Main section.FoundationItem {
    display: flex;
}

div#Main section.FoundationItem .PortImg {
    margin: 0;
    text-align: left;
}

div#Main section.FoundationItem .FoundationText {
    padding-left: 20px;
}

/* 課題4のプレビュー用 */
div#Main div.WebDesignList {
	width: 700px;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

div#Main div.WebDesignList .WebDesignItem {
    width: 160px;
	/* flex: 0 0 160px; */
}

div#Main div.WebDesignList img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

div#Main div.WebDesignList img:hover {
    transform: scale(1.03);
}


/* ここからindexのアニメーション */
div#Main div.TopAnimation {
    width: 700px;
    position: relative;
}

div#Main div.TopAnimation img {
    width: 700px;
    height: auto;
    display: block;
}

/* 写真B */
div#Main div.TopAnimation .PhotoB {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: photoB 20s ease forwards;
    /* animation: photoB 30s ease forwards; */
}

@keyframes photoB {
    0%, 53% {
        opacity: 0;
    }

    56%, 100% {
        opacity: 1;
    }
}

/* テキスト共通 */
div#Main div.TopAnimation .Text01,
div#Main div.TopAnimation .Text02,
div#Main div.TopAnimation .Text03,
div#Main div.TopAnimation .Text04 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0;
}

/* テキスト1 */
div#Main div.TopAnimation .Text01 {
    animation: text01 20s ease forwards;
    /* animation: text01 30s ease forwards; */
}

@keyframes text01 {
    0%, 5.5% {
        opacity: 0;
    }

    /* 5.5%, 20.9% {
        opacity: 1;
    }

    20.9%, 21% {
        opacity: 0;
    } */
/* 変更案開始20260820 */
    5.5%, 18% {
    opacity: 1;
    }

    21% {
        opacity: 0;
    }
/* 変更案修了20260820 */

    21%, 100% {
        opacity: 0;
    }
}

/* テキスト2 */
div#Main div.TopAnimation .Text02 {
    animation: text02 20s ease forwards;
    /* animation: text02 30s ease forwards; */
}

@keyframes text02 {
    0%, 18.5% {
        opacity: 0;
    }
/* 変更案開始20260820 */
    /* 21%, 53.9% {
        opacity: 1;
    }

    53.9%, 54% {
        opacity: 0;
    } */

    21%, 51% {
    opacity: 1;
    }

    54% {
        opacity: 0;
    }
/* 変更案修了20260820 */
    54%, 100% {
        opacity: 0;
    }
}

/* テキスト3 */
div#Main div.TopAnimation .Text03 {
    animation: text03 20s ease forwards;
    /* animation: text03 30s ease forwards; */
}

@keyframes text03 {
    0%, 56% {
        opacity: 0;
    }

    /* 60%, 74% {
        opacity: 1;
    }

    74%, 74.5% {
        opacity: 0;
    }
 */
/* 変更案開始20260820 */
    60%, 71.5% {
        opacity: 1;
    }

    74.5% {
        opacity: 0;
    }
/* 変更案修了20260820 */
    74.5%, 100% {
        opacity: 0;
    }
}

/* テキスト4 */
div#Main div.TopAnimation .Text04 {
    animation: text04 20s ease forwards;
    /* animation: text04 30s ease forwards; */
}

@keyframes text04 {
    0%, 73% {
        opacity: 0;
    }

    76%, 100% {
        opacity: 1;
    }
}

/* ここまでindexのアニメーション */


div#Main p {
	color: #3a2e2b;
	margin-top: 5px;
	/* margin-top: 10px; */
	/* font-size: 110%; */
}

/* 感想部分の背景色 */

div#Main p.Impression {
    /* background-color: #dce7c6; */
    padding: 30px 20px;
    margin: 60px 0px;
    border: 3px double #D4B26F;
}

/* 感想部分の背景色 */

/* indexの感想部分 */
div#Main p.index {
    padding: 10px 0px 30px 0px;
}

/* 太字にしたい */
div#Main p.bold {
    font-weight: 450;
}

/* 注釈用のフォント */
div#Main .PdfNotice {
    font-size: 93%;
    margin-top: 15px;
    color: #705F59;
}

/* teble内の文字間隔 */
div#Main p.table {
    margin-bottom: 12px;
}

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

div#Main table tr th {
	width: 25%;
	padding: 8px 10px;
	/* border: 1px solid #504946; */
	text-align: left;
	vertical-align: top;
}

div#Main table tr td {
	width: 75%;
	padding: 8px 0px;
	/* padding: 8px 10px 8px 0px; */
	/* padding: 8px 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;
}

div#Main table tr td ul li {
    margin-bottom: 5px;
}

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

/* 浮き上がる */
p.pagetop img {
    transition: transform 0.3s ease;
}

p.pagetop img:hover {
    transform: translateY(-6px);
}

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

/* ==========================================================
   ここから: 全体のレイアウトを整える部分
   .container
   → 画像や見出しを中央に置くためのラッパー
   ここまで: 全体のレイアウトを整える部分
   ========================================================== */
.container {
  width: min(90%, 800px);
  margin: 80px auto;
  text-align: center;
}

/* ==========================================================
   ここから: 画像クリックのトリガー部分
   .portfolio-trigger
   → ここを押すとモーダルが開く
   ここまで: 画像クリックのトリガー部分
   ========================================================== */
.portfolio-trigger {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 30px auto 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.portfolio-trigger:hover {
  opacity: 0.8;
}

/* ==========================================================
   ここから: モーダル用のスタイル
   .portfolio-modal / .portfolio-modal__overlay / .portfolio-modal__content / .portfolio-modal__image / .portfolio-modal__close
   ここまで: モーダル用のスタイル
   ========================================================== */
.portfolio-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.portfolio-modal.is-open {
  display: flex;
}

.portfolio-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.portfolio-modal__content {
  position: relative;
  z-index: 1;
  width: min(90%, 900px);
}

.portfolio-modal__image {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.portfolio-modal__close {
  position: absolute;
  top: -45px;
  right: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}