/*** トップページ用 ***/

@charset "utf-8";
/* カラーパレット */
.iro1 {color:#628dff;}
.iro2 {color:#525d8f;}
.iro3 {color:#eaeeff;}
.iro4 {color:#564416;}
.iro5 {color:#f85c73;}
.iro6 {color:#ba1c43;}

/***********************************************************************
トップページ設定
***********************************************************************/

/* body */
/* トップページ用レイアウト */
div.main-a {width:100%; height:100%; background-color:#ffffff; padding:10rem 0 3rem 0; position:relative; background-image:url(../img/main-img1024.jpg); background-size:cover; background-position:right 0;}
  div.cover-txt-area {width:100%; margin:0 auto;}
div.main-b {width:100%; height:auto; padding:10rem 0 0 0;}
div.main-d {width:100%; height:auto; padding:10rem 0 0 0; background-color:#ffffff;}
article.main-contents {width:90%; height:auto; margin:0 auto 6rem auto;}
p.main-catch {font-size:2.4rem; line-height:2.4rem; margin:0; font-family:'IM Fell English SC', serif; text-align:center;}/*トップ2ページ目のキャッチ　SP*/
@media screen and (min-width:1025px) {
  div.main-a {width:100%; height:100%; background-color:#ffffff; padding:16rem 0 3rem 0; position:relative; background-image:url(../img/main-img1920.jpg); background-size:cover;}
    div.cover-txt-area {width:100%; margin:0 auto;}
  div.main-b {width:100%; height:auto; padding:10rem 0 0 0;}
  div.main-d {width:100%; height:auto; padding:10rem 0 0 0;}
  article.main-contents {width:90%; height:auto;}
  p.main-catch {font-size:4rem; line-height:4rem; margin:0; font-family:'IM Fell English SC', serif; text-align:center;}/*トップ2ページ目のキャッチ　PC*/
}

article.hajimeni-block {width:90%; margin:0 auto 4rem auto;}
@media screen and (min-width:1025px) {
  article.hajimeni-block {width:60%; margin:0 auto 4rem auto;}
}

div.middle-area {width:100%; height:auto; margin:0 auto;}
article.top-left-area-a {width:100%; height:auto; padding:0;}
article.top-right-area-a {width:100%; height:auto; padding:0;}
div.top-left-img {width:100%; height:20rem; margin:0 0 2rem 0; clip-path:polygon(0 10% , 100% 0 , 100% 90% , 0 100%);}
div.top-right-img {width:100%; height:20rem; margin:0 0 2rem 0; clip-path:polygon(0 10% , 100% 0 , 100% 90% , 0 100%);}
div.top-middle-txt {width:90%; height:auto; margin:0 auto 4rem auto;}
@media screen and (min-width:1025px) {
  div.middle-area {width:80%; height:auto; margin:0 auto; display:flex; justify-content:space-between; flex-flow:row wrap;}
  article.top-left-area-a {width:50%; height:auto; padding:0 4rem 0 0;}
  article.top-right-area-a {width:50%; height:auto; padding:0 0 0 0;}
    div.top-left-img {width:100%; height:40rem; margin:0 0 2rem 0; clip-path:polygon(0 0 , 100% 0 , 100% 100% , 0 100%);}
    div.top-right-img {width:100%; height:40rem; margin:0 0 2rem 0; clip-path:polygon(0 0 , 100% 0 , 100% 100% , 0 100%);}
    div.top-middle-txt {width:80%; height:auto; margin:0 auto 4rem auto;}
}

div.gp-point {width:90%; height:auto; margin:0 auto; display:flex; justify-content:space-between; flex-flow:row wrap;}
  div.gp-point-block {width:47.5%; height:auto; margin:0 0 2rem 0; padding:0.8rem 1rem; background-color:#ba1c43; position:relative;}
  div.gp-point-block-blank {width:47.5%; height:20rem; margin:0 0 2rem 0;}
@media screen and (min-width:1025px) {
div.gp-point {width:100%; height:auto; display:flex; justify-content:space-between; align-content:space-between; flex-flow:row wrap;}
  div.gp-point-block {width:47%; height:auto; margin:0 0 2rem 0; padding:0.8rem 1rem; background-color:#525d8f;}
}

div.kuwashiku-button-area {width:100%; background-color:#000000;}
p.kuwashiku-button {margin:0 auto; padding:1rem 2rem; color:#ffffff; font-size:2rem; text-align:center;}
@media screen and (min-width:1025px) {
div.kuwashiku-button-area {width:60%; margin:0 auto; background-color:#ffffff; border:2px solid #000000; transition:0.4s;}
p.kuwashiku-button {padding:1.2rem 2.2rem; color:#000000; font-size:2.2rem; transition:0.4s; text-align:center;}
div.kuwashiku-button-area:hover {background-color:#000000; transition:0.4s;}
p.kuwashiku-button:hover {color:#ffffff; transition:0.4s;}
}

/* 事例紹介 */
article.sample-box {width:90%; height:auto; margin:0 auto;}
div.sample-block {width:100%; height:auto; padding:2rem 0 0 2rem; margin:0 0 2rem 0; position:relative;}
div.sample-block-mark {width:3rem; height:3rem; background-color:#525d8f; position:absolute; top:0; left:0; clip-path:polygon(0 0, 100% 0, 0 100%);}
@media screen and (min-width:1025px) {
article.sample-box {width:100%; height:auto; display:flex; justify-content:space-between; flex-flow:row wrap; background-color:#ffffff;}
div.sample-block {width:calc(100% / 3.4); height:auto; padding:2rem 0 0 2rem; margin:0 0 2rem 0; position:relative;}
div.sample-block-mark {width:3rem; height:3rem; background-color:#525d8f; position:absolute; top:0; left:0; clip-path:polygon(0 0, 100% 0, 0 100%);}
}

/*あいさつ*/
div.contents-banner-area-top-3 {width:100%; height:auto; margin:0 0 6rem 0; padding:3rem 0; background-color:#564416;}
div.contents-greet {width:100%; height:auto; margin:0 auto 0 auto;}
  div.greet-left {width:90%; height:auto; margin:0 auto 4rem auto;}
div.greet-representative {width:18rem; height:21.2rem; margin:0 auto 2rem auto;}
div.greet-representative img {width:100%; height:100%; object-fit:cover;}
div.greet-name {width:100%; height:auto; align-items:center; margin:0 auto;}
  div.greet-right {width:100%; height:auto;}
div.greet-coments {width:90%; height:auto; margin:0 auto;}
@media screen and (min-width:1025px) {
div.contents-banner-area-top-3 {width:100%; height:auto; margin:0 0 5rem 0; padding:5rem 0; background-color:#564416;}
div.contents-greet {width:100%; height:auto; display:flex; justify-content:space-between; flex-flow:row wrap;}
  div.greet-left {width:30%; height:auto; margin:0 0 0 auto;}
div.greet-representative {width:18rem; height:21.2rem; display:flex; justify-content:space-between; flex-flow:row wrap;}
div.greet-representative img {width:100%; height:100%; object-fit:cover;}
div.greet-name {width:65%; height:auto; align-items:center;}
  div.greet-right {width:50%; height:auto; margin:0 auto 0 0;}
div.greet-coments {width:100%; height:auto;}
}


/*img.main-img {width:100%; height:100%; object-fit:cover;} ちょっとボツ*/
/*div.main-c {width:100%; height:auto; padding:10rem 0 0 0;}*/
/* p , span */

/*div.main-c {width:100%; height:auto; padding:10rem 0 0 0;}*/
/*article.main-contents-2 {width:90%; height:auto; background-color:#564416; clip-path:polygon(0 0 , 100% 0 , 100% 85% , 50% 100% , 0 85%);}*/
/* p , span */

/*div.button {display:inline-block; padding:1rem 2rem; background-color:#ba1c43; margin:0 auto 4rem auto;}
div.button p {font-size:2rem; font-weight:bold; color:#ffffff;}*/
