/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");


/* Archive
---------------------------------------------------------- */
.int_list{
	margin: 50px 0;
	align-items: stretch;
}

.int_item{
	width: 48%;
	margin: 20px 0;
	overflow: hidden;
	border-radius: 20px;
}
.int_item a{
	display: block;
	text-decoration: none;
	background-color: var(--colorOrange2);
}
.int_item a:hover{
	background-color: var(--colorOrange2-light);
	color: var(--colorBlue1);
}

.int_img{
	aspect-ratio: 16/10;
	overflow: hidden;
}
.int_item a:hover .int_img img{ transform: scale(1.05); }

.int_txt{
	position: relative;
	padding: 30px;
}
.int_txt p{ margin: 5px 0;}
.int_title{
	font-size: 1.2rem;
	font-weight: 700;
}
.int_arrow{
	position: absolute;
	right: 20px;
	top: -20px;
	width: 40px;
}
.int_item a:hover .int_arrow img{
	transform: translateX(5px);
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.int_list{ margin: 20px 0;}
	.int_item{ width: 100%;}
	.int_txt{ padding: 15px;}
	.int_title{ font-size: 1.1rem;}
}


/* talk
---------------------------------------------------------- */

/* talk_main */
.talk_main{
	position: relative;
	margin: 40px -5vw 120px;
}
.talk_main_txt{
	position: absolute;
	left: 5vw;
	bottom: -50px;
	padding: 0;
	background-color: #fff;
}
.talk_main_txt.txt_r{
	left: inherit;
	right: 5vw;
}
.talk_main_txt h2{
	padding: 30px;
	color: #000;
	font-size: 1.6rem;
	font-weight: 700;
}
.talk_main_txt p{
	margin: 0;
	padding: 10px;
	background-color: var(--colorOrange1);
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}
.talk_main img{ border-radius: 50px 0 0 50px;}

/* talk_a */
.talk_a{
	margin: 40px 0;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.talk_a.r_talk{ flex-direction: row-reverse;}
.talk_a_txt{
	margin: 40px 0;
	padding: 10px 40px;
	background-color: var(--colorOrange2);
	border-radius: 30px;
}
.talk_a > .talk_a_txt{ width: 55%;}
.talk_a.l_talk > .talk_a_txt{
	width: 55%;
	padding-right: calc(5% + 40px);
	margin-right: -10%;
}
.talk_a.r_talk > .talk_a_txt{
	padding-left: calc(5% + 40px);
	margin-left: -10%;
}

.talk_a_img{
	position: relative;
	z-index: 2;
	width: 50%;
}
.talk_a_img img{ border-radius: 30px;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.talk_main{ margin: 0 0 30px 0;}
	.talk_main_txt{ position: static;}
	.talk_main_txt h2{
		padding: 10px 15px 15px;
		font-size: 1.4rem;
	}
	.talk_main img{ border-radius: 0;}
	.talk_a{ flex-wrap: wrap;}
	.talk_a_txt{
		width: 100% !important;
		padding: 10px 20px !important;
	}
	.talk_a_img{ width: 100%;}
}