@charset "utf-8";

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

@media print, screen and (max-width: 1280px) {
}
@media only screen and (max-width: 767px) {
}

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

.contents_ttl {
    margin-bottom: 15px;
    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: 1.5rem;    /*24px÷16px*/
    font-weight: normal;
}

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

.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%;
}

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

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

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