@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/

/* bg1 */
#page_title .bg1 {
    transform: translate(-12px, -30px) rotate(6deg);
    animation: bg1FloatIn 1s ease-out .2s forwards;
}

/* bg2 */
#page_title .bg2 {
    transform: translate(14px, -35px) rotate(-7deg);
    animation: bg2FloatIn 1s ease-out .3s forwards;
}

@keyframes bg1FloatIn {
    0% {
        opacity: 0;
        transform: translate(-12px, -30px) rotate(6deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes bg2FloatIn {
    0% {
        opacity: 0;
        transform: translate(14px, -35px) rotate(-7deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}


/* 背景画像のフェードイン */
#container div.container_inner div.content_block section div.head_box div.img_block.is_anim .anim_bg {
        opacity: 1;
    }

#branding .head_box .img_block .legacy_anim_svg {
    display: none;
}

.head_box .img_block .draw_anim_layers,
.head_box .img_block .draw_anim_part,
.head_box .img_block .draw_anim_svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.head_box .img_block .draw_anim_layers {
    z-index: 5;
    pointer-events: none;
}

.head_box .img_block .draw_anim_layers[data-fade-in] {
    opacity: 0;
    transition: opacity .35s ease;
}

.head_box .img_block .draw_anim_layers[data-fade-in].is_playing {
    opacity: 1;
}

.head_box .img_block .draw_anim_svg {
    display: block;
    overflow: visible;
}



/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 961px){
	
	#page_title div.page_title_inner span.bg1 {
		width: 226px;
		top: 65px;
		left: -60px;
	}
	
	#page_title div.page_title_inner span.bg2 {
		width: 142px;
		top: 224px;
		left: 317px;
	}
	
	main h3 {
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1.5;
	}
	
	main h3 small{
		display: block;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 1.8rem;
		font-weight: 400;
		letter-spacing: 10%;
		margin-top: 30px;
	}
	
	main h4 {
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 4.8rem;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 30px;
	}
	
	main h4 span{
		display: inline-block;
		border-bottom: 1px solid #000;
		padding-bottom: 14px;
	}
	
	main,#container{
		contain: none;
	}
	
	#container {
		border: 1px solid #D7D7DE;
		border-width: 1px 0;
	}
	
	#container div.container_inner{
		width: 91.3%;
		max-width: 1316px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
	}
	
	#container div.container_inner div.head_block{
		width: 374px;
	}
	
	#container div.container_inner div.content_block{
		width: calc(100% - 374px);
		border-left: 1px solid #D7D7DE;
		padding-top: 100px;
		padding-left: 60px;
	}
	
	#container .content_block,
    #container .content_block section{
		position: static;
    }
	
	#container div.container_inner div.content_block section div.head_box{
		width: 314px;
		position: fixed;
		top: 100px;
		left: 0;
		opacity: 0;
		transition-duration: 0.5s;
		transition-property: opacity;
		z-index: 10;
	}
	
	#container div.container_inner div.content_block section div.head_box.is_active{
		opacity: 1;
	}
	
	#container div.container_inner div.content_block section div.head_box div.img_block{
		width: 100%;
		height: 334px;
		background: #d7d7de;
		position: relative;
		overflow: hidden;
		line-height: 0;
		margin-top: 110px;
	}
	
	#container div.container_inner div.content_block section div.head_box div.img_block .anim_bg{
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
		opacity: 0;
		transition: opacity .6s ease;
	}
	
	#container div.container_inner div.content_block section div.block{
		padding-bottom: 56px;
		border-bottom: 1px solid #D7D7DE;
	}
	
	#container div.container_inner div.content_block section div.block + div.block{
		margin-top: 56px;
	}
	
	#container div.container_inner div.content_block section div.block.bb_none{
		border-bottom: none;
	}
	
	#container div.container_inner div.content_block section{
		padding-bottom: 220px;
	}
	
	#container div.container_inner div.content_block section ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 14px 0;
	}
	
	#container div.container_inner div.content_block section ul li{
		display: inline-block;
		font-size: 2.1rem;
		font-weight: 700;
		line-height: 1;
	}
	
	#container div.container_inner div.content_block section ul li::after{
		content: "";
		width: 21px;
		height: 1px;
		background: #D7D7DE;
		display: inline-block;
		transform: rotate(133deg);
		margin: 0 4px;
        margin-bottom: 6px;
	}
	
	#container div.container_inner div.content_block section ul li:last-child::after{
		display: none;
	}
	
	#container div.container_inner div.content_block section p{
		font-size: 1.6rem;
		line-height: 2;
		letter-spacing: 2%;
		margin-top: 1.6em;
	}

}


