/*-----------------------

	story17 

-----------------------*/
#story17 {
	color: #fff;
}
#story17 p {
margin-bottom: 2.2rem;
}
#story17 .bg_ptn01 {
	background-image: linear-gradient(90deg, #00d1ff, #aefd8f);
}
#story17 .bg_ptn02 {
	background-image: linear-gradient(90deg, #FF99FF, #00D1FF);
}
#story17 .sec01 .story__main_ttl h2 {
	max-width: 1103px;
	margin: 0 auto 80px;
    width: 92%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#story17 .sec01 .sec01_img01 {
	width: 90%;
}
#story17 .sec01 .sec01__txt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: var(--com_mg);
}
#story17 .sec01 .sec01_img02 {
    max-width: 389px;
    width: 65%;
    margin-right: 0;
    margin-left: auto;
	margin-top: min(80px, 6.67vw);
}
#story17 .sec01 .sec01_img03 {
    max-width: 170px;
    width: 28%;
    margin: 62px auto 0;
    transform: translateX(-25%);
}
#story17 .sec01 .sec01_img04 {
	max-width: 1920px;
	width: 100%;
	margin-top: var(--com_mg);
}
@media screen and (max-width: 599px) {
	#story17 .sec01 .story__main_ttl h2 {
		max-width: 328px;
		text-align: center;
		width: 43%;
        margin-bottom: 0;
        height: 90vh;
	}
	#story17 .sec01 .sec01__txt_wrap {
		grid-template-columns: 1fr;
		margin-top: 6.4vw
	}
	#story17 .sec01 .sec01__txt_wrap .txt_box {
		order: 1;
		margin-top: -8%;
	}
	#story17 .sec01 .sec01_img_wrap {
		order: 0;
	}
	#story17 .sec01 .sec01_img02 {
		margin: 0 auto;
	}
	#story17 .sec01 .sec01_img03 {
        margin-top: 6.4vw;
        transform: translate(0);
        margin-right: 4%;
        margin-left: auto;
	}
    #story17 .sec01 .sec01_img04 {
        padding-bottom: var(--com_mg);
    }

}
/*---------- story 17 / sec02 ----------*/
#story17 .sec02 .story__main_ttl h2 {
	padding-top: var(--com_mg);
    max-width: 173px;
    width: 14%;
    margin-right: 8%;
    margin-left: auto;
}
#story17 .sec02 .sec02__txt_wrap {
	margin-top: -4%;
	padding-bottom: var(--com_mg);
}
@media screen and (max-width: 599px) {
	#story17 .sec02 .story__main_ttl h2 {
		margin: 0 auto 16.66vw;
		width: 24%;
	}
    #story17 .sec02 .sec02__txt_wrap {
        margin-top: 0;
    }
}
/*---------- story 17 / sec03 ----------*/
#story17 .sec03 {
	margin-top: -10px;
}
#story17 .sec03 .story__main_ttl h2 {
	max-width: 165px;
	margin: 0 auto;
    width: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
	padding-top: var(--com_mg);
}
#story17 .sec03 .sec03__txt_wrap  {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: var(--com_mg);
	padding-bottom: var(--com_mg);
}
#story17 .sec03 .sec03_img01  {
	max-width: 408px;
	width: 68%;
	margin-right: 0;
	margin-left: auto;
}
@media screen and (max-width: 599px) {
	#story17 .sec03 .story__main_ttl h2 {
		margin: 0 auto 16.66vw;
		width: 24%;
	}
	#story17 .sec03 .sec03__txt_wrap  {
		padding-top: 0;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
	}
	#story17 .sec03 .sec03_img01 {
        margin: 10.66vw auto 0;
        width: 50%;
	}
}
/*---------- story 17 / sec04 ----------*/
#story17 .sec04 .sec_content_inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: var(--com_mg);
}
#story17 .sec04 .story__main_ttl h2 {
	max-width: 366px;
	width: 62%;
	margin: 0 auto var(--com_mg);
}
#story17 .sec04 .story__main_ttl .sec04_img01 {
	max-width: 356px;
	width: 66%;
	margin: 0 auto;
}
#story17 .sec04 .sec04_img02 {
	max-width: 304px;
	width: 25%;
	margin-right: 0;
	margin-left: auto;
}
#story17 .sec04 .sec04_img03 {
	max-width: 576px;
	width: 48%;
	margin-right: calc(25% + 4%);
	margin-top: -8%;
	margin-left: auto;
}
#story17 .sec04 .sec04_img04 {
	max-width: 1920px;
	margin-top: var(--com_mg);
}
@media screen and (max-width: 599px) {
	#story17 .sec04 .sec_content_inner {
		display: flex;
        justify-content: center;
        align-items: center;
		flex-direction: column;
	}
	#story17 .sec04 .story__main_ttl h2 {
		width: 50%;
		margin-bottom: 16.66vw;
	}
	#story17 .sec04 .story__main_ttl .sec04_img01 {
		width: 46%;
	}
	#story17 .sec04 .sec04__txt_wrap {
		margin-top: 16.66vw;
	}
	#story17 .sec04 .sec04_img02 {
		max-width: 304px;
		width: 35%;
		margin-right: 8%;
		margin-left: auto;
		margin-bottom: 6.4vw;
	}
	#story17 .sec04 .sec04_img03 {
		width: 57%;
		margin-top: 0;
		margin-right: 0;
		margin-left: 8%;
	}
}
/*---------- story 17 / sec05 ----------*/
#story17 .sec05 .story__main_ttl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: var(--com_mg);
}
#story17 .sec05 .story__main_ttl h2 {
	max-width: 300px;
	width: 50%;
	order: 1;
	margin: 0 auto;
}
#story17 .sec05 .story__main_ttl .sec05_img01 {
	max-width: 482px;
	width: 80%;
	order: 0;
	margin: 0 auto;
}
#story17 .sec05 .sec05__txt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: var(--com_mg);
} 
#story17 .sec05 .sec05__txt_wrap .sec05_img02 {
	max-width: 331px;
	width: 56%;
	margin: 0 auto;
} 
#story17 .sec05 .sec05_img03 {
	width: 750px;
	width: 62%;
	margin: var(--com_mg) auto 0;
	padding-bottom: var(--com_mg);
}
@media screen and (max-width: 599px) {
	#story17 .sec05 .story__main_ttl {
		grid-template-columns: 1fr;
	}
	#story17 .sec05 .story__main_ttl h2 {
		width: 40%;
		order: 0;
		margin-bottom: 16.66vw;
	}
	#story17 .sec05 .story__main_ttl .sec05_img01 {
		order: 1;
        width: 58%;
	}
	#story17 .sec05 .sec05__txt_wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10.66vw;
	}
	#story17 .sec05 .sec05__txt_wrap .txt_box { 
		order: 1;
		margin-top: -14%;
	}
	#story17 .sec05 .sec05__txt_wrap .sec05_img02 {
		order: 0;
		width: 33%;
        margin-right: 0;
	}
	#story17 .sec05 .sec05_img03 { 
		width: 80%;
		margin-top: 6.4vw;
	}
}
/*---------- story 17 / sec06 ----------*/
#story17 .sec06 .story__main_ttl h2 {
	max-width: 165px;
	width: 14%;
	margin: 0 auto var(--com_mg);
	padding-top: var(--com_mg);
}
#story17 .sec06 .sec06_img01 {
	max-width: 1229px;
	width: 94%;
	margin: 0 auto;
}
#story17 .sec06 .sec03__txt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: var(--com_mg);
	padding-bottom: var(--com_mg);
}
#story17 .sec06 .sec03__txt_wrap .sec06_img02 {
	max-width: 440px;
	width: 73%;
	margin: 0 auto;
}
#story17 .sec06 .sec03__txt_wrap .sec06_img03 {
	max-width: 509px;
	width: 85%;
	margin-top: min(62px, 6.67vw);
}
@media screen and (max-width: 599px) {
	#story17 .sec06 .story__main_ttl h2 {
		width: 23%;
        margin-bottom: 16.66vw;
	}
	#story17 .sec06 .sec06_img01 {
		width: 80%;
	}
	#story17 .sec06 .sec03__txt_wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 16.66vw;
	}
	#story17 .sec06 .sec03__txt_wrap .sec06_img02 {
		width: 44%;
		margin-top: 6.4vw;
		margin-right: 0;
		margin-left: auto;
	}
	#story17 .sec06 .sec03__txt_wrap .sec06_img03-sp {
        max-width: 381px;
        width: 60%;
        margin-left: 0;
        margin-right: auto;
        margin-top: 6.4vw;
	}
}

