@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(-8deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

#container div.container_inner aside ul li a{
    color: #000;
	display: inline-block;
}

#container div.container_inner main ul.list li a{
    color: #000;
}



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

@media print, screen and (min-width: 961px){
	
	#page_title div.page_title_inner span.bg1 {
		width: 200px;
		top: 56px;
		left: -60px;
	}
	
	#page_title div.page_title_inner span.bg2 {
		width: 160px;
		top: 106px;
		left: 310px;
	}
	
	#container {
		width: 100%;
	}
	
	#container div.container_inner{
		width: 91.3%;
		max-width: 1316px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	#container div.container_inner aside{
		width: 17.4%;
	}
	
	#container div.container_inner aside h3{
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 3.2rem;
		font-weight: 500;
		line-height: 1;
		border-bottom: 1px solid #000;
		margin-bottom: 18px;
	}
	
	#container div.container_inner aside h3:nth-child(n + 2){
		margin-top: 44px;
	}
	
	#container div.container_inner aside ul{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	
	#container div.container_inner aside ul li{
		width: 100%;
		font-size: 1.6rem;
		line-height: 1;
		color: #000;
	}
	
	#container div.container_inner aside ul li:first-of-type{
		font-family: YakuHanJP, "Libre Franklin";
		font-weight: 700;
	}
	
	#container div.container_inner aside ul li:first-of-type span{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	#container div.container_inner aside ul li:first-of-type span::before{
		content: "";
		display: inline-block;
		width: 8px;
		height: 18px;
		border: 1px solid #000;
		border-width: 1px 0 1px 1px;
		margin-right: 0.5em;
	}
	
	#container div.container_inner aside ul li:first-of-type span::after{
		content: "";
		display: inline-block;
		width: 8px;
		height: 18px;
		border: 1px solid #000;
		border-width: 1px 1px 1px 0;
		margin-left: 0.5em;
	}
	
	
	#container div.container_inner main{
		width: 71.8%;
	}
	
	#container div.container_inner main ul.list{
		border-top: 1px solid #D7D7DE;
	}
	
	#container div.container_inner main ul.list li{
		width: 100%;
		border-bottom: 1px solid #D7D7DE;
	}
	
	#container div.container_inner main ul.list li a{
		width: 100%;
		padding: 30px 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: rgba(237,237,239,0);
		transition: background-color 0.4s ease;
	}
	
	#container div.container_inner main ul.list li a:hover{
		background: rgba(237,237,239,1);
	}
	
	#container div.container_inner main ul.list li a div{
		width: 206px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	#container div.container_inner main ul.list li a div time,
	div.head_block div.head_box div time {
		width: 90px;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 1.5rem;
		line-height: 1;
	}
	
	#container div.container_inner main ul.list li a div p.cate,
	div.head_block div.head_box div p.cate {
		width: 100px;
		padding: 6px 10px;
		font-size: 1.3rem;
		line-height: 1;
		border: 1px solid #000;
		border-radius: 60px;
		text-align: center;
	}
	
	#container div.container_inner main ul.list li a h3{
		width: calc(100% - 250px);
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.5;
	}
	
	/*詳細*/
	
	div.head_block {
		width: 91.3%;
		max-width: 1316px;
		margin: 0 auto;
		padding: 158px 0 42px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	div.head_block h2{
		display: inline-block;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 4.2rem;
		font-weight: 500;
		line-height: 1;
	}
	
	div.head_block div.head_box{
		width: 71.8%;
	}
	
	div.head_block div.head_box div{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 18px;
		margin-bottom: 34px;
	}
	
	div.head_block div.head_box h1{
		font-size: 2.5rem;
		font-weight: 500;
		line-height: 1.5;
	}
	
	#container.single {
		border-top: 1px solid #D7D7DE;
		padding-top: 54px;
	}
	
	#container.single div.container_inner div.contents{
		width: 71.8%;
	}
	
	#container.single div.container_inner div.contents h2{
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h3{
		font-size: 2.0rem;
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h4{
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h2:not(:first-child),
	#container.single div.container_inner div.contents h3:not(:first-child),
	#container.single div.container_inner div.contents h4:not(:first-child) {
		margin-top: 1.5em;
	}
	
	#container.single div.container_inner div.contents p{
		font-size: 1.6rem;
		line-height: 2;
		letter-spacing: 2%;
	}
	
	#container.single div.container_inner div.contents a{
		color: #000;
		text-decoration: underline;
	}
	
	#container.single div.container_inner div.contents figure.photo {
		margin: 20px 0;
	}
	
	#container.single div.container_inner div.contents figure.photo.small {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#container.single div.container_inner div.contents figure.photo figcaption{
		font-size: 1.3rem;
		line-height: 1.4;
		text-align: right;
	}
	
	#container.single div.container_inner div.contents ul#next_back {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 100px;
	}
	
	#container.single div.container_inner div.contents ul#next_back li{
		display: inline-block;
		margin: 0 18px;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: 1.6rem;
		line-height: 1;
		text-decoration: none;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow{
		display: inline-block;
		position: relative;
		right: 0;
		bottom: -0.15em;
		z-index: 5;
		padding-right: clamp(calc(3px * 0.667), calc(3 * var(--scale)), 3px);
		
    }
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow::before{
		content: "";
		width: clamp(calc(26px * 0.667), calc(26 * var(--scale)), 26px);
		height: 1px;
		background: #000;
		display: block;
		transform: scaleX(1);
		transform-origin: right center;
		transition: transform 0.3s ease;
	}
	
	#container.single div.container_inner div.contents ul#next_back li.next a span.arrow::before{
		transform-origin: left center;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a:hover span.arrow::before{
		transform: scaleX(0.8);
	}
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow i{
		width: clamp(calc(11px * 0.667), calc(11 * var(--scale)), 11px);
		line-height: 0;
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 0;
    }
	
	#container.single div.container_inner div.contents ul#next_back li.next a span.arrow{
		padding-right: 0;
		padding-left: clamp(calc(3px * 0.667), calc(3 * var(--scale)), 3px);
    }
	
	#container.single div.container_inner div.contents ul#next_back li.next a span.arrow i{
		right: initial;
		left: 0;
		bottom: 0;
		transform: rotateY(180deg);
    }
	
}


