@charset "utf-8";
#str-main a {
    text-decoration: none;
    color: #000;
}
#str-main a:hover {
    opacity: 0.75;
}
#str-main img {
    display: block;
    max-width: 100%;
    height: auto;
}
#str-main .non_pc {
    display: none !important;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
#str-main {
    font-family: Roboto, Noto Sans JP, "ヒラギノ角 Pro W3", "Hiragino Kaku Pro W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    color: #000;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    padding-bottom: 30px;
}
#str-main .f_min {
    font-family: "游明朝", "Yu Mincho", "YuMincho", serif;
}

#str-main .scrollactive {
    position: relative;
}
#str-main .scrollactive.fadein {
    opacity: 0;
    transition: 1s ease all;
    top: 20px;
}
#str-main .scrollactive.fadein.active {
    opacity: 1;
    top: 0;
}
#str-main .submenu {
    background: url(../images/bg_gradient.png) no-repeat center center / cover;
}
#str-main .submenu>.inner {
    display: flex;
    justify-content: center;
}
#str-main .submenu a {
    font-size: 16px;
    font-weight: bold;
    display: block;
    padding: 16px 35px;
    position: relative;
}
#str-main .submenu a::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 1px;
    height: 19px;
    background: #d9bb7f;
    mix-blend-mode: multiply;
}
#str-main .submenu a:nth-child(1)::before {
    display: none;
}
#str-main .visual {
    background: url(../images/bg_gradient.png) no-repeat center bottom / 150% 100%;
    padding: 5px 0;
}
#str-main .visual h1 {
	overflow: hidden;
}
#str-main .visual h1 img {
	transition: all ease 1s;
	transform: scale(1.03);
}
#str-main .visual h1.active img {
	transform: scale(1);
}

/*============================
#anc-about
============================*/
#str-main .about {
    background: url(../images/bg_about.jpg) no-repeat center top / cover;
    padding: 120px 0;
}
#str-main .about>.inner {
    width: 960px;
    margin: 0 auto;
    padding: 80px 0 0 0;
    position: relative;
}
#str-main .about h2 {
    width: 430px;
}
#str-main .about .text {
    font-size: 17px;
    line-height: 2em;
    margin-top: 90px;
    width: 500px;
}
#str-main .about img.img {
    width: 490px;
    position: absolute;
    right: -80px;
    top: 20px;
}
/*============================
#anc-point
============================*/
#str-main .point {
    padding: 70px 0 120px 0;
}
#str-main .point>.inner {
    width: 960px;
    margin: 0 auto;
}
#str-main .point h2 {
    width: 700px;
    margin: 0 auto;
}
#str-main .point ol {
    margin-top: 70px;
}
#str-main .point ol li {
    position: relative;
}
#str-main .point ol li+li {
    margin-top: 66px;
}
#str-main .point ol li img {
    border-radius: 30px;
    box-shadow: 15px 15px 30px rgba(217, 187, 127, 0.5);
}
#str-main .point ol li>.text {
    width: 420px;
    text-align: justify;
    line-height: 2em;
    font-size: 17px;
    position: absolute;
    left: 68px;
    top: 284px;
    z-index: 100;
    letter-spacing: 0.1em;
}
#str-main .point ol li .text strong {
    color: #e14b62;
    font-weight: bold;
}
#str-main .point ol li .tokkyo {
    position: absolute;
    left: 20px;
    z-index: 100;
    top: 447px;
    display: flex;
    align-items: center;
}
#str-main .point ol li .tokkyo .title {
    font-size: 15px;
    margin-right: 18px;
    background: url(../images/bg_gradient.png) no-repeat center bottom / 150% 100%;
    padding: 6px 18px;
}
#str-main .point ol li .tokkyo .text {
    font-size: 13px;
}
#str-main .point ol li.point2 .text {
    left: 475px;
    top: 332px;
}
#str-main .point ol li.point3 .text {
    top: 240px;
}
/*============================
#anc-scene
============================*/
#str-main .scene {
    background: url(../images/bg_scene.jpg) no-repeat center top / cover;
    padding: 60px 0px 120px 0;
}
#str-main .scene>.inner {
    width: 960px;
    margin: 0 auto;
}
#str-main .scene h2 {
    width: 767px;
    margin: 0 auto;
    position: relative;
    left: 33px;
}
#str-main .scene ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 23px;
}
#str-main .scene ul li {
    width: calc(100% / 2 - 20px);
}
#str-main .scene ul li img {
    border-radius: 30px;
}