/*---------- story 17 / about ----------*/
#story17 .about {
	color: #000000;
}
#story17 .about .about__txt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: min(62px, 5.34vw);
}
#story17 .about .about__txt {
	max-width: 414px;
	width: 90%;
	margin: 0;
}
#story17 .about .about__img_wrap {
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#story17 .about .about__item01 {
	max-width: 402px;
	width: 80%;
}
#story17 .about .about__item02 { 
	max-width: 774px;
	width: 74%;
}
#story17 .about .about__item03 { 
	max-width: 247px;
	width: 24%;
	transform: translateY(40px);
}
@media screen and (max-width: 599px) {
	#story17 .about .about__txt_wrap {
		grid-template-columns: 1fr;
	}
	#story17 .about .about__txt {
		max-width: none;
		width: 100%;
	}
	#story17 .about .about__item01 {
		max-width: none;
		width: 100%;
		margin-top: 6.4vw;
	}
	#story17 .about .about__img_wrap {
		margin-top: 6.4vw;
	}
	#story17 .about .about__img_wrap {
		margin-top: 6.4vw;
	}
	#story17 .about .about__item02 {
        width: 84%;
        position: relative;
        right: 9.5%;
	}
	#story17 .about .about__item03 {
		transform: translateY(0px);
	}
}
/*---------- story 17 / sec07 ----------*/
#story17 .sec07 .story__main_ttl{
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-top: var(--com_mg);
}
#story17 .sec07 .story__main_ttl h2 {
	max-width: 287px;
	width: 48%;
	margin: 0 auto;
}
#story17 .sec07 .story__main_ttl .sec07_img01 {
	max-width: 284px;
	width: 48%;
	margin: 0 auto;
}
#story17 .sec07 .sec07__txt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: var(--com_mg);
}
#story17 .sec07 .sec07__txt_wrap .txt_box {
	order: 1;
}
#story17 .sec07 .sec07__txt_wrap .sec07_img02 {
	max-width: 508px;
	width: 85%;
	order: 0;
}
#story17 .sec07 .sec07_img03 {
	max-width: 1038px;
	width: 86%;
	margin: var(--com_mg) auto 0;
}
#story17 .sec07 .sec07_img04 {
	max-width: 471px;
	width: 40%;
	margin: var(--com_mg) auto;
	padding-bottom: var(--com_mg);
}
@media screen and (max-width: 599px) {
	#story17 .sec07 .story__main_ttl {
		align-items: center;
	}
	#story17 .sec07 .story__main_ttl h2 {
		width: 78%;
	}
	#story17 .sec07 .story__main_ttl .sec07_img01 {
		width: 78%;
	}
	#story17 .sec07 .sec07__txt_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        margin-top: 16.66vw;
	}
	#story17 .sec07 .sec07__txt_wrap .sec07_img02 {
		width: 66.8%;
	}
	#story17 .sec07 .sec07__txt_wrap .txt_box {
		margin-top: 16.66vw;
	}
	#story17 .sec07 .sec07_img03 {
		width: 80%;
		margin-top: 10.66vw;
	}
    #story17 .sec07 .sec07_img04 { 
        margin-top: 16.66vw;
        margin-bottom: 16.66vw;
    }
}
/*---------- story 17 / story_spot ----------*/
#story_spot .spot__ttl {
	width: 100%;
	border-right: none;
}
#story17 .story_content {
    display: flex;
    padding: 6% 6% 4% 6%;
    justify-content: space-between;
}
#story17 .story_content .story_spot__img01 {
	max-width: 375px;
	margin-top: min(62px, 5.34vw);
}
#story17 .story_content .story_spot__img02 {
	max-width: 332px;
    width: 55%;
    margin-right: 0;
    margin-left: auto;
	margin-bottom: 32px;
}
#story17 .story_content .story_spot__img03 {
	max-width: 601px;
    width: 96%;
    margin-right: 0;
    margin-left: auto;
}
#story17 .story_content .story_box {
	max-width: 375px;
	width: 36%;
}
#story17 .story_content .story_box02 {
	margin-top: -12%;
	width: 62%;
}
#story17 .snap h5 {
	color: #000000;
}
@media screen and (max-width: 599px) {
	#story17 .story_content {
		flex-direction: column;
	}
	#story17 .story_content .story_box {
		display: flex;
        width: 100%;
        max-width: none;
        position: relative;
		align-items: flex-end;
	}
	#story17 .story_content .story_spot__txt{
		width: 45%;
	}
	#story17 .story_content .story_box02 {
        margin-top: 6.4vw;
	}
	#story17 .story_content .story_spot__img02 {
        width: 70%;
		margin-bottom: 6.4vw;
	}
	#story17 .story_content .story_spot__img01 {
        width: 60%;
        margin-top: 0;
        position: relative;
        right: -7%;
	}
	#story17 .story_content .story_spot__img03 {
        width: 50%;
        margin-left: 0;
	}
}

