@charset "utf-8";

main{
	font-size: 16px;
	line-height: 1.6;
}

#contentsArea #pagetitle{
	background: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f15a25+62,f26b3b+62,f26b3b+62,f26b3b+80,f15a25+80 */
background: linear-gradient(115deg,  #f15a25 62%,#f26b3b 62%,#f26b3b 62%,#f26b3b 80%,#f15a25 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display: flex;
	flex-direction: column;
	gap:10px;
	justify-content:center; 
	align-items: center;
    height: auto;
    padding: 20px;
	min-height: 240px;
}
#contentsArea #pagetitle h1{
	padding: 0;
	border: none;
	font-size: 42px;
	background: none;
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
}
#contentsArea #pagetitle h2{
	display: flex;
	gap:20px;
	align-items: center;
	justify-content: center;
}
#contentsArea #pagetitle h2 span{
	flex-shrink: 0;
	color: #fff;
	margin: 0;
	font-size: 24px;
	display: block;
	font-weight: 500;
	line-height: 1.6
}
#contentsArea #pagetitle h2:before,
#contentsArea #pagetitle h2:after{
	content: "";
	height: 1px;
	width: 50px;;
	display: block;
	background-color: #fff;
}
.kv{
	margin-bottom: 30px;
}
#kv{
	max-width: 1240px;
	margin: auto;
	padding: 0px 40px; 
	padding-bottom: 80px;
}
#kadai{
	max-width: 1240px;
	margin: auto;
	padding: 0px 40px; 
	padding-bottom: 60px;
}
.corpinfo_box{
	padding:0 40px;
}
#voice{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feeaca+0,fbcfbf+100 */
background: linear-gradient(to right,  #feeaca 0%,#fbcfbf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 60px 40px; 
}

#voice .inner{
	max-width: 1160px;
	margin: auto;
	
}

.kadai_box{
	display: flex;
	background-color: #fef2ed;
	border-radius: 15px;
	width: 100%;
	margin-bottom: 30px;
}
.kadai_box:last-child{
	margin-bottom: 0;
}
.kadai_box .left{
	border-radius: 15px 0 0 15px;;
	width: 170px;
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	padding: 15px;
	box-sizing: border-box;
	flex-shrink: 0;
	gap:5px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fbb03b+0,f15a24+100 */
background: linear-gradient(to right,  #fbb03b 0%,#f15a24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #fff;
}

.kadai_box .left p{
	margin: 0;
	font-weight: bold;
	font-size: 24px;
    line-height: 1.4;
	text-align: center;
}
.kadai_box .left img{
	width: 60px;
}
.kadai_box .right{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;;
	justify-content: center;
}

.kadai_box .right ul{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap:5px;
}
.kadai_box .right ul li{
	padding-left: 15px;
	position: relative;
	line-height: 1.4;
    padding-bottom: 6px;
}
.kadai_box .right ul li:before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 10px;
	background-color:#f15a24;
	display: block;
	position: absolute;
	left: 0;
	top: 9px;
}

.voice_box{
	margin-bottom: 100px;
	display: flex;
	padding-top: 20px;
}
.voice_box:last-child{
	margin-bottom: 0;
}
.voice_box .voice_text{
	background-color: #fff;
	border-radius: 15px;
	padding: 30px;
	padding-top: 30px;
	position: relative;
	flex-shrink: 1;
	width: 100%;
}
.voice_box .voice_text p.kadai_mark{
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
    font-size: 22px;
    text-align: center;
	color: #fff;
	top: -20px;
	left: -20px;
	border-radius: 100px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fbb03b+0,f15a24+100 */
background: linear-gradient(to right,  #fbb03b 0%,#f15a24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    text-indent: 0;
	font-weight: 800;
	line-height: 1.3;
}


#voice .voice_box h3{
	padding-left: 70px;
	font-size: 24px;
	font-weight: 500;
	color: #f15a24;
	border-bottom: solid 2px #f15a24;
	padding-bottom: 30px;
	margin-bottom: 30px;
	font-weight: 600;
	line-height: 1.4;
}
.voice_box .voice_text p{
	margin: 0;
}
.voice_name{
	width: 250px;
	margin-top: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	text-align: center;
	gap:10px;
}
.voice_name p{
	font-size:16px;
	font-weight: 500;
}
.voice_photo{
	overflow: hidden;
	border-radius: 0 15px 15px 0;
	border: 2px solid #ffffff;
	
}
.komemark{
	font-size:0.6em;
}
p.kome{
	font-size:0.8em;
}


.voice_box:nth-child(2n){
	flex-direction: row-reverse;
}


.voice_box:nth-child(2n) .voice_photo{
	overflow: hidden;
	border-radius: 15px 0 0 15px;
}

