@media screen and (max-width: 768px) {

	/*------���L�����Ƃ̋L�q�X�^�[�g��------*/

	:root {
		--ma_fetured_tl_bg: #2c80b4;
		--ma_fetured_tl_img: url(../img/obi_chapter.webp);
		--main-color: #871b20;
	}

	body {

		& p {
			font-size: 15px;
			line-height: 1.7;
		}
	}

	.ma_featured_subject {
		font-size: 15px;
		line-height: 1.7;
	}



	.ma_featured_wrap {
		margin-bottom: 40px;
	}

	.ma_featured_inner {
		width: 90%;
		margin: 0 auto;
	}

	.ma_fetured_tl {
		position: relative;
		display: flex;
		font-size: 18px;
		background-color: var(--ma_fetured_tl_bg);
		width: 100%;
		height: 60px;
		align-items: center;
		padding: 20px 20px;
		box-sizing: border-box;
		margin-top: 50px;
		color: #fff;


		&::before {
			background: var(--ma_fetured_tl_img)  no-repeat;
			position: absolute;
			width: 100px;
			height: 50px;
			top: -32px;
			content: "";
			display: block;
			background-size: 100%;
			left: 10px;
		}
	}

	.main {
		background-image: url(../img/22353008.png);
		background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
        width: 100%;
        height: 14vh;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			background-image: url(../img/okonomiyaki.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 80px;
            height: 50px;
            top: 41px;
            right: 11px;
		}

		& img {
			width: 240px;
			margin-top: 30px;

		}

	}

	.hiroshima{
		margin-top: 28px;
	}

	.topic__txt {
		color: #fff;
		background-color: var(--main-color);
		font-size: 16px;
    	letter-spacing: 2px;
		text-align: center;
		border: 1px solid #fff;
	}

	.repo {
		position: relative;
		z-index: 2;
		margin-top: 14px;
	}

	.repo_txt {
		padding: 10px;
	}

	.repo__img img {
		width: 200px;
	}

	.repo__list {
		display: flex;
		align-items: center;
		margin-top: -30px;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			background-image: url(../img/neco.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 100px;
            height: 150px;
            top: -119px;
            right: 0;
		}
	}

	.repo__item img {
		width: 200px;
	}

	.repo__item--l {
		width: 40%;
	}

	/* hiroshima_repo */
	.topic__repo {
		background-image: url(../img/photo_repo01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
        height: 250px;
	}

	.topic__txt--repo {
		width: 80%;
	}

	.repo_txt--wh {
		color: #fff;
		background-color: var(--main-color);
	}

	/* hiroshima_go */
	.topic__go {
		background-image: url(../img/photo_go01.JPG);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
        height: 250px;
	}

	/* .topic__txt--go {
		width: 80%;
	} */

	.repo_txt--go {
		border: 2px solid var(--main-color);
	}

	.repo__list--go {
		position: relative;
		z-index: 1;
	
		&::before {
			content: '';
			position: absolute;
			background-image: url(../img/moyou01.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 350px;
			height: 350px;
			top: 45px;
			right: 0;
			z-index: -1;
		}

		&::after {
			content: '';
			position: absolute;
			background-image: url(../img/momiji_red.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 150px;
			height: 150px;
			right: 0;
			transform: rotate(25deg);
		}
	}

	.repo__item--go {

		& img {
		width: 440px;
		}
	}

	.topic__night--01 {
		position: relative;
		display: flex;
		align-items: center;
        gap: 30px;
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			background-image: url(../img/momiji_yellow.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 100px;
            height: 100px;
            top: -77px;
			right: 0;
			transform: rotate(25deg);
		}
	}

	.night_img--01 {
		width: 100%;

		& img {
			width: 100%;
		}
	}

	.topic__night--02 {
		display: flex;

		& img {
			width: 100%;
		}
	}

	.night_img--04 {
		width: 60%;
	}

	/* hiroshima_shimanami */
	.topic__shimanami {
		background-image: url(../img/photo_shimanami01.jpeg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
        height: 250px;
	}

	.topic__txt--shima {
		width: 40%;
	}

	.repo_txt--red {
		color: var(--main-color);
		background-color: #fff;
		border: 1px solid var(--main-color);
	}

	.repo__img--rashi {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			background-image: url(../img/hakase_momiji.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 100px;
			height: 200px;
			bottom: -49px;
			right: 22px;
		}
	}

	.chari {
		position: relative;
		margin-top: -47px;
		z-index: 1;
	}

	/* itsukushima */
	.itsukushima {
		margin-top: 36px;
	}

	.topic__sab {
		font-size: 20px;
		letter-spacing: 2px;
		font-family: 
			"Times New Roman",
			 "YuMincho", 
			 "Hiragino Mincho ProN",
			 "Yu Mincho", "MS PMincho", 
			 serif;
		font-weight: bold;
	}

	.content__itsuku {
		padding: 20px 4% 60px;
		border: 4px solid var(--main-color);
		position: relative;
		margin-top: 14px;

		&::before {
			content: '';
			position: absolute;
			border: 2px solid var(--main-color);
			top: -10px;
            left: -10px;
            right: -6px;
            bottom: -6px;
			width: calc(100% + 16px); /* 親要素より少し大きくする */
			height: calc(100% + 16px);
			z-index: -1; /* 背面に配置 */

		}
	}

	.content__topic {
		display: flex;
		gap: 14px;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			background-image: url(../img/hiroshima02.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 120px;
            height: 200px;
            top: -103px;
			right: 0;
		}
	}

	.topic__img {
		width: 20%;
	}

	.topic__itsukushima {
		color: var(--main-color);
		font-size: 36px;
		font-family: 
			"Times New Roman",
			 "YuMincho", 
			 "Hiragino Mincho ProN",
			 "Yu Mincho", "MS PMincho", 
			 serif;
	}

	.itsuku__ditail {
		padding: 20px;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			background-image: url(../img/momizi.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 30%;
            height: 150px;
            left: 10px;
            bottom: -11px;
		}
	}

	.itsuku__mino {
		width: 100%;
	}

	.itsuku__mino--img {
		display: block;
		margin-left: auto;
		width: 50%;
	}

	.memory__list {
		display: flex;
		/* align-items: center; */
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
		margin-top: 30px;

		& img {
			object-fit: cover;
			width: 294px;
			height: 165px;
		}
	}

	.memory__item {
		width: calc(40% - 10px);
	}
	
}




/* media screen fin */