@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/
body {
	font-family: "Noto Sans JP", メイリオ, sans-serif;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* lead */

#lead{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top:140px;
}

#lead .lead-img{
    width:46%;
    min-height: 400px;
    background: url("../img/homepage-design-iwaki13.jpg") no-repeat center;
    background-size: cover;
}

#lead .lead-area{
    width:52%;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    flex-direction: row-reverse;
}

@media screen and (max-width:1060px) {
#lead .lead-img{
     width:30%;
}
#lead .lead-area{
    width:68%;
}
}

@media screen and (max-width:768px) {
#lead{
    flex-direction: column-reverse;
}

#lead .lead-img,
#lead .lead-area{
    width:100%;
} 
    
#lead .lead-img{
    min-height: 250px;
    }
    
#lead .lead-area{
    margin: 0 0 140px 0;
    min-height: 20em;
    justify-content: center;
}
}

#lead .lead-area h1,
#lead .lead-area h2 {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

#lead .lead-area h2{
    width:28%;
    line-height:2.5;
    font-size:1.4rem;
    font-family: "Yu Mincho", "Hiragino Pro", serif;
    margin-right: 20px;
}

#lead .lead-area h2{
     width:48%;   
    padding: 50px 0 0 0;
    line-height: 2.8;
}

@media screen and (max-width:1300px) {
#lead .lead-area h1{
    line-height:2;
}
#lead .lead-area h2{
    line-height: 2.3;
}    
}

#lead .lead-area h1,
#lead .lead-area h2{
    width:auto;
} 
#lead .lead-area {
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}

@media screen and (max-width:470px) {
#lead .lead-area h2{
    line-height: 1.8;
}
}

_:-ms-lang(x)::-ms-backdrop, #lead .lead-area h2{
    width:8em;
}


@media screen and (max-width:350px) {
#lead .lead-area h1{
    line-height: 1.6;
}
}

/* font-family */


/* area */

#container{
    overflow-x: hidden;
}