@charset "utf-8";

body {
    /*******************************　01　layout　*/

    /*******************************　02　area　*/
    width: 100%;
    min-width: 300px;
    /*******************************　03　background　*/

    /*******************************　04　border　*/

    /*******************************　05　typography　*/
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    /* font-family: "Roboto", "Noto Serif JP", sans-serif; */
    font-weight: 300;
    font-style: normal;
    /*******************************　06　others　*/
}

header {
    /*******************************　01　layout　*/
    display: grid;
    place-content: center;
    /*******************************　02　area　*/
    width: 100%;
    height: 101svh;
    margin-bottom: 50vh;
    /*******************************　03　background　*/

    /*******************************　04　border　*/
    border-bottom: 1px solid #000;
    /*******************************　05　typography　*/

    /*******************************　06　others　*/
}

header h1 {
	/*******************************　01　layout　*/
    position: fixed;
    z-index: 100;
    right: 0.5rem;
    bottom: 0.5rem;
	/*******************************　02　area　*/
    width: 8rem;
    height: 2.3rem;
	/*******************************　03　background　*/
    background-color: #fff;
	/*******************************　04　border　*/
    border-radius: 1.2rem;
    border: 0.05rem solid #000;
	/*******************************　05　typography　*/
    font-size: 0.8rem;
    text-align: center;
    color: #000;
	/*******************************　06　others　*/
}

header h1 a {
	/*******************************　01　layout　*/
    display: grid;
    place-items: center;
	/*******************************　02　area　*/
    width: 100%;
    height: 100%;
	/*******************************　03　background　*/

	/*******************************　04　border　*/

	/*******************************　05　typography　*/

	/*******************************　06　others　*/
}

header h2 {
	/*******************************　01　layout　*/

	/*******************************　02　area　*/
    padding-bottom: 0.3rem;
	/*******************************　03　background　*/

	/*******************************　04　border　*/
    border-bottom: 1px solid #000;
	/*******************************　05　typography　*/
	font-size: 1.2rem;
	text-align: center;
	/*******************************　06　others　*/
}

header h2 mark {
	/*******************************　01　layout　*/

	/*******************************　02　area　*/
    display: block;
    /*******************************　03　background　*/

	/*******************************　04　border　*/

    /*******************************　05　typography　*/
	font-size: 0.7rem;
	text-align: center;
    padding-bottom: 0.3rem;
	/*******************************　06　others　*/
}

header p {
	/*******************************　01　layout　*/
	position: relative;
	/*******************************　02　area　*/
    margin-top: 1rem;
	/*******************************　03　background　*/

	/*******************************　04　border　*/

	/*******************************　05　typography　*/
	font-size: 0.9rem;
	text-align: center;
	/*******************************　06　others　*/
}

header p::before {
	/*******************************　01　layout　*/
	content: "start";
	position: absolute;
	bottom: -2.5rem;
	right: -1.5rem;
	left: 0;

	margin: auto;
	/*******************************　02　area　*/
	width: fit-content;
	height: fit-content;
	/*******************************　03　background　*/

	/*******************************　04　border　*/

	/*******************************　05　typography　*/

	/*******************************　06　others　*/
	transform: rotate(90deg);
}

