@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

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

	custom properties

-----------------------------------*/
:root {
	--flwshippori:"Shippori Mincho", serif;
	--flwzen:"Zen Kaku Gothic Antique", sans-serif;
	
	--mClr5:rgba(68, 40, 108, 0.4);
	--mClr6:#674498;
	--mClr7:#D3CADD;
	--mClr8:#BCADCE;
	--mClr9:#EAE1F3;
	--mClr10:#E66969;
	
	--sClr5:#F6F4F8;
	--sClr6:#F2F2F2;
	--sClr7:#E8E8E8;
	--sClr8:#F8F8F8;
	--sClr9:#F5F5F5;
	--sClr10:#E9E9E9;
}

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

	contents

-----------------------------------*/
body{
	font-family: var(--flwshippori);
}

/* フレックスボックス */
.row_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
	align-items: center;
}

.h3_ttl{
	font-family: var(--flwshippori);
	font-size: 34px;
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
}
.h3_ttl span{
	font-size: 14px;
	line-height: 1;
	margin-bottom: 7px;
	display: block;
	color: var(--mClr6);
}

.line_ttl{
	font-size: 26px;
	font-weight: 500;
	text-align: center;
	padding: 13px 0;
	border-top: 1px solid var(--mClr2);
	border-bottom: 1px solid var(--mClr2);
	width: 165px;
	margin: auto;
}

@media screen and (max-width:840px){
}
@media screen and (max-width:640px){
	.h3_ttl{
		font-size: 22px;
	}
	.line_ttl{
		font-size: 18px;
		padding: 10px 0;
	}
}

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

	pattern

-----------------------------------*/
.pattern {
	/*margin-bottom: 65px;*/
	justify-content: space-between;
}
.pattern .contents_inner {
	/*display: flex;
	justify-content: space-between;*/
	/*padding-bottom: 65px;
	border-bottom: 1px solid var(--sClr4);*/
}
.pattern .textArea {
	width: 43%;
}
.pattern .textArea h2 {
	font-size: 42px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--mClr1);
	margin-bottom: 30px;
}
.pattern .textArea h2::before {
	font-size: 20px;
	letter-spacing: 0;
	color: var(--mClr3);
	display: block;
	margin-bottom: 10px;
}
.pattern .textArea .copy {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.75;
	margin-bottom: 20px;
}
.pattern .textArea p {
	line-height: 2.19;
}
.pattern .textArea p:not(:last-child) {
	margin-bottom: 1em;
}
.pattern .imageArea {
	width: 50%;
}
@media screen and (max-width: 1335px) {
	.pattern .textArea {
		width: 45%;
	}
	.pattern .textArea h2 {
		font-size: 3.15vw;
	}
	.pattern .textArea h2::before {
		font-size: 1.5vw;
	}
	.pattern .textArea .copy {
		font-size: 1.5vw;
	}
}
@media screen and (max-width: 840px) {
	.pattern .contents_inner {
		flex-direction: column;
		gap: 30px 0;
	}
	.pattern .textArea {
		width: 100%;
	}
	.pattern .textArea .copy {
		font-size: 20px;
	}
	.pattern .imageArea {
		width: 100%;
	}
	.pattern .textArea h2 {
		font-size: 42px;
	}
	.pattern .textArea h2::before {
		font-size: 20px;
	}
}
@media screen and (max-width: 640px) {
	.pattern {
		margin-bottom: 30px;
	}
	.pattern .contents_inner {
		gap: 20px 0;
		padding-bottom: 30px;
	}
	.pattern .textArea h2 {
		font-size: 28px;
	}
	.pattern .textArea h2::before {
		font-size: 16px;
	}
	.pattern .textArea .copy {
		font-size: 14px;
	}
}

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

	mainvisual.lower

-----------------------------------*/
#mainvisual.lower{
    position: relative;
	width: 93.75%;
    margin: 0 auto;
}
#mainvisual.lower::before{
	content: "";
    width: 50%;
    height: 100%;
    background: url(../img/index/mv_logo.svg) no-repeat center 70% / contain;
    position: absolute;
    top: 0;
    left: 1%;
    z-index: 1;
    opacity: 0.2;
}
#mainvisual.lower .bg_img{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	overflow: hidden;
}
#mainvisual.lower .bg_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#mainvisual.lower .bg_img::before{
	content: "";
    width: 100%;
    height: 100%;
    background: #111111;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.45) 0%, rgba(17, 17, 17, 0.25) 50%, rgba(17, 17, 17, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    mix-blend-mode: multiply;
}
#mainvisual.lower .mv_ttl{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5%;
	margin: auto;
	font-family: var(--flwshippori);
	color: var(--sClr3);
	font-size: 54px;
	z-index: 3;
	height: 100px;
}
#mainvisual.lower .mv_ttl span{
	font-size: 16px;
	display: block;
	line-height: 1;
	margin-bottom: 20px;
}

@media screen and (max-width: 840px) {
	#mainvisual.lower::before{
		/*width: 65%;*/
        /*background: url(../img/index/mv_logo.svg) no-repeat center 95% / contain;*/
	}
}
@media screen and (max-width: 640px) {
	#mainvisual.lower{
		height: 180px;
	}
	#mainvisual.lower::before{
		/*width: 75%;*/
        /*background: url(../img/index/mv_logo.svg) no-repeat center 43% / contain;*/
	}
	#mainvisual.lower .mv_ttl{
		font-size: 30px;
		height: 60px;
	}
	#mainvisual.lower .mv_ttl span{
		font-size: 14px;
		margin-bottom: 12px;
	}
}

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

	breadcrumbs

-----------------------------------*/
#breadcrumbs{
	width: 93.75%;
    margin: 0 auto;
	border-bottom: 1px solid var(--sClr7);
}
#breadcrumbs .row_box{
	padding: 26px 0 10px;
	justify-content: flex-start;
}
#breadcrumbs p,
#breadcrumbs p a{
	color: var(--sClr2);
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
}
#breadcrumbs p a{
	padding-right: 12px;
	margin-right: 5px;
	position: relative;
	color: var(--mClr5);
	font-weight: 700;
}
#breadcrumbs p a::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 5px;
	height: 7px;
	background: url("../img/lower/arrow.svg")no-repeat center/contain;
}
#breadcrumbs p a:hover{
	color: var(--mClr1);
	text-decoration: underline;
}

@media screen and (max-width:840px){
}
@media screen and (max-width:640px){
	#breadcrumbs{
		overflow: hidden;
	}
	#breadcrumbs .row_box{
		padding: 15px 0;
		/*margin-bottom: 15px;*/
        flex-wrap: nowrap;
        word-break: keep-all;
        overflow-x: auto;
    }
}