﻿@charset "utf-8";
/* CSS Document */

#right_box h1 + p{
	margin-bottom:3em;
}
#right_box .box .bg{
	background:url(../img/img_01.jpg) center center/cover no-repeat;
	padding:4rem 0rem;
}
#right_box .box_02 .bg{
	background:url(../img/img_02.jpg) center center/cover no-repeat;
}
#right_box .box_03 .bg{
	background:url(../img/img_03.jpg) center center/cover no-repeat;
}
#right_box .box_04 .bg{
	background:url(../img/img_04.jpg) center center/cover no-repeat;
}

#right_box .box .bg h2 {
    font-size: 2.6rem;
    color: #FFF;
    background-color: #2d9d48;
    border-radius: 50%;
    width: 7.5em;
    height: 7.5em;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom:0px;
	text-align:center;
	margin-left:1.2em;
	line-height:1.4;
}
#right_box .box_04 .bg h2 {
    background-color: #f17700;
}
#right_box .box .flex{
	padding:3rem 0 7rem 0;
	align-items:center;
	position:relative;
}
#right_box .box .flex:after{
	content: "";
    position: absolute;
    top: 0px;
    left: 15%;
    height: 100%;
    border-left: 1px solid #EB0100;
	z-index:0;
}
#right_box .box_03 .flex:after{
    height: 80%;
}
#right_box .box_03 .flex .dot{
	position:absolute;
	width:1.3rem;
	height:1.3rem;
	border-radius:50%;
	background-color:#EB0100;
	left:15.1%;
	margin-left:-0.65rem;
	top:80%;
}
#right_box .box_04 .flex:after{
    height: 88%;
}
#right_box .box_04 .flex .dot{
	position:absolute;
	width:1.3rem;
	height:1.3rem;
	border-radius:50%;
	background-color:#EB0100;
	left:15.1%;
	margin-left:-0.65rem;
	top:88%;
}
#right_box .box ul{
	width:30%;
	position:relative;
	z-index:1;
}
#right_box .box ul li{
	font-size:2rem;
	border:solid 0.1rem #b9b7b7;
	width:100%;
	text-align:center;
	margin-bottom:0.7em;
	padding:0.3em 0;
	background-color:#FFF;
}
#right_box .box ul li:last-child{
	margin-bottom:0px;
}
#right_box .box ul + p{
	width:70%;
	box-sizing:border-box;
	padding:0 3em;
}
#right_box .box ul + div{
	width:70%;
	box-sizing:border-box;
	padding-left:3em;
}
#right_box .box .btn_red{
	text-align:right;
	margin-top:1.5em;
}
#right_box .box .btn_red a {
    font-size: 1.6rem;
    padding: 0.7em 2.5em;
	text-align:center;
}
#right_box .box .btn_red a:after {
    content: "";
    width: 0.82em;
    height: 0.69em;
    background: url(/en/common/img/icon_blank_white.png) 0 0 /contain no-repeat;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.4em;
	border:none;
	transform: rotate(0deg);
}


/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
#right_box .box .bg h2 {
    font-size: 2.19vw;
}
#right_box .box ul li{
	font-size:1.69vw;
}

}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
#right_box .box .bg h2 {
    font-size: 2rem;
}
#right_box .box .bg{
	background-position:80%;
}
#right_box .box_02 .bg{
	background-position:45%;
}
#right_box .box_04 .bg{
	background-position:30%;
}
#right_box .box .flex {
    padding: 3rem 0 5rem 0;
}
#right_box .box ul {
    width: 40%;
}
#right_box .box ul li {
    font-size: 1.8rem;
}
#right_box .box ul + p {
    width: 60%;
    padding: 0 0 0 1em;
}
#right_box .box ul + div {
    width: 60%;
    padding: 0 0 0 1em;
}
#right_box .box .flex:after {
    left: 20%;
}
#right_box .box_03 .flex .dot {
    left: 20%;
}
#right_box .box_04 .flex .dot {
    left: 20%;
}
#right_box .box_04 .flex:after{
    height: 92%;
}
#right_box .box_04 .flex .dot{
	top:92%;
}

#right_box .box .btn_red a {
    padding: 0.7em 1em 0.7em 0;
	width:100%;
	box-sizing:border-box;
}
#right_box .box .btn_red a:after {
    right: 0.6em;
}


}