#corpinfo h2{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f15a25+62,f26b3b+62,f26b3b+62,f26b3b+80,f15a25+80 */
background: linear-gradient(135deg,  #f15a25 62%,#f26b3b 62%,#f26b3b 62%,#f26b3b 80%,#f15a25 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-size: 30px;
	width: 100%;
	height: 100px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 60px;
}

#corpinfo{
	padding-bottom: 60px;
}

.corpinfo_box{
	display: flex;
	gap:40px;
    max-width: 1240px;
	width: 100%;
	margin: auto;
}
.corpinfo_box .left{
	width: 330px;
	flex-shrink: 0;
}
.corpinfo_box .right{
	width: 100%;
	flex-shrink: 1;
}
#corpinfo .corpinfo_box h3{
	font-size: 24px;
	font-weight: 500;
	color: #f15a24;
	margin-bottom: 10px;
}
.btn_gaibu{
	padding:5px 30px;
	font-size: 16px;
	color: #f15a24;
	border: solid 1px #f15a24;
	position: relative;
	border-radius: 10px;
}
.btn_gaibu:hover{
	opacity: 0.6;
}
.btn_gaibu:active,
.btn_gaibu:visited,
.btn_gaibu:link{
	color: #f15a24;
}
.btn_gaibu:before{
	content: "";
	background-image: url("../../case/assets/img/icon_gaibu.svg");
	width: 11px;
	height: 11px;
	display: block;
	position: absolute;
	top: 1px;
	bottom: 0;
	left: 11px;
	margin: auto;
}
#bottom_btn{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 60px;
	
	border-top: solid #f15a24 2px;
}

#bottom_btn a{
	min-width: 255px;
	min-height: 40px;
	line-height: 1;
	font-size: 18px;
	font-weight: 500;
	border-radius: 40px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f15a24+0,f7931e+100 */
background: linear-gradient(to right,  #f15a24 0%,#f7931e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
#bottom_btn a:hover{
	opacity: 0.6;
}

#bottom_btn .kome{
	margin-bottom: 0;
}
.kome_area{
	margin-bottom: 30px;
}
@media only screen and (max-width: 850px) {
	.kadai_box .left p br{
		display: none;
	}
	.kadai_box .left img {    width: 36px;}
	
#contentsArea #pagetitle{
	min-height: 140px;
	}
#contentsArea #pagetitle h1{
	font-size: 22px;
	}
	#corpinfo h2 {font-size: 22px;height: 70px;}
	
#contentsArea #pagetitle h2 span {
	font-size: 16px;
	}
	.kadai_box {
		flex-direction: column;
		
	}
	.kadai_box .left {
    border-radius: 15px 15px 0 0;
		width: 100%;
		flex-direction: row;
		gap: 10px;
        justify-content: flex-start;
	}
.kadai_box .left p {
        text-align: left;
	}
#voice .voice_box {
    padding-top: 50px;
    flex-direction: column;
	}
.voice_name{
    flex-direction: row;
	width: 100%;
    gap: 20px;
	text-align: left;
	margin-top: 20px;
        align-items: flex-start;
	}
.voice_photo {
    border-radius: 15px;
    width: 50%;
}
	.voice_box:nth-child(2n) .voice_photo{
    border-radius: 15px;
	}
	
.voice_box .voice_text {
	}
.voice_box .voice_text p.kadai_mark {
   top: -50px;
        border-radius: 15px 15px 0 0;
        height: 50px;
        left: 10px;
        font-size: 20px;
        font-weight: 800;
        width: 190px;
	}
	.kadai_mark br{display: none;}
	
#voice .voice_box h3 {
	padding-left: 0px;
	}
	
	
	
.corpinfo_box {
	flex-direction: column;
	}
	.corpinfo_box .left{
		width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	#kv{padding: 0px 15px;padding-bottom: 25px;}
	#kadai{padding: 0px 15px;padding-bottom: 25px;}
	.corpinfo_box{padding: 0px 15px;gap: 25px;}
	#voice{padding: 25px 15px;}
	.voice_box .voice_text{padding: 15px;}
	.voice_photo { width: 38%;}
	.voice_box{margin-bottom: 25px;}
	.kadai_box .left p{font-size:18px;}
	#voice .voice_box h3 {padding-bottom: 15px;margin-bottom: 15px;font-size: 5vw;}
	#voice .voice_box h3 br{display: none;}
	#corpinfo h2{margin-bottom: 25px;}
	#corpinfo {padding-bottom: 40px;}
}


@media only screen and (max-width: 500px) {


	
    .voice_box .voice_text {
       
    }

    #voice .voice_box {
		
	}
#voice .voice_box h3 {
	
	}
#corpinfo h2 {
   
}
}