@charset "utf-8";

/*==================================================
トップページ　レイアウト
===================================*/

/* font */



/* レイアウトのためのCSS */

body{
    font-family: 'Noto Sans JP', sans-serif;
	/*color: #04474c;*/
    color: #021c1e;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

@media screen and (max-width:768px) {
body{
	font-size:0.8rem;
	}
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
    color: #333;
	text-decoration: none;
    outline: none;
}

a:hover{
    	color:#0481A2;
}

.img-fluid{
    max-width: 100%;
    height: auto;
}

.block{
    display: block;
}

.flex{
    display: flex;
}

.flex-wrap{
    flex-wrap: wrap;
}

.justify-between{
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.alignitems-center {
    align-items: center;
}

.relative{
    position: relative;
}

.absolute{
    position:absolute;
}

section {
    margin: 60px 0;
	padding:30px;
    margin:0;
}
/*
section:nth-child(2n){
	background:#f3f3f3;	
}
*/

.padding-2 {
    padding: 2rem;
}

.padding-1 {
    padding: 1rem;
}

.v-align-mid {
    vertical-align: middle;
}

.fw-400 {
    font-weight: 400;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}
.fs-80 {
    font-size: 80%;
}

.fs-120 {
    font-size: 120%;
}

.ls-1 {
    letter-spacing: 0.1em;
}

/*========= レイアウトのためのCSS ===============*/


h1{
	text-align: left;
	text-transform: uppercase;
}

h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}

p{
	margin-top:20px;	
}

small{
    background: #454E50;
	color:#fff;
	display: block;
	text-align: center;
	padding:20px;
}



.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.float-right {
    float: right;
}

.t-margin-3 {
    margin-top: 3rem;
}

.btn {
    background: #fff;
    width: 200px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-viewmore {
    color: #ba7d7d;
    margin-top: 3rem;
}

#work .text-area .btn-viewmore,#news .text-area .btn-viewmore {
    float: right;
}

@media screen and (max-width:768px) {
    
.btn-viewmore {
    margin-top: 2rem;
}

#work .text-area .btn-viewmore,#news .text-area .btn-viewmore {
    float: left;
}
    }

/*=====Products, Service のリンクボタン======*/

    /*ボタンの形状*/
.btnlink {
	/*color:#333333;*/
	background-color: #fff;
	font-size: 1.2em;
		border-radius: 6px;

	/*border:1px solid #08a6d6;*/
    padding: 16px 30px;	
	display:inline-block;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

/*hoverした際の背景の形状*/
.btnlink:hover{
	background:#7e675e;
	color: #fff;
	border-color:transparent;
}


/*-----------------------------
ヘッダー
----------------------*/
header {
    position: fixed; 
    top:0;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
    padding: 10px 0;
    height: 100px;/**/
    width: 100%;
    background: #FFF;
    opacity: 70%;
    z-index: 1000;
}

header img {
	max-width: 360px;
}

@media screen and (max-width:500px) {
    header {
        height: 80px;
        justify-content: flex-start;
    }
    header img {
        max-width: 70%;
    }
    
}


main {
    position: relative;;
}


/*------------------------
メインイメージ
------------------------*/
#top-main {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 0;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-bottom: 80px;
}

#top-main img {
    display: block;
    width: 50%;
    height: auto;
}


#top-main::after {
    content: '';
    position: absolute;
    top:50px;
    right: 0;
    z-index: 1;
    background-image: url(../images/img_top001.jpg);/*fe-male*/
    width: 53.6%;
    height: 100%;
    background-size: cover;
    opacity: 0.72;
    background-repeat: no-repeat;
}

#top-main p.copy {
  font-optical-sizing: auto;
  font-style: normal;
    font-size: 1.8em;
    letter-spacing: 0.05em;
    color: #f5f4f4;
    position: absolute;
    top: 65%;
    left: 5%;
    z-index: 10;
}

@media screen and (max-width:960px) {
#top-main p.copy {
    font-size: 1.15em;
    left: 7%;
}

}


@media screen and (max-width:768px) {
#top-main p.copy {
    font-size: 1.25em;
    left: 7%;
    top: 55%;
}

}

@media screen and (max-width:540px) {
#top-main {
    margin-top: 90px;
    z-index: 2;
}
#top-main img {
    width: 80%;
}

#top-main::after {
    width: 70%;
    height: 50%;
    top:70%
}

#top-main p.copy {
    top: 50%;
    left: 3%;
}

}

@media screen and (max-width:450px) {
    #top-main {
        margin-top: 80px;
    }
    #top-main img {
    width: 90%;
    }

    #top-main::after {
        left: 30%;
        top: 60%
    }

    #top-main p.copy {
        top: 40%;
    }
}