/*-----------------------

	story18

-----------------------*/
#story18 {
	color: #231815;
}
#story18 p {
	font-weight: normal;
}
#story18 .sec_medium_inner {
	max-width: 1500px;
	margin: 0 auto;
	position: relative;
}
/* 背景設定 */
#story18 .sec01,
#story18 .sec04,
#story18 .sec06 {
	background-color: #c1e0eb;
}
#story18 .sec02,
#story18 .sec05 {
	background-color: #ceca9d;
}
/* sec01 */
#story18 .sec01 .story__main_ttl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 90vh;
}
#story18 .sec01 .story__main_ttl h2{
	margin: 0 auto;
	width: 33%;
}
#story18 .sec01 .sec01__txt_wrap {
	display: flex;
	justify-content: space-between;
	margin-top: 8%;
}
#story18 .sec01 .sec01__txt_wrap .sec01_img02 {
	width: 44.9%;
	margin-left: 4%;
}
#story18 .sec01 .sec01_img_wrap {
    display: flex;
    align-items: flex-end;
    margin-top: 3.3%;
    padding-bottom: calc(120px + 20vw);
}
#story18 .sec01 .sec01_img_wrap .sec01_img03 {
	width: 41.2%;
	margin-right: 5.8%;
}
#story18 .sec01 .sec01_img_wrap .sec01_img04 {
	width: 25%;
	position: relative;
	bottom: -120px;
}
@media screen and (max-width: 599px) { 
	#story18 .sec01 .story__main_ttl {
		height: 80vh;
	}
	#story18 .sec01 .story__main_ttl h2{
		width: 68%;
	}
	#story18 .sec01 .sec01__txt_wrap { 
		flex-direction: column-reverse;
		align-items: center;
	}
	#story18 .sec01 .sec01__txt_wrap .sec01_img02 {
		width: 71%;
		margin-right: 0;
		margin-left: auto;
		margin-top: 12%;
		margin-bottom: 12%;
	}
	#story18 .sec01 .sec01_img_wrap { 
		flex-direction: column;
		align-items: flex-start;
	}
	#story18 .sec01 .sec01_img_wrap .sec01_img03 {
		width: 65.9%;
		margin-right: 0;
		margin-top: 12%;
	}
	#story18 .sec01 .sec01_img_wrap .sec01_img04 {
		width: 40%;
		position: static;
		margin-left: auto;
		margin-right: 0;
		margin-top: 3%;
	}
	#story18 .sec01 .sec01_img_wrap {
		padding-bottom: calc(120px + 3vw);
	}
}
/* sec02 */
#story18 .sec02 {
	padding-bottom: min(400px ,33%);
}
#story18 .sec02 .sec02_img01 {
    width: 58%;
    position: relative;
    top: -16vw;
}
#story18 .sec02 .story__main_ttl {
	width: 35.5%;
    margin-right: 0;
    margin-left: auto;
	margin-top: -11vw;
}
@media screen and (max-width: 599px) {
	#story18 .sec02 .sec02_img01 {
		width: 85%;
		top: -30vw;
	}
	#story18 .sec02__txt_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#story18 .sec02 .story__main_ttl {
		width: 56%;
		margin: -12% auto 12%;
	}
}
/* sec03 */
#story18 .sec03 .sec03_img01 {
    width: 64.12%;
    margin-right: 0;
    margin-left: auto;
    margin-top: calc(-42.75% / 2);
}
#story18 .sec03 .story__main_ttl { 
	width: 33.33%;
	margin-top: 21%;
}
#story18 .sec03 .sec03__txt_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 3.3%;
	margin-bottom: 12%;
}
#story18 .sec03 .sec03__txt_wrap .sec03_img02 {
	width: 45.8%;
	margin-left: 3.3%;
}
@media screen and (max-width: 599px) {
	#story18 .sec03 .sec03_img01 {
		width: 71.7%;
		margin-right: auto;
		margin-left: auto;
	}
	#story18 .sec03 .story__main_ttl { 
		width: 53%;
		margin: 12vh auto;
	}
	#story18 .sec03 .sec03__txt_wrap { 
		flex-direction: column;
	}
	#story18 .sec03 .sec03__txt_wrap .sec03_img02 {
		width: 58.5%;
		margin-left: 0;
		margin-top: 8vh;
		margin-bottom: 8vh;
	}
}
/* sec04 */
#story18 .sec04 .story__main_ttl {
	width: 50.29%;
	margin-right: 0;
	margin-left: auto;
	padding-top: 12%;
	margin-bottom: 8%;
}
#story18 .sec04 .sec04_img01 {
	width: 59%;
}
#story18 .sec04 .sec04__txt_wrap {
	display: flex;
	justify-content: space-between;
	margin-top: 8%;
}
#story18 .sec04 .sec04_img02 {
	width: 41%;
	margin-left: 4%;
}
#story18 .sec04 .sec04_img03 {
	width: 40.96%;
	margin: 3.3% auto 0;
	padding-bottom: 12%;
}
#story18 .sec04 .sec04_img05 {
	width: 51.19%;
	margin: 12% auto 0;
	padding-bottom: 12%;
}
@media screen and (max-width: 599px) {
	#story18 .sec04 .story__main_ttl {
		width: 80%;
		margin: 0 auto 8vh;
		padding-top: 8vh;
	}
	#story18 .sec04 .sec04_img01 {
		width: 70%;
	}
	#story18 .sec04 .sec04__txt_wrap {
		flex-direction: column;
		align-items: center;
		margin-top: 8%;
	}
	#story18 .sec04 .sec04_img02 {
		width: 48%;
		margin-left: auto;
		margin-right: 0;
		margin-top: 8vh;
	}
	#story18 .sec04 .sec04_img03 { 
		width: 62%;
		margin-left: 5%;
		margin-right: auto;
		margin-top: 4vh;
		margin-bottom: 8vh;
		padding-bottom: 0;
	}
	#story18 .sec04 .sec04_img05 { 
		width: 78.6%;
	}
}
/* sec05 */
#story18 .sec05 {
	margin-top: -10px;
}
#story18 .sec05 .ttl_wrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	padding-top: 12%;
}
#story18 .sec05 .story__main_ttl {
	width: 26.37%;
	margin: 0 auto;
}
#story18 .sec05 .sec05_img01 {
	width: 45.9%;
}
#story18 .sec05 .sec05_img02 {
	width: 100%;
	max-width: 1200px;
	margin-top: 3.3%;
}
#story18 .sec05 .sec_medium_inner {
	position: relative;
	margin-top: 8%;
}
#story18 .sec05 .sec05__txt_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#story18 .sec05 .sec05_img03 {
	width: 26%;
	max-width: 320px;
	position: absolute;
	right: 0;
	top: 20%;
}
#story18 .sec05 .sec05_img04 {
	margin-top: 8%;
	width: 63%;
}
#story18 .sec05 .sec05_img05 {
	width: 50.4%;
	margin-top: 8%;
	margin-bottom: 12%;
}
@media screen and (max-width: 768px) {
	#story18 .sec05 .sec05__txt_wrap {
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	#story18 .sec05 .sec05_img03 {
		display: none;
	}
	#story18 .sec05 .sec05_img04 {
		margin-top: 8vh;
		width: 100%;
	}
	#story18 .sec05 .sec05_img05 { 
		width: 75.6%;
		margin-top: 0%;
		margin-bottom: 8vh;
	}
}
@media screen and (max-width: 599px) {
	#story18 .sec05 .sec_medium_inner {
		margin-top: 0;
	}
	#story18 .sec05 .ttl_wrap {
		flex-direction: column;
		width: 100%;
		padding-top: 12vh;
	}
	#story18 .sec05 .story__main_ttl { 
		width: 42%;
	}
	#story18 .sec05 .sec05_img01 { 
        margin-top: 8vh;
        width: 54.8%;
        margin-right: auto;
        margin-left: 0;
	}
	#story18 .sec05 .sec05_img02 {
		width: 80%;
		margin-top: 8vh;
		margin-bottom: 8vh;
	}
}

