@charset "utf-8";
/* top Heroimage
------------------------------------------------------------*/
.topHeroimage{
  position: relative; 
  z-index: 100;        
}

.topHeroimage .topHeroimage__Layer{
position: absolute;
bottom: 7%;
left: 50%;
transform: translate(-50%, 0);
width: 80%;
color: #666666;
letter-spacing: 0.4px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
text-align: center;
font-weight: 100;
}
.topHeroimage__Layer h2{
margin-bottom: 1rem;
line-height: 1.2;
}
/*背景gradation*/
div.sec01,
div.sec03,
div.sec04,
div.contact{
background-image: linear-gradient(to bottom, #e5f1f2, #ebebeb); 
}
div.sec02{
background-image: linear-gradient(to bottom, #e9efef, #f1f1f1); 
}
/*layout*/
div.sec01,
div.sec02,
div.sec03,
div.sec04{
padding: 6rem 1rem 0;
}
/* button */
p.action{
padding: 3rem 0 0;
text-align: center;
}
p.action a img{
max-width: 20%;
height: auto;
}
p.action a:hover img{
background-color: #FFFFFF;
}
/*お問い合わせ contact*/
.contact{
padding: 3rem 1rem;
}
.contact a{
display: block;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.contact a:hover{
color: #e6e1cc;
text-decoration: none;
background-color: #FFFFFF;
}
.contact_container{
border:solid 1px #cccccc;
}
.contact_container p.noto-serif-jp{
font-size: 1.6rem;
font-weight: 400;
width: 70%;
text-align: center;
}
.contact_container p.action{
padding-top: 0;
width: 30%;
text-align: right;
}
.contact_container p.action img{
max-width: 40%;
height: auto;
}
/* .sec01 .sec03 layout*/
.container_line{
display: grid;
grid-template-columns: 1fr 4fr;
gap: 0.5rem;
max-height: 100vh;
}
.container_line h2{
text-align: right;
padding: 0rem 0rem 5rem;
font-size: 1.1rem;
font-weight: 700;
}
.container_line .container_desc{
padding: 2rem 0rem 5rem 0.5rem;
}
.container_desc{
border-left: solid 1px #cccccc;
}
.container_desc h3{
font-size: 1.5rem;
font-weight: 400;
letter-spacing: -0.1em;
line-height: 1.5;
}
.container_desc h3 span{
letter-spacing: 0em;
}
/* .sec02 */
.container_box{
border:solid 1px #cccccc;
padding: 2rem 0;
}
.container_box h3{
padding-left: 1rem;
}
.container_box h2{
padding: 0rem 1rem 2rem;
font-size: 1.1rem;
font-weight: 700;
}
.container_box h3{
font-size: 1.5rem;
font-weight: 400;
}
.container_box p{
padding: 2rem 3rem;
}
.container_box p span{
font-weight: 700;
}
/* ここからパソコン用画面の設定
------------------------------------------------------------*/
@media screen and (min-width:756px){
p.action a img {
    max-width: 10%;
    height: auto;
}
.contact_container p.action img{
max-width: 30%;
height: auto;
}
.topHeroimage .topHeroimage__Layer{
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -66%);
max-width: 500px;
color: #cecece;
letter-spacing: 0.4px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
text-align: center;
font-weight: 100;
}
/*layout*/
div.sec01,
div.sec02,
div.sec03,
div.sec04{
padding: 10rem 1rem 0;
}
/* .sec01 .sec03 layout*/
.container_line{
width: 40%;
margin: 0 auto;
}
/* .sec02 */
.container_box{
width: 40%;
margin: 0 auto;
}
/*お問い合わせ contact*/
.contact_container{
width: 40%;
margin: 10rem auto;
}
}