/*------------------------
右サイドh2　AboutUs, Products, Work
------------------------*/
#aboutus h2,#products h2,#work h2 {
    color: #c3e1f7;
    font-size: 3.8rem;
    font-family: 'inter';
    font-weight: 300;
    line-height: 1.54rem;
    background-color: #ba7d7d;
    text-align: left;
    display: block;
    width: 45%;
    height: 4.6rem;
    padding-left: 10%;
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    position: absolute;
    left: 0;
    top: -1.54rem

}

#aboutus h2 span,#products h2 span,#work h2 span {
    font-size: 2em;
}

@media screen and (max-width:1300px) {
#aboutus h2,#products h2,#work h2 {
    font-size: 2.8rem;
    line-height: 1.54rem;
    display: block;
    width: 45%;
    height: 3.6rem;
    left: 0;
    top: -1.54rem

}

#aboutus h2 span,#products h2 span,#work h2 {
    font-size: 2em;
}

    }

@media screen and (max-width:768px) {
#aboutus h2,#products h2,#work h2 {
    font-size: 2rem;
    line-height: 1.54rem;
    display: block;
    width: 45%;
    height: 3rem;
    padding-left: 10%;
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
    position: absolute;
    top: -1.5rem

}
    }


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

#aboutus h2,#products h2,#work h2 {
    width: 65%;
}
    }

/*-----右サイドh2 ここまで---------*/


/*------------------------
左サイドh2　Services, News
------------------------*/
#services h2,#news h2 {
    color: #c3e1f7;
    font-size: 3.8rem;
    font-family: 'inter';
    font-weight: 300;
    line-height: 1.54rem;
    background-color: #ba7d7d;
    text-align: left;
    display: block;
    width: 45%;
    height: 4.6rem;
    padding-left: 10%;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    position: absolute;
    right: 0;
    top: -1.54rem

}

#services h2 span,#news h2 span {
    font-size: 2em;
}

@media screen and (max-width:1300px) {
#services h2,#news h2 {
    font-size: 2.8rem;
    line-height: 1.54rem;
    display: block;
    width: 45%;
    height: 3.6rem;
    position: absolute;
    top: -1.54rem

}

#services h2 span,#news h2 span {
    font-size: 2em;
}

    }

@media screen and (max-width:768px) {
#services h2,#news h2 {
    font-size: 2rem;
    line-height: 1.54rem;
    display: block;
    width: 45%;
    height: 3rem;
    padding-left: 10%;
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
    position: absolute;
    top: -1.5rem

}
    }


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

#services h2,#news h2 {
    width: 65%;
}
    }

/*-----左サイドh2 ここまで---------*/



/*------------------------
AboutUs
------------------------*/

#aboutus {
    width: 100%;
    display: block;
    position: relative;
    padding: 0;
    background: rgba(208, 150, 131, 0.4) ;
}


#aboutus h3 {
    color: #523232;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1em;
    margin-bottom: 2rem;
    padding: 6rem 10% 0% 10%;
    position: relative;
}

#aboutus .lead p{
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 2em;
    padding: 0 10% 3rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: end;
}


/*#aboutus .lead {
    font-size: 0.9rem;
    line-height: 1.8em;
    padding: 0 10% 3rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
}*/


@media screen and (max-width:768px) {
#aboutus .lead p {
    width: 100%;
    padding-bottom: 2rem;
    /*display: flex;
    justify-content: space-between;
    align-items: end;*/
    flex-direction: column;
}
    }

@media screen and (max-width:520px) {
#aboutus h3 {
    font-size: 1.2rem;
    line-height: 1em;
    margin-bottom: 1rem;
    padding: 4rem 5% 0% 5%;
    position: relative;
}

    }



/*------------------------
Products
------------------------*/
#products {
    width: 100%;
    height: 36rem;
    display: block;
    position: relative;
    padding: 0;
    margin-top: 16rem;
    z-index: 1;
}
#products h2 {
    letter-spacing: 3px;
    z-index: 5;
}

/*products 左　ボタンエリア*/
#products .btn-area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 4rem;
    padding-right: 15%;
    width: 65%;
    height: 36em;
    background-color: #88c6eb;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    z-index: -10;
}

#products .flex-item {
    display: flex;
    justify-content: center;
    width: 46%;
}

/*produts 右　イメージ写真*/
#products .pht-area {
    position:absolute;
    top: -8rem;
    display: block;
    width: 60%;
    margin-left: 40%;
    padding: 0;
    height: 36rem;
    background-color: pink;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100% );
    z-index: 4;
    background-image: url(../images/img_top010.jpg);
    background-size: cover;
    background-position: bottom;
    opacity:0.76;
   
}

@media screen and (max-width:768px) {
#products .pht-area {
    height: 30rem;
    width: 55%;
    margin-left: 45%;
}
    
    }


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