@media screen and (min-width:961px) and (max-width: 1440px){
	#page_title div.page_title_inner span.bg1 {
		left: -4.35cqw;
	}
}
	

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 960px){
	
	#page_title div.page_title_inner span.bg1 {
		width: 29%;
		top: 17.3cqw;
		left: -5cqw;
	}
	
	#page_title div.page_title_inner span.bg2 {
		width: 14.8%;
		top: 46.6cqw;
		left: 39.1%;
	}
	
	main h3 {
		width: 47.8%;
		font-size: var(--f27);
		font-weight: 500;
		line-height: 1.5;
	}
	
	main h3 small{
		display: block;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f10);
		font-weight: 400;
		letter-spacing: 10%;
		margin-top: clamp(calc(23px * 0.96), calc(23 * var(--scale)), calc(23px * 2.56));
	}
	
	main h4 {
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f24);
		font-weight: 500;
		line-height: 1;
		margin-bottom: clamp(calc(24px * 0.96), calc(24 * var(--scale)), calc(24px * 2.56));
	}
	
	main h4 span{
		display: inline-block;
		border-bottom: 1px solid #000;
		padding-bottom: clamp(calc(7px * 0.96), calc(7 * var(--scale)), calc(7px * 2.56));
	}
	
	main,#container{
		contain: none;
	}
	
	#container {
		border: 1px solid #D7D7DE;
		border-width: 1px 0;
	}
	
	#container div.container_inner{
		width: 100%;
	}
	
	#container div.container_inner div.content_block{
		width: 100%;
	}
	
	#container div.container_inner div.content_block section {
		width: 100%;
		border-bottom: 1px solid #D7D7DE;
		padding-top: clamp(calc(42px * 0.96), calc(42 * var(--scale)), calc(42px * 2.56));
		padding-bottom: clamp(calc(42px * 0.96), calc(42 * var(--scale)), calc(42px * 2.56));
	}
	
	#container div.container_inner div.content_block section div.head_box{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	#container div.container_inner div.content_block section div.head_box.is_active{
		opacity: 1;
	}
	
	#container div.container_inner div.content_block section div.head_box div.img_block{
		width: 41.2%;
		height: 39.2cqw;
		background: #d7d7de;
		position: relative;
		overflow: hidden;
		line-height: 0;
	}
	
	#container div.container_inner div.content_block section div.head_box div.img_block .anim_bg{
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
		opacity: 0;
		transition: opacity .6s ease;
	}
	
	#container div.container_inner div.content_block section div.block{
		width: 90%;
		margin: 0 auto;
		padding-top: clamp(calc(32px * 0.96), calc(32 * var(--scale)), calc(32px * 2.56));
	}
	
	#container div.container_inner div.content_block section div.block + div.block{
		border-top: 1px solid #D7D7DE;
		margin-top: clamp(calc(32px * 0.96), calc(32 * var(--scale)), calc(32px * 2.56));
	}
	
	#container div.container_inner div.content_block section.bb_none{
		border-bottom: none;
	}
	
	#container div.container_inner div.content_block section{
		padding-bottom: clamp(calc(42px * 0.96), calc(42 * var(--scale)), calc(42px * 2.56));
	}
	
	#container div.container_inner div.content_block section ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: clamp(calc(14px * 0.96), calc(14 * var(--scale)), calc(14px * 2.56)) 0;
	}
	
	#container div.container_inner div.content_block section ul li{
		display: inline-block;
		font-size: var(--f17);
		font-weight: 700;
		line-height: 1;
	}
	
	#container div.container_inner div.content_block section ul li::after{
		content: "";
		width: clamp(calc(21px * 0.96), calc(21 * var(--scale)), calc(21px * 2.56));;
		height: 1px;
		background: #D7D7DE;
		display: inline-block;
		transform: rotate(110deg);
		margin: 0;
        margin-bottom: clamp(calc(6px * 0.96), calc(6 * var(--scale)), calc(6px * 2.56))
	}
	
	#container div.container_inner div.content_block section ul li:last-child::after{
		display: none;
	}
	
	#container div.container_inner div.content_block section p{
		font-size: var(--f14);
		line-height: 2;
		letter-spacing: 2%;
		margin-top: 1.6em;
	}
	
	ul#breadcrumb {
        width: 90%;
        margin: 0 auto;
        padding: clamp(calc(16px * 0.96), calc(16 * var(--scale)), calc(16px * 2.56)) 0;
        margin-top: 0;
    }
	
}