@charset "UTF-8";

/*----------------------------------------
design
----------------------------------------*/

.design_box{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 80px 0;
}

.design_bg_01{
background: linear-gradient(90deg,rgba(0, 143, 164, 1) 0%, rgba(99, 161, 170, 1) 100%);
}


.design_img {
width: 100%;
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(../images/design_bg01.jpg);
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.design_img2 {
width: 100%;
height: 100vh;
position: sticky;
left: 0;
top: 0;
z-index: 2;
background-position: top left;
background-size: contain;
background-repeat: no-repeat;
}

.design_img_cap{
position: absolute;
bottom: 20px;
left: 10px;
display: inline-block;
font-size: 1rem;
color: #333;
letter-spacing: 0;
z-index: 3;
text-align: right;
}

.design_text {
width: 100%;
position: sticky;
left: 0;
top: 0;
z-index: 3;
}

.design_text1 {
width: 100%;
padding: 80px 0;
background-color: rgba(53, 96, 115, 0.9);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}


p.design_title{
font-size: 1.8rem !important;
letter-spacing: 2px;
text-align: center;
}

p.design_title span{
font-size: 3.5rem;
line-height: 1.5;
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 3px;
}


.design_box2{
width: 100%;
position: relative;
}

.design_box2_text{
position: absolute;
width: 100%;
top: 40px;
left: 0;
z-index: 1;
}

.design_box2_text2{
position: absolute;
width: 50%;
bottom: 60px;
left: 10%;
}

.d_cap{
font-size: 1rem !important;
}

/*-- sp--*/

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

.design_title{
padding: 20px 0 0 0;
}

.design_text {

}

.design_text1 {
padding: 40px 10px;
height: auto;
}

.design_text2 {
padding: 40px 10px;
}

.design_text3 {
padding: 40px 10px;
}

.design_text4 {
padding: 40px 10px;
}

.design_text5{
padding: 40px 10px;
}

.design_text6{
padding: 40px 10px;
}

.design_img,
.design_img_02 {
width: 100%;
position: static;
background-attachment: scroll;
background-image: none;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}


.design_img2,
.design_img_02_2 {
display: none;
}

.design_text1 p {
line-height: 2;
font-size: 1.3rem;
font-weight: 500;
}

.design_box h2{
font-size: 3rem;
}

.design_title h2 span{
font-size: 1.3rem;
}

.design_box h2.abcd{
font-size: 3rem;
}

.design_box h2.xyz{
font-size: 3rem;
}

.design_box h4{
margin: 0 0 20px 0;
font-size: 1.5rem;
letter-spacing: 1px;
line-height: 1.5;
}

.design_box h4 span{
font-size: 2rem;
}

.design_box h5{
font-size: 1.5rem;
}

.design_text p.detail {
font-size: 1.3rem;
line-height: 1.3;
}

.design_box p.sub_title2 span{
font-size: 4rem !important;
}

.design_box_fix {
position: static;
top: 0;
}

.design_box2_text{
position: static;
width: 100%;
top: 0;
left: 0;
background-image: url(../images/design_07_bg_sp.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom center;
}

.design_box2_text2{
position: static;
width: 90%;
bottom: 0;
left: 0;
margin: 0 5%;
}


}