@charset "utf-8";

/***************************************************************************
Media Queries
****************************************************************************/

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

/***************************************************************************
icon_new
****************************************************************************/

.icon_list {
    display: flex;
}
.icon_list li {
    margin-right: 10px;
}
.icon_new {
    width: 40px;
    height: 40px;
    position: relative;
}
.icon_new:after {
    content: "NEW";
    display: block;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 9px;
    line-height: 1;
    position: absolute;
    text-align: center;
}

.icon_new.topLeft {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/100% 100%;
}
.icon_new.topLeft:after {
    transform: rotate(-45deg);
    top: 10px;
    left: -7px;
}

.icon_new.topRight {
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/100% 100%;
}
.icon_new.topRight:after {
    transform: rotate(45deg);
    top: 10px;
    right: -7px;
}

.icon_new.bottomLeft {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/100% 100%;
}
.icon_new.bottomLeft:after {
    transform: rotate(45deg);
    bottom: 9px;
    left: -6px;
}

.icon_new.bottomRight {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/100% 100%;
}
.icon_new.bottomRight:after {
    transform: rotate(-45deg);
    bottom: 9px;
    right: -6px;
}

.icon_new.bottom {
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/50% 100%,
    linear-gradient(to top left, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top right/50% 100%;
}
.icon_new.bottom:after {
    top: 9px;
}

.icon_new.top {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top left/50% 100%,
    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top right/50% 100%;
}
.icon_new.top:after {
    bottom: 9px;
}

.icon_new.left {
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat bottom left/100% 50%,
    linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #B22D00 50.3%) no-repeat top right/100% 50%;
}
.icon_new.left:after {
    top: 15px;
    left: 5px;
}

.icon_new.right {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #B22D00 50.5%) no-repeat top left/100% 50%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #B22D00 50.5%) no-repeat bottom right/100% 50%;
}
.icon_new.right:after {
    top: 15px;
    right: 5px;
}

/***************************************************************************
naname
****************************************************************************/

.naname {
    position: relative;
    background-color: #D2F2F1;
    padding-top: 10%;
    padding-bottom: 10%;
}
.naname .topRight,.naname .bottomLeft,
.naname .topLeft,.naname .bottomRight {
    position: absolute;
    width: 100%;
    padding-top: 10%;
}
.naname .topLeft,.naname .topRight {
    top: 0;
}
.naname .bottomLeft,.naname .bottomRight {
    bottom: 0;
}
.naname .topLeft {
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.naname .topRight {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.naname .bottomLeft {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}
.naname .bottomRight {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #FFFFFF 50.3%) no-repeat top left/100% 100%;
}

.dummy > div:nth-child(n+3) {
    display: none;
}

/***************************************************************************
contents_ttl
****************************************************************************/

.main {
    overflow: hidden;
}
.contents_ttl {
    margin-bottom: 15px;
    position: relative;
    display: table;
    padding: 10px 1em 10px 1em;
    color: #FFFFFF;
}
.contents_ttl.left {
    background: linear-gradient(to right,  rgba(54,105,99,1) 0%,rgba(54,105,99,0.8) 50%);
}
.contents_ttl.right {
    background: linear-gradient(to left,  rgba(54,105,99,1) 0%,rgba(54,105,99,0.8) 50%);
    margin-left: auto;
}
.contents_ttl:before {
	content: " ";
	display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(54,105,99,1);
}
.contents_ttl.left:before {
    left: -100%;
    transform: translateX(1px);
}
.contents_ttl.right:before {
    right: -100%;
    transform: translateX(-1px);
}
.contents_ttl.left {
    transform: skewX(-15deg);
}
.contents_ttl.right {
    transform: skewX(15deg);
}
.contents_ttl.left .inner {
    transform: skewX(15deg);
}
.contents_ttl.right .inner {
    transform: skewX(-15deg);
}
.contents_ttl h1 {
    font-size: 24px;
    font-weight: normal;
}

/***************************************************************************
height_box
****************************************************************************/

.height_box {
    padding: 20px 0px 20px 0px;
}
.height_box .sam,
.height_box .exp {
    position: relative;
    display: table;
}
.height_box .sam img,
.height_box .exp img {
    width: 100%;
}
.height_box .sam {
    width: 50%;
}
.height_box .exp {
    width: 60%;
    margin-left: auto;
    z-index: 2;
    margin-top: -20%;
}