/**************************************************************/
/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
    #str-main a:hover {
        opacity: 1;
    }
    #str-main .non_pc {
        display: block !important;
    }
    #str-main .non_sp {
        display: none !important;
    }
	#str-main .submenu {
		display: none;
	}
	#str-main .visual {
		background: url(../images/bg_gradient.png) no-repeat center bottom / 150% 100%;
		padding: 5px 0;
	}

	/*============================
	#anc-about
	============================*/
	#str-main .about {
		background: url(../images/bg_about_sp.jpg) no-repeat center top / cover;
		padding: 80px 0 20px 0;
	}
	#str-main .about>.inner {
		width: 90%;
		padding: 0;
	}
	#str-main .about h2 {
		width: 279px;
	}
	#str-main .about .text {
		font-size: 17px;
		line-height: 2em;
		margin-top: 40px;
		width: auto;
		text-align: justify;
	}
	#str-main .about img.img {
		width: 340px;
		position: relative;
		right: auto;
		top: auto;
		margin: 0 auto 0 auto;
		left: 10px;
	}
	/*============================
	#anc-point
	============================*/
	#str-main .point {
		padding: 50px 0 72px 0;
	}
	#str-main .point>.inner {
		width: 90%;
		margin: 0 auto;
	}
	#str-main .point h2 {
		width: auto;
		margin: 0 auto;
	}
	#str-main .point ol {
		margin-top: 30px;
	}
	#str-main .point ol li {
		position: relative;
	}
	#str-main .point ol li+li {
		margin-top: 14vw;
	}
	#str-main .point ol li img {
		border-radius: 4vw;
		box-shadow: 2.5vw 2.5vw 6vw rgba(217, 187, 127, 0.5);
	}
	#str-main .point ol li>.text {
		width: 72vw;
		text-align: justify;
		line-height: 1.6em;
		font-size: 4vw;
		position: absolute;
		left: 9vw;
		top: 54vw;
		z-index: 100;
		letter-spacing: 0.045em;
	}
	#str-main .point ol li .text strong {
		color: #e14b62;
		font-weight: bold;
	}
	#str-main .point ol li .tokkyo {
		position: absolute;
		left: 0;
		z-index: 100;
		top: 92vw;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	#str-main .point ol li .tokkyo .title {
		font-size: 3.3vw;
		margin-right: 0;
		background: url(../images/bg_gradient.png) no-repeat center bottom / 150% 100%;
		padding: 1.3vw 3.3vw;
	}
	#str-main .point ol li .tokkyo .text {
		font-size: 2.8vw;
		margin-top: 4vw;
	}
	#str-main .point ol li.point2 .text {
		left: 9vw;
		top: 55vw;
	}
	#str-main .point ol li.point3 .text {
		top: 44vw;
	}
	/*============================
	#anc-scene
	============================*/
	#str-main .scene {
		background: url(../images/bg_scene.jpg) no-repeat center top / auto 100%;
		padding: 40px 0px 28px 0;
		overflow: hidden;
	}
	#str-main .scene>.inner {
		width: 90%;
		margin: 0 auto;
	}
	#str-main .scene h2 {
		width: 107%;
		margin: 0 auto;
		position: relative;
		left: auto;
	}
	#str-main .scene ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6.8vw;
		margin-top: 13px;
	}
	#str-main .scene ul li {
		width: auto;
	}
	#str-main .scene ul li img {
		border-radius: 6vw;
	}

}