#products {
    margin-top: 6rem;
}

#products .btn-area {
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    height: 25rem;
    padding-right: 0;
    padding-top: 2rem;
    padding-bottom: 6rem;
}

#products .pht-area {
    position:absolute;
    top:60%;
    display: block;
    width: 100%;
    margin-left: 0;
    padding: 0;
    height: 14rem;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100% );
}

    }



/*------------------------
Services
------------------------*/
#services {
    width: 100%;
    height: 31rem;
    display: block;
    position: relative;
    padding: 0;
    margin-top: 6rem;
    z-index: 1;
}
#services h2 {
    letter-spacing: 3px;
    z-index: 5;
}

@media screen and (max-width:768px) {
#services {
    margin-top: 0;
}
    
    }

@media screen and (max-width:540px) {
#services {
    margin-top: 5rem;
}

}


/*services 右　ボタンエリア*/
#services .btn-area {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 4rem;
    padding-right: 10%;
    padding-left: 30%;
    width: 80%;
    margin-left: 20%;
    height: 31rem;
    background-color: #A1D6E2;
    clip-path: polygon(20% 0, 100% 0, 100% 100%,3% 100%);
    z-index: 4;
}

/*services 右　ボタン形状*/
#services .btn-area  a {
    width: 40%;
    text-align: center;
}
/*---//services 右　ボタン形状*/


@media screen and (min-width:1920px) {

#services .btn-area {
    padding-left: 40%;
    padding-right: 10%;
}
}

@media screen and (max-width:1440px) {
    
#services .btn-area {
    padding-top: 4rem;
    padding-bottom: 3rem;
    width: 90%;
    margin-left: 10%;
}

    }

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

#services .btn-area  a {
    width: 46%;
}

    }


@media screen and (max-width:768px) {
/*右エリア*/
#services .btn-area {
    padding-top: 5rem;
    padding-bottom: 4rem;
    padding-right: 0;
    padding-left: 35%;
    width: 80%;
    margin-left: 20%;
    height: 31rem;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 25% 100%);
}

    #services .btn-area  a {
    width: 60%;
    margin-left: 20%;
}

    }

@media screen and (max-width:540px) {
#services .btn-area {
    width: 100%;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    height: 28rem;
    margin-left: 0;
    padding-right: 0;
    padding-top: 2rem;
    padding-left: 10%;
}


#services .btn-area  a {
    width: 55%;
}

    }



/*services 左　イメージ写真*/
#services .pht-area {
    position:relative;
    top: -12rem;
    display: block;
    width: 45%;
    height: 28rem;
    margin-right: 40%;
    padding: 0;;
    clip-path: polygon(0 0, 90% 0, 60% 100%, 0 100% );
    background-image: url(../images/img_top011.jpg);
    background-size: cover;
    background-position: right;
    opacity:0.63;
    z-index: 6; 
}

@media screen and (max-width:768px) {
#services .pht-area {
    position:absolute;
    top: 6rem;
    display: block;
    width: 60%;
    height: 28rem;
    margin-right: 40%;
    padding: 0;;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100% );
    background-image: url(../images/img_top011.jpg);
    background-size: cover;
    background-position: right;
    opacity:0.63;
    z-index: 6; 
}

    }

@media screen and (max-width:540px) {
#services .pht-area {
    top: 25rem;
    height: 14rem;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100% );
}

    }


/*------------------------
Work
------------------------*/
#work {
    clear: both;
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    padding: 0;
    margin-top: 30rem;
}

#work h2 {
    letter-spacing: 3px;
    z-index: 5;
}


/*work 左　ボタンエリア*/
#work .text-area {
    position: relative;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center; */
    padding-top: 8rem;
    padding-left: 10%;
    padding-right: 20%;
    width: 60%;
    height: 30rem;
    background-color: #f4d7bf;
    z-index: 0;
}


/*work 右　イメージ写真*/
#work .pht-area {
    position:absolute;
    top: -10rem;
    display: block;
    width: 50%;
    margin-left: 50%;
    padding: 0;
    height: 30rem;
    z-index: 8;
    background-image: url(../images/img_top002.jpg);
    background-size: cover;
    background-position: bottom;
    opacity:0.82;
   
}


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

#work .text-area {
    padding-right: 7rem;

}

    }


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

#work {
    margin-top: 14rem;
}

#work .text-area {
    width: 60%;
    height: 20rem;
    padding-top: 5rem;
    padding-left: 10%;
    padding-right: 0%;
    line-height: 2em;
}