@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: 25%;
		top: 17.8cqw;
		left: -5cqw;
	}
	
	#page_title div.page_title_inner span.bg2 {
		width: 17%;
		top: 37.2cqw;
		left: 31%;
	}
	
	#container {
		width: 100%;
	}
	
	#container div.container_inner{
		width: 100%;
	}
	
	#container div.container_inner aside{
		width: 100%;
		padding-left: 5%;
		overflow: hidden;
	}
	
	#container div.container_inner aside h3{
		display: inline-block;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f21);
		font-weight: 500;
		line-height: 1;
		border-bottom: 1px solid #000;
		padding-bottom: clamp(calc(3px * 0.96), calc(3 * var(--scale)), calc(3px * 2.56));
		margin-bottom: clamp(calc(14px * 0.96), calc(14 * var(--scale)), calc(14px * 2.56));
	}
	
	#container div.container_inner aside h3:nth-child(n + 2){
		margin-top: clamp(calc(18px * 0.96), calc(18 * var(--scale)), calc(18px * 2.56));
	}
	
	#container div.container_inner aside ul{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: clamp(calc(25px * 0.96), calc(25 * var(--scale)), calc(25px * 2.56));
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-bottom: clamp(calc(10px * 0.96), calc(10 * var(--scale)), calc(10px * 2.56));
		padding-right: 5%;
	}
	
	#container div.container_inner aside ul li{
		flex: 0 0 auto;
		white-space: nowrap;
		display: inline-block;
		font-size: var(--f13);
		line-height: 1;
		color: #000;
	}
	
	#container div.container_inner aside ul li:first-of-type{
		font-family: YakuHanJP, "Libre Franklin";
		font-weight: 700;
	}
	
	#container div.container_inner aside ul li:first-of-type span{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	#container div.container_inner aside ul li:first-of-type span::before{
		content: "";
		display: inline-block;
		width: clamp(calc(8px * 0.96), calc(8 * var(--scale)), calc(8px * 2.56));
		height: clamp(calc(18px * 0.96), calc(18 * var(--scale)), calc(18px * 2.56));
		border: 1px solid #000;
		border-width: 1px 0 1px 1px;
		margin-right: 0.5em;
	}
	
	#container div.container_inner aside ul li:first-of-type span::after{
		content: "";
		display: inline-block;
		width: clamp(calc(8px * 0.96), calc(8 * var(--scale)), calc(8px * 2.56));
		height: clamp(calc(18px * 0.96), calc(18 * var(--scale)), calc(18px * 2.56));
		border: 1px solid #000;
		border-width: 1px 1px 1px 0;
		margin-left: 0.5em;
	}
	
	
	#container div.container_inner main{
		width: 100%;
		margin-top: clamp(calc(32px * 0.96), calc(32 * var(--scale)), calc(32px * 2.56));
	}
	
	#container div.container_inner main article {
		width: 90%;
		margin: 0 auto;
	}
	
	#container div.container_inner main ul.list{
		border-top: 1px solid #D7D7DE;
	}
	
	#container div.container_inner main ul.list li{
		width: 100%;
		border-bottom: 1px solid #D7D7DE;
	}
	
	#container div.container_inner main ul.list li a{
		width: 100%;
		padding: clamp(calc(20px * 0.96), calc(20 * var(--scale)), calc(20px * 2.56)) 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	#container div.container_inner main ul.list li a div{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: clamp(calc(13px * 0.96), calc(13 * var(--scale)), calc(13px * 2.56));
	}
	
	#container div.container_inner main ul.list li a div time,
	div.head_block div.head_box div time {
		width: clamp(calc(95px * 0.96), calc(95 * var(--scale)), calc(95px * 2.56));
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f15);
		line-height: 1;
	}
	
	#container div.container_inner main ul.list li a div p.cate,
	div.head_block div.head_box div p.cate {
		display: inline-block;
		padding: clamp(calc(6px * 0.96), calc(6 * var(--scale)), calc(6px * 2.56)) clamp(calc(1px * 0.96), calc(10 * var(--scale)), calc(10px * 2.56));
		font-size: var(--f13);
		line-height: 1;
		border: 1px solid #000;
		border-radius: clamp(calc(60px * 0.96), calc(60 * var(--scale)), calc(60px * 2.56));
		text-align: center;
	}
	
	#container div.container_inner main ul.list li a h3{
		font-size: var(--f15);
		font-weight: 500;
		line-height: 1.5;
	}
	
	/*詳細*/
	
	div.head_block {
		width: 90%;
		margin: 0 auto;
		padding: clamp(calc(106px * 0.96), calc(106 * var(--scale)), calc(106px * 2.56)) 0 clamp(calc(30px * 0.96), calc(30 * var(--scale)), calc(30px * 2.56));
		display: flex;
		flex-wrap: wrap;
	}
	
	div.head_block h2{
		display: inline-block;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f36);
		font-weight: 500;
		line-height: 1;
		margin-bottom: clamp(calc(40px * 0.96), calc(40 * var(--scale)), calc(40px * 2.56));
	}
	
	div.head_block div.head_box{
		width: 100%;
	}
	
	div.head_block div.head_box div{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: clamp(calc(10px * 0.96), calc(10 * var(--scale)), calc(10px * 2.56));
		margin-bottom: clamp(calc(20px * 0.96), calc(20 * var(--scale)), calc(20px * 2.56));
	}
	
	div.head_block div.head_box h1{
		font-size: var(--f21);
		font-weight: 500;
		line-height: 1.5;
	}
	
	#container.single {
		border-top: 1px solid #D7D7DE;
		border-bottom: 1px solid #D7D7DE;
		padding-top: clamp(calc(30px * 0.96), calc(30 * var(--scale)), calc(30px * 2.56));
		padding-bottom: clamp(calc(40px * 0.96), calc(40 * var(--scale)), calc(40px * 2.56));
	}
	
	#container.single div.container_inner{
		display: flex;
		flex-direction: column-reverse;
	}
	
	#container.single div.container_inner div.contents{
		width: 90%;
		margin: 0 auto clamp(calc(40px * 0.96), calc(40 * var(--scale)), calc(40px * 2.56));;
		padding-bottom: clamp(calc(40px * 0.96), calc(40 * var(--scale)), calc(40px * 2.56));
		position: relative;
	}
	
	#container.single div.container_inner div.contents::after{
		content: "";
		width: 100cqw;
		height: 1px;
		background: #D7D7DE;
		display: block;
		position: absolute;
		bottom: 0;
		left: -5cqw;
	}
	
	#container.single div.container_inner div.contents h2{
		font-size: var(--f20);
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h3{
		font-size: var(--f18);
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h4{
		font-size: var(--f16);
		font-weight: 500;
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	
	#container.single div.container_inner div.contents h2:not(:first-child),
	#container.single div.container_inner div.contents h3:not(:first-child),
	#container.single div.container_inner div.contents h4:not(:first-child) {
		margin-top: 1.5em;
	}
	
	#container.single div.container_inner div.contents p{
		font-size: var(--f14);
		line-height: 1.8;
		letter-spacing: 2%;
	}
	
	#container.single div.container_inner div.contents a{
		color: #000;
		text-decoration: underline;
	}
	
	#container.single div.container_inner div.contents figure.photo {
		margin: clamp(calc(20px * 0.96), calc(20 * var(--scale)), calc(20px * 2.56)) 0;
	}
	
	#container.single div.container_inner div.contents figure.photo.small {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#container.single div.container_inner div.contents figure.photo figcaption{
		font-size: var(--f12);
		line-height: 1.4;
		text-align: right;
	}
	
	#container.single div.container_inner div.contents ul#next_back {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: clamp(calc(80px * 0.96), calc(80 * var(--scale)), calc(80px * 2.56));
	}
	
	#container.single div.container_inner div.contents ul#next_back li{
		display: inline-block;
		margin: 0 18px;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		font-family: YakuHanJP, "Libre Franklin";
		font-size: var(--f14);
		line-height: 1;
		text-decoration: none;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow{
		display: inline-block;
		position: relative;
		right: 0;
		bottom: -0.15em;
		z-index: 5;
		padding-right: clamp(calc(3px * 0.96), calc(3 * var(--scale)), calc(3px * 2.56));
		
    }
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow::before{
		content: "";
		width: clamp(calc(26px * 0.96), calc(26 * var(--scale)), calc(26px * 2.56));
		height: 1px;
		background: #000;
		display: block;
	}
	
	#container.single div.container_inner div.contents ul#next_back li a span.arrow i{
		width: clamp(calc(11px * 0.96), calc(11 * var(--scale)), calc(11px * 2.56));
		line-height: 0;
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 0;
    }
	
	#container.single div.container_inner div.contents ul#next_back li.next a span.arrow{
		padding-right: 0;
		padding-left: clamp(calc(3px * 0.96), calc(3 * var(--scale)), calc(3px * 2.56));
    }
	
	#container.single div.container_inner div.contents ul#next_back li.next a span.arrow i{
		right: initial;
		left: 0;
		bottom: 0;
		transform: rotateY(180deg);
    }
	
	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;
    }

}