@keyframes scrollAnimation {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	50.1% {
		transform: scaleY(1);
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

header p::after {
	/*******************************　01　layout　*/
	content: "";
	position: absolute;
	bottom: -3.5rem;
	right: 0;
	left: 0;
	margin-inline: auto;
	/*******************************　02　area　*/
	width: 0.035rem;
	height: 3rem;
	/*******************************　03　background　*/
	background-color: #000;
	/*******************************　04　border　*/

	/*******************************　05　typography　*/

	/*******************************　06　others　*/
	animation-name: scrollAnimation;
	animation-duration: 1.8s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

footer {
	/*******************************　01　layout　*/
	display: grid;
	place-content: center;
	/*******************************　02　area　*/
	width: 100%;
	min-height: 100vh;
	margin-top: 50vh;
	/*******************************　03　background　*/
	background-color: #000;
	/*******************************　04　border　*/

	/*******************************　05　typography　*/
	color: #fff;
	/*******************************　06　others　*/
}

footer p {
	/*******************************　01　layout　*/
	position: relative;
	/*******************************　02　area　*/
    margin-bottom: 1rem;
	/*******************************　03　background　*/

	/*******************************　04　border　*/
    border-top: 1px solid #000;
	/*******************************　05　typography　*/
	font-size: 0.9rem;
	text-align: center;
	/*******************************　06　others　*/
}

footer p::before {
	/*******************************　01　layout　*/
	content: "end";
	position: absolute;
	top: -2.5rem;
	right: -1.5rem;
	left: 0;

	margin: auto;
	/*******************************　02　area　*/
	width: fit-content;
	height: fit-content;
	/*******************************　03　background　*/

	/*******************************　04　border　*/

	/*******************************　05　typography　*/

	/*******************************　06　others　*/
	transform: rotate(90deg);
}

@keyframes scrollAnimation {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	50.1% {
		transform: scaleY(1);
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

footer p::after {
	/*******************************　01　layout　*/
	content: "";
	position: absolute;
	top: -3.5rem;
	right: 0;
	left: 0;
	margin-inline: auto;
	/*******************************　02　area　*/
	width: 0.035rem;
	height: 3rem;
	/*******************************　03　background　*/
	background-color: #fff;
	/*******************************　04　border　*/

	/*******************************　05　typography　*/

	/*******************************　06　others　*/
	animation-name: scrollAnimation;
	animation-duration: 1.8s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}


/***********************************************************
試作
***********************************************************/

/***********************************　main.a02 > section.b03 */
.a02 .b03 {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/
    width: 100%;
    /* padding: 0 0.5rem; */
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > h2.c01 */
.a02 .b03 .c01 {
    /*******************************　01　配置　*/
    position: relative;
    /*******************************　02　領域　*/
    width: fit-content;
    margin: 0 auto 2rem;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 2.6rem;
    /* 英語　大文字 */
    text-transform: uppercase;
    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > h2.c01::after 右の線*/
.a02 .b03 .c01:after {
    /*******************************　01　配置　*/
    content: "";
    position: absolute;
    right: -2rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    /*******************************　02　領域　*/
    width: 1.5rem;
    /* 右の線 四角形の縦の辺の長さ（線の太さを表す効果） */
    height: 0.1rem;
    /*******************************　03　背景　*/
    /* 右の線 四角形の背景色 */
    background-color: #000;
    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > h2.c01::after 右の線*/
.a02 .b03 .c01::before {
    /*******************************　01　配置　*/
    content: "";
    position: absolute;
    left: -2rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    /*******************************　02　領域　*/
    width: 1.5rem;
    /* 右の線 四角形の縦の辺の長さ（線の太さを表す効果） */
    height: 0.1rem;
    /*******************************　03　背景　*/
    /* 右の線 四角形の背景色 */
    background-color: #000;
    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > h2.c01 > mark.d01　*/
.a02 .b03 .c01 .d01 {
    /*******************************　01　配置　*/
    position: absolute;
    bottom: -0.7rem;
    right: 0;
    left: 0;
    margin-inline: auto;
    /* 改行効果 */
    display: block;
    /*******************************　02　領域　*/

    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 1rem;
    text-align: center;
    /*******************************　06　其他　*/
}



































/***********************************　main.a02 > section.b03 > ul.c02 */
.a02 .b03 .c02 {
    /*******************************　01　配置　*/
    /* 子要素 */
    display: grid;
    /* 列 */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.7rem;
    /*******************************　02　領域　*/
    padding: 0 0.5rem;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

@media screen and (max-width:500px) {
    .a02 .b03 .c02 {
        /* 列 */
        grid-template-columns: unset;
        grid-template-columns: repeat(12, min(70vw, 70vh));
        overflow: scroll;
        padding-bottom: 1.5rem;
    }

}

@media screen and (max-height:500px) {
    .a02 .b03 .c02 {
        /* 列 */
        grid-template-columns: unset;
        grid-template-columns: repeat(12, min(50vw, 50vh));
        overflow: scroll;
        padding-bottom: 1.5rem;
    }

}


/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 */
.a02 .b03 .c02 .d01 {
    /*******************************　01　配置　*/
    position: relative;
    /*******************************　02　領域　*/
    /* 自要素（カード型レイアウト）の縦横比 */
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    /*******************************　03　背景　*/
    box-shadow: 0.05rem 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
    /*******************************　04　境界　*/
    border: 0.01rem solid rgba(0, 0, 0, 0.25);
    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
    container-type: inline-size;
}

@media screen and (max-height:500px) {
    .a02 .b03 .c02 .d01:first-child {
        /*******************************　01　配置　*/

        /*******************************　02　領域　*/
        margin-left: 0.5rem;
        /*******************************　03　背景　*/

        /*******************************　04　境界　*/

        /*******************************　05　文字　*/

        /*******************************　06　其他　*/
    }

    .a02 .b03 .c02 .d01:last-child {
        /*******************************　01　配置　*/

        /*******************************　02　領域　*/
        margin-right: 0.5rem;
        /*******************************　03　背景　*/

        /*******************************　04　境界　*/

        /*******************************　05　文字　*/

        /*******************************　06　其他　*/
    }

}


/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e01 */
.a02 .b03 .c02 .d01 .e01 {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/
    width: 100%;
    aspect-ratio: 1000 / 667;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e01 > img */
.a02 .b03 .c02 .d01 .e01 img {
    /*******************************　01　配置　*/
    display: block;
    /*******************************　02　領域　*/
    width: 100%;
    object-fit: contain;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}


/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e02 */
.a02 .b03 .c02 .d01 .e02 {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/
    width: 100%;
    padding: 1.5cqw;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 8cqw;
    letter-spacing: 0.2cqw;
    text-transform: uppercase;
    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e02 > span.f01 */
.a02 .b03 .c02 .d01 .e02 .f01 {
    /*******************************　01　配置　*/
    display: block;
    /*******************************　02　領域　*/

    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 7cqw;
    /*******************************　06　其他　*/
}


/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e04 */
.a02 .b03 .c02 .d01 .e03 {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/
    width: 100%;
    padding: 1.5cqw;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 7cqw;
    line-height: 1.3;
    text-transform: capitalize;
    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e04 > strong.f01 */
.a02 .b03 .c02 .d01 .e03 .f01 {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/

    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-weight: 600;
    text-transform: uppercase;
    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e04 */
.a02 .b03 .c02 .d01 .e04 {
    /*******************************　01　配置　*/
    position: absolute;
    bottom: 2cqw;
    right: 2cqw;
    /*******************************　02　領域　*/
    width: fit-content;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/
    border: solid #000 0.5cqw;
    border-radius: 8cqw;
    /*******************************　05　文字　*/
    font-size: 7cqw;
    letter-spacing: 0.3cqw;
    text-transform: capitalize;
    /*******************************　06　其他　*/
}

.a02 .b03 .c02 .d01 .e04::after {
    /*******************************　01　配置　*/
    content: "→";
    position: absolute;
    right: 2cqw;
    top: 0;
    bottom: 0;
    margin-block: auto;
    z-index: -1;

    /* 子要素 */
    display: grid;
    align-content: center;
    /*******************************　02　領域　*/

    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/
    font-size: 7cqw;
    /*******************************　06　其他　*/
}

/***********************************　main.a02 > section.b03 > ul.c02 > li.d01 > p.e04 > a */
.a02 .b03 .c02 .d01 .e04 a {
    /*******************************　01　配置　*/

    /*******************************　02　領域　*/
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.5cqw 10cqw 1.5cqw 5cqw;
    /*******************************　03　背景　*/

    /*******************************　04　境界　*/

    /*******************************　05　文字　*/

    /*******************************　06　其他　*/
}

/* 
<!-- guide css -->
<!-- <link rel="stylesheet" href="css/guide_*.css"> -->
<!-- <link rel="stylesheet" href="css/guide_color.css"> -->
<!-- <link rel="stylesheet" href="css/guide_culumn.css"> -->
<!-- <link rel="stylesheet" href="css/guide_row.css"> -->
*/

/* 
<div class="guide_left01"></div>
<div class="guide_left02"></div>
<div class="guide_left03"></div>
<div class="guide_left04"></div>
<div class="guide_right01"></div>
<div class="guide_right02"></div>
<div class="guide_right03"></div>
<div class="guide_right04"></div>
<div class="guide_row00"></div>
<div class="guide_row01"></div>
<div class="guide_row02"></div>
<div class="guide_row03"></div>
<div class="guide_row04"></div>
<div class="guide_row05"></div>
<div class="guide_row06"></div>
<div class="guide_row07"></div>
<div class="guide_row08"></div>
<div class="guide_row09"></div>
<div class="guide_row10"></div>
<div class="guide_culumn_left01"></div>
<div class="guide_culumn_left02"></div>
<div class="guide_culumn_left03"></div>
<div class="guide_culumn_left04"></div>
<div class="guide_culumn_right01"></div>
<div class="guide_culumn_right02"></div>
<div class="guide_culumn_right03"></div>
<div class="guide_culumn_right04"></div>
<div class="guide_culumn00"></div>
<div class="guide_culumn01"></div>
<div class="guide_culumn02"></div>
<div class="guide_culumn03"></div>
<div class="guide_culumn04"></div>
<div class="guide_culumn05"></div>
<div class="guide_culumn06"></div>
<div class="guide_culumn07"></div>
<div class="guide_culumn08"></div>
<div class="guide_culumn09"></div>
<div class="guide_culumn10"></div>
<div class="guide_culumn11"></div>
<div class="guide_culumn12"></div>
*/