#work .pht-area {
    position:absolute;
    top: 0;
    display: block;
    width: 40%;
    margin-left: 60%;
    padding: 0;
    height: 20rem;
    z-index: 8;
    background-image: url(../images/img_top002.jpg);
    background-color:rgba(255,255,255,0.8);
    /*background-blend-mode:lighten;*/
    background-size: cover;
    background-position: bottom;
    opacity: 0.5;
}
    
    }

@media screen and (max-width:500px) {
#work {
    margin-top: 16rem;
}
#work .text-area{
    width: 100%;
}

#work .pht-area {
    width: 100%;
    top: 125%;
    left: 0;
    margin-left: 0;
    height: 10rem;
}

    }


/*------------------------
News
------------------------*/

#news {
    margin-top: 26rem;
    margin-bottom: 3rem;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    height: 28rem;
    background: rgba(244,204,112,0.7);
}

#news .text-area {
    position: relative;
    width: 50%;
    height: 100%;
    margin-left: 50%;
    padding: 5rem 8% 0 8%;
}
#news .text-area ul li {
    margin-bottom: 1rem;
    line-height: 1.2em;
}
#news .text-area ul li:last-child {
    margin-bottom: 0;
}

#news .pht-area {
    position:absolute;
    top: 0;
    display: block;
    width: 50%;
    height: 100%;
    margin-left: 0;
    padding: 0;
    z-index: 8;
    background-image: url(../images/img_top004.jpg);
    background-color:rgba(255,255,255,0.2);
    background-blend-mode:lighten;
    background-size: cover;
    background-position: top;
}


@media screen and (max-width:768px) {
#news {
    margin-top: 10rem;
    height: 22rem;
}

#news .text-area {
    width: 60%;
    padding: 4rem 5% 0 0;
}
#news .pht-area {
    width: 40%;
}

    }


@media screen and (max-width:500px) {
#news {
    margin-top: 20rem;
}
#news .text-area{
    width: 100%;
    margin-left: 0;
    padding-left: 10%;
}

#news .pht-area {
    width: 100%;
    top:100%;
    height:10rem;
}

    }


/*--------------
Contact BUTTON
-----------------*/

#contact-btn {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 6rem;
}

.btn-contact {
    color: #7E675E;
    border: #9E8D86 solid 1px;
}

@media screen and (max-width:500px) {
#contact-btn {
    padding-top: 10rem;    
}
    }


/*---------------------
footer
-----------------------*/

#footer {
    position: relative;
    display: flex;
    justify-content: space-around;
    background: #454E50;
    padding-top: 4.3rem;
    padding-bottom: 5rem;
    padding-left: 2%;
    padding-right: 2%;
    color: #FFF;
    font-size:1.15em;
    font-weight: 400;
    z-index: 10;
}

/*footerのリンク設定*/
#footer a{
	display: block;
	text-decoration: none;
	color: #ffffff;
	/*transition:all .3s;*/
}

#footer a:hover{
    color: rgb(255, 183, 198);;
}

/*ブロック*/
.footer-row01 {
    border-right: solid 1px #fff;
    padding-right: 6%;
    padding-top: 0;
}

.footer-row02 {
    flex-direction: column;
    padding-top: 2rem;
}

.footer-row02 .group {
    justify-content: flex-start;
}

/*.footer-row02 .cate:first-child {
    margin-right: 3rem;
}*/

.footer-row02 ul {
    margin-left: 1rem;
}

.footer-row02 ul li {
    margin-bottom: 1.2rem;
}

.footer-row02 ul li::before {
    content: 'ー ';
}

.footer-row03 {
    padding-top: 2rem;
}

.footer-row03 ul li {
    margin-bottom: 1.6rem;
}

@media screen and (max-width:1100px) {
#footer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #454E50;
    padding-top: 4.3rem;
    padding-bottom: 5rem;
    padding-left: 2%;
    padding-right: 2%;
    color: #FFF;
    font-weight: 70;
}


.footer-row01 {
    border-right: none;
    padding-right: 0;
    padding-left: 8%;
    padding-top: 0;
    padding-bottom: 2rem;
    width: 100%;
    border-bottom: solid 1px #fff;
}

.footer-row02 {
    justify-content: space-between;
    padding-top: 2rem;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
    border-bottom: solid 1px #fff;
    flex-direction: column;
    align-items: start;
}

.footer-row03 {
    padding-right: 0;
    padding-left: 10%;
    padding-top: 2rem;
    width: 100%;
    border-bottom: solid 1px #fff;
}

    }


@media screen and (min-width:1921px) {

.footer-row01 {
    width: 40%;
}
    }


.footer-row01 p.name {
    font-size: 1.5rem;
}


@media screen and (max-width:540px) {
.footer-row01 {
    width: 90%;
    padding-left: 5%;
    padding-right: 0;
}

.footer-row01 p.name {
    font-size: 1.15rem;
}

.footer-row01 p.name img {
    width: 20%;
}
    }