/* sec06 */
#story18 .sec06 .story__main_ttl {
	width: 28.54%;
	padding-top: 12%;
}
#story18 .sec06 .sec06__txt_wrap {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 8%;
}
#story18 .sec06 .sec06_img01 {
	width: 44%;
	margin-right: 4%;
}
#story18 .sec06 .sec06_img_wrap {
	display: flex;
    justify-content: space-between;
	margin-top: 8%;
	padding-bottom: 19%;
}
#story18 .sec06 .sec06_img03 {
	width: 18%;
}
#story18 .sec06 .sec06_img02 {
	width: 61.5%;
	max-width: 923px;
	position: absolute;
	right: 0;
}
#story18 .sec06 .sec06_img04 {
	margin-top: 12%;
	margin-bottom: 20%;
}
@media screen and (max-width: 599px) {
	#story18 .sec06 .story__main_ttl {
		width: 47.33%;
		padding-top: 12vh;
		margin: 0 auto 12vh;
	}
	#story18 .sec06 .sec06__txt_wrap {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
	#story18 .sec06 .sec06_img01 { 
		width: 56%;
		margin-bottom: 8vh;
	}
	#story18 .sec06 .sec06_img_wrap { 
		flex-direction: column-reverse;
		width: 100%;
		margin-top: 8vh;
		padding-bottom: 8vh;
	}
	#story18 .sec06 .sec06_img02 {
		position: static;
		width: 78%;
		margin-right: 0;
		margin-bottom: 4vh;
		margin-left: auto;
	}
	#story18 .sec06 .sec06_img03 {
		width: 30%;
		margin-left: 5%;
	}
	#story18 .sec06 .sec06_img04 {
		margin-top: 0;
	}
}